/* ======================================================================
   VisionForgeX — public website
   ----------------------------------------------------------------------
   THE IDEA. A forge: a page goes in cold and comes out earning. Colour
   is therefore not decoration here, it is temperature. The six "heat"
   colours below (--h1 … --h6) run cold blue to gold in the order a page
   goes through the product, and a thing is only ever given one of them
   because it belongs to that step. Everything that is not a step stays
   on the neutral scale (ink, bone, mist).

   TYPE. One family, Archivo, used across its width axis: the expanded
   black cut for lines that have to land, normal width for reading. The
   file is served from /assets/fonts (SIL Open Font License, see OFL.txt
   there) — no third-party font request.

   MOTION. One thing moves: the stage (section 6). It is driven by
   classes that site.js sets from the scroll position; this file only
   says what each class looks like. Nothing else on the page animates in
   for its own sake.

   NAMING. No class here contains "ad", "ads", "advert", "banner" or
   "sponsor" as a word — ad blockers hide elements by such names. Slots
   are .slot, the bottom one is .dock. Keep it that way.

   Sections: 1 tokens · 2 base · 3 type · 4 buttons and links · 5 header
   6 the stage · 7 home: hero and story · 8 home: sections · 9 products
   10 partners · 11 contact · 12 footer · 13 small screens · 14 less motion
   ====================================================================== */

/* ---------- 1. tokens ---------- */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
:root{
  --ink:#150B2E;        /* the canvas: steel at night */
  --ink-1:#1B1039;
  --ink-2:#231547;      /* plates raised off the canvas */
  --ink-3:#2E1D5C;
  --rule:rgba(196,178,255,.16);
  --rule-2:rgba(196,178,255,.32);
  --bone:#F4EFFB;       /* white-hot: primary text */
  --mist:#BDB2D8;       /* secondary text */
  --dim:#9388B3;        /* captions; still 5.5:1 on ink */

  /* heat: cold to hot, in the order a page goes through the forge */
  --h1:#58B4FF;         /* 1 read */
  --h2:#8F7FFF;         /* 2 place */
  --h3:#D573F2;         /* 3 label */
  --h4:#FF6B5E;         /* 4 compete */
  --h5:#FF9F45;         /* 5 prove */
  --h6:#FFD166;         /* 6 paid */
  --heat:linear-gradient(90deg,var(--h1),var(--h2) 22%,var(--h3) 42%,var(--h4) 62%,var(--h5) 80%,var(--h6));

  --brand:#8D5DD9;
  --hdr:68px;
  --gut:clamp(20px,4.4vw,56px);
  --ease:cubic-bezier(.22,.9,.3,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
}
[data-heat="1"],[data-g="1"]{--c:var(--h1)}
[data-heat="2"],[data-g="2"]{--c:var(--h2)}
[data-heat="3"],[data-g="3"]{--c:var(--h3)}
[data-heat="4"],[data-g="4"]{--c:var(--h4)}
[data-heat="5"],[data-g="5"]{--c:var(--h5)}
[data-heat="6"],[data-g="6"]{--c:var(--h6)}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 20px);overflow-x:clip}
body{
  margin:0;min-height:100vh;background:var(--ink);color:var(--bone);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;font-weight:400;font-stretch:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
/* two fixed washes of the coldest colours, so the canvas has depth before anything heats up */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70vmax 50vmax at 88% -8%,rgba(88,180,255,.13),transparent 62%),
    radial-gradient(60vmax 60vmax at -12% 34%,rgba(141,93,217,.20),transparent 60%),
    radial-gradient(70vmax 50vmax at 70% 108%,rgba(143,127,255,.12),transparent 60%),
    var(--ink);
}
/* the same canvas, hot. site.js fades it in with how far down the page you are (--sp, 0 to 1),
   so every page starts cold at the top and ends warm at the bottom, like the thing it describes. */
.wash{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--sp,0);mix-blend-mode:screen;
  background:
    radial-gradient(84vmax 56vmax at 86% 116%,rgba(255,140,50,.50),rgba(255,107,94,.16) 46%,transparent 66%),
    radial-gradient(64vmax 60vmax at -16% 74%,rgba(255,96,84,.26),transparent 60%),
    radial-gradient(60vmax 40vmax at 58% -14%,rgba(213,115,242,.16),transparent 60%);
}
/* film grain: keeps large dark areas from banding */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
img,svg{max-width:100%}
::selection{background:var(--h6);color:var(--ink)}
:focus-visible{outline:2px solid var(--h6);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1296px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--bone);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.ico{width:1.1em;height:1.1em;flex:0 0 auto}
[hidden]{display:none !important}

/* ---------- 3. type ---------- */
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
.d1,.d2,.d3{font-weight:900;letter-spacing:-.018em;text-wrap:balance}
.d1{font-size:clamp(2.2rem,5.35vw,4.85rem);line-height:.98;font-stretch:125%}
.d2{font-size:clamp(1.75rem,3.5vw,3.05rem);line-height:1.03;font-stretch:122%;font-weight:800}
.d3{font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.12;font-stretch:116%;font-weight:800;letter-spacing:-.012em}
.lede{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.5;color:var(--mist);max-width:46ch;text-wrap:pretty}
p{text-wrap:pretty}

/* ---------- 4. buttons and links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:0 1.55rem;
  border:1px solid transparent;border-radius:10px;background:var(--bone);color:var(--ink);
  font:inherit;font-weight:800;font-stretch:112%;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.btn:hover{background:var(--h6)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--rule-2)}
.btn--ghost:hover{background:rgba(244,239,251,.07);border-color:var(--bone)}
.btn--sm{min-height:42px;padding:0 1.05rem;font-size:.9375rem;border-radius:9px}
.btn[disabled]{opacity:.55;cursor:default}
.link{color:var(--bone);text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1.5px;text-underline-offset:.28em;transition:text-decoration-color .2s,color .2s}
.link:hover{color:var(--h6);text-decoration-color:currentColor}

/* ---------- 5. header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);transition:background-color .3s,backdrop-filter .3s}
.hdr.is-stuck{background:rgba(21,11,46,.9);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.hdr-in{height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.logo{display:inline-flex;color:var(--bone);flex:0 0 auto}
.logo-svg{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,22px);margin-right:auto}
.nav-link{
  display:inline-flex;align-items:center;gap:.3em;height:40px;padding:0 .65rem;border:0;border-radius:8px;background:none;
  color:var(--mist);font:inherit;font-size:.9688rem;font-weight:600;text-decoration:none;cursor:pointer;transition:color .2s,background-color .2s;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--bone);background:rgba(244,239,251,.06)}
.nav-link[aria-current="page"],.nav-link[data-current]{color:var(--bone)}
.nav-link .ico{width:1em;height:1em;transition:transform .25s var(--ease)}
.nav-link[aria-expanded="true"] .ico{transform:rotate(180deg)}
.hdr-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:none;width:44px;height:44px;border:1px solid var(--rule-2);border-radius:10px;background:none;color:var(--bone);align-items:center;justify-content:center;cursor:pointer}
.burger .ico{width:22px;height:22px}
/* the heat line: how far down the page you are, in the forge's own colours */
.heatbar{position:absolute;inset:auto 0 0 0;height:2px;background:var(--rule);opacity:0;transition:opacity .3s}
.hdr.is-stuck .heatbar{opacity:1}
.heatbar i{display:block;height:100%;background:var(--heat);transform-origin:0 50%;transform:scaleX(0)}

.nav-drop{position:relative}
.drop{
  position:absolute;left:-18px;top:calc(100% + 12px);width:min(620px,86vw);padding:10px;
  background:#1B1039;border:1px solid var(--rule-2);border-radius:16px;box-shadow:0 30px 80px -20px rgba(4,1,12,.85);
}
.drop-list{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-list a{display:grid;gap:2px;padding:12px 14px 12px 20px;border-radius:10px;text-decoration:none;color:inherit;position:relative;transition:background-color .2s}
.drop-list a::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--c,var(--dim))}
.drop-list a:hover{background:rgba(244,239,251,.07)}
.drop-list b{font-weight:700;font-stretch:108%;font-size:.9688rem}
.drop-list span{font-size:.8438rem;line-height:1.4;color:var(--mist)}
.drop-all{display:block;margin:8px 4px 4px;padding:12px 14px;border-top:1px solid var(--rule);color:var(--bone);font-weight:700;font-size:.9375rem;text-decoration:none}
.drop-all:hover{color:var(--h6)}

