/* ══════════════════════════════════════════════════════════════
   MOCHIP LABS — site.css
   Palette sampled directly from the render clips:
   signal core rgb(6,136,58) · bloom rgb(146,220,150) · HUD panel rgb(43,68,47)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* ink */
  --ink-000:#050706;
  --ink-050:#070A09;
  --ink-100:#0B100D;
  --ink-200:#111714;
  --ink-300:#1A211D;
  --ink-400:#28312C;

  /* concrete (from the render's floor + walls) */
  --con-100:#C9CFCC;
  --con-200:#9AA3A0;
  --con-300:#6E7874;
  --con-400:#49524E;

  /* signal green */
  --sig:#2FE07E;
  --sig-core:#08883A;
  --sig-bloom:#92DC96;
  --sig-panel:rgba(43,68,47,.78);
  --sig-line:rgba(47,224,126,.42);
  --sig-glow:rgba(47,224,126,.30);

  --paper:#F2F5F3;

  /* type */
  --f-display:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* metrics */
  --nav-h:118px;
  --gut:clamp(20px,5vw,72px);
  --maxw:1320px;
  --r:2px;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,form{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth}
html.is-booting{overflow:hidden}

body{
  font-family:var(--f-body);
  font-size:clamp(15px,.5vw + 14px,17px);
  line-height:1.62;
  color:var(--con-100);
  background:var(--ink-050);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.06em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:10px;left:10px;z-index:9999;
  padding:12px 18px;background:var(--sig);color:var(--ink-000);
  font-family:var(--f-mono);font-size:13px;border-radius:var(--r);
  transform:translateY(-160%);transition:transform .3s var(--e-out);
}
.skip:focus{transform:none}

:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:var(--r)}

::selection{background:var(--sig);color:var(--ink-000)}

/* Scrollbar. The page is ~27,000px tall, so the thumb is proportionally tiny
   — at 10px wide with a 3px inset it came out a 4px sliver and read as broken.
   Wider track, and a floor on the thumb so it stays a handle. */
::-webkit-scrollbar{width:17px}
::-webkit-scrollbar-track{background:var(--ink-050)}
::-webkit-scrollbar-thumb{
  background:rgba(47,224,126,.28);
  border:4px solid var(--ink-050);border-radius:99px;
  min-height:56px;
}
::-webkit-scrollbar-thumb:hover{background:var(--sig-core)}
::-webkit-scrollbar-thumb:active{background:var(--sig)}

/* The end buttons. Styling the bar at all makes Chrome fall back to drawing
   its own grey arrows, which sit on the dark track looking pasted on — once
   you take over the scrollbar you have to take over these too. Chrome also
   reserves a second button at each end (start:increment / end:decrement) that
   is normally invisible; left alone it shows up as a dead square. */
::-webkit-scrollbar-button{
  height:15px;
  background-color:var(--ink-050);
  background-repeat:no-repeat;
  background-position:center;
  background-size:9px 6px;
}
::-webkit-scrollbar-button:vertical:decrement{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 4.6 4.5 1.4 8 4.6' fill='none' stroke='%232FE07E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.4 4.5 4.6 8 1.4' fill='none' stroke='%232FE07E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:hover{background-color:var(--ink-200)}
::-webkit-scrollbar-button:vertical:active{background-color:var(--sig-core)}
/* the phantom second button at each end */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal{display:none}
::-webkit-scrollbar-corner{background:var(--ink-050)}

/* Firefox has no sub-parts to style; this is the whole control. 'auto' rather
   than 'thin' so it matches the width above instead of being half of it. */
html{scrollbar-width:auto;scrollbar-color:rgba(47,224,126,.34) var(--ink-050)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ── 3. TYPE SCALE ─────────────────────────────────────────── */
.display{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.6rem,7.2vw,6.1rem);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--paper);
}
.display span{display:block}

.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.9rem,3.6vw,3.3rem);
  line-height:1.06;
  letter-spacing:-.03em;
  color:var(--paper);
  max-width:20ch;
}

.lede{
  font-size:clamp(1rem,.5vw + .92rem,1.2rem);
  line-height:1.6;
  color:var(--con-200);
  max-width:46ch;
  margin-top:1.5rem;
}

.sub{color:var(--con-300);max-width:52ch;margin-top:1.1rem}

.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;
  color:var(--sig);margin-bottom:1.5rem;
}
.eyebrow i{
  width:26px;height:1px;background:var(--sig);
  box-shadow:0 0 10px var(--sig-glow);flex:none;
  transform-origin:left;animation:eyeLine 2.4s var(--e-io) infinite;
}
@keyframes eyeLine{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.4);opacity:.55}}

/* ── 4. BUTTONS ────────────────────────────────────────────── */
.btn{
  --bg:var(--sig);--fg:var(--ink-000);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.05rem 1.9rem;
  font-family:var(--f-mono);font-size:.8rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg);background:var(--bg);
  border:1px solid var(--bg);border-radius:var(--r);
  overflow:hidden;cursor:pointer;isolation:isolate;
  transition:color .4s var(--e-out),border-color .4s var(--e-out),box-shadow .4s var(--e-out);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;background:var(--ink-000);
  transform:translateY(101%);transition:transform .5s var(--e-out);
}
.btn:hover{color:var(--sig);box-shadow:0 0 0 1px var(--sig),0 12px 40px -12px var(--sig-glow)}
.btn:hover::before{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--paper);border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.btn--ghost::before{background:var(--sig)}
.btn--ghost:hover{color:var(--ink-000);border-color:var(--sig)}
.btn--sm{padding:.72rem 1.25rem;font-size:.72rem}

/* ── 5. BOOT SEQUENCE ──────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  background:var(--ink-000);
  transition:opacity .8s var(--e-out),visibility .8s;
}
.boot.is-done{opacity:0;visibility:hidden;pointer-events:none}
.boot__inner{width:min(520px,80vw);text-align:center}
.boot__mark{position:relative;width:min(520px,80vw);margin:0 auto 2.8rem;display:grid;place-items:center}
.boot__logo{
  width:100%;height:auto;
  opacity:0;transform:translateY(10px);
  animation:bootIn .9s var(--e-out) forwards;
}
@keyframes bootIn{to{opacity:1;transform:none}}
.boot__bar{height:2px;background:var(--ink-300);overflow:hidden;border-radius:99px}
.boot__bar i{display:block;height:100%;width:0;background:var(--sig);box-shadow:0 0 14px var(--sig-glow);transition:width .35s var(--e-out)}
.boot__txt{margin-top:1.1rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--con-400)}
.caret{display:inline-block;width:7px;height:11px;margin-left:5px;background:var(--sig);vertical-align:-1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* page progress hairline */
.progress{
  position:fixed;top:0;left:0;right:0;z-index:130;
  height:2px;background:rgba(255,255,255,.06);
}
.progress i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--sig-core),var(--sig));
  box-shadow:0 0 12px var(--sig-glow);
  transform:scaleX(var(--p,0));transform-origin:left;
  will-change:transform;
}

/* ── 6. NAV ────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:var(--nav-h);
  display:flex;align-items:center;gap:2rem;
  padding-inline:var(--gut);
  transition:height .45s var(--e-out),background .45s var(--e-out),border-color .45s var(--e-out),backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:84px;
  background:rgba(7,10,9,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.07);
}
.nav__brand{margin-right:auto;display:flex;align-items:center}
.nav__brand img{height:clamp(40px,4.4vw,62px);width:auto;transition:height .45s var(--e-out),filter .3s}
.nav__brand:hover img{filter:drop-shadow(0 0 18px var(--sig-glow))}
.nav.is-stuck .nav__brand img{height:clamp(34px,3.4vw,46px)}

.nav__links{display:flex;gap:2.2rem}
.nav__links a{
  position:relative;font-family:var(--f-mono);font-size:.76rem;
  letter-spacing:.09em;color:var(--con-200);
  padding-block:.35rem;transition:color .3s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--sig);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__burger{display:none;flex-direction:column;gap:6px;width:38px;height:38px;
  align-items:center;justify-content:center;background:none;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);cursor:pointer}
.nav__burger i{display:block;width:17px;height:1.5px;background:var(--paper);transition:transform .4s var(--e-out),opacity .3s}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ── 7. PHASE RAIL ─────────────────────────────────────────── */
/* A HUD module, not floating text: it sits on its own panel so it stays
   readable over whatever part of the render is behind it. */
