/* AdRefresh landing v28 — page stylesheet (PAGE agent).
   Tokens (§4) first; hero.css consumes them and defines none. Dark-only. */

:root{
  color-scheme: dark;
  /* surfaces */
  --ink-0:#03050A;            /* page background — the hero shader's base color MUST equal this */
  --ink-1:#070B14;            /* alternate bands, footer */
  --ink-2:#0C1322;            /* raised cards */
  --ink-3:#131C2F;            /* inputs, hover fills */
  --line:rgba(150,180,255,.12);
  --line-2:rgba(150,180,255,.24);
  /* text (contrast on --ink-0) */
  --text-1:#EEF3FF;           /* 18:1 headings/body-strong */
  --text-2:#A9B6CE;           /* 10:1 body */
  --text-3:#7C8BA8;           /* 5.9:1 labels/meta (≥5.4:1 on --ink-2) */
  /* brand & action */
  --blue:#2E84ED;             /* brand: logo, glows, links-hover, focus accents */
  --blue-hi:#5AA2FF;          /* brand on dark text/links */
  --blue-deep:#1A64D2;        /* pressed */
  --action:#2373E2;           /* primary fill; white text 4.55:1 */
  --action-grad:linear-gradient(180deg,#2E7EEA 0%,#2373E2 30%,#1A64D2 100%); /* white label ≥ 4.54:1 over its band */
  --cyan:#7CE7FF;             /* live / refresh / focus */
  --ember:#FF7A45;            /* burn-out / fatigue */
  /* uniqueness bands (scores ONLY) */
  --u-red:#FF5D5D; --u-amber:#FFC247; --u-green:#3DDC97;
  /* states */
  --danger:#FF6B6B; --success:#3DDC97; --focus:#7CE7FF;
  /* glass & elevation */
  --glass-bg:rgba(8,13,24,.62);
  --glass-filter:blur(16px) saturate(140%);
  --edge:inset 0 0 0 1px var(--line);
  --edge-2:inset 0 0 0 1px var(--line-2);
  --lift:0 24px 60px -28px rgba(0,0,0,.7);
  --membrane:0 0 0 1px rgba(200,225,255,.55),0 0 34px rgba(46,132,237,.45),inset 0 0 18px rgba(120,190,255,.40);
  --glow-action:inset 0 1px 0 rgba(255,255,255,.22),0 10px 30px -10px rgba(46,132,237,.65),0 0 0 6px rgba(46,132,237,.12);
  --glow-action-hover:inset 0 1px 0 rgba(255,255,255,.26),0 14px 36px -10px rgba(46,132,237,.75),0 0 0 8px rgba(46,132,237,.14);
  /* safe-zone bracket corners (the hero frame motif), as background layers */
  --brackets:
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) left top/14px 1px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) left top/1px 14px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) right top/14px 1px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) right top/1px 14px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) left bottom/14px 1px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) left bottom/1px 14px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) right bottom/14px 1px no-repeat,
    linear-gradient(rgba(160,195,255,.36),rgba(160,195,255,.36)) right bottom/1px 14px no-repeat;
  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  /* spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:120px;
  --gutter:16px;              /* 24px ≥600, 40px ≥900, 72px ≥1280 (set in media queries) */
  --maxw:1296px;
  --section-y:clamp(72px, 9vw, 120px);
  --nav-h:56px;               /* 64px ≥900 */
  /* type */
  --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display:clamp(40px, calc(4.6vw + 6px), 80px);  /* lh .96, wght 600, tracking -.045em */
  --fs-h2:clamp(30px, calc(3vw + 8px), 52px);         /* lh 1.02, 600, -.035em */
  --fs-h3:clamp(19px, calc(.6vw + 14px), 24px);       /* lh 1.2, 600, -.015em */
  --fs-lede:clamp(16px, calc(.3vw + 14px), 18px);     /* lh 1.55, 400 */
  --fs-body:16px;                                     /* lh 1.6 (15px <600) */
  --fs-small:14px;                                    /* lh 1.5 */
  --fs-label:11.5px;                                  /* mono 500 UPPERCASE .09em (10.5px <600) */
  --fs-data:12.5px;                                   /* mono 500, tabular-nums */
  --fs-price:clamp(44px, 4vw, 64px);                  /* sans 600, -.04em, tabular-nums */
  /* motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-split:cubic-bezier(.7,0,.2,1);
  --dur-1:160ms; --dur-2:320ms; --dur-3:640ms; --dur-4:1100ms;
  /* layers */
  --z-nav:1000; --z-thumb:900; --z-menu:1100;
}
@media (max-width:599px){ :root{ --fs-body:15px; --fs-label:10.5px; } }
@media (min-width:600px){ :root{ --gutter:24px; } }
@media (min-width:900px){ :root{ --gutter:40px; --nav-h:64px; } }
@media (min-width:1280px){ :root{ --gutter:72px; } }

/* ───────────────────────── base ───────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px);
  /* the bottom edge has fixed chrome too: the phone "Get started" bar (.thumb-cta, 16 px + safe area + 54 px, < 900 px)
     and the shared "Ask AI" launcher (16–22 px + 54 px, every width). Reserve the taller of the two plus a 16 px gap, so
     focus scrolling (Tab, scrollIntoView, find-in-page) never parks a control under them (WCAG 2.4.11 / 2.4.12).
     The desktop hero HUD already sits 94 px above the fold, so the sticky stage never scrolls on focus. */
  scroll-padding-bottom:calc(max(76px, 70px + env(safe-area-inset-bottom)) + 16px);
  background:var(--ink-0);
}
/* smooth only after load: a deep link (/#support from an inner page) jumps instead of animating through the hero */
@media (prefers-reduced-motion:no-preference){ html.smooth-ready{ scroll-behavior:smooth; } }
body{
  margin:0; min-height:100vh;
  background:var(--ink-0); color:var(--text-2);
  font:400 var(--fs-body)/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.menu-open{ overflow:hidden; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,fieldset{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ -webkit-tap-highlight-color:transparent; }
strong,b{ font-weight:600; }
::selection{ background:rgba(46,132,237,.38); color:#fff; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:inherit; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip-link{
  position:fixed; left:16px; top:-80px; z-index:1200;
  padding:12px 18px; border-radius:12px; background:var(--action); color:#fff; font-weight:600;
  transition:top var(--dur-1) var(--ease-out);
}
.skip-link:focus{ top:12px; }
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ───────────────────────── primitives ───────────────────────── */
.mono-label,.eyebrow,.chip,.press__label,.also__label,.included__title,.site-footer__label,.social__label,.level__label,.contact__k,.field__label{
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-label); line-height:1.2;
  letter-spacing:.09em; text-transform:uppercase;
}
.btn{
  --h:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h); padding:0 24px; border:0; border-radius:var(--r-pill);
  font:600 15.5px/1 var(--font-sans); letter-spacing:-.01em; white-space:nowrap;
  cursor:pointer; text-decoration:none; user-select:none;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
}
@media (max-width:599px){ .btn{ --h:48px; } }
.btn--primary{ color:#fff; background:var(--action-grad); box-shadow:var(--glow-action); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:var(--glow-action-hover); }
.btn--primary:active{ transform:none; background:var(--blue-deep); }
.btn--ghost{ color:var(--text-1); background:rgba(255,255,255,.04); box-shadow:var(--edge-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.btn--sm{ --h:40px; padding:0 16px; font-size:14px; }
.btn--block{ display:flex; width:100%; }
.btn[disabled], .btn[aria-disabled="true"]{ cursor:progress; opacity:.72; transform:none; }
.btn__arrow{ display:inline-block; transition:transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.btn__meta{ font:500 12.5px/1 var(--font-mono); color:var(--text-3); letter-spacing:0; }
.link-btn{
  display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; background:none; cursor:pointer;
  font:500 12px/1.3 var(--font-mono); color:var(--text-2);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:color var(--dur-1), text-decoration-color var(--dur-1);
}
.link-btn:hover{ color:var(--text-1); text-decoration-color:var(--line-2); }
.link-btn__play{ font-size:9px; color:var(--cyan); }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--r-pill);
  box-shadow:var(--edge); color:var(--text-2); white-space:nowrap;
}
.chip--cyan{ color:var(--cyan); background:rgba(124,231,255,.07); box-shadow:inset 0 0 0 1px rgba(124,231,255,.32); }
.arrow-link{
  display:inline; color:var(--blue-hi); font-weight:500;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px;
  transition:color var(--dur-1), text-decoration-color var(--dur-1);
}
.arrow-link:hover{ color:var(--text-1); text-decoration-color:var(--line-2); }
.arrow-link .arr{ display:inline-block; margin-left:4px; transition:transform var(--dur-2) var(--ease-out); }
.arrow-link:hover .arr{ transform:translateX(3px); }
.band{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; vertical-align:middle; }
.band--r{ background:var(--u-red); box-shadow:0 0 8px rgba(255,93,93,.55); }
.band--a{ background:var(--u-amber); box-shadow:0 0 8px rgba(255,194,71,.5); }
.band--g{ background:var(--u-green); box-shadow:0 0 8px rgba(61,220,151,.5); }
.band--off{ background:var(--line-2); }

/* ───────────────────────── nav ───────────────────────── */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); height:var(--nav-h);
  transition:background-color var(--dur-2), box-shadow var(--dur-2);
}
.site-nav.is-scrolled{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow:inset 0 -1px 0 var(--line);
}
.site-nav__inner{
  display:flex; align-items:center; gap:24px; height:100%;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--text-1); font:600 18px/1 var(--font-sans); letter-spacing:-.025em; border-radius:8px; }
.brand__mark{ height:26px; width:auto; fill:var(--blue); flex:none; }
.site-nav__links{ display:none; }
.site-nav__actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.site-nav__secondary{ display:none; }
.nav-toggle{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 11px;
  border:0; border-radius:var(--r-pill); background:rgba(255,255,255,.04); box-shadow:var(--edge-2);
  color:var(--text-1); font:500 14px/1 var(--font-sans); cursor:pointer;
}
.nav-toggle:hover{ box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.nav-toggle__icon{ width:18px; height:18px; }
html.no-js .nav-toggle{ display:none; }
@media (max-width:359px){ .nav-toggle{ padding:0 11px; } .nav-toggle__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } }
@media (min-width:1080px){
  .site-nav__links{ display:flex; align-items:center; gap:clamp(18px, 2vw, 30px); margin-inline:auto; }
  .site-nav__links a{ position:relative; padding:8px 0; font:500 14.5px/1 var(--font-sans); color:var(--text-2); transition:color var(--dur-1); border-radius:4px; }
  .site-nav__links a:hover{ color:var(--text-1); }
  .site-nav__actions{ margin-left:0; }
  .site-nav__secondary{ display:inline-flex; }
  .nav-toggle{ display:none; }
}

/* mobile menu (sheet) */
.menu-scrim{
  position:fixed; inset:0; z-index:1099; background:rgba(3,5,10,.62);
  opacity:0; visibility:hidden; transition:opacity var(--dur-2), visibility 0s var(--dur-2);
}
.menu-scrim.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-2); }
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-menu);
  width:min(380px, 88vw); display:flex; flex-direction:column;
  padding:0 20px calc(24px + env(safe-area-inset-bottom));
  background:rgba(8,13,24,.86);
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow:inset 1px 0 0 var(--line), -40px 0 80px -24px rgba(0,0,0,.65);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(102%); visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out), visibility 0s var(--dur-3);
}
.mobile-menu.is-open{ transform:none; visibility:visible; transition:transform var(--dur-3) var(--ease-out); }
.mobile-menu__head{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); flex:none; }
.mobile-menu__close{
  width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.04); box-shadow:var(--edge-2); color:var(--text-1); cursor:pointer;
}
.mobile-menu__close svg{ width:18px; height:18px; }
.mobile-menu__list{ margin-top:12px; border-top:1px solid var(--line); }
.mobile-menu__list li{ border-bottom:1px solid var(--line); }
.mobile-menu__list a{
  display:flex; align-items:center; gap:16px; min-height:52px; padding:4px 4px;
  font:500 19px/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--text-1);
}
.mobile-menu__list a:hover{ color:var(--blue-hi); }
.mm-idx{ width:22px; font:500 11px/1 var(--font-mono); color:var(--text-3); letter-spacing:.06em; }
.mobile-menu__auth{ display:grid; gap:10px; margin-top:24px; }
.mobile-menu__plain{ display:flex; align-items:center; min-height:48px; padding:0 4px; color:var(--text-1); font-weight:500; }
.mobile-menu__foot{ margin-top:auto; padding-top:28px; text-wrap:balance; font:500 11px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }

