/* shuttlecheck.io
   One page, one line. The signal path carries the drive from the loading dock
   to the far end through six stations, and the page is built along it.
   Colour is state: aqua is the line and somewhere to go, amber is Rename and
   Pro (waiting on a person), red is what an ingest will refuse, green is done. */

@font-face{
  font-family:"Archivo"; src:url("../fonts/archivo-wdth.woff2") format("woff2");
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}
@font-face{ font-family:"Plex Sans"; src:url("../fonts/plex-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face{ font-family:"Plex Sans"; src:url("../fonts/plex-sans-500.woff2") format("woff2"); font-weight:500; font-display:swap }
@font-face{ font-family:"Plex Sans"; src:url("../fonts/plex-sans-600.woff2") format("woff2"); font-weight:600; font-display:swap }
@font-face{ font-family:"Plex Mono"; src:url("../fonts/plex-mono-400.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face{ font-family:"Plex Mono"; src:url("../fonts/plex-mono-500.woff2") format("woff2"); font-weight:500; font-display:swap }
@font-face{ font-family:"Plex Mono"; src:url("../fonts/plex-mono-600.woff2") format("woff2"); font-weight:600; font-display:swap }

:root{
  --ground:#040C1A;
  --ground-2:#071527;
  --aqua:#34E5E1;
  --aqua-ink:#03201F;
  --amber:#F0A01E;
  --amber-ink:#241500;
  --amber-dim:rgba(240,160,30,.14);
  --red:#EA5A55;
  --red-dim:rgba(234,90,85,.12);
  --green:#33C552;
  --green-dim:rgba(51,197,82,.13);
  --fg:#EEF2F8;
  --fg-muted:#A3B3CA;
  --fg-dim:#8194B2;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --grid:rgba(86,200,245,.045);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Plex Mono",ui-monospace,Consolas,monospace;

  --max:1320px;
  --gut:clamp(16px,4vw,48px);
  --nav-h:64px;
  --path-h:58px;
  --r:4px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--path-h) + 16px);
  -webkit-text-size-adjust:100%;
  scrollbar-color:#22405f var(--ground);
}
body{
  margin:0; background:var(--ground); color:var(--fg);
  font:400 1.0625rem/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--aqua); color:var(--aqua-ink) }
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background:var(--ground) }
::-webkit-scrollbar-thumb{ background:#1C3654; border:3px solid var(--ground); border-radius:6px }
::-webkit-scrollbar-thumb:hover{ background:#2A4C72 }
img,video,svg{ display:block; max-width:100% }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; border-radius:2px }
.amber-zone :focus-visible{ outline-color:var(--amber) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--aqua); color:var(--aqua-ink); padding:10px 14px; font-weight:600; border-radius:var(--r) }
.skip:focus{ top:12px }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut) }
.tm{ font-family:var(--f-body); font-size:.4em; font-weight:400; vertical-align:super; line-height:0; letter-spacing:0; margin-left:.06em }
.num{ font-variant-numeric:tabular-nums }

/* The films' own ground: a night grid with one aqua bloom. */
.field{
  position:relative; isolation:isolate;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(26,92,120,.38), transparent 70%),
    radial-gradient(40% 40% at 100% 100%, rgba(13,71,161,.20), transparent 70%),
    var(--ground);
}
.field::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:120px 120px; background-position:-1px -1px;
  mask-image:linear-gradient(#000 0, #000 70%, transparent);
}

/* ------------------------------------------------------------------ type */
.display{
  font-family:var(--f-display); font-stretch:125%; font-weight:800;
  letter-spacing:-.035em; line-height:.98; margin:0; text-wrap:balance;
}
h2.display{ font-size:clamp(2.2rem,5vw,4.25rem) }
h3{ font-family:var(--f-display); font-stretch:112%; font-weight:700; letter-spacing:-.02em; margin:0 }
p{ margin:0 }
.lede{ font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.55; color:var(--fg-muted); max-width:58ch; text-wrap:pretty }
.lede b{ color:var(--fg); font-weight:600 }
.mono{ font-family:var(--f-mono) }
.paneltitle{
  display:flex; align-items:center; gap:8px; min-width:0;
  font:600 .86rem/1.2 var(--f-body); color:var(--fg-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.paneltitle i{ flex:none }
.readlabel{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
}

/* ------------------------------------------------------------------ buttons */
.btn{
  --b:var(--aqua); --i:var(--aqua-ink);
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 22px;
  border-radius:var(--r); border:1px solid var(--b); background:var(--b); color:var(--i);
  font:600 1rem/1 var(--f-body); text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.7);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(0,0,0,.8) }
.btn:active{ transform:translateY(0) }
.btn svg{ width:18px; height:18px; flex:none }
.btn small{ font:500 .8rem/1 var(--f-mono); opacity:.75; letter-spacing:.02em }
.btn--ghost{ background:transparent; color:var(--b); box-shadow:none }
.btn--ghost:hover{ background:color-mix(in srgb, var(--b) 12%, transparent); box-shadow:none }
.btn--amber{ --b:var(--amber); --i:var(--amber-ink) }
.btn--sm{ min-height:40px; padding:0 15px; font-size:.9rem }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none }

