/* Metal Building Calculators theme: the accepted system (work/design/DESIGN.md, reference work/design/home/).
 * Steel and paper, ink rules, one filled button in ink; light and dark from the same tokens. The configurator's
 * layout (drawing and price tag, then the spec sheet; on phones the size fields under the drawing and a price dock
 * at the bottom), then the copy, the plain pages and the chrome. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
:root {
  color-scheme: light;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-ui: 0.9375rem; --text-md: 1rem; --text-body: 1.0625rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem; --text-3xl: 2.25rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 240ms;
  --container: 1440px; --gutter: 64px;
  /* One family: Archivo for text, controls and numbers (prices too; tabular figures wherever numbers stack), Archivo
   * Narrow for heads: 700 on the short section heads, 600 on the long heads (h1, h2, the fit line). */
  --font-display: "Archivo Narrow", ui-sans-serif, sans-serif; --font-body: "Archivo", ui-sans-serif, sans-serif;
  --rule-hair: 1px; --rule-bar: 3px; --rule-frame: 1.5px;
  /* Palette, graphite (owner's choice 2026-10-31): paper hue and tint, ink hue and chroma, the action colour (the price
   * tag's bar, the current nav item) in light and dark, and the band (header, section bars). The one accent is the
   * "Get prices" button's deep blue, the blue of the painted vehicles (--color-cta). */
  --h: 245; --t: 0.005; --ih: 250; --ic: 0.012;
  --a-l: 24%; --a-c: 0.014; --a-h: 250; --a-dl: 93.5%; --a-dc: 0.005;
  --b-l: 24%; --b-c: 0.014; --b-h: 250; /* the band: the header and the section bars */
}
:root {
  --color-paper: oklch(96.5% var(--t) var(--h)); --color-sheet: oklch(99.4% calc(var(--t) * 0.4) var(--h)); --color-paper-2: oklch(92% calc(var(--t) * 1.3) var(--h));
  --color-ink: oklch(22% var(--ic) var(--ih)); --color-ink-2: oklch(33% var(--ic) var(--ih)); --color-muted: oklch(47% calc(var(--ic) * 0.9) var(--ih));
  --color-rule: var(--color-ink); --color-rule-2: oklch(85% calc(var(--t) * 1.6) var(--h));
  --color-action: oklch(var(--a-l) var(--a-c) var(--a-h)); --color-action-ink: var(--color-sheet);
  --color-action-hover: color-mix(in oklab, var(--color-action) 84%, var(--color-sheet));
  --color-cta: oklch(42% 0.12 258); --color-cta-ink: var(--color-sheet); --color-cta-hover: oklch(36% 0.11 258);
  --color-focus: oklch(52% 0.13 250); --color-error: oklch(50% 0.19 28); --color-line3d: oklch(55% calc(var(--ic) * 0.8) var(--ih));
  --color-band: oklch(var(--b-l) var(--b-c) var(--b-h)); --color-band-ink: oklch(98.5% 0.003 var(--h)); --color-bar: var(--color-band);
  --shadow-dock: 0 -1px 0 var(--color-rule-2), 0 -8px 24px oklch(22% var(--ic) var(--ih) / 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: oklch(20% calc(var(--ic) * 0.8) var(--ih)); --color-sheet: oklch(24.5% calc(var(--ic) * 0.85) var(--ih)); --color-paper-2: oklch(28% calc(var(--ic) * 0.9) var(--ih));
    --color-ink: oklch(93.5% var(--t) var(--h)); --color-ink-2: oklch(86% calc(var(--t) * 1.3) var(--h)); --color-muted: oklch(72% calc(var(--ic) * 0.9) var(--ih));
    --color-rule-2: oklch(35% var(--ic) var(--ih));
    --color-action: oklch(var(--a-dl) var(--a-dc) var(--a-h)); --color-action-ink: var(--color-paper);
    --color-action-hover: color-mix(in oklab, var(--color-action) 84%, var(--color-ink));
    --color-cta: oklch(72% 0.11 252); --color-cta-ink: var(--color-paper); --color-cta-hover: oklch(78% 0.1 252);
    --color-focus: oklch(76% 0.1 245); --color-error: oklch(74% 0.14 32); --color-line3d: oklch(66% var(--ic) var(--ih));
    --color-band: oklch(27% calc(var(--b-c) * 0.6) var(--b-h)); --color-band-ink: var(--color-ink); --color-bar: var(--color-ink);
    --shadow-dock: 0 -1px 0 var(--color-rule-2), 0 -8px 24px oklch(0% 0 0 / 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(20% calc(var(--ic) * 0.8) var(--ih)); --color-sheet: oklch(24.5% calc(var(--ic) * 0.85) var(--ih)); --color-paper-2: oklch(28% calc(var(--ic) * 0.9) var(--ih));
  --color-ink: oklch(93.5% var(--t) var(--h)); --color-ink-2: oklch(86% calc(var(--t) * 1.3) var(--h)); --color-muted: oklch(72% calc(var(--ic) * 0.9) var(--ih));
  --color-rule-2: oklch(35% var(--ic) var(--ih));
  --color-action: oklch(var(--a-dl) var(--a-dc) var(--a-h)); --color-action-ink: var(--color-paper);
  --color-action-hover: color-mix(in oklab, var(--color-action) 84%, var(--color-ink));
  --color-cta: oklch(72% 0.11 252); --color-cta-ink: var(--color-paper); --color-cta-hover: oklch(78% 0.1 252);
  --color-focus: oklch(76% 0.1 245); --color-error: oklch(74% 0.14 32); --color-line3d: oklch(66% var(--ic) var(--ih));
  --color-band: oklch(27% calc(var(--b-c) * 0.6) var(--b-h)); --color-band-ink: var(--color-ink); --color-bar: var(--color-ink);
  --shadow-dock: 0 -1px 0 var(--color-rule-2), 0 -8px 24px oklch(0% 0 0 / 0.35);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-underline-offset: 0.16em; }
strong { font-weight: 600; }
h1, legend { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
h1 { margin: 0; font-size: var(--text-3xl); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
.num, input[type="number"], input[name="zip"], .dim, .sizes td { font-variant-numeric: tabular-nums; }
.screen-reader-text:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: absolute; z-index: 40; left: var(--space-md); top: var(--space-md); padding: var(--space-xs) var(--space-md); background: var(--color-sheet); color: var(--color-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Top bar */
.top { background: var(--color-band); color: var(--color-band-ink);
  --color-ink: var(--color-band-ink); --color-focus: var(--color-band-ink); --color-action: var(--color-band-ink);
  --color-rule-2: color-mix(in oklab, var(--color-band-ink) 40%, var(--color-band)); }
.top-in { max-width: var(--container); margin-inline: auto; padding: var(--space-sm) var(--gutter); display: flex; align-items: center; gap: var(--space-xl); }
.brand { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1; }
/* The mark: a calculator key with a building and "=" (owner's choice 2026-10-31); the key in ink, the cut-outs in the band. */
.mark { width: 30px; height: 30px; flex: none; }
.mark .k { fill: var(--color-ink); }
.mark .h { fill: none; stroke: var(--color-band); stroke-width: 2.4; stroke-linejoin: round; }
.mark .e { stroke: var(--color-band); stroke-width: 1.9; }
.nav { margin-left: auto; }
.nav ul, .menu ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.nav a, .menu a { text-decoration: none; font-weight: 500; font-size: var(--text-sm); padding-block: var(--space-2xs); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover, .menu a:hover { border-bottom-color: var(--color-rule-2); }
.nav a[aria-current="page"], .menu a[aria-current="page"] { border-bottom-color: var(--color-action); }
.menu { display: none; position: relative; margin-left: auto; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 100%; z-index: 30; background: var(--color-band); padding: var(--space-sm) var(--space-md); min-width: 12rem; }
.menu ul { flex-direction: column; gap: var(--space-sm); }

/* The configurator: the drawing beside the tag and the size fields (so changing a size is seen at once), then the spec
 * sheet. The form is display: contents so its fieldsets sit in this grid. */
.doc { max-width: var(--container); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-2xl); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "title title title title" "show show show tag" "show show show size" "site doors park colors" "lead lead lead lead"; gap: var(--space-lg) var(--space-xl); align-items: start; }
.doc > form { display: contents; }
.title { grid-area: title; display: flex; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; }
.title > .mbc-breadcrumb { flex-basis: 100%; }
.title > .mbc-breadcrumb ol { margin: 0; }
.lead { color: var(--color-ink-2); max-width: 52ch; }

.show { grid-area: show; min-width: 0; border-top: var(--rule-bar) solid var(--color-bar); padding-top: var(--space-xs); }
.stage { position: relative; aspect-ratio: 16 / 9; }
.stage > picture, .stage > picture img, .canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage > picture img { object-fit: contain; }
.canvas { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.stage[data-live="yes"] .canvas { opacity: 1; }
.stage[data-live="yes"] > picture { visibility: hidden; }
.stage[data-stale="yes"] > picture { opacity: 0.35; }
/* The hint that the building turns, and after the first turn the way back: one chip in the stage's corner. */
.hint { position: absolute; z-index: 1; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; margin: 0; height: 36px; padding: 0 var(--space-sm) 0 var(--space-xs); border: 1px solid var(--color-rule-2); background: var(--color-sheet); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; pointer-events: none; }
.hint svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
button.hint { pointer-events: auto; cursor: pointer; border-color: var(--color-muted); color: var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out); }
button.hint::after { content: ""; position: absolute; inset: -4px; }
button.hint:hover { background: var(--color-paper-2); }
button.hint:active { background: var(--color-rule-2); }
.errors { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: var(--space-lg); color: var(--color-error); font-weight: 700; background: color-mix(in oklab, var(--color-paper) 82%, transparent); }
.errors:empty { display: none; }
.errors p { max-width: 44ch; }
.dim { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink); background: var(--color-paper); padding: 1px 4px; }
.caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-xs); }
.fit { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1; }
.why { margin: var(--space-xs) 0 0; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.why:empty { display: none; }

/* Two-way switch: Inside and Outside */
.views { display: flex; flex: none; }
.views button { height: 36px; padding: 0 var(--space-sm); border: var(--rule-frame) solid var(--color-ink); background: transparent; cursor: pointer; font-size: var(--text-sm); font-weight: 700; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.views button + button { border-left: 0; }
.views button:hover { background: var(--color-paper-2); }
.views button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }

/* The tag */
.tag { grid-area: tag; grid-template-columns: minmax(0, 1fr); border: var(--rule-frame) solid var(--color-ink); border-top: 6px solid var(--color-action); background: var(--color-sheet); padding: var(--space-md) var(--space-md) var(--space-lg); display: grid; gap: var(--space-xs); }
.tag-size { font-size: var(--text-lg); font-weight: 600; }
/* The range stays on one line: at most the tag's width (the figures take about 8.4 em). */
.tag { container-type: inline-size; }
.big { font-size: min(var(--text-2xl), 11.5cqi); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-xs); }
.covers { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
/* Why the range is wide, the date and the slab: folded under the button, so the result and the action come first. */
.why-range { font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
.why-range summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; cursor: pointer; color: var(--color-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.16em; }
.why-range summary::-webkit-details-marker { display: none; }
.why-range summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.why-range[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.why-range summary:hover { text-decoration-thickness: 2px; }
.why-range p { padding-bottom: var(--space-2xs); }
.why-range a { white-space: nowrap; }
.note { font-size: var(--text-sm); color: var(--color-muted); }
.note:empty { display: none; }
.cta { height: 48px; padding: 0 var(--space-lg); border: 0; background: var(--color-cta); color: var(--color-cta-ink); font-weight: 700; font-size: var(--text-md); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.tag .cta { margin-top: var(--space-sm); height: auto; min-height: 48px; padding-block: var(--space-xs); white-space: normal; text-wrap: balance; }
.cta:hover { background: var(--color-cta-hover); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline-offset: 3px; }
.cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* The spec sheet: ruled rows, label left, control right */
.col { border: 0; margin: 0; padding: var(--space-sm) 0 0; min-width: 0; border-top: var(--rule-bar) solid var(--color-bar); }
.c-size { grid-area: size; } .c-colors { grid-area: colors; } .c-doors { grid-area: doors; } .c-park { grid-area: park; } .c-site { grid-area: site; }
legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-xs); font-size: var(--text-xl); }
.rows { clear: both; display: grid; border-top: var(--rule-hair) solid var(--color-rule-2); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); min-height: 48px; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.row > label, .row > span:first-child { font-size: var(--text-ui); }
.out b { font-size: var(--text-ui); font-weight: 600; text-align: right; }
input, select { height: 36px; min-width: 0; border: 1px solid var(--color-muted); border-radius: 0; background: var(--color-sheet); padding: 0 var(--space-xs); transition: border-color var(--dur-micro) var(--ease-out); }
input:hover, select:hover { border-color: var(--color-ink); }
input:focus-visible, select:focus-visible { outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
input::placeholder { color: var(--color-muted); }
select { width: 8.5rem; }
input[name="zip"] { width: 8.5rem; }

/* Folded sections (vehicles, doors, colors): the summary is the section's head and, while it is shut, names what is
 * chosen. Phones start with them shut (the inline script after the form); wider screens start open. */
.fold > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-sm); margin-bottom: var(--space-xs); cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:focus-visible { outline-offset: 4px; }
.fold-h { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.01em; }
.now { grid-column: 1; font-size: var(--text-sm); color: var(--color-ink-2); }
.fold[open] .now { display: none; }
.fold[open] .fold-i { grid-row: 1; }
.fold-i { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--color-muted); background: var(--color-sheet); transition: background-color var(--dur-micro) var(--ease-out); }
.fold-i::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-short) var(--ease-out); }
.fold[open] .fold-i::before { transform: translateY(2px) rotate(-135deg); }
.fold > summary:hover .fold-i { background: var(--color-paper-2); }
.fold fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Stepper: minus, the number, plus */
.stepper { display: grid; grid-template-columns: 36px 4.75rem 36px; }
.stepper input { width: 100%; text-align: center; padding: 0; border-inline: 0; appearance: textfield; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.stepper button { height: 36px; border: 1px solid var(--color-muted); background: var(--color-sheet); cursor: pointer; padding: 0; line-height: 1; font-size: var(--text-lg); position: relative; transition: background-color var(--dur-micro) var(--ease-out); }
.stepper button::after { content: ""; position: absolute; inset: -6px -2px; }
.stepper button:hover { background: var(--color-paper-2); }
.stepper button:active { background: var(--color-rule-2); }
.stepper button:focus-visible { outline-offset: 1px; z-index: 1; }
.stepper.ft { grid-template-columns: 36px 5.5rem 36px; }
.unit { position: relative; display: block; }
.unit input { padding-right: 1.6rem; }
.unit i { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--text-xs); color: var(--color-muted); pointer-events: none; }

/* Colour swatches: radio buttons drawn as chips */
.swatches { display: flex; flex-wrap: wrap; gap: 6px; padding-block: var(--space-xs); }
.swatches label { position: relative; width: 30px; height: 30px; cursor: pointer; }
.swatches input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.swatches span { position: absolute; inset: 0; background: var(--chip); border: 1px solid color-mix(in oklab, var(--color-ink) 30%, transparent); }
.swatches input:checked + span { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.swatches input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.swatch-name { font-size: var(--text-sm); color: var(--color-muted); }
.limit, .c-site .note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* Request form */
.lead-form { grid-area: lead; border-top: var(--rule-bar) solid var(--color-bar); padding-top: var(--space-md); display: grid; gap: var(--space-sm); }
.lead-form h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); }
.lead-form form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: var(--space-sm); align-items: end; }
.lead-form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.lead-form input, .lead-form select { width: 100%; }

