/* ══════════════════════════════════════════════════════════════
   My Radio Code — Visitors design system
   "white engineering blueprint"

   Tokens, components and rules taken from the Visitors style
   reference verbatim. Do not substitute colours or invent
   variants — this is the system, applied as-is.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Colors */
  --color-carbon:      #181925;
  --color-paper-white: #ffffff;
  --color-linen:       #fafafa;
  --color-mist:        #f5f5f5;
  --color-fog:         #e8e8e8;
  --color-ash:         #999999;
  --color-graphite:    #666666;
  --color-lavender:    #415d4f;
  --color-iris:        #457c67;
  --color-mint:        #33c758;
  --color-mint-wash:   #def6e4;
  --color-amber:       #ffa600;
  --color-sky:         #2c78fc;
  --color-magenta:     #d6409f;
  --color-ember:       #ff3e00;

  --err: var(--color-ember);
  /* Ember (#ff3e00) is 3.53:1 on white — fine as a fill or an icon, short of the
     4.5:1 small-text minimum. This is the same hue darkened to 4.6:1, for error
     TEXT only; --color-ember stays as-is everywhere it is a fill. */
  --color-error-text: #c62d00;

  /* Typography — OpenRunde substitute (spec-approved: DM Sans) */
  --font-openrunde: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --text-caption:    12px;  --leading-caption:    1.33;  --tracking-caption:    -0.32px;
  --text-body:       16px;  --leading-body:       1.5;   --tracking-body:       -0.32px;
  --text-subheading: 18px;  --leading-subheading: 1.33;  --tracking-subheading: -0.32px;
  --text-heading-sm: 24px;  --leading-heading-sm: 1.17;  --tracking-heading-sm: -0.31px;
  --text-heading:    36px;  --leading-heading:    1.22;  --tracking-heading:    -0.61px;
  --text-heading-lg: 48px;  --leading-heading-lg: 1;     --tracking-heading-lg: -0.34px;
  --text-display:    60px;  --leading-display:    1.13;  --tracking-display:    -3px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Spacing */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px;
  --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;
  --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap:    64px;
  --card-padding:   32px;
  --element-gap:    16px;

  /* Border radius */
  --radius-tags:    9999px;
  --radius-cards:   16px;
  --radius-images:  8px;
  --radius-inputs:  8px;
  --radius-tables:  24px;
  --radius-buttons: 9999px;

  /* Shadows */
  --shadow-subtle:   rgba(0,0,0,0.08) 0px 1px 1px 1px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px;
  --shadow-subtle-2: rgba(0,0,0,0.08) 0px 1px 1px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0,0,0,0.06) 0px 1px 3px 0px,
                     rgba(0,0,0,0.06) 0px 8px 16px 0px,
                     rgba(0,0,0,0.02) 0px 0px 0px 1px;

  /* Surfaces */
  --surface-canvas:     #ffffff;
  --surface-linen-band: #fafafa;
  --surface-mist-fill:  #f5f5f5;
  --surface-mint-wash:  #def6e4;

  /* Gradient — Sky→Lavender, atmospheric band only */
  --gradient-hero: linear-gradient(to right in oklab, #2c78fc 0%, #415d4f 100%);
}

/* ─── Reset ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-openrunde);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-carbon);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: 0.04em;
  background: var(--surface-mist-fill);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--color-carbon);
  white-space: nowrap;
}

/* ─── Announcement chip / top bar ────────────────────────── */
/* White fill, Sky tag text + Carbon body, thin border, pill. */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 24px 0;
  background: var(--surface-canvas);
}

.top-bar-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  padding: 6px 14px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-carbon);
  box-shadow: var(--shadow-subtle-2);
}

.top-bar-tag {
  color: var(--color-sky);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.top-bar-item { display: inline-flex; align-items: center; gap: 6px; }
.top-bar-check { color: var(--color-mint); }
.top-bar-sep { color: var(--color-fog); }

/* ─── Navigation pill ────────────────────────────────────── */
/* Single centred pill bar floating at the top. */

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  background: var(--surface-canvas);
}

/* TWO ROWS AT EVERY WIDTH: the mark and the name centred on top, the three
   controls underneath.

   This was already the layout below 720px — the change makes the phone
   behaviour the only behaviour, rather than maintaining two. The desktop row
   put the name hard left, the links centre and the language right, which read
   as three unrelated things sharing a container.

   It costs about 40px of height on desktop. That is the real trade, since the
   serial box is what the page exists for; on a phone it costs nothing, because
   the header already wrapped.

   No markup change anywhere. The DOM order is logo, nav, language, and `order`
   below puts the language first on the second row. A layout that needs no
   markup change cannot half-apply across 105 pages. */
.nav-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0;
  row-gap: 0;
  width: 100%;
  max-width: 420px;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  /* Not --radius-tags: a stadium curve on a ~90px-tall box bows the sides.
     --radius-tables is the system's radius for things that are taller than
     they are round. */
  border-radius: var(--radius-tables);
  padding: 14px 20px 10px;
  box-shadow: var(--shadow-subtle-2);
}

