/* ===========================================================================
   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: #001b3b;
  --nav-raise: #082a50;
  --nav-line: #123b66;
  --nav-text: #b7c8d8;
  --nav-text-strong: #ffffff;
  --nav-muted: #7f98b2;

  --paper: #f5f9fd;
  --surface: #ffffff;
  --sunk: #edf4fa;

  --line: #d7e3ee;
  --line-strong: #bccddd;
  /* Input borders only. On the white form section the border is the field's
     sole resting boundary, so it must hold >=3:1 non-text contrast — which
     --line-strong (1.6:1) never did. Decorative borders stay on --line-strong. */
  --line-input: #7691a9;

  --ink-1: #001b3b;
  --ink-2: #29445f;
  /* A step deeper than the console's #5b7289: this site sets ink-3 on the sunk
     ground (table heads, captions), where #5b7289 reads 4.49:1 — a hair under
     AA. #566d84 clears 4.8:1 on sunk and every lighter ground. */
  --ink-3: #566d84;

  --accent: #0276de;
  --accent-hover: #0168c8;
  --accent-soft: #eaf5ff;
  --accent-line: #b5dafc;
  --accent-ink: #0054a3;

  --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(0, 27, 59, 0.04), 0 1px 3px rgba(0, 27, 59, 0.07);
  --shadow-raise: 0 8px 24px -6px rgba(0, 27, 59, 0.16), 0 2px 6px rgba(0, 27, 59, 0.06);

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

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; }

/* Body-sized links wear the deep accent ink, not the control blue — the bare
   accent misses AA for normal text on paper. Buttons keep --accent. */
a { color: var(--accent-ink); 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 accent ring disappears into the ink. */
.ground-dark :focus-visible { outline-color: #4ba6f3; }

.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 --------------------------------------------------------------
   Sticky, and a direct child of <body> — position:sticky pins an element only
   within its PARENT, so while the masthead lived inside the hero's
   .ground-dark wrapper it could never outlast the hero. It therefore carries
   its own --nav background rather than borrowing the wrapper's. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--nav);
  border-bottom: 1px solid var(--nav-line);
}
.masthead :focus-visible { outline-color: #4ba6f3; }

.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;
}

/* The real mark ships on a white tile (its navy halves would vanish straight
   on the ink ground) — round the tile so it reads as a badge, not a sticker. */
.wordmark img {
  border-radius: 7px;
}
.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 accent ink that carries body links on paper is unreadable on the plate's
   navy — links here take the lightened logo blue instead. */
.plate-foot a { color: #4ba6f3; }
.plate-foot a:hover { color: #78bdf7; }

/* 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-ink);
  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%; }

/* --- Plan picker (pricing: phone vs hardware) -----------------------------
   The page-load question is "how do you track?", so the two answers are a
   tablist ahead of the tier cards. Panels are hidden by the page's own script
   — with JS off, both render stacked and nothing is unreachable. */
.plan-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  max-width: 1060px;
  margin-top: 1.75rem;
}

.plan-tab {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  padding: 1.0625rem 1.25rem;
  text-align: left;
  font: inherit;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.plan-tab:hover { border-color: var(--accent-line); }
.plan-tab[aria-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink-1);
}

.plan-tab-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-3);
}
.plan-tab[aria-selected="true"] .plan-tab-icon {
  background: var(--surface);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}
.plan-tab-icon svg { width: 22px; height: 22px; }

.plan-tab-copy { display: grid; gap: 0.125rem; }
.plan-tab-copy strong { font-size: 0.9375rem; letter-spacing: -0.01em; }
.plan-tab-copy small { font-size: 0.8125rem; color: var(--ink-3); }

.plan-panel { margin-top: 2rem; }
.plan-panel > .feature-lead { max-width: 68ch; }

@media (max-width: 900px) {
  .plan-picker { grid-template-columns: 1fr; gap: 0.625rem; max-width: 560px; }
  .plan-tab { padding: 0.875rem 1rem; }
}

