/* ═══════════════════════════════════════════════════════════
   PROMPTDEC landing
   Tokens lifted 1:1 from the Promptdec Brand Identity file.
   Colours and type are unchanged. What was added on the polish
   pass: a spacing scale, a radius scale, a layered shadow scale
   and a hairline set derived from --ink, so borders read as
   hairlines instead of grey rules.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* brand */
  --v50:#F1F1FD; --v100:#EFEFFF; --v200:#ECEBFD; --v500:#5B5BD6; --v600:#5046E5;
  /* neutrals */
  --white:#FFFFFF; --n50:#F9F8F8; --n200:#D9D9D9; --n300:#B6B3B3; --n500:#979797; --n900:#1F1F21;
  --ink:#1F1F21; --ink2:#55555A;
  /* Neutral 500 is 2.9:1 on white and fails WCAG AA as text.
     Figma's swatch stays for borders/fills; small text uses --ink3 (5.1:1). */
  --ink3:#6E6E73;
  /* semantic */
  --blue:#32A7D4; --green:#3F9D00; --orange:#D97757;
  /* Status swatches are fine as fills/rings but fail AA as small text.
     These darker pairs are used wherever the colour IS the text. */
  --green-ink:#2F7300; --orange-ink:#A8501D;
  --blue100:#E9EEFD; --green100:#E7F7ED; --amber100:#FBF0DE;
  /* type */
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"DM Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* ── hairlines ──────────────────────────────────────────
     --n200 as a border is a visible grey rule at 1px. Tinted
     ink at low alpha sits on any surface and reads as an edge,
     not a line. --n200 stays for meter tracks and fills. */
  --line:rgba(31,31,33,.09);
  --line-soft:rgba(31,31,33,.06);
  --line-strong:rgba(31,31,33,.15);
  --line-inv:rgba(255,255,255,.11);
  --line-inv-soft:rgba(255,255,255,.07);
  --tint:rgba(80,70,229,.28);            /* brand-tinted edge on hover */

  /* ── elevation ─────────────────────────────────────────
     Two-part shadows: a tight contact shadow plus a wide soft
     one. A single large blur reads as fog. */
  --sh-1:0 1px 2px rgba(31,31,33,.04);
  --sh-2:0 1px 2px rgba(31,31,33,.04), 0 10px 24px -16px rgba(31,31,33,.28);
  --sh-3:0 2px 4px rgba(31,31,33,.04), 0 22px 44px -24px rgba(31,31,33,.30);
  --sh-4:0 4px 10px -6px rgba(31,31,33,.10), 0 40px 80px -40px rgba(31,31,33,.42);

  /* ── shape ─────────────────────────────────────────────── */
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* ── rhythm ────────────────────────────────────────────── */
  --wrap:1200px; --pad:24px;
  --sec-y:clamp(78px,8.4vw,124px);       /* vertical section rhythm */
  --sec-head:clamp(40px,4.6vw,64px);     /* heading block → content */
  --gap:clamp(16px,1.5vw,20px);          /* grid gutter */
  --gap-lg:clamp(28px,3.6vw,52px);       /* two-column splits */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
img,svg,canvas{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
/* kills the 300ms double-tap zoom delay; press feedback is handled by our own states */
a,button,input,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
table{border-collapse:collapse;width:100%}
h1,h2,h3,p,blockquote,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
::selection{background:var(--v100);color:var(--v600)}

:focus-visible{outline:2px solid var(--v600);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--v600);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);transition:top .2s}
.skip:focus{top:16px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}

/* Grid/flex items default to min-width:auto, which lets intrinsically wide
   content (mono blocks, tab rows, tables) push a track past the viewport.
   Every multi-column container on this page opts out. */
.hero__in>*,.vsplit>*,.conn>*,.gam>*,.bento>*,.grid3>*,.grid4>*,.dims>*,.notes>*,
.mgrid>*,.rmap__cols>*,.foot__in>*,.sechead--split>*,.heat__stats>*,.modes__switch>*,
.sbar>*,.bench div>*,.nav__in>*{min-width:0}
.pcard__text,.bx__p,.citem p{overflow-wrap:anywhere}

/* ── type primitives ───────────────────────────────────── */
.h-hero{
  font:700 clamp(38px,5.1vw,60px)/1.05 var(--display);
  letter-spacing:-.034em;margin:24px 0 0;
}
.h-hero .line{display:block;overflow:hidden;padding-bottom:.045em}
.h-hero .line>span{display:block}
.h2{font:700 clamp(28px,3.7vw,44px)/1.12 var(--display);letter-spacing:-.03em}
.h2--inv{color:#fff}
.chip{
  font-style:normal;background:var(--v100);color:var(--v600);
  border-radius:var(--r-sm);padding:0 .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.chip--inv{background:rgba(91,91,214,.24);color:#c9c6ff}
.overline{
  font:700 11px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.overline--v{color:var(--v600)}
.overline--mt{margin:clamp(48px,5vw,72px) 0 20px}
.overline .idx{font-family:var(--mono);font-weight:400;letter-spacing:.05em;color:var(--v600)}
.dot{width:6px;height:6px;border-radius:2px;background:var(--v600);display:inline-block;flex:none}
.mono-xs{font:400 12px/1.45 var(--mono);letter-spacing:.02em;color:var(--ink3)}
.lead{font:400 clamp(16px,1.3vw,18.5px)/1.65 var(--body);color:var(--ink2);max-width:55ch;margin-top:24px}
.sub{font:400 16px/1.66 var(--body);color:var(--ink2);max-width:62ch;margin-top:20px}
.sub--r{max-width:44ch;margin-top:0}
.sub--inv{color:rgba(255,255,255,.62)}
.fineprint{margin-top:32px;font-size:14.5px;line-height:1.62;color:var(--ink2);
  border-left:2px solid var(--v600);padding-left:18px}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  padding:11px 20px;border-radius:var(--r-pill);
  font:500 14.5px/1 var(--body);letter-spacing:-.01em;white-space:nowrap;
  transition:transform .3s var(--ease-out),background .22s var(--ease),
             border-color .22s var(--ease),color .22s var(--ease),box-shadow .3s var(--ease-out);
}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0);transition-duration:.06s}
.btn__arw{transition:transform .3s var(--ease-out)}
.btn:hover .btn__arw{transform:translateX(3px)}
/* the inset hairline keeps the solid fill from looking flat-printed */
.btn--solid{--bg:var(--v600);--fg:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(31,31,33,.10), 0 8px 20px -12px rgba(80,70,229,.65)}
.btn--solid:hover{--bg:#4539dd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(31,31,33,.10), 0 16px 30px -14px rgba(80,70,229,.75)}
.btn--line{--bd:var(--line-strong);--fg:var(--ink);background:rgba(255,255,255,.6);box-shadow:var(--sh-1)}
.btn--line:hover{--bd:var(--tint);background:var(--v50);--fg:var(--v600);box-shadow:var(--sh-2)}
.btn--ghost{--fg:var(--ink2)}
.btn--ghost:hover{--fg:var(--ink)}
.btn--invert{--bg:#fff;--fg:var(--n900);box-shadow:0 1px 2px rgba(0,0,0,.16), 0 10px 24px -14px rgba(0,0,0,.6)}
.btn--invert:hover{--bg:var(--v100);--fg:var(--v600);box-shadow:0 2px 4px rgba(0,0,0,.18), 0 18px 34px -16px rgba(0,0,0,.7)}
.btn--lg{padding:14px 24px;font-size:15.5px}
.btn--sm{padding:8px 14px;font-size:13px}
.btn--full{width:100%;margin-top:24px}

/* ── nav ───────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:100;
  transition:transform .45s var(--ease),background .3s,box-shadow .3s,border-color .3s;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);border-bottom-color:var(--line-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -20px rgba(31,31,33,.5)}
.nav.is-hidden{transform:translateY(-102%)}
/* the bar tightens once it is stuck, so the page gets its height back */
.nav__in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:28px;
  padding:18px max(var(--pad),env(safe-area-inset-right)) 18px max(var(--pad),env(safe-area-inset-left));
  transition:padding .35s var(--ease)}
.nav.is-stuck .nav__in{padding-top:12px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--v600)}
.brand__mark{width:34px;height:34px;border-radius:100px;flex:none;
  box-shadow:0 1px 2px rgba(31,31,33,.12), 0 8px 18px -12px rgba(80,70,229,.5)}
.nav__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.nav__prog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--v500),var(--v600));border-radius:0 2px 2px 0}
.brand__word{font:700 19px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.nav__links{display:flex;align-items:center;gap:2px;margin:0 auto}
.navitem{display:flex}
.navlink{
  display:inline-flex;align-items:center;gap:7px;
  font:500 14.5px/1 var(--body);color:var(--ink2);
  padding:9px 13px;border-radius:var(--r-pill);
  transition:color .22s var(--ease),background .22s var(--ease);
}
.navlink:hover,.navitem.is-open .navlink{color:var(--ink);background:rgba(31,31,33,.045)}
.navlink__c{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.5;
  transition:transform .3s var(--ease-out),opacity .22s}
.navitem.is-open .navlink__c{transform:translateY(1px) rotate(-135deg);opacity:.9}

/* ── mega panel ────────────────────────────────────────────
   Positioned against the fixed header, not the trigger, so every
   panel lands on the same optical centre line the way LangChain's does. */
.mega{
  --w:660px;
  position:absolute;top:100%;left:50%;width:min(var(--w),calc(100vw - 32px));
  transform:translate(-50%,-6px) scale(.985);transform-origin:top center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),transform .34s var(--ease-out),visibility .26s;
  z-index:2;
}
.navitem.is-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
/* invisible bridge: the pointer crosses the gap without the panel closing */
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.mega__in{
  display:grid;gap:6px 22px;grid-template-columns:repeat(2,1fr);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:18px;box-shadow:var(--sh-4);
}
.mega--feat{--w:820px}
.mega__in--feat{grid-template-columns:1fr 300px;gap:6px 18px}
.mega__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega__k{font:700 10.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);padding:8px 10px 10px}
.mlink{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:var(--r);
  transition:background .2s var(--ease),transform .3s var(--ease-out)}