/* Row 1, and the rule.

   The divider is the LOGO's bottom border, not a top border shared by the two
   items below it. Those are two adjacent boxes, so their borders meet at a
   fractional pixel and the join shows as a seam at some zoom levels and
   devicePixelRatios. One element means one line, always. */
.nav-pill .site-logo {
  order: 1;
  width: 100%;
  justify-content: center;
  font-size: var(--text-subheading);
  padding-bottom: 11px;
  border-bottom: 1px solid var(--color-fog);
}

/* Row 2. The two share the width so the three controls space evenly across the
   pill rather than bunching in the middle. */
.nav-pill .lang-select,
.nav-pill .header-nav { margin-top: 9px; }
.nav-pill .lang-select { order: 2; flex: 1 1 0; display: flex; justify-content: center; }
.nav-pill .header-nav  { order: 3; flex: 2 1 0; justify-content: space-around; gap: 0; }

/* The menu hangs off the right edge of .lang-select. That was fine when the
   selector sat at the right of the pill; now it sits at the left third, and a
   160px menu anchored right would hang off the outside of the card. */
.nav-pill .lang-select-menu { left: 0; right: auto; }

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.3px;
  color: var(--color-carbon);
}

/* The padlock-radio mark, inline SVG rather than the old ◉ glyph.
 *
 * Sized in em so it tracks the wordmark at whatever size .site-logo is set to,
 * and coloured by inheritance so the footer, the nav and any inverted surface
 * all get it right without a second asset.
 *
 * The simplified drawing is deliberate: the full mark's dashes and preset
 * buttons collapse into a smudge below about 32px, and this renders at ~20. */
.logo-mark {
  width: 1.45em;
  height: 1.5em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.35em;
  color: var(--color-carbon);
}

/* One word, one line. "My Radio Code" wrapped to two lines inside the nav pill
   on narrow screens — which is where most of this traffic arrives. */
.site-logo { white-space: nowrap; }

.header-nav { display: flex; align-items: center; gap: 4px; }

.header-nav a {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-carbon);
  padding: 6px 12px;
  border-radius: var(--radius-tags);
  transition: color .15s ease;
}

.header-nav a:hover { color: var(--color-lavender); }

/* Language selector — visual only for now; English is the sole,
   pre-checked option. Don't list languages we haven't translated
   into, that reads as broken rather than aspirational. */
.lang-select { position: relative; }

.lang-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--color-graphite);
  border-radius: var(--radius-tags);
  padding: 6px 12px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.lang-select-btn:hover { color: var(--color-carbon); background: var(--surface-mist-fill); }

.lang-icon { width: 16px; height: 16px; flex-shrink: 0; }
.lang-chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s ease; }
.lang-select-btn[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

.lang-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle-3);
  padding: 6px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 20;
}

.lang-select.is-open .lang-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-inputs);
  font-size: 14px;
  color: var(--color-carbon);
  white-space: nowrap;
}

.lang-select-item svg { width: 16px; height: 16px; color: var(--color-mint); flex-shrink: 0; }

/* ─── Hero — centred text stack ──────────────────────────── */

.hero {
  background: var(--surface-canvas);
  padding: 56px 32px 24px;
  text-align: center;
}

.hero-inner { max-width: 900px; margin: 0 auto; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  padding: 6px 14px 6px 11px;
  margin-bottom: var(--spacing-32);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  box-shadow: var(--shadow-subtle-2);
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-tags);
  background: var(--color-mint);
  flex-shrink: 0;
}

.live-text { color: var(--color-carbon); transition: opacity .4s ease; }

.hero-text h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
  margin-bottom: var(--spacing-20);
}

.hero-sub {
  font-size: var(--text-subheading);
  line-height: 1.5;
  letter-spacing: var(--tracking-subheading);
  color: var(--color-graphite);
  max-width: 34em;
  margin: 0 auto var(--spacing-32);
}

.hero-check {
  max-width: 34em;
  margin: 0 auto;
}

.hero-check-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-graphite);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.hero-check-btn:hover { background: var(--color-fog); }
.hero-check-btn:disabled { cursor: default; }

.hcb-icon { width: 18px; height: 18px; }
.hcb-spinner { animation: spin .7s linear infinite; }
#hcb-check { color: var(--color-mint); }
#hcb-error { color: var(--err); }

.hero-check-status {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  /* graphite (5.74:1), not ash (2.85:1). This line carries the entire purchase
     conversation — "Checking…", "We have your code", "Enter your email, then pay
     £4.99", every error and the mismatch guidance — and the customer is usually
     outdoors at their car, on a phone, in daylight. */
  color: var(--color-graphite);
  min-height: 16px;
  text-align: center;
  transition: color .15s ease;
}

.hero-check-status.is-error   { color: var(--color-error-text); }

