:root{
    /* Shared polish tokens (polish-tokens.md) */
    --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
    --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
    --space-12:48px; --space-16:64px; --space-22:88px; --space-28:112px;
    --gutter:20px;
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
    --text-display:clamp(2.5rem,10.5vw,4.6rem);
    --text-headline:clamp(1.9rem,7.5vw,3.1rem);
    --text-title:1.1875rem;
    --text-body:1rem;
    --text-sub:clamp(1.02rem,4.4vw,1.3rem);
    --text-caption:.78rem;
    --leading-display:1.05; --leading-headline:1.1;
    --leading-body:1.45;    --leading-prose:1.5;
    --track-display:-.027em; --track-headline:-.022em; --track-eyebrow:.26em;
    --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px;
    --radius-pill:999px;
    --hairline:1px solid rgba(233,220,192,.08);
    --hairline-warm:1px solid rgba(233,220,192,.10);
    --hairline-strong:1px solid rgba(201,164,92,.30);
    --shadow-rest:0 1px 2px rgba(6,13,24,.50),0 14px 34px rgba(6,13,24,.34);
    --shadow-hover:0 2px 4px rgba(6,13,24,.55),0 24px 48px rgba(6,13,24,.46);
    --shadow-float:0 2px 6px rgba(6,13,24,.40),0 24px 60px rgba(6,13,24,.50);
    --ease:cubic-bezier(0.28,0.11,0.32,1);
    --dur-fast:.3s; --dur-med:.45s; --dur-reveal:.9s;
    --stagger:.08s;
    --tap-min:44px;
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-t:env(safe-area-inset-top,0px);
    /* ============================================================
       REV7 DESIGN SYSTEM (fleet lane B1) — full doc: PALETTE.md.
       NAVY is the ground, GOLD is the frame, ORANGE is the action.
       Ratios: ~75% navy surfaces / ~17% gold frame + warm tints /
       ~8% orange, spent only on actions, play states and offers.
       Legacy names survive as aliases so rev1-rev6 rules keep
       working; new work uses the semantic names.
       ============================================================ */
    /* Navy foundation (brand navy #0B1526 + depths) */
    --navy-950:#060D18;   /* page ground, deepest */
    --navy-900:#0B1526;   /* BRAND NAVY: raised sections, tiles */
    --navy-850:#0E1A2E;   /* panels: sheet, filter panel, inputs */
    --navy-800:#122239;   /* card tint on the ground, pad/step cells */
    --navy-700:#1B3050;   /* hover surfaces, cell edges */
    --panel:var(--navy-850);
    --glass-bar:rgba(6,13,24,.72);
    --glass-bar-strong:rgba(6,13,24,.86);
    --glass-dock:rgba(6,12,22,.92);
    --scrim:rgba(3,7,14,.62);
    /* Orange: THE accent. Fills + action + play + offers.
       On navy it is a fill color (3.2:1) - accent TEXT on navy is
       always --accent-bright (AA 5.4:1); white text on accent
       fills is AA (5.7:1). Never small orange text on navy. */
    --accent:#B93A03;         /* BRAND ORANGE */
    --accent-hover:#CE4405;   /* CTA hover fill: white on it = AA 4.7:1 */
    --accent-bright:#E8622C;  /* accent text/glow on navy */
    --accent-soft:rgba(185,58,3,.16);
    --accent-glow:rgba(232,98,44,.35);
    /* Gold: the frame. Borders, hairlines, eyebrows, decoration,
       highlight fills (with --ink-on-gold), gold text on navy (AAA). */
    --gold:#C9A45C;           /* BRAND GOLD frame (7.8:1 on navy) */
    --gold-bright:#DCC084;    /* gold text on navy (AAA 10.4:1) */
    --gold-pop:#E8C476;       /* gold highlight fill (10.2:1 w/ ink-on-gold) */
    --gold-deep:#7C5F00;      /* gold text on paper (AA 5.3:1) */
    --gold-soft:rgba(201,164,92,.08);
    --ink-on-gold:#241B06;    /* text on gold fills (AAA) */
    --frame:1px solid rgba(201,164,92,.30);
    --frame-strong:1px solid rgba(201,164,92,.45);
    /* Warm neutrals */
    --paper:#F6F1E8;          /* light sections, warmed to the palette */
    --ink-dark:#1D1D1F;       /* on paper: AAA 15.0:1 */
    --ink-light:#F5F5F7;      /* on navy: AAA 16.8:1 */
    --muted-dark:#655E54;     /* on paper: AA 5.7:1 */
    --muted-light:#A7A099;    /* on navy: AAA 7.1:1 / panel AA 6.7:1 */
    --champagne:#E9DCC0;      /* warm gold-tint text on navy (AAA) */
    /* Semantic action tokens */
    --cta-bg:linear-gradient(180deg,var(--accent-hover),var(--accent));
    --cta-ink:#FFFFFF;        /* text ON accent fills (AA 5.7:1) */
    --focus:var(--accent-bright);
    --play:var(--accent);
    --play-bright:var(--accent-bright);
    /* Legacy aliases (rev1-rev6 names -> rev7 values) */
    --black:var(--navy-950);
    --nearblack:var(--navy-900);
    --light:var(--paper);
    --gold-text-on-light:var(--gold-deep);
    --ember:var(--accent);
    --ember-bright:var(--accent-bright);
    --dock-h:0px;
  }
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  /* Scroll law (2026-10-14): the page scrolls vertically ONLY — no horizontal
     scroll, no sideways rubber-band pull, no pinch zoom (viewport meta).
     overflow-x:clip is preferred (it creates no scroll container, so the
     sticky bars keep working); hidden is the fallback for older engines. */
  html{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
  body{overflow-x:clip;overscroll-behavior-x:none}
  body{
    margin:0;
    background:var(--black);
    color:var(--ink-light);
    font-family:var(--font);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    padding-bottom:var(--dock-h);
  }
  h1,h2,h3,p{margin:0}
  img{display:block;max-width:100%}
  a{-webkit-tap-highlight-color:transparent}
  button{font-family:inherit;-webkit-tap-highlight-color:transparent}

  /* ---------- Sticky bar ---------- */
  .bar{
    position:sticky;top:0;z-index:50;
    padding-top:var(--safe-t);
    background:var(--glass-bar);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-bottom:var(--hairline);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 34px rgba(0,0,0,.32);
  }
  .bar-in{
    max-width:980px;margin:0 auto;padding:0 20px;height:52px;
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .bar .brand{
    color:var(--ink-light);text-decoration:none;
    font-size:.82rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
    display:inline-flex;align-items:center;align-self:stretch;gap:8px;
  }
  .bar .brand svg{height:19px;width:auto;display:block;flex:none}
  .bar .bar-cta{
    color:var(--cta-ink);background:var(--cta-bg);text-decoration:none;
    font-size:.82rem;font-weight:600;letter-spacing:.02em;
    display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
    min-height:var(--tap-min);padding:7px 16px;border-radius:999px;white-space:nowrap;
    box-shadow:0 4px 18px rgba(232,98,44,.30),inset 0 1px 0 rgba(255,255,255,.16);
    transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  }
  .bar .bar-cta:active{transform:scale(.98);opacity:1}
  .ventures{
    display:flex;justify-content:center;align-items:center;gap:16px;
    min-height:44px;padding:0 20px;box-sizing:border-box;background:var(--black);
    border-bottom:var(--hairline);
    font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  }
  .ventures a{color:var(--champagne);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;padding:13px 4px;transition:color var(--dur-fast) var(--ease)}
  .ventures a:hover{color:var(--gold-pop)}
  .ventures .sep{color:var(--ember-bright);opacity:.75}

  /* Promo strip (W2 fix, F-8): navy ground, gold hairline under,
     champagne text, the code as an orange action chip — gold is
     the frame in this system, never a fill. */
  .promo-strip{
    background:var(--navy-900);color:var(--champagne);
    border-bottom:var(--frame-strong);
    text-align:center;padding:9px 14px;
    font-size:13px;font-weight:600;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;
  }
  .promo-strip .promo-code{
    background:var(--accent);color:var(--cta-ink);font-weight:800;
    padding:1px 8px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;
  }

  /* Small-width bar treatment (port of SYB ≤560px): keeps brand + CTA on-screen */
  @media (max-width:560px){
    .bar-in{
      padding-left:max(16px,env(safe-area-inset-left));
      padding-right:max(16px,env(safe-area-inset-right));
      gap:8px;
    }
    .bar .brand{font-size:.7rem;letter-spacing:.13em}
    .bar .bar-cta{padding:8px 12px;font-size:.78rem}
    /* Ventures strip (Home + email): at full size the nowrap email link is
       wider than a phone viewport and pushes the whole page sideways. Shrink
       to fit; P5 fix loop: min-width floor is 44px (tap target) — the email
       link is ~269px and unaffected; the subpage wrap (subpage.css) is what
       keeps the strip from ever pushing at phone widths. */
    .ventures{gap:10px;padding:0 12px;font-size:.64rem;letter-spacing:.14em}
    .ventures a{min-width:44px;padding:13px 2px;justify-content:center}
    .ventures a img{width:22px;height:22px}
  }

  ::selection{background:var(--accent);color:#fff}
  :focus-visible{outline:2px solid var(--focus);outline-offset:3px}

  /* ---------- Sections ---------- */
  section{padding:88px 20px}
  .hero-sec{
    position:relative;
    padding-top:72px;
    background:
      radial-gradient(760px 440px at 50% -10%, rgba(232,196,118,.13), transparent 62%),
      radial-gradient(920px 540px at 88% 112%, rgba(185,58,3,.07), transparent 60%),
      var(--black);
  }
  .dark{background:var(--black);color:var(--ink-light)}
  .coal{background:var(--nearblack);color:var(--ink-light)}
  .light{background:var(--light);color:var(--ink-dark)}
  .inner{max-width:980px;margin:0 auto;text-align:center}
  .narrow{max-width:640px;margin-left:auto;margin-right:auto}

  .eyebrow{
    font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-pop);margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;gap:16px;
  }
  .eyebrow::before,.eyebrow::after{
    content:"";height:1px;width:24px;opacity:.45;
  }
  .eyebrow::before{background:linear-gradient(90deg,transparent,currentColor)}
  .eyebrow::after{background:linear-gradient(90deg,currentColor,transparent)}
  .light .eyebrow{color:var(--gold-deep)}
  .headline{
    font-size:clamp(2.5rem,10.5vw,4.6rem);
    font-weight:700;letter-spacing:-.027em;line-height:1.05;
    text-wrap:balance;font-optical-sizing:auto;
  }
  .headline .line{display:block}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .headline .grad{
      background:linear-gradient(100deg,#f5f5f7 5%,var(--gold-pop) 58%,var(--gold-bright) 95%);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
    }
  }
  .headline-md{
    font-size:clamp(1.9rem,7.5vw,3.1rem);
    font-weight:700;letter-spacing:-.022em;line-height:1.1;
    text-wrap:balance;font-optical-sizing:auto;
  }
  .serif{font-family:Didot,"Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;letter-spacing:.01em}
  .sub{
    margin-top:16px;font-size:clamp(1.02rem,4.4vw,1.3rem);line-height:1.5;
    text-wrap:pretty;
  }
  .dark .sub,.coal .sub{color:var(--muted-light)}
  .light .sub{color:var(--muted-dark)}
  .tagline{
    margin-top:20px;font-size:clamp(1.15rem,5vw,1.6rem);font-weight:400;letter-spacing:-.01em;line-height:1.5;
    color:var(--champagne);text-wrap:pretty;
  }

  /* ---------- CTAs ---------- */
  .cta-row{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:16px}
  .btn{
    display:inline-block;position:relative;overflow:hidden;
    background:var(--cta-bg);color:var(--cta-ink);text-decoration:none;
    font-size:1.02rem;font-weight:600;letter-spacing:.01em;
    padding:14px 30px;border-radius:999px;min-width:230px;text-align:center;
    box-shadow:0 10px 30px rgba(185,58,3,.30),inset 0 1px 0 rgba(255,255,255,.16);
    transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
    border:0;cursor:pointer;box-sizing:border-box;
  }
  .btn::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 55%);
  }
  .btn:active{transform:scale(.98);opacity:1}
  .btn.ghost{
    background:transparent;color:var(--ink-light);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:none;
    transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
  }
  .btn.ghost::after{display:none}
  .light .btn.ghost{color:var(--ink-dark);border-color:rgba(0,0,0,.3)}
  .price-line{display:flex;align-items:baseline;justify-content:center;gap:16px;margin-top:24px}
  .price{font-size:1.5rem;font-weight:700;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
  .price.free{color:var(--gold-deep)}
  .badge{
    display:inline-block;padding:4px 12px;border-radius:999px;
    font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;vertical-align:middle;
  }
  .badge.soon{color:var(--gold-bright);border:1px solid var(--gold-bright)}
  .light .badge.soon{color:var(--gold-deep);border-color:var(--gold-deep)}
  .badge.free{color:var(--gold-pop);border:1px solid var(--gold-pop)}
  .light .badge.free{color:var(--gold-deep);border-color:var(--gold-deep)}
  .badge.save{color:var(--ember-bright);border:1px solid rgba(232,98,44,.6)}

  /* ---------- Cover art ---------- */
  .shot{
    margin:44px auto 0;max-width:560px;
    border-radius:var(--radius-lg);overflow:hidden;position:relative;aspect-ratio:1/1;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:var(--shadow-float);
    transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
  }
  .shot::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  }
  .light .shot{
    border-color:rgba(0,0,0,.07);
    box-shadow:0 2px 6px rgba(0,0,0,.07),0 24px 60px rgba(0,0,0,.20);
  }
  .shot .plx{
    position:absolute;left:0;top:-6%;width:100%;height:112%;
    object-fit:cover;will-change:transform;
  }
  @media (hover:hover){
    .shot:hover{transform:translateY(-5px) scale(1.012);box-shadow:var(--shadow-hover)}
    .light .shot:hover{box-shadow:0 2px 4px rgba(0,0,0,.09),0 24px 48px rgba(0,0,0,.27)}
    .btn:hover{transform:translateY(-1px);box-shadow:0 15px 40px rgba(232,98,44,.32),inset 0 1px 0 rgba(255,255,255,.16)}
    .btn.ghost:hover{border-color:rgba(255,255,255,.55);box-shadow:none}
    .light .btn.ghost:hover{border-color:rgba(0,0,0,.5)}
    .bar .bar-cta:hover{transform:translateY(-1px);box-shadow:0 7px 24px rgba(232,98,44,.40),inset 0 1px 0 rgba(255,255,255,.16)}
  }

  section .inner > .shot:first-child{margin-top:0}
  .shot + .eyebrow{margin-top:44px}

  /* ---------- Estate coming-soon treatment ---------- */
  .estate-shot{background:var(--nearblack)}
  .estate-shot .plx{
    left:-2%;top:-8%;width:104%;height:116%;
    filter:blur(2.5px) saturate(.94) brightness(.94);
  }
  .estate-shot::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.36));
  }
  .estate-shot::after{z-index:2}
  .estate-badge{
    position:absolute;top:50%;left:50%;z-index:3;
    transform:translate(-50%,-50%);
    padding:8px 24px;border-radius:999px;white-space:nowrap;
    font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--gold-pop);
    background:rgba(6,12,22,.58);
    border:1px solid rgba(232,196,118,.55);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.13);
  }

  /* ---------- Shop: category nav + card grid (revamp) ---------- */
  section[id]{scroll-margin-top:calc(118px + var(--safe-t))}
  .shopnav{
    position:sticky;top:calc(52px + var(--safe-t));z-index:40;
    background:var(--glass-bar-strong);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-bottom:var(--hairline);
  }
  .shopnav-in{
    max-width:980px;margin:0 auto;
    padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
    display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .shopnav-in::-webkit-scrollbar{display:none}
  .chip{
    flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
    min-height:var(--tap-min);padding:9px 18px;border-radius:999px;
    border:var(--hairline-strong);
    color:var(--champagne);text-decoration:none;
    font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
    transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .chip:active{background:rgba(232,196,118,.12);transform:scale(.96)}
  @media (hover:hover){
    .chip:hover{color:var(--gold-pop);border-color:var(--gold-pop)}
  }
  .cat-head{margin-bottom:44px}
  .cat-head .sub{max-width:640px;margin-left:auto;margin-right:auto}
  .grid{
    display:grid;grid-template-columns:1fr;gap:24px;text-align:left;
  }
  @media (min-width:700px){
    .grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (min-width:1024px){
    .grid{grid-template-columns:repeat(3,1fr)}
  }
  .card{
    position:relative;display:flex;flex-direction:column;
    background:rgba(255,255,255,.04);
    border:var(--hairline-warm);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-rest);
    transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease);
  }
  @media (hover:hover){
    .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
  }
  .card.playing{
    border-color:rgba(232,98,44,.55);
    box-shadow:var(--shadow-rest),0 0 0 1px rgba(232,98,44,.30),0 18px 44px rgba(185,58,3,.16);
  }
  .card .art{
    position:relative;aspect-ratio:1/1;overflow:hidden;flex:none;
    background:var(--nearblack);
  }
  .card .art img{width:100%;height:100%;object-fit:cover}
  .card .art.tile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    background:
      radial-gradient(420px 300px at 50% 0%, rgba(232,196,118,.14), transparent 65%),
      radial-gradient(520px 380px at 90% 115%, rgba(185,58,3,.10), transparent 60%),
      var(--nearblack);
  }
  .tile .big{
    font-size:clamp(2.4rem,10vw,3.2rem);font-weight:700;letter-spacing:-.02em;line-height:1;
    color:var(--gold-pop);
  }
  .tile .small{
    font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
    color:var(--champagne);opacity:.85;
  }
  .soon-flag{
    position:absolute;top:14px;right:14px;z-index:3;
    padding:6px 14px;border-radius:999px;white-space:nowrap;
    font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-pop);
    background:rgba(6,12,22,.58);
    border:1px solid rgba(232,196,118,.55);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.13);
  }
  .card .body{
    padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;
  }
  .card h3{
    font-size:var(--text-title);font-weight:700;letter-spacing:-.012em;line-height:1.25;
  }
  .card .blurb{font-size:.95rem;line-height:1.5;color:var(--muted-light);text-wrap:pretty}
  .card .fmt{
    font-size:var(--text-caption);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
    color:var(--champagne);opacity:.85;
  }
  .card .foot{margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:14px}
  .card .price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .card .price{font-size:1.3rem}
  .card .btn{min-width:0;width:100%;box-sizing:border-box;padding:14px 20px;font-size:.98rem}
  .card .btn-off{
    opacity:.55;pointer-events:none;
  }
  .micro{
    font-size:var(--text-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-bright);
  }

  /* ---------- Revamp 2 (research fold-in): start-here, ratings slot, lab strip ---------- */
  .start-here{
    font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-pop);
  }
  .rating{
    font-size:.82rem;font-weight:600;color:var(--gold-pop);
    font-variant-numeric:tabular-nums;
  }
  .rating[hidden]{display:none}
  .lab{
    display:flex;gap:9px;align-items:baseline;
    border-top:var(--hairline);padding-top:9px;
    font-size:.78rem;line-height:1.45;color:var(--muted-light);
    font-variant-numeric:tabular-nums;
  }
  .lab span{
    flex:none;font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--gold-bright);
    border:var(--frame-strong);border-radius:4px;padding:1px 5px;
  }

  /* ---------- Revamp 2 (delight): musical-note send-off layer ---------- */
  .note-layer{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
  /* REV13.1 (P2b): scoped to the note layer — the bare .note selector also
     captured the free-808 table's td.note cells and hid every note value. */
  .note-layer .note{
    position:absolute;transform:translate(-50%,-50%);
    color:var(--gold-pop);font-weight:700;line-height:1;opacity:0;
    text-shadow:0 2px 12px rgba(232,196,118,.5);
  }

  /* ---------- Revamp 2: five-fact decision strip ---------- */
  .facts{
    list-style:none;margin:2px 0 0;padding:10px 0 2px;
    border-top:var(--hairline);
    display:flex;flex-direction:column;gap:5px;
  }
  .facts li{
    display:flex;gap:10px;align-items:baseline;
    font-size:.86rem;line-height:1.4;color:var(--ink-light);
    font-variant-numeric:tabular-nums;
  }
  .facts li span{
    flex:none;width:82px;
    font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-bright);
  }
  .facts li em{font-style:normal;color:var(--muted-light)}

  /* ---------- Revamp 2: labeled demo playlists ---------- */
  .playlist{
    margin:2px 0 0;
    background:rgba(255,255,255,.03);
    border:var(--hairline-warm);
    border-radius:var(--radius-md);
    padding:8px;
    display:flex;flex-direction:column;gap:2px;
  }
  .playlist .pl-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:4px 8px 6px;min-height:44px;box-sizing:border-box;
    font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-pop);
  }
  .playlist .pl-head .pl-total{color:var(--muted-light);letter-spacing:.08em}
  /* REV13.1 (P7): card playlists collapse by default — the HEAR IT head is
     the toggle (bound in player.js renderPlaylistBox). Sheet playlists are
     not inside .card and stay expanded. */
  .card .playlist:not(.open) .track{display:none}
  .card .playlist .pl-head{cursor:pointer}
  .track{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:7px 8px;border-radius:var(--radius-sm);
    background:transparent;border:0;color:var(--ink-light);
    text-align:left;cursor:pointer;min-height:var(--tap-min);box-sizing:border-box;
    transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .track:active{transform:scale(.99)}
  .track:hover{background:rgba(232,196,118,.07)}
  .track .t-ic{
    flex:none;width:30px;height:30px;border-radius:999px;
    border:1px solid rgba(232,196,118,.5);
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--gold-pop);font-size:.62rem;
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  }
  .track.active{background:var(--accent-soft)}
  .track.active .t-ic{background:var(--accent);color:var(--cta-ink)}
  .track .t-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .track .t-name{
    font-size:.92rem;font-weight:600;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .track .t-meta{font-size:.76rem;color:var(--muted-light);font-variant-numeric:tabular-nums}
  .track .t-type{
    flex:none;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--champagne);opacity:.75;text-align:right;max-width:112px;line-height:1.35;
  }
  .eq{display:none;align-items:flex-end;gap:2px;height:12px}
  .eq i{width:3px;background:var(--accent-bright);border-radius:1px;animation:eqb 0.9s ease-in-out infinite}
  .eq i:nth-child(2){animation-delay:.25s}.eq i:nth-child(3){animation-delay:.5s}
  @keyframes eqb{0%,100%{height:4px}50%{height:12px}}
  .track.active .eq{display:inline-flex}
  .track.active .t-type{display:none}

  /* ---------- rev13.1 (QC1): track-row layout repair ----------
     Root cause: canvas.t-wave had no CSS size, so paintWave()'s
     backing-store write (clientWidth x DPR) became its layout size
     (600px @DPR2, 900 @DPR3); the flex row then shrank .t-main to
     0px — name ellipsized away, meta stacked per token, .t-type
     overprinted the BPM digits, wave clipped at the card edge.
     Fix: player rows (button.track only — div.track.comp-row compare
     rows keep their rev7 flex) become a grid: play + name + type on
     line 1, meta full-width on line 2, wave full-width on line 3
     with a real CSS size, so the DPR scaling stays in the backing
     store where it belongs. .t-main becomes display:contents so
     name/meta place as grid items directly. */
  button.track{
    display:grid;
    grid-template-columns:30px minmax(0,1fr) auto;
    grid-template-areas:"ic name type" "meta meta meta" "wave wave wave";
    column-gap:10px;row-gap:2px;align-items:center;
  }
  button.track .t-ic{grid-area:ic;align-self:center}
  button.track .t-main{display:contents}
  button.track .t-name{
    grid-area:name;align-self:center;
    white-space:normal;overflow:visible;text-overflow:clip;
  }
  button.track .t-meta{
    grid-area:meta;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  button.track .t-type{grid-area:type;align-self:center}
  button.track .eq{grid-area:type;align-self:center;justify-self:end}
  button.track .t-prog{grid-area:wave}
  button.track canvas.t-wave{
    grid-area:wave;display:block;width:100%;height:28px;min-width:0;
  }

  /* ---------- Revamp 2: cover play overlay ---------- */
  .art-play{
    position:absolute;left:14px;bottom:14px;z-index:3;
    width:52px;height:52px;border-radius:999px;border:1px solid rgba(232,196,118,.65);
    background:rgba(6,12,22,.62);color:var(--gold-pop);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.85rem;cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.13);
    transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  }
  .art-play:active{transform:scale(.94)}
  @media (hover:hover){.art-play:hover{background:var(--accent);color:var(--cta-ink)}}
  .card.playing .art-play{background:var(--accent);color:var(--cta-ink)}

  /* ---------- Revamp 2: details link ---------- */
  .details-link{
    align-self:center;background:none;border:0;cursor:pointer;
    color:var(--champagne);font-size:.82rem;font-weight:600;letter-spacing:.06em;
    padding:8px 12px;min-height:44px;
    text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(232,196,118,.45);
    transition:color var(--dur-fast) var(--ease);
  }
  /* REV13.1 (P5 fix loop): the anchor variant ("Browse the packs →" on
     /learn/) is inline by default, so the base min-height:44px above is
     inert on it — it measured 36 tall while the button variant got 44.
     inline-flex + border-box gives the anchor the same 44px box. */
  a.details-link{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  .details-link:hover{color:var(--gold-pop)}

  /* ---------- Revamp 2: bundle value stack ---------- */
  .stack{border-top:var(--hairline);padding-top:10px}
  .stack-toggle{
    width:100%;background:none;border:0;cursor:pointer;color:var(--gold-pop);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    padding:8px 2px;min-height:40px;text-align:left;
  }
  .stack-toggle .chev{transition:transform var(--dur-fast) var(--ease);font-size:.7rem}
  .stack-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .stack-body{display:none;flex-direction:column;gap:8px;padding:4px 0 6px}
  .stack.open .stack-body{display:flex}
  .stack-row{
    display:flex;align-items:center;gap:12px;
    background:rgba(255,255,255,.03);border:var(--hairline);
    border-radius:var(--radius-sm);padding:8px 10px;
  }
  .stack-row img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none}
  .stack-row .s-main{flex:1;min-width:0;display:flex;flex-direction:column}
  .stack-row .s-name{font-size:.88rem;font-weight:600;line-height:1.3}
  .stack-row .s-meta{font-size:.74rem;color:var(--muted-light);font-variant-numeric:tabular-nums}
  .stack-row .s-price{font-weight:700;font-variant-numeric:tabular-nums}
  .stack-math{
    display:flex;flex-direction:column;gap:3px;padding:8px 2px 0;
    font-size:.88rem;font-variant-numeric:tabular-nums;
  }
  .stack-math .m-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted-light)}
  .stack-math .m-row.total{color:var(--ink-light);font-weight:700;border-top:var(--hairline);padding-top:7px;margin-top:4px}
  .stack-math .m-row .save{color:var(--ember-bright);font-weight:700}

  /* ---------- Revamp 2: trust strip ---------- */
  .trust{
    border-top:var(--hairline);border-bottom:var(--hairline);
    background:var(--nearblack);
    padding:18px 20px;
  }
  .trust-in{
    max-width:980px;margin:0 auto;
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
  }
  .trust span{
    display:inline-flex;align-items:center;gap:8px;
    font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--champagne);white-space:nowrap;
  }
  .trust span::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--gold-pop);flex:none}

  /* ---------- Revamp 2: hero mosaic + stats ---------- */
  .hero-stats{
    margin-top:22px;
    font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted-light);
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;
  }
  .hero-stats b{color:var(--champagne);font-weight:700}
  .hero-stats .dot{color:var(--ember-bright)}
  .mosaic{
    margin:44px auto 0;max-width:760px;
    display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  }
  .mosaic button{
    position:relative;padding:0;border:1px solid rgba(255,255,255,.10);border-radius:12px;
    overflow:hidden;cursor:pointer;background:var(--nearblack);aspect-ratio:1/1;
    transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  }
  .mosaic button img{width:100%;height:100%;object-fit:cover}
  .mosaic button::after{
    content:attr(data-label);position:absolute;left:0;right:0;bottom:0;
    padding:14px 6px 5px;text-align:center;
    font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-light);
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  }
  .mosaic button:active{transform:scale(.97)}
  @media (hover:hover){
    .mosaic button:hover{transform:translateY(-3px);border-color:rgba(232,196,118,.55);box-shadow:0 12px 28px rgba(0,0,0,.45)}
  }
  @media (max-width:560px){.mosaic{gap:6px}.mosaic button::after{font-size:.48rem;letter-spacing:.08em}}

  /* ---------- Revamp 2: art-directed shelf headers ---------- */
  .shelf-motif{
    height:2px;max-width:120px;margin:0 auto 26px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--gold-pop),transparent);
    opacity:.55;
  }
  .motif-ember{background:linear-gradient(90deg,transparent,var(--ember-bright),transparent)}
  .motif-deep{background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
  .shelf-meta{
    margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;
  }
  .shelf-meta .sm-facts{
    font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-light);
    font-variant-numeric:tabular-nums;
  }
  .playall{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    background:transparent;color:var(--gold-pop);
    border:1px solid rgba(232,196,118,.55);border-radius:999px;
    font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    padding:9px 16px;min-height:40px;box-sizing:border-box;
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .playall:active{transform:scale(.96)}
  @media (hover:hover){.playall:hover{background:var(--accent);color:var(--cta-ink)}}


  /* ---------- Study build (2026-10-14): dock v2 + census + license ---------- */
  .p-wave{max-width:980px;margin:8px auto 0;height:44px;position:relative;cursor:pointer}
  .p-wave canvas{display:block;width:100%;height:40px;touch-action:pan-y}
  .p-time{position:absolute;right:2px;bottom:-2px;font-size:.68rem;color:var(--muted-light);font-variant-numeric:tabular-nums;background:rgba(6,12,22,.65);padding:0 4px;border-radius:4px}
  .lic-full{margin-top:10px}
  .lic-full summary{cursor:pointer;color:var(--gold-pop);font-size:.85rem;font-weight:600}
  .lic-full pre,.license-text{white-space:pre-wrap;overflow-wrap:break-word;font-family:inherit;font-size:.86rem;line-height:1.55;color:var(--muted-light);margin:10px 0 0}
  .license-sec{padding:56px 20px;border-top:var(--hairline-warm)}
  .license-in{max-width:820px;margin:0 auto;min-width:0}
  .license-in h2{font-size:var(--text-headline);letter-spacing:var(--track-headline);line-height:var(--leading-headline);margin:0 0 20px}
  .license-lede{color:var(--muted-light);margin:0}
  .license-text{border:var(--hairline-warm);border-radius:var(--radius-md);padding:18px 20px;margin-top:18px;min-width:0}
  /* ---------- Revamp 2: persistent dock (player + mobile action bar) ---------- */
  .dock{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:none;flex-direction:column;
    padding-bottom:var(--safe-b);
    background:var(--glass-dock);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
    backdrop-filter:saturate(180%) blur(22px);
    border-top:1px solid rgba(232,196,118,.28);
    box-shadow:0 -14px 40px rgba(0,0,0,.5);
  }
  .dock.on{display:flex}
  .player{display:none;padding:10px 14px 8px;border-bottom:var(--hairline)}
  .player.on{display:block}
  .player-in{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:12px}
  .player img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;border:1px solid rgba(255,255,255,.12)}
  .p-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .p-title{font-size:.9rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .p-sub{font-size:.74rem;color:var(--muted-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .p-btn{
    flex:none;width:44px;height:44px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(232,196,118,.5);background:transparent;color:var(--gold-pop);
    display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  }
  .p-btn.main{background:var(--accent);color:var(--cta-ink);border-color:var(--accent)}
  .p-btn:active{transform:scale(.94)}
  .p-btn:disabled{opacity:.35;pointer-events:none}
  .p-prog{
    max-width:980px;margin:8px auto 0;height:3px;border-radius:2px;
    background:rgba(255,255,255,.12);cursor:pointer;position:relative;
  }
  .p-prog i{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
  .actionbar{display:none;padding:8px 12px;align-items:center;gap:10px}
  .actionbar.on{display:flex}
  .actionbar .a-main{flex:1;min-width:0;display:flex;flex-direction:column}
  .actionbar .a-name{font-size:.86rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
  .actionbar .a-price{font-size:.76rem;color:var(--gold-pop);font-weight:700;font-variant-numeric:tabular-nums}
  .actionbar .a-hear{
    flex:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    background:transparent;color:var(--gold-pop);border:1px solid rgba(232,196,118,.55);
    border-radius:999px;padding:9px 14px;min-height:40px;
    font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  }
  .actionbar .a-buy{
    flex:none;display:inline-flex;align-items:center;justify-content:center;
    background:var(--cta-bg);color:var(--cta-ink);text-decoration:none;
    border-radius:999px;padding:10px 18px;min-height:40px;box-sizing:border-box;
    font-size:.82rem;font-weight:700;
    box-shadow:0 6px 20px rgba(232,98,44,.30);
  }
  .actionbar .a-buy.off{background:transparent;color:var(--muted-light);border:1px solid rgba(255,255,255,.25);box-shadow:none}
  @media (min-width:701px){.actionbar{display:none !important}}
  /* Compact player on phones: drop the thumb, tighten controls so the
     track title keeps its room. */
  @media (max-width:560px){
    .player{padding:10px 10px 8px}
    .player-in{gap:8px}
    .player img{display:none}
    .p-btn{width:40px;height:40px}
  }

  /* ---------- Revamp 2: product detail sheet ---------- */
  .sheet-backdrop{
    position:fixed;inset:0;z-index:80;background:var(--scrim);
    opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  }
  .sheet-backdrop.on{opacity:1;pointer-events:auto}
  .sheet{
    position:fixed;z-index:81;left:50%;bottom:0;
    transform:translate(-50%,105%);
    width:min(680px,100%);max-height:88vh;max-height:88dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--panel);color:var(--ink-light);
    border:1px solid rgba(232,196,118,.30);border-bottom:0;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow:0 -24px 70px rgba(0,0,0,.6);
    transition:transform var(--dur-med) var(--ease);
    padding-bottom:var(--safe-b);
  }
  .sheet.on{transform:translate(-50%,0)}
  @media (max-width:700px){
    .sheet{left:0;transform:translate(0,105%);width:100%;max-height:94vh;max-height:94dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
    .sheet.on{transform:translate(0,0)}
  }
  .sheet-in{padding:22px 22px 30px;text-align:left}
  .sheet-top{display:flex;gap:16px;align-items:flex-start}
  .sheet-top img{width:96px;height:96px;border-radius:12px;object-fit:cover;flex:none;border:1px solid rgba(255,255,255,.12)}
  .sheet-tile{
    width:96px;height:96px;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:var(--gold-pop);
    border:1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(200px 150px at 50% 0%, rgba(232,196,118,.16), transparent 65%),
      radial-gradient(240px 180px at 90% 115%, rgba(185,58,3,.12), transparent 60%),
      var(--nearblack);
  }
  .sheet-head{flex:1;min-width:0}
  .sheet-head h3{font-size:1.28rem;font-weight:700;letter-spacing:-.014em;line-height:1.2}
  .sheet-promise{margin-top:6px;font-size:.95rem;line-height:1.5;color:var(--muted-light);text-wrap:pretty}
  .sheet-price{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
  .sheet-price .price{font-size:1.35rem}
  .price-disc{font-size:1rem;font-weight:700;color:var(--accent-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
  .sheet-close{
    flex:none;width:40px;height:40px;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.06);border:var(--hairline);color:var(--ink-light);font-size:.95rem;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .sheet .sheet-cta{width:100%;min-width:0;margin-top:18px}
  /* The sheet's one sticky element: its closing CTA bar. */
  .sheet-bar{
    position:sticky;bottom:0;z-index:2;
    margin:22px -22px -30px;padding:12px 22px calc(14px + var(--safe-b));
    background:rgba(14,26,46,.95);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid rgba(232,196,118,.25);
  }
  .sheet-bar .sheet-cta{margin-top:0}
  .sheet-bar .sheet-note{margin-top:8px}
  .sheet-sec{margin-top:24px}
  .sheet-sec > h4{
    font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-pop);margin:0 0 10px;
  }
  .sheet .playlist{margin:0}
  .ledger{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .ledger li{
    display:flex;justify-content:space-between;gap:16px;align-items:baseline;
    padding:7px 0;border-bottom:var(--hairline);font-size:.92rem;
  }
  .ledger li:last-child{border-bottom:0}
  .ledger li b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;flex:none;max-width:64%;text-wrap:pretty}
  .ledger li span{color:var(--muted-light);flex:1;min-width:0}
  .sheet .facts{border-top:0;padding-top:0}
  .sheet-note{font-size:.88rem;line-height:1.55;color:var(--muted-light)}
  .sheet-note b{color:var(--champagne);font-weight:600}
  .rel-row{display:flex;flex-wrap:wrap;gap:8px}
  .rel-chip{
    cursor:pointer;background:rgba(255,255,255,.04);color:var(--champagne);
    border:var(--hairline-strong);border-radius:999px;padding:9px 14px;min-height:40px;
    font-size:.8rem;font-weight:600;box-sizing:border-box;
    transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .rel-chip:active{transform:scale(.96)}
  .rel-chip:hover{border-color:var(--gold-pop);color:var(--gold-pop)}
  .trust-mini{
    display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;
    font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light);
  }
  body.locked{overflow:hidden}

  /* ---------- Reveal motion ---------- */
  .js .reveal{opacity:0;transform:translateY(24px)}
  .js .reveal.in{
    opacity:1;transform:translateY(0);
    transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);
  }
  .js .reveal.d1.in{transition-delay:.08s}
  .js .reveal.d2.in{transition-delay:.16s}
  .js .reveal.d3.in{transition-delay:.24s}

  /* ---------- Footer ---------- */
  footer{
    background:var(--black);
    color:var(--muted-light);padding:56px 20px calc(64px + env(safe-area-inset-bottom));text-align:center;
    border-top:var(--hairline);
    box-shadow:inset 0 1px 0 rgba(232,196,118,.05);
  }
  .footer-in{max-width:980px;margin:0 auto}
  footer .company{color:var(--ink-light);font-size:1rem;letter-spacing:.09em;margin-bottom:8px}
  footer .founder{font-size:.88rem;margin-bottom:8px}
  footer p{font-size:.88rem}
  footer a{color:var(--muted-light);text-decoration:underline;text-underline-offset:3px}
  footer p a{display:inline-block;padding:12px 0;margin:-12px 0}

  @media (min-width:700px){
    section{padding:112px 20px}
    .cta-row{flex-direction:row;justify-content:center}
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .js .reveal{opacity:1;transform:none}
    .js .reveal.in{transition:none}
    .shot,.btn,.bar .bar-cta,.ventures a,.card,.chip,.track,.art-play,.mosaic button,.sheet,.sheet-backdrop,.eq i{transition:none;animation:none}
    .note-layer{display:none}
  }

  /* ================================================================
     REVAMP 3 — declutter: landing is an entry, Browse is the catalog.
     Landing surfaces: hero, featured carousel, two solo spotlights,
     two-axis category tiles. All product cards live in Browse mode.
     ================================================================ */

  /* Landing sections hide while browsing; browse section only exists then */
  /* REVAMP 6: ONE catalog — the merge removed browse-mode hiding entirely.
     Landing sections and #browseSec are always in flow; the cards live
     permanently in #browseGrid (which is also the no-JS catalog). */

  /* ---------- Featured carousel ---------- */
  .feat-wrap{position:relative;max-width:860px;margin:40px auto 0;text-align:left}
  .feat-track{
    display:flex;gap:16px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;padding:4px 2px 10px;
  }
  .feat-track::-webkit-scrollbar{display:none}
  .feat-slide{
    flex:0 0 100%;scroll-snap-align:start;
    display:flex;flex-direction:column;
    background:rgba(255,255,255,.04);border:var(--hairline-warm);
    border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-rest);
  }
  @media (min-width:900px){.feat-slide{flex-basis:88%}}
  .feat-slide .f-art{position:relative;aspect-ratio:16/9;overflow:hidden;flex:none;background:var(--nearblack)}
  .feat-slide .f-art img{width:100%;height:100%;object-fit:cover}
  .feat-slide .f-art.f-art-hb img{object-position:50% 46%}
  @media (min-width:700px){
    .feat-slide{flex-direction:row}
    .feat-slide .f-art{aspect-ratio:auto;width:248px;min-height:248px}
    .feat-slide .f-art img{position:absolute;inset:0}
  }
  .feat-slide .f-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
  .feat-slide .f-kicker{
    font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-light);
  }
  .feat-slide h3{font-size:1.3rem;font-weight:700;letter-spacing:-.014em;line-height:1.2}
  .feat-slide .f-line{font-size:.96rem;line-height:1.5;color:var(--muted-light);text-wrap:pretty}
  .feat-slide .f-foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:12px}
  .feat-slide .price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .feat-slide .f-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .feat-slide .btn{min-width:0;padding:12px 22px;font-size:.95rem}
  .feat-slide .btn.ghost{padding:11px 20px}
  .feat-nav{
    max-width:860px;margin:14px auto 0;display:flex;align-items:center;gap:16px;
  }
  .feat-arrow{
    width:46px;height:46px;border-radius:999px;flex:none;cursor:pointer;
    border:1px solid rgba(232,196,118,.55);background:transparent;color:var(--gold-pop);
    font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
  }
  .feat-arrow:active{transform:scale(.94)}
  .feat-arrow:disabled{opacity:.32;pointer-events:none}
  @media (hover:hover){.feat-arrow:hover{background:var(--accent);color:var(--cta-ink)}}
  .feat-dots{display:flex;gap:8px;align-items:center}
  .feat-dot{
    width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,.25);transition:background var(--dur-fast) var(--ease),width var(--dur-fast) var(--ease);
  }
  .feat-dot.on{background:var(--gold-pop);width:22px}
  .feat-count{font-size:.78rem;color:var(--muted-light);font-variant-numeric:tabular-nums;margin-left:auto;letter-spacing:.08em}

  /* ---------- Solo spotlights ---------- */
  .spot-art{margin:0 auto;max-width:520px}
  /* FIRST TASTE spotlight: show the FULL cover. The artwork carries text
     to its edges (masthead top-left, "10 / 55" top-right, royalty line at
     the foot), so the shared .plx parallax overscan (112% height, cover
     fit) crops it on every side. Spotlight-only override: contain-fit at
     natural size on a backdrop matched to the artwork's dark surround,
     and the parallax transform is disabled for this figure. */
  .spot-art{background:var(--navy-950)}
  .spot-art .plx{top:0;height:100%;object-fit:contain;transform:none!important}
  .spot-facts{
    margin:26px auto 0;max-width:520px;text-align:left;
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
    font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--champagne);
    font-variant-numeric:tabular-nums;
  }
  .spot-facts span{display:inline-flex;align-items:center;gap:8px}
  .spot-facts span::before{content:"";width:5px;height:5px;border-radius:99px;background:var(--gold-pop);flex:none}
  .spot-tile{
    margin:0 auto;max-width:520px;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;position:relative;
    border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow-float);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    background:
      radial-gradient(420px 300px at 50% 0%, rgba(232,196,118,.14), transparent 65%),
      radial-gradient(520px 380px at 90% 115%, rgba(185,58,3,.10), transparent 60%),
      var(--nearblack);
  }
  .spot-tile .big{font-size:clamp(3rem,13vw,4.4rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--gold-pop)}
  .spot-tile .small{font-size:.85rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--champagne);opacity:.85}

  /* ---------- Category tiles (two axes) ---------- */
  .axis-head{margin:56px auto 26px;max-width:640px}
  .axis-head:first-of-type{margin-top:8px}
  .axis-title{
    font-size:1.35rem;font-weight:700;letter-spacing:-.016em;line-height:1.15;
  }
  .axis-sub{margin-top:8px;font-size:.98rem;line-height:1.5;color:var(--muted-light)}
  .tiles{
    display:grid;grid-template-columns:1fr;gap:14px;text-align:left;max-width:860px;margin:0 auto;
  }
  @media (min-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
  .tile-card{
    display:flex;align-items:center;gap:16px;padding:16px;
    background:rgba(255,255,255,.03);border:var(--hairline-warm);border-radius:var(--radius-lg);
    color:var(--ink-light);text-decoration:none;box-shadow:var(--shadow-rest);
    transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  }
  .tile-card:active{transform:scale(.99)}
  @media (hover:hover){.tile-card:hover{transform:translateY(-3px);border-color:rgba(232,196,118,.45)}}
  .tile-card img{width:76px;height:76px;border-radius:12px;object-fit:cover;flex:none;border:1px solid rgba(255,255,255,.10)}
  .tile-card .tile-artbox{
    width:76px;height:76px;border-radius:12px;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-size:.95rem;font-weight:700;letter-spacing:.04em;color:var(--gold-pop);
    border:1px solid rgba(255,255,255,.10);
    background:radial-gradient(140px 100px at 50% 0%, rgba(232,196,118,.16), transparent 65%),var(--nearblack);
    text-align:center;padding:4px;box-sizing:border-box;
  }
  .tile-card .t-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .tile-card .t-name{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
  .tile-card .t-meta{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);opacity:.85;font-variant-numeric:tabular-nums}
  .tile-card .t-line{font-size:.9rem;line-height:1.45;color:var(--muted-light);text-wrap:pretty}
  .tile-card .t-go{flex:none;color:var(--muted-light);font-size:1.1rem;transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
  @media (hover:hover){.tile-card:hover .t-go{color:var(--gold-pop);transform:translateX(3px)}}
  .browse-all-row{margin-top:34px;display:flex;justify-content:center}

  /* ---------- Browse mode ---------- */
  #browseSec{padding-top:36px}
  .browse-head{text-align:center;margin-bottom:30px}
  .browse-summary{margin-top:10px;font-size:1rem;color:var(--champagne);font-variant-numeric:tabular-nums}
  .browse-heard{margin-top:6px;font-size:.82rem;color:var(--muted-light);font-variant-numeric:tabular-nums}
  .browsebar{
    position:sticky;top:calc(52px + var(--safe-t));z-index:45;
    margin:0 -20px 26px;padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
    display:flex;align-items:center;gap:10px;
    background:var(--glass-bar-strong);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-bottom:var(--hairline);
  }
  .bb-btn{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-sizing:border-box;
    min-height:42px;padding:9px 16px;border-radius:999px;
    border:var(--hairline-strong);background:transparent;color:var(--champagne);
    font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
    transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  }
  .bb-btn:active{transform:scale(.96)}
  @media (hover:hover){.bb-btn:hover{color:var(--gold-pop);border-color:var(--gold-pop)}}
  .bb-btn .bb-count{
    background:var(--accent);color:var(--cta-ink);border-radius:99px;
    min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.72rem;font-weight:700;letter-spacing:0;
  }
  .bb-n{margin-left:auto;font-size:.82rem;color:var(--muted-light);font-variant-numeric:tabular-nums;white-space:nowrap}
  @media (min-width:1024px){.browsebar{display:none}}
  .browse-layout{display:block;text-align:left}
  @media (min-width:1024px){
    .browse-layout{display:grid;grid-template-columns:236px 1fr;gap:36px;align-items:start}
  }
  /* Filter panel: left rail on desktop, bottom sheet on mobile */
  .fp{
    background:var(--panel);border:1px solid rgba(232,196,118,.22);border-radius:var(--radius-lg);
    padding:18px;text-align:left;
  }
  @media (max-width:1023.5px){
    .fp{
      position:fixed;left:0;right:0;bottom:0;z-index:90;
      border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:0;
      max-height:86vh;max-height:86dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
      transform:translateY(105%);transition:transform var(--dur-med) var(--ease);
      padding-bottom:calc(18px + var(--safe-b));
      box-shadow:0 -24px 70px rgba(0,0,0,.65);
    }
    .fp.open{transform:translateY(0)}
  }
  @media (min-width:1024px){.fp{position:sticky;top:76px}}
  .fp-backdrop{
    position:fixed;inset:0;z-index:89;background:rgba(3,7,14,.55);
    opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease);
  }
  .fp-backdrop.on{opacity:1;pointer-events:auto}
  @media (min-width:1024px){.fp-backdrop{display:none}}
  .fp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .fp-head .fp-title{font-size:.95rem;font-weight:700;letter-spacing:.02em;flex:1}
  .fp-clear{
    background:none;border:0;cursor:pointer;color:var(--gold-pop);
    font-size:.8rem;font-weight:600;padding:8px 6px;min-height:40px;
    text-decoration:underline;text-underline-offset:3px;
  }
  .fp-close{
    width:40px;height:40px;border-radius:999px;cursor:pointer;flex:none;
    background:rgba(255,255,255,.06);border:var(--hairline);color:var(--ink-light);font-size:.9rem;
    display:inline-flex;align-items:center;justify-content:center;
  }
  @media (min-width:1024px){.fp-close{display:none}.fp-head .fp-title{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-pop)}}
  .fp-group{border-top:var(--hairline);padding:14px 0 6px}
  .fp-group:first-of-type{border-top:0}
  .fp-group h5{
    margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pop);
  }
  .fp-val{
    display:flex;align-items:center;gap:10px;cursor:pointer;
    min-height:40px;padding:5px 6px;border-radius:8px;font-size:.92rem;
    transition:background var(--dur-fast) var(--ease);
  }
  .fp-val:hover{background:rgba(232,196,118,.06)}
  .fp-val input{accent-color:var(--accent);width:17px;height:17px;flex:none;cursor:pointer}
  .fp-val .v-name{flex:1;min-width:0}
  .fp-val .v-count{color:var(--muted-light);font-size:.8rem;font-variant-numeric:tabular-nums}
  .fp-val.off{opacity:.38}
  .fp-val.off input{pointer-events:none}
  .fp-note{font-size:.74rem;color:var(--muted-light);line-height:1.45;padding:2px 6px 6px}
  .fp-max{display:flex;align-items:center;gap:8px;padding:4px 6px 8px;font-size:.9rem;color:var(--muted-light)}
  .fp-max input{
    width:84px;background:rgba(255,255,255,.05);border:var(--hairline);border-radius:8px;
    color:var(--ink-light);padding:8px 10px;font-size:.92rem;font-family:inherit;font-variant-numeric:tabular-nums;
  }
  .fp-foot{margin-top:16px;display:none}
  @media (max-width:1023.5px){.fp-foot{display:block}}
  .fp-foot .btn{width:100%;min-width:0}
  /* Results column */
  .pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
  .pills:empty{display:none}
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid rgba(232,196,118,.5);border-radius:999px;
    padding:7px 8px 7px 14px;font-size:.8rem;font-weight:600;color:var(--champagne);
    background:rgba(232,196,118,.07);
  }
  .pill button{
    width:24px;height:24px;border-radius:99px;border:0;cursor:pointer;flex:none;
    background:rgba(255,255,255,.10);color:var(--ink-light);font-size:.72rem;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .pill.excl{border-style:dashed;color:var(--muted-light);background:transparent}
  .pill.excl .p-name{text-decoration:line-through}
  .pill-clear{
    background:none;border:0;cursor:pointer;color:var(--gold-pop);font-size:.82rem;font-weight:600;
    padding:8px 6px;min-height:40px;text-decoration:underline;text-underline-offset:3px;
  }
  .results-head{
    display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px;
  }
  .results-n{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
  .results-head .playall{margin-left:auto}
  .sort-wrap{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted-light)}
  .sort-wrap select{
    background:var(--panel);color:var(--ink-light);border:var(--hairline-strong);border-radius:10px;
    padding:9px 10px;font-size:.86rem;font-family:inherit;min-height:42px;cursor:pointer;
  }
  #browseGrid{grid-template-columns:1fr}
  @media (min-width:700px){#browseGrid{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1024px){#browseGrid{grid-template-columns:repeat(2,1fr)}}
  /* Shelf tag + now-playing flag on browse cards */
  .shelf-tag{
    position:absolute;top:14px;left:14px;z-index:3;display:none;
    padding:6px 12px;border-radius:999px;
    font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--champagne);background:rgba(6,12,22,.58);
    border:1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  #browseGrid .shelf-tag{display:inline-block}
  .np-flag{
    position:absolute;left:14px;bottom:64px;z-index:3;
    padding:6px 12px;border-radius:999px;
    font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cta-ink);background:var(--accent);
  }
  /* Empty state */
  .browse-empty{
    border:var(--hairline-warm);border-radius:var(--radius-lg);
    padding:34px 24px;text-align:center;background:rgba(255,255,255,.03);
  }
  .browse-empty h3{font-size:1.15rem;font-weight:700;margin-bottom:8px}
  .browse-empty p{color:var(--muted-light);font-size:.95rem;line-height:1.55}
  .browse-empty .btn{margin-top:18px;min-width:0}
  .closest{margin-top:28px;text-align:left}
  .closest h4{
    font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pop);margin:0 0 10px;text-align:center;
  }
  .closest-row{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
    background:rgba(255,255,255,.03);border:var(--hairline);border-radius:var(--radius-sm);
    padding:8px 10px;margin-top:8px;color:var(--ink-light);font-family:inherit;
    transition:background var(--dur-fast) var(--ease);
  }
  .closest-row:hover{background:rgba(232,196,118,.07)}
  .closest-row img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
  .closest-row .c-tile{
    width:44px;height:44px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
    font-size:.66rem;font-weight:700;color:var(--gold-pop);border:1px solid rgba(255,255,255,.12);
    background:var(--nearblack);text-align:center;padding:2px;box-sizing:border-box;
  }
  .closest-row .c-main{flex:1;min-width:0;display:flex;flex-direction:column}
  .closest-row .c-name{font-size:.9rem;font-weight:600;line-height:1.3}
  .closest-row .c-meta{font-size:.75rem;color:var(--muted-light);font-variant-numeric:tabular-nums}
  .closest-row .c-price{font-weight:700;font-variant-numeric:tabular-nums}

  /* Dock simplification: one bar at a time — the action bar yields
     while the player is open (revamp 2 stacked both). */
  #dock:has(.player.on) .actionbar.on{display:none}

  @media (prefers-reduced-motion:reduce){
    .feat-track{scroll-behavior:auto}
    .fp{transition:none}
    .tile-card,.feat-arrow,.feat-dot,.bb-btn,.fp-val,.closest-row{transition:none}
  }
  .bb-count[hidden]{display:none}
  @media (max-width:1023.5px){.browse-head .bb-btn{display:none}}


  /* ============ REVAMP 4 — design elevation + V4 components ============ */
  .hero-sec .headline{font-size:clamp(2rem,8.4vw,4.35rem)}
  .headline-md{font-size:clamp(2.05rem,7.5vw,3.4rem)}
  .eyebrow{letter-spacing:.26em}
  .eyebrow::before,.eyebrow::after{width:40px}
  .hero-sec .btn:not(.ghost){padding:16px 36px}
  .card{border-radius:var(--radius-xl)}
  .card .body{padding:22px;gap:12px}
  .card h3{font-size:1.26rem}
  .card .price{font-size:1.38rem}
  .card .art img{transition:transform var(--dur-med) var(--ease)}
  @media (hover:hover){.card:hover .art img{transform:scale(1.03)}}
  .feat-slide{border-radius:var(--radius-xl)}
  .feat-slide .f-body{padding:26px}
  .feat-slide h3{font-size:1.42rem}
  #spotlight-first-taste{background:radial-gradient(720px 420px at 50% 0%,rgba(232,196,118,.09),transparent 65%),var(--nearblack)}
  #spotlight-first-taste .spot-art{max-width:600px;margin-left:auto;margin-right:auto}
  #spotlight-first-taste .spot-art img{border:var(--hairline-strong);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(232,196,118,.12)}
  .offer-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid rgba(232,98,44,.65);color:var(--ember-bright);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
  .offer-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember-bright)}
  .sheet-offer{margin-top:14px;padding:10px 14px;border:1px solid rgba(232,98,44,.55);border-radius:var(--radius-md);color:var(--ember-bright);font-weight:700;letter-spacing:.04em;text-align:center}
  .sheet-guarantee{margin-top:10px;text-align:center;color:var(--muted-light);font-size:.9rem;letter-spacing:.02em}
  .card .guarantee-line{margin:0;font-size:.82rem;color:var(--muted-light);letter-spacing:.02em}
  .card .free-note{margin:0;font-size:.82rem;color:var(--muted-light);line-height:1.5}
  .sheet-own{margin-top:6px;text-align:center;color:var(--muted-light);font-size:.9rem;letter-spacing:.02em}
  .sheet-rating{margin-top:8px}
  .sheet-affiliate{border:var(--hairline-strong);border-radius:var(--radius-md);padding:16px 18px;background:rgba(232,196,118,.06)}
  .bundle-comp{margin-top:18px}
  .bundle-comp-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .bundle-comp-name{font-weight:700}
  .bundle-comp-price{font-weight:700;color:var(--champagne);font-variant-numeric:tabular-nums;flex:none}
  .bundle-total{margin-top:18px}
  .sheet-xlink{margin-top:14px;text-align:center;color:var(--muted-light)}
  .sheet-xlink a{color:var(--gold-pop)}
  .capture{margin:44px auto 0;max-width:640px;border:var(--hairline-strong);border-radius:var(--radius-xl);background:rgba(232,196,118,.05);padding:28px 24px;text-align:center}
  .capture-title{font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-pop);margin-bottom:12px}
  .capture-line{color:var(--muted-light);line-height:1.55;text-wrap:pretty}
  .capture .cta-row{margin-top:22px;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .capture-note{margin-top:16px;font-size:.85rem;color:var(--muted-light)}

  /* ================================================================
     REVAMP 6 — UX revamp + feature benchmark (A1-A13) components.
     Tokens only; no new palette. Scroll law untouched: everything
     below is in-flow or contained-scroll, vertical page only.
     ================================================================ */
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

  /* Sticky-bar promo chip (appears once the strip scrolls away) */
  .promo-chip{
    margin-left:10px;padding:6px 12px;border-radius:999px;white-space:nowrap;
    background:var(--accent);color:var(--cta-ink);
    font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  }

  /* A3 — proof system */
  .proof-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px;text-align:left}
  @media (min-width:820px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
  .proof-block{
    margin:0;border:var(--hairline);border-radius:var(--radius-lg);
    padding:20px;background:rgba(255,255,255,.03);
    display:flex;flex-direction:column;gap:10px;
  }
  .proof-block blockquote{
    margin:0;font-size:1.06rem;line-height:1.45;font-weight:600;color:var(--ink-light);text-wrap:pretty;
  }
  .proof-block figcaption{color:var(--muted-light);font-size:.86rem;margin-top:auto}
  .proof-block figcaption a{color:var(--gold-pop)}
  .proof-big{font-size:1.12rem;font-weight:800;color:var(--champagne);letter-spacing:.01em}
  .proof-line{color:var(--muted-light);line-height:1.55;font-size:.94rem;text-wrap:pretty}
  .proof-block .details-link{color:var(--gold-pop);font-size:.9rem}

  /* Free-to-paid bridge row (free shelf) */
  .bridge-row{
    margin-top:26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    border:var(--hairline-strong);border-radius:var(--radius-lg);
    padding:16px 18px;background:rgba(232,196,118,.05);text-align:left;
  }
  .bridge-row img{border-radius:10px;flex:none}
  .bridge-main{flex:1 1 220px;min-width:200px}
  .bridge-name{font-weight:700;margin-bottom:6px}
  .bridge-row .price-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

  /* A6/A7 — capture + notify forms */
  .cap-form{margin-top:18px}
  .cap-field{display:block}
  .cap-label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--muted-light);margin-bottom:8px;text-align:left}
  .cap-row{display:flex;gap:10px;flex-wrap:wrap}
  .cap-row input{
    flex:1 1 220px;min-height:48px;padding:12px 14px;border-radius:12px;
    background:var(--panel);color:var(--ink-light);border:var(--hairline-strong);
    font:inherit;font-size:1rem;
  }
  .cap-row .btn{min-height:48px}
  .cap-msg{margin-top:10px;font-size:.9rem;line-height:1.45;text-align:left;min-height:1.2em}
  .cap-msg.ok{color:var(--gold-pop)}
  .cap-msg.err{color:var(--ember-bright)}
  .cap-done{margin-top:14px;text-align:left}
  .footer-capture{max-width:520px;margin:26px auto 0;text-align:left}
  .footer-capture .capture-title{text-align:center}
  .privacy-line{margin-top:14px;font-size:.85rem;color:var(--muted-light)}
  @media (max-width:699px){.qr-block{display:none!important}}

  /* A6 — engagement slide-in (bottom sheet on mobile, corner card on desktop) */
  .slidein{
    position:fixed;z-index:95;left:12px;right:12px;bottom:calc(12px + var(--safe-b));
    max-width:430px;margin-left:auto;
    background:var(--panel);border:var(--hairline-strong);border-radius:var(--radius-xl);
    box-shadow:var(--shadow-float);padding:22px 20px 18px;text-align:left;
    transform:translateY(16px);opacity:0;transition:transform var(--dur-med) var(--ease),opacity var(--dur-med) var(--ease);
  }
  .slidein.on{transform:none;opacity:1}
  @media (min-width:760px){.slidein{left:auto;right:24px;bottom:24px}}
  .slidein-x{
    position:absolute;top:8px;right:8px;width:44px;height:44px;
    background:none;border:0;color:var(--muted-light);font-size:1.05rem;cursor:pointer;
  }
  .slidein-no{
    margin-top:12px;background:none;border:0;color:var(--muted-light);
    font:inherit;font-size:.9rem;cursor:pointer;padding:10px 4px;min-height:44px;
  }
  @media (prefers-reduced-motion: reduce){.slidein{transition:none}}

  /* A1 — search inside the filter panel */
  .fp-search{padding:16px 16px 4px}
  .fp-search label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pop);margin-bottom:8px}
  .fp-search input{
    width:100%;box-sizing:border-box;min-height:46px;padding:11px 12px;border-radius:10px;
    background:var(--panel);color:var(--ink-light);border:var(--hairline-strong);font:inherit;font-size:.95rem;
  }

  /* A8 — shortlist */
  .save-btn{
    background:none;border:var(--hairline);border-radius:999px;color:var(--muted-light);
    font:inherit;font-size:.82rem;font-weight:600;padding:9px 14px;min-height:44px;cursor:pointer;width:100%;
  }
  .save-btn[aria-pressed="true"]{color:var(--cta-ink);background:var(--accent);border-color:transparent}
  .shortlist-strip{
    border:var(--hairline-strong);border-radius:var(--radius-lg);
    background:rgba(232,196,118,.06);padding:14px 16px;margin-bottom:16px;text-align:left;
  }
  .shortlist-strip p{line-height:1.5}
  .shortlist-strip .sl-promo{color:var(--gold-pop);font-weight:700;margin-top:4px}
  .shortlist-strip .sl-actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
  .rail-block{margin-top:34px;text-align:left}
  .rail-block h3{font-size:1.15rem;margin-bottom:12px}
  .rail-row{
    display:flex;align-items:center;gap:12px;padding:10px 0;border-top:var(--hairline);
  }
  .rail-row img{border-radius:8px;flex:none}
  .rail-row .rail-name{flex:1 1 auto;font-weight:600;min-width:120px}
  .rail-row .rail-reason{color:var(--muted-light);font-size:.85rem}
  .rail-row button,.rail-row a.btn{flex:none}

  /* P1-5 — value density line on cards */
  .density{font-size:.84rem;color:var(--champagne);font-variant-numeric:tabular-nums;letter-spacing:.02em}

  /* Heard check on cards (visitor's own listening, localStorage) */
  .heard-chip{
    position:absolute;top:14px;right:14px;z-index:3;
    padding:6px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-on-gold);background:var(--gold-pop);
  }

  /* A9 — stacks & savings */
  .stacks-box{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px;text-align:left}
  @media (min-width:820px){.stacks-box{grid-template-columns:repeat(3,1fr)}}
  .stack-card{border:var(--hairline);border-radius:var(--radius-lg);padding:20px;background:rgba(255,255,255,.03)}
  .stack-card h3{font-size:1.06rem;margin-bottom:10px}
  .stack-card .ledger{margin-top:6px}
  .stack-save{color:var(--accent-bright);font-weight:800}
  .stack-card .rel-row{margin-top:12px}

  /* F3 — free shelf compact rows (name + format + claim; full cards live once, in the catalog grid) */
  .free-list{list-style:none;margin:26px 0 0;padding:0;text-align:left;border-top:var(--hairline)}
  .free-row{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:10px 2px;border-bottom:var(--hairline);
  }
  .free-name{
    flex:1 1 240px;min-width:200px;text-align:left;background:none;border:0;padding:6px 0;cursor:pointer;
    color:inherit;font:inherit;font-weight:700;min-height:44px;
  }
  .free-name:hover{text-decoration:underline}
  .free-meta{color:var(--muted-light);font-size:.88rem;flex:none}
  .free-claim{flex:none;font-weight:700;color:var(--gold-pop);min-height:44px;display:inline-flex;align-items:center}

  /* Coming-soon rail + A7 notify */
  .soon-box{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;text-align:left}
  @media (min-width:820px){.soon-box{grid-template-columns:repeat(2,1fr)}}
  .soon-row{
    display:flex;gap:14px;border:var(--hairline);border-radius:var(--radius-lg);
    padding:16px;background:rgba(255,255,255,.03);align-items:flex-start;
  }
  .soon-row img{border-radius:10px;flex:none}
  .soon-main{flex:1 1 auto;min-width:200px}
  .soon-name{font-weight:700}
  .soon-status{color:var(--gold-pop);font-size:.88rem;font-weight:700;margin-top:2px}
  .soon-note{color:var(--muted-light);font-size:.9rem;line-height:1.5;margin-top:6px}
  .soon-row .cap-form{margin-top:10px}

  /* A10 — FAQ */
  .faq-list{margin-top:24px;display:flex;flex-direction:column;gap:10px}
  .faq-item{
    border:var(--hairline);border-radius:var(--radius-md);padding:4px 18px;background:rgba(255,255,255,.03);
  }
  .faq-item summary{
    cursor:pointer;font-weight:700;padding:14px 0;min-height:44px;
    display:flex;align-items:center;list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item p{color:var(--muted-light);line-height:1.55;padding:0 0 16px;text-wrap:pretty}

  /* Sheet additions: grab handle, trust row, proof line, bridge, pairs-with rail */
  .sheet-grab{
    width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.25);
    margin:2px auto 12px;flex:none;
  }
  .sheet-trustrow{
    margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  }
  .sheet-trustrow span{
    border:var(--hairline);border-radius:999px;padding:7px 12px;
    font-size:.8rem;color:var(--champagne);letter-spacing:.02em;
  }
  .sheet-proof{
    margin-top:12px;text-align:center;color:var(--muted-light);font-size:.9rem;line-height:1.5;
  }
  .sheet-proof a{color:var(--gold-pop)}
  .rel-rail{display:flex;flex-direction:column;gap:12px}
  .rel-card{
    display:flex;align-items:center;gap:12px;text-align:left;width:100%;
    border:var(--hairline);border-radius:var(--radius-md);padding:10px 12px;
    background:rgba(255,255,255,.03);color:var(--ink-light);cursor:pointer;font:inherit;
  }
  .rel-card img{border-radius:8px;flex:none}
  .rel-card .rel-main{flex:1 1 auto;min-width:120px}
  .rel-card .rel-name{font-weight:700;display:block}
  .rel-card .rel-reason{
    display:inline-block;margin-top:4px;font-size:.74rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-on-gold);background:var(--gold-pop);
    border-radius:999px;padding:3px 9px;
  }
  .rel-card .rel-price{font-weight:700;color:var(--champagne);flex:none;font-variant-numeric:tabular-nums}
  .bridge-sec{
    border:var(--hairline-strong);border-radius:var(--radius-md);
    padding:16px 18px;background:rgba(232,196,118,.06);
  }
  .sheet-close-bottom{margin-top:14px;width:100%}

  /* Player dock v2 (P1-1) + action bar disc */
  .p-upnext{
    display:block;font-size:.74rem;color:var(--gold-pop);letter-spacing:.03em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .p-heard{
    padding:5px 14px 9px;font-size:.74rem;color:var(--muted-light);letter-spacing:.03em;text-align:center;
  }
  .a-disc{display:block;color:var(--accent-bright);font-weight:700;font-size:.8rem}
  /* REV13.1 (P9): the display:block above defeats the hidden attribute (author
     display beats the UA [hidden] rule), so a free product kept showing the
     previous paid product's discount line. Same pattern as .rating[hidden]. */
  .a-disc[hidden]{display:none}

  /* Playable hero mosaic (P0-5) */
  .mosaic-tile{position:relative}
  .mosaic-tile .mosaic-play{
    position:relative;display:block;width:100%;padding:0;border:1px solid rgba(255,255,255,.10);
    border-radius:12px;overflow:hidden;cursor:pointer;background:var(--nearblack);aspect-ratio:1/1;
    transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  }
  .mosaic-tile .mosaic-play img{width:100%;height:100%;object-fit:cover;display:block}
  .mosaic button::after{content:none}
  .mosaic-state{
    position:absolute;left:0;right:0;bottom:0;padding:16px 6px 6px;text-align:center;
    font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-light);
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));pointer-events:none;
  }
  .mosaic-details{
    position:absolute;top:6px;right:6px;z-index:2;min-height:32px;padding:6px 10px;
    border-radius:999px;border:1px solid rgba(255,255,255,.25);
    background:rgba(6,12,22,.66);color:var(--ink-light);
    font:inherit;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .mosaic-tile.playing .mosaic-play{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
  .mosaic-tile.playing .mosaic-state{color:var(--accent-bright)}
  @media (hover:hover){.mosaic-tile .mosaic-play:hover{transform:translateY(-3px);border-color:rgba(232,196,118,.55);box-shadow:0 12px 28px rgba(0,0,0,.45)}}
  .mosaic-tile .mosaic-play:active{transform:scale(.97)}
  @media (max-width:560px){.mosaic-state{font-size:.48rem;letter-spacing:.07em}.mosaic-details{font-size:.6rem;padding:5px 8px}}

  /* ================================================================
     REV7 DESIGN SYSTEM — interactive primitives (fleet lane B1).
     The shared kit for the DWELL-PLAN features (sequencer, pads,
     voice switcher, A/B compare, layer mixer, reactive visuals,
     listen-to-unlock). Token-driven only: NAVY surfaces, GOLD
     frames, ORANGE action/play. Builders (B2-B5): use these
     classes as-is; state classes are .on / .now / .hit / .playing
     and [aria-pressed="true"] — do not invent parallel styling.
     ================================================================ */

  /* Free price on dark surfaces: --gold-deep is the paper value;
     on navy the frame gold itself is the AA/AAA choice (7.8:1). */
  .dark .price.free,.coal .price.free,.card .price.free,
  .sheet .price.free,.feat-slide .price.free,.stack-card .price.free{
    color:var(--gold);
  }

  /* Big inviting play button (hero / listen-mode surfaces) */
  .play-lg{
    width:68px;height:68px;border-radius:999px;flex:none;cursor:pointer;
    border:1px solid rgba(255,255,255,.22);
    background:var(--cta-bg);color:var(--cta-ink);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.25rem;
    box-shadow:0 14px 38px rgba(185,58,3,.38),inset 0 1px 0 rgba(255,255,255,.20);
    transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  }
  .play-lg:active{transform:scale(.94)}
  @media (hover:hover){
    .play-lg:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(232,98,44,.42),inset 0 1px 0 rgba(255,255,255,.20)}
  }
  .play-lg.playing{
    box-shadow:0 14px 38px rgba(185,58,3,.38),0 0 0 3px var(--accent-bright),inset 0 1px 0 rgba(255,255,255,.20);
  }

  /* Sound-board pads (DWELL #2/#13): gold-framed cells on navy,
     orange flash on hit. Keyboard-focusable buttons by markup. */
  .pad-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
    margin-top:18px;text-align:left;
  }
  @media (max-width:560px){.pad-grid{grid-template-columns:repeat(3,1fr)}}
  .pad{
    min-height:76px;padding:12px 10px;cursor:pointer;
    border-radius:var(--radius-md);
    border:var(--frame);
    background:var(--navy-800);color:var(--ink-light);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:3px;
    font:inherit;text-align:left;box-sizing:border-box;
    transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .pad .pad-name{font-size:.9rem;font-weight:700;line-height:1.25}
  .pad .pad-meta{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light);font-variant-numeric:tabular-nums}
  .pad:active{transform:scale(.97)}
  @media (hover:hover){.pad:hover{border-color:var(--gold);background:var(--navy-700)}}
  .pad.hit{background:var(--accent);border-color:var(--accent-bright)}
  .pad.hit .pad-meta{color:rgba(255,255,255,.85)}

  /* 16-step sequencer cells (DWELL D1): .on = programmed (orange),
     .now = playhead column (gold frame), both = playing step. */
  .steps{
    display:grid;grid-template-columns:repeat(16,1fr);gap:5px;margin-top:14px;
  }
  @media (max-width:560px){.steps{gap:3px}}
  .step{
    min-height:44px;border-radius:8px;cursor:pointer;padding:0;
    border:1px solid rgba(233,220,192,.12);
    background:var(--navy-800);
    transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .step:active{transform:scale(.93)}
  .step.beat{border-color:rgba(201,164,92,.40)}        /* bar-quarter cells */
  .step.on{background:var(--accent);border-color:var(--accent)}
  .step.now{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
  .step.on.now{background:var(--accent-bright);border-color:var(--gold)}

  /* Segmented switch (DWELL D2 voice switcher / D3 A-B compare) */
  .seg{
    display:inline-flex;gap:4px;padding:4px;border-radius:999px;
    background:var(--navy-800);border:var(--frame);
  }
  .seg button{
    border:0;background:transparent;color:var(--champagne);cursor:pointer;
    font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.06em;
    padding:9px 16px;min-height:40px;border-radius:999px;box-sizing:border-box;
    transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
  }
  .seg button:active{transform:scale(.96)}
  .seg button[aria-pressed="true"]{background:var(--accent);color:var(--cta-ink)}

  /* Layer-mixer fader row (DWELL #1): label, range, readout */
  .fader{
    display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:var(--hairline);
  }
  .fader:last-child{border-bottom:0}
  .fader .f-name{
    flex:0 0 108px;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--champagne);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .fader output{
    flex:0 0 44px;text-align:right;font-size:.82rem;color:var(--muted-light);
    font-variant-numeric:tabular-nums;
  }
  .fader input[type="range"]{
    flex:1;min-width:0;height:44px;margin:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;background:transparent;
  }
  .fader input[type="range"]::-webkit-slider-runnable-track{
    height:6px;border-radius:3px;background:var(--navy-700);
    border:1px solid rgba(201,164,92,.25);
  }
  .fader input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:26px;height:26px;border-radius:999px;margin-top:-11px;
    background:var(--accent);border:2px solid var(--accent-bright);
    box-shadow:0 4px 14px rgba(185,58,3,.40);
  }
  .fader input[type="range"]::-moz-range-track{
    height:6px;border-radius:3px;background:var(--navy-700);
    border:1px solid rgba(201,164,92,.25);
  }
  .fader input[type="range"]::-moz-range-thumb{
    width:22px;height:22px;border-radius:999px;
    background:var(--accent);border:2px solid var(--accent-bright);
    box-shadow:0 4px 14px rgba(185,58,3,.40);
  }
  .fader .f-mute{
    flex:none;width:40px;height:40px;border-radius:999px;cursor:pointer;
    border:var(--frame);background:transparent;color:var(--champagne);
    font-size:.68rem;font-weight:800;letter-spacing:.08em;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .fader .f-mute[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--cta-ink)}

  /* Audio-reactive visual frame (DWELL #10): the visual sits in a
     gold frame; while its demo plays, the frame lights orange.
     Decorative layer only - never carries needed information. */
  .viz{
    position:relative;border-radius:var(--radius-lg);overflow:hidden;
    border:var(--frame);background:var(--navy-900);
    box-shadow:var(--shadow-rest);
  }
  .viz img,.viz video,.viz canvas{display:block;width:100%;height:100%;object-fit:cover}
  .viz.playing{
    border-color:var(--accent-bright);
    box-shadow:var(--shadow-rest),0 0 0 1px rgba(232,98,44,.45),0 18px 44px rgba(185,58,3,.20);
  }

  /* Listen-to-unlock / passport progress (DWELL #6/#8): real
     progress only - dots fill from the visitor's own listening */
  .unlock{
    border:1px dashed rgba(201,164,92,.45);border-radius:var(--radius-lg);
    padding:18px;background:var(--gold-soft);text-align:left;
  }
  .unlock .u-dots{display:flex;gap:7px;margin-top:12px}
  .unlock .u-dot{
    width:11px;height:11px;border-radius:99px;flex:none;
    border:1px solid rgba(201,164,92,.55);background:transparent;
  }
  .unlock .u-dot.on{background:var(--accent);border-color:var(--accent)}

  /* Token utilities for builders */
  .text-accent{color:var(--accent-bright)}
  .text-gold{color:var(--gold)}
  .text-champagne{color:var(--champagne)}
  .frame-gold{border:var(--frame)}
  .bg-panel{background:var(--panel)}
  .bg-navy{background:var(--navy-900)}

  @media (prefers-reduced-motion:reduce){
    .play-lg,.pad,.step,.seg button,.fader .f-mute{transition:none}
  }

  /* ================================================================
     W2 FIX PASS — Q1 wave-2 findings F-3 / F-5 / F-9 / F-10.
     Builder fix; Q1 re-verifies. Mobile-only: desktop untouched.
     ================================================================ */
  @media (max-width:760px){
    /* F-10: the promo message already rides the top strip; at bar
       widths the chip's 236px cannot share the bar without slicing,
       so the chip never renders there. Desktop keeps it. */
    .promo-chip{display:none}
  }
  @media (max-width:560px){
    /* F-8/F-3: strip tightens; the ventures strip merges into the
       bar block (same glass + blur) so the header reads as ONE
       consolidated unit instead of three stacked strips. */
    .promo-strip{font-size:11.5px;padding:7px 10px;letter-spacing:.05em}
    .ventures{
      background:var(--glass-bar);
      -webkit-backdrop-filter:saturate(180%) blur(20px);
      backdrop-filter:saturate(180%) blur(20px);
      min-height:0;
    }
    .ventures a{min-height:44px;padding:9px 2px}
    .ventures a img{width:20px;height:20px}
    /* F-9/F-5: hero air + stats compaction restore the 360px fold.
       Genre items stay in the DOM (and on desktop); on phones the
       line keeps its three load-bearing facts only. */
    .hero-sec{padding-top:40px}
    .hero-stats{margin-top:16px;font-size:.72rem;gap:6px 10px}
    .hero-stats .stat-genre{display:none}
    .cta-row{margin-top:24px}
  }

  /* ================================================================
     REV13 REVAMP (2026-10-16) — design lane. Presentation only:
     no JS hooks, no layout logic, no commerce values touched.
     Tokens: DESIGN-LANGUAGE.md only (existing vars + gold rgba
     hairlines already in use above).
     P0-1: the codified type system finally loads (Anton display /
     Oswald UI voice). Long-form prose stays on the system sans for
     readability — a documented interpretation for QC to rule on:
     the law names Anton for display and Oswald for chips, labels
     and strips; it does not name a prose face.
     ================================================================ */
  :root{
    --font-display:'Anton','Oswald',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-label:'Oswald',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  .headline,.headline-md{font-family:var(--font-display);font-weight:400;letter-spacing:.012em}
  .card h3,.feat-slide h3{font-family:var(--font-display);font-weight:400;letter-spacing:.014em}
  .price{font-family:var(--font-label);font-weight:600;letter-spacing:.01em}
  .btn,.chip,.eyebrow,.bar .brand,.bar-cta,.badge,.facts li span,.pl-head,
  .p-title,.a-name,.a-price,.capture-title,.start-here,.save-btn,.details-link,
  .playall,.feat-count,.f-kicker,.trust-in,.promo-strip,.hero-stats{
    font-family:var(--font-label);
  }
  .btn{letter-spacing:.05em}
  .chip{letter-spacing:.06em}

  /* P0-3: hero mosaic state label — the first play affordance a
     visitor meets was .56rem (.48rem on phones). Make it legible. */
  .mosaic-state{font-size:.78rem;letter-spacing:.14em;padding:20px 6px 8px}
  @media (max-width:560px){.mosaic-state{font-size:.66rem;letter-spacing:.09em}}

  /* P1-1: Learn lives in the sticky bar now (ventures row retired
     on the homepage; contact remains in the footer). */
  .bar-learn{
    font-family:var(--font-label);color:var(--muted-light);text-decoration:none;
    font-size:.86rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    padding:10px 12px;min-height:var(--tap-min);
    display:inline-flex;align-items:center;
  }
  .bar-learn:hover{color:var(--champagne)}

  /* P1-3: the Learn chip is a doorway, not a catalog filter —
     gold hairline sets it apart from the orange-action chips. */
  .chip-learn{border:var(--frame-strong);color:var(--gold-bright)}

  /* P1-4: browse-card density — same facts, less vertical tax.
     Scoped to the browse grid; Learn/sheet cards untouched. */
  #browseGrid .facts{gap:3px;padding-top:8px}
  #browseGrid .facts li{font-size:.82rem;line-height:1.35}
  #browseGrid .card .foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px}
  #browseGrid .card .foot .price-row,
  #browseGrid .card .foot .free-note,
  #browseGrid .card .foot .btn{flex:1 1 100%}
  #browseGrid .card .foot .details-link,
  #browseGrid .card .foot .save-btn{flex:0 1 auto}

  /* ================================================================
     PRETTY PASS — LANE 1: HERO + HOMEPAGE RHYTHM (2026-10-16).
     Presentation only, appended last so it wins on source order
     and lifts out as one block. Every selector is scoped to
     homepage-only classes (.hero-sec / .land-sec / .mosaic /
     .trust — none of them appear on the Learn pages, which share
     this stylesheet). Tokens: DESIGN-LANGUAGE.md only — navy
     ground, gold frame, orange action; gold appears as hairlines
     and display type, never as a fill. No commerce values, no JS
     hooks, no layout logic touched.
     ================================================================ */

  /* --- R1 · Section rhythm: one deeper breath between homepage
     sections (88px -> 104px desktop, 72px phones). Longhands only,
     so the shared 20px gutter is untouched. #browseSec carries no
     .land-sec class but sits mid-homepage; spacing only, its card
     internals belong to another lane. --- */
  section.land-sec,section#browseSec{padding-top:104px;padding-bottom:104px}
  @media (max-width:760px){
    section.land-sec,section#browseSec{padding-top:72px;padding-bottom:72px}
  }

  /* --- R2 · Section separation: a faint gold hairline opens each
     homepage section (the frame language, at whisper strength),
     and .coal sections get the same top-center gold ambience the
     FIRST TASTE spotlight already uses, so the dark/coal
     alternation reads as rhythm instead of flatness. Id-set
     section backgrounds outrank these rules and are untouched. --- */
  section.land-sec{border-top:1px solid rgba(201,164,92,.10)}
  section.coal.land-sec{
    background:
      radial-gradient(760px 320px at 50% -60px, rgba(232,196,118,.055), transparent 65%),
      var(--nearblack);
  }

  /* --- R3 · Section intro measure: prose intros cap at 680px,
     centered — the 980px inner measure is for grids, not reading.
     Eyebrows get one consistent 18px of air above the headline. --- */
  section.land-sec .inner > .sub{max-width:680px;margin-left:auto;margin-right:auto}
  section.land-sec .eyebrow{margin-bottom:18px}

  /* --- R4 · Trust strip: a touch more air and spread; it is the
     hinge between the hero and the shop, so it should feel set,
     not squeezed. --- */
  .trust{padding:22px 20px}
  .trust-in{gap:12px 32px}

  /* --- H1 · Hero atmosphere: a deeper gold halo behind the hook,
     the ember whisper kept low-right, and a gold hairline closing
     the hero where it meets the trust strip. The inner halo
     breathes on an 11s cycle — decoration only, no layout cost,
     killed under reduced-motion (M1). --- */
  .hero-sec{
    background:
      radial-gradient(820px 480px at 50% -8%, rgba(232,196,118,.16), transparent 62%),
      radial-gradient(920px 540px at 88% 112%, rgba(185,58,3,.08), transparent 60%),
      var(--black);
  }
  .hero-sec::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(560px 300px at 50% 30%, rgba(232,196,118,.10), transparent 70%);
  }
  .hero-sec::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(201,164,92,.38) 30%,rgba(201,164,92,.38) 70%,transparent);
  }
  .hero-sec .inner{position:relative;z-index:1}
  @keyframes mtm-hero-breathe{from{opacity:.55}to{opacity:1}}
  @media (prefers-reduced-motion:no-preference){
    .hero-sec::before{animation:mtm-hero-breathe 11s ease-in-out infinite alternate}
  }

  /* --- H2 · Hero eyebrow: longer, surer gold rules flanking the
     brand line (40px -> 56px, .45 -> .65 presence) and one extra
     beat of air before the headline. --- */
  .land-sec.hero-sec .eyebrow{margin-bottom:22px}
  .hero-sec .eyebrow::before,.hero-sec .eyebrow::after{width:56px;opacity:.65}

  /* --- H3 · Headline presence: the hook is the biggest text on
     the page (design rule 3) — a larger cap (5rem), tighter
     leading, and the gradient line re-angled so the gold ramp
     sweeps champagne -> gold-pop -> gold-bright across the words
     "before you buy it." Same @supports guard as the base rule. --- */
  .hero-sec .headline{font-size:clamp(2.15rem,9vw,5rem);line-height:1.03}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hero-sec .headline .grad{
      background:linear-gradient(96deg,var(--ink-light) 2%,var(--gold-pop) 55%,var(--gold-bright) 96%);
      -webkit-background-clip:text;background-clip:text;
    }
  }
  section.land-sec .headline-md{font-size:clamp(2.05rem,7.5vw,3.55rem)}

  /* --- H4 · Tagline measure: the promise line reads at prose
     width (700px), centered under the hook. --- */
  .hero-sec .tagline{max-width:700px;margin-left:auto;margin-right:auto;margin-top:22px}

  /* --- H5 · Hero stats become a framed strip: a gold hairline
     (.22) sets the facts row apart, and its 780px measure aligns
     with the mosaic below so the hero reads as one composition. --- */
  .hero-stats{
    max-width:780px;margin:26px auto 0;padding-top:20px;
    border-top:1px solid rgba(201,164,92,.22);
  }

  /* --- H6 · CTA presence: the primary action gets more hand
     (18px 42px), a deeper ember shadow, and a light sheen that
     sweeps once on hover — a loud moment on a calm surface
     (design rule 5). The ghost action trades its generic white
     outline for the gold frame language, so "hear it" reads as
     designed, not defaulted. --- */
  .hero-sec .cta-row{margin-top:36px}
  .hero-sec .btn:not(.ghost){
    padding:18px 42px;font-size:1.06rem;
    box-shadow:0 14px 38px rgba(185,58,3,.38),inset 0 1px 0 rgba(255,255,255,.16);
  }
  .hero-sec .btn:not(.ghost)::before{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.20) 50%,transparent 68%);
    transform:translateX(-130%);
  }
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .hero-sec .btn:not(.ghost)::before{transition:transform .8s var(--ease)}
    .hero-sec .btn:not(.ghost):hover::before{transform:translateX(130%)}
  }
  .hero-sec .btn.ghost{
    border:1px solid rgba(201,164,92,.45);color:var(--ink-light);
    background:rgba(201,164,92,.04);
  }
  @media (hover:hover){
    .hero-sec .btn.ghost:hover{
      border-color:rgba(232,196,118,.70);color:var(--champagne);
      background:rgba(201,164,92,.08);box-shadow:none;
    }
  }

  /* --- H7 · Hero mosaic: the covers join the frame system —
     the codified gold hairline (--frame), a 14px radius, a real
     resting shadow with an inner top highlight, and a gentle
     cover zoom on hover. The play label gains a text shadow so
     it stays legible over bright art. --- */
  .mosaic{margin-top:48px;max-width:820px;gap:12px}
  .mosaic-tile .mosaic-play{
    border:var(--frame);border-radius:14px;
    box-shadow:var(--shadow-rest),inset 0 1px 0 rgba(255,255,255,.10);
  }
  .mosaic-tile .mosaic-play img{transition:transform var(--dur-med) var(--ease)}
  .mosaic-state{text-shadow:0 1px 10px rgba(0,0,0,.65)}
  @media (hover:hover){
    .mosaic-tile .mosaic-play:hover{
      border-color:rgba(232,196,118,.60);box-shadow:var(--shadow-hover);
    }
    .mosaic-tile .mosaic-play:hover img{transform:scale(1.045)}
  }

  /* --- M1 · Motion safety: everything this pass animates is
     decorative; under reduced-motion it simply does not move. --- */
  @media (prefers-reduced-motion:reduce){
    .hero-sec::before{animation:none}
    .mosaic-tile .mosaic-play img{transition:none}
  }

  /* --- P1 · Phones (<=560px): the hero tightens (keeps the W2
     fold discipline) and the mosaic turns editorial — FIRST
     TASTE, the free hero product, spans the row as a wide 4:3
     feature cover; the other four covers pair up beneath it
     instead of squeezing five-across at ~65px each. --- */
  @media (max-width:560px){
    .hero-sec{padding-top:44px}
    .hero-sec .eyebrow::before,.hero-sec .eyebrow::after{width:28px}
    .hero-stats{margin-top:16px;padding-top:14px}
    .hero-sec .cta-row{margin-top:28px}
    .hero-sec .btn:not(.ghost){padding:16px 30px}
    .mosaic{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:36px}
    .mosaic-tile:first-child{grid-column:1/-1}
    .mosaic-tile:first-child .mosaic-play{aspect-ratio:4/3}
  }

  /* ================================================================
     PRETTY PASS UPGRADE — LANE 1 (Andrew brief upgrade, 2026-10-16:
     "really pretty = FUN, INTERACTIVE, user-friendly"). Tactile
     feedback, a living playing state, playful micro-interactions.
     Same laws: codified tokens only, homepage-scoped selectors,
     zero JS/copy/commerce changes. Every animation below is
     decorative, transform/opacity/shadow only (no layout cost),
     and either lives inside a no-preference media query or
     carries an explicit reduced-motion kill (U8).
     ================================================================ */

  /* --- U1 · Now-playing EQ badge: when player.js marks a tile
     .playing, a small dark chip (same glass language as the
     Details chip) appears top-left of the cover with four orange
     bars dancing at staggered heights — the universal "this one
     is sounding" signal. Bars are background layers on one
     pseudo-element, bottom-anchored via content-box origin, so
     the keyframes only step background-size. --- */
  @keyframes mtm-eq{
    0%,100%{background-size:3px 6px,3px 11px,3px 4px,3px 9px}
    25%{background-size:3px 11px,3px 5px,3px 10px,3px 4px}
    50%{background-size:3px 5px,3px 9px,3px 12px,3px 7px}
    75%{background-size:3px 9px,3px 12px,3px 6px,3px 10px}
  }
  .mosaic-tile.playing .mosaic-play::before{
    content:"";position:absolute;top:8px;left:8px;z-index:2;
    width:34px;height:22px;padding-bottom:4px;box-sizing:border-box;
    border-radius:999px;border:1px solid rgba(232,98,44,.55);
    background-color:rgba(6,12,22,.66);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    background-image:
      linear-gradient(var(--accent-bright),var(--accent-bright)),
      linear-gradient(var(--accent-bright),var(--accent-bright)),
      linear-gradient(var(--accent-bright),var(--accent-bright)),
      linear-gradient(var(--accent-bright),var(--accent-bright));
    background-repeat:no-repeat;background-origin:content-box;
    background-position:6px 100%,12px 100%,18px 100%,24px 100%;
    background-size:3px 6px,3px 11px,3px 4px,3px 9px;
  }
  @media (prefers-reduced-motion:no-preference){
    .mosaic-tile.playing .mosaic-play::before{animation:mtm-eq 1.15s ease-in-out infinite}
  }

  /* --- U2 · Playing ring pulse: the sounding tile's orange ring
     breathes a soft ember glow (--accent-glow) instead of sitting
     static. Alternate-direction, so it swells and settles. --- */
  @keyframes mtm-playing-pulse{
    from{box-shadow:0 0 0 2px var(--accent),0 0 0 0 rgba(232,98,44,0)}
    to{box-shadow:0 0 0 2px var(--accent),0 0 24px 5px var(--accent-glow)}
  }
  @media (prefers-reduced-motion:no-preference){
    .mosaic-tile.playing .mosaic-play{animation:mtm-playing-pulse 1.6s ease-in-out infinite alternate}
  }

  /* --- U3 · Mosaic tactility: a deeper, springier press (.97 ->
     .95), the play label rises 2px toward the hover, the cover
     warms a touch (brightness rides the existing zoom transition),
     and the Details chip gets real hover/press states instead of
     sitting inert. --- */
  .mosaic-tile .mosaic-play:active{transform:scale(.95)}
  .mosaic-tile .mosaic-play img{
    transition:transform var(--dur-med) var(--ease),filter var(--dur-med) var(--ease);
  }
  .mosaic-state{transition:transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
  .mosaic-details{
    transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
  }
  .mosaic-details:active{transform:scale(.94)}
  @media (hover:hover){
    .mosaic-tile:hover .mosaic-state{transform:translateY(-2px)}
    .mosaic-tile .mosaic-play:hover img{filter:brightness(1.06)}
    .mosaic-details:hover{background:rgba(6,12,22,.85);border-color:rgba(232,196,118,.55)}
  }

  /* --- U4 · Mosaic entrance stagger: the five covers cascade in
     (60ms steps) when the mosaic's reveal fires, instead of
     arriving as one block. Transform/opacity only; the tiles
     carry no other transform, and U8 restores them outright
     under reduced-motion. --- */
  .js .mosaic.reveal .mosaic-tile{opacity:0;transform:translateY(14px)}
  .js .mosaic.reveal.in .mosaic-tile{
    opacity:1;transform:translateY(0);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
  }
  .js .mosaic.reveal.in .mosaic-tile:nth-child(2){transition-delay:.06s}
  .js .mosaic.reveal.in .mosaic-tile:nth-child(3){transition-delay:.12s}
  .js .mosaic.reveal.in .mosaic-tile:nth-child(4){transition-delay:.18s}
  .js .mosaic.reveal.in .mosaic-tile:nth-child(5){transition-delay:.24s}

  /* --- U5 · Hero CTA life: the primary action's ember shadow
     breathes on a slow 3.4s cycle (a loud moment, design rule 5),
     hover leans in (-2px, scale 1.015) and a press lands at .97.
     The ghost gains background/color in its transition list so
     its gold-frame hover fades instead of snapping. --- */
  @keyframes mtm-cta-glow{
    from{box-shadow:0 14px 38px rgba(185,58,3,.38),inset 0 1px 0 rgba(255,255,255,.16)}
    to{box-shadow:0 14px 44px rgba(185,58,3,.50),0 0 26px 2px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.16)}
  }
  @media (prefers-reduced-motion:no-preference){
    .hero-sec .btn:not(.ghost){animation:mtm-cta-glow 3.4s ease-in-out infinite alternate}
  }
  @media (hover:hover){
    .hero-sec .btn:not(.ghost):hover{transform:translateY(-2px) scale(1.015)}
  }
  .hero-sec .btn:active{transform:scale(.97)}
  .hero-sec .btn.ghost{
    transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
  }

  /* --- U6 · Eyebrow rules grow on reveal + headline blur-in:
     a section's gold rules draw themselves outward from the
     eyebrow text as it reveals, and section headlines settle
     from a 5px blur as they rise — motion that makes the page
     feel considered, scoped to homepage section headers only. --- */
  section.land-sec .eyebrow.reveal::before,
  section.land-sec .eyebrow.reveal::after{
    transition:transform .9s var(--ease) .2s;
  }
  .js section.land-sec .eyebrow.reveal:not(.in)::before{transform:scaleX(0);transform-origin:right center}
  .js section.land-sec .eyebrow.reveal:not(.in)::after{transform:scaleX(0);transform-origin:left center}
  @media (prefers-reduced-motion:no-preference){
    .js section.land-sec .headline-md.reveal{filter:blur(5px)}
    .js section.land-sec .headline-md.reveal.in{
      filter:blur(0);
      transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease),filter var(--dur-reveal) var(--ease);
    }
  }

  /* --- U7 · Shop chips + free rows answer the pointer: chips
     lift 1px on hover (their press state already existed), and
     free-shelf rows warm with a whisper of gold while the claim
     link deepens to gold-bright — the free shelf should feel as
     responsive as the paid shelves. --- */
  @media (hover:hover){
    .shopnav .chip:hover{transform:translateY(-1px)}
  }
  #free-shelf .free-row{transition:background-color var(--dur-fast) var(--ease)}
  #free-shelf .free-claim{transition:color var(--dur-fast) var(--ease)}
  @media (hover:hover){
    #free-shelf .free-row:hover{background:rgba(232,196,118,.04)}
    #free-shelf .free-row:hover .free-claim{color:var(--gold-bright)}
  }

  /* --- U8 · Reduced-motion kills for everything above: no EQ,
     no pulse, no glow, no stagger, no growing rules — the page
     is simply, calmly there. --- */
  @media (prefers-reduced-motion:reduce){
    .mosaic-tile.playing .mosaic-play::before{animation:none}
    .mosaic-tile.playing .mosaic-play{animation:none}
    .hero-sec .btn:not(.ghost){animation:none}
    .js .mosaic.reveal .mosaic-tile{opacity:1;transform:none;transition:none}
    section.land-sec .eyebrow.reveal::before,
    section.land-sec .eyebrow.reveal::after{transform:none;transition:none}
    .mosaic-state,.mosaic-details{transition:none}
  }

  /* ================================================================
     PRETTY CARDS — BEAUTIFICATION LANE 2 (2026-10-16)
     Product cards + catalog grid + featured/flagship slides.
     Presentation only: no commerce values, hrefs, data or JS
     touched. Tokens: DESIGN-LANGUAGE.md website ramps only —
     existing vars + the documented gold/accent rgba hairlines
     already in use above. No new hex values.
     ================================================================ */

  /* 1 · Card surface: a real navy panel, not a wash. A deep navy
     gradient under the codified gold frame, with a warm ambient
     floor in the shadow, so each card sits on the page ground as
     an object. Hover/focus-within warm the frame to frame-strong. */
  .card{
    background:linear-gradient(180deg,var(--navy-800),var(--navy-900) 62%);
    border:var(--frame);
    box-shadow:var(--shadow-rest),0 18px 44px rgba(201,164,92,.05);
  }
  @media (hover:hover){
    .card:hover{
      border-color:rgba(201,164,92,.45);
      box-shadow:var(--shadow-hover),0 22px 54px rgba(201,164,92,.07);
    }
  }
  .card:focus-within{
    border-color:rgba(201,164,92,.45);
    box-shadow:var(--shadow-hover),0 22px 54px rgba(201,164,92,.07);
  }

  /* 2 · Cover art melts into the card: a bottom fade toward the
     brand navy plus an inset gold hairline ring framing every
     cover (photo, video and tile covers alike). Sits above the
     art (z 2, tying the art video) and below the play button
     (z 3) and progress bar (z 4); pointer-events off. */
  .card .art::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:2;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(11,21,38,0),rgba(11,21,38,.55));
    box-shadow:inset 0 0 0 1px rgba(201,164,92,.14),inset 0 -1px 0 rgba(201,164,92,.22);
  }
  /* Playing state: the art ring warms to the action orange so
     the playing card is findable at a glance down the grid. */
  .card.playing .art::after{
    box-shadow:inset 0 0 0 1px rgba(232,98,44,.45),inset 0 -1px 0 rgba(232,98,44,.50);
  }

  /* 3 · Price + compare-at: the price is the second-loudest
     element on the card after the offer word — a size step up in
     the catalog grid. The compare-at badge becomes a filled
     value chip in the accent-soft tint (orange = prices/states),
     and the FREE badge gains a whisper of gold fill so the offer
     word carries at thumbnail distance (design rule 3). Border
     and text values are unchanged. */
  #browseGrid .card .price{font-size:1.5rem}
  .card .price-row{gap:10px}
  .badge.save{background:var(--accent-soft);border-color:transparent}
  .badge.free{background:rgba(201,164,92,.10)}

  /* 4 · On-art flags speak one language — gold glass. The browse
     shelf tag adopts the soon-flag treatment (same glass, same
     gold ring, same lift shadow). */
  .shelf-tag{
    color:var(--gold-bright);
    border:1px solid rgba(232,196,118,.55);
    box-shadow:0 8px 24px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.13);
  }

  /* 5 · Grid rhythm: more air between rows of the catalog so the
     framed cards read as a gallery, not a pile. Scoped to the
     browse grid (the rev13 density rules still govern inside
     each card). */
  #browseGrid{gap:28px}
  @media (min-width:700px){#browseGrid{gap:30px}}

  /* 6 · Featured / flagship slides — the deluxe frame (design
     rule 5: the one loud moment). Strong gold frame, deep navy
     gradient surface, float shadow with a warm floor, framed
     art, and a gold kicker led by a short orange rule. Dots go
     gold so the whole carousel speaks the frame language. */
  .feat-slide{
    background:linear-gradient(160deg,var(--navy-800),var(--navy-900) 65%);
    border:var(--frame-strong);
    box-shadow:var(--shadow-float),0 24px 60px rgba(201,164,92,.06);
    transition:border-color var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
  }
  @media (hover:hover){
    .feat-slide:hover{border-color:rgba(201,164,92,.60)}
  }
  .feat-slide .f-art::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(201,164,92,.22),inset 0 -28px 34px -18px rgba(6,13,24,.55);
  }
  .feat-slide .f-kicker{color:var(--gold-bright)}
  .feat-slide .f-kicker::before{
    content:"";display:inline-block;width:22px;height:2px;border-radius:2px;
    background:var(--accent);vertical-align:middle;margin-right:10px;
  }
  .feat-dot{background:rgba(201,164,92,.30)}
  .feat-dot.on{background:var(--gold-pop)}

  /* ---- PRETTY CARDS · Andrew brief upgrade (2026-10-16 11:53 EDT):
     FUN, INTERACTIVE, USER-FRIENDLY. The delight layer for the
     same surfaces: sheen, animated playing indicator, tactile
     states, 44px targets. Presentation only, tokens only. ---- */

  /* Sheen sweep: a soft light passes over the cover when the
     card is hovered or holds focus — the energy lives in the
     art (design rule 5). It is a second background layer on the
     melt overlay from Lane 2 §2; the fade layer beneath it does
     not move, and the inset ring (box-shadow) is untouched. */
  .card .art::after{
    background:
      linear-gradient(115deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.08) 47%,rgba(232,196,118,.10) 52%,rgba(255,255,255,0) 68%),
      linear-gradient(180deg,rgba(11,21,38,0),rgba(11,21,38,.55));
    background-size:260% 100%,100% 100%;
    background-position:130% 0,0 0;
    transition:background-position .9s var(--ease);
  }
  @media (hover:hover){
    .card:hover .art::after{background-position:-30% 0,0 0}
  }
  .card:focus-within .art::after{background-position:-30% 0,0 0}

  /* Catalog art breathes a touch deeper on hover (scoped, so
     the Learn doorway cards keep the calmer global zoom). */
  @media (hover:hover){
    #browseGrid .card:hover .art img{transform:scale(1.045)}
  }

  /* Animated playing indicator: a three-bar level meter pinned
     to the cover's lower-right while this card plays (the play
     button owns the lower-left), painted as one element — no
     markup, no copy — bouncing as a living meter. Plus a slow
     breathing ring on the playing card itself, on top of the
     static playing shadow from the base rules. */
  .card.playing .art::before{
    content:"";position:absolute;right:14px;bottom:14px;z-index:3;
    width:20px;height:16px;pointer-events:none;
    background:
      linear-gradient(var(--accent-bright),var(--accent-bright)) 0 100%/4px 55% no-repeat,
      linear-gradient(var(--accent-bright),var(--accent-bright)) 8px 100%/4px 100% no-repeat,
      linear-gradient(var(--accent-bright),var(--accent-bright)) 16px 100%/4px 40% no-repeat;
    transform-origin:50% 100%;
    animation:pcEq .68s var(--ease) infinite alternate;
  }
  @keyframes pcEq{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
  @keyframes pcGlow{
    0%,100%{box-shadow:var(--shadow-rest),0 0 0 1px rgba(232,98,44,.30),0 18px 44px rgba(185,58,3,.16)}
    50%{box-shadow:var(--shadow-rest),0 0 0 1px rgba(232,98,44,.55),0 18px 48px rgba(185,58,3,.26)}
  }

  /* Touch generosity inside browse cards: every secondary
     target reaches the 44px floor (the play button is 58px,
     Save and the demo rows were already 44px). */
  #browseGrid .details-link{min-height:44px}
  #browseGrid .stack-toggle{min-height:44px}

  /* Card CTA feels physical: a one-pixel lift on hover; the
     press itself is the global .btn:active. */
  @media (hover:hover){
    #browseGrid .card .btn:hover{transform:translateY(-1px)}
  }

  /* Browse chrome: the filter chips answer the finger with a
     warm tint on hover (their press already exists). */
  @media (hover:hover){
    .chip:hover{background:rgba(201,164,92,.08)}
  }

  /* Reduced motion: every Lane 2 animation stands down. */
  @media (prefers-reduced-motion:reduce){
    .card.playing,.card.playing .art::before{animation:none}
    .card .art::after{transition:none}
  }

  /* ================================================================
     PRETTY-GLOBAL — Lane 4 (2026-10-16): global polish + mobile.
     Surfaces: player dock / listen chrome, sticky bar, sound-board
     pads, trust strip, capture forms, footer, focus + anchor flow.
     Presentation only — no data, prices, hrefs or JS hooks touched.
     Tokens: DESIGN-LANGUAGE.md vars only; gold stays frame/mark,
     orange stays action. Appended last so it composes over rev13.
     ================================================================ */

  /* --- anchor flow: sticky bar (52px) + shopnav must never cover
         a section top after an in-page jump; motion is gentle and
         reduced-motion users keep instant jumps. */
  html{scroll-behavior:smooth}
  section[id]{scroll-margin-top:calc(112px + var(--safe-t))}

  /* --- sticky bar: the gold hairline replaces the faint champagne
         one, matching the dock's top frame; CTA gets a quiet lift. */
  .bar{border-bottom:var(--frame)}
  @media (hover:hover){
    .bar-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(232,98,44,.38),inset 0 1px 0 rgba(255,255,255,.16)}
  }
  .bar-cta:active{transform:translateY(0)}

  /* --- trust strip: a touch more air, and each claim carries the
         gold mark — a 5px diamond, frame-family, never a fill. */
  .trust{padding:22px 20px}
  .trust-in{gap:12px 30px}
  .trust-in span{display:inline-flex;align-items:center}
  .trust-in span::before{
    content:"";flex:none;width:5px;height:5px;margin-right:10px;
    background:var(--gold);transform:rotate(45deg);opacity:.85;
  }

  /* --- sound-board pads: the JS state classes finally have a look.
         .pad-on = this pad's loop is running (gold frame + lift);
         .pad-err = sample failed (quiet, dashed, dimmed). */
  .pad.pad-on{
    border:var(--frame-strong);background:var(--navy-700);
    box-shadow:inset 0 0 0 1px rgba(201,164,92,.45),var(--shadow-rest);
  }
  .pad.pad-on .pad-name{color:var(--champagne)}
  .pad.pad-err{border-style:dashed;border-color:rgba(233,220,192,.22);opacity:.55}

  /* --- player dock: deeper float, framed cover, real buttons.
         (#pListen / #npCta are styled by rev7.css — their refined
         rules live in an appended block THERE, not fought from here.) */
  .dock{
    border-top:var(--frame-strong);
    box-shadow:0 -18px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(233,220,192,.07);
  }
  .player{padding:12px 16px 10px}
  #pCover{border-radius:10px;border:var(--frame);object-fit:cover;flex:none}
  .p-btn.main{
    width:52px;height:52px;font-size:1rem;
    background:var(--cta-bg);border-color:transparent;color:var(--cta-ink,#fff);
    box-shadow:0 6px 20px rgba(232,98,44,.35),inset 0 1px 0 rgba(255,255,255,.18);
  }
  @media (hover:hover){
    .p-btn:hover{background:rgba(201,164,92,.10);color:var(--gold-bright)}
    .p-btn.main:hover{background:var(--cta-bg);color:var(--cta-ink,#fff);filter:brightness(1.08)}
  }
  .p-btn{transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
  .p-btn:active{transform:scale(.94)}
  .p-wave{border-radius:8px}
  .p-wave:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
  .p-time{font-size:.72rem;letter-spacing:.04em;padding:1px 6px;border-radius:6px}
  .p-heard{font-family:var(--font-label);letter-spacing:.05em;padding-top:7px}
  .actionbar{padding:10px 16px;gap:12px}
  .a-main{gap:2px}

  /* --- capture forms (section + footer): the panel floats on a
         soft gold wash; the field gets a real focus ring — a crisp
         double ring in the focus token instead of the plain outline. */
  .capture{
    background:linear-gradient(180deg,rgba(232,196,118,.07),rgba(232,196,118,.015) 58%),var(--navy-900);
    box-shadow:var(--shadow-float);
    padding:32px 28px;
  }
  .cap-label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
  .cap-row input{
    min-height:52px;
    transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  }
  .cap-row input::placeholder{color:var(--muted-light);opacity:.72}
  .cap-row input:focus{
    outline:none;border-color:rgba(201,164,92,.65);
    box-shadow:0 0 0 2px var(--navy-900),0 0 0 4px var(--accent-bright);
  }
  .cap-row .btn{min-height:52px}
  .footer-capture{margin-top:34px;padding-top:28px;border-top:var(--hairline)}

  /* --- footer: gold frame on top, links in the champagne voice,
         company line set like a label. */
  footer{border-top:var(--frame)}
  footer a{
    color:var(--champagne);text-decoration-color:rgba(201,164,92,.45);
    text-underline-offset:3px;
    transition:color var(--dur-fast) var(--ease);
  }
  @media (hover:hover){footer a:hover{color:var(--accent-bright)}}
  .company{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.18em;font-size:.94rem}
  .qr-block img{box-shadow:0 0 0 1px rgba(201,164,92,.35),var(--shadow-rest)}

  /* ================================================================
     MOBILE BEAUTY PASS — 390px first: spacing rhythm tightens,
     type steps down one notch, every target stays >= 44px.
     ================================================================ */
  @media (max-width:760px){
    .bar-in{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));gap:10px}
    .brand{font-size:.78rem;letter-spacing:.18em}
    .bar-cta{padding:7px 13px;font-size:.78rem}
    .promo-strip{font-size:11.5px;padding:8px 10px;letter-spacing:.06em}
    .trust{padding:18px 16px}
    .trust-in{gap:9px 20px;font-size:.88rem}
    .capture{padding:24px 18px;margin-top:36px}
    .cap-row{gap:8px}
    .cap-row .btn{flex:1 1 100%}
    footer{padding:48px 16px calc(56px + var(--safe-b))}
    .player{padding:10px 12px 8px}
    .player-in{gap:8px}
    #pCover{width:40px;height:40px}
    .p-btn.main{width:50px;height:50px}
    .p-time{font-size:.7rem}
    .p-heard{padding:5px 12px 8px}
    .actionbar{padding:10px 12px}
  }
  @media (max-width:560px){
    section[id]{scroll-margin-top:calc(104px + var(--safe-t))}
    .trust-in span::before{margin-right:8px}
  }

  /* reduced motion: my additions go still too */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .bar-cta,.p-btn,.cap-row input,footer a{transition:none}
  }

  /* ================================================================
     PRETTY-GLOBAL 2 — ALIVE (2026-10-16, Andrew brief upgrade:
     "really pretty" = fun, interactive, friendly). Global motion +
     micro-interaction primitives — other lanes inherit these;
     see pretty-global-CHANGELOG.md, "Andrew brief upgrade".
     ================================================================ */
  @keyframes pg-dock-in{from{transform:translateY(104%);opacity:.4}to{transform:translateY(0);opacity:1}}
  @keyframes pg-glow{
    0%,100%{box-shadow:0 6px 20px rgba(232,98,44,.35),inset 0 1px 0 rgba(255,255,255,.18)}
    50%{box-shadow:0 6px 32px rgba(232,98,44,.62),inset 0 1px 0 rgba(255,255,255,.18)}
  }
  @keyframes pg-ring{0%{box-shadow:0 0 0 0 rgba(201,164,92,.45)}100%{box-shadow:0 0 0 10px rgba(201,164,92,0)}}
  @keyframes pg-eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

  /* --- the dock arrives like an app sheet, and breathes while
         music plays. Playing state hook is real: player.js sets
         #pToggle's aria-label to "Pause" only while sounding. */
  .dock.on{animation:pg-dock-in .5s var(--ease)}
  #pToggle[aria-label="Pause"]{animation:pg-glow 2.2s ease-in-out infinite}
  .player:has(#pToggle[aria-label="Pause"]) #pCover{animation:pg-ring 1.6s var(--ease) infinite}

  /* --- brand mark dances on hover: the five bars are an EQ. */
  .bar .brand svg rect{transform-box:fill-box;transform-origin:50% 100%}
  @media (hover:hover){
    .bar .brand:hover svg rect{animation:pg-eq .9s ease-in-out infinite}
    .bar .brand:hover svg rect:nth-of-type(2){animation-delay:.1s}
    .bar .brand:hover svg rect:nth-of-type(3){animation-delay:.2s}
    .bar .brand:hover svg rect:nth-of-type(4){animation-delay:.3s}
    .bar .brand:hover svg rect:nth-of-type(5){animation-delay:.4s}
  }

  /* --- friendly feedback everywhere: press squish on the global
         button, nav chips float then settle, focus gets a warm halo
         around the AA outline, taps flash brand orange, not grey. */
  html{-webkit-tap-highlight-color:rgba(232,98,44,.10)}
  .btn:active{transform:scale(.98)}
  .shopnav .chip{transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
  @media (hover:hover){.shopnav .chip:hover{transform:translateY(-1px)}}
  .shopnav .chip:active{transform:scale(.97)}
  .bar-learn{transition:color var(--dur-fast) var(--ease)}
  :focus-visible{box-shadow:0 0 0 4px rgba(232,98,44,.16)}

  /* --- footer links draw their underline in on hover.
         (The QR wrap link is excluded — no line under the code.) */
  footer a{
    text-decoration:none;
    background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size var(--dur-med) var(--ease),color var(--dur-fast) var(--ease);
  }
  @media (hover:hover){footer a:hover{background-size:100% 1px}}
  footer .qr-block a{background-image:none}

  /* --- app-like mobile: the dock becomes a bottom sheet. */
  @media (max-width:760px){
    .dock{border-radius:22px 22px 0 0;overflow:hidden}
  }

  /* --- GLOBAL reduced-motion net: every animation/transition on
         the site (any lane's) stills for reduced-motion users.
         This is the floor; per-component guards sit on top. */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;scroll-behavior:auto !important;
    }
  }

  /* ================================================================
     PRETTY-BEAUTY (2026-10-16) — Lane 7, the beauty finisher.
     Aesthetic top-coat ONLY: type polish, depth + light, section
     rhythm, imagery treatment. No layout logic, no JS hooks, no
     copy, no commerce values. Appended as ONE delimited block so
     the merge is delete-the-block simple.
     Tokens: DESIGN-LANGUAGE.md — existing :root vars only, plus
     rgba() derivatives of codified hexes (gold 201,164,92 ·
     gold-pop 232,196,118 · champagne 233,220,192 · accent
     185,58,3 · navy-950 6,13,24 · white). Zero foreign hex.
     Cascade: this block is LAST in site.css. rev7.css (all pages),
     subpage.css (learn/subpages) and dwell.css (homepage) load
     AFTER site.css, so where they set the same property the
     selectors below carry a `body` prefix to win honestly — each
     such rule is marked [x-sheet]. Learn/article prose lives in
     the companion block at the end of assets/subpage.css.
     ================================================================ */

  /* ---------- PB-1 · Typography: carved display, voiced labels --- */
  /* Anton is a carved display face: a breath more tracking and a
     tighter leading than the sans values it inherited in rev13. */
  .headline{letter-spacing:.016em;line-height:1.03}
  .headline-md{letter-spacing:.016em;line-height:1.08}
  .card h3,.feat-slide h3{letter-spacing:.018em}
  /* The tagline partners the H1 ("Every file measured…") but rev13
     left it on the system sans. Oswald 500 gives it the label
     voice; color unchanged (champagne on navy, AAA). */
  .tagline{font-family:var(--font-label);font-weight:500;letter-spacing:.012em}
  /* Eyebrow microtext: one step up so the gold holds at a glance. */
  .eyebrow{font-size:.8rem}
  /* Prose air: section subs and card blurbs take the article lead. */
  .sub{line-height:1.55}
  .card .blurb{line-height:1.55}

  /* ---------- PB-2 · Depth + light: one lit room ----------------- */
  /* Every section takes the same lit top edge (champagne at 5%), so
     the alternating 950/900 grounds read as one designed object
     instead of stacked panels. Inset shadow only: no layout shift,
     no overflow risk, scroll law untouched. */
  section{box-shadow:inset 0 1px 0 rgba(233,220,192,.05)}
  /* A 260px fall of light over each section's own ground color.
     background-image only — .dark/.coal keep their base color.
     .hero-sec is excluded: it carries its own gradient stack,
     restored + deepened in PB-3. */
  section.dark:not(.hero-sec),section.coal{
    background-image:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 260px);
  }

  /* ---------- PB-3 · Hero: restore + deepen the glow stack ------- */
  /* The .hero-sec radial stack (line ~190) is overridden today by
     the later .dark{background} shorthand at equal specificity —
     the hero renders flat. Restored here at higher specificity
     (section.hero-sec) with the documented stack, deepened one
     notch, plus the PB-2 lit edge folded into the same stack. */
  section.hero-sec{
    background:
      radial-gradient(760px 440px at 50% -10%, rgba(232,196,118,.15), transparent 62%),
      radial-gradient(920px 540px at 88% 112%, rgba(185,58,3,.09), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 260px),
      var(--black);
  }
  /* The hero product shot takes the gold frame (gold = frames,
     per the language) and a deeper float. Light sections keep
     their own pale treatment (untouched .light .shot rules). */
  .dark .shot,.coal .shot{
    border:var(--frame);
    box-shadow:var(--shadow-float),0 0 0 1px rgba(6,13,24,.35),0 34px 90px rgba(6,13,24,.45);
  }

  /* ---------- PB-4 · Cards + feature slides: lit surfaces -------- */
  /* Flat rgba(255,255,255,.04) becomes a lit surface: top-down
     gradient + a 1px inner top light. Same radius family (xl via
     REVAMP 4), same footprint — light, not layout. */
  .card,.feat-slide{
    background:linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.026) 55%, rgba(255,255,255,.038));
    box-shadow:var(--shadow-rest),inset 0 1px 0 rgba(255,255,255,.065);
  }
  @media (hover:hover){
    /* On hover the frame warms toward the gold (frames-only gold)
       while the lift stays the base rule's. */
    .card:hover,.feat-slide:hover{border-color:rgba(201,164,92,.32)}
  }
  /* Playing state keeps its orange voice — restated so the PB-4
     surface never dulls it (same values as the base rule). */
  .card.playing{
    border-color:rgba(232,98,44,.55);
    box-shadow:var(--shadow-rest),inset 0 1px 0 rgba(255,255,255,.065),0 0 0 1px rgba(232,98,44,.30),0 18px 44px rgba(185,58,3,.16);
  }
  /* Imagery treatment: one consistent finish on every card's art —
     top sheen + a floor shade so art, play button and body meet
     cleanly. z-index 1: above the bare <img>, below the video
     layer (z2), play button (z3) and progress bar (z4). The floor
     shade only darkens — art labels gain contrast, never lose. */
  .card .art::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 22%, rgba(6,13,24,0) 68%, rgba(6,13,24,.30));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
  }
  .feat-slide .f-art::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%, rgba(6,13,24,0) 70%, rgba(6,13,24,.26));
  }

  /* ---------- PB-5 · Mosaic: same finish, warmer frame ----------- */
  .mosaic button{
    box-shadow:0 6px 18px rgba(6,13,24,.35),inset 0 1px 0 rgba(255,255,255,.08);
  }
  /* Radius scoped to the play tile only: the .mosaic-details pill
     keeps its own 999px (an earlier draft of this rule squared it
     to 14px — caught in render QC, probe 2). The play tile's own
     rule (.mosaic-tile .mosaic-play, 12px) is matched + raised. */
  .mosaic button.mosaic-play{border-radius:14px}
  /* ::before is free (the label lives on ::after): a top sheen so
     the five tiles share the cards' lit finish. */
  .mosaic button::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 32%);
  }
  @media (hover:hover){
    .mosaic button:hover{box-shadow:0 12px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
  }

  /* ---------- PB-6 · Panels across sheets [x-sheet] -------------- */
  /* The REV7 free strip and sound board (rev7.css) and the dwell
     panels (dwell.css) load after this sheet; the `body` prefix
     lets the same lit finish reach them. background-image only —
     their own grounds, borders and layout are untouched. */
  body .r7-freestrip,body .r7-board{
    background-image:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 70%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  body .dwell{
    background-image:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 55%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 44px rgba(6,13,24,.30);
  }

  /* ---------- PB-7 · Trust strip + footer: the frame closes ------ */
  .trust{
    background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 65%),var(--nearblack);
  }
  footer{
    box-shadow:inset 0 1px 0 rgba(232,196,118,.10),inset 0 32px 56px -32px rgba(232,196,118,.07);
  }

  /* ---------- PB-8 · Sheet (product detail) inherits the finish -- */
  .sheet{
    background-image:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 180px);
  }
  .sheet-top img,.sheet-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 26px rgba(6,13,24,.35)}
  /* ============ /PRETTY-BEAUTY (Lane 7) ============ */

  /* ================================================================
     REV13.1 — MOBILE REPAIRS (QC2): browsebar + dock transport row.
     Both were single non-wrapping flex rows carrying fixed-width
     content wider than any phone viewport; ancestors clipped the
     overflow instead of the layout adapting.
     ================================================================ */
  /* D1: browsebar content is a fixed 444.3px — the pack-count span
     (#browseBarN) clipped at 390/393/430. Let the row wrap so the
     count takes its own line, still right-aligned via its existing
     margin-left:auto. The count text itself is never truncated. */
  @media (max-width:560px){
    .browsebar{flex-wrap:wrap;row-gap:8px}
  }
  /* D2: with a paid pack playing, #npCta (264.1px, nowrap) + the
     four transport buttons + .p-main exceed the dock row — #pNext
     and #pClose landed off-screen and .p-main crushed to 0px.
     Fix: title + transport stay together on line 1 (.p-main keeps
     flex:1/min-width:0 and a readable share), the CTA drops to its
     own full-width line 2. Scoped under .player-in so the rules
     outrank the #npCta rules in rev7.css (loaded later). Desktop
     (>760px) keeps the single-line dock, untouched. */
  @media (max-width:760px){
    .player-in{flex-wrap:wrap;row-gap:8px}
    .player-in #pCover{order:0}
    .player-in .p-main{order:1;min-width:0}
    .player-in #pListen{order:2}
    .player-in #pPrev,.player-in #pToggle,
    .player-in #pNext,.player-in #pClose{order:3}
    .player-in #npCta{order:9;flex:1 1 100%;margin-left:0;justify-content:center}
  }
  /* ============ /REV13.1 ============ */

