/* =========================================================================
   Zenyth Labs, marketing site
   Palette: "Anodized". A bead-blasted graphite panel under a cold instrument
   light. Every colour maps to an object in the capture chain: cyan is the
   phosphor of a trace and the status LED on a rig, steel blue is the second
   sensor family, green is "in tolerance" on a QA gate. Nothing warm, nothing
   organic, no brand pop.

   Self-hosted type: Archivo (variable, weight AND width) for everything set
   in words, IBM Plex Mono for everything set in figures. Headlines run at a
   semi-condensed width and body at normal width, so the whole page is one
   family machined to different widths, like parts turned from one stock.
   Every numeral is mono and tabular: these are instrument readings, not
   marketing copy.
   ========================================================================= */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Tokens.
   This page commits to one visual world: a machined panel under instrument
   light. The three theme selectors below are declared identically on purpose,
   so a visitor's OS or site toggle cannot half-invert the palette during a
   sales conversation. Light mode is a deliberate non-goal here.
   ------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* neutrals: one graphite-steel family, hue-biased toward the cyan signal.
     Deliberately lifted off near-black so the page reads as a panel, not a void. */
  --ground:     #0e1319;
  --surface:    #141a22;
  --surface-2:  #1b2430;
  --line:       #27313d;
  --line-soft:  #1e2731;
  /* interactive controls get a border that clears 3:1 against the ground,
     so a ghost button and an empty input still look operable */
  --line-strong: #586573;

  /* text ramp, every step measured against --ground:
     ink 16.0:1, ink-2 10.4:1, muted 6.4:1, muted-dim 4.8:1. Nothing here
     drops under AA, including the smallest captions. */
  --ink:        #e9eff5;
  --ink-2:      #b6c2ce;
  --muted:      #8b98a6;
  --muted-dim:  #78838f;

  /* signal: cold cathode cyan, the colour of a live trace and a rig status LED */
  --signal:        #45c8e4;
  --signal-bright: #85e1f3;
  --signal-deep:   #1c6c82;
  --signal-wash:   rgba(69, 200, 228, 0.09);
  --signal-line:   rgba(69, 200, 228, 0.34);

  /* second sensor family: machine blue-grey, used for gyroscope and numerics */
  --steel:      #8faec9;

  /* semantic, kept separate from the accent. Deviation-map convention:
     nominal is green, out of tolerance is red. */
  --nominal:      #4fbe8e;
  --nominal-wash: rgba(79, 190, 142, 0.12);
  --out:          #e2685f;

  --card: linear-gradient(158deg, rgba(146,190,224,0.058), rgba(146,190,224,0.012));
  --radius: 10px;
  --radius-sm: 6px;

  --font-display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step-1: clamp(0.86rem, 0.82rem + 0.18vw, 0.95rem);
  --step-0: clamp(1.05rem, 0.99rem + 0.28vw, 1.24rem);
  --step-1u: clamp(1.22rem, 1.10rem + 0.55vw, 1.55rem);
  --step-2: clamp(1.45rem, 1.28rem + 0.8vw, 2rem);
  --step-3: clamp(2.15rem, 1.6rem + 2.4vw, 3.9rem);
  --step-4: clamp(2.9rem, 1.8rem + 5.4vw, 6.4rem);

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --band-y: clamp(4.5rem, 9vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, canvas, svg, video { max-width: 100%; }

::selection { background: var(--signal); color: #06171d; }

a { color: inherit; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot: off-screen (not display:none, some bots skip that), unreachable by
   tab, hidden from assistive tech. A real visitor never sees or fills this. */
.hp-field {
  position: absolute; left: -5000px; top: -5000px;
  width: 1px; height: 1px; overflow: hidden;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--signal); color: #06171d; padding: 0.6rem 1rem;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
  transition: top 0.16s ease;
}
.skip:focus { top: 1rem; }

/* ---------- shared type roles ----------
   The width axis is the identity move. Display type is machined narrower
   (a nameplate stamped into a panel); running text stays at normal width so
   it is comfortable to read. */
.mono, .mono-label, .num { font-family: var(--font-mono); }
.num, table.spec td, .hf-num { font-variant-numeric: tabular-nums; }

.mono-label {
  font-size: var(--step-1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin: 0;
}

.sep { color: var(--muted-dim); padding: 0 0.35em; }

.h1 {
  font-size: var(--step-4);
  line-height: 0.94;
  letter-spacing: -0.032em;
  font-weight: 600;
  font-stretch: 87%;
  color: var(--ink);
  margin: 0.55em 0 0;
  text-wrap: balance;
  max-width: 19ch;
}
.h1-dim { color: var(--muted); display: block; }

.h2 {
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.026em;
  font-weight: 600;
  font-stretch: 91%;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  max-width: 22ch;
}

.h3 {
  font-size: var(--step-1u);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: var(--step-1u);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 1.4rem 0 0;
  text-wrap: pretty;
}
.lede-sm { font-size: var(--step-0); color: var(--muted); max-width: 62ch; }

.prose { max-width: 64ch; display: flex; flex-direction: column; gap: 1.15rem; }
.prose p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}

/* placeholder marker: visible on inspection, never shouty */
.ph {
  display: inline-block;
  width: 1.55em;
  border-bottom: 1px dashed var(--signal-line);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: help;
  vertical-align: baseline;
}
.ph:not(:empty) { width: auto; padding: 0 0.25em; }
.ph::after { content: "?"; opacity: 0.75; }
.ph:not(:empty)::after { content: ""; }

.ph-legend {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--muted-dim);
  margin: 1.2rem 0 0;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); border-top: 1px solid var(--line-soft); }