.rail{
  position:fixed;z-index:110;
  right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);
  padding:1rem 1.1rem 1.05rem;
  background:rgba(8,12,10,.80);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);
  box-shadow:0 20px 60px -24px rgba(0,0,0,.95);
  opacity:0;pointer-events:none;
  transform:translateY(-50%) translateX(14px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out);
}
.rail.is-on{opacity:1;pointer-events:auto;transform:translateY(-50%)}

/* scan-bracket corners, same motif as the HUD chips */
.rail::before,.rail::after{
  content:'';position:absolute;width:9px;height:9px;
  border:1px solid var(--sig);opacity:.8;
}
.rail::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.rail::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.rail__label{
  display:block;margin-bottom:.85rem;padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sig);
}

.rail__list{position:relative;display:flex;flex-direction:column;gap:.1rem}
/* the connecting spine the markers sit on */
.rail__list::before{
  content:'';position:absolute;left:5px;top:12px;bottom:12px;
  width:1px;background:rgba(255,255,255,.13);
}

.rail__list::after{
  content:'';position:absolute;left:5px;top:12px;
  width:1px;height:calc(100% - 24px);
  background:var(--sig);box-shadow:0 0 8px var(--sig-glow);
  transform:scaleY(var(--fp,0));transform-origin:top;
}

.rail__list a{
  position:relative;display:flex;align-items:center;gap:.65rem;
  padding:.46rem .5rem .46rem 0;
  color:var(--con-100);
  transition:color .35s var(--e-out);
}
/* marker on the spine */
.rail__list a::before{
  content:'';position:relative;flex:none;z-index:1;
  width:11px;height:11px;border-radius:99px;
  background:var(--ink-100);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition:box-shadow .35s var(--e-out),background .35s var(--e-out);
}
.rail__list a b{
  font-size:.72rem;letter-spacing:.1em;color:var(--con-200);
  transition:color .35s var(--e-out);
}
.rail__list a span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;
  white-space:nowrap;
}

.rail__list a:hover{color:var(--paper)}
.rail__list a:hover b{color:var(--con-100)}
.rail__list a:hover::before{box-shadow:inset 0 0 0 1.5px var(--sig-bloom)}

.rail__list a.is-active{color:var(--sig)}
.rail__list a.is-active b{color:var(--sig)}
.rail__list a.is-active::before{
  background:var(--sig);
  box-shadow:0 0 0 3px rgba(47,224,126,.16),0 0 14px var(--sig-glow);
}

/* Deep links are the point of the rail as much as navigation is — a phase URL
   is what gets pasted into an email. Shown only when the clipboard API exists. */
.rail__copy{
  display:flex;align-items:center;gap:.5rem;width:100%;
  margin-top:.85rem;padding-top:.75rem;
  background:none;border:0;border-top:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--con-300);transition:color .3s var(--e-out);
}
.rail__copy i{
  flex:none;width:9px;height:9px;
  border:1.5px solid currentColor;border-radius:1px;
  transition:transform .3s var(--e-out),border-color .3s,border-width .3s;
}
.rail__copy:hover{color:var(--sig)}
.rail__copy.is-done{color:var(--sig)}
.rail__copy.is-done i{
  border-width:0 0 1.5px 1.5px;border-radius:0;border-color:var(--sig);
  transform:rotate(-45deg) translate(1px,-2px);
}

/* ── 8. THE FILM ───────────────────────────────────────────── */
.film{position:relative;background:var(--ink-000)}

/* --dur is the phase's clip length in seconds. The pinned scroll distance is
   100vh (the stage) plus a fixed number of vh per second of footage, so every
   act's scroll range maps onto its own segment of the film timeline. */
.act{position:relative;--dur:4;--vhs:45vh;height:calc(100vh + var(--dur) * var(--vhs))}
/* slightly longer than its 8s of footage so act 2 pins after the putaway
   clip has actually started, and so the hero gets extra dwell time */
#act-1{--dur:9}
#act-6{--dur:6}

/* One persistent film layer for the whole sequence. The negative margin lets it
   pin across every act without occupying layout space of its own — so clips
   cross-dissolve into each other instead of unpinning into a black gap. */
.film__stage{
  position:sticky;top:0;z-index:0;
  height:100svh;margin-bottom:-100svh;
  overflow:hidden;
  background:var(--ink-000);
}
/* one continuous 27s film — the six phases are crossfaded into it at encode
   time, so scrolling scrubs a single uninterrupted timeline */
.film__video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.02);
  transform-origin:50% 48%;
  background:var(--ink-000) center/cover no-repeat;
}

/* poster fallback for save-data / no-video: same cross-dissolve, stills only */
.film__stills{position:absolute;inset:0;display:none}
.film.is-stills .film__stills{display:block}
.film.is-stills .film__video{display:none}
.still{
  position:absolute;inset:0;
  background:var(--img) center/cover no-repeat;
  opacity:var(--fade,0);
}
.still[data-still="1"]{opacity:1}

.act__stage{
  position:sticky;top:0;height:100svh;z-index:1;
  display:grid;
  opacity:var(--op,1);
}

.film__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(5,7,6,.94) 0%,rgba(5,7,6,.74) 30%,rgba(5,7,6,.12) 56%,rgba(5,7,6,.52) 100%),
    linear-gradient(to top,rgba(5,7,6,.86) 0%,transparent 34%),
    linear-gradient(to bottom,rgba(5,7,6,.62) 0%,transparent 26%);
}

/* content grid over the film */
.act__grid{
  position:relative;z-index:2;
  height:100%;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--nav-h) + 4vh) var(--gut) 12vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;gap:3rem;
}
.act__copy{max-width:34rem}
.act__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem}

/* the phase rail is fixed on the right; keep the act content clear of it */
@media (min-width:901px){
  .act__grid{padding-right:calc(var(--gut) + 190px)}
}

/* ── 9. HUD CHIPS ──────────────────────────────────────────── */
.act__hud{
  justify-self:end;align-self:center;
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  width:min(330px,100%);
}
.chip{
  --p:0;
  position:relative;
  display:flex;align-items:center;gap:.65rem;
  padding:.7rem .95rem;
  background:var(--sig-panel);
  border:1px solid var(--sig-line);
  border-radius:var(--r);
  backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 10px 34px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--paper);
  font-size:.74rem;letter-spacing:.04em;
  opacity:0;transform:translateX(26px) scale(.97);
  filter:blur(3px);
  transition:opacity .55s var(--e-out),transform .55s var(--e-out),filter .55s var(--e-out);
  will-change:opacity,transform;
}
.chip.is-on{opacity:1;transform:none;filter:none}
/* corner ticks — the scan-bracket motif from the logo */
.chip::before,.chip::after{
  content:'';position:absolute;width:7px;height:7px;
  border:1px solid var(--sig);opacity:.85;
}
.chip::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.chip::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.chip em{
  flex:none;width:14px;height:14px;border-radius:99px;
  border:1px solid var(--sig);position:relative;
}
.chip em::after{
  content:'';position:absolute;inset:3px;border-radius:99px;
  background:var(--sig);box-shadow:0 0 8px var(--sig-glow);
}
.chip.is-on em::before{
  content:'';position:absolute;inset:-1px;border-radius:99px;
  border:1px solid var(--sig);
  animation:pulse 2.2s var(--e-out) infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.1);opacity:0}}

.chip--big{flex-direction:column;align-items:flex-start;gap:.15rem;padding:1rem 1.15rem;min-width:210px}
.chip__k{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sig-bloom);opacity:.85}
.chip--big b{
  font-size:2rem;font-weight:700;line-height:1.05;letter-spacing:-.02em;
  color:var(--paper);text-shadow:0 0 26px var(--sig-glow);
}
.chip__s{font-size:.63rem;color:var(--con-200);letter-spacing:.06em}

.chip--list{flex-direction:column;align-items:stretch;gap:.5rem;padding:.9rem 1.05rem;min-width:220px}
.chip--list ul{display:flex;flex-direction:column;gap:.34rem}
.chip--list li{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.68rem;color:var(--con-100);
  padding-bottom:.34rem;border-bottom:1px solid rgba(47,224,126,.16);
}
.chip--list li:last-child{border-bottom:0;padding-bottom:0}
.chip--list li b{color:var(--sig);font-weight:500}

