/* CarPairly public stylesheet: "Duo Motion" (docs/DESIGN_SYSTEM.md 4.1, ADR-0046). Hand-written, one file, no nesting, no !important. Size limits: CssGuardTests.
   Order: @font-face, the layer statement, one block per layer; each component has an "@layer components" block under a "===== components: name =====" banner, before "forced-colors".
   BEM-lite names; tokens only (no raw hex); animation only in "@layer motion" under no-preference. Orange text and lines: var(--gas-ink) or var(--branch), never var(--gas). */

/* ===== fonts =====
   Self-hosted Fontsource 5.3.0 variable builds, SIL OFL 1.1 (wwwroot/fonts/SOURCES.md). Only the two latin files are preloaded (_HeadMeta.cshtml). */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/bricolage-grotesque-5.3.0-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/fonts/bricolage-grotesque-5.3.0-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("/fonts/dm-sans-5.3.0-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("/fonts/dm-sans-5.3.0-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Fallback"; font-weight: 600 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
  size-adjust: 101%; ascent-override: 92.08%; descent-override: 26.73%; line-gap-override: 0%;
}
@font-face {
  font-family: "DM Sans Fallback"; font-weight: 400 700;
  src: local("Arial"), local("Arimo"), local("Liberation Sans");
  size-adjust: 104.53%; ascent-override: 94.90%; descent-override: 29.66%; line-gap-override: 0%;
}

@layer reset, tokens, base, layout, components, utilities, motion;

/* ===== reset ===== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure { margin: 0; }
  fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  legend { padding: 0; }
  img, video, canvas { max-inline-size: 100%; block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

/* ===== tokens ===== */
@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F3F5F9;
    --text: #14181F; --text-muted: #4B5565;
    --border: #D8DDE6; --border-strong: #6B7688; --focus: #1E3FCC;
    --ev: #2F5BFF; --ev-strong: #1E3FCC; --ev-soft: #E6ECFF; --on-ev: #FFFFFF;
    --gas: #FF7A1A; --gas-hover: #FF9A4D; --gas-ink: #9A4A06; --gas-soft: #FFEFE0; --on-gas: #1B1B1F;
    --ok: #0E6B37; --ok-soft: #E4F4EA; --warn: #7A4A00; --warn-soft: #FFF3D1; --err: #B42318; --err-soft: #FDEBE9;
    --shadow-1: 0 1px 2px rgb(20 24 31 / .08);
    --shadow-2: 0 6px 16px rgb(20 24 31 / .10), 0 1px 3px rgb(20 24 31 / .08);

    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;
    --gutter: clamp(1rem, .6087rem + 1.7391vw, 2rem);
    --section-gap: clamp(2rem, 1.2174rem + 3.4783vw, 4rem);
    --radius-1: .375rem; --radius-2: .625rem; --radius-3: 1rem; --radius-full: 999px;
    --bw: 1px; --bw-strong: 2px;

    --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --step--2: .8125rem; --step--1: .9375rem; --step-0: 1.0625rem;
    --step-1: clamp(1.125rem, 1.0761rem + .2174vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.1522rem + .4348vw, 1.5rem);
    --step-3: clamp(1.5rem, 1.3043rem + .8696vw, 2rem);
    --step-4: clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem);
    --step-5: clamp(2.25rem, 1.663rem + 2.6087vw, 3.75rem);
    --lh-body: 1.6; --lh-ui: 1.4; --lh-tight: 1.15;
    --measure: 50ch; --measure-narrow: 52ch;
    --container: 72rem; --container-narrow: 46rem;

    --z-raised: 1; --z-overlay: 100; --z-toast: 200; --z-skip: 1000;
    --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms; --dur-4: 600ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  }

  /* Dark tokens are declared twice on purpose (DESIGN_SYSTEM 5.2): once for a dark system with no
     explicit choice, once for data-theme="dark". DesignTokensTests asserts the two are identical. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0D1117; --surface: #151B23; --surface-alt: #1C232D;
      --text: #E8ECF2; --text-muted: #A3ADBB;
      --border: #2B3440; --border-strong: #7D8898; --focus: #A5B9FF;
      --ev: #7C98FF; --ev-strong: #A5B9FF; --ev-soft: #1A2547; --on-ev: #0B0F1A;
      --gas: #FF7A1A; --gas-hover: #FF9A4D; --gas-ink: #FF9A4D; --gas-soft: #3A2210; --on-gas: #1B1B1F;
      --ok: #5FD08A; --ok-soft: #10281B; --warn: #F2C14E; --warn-soft: #33280A; --err: #FF8A80; --err-soft: #3A1614;
      --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
      --shadow-2: 0 6px 16px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .5);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0D1117; --surface: #151B23; --surface-alt: #1C232D;
    --text: #E8ECF2; --text-muted: #A3ADBB;
    --border: #2B3440; --border-strong: #7D8898; --focus: #A5B9FF;
    --ev: #7C98FF; --ev-strong: #A5B9FF; --ev-soft: #1A2547; --on-ev: #0B0F1A;
    --gas: #FF7A1A; --gas-hover: #FF9A4D; --gas-ink: #FF9A4D; --gas-soft: #3A2210; --on-gas: #1B1B1F;
    --ok: #5FD08A; --ok-soft: #10281B; --warn: #F2C14E; --warn-soft: #33280A; --err: #FF8A80; --err-soft: #3A1614;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 6px 16px rgb(0 0 0 / .45), 0 1px 3px rgb(0 0 0 / .5);
  }
  :root[data-theme="light"] { color-scheme: light; }

  /* Branch aliases (DESIGN_SYSTEM 1.1): set data-branch="ev|gas" from Variant.Branch. */
  [data-branch="ev"] {
    --branch: var(--ev); --branch-fill: var(--ev); --branch-fill-hover: var(--ev-strong);
    --branch-soft: var(--ev-soft); --branch-ink: var(--ev-strong); --on-branch: var(--on-ev);
  }
  [data-branch="gas"] {
    --branch: var(--gas-ink); --branch-fill: var(--gas); --branch-fill-hover: var(--gas-hover);
    --branch-soft: var(--gas-soft); --branch-ink: var(--gas-ink); --on-branch: var(--on-gas);
  }
}

/* ===== base ===== */
@layer base {
  html { font-family: var(--font-body); font-size: 100%; line-height: var(--lh-body); }
  body {
    display: flex; flex-direction: column; min-block-size: 100vh;
    background: var(--bg); color: var(--text); font-size: var(--step-0);
  }
  main { flex: 1 0 auto; }
  main:focus { outline: none; }
  h1, h2, h3, h4 {
    font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -.01em; text-wrap: balance;
  }
  h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -.02em; }
  h2 { font-size: var(--step-3); font-weight: 700; }
  h3 { font-size: var(--step-2); font-weight: 600; }
  h4 { font-size: var(--step-1); font-weight: 600; }
  p { text-wrap: pretty; }
  strong { font-weight: 700; }
  a { color: var(--ev); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
  a:hover { text-decoration-thickness: .14em; }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .icon {
    inline-size: 1.25em; block-size: 1.25em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
}

/* ===== layout primitives ===== */
@layer layout {
  .container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .container--narrow { max-inline-size: var(--container-narrow); }
  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack--sm { gap: var(--space-2); }
  .stack--lg { gap: var(--space-6); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
  .grid {
    display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
  }
  .grid--cards { --grid-min: 16rem; }
  .grid--tight { --grid-min: 12rem; }
  .grid--two { grid-template-columns: 1fr; }
  .section { padding-block: var(--section-gap); }
  .layout-sidebar { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) {
    .grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .layout-sidebar { grid-template-columns: 16rem minmax(0, 1fr); }
  }
}

/* ===== components: skip-link ===== */
@layer components {
  .skip-link {
    position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-skip);
    transform: translateY(-200%); padding: var(--space-2) var(--space-4);
    background: var(--ev); color: var(--on-ev); border-radius: var(--radius-full);
    font-size: var(--step--1); font-weight: 500; text-decoration: none;
  }
  .skip-link:focus { transform: translateY(0); }
}

/* ===== components: button ===== */
@layer components {
  .btn, .account button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-block-size: 2.75rem; padding-inline: var(--space-4);
    border: var(--bw) solid transparent; border-radius: var(--radius-2);
    background: transparent; color: var(--text);
    font-size: var(--step--1); font-weight: 500; line-height: var(--lh-ui); text-decoration: none; cursor: pointer;
  }
  .btn:active, .account button:active { transform: scale(.97); }
  .btn--primary, .account button { background: var(--ev); color: var(--on-ev); }
  .btn--primary:hover, .account button:hover { background: var(--ev-strong); }
  .btn--gas { background: var(--gas); color: var(--on-gas); }
  .btn--gas:hover { background: var(--gas-hover); }
  .btn--secondary { border-color: var(--border-strong); }
  .btn--secondary:hover { background: var(--surface-alt); }
  .btn--ghost { color: var(--ev); }
  .btn--ghost:hover { text-decoration: underline; }
  .btn--sm { min-block-size: 2.25rem; }
  .btn[disabled], .btn[aria-disabled="true"] {
    background: var(--surface-alt); color: var(--text-muted);
    border: var(--bw) dashed var(--border-strong); cursor: not-allowed; transform: none;
  }
  .icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0;
    border: var(--bw) solid var(--border-strong); border-radius: var(--radius-2);
    background: transparent; color: var(--text); cursor: pointer;
  }
  .icon-btn:hover, .icon-btn[aria-pressed="true"] { background: var(--surface-alt); }
}

/* ===== components: badge ===== */
@layer components {
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap;
    padding: .125rem var(--space-2); border: var(--bw) solid var(--branch, var(--border-strong)); border-radius: var(--radius-full);
    background: var(--branch-soft, var(--surface-alt)); color: var(--branch-ink, var(--text));
    font-size: var(--step--2); font-weight: 500; line-height: var(--lh-ui);
  }
  .badge .icon { inline-size: 1rem; block-size: 1rem; }
  .badge--neutral { --branch: var(--border-strong); --branch-soft: var(--surface-alt); --branch-ink: var(--text); }
  .badge--warn { --branch: var(--warn); --branch-soft: var(--warn-soft); --branch-ink: var(--warn); }
}

/* ===== components: alert ===== */
@layer components {
  .alert {
    --tone: var(--ev); --tone-soft: var(--ev-soft); --tone-ink: var(--ev-strong);
    display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4);
    border: var(--bw) solid var(--tone); border-inline-start-width: 4px; border-radius: var(--radius-2);
    background: var(--tone-soft); color: var(--text); font-size: var(--step--1); line-height: var(--lh-ui);
  }
  .alert[data-tone="ok"] { --tone: var(--ok); --tone-soft: var(--ok-soft); --tone-ink: var(--ok); }
  .alert[data-tone="warn"] { --tone: var(--warn); --tone-soft: var(--warn-soft); --tone-ink: var(--warn); }
  .alert[data-tone="err"] { --tone: var(--err); --tone-soft: var(--err-soft); --tone-ink: var(--err); }
  .alert > .icon { color: var(--tone-ink); margin-block-start: .1em; }
  .alert a { color: var(--tone-ink); }
  .alert__body { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
  .alert__title { font-weight: 700; color: var(--tone-ink); }
}

/* ===== components: field ===== */
@layer components {
  .field { display: flex; flex-direction: column; gap: var(--space-1); }
  .field__label { font-size: var(--step--1); font-weight: 500; }
  .field__hint { color: var(--text-muted); font-size: var(--step--2); }
  .field__error { display: flex; gap: var(--space-2); color: var(--err); font-size: var(--step--1); }
  .field__control, .account input:not([type="hidden"]) {
    inline-size: 100%; min-block-size: 2.75rem; padding: var(--space-2) var(--space-3);
    border: var(--bw) solid var(--border-strong); border-radius: var(--radius-1);
    background: var(--surface); color: var(--text); font-size: var(--step-0); line-height: var(--lh-ui);
  }
  .field__control::placeholder { color: var(--text-muted); opacity: 1; }
  .field__control[aria-invalid="true"] { border: var(--bw-strong) solid var(--err); }
  .field__control--select {
    appearance: none; padding-inline-end: 2.25rem; background-repeat: no-repeat;
    background-position: right .75rem center; background-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
  .nobr { white-space: nowrap; }
  .check { display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; padding-inline: .25rem; }
  .check input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--ev); }
  /* P8-52 F1: checkbox and label on one row, 24 px box */
  .field--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; column-gap: var(--space-3); }
  .field--check > input[type="checkbox"] { flex: none; inline-size: 1.5rem; block-size: 1.5rem; margin: 0; padding: 0; }
  .field--check > .field__label { flex: 1 1 0; min-inline-size: 0; cursor: pointer; }
  .field--check > .field__hint, .field--check > .field__error { flex: 1 0 100%; }
}