/* ================================================================
   REV13.3 — STOREFRONT SLEEK (2026-10-16)
   The component-system pass from team/design-polish/
   STOREFRONT-SLEEK-BRIEF.md §2, layered on the merged pretty lanes
   (REV13) + rev13.1 repairs + rev13.2. Presentation only: no copy,
   price, promo, counter, or JS behavior changes. Token law: every
   value is a DESIGN-LANGUAGE.md token/var or an rgba() spelling of
   a codified hex — this block declares zero hex literals.
   ================================================================ */

/* S1 · One status per card (§2.3.2): the cover chip (.soon-flag) is
   the single status location; the six in-build/QC cards' price-rows
   were emptied in markup and now collapse to nothing. */
.card .price-row:empty{display:none}

/* S2 · Free checkout note prints ONCE per browse view (§2.5 free):
   per-card notes off; the .free-note-shelf footnote after the grid
   carries the identical sentence for the whole section. */
#browseSec .card .free-note{display:none}
.free-note-shelf{font-size:var(--text-caption);color:var(--muted-light);
  text-align:center;margin:var(--space-5) auto 0;max-width:560px;line-height:var(--leading-body)}

/* S3 · Carousel navigation = one dialect (§1.11): arrows + counter
   stay, the dot row retires. */
.feat-dots{display:none}

