/* pages.css: one block per page. Tokens only. Phone first; the steps are 45em and 60em.
   Home, size search, a size's results, the size catalogue and the brand pages are direction
   "open all night" (2026-11-12) and are written fresh below. The blocks after them belong to
   pages not yet ported: they read the new tokens and keep their old structure until their slice. */

/* ---------- home ---------------------------------------------------------------------------- */
/* Measured off ops/briefs/2026-11-12/247-ads-calls/redesign/direction-b. One idea per section,
   44px between sections on a phone and 72px from 60em; base.css's .page > * gives every section
   the content line. */
.page-home > section { padding-block: var(--section-gap); }

/* The first screen: open-now line, the promise, Call and WhatsApp, the way to the size search,
   then one photograph. */
.page-home > .first { display: grid; gap: var(--space-16); padding-block: var(--space-12) var(--space-19); }
.first h1 { margin-block-start: var(--space-6); font-size: var(--fs-h1-hero); line-height: var(--lh-h1-hero); }
.first .lede { margin-block-start: var(--space-5); }
.cta { display: grid; gap: var(--space-4); margin-block-start: var(--space-15); }
.unsure {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-11);
  color: var(--color-text-muted);
  font-size: var(--fs-body-md);
}

/* A photograph: 24px corners, nothing laid over it. */
.shot { border-radius: var(--radius-box); overflow: hidden; background: var(--color-surface); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-shot { aspect-ratio: 4 / 3; }
.hero-shot img { object-position: 28% 50%; }

/* Where the size is printed: the one surface panel on the page. */
.size-panel { padding: var(--space-16) var(--space-14) var(--space-14); border-radius: var(--radius-box); background: var(--color-surface); }
.size-panel .lede { margin-block-start: var(--space-4); }
.code {
  display: block;
  margin-block: var(--space-8) var(--space-14);
  padding-block: var(--space-14);
  border-block: 1px solid var(--color-line);
  font-size: var(--fs-code);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.code i { font-style: normal; color: var(--color-accent); }
.size-acts { display: grid; gap: var(--space-11); }

/* The brands: one photograph, the count, six marks on bone plates. */
.brands-block { display: grid; gap: var(--space-8); }
.brands-shot { aspect-ratio: 16 / 9; }
.brands-shot img { object-position: 60% 50%; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-block-start: var(--space-7); }
.plate {
  display: grid;
  place-items: center;
  height: var(--plate-height);
  padding-inline: var(--space-5);
  border-radius: var(--radius-ctl);
  background: var(--color-bone);
  transition: transform 120ms ease;
}
.plate:active { transform: scale(0.98); }
/* Every mark here is dark artwork on the bone plate; the older per-brand dark plate is switched off. */
.plates .plate .brand-logo { display: contents; }
.plates .plate .brand-logo img { width: auto; height: auto; max-width: 100%; max-height: var(--plate-logo-height); }
.brands-block .link { margin-block-start: var(--space-4); }

/* The four while-you-wait services: hairline rows, the name then a few quiet words. */
.rows { margin-block-start: var(--space-13); }
.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 17px;
  border-block-start: 1px solid var(--color-line);
  color: var(--color-text);
  text-decoration: none;
}
.row b { font-size: var(--fs-title); font-weight: 600; }
.row span { color: var(--color-text-muted); font-size: var(--fs-meta); text-align: end; }
@media (hover: hover) and (pointer: fine) {
  .row:hover b { color: var(--color-accent-hover); }
}
.row:active b { color: var(--color-accent-press); }
.row:focus-visible { border-radius: var(--radius-sm); }
.fitted > .link { margin-block-start: var(--space-3); }

/* Home service: a hairline above and below, no panel. */
.page-home > .home-service { padding-block: 0; }
.home-service-inner { display: grid; gap: var(--space-14); padding-block: var(--space-18); border-block: 1px solid var(--color-line); }
.home-service-inner .lede { margin-block-start: var(--space-4); }

/* Where the shop is. The footer's sign closes the page. */
.find-addr { margin-block-start: var(--space-12); color: var(--color-text-muted); max-width: 30em; }
.find .btn { margin-block-start: var(--space-14); }

@media (min-width: 45em) {
  .rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-19); }
  .home-service-inner { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 60em) {
  .page-home > .first {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: var(--space-21);
    align-items: center;
    padding-block: var(--space-17) 88px;
  }
  .first h1 { margin-block-start: var(--space-14); }
  .first .lede { margin-block-start: var(--space-14); font-size: var(--fs-body-lead); }
  .cta { grid-template-columns: auto auto; justify-content: start; gap: var(--space-12); margin-block-start: var(--space-17); }
  .cta .btn { min-height: var(--call-height); padding-inline: var(--space-16); }
  .cta .btn-call { padding-inline-end: var(--space-17); }
  .hero-shot { aspect-ratio: 5 / 6; width: 100%; max-height: 640px; }
  .size-panel { padding: var(--space-19) var(--space-19) 44px; }
  .size-acts { grid-template-columns: auto auto 1fr; gap: var(--space-16); align-items: center; }
  .brands-block { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-21); align-items: center; }
  .brands-shot { aspect-ratio: 4 / 3; }
  .plates { gap: var(--space-4); margin-block-start: var(--space-9); }
  .rows { margin-block-start: var(--space-9); }
  .home-service-inner { padding-block: var(--space-20); }
}

@media (prefers-reduced-motion: reduce) {
  .plate { transition: none; }
  .plate:active { transform: none; }
}

/* ---------- shapes the list pages share ------------------------------------------------------ */
/* Size search, a size's results, the size catalogue, the brand wall and a brand page (slice 2 of
   "open all night"). A page here is a heading, then one list of hairline rows; the footer's sign
   closes it and the phone bar keeps Call on screen. */
.crumb { color: var(--color-text-muted); font-size: var(--fs-caption); }
.crumb a { color: inherit; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .crumb a:hover { color: var(--color-text); }
}

.size-note { color: var(--color-text-muted); font-size: var(--fs-meta); line-height: 1.5; }

/* A numbered key: the signal disc the placard drawings use. */
.callout-key {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-callout-text);
  font-family: var(--font-latin);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
}
.fit-confirm { display: flex; align-items: center; gap: var(--space-4); margin-block-start: var(--space-7); color: var(--color-text-muted); font-size: var(--fs-meta); }

/* The aside that ends a list: a hairline above and below, a question, one line, the two ways to
   reach the shop. */
.help-box { display: grid; gap: var(--space-4); margin-block-start: var(--section-gap); padding-block: var(--space-18); border-block: 1px solid var(--color-line); }
.help-box :is(h2, h3) { font-size: var(--fs-title-lg); line-height: 1.2; }
.help-box p { max-width: var(--measure); color: var(--color-text-muted); }
.answer-actions { display: grid; gap: var(--space-4); margin-block-start: var(--space-5); }
.answer-text { max-width: var(--measure); }

/* A badge is a fact printed beside a size (XL, run-flat, tube type), never a control. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
  white-space: nowrap;
}

/* Stock. "In stock" is the open lamp and the signal; anything else says to ask, in the muted
   register. The note above a list is one muted line. */
.stock-stale { color: var(--color-text-muted); font-size: var(--fs-meta); }
.stock-stale span { unicode-bidi: isolate; }
.stock-chip { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 500; line-height: 1.3; }
.stock-chip[data-avail="in"],
.stock-chip[data-stock-slot] { color: var(--color-accent); }
.stock-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stock-chip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.nearest-title { margin-block-end: var(--space-5); font-size: var(--fs-title); line-height: 1.25; }
.chip-size, .chip-link, button.chip { font-family: var(--font-latin); font-variant-numeric: tabular-nums; }
button.chip { border: 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  button.chip:hover { background: var(--color-raised-hover); }
}

@media (min-width: 45em) {
  .answer-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
}

@media (min-width: 60em) {
  .help-box { padding-block: var(--space-20); }
}

/* ---------- a tyre in a list ---------------------------------------------------------------- */
/* One row, two renderers (build.mjs sizeCard and search.js card), one stylesheet. A hairline, the
   maker's mark on a bone plate at the start, the pattern, the size in Latin numerals, and the row
   ends in the WhatsApp question. No price, no picture, no invented stock mark. */
.tyre-grid { border-block-end: 1px solid var(--color-line); }
.tyre-grid:empty { border: 0; }
.tyre-card {
  display: grid;
  grid-template-columns: var(--row-plate-w) minmax(0, 1fr);
  grid-template-areas: "plate name" "plate stock" "plate ask";
  column-gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-6) var(--space-3);
  border-block-start: 1px solid var(--color-line);
}
.tyre-card-brand {
  grid-area: plate;
  display: grid;
  place-items: center;
  height: var(--row-plate-h);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-ctl);
  background: var(--color-bone);
  color: var(--color-on-bone);
  text-decoration: none;
}
.tyre-card-brand:focus-visible { border-radius: var(--radius-ctl); }
.tyre-card-brand .brand-logo-img { width: auto; height: auto; max-width: 100%; max-height: var(--row-logo-height); object-fit: contain; }
/* A maker with no logo file: its name set on the plate, in the plate's ink. */
.tyre-card-brand .brand-badge-initials { display: none; }
.tyre-card-brand .brand-badge-name { color: var(--color-on-bone); font-size: var(--fs-caption); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.tyre-card-name { grid-area: name; display: grid; gap: var(--space-1); min-width: 0; }
.tyre-card-pattern { font-family: var(--font-latin); font-size: var(--fs-title); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tyre-card-spec { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--fs-meta); line-height: 1.5; }
.tyre-card-size { color: var(--color-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.tyre-card-rating { font-variant-numeric: tabular-nums; }
/* The row is read from the right in Arabic, and its Latin lines keep to that edge. */
html[dir="rtl"] .tyre-card-pattern { text-align: right; }
html[dir="rtl"] .tyre-card-spec { justify-content: flex-end; }
.tyre-card-stock { grid-area: stock; margin-block-start: var(--space-2); }
.tyre-card-ask {
  grid-area: ask;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: var(--tap-target);
  color: var(--color-text);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .tyre-card-ask:hover { color: var(--color-accent-hover); }
}
.tyre-card-ask:active { color: var(--color-accent-press); }

@media (min-width: 45em) {
  .tyre-card {
    grid-template-columns: var(--row-plate-w) minmax(0, 1fr) auto auto;
    grid-template-areas: "plate name stock ask";
    column-gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-5);
  }
  .tyre-card-stock { margin-block-start: 0; }
}

/* ---------- size search, /<lang>/size/ ------------------------------------------------------- */
.search-hero { display: grid; gap: var(--space-15); padding-block: var(--space-12) var(--space-9); }
.hero-title { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--weight-h1); }
.search-head .lede,
.hero-lede { margin-block-start: var(--space-4); color: var(--color-text-muted); }
/* A search in the address bar, or one just made on the page: the results lead and the finder
   steps aside until "Change search" asks for it back. */
html[data-searched] .search-hero { display: none; }

.search-results { display: grid; gap: var(--space-7); padding-block-end: var(--section-gap); }
html[data-searched] .search-results { padding-block-start: var(--space-12); }
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-7); }
.results-title { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; }
/* The searched size leads its own heading, as the sign prints it; the count follows quietly. */
.results-title > [dir="ltr"]:first-child { display: block; font-family: var(--font-latin); font-size: var(--fs-code-page); line-height: 1; letter-spacing: var(--tracking-code); }
html[dir="rtl"] .results-title > [dir="ltr"]:first-child { text-align: right; }
.results-title > .results-sep { display: none; }
.results-title > [data-role="count"],
.results-title-car { color: var(--color-text-muted); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.results-title > [data-role="count"] { display: inline-block; margin-block-start: var(--space-4); }
.results-initial-loading { display: none; }
html[data-searched] .results-initial-empty { display: none; }
html[data-searched] .results-initial-loading { display: inline; }
/* Before any search the page's question is the finder's own heading; this one stays for
   assistive technology only. */
.page-size-search .search-results:has(.results-body > .results-empty) .results-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.results-change { display: none; }
html[data-searched] .results-change { display: inline-flex; }
.results-car { color: var(--color-text-muted); }
.results-empty,
.results-loading,
.results-none { max-width: var(--measure); color: var(--color-text-muted); }

/* What the page offers before a search: where the size is written, four common sizes, the count. */
.search-empty { display: grid; gap: var(--space-7); }
.search-results:has(.results-body :is(.size-block, .results-loading)) .search-empty { display: none; }
.search-common-label { margin-block-end: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-meta); }
.search-empty .size-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-6); }

