/* FREQUENCY Systems — site styles, v10 (narrative v10; identity and layout as v8/v9).
   Type: Mona Sans (display, wordmark and text; width and weight axes) and Martian Mono (readings and labels). SIL OFL, self-hosted.
   Palette: ink and steel, with electric blue on the left of the field, deep true red on the right, violet only at the seam. */
@font-face{font-family:'Mona Sans';src:url('/v-7edccf3279/assets/fonts/mona-sans-latin-standard.woff2') format('woff2-variations'),url('/v-7edccf3279/assets/fonts/mona-sans-latin-standard.woff2') format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:'Martian Mono';src:url('/v-7edccf3279/assets/fonts/martian-mono-latin-standard.woff2') format('woff2-variations'),url('/v-7edccf3279/assets/fonts/martian-mono-latin-standard.woff2') format('woff2');font-weight:100 800;font-stretch:75% 112.5%;font-display:swap}

:root{
  --ink:#050608;--ink-2:#0A0C10;--ink-3:#10141A;--ink-4:#171C24;
  --line:rgba(206,216,232,.10);--line-2:rgba(206,216,232,.18);--line-3:rgba(206,216,232,.32);
  --fg:#EEF1F5;--fg-2:#B4BBC6;--fg-3:#7D8592;--fg-4:#566070;
  --blue:#2F6BFF;--blue-hi:#8DB1FF;--red:#D7141E;--red-deep:#A50F18;--red-hi:#FF6B70;--violet:#6B4BFF;
  --sans:'Mona Sans','Helvetica Neue',Arial,sans-serif;--mono:'Martian Mono',ui-monospace,Menlo,monospace;
  --header-h:78px;--gutter:clamp(18px,4.2vw,64px);--max:1440px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--ink);color:var(--fg-2);font:400 16.5px/1.6 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3{color:var(--fg);font-family:var(--sans);font-weight:560;font-stretch:112%;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,88px)}
