/* ==========================================================================
   DirtyHabit ECU Services
   Design: "Workshop Editorial", dark scheme.
   Everything you are likely to want to change lives in :root below.
   ========================================================================== */

:root {
  /* Colour */
  --bg:          #0A0E15;   /* page ground */
  --bg-deep:     #080C12;   /* footer / deepest band */
  --panel:       #111823;   /* raised panel */
  --panel-soft:  #0F1621;   /* image wells */
  --line:        #1D2735;   /* hairline */
  --line-strong: #2C3A4C;   /* section rules, borders */
  --text:        #E6EDF5;   /* primary text */
  --text-2:      #C3CEDC;   /* body copy */
  --muted:       #9AAABF;   /* captions, small print */
  --accent:      #29D3EE;   /* cyan — links, CTAs, numerals */
  --accent-soft: #7BE7F7;   /* hover */
  --accent-ink:  #06222A;   /* text on top of accent fills */
  --gold:        #D9A521;   /* wordmark */
  --promo:       #F5C542;   /* promotional pricing */

  /* Type */
  --display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --body: 'Work Sans', 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --wrap: 1280px;
  --gutter: 40px;
  --radius: 999px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;  /* iOS Safari inflates text in landscape without this */
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(41, 211, 238, 0.18);
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }

h1, h2, h3 { margin: 0; font-weight: 400; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  /* env() keeps content clear of the notch / rounded corners in landscape */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 14, 21, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; min-height: 84px;
}

.brand { display: flex; align-items: baseline; gap: 12px; color: var(--gold); }
.brand:hover { color: var(--gold); }
.brand-name { font-family: var(--display); font-size: 28px; letter-spacing: -0.01em; }
.brand-sub {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a {
  font-size: 15px; color: var(--text-2);
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] {
  color: var(--text); border-bottom-color: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: 12px; }

.basket-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--body); font-size: 14px; cursor: pointer;
}
.basket-btn:hover { border-color: var(--accent); color: var(--accent); }
.basket-btn svg { flex: none; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
}

/* ---------------------------------------------------------- type helpers */

.eyebrow {
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent);
}

.display-xl {
  font-family: var(--display);
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance;
}
.display-l {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance;
}
.display-m {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
}
.display-s { font-family: var(--display); font-size: 32px; line-height: 1.12; }

.lede { font-size: 19px; line-height: 1.65; color: var(--text-2); max-width: 46ch; }
.body-2 { color: var(--text-2); }
.small { font-size: 14px; color: var(--muted); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 34px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--body); font-size: 16px; font-weight: 600;
  cursor: pointer; text-align: center;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-soft); color: var(--accent-ink); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }

/* ------------------------------------------------------------- sections */

.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; padding-bottom: 32px; flex-wrap: wrap;
}
.section-head p { margin: 0; max-width: 40ch; }

/* ----------------------------------------------------------------- hero */

.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; padding: 96px 0 80px; }
.hero-copy { display: flex; flex-direction: column; gap: 30px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 6px; }
.hero-media { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------- image wells */

.media {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-soft); border: 1px solid var(--line-strong);
  color: var(--muted); font-size: 13px; letter-spacing: 0.08em;
  text-align: center; padding: 16px; overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-tall { min-height: 440px; flex: 1; }
.media-wide { aspect-ratio: 4 / 3; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

/* -------------------------------------------------------------- process */

.step { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-strong); padding-top: 20px; }
.step-num { font-family: var(--display); font-size: 28px; color: var(--accent); }
.step h3 { font-size: 18px; font-weight: 600; }
.step p { margin: 0; font-size: 15px; color: var(--text-2); }

/* ------------------------------------------------------------- packages */

.pack-list { display: flex; flex-direction: column; }
.pack-list .rule-end { border-top: 1px solid var(--line-strong); }

.pack {
  display: grid;
  grid-template-columns: 68px 230px minmax(0, 1fr) 280px;
  gap: 28px; align-items: start;
  padding: 22px 0; border-top: 1px solid var(--line-strong);
}
.pack-code { font-family: var(--display); font-size: 22px; color: var(--accent); }
.pack-title { display: flex; flex-direction: column; gap: 8px; }
.pack-title h3 { font-family: var(--display); font-size: 29px; line-height: 1.12; }
.pack-title p { margin: 0; font-size: 15px; color: var(--text-2); }
.pack-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pack-points li { font-size: 15px; color: var(--text-2); padding-left: 20px; border-left: 1px solid var(--line); }
.pack-buy { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: right; }
.pack-price { font-family: var(--display); font-size: 34px; color: var(--text); }

/* card variant used on the homepage summary */
.pack-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 30px 28px; background: var(--panel);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
}
.pack-card h3 { font-family: var(--display); font-size: 30px; }
.pack-card p { margin: 0; font-size: 15px; color: var(--text-2); }
.pack-card .pack-price { font-size: 28px; margin-top: auto; }