.size-help { border-block: 1px solid var(--color-line); }
.size-help summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--control-height); font-weight: 600; cursor: pointer; list-style: none; }
.size-help summary::-webkit-details-marker { display: none; }
.size-help summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-inline-end: var(--space-2); border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.size-help[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.size-help summary:focus-visible { border-radius: var(--radius-sm); }
.size-help .diagram { display: grid; gap: var(--space-6); padding-block: var(--space-3) var(--space-14); }
.size-help svg { width: 100%; max-width: 360px; height: auto; color: var(--color-text-muted); }
.size-help figcaption { display: grid; gap: var(--space-3); max-width: var(--measure); }
.size-help figcaption p { display: flex; align-items: flex-start; gap: var(--space-4); color: var(--color-text-muted); }

/* After a search: one control to narrow the list, then the rows. */
.results-body { display: grid; gap: var(--space-7); }
.results-bar { display: flex; }
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-chip);
  font-weight: 500;
  cursor: pointer;
}
.filter-toggle::after { content: ""; width: 7px; height: 7px; border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.filter-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.filters { display: grid; gap: var(--space-7); padding: var(--space-14); border-radius: var(--radius-box); background: var(--color-surface); }
.filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.filters legend { margin-block-end: var(--space-4); padding: 0; color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 500; }
.filter-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filter-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: var(--fs-chip);
  cursor: pointer;
}
.filter-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-accent); }
.filter-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color-accent); }
.filter-option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.filters-clear { justify-self: start; }
.size-block { display: grid; gap: var(--space-5); }
.size-block-title { font-size: var(--fs-title); }
.answer { display: grid; gap: var(--space-3); }
.search-results .help-box { margin-block-start: var(--space-9); }
/* A size with no rows already carries the two ways to ask; the closing aside would repeat them. */
.results-body:has(.answer-miss) > .help-box { display: none; }

@media (hover: hover) and (pointer: fine) {
  .filter-toggle:hover,
  .filter-option:hover { background: var(--color-raised-hover); }
}

@media (min-width: 60em) {
  .search-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-21); align-items: start; padding-block: var(--space-17) var(--space-19); }
  .search-head { padding-block-start: var(--space-17); }
  .search-head .lede,
  .hero-lede { margin-block-start: var(--space-7); font-size: var(--fs-body-lead); }
  .search-empty { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--space-21); align-items: start; }
  .search-empty .size-help { grid-row: span 2; }
}

/* ---------- one size, /<lang>/tyres/<size>/ -------------------------------------------------- */
.size-head { display: grid; gap: var(--space-6); padding-block: var(--space-12) var(--space-14); }
.size-line { display: grid; justify-items: start; gap: var(--space-2); }
.size-count { color: var(--color-text-muted); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
/* The size is the heading, as the sign prints it, with the signal slash. */
.size-count-size { display: block; margin-block-end: var(--space-4); color: var(--color-text); font-family: var(--font-latin); font-size: var(--fs-code-page); font-weight: 500; line-height: 1; letter-spacing: var(--tracking-code); }
.size-count-size i,
.results-title > [dir="ltr"]:first-child i { font-style: normal; color: var(--color-accent); }
.size-count .results-sep { display: none; }

/* The makers who list this size, as one row that scrolls sideways. The chosen one is the bone plate. */
.brand-chip-list { display: flex; gap: var(--space-3); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); scrollbar-width: thin; }
.brand-chip-list > li { flex: none; }
.brand-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text);
  font-size: var(--fs-chip);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.brand-chip:focus-visible { border-radius: var(--radius-ctl); }
.brand-chip-mark { display: grid; place-items: center; width: 52px; height: 32px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-bone); }
.brand-chip-mark .brand-logo-img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-chip-mark .brand-badge-name { display: none; }
.brand-chip-mark .brand-badge-initials { font-size: var(--fs-caption); }
.brand-chip-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.brand-chip.is-on { background: var(--color-bone); box-shadow: none; color: var(--color-on-bone); }
.brand-chip.is-on .brand-chip-count { color: var(--color-muted-on-bone); }
@media (hover: hover) and (pointer: fine) {
  .brand-chip:not(.is-on):hover { background: var(--color-raised-hover); }
}

.ledger { display: grid; gap: var(--space-5); padding-block: var(--space-14) var(--section-gap); }
.ledger > [data-role="cards-fallback"] { justify-self: start; }
.ledger-none,
.ledger-shown { max-width: var(--measure); color: var(--color-text-muted); font-size: var(--fs-meta); }
.ledger .fit-confirm { margin-block-start: 0; }

.size-cars,
.size-nearest { padding-block-end: var(--section-gap); }
.size-cars h2,
.size-nearest h2 { margin-block-end: var(--space-7); font-size: var(--fs-title-lg); line-height: 1.2; }
.car-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); column-gap: var(--space-9); }
.car-list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); border-block-start: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; }
html[dir="rtl"] .car-list a { flex-direction: row-reverse; }
.car-years { color: var(--color-text-muted); font-size: var(--fs-caption); white-space: nowrap; }
.cars-more { margin-block-start: var(--space-6); }
.size-cars .size-note { margin-block-start: var(--space-4); }
@media (hover: hover) and (pointer: fine) {
  .car-list a:hover { color: var(--color-accent-hover); }
}

@media (min-width: 60em) {
  .size-head { padding-block: var(--space-17) var(--space-16); }
  .brand-chip-list { margin-inline: 0; padding-inline: var(--space-2); }
}

/* ---------- the size catalogue, /<lang>/tyres/ ----------------------------------------------- */
.page-tyres > .page-head { display: grid; gap: var(--space-5); padding-block: var(--space-12) var(--space-15); }
.page-tyres .page-head .size-note { max-width: var(--measure); font-size: var(--fs-body); }
.catalogue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-15); padding-block-end: var(--section-gap); }
.catalogue-bar { display: grid; gap: var(--space-4); }
.picker { display: grid; gap: var(--space-3); max-width: 420px; }
.picker-label { color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 500; }
.picker select {
  width: 100%;
  min-height: var(--control-height);
  padding-inline: var(--space-6);
  border: 0;
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.picker select:disabled { box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-text-muted); opacity: 1; }
.picker select:focus-visible { border-radius: var(--radius-ctl); }
.catalogue-shown,
.catalogue-none { color: var(--color-text-muted); font-size: var(--fs-meta); }
.catalogue-shown:empty { display: none; }

/* Jump to a rim: one row of chips that scrolls sideways. */
.rim-jump-label { margin-block-end: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 500; }
.rim-jump ul { display: flex; gap: var(--space-3); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); scrollbar-width: thin; }
.rim-jump li { flex: none; }
.rim-jump a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-text);
  line-height: 1.1;
  text-decoration: none;
}
.rim-jump a:focus-visible { border-radius: var(--radius-ctl); }
.rim-chip-label { font-weight: 600; }
.rim-chip-count { color: var(--color-text-muted); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .rim-jump a:hover { background: var(--color-raised-hover); }
}

/* A rim and its sizes: the heading, then two columns of hairline rows. */
.rim-group { scroll-margin-block-start: var(--space-7); }
.rim-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); font-size: var(--fs-title-lg); line-height: 1.2; }
.rim-count { color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0; }
.size-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); margin-block-start: var(--space-5); border-block-end: 1px solid var(--color-line); }
.size-link { display: grid; gap: var(--space-1); height: 100%; padding-block: var(--space-12); border-block-start: 1px solid var(--color-line); color: var(--color-text); text-decoration: none; }
.size-link-size { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[dir="rtl"] .size-link-size { text-align: right; }
.size-link-count { color: var(--color-text-muted); font-size: var(--fs-caption); }
.size-link:focus-visible { border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .size-link:hover .size-link-size { color: var(--color-accent-hover); }
}

.catalogue-help { padding-block-end: var(--section-gap); }

@media (min-width: 45em) {
  .size-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 60em) {
  .page-tyres > .page-head { padding-block: var(--space-17) var(--space-17); }
  .rim-jump ul { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .size-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-9); }
}

/* ---------- the brand wall, /<lang>/brands/, and a brand, /<lang>/brands/<brand>/ ------------- */
.brand-head { display: grid; gap: var(--space-6); padding-block: var(--space-12) var(--space-17); }
.brand-lede { max-width: var(--measure); color: var(--color-text-muted); text-wrap: pretty; }
/* The header line of a brand page is the maker's own mark on its bone plate. */
.brand-plate { display: grid; place-items: center; width: var(--brand-plate-width); height: var(--brand-plate-height); padding: var(--space-4) var(--space-6); border-radius: var(--radius-ctl); background: var(--color-bone); color: var(--color-on-bone); }
.brand-plate .brand-logo { width: 100%; height: 100%; }
.brand-plate .brand-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* One picture: the maker's own product render, on bone like every mark. */
.brand-object { aspect-ratio: 16 / 9; margin-block-start: var(--space-5); overflow: hidden; border-radius: var(--radius-box); background: var(--color-bone); }
.brand-object img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.brand-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); padding-block-end: var(--section-gap); }
/* The page heading already says it; this one is for the outline only. */
.brand-wall-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.brand-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
.brand-rail ul { display: flex; gap: var(--space-1); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter); scrollbar-width: thin; }
.brand-rail a { display: grid; place-items: center; min-width: var(--tap-target); min-height: var(--tap-target); border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; text-decoration: none; }
.brand-letters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-17); }
.brand-letter { scroll-margin-block-start: var(--space-7); }
.brand-letter-head { padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-line); color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0; }
.brand-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-3); margin-block-start: var(--space-6); }
.brand-card { display: grid; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.brand-card .brand-logo { height: var(--plate-height); padding-inline: var(--space-5); border-radius: var(--radius-ctl); background: var(--color-bone); }
.brand-card .brand-logo img { width: auto; height: auto; max-width: 100%; max-height: var(--plate-logo-height); }
.brand-card-name { color: var(--color-text-muted); font-size: var(--fs-caption); line-height: 1.3; overflow-wrap: anywhere; }
html[dir="rtl"] .brand-card-name { text-align: right; }
.brand-card:focus-visible { border-radius: var(--radius-ctl); }
.brand-credit { color: var(--color-text-muted); font-size: var(--fs-caption); }
.brand-wall .help-box { margin-block-start: 0; }
@media (hover: hover) and (pointer: fine) {
  .brand-rail a:hover,
  .brand-card:hover .brand-card-name { color: var(--color-text); }
}

/* Every size a maker lists: rim, then size, then the lines. Native disclosures, hairline rows. */
.brand-ledger { display: grid; gap: var(--space-5); padding-block-end: var(--section-gap); }
.brand-ledger-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.brand-ledger-note { max-width: var(--measure); color: var(--color-text-muted); }
.ledger-empty { color: var(--color-text-muted); }
.brand-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-items: end; margin-block-start: var(--space-5); }
.brand-filters label { display: grid; gap: var(--space-3); min-width: 0; color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 500; }
.brand-filters input {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  color: var(--color-text);
  font: inherit;
}
.brand-filters input::placeholder { color: var(--color-text-muted); }
.brand-filters input:focus-visible { border-radius: var(--radius-ctl); }
.brand-filters .button { justify-self: start; }
.brand-filter-status { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--fs-meta); }
.brand-filter-status:empty { display: none; }
#brand-groups { display: grid; margin-block-start: var(--space-5); border-block-end: 1px solid var(--color-line); }
#brand-groups > .stock-stale { margin-block-end: var(--space-5); }
.brand-rim { border-block-start: 1px solid var(--color-line); }
.brand-rim > summary,
.brand-size > summary { display: flex; align-items: center; gap: var(--space-5); min-height: var(--control-height); cursor: pointer; list-style: none; }
.brand-rim > summary::-webkit-details-marker,
.brand-size > summary::-webkit-details-marker { display: none; }
.brand-rim > summary::after,
.brand-size > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-inline: auto var(--space-2); border: solid var(--color-accent); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
.brand-rim[open] > summary::after,
.brand-size[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.brand-rim > summary { font-size: var(--fs-title); font-weight: 600; }
.brand-rim > summary:focus-visible,
.brand-size > summary:focus-visible { border-radius: var(--radius-sm); }
.brand-size { margin-inline-start: var(--space-6); border-block-start: 1px solid var(--color-line); }
.brand-size > summary { font-weight: 500; font-variant-numeric: tabular-nums; }
.brand-size > summary::after { width: 7px; height: 7px; border-color: var(--color-text-muted); }
.brand-group-count { color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: 400; }
.brand-size > [data-rows-fallback] { display: inline-flex; align-items: center; min-height: var(--tap-target); color: var(--color-text); }
.brand-filters[hidden], .brand-rim[hidden], .brand-size[hidden], .size-row[hidden] { display: none; }

/* One line a maker lists in a size: its picture on bone, the size, the pattern, the load and
   speed code, and the WhatsApp question. */
.size-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--row-plate-h) minmax(0, 1fr);
  grid-template-areas: "img size" "img pattern" "img rating" "img stock" "img ask";
  column-gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5) var(--space-2);
  border-block-start: 1px solid var(--color-line);
}
.size-row::before { content: ""; grid-area: img; height: var(--row-plate-h); border-radius: var(--radius-sm); background: var(--color-bone); }
.size-row-image { grid-area: img; width: var(--row-plate-h); height: var(--row-plate-h); padding: var(--space-1); object-fit: contain; mix-blend-mode: multiply; }
.size-row-size { grid-area: size; justify-self: start; color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; text-underline-offset: 4px; text-decoration-color: var(--color-accent); }
.size-row-pattern { grid-area: pattern; color: var(--color-text); overflow-wrap: anywhere; }
.size-row-rating { grid-area: rating; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--fs-meta); }
.size-row-stock { grid-area: stock; margin-block-start: var(--space-2); }
.size-row .tyre-card-ask { grid-area: ask; }

