*,::before,::after{box-sizing:border-box;border:0 solid}
html{-webkit-text-size-adjust:100%;line-height:1.5}
body{margin:0;line-height:inherit}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
p,figure,blockquote,dl,dd{margin:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
fieldset,legend{margin:0;padding:0}
button,input,optgroup,select,textarea{font:inherit;color:inherit;margin:0;padding:0;letter-spacing:inherit}
button,[type=button],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}
button,[role=button]{cursor:pointer}
img,svg,video,canvas{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
table{border-collapse:collapse;text-indent:0;border-color:inherit}
a{color:inherit;text-decoration:inherit}
summary{display:list-item}
::placeholder{opacity:1;color:currentColor}
:disabled{cursor:default}
.scroll-scrub{--ss-progress: 0;position:relative;isolation:isolate;color:var(--ss-ink);background:var(--ss-bg)}.scroll-scrub__stage{position:sticky;top:0;z-index:0;width:100%;height:100dvh;overflow:hidden;background:var(--ss-bg)}.scroll-scrub__media,.scroll-scrub__layer,.scroll-scrub__picture,.scroll-scrub__poster,.scroll-scrub__video{position:absolute;inset:0;width:100%;height:100%}.scroll-scrub__media{z-index:0}.scroll-scrub__layer{margin:0;overflow:hidden;opacity:0;will-change:opacity}.scroll-scrub__layer:first-child{opacity:1}.scroll-scrub__poster,.scroll-scrub__video{display:block;object-fit:cover;object-position:var(--ss-object-position)}.scroll-scrub__poster{z-index:0}.scroll-scrub__video{z-index:1}.scroll-scrub__layer[data-video-painted=true] .scroll-scrub__poster{visibility:hidden}.scroll-scrub__progress{position:absolute;z-index:5;top:0;right:0;left:0;height:2px;background:color-mix(in srgb,var(--ss-ink) 14%,transparent);pointer-events:none}.scroll-scrub__progress span{display:block;width:100%;height:100%;background:var(--ss-accent);transform:scaleX(var(--ss-progress));transform-origin:left center}.scroll-scrub__route{position:absolute;z-index:6;top:clamp(1rem,3vw,2rem);right:clamp(1rem,4vw,4rem);left:clamp(1rem,4vw,4rem);display:flex;justify-content:flex-end;gap:.25rem;pointer-events:auto}.scroll-scrub__route-button{min-height:2.75rem;padding:.65rem .9rem;border:0;color:var(--ss-muted);background:transparent;font:inherit;cursor:pointer}.scroll-scrub__route-button:hover,.scroll-scrub__route-button[aria-current=step]{color:var(--ss-ink)}.scroll-scrub__route-button[aria-current=step]{text-decoration:underline;text-decoration-color:var(--ss-accent);text-decoration-thickness:.15em;text-underline-offset:.3em}.scroll-scrub__route-button:focus-visible{outline:2px solid var(--ss-accent);outline-offset:3px}.scroll-scrub__story{position:relative;z-index:3;margin-top:-100dvh;pointer-events:none}.scroll-scrub__chapter,.scroll-scrub__connector-band{position:relative}.scroll-scrub__chapter-pin{position:sticky;top:0;display:flex;align-items:center;min-height:100dvh;padding:clamp(5rem,9vw,8rem) clamp(1.25rem,6vw,6rem);pointer-events:none}.scroll-scrub__chapter[data-align=right] .scroll-scrub__chapter-pin{justify-content:flex-end}.scroll-scrub__copy{position:relative;width:min(40rem,48vw);pointer-events:auto}.scroll-scrub__copy:before{position:absolute;z-index:-1;inset:-3rem -5rem;content:"";background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ss-bg) 88%,transparent) 0%,color-mix(in srgb,var(--ss-bg) 58%,transparent) 52%,transparent 76%);pointer-events:none}.scroll-scrub__kicker{max-width:30ch;margin:0 0 1rem;color:var(--ss-accent);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.scroll-scrub__title{max-width:13ch;margin:0;color:var(--ss-ink);font:inherit;font-size:clamp(2.75rem,6vw,6.75rem);font-weight:700;line-height:.94;letter-spacing:-.045em;text-wrap:balance}.scroll-scrub__body{max-width:42ch;margin:1.5rem 0 0;color:var(--ss-muted);font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55}.scroll-scrub__tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.5rem 0 0;padding:0;list-style:none}.scroll-scrub__tags li{padding:.45rem .7rem;border:1px solid color-mix(in srgb,var(--ss-ink) 20%,transparent);color:var(--ss-ink);font-size:.82rem}.scroll-scrub__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}@media(max-width:860px){.scroll-scrub__poster,.scroll-scrub__video{object-position:var(--ss-mobile-position)}.scroll-scrub__route{right:max(.75rem,env(safe-area-inset-right));left:max(.75rem,env(safe-area-inset-left));justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.scroll-scrub__route-button{flex:0 0 auto}.scroll-scrub__chapter-pin,.scroll-scrub__chapter[data-align=right] .scroll-scrub__chapter-pin{align-items:flex-end;justify-content:flex-start;padding:6.5rem max(1.25rem,env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left))}.scroll-scrub__copy{width:min(100%,36rem)}.scroll-scrub__copy:before{inset:-3rem -2rem;background:linear-gradient(to top,var(--ss-bg) 0%,color-mix(in srgb,var(--ss-bg) 82%,transparent) 58%,transparent 100%)}.scroll-scrub__title{max-width:14ch;font-size:clamp(2.3rem,11vw,4.5rem)}}@media(prefers-reduced-motion:reduce){.scroll-scrub__chapter{min-height:100dvh!important}.scroll-scrub__connector-band{display:none}.scroll-scrub__progress span{transition:none}}