/* Phone dock: the price and the one action in reach; it steps aside while the tag's price or the request form is on
 * screen (configurator.js), and while a field has the keyboard up. */
.dock { display: none; }

/* The copy under the configurator, and the plain pages: one measure, sections under a bar */
.copy, .page-wrap { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter) var(--space-2xl); }
.page-wrap { padding-top: var(--space-lg); }
.copy > *, .plain { max-width: 36rem; }
.copy > .sizes { max-width: 64rem; }
.copy > .vehicles { max-width: 52rem; }
.copy > h2:first-child { margin-top: var(--space-md); }
.copy h2, .plain h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; border-top: var(--rule-bar) solid var(--color-bar); padding-top: var(--space-sm); margin: var(--space-2xl) 0 var(--space-md); }
.copy h3, .plain h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; text-wrap: balance; margin: var(--space-xl) 0 var(--space-xs); }
.copy h2 + h3, .plain h2 + h3 { margin-top: var(--space-md); }
/* Short paragraphs with a clear stop between them; bold only for a short conclusion. */
.copy p, .copy ul, .copy ol, .plain p, .plain ul, .plain ol { margin: 0 0 var(--space-lg); font-size: var(--text-body); line-height: 1.6; }
.copy ul, .copy ol, .plain ul, .plain ol { padding-left: 1.25rem; }
.copy li + li, .plain li + li { margin-top: var(--space-xs); }
.copy p:has(+ ul), .plain p:has(+ ul) { margin-bottom: var(--space-xs); }
/* A method in named parts: what it covers, what moves it, where it stops. */
.points { display: grid; gap: var(--space-md); margin: 0 0 var(--space-lg); font-size: var(--text-body); line-height: 1.6; }
.points dt { font-weight: 600; }
.points dd { margin: 0; }
.plain .lead { margin: var(--space-sm) 0 var(--space-lg); }
.copy .sources { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); }
/* Related pages: the title is the link text, its intro a muted line under it, as in the size table's rows. */
.copy .tools { list-style: none; padding-left: 0; }
.tools a { display: block; text-decoration: none; }
.tools b { font-weight: 600; text-decoration: underline; }
.tools a:hover b { text-decoration-thickness: 2px; }
.tools span { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--color-muted); }