@media (min-width: 45em) {
  .brand-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }
  .brand-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .size-row {
    grid-template-columns: var(--row-plate-h) minmax(8em, auto) minmax(0, 1fr) auto auto auto;
    grid-template-areas: "img size pattern rating stock ask";
    column-gap: var(--space-7);
    align-items: center;
    padding-block: var(--space-4);
  }
  .size-row-stock { margin-block-start: 0; }
}

@media (min-width: 60em) {
  .brand-head { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: var(--space-21); align-items: center; padding-block: var(--space-17) var(--space-21); }
  .brand-head > * { grid-column: 1; }
  .brand-head > .brand-object { grid-column: 2; grid-row: 1 / span 4; aspect-ratio: 4 / 3; margin: 0; }
  .brands-index-head { grid-template-columns: minmax(0, 1fr); padding-block-end: var(--space-17); }
  .brand-plate { width: var(--brand-plate-width-desktop); height: var(--brand-plate-height-desktop); }
  .brand-rail ul { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .brand-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- D3: /<lang>/vehicle/, the whole page ----------------------------------------- */
/* Component Site-Vehicle.dc.html; boards Site-Vehicle-{390,1280}-{en,ar}.png. Sections 7-10 above
   are shared with /size/ and were written around the light system's card-and-band composition.
   /vehicle/ was the last page still carrying it. Everything from here to the end of the unit is
   scoped to .page-vehicle-finder and sits AFTER those blocks on purpose: source order, not
   specificity, is what lets a page rule answer a shared one it ties with.

   Checked against a POPULATED cascade (2021 Nissan Patrol, two factory sizes) as well as the
   initial empty one. search.js writes .fit-car, .fit-block, .fit-tags, .fit-trims, .fit-rim and a
   .size-tiles list of .size-tile links into the body, and not one of those classes had a
   declaration anywhere in this stylesheet before today - the state both boards actually draw was
   the state nothing had styled. */

/* --- the hero. No card height, no layered composition: the question is one line over a tool. --- */
.page-vehicle-finder .search-hero { --search-card-h: auto; }

.page-vehicle-finder .hero-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: end;
  gap: var(--space-9) clamp(24px, 4vw, 64px);
  padding-inline: var(--gutter);
  padding-block-start: var(--space-13);
}

.page-vehicle-finder .hero-copy { inset-block-start: 0; width: auto; gap: var(--space-5); }

/* The page ramp, not the hero ramp, and the same step /size/ takes: a question over a tool is not
   the front door. --fs-h1 still points at the hero step (CARRY, S7's to re-point), so the step is
   named rather than inherited. */
.page-vehicle-finder .hero-title {
  font-size: var(--fs-h1-page);
  line-height: var(--lh-h1-page);
  letter-spacing: var(--tracking-display-hero);
  max-width: 13ch;
}

html[lang="ar"] .page-vehicle-finder .hero-title { max-width: 14ch; }
.page-vehicle-finder .hero-lede { width: auto; max-width: 42ch; }

/* .search-hero is a flex column, and a flex item with `margin-inline: auto` shrinks to fit instead
   of stretching - the same trap that collapsed the service row on /size/. */
.page-vehicle-finder .services-quick { width: 100%; }

/* The compact bare-text-node register this page shared with /size/ went with the markup that
   needed it; see the note there. Same component as home now. */

/* --- the results band. ------------------------------------------------------------------------
   The ink band goes, for the reason D1b gave /size/: --color-ink-band and --color-bg-raised are
   the same value in both theme blocks, so a panel painted on the band is invisible. Both boards
   run this page on the page ground and raise exactly one box out of it - the factory sizes. This
   was the last ink band left in the wave. */
.page-vehicle-finder .search-results {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-10);
  padding: 0 var(--edge) var(--space-16);
  background: none;
  color: var(--color-text);
}

/* The markup has to put .sidewall before .results-body, because search.js replaces the body
   wholesale and the drawing has to survive it. The board reads panel first, drawing after. */
.page-vehicle-finder .search-results > .results-head { order: 1; }
.page-vehicle-finder .search-results > .results-body { order: 2; }
.page-vehicle-finder .search-results > .sidewall { order: 3; }
.page-vehicle-finder .search-results > .search-empty { order: 4; }

/* Head and body are one panel: adjacent, same ground, no gap between them. */
.page-vehicle-finder .search-results > .results-head {
  padding: var(--space-9) var(--space-9) 0;
  background: var(--color-bg-raised);
}

.page-vehicle-finder .search-results > .results-body {
  padding: var(--space-6) var(--space-9) var(--space-9);
  background: var(--color-bg-raised);
}

/* The board's panel caption is a small soft line - "Factory sizes for a 2021 Patrol" - not a bone
   H2. search.js writes the car into this node, so in the populated state it IS that caption. */
.page-vehicle-finder .search-results .results-title {
  color: var(--color-text-soft);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

html[lang="ar"] .page-vehicle-finder .search-results .results-title { font-family: var(--font-arabic); }

.page-vehicle-finder .search-results .results-empty {
  width: auto;
  max-width: 46ch;
  margin-block-start: 0;
  color: var(--color-text-muted);
}

/* --- the populated cascade, which is the state both boards draw. ------------------------------ */
.page-vehicle-finder .fit-car { color: var(--color-text-soft); font-size: var(--fs-caption); }
.page-vehicle-finder .fit-car span { color: var(--color-text); font-weight: 600; }
.page-vehicle-finder .fit-block + .fit-block { margin-block-start: var(--space-10); }
.page-vehicle-finder .fit-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }
.page-vehicle-finder .badge { border-color: var(--color-chip-border); color: var(--color-text-soft); }

/* Ruling 2026-09-15 R2. A global-spec size for a car we hold a Gulf row for is kept and labelled,
   never dropped and never presented as the answer. It sits after the Gulf block, set back far
   enough that the eye reads the order without needing the badge. */
.page-vehicle-finder .fit-block-alt { padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--color-chip-border); opacity: 0.86; }
.page-vehicle-finder .fit-block-alt .fit-rim,
.page-vehicle-finder .fit-block-alt .size-tile-cap { color: var(--color-text-muted); }