.band-alt { background: var(--surface); }

.sec { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.sec-body { display: flex; flex-direction: column; gap: clamp(1.6rem, 2.6vw, 2.6rem); min-width: 0; }
.rail { padding-top: 0.55rem; }

@media (min-width: 900px) {
  .sec { grid-template-columns: 168px minmax(0, 1fr); }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  max-width: 1240px; margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--ink);
  font-weight: 600; letter-spacing: -0.015em; font-stretch: 87%;
  font-size: clamp(1.08rem, 1.6vw, 1.26rem);
  margin-right: auto;
}
.brand-mark { width: 1.55em; height: 1.55em; color: var(--signal); flex: none; }
.brand-word-dim { color: var(--muted); }

.nav-links { display: none; gap: 1.6rem; }
.nav-links a {
  text-decoration: none; color: var(--muted);
  font-size: var(--step-1); letter-spacing: 0.01em;
  transition: color 0.16s ease;
}
.nav-links a:hover { color: var(--ink); }
@media (min-width: 860px) { .nav-links { display: flex; } }

/* ---------- buttons ----------
   Squared off, not pills. A pill reads consumer-soft; this is a hardware key. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  background: var(--signal); color: #06171d;
  border: 1px solid var(--signal);
  border-radius: var(--radius-sm);
  padding: 0.78rem 1.5rem;
  font: inherit; font-weight: 600; font-size: var(--step-1);
  letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover { background: var(--signal-bright); border-color: var(--signal-bright); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(69,200,228,0.18); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 0.55rem 1.05rem; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: rgba(146,190,224,0.06); border-color: var(--signal-line); color: var(--ink); box-shadow: none; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3.2rem, 7vw, 6.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* company line, same wording as the LinkedIn tagline. sits after the lede so it lands as
   the reason to act, and so "the world" does not stutter against the h1 two lines above.
   no rule, no accent: the readout below is still the only loud thing in the hero */
.hero-line {
  margin: clamp(2.1rem, 3.4vw, 2.9rem) 0 0;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-stretch: 91%;
  font-weight: 600;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }
.hero-line + .hero-cta { margin-top: 1.5rem; }