/* ═══════════════════════════════════════════════════════════════════
   ROCK OF AGES TRUCKING — NIGHT MANIFEST KIT
   ───────────────────────────────────────────────────────────────────
   Warm graphite canvas, one sodium-orange accent, hairline-ruled cells
   and boxed mono labels — the language of a rate confirmation, not of a
   SaaS landing page. Ivory survives in exactly one role: the inverted
   application band, which reads as the document you sign.

   Contrast (WCAG 2.1, computed):
     ink  F5EFDF on bg 13100A ....... 16.54  AAA
     soft B3A891 on bg 13100A .......  8.07  AAA
     soft B3A891 on surface 1A160E ..  7.66  AAA
     faint 948870 on bg 13100A ......  5.44  AA   (unfilled figures only)
     accent F58220 on bg 13100A .....  7.32  AAA
     lift  FF9A45 on bg 13100A ......  9.00  AAA
     bg 13100A on accent F58220 .....  7.32  AAA  (button label)
     line-strong 7A664A on bg .......  3.46  passes 1.4.11 non-text
   Ivory band:
     paper-ink 1C1810 on FAF6EE ..... 16.41  AAA
     paper-soft 6B6252 on FAF6EE ....  5.58  AA
     paper-soft 6B6252 on FFFFFF ....  6.01  AA   (field placeholder — no
                                                   opacity: at 0.75 it was
                                                   3.46 and failed 1.4.3)
     paper-accent B35205 on FAF6EE ..  4.72  AA   (small text safe)
     paper-line-strong 94866C .......  3.31  passes 1.4.11 non-text

   Unlayered on purpose: unlayered rules beat Tailwind/Quanta @layer.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── night canvas ─────────────────────────────────────────────── */
  --nx-bg: #13100A;
  --nx-surface: #1A160E;
  --nx-ink: #F5EFDF;
  --nx-ink-soft: #B3A891;
  --nx-ink-faint: #948870;
  --nx-line: #33291A;
  --nx-line-strong: #7A664A;

  /* ── the one accent ───────────────────────────────────────────── */
  --nx-accent: #F58220;
  --nx-accent-lift: #FF9A45;
  --nx-on-accent: #13100A;

  /* ── ivory: application band only ─────────────────────────────── */
  --nx-paper: #FAF6EE;
  --nx-paper-surface: #FFFFFF;
  --nx-paper-well: #F3EDDE;
  --nx-paper-ink: #1C1810;
  --nx-paper-soft: #6B6252;
  --nx-paper-accent: #B35205;
  --nx-paper-line: #E0D8C2;
  --nx-paper-line-strong: #94866C;

  /* ── type ─────────────────────────────────────────────────────── */
  --nx-font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --nx-font-body: "Barlow", system-ui, sans-serif;
  --nx-font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── geometry ─────────────────────────────────────────────────── */
  /* Motion vocabulary. One curve and three durations for the whole site, so
     every transition is a decision from the same set rather than a new
     guess. UI stays under 300ms; only the application confirmation — a
     once-per-visit moment — is allowed the longer beat. */
  --nx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nx-reveal: 260ms;
  --nx-arrive: 420ms;

  --nx-radius: 4px;
  --nx-shell: 84rem;
  --nx-pad-i: clamp(1.25rem, 5vw, 5rem);
  --nx-pad-b: clamp(4.5rem, 9vw, 8rem);
  --nx-nav-h: 4.25rem;
}

html {
  background-color: var(--nx-bg);
  scroll-behavior: smooth;
  /* The document shell pins colorScheme:"dark" on <html>. That is correct for
   * the night canvas; the ivory application band re-declares it locally so its
   * native controls, autofill and scrollbars render light. */
  color-scheme: dark;
  scrollbar-color: var(--nx-line-strong) var(--nx-bg);
}

body {
  background-color: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--nx-accent);
  color: var(--nx-on-accent);
}

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

/* Film grain — the page and the footage share one surface.
   Deliberately NOT `mix-blend-mode`: a fixed, full-viewport blended layer
   forces the whole screen to re-composite on every scrolled frame, and over a
   near-black canvas plain alpha is visually indistinguishable. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--nx-bg);
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--nx-bg);
  border-radius: 999px;
  background: var(--nx-line-strong);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nx-accent);
}

/* The engine's single-scene route nav is redundant behind the site header —
   hide it, keep the accent progress bar. */
