/* ===========================================================================
   opticsfleet.com — marketing site
   ---------------------------------------------------------------------------
   The palette is the product's "Rail" design system, deliberately DUPLICATED
   here rather than imported. The canonical copies are:

     opticsFleetDeliveryUI/src/styles.css      (Tailwind @theme)
     opticsFleetDeliveryMobile/src/theme.ts    (RN theme object)

   Those two must stay in lockstep with each other — the console and the app are
   meant to be indistinguishable. This third copy is NOT held to that standard:
   the marketing site only needs to be recognisably the same brand, and wiring a
   build step into a set of static documents to avoid re-typing eleven hex
   values would cost more than it saves. Do not "fix" this by adding npm.

   TYPE ENCODES A DISTINCTION, everywhere on the site:
     sans  — what a thing IS      (headlines, prose, labels)
     mono  — what a thing MEASURES (prices, cadences, limits, units, codes)
   If you add a number, it is mono. If you add a sentence, it is sans.

   NO EXTERNAL REQUESTS. No web fonts, no analytics, no CDN, no remote images.
   privacy.html makes a factual claim about this; keep it true.
   =========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Navigation ink — the single dark surface, shared with the console's rail.
     A visitor who later signs in meets this exact ground again. */
  --nav: #0f1626;
  --nav-raise: #19223a;
  --nav-line: #232d45;
  --nav-text: #98a3bc;
  --nav-text-strong: #ffffff;
  --nav-muted: #6a7591;

  --paper: #f6f7fb;
  --surface: #ffffff;
  --sunk: #f1f3f9;

  --line: #e3e7f0;
  --line-strong: #cfd6e4;

  --ink-1: #101828;
  --ink-2: #414c61;
  --ink-3: #6b7688;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eeeffe;
  --accent-line: #c9cbfa;
  --accent-ink: #3730a3;

  --good: #0e9f6e;
  --good-soft: #e7f7f0;
  --good-ink: #0a7350;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, ui-sans-serif,
    system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
    "Cascadia Mono", Menlo, Consolas, monospace;

  --radius-card: 12px;
  --radius-control: 8px;
  --radius-chip: 999px;

  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-raise: 0 8px 24px -6px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.05);

  --shell: 1120px;
  --rail-w: 150px;
  --rail-gap: 44px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0; }

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

/* On the dark ground the indigo ring disappears into the ink. */
.ground-dark :focus-visible { outline-color: #a5b4fc; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--ink-1);
  font-weight: 600;
  border-radius: 0 0 var(--radius-control) 0;
}
.skip:focus { left: 0; }

/* --- Layout primitives --------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.ground-dark { background: var(--nav); color: var(--nav-text); }
.ground-paper { background: var(--paper); }
.ground-surface { background: var(--surface); }

.band { padding-block: 5.5rem; }
.band-tight { padding-block: 3.5rem; }

.ground-surface + .ground-surface { padding-top: 0; }

/* The spec column: a mono eyebrow plus one measured fact, echoing the
   console's left navigation rail. The fact is content, not decoration —
   every rail carries something true and specific to its section. */
.rail {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--rail-gap);
  align-items: start;
}

/* Deliberately not sticky. A rail head that follows the scroll detaches from
   the paragraph it labels and reads as a floating rule by the time you reach
   the end of a section. */
.rail-head {
  border-top: 2px solid var(--ink-1);
  padding-top: 0.75rem;
}

.ground-dark .rail-head { border-top-color: var(--nav-text-strong); }

.rail-body > * + * { margin-top: 1.25rem; }

/* --- Type roles ---------------------------------------------------------- */
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ground-dark .eyebrow { color: var(--nav-muted); }

/* The measured fact under a rail eyebrow. Mono, because it is a reading. */
.rail-fact {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ground-dark .rail-fact { color: var(--nav-text); }

.h-display {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  letter-spacing: -0.033em;
  line-height: 1.06;
  font-weight: 680;
}

.h-section {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  letter-spacing: -0.028em;
}

.h-card { font-size: 1.0625rem; letter-spacing: -0.012em; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}
.ground-dark .lede { color: var(--nav-text); }

.prose { color: var(--ink-2); max-width: 68ch; }
.prose > * + * { margin-top: 1rem; }
.muted { color: var(--ink-3); font-size: 0.9375rem; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Header -------------------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--nav-line);
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--nav-text-strong);
  font-weight: 620;
  letter-spacing: -0.018em;
  font-size: 1.0625rem;
  text-decoration: none;
}
.wordmark:hover { color: var(--nav-text-strong); }
.wordmark-sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-muted);
  padding-left: 0.625rem;
  margin-left: 0.125rem;
  border-left: 1px solid var(--nav-line);
}

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9375rem;
}
.masthead-nav a {
  color: var(--nav-text);
  text-decoration: none;
  font-weight: 500;
}
.masthead-nav a:hover { color: var(--nav-text-strong); }
.masthead-nav a[aria-current="page"] { color: var(--nav-text-strong); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: 5rem 4.5rem; }
.hero .h-display { color: var(--nav-text-strong); }
.hero .lede { margin-top: 1.25rem; }