/* ───────────────────────── hero ───────────────────────── */
.hero{ position:relative; --hero-p:0; background:var(--ink-0); }
.hero__stage{
  position:relative; isolation:isolate; overflow:clip;
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 20px) var(--gutter) 32px;
}
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 45% at 50% 70%, rgba(46,132,237,.16), transparent 70%),
    radial-gradient(circle, rgba(115,150,240,.10) 1px, transparent 1.5px) 0 0/28px 28px,
    var(--ink-0);
}
.hero-canvas{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block;
  touch-action:pan-y; opacity:0; transition:opacity 400ms var(--ease-out);
}
.hero-tags{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-scene{
  position:relative; z-index:1; order:3; flex:none;
  height:clamp(300px, 56svh, 520px); min-width:0;
  container-type:size;
}
.hero-poster{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--blue);
  background:radial-gradient(closest-side, rgba(46,132,237,.20), transparent 75%);
  transition:opacity 400ms var(--ease-out) 400ms;
}
.hero-poster__mark{
  width:auto; height:18vh; height:min(22cqh, 160px);
  filter:drop-shadow(0 0 28px rgba(46,132,237,.55));
  animation:ar-heartbeat .6s var(--ease-out) .15s 1 both;
}
@keyframes ar-heartbeat{ 0%{transform:scale(1)} 18%{transform:scale(1.06)} 36%{transform:scale(1)} 56%{transform:scale(1.06)} 78%,100%{transform:scale(1)} }

.hero-frame{
  position:relative; z-index:3; order:2; pointer-events:none;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px;
  margin-top:36px; padding-bottom:10px;
  font:500 10px/1.2 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.hero-frame__src::before{ content:""; display:inline-block; width:5px; height:5px; margin:0 8px 1px 0; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); vertical-align:middle; }

.hero-copy{ position:relative; z-index:4; order:1; }
.hero-copy__eyebrow{
  display:inline-block; max-width:100%; padding:7px 13px 7px 10px; border-radius:var(--r-pill);
  background:rgba(10,18,34,.62); box-shadow:var(--edge-2);
  font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-2);
}
.eb-dot{
  display:inline-block; width:7px; height:7px; margin:0 9px 1px 0; vertical-align:middle; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(124,231,255,.14), 0 0 10px rgba(124,231,255,.8);
}
.eb-long{ color:var(--text-1); }
.eb-short{ display:none; color:var(--text-1); }
@media (max-width:599px){ .eb-long{ display:none; } .eb-short{ display:inline; } }
@media (min-width:900px) and (max-width:1179px){ .hero-copy__eyebrow{ white-space:nowrap; font-size:10.5px; letter-spacing:.055em; padding-inline:9px 11px; } }
.hero-copy__title{
  margin-top:18px;
  font:600 var(--fs-display)/.96 var(--font-sans); letter-spacing:-.045em; color:var(--text-1);
}
.hero-copy__title > span{ display:block; }
@media (max-width:599px){ .hero-copy__title{ font-size:clamp(40px, 11.2vw, 54px); } }
@media (min-width:600px) and (max-width:899px){ .hero-copy__title{ font-size:clamp(48px, 8vw, 68px); } .hero-copy__sub{ font-size:var(--fs-lede); } }
.accent{
  position:relative; display:inline-block; font-style:normal;
  padding:.06em .05em .16em 0; margin:-.06em -.05em -.16em 0;
  background:linear-gradient(90deg, var(--blue-hi), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.accent::before,.accent::after{
  content:attr(data-echo) / ""; position:absolute; left:0; top:0;
  padding:inherit; pointer-events:none; opacity:0;
  -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(124,231,255,.6);
}
.accent.is-echo::before{ animation:ar-echo-up var(--dur-4) var(--ease-split) both; }
.accent.is-echo::after{ animation:ar-echo-down var(--dur-4) var(--ease-split) both; }
@keyframes ar-echo-up{ 0%{opacity:0; transform:none} 28%{opacity:.75; transform:translateY(-.06em)} 100%{opacity:0; transform:translateY(-.18em)} }
@keyframes ar-echo-down{ 0%{opacity:0; transform:none} 28%{opacity:.75; transform:translateY(.06em)} 100%{opacity:0; transform:translateY(.18em)} }
.hero-copy__sub{ margin-top:16px; max-width:36em; font-size:15px; line-height:1.5; color:var(--text-2); text-wrap:pretty; }
.hero-copy__ctas{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:22px; }
.hero-copy__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px;
  /* separators belong to the item after them and sit in the gap; the 6px padding keeps focus rings,
     overflow clips the separator of whichever item starts a line (no leading or trailing "·" on wrap) */
  margin:12px -6px -6px; padding:6px; overflow:hidden;
  font:500 12px/1.3 var(--font-mono); color:var(--text-3);
}
.hero-copy__meta > *{ position:relative; white-space:nowrap; }
.hero-copy__meta > :not(:first-child)::before{
  content:"·"; content:"·" / ""; position:absolute; left:-14.5px; top:50%; transform:translateY(-50%);
  color:rgba(124,139,168,.55); pointer-events:none;
}
.hero-copy__meta > .meta-sep{ display:none; }
.meta-sep{ color:rgba(124,139,168,.55); }
html.no-js .js-demo-open, html.no-js .js-demo-sep{ display:none; }

.hero-hud{ position:relative; z-index:4; order:4; display:flex; flex-direction:column; gap:10px; min-width:0; margin-top:16px; }
.hero-hud__event{
  display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font:500 var(--fs-data)/1.4 var(--font-mono); color:var(--text-2);
  transition:color var(--dur-2);
}
.hero-hud__event::before{
  content:""; display:inline-block; width:6px; height:6px; margin:0 9px 1px 1px; border-radius:50%;
  background:currentColor; box-shadow:0 0 8px currentColor; vertical-align:middle;
}
.hero-hud__event[data-tone="neutral"]{ color:var(--text-2); }
.hero-hud__event[data-tone="neutral"]::before{ background:var(--blue-hi); box-shadow:0 0 8px var(--blue); }
.hero-hud__event[data-tone="ember"]{ color:var(--ember); }
.hero-hud__event[data-tone="cyan"]{ color:var(--cyan); }
.hero-hud__event[data-tone="green"]{ color:var(--u-green); }
.hero-hud__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; min-width:0;
  padding:8px; border-radius:20px;
  background:linear-gradient(180deg, rgba(12,19,34,.82), rgba(7,11,20,.82));
  box-shadow:var(--edge), var(--lift);
}
.hero-levels{
  display:flex; flex:1 1 100%; gap:2px; min-width:0; min-inline-size:0; max-width:100%;
  margin:0; padding:4px; border:0; border-radius:var(--r-pill);
  background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow:var(--edge);
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  /* edge fades are 14px / 22px; scroll-padding matches them so snapping and landing.js's "reveal the focused
     chip" stop with the chip clear of the fade. landing.js drops the fade on an edge with nothing more to
     scroll (data-at-start / data-at-end), so the first and last chips are never dimmed at the row's ends. */
  --fade-l:14px; --fade-r:22px;
  scroll-padding-inline:14px 22px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.hero-levels[data-at-start]{ --fade-l:0px; }
.hero-levels[data-at-end]{ --fade-r:0px; }
.hero-levels::-webkit-scrollbar{ display:none; }
.hero-levels label{ position:relative; flex:none; scroll-snap-align:start; cursor:pointer; border-radius:var(--r-pill); }
.hero-levels input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.hero-levels span{
  display:flex; align-items:center; height:34px; padding:0 11px; border-radius:var(--r-pill);
  font:500 var(--fs-label)/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
  transition:background-color var(--dur-1), box-shadow var(--dur-1), color var(--dur-1);
}
.hero-levels label:hover span{ color:var(--text-1); }
.hero-levels input:checked + span{ background:rgba(46,132,237,.22); box-shadow:inset 0 0 0 1px rgba(90,162,255,.6); color:var(--text-1); }
.hero-levels input:focus-visible + span{ outline:2px solid var(--focus); outline-offset:-2px; }
.hero-levels .rec{ align-self:flex-start; margin:9px 0 0 4px; font-size:7.5px; line-height:1; letter-spacing:.08em; color:var(--cyan); }
.hero-hud__stats{ display:flex; align-items:flex-end; gap:14px 18px; min-width:0; margin:0; padding:2px 6px; }
.hero-hud__stats > div{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.hero-hud__stats dt{ font:500 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; }
.hero-hud__stats dd{
  display:flex; align-items:flex-end; gap:6px; margin:0; white-space:nowrap;
  font:500 var(--fs-data)/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-1);
}
.hero-hist{ display:inline-flex; align-items:flex-end; gap:2px; height:22px; margin:-9.5px 0 0 4px; }
.hero-hist i{
  display:block; width:4px; height:calc(var(--h, .2) * 22px); border-radius:1px; background:var(--line-2);
  transition:height var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.hero-hist i.is-red{ background:var(--u-red); }
.hero-hist i.is-amber{ background:var(--u-amber); }
.hero-hist i.is-green{ background:var(--u-green); }
.hero-hist i.is-empty{ height:calc(.15 * 22px); background:var(--line-2); }
.hero-hud__actions{ display:flex; gap:6px; margin-left:auto; }
.hud-btn{
  display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.04); box-shadow:var(--edge-2); color:var(--text-1); cursor:pointer;
  transition:box-shadow var(--dur-1), background-color var(--dur-1);
}
.hud-btn:hover{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.hud-btn svg{ width:16px; height:16px; }
.hud-btn .hud-ico-play{ display:none; }
.hud-btn[aria-pressed="true"] .hud-ico-pause{ display:none; }
.hud-btn[aria-pressed="true"] .hud-ico-play{ display:inline; }
.hud-btn[aria-pressed="true"]{ color:var(--cyan); box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.hero-hud__note{ font:400 11.5px/1.45 var(--font-mono); color:var(--text-3); text-wrap:balance; }

.hero-grid{ display:none; }
.hero-handoff{ display:none; }
.hero-simnote{ display:none; }
.hero-cue{ display:none; }

@media (max-width:399px){ .hero-hist{ display:none; } }
/* split layout: the switch fits its row, so no scroller edge fade (it would dim INVISIBLE / CUSTOM) */
@media (min-width:900px){ .hero-levels{ -webkit-mask-image:none; mask-image:none; } }
/* 900–1079: the scene column is ~380–480 px, so all six levels (and stats + actions) are tightened to one row each */
@media (min-width:900px) and (max-width:1079px){
  .hero-levels{ gap:0; padding:3px; }
  .hero-levels span{ padding:0 7px; font-size:10.5px; letter-spacing:.045em; }
  .hero-levels .rec{ margin-left:2px; }
  .hero-hud__bar{ gap:10px 10px; }
  .hero-hud__stats{ gap:10px 12px; padding-inline:4px; }
  .hero-hist{ margin-left:2px; }
}
@media (max-width:899px){
  .hero-hud__stats{ flex:1 1 auto; gap:10px 12px; padding-inline:4px; }
  .hero-hud__actions{ align-self:flex-end; }
}

/* ── hero modes (§3.1 / §6.3) ── */
#home[data-hero="live"] .hero-canvas,
#home[data-hero="static"] .hero-canvas{ opacity:1; }
#home[data-hero="boot"] .hero-hud{ visibility:hidden; opacity:0; }
#home[data-hero="live"] .hero-hud,
#home[data-hero="static"] .hero-hud{ animation:ar-fade-in var(--dur-2) var(--ease-out) backwards; }
@keyframes ar-fade-in{ from{ opacity:0; } }
#home[data-hero="live"] .hero-poster,
#home[data-hero="static"] .hero-poster{ opacity:0; }
html.no-js #home .hero-canvas,
#home[data-hero="fallback"] .hero-canvas{ display:none; }
/* fallback / no-js: the interactive HUD goes, but the honesty note stays under the poster (§1.3) */
html.no-js #home .hero-hud{ visibility:visible; opacity:1; }
html.no-js #home .hero-hud__event, html.no-js #home .hero-hud__bar,
#home[data-hero="fallback"] .hero-hud__event, #home[data-hero="fallback"] .hero-hud__bar{ display:none; }
html.no-js #home .hero-note__live, #home[data-hero="fallback"] .hero-note__live{ display:none; }
/* static (reduced motion / save-data): nothing loops, so there is nothing to pause */
#home[data-hero="static"] #hero-pause{ display:none; }
html.no-js #home .hero-poster,
#home[data-hero="fallback"] .hero-poster{
  opacity:1; transition:none;
  background:var(--poster-m) center/contain no-repeat, radial-gradient(closest-side, rgba(46,132,237,.20), transparent 75%);
}
html.no-js #home .hero-poster__mark,
#home[data-hero="fallback"] .hero-poster__mark{ display:none; }

/* ── hero split layout ≥ 900 ── */
@media (min-width:900px){
  .hero{ min-height:100vh; min-height:100svh; }
  .hero__stage{
    --cl:calc(max((100% - var(--maxw)) / 2, 0px) + var(--gutter));
    --copy-w:min(540px, 42vw);
    --scene-r:var(--gutter);
    display:grid;
    height:100vh; height:100svh; min-height:600px;
    padding:0;
    grid-template-columns:
      var(--cl) var(--copy-w) minmax(48px, 1fr)
      calc(100% - max(48%, var(--cl) + var(--copy-w) + 48px) - var(--scene-r))
      var(--scene-r);
    grid-template-rows:calc(var(--nav-h) + 28px) 28px minmax(0, 1fr) 28px auto 24px;
  }
  .hero__bg{
    background:
      radial-gradient(50% 45% at 72% 48%, rgba(46,132,237,.16), transparent 70%),
      linear-gradient(90deg, rgba(3,5,10,.9) 0%, rgba(3,5,10,.55) 30%, rgba(3,5,10,0) 48%),
      radial-gradient(circle, rgba(115,150,240,.10) 1px, transparent 1.5px) 0 0/28px 28px,
      var(--ink-0);
  }
  .hero-copy{
    /* "safe": a copy column taller than the stage overflows downwards, never up under the fixed nav */
    grid-column:2; grid-row:1 / -1; align-self:safe center;
    margin-block:calc(var(--nav-h) + 16px) calc(var(--nav-h) + 16px + 4svh);
  }
  .hero-copy__title{ margin-top:24px; }
  .hero-copy__sub{ margin-top:24px; font-size:var(--fs-lede); line-height:1.55; }
  .hero-copy__ctas{ margin-top:32px; }
  .hero-copy__meta{ margin-top:16px; }
  .hero-frame{
    --bk:rgba(160,195,255,.34);
    grid-column:4; grid-row:2 / 4; flex-wrap:nowrap; align-items:flex-start; align-content:flex-start; margin:0; padding:2px 0 0;
    font-size:var(--fs-label); letter-spacing:.09em;
    background:
      linear-gradient(var(--bk),var(--bk)) left 28px / 16px 1px no-repeat,
      linear-gradient(var(--bk),var(--bk)) left 28px / 1px 16px no-repeat,
      linear-gradient(var(--bk),var(--bk)) right 28px / 16px 1px no-repeat,
      linear-gradient(var(--bk),var(--bk)) right 28px / 1px 16px no-repeat,
      linear-gradient(var(--bk),var(--bk)) left bottom / 16px 1px no-repeat,
      linear-gradient(var(--bk),var(--bk)) left bottom / 1px 16px no-repeat,
      linear-gradient(var(--bk),var(--bk)) right bottom / 16px 1px no-repeat,
      linear-gradient(var(--bk),var(--bk)) right bottom / 1px 16px no-repeat;
  }
  /* labels stay on the top line: a wrapped label would land inside the colony box (it is a keep-out) */
  .hero-frame > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hero-frame__max{ flex:none; }
  .hero-scene{ grid-column:4; grid-row:3; height:auto; min-height:0; }
  .hero-hud{ grid-column:4; grid-row:5; justify-self:end; width:100%; max-width:760px; margin:0; }
  /* keep the bar clear of the fixed "Ask AI" launcher (right 22 / bottom 22 / 54 px): the note owns that corner */
  .hero-hud__note{ min-height:52px; padding-right:150px; }
  .hero-grid{
    display:block; position:absolute; z-index:1; pointer-events:none;
    left:50%; transform:translateX(-50%); width:min(1040px, 84vw);
    top:calc(var(--nav-h) + 150px); bottom:40px;
  }
  .hero-handoff{
    display:block; position:absolute; z-index:4; left:0; right:0; top:calc(var(--nav-h) + 40px);
    padding-inline:var(--gutter); text-align:center; pointer-events:none; opacity:0;
  }
  .hero-handoff__title{ font:600 var(--fs-h2)/1.02 var(--font-sans); letter-spacing:-.035em; color:var(--text-1); }
  .hero-handoff__sub{ margin:12px auto 0; max-width:62em; font-size:16px; line-height:1.5; color:var(--text-2); }
  .hero-cue{
    display:flex; align-items:center; gap:12px; position:absolute; z-index:4; left:var(--cl); bottom:24px; margin:0;
    font:500 var(--fs-label)/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3);
    pointer-events:none;
  }
  .hero-cue::before{
    content:""; width:1px; height:28px;
    background:linear-gradient(180deg, transparent, var(--cyan));
    animation:ar-cue 2.4s var(--ease-split) 1.2s 2 both;
    transform-origin:top;
  }
  #home:not([data-hero="boot"]):not([data-hero="live"]) .hero-cue,
  html.no-js #home .hero-cue{ display:none; }
  /* once the HUD note has faded, this line keeps the simulated scores labelled through morph and grid (§1.3) */
  .hero-simnote{
    display:block; position:absolute; z-index:4; left:0; right:0; bottom:14px; margin:0; text-align:center; pointer-events:none;
    font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); opacity:0;
  }
  .hero-simnote::before{ content:""; display:inline-block; width:5px; height:5px; margin:0 9px 1px 0; border-radius:50%; background:var(--u-amber); box-shadow:0 0 8px rgba(255,194,71,.6); vertical-align:middle; }
  html.no-js #home .hero-poster,
  #home[data-hero="fallback"] .hero-poster{
    background:var(--poster-d) center/contain no-repeat, radial-gradient(closest-side, rgba(46,132,237,.20), transparent 75%);
  }
  /* scroll-linked fades (§3.5) — only while live */
  #home[data-hero="live"] #hero-copy,
  #home[data-hero="live"] #hero-hud,
  #home[data-hero="live"] .hero-frame{ opacity:clamp(0, 1 - var(--hero-p) * 3.4, 1); }
  #home[data-hero="live"] .hero-handoff{
    opacity:clamp(0, (var(--hero-p) - .55) * 4, 1);
    transform:translateY(calc((1 - clamp(0, (var(--hero-p) - .55) * 4, 1)) * 16px));
  }
  #home[data-hero="live"] .hero-cue{ opacity:clamp(0, 1 - var(--hero-p) * 12, 1); }
  /* starts as the HUD note (1 − p·3.4) reaches 0 at p ≈ .294: the two disclaimers never show together */
  #home[data-hero="live"] .hero-simnote{ opacity:clamp(0, (var(--hero-p) - .29) * 8, 1); }
  /* past the intro the copy and HUD are faded out: they stop catching the pointer but stay focusable and in the
     accessibility tree (the page's only H1 lives here). Keyboard focus inside them shows them at full opacity,
     and landing.js scrolls the stage back to p = 0 so the focused control sits over the intro state. */
  #home[data-hero-phase="morph"] #hero-copy, #home[data-hero-phase="grid"] #hero-copy,
  #home[data-hero-phase="morph"] #hero-hud,  #home[data-hero-phase="grid"] #hero-hud{ pointer-events:none; }
  #home[data-hero] #hero-copy:has(:focus-visible),
  #home[data-hero] #hero-hud:has(:focus-visible){ opacity:1; }
}
/* the scene may bleed ~112 px past the container's content edge (as at 1440), never to the window edge on wide screens */
@media (min-width:1280px){ .hero__stage{ --scene-r:max(32px, calc(var(--cl) - 112px)); } }
@media (min-width:900px) and (max-width:1179px){
  .hero-frame{ font-size:10.5px; letter-spacing:.05em; }
  /* narrow split column: both CTAs on one row (the price lives in the pricing section), meta row on ≤ 2 even lines */
  .hero-copy__ctas{ flex-wrap:nowrap; }
  .hero-copy__ctas .btn__meta{ display:none; }
}
/* the meta row fits one line from ~1240; below that "Team seats" would wrap alone (it is in pricing anyway) */
@media (min-width:900px) and (max-width:1239px){ .hero-copy__meta .meta-opt{ display:none; } }
/* short desktop windows (e.g. 1280×800 at 125 % zoom ≈ 1024×570): tighter copy rhythm, no cue, and the stage
   keeps the HUD above the fold instead of holding a 600 px minimum */