/* scroll cue */
.scrollcue{
  position:absolute;left:var(--gut);bottom:5vh;z-index:3;
  display:flex;align-items:center;gap:.7rem;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--con-300);
  transition:opacity .6s var(--e-out);
}
.scrollcue i{
  position:relative;display:block;width:1px;height:38px;background:rgba(255,255,255,.16);overflow:hidden;
}
.scrollcue i::after{
  content:'';position:absolute;inset:0;background:var(--sig);
  animation:cue 2s var(--e-io) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
.act--hero .act__stage.is-past .scrollcue{opacity:0}

/* ── 10. TICK LIST ─────────────────────────────────────────── */
.ticks{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}
.ticks li{
  position:relative;padding-left:1.75rem;
  font-size:.9rem;color:var(--con-200);
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.52em;
  width:9px;height:9px;
  border-left:1.5px solid var(--sig);border-bottom:1.5px solid var(--sig);
  transform:rotate(-45deg) translateY(-1px);
}

/* ── 11. EVIDENCE BAND ─────────────────────────────────────── */
.band{
  position:relative;z-index:3;
  padding:clamp(80px,11vw,150px) 0;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(8,136,58,.13),transparent 62%),
    var(--ink-100);
  border-top:1px solid rgba(255,255,255,.06);
}

/* the workflow band reuses the card grid, on the band's darker ground */
.band .card{background:var(--ink-100)}
.band .card:hover{background:var(--ink-200)}
.band .sect__head{margin-bottom:clamp(40px,5vw,64px)}

/* ── 12b. PRODUCT SCREENS ──────────────────────────────────── */
/* The OS is a light interface and the site is dark, so each screen sits on a
   dark mat with the same scan-bracket corners as the HUD chips. Without that
   they read as pasted in. */
.sect--product{background:var(--ink-100)}

.shot{margin:0}
.shot__frame{
  position:relative;
  padding:clamp(8px,.8vw,12px);
  background:var(--ink-050);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);
  transition:border-color .5s var(--e-out),box-shadow .5s var(--e-out),transform .5s var(--e-out);
}
.shot__frame::before,.shot__frame::after{
  content:'';position:absolute;width:10px;height:10px;
  border:1px solid var(--sig);opacity:0;
  transition:opacity .5s var(--e-out);
  pointer-events:none;z-index:2;
}
.shot__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.shot__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.shot__frame img{
  display:block;width:100%;height:auto;
  border-radius:1px;
}
.shot:hover .shot__frame{
  border-color:var(--sig-line);
  box-shadow:0 30px 80px -34px var(--sig-glow);
  transform:translateY(-2px);
}
.shot:hover .shot__frame::before,.shot:hover .shot__frame::after{opacity:.9}

.shot__cap{
  display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  margin-top:1.05rem;
  font-size:.76rem;letter-spacing:.04em;color:var(--con-300);
}
.shot__cap b{
  flex:none;font-weight:500;color:var(--sig);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
}

.shot--lead{margin-bottom:clamp(30px,3.4vw,52px)}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,38px)}

/* ── 12. SECTIONS ──────────────────────────────────────────── */
.sect{
  position:relative;z-index:3;
  padding:clamp(80px,11vw,150px) 0;
  background:var(--ink-050);
  border-top:1px solid rgba(255,255,255,.06);
}
.sect__head{margin-bottom:clamp(44px,5vw,72px)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden}
.cards--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;background:var(--ink-050);
  padding:clamp(26px,2.8vw,42px);
  overflow:hidden;transition:background .5s var(--e-out);
}
.card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 0%,rgba(8,136,58,.16),transparent 70%);
  opacity:0;transition:opacity .55s var(--e-out);
}
.card:hover{background:var(--ink-100)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card__n{
  display:block;font-size:.68rem;letter-spacing:.2em;color:var(--sig);
  margin-bottom:1.6rem;
}
.card h3{
  font-family:var(--f-display);font-weight:500;
  font-size:1.28rem;letter-spacing:-.015em;color:var(--paper);margin-bottom:.7rem;
}
.card p{font-size:.9rem;color:var(--con-300);line-height:1.68}
.card__status{
  display:inline-block;margin-top:1.4rem;
  padding:.32rem .6rem;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--con-300);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
}
.card__status.is-now{
  color:var(--sig);border-color:var(--sig-line);
  background:rgba(47,224,126,.07);
}

/* deployment */
.sect--deploy{background:var(--ink-100)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px)}
.steps li{position:relative;padding-top:2.2rem}
.steps li::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(255,255,255,.12);
}
.steps li::after{
  content:'';position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:99px;
  background:var(--sig);box-shadow:0 0 0 4px rgba(47,224,126,.12),0 0 16px var(--sig-glow);
}
.steps span{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sig);margin-bottom:.9rem}
.steps h3{font-family:var(--f-display);font-weight:500;font-size:1.15rem;color:var(--paper);margin-bottom:.55rem;letter-spacing:-.01em}
.steps p{font-size:.86rem;color:var(--con-300);line-height:1.66}

/* ── 12c. THE MODEL (ROI) ──────────────────────────────────── */
/* Darkest ground on the page: after two lit sections of screenshots this reads
   as a console you sit down at rather than another block of marketing. */
.sect--calc{
  background:
    radial-gradient(100% 70% at 50% 0%,rgba(8,136,58,.10),transparent 60%),
    var(--ink-000);
}

.calc{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,3.4vw,64px);
  align-items:start;
}

/* groups reuse the deployment steps' rule + green node so the model reads as
   part of the same family rather than a bolted-on widget */
.calc__group{position:relative;padding-top:2rem}
.calc__group+.calc__group{margin-top:clamp(38px,4vw,60px)}
.calc__group::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(255,255,255,.12);
}
.calc__group::after{
  content:'';position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:99px;
  background:var(--sig);box-shadow:0 0 0 4px rgba(47,224,126,.12),0 0 16px var(--sig-glow);
}
.calc__groupHead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:.4rem;
}
.calc__groupHead h3{
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sig);
}
.calc__tag{
  padding:.3rem .55rem;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--con-300);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
}
.calc__note{
  font-size:.84rem;line-height:1.66;color:var(--con-300);
  max-width:54ch;margin:.9rem 0 .4rem;
}

.calc__field{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.05rem 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.calc__field label{
  font-size:.88rem;line-height:1.5;color:var(--con-100);max-width:30ch;
}
.calc__field label i{
  display:block;font-style:normal;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--con-400);margin-top:.32rem;
}

.calc__ctrl{
  /* wide enough that the slider has real travel — at 210px it read as a
     decoration under the number rather than something worth dragging */
  flex:none;width:min(280px,50%);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem;
}
.calc__pre,.calc__post{font-size:.8rem;color:var(--con-300)}
.calc__num{
  width:98px;padding:.6rem .7rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  color:var(--paper);font-size:.86rem;text-align:right;
  font-variant-numeric:tabular-nums;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.calc__num:focus{
  outline:none;border-color:var(--sig);background:rgba(47,224,126,.06);
  box-shadow:0 0 0 3px rgba(47,224,126,.12);
}
.calc__num::-webkit-outer-spin-button,
.calc__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc__num[type=number]{-moz-appearance:textfield;appearance:textfield}

/* The slider is a second control on the same value. The number field is the
   accessible one — the range is hidden from AT and the tab order so the value
   is not announced twice. */
.calc__range{
  flex:1 0 100%;
  -webkit-appearance:none;appearance:none;
  height:16px;background:transparent;cursor:ew-resize;margin:0;
}
.calc__range::-webkit-slider-runnable-track{
  height:2px;background:rgba(255,255,255,.14);border-radius:99px;
}
.calc__range::-moz-range-track{height:2px;background:rgba(255,255,255,.14);border-radius:99px}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-4.5px;border-radius:99px;
  background:var(--sig);border:0;
  box-shadow:0 0 0 3px rgba(47,224,126,.14),0 0 14px var(--sig-glow);
  transition:box-shadow .3s;
}
.calc__range::-moz-range-thumb{
  width:11px;height:11px;border-radius:99px;background:var(--sig);border:0;
  box-shadow:0 0 0 3px rgba(47,224,126,.14),0 0 14px var(--sig-glow);
}
.calc__range:hover::-webkit-slider-thumb,
.calc__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(47,224,126,.2),0 0 18px var(--sig-glow)}