.page-vehicle-finder .fit-trims,
.page-vehicle-finder .answer-text {
  margin-block-start: var(--space-5);
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.page-vehicle-finder .fit-rim {
  margin-block-start: var(--space-7);
  color: var(--color-text-soft);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

html[lang="ar"] .page-vehicle-finder .fit-rim { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

/* One size, one row - the board is a list, not a grid of cards. The label the tile already carries
   sits over the size, the size is the only mono on the page after the finder, and what we hold in
   it is at the far end of the row. The whole row is the link to that size page. */
.page-vehicle-finder .size-tiles {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

/* Three columns, two rows, and the picture spanning both: the plate is the row's leading object
   and the caption, the size and what we hold in it stay the one text block they were. It is a grid
   rather than the wrapping flex row it replaces because the caption's `flex: 0 0 100%` put it on
   its own line by taking the WHOLE row, which a picture in front of it cannot share. Named areas
   mirror with the writing mode, so the Arabic build needs no rule of its own.

   The availability sits beside the caption and the size takes the whole second line. With a
   picture in the row there is no longer width for a 28px mono size and a sentence-long stock plate
   side by side, and the size broke over two lines at 1280 — the one string on this page that may
   never wrap. It is the register section 8 already ratified for the ledger row in a narrow
   container: plate and stock on the first line, the name on the second. */
.page-vehicle-finder .size-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media cap  stock"
    "media size size";
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  min-height: 56px;
  padding: var(--space-5) var(--space-7);
  border: var(--border-width) solid var(--color-chip-border);
  border-radius: 0;
  color: var(--color-text);
  text-decoration: none;
}

/* The tyre. Same plate as the /tyres/<size>/ card (section 13) at a row's scale: the one surface a
   shade above the tile, the render contained rather than cropped and lifted a third because every
   render in the set is a dark tyre on nothing. The box is declared here and the <img> carries its
   own width and height, so the list is its final height before a single picture has loaded. */
.page-vehicle-finder .size-tile-media {
  grid-area: media;
  position: relative;
  align-self: center;
  inline-size: 96px;
  aspect-ratio: 1 / 0.8;
  overflow: hidden;
  background: var(--color-surface-strong);
}

.page-vehicle-finder .size-tile-photo {
  position: absolute;
  inset: var(--space-3);
  display: block;
  inline-size: calc(100% - 2 * var(--space-3));
  block-size: calc(100% - 2 * var(--space-3));
  object-fit: contain;
  filter: brightness(1.3);
}

/* Whose tyre it is. Only a size we actually hold gets one, which is what stops the other three
   states reading as stocked now that they carry a photograph too. Same bone plate and same 16px
   logo floor as the card's mark - a logo has an absolute legibility floor and does not scale with
   the plate it sits on - but at the foot of the picture, where it does not cover the tread. */
.page-vehicle-finder .size-tile-mark {
  position: absolute;
  z-index: 1;
  inset-block-end: var(--space-3);
  inset-inline-start: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 20px;
  padding-inline: var(--space-11);
  border-radius: 0;
  background: var(--color-bone);
}

/* Under about 340px of COLUMN — the phone, and the narrow half of a split page at any width — a
   96px plate and a 28px mono size cannot share one line, and the size broke over two. The size
   drops to its own full-width line under the picture and the availability moves under the caption.
   Keyed to .size-tiles rather than the viewport for the reason section 8 gives for the ledger row:
   this list also runs inside a results column that is narrower than the window. */
@container (width < 340px) {
  .page-vehicle-finder .size-tile {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "media cap"
      "media stock"
      "size  size";
  }

  .page-vehicle-finder .size-tile-stock { margin-inline-start: 0; }
}

.page-vehicle-finder .size-tile-mark .brand-logo-img { width: 100%; max-height: 14px; height: auto; object-fit: contain; filter: var(--color-logo-filter); }
.page-vehicle-finder .size-tile-mark .brand-badge { display: flex; align-items: center; min-width: 0; }
.page-vehicle-finder .size-tile-mark .brand-badge-initials { display: none; }
.page-vehicle-finder .size-tile-mark .brand-badge-name {
  overflow: hidden;
  color: var(--color-on-bone);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page-vehicle-finder .size-tile-cap {
  grid-area: cap;
  color: var(--color-text-soft);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
}

html[lang="ar"] .page-vehicle-finder .size-tile-cap { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

/* justify-self, not the default stretch: the size is a dir="ltr" island, so a box stretched across
   the area aligned its digits to the box's own LEFT and the Arabic build put the size at the far
   end of the tile from its own picture. Shrunk to content it sits on the tile's inline-start in
   both languages. */
.page-vehicle-finder .size-tile-size {
  grid-area: size;
  justify-self: start;
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono-size);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.page-vehicle-finder .size-tile-stock {
  grid-area: stock;
  margin-inline-start: auto;
  color: var(--color-text-soft);
  font-size: var(--fs-caption);
}

/* The factory size is the answer; an alternate is context. The board says exactly that with one
   bone plate at the head of the panel and hairline rows under it. */
.page-vehicle-finder .size-tiles > .size-tile:first-child {
  border-color: var(--color-bone);
  background: var(--color-bone);
  color: var(--color-on-bone);
}

.page-vehicle-finder .size-tiles > .size-tile:first-child :is(.size-tile-cap, .size-tile-stock) { color: var(--color-muted-on-bone); }

.page-vehicle-finder .size-tile:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .page-vehicle-finder .size-tile:hover { border-color: var(--color-accent); color: var(--color-accent); }
}

.page-vehicle-finder .size-tiles > .size-tile:first-child:focus-visible {
  border-color: color-mix(in srgb, var(--color-bone) 86%, var(--color-accent));
  background: color-mix(in srgb, var(--color-bone) 86%, var(--color-accent));
  color: var(--color-on-bone);
}
@media (hover: hover) and (pointer: fine) {
  .page-vehicle-finder .size-tiles > .size-tile:first-child:hover {
    border-color: color-mix(in srgb, var(--color-bone) 86%, var(--color-accent));
    background: color-mix(in srgb, var(--color-bone) 86%, var(--color-accent));
    color: var(--color-on-bone);
  }
}

/* --- what the shop can do with this size tonight (ruling R1) ------------------------------- */
/* search.js has written data-stock on every tile in four states since the ruling and no
   stylesheet has ever read it, so four different answers rendered as one. R1 is that stock moves
   the CALL TO ACTION and never the answer, so the tile itself does not move: the caption, the
   size and the link are identical in all four states and only the availability line changes.
   It changes on ONE axis - the same availability plate the /tyres/<size>/ card already carries
   (section 13), stepped down four times:

     in       filled green + the 8px dot        it is on the shelf, priced, tonight
     pattern  the same green, hollow            we hold the size, the pattern is settled at the counter
     order    the copper of "Call to confirm",  correct for the car, one to three days away
              hollow
     unknown  no plate at all                   the feed has not answered and we will not guess

   Nothing here is greyed, struck through or disabled. An order is a sale with a wait. */
.size-tile[data-stock] .size-tile-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-11);
  padding: 4px var(--space-3);
  border: var(--border-width) solid transparent;
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.2;
}

.size-tile[data-stock="in"] .size-tile-stock {
  border-color: var(--color-green-ground);
  background: var(--color-green-ground);
  color: var(--color-open);
}

/* The 8px dot is the one round thing in the system and it marks the one state that means tonight. */
.size-tile[data-stock="in"] .size-tile-stock::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.size-tile[data-stock="pattern"] .size-tile-stock { border-color: var(--color-open); color: var(--color-open); }
.size-tile[data-stock="order"] .size-tile-stock { border-color: var(--color-accent); color: var(--color-accent); }
.size-tile[data-stock="unknown"] .size-tile-stock { padding-inline: 0; color: var(--color-text-soft); }

/* The factory row is a bone plate. Both hollow plates are unreadable on it - the green measures
   1.65:1 and the copper 2.96:1 - and the plate's own declared copper is --color-link-on-bone at
   4.88:1. The filled green carries its own ground, so it is the one state that does not move. */
/* The first-child rule paints the caption and the stock line --color-muted-on-bone so they read
   on the bone plate; it also reached inside the one state that brings its own ground, and left
   the muted-on-bone step on the green ground at 1.63:1 - the green plate was there and its words
   were not. */
.size-tiles > .size-tile:first-child[data-stock="in"] .size-tile-stock { color: var(--color-open); }

.size-tiles > .size-tile:first-child[data-stock="pattern"] .size-tile-stock {
  border-color: var(--color-muted-on-bone);
  color: var(--color-on-bone);
}

.size-tiles > .size-tile:first-child[data-stock="order"] .size-tile-stock {
  border-color: var(--color-link-on-bone);
  color: var(--color-link-on-bone);
}

.size-tiles > .size-tile:first-child[data-stock="unknown"] .size-tile-stock { color: var(--color-muted-on-bone); }

/* R2's two labels. The Gulf row is the answer for this car, so it is the one badge in the tag row
   that is filled; a global row that a Gulf row also covers is kept, labelled and left hairline. */
.fit-tags .badge.badge-spec { font-weight: 600; }
.fit-tags .badge.badge-spec-gcc { border-color: transparent; background: var(--color-accent-soft); color: var(--color-link); }
.fit-tags .badge.badge-spec-global { border-color: var(--color-chip-border); color: var(--color-text-muted); }
.fit-tags .badge.badge-spec-alt { border-color: var(--color-chip-border); color: var(--color-text-soft); }

.page-vehicle-finder .answer-size-car {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title);
  line-height: 1.15;
}

.page-vehicle-finder .answer-miss .answer-size-car { color: var(--color-danger); }

/* --- the call. Ruling R1's second half (founder, 2026-09-16). -------------------------------
   "if the tyre isn't there in stock or has ever been in the shop, we get the correct size and tell
   them to call." R1 and S16 built the first half: the size is shown whatever the shelf says, and
   the plate on the tile says which of the four things the shelf says. What no state did was END in
   a phone call - `order` promised "1 to 3 days" and then handed the driver a link to another page.

   The block below is where three of the four states now end. It is the only element on the answer
   that is not a link to somewhere else on this site, so it is the only one that may be loud. The
   founder chose it on 2026-09-16 over a hairline panel with one row per short size; that panel
   answered "which of his four sizes is the short one", a question the never-say-we-dont-have-it
   ruling had already deleted, so volume was all it had left to argue and it lost. DESIGN.md S17.

   Copper is the site's one accent and this is the one place it is a GROUND rather than a stroke:
   the plate is the "Call to confirm" chip at the scale of a section. Ink on copper is 5.57:1, the
   pair --color-primary / --color-primary-contrast already declares; nothing on the plate is tinted,
   because a mid tone between ink and copper is where that ratio goes. Hierarchy on it is carried by
   face and weight - display, text, mono - not by size alone. */
.dial {
  margin-block-start: var(--space-10);
  padding: var(--space-9) var(--space-9) var(--space-10);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* The page's focus ring is copper, which is this plate's own ground. */
.dial :focus-visible { outline-color: var(--color-text-on-accent); }

.dial-kicker {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
}

html[lang="ar"] .dial-kicker { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

.dial-title {
  margin: var(--space-5) 0 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-display-title);
}

html[lang="ar"] .dial-title { font-family: var(--font-arabic-display); letter-spacing: 0; }

/* The one string on this block that may never wrap and may never be paraphrased: it is what the
   driver reads down the phone. Mono, lining figures, its own line. */
.dial-size {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-mono-size);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.dial-call-label { min-width: 0; }

.dial-number {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-mono-row);
  letter-spacing: var(--tracking-mono-tight);
  line-height: 1;
}

/* A dialled number is printed as well as dialled. On a desktop a tel: link is a dead end unless the
   number is on the screen, and the founder's sentence ends at a phone call, not at a protocol. The
   face is restated rather than inherited for the reason .notfound-call-number gives: Arabic hands
   every .button the Cairo display cut, and a phone number keeps its Latin face in both languages. */
html[lang="ar"] .dial-number { font-family: var(--font-mono); }

.dial .dial-label {
  margin: var(--space-10) 0 var(--space-5);
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
}

html[lang="ar"] .dial .dial-label { font-family: var(--font-arabic); }

.dial .dial-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-9);
  margin: 0;
}

.dial .dial-size { font-size: var(--fs-mono-md); }

.dial-fitting { display: grid; gap: var(--space-4); }
.dial-fitting .dial-size { white-space: nowrap; }
.dial-axle { font-family: var(--font-text); font-size: var(--fs-body); }
html[lang="ar"] .dial-axle { font-family: var(--font-arabic); }

.dial-option + .dial-option {
  margin-block-start: var(--space-9);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-width) solid currentColor;
}

.dial .dial-promise {
  margin: var(--space-7) 0 0;
  max-width: 44ch;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

html[lang="ar"] .dial .dial-promise { font-family: var(--font-arabic); }

.dial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-9);
}

/* The dial is the inverse of the plate it sits on: the deepest ink the palette holds, which is the
   one surface that can be louder than a full copper ground without adding a second accent. */
.dial .dial-call {
  flex: 1 1 15rem;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 56px;
  padding-inline: var(--space-7);
  background: var(--color-ink-deep);
  color: var(--color-bone);
}

@media (hover: hover) and (pointer: fine) {
  .dial .dial-call:hover { background: var(--color-bg); }
}

.dial .dial-wa {
  flex: 1 1 12rem;
  min-height: 56px;
  border-color: var(--color-text-on-accent);
  color: var(--color-text-on-accent);
}

.dial .dial-wa:focus-visible {
  background: var(--color-text-on-accent);
  color: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
  .dial .dial-wa:hover {
    background: var(--color-text-on-accent);
    color: var(--color-accent);
  }
}

@media (min-width: 64em) {
  .dial { padding: var(--space-10) var(--space-10) var(--space-19); }
  .dial .dial-size { font-size: var(--fs-mono-lg); }
}

/* --- the car we have no size for at all: what he does about it, in the block. ---------------- */
/* The three ways out used to be three links in a row, and the third of them - "Search by size" -
   sent a driver who is standing next to his own tyre to a different page to type what he can see.
   It is a field here instead, under the call and the photograph, and it is the only control on the
   site that takes a free-typed size. An unreadable string is refused out loud: R3-reversed says we
   never guess a size, and that holds for a size he typed as much as for one a source implied. */
.gap-type { margin-block-start: var(--space-10); }

.gap-type-label {
  display: block;
  margin-block-end: var(--space-5);
  color: var(--color-text-soft);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

html[lang="ar"] .gap-type-label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

.gap-type-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-4); }

.gap-type-input {
  flex: 1 1 10ch;
  min-width: 0;
  max-width: 15ch;
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-input-border);
  border-radius: 0;
  background: var(--color-input-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono-size);
  line-height: 1;
}

.gap-type-input:focus { border-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .gap-type-input:hover { border-color: var(--color-accent); }
}
.gap-type-input[aria-invalid="true"] { border-color: var(--color-danger); }

.gap-type-go {
  flex: 0 0 auto;
  min-height: 56px;
  /* .button ships a transparent border and no ground, so a <button> without one of the plate
     classes falls back to the browser grey. It is the hairline register .button-secondary draws. */
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.gap-type-go:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .gap-type-go:hover { border-color: var(--color-accent); color: var(--color-accent); }
}

.gap-type-hint {
  margin: var(--space-5) 0 0;
  color: var(--color-text-faint);
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.gap-type-error {
  margin: var(--space-4) 0 0;
  max-width: 46ch;
  color: var(--color-danger);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

/* FOUNDER-APPROVED, 2026-09-16, and the note is the whole of the approval: a strip of sizes under
   a car's name is a fitment claim unless it says in his own words that it is not one. It takes the
   .nearest register it is a sibling of, and the note sits ABOVE the chips, not under them, because
   a caution read after the chips have been read is a caption on a claim already made. */
.rim-strip {
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-7);
  border-block-start: var(--border-width) solid var(--color-border);
}

.rim-strip-note {
  margin: var(--space-4) 0 var(--space-6);
  max-width: 46ch;
  color: var(--color-text-soft);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.rim-strip .nearest-title { margin-block-end: 0; }

/* The second place a size is written. The tyre drawing is the same object /size-guide/ draws, at a
   column's scale, and it sits above the car so the two read in the order a driver meets them. */
.page-vehicle-finder .placard-tyre { display: block; margin-block-end: var(--space-7); }
.page-vehicle-finder .placard-aside .sidewall-note + .sidewall-note { margin-block-start: var(--space-4); }

/* --- the drawing. -----------------------------------------------------------------------------
   The board's one warm object on this page is a copper line-drawing of a car, above the cascade.
   This repo has no car asset and a restyle does not add one - but the markup already holds a
   better version of the same thing: the placard diagram, which is a car AND says where the size is
   written down, which is the one thing a size page can show on a sidewall and a car page cannot.
   So the bone plate comes off it and it is drawn the board's way, copper stroke on the page ground.
   --color-diagram-fill and --color-diagram-callout are re-pointed locally at tokens that already
   exist; no literal is typed and tokens.css is not touched. */
.page-vehicle-finder .search-results > .sidewall {
  --color-diagram-fill: transparent;
  --color-diagram-callout: var(--color-accent);
  margin: var(--space-10) 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-accent);
}

.page-vehicle-finder .placard-aside svg { max-width: 300px; margin-inline: 0; }

.page-vehicle-finder .sidewall-title {
  margin-block-end: var(--space-6);
  color: var(--color-text-soft);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
}

html[lang="ar"] .page-vehicle-finder .sidewall-title { font-family: var(--font-arabic); font-weight: 700; letter-spacing: 0; text-transform: none; }

.page-vehicle-finder .sidewall-note,
.page-vehicle-finder .sidewall .size-note {
  max-width: 46ch;
  color: var(--color-text-muted);
}

.page-vehicle-finder .sidewall .size-note a { color: var(--color-link); }

/* --- the empty state. -------------------------------------------------------------------------
   Neither board draws a counter or a drawn tyre here, the same answer home and /size/ already got.
   The common sizes stay: they are the only way out of an empty cascade for a driver whose car is
   not in the table, and they retire the moment real results arrive. */
.page-vehicle-finder .search-empty .odometer { display: none; }

.page-vehicle-finder .search-common { margin-block-start: var(--space-12); max-width: none; }

.page-vehicle-finder .search-common-label {
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-border);
  color: var(--color-text-soft);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

html[lang="ar"] .page-vehicle-finder .search-common-label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

.page-vehicle-finder :is(.search-common, .nearest) .chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

.page-vehicle-finder :is(.search-common, .nearest) .chip {
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--space-5);
  border-color: var(--color-chip-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--fs-chip);
  letter-spacing: 0;
}

