/* ==========================================================================
   LeadTech Inc — site stylesheet
   --------------------------------------------------------------------------
   Register: sober defense supplier, not sci-fi. Surveying anduril.com,
   saronic.com, neros.tech, shield.ai, skydio.com, castelion.com, pdw.ai and
   launchfirestorm.com turns up a consistent house style — near-black ground,
   off-white rather than pure white text, a narrow neutral grey ramp, one flat
   high-visibility accent, hairline rules, hard corners, and almost no motion.
   None of the eight uses glow, scanlines, HUD corner brackets or an abstract
   3D hero. This sheet follows that convention.

   Orange is reserved exclusively for "design target / in development" markers
   so provisional numbers can never be mistaken for delivered capability.

   The logo is protected in two independent ways:
     1. It lives in a solid, opaque header bar that the canvas never reaches.
     2. In the hero it sits inside .identity-plate, which is marked
        [data-keepout] — backdrop.js reads that rect and refuses to draw any
        particle or link inside it. See backdrop.js for the distance field.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

/* Palette is sampled from the mark itself, not invented. An alpha scan of
   leadtech-logo.png returns a NEUTRAL grey ramp for the brushed metal
   (#707070 / #606060 / #d0d0d0 — r=g=b, no blue cast) and a deep royal blue
   for the star and the TECH wordmark (#0040a0 / #1060c0). So the ground is
   neutral near-black rather than navy, and blue appears only as a flat accent.

   Applied flat throughout: no glow, no neon, no gradient-on-text. That is the
   observed convention across Anduril, Saronic, Neros, Shield AI and PDW —
   near-black base, off-white (never #fff), a narrow grey ramp, and exactly one
   accent used for rules, chips, fills and active states. */
:root {
  /* ground */
  --bg:            #0a0a0b;
  --bg-panel:      #131416;
  --bg-raised:     #1a1c1f;
  --bg-sunken:     #060607;

  /* ink */
  --text:          #edeef0;
  --muted:         #a4a8ad;
  --dim:           #7d828a;

  /* brand */
  --accent:        #1e6fd9;   /* the blue in the star and the TECH wordmark */
  --accent-bright: #5c9fff;
  --accent-soft:   rgba(30, 111, 217, 0.13);
  --steel:         #c4c8cc;   /* the brushed metal of the wings */

  /* Industrial-marking orange. Used for exactly one purpose on this site:
     flagging something designed or planned rather than delivered. Never
     decorative. */
  --target:        #e08a2e;
  --target-soft:   rgba(224, 138, 46, 0.10);

  /* structure */
  --line:          rgba(200, 205, 212, 0.13);
  --line-strong:   rgba(200, 205, 212, 0.26);

  /* canvas field colours, read by backdrop.js */
  --field-dot:     #6e737a;
  --field-link:    #3a3e44;
  --field-accent:  #1e6fd9;
  --field-grid:    #1c1f23;

  /* type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* metrics */
  --header-h:     68px;
  --measure:      68ch;
  /* Near-square. Rounded cards read consumer-software; the reference set is
     hairline rules and hard corners throughout. */
  --radius:       3px;
  --radius-sm:    2px;
}

/* -------------------------------------------------------------------- reset */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.55rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.12rem, 2vw, 1.35rem); letter-spacing: -0.005em; }
h4 { font-size: 1rem; letter-spacing: 0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.45em; }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ------------------------------------------------------------- canvas field */

#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* Everything that is not the canvas sits above it. */
.page { position: relative; z-index: 1; }

/* Content pages get a solid floor under the text so the field never competes
   with body copy — the canvas is a hero device, not a page-wide texture. */
.page--solid main { background: var(--bg); }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

.wrap--narrow { width: min(820px, calc(100% - 3rem)); }

@media (max-width: 640px) {
  .wrap, .wrap--narrow { width: calc(100% - 2rem); }
}

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.tight { padding-block: clamp(2rem, 4vw, 2.75rem); }
/* Consecutive sections would otherwise stack two full paddings into a dead
   band; collapse the join. */
section + section { padding-top: 0; }
section.tight + section { padding-top: clamp(1.5rem, 3vw, 2rem); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  /* Deliberately opaque. This is protection #1 for the logo: the animated
     field is behind a solid bar here, so the mark in the nav is always
     rendered against flat colour. */
  background: #0a0a0b;
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(10, 10, 11, 0.93);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }

.brand img {
  width: auto;
  height: 34px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.545rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2px;
}

/* --------------------------------------------------------------- main nav */

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 42px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { border-color: var(--accent); }

.nav-toggle span {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: currentColor;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top:  5.5px; }

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.site-nav li { margin: 0; }

.site-nav a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); background: rgba(200, 205, 212, 0.07); text-decoration: none; }
.site-nav a[aria-current='page'] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.site-nav .nav-cta {
  margin-left: 0.5rem;
  border: 1px solid var(--accent);
  color: var(--accent-bright);
  background: var(--accent-soft);
}
.site-nav .nav-cta:hover { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: #0a0a0b;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0 1rem;
    /* Collapsed by default; .is-open is set by site.js. */
    display: none;
  }
  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(1180px, calc(100% - 3rem));
    margin-inline: auto;
  }

  .site-nav a {
    padding: 0.85rem 0.6rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .site-nav a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--accent); }
  .site-nav .nav-cta {
    margin: 0.9rem 0.6rem 0;
    text-align: center;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--accent);
  }
}