/* ── readout panel — the HUD chip, grown up ── */
.calc__panel{
  position:sticky;top:calc(var(--nav-h) - 26px);
  padding:clamp(24px,2.4vw,36px);
  background:var(--sig-panel);
  border:1px solid var(--sig-line);
  border-radius:var(--r);
  backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 30px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
}
.calc__panel::before,.calc__panel::after{
  content:'';position:absolute;width:10px;height:10px;
  border:1px solid var(--sig);opacity:.85;pointer-events:none;
}
.calc__panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.calc__panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.calc__outHead{
  display:flex;align-items:center;gap:.7rem;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sig);
  margin-bottom:1.6rem;
}
.calc__outHead i{
  width:22px;height:1px;background:var(--sig);box-shadow:0 0 10px var(--sig-glow);flex:none;
}

.calc__big+.calc__big{margin-top:1.4rem}
.calc__big b{
  display:block;
  font-size:clamp(2.1rem,4vw,3.1rem);font-weight:500;line-height:1;
  letter-spacing:-.03em;color:var(--sig);
  font-variant-numeric:tabular-nums;
}
.calc__big--alt b{color:var(--paper)}
.calc__big span{
  display:block;margin-top:.5rem;
  font-size:.78rem;line-height:1.5;color:var(--con-200);max-width:26ch;
}

.calc__rows{margin-top:1.8rem;border-top:1px solid rgba(255,255,255,.12);font-size:.74rem}
.calc__rows div{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.calc__rows dt{color:var(--con-200);letter-spacing:.04em}
.calc__rows dd{color:var(--paper);font-variant-numeric:tabular-nums}
.calc__tot{border-bottom:0!important}
.calc__tot dt{color:var(--sig)!important;text-transform:uppercase;letter-spacing:.16em;font-size:.62rem}
.calc__tot dd{color:var(--sig)!important;font-size:.95rem}

.calc__go{margin-top:1.7rem;width:100%}
.calc__disc{
  margin-top:1.1rem;
  font-size:.68rem;line-height:1.6;color:var(--con-300);
}

/* ── the arithmetic, in the open ── */
.calc__how{margin-top:clamp(38px,4vw,60px);border-top:1px solid rgba(255,255,255,.1)}
.calc__how summary{
  padding:1.15rem 0;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--con-200);
  transition:color .3s;
}
.calc__how summary::-webkit-details-marker{display:none}
.calc__how summary::before{
  content:'';width:9px;height:9px;flex:none;
  border-left:1.5px solid var(--sig);border-bottom:1.5px solid var(--sig);
  transform:rotate(-45deg) translate(1px,-1px);
  transition:transform .35s var(--e-out);
}
.calc__how[open] summary::before{transform:rotate(135deg) translate(-2px,2px)}
.calc__how summary:hover{color:var(--sig)}
.calc__howBody{padding-bottom:1.6rem;display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,2.6vw,48px)}
.calc__howBody ol{counter-reset:f;font-size:.72rem;line-height:1.7;color:var(--con-300)}
.calc__howBody li{
  position:relative;padding:.42rem 0 .42rem 2.2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.calc__howBody li::before{
  counter-increment:f;content:counter(f,decimal-leading-zero);
  position:absolute;left:0;top:.42rem;color:var(--sig);opacity:.75;
}
.calc__howBody li span{color:var(--paper)}
.calc__howBody li i{font-style:normal;color:var(--con-400)}
.calc__howBody>p{font-size:.82rem;line-height:1.7;color:var(--con-300)}

/* currency switch */
.calc__cur{display:flex;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r)}
.calc__cur button{
  padding:.34rem .72rem;
  background:var(--ink-000);border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.72rem;color:var(--con-300);
  transition:color .3s,background .3s;
}
.calc__cur button:hover{color:var(--paper)}
.calc__cur button.is-on{color:var(--ink-000);background:var(--sig)}

/* the figures, carried to the enquiry form */
.cta__attach{
  margin-top:2.4rem;width:min(560px,100%);
  padding:1rem 1.2rem;
  background:rgba(47,224,126,.07);
  border:1px solid var(--sig-line);border-radius:var(--r);
  text-align:left;
}
.cta__attach p{font-size:.72rem;line-height:1.7;color:var(--con-200);letter-spacing:.03em}
.cta__attach b{display:block;color:var(--sig);font-weight:500;margin-bottom:.3rem}
.cta__attachX{
  margin-top:.6rem;padding:0;background:none;border:0;cursor:pointer;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--con-300);text-decoration:underline;text-underline-offset:3px;
  transition:color .3s;
}
.cta__attachX:hover{color:var(--sig)}
/* ── 13. CTA ───────────────────────────────────────────────── */
.cta{
  position:relative;z-index:3;overflow:hidden;
  padding:clamp(110px,15vw,200px) 0;
  border-top:1px solid rgba(255,255,255,.06);
  background:var(--ink-000);
  text-align:center;
}
.cta__bg{position:absolute;inset:0;z-index:0}
.cta__video{width:100%;height:100%;object-fit:cover;opacity:.3;transform:scale(1.08)}
.cta__bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 50% 50%,transparent,rgba(5,7,6,.92) 78%),
    linear-gradient(to bottom,rgba(5,7,6,.8),rgba(5,7,6,.5) 40%,rgba(5,7,6,.95));
}
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cta .display{font-size:clamp(2.3rem,6vw,5rem)}
.cta .lede{max-width:44ch;text-align:center}
.cta .eyebrow{justify-content:center}

.cta__form{
  margin-top:2.8rem;
  display:flex;flex-direction:column;gap:.6rem;
  width:min(560px,100%);
}
.cta__row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%}
/* the optional pair sits quieter than the email line — it must not read as
   two more things standing between someone and getting in touch */
.cta__row--more input{flex:1 1 180px;padding-block:.85rem;font-size:.76rem;background:rgba(255,255,255,.025)}
.cta__row--more input::placeholder{color:var(--con-400)}
.cta__form input{
  flex:1 1 260px;
  padding:1.05rem 1.25rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);
  color:var(--paper);
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.03em;
  transition:border-color .35s,background .35s,box-shadow .35s;
}
.cta__form input::placeholder{color:var(--con-400)}
.cta__form input:focus{
  outline:none;border-color:var(--sig);background:rgba(47,224,126,.06);
  box-shadow:0 0 0 3px rgba(47,224,126,.12);
}
.cta__form input.is-bad{border-color:#E0563F;box-shadow:0 0 0 3px rgba(224,86,63,.14)}
.cta__note{
  margin-top:1.1rem;min-height:1.2em;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sig);
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s var(--e-out);
}
.cta__note.is-on{opacity:1;transform:none}
.cta__note.is-bad{color:#E0563F}
.cta__note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cta__note a:hover{color:var(--sig)}
.cta__alt{margin-top:.4rem}

/* ── 14. FOOTER ────────────────────────────────────────────── */
.foot{
  position:relative;z-index:3;
  padding:clamp(48px,5vw,70px) 0;
  background:var(--ink-050);border-top:1px solid rgba(255,255,255,.07);
}
.foot__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;
}
.foot__brand{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.foot__logo{height:clamp(44px,4.6vw,64px);width:auto}
.foot__line{font-size:.8rem;color:var(--con-400)}
.foot__nav{display:flex;gap:1.6rem}
.foot__nav a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--con-300);transition:color .3s}
.foot__nav a:hover{color:var(--sig)}
.foot__copy{font-size:.68rem;letter-spacing:.12em;color:var(--con-400)}

/* ── 15. ATMOSPHERE ────────────────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:500;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.4s steps(1) infinite;
}
/* Re-randomise which slice of the noise tile is showing. Nothing translates,
   so the texture churns like film grain without shifting the image under it. */
@keyframes grain{
  0%  {background-position:0 0}
  20% {background-position:-37px 53px}
  40% {background-position:91px -29px}
  60% {background-position:-63px -71px}
  80% {background-position:47px 41px}
  100%{background-position:0 0}
}