@media (min-width:900px) and (max-height:700px){
  .hero__stage{ min-height:540px; grid-template-rows:calc(var(--nav-h) + 16px) 28px minmax(0, 1fr) 16px auto 20px; }
  .hero-copy{ margin-block:calc(var(--nav-h) + 12px) 24px; }
  .hero-copy__title{ margin-top:16px; }
  .hero-copy__sub{ margin-top:14px; font-size:16px; line-height:1.5; }
  .hero-copy__ctas{ margin-top:22px; }
  .hero-copy__meta{ margin-top:10px; }
  .hero-cue{ display:none; }
}
/* phones: the two CTAs stack as one clean full-width block */
@media (max-width:599px){ .hero-copy__ctas .btn{ flex:1 1 100%; } }
@keyframes ar-cue{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:.4; } }

/* sticky morph segment (§3.5) */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html.js #home[data-hero="boot"],
  html.js #home[data-hero="live"]{ height:170vh; }
  .hero__stage{ position:sticky; top:0; }
}

/* ───────────────────────── press ───────────────────────── */
.press{ background:var(--ink-1); border-block:1px solid var(--line); padding:28px 0 22px; }
.press__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 44px; }
.press__label{ color:var(--text-3); }
.press__logos{ display:flex; align-items:center; gap:44px; }
.press__logos a{ display:block; padding:6px; margin:-6px; border-radius:6px; }
.press__logos img{ height:16px; width:auto; filter:brightness(0) invert(1); opacity:.62; transition:opacity var(--dur-2); }
/* AP: letterforms only (page/press-ap.png, transparent), cap height matched to the Benzinga wordmark */
.press__logos img.press__ap{ width:auto; height:13px; }
.press__logos a:hover img, .press__logos a:focus-visible img{ opacity:1; }

