/* Cascade layer order.
   Repeated verbatim from app/assets/css/main.css on purpose: layer order is
   fixed by whichever declaration the browser sees FIRST, and these two files
   load in an order this code does not control. Declaring the same order in both
   makes that race harmless. Keep them identical. */
@layer theme, base, site, components, utilities;

/* Loaded on EVERY page, and inert unless <html data-site> is set.

   It used to be added by layouts/site.vue when that layout mounted. A
   dynamically inserted stylesheet does not block rendering, so every
   client-side navigation into a listener page painted the markup completely
   unstyled for the length of the fetch: the brand SVG filled the viewport, the
   nav's search icon rendered as a 738px circle, and the filter panel and player
   — which are hidden purely by CSS — appeared as stray sidebars.

   So the link is permanent (app.vue) and the layout toggles `data-site` on
   <html> instead. Six rules here are element-level and would otherwise reach the
   creator dashboard; they carry a `[data-site]` prefix. Everything else either
   duplicates Tailwind's preflight or is already class/attribute-scoped. If you
   add another bare-element rule, scope it the same way.

   Everything below is in the `site` layer.
   Unlayered, this file beat every Tailwind utility regardless of specificity —
   `text-white/80`, `fill-white` and `dark:hidden` all silently did nothing on
   the landing page. In `site` it sits above Tailwind's base (so its reset still
   beats preflight) and below utilities (so a utility class wins). Keep the
   wrapper if you regenerate this file from the design. */
@layer site {

/* ==========================================================================
   AfriPods shared stylesheet
   --------------------------------------------------------------------------
   Layer 1  Tokens, reset, typography, layout, primitives
            Derived from Afripods_Creator_Design_System_v4. Safe for any
            AfriPods page to adopt, including the marketing homepage.
   Layer 2  Listener product components (shelves, cards, player)

   Colour: the creator system leads with AfriPods Yellow. The listener side
   leads with AfriPods Blue. Both are declared here; a page picks one by
   setting data-brand="listener" or data-brand="creator" on <html>.
   ========================================================================== */

/* ---------- 1.1 · Fonts ---------- */
@font-face{font-family:"BDO Grotesk";src:url("/site/fonts/BDOGrotesk-Regular.woff2") format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:"BDO Grotesk";src:url("/site/fonts/BDOGrotesk-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"BDO Grotesk";src:url("/site/fonts/BDOGrotesk-DemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"BDO Grotesk";src:url("/site/fonts/BDOGrotesk-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"BDO Grotesk";src:url("/site/fonts/BDOGrotesk-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/* ---------- 1.2 · Tokens ---------- */
:root{
  /* AfriPods Yellow: creator */
  --yellow-50:#fffdf0; --yellow-100:#fff8cc; --yellow-200:#fdef8a; --yellow-300:#f8e25a;
  --yellow-400:#f2d43c; --yellow-500:#d8b91f; --yellow-600:#ad9015; --yellow-700:#806a14; --yellow-900:#3e3415;

  /* AfriPods Blue: listener. Anchored on the brand ocean #025373. */
  --blue-50:#eaf5f9; --blue-100:#c7e6f0; --blue-200:#96d2e4; --blue-300:#4db8d6;
  --blue-400:#1f9dc4; --blue-500:#0b7ea3; --blue-600:#025373; --blue-700:#023f58; --blue-900:#02202d;

  /* Neutrals: the ink ramp is the homepage's, unchanged */
  --ink:#0e1113; --ink-500:#131619; --ink-600:#191d21; --ink-700:#1d2124;
  --ink-800:#262b2f; --ink-900:#303539;
  --white:#fff; --cream:#fbfaf6; --sand:#f6f2e4; --slate:#363f3f; --muted:#77796f;

  /* Colours with a job (from the creator system, unchanged) */
  --amber:#f0a121; --orange:#ef7922; --teal:#047c89; --green:#18794e; --red:#c83224;

  /* Brand hook: overridden per page */
  --brand:var(--blue-400); --brand-strong:var(--blue-300);
  --brand-deep:var(--blue-600); --brand-on:var(--ink);

  /* Radii: small corners on everyday controls, per the system */
  --r2:2px; --r4:4px; --r6:6px; --r8:8px; --r12:12px; --r-round:9999px;
  /* card and media radii follow the homepage platform wall */
  --r-card:20px; --r-media:14px;
  /* Spacing: 4px scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --max:1180px;

  --font-heading:"BDO Grotesk","Geist",Arial,sans-serif;
  --font-body:"Geist",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,monospace;

  /* Motion: the homepage's easing and duration scale */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --dur-micro:180ms; --dur-hover:320ms; --dur-media:620ms; --dur-reveal:760ms;

  /* ---------- Motion scale ----------
     One vocabulary for the whole page. Durations are rungs, not free numbers:
     pick the rung that matches how far the thing moves, because a 40px slide
     and a colour change should not share a clock. Easings are chosen by ROLE.

       --e-standard  a state changing in place (colour, fill, opacity)
       --e-enter     something arriving: all deceleration, no overshoot
       --e-exit      something leaving: accelerate away, never linger
       --e-emphasis  the long confident move, for scenes and panels

     The stagger is the beat between siblings in one group. Multiply it by an
     element's --i to place it in the sequence. */
  --m-press:120ms;      /* a control acknowledging the press */
  --m-quick:240ms;      /* colour, fill, small opacity changes */
  --m-base:320ms;       /* the default state change */
  --m-mid:440ms;        /* something crossing a visible distance */
  --m-slow:560ms;       /* a panel, a screen, a crossfade */
  --m-travel:700ms;     /* a card stepping to a new position */
  --m-scene:820ms;      /* the page's largest single moves */
  --m-stagger:55ms;

  --e-standard:cubic-bezier(.4,0,.2,1);
  --e-enter:var(--ease-out-expo);
  --e-exit:cubic-bezier(.4,0,1,1);
  --e-emphasis:cubic-bezier(.22,1,.36,1);


  /* Light surface set (creator system default) */
  --wash-rgb:25,33,35;          /* washes, hairlines and hover fills */
  --inverse-bg:#192123; --inverse-fg:#fff;   /* a chip that opposes the page */
  --media-bg:#e4e6e2;           /* what sits behind artwork while it loads */
  --sh-1:.10; --sh-2:.14; --sh-3:.18;   /* shadow weights, light page */
  --scrim:.55; --grain:.014;
  --brand-text:var(--blue-600); --accent-text:#7a5c02;
  --chrome-rgb:251,250,246;     /* translucent nav and drawer, over the canvas */
  --raised-rgb:255,255,255;     /* the player pill and side panel, lifted above it */
  --canvas:var(--cream); --surface:rgba(255,255,255,.72); --surface-solid:var(--white);
  --text:#192123; --text-soft:#4a504c; --text-faint:#63665e;
  --border:rgba(25,33,35,.085); --border-strong:rgba(25,33,35,.17);
  --shadow-soft:0 12px 36px rgba(13,18,20,.08);
  --focus:var(--brand-deep);
}

@media(min-width:640px){:root{--r-card:24px;--r-media:16px}}

/* Creator scope. Amber is treated as LIGHT, not paint: it fills and it glows,
   and it never carries type on a pale ground, where it measures 2.05:1. The
   readable warm value on cream is --yellow-700 at 5.04:1, which is what
   --brand-text resolves to on the light surface. */
/* Creator scope. The landing page yellow, so the two pages share one warm.
   It is a fill and a glow, never type on a pale ground: yellow-400 measures
   1.41:1 on cream, so --brand-text resolves to yellow-700 (5.04:1) on light. */
[data-brand="creator"]{--brand:var(--yellow-400);--brand-strong:var(--yellow-300);
  --brand-deep:var(--yellow-700);--brand-on:var(--ink)}
[data-brand="creator"]:not([data-surface="dark"]){--brand-text:var(--yellow-700)}
[data-brand="creator"][data-surface="dark"]{--brand-text:var(--yellow-400)}

/* Dark surface set: the homepage body and the whole listener product */
[data-surface="dark"]{
  --wash-rgb:255,255,255;
  --inverse-bg:#fff; --inverse-fg:#192123;
  --media-bg:var(--ink-600);
  --sh-1:.4; --sh-2:.55; --sh-3:.62;
  --scrim:.8; --grain:.025;
  --brand-text:var(--blue-300); --accent-text:var(--yellow-300);
  --chrome-rgb:14,17,19; --raised-rgb:25,29,33;
  --canvas:var(--ink); --surface:rgba(255,255,255,.045); --surface-solid:var(--ink-600);
  --text:#fff; --text-soft:rgba(255,255,255,.72); --text-faint:rgba(255,255,255,.5);
  --border:rgba(255,255,255,.075); --border-strong:rgba(255,255,255,.16);
  --shadow-soft:0 12px 36px rgba(0,0,0,.32);
  --focus:var(--brand-strong);
}

/* ---------- 1.2b · Media zones ----------
   A photograph, an artwork tint or the full-bleed stage sits behind these, so
   their contrast is fixed by the image rather than by the page. They hold the
   dark-ground token set on both surfaces; everything inside them then resolves
   correctly without a single hard-coded colour. */
.hero-banner,.recent-panel,.stage,.pi-tooltip-host{
  --wash-rgb:255,255,255;
  --brand-text:var(--blue-300); --accent-text:var(--yellow-300);
  --inverse-bg:#fff; --inverse-fg:#192123;
  --text:#fff;
  --text-soft:rgba(255,255,255,.74);
  --text-faint:rgba(255,255,255,.56);
  --border:rgba(255,255,255,.1);
  --border-strong:rgba(255,255,255,.2);
  --surface:rgba(255,255,255,.08);
}

/* ---------- 1.10 · Cross-document transitions ----------
   Discover, the library, a podcast and an episode are one product, not four
   documents. The chrome that is identical on every page is named so the
   browser carries it across the navigation instead of cross-fading it with
   the content underneath. Anything without support just navigates as before. */
@view-transition { navigation: auto; }

.site-nav    { view-transition-name: site-nav; }
.section-nav { view-transition-name: section-nav; }
.player      { view-transition-name: player; }
.site-footer { view-transition-name: site-footer; }

::view-transition-group(*){
  animation-duration:360ms;
  animation-timing-function:cubic-bezier(.25,1,.5,1);
}
/* the page body arrives rather than simply appears */
::view-transition-old(root){ animation:vt-leave 200ms cubic-bezier(.25,1,.5,1) both }
::view-transition-new(root){ animation:vt-enter 380ms cubic-bezier(.16,1,.3,1) both }
@keyframes vt-leave{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vt-enter{ from{ opacity:0; transform:translateY(16px) } }

@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none }
}

/* The baseline, for anything that will not run a view transition: the chrome
   is already painted, so only the content of the page settles in. Same shape
   as the transition above, so the two read as one behaviour. */
/* No fill-mode on purpose. With "both" a page-level animation that never runs
   (a throttled tab, a paused renderer) holds the start frame and the content
   stays invisible. Without it the resting state is simply visible. */
[data-site] main{ animation:page-enter 460ms cubic-bezier(.16,1,.3,1) }
@keyframes page-enter{ from{ opacity:0; transform:translateY(12px) } }
@media(prefers-reduced-motion:reduce){ main{ animation:none } }

/* ---------- 1.3 · Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html[data-site]{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[data-site] body{margin:0;color:var(--text);background:var(--canvas);
  font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
/* a display value on a class outranks the attribute, so state it once and win */
[hidden]{display:none!important}
[data-site] :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
[data-site] ::selection{color:var(--ink);background:var(--brand-strong)}
.noise{position:fixed;inset:0;z-index:-1;opacity:var(--grain,.025);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.wrap{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
/* artwork is square everywhere, so reserve the box before the file lands.
   The width/height attributes do the same job; this catches anything added later. */
.art img,.podcast-cover img,.avatar>img,.recent-art img,img.cover{aspect-ratio:1}
/* a keyboard user should reach the content without walking the whole nav */
.skip-link{position:fixed;top:-60px;left:16px;z-index:100;
  padding:10px 16px;border-radius:var(--r-round);
  background:var(--brand);color:var(--brand-on);font-size:14px;font-weight:600;
  transition:top var(--dur-micro) var(--ease-out-quart)}
.skip-link:focus{top:16px}
#main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 1.4 · Typography ---------- */
[data-site] :is(h1,h2,h3,h4),.t-display,.t-h1,.t-h2,.t-h3,.t-title{font-family:var(--font-heading);font-weight:500;margin:0}
.eyebrow{margin:0 0 var(--s4);color:var(--brand-text);font-size:12px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase}
.t-display{font-size:clamp(38px,4.6vw,48px);font-weight:300;line-height:1.12}
.t-h1{font-size:34px;font-weight:400;line-height:1.18}
.t-h2{font-size:28px;font-weight:400;line-height:1.26}
.t-h3{font-size:21px;font-weight:500;line-height:1.34}
.t-title{font-size:18px;font-weight:500;line-height:1.42}
.t-body{font-size:16px;line-height:1.6}
.t-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.t-display strong,.t-h1 strong,.t-h2 strong{font-weight:700}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.soft{color:var(--text-soft)}
.faint{color:var(--text-faint)}

/* ---------- 1.5 · Section rhythm ---------- */
.section{padding:var(--s16) 0}
/* one plain heading per section; the supporting copy has been removed */
.section-head{margin-bottom:var(--s8)}
.section-head h2{font-size:clamp(24px,2.4vw,30px);font-weight:600;
  line-height:1.2}
.lede{max-width:620px;margin:0;color:var(--text-soft);font-size:17px}
.subhead{margin:var(--s8) 0 var(--s3);color:var(--text-soft);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s5)}
.shelf-actions{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.shelf-head h2{font-size:24px;font-weight:600;line-height:1.2}
.shelf-head p{margin:6px 0 0;color:var(--text-soft);font-size:14px;max-width:60ch}

/* ---------- 1.6 · Icons (Pika, inline SVG sprite) ----------
   Every page inlines the sprite once, then references a symbol with
   <svg class="mi"><use href="#pi-name"/></svg>. Sizing still runs on
   font-size so the older selectors that size icons keep working: the
   box is 1em square and colour follows currentColor.

   The sprite paths carry no stroke or fill attributes of their own, so
   these properties inherit all the way into the shadow content. */
.pi-sprite{position:absolute;width:0;height:0;overflow:hidden}
.mi{display:inline-block;flex:0 0 auto;width:1em;height:1em;font-size:20px;
  vertical-align:-.15em;overflow:visible;user-select:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mi.sm{font-size:16px} .mi.lg{font-size:24px} .mi.xl{font-size:30px}
.mi.fill{fill:currentColor;stroke:none}

/* ---------- 1.7 · Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:42px;padding:0 var(--s4);border:1px solid transparent;border-radius:var(--r-round);
  font-size:14px;font-weight:600;
  transition:background var(--dur-micro) ease,border-color var(--dur-micro) ease,
             color var(--dur-micro) ease,transform var(--dur-micro) ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn.primary{color:var(--brand-on);background:var(--brand);font-weight:700}
.btn.primary:hover{background:var(--brand-strong)}
.btn.solid{color:var(--white);background:var(--ink-800)}
.btn.solid:hover{background:var(--ink-900)}
.btn.quiet{border-color:var(--border-strong);background:var(--surface);color:var(--text)}
.btn.quiet:hover{background:rgba(var(--wash-rgb),.1)}
.btn.sm{min-height:36px;padding:0 var(--s3);font-size:13px}
.btn.icon{width:42px;padding:0}
.btn.icon.sm{width:34px}

/* ---------- 1.8 · Tags, fields, notices, panels ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:27px;padding:0 var(--s3);
  border:1px solid var(--border);border-radius:var(--r-round);background:var(--surface);
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot,var(--muted))}
.tag.plain:before{display:none}
.tag.brand{color:var(--brand-text);border-color:color-mix(in srgb,var(--brand) 34%,transparent);
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
.tag.brand:before{background:var(--brand-strong)}

.field{display:grid;gap:7px}
.field label{font-size:11px;font-weight:500}
.field input,.field textarea{width:100%;min-height:42px;padding:10px var(--s3);
  border:1px solid var(--border-strong);border-radius:var(--r4);outline:0;background:var(--surface)}
.field input:focus,.field textarea:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.field small{color:var(--text-soft);font-size:10px}

.notice{display:grid;grid-template-columns:4px 1fr;gap:var(--s3);padding:13px;
  border:1px solid var(--border);border-radius:var(--r4);background:var(--surface)}
.notice i{border-radius:1px;background:var(--note,var(--brand))}
.notice strong{display:block;font-size:12px;font-weight:500}
.notice p{margin:2px 0 0;color:var(--text-soft);font-size:11px}

.panel{padding:var(--s4);border-radius:var(--r-card);background:var(--surface)}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.panel-title h4{margin:0;font-size:12px;font-weight:600}
.panel-title a{color:var(--text-faint);font-size:9px;text-decoration:underline;text-underline-offset:3px}

/* ---------- 1.9 · Avatar and round icon button ---------- */
.avatar{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  overflow:hidden;flex:0 0 auto;
  color:var(--brand-on);background:var(--brand);font-size:12px;font-weight:600;letter-spacing:.01em}
/* the portrait sits over the monogram, so a missing photo falls back to initials */
.avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar.lg{width:46px;height:46px;font-size:15px}
.avatar.sm{width:26px;height:26px;font-size:10px}
.icon-round{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--text-soft);
  transition:background var(--dur-micro) ease,color var(--dur-micro) ease}
.icon-round:hover{color:var(--text);background:rgba(var(--wash-rgb),.08)}
.sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;flex:0 0 auto}

/* ---------- 1.9b · Progress bar ---------- */
.bar{overflow:hidden;height:4px;border-radius:1px;background:rgba(var(--wash-rgb),.1)}
.bar i{display:block;width:var(--w,0);height:100%;background:var(--brand)}

/* ---------- 1.10 · Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important;scroll-behavior:auto!important}
  .btn:hover{transform:none}
}

/* ==========================================================================
   LAYER 2 · Listener product components
   Artwork-led, small corners, faint borders. Glass is used only where the
   system allows it: the header, the player and floating overlays.
   ========================================================================== */

/* ---------- 1.9b · Surface toggle ----------
   The same pages render on either ground; this flips the attribute the whole
   token layer keys off. It borrows the nav's round-button shape. */
.surface-toggle{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:var(--r-round);color:var(--text);background:rgba(var(--wash-rgb),.1);
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.surface-toggle:hover{background:rgba(var(--wash-rgb),.18)}
.surface-toggle .sun{display:none}
[data-surface="dark"] .surface-toggle .sun{display:block}
[data-surface="dark"] .surface-toggle .moon{display:none}

/* ---------- 2.1 · Navigation ---------- */
/* Ported from the marketing homepage: same elements, same spacing scale.
   It sits inside the hero, so the carousel runs behind it. */
.site-nav{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:20px}
@media(min-width:640px){.site-nav{padding:24px 32px}}
@media(min-width:1024px){.site-nav{padding:24px 48px}}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand .mark{height:36px;width:auto}
.brand .word{height:25px;width:auto;fill:var(--text)}

.nav-desktop{display:none;align-items:center;gap:12px}
/* 900, not 768. The full row (brand + 4 pills + search + theme + log in +
   CTA) measures about 890px; switching it on at 768 pushed the CTA 119px
   past the right edge, where .hero-banner's overflow hid it on discover and
   library simply overflowed. The drawer already serves this band well. */
@media(min-width:900px){.nav-desktop{display:flex}}
.nav-pills{display:flex;align-items:center;gap:4px;padding:6px;border-radius:var(--r-round);
  background:rgba(var(--wash-rgb),.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav-pills a{padding:6px 16px;border-radius:var(--r-round);color:rgba(var(--wash-rgb),.8);
  font-size:14px;font-weight:500;transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.nav-pills a:hover{color:var(--text);background:rgba(var(--wash-rgb),.1)}
.nav-pills a.active{color:var(--text);background:rgba(var(--wash-rgb),.16)}
.nav-login{display:flex;align-items:center;align-self:stretch;padding:0 16px;border-radius:var(--r-round);
  color:rgba(var(--wash-rgb),.8);font-size:14px;font-weight:500;transition:color var(--dur-micro) ease}
.nav-login:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;align-self:stretch;padding:0 20px;border-radius:var(--r-round);
  color:var(--ink);background:var(--yellow-400);font-size:14px;font-weight:700;
  transition:background var(--dur-micro) ease}
.nav-cta:hover{background:var(--yellow-300)}

/* search: a white disc that opens into a pill, exactly as on the homepage */
.search-widget{position:relative;display:flex;align-items:center;height:44px}
.search-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--r-round);background:var(--inverse-bg);color:var(--inverse-fg);
  transition:opacity .25s ease,transform .25s ease,background .2s ease}
.search-toggle:hover{background:var(--yellow-400)}
.search-widget.is-open .search-toggle{opacity:0;transform:scale(.7);pointer-events:none}
.search-box{position:absolute;top:50%;right:0;z-index:20;transform:translateY(-50%);
  display:flex;align-items:center;gap:10px;height:44px;width:44px;padding:0;
  border-radius:var(--r-round);background:var(--inverse-bg);color:var(--inverse-fg);overflow:hidden;opacity:0;
  box-shadow:0 12px 30px rgba(0,0,0,.28);pointer-events:none;
  transition:width .4s var(--ease-out-expo),padding .4s var(--ease-out-expo),opacity .2s ease}
.search-widget.is-open .search-box{width:min(480px,74vw);padding:0 10px 0 20px;opacity:1;pointer-events:auto}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:#192123}
.search-box input::placeholder{color:rgba(25,33,35,.45)}
.search-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;
  border-radius:var(--r-round);color:rgba(25,33,35,.55);transition:background .2s ease,color .2s ease}
.search-close:hover{background:rgba(25,33,35,.08);color:#192123}

.menu-btn{position:relative;z-index:50;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-round);background:rgba(var(--wash-rgb),.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--text)}
@media(min-width:900px){.menu-btn{display:none}}
.nav-overlay{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,var(--scrim,.8));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.nav-overlay.is-open{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:0;top:0;z-index:45;height:100%;width:288px;transform:translateX(100%);
  background:rgba(var(--chrome-rgb),.95);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .5s var(--ease-out-expo);display:flex;flex-direction:column}
.drawer.is-open{transform:none}
.drawer-links{display:flex;flex-direction:column;gap:8px;padding:96px 24px 0}
.drawer-links a{display:flex;align-items:center;padding:14px 18px;border-radius:var(--r-round);
  color:rgba(var(--wash-rgb),.8);font-size:16px;font-weight:500;transition:background .2s ease,color .2s ease}
.drawer-links a:hover{color:var(--text);background:rgba(var(--wash-rgb),.1)}
.drawer-cta{margin-top:auto;padding:0 24px 40px}
.drawer-cta a{display:block;width:100%;padding:14px 24px;border-radius:var(--r-round);
  color:var(--ink);background:var(--yellow-400);font-size:14px;font-weight:700;text-align:center}

/* ---------- 2.1b · Section navigation ---------- */
/* Was a sidebar rail. Now a quiet horizontal strip under the hero. */
/* The bar sat at 88% of the page colour, which on the light surface left it
   indistinguishable from the page. A whisper of the surface ink plus a hairline
   gives it an edge. --wash-rgb is surface-aware, so this darkens on light and
   lightens on dark from one declaration. */
.section-nav{position:sticky;top:0;z-index:25;
  border-bottom:1px solid var(--border);
  background:rgba(var(--chrome-rgb),.88);
  background:
    linear-gradient(rgba(var(--wash-rgb),.03),rgba(var(--wash-rgb),.03)),
    color-mix(in srgb,var(--canvas) 88%,transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.section-nav-in{display:flex;align-items:center;justify-content:center;gap:4px;
  padding:14px 0;overflow-x:auto;scrollbar-width:none;
  /* The row scrolls when the policies do not fit. Without an edge fade there
     is nothing to say so, and the last four policies simply look absent. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%)}
.section-nav-in::-webkit-scrollbar{display:none}
/* pages in the map that are not built yet: present, plainly not clickable */
.section-nav .soon{flex:0 0 auto;padding:9px 18px;border-radius:var(--r-round);
  font-size:14px;color:var(--text-faint);cursor:default;white-space:nowrap}
.section-nav a{flex:0 0 auto;padding:9px 18px;border-radius:var(--r-round);
  color:var(--text-soft);font-size:15px;font-weight:500;white-space:nowrap;
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.section-nav a:hover{color:var(--text);background:rgba(var(--wash-rgb),.06)}
.section-nav a.active{color:var(--brand-on);background:var(--brand);font-weight:600}
.app-main{min-width:0}

/* ---------- 2.1c · Hero carousel ---------- */
/* Full bleed, no plate. The navigation rides on top of it. */
.hero-banner{position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;min-height:65svh;background:var(--ink-600)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;z-index:0;opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease-out-quart),visibility 700ms}
.slide.is-on{z-index:1;opacity:1;visibility:visible}
.slide-bg{position:absolute;inset:0;z-index:0;display:block}
.slide-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);
  transition:transform 9s linear}
.slide.is-on .slide-bg img{transform:scale(1)}
.slide:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,10,12,.88) 0%,rgba(8,10,12,.52) 42%,rgba(8,10,12,.06) 74%),
             linear-gradient(to top,rgba(8,10,12,.55),transparent 38%)}
.hero-stage{position:relative;z-index:2;flex:1}
/* the copy is absolutely positioned, so the gutter lives on it rather than
   the stage, keeping the headline flush with the nav logo */
.slide-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;padding:0 20px 44px;opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease-out-quart),visibility 700ms}
.slide-body>*{max-width:640px}
@media(min-width:640px){.slide-body{padding:0 32px 48px}}
@media(min-width:1024px){.slide-body{padding:0 48px 52px}}
.slide-body.is-on{opacity:1;visibility:visible}
.slide-kicker{margin:0 0 var(--s4);color:var(--brand-text);font-size:12px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase}
/* the copy sits in .hero-stage, not inside .slide, so scope to .slide-body */
.slide-body h1,.slide-body .slide-title{margin:0;color:var(--text);font-size:clamp(34px,4vw,48px);font-weight:800;
  line-height:1.02}
.slide-copy{max-width:46ch;margin:var(--s5) 0 0;color:rgba(var(--wash-rgb),.82);
  font-size:clamp(16px,1.3vw,18px);line-height:1.55}