/* custom scan-bracket cursor — a scanner sight rather than a pointer.
   Free, it is a small bracket frame trailing a precise dot. Over anything
   actionable it locks on: the brackets fly to that element's box, frame it,
   and a mono readout says what the click will do. The native pointer is
   hidden only once this is running (has-cursor), so nothing is lost if the
   script never gets there. */
html.has-cursor,html.has-cursor *{cursor:none !important}

.cursor{
  /* above the screen viewer (700): the native pointer is hidden, so this
     has to be the topmost thing on the page */
  position:fixed;top:0;left:0;z-index:900;pointer-events:none;
  width:34px;height:34px;
  opacity:0;transition:opacity .35s;
  will-change:transform,width,height;
}
.cursor.is-on{opacity:1}
.cursor i{
  position:absolute;width:9px;height:9px;
  border:1.5px solid var(--sig);
  transition:width .3s var(--e-out),height .3s var(--e-out),
             border-color .2s,opacity .2s;
}
.cursor i:nth-of-type(1){top:0;left:0;border-right:0;border-bottom:0}
.cursor i:nth-of-type(2){top:0;right:0;border-left:0;border-bottom:0}
.cursor i:nth-of-type(3){bottom:0;left:0;border-right:0;border-top:0}
.cursor i:nth-of-type(4){bottom:0;right:0;border-left:0;border-top:0}
/* locked on: bigger corners, lit */
.cursor.is-hot i{width:15px;height:15px;box-shadow:0 0 12px var(--sig-glow)}
.cursor.is-down i{border-color:#EAFFF3}
.cursor.is-text i{opacity:0}

/* over a field the sight collapses to a caret */
.cursor__bar{
  position:absolute;left:50%;top:50%;
  width:1.5px;height:100%;margin-left:-.75px;
  transform:translateY(-50%);
  background:var(--sig);box-shadow:0 0 8px var(--sig-glow);
  opacity:0;transition:opacity .2s;
}
.cursor.is-text .cursor__bar{opacity:1;animation:blink 1.06s steps(2) infinite}

/* a click reads as a capture */
.cursor__ring{
  position:absolute;left:50%;top:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1.5px solid var(--sig);border-radius:99px;
  opacity:0;
}
.cursor__ring.is-go{animation:ringPop .5s var(--e-out)}
@keyframes ringPop{
  0%  {opacity:.9;transform:scale(.45)}
  100%{opacity:0;transform:scale(2.4)}
}

/* what the click will do */
.cursor__tag{
  position:absolute;left:50%;top:100%;
  transform:translate(-50%,14px);
  padding:.28rem .5rem;
  white-space:nowrap;
  font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-000);background:var(--sig);
  border-radius:2px;
  opacity:0;transition:opacity .22s var(--e-out),transform .34s var(--e-out);
}
.cursor.has-tag .cursor__tag{opacity:1;transform:translate(-50%,9px)}

/* the true pointer position, with none of the follow lag */
.cursor__dot{
  position:fixed;top:0;left:0;z-index:901;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:99px;background:var(--sig);
  box-shadow:0 0 10px var(--sig),0 0 22px var(--sig-glow);
  opacity:0;transition:opacity .3s;
  will-change:transform;
}
.cursor__dot.is-on{opacity:1}
.cursor__dot.is-text{opacity:0}

/* ── 16. REVEALS ───────────────────────────────────────────── */
[data-fx]{--d:calc(var(--i,0) * 80ms)}
[data-fx="up"]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--e-out) var(--d),transform .8s var(--e-out) var(--d);
}
[data-fx="lines"] span{
  display:block;opacity:0;transform:translateY(.9em);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);
}
[data-fx="lines"] span:nth-child(2){transition-delay:.09s}
[data-fx="lines"] span:nth-child(3){transition-delay:.18s}
[data-fx].is-in{opacity:1;transform:none}
[data-fx="lines"].is-in span{opacity:1;transform:none}

/* ── 16b. PHASE SCAN REVEAL ───────────────────────
   Each phase reads like the scanner is reading it: the block flashes as the
   beam fires, a green bar sweeps top to bottom, and every line is uncovered
   — green first, settling to white — as the beam crosses it. The per-line
   delay is set by JS (--sd) from that line's own offset in the block, so the
   text genuinely follows the beam instead of just looking like it. */
.act__copy[data-scan]{position:relative}

/* the scan-fx replaces the generic reveal inside these blocks */
.act__copy[data-scan] [data-fx],
.act__copy[data-scan] [data-fx="lines"] span{opacity:1;transform:none;transition:none}

/* corner brackets — the same scan framing as the cursor */
.act__copy[data-scan]::before,
.act__copy[data-scan]::after{
  content:'';position:absolute;width:22px;height:22px;
  border:1.5px solid var(--sig-line);
  opacity:0;transition:opacity .45s var(--e-out),transform .7s var(--e-out);
  pointer-events:none;
}
.act__copy[data-scan]::before{top:-1.5rem;left:-1.7rem;border-right:0;border-bottom:0;transform:translate(10px,10px)}
.act__copy[data-scan]::after{bottom:-1.5rem;right:-1.7rem;border-left:0;border-top:0;transform:translate(-10px,-10px)}
.act__copy.is-scanning::before,
.act__copy.is-scanning::after{opacity:1;transform:none;animation:scanBracket 1.1s var(--e-out) both}
@keyframes scanBracket{
  0%  {border-color:var(--sig);box-shadow:0 0 20px var(--sig-glow)}
  40% {border-color:var(--sig);box-shadow:0 0 10px var(--sig-glow)}
  100%{border-color:var(--sig-line);box-shadow:none}
}

/* the block flashes once as the scanner fires */
.scanwash{
  position:absolute;left:-1.7rem;right:-1.7rem;top:-1.2rem;bottom:-1.2rem;
  z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(47,224,126,.30),rgba(47,224,126,0) 70%);
  mix-blend-mode:screen;
}
.act__copy.is-scanning .scanwash{animation:scanWash .55s ease-out both}
@keyframes scanWash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* the beam: full height of the block, translated from above it to below */
.scanbeam{
  position:absolute;left:-1.7rem;right:-1.7rem;top:0;height:100%;
  z-index:3;pointer-events:none;opacity:0;
  transform:translateY(-100%);
  will-change:transform;
}
.is-scanning > .scanbeam{
  animation:scanSweep var(--sweep,1600ms) cubic-bezier(.45,.03,.25,1) forwards;
}
/* the trail the beam leaves behind it — tinted, with scanner line texture */
.scanbeam::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:min(260px,68%);
  background:
    repeating-linear-gradient(to bottom,
      rgba(47,224,126,.13) 0 1px,rgba(47,224,126,0) 1px 4px),
    linear-gradient(to bottom,
      rgba(47,224,126,0) 0%,
      rgba(47,224,126,.10) 45%,
      rgba(47,224,126,.26) 86%,
      rgba(146,220,150,.42) 100%);
  mix-blend-mode:screen;filter:blur(2px);
}
/* the reading line itself — white-hot core, green ends */
.scanbeam::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,
    transparent 0%,var(--sig) 8%,#EAFFF3 50%,var(--sig) 92%,transparent 100%);
  box-shadow:
    0 0 10px var(--sig),
    0 0 30px var(--sig-glow),
    0 0 70px var(--sig-glow);
}
@keyframes scanSweep{
  0%  {transform:translateY(-100%);opacity:0}
  5%  {opacity:1}
  90% {opacity:1}
  100%{transform:translateY(0);opacity:0}
}

/* every scanned line stays covered until the beam reaches it */
.act__copy[data-scan] .scan-t{
  clip-path:inset(-45% 0 101% 0);
  transform:translateY(12px);
  transition:clip-path .5s var(--e-out) var(--sd,0ms),
             transform .75s var(--e-out) var(--sd,0ms);
}
.act__copy.is-scanning .scan-t{
  clip-path:inset(-45% 0 -45% 0);
  transform:none;
  animation:scanFlash 1.15s var(--e-out) var(--sd,0ms) both;
}
/* once the sweep is over, drop the clip so hover glows aren't cut off */
.act__copy.scan-done .scan-t{clip-path:none;animation:none;transform:none}
/* the line arrives green and cools to its own colour (100% falls back to it) */
@keyframes scanFlash{
  0%  {color:var(--sig);text-shadow:0 0 24px var(--sig),0 0 64px var(--sig-glow);filter:brightness(1.5)}
  40% {color:var(--sig);text-shadow:0 0 14px var(--sig-glow);filter:brightness(1.16)}
  100%{filter:none}
}

