/* ==========================================================================
   Driver Support Club — core stylesheet
   Palette and type are documented in README.md ("Design system").
   ========================================================================== */

:root {
  /* Brand — sampled from the supplied banner so the page and the mark are
     the same colours rather than nearly the same.
       navy   #15183F  backgrounds and headings
       indigo #5E59DE  the action colour (white on it scores 5.3:1)
       lime   #C7F348  the road accent; 1.3:1 on white, so decorative and
                       dark-surface use only — never body or link text.
                       Use --lime-700 (6.2:1) when a green must carry text. */
  --navy: #15183F;
  --navy-700: #23285C;
  --navy-500: #343A7D;
  --blue: #5E59DE;
  --blue-700: #413CB8;
  --blue-050: #eeedfd;
  --blue-200: #cbc9f7;
  --lime: #C7F348;
  --lime-700: #4F6A08;
  /* Aliases so any rule written against the previous accent still resolves
     to a brand colour rather than the old gold. */
  --gold: #C7F348;
  --gold-700: #4F6A08;
  --green: #0f9268;
  --green-050: #e6f5ef;
  --green-700: #0b6b4d;

  /* Neutrals */
  --paper: #f4f6f9;
  --paper-warm: #faf9f7;
  --white: #ffffff;
  --ink: #2f3a45;
  --ink-soft: #5b6b7b;
  --line: #e1e7ef;
  --line-strong: #cbd5e1;

  /* Type */
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale (Elements of Typographic Style, ~1.25) */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 1.875rem;
  --step-4: 2.375rem;
  --step-5: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);

  /* Space */
  --gap: 1.25rem;
  --pad-section: clamp(3rem, 2rem + 5vw, 5.5rem);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --shadow-1: 0 1px 2px rgba(10, 37, 64, 0.06), 0 6px 18px rgba(10, 37, 64, 0.06);
  --shadow-2: 0 2px 6px rgba(10, 37, 64, 0.08), 0 18px 40px rgba(10, 37, 64, 0.1);
  --container: 1140px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  font-weight: 600;
}
h1 { font-size: var(--step-5); letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); letter-spacing: -0.022em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1rem; max-width: 68ch; }
a { color: var(--blue-700); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; max-width: 68ch; }
small { font-size: var(--step--1); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 0.75rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* Layout ----------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
/* Body copy stays at a readable measure, but the header and footer bars are
   furniture and can use the screen. The 1140px reading width was the actual
   cause of the nav clipping over the logo: no matter how wide the display, the
   header row never had more than 1140px to work with. */
.site-header .container, .site-footer .container { --container: 1400px; }
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
.section--paper { background: var(--white); }
.section--navy { background: var(--navy); color: #dbe6f2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--warm { background: var(--paper-warm); }

.section-head { max-width: 62ch; margin-bottom: 2.25rem; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.stack > * + * { margin-top: 1rem; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 600; font-size: var(--step-0);
  padding: 0.8rem 1.4rem; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.2; text-align: center;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-700); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { background: #fff; border-color: var(--navy); color: var(--navy); }
.btn--onnavy { background: #fff; color: var(--navy); }
.btn--onnavy:hover { background: #e8eefb; color: var(--navy); }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--line); color: var(--ink-soft); border-color: var(--line-strong);
  cursor: not-allowed; pointer-events: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Header ----------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Three explicit columns: brand, nav, actions. The nav lives in its own
   track with overflow hidden, so if the row ever runs short of space the
   links clip at their own column edge instead of spilling across the logo.
   Under the old flex layout the nav could shrink below its content width
   while its links stayed nowrap, which is what put "Home" on top of the
   mark. */
.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.85rem; min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; min-width: 0; }
.brand img { height: 34px; width: auto; flex: none; }
.brand-name {
  font-family: var(--display); font-weight: 700; color: var(--navy);
  font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-name span { display: block; font-size: 0.68rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0.01em; }
/* flex-start, not flex-end. With flex-end any overflow runs off the LEFT
   edge, which hides the first links and makes the row look like the nav is
   sitting on the logo. It also makes the overflow invisible to scrollWidth,
   because browsers do not report start-direction overflow — which is why the
   measuring code below reads child widths instead. */
.nav { display: flex; align-items: center; justify-content: flex-start; gap: 0.1rem; min-width: 0; overflow: hidden; }
.nav a {
  font-size: 0.9rem; color: var(--navy); text-decoration: none; padding: 0.5rem 0.5rem;
  border-radius: 8px; font-weight: 500; white-space: nowrap;
  /* Never shrink below the label width: a shrunken link reports a false width
     and the row silently mismeasures itself. */
  flex: none;
}
.nav a:hover { background: var(--blue-050); }
.nav a[aria-current="page"] { background: var(--blue-050); color: var(--blue-700); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.lang-select {
  font-family: var(--body); font-size: 0.875rem; padding: 0.45rem 0.5rem;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--navy);
}
/* The member-login placeholder is not worth a slot in the top row; it only
   appears once the menu has collapsed into its own panel, where there is room
   for it. */
.member-login { display: none; font-size: 0.8rem; color: var(--ink-soft); text-decoration: none; cursor: not-allowed; }
.nav-toggle {
  display: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 0.5rem 0.6rem; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--navy); }

/* Header layout states.
   site.js measures the row and applies these; the media query below is the
   no-JavaScript fallback. Space is given up in order — the tagline, then the
   text wordmark (the mark alone carries the header, and the page heading names
   the company), then the links collapse into a menu. */
.brand-name span { display: block; }
.header-inner.is-condensed .brand-name { display: none; }

/* Collapsed menu, shared by the measured state and the mobile media query. */
.header-inner.is-compact { display: flex; }
.header-inner.is-compact .brand { margin-right: auto; }
.header-inner.is-compact .brand-name { display: block; }
.header-inner.is-compact .nav-toggle { display: inline-flex; }
.header-inner.is-compact .nav,
.site-header .nav.is-panel {
  position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
  justify-content: flex-start; overflow-y: auto; overflow-x: hidden;
  background: #fff; border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem 1.25rem;
  gap: 0.15rem; box-shadow: var(--shadow-2); max-height: calc(100vh - 68px);
}
.header-inner.is-compact .nav[hidden] { display: none; }
.header-inner.is-compact .nav a {
  padding: 0.8rem 0.6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0;
}
.header-inner.is-compact .member-login { display: block; padding: 0.8rem 0.6rem; }

/* CSS floors, derived from the real numbers rather than guessed at.
   The header container is min(100% - 2.5rem, 1400px).
     - full row needs ~1320px  -> below a 1440px viewport, drop the wordmark
     - condensed row needs ~1135px -> below a 1180px viewport, collapse
   The measuring script can still collapse earlier when translated labels run
   wider, but the layout is correct without it. */
@media (max-width: 1439px) { .brand-name { display: none; } }

@media (max-width: 1180px) {
  .brand-name span { display: none; }
  .header-inner { display: flex; }
  .brand { margin-right: auto; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    justify-content: flex-start; overflow-y: auto; overflow-x: hidden;
    background: #fff; border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem 1.25rem;
    gap: 0.15rem; box-shadow: var(--shadow-2); max-height: calc(100vh - 68px);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 0.8rem 0.6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .header-actions .btn { padding: 0.6rem 0.9rem; font-size: 0.9rem; }
  .member-login { display: block; padding: 0.8rem 0.6rem; }
}

@media (max-width: 480px) {
  .brand img { height: 30px; }
  .lang-select { padding: 0.45rem 0.35rem; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 420px at 12% -20%, #143b64 0%, transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, #072037 100%);
  color: #d9e5f3;
  padding-block: clamp(2.75rem, 2rem + 5vw, 5rem);
}
.hero-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr 0.98fr; } }
.hero h1 { color: #fff; margin-bottom: 0.5em; }
.hero-lede { font-size: var(--step-1); color: #c6d6e8; max-width: 52ch; }
.hero .btn-row { margin-top: 1.75rem; }
.trust-line {
  margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--step--1); color: #9fb6cd; max-width: 56ch;
}

/* Signature: RMV Ready Packet route ------------------------------------- */
.packet {
  background: #fff; border-radius: var(--radius-lg); padding: 1.35rem;
  box-shadow: 0 24px 60px rgba(3, 17, 32, 0.45); color: var(--ink);
}
.packet-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.packet-title { font-family: var(--display); font-weight: 600; color: var(--navy); font-size: 1rem; }
.packet-route { display: grid; gap: 0.55rem; }
.stop {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); position: relative;
}
.stop + .stop::before {
  content: ""; position: absolute; left: 25px; top: -0.62rem; height: 0.62rem;
  border-left: 2px dashed var(--line-strong);
}
.stop-dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700); font-family: var(--display);
  font-size: 0.78rem; font-weight: 700;
}
.stop-label { font-size: 0.92rem; font-weight: 500; color: var(--navy); }
.stop-note { font-size: 0.78rem; color: var(--ink-soft); }
.stop.is-done .stop-dot { background: var(--green-050); color: var(--green); }
.stop.is-done { border-color: #c9e7db; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600;
  font-family: var(--display); padding: 0.25rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.chip--ready { background: var(--green-050); color: var(--green); }
.chip--next { background: var(--blue-050); color: var(--blue-700); }
.chip--missing { background: var(--amber-050); color: var(--amber-700); }
.chip--quiet { background: #eef1f5; color: var(--ink-soft); }
.packet-foot {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  font-size: 0.8rem; color: var(--ink-soft);
}
.packet-progress { height: 6px; border-radius: 99px; background: #eaeef4; overflow: hidden; flex: 1; max-width: 150px; }
.packet-progress span { display: block; height: 100%; width: 66%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 99px; }
.packet[data-animate="on"] .stop { animation: stop-in 0.5s ease both; }
.packet[data-animate="on"] .stop:nth-child(2) { animation-delay: 0.12s; }
.packet[data-animate="on"] .stop:nth-child(3) { animation-delay: 0.24s; }
@keyframes stop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Cards ------------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-1);
}
.card h3 { margin-bottom: 0.4rem; font-size: var(--step-1); }
.card p { color: var(--ink-soft); font-size: 0.94rem; }
.card-link { font-family: var(--display); font-weight: 600; font-size: 0.92rem; text-decoration: none; color: var(--blue-700); }
.card-link:hover { text-decoration: underline; }

/* Pathway cards carry a colour rail so they read as routes, not tiles */
.pathway {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); border-left: 4px solid var(--blue); padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-1); transition: box-shadow 0.18s ease, border-color 0.18s ease;
  text-decoration: none; color: inherit;
}
.pathway:hover { box-shadow: var(--shadow-2); color: inherit; }
.pathway h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.pathway p { color: var(--ink-soft); font-size: 0.94rem; flex: 1; }
.pathway--case { border-left-color: var(--navy); }
.pathway--fleet { border-left-color: var(--green); }
.pathway--pro { border-left-color: #8a6fd8; }
.pathway-cta { font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--blue-700); margin-top: 0.4rem; }

/* Steps (genuine sequence, so numbers are used) -------------------------- */
.steps { counter-reset: step; display: grid; gap: 1rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 1.3rem 1.3rem 1.3rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.step-n {
  width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.step h3 { font-size: var(--step-1); }
.step p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0; }

/* Lists with checkmark rails -------------------------------------------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.ticks li {
  position: relative; padding-left: 1.65rem; font-size: 0.95rem; margin: 0;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.ticks--muted li::before { border-color: var(--ink-soft); }

/* Tables ----------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.95rem; }
caption { text-align: left; padding: 1rem 1.1rem 0; color: var(--ink-soft); font-size: var(--step--1); }
th, td { padding: 0.8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
thead th { font-family: var(--display); font-size: 0.85rem; color: var(--navy); background: #f7f9fc; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num-member { color: var(--green); font-weight: 600; }

/* Price blocks ----------------------------------------------------------- */
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.price-card.is-featured { border: 1px solid var(--navy); box-shadow: var(--shadow-2); }
.price {
  font-family: var(--display); font-size: var(--step-4); color: var(--navy); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.price-term { font-family: var(--body); font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.price-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0.35rem 0 1rem; }
.price-card .btn { margin-top: auto; }
.price-card ul { margin: 1rem 0 1.25rem; }

/* Callouts --------------------------------------------------------------- */
.note {
  border: 1px solid var(--line); border-left: 4px solid var(--navy-500); background: #fff;
  border-radius: var(--radius-sm); padding: 1rem 1.15rem; font-size: 0.92rem; color: var(--ink-soft);
}
.note strong { color: var(--navy); }
.note--warn { border-left-color: #d9a441; background: var(--amber-050); color: #6b4a12; }
.note--info { border-left-color: var(--blue); background: var(--blue-050); color: #163e83; }
.note p:last-child { margin-bottom: 0; }

/* Forms ------------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.35rem; }
.field > label, .fieldset-legend { font-weight: 600; font-size: 0.92rem; color: var(--navy); font-family: var(--display); }
.field .hint { font-size: 0.82rem; color: var(--ink-soft); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.7rem 0.8rem; width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #c0392b; background: #fdf4f3; }
.error-msg { color: #a93226; font-size: 0.85rem; font-weight: 500; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.choice-grid { display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .choice-grid--2 { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1rem; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; font-size: 0.95rem;
}
.choice:hover { border-color: var(--blue); background: var(--blue-050); }
.choice input { margin-top: 0.25rem; accent-color: var(--blue); flex: none; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-050); box-shadow: inset 0 0 0 1px var(--blue); }
.choice-text strong { display: block; font-weight: 600; color: var(--navy); font-family: var(--display); font-size: 0.95rem; }
.choice-text span { font-size: 0.85rem; color: var(--ink-soft); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-status { border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; font-size: 0.94rem; }
.form-status[data-state="success"] { background: var(--green-050); color: #0b6b4d; border: 1px solid #bfe5d5; }
.form-status[data-state="error"] { background: #fdecea; color: #a93226; border: 1px solid #f5c6c1; }
.form-status[hidden] { display: none; }
.required-star { color: #c0392b; }

/* Questionnaire ---------------------------------------------------------- */
.q-shell { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); }
.q-rail { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.q-rail-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--ink-soft); }
.q-rail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.q-rail-item.is-active .q-rail-dot { background: var(--blue); }
.q-rail-item.is-active { color: var(--navy); font-weight: 600; }
.q-rail-item.is-done .q-rail-dot { background: var(--green); }
.q-step[hidden] { display: none; }
.q-actions { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.q-actions .btn { flex: 1 1 auto; min-width: 140px; }
.q-summary { display: grid; gap: 0.5rem; margin: 1.25rem 0; }
.q-summary-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.q-summary-row dt { color: var(--ink-soft); }
.q-summary-row dd { margin: 0; color: var(--navy); font-weight: 500; }
.result-price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0.25rem; }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #b9cadd; padding-block: 3.25rem 2rem; margin-top: 0; }
.site-footer a { color: #dce7f4; text-decoration: none; font-size: 0.92rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.5fr; } }
.footer-brand img { height: 56px; width: auto; margin-bottom: 0.9rem; }
.footer-brand p { font-size: 0.9rem; color: #9fb6cd; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: 0.95rem; margin-bottom: 0.75rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.footer-col li { margin: 0; }
.footer-news input { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.25); color: #fff; }
.footer-news input::placeholder { color: #90a8c0; }
.footer-news .choice { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: #cfdcea; padding: 0.5rem 0.65rem; font-size: 0.85rem; }
.footer-news .choice:hover { background: rgba(255, 255, 255, 0.06); }
.footer-news .choice-grid--2 { grid-template-columns: 1fr 1fr; }
.footer-disclaimer {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem; color: #90a8c0; line-height: 1.65;
}
.footer-disclaimer p { max-width: 92ch; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; margin-top: 1.25rem; font-size: 0.8rem; }

/* Page hero (interior) --------------------------------------------------- */
.page-head { background: linear-gradient(180deg, var(--navy) 0%, #0d2c4b 100%); color: #cddcec; padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.page-head h1 { color: #fff; font-size: var(--step-4); margin-bottom: 0.4em; }
.page-head p { color: #b8cbdf; font-size: var(--step-1); max-width: 60ch; }
.breadcrumb { font-size: 0.8rem; color: #8aa4bf; margin-bottom: 1rem; }
.breadcrumb a { color: #b8cbdf; }

/* Misc ------------------------------------------------------------------- */
/* Echoes the two road stripes in the mark. Purely decorative, so the gold
   carries no meaning that a reader could miss. */
.eyebrow-rule {
  display: block; width: 44px; height: 3px; border-radius: 2px; margin-bottom: 1.1rem;
  background: linear-gradient(90deg, var(--blue) 0 60%, var(--lime) 60% 100%);
}
.section--navy .eyebrow-rule { background: linear-gradient(90deg, #8f8bfa 0 60%, var(--lime) 60% 100%); }
.section--navy .footer-brand + p, .site-footer .footer-heading::after { border-color: var(--lime); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { font-family: var(--display); font-weight: 600; color: var(--navy); cursor: pointer; font-size: 1rem; }
.faq summary::marker { color: var(--blue); }
.faq p { margin: 0.75rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.legal-body h2 { font-size: var(--step-2); margin-top: 2rem; }
.legal-body h3 { font-size: var(--step-1); margin-top: 1.5rem; }
.cta-band { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 3vw, 2.75rem); box-shadow: var(--shadow-1); }
.cta-band h2 { font-size: var(--step-3); }
.resource-item { display: block; text-decoration: none; color: inherit; }
.resource-item h3 { font-size: var(--step-1); }
.resource-tag { font-size: 0.75rem; font-family: var(--display); font-weight: 600; color: var(--blue-700); background: var(--blue-050); padding: 0.2rem 0.5rem; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Result-screen offers -----------------------------------------------------
   The membership offer is the visual anchor of the result screen; the
   single-service option sits below it, plainly available but quieter. */
.offer {
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.35rem;
  margin: 0 0 1rem;
}
.offer h3 { font-family: var(--display); margin: 0.5rem 0 0.4rem; font-size: 1.2rem; letter-spacing: -0.01em; }
.offer p { margin: 0 0 0.9rem; }
.offer .btn { margin-top: 0.35rem; }
.offer .price-note { margin-top: 0.6rem; }

.offer--member {
  background: linear-gradient(180deg, var(--blue-050) 0%, #ffffff 100%);
  border: 1px solid var(--blue-200);
  box-shadow: var(--shadow-1);
  position: relative;
}
.offer--member h3 { color: var(--navy); }
.offer-saving {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  margin-bottom: 1rem !important;
}
.offer-saving strong { color: var(--green-700); font-size: 1.05rem; }

.offer--single {
  background: var(--paper);
  border: 1px solid var(--line);
}
.offer--single h3 { font-size: 1.05rem; color: var(--ink); }
.offer--single p { font-size: 0.94rem; color: var(--ink-soft); }

.form-status[data-state="info"] {
  background: var(--blue-050); color: var(--blue-700);
  border: 1px solid var(--blue-200);
}

@media (max-width: 560px) {
  .offer { padding: 1.2rem 1.1rem; }
}

/* Phones ------------------------------------------------------------------
   Below 640px the price tables stop being tables and become one block per
   service, so nothing has to be scrolled sideways to compare a price. Cells
   get their heading from data-label, which site.js keeps in the visitor's
   language. */
@media (max-width: 640px) {
  .table-wrap { border: 0; background: transparent; overflow-x: visible; }
  table { min-width: 0; display: block; font-size: 1rem; }
  table caption { text-align: left; padding: 0 0 0.6rem; }
  table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table tbody { display: block; }
  table tbody tr {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 0.85rem 1rem; margin-bottom: 0.65rem;
  }
  table tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: 0; padding: 0.28rem 0; text-align: left; }
  table tbody td:first-child {
    font-weight: 600; font-family: var(--display); color: var(--navy);
    display: block; padding-bottom: 0.5rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--line);
  }
  table tbody td:first-child::before { content: none; }
  table tbody td::before {
    content: attr(data-label); color: var(--ink-soft); font-size: 0.85rem; font-weight: 500; flex: none;
  }
  table tbody td.num { text-align: right; }
  table tbody td.num-member { color: var(--green-700); font-weight: 600; }

  /* Full-width actions are easier to hit with a thumb. */
  .btn { min-height: 46px; }
  .offer .btn, .hero .btn, .form .btn[type="submit"] { display: flex; width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }

  /* Comfortable tap targets in the collapsed menu and header. */
  .nav a, .member-login { min-height: 48px; display: flex; align-items: center; }
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; }

  .result-price { flex-wrap: wrap; }
  .offer-saving { font-size: 0.95rem; }
  .q-summary-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Very small phones. */
@media (max-width: 380px) {
  .brand-name { font-size: 0.95rem; }
  .header-actions .btn { padding: 0.55rem 0.7rem; font-size: 0.85rem; }
  .offer { padding: 1rem 0.9rem; }
}

/* Sticky mobile call to action --------------------------------------------
   Phones only. body padding is added to match so the bar can never cover the
   end of the page, and it is kept off the questionnaire entirely. */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--line);
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(4, 25, 68, 0.08);
  }
  .sticky-cta .btn { width: 100%; min-height: 48px; }
  .sticky-cta-note { text-align: center; font-size: 0.8rem; color: var(--ink-soft); }
  body.has-sticky-cta { padding-bottom: 6.5rem; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: transform 0.2s ease; }
}

/* Homepage entry choices ---------------------------------------------------
   Three large targets straight into the questionnaire, sized for a thumb. */
.choices-h { text-align: center; margin-bottom: 1.5rem; font-size: var(--step-2); }
.choice-cards { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.choice-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--radius-md); padding: 1.15rem 1.25rem; min-height: 64px;
  text-decoration: none; color: var(--navy); box-shadow: var(--shadow-1);
}
.choice-card:hover { border-color: var(--blue); background: var(--blue-050); }
.choice-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.choice-card-title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.choice-card-go { color: var(--blue); font-size: 1.2rem; flex: none; }

/* Scope disclosure --------------------------------------------------------
   Deliberately legible rather than fine print: it appears before checkout and
   is the thing that stops someone believing $29 covers everything. */
.scope-note {
  background: var(--blue-050); border: 1px solid var(--blue-200);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: 1rem 0;
}
.scope-note p { font-size: 0.94rem; margin-bottom: 0.5rem; }
.scope-note p:last-child { margin-bottom: 0; }

.offer-today { margin: 0.9rem 0 0.4rem; font-size: 1rem; }
.offer-today strong { color: var(--navy); }
.hero-note { font-size: 0.88rem; color: var(--ink-soft); margin: 0.6rem 0 0.4rem; }
.hero-secondary { margin: 0 0 1rem; }
.hero .hero-note, .hero .hero-secondary a { color: #cfe0ff; }
.hero .hero-secondary a { text-underline-offset: 3px; }

/* Questionnaire progress label */
.q-rail-label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.5rem; font-weight: 500; }

/* A checkout button that is deliberately not yet usable. Styled as clearly
   inert rather than merely faded, so it does not read as a broken link. */
.btn.is-disabled {
  background: var(--paper); color: var(--ink-soft);
  border: 1px dashed var(--line-strong); box-shadow: none;
  cursor: not-allowed; pointer-events: none;
}

/* Two-product checkout choice -------------------------------------------
   Membership stays visually primary: it sits first and keeps the accent
   border. Active Case Support is plainly visible and selectable, not hidden
   behind a conversation. */
.buy-options { display: grid; gap: 0.75rem; margin: 1rem 0 1.25rem; }
.buy-option {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 1rem 1.1rem; cursor: pointer;
}
.buy-option:hover { border-color: var(--blue); }
.buy-option input { margin-top: 0.35rem; accent-color: var(--blue); flex: none; width: 20px; height: 20px; }
.buy-option:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.buy-option.is-selected { border-color: var(--blue); border-left: 4px solid var(--blue); background: var(--blue-050); }
.buy-option-body { display: flex; flex-direction: column; gap: 0.35rem; }
.buy-option-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.buy-option-name { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.buy-option-price { font-family: var(--display); font-weight: 700; color: var(--navy); font-size: 1.25rem; white-space: nowrap; }
.buy-option-per { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.buy-option-blurb { font-size: 0.94rem; color: var(--ink); }
.buy-option-terms { font-size: 0.85rem; color: var(--ink-soft); }

.buy-secondary-line {
  margin: 0.15rem 0 0.15rem; font-size: 0.92rem; font-weight: 600;
  color: var(--navy); text-align: center;
}
.buy-manual-link { display: inline-block; margin-left: 0.4rem; font-weight: 600; }
.form-status[data-buy-status] { margin-top: 0.75rem; }

@media (max-width: 560px) {
  .buy-option { padding: 0.9rem; }
  .buy-option-head { flex-direction: column; gap: 0.15rem; }
}

/* Upcoming-app notice and technology attribution --------------------------
   Both are deliberately quiet: this is the Driver Support Club site, so DSC
   leads and the other two names sit below it in weight. */
.app-preview { border-left: 4px solid var(--blue); }
.app-preview h2 { font-size: var(--step-2); }
.app-tagline {
  font-family: var(--display); font-weight: 600; color: var(--blue-700);
  font-size: 1.05rem; margin-bottom: 0.9rem;
}
.footer-tech { font-size: 0.82rem; opacity: 0.75; }

/* Homepage photography ----------------------------------------------------
   Placement only: no existing rule is changed. Images already inherit the
   global max-width:100%; height:auto, so these set the frame and the caption. */
.hero-photo {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  margin-bottom: 1.25rem;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  width: 100%;
}
.how-figures {
  display: grid; gap: 1.25rem; margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.how-figure { margin: 0; }
.how-figure img {
  width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  object-fit: cover; aspect-ratio: 16 / 9;
}
.how-figure figcaption { margin-top: 0.7rem; font-size: 0.94rem; color: var(--ink-soft); }
.how-figure figcaption strong {
  display: block; font-family: var(--display); color: var(--navy); font-weight: 600;
  margin-bottom: 0.15rem;
}
.footer-credits { font-size: 0.78rem; opacity: 0.7; }
.footer-credits a { color: inherit; }

/* Everyday transactions ---------------------------------------------------
   A secondary service, so the surface is muted and carries no price: it must
   read as an aside to the membership offer above it, not a competing one. */
.transactions { background: var(--paper); }
.eyebrow {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.5rem;
}
.tx-grid {
  list-style: none; margin: 1.75rem 0 1.5rem; padding: 0;
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tx-item {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 1.1rem 1.15rem; max-width: none;
}
.tx-label {
  display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--blue-700); margin-bottom: 0.35rem;
}
.tx-title { font-size: 1.02rem; margin: 0 0 0.35rem; }
.tx-item p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); max-width: none; }
.tx-note { margin-bottom: 1.1rem; }

/* SEO service pages -------------------------------------------------------
   Long-form reading: a narrower measure, clear heading rhythm, and a call-out
   that repeats between sections without shouting. */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.25rem; }
.prose h2:first-child { margin-top: 0; }
.crumbs { background: var(--paper); font-size: 0.86rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.crumbs a { color: var(--ink-soft); }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }
.call-cta {
  background: var(--blue-050); border: 1px solid var(--blue-200);
  border-left: 4px solid var(--blue); border-radius: var(--radius-md);
  padding: 1.25rem 1.3rem; margin: 2rem 0;
}
.call-cta-h { font-size: 1.1rem; margin: 0 0 0.4rem; }
.call-cta p { margin-bottom: 0.9rem; }
.call-cta .price-note { margin: 0.6rem 0 0; }
.related { margin: 1rem 0 0; padding-left: 1.2rem; }
.related li { margin-bottom: 0.5rem; }

/* Three-tier membership layout ------------------------------------------
   Equal-height cards so the three options read as one set, with membership
   carrying the accent as the foundation of the other two. */
.tiers .tier { display: flex; flex-direction: column; }
.tiers .tier .btn { margin-top: auto; }
.tier-plus { font-size: 0.9rem; font-weight: 600; color: var(--ink-soft); margin-left: 0.3rem; }
.tier-total {
  background: var(--blue-050); border: 1px solid var(--blue-200);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.95rem;
  margin: 0.9rem 0;
}
.price-quoted { font-size: 1.5rem; font-family: var(--display); font-weight: 700; color: var(--navy); }
@media (max-width: 760px) {
  .tiers .tier .btn { margin-top: 1rem; }
}