/* ===== components: header ===== */
@layer components {
  .site-header { border-block-end: var(--bw) solid var(--border); background: var(--bg); }
  .site-header__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-4); padding-block: var(--space-3);
  }
  .logo { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; color: var(--text); text-decoration: none; }
  .logo__mark { inline-size: 1.75rem; block-size: 1.75rem; }
  .logo__ev, .logo__gas { fill: none; stroke-width: 2.5; }
  .logo__ev { stroke: var(--ev); }
  .logo__gas { stroke: var(--gas); }
  .logo__text { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; letter-spacing: -.01em; }
  .site-header__tools { display: flex; align-items: center; gap: var(--space-2); }
  .market-slot { inline-size: 7.5rem; }
  .market-slot .field__control { min-inline-size: 0; text-overflow: ellipsis; padding-inline-start: var(--space-2); font-size: var(--step--1); }
  @media (min-width: 48rem) {
    .market-slot { inline-size: 9.5rem; }
  }
  .market-note { color: var(--text-muted); font-size: var(--step--2); }
  .theme-toggle { min-inline-size: 2.75rem; }
  /* R4-3: display-currency button and its popover (opens under the header, top right); data-fx reserves the line of a price until fx-line.js has run (marks data-fx-on) */
  .fx-btn { padding-inline: var(--space-2); font-size: var(--step--2); font-weight: 600; }
  .fx-pop { inset: 4rem var(--space-3) auto auto; margin: 0; inline-size: min(22rem, calc(100vw - 2rem)); padding: var(--space-4); border: var(--bw) solid var(--border-strong); border-radius: var(--radius-2); background: var(--surface); color: var(--text); font-size: var(--step--1); }
  .fx-pop p { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--step--2); }
  html[data-fx] .price[data-a]:not([data-fx-on])::after { content: "\a0"; flex: 1 0 100%; font-size: var(--step--2); }

  .site-nav { flex: 1 0 100%; border-block-start: var(--bw) solid var(--border); }
  .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
  .site-nav__link {
    display: inline-flex; align-items: center; min-block-size: 2.5rem;
    color: var(--text); font-size: var(--step--1); font-weight: 500; text-decoration: none;
  }
  .site-nav__link:hover { text-decoration: underline; }
  .site-nav__link[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
  .site-search { display: none; position: relative; }
  .site-search .field__control { inline-size: 10.5rem; padding-inline: 2.5rem var(--space-3); border-radius: var(--radius-full); font-size: var(--step--1); }
  .site-search__submit {
    position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2.5rem; padding: 0; border: 0; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text-muted); cursor: pointer;
  }
  @media (min-width: 64rem) {
    .site-header__bar { flex-wrap: nowrap; gap: var(--space-4); }
    .site-nav { flex: 1 1 auto; min-inline-size: 0; border-block-start: 0; }
    .site-nav__list { gap: 0 var(--space-3); }
    .site-search { display: block; flex: none; }
    .site-nav__search-link { display: none; }
  }
  @media (min-width: 80rem) {
    .site-search .field__control { inline-size: 13rem; }
    .site-nav__list { gap: 0 var(--space-4); }
  }

  /* Story hero (ADR-0090): the header lies over the video and keeps its place below the sample banner; past the hero home-companion.js sets is-docked (P8-08). */
  :root:not(.is-docked) .site-header--overlay { --text: rgb(244 246 250); --text-muted: rgb(201 209 220); --focus: rgb(165 185 255); }
  .site-header--overlay { position: absolute; inset-inline: 0; z-index: 30; border-block-end: 0; background: linear-gradient(180deg, rgb(7 9 14 / .72), transparent); }
  .site-header--overlay .site-nav { border-block-start: 0; }
  :root:not(.is-docked) .site-header--overlay :is(.field__control, .icon-btn) {
    border-color: rgb(255 255 255 / .28); background-color: rgb(7 9 14 / .5); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .site-header--overlay .field__control::placeholder { color: var(--text-muted); }
  :root:not(.is-docked) .site-header--overlay .icon-btn:is(:hover, [aria-pressed="true"]) { background-color: rgb(255 255 255 / .22); }
  :root:not(.is-docked) .site-header--overlay .field__control--select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D1DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
  :root:not(.is-docked) .site-header--overlay option { background: rgb(13 17 23); color: rgb(232 236 242); }
  :root.is-docked .site-header--overlay { position: fixed; inset-block-start: 0; border-block-end: var(--bw) solid var(--border); background: var(--bg); }
  /* the search link as an icon, its name kept */
  .site-nav__search-link a { inline-size: 2.75rem; justify-content: center; border-radius: var(--radius-2); font-size: 0; }
  .site-nav__search-link a::before {
    content: ""; inline-size: 1.25rem; block-size: 1.25rem; background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* phones and tablets, every page (P8-09): one row; the browse links are the bottom dock */
  @media (max-width: 63.99rem) {
    .site-header__bar { flex-wrap: nowrap; gap: var(--space-2); padding-block: var(--space-2); }
    .site-nav { flex: none; margin-inline-start: auto; border-block-start: 0; }
    .site-nav__list > li:not(.site-nav__search-link) { display: none; }
    .site-header .market-slot { flex: 0 1 7.5rem; inline-size: auto; min-inline-size: 4.5rem; }
    .site-header .market-slot .field__control { inline-size: 100%; }
    .site-header .logo { flex: 0 1 auto; overflow: hidden; }
    .site-header .logo__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step-0); }
    :root.dock-hide .site-dock:not(:focus-within) { transform: translateY(calc(100% + 2rem)); }
  }
  /* narrow or large text: the logo keeps its mark only (26rem since R4-3: the currency button needs the room) */
  @media (max-width: 26rem) {
    .site-header .logo__text { display: none; }
  }
  /* wide, docked: the search icon link instead of the field */
  @media (min-width: 64rem) {
    :root.is-docked .site-header--overlay .site-search { display: none; }
    :root.is-docked .site-header--overlay .site-nav { display: flex; justify-content: flex-end; }
    :root.is-docked .site-header--overlay .site-nav__search-link { display: block; }
  }

  /* the browse dock (P8-08): bottom bar below 64rem, header row when docked above */
  .site-dock { position: fixed; z-index: 31; inset: auto var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .site-dock ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: var(--space-1); list-style: none;
    border: var(--bw) solid var(--border); border-radius: 1.25rem; background: var(--surface); box-shadow: var(--shadow-2); }
  .site-dock a { display: grid; justify-items: center; gap: .125rem; min-block-size: 3.5rem; padding-block: var(--space-1); border-radius: 1rem; color: var(--text); font-size: var(--step--2); font-weight: 600; text-decoration: none; }
  .site-dock a:hover { background: var(--surface-alt); }
  .site-dock .icon { inline-size: 2rem; block-size: 2rem; padding: .375rem; border-radius: var(--radius-full); background: var(--surface-alt); }
  .site-dock li.site-dock__ev .icon { background: var(--ev); color: var(--on-ev); }
  .site-dock li.site-dock__gas .icon { background: var(--gas); color: var(--on-gas); }
  :root:has(.site-dock) body { padding-block-end: 5.5rem; }
  /* WCAG 2.4.11 */
  :root.is-docked { scroll-padding-block-start: 5.5rem; }
  :root:has(.site-dock) { scroll-padding-block-end: 6.5rem; }
  @media (min-width: 64rem) {
    .site-dock { display: none; }
    :root:has(.site-dock) body { padding-block-end: 0; }
    :root:has(.site-dock) { scroll-padding-block-end: 0; }
    :root.is-docked .site-dock { display: block; inset: calc(var(--space-3) + .125rem) auto auto 50%; translate: -50% 0; }
    :root.is-docked .site-dock ul { display: flex; gap: var(--space-2); padding: 0; border: 0; background: none; box-shadow: none; }
    :root.is-docked .site-dock a { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 2.5rem; padding: 0 var(--space-3); border: var(--bw) solid var(--border); border-radius: var(--radius-full); background: var(--surface); font-size: var(--step--1); }
    :root.is-docked .site-dock .icon { inline-size: 1.125rem; block-size: 1.125rem; padding: 0; background: none; color: inherit; }
    :root.is-docked .site-dock li.site-dock__ev a { border-color: var(--ev); background: var(--ev); color: var(--on-ev); }
    :root.is-docked .site-dock li.site-dock__gas a { border-color: var(--gas); background: var(--gas); color: var(--on-gas); }
  }
  /* 64 to 72rem: no icons in the docked row */
  @media (min-width: 64rem) and (max-width: 71.99rem) { :root.is-docked .site-dock .icon { display: none; } }
}

/* ===== components: footer ===== */
@layer components {
  .site-footer {
    padding-block: var(--space-6) var(--space-8); border-block-start: var(--bw) solid var(--border);
    background: var(--surface-alt); color: var(--text-muted); font-size: var(--step--2);
  }
  .site-footer a { color: var(--text); }
  .site-footer__links { gap: var(--space-2) var(--space-5); }
}

/* ===== components: hero ===== */
@layer components {
  .hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-block: var(--section-gap); }
  .hero__title { max-inline-size: 18ch; font-size: var(--step-5); font-weight: 800; }
  .hero__tagline { color: var(--text-muted); font-size: var(--step--1); font-weight: 500; }
  .lead { max-inline-size: var(--measure-narrow); font-size: var(--step-1); }
  .duo-rule {
    inline-size: 6rem; block-size: 4px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--ev) 50%, var(--gas) 50%);
  }
}

/* ===== components: ad-slot (DESIGN_SYSTEM 4.3, PAGES_DESIGN_PART2 6.1) ===== */
@layer components {
  .ad-slot { margin-block: var(--space-7); text-align: center; }
  .ad-slot__label {
    color: var(--text-muted);
    font-size: var(--step--2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: var(--lh-ui);
    margin: 0;
    margin-block-end: var(--space-1);
  }
  .ad-slot__box {
    block-size: 280px;
    max-inline-size: 336px;
    min-inline-size: 0;
    margin-inline: auto;
    overflow: hidden;
  }
  .ad-slot--rect .ad-slot__box { block-size: 280px; max-inline-size: 336px; }
  .ad-slot--leaderboard .ad-slot__box { block-size: 100px; }
  @media (min-width: 48rem) {
    .ad-slot--leaderboard .ad-slot__box { block-size: 90px; max-inline-size: 728px; }
  }

  /* ad-slot states (PAGES_DESIGN_PART2 6.1) */
  .ad-slot[data-state="empty"] .ad-slot__box,
  .ad-slot[data-state="idle"] .ad-slot__box,
  .ad-slot[data-state="unfilled"] .ad-slot__box {
    background: transparent;
  }
  .ad-slot--dev .ad-slot__box,
  .ad-slot[data-dev] .ad-slot__box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--bw) dashed var(--border-strong);
    border-radius: var(--radius-1);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--step--1);
  }
  .ad-slot[data-state="loading"] .ad-slot__box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    border-radius: var(--radius-1);
    color: var(--text-muted);
    font-size: var(--step--1);
  }
  .ad-slot[data-state="filled"] .ad-slot__box {
    background: var(--surface);
  }
  .ad-slot[data-state="blocked"] .ad-slot__label,
  .ad-slot[data-state="consent-blocked"] .ad-slot__label {
    display: none;
  }
  .ad-slot[data-state="hidden"],
  .ad-slot[hidden] {
    display: none;
  }
}


/* ===== components: account (login and 2FA pages, which keep their own plain markup) ===== */
@layer components {
  .account { padding-block: var(--section-gap); }
  .account form { display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 26rem; margin-block: var(--space-4); }
  .account label { display: block; margin-block-end: var(--space-1); font-size: var(--step--1); font-weight: 500; }
  .form-error {
    padding: var(--space-3) var(--space-4); border: var(--bw) solid var(--err); border-inline-start-width: 4px;
    border-radius: var(--radius-2); background: var(--err-soft); color: var(--text);
  }
  .recovery-codes { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .qr { max-inline-size: 16rem; }
  .qr svg { inline-size: 100%; block-size: auto; background: #FFFFFF; }
}

/* ===== components: price and tax-flag (PAGES_DESIGN 8.2) =====
   One .price element per market (data-m), so amount, flag and source link stay one unit. */
@layer components {
  .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
  .price__label { flex: 1 0 100%; color: var(--text-muted); font-size: var(--step--1); font-weight: 500; }
  .price__amount {
    min-inline-size: 9ch; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
    line-height: var(--lh-tight); font-variant-numeric: tabular-nums;
  }
  .ap::before { content: "\2248\00a0"; content: "\2248\00a0" / "approximately "; font-family: system-ui, sans-serif; }
  .price__meta { flex: 1 0 100%; color: var(--text-muted); font-size: var(--step--2); }
  .price--compact .price__amount { font-size: var(--step-1); }
  .price__from { font-size: var(--step--1); }
  .price--none { color: var(--text-muted); font-size: var(--step--1); }
  .price__fx { display: block; flex: 1 0 100%; color: var(--text-muted); font-size: var(--step--2); font-weight: 400; }
  .tax-flag {
    display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap;
    color: var(--text-muted); font-size: var(--step--2);
  }
  .tax-flag .icon { inline-size: 1rem; block-size: 1rem; }
}

/* ===== components: energy cost (F03-AC04, PAGES_DESIGN 6.9) =====
   The cost per 100 km of one car in one market, with the price, date and source under it. */
@layer components {
  .energy-cost { display: flex; flex-direction: column; gap: var(--space-1); }
  .energy-cost__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
  .energy-cost__amount { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
  .energy-cost__meta { color: var(--text-muted); font-size: var(--step--2); }
}

/* ===== components: affiliate links (F20-AC02, F20-AC03) =====
   A short list of partner links under the main content of a page; each link is followed by the visible "affiliate link" marker. */
@layer components {
  .affiliate-links__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .affiliate-links__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
  .affiliate-links__marker {
    padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-1);
    color: var(--text-muted); font-size: var(--step--2); white-space: nowrap;
  }
  .affiliate-links__note { color: var(--text-muted); font-size: var(--step--1); }
}

/* ===== components: card (PAGES_DESIGN 8.3) =====
   The title link is stretched over the card: one link and one focus stop per card. */
@layer components {
  .card {
    position: relative; display: flex; flex-direction: column; min-inline-size: 0;
    border: var(--bw) solid var(--border); border-radius: var(--radius-2);
    background: var(--surface); box-shadow: var(--shadow-1);
  }
  .card--car { border-block-start: 4px solid var(--branch, var(--border)); }
  .card__body { flex: 1; min-inline-size: 0; padding: var(--space-4); }
  .card__title { font-size: var(--step-1); font-weight: 600; overflow-wrap: anywhere; }
  .card__meta { color: var(--text-muted); font-size: var(--step--1); }
  .card__versions { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
  .card__link { color: var(--text); text-decoration: none; }
  .card__link:hover { text-decoration: underline; }
  .card__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); border-radius: inherit; }
  .card__link:focus-visible { outline-color: transparent; }
  .card__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (hover: hover) {
    .card:hover { box-shadow: var(--shadow-2); }
  }
}

/* ===== components: facts (PAGES_DESIGN 8.3) ===== */
@layer components {
  .facts { display: grid; gap: var(--space-1); margin: 0; }
  .facts__item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-2); }
  .facts dt { margin: 0; color: var(--text-muted); font-size: var(--step--2); }
  .facts dd { min-inline-size: 9ch; margin: 0; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
}

/* ===== components: breadcrumb (DESIGN_SYSTEM 4.3, PAGES_DESIGN 8.4) ===== */
@layer components {
  .breadcrumb { font-size: var(--step--1); }
  .breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); list-style: none; margin: 0; padding: 0; }
  .breadcrumb__item { min-inline-size: 0; overflow-wrap: anywhere; }
  .breadcrumb__item + .breadcrumb__item::before {
    content: "/"; content: "/" / ""; margin-inline-end: var(--space-2); color: var(--text-muted);
  }
  .breadcrumb__item[aria-current="page"] { color: var(--text-muted); }
}

/* ===== components: empty-state (DESIGN_SYSTEM 4.3, PAGES_DESIGN 8.5) ===== */
@layer components {
  .empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
    max-inline-size: var(--measure-narrow); margin-inline: auto; padding-block: var(--space-7); text-align: center;
  }
  .empty__art {
    inline-size: 6rem; block-size: 4rem; color: var(--text-muted);
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .empty__title { font-size: var(--step-2); }
  .empty__text { color: var(--text-muted); }
}