@media (max-width:900px){
  .act__copy[data-scan]::before,.act__copy[data-scan]::after{display:none}
  .scanbeam,.scanwash{left:-1rem;right:-1rem}
}

/* ── 16c. SECTION HEAD SCAN ────────────────────────────────────
   The acts get the full sweep; every section head gets the same idea a
   tenth of the size — a green line crosses the head left to right and the
   eyebrow, heading and sub come out behind it. The timing is linear on
   purpose: each line's wipe duration (--sdur) is its own width as a
   fraction of the head's, so the uncovering edge tracks the beam exactly
   instead of drifting ahead of it. */
.sect__head[data-scan-head]{position:relative}
.sect__head[data-scan-head] [data-fx]{opacity:1;transform:none;transition:none}

.headbeam{
  position:absolute;top:-.7rem;bottom:-.7rem;left:0;width:100%;
  z-index:3;pointer-events:none;opacity:0;
  transform:translateX(-100%);will-change:transform;
}
.is-scanning > .headbeam{animation:headSweep var(--sweep,1000ms) linear forwards}
/* the trail, behind the line */
.headbeam::before{
  content:'';position:absolute;top:0;bottom:0;right:0;width:min(200px,45%);
  background:linear-gradient(to right,rgba(47,224,126,0),rgba(47,224,126,.20));
  mix-blend-mode:screen;filter:blur(2px);
}
.headbeam::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:1.5px;
  background:linear-gradient(to bottom,
    transparent 0%,var(--sig) 14%,#EAFFF3 50%,var(--sig) 86%,transparent 100%);
  box-shadow:0 0 10px var(--sig),0 0 30px var(--sig-glow);
}
@keyframes headSweep{
  0%  {transform:translateX(-100%);opacity:0}
  6%  {opacity:1}
  88% {opacity:1}
  100%{transform:translateX(0);opacity:0}
}

.sect__head[data-scan-head] .scanh{
  clip-path:inset(-35% 101% -35% -35%);
  transition:clip-path var(--sdur,1000ms) linear;
}
.sect__head.is-scanning .scanh{
  clip-path:inset(-35% -35% -35% -35%);
  animation:scanFlash .95s var(--e-out) both;
}
.sect__head.scan-done .scanh{clip-path:none;animation:none}

/* ── 16d. PRODUCT SCREEN BOOT ──────────────────────────────────
   The screenshots are screens of a scanner-driven system, so they arrive
   the way that system would draw them: the frame's corner brackets strike,
   and a plate of green wireframe — desaturating everything under it with a
   backdrop-filter — is wiped off to the right, resolving the real screen
   behind the beam. */
.shot[data-scan-shot]{transition:opacity .5s var(--e-out),transform .85s var(--e-out)}
.shot[data-scan-shot][data-fx]{opacity:1;transform:none}
.shot.scan-armed{opacity:0;transform:translateY(20px)}
.shot.scan-armed.is-scanning{opacity:1;transform:none}