.hero-cta{margin-top:var(--s6);min-height:52px;padding:0 var(--s6);border-radius:var(--r-round);
  font-size:15px;font-weight:600;color:var(--ink);background:#fff}
.hero-cta:hover{background:rgba(var(--wash-rgb),.86)}
.hero-cta.quiet{border-color:rgba(var(--wash-rgb),.4);background:rgba(var(--wash-rgb),.1);color:var(--text)}
.hero-cta.quiet:hover{background:rgba(var(--wash-rgb),.18)}
/* sits on the same baseline as the copy block, at the opposite edge */
.slide-credit{position:absolute;z-index:3;right:20px;bottom:44px;text-align:right;line-height:1.35;
  opacity:0;transition:opacity 700ms var(--ease-out-quart)}
@media(min-width:640px){.slide-credit{right:32px;bottom:48px}}
@media(min-width:1024px){.slide-credit{right:48px;bottom:52px}}
.slide-credit.is-on{opacity:1}
.slide-credit b{display:block;color:var(--text);font-size:14px;font-weight:600}
.slide-credit span{color:rgba(var(--wash-rgb),.65);font-size:13px}
/* stacked above the podcast credit, sharing its right edge */
/* film grain: the homepage texture and blend, held still on this page */
.hero-noise{position:absolute;inset:0;z-index:5;pointer-events:none;
  mix-blend-mode:overlay;opacity:.2;
  background-image:url("/site/textures/noise.png");
  background-size:256px 256px;background-repeat:repeat}
.dots-bar{position:absolute;right:20px;bottom:100px;z-index:4;display:flex;align-items:center;gap:10px}
.dots{display:flex;justify-content:flex-end;gap:10px}
.dot-pause{display:grid;place-items:center;width:26px;height:26px;margin-left:6px;
  border-radius:50%;color:rgba(var(--wash-rgb),.7);background:rgba(var(--wash-rgb),.12);
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.dot-pause:hover{color:var(--text);background:rgba(var(--wash-rgb),.22)}
@media(min-width:640px){.dots-bar{right:32px;bottom:104px}}
@media(min-width:1024px){.dots-bar{right:48px;bottom:108px}}
.dot{position:relative;width:9px;height:9px;padding:0;border-radius:50%;background:rgba(var(--wash-rgb),.42);
  transition:background var(--dur-micro) ease,transform var(--dur-micro) ease}
.dot:hover{background:rgba(var(--wash-rgb),.72)}
.dot::after{content:"";position:absolute;inset:-8px}
.dot.is-on{background:#fff;transform:scale(1.15)}

/* ---------- 2.1d · Search + category tags ---------- */
.hero-search{padding:clamp(28px,4vw,48px) 0 var(--s10)}
.search-big{display:flex;align-items:center;gap:var(--s4);max-width:820px;margin-inline:auto;
  min-height:70px;padding:0 var(--s3) 0 var(--s6);
  border:0;border-radius:var(--r-round);background:rgba(var(--wash-rgb),.06);
  transition:border-color var(--dur-micro) ease,background var(--dur-micro) ease,box-shadow var(--dur-micro) ease}
.search-big:focus-within{border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  background:rgba(var(--wash-rgb),.08);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.search-big>.mi{font-size:24px;color:var(--text-faint);flex:0 0 auto}
.search-big input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--text);font-size:18px}
.search-big input::placeholder{color:var(--text-faint)}
.search-big .btn{flex:0 0 auto;min-height:44px;padding:0 var(--s5);border-radius:var(--r-round)}
/* exactly two rows, cut cleanly between them; the rest lives in the panel */
.tag-cloud-wrap{max-width:940px;margin:var(--s5) auto 0;display:flex;flex-direction:column;
  align-items:center;gap:var(--s5)}
.tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  max-height:92px;overflow:hidden}
.tag-more{display:inline-flex;align-items:center;gap:8px}
.filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-round);color:var(--brand-on);background:var(--brand);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.tag-pill{min-height:42px;padding:0 var(--s5);border:0;border-radius:var(--r-round);
  background:rgba(var(--wash-rgb),.055);color:var(--text-soft);font-size:15px;
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease,border-color var(--dur-micro) ease}
.tag-pill:hover{color:var(--text);background:rgba(var(--wash-rgb),.11)}
.tag-pill.active{color:var(--brand-on);background:var(--brand);border-color:transparent;font-weight:600}

/* ---------- 2.2 · Card badge + equaliser ---------- */
.card-badge{position:absolute;left:var(--s2);top:var(--s2);display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:var(--r-round);color:var(--ink);background:var(--brand);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* the only decorative motion on the page, and it runs only while audio plays */
.eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex:0 0 auto}
.eq i{width:3px;border-radius:1px;background:var(--brand-strong);transform-origin:bottom;
  transform:scaleY(.3);animation:eq 1.1s var(--ease-out-quart) infinite alternate;animation-play-state:paused}
.is-playing .eq i{animation-play-state:running}
.eq i:nth-child(2){animation-delay:.16s}.eq i:nth-child(3){animation-delay:.32s}
.eq i:nth-child(4){animation-delay:.08s}.eq i:nth-child(5){animation-delay:.24s}
@keyframes eq{from{transform:scaleY(.22)}to{transform:scaleY(1)}}

/* ---------- 2.3 · Shelves ---------- */
.shelf{position:relative}
.track{display:flex;gap:var(--s4);overflow-x:auto;scroll-behavior:smooth;
  padding-bottom:var(--s3);scroll-snap-type:x proximity;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start;flex:0 0 auto}
.arrows{display:flex;gap:6px;flex:0 0 auto}
.arrows button{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-round);
  color:var(--text-soft);background:rgba(var(--wash-rgb),.06);
  transition:background var(--dur-micro) ease,color var(--dur-micro) ease,opacity var(--dur-micro) ease}
.arrows button:hover{color:var(--text);background:rgba(var(--wash-rgb),.12)}
.arrows button[disabled]{opacity:.3;pointer-events:none}

/* ---------- 2.4 · Cards ---------- */
/* No plate, no border. The artwork is the card; the caption sits under it. */
.art{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--media-bg)}
.art img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform var(--dur-hover) var(--ease-out-quart)}
.art .play{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;color:var(--brand-on);background:var(--brand);opacity:0;transform:translateY(6px);
  box-shadow:0 8px 20px rgba(0,0,0,var(--sh-1));
  transition:opacity var(--dur-micro) ease,transform var(--dur-micro) var(--ease-out-quart)}

.podcast-card{display:flex;flex-direction:column;width:190px;cursor:pointer}
.podcast-card:hover .art img{transform:scale(1.04)}
.podcast-card:hover .play,.podcast-card:focus-within .play{opacity:1;transform:none}
.podcast-card h3{margin-top:var(--s3);font-size:16px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.podcast-card p{margin:4px 0 0;color:var(--text-faint);font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-badge{position:absolute;z-index:2;left:10px;top:10px;padding:5px 9px;border-radius:var(--r-round);
  color:var(--ink);background:var(--brand);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.reason{display:flex;align-items:center;gap:6px;margin-bottom:10px;
  color:var(--brand-text);font-size:13px;font-weight:500}

/* ---------- 2.4b · Featured card ---------- */
/* A larger podcast card: artwork, name, category. Nothing else. */
.featured-track{align-items:flex-start;padding-bottom:var(--s3)}
/* sized so five sit fully in the content column and the sixth is clipped,
   which is what signals the shelf keeps going */
.featured-card{display:flex;flex-direction:column;width:clamp(152px,15vw,192px);cursor:pointer}
.featured-card .art{border-radius:var(--r-card)}
.featured-card:hover .art img{transform:scale(1.04)}
.featured-card h3{margin-top:var(--s3);font-size:16px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.featured-card p{margin:4px 0 0;color:var(--text-faint);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 2.5 · Continue listening ---------- */
.continue-card{display:flex;gap:var(--s4);width:330px;cursor:pointer}
/* the artwork scales inside its frame; the track clips vertically, so growing
   the frame itself would shave the top edge on hover */
.continue-card .art{width:96px;flex:0 0 auto;align-self:center}
.continue-card:hover .art img{transform:scale(1.04)}
.continue-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.continue-body b{font-size:15px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.continue-body span{margin-top:3px;color:var(--text-faint);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue-body .bar{margin-top:10px}
.continue-body small{margin-top:6px;color:var(--text-faint);font-size:12.5px}
.continue-card .resume{align-self:center;display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:50%;color:var(--brand-on);background:var(--brand);
  transition:transform var(--dur-micro) var(--ease-out-quart)}
.continue-card:hover .resume{transform:scale(1.06)}

/* ---------- 2.5b · Recently played ---------- */
/* Hovering a row swaps the artwork and repaints the wash, using a tint read
   from that podcast's cover at runtime. */
/* sits tight under the Continue listening shelf so the two read as one group */
.recent{margin-top:var(--s4)}
.recent-col h3{margin:0 0 var(--s3);padding:0 16px;
  color:rgba(var(--wash-rgb),.72);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.recent-panel{position:relative;overflow:hidden;
  display:flex;align-items:stretch;gap:clamp(20px,2.6vw,36px);
  padding:clamp(16px,1.6vw,20px);border-radius:var(--r-card);
  background:
    linear-gradient(104deg,color-mix(in srgb,var(--tint,#5d5f63) 60%,transparent) 0%,
                           color-mix(in srgb,var(--tint,#5d5f63) 10%,transparent) 58%,
                           transparent 78%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
    linear-gradient(var(--ink),var(--ink));
  transition:background 420ms var(--ease-out-quart)}

.recent-art{position:relative;width:clamp(140px,22vw,268px);flex:0 0 auto;
  align-self:flex-start;border-radius:var(--r-media);overflow:hidden;cursor:pointer;
  background:var(--media-bg)}
.recent-art img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform var(--dur-hover) var(--ease-out-quart),opacity 220ms ease}
.recent-art.is-swapping img{opacity:0}
.recent-art:hover img{transform:scale(1.04)}
.recent-play{position:absolute;left:50%;top:50%;
  display:grid;place-items:center;width:clamp(54px,5.4vw,80px);aspect-ratio:1;border-radius:50%;
  color:var(--ink);background:#fff;box-shadow:0 12px 34px rgba(0,0,0,var(--sh-1));
  transform:translate(-50%,-50%);
  transition:transform var(--dur-micro) var(--ease-out-quart)}
.recent-play .mi{font-size:clamp(28px,2.8vw,40px)}
.recent-art:hover .recent-play{transform:translate(-50%,-50%) scale(1.07)}

.recent-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.recent-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.recent-row{display:flex;align-items:center;gap:var(--s4);
  padding:12px 16px;border-radius:var(--r12);
  transition:background var(--dur-micro) ease}
.recent-row:hover,.recent-row:focus-within{background:rgba(var(--wash-rgb),.11)}
.recent-main{flex:1;min-width:0;padding:0;text-align:left;color:var(--text)}
.recent-main .t{display:block;min-width:0}
.recent-main .t b{display:block;font-size:16px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-main .t span{display:block;margin-top:2px;color:rgba(var(--wash-rgb),.62);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-row .plays{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  color:rgba(var(--wash-rgb),.62);font-size:14px;font-variant-numeric:tabular-nums}
.row-go{display:none}
/* only offer the hover link where there is a pointer to hover with */
@media(hover:hover){
  .row-go{display:inline-flex;align-items:center;flex:0 0 auto;
    height:34px;padding:0 var(--s4);border-radius:var(--r-round);
    border:1px solid rgba(var(--wash-rgb),.28);background:rgba(var(--wash-rgb),.12);
    color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;
    opacity:0;transform:translateX(6px);pointer-events:none;
    transition:opacity var(--dur-micro) ease,transform var(--dur-micro) var(--ease-out-quart),
               background var(--dur-micro) ease}
  .recent-row:hover .row-go,.recent-row:focus-within .row-go{opacity:1;transform:none;pointer-events:auto}
  .row-go:hover{background:rgba(var(--wash-rgb),.22)}
}

/* ---------- 2.6 · Wide recommendation ---------- */
.wide-card{display:flex;gap:var(--s5);cursor:pointer}
/* align-self keeps the artwork square when the copy runs taller than it */
.wide-card .art{width:clamp(104px,10vw,132px);flex:0 0 auto;align-self:flex-start}
.wide-card:hover .art img{transform:scale(1.04)}
.wide-card:hover .play{opacity:1;transform:none}
.wide-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.wide-body h3{font-size:19px;font-weight:600;line-height:1.28}
.wide-body p{margin:8px 0 0;color:var(--text-soft);font-size:15px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wide-foot{display:flex;align-items:center;gap:var(--s2);margin-top:10px;
  color:var(--text-faint);font-size:13.5px}

/* ---------- 2.6b · Active library filter ----------
   Says why the grid is narrowed and undoes it in one click. */
.active-filter{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);
  margin:0 0 var(--s5);color:var(--text-faint);font-size:14px}
.active-filter-lead{flex:0 0 auto}
.active-filter-chips{display:flex;flex-wrap:wrap;gap:var(--s2);min-width:0}
.active-filter-clear{flex:0 0 auto;color:var(--text-faint);font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;
  transition:color var(--dur-micro) ease}
.active-filter-clear:hover{color:var(--text)}
.active-filter-chip{display:inline-flex;align-items:center;gap:var(--s2);
  padding:5px 10px 5px 14px;border:1px solid var(--border-strong);border-radius:var(--r-round);
  background:var(--surface);color:var(--text);font-size:14px;font-weight:600;
  transition:background var(--dur-micro) ease,border-color var(--dur-micro) ease}
.active-filter-chip .mi{color:var(--text-faint)}
@media (hover:hover){
  .active-filter-chip:hover{border-color:var(--brand);background:rgba(var(--wash-rgb),.06)}
  .active-filter-chip:hover .mi{color:var(--text)}
}

/* ---------- 2.7 · Browse index ----------
   Browse closes the page, so it reads as a plain index rather than a wall
   of tiles: name on the left, count on the right, a hairline between each.
   Rows are one line tall, which keeps the rules aligned across columns. */
.index{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--s8);border-top:1px solid var(--border)}
.index-item{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  width:calc(100% + 20px);margin:0 -10px;padding:11px 10px;line-height:1.45;
  border:0;border-bottom:1px solid var(--border);border-radius:var(--r2);
  background:none;text-align:left;color:var(--text);text-decoration:none;
  font-size:16px;font-weight:500;transition:background var(--dur-micro) ease,color var(--dur-micro) ease}
.index-item em{font-style:normal;flex:0 0 auto;color:var(--text-faint);font-size:13.5px;
  font-variant-numeric:tabular-nums;transition:color var(--dur-micro) ease}
@media (hover:hover){
  .index-item:hover{background:rgba(var(--wash-rgb),.045)}
  .index-item:hover em{color:var(--text-soft)}
}
@media(max-width:900px){ .index{grid-template-columns:repeat(2,1fr)} }

/* ---------- 2.8 · Creator card ---------- */
.creator-card{display:flex;flex-direction:column;align-items:center;width:190px;text-align:center;
  cursor:pointer}
.creator-card .avatar{width:120px;height:120px;font-size:34px;border-radius:50%;
  transition:transform var(--dur-hover) var(--ease-out-quart)}
.creator-card:hover .avatar{transform:scale(1.04)}
.creator-card b{margin-top:var(--s4);font-size:16px;font-weight:600}
.creator-card .role{margin-top:4px;color:var(--text-faint);font-size:13.5px;line-height:1.45}
.creator-card .loc{display:none}
.creator-stats{display:flex;justify-content:center;gap:var(--s3);margin-top:6px;
  color:var(--text-faint);font-size:13.5px}
.creator-stats div{display:flex;align-items:baseline;gap:5px}
.creator-stats b{margin:0;font-size:13.5px;font-weight:600;color:var(--text-soft)}
.creator-stats span{text-transform:lowercase}
.creator-card .btn{margin-top:var(--s3)}
.btn.following{color:var(--brand-text);border-color:color-mix(in srgb,var(--brand) 40%,transparent);
  background:color-mix(in srgb,var(--brand) 12%,transparent)}

/* ---------- 2.9 · Feed ---------- */
.feed-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s4);
  border-radius:var(--r-card);transition:background var(--dur-micro) ease}
.feed-row:hover{background:rgba(var(--wash-rgb),.045)}
.feed-row img.cover{width:76px;height:76px;object-fit:cover;border-radius:var(--r-media);
  flex:0 0 auto;cursor:pointer}
.feed-body{flex:1;min-width:0}
.feed-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--text-faint);font-size:13.5px}
.feed-top b{color:var(--text-soft);font-weight:500}
.feed-body h3{margin-top:5px;font-size:18px;font-weight:600;line-height:1.3}
.feed-body p{margin:5px 0 0;color:var(--text-soft);font-size:14.5px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.feed-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}

/* ---------- 2.10 · Supporter content ---------- */
.supporter{padding:clamp(24px,4vw,44px);border-radius:var(--r-card);
  background:linear-gradient(160deg,rgba(242,212,60,.07),rgba(242,212,60,.02))}
.supporter h2{font-size:clamp(24px,2.4vw,30px);font-weight:600;line-height:1.2}
.supporter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s5);
  margin-top:var(--s8)}
.supporter-card{display:flex;flex-direction:column;cursor:pointer}
.supporter-card .art{border-radius:var(--r-media)}
.supporter-card:hover .art img{transform:scale(1.04)}
.supporter-card:hover .play{opacity:1;transform:none}
.supporter-card.locked .art img{filter:grayscale(.55) brightness(.5)}
.lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:var(--yellow-300)}
.lock .mi{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(14,17,19,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.badge-member{position:absolute;z-index:2;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:var(--r-round);color:var(--ink);background:var(--yellow-400);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.supporter-card .who{display:flex;align-items:center;gap:8px;margin-top:var(--s4);
  color:var(--text-faint);font-size:13.5px}
.supporter-card h4{margin-top:7px;font-size:17px;font-weight:600;line-height:1.3}
.supporter-card p{margin:6px 0 0;color:var(--text-faint);font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tier{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  color:var(--accent-text);font-size:13px;font-weight:500}
.supporter-card .btn{margin-top:var(--s4);align-self:flex-start}
.btn.member{color:var(--ink);background:var(--yellow-400);font-weight:700}
.btn.member:hover{background:var(--yellow-300)}

/* ---------- 2.11 · Feature card ---------- */
.feature-card{display:flex;flex-direction:column;cursor:pointer}
.feature-card .art{border-radius:var(--r-card)}
.feature-card:hover .art img{transform:scale(1.03)}
.feature-card:hover .play{opacity:1;transform:none}
.feature-card h3{margin-top:var(--s4);font-size:24px;font-weight:700;line-height:1.18}
.feature-card>p{margin:var(--s3) 0 0;color:var(--text-soft);font-size:15px;line-height:1.55}
.feature-card .foot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5)}

/* ---------- 2.12 · Editorial collections ---------- */
.collections{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5)}
.collection{display:flex;flex-direction:column;min-height:210px;padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-card);background:var(--surface);cursor:pointer;
  transition:background var(--dur-micro) ease,transform var(--dur-micro) var(--ease-out-quart)}
.collection:hover{background:rgba(var(--wash-rgb),.075);transform:translateY(-2px)}
.collection .kicker{align-self:flex-start;margin-bottom:var(--s4);
  color:var(--text-faint);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.collection h3{max-width:18ch;font-size:22px;font-weight:600;line-height:1.18}
.collection h3 strong{font-weight:800}
.collection p{margin:var(--s3) 0 0;max-width:44ch;color:var(--text-soft);font-size:14.5px;line-height:1.5}
.collection .stack{display:flex;align-items:center;margin-top:auto;padding-top:var(--s6)}
.collection .stack img{width:58px;height:58px;object-fit:cover;border-radius:var(--r-media);
  margin-left:-14px;box-shadow:0 0 0 3px var(--canvas);
  transition:transform var(--dur-hover) var(--ease-out-quart)}
.collection .stack img:first-child{margin-left:0}
.collection:hover .stack img{transform:translateY(-3px)}
.collection:hover .stack img:nth-child(2){transition-delay:40ms}
.collection:hover .stack img:nth-child(3){transition-delay:80ms}
.collection:hover .stack img:nth-child(4){transition-delay:120ms}
.collection .count{margin-left:var(--s5);color:var(--text-faint);font-size:13.5px}
.collection.wide{grid-column:span 7;min-height:250px}
.collection.tall{grid-column:span 5;min-height:250px}
.collection.third{grid-column:span 4}
.collection.wide h3,.collection.tall h3{font-size:28px}

/* ---------- 2.12b · Filter panel ---------- */
/* A floating panel on the right, over a dimmed page. */
.filters-overlay{position:fixed;inset:0;z-index:68;background:rgba(4,6,8,.7);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity var(--dur-hover) ease}
.filters-overlay.is-open{opacity:1;pointer-events:auto}

.filter-panel{position:fixed;z-index:69;top:14px;right:14px;bottom:14px;
  width:min(420px,calc(100% - 28px));display:flex;flex-direction:column;
  border-radius:var(--r-card);background:var(--surface-solid);
  box-shadow:0 40px 90px rgba(0,0,0,var(--sh-3));
  transform:translateX(calc(100% + 24px));visibility:hidden;
  transition:transform 460ms var(--ease-out-expo),visibility 460ms}
.filter-panel.is-open{transform:none;visibility:visible}

.filter-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4)}
.filter-head h3{font-size:20px;font-weight:600}

.filter-body{flex:1;min-height:0;overflow-y:auto;display:grid;gap:var(--s6);
  padding:0 var(--s5) var(--s5);scrollbar-width:thin}
.filter-group h4,.filter-label{display:block;margin-bottom:var(--s3);
  color:var(--text-faint);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
/* Groups are native disclosures, so the keyboard and screen reader behaviour
   comes for free and the panel stays usable with the chips collapsed. */
.filter-group{border-bottom:1px solid var(--border);padding-bottom:var(--s5)}
.filter-group:last-child{border-bottom:0;padding-bottom:0}
.filter-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:2px 0;cursor:pointer;list-style:none}
.filter-summary::-webkit-details-marker{display:none}
.filter-summary::marker{content:""}
.filter-summary h4{margin-bottom:0}
.filter-summary .mi{flex:0 0 auto;color:var(--text-faint);
  transition:transform var(--dur-micro) var(--ease-out-quart),color var(--dur-micro) ease}
.filter-summary:hover .mi{color:var(--text)}
.filter-group[open] .filter-summary .mi{transform:rotate(180deg)}
.filter-group .filter-chips{padding-top:var(--s4)}
.filter-summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r6)}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.filter-chips .tag-pill{min-height:36px;padding:0 var(--s4);font-size:14px}

.filter-search{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 var(--s4);
  border-radius:var(--r-round);background:rgba(var(--wash-rgb),.06)}
.filter-search .mi{color:var(--text-faint)}
.filter-search input{flex:1;min-width:0;border:0;outline:0;background:none;
  color:var(--text);font-size:15px}
.filter-search input::placeholder{color:var(--text-faint)}
.filter-search:focus-within{background:rgba(var(--wash-rgb),.09);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 40%,transparent)}

.filter-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-top:1px solid var(--border)}
.filter-clear{color:var(--text-faint);font-size:14px;font-weight:500;
  transition:color var(--dur-micro) ease}
.filter-clear:hover{color:var(--text)}
.filter-clear[disabled]{opacity:.4;pointer-events:none}

@media(max-width:520px){
  .filter-panel{top:auto;right:0;bottom:0;left:0;width:100%;max-height:88svh;
    border-radius:var(--r-card) var(--r-card) 0 0;
    transform:translateY(calc(100% + 24px))}
  .filter-panel.is-open{transform:none}
}

/* ---------- 2.12c · Library page ---------- */
/* Inner pages have no hero behind the nav, so it needs its own ground. */
.page-head{background:var(--canvas);border-bottom:1px solid var(--border)}

.library-head{padding:var(--s12) 0 var(--s6)}
.library-head h1{font-size:clamp(30px,3.4vw,42px);font-weight:700}
.library-head p{margin:var(--s3) 0 0;color:var(--text-faint);font-size:15px}

.library-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  padding-bottom:var(--s8)}
.library-search{position:relative;flex:1 1 280px;min-width:0}
.library-search input{width:100%;min-height:48px;padding:0 var(--s5) 0 46px;
  border:0;border-radius:var(--r-round);background:rgba(var(--wash-rgb),.06);
  color:var(--text);font-size:15px;
  transition:background var(--dur-micro) ease,box-shadow var(--dur-micro) ease}
.library-search input::placeholder{color:var(--text-faint)}
.library-search input:focus{outline:0;background:rgba(var(--wash-rgb),.09);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.library-search .mi{position:absolute;left:16px;top:50%;translate:0 -50%;
  color:var(--text-faint);pointer-events:none}

.sort-group{display:flex;align-items:center;gap:2px;padding:4px;flex:0 0 auto;
  border-radius:var(--r-round);background:rgba(var(--wash-rgb),.055)}
.sort-group button{min-height:40px;padding:0 var(--s4);border-radius:var(--r-round);
  color:var(--text-soft);font-size:14px;font-weight:500;
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.sort-group button:hover{color:var(--text)}
.sort-group button.active{color:var(--brand-on);background:var(--brand);font-weight:600}

.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--s6) var(--s4)}
.library-grid .podcast-card{width:auto}
.library-empty{padding:var(--s16) 0;text-align:center;color:var(--text-faint);font-size:15px}
.library-more{display:flex;justify-content:center;padding:var(--s12) 0 var(--s8)}

@media(max-width:620px){
  .library-head{padding:var(--s8) 0 var(--s5)}
  .library-controls{padding-bottom:var(--s6)}
  .library-search input{min-height:44px}
  .sort-group{width:100%;justify-content:space-between}
  .sort-group button{flex:1;padding:0 var(--s2);font-size:13px}
  .library-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s5) var(--s3)}
}

/* ---------- 2.12d · Podcast page ---------- */
/* The header carries a wash sampled from the cover, the same way the
   Recently played panel does. */
.podcast-hero{position:relative;overflow:hidden;padding:var(--s12) 0 var(--s10)}
.podcast-hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--tint,#3a3f45) 42%,transparent) 0%,
    color-mix(in srgb,var(--tint,#3a3f45) 8%,transparent) 46%,
    transparent 72%);
  transition:background 500ms var(--ease-out-quart)}
.podcast-hero-in{display:flex;align-items:flex-start;gap:clamp(24px,4vw,52px)}
.podcast-cover{width:clamp(150px,22vw,264px);flex:0 0 auto;border-radius:var(--r-card);
  overflow:hidden;background:var(--media-bg)}
.podcast-cover img{width:100%;aspect-ratio:1;object-fit:cover}
.podcast-meta{flex:1;min-width:0}
.podcast-meta h1{margin-top:var(--s3);font-size:clamp(30px,4vw,50px);font-weight:700;line-height:1.04}
.podcast-by{display:flex;align-items:center;gap:10px;margin-top:var(--s4);
  color:var(--text-soft);font-size:15px}
.host-name{color:var(--text);font-weight:500}
.podcast-by a{font-weight:600;color:var(--text);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(var(--wash-rgb),.28)}
.podcast-by a:hover{text-decoration-color:var(--brand-text)}
.podcast-desc{max-width:64ch;margin:var(--s4) 0 0;color:var(--text-soft);font-size:15.5px;
  line-height:1.6}
.podcast-desc.clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desc-toggle{margin-top:8px;color:var(--brand-text);font-size:14px;font-weight:600}
.desc-toggle:hover{color:var(--text)}
.podcast-signals{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);
  margin-top:var(--s5);color:var(--text-faint);font-size:14px}
.podcast-signals b{color:var(--text);font-weight:600}
.podcast-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s6)}

/* ---------- episode list ---------- */
.episodes-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s5)}
.episodes-head h2{font-size:24px;font-weight:600}
.episode-row{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s5) var(--s4);
  border-radius:var(--r-card);transition:background var(--dur-micro) ease}