/* ===== components: filters form (PAGES_DESIGN 8.6) ===== */
@layer components {
  .filters {
    display: flex; flex-direction: column; gap: var(--space-4); align-self: start; min-inline-size: 0;
    padding: var(--space-4); border: var(--bw) solid var(--border); border-radius: var(--radius-2);
    background: var(--surface-alt);
  }
  .fieldset { min-inline-size: 0; }
  .filters__range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .filters__more { padding-block-start: var(--space-3); border-block-start: var(--bw) solid var(--border); }
  .filters__more > summary {
    display: flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; cursor: pointer;
  }
  .filters__more[open] > summary { margin-block-end: var(--space-2); }
}

/* ===== components: pagination (DESIGN_SYSTEM 4.3, PAGES_DESIGN 8.7) ===== */
@layer components {
  .pagination { margin-block-start: var(--space-6); }
  .pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: var(--space-3);
    border: var(--bw) solid var(--border-strong); border-radius: var(--radius-2);
    color: var(--text); font-size: var(--step--1); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration: none;
  }
  .pagination__link:hover { background: var(--surface-alt); }
  .pagination__link[aria-current="page"] { border-color: var(--text); background: var(--text); color: var(--bg); font-weight: 700; }
  .pagination__gap { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--text-muted); }
}

/* ===== components: results-bar (PAGES_DESIGN 8.8) ===== */
@layer components {
  .results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
  .results-bar__count { font-size: var(--step--1); font-weight: 500; }
}

/* ===== components: spec-table (DESIGN_SYSTEM 4.3, PAGES_DESIGN 8.9) =====
   Also the scroll region (positioned, so absolute hidden text is clipped with it) and the base of the compare table. */
@layer components {
  .table-scroll { position: relative; max-inline-size: 100%; overflow-x: auto; }
  .spec-table { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  .spec-table th, .spec-table td {
    padding: var(--space-2) var(--space-3); border-block-end: var(--bw) solid var(--border);
    text-align: start; vertical-align: top; overflow-wrap: anywhere;
  }
  .spec-table thead th { color: var(--text-muted); font-size: var(--step--2); font-weight: 600; }
  .spec-table thead th:first-child { inline-size: 40%; }
  .spec-table tbody tr { background: var(--surface); }
  .spec-table tbody tr:nth-child(odd):not(:first-child) { background: var(--surface-alt); }
  .spec-table tbody th[scope="row"] { color: var(--text-muted); font-size: var(--step--1); font-weight: 400; hyphens: auto; }
  .spec-table td { font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  .spec-table caption { padding-block-end: var(--space-2); text-align: start; }
  .spec-table__group { background: var(--surface-alt); font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; }
}

/* ===== components: price-table (PAGES_DESIGN 8.10) =====
   Equal fixed columns; the table scrolls inside .table-scroll and the market column stays in view. */
@layer components {
  .price-table { inline-size: 100%; min-inline-size: 36rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
  .price-table--wide { min-inline-size: 62rem; }
  .price-table th, .price-table td {
    padding: var(--space-2) var(--space-3); border-block-end: var(--bw) solid var(--border);
    font-size: var(--step--1); text-align: start; vertical-align: top; overflow-wrap: anywhere;
  }
  .price-table thead th { color: var(--text-muted); font-size: var(--step--2); font-weight: 600; }
  .price-table tr { background: var(--surface); }
  .price-table tr.price-table__row--lowest { background: var(--surface-alt); }
  .price-table th:first-child { position: sticky; inset-inline-start: 0; z-index: var(--z-raised); background: inherit; }
  .price-table__amount { font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; font-variant-numeric: tabular-nums; }
  .price-table__note, .price-table__sub { display: block; color: var(--text-muted); font-size: var(--step--2); font-weight: 400; }
  .price-table__badge { display: flex; inline-size: fit-content; margin-block-start: var(--space-1); }
  .price-table [aria-sort="ascending"] a::after { content: " \2191"; content: " \2191" / ""; }
}

/* ===== components: car-summary (PAGES_DESIGN 8.11) ===== */
@layer components {
  .car-summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-inline-size: 0; }
  .car-summary__prices, .car-summary .facts, .car-summary__actions { inline-size: 100%; }
  .car-summary__prices { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--bw) solid var(--border); border-radius: var(--radius-3); background: var(--surface); }
  .car-summary__prices .price__amount { font-size: var(--step-3); }
}

/* ===== components: insights (PAGES_DESIGN 8.11) ===== */
@layer components {
  .insights { display: flex; flex-direction: column; gap: var(--space-4); }
  .insights__cols > :only-child { grid-column: 1 / -1; }
  .insights__title { margin-block-end: var(--space-2); font-size: var(--step-1); }
  .insights__list { display: flex; flex-direction: column; gap: var(--space-2); max-inline-size: var(--measure-narrow); margin: 0; padding: 0; list-style: none; }
  .insights__list li { display: flex; align-items: flex-start; gap: var(--space-2); }
  .insights__list .icon { margin-block-start: .15em; }
  .insights__list--pro .icon { color: var(--ok); }
  .insights__list--con .icon { color: var(--err); }
}

/* ===== components: source-note (PAGES_DESIGN 8.11) ===== */
@layer components {
  .source-note { max-inline-size: var(--measure); color: var(--text-muted); font-size: var(--step--2); overflow-wrap: anywhere; }
}

/* ===== components: rating (PAGES_DESIGN 8.11) ===== */
@layer components {
  .rating { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
  .rating__label { min-inline-size: 7rem; font-size: var(--step--1); font-weight: 500; }
  .rating__meter { inline-size: 7.5rem; block-size: .75rem; }
  .rating__value { font-size: var(--step--1); font-variant-numeric: tabular-nums; }
}

/* ===== components: stat-list (PAGES_DESIGN 8.14) ===== */
@layer components {
  .stat-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; }
  .stat-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Four figures go on one row only when the list itself is wide enough for the longest label on one line ("Markets with prices"): the block that holds
     the list is a size container, so a narrow column keeps the 2 x 2 grid on a wide screen (owner, 2026-10-27). */
  :where(*):has(> .stat-list) { container-type: inline-size; }
  @container (min-width: 38rem) { .stat-list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat-list:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .stat-list__item { min-inline-size: 0; display: flex; flex-direction: column; padding-block-start: var(--space-2); border-block-start: var(--bw) solid var(--border); }
  .stat-list dt { color: var(--text-muted); font-size: var(--step--1); }
  .stat-list dd { margin: auto 0 0; font-family: var(--font-display); font-size: var(--step-3); font-weight: 700; font-variant-numeric: tabular-nums; }
}

/* ===== components: compare layout, is-better and marker (DESIGN_SYSTEM 4.3, PAGES_DESIGN 8.12) =====
   Two cars share a fixed table (30% label, the rest split); three scroll in .table-scroll with the label column in view. */
@layer components {
  .compare { display: flex; flex-direction: column; gap: var(--space-5); }
  .compare__heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .compare__heads--three { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) {
    .compare__heads--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .compare__head {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-inline-size: 0;
    padding: var(--space-3); border: var(--bw) solid var(--border); border-block-start: 4px solid var(--branch, var(--border));
    border-radius: var(--radius-2); background: var(--surface);
  }
  .compare__name { font-size: var(--step-1); overflow-wrap: anywhere; }
  .compare__meta { color: var(--text-muted); font-size: var(--step--2); }
  .compare-table thead th:first-child { inline-size: 30%; }
  .compare-table thead th:not(:first-child) { color: var(--text); font-size: var(--step--1); }
  .compare-table--three { min-inline-size: 34rem; }
  .compare-table--three thead th:first-child, .compare-table--three th[scope="row"] {
    position: sticky; inset-inline-start: 0; z-index: var(--z-raised); background: inherit;
  }
  .compare-table--three thead th:first-child { background: var(--surface-alt); }
  .compare-table__market { display: block; color: var(--text-muted); font-size: var(--step--2); font-weight: 400; }
  .compare-table .tax-flag { display: flex; }
  .is-better { background: var(--ok-soft); }
  .marker { display: inline-flex; align-items: center; margin-inline-start: var(--space-1); color: var(--ok); vertical-align: middle; }
  .marker .icon { inline-size: 1rem; block-size: 1rem; }
}

/* ===== components: compare-picker and compare__summary (PAGES_DESIGN 8.13) ===== */
@layer components {
  .compare-picker {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-inline-size: 0;
    padding: var(--space-4); border: var(--bw) solid var(--border); border-radius: var(--radius-2); background: var(--surface-alt);
  }
  .compare-picker > .alert { inline-size: 100%; }
  .compare-picker__fields { display: grid; inline-size: 100%; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .compare__summary { display: flex; flex-direction: column; gap: var(--space-2); }
  .compare__summary ul { max-inline-size: var(--measure); margin: 0; padding-inline-start: 1.25rem; }
  .compare__summary li + li { margin-block-start: var(--space-2); }
}

/* ===== components: pair-card (PAGES_DESIGN 8.14) ===== */
@layer components {
  .pair-card { gap: var(--space-2); padding: var(--space-4); }
  .pair-card__title { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--step-1); font-weight: 600; overflow-wrap: anywhere; }
  .pair-card__vs, .pair-tile__vs { color: var(--text-muted); font-size: var(--step--1); font-weight: 500; }
  .pair-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; margin-block-start: auto; }
}

/* ===== components: tab-nav (PAGES_DESIGN 16.7) ===== */
@layer components {
  .tab-nav { border-block-end: var(--bw) solid var(--border); }
  .tab-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .tab-nav__link {
    display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem;
    padding-inline: var(--space-3); color: var(--text); text-decoration: none;
    border-block-end: 3px solid transparent; font-size: var(--step--1); font-weight: 500;
  }
  .tab-nav__link:hover { text-decoration: underline; }
  .tab-nav__link[aria-current="page"] { font-weight: 700; border-block-end-color: var(--text); }
  .tab-nav__link .icon { inline-size: 1rem; block-size: 1rem; color: var(--text-muted); }
  .tab-nav__count { color: var(--text-muted); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
}

/* ===== components: intro (PAGES_DESIGN 16.7) ===== */
@layer components {
  .intro { max-inline-size: var(--measure); text-wrap: pretty; color: var(--text); }
  .intro p + p { margin-block-start: var(--space-3); }
}

/* ===== components: search-form (PAGES_DESIGN 16.7) ===== */
@layer components {
  .search-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
  .search-form__field { flex: 1 1 16rem; min-inline-size: 0; }
}

/* ===== components: prose (PAGES_DESIGN_PART2 3.2, 4.1) =====
   Editorial and content pages: line length capped at --measure, vertical rhythm for headings,
   styled blockquotes, code, tables inside .table-scroll, and underlined links with visible focus. */
@layer components {
  .prose {
    max-inline-size: var(--measure);
    overflow-wrap: break-word; /* P8-32: a long unbroken URL in the text wraps instead of widening the page at 320 px */
    color: var(--text);
    line-height: var(--lh-body);
    font-size: var(--step-0);
  }
  /* The author profile: the text is as wide as the profile card above it (owner 2026-10-25), not cut at the reading measure. */
  .prose--fill { max-inline-size: none; }
  .prose > :first-child { margin-block-start: 0; }
  .prose > :last-child { margin-block-end: 0; }
  .prose p {
    margin-block: 0 var(--space-4);
    text-wrap: pretty;
  }
  .prose h2, .prose h3, .prose h4 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    text-wrap: balance;
    color: var(--text);
  }
  .prose h2 {
    font-size: var(--step-3);
    font-weight: 700;
    margin-block: var(--space-7) var(--space-3);
  }
  .prose h3 {
    font-size: var(--step-2);
    font-weight: 600;
    margin-block: var(--space-6) var(--space-2);
  }
  .prose h4 {
    font-size: var(--step-1);
    font-weight: 600;
    margin-block: var(--space-5) var(--space-2);
  }
  .prose ul, .prose ol {
    margin-block: 0 var(--space-4);
    padding-inline-start: var(--space-5);
  }
  .prose li {
    margin-block-end: var(--space-2);
  }
  .prose li > ul, .prose li > ol {
    margin-block: var(--space-2) 0;
  }
  .prose blockquote {
    margin-block: var(--space-5);
    margin-inline: 0;
    padding-inline: var(--space-4);
    border-inline-start: 4px solid var(--border-strong);
    color: var(--text-muted);
    font-style: italic;
  }
  .prose blockquote p:last-child {
    margin-block-end: 0;
  }
  .prose hr {
    border: 0;
    border-block-start: var(--bw) solid var(--border);
    margin-block: var(--space-6);
  }
  .prose a {
    color: var(--ev);
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }
  .prose a:hover {
    color: var(--ev-strong);
    text-decoration-thickness: .14em;
  }
  .prose a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-1);
  }
  .prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    padding: .125rem var(--space-1);
    border-radius: var(--radius-1);
    background: var(--surface-alt);
    border: var(--bw) solid var(--border);
    overflow-wrap: anywhere;
  }
  .prose pre {
    margin-block: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2);
    background: var(--surface-alt);
    border: var(--bw) solid var(--border);
    overflow-x: auto;
    max-inline-size: 100%;
  }
  .prose pre code {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: var(--step--1);
  }
  .prose .table-scroll {
    margin-block: var(--space-5);
  }
  .prose table,
  .prose__table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .prose th, .prose td,
  .prose__table th, .prose__table td {
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--bw) solid var(--border);
    text-align: start;
    vertical-align: top;
    font-size: var(--step--1);
  }
  .prose thead th,
  .prose__table thead th {
    color: var(--text-muted);
    font-size: var(--step--2);
    font-weight: 600;
    border-block-end: var(--bw-strong) solid var(--border-strong);
    background: var(--surface-alt);
  }
  .prose tbody tr:nth-child(even),
  .prose__table tbody tr:nth-child(even) {
    background: var(--surface-alt);
  }
}

/* ===== components: toc (PAGES_DESIGN_PART2 3.2, 4.1) =====
   Table of contents: container with title, nested list for headings, current section state. */