.link{ color:var(--aqua); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.link:hover{ text-decoration-thickness:2px }

/* ------------------------------------------------------------------ nav */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ height:100%; display:flex; align-items:center; gap:28px }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
.brand img{ width:36px; height:auto }
.brand span{ font-family:var(--f-display); font-stretch:118%; font-weight:800; font-size:1.18rem; letter-spacing:-.02em }
.nav__links{ display:flex; gap:26px; list-style:none; margin:0; padding:0 }
.nav__links a{ text-decoration:none; font-size:.95rem; color:var(--fg-muted); display:inline-flex; align-items:center; gap:5px }
.nav__links a:hover{ color:var(--fg) }
.nav__links svg{ width:13px; height:13px }
.nav__cta{ display:flex; gap:10px }
.nav__cta .btn{ white-space:nowrap }
@media (max-width:900px){ .nav__links{ display:none } }
@media (max-width:560px){ .nav .wrap{ gap:12px } .nav__cta{ gap:8px } .nav__cta .btn--sm{ padding:0 12px } }
@media (max-width:470px){ .brand > span{ display:none } }

/* ------------------------------------------------------------------ hero */
.hero{ padding:clamp(28px,5vh,64px) 0 clamp(28px,5vh,56px); min-height:calc(100svh - var(--nav-h) - var(--path-h)); display:flex; align-items:center }
.hero > .wrap{ width:100% }
.hero .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,80px); align-items:center;
}
.dock{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim);
  margin:0 0 24px;
}
.dock__clock{
  display:inline-flex; align-items:center; gap:9px; color:var(--amber); font-weight:600;
  padding:6px 11px; border:1px solid rgba(240,160,30,.4); border-radius:var(--r); background:var(--amber-dim);
}
.dock__clock i{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber) }
.hero h1{ font-size:clamp(2.9rem,6.6vw,5.6rem); max-width:11.5ch }
.hero h1 em{ font-style:normal; color:var(--aqua) }
.hero .lede{ margin-top:24px; max-width:44ch }
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.hero__meta{ margin-top:16px; font-size:.86rem; color:var(--fg-dim) }

/* What nobody has seen yet: the tool's own words, before any figure. */
.hero__stage{ position:relative }
.unseen{
  position:absolute; z-index:3; right:calc(100% - 96px); bottom:34px; width:min(410px,34vw);
  border:1px solid var(--line-2); border-radius:var(--r);
  background:rgba(5,14,28,.94);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85);
}
.unseen__head{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line) }
.unseen__head{ align-items:center }
.unseen__head .paneltitle i{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red) }
.unseen ol{ list-style:none; margin:0; padding:6px 0 }
.unseen li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:8px 14px; font:400 .86rem/1.3 var(--f-mono); color:var(--fg);
}
/* The rows are always there; what arrives is the verdict. Each tag lights in
   turn, so a frozen or skipped transition still leaves every row readable. */
.unseen li .tag{ transition:color .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease) }
.js .unseen:not(.is-on) li .tag{ color:var(--fg-dim); background:transparent; border-color:var(--line) }
.unseen li:nth-child(2) .tag{ transition-delay:.35s }
.unseen li:nth-child(3) .tag{ transition-delay:.7s }
.unseen li:nth-child(4) .tag{ transition-delay:1.05s }
.unseen li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tag{
  font:600 .7rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:5px 7px; border-radius:3px; white-space:nowrap;
}
.tag--red{ color:var(--red); background:var(--red-dim); border:1px solid rgba(234,90,85,.35) }
.tag--green{ color:var(--green); background:var(--green-dim); border:1px solid rgba(51,197,82,.35) }
.tag--amber{ color:var(--amber); background:var(--amber-dim); border:1px solid rgba(240,160,30,.4) }
.tag--dim{ color:var(--fg-dim); background:rgba(255,255,255,.04); border:1px solid var(--line) }

/* ------------------------------------------------------------------ monitor */
.monitor{ margin:0; width:var(--mw,320px); flex:none }
.monitor__bezel{
  position:relative; border:1px solid var(--line-2); border-radius:6px; padding:0;
  background:#000; box-shadow:0 24px 48px -28px rgba(0,0,0,.9);
}
.monitor__screen{
  position:relative; aspect-ratio:9/16; border-radius:5px; overflow:hidden; background:#000;
}
.monitor video,.monitor img{ width:100%; height:100%; object-fit:cover }
.monitor__ctl{
  position:absolute; right:12px; bottom:12px; display:flex; gap:6px; z-index:2;
}
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(4,12,26,.72); color:var(--fg); cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, border-color .2s;
}
.icon-btn:hover{ background:rgba(52,229,225,.18); border-color:var(--aqua) }
.icon-btn svg{ width:16px; height:16px }
.icon-btn .i-play{ display:none }
.monitor.is-paused .icon-btn .i-play{ display:block }
.monitor.is-paused .icon-btn .i-pause{ display:none }
.monitor figcaption{
  display:flex; justify-content:space-between; gap:10px; margin-top:12px;
  font:500 .74rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);
}
.monitor figcaption b{ font-family:var(--f-body); letter-spacing:0; text-transform:none; font-size:.9rem; color:var(--fg-muted); font-weight:500 }
.hero .monitor{ --mw:clamp(250px,24vw,350px) }

/* ------------------------------------------------------------------ the path */
.path{
  position:sticky; top:var(--nav-h); z-index:40;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.path ol{
  position:relative; list-style:none; margin:0 auto; padding:0 var(--gut); max-width:var(--max);
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
}
.path li{ position:relative; min-width:0 }
.path li + li{ border-left:1px solid var(--line) }
.path a{
  display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:9px; align-items:center;
  height:var(--path-h); padding:0 14px; align-content:center; text-decoration:none; color:var(--fg-dim);
  transition:background .25s, color .25s;
}
.path a:hover{ background:rgba(255,255,255,.03); color:var(--fg) }
.path .lamp{ grid-row:1 / span 2 }
.path__n{ grid-row:1 / span 2; font:600 .78rem/1 var(--f-mono); letter-spacing:.06em }
.path__name{ display:flex; align-items:center; gap:6px; min-width:0; font:600 .9rem/1.2 var(--f-body); color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* The badge never shares the name's ellipsis: the name gives way, PRO stays whole. */
.path__name > span{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.path__read{ grid-column:3; font:400 .7rem/1.2 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.path li.is-here a{ background:rgba(52,229,225,.06); color:var(--fg) }
.path li.is-here .path__name{ color:var(--fg) }
.path li[data-pro].is-here a{ background:rgba(240,160,30,.08) }
.path__pro{
  font:700 .7rem/1 var(--f-mono); letter-spacing:.1em; color:var(--amber-ink); background:var(--amber);
  padding:2px 4px; border-radius:2px; flex:none;
}
.lamp{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:#22344d; box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
}
.lamp--green{ background:var(--green); box-shadow:0 0 10px rgba(51,197,82,.7) }
.lamp--red{ background:var(--red); box-shadow:0 0 10px rgba(234,90,85,.7) }
.lamp--amber{ background:var(--amber); box-shadow:0 0 12px rgba(240,160,30,.8) }
.lamp--aqua{ background:var(--aqua); box-shadow:0 0 10px rgba(52,229,225,.7) }
.lamp--red,.lamp--amber{ animation:breathe 2.4s ease-in-out infinite }
@keyframes breathe{ 50%{ opacity:.55 } }
.path__rail{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; pointer-events:none }
.path__fill{
  position:absolute; left:0; top:0; height:100%; width:calc(var(--p,0) * 100%);
  background:var(--aqua);
  transition:background .4s;
}
.path.is-pro .path__fill{ background:var(--amber) }
@media (max-width:1100px){ .path__read{ display:none } .path a{ grid-template-rows:auto } }
@media (max-width:1280px){ .path a{ padding:0 10px; column-gap:7px } .path__name{ font-size:.84rem } }
@media (max-width:760px){
  :root{ --path-h:48px }
  .path ol{ padding:0 }
  .path a{ grid-template-columns:auto auto; justify-content:center; padding:0 4px; column-gap:6px }
  .path__name{ display:none }
  .path__pro{ display:none }
}

/* ------------------------------------------------------------------ sections */
.sec{ padding:clamp(80px,12vw,150px) 0 }
.sec__head{ max-width:900px; margin-bottom:clamp(40px,6vw,72px) }
.sec__head .lede{ margin-top:22px }

/* The line, drawn large. Six nodes on one run; the run turns amber between
   Rename and Seal, which is the stretch only Pro carries. */
.chain{ position:relative; margin:clamp(48px,7vw,88px) 0 0 }
.chain__line{ position:absolute; left:0; right:0; top:10px; height:2px; background:rgba(255,255,255,.1) }
.chain__run{
  position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--aqua) 0 50%, var(--amber) 50% 66.667%, var(--aqua) 66.667% 100%);
  transition:transform 1.6s var(--ease);
}
.chain.is-lit .chain__run{ transform:scaleX(1) }
.chain ol{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) }
.chain a{ display:block; text-decoration:none; padding-right:18px }
.chain b{ display:block; margin-top:22px; font-family:var(--f-display); font-stretch:112%; font-weight:700; font-size:clamp(1rem,1.5vw,1.3rem); letter-spacing:-.01em; color:var(--fg) }
.chain span{ display:block; margin-top:6px; font-size:.95rem; color:var(--fg-muted) }
.chain li.is-pro b{ color:var(--amber) }
.chain a:hover b{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px }
.node{
  display:block; width:22px; height:22px; border-radius:50%;
  background:var(--ground); border:2px solid var(--aqua);
  transition:background .4s var(--ease);
}
.node--green{ border-color:var(--green) }
.node--red{ border-color:var(--red) }
.node--dim{ border-color:#2A3D57 }
.node--amber{ border-color:var(--amber) }
.chain.is-lit .node--green{ background:color-mix(in srgb, var(--green) 40%, var(--ground)) }
.chain.is-lit .node--red{ background:color-mix(in srgb, var(--red) 40%, var(--ground)) }
.chain.is-lit .node--amber{ background:color-mix(in srgb, var(--amber) 45%, var(--ground)) }
@media (max-width:760px){
  .chain__line{ left:10px; right:auto; top:0; bottom:0; width:2px; height:auto }
  .chain__run{ transform:scaleY(0); transform-origin:top;
    background:linear-gradient(180deg, var(--aqua) 0 50%, var(--amber) 50% 66.667%, var(--aqua) 66.667% 100%) }
  .chain.is-lit .chain__run{ transform:scaleY(1) }
  .chain ol{ grid-template-columns:1fr }
  .chain a{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:16px; padding:0 0 22px }
  .chain .node{ grid-row:1 / span 2 }
  .chain b{ margin-top:0 }
}

/* The spine: the same line, carried down the gutter from the chain to the
   download buttons, lit as far as the visitor has read. */
main{ position:relative }
.spine{ position:absolute; z-index:1; width:2px; background:rgba(255,255,255,.11); pointer-events:none; display:none }
.spine.is-on{ display:block }
.spine__fill{
  position:absolute; left:0; top:0; width:100%; height:var(--fill,0px); overflow:hidden;
  background:var(--spine-grad, var(--aqua)); background-size:100% var(--spine-h,100%); background-repeat:no-repeat;
}
.spine__node{
  position:absolute; left:-6px; width:14px; height:14px; border-radius:50%;
  background:var(--ground); border:2px solid rgba(255,255,255,.22); transition:border-color .3s, background .3s;
}
.spine__node.is-on{ border-color:var(--aqua); background:color-mix(in srgb, var(--aqua) 35%, var(--ground)) }
.spine__node.is-pro.is-on{ border-color:var(--amber); background:color-mix(in srgb, var(--amber) 45%, var(--ground)) }
.spine__branch{ position:absolute; overflow:visible; pointer-events:none }
.spine__branch path{ fill:none; stroke:rgba(255,255,255,.11); stroke-width:2; stroke-linecap:round; transition:stroke .4s var(--ease) }
.spine__branch.is-on path{ stroke:var(--aqua) }
.spine__branch.is-pro.is-on path{ stroke:var(--amber) }
/* Below 1100px the stations stack and the instrument sits under the text,
   so there is no gutter for a line to run in; the docked rail, always on
   screen, carries the path there. */
@media (max-width:1100px){ .spine, .spine__branch{ display:none !important } }

/* The stations. Every station is the same instrument with different readings:
   matched rows, the rack's first rule. */
.station{
  position:relative; padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line);
}
.station .wrap:first-child{
  display:grid; grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr); gap:clamp(32px,4.5vw,64px); align-items:start;
}
.station h2{ font-size:clamp(2.6rem,5.4vw,4.4rem) }
.station__tag{ display:flex; align-items:center; gap:12px; margin-top:16px; font-size:.92rem; color:var(--fg-dim) }
.station__promise{ margin-top:18px; font-family:var(--f-display); font-stretch:105%; font-weight:600; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.3; letter-spacing:-.01em; text-wrap:balance }
.station__copy{ margin-top:18px; color:var(--fg-muted); max-width:52ch }
.steps{ list-style:none; margin:28px 0 0; padding:0; counter-reset:s }
.steps li{ padding:11px 0; border-top:1px solid var(--line); color:var(--fg); font-size:.98rem }
.station__note{ margin-top:26px; font-size:.92rem; color:var(--fg-muted) }
.station__cost{ display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap; font-size:.92rem; color:var(--fg-muted) }