.episode-row:hover{background:rgba(var(--wash-rgb),.045)}
.episode-num{width:34px;flex:0 0 auto;padding-top:3px;color:var(--text-faint);
  font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.episode-body{flex:1;min-width:0}
.episode-body h3{font-size:17px;font-weight:600;line-height:1.32}
.episode-body h3 a{transition:color var(--dur-micro) ease}
.episode-row:hover .episode-body h3 a{color:var(--brand-text)}
.episode-body p{margin:6px 0 0;color:var(--text-soft);font-size:14.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  margin-top:var(--s3);color:var(--text-faint);font-size:13.5px}
.episode-progress{display:flex;align-items:center;gap:10px;width:min(220px,42%);margin-top:var(--s3)}
.episode-progress .bar{flex:1}
.episode-progress span{color:var(--text-faint);font-size:12.5px;white-space:nowrap}
.episode-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto;padding-top:2px}
.episode-row .members{display:inline-flex;align-items:center;gap:5px;
  color:var(--accent-text);font-size:12.5px;font-weight:600}

/* ---------- episode thumbnails + list/grid switch ---------- */
/* Decorative: the row is already clickable via data-href and the title is the
   real link, so the thumb carries no link semantics and no tab stop. */
.episode-thumb{flex:0 0 auto;overflow:hidden;width:72px;aspect-ratio:1;
  border-radius:10px;background:var(--media-bg)}
.episode-thumb img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-micro) ease}
.episode-row:hover .episode-thumb img{transform:scale(1.06)}
@media(max-width:560px){.episode-thumb{width:56px}}

/* both controls belong together at the end of the row, not spread apart by
   the head's space-between */
.episodes-head .sort-group{margin-left:auto}
.view-switch{display:flex;align-items:center;gap:2px;padding:4px;flex:0 0 auto;
  border-radius:var(--r-round);background:var(--surface)}
.view-switch button{display:grid;place-items:center;width:40px;height:40px;
  border-radius:var(--r-round);color:var(--text-faint);
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.view-switch button:hover{color:var(--text)}
.view-switch button[aria-pressed="true"]{color:var(--brand-on);background:var(--brand)}

#episodeList.is-grid{display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
#episodeList.is-grid .episode-row{position:relative;flex-direction:column;
  align-items:stretch;gap:var(--s3);padding:var(--s3);
  background:var(--surface);border:1px solid var(--border)}
#episodeList.is-grid .episode-row:hover{background:rgba(var(--wash-rgb),.07)}
/* stays square: podcast art is composed as a square and a landscape crop
   cuts the wordmark, so the cards are made narrower instead */
#episodeList.is-grid .episode-thumb{width:100%;border-radius:var(--r-media)}
/* the number rides the artwork once the row becomes a card */
#episodeList.is-grid .episode-num{position:absolute;z-index:1;width:auto;
  top:calc(var(--s3) + 8px);left:calc(var(--s3) + 8px);padding:3px 8px;
  border-radius:var(--r-round);background:rgba(0,0,0,.6);color:#fff;font-size:12px}
#episodeList.is-grid .episode-body{flex:1;display:flex;flex-direction:column}
#episodeList.is-grid .episode-body h3{font-size:15.5px}
#episodeList.is-grid .episode-body p{font-size:13.5px}
#episodeList.is-grid .episode-foot{font-size:12.5px}
#episodeList.is-grid .episode-progress{width:100%}
/* pinned to the foot so cards in a row end level however long the text runs */
#episodeList.is-grid .episode-actions{margin-top:auto;padding-top:var(--s2);
  justify-content:space-between}

/* ---------- supporter callout ---------- */
.support-callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);margin-top:var(--s10);padding:clamp(20px,2.6vw,30px);border-radius:var(--r-card);
  background:linear-gradient(140deg,rgba(242,212,60,.09),rgba(242,212,60,.02))}
.support-callout h3{font-size:20px;font-weight:600}
.support-callout p{margin:8px 0 0;max-width:56ch;color:var(--text-soft);font-size:14.5px;line-height:1.55}

@media(max-width:820px){
  .podcast-hero-in{flex-direction:column}
  .podcast-cover{width:min(220px,52vw)}
}
@media(max-width:620px){
  .podcast-hero{padding:var(--s8) 0 var(--s6)}
  .episode-row{flex-wrap:wrap;padding:var(--s4) var(--s3);gap:var(--s3)}
  .episode-num{width:26px;font-size:12px}
  .episode-body h3{font-size:16px}
  .episode-progress{width:100%}
  .episode-actions{flex-basis:100%;padding-top:var(--s2)}
  .support-callout{flex-direction:column;align-items:flex-start}
}

/* ---------- 2.12e · Episode page ---------- */
.podcast-cover.sm{width:clamp(120px,15vw,196px)}
.breadcrumb{display:flex;align-items:center;gap:8px;color:var(--text-faint);font-size:14px}
.breadcrumb a{color:var(--text-soft);font-weight:500;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(var(--wash-rgb),.24)}
.breadcrumb a:hover{color:var(--text);text-decoration-color:var(--brand-text)}
.episode-hero h1{margin-top:var(--s3);font-size:clamp(26px,3.4vw,42px);font-weight:700;line-height:1.1;max-width:22ch}
.episode-resume{display:flex;align-items:center;gap:var(--s4);max-width:420px;margin-top:var(--s5)}
.episode-resume .bar{flex:1}
.episode-resume span{color:var(--text-faint);font-size:13px;white-space:nowrap}

.episode-body-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:clamp(28px,4vw,64px);align-items:start}
.episode-notes h2{font-size:20px;font-weight:600;margin-bottom:var(--s4)}
.episode-notes p{margin:0 0 var(--s4);color:var(--text-soft);font-size:15.5px;line-height:1.68;
  max-width:68ch}
.ts{display:inline-block;padding:1px 7px;border-radius:var(--r-round);
  background:rgba(var(--wash-rgb),.08);color:var(--brand-text);
  font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;
  transition:background var(--dur-micro) ease,color var(--dur-micro) ease}
.ts:hover{background:var(--brand);color:var(--brand-on)}

.reacts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.react{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 var(--s4);
  border-radius:var(--r-round);background:rgba(var(--wash-rgb),.055);color:var(--text-soft);font-size:14px;
  transition:background var(--dur-micro) ease,color var(--dur-micro) ease}
.react:hover{background:rgba(var(--wash-rgb),.1);color:var(--text)}
.react.active{background:color-mix(in srgb,var(--brand) 22%,transparent);color:var(--text)}
.react b{font-variant-numeric:tabular-nums;font-weight:600}

.comment{display:flex;gap:var(--s4);padding:var(--s4) 0}
.comment + .comment{box-shadow:0 -1px 0 var(--border)}
.comment-body b{font-size:14.5px;font-weight:600}
.comment-body .when{margin-left:8px;color:var(--text-faint);font-size:13px}
.comment-body p{margin:6px 0 0;color:var(--text-soft);font-size:14.5px;line-height:1.55}
.comment-body .at{display:inline-block;margin-top:8px;color:var(--brand-text);
  font-family:var(--font-mono);font-size:12.5px}

.episode-side{display:grid;gap:var(--s5);position:sticky;top:calc(var(--s16) + var(--s2))}
.side-card{padding:var(--s5);border-radius:var(--r-card);background:var(--surface)}
.side-card h3{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:var(--s4)}
.next-episode{display:flex;gap:var(--s4);cursor:pointer}
.next-episode .art{width:72px;flex:0 0 auto;align-self:flex-start}
.next-episode b{display:block;font-size:15px;font-weight:600;line-height:1.32}
.next-episode span{display:block;margin-top:5px;color:var(--text-faint);font-size:13px}
.fact-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:9px 0;font-size:14px}
.fact-row + .fact-row{box-shadow:0 -1px 0 var(--border)}
.fact-row span{color:var(--text-faint)}
.fact-row b{font-weight:600}

@media(max-width:900px){
  .episode-body-grid{grid-template-columns:1fr}
  .episode-side{position:static}
}
@media(max-width:620px){
  .episode-hero h1{font-size:clamp(23px,6.4vw,30px)}
  .podcast-cover.sm{width:min(150px,42vw)}
  .comment{gap:var(--s3)}
}

/* ---------- 2.13 · Persistent player ----------
   A card that floats clear of the bottom edge rather than a bar welded to it,
   so the page still reads underneath and the player looks dismissable, which
   it now is. The outer shell only positions: it stays click-through so the
   gap either side of the card does not swallow clicks on the page below. */
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:0 20px 20px;pointer-events:none;
  transform:translateY(110%);
  transition:transform var(--dur-media) var(--ease-out-expo)}
.player.up{transform:none}
.player-inner{position:relative;pointer-events:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
  align-items:center;gap:var(--s5);
  width:min(var(--max),100%);margin-inline:auto;
  min-height:68px;padding:10px var(--s5);
  border-radius:var(--r-card);
  background:rgba(var(--raised-rgb),.92);background:color-mix(in srgb,var(--surface-solid) 92%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  /* No outline, so the edge has to come from shadow: a tight pass to define
     it, a wide neutral one for lift, and a low blue bloom that ties the card
     to the brand without reading as a coloured drop shadow. */
  box-shadow:0 2px 6px rgba(0,0,0,var(--sh-1)),
             0 22px 60px rgba(0,0,0,var(--sh-3)),
             0 0 34px color-mix(in srgb,var(--brand) 18%,transparent),
             0 14px 48px color-mix(in srgb,var(--brand) 14%,transparent)}
.player-left{display:flex;align-items:center;gap:var(--s3);min-width:0}
.player-left img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-media);flex:0 0 auto;cursor:pointer}
.player-meta{min-width:0}
.player-meta b{display:block;font-family:var(--font-heading);font-size:14px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta span{display:block;color:var(--text-faint);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-center{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(44vw,460px)}
.transport{display:flex;align-items:center;gap:var(--s3)}
.transport button{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--text-soft);transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.transport button:hover{color:var(--text);background:rgba(var(--wash-rgb),.08)}
.transport .play-main{width:38px;height:38px;color:var(--brand-on);background:var(--brand)}
.transport .play-main:hover{color:var(--brand-on);background:var(--brand-strong)}
.timeline{display:flex;align-items:center;gap:10px;width:100%;color:var(--text-faint);font-size:11px}
.scrub{position:relative;flex:1;height:12px;display:flex;align-items:center;cursor:pointer}
.scrub .rail{position:relative;width:100%;height:3px;border-radius:1px;background:rgba(var(--wash-rgb),.14)}
.scrub .fill{position:absolute;inset:0 auto 0 0;background:var(--brand)}
.scrub .knob{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--text);
  translate:-50% -50%;opacity:0;transition:opacity var(--dur-micro) ease}
.scrub:hover .knob{opacity:1}
.chapmark{position:absolute;top:50%;width:2px;height:7px;translate:0 -50%;background:rgba(var(--wash-rgb),.4)}
.player-right{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.speed{min-height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-round);
  color:var(--text-soft);font-family:var(--font-mono);font-size:12px}
.speed:hover{color:var(--text);background:rgba(var(--wash-rgb),.08)}
.player-close{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:var(--text-faint);
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.player-close:hover{color:var(--text);background:rgba(var(--wash-rgb),.1)}

/* Tooltips. The labels come straight off aria-label, so the play control says
   Play or Pause without anything extra to keep in sync. They wait before
   appearing, which keeps a passing cursor quiet, and leave immediately. */
.player-inner :is(button,a)[aria-label],.player-inner [data-tip]{position:relative}
.player-inner :is(button,a)[aria-label]::after,.player-inner [data-tip]::after{
  content:attr(aria-label);
  position:absolute;bottom:calc(100% + 10px);left:50%;
  padding:6px 10px;border-radius:var(--r8);
  background:var(--inverse-bg);color:var(--inverse-fg);
  font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.3;
  letter-spacing:0;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,var(--sh-2));
  opacity:0;translate:-50% 4px;pointer-events:none;
  transition:opacity var(--dur-micro) ease,translate var(--dur-micro) ease}
.player-inner [data-tip]::after{content:attr(data-tip)}
/* the last control sits near the edge, so its tooltip hangs to the left */
.player-close::after{left:auto;right:0;translate:0 4px}
@media (hover:hover){
  .player-inner :is(button,a):hover::after,
  .player-inner :is(button,a):focus-visible::after{opacity:1;translate:-50% 0;transition-delay:480ms}
  .player-close:hover::after,
  .player-close:focus-visible::after{translate:0 0}
}

/* ---------- 2.13b · Player side panel ----------
   Queue and Transcript open here rather than taking over the screen. It hangs
   off the top-right of the player card, so it inherits the card's slide-away
   and leaves with it when the player is closed. */
.player-panel{position:absolute;right:0;bottom:calc(100% + 12px);z-index:2;
  display:flex;flex-direction:column;
  width:min(360px,calc(100vw - 40px));max-height:min(54vh,440px);
  border-radius:var(--r-card);overflow:hidden;
  background:rgba(var(--raised-rgb),.95);background:color-mix(in srgb,var(--surface-solid) 95%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 2px 6px rgba(0,0,0,var(--sh-1)),
             0 22px 60px rgba(0,0,0,var(--sh-3)),
             0 0 34px color-mix(in srgb,var(--brand) 18%,transparent);
  opacity:0;visibility:hidden;translate:0 10px;
  transition:opacity var(--dur-hover) var(--ease-out-quart),
             translate var(--dur-hover) var(--ease-out-quart),
             visibility var(--dur-hover)}
.player-panel.is-open{opacity:1;visibility:visible;translate:0 0}
.player-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex:0 0 auto;padding:var(--s4) var(--s3) var(--s3) var(--s5)}
.player-panel-head h2{font-size:15px;font-weight:600}
.player-panel-body{flex:1;min-height:0;overflow-y:auto;
  padding:0 var(--s3) var(--s4);scrollbar-width:thin}
.pp-pane .queue-row:first-child{border-top:0}

@media(max-width:620px){
  .player-panel{right:0;width:calc(100vw - 24px);max-height:50vh}
}

/* ---------- 2.14 · Expanded player ---------- */
.stage{position:fixed;inset:0;z-index:60;background:var(--ink);opacity:0;visibility:hidden;
  transition:opacity var(--dur-hover) var(--ease-out-quart),visibility var(--dur-hover)}
.stage.open{opacity:1;visibility:visible}
.stage-scroll{height:100%;overflow-y:auto}
.stage-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s16);
  align-items:start;padding:var(--s10) 0 120px}
.stage-close{position:fixed;top:var(--s5);right:var(--s5);z-index:2;display:grid;place-items:center;
  width:38px;height:38px;border:1px solid var(--border);border-radius:50%;
  color:var(--text);background:rgba(var(--wash-rgb),.06)}
.stage-close:hover{background:rgba(var(--wash-rgb),.12)}
.stage-left{position:sticky;top:var(--s10)}
.stage-art{width:min(100%,340px);aspect-ratio:1;object-fit:cover;border:1px solid var(--border);
  border-radius:var(--r8)}
.stage-left h2{margin-top:var(--s5);font-size:30px;font-weight:400;line-height:1.2}
.stage-by{display:flex;align-items:center;gap:10px;margin-top:var(--s4);color:var(--text-soft);font-size:14px}
.stage-timeline{margin-top:var(--s6)}
.stage-timeline .scrub{height:16px}.stage-timeline .rail{height:4px}
.stage-times{display:flex;justify-content:space-between;margin-top:6px;color:var(--text-faint);
  font-family:var(--font-mono);font-size:12px}
.stage-transport{display:flex;align-items:center;justify-content:center;gap:var(--s5);margin-top:var(--s5)}
.stage-transport button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--text-soft);transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.stage-transport button:hover{color:var(--text);background:rgba(var(--wash-rgb),.08)}
.stage-transport .play-main{width:56px;height:56px;color:var(--brand-on);background:var(--brand)}
.stage-transport .play-main:hover{color:var(--brand-on);background:var(--brand-strong)}
.tabs{display:flex;gap:2px;padding:4px;border:1px solid var(--border);border-radius:var(--r-round);
  background:var(--surface);width:fit-content}