.shot__veil{
  position:absolute;inset:0;z-index:2;
  overflow:hidden;border-radius:var(--r);
  pointer-events:none;opacity:0;
}
.shot.is-scanning .shot__veil{opacity:1}
.shot.scan-done .shot__veil{display:none}
.shot__veil b{
  position:absolute;inset:0;display:block;
  -webkit-backdrop-filter:grayscale(1) brightness(.42) contrast(1.15);
  backdrop-filter:grayscale(1) brightness(.42) contrast(1.15);
  background:
    repeating-linear-gradient(to right,rgba(47,224,126,.11) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(to bottom,rgba(47,224,126,.11) 0 1px,transparent 1px 44px),
    linear-gradient(to right,rgba(8,136,58,.10),rgba(8,136,58,.24));
}
.shot.is-scanning .shot__veil b{
  animation:shotWipe var(--sweep,1150ms) cubic-bezier(.45,.03,.25,1) forwards;
}
.shot__veil b::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(to bottom,
    transparent 0%,var(--sig) 12%,#EAFFF3 50%,var(--sig) 88%,transparent 100%);
  box-shadow:0 0 12px var(--sig),0 0 34px var(--sig-glow);
}
@keyframes shotWipe{0%{transform:translateX(0)}100%{transform:translateX(101.5%)}}

/* the frame strikes green, then hands its corners back to :hover */
.shot.is-scanning .shot__frame{animation:shotEdge 1.5s var(--e-out) both}
.shot.is-scanning .shot__frame::before,
.shot.is-scanning .shot__frame::after{animation:shotBracket 1.5s var(--e-out) both}
.shot.scan-done .shot__frame,
.shot.scan-done .shot__frame::before,
.shot.scan-done .shot__frame::after{animation:none}
@keyframes shotEdge{
  0%  {border-color:var(--sig);box-shadow:0 0 0 1px var(--sig-glow),0 30px 80px -40px var(--sig-glow)}
  55% {border-color:var(--sig-line)}
  100%{box-shadow:none}
}
@keyframes shotBracket{0%{opacity:1}60%{opacity:1}100%{opacity:0}}

/* the caption reads out once the screen has resolved */
.shot.scan-armed .shot__cap{
  clip-path:inset(-35% 101% -35% -35%);
  transition:clip-path .55s var(--e-out) var(--sd,0ms);
}
.shot.is-scanning .shot__cap{
  clip-path:inset(-35% -35% -35% -35%);
  animation:scanFlash .9s var(--e-out) var(--sd,0ms) both;
}
.shot.scan-done .shot__cap{clip-path:none;animation:none}

/* ── 16e. GRIDS, STEPS, PANEL ──────────────────────────────────
   Three more reads for the same scanner. The card grids power up column by
   column as a beam crosses them; the approach steps draw their spine and
   light their markers in sequence; the model panel is read top to bottom and
   its figures roll up from zero. */

/* card grids ------------------------------------------------- */
.cards[data-scan-grid]{position:relative}
.cards[data-scan-grid] > .headbeam{top:0;bottom:0}
.cards[data-scan-grid] [data-fx]{opacity:1;transform:none;transition:none}

.cards[data-scan-grid] .card{transition:background .6s var(--e-out) var(--sd,0ms)}
.cards.grid-armed .card{background:var(--ink-000)}
.cards.is-scanning .card{background:var(--ink-050)}
.cards.scan-done .card{transition:background .5s var(--e-out)}

/* keyed to the JS-added class, never the attribute: if the script never
   runs, none of this is hidden in the first place */
.cards.grid-armed .card > *{
  clip-path:inset(-35% 101% -35% -35%);
  transition:clip-path var(--sdur,420ms) linear var(--sd,0ms);
}
.cards.is-scanning .card > *{clip-path:inset(-35% -35% -35% -35%)}
.cards.scan-done .card > *{clip-path:none;animation:none}

/* the cell edge strikes, and its number comes up like a boot readout */
.cards.is-scanning .card{animation:cardOn 1s var(--e-out) var(--sd,0ms) both}
.cards.scan-done .card{animation:none}
@keyframes cardOn{
  0%  {box-shadow:inset 1px 0 0 var(--sig),0 0 34px -12px var(--sig-glow)}
  60% {box-shadow:inset 1px 0 0 var(--sig-line)}
  100%{box-shadow:none}
}
.cards.is-scanning .card__n{animation:numOn .7s steps(1) var(--sd,0ms) both}
.cards.scan-done .card__n{animation:none}
@keyframes numOn{
  0%  {opacity:0}
  20% {opacity:1;text-shadow:0 0 14px var(--sig)}
  30% {opacity:.25}
  45% {opacity:1;text-shadow:0 0 10px var(--sig-glow)}
  55% {opacity:.5}
  70% {opacity:1}
  100%{opacity:1;text-shadow:none}
}

/* approach steps --------------------------------------------- */
.steps[data-scan-steps] [data-fx]{opacity:1;transform:none;transition:none}
/* the spine draws, then the marker lands, then the words */
.steps.steps-armed li::before{transform:scaleX(0);transform-origin:left}
.steps.steps-armed li::after{transform:scale(0);opacity:0}
.steps.is-scanning li::before{
  transform:scaleX(1);
  transition:transform .55s var(--e-out) var(--sd,0ms);
}
.steps.is-scanning li::after{
  transform:scale(1);opacity:1;
  transition:transform .45s var(--e-out) calc(var(--sd,0ms) + 380ms),
             opacity .3s linear calc(var(--sd,0ms) + 380ms);
  animation:stepDot 1.1s var(--e-out) calc(var(--sd,0ms) + 380ms) both;
}
.steps.scan-done li::after{animation:none}
@keyframes stepDot{
  0%  {box-shadow:0 0 0 4px rgba(47,224,126,.12),0 0 16px var(--sig-glow)}
  25% {box-shadow:0 0 0 12px rgba(47,224,126,.20),0 0 30px var(--sig)}
  100%{box-shadow:0 0 0 4px rgba(47,224,126,.12),0 0 16px var(--sig-glow)}
}
.steps.steps-armed li > *{
  clip-path:inset(-35% 101% -35% -35%);
  transition:clip-path .5s var(--e-out) calc(var(--sd,0ms) + 460ms);
}
.steps.is-scanning li > *{clip-path:inset(-35% -35% -35% -35%)}
.steps.scan-done li > *{clip-path:none}

/* model panel ------------------------------------------------- */
.calc__panel[data-scan-panel]{position:sticky}
.calc__panel[data-scan-panel] > .scanbeam{left:0;right:0}
.calc__panel.is-scanning{animation:panelOn 1.4s var(--e-out) both}
.calc__panel.scan-done{animation:none}
@keyframes panelOn{
  0%  {border-color:var(--sig);box-shadow:0 0 0 1px var(--sig-glow),0 30px 90px -40px rgba(0,0,0,.9)}
  55% {border-color:var(--sig)}
  100%{box-shadow:0 30px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
}

/* ── 17. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:1180px){
  /* the readout drops under the inputs before the columns get too narrow to read */
  .calc{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .calc__panel{position:static}
  .calc__howBody{grid-template-columns:1fr}
  .cards,.cards--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:2.4rem 1.6rem}
}

@media (max-width:900px){
  :root{--nav-h:86px}
  .nav.is-stuck{height:66px}
  .nav__brand img{height:clamp(34px,8vw,42px)}
  .nav.is-stuck .nav__brand img{height:clamp(30px,7vw,36px)}
  .foot__logo{height:clamp(38px,9vw,50px)}

  .rail{display:none}
  .cursor,.cursor__dot{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;inset:0;
    flex-direction:column;justify-content:center;align-items:center;gap:1.8rem;
    background:rgba(5,7,6,.96);backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility .45s;
  }
  .nav__links.is-open{opacity:1;visibility:visible}
  .nav__links a{font-size:1.4rem;font-family:var(--f-display);letter-spacing:-.01em}
  .nav__burger{z-index:2}

  .act{--vhs:38vh}
  .act__grid{
    grid-template-columns:1fr;
    align-content:center;
    padding-bottom:16vh;
  }
  /* acts 3 and 6 carry four HUD elements; tighten them so the stack
     stays inside the viewport on a phone */
  .act__hud{justify-self:start;width:min(300px,100%);gap:.45rem}
  .chip{padding:.55rem .8rem}
  .chip--big{padding:.75rem .9rem}
  .chip--list{padding:.7rem .85rem;gap:.4rem}
  .act__copy{max-width:none}
  .film__scrim{
    background:
      linear-gradient(to top,rgba(5,7,6,.95) 6%,rgba(5,7,6,.55) 46%,rgba(5,7,6,.28) 100%),
      linear-gradient(to bottom,rgba(5,7,6,.72),transparent 30%);
  }
  .foot__inner{flex-direction:column;text-align:center}
}

@media (max-width:640px){
  .calc__field{flex-direction:column;align-items:stretch;gap:.7rem}
  .calc__field label{max-width:none}
  .calc__ctrl{width:100%;justify-content:flex-start}
  .calc__num{flex:1 1 auto;width:auto;text-align:left}
  .cards,.cards--4{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .act{--vhs:32vh}
  .act__grid{gap:2rem}
  .chip--big b{font-size:1.6rem}
  .act__cta .btn{flex:1 1 100%}
  .foot__nav{flex-wrap:wrap;justify-content:center}
}

/* Short desktop viewports (13" laptops). The phase headline is by far the
   tallest element, so trim it and the stage padding rather than let the copy
   run past the fold. The design is untouched at 861px tall and above. */
@media (min-width:901px) and (max-height:860px){
  .act .display{font-size:clamp(2.2rem,4.4vw,4.2rem)}
  .act__grid{padding-top:calc(var(--nav-h) + 2vh);padding-bottom:8vh}
  .act .lede{margin-top:1.2rem}
  .ticks{margin-top:1.5rem;gap:.6rem}
  .act__cta{margin-top:1.8rem}
}

/* Short viewports: the phase copy and the film carry the story on their own.
   The HUD stack cannot fit beside them without being clipped. */
@media (max-width:900px) and (max-height:700px){
  .act__hud{display:none}
}
@media (max-height:520px) and (min-width:640px){
  .act__hud{display:none}
  .scrollcue{display:none}
}

/* ── 18. REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain{display:none}

  /* no pinning, no scrubbing: each act becomes a plain section
     backed by its own still frame */
  .film__stage{display:none}
  .act{height:auto}
  .act__stage{
    position:relative;height:auto;min-height:100svh;
    background:var(--still,none) center/cover no-repeat,var(--ink-000);
  }
  .act__stage::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,rgba(5,7,6,.94),rgba(5,7,6,.6) 55%,rgba(5,7,6,.3));
  }
  .act__grid{z-index:2}
  #act-1 .act__stage{--still:url(../img/v3-01-activate.jpg)}
  #act-2 .act__stage{--still:url(../img/v3-02-putaway.jpg)}
  #act-3 .act__stage{--still:url(../img/v3-03-inventory.jpg)}
  #act-4 .act__stage{--still:url(../img/v3-04-picking.jpg)}
  #act-5 .act__stage{--still:url(../img/v3-05-packing.jpg)}
  #act-6 .act__stage{--still:url(../img/v3-06-dispatch.jpg)}

  .chip{opacity:1;transform:none;filter:none}
  [data-fx]{opacity:1;transform:none}
  [data-fx="lines"] span{opacity:1;transform:none}

  /* no sweep: the copy is simply there */
  .act__copy[data-scan] .scan-t{clip-path:none;animation:none;transition:none;transform:none}
  .sect__head[data-scan-head] .scanh,
  .shot[data-scan-shot] .shot__cap{clip-path:none;animation:none;transition:none}
  .shot.scan-armed{opacity:1;transform:none}
  .cards.grid-armed .card{background:var(--ink-050)}
  .cards.grid-armed .card > *,
  .steps.steps-armed li > *{clip-path:none;transition:none}
  .cards.is-scanning .card,.cards.is-scanning .card__n,
  .steps.is-scanning li::after,.calc__panel.is-scanning{animation:none}
  .steps.steps-armed li::before{transform:scaleX(1)}
  .steps.steps-armed li::after{transform:scale(1);opacity:1}
  .scanbeam,.scanwash,.headbeam,.shot__veil{display:none}
  .act__copy[data-scan]::before,.act__copy[data-scan]::after{opacity:1;transform:none}
}

/* ── 18. SCREEN VIEWER ─────────────────────────────────────────
   The cursor promises "Inspect" over a product screen, so clicking one has
   to deliver: the screenshot opens full size, framed and read in by the same
   wipe the grid uses, with the five screens on the arrow keys. */
.lens{
  position:fixed;inset:0;z-index:700;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vh,64px) clamp(20px,6vw,110px);
  opacity:0;transition:opacity .38s var(--e-out);
}
.lens.is-on{opacity:1}
.lens[hidden]{display:none}
.lens__scrim{
  position:absolute;inset:0;
  background:rgba(3,5,4,.90);
  backdrop-filter:blur(14px) saturate(120%);
}
.lens__stage{
  position:relative;margin:0;
  width:min(1280px,100%);
  transform:translateY(14px) scale(.985);
  transition:transform .5s var(--e-out);
}
.lens.is-on .lens__stage{transform:none}