/* ───────────────────────── sections ───────────────────────── */
.section{ position:relative; padding-block:var(--section-y); border-top:1px solid var(--line); }
.press + .section{ border-top:0; }
.section--alt{ background:var(--ink-1); }
.sec-head{ margin-bottom:48px; }
.sec-head--center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; color:var(--text-3); }
.eyebrow::before{ content:""; flex:none; width:24px; height:1px; background:var(--cyan); box-shadow:0 0 8px rgba(124,231,255,.7); }
.sec-title{
  position:relative; max-width:18ch;
  font:600 var(--fs-h2)/1.02 var(--font-sans); letter-spacing:-.035em; color:var(--text-1);
  text-wrap:balance;
}
.sec-title::before,.sec-title::after{
  content:attr(data-echo) / ""; position:absolute; inset:0; pointer-events:none; opacity:0;
  color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px rgba(124,231,255,.45);
}
#how-title{ text-wrap:wrap; max-width:20ch; }
.lede{ max-width:56ch; margin-top:20px; font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.sec-head--center .lede{ margin-inline:auto; }

/* reveal on scroll (§6.16.3) — hidden state only once landing.js has armed it */
html.reveal-on [data-reveal]{ transition:opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
html.reveal-on [data-reveal]:not(.is-in){ opacity:0; translate:0 12px; }
html.reveal-on [data-reveal-group] > *{
  transition:
    opacity var(--dur-3) var(--ease-out) calc(min(var(--i, 0), 6) * 60ms),
    translate var(--dur-3) var(--ease-out) calc(min(var(--i, 0), 6) * 60ms),
    transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
}
html.reveal-on [data-reveal-group]:not(.is-in) > *{ opacity:0; translate:0 12px; }
/* revealed by keyboard focus: no fade, so the focus ring is never on an invisible element */
html.reveal-on .is-now, html.reveal-on .is-now > *{ transition:none!important; }
.is-in .sec-title[data-echo]::before, .sec-head.is-in .sec-title[data-echo]::before{ animation:ar-echo-up var(--dur-4) var(--ease-split) 140ms both; }
.is-in .sec-title[data-echo]::after, .sec-head.is-in .sec-title[data-echo]::after{ animation:ar-echo-down var(--dur-4) var(--ease-split) 140ms both; }

/* card base */
.card{ background:var(--ink-2); box-shadow:var(--edge); border-radius:var(--r-xl); }

/* ───────────────────────── pains ───────────────────────── */
.pains__grid{ display:grid; gap:16px; grid-template-columns:1fr; }
.pain{
  position:relative; display:flex; flex-direction:column; padding:12px 12px 26px;
  border-radius:var(--r-xl); background:var(--ink-2); box-shadow:var(--edge); overflow:hidden;
}
.pain__art{
  /* the bottom 30 px is the label's own strip: the drawing never runs into the tag */
  position:relative; height:172px; padding-bottom:30px; margin-bottom:22px; border-radius:20px;
  background:
    radial-gradient(60% 80% at 50% 40%, rgba(46,132,237,.14), transparent 70%),
    radial-gradient(circle, rgba(115,150,240,.12) 1px, transparent 1.5px) 0 0/16px 16px,
    var(--ink-1);
  box-shadow:var(--edge);
  display:grid; place-items:center;
}
.pain-svg{ width:min(240px, 86%); height:auto; overflow:visible; }
.ps-card{ fill:rgba(46,132,237,.14); stroke:rgba(170,200,255,.55); stroke-width:1; }
.ps-card--ghost{ fill:rgba(46,132,237,.06); stroke:rgba(170,200,255,.25); stroke-dasharray:3 3; }
.ps-card--hero{ fill:rgba(46,132,237,.22); stroke:var(--cyan); filter:drop-shadow(0 0 10px rgba(46,132,237,.6)); }
.ps-card--faded{ fill:rgba(150,180,255,.06); stroke:rgba(150,180,255,.28); }
.ps-card--fainter{ opacity:.55; }
.ps-ink{ fill:rgba(238,243,255,.85); }
.ps-ink--dim{ fill:rgba(238,243,255,.35); }
.ps-eq,.ps-axis,.ps-arrow{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ps-eq{ stroke:var(--text-2); stroke-width:2; }
.ps-axis{ stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 4; }
.ps-arrow{ stroke:var(--text-3); stroke-width:1.5; }
.ps-curve{ fill:none; stroke-width:2.2; stroke-linecap:round; }
.ps-ember{ fill:var(--ember); }
.ps-ember-halo{ fill:none; stroke:var(--ember); stroke-opacity:.4; }
.is-in .ps-curve{ stroke-dasharray:240; animation:ar-draw 1.6s var(--ease-out) .25s both; }
@keyframes ar-draw{ from{ stroke-dashoffset:240; } to{ stroke-dashoffset:0; } }
.pain__tag{
  position:absolute; left:14px; bottom:12px;
  font:500 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
}
.pain__idx{ padding-inline:14px; font:500 12px/1 var(--font-mono); color:var(--text-3); letter-spacing:.06em; }
.pain__q{
  margin-top:10px; padding-inline:14px;
  font:600 var(--fs-h3)/1.22 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); text-wrap:balance;
}
.pains__close{
  max-width:46ch; margin-top:40px;
  font-size:clamp(17px, calc(.5vw + 14px), 21px); line-height:1.5; color:var(--text-1);
}
.pains__close::before{ content:"→"; content:"→" / ""; margin-right:10px; color:var(--cyan); }
/* tablet: 2 + 1 — the third card spans both columns, drawing left and question right */
@media (min-width:600px) and (max-width:899px){
  .pains__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pain:last-child{
    grid-column:1 / -1; display:grid; grid-template-columns:calc(50% - 20px) minmax(0, 1fr); grid-template-rows:1fr auto auto 1fr;
    column-gap:28px; padding-bottom:12px;
  }
  .pain:last-child .pain__art{ grid-row:1 / -1; margin-bottom:0; }
  .pain:last-child .pain__idx{ grid-column:2; grid-row:2; padding-inline:0; }
  .pain:last-child .pain__q{ grid-column:2; grid-row:3; padding-inline:0 14px; }
}
@media (min-width:900px){
  .pains__grid{ grid-template-columns:repeat(3, 1fr); gap:20px; }
  .pains__close{ margin-top:56px; }
}

/* ───────────────────────── how it works ───────────────────────── */
.steps{ position:relative; display:grid; gap:36px; grid-template-columns:1fr; }
.step{ position:relative; display:grid; grid-template-columns:40px 1fr; column-gap:18px; }
.step > :not(.step__node){ grid-column:2; }
.step__node{
  position:relative; z-index:1; grid-row:1 / span 3; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(124,231,255,.4), 0 0 0 6px var(--ink-0), 0 0 22px rgba(46,132,237,.35);
  font:500 12px/1 var(--font-mono); color:var(--text-1); letter-spacing:.04em;
}
.step:not(:last-child)::before{
  content:""; position:absolute; left:20px; top:46px; bottom:-30px; width:1px;
  background:linear-gradient(180deg, rgba(124,231,255,.45), var(--line-2));
}
.step__title{ margin-top:6px; font:600 var(--fs-h3)/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); }
.step__text{ margin-top:10px; max-width:42ch; color:var(--text-2); text-wrap:pretty; }
.mini{
  margin-top:20px; padding:14px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(19,28,47,.85), rgba(12,19,34,.85));
  box-shadow:var(--edge), var(--lift);
  font:500 12px/1.3 var(--font-mono); color:var(--text-2); font-variant-numeric:tabular-nums;
}
.mini__head{
  display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; margin-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.mini__row{ display:flex; justify-content:space-between; gap:12px; }
.mini__row--dim{ color:var(--text-3); }
.mini__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini__val{ color:var(--text-1); }
.mini__row--dim .mini__val{ color:var(--text-3); }
.mini__bar{ height:4px; margin:9px 0 12px; border-radius:2px; background:var(--line); overflow:hidden; }
.mini__bar i{
  display:block; width:72%; height:100%; border-radius:inherit; transform-origin:left;
  background:linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow:0 0 10px rgba(124,231,255,.55);
}
.is-in .mini__bar i{ animation:ar-grow 1.4s var(--ease-out) .35s both; }
@keyframes ar-grow{ from{ transform:scaleX(0); } }
.mini__ctrl{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mini__seg{ display:flex; gap:2px; padding:3px; border-radius:var(--r-pill); box-shadow:var(--edge); background:rgba(8,13,24,.6); }
.mini__seg span{ padding:7px 10px; border-radius:var(--r-pill); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.mini__seg .is-on{ background:rgba(46,132,237,.22); box-shadow:inset 0 0 0 1px rgba(90,162,255,.6); color:var(--text-1); }
.mini__stepper{ display:flex; align-items:center; gap:12px; padding:5px 12px; border-radius:var(--r-pill); box-shadow:var(--edge); color:var(--text-3); }
.mini__stepper b{ font-weight:500; color:var(--text-1); }
.mini__copies{ display:flex; align-items:center; gap:5px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); color:var(--text-3); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.mini__copies i{ width:9px; height:16px; border-radius:3px; background:linear-gradient(170deg,#FFC9A6,#EF6F7C 70%,#8E3468); box-shadow:0 0 0 1px rgba(200,225,255,.35); opacity:.92; }
.mini__copies span{ margin-left:auto; }
.mini__file{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.mini__file + .mini__file{ border-top:1px dashed var(--line); }
.mini__file .mini__name{ flex:1; }
.mini__file b{ font-weight:500; color:var(--text-1); }
.how__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); }
.how__sample{ display:flex; flex-wrap:wrap; column-gap:19px; min-width:0; overflow:hidden; font:500 12px/1.5 var(--font-mono); color:var(--text-3); }
.how__sample > span{ position:relative; min-width:0; overflow-wrap:anywhere; }
.how__sample > span + span::before{ content:"·"; content:"·" / ""; position:absolute; left:-9.5px; translate:-50% 0; color:rgba(124,139,168,.7); }
.how__sample .band{ margin:0 10px 2px 0; }
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(3, 1fr); grid-template-rows:auto auto auto 1fr; gap:0 24px; }
  .step{ display:grid; grid-row:span 4; grid-template-rows:subgrid; grid-template-columns:minmax(0, 1fr); }
  .step > :not(.step__node){ grid-column:1; }
  .step__node{ grid-row:auto; }
  .step:not(:last-child)::before{ display:none; }
  .steps::before{
    content:""; position:absolute; top:20px; left:20px; right:calc((100% - 48px) / 3 - 20px); height:1px;
    background:linear-gradient(90deg, rgba(124,231,255,.5), var(--line-2) 40%, var(--line-2) 70%, rgba(124,231,255,.4));
  }
  .steps::after{
    content:""; position:absolute; top:16.5px; left:16px; width:8px; height:8px; border-radius:50%;
    background:var(--cyan); box-shadow:0 0 0 4px rgba(124,231,255,.15), 0 0 14px var(--cyan);
    opacity:0;
  }
  .steps.is-in::after{ animation:ar-travel 2.2s var(--ease-split) .4s 1 both; }
  .step__title{ margin-top:22px; }
  .mini{ margin-top:0; }
  .step__text{ margin-bottom:24px; }
}
@keyframes ar-travel{
  0%{ left:16px; opacity:0; } 8%{ opacity:1; }
  92%{ opacity:1; } 100%{ left:calc(100% - (100% - 48px) / 3 + 16px); opacity:0; }
}

/* ───────────────────────── levels ───────────────────────── */
.levels__grid{ display:grid; gap:16px; grid-template-columns:1fr; }
.level{
  position:relative; display:flex; flex-direction:column; padding:12px 12px 22px;
  border-radius:var(--r-xl); background:var(--ink-2); box-shadow:var(--edge);
}
.level > :not(.level__well){ margin-inline:12px; }
.level--rec{
  background:linear-gradient(180deg, rgba(46,132,237,.12), rgba(12,19,34,0) 46%), var(--ink-2);
  box-shadow:var(--membrane);
}
/* the well is a size container: specimen captions measure the room they have against it (see .spec__cap).
   overflow-x:clip is a safety net only (the y axis stays visible for the specimens' glow) — no caption may widen the page */
.level__well{
  position:relative; height:184px; border-radius:20px; display:flex; align-items:center; justify-content:center; gap:22px;
  padding-bottom:28px; container-type:inline-size; overflow-x:clip;
  background:
    radial-gradient(55% 75% at 64% 45%, rgba(46,132,237,.18), transparent 70%),
    radial-gradient(circle, rgba(115,150,240,.11) 1px, transparent 1.5px) 0 0/16px 16px,
    var(--ink-1);
  box-shadow:var(--edge);
}
.level__arrow{ font:500 14px/1 var(--font-mono); color:var(--text-3); }
.level__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; }
.level__name{ font:600 var(--fs-h3)/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); }
.level__line{ margin-top:6px; color:var(--text-1); opacity:.86; }
.level__label{ margin-top:18px; color:var(--text-3); }
/* one item per effect: an item never splits unless it alone is wider than the line; its "·" sits in the gap before it
   and is clipped by the list edge when the item starts a line (no leading or trailing dots on wrap) */
.fx-list{ display:flex; flex-wrap:wrap; column-gap:19px; margin-top:8px; margin-bottom:18px; overflow:hidden; font:500 12.5px/1.65 var(--font-mono); color:var(--text-2); }
.fx-list li{ position:relative; min-width:0; }
.fx-list li + li::before{ content:"·"; content:"·" / ""; position:absolute; left:-9.5px; translate:-50% 0; color:var(--text-3); }
.nowrap{ white-space:nowrap; }
.level__hint{ margin-top:auto; margin-bottom:12px; font-size:14px; line-height:1.5; color:var(--text-2); text-wrap:pretty; }
.level__band{
  display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font:500 11px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
}
.level__hint + .level__band{ margin-top:0; }
.bands{ display:inline-flex; gap:5px; }
.legend{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.legend__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font:500 12.5px/1.4 var(--font-mono); color:var(--text-2); }
.legend__title{ color:var(--text-1); }
.legend__item{ display:inline-flex; align-items:center; gap:8px; }
.legend__note{ margin-top:12px; max-width:72ch; font-size:14px; color:var(--text-3); text-wrap:pretty; }
@media (min-width:600px){ .levels__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:900px){ .levels__grid{ grid-template-columns:repeat(3, 1fr); gap:20px; } }

/* specimen thumbnails — a CSS miniature of a 9:16 ad (1em = width).
   Original and copy are drawn at the same size and brightness: only the effect itself differs, and the
   caption under each names it. The copy gets the membrane rim; the picture of the original is never dimmed. */