@layer components {
  .toc {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-inline-size: var(--measure);
    padding: var(--space-4);
    border: var(--bw) solid var(--border);
    border-radius: var(--radius-2);
    background: var(--surface-alt);
  }
  .toc__title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--text);
  }
  .toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toc__list .toc__list,
  .toc__list--nested {
    margin-inline-start: var(--space-4);
    margin-block-start: var(--space-1);
    padding-inline-start: var(--space-2);
    border-inline-start: var(--bw-strong) solid var(--border);
  }
  .toc__item {
    min-inline-size: 0;
  }
  .toc__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    padding-inline: var(--space-3);
    padding-block: var(--space-2);
    border-radius: var(--radius-1);
    border-inline-start: 3px solid transparent;
    color: var(--text);
    font-size: var(--step--1);
    font-weight: 500;
    line-height: var(--lh-ui);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  /* The entry under the pointer and the entry of the section being read (toc-spy.js) look the same. */
  .toc__link:hover,
  .toc__link[aria-current="true"],
  .toc__link[aria-current="location"] {
    color: var(--ev);
    background: var(--surface);
    text-decoration: underline;
  }
  .toc__link:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .toc--empty {
    color: var(--text-muted);
    font-size: var(--step--1);
    font-style: italic;
    margin: 0;
  }
}

/* ===== components: byline (PAGES_DESIGN_PART2 4.2) =====
   Editorial metadata: author link, published date, reviewed date, reading time. */
@layer components {
  .byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-inline-size: var(--measure); font-size: var(--step--1); color: var(--text-muted); line-height: var(--lh-ui); }
  .byline a { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
  .byline a:hover { color: var(--ev); text-decoration-thickness: .14em; }
  .byline a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-1); }
  .byline time { font-variant-numeric: tabular-nums; }
  .byline__sep { color: var(--border-strong); user-select: none; }
  @media (max-width: 39.99rem) { .byline__sep { display: none; } } /* P8-57: no dangling dot at a line break; the gap separates */
  .byline__reading-time { white-space: nowrap; }
}

/* ===== components: source-list (PAGES_DESIGN_PART2 4.2) =====
   Numbered citations and sources with external links, publishers, and access dates. */
@layer components {
  .source-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding-inline-start: var(--space-5);
    max-inline-size: var(--measure);
    font-size: var(--step--1);
    color: var(--text-muted);
  }
  .source-list__item {
    padding-block: var(--space-1);
  }
  .source-list__item::marker {
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  .source-list__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .source-list__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    color: var(--ev);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
    overflow-wrap: anywhere;
  }
  .source-list__link:hover {
    color: var(--ev-strong);
    text-decoration-thickness: .14em;
  }
  .source-list__link:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-1);
  }
  .source-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--step--2);
    color: var(--text-muted);
  }
  .source-list__publisher {
    font-weight: 500;
  }
  .source-list__date time {
    font-variant-numeric: tabular-nums;
  }
  .source-list--empty {
    list-style: none;
    padding: 0;
    font-style: italic;
  }
}

/* ===== components: glossary-nav (PAGES_DESIGN_PART2 4.3) =====
   A-Z jump navigation bar: interactive letter links, disabled letters without terms, active state. */
@layer components {
  .glossary-nav { max-inline-size: var(--measure); }
  .glossary-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; align-items: center; }
  .glossary-nav__item { display: inline-flex; }
  .glossary-nav__link { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: var(--space-1); border: var(--bw) solid var(--border); border-radius: var(--radius-1); background: var(--surface); color: var(--ev); font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; text-decoration: none; cursor: pointer; }
  .glossary-nav__link:hover { background: var(--surface-alt); color: var(--ev-strong); border-color: var(--border-strong); text-decoration: underline; }
  .glossary-nav__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .glossary-nav__link[aria-current="true"], .glossary-nav__link[aria-current="location"] { background: var(--ev); color: var(--on-ev); border-color: var(--ev); font-weight: 700; text-decoration: none; }
  .glossary-nav__link[aria-current="true"]:hover, .glossary-nav__link[aria-current="location"]:hover { background: var(--ev-strong); border-color: var(--ev-strong); color: var(--on-ev); }
  .glossary-nav__disabled, .glossary-nav__link[aria-disabled="true"] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: var(--space-1); border: var(--bw) dashed var(--border); border-radius: var(--radius-1); background: var(--surface-alt); color: var(--text-muted); font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; cursor: not-allowed; text-decoration: none; opacity: .6; }
}

/* ===== components: legal-meta (PAGES_DESIGN_PART2 3.2, 4.1) =====
   Legal and trust page metadata: last reviewed / updated date line, and draft / legal review notice. */
@layer components {
  .legal-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-inline-size: var(--measure);
    font-size: var(--step--2);
    color: var(--text-muted);
    line-height: var(--lh-ui);
  }
  .legal-meta time {
    font-variant-numeric: tabular-nums;
  }
  .legal-meta__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
  }
  .legal-meta__notice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--bw) solid var(--warn);
    border-inline-start-width: 4px;
    border-radius: var(--radius-1);
    background: var(--warn-soft);
    color: var(--warn);
    font-size: var(--step--1);
    font-weight: 500;
    line-height: var(--lh-ui);
  }
  .legal-meta__notice .icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: var(--warn);
    flex-shrink: 0;
  }
}

/* ===== components: generated-table (PAGES_DESIGN_PART2 3.3, 4.1) =====
   Tables generated from code or verified data feeds (cookies, data sources, assumptions),
   with accessible caption, generated-code badge, scoped headers, and source footnote. */
@layer components {
  .generated-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-inline-size: 100%;
    margin-block: var(--space-4);
  }
  .generated-table .table-scroll {
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
  }
  .generated-table__caption {
    text-align: start;
    padding-block-end: var(--space-2);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
  }
  .generated-table__caption-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .generated-table__title {
    color: var(--text);
  }
  .generated-table__table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .generated-table__table th,
  .generated-table__table td {
    padding: var(--space-2) var(--space-3);
    border-block-end: var(--bw) solid var(--border);
    font-size: var(--step--1);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  .generated-table__table thead th {
    color: var(--text-muted);
    font-size: var(--step--2);
    font-weight: 600;
    border-block-end: var(--bw-strong) solid var(--border-strong);
    background: var(--surface-alt);
  }
  .generated-table__table tbody tr {
    background: var(--surface);
  }
  .generated-table__table tbody tr:nth-child(even) {
    background: var(--surface-alt);
  }
  .generated-table__table td {
    font-variant-numeric: tabular-nums;
  }
  .generated-table__source {
    color: var(--text-muted);
    font-size: var(--step--2);
    margin: 0;
    line-height: var(--lh-ui);
  }
  .generated-table__source time {
    font-variant-numeric: tabular-nums;
  }
  .generated-table--empty {
    padding: var(--space-4);
    border: var(--bw) dashed var(--border-strong);
    border-radius: var(--radius-2);
    background: var(--surface-alt);
  }
  .generated-table__empty-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
  }
  .generated-table__empty-message {
    color: var(--text-muted);
    font-size: var(--step--1);
    margin: 0;
    line-height: var(--lh-body);
  }
}

/* ===== components: form-stack ===== */
@layer components {
  .form-stack { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }
  .form-stack--sm { gap: var(--space-2); }
  .form-stack__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2); }
}

/* ===== components: form-summary ===== */
@layer components {
  .form-summary {
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    border: var(--bw) solid var(--err); border-inline-start-width: 4px; border-radius: var(--radius-2);
    background: var(--err-soft); color: var(--text); font-size: var(--step--1); line-height: var(--lh-ui);
  }
  .form-summary:focus, .form-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .form-summary h2, .form-summary__title {
    display: flex; align-items: center; gap: var(--space-2); color: var(--err);
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; line-height: var(--lh-tight); margin: 0;
  }
  .form-summary h2 .icon, .form-summary__title .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--err); flex-shrink: 0; }
  .form-summary p, .form-summary__notice { color: var(--text); margin: 0; }
  .form-summary ul, .form-summary__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-inline-start: var(--space-4); }
  .form-summary li, .form-summary__item { padding: 0; }
  .form-summary a, .form-summary__link {
    display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--err); font-weight: 600;
    text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em;
  }
  .form-summary a:hover, .form-summary__link:hover { text-decoration-thickness: .14em; }
  .form-summary a:focus-visible, .form-summary__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-1); }
}

/* ===== components: hp ===== */
@layer components {
  .hp {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; pointer-events: none; opacity: 0;
  }
}

/* ===== components: confirmation ===== */
@layer components {
  .confirmation {
    display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
    border: var(--bw) solid var(--ok); border-inline-start-width: 4px; border-radius: var(--radius-2);
    background: var(--ok-soft); color: var(--text); min-inline-size: 0;
  }
  .confirmation__header { display: flex; align-items: center; gap: var(--space-3); }
  .confirmation__icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--ok); flex-shrink: 0; }
  .confirmation h2, .confirmation__title {
    font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--ok); line-height: var(--lh-tight); margin: 0;
  }
  .confirmation p, .confirmation__message { font-size: var(--step-0); line-height: var(--lh-body); margin: 0; }
  .confirmation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2); }
}

/* ===== components: link ===== */
@layer components {
  button.link, .link {
    display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 2.75rem;
    padding: 0; border: 0; background: transparent; color: var(--ev); font-family: inherit; font-size: inherit;
    line-height: var(--lh-ui); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; cursor: pointer;
  }
  button.link:hover, .link:hover { color: var(--ev-strong); text-decoration-thickness: .14em; }
  button.link:focus-visible, .link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-1); }
  button.link[disabled], button.link[aria-disabled="true"], .link[disabled], .link[aria-disabled="true"] {
    color: var(--text-muted); cursor: not-allowed; text-decoration: none;
  }
}

/* ===== components: consent ===== */
@layer components {
  .consent {
    position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-overlay);
    background: var(--surface); border-block-start: var(--bw-strong) solid var(--border-strong);
    box-shadow: var(--shadow-2); padding-block: var(--space-3) var(--space-4); color: var(--text);
    max-block-size: 60vh; overflow-y: auto;
  }
  .consent--static {
    position: static; border: var(--bw) solid var(--border-strong); border-radius: var(--radius-2);
    box-shadow: var(--shadow-1); max-block-size: none;
  }
  .consent[hidden], .consent[data-state="hidden"] { display: none; }
  .consent__inner { display: flex; flex-direction: column; gap: var(--space-3); }
  @media (min-width: 48rem) {
    .consent__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  }
  .consent__content { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; max-inline-size: var(--measure); }
  .consent h2, .consent h3, .consent__title {
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; color: var(--text); line-height: var(--lh-tight); margin: 0;
  }
  .consent p, .consent__desc { font-size: var(--step--1); color: var(--text-muted); line-height: var(--lh-ui); margin: 0; }
  .consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex-shrink: 0; }
  .consent__btn { min-block-size: 2.75rem; }
  .consent__prefs { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: var(--bw) solid var(--border); }
  .consent__pref-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: 2.75rem; }
}
/* ===== components: tool-form ===== */
@layer components {
  .tool-form { display: flex; flex-direction: column; gap: var(--space-5); min-inline-size: 0; }
  .tool-form__section { display: flex; flex-direction: column; gap: var(--space-3); }
  .tool-form__section-title {
    font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
    color: var(--text); line-height: var(--lh-tight); margin: 0;
  }
  .tool-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  @media (min-width: 48rem) {
    .tool-form__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .tool-form__group {
    display: flex; flex-direction: column; gap: var(--space-3); margin: 0;
    padding: var(--space-4); border: var(--bw) solid var(--border);
    border-radius: var(--radius-2); background: var(--surface); min-inline-size: 0;
  }
  .tool-form__legend {
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
    color: var(--text); line-height: var(--lh-tight); padding-inline: var(--space-2); margin: 0;
  }
  .tool-form__fields { display: flex; flex-direction: column; gap: var(--space-3); }
  .tool-form__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2);
  }
  .tco-slider { display: flex; flex-direction: column; gap: var(--space-2); }
  .tco-slider__range { inline-size: 100%; min-block-size: 2.75rem; accent-color: var(--ev); }
  .tco-slider[hidden] { display: none; }
  .tool-share {
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    border: var(--bw) solid var(--border); border-radius: var(--radius-2); background: var(--surface-alt);
    max-inline-size: var(--measure);
  }
  .tool-share__label {
    font-family: var(--font-display); font-size: var(--step--1); font-weight: 700; color: var(--text); margin: 0;
  }
  .tool-share__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .tool-share__input {
    flex: 1 1 14rem; min-inline-size: 0; min-block-size: 2.75rem; padding: var(--space-2) var(--space-3);
    border: var(--bw) solid var(--border-strong); border-radius: var(--radius-1);
    background: var(--surface); color: var(--text); font-family: var(--font-body);
    font-size: var(--step--1); line-height: var(--lh-ui);
  }
  .tool-share__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .tool-share__btn { min-block-size: 2.75rem; flex-shrink: 0; }
  .tool-share__status {
    font-size: var(--step--1); color: var(--ok); font-weight: 600; min-block-size: 1.5rem;
    display: inline-flex; align-items: center;
  }
  /* share row and dialog (P8-23, P8-33) */
  .page-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; }
  .page-share [hidden] { display: none; }
  .page-share__status { font-size: var(--step--1); color: var(--ok); font-weight: 600; }
  .icon--fill { fill: currentColor; stroke: none; }
  .share-copy { min-inline-size: 9.25rem; }
  .share-copy__icon { display: inline-grid; flex: none; }
  .share-copy__icon > .icon { grid-area: 1 / 1; }
  .share-copy .icon--done, .share-copy[data-state="done"] .icon--copy { opacity: 0; }
  .share-copy[data-state="done"] .icon--done { opacity: 1; color: var(--ok); }
  .share-url { inline-size: 100%; }
  .share-dialog { inline-size: min(34rem, calc(100% - 2rem)); padding: 0; border: var(--bw) solid var(--border-strong); border-radius: var(--radius-3); background: var(--surface); color: var(--text); }
  .share-dialog::backdrop { background: rgb(0 0 0 / .6); }
  .share-dialog__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
  .share-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .share-dialog__title { margin: 0; font-size: var(--step-1); font-weight: 700; }
  .share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .share-grid .btn { inline-size: 100%; justify-content: flex-start; white-space: nowrap; }
  @media (min-width: 40rem) { .share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .share-dialog { inline-size: 44rem; } .share-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (scripting: none) { .share-dialog { display: block; position: static; inline-size: 100%; } }
  .price-alert-offer { margin: 0; }
}