.hero-check-status a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-fog);
  transition: color .15s ease, text-decoration-color .15s ease;
}

.hero-check-status a:hover {
  color: var(--color-lavender);
  text-decoration-color: var(--color-lavender);
}
/* iris (4.6:1), not mint (2.22:1) — mint stays for fills and ticks, never text. */
.hero-check-status.is-success { color: var(--color-iris); }

.hero-logos-label {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
  margin-top: var(--spacing-32);
}

/* ─── Brand logo loop ────────────────────────────────────── */
/* Small greyscale strip, marques scrolling continuously.
   Two identical tracks sit side by side and both translate by
   -100% of their own width, so the second is exactly where the
   first was when the animation restarts — no visible seam. */

.logo-loop {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background: var(--surface-canvas);
  padding-bottom: var(--spacing-24);
  user-select: none;
  /* Fade both edges so marques enter and leave instead of
     hard-cutting at the viewport edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-loop-track {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-shrink: 0;
  /* The animation moves this track by translateX(-100%), which is
     relative to the track's OWN box — so the trailing space before
     the duplicate track must live inside that box (padding-right),
     not as a gap on the parent. That's what keeps the seam between
     this track's last logo and the duplicate's first logo exactly
     44px, matching every other gap, with no snap at the loop point. */
  padding-right: 44px;
  animation: logo-loop-scroll 38s linear infinite;
}

/* Carousel continues on hover — no pause */

@keyframes logo-loop-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.logo-loop-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  opacity: .5;
}

.logo-loop-icon {
  width: 20px; height: 20px;
  fill: var(--color-graphite);
  flex-shrink: 0;
}

.logo-loop-item span {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  white-space: nowrap;
}

/* Reduced motion: stop the loop and show one static centred row.
   A shortened animation is not an acceptable fallback for something
   that never stops on its own. */
@media (prefers-reduced-motion: reduce) {
  .logo-loop { justify-content: center; }
  .logo-loop-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .logo-loop-track[aria-hidden="true"] { display: none; }
}

/* ─── Buttons ────────────────────────────────────────────── */

/* Primary Action Button — Lavender fill, white text, pill. */
.btn-amber,
.btn-primary,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-lavender);
  color: #fff;
  border-radius: var(--radius-buttons);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  box-shadow: var(--shadow-subtle);
  transition: background .15s ease, transform .08s ease;
}

.btn-amber { width: 100%; padding: 14px 24px; font-size: 15px; }
.btn-primary { width: 100%; padding: 14px 24px; font-size: 15px; }
.cta-button { width: 100%; padding: 14px 24px; font-size: 15px; }

.btn-amber:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.cta-button:hover:not(:disabled) { background: #476e59; }

.btn-amber:active:not(:disabled),
.btn-primary:active:not(:disabled),
.cta-button:active:not(:disabled) { transform: translateY(1px); }

.btn-amber:disabled,
.btn-primary:disabled,
.cta-button:disabled { opacity: .55; cursor: default; }

/* Ghost Button — transparent, Graphite text, no border. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--color-graphite);
  border-radius: var(--radius-buttons);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  transition: color .15s ease;
}

.btn-ghost:hover { color: var(--color-carbon); }

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: var(--radius-tags);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Gradient band + floating console ───────────────────── */
/* Full-bleed atmospheric band with the product card floating in it.
   Gradients are section backgrounds only — never on buttons or cards. */

.gradient-band {
  background: var(--gradient-hero);
  padding: var(--spacing-64) 32px;
}

.gradient-band-inner { max-width: 560px; margin: 0 auto; }

.console {
  background: var(--surface-canvas);
  border-radius: var(--radius-tables);
  padding: var(--card-padding);
  box-shadow: var(--shadow-subtle-3);
}

.console-title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
  margin-bottom: 6px;
}

.console-sub {
  font-size: 14px;
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin-bottom: var(--spacing-24);
}

.field { margin-bottom: var(--element-gap); }

.field-label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin-bottom: 8px;
}

.bottom-cta-input,
.hero-check-input,
.serial-input {
  width: 100%;
  background: var(--surface-mist-fill);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-inputs);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-carbon);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.hero-check-input { padding-left: 20px; padding-right: 54px; border-radius: var(--radius-buttons); }

.bottom-cta-input::placeholder,
.hero-check-input::placeholder {
  color: var(--color-ash);
  text-transform: none;
  letter-spacing: var(--tracking-caption);
  font-family: var(--font-openrunde);
  font-size: 14px;
}

.bottom-cta-input:focus,
.hero-check-input:focus,
.serial-input:focus {
  outline: none;
  background: var(--surface-canvas);
  border-color: var(--color-lavender);
  box-shadow: 0 0 0 3px rgba(18, 53, 36, 0.22);
}

/* Rotating placeholder — sits over the real (empty) placeholder and
   cycles example serials so a first-time visitor can see the range of
   formats accepted. Hidden the moment the field has a value or focus. */