@media (hover: hover) and (pointer: fine) {
  .page-vehicle-finder :is(.search-common, .nearest) .chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
}

/* --- the way out. The pill was the last --radius-pill call site on the page; the board's own
   register for this is a hairline row with the way out at the far end. Same as /size/. --------- */
.page-vehicle-finder .mode-switch {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5) var(--space-9);
  margin-inline: var(--edge);
  padding-inline: 0;
  border-block-start: var(--border-width) solid var(--color-border);
}

.page-vehicle-finder .mode-switch-link {
  min-height: 0;
  gap: var(--space-4);
  padding-inline: 0;
  border-radius: 0;
  background: none;
  color: var(--color-link);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .page-vehicle-finder .mode-switch-link:hover { background: none; color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.3em; }
}

/* ---------- 1280: /vehicle/, board Site-Vehicle-1280 ------------------------------------- */
@media (min-width: 64em) {
  /* No photograph height and no layered composition: the question and the lede are a column in
     flow on the content column every other section runs on. */
  .page-vehicle-finder .hero-card {
    height: auto;
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    padding-block-start: clamp(28px, 3.2vw, 48px);
  }

  .page-vehicle-finder .hero-title,
  .page-vehicle-finder .hero-lede { inset-block-start: 0; width: auto; }

  .page-vehicle-finder .hero-title { max-width: 16ch; }

  

  /* The vehicle finder is four equal inputs. Its enclosing hero can be inset for its copy,
     so size the control row against the viewport-safe page width and centre it independently. */
  .page-vehicle-finder .finder {
    width: calc(100vw - 2 * var(--gutter));
    max-width: calc(100vw - 2 * var(--gutter));
    /* The hero copy has a narrower measure; the operational four-field control does not.
       Bleed it to the page gutters from either writing direction, then size columns within it. */
    margin-inline: calc(50% - 50vw + var(--gutter));
  }

  

  
  
  
  

  

  

  

  /* --- the band: the panel on the inline start, the drawing and its note beside it. --- */
  /* min-content rows on purpose: the drawing spans all three, and on `auto` rows a spanning item
     hands its spare height back to the tracks it crosses - which opened a 70px hole between the
     panel's caption and its copy, and left the panel standing 290px tall around 80px of text.
     Column 1 is the taller column in every state this page has, empty or populated, so the span
     never overflows the row set. */
  .page-vehicle-finder .search-results {
    display: grid;
    grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
    grid-template-rows: min-content min-content min-content;
    column-gap: clamp(24px, 3vw, 48px);
    align-content: start;
    padding-block: var(--space-12) var(--space-18);
  }

  .page-vehicle-finder .search-results > .results-head { grid-column: 1; grid-row: 1; margin-block-start: 0; }
  .page-vehicle-finder .search-results > .results-body { grid-column: 1; grid-row: 2; }
  .page-vehicle-finder .search-results > .search-empty { grid-column: 1; grid-row: 3; }

  .page-vehicle-finder .search-results > .sidewall {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    width: auto;
    margin: 0;
  }

  .page-vehicle-finder .search-results .results-empty { max-width: 42ch; }
  .page-vehicle-finder .search-common { margin-block-start: var(--space-12); max-width: none; }
  .page-vehicle-finder .placard-aside svg { max-width: 340px; }

  .page-vehicle-finder .mode-switch { margin-inline: var(--edge); padding-inline: 0; }
}

/* ============================================================================================ */
/* the size guide, /<lang>/size-guide/. Component Site-SizeGuide.dc.html; boards               */
/* Site-SizeGuide-{390,1280}-{en,ar}.png. S7.                                                   */
/*                                                                                               */
/* The board draws a much shorter page than this one: H1, an intro line, a five-value plate      */
/* with a "Search now" link, the two lookup tables, one closing paragraph. This repo's markup    */
/* carries three sections with no counterpart on the board — the sidewall diagram with its       */
/* four-item explanation list, the "where it is on the car" placard, and the inline finder — and  */
/* two paragraphs the board draws that this repo's i18n has no key for (the intro line under H1,  */
/* and the closing "never go below the load or speed" line). Deleting markup or inventing copy is */
/* outside a styling slice (pages-rules.md: the one sanctioned mechanism change this wave is the  */
/* home hero), so the extra sections stay, styled in the system's own register, and both gaps are */
/* reported rather than filled. See DESIGN.md "S7".                                              */
/* ============================================================================================ */

.page-size-guide .page-head h1 {
  font-size: var(--fs-h1-page);
  line-height: var(--lh-h1-page);
}

/* ---- the sidewall diagram + its four-item legend ------------------------------------------- */
.page-size-guide .guide-sidewall { padding-block-end: var(--space-9); }

.page-size-guide .guide-figure { margin: 0 0 var(--space-8); }
/* The size as the sidewall prints it, in place of the drawn tyre: display cut, each part carrying
   its 1-4 key to the list below. */
.guide-code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  font-family: var(--font-latin-display);
  font-size: var(--fs-guide-code);
  line-height: 1;
  color: var(--color-text);
}
.guide-code .guide-size > span { display: inline-flex; align-items: flex-start; gap: var(--space-2); }
.guide-code .guide-size, .guide-code .guide-rating { display: inline-flex; white-space: nowrap; }
.guide-code .guide-size { align-items: baseline; }
.guide-code .guide-size > span:last-child { margin-inline-start: var(--space-2); }
.guide-code .guide-rating { gap: 0; }
.guide-code .guide-rating a { min-inline-size: var(--space-15); color: inherit; text-decoration: underline; }
.guide-code-dot { font-size: var(--fs-guide-dot); align-self: center; }
.guide-code .callout-key { width: var(--space-6); height: var(--space-6); font-family: var(--font-text); font-size: var(--fs-caption); line-height: 1; }

/* The same rhythm the finder's readout takes: one fact per row, the key set large and red in its
   own column, the rows separated by hairlines rather than by air. The key is not decoration — each
   number is drawn on the diagram above, so the reader uses it to find the part being described. */
.page-size-guide .guide-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-size-guide .guide-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-block-end: var(--border-width) solid var(--color-border);
}

.page-size-guide .guide-list li:first-child { padding-block-start: 0; }
.page-size-guide .guide-list li:last-child { border-block-end: 0; }

.page-size-guide .guide-list .callout-key {
  width: auto;
  height: auto;
  min-width: var(--guide-key-width);
  margin-block-start: 0;
  background: none;
  color: var(--color-accent);
  font-family: var(--font-latin-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-lg);
  line-height: 1;
  letter-spacing: var(--tracking-display-hero);
}

.page-size-guide .guide-list h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-title-s);
  line-height: var(--lh-guide-heading);
}

.page-size-guide .guide-list p {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The key points at a marker on the drawing, so it is a legend, not cosmetic numbering — same
   answer D3 gave the vehicle finder's own callout-key. */
.page-size-guide .callout-key { flex-shrink: 0; margin-block-start: var(--space-1); }

/* ---- the two lookup tables ------------------------------------------------------------------ */
.page-size-guide .guide-tables {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding-block-end: var(--space-10);
}

.page-size-guide .guide-table h2 {
  padding-block-end: var(--space-3);
  border-block-end: var(--space-1) solid var(--color-text);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.page-size-guide .size-note {
  margin-block: var(--space-4) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

/* Block, not flex: column-count below needs a multicol formatting context, which a flex container
   never establishes. Each row is its own flex line instead. */
.page-size-guide .lookup-grid {
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
}

.page-size-guide .lookup-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-block-end: var(--border-width) solid var(--color-border);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--fs-mono-body);
  letter-spacing: var(--tracking-display);
}

.page-size-guide .lookup-grid dd { margin: 0; color: var(--color-text-soft); text-align: end; }
.page-size-guide .lookup-grid dd span { font-family: var(--font-family); font-size: var(--fs-meta); }

/* ---- where the size is on the car ------------------------------------------------------------ */
.page-size-guide .guide-where { padding-block-end: var(--space-10); }
.page-size-guide .diagram-placard { max-width: var(--guide-diagram-width); margin-inline: auto; }
.page-size-guide .diagram-placard svg { display: block; width: 100%; height: auto; }
.page-size-guide .diagram-placard figcaption {
  margin-block-start: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  text-align: center;
}

/* ---------- 1280 -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .page-size-guide .guide-sidewall {
    display: grid;
    grid-template-columns: minmax(0, var(--guide-diagram-width)) 1fr;
    gap: var(--space-10);
    align-items: start;
  }

  .page-size-guide .guide-figure { margin: 0; }

  /* Board's own two-up: Load index beside Speed rating. The load list runs 50 rows against the
     board's curated 6 — real ETRTO data, not a shortened example — so it takes a second internal
     column here or it is a single column taller than the whole rest of the page. */
  .page-size-guide .guide-tables { flex-direction: row; gap: var(--space-10); }
  .page-size-guide .guide-table { flex: 1 1 0; }
  .page-size-guide .guide-tables .lookup-grid { column-count: 2; column-gap: var(--space-8); }
  .page-size-guide .guide-tables .lookup-grid > div { break-inside: avoid-column; }
}

/* ============================================================================================ */
/* g7 unit 4 — the services index and the eight service pages.                                   */
/* Mobile first, like every block above: the base rules are 390 and the min-width:64em block at   */
/* the foot is 1280. Everything is scoped to .page-services-index / .page-services. .page-head,   */
/* .lede, .crumb, .answer-actions, .button, .chip and .cta-band are shapes other units already     */
/* built and own (base.css and this file's unit 5); this block adds only what is particular to    */
/* these two pages, rather than re-declaring shapes that already resolve correctly.                */
/*                                                                                                */
/* Board note (Site-Services.dc.html, Site-Battery.dc.html): both boards draw every service as a  */
/* small copper line icon — the index tiles carry no photograph at all, and the detail hero is a   */
/* large version of the same icon, not a figure. This repo's markup and build.mjs carry a          */
/* photograph on both instead, per the founder's 2026-09-13 ruling that the Battery and Oil        */
/* buttons must show a photo. That is a page-structure question (which medium leads, icon sizing   */
/* and position), not a styling one, so it is not resolved here — same discipline D3 was held to   */
/* on /vehicle/'s photograph. The photo markup is kept and restyled in the dark register below;    */
/* geometry (grid columns, spacing, type scale) follows the board as closely as a photo-led tile   */
/* allows. Reported in DESIGN.md rather than decided. The index's two labelled groups (tyre/car)   */
/* are also kept for the same reason: the board draws one flat grid with no group headings.        */
/* ============================================================================================ */

/* ---------- the head both pages share ------------------------------------------------------ */
.page-services-index .page-head,
.page-services .page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-7) var(--space-8);
}

.page-services-index .page-head h1 { font-size: var(--fs-h1-page); line-height: var(--lh-h1-page); }

/* --fs-h1 aliased the hero ramp until S7 re-pointed it at the page ramp (tokens.css, CARRY); this
   page needs its own explicit step regardless of what the generic alias resolves to, the same
   belt-and-braces S7 already applied on /size-guide/. */
.page-services .page-head h1 { font-size: var(--fs-h1-service); line-height: var(--lh-h1-service); }

.page-services-index .lede,
.page-services .lede {
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body-lead);
}

/* ---------- /services/ : one flat grid of line icons ---------------------------------------- */
/* Founder ruling 2026-09-14 and what both Site-Services layouts draw: eight tiles, one grid, no
   group headings, no photographs. The grid is ruled rather than gapped — the container draws the
   top and inline-start hairlines, each tile the bottom and inline-end — so the eight cells share
   one continuous 1px lattice at any column count, which is the board's own construction. */
.services-index {
  padding-block-end: var(--space-10);
}

.service-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: var(--border-width) solid var(--color-border);
  border-inline-start: var(--border-width) solid var(--color-border);
}

/* The tile is one object: the mark, the name, one line pinned to the foot. No button — the band
   at the foot of the page carries the action for every row on it. */
.service-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 112px;
  padding: var(--space-5) var(--space-5) var(--space-12);
  border-block-end: var(--border-width) solid var(--color-border);
  border-inline-end: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

/* One mark, one size rule, three call sites: the index tile, the home quick row and the hero on a
   service page (which only scales it up). Copper stroke on the page ground, never a plate. */
.service-mark {
  display: block;
  flex: 0 0 auto;
  color: var(--color-accent);
}

.service-mark svg {
  display: block;
  width: 34px;
  height: 34px;
}

.service-tile-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
}

.service-tile-body strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  font-size: var(--fs-body-md);
  line-height: 1.15;
  color: var(--color-text);
}