.scroll-scrub__route {
  display: none !important;
}

.nx-site {
  overflow-x: clip;
}

/* Keyboard users land here first. */
.nx-skip {
  position: fixed;
  z-index: 200;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--nx-accent);
  border-radius: var(--nx-radius);
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

/* :focus, not :focus-visible — the skip link is only ever reachable by
   keyboard, so it must reveal itself on any focus rather than relying on the
   browser's heuristic. */
.nx-skip:focus {
  transform: translateY(0);
}

/* ── Header ─────────────────────────────────────────────────────── */
.nx-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--nx-nav-h);
  padding: 0.75rem var(--nx-pad-i);
  border-bottom: 1px solid transparent;
  /* backdrop-filter is deliberately NOT transitioned. `none` interpolates as
     blur(0), so the browser really did animate it: a full-width backdrop blur
     re-rasterised every frame for 300 ms at the very start of every scroll,
     which is the worst possible moment for it. The colour and border fades
     carry the change; the blur snaps on. */
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.nx-nav.is-scrolled {
  background: color-mix(in srgb, var(--nx-bg) 86%, transparent);
  border-bottom-color: var(--nx-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nx-wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  white-space: nowrap;
}

.nx-wordmark__name {
  font-family: var(--nx-font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--nx-ink);
}

.nx-wordmark__name::after {
  content: "";
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.34em;
  background: var(--nx-accent);
  vertical-align: baseline;
}

.nx-wordmark__sub {
  font-family: var(--nx-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--nx-ink-soft);
  white-space: nowrap;
}

/* The footer prints the lockup a size up, stacked, above the tagline. */
.nx-wordmark--footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0;
}

.nx-wordmark--footer .nx-wordmark__name {
  font-size: 1.6rem;
}

/* Both lines are the company name, so neither may be dropped on a phone.
   Stack the lockup instead: it costs a little height and saves the width the
   Apply button and menu trigger need. */
@media (max-width: 560px) {
  .nx-nav .nx-wordmark {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }

  .nx-nav .nx-wordmark__name {
    font-size: 1.3rem;
  }

  .nx-nav .nx-wordmark__sub {
    font-size: 0.58rem;
    letter-spacing: 0.22em;
  }
}

@keyframes nx-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-accent) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 0.42rem transparent;
  }
}