/* S4 · Motion system (§2.8): the site's one ease (--ease =
   cubic-bezier(0.28,0.11,0.32,1)) at micro duration ≤250ms on the
   interactive components that lacked it; state changes limited to
   transform / opacity / background-color / border-color / color /
   box-shadow. Card surfaces intentionally carry NO transition here
   (cards are .reveal targets; their reveal timing is untouched) —
   their hover cue is the frame step below. */
.btn,.bar .bar-cta,.bar .bar-learn,.chip,.details-link,.save-btn,.feat-arrow,.p-btn,.pill-clear{
  transition:transform .25s var(--ease),opacity .25s var(--ease),
  background-color .25s var(--ease),border-color .25s var(--ease),
  color .25s var(--ease),box-shadow .25s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
  .card:hover,.feat-slide:hover{border-color:rgba(201,164,92,.45)}
}
.btn:active,.chip:active,.feat-arrow:active{transform:scale(.98)}

/* S5 · Section-head rhythm (§2.2/§2.4): eyebrow + title spacing snap
   to the 4/8 scale (--space-4 = 16px) in every land-sec head. */
section.land-sec .eyebrow{margin-bottom:var(--space-4)}
section.land-sec h2.headline-md{margin-bottom:var(--space-4)}

/* S6 · Price grammar (§2.5): one row rhythm; the was-now badge
   demotes to a quiet T5 chip (muted, hairline) — numbers untouched.
   Featured slides take the card price tier (1.3rem) so grid and
   carousel quote in one voice. */