.serial-input-wrap { position: relative; width: 100%; }

.serial-rotator {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  overflow: hidden;
  pointer-events: none;
  color: var(--color-ash);
  font-family: var(--font-openrunde);
  font-size: 14px;
  letter-spacing: var(--tracking-caption);
  opacity: 1;
  visibility: visible;
  transition: opacity .15s ease;
}

.hero-check-wrap .serial-rotator { padding-left: 20px; padding-right: 54px; }

.serial-rotator.is-hidden { opacity: 0; visibility: hidden; }

/* graphite: this is the example serial the customer copies the SHAPE of. */
.serial-rotator-value {
  display: inline-block;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.serial-rotator-cursor {
  display: inline-block;
  width: 1px;
  height: 15px;
  margin-left: 2px;
  background: var(--color-ash);
  animation: serial-cursor-blink 1s step-end infinite;
}

@keyframes serial-cursor-blink {
  50% { opacity: 0; }
}

.field-hint {
  margin-top: 8px;
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

.console-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--element-gap);
}

.console-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

.console-trust-icon { color: var(--color-mint); }

/* The brand-page consoles use .trust-row / .trust-icon / .trust-text, which were
   never given rules — the checkmark SVG had no size and rendered full-width on
   all 54 pages. Match the intended .console-trust-item look. */
.trust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--element-gap);
}
.trust-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-mint);
}
.trust-text {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--element-gap);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: rgba(255,255,255,0.82);
}

.trust-sep { color: rgba(255,255,255,0.42); }

/* ─── Result ─────────────────────────────────────────────── */

.result { display: none; }
.result.visible { display: block; }
.result-card { margin-top: var(--element-gap); }

/* Positive state — Mint text on Mint Wash fill. */
.result-ok-badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-mint-wash);
  border-radius: var(--radius-cards);
  padding: 16px 18px;
}

.ok-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: var(--radius-tags);
  background: var(--color-mint);
  color: #fff;
  font-size: 11px;
  margin-top: 2px;
}

.ok-text { display: flex; flex-direction: column; gap: 2px; }

.ok-text strong {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
}

.ok-text span {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

/* Destructive state — Ember, the single error colour. */
.result-error-box {
  background: var(--surface-canvas);
  border: 1px solid var(--color-ember);
  border-radius: var(--radius-cards);
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-ember);
}

/* Delivered code */
.code-reveal {
  background: var(--surface-mint-wash);
  border-radius: var(--radius-cards);
  padding: 24px;
  text-align: center;
}

.code-reveal-label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin-bottom: 8px;
}

.code-reveal-value {
  font-family: var(--font-mono);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  color: var(--color-carbon);
}

.code-reveal-note {
  margin-top: 8px;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

/* ─── Payment form ───────────────────────────────────────── */

.payment-form { margin-top: var(--element-gap); }

.pf-label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  margin-bottom: 8px;
}

#email {
  width: 100%;
  background: var(--surface-mist-fill);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-inputs);
  padding: 13px 16px;
  font-size: 15px;
  letter-spacing: var(--tracking-caption);
  color: var(--color-carbon);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#email::placeholder { color: var(--color-ash); }

#email:focus {
  outline: none;
  background: var(--surface-canvas);
  border-color: var(--color-lavender);
  box-shadow: 0 0 0 3px rgba(18, 53, 36, 0.22);
}

.pf-hint {
  margin: 8px 0 var(--element-gap);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

/* ─── Sections ───────────────────────────────────────────── */

.page-section {
  background: var(--surface-canvas);
  padding: var(--spacing-64) 32px;
}

.page-section.bg-surface { background: var(--surface-linen-band); }

.section-container { max-width: var(--page-max-width); margin: 0 auto; }
.section-narrow > * { max-width: 760px; }

.section-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
}

.section-sub {
  margin-top: 10px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite);
  max-width: 42em;
}

/* ─── Metric callout cards ───────────────────────────────── */
/* White fill, 1px Fog border, 16px radius, tight padding. */

.stats-strip {
  background: var(--surface-canvas);
  padding: var(--spacing-48) 32px;
}

.stats-strip-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-block {
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  padding: 16px 18px;
}

.stat-value {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
}

.stat-label {
  margin-top: 4px;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

/* ─── Brand tags ─────────────────────────────────────────── */

.brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--spacing-32);
}

.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-carbon);
  transition: border-color .15s ease, color .15s ease;
}

.brand-tag:hover { border-color: var(--color-lavender); color: var(--color-lavender); }

.brand-icon {
  width: 16px; height: 16px;
  fill: var(--color-ash);
  flex-shrink: 0;
}

.brand-tag:hover .brand-icon { fill: var(--color-lavender); }

/* ─── Feature cards ──────────────────────────────────────── */
/* Transparent fill, no border, no shadow, Lavender 40px icon circle,
   centre-aligned, 32px vertical padding. */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
  margin-top: var(--spacing-48);
}