/* Compare-tab column headers: the same imagery as the two plan tabs, so the
   columns visibly ARE the tabs. */
.cmp-head { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.cmp-head img { width: 38px; height: auto; flex: 0 0 auto; }
.cmp-head svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent-ink); }

/* --- Device photography ---------------------------------------------------
   The Beacon V1 is a real object; where the page talks about it, show it. */
.device-figure {
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.device-figure img {
  flex: 0 0 auto;
  width: 210px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 27, 59, 0.18));
}
.device-figure figcaption { font-size: 0.875rem; color: var(--ink-2); max-width: 44ch; }
@media (max-width: 620px) {
  .device-figure { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

.tier-device-photo {
  position: absolute;
  top: 1.125rem;
  right: 1.25rem;
  width: 84px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 27, 59, 0.2));
}
.tier-has-photo .tier-name,
.tier-has-photo .tier-tagline { padding-right: 5rem; }

/* --- 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: #a5d3fa;
  background: rgba(165, 211, 250, 0.08);
  border-color: rgba(165, 211, 250, 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.75rem; gap: 0.625rem 1rem; }
  /* Two compact rows: wordmark + CTA share the first, nav takes the second —
     the header is sticky, so every pixel of its height is paid on every
     scroll. space-between + nowrap fits all four links on a 360px screen. */
  .masthead-nav {
    order: 3;
    width: 100%;
    gap: 1rem;
    font-size: 0.875rem;
    justify-content: space-between;
    overflow-x: auto;
  }
  .masthead-nav a { white-space: nowrap; }
  .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; }
}

/* --- Forms ---------------------------------------------------------------
   The site had no <form> and no <input> at all until the managed-returns
   enquiry, so this is the whole form vocabulary. It follows the same rule as
   everything else here: SANS for what a thing is (labels), MONO for what a
   thing measures — which is why the two numeric inputs read as mono while the
   text ones do not.
   ------------------------------------------------------------------------ */
.form { margin-top: 1.5rem; }

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

.field { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem; }
.form-grid .field { margin-top: 0; }

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}

.field .optional {
  font-weight: 400;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink-1);
  background: var(--surface);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-control);
}

.field input[type="number"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.field textarea { resize: vertical; min-height: 5.5rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* The submit button ships disabled and is enabled by contact-sales.js, so this
   state is what a no-JS visitor sees. It must look unavailable rather than
   broken — the <noscript> beside it explains why. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

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

/* Masthead CTA — brand left, nav centered, one action right (all pages). */
.masthead-cta { white-space: nowrap; }
@media (max-width: 720px) {
  .masthead-cta { display: none; }
}

/* --- CONTACT: the message form -------------------------------------------
   contact.html only. Inputs use --line-input (the input-grade border the
   token set carries precisely for this) and the accent for focus. The form
   composes an email via the visitor's own mail app — see contact.js. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 1.25rem; align-items: start; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; display: grid; gap: 1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--ink-1); letter-spacing: 0.01em; }
.field-opt { font-weight: 600; color: var(--ink-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin-left: 0.35rem; }
.field input,
.field select,
.field textarea {
  width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink-1);
  background: #fff; border: 1px solid var(--line-input); border-radius: 9px;
  padding: 0.6rem 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23566d84' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.2rem; }
.field select:invalid { color: var(--ink-3); }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 0.75; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form-note { margin: 0; font-size: 0.8rem; color: var(--ink-3); max-width: 34ch; }
.form-status { margin: 0; font-size: 0.85rem; color: var(--good-ink, #0a7350); }
.form-status:empty { display: none; }
.contact-aside { display: grid; gap: 1.25rem; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* Honeypot: visually removed but present in the DOM so bots autofill it.
   Deliberately NOT display:none / type=hidden — those are what bots skip. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-status--error { color: var(--crit-ink, #a32a20); }