/* Each sentence gets its own block so the line break falls at the full stop
   rather than mid-clause. */
.h-line { display: block; }
.h-line + .h-line { margin-top: 0.15em; }

/* One line of readings under the CTAs — the same mono role as the rate plate,
   answering the three things a buyer checks before they click anything. */
.hero-facts {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nav-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--nav-muted);
  font-variant-numeric: tabular-nums;
}
.hero-facts b { color: var(--nav-text); font-weight: 600; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 4rem;
  align-items: start;
}

/* --- SIGNATURE: the rate plate ------------------------------------------
   The price list rendered as an equipment rating plate — the stamped metal
   label on the side of a device. Hairline rules, mono numerals, explicit
   units. Publishing the rate card above the fold is the whole positioning
   argument, so it gets to be the one loud object on the page. Everything
   around it stays quiet.
   ------------------------------------------------------------------------ */
.plate {
  border: 1px solid var(--nav-line);
  border-radius: var(--radius-card);
  background: var(--nav-raise);
  overflow: hidden;
}

.plate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--nav-line);
  background: rgba(255, 255, 255, 0.02);
}

.plate-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nav-text-strong);
}

.plate-note {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--nav-muted);
}

.plate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem 1rem;
  padding: 0.8125rem 1.125rem;
  border-bottom: 1px solid var(--nav-line);
}
.plate-row:last-child { border-bottom: 0; }

.plate-name {
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--nav-text-strong);
  letter-spacing: -0.008em;
}

.plate-desc {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--nav-muted);
  letter-spacing: 0;
  margin-top: 0.0625rem;
}

.plate-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.plate-amount {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--nav-text-strong);
  letter-spacing: -0.02em;
}

.plate-amount-quote {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nav-text);
  letter-spacing: 0.02em;
}

.plate-unit {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nav-muted);
  margin-top: 0.125rem;
}

.plate-foot {
  padding: 0.8125rem 1.125rem;
  border-top: 1px solid var(--nav-line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8125rem;
  color: var(--nav-text);
}

/* The one motion moment on the site: the plate populates like a readout.
   Rows are visible by default and only animate when motion is welcome, so a
   CSS or JS failure can never leave the price list hidden. */
@media (prefers-reduced-motion: no-preference) {
  .plate-row { animation: plate-in 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .plate-row:nth-child(2) { animation-delay: 60ms; }
  .plate-row:nth-child(3) { animation-delay: 120ms; }
  .plate-row:nth-child(4) { animation-delay: 180ms; }
  .plate-row:nth-child(5) { animation-delay: 240ms; }
  .plate-row:nth-child(6) { animation-delay: 300ms; }
  .plate-row:nth-child(7) { animation-delay: 360ms; }
}

@keyframes plate-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --- Buttons ------------------------------------------------------------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

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

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-1);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink-1); }

.ground-dark .btn-ghost {
  border-color: var(--nav-line);
  color: var(--nav-text-strong);
  background: rgba(255, 255, 255, 0.04);
}
.ground-dark .btn-ghost:hover {
  border-color: var(--nav-muted);
  color: var(--nav-text-strong);
}

.btn-sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; }

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.875rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: var(--accent-hover); }

/* --- Cards --------------------------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1rem;
}

/* Four cards in a three-column track leaves a lone card on the second row.
   The wider minimum lands them 2x2 at desktop width and 1-up on a phone,
   with no orphan at either end. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.375rem;
  box-shadow: var(--shadow-card);
}

.card-list {
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.card-list li {
  position: relative;
  padding-left: 1.375rem;
  margin-top: 0.4375rem;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5625rem;
  width: 8px;
  height: 2px;
  background: var(--accent-line);
}

/* --- Feature blocks ------------------------------------------------------ */
.feature + .feature { margin-top: 4rem; }

.feature-lead {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 1.5rem;
}

/* --- Pricing table ------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 1rem;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.tier-featured {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-raise);
}

/* Lifted out of the flow so a badge on one card cannot push its price out of
   line with the cards either side of it. Prices across a row must read as one
   horizontal scan. */
.tier-badge {
  position: absolute;
  top: -0.625rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-chip);
  padding: 0.1875rem 0.5rem;
}

.tier-name { font-size: 1.125rem; letter-spacing: -0.015em; }
/* Two lines' worth, always: a one-line tagline next to a two-line one would
   offset the price row and break the horizontal scan across the card row.
   3.2em is 2 x the inherited 1.6 line-height — NOT 2.8em, which is two lines
   of a 1.4 line-height this element does not have and leaves a 6px gap. */