.prose { display: flex; flex-direction: column; gap: 16px; }
.prose p { margin: 0; }
.prose-wide { max-width: 80ch; }
.steps-row { align-items: start; }

/* How it works is a long read, so its rhythm is tighter than the rest of the
   site — otherwise the page is mostly scrolling past empty space. */
.page-compact .section { padding: 48px 0; }
.page-compact .section-tight { padding: 30px 0; }
.page-compact .section-head { padding-bottom: 20px; }
.page-compact .grid-2 { gap: 40px; }
.page-compact .grid-3, .page-compact .grid-4 { gap: 28px; }
.page-compact .band { padding: 28px 30px; }
/* A full-width 16:9 frame is over 700px tall on a desktop and eats the page,
   so on the long read the videos are capped and centred. */
.page-compact .video { margin-top: 4px; max-width: 820px; }
.page-compact .detail-spec { gap: 22px; }
.page-compact .figure { margin-top: 4px; }
.page-compact .parts { gap: 20px; }
.page-compact .prose { gap: 14px; }
.page-compact .section > .video { margin-inline: auto; }

@media (max-width: 860px) {
  .page-compact .section { padding: 36px 0; }
  .page-compact .section-tight { padding: 24px 0; }
  .page-compact .grid-2, .page-compact .grid-3, .page-compact .grid-4 { gap: 26px; }
}

/* ------------------------------------------------------------ legal pages */

.legal { max-width: 820px; }
.legal-intro {
  padding: 16px 20px; margin: 0;
  background: var(--panel); border-left: 2px solid var(--gold);
  color: var(--muted);
}
.legal-body { display: flex; flex-direction: column; gap: 34px; margin-top: 40px; }
.legal-item { display: flex; flex-direction: column; gap: 12px; }
.legal-item h2 { font-size: 24px; }
.legal-item p { margin: 0; }

@media (max-width: 860px) {
  .legal-body { gap: 28px; margin-top: 30px; }
  .legal-item h2 { font-size: 21px; }
}

/* ----------------------------------------------------- currency picker */

/* Built on <details>, so it opens and closes on its own. With scripting off
   there is nothing to convert with, so the whole control is hidden and every
   price stays in dollars. */
.no-js .cur { display: none; }

.cur { position: relative; }
.cur summary { list-style: none; cursor: pointer; }
.cur summary::-webkit-details-marker { display: none; }

.cur-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--text);
  font-family: var(--body); font-size: 14px; font-weight: 500;
  white-space: nowrap;
}
.cur-btn:hover { border-color: var(--accent); }
.cur[open] .cur-btn { border-color: var(--accent); }
.cur summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cur-chev { flex: none; color: var(--muted); transition: transform .15s ease; }
.cur[open] .cur-chev { transform: rotate(180deg); }

.flag {
  width: 21px; height: 14px; flex: none; display: block;
  border-radius: 2px; border: 1px solid rgba(255,255,255,0.18);
}
.cur-btn .flag { margin-right: -1px; }
[data-currency-flag] { display: flex; }

.cur-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 46;
  min-width: 250px; padding: 8px;
  background: #0D131C; border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(4, 7, 12, 0.6);
}
.cur-opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; background: transparent;
  color: var(--text-2); font-family: var(--body); font-size: 15px;
  text-align: left; cursor: pointer;
}
.cur-opt:hover { background: rgba(41, 211, 238, 0.09); color: var(--text); }
.cur-opt[aria-checked="true"] { color: var(--text); background: rgba(41, 211, 238, 0.13); }
.cur-opt .cur-code { font-weight: 600; min-width: 38px; }
.cur-opt .cur-name { color: var(--muted); font-size: 14px; }
.cur-opt[aria-checked="true"] .cur-name { color: var(--text-2); }
.cur-note {
  margin: 6px 4px 2px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.45; color: var(--muted);
}
/* Only worth saying once the visitor has moved off dollars. */
.cur-note { display: none; }
.cur:not([data-currency="USD"]) .cur-note { display: block; }

/* Between the desktop nav and the phone menu the header runs out of room,
   so the currency code drops away and the flag carries it on its own. The
   full horizontal nav is still on screen down to 860px, which is where the
   squeeze happens. */
@media (max-width: 1040px) {
  .cur-btn { padding: 0 10px; gap: 6px; }
  .cur-btn .cur-code { display: none; }
  /* The horizontal nav is still on screen until 860px. Adding the currency
     control left it a shade too wide just above that, so the link spacing
     closes up through this band. */
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 14px; }
  .header-inner { gap: 18px; }
}