.hero-facts {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 720px) { .hero-facts { grid-template-columns: repeat(3, 1fr); } }
.hero-facts li {
  background: var(--ground);
  padding: 1.15rem 1.3rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
}
.hf-num {
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  color: var(--ink); letter-spacing: -0.03em;
}
/* units sit in steel, not the accent: the cyan belongs to the readout below
   and to things you can click, and it should not be sprinkled */
.hf-unit { font-family: var(--font-mono); font-size: var(--step-1); color: var(--steel); }
.hf-label { flex: 1 1 100%; font-size: var(--step-1); color: var(--muted); line-height: 1.4; }

/* ---------- the capture strip (the one idea) ---------- */
.strip {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 1240px;
  padding-inline: var(--gutter);
}
.strip-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  padding: 0 0.25rem 0.7rem;
}
.strip-meta { font-size: var(--step-1); color: var(--muted-dim); display: inline-flex; align-items: center; gap: 0.5rem; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nominal);
  box-shadow: 0 0 0 3px var(--nominal-wash);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.strip-canvas-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(69,200,228,0.06), transparent 62%),
    var(--surface);
  overflow: hidden;
  position: relative;
}
#imu { display: block; width: 100%; height: clamp(200px, 30vw, 320px); }
.strip-cap {
  margin: 0.85rem 0.25rem 0;
  font-size: var(--step-1);
  color: var(--muted-dim);
  max-width: 72ch;
  text-wrap: pretty;
}

/* ---------- pillars ---------- */
.pillars { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 860px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--ground); padding: clamp(1.3rem, 2vw, 1.8rem); display: flex; flex-direction: column; gap: 0.6rem; }
.band-alt .pillar { background: var(--surface); }
.pillar p { margin: 0; font-size: var(--step-1); color: var(--muted); line-height: 1.55; text-wrap: pretty; }

/* ---------- capability plates ---------- */
.plates { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .plates { grid-template-columns: repeat(4, 1fr); } }

.plate {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1.7vw, 1.5rem);
  display: flex; flex-direction: column; gap: 0.55rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.plate:hover { border-color: var(--signal-line); transform: translateY(-2px); }
.plate-key { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--muted-dim); margin: 0; }
.plate-name { font-size: var(--step-1u); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.plate-note { margin: 0; font-size: var(--step-1); color: var(--muted); line-height: 1.5; text-wrap: pretty; }

/* ---------- the package panel ---------- */
.pkg {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  overflow: hidden;
}
.band-alt .pkg { background: var(--surface-2); }

.pkg-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--line);
  background: rgba(146,190,224,0.025);
}
.pkg-path { margin: 0; font-size: var(--step-1); color: var(--muted); }
.pkg-path b { color: var(--ink); font-weight: 500; }
.slash { color: var(--muted-dim); padding: 0 0.15em; }
.pkg-badge { margin: 0; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--nominal); }

.tabs {
  display: flex; gap: 0.15rem;
  padding: 0.5rem clamp(0.6rem, 1.4vw, 1rem) 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit; font-size: var(--step-1); font-weight: 500;
  padding: 0.6rem 0.95rem 0.7rem;
  cursor: pointer; white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }

.pane { padding: clamp(1.1rem, 2vw, 1.7rem); }
.pane[hidden] { display: none; }
.pane-note { margin: 0 0 1.1rem; font-size: var(--step-1); color: var(--muted); max-width: 70ch; text-wrap: pretty; }

.table-scroll, .code-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.spec { width: 100%; border-collapse: collapse; font-size: var(--step-1); min-width: 480px; }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: 0.72rem 1rem 0.72rem 0; border-bottom: 1px solid var(--line-soft); }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec thead th {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dim);
  border-bottom-color: var(--line);
}
table.spec tbody th { font-weight: 500; color: var(--muted); width: 34%; min-width: 150px; }
table.spec td { color: var(--ink-2); }
table.spec td.mono { color: var(--ink); }