.tabs button{min-height:32px;padding:0 var(--s5);border-radius:var(--r-round);color:var(--text-soft);
  font-size:13px;font-weight:500;transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.tabs button.active{color:var(--brand-on);background:var(--brand);font-weight:600}
.pane{display:none;margin-top:var(--s5)}
.pane.active{display:block}
.tr-line{display:block;width:100%;padding:9px 14px;border-radius:var(--r12);text-align:left;
  color:var(--text-soft);font-size:16px;line-height:1.65;
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.tr-line:hover{color:var(--text);background:rgba(var(--wash-rgb),.045)}
.tr-line .t{display:inline-block;min-width:46px;margin-right:10px;color:var(--text-faint);
  font-family:var(--font-mono);font-size:12px}
.tr-line.now{color:var(--text);background:color-mix(in srgb,var(--brand) 14%,transparent);
  box-shadow:inset 2px 0 0 var(--brand)}
.tr-line.now .t{color:var(--brand-text)}
.tr-line.done{color:var(--text-faint)}
.chapter{display:flex;align-items:center;gap:var(--s3);width:100%;padding:11px 14px;border-radius:var(--r12);
  text-align:left;transition:background var(--dur-micro) ease}
.chapter:hover{background:rgba(var(--wash-rgb),.05)}
.chapter+.chapter{border-top:1px solid var(--border)}
.chapter .cn{width:18px;color:var(--text-faint);font-family:var(--font-mono);font-size:12px}
.chapter b{display:block;font-family:var(--font-heading);font-size:15px;font-weight:500}
.chapter span{display:block;margin-top:2px;color:var(--text-faint);font-size:12px}
.chapter.now b{color:var(--brand-text)}
/* A queue row's only real actions are reorder and remove, so both sit on the
   row rather than behind a menu. On a pointer they fade in with hover; where
   there is no hover they stay put, since there is nothing to reveal them. */
.queue-row{position:relative;display:flex;align-items:center;gap:var(--s3);
  padding:8px 6px;border-top:1px solid var(--border);border-radius:var(--r12);
  cursor:pointer;transition:background var(--dur-micro) ease}
.queue-row img{width:40px;height:40px;object-fit:cover;border-radius:var(--r-media);flex:0 0 auto}
.queue-row .q-meta{flex:1;min-width:0}
.queue-row .q-meta b{display:block;font-family:var(--font-heading);font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-row .q-meta span{display:block;color:var(--text-faint);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-grip,.q-remove{display:grid;place-items:center;flex:0 0 auto;
  width:24px;height:32px;border-radius:var(--r8);color:var(--text-faint);
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease,opacity var(--dur-micro) ease}
.q-grip{cursor:grab;touch-action:none}
.q-remove{width:30px;height:30px;border-radius:50%}
.q-remove:hover{color:var(--text);background:rgba(var(--wash-rgb),.12)}
.q-grip:hover{color:var(--text-soft)}
@media (hover:hover){
  .q-grip,.q-remove{opacity:0}
  .queue-row:hover{background:rgba(var(--wash-rgb),.05)}
  .queue-row:hover .q-grip,.queue-row:hover .q-remove,
  .q-grip:focus-visible,.q-remove:focus-visible{opacity:1}
}
/* while a row is being carried, it lifts and the rest slide under it */
.queue-row.is-dragging{z-index:2;cursor:grabbing;
  background:var(--surface-solid);box-shadow:0 10px 28px rgba(0,0,0,var(--sh-2))}
.queue-row.is-dragging .q-grip{opacity:1;cursor:grabbing}
.queue-row.is-shifting{transition:translate var(--dur-micro) var(--ease-out-quart)}

/* ---------- 2.16 · Footer ---------- */
/* ---------- 2.16b · Footer ----------
   The columns mirror the listener IA. Routes that exist are links; the ones
   still to be built are plain text with a marker, so the map is complete
   without the footer filling up with links that go nowhere.

   The dot field is an equaliser rising off the bottom edge: a canvas, since
   it is a few thousand dots and hand-authored SVG would be the wrong tool. */
.site-footer{position:relative;isolation:isolate;overflow:hidden;
  padding:var(--s12) 0 0;border-top:1px solid var(--border)}
.footer-top{display:grid;gap:var(--s10) var(--s8);
  grid-template-columns:minmax(240px,1.15fr) 3fr;
  padding-bottom:var(--s10)}
@media(max-width:860px){.footer-top{grid-template-columns:1fr}}

.footer-brand{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.footer-brand .brand{display:flex;align-items:center;gap:10px}
.footer-brand .mark{height:30px;width:auto;fill:var(--yellow-400)}
.footer-brand .word{height:17px;width:auto;fill:var(--text)}
.footer-slogan{margin:0;max-width:30ch;color:var(--text-soft);font-size:14.5px;line-height:1.55}
.footer-social{display:flex;gap:var(--s2);margin-top:var(--s2)}
.footer-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--text-soft);background:rgba(var(--wash-rgb),.07);
  transition:color var(--dur-micro) ease,background var(--dur-micro) ease}
.footer-social a:hover,.footer-social a:focus-visible{
  color:var(--sf,var(--text));background:var(--sb,rgba(var(--wash-rgb),.14));
  /* black brands would vanish into a dark footer, so keep an edge on every chip */
  box-shadow:inset 0 0 0 1px rgba(var(--wash-rgb),.16);
  transform:translateY(-1px)}
.footer-social a{transition:color var(--dur-micro) var(--ease-out-quart),
  background var(--dur-micro) var(--ease-out-quart),
  box-shadow var(--dur-micro) var(--ease-out-quart),
  transform var(--dur-micro) var(--ease-out-quart)}
@media (prefers-reduced-motion:reduce){.footer-social a:hover{transform:none}}
.footer-social .mi{font-size:17px}

.footer-grid{display:grid;gap:var(--s8) var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.footer-col h3{margin:0 0 var(--s4);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.footer-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--text-soft);font-size:14px;
  transition:color var(--dur-micro) ease}
.footer-col a:hover{color:var(--text)}
/* not built yet: reads as part of the map, never as something you can click.
   No per-item badge, because with most of the map unbuilt a badge on nearly
   every row stops being information and becomes texture. Said once below. */
.footer-col .soon{display:inline-block;color:var(--text-faint);font-size:14px;cursor:default}
/* legal sits in its own bar under the columns, with the copyright at its end */
/* label, links, then the copyright pushed to the far end. margin-left:auto on
   the copy rather than space-between, so the label stays beside its links. */
.footer-legal{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s3) var(--s5);padding-bottom:var(--s16)}
.footer-legal h3{margin:0;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.footer-legal .footer-copy{margin-left:auto}
.footer-legal ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin:0;padding:0;list-style:none}
.footer-legal a{color:var(--text-soft);font-size:13px;
  transition:color var(--dur-micro) ease}
.footer-legal a:hover{color:var(--text)}
.footer-legal .soon{font-size:13px}
.footer-copy{margin:0;color:var(--text-faint);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em}

.footer-eq{position:absolute;inset:auto 0 0 0;z-index:-1;
  width:100%;height:190px;pointer-events:none;display:block;
  /* bleed the densest rows past the edge; .site-footer clips them */
  margin-bottom:-20px;opacity:.6}

/* ---------- 2.17 · Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease-out-expo),transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay:calc(var(--i,0)*55ms)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{transform:none}}

/* ---------- 2.18 · Responsive ---------- */
@media(max-width:1080px){
  .stage-grid{grid-template-columns:1fr;gap:var(--s10)}
  .stage-left{position:static}
  .collection.wide,.collection.tall{grid-column:span 6}
  .collection.third{grid-column:span 6}
}
@media(max-width:880px){
  .hero-banner{min-height:64svh}
  .section{padding:var(--s12) 0}
  .section-nav-in{justify-content:flex-start}
  .player-right{display:none}
  .player{padding:0 12px 12px}
  .player-inner{grid-template-columns:minmax(0,1fr) auto auto;
    gap:var(--s3);padding:8px var(--s4)}
  /* the pill gets narrow, so the title keeps the room and the extras go */
  .player-left .eq,.player-left [data-toggle]{display:none}
  .player-center{width:auto}
  .player-center .timeline{display:none}
}
/* Clearance for the fixed player pill, and only on the pages that have one.
   Unscoped it padded the home, creator and legal pages too, none of which have
   a player, leaving 96px of dead space under their footers. */
@media(max-width:880px){
  body:has(.player){padding-bottom:96px}
}
@media(max-width:760px){
  /* the recommendation grid keeps its 5/7 split from inline styles, so the
     override has to outrank them */
  #forYouGrid{grid-template-columns:1fr !important}
  #forYouGrid>*{grid-column:auto !important}
}
@media(max-width:620px){
  .wrap{width:min(var(--max),calc(100% - 28px))}
  .hero-banner{min-height:68svh}
  /* narrow banner: the scrim runs bottom-up and the copy sits in the dark half */
  .slide:after{background:linear-gradient(to top,rgba(8,10,12,.95) 34%,rgba(8,10,12,.62) 62%,rgba(8,10,12,.2))}
  .slide-body{justify-content:flex-end;max-width:none;padding-bottom:var(--s6)}
  .slide-body h1,.slide-body .slide-title{font-size:clamp(34px,8.6vw,44px)}
  .slide-copy{margin-top:var(--s3);font-size:15px}
  .hero-cta{margin-top:var(--s5)}
  .slide-credit{display:none}
  /* the CTA reaches the middle of the banner on a narrow screen, so the dots
     step aside rather than sitting next to it */
  /* the credit is hidden on a narrow banner, so the dots take its place */
  .dots{right:20px;bottom:28px}
  .search-big{min-height:60px;gap:var(--s3);padding-left:var(--s5)}
  .search-big input{font-size:16px}
  .search-big .btn{min-height:42px;padding:0 var(--s4)}
  .tag-pill{min-height:38px;padding:0 var(--s4);font-size:14px}
  .tag-cloud{max-height:84px}
  .section-nav a{font-size:14px;padding:8px 14px}
  .podcast-card{width:160px}
  .featured-card{width:150px}
  .featured-card h3{font-size:15px}
  .continue-card{width:290px}
  .continue-card .art{width:80px}
  .recent{margin-top:var(--s4)}
  .recent-col h3{padding:0 12px}
  .recent-panel{flex-direction:column;gap:var(--s4)}
  .recent-art{width:100%;align-self:stretch}
  .recent-row{padding:11px 12px;gap:var(--s3)}
  .recent-main .t b{font-size:15px}
  .recent-row .plays{font-size:13px}
  .creator-card{width:150px}
  .creator-card .avatar{width:100px;height:100px;font-size:28px}
  .feed-row{flex-wrap:wrap;gap:var(--s3);padding:var(--s3)}
  .feed-row img.cover{width:60px;height:60px}
  .feed-actions{flex-basis:100%}
  .collection.wide,.collection.tall,.collection.third{grid-column:span 12;min-height:190px}
  .collection.wide h3,.collection.tall h3{font-size:23px}
  .supporter-grid{grid-template-columns:1fr}
  .index{grid-template-columns:1fr}
  .stage-grid{padding-top:var(--s6)}
}


/* ==========================================================================
   Landing page (index.html)
   Moved out of the page's <style> block. Scoped to [data-brand="home"]:
   16 of its selectors collide with the listener rules above, the search
   widget among them, so unscoped it would restyle every other page.
   ========================================================================== */
/* ---------- footer ---------- */
  [data-brand="home"] .footer-eq{position:absolute;inset:auto 0 0 0;z-index:0;width:100%;height:190px;
    pointer-events:none;display:block;margin-bottom:-20px;opacity:.6}
  /* the Pika glyphs are stroked and inherit currentColor, as .mi does on the
     listener pages; that class does not exist here */
  [data-brand="home"] .fsvg{display:inline-block;width:17px;height:17px;overflow:visible;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  [data-brand="home"] .fsoc{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
    color:rgba(255,255,255,.7);background:rgba(255,255,255,.07);
    transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}
  [data-brand="home"] .fsoc:hover,[data-brand="home"] .fsoc:focus-visible{color:var(--sf,#fff);background:var(--sb,rgba(255,255,255,.14));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transform:translateY(-1px)}
  [data-brand="home"] .soon{cursor:default}
  @media (prefers-reduced-motion:reduce){[data-brand="home"] .fsoc:hover{transform:none}}
  :root[data-brand="home"]{
    /* Afripods digital design system v2 - inverted (dark), shared with the preloader */
    --ap-yellow: #f2d43c;
    --ap-yellow-500: #f0b83e;
    --ap-yellow-600: #ec9f35;
    --ap-yellow-700: #e8952e;
    --ap-yellow-800: #d97f1e;
    --ap-yellow-900: #b8621a;
    --ap-ink: #0e1113;
    --ap-ink-500: #131619;
    --ap-ink-600: #191d21;
    --ap-ink-700: #1d2124;
    --ap-ink-800: #262b2f;
    --ap-ink-900: #303539;

    /* Motion system - shared easing + duration scale */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-micro: 180ms;
    --dur-hover: 320ms;
    --dur-media: 620ms;
    --dur-reveal: 760ms;
    --dur-line: 900ms;
  }

  /* ---------------------------------------------------------------- */
  /* Preloader - plays over the hero on load, then fades to reveal it */
  /* ---------------------------------------------------------------- */
  [data-brand="home"] .mesh-background{
    position: fixed;
    inset: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
    display: block;
    background: var(--ap-ink);
    transform: translateY(0);
    opacity: 1;
    transition:
      transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.4s ease 0.5s;
  }
  [data-brand="home"] .preloader{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  [data-brand="home"] .preloader.is-done{
    opacity: 0;
    pointer-events: none;
  }
  [data-brand="home"] .preloader__sr{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  [data-brand="home"] .preloader__logo{
    display: flex;
    align-items: center;
    gap: calc(clamp(24px, 5.4vmin, 43px) / 3);
  }
  [data-brand="home"] .preloader__mark{
    display: block;
    height: clamp(56px, 12vmin, 110px);
    width: auto;
    overflow: visible;
    transition: height 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-brand="home"] .preloader__mark .tri{
    fill: url(#navMarkGradient);
    opacity: 0.16;
  }
  [data-brand="home"] .preloader__mark .tri.is-filled{
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-brand="home"] .preloader__word{
    display: block;
    height: calc(clamp(84px, 20vmin, 168px) * 0.6945);
    width: 0;
    overflow: hidden;
    transition:
      height 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-brand="home"] .preloader__word svg{
    display: block;
    height: 100%;
    width: auto;
  }
  [data-brand="home"] .preloader__word svg path{
    fill: url(#navMarkGradient);
  }
  [data-brand="home"] .preloader.is-revealing .preloader__mark{
    height: clamp(24px, 5.4vmin, 43px);
  }
  [data-brand="home"] .preloader.is-revealing .preloader__word{
    height: calc(clamp(24px, 5.4vmin, 43px) * 0.6945);
    width: calc(clamp(24px, 5.4vmin, 43px) * 4.9985);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-brand="home"] .preloader,[data-brand="home"] .preloader__logo,[data-brand="home"] .preloader__mark,[data-brand="home"] .preloader__word,[data-brand="home"] .preloader__mark .tri.is-filled,[data-brand="home"] .mesh-background{
      transition-duration: 0.01ms !important;
    }
  }

  /* The design ships a second, TTF-only set here with hashed filenames. This
     repo serves five unhashed woff2 from /site/fonts, declared at the top of
     this file and covering the same five weights, so the duplicates are
     dropped on regeneration rather than 404ing. */

  html[data-brand="home"],[data-brand="home"] body{
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  [data-brand="home"] h1,[data-brand="home"] h2{
    font-family: 'BDO Grotesk', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
  }
  [data-brand="home"] .drawer-ease{
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-brand="home"] .scrim{
    background:
      linear-gradient(to top, rgba(9, 12, 13, 0.92) 0%, rgba(9, 12, 13, 0.55) 40%, rgba(9, 12, 13, 0.18) 68%, rgba(9, 12, 13, 0.32) 100%),
      linear-gradient(to right, rgba(9, 12, 13, 0.55) 0%, rgba(9, 12, 13, 0) 45%);
  }
  [data-brand="home"] .hero-video{
    background-image: url("/site/videos/hero/afripods-hero-20s-1920x1080.poster.jpg");
    background-size: cover;
    background-position: center;
  }
  @media (max-width: 767px) {
    [data-brand="home"] .hero-video{
      background-image: url("/site/videos/hero/afripods-hero-20s-1080x1920.poster.jpg");
    }
  }
  [data-brand="home"] .search-widget{
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
  }
  [data-brand="home"] .search-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: #fff;
    color: #192123;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  [data-brand="home"] .search-toggle:hover{
    background: #f2d43c;
  }
  [data-brand="home"] .search-widget.is-open .search-toggle{
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
  }
  [data-brand="home"] .search-box{
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 20;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    width: 44px;
    padding: 0;
    border-radius: 9999px;
    background: #fff;
    color: #192123;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    transition:
      width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.2s ease;
  }
  [data-brand="home"] .search-widget.is-open .search-box{
    width: min(480px, 74vw);
    padding: 0 10px 0 20px;
    opacity: 1;
    pointer-events: auto;
  }
  [data-brand="home"] .search-box input{
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: #192123;
  }
  [data-brand="home"] .search-box input::placeholder{
    color: rgba(25, 33, 35, 0.45);
  }
  [data-brand="home"] .search-close{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9999px;
    color: rgba(25, 33, 35, 0.55);
    transition: background 0.2s ease, color 0.2s ease;
  }
  [data-brand="home"] .search-close:hover{
    background: rgba(25, 33, 35, 0.08);
    color: #192123;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-brand="home"] .search-toggle,[data-brand="home"] .search-box{
      transition-duration: 0.01ms !important;
    }
  }
  [data-brand="home"] .proof-card{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.45s ease, transform 0.3s ease;
  }
  [data-brand="home"] .proof-card:hover{
    background: linear-gradient(135deg, #c83224 0%, #ef7922 55%, #f0a121 100%);
  }
  [data-brand="home"] .proof-card--blue:hover{
    background: linear-gradient(135deg, #4db8d6 0%, #1f9dc4 55%, #025373 100%);
  }
  [data-brand="home"] .proof-card__arrow{
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    opacity: 0;
    transform: translate(-6px, 6px) scale(0.85);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  [data-brand="home"] .proof-card:hover .proof-card__arrow{
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-brand="home"] .proof-card,[data-brand="home"] .proof-card__arrow{
      transition-duration: 0.01ms !important;
    }
  }

  /* Mobile/tablet: a fluid size scaled to the viewport, since the proof cards
     stack below the text here rather than sitting beside it. */
  [data-brand="home"] .hero-lead{
    font-size: clamp(1.6rem, 6vw, 2.5rem);
    line-height: 1.2;
  }
  [data-brand="home"] .rotator-text{
    font-size: clamp(1.85rem, 11vw, 3.75rem);
    line-height: 1.05;
    width: max-content;
    max-width: 100%;
  }
  /* Desktop: proof cards sit beside the text, so both start from the fixed
     baseline the design calls for and shrink with the viewport from there -
     the JS auto-fit (fitRotatorText) is the hard guarantee that the longest
     rotating phrase never crosses into the cards' space. */
  @media (min-width: 1024px) {
    [data-brand="home"] .hero-lead{
      font-size: clamp(2rem, 4.5vw, 4rem);
      line-height: 1.15;
    }
    [data-brand="home"] .rotator-text{
      font-size: clamp(2.25rem, 4.2vw, 4rem);
      line-height: 1.05;
    }
  }
  [data-brand="home"] .noise-overlay{
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.42;
    background-image: url("/site/textures/noise.png");
    background-size: 256px 256px;
    background-repeat: repeat;
    animation: noiseShift 0.32s steps(2, end) infinite;
    will-change: background-position;
  }
  @keyframes noiseShift {
    0%   { background-position: 0 0; }
    11%  { background-position: -37px 19px; }
    23%  { background-position: 21px -43px; }
    38%  { background-position: 61px 7px; }
    51%  { background-position: -14px -58px; }
    67%  { background-position: 43px 36px; }
    82%  { background-position: -52px 11px; }
    100% { background-position: 17px -29px; }
  }
  [data-brand="home"] .marquee-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  /* ---------- Bold voices ----------
     The waveform and the portraits are the same row. Every item is a rounded
     bar; the ones passing through the centre widen into a card and fade their
     photo in, then narrow back to a bar on the way out. The rail drifts left,
     so a new creator opens on the right as the first one closes on the left.

     Items are positioned absolutely and driven from one scalar, so a width
     change never reflows its neighbours and the layout cannot feed back into
     the maths that produced it. */
  [data-brand="home"] .voices{ position: relative; isolation: isolate; }
  [data-brand="home"] .voice-rail{
    position: relative;
    height: 560px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
  [data-brand="home"] .voice-item{ position: absolute; top: 50%; left: 0; will-change: transform, width, height; }
  [data-brand="home"] .voice-art{
    position: relative; width: 100%; height: 100%;
    border-radius: 26px; overflow: hidden;
    background: rgba(255, 255, 255, 0.055);
    transition: transform 340ms cubic-bezier(.16, 1, .3, 1);
  }
  /* only a card that has opened reacts; a 30px bar has nothing to show */
  [data-brand="home"] .voice-item[data-open="1"]:hover .voice-art{ transform: scale(1.035); }
  @media (prefers-reduced-motion: reduce) {
    [data-brand="home"] .voice-art{ transition: none; }
    [data-brand="home"] .voice-item[data-open="1"]:hover .voice-art{ transform: none; }
  }
  [data-brand="home"] .voice-art img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  [data-brand="home"] .voice-meta{ position: absolute; top: 100%; left: 0; padding-top: 14px; white-space: nowrap; opacity: 0; pointer-events: none; }
  [data-brand="home"] .voice-name{
    font-family: "BDO Grotesk", Geist, sans-serif;
    font-size: 19px; font-weight: 700; line-height: 1.15; color: #fff;
  }
  [data-brand="home"] .voice-show{ display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }
  [data-brand="home"] .voice-show svg{ width: 13px; height: 13px; flex: 0 0 auto; }
  @media (max-width: 767px) { [data-brand="home"] .voice-rail{ height: 440px; } [data-brand="home"] .voice-name{ font-size: 16px; } }

  [data-brand="home"] .marquee-row{
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  [data-brand="home"] .marquee-row.is-dragging{
    cursor: grabbing;
  }
  [data-brand="home"] .marquee-row--top{
    padding-top: 72px;
    padding-bottom: 0;
  }
  [data-brand="home"] .marquee-row--bottom{
    padding-top: 0;
    padding-bottom: 72px;
  }
  [data-brand="home"] .marquee-track{
    display: flex;
    width: max-content;
    gap: 1rem;
    will-change: transform;
  }
  [data-brand="home"] .marquee-item{
    position: relative;
    flex-shrink: 0;
    height: 110px;
    width: 110px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ap-ink-800, #262b2f);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  }
  @media (min-width: 640px) {
    [data-brand="home"] .marquee-item{
      height: 150px;
      width: 150px;
      border-radius: 18px;
    }
  }
  @media (min-width: 1024px) {
    [data-brand="home"] .marquee-item{
      height: 180px;
      width: 180px;
    }
  }
  [data-brand="home"] .marquee-tile{
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
  }
  [data-brand="home"] .marquee-row--top .marquee-item.item-expanded{
    transform: scale(1.18);
    transform-origin: bottom center;
    z-index: 2;
  }
  [data-brand="home"] .marquee-row--bottom .marquee-item.item-expanded{
    transform: scale(1.18);
    transform-origin: top center;
    z-index: 2;
  }
  [data-brand="home"] .marquee-item.item-push-left{
    transform: translateX(-18px);
  }
  [data-brand="home"] .marquee-item.item-push-right{
    transform: translateX(18px);
  }
  [data-brand="home"] .marquee-item.item-blurred{
    opacity: 0.35;
  }
  [data-brand="home"] .marquee-open{
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 9999px;
    background: #fff;
    color: #192123;
    font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
    pointer-events: none;
  }
  [data-brand="home"] .marquee-item:hover .marquee-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  [data-brand="home"] .marquee-open:hover{
    background: var(--ap-yellow, #f2d43c);
    color: var(--ap-ink, #0e1113);
  }
  /* ---------------------------------------------------------------- */
  /* Trusted-by marquee - partner logos above the footer               */
  /* ---------------------------------------------------------------- */
  /* One strip, two identical sets, translated by exactly half its width. The
     second set is what makes the loop seamless: by the time the first has left
     the frame the second is standing exactly where it began, so the reset is
     invisible. It is aria-hidden, since it is the same eight logos again. */
  /* A band, not a section: no heading of its own, so the padding is only what
     keeps the logos off the two dark blocks either side of it. The section's
     aria-label carries the name the removed h2 used to. */
  [data-brand="home"] .trusted{
    padding: 40px 0;
  }
  @media (min-width: 640px) { [data-brand="home"] .trusted{ padding: 48px 0; } }
  @media (min-width: 1024px) { [data-brand="home"] .trusted{ padding: 56px 0; } }
  /* The scroller. The drift is written into scrollLeft by the script rather than
     animated as a transform, because a transform and a scroll position cannot
     both own the same pixels: one would slide the track while the other tried to
     scroll it. As a real scroll container the wheel, a trackpad swipe and a
     touch drag all work for free, and the script only has to add a mouse drag.
     The bar itself is hidden; the motion already says the row continues. */
  [data-brand="home"] .trusted-viewport{
    /* The row dissolves at both ends rather than being cut by them. A mask does
       this rather than two gradient overlays, because a mask fades to actual
       transparency and lets the section's own ground show through: an overlay
       would have to hard-code #11181a and would show as a pair of smudges the
       moment that colour changed. It also cannot be dragged or clicked through
       by mistake, having no box of its own. */
    --fade: clamp(40px, 9vw, 160px);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade),
      #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade),
      #000 calc(100% - var(--fade)), transparent 100%);
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [data-brand="home"] .trusted-viewport::-webkit-scrollbar{
    display: none;
  }
  [data-brand="home"] .trusted-viewport:focus-visible{
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 4px;
  }
  [data-brand="home"] .trusted-viewport.is-dragging{
    cursor: grabbing;
    user-select: none;
  }
  [data-brand="home"] .trusted-track{
    display: flex;
    width: max-content;
  }
  [data-brand="home"] .trusted-set{
    display: flex;
    align-items: center;
    gap: 70px;
    margin: 0;
    padding: 0 70px 0 0;
    list-style: none;
  }
  [data-brand="home"] .trusted-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 155px;
    height: 80px;
    flex: none;
  }
  [data-brand="home"] .trusted-logo img{
    max-width: 100%;
    max-height: 76px;
    width: auto;
    height: auto;
    opacity: 0.5;
    transition: opacity var(--m-quick, 240ms) ease;
    /* The pointer belongs to the scroller, not to eight separate images: without
       this a drag starting on a logo becomes a native image drag instead. The
       cell around it still takes the hover, which is what the rule below uses. */
    pointer-events: none;
    -webkit-user-drag: none;
  }
  /* Pointer devices only: on a touch screen a hover state sticks after the tap
     that scrolled the row, leaving one logo brighter than the rest for no
     reason the reader can see. */
  @media (hover: hover) {
    [data-brand="home"] .trusted-logo:hover img{
      opacity: 0.85;
    }
  }
  /* Optical sizing. The three tallest marks read larger than the wordmarks at a
     shared cap height, so they are brought down individually rather than the
     whole row being shrunk to its loudest member. */
  [data-brand="home"] .trusted-logo:nth-child(1) img{ max-height: 58px; }
  [data-brand="home"] .trusted-logo:nth-child(4) img{ max-height: 52px; }
  [data-brand="home"] .trusted-logo:nth-child(6) img{ max-height: 46px; }
  @media (max-width: 639px) {
    [data-brand="home"] .trusted-set{ gap: 48px; padding-right: 48px; }
    [data-brand="home"] .trusted-logo{ width: 120px; height: 62px; }
    [data-brand="home"] .trusted-logo img{ max-height: 58px; }
    [data-brand="home"] .trusted-logo:nth-child(1) img{ max-height: 44px; }
    [data-brand="home"] .trusted-logo:nth-child(4) img{ max-height: 40px; }
    [data-brand="home"] .trusted-logo:nth-child(6) img{ max-height: 36px; }
  }
  /* Reduced motion stops the drift in the script; the row still scrolls and
     drags, so the duplicate set stays where it is and keeps the wrap seamless
     for anyone moving it by hand. */

  /* ---------------------------------------------------------------- */
  /* Platform wall - staggered columns, scroll parallax, card reveals */
  /* ---------------------------------------------------------------- */
  [data-brand="home"] .tool-wall{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
  }
  [data-brand="home"] .tool-col{
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    will-change: transform;
  }

  /* Heading - per-line mask reveal */
  [data-brand="home"] .line-mask{
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
  }
  [data-brand="home"] .line-mask > span{
    display: block;
    opacity: 0;
    transform: translate3d(0, 110%, 0);
    transition:
      transform var(--dur-line) var(--ease-out-expo),
      opacity calc(var(--dur-line) * 0.7) ease;
    transition-delay: var(--d, 0ms);
  }
  [data-brand="home"] .is-in .line-mask > span{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Cards - staggered scroll reveal, then hover-lift takes over */
  [data-brand="home"] .tool-card{
    position: relative;
    width: 100%;
    border-radius: 20px;
    background: #ececea;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(0.94);
    transition:
      opacity var(--dur-reveal) var(--ease-out-expo),
      transform var(--dur-reveal) var(--ease-out-expo),
      box-shadow var(--dur-hover) var(--ease-out-quart);
    transition-delay: var(--d, 0ms);
  }
  [data-brand="home"] .tool-card.is-in{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  [data-brand="home"] .tool-card.is-in:hover{
    transform: translate3d(0, -7px, 0) scale(1.018);
    transition-duration: var(--dur-hover);
    transition-delay: 0ms;
    box-shadow: 0 18px 40px -12px rgba(14, 17, 19, 0.3);
    z-index: 2;
  }

  /* GIF cards - inner media breathe on hover */
  [data-brand="home"] .tool-card picture{
    display: block;
    width: 100%;
    height: 100%;
  }
  [data-brand="home"] .tool-media{
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: saturate(0.92);
    transform: scale(1.001);
    transition:
      transform var(--dur-media) var(--ease-out-expo),
      filter var(--dur-hover) ease;
  }
  [data-brand="home"] .tool-card:hover .tool-media{
    transform: scale(1.06);
    filter: saturate(1.06);
  }

  /* Brand cards - the media stays visible under a brand-coloured veil, and the
     veil goes fully opaque on hover so the tile resolves to logo + flat colour */
  [data-brand="home"] .tool-card--brand{
    background: var(--brand, #ececea);
  }
  [data-brand="home"] .tool-card--brand .tool-media{
    filter: saturate(0.45) contrast(1.06) brightness(0.86);
  }
  [data-brand="home"] .tool-card--brand:hover .tool-media{
    transform: none;
    filter: saturate(0.45) contrast(1.06) brightness(0.86);
  }
  [data-brand="home"] .tool-veil{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--brand, #ececea);
    opacity: 0.76;
    transition: opacity var(--dur-hover) var(--ease-out-quart);
    pointer-events: none;
  }
  [data-brand="home"] .tool-card--brand:hover .tool-veil{
    opacity: 1;
  }
  [data-brand="home"] .tool-card--brand::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(120% 120% at 28% 18%, rgba(255, 255, 255, 0.26), transparent 62%);
    opacity: 0;
    transition: opacity var(--dur-hover) ease;
    pointer-events: none;
  }
  [data-brand="home"] .tool-card--brand:hover::after{
    opacity: 1;
  }
  [data-brand="home"] .tool-glyph{
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(14, 17, 19, 0.3));
  }
  [data-brand="home"] .tool-glyph svg{
    width: 40%;
    height: 40%;
    transition: transform 420ms var(--ease-out-expo);
  }
  [data-brand="home"] .tool-card--brand:hover .tool-glyph svg{
    transform: scale(1.13) rotate(-4deg);
  }
  [data-brand="home"] .tool-name{
    position: absolute;
    left: 50%;
    bottom: 9px;
    z-index: 4;
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(14, 17, 19, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(-50%, 8px, 0);
    transition:
      opacity var(--dur-hover) ease,
      transform var(--dur-hover) var(--ease-out-expo);
    pointer-events: none;
  }
  [data-brand="home"] .tool-card--brand:hover .tool-name{
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }

  @media (min-width: 640px) {
    [data-brand="home"] .tool-wall{
      gap: 16px;
    }
    [data-brand="home"] .tool-col{
      gap: 16px;
    }
    [data-brand="home"] .tool-card{
      border-radius: 24px;
    }
    [data-brand="home"] .tool-name{
      font-size: 11px;
      bottom: 11px;
    }
  }

  /* Column count by width. Six columns is a full-width composition: at 768px it
     already means 106px cards and at 390px it means 50px ones, smaller than the
     logos sitting inside them. So columns are dropped rather than squeezed, and
     two things decide WHICH go. First the platforms they carry, since a wall
     that argues "we are everywhere" cannot afford to drop the logos. Second the
     stagger: the wall is built on a symmetric V, -8 / -3.5 / 0 / 0 / -3.5 / -8
     rem, so whichever columns become the new edges take the outer offsets and
     the V survives the cut. */
  @media (max-width: 1023px) {
    /* Five. The sixth is the only column carrying no platform at all, so it is
       the one that can go without costing the section its point. */
    [data-brand="home"] .tool-col:nth-child(6){
      display: none;
    }
    [data-brand="home"] .tool-col:nth-child(4){
      margin-top: -3.5rem;
    }
    [data-brand="home"] .tool-col:nth-child(5){
      margin-top: -8rem;
    }
    /* With the sixth column gone the mirror pairs become 1-5 and 2-4, and the
       wall's two portrait cards sit in columns 2 and 5, which are partners only
       at full width. The pairing is rebuilt around the new middle instead: the
       tall card moves to columns 2 and 4, which ARE partners here, so column 2
       keeps its portrait, column 4's second card becomes one, and column 5's
       reverts to a square to match column 1. Column 4 also sheds its trailing
       photograph, which is what leaves it the same three cards as column 2.
       Columns 1 and 5 are then three squares, 2 and 4 are square-tall-square,
       and 3 is the taller centre. */
    [data-brand="home"] .tool-col:nth-child(4) .tool-card:nth-child(2){
      aspect-ratio: 324 / 576;
    }
    [data-brand="home"] .tool-col:nth-child(5) .tool-card:nth-child(2){
      aspect-ratio: 1;
    }
    [data-brand="home"] .tool-col:nth-child(4) .tool-card:nth-child(4){
      display: none;
    }
  }
  @media (max-width: 639px) {
    /* Three columns, and not one logo may be lost getting there: the platforms
       are the section's whole argument. The seven of them sit across five of the
       six columns, so no three-column subset holds them all and hiding columns
       is the wrong instrument. On a phone the wall stops being columns instead.
       The photographs go, the columns become display:contents so their cards
       rise into the wall itself, and the logos lay out as a three-wide grid:
       same cards, same order, a symmetric block rather than a staggered one. */
    [data-brand="home"] .tool-wall{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 440px;
      margin-inline: auto;
    }
    [data-brand="home"] .tool-col{
      display: contents;
    }
    [data-brand="home"] .tool-card:not(.tool-card--brand){
      display: none;
    }
    /* Seven into three leaves one on a row of its own. It takes the middle cell
       so the block reads centred rather than left-weighted. */
    [data-brand="home"] .tool-col:nth-child(5) .tool-card--brand{
      grid-column: 2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-brand="home"] .tool-col{
      transform: none !important;
      will-change: auto;
    }
    [data-brand="home"] .tool-card,[data-brand="home"] .line-mask > span{
      opacity: 1 !important;
      transform: none !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
    [data-brand="home"] .tool-card.is-in:hover{
      transform: none !important;
    }
    [data-brand="home"] .tool-card:hover .tool-media,[data-brand="home"] .tool-card--brand:hover .tool-glyph svg{
      transform: none !important;
    }
  }
  [data-brand="home"] .marquee-tooltip{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    padding: 6px 12px;
    border-radius: 9999px;
    background: rgba(16, 18, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    color: #fff;
    font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: opacity 0.15s ease;
    will-change: transform, opacity;
  }
  [data-brand="home"] .marquee-tooltip.is-visible{
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-brand="home"] .marquee-item,[data-brand="home"] .marquee-open{
      transition-duration: 0.01ms;
    }
  }

/* ---------- moved out of the pages' style attributes ---------- */
/* the off-screen host for the <symbol> sprite */
.svg-defs{position:absolute}
/* inline icons that sit outside the .mi scale */
.ic-14{width:14px;height:14px}
.ic-18{width:18px;height:18px}
.ic-20{width:20px;height:20px}
/* Transport resting state; the player writes over these as it plays.
   Scoped to .rail on purpose: a bare .fill also matches the .mi.fill icon
   modifier and, sitting later in the file, would zero every filled icon. */
.rail>.fill{width:0}
.scrub>.knob{left:0}
/* chapter row: the label takes the slack between number and duration */
.ch-label{flex:1}
/* the note above a transcript pane */
.tx-note{margin:0 0 var(--s3);font-size:13px}
/* the mobile menu's closed state, which the nav script animates from */
[data-brand="home"] [data-mnav]{transform:translateX(24px)}
[data-brand="home"] [data-mcta]{transform:translateY(16px);
  transition:opacity 400ms,transform 400ms}
.foryou-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5)}
.foryou-rest{grid-column:span 7;display:grid;gap:var(--s3);align-content:start}
.feature-card.span-5{grid-column:span 5}
.section-head.tight,.reason.tight{margin-bottom:0}
.reason.tight{margin-top:var(--s4)}
.eyebrow.spaced{margin-top:var(--s5)}
.strong{color:var(--text)}
.faint.xs{font-size:11px}
.tag.centred{align-self:center;margin-bottom:var(--s3)}
.feed-top.nudged{margin-top:5px}
.queue-empty{padding:var(--s5) var(--s2)}
.foryou-grid.tight-gap{gap:var(--s3)}


/* ==========================================================================
   2.20 · Cookie consent drawer
   Right-hand drawer, full height. The body copy is set in the mono face on
   purpose: it is legal text, and the monospace reads as the plain-terms
   register rather than as marketing.
   ========================================================================== */
/* pointer-events only while open: a .cc left visible-but-closed would be a
   transparent full-screen layer swallowing every click on the page */
.cc{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end;
  pointer-events:none}
.cc.is-open{pointer-events:auto}
.cc-scrim{position:absolute;inset:0;background:#000;opacity:0;
  transition:opacity var(--dur-reveal,.42s) var(--ease-out-expo)}
.cc.is-open .cc-scrim{opacity:var(--scrim)}
.cc-panel{position:relative;display:flex;flex-direction:column;
  width:min(536px,100%);max-height:100%;
  background:rgb(var(--chrome-rgb));color:var(--text);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform var(--dur-reveal,.42s) var(--ease-out-expo)}
.cc.is-open .cc-panel{transform:none}

.cc-scroll{flex:1;min-height:0;overflow-y:auto;
  padding:clamp(28px,4vw,44px) clamp(24px,3.4vw,40px) var(--s6);
  overscroll-behavior:contain}
.cc-title{margin:0 0 var(--s6);font-family:var(--font-heading);
  font-size:clamp(26px,3vw,32px);font-weight:600;line-height:1.15}
.cc-copy{font-size:14.5px;line-height:1.65;color:var(--text-soft)}
.cc-copy p{margin:0 0 var(--s4)}
.cc-copy p:last-child{margin-bottom:0}
.cc-copy strong{color:var(--text);font-weight:500}

.cc-links{margin:var(--s6) 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--s3)}
.cc-links a{font-size:14px;color:var(--text);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--border-strong);
  transition:text-decoration-color var(--dur-micro) ease}
.cc-links a:hover{text-decoration-color:currentColor}

.cc-toggle{display:flex;align-items:center;gap:9px;margin-top:var(--s5);padding:0;
  font-size:14px;font-weight:500;color:var(--text);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--border-strong)}
.cc-toggle:hover{text-decoration-color:currentColor}
.cc-caret{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-micro) ease}
.cc-toggle[aria-expanded="true"] .cc-caret{transform:rotate(-135deg) translate(-2px,-2px)}

/* ---- per-category detail ---- */
.cc-details{margin-top:var(--s6);border-top:1px solid var(--border)}
.cc-cat{padding:var(--s5) 0;border-bottom:1px solid var(--border-soft,var(--border))}
.cc-switch{display:flex;align-items:center;gap:12px;cursor:pointer}
.cc-switch.is-locked{cursor:default}
.cc-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cc-track{position:relative;flex:0 0 auto;width:38px;height:22px;border-radius:var(--r-round);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong);
  transition:background var(--dur-micro) ease,box-shadow var(--dur-micro) ease}
.cc-track i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--text-faint);
  transition:transform var(--dur-micro) var(--ease-out-quart),background var(--dur-micro) ease}
.cc-switch input:checked+.cc-track{background:var(--brand);box-shadow:none}
.cc-switch input:checked+.cc-track i{transform:translateX(16px);background:var(--brand-on)}
.cc-switch input:disabled+.cc-track{opacity:.55}
.cc-switch input:focus-visible+.cc-track{outline:2px solid var(--focus);outline-offset:3px}
.cc-cat-name{font-size:14.5px;font-weight:500;color:var(--text)}
.cc-cat-name em{font-style:normal;color:var(--text-faint);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase}
.cc-cat-note{margin:10px 0 0 50px;font-size:13.5px;
  line-height:1.6;color:var(--text-faint)}

/* ---- disclosure detail drawn from the Cookie Policy ---- */
.cc-sub{margin:var(--s6) 0 var(--s3);font-size:14px;font-weight:600;color:var(--text)}
/* the provider table has three columns in a 536px drawer, so it scrolls in
   its own box rather than forcing the panel sideways */
.cc-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
.cc-table{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.45}
.cc-table th,.cc-table td{padding:9px 11px;text-align:left;vertical-align:top}
.cc-table th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;color:var(--text-faint);background:var(--surface);
  white-space:nowrap}
.cc-table tbody tr+tr td{border-top:1px solid var(--border-soft,var(--border))}
.cc-table td{color:var(--text-soft)}
.cc-table td:first-child{color:var(--text);white-space:nowrap}

.cc-fine{margin:0 0 var(--s3);font-size:13px;line-height:1.65;color:var(--text-faint)}
.cc-fine a{color:var(--text-soft);text-decoration:underline;text-underline-offset:3px}
.cc-fine a:hover{color:var(--text)}
/* which version of the Policy this choice is being recorded against */
.cc-version{margin:var(--s5) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--border);
  font-size:12px;line-height:1.6;color:var(--text-faint)}

/* ---- actions ---- */
.cc-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;
  padding:var(--s5) clamp(24px,3.4vw,40px) clamp(24px,3.4vw,36px);
  border-top:1px solid var(--border);background:rgb(var(--chrome-rgb))}
.cc-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;
  padding:0 var(--s5);border:1px solid var(--border-strong);
  font-size:13.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);background:transparent;
  transition:background var(--dur-micro) ease,color var(--dur-micro) ease,
    border-color var(--dur-micro) ease}
.cc-btn:hover{background:var(--surface);border-color:var(--text)}
.cc-btn.cc-solid{background:var(--brand);border-color:var(--brand);color:var(--brand-on);
  font-weight:600}
.cc-btn.cc-solid:hover{filter:brightness(1.08)}
/* the footer trigger has to read as the links beside it, not as a button */
.footer-legal .cc-open{padding:0;font:inherit;font-size:13px;color:var(--text-soft);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:transparent;background:none;
  transition:color var(--dur-micro) ease,text-decoration-color var(--dur-micro) ease}
.footer-legal .cc-open:hover{color:var(--text);text-decoration-color:currentColor}

@media(max-width:560px){
  .cc-panel{width:100%;border-left:0}
  .cc-cat-note{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .cc-scrim,.cc-panel{transition:none}
}


/* ==========================================================================
   2.21 · Legal pages (terms, policies)
   Long-form prose with a sticky contents rail. Measure is capped near 70ch:
   clause text is read closely, so it needs a shorter line than editorial copy.
   ========================================================================== */
/* One column width for the whole page: the measure, the gap, and the rail.
   Without it the head spans the full wrap while the body stops 125px short,
   and the rail no longer lines up with anything above it. */
/* one source of truth for the rail width: it feeds both the grid track and
   the page width, which previously repeated the number and could drift */
.legal{--toc-w:288px;--legal-w:calc(70ch + var(--s8) + var(--toc-w));
  padding-top:var(--s10)}
.legal-head,.legal-body{max-width:var(--legal-w);margin-inline:auto}
.legal-head{padding-bottom:var(--s8);border-bottom:1px solid var(--border)}
.legal-head h1{margin:var(--s3) 0 0;font-family:var(--font-heading);
  font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.05}
.legal-date{margin:var(--s4) 0 0;font-family:var(--font-mono);font-size:13px;
  letter-spacing:.02em;color:var(--text-faint)}


/* The prose track is sized to its own measure rather than 1fr: at 1fr the
   column ran ~120px wider than the 70ch text, so the rail read as floated far
   right instead of sitting beside the clauses. */
.legal-body{display:grid;gap:var(--s10) var(--s8);align-items:start;
  padding:var(--s10) 0 var(--s16);grid-template-columns:minmax(0,70ch) var(--toc-w)}
@media(max-width:900px){.legal-body{grid-template-columns:1fr}}

/* ---- contents rail ---- */
/* The rail sits in its own panel. The scroll moved onto the list so the
   "On this page" label stays put and the panel's padding is not eaten by it. */
.legal-toc{position:sticky;top:calc(var(--head-h,72px) + var(--s6));order:2;
  padding:var(--s5);border-radius:14px;
  background:rgba(var(--wash-rgb),.035);border:1px solid var(--border)}
@media(max-width:900px){
  .legal-toc{position:static;order:0}
  .legal-toc ol{max-height:none;overflow:visible}
}
.legal-toc h2{margin:0 0 var(--s3);font-size:12px;font-weight:600;
  color:var(--text-faint)}
.legal-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
  display:flex;flex-direction:column;gap:0;
  max-height:calc(100vh - var(--head-h,72px) - var(--s16) - 76px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.legal-toc a{display:flex;gap:10px;padding:4px 0;font-size:13.5px;font-weight:500;
  color:var(--text-soft);line-height:1.35;transition:color var(--dur-micro) ease}
.legal-toc a:before{counter-increment:toc;content:counter(toc,decimal-leading-zero);
  flex:0 0 auto;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);
  padding-top:2px;font-variant-numeric:tabular-nums}
.legal-toc a:hover{color:var(--text)}
.legal-toc a.active{color:var(--brand-text)}
.legal-toc a.active:before{color:var(--brand-text)}

/* ---- prose ---- */
.legal-prose{order:1;min-width:0;max-width:70ch}
.legal-section{scroll-margin-top:calc(var(--head-h,72px) + var(--s8));
  padding:var(--s8) 0;border-top:1px solid var(--border-soft,var(--border))}
.legal-section:first-of-type{border-top:0;padding-top:0}
.legal-section h2{font-family:var(--font-heading);font-size:clamp(20px,2.2vw,25px);
  font-weight:600;line-height:1.25}
.legal-section h3{margin:var(--s6) 0 0;font-size:17px;font-weight:600}
.legal-section h4{margin:var(--s5) 0 0;font-size:15.5px;font-weight:600;color:var(--text)}
.legal-section p{margin:var(--s4) 0 0;font-size:15.5px;line-height:1.7;color:var(--text-soft)}
.legal-section ul,.legal-section ol{margin:var(--s4) 0 0;padding-left:1.25em;
  display:flex;flex-direction:column;gap:10px;
  font-size:15.5px;line-height:1.7;color:var(--text-soft)}
.legal-section a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px}

/* ---- reading aids inside clause text. Presentation only: these wrap words
        the source document already contains, they never alter them. ---- */
/* the defined term in a definitions list, e.g. "Personal data" means ... */
.legal-prose dfn{font-style:normal;font-weight:600;color:var(--text)}
/* a clause that opens with its own label, e.g. Appeals: ... */
.legal-prose .lead{font-weight:600;color:var(--text)}
/* an inline gloss, e.g. ("Platform") */
.legal-prose .gloss{color:var(--text);font-weight:500}
/* Cross-references. 51 of them, so they stay quiet in the run of text and
   only declare themselves on hover, rather than speckling the page blue. */
.legal-prose a.xref{color:inherit;text-decoration-line:underline;
  text-decoration-style:dotted;text-decoration-color:var(--border-strong);
  text-underline-offset:3px;
  transition:color var(--dur-micro) ease,text-decoration-color var(--dur-micro) ease}
.legal-prose a.xref:hover,.legal-prose a.xref:focus-visible{
  color:var(--brand-text);text-decoration-style:solid;
  text-decoration-color:currentColor}



/* Clause headings arrive numbered from the source document, so the rail must
   not add a second number in front of them. */
.legal-toc.self-numbered ol{counter-reset:none}
.legal-toc.self-numbered a:before{content:none}

/* the cookie register: three columns inside a 70ch measure, so it scrolls in
   its own box rather than widening the page */
.legal-table-wrap{margin:var(--s5) 0 0;overflow-x:auto;
  border:1px solid var(--border);border-radius:12px}
.legal-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.legal-table th,.legal-table td{padding:12px 14px;text-align:left;vertical-align:top}
.legal-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;color:var(--text-faint);
  background:var(--surface);white-space:nowrap}
.legal-table tbody tr+tr td{border-top:1px solid var(--border-soft,var(--border))}
.legal-table td{color:var(--text-soft)}
.legal-table td:first-child{color:var(--text)}

/* ---------- creator hero: the product sitting into the fold ----------
   The dashboard is tall, so it is cropped by the stage rather than scaled
   down to nothing, and faded out at the cut so it reads as continuing below
   rather than as an image that stops. */
/* The stage used to be cropped and faded out at the bottom because it was
   half-buried in the fold. Standing in its own section it is a whole object, so
   the mask and the height cap are gone and the frame is closed on all four
   sides. It is lifted toward the viewer rather than tipped away from them:
   origin at the centre, so neither edge flares. */
/* The warm ground carried on past the fold, so the studio section is not a
   flat ink slab bolted to a glowing hero. Two edges to respect, and both are
   handled by starting and ending at zero alpha rather than at a colour:

   TOP  (the section's own edge, 160px up inside the hero): alpha 0 there, so
        nothing draws a line across the full width where the section begins,
        and the hero's particles still read through the overlap untinted.
        It then ramps to its peak right where the hero's own wash is masked
        out, so the two hand over rather than both stopping.
   BOTTOM: back to zero well before the section ends, leaving pure ink before
        the cream section starts underneath it.

   Kept transparent rather than opaque for the same reason the section has no
   bg-ink: an opaque ground here would paint over the particle field in the
   margins, which is the whole point of the overlap. */
[data-brand="creator"] .studio-wash{position:relative;
  
  background:linear-gradient(to bottom,
    rgba(242,212,60,0)    0%,
    rgba(242,212,60,.10) 20%,
    rgba(242,212,60,.07) 46%,
    rgba(242,212,60,0)   88%)}
/* The frame's shape stated in CSS as well as in the video's attributes. Both
   say 16:9, so the section reaches its final height on the very first layout
   and the .studio-wash stops, which are percentages of that height, are never
   computed against a collapsed box. */
[data-brand="creator"] .dash-tilt video{aspect-ratio:16/9;height:auto}
/* ============================================================================
   2.23 · CHOOSE YOUR PATH — folder tabs
   ----------------------------------------------------------------------------
   COLOUR. The reference puts white type on a saturated brand panel. Ours cannot:
   yellow-400 carries white at 1.4:1. So the panel takes the page's ink and the
   brand colour does the work it can do on a light ground, which is yellow-700
   at 5.04:1 for the active tab. The CTA keeps the reference's white pill,
   which lands at 18:1 on ink.
   ========================================================================== */
[data-brand="creator"] .pathtabs{--pt-r:32px;--pt-notch:24px;--pt-shoulder:58px;
  /* The shoulder and the notch take the gradient's FIRST stop as a flat fill,
     and the shell runs the ramp from that same stop. They meet at the shell's
     top edge, where the ramp is still exactly --pt-panel, so the join is
     seamless without either piece needing to know the other's height. */
  --pt-panel:#f2d43e;--pt-panel-end:#f0a121;
  /* ONE width drives the shoulder and the image, so they can never drift. The
     strip takes whatever is left rather than the shoulder taking the remainder,
     which is the reverse of how this started. */
  /* THE STRIP CAN NEVER BE COVERED. The three labels measure 614px, so 640 is
     reserved for them and the image takes 45% of the shell only while that
     leaves enough. Below about 1434px the second term wins and the image gives
     width back to the strip instead of eating it; below 1152px neither fits and
     the layout stacks. 320px is the floor at which an image is still an image.

       45% of the shell   : (100vw - 96px) * .45
       what the strip can spare : 100vw - 640 - 96 - (2 x inset)          */
  /* Measured need is ~628px for three labels plus the strip's own padding and
     gaps. Reserving 656 leaves real margin, so a different font stack or a
     slightly wider label cannot silently start clipping the last tab. */
  --pt-strip:656px;
  --pt-media:max(320px,
    min(calc((100vw - 96px) * .45),
        calc(100vw - var(--pt-strip) - 96px - var(--pt-inset) * 2)));
  /* The ink around the image, on all four of its sides. Everything else here is
     derived from it, so this is the one number to turn. */
  --pt-inset:var(--s12)}

/* The strip and the shoulder are flex siblings, so the notch sits wherever the
   labels end rather than at a hard-coded offset. */
[data-brand="creator"] .pathtabs-head{display:flex;align-items:flex-end}
[data-brand="creator"] .pathtabs-bar{display:flex;gap:var(--s4);flex:1;min-width:0;
  padding:0 var(--s10) 0 calc(var(--s12) - 14px);
  overflow-x:auto;scrollbar-width:none}
[data-brand="creator"] .pathtabs-bar::-webkit-scrollbar{display:none}
[data-brand="creator"] .pathtabs-shoulder{position:relative;flex:none;
  width:calc(var(--pt-media) + var(--pt-inset) * 2);
  height:var(--pt-shoulder);background:var(--pt-panel);
  border-radius:var(--pt-r) var(--pt-r) 0 0}
/* The concave fillet. A quarter disc of panel colour laid just outside the
   shoulder's bottom-left, which is what turns a right angle into the inward
   curve a folder tab has. */
[data-brand="creator"] .pathtabs-shoulder::before{content:"";position:absolute;
  left:calc(-1 * var(--pt-notch));bottom:0;
  width:var(--pt-notch);height:var(--pt-notch);
  background:radial-gradient(circle at 0 0,
    transparent var(--pt-notch),var(--pt-panel) calc(var(--pt-notch) + .5px))}

/* VISIBILITY. The inactive label was ink at 50% on cream, which measures
   3.17:1 and fails AA for text. At 65% it is 5.6:1. Size and weight go up with
   it, and a chip appears on hover so the strip reads as a control rather than a
   caption: three cues for one state, not colour alone. */
[data-brand="creator"] .pathtab{position:relative;flex:none;
  padding:10px 14px 14px;
  border:0;background:transparent;cursor:pointer;border-radius:10px 10px 0 0;
  font-size:16px;font-weight:600;color:rgba(14,17,19,.65);white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-out-quart),
             background-color var(--dur-micro) var(--ease-out-quart)}