@media (max-width: 960px) {
  .basket-btn span[data-basket-count] { display: none; }
  .basket-btn { padding: 0 14px; }
}

@media (max-width: 860px) {
  .cur-btn { height: 40px; }
  .cur-menu { min-width: 224px; }
}
/* On the narrowest phones the panel would hang off the left edge, so it
   gives up the currency names and keeps the flag, code and note. */
@media (max-width: 420px) {
  .cur-menu { min-width: 0; width: 190px; padding: 6px; }
  .cur-opt { gap: 10px; padding: 11px 10px; }
  .cur-opt .cur-name { display: none; }
}
@media (max-width: 380px) {
  .cur-btn { padding: 0 8px; }
}

/* ------------------------------------------- stacked screenshot background */

/* How it works sits behind three screens from the analysis tooling, layered
   window-over-window. The whole stack is fixed, so it stays put while the
   page scrolls over it. */
.page-bg.page-bg--stack { display: block; }
.bg-pane {
  position: absolute; margin: 0;
  border: 1px solid rgba(120, 150, 185, 0.22);
  border-radius: 6px; overflow: hidden;
  background: #0D131C;
  box-shadow: 0 30px 70px rgba(2, 5, 10, 0.8);
  opacity: 1;
}
/* These are dark-theme screenshots sitting on an already dark page, so
   opacity alone was never going to make them visible. They need lifting. */
.bg-pane img {
  display: block; width: 100%; height: auto;
  filter: brightness(1.5) contrast(1.05) saturate(1.1);
}

/* Offsets chosen so each pane's left edge and heading stay readable rather
   than being buried by the one on top of it. */
/* Pushed to the right-hand side. The copy runs down the left, so keeping the
   stack clear of it means the screens can be shown bright rather than being
   buried under the scrim that keeps the text readable. */
.bg-pane--1 { top: 5%;  left: 34%; width: 70%; transform: rotate(-0.6deg); }
.bg-pane--2 { top: 37%; left: 24%; width: 76%; transform: rotate(0.5deg); }
.bg-pane--3 { top: 69%; left: 40%; width: 58%; transform: rotate(-0.3deg); }

.page-bg.page-bg--stack::after {
  /* Darkest down the left, where the copy runs. The right-hand side is left
     comparatively clear so the tables stay readable. */
  background:
    linear-gradient(to right, rgba(10,14,21,0.9) 0%, rgba(10,14,21,0.72) 24%, rgba(10,14,21,0.1) 44%, rgba(10,14,21,0) 58%);
}

@media (max-width: 860px) {
  .bg-pane { opacity: 0.32; box-shadow: none; }
  .bg-pane--1 { top: 3%;  left: -14%; width: 124%; }
  .bg-pane--2 { top: 38%; left: -4%;  width: 124%; }
  .bg-pane--3 { top: 72%; left: -10%; width: 112%; }
  /* A phone has no clear side to put the stack in, because the copy fills the
     width. It goes back behind the text and dims accordingly. */
  .page-bg.page-bg--stack::after {
    background: linear-gradient(to bottom, rgba(10,14,21,0.74) 0%, rgba(10,14,21,0.68) 50%, rgba(10,14,21,0.76) 100%);
  }
}

/* ------------------------------------ valve-event wash on N/A Stage 1 */

.page-bg.page-bg--valves img {
  opacity: 0.55;
  object-fit: contain;
  object-position: 50% 78%;
  /* Faded out at the top only, where the headline sits. The rest is left
     alone so the chart is actually legible. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 8%, #000 30%, #000 92%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 8%, #000 30%, #000 92%, rgba(0,0,0,0) 100%);
}
.page-bg.page-bg--valves::after {
  /* Heavy at the top where the headline sits, then out of the way so the
     chart is actually visible further down the page. */
  background:
    linear-gradient(to bottom, rgba(10,14,21,0.93) 0%, rgba(10,14,21,0.78) 22%, rgba(10,14,21,0.18) 52%, rgba(10,14,21,0.12) 100%);
}

/* ----------------------------------------------- bands sharing one section */

.band-stack { display: flex; flex-direction: column; gap: 16px; }
.band-stack .band { margin: 0; }
.band-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
/* Two buttons side by side do not fit a narrow phone, so they stack and take
   the full width rather than pushing the page sideways. */
@media (max-width: 620px) {
  .band-actions { width: 100%; }
  .band-actions > * { flex: 1 1 100%; width: 100%; justify-content: center; text-align: center; }
}

/* ------------------------------------------------ the currency note row */

/* Sits where an eighth package would, so the note lines up under the price
   column rather than floating loose under the list. */