.lens__frame{
  position:relative;
  padding:clamp(8px,.8vw,12px);
  background:var(--ink-050);
  border:1px solid var(--sig-line);
  border-radius:var(--r);
  box-shadow:0 50px 140px -50px rgba(0,0,0,.95);
}
.lens__frame::before,.lens__frame::after{
  content:'';position:absolute;width:14px;height:14px;
  border:1px solid var(--sig);pointer-events:none;z-index:3;
}
.lens__frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.lens__frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.lens__frame img{
  display:block;width:100%;height:auto;
  max-height:calc(100vh - 210px);object-fit:contain;
  border-radius:1px;background:var(--ink-100);
}
/* the same plate the grid shots use, re-read on every open */
.lens__frame .shot__veil{opacity:0}
.lens__frame.is-scanning .shot__veil{opacity:1}
.lens__frame.is-scanning .shot__veil b{
  animation:shotWipe 1s cubic-bezier(.45,.03,.25,1) forwards;
}

.lens__cap{
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
  margin-top:1.1rem;
  font-size:.78rem;letter-spacing:.04em;color:var(--con-300);
}
.lens__cap b{
  flex:none;font-weight:500;color:var(--sig);
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
}
.lens__cap em{
  margin-left:auto;font-style:normal;
  font-size:.63rem;letter-spacing:.2em;color:var(--con-400,var(--con-300));
}

.lens__x{
  position:absolute;top:clamp(14px,2.6vh,30px);right:clamp(14px,2.6vw,34px);
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  transition:border-color .3s var(--e-out),background .3s var(--e-out);
}
.lens__x i{position:absolute;width:15px;height:1.5px;background:var(--paper)}
.lens__x i:nth-child(1){transform:rotate(45deg)}
.lens__x i:nth-child(2){transform:rotate(-45deg)}
.lens__x:hover{border-color:var(--sig);background:rgba(47,224,126,.10)}
.lens__x:hover i{background:var(--sig)}

.lens__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(38px,4vw,54px);height:clamp(38px,4vw,54px);
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  transition:border-color .3s var(--e-out),background .3s var(--e-out);
}
.lens__nav--prev{left:clamp(8px,1.6vw,26px)}
.lens__nav--next{right:clamp(8px,1.6vw,26px)}
.lens__nav i{
  width:11px;height:11px;
  border-top:1.5px solid var(--paper);border-right:1.5px solid var(--paper);
}
.lens__nav--prev i{transform:rotate(-135deg);margin-left:3px}
.lens__nav--next i{transform:rotate(45deg);margin-right:3px}
.lens__nav:hover{border-color:var(--sig);background:rgba(47,224,126,.10)}
.lens__nav:hover i{border-color:var(--sig)}

/* ── 19. KEY HINT ──────────────────────────────────────────────
   Shown once, the first time someone scrolls into the film, then never
   again on this browser. */
.keyhint{
  position:fixed;left:clamp(14px,2vw,30px);bottom:clamp(14px,2.4vh,28px);z-index:115;
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem .85rem;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--con-200);
  background:rgba(8,12,10,.82);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);border-radius:var(--r);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.keyhint.is-on{opacity:1;transform:none}
.keyhint b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;padding:.12rem .22rem;
  font-weight:500;color:var(--sig);
  border:1px solid var(--sig-line);border-radius:3px;
}
.keyhint em{width:1px;height:12px;margin:0 .35rem;background:rgba(255,255,255,.16)}

/* ── 20. PHASE TICKS ───────────────────────────────────────────
   The top bar is whole-page scroll, so each tick is placed at the phase's
   real document position rather than at an even sixth. */
.progress__tick{
  position:absolute;top:0;width:1px;height:100%;
  background:rgba(255,255,255,.22);
  transition:background .4s var(--e-out),box-shadow .4s var(--e-out);
}
.progress__tick.is-on{background:var(--sig);box-shadow:0 0 8px var(--sig-glow)}

/* ── 21. NAV PHASE READOUT ─────────────────────────────────────── */
.nav__phase{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:none;align-items:center;gap:.45rem;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--con-200);
  opacity:0;transition:opacity .45s var(--e-out);
  pointer-events:none;white-space:nowrap;
}
.nav__phase i{width:14px;height:1px;background:var(--sig);box-shadow:0 0 8px var(--sig-glow)}
.nav__phase b{color:var(--sig);font-weight:500}
.nav__phase.is-on{opacity:1}

/* ── 22. SECTION EDGE ──────────────────────────────────────────
   A hairline drawn across the boundary as each section arrives, so the page
   below the film still feels assembled rather than stacked. */
.sectedge{
  position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--sig-core),var(--sig) 45%,var(--sig-bloom));
  box-shadow:0 0 12px var(--sig-glow);
  transform:scaleX(0);transform-origin:left;
  z-index:4;pointer-events:none;
}
.is-edged > .sectedge{transition:transform 1s var(--e-out),opacity .8s linear .9s}
.is-edged > .sectedge{transform:scaleX(1);opacity:.35}

/* ── 23. CARD HOVER SCAN ───────────────────────────────────────── */
.card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 42%,rgba(47,224,126,.16) 50%,transparent 58%);
  mix-blend-mode:screen;opacity:0;
}
.card:hover::after{animation:cardSheen .85s var(--e-out)}
@keyframes cardSheen{
  0%  {opacity:1;transform:translateX(-100%)}
  100%{opacity:1;transform:translateX(100%)}
}

/* ── 24. TRANSMIT BAR ──────────────────────────────────────────── */
.cta__bar{
  position:relative;height:2px;margin-top:1.4rem;
  max-width:520px;
  background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;
  opacity:0;transition:opacity .35s var(--e-out);
}
.cta__bar.is-on{opacity:1}
.cta__bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--sig-core),var(--sig));
  box-shadow:0 0 14px var(--sig-glow);
  transition:width .5s var(--e-out);
}

/* ── 25. NEW PIECES: RESPONSIVE + REDUCED MOTION ───────────────── */
@media (max-width:900px){
  /* the rail is gone here, so the nav carries the phase instead */
  .nav__phase{display:flex}
  .keyhint{display:none}
  .lens{padding:16px}
  .lens__nav{width:40px;height:40px}
  .lens__frame img{max-height:calc(100vh - 190px)}
}
@media (min-width:901px){
  /* it would only duplicate the rail */
  .nav__phase{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  .lens,.lens__stage,.lens__frame .shot__veil{transition:none}
  .lens__frame.is-scanning .shot__veil{opacity:0}
  .lens__frame.is-scanning .shot__veil b{animation:none}
  .card:hover::after{animation:none}
  .sectedge{transform:scaleX(1);opacity:.35}
  .is-edged > .sectedge{transition:none}
  .keyhint{transition:none}
}

/* ── 26. DOCUMENT PAGES ────────────────────────────────────────
   Long-form pages (privacy, and anything like it) reuse the site's shell
   with a prose column bolted on. No film, so the nav starts stuck. */
.page{background:var(--ink-050)}
.page__main{padding-top:calc(var(--nav-h) + clamp(40px,7vh,90px))}

.prose{max-width:68ch}
.prose h1{margin-bottom:0}
.prose h2{
  font-family:var(--f-display);font-weight:500;
  font-size:1.18rem;letter-spacing:-.01em;color:var(--paper);
  margin:clamp(34px,4vw,52px) 0 .9rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.10);
}
.prose p{color:var(--con-200);line-height:1.75;margin-bottom:1rem;max-width:64ch}
.prose .sub{margin-bottom:.5rem}
.prose .ticks{margin:1.1rem 0 1.4rem}
.prose .ticks li{font-size:.95rem;line-height:1.7}
.prose b{color:var(--paper);font-weight:500}
.prose a{color:var(--sig);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--sig-bloom)}
.prose__back{margin-top:clamp(38px,5vw,64px)}
.prose__back a{text-decoration:none}
.cta__privacy{
  margin-top:1.15rem;max-width:52ch;
  font-size:.66rem;line-height:1.75;letter-spacing:.02em;
  color:var(--con-400,var(--con-300));opacity:.85;
}
.cta__privacy a{color:var(--sig);text-decoration:underline;text-underline-offset:3px}
.cta__privacy a:hover{color:var(--sig-bloom)}