/* ===== components: tool-result ===== */
@layer components {
  .tool-result {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-3); margin-block: var(--space-2);
  }
  .tool-result__item {
    display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4);
    border: var(--bw) solid var(--border); border-radius: var(--radius-2);
    background: var(--surface); min-inline-size: 0;
  }
  .tool-result__item--lowest { border-color: var(--ok); background: var(--ok-soft); }
  .tool-result__item--incomplete { border-style: dashed; border-color: var(--border-strong); background: var(--surface-alt); }
  .tool-result__label { font-size: var(--step--1); font-weight: 600; color: var(--text-muted); line-height: var(--lh-ui); }
  .tool-result__car-name {
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 700;
    color: var(--text); line-height: var(--lh-tight); margin: 0; overflow-wrap: anywhere;
  }
  .tool-result__value {
    font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
    color: var(--text); line-height: var(--lh-tight); font-variant-numeric: tabular-nums;
  }
  .tool-result__meta { font-size: var(--step--2); color: var(--text-muted); line-height: var(--lh-ui); }
  .tool-result__badge { align-self: flex-start; margin-block-start: var(--space-1); }
  .tool-result__empty {
    grid-column: 1 / -1; padding: var(--space-4); border: var(--bw) dashed var(--border);
    border-radius: var(--radius-2); background: var(--surface-alt); text-align: center;
    color: var(--text-muted); font-size: var(--step-0);
  }
}

/* ===== components: assumption-flag ===== */
@layer components {
  .assumption-flag {
    display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
    font-size: var(--step--2); line-height: var(--lh-ui); color: var(--text-muted);
  }
  .assumption-flag .badge { font-size: var(--step--2); }
  .assumption-flag--user { font-style: italic; color: var(--text-muted); }
  .assumption-flag--missing { color: var(--warn); }
  .assumption-flag__source { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); }
  .assumption-flag__source a { color: var(--text-muted); text-decoration: underline; text-underline-offset: .18em; }
  .assumption-flag__source a:hover { color: var(--text); }
  .assumption-flag__source a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
}

/* ===== components: chart ===== */
@layer components {
  .chart { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; min-inline-size: 0; }
  /* P8-20: the svg is never scaled. Its width and height attributes are its size on every screen, so the labels (--step--2, 13 px) keep one size;
     a screen narrower than the chart scrolls it (.chart__scroll). On a wide screen it sits in the middle of the panel. */
  .chart__svg {
    display: block; inline-size: auto; block-size: auto; max-inline-size: none; flex: none;
    margin-inline: auto; overflow: visible; font-family: var(--font-body);
  }
  .chart__grid { stroke: var(--border); stroke-width: var(--bw); stroke-dasharray: 4 4; fill: none; }
  .chart__axis { stroke: var(--border-strong); stroke-width: var(--bw); fill: none; }
  .chart__line {
    fill: none; stroke: var(--branch, var(--ev)); stroke-width: 2.5px;
    stroke-linejoin: round; stroke-linecap: round;
  }
  .chart__line--dashed { stroke-dasharray: 6 4; }
  .chart__point { fill: var(--surface); stroke: var(--branch, var(--ev)); stroke-width: 2px; }
  .chart__label { fill: var(--text-muted); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
  /* F15-AC04, ADR-0070: a wide chart scrolls sideways; rtl starts it at the newest (right) end with no script, the panel is ltr again. */
  .chart__scroll { direction: rtl; overflow-x: auto; max-inline-size: 100%; border-radius: var(--radius-2); }
  .chart__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .chart__scroll > .chart__panel { direction: ltr; }
  .chart__scroll > .chart__panel { inline-size: max-content; min-inline-size: 100%; max-inline-size: none; box-sizing: border-box; }
  .chart__hint { margin: 0; font-size: var(--step--1); }
  .chart__hint--narrow { display: none; }
  @media (max-width: 52rem) { .chart__hint--narrow { display: block; } }
  .chart__change { white-space: nowrap; }
  .chart__empty {
    padding: var(--space-4); border: var(--bw) dashed var(--border); border-radius: var(--radius-2);
    background: var(--surface-alt); color: var(--text-muted); font-size: var(--step--1);
  }
}

/* ===== components: viewer ===== */
@layer components {
  .viewer {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9; max-inline-size: 100%; border: var(--bw) solid var(--border);
    border-radius: var(--radius-2); background: var(--surface-alt); padding: var(--space-4);
    text-align: center; overflow: hidden;
  }
  .viewer--unavailable { color: var(--text-muted); }
  .viewer h2 {
    font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
    color: var(--text); line-height: var(--lh-tight); margin: 0 0 var(--space-1);
  }
  .viewer p {
    font-size: var(--step-0); color: var(--text-muted); line-height: var(--lh-body);
    margin: 0; max-inline-size: var(--measure);
  }
  .viewer__actions {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-3);
  }
  .viewer__stage { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
}

/* ===== components: disclosure ===== */
@layer components {
  .disclosure {
    border: var(--bw) solid var(--border); border-radius: var(--radius-2);
    background: var(--surface); color: var(--text);
  }
  .disclosure summary {
    display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-size: var(--step-0);
    font-weight: 600; color: var(--text); cursor: pointer; list-style: none; user-select: none;
  }
  .disclosure summary::-webkit-details-marker { display: none; }
  .disclosure summary::before {
    content: ""; display: inline-block; inline-size: .5rem; block-size: .5rem;
    border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(-45deg); flex-shrink: 0;
  }
  .disclosure[open] > summary::before { transform: rotate(45deg); }
  .disclosure summary:hover { background: var(--surface-alt); }
  .disclosure summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .disclosure > :not(summary) { border-block-start: var(--bw) solid var(--border); }
  .disclosure__body { padding: var(--space-4); }
}

/* ===== components: forced-colors ===== */
@layer components {
  @media (forced-colors: active) {
    .badge, .btn { border: 1px solid ButtonText; }
    .alert { border: 1px solid CanvasText; }
    .card, .filters { border-color: CanvasText; }
    .pagination__link { border-color: ButtonText; }
    .pagination__link[aria-current="page"] { border-width: 3px; text-decoration: underline; }
    .tab-nav__link[aria-current="page"] { border-block-end-color: CanvasText; }
    .toc__link[aria-current="true"], .toc__link[aria-current="location"] { border-inline-start-color: CanvasText; text-decoration: underline; }
    .glossary-nav__link { border-color: ButtonText; }
    .glossary-nav__link[aria-current="true"], .glossary-nav__link[aria-current="location"] { border-width: 3px; text-decoration: underline; }
    .glossary-nav__disabled { border-color: GrayText; color: GrayText; }
    .legal-meta__notice { border-color: CanvasText; }
    .generated-table--empty { border-color: CanvasText; }
    .form-summary { border-color: CanvasText; }
    .confirmation { border-color: CanvasText; }
    .consent { border-color: CanvasText; }
    button.link, .link { color: LinkText; }
    .ad-slot--dev .ad-slot__box { border-color: CanvasText; }
    .tool-form__group { border-color: CanvasText; }
    .tool-share { border-color: CanvasText; }
    .tool-share__input { border-color: ButtonText; }
    .tool-result__item { border-color: CanvasText; }
    .chart__line { stroke: CanvasText; }
    .chart__line--dashed { stroke: CanvasText; }
    .chart__point { stroke: CanvasText; fill: Canvas; }
    .chart__axis, .chart__grid { stroke: CanvasText; }
    .chart__label { fill: CanvasText; }
    .viewer { border-color: CanvasText; }
    .disclosure { border-color: CanvasText; }
    .disclosure summary { color: ButtonText; }
    .companion__stage, .pair-tile, .lane-row, .cost-list a { border-color: CanvasText; }
    .companion__credit, .companion__chip { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .companion__label a { border-color: CanvasText; background: Canvas; color: LinkText; }
    .companion__label a::before { background: CanvasText; }
    .companion__dim { stroke: CanvasText; }
  }
}

/* ===== components: home and card polish (owner review 2026-10-02): equal-height cards, feature cards, steps, pair card, hero pills ===== */
@layer components {
  /* Cards in a grid fill their row: the list item stretches, the card fills it, so a short card never sits shorter than its neighbours. */
  .grid--cards > li { display: flex; min-inline-size: 0; }
  .grid--cards > li > .card { flex: 1; }
  /* Fewer items than columns share the row instead of leaving an empty column. */
  .grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
  /* Two columns, odd count: the last card takes the full row instead of sitting alone beside an empty slot (about 576 to 848 px wide). */
  @media (min-width: 36rem) and (max-width: 53rem) {
    .grid--fit > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }
  /* In a car card the facts absorb the free height, so the price and the date line up at the bottom of every card. */
  .card--car .facts { margin-block-end: auto; }
  .card--car .card__body { display: flex; flex-direction: column; }
  .card--car .card__title { line-height: var(--lh-tight); }

  /* Feature cards (the "What you get" block): the list item is the card. */
  .grid--cards > li.card { padding: var(--space-5); gap: var(--space-3); border-color: var(--border); background: linear-gradient(180deg, var(--surface), var(--surface-alt)); }
  .grid--cards > li.card > .icon {
    inline-size: 3rem; block-size: 3rem; padding: .8rem; border-radius: var(--radius-full);
    background: var(--ev-soft); color: var(--ev-strong);
  }
  .grid--cards > li.card h3 { font-size: var(--step-1); line-height: var(--lh-tight); }
  .grid--cards > li.card p { color: var(--text-muted); line-height: var(--lh-ui); }

  /* Steps: three numbered cards. */
  .steps { counter-reset: step; list-style: none; margin: 0; padding: 0; padding-block-start: var(--space-3); row-gap: var(--space-6); }
  .step {
    counter-increment: step; position: relative; display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5); padding-block-start: calc(var(--space-6) + var(--space-2));
    border: var(--bw) solid var(--border); border-radius: var(--radius-2); background: var(--surface);
  }
  .step::before {
    content: counter(step); position: absolute; inset-block-start: calc(var(--space-3) * -1); inset-inline-start: var(--space-5);
    display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-full);
    background: var(--ev); color: var(--on-ev); font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
    box-shadow: var(--shadow-2);
  }
  .step h3 { font-size: var(--step-1); line-height: var(--lh-tight); }
  .step p { color: var(--text-muted); line-height: var(--lh-ui); }

  /* Pair card: the two names stack, the "vs" is a small label between them, the badges sit at the bottom. */
  .pair-card { padding: var(--space-4); gap: var(--space-3); }
  .pair-card__title { font-size: var(--step-1); line-height: var(--lh-tight); overflow-wrap: anywhere; }
  .pair-card__title .card__link { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .pair-card__vs, .pair-tile__vs {
    padding: .05rem var(--space-2); border: var(--bw) solid var(--border-strong); border-radius: var(--radius-full);
    background: var(--surface-alt); color: var(--text-muted); font-family: var(--font-body); font-size: var(--step--2); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
  }

  /* Hero: a soft glow behind the heading and pill links (the links stay plain anchors: HomePageTests pins that). */
  .hero {
    padding-inline: var(--space-5); border-radius: var(--radius-3);
    background: radial-gradient(48rem 20rem at 8% 0%, color-mix(in srgb, var(--ev) 16%, transparent), transparent 70%),
                radial-gradient(36rem 16rem at 92% 100%, color-mix(in srgb, var(--gas) 10%, transparent), transparent 70%);
  }
  .hero nav a {
    display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; padding-inline: var(--space-4);
    border: var(--bw) solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface);
    color: var(--text); font-weight: 600; text-decoration: none;
  }
  .hero nav a:hover { background: var(--surface-alt); border-color: var(--ev); }
  .hero nav li:first-child a { background: var(--ev); border-color: var(--ev); color: var(--on-ev); }
  .hero nav li:first-child a:hover { background: var(--ev-strong); }
  .hero nav li:nth-child(2) a { background: var(--gas); border-color: var(--gas); color: var(--on-gas); }
  .hero nav li:nth-child(2) a:hover { background: var(--gas-hover); }
  .hero__tagline { letter-spacing: .02em; }

  /* Section rhythm: a heading and its content breathe, and long lead text stays readable. */
  .section > h2 { font-size: var(--step-3); line-height: var(--lh-tight); }
  .section > .lead { color: var(--text-muted); }
}

/* ===== components: ui polish round 2 ===== */
@layer components {
  /* 1. Spec table auto layout modifier */
  .spec-table--auto { table-layout: auto; min-inline-size: 38rem; }
  .spec-table--auto thead th:first-child { inline-size: auto; }
  .spec-table--auto th, .spec-table--auto td { overflow-wrap: normal; }
  .spec-table--auto .price,
  .spec-table--auto time,
  .spec-table--auto [data-c],
  .spec-table--auto strong { white-space: nowrap; }
  /* P8-52 T1: the TCO result fits 390 px for three cars */
  @media (max-width: 39.99rem) {
    .spec-table--auto.tco-result { table-layout: fixed; min-inline-size: 0; }
    .spec-table--auto.tco-result thead th:first-child { inline-size: 30%; }
    .spec-table--auto.tco-result :is(th, td) { padding: var(--space-2) var(--space-1); overflow-wrap: break-word; font-size: .8rem; }
    .spec-table--auto.tco-result :is(strong, .price) { white-space: normal; }
    .spec-table--auto.tco-result thead .badge { display: flex; inline-size: fit-content; max-inline-size: 100%; margin-block-start: var(--space-1); white-space: normal; }
  }

  /* 2. Prices nowrap and tabular-nums */
  .price__amount,
  .price-table__amount,
  .price-table td [data-c] { white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* 3. Button multiline wrapping */
  .btn { white-space: normal; text-align: center; padding-block: var(--space-2); }

  /* 4. Tools index card titles & status */
  .card > h2 { font-size: var(--step-1); font-weight: 600; line-height: var(--lh-tight); }
  .card > h2 > a,
  .card .card__title > a { color: var(--text); text-decoration: none; }
  .card > h2 > a:hover,
  .card .card__title > a:hover { text-decoration: underline; }
  .card > h2 > a::after,
  .card .card__title > a::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); border-radius: inherit; }
  .card > h2 > a:focus-visible,
  .card .card__title > a:focus-visible { outline-color: transparent; }
  .card > h2 > a:focus-visible::after,
  .card .card__title > a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
  .card > p:last-child,
  .card__badge { margin-block-start: auto; }

  /* 5. TCO form 2-column input grid & submit button spacing */
  @media (min-width: 40rem) {
    .tool-form__fields--grid,
    .tool-form__group[data-branch] .tool-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  }
  .tool-form__actions { margin-block-start: var(--space-4); }

  /* 7. Price history chart panel & responsiveness */
  .chart__panel { border: var(--bw) solid var(--border); border-radius: var(--radius-2); background: var(--surface); padding: var(--space-4); max-inline-size: 100%; }

  /* 8. Glossary index list */
  .glossary-list { list-style: none; margin: 0; padding: 0; }
  @media (min-width: 48rem) {
    .glossary-list { column-count: 2; column-gap: var(--space-6); }
  }
  .glossary-item { break-inside: avoid; padding-block: var(--space-3); border-block-end: var(--bw) solid var(--border); display: flex; flex-direction: column; gap: var(--space-1); }
  .glossary-item__link { font-size: var(--step-1); font-weight: 700; color: var(--text); text-decoration: none; }
  .glossary-item__link:hover { text-decoration: underline; }
  .glossary-item__def { color: var(--text-muted); font-size: var(--step--1); line-height: var(--lh-ui); margin: 0; }

  /* 9. Author profile card */
  .profile-card { padding: var(--space-5); }
  .profile-card__avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; padding: .5rem; border-radius: var(--radius-full); background: var(--ev-soft); color: var(--ev-strong); }
  .profile-card__avatar .icon { inline-size: 100%; block-size: 100%; }

  /* 10. Compare spec table header */
  .compare-table thead th { background: var(--surface-alt); padding: var(--space-2) var(--space-3); border-block-end: var(--bw-strong) solid var(--border-strong); }

  /* 11a. Search input and button radius match (the header search is a pill of its own) */
  .search-form .field__control { border-radius: var(--radius-2); }

  /* 11b. FAQ group divider */
  .faq-group:not(:first-of-type) > h2,
  .faq-group + .faq-group > h2,
  article[aria-labelledby="page-h"] > section + section > h2 { border-block-start: var(--bw) solid var(--border); padding-block-start: var(--space-4); margin-block-start: var(--space-6); }

  /* 11c. TOC links */
  .toc__link { color: var(--ev); text-decoration: underline; }

  /* 11e. Listing cards price bottom alignment */
  .card--car .price { margin-block-start: auto; }
}