[data-brand="creator"] .pathtab::after{content:"";position:absolute;
  left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--yellow-700);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--m-base) var(--ease-out-quart)}
[data-brand="creator"] .pathtab:hover{color:var(--ink);background:rgba(14,17,19,.06)}
[data-brand="creator"] .pathtab.is-active{color:var(--yellow-700)}
[data-brand="creator"] .pathtab.is-active::after{transform:scaleX(1)}
[data-brand="creator"] .pathtab:focus-visible{outline:2px solid var(--yellow-700);
  outline-offset:4px;border-radius:4px}

/* All panels share one grid cell: the shell is as tall as the tallest, so
   switching never changes the page height under the reader. */
/* Positioned so it paints above the shoulder. The shoulder is position:relative
   for its notch, which puts it above static content no matter the source order;
   without this the image's tuck disappears under it and reads as a crop. */
[data-brand="creator"] .pathtabs-shell{display:grid;position:relative;
  background:linear-gradient(to bottom,var(--pt-panel) 0%,var(--pt-panel-end) 100%);
  border-radius:0 0 var(--pt-r) var(--pt-r);
  border-top-left-radius:var(--pt-r);
  /* One inset on the top, right and bottom, so the frame around the image is
     even on all three outer sides. The left stays on the plain step, because
     that edge aligns with the tab strip and the headline rather than wrapping
     the image. The old half-shoulder correction on the block padding went with
     the image's upward tuck: the image now fills the row instead. */
  padding:var(--pt-inset) var(--pt-inset) var(--pt-inset) var(--s12)}
[data-brand="creator"] .pathpanel{grid-area:1/1;
  display:grid;grid-template-columns:1fr var(--pt-media);gap:var(--s12);
  /* stretch, not centre: the image is a column of the panel, not an object
     floating in it, so it takes whatever height the copy sets */
  align-items:stretch;
  /* visibility, not just opacity: an opacity-0 panel still holds its links in
     the tab order, so keyboard users landed on invisible buttons. Visibility
     keeps the layout box the shell's height depends on, while taking the
     subtree out of focus and out of the accessibility tree. It flips at the end
     of the fade out, and immediately on the way in. */
  visibility:hidden;
  opacity:0;transform:translate3d(0,10px,0);pointer-events:none;
  transition:opacity var(--m-mid) var(--ease-out-quart),
             transform var(--m-mid) var(--ease-out-quart),
             visibility 0s linear var(--m-mid)}
[data-brand="creator"] .pathpanel.is-active{
  visibility:visible;opacity:1;transform:none;pointer-events:auto;
  transition:opacity var(--m-mid) var(--ease-out-quart),
             transform var(--m-mid) var(--ease-out-quart),
             visibility 0s}

/* The copy is inset from the panel's own frame on the block axis, so the text
   starts and ends well inside it. The image is not: it stays flush to the
   frame and stretches to whatever height this padding produces. */
[data-brand="creator"] .pathpanel-copy{padding-block:clamp(18px,2.6vw,38px)}
[data-brand="creator"] .pathpanel-head{color:var(--ink);font-size:clamp(22px,2vw,30px);
  font-weight:500;line-height:1.12;text-wrap:balance}
[data-brand="creator"] .pathpanel-body{margin-top:var(--s5);max-width:46ch;
  color:rgba(14,17,19,.78);font-size:17px;line-height:1.6}
/* Three points per path, each a name and a sentence, on a wash of white over
   the panel's gradient.

   No border, no blur, no shadow: the fill is the whole treatment. Because it is
   translucent it takes the yellow underneath with it, so the three sit at
   slightly different temperatures down the gradient and separate from the panel
   without a drawn edge. Nothing here lifts off the surface.

   The one guard left is for a reader who has asked for less transparency: they
   get an opaque surface instead, since the tint is the only thing telling these
   apart from the panel. */
[data-brand="creator"] .pathlist{
  display:flex;flex-direction:column;gap:8px;
  margin:var(--s8) 0 0;padding:0;list-style:none;border:0}
[data-brand="creator"] .pathlist li{
  padding:16px 18px;
  border:0;border-radius:14px;
  background:rgba(255,255,255,.22);
  transition:background var(--m-quick) var(--ease-out-quart)}
@media (hover:hover){
  [data-brand="creator"] .pathlist li:hover{background:rgba(255,255,255,.3)}}
@media (prefers-reduced-transparency:reduce){
  [data-brand="creator"] .pathlist li{background:rgba(255,255,255,.66)}}
[data-brand="creator"] .pathlist b{
  display:block;color:var(--ink);
  font-size:clamp(16px,1.35vw,18px);font-weight:600;line-height:1.3;
  letter-spacing:-.005em}
[data-brand="creator"] .pathlist span{
  display:block;margin-top:3px;max-width:52ch;
  color:rgba(14,17,19,.74);font-size:clamp(14px,1.05vw,15px);line-height:1.5}

[data-brand="creator"] .pathcta{display:inline-flex;align-items:center;gap:10px;
  margin-top:var(--s8);padding:14px 26px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:600;
  transition:background var(--dur-micro) var(--ease-out-quart)}
[data-brand="creator"] .pathcta:hover{background:rgba(14,17,19,.86)}
[data-brand="creator"] .pathcta-arrow{width:16px;height:16px;
  transition:transform var(--m-quick) var(--ease-out-quart)}
@media(hover:hover){
  [data-brand="creator"] .pathcta:hover .pathcta-arrow{transform:translateX(4px)}}
/* Optically centred against the INK, not against the shell's padding box. The
   shoulder puts 58px more panel above this column than below it, so sitting the
   image on the padding alone leaves 106px of ink over it and 48px under it,
   which reads as the image having slipped down. Half the shoulder height
   corrects it, as a transform so the shell's own height is untouched. */
[data-brand="creator"] .pathpanel-media{position:relative;
  border-radius:26px;overflow:hidden;
  background:rgba(14,17,19,.08);
  /* No aspect ratio and no height cap: the media stretches to the panel row,
     which is what keeps its bottom edge level with the copy however long the
     copy runs, and what makes the frame around it read as one even inset.

     A max-height was tried here and removed. It cannot coexist with the equal
     inset: cap the height and the yellow below the image grows while the top,
     right and bottom no longer match. If the panel ever feels too tall, the
     lever is the copy column that sets the row height, not the image.

     The negative top margin is the illusion. The shoulder is a band of the same
     yellow sitting ABOVE the shell, so the eye reads the frame around the image
     as starting at the SHOULDER's top edge, not the shell's. Pulling the image
     up by exactly one shoulder leaves one inset of yellow between the two top
     edges, matching the right and the bottom: the image starts at the shell's
     padding edge (one inset down), so lifting it by the shoulder's full height
     puts it one inset below the shoulder's top. On a stretched grid item a
     negative margin grows the box upward without moving its bottom or changing
     the row, so the other three sides are untouched. */
  align-self:stretch;min-height:420px;
  margin-top:calc(-1 * var(--pt-shoulder))}
/* The picture is taken OUT of flow. In flow it sizes itself from the file's
   intrinsic ratio, so the 9:16 crop made the slot 1052px tall at 1440 and
   dragged the whole panel past 1090 with it. Absolute means the slot's height
   is the grid's business (the row, i.e. the copy) and the image simply fills
   whatever that turns out to be. */
[data-brand="creator"] .pathpanel-media picture{position:absolute;inset:0}
[data-brand="creator"] .pathpanel-media img{display:block;width:100%;height:100%;
  object-fit:cover}

/* 1152px is where the image hits its 320px floor and the strip still has its
   reserved 640. Below it the two cannot coexist, so the panel goes single
   column, the shoulder takes the remainder and the strip takes what it needs. */
@media(max-width:1151px){
  [data-brand="creator"] .pathtabs{--pt-r:24px;--pt-notch:18px}
  [data-brand="creator"] .pathtabs-shell{padding:var(--s8) var(--s6)}
  [data-brand="creator"] .pathpanel{grid-template-columns:1fr;gap:var(--s10)}
  [data-brand="creator"] .pathpanel-copy{padding-block:0}
  /* No shoulder once the image is below the copy. It exists to wrap the image,
     and there is no image beside it to wrap: left in, it would be a raised
     corner over nothing. The notch goes with it, being its pseudo-element, so
     the panel closes up into a plain rounded card. */
  [data-brand="creator"] .pathtabs-shoulder{display:none}
  [data-brand="creator"] .pathtabs-shell{border-radius:var(--pt-r)}
  /* The bar keeps flex:1 and min-width:0 from the base rule so it can shrink
     below its content and scroll inside itself. flex:none here sized it to the
     tabs instead, which pushed the whole page wider than the viewport. */
  [data-brand="creator"] .pathtabs-bar{padding-right:var(--s6)}
  /* Air above the headline, which the shoulder used to imply. */
  [data-brand="creator"] .pathpanel-head{margin-top:var(--s5)}
  /* Media first on narrow screens would push the headline below the fold of the
     panel, so the copy keeps the lead and the image follows it. */
  /* width:100% is load-bearing. The three panels stack in one grid cell and all
     stretch to the tallest, so each panel's auto rows absorb the leftover
     height; without an explicit width, aspect-ratio turns that leftover height
     into a WIDTH (measured 297px in a 232px column at 320) and the page scrolls
     sideways. Fixing the width makes the ratio set the height, which is the
     direction that cannot overflow. */
  [data-brand="creator"] .pathpanel-media{aspect-ratio:2/1;order:2;
    width:100%;align-self:auto;min-height:0;margin-top:0}
  [data-brand="creator"] .pathtabs-bar{padding-left:var(--s5);padding-right:var(--s6)}}
@media(prefers-reduced-motion:reduce){
  [data-brand="creator"] .pathpanel{transition:none;transform:none}
  [data-brand="creator"] .pathtab::after{transition:none}}

/* ============================================================================
   2.22 · STUDIO SCENE — the parallax system
   ----------------------------------------------------------------------------
   MOTION TOKENS. Three curves, each with one job, so the page reads as one hand.
     --ease-scene   the long authored move: leaves and arrives slowly, no bounce
     --ease-enter   content arriving on scroll
     --ease-micro   hover and press, short enough to feel like a response
   ----------------------------------------------------------------------------
   WHAT THE SCROLL DRIVES. create.js writes four custom properties and nothing
   else. No class thrashing, no layout reads during scroll, no per-element JS
   styling. Everything below is interpolation over those four numbers:
     --p        0 to 1, frame open. Smoothstepped in JS, so it has no hard start
                or stop even though scroll position is linear.
     --q        0 to 1 across the WHOLE scene, for the slow push-in.
     --win-t / --win-b / --win-x   the clip window's insets, in px.
     --chrome-o the framed phase's annotations, retired early.
   ========================================================================== */
[data-brand="creator"] .scene{
  --ease-scene:var(--e-emphasis);
  --ease-enter:var(--e-enter);
  --ease-micro:var(--e-standard);
  --p:0; --q:0; --chrome-o:1;
  --win-t:0px; --win-b:0px; --win-x:0px;
  position:relative;z-index:20;
  /* The tuck is capped by the room it has, not set as a flat number. The hero
     centres its content in a min-height box, so the gap between the CTA and the
     hero's bottom edge scales with the viewport: it measured 176px at 700 tall
     against a 250px overlap, which put the frame straight over the button. At
     20svh the overlap always lands inside that gap, and the cap keeps the deep
     tuck on a tall screen where there is room for it. */
  margin-top:calc(-1 * min(250px, 20svh))}
/* The overlap grows as the frame turns portrait. A taller window pushed down
   by the old margin would open below the fold, and the whole point of the
   scene is that the shot is already there when the hero's button is. */
@media(max-width:1023px){[data-brand="creator"] .scene{margin-top:calc(-1 * min(250px, 20svh))}}
@media(max-width:639px){[data-brand="creator"] .scene{margin-top:calc(-1 * min(280px, 20svh))}}

/* The pinned layer. Sticky rather than fixed so the browser owns the pin and
   the release, and the scene's own height is the only thing that decides how
   long the video holds. */
/* Clipped at the VIEWPORT, not at the frame. The distinction is the whole
   point: the floating cards overhang the frame on purpose, so clipping them at
   the frame severs that overhang, but their -32px and -40px offsets are inside
   the viewport while the window is inset and OUTSIDE it once the window opens
   to full width, which is what was adding 32px of horizontal scroll. Clipping
   here costs nothing visible and removes the scrollbar.

   overflow:clip rather than hidden, so this never becomes a scroll container of
   its own; hidden is listed first as the fallback. */
[data-brand="creator"] .scene-pin{
  position:sticky;top:0;height:100svh;z-index:0;pointer-events:none;
  overflow:hidden;overflow:clip}
[data-brand="creator"] .scene-media{
  position:absolute;inset:0;
  overflow:hidden;pointer-events:none;
  clip-path:inset(var(--win-t) var(--win-x) var(--win-b) var(--win-x)
                  round calc(16px * (1 - var(--p))));
  /* promoted only while the scene is on screen; create.js removes it after */
  will-change:clip-path}
[data-brand="creator"] .scene-video{position:absolute;inset:0;
  /* The push-in. 1 to 1.06 across the whole scene, which at 100svh is about 45
     px of drift: felt rather than seen, and it keeps the backdrop alive while
     the copy does the talking. */
  transform:scale(calc(1 + .06 * var(--q)));
  transform-origin:50% 45%}
[data-brand="creator"] .scene-video video{
  display:block;width:100%;height:100%;object-fit:cover}

/* Arrives with the opening, not before. */
[data-brand="creator"] .scene-scrim{position:absolute;inset:0;pointer-events:none;
  opacity:var(--p);
  /* ONE gradient. A linear plus a radial vignette compound rather than blend:
     .72 under .5 leaves 14% of the picture, which is a black screen with a
     video technically playing behind it. This single ramp puts the worst-case
     bright area of the footage at roughly 7:1 against white type while the shot
     stays plainly visible. */
  background:linear-gradient(to bottom,
    rgba(14,17,19,.30) 0%,
    rgba(14,17,19,.58) 46%,
    rgba(14,17,19,.74) 100%)}

/* Tracks the clip window exactly, because it is inset by the same numbers. */
/* Tracks the clip window exactly, because it is inset by the same numbers. No
   opacity of its own: the two groups inside it leave at different times. */
[data-brand="creator"] .scene-chrome{position:absolute;
  top:var(--win-t);bottom:var(--win-b);left:var(--win-x);right:var(--win-x);
  pointer-events:none}
/* The data cards ARE annotations on the product shot, so they go with the
   frame. */
[data-brand="creator"] .scene-chrome .float-art{
  opacity:var(--chrome-o);
  will-change:opacity}
/* The carousel is not. It is the page's argument, and it belongs to the video
   at any size, so it stays and simply travels outward with the window as the
   frame opens. */
/* The carousel belongs to the frame, so it holds its 3rem corner at rest. Once
   the scene is moving it lifts a little, which is the rest of the gap the
   headline needs as it climbs into the frame. */
[data-brand="creator"] .scene-chrome .vcar{opacity:1;
  transform:translate3d(0,calc(var(--q) * -36px),0);will-change:transform}
/* iPad and below, where the frame is square or portrait and the copy climbs
   into the same corner the cards sit in. create.js writes --vcar-o from the
   measured gap between the carousel's bottom edge and the copy's top edge, so
   the hand-off happens when the two actually meet rather than at a scroll
   position that would be right on one screen and wrong on the next. Desktop
   keeps the flat opacity above: there the copy arrives well clear of them. */
@media(max-width:1023px){
  [data-brand="creator"] .scene-chrome .vcar{
    opacity:var(--vcar-o,1);
    will-change:transform,opacity}}

/* The value section, riding over the opened video. -18svh so it begins to climb
   just before the frame finishes opening: the two moves overlap rather than
   queue, which is what stops the sequence feeling like two separate events. */
/* The value section, riding over the opened video.

   margin-top is POSITIVE and deliberate: it is the hold. It buys the sticky
   layer the scroll distance the frame needs to finish opening before any copy
   arrives, and it is what makes the scene tall enough to stay pinned for the
   whole sequence. Set shorter than the opening travel (40 against 62) so the
   copy begins climbing while the frame is still opening rather than waiting for
   it to finish: the two moves overlap instead of queueing.

   The bottom padding is the air between the carousel and the headline, which
   is not obvious. At the end of the scene the copy's last edge lands on the
   bottom of the viewport, so everything above it is pushed up by exactly this
   padding: every svh here is an svh taken from the gap under the carousel.
   margin-top cannot buy that gap, because it lengthens the scene by the same
   amount it moves the copy, and the pin releases that much later. */
[data-brand="creator"] .scene-copy{position:relative;z-index:2;
  margin-top:40svh;padding:0 0 4svh}

/* Content choreography over the backdrop. Each card carries its own --i, so the
   four land in sequence rather than together, and the parallax offset is small
   and equal so the row still reads as one object. */
[data-brand="creator"] .scene-copy .reveal{transition-duration:var(--m-scene);
  transition-timing-function:var(--ease-enter)}
[data-brand="creator"] .loop-card{
  background:rgba(14,17,19,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  backdrop-filter:blur(18px) saturate(1.2);
  transform:translate3d(0,18px,0);opacity:0;
  transition:opacity var(--m-scene) var(--ease-enter),
             transform var(--m-scene) var(--ease-enter),
             background-color var(--m-quick) var(--ease-micro),
             box-shadow var(--m-quick) var(--ease-micro)}
[data-brand="creator"] .loop-card.in{opacity:1;transform:translate3d(0,0,0)}
/* Micro-interaction: a 2px lift and a brighter ground. Short, and on properties
   that do not relayout. */
@media(hover:hover){
  [data-brand="creator"] .loop-card:hover{
    background:rgba(20,25,28,.82);
    transform:translate3d(0,-2px,0);
    box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
  [data-brand="creator"] .loop-card:hover .loop-step{color:var(--yellow-300)}}
[data-brand="creator"] .loop-step{transition:color var(--m-quick) var(--ease-micro)}
/* The chevron leads the press by a hair. Transform only, and the distance is
   deliberately small: a 4px nudge reads as responsiveness, a 12px one reads as
   an animation playing at you. */
[data-brand="creator"] .loop-cta-arrow{
  transition:transform var(--m-quick) var(--ease-micro)}
@media(hover:hover){
  [data-brand="creator"] .loop-cta:hover .loop-cta-arrow{transform:translateX(4px)}}
[data-brand="creator"] .loop-cta:active{transform:translateY(1px)}

/* REDUCED MOTION. Not a slower version of the same thing: the scene stops being
   a scene. The video unpins and sits in its frame, the copy gets an opaque
   ground of its own instead of relying on a scrim that no longer animates, and
   create.js never attaches the scroll handler. */
@media(prefers-reduced-motion:reduce){
  [data-brand="creator"] .scene{margin-top:0}
  [data-brand="creator"] .scene-media{position:relative;height:auto;
    clip-path:none;will-change:auto}
  [data-brand="creator"] .scene-video{position:relative;transform:none}
  [data-brand="creator"] .scene-video video{height:auto}
  [data-brand="creator"] .scene-scrim{display:none}
  [data-brand="creator"] .scene-chrome{display:none}
  [data-brand="creator"] .scene-copy{margin-top:0;background:var(--ink)}
  [data-brand="creator"] .loop-card{opacity:1;transform:none}}

/* ---------- Vertical carousel over the studio frame ----------
   Geometry is driven by two numbers and nothing else: --vc-h, the height of one
   card, and --vc-gap between them. Their sum is the PITCH, which is both the
   distance the track travels per step and one third of the window height. Set
   them once and the window, the travel and the active slot all follow. */
[data-brand="creator"] .vcar{
  --vc-h:56px; --vc-gap:14px;
  --vc-pitch:calc(var(--vc-h) + var(--vc-gap));
  position:absolute;left:3rem;top:3rem;z-index:2;
  width:272px;height:calc(var(--vc-pitch)*3);
  overflow:hidden;pointer-events:none;
  /* Cards dissolve at the window's edges rather than being sliced by it. The
     solid band is generous so the middle card is never touched. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%)}
[data-brand="creator"] .vcar-track{
  display:flex;flex-direction:column;gap:var(--vc-gap);
  margin:0;padding:0;list-style:none;will-change:transform;
  transform:translate3d(0,0,0)}
/* The move itself. A long tail on the ease means the card arrives and settles
   rather than stopping dead, which is what separates this from a marquee. */
[data-brand="creator"] .vcar-track.is-moving{
  transition:transform var(--m-travel) var(--e-enter)}

/* White card, dark text, flat. No shadow: the card reads as an object on the
   footage from its own edge and fill alone. */
[data-brand="creator"] .vcar-card{
  display:flex;align-items:center;gap:12px;flex:none;
  height:var(--vc-h);padding:0 18px 0 8px;
  border-radius:14px;background:#fff;border:0;box-shadow:none;
  /* Resting state is the RECESSED one. Only the middle card is promoted, so a
     card that never gets its turn still looks deliberate. A white card fades
     toward the footage faster than a dark one did, so .5 rather than .42. */
  opacity:.5;transform:scale(.94);transform-origin:0 50%;
  transition:opacity var(--m-travel) var(--e-enter),
             transform var(--m-travel) var(--e-enter)}
[data-brand="creator"] .vcar-card.is-active{opacity:1;transform:scale(1)}

/* Yellow gradient tile, dark glyph. The icons are loaded as files rather than
   inlined, so their colour is baked into the SVG and no longer follows the
   tile's `color`. That is fine while the tile stays light, but a dark tile
   would need recoloured files, not a CSS change. */
[data-brand="creator"] .vcar-ico{
  display:grid;place-items:center;flex:none;width:40px;height:40px;
  border-radius:11px;
  background:linear-gradient(145deg,var(--yellow-300) 0%,#e9c22e 100%);
  transition:filter var(--m-travel) var(--e-enter)}
[data-brand="creator"] .vcar-ico img{display:block;width:22px;height:22px}
[data-brand="creator"] .vcar-card:not(.is-active) .vcar-ico{filter:saturate(.8)}
[data-brand="creator"] .vcar-label{
  color:var(--ink);font-size:13px;font-weight:600;line-height:1.25}

/* Unlike the floating cards, this one stays at every size. It is the page's
   argument rather than an annotation, so a phone gets it too, just built to the
   frame it actually has: the corner inset drops from 3rem to 12px and the width
   follows the frame instead of holding 272px, which on a 320px window would
   reach both edges. The pitch shrinks with it, and create.js reads --vc-h and
   --vc-gap back out of the computed style, so the travel follows on its own. */
@media(max-width:639px){
  [data-brand="creator"] .vcar{
    --vc-h:48px; --vc-gap:10px;
    /* Top corner, as on desktop. It has to be the top: only the frame's upper
       236px sit above the fold on a phone, so cards pinned to the bottom of a
       438px window would not be seen until the reader scrolled. */
    left:12px;top:12px;
    width:min(272px, calc(100% - 24px))}
  [data-brand="creator"] .vcar-card{
    gap:10px;padding:0 14px 0 6px;border-radius:12px}
  [data-brand="creator"] .vcar-ico{width:34px;height:34px;border-radius:9px}
  [data-brand="creator"] .vcar-ico img{width:19px;height:19px}
  [data-brand="creator"] .vcar-label{font-size:12px}}
/* No travel, no promotion cycle. Three cards, all legible, held still. */
@media(prefers-reduced-motion:reduce){
  [data-brand="creator"] .vcar-track{transition:none}
  [data-brand="creator"] .vcar-card{opacity:1;transform:none}}

/* Objects floating over the studio frame.

   These carry their own dark panel, drawn inside the SVG, so there is no glass
   or border here. What they do need is separation from the photograph behind
   them: drop-shadow rather than box-shadow, because it follows the artwork's
   own alpha and so hugs the panel's rounded corners instead of boxing the
   whole element. */
[data-brand="creator"] .float-art{
  position:absolute;z-index:2;pointer-events:none;
  /* Three shadows, not one. A single wide blur reads as a smudge under the
     card; what says "lifted off the surface" is the relationship between a
     tight dark contact shadow, a mid key shadow offset downward, and a broad
     ambient one. Each is a separate drop-shadow so they all follow the SVG's
     own alpha and hug the panel's rounded corners. */
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.55))
    drop-shadow(0 12px 22px rgba(0,0,0,.55))
    drop-shadow(0 40px 66px rgba(0,0,0,.7))}
/* A one-pixel lit top edge, the other half of reading as raised: a surface
   tilted toward the viewer catches light where the shadow is not. Drawn on the
   panel's own geometry so it follows the corner radius. */
[data-brand="creator"] #w1-surface path,
[data-brand="creator"] #w6-surface rect:first-child{
  stroke:rgba(255,255,255,.07);stroke-width:1}
/* width:100% is what actually scales these. The SVGs carry width/height
   attributes, so without it they render at their native size no matter how
   wide the wrapper is, and only the empty box around them grows. */
[data-brand="creator"] .float-art svg{display:block;width:100%;height:auto}
/* Held at native width. These are dashboards carrying 11px labels and counters;
   scaling them to a percentage of the frame would make the numbers, which are
   the entire point, unreadable. Placed left of 29% and right of 79%, which is
   where the subject's face and the microphone are not. */
/* The W6 divider ships filled #242D35, which is the card surface's own colour,
   so it renders as nothing at all rather than as a faint line. Corrected here
   rather than in the inlined markup, so the SVG in this page stays byte
   identical to Animated-SVG/w6.grouped.dark.svg and a regenerated asset can be
   dropped straight back in. .12 white over #242D35 resolves to about #3C444C,
   a hairline that reads without becoming a rule. */
[data-brand="creator"] #w6-divider rect{fill:rgba(255,255,255,.12)}
/* Scaled up from its native 273. The SVG has a viewBox, so widening it grows
   the card and every label, number and icon inside it by the same factor;
   nothing here needs to know about the internal geometry. */
[data-brand="creator"] .float-art-audience{right:-32px;top:14%;width:344px}
[data-brand="creator"] .float-art-overview{left:-40px;top:66%;width:375px}
/* They need margin outside the frame to break into. An iPad's frame still has
   it; a phone's does not, and shrinking them would defeat the point above, so
   they are dropped there and kept everywhere else. */
@media(max-width:767px){
  [data-brand="creator"] .float-art{display:none}}
[data-brand="creator"] .dash-stage{position:relative}
[data-brand="creator"] .dash-tilt{
  transform:perspective(2400px) rotateX(1.6deg);
  transform-origin:50% 50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 40px 110px -36px rgba(0,0,0,.95)}
@media (prefers-reduced-motion:reduce){
  [data-brand="creator"] .dash-tilt{transform:none}}

/* ---------- creator hero: the particle horizon ----------
   The footage runs 20s, but only its opening holds the composition we want:
   a dense band low in frame with clean dark above. After about 3.5s particles
   rise through the middle and sit behind the copy. So the clip is cut to that
   opening, and the box is anchored to the foot of the hero showing only the
   lower part of the frame. The horizon reads as a floor the page stands on,
   and nothing drifts through the headline.
   Screen blend as before: the source is glow on black, so black drops out. */
/* .hero-top spans the nav and the copy only, so anchoring the field to its
   foot puts the horizon directly beneath the call to action and above the
   studio footage, where it is visible without scrolling. */
[data-brand="creator"] .hero-top{position:relative}
/* Section-level and behind everything: the horizon runs up under the copy and
   continues down behind the studio footage, so the video sits on the glow
   rather than cutting it off. Nothing above it is opaque except the video
   itself, which is the point. */
/* The band is deliberately shorter than 0.5625 x its own width, which is the
   footage's aspect. That keeps cover scaling to WIDTH, so the frame is never
   zoomed and never cropped at the sides, and the excess height is taken off the
   top. Anchored to the bottom, what survives is the settled horizon. */
/* The listener hero's film grain, reused verbatim over the creator hero and
   the studio frame overlapping it. Only the stacking changes: the studio
   section sits at z-20, so the default z-index of 5 would have left the grain
   under the video it is meant to cover. */
/* Fixed, so the grain sits on the SCREEN rather than on the page: it holds
   still while everything scrolls under it, which is how film grain reads.
   Scoped to the creator brand, so discover.html keeps its scrolling version. */
[data-brand="creator"] .hero-noise{position:fixed;z-index:30}
[data-brand="creator"] .hero-fx{position:absolute;inset:auto 0 0 0;
  height:clamp(210px,24vw,360px);
  z-index:0;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;opacity:1;
  /* Masked at BOTH ends. The box has to stop somewhere, and stopping it at the
     hero's edge put a dead-straight horizontal line across the full width right
     where the footage is brightest, which read as a crop rather than as a
     horizon. Alpha reaches zero before the edge does, so there is nothing left
     to cut. The top fade was shortened from 46% to 30% to pay for it, keeping
     the solid middle the same width it was. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);
  /* A warm ground under the particles, densest where they are. Without it the
     glow floats on flat near-black with no light spilling into the air around
     it, which is what made the clip read as pasted on. It sits on .hero-fx
     rather than on its own layer so the mask above fades the wash and the
     particles together, and the band still resolves to nothing at both ends. */
  background:linear-gradient(to bottom,
    rgba(242,212,60,0) 0%,
    rgba(242,212,60,.05) 42%,
    rgba(242,212,60,.11) 72%,
    rgba(242,212,60,.19) 100%)}
/* Screened, not stacked. The video element paints opaque black in its dark 93%,
   so left normal it would hide the wash behind it completely. */
[data-brand="creator"] .hero-fx-video{width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 100%;
  mix-blend-mode:screen}
[data-brand="creator"] .hero-fx-flag{position:absolute;inset:0;
  background:radial-gradient(38% 120% at 50% 60%,
    rgba(0,0,0,.88) 0%,rgba(0,0,0,.52) 52%,rgba(0,0,0,0) 82%);
  mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){
  [data-brand="creator"] .hero-fx-video{display:none}
  [data-brand="creator"] .hero-fx{
    background:url("/site/videos/hero/create-particles.poster.jpg") 50% 100%/cover no-repeat}}

/* The hero ground poured back over the top of the particle field. It sits
   above the blended layer and below the content, so the glow fades in under
   the nav instead of streaming through it. Same colour as the section. */
[data-brand="creator"] .hero-top-fade{position:absolute;inset:0 0 auto 0;
  height:clamp(160px,26vh,280px);z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(25 33 35 / 1) 0%,
    rgb(25 33 35 / .78) 40%,
    rgb(25 33 35 / 0) 100%)}

/* ============================================================================
   2.24 · FAQ — stacked accordion cards
   ----------------------------------------------------------------------------
   One card per question on the ink ground, opened one at a time. The plus sign
   is drawn from two pseudo-element bars rather than a glyph, so the vertical
   bar can rotate into the horizontal one on open instead of the whole mark
   spinning, and so it inherits colour from the card state.

   The open/close height is animated in create.js, because a <details> child is
   not rendered while closed and therefore has no start value for CSS to
   transition from. Without JS the element still opens, just instantly.
   ========================================================================= */
[data-brand="creator"] .faq{
  display:flex;flex-direction:column;gap:12px;
  max-width:920px;margin-inline:auto}
/* A contrast ladder rather than one surface plus an outline. Against the
   #192123 ground: rest 1.26:1, hover 1.37:1, open 1.55:1. The lightest tone is
   spent on the one card that is open, where it reads as state; as a resting
   surface across five stacked cards it would read as a grey block. */
[data-brand="creator"] .faq-item{
  --faq-rest:#2c3237; --faq-hover:#2f383e; --faq-open:#374046;
  border-radius:20px;
  background:var(--faq-rest);border:0;
  transition:background var(--m-base) var(--e-standard)}
[data-brand="creator"] .faq-item:hover{background:var(--faq-hover)}
[data-brand="creator"] .faq-item[open]{background:var(--faq-open)}
[data-brand="creator"] .faq-item[open]:hover{background:#3b454b}
/* The answer text has to hold its own on the lighter open surface: .58 white
   on #374046 measures 4.79:1, which clears AA for body copy. */
[data-brand="creator"] .faq-item[open] .faq-a p{color:rgba(255,255,255,.66)}

[data-brand="creator"] .faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 28px;
  list-style:none;cursor:pointer;
  font-size:17px;font-weight:500;line-height:1.45;color:var(--white);
  border-radius:20px}
[data-brand="creator"] .faq-q::-webkit-details-marker{display:none}
[data-brand="creator"] .faq-q:focus-visible{
  outline:2px solid var(--yellow-400);outline-offset:3px}

[data-brand="creator"] .faq-ico{position:relative;flex:none;width:22px;height:22px}
[data-brand="creator"] .faq-ico::before,
[data-brand="creator"] .faq-ico::after{
  content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1.5px;margin:-.75px 0 0 -7.5px;border-radius:2px;
  background:rgba(255,255,255,.5);
  transition:transform var(--m-mid) var(--e-enter),
             background var(--m-base) var(--e-standard)}
[data-brand="creator"] .faq-ico::after{transform:rotate(90deg)}
[data-brand="creator"] .faq-item:hover .faq-ico::before,
[data-brand="creator"] .faq-item:hover .faq-ico::after{background:rgba(255,255,255,.8)}
[data-brand="creator"] .faq-item[open] .faq-ico::after{transform:rotate(0)}
[data-brand="creator"] .faq-item[open] .faq-ico::before,
[data-brand="creator"] .faq-item[open] .faq-ico::after{background:var(--yellow-400)}

[data-brand="creator"] .faq-a{overflow:hidden}
[data-brand="creator"] .faq-a p{
  margin:0;padding:0 28px 26px;max-width:66ch;
  font-size:15px;line-height:1.75;color:rgba(255,255,255,.58)}

@media (max-width:639px){
  [data-brand="creator"] .faq-item{border-radius:16px}
  [data-brand="creator"] .faq-q{padding:20px;gap:16px;font-size:16px;
    border-radius:16px}
  [data-brand="creator"] .faq-a p{padding:0 20px 20px;font-size:14.5px}}

/* ============================================================================
   2.25 · PRODUCT STAGES — the rail and the app frame
   ----------------------------------------------------------------------------
   Four steps of one workflow beside one product frame. The chrome of the frame
   never changes, only the screen inside it, so the four steps read as one
   product rather than four screenshots.

   The rail doubles as the progress indicator: the yellow segment beside the
   live step fills over the dwell, which is where the auto-advance is declared.
   Order is real information here, so the track runs top to bottom.
   ========================================================================= */
[data-brand="creator"] .pstage{
  --pst-e:var(--e-enter);
  --pst-line:rgba(255,255,255,.07)}
[data-brand="creator"] .pstage-grid{display:grid;gap:var(--s10);align-items:center}
@media (min-width:1024px){
  [data-brand="creator"] .pstage-grid{
    grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:var(--s16)}}

/* ---- the rail ---- */
[data-brand="creator"] .pstage-aside{display:flex;flex-direction:column;align-items:flex-start}
[data-brand="creator"] .pstage-rail{display:flex;flex-direction:column;gap:26px}
/* The same filled pill the rest of the page uses for its asks, in brand yellow
   on the dark ground. Values match .ctaband-btn rather than importing it: that
   rule is written for a cream panel, and this one carries its own focus ring
   for the dark surround. */
[data-brand="creator"] .pstage-demo{
  margin-top:clamp(24px,2.6vw,36px);
  display:inline-flex;align-items:center;
  padding:13px 24px;border-radius:999px;border:0;
  background:var(--yellow-400);
  font-size:14px;font-weight:700;color:var(--ink);
  transition:background var(--m-quick) var(--e-standard),
             transform var(--m-quick) var(--e-enter)}
[data-brand="creator"] .pstage-demo:hover{
  background:var(--yellow-300);transform:translateY(-1px)}
[data-brand="creator"] .pstage-demo:focus-visible{
  outline:2px solid var(--yellow-400);outline-offset:3px}
[data-brand="creator"] .pstage-step{
  position:relative;display:block;width:100%;
  padding:2px 0 2px 26px;margin:0;
  border:0;background:transparent;text-align:left;cursor:pointer;
  font:inherit;color:inherit;-webkit-appearance:none}
[data-brand="creator"] .pstage-step::before,
[data-brand="creator"] .pstage-step::after{
  content:"";position:absolute;left:0;top:0;width:4px;height:100%;
  border-radius:999px}
[data-brand="creator"] .pstage-step::before{background:rgba(255,255,255,.08)}
/* The fill grows by HEIGHT, not by scaleY. A scaled rounded bar squashes its
   own caps: at 10% progress the semicircles flatten into slivers. Height keeps
   them circular at every value. It is an absolutely positioned 4px box, so the
   per-frame layout costs nothing and nothing around it reflows. */
[data-brand="creator"] .pstage-step::after{
  background:var(--yellow-400);
  height:calc(var(--prog,0) * 100%);opacity:0;
  transition:opacity var(--m-base) var(--e-standard)}
[data-brand="creator"] .pstage-step.is-active::after{opacity:1}
[data-brand="creator"] .pstage-step:focus-visible{
  outline:2px solid var(--yellow-400);outline-offset:6px;border-radius:4px}
[data-brand="creator"] .pstage-title{
  display:block;font-size:clamp(26px,2.5vw,34px);font-weight:500;line-height:1.2;
  letter-spacing:-.01em;color:rgba(255,255,255,.24);
  transition:color var(--m-mid) var(--e-standard)}
[data-brand="creator"] .pstage-copy{
  display:block;margin-top:8px;max-width:32ch;
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.18);
  transition:color var(--m-mid) var(--e-standard)}
[data-brand="creator"] .pstage-step:hover .pstage-title{color:rgba(255,255,255,.52)}
[data-brand="creator"] .pstage-step:hover .pstage-copy{color:rgba(255,255,255,.34)}
[data-brand="creator"] .pstage-step.is-active .pstage-title{color:var(--white)}
[data-brand="creator"] .pstage-step.is-active .pstage-copy{color:rgba(255,255,255,.62)}

/* ---- the card, and the screen inside it ----
   Three surfaces, each a step from its parent: the section at #192123, the
   card at --ink-900 (1.33:1 against it), the screen at #15191c (1.43:1 the
   other way). The screen being DARKER than the card is what makes it read as
   a display rather than as another panel. */
[data-brand="creator"] .pstage-shell{
  --pst-shell-pad:clamp(16px,1.8vw,26px);
  /* how far the screen runs PAST the card's padding before the card clips it */
  --pst-bleed-x:clamp(18px,2.8vw,52px);
  --pst-bleed-y:clamp(14px,2vw,38px);
  padding:var(--pst-shell-pad);
  border-radius:clamp(20px,2vw,28px);
  background:var(--ink-900);
  /* the crop itself: the screen is cut by the card's own rounded corner */
  overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}

[data-brand="creator"] .pstage-ctx{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:6px 4px clamp(16px,1.6vw,22px)}
/* Stacked in one grid cell so the card never changes height between stages,
   which would jolt the frame underneath it. */
[data-brand="creator"] .pstage-ctx-stack{display:grid;flex:1;min-width:0}
[data-brand="creator"] .pstage-ctx-item{
  grid-area:1/1;
  opacity:0;transform:translate3d(0,8px,0);pointer-events:none;
  transition:opacity var(--m-base) var(--e-standard),
             transform var(--m-slow) var(--pst-e)}
[data-brand="creator"] .pstage-ctx-item.is-active{
  opacity:1;transform:none;pointer-events:auto}
[data-brand="creator"] .pstage-ctx-item h3{
  margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:500;line-height:1.25;
  letter-spacing:-.01em;color:var(--white)}
[data-brand="creator"] .pstage-ctx-item p{
  margin:7px 0 0;max-width:62ch;
  font-size:clamp(13.5px,1.05vw,15px);line-height:1.6;
  color:rgba(255,255,255,.56)}
[data-brand="creator"] .pstage-chip{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.62)}
[data-brand="creator"] .pstage-chip i{
  width:5px;height:5px;border-radius:50%;background:var(--yellow-400)}

/* Pulled out past the card on the right and the bottom, so the screen reads as
   a window onto something larger rather than as a picture that happens to fit.
   The negative margins also take that overhang out of the card's height, so the
   card stays the size it was and only the crop moves. */
[data-brand="creator"] .pstage-frame{
  position:relative;overflow:hidden;
  margin-right:calc(-1 * (var(--pst-shell-pad) + var(--pst-bleed-x)));
  margin-bottom:calc(-1 * (var(--pst-shell-pad) + var(--pst-bleed-y)));
  border-radius:clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px) 0 0;
  background:#15191c;border:0;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,
             0 18px 40px -24px rgba(0,0,0,.9)}
[data-brand="creator"] .pstage-bar{
  display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;
  border-bottom:1px solid var(--pst-line);background:rgba(255,255,255,.025)}
[data-brand="creator"] .pstage-back{
  display:grid;place-items:center;flex:none;width:24px;height:24px;
  border-radius:50%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.6)}
[data-brand="creator"] .pstage-show{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.05);
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82)}
[data-brand="creator"] .pstage-show svg{color:rgba(255,255,255,.45)}
[data-brand="creator"] .pstage-bar-end{
  display:inline-flex;align-items:center;gap:10px;margin-left:auto}
[data-brand="creator"] .pstage-saved{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.4)}
[data-brand="creator"] .pstage-saved i{
  width:5px;height:5px;border-radius:50%;background:var(--yellow-400)}
[data-brand="creator"] .pstage-avatar{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(145deg,var(--yellow-300),#e9c22e);
  font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}

[data-brand="creator"] .pstage-body{display:grid;grid-template-columns:52px minmax(0,1fr)}
[data-brand="creator"] .pstage-nav{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 0;border-right:1px solid var(--pst-line)}
[data-brand="creator"] .pstage-nav-item{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,.05);
  transition:background var(--m-mid) var(--e-standard)}
[data-brand="creator"] .pstage-nav-item img{
  display:block;width:18px;height:18px;opacity:.5;filter:invert(1);
  transition:opacity var(--m-mid) var(--e-standard)}
[data-brand="creator"] .pstage-nav-item.is-off img{opacity:.22}
[data-brand="creator"] .pstage-nav-item.is-on{
  background:linear-gradient(145deg,var(--yellow-300) 0%,#e9c22e 100%)}
[data-brand="creator"] .pstage-nav-item.is-on img{opacity:1;filter:none}
[data-brand="creator"] .pstage-nav-sep{
  width:18px;height:1px;margin:6px 0;background:var(--pst-line)}

/* ---- the screens ---- */
[data-brand="creator"] .pstage-screens{
  position:relative;display:grid;padding:20px;
  min-height:clamp(330px,30vw,404px)}
[data-brand="creator"] .pstage-screen{
  grid-area:1/1;display:flex;flex-direction:column;gap:16px;min-width:0;
  opacity:0;transform:translate3d(0,12px,0);pointer-events:none;
  transition:opacity var(--m-mid) var(--e-standard),
             transform var(--m-slow) var(--pst-e)}
[data-brand="creator"] .pstage-screen.is-active{
  opacity:1;transform:none;pointer-events:auto}

[data-brand="creator"] .psc-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px}
[data-brand="creator"] .psc-label{
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.45)}
[data-brand="creator"] .psc-pill{
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);
  font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
[data-brand="creator"] .psc-pill.is-live,
[data-brand="creator"] .psc-pill.is-up{
  background:rgba(242,212,60,.13);color:var(--yellow-300)}

/* publish */
[data-brand="creator"] .psc-pub{display:flex;gap:16px;align-items:stretch}
[data-brand="creator"] .psc-art{
  display:grid;place-items:center;flex:none;width:88px;height:88px;
  border-radius:14px;
  background:linear-gradient(150deg,var(--yellow-300) 0%,#e0a52a 100%)}
[data-brand="creator"] .psc-fields{
  display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
[data-brand="creator"] .psc-field{
  display:block;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--pst-line)}
[data-brand="creator"] .psc-field-l{
  display:block;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.35)}
[data-brand="creator"] .psc-field-v{
  display:block;margin-top:3px;font-size:13.5px;line-height:1.45;
  color:rgba(255,255,255,.88)}
[data-brand="creator"] .psc-field-v.is-dim{font-size:12.5px;color:rgba(255,255,255,.5)}
[data-brand="creator"] .psc-chips{display:flex;flex-wrap:wrap;gap:8px}
[data-brand="creator"] .psc-chip{
  padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.05);
  font-size:11.5px;color:rgba(255,255,255,.6)}
[data-brand="creator"] .psc-wave{
  margin-top:auto;padding:12px 14px 10px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--pst-line)}
[data-brand="creator"] .psc-wave-c{display:block;width:100%;height:46px}
[data-brand="creator"] .psc-wave-meta{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:10px;color:rgba(255,255,255,.35)}

/* lists, shared by distribute and support */
[data-brand="creator"] .psc-list{
  display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
[data-brand="creator"] .psc-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  transition:background var(--m-base) var(--e-standard)}
[data-brand="creator"] .psc-row:nth-child(odd){background:rgba(255,255,255,.03)}
[data-brand="creator"] .psc-row-n{
  flex:1;min-width:0;font-size:13px;font-weight:500;color:rgba(255,255,255,.86);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-brand="creator"] .psc-row-m{
  flex:none;font-size:11.5px;color:rgba(255,255,255,.38)}
[data-brand="creator"] .psc-state{
  flex:none;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.07);font-size:10.5px;font-weight:600;
  color:rgba(255,255,255,.5)}
[data-brand="creator"] .psc-state.is-on{
  background:rgba(242,212,60,.14);color:var(--yellow-300)}
/* A destination row carries an action, not a status: Afripods cannot see what
   another platform has published, so nothing here reports one. */
[data-brand="creator"] .psc-link{
  flex:none;font-size:11.5px;font-weight:500;color:var(--yellow-300)}
[data-brand="creator"] .psc-note{
  flex:none;font-size:11.5px;color:rgba(255,255,255,.38)}
[data-brand="creator"] .psc-tag{
  flex:none;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.06);
  font-size:10.5px;color:rgba(255,255,255,.5)}
[data-brand="creator"] .psc-feed{
  display:flex;align-items:center;gap:12px;margin-top:auto;
  padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--pst-line)}
[data-brand="creator"] .psc-feed-url{
  flex:1;min-width:0;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:11.5px;color:rgba(255,255,255,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-brand="creator"] .psc-feed-btn{
  flex:none;padding:5px 12px;border-radius:999px;background:var(--yellow-400);
  font-size:11.5px;font-weight:700;color:var(--ink)}

/* measure */
[data-brand="creator"] .psc-two{
  display:grid;grid-template-columns:1.35fr 1fr;gap:18px;flex:1;min-height:0}
[data-brand="creator"] .psc-col{display:flex;flex-direction:column;gap:12px;min-width:0}
[data-brand="creator"] .psc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
[data-brand="creator"] .psc-tile{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--pst-line)}
[data-brand="creator"] .psc-tile b{
  font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--white)}
[data-brand="creator"] .psc-tile span{font-size:10.5px;color:rgba(255,255,255,.42)}
[data-brand="creator"] .psc-chart{display:block;width:100%;flex:1;min-height:96px}
[data-brand="creator"] .psc-geo{
  display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
[data-brand="creator"] .psc-geo li{
  display:grid;grid-template-columns:1fr 34px;grid-template-areas:"n v" "b b";
  gap:5px 8px;align-items:center}
[data-brand="creator"] .psc-geo span{grid-area:n;font-size:12px;color:rgba(255,255,255,.72)}
[data-brand="creator"] .psc-geo b{grid-area:v;justify-self:end;
  font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.5)}
[data-brand="creator"] .psc-geo i{
  grid-area:b;display:block;height:4px;border-radius:4px;
  background:rgba(255,255,255,.08);position:relative}
[data-brand="creator"] .psc-geo i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  border-radius:4px;background:var(--yellow-400)}

/* support */
[data-brand="creator"] .psc-search{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--pst-line);
  font-size:13px;color:rgba(255,255,255,.4)}
[data-brand="creator"] .psc-human{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding:12px 14px;border-radius:12px;
  background:rgba(242,212,60,.07);border:1px solid rgba(242,212,60,.16)}
[data-brand="creator"] .psc-human-t{font-size:13px;color:rgba(255,255,255,.8)}
[data-brand="creator"] .psc-human-b{
  flex:none;padding:6px 14px;border-radius:999px;background:var(--yellow-400);
  font-size:11.5px;font-weight:700;color:var(--ink)}

@media (max-width:1023px){
  [data-brand="creator"] .pstage-rail{gap:22px}
  [data-brand="creator"] .pstage-copy{max-width:46ch}}
@media (max-width:639px){
  [data-brand="creator"] .pstage-ctx{flex-direction:column-reverse;align-items:flex-start;gap:12px}
  [data-brand="creator"] .pstage-ctx-stack{width:100%}
  [data-brand="creator"] .pstage-body{grid-template-columns:44px minmax(0,1fr)}
  [data-brand="creator"] .pstage-nav-item{width:28px;height:28px;border-radius:8px}
  [data-brand="creator"] .pstage-nav-item img{width:15px;height:15px}
  [data-brand="creator"] .pstage-screens{padding:14px;min-height:400px}
  [data-brand="creator"] .psc-two{grid-template-columns:1fr;gap:14px}
  [data-brand="creator"] .psc-art{width:64px;height:64px}
  [data-brand="creator"] .psc-row{padding:9px 10px;gap:8px;align-items:flex-start}
  [data-brand="creator"] .psc-row-m{display:none}
  /* Let the row name wrap instead of ellipsing. At 320 the nowrap version cut
     "Apple Podcasts" to 59px and the feed URL to 40px, which reads as broken
     product UI rather than as a screenshot. */
  [data-brand="creator"] .psc-row-n{white-space:normal;overflow:visible;
    text-overflow:clip;line-height:1.35}
  [data-brand="creator"] .psc-feed{flex-wrap:wrap;gap:6px 10px}
  [data-brand="creator"] .psc-feed-url{white-space:normal;overflow-wrap:anywhere;
    overflow:visible;text-overflow:clip;flex:1 1 100%;order:3}
  [data-brand="creator"] .psc-tile b{font-size:15px}}

@media (prefers-reduced-motion:reduce){
  [data-brand="creator"] .pstage-screen{transition:opacity 1ms linear;transform:none}
  [data-brand="creator"] .pstage-step::after{transition:none}}

/* ============================================================================
   2.26 · PILL BUTTONS on a cream panel
   ----------------------------------------------------------------------------
   Shared by every light-panel call to action on this page. What is left of the
   old CTA band, whose layout rules went with the section they were written for.
   ========================================================================= */
[data-brand="creator"] .ctaband-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
[data-brand="creator"] .ctaband-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:999px;
  background:var(--yellow-400);border:1px solid transparent;
  font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;
  white-space:nowrap;
  transition:background var(--m-quick) var(--e-standard),
             border-color var(--m-quick) var(--e-standard),
             transform var(--m-quick) var(--e-enter)}
[data-brand="creator"] .ctaband-btn:hover{
  background:var(--yellow-300);transform:translateY(-1px)}
[data-brand="creator"] .ctaband-btn.is-ghost{
  background:transparent;border-color:rgba(14,17,19,.22);font-weight:600}
[data-brand="creator"] .ctaband-btn.is-ghost:hover{
  background:rgba(14,17,19,.06);border-color:rgba(14,17,19,.38)}
@media (max-width:767px){
  /* one per row rather than two cramped ones: nowrap plus a basis wider
     than half the panel forces the wrap. */
  [data-brand="creator"] .ctaband-btn{flex:1 1 60%;justify-content:center}}

/* ============================================================================
   2.27 · MONETISE — the campaign panel
   ----------------------------------------------------------------------------
   A cream panel on the dark page with the creator standing across its edge.
   The portrait is NOT a child of the panel and the panel does not clip: she is
   positioned against the wrapper, above the panel in the stack, so she can
   break past its top and right sides into the dark. That break is the whole
   composition; put her inside the panel and it becomes a card with a photo in
   it.

   The section clips at its own bounds, which is what keeps the overhang from
   widening the page.
   ========================================================================= */
[data-brand="creator"] .mon{
  --mon-photo-w:clamp(260px,36vw,420px);
  --mon-pad-block:clamp(48px,5vw,88px);
  --mon-pad:clamp(28px,4.2vw,72px);
  --mon-panel-r:clamp(18px,1.8vw,26px);
  /* Warmer and a step down from --cream (#fbfaf6), which read as plain white
     against the photograph. Not in the token set: if this off-white is meant
     to be used elsewhere it should become one. */
  --mon-panel-bg:#f3f1ec;
  /* Even on both ends. The top used to carry the room the photograph breaks up
     into; the heading and its line now sit in that space and give her most of
     it, so the padding itself is back to matching the bottom. Her clearance is
     therefore (padding + heading block) against her overhang: if the heading
     ever loses the lead line, check she still clears at the widest viewport. */
  padding-block:var(--mon-pad-block);
  overflow:hidden}

[data-brand="creator"] .mon-wrap{
  position:relative;max-width:1600px;margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px)}

[data-brand="creator"] .mon-panel{
  position:relative;z-index:1;
  display:flex;align-items:center;
  min-height:clamp(280px,24vw,400px);
  padding:var(--mon-pad);
  border-radius:var(--mon-panel-r);
  background:var(--mon-panel-bg);
  overflow:hidden}

/* The empty middle of the panel, filled with the same instrument the rest of
   the page draws: a value-noise bar field, the one the hero canvas and the
   footer equaliser use, here as a static SVG at 7% ink. It runs from behind
   her toward the copy and is masked away before it reaches the text, so it
   reads as sound coming off the headphones rather than as a graphic parked in
   the corner. No canvas and no rAF: this one never moves. */
[data-brand="creator"] .mon-panel::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:0;top:50%;transform:translateY(-50%);
  /* Twice again. The BARS are doubled, not just the box: the artwork is drawn
     at 200% width so half as many bars span the strip, each twice as wide, and
     the box grows with them so the taller peaks are not cut flat. Still capped
     against the panel's height to keep air above and below. */
  width:min(96%,1040px);height:min(clamp(300px,36vw,480px),94%);
  background:url("/site/graphics/waveform-soft.svg") right center/240% 100% no-repeat;
  opacity:.07;
  -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 88%);
  mask-image:linear-gradient(to left,#000 30%,transparent 88%)}
/* The section's heading, on the dark ground above the panel. Size, weight and
   measure come from the same utilities every other section heading uses; only
   the tracking and the space down to the panel are set here. Flush with the
   panel's left edge, not the copy inside it. */
[data-brand="creator"] .mon-label{margin:0;letter-spacing:-.018em}
[data-brand="creator"] .mon-lead{
  margin:16px 0 clamp(20px,2.4vw,32px);
  /* Two lines at 80ch, but never past the photograph: the second term is the
     room left beside her, so on a narrower viewport the text reflows to three
     lines rather than running underneath her. */
  max-width:min(80ch, calc(100% - var(--mon-photo-w) + 60px));
  font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(255,255,255,.6)}
[data-brand="creator"] .mon-copy{position:relative;z-index:1}

/* Just under half the panel, so there is real air between the last word and
   her shoulder rather than a column of text running up against her. */
[data-brand="creator"] .mon-copy{width:min(56%,640px)}

/* Two lines, broken where the meaning breaks rather than wherever the box
   happens to end: the first line is the setup, the second carries the two
   words the section is about. The size is set by the longer of the two lines
   ("Turn your podcast into", about 11 ems) against the copy column, which is
   what caps it below the 60px the brief asked for. */
[data-brand="creator"] .mon-title{
  margin:0;
  font-size:clamp(24px,2.5vw,38px);font-weight:500;line-height:1.1;
  letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
[data-brand="creator"] .mon-title b{font-weight:700}
@media (min-width:768px){
  [data-brand="creator"] .mon-title span{display:block}}
[data-brand="creator"] .mon-desc{
  margin:20px 0 0;max-width:42ch;
  font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:rgba(14,17,19,.66)}
[data-brand="creator"] .mon .ctaband-actions{margin-top:clamp(24px,2.6vw,36px)}

[data-brand="creator"] .mon-photo{
  position:absolute;z-index:2;
  right:calc(-1 * clamp(0px,1.4vw,26px));bottom:0;
  /* Her feet sit on the panel's baseline, and her head is never cut.

     --mon-photo-w is the size she WANTS; max-height is the room she actually
     has, which is the wrap (heading, lead and panel) plus the section's top
     padding, less a few pixels so she stops short of the edge rather than on
     it. When the copy is short or the window is narrow there is less room, so
     object-fit:contain scales the whole picture down inside the box and
     object-position pins what is left to the bottom right. She gets smaller
     instead of losing her head. */
  width:var(--mon-photo-w);height:auto;
  max-height:calc(100% + var(--mon-pad-block) - 10px);
  object-fit:contain;object-position:100% 100%;
  pointer-events:none}

/* Motion: the panel arrives first, then the copy in sequence on the shared
   --i stagger, and she settles up from 0.98. Nothing parallaxes. */
[data-brand="creator"] .mon-photo.reveal{
  transform:translate3d(0,18px,0) scale(.98);
  transition:opacity var(--dur-reveal) var(--ease-out-expo),
             transform var(--m-scene) var(--ease-out-expo);
  transition-delay:calc(var(--i,0) * var(--m-stagger))}
[data-brand="creator"] .mon-photo.reveal.in{transform:none}

@media (max-width:1023px){
  [data-brand="creator"] .mon{--mon-photo-w:clamp(220px,28vw,340px)}
  [data-brand="creator"] .mon-copy{width:min(60%,520px)}}

@media (max-width:767px){
  /* Stacked: copy first, then her standing on the panel's bottom edge.

     Here she is sized by HEIGHT, and the panel reserves exactly that height as
     bottom padding. Sizing her by width was the bug: a 62% wide portrait is
     330px tall on a phone, far more than the padding reserved for it, so she
     climbed over the buttons. One variable now drives both numbers, so the
     band she sits in can never be shorter than she is. */
  [data-brand="creator"] .mon{
    --mon-photo-h:clamp(230px,60vw,300px);
    --mon-photo-drop:clamp(10px,4vw,28px)}
  [data-brand="creator"] .mon-panel{
    display:block;min-height:0;
    padding-bottom:calc(var(--mon-photo-h) - var(--mon-photo-drop) + var(--s5))}
  [data-brand="creator"] .mon-copy{width:auto}
  /* full width: nothing sits beside it on this layout */
  [data-brand="creator"] .mon-lead{max-width:none}
  /* She crosses the panel's bottom edge here, the way she crosses its top edge
     on the wide layout: the break is what stops it reading as a photo in a box. */
  [data-brand="creator"] .mon-photo{
    width:auto;height:var(--mon-photo-h);max-height:none;
    right:clamp(8px,4vw,24px);
    bottom:calc(-1 * var(--mon-photo-drop))}}

/* ---------- The panel on tablets ----------
   Between the phone stack and the wide layout the panel is wide enough to hold
   a column of copy beside her but not wide enough for the desktop proportions,
   so it gets its own arrangement rather than inheriting either.

   She is sized by HEIGHT here, as on phones, because height is what the rest of
   the block has to reason about: how much of the panel she occupies, how tall
   the panel has to be, and how much room the copy has left. Her width follows
   from the source file's 600x852 and is what the copy column is kept clear of,
   so the buttons end where she begins instead of running under her. */
@media (min-width:640px) and (max-width:1023px){
  [data-brand="creator"] .mon{
    --mon-photo-h:clamp(330px,46vw,470px);
    --mon-photo-w:calc(var(--mon-photo-h) * .704);
    --mon-photo-gap:clamp(16px,3vw,36px)}
  /* Back to the wide layout's flex row, explicitly: the phone block above set
     display:block, and the panel is now taller than its copy, so the copy has
     to be centred in it rather than sitting at the top with her filling the
     space underneath. */
  [data-brand="creator"] .mon-panel{
    display:flex;align-items:center;
    padding-bottom:var(--mon-pad);
    /* Tall enough to hold her, less the amount she is allowed to break above
       the top edge. Without this the panel would be sized by the copy alone and
       she would stand in front of the heading rather than in the panel. */
    min-height:calc(var(--mon-photo-h) - clamp(10px,3vw,32px))}
  /* The only flex item, so it takes the row and the padding does the rest. */
  [data-brand="creator"] .mon-copy{
    width:auto;flex:1 1 auto;
    padding-right:calc(var(--mon-photo-w) + var(--mon-photo-gap))}
  /* The lead is on the dark ground above the panel, and she breaks up into it,
     so it stops short of her column for the same reason the buttons do. */
  [data-brand="creator"] .mon-lead{
    max-width:calc(100% - var(--mon-photo-w))}
  /* Standing ON the panel's bottom edge, not across it, and flush with its right
     edge rather than hanging past it. Both offsets are against the wrap: the
     panel is the wrap's last flow child, so bottom:0 is its bottom edge, and the
     wrap's own gutter is where its right edge falls. The two therefore track the
     card at every width in this band however the copy reflows. */
  [data-brand="creator"] .mon-photo{
    width:auto;height:var(--mon-photo-h);max-height:none;
    right:clamp(20px,4vw,64px);
    bottom:0}}

/* ---------- The panel on phones ----------
   One column, so the arrangement changes rather than just shrinking: the copy
   is centred, she is taller, and the bar field behind her moves down to meet
   her instead of floating in the empty middle of the card. */
@media (max-width:639px){
  /* Taller, and the panel's reserved band follows it: the bottom padding is
     already derived from this number, so the card grows with her and the copy
     can never end up sitting on her head. */
  [data-brand="creator"] .mon{
    --mon-photo-h:clamp(300px,80vw,420px);
    /* She stands ON the card's bottom edge here, the way she does on tablets,
       rather than crossing it. Zeroing the drop is all that takes: it is the
       one number the photo's offset, the panel's reserved band and the bar
       field's centre are all derived from, so they stay in step. */
    --mon-photo-drop:0px}
  /* Centred. On one column there is no second element for the text to align
     against, so a left edge reads as a leftover from the wide layout rather
     than a choice. The buttons already fill the row and centre their own
     labels, so only the heading and the line under it need this. */
  [data-brand="creator"] .mon-copy{text-align:center}
  [data-brand="creator"] .mon-desc{margin-inline:auto}
  /* The bar field belongs to HER, not to the card. Centred on the panel it sat
     in the empty middle, well above where she stands, so it is anchored from
     the bottom instead and tracks her however long the copy above it runs. Her
     centre is half her height up from the panel's bottom edge, less the amount
     she hangs below it; translateY(50%) puts the strip's centre on that line
     rather than its bottom. */
  [data-brand="creator"] .mon-panel::after{
    top:auto;
    bottom:calc(var(--mon-photo-h) / 2 - var(--mon-photo-drop));
    /* Mirrored. The strip is drawn anchored right and masked so it is solid at
       that end and gone at the other, which on the wide layout runs it out from
       behind her toward the copy. Here she is on the right and the empty card
       is on the left, so the same graphic put its loud end under her and its
       silence in the open space. scaleX flips the artwork and its mask together,
       because the mask is applied before the transform. */
    transform:translateY(50%) scaleX(-1);
    height:min(var(--mon-photo-h),94%)}}

/* ============================================================================
   2.28 · CREATOR STORIES — the testimonial accordion
   ----------------------------------------------------------------------------
   One rail, three layouts, one set of markup.

     >=1024px  an accordion. Cards share the row on flex-grow, and the open one
               takes --st-grow of it. The quote panel opens by flex-basis.
     640-1023  a snap carousel of split cards, the neighbours peeking.
     <640px    a snap carousel of stacked cards, portrait over quote.

   Two things keep the open/close from looking cheap. The quote panel's inner
   wrapper is a FIXED width, so the text never reflows while the panel is
   animating: only the clip moves. And the portrait is absolutely positioned
   and covers, so a card can change width without the face jumping around
   inside it.
   ========================================================================= */
[data-brand="creator"] .stories{
  --st-pad:20px; --st-gap:14px; --st-r:22px;
  --st-grow:4.2;
  --st-body:clamp(300px,32vw,520px);
  --st-e:var(--e-emphasis);
  --st-dur:var(--m-slow)}
@media (min-width:640px){[data-brand="creator"] .stories{--st-pad:32px;--st-gap:18px;--st-r:26px}}
@media (min-width:1024px){[data-brand="creator"] .stories{--st-pad:48px;--st-gap:20px}}

[data-brand="creator"] .stories-eyebrow{
  margin:0;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.45)}
/* Size, weight and measure come from the same utilities every other section
   heading on the page uses. Only the tracking is set here, because the shared
   utilities do not carry it. */
[data-brand="creator"] .stories-title{letter-spacing:-.018em}

[data-brand="creator"] .stories-rail{
  display:flex;gap:var(--st-gap);
  padding:clamp(28px,3.2vw,48px) var(--st-pad) 0}

[data-brand="creator"] .tcard{
  position:relative;display:flex;min-width:0;
  border-radius:var(--st-r);overflow:hidden;
  /* No border: the card is told apart by its surface instead.

     Measured against this section's real ground, which is the Tailwind `ink`
     token #192123 and NOT the --ink custom property: the old --ink-600 card
     came out at 0.96:1, darker than the section it sat on, so once the outline
     came off there was nothing left. --ink-900 sits at 1.33:1, which is where
     the reference this was drawn from sits. */
  background:var(--ink-900);border:0;
  transition:flex-grow var(--st-dur) var(--st-e),
             transform var(--m-mid) var(--st-e)}

[data-brand="creator"] .tcard-portrait{
  position:relative;flex:1 1 auto;min-width:0;overflow:hidden;
  background:var(--ink-700)}
[data-brand="creator"] .tcard-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;
  transition:transform var(--m-travel) var(--st-e),filter var(--m-mid) var(--e-standard)}
