/* =========================================================
   Loopback: shared styles + CCNA landing page
   Design tokens live in :root. Later pages reuse them.
   ========================================================= */
:root {
  --bg: #EEF3FF;        /* page: pale blue, not white */
  --bg-2: #E1E9FF;      /* bands, inset panels */
  --card: #FFFFFF;
  --ink: #0B1530;
  --ink-2: #44506B;
  --ink-3: #6E7A94;
  --hair: #CDD8F2;
  --grid: #D5E0FA;      /* blueprint grid lines */

  --blue: #1747F5;      /* main color: buttons, cables, packets, accents */
  --blue-ink: #0B2C9F;
  --blue-wash: #DCE5FF;
  --navy: #0A1B55;      /* dark sections and footer */
  --navy-2: #13287A;
  --led: #12C46B;       /* the one accent: link up, correct, highlights */
  --led-wash: #D5F6E4;
  --miss: #C93A2C;      /* wrong answers only */

  --f-display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --gutter: 16px;
  --max: 1200px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-hard: 4px 4px 0 var(--ink);
}
@media (min-width: 900px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.55;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; margin: 0; }
p { margin: 0; }
a { color: var(--blue); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
em { font-style: normal; }
.mono { font-family: var(--f-mono); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .foot :focus-visible { outline-color: var(--led); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }

/* tactile press for anything that should feel physical */
.press { transition: transform .16s var(--ease-spring), box-shadow .16s var(--ease-out), background-color .2s; }
.press:active { transform: translate(2px, 2px) scale(.98); }

/* small uppercase labels (device-printed feel) */
.kicker, .placard-no, .tag, .hub-k, .report-l, .goal-tag, .room-no, .room-soon, .sn-k, .fc-k, .fc-hint, .cd-set span, .field-hint {
  font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 8px var(--gutter-wide, var(--gutter)); padding-top: max(8px, env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.topbar.scrolled { border-bottom-color: var(--hair); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--f-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
/* Loopback logo: the lo0 plate (Loopback0, the interface every CCNA candidate configures) with a link LED */
.wm-mark { width: 38px; height: 38px; flex: none; margin: -2px; }
.wm-text { white-space: nowrap; }
.wm-sub { color: var(--blue); }
/* phones: name stacked over a small mono "CERT GUIDE" so the full name fits */
@media (max-width: 560px) {
  .wordmark { gap: 9px; }
  .wm-mark { width: 36px; height: 36px; }
  .wm-text { display: grid; line-height: 1; }
  .wm-name { font-size: 18px; }
  .wm-sub { font-family: var(--f-mono); font-weight: 700; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
}
.topnav { display: flex; gap: 8px; }
.warm-btn, .lan-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: 10px; font-family: var(--f-display); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.warm-btn { border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); }
.warm-btn:hover { background: var(--bg-2); }
.warm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.warm-btn.all .warm-dot { background: var(--led); }
.warm-count { font-size: 12px; font-weight: 700; }
/* LAN: the site switcher, drawn as a little switch faceplate with four jacks (the first one linked up) */
.lan-btn { border: 1.5px solid var(--ink); border-radius: 10px; background: var(--navy); color: #fff; padding: 0 12px 0 10px; gap: 9px; }
.lan-btn:hover { background: var(--navy-2); }
.lan-label { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; }
.lan-icon { display: inline-grid; grid-template-columns: repeat(4, 7px); gap: 3px; padding-top: 4px; }
.lan-icon i { position: relative; width: 7px; height: 7px; border: 1.5px solid #9DB4FF; border-radius: 1.5px; }
.lan-icon i::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -1.5px; height: 2px; background: var(--navy); }
.lan-icon i::before { content: ""; position: absolute; left: 1px; top: -5px; width: 3px; height: 2px; border-radius: 1px; background: #3A4F99; }
.lan-icon i.up { border-color: #fff; }
.lan-icon i.up::before { background: var(--led); }
.lan-btn:hover .lan-icon i::after { background: var(--navy-2); }
@media (max-width: 420px) {
  .warm-label { display: none; }
  .wordmark { white-space: nowrap; }
}
/* very small phones: the LAN button drops its label (the button's aria-label still names it) */
@media (max-width: 345px) {
  .lan-btn { padding: 0 10px; }
  .lan-label { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 22px;
  border-radius: var(--r-s); border: 2px solid var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 16px;
  letter-spacing: -.01em; text-decoration: none; text-align: center; box-shadow: var(--shadow-hard);
}
.btn:active { box-shadow: 1px 1px 0 var(--ink); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-ink); }
.btn-ghost { background: var(--card); color: var(--ink); }
.btn-ghost:hover { background: var(--bg-2); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.link-btn { white-space: nowrap; background: none; border: 0; padding: 10px 4px; min-height: 44px; color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.link-btn:hover { opacity: 1; }

/* ---------- hero ----------
   Round 7 (Nate: "neat, stylish, professional"): one grid on every screen.
   Phone and tablet: copy, then the rig, then the fine print, stacked with even rhythm.
   Desktop: copy left at the logo's gutter, the rig right, the fine print as a quiet base row
   under a hairline. The headline is sized from its own column (container units), so
   "Pass the CCNA." / "First try." always sits on exactly two lines. */
.hero { padding: 28px var(--gutter) 40px; display: grid; gap: 32px; }
.hero-copy { min-width: 0; container-type: inline-size; display: grid; justify-items: start; }
.hero-graphic { min-width: 0; }
.hero-tag { margin-bottom: 22px; }
.hero-title { font-size: clamp(40px, 12.6cqi, 88px); line-height: .94; letter-spacing: -.04em; }
.ht-line { display: block; white-space: nowrap; }
.hero-title em { color: var(--blue); font-style: normal; }
.hero-sub { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 31em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; width: 100%; }
.hero-actions .btn { flex: 1 1 220px; }
.fineprint { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 62em; }
.hero-fine { padding-top: 16px; border-top: 1px solid var(--hair); }
@media (min-width: 600px) {
  .hero { padding-top: 40px; gap: 40px; }
  .hero-actions { width: auto; }
  .hero-actions .btn { flex: 0 0 auto; }
  .hero-sub { font-size: 19px; }
}
@media (min-width: 1000px) {
  /* The field keeps the height it had as a square (half the 1200px column, or the screen height
     if that's shorter) and is up to 1.2x wider (round 5). */
  .hero {
    --hh: min((min(100vw, 1200px) - 2 * var(--gutter) - 56px) / 2, 100svh - 210px);
    max-width: 1440px; margin: 0 auto;
    grid-template-columns: minmax(400px, 1fr) minmax(0, calc(var(--hh) * 1.2));
    grid-template-rows: 1fr auto;
    column-gap: clamp(48px, 5vw, 96px); row-gap: 32px; align-items: center;
    min-height: calc(100svh - 64px); padding-top: 24px; padding-bottom: 28px;
  }
  .hero-copy { padding-bottom: 8px; }
  .hero-graphic { width: 100%; }
  .hero-fine { grid-column: 1 / -1; }
}
/* mid desktops: give the headline a little more of the row */
@media (min-width: 1000px) and (max-width: 1259px) { .hero { grid-template-columns: minmax(440px, 1fr) minmax(0, calc(var(--hh) * 1.06)); } }
/* clear the section rail on the right */
@media (min-width: 1360px) { .hero { padding-right: max(var(--gutter), 76px - (100vw - 1440px) / 2); } }
/* very wide screens: the hero and the top bar share one 1440px frame, so the logo and the headline line up */
@media (min-width: 1440px) { :root { --gutter-wide: calc((100vw - 1440px) / 2 + var(--gutter)); } }


/* the decorative network: a framed "rig" with a header strip, the field, a hint strip */
.rig { border: 2px solid var(--ink); border-radius: var(--r-l); overflow: hidden; background: var(--card); box-shadow: 8px 8px 0 var(--ink); }
.rig-bar, .field-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; height: 40px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rig-bar { background: var(--navy); color: #fff; height: 44px; padding-right: 6px; }
.rig-id { color: #C3CEEE; }
/* test day lives in the rig's status strip: a chip with the TTL, the date input invisible on top of it */
.rig-ttl { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1.5px solid #3A4F99; border-radius: 6px; color: #fff; white-space: nowrap; cursor: pointer; }
.rig-ttl:hover { border-color: #9DB4FF; background: var(--navy-2); }
.rig-ttl:focus-within { outline: 3px solid var(--led); outline-offset: 2px; }
.rig-ttl i { width: 8px; height: 8px; border-radius: 2px; background: #9DB4FF; flex: none; }
.rig-ttl.set i { background: var(--led); }
.rig-ttl input { position: absolute; inset: -6px -2px; width: calc(100% + 4px); height: 44px; opacity: 0; cursor: pointer; border: 0; padding: 0; color-scheme: dark; }
.rig-ttl input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.field-hint { margin: 0; justify-content: flex-start; color: var(--blue-ink); border-top: 2px solid var(--ink); background: var(--card); font-family: var(--f-mono); }
.field-hint::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); flex: none; }

.field {
  position: relative; aspect-ratio: 4 / 5; container-type: inline-size;
  background-color: var(--blue-wash);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 6.25cqw 6.25cqw; background-position: -1px -1px;
  touch-action: pan-y; overflow: hidden;
}
@media (min-width: 600px) and (max-width: 999px) { .field { aspect-ratio: 3 / 2; } }
/* desktop: fixed height (the old square's), width from the hero grid; 4px is the rig's border */
@media (min-width: 1000px) { .field { aspect-ratio: auto; height: calc(var(--hh) - 4px); } }
.field-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.field-links line { stroke-linecap: round; fill: none; }
.field-links .lk-case { stroke: var(--ink); stroke-width: 6; }
.field-links .lk { stroke: var(--blue); stroke-width: 3; }
.field-links .lk-soft { stroke: #8EA6F5; stroke-width: 2; stroke-dasharray: 2 6; }
.field-links .port { fill: var(--card); stroke: var(--ink); stroke-width: 2; transition: fill .2s; }
.field-links .port.on { fill: var(--led); }
.field-links .pk rect { fill: var(--blue); stroke: var(--ink); stroke-width: 1.6; }
.field-links .pk text { fill: #fff; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.field-links .pk.hot rect { fill: var(--led); }
.field-links .pk.hot text { fill: var(--ink); }

.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 3.6cqw; padding: 3cqw 4.2cqw 3cqw 3cqw;
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-m); box-shadow: var(--shadow-hard);
  z-index: 2; width: max-content;
}
.hub-logo { width: 31cqw; height: auto; display: block; }
.hub-text { display: grid; gap: 0; }
.hub-k { font-size: clamp(9px, 2.7cqw, 12px); color: var(--ink-3); }
.hub-v { font-family: var(--f-display); font-weight: 800; font-size: clamp(14px, 4.6cqw, 24px); letter-spacing: -.02em; margin-bottom: .8cqw; white-space: nowrap; }
.hub-v.mono { font-family: var(--f-mono); font-weight: 700; font-size: clamp(12px, 3.9cqw, 19px); letter-spacing: 0; }
/* fixed width, so the hub never changes size whatever it receives */
.hub-rx { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(9.5px, 2.8cqw, 13px); color: var(--ink-2); white-space: nowrap; }
.hub-rx [data-rx] { display: inline-block; width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.hub-led { width: 8px; height: 8px; border-radius: 50%; background: var(--led); transition: box-shadow .2s, background-color .2s; flex: none; }
.hub-led.blink { box-shadow: 0 0 0 4px var(--led-wash); }
@container (min-width: 560px) {
  .hub { gap: 2.6cqw; padding: 2.2cqw 3cqw 2.2cqw 2.2cqw; }
  .hub-logo { width: 24cqw; max-width: 190px; }
  .hub-k { font-size: clamp(9.5px, 1.9cqw, 12px); }
  .hub-v { font-size: clamp(15px, 3.4cqw, 25px); }
  .hub-v.mono { font-size: clamp(13px, 2.8cqw, 19px); }
  .hub-rx { font-size: clamp(10px, 2cqw, 13px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hub.rx { animation: hubbump .28s var(--ease-spring); }
  @keyframes hubbump { 50% { transform: translate(-50%, -50%) scale(1.025); } }
}

/* device faceplates: icon, name, a row of port LEDs; size follows the field */
.dev {
  --d: clamp(54px, 16.5cqw, 66px);
  position: absolute; left: 0; top: 0; z-index: 3;
  width: var(--d); height: calc(var(--d) * 1.16); margin: calc(var(--d) * -.58) 0 0 calc(var(--d) * -.5); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--d) * .04);
  background: var(--card); border: 2px solid var(--ink); border-radius: calc(var(--d) * .2); box-shadow: 3px 3px 0 var(--ink);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: box-shadow .16s var(--ease-out), background-color .2s;
}
@container (min-width: 560px) { .dev { --d: clamp(58px, 11.5cqw, 82px); } }
.dev svg { width: 50%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dev-l { font-size: clamp(9.5px, calc(var(--d) * .155), 12px); font-weight: 700; letter-spacing: .04em; line-height: 1; }
.dev-ports { display: flex; gap: 3px; margin-top: calc(var(--d) * .04); }
.dev-ports i { width: 5px; height: 5px; border-radius: 1.5px; background: var(--hair); }
.dev-ports i:nth-child(2) { background: var(--led); }
.dev-ports i.on { background: var(--led); }
.dev.dragging { cursor: grabbing; box-shadow: 7px 7px 0 var(--ink); z-index: 4; }
.dev.fire { background: var(--led-wash); }
.dev:active:not(.dragging) { box-shadow: 1px 1px 0 var(--ink); }

/* ---------- bands: every section is a full-width band with its own surface ----------
   Down the page: dotted pale (hero), paper, wash, paper, navy, wash, blue, paper, pale.
   A 2px ink rule separates every band, like the edge of a rack unit. */
.band { position: relative; border-top: 2px solid var(--ink); }
.band:first-child { border-top: 0; }
.b-hero { background: var(--bg); }
/* dot grid behind the network only, faded away from the headline */
.b-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#C3D1F7 1.2px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 80%); mask-image: linear-gradient(180deg, transparent 45%, #000 80%);
}
@media (min-width: 1000px) { .b-hero::before { -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 70%); mask-image: linear-gradient(90deg, transparent 38%, #000 70%); } }
.b-hero .hero { position: relative; }
.b-paper { background: var(--card); }
.b-pale { background: var(--bg); }
.b-wash { background: var(--bg-2); }
.b-navy { background: var(--navy); color: #fff; }
.b-blue { background: var(--blue); color: #fff; }
/* paper bands carry a faint blueprint grid, fading out toward the middle */
.b-paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--bg-2) 1px, transparent 1px), linear-gradient(90deg, var(--bg-2) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000); mask-image: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000);
}
.wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter) 72px; }
@media (min-width: 900px) { .wrap { padding: 104px var(--gutter) 112px; } }
.copy { min-width: 0; }
/* stations: copy on the left, the sample on the right */
.split { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .split-plan { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
  .split-plan .report { margin-top: 66px; position: sticky; top: 110px; }
}
/* full-width sections: title left, lede right */
.head-row { display: grid; gap: 14px; margin-bottom: 32px; }
.head-row .ex-lede { margin-top: 0; }
@media (min-width: 1000px) { .head-row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: end; margin-bottom: 44px; } }

.placard { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; margin-bottom: 18px; background: var(--card); }
.placard-no { background: var(--blue); color: #fff; padding: 6px 10px; font-weight: 700; display: flex; align-items: center; }
.placard-name { padding: 6px 12px; font-family: var(--f-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; }
.placard-dark { border-color: #fff; background: transparent; }
.placard-dark .placard-no { background: #fff; color: var(--ink); }
.placard-dark .placard-name { color: #fff; }
.ex-title { font-size: clamp(34px, 8vw, 60px); max-width: 15em; text-wrap: balance; }
.split .ex-title { font-size: clamp(34px, 8vw, 52px); }
.ex-title em { color: var(--blue); }
.ex-lede { margin-top: 14px; font-size: 18px; color: var(--ink-2); max-width: 38em; }
.source { margin-top: 24px; font-size: 13px; color: var(--ink-3); max-width: 62em; }
.source a { color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; }
.tag-soft { background: var(--bg-2); color: var(--blue-ink); }

/* "what the full station does": a spec plate under each station's copy */
.spec { list-style: none; margin: 26px 0 0; padding: 0; display: grid; border-top: 2px solid var(--ink); max-width: 30em; }
.spec li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 16px; color: var(--ink); }
.spec .mono { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-ink); }
.b-wash .spec li { border-bottom-color: #C3D1F5; }

/* dark bands (navy and blue) */
[data-dark] .ex-title em { color: var(--led); }
[data-dark] .ex-lede { color: #C9D4F4; }
[data-dark] .spec { border-top-color: #fff; }
[data-dark] .spec li { color: #fff; border-bottom-color: rgba(255, 255, 255, .2); }
[data-dark] .spec .mono { color: var(--led); }
[data-dark] .source { color: #C9D4F4; }
[data-dark] .source a { color: #fff; }
[data-dark] :focus-visible { outline-color: var(--led); }
.b-blue .ex-title em { color: #fff; text-decoration: underline; text-decoration-color: var(--led); text-decoration-thickness: .09em; text-underline-offset: .12em; }
.b-blue .ex-lede, .b-blue .source { color: #E2E8FF; }
.b-blue :focus-visible { outline-color: #fff; }

/* blueprint */
.bp { display: grid; gap: 14px; margin-top: 28px; }
.bp-bar { display: flex; gap: 5px; height: 72px; }
.bp-seg {
  flex: var(--w) 1 0; min-width: 0; border: 2px solid var(--ink); border-radius: 8px; background: var(--card);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 7px 8px; text-align: left;
}
.bp-seg .seg-n { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); font-weight: 700; }
.bp-seg .seg-name { display: none; }
.bp-seg .seg-w { font-family: var(--f-mono); font-size: 15px; font-weight: 700; }
.bp-seg[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: var(--shadow-hard); }
.bp-seg[aria-selected="true"] .seg-n { color: #C7D3FF; }
.bp-seg { position: relative; overflow: hidden; }
/* thin LED strip along the bottom of each domain: how much of it you've marked solid */
.seg-solid { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--bg-2); }
.seg-solid i { display: block; height: 100%; background: var(--led); transform-origin: left; transform: scaleX(var(--s, 0)); transition: transform .5s var(--ease-out); }
.bp-seg[aria-selected="true"] .seg-solid { background: var(--blue-ink); }
.bp-detail { border: 2px solid var(--ink); border-radius: var(--r-m); padding: 20px; background: var(--card); display: grid; gap: 14px; }
.bp-detail .bp-k { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-ink); font-weight: 700; }
.bp-detail h3 { font-size: 26px; margin-top: 4px; }
.bp-top { display: grid; gap: 12px; }
.bp-sum { display: grid; gap: 6px; }
.bp-count { font-size: 13px; font-weight: 700; }
.bp-pips { display: flex; flex-wrap: wrap; gap: 4px; }
.bp-pips i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink); background: var(--card); transition: background-color .25s; }
.bp-pips i.on { background: var(--led); }
.bp-next { font-size: 15px; color: var(--ink-2); padding: 10px 12px; background: var(--bg); border-radius: 8px; border-left: 4px solid var(--blue); }
.bp-next .mono { font-weight: 700; color: var(--blue-ink); margin-right: 4px; }
.obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.obj {
  width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; grid-template-areas: "n t box" "n k box"; column-gap: 10px; row-gap: 6px; align-items: start;
  padding: 11px 12px; min-height: 56px; text-align: left; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card); color: var(--ink);
}
.obj:hover { background: var(--bg); }
.obj-n { grid-area: n; font-size: 13px; font-weight: 700; color: var(--blue-ink); padding-top: 2px; }
.obj-t { grid-area: t; display: grid; gap: 2px; }
.obj-t b { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; line-height: 1.25; }
.obj-t span { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.obj-t span:empty { display: none; }
.obj-k { grid-area: k; justify-self: start; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; }
.k-cli { background: var(--navy); color: #fff; }
.k-gui { background: var(--bg-2); color: var(--blue-ink); }
.k-know { border: 1px solid var(--hair); color: var(--ink-3); }
.obj-box { grid-area: box; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 6px; display: grid; place-items: center; margin-top: 1px; }
.obj[aria-pressed="true"] { background: var(--led-wash); border-color: var(--ink); }
.obj[aria-pressed="true"] .obj-box { background: var(--led); }
.obj[aria-pressed="true"] .obj-box::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-1px) rotate(-45deg); }
.bp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.bp-legend .obj-k { display: inline-block; min-width: 76px; text-align: center; margin-right: 8px; }
@media (min-width: 760px) { .bp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; } .bp-legend .obj-k { min-width: 0; } }
@media (min-width: 760px) {
  .bp-bar { height: 92px; gap: 6px; }
  .bp-seg { padding: 10px 12px; }
  .bp-seg .seg-w { font-size: 20px; }
  .bp-seg .seg-name { display: inline; font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--ink-2); margin-left: 4px; text-transform: none; letter-spacing: 0; }
  .bp-seg[aria-selected="true"] .seg-name { color: #fff; }
  .bp-detail { padding: 26px 30px; }
  .bp-top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .bp-sum { justify-items: end; }
  .bp-pips { justify-content: flex-end; max-width: 260px; }
}
@media (min-width: 1000px) { .obj-list { grid-template-columns: 1fr 1fr; } }

/* station 01: practice question */
.qcard { max-width: 760px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-m); box-shadow: 6px 6px 0 var(--blue); padding: 20px; display: grid; gap: 16px; }
.qcard-head { display: flex; flex-wrap: wrap; gap: 8px; }
.q-stem { font-size: 18px; line-height: 1.5; }
.q-stem .mono, .ex-lede .mono { font-size: .9em; background: var(--bg-2); padding: 1px 5px; border-radius: 5px; color: var(--blue-ink); }
.q-opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; min-height: 52px; padding: 12px 14px;
  border-radius: var(--r-s); background: var(--card); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 16px;
}
.opt:hover { background: var(--bg); }
.opt-l { font-family: var(--f-mono); font-weight: 700; font-size: 13px; width: 24px; height: 24px; flex: none; border-radius: 6px; display: grid; place-items: center; background: var(--bg-2); color: var(--blue-ink); }
.opt.right { background: var(--led-wash); }
.opt.right .opt-l { background: var(--led); color: var(--ink); }
.opt.wrong { border-color: var(--miss); box-shadow: 3px 3px 0 var(--miss); color: var(--ink-2); }
.opt.wrong .opt-l { background: #FBE1DE; color: var(--miss); }
.opt:disabled { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .opt.wrong { animation: nudge .3s; }
  @keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
}
.q-why { font-size: 16px; color: var(--ink-2); padding-left: 12px; border-left: 3px solid var(--blue); }
.q-why:empty { display: none; }
.q-why strong { color: var(--ink); }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--hair); }
.q-foot .btn { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.q-score { font-size: 12px; color: var(--ink-2); }
@media (min-width: 760px) { .qcard { padding: 28px; } .q-stem { font-size: 20px; } }

/* station 02: flashcards */
.deck { max-width: 560px; display: grid; gap: 16px; }
.fcard {
  position: relative; height: 230px; padding: 0; border: 0; background: none; perspective: 1000px; text-align: left;
}
.fc-side {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  border: 2px solid var(--ink); border-radius: var(--r-m); box-shadow: 6px 6px 0 var(--ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .45s var(--ease-out);
}
.fc-front { background: var(--card); }
.fc-back { background: var(--blue); color: #fff; transform: rotateY(180deg); }
.fcard.flipped .fc-front { transform: rotateY(-180deg); }
.fcard.flipped .fc-back { transform: rotateY(0); }
@media (prefers-reduced-motion: reduce) { .fc-side { transition: none; } }
.fc-k { color: var(--blue-ink); font-weight: 700; }
.fc-back .fc-k { color: #C7D3FF; }
.fc-q { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -.025em; }
.fc-a { font-size: 44px; font-weight: 700; line-height: 1.1; }
.fc-hint { color: var(--ink-3); font-size: 11px; }
.fc-a.long { font-size: 28px; }
.fc-q.long { font-size: 24px; }
.fc-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-actions .btn { flex: 1; }
.fc-count { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.deck.done .fc-front { background: var(--led-wash); }

/* station 03: terminal */
.term { max-width: 860px; border: 2px solid #fff; border-radius: var(--r-m); background: #050D2E; overflow: hidden; box-shadow: 6px 6px 0 var(--blue); }
.term-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--navy-2); font-size: 12px; color: #C3CEEE; }
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3A4F99; }
.term-dots i:first-child { background: var(--led); }
/* still scrolls (touch, wheel, trackpad), but without the browser's white and grey scrollbars */
.term-out { scrollbar-width: none; }
.term-out::-webkit-scrollbar { display: none; }
.term-out { margin: 0; padding: 14px; height: 260px; overflow: auto; font-size: 12px; line-height: 1.55; color: #D8E0F7; white-space: pre; }
.term-out .t-cmd { color: #fff; font-weight: 700; }
.term-out .t-err { color: #FFB4AA; }
.term-out .t-dim { color: #8C9AC4; white-space: pre-wrap; }
.term-in { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid #22356F; }
.term-in label { color: var(--led); font-weight: 700; font-size: 15px; }
.term-in input { flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 0; color: #fff; font-size: 16px; caret-color: var(--led); }
.term-in input:focus { outline: none; }
.term-in input::placeholder { color: #5A6B9E; }
.term:focus-within { box-shadow: 6px 6px 0 var(--led); }
.term-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 14px 14px; font-size: 12px; color: #8C9AC4; }
.try { min-height: 40px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid #3A4F99; background: var(--navy-2); color: #fff; font-size: 13px; }
.try:hover { border-color: var(--led); }
@media (min-width: 760px) { .term-out { font-size: 13px; height: 300px; } }

/* station 04: subnet check */
.subnet { max-width: 640px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r-m); box-shadow: 6px 6px 0 var(--blue); padding: 20px; display: grid; gap: 16px; }
.sn-prompt { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.sn-net { font-size: 22px; color: var(--blue-ink); background: var(--bg-2); padding: 2px 8px; border-radius: 6px; display: inline-block; margin-top: 4px; }
.sn-fields { display: grid; gap: 12px; }
.sn-field { display: grid; gap: 6px; }
.sn-k { color: var(--ink-2); font-weight: 700; }
.sn-field input { min-height: 50px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--bg); font-size: 18px; }
.sn-field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.sn-field input.ok { border-color: var(--led); background: var(--led-wash); }
.sn-field input.bad { border-color: var(--miss); }
.sn-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sn-actions .btn { flex: 1 1 140px; }
.sn-fb { font-size: 16px; color: var(--ink-2); }
.sn-fb:empty { display: none; }
.sn-fb.ok { color: var(--ink); }
@media (min-width: 640px) { .sn-fields { grid-template-columns: 1fr 1.4fr; } .subnet { padding: 28px; } }

/* why: pay ladder */
.jobs { display: grid; gap: 14px; }
.job {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "role pay" "bar bar" "note note";
  gap: 8px 12px; padding: 18px; border: 2px solid var(--ink); border-radius: var(--r-m); text-decoration: none; color: var(--ink);
  background: var(--card); transition: transform .16s var(--ease-spring), box-shadow .16s var(--ease-out);
}
.job:hover { box-shadow: var(--shadow-hard); transform: translate(-2px, -2px); }
.job:active { transform: translate(1px, 1px); box-shadow: none; }
.job-role { grid-area: role; font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.job-pay { grid-area: pay; font-weight: 700; font-size: 20px; color: var(--blue-ink); }
.job-bar { grid-area: bar; height: 12px; border-radius: 999px; background: var(--bg-2); position: relative; overflow: hidden; }
.job-bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); background: var(--blue); border-radius: 999px; transform-origin: left; }
.job-note { grid-area: note; font-size: 14px; color: var(--ink-2); }
@media (min-width: 900px) { .job { grid-template-columns: minmax(240px, 1.1fr) 2fr auto; grid-template-areas: "role bar pay" "note note note"; align-items: center; padding: 20px 24px; } }

/* plan + report */
.report { display: grid; gap: 10px; padding: 16px 18px; border: 2px dashed var(--blue); border-radius: var(--r-m); background: var(--card); max-width: 560px; }
.report-l { color: var(--blue-ink); font-weight: 700; }
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.report-list li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.report-list li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ink-3); flex: none; }
.report-list li.done { color: var(--ink); }
.report-list li.done::before { background: var(--led); border-color: var(--ink); }
.report-reset { justify-self: start; background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.goals { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.goal { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "n p" "n tag"; gap: 6px 12px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.goal-n { grid-area: n; font-weight: 700; color: var(--blue); font-size: 15px; padding-top: 3px; }
.goal p { grid-area: p; font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -.015em; }
.goal-tag { grid-area: tag; color: var(--ink-3); font-size: 11px; }
@media (min-width: 900px) {
  .goal { grid-template-columns: 64px 1fr 200px; grid-template-areas: "n p tag"; align-items: baseline; padding: 22px 0; }
  .goal p { font-size: 26px; }
  .goal-tag { justify-self: end; }
}

/* stations grid ("Pick a room") */
.plan { display: grid; gap: 14px; }
.room {
  position: relative; display: grid; gap: 6px; align-content: start; min-height: 190px; padding: 20px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow-hard);
}
.room-no { color: var(--blue); font-weight: 700; }
.room-name { font-family: var(--f-display); font-weight: 800; font-size: 26px; letter-spacing: -.025em; line-height: 1.05; }
.room-desc { font-size: 15.5px; color: var(--ink-2); max-width: 22em; position: relative; z-index: 1; }
.room-soon { justify-self: start; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--bg-2); color: var(--blue-ink); font-size: 11px; font-weight: 700; }
.room-toy { position: absolute; right: 16px; bottom: 14px; pointer-events: none; }
.r-cli { background: var(--navy); color: #fff; }
.r-cli .room-no { color: var(--led); }
.r-cli .room-desc { color: #C3CEEE; }
.r-cli .room-soon { background: var(--navy-2); color: #fff; }
.r-tests { background: var(--blue); color: #fff; }
.r-tests .room-no { color: #C7D3FF; }
.r-tests .room-desc { color: #E2E8FF; }
.r-tests .room-soon { background: var(--led); color: var(--ink); }
.rt-tests { display: grid; grid-template-columns: repeat(3, 14px); gap: 5px; }
.rt-tests i { height: 14px; border-radius: 4px; border: 1.5px solid #fff; }
.rt-tests i:nth-child(2), .rt-tests i:nth-child(4) { background: var(--led); border-color: var(--led); }
.rt-cards { font-size: 40px; font-weight: 700; color: var(--blue); background: var(--bg-2); padding: 4px 10px; border-radius: 8px; transform: rotate(-6deg); }
.rt-cli { font-size: 22px; font-weight: 700; color: var(--led); display: flex; align-items: center; gap: 4px; }
.rt-cli i { width: 11px; height: 22px; background: var(--led); }
@media (prefers-reduced-motion: no-preference) { .rt-cli i { animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }
.rt-review { font-size: 34px; font-weight: 700; color: var(--blue); border: 2px dashed var(--blue); border-radius: 8px; padding: 0 8px; }
@media (min-width: 760px) { .plan { grid-template-columns: 1fr 1fr; } .room { min-height: 220px; padding: 24px; } }
.nowrap { white-space: nowrap; }

/* ---------- footer (navy) ---------- */
/* compact: the countdown and the brand side by side on desktop, stacked tight on phones (round 6) */
.foot { background: var(--navy); color: #fff; padding: 28px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border-radius: var(--r-l) var(--r-l) 0 0; }
.foot > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.foot-grid { display: grid; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #22356F; }
.countdown { display: grid; gap: 12px; align-content: start; }
.cd-main { display: flex; align-items: center; gap: 16px; }
.cd-n { font-family: var(--f-display); font-weight: 800; font-size: clamp(64px, 20vw, 112px); line-height: .85; letter-spacing: -.045em; color: var(--led); }
.cd-txt { display: grid; gap: 2px; }
.cd-l { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.cd-tail { font-size: 15px; color: #C9D4F4; max-width: 24em; }
.cd-set { display: inline-flex; align-items: center; gap: 10px; color: #C3CEEE; }
.cd-set input { min-height: 44px; padding: 6px 10px; border-radius: 8px; border: 1.5px solid #3A4F99; background: var(--navy-2); color: #fff; font-family: var(--f-mono); font-size: 15px; color-scheme: dark; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-emblem { flex: none; display: grid; place-items: center; width: 108px; padding: 10px 12px; background: #fff; border: 2px solid var(--ink); border-radius: var(--r-s); box-shadow: 4px 4px 0 var(--blue); }
.foot-emblem img { width: 100%; height: auto; display: block; }
.foot-id { display: grid; justify-items: start; gap: 2px; }
.foot-mark { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.foot-url { display: block; font-weight: 500; font-size: 13px; color: #8C9AC4; margin-top: 2px; letter-spacing: 0; }
.foot-exam { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--led); margin-top: 6px; }
.foot-id .link-btn { padding: 8px 0; min-height: 44px; }
.foot-notes { display: grid; gap: 6px; padding-top: 14px; }
.foot-note { font-size: 12.5px; line-height: 1.5; color: #8C9AC4; margin: 0; }
.foot-note a { color: #C3CEEE; }
@media (min-width: 760px) {
  .foot { padding-top: 32px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
  .countdown { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 32px; }
  .foot-emblem { width: 132px; }
  .foot-notes { grid-template-columns: 1fr 1.6fr; gap: 24px; }
}

/* ---------- LAN: the site switcher ----------
   Phones: a sheet up from the bottom. Desktop: a panel that drops from the LAN button.
   Top: a switch faceplate, one jack per page; the rows below read like "show interfaces status". */
.lan {
  border: 2px solid var(--ink); padding: 0; background: var(--card); color: var(--ink); overflow: hidden;
  width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--r-l) var(--r-l) 0 0; border-bottom: 0;
  max-height: calc(100dvh - 40px); overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 700px) {
  .lan { width: 440px; margin: 72px var(--gutter) auto auto; border-radius: var(--r-l); border-bottom: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); max-height: calc(100dvh - 96px); }
}
.lan::backdrop { background: rgba(10, 27, 85, .45); }
.lan-face { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--navy); border-bottom: 2px solid var(--ink); }
.lan-host { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #C3CEEE; }
.lan-jacks { display: flex; gap: 6px; }
.lan-jack { position: relative; width: 26px; height: 24px; border-radius: 4px; background: var(--navy-2); border: 1.5px solid #3A4F99; display: grid; place-items: end center; padding-bottom: 3px; transition: border-color .2s, transform .2s var(--ease-spring); }
.lan-jack::after { content: ""; width: 14px; height: 9px; background: #06103A; clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 75% 100%, 25% 100%, 25% 70%, 0 70%); }
.lan-jack b { position: absolute; top: 3px; left: 4px; width: 5px; height: 3px; border-radius: 1px; background: #3A4F99; }
.lan-jack.up b { background: var(--led); }
.lan-jack.hot { border-color: #fff; transform: translateY(-2px); }
.lan-jack.res { opacity: .45; }
.lan-body { padding: 16px 18px 20px; }
.lan-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lan-title { font-size: 26px; }
.lan-close { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; flex: none; }
.lan-close svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.lan-cmd { margin: 4px 0 12px; font-size: 12px; color: var(--ink-3); }
.lan-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.lan-list a {
  display: grid; grid-template-columns: 52px 1fr auto; column-gap: 12px; align-items: baseline;
  padding: 12px 6px; min-height: 56px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none;
}
.lan-list a:hover, .lan-list a:focus-visible { background: var(--bg); }
.lan-p { font-size: 12px; font-weight: 700; color: var(--blue-ink); }
.lan-n { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.lan-s { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.lan-s.up { color: var(--ink); background: var(--led-wash); border: 1.5px solid var(--led); border-radius: 5px; padding: 1px 6px; }
.lan-d { grid-column: 2 / -1; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.lan-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.lan-note .mono { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-right: 6px; }

/* =========================================================
   Where am I: scroll progress, section strip, side rail
   ========================================================= */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* phones and mid widths: a strip slides down under the top bar */
.now {
  position: absolute; left: 0; right: 0; top: 100%; z-index: -1;
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 var(--gutter);
  background: var(--navy); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 14px;
  transform: translateY(-100%); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s;
}
.now.show { transform: none; opacity: 1; }
.now-n { color: var(--led); font-size: 12px; letter-spacing: .06em; min-width: 2ch; }
.now-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-l.swap { animation: nowswap .45s var(--ease-out); }
@keyframes nowswap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.now-of { color: #8C9AC4; font-size: 12px; }

/* wide screens: a cable down the right edge with one port per section */
.rail { display: none; }
@media (min-width: 1360px) {
  .now { display: none; }
  .rail { display: block; position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 30; }
  .rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
  .rail ol::before { content: ""; position: absolute; right: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--hair); border-radius: 2px; }
  .rail ol::after { content: ""; position: absolute; right: 6px; top: 6px; width: 2px; height: calc(var(--fill, 0) * (100% - 12px)); background: var(--blue); border-radius: 2px; transition: height .5s var(--ease-out); }
  .rail a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 22px; text-decoration: none; color: var(--ink-3); }
  .rail-node { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--ink-3); background: var(--bg); flex: none; transition: transform .35s var(--ease-spring), background-color .3s, border-color .3s; }
  .rail-l { font-family: var(--f-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
    opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .35s var(--ease-out); pointer-events: none; }
  .rail a.past .rail-node { background: var(--blue); border-color: var(--blue); }
  .rail a.on .rail-node { background: var(--led); border-color: var(--ink); transform: scale(1.3); }
  .rail a.on .rail-l { opacity: 1; transform: none; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: 6px; padding: 3px 7px; }
  .rail a:hover .rail-l, .rail a:focus-visible .rail-l { opacity: 1; transform: none; }
  .rail.on-dark a:not(.on) .rail-node { background: var(--navy); }
}

/* the active section's placard lights up */
.placard-no { transition: background-color .4s, color .4s; }
.band.active .placard-no { background: var(--led); color: var(--ink); }

/* flashcard deck: two cards fanned out behind the live one */
.deck { position: relative; }
.deck-stack { position: absolute; left: 0; right: 0; top: 0; height: 230px; pointer-events: none; }
.deck-stack i { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: var(--r-m); background: var(--card); }
.deck-stack i:first-child { transform: rotate(2.5deg) translate(6px, 4px); background: var(--blue-wash); }
.deck-stack i:last-child { transform: rotate(-2deg) translate(-4px, 6px); }
.deck .fc-actions { margin-top: 12px; }
.fcard { z-index: 1; }

/* =========================================================
   Motion. Every section has its own entrance, so nothing repeats:
     hero          headline rises line by line; the network powers on; a new test date rolls the TTL into the rig's strip
     exam map      title wipes in; domain bars grow up like a chart printing
     station 01    question card slides in; options are dealt one by one
     station 02    title comes into focus; the card is tossed onto the deck
     station 03    copy slides in; the terminal switches on like a CRT and types its boot line (once only, data-reveal-once)
     station 04    title letter-spacing settles; the sheet swings down on a hinge
     the payoff    title rises out of a mask; pay figures count up; bars fill
     the plan      goals unfold row by row; the report is stamped
     stations      tiles flip down like rack units
     LAN menu      sheet slides up or drops down; the switch jacks blink as they link up
   Pieces play every time they scroll into view: sections.js adds .in on the way in
   and takes it off once they're fully off screen, so the entrance replays next time.
   Nothing moves under prefers-reduced-motion.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* ----- hero ----- */
  .hero-copy.in > * { animation: rise .9s var(--ease-out) backwards; }
  .hero-copy.in > :nth-child(2) { animation-delay: .08s; }
  .hero-copy.in > :nth-child(3) { animation-delay: .16s; }
  .hero-copy.in > :nth-child(4) { animation-delay: .24s; }
  .hero-copy.in > :nth-child(5) { animation-delay: .32s; }
  .js .hero-fine { animation: fadein .8s ease .6s backwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
  .hero-graphic.in .rig { animation: rigin 1s var(--ease-out) .1s backwards; }
  @keyframes rigin { from { opacity: 0; transform: translate(14px, 14px); box-shadow: 0 0 0 var(--ink); } }
  .hero-graphic.in .field-links .g-cable { animation: fadein .3s ease .5s backwards; }
  .hero-graphic.in .field-links .lk, .hero-graphic.in .field-links .lk-case { stroke-dasharray: 1400; animation: draw 1.3s var(--ease-out) .5s backwards; }
  .hero-graphic.in .field-links .g-peer { animation: fadein .8s ease 1.3s backwards; }
  .hero-graphic.in .field-links .g-port, .hero-graphic.in .field-links .g-pk { animation: fadein .5s ease 1.5s backwards; }
  @keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
  @keyframes fadein { from { opacity: 0; } }
  .hero-graphic.in .hub { animation: hubin .7s var(--ease-spring) .35s backwards; }
  @keyframes hubin { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
  .hero-graphic.in .dev { animation: pop .55s var(--ease-spring) backwards; animation-delay: calc(.65s + var(--i, 0) * .07s); }
  @keyframes pop { from { opacity: 0; scale: .4; } }

  .rig-ttl.tick span { display: inline-block; animation: roll .5s var(--ease-spring); }
  @keyframes roll { from { transform: translateY(-120%); opacity: 0; } }

  /* LAN switcher: the sheet slides up (phones) or drops from the button (desktop); every jack blinks as it links up */
  .lan[open] { animation: sheetup .4s var(--ease-out); }
  @keyframes sheetup { from { transform: translateY(100%); } }
  @media (min-width: 700px) {
    .lan[open] { transform-origin: 100% 0; animation: dropdown .32s var(--ease-out); }
    @keyframes dropdown { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
  }
  .lan[open] .lan-jack b { animation: linkup .5s steps(1) backwards; animation-delay: calc(.12s + var(--i, 0) * .08s); }
  .lan[open] .lan-jack.res b { animation: none; }
  @keyframes linkup { 0% { background: var(--led); } 30% { background: #3A4F99; } 60% { background: var(--led); } }
  .lan[open] .lan-list li { animation: patch .4s var(--ease-out) backwards; animation-delay: calc(.08s + var(--i, 0) * .05s); }
  @keyframes patch { from { opacity: 0; transform: translateY(6px); } }

  /* hidden until scrolled to (opacity only, so it stays focusable) */
  .js .rv:not(.in) { opacity: 0; }

  /* ----- exam map: wipe + bars grow ----- */
  .fx-print .head-row.in .copy { animation: wipe .9s var(--ease-out) backwards; }
  .fx-print .head-row.in .ex-lede { animation: wipe .9s var(--ease-out) .15s backwards; }
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .fx-print .bp.in .bp-seg { transform-origin: 50% 100%; animation: grow .7s var(--ease-spring) backwards; }
  .fx-print .bp.in .bp-seg:nth-child(2) { animation-delay: .07s; }
  .fx-print .bp.in .bp-seg:nth-child(3) { animation-delay: .14s; }
  .fx-print .bp.in .bp-seg:nth-child(4) { animation-delay: .21s; }
  .fx-print .bp.in .bp-seg:nth-child(5) { animation-delay: .28s; }
  .fx-print .bp.in .bp-seg:nth-child(6) { animation-delay: .35s; }
  @keyframes grow { from { transform: scaleY(0); } }
  .fx-print .bp.in .bp-detail { animation: drop .7s var(--ease-out) .55s backwards; }
  @keyframes drop { from { opacity: 0; transform: translateY(-16px); } }

  /* ----- station 01: slide + deal ----- */
  .fx-deal .copy.in { animation: fadein 1s ease backwards; }
  .fx-deal .qcard.in { animation: fromright .8s var(--ease-out) backwards; }
  @keyframes fromright { from { opacity: 0; transform: translateX(72px) rotate(1.5deg); } }
  .fx-deal .qcard.in .opt { animation: deal .55s var(--ease-out) backwards; animation-delay: .35s; }
  .fx-deal .qcard.in .opt:nth-child(2) { animation-delay: .45s; }
  .fx-deal .qcard.in .opt:nth-child(3) { animation-delay: .55s; }
  .fx-deal .qcard.in .opt:nth-child(4) { animation-delay: .65s; }
  @keyframes deal { from { opacity: 0; transform: translateX(36px); } }

  /* ----- station 02: focus + toss ----- */
  .fx-toss .copy.in { animation: focus .9s ease backwards; }
  @keyframes focus { from { opacity: 0; filter: blur(10px); } }
  .fx-toss .deck.in .fcard { animation: toss .85s var(--ease-out) backwards; }
  @keyframes toss {
    0% { opacity: 0; transform: translate(60px, -140px) rotate(16deg); }
    65% { opacity: 1; transform: translate(-4px, 6px) rotate(-2deg); }
    100% { transform: none; }
  }
  .fx-toss .deck.in .deck-stack i { animation: fan .6s var(--ease-spring) .55s backwards; }
  @keyframes fan { from { transform: none; opacity: 0; } }
  .fx-toss .deck.in .fc-actions { animation: fadein .5s ease .8s backwards; }

  /* ----- station 03: slide from left + CRT switch-on ----- */
  .fx-boot .copy.in { animation: fromleft .8s var(--ease-out) backwards; }
  @keyframes fromleft { from { opacity: 0; transform: translateX(-44px); } }
  .fx-boot .term.in { animation: crt .9s var(--ease-out) .15s backwards; }
  @keyframes crt {
    0% { clip-path: inset(50% 50% 50% 50%); }
    40% { clip-path: inset(calc(50% - 1px) 0 calc(50% - 1px) 0); }
    100% { clip-path: inset(0 0 0 0); }
  }
  .fx-boot .term.in .term-try { animation: fadein .5s ease 1.2s backwards; }

  /* ----- station 04: letter-spacing settles + hinge ----- */
  .fx-hinge .copy.in { animation: fadein .7s ease backwards; }
  .fx-hinge .copy.in .ex-title { animation: settle 1.1s var(--ease-out) backwards; }
  @keyframes settle { from { letter-spacing: .04em; opacity: 0; } }
  .fx-hinge .subnet.in { transform-origin: 50% 0; animation: hinge .9s var(--ease-spring) .1s backwards; }
  @keyframes hinge { from { opacity: 0; transform: perspective(900px) rotateX(-32deg) translateY(24px); } }
  .fx-hinge .subnet.in .sn-field input { animation: probe .7s ease .7s backwards; }
  .fx-hinge .subnet.in .sn-field:nth-child(2) input { animation-delay: .85s; }
  @keyframes probe { 40% { border-color: var(--led); box-shadow: 0 0 0 4px var(--led-wash); } }

  /* ----- the payoff: unmask + count + fill ----- */
  .fx-count .head-row.in .ex-title { animation: unmask .9s var(--ease-out) backwards; }
  @keyframes unmask { from { clip-path: inset(100% 0 0 0); transform: translateY(36px); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
  .fx-count .head-row.in .ex-lede, .fx-count .head-row.in .placard { animation: fadein .8s ease .3s backwards; }
  .fx-count .jobs .job-bar::after { transition: transform 1.1s var(--ease-out); }
  .fx-count .jobs:not(.in) .job-bar::after { transform: scaleX(0); }
  .fx-count .jobs.in .job:nth-child(2) .job-bar::after { transition-delay: .12s; }
  .fx-count .jobs.in .job:nth-child(3) .job-bar::after { transition-delay: .24s; }
  .fx-count .jobs.in .job { animation: lift .6s var(--ease-out) backwards; }
  .fx-count .jobs.in .job:nth-child(2) { animation-delay: .1s; }
  .fx-count .jobs.in .job:nth-child(3) { animation-delay: .2s; }
  @keyframes lift { from { opacity: 0; transform: scale(.95); } }

  /* ----- the plan: unfold + stamp ----- */
  .fx-unfold .copy.in .placard, .fx-unfold .copy.in .ex-title { animation: fadein .7s ease backwards; }
  .fx-unfold .copy.in .goals { animation: ruler .8s var(--ease-out) .1s backwards; }
  @keyframes ruler { from { border-top-color: transparent; } }
  .fx-unfold .copy.in .goal { animation: unfold .6s var(--ease-out) backwards; }
  .fx-unfold .copy.in .goal:nth-child(1) { animation-delay: .2s; }
  .fx-unfold .copy.in .goal:nth-child(2) { animation-delay: .32s; }
  .fx-unfold .copy.in .goal:nth-child(3) { animation-delay: .44s; }
  .fx-unfold .copy.in .goal:nth-child(4) { animation-delay: .56s; }
  @keyframes unfold { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-12px); } to { clip-path: inset(0 0 0 0); } }
  .fx-unfold .report.in { animation: stamp .6s var(--ease-out) .25s backwards; }
  @keyframes stamp {
    0% { opacity: 0; transform: scale(1.14) rotate(-2.5deg); }
    70% { opacity: 1; transform: scale(.985) rotate(0); }
    100% { transform: none; }
  }

  /* ----- stations: rack units flip down ----- */
  .fx-rack .head-row.in { animation: fadein .8s ease backwards; }
  .fx-rack .plan.in { perspective: 1200px; }
  .fx-rack .plan.in .room { transform-origin: 50% 0; animation: rack .75s var(--ease-out) backwards; }
  .fx-rack .plan.in .room:nth-child(2) { animation-delay: .1s; }
  .fx-rack .plan.in .room:nth-child(3) { animation-delay: .2s; }
  .fx-rack .plan.in .room:nth-child(4) { animation-delay: .3s; }
  @keyframes rack { from { opacity: 0; transform: rotateX(-85deg); } }
}