.mlink:hover{background:var(--v50)}
.mlink:hover .mlink__ic{background:var(--v600);color:#fff;border-color:transparent}
.mlink__ic{flex:none;width:32px;height:32px;border-radius:var(--r-xs);display:grid;place-items:center;
  border:1px solid var(--line);background:var(--white);color:var(--v600);
  font:500 11px/1 var(--mono);letter-spacing:.02em;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.mlink__t{display:block;min-width:0}
.mlink__t b{display:block;font:500 14.5px/1.35 var(--body);color:var(--ink);letter-spacing:-.01em}
.mlink__t i{display:block;font:400 13px/1.45 var(--body);font-style:normal;color:var(--ink3);margin-top:2px}
.mfeat{display:flex;flex-direction:column;padding:14px;border-radius:var(--r-lg);
  background:var(--n50);border:1px solid var(--line-soft);
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.mfeat:hover{background:var(--v50);border-color:var(--tint)}
.mfeat__shot{display:block;position:relative;border-radius:var(--r-xs);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:1369/700;background:var(--white);box-shadow:var(--sh-1)}
/* same sidebar crop as the showcase stage, cut off at half height */
.mfeat__shot img{position:absolute;top:0;left:-21.25%;width:121.25%;max-width:none;height:auto}
.mfeat b{font:500 14.5px/1.3 var(--body);color:var(--ink);margin-top:12px}
.mfeat i{font:400 12.5px/1.5 var(--body);font-style:normal;color:var(--ink3);margin-top:4px}
.mfeat__go{margin-top:10px;font:500 12.5px/1 var(--body);color:var(--v600);display:inline-flex;gap:6px}
.mfeat:hover .mfeat__go span{transform:translateX(3px)}
.mfeat__go span{transition:transform .3s var(--ease-out)}

.nav__scrim{position:fixed;inset:0;z-index:90;background:rgba(31,31,33,.28);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s}
body.has-mega .nav__scrim{opacity:1;visibility:visible}
body.has-mega .nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

.nav__cta{display:flex;align-items:center;gap:10px}
.nav__links+.nav__cta{margin-left:0}
.nav__burger{display:none;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:rgba(255,255,255,.6);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .25s,border-color .25s}
.nav__burger:hover{background:var(--n50)}
.nav__burger span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:1px;
  transition:transform .3s var(--ease-out),opacity .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(128px,13vw,168px) 0 clamp(72px,8vw,104px);
  overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(to right,rgba(31,31,33,.045) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(31,31,33,.045) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(118% 78% at 50% 0%,#000 18%,transparent 76%);
  mask-image:radial-gradient(118% 78% at 50% 0%,#000 18%,transparent 76%);
}
/* a soft floor under the hero so it settles into the strip below */
.hero::after{content:"";position:absolute;inset:auto 0 0;height:180px;z-index:-2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--white))}
.hero__px{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero__glow{position:absolute;z-index:-3;inset:-22% -10% auto;height:660px;
  background:radial-gradient(46% 58% at 22% 34%,rgba(91,91,214,.15),transparent 70%),
             radial-gradient(40% 52% at 78% 26%,rgba(125,118,232,.12),transparent 70%);
  filter:none}
/* the card column leads: the prompt-detail design needs its width to read as
   the real screen it is, so the headline column gives some back */
.hero__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,4vw,56px);align-items:center}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
/* three fixed tracks, not a wrapping row: on a narrower headline column the row
   used to break and leave a divider hanging at the start of the second line */
.hero__facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;padding-top:26px;
  border-top:1px solid var(--line)}
.hero__facts li{font-size:13.5px;color:var(--ink3);padding-right:20px}
.hero__facts li+li{padding-left:20px;border-left:1px solid var(--line)}
.hero__facts b{font:700 23px/1 var(--display);color:var(--ink);letter-spacing:-.035em;margin-right:8px}
.hero__card{position:relative;perspective:1400px}
/* pool of light behind the product card so it reads as elevated, not pasted */
.hero__card::before{content:"";position:absolute;inset:6% -6% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 50% 60%,rgba(80,70,229,.16),transparent 72%);
  filter:blur(6px)}

/* ── hero card, in three dimensions ─────────────────────
   The card and its chips sit on separate Z planes inside one
   perspective, so a pointer tilt separates them instead of
   sliding a flat image around. Angles stay under 8°: past that
   it stops reading as depth and starts reading as a toy.
   JS writes --rx/--ry (tilt) and --mx/--my (glare origin). */
.hero__tilt{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out)}
/* while the pointer is driving it, the tween would only add lag */
.hero__card.is-tilting .hero__tilt{transition:none}
.hero__tilt .pcard{transform:translateZ(0);transform-style:preserve-3d;
  transition:box-shadow .5s var(--ease-out)}
.hero__card.is-tilting .pcard{box-shadow:0 6px 14px -8px rgba(31,31,33,.16), 0 60px 100px -50px rgba(31,31,33,.55)}
/* glare: a soft brand-tinted highlight that tracks the pointer across the face */
.hero__tilt .pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px 340px at var(--mx,50%) var(--my,0%),
             rgba(80,70,229,.13),rgba(80,70,229,.04) 42%,transparent 68%);
  opacity:0;transition:opacity .5s var(--ease)}
.hero__card.is-tilting .pcard::after{opacity:1}

/* floating gamified chips */
.floatchip{
  position:absolute;z-index:3;background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:var(--r-pill);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:9px 15px;font:500 12.5px/1 var(--body);color:var(--ink2);
  box-shadow:var(--sh-3);white-space:nowrap;
}
/* chips ride 46px above the card face; GSAP re-applies this as `z` after the
   intro tween, this line is the no-JS fallback */
.hero__tilt .floatchip{transform:translateZ(46px)}
.floatchip b{color:var(--v600);font-weight:700}
.floatchip--a{top:-20px;left:-28px}
.floatchip--b{bottom:-18px;right:-22px}

/* ── prompt card ─────────────────────────────────────────
   Rebuilt 1:1 from the Promptdec prompt-detail design: category
   pill, title, byline, model chips, score ring, body, six bars,
   action bar. One component, two sizes. */
.pcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:24px;box-shadow:var(--sh-4);
}
.pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.pcard--compact{padding:20px;box-shadow:var(--sh-3)}

.pcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.pcard__headL{min-width:0}
/* the design's category pill is a full pill, not a tag: 152×47 on a 1203 card */
.tagpill{display:inline-block;font:700 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--v600);background:var(--v100);border-radius:var(--r-pill);padding:8px 14px}
.tagpill--xs{padding:5px 8px;font-size:9px;border-radius:var(--r-xs)}
.pcard__title{font:700 clamp(23px,2.7vw,32px)/1.06 var(--display);letter-spacing:-.034em;margin-top:14px}
.pcard__by{margin-top:8px;font-size:13.5px;color:#6e6a7c}
.pcard__by b{color:var(--v500);font-weight:600}

/* score ring — --p (0..1) drives the arc, JS animates it per variant.
   Number and denominator are one centred stack, not a number with a
   separately positioned tail, or the pair sits high in the ring. */
.score{position:relative;flex:none;width:100px;height:100px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.score svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.score circle{fill:none;stroke-width:5.5;stroke-linecap:round}
.score__trk{stroke:var(--v100)}
.score__arc{stroke:var(--green);stroke-dasharray:194.8;
  stroke-dashoffset:calc(194.8 - 194.8 * var(--p,.97));
  transition:stroke-dashoffset .8s var(--ease-out),stroke .5s var(--ease)}
.score[data-tone="warn"] .score__arc{stroke:var(--orange)}
.score[data-tone="bad"] .score__arc{stroke:var(--n200)}
/* design: DM Sans Bold 60 in green over DM Sans Regular 40 in Neutral 500 */
.score b{font:700 32px/1 var(--body);letter-spacing:-.04em;color:var(--green);font-variant-numeric:tabular-nums}
.score i{font:400 19px/1 var(--body);color:var(--n500);font-style:normal;margin-top:-2px}
.score[data-tone="warn"] b{color:var(--orange-ink)}
.score[data-tone="bad"] b{color:var(--n500)}

/* Model chips, 1:1 with the design: a provider-coloured badge carrying the real
   logo, the label in Space Grotesk, the active chip filled with its own colour.
   --c is the design's brand hex (badge, border, dot). --c-on is that hex darkened
   only as far as white 12px label copy needs to clear 4.5:1 on the filled state. */
.pcard__models{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mchip{
  --c:var(--ink3);--c-on:var(--c);
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:30px;padding:0 14px 0 5px;border-radius:var(--r-pill);border:1px solid var(--c);
  background:#fff;color:var(--c);font:700 12px/1 var(--display);letter-spacing:-.01em;
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),
             transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.mchip__badge{flex:none;width:18px;height:18px;border-radius:50%;background:var(--c);
  display:grid;place-items:center;transition:background .25s var(--ease)}
.mchip__badge img{width:13px;height:13px}
.mchip:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
.mchip.is-on{background:var(--c-on);border-color:var(--c-on);color:#fff;
  box-shadow:0 1px 2px rgba(31,31,33,.12),0 8px 18px -12px var(--c)}
/* on the filled chip the badge disappears into the fill, exactly as designed */
.mchip.is-on .mchip__badge{background:transparent}
.mchip--claude{--c:#D97757;--c-on:#A9502E}
.mchip--gpt{--c:#74AA9C;--c-on:#47786A}
.mchip--ds{--c:#0047E9;--c-on:#0047E9}
/* the fourth slot is the unclaimed variant: same chip, drawn open */
.mchip--open{--c:var(--n300);--c-on:var(--ink3);color:var(--ink3);border-style:dashed}
.mchip--open .mchip__badge{background:none;box-shadow:inset 0 0 0 1px var(--n300);
  color:var(--ink3);font:400 13px/1 var(--body)}
.mchip--open.is-on{border-style:solid}
.mchip--open.is-on .mchip__badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);color:#fff}

.pcard__meta{display:flex;align-items:center;gap:15px 14px;flex-wrap:wrap;margin-top:13px}
.pcard__count{color:#6e6a7c}

.pcard__body{margin-top:18px;position:relative;overflow:hidden;
  background:#f7f7fb;border:1px solid rgba(232,232,240,.9);
  border-radius:var(--r);padding:18px 26px 18px 20px;min-height:168px;display:flex;align-items:center}
/* the design's scroll affordance: track, thumb and a fade off the bottom edge */
.pcard__scroll{position:absolute;top:14px;bottom:14px;right:10px;width:5px;border-radius:3px;
  background:var(--v100)}
.pcard__scroll i{position:absolute;left:0;right:0;top:0;height:var(--th,38%);border-radius:3px;
  background:var(--v500);transition:height .5s var(--ease-out)}
.pcard__body::after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:34px;pointer-events:none;
  border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(to bottom,rgba(247,247,251,0),#f7f7fb)}
.pcard__text{font:400 13px/1.66 var(--display);color:rgba(71,71,71,.75);white-space:pre-line}
.pcard__empty{width:100%;text-align:center;padding:6px 0}
.pcard__emptyTitle{font:700 15px/1.3 var(--display);color:var(--ink);letter-spacing:-.02em}
.pcard__emptyCopy{font-size:13.5px;color:var(--ink3);margin:7px 0 16px}

.pcard__acts{display:flex;align-items:center;gap:9px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
/* design: the arrow leads the label on the primary action */
.pcard__open{height:30px;padding:0 16px;gap:7px}
.pcard__openIc{width:8px;height:8px;flex:none}
.pcard__acts--slim{margin-top:16px;padding-top:14px;justify-content:space-between;flex-wrap:wrap}
/* the status is the only elastic item, so the buttons never wrap onto a new row */
.pcard__status{color:var(--green-ink);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* hero card: the freshness state is a dot, not a sentence */
.pcard__dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--green);
  box-shadow:0 0 0 4px var(--green100);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.pcard__dot[data-tone="warn"]{background:var(--orange);box-shadow:0 0 0 4px var(--amber100)}
.pcard__status[data-tone="warn"]{color:var(--orange-ink)}
.pcard__acts .btn{margin-left:auto}
.ghostbtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font:600 12.5px/1 var(--body);color:rgba(31,31,33,.74);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.ghostbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.ghostbtn:hover{border-color:var(--tint);color:var(--v600);background:var(--v50)}

/* Score rows, design metrics: a fixed label column so the bars line up across
   both columns, 8px fully-rounded track, value in DM Sans Bold. */
.pcard__scores{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:13px 30px;
  transition:opacity .35s var(--ease)}
.sbar{display:grid;grid-template-columns:82px minmax(0,1fr) 30px;align-items:center;gap:11px;
  font:500 13px/1 var(--body);color:rgba(31,31,33,.74)}
.sbar i{display:block;height:8px;border-radius:var(--r-pill);background:#f7f2f2;overflow:hidden}
.sbar b{display:block;height:100%;width:100%;border-radius:var(--r-pill);background:var(--v500);
  transform:scaleX(var(--s,0));transform-origin:left;transition:transform .55s var(--ease)}
.sbar u{text-decoration:none;font:700 15px/1 var(--body);color:var(--ink);text-align:right}
.hint{margin-top:16px;text-align:center}

/* Digits that change in place must not reflow their neighbours. */
.sbar u,.dim__v,.heat__stats b,.metric b{font-variant-numeric:tabular-nums}
/* Headings: no orphan last word. */
.h2,.bx__t,.cta__t,.insight__q,.pcard-sm h3,.ucard h3,.mstone h3,.citem h3,.tier h3,.dim h3{
  text-wrap:balance}
.lead,.sub,.bx__p,.dim p,.mstone p{text-wrap:pretty}

/* ── model strip ───────────────────────────────────────── */
.strip{border-block:1px solid var(--line);background:#fff;overflow:hidden;padding:22px 0}
/* the track fades into the page edges instead of being cut off by them */
.strip__track{display:flex;width:max-content;will-change:transform}
.strip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.strip__grp{display:flex;align-items:center;gap:56px;padding-right:56px}
.strip__grp span{font:500 15px/1 var(--display);letter-spacing:-.02em;color:var(--n300);white-space:nowrap;
  transition:color .3s}
.strip:hover .strip__grp span{color:var(--ink2)}

/* ── sections ──────────────────────────────────────────── */
.sec{padding:var(--sec-y) 0;position:relative}
/* Sections must not clip, or position:sticky inside them stops working.
   The page-level overflow-x:clip on <html> still contains any bleed. */
section[id],main[id]{scroll-margin-top:92px}
.hero,.strip,.insight,.metrics{overflow:hidden}

/* One tall column parks while its partner scrolls. Pure CSS, no pinning,
   so it never fights the scrollbar. */
.sticky-col{position:sticky;top:104px;align-self:start}
.sec--canvas{background:var(--n50);border-block:1px solid var(--line)}
.sec--dark{background:var(--n900);color:#fff}
.sechead{max-width:800px;margin-bottom:var(--sec-head)}
.sechead .h2{margin-top:20px}
.sechead--split{max-width:none;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap-lg);align-items:end}

/* ── problem grid ──────────────────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.pcard-sm{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 30px;
  box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.pcard-sm:hover{transform:translateY(-3px);border-color:var(--tint);box-shadow:var(--sh-3)}
.pcard-sm .num{font:400 11.5px/1 var(--mono);color:var(--v600)}
.pcard-sm h3{font:700 18px/1.3 var(--display);letter-spacing:-.024em;margin:22px 0 10px}
.pcard-sm p{font-size:14.5px;color:var(--ink2);line-height:1.64}

/* ── core insight ──────────────────────────────────────────
   A dark room with fragments of the product drifting behind the
   claim, then the claim proved with a gauge rather than asserted
   with a bigger font. */
.insight{background:var(--n900);color:#fff;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(110px,13vw,190px) 0}
.insight::after{content:"";position:absolute;inset:auto -20% -70% 20%;height:560px;z-index:-1;
  background:radial-gradient(50% 60% at 50% 50%,rgba(91,91,214,.42),transparent 70%);pointer-events:none}
.insight__grid{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 10%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 10%,transparent 72%)}

/* spliced fragments — real UI, dimmed, at four parallax depths */
.insight__frags{position:absolute;inset:0;z-index:-1;pointer-events:none}
.frag{position:absolute;background:rgba(255,255,255,.045);border:1px solid var(--line-inv);
  border-radius:var(--r-lg);padding:14px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  box-shadow:0 30px 60px -40px #000;color:rgba(255,255,255,.72);width:270px}
.frag__k{color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px}
.frag__bar{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:8px;
  border-bottom:1px solid var(--line-inv-soft)}
.frag__bar .mono-xs{color:rgba(255,255,255,.45)}
.frag__type{font:400 12px/1 var(--mono);color:#fff;border-right:1.5px solid var(--v500);padding-right:2px}
.frag__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-xs);
  font:500 11.5px/1.2 var(--body)}
.frag__row i{width:14px;height:14px;border-radius:4px;background:rgba(91,91,214,.35);flex:none}
.frag__row b{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frag__row .mono-xs{color:rgba(255,255,255,.45)}
.frag__row.is-on{background:rgba(91,91,214,.22);color:#fff}
.frag__diff{margin:8px 0 0;display:grid;gap:3px;font:400 10.5px/1.5 var(--mono);white-space:pre-wrap}
.frag__diff .del{color:#F2A3A3;background:rgba(226,93,93,.12);border-radius:3px;padding:1px 5px}
.frag__diff .add{color:#A8DFA0;background:rgba(63,157,0,.14);border-radius:3px;padding:1px 5px}
/* the four fragments sit in the margins around the claim; none of them may
   compete with the gauge for the middle of the section */
.frag--a{top:13%;left:-4%;opacity:.9}
.frag--b{bottom:10%;left:-7%;width:300px;opacity:.75}
.frag--c{top:16%;right:1%;width:150px;text-align:center;opacity:.9}
.frag--d{bottom:6%;right:-4%;width:240px;opacity:.8}
@media (max-width:1500px){
  .frag--a{left:-9%}
  .frag--b{left:-12%}
  .frag--d{right:-9%}
}
/* The number and its denominator are one centred stack, like .score. As a grid
   the two implicit rows stretched to fill the ring, which parked the score high
   and the /10 down near the bottom edge with a hole between them. */
.frag__ring{width:76px;height:76px;margin:2px auto 10px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:5px solid rgba(63,157,0,.55);color:#fff}
.frag__ring b{font:700 22px/1 var(--display);letter-spacing:-.03em}
.frag__ring i{font:400 10px/1 var(--mono);font-style:normal;color:rgba(255,255,255,.5)}
.frag__line{margin-top:10px;display:grid;gap:9px;font:500 11.5px/1.2 var(--body)}
.frag__line li{display:flex;align-items:center;gap:9px;position:relative}
.frag__line li i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);flex:none}
.frag__line li.is-on i{background:var(--v500);box-shadow:0 0 0 4px rgba(91,91,214,.25)}
.frag__line li span{margin-left:auto;font:400 10px/1 var(--mono);color:rgba(255,255,255,.4)}

.insight__in{position:relative;z-index:1;text-align:center}
.insight .overline{justify-content:center;color:#a9a3ff}
.insight__q{font:700 clamp(30px,5vw,62px)/1.1 var(--display);letter-spacing:-.04em;
  max-width:17ch;margin:28px auto 0;text-wrap:balance}
.insight__q .w{display:inline-block}
.insight__q .w--hl{color:#c9c6ff}

.insight__proof{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,60px);align-items:center;text-align:left;
  margin:clamp(48px,6vw,80px) auto 0;max-width:1000px}
.gauge{position:relative;display:grid;gap:18px;padding:28px 26px 24px;
  border:1px solid var(--line-inv);border-radius:var(--r-xl);
  background:rgba(22,22,25,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 40px 90px -60px #000}
.gauge__cap{color:rgba(255,255,255,.38);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px}
.gauge__row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"lab val" "trk trk";
  gap:8px 12px;align-items:baseline}
.gauge__lab{grid-area:lab;font:500 13px/1.2 var(--body);color:rgba(255,255,255,.72)}
.gauge__val{grid-area:val;color:rgba(255,255,255,.45);font-size:10.5px}
.gauge__track{grid-area:trk;position:relative;height:12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07)}
.gauge__row--hl .gauge__lab,.gauge__row--hl .gauge__val{color:#fff}
.gauge__fill{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill);width:var(--w);
  background:linear-gradient(90deg,var(--v500),#7f78ff);transform:scaleX(var(--g,0));transform-origin:left}
.gauge__row--hl .gauge__fill{background:linear-gradient(90deg,#5B5BD6,#B9B5FF)}
.gauge__fill--ghost{background:none;border:1px dashed rgba(255,255,255,.35)}
.insight__by{color:rgba(255,255,255,.6);font-size:clamp(15px,1.3vw,17px);line-height:1.66}
.insight__by b{color:#fff;font-weight:500;display:block;margin-top:14px}

/* ── scoring dims ──────────────────────────────────────── */
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
/* The meter and its value share one grid row, so the number is centred on the
   bar in every card. Absolutely positioning it to the card's bottom edge left
   it sitting below the bar on any card whose copy ran short. The 1fr row on the
   description keeps every meter on the same line across the row. */
.dim{
  position:relative;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 26px 28px;overflow:hidden;box-shadow:var(--sh-1);
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr auto;align-items:center;
  transition:border-color .3s,transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.dim__k,.dim h3,.dim p{grid-column:1 / -1}
.dim p{align-self:start}
.dim::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--v50),transparent 58%);
  opacity:0;transition:opacity .4s}
.dim:hover{border-color:var(--tint);transform:translateY(-3px);box-shadow:var(--sh-3)}
.dim:hover::before{opacity:1}
.dim>*{position:relative}
.dim__k{color:var(--v600)}
.dim h3{font:700 19px/1.25 var(--display);letter-spacing:-.024em;margin:16px 0 8px}
.dim p{font-size:14px;color:var(--ink2);line-height:1.6;min-height:44px}
.dim__meter{height:5px;border-radius:4px;background:var(--n200);margin:24px 0 0;overflow:hidden}
.dim__meter i{display:block;height:100%;width:100%;border-radius:4px;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--v500),var(--v600))}
.dim__v{margin:24px 0 0 16px;font:500 12px/1 var(--mono);color:var(--ink)}

.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--gap)}
/* the three cards are different lengths; centring the block keeps the row
   optically level instead of leaving one card's text stranded at the top */
.note{background:var(--n50);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;justify-content:center}
.note p+p{margin-top:12px}
.note p:not(.overline){font-size:14.5px;color:var(--ink2);line-height:1.64}
.note b{color:var(--ink)}
.note--dark{background:var(--n900);border-color:var(--n900);color:#fff;box-shadow:var(--sh-3)}
.note--dark p:not(.overline){color:rgba(255,255,255,.66)}
.note--dark b{color:#fff}
.note--dark .overline--v{color:#a9a3ff}
.rings{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap}
.ring{display:inline-flex;align-items:center;gap:7px;font:400 11.5px/1 var(--mono);color:rgba(255,255,255,.6)}
.ring i{width:12px;height:12px;border-radius:50%;border:2px solid currentColor}
.ring--ok{color:#7ac74f}.ring--warn{color:var(--orange)}.ring--bad{color:var(--n500)}

/* ── variants ──────────────────────────────────────────── */
.vsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-lg);align-items:start}
.vsplit__rules{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--sh-1)}
.rules{margin-top:20px;font-size:14px}
.rules th{text-align:left;font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);padding-bottom:14px;border-bottom:1px solid var(--line)}
.rules th:last-child{text-align:right}
.rules td{padding:12px 0;border-bottom:1px solid var(--line-soft);color:var(--ink2);transition:color .25s}
.rules td:last-child{text-align:right}
.rules tr:last-child td{border-bottom:0}
.rules tbody tr:hover td{color:var(--ink)}
.tag{font:700 9.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px}
.tag--sh{background:var(--n50);color:var(--ink3);border:1px solid var(--line)}
.tag--pv{background:var(--v600);color:#fff}
.dash{height:1px;margin:24px 0;background:repeating-linear-gradient(90deg,var(--v600) 0 6px,transparent 6px 12px);opacity:.5}
.vsplit__note{font-size:14.5px;line-height:1.64;color:var(--ink2)}
.vsplit__note b{color:var(--ink)}

/* ── bento ─────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.bx{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;
  box-shadow:var(--sh-1);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;
  display:flex;flex-direction:column}
.bx:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--tint)}
.bx--wide{grid-column:span 2}
.bx--full{grid-column:1 / -1}
.tax{margin-top:auto;padding-top:24px;display:grid;gap:8px}
.tax li{background:var(--n50);border:1px solid var(--line-soft);border-radius:var(--r-xs);padding:10px 12px;color:var(--ink2);
  transition:border-color .25s,color .25s}
.tax li:hover{border-color:var(--tint);color:var(--ink)}
.tax i{color:var(--v600);font-style:normal;padding:0 4px}
.bx--dark{background:var(--n900);border-color:var(--n900);color:#fff;box-shadow:var(--sh-3)}
.bx--dark:hover{border-color:rgba(255,255,255,.18);box-shadow:var(--sh-4)}
.bx--dark .bx__p{color:rgba(255,255,255,.66)}
.bx--dark .overline--v{color:#a9a3ff}
.bx__t{font:700 22px/1.22 var(--display);letter-spacing:-.028em;margin:14px 0 12px}
.bx__p{font-size:15px;line-height:1.66;color:var(--ink2);max-width:52ch}
.bx__foot{margin-top:auto;padding-top:22px}
.bx--dark .bx__foot{color:rgba(255,255,255,.55)}
.journey{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.journey li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  border:1px solid var(--line-inv);border-radius:var(--r-sm);padding:11px 14px;font-size:14px;position:relative;
  transition:background .25s,border-color .25s}
.journey li:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.journey li .mono-xs{color:#a9a3ff}
.journey li+li::before{content:"→";position:absolute;left:-11px;color:rgba(255,255,255,.3);font-size:12px}
.lineage{display:flex;align-items:center;gap:0;margin-top:26px}
.lineage span{width:11px;height:11px;border-radius:3px;background:var(--n200);position:relative}
.lineage span+span{margin-left:34px}
.lineage span+span::before{content:"";position:absolute;right:11px;top:5px;width:34px;height:1px;background:var(--n200)}
.lineage span.on{background:var(--v600);box-shadow:0 0 0 4px var(--v100)}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.slots span{background:var(--v50);color:var(--v600);border:1px solid rgba(80,70,229,.16);
  border-radius:var(--r-xs);padding:7px 10px}
.bench{margin-top:26px;display:grid;gap:12px}
.bench div{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:14px}
.bench i{display:block;height:6px;border-radius:4px;background:var(--n200);position:relative;overflow:hidden}
.bench i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:4px;
  background:linear-gradient(90deg,var(--v500),var(--v600))}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips li{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 14px;font-size:13.5px;color:var(--ink2);background:#fff;box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.chips li:hover{border-color:var(--tint);color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-2)}
.chips b{font:400 10.5px/1 var(--mono);color:var(--v600);background:var(--v50);padding:4px 6px;border-radius:5px}

/* ── product showcase · pinned horizontal ───────────────
   The rail is translated on x by ScrollTrigger while the section
   is pinned, so vertical scroll reads as travel through five
   rooms. Everything below 900px falls back to a plain stack —
   the pin is scoped in JS with gsap.matchMedia(). */
.scope{position:relative;padding:var(--sec-y) 0 0;background:var(--n50);
  border-top:1px solid var(--line-soft)}
.scope__head{max-width:900px}
.scope__h{margin-top:18px}
.scope__head .sub{margin-top:20px}
/* The pinned stage is exactly one viewport tall and lays out as a column:
   rail centred, HUD parked at the bottom. Anything that does not fit inside
   it would land under the fold while the section is pinned, which is how a
   caption ends up unreadable. */
/* The stage carries its own 80px of nav clearance inside, and that padding is
   dead space in the approach before the pin engages, so the block is pulled
   back up under the intro by roughly the same amount. */
.scope__pin{position:relative;margin-top:clamp(-28px,-1.8vw,-10px);
  height:100vh;height:100svh;min-height:600px;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 0 20px;overflow:hidden}
.scope__rail{flex:1 1 auto;display:flex;align-items:center;gap:clamp(28px,4vw,64px);
  padding:0 max(var(--pad),calc((100vw - var(--wrap)) / 2));will-change:transform}

/* The caption hangs off the bottom edge of the frame rather than sitting on
   top of it: still layered, but it never covers the screen it describes. */
/* Width is capped by the height left over after the caption, so the frame
   shrinks on short screens instead of pushing the caption off the stage.
   1.372 is the frame's aspect ratio (1369/998). */
.scene{position:relative;flex:none;display:block;
  width:min(880px,72vw,calc((100vh - 400px) * 1.372));
  width:min(880px,72vw,calc((100svh - 400px) * 1.372))}
.scene__shot{width:100%}
.scene__cap{position:relative;z-index:2;width:min(560px,86%);
  margin:-26px 0 0 clamp(20px,4vw,48px);padding:20px 26px 22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-4)}
.scene--flip .scene__cap{margin-left:auto;margin-right:clamp(20px,4vw,48px)}
/* inside the card, so the opaque surface does not paint over it */
.scene__no{position:absolute;top:14px;right:22px;font:700 clamp(34px,3.2vw,46px)/1 var(--display);
  letter-spacing:-.05em;color:var(--v100)}
.scene__k{color:var(--v600);letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.scene__cap h3{margin-top:10px;font:700 clamp(18px,1.7vw,23px)/1.2 var(--display);letter-spacing:-.03em;
  text-wrap:balance}
.scene__cap p{margin-top:10px;font:400 14px/1.55 var(--body);color:var(--ink2);text-wrap:pretty}

/* browser frame */
.shot{border-radius:var(--r-xl);overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-4)}
.shot__bar{display:flex;align-items:center;gap:7px;padding:0 16px;height:38px;
  background:linear-gradient(180deg,#fff,var(--n50));border-bottom:1px solid var(--line-soft)}
.shot__bar i{width:9px;height:9px;border-radius:50%;background:var(--n200);flex:none}
.shot__bar i:first-child{background:#E5A2A2}
.shot__bar i:nth-child(2){background:#EBD08C}
.shot__bar i:nth-child(3){background:#A9CF9B}
.shot__bar span{margin-left:12px;font-size:11.5px;color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot__win{--x:21.25%;position:relative;aspect-ratio:1369/998;overflow:hidden;background:var(--n50)}
.shot--cat .shot__win{--x:22%}
/* max-width:100% from the base reset would cap the over-sized crop, so it is
   explicitly cleared here: the whole trick is that the shot IS wider than its window */
.shot__win img{position:absolute;top:0;left:calc(-1 * var(--x));width:calc(100% + var(--x));
  max-width:none;height:auto}

/* Short laptop screens: stacking the caption under the frame would squeeze the
   frame to about half size, so the scene turns side-by-side instead and the
   caption drops its card treatment. */
@media (min-width:901px) and (max-height:830px){
  .scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
    align-items:center;gap:clamp(20px,2.4vw,34px);
    width:min(1140px,88vw,calc((100vh - 202px) * 1.372 + 334px));
    width:min(1140px,88vw,calc((100svh - 202px) * 1.372 + 334px))}
  .scene__cap,.scene--flip .scene__cap{width:auto;margin:0;padding:0;
    background:none;border:0;box-shadow:none}
  .scene__no{top:auto;bottom:-46px;right:auto;left:0}
}

/* HUD */
.scope__hud{position:relative;z-index:3;flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;width:100%;max-width:var(--wrap);
  margin:clamp(18px,2.2vw,30px) auto 0;padding:0 var(--pad)}
.scope__steps{display:flex;gap:22px;flex-wrap:wrap}
.scope__steps li{display:flex;align-items:center;gap:8px;font:500 12.5px/1 var(--body);color:var(--n300);
  transition:color .4s var(--ease)}
.scope__steps li b{font:400 11px/1 var(--mono);color:inherit}
.scope__steps li.is-on{color:var(--ink)}
.scope__steps li.is-on b{color:var(--v600)}
.scope__prog{flex:1;min-width:120px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.scope__prog i{display:block;height:100%;width:100%;background:var(--v600);border-radius:2px;
  transform:scaleX(0);transform-origin:left}

/* ── model picker band ─────────────────────────────────── */
.pickshot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gap-lg);
  align-items:center;margin:clamp(48px,5vw,72px) 0 0;padding:clamp(28px,3.4vw,44px);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--white);box-shadow:var(--sh-2)}
.pickshot__t{font:700 clamp(21px,2.1vw,26px)/1.22 var(--display);letter-spacing:-.025em;margin-top:14px}
.pickshot figcaption{margin-top:14px;font:400 15px/1.62 var(--body);color:var(--ink2);max-width:46ch}
.pickshot__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pickshot__facts li{border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;
  background:var(--n50);color:var(--ink2)}
.pickshot__img{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-3);background:var(--white)}
.pickshot__img img{width:100%;height:auto}

/* ── adaptive modes ────────────────────────────────────── */
.modes{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:34px;overflow:hidden;
  box-shadow:var(--sh-2)}
/* gap:0 keeps each column exactly (100% - 12px)/3 wide, which is what the
   indicator translates by. Spacing between pills comes from their padding. */
.modes__switch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--n50);border:1px solid var(--line-soft);border-radius:var(--r);padding:6px}
.modes__ind{position:absolute;top:6px;left:6px;height:calc(100% - 12px);border-radius:var(--r-sm);
  background:#fff;box-shadow:var(--sh-2);border:1px solid var(--line);
  width:calc((100% - 12px)/3);transition:transform .45s var(--ease-out)}
.mswitch{position:relative;z-index:1;padding:14px 10px;border-radius:var(--r-sm);text-align:center;
  display:flex;flex-direction:column;gap:4px;transition:color .3s}
.mswitch b{font:700 16px/1.2 var(--display);letter-spacing:-.022em;color:var(--ink3);transition:color .3s}
.mswitch span{font-size:12.5px;color:var(--ink3);transition:color .3s}
.mswitch:hover b{color:var(--ink2)}
.mswitch.is-on b{color:var(--v600)}
.mswitch.is-on span{color:var(--ink2)}
.modes__desc{margin:28px 0 8px;font-size:15px;line-height:1.66;color:var(--ink2);max-width:78ch;min-height:52px}
.vis{margin-top:16px;font-size:14px}
.vis th{text-align:left;padding:12px 14px;font:700 10px/1 var(--body);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);transition:color .3s,background .3s}
.vis td{padding:13px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink2);
  transition:opacity .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.vis td:first-child,.vis th:first-child{padding-left:0}
.vis td:not(:first-child),.vis th:not(:first-child){text-align:center;opacity:.5}
.vis td[data-v="on"]{color:var(--green-ink)}
.vis td[data-v="mid"]{color:var(--orange-ink)}
.vis td[data-v="off"]{color:var(--ink3)}
.modes[data-mode="0"] .vis :is(td,th):nth-child(2),
.modes[data-mode="1"] .vis :is(td,th):nth-child(3),
.modes[data-mode="2"] .vis :is(td,th):nth-child(4){opacity:1;background:var(--v50)}
.modes[data-mode="0"] .vis th:nth-child(2),
.modes[data-mode="1"] .vis th:nth-child(3),
.modes[data-mode="2"] .vis th:nth-child(4){color:var(--v600)}
.modes__foot{margin-top:22px;line-height:1.6}

/* ── users ─────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.ucard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.ucard:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--tint)}
.ucard--hl{border-color:rgba(80,70,229,.32);background:linear-gradient(170deg,var(--v50),#fff 55%);
  box-shadow:var(--sh-2)}
.ucard__type{color:var(--v600)}
.ucard h3{font:700 21px/1.25 var(--display);letter-spacing:-.026em;margin:16px 0 12px}
.ucard p{font-size:14.5px;line-height:1.66;color:var(--ink2)}
.ucard__mode{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)}
.ucard__mode b{color:var(--v600)}

/* ── connectivity (dark) ───────────────────────────────── */
.sec--dark .sechead{margin-bottom:var(--sec-head)}
.conn{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--gap-lg);align-items:start}
/* command palette — the Promptdec search design, dark-room variant */
.palette{background:#131315;border:1px solid var(--line-inv);border-radius:var(--r-xl);
  box-shadow:0 40px 80px -50px #000, 0 2px 6px rgba(0,0,0,.4);overflow:hidden}
.palette__in{display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--line-inv-soft)}
.palette__ic{width:18px;height:18px;flex:none;fill:none;stroke:rgba(255,255,255,.45);
  stroke-width:1.5;stroke-linecap:round}
.palette__q{flex:1;display:flex;align-items:center;gap:2px;font:400 15px/1 var(--mono);color:#fff;
  min-height:20px}
.palette__caret{width:2px;height:17px;background:var(--v500);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.kbd{font:400 10.5px/1 var(--mono);color:rgba(255,255,255,.6);background:rgba(91,91,214,.16);
  border:1px solid rgba(91,91,214,.28);border-radius:6px;padding:5px 7px;flex:none}
.palette__scroll{padding:12px 12px 4px;max-height:330px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,#000 82%,transparent)}
.palette__k{color:rgba(255,255,255,.35);letter-spacing:.14em;text-transform:uppercase;
  font-size:9.5px;padding:10px 10px 6px}
.palette__list{display:grid;gap:2px}
.palette__row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);
  color:rgba(255,255,255,.72);font-size:14px;transition:background .3s var(--ease),color .3s var(--ease)}
.palette__row--sm{padding:8px 12px;font-size:13.5px}
.palette__row b{font-weight:500;color:inherit}
.palette__row .mono-xs{margin-left:auto;color:rgba(255,255,255,.45);white-space:nowrap}
.palette__row .kbd{margin-left:auto}
.palette__row.is-on{background:rgba(91,91,214,.22);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(91,91,214,.35)}
.palette__tile{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(91,91,214,.24);color:#b9b5ff;font:500 11px/1 var(--mono)}
.palette__t{min-width:0;display:block}
.palette__t b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette__t i{display:block;font:400 11.5px/1.3 var(--body);font-style:normal;color:rgba(255,255,255,.42);
  margin-top:2px}
.palette__ic2{width:15px;height:15px;flex:none;fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.4;
  stroke-linecap:round}
.palette__arw{color:var(--v500);font-size:14px;width:15px;flex:none}
.palette__foot{display:flex;gap:18px;flex-wrap:wrap;padding:12px 20px;
  border-top:1px solid var(--line-inv-soft);font:400 11px/1 var(--body);color:rgba(255,255,255,.42)}
.palette__foot span{display:inline-flex;align-items:center;gap:7px}
.conn__left{display:grid;gap:var(--gap);align-content:start}
.compat{background:rgba(255,255,255,.04);border:1px solid var(--line-inv);
  border-radius:var(--r-xl);padding:28px}
.compat .overline--v{color:#a9a3ff}
.ctable{margin-top:20px;font-size:14px}
.ctable th{text-align:left;padding-bottom:14px;border-bottom:1px solid var(--line-inv);
  font:700 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ctable th:last-child,.ctable td:last-child{text-align:right}
.ctable td{padding:12px 0;border-bottom:1px solid var(--line-inv-soft);color:rgba(255,255,255,.72);
  transition:color .25s}
.ctable tr:last-child td{border-bottom:0}
.ctable td:nth-child(2){color:rgba(255,255,255,.55)}
.ctable tbody tr:hover td{color:#fff}
.vtag{font:400 10.5px/1 var(--mono);padding:5px 8px;border-radius:6px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.55)}
.vtag--now{background:rgba(91,91,214,.28);color:#c9c6ff}
.conn__list{display:grid;gap:0;align-content:start}
.citem{padding:26px 0;border-bottom:1px solid var(--line-inv);position:relative;
  transition:border-color .3s}
.citem:first-child{padding-top:0}
.citem:hover{border-bottom-color:rgba(255,255,255,.22)}
.citem h3{font:700 19px/1.3 var(--display);letter-spacing:-.024em}
.citem p{font-size:14.5px;line-height:1.66;color:rgba(255,255,255,.6);margin-top:10px;max-width:46ch;
  transition:color .3s}
.citem:hover p{color:rgba(255,255,255,.74)}
.pill{position:absolute;top:26px;right:0;font:400 10.5px/1 var(--mono);color:#a9a3ff;
  background:rgba(91,91,214,.18);border-radius:6px;padding:5px 8px}
.citem:first-child .pill{top:0}

/* ── contribution / heatmap ────────────────────────────── */
.gam{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gap);align-items:start}
.heat{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-2)}
.heat__head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.heat__legend{display:flex;align-items:center;gap:4px}
.heat__legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.heat__grid{margin-top:22px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px}
.heat__grid i{width:100%;aspect-ratio:1;border-radius:3px;transform:scale(.2);opacity:0}
/* level classes come last so they beat the `.heat__grid i` base (equal specificity) */
i.l0{background:var(--n50);box-shadow:inset 0 0 0 1px var(--line)}
i.l1{background:#d9d7fb}
i.l2{background:#b3aef6}
i.l3{background:#7d76e8}
i.l4{background:var(--v600)}
.heat__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;padding-top:24px;
  border-top:1px solid var(--line)}
.heat__stats b{display:block;font:700 26px/1 var(--display);letter-spacing:-.035em;color:var(--ink)}
.heat__stats span{display:block;margin-top:7px;font-size:12.5px;color:var(--ink3)}
.gam__side{display:grid;gap:var(--gap)}

/* ── roadmap ───────────────────────────────────────────── */
.rmap{position:relative;padding-top:6px}
.rmap__line{position:absolute;top:0;left:0;right:0;height:2px;background:var(--n200);border-radius:2px;overflow:hidden}
.rmap__line i{position:absolute;inset:0;background:var(--v600);transform:scaleX(0);transform-origin:left}
.rmap__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding-top:32px}
.mstone{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.mstone::before{content:"";position:absolute;top:-38px;left:0;width:9px;height:9px;border-radius:3px;
  background:#fff;box-shadow:0 0 0 2px var(--n200)}
.mstone__k{color:var(--v600)}
.mstone h3{font:700 21px/1.25 var(--display);letter-spacing:-.026em;margin:14px 0 10px}
.mstone p{font-size:14.5px;line-height:1.64;color:var(--ink2);margin-bottom:20px}
.mstone__goal{display:inline-block;margin-top:auto;font:500 12.5px/1.4 var(--body);color:var(--ink);
  background:var(--v50);border:1px solid rgba(80,70,229,.14);border-radius:var(--r-xs);padding:9px 12px}

/* ── pricing ───────────────────────────────────────────── */
.grid3--price{align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:34px;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.tier:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--tint)}
.tier__n{color:var(--v600)}
.tier h3{font:700 24px/1.2 var(--display);letter-spacing:-.03em;margin:14px 0 16px}
.tier__p{display:flex;align-items:baseline;gap:9px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.tier__p b{font:700 42px/1 var(--display);letter-spacing:-.045em}
.tier__p span{font-size:13.5px;color:var(--ink3)}
.tier ul{margin:24px 0 28px;display:grid;gap:12px}
.tier li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:2px;
  background:var(--v100);box-shadow:inset 0 0 0 2px var(--v600)}
.tier .btn{margin-top:auto}
.tier--dark{background:var(--n900);border-color:var(--n900);color:#fff;box-shadow:var(--sh-3)}
.tier--dark:hover{border-color:rgba(255,255,255,.18);box-shadow:var(--sh-4)}
.tier--dark .tier__n{color:#a9a3ff}
.tier--dark .tier__p{border-bottom-color:var(--line-inv)}
.tier--dark .tier__p span,.tier--dark li{color:rgba(255,255,255,.66)}
.tier--dark li::before{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px #a9a3ff}

/* ── metrics ───────────────────────────────────────────── */
.metrics{padding:clamp(72px,7.6vw,108px) 0;background:var(--n50);border-block:1px solid var(--line);overflow:hidden}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:38px}
.metric b{display:block;font:700 clamp(34px,4.2vw,52px)/1 var(--display);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--ink3);max-width:24ch}
/* the rule belongs to the grid above it, so it runs the full content width
   instead of stopping at the note's 70ch measure */
.mgrid{padding-bottom:40px;border-bottom:1px solid var(--line)}
.metrics__note{margin-top:28px;font-size:14.5px;line-height:1.64;color:var(--ink2);max-width:70ch}

/* ── CTA ───────────────────────────────────────────────── */
.cta{padding:clamp(84px,9vw,130px) 0}
/* the waitlist panel runs wider than the page grid: 1280px of panel on a
   1366 laptop, and it keeps growing to 1328 on bigger screens */
.cta>.wrap{max-width:1328px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right))}
.cta__panel{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#0f0f13;isolation:isolate;
  box-shadow:0 4px 12px -6px rgba(31,31,33,.3), 0 60px 110px -60px rgba(31,31,33,.65)}
/* The layer is parallaxed up by 14% of its own height on scroll, so it carries
   22% of bleed below the panel; without it the drift exposes a black floor.
   Gradient Y positions/radii are divided by 1.22 to keep the rest look identical. */
/* One hue. The green/blue/orange version read as a stock rainbow next to a page
   that is violet everywhere else, so the depth comes from value, not from hue. */
.cta__aurora{position:absolute;inset:0 0 -22%;z-index:0;
  background:
    radial-gradient(58% 79% at 88% 88.5%,rgba(125,118,232,.55),transparent 62%),
    radial-gradient(62% 75% at 66% 85.2%,rgba(80,70,229,.72),transparent 62%),
    radial-gradient(58% 74% at 44% 86.9%,rgba(91,91,214,.85),transparent 64%),
    radial-gradient(50% 66% at 20% 91.8%,rgba(80,70,229,.42),transparent 60%);
  will-change:transform}
.cta__in{position:relative;z-index:1;padding:clamp(40px,5vw,68px) clamp(24px,4.4vw,60px);color:#fff;
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,4.4vw,56px);align-items:center}
.cta__in>*{min-width:0}
.cta__mark{width:56px;height:56px;border-radius:100px;margin-bottom:28px;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.8)}
.cta .overline{color:#c9c6ff}
.cta .dot{background:#c9c6ff}
.cta__t{font:700 clamp(30px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.032em;margin-top:20px}
.cta__p{margin-top:20px;max-width:44ch;color:rgba(255,255,255,.72);font-size:16px;line-height:1.64}

/* full-width flex item so the field and button still share the next row */
.cta__label{flex:0 0 100%;margin:34px 0 10px;font:500 13px/1 var(--body);color:rgba(255,255,255,.72)}
.cta__form{display:flex;gap:10px;flex-wrap:wrap}
.cta__status{margin-top:14px;color:#d7ffd0;min-height:1.2em}
.cta__field{flex:1 1 260px;display:flex;align-items:center;gap:2px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);padding:0 18px;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cta__field:hover{border-color:rgba(255,255,255,.34)}
.cta__field:focus-within{background:rgba(255,255,255,.15);border-color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.cta__brk{font:400 20px/1 var(--mono);color:rgba(201,198,255,.65);transition:color .3s}
.cta__field:focus-within .cta__brk{color:#fff}
.cta__form input{flex:1;min-width:0;background:none;border:0;outline:none;
  padding:14px 8px;color:#fff;font-size:15px}
/* outline:none above is replaced by a ring on the rounded wrapper */
.cta__field:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}
.cta__form input::placeholder{color:rgba(255,255,255,.55)}
.cta__fine{margin-top:16px;color:rgba(255,255,255,.5)}

.cta__right{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:32px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta__rightHead{color:rgba(255,255,255,.5)}
.steps{margin-top:24px;display:grid;gap:2px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.steps li:last-child{border-bottom:0}
.steps__n{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);
  background:rgba(91,91,214,.28);box-shadow:inset 0 0 0 1px rgba(201,198,255,.3);
  font:400 12px/1 var(--mono);color:#c9c6ff}
.steps b{display:block;font:700 15.5px/1.3 var(--display);letter-spacing:-.022em}
.steps p{margin-top:6px;font-size:13.5px;line-height:1.58;color:rgba(255,255,255,.58)}
.dash--inv{background:repeating-linear-gradient(90deg,#c9c6ff 0 6px,transparent 6px 12px);opacity:.4;margin:22px 0 16px}
.steps__foot{color:rgba(255,255,255,.5)}

/* ── footer ────────────────────────────────────────────────
   The page ends on brand violet, so every foreground token in
   here is inverted: type, links, rules and the brand lockup. */
.foot{position:relative;padding:clamp(64px,7vw,92px) 0 32px;background:var(--v600);color:#fff;
  overflow:hidden;isolation:isolate}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(90% 80% at 20% 0%,#000,transparent 70%);
  mask-image:radial-gradient(90% 80% at 20% 0%,#000,transparent 70%)}
.foot__in{display:grid;grid-template-columns:1.15fr 1.85fr;gap:var(--gap-lg)}
.foot .brand__word{color:#fff}
/* the mark is a violet tile: on violet it needs an edge to sit against */
.foot .brand__mark{box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 8px 20px -12px rgba(0,0,0,.55)}
.foot__brand p{margin-top:18px;font-size:14.5px;color:rgba(255,255,255,.72);max-width:34ch;line-height:1.64}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot__cols div{display:grid;gap:12px;align-content:start;justify-items:start}
.foot__cols .overline{margin-bottom:6px;color:rgba(255,255,255,.55)}
.foot__cols a{font-size:14.5px;color:rgba(255,255,255,.82);
  transition:color .25s var(--ease),transform .25s var(--ease-out)}
.foot__cols a:hover{color:#fff;transform:translateX(3px)}
.foot .mono-xs{color:rgba(255,255,255,.6)}
/* .wrap's own padding would let a border-top overhang the content edge by
   24px on each side, so the rule is drawn inside the padding box instead */
.foot__bar{position:relative;margin-top:clamp(48px,5.4vw,72px);padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot__bar::before{content:"";position:absolute;top:0;height:1px;background:rgba(255,255,255,.22);
  left:max(var(--pad),env(safe-area-inset-left));right:max(var(--pad),env(safe-area-inset-right))}

/* ── reveal state (gated on .anim so no-JS still renders) ─ */
.anim [data-rv]{opacity:0;transform:translateY(16px)}
.anim .h-hero .line>span{transform:translateY(105%)}
.anim .insight__q .w{opacity:0;transform:translateY(20px)}

/* ── grain ─────────────────────────────────────────────────
   One fixed 200px tile, soft-light so it reads on the white
   canvas and on the dark bands without two overlays. */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;contain:strict;
  mix-blend-mode:soft-light;opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ── custom cursor ─────────────────────────────────────────
   Fine pointers only. The dot tracks 1:1, the ring lags and
   swells over anything that declares a cursor state. */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;display:none;opacity:0}
.cursor__dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--v600)}
.cursor__ring{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid rgba(80,70,229,.5);display:grid;place-items:center;
  transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),
             background .3s var(--ease),border-color .3s var(--ease)}
.cursor__label{font:500 10.5px/1 var(--body);letter-spacing:.04em;color:#fff;opacity:0;
  transform:scale(.9);transition:opacity .2s var(--ease),transform .3s var(--ease-out);white-space:nowrap}
.cursor.is-link .cursor__ring{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(80,70,229,.12)}
.cursor.is-label .cursor__ring{width:76px;height:76px;margin:-38px 0 0 -38px;
  background:var(--v600);border-color:transparent}
.cursor.is-label .cursor__label{opacity:1;transform:scale(1)}
.cursor.is-label .cursor__dot{opacity:0}
/* On dark and on the violet footer every cursor state inverts, fill included:
   a violet ring on a violet surface is an invisible cursor. */
.cursor.on-dark .cursor__dot{background:#fff}
.cursor.on-dark .cursor__ring{border-color:rgba(255,255,255,.7)}
.cursor.on-dark.is-link .cursor__ring{background:rgba(255,255,255,.16)}
.cursor.on-dark.is-label .cursor__ring{background:#fff;border-color:transparent}
.cursor.on-dark.is-label .cursor__label{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  /* the native arrow is redundant once the ring is doing the job — but text
     keeps its I-beam, so cursor:none stops at the interactive elements */
  html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor .mchip,
  html.has-cursor .faq__scroller,html.has-cursor [data-cursor]{cursor:none}
}
/* ── pointer spotlight on cards ────────────────────────── */
[data-spot]{position:relative}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(340px 260px at var(--sx,50%) var(--sy,0%),
             rgba(80,70,229,.14),transparent 62%)}
[data-spot].is-spot::after{opacity:1}
.qcard--dark[data-spot]::after{background:radial-gradient(340px 260px at var(--sx,50%) var(--sy,0%),
  rgba(255,255,255,.10),transparent 62%)}

/* ── mega menu · intro column + vignettes ────────────────
   Three tracks: an intro that sets the section up with a live
   vignette, then two link columns. The Resources panel keeps its
   own two-track layout, so it is re-declared after this rule. */
.mega{--w:1020px}
.mega__in{grid-template-columns:minmax(0,290px) minmax(0,1fr) minmax(0,1fr);gap:6px 30px;padding:22px}
.mega--feat{--w:840px}
.mega__in--feat{grid-template-columns:minmax(0,1fr) 300px;gap:6px 22px}
.mega__intro{padding:10px 24px 10px 12px;border-right:1px solid var(--line-soft);min-width:0}
.mega__title{font:700 21px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.mega__lede{margin:10px 0 16px;font:400 13.5px/1.55 var(--body);color:var(--ink3)}
.vign{margin-top:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--n50);
  padding:14px;box-shadow:var(--sh-1)}
.vign__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vign__score{font:700 15px/1 var(--display);color:var(--green-ink);letter-spacing:-.03em}
.vign__t{margin-top:10px;font:500 14px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.vign__bars{display:grid;gap:5px;margin-top:12px}
.vign__bars i{display:block;height:4px;border-radius:3px;background:var(--n200);position:relative;
  overflow:hidden}
.vign__bars i::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--v600);
  transform:scaleX(var(--s));transform-origin:left}
.vign__foot{margin-top:12px;color:var(--n500)}
.vign--thread{display:grid;gap:8px}
.vign__msg{display:flex;gap:9px;align-items:flex-start;font:400 11.5px/1.45 var(--body);color:var(--ink3)}
.vign__msg--in{margin-left:16px}
.vign__msg b{color:var(--ink);font-weight:500;font-size:11.5px}
.vign__msg i{font-style:normal;display:block}
.vign__av{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--v100);color:var(--v600);font:500 10px/1 var(--mono)}
.vign__av--2{background:var(--n900);color:#fff}
.mega__col--wide{padding-right:8px}

/* laptops and small desktops: the panel keeps the links and drops the intro
   column rather than squeezing three tracks into 900px */
@media (min-width:821px) and (max-width:1200px){
  .mega{--w:640px}
  .mega--feat{--w:660px}
  .mega__in{grid-template-columns:1fr 1fr;gap:6px 20px}
  .mega__in--feat{grid-template-columns:1fr 240px}
  .mega__intro{display:none}
  .mfeat__shot{aspect-ratio:1369/560}
  .nav__in{gap:18px}
  .navlink{padding:9px 10px;font-size:14px}
}
@media (min-width:821px) and (max-width:1040px){
  .mega{--w:560px}
  .mega--feat{--w:560px}
  .mega__in--feat{grid-template-columns:1fr}
  .mfeat{display:none}
}

/* ── FAQ · horizontal ──────────────────────────────────── */
.faq{padding:var(--sec-y) 0;position:relative;overflow:hidden}
.faq__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.faq__head .h2{margin-top:16px}
.faq__ctrl{display:flex;align-items:center;gap:18px}
.faq__hint{color:var(--n500)}
.faq__btns{display:flex;gap:8px}
.rnd{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;
  display:grid;place-items:center;color:var(--ink);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .3s var(--ease-out)}
.rnd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.rnd:hover{background:var(--v600);border-color:transparent;color:#fff;transform:translateY(-2px)}
.rnd:disabled{opacity:.35;pointer-events:none}
.faq__scroller{
  display:flex;gap:var(--gap);margin-top:clamp(32px,4vw,52px);
  padding:6px max(var(--pad),calc((100vw - var(--wrap)) / 2)) 26px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
}
.faq__scroller::-webkit-scrollbar{display:none}
.faq__scroller.is-drag{cursor:grabbing;scroll-snap-type:none}
.faq__scroller:focus-visible{outline:2px solid var(--v600);outline-offset:-2px}
.qcard{
  position:relative;flex:none;width:min(420px,80vw);scroll-snap-align:center;
  display:flex;flex-direction:column;padding:30px 30px 26px;border-radius:var(--r-xl);
  background:var(--n50);border:1px solid var(--line);overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s var(--ease);
}
/* faint page-grid inside the card, so it reads as a surface not a box */
.qcard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(to right,rgba(31,31,33,.035) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(31,31,33,.035) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(90% 70% at 100% 0%,#000,transparent 72%);
  mask-image:radial-gradient(90% 70% at 100% 0%,#000,transparent 72%)}
.qcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--tint)}
.qcard__n{position:relative;z-index:2;color:var(--v600);letter-spacing:.1em}
.qcard h3{position:relative;z-index:2;margin-top:16px;font:700 clamp(19px,1.7vw,22px)/1.24 var(--display);
  letter-spacing:-.03em;text-wrap:balance}
.qcard p{position:relative;z-index:2;margin-top:14px;font:400 14.5px/1.65 var(--body);color:var(--ink2)}
.qcard p b{color:var(--ink);font-weight:500}
.qcard__tag{position:relative;z-index:2;align-self:flex-start;margin-top:auto;padding-top:22px;
  font:400 11px/1 var(--mono);color:var(--n500);letter-spacing:.08em;text-transform:uppercase}
.qcard__cta{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font:500 14px/1 var(--body);color:var(--v600)}
.qcard__cta span{transition:transform .3s var(--ease-out)}
.qcard__cta:hover span{transform:translateX(4px)}
.qcard--dark{background:var(--n900);border-color:transparent;color:#fff}
.qcard--dark::before{background-image:linear-gradient(to right,rgba(255,255,255,.06) 1px,transparent 1px),
                     linear-gradient(to bottom,rgba(255,255,255,.06) 1px,transparent 1px)}
.qcard--dark h3{color:#fff}
.qcard--dark p{color:rgba(255,255,255,.66)}
.qcard--dark .qcard__n{color:#a9a3ff}
.qcard--dark .qcard__tag{color:rgba(255,255,255,.4)}
.qcard--end{background:linear-gradient(180deg,var(--v50),#fff);border-color:var(--tint)}
.faq__rail{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.faq__rail i{display:block;height:100%;width:100%;background:var(--v600);border-radius:2px;
  transform:scaleX(.2);transform-origin:left}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1080px){
  .hero__in,.vsplit,.conn,.gam,.sechead--split,.cta__in{grid-template-columns:1fr;gap:44px}
  .sticky-col{position:static;top:auto}
  .cta__p{max-width:none}
  .sechead--split{align-items:start}
  .sub--r{max-width:62ch}
  .grid4,.dims,.notes,.bento,.grid3,.mgrid,.rmap__cols{grid-template-columns:repeat(2,1fr)}
  .bx--wide{grid-column:span 2}
  .pickshot{grid-template-columns:1fr}
  .insight__proof{grid-template-columns:1fr;gap:32px}
  .frag--a,.frag--c{display:none}
  .frag--b{left:-6%;bottom:6%}
  .frag--d{right:-6%;top:8%;bottom:auto}
  /* once the hero stacks, the chips have no margin to float into and end up
     straddling the card edge, so they sit out the narrow layouts */
  .floatchip{display:none}
  .rmap__line{display:none}
  .mstone::before{display:none}
  .rmap__cols{padding-top:0;gap:34px}
  /* the card leads on tablet: it is the thing worth looking at */
  .hero__in{gap:40px}
}
/* Below 900 the showcase stops travelling sideways and becomes a
   stack: the pin is never created, so there is no scroll hijack on
   touch and no wide rail to measure. */
@media (max-width:900px){
  .scope__pin{overflow:visible;height:auto;min-height:0;display:block;padding:0;
    margin-top:clamp(44px,9vw,64px)}
  .scope__rail{display:grid;gap:clamp(48px,9vw,72px);padding:0 var(--pad);width:100%}
  .scene{width:100%;display:block}
  .scene__cap,.scene--flip .scene__cap{width:100%;margin:0;justify-self:auto;
    border-radius:0 0 var(--r-xl) var(--r-xl);border-top:0;background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--sh-2)}
  .scene__shot{border-radius:var(--r-xl) var(--r-xl) 0 0}
  .scene__no{top:-46px;right:4px;bottom:auto;color:var(--v100)}
  .scope__hud{display:none}
  .frag{display:none}
  .insight__q{max-width:22ch}
}

@media (max-width:820px){
  :root{--pad:20px}
  .nav__links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(255,255,255,.96);backdrop-filter:blur(18px) saturate(1.6);
    -webkit-backdrop-filter:blur(18px) saturate(1.6);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
    padding:6px var(--pad) 16px;margin:0;
    max-height:calc(100dvh - 68px);overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .28s var(--ease),transform .28s var(--ease-out),visibility .28s}
  .nav.is-open .nav__links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav__cta{margin-left:auto}
  .nav__links+.nav__cta{margin-left:auto}
  .hide-sm{display:none}
  .nav__burger{display:flex}
  /* the drawer turns every mega into an accordion: same markup, no floating panel */
  .navitem{display:block}
  .navlink{width:100%;justify-content:space-between;padding:15px 0;border-radius:0;
    border-bottom:1px solid var(--line-soft);font-size:16px;color:var(--ink)}
  .navlink:hover,.navitem.is-open .navlink{background:none}
  .mega{position:static;width:100%;left:auto;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease-out)}
  .navitem.is-open .mega{transform:none;grid-template-rows:1fr}
  .mega::before{display:none}
  .mega__in{overflow:hidden;min-height:0;grid-template-columns:1fr;gap:0;
    background:none;border:0;box-shadow:none;padding:4px 0 10px;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .mega__in--feat{grid-template-columns:1fr}
  /* the drawer keeps the links and drops the desktop-only preview column */
  .mega__intro{display:none}
  .mega__k{padding:10px 0 6px}
  .mlink{padding:10px 0}
  .mlink:hover{background:none}
  .mfeat{display:none}
  .nav__scrim{display:none}
  .grid4,.dims,.notes,.bento,.grid3,.mgrid,.rmap__cols,.heat__stats,.foot__in,.foot__cols{grid-template-columns:1fr}
  .heat__stats{grid-template-columns:repeat(2,1fr)}
  .foot__cols{grid-template-columns:repeat(2,1fr);gap:26px}
  .bx--wide{grid-column:span 1}
  .cta__right{padding:24px}
  .cta__form .btn{width:100%}
  .modes{padding:24px 20px}
  .modes__switch{grid-template-columns:1fr;gap:4px;padding:4px}
  .modes__ind{display:none}
  .mswitch{flex-direction:row;align-items:center;gap:10px;justify-content:flex-start;text-align:left;padding:13px}
  .mswitch.is-on{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-2)}
  .vis-wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:0 20px}
  .vis{min-width:600px}
  .pcard__scores{grid-template-columns:1fr}
  .pcard__head{gap:14px}
  .score{width:76px;height:76px}
  .score b{font-size:24px}
  .score i{font-size:14px}
  .pcard__count{width:100%}
  .pcard__acts{gap:8px}
  .pcard__acts .btn{margin-left:0;width:100%}
  .pcard__open{height:38px}
  /* three tracks are too narrow to read at this width: stack them, and the
     dividers rotate with the layout */
  .hero__facts{grid-template-columns:1fr}
  .hero__facts li{padding-right:0}
  .hero__facts li+li{padding-left:0;border-left:0;margin-top:14px;padding-top:14px;
    border-top:1px solid var(--line)}
  .pcard__status{width:100%;order:3}
  .faq__head{align-items:flex-start}
  .faq__ctrl{width:100%;justify-content:space-between}
  .qcard{width:min(360px,84vw);padding:26px 24px 22px}
  .bench div{grid-template-columns:120px 1fr}
  .floatchip{display:none}
  .hero__facts li{padding-right:22px}
  .hero__facts li+li{padding-left:22px}
  .foot__bar{justify-content:flex-start;gap:8px}
}

@media (max-width:520px){
  .nav__in{gap:10px;padding:11px var(--pad)}
  .nav.is-stuck .nav__in{padding-top:9px;padding-bottom:9px}
  /* brand + CTA + burger have to clear 390px together, so the CTA drops its arrow */
  .nav__cta .btn{padding:9px 13px;font-size:13px;gap:0}
  .nav__cta .btn__arw{display:none}
  .brand__mark{width:30px;height:30px}
  .brand__word{font-size:17px}
  .h-hero{font-size:clamp(31px,8.4vw,40px)}
  .hero__btns .btn{width:100%}
  /* the fact row stacks rather than squeezing three numbers onto one line */
  .hero__facts{gap:14px;flex-direction:column;align-items:flex-start}
  .hero__facts li{padding:0}
  .hero__facts li+li{padding:0;border-left:0}
  .pcard,.bx,.tier,.heat,.modes,.compat,.palette{border-radius:var(--r-lg)}
  .pcard,.pcard--compact{padding:18px}
  .pcard__title{font-size:20px}
  .bx,.tier,.heat{padding:24px}
  .dim,.ucard,.note,.pcard-sm,.vsplit__rules{padding:24px}
  .tier__p b{font-size:38px}
}

/* Coarse pointers get the 44px minimum target on every control.
   Desktop keeps the tighter visual rhythm. */
@media (pointer:coarse){
  .mchip{min-height:44px;height:44px;padding:0 18px 0 7px}
  .ghostbtn{min-height:44px}
  .rnd{width:48px;height:48px}
  .nav__burger{width:44px;height:44px}
  .mswitch{min-height:48px}
  .nav__links a{padding:12px 0}
  .foot__cols a{padding:5px 0}
  .cta__form input{padding:16px 8px}
  /* hover lifts on touch stick after the tap; drop them */
  .pcard-sm:hover,.dim:hover,.bx:hover,.ucard:hover,.tier:hover,.chips li:hover{transform:none}
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .anim [data-rv]{opacity:1;transform:none}
  .anim .h-hero .line>span{transform:none}
  .anim .insight__q .w{opacity:1;transform:none}
  .hero__px{display:none}
  /* everything scroll-driven resolves to its finished state */
  .cursor{display:none!important}
  .grain{opacity:.5}
  .scope__prog i,.gauge__fill{transform:none}
  .scope__rail{transform:none!important}
  .faq__scroller{scroll-behavior:auto}
}