html[lang="ar"] .service-tile-body strong { font-family: var(--font-arabic-display); font-weight: 800; }

/* Multiline Arabic titles need the Arabic display leading, including the CTA heading whose
   generic plain-page rule otherwise applies Latin leading. */
html[lang="ar"] .page-services-index .service-tile-body strong,
html[lang="ar"] .page-services-index .cta-band h2 { line-height: var(--lh-ar-display); }

/* The secondary action sits on ink. Its normal border and hover fill must use that ground,
   rather than the generic paper-button pair (which leaves a white label on a pale hover). */
:is(.page-services-index, .page-services) .cta-band .button-secondary { border-color: var(--color-on-ink); }
:is(.page-services-index, .page-services) .cta-band .button:focus-visible { outline-color: var(--color-on-ink); }
@media (hover: hover) and (pointer: fine) {
  :is(.page-services-index, .page-services) .cta-band .button-secondary:hover {
    background: transparent;
    border-color: var(--color-on-ink);
    color: var(--color-on-ink);
  }
}

.service-tile-body > span {
  margin-block-start: auto;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}

/* The lattice is the tile's only edge, so hover cannot move a border without shifting a
   neighbour's line: the mark and the name take the copper instead. */
.service-tile:focus-visible { background: var(--color-bg-raised); }
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover { background: var(--color-bg-raised); }
}
.service-tile:focus-visible .service-tile-body strong { color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .service-tile:hover .service-tile-body strong { color: var(--color-accent); }
}

/* ---------- /services/<slug>/ : the head ---------------------------------------------------- */
.page-services .service-head { gap: var(--space-5); }

.service-head-copy { display: flex; flex-direction: column; gap: var(--space-5); }

/* At 390 the board stands the mark on its own above the headline, 72px, no plate and no box. */
.service-figure { margin: 0; }

.service-mark-hero svg { width: 72px; height: 72px; }

/* The icons carry stroke-width as a presentation attribute, on a <g> in five of the eight and on
   each shape in the other three, so inheritance alone cannot thin them: the attribute selector
   reaches both shapes. The board draws the mark hairline-thin once it is this big. */
.service-mark-hero svg [stroke-width] { stroke-width: 1.2; }

.service-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* The time chip (header) and the brands chips (below) both use the shared .chip-fact, whose own
   rule (unit 5, owned by S8 — CARRY.md) paints a bone plate with the body's --color-text label:
   this system's own bone, so the label is invisible. Out of this unit's sections to fix at the
   source; scoped here so this page is not silently broken while that fix is pending elsewhere. */
.page-services .chip-fact { color: var(--color-on-bone); }

/* ---------- /services/<slug>/ : the body ---------------------------------------------------- */
.service-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding-block-end: var(--space-9);
}

.service-main { display: flex; flex-direction: column; gap: var(--space-5); }

/* The board's own "Batteries we fit" heading: bold caption, a 2px rule the full width under it —
   the same ledger/rim-label pattern D3 and S7 already used for a heading over a row of facts.

   The size and weight came off on 2026-09-15: --fs-body-md with a raw font-weight: 700 (a weight
   that is in no token) rendered these H2s lighter than the H3s underneath them, and inverted the
   hierarchy on all eight pages. /contact/ implements the same heading+rule pattern by adding only
   the padding and the border and letting the base H2 carry --fs-title-lg at --weight-display;
   this now does the same. */
.service-main > h2,
.service-when > h2,
.service-faq > h2,
.service-related > h2 {
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-text);
  color: var(--color-text);
}

.service-main > ul + h2 { margin-block-start: var(--space-5); }

/* Two lists, two registers: what we do to the car reads as copper ticks, the symptoms read as a
   ruled column, so the page never shows the same list shape twice running. */
.check-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }

.check-list li {
  position: relative;
  padding-inline-start: var(--space-8);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.check-list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.35em;
  inset-inline-start: 0;
  width: 12px;
  height: 7px;
  /* A tick is a drawn mark, not a direction: physical borders so it keeps its shape on /ar/,
     placed with a logical inset so it still sits on the reading edge. */
  border-left: var(--border-strong) solid var(--color-accent);
  border-bottom: var(--border-strong) solid var(--color-accent);
  transform: rotate(-45deg);
}

.page-services .service-brands { margin-block-start: 0; line-height: var(--lh-body); }

/* The Latin heading and chip leading crowds Arabic when these lines wrap on a phone. */
html[lang="ar"] .page-services :is(h2, h3) { line-height: var(--lh-ar-display); }
html[lang="ar"] .page-services .service-time .chip { line-height: var(--lh-ar-display); }

.service-when {
  padding: var(--space-7);
  border: var(--border-width) solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
}

.service-when > h2 { margin-block-end: var(--space-5); }

.symptom-list { display: flex; flex-direction: column; }

.symptom-list li {
  padding-block: var(--space-4);
  border-block-start: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.symptom-list li:first-child { border-block-start: 0; padding-block-start: 0; }

/* ---------- the questions, and what is often done with this --------------------------------- */
.service-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block-end: var(--space-9);
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-end: var(--space-6);
  border-block-end: var(--border-width) solid var(--color-border);
}

.faq-item:last-child { border-block-end: 0; padding-block-end: 0; }

.faq-item h3 { font-size: var(--fs-body-md); line-height: 1.25; color: var(--color-text); }

.faq-item p {
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.service-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block-end: var(--space-9);
}

.related-list { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.related-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding-inline: var(--space-6);
  border: var(--border-width) solid var(--color-chip-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-chip);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .related-list a:hover { border-color: var(--color-accent); color: var(--color-accent); }
}
.related-list svg { width: 18px; height: 18px; }

/* ---------- the band at the foot ------------------------------------------------------------ */
/* .cta-band itself, its heading colour and its two button colours are the shared unscoped rule
   in unit 5 below (already built, already fixed for the blank-rectangle fault D1b found) — no
   page override needed. */

/* ---------- 1280 ---------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .page-services-index .page-head,
  .page-services .page-head { padding-block: var(--space-9); }

  /* The head splits the way Site-Battery's does: the copy takes the measure and the mark moves
     out beside it onto its own raised 4:3 plate, centred, at the board's own 52% of the plate. */
  .page-services .service-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--space-10);
    align-items: start;
  }

  .page-services .service-head > .crumb { grid-column: 1; }
  .service-head-copy { grid-column: 1; gap: var(--space-7); }

  .service-figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-raised);
  }

  .service-mark-hero svg { width: 52%; height: auto; }
  .service-mark-hero svg [stroke-width] { stroke-width: 0.9; }

  .service-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  .service-tile { min-height: 200px; gap: var(--space-12); padding: var(--space-14) var(--space-7) var(--space-7); }
  .service-tile .service-mark svg { width: 44px; height: 44px; }
  .service-tile .service-mark svg [stroke-width] { stroke-width: 1.4; }

  /* The service page splits: the two paragraphs and the tick list take the measure, the symptom
     column sits beside them as its own object, as the board's own two-column split draws it. */
  .service-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--space-10);
    align-items: start;
  }

  .service-when { position: sticky; inset-block-start: var(--space-9); }

  .faq-item { max-width: var(--measure); }
}

/* ---------- 15. contact, about and the not-found page (unit 5) --------------------------- */
/* Three pages, one job each: reach us, know us, get unstuck. They take the shared .page layer
   for their type and this block for their furniture. Everything is scoped to the three page ids,
   because the remaining routes are rebuilt in their own units and must not move under them.
   Section rhythm (DESIGN.md 5): bone panel -> open map -> hairline list -> bone panel. */

.page-contact .page-head,
.page-about .page-head,
.page-404 .page-head { padding-block-start: var(--space-9); }

.page-contact .lede,
.page-about .lede,
.page-404 .lede {
  max-width: 42ch;
  color: var(--color-text-muted);
  font-family: var(--font-text);
  font-size: var(--fs-body-lead);
  line-height: var(--lh-body-lead);
}

/* ---- contact: reach, then where ---------------------------------------------------------- */
/* Board note (Site-Contact.dc.html): the reach block draws no card. Same answer D1b gave /size/'s
   help panel (pages.css:1080-ish, "the help panel loses its bone ground rather than being
   recoloured") -- the delivery has no pale panel inside the dark page, so the bone ground goes
   here too, rather than patching text on a plate the board never draws. That also discharges the
   CARRY.md finding against this block (text-muted on bone, the "Eid and holiday hours may
   differ" note) at the root instead of a colour swap. */
.contact-grid { display: grid; gap: var(--space-10); align-items: start; }

/* No closing rule: the list's last row already draws one, and a second hairline under the address
   read as a stray edge with nothing beneath it. The grid gap separates the two columns. */
.contact-reach { padding-block-end: var(--space-8); }

/* The two columns are runs of heading + block; the opening heading of each gets the heading+rule
   pattern the rest of this wave uses for a section start (D3, S7's service-main > h2). */
.page-contact .contact-reach h2,
.page-contact .contact-where h2 { margin-block-start: var(--space-9); }
.page-contact .contact-reach h2:first-child,
.page-contact .contact-where h2:first-child {
  margin-block-start: 0;
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-text);
}

/* Reach us: a hairline list, not a card. Every row is the board's own anatomy -- a quiet caption
   over the value, one word of action at the end -- measured off Site-Contact.dc.html:70-89:
   84px row (64 on the phone), 1px hairline, caption 11px, value 32px mono for the numbers and
   24px display for the words, action 17px display in the accent, the tail note 13px muted and
   end-aligned. The dialled numbers are printed here now: the board shows them, and site.json's
   derived site.phone_display / site.whatsapp_display are the one source the hrefs also read. */
.reach-list {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-8);
  border-block-start: var(--border-width) solid var(--color-border);
}

.reach-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-7);
  min-height: 64px;
  padding-block: var(--space-5);
  border-block-end: var(--border-width) solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

/* A row is the whole target, so it owns the hover and the focus ring rather than the word at its
   end -- a 44px-tall link whose only hit area was "Call" is what the board's row shape replaces. */
@media (hover: hover) and (pointer: fine) {
  a.reach-row:hover { background: var(--color-surface); }
}
@media (hover: hover) and (pointer: fine) {
  a.reach-row:hover .reach-action { color: color-mix(in srgb, var(--color-accent) 84%, var(--color-bone)); }
}
a.reach-row:focus-visible { outline-offset: -2px; }

.reach-note {
  display: block;
  font-size: var(--fs-meta);
  line-height: 1.3;
  color: var(--color-text-soft);
}

.reach-value {
  display: block;
  margin-block-start: var(--space-3);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-mono-sm);
  line-height: 1;
  letter-spacing: var(--tracking-mono-tight);
}

/* The hours row's value is words, not digits, so it takes the display face the board gives it. */
.reach-value-words {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-lg);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

html[lang="ar"] .reach-value-words { font-family: var(--font-arabic-display); font-weight: 800; }

.reach-action {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-s);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}

html[lang="ar"] .reach-action { font-family: var(--font-arabic-display); font-weight: 800; }

/* The board's tail note is four words; ours is a sentence, so it is capped tight enough on the
   phone that the hours value still fits its own line beside it. */
.reach-aside {
  max-width: 14ch;
  font-size: var(--fs-meta);
  line-height: 1.3;
  text-align: end;
  color: var(--color-text-soft);
}

/* ---- the map: the keyless Google embed, no key and no library ---------------------------- */
/* De-boxed: the board draws the map as a bare dark plate with no stroke and no radius, and the
   directions bar sits 2px under it as one object (Site-Contact.dc.html:94-102). */
.map-frame {
  margin-block-start: var(--space-5);
  border: 0;
  border-radius: 0;
  background: var(--color-surface-strong);
  overflow: hidden;
}

.map-embed {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

/* The address reads at the foot of the reach column, where the board puts it: the street in the
   text colour, the rest of the line quiet. Split now, not faked — site.json carries one string
   with one documented separator in it and build.mjs derives site.address_html around it, so the
   bold half and the quiet half are two slices of a single source. */
.page-contact .location-address {
  margin-block-start: var(--space-8);
  max-width: 40ch;
  color: var(--color-text-muted);
  font-size: var(--fs-body-place);
  line-height: var(--lh-body-place);
}

/* Both pages that print the address draw the same split; the rest of the line stays the muted
   body colour it inherits. <strong> is the right element and not only the right weight: the
   street is the part of the line a driver actually navigates by. */
.address-street { color: var(--color-text); font-weight: 600; }

.map-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-block-start: 2px;
}

/* The founder's ruling, said once at full size: this is the biggest control on the page. Board:
   the "Get directions" bar runs the full width of the map column, label first and the arrow at
   the far end -- the markup emits the icon first, so it is re-ordered rather than moved. */