/* a stamped tag, not a lozenge */
.chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 3px;
  margin-left: 0.45rem; white-space: nowrap;
}
.chip-ok { color: var(--nominal); background: var(--nominal-wash); border: 1px solid rgba(79,190,142,0.28); }

pre.code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  line-height: 1.7;
  color: var(--ink-2);
  background: rgba(4,8,12,0.45);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  min-width: 620px;
  tab-size: 2;
}
pre.code .k { color: var(--muted-dim); }
pre.code .p { color: var(--signal); }
pre.code .s { color: var(--ink); }
pre.code .n { color: var(--steel); }

/* QA dials */
.dials { display: grid; gap: 1.1rem 1.6rem; }
@media (min-width: 700px) { .dials { grid-template-columns: repeat(2, 1fr); } }
.dial { display: flex; flex-direction: column; gap: 0.45rem; }
.dial-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dial-name { font-size: var(--step-1); color: var(--ink-2); }
.dial-val { font-size: var(--step-1); color: var(--ink); font-variant-numeric: tabular-nums; }
/* a gauge, squared off like a bar on a panel meter */
.meter { height: 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meter i {
  display: block; height: 100%; width: var(--v, 50%);
  background: linear-gradient(90deg, var(--signal-deep), var(--signal));
  border-radius: 2px;
}
.dial-note { margin: 0; font-size: 0.82rem; color: var(--muted-dim); }

.rejects {
  list-style: none; margin: 1.5rem 0 0; padding: 1.2rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: 0.5rem;
  font-size: var(--step-1); color: var(--muted);
}
@media (min-width: 700px) { .rejects { grid-template-columns: repeat(2, 1fr); } }
.rejects .num { color: var(--ink); margin-right: 0.6rem; }

/* ---------- pipeline ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--surface);
  padding: clamp(1.3rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.step p { margin: 0; font-size: var(--step-1); color: var(--muted); line-height: 1.55; text-wrap: pretty; }
.step-n { font-size: 0.82rem; letter-spacing: 0.18em; color: var(--steel); }

/* ---------- proof ---------- */
.kicker {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-stretch: 91%;
  font-weight: 600;
  color: var(--ink);
  max-width: 26ch;
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line-soft);
  text-wrap: balance;
}

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.25fr 0.75fr; } }

.form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.42rem; }
.field label { font-size: var(--step-1); color: var(--muted); }
.opt { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-dim); margin-left: 0.35em; }
.field input, .field textarea {
  font: inherit; font-size: var(--step-1);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  width: 100%;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus { border-color: var(--signal); outline-offset: 1px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--out); }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; }
.form-note { margin: 0; font-size: 0.85rem; color: var(--muted-dim); flex: 1 1 16rem; }
.form-note.is-error { color: #ef8b83; }
.form-note.is-ok { color: var(--nominal); }

.contact-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.side-key { font-size: 0.76rem; }
.side-mail { margin: 0; font-size: var(--step-1u); letter-spacing: -0.02em; }
.side-mail a { color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal-line); }
.side-mail a:hover { color: var(--signal-bright); border-bottom-color: var(--signal-bright); }
.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0.5rem 0; width: 100%; }
.side-list { margin: 0; padding-left: 1.1rem; font-size: var(--step-1); color: var(--muted); display: grid; gap: 0.35rem; }
.side-list::marker { color: var(--steel); }
.side-body { margin: 0; font-size: var(--step-1); color: var(--muted); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line-soft); padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.foot-inner { display: flex; flex-direction: column; gap: 0.4rem; }
.foot-brand { margin: 0; font-size: var(--step-1u); font-weight: 600; letter-spacing: -0.015em; font-stretch: 87%; color: var(--ink); }
.foot-line { margin: 0; font-size: var(--step-1); color: var(--muted); }
.foot-dim { color: var(--muted-dim); }

/* ---------- reveal ----------
   Scoped to html.js so the section is fully visible if the script never runs. */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot { animation: none; }
  .btn:hover, .plate:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}