.pack--note { padding: 14px 0 6px; border-top: 0; }
.pack--note .pack-code { color: var(--line-strong); }
.fx-note {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted);
  text-align: right;
}
@media (max-width: 1080px) {
  .fx-note { text-align: left; }
  .pack--note .pack-code { display: none; }
}

/* --------------------------------------------------- contact: email card */

.mailto-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 34px;
  background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
}
.mailto-card p { margin: 0; }
.mailto-btn {
  font-size: 18px; letter-spacing: 0.01em;
  margin-top: 4px; word-break: break-word;
}
.mailto-checklist { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.mailto-checklist h3 {
  margin: 0 0 14px; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.mailto-checklist .pack-points li { font-size: 14.5px; }

@media (max-width: 860px) {
  .mailto-card { padding: 26px 22px; }
  .mailto-btn { font-size: 16px; }
}

/* ---------------------------------------------------------------- quote */

.quote {
  display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  padding: 48px 56px; background: var(--panel);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
}
.quote blockquote {
  margin: 0; font-family: var(--display); font-size: 34px;
  line-height: 1.25; max-width: 26ch;
}

/* ----------------------------------------------------------------- band */

.band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  padding: 48px 56px; background: var(--panel); border: 1px solid var(--line);
}

/* ----------------------------------------------------------------- form */

.form { display: flex; flex-direction: column; gap: 22px; max-width: 620px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; color: var(--text); }
.field input, .field textarea, .field select {
  min-height: 52px; padding: 14px 16px;
  background: var(--panel-soft); border: 1px solid var(--line-strong);
  color: var(--text); font-family: var(--body); font-size: 16px;
}
.field textarea { min-height: 150px; resize: vertical; }

/* Safari on iOS paints its own white select unless the native look is off,
   so the chevron is drawn here instead. The SVG is inline, so it still works
   in the offline single-file build. */
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px; border-radius: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%239AAABF' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  line-height: 1.35;
  /* The option labels are long, so without this the select refuses to shrink
     below its widest option and pushes the phone layout sideways. */
  width: 100%; max-width: 100%; min-width: 0;
  text-overflow: ellipsis;
}
/* The option list is drawn by the OS, so it needs its own colours. */
.field select option,
.field select optgroup { background: var(--panel); color: var(--text); }
.field select optgroup { font-style: normal; font-weight: 600; }
.field select:invalid { color: #6E7E93; }
.field input::placeholder, .field textarea::placeholder { color: #6E7E93; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.form-note { font-size: 14px; color: var(--muted); }
.form-note a { color: var(--accent); }
.form-status { margin: 0; font-size: 14px; color: var(--text-2); min-height: 1.2em; }
.form-status.is-bad { color: #FF7A7A; }
.form-status.is-good { color: #4FE0A6; }
.form-error {
  margin: 0; padding: 12px 14px; font-size: 14px;
  color: #FF9A9A; background: rgba(255,92,92,0.1);
  border: 1px solid rgba(255,92,92,0.4);
}
/* The bot trap. Off-screen rather than display:none, which some bots skip. */
.trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
button[data-submit][disabled] { opacity: 0.6; cursor: progress; }
.form-status { font-size: 15px; color: var(--accent); min-height: 24px; }

/* --------------------------------------------------------------- footer */

.site-footer {
  background: var(--bg-deep); border-top: 1px solid var(--line);
  padding: 44px 0 calc(44px + env(safe-area-inset-bottom));
  margin-top: 40px;
}
.footer-inner {
  display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-brand .brand-name { color: var(--gold); font-size: 24px; }
.footer-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.footer-nav a { font-size: 14px; color: var(--text-2); }
.footer-legal { width: 100%; font-size: 13px; color: var(--muted); padding-top: 12px; }

/* ------------------------------------------------------- basket drawer */

.basket-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 7, 12, 0.66);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.basket-backdrop.is-open { opacity: 1; pointer-events: auto; }

.basket-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line-strong);
  transform: translateX(100%); transition: transform .22s ease;
}
.basket-panel.is-open { transform: translateX(0); }

.basket-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 26px; border-bottom: 1px solid var(--line);
}
.basket-head h2 { font-family: var(--display); font-size: 28px; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.basket-items {
  flex: 1; overflow-y: auto; padding: 8px 26px; margin: 0; list-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.basket-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.basket-item h3 { font-family: var(--display); font-size: 22px; }
.basket-item p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.basket-qty { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qty-btn {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.basket-empty { padding: 40px 0; color: var(--muted); font-size: 15px; }

.basket-foot { padding: 22px 26px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.basket-total { display: flex; justify-content: space-between; align-items: baseline; }
.basket-total strong { font-family: var(--display); font-size: 28px; font-weight: 400; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 56px; }
  .media-tall { min-height: 320px; }
  .pack { grid-template-columns: 52px 1fr; gap: 16px 24px; padding: 20px 0; }
  .pack-points, .pack-body { grid-column: 2; }
  .pack-buy { grid-column: 2; align-items: flex-start; text-align: left; width: 260px; }
  .grid-3 { gap: 36px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  .section { padding: 64px 0; }
  .main-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line-strong);
    padding: 8px 24px 20px;
  }
  .main-nav.is-open { display: flex; z-index: 45; box-shadow: 0 18px 40px rgba(4,7,12,0.55); }
  /* Fully opaque, so the page behind never shows through the open menu. */
  .main-nav { background: #0D131C; }
  .main-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: inline-flex; }
  .header-inner { position: relative; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .quote, .band { padding: 32px 28px; gap: 24px; }
  .quote blockquote { font-size: 28px; }
  .basket-btn span { display: none; }
  .basket-btn { padding: 0 14px; }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .pack { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .pack-points, .pack-body, .pack-buy { grid-column: 1; }
  .pack-buy { width: 100%; }
  .brand-sub { display: none; }
}

/* ------------------------------------------------- packages page additions */

.tag {
  display: inline-block; margin-left: 12px; padding: 4px 12px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  font-family: var(--body); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); vertical-align: middle;
}

.pack-body { display: flex; flex-direction: column; gap: 9px; }
.pack-body p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.pack-more { font-size: 15px; }

.statement {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 30px; background: var(--panel-soft);
  border: 1px solid var(--line-strong);
}
.statement h3 { font-family: var(--display); font-size: 30px; }
.statement p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

.callout {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 28px 30px; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.callout svg { flex: none; color: var(--accent); margin-top: 2px; }
.callout p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.callout strong { color: var(--text); }

.placeholder-block {
  padding: 32px 30px; border: 1px dashed var(--line-strong);
  background: var(--panel-soft); color: var(--muted); font-size: 15px;
}

.detail-spec { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.detail-spec > div { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.detail-spec h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.detail-spec p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

.backlink { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }

/* ------------------------------------------------------------- promotion */

.promo {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 24px 30px; margin-bottom: 8px;
  background: rgba(217, 165, 33, 0.07);
  border: 1px solid var(--gold);
}
.promo-label {
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}
.promo p {
  margin: 0; flex: 1; min-width: 280px;
  font-family: var(--display); font-size: 26px; line-height: 1.25;
  color: var(--gold);
}
.promo a { color: var(--gold); text-decoration: underline; }
.promo a:hover { color: #F0C65C; }

.promo-terms {
  border-top: 1px solid var(--line); padding-top: 20px;
  font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 90ch;
}
.promo-terms strong { color: var(--gold); font-weight: 500; }

@media (max-width: 640px) {
  .promo { padding: 20px 22px; gap: 12px; }
  .promo p { font-size: 21px; }
}

/* =========================================================================
   Image-led homepage
   ========================================================================= */

/* The display face is heavy, so headings need tighter tracking and a
   shorter leading than the old serif did. */
.display-xl { letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase; }
.display-l  { letter-spacing: -0.025em; line-height: 1.0; }
.display-m  { letter-spacing: -0.02em; }
.display-s  { letter-spacing: -0.02em; font-size: 26px; }
.brand-name { letter-spacing: -0.02em; }
.quote blockquote { letter-spacing: -0.015em; line-height: 1.15; }
.pack-price { letter-spacing: -0.02em; }

/* ---------------------------------------------------------- faded images */

.fade-edges {
  -webkit-mask-image: radial-gradient(ellipse 84% 78% at 50% 48%, #000 60%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 84% 78% at 50% 48%, #000 60%, rgba(0,0,0,0) 100%);
}

.photo { position: relative; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-caption { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------- photo hero */

.hero-photo {
  position: relative;
  min-height: 700px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  margin-bottom: 8px;
}
.hero-photo-img {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 9%, #000 85%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 9%, #000 85%, rgba(0,0,0,0) 100%);
}
.hero-photo-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(10,14,21,0.95) 0%, rgba(10,14,21,0.78) 24%, rgba(10,14,21,0.22) 50%, rgba(10,14,21,0) 70%, rgba(10,14,21,0) 88%, var(--bg) 100%),
    linear-gradient(to top, var(--bg) 0%, rgba(10,14,21,0.06) 34%);
}
.hero-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-inner {
  position: relative; z-index: 1;
  width: 100%; padding: 72px 0 64px;
  display: flex; flex-direction: column; gap: 24px; max-width: 760px;
}
.hero-photo .lede { max-width: 52ch; }

/* -------------------------------------------------------- engine models */

.engines {
  display: flex; flex-direction: column; gap: 10px;
  padding: 32px 34px; border: 1px solid var(--line-strong);
  max-width: 900px;
}
.engines h2 { font-size: 22px; line-height: 1.2; }
.engines p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 62ch; }

.models {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.models > div { background: var(--bg); padding: 32px 30px; display: flex; flex-direction: column; gap: 10px; }
.models h2 { font-size: 22px; line-height: 1.2; }
.models p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.model-name {
  font-family: var(--display); font-size: 40px; letter-spacing: -0.03em; color: var(--accent);
}

/* --------------------------------------------------------- proof strip */

.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.proof .photo { aspect-ratio: 16 / 9; }

@media (max-width: 1080px) {
  .hero-photo { min-height: 580px; }
  .models { grid-template-columns: 1fr 1fr; }
  .models > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .hero-photo { min-height: 500px; }
  .hero-photo-inner { padding: 56px 0 48px; }
  .proof { grid-template-columns: 1fr; gap: 28px; }
  .models { grid-template-columns: 1fr; }
  .models > div:first-child { grid-column: auto; }
  .model-name { font-size: 34px; }
}

/* Hero fine-tuning: keep the headline clear of the car, and hold the type
   at a size the heavy display face can carry without wrapping badly. */
.hero-photo-img img { object-position: 74% center; }
.hero-photo .display-xl { font-size: clamp(36px, 4.9vw, 68px); max-width: 15ch; }
.hero-photo .lede { max-width: 46ch; }

@media (max-width: 860px) {
  .hero-photo-img img { object-position: 68% center; }
  .hero-photo .display-xl { max-width: 100%; }
}

/* A second promotion stacks under the first without touching it. */
.promo + .promo { margin-top: 16px; }
.promo-terms + .promo-terms { margin-top: 14px; border-top: none; padding-top: 0; }

/* =========================================================================
   Mobile and touch
   ========================================================================= */

/* Body scroll lock while the basket drawer is open. iOS Safari ignores a
   plain overflow:hidden on body once the page has been scrolled, so the
   script also pins the scroll position. */
body.basket-open { overflow: hidden; }

/* Fingers need bigger targets than a mouse pointer does. */
@media (pointer: coarse) {
  .qty-btn { width: 44px; height: 44px; font-size: 18px; }
  .main-nav a { padding: 18px 0; }
  .footer-nav { gap: 8px 26px; }
  .footer-nav a { padding: 13px 0; }
  .pack-more a, .backlink, .link-tap { padding: 11px 0; display: inline-block; }

  /* Footnote markers sit mid-sentence, so the touch area is grown with a
     pseudo-element instead of padding — the line does not move. */
  .promo a { position: relative; }
  .promo a::after { content: ""; position: absolute; inset: -16px -14px; }
}

/* Short landscape phones: the hero should not eat the whole screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-photo { min-height: 380px; }
  .hero-photo-inner { padding: 40px 0 32px; }
}

@media (max-width: 480px) {
  .hero-photo { min-height: 420px; }
  .hero-photo .display-xl { font-size: clamp(30px, 8.6vw, 40px); }
  .hero-photo .lede, .lede { font-size: 17px; }
  .hero-actions { gap: 16px; }
  .hero-actions .btn { width: 100%; }
  .btn { padding: 0 24px; }
  .section-head { padding-bottom: 24px; }
  .basket-panel { width: 100%; }
  .promo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .promo p { font-size: 19px; min-width: 0; }
  .models > div, .engines { padding: 24px 22px; }
  .quote { padding: 28px 22px; }
  .quote blockquote { font-size: 24px; }
  .statement { padding: 26px 22px; }
  .callout { flex-direction: column; gap: 14px; padding: 24px 22px; }
  .detail-spec > div { padding-top: 16px; }
  .pack-buy { width: 100%; }
  .footer-inner { gap: 28px; }
}

/* With the scrim pulled back, the hero text needs its own contrast rather
   than borrowing it from a darkened photo. */
.hero-lead h1,
.hero-lead .lede,
.hero-lead .eyebrow,
.hero-photo h1,
.hero-photo .lede,
.hero-photo .eyebrow {
  text-shadow: 0 2px 20px rgba(4, 7, 12, 0.9), 0 1px 3px rgba(4, 7, 12, 0.75);
}

/* =========================================================================
   Page background wash (packages page)
   A fixed layer behind the content, faded away at every edge so it reads as
   atmosphere rather than a picture sitting behind text.
   ========================================================================= */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.30;
  transition: opacity .2s ease;
  -webkit-mask-image: radial-gradient(ellipse 94% 88% at 50% 44%, #000 46%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 94% 88% at 50% 44%, #000 46%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0) 100%);
}
/* A touch of the page colour over the top keeps body text comfortable. */
.page-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* keeps the price column readable where the bright gauge lands */
    linear-gradient(to left, rgba(10,14,21,0.5) 0%, rgba(10,14,21,0.18) 18%, rgba(10,14,21,0) 34%),
    linear-gradient(to bottom, rgba(10,14,21,0.38) 0%, rgba(10,14,21,0.08) 38%, rgba(10,14,21,0.38) 100%);
}

/* Content has to sit above the wash. */
.has-page-bg main,
.has-page-bg .site-footer { position: relative; z-index: 1; }
/* Works from the element itself, so it holds even where the page skeleton
   is supplied by a host and the body class is not ours to set.

   The header is deliberately NOT in this list. It is already sticky with a
   z-index of 40, which lifts it clear of the wash on its own. Including it
   here did two bad things: position:relative killed the sticky header on the
   two pages that have a background, and z-index:1 put it on the same layer as
   <main>. Since <main> comes later in the markup it then painted straight over
   the open mobile menu -- which is why the tabs were present but invisible and
   unclickable on a phone. */
.page-bg ~ main,
.page-bg ~ .site-footer { position: relative; z-index: 1; }
/* single-file build: the wash lives inside the route section */
section.route.has-page-bg > .wrap,
section.route.has-page-bg > section { position: relative; z-index: 1; }

/* =========================================================================
   Homepage lead — text over the fixed track photo
   ========================================================================= */

.hero-lead {
  display: flex;
  align-items: center;
  min-height: 620px;
}
.hero-lead-inner {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 760px;
  padding: 80px 0 72px;
}
/* The headline is a full sentence rather than a few words, so it is set
   smaller and allowed to run wider than the old one. */
.hero-lead .display-xl { font-size: clamp(27px, 3.45vw, 47px); max-width: 21ch; line-height: 1.08; }
.hero-lead .lede { max-width: 58ch; }

/* The track shot carries the homepage, so it runs brighter than the plot on
   the packages page, and sits high enough that the cars clear the headline. */
.page-bg--track img {
  opacity: 0.62;
  object-position: 68% 28%;
  -webkit-mask-image: radial-gradient(ellipse 100% 96% at 56% 34%, #000 62%, rgba(0,0,0,0.78) 84%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 100% 96% at 56% 34%, #000 62%, rgba(0,0,0,0.78) 84%, rgba(0,0,0,0) 100%);
}
/* Darker on the left, where the headline and body copy live. */
.page-bg--track::after {
  background:
    linear-gradient(to right, rgba(10,14,21,0.74) 0%, rgba(10,14,21,0.44) 26%, rgba(10,14,21,0.1) 54%, rgba(10,14,21,0) 78%, rgba(10,14,21,0.16) 100%),
    linear-gradient(to bottom, rgba(10,14,21,0.1) 0%, rgba(10,14,21,0.04) 28%, rgba(10,14,21,0.46) 100%);
}

@media (max-width: 1080px) { .hero-lead { min-height: 540px; } }
@media (max-width: 860px) {
  .hero-lead { min-height: 470px; }
  .hero-lead-inner { padding: 56px 0 48px; }
  /* On a narrow screen the copy covers most of the width, so the photo needs
     to sit further back or the text fights it. */
  .page-bg--track img { opacity: 0.5; object-position: 62% 26%; }
  .page-bg--track::after {
    background: linear-gradient(to bottom, rgba(10,14,21,0.46) 0%, rgba(10,14,21,0.36) 40%, rgba(10,14,21,0.52) 100%);
  }
}
@media (max-width: 480px) {
  .hero-lead { min-height: 420px; }
  .hero-lead .display-xl { font-size: clamp(23px, 6.4vw, 30px); max-width: 100%; }
}

/* ---------------------------------------------------- hardware line-up */

.parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.part {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.part-shot {
  height: 180px;
  display: flex; align-items: center; justify-content: center;
}
.part-shot img { max-height: 100%; width: auto; object-fit: contain; }
.part h3 { font-size: 17px; font-weight: 600; }
.part p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 860px) {
  .parts { grid-template-columns: 1fr; gap: 16px; }
  .part-shot { height: 200px; }
}

/* --------------------------------------------- analysis figure (light) */

/* Charts we produce come out on a light ground. Rather than recolouring
   someone's data, they sit in a frame that reads as a document. */
.figure {
  display: flex; flex-direction: column; gap: 14px;
}
.figure-frame {
  padding: 10px;
  background: #F2F1EC;
  border: 1px solid var(--line-strong);
}
.figure-frame img { width: 100%; display: block; }
.figure figcaption { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

.part-shot--tall { height: 260px; }

/* ------------------------------------------- part thumbnails in a package */

.pack-thumbs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 2px;
}
.pack-thumb {
  width: 92px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.pack-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pack-thumb--light { background: #F2F1EC; }

@media (max-width: 480px) {
  .pack-thumb { width: 92px; height: 70px; }
}

/* =========================================================================
   Video embeds
   Nothing loads from YouTube until the visitor clicks — the page stays fast
   and no tracking cookies are set for people who never press play.
   ========================================================================= */

.video { display: flex; flex-direction: column; gap: 14px; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-facade {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  padding: 0; margin: 0;
  border: 0; background: transparent;
  cursor: pointer;
}
.video-facade img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.85;
}
.video-facade:hover img { opacity: 1; }
.video-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,21,0.5) 0%, rgba(10,14,21,0.05) 55%);
}

.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 40px rgba(4, 7, 12, 0.55);
  transition: transform .15s ease;
}
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.06); }
.video-facade:focus-visible .video-play { outline: 3px solid var(--text); outline-offset: 4px; }

.video-note { margin: 0; font-size: 13px; color: var(--muted); }

/* Placeholder for a video that does not exist yet. */
.video-slot {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  border: 1px dashed var(--line-strong);
  background: var(--panel-soft);
  color: var(--muted); font-size: 15px; line-height: 1.6;
}

@media (max-width: 600px) {
  .video-play { width: 64px; height: 64px; }
  .video-play svg { width: 24px; height: 24px; }
}

/* =========================================================================
   Without JavaScript
   iOS Quick Look (opening an .html straight from Files or an email) runs
   pages with scripting switched off. The site must still read properly.
   ========================================================================= */

/* The mobile menu is opened by script, so show the links stacked instead. */
@media (max-width: 860px) {
  .no-js .main-nav {
    display: flex; position: static;
    flex-direction: row; flex-wrap: wrap; gap: 4px 20px;
    background: transparent; border: 0; padding: 8px 0 0;
    width: 100%;
  }
  .no-js .main-nav a { padding: 8px 0; border: 0; }
  .no-js .header-inner { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .no-js .nav-toggle { display: none; }
}
/* The basket needs script, so do not advertise it when there is none. */
.no-js .basket-btn { display: none; }
/* The video facade needs script; the link underneath still works. */
.no-js .video-play { opacity: 0.5; }

/* Anchored navigation must clear the sticky header, or the heading you jumped
   to sits underneath it. */
.route, [id] { scroll-margin-top: 100px; }

@media (max-width: 860px) {
  /* Without script the nav cannot collapse, so the header grows tall. Letting
     it scroll away beats pinning a third of the screen in place. */
  .no-js .site-header { position: static; }
  .no-js .main-nav { gap: 2px 18px; }
  .no-js .main-nav a { font-size: 14px; }
  .route, [id] { scroll-margin-top: 16px; }
}

/* Present for screen readers and search engines, not taking up the page. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The footnote markers are links, but the rule under them reads as a typo. */
.promo a { text-decoration: none; }
.promo a:hover, .promo a:focus-visible { text-decoration: underline; }

/* =========================================================================
   Licence + map pricing
   The VersaTuner licence is a separate one-off cost, so it sits beside the
   map price rather than being folded into it.
   ========================================================================= */

.price-split {
  display: flex; align-items: stretch; gap: 10px;
  width: 100%;
}
.price-part {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
}
.price-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}
.price-val { font-family: var(--display); font-size: 26px; letter-spacing: -0.02em; color: var(--text); }
.price-part .pack-price { font-size: 26px; }

/* Our own price is the promotional one, so it is labelled and coloured. */
.price-part--promo .price-label { color: var(--promo); }
.price-part--promo .price-val,
.price-part--promo .pack-price { color: var(--promo); }
.price-split--solo { max-width: 180px; }
.price-split--solo .price-part { flex: 0 1 auto; }
.price-plus {
  flex: none; align-self: center;
  font-family: var(--display); font-size: 20px; color: var(--muted);
  padding-top: 14px;
}

/* --------------------------------------------------- licence explainer */

.licence {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px;
  padding: 32px 34px;
  background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
}
.licence-head h2 { font-size: 26px; }
.licence-points { display: flex; flex-direction: column; gap: 14px; }
.licence-points p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.licence-points strong { color: var(--text); }
.licence-points a { color: var(--gold); text-decoration: none; }
.licence-points a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .price-split { max-width: 340px; }
}
@media (max-width: 860px) {
  .licence { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; }
}
@media (max-width: 480px) {
  .price-split { max-width: 100%; }
  .price-part { text-align: left; }
  .price-val, .price-part .pack-price { font-size: 22px; }
  .price-label { font-size: 10px; }
}