@keyframes nx-drawer-in {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

/* ── Buttons ────────────────────────────────────────────────────── */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--nx-radius);
  font-family: var(--nx-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.nx-btn--primary {
  background: var(--nx-accent);
  color: var(--nx-on-accent);
}

/* The brand orange carries a 7.32:1 ratio against graphite text, so the
   primary action keeps this fill on BOTH canvases — the ivory application band
   inverts the page, not the button. */
@media (hover: hover) and (pointer: fine) {
  .nx-btn--primary:hover {
    background: var(--nx-accent-lift);
  }
}

.nx-btn--outline {
  border-color: var(--nx-line-strong);
  color: var(--nx-ink);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .nx-btn--outline:hover {
    border-color: var(--nx-accent);
    color: var(--nx-accent-lift);
  }
}

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

@media (hover: hover) and (pointer: fine) {
  .nx-btn--ghost:hover {
    border-color: var(--nx-ink);
  }
}

/* Control on film — SpaceX register: translucent dark fill, hairline light edge */
.nx-btn--glass {
  border-color: color-mix(in srgb, var(--nx-ink) 38%, transparent);
  color: var(--nx-ink);
  background: color-mix(in srgb, var(--nx-bg) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
  .nx-btn--glass:hover {
    border-color: var(--nx-ink);
    background: color-mix(in srgb, var(--nx-ink) 14%, transparent);
  }
}

/* Touch has no hover, so every control needs a pressed state of its own.
   Same tokens the hover states already use, so a mouse sees no change. */
.nx-btn--primary:active {
  background: var(--nx-accent-lift);
}

.nx-btn--outline:active,
.nx-btn--ghost:active,
.nx-btn--glass:active {
  border-color: var(--nx-accent);
  color: var(--nx-accent-lift);
}

.nx-btn--sm {
  min-height: 2.75rem;
  padding: 0.6rem 1.05rem;
  font-size: 0.72rem;
}

.nx-btn--block {
  width: 100%;
}

.nx-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* ── Section frame ──────────────────────────────────────────────── */
/* The skip link's target. Without the scroll margin the fixed header covers
   the top of what the reader was just sent to. */
#main {
  scroll-margin-top: var(--nx-nav-h);
}

.nx-section {
  position: relative;
  scroll-margin-top: var(--nx-nav-h);
  padding: var(--nx-pad-b) var(--nx-pad-i);
  border-top: 1px solid var(--nx-line);
}

.nx-shell {
  margin-inline: auto;
  max-width: var(--nx-shell);
}

/* Boxed technical label — mono's register, ours by role. */
.nx-label {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 1.4rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-radius);
  color: var(--nx-ink-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nx-h2 {
  margin: 0;
  max-width: 22ch;
  color: var(--nx-ink);
  font-family: var(--nx-font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.nx-lead {
  margin: 1.4rem 0 0;
  max-width: 58ch;
  color: var(--nx-ink-soft);
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Stacked, not split. A big headline on the left with a small explainer
   floating in a right column is the default AI section header; one focused
   message reads better and the lead sits directly under the headline it
   belongs to. */
.nx-section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Hero proof band ────────────────────────────────────────────── */
/* Aurora's move: hard facts in wide-tracked mono, welded to the bottom edge
   of the film. Values marked __ are placeholders — see CONTENT-TODO.md. */
.nx-proof {
  position: relative;
  z-index: 4;
  margin-top: -1px;
  border-top: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
  background: var(--nx-bg);
}

/* The page gutter belongs to the BAND, not to the cells. When the cells
   carried it, the grid was capped at --nx-shell and centred while the padding
   stayed at --nx-pad-i, so past ~1504px the outer figures drifted up to 80px
   inboard of every .nx-h2 above and below them. Now the outer edges sit on the
   same line as the rest of the page at every width. */
.nx-proof {
  padding-inline: var(--nx-pad-i);
}

.nx-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--nx-shell);
}

.nx-proof__cell {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  padding: 1.6rem 1.5rem;
  border-left: 1px solid var(--nx-line);
}

.nx-proof__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.nx-proof__cell:last-child {
  padding-right: 0;
}

.nx-proof__value {
  display: block;
  color: var(--nx-ink);
  font-family: var(--nx-font-mono);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

.nx-proof__value em {
  color: var(--nx-accent);
  font-style: normal;
}

/* An unfilled figure must look unfilled, never like a design flourish. */
.nx-proof__value[data-pending="true"] {
  color: var(--nx-ink-faint);
}

/* The unit is a child with its own colour, so it did not follow the figure
   into the pending state: every entry ships as null today, which made a faint
   grey `__` next to a vivid orange `/mi` — the half with no data was the
   loudest mark in the band, and it spent the accent budget doing it. */
.nx-proof__value[data-pending="true"] em {
  color: inherit;
}

.nx-proof__key {
  display: block;
  margin-top: 0.6rem;
  color: var(--nx-ink-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── The worked example ──────────────────────────────────────────────
   A percentage is an abstraction until it has a load and a dollar figure
   attached, so this band does the arithmetic in public. Mono and tabular
   throughout: these are figures to be compared down a column, not read as
   prose. */
.nx-money {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  margin-top: 3rem;
  border: 1px solid var(--nx-line);
  background: var(--nx-surface);
}

.nx-money__cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.4rem;
  border-left: 1px solid var(--nx-line);
}

.nx-money__cell:first-child {
  border-left: 0;
}

/* The driver's share is the one figure on the page that has to be found
   without reading. It gets the accent; the other two stay quiet. */
.nx-money__cell--you {
  background: color-mix(in srgb, var(--nx-accent) 9%, transparent);
  box-shadow: inset 0 3px 0 var(--nx-accent);
}

.nx-money__key {
  margin: 0;
  color: var(--nx-ink-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nx-money__value {
  margin: 0;
  color: var(--nx-ink);
  font-family: var(--nx-font-mono);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}

.nx-money__cell--you .nx-money__value {
  color: var(--nx-accent);
}

.nx-money__note {
  margin: 0;
  color: var(--nx-ink-soft);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* The arrow is punctuation between the two halves of the sentence, not a
   cell of its own — it carries aria-hidden and no label. */
.nx-money__op {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.9rem;
  border-left: 1px solid var(--nx-line);
  color: var(--nx-ink-faint);
}

/* ── The offer band ─────────────────────────────────────────────
   No backdrop photograph and no plate. The hero film is the page's one image;
   everything below it is type, rules and figures, which is what a driver came
   to read. */
.nx-offer {
  border-top: 1px solid var(--nx-line);
  background: var(--nx-bg);
}

/* ── Offer cards: the two shapes the work takes ──────────────────────
   Two cards and not four: there are exactly two answers to "where would I be
   running", and padding the row out with a third would invent one. */
.nx-offer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3rem;
  border: 1px solid var(--nx-line-strong);
  background: var(--nx-line-strong);
}

.nx-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 2rem 1.8rem 2.2rem;
  background: var(--nx-bg);
}

.nx-card__tag {
  align-self: flex-start;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--nx-line-strong);
  border-radius: var(--nx-radius);
  color: var(--nx-accent);
  font-family: var(--nx-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nx-card__title {
  margin: 0;
  color: var(--nx-ink);
  font-family: var(--nx-font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  text-wrap: balance;
}

.nx-card__text {
  margin: 0;
  max-width: 34ch;
  color: var(--nx-ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* An answer that snaps open moves every question below it with no bridge.
   `interpolate-size` lets the intrinsic height be transitioned; where the
   browser lacks it the accordion simply snaps, as it does today. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
}

/* ═══ APPLICATION BAND — the one ivory surface ══════════════════════
   Role: the document you sign. Ivory appears here and nowhere else.
   color-scheme flips locally so native controls, autofill and the
   caret render light inside this band. */
.nx-apply {
  color-scheme: light;
  border-top: 1px solid var(--nx-line);
  background: var(--nx-paper);
  color: var(--nx-paper-ink);
}

.nx-apply .nx-label {
  border-color: var(--nx-paper-line-strong);
  color: var(--nx-paper-soft);
}

.nx-apply .nx-h2 {
  color: var(--nx-paper-ink);
}

.nx-apply .nx-lead {
  color: var(--nx-paper-soft);
}

.nx-apply :focus-visible {
  outline-color: var(--nx-paper-accent);
}

.nx-apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.nx-apply__promise {
  display: grid;
  gap: 0.9rem;
  margin-top: 2.2rem;
  padding: 0;
  list-style: none;
}

.nx-apply__promise li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--nx-paper-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.nx-apply__promise svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--nx-paper-soft);
}

.nx-phone {
  color: var(--nx-paper-accent);
  font-family: var(--nx-font-mono);
  font-weight: 600;
  text-decoration: none;
  font-feature-settings: "tnum";
}

@media (hover: hover) and (pointer: fine) {
  .nx-phone:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ── Form ───────────────────────────────────────────────────────── */
.nx-form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--nx-paper-line-strong);
  background: var(--nx-paper-surface);
}

.nx-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.nx-field {
  display: grid;
  gap: 0.4rem;
}

.nx-field__label {
  color: var(--nx-paper-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nx-field__req {
  color: var(--nx-paper-accent);
}

.nx-field__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--nx-paper-line-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-paper-surface);
  color: var(--nx-paper-ink);
  font-family: var(--nx-font-body);
  font-size: 1rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.nx-field__input::placeholder {
  /* No opacity. --nx-paper-soft on the white field is 6.01:1; compositing it
     at 0.75 dropped the hint text to 3.46:1, under the 4.5:1 that 1rem body
     text needs. Every placeholder on the application form was failing 1.4.3. */
  color: var(--nx-paper-soft);
}

@media (hover: hover) and (pointer: fine) {
  .nx-field__input:hover {
    border-color: var(--nx-paper-ink);
  }
}

/* The border + ring is the POINTER focus treatment. Scoping the outline
   suppression to :not(:focus-visible) leaves the global 2px outline in place
   for keyboard users, who otherwise had a 1.43:1 state change as their only
   indicator — this selector is more specific than the bare :focus-visible rule
   and was silently winning against it. */
.nx-field__input:focus:not(:focus-visible) {
  outline: none;
}

.nx-field__input:focus {
  border-color: var(--nx-paper-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-paper-accent) 22%, transparent);
}

.nx-field__input[aria-invalid="true"] {
  border-color: #A3231B;
}

/* Chromium resolves autofill styling against the used color-scheme. The band
   declares `color-scheme: light`, but Chrome still paints its own pale-blue
   fill — repaint it as the field's own surface so an autofilled form does not
   suddenly look like a different design. */
.nx-field__input:-webkit-autofill,
.nx-field__input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--nx-paper-ink);
  -webkit-box-shadow: inset 0 0 0 100px var(--nx-paper-surface);
  caret-color: var(--nx-paper-ink);
}

.nx-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nx-paper-ink);
  -webkit-box-shadow:
    inset 0 0 0 100px var(--nx-paper-surface),
    0 0 0 3px color-mix(in srgb, var(--nx-paper-accent) 22%, transparent);
}

/* iOS gives input[type="date"] an intrinsic width of its own — the native
   date picker's — and `width: 100%` does not constrain it. On an iPhone the
   control grew past the right edge of the form card while every other field
   sat inside it; in Chrome, which sizes the control normally, nothing was
   wrong, which is why this only showed up on a real phone.

   Dropping the native appearance is what actually gives the box back to the
   layout; `min-width: 0` then lets it shrink inside its grid cell, since a
   form control's default `min-width: auto` refuses to go below its intrinsic
   size. */
input[type="date"].nx-field__input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}

/* With the native appearance gone, iOS stops centring the value box, but it
   still needs telling where the text goes. */
input[type="date"].nx-field__input::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* A grid item's default `min-width: auto` is the other half of the same
   problem: without this the cell itself refuses to shrink below whatever the
   control claims it needs. */
.nx-field {
  min-width: 0;
}

select.nx-field__input {
  appearance: none;
  padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nx-paper-soft) 50%),
    linear-gradient(135deg, var(--nx-paper-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 55%,
    calc(100% - 0.75rem) 55%;
  background-size:
    0.3rem 0.3rem,
    0.3rem 0.3rem;
  background-repeat: no-repeat;
}

/* ── The licence attachment ──────────────────────────────────────────
   A real <input type="file"> that cannot be restyled, so it is clipped to a
   pixel inside its own <label> and the label is what gets drawn. The input is
   NOT display:none — that would take it out of the tab order and stop screen
   readers announcing the control and its chosen-file state. */
.nx-file {
  display: grid;
  gap: 0.5rem;
}

.nx-file__drop {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border: 1px dashed var(--nx-paper-line-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-paper-well);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nx-file__drop:hover {
    border-color: var(--nx-paper-accent);
  }
}

.nx-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard focus lands on the clipped input, so the ring has to be drawn on
   the label that stands in for it. */
.nx-file__drop:has(.nx-file__input:focus-visible) {
  border-color: var(--nx-paper-accent);
  border-style: solid;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-paper-accent) 22%, transparent);
}