.why-card {
  background: transparent;
  border: 0;
  padding: var(--spacing-32) var(--spacing-16);
  text-align: center;
}

.why-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-tags);
  background: var(--color-lavender);
  color: #fff;
  font-size: 16px;
  margin: 0 auto var(--element-gap);
}

.why-title {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  margin-bottom: 8px;
}

.why-body {
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite);
}

/* ─── Steps ──────────────────────────────────────────────── */

.steps-list {
  margin-top: var(--spacing-48);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-32);
}

.step-item { display: flex; gap: 14px; align-items: flex-start; }

.step-n {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-tags);
  background: var(--color-lavender);
  color: #fff;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

.step-body {
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite);
}

.step-body strong {
  display: block;
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  margin-bottom: 5px;
}

/* ─── Accordion ──────────────────────────────────────────── */

.accordion-list { margin-top: var(--spacing-32); }

.accordion { border-bottom: 1px solid var(--color-fog); }
.accordion:first-child { border-top: 1px solid var(--color-fog); }

.accordion-summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 32px 18px 0;
  position: relative;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--color-carbon);
}

.accordion-summary::-webkit-details-marker { display: none; }

.accordion-summary::after {
  content: '+';
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-ash);
}

.accordion[open] .accordion-summary::after { content: '−'; color: var(--color-lavender); }
.accordion-summary:hover { color: var(--color-lavender); }

.accordion-body {
  padding: 0 0 20px;
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite);
  max-width: 62ch;
}

/* ─── FAQ ────────────────────────────────────────────────── */

.faq-list { margin-top: var(--spacing-32); }

.faq-item { border-bottom: 1px solid var(--color-fog); padding: 20px 0; }
.faq-item:first-child { border-top: 1px solid var(--color-fog); }

.faq-q {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--color-carbon);
  margin-bottom: 8px;
}

.faq-a {
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite);
  max-width: 62ch;
}

/* ─── Bottom CTA — pricing tier card ─────────────────────── */
/* White fill, 1px Fog border, 24px radius, 64px/32px padding,
   no shadow. */

.bottom-cta {
  background: var(--surface-linen-band);
  padding: var(--spacing-64) 32px;
}

.bottom-cta-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tables);
  padding: var(--spacing-64) var(--spacing-32);
}

.bottom-cta-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
}

.bottom-cta-sub {
  margin-top: 10px;
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-graphite);
}

.bottom-cta-form { display: flex; gap: 8px; margin-top: var(--spacing-24); }
.bottom-cta-form .serial-input-wrap { flex: 1; }
.bottom-cta-btn { width: auto; flex-shrink: 0; padding: 14px 24px; }

.bottom-cta-trust {
  margin-top: 14px;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

/* ─── Footer ─────────────────────────────────────────────── */

.site-footer {
  background: var(--surface-canvas);
  border-top: 1px solid var(--color-fog);
  padding: var(--spacing-48) 32px;
}

.footer-inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-20);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.3px;
  color: var(--color-carbon);
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }

.footer-nav a {
  font-size: 14px;
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

.footer-nav a:hover { color: var(--color-carbon); }

.footer-copy {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

.footer-copy a { color: var(--color-lavender); font-weight: var(--font-weight-medium); }

/* ─── Brands directory page ──────────────────────────────── */

.brands-page-hero,
.brand-page-hero {
  background: var(--surface-canvas);
  padding: var(--spacing-48) 32px var(--spacing-32);
  text-align: center;
}

.brands-page-hero-inner,
.brand-page-hero-inner { max-width: 760px; margin: 0 auto; }
.brands-page-hero .section-sub,
.brand-page-hero .section-sub { margin-left: auto; margin-right: auto; }

.brands-search-wrap {
  position: relative;
  max-width: 420px;
  margin: var(--spacing-24) auto 0;
}

.brands-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-mist-fill);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-buttons);
  padding: 14px 20px;
  padding-right: 48px;
  font-size: 15px;
  color: var(--color-carbon);
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.brands-search-input::placeholder { color: var(--color-ash); }

.brands-search-input:focus {
  outline: none;
  background: var(--surface-canvas);
  border-color: var(--color-lavender);
  box-shadow: 0 0 0 3px rgba(18, 53, 36, 0.22);
}

.brands-search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-ash);
  pointer-events: none;
}

.brands-empty {
  text-align: center;
  font-size: 14px;
  color: var(--color-graphite);
  padding: var(--spacing-32) 0;
}

.brands-empty a { color: var(--color-lavender); text-decoration: underline; text-underline-offset: 2px; }

.breadcrumb {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
  margin-bottom: var(--element-gap);
}

.breadcrumb a { color: var(--color-graphite); }
.breadcrumb a:hover { color: var(--color-lavender); }
.breadcrumb-sep { margin: 0 7px; color: var(--color-fog); }

.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--element-gap);
  margin-top: var(--spacing-32);
}

