/*
 * VIPO landing. One desk, one green line.
 *
 * Tokens: colour comes from the desk render and the product's own greens
 * (apps/web/src/styles/tokens.css). Green is reserved for what is alive or connected;
 * everything else is stone, paper and ink, so that the single line carries the idea.
 *
 * --u is set per stop by vipo-desk.js: screen pixels per world unit. Anything that sits on
 * an object is sized in --u so it stays glued to the render at every viewport.
 */
@font-face{font-family:Vazirmatn;src:url('/static/fonts/vazirmatn/vazirmatn-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/static/fonts/vazirmatn/vazirmatn-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

.vipo-page{
  --desk:#dfe2de;--stone:#d3d7d2;--paper:#fdfdfb;--ink:#16201b;--ink-2:#46524c;--ink-3:#55615b;
  --line:#c6ccc6;--green:#176f3d;--green-text:#115a30;--green-deep:#0e4528;--green-mid:#2e9d62;--live:#3fe08e;--sage:#dfeadf;
  --night:#0e1e15;--night-2:#15281e;--ai-a:#c026d3;--ai-b:#7c3aed;--ai-soft:#f5b8fb;--night-ink:#eaf2ed;--night-ink-2:#a5b8ad;--amber:#9a5b00;
  --ease:cubic-bezier(.62,.02,.18,1);--edge:clamp(20px,5vw,72px);
  margin:0;background:var(--desk);color:var(--ink);font-family:Vazirmatn,Tahoma,sans-serif;font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;
}
:where(.vipo-page) *,:where(.vipo-page) *::before,:where(.vipo-page) *::after{box-sizing:border-box}
:where(.vipo-page) :where(h1,h2,h3,p,ul,ol,dl,dd,blockquote){margin:0;padding:0}
:where(.vipo-page) :where(ul,ol){list-style:none}
:where(.vipo-page) :where(img,svg){display:block;max-width:100%}
:where(.vipo-page) :where(a){color:inherit;text-decoration:none}
:where(.vipo-page) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(.vipo-page) :where(button){cursor:pointer;background:none;border:0;padding:0;touch-action:manipulation}
.vipo-page :is(a,button,input,select,textarea,summary,canvas,[tabindex]):focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.vipo-page [hidden]{display:none!important}
.wrap{width:min(1180px,calc(100% - 2*var(--edge)));margin-inline:auto}
.skip{position:fixed;top:-60px;inset-inline-start:12px;z-index:60;background:var(--paper);padding:8px 14px;border-radius:8px}
.skip:focus{top:10px}
.v-icon{width:1.25em;height:1.25em;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:12px;background:var(--green);color:#fff!important;font-weight:700;font-size:15px;transition:background .2s,transform .12s}
.btn:hover{background:#125d33}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:default}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.btn--quiet{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600}
.btn--quiet:hover{background:var(--stone)}
.link{color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;min-height:44px}

/* Header floats over the desk */
.site-header{position:fixed;top:0;inset-inline:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:12px var(--edge);pointer-events:none;transition:color .5s,background .3s,padding .3s}
.site-header>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px}
.brand__name{line-height:1.15}
.brand__name small{display:block;font-size:11px;font-weight:500;color:var(--ink-2)}
body.is-night .brand__name small{color:var(--night-ink-2)}
.brand__mark{position:relative;display:block;width:26px;height:32px}
.brand__mark::before{content:'';position:absolute;top:0;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#2e3234}
.brand__mark img{position:absolute;bottom:0;left:0;width:26px;height:auto}
body.is-past .site-header{background:rgba(223,226,222,.86);backdrop-filter:blur(10px);padding-block:8px}
body.is-night .site-header{color:var(--night-ink)}
body.is-night .brand__mark::before{background:var(--night-ink)}

/* ---------- the tour ---------- */
.js .tour{position:relative;height:calc((var(--stops,14) - 1) * 72svh + 100svh)}
.js .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:linear-gradient(225deg,#e4e7e3,#dadcda 52%,#cfd2cf)}
.js .stage::after{content:'';position:absolute;inset:0;z-index:0;background:var(--night);opacity:0;transition:opacity .7s;pointer-events:none}
.js .stage.is-night::after{opacity:1}
.desk{transform-origin:0 0}
.js .desk{position:absolute;top:0;left:0;z-index:0;will-change:transform;transition:transform .95s var(--ease),opacity .7s}
.desk img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .45s}
.stage:not(.is-overview) .thread{opacity:0}
.stage.is-landed:not(.is-overview) .desk{opacity:0;transition:transform .95s var(--ease),opacity .5s}
.thread__rest,.thread__live{fill:none;stroke-width:calc(var(--w,.34)*1px);stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .9s}
.thread__rest{stroke:#c3cbc5}
.thread__live{stroke:var(--green-mid);stroke-dasharray:1;stroke-dashoffset:1}
.stage.is-ready .thread__live{transition:stroke-dashoffset 2.6s .25s var(--ease),stroke-width .9s;stroke-dashoffset:0}
.thread circle{fill:var(--desk);stroke:var(--green-mid);stroke-width:.5;transition:fill .4s}
.thread circle.is-start{fill:var(--green-mid);stroke:none}
.thread circle.is-done{fill:var(--green-mid)}

/* Hero copy nests in the empty top corner of the desk */
.js .hero{position:absolute;z-index:4;top:calc(58px + 2.2vh);inset-inline-start:var(--edge);width:min(44vw,600px);transition:opacity .45s,transform .6s var(--ease)}
.hero h1{font-size:clamp(32px,min(4.3vw,7.2vh),70px);line-height:1.2;font-weight:800;letter-spacing:0}
.hero h1 span{display:block;white-space:nowrap}
.dot{display:inline-block;width:.2em;height:.2em;margin-inline-start:.1em;border-radius:50%;background:var(--green-mid);vertical-align:baseline}
.hero__lead{margin-top:clamp(8px,1.4vh,14px);max-width:25em;color:var(--ink-2);font-size:clamp(15px,1.25vw,17px);line-height:1.8}
.hero__cta{display:flex;align-items:center;gap:14px;margin-top:clamp(12px,2vh,20px)}
.hero__cta p{font-size:14px;color:var(--ink-2);line-height:1.5}
.cue{display:none}
.js .cue{position:absolute;z-index:5;bottom:12px;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:10px;background:rgba(253,253,251,.86);backdrop-filter:blur(6px);font-size:13.5px;font-weight:700;color:var(--ink);transition:opacity .35s}
.js .cue svg{width:12px;height:12px}
.js .stage:not([data-at=hero]) .cue{opacity:0;visibility:hidden}
.js .stage:not([data-at=hero]) .hero{opacity:0;transform:translateY(-14px);visibility:hidden;transition:opacity .35s,transform .5s var(--ease),visibility 0s .35s}

/* Object captions: the module names, like labels on a museum shelf */
.js .caps{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity .4s}
.js .cap{position:absolute;transform:translateX(-50%);pointer-events:auto;white-space:nowrap;font-size:clamp(11px,.95vw,13.5px);font-weight:600;color:var(--ink-2);padding:6px 8px;line-height:1.4;transition:color .25s}
.js .cap span{position:relative;z-index:1}
.js .cap:hover{color:var(--green)}
.js .stage:not(.is-overview) .caps{opacity:0;visibility:hidden}
.js .cap::before{content:'';position:absolute;left:50%;bottom:0;width:calc(var(--cell,1)*1px);height:calc(var(--cellh,1)*1px);transform:translateX(-50%);border-radius:28px;background:var(--desk);filter:blur(12px);opacity:0;transition:opacity .45s;pointer-events:none}
.js .cap.is-dim{color:var(--ink-3);font-weight:500}
.js .cap.is-dim::before{opacity:.84}
.js .cap.is-lit{color:var(--green-text)}
.js .stage[data-at=hero] .cap::before{opacity:0}

/* A stop: the object and its sheet */
.js .stops{position:absolute;inset:0;z-index:5;pointer-events:none}
.js .stop{position:absolute;inset:0;visibility:hidden}
.js .stop.is-on{visibility:visible}
.js .obj{display:none;position:absolute;left:var(--ox);top:var(--oy);width:calc(var(--u)*64);height:calc(var(--u)*64);transform:translate(-50%,-50%);opacity:0;transition:opacity .28s}
.js .stop.is-near .obj{display:block}
.js .stop.is-landed .obj{opacity:1;pointer-events:auto;transition:opacity .42s}
.tile{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.l{position:absolute;left:calc(50% + var(--x,0)*var(--u));top:calc(50% + var(--z,0)*var(--u));width:calc(var(--w,auto)*var(--u));height:calc(var(--h,auto)*var(--u));transform:translate(-50%,-50%)}

.js .sheet{position:absolute;inset-inline-start:var(--edge);top:50%;width:clamp(300px,31vw,430px);transform:translateY(-52%);pointer-events:auto;opacity:0;transition:opacity .32s}
.js .stop.is-on .sheet{opacity:1;transition:opacity .5s .28s}
.sheet__label{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--green-text)}
.sheet h2{margin-top:6px;font-size:clamp(26px,2.7vw,38px);line-height:1.25;font-weight:800}
.sheet__line{margin-top:10px;color:var(--ink-2);font-size:16px;line-height:1.8}
.sheet .btn{margin-top:18px}
.sheet__done{margin-top:14px;font-weight:700;color:var(--green-text);font-size:15px;line-height:1.7}
.sheet__done:empty{display:none}
.sheet__note{margin-top:10px;font-size:13px;color:var(--night-ink-2)}
.hintline{margin-top:14px;font-weight:600;font-size:15px}
.tag{font-size:12px;font-weight:700;padding:1px 8px;border-radius:6px;background:rgba(63,224,142,.16);color:var(--live)}
.stage.is-hint .stop.is-on .btn:not(:disabled){animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(46,157,98,.45)}50%{box-shadow:0 0 0 9px rgba(46,157,98,0)}}

/* Rail: every module, and it fills in as the file grows */
.js .rail{position:absolute;z-index:6;bottom:14px;inset-inline:0;display:flex;justify-content:center;transition:opacity .4s,color .5s}
.js .stage[data-at=hero] .rail{opacity:0;visibility:hidden}
.rail ol{display:flex;gap:2px;padding:4px;border-radius:14px;background:rgba(253,253,251,.82);backdrop-filter:blur(8px);max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none}
.rail ol::-webkit-scrollbar{display:none}
.rail a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--ink-3);transition:background .2s,color .2s}
.rail a:hover{background:var(--stone)}
.rail a[aria-current]{background:var(--ink);color:#fff}
.rail a.is-done{color:var(--green)}
.rail a.is-done[aria-current]{background:var(--green);color:#fff}

/* Night: the one moment the desk goes dark, for the AI */
.stage.is-night .desk{opacity:0}
.stop--interview .sheet{color:var(--night-ink)}
.stop--interview .sheet__label{color:var(--ai-soft)}
.stop--interview .sheet__line{color:var(--night-ink-2)}
.stop--interview .sheet__done{color:var(--ai-soft)}
/* AI wears the product's own fuchsia and violet (apps/web/src/styles/ai-glow.css), mixed with the brand green. */
.stop--interview .obj::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(192,38,211,.3),rgba(124,58,237,.15) 56%,transparent)}
.stop--interview .tile{mix-blend-mode:screen}
.js .cap[data-cap=interview]{color:#7e22ce}
.stage.is-night .rail ol{background:rgba(20,32,25,.8)}
.stage.is-night .rail a{color:var(--night-ink-2)}
.stage.is-night .rail a:hover{background:#22332a}
.stage.is-night .rail a[aria-current]{background:linear-gradient(135deg,var(--ai-a),var(--ai-b));color:#fff}

/* ---------- what sits on each object ---------- */
.ink{padding:calc(var(--u)*.5) calc(var(--u)*1);border:calc(var(--u)*.16) solid var(--green);border-radius:calc(var(--u)*.5);color:var(--green);text-align:center;line-height:1.3;opacity:0;rotate:-7deg;scale:1.7;background:rgba(253,253,251,.55)}
.ink b{display:block;font-size:calc(var(--u)*1.25);font-weight:800;white-space:nowrap}
.ink small{font-size:calc(var(--u)*.85)}
.ink.is-on{opacity:.92;scale:1;transition:opacity .12s,scale .22s cubic-bezier(.2,1.5,.5,1)}
.pipe{display:flex;gap:3px;margin-top:16px;font-size:12px;font-weight:600;color:var(--ink-3);text-align:center}
.pipe li{flex:1;padding-top:7px;border-top:3px solid var(--line);line-height:1.4;transition:border-color .4s,color .4s}
.pipe .is-done{border-color:var(--green-mid);color:var(--ink-2)}
.pipe .is-cur{border-color:var(--green);color:var(--green-text)}

.wave{width:calc(var(--u)*38);height:calc(var(--u)*38);overflow:visible}
.wave line{stroke:url(#vipo-ai);stroke-width:1.5;stroke-linecap:round;opacity:.9;transform-origin:0 0}
.stop--interview.is-landed .wave line{animation:listen 1.5s ease-in-out infinite alternate}
@keyframes listen{from{opacity:.35}to{opacity:1}}
.puck-clock{text-align:center;color:var(--night-ink);line-height:1.3;white-space:nowrap}
.puck-clock b{display:block;font-size:calc(var(--u)*3);font-weight:700;font-variant-numeric:tabular-nums}
.puck-clock small{color:var(--night-ink-2);font-size:calc(var(--u)*1.05)}
.scores{margin-top:14px;display:grid;gap:4px}
.scores button{position:relative;display:flex;justify-content:space-between;width:100%;min-height:42px;align-items:center;padding:0 12px;border-radius:9px;color:var(--night-ink);font-size:14.5px;overflow:hidden;background:rgba(234,242,237,.06);text-align:start}
.scores button>*{position:relative}
.scores i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--v);background:linear-gradient(270deg,rgba(63,224,142,.14),rgba(192,38,211,.22) 60%,rgba(124,58,237,.3))}
.scores button[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px #e879f9}
.evidence{margin-top:10px;display:flex;gap:10px;font-size:14.5px;line-height:1.8;color:var(--night-ink)}
.evidence time{flex:none;color:var(--ai-soft);font-weight:700;font-variant-numeric:tabular-nums}
.stop--interview .btn{background:linear-gradient(100deg,var(--ai-a),var(--ai-b));color:#fff!important}
.stop--interview .btn:hover{background:linear-gradient(100deg,#a21caf,#6d28d9)}

.sign{touch-action:none;cursor:crosshair;border-radius:calc(var(--u)*.4)}
.stage.is-hint .sign{box-shadow:0 0 0 2px rgba(46,157,98,.55)}
.sealed{padding:calc(var(--u)*.3) calc(var(--u)*.7);border:calc(var(--u)*.13) solid var(--green);border-radius:calc(var(--u)*.45);color:var(--green);line-height:1.35;text-align:center;rotate:-5deg;opacity:0;scale:1.5;pointer-events:none;background:rgba(253,253,251,.8)}
.sealed b{display:block;font-size:calc(var(--u)*1.05);font-weight:800}
.sealed small{font-size:calc(var(--u)*.72)}
.sealed.is-on{opacity:1;scale:1;transition:opacity .15s,scale .22s cubic-bezier(.2,1.5,.5,1)}
.states{display:flex;gap:6px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.states li{padding:3px 10px;border-radius:7px;background:var(--stone)}
.states .is-done{background:var(--sage);color:var(--green-text);font-weight:700}

.tick{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);border-radius:calc(var(--u)*.35);background:var(--green);opacity:0;scale:.5}
.tick::after{content:'';position:absolute;left:22%;top:18%;width:52%;height:32%;border-inline-start:0;border-left:calc(var(--u)*.2) solid #fff;border-bottom:calc(var(--u)*.2) solid #fff;transform:rotate(-45deg)}
.tick.is-on{opacity:1;scale:1;transition:opacity .2s,scale .3s cubic-bezier(.2,1.6,.5,1)}

.scan{overflow:hidden;opacity:0}
.scan::after{content:'';position:absolute;inset-inline:0;top:0;height:calc(var(--u)*.3);background:var(--green-mid);box-shadow:0 0 calc(var(--u)*1.2) var(--live)}
.scan.is-on{opacity:1;animation:hide 0s 1.2s forwards}
.scan.is-on::after{animation:sweep 1.05s ease-in-out 1}
@keyframes sweep{from{top:0}to{top:100%}}
@keyframes hide{to{opacity:0}}
.tagok{border:calc(var(--u)*.26) solid var(--green-mid);border-radius:calc(var(--u)*.3);opacity:0}
.tagok.is-on{opacity:1;transition:opacity .25s}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--ink-3)}
.facts dd{font-weight:700;font-size:15px}

.quiz{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*1.4);border-radius:calc(var(--u)*.7);background:#0e1b16;color:var(--night-ink)}
.quiz p{font-size:max(12px,calc(var(--u)*1.32));font-weight:700;line-height:1.5;margin-bottom:calc(var(--u)*.5)}
.quiz button{min-height:max(38px,calc(var(--u)*3.4));border-radius:calc(var(--u)*.6);background:#1b2c24;font-size:max(12px,calc(var(--u)*1.15));font-weight:600;color:var(--night-ink);transition:background .2s}
.quiz button:hover{background:#25402f}
.quiz button.is-wrong{background:#4a2222;color:#f0c9c4;animation:shake .32s}
@keyframes shake{25%{translate:-4px}75%{translate:4px}}
.quiz.is-pass button:first-of-type{background:var(--green-mid);color:#fff}
.certname{text-align:center;color:var(--green);line-height:1.5;rotate:4deg;opacity:0;background:#e9ebe7;padding:calc(var(--u)*.3) calc(var(--u)*1.2);white-space:nowrap}
.certname b{display:block;font-size:calc(var(--u)*1.5);font-weight:800}
.certname small{font-size:calc(var(--u)*.85);color:var(--ink-2)}
.certname.is-on{opacity:1;transition:opacity .5s}
.is-done .hintline{display:none}

.devscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a1210;color:#e9f5ee;text-align:center;line-height:1.35;border-radius:calc(var(--u)*.3)}
.devscreen b{font-size:calc(var(--u)*2.7);font-weight:700}
.devscreen small{font-size:max(9px,calc(var(--u)*.86));color:#7fa58f}
.devscreen.is-on small{color:var(--live);font-weight:700}
.touch{width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);min-width:44px;min-height:44px;border-radius:50%;background:transparent}
.stage.is-hint .touch{box-shadow:0 0 0 3px rgba(63,224,142,.7)}
.touch.is-on{background:rgba(63,224,142,.26);pointer-events:none;transition:background .3s}
.day{display:grid;place-items:center;width:calc(var(--u)*2.76);height:calc(var(--u)*2.76);border-radius:calc(var(--u)*.42);font-size:calc(var(--u)*.98);font-weight:800;opacity:0}
.day--in{box-shadow:0 0 0 calc(var(--u)*.22) var(--live)}
.day--leave{background:#b9d8c6;color:var(--green-deep)}
.day.is-on{opacity:1;transition:opacity .35s}
.request{margin-top:12px;padding:9px 12px;border-radius:9px;background:var(--sage);color:var(--green-deep);font-weight:600;font-size:14.5px;line-height:1.7}
.request--stop{background:#fbeed5;color:#6b4300}

.ticket{padding:calc(var(--u)*.5) calc(var(--u)*1.1);border-radius:calc(var(--u)*.35);background:var(--paper);text-align:center;line-height:1.3;box-shadow:0 calc(var(--u)*.2) calc(var(--u)*.7) rgba(30,45,35,.22);opacity:0;translate:0 calc(var(--u)*2)}
.ticket small{display:block;font-size:max(9px,calc(var(--u)*.72));color:var(--ink-2)}
.ticket b{font-size:calc(var(--u)*1.75);font-weight:800;letter-spacing:.06em}
.ticket.is-on{opacity:1;translate:0 0;transition:opacity .3s,translate .4s var(--ease)}
.split{margin-top:14px;display:grid;gap:2px;font-size:15px}
.split li{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums}
.split span{color:var(--ink-2)}
.split__me{border-top:1px solid var(--line);margin-top:4px;padding-top:8px!important;font-weight:800}
.split.is-on .split__me b{color:var(--green)}

.phone{display:flex;flex-direction:column;gap:calc(var(--u)*.55);padding:0 calc(var(--u)*.7) calc(var(--u)*.7);background:#fff;border-radius:calc(var(--u)*1.5);overflow:hidden;font-size:max(9.5px,calc(var(--u)*.86));line-height:1.55}
.phone header{margin:0 calc(var(--u)*-.7);padding:calc(var(--u)*1.3) calc(var(--u)*.9) calc(var(--u)*.6);background:#f4f5f1;line-height:1.35}
.phone header b{display:block;font-size:1.08em}
.phone header small{color:var(--ink-3);font-size:.86em}
.msg{align-self:flex-start;max-width:86%;padding:calc(var(--u)*.45) calc(var(--u)*.7);border-radius:calc(var(--u)*.7);background:#eef0ea;transition:box-shadow .3s,background .3s}
.msg--me{align-self:flex-end;background:var(--green);color:#fff}
.stage.is-hint .msg[data-msg]{box-shadow:0 0 0 2px var(--green-mid)}
.msg.is-picked{background:var(--sage);box-shadow:0 0 0 2px var(--green-mid)}
.card{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:calc(var(--u)*.7);background:#d8e5da;color:var(--ink);line-height:1.45;opacity:0;translate:calc(var(--u)*14) 0;scale:.7}
.card b{font-size:max(9.5px,calc(var(--u)*.98));font-weight:800}
.card small{font-size:max(8.5px,calc(var(--u)*.76));color:var(--ink-2)}
.card.is-on{opacity:1;translate:0 0;scale:1;transition:opacity .3s,translate .7s var(--ease),scale .7s var(--ease)}

.dial{overflow:visible}
.dial__mask{fill:#0c1311}
.dial__track{fill:none;stroke:#22302a;stroke-width:7}
.dial__arc{fill:none;stroke:var(--live);stroke-width:7;stroke-linecap:round;stroke-dasharray:40 60;transition:stroke-dasharray .5s var(--ease)}
.dial-read{text-align:center;color:#ecf5ef;line-height:1.25}
.dial-read b{display:block;font-size:calc(var(--u)*4.4);font-weight:700;font-variant-numeric:tabular-nums}
.dial-read small{font-size:calc(var(--u)*1.05);color:#8fa89a}
.goals{margin-top:14px;font-size:14.5px;color:var(--ink-2)}
.goals li{position:relative;padding-inline-start:16px;line-height:1.9}
.goals li+li{margin-inline-start:14px}
.goals li::before{content:'';position:absolute;inset-inline-start:0;top:.75em;width:7px;height:7px;border-radius:50%;background:var(--green-mid)}
.goals b{color:var(--ink)}
.range{display:block;margin-top:12px;font-size:14px;color:var(--ink-2)}
.range input{display:block;width:100%;height:32px;accent-color:var(--green)}

.coin{width:calc(var(--u)*8);height:calc(var(--u)*8);max-width:none;filter:drop-shadow(calc(var(--u)*-.25) calc(var(--u)*.3) calc(var(--u)*.3) rgba(40,55,45,.35))}
.coin.is-in{left:50%;top:calc(50% - var(--u)*3.2);opacity:0;scale:.45;transition:left .5s var(--ease),top .5s var(--ease),scale .5s var(--ease),opacity .18s .36s}
.votes{margin-top:14px;font-weight:700}
.votes span{font-size:24px;color:var(--green-text);font-variant-numeric:tabular-nums}
.enps{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline;margin-top:10px}
.enps b{font-size:14px;color:var(--ink-2)}
.enps strong{font-size:30px;color:var(--green-text);justify-self:start;line-height:1.3}
.enps span{grid-column:1/-1;font-size:14px;color:var(--ink-2);line-height:1.7}

.slip{--slip:max(calc(var(--u)*24.5),226px);position:absolute;left:calc(50% - var(--u)*10);top:calc(50% - var(--u)*7.6);width:calc(var(--u)*20);height:0;overflow:hidden;background:var(--paper);box-shadow:0 calc(var(--u)*.3) calc(var(--u)*1.4) rgba(30,45,35,.18);border-radius:0 0 2px 2px}
.slip.is-out{height:var(--slip);transition:height 1.5s steps(14)}
.slip__in{position:absolute;bottom:0;inset-inline:0;height:var(--slip);padding:calc(var(--u)*1.2) calc(var(--u)*1.3);font-size:max(10px,calc(var(--u)*.98));line-height:1.5}
.slip header{text-align:center;padding-bottom:calc(var(--u)*.6);border-bottom:1px dashed var(--line)}
.slip header b{display:block;font-size:1.3em;font-weight:800}
.slip header small{color:var(--ink-2);font-size:.86em}
.slip dl{margin-top:calc(var(--u)*.6)}
.slip dl div{display:flex;justify-content:space-between;gap:6px;padding:calc(var(--u)*.2) 0}
.slip dt{color:var(--ink-2)}
.slip dd{font-weight:600;font-variant-numeric:tabular-nums;direction:ltr}
.slip__net{display:flex;justify-content:space-between;align-items:baseline;margin-top:calc(var(--u)*.5);padding-top:calc(var(--u)*.6);border-top:1.5px solid var(--ink);font-weight:800}
.slip__net b{font-size:1.2em;color:var(--green);font-variant-numeric:tabular-nums}
.exports{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.exports li{padding:5px 12px;border-radius:8px;background:var(--sage);color:var(--green-deep);font-weight:700;font-size:14px}

/* The pull-back: roles and what needs attention, in the corner the headline used */
.js .stop--all .sheet{top:calc(58px + 2.2vh);transform:none;width:min(44vw,600px)}
.stop--all h2{font-size:clamp(26px,3vw,44px)}
.roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.roles button{min-height:40px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);background:rgba(253,253,251,.6)}
.roles button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.stop--all .sheet__line{margin-top:8px;font-size:15px;line-height:1.7}
.nudges{margin-top:8px;display:grid;gap:2px;font-size:14px;line-height:1.7}
.nudges li{display:flex;gap:7px;align-items:baseline}
.nudges b{color:var(--green-text);font-size:16px}

/* ---------- after the desk ---------- */
.relief{padding-block:clamp(72px,12vh,130px) 40px;display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(32px,6vw,84px);align-items:start}
.relief h2,.made h2,.offer h2,.faq h2{font-size:clamp(28px,3.6vw,50px);line-height:1.25;font-weight:800}
.relief ul{display:grid;gap:2px}
.relief li{position:relative;padding:10px 0;font-size:clamp(18px,2.1vw,28px);font-weight:500;color:var(--ink-2);width:fit-content;max-width:100%;line-height:1.5}
.relief li::after{content:'';position:absolute;inset-inline:-6px;top:52%;height:2.5px;border-radius:2px;background:var(--green-mid);transform:scaleX(0);transform-origin:right;transition:transform .7s calc(var(--i,0)*.13s) var(--ease)}
.relief li.is-in::after{transform:scaleX(1)}
.relief li.is-in{color:var(--ink-3)}
.made{padding-block:44px 64px;display:grid;grid-template-columns:1fr 1fr;gap:28px clamp(32px,6vw,80px);align-items:start}
.made h2{grid-column:1/-1}
.made dl{display:grid;gap:14px}
.made dt{display:flex;gap:8px;align-items:center;font-weight:800;font-size:17px}
.made dt .v-icon{color:var(--green)}
.made dd{color:var(--ink-2);font-size:15px;line-height:1.7;margin-inline-start:32px}
.film{position:relative;display:block;width:100%;border-radius:14px;overflow:hidden;background:var(--stone)}
.film img{width:100%;height:auto}
.film span{position:absolute;inset-block-end:12px;inset-inline-start:12px;display:flex;gap:7px;align-items:center;padding:7px 14px;border-radius:10px;background:var(--paper);font-weight:700;font-size:14px}
.film-dialog{padding:0;border:0;border-radius:14px;background:#000;width:min(960px,94vw);overflow:hidden}
.film-dialog::backdrop{background:rgba(6,12,10,.8)}
.film-dialog video{display:block;width:100%}
.film-dialog form{position:absolute;top:8px;inset-inline-end:8px;z-index:2}
.film-dialog form button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);font-size:22px;color:#000}
.atlas{padding-block:0 56px}
.atlas details{border-block:1px solid var(--line)}
.atlas summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;cursor:pointer;list-style:none}
.atlas summary::-webkit-details-marker{display:none}
.atlas summary h2{font-size:20px;font-weight:800}
.atlas summary>span{font-size:26px;line-height:1;color:var(--green);transition:rotate .2s}
.atlas details[open] summary>span{rotate:45deg}
.atlas__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px 28px;padding-bottom:26px}
.atlas h3{font-size:15px;font-weight:800;margin-bottom:5px}
.atlas li{font-size:14px;color:var(--ink-2);line-height:1.85}

.offer{background:var(--night);color:var(--night-ink);padding-block:clamp(60px,9vh,110px)}
.offer__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,84px);align-items:start}
.runway{display:grid;grid-template-columns:45fr 60fr;gap:14px 10px;margin-top:30px}
.runway__free{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.runway__free i{aspect-ratio:1;border-radius:2px;background:var(--live);opacity:.15;transition:opacity .25s}
.runway.is-in .runway__free i{opacity:1}
.runway__paid{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-self:stretch}
.runway__paid i{border-radius:2px;background:#20382c;transition:background .3s .4s}
.runway.is-in .runway__paid i{background:#2c6a4a}
.runway p{font-size:15px;color:var(--night-ink-2)}
.runway b{display:block;color:var(--night-ink);font-size:clamp(22px,2.6vw,34px);font-weight:800;line-height:1.3}
.perks{margin-top:26px;display:grid;gap:6px}
.perks li{display:flex;gap:9px;align-items:center;font-size:15.5px}
.perks .v-icon{color:var(--live)}
.quote{margin-top:26px;padding-top:18px;border-top:1px solid #2a3a32}
.quote label{font-weight:700;font-size:15px}
.quote input{display:block;width:100%;height:34px;accent-color:var(--live)}
.quote p{font-size:15.5px}
.quote p b{font-size:22px;color:var(--live);font-variant-numeric:tabular-nums}
.quote s{color:var(--night-ink-2);font-size:14px;font-variant-numeric:tabular-nums}
.quote small{display:block;margin-top:2px;color:var(--night-ink-2);font-size:12.5px;line-height:1.7}
.terms{margin-top:16px;font-size:14px;color:var(--night-ink-2)}
.terms summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--night-ink)}
.terms p{line-height:1.9}
.application-box{background:var(--paper);color:var(--ink);border-radius:18px;padding:clamp(20px,3vw,32px)}
.application-box h3{font-size:22px;font-weight:800;line-height:1.3;margin-bottom:12px}
.field{margin-top:10px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
.field input,.field select,.field textarea{display:block;width:100%;min-height:46px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-size:16px;line-height:1.5}
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:#b42318}
.field-error{display:block;color:#b42318;font-size:13px;line-height:1.5}
.field-error:empty{display:none}
.honey{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:14px;line-height:1.7}
.consent input{margin-top:5px;width:18px;height:18px;accent-color:var(--green);flex:none}
.submit{width:100%;margin-top:14px}
.form-message{font-size:14px;color:#b42318;line-height:1.7;margin-top:8px}
.form-message:empty{display:none}
.form-note{margin-top:8px;font-size:13px;color:var(--ink-2);text-align:center}
.form-kicker{margin-top:12px;font-weight:700;color:var(--ink-2);font-size:14px}
.form-hint{font-size:13px;color:var(--green);font-weight:600}
fieldset{border:0;padding:0;margin:12px 0 0}
legend{font-size:14px;font-weight:600;padding:0}
legend small{color:var(--ink-3);font-weight:400}
.choice-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.choice-grid label{position:relative}
.choice-grid input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice-grid span{display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:9px;font-size:14px;box-shadow:inset 0 0 0 1.5px var(--line)}
.choice-grid input:checked+span{background:var(--green);color:#fff;box-shadow:none}
.choice-grid input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px}
.success-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sage);color:var(--green);margin-bottom:8px}

.faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,5vw,72px);padding-block:clamp(56px,9vh,100px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:56px;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:var(--green);font-size:22px;transition:rotate .2s}
.faq details[open] summary span{rotate:45deg}
.faq details p{padding-bottom:14px;color:var(--ink-2);font-size:15px;line-height:1.9}
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 28px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.site-footer a{text-decoration:underline;text-underline-offset:4px}

/* ---------- the phone gets its own composition ---------- */
@media (max-aspect-ratio:1/1){
  .site-header{padding:8px 16px}
  .js .tour{height:calc((var(--stops,14) - 1) * 66svh + 100svh)}
  .js .hero{top:54px;inset-inline:16px;width:auto}
  .hero h1{font-size:clamp(31px,9.2vw,46px)}
  .hero__lead{font-size:14.5px;line-height:1.7;margin-top:4px}
  .hero__cta{margin-top:10px;gap:10px;flex-wrap:wrap}
  .hero__cta .btn{min-height:46px}
  .hero__cta p{font-size:13px}
  .js .cap{font-size:10.5px;padding:3px 4px}
  .js .sheet{inset-inline:0;top:auto;bottom:0;width:auto;transform:none;padding:14px 18px calc(62px + env(safe-area-inset-bottom));background:var(--paper);border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(30,45,35,.08);min-height:40svh}
  .sheet__label{font-size:13px}
  .sheet h2{margin-top:2px;font-size:clamp(22px,6.4vw,30px)}
  .sheet__line{margin-top:4px;font-size:14.5px;line-height:1.7}
  .sheet .btn{width:100%;margin-top:12px}
  .sheet__done{margin-top:8px;font-size:14px}
  .stop--interview .sheet{background:var(--night-2)}
  .scores{margin-top:8px}
  .scores button{min-height:38px;font-size:14px}
  .evidence{font-size:13.5px;line-height:1.7}
  .sheet__note{font-size:12px;margin-top:6px}
  .pipe,.facts,.split,.goals,.states,.votes,.hintline{margin-top:10px}
  .goals{font-size:13.5px}
  .goals li{line-height:1.75}
  .facts{padding-top:8px}
  .js .rail{bottom:calc(6px + env(safe-area-inset-bottom));justify-content:flex-start;padding-inline:6px}
  .rail ol{max-width:100%}
  .rail a{width:40px;height:40px}
  .js .stop--all .sheet{top:54px;bottom:auto;inset-inline:0;width:auto;min-height:0;padding:6px 16px 8px;background:transparent;box-shadow:none}
  .stop--all h2{font-size:24px}
  .roles{gap:4px;margin-top:6px}
  .roles button{min-height:38px;padding:0 10px;font-size:13px}
  .stop--all .sheet__line{font-size:13.5px;margin-top:6px}
  .nudges{font-size:13px;margin-top:4px}
  .nudges b{font-size:14px}
  .made,.offer__grid,.faq,.relief{grid-template-columns:1fr}
  .made dd{margin-inline-start:0}
}
@media (max-height:700px) and (max-aspect-ratio:1/1){
  .stop--interview .sheet__line{display:none}
  .js .sheet{min-height:0}
  .scores button{min-height:36px}
}
@media (max-width:760px){
  .made,.offer__grid,.faq,.relief{grid-template-columns:1fr}
  .runway{grid-template-columns:1fr}
  .runway__paid{height:18px}
  .application-box{padding:20px}
}
@media (max-height:800px) and (min-aspect-ratio:1/1){
  .hero__cta p{display:none}
  .hero__lead{max-width:22em;font-size:14.5px;line-height:1.7}
}
@media (max-height:640px) and (min-aspect-ratio:1/1){
  .sheet__line{font-size:14.5px}
  .sheet .btn{margin-top:10px}
}

/* ---------- no script: an honest, readable page ---------- */
html:not(.js) .hero{padding:90px var(--edge) 24px}
html:not(.js) .desk{padding-inline:var(--edge)}
html:not(.js) .desk img{height:auto}
html:not(.js) .thread,html:not(.js) .cue,html:not(.js) .rail,html:not(.js) .caps,html:not(.js) .puck-clock,html:not(.js) .wave,html:not(.js) .sign,html:not(.js) .tick,html:not(.js) [data-ink],html:not(.js) .scan,html:not(.js) .tagok,html:not(.js) .certname,html:not(.js) .sealed,html:not(.js) .ticket,html:not(.js) .card,html:not(.js) .slip,html:not(.js) .quiz,html:not(.js) .coin,html:not(.js) .touch,html:not(.js) .day,html:not(.js) .phone,html:not(.js) .devscreen,html:not(.js) .dial,html:not(.js) .dial-read,html:not(.js) .sheet .btn,html:not(.js) .quote,html:not(.js) .stop--all{display:none}
html:not(.js) .stops{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 28px;padding:24px var(--edge)}
html:not(.js) .obj{position:relative;aspect-ratio:1}
html:not(.js) .stop--interview .tile{filter:none}
html:not(.js) .stop--interview .sheet,html:not(.js) .scores button{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .js .desk,.thread__rest,.thread__live,.js .obj,.js .sheet,.js .stop.is-on .sheet{transition:none!important}
  .stage.is-ready .thread__live{transition:none;stroke-dashoffset:0}
  .wave line,.btn,.stage.is-hint .stop.is-on .btn{animation:none!important}
  .relief li::after{transition:none}
}