/* 52 Car Parts — shared styles. Palette taken from the windscreen and the
   South African licence disc: pale glass, deep slate ink, a disc tint and an
   indicator-amber for the one action that matters (message us). */
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --glass: #eef2f1;      /* page */
  --paper: #fbfcfb;      /* raised panels */
  --ink: #172629;        /* text */
  --slate: #4a5a5e;      /* secondary text */
  --rule: #c9d3d1;       /* lines */
  --disc: #dce9e0;       /* licence-disc tint */
  --amber: #e0a225;      /* the one action */
  --amber-ink: #172629;
  --measure: 66ch;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass: #111c1e; --paper: #172629; --ink: #e8efed; --slate: #a9b8b6;
    --rule: #2f4145; --disc: #23393a; --amber: #e7ad37; --amber-ink: #111c1e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--glass); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
a { color: inherit; text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; }

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

/* ── Header ───────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; flex-wrap: wrap; }
.wordmark { font: 700 1.6rem/1 var(--display); text-decoration: none; letter-spacing: 0.01em; }
.wordmark span { font-weight: 600; color: var(--slate); }
.site-nav ul { display: flex; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 600; }

/* ── Type ─────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: 0.005em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-top: 0; }
h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.3em; }
p, li { max-width: var(--measure); }
.lead { font-size: 1.25rem; color: var(--slate); }

/* ── Hero with the licence disc ───────────────────────── */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.disc {
  aspect-ratio: 1; width: min(100%, 340px); justify-self: center; border-radius: 50%;
  background: var(--disc); border: 3px dashed var(--slate); outline: 10px solid var(--disc);
  display: grid; place-content: center; text-align: center; padding: 2.5rem; transform: rotate(-7deg);
}
.disc .big { font: 700 clamp(5rem, 12vw, 7.5rem)/0.85 var(--display); }
.disc .name { font: 600 1.4rem/1.1 var(--display); margin-top: 0.4rem; }
.disc dl { margin: 1.1rem auto 0; display: grid; grid-template-columns: auto auto; gap: 0.1rem 0.6rem; font-size: 0.82rem; text-align: left; color: var(--slate); font-variant-numeric: tabular-nums; }
.disc dt { font-weight: 600; color: var(--ink); }
.disc dd { margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1.75rem; }
.btn {
  display: inline-block; background: var(--amber); color: var(--amber-ink); font: 600 1.05rem/1 var(--body);
  padding: 0.95rem 1.4rem; border-radius: 6px; text-decoration: none; border: 2px solid var(--amber);
}
.btn:hover { filter: brightness(1.05); }
.btn-quiet { background: transparent; border-color: var(--ink); color: var(--ink); }

/* ── Sections ─────────────────────────────────────────── */
.band { padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--rule); }
.band.raised { background: var(--paper); }

.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.75rem 1.75rem; }
.steps li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 0.9rem; }
.steps li::before { content: counter(step); font: 700 2.4rem/1 var(--display); display: block; margin-bottom: 0.4rem; }
.steps p { margin: 0; color: var(--slate); }

.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem 3rem; }
.fact { border-left: 3px solid var(--disc); padding-left: 1rem; }
.fact p { margin: 0.2rem 0 0; color: var(--slate); }

.qa dt { font-weight: 600; margin-top: 1.1rem; }
.qa dd { margin: 0.25rem 0 0; color: var(--slate); max-width: var(--measure); }

/* ── Long text (privacy, about) ───────────────────────── */
.doc { padding-block: clamp(2.5rem, 6vw, 4rem); }
.doc h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.doc h3 { margin-top: 1.4rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.3rem; }
.meta { color: var(--slate); font-size: 0.95rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; margin: 1rem 0; min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.9rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; }

/* ── Footer ───────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--rule); padding-block: 2rem 2.5rem; color: var(--slate); font-size: 0.95rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.5rem 2rem; }
.site-footer strong { color: var(--ink); }
.site-footer p { margin: 0 0 0.4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .disc { width: min(78%, 300px); order: -1; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }