/* AudioTrove landing page styles — externalized from the inline <style> for reuse across the
   localized pages and to tighten the CSP (no inline style needed). Shared by every /xx/ page. */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--base);color:var(--base-on-surface);font-family:var(--font-label);
    transition:background-color .55s ease,color .55s ease;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  a{color:inherit;text-decoration:none}

  /* ---------- sticky header ---------- */
  header.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:color-mix(in srgb,var(--base) 82%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--base-outline) 55%,transparent);
    transition:background-color .55s ease,border-color .55s ease}
  .top .row{display:flex;align-items:center;gap:12px;height:60px}
  .lockup{display:inline-flex;align-items:center;gap:10px}
  .logo{width:32px;height:32px;flex:0 0 auto}
  .brand{font-family:'DM Serif Display',var(--font-headline),serif;font-size:23px;letter-spacing:.2px}
  .brand .t{color:var(--accent)}
  /* Papyrus (light): the chest mark is fixed cream/gold cut for a teal tile, and the wordmark is dark, so on the pale
     bar the whole lockup washes out. Wrap mark + wordmark in ONE brand-teal box that bleeds the full header height —
     page top down to the header's bottom line — with SQUARE corners (a rounded box would read as a button). Teal is
     the fixed brand colour (the Papyrus accent is green); the wordmark is a logotype, exempt from AA contrast. */
  [data-mode="light"] .top .lockup{align-self:stretch;background:#13929e;padding:0 16px;margin-left:-16px;gap:9px}
  [data-mode="light"] .top .lockup .brand{color:#f3e2c7}
  [data-mode="light"] .top .lockup .brand .t{color:#e99e2c}   /* "Trove" in the logo mark's gold-orange */
  /* the persistent download CTA */
  /* CTA matches the app's primary-button atom (tc-btn--primary): 90deg action gradient + label in --base (the cutout
     look, like the app's play button) + the app's --r-button radius. Kept a subtle glow as the one marketing flourish. */
  .cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-weight:600;font-size:14px;
    color:var(--base);background:linear-gradient(90deg,var(--action-bright),var(--action));border:none;border-radius:var(--r-button);
    padding:11px 18px;cursor:pointer;white-space:nowrap;margin-left:auto;
    box-shadow:0 0 18px color-mix(in srgb,var(--action) 45%,transparent);transition:filter .18s ease,box-shadow .2s ease,transform .12s ease}
  [data-mode="light"] .cta{background:var(--action)}
  .cta i{font-size:18px}
  /* hover: glow brightens + widens (still no offset), button lifts in brightness; no shadow-drop */
  .cta:hover{filter:brightness(1.06);box-shadow:0 0 30px color-mix(in srgb,var(--action) 78%,transparent)}
  /* active: presses in on tap/click, dips brightness, nudges down 1px, glow tightens */
  .cta:active{filter:brightness(.93);transform:translateY(1px);box-shadow:0 0 12px color-mix(in srgb,var(--action) 55%,transparent)}
  .cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  @media (max-width:339px){ .top .brand{display:none} }

  /* ---------- hero ---------- */
  .hero{position:relative;padding:30px 0 58px;overflow:hidden}
  .hero .glow{position:absolute;z-index:0;width:min(720px,152vw);height:min(720px,152vw);left:50%;top:-70px;
    transform:translateX(-50%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%);filter:blur(60px);opacity:.5;transition:background .55s ease}

  /* mobile-first flow: HEADLINE → player → theme picker → the rest of the copy. On desktop the headline rejoins the
     copy on the right (display:contents dissolves .rightblock on mobile so head/copy can straddle the player). */
  .hero-grid{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px}
  .rightblock{display:contents}
  .hero-head{order:-1;margin:0;text-align:center;font-family:var(--font-headline);font-weight:600;
    font-size:clamp(33px,8.6vw,50px);line-height:1.07;letter-spacing:-.4px}
  .hero-head .hl-em{color:var(--accent)}   /* the accent word is upright, not italic (principal, 2026-10-12: "too over the top") */
  .hero-head .hl2{white-space:nowrap}   /* keep "beautifully played." on one line */
  .playercol{order:0;display:flex;flex-direction:column;align-items:center;gap:20px}
  .copy{order:1;text-align:center;max-width:500px}
  .lede{font-size:16px;line-height:1.62;color:var(--base-on-surface-variant);margin:0 auto;max-width:470px}
  .trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:20px 0 0;font-size:13px;font-weight:600}
  .trust span{display:inline-flex;align-items:center;gap:5px}
  .trust i{font-size:15px}
  .trust .t1{color:var(--accent)}
  .trust .t2{color:var(--success)}
  .trust .t3{color:var(--action-bright)}
  .badges{display:flex;gap:11px;margin:24px 0 0;flex-wrap:wrap;justify-content:center}
  .store{display:inline-flex;align-items:center;gap:12px;background:var(--base-surface);border:1px solid var(--base-outline-strong);
    border-radius:14px;padding:12px;transition:transform .18s ease,border-color .18s ease}
  .store:hover{transform:translateY(-2px);border-color:var(--accent)}
  .store--soon{opacity:.6;cursor:default}
  .store--soon:hover{transform:none;border-color:var(--base-outline-strong)}
  .store i{font-size:30px}
  .store .s{display:flex;flex-direction:column;line-height:1.15;text-align:left}
  .store .s small{font-size:11px;color:var(--base-on-surface-faint);letter-spacing:.02em}
  .store .s span{font-size:17px;font-weight:600;font-family:var(--font-headline)}

  /* ---------- theme selector: self-previewing pills (each rendered in its OWN theme's colours) ---------- */
  .themepick{display:flex;flex-direction:column;align-items:center;gap:11px}
  .themepick .tl{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--base-on-surface-faint)}
  .tsw{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
  .tsw-opt{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(128,128,128,.4);cursor:pointer;padding:0;transition:transform .16s ease}
  .tsw-opt:hover{transform:scale(1.16)}
  .tsw-opt.on{outline:2px solid var(--accent);outline-offset:3px;transform:scale(1.06)}
  .t-trove   {background:#17a2b0}
  .t-midnight{background:#3a7bd5}
  .t-forest  {background:#6f9e5a}
  .t-obsidian{background:#c9b57a}
  .t-rose    {background:#d1608a}
  .t-papyrus {background:#ece0c4}

  /* ================= THE DEVICE — the real prototype Now-Playing screen ================= */
  .device{position:relative;width:300px;max-width:88vw;height:610px;flex:0 0 auto;border-radius:42px;
    background:#0c0c10;border:1px solid rgba(255,255,255,.10);padding:11px;transition:box-shadow .55s ease;
    /* theme-tinted glow (principal's value; colour follows the active theme's --action so it stays in line on switch)
       over a soft depth shadow that keeps the device floating */
    box-shadow:0 0 4px color-mix(in srgb,var(--action) 10%,transparent),
               0 0 8px color-mix(in srgb,var(--action) 20%,transparent),
               0 26px 62px -30px rgba(0,0,0,.55)}
  .screen{position:relative;height:100%;border-radius:32px;overflow:hidden;background:var(--base);
    display:flex;flex-direction:column;transition:background-color .55s ease}
  .statusbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:30px;
    padding:0 20px 0 22px;font-size:12px;font-weight:600;color:var(--base-on-surface);position:relative;z-index:2}
  .statusbar .ic{display:inline-flex;gap:5px;font-size:14px;font-weight:400}

  /* aurora: 14 screen-blended colour discs drifting horizontally — the EXACT prototype instantiation (positions /
     sizes / blurs / durations unchanged from now-playing.html); ONLY the 6 palette vars are swapped. Treasure Island =
     a COHESIVE sea-blue + gold set (its two dominant hues), not a rainbow; on-device these come from the cover's Palette. */
  :root{ --a1:#d6b25c; --a2:#1f4e77; --a3:#e8d29a; --a4:#2e6fa0; --a5:#5a97c8; --a6:#c1a05a; }
  .np-wash{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    -webkit-mask:radial-gradient(82% 34% at 50% 36%, #000 14%, transparent 100%);
            mask:radial-gradient(82% 34% at 50% 36%, #000 14%, transparent 100%)}
  .np-orbs{position:absolute;inset:0;transform:translateY(-20px) scale(.82);transform-origin:50% 38%}
  .np-wash i{position:absolute;border-radius:50%;aspect-ratio:1;background:currentColor;mix-blend-mode:screen;will-change:transform,filter;animation:hx 14s ease-in-out infinite alternate}
  @keyframes hx{from{transform:translateX(calc(-1 * var(--amp,40%))) scale(.96)}to{transform:translateX(var(--amp,40%)) scale(1.08)}}
  .device.paused .np-wash i{animation-play-state:paused}
  .np-wash .s1 {width:54%;left:0%; top:10%;color:var(--a1);opacity:.52;--amp:42%;filter:blur(12px);animation-duration:52s;animation-delay:-4s}
  .np-wash .s2 {width:64%;right:-2%;top:2%;color:var(--a2);opacity:.50;--amp:50%;filter:blur(14px);animation-duration:60s;animation-delay:-12s}
  .np-wash .s3 {width:16%;left:34%;top:40%;color:var(--a3);opacity:.90;--amp:62%;filter:blur(4px);animation-duration:26s;animation-delay:-2s}
  .np-wash .s4 {width:46%;right:4%;top:32%;color:var(--a4);opacity:.55;--amp:42%;filter:blur(11px);animation-duration:46s;animation-delay:-20s}
  .np-wash .s5 {width:10%;left:48%;top:24%;color:var(--a5);opacity:.92;--amp:72%;filter:blur(3px);animation-duration:24s;animation-delay:-3s}
  .np-wash .s6 {width:40%;left:-6%;top:34%;color:var(--a6);opacity:.50;--amp:52%;filter:blur(10px);animation-duration:42s;animation-delay:-15s}
  .np-wash .s7 {width:14%;right:4%;top:26%;color:var(--a1);opacity:.88;--amp:60%;filter:blur(5px);animation-duration:25s;animation-delay:-9s}
  .np-wash .s8 {width:58%;left:22%;top:-2%;color:var(--a4);opacity:.44;--amp:46%;filter:blur(13px);animation-duration:56s;animation-delay:-6s}
  .np-wash .s9 {width:9%; left:18%;top:30%;color:var(--a3);opacity:.92;--amp:74%;filter:blur(3px);animation-duration:23s;animation-delay:-7s}
  .np-wash .s10{width:34%;right:20%;top:16%;color:var(--a6);opacity:.64;--amp:54%;filter:blur(8px);animation-duration:36s;animation-delay:-4s}
  .np-wash .s11{width:22%;left:62%;top:34%;color:var(--a5);opacity:.82;--amp:64%;filter:blur(6px);animation-duration:30s;animation-delay:-14s}
  .np-wash .s12{width:30%;left:6%; top:42%;color:var(--a2);opacity:.66;--amp:58%;filter:blur(8px);animation-duration:34s;animation-delay:-3s}
  .np-wash .s13{width:12%;left:70%;top:14%;color:var(--a1);opacity:.90;--amp:64%;filter:blur(4px);animation-duration:24s;animation-delay:-5s}
  .np-wash .s14{width:50%;left:34%;top:24%;color:var(--a6);opacity:.48;--amp:48%;filter:blur(12px);animation-duration:48s;animation-delay:-18s}
  @media (prefers-reduced-motion:reduce){.np-wash i{animation:none}}

  /* player body — ONE centred column (the status bar sits above it). Sections are spaced with intentional margins,
     so the layout balances itself with no transform hacks. */
  .screen audio{display:none}
  .np-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 22px;position:relative;z-index:1}
  .np-cover{width:190px;height:190px;border-radius:12px;box-shadow:var(--shadow-2);flex:0 0 auto}
  .np-meta{text-align:center;margin-top:20px;text-shadow:0 1px 3px rgba(0,0,0,.62),0 0 14px rgba(0,0,0,.42)}
  [data-mode="light"] .np-meta{text-shadow:none}
  .np-title{margin:0;font-size:21px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .np-author{margin:8px 0 0;color:var(--base-on-surface-variant);font-size:13.5px}
  .np-narrator{margin:3px 0 0;color:var(--base-on-surface-faint);font-size:11.5px}
  .np-chap{display:flex;justify-content:center;align-items:center;gap:6px;margin:9px auto 0;max-width:250px;color:var(--base-on-surface-variant);font-size:12px}
  .np-chap i{flex:0 0 auto}
  .np-chap-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .np-count{margin-top:5px;color:var(--base-on-surface-faint);font-size:11.5px}
  .np-scrub{width:100%;margin-top:22px}
  .np-scrub .tc-scrubber{width:100%}
  .np-scrub .tc-scrubber:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
  .np-times{display:flex;justify-content:space-between;margin-top:1px;color:var(--base-on-surface-faint);font-size:11px;font-variant-numeric:tabular-nums}
  .np-times .left{color:var(--base-on-surface-variant)}
  .np-transport{margin-top:16px;gap:9px}
  .np-transport .tc-play{width:58px;height:58px}
  .np-transport .tc-play .tc-bars span{height:24px}
  .np-transport .tc-play .tc-tri{border-width:12px 0 12px 20px}
  .np-transport .tc-seek svg{width:27px;height:27px}
  .np-transport .tc-chapnav{width:40px;height:40px}
  .np-transport .tc-chapnav[disabled]{opacity:.28;cursor:default}   /* website plays one chapter only — chapter nav is off */

  /* ---------- feature section (scroll-reveal) ---------- */
  .sec{padding:66px 0}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .feat{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
  /* 2026-09-15: the kicker IS the section heading now (principal — it was reading as the title while
     the big sentence read as its subtitle), so .k carries the old h2's size/weight/font and the old
     sentence (now a <p class="tagline">, not a heading — keeps one clean h2 per section) sits between
     it and the body copy, clearly smaller than the heading but bigger/heavier than .sub/p. */
  .feat .k{font-family:var(--font-headline);font-weight:600;font-size:clamp(27px,6vw,38px);line-height:1.13;letter-spacing:-.3px;color:var(--accent);margin:0}
  .feat .tagline{font-family:var(--font-label);font-weight:600;font-size:17px;line-height:1.45;color:var(--base-on-surface);margin:10px 0 0}
  .feat p{font-size:15.5px;line-height:1.62;color:var(--base-on-surface-variant);margin:10px 0 0}
  /* "never lose your place" — a resume card that shows the promise (cover · chapter · scrubber at the saved spot · live save) */
  .feat .art{position:relative;border-radius:20px;overflow:hidden;padding:24px;
    background:radial-gradient(130% 120% at 12% 0%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 52%),var(--base-surface);
    border:1px solid var(--base-outline)}
  .resume-top{display:flex;align-items:center;gap:14px}
  .resume-cover{width:96px;height:96px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow-2);flex:0 0 auto}
  .resume-title{font-family:var(--font-headline);font-weight:600;font-size:18px;line-height:1.2}
  .resume-chap{font-size:13px;color:var(--base-on-surface-variant);margin-top:3px}
  .resume-bar{margin-top:22px;width:100%}
  .resume-bar .tc-thumb{width:16px;height:16px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 26%,transparent),0 0 14px color-mix(in srgb,var(--accent) 75%,transparent)}
  .resume-times{display:flex;justify-content:space-between;margin-top:7px;font-size:12px;color:var(--base-on-surface-faint);font-variant-numeric:tabular-nums}
  .resume-saved{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:13px;font-weight:600;color:var(--success);
    background:color-mix(in srgb,var(--success) 12%,transparent);border:1px solid color-mix(in srgb,var(--success) 28%,transparent);
    border-radius:var(--r-pill);padding:6px 13px}
  .resume-saved i{font-size:15px;animation:savedpulse 2.4s ease-in-out infinite}
  @keyframes savedpulse{0%,100%{opacity:1}50%{opacity:.4}}
  @media (prefers-reduced-motion:reduce){.resume-saved i{animation:none}}

  footer{border-top:1px solid var(--base-outline);padding:30px 0 40px;color:var(--base-on-surface-faint);font-size:13px}
  /* mobile: two-column grid — logo+wordmark over copyright (left), links stacked (right). Grid aligns reliably. */
  footer .frow{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;row-gap:9px}
  /* lockup spans TWO link-rows so its taller teal box doesn't inflate row 1 and throw off the link spacing;
     copy drops to row 3 (below the box), left-aligned (it otherwise inherits the hero .copy centering). */
  footer .lockup{grid-column:1;grid-row:1 / span 2}
  footer .copy{grid-column:1;grid-row:3;color:var(--base-on-surface-faint);font-size:13px;margin:0;text-align:left}
  footer .flink{grid-column:2;justify-self:end;color:var(--base-on-surface);font-size:13px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--base-on-surface) 34%,transparent);text-underline-offset:3px}
  footer .flink:nth-of-type(1){grid-row:1}
  footer .flink:nth-of-type(2){grid-row:2}
  footer .flink:nth-of-type(3){grid-row:3}
  footer .flink:hover{color:var(--accent);text-decoration-color:var(--accent)}
  footer .lockup .brand{font-size:18px;color:var(--base-on-surface)}
  footer .lockup .logo{width:26px;height:26px}
  /* Papyrus (light): same brand-teal box for the footer mark + wordmark (square corners), so the cream lockup doesn't
     wash out on the pale footer. Snug box — no full-height bleed (that was header-only). justify-self:start so the
     grid item hugs its content instead of stretching the cell. */
  [data-mode="light"] footer .lockup{background:#13929e;padding:7px 12px;gap:8px;justify-self:start}
  [data-mode="light"] footer .lockup .brand{color:#f3e2c7}
  [data-mode="light"] footer .lockup .brand .t{color:#e99e2c}   /* "Trove" in the logo mark's gold-orange */

  /* ---------- shared section bits (used by the sections below the hero) ---------- */
  .center{text-align:center}
  /* Same swap as .feat above, for every other kicker-pattern section (sources, classics, pricing, faq). */
  .sec .k{font-family:var(--font-headline);font-weight:600;font-size:clamp(27px,6vw,38px);line-height:1.13;letter-spacing:-.3px;color:var(--accent);margin:0}
  .sec .tagline{font-family:var(--font-label);font-weight:600;font-size:17px;line-height:1.45;color:var(--base-on-surface);margin:10px auto 0;max-width:560px}
  .sub{font-size:15.5px;line-height:1.62;color:var(--base-on-surface-variant);margin:8px auto 0;max-width:560px}
  .band{background:var(--base-surface)}
  .narrow{max-width:720px}

  /* sources grid */
  .srcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px}
  .srccard{background:var(--base-surface);border:1px solid var(--base-outline);border-radius:14px;padding:16px 16px 15px;display:flex;flex-direction:column;gap:5px;transition:border-color .18s ease,transform .18s ease}
  .srccard:hover{border-color:var(--accent);transform:translateY(-2px)}
  .srccard i{font-size:23px;color:var(--accent)}
  .srccard b{font-family:var(--font-headline);font-weight:600;font-size:16px;margin-top:3px}
  .srccard span{font-size:12.5px;color:var(--base-on-surface-faint);line-height:1.4}

  /* free-classics carousel (Swiper) — canonical setup per swiperjs.com/get-started: slides get an EXPLICIT width
     (required for slidesPerView:'auto'); the vendored swiper-bundle.min.css provides the flex layout. The container's
     overflow:hidden (Swiper's) clips at the PADDING box, so a bottom padding gives the covers' drop shadow room to
     render instead of being cut off; --swiper-navigation-top-offset re-centres the nav arrows on the cover. */
  .classics-swiper{margin-top:14px;padding-bottom:44px;--swiper-navigation-top-offset:75px}
  .classics-swiper .swiper-wrapper{align-items:center}
  .classics-swiper .swiper-slide{width:150px;height:150px;position:relative}
  /* faked cast shadow: a short, dark ELLIPSE pooled on the ground below the cover — NOT the cover's own shape. A
     box-shadow can't do this (it always clones the object's rounded-rect silhouette); light straight overhead drops a
     foreshortened shadow, so a radial-gradient oval is the honest ground-shadow shape. */
  .classics-swiper .swiper-slide img{width:150px;height:150px;border-radius:10px;object-fit:cover;display:block}
  .classics-swiper .swiper-slide::after{content:'';position:absolute;left:50%;top:calc(100% - 1px);transform:translateX(-50%);
    width:97%;height:17px;background:rgba(0,0,0,.3);border-radius:20px;filter:blur(8px);pointer-events:none}
  /* nav arrows as solid circular buttons so they contrast against the cover art (flat glyphs vanished into the gold) */
  .classics-swiper .swiper-button-prev,.classics-swiper .swiper-button-next{
    width:42px;height:42px;border-radius:50%;background:var(--base-elevated);
    border:1px solid var(--base-outline-strong);box-shadow:0 6px 18px rgba(0,0,0,.45);
    color:var(--base-on-surface);--swiper-navigation-size:16px;
    transition:background .18s ease,color .18s ease,transform .18s ease,opacity .18s ease}
  .classics-swiper .swiper-button-prev:hover,.classics-swiper .swiper-button-next:hover{background:var(--accent);color:var(--base);transform:scale(1.07)}
  .classics-swiper .swiper-button-prev::after,.classics-swiper .swiper-button-next::after{font-weight:800}
  .classics-swiper .swiper-button-disabled{opacity:0;pointer-events:none}   /* hide the arrow you can't use (start/end) */
  @media (max-width:640px){ .classics-swiper .swiper-button-prev,.classics-swiper .swiper-button-next{display:none} }

  /* pricing — two one-time tiers */
  .tiers{display:grid;grid-template-columns:1fr;gap:14px;margin:28px auto 0;max-width:660px;text-align:left}
  @media (min-width:600px){ .tiers{grid-template-columns:1fr 1fr} }
  .tier{position:relative;background:var(--base-surface);border:1px solid var(--base-outline);border-radius:18px;padding:24px 22px}
  .tier--pro{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
  .tier-name{font-family:var(--font-headline);font-weight:600;font-size:19px;color:var(--accent)}
  .tier-price{font-family:var(--font-headline);font-weight:600;font-size:33px;margin-top:2px}
  .tier-price span{font-family:var(--font-label);font-size:14px;font-weight:500;color:var(--base-on-surface-faint)}
  .tier-for{font-size:13px;color:var(--base-on-surface-variant);margin-top:4px;min-height:2.6em}
  .tier .plist{margin:18px 0 0}
  .tier .plist li{font-size:14px}
  .tier-note{font-size:12px;color:var(--base-on-surface-faint);margin-top:16px}
  .plist{list-style:none;padding:0;margin:0;text-align:left;display:flex;flex-direction:column;gap:11px}
  .plist li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--base-on-surface)}
  .plist li i{color:var(--success);font-size:19px;flex:0 0 auto;margin-top:1px}
  .cta-lg{justify-content:center;font-size:16px;padding:14px 26px}
  .pricing-cta{width:100%;max-width:300px;margin:26px auto 0}
  .floor{font-size:12.5px;color:var(--base-on-surface-faint);margin:22px auto 0;max-width:560px;line-height:1.55}

  /* faq (native accordion) */
  .faq{margin-top:26px;display:flex;flex-direction:column;gap:10px;text-align:left}
  .faq details{background:var(--base-surface);border:1px solid var(--base-outline);border-radius:12px;overflow:hidden}
  .faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary i{color:var(--base-on-surface-faint);flex:0 0 auto;transition:transform .2s ease}
  .faq details[open] summary i{transform:rotate(180deg)}
  .faq p{margin:0;padding:0 18px 16px;font-size:14px;line-height:1.6;color:var(--base-on-surface-variant)}
  .faq a{color:var(--action-bright)}

  /* final CTA (kept centered on every width) */
  .finalcta{text-align:center}
  .finalcta .sub,.finalcta .badges,.finalcta .trust{margin-left:auto;margin-right:auto;justify-content:center}
  .finalcta .badges{margin-top:26px}

  /* ---------- desktop: player LEFT, headline+copy RIGHT ---------- */
  @media (min-width:880px){
    .srcgrid{grid-template-columns:repeat(3,1fr)}
    .hero{padding:54px 0 88px}
    .hero-grid{flex-direction:row;align-items:center;justify-content:center;gap:60px}
    .rightblock{display:flex;flex-direction:column;align-items:flex-start;max-width:540px}
    .hero-head{order:0;text-align:left;font-size:clamp(38px,4.1vw,52px)}
    .copy{order:0;text-align:left;max-width:none;margin-top:22px}
    .lede{margin-left:0;margin-right:0}
    .trust,.badges{justify-content:flex-start}
    .feat{grid-template-columns:1fr 1fr;gap:48px}
    /* desktop: one spread row — all five items in row 1, centre-aligned, distributed full-width */
    footer .frow{grid-template-columns:repeat(5,auto);justify-content:space-between;row-gap:0}
    footer .lockup{grid-column:1;grid-row:1}
    footer .copy{grid-column:2;grid-row:1}
    footer .flink:nth-of-type(1){grid-column:3;grid-row:1}
    footer .flink:nth-of-type(2){grid-column:4;grid-row:1}
    footer .flink:nth-of-type(3){grid-column:5;grid-row:1}
    footer .flink{justify-self:auto}
  }

  /* ---------- language switcher (header): a native <details> menu of the 11 launch languages ---------- */
  .langpick{position:relative;margin-left:auto;font-family:var(--font-label)}
  .langpick>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    padding:8px 11px;border-radius:var(--r-button);border:1px solid var(--base-outline-strong);
    background:var(--base-surface);color:var(--base-on-surface);font-size:13px;font-weight:600;
    transition:border-color .18s ease,background .18s ease}
  .langpick>summary::-webkit-details-marker{display:none}
  .langpick>summary::marker{content:''}
  .langpick>summary:hover{border-color:var(--accent)}
  .langpick>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .langpick .lp-globe{font-size:17px;color:var(--base-on-surface-variant)}
  .langpick .lp-caret{font-size:15px;color:var(--base-on-surface-faint);transition:transform .2s ease}
  .langpick[open] .lp-caret{transform:rotate(180deg)}
  .langpick .lp-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:196px;
    background:var(--base-elevated);border:1px solid var(--base-outline-strong);border-radius:14px;
    padding:6px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);display:grid;gap:1px;
    max-height:min(72vh,460px);overflow:auto}
  .langpick .lp-menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:9px 12px;border-radius:9px;font-size:14px;color:var(--base-on-surface);white-space:nowrap}
  .langpick .lp-menu a:hover{background:var(--base-surface)}
  .langpick .lp-menu a.on{color:var(--accent);font-weight:600}
  .langpick .lp-menu a.on .lp-code::after{content:'\2009\2713'}   /* check on the active language */
  .langpick .lp-code{color:var(--base-on-surface-faint);font-size:11px;font-weight:700;letter-spacing:.05em}
  .langpick .lp-menu a.on .lp-code{color:var(--accent)}
  @media (max-width:379px){ .langpick .lp-cur{display:none} }   /* tighten on very narrow screens */

  /* ---------- not-found page (/404.html and /<lang>/404.html) ---------- */
  body.nf-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
  .hero.nf{flex:1 0 auto;display:flex;align-items:center;padding:64px 0 80px}
  .nf .wrap{position:relative;z-index:1;width:100%}
  .nf .hero-head{text-align:center}   /* the hero headline goes left-aligned at >=880px; the 404 stays centred */
  .nf .sub{margin-top:16px}
  .nf-actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:30px}
  .nf-actions .cta{margin-left:0;white-space:normal;text-align:center;max-width:100%}   /* .cta pushes right and never wraps (built for the header) */
  .nf-link{display:inline-flex;align-items:center;min-height:48px;padding:0 10px;font-size:14px;color:var(--base-on-surface);
    text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--base-on-surface) 34%,transparent);text-underline-offset:3px}
  .nf-link:hover{color:var(--accent);text-decoration-color:var(--accent)}
  .nf-page .top .lockup:focus-visible,.nf-link:focus-visible,.nf-page footer .flink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
  @media (min-width:880px){
    .hero.nf{padding:88px 0 112px}
    .nf-page footer .frow{grid-template-columns:repeat(4,auto)}   /* this footer has 2 links, not 3 */
  }