/* ===== components: home hero story (hero-story.js, ADR-0090): the intro stage in the hero; the scroll half is the companion below ===== */
@layer components {
  .hero--story { display: flex; flex-direction: column; align-items: stretch; }
  .story__poster, .story__layer { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
  .story__layer[hidden], .story__pause[hidden] { display: none; }
  .story__layer { opacity: 0; }
  .story__layer.is-on { opacity: 1; }
  .hero--story .hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .story__controls { position: absolute; inset-block-end: 4.5rem; inset-inline-end: var(--gutter); z-index: 3; display: flex; gap: var(--space-2); }
  .story__controls .btn { color: rgb(244 246 250); border-color: rgb(201 209 220); background: rgb(7 9 14 / .7); }
  .story__pause { min-block-size: 2.25rem; font-size: var(--step--2); }
  /* no visible control over the car (owner, 2026-10-14): the pause button shows only on keyboard focus, like the skip link (WCAG 2.2.2) */
  .story__pause:not(:focus-visible) { position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .story__credit { margin: 0; color: var(--text-muted); font-size: var(--step--2); }
  /* hero-fx.js: a WebGL canvas over the intro clip; the effects never move the clip, the poster or the canvas (sharpness, ADR-0090) */
  .story__fx { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
  .hero--story { --hero-header-h: 6.75rem; --te: calc(max(var(--gutter), (100% - var(--container)) / 2) + 38rem); background: rgb(7 9 14); border-radius: 0; --hero-on-media: rgb(244 246 250); --hero-on-media-muted: rgb(201 209 220); position: relative; min-block-size: 100svh; padding-block: 0; overflow: hidden; }
  .hero--story::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, transparent calc(100% - 3rem), var(--bg)), linear-gradient(90deg, rgb(7 9 14 / .9), rgb(7 9 14 / .86) var(--te), transparent calc(var(--te) + 16rem)); }
  .hero--story > .story__view { position: absolute; inset: 0; inline-size: auto; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; isolation: auto; }
  .hero--story .story__poster, .hero--story .story__layer { object-position: 70% 50%; }
  .hero--story .story__fx { z-index: 1; }   /* the effects sit over the dark text-side gradient (it is the earlier z-index 1 layer), under the text */
  .hero--story .hero__body { position: relative; z-index: 2; justify-content: center; min-block-size: inherit; padding-block: calc(var(--hero-header-h) + var(--space-6)) var(--space-6); }
  .hero--story .hero__body > * { max-inline-size: 36rem; }
  .hero--story .hero__body > nav { max-inline-size: 42rem; }   /* the five pills fit one row at 1440 px */
  .hero--story nav ul { gap: var(--space-2); }
  .hero--story nav a { padding-inline: var(--space-3); }
  .hero--story .hero__title, .hero--story .lead { color: var(--hero-on-media); }
  .hero--story .hero__tagline, .hero--story .story__credit { color: var(--hero-on-media-muted); }
  .hero--story nav li:nth-child(n+3) a { color: var(--hero-on-media); border-color: var(--hero-on-media-muted); background: transparent; }
  .hero--story nav li:nth-child(n+3) a:hover { border-color: var(--hero-on-media); background: rgb(255 255 255 / .12); }

  /* phones and tablets (owner, 2026-10-15): the clip is the background, the car fills the top, the text rises over the floor on a dark fade. */
  @media (max-width: 59.99rem) {
    .hero--story { --hv: min(48svh, 30rem); --hero-header-h: 6.5rem; min-block-size: auto; }
    .hero--story::before { background: linear-gradient(180deg, rgb(7 9 14 / .6), transparent 7rem), linear-gradient(180deg, transparent calc(var(--hv) - 12rem), rgb(7 9 14 / .9) calc(var(--hv) - 4rem), rgb(7 9 14) var(--hv)), linear-gradient(180deg, transparent calc(100% - 3rem), var(--bg)); }
    .hero--story > .story__view { inset: 0 0 auto; block-size: var(--hv); }
    .hero--story .story__poster, .hero--story .story__layer { object-position: 56% 66%; }
    .hero--story .story__fx { z-index: 0; }
    .hero--story .hero__body { justify-content: flex-start; padding-block: calc(var(--hv) - 6rem) var(--space-6); }
    .story__controls { inset-block-start: calc(var(--hv) - 3.5rem); inset-block-end: auto; }
  }
  @media (max-width: 63.99rem) { .hero--story > .hero__body > nav { display: none; } }
  /* phones (P8-08): the title and one short line; the lead, the rule and the tagline go */
  .hero__sub { display: none; margin: 0; color: var(--hero-on-media); }
  @media (max-width: 47.99rem) { .hero--story .hero__sub { display: block; } .hero--story :is(.lead, .duo-rule, .hero__tagline) { display: none; } }
  @media (min-width: 64rem) { .hero--story { --hero-header-h: 4.75rem; } }
}

/* ===== components: home companion car (home-companion.js, HOME_BELOW_HERO_DESIGN 4, ADR-0093) ===== */
@layer components {
  .companion__stage { position: relative; inline-size: 100%; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; }
  /* the stage has no card (owner, 2026-10-15): the frames carry alpha and a baked contact shadow, so the car travels on the page background itself */
  .companion__still, .companion__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
  .companion__still[hidden], .companion__canvas[hidden] { display: none; }
  .companion__credit, .companion__chip { border-radius: var(--radius-1); background: var(--surface-alt); color: var(--text-muted); font-size: var(--step--2); line-height: var(--lh-ui); }
  .companion__credit { position: absolute; z-index: var(--z-raised); inset: var(--space-2) auto auto var(--space-2); max-inline-size: calc(100% - 2 * var(--space-2)); margin: 0; padding: .125rem var(--space-2); }
  .companion__pose { position: absolute; z-index: var(--z-raised); inset: auto var(--space-3) var(--space-3); display: flex; align-items: center; gap: var(--space-3); pointer-events: none; }
  .companion__chip { padding: .125rem var(--space-2); }
  .companion__chip:empty { display: none; }
  /* cost labels and dimension lines over the desktop stage (home-companion.js sets left/top, x/y and hidden) */
  .companion__labels, .companion__dims { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  .companion__label { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
  .companion__label a {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: .125rem var(--space-3); border: var(--bw) solid rgb(201 209 220 / .6); border-radius: var(--radius-full);
    background: rgb(7 9 14 / .82); color: rgb(244 246 250); font-size: var(--step--2); font-weight: 600; line-height: var(--lh-ui); text-decoration: none; pointer-events: auto;
  }
  .companion__label a::before { content: ""; flex: none; inline-size: .6rem; block-size: .6rem; border-radius: var(--radius-full); background: rgb(201 209 220); }
  .companion__label:nth-child(1) a::before { background: rgb(124 152 255); }
  .companion__label:nth-child(2) a::before { background: rgb(255 122 26); }
  .companion__label a:hover { border-color: rgb(244 246 250); }
  .companion__dims svg { display: block; inline-size: 100%; block-size: 100%; }
  .companion__dim { stroke: var(--text-muted); stroke-width: 2px; }
  .companion__main { display: flex; flex-direction: column; min-inline-size: 0; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .home-sec { justify-content: center; padding-block: var(--space-6); }
  /* In flow (no JavaScript, reduced motion, Save-Data, before the first frame or after a bail-out): the stage is a centred still above the sections */
  .companion__drive { padding-inline: var(--gutter); }
  .companion__drive .companion__stage { inline-size: min(100%, 36rem); margin: var(--space-4) auto 0; }
  .home-road, .home-sec__stage { display: none; }
  /* P8-08 (owner, 2026-10-15): the car travels to each section. Phones and tablets: a stage at the top of each section, the car drives in from the side */
  @media (max-width: 63.99rem) {
    .companion--on .companion__drive { display: none; }
    .companion--on .home-sec__stage { display: block; position: relative; inline-size: 100%; aspect-ratio: 4 / 3; max-block-size: 28svh; margin-inline: auto; overflow: hidden; }
    .home-sec__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
  }
  /* Wide screens: one stage drives between the free sides of the sections and crosses only on the road between two of them, never over text; the sections alternate sides */
  @media (min-width: 64rem) {
    .companion__drive .companion__stage { inline-size: clamp(22rem, 36vw, 38rem); }
    .companion--on .companion__drive { padding: 0; }
    .companion--on .companion__drive .companion__stage { position: fixed; z-index: var(--z-raised); inset: 0 auto auto 0; margin: 0; pointer-events: none; }
    .companion--on .home-road { display: block; position: relative; block-size: 30svh; }
    .companion--on .home-road::before { content: ""; position: absolute; inset-inline: 4%; inset-block-start: 62%; border-block-start: 2px dashed var(--border); }
    .companion--on .home-sec { min-block-size: clamp(70svh, 85svh, 60rem); padding-block: var(--space-6); }
    .companion--on .home-sec:nth-of-type(odd) .home-sec__in { inline-size: 46%; margin-inline-start: auto; }
    .companion--on .home-sec:nth-of-type(even) .home-sec__in { inline-size: 46%; margin-inline-end: auto; }
  }
  /* P8-63: phones have the companion--on layout from the first paint (no shift when it is added) */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 63.99rem) {
    .companion:not(.companion--off, .companion--on) .companion__drive { display: none; }
    .companion:not(.companion--off, .companion--on) .home-sec__stage { display: block; position: relative; inline-size: 100%; aspect-ratio: 4 / 3; max-block-size: 28svh; margin-inline: auto; overflow: hidden; }
  }
  .companion--off .companion__drive .companion__stage { position: static; }
  .pair-tiles, .lane__rows, .cost-list, .close-guides { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .pair-tile { position: relative; display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--bw) solid var(--border); border-radius: var(--radius-2); background: var(--surface); box-shadow: var(--shadow-1); }
  .pair-tile__title { font-size: var(--step-1); line-height: var(--lh-tight); overflow-wrap: anywhere; }
  .pair-tile__title .card__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
  .pair-tile__cars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .pair-tile__car { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3); border-inline-start: 4px solid var(--branch); border-radius: var(--radius-1); background: var(--branch-soft); }
  .pair-tile__meta, .home-report { margin: 0; }
  .cost-list { counter-reset: cost; }
  .cost-list > li { counter-increment: cost; display: flex; align-items: center; gap: var(--space-3); }
  .cost-list > li::before {
    content: counter(cost); flex: none; display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-full);
    background: var(--text); color: var(--bg); font-weight: 700;
  }
  .cost-list > [data-cost="energy-ev"]::before { background: var(--ev-strong); color: var(--on-ev); }
  .cost-list > [data-cost="energy-gas"]::before { background: var(--gas); color: var(--on-gas); }
  .cost-list a {
    display: flex; align-items: center; flex: 1; min-inline-size: 0; min-block-size: 2.75rem; padding: var(--space-1) var(--space-3);
    border: var(--bw) solid var(--border-strong); border-radius: var(--radius-2); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none;
  }
  .cost-list a:hover { background: var(--surface-alt); border-color: var(--ev); }
  .lane__rows { gap: var(--space-2); }
  .lane h3 { font-size: var(--step-1); }
  .lane-row { border: var(--bw) solid var(--border); border-inline-start: 4px solid var(--branch); border-radius: var(--radius-2); background: var(--surface); }
  .lane-row__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-block-size: 2.75rem; padding: var(--space-3); color: var(--text); text-decoration: none; }
  .lane-row__link:hover .lane-row__name { text-decoration: underline; }
  .lane-row__name { flex: 1 1 12rem; min-inline-size: 0; font-weight: 700; overflow-wrap: anywhere; }
  .lane-row__meta, .lane-row__updated { flex: 1 0 100%; color: var(--text-muted); font-size: var(--step--1); }
  .home-sec--trust h4 { font-size: var(--step-0); }
  .close-guides > li { display: grid; gap: var(--space-1); }
  .close-guides__summary { color: var(--text-muted); font-size: var(--step--1); }
  /* Phones (P8-08, owner 2026-10-15): a heading and one block of actions per section; the lists become swipe rows, the steps three icons, the long text goes */
  @media (max-width: 47.99rem) {
    .home-sec { padding-block: var(--space-4) var(--space-5); }
    .home-sec .lead, .home-report, .home-sec--trust .grid--cards, .home-sec--trust .stack:has(> .grid--cards), .home-sec--trust .step p, .home-sec--trust .stack--sm:has(.stat-list), .close-guides, .home-sec--close h3, .lane-row__meta, .lane-row__updated { display: none; }
    .pair-tiles > li:nth-child(n+2) { display: none; }
    .cost-list { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .cost-list > li { position: relative; }
    .cost-list > li::before { position: absolute; inset: var(--space-2) auto auto var(--space-2); inline-size: 1.5rem; block-size: 1.5rem; font-size: var(--step--2); }
    .cost-list a { align-items: flex-end; min-block-size: 4.5rem; padding: 2.25rem var(--space-3) var(--space-2); line-height: var(--lh-tight); }
    .lane > * { min-inline-size: 0; }
    .lane__rows { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-1); scrollbar-width: none; }
    .lane__rows > li { flex: 0 0 62%; scroll-snap-align: start; }
    .home-sec--trust .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    .home-sec--trust .step { align-items: center; padding: calc(var(--space-5) + var(--space-1)) var(--space-2) var(--space-3); text-align: center; }
    .home-sec--trust .step::before { inset-inline-start: calc(50% - 1rem); inline-size: 2rem; block-size: 2rem; font-size: var(--step-0); }
    .home-sec--trust .step h4 { font-size: var(--step--1); }
  }
  @media (min-width: 48rem) and (max-width: 63.99rem) { .lane__rows > li:nth-child(n+5) { display: none; } }
}