h2{font-size:clamp(30px,3.6vw,56px)}
h3{font-size:clamp(19px,1.5vw,22px);font-weight:560;font-stretch:106%;letter-spacing:-.01em;line-height:1.2}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}button:disabled{cursor:default;opacity:.3}
ul,ol{padding:0;list-style:none}
img,svg,canvas,video{display:block;max-width:100%}
::selection{background:#2449B8;color:#fff}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:4px;border-radius:2px}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.skip{position:fixed;left:12px;top:-100px;z-index:99;background:var(--fg);color:var(--ink);padding:12px 16px}.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type helpers ---------- */
.mono,.label,.eyebrow{font-family:var(--mono);font-stretch:87.5%;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;color:var(--fg-3);margin-bottom:24px}
.eyebrow::before{content:'';width:22px;height:1px;background:linear-gradient(90deg,var(--blue),var(--red))}
.label{font-size:11px;color:var(--fg-3)}
.lede{font-size:clamp(18px,1.55vw,22px);line-height:1.5;color:var(--fg-2);max-width:32em;font-stretch:100%}
.big{font-size:clamp(26px,3vw,44px);line-height:1.18;font-weight:440;font-stretch:108%;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.big.big-long{font-size:clamp(22px,2.3vw,34px);line-height:1.24}
.big em{font-style:normal;color:var(--fg-3)}
.note{font:400 12px/1.6 var(--mono);font-stretch:87.5%;letter-spacing:.02em;color:var(--fg-3)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;font:400 10.5px/1.5 var(--mono);font-stretch:87.5%;letter-spacing:.08em;color:var(--fg-2);text-transform:uppercase;white-space:nowrap}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(215,20,30,.18)}

/* ---------- controls ---------- */
.button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:50px;padding:12px 20px 12px 22px;border-radius:2px;background:var(--fg);color:var(--ink);font:560 14.5px/1.2 var(--sans);font-stretch:104%;letter-spacing:.005em;border:1px solid var(--fg);transition:background .25s,color .25s,border-color .25s,transform .25s}
.button span{font-size:16px;line-height:1;transition:transform .25s}
.button:hover{background:#fff}.button:hover span{transform:translate(2px,-2px)}
.button-red{background:var(--red);border-color:var(--red);color:#fff}.button-red:hover{background:var(--red-deep);border-color:var(--red-deep)}
.button-ghost{background:rgba(5,6,8,.35);border-color:var(--line-3);color:var(--fg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.button-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--fg-2)}
.icon-button{width:46px;height:46px;display:inline-grid;place-items:center;background:transparent;border:1px solid var(--line-2);border-radius:2px;color:var(--fg);font-size:16px;transition:border-color .2s,background .2s}
.icon-button:hover:not(:disabled){border-color:var(--fg-2);background:rgba(255,255,255,.05)}
.text-link{display:inline-flex;gap:10px;align-items:center;color:var(--fg);font-weight:500;padding:6px 0;border-bottom:1px solid var(--line-3);transition:border-color .2s}.text-link:hover{border-color:var(--fg)}
.text-button{background:none;border:0;border-bottom:1px solid var(--line-3);padding:8px 0;color:var(--fg-2);font-size:14px}.text-button:hover{color:var(--fg);border-color:var(--fg)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:40;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.site-header.is-solid{background:rgba(5,6,8,.78);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
.header-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:14px;color:var(--fg)}
.brand-mark{height:27px;width:auto}
.brand-name{font:600 15px/1 var(--sans);font-stretch:125%;letter-spacing:.24em}
#navigation{display:flex;align-items:center;gap:30px}
#navigation a{font-size:14px;color:var(--fg-2);padding:8px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
#navigation a:hover{color:var(--fg)}#navigation a[aria-current="page"]{color:var(--fg);border-color:var(--fg-3)}
#navigation .nav-cta{padding:10px 16px;border:1px solid var(--line-3);border-radius:2px;color:var(--fg)}
#navigation .nav-cta:hover{background:rgba(255,255,255,.06);border-color:var(--fg-2)}
.menu-toggle{display:none;align-items:center;gap:12px;background:transparent;border:1px solid var(--line-3);padding:10px 14px;border-radius:2px;color:var(--fg);font-size:13px}
.menu-toggle i{width:16px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}.menu-toggle i::after{content:'';position:absolute;inset:3.5px 0 auto;border-top:1.5px solid currentColor}
main{display:block}
.page-pad{padding-top:calc(var(--header-h) + clamp(40px,6vw,90px))}

/* ---------- the motion core stage ---------- */
.core{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
.core-still,.core-canvas-host,.core-canvas{position:absolute;inset:0;width:100%;height:100%}
.core-still img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.core-canvas{opacity:0;transition:opacity 1s ease}
.core[data-state="live"] .core-canvas{opacity:1}
.core[data-state="live"] .core-still{opacity:0;transition:opacity 1s ease .25s}
.core::after{content:'';position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(to bottom,rgba(5,6,8,0),rgba(5,6,8,.72) 70%,var(--ink));pointer-events:none;z-index:1}
.core:focus-visible{outline-offset:-6px}
.core-ui{position:absolute;z-index:3;right:var(--gutter);bottom:22px;display:flex;align-items:center;gap:14px}
.core-hint{font:400 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;color:var(--fg-3);text-transform:uppercase}
.core-pause{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;background:rgba(5,6,8,.4);color:var(--fg-2);font:400 10.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.core-pause:hover{color:var(--fg);border-color:var(--line-3)}
.core-pause b{display:inline-block;width:8px;height:9px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.core-pause[aria-pressed="true"] b{border:0;border-left:8px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;width:0;height:0}
.core[data-state="static"] .core-ui .core-hint{display:none}

/* home hero */
.hero{position:relative;min-height:max(660px,100svh);display:flex;flex-direction:column;isolation:isolate;
  /* One layout for the emblem, its still and the type. --E is the emblem's width; the emblem sits in a 16:9 plate frame
     (81.35% of its width, starting 10.93% down, ending 89.21% down; the field centre is at 50.16%). */
  --E:min(64vw,92svh,1220px);
  --plate-w:calc(var(--E) / .8135);--plate-h:calc(var(--plate-w) * .5625);
  --emblem-top:calc(var(--header-h) + clamp(10px,2.2svh,26px) + max(0px,(100svh - 980px) * .34));
  --plate-top:calc(var(--emblem-top) - var(--plate-h) * .1093);
  --emblem-bottom:calc(var(--plate-top) + var(--plate-h) * .8921)}
.hero-core{position:absolute;inset:0;z-index:0}
.hero-core .core-plate{inset:auto;left:50%;top:var(--plate-top);width:var(--plate-w);height:var(--plate-h);margin-left:calc(var(--plate-w) * -.5016)}
.hero-core .core-plate img{object-fit:fill}
.hero-core.core::after{height:26%}
/* The wordmark sits between the emblem's feet, so emblem and name read as one logo; the headline follows it. */
.hero-copy{position:relative;z-index:2;padding:calc(var(--emblem-bottom) - var(--E) * .042) var(--gutter) clamp(78px,9.5vh,118px);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-word{font:600 calc(var(--E) * .0268)/1 var(--sans);font-stretch:125%;letter-spacing:.5em;margin-right:-.5em;color:var(--fg);margin-bottom:clamp(20px,3.2svh,34px)}
.hero h1{font-size:clamp(40px,4.9vw,78px);font-weight:520;font-stretch:115%;letter-spacing:-.03em;max-width:13em}
.hero .lede{margin-top:16px;text-align:center;font-size:clamp(16px,1.25vw,19px)}
.hero .actions{justify-content:center;margin-top:28px}
.hero-status{position:absolute;z-index:3;left:var(--gutter);bottom:22px;display:flex;align-items:center;gap:12px}

/* page heads */
.head{position:relative;min-height:min(86svh,860px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.head-copy{position:relative;z-index:2;padding:calc(var(--header-h) + 40px) 0 clamp(56px,8vh,96px);width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.head-copy h1{max-width:11.5em}
.head-copy .lede{margin-top:22px}
.head-plate{position:absolute;inset:0;z-index:0}
.head-plate img{width:100%;height:100%;object-fit:cover}
.head::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,8,.9) 0%,rgba(5,6,8,.6) 38%,rgba(5,6,8,.06) 72%),linear-gradient(to bottom,rgba(5,6,8,.5),rgba(5,6,8,0) 26%,rgba(5,6,8,0) 60%,var(--ink))}

/* ---------- sections ---------- */
.section{padding-block:clamp(72px,10vw,150px)}
.section-tight{padding-block:clamp(56px,7vw,100px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:end}
.split-wide{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.intro h1{font-size:clamp(38px,4.6vw,72px);max-width:14em}
.intro.page-pad{padding-top:calc(var(--header-h) + clamp(28px,4vw,64px))}

/* the proof rail: one signal running through four steps */
.rail-box{position:relative;margin-top:clamp(44px,6vw,80px)}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rail-line{position:absolute;left:28px;right:0;top:27px;height:2px;pointer-events:none}
.rail-line svg{width:100%;height:2px;overflow:visible}
.rail-line .base{stroke:var(--line-2);stroke-width:1}
.rail-line .pulse{stroke:url(#rail-grad);stroke-width:2;stroke-dasharray:120 1000;stroke-dashoffset:120;animation:railPulse 4.8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes railPulse{from{stroke-dashoffset:120}to{stroke-dashoffset:-1000}}
.rail li{position:relative;padding-right:clamp(12px,2vw,28px)}
.rail .node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#313844,#0C0F14 72%);border:1px solid var(--line-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.55);color:var(--fg)}
.rail .node .ico{width:26px;height:26px}
.rail .n{display:block;margin-top:26px;font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em;color:var(--fg-4)}
.rail strong{display:block;margin-top:10px;font:560 clamp(20px,1.7vw,26px)/1.1 var(--sans);font-stretch:110%;color:var(--fg);letter-spacing:-.01em}
.rail .l{display:block;margin-top:8px;color:var(--fg-3);font-size:15px;line-height:1.45;max-width:15em}

/* full-bleed photographic plates */
.plate{position:relative;min-height:min(94svh,940px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.plate>picture{position:absolute;inset:0;z-index:-2}
.plate picture img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.plate.is-in picture img{transform:scale(1)}
.plate::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--ink) 0%,rgba(5,6,8,0) 20%,rgba(5,6,8,0) 46%,rgba(5,6,8,.84) 80%,var(--ink) 100%)}
.plate-copy{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;padding-bottom:clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end}
.plate-copy h2{max-width:12em}
.plate-copy .side{display:grid;gap:22px;justify-items:start;position:relative}
/* a soft local shade so the longer lede stays readable where it crosses the lit crane */
.plate-copy .side::before{content:'';position:absolute;inset:-96px -84px -44px -76px;z-index:-1;pointer-events:none;background:radial-gradient(farthest-side at 50% 56%,rgba(5,6,8,.86) 0 42%,rgba(5,6,8,.64) 68%,rgba(5,6,8,0) 100%)}
.plate-copy .side .lede{color:rgba(238,241,245,.88);text-shadow:0 1px 16px rgba(5,6,8,.95)}
.plate-tag{position:absolute;right:var(--gutter);top:clamp(20px,4vw,48px);font:400 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;color:rgba(238,241,245,.5);text-transform:uppercase}

/* the six phases, compact (home) */
.phase-mini{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line-3);width:100%;margin-top:8px}
.phase-mini a{display:block;padding:16px 12px 6px 0;color:var(--fg-3);transition:color .2s}
.phase-mini a:hover{color:var(--fg)}
.phase-mini b{display:block;font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em;color:var(--fg-4);margin-bottom:10px}
.phase-mini span{font:500 15px/1.25 var(--sans);font-stretch:104%}

/* invitation */
.invite{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,80px);align-items:end;padding:clamp(36px,5vw,72px);border:1px solid var(--line-2);background:radial-gradient(110% 140% at 0% 0%,rgba(47,107,255,.11),transparent 52%),radial-gradient(110% 140% at 100% 100%,rgba(215,20,30,.11),transparent 52%),var(--ink-2)}
.invite .actions{justify-content:flex-end}

/* ---------- platform ---------- */
.flow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.flow-col{display:grid;gap:10px}
.flow-chip{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-2);background:var(--ink-2);color:var(--fg-2);font-size:14.5px}
.flow-chip i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 10px rgba(47,107,255,.7)}
.flow-col.out .flow-chip i{background:var(--red);box-shadow:0 0 10px rgba(215,20,30,.7)}
.flow-col.out .flow-chip{color:var(--fg)}
.flow-core{position:relative;aspect-ratio:1;width:clamp(170px,17vw,240px);border-radius:4px;overflow:hidden;border:1px solid var(--line-3);background:#000}
.flow-core img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flow-core::after{display:none}
.flow-core b{position:absolute;z-index:3;left:0;right:0;bottom:14px;text-align:center;font:600 11px/1 var(--sans);font-stretch:125%;letter-spacing:.32em;margin-right:-.32em;color:var(--fg)}
.flow-arrow{width:clamp(36px,5vw,80px);height:2px;background:linear-gradient(90deg,var(--line-2),var(--fg-3));position:relative;overflow:hidden}
.flow-arrow::after{content:'';position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--blue-hi),transparent);animation:flowRun 2.4s linear infinite}
.flow-arrow.r::after{background:linear-gradient(90deg,transparent,var(--red-hi),transparent)}
@keyframes flowRun{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(40px,5vw,64px)}
.pillars li{background:var(--ink);padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start}
.pillars .ico{width:30px;height:30px;color:var(--fg-2)}
.pillars strong{font:560 22px/1.1 var(--sans);font-stretch:110%;color:var(--fg)}
.pillars span{color:var(--fg-3);font-size:15.5px}
.status-line{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--fg-3);font-size:14px}
/* what exists today: a steel rule with the signal running through it, the claim on the left, the evidence on the right */
.proof{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line-2)}
.proof::before{content:'';position:absolute;left:0;top:-1px;width:min(360px,42%);height:1px;background:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--red))}
.proof .eyebrow{margin-bottom:20px}.proof .lede{max-width:31em}
.proof-link{margin-top:26px}
/* copy blocks (homepage-copy.md, 2026-11-08): several paragraphs in one column, and the longer Home sections */
.paras{display:grid;gap:18px;align-content:start}
.hero .lede.hero-more{margin-top:10px;color:var(--fg-3)}
.plate-copy .lead{position:relative}
.plate-copy .lead::before{content:'';position:absolute;inset:-80px -70px -40px -80px;z-index:-1;pointer-events:none;background:radial-gradient(farthest-side at 46% 60%,rgba(5,6,8,.78) 0 40%,rgba(5,6,8,.5) 70%,rgba(5,6,8,0) 100%)}
.plate-copy .plate-lede{margin-top:20px;color:rgba(238,241,245,.88);text-shadow:0 1px 16px rgba(5,6,8,.95)}
.plate-copy .disclose{display:grid;gap:6px}
.plate-copy .disclose .note{color:rgba(238,241,245,.7)}
.invite-lede{margin-top:20px}
/* founder (2026-11-08): the approved full portrait at its own 853 × 1280 proportions (never cropped, filtered or
   object-fit) beside the biography. The frame is sized, the image fills it at height:auto; on desktop the width follows
   the viewport height so the whole portrait fits one screen. Phones stack name, portrait, biography. */
.hero-status{gap:18px}
.hero-founder{display:inline-flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line-3);font:400 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);transition:color .2s,border-color .2s}
.hero-founder:hover{color:var(--fg);border-color:var(--fg-2)}
/* every founder rule is scoped to the homepage section: the Company page keeps its own <p class="founder"> line */
.founder-section{padding-bottom:0}
.founder-section .founder-profile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;grid-template-areas:"portrait head" "portrait bio";column-gap:clamp(40px,6vw,104px);row-gap:clamp(22px,2.4vw,32px);align-items:end}
.founder-section .founder-head{grid-area:head;position:relative;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-2)}
.founder-section .founder-head::before{content:'';position:absolute;left:0;top:-1px;width:min(360px,42%);height:1px;background:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--red))}
.founder-section .founder-head .eyebrow{margin-bottom:20px;align-items:flex-start;text-wrap:balance}
/* the full title wraps on phones: balanced lines, the dash level with the first line and never squeezed */
.founder-section .founder-head .eyebrow::before{flex-shrink:0;margin-top:calc(.8em - .5px)}
.founder-section .founder-portrait{grid-area:portrait;position:relative;align-self:center;width:clamp(280px,30vw,460px);width:min(clamp(280px,30vw,460px),calc((100svh - var(--header-h) - 128px) * .6664))}
.founder-section .founder-portrait::after{content:'';position:absolute;inset:-1px;border:1px solid var(--line-2);pointer-events:none}
.founder-section .founder-portrait img{width:100%;height:auto}
.founder-section .founder-bio{grid-area:bio}
/* the founder's name leads; the title sits under it; three facts from the biography can be read at a glance */
.founder-section .founder-head h2{font-size:clamp(40px,4.8vw,76px);letter-spacing:-.03em}
.founder-section .founder-role{margin-top:clamp(12px,1.2vw,18px);font:400 clamp(11.5px,.95vw,13px)/1.5 var(--mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);text-wrap:balance}
.founder-section .founder-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.founder-section .founder-facts div{padding:16px 18px 17px 0}
.founder-section .founder-facts div+div{padding-left:18px;border-left:1px solid var(--line)}
.founder-section .founder-facts dt{font:400 10px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.founder-section .founder-facts dd{margin-top:8px;color:var(--fg);font:540 clamp(16px,1.25vw,19px)/1.25 var(--sans);font-stretch:106%}
.founder-section .founder-link{margin-top:4px}
.founder-more{margin-top:14px}
/* home: what the software is designed to change */
.gains-box{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line-2)}
.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:18px}
.gains dt{font:560 clamp(18px,1.4vw,21px)/1.2 var(--sans);font-stretch:108%;color:var(--fg)}
.gains dd{margin-top:8px;color:var(--fg-2);font-size:15.5px;line-height:1.5;max-width:26em}
.gains-box .note{margin-top:18px}
.method em i{display:block;font-style:normal;color:var(--fg-4);margin-bottom:4px}
.method.method-5 em{font:400 13.5px/1.45 var(--sans);font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--fg-2)}
.method.method-5 em i{font:400 10px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}
.founder-section .founder-bio .lede{max-width:34em}
@media (min-width:1081px){.method-5{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* capabilities: the three disciplines sit under the intro, a little tighter than the platform pillars */
.disciplines{margin-top:clamp(40px,4.5vw,60px)}.disciplines li{padding:clamp(22px,2.4vw,32px)}

/* ---------- harbor ---------- */
.stage-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(20px,2.6vw,34px)}
.stage-head h2{font-size:clamp(26px,2.8vw,42px)}
.stage-head p{color:var(--fg-2);font-size:clamp(15.5px,1.2vw,18px);line-height:1.5;max-width:38em}
@media (max-width:1080px){.stage-head{grid-template-columns:1fr;gap:12px}}
.stage{position:relative;width:100%;overflow:hidden;background:#04070c;border:1px solid var(--line-2);isolation:isolate}
.stage:focus-visible{outline-offset:3px}
.stage-view{position:relative;aspect-ratio:16/9;overflow:hidden}
@media (min-width:1081px){.stage-view{aspect-ratio:auto;height:min(calc((min(var(--max),100vw - 2*var(--gutter))) * .5625),calc(100svh - var(--header-h) - 150px));min-height:520px}}
.stage-plates{position:absolute;inset:0}
.stage-plates img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.stage-plates img.on{opacity:1}
/* the scene: photographs given depth and motion on one canvas, drawn from the walkthrough's clock; the stills above stay when it cannot run */
.stage-3d{position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.stage-3d.is-dragging{cursor:grabbing}
.stage-3d canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.stage[data-scene="live"] .stage-3d canvas{opacity:1}
.stage[data-scene="live"] .stage-plates{visibility:hidden}
.stage[data-scene="static"] .stage-3d,.stage[data-scene="static"] .stage-hint,.stage:not([data-scene="live"]) .stage-labels{display:none}
.stage-view::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 58% 62% at 0% 100%,rgba(4,6,10,.8),rgba(4,6,10,.56) 55%,rgba(4,6,10,0)),linear-gradient(to top,rgba(4,6,10,.94),rgba(4,6,10,.62) 22%,rgba(4,6,10,0) 46%),linear-gradient(to right,rgba(4,6,10,.5),rgba(4,6,10,0) 36%)}
/* labels sit on the thing they describe: a dot on the spot, a short leader, the reading */
.stage-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.tag3{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;--h:30px}
.tag3.on{opacity:1}
.tag3 i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--blue-hi);box-shadow:0 0 0 4px rgba(141,177,255,.18)}
.tag3 s{position:absolute;left:0;bottom:3px;width:1px;height:var(--h);background:linear-gradient(to top,rgba(141,177,255,.9),rgba(141,177,255,.25))}
.tag3 span{position:absolute;left:-1px;bottom:calc(var(--h) + 2px);white-space:nowrap;padding:5px 9px;font:400 10.5px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);background:rgba(5,7,11,.74);border:1px solid var(--line-2);border-left-color:var(--blue-hi);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tag3 b{color:var(--fg);font-weight:500}
.tag3.red i{background:var(--red-hi);box-shadow:0 0 0 4px rgba(255,107,112,.18)}.tag3.red s{background:linear-gradient(to top,rgba(255,107,112,.9),rgba(255,107,112,.25))}.tag3.red span{border-left-color:var(--red-hi)}
.tag3.white i{background:#f4f7fb;box-shadow:0 0 0 4px rgba(244,247,251,.16)}.tag3.white s{background:linear-gradient(to top,rgba(244,247,251,.85),rgba(244,247,251,.2))}.tag3.white span{border-left-color:#f4f7fb}
.tag3.name,.tag3.short{--h:16px}.tag3.name span{background:none;border:0;padding:0 0 2px 8px;color:var(--fg);letter-spacing:.14em;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 10px rgba(4,6,10,.9)}
.tag3.down s{top:3px;bottom:auto;background:linear-gradient(to bottom,rgba(244,247,251,.85),rgba(244,247,251,.2))}.tag3.down span{bottom:auto;top:calc(var(--h) + 2px)}
.tag3.left span{left:auto;right:-1px;border-left-color:var(--line-2);border-right-color:var(--blue-hi)}.tag3.left.white span{border-right-color:#f4f7fb}.tag3.left.red span{border-right-color:var(--red-hi)}
.tag3.name.left span{padding:0 8px 2px 0}
.stage-labels.is-narrow .tag3.minor,.stage-labels.is-narrow .tag3.name{display:none}
/* plain notes, thin lines, a bracket and the transfer path, drawn over the photograph */
.note3{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s}
.note3.on{opacity:1}
.note3 span{position:absolute;left:0;top:0;transform:translateY(-50%);white-space:nowrap;padding:5px 9px;font:400 10.5px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);background:rgba(5,7,11,.74);border:1px solid var(--line-2);border-left-color:var(--blue-hi);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.note3 b{color:var(--fg);font-weight:500}
.note3.white span{border-left-color:#f4f7fb}
.note3.left span{left:auto;right:0}
.note3.plain span{background:none;border:0;padding:0;color:var(--fg);letter-spacing:.14em;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 10px rgba(4,6,10,.95),0 0 3px rgba(4,6,10,.8)}
.ln3{position:absolute;left:0;top:0;height:0;border-top:1px solid rgba(244,247,251,.9);transform-origin:0 0;opacity:0;transition:opacity .4s}
.ln3.on{opacity:1}
.ln3.dash{border-top:1px dashed rgba(244,247,251,.85)}
.ln3.red{border-top:2px solid var(--red-hi);margin-top:-1px}
.br3{position:absolute;left:0;top:0;width:8px;border:solid var(--blue-hi);border-width:1px 0 1px 2px;opacity:0;transition:opacity .4s}
.br3.on{opacity:1}
.br3.white{border-color:#f4f7fb}
.over3{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.over3 .route{opacity:0;transition:opacity .4s}
.over3 .on{opacity:1}
.over3 polyline{fill:none;stroke:rgba(244,247,251,.9);stroke-width:1.5;stroke-dasharray:7 7;stroke-linecap:round}
.over3 .route circle{fill:#f4f7fb}
.stage-labels.is-narrow .note3.minor{display:none}
.stage-labels.is-narrow .note3 span{font-size:9.5px;padding:4px 6px}
.stage-labels.is-narrow .tag3{--h:20px}.stage-labels.is-narrow .tag3 span{font-size:9.5px;padding:4px 6px;white-space:normal;width:max-content;max-width:164px}
.stage-hint{position:absolute;z-index:3;left:50%;top:clamp(14px,2.4vw,28px);transform:translateX(-50%);font:400 10px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(5,7,11,.55);opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap}
.stage[data-scene="live"][data-state="idle"] .stage-hint{opacity:1}
.stage-cap{position:absolute;z-index:3;left:clamp(16px,2.6vw,36px);bottom:clamp(16px,2.6vw,34px);max-width:min(560px,58%)}
.stage-cap .n{font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;color:var(--fg-2)}
.stage-cap h2{margin-top:10px;font-size:clamp(26px,3vw,46px);font-weight:540;font-stretch:112%}
.stage-cap p{margin-top:10px;color:var(--fg);font-size:clamp(15px,1.25vw,18px);line-height:1.45;max-width:30em}
.stage-hud{position:absolute;z-index:3;right:clamp(16px,2.6vw,34px);top:clamp(16px,2.6vw,30px);display:flex;border:1px solid var(--line-2);background:rgba(5,7,11,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stage-hud div{padding:10px 16px;border-left:1px solid var(--line)}
.stage-hud div:first-child{border-left:0}
.stage-hud dt{font:400 9.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;color:var(--fg-3);text-transform:uppercase}
.stage-hud dd{margin-top:8px;font:400 15px/1 var(--mono);font-stretch:87.5%;color:var(--fg);white-space:nowrap}
.stage-hud dd b{font-weight:500}
.stage-record{position:absolute;z-index:3;right:clamp(16px,2.6vw,34px);bottom:clamp(16px,2.6vw,34px);width:min(300px,32%);border:1px solid var(--line-2);background:rgba(5,7,11,.64);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:14px 16px}
.stage-record .label{display:flex;justify-content:space-between;gap:10px}
.stage-record ul{margin-top:10px;display:grid;gap:7px}
.stage-record li{display:flex;gap:10px;align-items:center;color:var(--fg);font-size:13.5px;opacity:.32;transition:opacity .4s}
.stage-record li.on{opacity:1}
.stage-record li i{width:14px;height:14px;border-radius:50%;border:1px solid var(--fg-3);flex:none}
.stage-record li.on i{border-color:var(--blue-hi);background:radial-gradient(circle,var(--blue-hi) 0 3px,transparent 3.5px)}
.stage-record .out{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:baseline;color:var(--fg-2)}
.stage-record .out>span{grid-column:1/-1;font:400 9.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.stage-record .out b{color:var(--fg);font-weight:560;font-size:15px}
.rec-state{font:400 9.5px/1 var(--mono);font-style:normal;font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.rec-state span:last-child{display:none;color:var(--blue-hi)}
.stage.is-recorded .rec-state span:first-child{display:none}.stage.is-recorded .rec-state span:last-child{display:inline}
.rail6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:16px}
.rail6 button{position:relative;display:grid;gap:8px;text-align:left;padding:16px 12px 4px 0;background:none;border:0;color:var(--fg-3);transition:color .2s}
.rail6 button::before{content:'';position:absolute;left:0;right:6px;top:0;height:2px;background:var(--line-2)}
.rail6 button i{position:absolute;left:0;top:0;height:2px;width:calc((100% - 6px) * var(--p,0));background:linear-gradient(90deg,var(--blue),var(--red))}
.rail6 button b{font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em}
.rail6 button span{font:540 15px/1.2 var(--sans);font-stretch:106%}
.rail6 button:hover,.rail6 button[aria-current="step"]{color:var(--fg)}
.stage-controls{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.stage-controls .status{margin-left:auto;font:400 11.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.04em;color:var(--fg-3)}
.scenario{display:inline-flex;align-items:center;gap:10px;font:400 12px/1.5 var(--mono);font-stretch:87.5%;letter-spacing:.03em;color:var(--fg-2)}
.scenario::before{content:'';width:7px;height:7px;border:1px solid var(--fg-3);transform:rotate(45deg);flex:none}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:18px}
.three div{background:var(--ink-2);padding:18px 20px}
.three dt{font:400 10px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;color:var(--fg-3);text-transform:uppercase}
.three dd{margin-top:10px;color:var(--fg);font-size:15px;line-height:1.45}
.transcript details{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.transcript summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;justify-content:space-between;align-items:center;color:var(--fg);font:540 18px/1.2 var(--sans);font-stretch:106%}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::after{content:'+';font:300 26px/1 var(--sans);color:var(--fg-3)}
.transcript details[open] summary::after{content:'–'}
.transcript-body{padding-bottom:28px;display:grid;gap:28px}
.phase-detail h3{display:flex;gap:14px;align-items:baseline}.phase-detail h3 span{font:400 12px/1 var(--mono);color:var(--fg-3)}
.phase-detail p{margin-top:8px;max-width:48em}
.phase-detail dl{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.phase-detail dt{font:400 10px/1 var(--mono);letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase}.phase-detail dd{margin-top:6px;font-size:14.5px;color:var(--fg-2)}
.phase-values{margin-top:10px;font:400 12px/1.5 var(--mono);color:var(--fg-3)}

/* the optional story */
.story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.story-steps li{background:var(--ink);padding:22px 22px 26px;display:grid;gap:10px;align-content:start;transition:background .5s,opacity .5s}
.story-steps .n{font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase}
.story-steps strong{font:560 19px/1.2 var(--sans);font-stretch:106%;color:var(--fg)}
.story-steps .l{color:var(--fg-3);font-size:15px;line-height:1.45}
.story-steps[data-step]:not([data-step="-1"]) li{opacity:.38}
.story-steps[data-step="0"] li[data-story="0"],.story-steps[data-step="1"] li[data-story="1"],.story-steps[data-step="2"] li[data-story="2"]{opacity:1;background:var(--ink-3);box-shadow:inset 0 2px 0 var(--blue)}
.story-steps[data-step="2"] li[data-story="2"]{box-shadow:inset 0 2px 0 var(--red)}

/* ---------- contact & company ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:start}
.lanes{display:grid;gap:10px;margin-top:34px}
.lanes button{width:100%;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;text-align:left;padding:18px 20px;border:1px solid var(--line-2);background:var(--ink-2);transition:border-color .2s,background .2s}
.lanes button .label{grid-row:span 2;padding-top:3px}
.lanes button strong{color:var(--fg);font:540 17px/1.2 var(--sans);font-stretch:106%}
.lanes button span:last-child{color:var(--fg-3);font-size:14px}
.lanes button:hover{border-color:var(--line-3)}
.lanes button[aria-pressed="true"]{border-color:var(--fg-2);background:var(--ink-3)}
.contact-email{display:inline-flex;gap:10px;margin-top:28px;color:var(--fg);border-bottom:1px solid var(--line-3);padding-bottom:4px}
form{border:1px solid var(--line-2);background:var(--ink-2);padding:clamp(24px,3vw,40px)}
.form-title{font-size:24px;margin-bottom:22px}
.field{display:grid;gap:8px;margin-bottom:18px}
.field label{font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.08em;color:var(--fg-3);text-transform:uppercase}
.optional{text-transform:none;letter-spacing:0;color:var(--fg-4)}
input,select,textarea{width:100%;padding:13px 14px;background:var(--ink);border:1px solid var(--line-2);border-radius:2px;color:var(--fg);font-size:15.5px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(47,107,255,.18)}
[aria-invalid="true"]{border-color:var(--red-hi)}
.form-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:6px}
.form-note{margin-top:16px;font-size:13px;color:var(--fg-3)}
#form-status{margin-top:12px;font-size:14px;color:var(--fg-2)}#form-status.is-error{color:var(--red-hi)}
.company{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.company .founder{margin-top:28px;color:var(--fg);font:540 18px/1.3 var(--sans);font-stretch:106%}.company .founder span{display:block;margin-top:4px;color:var(--fg-3);font-size:14px;font-weight:400}
.company-mark{border:1px solid var(--line-2);background:#000;overflow:hidden}
.company-mark img{width:100%;height:auto}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:56px 34px}
.footer-main{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
.footer-line{color:var(--fg-3);font-size:14.5px}.footer-line b{display:block;color:var(--fg);font-weight:540;font-size:16px}
.footer-meta{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:400 11px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.06em;color:var(--fg-4);text-transform:uppercase}
.footer-meta nav{display:flex;gap:22px}.footer-meta a:hover{color:var(--fg-2)}

/* ---------- platform head: the wave plate ---------- */
.head-waves .head-plate img{object-position:60% 50%;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.045)}
.head-light{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s;mix-blend-mode:screen;background:radial-gradient(34% 48% at var(--lx,66%) var(--ly,46%),rgba(214,226,255,.16),rgba(214,226,255,.05) 45%,transparent 72%)}
.head-waves.is-lit .head-light{opacity:1}

/* ---------- LiDAR scan stage ---------- */
.scan{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(18px,2.4vw,36px);align-items:start}
.scan-view{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line-2);border-radius:2px;background:radial-gradient(120% 95% at 50% 38%,#0B1018 0%,#05070A 72%);cursor:grab;touch-action:pan-y;isolation:isolate}
.scan-view:active{cursor:grabbing}
.scan-view::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 100% at 50% 45%,transparent 58%,rgba(3,4,6,.55) 100%)}
.scan-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scan-still{position:absolute;inset:0}
.scan-still img{width:100%;height:100%;object-fit:cover}
.scan[data-state="live"] .scan-still{display:none}
.scan-hud{position:absolute;z-index:2;left:18px;top:16px;display:grid;gap:7px;font:400 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}
.scan-hud b{color:var(--fg);font-weight:500}
.scan-hud .m{color:var(--fg-2)}
.scan-legend{position:absolute;z-index:2;left:18px;bottom:16px;display:flex;gap:18px;font:400 10px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}
.scan-legend span{display:inline-flex;align-items:center;gap:8px}
.scan-legend i{display:inline-block}
.lg-scan{width:16px;height:2px;background:var(--blue-hi);box-shadow:0 0 8px rgba(141,177,255,.8)}
.lg-change{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(215,20,30,.18)}
.scan[data-state="static"] .scan-legend span:first-child{display:none}
.scan-pause{position:absolute;z-index:3;right:14px;bottom:12px}
.scan-fields{display:grid;align-content:start;border-top:1px solid var(--line-2)}
.scan-fields button{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;text-align:left;padding:15px 6px 15px 0;background:none;border:0;border-bottom:1px solid var(--line-2);color:var(--fg-3);transition:color .2s}
.scan-fields button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--blue),var(--violet) 50%,var(--red));transform-origin:left;transform:scaleX(0)}
.scan-fields button[aria-pressed="true"]::after{transform:scaleX(var(--p,1))}
.scan-fields b{font:400 11px/1.75 var(--mono);font-stretch:87.5%;letter-spacing:.1em;color:var(--fg-4)}
.scan-fields strong{font:540 16.5px/1.3 var(--sans);font-stretch:106%;color:var(--fg-2);letter-spacing:-.005em}
.scan-fields span{grid-column:2;margin-top:6px;font-size:14px;line-height:1.45;color:var(--fg-3);display:none}
.scan-fields button:hover strong,.scan-fields button[aria-pressed="true"] strong{color:var(--fg)}
.scan-fields button[aria-pressed="true"] b{color:var(--red-hi)}
.scan-fields button[aria-pressed="true"] span{display:block}
.scan-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scan-section{margin-top:clamp(28px,3.5vw,48px)}
.scan-note{margin-top:14px}
.scan-wrap{margin-top:clamp(36px,4.5vw,64px)}
.scan-compact{grid-template-columns:1fr;gap:0}
.scan-compact .scan-view{aspect-ratio:21/9}
.scan-compact .scan-fields{grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line-3);margin-top:18px}
.scan-compact .scan-fields button{display:block;padding:16px 10px 4px 0;border-bottom:0}
.scan-compact .scan-fields button::after{top:-1px;bottom:auto}
.scan-compact .scan-fields b{display:block;margin-bottom:6px}
.scan-compact .scan-fields strong{font-size:15px}

/* ---------- six-phase method ---------- */
.method{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-3)}
.method::before{content:'';position:absolute;left:0;top:-1px;width:100%;height:1px;background:linear-gradient(90deg,var(--blue),var(--violet) 50%,var(--red));transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.method.is-in::before{transform:scaleX(1)}
.method li{display:grid;gap:9px;align-content:start;padding:20px 16px 0 0}
.method b{font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em;color:var(--fg-4)}
.method strong{font:560 clamp(19px,1.5vw,23px)/1.1 var(--sans);font-stretch:110%;color:var(--fg);letter-spacing:-.01em}
.method span{color:var(--fg-3);font-size:15px;line-height:1.45}
.method em{margin-top:4px;font:400 10.5px/1.4 var(--mono);font-stretch:87.5%;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .split,.plate-copy,.invite,.company,.contact,.proof{grid-template-columns:1fr}
  .invite .actions{justify-content:flex-start}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .rail-line{display:none}
  .flow{grid-template-columns:1fr;justify-items:center}
  .flow-arrow{width:2px;height:40px;background:linear-gradient(180deg,var(--line-2),var(--fg-3))}
  .flow-arrow::after{width:100%;height:40%;background:linear-gradient(180deg,transparent,var(--blue-hi),transparent);animation-name:flowRunV}
  .flow-arrow.r::after{background:linear-gradient(180deg,transparent,var(--red-hi),transparent)}
  .flow-col{width:min(420px,100%)}
  .pillars{grid-template-columns:1fr}
  .disciplines li{grid-template-columns:30px minmax(0,1fr);column-gap:18px;row-gap:8px;padding:22px 22px 24px}
  .disciplines .ico{grid-row:1 / span 2;width:28px;height:28px;margin-top:-2px}
  .disciplines li>strong,.disciplines li>span{grid-column:2}
  .disciplines strong{font-size:20px}
  .stage-record{position:static;width:auto;border-width:1px 0 0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:16px 16px 18px}
  .stage-cap{position:static;max-width:none;padding:18px 16px 4px}
  .three{grid-template-columns:1fr}
  .story-steps{grid-template-columns:1fr}
  .scan{grid-template-columns:1fr}
  .scan-fields{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .method{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
}
@keyframes flowRunV{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
@media (max-width:820px){
  :root{--header-h:66px}
  .menu-toggle{display:inline-flex}
  #navigation{position:fixed;inset:var(--header-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 24px;background:rgba(5,6,8,.97);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  #navigation.is-open{opacity:1;transform:none;visibility:visible}
  #navigation a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  #navigation .nav-cta{margin-top:14px;text-align:center}
  .phase-mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rail6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stage-view{aspect-ratio:1/1}
  .stage-view::after{background:linear-gradient(to top,rgba(4,6,10,.5),rgba(4,6,10,0) 26%)}
  .stage-hud{left:10px;right:auto;top:10px}
  .stage-hud div{padding:7px 9px}.stage-hud dd{font-size:12.5px;margin-top:6px}
  .stage-hint{top:auto;bottom:12px}
  .footer-main{grid-template-columns:1fr}
  .phase-detail dl{grid-template-columns:1fr}
  .core-hint{display:none}
  .scan-compact .scan-view{aspect-ratio:16/10}
  .scan-compact .scan-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scan-hud{left:12px;top:12px}
  .scan-legend{left:12px;bottom:12px}
}
@media (max-width:560px){
  .hero .actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .rail{grid-template-columns:1fr}
  .hero-status .tag{display:none}
  .brand-name{font-size:13px;letter-spacing:.2em}
  .scan-view,.scan-compact .scan-view{aspect-ratio:4/3.4}
  .scan-fields{grid-template-columns:1fr}
  .scan-compact .scan-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scan-legend span:first-child{display:none}
  .scan-pause{width:34px;padding:0;justify-content:center}
  .scan-pause span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .method{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rail-line .pulse{display:none}
  .method::before{transform:scaleX(1)}
  .js [data-reveal]{opacity:1;transform:none}
}
/* Narrow screens (2026-11-08 copy). The plate label keeps its own line above the plate copy, so the eyebrow never runs into
   it. On phones the longer hero copy starts below the mark: the mark keeps its first-screen frame, the copy follows it, and
   the pause control moves to the top of that frame. */
@media (max-width:1080px){
  .plate{flex-direction:column;align-items:stretch}
  .plate-tag{position:static;align-self:flex-end;margin:clamp(20px,4vw,48px) var(--gutter) auto}
  .plate-copy{margin-top:22px}
}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .hero{--E:min(90vw,58svh);--emblem-top:calc(var(--header-h) + 58px)}
  .hero .core-ui{top:calc(var(--header-h) + 10px);bottom:auto}
  .hero-word{font-size:max(11px,calc(var(--E) * .034))}
}
.paras .note,.proof .note{text-wrap:pretty}
@media (max-width:820px){
  .gains{grid-template-columns:1fr;gap:20px}
  .founder-section .founder-facts{grid-template-columns:1fr}
  .founder-section .founder-facts div{padding:12px 0 13px}
  .founder-section .founder-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .founder-section .founder-profile{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "portrait" "bio";row-gap:28px;align-items:start}
  .founder-section .founder-portrait{align-self:start;width:min(100%,460px)}
}
/* ---------- harbor: three parts, the loading plan, the scanner, the evidence (2026-11-10) ---------- */
.stage-head .eyebrow{margin-bottom:14px}
.stage-cap .more{color:var(--fg-2);font-size:clamp(13.5px,1.02vw,15px);line-height:1.5;max-width:37em}
/* the loading plan in the record card: three holds, four cells each; a cell fills as its load lands */
.plan-box{display:none;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.stage[data-phase="2"] .plan-box,.stage[data-phase="3"] .plan-box,.stage[data-phase="4"] .plan-box,.stage[data-phase="5"] .plan-box{display:block}
.plan{display:grid;grid-template-columns:1fr 1fr 7px 1fr 1fr 7px 1fr 1fr;grid-template-rows:repeat(2,19px);gap:3px;margin-top:9px}
.plan li{position:relative;border:1px solid var(--line-2);background:rgba(206,216,232,.04);overflow:hidden;transition:border-color .3s}
.plan li::before{content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;border-radius:50%;background:var(--fg);transform:translate(-50%,-50%) scale(var(--g,0))}
.plan li b{position:relative;display:block;font:400 9px/17px var(--mono);font-stretch:87.5%;text-align:center;color:var(--fg-4);transition:color .3s}
.plan li.on b{color:var(--ink)}
.plan li.now{border-color:var(--blue-hi)}
.plan-key{display:grid;grid-template-columns:2fr 7px 2fr 7px 2fr;gap:3px;margin-top:6px;font:400 9px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);text-align:center}
.plan-key span:nth-child(2){grid-column:3}.plan-key span:nth-child(3){grid-column:5}
/* in the drone view the picture is the loading plan: each pile carries its number, and the record card steps back so it covers no pile */
@media (min-width:1081px){.stage[data-view="2"] .plan-box{display:none}}
.tag3.num i,.tag3.num s{display:none}
.tag3.num span{left:0;bottom:auto;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:21px;height:21px;padding:0;border:1px solid rgba(244,247,251,.34);border-radius:50%;background:rgba(5,7,11,.66);-webkit-backdrop-filter:none;backdrop-filter:none;font:500 10.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:0;color:#f4f7fb}
/* the survey drone's scanner: a thin fan from the drone to the line it is reading, and the target a scan sets */
.over3 .scan{opacity:0;transition:opacity .25s}
.over3 .scan.on{opacity:1}
.over3 .scan polygon{fill:rgba(141,177,255,.12);stroke:rgba(141,177,255,.32);stroke-width:.75}
.over3 .scan line{stroke:#d3e2ff;stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(141,177,255,.95))}
.over3 circle.target{fill:none;stroke:var(--blue-hi);stroke-width:1.4;stroke-dasharray:3 4;opacity:0;transition:opacity .4s}
.over3 circle.target.on{opacity:1}
.note3.blue span{border-left-color:var(--blue-hi)}
/* the page's three parts, as links under the introduction */
.parts-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:clamp(36px,4.5vw,60px)}
.parts-nav a{position:relative;background:var(--ink);padding:0 0 22px;display:grid;gap:9px;align-content:start;color:var(--fg-3);transition:background .25s}
.parts-nav a:hover{background:var(--ink-3)}
.parts-nav .thumb{display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:10px}
.parts-nav .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.parts-nav a:hover .thumb img{transform:scale(1.045)}
.parts-nav b{padding:0 20px;font:400 11px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
.parts-nav strong{padding:0 20px;font:560 clamp(19px,1.5vw,23px)/1.1 var(--sans);font-stretch:110%;letter-spacing:-.01em;color:var(--fg)}
.parts-nav span:not(.thumb){padding:0 20px;font-size:14.5px;line-height:1.45}
.parts-nav .proofcard{padding-top:22px;background:radial-gradient(120% 120% at 0% 0%,rgba(47,107,255,.13),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(215,20,30,.13),transparent 55%),var(--ink-2)}
.parts-nav .proofcard b{color:var(--red-hi)}
.parts-nav .proofcard{grid-template-rows:auto auto auto 1fr}
.parts-nav span.figs{align-self:end;display:grid;gap:10px;margin-top:8px;padding:16px 20px 0;border-top:1px solid var(--line)}
.parts-nav span.figs span{display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:10px;align-items:baseline;padding:0;font-size:13px;line-height:1.3;color:var(--fg-3)}
.parts-nav .figs em{font:500 14.5px/1.2 var(--mono);font-stretch:87.5%;font-style:normal;color:var(--fg);white-space:nowrap}
/* parts two and three: a short sequence of photographs with its counts */
.part{padding-bottom:0}
.seq:focus-visible{outline-offset:8px}
.seq-stage{position:relative;width:100%;overflow:hidden;background:#04070c;border:1px solid var(--line-2);isolation:isolate}
.seq-view{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:size}
@media (min-width:1081px){.seq-view{aspect-ratio:auto;height:min(calc((min(var(--max),100vw - 2*var(--gutter))) * .5625),calc(100svh - var(--header-h) - 150px));min-height:520px}}
/* the pictures and their tags share one 16:9 box that always covers the view, so a tag stays on the thing it names */
.seq-pan{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);aspect-ratio:16/9;transform:translate(-50%,-50%) scale(var(--z,1));transition:transform 6.4s linear}
.seq[data-step="0"] .seq-pan,.seq[data-step="2"] .seq-pan{--z:1.035}
.seq-plates img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.seq-plates img.on{opacity:1}
.seq-view::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(4,6,10,.92),rgba(4,6,10,0) 40%),linear-gradient(to right,rgba(4,6,10,.4),rgba(4,6,10,0) 30%)}
.seq-labels{position:absolute;inset:0;pointer-events:none}
.seq-hud dd span{font-size:11px;color:var(--fg-3);margin-left:4px}
.seq-tag{right:auto;left:clamp(16px,2.6vw,36px);top:clamp(16px,2.6vw,30px);z-index:3}
.seq-cap>div{display:none}.seq-cap>div.on{display:block}
.seq-cap h3{margin-top:10px;font-size:clamp(24px,2.7vw,42px);font-weight:540;font-stretch:112%;letter-spacing:-.025em;line-height:1.02}
.rail-seq{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
/* around the three parts: captures from the simulation */
.around-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(36px,4.5vw,60px)}
.around-list li{display:grid;gap:8px;align-content:start}
.around-list figure,.ev{position:relative}
.around-list figure{border:1px solid var(--line-2);overflow:hidden;margin-bottom:8px}
.around-list img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.around-list figcaption{position:absolute;left:0;bottom:0;padding:5px 9px;font:400 9.5px/1.3 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);background:rgba(5,7,11,.76)}
.around-list strong{font:560 19px/1.15 var(--sans);font-stretch:108%;color:var(--fg)}
.around-list li>span{font-size:15px;line-height:1.5;color:var(--fg-3)}
/* the evidence: captures of the running simulation, and what the survey software stored for that run */
.evidence{border-top:1px solid var(--line)}
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(36px,4.5vw,60px)}
.ev{display:grid;align-content:start;border:1px solid var(--line-2);background:var(--ink-2)}
.ev-wide{grid-column:span 2}
.ev-open{position:relative;display:block;overflow:hidden;border-bottom:1px solid var(--line);cursor:zoom-in}
.ev-open::after{content:'Open larger ↗';position:absolute;right:8px;bottom:8px;padding:5px 8px;font:400 9.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:rgba(5,7,11,.82);opacity:0;transition:opacity .2s}
.ev-open:hover::after,.ev-open:focus-visible::after{opacity:1}
.ev img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ev-open:hover img{transform:scale(1.025)}
@media (min-width:1081px){.ev-wide+.ev{grid-template-rows:minmax(0,1fr) auto;align-content:stretch}.ev-wide+.ev .ev-open{height:100%}.ev-wide+.ev img{height:100%;aspect-ratio:auto}}
.ev figcaption{display:grid;gap:7px;padding:14px 16px 17px}
.ev figcaption b{font:400 10.5px/1 var(--mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--red-hi)}
.ev figcaption strong{font:560 17px/1.2 var(--sans);font-stretch:106%;color:var(--fg)}
.ev figcaption span{font-size:14px;line-height:1.5;color:var(--fg-3)}
.ev-record{position:relative;margin-top:clamp(28px,3.5vw,44px);border:1px solid var(--line-2);background:var(--ink-2);padding:clamp(20px,2.6vw,36px)}
.ev-record::before{content:'';position:absolute;left:-1px;top:-1px;width:min(360px,42%);height:1px;background:linear-gradient(90deg,var(--blue),var(--violet) 55%,var(--red))}
.ev-record-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap}
.ev-run{font:400 11px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.04em;color:var(--fg-3);overflow-wrap:anywhere}
.ev-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.ev-figures div{background:var(--ink-2);padding:16px 18px 18px}
.ev-figures dt{font:400 10px/1 var(--mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.ev-figures dt i{font-style:normal;color:var(--fg-4)}
.ev-figures dd{display:grid;gap:7px;margin-top:11px}
.ev-figures dd b{font:500 clamp(16px,1.35vw,20px)/1.2 var(--mono);font-stretch:87.5%;color:var(--fg)}
.ev-figures dd span{font-size:13.5px;line-height:1.45;color:var(--fg-3)}
.ev-phases{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:20px;border-top:1px solid var(--line-3)}
.ev-phases li{display:grid;gap:8px;padding:14px 12px 0 0}
.ev-phases span{font:500 15px/1.25 var(--sans);font-stretch:104%;color:var(--fg-2)}
.ev-phases b{font:400 12px/1 var(--mono);font-stretch:87.5%;letter-spacing:.04em;color:var(--fg-3)}
.ev-record>.note{margin-top:20px;max-width:92em;text-wrap:pretty}.ev-record>.note+.note{margin-top:10px}
/* the Harbor part links on other pages, the short run record, and the reconciliation example as a ledger */
.harbor-parts{margin-top:clamp(22px,2.6vw,38px)}
.harbor-parts .parts-nav{margin-top:0}
.parts-label{margin-top:clamp(44px,5.5vw,72px)}
.parts-label+.parts-nav{margin-top:16px}
.ev-record-short>.note .text-link{margin-left:4px;white-space:nowrap}
.split.split-top{align-items:start}
.ledger{margin-top:clamp(24px,3vw,38px);max-width:430px;border:1px solid var(--line-2);background:var(--ink-2)}
.ledger .label{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ledger dl{display:grid}
.ledger dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line)}
.ledger dl div:last-child{border-bottom:0}
.ledger dt{font-size:15px;line-height:1.3;color:var(--fg-2)}
.ledger dd{font:500 15px/1.2 var(--mono);font-stretch:87.5%;color:var(--fg);white-space:nowrap}
.ledger .sum dt,.ledger .sum dd{color:var(--fg);font-weight:560}
.ledger .flag{background:rgba(215,20,30,.09)}
.ledger .flag dt{color:var(--fg)}.ledger .flag dd{color:var(--red-hi)}
/* what comes next */
.next .split{align-items:start}
.next-steps{display:grid;border-top:1px solid var(--line-2)}
.next-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:7px;padding:20px 0 22px;border-bottom:1px solid var(--line-2)}
.next-steps b{grid-row:span 2;font:400 11px/2 var(--mono);font-stretch:87.5%;letter-spacing:.1em;color:var(--fg-4)}
.next-steps strong{font:560 clamp(19px,1.5vw,22px)/1.2 var(--sans);font-stretch:108%;color:var(--fg)}
.next-steps span{font-size:15.5px;line-height:1.5;color:var(--fg-3);max-width:40em}
@media (max-width:1080px){
  .parts-nav,.around-list,.ev-grid,.ev-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-phases{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
  .seq-cap{position:static;max-width:none;padding:18px 16px 18px}
}
@media (max-width:820px){
  .rail-seq.rail-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seq-labels{display:none}
  .seq-hud{left:10px;right:auto;top:auto;bottom:10px}
  .seq-tag{left:auto;right:10px;top:10px}
  .stage-hud div:nth-child(2){display:none}
}
.swipe-note{display:none;margin-top:12px;font:400 10.5px/1.4 var(--mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:560px){
  .ev-figures{grid-template-columns:1fr}
  .ev-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the three parts and the evidence as four short rows, so the walkthrough starts within a screen */
  .parts-nav{grid-template-columns:1fr}
  .parts-nav a{grid-template-columns:108px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:16px;row-gap:6px;padding:0;min-height:81px}
  .parts-nav .thumb{grid-row:1 / -1;aspect-ratio:4/3;margin:0}
  .parts-nav b{grid-column:2;grid-row:2;padding:0}
  .parts-nav strong{grid-column:2;grid-row:3;padding:0 12px 0 0}
  .parts-nav a>span:not(.thumb):not(.figs){display:none}
  .parts-nav .proofcard{grid-template-columns:1fr;grid-template-rows:auto;row-gap:8px;padding:16px 16px 17px}
  .parts-nav .proofcard b,.parts-nav .proofcard strong{grid-column:1;grid-row:auto}
  .parts-nav span.figs{margin-top:4px;padding:13px 0 0;gap:8px}
  /* captures: one row to swipe through, in place of a long column */
  .around-list,.ev-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .around-list::-webkit-scrollbar,.ev-grid::-webkit-scrollbar{display:none}
  .around-list>li,.ev-grid>.ev{flex:0 0 84%;scroll-snap-align:start}
  .ev-wide{grid-column:auto}
  .swipe-note{display:block}
  .stage-controls .button{gap:12px;padding-inline:16px 14px}
}
@media print{.site-header,.core-ui,.stage-controls{display:none}}