/* Pricing-tier treatment: white fill, 1px Fog, no shadow. */
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  transition: border-color .15s ease;
}

.brand-card:hover { border-color: var(--color-lavender); }

.brand-card-logo {
  width: 48px; height: 48px;
  fill: currentColor;
  color: var(--color-carbon);
  margin-bottom: 12px;
}

.brand-card-name {
  font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  margin-bottom: 4px;
}

/* Feature-category colour: each card family gets exactly one. */
.brand-card-serials {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-sky);
  margin-bottom: 10px;
}

.brand-card-desc {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
  flex: 1;
  margin-bottom: var(--element-gap);
}

.brand-card-cta {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-lavender);
}

.brand-card-any { background: var(--surface-linen-band); }

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 1000px) {
  .hero-text h1 { font-size: var(--text-heading-lg); letter-spacing: -1.6px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-list { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .site-header { padding: 14px 16px; }

  /* The two-row header is now the layout at every width, so this block no
     longer has to build it — it only tightens it. What used to live here (the
     nav was display:none below 720px, leaving the phone with no navigation at
     all, which was the majority of visitors) is in the base rules above.

     No hamburger, same reasoning as before: it needs a button and a script on
     all 105 pages, each of which carries its own inline scripts to work
     around. There are only ever three controls and they fit on one row. */
  .nav-pill { padding: 13px 14px 9px; }
  .header-nav a { font-size: 13px; padding: 8px 6px; }
  .nav-pill .lang-select .lang-select-btn { font-size: 13px; padding: 6px 8px; }
  .nav-pill .site-logo { font-size: var(--text-body); }

  .top-bar { padding: 16px 16px 0; }
  .top-bar-item:not(:first-child), .top-bar-sep { display: none; }

  /* Every value here is bought back to keep the serial input above the
     fold on a 812px-tall phone. Measured, not guessed. */
  .hero { padding: 24px 20px 16px; }
  .hero-text h1 { font-size: var(--text-heading); letter-spacing: -1.1px; }
  .hero-sub { font-size: var(--text-body); margin-bottom: var(--spacing-20); }
  .live-pill { margin-bottom: var(--spacing-20); }
  /* The loop is self-explanatory on a phone; the label just costs
     vertical space that the input needs. */
  .hero-logos-label { display: none; }

  .logo-loop { padding-bottom: var(--spacing-20); }
  .logo-loop-track { gap: 28px; padding-right: 28px; }

  .gradient-band { padding: var(--spacing-20) 20px var(--spacing-32); }
  .console { padding: var(--spacing-24); }

  .page-section, .bottom-cta, .site-footer, .stats-strip, .brands-page-hero, .brand-page-hero {
    padding-left: 20px; padding-right: 20px;
  }

  .section-heading { font-size: var(--text-heading-sm); letter-spacing: var(--tracking-heading-sm); }

  .why-grid { grid-template-columns: 1fr; }
  .brands-grid { grid-template-columns: 1fr; }
  .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }

  .bottom-cta-inner { padding: var(--spacing-32) var(--spacing-20); }
  .bottom-cta-form { flex-direction: column; }
  .bottom-cta-btn { width: 100%; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Radio picker ───────────────────────────────────────────
   For brands where one page covers several incompatible radios and the serial
   cannot tell them apart (Chrysler/Jeep/Dodge). The customer supplies what the
   serial does not carry. Tokens only — no new colours. */

.radio-type-wrap { width: 100%; margin-bottom: 12px; text-align: left; }

.radio-type-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

.radio-type-select {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-inputs);
  color: var(--color-carbon);
  cursor: pointer;
}

.radio-type-select:focus { outline: none; border-color: var(--color-iris); }

.radio-type-hint {
  margin: 6px 0 0;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

/* ─── Brand-page components that were never styled ────────────────────────
   The brand pages use a class vocabulary (JS accordion, .cta-tier, .lookup-error)
   that style.css never defined, so these rendered unstyled: accordions sat
   permanently open, the bottom CTA had no band, errors were black not red.
   Added here to match the Visitors design system. */

/* JS-driven accordion: <button.accordion-trigger> toggles .open on
   .accordion-item (distinct from the <details> .accordion-summary pattern). */
.accordion-item { border-bottom: 1px solid var(--color-fog); }
.accordion-item:first-child { border-top: 1px solid var(--color-fog); }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.accordion-title {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--color-carbon);
}
.accordion-trigger:hover .accordion-title { color: var(--color-lavender); }
.accordion-icon {
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-ash);
  transition: transform .15s ease, color .15s ease;
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); color: var(--color-lavender); }
.accordion-content { display: none; padding: 0 0 20px; color: var(--color-graphite); }
.accordion-content p { margin: 0 0 var(--spacing-12); }
.accordion-content p:last-child { margin-bottom: 0; }
.accordion-content ul, .accordion-content ol { margin: 0 0 var(--spacing-12); padding-left: 1.25em; }
.accordion-content li { margin-bottom: var(--spacing-8); }
.accordion-item.open .accordion-content { display: block; }

