/* One compact allowance design for all metered audio tools. */
.allowance-help-trigger {
  grid-column: 2; grid-row: 1; position: relative; display: block;
  width: 28px; height: 28px; padding: 0; margin: 0; border: 0;
  border-radius: 50%; background: transparent; cursor: help;
}
.allowance-help-trigger::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.allowance-help-trigger:focus-visible { outline: 2px solid var(--purple, #ed741c); outline-offset: 4px; }
.allowance-help {
  position: fixed; z-index: 120; width: 256px; max-width: calc(100vw - 24px);
  box-sizing: border-box; padding: 15px 17px; border: 1px solid #ede5de;
  border-radius: 14px; background: #fffdfb; color: #514943;
  box-shadow: 0 8px 28px rgb(55 35 20 / 12%); font-size: .78rem;
  line-height: 1.5; text-align: left; animation: allowance-help-in 120ms ease-out;
}
.allowance-help[hidden] { display: none; }
.allowance-help strong { display: block; color: #2c2520; font-size: .8rem; font-weight: 700; }
.allowance-help p { margin: 7px 0 0; font-size: inherit; line-height: inherit; }
.allowance-help a { display: inline-block; margin-top: 10px; color: var(--purple-dark, #b94f09); font-weight: 700; text-decoration: none; }
.allowance-help a:hover { text-decoration: underline; }
@keyframes allowance-help-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .allowance-help { animation: none; } }
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  /* Reserve the kicker/allowance row before the account read resolves.
     44px fits the ring plus the subscription note, without a late jump. */
  grid-template-rows: minmax(44px, auto);
  align-items: start; align-content: start; column-gap: 12px; row-gap: 0;
}
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading > div:first-child { display: contents; }
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading .section-kicker { grid-column: 1; grid-row: 1; align-self: center; }
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading :is(h2, .suite-tool-blurb) { grid-column: 1 / -1; }
/* These tabs hide the repeated kicker. Use its otherwise empty cell for the
   headline, leaving the allowance/ring in its existing top-right cell. */
.cleanup-group > :is(#noise-remover, #reverb-remover) > .panel-heading h2 {
  grid-column: 1; grid-row: 1; align-self: center;
}
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading .vc-allowance {
  grid-column: 2; grid-row: 1; width: auto; max-width: 128px;
  display: grid; grid-template-columns: minmax(0, 1fr) 28px;
  gap: 4px 8px; align-items: center; justify-self: end; margin: 0;
}
.suite-tool[data-tool] .vc-allowance[hidden] { display: none; }
#convert-vocals .vc-allowance[hidden] { display: none; }
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) .vc-count {
  grid-column: 1; grid-row: 1; min-width: 0; white-space: normal;
  display: block; font-size: .68rem; line-height: 1.35; text-align: right;
}
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) .vc-allowance-track {
  grid-column: 2; grid-row: 1; position: relative; width: 28px; height: 28px;
  border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--purple) var(--allowance-remaining, 0%), #f1e5dd 0);
}
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) .vc-allowance-track::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) .vc-allowance-track > span { display: none; }
:is(.suite-tool[data-tool], #harmony-generator) .vc-allowance-note { grid-column: 1 / -1; font-size: .65rem; line-height: 1.4; }
:is(.suite-tool[data-tool], #harmony-generator) .vc-allowance-note[hidden] { display: none; }
:is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) .vc-allowance[data-allowance-mode="unlimited"] .vc-allowance-track {
  background: var(--purple);
}
#convert-vocals > .panel-heading > .vc-allowance-note { grid-column: 1 / -1; max-width: 680px; margin-top: 8px; text-align: left; }
/* A single visible allowance/upgrade note, consistent across tool landings. */
.splitter-free-note {
  margin: 24px 0; padding: 20px 24px; border: 1px solid #dbe9df;
  border-radius: 12px; background: #f4fbf7; text-align: center;
}
.splitter-free-note p { margin: 0; color: #3f5a47; font-size: .85rem; line-height: 1.65; }
.splitter-free-note a { color: var(--purple-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) {
  :is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading { column-gap: 8px; }
  :is(.suite-tool[data-tool], #convert-vocals, #harmony-generator) > .panel-heading .vc-allowance { max-width: 112px; }
  .splitter-free-note { padding: 18px 20px; }
}