.m-menu{position:fixed;inset:0;z-index:60;background:var(--ink);display:flex;flex-direction:column;padding:0 var(--gut) max(24px,env(safe-area-inset-bottom));overflow-y:auto}
.m-menu-top{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.m-menu .burger{display:inline-flex}
.m-nav{display:grid;gap:2px;padding:18px 0 28px}
.m-nav>a{font-size:clamp(1.9rem,9vw,2.6rem);font-weight:900;font-stretch:112%;letter-spacing:-.015em;line-height:1.15;color:var(--bone);text-decoration:none;padding:.18em 0}
.m-sub{display:grid;gap:0;margin:2px 0 14px;border-left:1px solid var(--rule);padding-left:16px}
.m-sub a{display:block;padding:.42em 0;color:var(--mist);text-decoration:none;font-weight:600;font-size:1.0625rem}
.m-sub a::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.7em;background:var(--c,var(--dim));vertical-align:.08em}
.m-menu-cta{margin-top:auto;display:grid;gap:10px}

/* ---------- 6. the stage ----------
   Sizes inside are in em; one em is 1/40 of the stage's width, so the
   whole picture scales as one. Text never drops under 9.5px. */
.stage-wrap{container-type:inline-size;width:100%;max-width:560px;margin-inline:auto}
.stage{position:relative;aspect-ratio:40/50;font-size:14px;font-size:clamp(6.4px,2.5cqw,14.5px);line-height:1.2;--hue:#8A93D8;-webkit-user-select:none;user-select:none}
.stage[data-s="1"]{--hue:var(--h1)}
.stage[data-s="2"]{--hue:var(--h2)}
.stage[data-s="3"]{--hue:var(--h3)}
.stage[data-s="4"]{--hue:var(--h4)}
.stage[data-s="5"]{--hue:var(--h5)}
.stage[data-s="6"]{--hue:var(--h6)}
.stage .t,.fact,.pin b,.slot-name,.slot-kv,.bid,.sold,.dock-sold,.label,.duel,.ledger,.eg{font-size:max(1.05em,9.5px)}

.aura{position:absolute;inset:-12% -28% -8%;border-radius:50%;opacity:0;transition:opacity 1.1s ease;pointer-events:none;background:radial-gradient(closest-side,var(--a),transparent 72%)}
.aura[data-h="0"]{--a:rgba(112,128,216,.24)}
.aura[data-h="1"]{--a:rgba(88,180,255,.34)}
.aura[data-h="2"]{--a:rgba(143,127,255,.38)}
.aura[data-h="3"]{--a:rgba(213,115,242,.34)}
.aura[data-h="4"]{--a:rgba(255,107,94,.34)}
.aura[data-h="5"]{--a:rgba(255,159,69,.36)}
.aura[data-h="6"]{--a:rgba(255,209,102,.40)}
.stage[data-s="0"] .aura[data-h="0"],.stage[data-s="1"] .aura[data-h="1"],.stage[data-s="2"] .aura[data-h="2"],.stage[data-s="3"] .aura[data-h="3"],
.stage[data-s="4"] .aura[data-h="4"],.stage[data-s="5"] .aura[data-h="5"],.stage[data-s="6"] .aura[data-h="6"]{opacity:1}

/* what the system has learned about the page */
.facts{position:absolute;left:2em;right:2em;top:0;height:3.1em;display:flex;align-items:center;gap:.6em;white-space:nowrap}
.fact{padding:.34em .75em;border-radius:99em;border:1px solid rgba(88,180,255,.5);background:rgba(88,180,255,.12);color:#BFE2FF;font-weight:600;opacity:0;transform:translateY(.7em);transition:opacity .4s,transform .5s var(--ease)}
.stage.s1-4 .fact{opacity:1;transform:none}
.stage.s1-4 .fact:nth-child(2){transition-delay:.12s}
.stage.s1-4 .fact:nth-child(3){transition-delay:.24s}
.stage.s3-1 .fact{opacity:0;transition-delay:0s}

/* the page */
.sheet{
  position:absolute;left:2em;right:2em;top:3.8em;bottom:0;overflow:hidden;border-radius:1.5em 1.5em 0 0;
  background:linear-gradient(180deg,#26184F,#1C113E 70%);border:1px solid rgba(196,178,255,.22);border-bottom:0;
  box-shadow:0 3em 7em -2.5em rgba(4,1,12,.9),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .7s var(--ease),opacity .45s;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 3.2em),rgba(0,0,0,.55));mask-image:linear-gradient(#000 calc(100% - 3.2em),rgba(0,0,0,.55));
}
.stage.s2-4 .sheet{-webkit-mask-image:none;mask-image:none}
.sh-bar{height:2.8em;display:flex;align-items:center;gap:.8em;padding:0 1.4em;border-bottom:1px solid rgba(196,178,255,.12)}
.sh-logo{width:1.3em;height:1.3em;border-radius:.38em;background:rgba(244,239,251,.5)}
.sh-pill{width:3.2em;height:.6em;border-radius:1em;background:rgba(196,178,255,.24)}
.sh-pill--btn{margin-left:auto;width:4.6em;height:1.35em;border-radius:.5em;background:rgba(196,178,255,.18)}
.sh-title{padding:1.5em 3em 1.3em;display:grid;gap:.6em}
.sh-title i{display:block;height:1.5em;border-radius:.4em;background:rgba(244,239,251,.66)}
.sh-title i:nth-child(1){width:86%}
.sh-title i:nth-child(2){width:57%}
.sh-title i:nth-child(3){height:.5em;width:30%;margin-top:.3em;background:rgba(196,178,255,.3)}
.flow{padding:0 3em;counter-reset:para}
.para{position:relative;display:grid;gap:.6em;margin-bottom:1.4em;counter-increment:para}
.para i{display:block;height:.6em;border-radius:1em;background:rgba(196,178,255,.24);transition:background-color .45s}
.para i:last-child{width:61%}
.para::before{content:"P" counter(para);position:absolute;left:-2.45em;top:-.3em;font-size:max(.95em,9px);font-weight:800;color:var(--h1);opacity:0;transform:translateX(-.5em);transition:opacity .3s,transform .4s var(--ease)}
.pic{height:6em;margin-bottom:1.4em;border-radius:.8em;background:linear-gradient(135deg,rgba(143,127,255,.28),rgba(88,180,255,.14))}

/* 1 read */
.scan{position:absolute;left:0;right:0;top:0;height:7em;pointer-events:none;opacity:0;transform:translateY(-7em);
  background:linear-gradient(180deg,transparent,rgba(88,180,255,.14) 55%,rgba(88,180,255,.34) 96%,#BFE2FF 99%,transparent)}
.stage.s1-1 .scan{animation:scan 1.7s cubic-bezier(.45,0,.55,1) both}
@keyframes scan{0%{transform:translateY(-7em);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateY(47em);opacity:0}}
.stage.s1-1 .para::before{opacity:1;transform:none;transition-delay:calc(var(--i) * .2s + .25s)}
.stage.s1-1 .para i{background:rgba(88,180,255,.4);transition-delay:calc(var(--i) * .2s + .25s)}
.stage.s3-1 .para::before{opacity:0;transition-delay:0s}
.stage.s2-1 .para i{background:rgba(196,178,255,.24);transition-delay:0s}

.slot{position:relative}
.pin{position:absolute;left:0;right:0;top:-.7em;height:0;border-top:1px dashed var(--h1);opacity:0;transform:scaleX(0);transform-origin:100% 50%;transition:opacity .25s,transform .5s var(--ease);z-index:3;pointer-events:none}
.pin b{position:absolute;right:0;top:0;transform:translateY(-50%);padding:.22em .62em;border-radius:.5em;background:var(--h1);color:#07223A;font-weight:800;white-space:nowrap}
.pin--dock{left:3em;right:3em;top:auto;bottom:1.9em}
.stage.s1-2 .slot[data-slot="1"] .pin,.stage.s1-3 .slot[data-slot="2"] .pin,.stage.s1-3 .pin--dock{opacity:1;transform:none}
.stage.s1-3 .pin--dock{transition-delay:.18s}

/* 2 place */
.slot-box{position:relative;height:0;margin-bottom:0;overflow:hidden;border-radius:.8em;border:1px dashed transparent;
  background:repeating-linear-gradient(135deg,rgba(143,127,255,.20) 0 .5em,rgba(143,127,255,.07) .5em 1em);
  transition:height .75s var(--ease),margin-bottom .75s var(--ease),border-color .4s .15s}
.stage.s2-1 .slot[data-slot="1"] .slot-box,.stage.s2-2 .slot[data-slot="2"] .slot-box{height:7.4em;margin-bottom:1.4em;border-color:var(--h2)}
.stage.s2-1 .slot[data-slot="1"] .pin,.stage.s2-2 .slot[data-slot="2"] .pin,.stage.s2-4 .pin--dock{opacity:0;transition-delay:0s}
.slot-head{display:flex;justify-content:space-between;gap:1em;padding:.5em .8em 0;white-space:nowrap}
.slot-name{color:var(--mist);font-weight:600}
.slot-kv{color:var(--h3);font-weight:700;opacity:0;transform:translateX(.6em);transition:opacity .3s,transform .4s var(--ease)}
.gap-rule{position:absolute;right:-1.55em;bottom:100%;width:.8em;height:11.4em;border:1.5px solid var(--h2);border-left:0;border-radius:0 .5em .5em 0;opacity:0;transform:scaleY(0);transform-origin:50% 0;transition:opacity .3s,transform .6s var(--ease)}
.gap-rule b{position:absolute;left:100%;top:50%;transform:translate(-22%,-50%) rotate(90deg);font-size:max(.92em,9px);font-weight:800;color:var(--h2);white-space:nowrap}
.stage.s2-2 .gap-rule{opacity:1;transform:none;transition-delay:.35s}
.stage.s3-1 .gap-rule{opacity:0;transition-delay:0s}
.dock{position:absolute;left:0;right:0;bottom:0;height:3.8em;padding:0 1.2em;display:flex;align-items:center;justify-content:space-between;gap:1em;white-space:nowrap;
  background:#2B1C5A;border-top:1.5px solid var(--h2);transform:translateY(102%);transition:transform .65s var(--ease),background-color .5s,border-color .4s;overflow:hidden}
.stage.s2-4 .dock{transform:none}

/* 3 label */
.label{
  position:absolute;right:-2.2em;top:5.6em;z-index:6;width:17.4em;padding:1.5em 1.3em 1.1em 1.5em;border-radius:.5em 1.3em 1.3em .5em;
  background:linear-gradient(160deg,#FFFFFF,#F1E3FB);color:#2B0F45;box-shadow:0 1.6em 3.4em -1em rgba(4,1,12,.75);
  transform-origin:88% 0;transform:rotate(26deg) translateY(-12em);opacity:0;pointer-events:none;
  transition:transform .85s var(--spring),opacity .25s;
}
.label::before{content:"";position:absolute;right:1.15em;top:.75em;width:1.05em;height:1.05em;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 .18em #C9A6E6}
.label dl{display:grid;gap:.42em}
.label dl div{display:grid;grid-template-columns:5.3em 1fr;gap:.5em;align-items:baseline;opacity:0;transform:translateX(-.5em);transition:opacity .3s,transform .4s var(--ease)}
.label dt{color:#8A47B8;font-weight:600}
.label dd{font-weight:800}
.label-kw{margin-top:.75em;padding-top:.7em;border-top:1px dashed #C9A6E6;font-weight:700;opacity:0;transition:opacity .4s;white-space:nowrap}
.label-kw span{display:inline-block;margin-right:.4em;padding:.05em .4em;border-radius:.35em;background:#8A47B8;color:#fff;font-weight:800}
.stage.s3-1 .label{opacity:1;transform:rotate(5deg)}
.stage.s3-1 .label dl div{opacity:1;transform:none}
.stage.s3-1 .label dl div:nth-child(1){transition-delay:.35s}
.stage.s3-1 .label dl div:nth-child(2){transition-delay:.47s}
.stage.s3-1 .label dl div:nth-child(3){transition-delay:.59s}
.stage.s3-1 .label dl div:nth-child(4){transition-delay:.71s}
.stage.s3-3 .label-kw{opacity:1}
.stage.s3-2 .slot-box{border-color:var(--h3)}
.stage.s3-2 .slot-kv{opacity:1;transform:none}
.stage.s3-2 .slot[data-slot="2"] .slot-kv{transition-delay:.15s}
.stage.s3-2 .dock{border-color:var(--h3)}
.stage.s4-1 .label{transform:rotate(9deg) translate(1.5em,-2.4em) scale(.82);opacity:.0}

/* 4 compete */
.bids{position:absolute;inset:2em .8em .5em;display:grid;gap:.5em;align-content:center;opacity:0;transition:opacity .3s}
.bid{display:grid;grid-template-columns:6.6em 1fr 3.4em;align-items:center;gap:.6em;white-space:nowrap;transition:opacity .35s}
.bid-n{color:var(--mist);font-weight:600}
.bid-bar{display:block;height:.72em;border-radius:1em;background:rgba(196,178,255,.34);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease),background-color .3s}
.bid-p{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s .45s}
.bid--pass .bid-p{color:var(--dim);font-weight:600}
.bid--late{opacity:0;transform:translateY(.6em);transition:opacity .35s,transform .45s var(--ease)}
.sold{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.1em;padding:0 1.1em;
  background:linear-gradient(115deg,var(--h4),var(--h5) 85%);color:#2A0D04;clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease)}
.sold b{font-weight:800;font-stretch:108%}
.sold span{font-size:1.9em;font-weight:900;font-stretch:118%;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.dock-sold{display:flex;align-items:baseline;gap:.7em;font-weight:800;color:#2A0D04;opacity:0;transition:opacity .4s .2s}
.dock-sold span{font-weight:900;font-stretch:118%}
.stage.s4-1 .slot-head{opacity:.0;transition:opacity .2s}
.stage.s4-1 .slot[data-slot="1"] .slot-head{opacity:1}
.stage.s4-1 .slot-kv{opacity:0}
.stage.s4-1 .slot[data-slot="1"] .slot-box{border-color:var(--h4);border-style:solid;background:rgba(255,107,94,.08)}
.stage.s4-1 .slot[data-slot="1"] .bids,.stage.s4-2 .slot[data-slot="2"] .bids{opacity:1}
.stage.s4-1 .slot[data-slot="1"] .bid-bar,.stage.s4-2 .slot[data-slot="2"] .bid:not(.bid--late) .bid-bar,.stage.s4-3 .slot[data-slot="2"] .bid--late .bid-bar{transform:scaleX(var(--w))}
.stage.s4-1 .slot[data-slot="1"] .bid-p,.stage.s4-2 .slot[data-slot="2"] .bid:not(.bid--late) .bid-p,.stage.s4-3 .slot[data-slot="2"] .bid--late .bid-p{opacity:1}
.stage.s4-1 .slot[data-slot="1"] .bid--win .bid-bar,.stage.s4-3 .slot[data-slot="2"] .bid--win .bid-bar{background:var(--h4);transition-delay:0s,.7s}
.stage.s4-1 .slot[data-slot="1"] .bid--win .bid-n,.stage.s4-3 .slot[data-slot="2"] .bid--win .bid-n{color:var(--bone)}
.stage.s4-2 .slot[data-slot="2"] .slot-box{border-color:var(--h4);border-style:solid;background:rgba(255,107,94,.08)}
.stage.s4-3 .slot[data-slot="2"] .bid--late{opacity:1;transform:none}
.stage.s4-3 .slot[data-slot="2"] .bid--pass{opacity:.45}
.stage.s4-2 .slot[data-slot="1"] .sold,.stage.s4-4 .slot[data-slot="2"] .sold{clip-path:inset(0)}
.bids--3{inset:.75em .8em .55em}
.stage.s4-2 .slot[data-slot="2"] .slot-head{opacity:0}
.stage.s4-4 .dock{background:linear-gradient(115deg,var(--h4),var(--h5));border-color:transparent}
.stage.s4-4 .dock .slot-name{color:#2A0D04}
.stage.s4-4 .dock-sold{opacity:1}

/* 5 prove */
.stage.s5-1 .sheet{transform:scale(.82) translateY(6%);opacity:0}
.stage.s5-1 .label,.stage.s5-1 .facts{opacity:0}
.duel{position:absolute;inset:0;padding:.9em 2em 0;display:flex;flex-direction:column;align-items:center;opacity:0;transform:scale(1.05);pointer-events:none;transition:opacity .45s,transform .6s var(--ease);color:var(--bone)}
.stage.s5-1 .duel{opacity:1;transform:none;transition-delay:.15s}
.stage.s6-1 .duel{opacity:0;transform:scale(.92);transition-delay:0s}
.duel-top{font-weight:700;color:var(--mist)}
.split{width:62%;height:4.2em;margin-top:.5em;overflow:visible}
.split{clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease) .35s}
.split path{fill:none;stroke:var(--h5);stroke-width:2;vector-effect:non-scaling-stroke}
.stage.s5-1 .split{clip-path:inset(-2px)}
.duel-arms{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:2.4em;margin-top:.4em}
.arm{display:grid;gap:.8em;min-width:0;transition:opacity .5s}
.arm-name{display:flex;align-items:center;gap:.6em;font-weight:700;white-space:nowrap}
.arm-name b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:.4em;background:rgba(196,178,255,.22);font-weight:900}
.arm--b .arm-name b{background:var(--h5);color:#2A1203}
.mini{height:22.5em;border-radius:1em;border:1px solid rgba(196,178,255,.24);background:linear-gradient(180deg,#26184F,#1C113E);padding:1.1em 1.1em 0;display:flex;flex-direction:column;gap:.6em;overflow:hidden;transition:border-color .4s,box-shadow .5s}
.mini i{display:block;height:.6em;border-radius:1em;background:rgba(196,178,255,.24);flex:0 0 auto}
.mini i:nth-child(3n){width:64%}
.mini .mini-dock{height:2.3em;width:auto;margin:auto -1.1em 0;border-radius:0;background:var(--h2)}
.mini--top{padding:0 1.1em 1.1em}
.mini--top .mini-dock{margin:0 -1.1em .5em;background:var(--h5)}
.meter{height:.8em;border-radius:1em;background:rgba(196,178,255,.18);overflow:hidden}
.meter i{display:block;height:100%;border-radius:1em;background:var(--mist);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.3,.6,.3,1) .2s}
.arm--b .meter i{background:var(--h5)}
.stage.s5-2 .meter i{transform:scaleX(var(--w))}
.arm-num{display:grid;gap:.1em;opacity:0;transition:opacity .5s}
.arm-num b{font-size:2.7em;font-weight:900;font-stretch:120%;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.arm-num span{color:var(--mist);font-size:.92em}
.stage.s5-3 .arm-num{opacity:1}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:.5em;width:100%;margin-top:1.4em}
.days li{height:.7em;border-radius:1em;background:rgba(196,178,255,.18);transition:background-color .3s}
.stage.s5-2 .days li{background:var(--h5)}
.stage.s5-2 .days li:nth-child(1){transition-delay:.2s}.stage.s5-2 .days li:nth-child(2){transition-delay:.5s}.stage.s5-2 .days li:nth-child(3){transition-delay:.8s}
.stage.s5-2 .days li:nth-child(4){transition-delay:1.1s}.stage.s5-2 .days li:nth-child(5){transition-delay:1.4s}.stage.s5-2 .days li:nth-child(6){transition-delay:1.7s}.stage.s5-2 .days li:nth-child(7){transition-delay:2s}
.days-cap{margin-top:.5em;color:var(--mist);font-weight:600;align-self:flex-start}
.verdict{margin-top:.9em;align-self:flex-start;font-size:1.25em;opacity:0;transform:translateY(.6em);transition:opacity .4s,transform .5s var(--ease)}
.verdict b{font-weight:900;font-stretch:112%;color:var(--h5)}
.stage.s5-3 .verdict{opacity:1;transform:none}
.stamp{margin-top:.8em;align-self:flex-start;display:inline-flex;align-items:center;gap:.45em;padding:.5em .95em .5em .7em;border-radius:99em;background:var(--h6);color:#2A1B03;font-weight:800;opacity:0;transform:scale(.6) rotate(-6deg);transform-origin:0 50%;transition:opacity .25s,transform .5s var(--spring)}
.stamp .ico{width:1.2em;height:1.2em;stroke-width:3}
.stage.s5-4 .stamp{opacity:1;transform:none}
.stage.s5-4 .arm--a{opacity:.42}
.stage.s5-4 .arm--b .mini{border-color:var(--h6);box-shadow:0 0 0 .22em rgba(255,209,102,.22),0 1.5em 3.5em -1em rgba(255,159,69,.5)}

/* 6 paid */
.ledger{position:absolute;inset:3.8em 2em 2.2em;padding:1.9em 1.9em 1.7em;border-radius:1.5em;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#2A1B55,#1C113E);border:1px solid rgba(255,209,102,.34);box-shadow:0 3em 7em -2.5em rgba(4,1,12,.9);
  opacity:0;transform:translateY(9%) scale(.97);pointer-events:none;transition:opacity .5s,transform .7s var(--ease)}
.stage.s6-1 .ledger{opacity:1;transform:none;transition-delay:.15s}
.ledger-h{display:flex;justify-content:space-between;gap:1em;font-weight:800;font-stretch:108%;white-space:nowrap}
.ledger-h span{font-weight:600;font-stretch:100%;color:var(--mist)}
.chart{display:block;width:100%;flex:1 1 auto;min-height:0;margin:1.2em 0 1.4em;overflow:visible}
/* the line is revealed by a wipe, left to right (a dash-offset draw mis-measures a stretched path) */
.chart{clip-path:inset(-6px 100% -6px -6px);transition:clip-path 1.9s cubic-bezier(.4,.1,.3,1)}
.stage.s6-2 .chart{clip-path:inset(-6px)}
.ledger-stats{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:1em;padding-top:1.3em;border-top:1px solid rgba(196,178,255,.2)}
.ledger-stats div{opacity:0;transform:translateY(.6em);transition:opacity .4s,transform .5s var(--ease)}
.ledger-stats dt{color:var(--mist);font-weight:600}
.ledger-stats dd{font-size:1.75em;font-weight:900;font-stretch:118%;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.ledger-stats div:first-child dd{color:var(--h6)}
.stage.s6-3 .ledger-stats div{opacity:1;transform:none}
.stage.s6-3 .ledger-stats div:nth-child(2){transition-delay:.12s}
.stage.s6-3 .ledger-stats div:nth-child(3){transition-delay:.24s}
.receipt{margin-top:1.3em;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.85em 1.1em;border-radius:.9em;background:var(--h6);color:#2A1B03;font-weight:700;white-space:nowrap;
  opacity:0;transform:translateX(18%);transition:opacity .3s,transform .6s var(--spring)}
.receipt b{font-weight:900;font-stretch:112%}
.stage.s6-4 .receipt{opacity:1;transform:none}

.eg{position:absolute;left:2em;top:0;height:3.1em;display:flex;align-items:center;color:var(--dim);opacity:0;transition:opacity .4s;white-space:nowrap}
.stage.s4-1 .eg{opacity:1}

/* while a stage is being put into a starting position nothing may animate */
.stage.is-setting,.stage.is-setting *,.stage.is-setting *::before,.stage.is-setting *::after{transition:none !important;animation:none !important}

/* small stages (phones): one paragraph fewer and shorter slots, so both slots clear the dock */
@container (max-width:430px){
  .stage{aspect-ratio:40/43}
  .para--wide{display:none}
  .pic{height:4.5em}
  .stage.s2-1 .slot[data-slot="1"] .slot-box,.stage.s2-2 .slot[data-slot="2"] .slot-box{height:6.3em;margin-bottom:1.1em}
  .para{margin-bottom:1.1em}
  .gap-rule{height:6.4em}
  .bids{inset:1.7em .7em .3em;gap:.3em}
  .bid{grid-template-columns:6.9em 1fr 3.6em}
  .slot-head{padding-top:.35em}
  .label{width:19em;top:3.4em;right:-1em}
  .mini{height:12.5em}
  .duel-arms{gap:1.6em}
  .arm{gap:.6em}
  .arm-num b{font-size:2.2em}
  .days{margin-top:1em}
  .verdict{font-size:1.12em;margin-top:.6em}
  .stamp{margin-top:.55em}
  .ledger{inset:3.4em 1.4em 1.4em;padding:1.4em}
  .ledger-stats dd{font-size:1.5em}
}

/* ---------- 7. home: hero and story ---------- */
.forge{padding-top:calc(var(--hdr) + clamp(28px,7vh,84px));overflow-x:clip}
.forge-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5.5vw,96px)}
.hero-h{grid-column:1 / -1;margin-bottom:clamp(28px,5vh,56px)}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
.hero-sub{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;min-height:calc(100vh - var(--hdr) - clamp(190px,30vh,290px));padding-bottom:clamp(40px,8vh,80px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,40px)}
.hero-note{margin-top:22px;font-size:.9375rem;color:var(--dim);max-width:44ch}
.hero-cue{margin-top:auto;padding-top:36px;display:flex;align-items:center;gap:14px;font-size:.9375rem;font-weight:600;color:var(--mist)}
.hero-cue i{position:relative;display:block;width:2px;height:44px;border-radius:2px;background:var(--rule-2);overflow:hidden}
.hero-cue i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--h1),var(--h3),var(--h6));animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(-101%)}55%,100%{transform:translateY(101%)}}
.forge-run{display:contents}
.forge-stage{
  grid-column:2;grid-row:2 / span 2;align-self:start;position:sticky;
  --stage-w:min(100%,calc((100vh - var(--hdr) - 148px) * .8),548px);
  top:calc(var(--hdr) + max(14px,(100vh - var(--hdr) - var(--stage-w) * 1.25 - 84px) / 2));
  display:grid;justify-items:center;gap:30px;padding-bottom:40px;
}
.forge-stage .stage-wrap{width:var(--stage-w);max-width:none}
.forge-copy{grid-column:1}
.forge-intro{padding-bottom:clamp(40px,10vh,110px);display:grid;gap:18px}

.gauge{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:var(--stage-w)}
.gauge a{display:grid;gap:7px;padding-top:0;color:var(--dim);text-decoration:none;font-size:.8125rem;font-weight:600;line-height:1.2;transition:color .3s}
.gauge a::before{content:"";height:3px;border-radius:3px;background:var(--rule-2);transition:background-color .4s}
.gauge a b{font-weight:800;font-stretch:112%;font-variant-numeric:tabular-nums;margin-right:.35em}
.gauge a span{font-stretch:96%}
.gauge a:hover{color:var(--bone)}
.gauge a[data-done]::before{background:var(--c);opacity:.55}
.gauge a[data-on]{color:var(--bone)}
.gauge a[data-on]::before{background:var(--c);opacity:1;box-shadow:0 0 14px var(--c)}

.steps{counter-reset:none}
.step{min-height:94vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-block:6vh;max-width:33rem;--c:var(--dim)}
.step[data-step="1"]{--c:var(--h1)}.step[data-step="2"]{--c:var(--h2)}.step[data-step="3"]{--c:var(--h3)}
.step[data-step="4"]{--c:var(--h4)}.step[data-step="5"]{--c:var(--h5)}.step[data-step="6"]{--c:var(--h6)}
.step-k{display:flex;align-items:baseline;gap:.7em;font-weight:700;color:var(--mist)}
.step-k b{font-size:1.5rem;font-weight:900;font-stretch:125%;color:var(--c);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.step>p{color:var(--mist)}
.step .proof{color:var(--bone);font-weight:700;padding-left:16px;border-left:3px solid var(--c);line-height:1.45}
.step-more{font-size:.9375rem}
.forge-eg{padding:0 0 30vh;font-size:.875rem;color:var(--dim)}

/* the hero's one arrival */
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(34px) scale(.975)}to{opacity:1;transform:none}}
.hero-h .ln>span{animation:rise 1s var(--ease) both}
.hero-h .ln:nth-child(2)>span{animation-delay:.09s}
.hero-sub{animation:fadeup .9s var(--ease) .32s both}
.forge-stage{animation:settle 1.1s var(--ease) .2s both}

/* ---------- 8. home: sections ---------- */
.sec{padding-block:clamp(76px,13vh,168px)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(32px,6vh,64px)}
.sec-foot{margin-top:clamp(28px,5vh,48px)}

.rows{border-top:1px solid var(--rule)}
.row{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:6px 40px;align-items:baseline;padding:clamp(18px,2.6vw,30px) 0 clamp(18px,2.6vw,30px) 30px;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;transition:padding-left .45s var(--ease),background-color .3s}
.row::before{content:"";position:absolute;left:2px;top:50%;width:8px;height:8px;border-radius:8px;background:var(--c,var(--dim));transform:translateY(-50%);transition:height .45s var(--ease),width .3s,box-shadow .4s}
.row-n{font-size:clamp(1.35rem,2.9vw,2.35rem);font-weight:800;font-stretch:120%;letter-spacing:-.015em;line-height:1.1;color:var(--mist);transition:color .35s}
.row-l{color:var(--dim);transition:color .35s}
.row.is-hot,.row:hover,.row:focus-visible{padding-left:44px}
.row.is-hot::before,.row:hover::before,.row:focus-visible::before{height:58%;width:5px;box-shadow:0 0 22px var(--c,transparent)}
.row.is-hot .row-n,.row:hover .row-n,.row:focus-visible .row-n{color:var(--bone)}
.row.is-hot .row-l,.row:hover .row-l,.row:focus-visible .row-l{color:var(--mist)}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.trio-i{padding:clamp(24px,3.4vw,44px) clamp(18px,2.6vw,36px);display:grid;gap:8px;align-content:start}
.trio-i+.trio-i{border-left:1px solid var(--rule)}
.trio-i:first-child{padding-left:0}
.trio-k{color:var(--h4);font-weight:700;font-size:.9375rem}
.trio-i>p:last-child{color:var(--mist);margin-top:6px}

.rules-h{font-size:1rem;font-weight:700;color:var(--mist);margin-bottom:clamp(20px,4vh,40px)}
.rules-list{display:grid;gap:clamp(22px,4.4vh,52px)}
.rules-list li{display:grid;gap:10px}
.rules-list b{display:block;color:var(--bone);transition:color .6s var(--ease),-webkit-text-stroke-color .6s}
.rules-list span{color:var(--mist);max-width:46ch;font-size:clamp(1.05rem,1.4vw,1.25rem);transition:opacity .6s}
.js .rules-list li:not(.is-lit) b{color:transparent;-webkit-text-stroke:1.5px rgba(196,178,255,.42)}
.js .rules-list li:not(.is-lit) span{opacity:.35}

.getin-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.getin .sec-head{position:sticky;top:calc(var(--hdr) + 40px);margin-bottom:0}
.getin-note{color:var(--dim);font-size:.9688rem}
.path{position:relative;display:grid;gap:clamp(26px,4.5vh,44px);counter-reset:path;--p:0}
.path::before,.path::after{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--rule)}
.path::after{background:linear-gradient(180deg,var(--h1),var(--h2),var(--h3),var(--h4),var(--h5),var(--h6));transform-origin:50% 0;transform:scaleY(var(--p))}
.path li{position:relative;padding-left:66px;counter-increment:path;display:grid;gap:6px}
.path li::before{content:counter(path);position:absolute;left:0;top:-4px;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);border:2px solid var(--rule-2);color:var(--mist);font-weight:900;font-stretch:118%;transition:border-color .4s,color .4s,background-color .4s}
.path li.is-on::before{border-color:var(--bone);color:var(--ink);background:var(--bone)}
.path h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:800;font-stretch:114%;letter-spacing:-.01em;line-height:1.2}
.path p{color:var(--mist);max-width:44ch}

.closer{padding-block:clamp(90px,17vh,210px)}
.closer .wrap{display:grid;gap:20px;justify-items:start}
.closer .d1{max-width:16ch}
/* the last thing on the page: the whole heat scale, filling as you arrive */
.closer-bar{width:100%;height:10px;border-radius:10px;background:var(--rule);overflow:hidden;margin-bottom:clamp(20px,5vh,48px)}
.closer-bar i{display:block;height:100%;border-radius:10px;background:var(--heat);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ---------- 9. products ---------- */
.phero{padding:calc(var(--hdr) + clamp(44px,11vh,128px)) 0 clamp(40px,8vh,88px);overflow-x:clip}
.phero .wrap{display:grid;gap:clamp(18px,3vh,28px)}
.phero .d1 .ln>span{animation:rise 1s var(--ease) both}
.phero .d1 .ln:nth-child(2)>span{animation-delay:.09s}
.phero .lede{animation:fadeup .9s var(--ease) .3s both}
.tagfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(20px,4vh,44px);border-top:1px solid var(--rule);animation:fadeup .9s var(--ease) .42s both}
.tagfacts li{padding:22px clamp(14px,2.4vw,32px) 0;color:var(--mist);font-size:.9688rem;line-height:1.5}
.tagfacts li:first-child{padding-left:0}
.tagfacts li+li{border-left:1px solid var(--rule)}
.tagfacts b{display:block;color:var(--bone);font-size:1.2rem;font-weight:800;font-stretch:116%;letter-spacing:-.01em;margin-bottom:4px;transition:color .2s}
.tagfacts a{display:block;color:inherit;text-decoration:none}
.tagfacts a:hover b{color:var(--h6)}

.subnav{position:sticky;top:var(--hdr);z-index:40;border-block:1px solid var(--rule);background:rgba(21,11,46,.82);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.subnav ul{position:relative;display:flex;gap:clamp(16px,2vw,32px);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;gap:.55em;height:50px;white-space:nowrap;color:var(--dim);font-size:.9063rem;font-weight:600;text-decoration:none;transition:color .25s}
.subnav a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--dim));opacity:.55;transition:opacity .25s,box-shadow .3s,transform .3s var(--ease)}
.subnav a:hover{color:var(--bone)}
.subnav a[aria-current="true"]{color:var(--bone)}
.subnav a[aria-current="true"]::before{opacity:1;transform:scale(1.35);box-shadow:0 0 12px var(--c,var(--mist))}

.prod{padding-block:clamp(64px,11vh,144px);scroll-margin-top:calc(var(--hdr) + 50px);overflow-x:clip}
.prod+.prod{border-top:1px solid var(--rule)}
.prod-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,6vw,104px);align-items:start}
.prod-copy{display:grid;gap:14px;min-width:0}
/* the bar over a product's name is its heat: which step of the forge it belongs to */
.prod h2.d2::before,.partner h2.d2::before{content:"";display:block;width:56px;height:6px;border-radius:6px;background:var(--c,var(--rule-2));margin-bottom:clamp(18px,3vh,26px);box-shadow:0 0 22px var(--c,transparent)}
.prod-line{font-size:clamp(1.25rem,2vw,1.62rem);font-weight:800;font-stretch:113%;letter-spacing:-.012em;line-height:1.18;color:var(--bone)}
.prod-p{color:var(--mist);max-width:54ch;font-size:clamp(1.05rem,1.3vw,1.17rem);line-height:1.55}
.specs{margin-top:clamp(12px,2.4vh,22px);border-top:1px solid var(--rule)}
.specs>div{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:4px 28px;padding:15px 0;border-bottom:1px solid var(--rule)}
.specs dt{font-weight:700;color:var(--bone)}
.specs dd{color:var(--mist)}
.prod-vis{position:sticky;top:calc(var(--hdr) + 76px);display:grid;justify-items:center;gap:22px;min-width:0}
.prod-vis .stage-wrap{max-width:min(100%,calc((100vh - var(--hdr) - 190px) * .8),500px)}
.replay{height:38px;padding:0 14px;border:1px solid var(--rule-2);border-radius:9px;background:none;color:var(--mist);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:color .2s,border-color .2s}
.replay:hover{color:var(--bone);border-color:var(--bone)}

/* the two demos share one instrument-panel look */
.dials,.trial{width:100%;max-width:520px;padding:clamp(22px,3vw,32px);border:1px solid var(--rule-2);border-radius:22px;background:linear-gradient(180deg,rgba(46,29,92,.62),rgba(27,16,57,.72));box-shadow:0 40px 90px -40px rgba(4,1,12,.9);display:grid;gap:18px}
.dials-h{font-size:1.2rem;font-weight:800;font-stretch:114%;letter-spacing:-.01em;line-height:1.2}
.dials-note{font-size:.8438rem;color:var(--dim)}
.dials-ctl{display:grid;gap:8px}
.dials-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:.9375rem;color:var(--mist);margin-top:8px}
.dials-ctl output{font-weight:800;font-stretch:112%;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.dials input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:none;cursor:pointer;--v:50%}
.dials input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--h2) var(--v),var(--rule-2) var(--v))}
.dials input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--rule-2)}
.dials input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--h2)}
.dials input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--bone);border:0;box-shadow:0 0 0 5px rgba(143,127,255,.28);transition:box-shadow .2s}
.dials input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--bone);border:0;box-shadow:0 0 0 5px rgba(143,127,255,.28)}
.dials input[type=range]:hover::-webkit-slider-thumb,.dials input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(143,127,255,.36)}
.dials input[type=range]:focus-visible{outline:none}
.dials-view{display:grid;gap:16px;margin-top:6px}
/* the article, seen from far away: grey blocks are paragraphs (drawn as lines of text), violet blocks are ads */
.strip{height:350px;padding:14px 16px;border-radius:14px;border:1px solid rgba(196,178,255,.22);background:linear-gradient(180deg,#26184F,#1C113E);display:flex;flex-direction:column;overflow:hidden}
.strip u{display:block;flex:0 0 auto;text-decoration:none;margin-bottom:var(--g);background:repeating-linear-gradient(180deg,rgba(196,178,255,.3) 0 3px,transparent 3px 7px);border-radius:2px}
.strip u:nth-child(4n+1){width:92%}
.strip b{display:block;flex:0 0 auto;height:0;margin-bottom:0;border-radius:5px;background:repeating-linear-gradient(135deg,var(--h2) 0 6px,#7A6AF0 6px 12px);box-shadow:0 0 20px rgba(143,127,255,.6);opacity:0;transform:scaleX(.7);transition:height .45s var(--ease),margin-bottom .45s var(--ease),opacity .3s,transform .45s var(--ease)}
.strip b.is-in{height:var(--s);margin-bottom:var(--g);opacity:1;transform:none}
.dials-out{display:flex;align-items:baseline;gap:14px}
.dials-out b{font-size:clamp(3rem,5vw,4rem);font-weight:900;font-stretch:122%;letter-spacing:-.03em;line-height:.9;color:var(--h2);font-variant-numeric:tabular-nums;min-width:1.1em}
.dials-out span{font-size:.9375rem;color:var(--mist)}

.trial-pick{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px}
.trial-pick button{min-height:40px;padding:0 14px;border:1px solid var(--rule-2);border-radius:9px;background:none;color:var(--mist);font:inherit;font-size:.9375rem;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.trial-pick button:hover{color:var(--bone);border-color:var(--bone)}
.trial-pick button[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.trial-track{position:relative;height:10px;border-radius:10px;background:var(--rule);margin-top:30px}
.trial-track i{position:absolute;inset:0;border-radius:10px;background:var(--h5);transform-origin:0 50%;transform:scaleX(var(--d,0));transition:transform .5s linear}
/* the day label rides the end of the bar; it leans from left-aligned (day 1) to right-aligned (day 28) so it never hangs off either end */
.trial-track span{position:absolute;left:calc(var(--d,0) * 100%);bottom:16px;transform:translateX(calc(var(--d,0) * -100%));font-size:.8125rem;font-weight:800;font-stretch:110%;color:var(--bone);white-space:nowrap;transition:left .5s linear,transform .5s linear}
.trial-log{display:grid;gap:10px;min-height:11.5rem;align-content:start}
.trial-log li{display:grid;grid-template-columns:4.4rem 1fr;gap:12px;font-size:.9375rem;line-height:1.45;color:var(--mist);animation:fadeup .45s var(--ease) both}
.trial-log b{color:var(--bone);font-weight:800;font-stretch:108%;font-variant-numeric:tabular-nums}
.trial-log li[data-k="good"] span{color:var(--h6);font-weight:700}
.trial-log li[data-k="bad"] span{color:var(--h4);font-weight:700}

.prod--wide .wrap{display:grid;gap:14px}
.fmts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(20px,4vh,40px);border-top:1px solid var(--rule)}
.fmts li{padding:clamp(22px,3vw,34px) clamp(14px,1.8vw,26px) 6px;display:grid;gap:10px;align-content:start}
.fmts li:first-child{padding-left:0}
.fmts li+li{border-left:1px solid var(--rule)}
.fmts h3{font-size:1.2rem;font-weight:800;font-stretch:114%;letter-spacing:-.01em;margin-top:8px}
.fmts p{color:var(--mist);font-size:.9688rem;line-height:1.5}
/* one little page per format, with the ad where that format puts it */
.fmt-pic{position:relative;width:92px;height:128px;padding:12px 11px;border-radius:13px;border:1px solid var(--rule-2);background:linear-gradient(180deg,#26184F,#1C113E);display:flex;flex-direction:column;gap:7px;overflow:hidden}
.fmt-pic i{display:block;height:5px;border-radius:5px;background:rgba(196,178,255,.26);flex:0 0 auto}
.fmt-pic i:nth-of-type(even){width:68%}
.fmt-pic b{display:block;border-radius:5px;background:var(--h2);box-shadow:0 0 16px rgba(143,127,255,.5);flex:0 0 auto;transition:transform .5s var(--ease),opacity .4s}
.fmt-pic--inline b{height:30px}
.fmt-pic--dock b{position:absolute;left:0;right:0;bottom:0;height:20px;border-radius:0}
.fmt-pic--full b{position:absolute;inset:7px;border-radius:8px}
.fmt-pic--full b::after{content:"";position:absolute;right:7px;top:7px;width:9px;height:9px;background:linear-gradient(45deg,transparent 42%,#1C113E 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#1C113E 42% 58%,transparent 58%)}
.fmt-pic--lock b{position:absolute;left:14px;right:14px;top:36px;height:56px;border-radius:9px}
.fmt-pic--lock b::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-36%,-50%);border-left:13px solid #1C113E;border-block:8px solid transparent}
.fmt-pic--native b{height:36px;background:none;box-shadow:none;border:1.5px solid var(--h2);padding:7px 7px 0 22px;position:relative;display:grid;gap:5px;align-content:start}
.fmt-pic--native b::before{content:"";position:absolute;left:6px;top:7px;width:11px;height:11px;border-radius:3px;background:var(--h2)}
.fmt-pic--native u{display:block;height:4px;border-radius:4px;background:var(--h2);opacity:.7}
.fmt-pic--native u:last-child{width:60%}
.fmts li:hover .fmt-pic--inline b{transform:scaleY(1.12)}
.fmts li:hover .fmt-pic--dock b{transform:translateY(-4px)}
.fmts li:hover .fmt-pic--full b,.fmts li:hover .fmt-pic--lock b{transform:scale(1.05)}

.twocol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,80px);margin-top:clamp(12px,2.4vh,22px)}
.twocol .specs{margin-top:0}
.twocol .specs>div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr)}

.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,104px);align-items:start}
.faq .sec-head{position:sticky;top:calc(var(--hdr) + 80px);margin-bottom:0}
.faq-list{border-top:1px solid var(--rule)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:700;font-stretch:106%;line-height:1.3;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:0 0 auto;width:14px;height:14px;background:linear-gradient(var(--mist),var(--mist)) 50% 50%/100% 2px no-repeat,linear-gradient(var(--mist),var(--mist)) 50% 50%/2px 100% no-repeat;transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--h6)}
.faq-list details p{color:var(--mist);padding:0 44px 22px 0;max-width:60ch}

/* ---------- 10. partners ---------- */
.partners-list{gap:clamp(56px,10vh,112px)}
.partner{display:grid;gap:12px;scroll-margin-top:calc(var(--hdr) + 40px)}
.kicker{color:var(--h4);font-weight:700;font-size:.9688rem;margin-top:-6px}
.path--ember::after{background:linear-gradient(180deg,var(--h3),var(--h4),var(--h5))}
.duo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.duo-i{padding:clamp(32px,6vh,64px) clamp(20px,4vw,64px) 0 0;display:grid;gap:18px;align-content:start;justify-items:start}
.duo-i+.duo-i{padding-left:clamp(20px,4vw,64px);padding-right:0;border-left:1px solid var(--rule)}
.duo-i .lede{max-width:44ch}

/* ---------- 11. contact ---------- */
.contact{padding-bottom:clamp(64px,12vh,140px)}
.contact-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,6vw,104px);align-items:start}
.contact-copy{display:grid;gap:clamp(18px,3vh,28px);position:sticky;top:calc(var(--hdr) + 60px)}
.contact-alt{margin-top:clamp(12px,3vh,32px);border-top:1px solid var(--rule);animation:fadeup .9s var(--ease) .42s both}
.contact-alt li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;padding:15px 0;border-bottom:1px solid var(--rule)}
.contact-alt b{font-weight:600;color:var(--mist)}
.form-shell{animation:fadeup .9s var(--ease) .25s both;min-width:0}
.form{position:relative;display:grid;gap:22px;padding:clamp(22px,3.4vw,44px);border:1px solid var(--rule-2);border-radius:24px;background:linear-gradient(180deg,rgba(46,29,92,.6),rgba(27,16,57,.74));box-shadow:0 50px 110px -50px rgba(4,1,12,.95);overflow:hidden}
/* the form warms up as it is filled in: this bar is the share of required fields that are valid */
.form-heat{position:absolute;inset:0 0 auto 0;height:4px;background:var(--rule)}
.form-heat i{display:block;height:100%;background:var(--heat);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s var(--ease)}
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend,.field label{display:block;padding:0;margin-bottom:9px;font-size:.9375rem;font-weight:700;color:var(--bone)}
.form legend span,.field label span{font-weight:500;color:var(--dim);margin-left:.4em}
.seg-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg-in label,.chips-in label{position:relative;display:block;cursor:pointer}
.seg-in input,.chips-in input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg-in span{display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px 12px;border:1px solid var(--rule-2);border-radius:13px;color:var(--mist);font-weight:700;font-stretch:106%;text-align:center;line-height:1.2;transition:background-color .2s,color .2s,border-color .2s}
.seg-in label:hover span{border-color:var(--bone);color:var(--bone)}
.seg-in input:checked+span{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.seg-in input:focus-visible+span,.chips-in input:focus-visible+span{outline:2px solid var(--h6);outline-offset:3px}
.chips-in{display:flex;flex-wrap:wrap;gap:8px}
.chips-in span{display:block;padding:10px 15px;border:1px solid var(--rule-2);border-radius:99px;color:var(--mist);font-size:.9375rem;font-weight:600;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.chips-in label:hover span{border-color:var(--bone);color:var(--bone)}
.chips-in input:checked+span{background:rgba(143,127,255,.26);border-color:var(--h2);color:var(--bone)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.field{min-width:0}
.field input,.field textarea{
  display:block;width:100%;min-height:56px;padding:15px 16px;border:1px solid var(--rule-2);border-radius:13px;background:rgba(21,11,46,.62);
  color:var(--bone);font:inherit;font-size:1.0625rem;line-height:1.4;transition:border-color .2s,box-shadow .2s,background-color .2s;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:148px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);opacity:.8}
.field input:hover,.field textarea:hover{border-color:rgba(244,239,251,.5)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--bone);box-shadow:0 0 0 4px rgba(244,239,251,.14);background:rgba(21,11,46,.86)}
.field.is-ok input,.field.is-ok textarea{border-color:rgba(255,209,102,.6)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--h4);box-shadow:0 0 0 4px rgba(255,107,94,.16)}
.err{min-height:0;margin-top:0;font-size:.875rem;font-weight:600;color:#FF9A90;transition:margin-top .2s}
.err:not(:empty){margin-top:8px}
.form-end{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:4px}
.form-end .btn{min-width:11.5rem;transition:background-color .35s,transform .2s var(--ease),box-shadow .4s}
.form.is-ready .form-end .btn{background:var(--h6);box-shadow:0 0 0 6px rgba(255,209,102,.16),0 18px 50px -14px rgba(255,159,69,.7)}
.form.is-sending .form-end .btn{opacity:.6;pointer-events:none}
.form-status{flex:1 1 14rem;font-size:.9375rem;color:var(--mist);min-height:1.4em}
.form-status.is-bad{color:#FF9A90;font-weight:600}
/* fields that only belong to one answer of "What brings you here?" (data-for). The script hides and
   disables the others; these rules do the hiding without it, and before it has loaded. */
.form:has(input[name="topic"][value="demand"]:checked) [data-for="publisher"],
.form:has(input[name="topic"][value="publisher"]:checked) [data-for="demand"],
.form:has(input[name="topic"][value="other"]:checked) [data-for]{display:none}
.sent{display:grid;gap:18px;justify-items:start;padding:clamp(28px,5vw,60px);border:1px solid rgba(255,209,102,.5);border-radius:24px;background:linear-gradient(180deg,rgba(60,38,96,.6),rgba(27,16,57,.74));box-shadow:0 50px 110px -50px rgba(255,159,69,.45)}
.sent:focus{outline:none}
.sent-mark{width:72px;height:72px;fill:none;stroke:var(--h6);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.sent-mark circle{stroke-dasharray:183;stroke-dashoffset:183;animation:draw .8s var(--ease) .1s forwards}
.sent-mark path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s var(--ease) .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sent .lede b{color:var(--bone);font-weight:700;overflow-wrap:anywhere}

/* ---------- 12. footer ---------- */
.ftr{border-top:1px solid var(--rule);padding:clamp(48px,8vh,84px) 0 32px;background:rgba(14,7,32,.5)}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px 28px}
.ftr-brand{display:grid;gap:14px;align-content:start;justify-items:start;color:var(--bone)}
.ftr-brand p{font-size:1.25rem;font-weight:900;font-stretch:122%;letter-spacing:-.01em}
.ftr-col h2{font-size:.875rem;font-weight:700;color:var(--dim);margin-bottom:12px}
.ftr-col ul{display:grid;gap:8px}
.ftr-col a{color:var(--mist);text-decoration:none;font-size:.9688rem;transition:color .2s}
.ftr-col a:hover{color:var(--bone)}
.ftr-bottom{margin-top:clamp(36px,6vh,60px);padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 40px;color:var(--dim);font-size:.8438rem}
.ftr-bottom p:last-child{max-width:62ch}

/* ---------- 13. small screens ---------- */
@media (max-width:1040px){
  .nav,.nav-login{display:none}
  .burger{display:inline-flex}
}
@media (max-width:860px){
  :root{--hdr:60px}
  .d1{font-stretch:112%}
  .d2{font-stretch:114%}
  .forge-grid{display:block}
  .hero-sub{padding-bottom:44px}
  .forge-run{display:block;position:relative}
  .forge-stage{
    position:sticky;top:var(--hdr);z-index:4;margin-inline:calc(var(--gut) * -1);padding:10px var(--gut) 14px;gap:12px;
    --stage-w:min(100%,calc((100svh - var(--hdr)) * .47));
    background:var(--ink);
  }
  /* text scrolling up towards the pinned stage fades out instead of colliding with it */
  .forge-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:34px;pointer-events:none;background:linear-gradient(180deg,var(--ink),rgba(21,11,46,0))}
  .forge-stage .stage-wrap{width:var(--stage-w)}
  /* phone gauge: six bars, and one line of text naming the heat in play */
  .gauge{position:relative;width:100%;max-width:var(--stage-w);gap:5px;padding-bottom:24px}
  .gauge a{display:block;font-size:.8125rem}
  .gauge a::before{display:block}
  /* the names of the other five are not shown, but stay readable to a screen reader (clipped, not display:none) */
  .gauge a b,.gauge a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gauge a[data-on]>b,.gauge a[data-on]>span{width:auto;height:auto;overflow:visible;clip-path:none;bottom:0}
  .gauge a[data-on]>b{left:0;color:var(--c)}
  .gauge a[data-on]>span{left:2.1em}
  .gauge:not(:has([data-on]))::after{content:"Scroll to start";position:absolute;left:0;bottom:0;font-size:.8125rem;font-weight:600;color:var(--dim)}
  .forge-intro{padding:26px 0 30px}
  .step{min-height:0;justify-content:flex-start;padding-block:20px 15svh;max-width:none}
  .forge-eg{padding-bottom:46svh}
  .getin-grid{grid-template-columns:1fr}
  .getin .sec-head{position:static;margin-bottom:8px}
  .row{grid-template-columns:1fr;padding-left:26px}
  .row.is-hot,.row:hover{padding-left:34px}
  .trio{grid-template-columns:1fr}
  .trio-i,.trio-i:first-child{padding:24px 0}
  .trio-i+.trio-i{border-left:0;border-top:1px solid var(--rule)}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1 / -1}
  .tagfacts{grid-template-columns:1fr}
  .tagfacts li,.tagfacts li:first-child{padding:16px 0 0}
  .tagfacts li+li{border-left:0;border-top:1px solid var(--rule);margin-top:16px}
  .prod-grid,.faq-grid,.contact-grid,.duo-grid,.twocol{grid-template-columns:1fr}
  .prod-vis{position:static;margin-top:8px}
  .prod-vis .stage-wrap{max-width:min(100%,430px)}
  .faq .sec-head,.contact-copy{position:static}
  .specs>div,.twocol .specs>div{grid-template-columns:1fr}
  .fmts{grid-template-columns:1fr}
  .fmts li,.fmts li:first-child{grid-template-columns:92px minmax(0,1fr);gap:4px 20px;padding:22px 0;align-items:start}
  .fmts li+li{border-left:0;border-top:1px solid var(--rule)}
  .fmts .fmt-pic{grid-row:1 / span 2}
  .fmts h3{margin-top:2px}
  .duo-i,.duo-i+.duo-i{padding:32px 0 0;border-left:0}
  .duo-i+.duo-i{border-top:1px solid var(--rule);margin-top:36px}
  .faq-list details p{padding-right:0}
}
@media (max-width:560px){
  body{font-size:1rem}
  .d1{font-size:clamp(2rem,10.6vw,2.9rem);font-stretch:104%}
  .d1--long{font-size:clamp(1.8rem,9.3vw,2.6rem)}   /* a longer headline: a size down, so each sentence takes two lines, not three */
  .d2{font-stretch:108%}
  .d3{font-stretch:108%}
  .btn{min-height:52px;padding:0 1.25rem}
  .hero-cta .btn{flex:1 1 auto}
  .ftr-top{grid-template-columns:1fr 1fr}
  .seg-in,.form-row{grid-template-columns:1fr}
  .form-row{gap:22px}
  .strip{height:300px}
  .trial-pick{grid-template-columns:1fr}
  .form-end .btn{width:100%}
}
/* the narrowest phones (320px): the logo, Sign up and the menu button only fit if each gives a little */
@media (max-width:350px){
  .logo-svg{height:26px}
  .hdr-in{gap:10px}
  .hdr-cta{gap:8px}
  .hdr .btn--sm{padding:0 .8rem}
}

/* ---------- 14. less motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important}
  .scan{display:none}
}