.spec{
  --pic:
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)) .08em .06em/.84em .014em no-repeat,
    linear-gradient(#fff,#fff) .1em .2em/.6em .085em no-repeat,
    linear-gradient(#fff,#fff) .1em .32em/.44em .085em no-repeat,
    linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)) .1em .45em/.62em .03em no-repeat,
    linear-gradient(#FFF3EA,#E99A8C) .2em 1.16em/.6em .07em no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) .1em 1.53em/.8em .022em no-repeat,
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)) .1em 1.58em/.62em .022em no-repeat,
    radial-gradient(48% 26% at 50% 54%, rgba(255,249,236,.9), transparent 72%),
    linear-gradient(170deg,#FFE6CB 0%,#FFB08C 40%,#EF6F7C 76%,#8E3468 100%);
  position:relative; flex:none; width:1em; height:1.7778em; font-size:64px; border-radius:.16em;
  background:linear-gradient(170deg,#FFE6CB 0%,#FFB08C 40%,#EF6F7C 76%,#8E3468 100%);
  box-shadow:0 0 0 1px rgba(200,225,255,.6), 0 0 22px rgba(46,132,237,.45), 0 14px 26px -12px rgba(0,0,0,.7);
}
.spec__in{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; background:var(--pic); }
.spec__in::before{ /* CTA pill */
  content:""; position:absolute; left:.1em; right:.1em; top:1.3em; height:.12em; border-radius:.06em; background:#fff;
}
.spec__in::after{ /* bottle */
  content:""; position:absolute; left:.39em; top:.66em; width:.22em; height:.52em; border-radius:.04em .04em .05em .05em;
  background:
    linear-gradient(#222,#3a3a3a) center top/.42em .12em no-repeat,
    linear-gradient(#FFF4E6,#FFF4E6) center .27em/.8em .12em no-repeat,
    linear-gradient(90deg,#8E440F,#FFCB72 45%,#7A3A0C) center bottom/100% 78% no-repeat;
  background-size:42% 22%, 80% 22%, 100% 78%;
}
.spec--src{ box-shadow:0 0 0 1px rgba(200,225,255,.26), 0 14px 26px -12px rgba(0,0,0,.7); }
/* caption: centred under its specimen, wraps only after a "·" (the words are joined with nbsp in the markup).
   Room = distance from the specimen's centre to the well edge, both sides, less 14px: the pair is 64+22+arrow+22+64
   ≈ 180px wide and centred, so a specimen's centre sits 58px off the well's centre → 100cqi − 2·(58 + 14). Capped at 136px
   so at least the pair's own 22px gap separates it from "Original". Narrowest well (≈236px at 900) → 92px, two lines. */
.spec__cap{
  position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%);
  width:max-content; max-width:calc(100% + 28px); max-width:min(136px, 100cqi - 144px);
  text-align:center; text-wrap:balance;
  font:500 9.5px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
}
.spec__cap--fx{ color:var(--cyan); }
.spec__cap > span{ white-space:nowrap; }
.spec__cap > span + span::before{ content:" · "; content:" · " / ""; }
/* below 280 px the caption room (100cqi − 144) is under 136 px: stack the items instead of wrapping at a "·" */
@container (max-width:279px){
  .spec__cap > span{ display:block; }
  .spec__cap > span + span::before{ content:none; }
}
/* reframe-on-blur: the whole picture shrinks over a blurred copy of itself (never cropped) */
.spec--medium::before, .spec--strong::before{
  content:""; position:absolute; inset:0; border-radius:inherit; background:var(--pic);
  filter:blur(2.5px) saturate(.9) brightness(.92); clip-path:inset(0 round .16em);
}
.spec--light .spec__in{ filter:hue-rotate(-8deg) saturate(1.12) brightness(1.03); }
.spec--medium .spec__in{ inset:.075em .065em; border-radius:.12em; filter:hue-rotate(6deg) saturate(1.06); box-shadow:0 0 0 .01em rgba(255,255,255,.35); }
.spec--strong .spec__in{ inset:.06em; border-radius:.12em; transform:rotate(-2.5deg); filter:hue-rotate(16deg) saturate(1.25) contrast(1.1); box-shadow:inset 0 0 .3em rgba(40,8,30,.75); }
.spec__grain{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background:
    radial-gradient(circle, rgba(255,255,255,.5) .5px, transparent .9px) 0 0/3px 3px,
    radial-gradient(circle, rgba(0,0,0,.45) .5px, transparent .9px) 1px 2px/5px 4px;
}
.spec--ugc .spec__in{ filter:sepia(.2) saturate(.85) contrast(.94) brightness(1.05); transform:rotate(1.4deg) scale(1.03); box-shadow:inset 0 0 .22em rgba(30,10,10,.45); }
.spec__rail{ position:absolute; right:.06em; top:.78em; display:flex; flex-direction:column; gap:.06em; }
.spec__rail i{ display:block; width:.09em; height:.09em; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 0 0 .012em rgba(0,0,0,.2); }
.spec--custom{ background:#F4F1EA; }
.spec--custom .spec__in{ inset:.045em; border-radius:.12em; filter:hue-rotate(-8deg); }
.spec__hook{ position:absolute; left:.16em; right:.16em; top:.7em; height:.13em; border-radius:.04em; background:#fff; box-shadow:0 .02em .05em rgba(0,0,0,.25); }
.spec__hook::after{ content:""; position:absolute; left:.1em; right:.1em; top:.045em; height:.04em; border-radius:.02em; background:#111; }
.spec__subs{ position:absolute; left:.2em; right:.2em; top:1.04em; height:.05em; border-radius:.02em; background:#fff; box-shadow:0 0 0 .014em #000; }

/* ───────────────────────── features ───────────────────────── */
/* Each card opens on a live specimen of its own effect, drawn in the hero's language (mini 9:16 ads with the
   membrane rim, mono readouts, hero-tag pills) — CSS and inline SVG only. A specimen plays once when its card
   scrolls into view (landing.js adds .is-play) and replays on mouse hover; the resting state is the "after"
   picture, which is also what reduced motion, no-JS and print get. */
.features__grid{ display:grid; gap:16px; grid-template-columns:1fr; counter-reset:feat; }
.feature{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:12px 12px 24px;
  border-radius:var(--r-lg); background:var(--ink-2); box-shadow:var(--edge); counter-increment:feat;
}
.feature > :not(.fx){ margin-inline:12px; }
.feature:hover{ transform:translateY(-2px); box-shadow:var(--edge-2), var(--lift); }
.feature__title{ font:600 18px/1.25 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); }
.feature__text{ font-size:15px; line-height:1.55; color:var(--text-2); text-wrap:pretty; }

/* the well: dot grid + a soft glow, the specimen centred in it */
.fx{
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; gap:14px;
  height:156px; padding:24px 12px 12px; margin-bottom:12px; border-radius:16px;
  background:
    radial-gradient(55% 70% at 50% 55%, rgba(46,132,237,.17), transparent 72%),
    radial-gradient(circle, rgba(115,150,240,.11) 1px, transparent 1.5px) 0 0/16px 16px,
    var(--ink-1);
  box-shadow:var(--edge);
  font:500 9px/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.fx::before{ /* index tag, styled like a hero pill */
  content:"FX " counter(feat, decimal-leading-zero); content:"FX " counter(feat, decimal-leading-zero) / "";
  position:absolute; top:9px; left:10px; z-index:2; padding:4px 7px; border-radius:var(--r-pill);
  background:rgba(7,11,20,.82); box-shadow:inset 0 0 0 1px var(--line-2);
  font:500 9.5px/1 var(--font-mono); letter-spacing:.08em; color:var(--text-2);
}
.feature:hover .fx{ box-shadow:var(--edge-2); }
.fx__spec{ font-size:50px; }
.fx__col{ display:flex; flex-direction:column; align-items:center; gap:9px; flex:none; }
.fx__k{ flex:none; white-space:nowrap; }
.fx__v{ font:500 10px/1 var(--font-mono); letter-spacing:.02em; text-transform:none; color:var(--text-1); white-space:nowrap; }
.fx__cap{ white-space:nowrap; text-align:center; }
.fx__cap--on{ color:var(--cyan); }
.fx__chip{
  display:inline-flex; align-items:center; gap:6px; height:19px; padding:0 8px 0 7px; border-radius:var(--r-pill);
  background:rgba(7,11,20,.82); box-shadow:inset 0 0 0 1px rgba(124,231,255,.38); color:var(--cyan); white-space:nowrap;
}
.fx__chip::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; }
.fx__panel{
  position:relative; display:grid; gap:8px; padding:10px 11px; border-radius:12px;
  background:rgba(7,11,20,.82); box-shadow:inset 0 0 0 1px var(--line-2), 0 10px 26px -12px rgba(0,0,0,.8);
}
.fx__row{ position:relative; display:flex; align-items:center; gap:8px; }
.fx__row .fx__k{ width:50px; }

/* 01 mesh: a fine per-frame mesh over the picture, and a ×8 loupe that shows it is there */
.fx__mesh{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border-radius:inherit; fill:none; stroke:#CFF6FF; stroke-width:.5; opacity:.3; pointer-events:none; }
.fx__scan{ position:absolute; z-index:2; left:-5px; right:-5px; top:0; height:2px; border-radius:1px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); opacity:0; }
/* the pin sits on the bottle at the loupe's centre height; its leader runs to the loupe across the 14 px gap */
.fx__pin{ position:absolute; z-index:2; left:.5em; top:.69em; width:12px; height:12px; margin:-6px; border-radius:50%; box-shadow:0 0 0 1px var(--cyan), 0 0 8px rgba(124,231,255,.6); }
.fx__pin::after{ content:""; position:absolute; left:12px; top:5.5px; width:calc(.5em - 6px + 14px); height:1px; background:linear-gradient(90deg, var(--cyan), rgba(124,231,255,.35)); }
.fx--mesh{ gap:14px; }
.fx__loupe{
  position:relative; display:block; width:70px; height:70px; border-radius:50%; overflow:hidden;
  background:linear-gradient(90deg,#8E440F,#FFCB72 45%,#7A3A0C);
  box-shadow:0 0 0 1px rgba(200,225,255,.6), 0 0 22px rgba(46,132,237,.45), inset 0 0 14px rgba(40,10,0,.45);
}
.fx__loupe svg{ width:100%; height:100%; fill:none; stroke:rgba(225,250,255,.92); stroke-width:1; }
.fx__loupe circle{ fill:#fff; stroke:none; }

/* 02 audio: the voice lane is kept, the music lane is swapped, one playhead runs through both (in sync) */
.fx--audio{ flex-direction:column; gap:10px; }
.fx__tracks{ width:min(100%, 222px); gap:10px; padding:11px 12px; }
.fx__track{ display:flex; align-items:center; gap:10px; }
.fx__track .fx__k{ width:36px; }
.fx__wave, .fx__swap{ flex:1; min-width:0; height:20px; }
.fx__wave{ display:block; width:100%; fill:none; stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.fx__wave--voice{ stroke:rgba(238,243,255,.82); }
.fx__swap{ position:relative; }
.fx__swap .fx__wave{ position:absolute; inset:0; height:100%; }
.fx__wave--old{ stroke:rgba(255,122,69,.75); opacity:0; }
.fx__wave--new{ stroke:var(--blue-hi); filter:drop-shadow(0 0 3px rgba(90,162,255,.7)); }
.fx__head{ --h0:calc(12px + 36px + 10px); --h1:calc(100% - 12px); position:absolute; top:7px; bottom:7px; left:var(--h0); width:1px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); opacity:0; }

/* 03 flip: the copy is the original mirrored across the dashed axis */
.fx--flip{ gap:16px; }
.fx--flip .fx__spec{ font-size:44px; }
.fx__axis{ align-self:stretch; width:0; margin:2px 0 20px; border-left:1px dashed rgba(124,231,255,.5); }
.fx__flip{ transform:perspective(300px) rotateY(180deg); }

/* 04 color: split before/after on one frame, and the four controls it moved */
.fx__split{ font-size:54px; }
.fx__graded{ filter:brightness(1.08) contrast(1.16) saturate(1.3) hue-rotate(-14deg); clip-path:inset(-1px -1px -1px 50%); }
.fx__divider{ position:absolute; z-index:1; top:-5px; bottom:-5px; left:50%; width:1px; margin-left:-.5px; background:#fff; box-shadow:0 0 8px rgba(124,231,255,.9); }
.fx__divider::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px; border-radius:50%; background:var(--ink-1); box-shadow:inset 0 0 0 1.5px #fff, 0 0 8px rgba(124,231,255,.8); }
.fx__sliders{ display:grid; gap:9px; width:106px; flex:none; }
.fx__slider{ display:grid; grid-template-columns:48px minmax(0, 1fr); align-items:center; gap:6px; }
.fx__slider > i{ position:relative; height:3px; border-radius:2px; background:var(--line-2); }
.fx__slider > i::before{ content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line-2); }
.fx__slider > i::after{ content:""; position:absolute; left:calc(var(--to) * 100%); top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:var(--text-1); box-shadow:0 0 0 2px rgba(124,231,255,.3), 0 0 8px rgba(124,231,255,.6); }

/* 05 frame rate: the same second at 30 and at 24 fps — one frame in five is dropped */
.fx--fps{ flex-direction:column; align-items:center; gap:12px; }
.fx__strip{ display:flex; align-items:center; gap:10px; }
.fx__strip .fx__k{ width:40px; }
.fx__strip--out .fx__k{ color:var(--cyan); }
.fx__frames{ display:flex; gap:3px; }
.fx__frames i{ width:10px; height:18px; border-radius:2.5px; background:linear-gradient(170deg,#FFC9A6,#EF6F7C 70%,#8E3468); box-shadow:0 0 0 1px rgba(200,225,255,.35); }
.fx__frames i.is-drop{ background:none; box-shadow:none; outline:1px dashed rgba(255,122,69,.75); outline-offset:-1px; }

/* 06 remove metadata: every tag is struck out; 07 iPhone metadata: the camera tags are written in */
.fx--meta{ flex-direction:column; gap:10px; }
.fx__rows{ gap:7px; }
.fx__v--bar{ width:56px; height:6px; border-radius:3px; background:rgba(238,243,255,.5); }
.fx__v--short{ width:38px; }
.fx--meta .fx__row::after{ content:""; position:absolute; left:-3px; right:-3px; top:50%; height:1px; background:rgba(238,243,255,.7); transform-origin:left; }
.fx--meta .fx__v{ opacity:.32; }
.fx--meta .fx__k{ color:rgba(124,139,168,.75); }
.fx--iphone{ gap:12px; }
.fx--iphone .fx__spec{ font-size:44px; }
.fx--iphone .fx__row .fx__k{ width:34px; }
.fx--iphone .fx__panel{ box-shadow:inset 0 0 0 1px rgba(124,231,255,.34), 0 10px 26px -12px rgba(0,0,0,.8); }

/* 08 speed: the copy runs 1.3× — the same content in 0:23 instead of 0:30 */
.fx--speed{ flex-direction:column; gap:10px; }
.fx__lanes{ width:min(100%, 222px); gap:9px; padding:11px 12px; }
.fx__lane{ display:grid; grid-template-columns:40px minmax(0, 1fr) 26px; align-items:center; gap:8px; }
.fx__lane .fx__v{ text-align:right; }
.fx__track2{ display:block; min-width:0; }
.fx__bar{
  position:relative; display:block; height:12px; border-radius:3px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(7,11,20,.55) 9px 10px),
    linear-gradient(90deg,#FFC9A6,#EF6F7C 60%,#8E3468);
  box-shadow:0 0 0 1px rgba(200,225,255,.35);
}
.fx__lane--copy .fx__bar{ width:76.7%; box-shadow:0 0 0 1px rgba(124,231,255,.6), 0 0 10px rgba(46,132,237,.5); }
.fx__lane--copy .fx__v{ color:var(--cyan); }
.fx__play{ position:absolute; top:0; bottom:0; left:0; width:2px; background:#fff; box-shadow:0 0 6px #fff; opacity:0; }

/* plays once on reveal (landing.js: html.fx-on arms it paused at frame 0, .is-play runs it) */
@media (prefers-reduced-motion:no-preference){
  html.fx-on .fx__scan{ animation:ar-fx-scan 1.1s cubic-bezier(.45,0,.55,1) .25s both paused; }
  html.fx-on .fx__mesh{ animation:ar-fx-mesh 1.7s linear .25s both paused; }
  html.fx-on .fx__zoom, html.fx-on .fx__pin{ animation:ar-fx-pop .5s var(--ease-out) 1.25s both paused; }
  html.fx-on .fx__head{ animation:ar-fx-head 1.5s cubic-bezier(.45,0,.55,1) .3s both paused; }
  html.fx-on .fx__wave--new{ animation:ar-fx-wipe 1.5s cubic-bezier(.45,0,.55,1) .3s both paused; }
  html.fx-on .fx__wave--old{ animation:ar-fx-old 1.5s cubic-bezier(.45,0,.55,1) .3s both paused; }
  html.fx-on .fx--audio .fx__cap{ animation:ar-fx-fade .4s var(--ease-out) 1.6s both paused; }
  html.fx-on .fx__flip{ animation:ar-fx-flip 1.1s var(--ease-split) .35s both paused; }
  html.fx-on .fx__flip + .fx__cap{ animation:ar-fx-fade .4s var(--ease-out) 1.2s both paused; }
  html.fx-on .fx__graded{ animation:ar-fx-grade 1.1s var(--ease-split) .3s both paused; }
  html.fx-on .fx__divider{ animation:ar-fx-divide 1.1s var(--ease-split) .3s both paused; }
  html.fx-on .fx__slider > i::after{ animation:ar-fx-knob .9s var(--ease-out) .55s both paused; }
  html.fx-on .fx__strip--out .fx__frames{ animation:ar-fx-frames 1.2s steps(10, jump-start) .3s both paused; }
  html.fx-on .fx__frames i.is-drop{ animation:ar-fx-drop .7s var(--ease-out) 1.45s both paused; }
  html.fx-on .fx--meta .fx__row::after{ animation:ar-fx-strike .45s var(--ease-out) both paused; }
  html.fx-on .fx--meta .fx__v{ animation:ar-fx-dim .45s var(--ease-out) both paused; }
  html.fx-on .fx--meta .fx__row:nth-child(1)::after, html.fx-on .fx--meta .fx__row:nth-child(1) .fx__v{ animation-delay:.3s; }
  html.fx-on .fx--meta .fx__row:nth-child(2)::after, html.fx-on .fx--meta .fx__row:nth-child(2) .fx__v{ animation-delay:.5s; }
  html.fx-on .fx--meta .fx__row:nth-child(3)::after, html.fx-on .fx--meta .fx__row:nth-child(3) .fx__v{ animation-delay:.7s; }
  html.fx-on .fx--meta .fx__row:nth-child(4)::after, html.fx-on .fx--meta .fx__row:nth-child(4) .fx__v{ animation-delay:.9s; }
  html.fx-on .fx--meta .fx__chip, html.fx-on .fx--speed .fx__chip{ animation:ar-fx-pop .45s var(--ease-out) 1.4s both paused; }
  html.fx-on .fx--iphone .fx__v{ animation:ar-fx-type .5s steps(8, jump-none) both paused; }
  html.fx-on .fx--iphone .fx__row:nth-child(1) .fx__v{ animation-delay:.35s; }
  html.fx-on .fx--iphone .fx__row:nth-child(2) .fx__v{ animation-delay:.85s; }
  html.fx-on .fx--iphone .fx__row:nth-child(3) .fx__v{ animation-delay:1.35s; }
  html.fx-on .fx__lane--copy .fx__bar{ animation:ar-fx-shrink .9s var(--ease-split) .3s both paused; }
  html.fx-on .fx__lane--copy .fx__v{ animation:ar-fx-fade .35s var(--ease-out) 1.05s both paused; }
  html.fx-on .fx__play{ animation:ar-fx-play 1.3s linear 1.25s both paused; }
  html.fx-on .fx__lane--copy .fx__play{ animation-duration:1s; }
  /* (specificity above every arming rule, e.g. html.fx-on .fx--meta .fx__row::after) */
  html.fx-on .feature.is-play .fx *, html.fx-on .feature.is-play .fx *::before, html.fx-on .feature.is-play .fx *::after{ animation-play-state:running; }
}
@keyframes ar-fx-scan{ 0%{ opacity:0; transform:translateY(0); } 10%{ opacity:1; } 88%{ opacity:1; } 100%{ opacity:0; transform:translateY(1.75em); } }
@keyframes ar-fx-mesh{ 0%{ clip-path:inset(0 0 100% 0); opacity:.95; } 62%{ clip-path:inset(0 0 0 0); opacity:.95; } 100%{ clip-path:inset(0 0 0 0); } }
@keyframes ar-fx-pop{ from{ opacity:0; transform:scale(.8); } }
@keyframes ar-fx-fade{ from{ opacity:0; } }
@keyframes ar-fx-head{ 0%{ opacity:0; left:var(--h0); } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ opacity:0; left:var(--h1); } }
@keyframes ar-fx-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes ar-fx-old{ from{ opacity:1; clip-path:inset(0 0 0 0); } to{ opacity:1; clip-path:inset(0 0 0 100%); } }
@keyframes ar-fx-flip{ from{ transform:perspective(300px) rotateY(0deg); } }
@keyframes ar-fx-grade{ from{ clip-path:inset(-1px -1px -1px 100%); } }
@keyframes ar-fx-divide{ from{ transform:translateX(.5em); opacity:0; } 20%{ opacity:1; } }
@keyframes ar-fx-knob{ from{ left:50%; } }
@keyframes ar-fx-frames{ from{ clip-path:inset(-2px 100% -2px 0); } to{ clip-path:inset(-2px 0 -2px 0); } }
@keyframes ar-fx-drop{ 0%{ outline-color:rgba(255,122,69,0); box-shadow:none; } 40%{ outline-color:var(--ember); box-shadow:0 0 10px rgba(255,122,69,.8); } }
@keyframes ar-fx-strike{ from{ transform:scaleX(0); } }
@keyframes ar-fx-dim{ from{ opacity:1; } }
@keyframes ar-fx-type{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes ar-fx-shrink{ from{ width:100%; } }
@keyframes ar-fx-play{ 0%{ opacity:1; left:0; } 92%{ opacity:1; } 100%{ opacity:0; left:calc(100% - 2px); } }

.also{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:32px; }
.also__label{ color:var(--text-3); }
.also__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.also__chips .chip{ color:var(--text-2); background:rgba(255,255,255,.02); text-transform:none; letter-spacing:.02em; font-size:12px; padding:7px 12px; }
@media (min-width:600px){ .features__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1080px){ .features__grid{ grid-template-columns:repeat(4, 1fr); gap:20px; } }
/* phones: the specimen becomes a slim column beside the copy (the card is no taller than its text), and the
   "also" chips become one mono run with clipped dot separators */
@media (max-width:599px){
  .features__grid{ gap:10px; }
  .feature{ display:grid; grid-template-columns:84px minmax(0, 1fr); grid-template-rows:auto 1fr; column-gap:14px; row-gap:6px; padding:10px 14px 12px 10px; }
  .feature > :not(.fx){ margin-inline:0; }
  .feature__title{ grid-column:2; margin-top:4px; }
  .feature__text{ grid-column:2; font-size:14.5px; line-height:1.5; }
  .fx{ grid-column:1; grid-row:1 / -1; height:auto; min-height:118px; margin:0; padding:10px 6px; flex-direction:column; gap:8px; border-radius:14px; }
  .fx::before{ display:none; }
  .fx__cap, .fx__chip, .fx__sliders, .fx__zoom, .fx__pin{ display:none; }
  .fx__spec, .fx__split{ font-size:42px; }
  .fx__panel, .fx__tracks, .fx__lanes{ width:100%; padding:8px 7px; }
  .fx .fx__k{ width:auto; font-size:8px; }
  /* audio: label over each lane, the playhead spans the lanes' full width */
  .fx__track{ flex-direction:column; align-items:stretch; gap:4px; }
  .fx__wave, .fx__swap{ flex:none; height:16px; }
  .fx__head{ --h0:7px; --h1:calc(100% - 7px); top:6px; bottom:6px; }
  /* flip: the pair at thumbnail size, no captions */
  .fx--flip{ flex-direction:row; gap:6px; }
  .fx--flip .fx__spec{ font-size:27px; }
  .fx__axis{ margin:0; }
  /* frame rate: label over each strip, five frames (one dropped) */
  .fx--fps{ gap:10px; }
  .fx__strip{ flex-direction:column; align-items:flex-start; gap:4px; }
  .fx__frames{ gap:2.5px; }
  .fx__frames i{ width:9.5px; height:16px; }
  .fx__frames i:nth-child(n+6){ display:none; }
  /* metadata: the tags as bars, each struck out */
  .fx--meta .fx__k, .fx--meta .fx__v{ display:none; }
  .fx--meta .fx__row{ height:9px; }
  .fx--meta .fx__row::before{ content:""; width:100%; height:5px; border-radius:2.5px; background:rgba(238,243,255,.3); }
  /* iPhone: the written tags only, key over value */
  .fx--iphone .fx__spec{ display:none; }
  .fx--iphone .fx__rows{ gap:8px; padding:9px 7px; }
  .fx--iphone .fx__row{ flex-direction:column; align-items:flex-start; gap:3px; }
  .fx--iphone .fx__v{ font-size:9.5px; }
  /* speed: duration over each bar */
  .fx__lanes{ gap:9px; }
  .fx__lane{ display:flex; flex-direction:column-reverse; align-items:stretch; gap:4px; }
  .fx__lane .fx__k{ display:none; }
  .fx__lane .fx__v{ text-align:left; font-size:9px; }
  .also{ display:block; }
  .also__chips{ display:flex; flex-wrap:wrap; gap:0 17px; margin-top:12px; overflow:hidden; }
  .also__chips .chip{ position:relative; padding:0; border-radius:0; background:none; box-shadow:none; font-size:12.5px; line-height:1.75; letter-spacing:0; }
  .also__chips .chip + .chip::before{ content:"·"; content:"·" / ""; position:absolute; left:-8.5px; translate:-50% 0; color:var(--text-3); }
}

/* ───────────────────────── pricing ───────────────────────── */
.pricing{
  background:
    radial-gradient(40% 50% at 50% 46%, rgba(46,132,237,.12), transparent 70%),
    var(--ink-1);
}
/* the cards, the "Included" panel and the links share the container edges at every width */
.plans{ display:grid; gap:16px; grid-template-columns:1fr; }
.plan{
  position:relative; display:flex; flex-direction:column; padding:28px;
  border-radius:var(--r-xl); background:var(--ink-2); box-shadow:var(--edge);
}
.plan--team{
  background:linear-gradient(180deg, rgba(46,132,237,.16), rgba(12,19,34,0) 42%), var(--ink-2);
  box-shadow:0 30px 80px -34px rgba(46,132,237,.7);
}
@property --rim-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.plan__rim{
  position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--rim-a),
    rgba(124,231,255,.95), rgba(46,132,237,.55) 12%, rgba(150,180,255,.16) 28%, rgba(150,180,255,.16) 50%,
    rgba(46,132,237,.55) 64%, rgba(124,231,255,.95) 76%, rgba(150,180,255,.2) 90%, rgba(124,231,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ar-rim 12s linear infinite;
}
@keyframes ar-rim{ to{ --rim-a:360deg; } }
.plan__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; }
.plan__name{ font:600 22px/1.2 var(--font-sans); letter-spacing:-.02em; color:var(--text-1); }
.plan__tag{ margin-top:6px; font-size:15px; color:var(--text-2); }
.plan__price{ display:flex; align-items:baseline; gap:10px; margin-top:26px; }
.plan__amount{ font:600 var(--fs-price)/1 var(--font-sans); letter-spacing:-.04em; color:var(--text-1); font-variant-numeric:tabular-nums; }
.plan__per{ font:500 12.5px/1 var(--font-mono); color:var(--text-3); }
.plan__form, .plan > .btn{ margin-top:24px; }
.plan__list{ display:grid; gap:12px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); font-size:15px; line-height:1.45; color:var(--text-2); }
.plan__list li{ display:flex; gap:10px; align-items:flex-start; }
.plan__list svg{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--cyan); }
.plan__list strong{ font-weight:500; color:var(--text-1); }
.plan__foot{ margin-top:18px; font:500 11.5px/1.4 var(--font-mono); color:var(--text-3); }
/* signed-in visitors: each card's action from payment.billing (pages/home/_tarifs_cta.html) — checkout, current plan,
   upgrade / switch with a note on when it starts, or why it isn't possible. Same colours as the app's dark tones. */
.plan__act{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.plan__act > .plan__form{ margin-top:0; }
.plan__state{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 20px;
  border-radius:var(--r-pill); font:600 15.5px/1.15 var(--font-sans); letter-spacing:-.01em; text-align:center;
}
@media (max-width:599px){ .plan__state{ min-height:48px; } }
.plan__state--current{ color:#7EE8BA; background:rgba(61,220,151,.08); box-shadow:inset 0 0 0 1px rgba(61,220,151,.38); }
.plan__state--scheduled{ color:#A8CBFF; background:rgba(46,132,237,.10); box-shadow:inset 0 0 0 1px rgba(90,162,255,.40); }
.plan__note{ font-size:13.5px; line-height:1.45; color:var(--text-3); text-align:center; text-wrap:pretty; }
.plan__note a{ color:var(--text-1); font-weight:500; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; white-space:nowrap; }
.plan__act--downgrade_blocked .plan__note--why{ color:#FFD27A; }
.plan__info{
  display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px 18px; border-radius:var(--r-md);
  background:var(--ink-3); box-shadow:var(--edge); font-size:14px; line-height:1.4; color:var(--text-2); text-align:center; text-wrap:balance;
}
.btn.plan__off, .btn.plan__off:hover{ cursor:not-allowed; opacity:1; transform:none; color:var(--text-3); background:transparent; box-shadow:none; border:1px dashed var(--line-2); }
@media (forced-colors:active){ .plan__state, .plan__info{ border:1px solid CanvasText; } }
.included{
  position:relative; margin-top:24px; padding:24px; border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(19,28,47,.66), rgba(12,19,34,.66)); box-shadow:var(--edge);
}
.included::after, .contact__panel::after{ /* safe-zone brackets (hero frame motif) */
  content:""; position:absolute; inset:14px; background:var(--brackets); pointer-events:none;
}
.included__title{ color:var(--text-3); display:flex; align-items:center; gap:10px; }
.included__title::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.included__cols{ display:grid; gap:14px; margin-top:14px; }
.included__cols p{ font-size:15px; line-height:1.6; color:var(--text-2); }
.included strong{ font-weight:600; color:var(--text-1); }
.pricing__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 36px; margin-top:28px; font-size:15px; text-align:center; text-wrap:balance; }
@media (min-width:600px){ .included{ padding:26px 30px; } }
@media (min-width:900px){ .included__cols{ grid-template-columns:1.35fr 1fr; gap:40px; } }
@media (min-width:700px) and (max-width:1079px){
  .plans{ gap:20px; }
  .plan{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); column-gap:36px; align-content:start; padding:32px; }
  .plan > :not(.plan__list):not(.plan__rim){ grid-column:1; }
  .plan__list{ grid-column:2; grid-row:1 / span 6; align-self:start; margin-top:0; padding:0 0 0 32px; border-top:0; border-left:1px solid var(--line); }
}
@media (min-width:1080px){
  /* stretched: all three cards share a bottom edge (the shorter lists simply end higher) */
  .plans{ grid-template-columns:repeat(3, 1fr); gap:20px; }
  .plan{ padding:32px; }
  .included{ margin-top:28px; }
}

/* ───────────────────────── testimonials ───────────────────────── */
.t-rail{
  position:relative; display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 6px; scroll-padding-inline:var(--gutter);
}
.t-rail::-webkit-scrollbar{ display:none; }
.t-rail:focus-visible{ outline-offset:-2px; border-radius:var(--r-xl); }
.t-card{
  position:relative; flex:0 0 86%; scroll-snap-align:start; display:flex; flex-direction:column; gap:20px;
  margin:0; padding:26px 24px 22px; border-radius:var(--r-xl); background:var(--ink-2); box-shadow:var(--edge);
}
.t-rail{ counter-reset:tcard; }
.t-card{ counter-increment:tcard; }
.t-card::before{ /* hero-tag style index, decorative */
  content:counter(tcard, decimal-leading-zero) " / 03"; content:counter(tcard, decimal-leading-zero) " / 03" / "";
  position:absolute; top:24px; right:22px; padding:5px 8px; border-radius:var(--r-pill);
  background:rgba(7,11,20,.82); box-shadow:inset 0 0 0 1px var(--line-2);
  font:500 10px/1 var(--font-mono); letter-spacing:.08em; color:var(--text-3); pointer-events:none;
}
.stars{ display:flex; gap:3px; color:var(--u-amber); }
.stars svg{ width:15px; height:15px; fill:currentColor; }
.t-card__quote{ margin:0; }
.t-card__lead{ font:600 20px/1.32 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); text-wrap:balance; }
.t-card__body{ margin-top:12px; font-size:15.5px; line-height:1.6; color:var(--text-2); }
.t-card__who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.t-card__who img{ flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--ink-3);
  box-shadow:0 0 0 1px rgba(200,225,255,.45), 0 0 0 4px rgba(46,132,237,.12), 0 0 18px rgba(46,132,237,.35); }
.t-card__name{ display:block; font-weight:600; font-size:15px; color:var(--text-1); }
.t-card__role{ display:block; margin-top:3px; font:500 11.5px/1.35 var(--font-mono); color:var(--text-3); }
.t-controls{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px; }
html.no-js .t-controls{ display:none; }
.rail-btn{
  display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.04); box-shadow:var(--edge-2); color:var(--text-1);
}
.rail-btn:hover{ box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.rail-btn[aria-disabled="true"]{ opacity:.4; cursor:default; }
.rail-btn[aria-disabled="true"]:hover{ box-shadow:var(--edge-2); }
.rail-btn svg{ width:16px; height:16px; }
.t-dots{ display:flex; gap:2px; }
.t-dot{ display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
.t-dot::before{ content:""; width:8px; height:8px; border-radius:4px; background:var(--line-2); transition:width var(--dur-2) var(--ease-out), background-color var(--dur-2); }
.t-dot[aria-current="true"]::before{ width:22px; background:var(--cyan); }
@media (min-width:600px){ .t-card{ flex-basis:62%; } }
@media (min-width:900px){
  .t-rail{ display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:auto 1fr auto; gap:0 20px; overflow:visible; margin:0; padding:0; }
  .t-card{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:20px; padding:30px 28px 24px; }
  .t-card__who{ margin-top:0; }
  .t-controls{ display:none; }
}

/* ───────────────────────── FAQ ───────────────────────── */
.faq-sec__grid{ display:grid; gap:8px; }
.faq-sec__head{ margin-bottom:32px; }
.faq-sec__more{ margin-top:20px; color:var(--text-2); }
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:center; gap:16px; padding:22px 2px; cursor:pointer; list-style:none; border-radius:10px;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__idx{ flex:none; width:34px; font:500 11.5px/1 var(--font-mono); color:var(--text-3); letter-spacing:.04em; }
.faq__q h3{ flex:1; font:500 clamp(16px, calc(.4vw + 14px), 19px)/1.4 var(--font-sans); letter-spacing:-.01em; color:var(--text-1); text-wrap:balance; }
.faq__icon{
  position:relative; flex:none; width:30px; height:30px; border-radius:50%; box-shadow:var(--edge-2);
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; margin:-.75px 0 0 -5.5px; border-radius:1px; background:var(--text-1); }
.faq__icon::after{ transform:rotate(90deg); }
.faq__q:hover .faq__icon{ box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.faq__item[open] .faq__icon{ transform:rotate(45deg); box-shadow:inset 0 0 0 1px rgba(124,231,255,.55); }
.faq__item[open] .faq__idx{ color:var(--cyan); }
.faq__a{ padding:0 2px 26px 50px; }
.faq__a p{ max-width:68ch; color:var(--text-2); }
.faq__a strong{ font-weight:600; color:var(--text-1); }
@media (max-width:599px){ .faq__idx{ display:none; } .faq__a{ padding-left:2px; } .faq__q{ gap:12px; } }
@media (min-width:1080px){
  .faq-sec__grid{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.5fr); gap:72px; align-items:start; }
  .faq-sec__head{ position:sticky; top:calc(var(--nav-h) + 40px); margin-bottom:0; }
}

/* ───────────────────────── news ───────────────────────── */
.news__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:44px; }
.news__head .sec-head{ margin-bottom:0; }
.news__grid{ display:grid; gap:16px; grid-template-columns:1fr; }
.news-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-xl);
  background:var(--ink-2); box-shadow:var(--edge); color:inherit;
}
.news-card:hover{ transform:translateY(-2px); box-shadow:var(--edge-2), var(--lift); }
.news-card--ai{ --cat:linear-gradient(135deg,#6a5cff,#016eeb); }
.news-card--ads{ --cat:linear-gradient(135deg,#016eeb,#19b6ff); }
.news-card--dtc{ --cat:linear-gradient(135deg,#ff6a88,#ff9a44); }
.news-card--platforms{ --cat:linear-gradient(135deg,#0bbf9a,#16a7ff); }
.news-card--playbook{ --cat:linear-gradient(135deg,#2e9e5b,#8fd14f); }
.news-card__cover{
  position:relative; aspect-ratio:16/8; overflow:hidden;
  background:var(--cover, none) center/cover no-repeat, var(--cat, linear-gradient(135deg,#016eeb,#19b6ff));
  filter:saturate(.88);
}
.news-card__cover::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px) 0 0/14px 14px,
    radial-gradient(90% 120% at 100% 100%, rgba(3,5,10,.62), transparent 62%),
    linear-gradient(180deg, rgba(3,5,10,.15), rgba(3,5,10,.15));
}
/* no cover image: a small colony of copies (one fresh, one burned out), tinted by the category gradient */
.news-card:not(.news-card--img) .news-card__cover::before{
  content:""; position:absolute; z-index:1; inset:8% 3% 8% 30%; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120' fill='none' stroke='white'%3E%3Cg stroke-opacity='.42' fill='white' fill-opacity='.07'%3E%3Crect x='40.5' y='10.5' width='24' height='42' rx='6'/%3E%3Crect x='70.5' y='4.5' width='24' height='42' rx='6'/%3E%3Crect x='130.5' y='6.5' width='24' height='42' rx='6'/%3E%3Crect x='55.5' y='62.5' width='24' height='42' rx='6'/%3E%3Crect x='115.5' y='64.5' width='24' height='42' rx='6'/%3E%3C/g%3E%3Crect x='100.5' y='12.5' width='24' height='42' rx='6' fill='white' fill-opacity='.2' stroke-opacity='.9'/%3E%3Crect x='85.5' y='56.5' width='24' height='42' rx='6' stroke-opacity='.28' stroke-dasharray='3 3'/%3E%3Cg fill='white' stroke='none'%3E%3Crect x='104' y='18' width='12' height='3' rx='1.5' fill-opacity='.8'/%3E%3Crect x='104' y='45' width='16' height='4' rx='2' fill-opacity='.8'/%3E%3C/g%3E%3C/svg%3E") right center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
}
.news-card__tag{
  position:absolute; z-index:1; left:14px; top:14px; padding:6px 10px; border-radius:var(--r-pill);
  background:rgba(3,5,10,.58); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font:500 10.5px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:#fff;
}
.news-card__body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:22px 24px 22px; }
.news-card__title{ font:600 19px/1.3 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); text-wrap:balance; }
.news-card__excerpt{ font-size:15px; line-height:1.55; color:var(--text-2); }
.news-card__meta{ margin-top:auto; padding-top:6px; font:500 12px/1.3 var(--font-mono); color:var(--text-3); }
@media (min-width:620px){ .news__grid{ grid-template-columns:repeat(2, 1fr); } }
/* 2 columns with an odd count: the last card spans both, cover left and text right (no orphan) */
@media (min-width:620px) and (max-width:919px){
  .news-card:nth-child(odd):last-child{ grid-column:1 / -1; flex-direction:row; }
  .news-card:nth-child(odd):last-child .news-card__cover{ flex:0 0 calc(50% - 8px); aspect-ratio:auto; min-height:200px; }
}
@media (min-width:920px){ .news__grid{ grid-template-columns:repeat(3, 1fr); gap:20px; } }

/* ───────────────────────── contact ───────────────────────── */
.contact{ background:radial-gradient(40% 60% at 80% 40%, rgba(46,132,237,.10), transparent 70%), var(--ink-1); }
.contact__grid{ display:grid; gap:40px; }
.contact__info .sec-head{ margin-bottom:32px; }
.contact__list{ display:grid; gap:16px; }
.contact__list li{ display:flex; align-items:flex-start; gap:14px; }
.contact__ico{
  display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:13px; color:var(--blue-hi);
  background:var(--ink-2); box-shadow:var(--edge);
}
.contact__ico svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact__k{ display:block; padding-top:3px; color:var(--text-3); font-size:10.5px; }
.contact__v{ display:block; margin-top:4px; color:var(--text-1); overflow-wrap:anywhere; }
a.contact__v{ transition:color var(--dur-1); border-radius:4px; }
a.contact__v:hover{ color:var(--blue-hi); }
.social{ margin-top:36px; }
.social__label{ color:var(--text-3); }
.social__list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.social__btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--text-1);
  background:rgba(255,255,255,.04); box-shadow:var(--edge-2);
  transition:box-shadow var(--dur-1), color var(--dur-1), background-color var(--dur-1);
}
.social__btn:hover{ color:var(--cyan); background:rgba(124,231,255,.06); box-shadow:inset 0 0 0 1px rgba(124,231,255,.45); }
.social__btn svg{ width:18px; height:18px; }
.contact__panel{
  position:relative; padding:24px; border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(19,28,47,.78), rgba(12,19,34,.78));
  box-shadow:var(--edge-2), var(--lift);
}
.contact__panel::before{
  content:""; position:absolute; left:24px; right:24px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,231,255,.6), transparent);
}
.contact__form-title{ margin-bottom:22px; font:600 var(--fs-h3)/1.2 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); }
#contact-form{ display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field__label{ color:var(--text-2); font-size:10.5px; }
.field__label .opt{ text-transform:none; letter-spacing:0; color:var(--text-3); }
#captcha-question{ color:var(--text-1); letter-spacing:.04em; font-size:12px; }
#contact-form input:not([type="hidden"]),
#contact-form textarea{
  width:100%; height:52px; padding:0 16px; border:0; border-radius:14px; outline:none;
  background:var(--ink-3); box-shadow:inset 0 0 0 1px rgba(150,180,255,.52); color:var(--text-1);
  font:400 16px/1.4 var(--font-sans);
  transition:box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
  -webkit-appearance:none; appearance:none;
}
#contact-form textarea{ height:auto; min-height:132px; padding:14px 16px; resize:vertical; }
#contact-form input::placeholder, #contact-form textarea::placeholder{ color:var(--text-3); opacity:1; }
#contact-form input:hover, #contact-form textarea:hover{ background:#162036; }
/* the transparent outline is invisible here but is painted in forced colors, where box-shadow is dropped */
#contact-form input:focus, #contact-form textarea:focus{ outline:2px solid transparent; outline-offset:2px; box-shadow:inset 0 0 0 1px var(--blue-hi), 0 0 0 4px rgba(46,132,237,.22); }
#contact-form input.error, #contact-form textarea.error{ box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 4px rgba(255,107,107,.15); }
#contact-form input[type="number"]{ -moz-appearance:textfield; }
#contact-form input[type="number"]::-webkit-inner-spin-button,
#contact-form input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.field__error{ font-size:13px; line-height:1.4; color:var(--danger); }
.field__error:empty{ margin-top:-8px; }
#contact-form > .btn{ align-self:start; margin-top:4px; }
.form-messages{ grid-column:1 / -1; }
/* empty: out of the grid flow (no extra gap) but still rendered, so the live region exists before text arrives */
.form-messages:empty{ position:absolute; }
.form-msg{
  display:flex; align-items:center; gap:12px; padding:10px 8px 10px 14px; border-radius:14px;
  background:var(--ink-3); box-shadow:var(--edge-2);
  font:500 12.5px/1.45 var(--font-mono); color:var(--text-1);
  animation:ar-msg var(--dur-2) var(--ease-out) both;
  transition:opacity .3s var(--ease-out);
}
.form-msg.is-hiding{ opacity:0; }
@keyframes ar-msg{ from{ opacity:0; transform:translateY(-6px); } }
.form-msg__dot{ flex:none; width:8px; height:8px; border-radius:50%; }
.form-msg--success{ box-shadow:inset 0 0 0 1px rgba(61,220,151,.4); }
.form-msg--success .form-msg__dot{ background:var(--success); box-shadow:0 0 10px var(--success); }
.form-msg--error{ box-shadow:inset 0 0 0 1px rgba(255,107,107,.42); }
.form-msg--error .form-msg__dot{ background:var(--danger); box-shadow:0 0 10px var(--danger); }
.form-msg__text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.form-msg__close{
  display:grid; place-items:center; flex:none; width:30px; height:30px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--text-2); font-size:18px; line-height:1; cursor:pointer;
}
.form-msg__close:hover{ color:var(--text-1); background:rgba(255,255,255,.06); }
@media (min-width:600px){
  .contact__panel{ padding:34px; }
  #contact-form{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px; }
  #contact-form > .field:nth-of-type(1), #contact-form > .field:nth-of-type(4){ grid-column:1 / -1; }
  #contact-form > .btn{ margin-top:calc(10.5px * 1.2 + 8px); }
}
@media (min-width:1080px){
  .contact__grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr); gap:72px; align-items:start; }
}

/* ───────────────────────── footer ───────────────────────── */
.site-footer{ position:relative; overflow:clip; padding-top:64px; background:var(--ink-1); border-top:1px solid var(--line); }
.site-footer__cols{ display:grid; gap:36px 24px; grid-template-columns:1fr 1fr; }
.site-footer__brand{ grid-column:1 / -1; }
.site-footer__brand p{ max-width:30ch; margin-top:16px; color:var(--text-2); text-wrap:balance; }
.site-footer__label{ margin-bottom:16px; color:var(--text-3); }
.site-footer ul{ display:grid; gap:10px; }
.site-footer ul a{ color:var(--text-2); transition:color var(--dur-1); border-radius:4px; }
.site-footer ul a:hover{ color:var(--text-1); }
.site-footer__copy{ margin-top:56px; padding-top:22px; border-top:1px solid var(--line); font:500 12px/1.4 var(--font-mono); color:var(--text-3); }
.wordmark{
  position:relative; display:grid; justify-items:center; margin-top:18px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
  font:600 clamp(64px, 16vw, 240px)/.86 var(--font-sans); letter-spacing:-.05em;
  user-select:none; pointer-events:none; white-space:nowrap;
}
.wordmark > span{ grid-area:1 / 1; color:var(--ink-1); -webkit-text-fill-color:var(--ink-1); paint-order:stroke fill; }
.wordmark__main{ -webkit-text-stroke:2px rgba(150,180,255,.34); color:#0A101D; -webkit-text-fill-color:#0A101D; }
.wordmark__echo{ -webkit-text-stroke:2px rgba(124,231,255,.16); }
.wordmark__echo--a{ transform:translateY(-.06em); }
.wordmark__echo--b{ transform:translateY(.06em); }
@media (min-width:900px){
  .site-footer{ padding-top:88px; }
  .site-footer__cols{ grid-template-columns:1.5fr 1fr 1fr; }
  .site-footer__brand{ grid-column:auto; }
}

/* ───────────────────────── demo dialog ───────────────────────── */
.modal{
  width:min(1100px, calc(100vw - 32px)); max-width:none; max-height:none; padding:56px 0 0; margin:auto;
  border:0; background:transparent; color:var(--text-1); overflow:visible;
}
.modal::backdrop{ background:rgba(3,5,10,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal[open]{ animation:ar-modal var(--dur-2) var(--ease-out) both; }
@keyframes ar-modal{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
.modal__frame{
  aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg); background:#000;
  box-shadow:0 0 0 1px var(--line-2), 0 40px 120px -20px rgba(0,0,0,.85), 0 0 90px -24px rgba(46,132,237,.5);
}
.modal__frame iframe{ display:block; width:100%; height:100%; border:0; }
.modal__close{
  position:absolute; top:0; right:0; display:grid; place-items:center; width:42px; height:42px; padding:0; border:0;
  border-radius:50%; background:rgba(255,255,255,.06); box-shadow:var(--edge-2); color:var(--text-1); cursor:pointer;
}
.modal__close:hover{ box-shadow:inset 0 0 0 1px rgba(124,231,255,.5); }
.modal__close svg{ width:18px; height:18px; }

/* ───────────────────────── thumb-zone CTA (phones) ───────────────────────── */
.thumb-cta{
  position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:var(--z-thumb);
  --h:54px; max-width:calc(100vw - 166px); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms;
}
.thumb-cta.is-visible{ opacity:1; visibility:visible; transform:none; transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
html.no-js .thumb-cta{ display:none; }
@media (min-width:900px){ .thumb-cta{ display:none; } }

/* ───────────────────────── AI assistant partial ─────────────────────────
   partials/ai_assistant.html is shared and not editable here. It was written for the light Bootstrap page and
   relied on its dark body text; on this dark page it would inherit --text-2, dark form fields and list-style:none. */
.ara-panel{ color:#1f2333; color-scheme:light; font-size:14px; line-height:1.5; }
.ara-panel :focus-visible{ outline-color:#016eeb; }
.ara-bubble ul{ list-style:disc; }
.ara-bubble ol{ list-style:decimal; padding-left:18px; }
.ara-bubble a{ text-decoration:underline; text-underline-offset:2px; }
.ara-msg.user .ara-bubble a{ color:#fff; }
body.menu-open #ara-launcher{ visibility:hidden; }

/* ───────────────────────── forced colors (Windows High Contrast) ─────────────────────────
   Forced colors drop box-shadow and repaint backgrounds as Canvas — and the controls on this page draw their edge,
   focus ring and selected state with exactly those. Here each one gets a real border / outline in system colors. */
@media (forced-colors:active){
  .btn, .hud-btn, .rail-btn, .nav-toggle, .mobile-menu__close, .modal__close, .form-msg__close, .social__btn,
  .faq__icon, .chip, .hero-levels, #ara-launcher{ border:1px solid ButtonText; }
  #contact-form input:not([type="hidden"]), #contact-form textarea,
  .level, .feature, .plan, .t-card, .news-card, .contact__panel, .form-msg, .hero-hud__bar{ border:1px solid CanvasText; }
  #contact-form input:focus, #contact-form textarea:focus{ outline:2px solid Highlight; outline-offset:2px; }
  #contact-form input.error, #contact-form textarea.error{ border-width:2px; }
  .btn[disabled], .btn[aria-disabled="true"], .rail-btn[aria-disabled="true"]{ color:GrayText; border-color:GrayText; opacity:1; }
  /* level switch: the checked radio is a filled pill, like a selected list item (adjust:none — otherwise the text
     backplate paints Canvas behind HighlightText and the label disappears) */
  .hero-levels input:checked + span{ forced-color-adjust:none; background:Highlight; color:HighlightText; }
  .hero-levels input:checked + span .rec{ color:HighlightText; }
  .hero-levels input:focus-visible + span{ outline-color:CanvasText; }
  .hud-btn[aria-pressed="true"]{ outline:2px solid Highlight; outline-offset:2px; }
  .t-dot::before{ background:ButtonText; }
  .t-dot[aria-current="true"]::before{ background:Highlight; }
  .faq__icon::before, .faq__icon::after{ background:CanvasText; }
  /* pictures and color swatches keep their own colors (score bands, histogram, specimen thumbnails) */
  .band, .hero-hist, .level__well, .fx{ forced-color-adjust:none; }
}
/* phones: the "also" list is a plain run of text there, not a row of chips */
@media (forced-colors:active) and (max-width:599px){ .also__chips .chip{ border:0; } }

/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  .btn, .btn__arrow, .arrow-link span, .mobile-menu, .menu-scrim, .thumb-cta, .faq__icon, .t-dot::before{ transition-property:opacity, visibility; transition-duration:200ms; }
  .btn:hover, .btn--primary:hover, .feature:hover, .news-card:hover{ transform:none; }
  .btn:hover .btn__arrow, .arrow-link:hover span{ transform:none; }
  .mobile-menu{ transform:none; opacity:0; transition:opacity 200ms, visibility 0s 200ms; }
  .mobile-menu.is-open{ opacity:1; transition:opacity 200ms; }
  .thumb-cta{ transform:none; }
  .hero-canvas{ transition-duration:200ms; }
  .hero-poster{ transition:opacity 200ms; }
  .hero-poster__mark, .hero-cue::before, .plan__rim, .ps-curve, .mini__bar i, .steps::after,
  .accent::before, .accent::after, .sec-title::before, .sec-title::after, .modal[open], .form-msg{ animation:none!important; }
  .accent::before, .accent::after, .sec-title::before, .sec-title::after, .steps::after{ display:none; }
  .hero-cue{ display:none!important; }
  html.reveal-on [data-reveal], html.reveal-on [data-reveal-group] > *{ translate:none!important; transition:opacity 200ms linear!important; }
  .faq__item[open] .faq__icon{ transform:rotate(45deg); }
}