.tier-tagline {
  margin-top: 0.25rem;
  min-height: 3.2em;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.tier-price {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.tier-amount {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-1);
}

/* "Talk to us" set at the numeral size shouts louder than the numerals it sits
   beside. A quote is not a bigger price; it is a different kind of answer. */
.tier-amount-quote {
  font-size: 1.375rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.tier-unit {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 0.375rem;
}

.tier-annual {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--good-ink);
}

.tier-min {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tier-features {
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-2);
  flex: 1;
}
.tier-features li {
  position: relative;
  padding-left: 1.375rem;
  margin-top: 0.4375rem;
}
.tier-features li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.4375rem;
  width: 6px;
  height: 10px;
  border-right: 2px solid var(--good);
  border-bottom: 2px solid var(--good);
  transform: rotate(45deg);
}

.tier-limit {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.tier-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}
.tier-actions .btn { width: 100%; }

/* --- Data tables --------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

table.data {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

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

table.data thead th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--sunk);
  white-space: nowrap;
}

table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Callout ------------------------------------------------------------- */
.callout {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.callout .h-card { color: var(--accent-ink); }
.callout p { color: var(--ink-2); margin-top: 0.5rem; }

.note {
  border-left: 2px solid var(--line-strong);
  padding-left: 1rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  padding: 1.125rem 0;
  cursor: pointer;
  font-weight: 560;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--ink-3);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }

.faq-body {
  padding: 0 0 1.25rem;
  color: var(--ink-2);
  max-width: 68ch;
}
.faq-body > * + * { margin-top: 0.75rem; }

/* --- Product illustration ------------------------------------------------
   A drawn console, not a screenshot. It is explicitly an illustration and is
   labelled as one, because a fabricated screenshot would be a claim about a
   screen that may not look like this.
   ------------------------------------------------------------------------ */
.illustration {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-raise);
  overflow: hidden;
}
.illustration svg { width: 100%; height: auto; }
.illustration-caption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--sunk);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Checkout notice (the inert Stripe seam's only UI) ------------------- */
.notice {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 60;
  margin-inline: auto;
  max-width: 28rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raise);
  padding: 1.125rem 1.25rem;
}
.notice[hidden] { display: none; }
.notice-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; }
.notice-body { margin-top: 0.4375rem; font-size: 0.9375rem; color: var(--ink-2); }
.notice-selection {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  background: var(--sunk);
  border-radius: var(--radius-control);
  padding: 0.5rem 0.625rem;
  word-break: break-word;
}
.notice-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* --- Footer -------------------------------------------------------------- */
.site-foot { padding-block: 3.5rem 2.5rem; }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 2.5rem;
}

.foot-links { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.foot-links li + li { margin-top: 0.5rem; }
.foot-links a { color: var(--nav-text); text-decoration: none; }
.foot-links a:hover { color: var(--nav-text-strong); }

.foot-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nav-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--nav-muted);
}

/* An unfilled business fact. Rendered visibly on purpose: a placeholder that
   looks like real text is how a draft ships to production as fact. */
.placeholder {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px dashed var(--accent-line);
  border-radius: 4px;
  padding: 0 0.25em;
  white-space: nowrap;
}
.ground-dark .placeholder {
  color: #c7d2fe;
  background: rgba(199, 210, 254, 0.08);
  border-color: rgba(199, 210, 254, 0.3);
}

/* --- Legal / document pages ---------------------------------------------- */
.doc { max-width: 74ch; }
.doc h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 1rem; margin-top: 1.5rem; }
.doc p, .doc ul, .doc ol { margin-top: 0.875rem; color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li + li { margin-top: 0.375rem; }
.doc dl { margin: 0.875rem 0 0; }
.doc dt { font-weight: 600; margin-top: 0.875rem; color: var(--ink-1); }
.doc dd { margin: 0.25rem 0 0; color: var(--ink-2); }

.doc-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.75rem;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero .h-display { max-width: none; }
}

@media (max-width: 860px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .rail-head { position: static; }
  .rail-fact { display: inline-block; margin-top: 0.375rem; }
  .band { padding-block: 3.75rem; }
  .feature + .feature { margin-top: 3rem; }
}

@media (max-width: 620px) {
  .masthead-inner { min-height: 0; padding-block: 0.875rem; }
  .masthead-nav { gap: 1.25rem; width: 100%; }
  .wordmark-sub { display: none; }
  .hero { padding-block: 3rem 3rem; }
  .plate-row { padding-inline: 0.875rem; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .notice { inset: auto 0.75rem 0.75rem; }
}

@media print {
  .masthead, .site-foot, .actions, .notice { display: none; }
  body { background: #fff; }
}