/* the floor the artwork sits on, and what keeps a white shirt off a white edge */
[data-brand="creator"] .tcard-portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(10,12,14,.92) 0%,rgba(10,12,14,.55) 26%,rgba(10,12,14,0) 58%)}

[data-brand="creator"] .tcard-art{
  position:absolute;z-index:2;left:50%;bottom:18px;
  width:clamp(52px,4.4vw,68px);aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:11px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.9);
  transition:transform var(--m-mid) var(--st-e),box-shadow var(--m-mid) var(--e-standard)}
[data-brand="creator"] .tcard-art img{display:block;width:100%;height:100%;object-fit:cover}

[data-brand="creator"] .tcard-body{overflow:hidden}
[data-brand="creator"] .tcard-inner{
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  height:100%;padding:clamp(24px,2.4vw,40px)}
[data-brand="creator"] .tcard-quote{
  margin:0;font-size:clamp(17px,1.5vw,22px);font-weight:400;line-height:1.5;
  letter-spacing:-.006em;color:rgba(255,255,255,.92);text-wrap:pretty}
[data-brand="creator"] .tcard-who{margin:0;display:flex;flex-direction:column;gap:3px}
[data-brand="creator"] .tcard-who b{
  font-size:15px;font-weight:600;color:var(--white)}
[data-brand="creator"] .tcard-who span{
  font-size:14px;color:rgba(255,255,255,.52)}

/* One hit area over the whole card. A <button> cannot legally wrap a
   <blockquote>, so it is laid over the top instead of around it. */
[data-brand="creator"] .tcard-hit{
  position:absolute;z-index:3;inset:0;
  border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:inherit;-webkit-appearance:none}
[data-brand="creator"] .tcard-hit:focus-visible{
  outline:2px solid var(--yellow-400);outline-offset:-4px}

@media (hover:hover){
  [data-brand="creator"] .tcard:hover{transform:translateY(-4px)}
  [data-brand="creator"] .tcard:hover .tcard-photo{
    transform:scale(1.02);filter:brightness(1.07)}
  [data-brand="creator"] .tcard:hover .tcard-art{
    transform:translateX(-50%) scale(1.07);
    box-shadow:0 14px 30px -10px rgba(0,0,0,.95)}}

/* ---- accordion ---- */
@media (min-width:1024px){
  [data-brand="creator"] .stories-rail{height:clamp(430px,40vw,560px)}
  [data-brand="creator"] .tcard{flex:1 1 0}
  [data-brand="creator"] .tcard.is-active{flex-grow:var(--st-grow)}
  [data-brand="creator"] .tcard-body{
    flex:0 0 0;
    transition:flex-basis var(--st-dur) var(--st-e),opacity var(--m-quick) linear}
  [data-brand="creator"] .tcard-inner{width:var(--st-body)}
  [data-brand="creator"] .tcard:not(.is-active) .tcard-body{opacity:0}
  [data-brand="creator"] .tcard.is-active .tcard-body{
    flex-basis:var(--st-body);opacity:1;
    transition:flex-basis var(--st-dur) var(--st-e),
               opacity var(--m-mid) linear var(--m-press)}
  [data-brand="creator"] .stories-nav{display:none}}

/* ---- carousel ---- */
@media (max-width:1023px){
  [data-brand="creator"] .stories-rail{
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--st-pad);scrollbar-width:none;
    padding-bottom:6px}
  [data-brand="creator"] .stories-rail::-webkit-scrollbar{display:none}
  [data-brand="creator"] .tcard{
    flex:0 0 min(74%,560px);scroll-snap-align:start;
    height:clamp(380px,52vw,480px)}
  [data-brand="creator"] .tcard-body{flex:0 0 54%}
  [data-brand="creator"] .tcard-inner{width:100%}
  /* the rail's right edge needs the page padding back, which padding-right on
     a scroll container does not reliably give in every engine */
  [data-brand="creator"] .stories-rail::after{
    content:"";flex:0 0 calc(var(--st-pad) - var(--st-gap))}

  [data-brand="creator"] .stories-nav{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px var(--st-pad) 0}
  [data-brand="creator"] .stories-dots{display:flex;gap:7px}
  [data-brand="creator"] .stories-dots i{
    width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
    transition:background var(--m-base) var(--e-standard),width var(--m-base) var(--st-e)}
  [data-brand="creator"] .stories-dots i.is-on{
    width:20px;border-radius:3px;background:var(--yellow-400)}
  [data-brand="creator"] .stories-count{
    font-family:var(--font-mono,ui-monospace,monospace);
    font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.4)}
  [data-brand="creator"] .stories-count b{font-weight:500;color:rgba(255,255,255,.75)}}

@media (max-width:639px){
  [data-brand="creator"] .tcard{
    flex:0 0 86%;flex-direction:column;height:auto}
  [data-brand="creator"] .tcard-portrait{flex:none;aspect-ratio:1}
  [data-brand="creator"] .tcard-photo{object-position:50% 16%}
  [data-brand="creator"] .tcard-body{flex:1 1 auto}
  [data-brand="creator"] .tcard-inner{gap:18px;padding:20px}
  [data-brand="creator"] .tcard-quote{font-size:16px;line-height:1.55}
  [data-brand="creator"] .tcard-art{width:56px;bottom:14px}}

@media (prefers-reduced-motion:reduce){
  [data-brand="creator"] .tcard,
  [data-brand="creator"] .tcard-photo,
  [data-brand="creator"] .tcard-art,
  [data-brand="creator"] .tcard-body{transition-duration:1ms}}

/* ---------------------------------------------------------------------------
   Touch target sizing. WCAG 2.2 AA asks for 24x24; these clear that already,
   but the footer link rows and the social icons sat well under the 44x44 that
   phones are actually used with. Padding only: nothing moves visually because
   the rows were already spaced by gap. */
@media (max-width:767px){
  .footer-col ul a,.footer-col ul .soon,
  .footer-legal a,.footer-legal button{
    display:inline-flex;align-items:center;min-height:44px}
  .footer-col ul{gap:0}
  .footer-social a{width:44px;height:44px}
  .footer-brand .brand{min-height:44px}
}

/* ============================================================================
   2.29 · MOTION SYSTEM — the cross-cutting rules
   ----------------------------------------------------------------------------
   Component motion lives with its component. What lives here is what no single
   component owns: how the page arrives, how a control answers a press, how the
   pointer is felt, and the one guarantee that all of it can be switched off.

   The vocabulary is the --m-* / --e-* scale defined with the design tokens.
   Nothing in the creator page should introduce a new duration or easing; if a
   move needs a rung that is not there, the scale is what changes.
   ========================================================================= */

/* ---- page transitions ----
   A cross-document view transition, so moving between pages is one continuous
   surface rather than a white flash. Opacity only: the arriving document still
   runs its own 12px rise (main's page-enter), and two slides would fight. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--m-quick) var(--e-exit) both}
::view-transition-new(root){animation:vt-in var(--m-base) var(--e-enter) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---- press ----
   Hover says "this is a control", press says "I heard you". It has to be fast
   enough to feel like a response rather than an animation, which is what
   --m-press is for, and it must cancel any hover lift so the control goes down
   under the finger rather than staying up. */
[data-brand="creator"] :is(.ctaband-btn,.pathcta,.pstage-demo,.tcard-hit,
  .pathtab,.faq-q,.pstage-step):active{
  transform:translateY(0) scale(.985);
  transition-duration:var(--m-press)}

/* ---- pointer ----
   The scene's floating cards drift against the pointer, a few pixels each and
   at different depths, so the frame reads as having space in it. Set by one
   rAF-batched handler in create.js; CSS owns the amplitude. No custom cursor:
   on a page this photographic it would compete with the work it sits on. */
[data-brand="creator"] .scene-chrome{--px:0;--py:0}
[data-brand="creator"] .scene-chrome .float-art{
  transform:translate3d(calc(var(--px) * var(--depth,8px)),
                        calc(var(--py) * var(--depth,8px)),0);
  transition:transform var(--m-slow) var(--e-standard)}
[data-brand="creator"] .float-art-audience{--depth:10px}
[data-brand="creator"] .float-art-overview{--depth:6px}

/* ---- the guarantee ----
   Every component already handles reduced motion on its own terms; this is the
   backstop for anything added later. Durations go to 1ms rather than 0 so that
   transitionend and animationend still fire and JS that waits on them is not
   left hanging. */
@media (prefers-reduced-motion:reduce){
  [data-brand="creator"] *,
  [data-brand="creator"] *::before,
  [data-brand="creator"] *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important}
  [data-brand="creator"] .scene-chrome .float-art{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html{scroll-behavior:auto}}

/* ============================================================================
   2.30 · LIGHT SURFACE — index-light.html and create-light.html
   ----------------------------------------------------------------------------
   The two marketing pages are built from Tailwind utilities with the dark
   values written into the markup, so they cannot follow the token layer the
   listener product uses. Rather than fork the markup, the light pages carry
   data-surface="light" and this block remaps those utilities. A utility class
   is one point of specificity; [data-surface="light"] .bg-ink is two, so the
   remap wins without !important and the markup stays identical between the
   two versions of a page.

   Media zones are the exception. A full-bleed video with type over it is
   fixed by the footage, not by the page, so anything inside .keep-dark holds
   the dark values. Those rules come last and carry a third point.
   ========================================================================== */
[data-surface="light"]{
  /* Three warm greys, not one. The dark pages alternate ink / cream / ink so
     the breaks between sections are visible without rules; collapsing every
     dark section onto cream would run three sections together into one pale
     slab. So the sections that were dark take the two deeper steps and the
     ones that were already cream keep it, and the rhythm survives the flip. */
  --lite-1:#fbfaf6;   /* cream: the sections that are already light */
  --lite-2:#f1eee7;   /* what bg-ink becomes */
  --lite-3:#e9e5db;   /* what bg-inkdeep becomes */
  --lite-ink:25,33,35;
}

/* ---------- grounds ---------- */
[data-surface="light"] body{background-color:var(--lite-1)}
[data-surface="light"] .bg-ink{background-color:var(--lite-2)}
[data-surface="light"] .bg-inkdeep{background-color:var(--lite-3)}
[data-surface="light"] .bg-ink\/95{background-color:rgba(251,250,246,.96)}
/* The panel inside the monetise section is #f3f1ec, which is a hair off the
   ground it would now sit on. White separates it again without changing the
   shape of anything. */
[data-surface="light"] .mon{--mon-panel-bg:#fff}

/* ---------- type ----------
   Not an alpha-for-alpha swap. White at 50% on ink still reads; ink at 50% on
   cream lands near 3.6:1, so the faint end of the scale is lifted until every
   step clears 4.5:1. The hierarchy compresses slightly, which is the right
   trade against text nobody can read. */
[data-surface="light"] .text-white,
[data-surface="light"] .fill-white{color:rgb(var(--lite-ink))}
[data-surface="light"] .fill-white{fill:rgb(var(--lite-ink))}
[data-surface="light"] .text-white\/80{color:rgba(var(--lite-ink),.78)}
[data-surface="light"] .text-white\/70{color:rgba(var(--lite-ink),.72)}
[data-surface="light"] .text-white\/60{color:rgba(var(--lite-ink),.66)}
[data-surface="light"] .text-white\/55{color:rgba(var(--lite-ink),.64)}
[data-surface="light"] .text-white\/50{color:rgba(var(--lite-ink),.62)}
[data-surface="light"] .text-white\/45{color:rgba(var(--lite-ink),.60)}
@media(hover:hover){
  [data-surface="light"] .hover\:text-white:hover{color:rgb(var(--lite-ink))}
}

/* ---------- washes and edges ---------- */
[data-surface="light"] .bg-white\/10{background-color:rgba(var(--lite-ink),.05)}
[data-surface="light"] .border-white\/10{border-color:rgba(var(--lite-ink),.10)}
@media(hover:hover){
  [data-surface="light"] .hover\:bg-white\/10:hover{background-color:rgba(var(--lite-ink),.08)}
  [data-surface="light"] .hover\:bg-white\/15:hover{background-color:rgba(var(--lite-ink),.10)}
  [data-surface="light"] .hover\:bg-white\/20:hover{background-color:rgba(var(--lite-ink),.12)}
  [data-surface="light"] .hover\:bg-white:hover{background-color:rgba(var(--lite-ink),.14)}
}

/* ---------- media zones hold the dark set ----------
   The hero footage and the pinned studio scene are lit by the picture, so type
   over them stays white whatever the page around them is doing. */
/* Only a SECTION gets the ground. The pinned studio scene is a keep-dark div
   that is transparent by design: it carries a negative top margin and z-index 20
   so it overlaps the hero, and the video inside it is what fills the box. Paint
   a background on it and that overlap becomes an opaque panel sitting on top of
   the hero's CTA, which is exactly what it did. */
[data-surface="light"] section.keep-dark,
[data-surface="light"] .keep-dark .bg-ink{background-color:var(--ink)}
[data-surface="light"] .keep-dark .text-white,
[data-surface="light"] .keep-dark .hover\:text-white:hover{color:#fff}
[data-surface="light"] .keep-dark .fill-white{fill:#fff}
[data-surface="light"] .keep-dark .text-white\/80{color:rgba(255,255,255,.8)}
[data-surface="light"] .keep-dark .text-white\/70{color:rgba(255,255,255,.7)}
[data-surface="light"] .keep-dark .text-white\/60{color:rgba(255,255,255,.6)}
[data-surface="light"] .keep-dark .text-white\/55{color:rgba(255,255,255,.55)}
[data-surface="light"] .keep-dark .text-white\/50{color:rgba(255,255,255,.5)}
[data-surface="light"] .keep-dark .text-white\/45{color:rgba(255,255,255,.45)}
[data-surface="light"] .keep-dark .bg-white\/10{background-color:rgba(255,255,255,.1)}
[data-surface="light"] .keep-dark .border-white\/10{border-color:rgba(255,255,255,.1)}
@media(hover:hover){
  [data-surface="light"] .keep-dark .hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.1)}
  [data-surface="light"] .keep-dark .hover\:bg-white\/15:hover{background-color:rgba(255,255,255,.15)}
  [data-surface="light"] .keep-dark .hover\:bg-white\/20:hover{background-color:rgba(255,255,255,.2)}
}

/* ---------- the switch between the two versions ----------
   A link, not a button: the light page is a separate document, so the control
   navigates rather than flipping an attribute the utilities would ignore. */
.surface-switch{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border-radius:9999px;color:inherit;
  background:rgba(255,255,255,.1);
  transition:background var(--dur-micro,.18s) ease}
.surface-switch svg{width:18px;height:18px}
.surface-switch .sun{display:none}
[data-surface="dark"] .surface-switch{color:rgba(255,255,255,.8)}
[data-surface="dark"] .surface-switch:hover{background:rgba(255,255,255,.18)}
[data-surface="light"] .surface-switch{color:rgba(25,33,35,.72);background:rgba(25,33,35,.06)}
[data-surface="light"] .surface-switch:hover{background:rgba(25,33,35,.1)}
[data-surface="light"] .surface-switch .sun{display:block}
[data-surface="light"] .surface-switch .moon{display:none}
[data-surface="light"] .keep-dark .surface-switch{color:rgba(255,255,255,.8);background:rgba(255,255,255,.1)}
[data-surface="light"] .keep-dark .surface-switch:hover{background:rgba(255,255,255,.18)}

/* ---------- the partner marquee on light ----------
   The logos are white-on-transparent SVGs, so they vanish on a pale ground.
   Inverting the filter turns white to ink and, for the one mark that carries
   its detail in greys, flips those with it. No second set of files to keep in
   step with the first. Opacity is retimed because ink on cream at .5 reads
   lighter than white on ink at .5. */
[data-surface="light"] .trusted-logo img{filter:invert(1);opacity:.58}
@media (hover: hover) {
  [data-surface="light"] .trusted-logo:hover img{opacity:.9}
}

/* ---------- warm accents on a pale ground ----------
   The eyebrows are set in the brand yellow, which measures 1.4:1 on cream and
   simply is not there. --yellow-700 is the readable warm value at 5:1, which is
   the same substitution --brand-text already makes for the creator scope. The
   keep-dark exception below restores the original, because inside a media zone
   the pale yellow is right. */
[data-surface="light"] .text-\[\#fff7d8\],
[data-surface="light"] .text-\[\#f2d43c\]{color:var(--yellow-700)}
[data-surface="light"] .keep-dark .text-\[\#fff7d8\]{color:#fff7d8}
[data-surface="light"] .keep-dark .text-\[\#f2d43c\]{color:#f2d43c}

/* A cream button on an ink section is the dark page's primary action. Flipped,
   cream on cream is a button nobody can see, so it takes the opposite treatment
   and becomes ink on the pale ground. Scoped to the anchor: bg-cream is also a
   section background, and that one stays exactly as it is. */
[data-surface="light"] a.bg-cream{background-color:var(--ink);color:var(--cream)}
@media (hover: hover) {
  [data-surface="light"] a.bg-cream:hover{background-color:#28353a}
}

/* The voices rail writes its captions straight into white, because on the dark
   page they sit on ink. They are below the portraits, not on them, so on light
   they take the page's own text tokens. */
[data-surface="light"] .voice-name{color:var(--text)}
[data-surface="light"] .voice-show{color:var(--text-faint)}

/* ---------- creator page components on light ----------
   These write their colours as literal whites because on the dark page they sit
   on ink. The stage rail keeps its dimming: an inactive step is meant to recede,
   so the alphas are carried across rather than raised, only inverted. */
[data-surface="light"] .mon-lead{color:var(--text-soft)}
[data-surface="light"] .stories-eyebrow{color:var(--text-faint)}
[data-surface="light"] .pstage-title{color:rgba(25,33,35,.3)}
[data-surface="light"] .pstage-copy{color:rgba(25,33,35,.24)}
[data-surface="light"] .pstage-step.is-active .pstage-title{color:var(--text)}
[data-surface="light"] .pstage-step.is-active .pstage-copy{color:rgba(25,33,35,.66)}
@media (hover: hover) {
  [data-surface="light"] .pstage-step:hover .pstage-title{color:rgba(25,33,35,.58)}
  [data-surface="light"] .pstage-step:hover .pstage-copy{color:rgba(25,33,35,.4)}
}

/* The FAQ and the testimonial cards are surfaces, not media: they are told
   apart from the section by a step in tone, and on a pale ground that step has
   to go up rather than down. Same relationship, opposite direction. */
[data-surface="light"] .faq-item{
  --faq-rest:#fdfcf9; --faq-hover:#fff; --faq-open:#fff;
  box-shadow:0 1px 2px rgba(25,33,35,.04),0 10px 26px -18px rgba(25,33,35,.22)}
[data-surface="light"] .faq-item[open]:hover{background:#fff}
[data-surface="light"] .faq-a p,
[data-surface="light"] .faq-item[open] .faq-a p{color:var(--text-soft)}

[data-surface="light"] .tcard{
  background:#fff;
  box-shadow:0 1px 2px rgba(25,33,35,.04),0 18px 40px -26px rgba(25,33,35,.28)}
[data-surface="light"] .tcard-portrait{background:var(--media-bg)}
[data-surface="light"] .tcard-quote{color:rgba(25,33,35,.9)}
[data-surface="light"] .tcard-who b{color:var(--text)}
[data-surface="light"] .tcard-who span{color:var(--text-faint)}
/* The artwork tile sits on the photograph, so its edge and its shadow are the
   one thing here that stays dark-page weight. */
[data-surface="light"] .tcard-art{border-color:rgba(255,255,255,.6)}
/* --white is a literal, not a role, so it does not follow the surface. */
[data-surface="light"] .faq-q{color:var(--text)}

/* ============================================================================
   2.31 · RESPONSIVE REPAIRS — discover, library and the policy pages
   ========================================================================== */

/* SHORT VIEWPORTS. The hero banner is sized in viewport units, so on a phone
   held sideways the slide's copy is taller than the box and the heading is
   pushed up through the navigation: measured at 844x390 the heading's top was
   -13px and it crossed the nav by 108px, leaving both unreadable. Below 480px
   of height the content sets the height instead. */
@media (max-height: 480px) {
  /* A px floor, not auto. The nav sits INSIDE the banner and .slide-body is
     absolutely positioned within it, so `auto` collapses the box to the nav's
     own height and the copy overflows further. At 390px tall the banner was
     250px: 88 for the nav leaves 162 for a slide body that needs 234, so the
     heading climbed out through the navigation. 340px holds both and the page
     scrolls, which on a landscape phone it is going to do anyway. */
  .hero-banner{ min-height:340px; }
  .slide-body{ padding-block:16px 20px; }
  .slide-body h1,.slide-body h2{ font-size:26px; }
  .dots-bar{ bottom:20px; }
}

/* TOUCH TARGETS. Everything below is padding and hit area only: no control
   changes size on a mouse-driven screen, and nothing moves. */
@media (pointer: coarse) {
  /* The carousel dots are 9px with a ::after that reaches 8px out, but the
     measured hit area was 11px: adjacent pads overlap and the later dot wins
     the hit test at its neighbour's centre. Widening the gap gives each pad
     room to claim without colliding, so the dots keep their size and spacing
     reads the same while the target grows to 33x44. */
  .dots{ gap:24px; }
  .dot::after{ inset:-17px -12px; }
  .dots-bar .dot-pause{ width:44px; height:44px; margin-left:2px; }

  /* Player: play was 38, the skips 34, close 36, the queue's drag grip 24x32
     and its remove 30x30 — the drag handle being the smallest is the wrong way
     round for the hardest gesture. */
  .player button,
  .player a{ min-width:44px; min-height:44px; }
  .q-grip,
  .q-remove{ width:44px; height:44px; }

  /* Text below the comfortable floor: card badges at 10.5px, tags and .faint.xs
     at 11px. Lifted to 12px on touch only, so the desktop density is kept. */
  .card-badge,
  .tag.brand,
  .faint.xs{ font-size:12px; }
}

/* ============================================================================
   2.32 · NAV LOGO AND SEARCH ACROSS WIDTHS
   ----------------------------------------------------------------------------
   Two nav implementations, one behaviour. The marketing pages collapse to the
   hamburger at 768, the listener product at 900, so each rule is scoped to the
   family it governs rather than picking one breakpoint for both.
   ========================================================================== */

/* THE WORDMARK. Measured on the homepage, the gap between the logo and the nav
   pills is 0px at 900, 27px at 1000 and 95px at 1100: the lock-up and the pills
   touch exactly where the row is tightest. So the word steps out for that band
   and the mark carries the brand alone, then it comes back once there is room.
   Below the collapse point the row is just logo and hamburger, so the full
   lock-up returns there too. */
@media (min-width: 768px) and (max-width: 1039px) {
  :is([data-brand="home"],[data-brand="creator"]) #navWordSvg{ display:none; }
}
/* space-between leaves no gap of its own once the two sides meet, so at the
   tightest widths the mark still sat against the first pill. A gap on the row
   guarantees the clearance and lets the group shrink into it instead. */
@media (max-width: 1039px) {
  :is([data-brand="home"],[data-brand="creator"]) nav{ gap:16px; }
  [data-brand="listener"] .site-nav{ gap:16px; }
}
@media (min-width: 900px) and (max-width: 1039px) {
  [data-brand="listener"] .brand .word{ display:none; }
}

/* THE SEARCH CONTROL stays reachable at every width. Rather than move it out of
   the group in the markup of fifteen pages, the group keeps its box below the
   collapse point and everything in it except the search widget steps out, so
   the control ends up beside the hamburger. */
@media (max-width: 767px) {
  :is([data-brand="home"],[data-brand="creator"]) nav > div:has(> .search-widget){
    display:flex; align-items:center; gap:8px;
  }
  :is([data-brand="home"],[data-brand="creator"]) nav > div:has(> .search-widget) > *:not(.search-widget){
    display:none;
  }
}
@media (max-width: 899px) {
  [data-brand="listener"] .nav-desktop{ display:flex; gap:8px; }
  [data-brand="listener"] .nav-desktop > *:not(.search-widget){ display:none; }
}

/* MOBILE NAV. The search control belongs with the menu button, not adrift
   between the two: the row is space-between with three children, so the middle
   one drifts to the centre the moment the logo gets any narrower. margin-left
   pins it to the right group. The lock-up comes down a step at the same time,
   since at 375 it was 221px of a 375px row. */
@media (max-width: 767px) {
  :is([data-brand="home"],[data-brand="creator"]) nav > div:has(> .search-widget){
    margin-left:auto;
  }
  :is([data-brand="home"],[data-brand="creator"]) #navMarkSvg{ height:28px; }
  :is([data-brand="home"],[data-brand="creator"]) #navWordSvg{ height:19px; }
}
@media (max-width: 899px) {
  [data-brand="listener"] .nav-desktop{ margin-left:auto; }
}
@media (max-width: 767px) {
  [data-brand="listener"] .brand .mark{ height:28px; }
  [data-brand="listener"] .brand .word{ height:19px; }
}

}