/* ===== components: top block of the car page with the turntable (ADR-0067, P8-09) =====
   DOM order = reading and Tab order (P5-05): h1, summary, turntable (facts first). Wide screen (62rem): title and summary left, sticky turntable right. */
@layer components {
  .car-hero { display: grid; gap: var(--space-5); align-items: start; min-inline-size: 0; }
  .car-hero > * { min-inline-size: 0; }
  @media (min-width: 62rem) {
    .car-hero {
      grid-template-columns: minmax(0, 1fr) minmax(0, 44rem);
      grid-template-rows: auto 1fr;
      grid-template-areas: "title preview" "summary preview";
      column-gap: var(--space-5); row-gap: var(--space-4);
    }
    .car-hero > h1 { grid-area: title; }
    .car-hero > #preview { grid-area: preview; position: sticky; inset-block-start: var(--space-4); }
    .car-hero > .car-summary--headless { grid-area: summary; }
  }
}

/* ===== components: car page body-style preview (CarPreview, car-stage.js, ADR-0061) =====
   A framed 1376 x 774 view: the server-rendered poster, the script's canvas over it and a row of controls. The aspect-ratio reserves the box, so nothing shifts. */
@layer components {
  .car-stage { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; max-inline-size: 40rem; }
  .car-stage__view {
    position: relative; aspect-ratio: 1376 / 774; overflow: hidden; isolation: isolate;
    border: var(--bw) solid var(--border); border-radius: var(--radius-3); background: var(--surface-alt);
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  }
  .car-stage__view:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .car-stage__img, .car-stage__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
  /* The two arrows sit over the picture at its left and right edges, vertically centred; the solid surface behind each keeps the contrast in both themes. */
  .car-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-2); pointer-events: none; }
  .car-nav[hidden] { display: none; }
  .car-nav__btn { pointer-events: auto; border-radius: 50%; background: var(--surface); border-color: var(--border-strong); }
  .car-nav__btn:hover { background: var(--surface-alt); }
  .car-controls { display: flex; flex-direction: column; gap: var(--space-2); }
  .car-stage__count { margin: 0; text-align: center; font-size: .875rem; }
  /* The placeholder of a body style without a picture (P8-17). */
  .car-stage__none {
    aspect-ratio: 1376 / 774; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    border: var(--bw) solid var(--border); border-radius: var(--radius-3); background: var(--surface-alt); color: var(--text-muted);
  }
  .car-stage__none p { margin: 0; font-size: var(--step-0); }
  .car-stage__credit { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
  /* Designed 3D model section of the car page (Development only). */
  .design-3d__img { display: block; width: 100%; height: auto; border-radius: var(--radius-2); background: var(--surface-alt); }
  /* The picture links to the garage; the 16:9 preview shows on hover or focus, never with reduced motion. */
  .design-3d__media { position: relative; display: block; border-radius: var(--radius-2); overflow: hidden; }
  .design-3d__anim { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: none; }
  @media (prefers-reduced-motion: no-preference) { .design-3d__media:is(:hover, :focus-visible) .design-3d__anim { display: block; } }
  .design-3d__note, .design-3d__credit { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
}

/* ===== components: brand logo (P7-10d) =====
   The img carries width and height (the file's size), so the box is reserved before it loads. The block size is capped, so no logo stretches the card or the header. */
@layer components {
  .brand-logo { display: block; inline-size: auto; block-size: auto; max-inline-size: 10rem; max-block-size: 3rem; object-fit: contain; object-position: left center; }
  .brand-logo--header { max-inline-size: 12rem; max-block-size: 4rem; }
}

/* ===== components: guide hero and author photo (P7-10c) =====
   Both images carry width and height (the file's size), so the box is reserved before it loads. A small file is never stretched, a large one never overflows. */
@layer components {
  .guide-hero { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; border-radius: var(--radius-2); }
  .profile-card__photo { display: block; inline-size: auto; block-size: auto; max-inline-size: 8rem; max-block-size: 8rem; object-fit: cover; border-radius: var(--radius-2); }
}

/* ===== components: car page v2 (P8-09) =====
   Tabs, pros and cons, price, version and energy cards, spec boxes, compare row, phone price bar. Phones first; wide from 48rem and 64rem. */
@layer components {
  /* P8-09: a solid powertrain rail (blue or orange, never text) and the facts as tiles */
  .car-summary .duo-rule { inline-size: 4.5rem; block-size: 5px; background: var(--branch-fill, var(--ev)); }
  .car-summary .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .car-summary .facts__item { display: block; padding: var(--space-3); border-radius: var(--radius-2); background: var(--surface-alt); }
  .car-summary .facts dt { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; overflow-wrap: anywhere; }
  .car-summary .facts dd { min-inline-size: 0; margin-block-start: .125rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; line-height: var(--lh-ui); overflow-wrap: anywhere; }
  .car-summary__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  @media (max-width: 22rem) { .car-summary .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  :root:has(.tabs) { scroll-padding-block-start: 5rem; }
  .car-page > section:not(.car-summary), .car-page > .car-costs { padding-block-start: var(--space-6); border-block-start: var(--bw) solid var(--border); }

  .tabs {
    position: sticky; inset-block-start: 0; z-index: 20; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    border-block-end: var(--bw) solid var(--border); background: var(--bg);
  }
  .tabs__list { display: flex; gap: var(--space-1); margin: 0; padding: var(--space-2); list-style: none; overflow-x: auto; scrollbar-width: none; }
  .tabs__link {
    display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: var(--space-4); border-radius: var(--radius-full);
    color: var(--text-muted); font-size: var(--step--1); font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .tabs__link[aria-current="true"] { background: var(--text); color: var(--bg); }
  .tabs__link { position: relative; }
  .tabs__link::after { content: ""; position: absolute; inset: auto var(--space-4) .45rem; block-size: 2px; border-radius: 1px; background: currentColor; transform: scaleX(0); }
  .tabs__link[aria-current="true"]::after { transform: none; }

  .insights__card { padding: var(--space-4); border-radius: var(--radius-3); }
  .insights__card--pro { --tone: var(--ok); background: var(--ok-soft); }
  .insights__card--con { --tone: var(--err); background: var(--err-soft); }
  .insights__card .insights__title { color: var(--tone); }

  .price-cards, .compare-row {
    display: flex; gap: var(--space-3); margin: 0 calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); list-style: none; position: relative;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  }
  .price-cards > li, .compare-row > li { flex: 0 0 min(80%, 17rem); min-inline-size: 0; scroll-snap-align: start; }
  .compare-row > li > .card { flex: 1; } /* every card of a row as tall as the tallest, the buttons in one line (owner 2026-10-16) */
  .delta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } /* difference to this car, text first, colour second */
  .delta > li { padding: var(--space-1) var(--space-2); border-radius: var(--radius-2); font-size: var(--step--1); font-weight: 700; background: var(--surface-alt); color: var(--text); }
  .delta > .delta--better { background: var(--ok-soft); color: var(--ok); }
  .delta > .delta--worse { background: var(--err-soft); color: var(--err); }
  .price-card, .version-card {
    display: grid; gap: var(--space-2); align-content: start; min-inline-size: 0; padding: var(--space-4);
    border: var(--bw) solid var(--border); border-radius: var(--radius-3); background: var(--surface);
  }
  .price-card__market { font-size: var(--step-0); }
  .price-card__price, .version-card__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; }
  .price-card__amount, .version-card__amount > :first-child { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .price-card__meta, .version-card__meta { margin: 0; color: var(--text-muted); font-size: var(--step--2); overflow-wrap: anywhere; }
  .price-card__more > summary, .price-table__details > summary { display: flex; align-items: center; min-block-size: 2.75rem; color: var(--ev-strong); font-size: var(--step--2); font-weight: 600; cursor: pointer; }

  .version-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .version-card--base { border-color: var(--branch); box-shadow: inset 0 3px 0 var(--branch); }
  .version-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .version-card__name { font-size: var(--step-1); overflow-wrap: anywhere; }
  .version-card__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; }
  .version-card__specs dd { margin: 0; font-size: var(--step--1); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  .car-costs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); }
  .car-costs__energy { flex: 2 1 22rem; min-inline-size: 0; }
  .car-costs__tools { flex: 1 1 16rem; align-content: start; min-inline-size: 0; padding: var(--space-5); border-radius: var(--radius-3); background: var(--ev-strong); color: var(--on-ev); box-shadow: var(--shadow-2); }
  .car-costs__links { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .car-costs__links a {
    display: flex; align-items: center; min-block-size: 2.75rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-2);
    background: var(--on-ev); color: var(--ev-strong); font-weight: 700; text-decoration: none;
  }
  .car-costs__tools :focus-visible { outline-color: var(--on-ev); }
  /* auto-fit: one or two markets fill the column instead of leaving an empty track beside them (owner, 2026-10-27). */
  .energy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3); }
  .energy-card { min-inline-size: 0; padding: var(--space-3); border-radius: var(--radius-2); background: var(--surface-alt); }

  .spec-boxes { display: grid; gap: var(--space-3); }
  .spec-box { min-inline-size: 0; border: var(--bw) solid var(--border); border-radius: var(--radius-3); background: var(--surface); }
  .spec-box > summary {
    display: flex; align-items: center; min-block-size: 2.75rem; padding: var(--space-2) var(--space-4);
    font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; cursor: pointer; list-style: none;
  }
  .spec-box > summary::-webkit-details-marker, .fold > summary::-webkit-details-marker { display: none; }
  .spec-box > summary::after, .fold > summary::after { content: "+"; content: "+" / ""; margin-inline-start: auto; color: var(--text-muted); }
  .spec-box[open] > summary::after, .fold[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
  .spec-box__list { margin: 0; padding: 0 var(--space-4) var(--space-2); }
  .spec-box__row { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-start: var(--bw) solid var(--border); }
  .spec-box__row dt, .version-card__specs dt { color: var(--text-muted); font-size: var(--step--1); overflow-wrap: anywhere; }
  .spec-box__row dd { margin: 0; font-size: var(--step--1); font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }

  /* phone price bar above the bottom dock; it slides down to the dock place when the dock steps aside */
  .pricebar { display: none; }
  .pricebar__link {
    display: inline-flex; flex: none; align-items: center; min-block-size: 2.75rem; padding-inline: var(--space-4); border-radius: var(--radius-2);
    background: var(--branch-fill); color: var(--on-branch); font-weight: 700; text-decoration: none;
  }
  @media (max-width: 63.99rem) {
    .pricebar {
      position: fixed; z-index: 30; inset: auto var(--space-3) calc(5.25rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
      padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: 1rem; background: var(--text); color: var(--bg); box-shadow: var(--shadow-2);
      transform: translateY(calc(100% + 7rem));
    }
    .pricebar.on { transform: none; }
    :root.dock-hide .pricebar.on { transform: translateY(4.5rem); }
    .pricebar__text { display: grid; min-inline-size: 0; }
    .pricebar .tax-flag, .pricebar__name { color: inherit; }
    .pricebar .price__amount { min-inline-size: 0; font-size: var(--step-1); }
    .pricebar__name { overflow: hidden; font-size: var(--step--2); text-overflow: ellipsis; white-space: nowrap; }
    :root:has(.pricebar) body { padding-block-end: 9.5rem; }
    :root:has(.pricebar) { scroll-padding-block-end: 10rem; }
  }

  @media (min-width: 48rem) {
    .version-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .spec-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .spec-box > summary { pointer-events: none; }
    .spec-box > summary::after { content: none; }
  }
  @media (min-width: 64rem) {
    .price-cards, .compare-row { display: grid; margin: 0; padding: 0; overflow: visible; }
    .price-cards { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
    .compare-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (forced-colors: active) {
    .tabs__link[aria-current="true"] { text-decoration: underline; }
  }
}

/* ===== utilities ===== */
@layer utilities {
  .u-visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .u-text-muted { color: var(--text-muted); }
  [hidden] { display: none; }
  /* Market values (PAGES_DESIGN 2.4, ADR-0047): sibling variants tagged data-u, data-c or data-m; the head bootstrap's <html> attributes pick one. Listed here to beat component display rules. */
  html[data-units="metric"] [data-u]:not([data-u~="metric"]),
  html[data-units="us"] [data-u]:not([data-u~="us"]),
  html[data-units="uk"] [data-u]:not([data-u~="uk"]),
  html[data-currency="USD"] [data-c]:not([data-c~="USD"]),
  html[data-currency="CAD"] [data-c]:not([data-c~="CAD"]),
  html[data-currency="GBP"] [data-c]:not([data-c~="GBP"]),
  html[data-currency="AUD"] [data-c]:not([data-c~="AUD"]),
  html[data-currency="EUR"] [data-c]:not([data-c~="EUR"]),
  html[data-currency="NOK"] [data-c]:not([data-c~="NOK"]),
  html[data-currency="SEK"] [data-c]:not([data-c~="SEK"]),
  html[data-currency="DKK"] [data-c]:not([data-c~="DKK"]),
  html[data-currency="CHF"] [data-c]:not([data-c~="CHF"]),
  html[data-market="US"] [data-m]:not([data-m~="US"]),
  html[data-market="CA"] [data-m]:not([data-m~="CA"]),
  html[data-market="GB"] [data-m]:not([data-m~="GB"]),
  html[data-market="AU"] [data-m]:not([data-m~="AU"]),
  html[data-market="DE"] [data-m]:not([data-m~="DE"]),
  html[data-market="NL"] [data-m]:not([data-m~="NL"]),
  html[data-market="NO"] [data-m]:not([data-m~="NO"]),
  html[data-market="FR"] [data-m]:not([data-m~="FR"]),
  html[data-market="IT"] [data-m]:not([data-m~="IT"]),
  html[data-market="ES"] [data-m]:not([data-m~="ES"]),
  html[data-market="BE"] [data-m]:not([data-m~="BE"]),
  html[data-market="AT"] [data-m]:not([data-m~="AT"]),
  html[data-market="IE"] [data-m]:not([data-m~="IE"]),
  html[data-market="SE"] [data-m]:not([data-m~="SE"]),
  html[data-market="DK"] [data-m]:not([data-m~="DK"]),
  html[data-market="CH"] [data-m]:not([data-m~="CH"]) { display: none; }
  /* A converted amount in the currency the price is already shown in repeats it: data-own parts of a sentence go, data-same table cells go blank. */
  html[data-currency="USD"] [data-own~="USD"],
  html[data-currency="CAD"] [data-own~="CAD"],
  html[data-currency="GBP"] [data-own~="GBP"],
  html[data-currency="AUD"] [data-own~="AUD"],
  html[data-currency="EUR"] [data-own~="EUR"],
  html[data-currency="NOK"] [data-own~="NOK"],
  html[data-currency="SEK"] [data-own~="SEK"],
  html[data-currency="DKK"] [data-own~="DKK"],
  html[data-currency="CHF"] [data-own~="CHF"] { display: none; }
  html[data-currency="USD"] td[data-same~="USD"] > *,
  html[data-currency="CAD"] td[data-same~="CAD"] > *,
  html[data-currency="GBP"] td[data-same~="GBP"] > *,
  html[data-currency="AUD"] td[data-same~="AUD"] > *,
  html[data-currency="EUR"] td[data-same~="EUR"] > *,
  html[data-currency="NOK"] td[data-same~="NOK"] > *,
  html[data-currency="SEK"] td[data-same~="SEK"] > *,
  html[data-currency="DKK"] td[data-same~="DKK"] > *,
  html[data-currency="CHF"] td[data-same~="CHF"] > * { visibility: hidden; }
  /* Reserved slots (DESIGN_SYSTEM 4.3): keep the box while hidden, so revealing them shifts nothing. */
  .market-slot[hidden] { display: block; visibility: hidden; }
  .theme-toggle[hidden], .fx-btn[hidden] { display: inline-flex; visibility: hidden; }
  .car-controls[hidden] { display: flex; visibility: hidden; }
}

/* ===== P8-11 A: UI polish (badge wrap, guides, brands grid, car facts, byline) ===== */
@layer components {
  /* A1: Badge wraps inside its card */
  .card__badge .badge { white-space: normal; text-wrap: balance; }

  /* A3 (P8-57): summary cut at a word boundary in C#; "· 7 min read" never splits */
  .card__meta > span[aria-hidden] { display: none; }
  .card__meta > span[aria-hidden] + span { white-space: nowrap; }
  .card__meta > span[aria-hidden] + span::before { content: "\b7\a0"; }

  /* A5: two brand cards per phone row */
  @media (max-width: 39.99rem) {
    .grid--brands { --grid-min: 9.5rem; }
  }

  /* A6: Car facts below 40rem - 2 columns, dd at step-0, odd last tile spans */
  @media (max-width: 39.99rem) {
    .car-summary .facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .car-summary .facts dd {
      font-size: var(--step-0);
    }
    .car-summary .facts__item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  .back-top { display: none; }
  @media (max-width: 39.99rem) { .back-top { display: inline-flex; align-items: center; min-block-size: 2.75rem; } }

  /* A7: a date never splits from its label ("Last reviewed 10 Oct 2026") */
  .byline > span:has(> time) { white-space: nowrap; }
}

/* ===== P8-11 B: stacked tables, .fold, size key, card price ===== */
@layer components {
  .price-table thead th a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
  .fold > summary, .assumptions-more > summary { display: flex; align-items: center; min-block-size: 2.75rem; font-weight: 600; cursor: pointer; }
  .fold > .toc__title { display: none; margin-block-end: var(--space-3); }
  .size-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
  .size-key__item { display: flex; align-items: center; gap: var(--space-2); }
  .size-key__swatch { inline-size: 1.75rem; block-size: 1rem; border: 3px var(--kl, solid) var(--kc, var(--ev-strong)); border-radius: var(--radius-1); background: color-mix(in srgb, var(--kf, var(--ev)) 18%, transparent); }
  .size-key__swatch--1 { --kc: var(--gas-ink); --kf: var(--gas); --kl: dashed; }
  .size-key__swatch--2 { --kc: var(--text); --kf: var(--text-muted); --kl: dotted; }
  .card--car .price--none { font-size: var(--step--2); }
  .filters__show { position: sticky; inset-block-end: 6.5rem; inline-size: 100%; margin-block-start: var(--space-3); }
  @media (max-width: 39.99rem) {
    table.table-stack { min-inline-size: 0; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; }
    .table-stack thead:not(:has(a)), .table-stack thead th:not(:has(a)) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .table-stack thead tr { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
    .table-stack thead th:first-child { inline-size: auto; }
    .table-stack tr { padding-block: var(--space-2); border-block-end: var(--bw-strong) solid var(--border); }
    .table-stack th, .table-stack td { padding-block: var(--space-1); border: 0; overflow-wrap: anywhere; }
    .table-stack tbody th[scope="row"] { position: static; color: var(--text); font-size: var(--step-0); font-weight: 700; }
    .table-stack td:empty { display: none; }
    html[data-currency="USD"] .table-stack td[data-same~="USD"],
    html[data-currency="CAD"] .table-stack td[data-same~="CAD"],
    html[data-currency="GBP"] .table-stack td[data-same~="GBP"],
    html[data-currency="AUD"] .table-stack td[data-same~="AUD"],
    html[data-currency="EUR"] .table-stack td[data-same~="EUR"],
    html[data-currency="NOK"] .table-stack td[data-same~="NOK"],
    html[data-currency="SEK"] .table-stack td[data-same~="SEK"],
    html[data-currency="DKK"] .table-stack td[data-same~="DKK"],
    html[data-currency="CHF"] .table-stack td[data-same~="CHF"] { display: none; }
    .table-stack td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; color: var(--text-muted); font-size: var(--step--2); font-weight: 600; }
    .table-stack--inline td { display: flex; justify-content: space-between; gap: var(--space-3); }
    .table-stack--inline td::before { flex: none; }
  }
  @media print { .assumptions-more::details-content { content-visibility: visible; } }
  @media (min-width: 40rem) {
    .fold > .toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); }
  }
  @media (min-width: 48rem) {
    @supports selector(::details-content) {
      .fold > summary { display: none; }
      .fold > .toc__title { display: block; }
      .fold::details-content { content-visibility: visible; }
    }
    .filters__show { display: none; }
  }
}

/* ===== P8-13: size beside dimensions ===== */
@layer components {
  .size-view--car { margin: 0; padding: var(--space-3); border: var(--bw) solid var(--border); border-radius: var(--radius-3); background: var(--surface); }
  /* P8-22: two layouts of one drawing, one shown per width (the other is display: none). Labels are a share of the svg width: 5.15% below 64rem, 2.8% from 64rem. */
  .size-view--car svg { display: block; inline-size: 100%; max-inline-size: 19rem; block-size: auto; margin-inline: auto; }
  .size-view--car .size-view__wide { display: none; }
  .size-view--car figcaption { margin-block-start: var(--space-2); font-size: var(--step--1); }
  .size-view--car figcaption ul { margin: 0; padding-inline-start: 1.25rem; }
  @media (min-width: 48rem) {
    /* two columns: the card takes the height of the Dimensions box beside it (contain: size makes its own content not count), the drawing fills what the caption leaves */
    .size-view--car { display: flex; flex-direction: column; align-self: stretch; contain: size; }
    .size-view--car svg { flex: 1 1 0; min-block-size: 0; }
    .size-view--car figcaption { flex: none; font-size: var(--step--2); }
  }
  @media (min-width: 64rem) {
    .size-view--car .size-view__narrow { display: none; }
    .size-view--car svg.size-view__wide { display: block; max-inline-size: none; }
  }
}

/* ===== P8-31: compare page size view, drawing left and text right from 64rem ===== */
@layer components {
  @media (min-width: 64rem) {
    /* DOM order stays key, drawing, caption: the drawing takes column 1 over three rows, the text items stack in column 2 */
    .size-view--compare { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: var(--space-6); align-content: start; align-items: start; margin: 0; }
    .size-view--compare > svg { grid-column: 1; grid-row: 1 / span 3; inline-size: 100%; block-size: auto; }
    .size-view--compare > .size-key, .size-view--compare > figcaption { grid-column: 2; }
    .size-view--compare > .size-key { margin-block-end: var(--space-3); }
    .size-view--compare > figcaption { margin: 0; }
    .size-view--compare > figcaption ul { margin: 0 0 var(--space-2); padding-inline-start: 1.25rem; }
    /* P8-32: front and rear views are about 42% of the side view's width, so the three read at one scale */
    .size-view--compare[data-size-view="front"] > svg, .size-view--compare[data-size-view="rear"] > svg { inline-size: 8.5rem; justify-self: start; }
  }
}

/* ===== P8-32: footer content pages use the header's container; the contents list moves to a right-hand column from 64rem ===== */
@layer components {
  @media (min-width: 64rem) {
    /* DOM order stays header, contents, text; the contents box takes column 2 over the rows below the header and sticks while the text scrolls */
    .content-page { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(26rem); column-gap: var(--space-6); row-gap: 0; align-items: start; }
    .content-page > * { grid-column: 1; margin-block-end: var(--space-4); }
    .content-page > header { grid-column: 1 / -1; margin-block-end: var(--space-6); }
    .content-page > .toc { grid-column: 2; grid-row: 2 / span 8; position: sticky; inset-block-start: var(--space-5); margin-block-end: 0; max-inline-size: none; }
    .content-page > .prose { max-inline-size: none; }
    .content-page > .prose > :where(p, ul, ol, blockquote) { max-inline-size: var(--measure); } /* P8-57: prose measure; headings and tables stay wide */
    .content-page .fold > .toc__list { display: flex; }
    /* the FAQ groups sit two across, the glossary terms three across */
    .faq-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: var(--space-6); align-items: start; }
    .faq-page .faq-group > h2 { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
    .faq-page > header, .faq-page > .empty { grid-column: 1 / -1; }
    .glossary-list { column-count: 3; }
  }
}

/* ===== motion ===== */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .story__layer { transition: opacity var(--dur-2) var(--ease-out); }
    .btn, .icon-btn, .card, .field__control, .site-nav__link,
    .toc__link, .glossary-nav__link, .source-list__link,
    button.link, .link, .form-summary a, .consent__btn,
    .disclosure summary, .tool-share__btn, .tabs__link {
      transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
        color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    }
    .disclosure summary::before { transition: transform var(--dur-1) var(--ease-out); }
    .tabs__link::after { transition: transform var(--dur-2) var(--ease-out); }
    .site-dock, .pricebar { transition: transform var(--dur-2) var(--ease-out); }
    @media (hover: hover) {
      .card:hover { transform: translateY(-2px); }
    }
    .btn .icon:has(> use[href="#i-arrow-right"]) { transition: transform var(--dur-2) var(--ease-out); }
    .btn:is(:hover, :focus-visible) .icon:has(> use[href="#i-arrow-right"]) { transform: translateX(3px); }
    /* copy link (R5-2): the copy icon turns and shrinks away, the check pops in and draws, the label fades; reduced motion swaps at once */
    .share-copy .icon { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out); }
    .share-copy .icon--done { stroke-dasharray: 22; }
    .share-copy[data-state="done"] .icon--copy { transform: rotate(90deg) scale(.5); }
    .share-copy[data-state="done"] .icon--done { animation: share-pop var(--dur-3) var(--ease-out), share-draw var(--dur-3) var(--ease-out); }
    .share-copy[data-state="done"] .share-copy__label { animation: share-in var(--dur-2) var(--ease-out); }
    .share-copy[data-state="idle"] .share-copy__label { animation: share-back var(--dur-2) var(--ease-out); }
    @keyframes share-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.15); } }
    @keyframes share-draw { from { stroke-dashoffset: 22; } }
    @keyframes share-in { from { opacity: 0; } }
    @keyframes share-back { from { opacity: 0; } }
    /* disclosures (phone filter panel included): the content fades in, no height is animated; the desktop .fold is always open and is left out */
    @supports selector(::details-content) {
      :is(.disclosure, .spec-box, .price-card__more, .price-table__details, .filters__more)::details-content { transition: opacity var(--dur-2) var(--ease-out); }
      :is(.disclosure, .spec-box, .price-card__more, .price-table__details, .filters__more):not([open])::details-content { opacity: 0; }
      @media (max-width: 47.99rem) {
        .fold::details-content { transition: opacity var(--dur-2) var(--ease-out); }
        .fold:not([open])::details-content { opacity: 0; }
      }
    }
    /* results rise once: at load (calculator result, compare table) and after the in-place swap of /cars (cars-filters.js adds .swap-in) */
    @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
    section[aria-labelledby$="-result-h"], .compare-table, .swap-in { animation: rise-in var(--dur-2) var(--ease-out) backwards; }
    .theme-toggle .icon { transition: transform var(--dur-2) var(--ease-in-out); }
    .theme-toggle[aria-pressed="true"] .icon { transform: rotate(180deg); }
    .duo-rule { transform-origin: 0 50%; animation: duo-draw var(--dur-4) var(--ease-out) both; }
    @keyframes duo-draw { from { transform: scaleX(0); } to { transform: none; } }
    @supports (animation-timeline: view()) {
      .reveal, .home-sec > * { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
      @keyframes reveal { from { transform: translateY(16px); } to { transform: none; } }
      /* cards below the first row (no .reveal on the first row) rise as they enter, each column later; no fade (axe) */
      .card.reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
      .grid--cards > li:nth-child(3n+2) > .card.reveal { animation-range: entry 8% entry 48%; }
      .grid--cards > li:nth-child(3n) > .card.reveal { animation-range: entry 16% entry 56%; }
    }
  }
}
/* ===== print (R3-4): the page content only; the chrome, the tabs, the share buttons and the fixed bars stay off the paper ===== */
@media print {
  :root { color-scheme: light; --bg: Canvas; --surface: Canvas; --surface-alt: Canvas; --text: CanvasText; --text-muted: CanvasText; --border: GrayText; }
  .site-header, .site-search, .market-slot, .theme-toggle, .tabs, .page-share, .share-dialog, .tool-share, .site-dock, .pricebar, .consent, .skip-link { display: none; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--step--2); overflow-wrap: anywhere; }
  .card, .insights__card, .version-card, .energy-card { background: none; box-shadow: none; break-inside: avoid; }
  table, tr, figure { break-inside: avoid; }
  .car-hero { display: block; } .facts { display: flex; flex-wrap: wrap; gap: var(--space-4); }
}