/* Bottom CTA tier — mirrors .bottom-cta on the homepage. */
.cta-tier { background: var(--surface-linen-band); padding: var(--spacing-48) 32px; margin-top: var(--section-gap); }
.cta-tier-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tables);
  padding: var(--spacing-48) var(--spacing-32);
}
.cta-tier-heading {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
  margin: 0 0 var(--spacing-12);
}
.cta-tier-sub { color: var(--color-graphite); margin: 0 0 var(--spacing-24); }
.cta-tier .cta-button { max-width: 320px; margin-left: auto; margin-right: auto; }

/* Lookup error message. */
.lookup-error { color: var(--color-ember); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); margin-top: var(--spacing-12); }

/* ─── Two-part footer variant ─────────────────────────────────────────
 * 19 pages group the logo and a tagline on the left; the class vocabulary
 * existed in markup but never had rules (caught by the CSS-coverage lint in
 * verify_pages.mjs). Sits inside .footer-inner alongside .footer-nav. */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-tagline {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

/* ─── "name TBC" tag ──────────────────────────────────────────────────
 * Amber marker for a radio family whose model name we have not confirmed.
 * Defined inline on /ford-radios (the chooser); promoted here so the three
 * destination pages that reuse the tag are covered too. */
.radio-card--tbc { background: #fffaf0; }
.radio-tbc-tag {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: var(--radius-tags);
  background: #ffe9c2; color: #8a5a00;
  font-size: 10px; font-weight: var(--font-weight-bold);
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}

/* ─── Stripe return pages: success + cancel ───────────────────────────
 * The two pages a customer lands on after Stripe. success.html reveals the
 * code they paid for; cancel.html reassures. Both had a bespoke class
 * vocabulary that was never styled (caught by the CSS-coverage lint). Design:
 * "big reveal" — the code IS the page, display-size mono, unmistakable. */
.site-tagline { font-size: var(--text-caption); color: var(--color-ash); letter-spacing: var(--tracking-caption); }
.site-tagline::before { content: "·"; margin: 0 8px 0 2px; color: var(--color-fog); }

.result-wrap { max-width: 440px; margin: 0 auto; padding: var(--spacing-48) 24px var(--spacing-64); }

/* loading */
.loading-state { text-align: center; padding: var(--spacing-64) 0; color: var(--color-graphite); }
.loading-state p { margin-top: var(--spacing-16); font-size: 14px; }
.spinner-dark {
  width: 32px; height: 32px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--color-fog); border-top-color: var(--color-carbon);
  animation: spin .7s linear infinite;
}

/* the reveal */
.result-eyebrow {
  text-align: center; font-size: 12px; font-weight: var(--font-weight-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-iris);
  margin: 0 0 6px;
}
.result-eyebrow .dot { color: var(--color-mint); }
.result-sub { text-align: center; font-size: 13px; color: var(--color-graphite); margin: 0 0 var(--spacing-24); }
.code-label {
  text-align: center; font-size: 11px; font-weight: var(--font-weight-bold);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-ash); margin: 0 0 var(--spacing-8);
}
.code-value {
  text-align: center; font-family: var(--font-mono);
  font-size: clamp(44px, 15vw, 58px); line-height: 1; font-weight: var(--font-weight-bold);
  letter-spacing: .12em; color: var(--color-carbon); margin: 0 0 var(--spacing-20);
  word-break: break-word;
}
.code-instruction { text-align: center; font-size: 13px; color: var(--color-graphite); margin: 0 0 var(--spacing-20); }

.copy-code {
  display: block; margin: 0 auto var(--spacing-4); max-width: 170px; width: 100%;
  background: transparent; color: var(--color-iris); font-family: var(--font-openrunde);
  font-size: 13px; font-weight: var(--font-weight-semibold); padding: 9px;
  border: none; border-radius: var(--radius-buttons); box-shadow: inset 0 0 0 1px var(--color-mint-wash);
  cursor: pointer;
}
.copy-code:hover { background: var(--surface-mint-wash); }
.copy-code.copied { color: var(--color-iris); box-shadow: inset 0 0 0 1px var(--color-mint); }

/* meta rows */
.info-block { margin-top: var(--spacing-24); border-top: 1px solid var(--color-fog); }
.info-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--color-fog); }
.ir-label { color: var(--color-ash); }
.ir-value { font-weight: var(--font-weight-medium); }

.note-box {
  margin-top: var(--spacing-24); background: var(--surface-linen-band);
  border-radius: var(--radius-inputs); padding: 12px 14px;
  font-size: 12px; line-height: 1.55; color: var(--color-graphite);
}
.note-box a { color: var(--color-carbon); font-weight: var(--font-weight-medium); }
.result-again { margin-top: var(--spacing-16); text-align: center; }
.result-again a { font-size: 13px; color: var(--color-ash); text-decoration: none; }
.result-again a:hover { color: var(--color-carbon); }