.page-contact .button-directions {
  width: 100%;
  min-height: 60px;
  padding-inline: var(--space-13);
  justify-content: space-between;
  font-size: var(--fs-title-lg);
}

.page-contact .button-directions svg { order: 2; }
.button-directions svg { width: 20px; height: 20px; }

/* ---- the three questions drivers ask ----------------------------------------------------- */
/* Hairline rows, not cards -- and the section start gets the heading+2px rule the rest of this
   page and this wave use, which the part-built pass left on the generic title base rule. */
.page-contact .faq > h2,
.page-contact .callback > h2 {
  padding-block-end: var(--space-3);
  border-block-end: 2px solid var(--color-text);
}

.faq-item { padding-block: var(--space-7); border-block-start: var(--border-width) solid var(--color-border); }
.faq-item:last-child { border-block-end: var(--border-width) solid var(--color-border); }
/* The rows run the content width so their hairlines line up with the heading's rule -- capping the
   item instead left a 2px rule running 230px past the last hairline. The measure it was protecting
   belongs on the answer paragraph, which is the only thing here long enough to need it. (--measure
   is in ch, so the same token resolves ~230px wider on the display face than on the text face; the
   cap has to sit on the text, not on the heading.) */
.page-contact .faq > h2 { margin-block-end: var(--space-7); }
.page-contact .faq-item { max-width: none; }
.page-contact .faq-item p { max-width: var(--measure); }
.page-contact .faq-item h3 { font-size: var(--fs-title-s); line-height: 1.15; }
.page-contact .faq-item p { color: var(--color-text-muted); }

/* ---- the callback form ------------------------------------------------------------------- */
/* The last bone island on this page, and the loudest thing the part-built pass left standing: a
   full-width cream plate with pill inputs, on a page whose board draws no pale panel anywhere.
   Same answer this wave gave the /size/ help panel and the reach block -- the plate goes rather
   than being recoloured, the section sits on the page ground, and the fields become the hairline
   underlines the vehicle finder already uses (D3). No inset of its own: the page shell's
   padding-inline: var(--edge) is the single content line (S3c). */
.callback {
  padding-block-start: var(--space-10);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.page-contact .callback h2 { margin-block-end: var(--space-8); }
.callback-form { display: flex; flex-direction: column; gap: var(--space-6); }
.callback-form .field { display: flex; flex-direction: column; gap: var(--space-3); }

.callback-form label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-faint);
}

html[lang="ar"] .callback-form label { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }

.callback-form input {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-4) 0;
  border: 0;
  border-block-end: var(--border-width) solid var(--color-input-border);
  border-radius: 0;
  background: var(--color-input-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-body);
}

/* The ring stays; the underline is the extra signal, not the replacement for it. */
.callback-form input:focus-visible { outline-offset: 2px; }
.callback-form input:focus { border-block-end-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) {
  .callback-form input:hover { border-block-end-color: var(--color-accent); }
}
.page-contact .callback-form .field-hint { flex: none; margin: 0; color: var(--color-text-faint); font-size: var(--fs-caption); }
.page-contact .callback-form .field-error { margin: 0; color: var(--color-danger); font-size: var(--fs-caption); }

.callback-actions { display: flex; }

/* What comes back after a send: a panel, not a toast. */
.page-contact .answer {
  margin-block-start: var(--space-6);
  padding: var(--space-7);
  border-radius: var(--panel-radius);
  background: var(--color-soft-fill);
}

.page-contact .answer-size {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-s);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
}

html[lang="ar"] .page-contact .answer-size { font-family: var(--font-arabic-display); font-weight: 800; }
.page-contact .answer-text { color: var(--color-text-muted); }
.page-contact .answer-miss .answer-size { color: var(--color-danger); }

/* ---- about ------------------------------------------------------------------------------- */
/* The board's stat strip, and the anatomy D7 could not reach from CSS alone: three cells on a
   1px hairline grid, a mono numeral over a caption. The grid IS the hairline — the container
   paints --color-border and the cells paint the page ground back over it with a 1px gap, so one
   declaration draws every rule between and around the cells and none of them can double up. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--border-width);
  margin-block-start: var(--space-8);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  background: var(--color-border);
  list-style: none;
}

.about-stat { background: var(--color-bg); padding: var(--space-5) var(--space-5); }

.about-stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--tracking-mono-tight);
}

/* The copper slash is the same punctuation-in-a-readout the finder draws between 225 and 45, and
   the same reason it owes no AA on its own: the digits either side of it carry the meaning. */
.about-stat-slash { color: var(--color-accent); }

.about-stat-caption {
  display: block;
  margin-block-start: var(--space-3);
  font-size: var(--fs-meta);
  line-height: 1.3;
  color: var(--color-text-soft);
}
/* CARRY.md, owner S8: a bone plate with the body's --color-text label is bone on bone (the same
   plate-and-label-is-one-token fault D1b fixed on the primary button and D2 on the brand cards).
   --color-on-bone is the fix, unscoped so the services page's chip-fact carries it too. */
.chip-fact { gap: var(--space-3); background: var(--color-bone); color: var(--color-on-bone); }

/* Board (Site-About.dc.html, both widths): the head is a full-bleed photograph masked out to
   nothing behind the headline and the lede — not the inset, rounded, shadowed plate beside the
   copy this repo drew. It is the same mechanism home and /size/ already carry on .hero-weave, and
   the two tokens S1 cut for it have been unused since: --hero-image-opacity-about (0.28) and
   --hero-height-about (560px), over the shared --hero-mask. Pure CSS — the <figure><img> stays
   where it is in the markup.
   Why inset:0 is enough: .page is full-bleed and .page > * carries the single inset (base.css
   "THE PAGE SHELL NEVER INSETS"), so an absolute child of .page-head paints to the viewport edge
   at every width without a wrapper. */
/* The head owns the photograph's height rather than the image owning its own: a fixed 560px image
   under a head that is only 230px tall at 768 put "What we do" and its paragraph on top of a wheel
   — faint, because the mask had already run out, but unmistakably an accident. The head carries
   --hero-height-about as a floor at every width and the figure simply fills it, so the picture can
   never reach the body copy, and the air under the strip on the phone is the board's own. */
.page-about .page-head {
  position: relative;
  isolation: isolate;
  min-height: var(--hero-height-about);
}

.about-figure {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: var(--hero-image-opacity-about);
  mask-image: var(--hero-mask);
  -webkit-mask-image: var(--hero-mask);
}
.about-body { display: grid; gap: var(--space-9); }
.page-about .about-block p { color: var(--color-text-muted); }
.page-about .about-where .location-address { color: var(--color-text-muted); font-size: var(--fs-body-place); line-height: var(--lh-body-place); }
.page-about .about-where .button { margin-block-start: var(--space-3); }
.about-reviews { font-size: var(--fs-chip); }

/* The closing band: the one ink block on the page, so the last thing read is the loudest. */
/* A painted box, not a band: the ground stops at the content line rather than running to the
   viewport edge, so the inset is a margin on the box and the padding inside it stays its own. */
.cta-band {
  margin-inline: var(--edge);
  padding: var(--space-8) var(--space-7);
  border-radius: var(--panel-radius);
  background: var(--color-ink-band);
  color: var(--color-on-ink);
}

.page-about .cta-band h2 { color: var(--color-bone); margin-block-end: var(--space-6); }
.cta-band .answer-actions { margin-block-start: 0; }
/* CARRY.md, D1b/owner S8: --color-chip-border-on-ink is 1.79:1, decorative-only per TOKENS.md --
   a button's edge is not decoration. --color-border-strong is the real-UI-stroke token already
   declared against this same ground (border-strong/bg-raised, and --color-ink-band shares that
   hex). */
.cta-band .button-secondary { border-color: var(--color-border-strong); color: var(--color-bone); }
@media (hover: hover) and (pointer: fine) {
  .cta-band .button-secondary:hover { border-color: var(--color-bone); color: var(--color-bone); }
}
/* The primary action here is the copper plate, never a bone one: --color-bone and --color-text resolve
   to the same bone in this system, so a bone plate with a --color-text label is a blank white
   rectangle with an invisible word on it. check-contrast.mjs is blind to it — both sides are
   legitimate tokens and it never pairs them. Copper on the ink band, ink label: 5.1:1. */
.cta-band .button-primary { background: var(--color-accent); color: var(--color-text-on-accent); }
@media (hover: hover) and (pointer: fine) {
  .cta-band .button-primary:hover { background: color-mix(in srgb, var(--color-accent) 84%, var(--color-bone)); }
}

/* ---- the not-found page ------------------------------------------------------------------ */
/* A signpost: the numeral as signage, one line, three doors. */
/* Board (Site-NotFound.dc.html): the numeral is signage set in the border colour with one copper
   digit, not a copper headline; the three doors are hairline rows down the other column, not a
   wrapped row of pills. The row is the register D6 finished on the contact page — a caption-free
   .reach-row — so this reads the settled shape rather than deriving a second one. */
.notfound { padding-block: 0; }

.notfound-code {
  color: var(--color-border);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-numeral-404);
  line-height: var(--lh-numeral-404);
  letter-spacing: var(--tracking-mono-404);
  /* The numeral's line box is deliberately shorter than its glyphs (the board sets .85), so the
     digits overflow it and the headline's own ascenders climb into them — visible at 390 in
     Arabic, where Cairo rises higher than Bricolage does. The clearance is the overflow itself,
     derived from the two tokens rather than guessed, so it tracks both clamps at every width. */
  margin-block-end: calc(var(--fs-numeral-404) - var(--lh-numeral-404));
}

/* The one copper digit is what makes this signage instead of an error code. It needs a real node
   (src/pages/404.html): a pseudo-element cannot sit between two letter-spaced glyphs. Decorative
   either way — the numeral is aria-hidden and the sentence under it carries the meaning, so
   --color-border owes no AA here (TOKENS.md 2c). */
.notfound-zero { color: var(--color-accent); }

.page-404 .notfound h1 { margin-block-start: var(--space-5); }

/* The pills are de-chromed in place: .button keeps the markup and loses the plate, the edge, the
   radius and the centring. Hairlines are drawn on the list's top and each row's bottom, so the
   three rows close top and bottom exactly as the board draws them. */
.notfound-actions {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-8);
  border-block-start: var(--border-width) solid var(--color-border);
}

.notfound-actions .button {
  justify-content: space-between;
  min-height: 64px;
  padding: var(--space-4) 0;
  border: 0;
  border-block-end: var(--border-width) solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-title-lg);
}

/* The row is the target, not the word at its end — the same reason a.reach-row owns its hover. */
@media (hover: hover) and (pointer: fine) {
  .notfound-actions .button:hover { background: var(--color-surface); color: var(--color-text); }
}
.notfound-actions .button:focus-visible { outline-offset: -2px; }

/* Decorative, and only on the two navigation rows: the board leaves the call row to its number.
   Arabic flips the glyph, not just the direction (Site-NotFound-1280-ar). */
.notfound-actions .button:not([href^="tel:"])::after {
  content: "→";
  color: var(--color-accent);
  line-height: 1;
}

html[lang="ar"] .notfound-actions .button:not([href^="tel:"])::after { content: "←"; }

/* The board ends the call row with the number instead of an arrow. Same mono readout register as
   the contact page's .reach-value, and the same --color-text-soft the board draws it in;
   the pair is declared in check-contrast.mjs, because a dialled number is content, not decoration.
   The face is restated rather than inherited: html[lang="ar"] .button hands every button the Cairo
   display cut, and a phone number keeps its Latin face in both languages. */
.notfound-call-number {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-mono-row);
  line-height: 1;
  letter-spacing: var(--tracking-mono-tight);
  color: var(--color-text-soft);
}

/* ---- the bilingual shell at /404.html (build.mjs, generated) ----------------------------- */
/* Every path outside /en/ and /ar/ lands here, so it carries both languages and no masthead: the
   header's every link starts with a language the visitor has not chosen. The panels are the same
   .notfound markup the built page draws, which is the whole point — this page used to be a
   hand-written static file and was the last one on the site still on the pre-restyle register. */
.notfound-shell { padding-block: var(--space-10); }
.notfound-shell .notfound + .notfound { margin-block-start: var(--space-10); }

/* The document root is English, so tokens.css's html[lang="ar"] ramp never reaches the Arabic
   panel. Custom properties inherit: re-declaring the ones the panel actually reads hands the
   Arabic ramp to every element inside it without a second ruleset.
   The face half of that was here from the start; the SIZE-AND-LEADING half was not, which is the
   whole reason the ramp exists. tokens.css scales Arabic text by --fs-ar-text (1.05) and, more to
   the point, its leading by --lh-ar-text / --lh-ar-display (1.09 / 1.2), because Cairo and Noto
   Sans Arabic set taller than Bricolage and Instrument do and wrap into their own ascenders on
   Latin leading. The panel's h1 reads --fs/--lh-h1-place (base.css :1085), its .lede reads
   --fs/--lh-body-lead, and .notfound-home reads --fs-chip; all five were still Latin here, so the
   one surface on the site where an Arabic heading wraps - a 390 phone at /404.html - wrapped it
   tight. Same calc() as tokens.css :394, not a hand-picked number, so the two cannot drift. */