.card .price-row,.feat-slide .price-row{gap:var(--space-3)}
.feat-slide .price{font-size:1.3rem}
.price-row .badge.save{background:transparent;border:1px solid var(--navy-850);
  color:var(--muted-light);font-size:var(--text-caption)}

/* S7 · Build-a-Groove framing (§2.7): the #play mount becomes one
   .panel — navy-800 surface, the gold --frame hairline, the radius
   family, scale padding. Sequencer internals and JS untouched. */
#play .wrap{background:var(--navy-800);border:var(--frame);
  border-radius:var(--radius-lg);padding:var(--space-6)}
@media (max-width:760px){#play .wrap{padding:var(--space-4)}}

/* S8 · Chrome (§2.9): every header target meets the 44px floor
   (--tap-min), flex-centered; shopnav chips included. */
.bar .brand,.bar .bar-cta,.bar-learn{min-height:var(--tap-min);
  display:inline-flex;align-items:center}
.shopnav .chip{min-height:var(--tap-min);display:inline-flex;align-items:center}

/* S9 · License joins the section rhythm (§2.4): the land-sec
   padding pair (104 / 72) on the license block's vertical axis. */
.license-sec{padding-top:104px;padding-bottom:104px}
@media (max-width:760px){.license-sec{padding-top:72px;padding-bottom:72px}}

/* S10 · Footer two-step ramp (§2.1 T5): company line at the body
   step, everything else at the meta step — no near-duplicate
   sizes. Bottom edge honors the safe area. */
footer .company{font-size:1rem}
footer p,footer .founder{font-size:.88rem}
footer{padding-bottom:calc(var(--space-6) + var(--safe-b))}

/* S11 · Dock (§2.9): the gold --frame hairline on its top edge and
   safe-area bottom padding, matching the page it floats over. */
.dock{border-top:var(--frame);padding-bottom:var(--safe-b)}

/* S12 · Hero stat cluster re-tier (§1.7): the number leads, genre
   chips quiet to muted — same words, one hierarchy. */
.hero-stats .stat-genre{color:var(--muted-light);font-size:.94em}

/* S13 · Reduced-motion parity (§2.8): every transition this block
   adds dies under reduce, alongside the base blocks. */
@media (prefers-reduced-motion: reduce){
  .btn,.bar .bar-cta,.bar .bar-learn,.chip,.details-link,.save-btn,.feat-arrow,.p-btn,.pill-clear{transition:none}
  .btn:hover,.btn:active,.chip:active,.feat-arrow:active{transform:none}
}
/* ============ /REV13.3 ============ */