/* Moto2Ride design v3 - a refinement layer on top of style-v2.css (same colours, layout and dial).
   Type and icon layer over style-v2.css, on by default; ?design=v2 turns it off (see the inline script in index.html).
   What changes: type (Sofia Sans Extra Condensed for display, Sofia Sans for text; no monospace costume),
   drawn SVG icons instead of Unicode glyphs, quieter labels, no kicker above headings, the hero stats as one line.
   The wordmark keeps its Archivo lettering (a tiny subset font with only its letters). */

:root {
  --display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: var(--text);

  /* icons: one 24px grid, one 2.2 stroke, round caps; used as masks so they take currentColor */
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L21.6 20H2.4z'/%3E%3Cpath d='M12 10v4.2M12 17.2v.1'/%3E%3C/svg%3E");
  --i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h12l-2.5 4.5L17 13H5'/%3E%3C/svg%3E");
  --i-inspect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.3'/%3E%3Cpath d='M15.2 15.2L20.5 20.5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  /* the check drawn dark on an amber box (a background, not a mask, so the box keeps its fill) */
  --check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121418' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8'/%3E%3C/svg%3E");
}

/* ---------- browser surfaces ---------- */
::selection { background: var(--accent); color: var(--accent-ink); }
input, textarea { caret-color: var(--accent-text); }
html { scrollbar-color: var(--line-strong) transparent; }
/* Sofia Sans tabular figures are loose in running text; keep them only where a number changes in place */
body { font-family: var(--text); font-size: 16px; font-variant-numeric: proportional-nums; }
.stats b, .budget-out, .score b, .match b { font-variant-numeric: tabular-nums; }

/* ---------- wordmark: unchanged lettering ---------- */
.logo { font-family: "Archivo", "Arial Narrow", sans-serif; }

/* ---------- header pickers ---------- */
.pickers select { font: 600 14px var(--text); letter-spacing: 0; }

/* ---------- hero ---------- */
.kicker { display: none; }
.hero h1 {
  font: 850 clamp(48px, 8.4vw, 116px)/.9 var(--display);
  letter-spacing: -.005em; word-spacing: .1em; max-width: 18ch;
  text-wrap: balance;
}
/* a block of its own, so the balanced wrap evens out the second sentence (no lone last word) */
.hero h1 em { font-weight: 850; display: block; }
/* the dial keeps its centre near the end of the headline's longest line, as in v2. With this face and the
   balanced wrap that line is 6.6 font-sizes wide in pl/en and 7.2 in de, so 7.0 sits between them (v2: 10.85);
   the shorter fr/es/it headlines (about 5) end further left, as the Italian one did in v2.
   Below 901px the phone rules of v2 apply. */
@media (min-width: 901px) {
  .hero { --dial-r: max(0px, calc(100% - max(16px, 50% - 564px) - 7.0 * min(116px, 8.4vw) - 305px)); }
  .hero::before { right: var(--dial-r); }
  .hero::after { right: calc(var(--dial-r) + 300px - 1.5px); }
}
.lead { font-size: 19px; line-height: 1.55; }
/* the catalogue size as one plain line, not a row of big numbers */
.stats { gap: 0; margin-bottom: 30px; align-items: center; }
.stats div { flex-direction: row; align-items: baseline; gap: .32em; padding: 0; margin: 0; border: 0; }
.stats div + div::before {
  content: ""; align-self: center; width: 2px; height: 14px; margin: 0 14px; border-radius: 1px;
  background: var(--night-accent); opacity: .7; transform: translateY(-1.5px);
}
.stats b { font: 750 18px/1.3 var(--text); letter-spacing: 0; color: var(--night-ink); }
.stats span { font: 500 18px/1.3 var(--text); text-transform: none; letter-spacing: 0; color: var(--night-muted); }

.cta, .go { font: 800 21px/1 var(--display); letter-spacing: .045em; padding: 15px 26px 14px; }
.go { font-size: 24px; padding: 17px 40px 16px; }
.go.sm { font-size: 17px; padding: 9px 16px 8px; }
/* the arrow: a drawn icon in place of the text glyph */
.cta span[aria-hidden], .go span[aria-hidden] {
  font-size: 0; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}

/* ---------- finder ---------- */
.preset { font: 600 14.5px/1.3 var(--text); }
.hero .preset { font-size: 14px; }
.preset::after, .preset-more::before, .hero .pick summary::before {
  content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat;
}
.preset::after { color: var(--accent-text); }
.hero .preset::after { color: var(--night-accent); }
.preset-more::before, .hero .pick summary::before { color: var(--night-accent); -webkit-mask-image: var(--i-plus); mask-image: var(--i-plus); }
.preset-more[aria-expanded="true"]::before, .hero .pick[open] summary::before { content: ""; -webkit-mask-image: var(--i-minus); mask-image: var(--i-minus); }
.preset-more, .hero .pick summary { font: 600 14px/1.3 var(--text); }
.quick-label { font-size: 15px; }

.step legend { font: 800 22px/1.1 var(--display); letter-spacing: .025em; }
.step legend i { font: 800 17px/1 var(--display); letter-spacing: 0; min-width: 30px; height: 26px; padding: 1px 7px 0; }
.hint { font-size: 15px; }
.note { font-size: 14px; border-left-width: 1px; }

/* chips: a real radio ring and a real check box in place of the 7px dots */
.chip span { font-size: 15px; gap: 9px; }
.chip span::before { width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 50%; box-sizing: border-box; }
.chip input[type=checkbox] + span::before { border-radius: 3px; }
.chip input:checked + span::before {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent-ink) 0 2.6px, transparent 3.2px), var(--accent);
}
.chip input[type=checkbox]:checked + span::before,
.chips.big .chip input[type=checkbox]:checked[value="a"] + span::before { background: var(--check-dark) center / 12px 12px no-repeat, var(--accent); }
.chips.big .chip input[type=radio]:checked[value="a"] + span::before {
  background: radial-gradient(circle, var(--accent-ink) 0 2.6px, transparent 3.2px), var(--accent);
}
.chips.big .chip span { font: 800 21px/1.15 var(--display); letter-spacing: .02em; }