.station__stage{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3vw,36px); align-items:start }
.station__stage .monitor{ --mw:clamp(196px,15.5vw,232px) }

/* Instruments: one per tool, drawn from the same vocabulary. */
.inst{ border:1px solid var(--line); border-radius:var(--r); background:rgba(7,21,39,.72); overflow:hidden; min-width:0 }
.inst__bar{
  display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 14px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.inst__bar .readlabel{ flex:none; white-space:nowrap }
.inst__body{ padding:clamp(16px,2vw,24px) }
.inst svg text{ font-family:var(--f-mono) }

/* Station reveal: the line draws, then the station resolves. */
.station .inst, .station .monitor{ opacity:.3; transform:translateY(18px); filter:blur(4px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease) }
.station .monitor{ transition-delay:.12s }
.station.is-lit .inst, .station.is-lit .monitor{ opacity:1; transform:none; filter:none }
.station::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--aqua); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.station.is-lit::before{ transform:scaleX(1) }
.station--pro::before{ background:var(--amber) }
.no-js .station .inst, .no-js .station .monitor{ opacity:1; transform:none; filter:none }

/* 01 roads */
.roads text{ font-size:10px; letter-spacing:.08em; fill:var(--fg-dim) }
.roads .t-strong{ fill:var(--fg); font-weight:600; font-size:11px }
.roads .box{ fill:rgba(255,255,255,.03); stroke:var(--line-2) }
.roads .box-lit{ fill:rgba(52,229,225,.07); stroke:rgba(52,229,225,.5) }
.roads .lane{ fill:none; stroke-linecap:round }