@media (max-width: 640px) {
  .site-nav ul { width: calc(100% - 2rem); }
  .brand-sub { display: none; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}

/* In a column flex container with align-items:center, children size to
   FIT-CONTENT, not to the container. A child carrying `max-width: 44rem` will
   therefore lay out at 44rem on a 390px phone and overflow the viewport —
   which also pushed the nav toggle off-screen. Cap every hero child at the
   container width. */
.hero > * { max-width: 100%; }

/* Protection #2 for the logo. backdrop.js reads this element's rect and
   subtracts it (plus a feathered margin) from the particle field, so the
   animation approaches and fades rather than crossing the mark. The plate
   itself is also opaque enough to read against anything. */
.identity-plate {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.25rem, 6vw, 3.8rem);
  border: 1px solid var(--line);
  /* Hard corners. Rounded cards and glow read as consumer-software; the
     reference set uses hairline rules and square corners throughout. */
  background: var(--bg);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

/* The mark is the homepage masthead, so it carries the h1. Reset the heading
   box so wrapping the image changes nothing visually; the img alt supplies the
   heading's text equivalent. */
.plate-h1 {
  margin: 0;
  line-height: 0;
  font-size: 0;
}

.identity-plate img {
  width: clamp(12rem, 30vw, 19rem);
  margin-inline: auto;
}

.hero-tagline {
  margin: 1.6rem auto 0;
  max-width: min(30rem, 100%);
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 1.5vw, 0.76rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--steel);
}

.hero-lede {
  margin: 2.4rem auto 0;
  max-width: min(44rem, 100%);
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
}
.hero-lede strong { color: var(--text); font-weight: 600; }

.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  width: 100%;
}

.hero-scroll {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #06111f; }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-soft); }

/* -------------------------------------------------------------- page intro */

.page-head {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.8rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
  background: var(--bg-sunken);
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 0.9rem;
}

.eyebrow--muted { color: var(--dim); }

.lede {
  max-width: var(--measure);
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  color: var(--muted);
  line-height: 1.68;
}

/* ------------------------------------------------------------------- cards */

.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.card {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

.card h3 { margin-bottom: 0.55rem; }
.card p  { color: var(--muted); font-size: 0.95rem; }
.card ul { color: var(--muted); font-size: 0.95rem; }

.card-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------- stat rows */

.stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat {
  background: var(--bg-panel);
  padding: 1.5rem 1.4rem;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.5;
}

/* -------------------------------------------------------------- data lists */

/* The CAGE / NAICS / PSC style key-value block that contracting officers scan
   for first. Monospaced values so codes align. */
.datalist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem 1.6rem;
  margin: 0;
  font-size: 0.92rem;
}

.datalist dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0.28em;
}

.datalist dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.datalist dd.prose {
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .datalist { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .datalist dd { margin-bottom: 0.9rem; }
}

/* ------------------------------------------------------------ spec tables */

.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.spec caption {
  text-align: left;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

table.spec th,
table.spec td {
  text-align: left;
  padding: 0.72rem 1.2rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.spec tbody tr:last-child th,
table.spec tbody tr:last-child td { border-bottom: 0; }

table.spec thead th {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  white-space: nowrap;
}

table.spec tbody th {
  font-weight: 500;
  color: var(--muted);
  width: 38%;
  white-space: nowrap;
}

table.spec tbody td {
  font-family: var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

table.spec tbody td.prose {
  font-family: var(--font-body);
  color: var(--muted);
}

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.26rem 0.62rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Amber is used for one purpose only across this site: flagging something that
   is designed or planned rather than delivered. */
.badge--target {
  border-color: rgba(216, 163, 63, 0.45);
  background: var(--target-soft);
  color: var(--target);
}

.badge--accent {
  border-color: rgba(43, 127, 232, 0.5);
  background: var(--accent-soft);
  color: var(--accent-bright);
}

/* ------------------------------------------------------------------ notice */

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--target);
  border-radius: var(--radius-sm);
  background: var(--target-soft);
  padding: 1.05rem 1.3rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.notice strong { color: var(--text); }

.notice--info {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------------------------------------------------------------- platform */

.platform {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}

.platform-head {
  padding: 1.7rem clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.platform-head .designation {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.platform-head h3 {
  margin: 0.5rem 0 0.6rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.platform-head p { color: var(--muted); max-width: 46rem; margin-bottom: 0; }

.platform-body { padding: clamp(1.2rem, 3vw, 2rem); }

.platform-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------- footnotes */

.footnotes {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--dim);
  line-height: 1.65;
}
.footnotes ol { padding-left: 1.3rem; }
.footnotes li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------ footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  padding-block: 3rem 2rem;
  font-size: 0.87rem;
}

.footer-grid {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-bottom: 2.5rem;
}

.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover { color: var(--text); }

.footer-brand img { height: 42px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: var(--dim); font-size: 0.85rem; max-width: 26rem; }

.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.76rem;
  color: var(--dim);
}

.footer-codes {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

.export-notice {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  line-height: 1.65;
  color: #5c6c82;
  max-width: 62rem;
}

/* ------------------------------------------------------------------- forms */

.form-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.field .req { color: var(--target); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
     focus, which throws the layout. */
  font-size: 16px;
  color: var(--text);
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-hint { font-size: 0.78rem; color: var(--dim); }

/* ------------------------------------------------------------------ utility */

.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.mono  { font-family: var(--font-mono); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.8rem; }
.mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2.4rem; }
.mt-4 { margin-top: 3.2rem; }
.mb-0 { margin-bottom: 0; }

.divider-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.6rem;
}
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media print {
  #backdrop, .site-header, .nav-toggle, .hero-scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .platform, .stat, .spec-table-wrap { border-color: #999; background: #fff; }
}