.nx-file__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nx-radius);
  background: var(--nx-paper-surface);
  color: var(--nx-paper-accent);
}

.nx-file__copy {
  display: grid;
  gap: 0.15rem;
}

.nx-file__copy strong {
  color: var(--nx-paper-ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.nx-file__copy small {
  color: var(--nx-paper-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.nx-file__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--nx-paper-soft);
  font-size: 0.83rem;
}

/* Empty most of the time. Without a floor the form jumps by a line the moment
   a file is picked. */
.nx-file__status:empty {
  display: none;
}

.nx-file__status svg {
  flex: none;
  color: var(--nx-paper-accent);
}

.nx-file__name {
  overflow: hidden;
  max-width: 18ch;
  color: var(--nx-paper-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-file__size {
  font-family: var(--nx-font-mono);
  font-size: 0.75rem;
  font-feature-settings: "tnum";
}

.nx-file__remove {
  margin-left: auto;
  /* 24px tall including the padding: WCAG 2.5.8, and this one is a bare word
     with no enclosing label to inherit a bigger target from. */
  padding: 0.3rem 0.1rem;
  border: 0;
  background: none;
  color: var(--nx-paper-accent);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.nx-success__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--nx-paper-line-strong);
  border-radius: var(--nx-radius);
  color: var(--nx-paper-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.nx-success__note svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--nx-paper-accent);
}

.nx-file__error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: #8E1F18;
}

.nx-file__error svg {
  margin-top: 0.15rem;
  color: #A3231B;
}

.nx-form__error {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid #A3231B;
  border-radius: var(--nx-radius);
  color: #8E1F18;
  background: color-mix(in srgb, #A3231B 7%, transparent);
  font-size: 0.9rem;
}

/* Off-screen rather than display:none — a bot that skips hidden inputs is
   exactly the bot this is meant to catch. Nothing here is reachable by a
   person: the wrapper is aria-hidden and the input is tabIndex -1. */
.nx-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nx-form__note {
  margin: 0;
  color: var(--nx-paper-soft);
  font-size: 0.8rem;
  text-align: center;
}

@keyframes nx-arrive {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

.nx-success {
  animation: nx-arrive var(--nx-arrive) var(--nx-ease-out) both;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--nx-paper-accent);
  background: var(--nx-paper-surface);
}

.nx-success__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.9rem 0 0;
  color: var(--nx-paper-ink);
  font-family: var(--nx-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
}

.nx-success__title svg {
  flex: none;
  color: var(--nx-paper-accent);
}

.nx-success__text {
  margin: 0.8rem 0 0;
  color: var(--nx-paper-soft);
  line-height: 1.62;
}

.nx-success__id {
  color: var(--nx-paper-ink);
  font-family: var(--nx-font-mono);
  font-weight: 600;
  font-feature-settings: "tnum";
}

/* ── Footer ─────────────────────────────────────────────────────── */
.nx-footer {
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--nx-pad-i) 2rem;
  border-top: 1px solid var(--nx-line);
  background: var(--nx-bg);
  color: var(--nx-ink);
}

.nx-footer__grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1.3fr;
  gap: 2.5rem;
}

/* Two cells, not three: the section links went with the sections. The action
   sits hard right so the footer still ends on the one thing to do. */
.nx-footer__grid--slim {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.nx-footer__cta {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 0.9rem;
}

.nx-footer__cta .nx-footer__tagline {
  margin: 0;
}

.nx-footer__tagline {
  margin: 0.8rem 0 0;
  max-width: 32ch;
  color: var(--nx-ink-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

.nx-footer__monogram {
  margin: 3.5rem 0 0;
  font-family: var(--nx-font-display);
  /* Sized so the full name fits the shell at every width — a company name
     clipped mid-word reads as a bug, not as an editorial bleed. */
  font-size: clamp(1.5rem, 6.3vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--nx-line-strong);
  user-select: none;
}

.nx-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--nx-line);
  color: var(--nx-ink-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.nx-footer__legal span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-right: 1.25rem;
  background: var(--nx-line-strong);
  vertical-align: -0.1em;
}

/* ── Sticky action bar (small screens) ──────────────────────────── */
.nx-callbar {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem max(0.75rem, env(safe-area-inset-right))
    calc(0.7rem + env(safe-area-inset-bottom))
    max(0.75rem, env(safe-area-inset-left));
  border-top: 1px solid var(--nx-line-strong);
  background: color-mix(in srgb, var(--nx-bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nx-callbar .nx-btn {
  flex: 1;
}

/* ── Admin (dispatch panel — a light document view) ─────────────── */
.nx-admin {
  color-scheme: light;
  min-height: 100dvh;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--nx-paper);
  color: var(--nx-paper-ink);
}

.nx-admin :focus-visible {
  outline-color: var(--nx-paper-accent);
}

.nx-admin__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.nx-admin__kicker {
  margin: 0 0 0.4rem;
  color: var(--nx-paper-accent);
  font-family: var(--nx-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nx-admin__title {
  margin: 0;
  color: var(--nx-paper-ink);
  font-family: var(--nx-font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
}

.nx-admin .nx-btn--ghost {
  border-color: var(--nx-paper-line-strong);
  color: var(--nx-paper-ink);
}

@media (hover: hover) and (pointer: fine) {
  .nx-admin .nx-btn--ghost:hover {
    border-color: var(--nx-paper-ink);
  }
}

.nx-admin .nx-btn--primary {
  color: var(--nx-paper-surface);
  background: var(--nx-paper-accent);
}

@media (hover: hover) and (pointer: fine) {
  .nx-admin .nx-btn--primary:hover {
    background: var(--nx-paper-ink);
  }
}

.nx-admin .nx-field__label {
  color: var(--nx-paper-soft);
}

.nx-admin__gate {
  display: grid;
  gap: 1rem;
  max-width: 24rem;
}

.nx-admin__count {
  color: var(--nx-paper-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nx-admin__empty {
  margin-top: 2rem;
  padding: 2rem;
  border: 1px dashed var(--nx-paper-line-strong);
  color: var(--nx-paper-soft);
}

.nx-admin__table-wrap {
  margin-top: 1.2rem;
  overflow-x: auto;
  border: 1px solid var(--nx-paper-line-strong);
  background: var(--nx-paper-surface);
}

.nx-admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.nx-admin__table th {
  padding: 0.8rem 0.9rem;
  text-align: left;
  background: var(--nx-paper-well);
  color: var(--nx-paper-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nx-admin__table td {
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--nx-paper-line);
  vertical-align: top;
}

@media (hover: hover) and (pointer: fine) {
  .nx-admin__table tbody tr:hover {
    background: var(--nx-paper-well);
  }
}

.nx-admin__cell-mono {
  color: var(--nx-paper-soft);
  font-family: var(--nx-font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
  font-feature-settings: "tnum";
}

.nx-admin .nx-phone {
  color: var(--nx-paper-accent);
}

/* ── The film ───────────────────────────────────────────────────── */
.scroll-scrub__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 54%, rgb(5 4 3 / 0.48) 100%),
    linear-gradient(
      to bottom,
      rgb(5 4 3 / 0.5),
      transparent 18%,
      transparent 62%,
      rgb(5 4 3 / 0.86)
    );
}

.scroll-scrub__progress {
  height: 2px;
  background: color-mix(in srgb, var(--ss-ink) 10%, transparent);
}

.scroll-scrub .scroll-scrub__title {
  font-family: var(--nx-font-display);
  font-size: clamp(3rem, 7vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: 0.004em;
  max-width: 15ch;
}

.scroll-scrub .scroll-scrub__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  max-width: none;
  white-space: nowrap;
  padding: 0;
  color: var(--ss-ink);
  font-family: var(--nx-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
}

.scroll-scrub .scroll-scrub__body {
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.62;
  text-wrap: pretty;
}

/* The copy scrim was a soft radial halo on the old light kit; on the night
   canvas it can be a directional wipe that reads as the road's own shadow. */
.scroll-scrub .scroll-scrub__copy::before {
  inset: -4rem -8rem -4rem -6rem;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ss-bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--ss-bg) 62%, transparent) 55%,
    transparent 88%
  );
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* Four abreast becomes two over two: below this the dollar figures start
     shrinking to fit rather than being read, which is the one thing this band
     exists to prevent. The arrow spans the first row as a divider — it is
     aria-hidden, so its position carries no meaning to lose. */
  .nx-money {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nx-money__op {
    display: none;
  }

  /* The gross spans the top and the two shares sit under it, which is the
     sentence the band is making. Left as a plain 2x2 the odd cell out was
     "we get", and the company's cut ended up the widest box on the row. */
  .nx-money__cell:first-child {
    grid-column: 1 / -1;
    border-left: 0;
  }

  .nx-money__cell {
    border-left: 1px solid var(--nx-line);
    border-top: 1px solid var(--nx-line);
  }

  .nx-money__cell:first-child {
    border-top: 0;
  }

  .nx-money__cell--you {
    border-left: 0;
  }

  .nx-apply__grid {
    grid-template-columns: 1fr;
  }

  .nx-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nx-proof__cell:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .nx-proof__cell:nth-child(2n) {
    padding-right: 0;
  }

  .nx-proof__cell:nth-child(n + 3) {
    border-top: 1px solid var(--nx-line);
  }

  .nx-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1080px) and (min-width: 621px) {
  .nx-footer__cta {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
    gap: 1.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--nx-line);
  }
}

@media (max-width: 860px) {
  /* A 16:9 film inside a 9:19.5 viewport is scaled to fit the HEIGHT, so
     `object-fit: cover` crops nothing vertically and the whole sky comes along
     — a third of a phone hero spent on empty blue. Vertical object-position
     cannot help (there is no vertical overflow to move). Scaling the media
     inside its already-clipped layer is what actually reframes it: the truck
     gets bigger, the sky goes away, and the source is 1920px wide so there is
     resolution to spare. */
  .scroll-scrub .scroll-scrub__poster,
  .scroll-scrub .scroll-scrub__video {
    transform: scale(1.45);
    transform-origin: 44% 62%;
  }

  /* Cropping alone cannot remove the sky: the horizon sits ~38% down the frame,
     and zooming past it would upscale a 1920px source beyond 3x on a 2x screen.
     The proper fix is a portrait `mobileClip` + `mobilePoster` — the engine
     already supports both (see ScrollScrubScene) and the project ships neither.
     Until that exists, weight the scrim so the remaining sky reads as night
     depth behind the header rather than an empty blue band. */
  .scroll-scrub__stage::after {
    background:
      radial-gradient(ellipse at center, transparent 58%, rgb(5 4 3 / 0.45) 100%),
      linear-gradient(
        to bottom,
        rgb(5 4 3 / 0.92) 0%,
        rgb(5 4 3 / 0.62) 14%,
        rgb(5 4 3 / 0.2) 28%,
        transparent 42%,
        rgb(5 4 3 / 0.55) 72%,
        rgb(5 4 3 / 0.9) 100%
      );
  }
}

@media (max-width: 900px) {
  /* Revealed only once the hero's own buttons have scrolled away, so the page
     never shows the same call to action twice on one screen. */
  .nx-callbar {
    display: flex;
    transform: translateY(100%);
    visibility: hidden;
    transition:
      transform var(--nx-reveal) var(--nx-ease-out),
      visibility var(--nx-reveal);
  }

  /* Enters and leaves by the same edge it sits on, so the bar reads as one
     object arriving rather than a panel materialising over the page. */
  .nx-callbar[data-visible="true"] {
    transform: translateY(0);
    visibility: visible;
  }

  /* Keep the sticky action bar clear of the page end. */
  .nx-footer {
    padding-bottom: 6rem;
  }

  .nx-offer__grid {
    grid-template-columns: 1fr;
  }

  /* Side by side the card IS the measure, so 34ch fits it. Stacked, the card
     is the full shell and a 34ch line leaves half the box empty. */
  .nx-card__text {
    max-width: 52ch;
  }
}

@media (max-width: 620px) {
  /* One figure per row. Two 3rem numbers side by side on a 375px screen leave
     no room for the label underneath, and the label is what makes the figure
     mean anything. */
  .nx-money {
    grid-template-columns: 1fr;
  }

  .nx-money__cell {
    border-left: 0;
    border-top: 1px solid var(--nx-line);
  }

  .nx-money__cell:first-child {
    border-top: 0;
  }

  .nx-proof__grid {
    grid-template-columns: 1fr;
  }

  .nx-proof__cell {
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-left: 0;
    border-top: 1px solid var(--nx-line);
  }

  .nx-proof__cell:first-child {
    border-top: 0;
  }

  .nx-proof__key {
    margin-top: 0;
    text-align: right;
  }

  .nx-form__row {
    grid-template-columns: 1fr;
  }

  .nx-footer__grid {
    grid-template-columns: 1fr;
  }

  /* Both spans no longer fit on one line, and a wrapped row put the divider
     at the START of the second line with nothing before it. Stack instead. */
  .nx-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .nx-footer__legal span + span::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .nx-btn,
  .nx-callbar,
  .nx-file__drop,
  .nx-field__input,
  .nx-success {
    transition: none;
    animation: none;
  }
}

/* Paper is a different canvas, not a smaller screen. Browsers drop background
   colours when printing, so the night palette printed as near-white ink on
   white stock — the page came out blank apart from the hairlines. Re-point the
   tokens at ink-on-paper and drop the backdrops, which carry no information
   once they cannot be seen. */
@media print {
  :root {
    --nx-bg: #ffffff;
    --nx-surface: #ffffff;
    --nx-ink: #000000;
    --nx-ink-soft: #333333;
    --nx-ink-faint: #666666;
    --nx-line: #cccccc;
    --nx-line-strong: #999999;
    --nx-accent: #8a4405;
    --nx-on-accent: #ffffff;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .nx-nav,
  .nx-callbar,
  body::after {
    display: none;
  }
}