/* Nummera landing v8 — more air, top-aligned grids, app-accurate verification (see README)
   Cold palette, one accent. Separation by space and surface, not rules.
   Motion: rise (content) and draw (meaning). The hero plays once on load; nothing else waits. */

@font-face{font-family:"Schibsted Grotesk";src:url(/assets/schibsted-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/schibsted-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/schibsted-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#F5F7F9; --band:#ECF0F4; --surface:#FFFFFF; --frame:#E6EBF0;
  --ink:#0A1119; --ink-2:#3A444F; --muted:#6A7480; --line:#DCE1E7;
  --accent:#2F55D4; --accent-lite:#8FA7FF;
  --night:#0A1119; --night-2:#111B25; --night-3:#18242F; --on-night:#EEF2F6; --on-night-2:#9AA5B1; --on-night-3:#6C7985;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-draw:cubic-bezier(.65,0,.35,1); --t-draw:.9s;
  --gutter:clamp(20px,5vw,64px);
  --space:clamp(120px,14vw,200px);
  --radius:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:left}
h1,h2,h3,p,dl,dd,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:500;letter-spacing:-.035em;line-height:1.04}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
::selection{background:#D6E0FA}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px}

.wrap{max-width:calc(1200px + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:calc(820px + 2*var(--gutter))}
.label{font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.fine{font:400 12.5px/1.6 var(--mono);color:var(--muted)}
.fine a{border-bottom:1px solid currentColor}
.body{font-size:clamp(18px,1.4vw,20px);color:var(--ink-2);max-width:32em;margin-top:24px}
h2{font-size:clamp(34px,4vw,54px);max-width:17ch}
h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.025em;line-height:1.2}
.caption{margin-top:20px;font:400 12.5px/1.6 var(--mono);color:var(--muted)}

/* controls */
.btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;font-weight:500;letter-spacing:-.01em;transition:background .2s,color .2s}
.btn:hover{background:#1B2733}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
.link{display:inline-flex;gap:8px;align-items:center;font-size:16px;font-weight:500;color:var(--ink-2);transition:color .2s}
.link:hover{color:var(--ink)}
.arr{display:inline-block;transition:transform .2s var(--ease)}
.link:hover .arr,.link:focus-visible .arr{transform:translateX(3px)}

/* nav: frosted glass, no divider. Page colour at 60% with a light blur, so what scrolls under
   stays faintly visible (big headings read through it). */
.nav{position:sticky;top:0;z-index:50;color:var(--ink);background:rgba(245,247,249,.6);
  -webkit-backdrop-filter:blur(4px) saturate(1.6);backdrop-filter:blur(4px) saturate(1.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:rgba(245,247,249,.94)}}
.nav-inner{display:flex;align-items:center;height:72px;gap:40px}
.brand{display:flex}
.nav-links{display:flex;gap:4px;margin:0 auto;font-size:15px}
.nav-links a{padding:8px 14px;border-radius:999px;color:var(--ink-2);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(10,17,25,.045)}
.nav-links a[aria-current]{color:var(--ink);background:rgba(10,17,25,.06)}
.nav-end{display:flex;align-items:center;gap:20px}
.nav-signin{font-size:15px;color:var(--ink-2);transition:color .2s}
.nav-signin:hover{color:var(--ink)}
.menu-btn{display:none;width:40px;height:40px;position:relative}
.menu-btn i{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn i:first-of-type{top:16px}.menu-btn i:last-of-type{top:23px}
.menu-btn[aria-expanded=true] i:first-of-type{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] i:last-of-type{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:72px 0 0;z-index:49;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:24px var(--gutter) 40px;animation:rise .4s var(--ease)}
.sheet[hidden]{display:none}
.sheet nav{display:grid;gap:4px}
.sheet nav a{font-size:32px;letter-spacing:-.03em;padding:6px 0}
.sheet-end{display:flex;align-items:center;gap:24px}
body.locked{overflow:hidden}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* content is never hidden while scrolling; .reveal only arms the draw gesture */
.draw{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-draw) var(--ease-draw)}
.draw.drawn,.reveal.in .draw:not(.seq){stroke-dashoffset:0}
.reveal.in .draw:not(.seq){transition-delay:.35s}

/* frames */
.frame{position:relative;border-radius:var(--radius);background:var(--frame);padding:10px;box-shadow:0 24px 48px -32px rgba(10,17,25,.3)}
.crop{position:relative;aspect-ratio:2780/1630;overflow:hidden;border-radius:8px;background:var(--surface)}
.crop>img,.crop>.annot{position:absolute;width:108.20144%;max-width:none;height:auto;left:-4.10072%;top:-11.16564%}
.crop>.annot{aspect-ratio:3008/1962}
/* hero crop: the chart card only, text about twice as large */
.crop-chart{aspect-ratio:1525/698}
.crop-chart>img,.crop-chart>.annot{width:131.148%;left:-11.475%;top:-18.91%}
.annot .draw{stroke-width:5}

/* hero (light) */
.hero{position:relative;padding:clamp(56px,6vw,96px) 0 clamp(72px,8vw,120px);overflow:hidden}
.hero .wrap{position:relative}
.eyebrow{font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
h1{font-size:clamp(38px,4vw,58px);letter-spacing:-.04em;line-height:1.04;font-weight:500}
/* "Verifiable and explainable AI" under the H1, in the app's verified green */
.vpill{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:8px 16px 8px 12px;border-radius:999px;background:#E6F1EA;color:#1E6B3F;font-size:15.5px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.vpill svg{width:17px;height:17px;flex:none;color:#2F7F55}
/* optical top alignment: the lede's first line starts at the H1's cap height */
.lede{font-size:clamp(17px,1.35vw,19px);color:var(--ink-2);max-width:28em;padding-top:clamp(2px,.35vw,6px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.stage{position:relative;margin-top:clamp(48px,5vw,80px)}
.hero-frame{box-shadow:0 36px 72px -40px rgba(10,17,25,.35),0 0 0 1px rgba(10,17,25,.04)}
.js .hero-frame{animation:rise .8s var(--ease) .1s both}
.js .hero-frame .draw{transition-delay:.9s}
.hero.play .hero-frame .draw{stroke-dashoffset:0}
.note-card{position:absolute;top:-18px;right:clamp(-44px,-3vw,-12px);width:min(264px,23%);background:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 30px 60px -28px rgba(10,17,25,.35),0 0 0 1px rgba(10,17,25,.06)}
.js .note-card{opacity:0}
.hero.play .note-card{animation:rise .7s var(--ease) 1.5s both}
.nc-head{font:400 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.nc-text{font-size:14.5px;line-height:1.55;color:var(--ink)}
.nc-hl{background:linear-gradient(transparent 62%,rgba(47,85,212,.16) 62%)}
.nc-src{margin-top:10px;font:400 11.5px var(--mono);color:var(--muted)}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(56px,5vw,80px);font-size:15px;line-height:1.45;color:var(--ink-2)}
.proof li{display:flex;gap:10px}
.proof li::before{content:"";flex:none;width:6px;height:6px;margin-top:.5em;border-radius:50%;background:var(--accent)}

/* sections */
section{scroll-margin-top:72px}
.sec{padding:calc(var(--space) * .85) 0}
.band{background:var(--band)}
.head{margin-bottom:clamp(56px,6vw,96px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,120px);align-items:start}

/* why now */
.statement{font-size:clamp(28px,3.4vw,46px);line-height:1.18;letter-spacing:-.035em;font-weight:500}
.u{position:relative;white-space:nowrap}
.u svg,.fig svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.3em;overflow:visible}
.after{margin-top:28px;font-size:clamp(18px,1.5vw,20px);color:var(--ink-2);max-width:31em}

/* product: vertical tabs + screenshot */
.product{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,72px);align-items:start}
.tabs{display:grid;gap:8px}
.tabs [role=tab]{display:grid;gap:8px;padding:18px 20px 18px 24px;border-radius:12px;position:relative;color:var(--muted);transition:background .3s,color .3s}
.tabs [role=tab]::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;border-radius:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform var(--t-draw) var(--ease-draw)}
.tabs [role=tab]:hover{color:var(--ink)}
.tabs [role=tab][aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:0 12px 30px -20px rgba(10,17,25,.25)}
.tabs [role=tab][aria-selected=true]::before{transform:scaleY(1)}
.tabs strong{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.tabs span{font-size:15px;line-height:1.55;display:none;color:var(--ink-2)}
.tabs [aria-selected=true] span{display:block}
.panel[hidden]{display:none}
.panel.in-panel{animation:rise .6s var(--ease)}
.slot-inner{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;background:repeating-linear-gradient(135deg,rgba(10,17,25,.03) 0 1px,transparent 1px 14px)}
.slot-inner span{font-size:17px;font-weight:500;color:var(--ink-2)}
.slot-inner em{font:400 12px var(--mono);font-style:normal;color:var(--muted)}

/* lists */
.list{margin-top:44px;display:grid;gap:26px;max-width:32em}
.list dt{font-size:18px;font-weight:500;letter-spacing:-.015em;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.list dd{margin-top:6px;color:var(--ink-2);font-size:16.5px}
.tag{font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:rgba(47,85,212,.08);border-radius:999px;padding:4px 10px}

/* filings */
.filings{padding:clamp(28px,4vw,48px);border-radius:var(--radius);background:var(--surface);box-shadow:0 24px 48px -36px rgba(10,17,25,.3)}
.nowrap{white-space:nowrap}
.figure{font-size:clamp(72px,10.5vw,156px);font-weight:500;letter-spacing:-.06em;line-height:.85;color:var(--ink)}
.filings .figure{margin-bottom:28px}
.filings h3{margin-bottom:12px}
.filings div p:not(.fine){color:var(--ink-2);max-width:32em}
.filings .fine{margin-top:16px}

/* verification */
.gap{margin-top:28px}
.check{padding:clamp(28px,3.5vw,40px);border-radius:var(--radius);background:var(--night);color:var(--on-night);box-shadow:0 40px 80px -48px rgba(10,17,25,.6)}
.check-label{font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-3);margin-bottom:18px}
.check-text{font-size:clamp(19px,1.8vw,25px);line-height:1.7;letter-spacing:-.02em}
.fig{position:relative;white-space:nowrap}
.check .draw{stroke:var(--on-night-2)}
.check .fig.fixed .draw{stroke:var(--accent-lite)}
.fig .old{text-decoration:line-through;text-decoration-color:transparent;text-decoration-thickness:1.5px;transition:color .4s,text-decoration-color .4s}
.fig.fixed .old{color:var(--on-night-3);text-decoration-color:var(--accent-lite);margin-right:8px}
.fig .new{color:#B7C6FF;display:inline-block;animation:rise .6s var(--ease)}
.check-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:24px}
.check .fine{color:var(--on-night-3)}
.again{font:400 12.5px var(--mono);color:var(--on-night);padding:8px 14px;border-radius:999px;background:var(--night-3);transition:background .2s}
.again:hover{background:#22303C}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);counter-reset:s}
.steps li{padding:28px;border-radius:var(--radius);background:var(--surface);box-shadow:0 16px 40px -32px rgba(10,17,25,.3)}
.steps .n,.facts .n{display:block;font:400 12px var(--mono);color:var(--accent);margin-bottom:28px}
.steps h3{margin-bottom:10px}
.steps p{color:var(--ink-2);font-size:16px}

/* security facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(32px,4vw,64px)}
.facts dt{font-size:18px;font-weight:500;letter-spacing:-.015em}
.facts dt .n{margin-bottom:16px}
.facts dd{margin-top:8px;color:var(--ink-2);font-size:16px}

/* who */
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6vw,80px) clamp(40px,6vw,96px)}
.roles blockquote{font-size:clamp(22px,2.1vw,28px);line-height:1.3;letter-spacing:-.025em;text-indent:-.42em}
.roles figcaption{margin-top:16px;font:400 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* lab */
.field{position:relative;width:100%;align-self:stretch;min-height:320px}
.field canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

/* faq: the only hairlines on the page */
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:19px;font-weight:500;letter-spacing:-.015em}
.faq-list details:first-child summary{padding-top:4px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:400 18px var(--mono);color:var(--muted);transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 0 24px;color:var(--ink-2);max-width:34em;animation:rise .5s var(--ease)}
.faq-list a{border-bottom:1px solid currentColor}

/* form */
.form{display:grid;gap:16px;padding:clamp(24px,3vw,36px);border-radius:var(--radius);background:var(--surface);box-shadow:0 20px 50px -36px rgba(10,17,25,.35)}
.form label{display:grid;gap:8px;font-size:14px;font-weight:500}
.form label em{font-style:normal;font-weight:400;color:var(--muted);margin-left:6px}
.form input{font:inherit;font-size:17px;padding:13px 14px;border:1px solid transparent;border-radius:10px;background:var(--bg);color:var(--ink);transition:border-color .2s,background .2s}
.form input:focus{outline:none;border-color:var(--ink);background:#fff}
.form input[aria-invalid=true]{border-color:var(--accent)}
.form .btn{justify-self:start;margin-top:8px}

/* footer */
.foot{background:var(--band);color:var(--ink-2);padding:72px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot-grid p{margin-top:16px;font-size:14px}
.foot nav{display:grid;gap:10px;font-size:14px;align-content:start}
.foot nav a{transition:color .2s}
.foot nav a:hover{color:var(--ink)}
.foot-base{margin-top:56px;font:400 12px var(--mono);color:var(--muted)}

/* responsive */
@media (max-width:1080px){
  .who-grid,.pillars{grid-template-columns:1fr 1fr}
  .note-card{width:min(260px,30%);right:-8px}
  .proof{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-links,.nav-signin{display:none}
  .nav-end .btn-nav{display:none}
  .nav-end{margin-left:auto}
  .menu-btn{display:block}
  .hero-grid,.split,.product{grid-template-columns:minmax(0,1fr)}
  .hero-grid{align-items:start}
  .note-card{position:relative;top:auto;right:auto;width:auto;margin:-28px 16px 0}
  .br{display:none}
  .steps{grid-template-columns:1fr}
  .roles{grid-template-columns:1fr}
  .field{align-self:auto;height:360px;min-height:0}
  .tabs span{display:block}
  .tabs [role=tab]:not([aria-selected=true]) span{display:none}
}
@media (max-width:560px){
  body{font-size:17px}
  .proof,.facts,.who-grid,.pillars{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .note-card{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
}

/* ---- v8 components ---- */
.why .narrow-col{max-width:820px}
.after a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s}
.after a:hover{border-color:var(--ink)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px);margin-top:clamp(64px,7vw,112px)}
.pillars .n{display:block;font:400 12px var(--mono);color:var(--accent);margin-bottom:20px}
.pillars h3{margin-bottom:10px}
.pillars p{color:var(--ink-2);font-size:16.5px}

/* accordion: one open at a time, height animates via grid rows */
.acc{border-radius:var(--radius);background:var(--surface);box-shadow:0 24px 48px -36px rgba(10,17,25,.3);padding:8px 28px}
.acc-item+.acc-item{box-shadow:0 -1px 0 var(--line)}
.acc h3{margin:0;font-size:inherit;letter-spacing:normal}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:19px;font-weight:500;letter-spacing:-.015em;color:var(--ink-2);transition:color .2s}
.acc button:hover,.acc .open button{color:var(--ink)}
.acc-i{position:relative;width:12px;height:12px;flex:none}
.acc-i::before,.acc-i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .3s var(--ease)}
.acc-i::after{transform:rotate(90deg)}
.acc .open .acc-i::after{transform:rotate(0)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc .open .acc-panel{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden}
.acc-panel p{color:var(--ink-2);font-size:16.5px;max-width:34em;padding-bottom:24px}
.acc-panel .acc-figure{font-size:clamp(48px,5vw,72px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--ink);padding-bottom:12px}

/* app replica: tokens and behaviour copied from the Nummera app (web/src/index.css, VerificationReport.tsx) */
@font-face{font-family:"Geist";src:url(/assets/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
.app{--a-fg:#191d20;--a-ink2:#636861;--a-ink3:#878c85;--a-line:#d9dbd4;--a-border:#e8e9e4;--a-muted:#f4f5f2;
  --ok:#2f7f55;--ok-soft:#e6f1ea;--ok-ink:#1e6b3f;--warn:#c3811b;--warn-soft:#fcefdb;--warn-ink:#a8651a;--bad:#c0432f;--bad-soft:#fbe6e3;--bad-ink:#b0382a;
  position:relative;font-family:"Geist",-apple-system,"Segoe UI",sans-serif;color:var(--a-fg);background:#fff;border-radius:var(--radius);padding:28px 30px 24px;box-shadow:0 30px 60px -40px rgba(10,17,25,.35),0 0 0 1px var(--a-border)}
.app-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--a-ink3);margin-bottom:14px}
.app-text{font-size:16px;line-height:1.75}
.app .cite{display:inline-block;font:inherit;font-size:11px;line-height:16px;color:var(--a-ink2);border:1px solid var(--a-line);border-radius:4px;padding:0 4px;margin-left:3px;vertical-align:2px;background:#fff;cursor:pointer;transition:border-color .15s,color .15s}
.app .cite:hover,.app .cite[aria-expanded=true]{border-color:var(--a-ink3);color:var(--a-fg)}
.app .flag{font:inherit;color:inherit;text-align:inherit;border-radius:3px;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:pointer;display:inline}
.app .flag-wrong{background:var(--bad-soft)}
.app .flag-unsupported{background:var(--warn-soft)}
.app .flag-fixed{animation:flagFixed 2.2s ease-out both}
@keyframes flagFixed{0%,60%{background:var(--ok-soft)}100%{background:transparent}}
.app .removed{display:none}
.app-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.pill{display:inline-flex;height:28px;align-items:center;gap:6px;border-radius:6px;padding:0 10px;font-size:12.5px;font-weight:500;line-height:1;transition:background .3s,color .3s}
.pill svg{width:16px;height:16px}
.pill-red{background:var(--bad-soft);color:var(--bad-ink)}
.pill-amber{background:var(--warn-soft);color:var(--warn-ink)}
.pill-green{background:var(--ok-soft);color:var(--ok-ink)}
.app-src{font-size:12.5px;color:var(--a-ink3)}
.pop{position:absolute;z-index:5;width:min(380px,calc(100% - 24px));background:#fff;border-radius:10px;padding:14px 16px;box-shadow:0 18px 40px -12px rgba(25,29,32,.28),0 0 0 1px var(--a-border);animation:popIn .16s ease-out}
.pop[hidden]{display:none}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.v-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--a-ink3)}
.v-label i{width:6px;height:6px;border-radius:50%}
.pop .change{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums}
.pop .from{color:var(--bad-ink);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(176,56,42,.45)}
.pop .to{font-weight:500}
.pop .arrow{color:var(--a-ink3);font-size:14px}
.pop .claim{margin-top:6px;font-size:15px;font-weight:500;line-height:1.4}
.pop .why{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--a-ink2)}
.pop .where{color:var(--a-fg);text-decoration:underline;text-decoration-color:var(--a-line);text-underline-offset:3px}
.pop .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pop .acts button{font:500 13px "Geist",sans-serif;height:32px;padding:0 12px;border-radius:6px;background:var(--a-fg);color:#fff;transition:opacity .15s}
.pop .acts button.ghost{background:#fff;color:var(--a-fg);box-shadow:0 0 0 1px var(--a-border) inset}
.pop .acts button:hover{opacity:.88}
.pop .src-where{font-size:12.5px;color:var(--a-ink3)}
.pop .src-snip{margin-top:6px;font-size:14.5px;line-height:1.5}
.pop .src-meta{margin-top:6px;font-size:12.5px;color:var(--a-ink3)}

/* who */
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(32px,4vw,64px)}
.who-grid dt{font-size:clamp(20px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.who-grid dd{margin-top:8px;color:var(--ink-2);font-size:16.5px}


/* responsive for v8 components (must follow their base rules) */
@media (max-width:1080px){
  .pillars,.who-grid,.facts{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .acc{padding:4px 20px}
  .app{padding:22px 20px 20px}
}
@media (max-width:560px){
  .pillars,.who-grid,.facts{grid-template-columns:1fr}
  .acc button{font-size:17px;padding:18px 0}
  .app-text{font-size:15px}
  .app-head{flex-direction:column;gap:2px}
}

/* ---- v9: problem stats, source links, quote ---- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.stat{font-size:clamp(64px,7.5vw,112px);font-weight:500;letter-spacing:-.06em;line-height:.9;margin-bottom:20px}
.stats li p:not(.stat){color:var(--ink-2);font-size:16.5px;max-width:24em}
.src{display:inline-block;margin-top:12px;font:400 12px var(--mono);color:var(--muted);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.src:hover{color:var(--ink);border-color:var(--ink)}
.problem-after{margin-top:clamp(56px,6vw,88px);max-width:36em}
.problem-after strong{font-weight:500;color:var(--ink)}
.why .label{margin-bottom:24px}
.quote{margin:36px 0 0;padding-left:20px;box-shadow:inset 2px 0 0 var(--accent)}
.quote p{font-size:17px;line-height:1.55;color:var(--ink);font-style:normal}
.quote cite{display:block;margin-top:10px;font:400 12px/1.5 var(--mono);font-style:normal}
.quote cite a{color:var(--muted);border-bottom:1px solid var(--line)}
.quote cite a:hover{color:var(--ink)}
.head .body{margin-top:24px}
@media (max-width:900px){.stats{grid-template-columns:1fr;gap:48px}}

/* ---- v10: anywhere (web + iOS placeholders) ---- */
.devices{position:relative;padding:0 clamp(40px,7vw,96px) clamp(56px,6vw,88px) 0}
.device-desk .bar{display:flex;gap:6px;padding:4px 6px 10px}
.device-desk .bar i{width:8px;height:8px;border-radius:50%;background:#C9D1D9}
.device-phone{position:absolute;right:0;bottom:0;width:clamp(150px,17vw,220px);aspect-ratio:1179/2556;margin:0;border-radius:36px;background:#0A1119;padding:9px;box-shadow:0 40px 70px -30px rgba(10,17,25,.5)}
.device-phone .screen{position:relative;height:100%;border-radius:28px;overflow:hidden;background:var(--surface)}
.ph{padding:clamp(16px,2.4vw,32px);gap:10px}
.ph em{font-size:13px;line-height:1.5;max-width:30em;color:var(--ink-2)}
.ph code{font:400 11px var(--mono);color:var(--muted)}
.device-phone .ph{padding:40px 14px 56px;gap:8px}
.device-phone .ph span{font-size:14px}
.device-phone .ph em{font-size:11.5px}
.device-phone .ph code{font-size:10px}
.voice{position:absolute;left:18px;right:18px;bottom:20px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:var(--ink);color:#fff;font:400 11px var(--mono)}
.voice svg{flex:1;min-width:0;height:14px;overflow:visible}
.voice{overflow:hidden}
.voice .draw{stroke:#8FA7FF;stroke-width:1.6}
.devices.in .voice .draw{transition-delay:.9s}
@media (max-width:560px){
  .devices{padding:0 24px 72px 0}
  .device-phone{width:132px;border-radius:28px;padding:7px}
  .device-phone .screen{border-radius:22px}
  .device-phone .ph em,.device-phone .ph code{display:none}
  .voice{left:12px;right:12px;bottom:14px}
  .voice span{display:none}
}
/* keep the web-app brief clear of the overlapping phone: overlap = phone width − right padding */
.device-desk .ph{justify-items:start;text-align:left;place-content:center start;padding-right:calc(clamp(150px,17vw,220px) - clamp(40px,7vw,96px) + 28px)}
@media (max-width:560px){
  .device-desk .ph{padding:14px calc(132px - 24px + 16px) 14px 14px;gap:6px}
  .device-desk .ph span{font-size:14px}
  .device-desk .ph em{font-size:11px}
  .device-desk .ph code{display:none}
}

/* ---- v12: real screenshots ---- */
.crop-hero{aspect-ratio:2784/1634}
.crop-hero .annot .draw{stroke-width:7}
.crop-hero>img,.crop-hero>.annot{width:100%;height:100%;left:0;top:0}
.app-crop{aspect-ratio:1800/1056}
.app-crop>img{width:100%;height:100%;left:0;top:0;object-fit:cover}

/* ---- v12: orchestration panel (recurring work) ---- */
.flow{container-type:inline-size;position:absolute;inset:0;display:flex;flex-direction:column;background:var(--surface);padding:5.5cqw 6cqw 4.5cqw;font-family:"Geist",var(--sans);color:#191d20;--ok:#2f7f55;--ok-soft:#e6f1ea;--ok-ink:#1e6b3f}
.fl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw}
.fl-kicker{font:400 max(10px,1.5cqw) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fl-title{margin-top:.6cqw;font-size:max(15px,2.8cqw);font-weight:500;letter-spacing:-.02em}
.fl-when{display:flex;align-items:center;gap:1cqw;font:400 max(10px,1.5cqw) var(--mono);color:var(--ink-2);background:var(--bg);border-radius:999px;padding:1cqw 1.8cqw;white-space:nowrap}
.fl-dot{width:max(6px,.9cqw);height:max(6px,.9cqw);border-radius:50%;background:var(--accent)}
.fl-track{position:relative;height:max(16px,3cqw);margin:6.5cqw 12.5% 0}
.fl-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.fl-prog{position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.25px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-draw)}
.fl-node{position:absolute;top:50%;width:max(12px,2.2cqw);height:max(12px,2.2cqw);margin:calc(max(12px,2.2cqw) / -2) 0 0 calc(max(12px,2.2cqw) / -2);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #C9D0D8;transition:background .4s,box-shadow .4s}
.fl-node:nth-of-type(2){left:0}.fl-node:nth-of-type(3){left:33.333%}.fl-node:nth-of-type(4){left:66.667%}.fl-node:nth-of-type(5){left:100%}
.fl-node.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fl-node.done{background:var(--ink);box-shadow:none}
.fl-node.done.ok{background:var(--ok)}
.fl-bead{position:absolute;top:50%;left:0;width:max(8px,1.3cqw);height:max(8px,1.3cqw);margin:calc(max(8px,1.3cqw) / -2) 0 0 calc(max(8px,1.3cqw) / -2);border-radius:50%;background:var(--accent);box-shadow:0 0 0 max(4px,.7cqw) rgba(47,85,212,.14);transition:left 1.1s var(--ease-draw),opacity .3s;opacity:0}
.fl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2cqw;margin-top:3.2cqw;text-align:center}
.fl-steps li{display:grid;gap:.7cqw;justify-items:center;opacity:.45;transition:opacity .4s}
.fl-steps li.on,.fl-steps li.done{opacity:1}
.fl-agent{font:400 max(9px,1.35cqw) var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fl-steps strong{font-size:max(12px,2.1cqw);font-weight:500;letter-spacing:-.015em}
.fl-meta{font-size:max(10px,1.55cqw);color:var(--ink-2);line-height:1.4}
.fl-st{white-space:nowrap;margin-top:.6cqw;font:400 max(9.5px,1.45cqw) var(--mono);color:var(--muted);padding:.5cqw 1.2cqw;border-radius:6px;transition:background .4s,color .4s}
.fl-steps li.on .fl-st{color:var(--ink)}
.fl-steps li.done .fl-st{background:var(--bg);color:var(--ink)}
.fl-steps li.done.ok .fl-st{background:var(--ok-soft);color:var(--ok-ink)}
.fl-out{margin:auto auto 0;display:flex;align-items:center;gap:2cqw;max-width:88%;padding:2cqw 2.4cqw;border-radius:10px;background:#fff;box-shadow:0 18px 40px -22px rgba(10,17,25,.35),0 0 0 1px #e8e9e4;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.fl-out.in{opacity:1;transform:none}
.fl-out strong{display:block;font-size:max(12px,1.9cqw);font-weight:500}
.fl-out div span{display:block;font-size:max(10px,1.5cqw);color:var(--ink-2);margin-top:.3cqw}
.fl-doc{flex:none;width:max(22px,3.4cqw);height:max(28px,4.2cqw);border-radius:4px;background:linear-gradient(var(--line) 0 0) 22% 30%/56% 1.5px no-repeat,linear-gradient(var(--line) 0 0) 22% 48%/56% 1.5px no-repeat,linear-gradient(var(--line) 0 0) 22% 66%/36% 1.5px no-repeat,#fff;box-shadow:inset 0 0 0 1.5px #C9D0D8}
.fl-ok{flex:none;margin-left:auto;font-size:max(10px,1.5cqw);font-weight:500;color:var(--ok-ink);background:var(--ok-soft);border-radius:6px;padding:.6cqw 1.2cqw}
.fl-ill{position:absolute;right:3cqw;bottom:2cqw;font:400 max(9px,1.3cqw) var(--mono);color:var(--muted)}
@media (max-width:560px){
  .flow-crop{aspect-ratio:auto}
  .flow{position:relative;inset:auto;padding:20px 16px 36px}
  .fl-when{display:none}
  .fl-steps{grid-template-columns:1fr 1fr;row-gap:18px}
  .fl-track{margin-top:24px}
  .fl-out{margin-top:22px;max-width:100%}
}
@media (prefers-reduced-motion:reduce){.fl-out{opacity:1;transform:none}}

/* iPhone Pro Max frame (16/17 Pro Max: 1320×2868 px screen, 440×956 pt).
   Proportions in container units of the phone width: bezel ≈2.6%, outer corner ≈15%,
   screen corner ≈12.5% of screen width, Dynamic Island 126×37 pt at 11 pt from the top. */
/* iPhone 17 Pro Max frame, drawn to Apple's proportions: 1320×2868 px screen, 62 pt display corners on a 440 pt wide screen.
   A thin titanium band, then the black glass border, with concentric corners so the border is even all round.
   The screenshot carries the real Dynamic Island, so the frame doesn't draw one; it adds the home indicator and side buttons. */
.device-phone{--pw:clamp(150px,17vw,220px);--band:calc(var(--pw) * .012);--glass:calc(var(--pw) * .021);--r:calc(var(--pw) * .1647);
  width:var(--pw);aspect-ratio:auto;padding:var(--band);border-radius:var(--r);
  background:linear-gradient(135deg,#636970 0%,#2c3137 20%,#474d54 48%,#23282d 76%,#5a6067 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),0 2px 6px -2px rgba(10,17,25,.35),0 40px 70px -30px rgba(10,17,25,.5)}
.device-phone .screen{height:auto;aspect-ratio:auto;padding:var(--glass);border-radius:calc(var(--r) - var(--band));background:#000}   /* padding, not border: borders snap to whole pixels */
.device-phone .screen>img{width:100%;height:auto;border-radius:calc(var(--r) - var(--band) - var(--glass))}
.device-phone .screen::after{content:"";position:absolute;left:50%;bottom:calc(var(--glass) + (100% - 2 * var(--glass)) * .0084);width:calc((100% - 2 * var(--glass)) * .305);height:calc(var(--pw) * .0106);transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.86)}
/* side buttons, as fractions of the body height: action button and volume on the left; side button and Camera Control on the right */
.device-phone::before,.device-phone::after{content:"";position:absolute;width:calc(var(--pw) * .009);border-radius:2px}
.device-phone::before{left:calc(var(--pw) * -.009);top:20%;height:23.5%;
  background:linear-gradient(#3b4148 0 18.3%,transparent 18.3% 34.9%,#3b4148 34.9% 63.4%,transparent 63.4% 71.5%,#3b4148 71.5% 100%)}
.device-phone::after{right:calc(var(--pw) * -.009);top:30.7%;height:40.3%;
  background:linear-gradient(#3b4148 0 25.8%,transparent 25.8% 80.1%,#2f353b 80.1% 100%)}
@media (max-width:560px){.device-phone{--pw:132px}}

/* ---- build vs buy page ---- */
.bvb-hero{padding-bottom:calc(var(--space) * .5)}
.bvb-hero .label{margin-bottom:20px}
.cmp{display:grid;border-radius:var(--radius);background:var(--surface);box-shadow:0 24px 48px -36px rgba(10,17,25,.3);padding:8px 28px 12px}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));gap:28px;padding:20px 0;align-items:start}
.cmp-row+.cmp-row{box-shadow:0 -1px 0 var(--line)}
.cmp-row>span{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cmp-row [role=rowheader]{font-weight:500;color:var(--ink);font-size:16px}
.cmp-head{padding:24px 0 20px}
.cmp-head strong{display:block;font-size:18px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.cmp-head em{display:block;margin-top:4px;font:400 12px var(--mono);font-style:normal;color:var(--muted)}
.cmp .us{color:var(--ink);position:relative}
.cmp-head .us strong{color:var(--accent)}
.cmp-row .us::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:2px;border-radius:2px;background:var(--accent);opacity:.9}
.cmp-note{margin-top:20px}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.paths article{padding:32px 28px;border-radius:var(--radius);background:var(--surface);box-shadow:0 16px 40px -32px rgba(10,17,25,.3)}
.paths article.us{box-shadow:0 0 0 1.5px var(--accent),0 24px 48px -32px rgba(47,85,212,.35)}
.paths h3{margin-bottom:22px}
.paths ul{display:grid;gap:10px;font-size:15.5px;line-height:1.45}
.paths ul+ul{margin-top:20px;padding-top:20px;box-shadow:0 -1px 0 var(--line)}
.paths li{display:grid;grid-template-columns:16px 1fr;gap:10px;color:var(--ink-2)}
.paths .pros li::before{content:"+";font:500 15px var(--mono);color:var(--accent)}
.paths .cons li::before{content:"−";font:500 15px var(--mono);color:var(--muted)}
.when{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px)}
.when h3{margin-bottom:20px}
.when ul{display:grid;gap:14px}
.when li{position:relative;padding-left:22px;color:var(--ink-2);font-size:17px}
.when li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--line)}
.when div+div li::before{background:var(--accent)}
.bvb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
@media (max-width:900px){
  .paths{grid-template-columns:1fr}
  .when{grid-template-columns:1fr}
  .cmp{padding:4px 20px 8px}
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .cmp-row:nth-child(2){box-shadow:none}
  .cmp-row [role=rowheader]{font-size:17px;margin-bottom:4px}
  .cmp-row [role=cell]{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px}
  .cmp-row [role=cell]::before{content:attr(data-l);font:400 12px/1.6 var(--mono);color:var(--muted);padding-top:2px}
  .cmp-row .us::before{position:static;width:auto;background:none;opacity:1;color:var(--accent)}
}
.bvb-context{padding-top:calc(var(--space) * .7)}
.bvb-after{margin-top:clamp(56px,6vw,88px);max-width:36em;color:var(--ink)}

/* ---- build vs buy: Harvey balls (fill animates once when the row comes into view) ---- */
@property --f{syntax:"<number>";inherits:true;initial-value:0}
.hb{display:inline-block;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);position:relative;--f:var(--v)}
.hb::before{content:"";position:absolute;inset:3px;border-radius:50%;background:conic-gradient(var(--hb-c,var(--ink)) calc(var(--f) * 1%),transparent 0)}
.cmp .us .hb{--hb-c:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.js .cmp-row.reveal .hb{--f:0;transition:--f .9s var(--ease-draw);transition-delay:calc(var(--d,0) * 60ms + 150ms)}
.js .cmp-row.reveal.in .hb{--f:var(--v)}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin:-24px 0 28px;font:400 12.5px var(--mono);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend .hb{width:16px;height:16px;--hb-c:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.legend .hb::before{inset:2.5px}
.cmp [role=cell]{display:flex;align-items:center;gap:12px}
.hb-t{font-size:14.5px;line-height:1.35}
.cmp [role=rowheader] small{display:block;margin-top:3px;font:400 12px var(--mono);color:var(--muted)}
.cmp-row{align-items:center}
.cmp-best{align-items:start}
.cmp-best [role=cell]{display:block;font-size:14.5px}
.verdict{margin-top:28px;font-size:18px;color:var(--ink);max-width:40em}
@media (max-width:900px){
  .cmp-row [role=cell]{display:grid;grid-template-columns:minmax(96px,34%) 22px 1fr;gap:12px;align-items:center}
  .cmp-best [role=cell]{grid-template-columns:minmax(96px,34%) 1fr}
  .legend{margin-top:-12px}
}
@media (prefers-reduced-motion:reduce){.js .cmp-row.reveal .hb{--f:var(--v)}}

/* ---- contact form: sending / sent states ---- */
.form button[disabled]{opacity:.6;cursor:default}
.form [data-form-note].err{color:#b0382a}
.form-done h3{margin-bottom:8px}
.form-done p{color:var(--ink-2)}
[hidden]{display:none!important}

/* ---- contact form ---- */
.cform{display:grid;gap:12px;padding:clamp(20px,2.4vw,32px);border-radius:var(--radius);background:var(--surface);box-shadow:0 24px 56px -38px rgba(10,17,25,.38),0 0 0 1px rgba(10,17,25,.04)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf{display:grid;gap:6px;position:relative;min-width:0}
.cf>span{font-size:13px;font-weight:500;color:var(--ink)}
.cf em{font-style:normal;font-weight:400;color:var(--muted);margin-left:6px}
.cf input,.cf select,.cf textarea{font:inherit;font-size:15px;line-height:1.4;width:100%;padding:10px 12px;border:1px solid transparent;border-radius:8px;background:var(--bg);color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.cf textarea{resize:vertical;min-height:84px;line-height:1.5;padding-bottom:24px}
.cf ::placeholder{color:#9AA3AD;opacity:1}
.cf select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236A7480' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.cf select.empty{color:#9AA3AD}
.cf select option{color:var(--ink)}
.cf input:hover,.cf select:hover,.cf textarea:hover{border-color:var(--line)}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--ink);background-color:#fff;box-shadow:0 0 0 4px rgba(47,85,212,.08)}
.cf [aria-invalid=true]{border-color:#c0432f;background-color:#fff}
.cf-count{position:absolute;right:12px;bottom:8px;font:400 11.5px var(--mono);font-style:normal;color:var(--muted);pointer-events:none}
.cf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.cf-foot .fine{flex:1;min-width:220px}
.cf-foot .fine a{color:var(--ink-2)}
.cform [data-form-note].err{color:#b0382a}
.cform-done h3{margin-bottom:8px}
.cform-done p{color:var(--ink-2)}
@media (max-width:560px){.cf-row{grid-template-columns:1fr}}
@media (max-width:560px){.cf input,.cf select,.cf textarea{font-size:16px}} /* 16px stops iOS zooming into fields */

/* ---- EuroHPC strip under the Lab. The logo is the official SVG, unmodified; its clear space is inside its frame. ---- */
.hpc{margin-top:clamp(64px,7vw,104px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;background:var(--surface);border-radius:var(--radius);padding:clamp(20px,2.6vw,32px) clamp(28px,4vw,56px) clamp(20px,2.6vw,32px) clamp(12px,2vw,24px)}
.hpc img{width:clamp(260px,25vw,340px);height:auto;margin:-12px 0}
.hpc p{font-size:clamp(18px,1.45vw,21px);line-height:1.45;letter-spacing:-.015em;max-width:38em}
@media (max-width:760px){
  .hpc{grid-template-columns:1fr;padding:24px 22px 26px}
  .hpc img{width:280px;margin:-24px 0 -16px -36px}
}

/* ---- v18: painted artworks (the user's own ink and watercolour work). Text sits on top as HTML; images are artwork and screenshot only.
   Proportions follow the user's Figma concept, measured as fractions of the window width (concept frame 3042 px wide). ---- */
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}

/* hero: headline on the page; the app window, 88% of the width, on a full-bleed ink wash */
.hero{padding-bottom:0}
.hero-art{--pt:5.59vw;position:relative;margin-top:clamp(48px,9.4vw,180px);padding:var(--pt) 0 5.79vw;overflow:hidden;background:#8C8C8A}
/* the ink wash, 32 px and blurred, inlined: it is there with the first paint; the real file covers it when it arrives */
.hero-art::before{content:"";position:absolute;inset:-48px;background:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAACQBACdASogABQAPrVMnkmnJKKhMAgA4BaJaQDPoCPsVfOLfqZxE4Jv7VGQO+gA/sB5Mto0Lo2pKfPq4Nrum/lvpB1ZGgb1Aj64TzJomVfrpmAMPSVmV4N6zf8ZVdcIhDA0wlJdZyo6MPKvh0LJWZVHiBGKSQxquaASfOVLBwLIV4TNolFUAAAA) 50% 50%/cover;filter:blur(28px)}
.hero-shot-wrap{position:relative;width:87.87vw;margin:0 auto}
.hero-shot-wrap{container-type:inline-size}
.hero-shot{display:block;width:100%;height:auto}
/* the film: the poster is its first frame, so the video fades in over it without a visible change; corners as the app window */
.hero-shot,.hero-film{border-radius:1.42cqw}
.hero-shot{aspect-ratio:2560/1503;object-fit:cover}   /* the same box as the screenshot it replaces, so nothing below moves */
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.hero-film.on{opacity:1}
.hero-max{display:none}
/* film controls: one frosted pill over the bottom of the app window, shown while the pointer moves, gone when it rests */
.film-ui{position:absolute;left:0;right:0;bottom:2.2cqw;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.film-ui[hidden]{display:none}
[data-film].ui .film-ui{opacity:1;transform:none;transition-duration:.25s}
[data-film].ui .film-bar{pointer-events:auto}
[data-film].rest{cursor:none}
.film-bar{display:flex;align-items:center;gap:2px;width:min(620px,62cqw);height:46px;padding:0 10px 0 6px;border-radius:999px;color:#fff;
  background:rgba(14,24,34,.58);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 0 0 .5px rgba(255,255,255,.16) inset,0 14px 34px -14px rgba(0,0,0,.5);font:400 12px/1 var(--mono);letter-spacing:.02em}
.fb-btn{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:inherit;opacity:.82;transition:opacity .2s,background .2s}
.fb-btn:hover{opacity:1;background:rgba(255,255,255,.1)}
.fb-btn:focus-visible,.fb-track:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:1px}
/* icons: Heroicons v2 outline, 24px grid, as shipped (stroke 1.5, round caps), the set the app uses */
.fb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fb-play .i-pause,.paused .fb-play .i-play,.fb-btn .i-out,:fullscreen .fb-btn .i-in{display:inline}
.fb-play .i-play,.paused .fb-play .i-pause,.fb-btn .i-in,:fullscreen .fb-btn .i-out{display:none}
.fb-time{flex:none;min-width:34px;padding:0 6px;text-align:center;opacity:.78;font-variant-numeric:tabular-nums}
.fb-track{position:relative;flex:1;height:30px;margin:0 4px;cursor:pointer;touch-action:none}
.fb-rail{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;transition:height .2s var(--ease),margin .2s var(--ease)}
.fb-track:hover .fb-rail,.fb-track.drag .fb-rail{height:5px;margin-top:-2.5px}
.fb-buf,.fb-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 0;transform:scaleX(0)}
.fb-buf{background:rgba(255,255,255,.18)}
.fb-fill{background:#fff}
.fb-ticks i{position:absolute;top:50%;width:2px;height:9px;margin:-4.5px 0 0 -1px;border-radius:1px;background:rgba(255,255,255,.5);pointer-events:none}
.fb-tip{position:absolute;bottom:calc(100% + 10px);left:0;padding:6px 9px;border-radius:8px;background:rgba(14,24,34,.82);white-space:nowrap;
  transform:translateX(-50%);opacity:0;transition:opacity .15s;pointer-events:none}
.fb-tip b{font-weight:400;opacity:.6;margin-left:6px}
.fb-track:hover .fb-tip,.fb-track.drag .fb-tip{opacity:1}
/* full screen: the wrapper goes full screen so the controls come along; the film is letterboxed on navy */
[data-film]:fullscreen{display:grid;place-items:center;background:#0e1822}
[data-film]:fullscreen picture{visibility:hidden}
[data-film]:fullscreen .hero-film{object-fit:contain;border-radius:0}
[data-film]:fullscreen .film-ui{bottom:28px}
[data-film]:fullscreen .film-bar{width:min(720px,70vw)}
@media (max-width:900px),(hover:none),(pointer:coarse){.film-ui{display:none}}
.js .hero-shot{animation:rise .8s var(--ease) .1s both}

/* who: heading text and card text share one left line; three panels edge to edge, cards centred on each */
#who,#demo{container-type:inline-size}
/* the card text line: panel = (width - two 4.6vw gaps) / 3; card is 84% of it, centred (8% inset), then 1.3vw padding */
#who,#demo{--card-x:calc((100cqw - 9.2vw) / 3 * .08);--text-x:calc(var(--card-x) + 1.3vw)}
#who .head{margin:0 0 clamp(32px,4.3vw,72px);padding-left:var(--text-x);max-width:none}
#who .wrap{max-width:none;padding:0}
#who h2{max-width:13ch}
/* optical: at 54px the first letter carries ~.065em of side bearing; pull the big headings onto the text line */
#who h2,.demo-card h2{margin-left:-.065em}
.who-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4.6vw}
.who-panel{position:relative;min-height:24.26vw;overflow:hidden;background:#D9D9D7;display:grid;place-items:center;padding:clamp(16px,3.2vw,56px) 0}
.who-cards{position:relative;display:grid;gap:1.74vw;width:84%}
.who-card{background:var(--bg);border-radius:12px;padding:1.05vw 1.3vw 1vw}
.who-card dt{font-size:clamp(17px,1.8vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.3}
.who-card dd{margin-top:.35em;color:var(--ink-2);font-size:clamp(14px,1.2vw,20px);line-height:1.55}

/* demo: artwork 48% from the left edge with the intro card on it; form card 47% with a slim right margin, same height */
.demo-grid{display:grid;grid-template-columns:47.83vw minmax(0,1fr);column-gap:2.12vw;padding-right:2.86vw;align-items:stretch}
.demo-art{position:relative;overflow:hidden;background:#D8C49A;min-height:43.13vw;padding:3.48vw 0 3.48vw var(--card-x)}
.demo-art .art{object-position:0% 50%}
.demo-card{position:relative;width:29.9vw;background:var(--bg);border-radius:12px;padding:1.3vw 1.3vw 1.9vw}
.demo-card p{margin-top:.9em;color:var(--ink-2);font-size:clamp(15px,1.2vw,20px);line-height:1.6}
.demo-form .cform{height:100%;align-content:start}

@media (max-width:900px){
  /* phones: the app window is enlarged so the chart reads, and runs off the right edge; the painting frames it on three sides */
  .hero-art{--pt:16vw;padding:var(--pt) 0 18vw}
  .hero-shot-wrap{width:168vw;margin:0 0 0 calc(var(--gutter) + 12px)}
  /* phones: the film runs off the right edge like the screenshot did; this button, at the top right of what is visible, plays it full screen */
  .hero-max{display:grid;place-items:center;position:absolute;top:calc(var(--pt) + 12px);right:calc(var(--gutter) + 2px);z-index:2;
    width:40px;height:40px;border-radius:50%;color:#fff;background:rgba(14,24,34,.52);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 0 0 .5px rgba(255,255,255,.18) inset,0 6px 18px -6px rgba(0,0,0,.4);transition:opacity .4s var(--ease),transform .2s var(--ease)}
  .hero-max[hidden]{display:grid;opacity:0;pointer-events:none}
  .hero-max:active{transform:scale(.94)}
  .hero-max svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .hero-max::after{content:"";position:absolute;inset:-8px}
  #who .head{padding-left:var(--gutter)}
  .demo-grid{grid-template-columns:1fr;padding-right:0;row-gap:24px}
  .demo-art{min-height:340px;padding:24px var(--gutter)}
  .demo-card{width:auto;max-width:460px;padding:20px 20px 24px}
  .demo-form{padding:0 var(--gutter)}
}

/* ---- v19: "Who it's for" on phones and small tablets: three painted cards in a swipeable row.
   The next card peeks in to invite the swipe; CSS scroll-snap does the swiping, app.js only keeps the pager in step. ---- */
.who-pager{display:none}
@media (max-width:900px){
  .who-panels{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;position:relative}
  .who-panels::-webkit-scrollbar{display:none}
  .who-panels:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
  .who-panel{flex:0 0 calc(100% - 2 * var(--gutter) - 24px);scroll-snap-align:start;scroll-snap-stop:always;
    aspect-ratio:4/5;min-height:0;border-radius:16px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end}
  .who-cards{width:100%;max-width:none;gap:8px}
  .who-card{padding:14px 16px 16px;border-radius:10px}
  .who-card dt{font-size:19px;line-height:1.25}
  .who-card dd{font-size:15px;margin-top:4px}
  .who-pager{display:flex;align-items:center;gap:8px;padding:20px var(--gutter) 0}
  .who-pager button{width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .35s var(--ease),background .35s var(--ease);position:relative}
  .who-pager button::after{content:"";position:absolute;inset:-12px -6px}          /* a comfortable tap target */
  .who-pager button[aria-current]{width:24px;background:var(--ink)}
  .who-count{margin-left:auto;font:400 12px var(--mono);letter-spacing:.06em;color:var(--muted)}
  .who-count b{font-weight:400;color:var(--ink)}
}
@media (min-width:600px) and (max-width:900px){
  .who-panel{flex-basis:58%;aspect-ratio:1/1}
  .hero-art{--pt:10vw;padding:var(--pt) 0 11vw}
  .hero-shot-wrap{width:120vw}
}
@media (prefers-reduced-motion:reduce){.who-pager button{transition:none}}


/* consent: a small glass card bottom right, same glass as the nav */
.consent{position:fixed;right:20px;bottom:20px;z-index:60;width:340px;padding:16px 18px 14px;border-radius:16px;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
  box-shadow:0 1px 2px rgba(10,17,25,.06),0 12px 32px -12px rgba(10,17,25,.22);font-size:14px;line-height:1.5;color:var(--ink-2);
  animation:rise .5s var(--ease) both}
.consent[hidden]{display:none}
.consent a{color:var(--ink);border-bottom:1px solid rgba(10,17,25,.25)}
.consent-btns{display:flex;gap:8px;margin-top:12px}
/* Accept is the primary button; Reject optional keeps the same size, place and legibility, so declining stays one easy click */
.consent-btn{flex:1;height:38px;border-radius:999px;background:rgba(10,17,25,.07);color:var(--ink);font-size:14px;font-weight:500;text-align:center;transition:background .2s}
.consent-btn:hover{background:rgba(10,17,25,.12)}
.consent-btn[data-consent=yes]{background:var(--ink);color:#fff}
.consent-btn[data-consent=yes]:hover{background:#26303B}
.consent.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@media (max-width:560px){.consent{left:12px;right:12px;bottom:12px;width:auto}}
.foot-link{font-size:14px;color:inherit;text-align:left;transition:color .2s}.foot-link:hover{color:var(--ink)}
/* demo form honeypot: off screen for people, filled in by bots */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* announcement bar (front page): Safari 26 takes its toolbar colour from a fixed, full-width element at the top,
   so the bar paints the toolbar ink. It tucks away on the first scroll and the toolbar settles back to the page colour. */
:root{--tb-h:0px}
.has-topbar{--tb-h:40px}
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--tb-h);background:var(--night);color:var(--on-night);transition:transform .35s var(--ease)}
.topbar a{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;padding:0 16px;font-size:14px;letter-spacing:-.005em;white-space:nowrap}
.topbar em{font-style:normal;color:var(--on-night-2);transition:color .2s}
.topbar a:hover em{color:var(--on-night)}
.topbar a:hover .arr{transform:translateX(3px)}
.tb-short{display:none}
.has-topbar body{padding-top:var(--tb-h)}
.has-topbar .nav{top:var(--tb-h);transition:top .35s var(--ease)}
.tucked .topbar{transform:translateY(-100%)}
.tucked .nav{top:0}
@media (max-width:560px){.tb-long{display:none}.tb-short{display:inline}.topbar a{font-size:13.5px}}