.budget-out { font: 850 clamp(36px, 5.4vw, 52px)/1 var(--display); word-spacing: .08em; }
.ticks button { font: 600 13.5px var(--text); letter-spacing: 0; }

/* small field labels: the text face, a little tracking, no monospace */
.years label, .sort, .match, .sub { font: 700 12.5px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.years label, .sort, .match { color: var(--muted); }
.sub { color: var(--ink-2); }
select, .text { font: 500 16px var(--text); }
.check-line { font-size: 15px; }
.ghost { font: 600 15.5px var(--text); }

/* ---------- results ---------- */
.res-head h2 { font: 800 clamp(32px, 4.6vw, 48px)/1.02 var(--display); letter-spacing: 0; word-spacing: .06em; max-width: 24ch; }
.muted { font-size: 15px; }
.prices-note {
  position: relative; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 14px 11px 42px;
}
.prices-note::before {
  content: ""; position: absolute; left: 14px; top: 12px; width: 18px; height: 18px; background: var(--accent-text);
  -webkit-mask: var(--i-info) center / contain no-repeat; mask: var(--i-info) center / contain no-repeat;
}

.mono { font: 800 19px/1 var(--display); letter-spacing: .03em; }
.card-title h3 { font: 800 26px/1.02 var(--display); letter-spacing: .005em; word-spacing: .06em; }
.card-title p { font-size: 14px; }
.card-title .yrs { font: 650 13px/1.3 var(--text); }
.card-title .gen-badge { font: 700 14px/1.3 var(--text); }
.label { font-size: 13px; }
.specs { font-size: 14.5px; }
.lic { font: 750 13px/1.2 var(--text); }
.match b { font: 850 28px/1 var(--display); letter-spacing: 0; }
.reasons { font-size: 15px; }
.price strong { font: 850 32px/1.05 var(--display); letter-spacing: 0; word-spacing: .08em; }
.price span { font-size: 14px; }
.price small { font-size: 13px; }
.toggle { font: 650 15px var(--text); }

.score { font-size: 14px; }
.score b { font: 750 14px var(--text); }
.details h4 { font: 800 19px/1.15 var(--display); letter-spacing: .05em; }
.details ul { font-size: 15px; }
/* list marks: drawn icons in the verdict colours, no tinted tiles */
.details li::before {
  content: ""; width: 18px; height: 18px; top: 1px; border-radius: 0; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.plus li::before { color: var(--good); background: var(--good); }
.minus li::before { background: var(--care); -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.check li::before { background: var(--accent-text); -webkit-mask-image: var(--i-inspect); mask-image: var(--i-inspect); }
.extra { font: 500 13.5px/1.5 var(--text); }
.bdg { font-size: 13px; }

.lnk { font-size: 14px; }
.lnk::after {
  content: ""; width: 13px; height: 13px; background: var(--muted);
  -webkit-mask: var(--i-ext) center / contain no-repeat; mask: var(--i-ext) center / contain no-repeat;
}
.sh, .cmp-btn { font-size: 14.5px; }
.cmp-btn { display: inline-flex; align-items: center; gap: 7px; }
.cmp-btn[aria-pressed="true"]::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.cmp-item button, .cmp-x { font-size: 0; display: grid; place-items: center; }
.cmp-item button::before, .cmp-x::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--i-x) center / contain no-repeat; mask: var(--i-x) center / contain no-repeat;
}
.cmp-x { width: 28px; height: 28px; padding: 0; }
.cmp-top h2 { font: 800 34px/1.05 var(--display); letter-spacing: .02em; }
.cmp thead th { font: 800 22px/1.1 var(--display); letter-spacing: .01em; }
.avail::before {
  content: ""; display: inline-block; vertical-align: -2px; width: 13px; height: 13px; margin-right: 5px; background: currentColor;
  -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat;
}
.pick-h { font: 800 27px/1.1 var(--display); letter-spacing: .02em; }
.empty.zero .fun, .rx-note .fun { font: 800 24px/1.2 var(--display); }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .lead { font-size: 17px; }
  .stats b, .stats span { font-size: 16px; }
  .stats div + div::before { margin: 0 11px; }
}
@media (max-width: 600px) {
  .cmp-top h2 { font-size: 27px; }
  .cmp thead th { font-size: 17px; }
  .cmp-n3 thead th { font-size: 16px; }
  .cmp tbody th { font: 700 11.5px/1.3 var(--text); letter-spacing: .08em; }
  /* bold Sofia Sans is wider than Archivo: in three narrow columns the "best" cell keeps its green fill but a
     medium weight, so a price range such as "4 200 € - 6 900 €" stays on one line, as in v2 */
  .cmp td.best { font-weight: 600; }
  .cmp-n3 td.best { font-weight: 500; }
}
@media (max-width: 400px) {
  .pickers select { font-size: 13px; }
}

/* report an error: a flag instead of the outbound arrow, the title in the display face like the compare title */
.lnk.rep::before {
  content: ""; width: 13px; height: 13px; margin-right: 7px; background: currentColor;
  -webkit-mask: var(--i-flag) center / contain no-repeat; mask: var(--i-flag) center / contain no-repeat;
}
.rep-dlg h2 { font: 800 34px/1.05 var(--display); letter-spacing: .02em; }
.rep-lbl { font: 600 15px var(--text); }
.rep-dlg textarea.text { font: 500 16px/1.45 var(--text); }