/* generic card (error-state, cancel) */
.card {
  background: var(--surface-canvas); border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle-3); padding: var(--card-padding);
}

/* cancel */
.cancel-wrap { text-align: center; padding: var(--spacing-16) var(--spacing-8); }
.cancel-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto var(--spacing-16);
  border-radius: 50%; background: #fbeae2; color: var(--color-ember); font-size: 22px;
}
.cancel-wrap h1 { font-size: var(--text-heading-sm); letter-spacing: -.5px; margin: 0 0 6px; }
.cancel-wrap p { font-size: 14px; color: var(--color-graphite); line-height: 1.55; margin: 0 0 var(--spacing-24); }
.cancel-re { margin-top: var(--spacing-12); font-size: 12px; color: var(--color-ash); }

/* light footer for both */
.result-footer { border-top: 1px solid var(--color-fog); text-align: center; padding: var(--spacing-24); margin-top: var(--spacing-48); }
.result-footer p { font-size: 12px; color: var(--color-ash); margin: 0; }
.result-footer a { color: var(--color-lavender); font-weight: var(--font-weight-medium); }

/* ─── Footer affiliation/trademark disclaimer ─────────────────────────
 * Full-width quiet line under the footer nav. Required site-wide because the
 * site uses manufacturer brand names throughout. */
.footer-disclaimer {
  flex-basis: 100%;
  margin: var(--spacing-8) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: var(--tracking-caption);
  /* graphite, not ash: this notice is what stands between the site and ~50
     trademark owners. A disclaimer nobody can read is weak on both counts. */
  color: var(--color-graphite);
}

/* ─── Homepage "which radio?" ambiguity options ───────────────────────
 * Shown when a serial's shape belongs to several radios (8 digits = Daewoo or
 * Becker, etc). The customer taps their radio and we re-check with that type. */
.hero-options { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--spacing-12); }
.hero-option {
  font-family: var(--font-openrunde);
  font-size: 14px; font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-buttons);
  padding: 8px 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.hero-option:hover { border-color: var(--color-lavender); background: var(--surface-mint-wash); }
.hero-option-note { flex-basis: 100%; margin: var(--spacing-4) 0 0; font-size: 12px; color: var(--color-ash); text-align: center; }

/* A quiet alternative offered AFTER a successful find (pre-1992 Ford 3-digit),
   distinct from the .hero-option choice chips that block progress. */
.hero-option-alt {
  font-size: 13px; font-weight: var(--font-weight-regular);
  color: var(--color-graphite); border-style: dashed;
}
.hero-option-alt:hover { border-style: solid; }

/* Guidance shown ABOVE the ambiguity chips — on the 7-digit shape this is the
   only thing telling a VW/Audi owner their serial is 14 characters, so it must
   read as a caution, not a footnote. */
.hero-option-warn {
  flex-basis: 100%; margin: 0 0 var(--spacing-4);
  background: #fff8e6; border: 1px solid #ffe0a3; border-radius: var(--radius-inputs);
  padding: 10px 14px; text-align: left;
  font-size: 13px; line-height: 1.5; color: #7a5200;
}

/* .hero-options sets display:flex, which overrides the UA stylesheet's
   [hidden]{display:none}. Without this, hiding the container left a stray gap —
   harmless only because every hide also empties it. */
.hero-options[hidden] { display: none; }

/* Escape hatch in the found/pay state — quieter than a choice chip. */
.hero-option-back {
  font-size: 12px; font-weight: var(--font-weight-regular);
  color: var(--color-ash); border-color: transparent; padding: 6px 12px;
}
.hero-option-back:hover { color: var(--color-carbon); background: transparent; border-color: var(--color-fog); }

/* ─── Front-page make selector ────────────────────────────────────────
 * The customer's make is more reliable than anything we can infer from digits:
 * it disambiguates serial shapes several radios share, and it lets the worker
 * catch a serial that make never uses before any money moves. */
.hero-make-wrap { max-width: 520px; margin: 0 auto var(--spacing-12); text-align: left; }
.hero-make-label {
  display: block; margin-bottom: 6px; padding-left: 16px;
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-graphite);
}
.hero-make-select {
  width: 100%; appearance: none;
  font-family: var(--font-openrunde); font-size: 15px; color: var(--color-carbon);
  background: var(--surface-canvas); border: 1px solid var(--color-fog);
  border-radius: var(--radius-buttons); padding: 13px 18px; cursor: pointer;
}
.hero-make-select:focus { outline: none; border-color: var(--color-lavender); }

/* What we detected, shown before payment — no extra tap, catches a serial read
   off the wrong sticker. */
.hero-detected {
  flex-basis: 100%; margin: 0; text-align: center;
  font-size: 12.5px; font-weight: var(--font-weight-semibold); color: var(--color-iris);
}