.notfound-shell [lang="ar"] {
  --font-text: var(--font-arabic);
  --font-display: var(--font-arabic-display);
  --weight-display: 800;
  --tracking-display: 0;
  --tracking-mono-404: 0;

  --fs-h1-place: calc(var(--_fs-h1-place) * var(--fs-ar-display));
  --lh-h1-place: calc(var(--_lh-h1-place) * var(--lh-ar-display));
  --fs-body-lead: calc(var(--_fs-body-lead) * var(--fs-ar-text));
  --lh-body-lead: calc(var(--_lh-body-lead) * var(--lh-ar-text));
  --fs-chip: calc(var(--_fs-chip) * var(--fs-ar-text));
  --fs-title-lg: calc(var(--_fs-title-lg) * var(--fs-ar-display));
}

.notfound-shell [lang="ar"] .notfound-actions .button:not([href^="tel:"])::after { content: "←"; }

@media (hover: hover) and (pointer: fine) {
  .notfound-actions .button:hover::after { color: color-mix(in srgb, var(--color-accent) 84%, var(--color-bone)); }
}

.page-404 .notfound-home { margin-block-start: var(--space-7); font-size: var(--fs-chip); }

/* ---------- 1280 -------------------------------------------------------------------------- */
/* The 6 + 6 split the grid gives a two-column block: 48 -> 628 and 652 -> 1232. */
@media (min-width: 64em) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-22); }
  /* Board rows: 84px, the number at 32px mono, the action at 17px. The card padding and the
     inter-row gap that used to live here went with the card -- a hairline list has no gaps. */
  .reach-row { min-height: 84px; }
  .reach-value { font-size: var(--fs-mono-md); }
  .map-embed { height: 420px; }
  .page-contact .button-directions { min-height: 68px; padding-inline: var(--space-14); }
  .callback-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); }
  .callback-actions { grid-column: 1 / -1; }
  /* The board's head is two columns from 1024 up: the headline alone on one side, the lede and
     what follows it on the other, both hung from the top of the photograph. */
  .page-about .page-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    column-gap: var(--space-22);
  }
  .page-about .page-head h1 { grid-column: 1; }
  .page-about .page-head .lede { grid-column: 2; grid-row: 1; margin-block-start: 0; }
  .page-about .about-stats { grid-column: 2; }
  .about-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
  .cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-9); padding: var(--space-9); }
  .page-about .cta-band h2 { margin-block-end: 0; }
  /* Two columns: the numeral and the headline on one side, the three doors on the other, capped
     at the board's 520 and hung on the far edge. The rows grow 64 -> 84, as .reach-row does. */
  .notfound {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: var(--space-22);
  }
  .notfound-code,
  .page-404 .notfound h1,
  .page-404 .notfound .lede { grid-column: 1; }
  .notfound-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: end;
    width: 100%;
    max-width: 520px;
    margin-block-start: 0;
  }
  .notfound-actions .button { min-height: 84px; }
  .page-404 .notfound-home { grid-column: 2; justify-self: end; }
}

.placard-aside .sidewall-note, .size-help figcaption p, .fit-confirm { display: flex; align-items: flex-start; gap: var(--space-4); text-align: start; }
.placard-aside .sidewall-note > span:last-child, .size-help figcaption p > span:last-child, .fit-confirm > .fit-confirm-copy { min-width: 0; flex: 1; }
.callout-key { flex-shrink: 0; }

.dial .dial-call { background: var(--color-accent); color: var(--color-text-on-accent); border: var(--border-width) solid var(--color-text-on-accent); }
.page-vehicle-finder .dial-wa { background: var(--color-whatsapp); color: var(--color-text-on-accent); border-color: var(--color-whatsapp); }
@media (max-width: 22em) {
  .page-services .page-head h1 { font-size: var(--fs-h1-page); }

}

/* ============================================================================================ */
/* The tyre size calculator, /<lang>/tyre-calculator/. Two sizes in on a raised panel, a ruled    */
/* table out: the finder's own furniture (ink border, hard shadow, display cut) with no drawing.  */
/* ============================================================================================ */
.page-tyre-calculator .page-head h1 { font-size: var(--fs-h1-page); line-height: var(--lh-h1-page); }
.calc { display: grid; gap: var(--space-9); margin-block-start: var(--space-8); padding-block-end: var(--space-12); }
.calc-inputs {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-strong) solid var(--color-text);
  box-shadow: var(--shadow-panel);
}
.calc-tyre { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc-tyre legend {
  padding: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  color: var(--color-text);
}
.calc-tyre-new legend { color: var(--color-accent); }
.calc-size { display: flex; align-items: flex-end; gap: var(--space-3); }
.calc-field { display: grid; flex: 1 1 0; min-width: 0; gap: var(--space-2); }
.calc-field span,
.calc-speed span {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
}
.calc-field select,
.calc-speed input {
  width: 100%;
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: var(--border-strong) solid var(--color-text);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-body);
}
.calc-sep {
  padding-block-end: var(--space-3);
  font-family: var(--font-latin-display);
  font-size: var(--fs-title);
  color: var(--color-accent);
}
.calc-speed { display: grid; gap: var(--space-2); max-width: 16rem; }
.calc-table { width: 100%; border-collapse: collapse; }
.calc-results { min-width: 0; }
/* Preserve the table and all measurements on narrow screens, including at zoom. */
.calc-table-scroll { max-width: 100%; overflow-x: auto; }
.calc-table th,
.calc-table td {
  padding: var(--space-3) var(--space-2);
  border-block-end: 1px solid var(--color-border);
  text-align: end;
  vertical-align: top;
}
.calc-table thead th {
  border-block-end: var(--border-strong) solid var(--color-text);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft);
}
.calc-table tbody th {
  text-align: start;
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--color-text);
}
.calc-table td {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  white-space: nowrap;
}
.calc-table td small { display: block; color: var(--color-text-soft); }
.calc-table td:last-child { color: var(--color-accent); font-weight: 600; }
.calc-speed-row :is(th, td) { border-block-end-color: var(--color-text); }
.calc-summary { margin: var(--space-6) 0 0; font-size: var(--fs-body-md); color: var(--color-text); }
.page-tyre-calculator .size-note { margin: var(--space-4) 0 0; font-size: var(--fs-caption); color: var(--color-text-soft); }
@media (min-width: 48em) {
  .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .calc-table :is(th, td) { padding: var(--space-4) var(--space-3); }
  .calc-table td { font-size: var(--fs-mono-body); }
}

/* ============================================================================================ */
/* Alignment pass, 2026-09-25. Nine faults measured at 390 and 1280 (RUN-NOTE.md); each rule    */
/* below names the one it closes. Direction 3 tokens only.                                       */
/* ============================================================================================ */

/* 8. Calculator. Each cell is a number and a unit in two fixed columns: the numbers share one
   right edge (decimal points line up down the column), the units start on one line, and the
   number is its own LTR isolate so a minus stays in front of it on an Arabic page. Columns grow
   for extreme sizes instead of letting a long number overlap its unit. */
.calc-table td { direction: inherit; unicode-bidi: normal; }
.calc-fig {
  display: inline-grid;
  grid-template-columns: minmax(var(--calc-number-width), max-content) minmax(var(--calc-unit-width), max-content);
  column-gap: var(--space-1);
  align-items: baseline;
}
.calc-table td small.calc-fig { display: grid; justify-content: end; }
.calc-num { direction: ltr; unicode-bidi: isolate; text-align: right; font-variant-numeric: tabular-nums; }
.calc-unit { text-align: start; }
html[lang="ar"] .calc-unit { font-family: var(--font-arabic); font-weight: 500; }
.calc-table tbody th { line-height: 1.25; }
.calc-speed { max-width: none; }
.page-tyre-calculator .size-note { line-height: 1.45; }

@media (max-width: 47.99em) {
  .calc-table :is(th, td) { padding-inline: var(--space-1); }
  .calc-fig { column-gap: var(--space-1); }
}

/* One Call and one WhatsApp per screen. Below 48em the bottom bar (base.css) carries both, so the
   generic body pairs yield to it; tyre cards and brand size rows keep theirs (each is pre-filled
   for that one tyre), and so does the contact form's fallback, which carries what he typed.
   Any pre-filled request keeps its whole contact pair visible: the generic bar cannot replace
   its message or the adjacent option to call about that request. */
a.reach-action { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; }
@media (max-width: 47.99em) {
  .answer-actions:not(.callback-error *):not(:has(> a[href*="wa.me/"][href*="?text="])) > :is(a[href^="tel:"], a[href*="wa.me/"]:not([href*="?text="])),
  .about-what a[href*="wa.me/"]:not([href*="?text="]),
  a.reach-action:not([href*="?text="]) { display: none; }
  .answer-actions:not(.callback-error *):not(:has(> :not(a[href^="tel:"], a[href*="wa.me/"]:not([href*="?text="])))),
  .cta-band:not(:has(.answer-actions > :not(a[href^="tel:"], a[href*="wa.me/"]:not([href*="?text="])))) { display: none; }
}

/* Contact hours are prose: give the holiday note its own line at narrow column widths. */
.page-contact .reach-row-hours { grid-template-columns: minmax(0, 1fr); }
.page-contact .reach-row-hours .reach-aside { max-width: none; text-align: start; }
html[lang="ar"] .page-contact :is(.reach-value-words, .faq-item h3) { line-height: var(--lh-ar-display); }

.page-vehicle-finder .catalogue-neighbours { margin-block-start: var(--space-10); padding: var(--space-6); border: var(--border-width) dashed var(--color-text-soft); background: var(--color-bg); }
.page-vehicle-finder .catalogue-neighbours .rim-strip-note { font-size: var(--fs-body); color: var(--color-text); margin-block: var(--space-4) var(--space-6); }
.page-vehicle-finder .size-tile-stock { font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.5; text-decoration: underline; text-underline-offset: var(--space-1); }
html[lang="ar"] .page-vehicle-finder .size-tile-stock { font-family: var(--font-arabic); }

html[data-searched] .page-vehicle-finder .search-results > .results-head { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-6); }
html[data-searched] .page-vehicle-finder .search-results .results-title { flex-basis: 100%; color: var(--color-text); font-size: var(--fs-mono-sm); line-height: 1.3; text-transform: none; }
html[data-searched] .page-vehicle-finder .results-change { margin-inline-start: 0; margin-inline-end: auto; }
html[data-searched] .page-vehicle-finder .search-results > .results-body { padding: 0 var(--space-6) var(--space-6); }
html[data-searched] .page-vehicle-finder .fit-car { font-size: var(--fs-body); line-height: 1.6; }
html[data-searched] .page-vehicle-finder .size-tile { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "media cap" "media size" "stock stock"; padding: var(--space-5); border-color: var(--color-border); gap: var(--space-4); }
html[data-searched] .page-vehicle-finder .size-tile-stock { justify-self: stretch; margin: 0; padding: var(--space-4); text-align: center; }
html[data-searched] .page-vehicle-finder .size-tile[data-stock="order"] .size-tile-stock { background: var(--color-accent); color: var(--color-text-on-accent); }
html[data-searched] .page-vehicle-finder .size-tile-size { font-size: var(--fs-mono-sm); white-space: nowrap; }
html[data-searched] .page-vehicle-finder .dial { padding: var(--space-6); margin-block-start: var(--space-8); }
html[data-searched] .page-vehicle-finder .dial-title { font-size: var(--fs-mono-md); line-height: 1.1; }
html[data-searched] .page-vehicle-finder .dial .dial-sizes { margin-block: var(--space-4); }
@media (max-width: 47.99em) {
 html[data-searched] .page-vehicle-finder .size-tile-media { width: var(--space-17); height: var(--space-17); }
 html[data-searched] .page-vehicle-finder .size-tile-size { font-size: var(--fs-mono-md); }
 html[data-searched] .page-vehicle-finder .size-tile { grid-template-areas: "media cap" "size size" "stock stock"; }
}

html[data-searched] .page-vehicle-finder .fit-confirm { font-size: var(--fs-body); color: var(--color-text); line-height: 1.6; }
html[data-searched] .page-vehicle-finder :is(.fit-rim, .size-tile-cap) { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; }

.privacy-copy { max-inline-size: var(--measure); margin-inline: auto; padding: var(--space-8); }
.privacy-copy h2 { margin-block-start: var(--space-9); }