/* Tables of the copy: ruled rows; the first column names the row */
.sizes { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: var(--text-ui); line-height: 1.45; }
.sizes th, .sizes td { text-align: left; vertical-align: baseline; padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.sizes :is(th, td):first-child { padding-left: 0; }
.sizes td, .sizes thead th:not(:first-child) { text-align: right; }
.sizes thead th { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); padding-block: var(--space-xs); border-bottom: var(--rule-frame) solid var(--color-ink); }
.sizes tbody th { font-weight: 600; }
.sizes tbody th a { font-size: var(--text-md); }
.sizes tbody th span { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
/* Prices semibold, the rest regular; a vehicle's sizes are its numbers, so they read a step stronger than its model. */
.sizes td { font-weight: 400; white-space: nowrap; }
.sizes:not(.vehicles) td:nth-child(3), .vehicles td { font-weight: 600; }
.vehicles caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Breadcrumbs on plain pages */
.mbc-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0 0 var(--space-md); padding: 0; font-size: var(--text-sm); color: var(--color-muted); }
.mbc-breadcrumb li + li::before { content: "/"; margin-right: var(--space-xs); }

/* Footer: the band again */
.footer { background: var(--color-band); color: var(--color-band-ink); --color-ink: var(--color-band-ink); --color-focus: var(--color-band-ink); --color-rule-2: color-mix(in oklab, var(--color-band-ink) 40%, var(--color-band)); }
.footer-in { max-width: var(--container); margin-inline: auto; padding: var(--space-xl) var(--gutter); display: grid; gap: var(--space-md); }
.footer .brand { font-size: var(--text-md); }
.footer .mark { width: 24px; height: 24px; }
.footer-note { max-width: 60ch; font-size: var(--text-sm); color: color-mix(in oklab, var(--color-band-ink) 78%, var(--color-band)); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }

@media (max-width: 75rem) {
  .doc { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "title title" "show show" "size tag" "colors site" "doors park" "lead lead"; }
  .lead-form form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  :root { --gutter: 16px; }
  .top-in { padding-block: var(--space-xs); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .nav { display: none; }
  .menu { display: block; }
  .doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "show" "size" "tag" "park" "doors" "colors" "site" "lead"; gap: var(--space-md); padding: var(--space-md) max(16px, env(safe-area-inset-right, 0px)) var(--space-xl) max(16px, env(safe-area-inset-left, 0px)); }
  h1 { font-size: var(--text-2xl); }
  .lead { font-size: var(--text-sm); }
  .stage { aspect-ratio: 4 / 3; }
  .big { font-size: min(var(--text-3xl), 11.5cqi); }
  .fit { font-size: var(--text-lg); }
  .c-size legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .c-size { border-top-width: var(--rule-hair); padding-top: 0; }
  .c-size .rows { border-top: 0; }
  /* The folded sections read as one list under one bar. */
  .fold { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: 0; }
  .c-park { border-top: var(--rule-bar) solid var(--color-bar); }
  .c-doors, .c-colors { margin-top: calc(-1 * var(--space-md)); }
  .c-colors:not([open]) { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .fold > summary { min-height: 64px; padding-block: var(--space-sm); margin: 0; row-gap: 2px; }
  .fold-h { font-size: var(--text-lg); }
  .fold-i { width: 36px; height: 36px; }
  .lead-form form { grid-template-columns: minmax(0, 1fr); }
  .dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; transition: transform var(--dur-short) var(--ease-out), visibility 0s; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); background: var(--color-sheet); box-shadow: var(--shadow-dock); padding: var(--space-xs) max(16px, env(safe-area-inset-right, 0px)) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .dock-price { display: grid; line-height: 1.2; min-width: 0; }
  .dock-price b { font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dock-price span { font-size: var(--text-xs); color: var(--color-muted); }
  .dock .cta { height: 44px; padding: 0 var(--space-md); }
  .dock[data-away], body:has(:is(input:not([type="radio"]), select):focus) .dock { transform: translateY(calc(100% + 32px)); visibility: hidden; transition: transform var(--dur-short) var(--ease-out), visibility 0s var(--dur-short); }
  .copy h2 { margin-top: var(--space-xl); }
  .footer-in { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  /* Tables become cards: the row's name, then label and value on one line, as in the spec sheet; the price first. */
  .sizes { border-top: var(--rule-frame) solid var(--color-ink); }
  .sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sizes tr { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .sizes th, .sizes td { border: 0; padding: 0; white-space: normal; }
  .sizes tbody th { margin-bottom: var(--space-xs); }
  .sizes td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); text-align: right; }
  .sizes td::before { content: attr(data-label); text-align: left; font-weight: 400; color: var(--color-ink-2); }
  .sizes tbody th { order: -2; }
  .sizes:not(.vehicles) td:nth-child(3) { order: -1; }
  /* A vehicle: its name and model, then length, width and height side by side, each under its label. */
  .vehicles tr { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-sm); row-gap: var(--space-2xs); padding-block: var(--space-sm); }
  .vehicles tbody th { grid-column: 1 / -1; margin-bottom: var(--space-2xs); }
  .vehicles td { display: grid; justify-content: start; text-align: left; gap: 0; }
  .vehicles td::before { font-size: var(--text-sm); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}