/* Labeltron storefront polish — v206
   Loaded after site-nav.css; high-specificity overrides for the generated
   storefront and the C3-injected plans surface.

   v206 removed dead rules: .floor-status, .floor-empty, .floor-sep,
   .radio-q-head and the tablet floor rail — none of those elements ship in
   the page any more (the floor count/empty state were markup orphans). */

/* Anchor landings clear the sticky header (67px desktop / 113px mobile). */
html{scroll-padding-top:84px}
#radio,#featured,#buy,#packs,#catalog,#faq,#pricing{scroll-margin-top:0}
@media (max-width:980px){
  html{scroll-padding-top:124px}
}

/* Hero: brighter supporting copy and stat labels. */
.hero-sub{color:#c3d8c9}
.hero-meta .hm b{font-size:1.8rem}
.hero-meta .hm span{color:#b9cfbf;font-size:.7rem;letter-spacing:.14em}

/* Plan CTAs: one line, equal height on all four tiers. */
#pricing .price-card .sub-btn{
  white-space:nowrap;
  padding:.72rem .85rem;
  font-size:.8rem;
  min-height:44px;
}
#pricing .price-card .sub-btn:focus-visible{
  outline:2px solid var(--teal2);
  outline-offset:3px;
}

/* Super Headliner: platinum top tier instead of off-palette purple. */
#pricing .price-card[data-tier="SUPERHEADLINER"]{
  border-color:rgba(234,244,236,.42);
  box-shadow:0 0 28px rgba(234,244,236,.08);
}
#pricing .price-card[data-tier="SUPERHEADLINER"] .price-amt{
  background:linear-gradient(135deg,#eaf4ec,#b9cfbf);
  -webkit-background-clip:text;
  background-clip:text;
}
#pricing .price-card[data-tier="SUPERHEADLINER"] .limited{
  background:#eaf4ec;
  color:#03110b;
  box-shadow:0 2px 10px rgba(234,244,236,.25);
}

/* Radio: clearer scrubber and secondary time readout. */
#radio-bar::before{
  height:12px;
  background:#081a10;
  box-shadow:inset 0 0 0 1px rgba(74,222,128,.18);
}
#radio-fill{box-shadow:0 0 12px rgba(74,222,128,.4)}
#radio-time,#radio-dur{color:#b9cfbf}

/* Keyboard affordances on the floor cards. */
.feat-card .make:focus-visible,
.feat-card .play:focus-visible,
.feat-card .artlink:focus-visible{
  outline:2px solid var(--teal2);
  outline-offset:3px;
}


/* Hero CTA hierarchy: primary, outlined studio, tertiary price link. */
.hero-cta .btn-price{
  background:transparent;
  border-color:transparent;
  color:#b9cfbf;
  padding:.72rem .35rem;
  font-size:.86rem;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(74,222,128,.45);
  text-underline-offset:4px;
}
.hero-cta .btn-price:hover{
  color:var(--teal2);
  background:transparent;
  border-color:transparent;
  text-decoration-color:var(--teal2);
}
@media (min-width:641px) and (max-width:980px){
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:440px;margin:0 auto}
  .hero-cta .btn-hero{grid-column:1/-1}
}
@media (max-width:640px){
  .hero-cta{grid-template-columns:1fr}
  .hero-cta .btn-price{justify-self:center;text-align:center}
  .hero-cta .btn-studio{grid-column:auto}
}


/* Radio controls: LOOP is a brand control, not a genre hue. */
#radio-loop.on{
  background:var(--teal2);
  color:#04140c;
  border-color:transparent;
}
#radio-q li:focus-visible{
  outline:2px solid var(--teal2);
  outline-offset:2px;
}


/* Floor filters on tablet/mobile: scrollable rail, never a tall wrap. */
@media (max-width:980px){
  .floor-chips{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    padding:.1rem 1.1rem .25rem 0;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .floor-chips::-webkit-scrollbar{display:none}
  .floor-chips .fchip{
    flex:none;
    scroll-snap-align:start;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* Keyboard seek affordance on the radio scrubber. */
#radio-bar:focus-visible{
  outline:2px solid var(--teal2);
  outline-offset:3px;
  border-radius:6px;
}

/* Radio scrubber: larger hit area without changing the visible track. */
#radio-bar{
  height:12px;
  padding:12px 0;
  box-sizing:content-box;
}
#radio-fill{height:12px}
@media (max-width:980px){
  #radio-bar{padding:16px 0}
}


/* ── v206: editorial polish layer ───────────────────────────────────────────
   The generated inline CSS accumulated 160 selectors declared more than once
   and 59 class names with no markup. This layer fixes the seams the duplicate
   cascade left: doubled borders, two different card radii, and a section
   rhythm that swung between 1.55rem and 3.6rem. */

/* One card recipe. 12px + one hairline everywhere; no 2px borders. */
.feat-card,
.price-card,
.vault-copy,
.vault-item,
details.faq,
.gcard,
.step{
  border-radius:12px;
  border-width:1px;
  border-color:color-mix(in srgb, var(--teal) 22%, var(--line));
}

/* Section rhythm: one step, generous but even. */
section{margin:2.6rem 0}
#featured{margin:2rem auto 2.6rem}
#how{margin:2.2rem 0 2.6rem}

/* Lede width and color: one measure for every section. */
.lede{max-width:64ch;color:#b9cfbf}

/* Hero: tighter vertical rhythm. */
.hero{padding:2.6rem 1.5rem 2.4rem}
.hero-kicker{margin-bottom:.9rem}
.hero-sub{max-width:56ch;margin-inline:auto}
.eq{opacity:.7}

/* Floor filters: quieter chips that read as a control rail, not buttons.
   v213: font-size was .62rem (9.92px) here — and because store-polish.css loads
   AFTER the page's inline <style>, this beat every .fchip size set there. These
   chips are the primary genre filter on the storefront; 9.9px was the smallest
   interactive text on the page. */
.floor-chips{gap:.3rem}
.fchip{
  font-size:.74rem;
  letter-spacing:.04em;
  border-color:color-mix(in srgb, var(--teal) 16%, var(--line));
}
.fchip.on{
  background:color-mix(in srgb, var(--teal) 82%, #04140c);
  color:#04140c;
  border-color:transparent;
}

/* Cards: hover lift only on pointer devices. */
@media (hover:hover){
  .feat-card:hover{transform:translateY(-2px)}
}

/* Plans: featured tier keeps its ring inside the shared recipe. */
#pricing .price-card.featured{
  border-color:color-mix(in srgb, var(--teal2) 55%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--teal2) 30%, transparent),
             0 18px 44px rgba(0,0,0,.35);
}

/* FAQ: one open marker, consistent spacing. */
details.faq{
  padding:.9rem 1rem;
  background:linear-gradient(170deg,rgba(255,255,255,.028),rgba(255,255,255,.006) 55%),var(--panel);
}
details.faq summary{font-weight:600}
details.faq[open]{border-color:color-mix(in srgb, var(--teal2) 40%, var(--line))}

/* Footer: quieter, aligned to the same content width. */
#site-foot{padding:2.6rem 1.2rem 1.6rem;border-top:1px solid color-mix(in srgb, var(--teal) 14%, transparent)}
.foot-grid{max-width:1080px;margin:0 auto}