/* 02 the convention, taken apart, and a tester that holds a name to it */
.fields{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px }
.field-cell[data-f="4"]{ grid-column:span 2 }
.field-cell{ border:1px solid var(--line-2); border-radius:3px; padding:9px 8px 8px; min-width:0; background:rgba(255,255,255,.02); transition:border-color .25s, background .25s }
.field-cell b{ display:block; font:600 .92rem/1.2 var(--f-mono); color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.field-cell span{ display:block; margin-top:7px; font:500 .7rem/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim) }
.field-cell em{ display:block; margin-top:3px; font:400 .7rem/1.2 var(--f-mono); font-style:normal; color:var(--fg-dim); opacity:.8 }
.field-cell.ok{ border-color:rgba(51,197,82,.5); background:var(--green-dim) }
.field-cell.bad{ border-color:rgba(234,90,85,.6); background:var(--red-dim) }
.field-cell.bad b{ color:var(--red) }
.tester{ margin-top:18px }
.tester label{ display:block; margin-bottom:8px }
.tester__row{ display:flex; gap:8px; align-items:stretch }
.tester input{
  flex:1; min-width:0; height:48px; padding:0 14px; border-radius:var(--r);
  border:1px solid var(--line-2); background:#030a16; color:var(--fg);
  font:500 .95rem/1 var(--f-mono); caret-color:var(--aqua);
}
.tester input:focus{ outline:none; border-color:var(--aqua); box-shadow:0 0 0 3px rgba(52,229,225,.18) }
.tester input::placeholder{ color:#6D82A3 }
.tester__verdict{ display:flex; align-items:center; gap:10px; margin-top:12px; min-height:26px; font-size:.92rem; color:var(--fg-muted) }
.tester__try{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.chip{
  font:500 .74rem/1 var(--f-mono); padding:7px 9px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line-2); background:transparent; color:var(--fg-muted);
}
.chip:hover{ border-color:var(--aqua); color:var(--fg) }

/* 03 roll call board */
.board{ display:grid; grid-template-columns:44px repeat(3,minmax(0,1fr)); gap:6px }
.board__h{ font:500 .7rem/1 var(--f-mono); letter-spacing:.12em; color:var(--fg-dim); text-transform:uppercase; padding:4px 2px }
.board__d{ font:600 .74rem/1 var(--f-mono); color:var(--fg-dim); display:flex; align-items:center }
.slot{
  min-height:56px; border-radius:3px; padding:8px 9px; border:1px solid var(--line); min-width:0;
  font:400 .7rem/1.3 var(--f-mono); color:var(--fg-muted); background:rgba(255,255,255,.02);
}
.slot b{ display:block; color:var(--fg); font-weight:600; font-size:.74rem; margin-bottom:3px }
.slot span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.slot--here{ border-color:rgba(51,197,82,.45); background:var(--green-dim) }
.slot--miss{ border-color:rgba(234,90,85,.55); background:repeating-linear-gradient(135deg, rgba(234,90,85,.16) 0 6px, rgba(234,90,85,.05) 6px 12px) }
.slot--miss b{ color:var(--red) }
.slot--later{ border-style:dashed; color:var(--fg-dim) }
.legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px }
.legend span{ display:inline-flex; align-items:center; gap:7px; font:500 .7rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim) }
.legend i{ width:10px; height:10px; border-radius:2px }

/* 04 rename: the amber station */
.station--pro{
  background:
    radial-gradient(50% 60% at 85% 20%, rgba(240,160,30,.10), transparent 70%),
    linear-gradient(rgba(240,160,30,.025), rgba(240,160,30,.025));
}
.station--pro .station--pro .station__stage{ grid-template-columns:minmax(0,1fr) }
.station--pro .inst{ border-color:rgba(240,160,30,.32) }
.conform{ width:100%; border-collapse:collapse }
.conform th{ text-align:left; font:500 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); padding:0 10px 10px 0; border-bottom:1px solid var(--line-2) }
.conform td{ padding:11px 10px 11px 0; border-bottom:1px solid var(--line); vertical-align:middle }
.conform td:last-child,.conform th:last-child{ padding-right:0; text-align:right }
.conform .fname{ display:block; font:500 .86rem/1.35 var(--f-mono); color:var(--fg); overflow-wrap:anywhere }
.conform .where{ display:block; margin-top:5px; font:400 .8rem/1.35 var(--f-body); color:var(--fg-dim) }
.conform tr.is-locked .fname{ color:var(--fg-dim) }
.conform .why{ font-size:.82rem; color:var(--fg-muted) }
.conform__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);
}
.score{ display:flex; align-items:baseline; gap:10px; font-size:.92rem; color:var(--fg-muted) }
.score b{ font-family:var(--f-display); font-stretch:125%; font-weight:800; font-size:1.9rem; color:var(--fg); letter-spacing:-.02em }
.score b.ok{ color:var(--green) }
.journal{ margin-top:12px; min-height:20px; font:400 .76rem/1.4 var(--f-mono); color:var(--fg-dim) }
.journal.is-on{ color:var(--amber) }
.demo-note{ margin-top:10px; font-size:.8rem; color:var(--fg-dim) }

/* 05 seal */
.seal{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:22px; align-items:center }
.seal ul{ list-style:none; margin:0; padding:0 }
.seal li{ padding:8px 0; border-top:1px solid var(--line); font:400 .78rem/1.3 var(--f-mono); color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.seal__note{ margin-top:14px; font-size:.86rem; color:var(--fg-muted) }
@media (max-width:520px){ .seal{ grid-template-columns:1fr } .seal svg{ width:140px } }

/* 06 vendor packs */
.vendors{ width:100%; border-collapse:collapse }
.vendors th{ text-align:left; font:500 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); padding:0 10px 10px 0; border-bottom:1px solid var(--line-2) }
.vendors td{ padding:11px 10px 11px 0; border-bottom:1px solid var(--line); font:400 .84rem/1.3 var(--f-mono) }
.vendors td:last-child,.vendors th:last-child{ text-align:right; padding-right:0 }
.vendors .road{ color:var(--fg-dim) }

/* ------------------------------------------------------------------ two jobs */
.jobs{ display:grid; grid-template-columns:1.15fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.job{ background:var(--ground-2); padding:clamp(28px,4vw,52px) }
.job h3{ font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.08 }
.job p{ margin-top:16px; color:var(--fg-muted); max-width:52ch }
.job__who{ margin-bottom:18px }
.job__eg{ margin-top:24px; padding:14px 16px; border-radius:3px; background:#030a16; border:1px solid var(--line); font:400 .82rem/1.7 var(--f-mono); color:var(--fg-muted); overflow-x:auto }
.job__eg b{ color:var(--aqua); font-weight:500 }
@media (max-width:860px){ .jobs{ grid-template-columns:1fr } }

/* ------------------------------------------------------------------ pricing */
.offer{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:20px; align-items:stretch }
.pane{ border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; background:rgba(7,21,39,.6) }
.pane--free{ border-top:2px solid var(--green) }
.pane--pro{
  border:1px solid rgba(240,160,30,.45); border-top:2px solid var(--amber);
  background:radial-gradient(80% 60% at 100% 0%, rgba(240,160,30,.12), transparent 70%), #0C1622;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.pane__name{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-stretch:118%; font-weight:800; font-size:1.3rem; letter-spacing:-.01em }
.pane__sub{ margin-top:8px; color:var(--fg-muted) }
.pane ul{ list-style:none; margin:24px 0 0; padding:0 }
.pane li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; padding:10px 0; border-top:1px solid var(--line); color:var(--fg-muted); font-size:.96rem }
.pane li b{ color:var(--fg); font-weight:600 }
.pane li svg{ width:16px; height:16px; margin-top:4px; color:var(--green) }
.pane--pro li svg{ color:var(--amber) }
.price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-top:26px }
.price b{ font-family:var(--f-display); font-stretch:125%; font-weight:800; font-size:clamp(3rem,5.6vw,4.6rem); line-height:.9; letter-spacing:-.04em; color:var(--fg) }
.price span{ color:var(--fg-muted) }
.price-alt{ margin-top:12px; padding:12px 14px; border:1px dashed rgba(240,160,30,.4); border-radius:3px; color:var(--fg-muted); font-size:.95rem }
.price-alt b{ color:var(--amber); font-weight:600 }
.pane__act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px }
.fine{ margin-top:auto; padding-top:24px; font-size:.84rem; line-height:1.6; color:var(--fg-dim) }
.fine a{ color:var(--fg-muted) }
@media (max-width:960px){ .offer{ grid-template-columns:1fr } }

/* ------------------------------------------------------------------ nothing leaves */
.vow{ padding:clamp(90px,13vw,170px) 0; text-align:left; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.vow .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start }
.vow h2{ font-size:clamp(2.6rem,6.4vw,5.6rem); max-width:10ch; position:sticky; top:calc(var(--nav-h) + var(--path-h) + 32px) }
.vow__rack{ margin:0; border-bottom:1px solid var(--line) }
.vow__rack div{ display:grid; grid-template-columns:minmax(0,15ch) minmax(0,1fr); gap:24px; padding:22px 0; border-top:1px solid var(--line) }
.vow__rack dt{ font-family:var(--f-display); font-stretch:110%; font-weight:700; font-size:1.12rem; line-height:1.3; color:var(--fg) }
.vow__rack dd{ margin:0; color:var(--fg-muted); font-size:.98rem }
@media (max-width:860px){
  .vow .wrap{ grid-template-columns:1fr }
  .vow h2{ position:static }
  .vow__rack div{ grid-template-columns:1fr; gap:6px }
}

/* ------------------------------------------------------------------ DailiesDrop */
.dd{ padding:clamp(80px,12vw,150px) 0; background:
  radial-gradient(60% 70% at 80% 50%, rgba(27,116,232,.22), transparent 70%), var(--ground-2) }
.dd .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,6vw,96px); align-items:center }
.dd .monitor{ --mw:clamp(220px,22vw,300px) }
.dd .monitor__bezel{ border:0; background:none; box-shadow:none; border-radius:0 }
.dd .monitor__screen{ border-radius:6px; -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent) }
.dd__status{ display:flex; align-items:center; gap:10px; margin-top:24px; font:500 .95rem/1.45 var(--f-body); color:var(--fg-muted) }
.dd__act{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.dd .btn--blue{ --b:#56C8F5; --i:#02182A }

/* ------------------------------------------------------------------ close */
.close{ padding:clamp(90px,13vw,170px) 0 clamp(60px,8vw,100px) }
.close h2{ font-size:clamp(2.8rem,5.4vw,5rem); max-width:11ch }
.close__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center }
.handover{ border:1px solid rgba(51,197,82,.35); border-radius:var(--r); background:rgba(5,14,28,.94); box-shadow:0 30px 60px -30px rgba(0,0,0,.85) }
.handover__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line) }
.handover__head .readlabel{ color:var(--amber); flex:none }
.handover ol{ list-style:none; margin:0; padding:6px 0 }
.handover li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:9px 14px; font:400 .86rem/1.3 var(--f-mono) }
.handover li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.handover__foot{ padding:10px 14px 14px; border-top:1px solid var(--line); font-size:.82rem; color:var(--fg-dim) }
@media (max-width:960px){ .close__grid{ grid-template-columns:1fr } }
@media (max-width:680px){ .handover li{ grid-template-columns:1fr; gap:6px } .handover li .tag{ justify-self:start } }
.dl{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px }
.close .dl{ display:grid; grid-template-columns:minmax(0,340px); gap:10px }
.close .dl .btn{ justify-content:flex-start }
.close .dl .btn small{ margin-left:auto }
.dl__notes{ margin-top:22px; max-width:70ch; color:var(--fg-dim); font-size:.9rem }
.dl__notes code{ font-family:var(--f-mono); color:var(--fg-muted); background:rgba(255,255,255,.05); padding:2px 6px; border-radius:3px }

footer{ border-top:1px solid var(--line); padding:36px 0 44px; color:var(--fg-dim); font-size:.86rem }
footer .wrap{ display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; justify-content:space-between }
footer nav{ display:flex; flex-wrap:wrap; gap:8px 22px }
footer a{ text-decoration:none; color:var(--fg-muted) }
footer a:hover{ color:var(--fg) }
.foot__brand{ display:flex; align-items:center; gap:10px }
.foot__brand img{ width:26px }

/* ------------------------------------------------------------------ responsive */
@media (max-width:1060px){
  .station .wrap:first-child{ grid-template-columns:1fr }
  .station__stage{ grid-template-columns:minmax(0,1fr) auto }
}
@media (max-width:860px){
  .hero .wrap{ grid-template-columns:1fr }
  .hero__stage{ justify-self:center; width:100% ; display:flex; flex-direction:column; align-items:center; gap:22px }
  .hero .monitor{ --mw:min(64vw,300px) }
  .unseen{ position:static; width:100%; max-width:560px; order:2 }
  .dd .wrap{ grid-template-columns:1fr }
  .dd .monitor{ justify-self:center }
}
@media (max-width:680px){
  .station__stage{ grid-template-columns:1fr }
  .station__stage .monitor{ --mw:min(62vw,240px); justify-self:center }
  .unseen li{ grid-template-columns:1fr; gap:6px }
  .unseen li .tag{ justify-self:start }
  .conform thead{ display:none }
  .conform tr{ display:block; padding:12px 0; border-bottom:1px solid var(--line) }
  .conform td{ display:block; border:0; padding:3px 0; text-align:left !important }
  .btn{ white-space:normal; text-align:left; min-height:50px; padding:10px 18px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .station .inst,.station .monitor{ opacity:1; transform:none; filter:none }
  .station::before{ transform:scaleX(1) }
}
@media (forced-colors:active){
  .lamp{ forced-color-adjust:none }
  .btn{ border:2px solid ButtonText }
}