/* GizmoDriver design system. Tokens: site/unified/_UNIFY.md. Mobile first (375 px); desktop from 960 px, content max 1200 px.
   Components use the gd- prefix. Shell and landing pages (site/_MODERN_SHELL_SPEC.md): one soft shadow, tint bands, 16 px cards,
   hover lift. Car page bodies keep the flat components. No icon fonts. Family styles are appended at build time (families/{id}/style.css). */
:root {
  --bg: #FFFFFF; --surface: #F5F8FF; --ink: #0B1B3A; --ink-2: #475569; --line: #D9E2F1;
  --blue: #1D4ED8; --blue-dark: #1E40AF; --blue-tint: #DBEAFE;
  --accent: #F97316; --accent-ink: #C2410C; --accent-tint: #FFEDD5;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --g: 16px; --r: 14px; --rc: 16px; --hdr: 56px;
  --shadow: 0 1px 2px rgba(11,27,58,.06), 0 8px 24px rgba(11,27,58,.08);
  --shadow-lg: 0 2px 6px rgba(11,27,58,.06), 0 24px 56px rgba(11,27,58,.16);
  --tint: linear-gradient(180deg, var(--surface) 0%, #FFFFFF 100%);
  --ring: 0 0 0 4px rgba(29,78,216,.16);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.gd-lock { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
[id] { scroll-margin-top: calc(var(--hdr) + 16px); }
code { font-size: .92em; }
.gd-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gd-nw { white-space: nowrap; }
.gd-skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--blue); color: #fff; font-weight: 700; border-radius: 8px; }
.gd-skip:focus { top: 8px; color: #fff; }
.gd-wrap { width: 100%; max-width: 1264px; margin: 0 auto; padding: 0 var(--g); }
.gd-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gd-note { color: var(--ink-2); font-size: 14px; }
.gd-lead { margin: 4px 0 18px; font-size: 17px; color: var(--ink-2); }
.gd-list { list-style: disc; padding-left: 20px; }
.gd-list li { padding: 3px 0; }
.gd-i { display: inline-block; flex: none; vertical-align: middle; }

/* gd-shell: header, search, mega-menu (desktop) and drawer (phones), footer. Script: assets/js/shell.js */
.gd-top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); transition: box-shadow .12s; }
.gd-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; }
.gd-top.is-s { box-shadow: 0 6px 20px rgba(11,27,58,.06); }
.gd-top.is-s::before { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.8) blur(12px); backdrop-filter: saturate(1.8) blur(12px); }
.gd-top__bar { display: flex; align-items: center; gap: 8px; height: var(--hdr); }
.gd-brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; margin-right: auto; color: var(--blue); text-decoration: none; font: 800 28px/1 var(--display); letter-spacing: .01em; }
.gd-brand:hover { color: var(--blue); }
.gd-brand img { display: block; height: 26px; width: auto; }
.gd-sf { position: relative; display: none; }
.gd-sf__i { position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-2); pointer-events: none; }
.gd-sf input { display: block; width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 400 15px var(--text); -webkit-appearance: none; appearance: none; transition: border-color .12s, box-shadow .12s, background-color .12s; }
.gd-sf input::placeholder { color: var(--ink-2); }
.gd-sf input:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: var(--ring); }
.gd-sf input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gd-nav { display: flex; align-items: center; gap: 2px; }
.gd-nav__t, .gd-nav > a { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 15px var(--text); text-decoration: none; white-space: nowrap; cursor: pointer; }
.gd-nav__t:hover, .gd-nav > a:hover { background: var(--surface); color: var(--blue-dark); }
.gd-nav__t::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg); transition: transform .12s; }
.gd-nav__t[aria-expanded="true"] { background: var(--blue-tint); color: var(--blue-dark); }
.gd-nav__t[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.gd-ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.gd-ib:hover { background: var(--surface); color: var(--blue-dark); }
.gd-ib[aria-expanded="true"] { background: var(--blue-tint); color: var(--blue-dark); }

/* Panel: drawer on phones (default), mega-menu from 960 px */
.gd-mm { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(400px, 100%); overflow-y: auto; overscroll-behavior: contain; background: #fff; box-shadow: var(--shadow-lg); visibility: hidden; transform: translateX(100%); transition: transform .2s ease, visibility 0s linear .2s; }
.gd-mm.is-open { visibility: visible; transform: none; transition: transform .2s ease; }
.gd-mm__in { padding-bottom: 32px; }
.gd-mm__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0 calc(var(--g) * -1) 4px; padding: 6px var(--g); background: #fff; border-bottom: 1px solid var(--line); }
.gd-mm__top .gd-sf { display: block; flex: 1; }
.gd-mc { border-bottom: 1px solid var(--line); }
.gd-mc__h { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--ink); font-weight: 700; }
.gd-mc__h .gd-ic, .gd-mm__car .gd-ic { color: var(--blue); }
.gd-mc__b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 16px var(--text); text-align: left; cursor: pointer; }
.gd-mc__b::after { content: ""; width: 8px; height: 8px; margin: -4px 6px 0 auto; border-right: 1.75px solid var(--ink-2); border-bottom: 1.75px solid var(--ink-2); transform: rotate(45deg); transition: transform .12s; }
.gd-mc__b[aria-expanded="true"]::after { transform: translateY(4px) rotate(-135deg); }
.gd-mc ul { display: none; list-style: none; padding: 0 0 10px 36px; }
.gd-mc.is-open ul { display: block; }
.gd-mc a, .gd-mm__car li a { display: flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.gd-mc a:hover, .gd-mm__car li a:hover { color: var(--blue); }
.gd-mm__x { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.gd-mm__x a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 700; text-decoration: none; }
.gd-mm__car { margin-top: 16px; padding: 4px 16px 14px; background: var(--surface); border-radius: var(--rc); }
.gd-mm__car ul { list-style: none; }
.gd-mm__car li + li { border-top: 1px solid var(--line); }
.gd-mm__car p { color: var(--ink-2); font-size: 15px; }
.gd-mm__car p a { font-weight: 700; }
.gd-mm__cn { margin-bottom: 4px; color: var(--ink) !important; font-weight: 700; }
.gd-mm__ch { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.gd-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(11,27,58,.36); opacity: 0; transition: opacity .2s; }
.gd-scrim.is-on { opacity: 1; }

/* Search suggestions (header, drawer, home hero) */
.gd-sl { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; max-height: min(420px, 70vh); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); text-align: left; }
.gd-sl__o { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.gd-sl__o:hover, .gd-sl__o[aria-selected="true"] { background: var(--blue-tint); color: var(--ink); }
.gd-sl__t { font-weight: 700; line-height: 1.3; }
.gd-sl__s { color: var(--ink-2); font-size: 14px; line-height: 1.3; }
.gd-sl__none { padding: 12px; color: var(--ink-2); }

@media (min-width: 960px) {
  :root { --hdr: 64px; }
  .gd-brand { margin-right: 0; }
  .gd-brand img { height: 30px; }
  .gd-top__bar { gap: 16px; }
  .gd-sf { display: block; flex: 0 1 360px; margin: 0 auto; }
  .gd-nav__t, .gd-nav > a { display: inline-flex; }
  .gd-ib { display: none; }
  .gd-mm { position: absolute; top: 100%; bottom: auto; left: 0; width: auto; max-height: calc(100vh - var(--hdr)); border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px rgba(11,27,58,.12); opacity: 0; transform: translateY(-6px); transition: opacity .12s, transform .12s, visibility 0s linear .12s; }
  .gd-mm.is-open { opacity: 1; transform: none; transition: opacity .12s, transform .12s; }
  .gd-mm__in { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 40px; padding-top: 26px; padding-bottom: 30px; }
  .gd-mm__top, .gd-mm__x { display: none; }
  .gd-mm__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; grid-auto-rows: minmax(32px, auto); column-gap: 32px; }
  .gd-mc { grid-row: span var(--s, 6); border: 0; }
  .gd-mc__h, .gd-mc__b { min-height: 34px; gap: 10px; color: var(--ink); font: 700 14px var(--text); pointer-events: none; }
  .gd-mc__b::after { display: none; }
  .gd-mc ul, .gd-mc.is-open ul { display: block; padding: 0 0 0 34px; }
  .gd-mc a { min-height: 32px; color: var(--ink-2); font-size: 15px; }
  .gd-mc a:hover { color: var(--blue); }
  .gd-mm__car { align-self: start; margin: 0; }
  .gd-mm__car li a { min-height: 36px; }
  .gd-scrim { top: var(--hdr); background: rgba(11,27,58,.16); }
}

/* Footer */
.gd-foot { margin-top: 56px; padding: 8px 0 28px; background: var(--surface); border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.gd-foot__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; }
.gd-foot h2 { margin: 24px 0 6px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gd-foot ul { list-style: none; }
.gd-foot a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); text-decoration: none; }
.gd-foot a:hover { color: var(--blue); text-decoration: underline; }
.gd-foot__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
@media (min-width: 960px) { .gd-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } .gd-foot a { min-height: 34px; } }

/* Breadcrumbs */
.gd-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--ink-2); }
.gd-crumbs li { display: inline-flex; align-items: center; }
.gd-crumbs li + li::before { content: "\203A"; padding: 0 8px; color: var(--ink-2); }
.gd-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.gd-crumbs a:hover { color: var(--blue); }
.gd-crumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* Main and headings */
.gd-main { padding-bottom: 32px; }
.gd-main > h1, .gd-hero h1 { margin: 8px 0 14px; font: 800 clamp(38px, 10.5vw, 64px)/.95 var(--display); letter-spacing: .005em; }
.gd-sec { margin-top: 40px; }
.gd-sec > h2, .gd-band h2, .gd-related > h2 { margin: 0 0 14px; padding-top: 10px; border-top: 3px solid var(--ink); font: 800 clamp(28px, 7.6vw, 38px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.gd-h3 { margin: 18px 0 8px; font-size: 17px; font-weight: 700; }

/* Hero (old home layout, kept for any page that still uses it) */
.gd-hero { display: grid; gap: 18px; padding: 16px 0 8px; }
.gd-hero h1 { font-size: clamp(44px, 13vw, 76px); margin-top: 0; }
.gd-hero__sub { font-size: 16px; color: var(--ink-2); }
.gd-ask { margin: 16px 0 8px; }

/* Picker: year, make, model, trim selects */
.gd-picker { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.gd-picker__h { margin-bottom: 12px; font: 800 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.gd-picker__sels { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.gd-picker__sels .gd-sel:nth-child(3), .gd-picker__sels--4 .gd-sel:nth-child(4) { grid-column: 1 / -1; }
.gd-sel { position: relative; display: block; min-width: 0; }
.gd-sel > span { display: block; margin-bottom: 4px; }
.gd-sel select { display: block; width: 100%; min-height: 48px; padding: 0 30px 0 12px; border: 1.5px solid var(--blue); border-radius: 10px; background: #fff; color: var(--ink); font: 700 16px var(--text); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.gd-sel select:disabled { border-color: var(--line); color: var(--ink-2); cursor: default; }
.gd-sel::after { content: ""; position: absolute; right: 13px; bottom: 20px; width: 7px; height: 7px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); pointer-events: none; }
.gd-picker__go { margin-top: 12px; }
.gd-picker[aria-busy="true"] select { opacity: .6; }

/* Buttons and chips */
.gd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: 700 16px var(--text); text-decoration: none; cursor: pointer; }
.gd-btn:hover { background: var(--blue-dark); color: #fff; }
.gd-btn--alt { background: var(--accent); color: var(--ink); }
.gd-btn--alt:hover { background: var(--accent-tint); color: var(--ink); }
.gd-chips { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-chips [hidden] { display: none; }
.gd-chips a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 4px 10px; border: 1.5px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue); font: 700 15px/1.15 var(--text); text-align: center; text-decoration: none; }
.gd-chips a:hover { background: var(--blue); color: #fff; }
.gd-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.gd-pills a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--blue); border-radius: 999px; color: var(--blue); font-weight: 700; text-decoration: none; }
.gd-pills a:hover { background: var(--blue-tint); }
.gd-main--band .gd-pills a { min-height: 44px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; transition: border-color .12s, box-shadow .12s, transform .12s; }
.gd-main--band .gd-pills a:hover { border-color: var(--blue); background: #fff; color: var(--blue-dark); box-shadow: var(--shadow); transform: translateY(-1px); }

/* Answer panel: dark blue band, white text, the one number in orange */
.gd-answer { margin: 8px 0 24px; padding: 18px 18px 16px; background: var(--blue-dark); color: #fff; border-radius: var(--r); font-variant-numeric: tabular-nums; }
.gd-answer__k { color: var(--blue-tint); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gd-answer__n { margin: 6px 0 4px; color: var(--accent); font: 800 clamp(52px, 16vw, 96px)/.95 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.gd-answer__u { margin-left: 8px; color: #fff; font-size: .42em; letter-spacing: .02em; }
.gd-answer__l { list-style: none; margin-top: 8px; font-size: 17px; }
.gd-answer__l li + li { margin-top: 2px; }
.gd-answer a { color: #fff; }
.gd-answer :focus-visible { outline-color: #fff; }
.gd-answer__n .gd-sm { vertical-align: .9em; }
.gd-answer .gd-sm--2 { background: #fff; }
.gd-answer .gd-sm--1, .gd-answer .gd-sm--m { border-color: #fff; }
.gd-answer .gd-sm--d { border-color: var(--accent); }

/* Inputs row */
.gd-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 20px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.gd-inputs label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gd-inputs input, .gd-inputs select { display: block; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 12px; border: 1.5px solid var(--blue); border-radius: 10px; background: #fff; color: var(--ink); font: 700 16px var(--text); }
.gd-inputs input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--blue); }
/* Tool hub: the picker and its message take full rows. */
#gd-tool-picker, #gd-tool-msg { grid-column: 1 / -1; }
#gd-tool-msg:empty { display: none; }
/* Selects in input boxes: an ellipsis for long text. Garage size and trailer trim get 2 columns, a full row on phones. */
.gd-inputs select { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gd-inputs > label:has(> select[name="preset"]), .gd-inputs > label:has(> select[name="t"]) { grid-column: span 2; }
@media (max-width: 639px) { .gd-inputs > label:has(> select[name="preset"]), .gd-inputs > label:has(> select[name="t"]) { grid-column: 1 / -1; } }

/* Key numbers and stats */
.gd-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; font-variant-numeric: tabular-nums; }
.gd-keys > div { padding-top: 8px; border-top: 2px solid var(--line); }
.gd-keys dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gd-keys dd { margin-top: 2px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-keys--hub { margin: 4px 0 8px; }
.gd-stats > div { border-top-color: var(--blue); }
.gd-stats dd { font: 800 clamp(34px, 9vw, 52px)/1 var(--display); color: var(--blue); }

/* Figure frame */
.gd-fig { margin: 20px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.gd-fig svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; font-family: var(--text); overflow: visible; }
.gd-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* Tables: zebra rows, right-aligned tabular numbers, sticky first column on phones */
.gd-table-wrap { margin: 0 calc(var(--g) * -1); padding: 0 var(--g); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.gd-table caption { padding: 0 0 8px; text-align: left; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.gd-table th, .gd-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.gd-table thead th { border-bottom: 2px solid var(--ink); background: #fff; color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gd-table tbody th { min-width: 120px; max-width: 50vw; white-space: normal; background: #fff; font-weight: 700; }
.gd-table tbody tr:nth-child(even) > * { background: var(--surface); }
.gd-table .n { text-align: right; white-space: nowrap; }
.gd-table td a, .gd-table th a { font-weight: 700; }
.gd-table thead th:first-child, .gd-table tbody th { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--line); }
/* Wide tables: shell.js sets gd-tw--more while columns sit past the right edge (a fade there) and adds a hint line under the table. */
.gd-tw--more { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 44px); mask-image: linear-gradient(to left, transparent 0, #000 44px); }
.gd-tw-hint { margin: 4px 0 16px; color: var(--ink-2); font-size: 13px; }
@media (min-width: 640px) { .gd-tw-hint { display: none; } }

/* Source marks: filled = 2+ sources, ring = 1 source, dashed = model-level or rule, orange square = sources disagree */
.gd-sm { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; vertical-align: .1em; }
.gd-sm--2 { background: var(--blue); }
.gd-sm--1 { border: 1.5px solid var(--ink-2); }
.gd-sm--m { border: 1.5px dashed var(--ink-2); }
.gd-sm--d { border: 2px solid var(--accent-ink); border-radius: 2px; }
.gd-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-2); }
.gd-legend li { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.gd-legend .gd-sm { margin: 0; width: 12px; height: 12px; }
.gd-sources { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); }
.gd-sources p { margin-top: 4px; font-size: 14px; }
.gd-sources a { display: inline-flex; align-items: center; min-height: 44px; }

/* "What this cannot tell you" */
.gd-limits { margin-top: 28px; padding: 4px 0 4px 14px; border-left: 4px solid var(--accent); }
.gd-limits h2 { margin-bottom: 4px; font: 800 20px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.gd-limits p { color: var(--ink-2); }

/* Link lists, cards, strips */
.gd-links { list-style: none; border-top: 1px solid var(--line); }
.gd-links li { border-bottom: 1px solid var(--line); break-inside: avoid; }
.gd-links a { display: inline-block; padding: 11px 0; font-weight: 700; }
.gd-links--q a { padding-right: 8px; }
/* Compact link grid (makes A-Z): 2 columns on phones, 4 on tablets, 6 on desktop. Every link stays in the HTML. */
.gd-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.gd-grid li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.gd-grid a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 500; }
.gd-grid .gd-note { font-size: 13px; }
/* Cards (rankings, hubs): 16 px radius, soft shadow on hover, 2 px lift */
.gd-cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gd-card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--rc); background: #fff; color: var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.gd-card:hover { border-color: var(--blue-tint); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.gd-card h3 { padding-right: 24px; font-size: 18px; line-height: 1.3; }
.gd-card h3::after { content: ""; position: absolute; top: 21px; right: 18px; width: 18px; height: 18px; background: var(--blue); -webkit-mask: var(--gd-ic) center / contain no-repeat; mask: var(--gd-ic) center / contain no-repeat; transition: transform .12s ease; }
.gd-card:hover h3::after { transform: translateX(2px); }
.gd-card p { color: var(--ink-2); }
.gd-card__m { margin-top: auto; padding-top: 8px; font-size: 14px; }
/* Tool directory blocks (older layout) */
.gd-toolset { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.gd-toolset > li { padding: 16px 18px 8px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.gd-toolset h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gd-toolset .gd-toolset__b { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.gd-toolset ul { list-style: none; margin-top: 6px; }
.gd-toolset ul li + li { border-top: 1px solid var(--line); }
.gd-toolset ul a { display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.gd-toolset ul a::after { content: "\2192"; margin-left: 6px; color: var(--blue); }
.gd-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.gd-strip a, .gd-strip span { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.gd-strip a:hover { border-color: var(--blue); }
.gd-strip .gd-strip__on { background: var(--blue); border-color: var(--blue); color: #fff; }
.gd-strip .gd-strip__off { color: var(--ink-2); border-style: dashed; font-weight: 400; }
.gd-qy { list-style: none; border-top: 1px solid var(--line); }
.gd-qy li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gd-qy a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; }
.gd-qy .gd-qy__y { min-width: 64px; justify-content: center; border-color: var(--blue); background: var(--blue); color: #fff; }

/* Band: "How the numbers are checked" */
.gd-band { margin-top: 48px; padding: 20px var(--g) 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.gd-band h2 { border-top: 0; padding-top: 0; }
.gd-band .gd-legend { margin-top: 18px; }
.gd-band__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 8px; }
.gd-band__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Related links block */
.gd-related { margin-top: 24px; margin-bottom: 8px; }
.gd-related__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; }
.gd-related h3 { margin: 12px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gd-related ul { list-style: none; }
.gd-related li { border-bottom: 1px solid var(--line); }
.gd-related a { display: inline-block; padding: 10px 0; font-weight: 700; }

@media (min-width: 640px) {
  .gd-picker__sels { grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); }
  .gd-picker__sels .gd-sel:nth-child(3) { grid-column: auto; }
  .gd-picker__sels--4 { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .gd-picker__sels--4 .gd-sel:nth-child(4) { grid-column: auto; }
  .gd-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-toolset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-links--cols { columns: 2; column-gap: 32px; border-top: 0; }
  .gd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gd-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-chips { display: flex; flex-wrap: wrap; }
  .gd-chips a { padding: 4px 18px; }
}
@media (min-width: 960px) {
  :root { --g: 32px; }
  .gd-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: center; padding-top: 36px; }
  .gd-picker { padding: 22px; }
  .gd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-toolset { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-links--cols { columns: 3; }
  .gd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gd-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gd-table-wrap { margin: 0; padding: 0; }
  .gd-table thead th:first-child, .gd-table tbody th { position: static; border-right: 0; }
  .gd-table tbody th { max-width: 340px; }
  .gd-answer { padding: 24px 28px 22px; }
  .gd-band { padding: 28px 32px 30px; }
}

/* Tool-first redesign (site/_REDESIGN_SPEC.md): catalogue cards, "Your car", answer index cards */
.gd-hero--tools { display: block; padding: 18px 0 4px; }
.gd-hero--tools h1 { margin-bottom: 8px; }
.gd-search { position: relative; margin-top: 14px; }
.gd-search input { display: block; width: 100%; min-height: 56px; padding: 0 16px 0 52px; border: 2px solid var(--blue); border-radius: 12px; background: #fff; color: var(--ink); font: 500 18px var(--text); -webkit-appearance: none; appearance: none; }
.gd-search input::placeholder { color: var(--ink-2); }
.gd-car { margin-top: 18px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.gd-car__h { font: 800 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.gd-car__l { margin: 4px 0 10px; color: var(--ink-2); font-size: 15px; }
.gd-car .gd-picker { padding: 0; background: none; border: 0; border-radius: 0; }
.gd-car__on { margin-top: 10px; font-size: 15px; }
.gd-car__on a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.gd-cat { margin-top: 28px; }
.gd-cat > h2 { margin: 0 0 12px; padding-top: 10px; border-top: 3px solid var(--ink); font: 800 clamp(26px, 7vw, 34px)/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.gd-tools, .gd-ans { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gd-tool, .gd-ans a { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 56px; padding: 14px 44px 14px 16px; border: 1px solid var(--line); border-radius: var(--rc); background: #fff; color: var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.gd-tool:hover, .gd-ans a:hover { border-color: var(--blue-tint); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.gd-tool::after, .gd-ans a::after { content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; background: var(--blue); -webkit-mask: var(--gd-ic) center / contain no-repeat; mask: var(--gd-ic) center / contain no-repeat; transition: transform .12s ease; }
.gd-tool:hover::after, .gd-ans a:hover::after { transform: translateX(2px); }
.gd-tool__q { font-size: 17px; font-weight: 700; line-height: 1.3; }
.gd-tool__b { color: var(--ink-2); font-size: 14.5px; line-height: 1.4; }
.gd-tool--car { border-color: var(--blue); background: linear-gradient(180deg, #fff, var(--surface)); }
.gd-tool--car::after { background: var(--accent); }
.gd-none { margin-top: 20px; padding: 14px 16px; border: 1px dashed var(--ink-2); border-radius: 12px; font-weight: 700; }
.gd-sec--keys { margin-top: 8px; }
.gd-sec--keys .gd-h3 { margin-top: 0; }
.gd-keys--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gd-ans__q { color: var(--blue); font-weight: 700; line-height: 1.3; }
.gd-ans__a { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-grid--tight a { min-height: 36px; }
.gd-card h3::after, .gd-tool::after, .gd-ans a::after { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
@media (min-width: 640px) {
  .gd-tools, .gd-ans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-keys--strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .gd-hero--tools { max-width: 860px; padding-top: 32px; }
  .gd-tools, .gd-ans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

/* Landing pages (site/_MODERN_SHELL_SPEC.md): tinted band with the h1, then the body in a wrap */
.gd-main--band { padding-bottom: 40px; }
.gd-hb { padding: 4px 0 28px; background: var(--tint); border-bottom: 1px solid var(--line); }
.gd-hb .gd-crumbs { margin-bottom: 4px; }
.gd-hb h1 { margin: 10px 0 10px; font: 800 clamp(40px, 10vw, 64px)/.95 var(--display); letter-spacing: .005em; }
.gd-hb__k { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--blue); font-size: 14px; font-weight: 700; }
.gd-hb__k .gd-i { padding: 6px; width: 32px; height: 32px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.gd-hb__k a { color: var(--blue); text-decoration: none; }
.gd-hb__k a:hover { text-decoration: underline; }
.gd-hb__l { max-width: 62ch; color: var(--ink-2); font-size: 18px; line-height: 1.45; }
.gd-hb__l + .gd-hb__l { margin-top: 4px; font-size: 16px; }
.gd-main--band > .gd-wrap > :first-child { margin-top: 28px; }
.gd-main--band .gd-sec > h2, .gd-main--band .gd-band h2 { padding-top: 0; border-top: 0; font: 700 clamp(22px, 5.6vw, 28px)/1.2 var(--text); letter-spacing: -.01em; text-transform: none; }
.gd-main--band .gd-sec { margin-top: 48px; }
/* Example answers in the band */
.gd-exs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gd-exs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 15px; line-height: 1.25; text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.gd-exs b { color: var(--ink); }
.gd-exs a:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
/* Category heads (home, /tools/) */
.gd-main--band .gd-cat { margin-top: 48px; }
.gd-cat__h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.gd-cat__i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--blue-tint); color: var(--blue); }
.gd-cat__h h2 { font: 700 clamp(22px, 5.6vw, 28px)/1.2 var(--text); letter-spacing: -.01em; }
.gd-cat__h p { margin-top: 2px; color: var(--ink-2); }
/* Home hero */
.gd-hb--home { padding: 32px 0 40px; text-align: center; }
.gd-hb--home h1 { margin: 0 0 12px; font-size: clamp(56px, 14vw, 72px); }
.gd-hb--home .gd-hb__l { margin: 0 auto; }
.gd-hb .gd-search { max-width: 720px; margin-top: 22px; }
.gd-hb--home .gd-search { margin: 22px auto 0; }
.gd-hb .gd-search input { min-height: 60px; padding: 0 18px 0 52px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); font-size: 18px; transition: border-color .12s, box-shadow .12s; }
.gd-hb .gd-search input:focus { outline: 0; border-color: var(--blue); box-shadow: var(--shadow), var(--ring); }
.gd-search .gd-sf__i { left: 18px; margin-top: -11px; width: 22px; height: 22px; }
.gd-hb--home .gd-exs { justify-content: center; }
.gd-hb--home .gd-exs a { color: var(--ink); font-weight: 500; }
/* "Your car" card on band pages */
.gd-main--band .gd-car { margin-top: 28px; padding: 18px; background: #fff; border-color: var(--line); border-radius: var(--rc); box-shadow: var(--shadow); }
.gd-car__t { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--blue); }
.gd-main--band .gd-car__h { color: var(--ink); font: 700 20px/1.2 var(--text); letter-spacing: 0; text-transform: none; }
.gd-main--band .gd-car__l { margin: 2px 0 0; }
.gd-qa { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.gd-qa:not(:has(li:not([hidden]))) { display: none; }
.gd-qa a { display: flex; flex-direction: column; justify-content: center; min-height: 68px; padding: 10px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: box-shadow .12s, transform .12s; }
.gd-qa a:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.gd-qa b { color: var(--blue); font: 800 26px/1.05 var(--display); font-variant-numeric: tabular-nums; }
/* Makes A-Z tiles */
.gd-grid--makes { gap: 8px; }
.gd-grid--makes li { position: relative; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .12s, box-shadow .12s, transform .12s; }
.gd-grid--makes li:hover { border-color: var(--blue-tint); box-shadow: var(--shadow); transform: translateY(-2px); }
.gd-grid--makes a { min-height: 52px; color: var(--ink); font-weight: 700; text-decoration: none; }
.gd-grid--makes a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.gd-grid--makes li:hover a { color: var(--blue-dark); }
/* Softer selects in the "Your car" card (home, /tools/). Car-page pickers keep the blue outline. */
.gd-main--band .gd-car .gd-sel select { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 500; transition: border-color .12s, box-shadow .12s, background-color .12s; }
.gd-main--band .gd-car .gd-sel select:hover { border-color: var(--blue); }
.gd-main--band .gd-car .gd-sel select:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: var(--ring); }
.gd-main--band .gd-car .gd-sel::after { border-color: var(--ink-2); }
/* Category bar above the catalogue: one row that scrolls sideways on phones, wraps from 960 px */
.gd-cnav { margin-top: 28px; }
/* Category chips wrap into rows on phones; no side scroller. */
.gd-cnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 4px 0 8px; }
.gd-cnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.gd-cnav a:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.gd-cnav .gd-ic { width: 20px; height: 20px; color: var(--blue); }
.gd-cnav small { min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
@media (min-width: 960px) { .gd-cnav ul { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Trust band on band pages */
.gd-main--band .gd-band { border: 0; border-radius: var(--rc); }
/* Model cards (class hubs) */
.gd-mcards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gd-mcard { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rc); background: #fff; color: var(--ink); text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.gd-mcard:hover { border-color: var(--blue-tint); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.gd-mcard h3 { font-size: 17px; line-height: 1.3; }
.gd-mcard dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.gd-mcard dt { color: var(--ink-2); }
.gd-mcard dd { font-weight: 700; }
/* Year pills in a band */
.gd-hb .gd-strip { margin-top: 18px; }
.gd-hb .gd-strip a, .gd-hb .gd-strip span { border-radius: 999px; background: #fff; }
.gd-hb .gd-strip a:hover { box-shadow: var(--shadow); }
.gd-hb .gd-keys { margin-top: 18px; }
@media (min-width: 640px) {
  .gd-qa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gd-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .gd-hb { padding: 8px 0 44px; }
  .gd-hb--home { padding: 56px 0 56px; }
  .gd-main--band > .gd-wrap > :first-child { margin-top: 40px; }
  .gd-main--band .gd-cat { margin-top: 64px; }
  .gd-main--band .gd-car { padding: 22px 24px; }
  .gd-mcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* gd-icons: generated from lib/icons.js */
.gd-ic { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--gd-ic) center / contain no-repeat; mask: var(--gd-ic) center / contain no-repeat; }
.gd-ic--fuel { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16M3 21h12M7 7h4v4H7zM14 10h1.5a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 0 3 0V8.5L17 6%27/%3E%3C/svg%3E"); }
.gd-ic--hitch { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 12.5h7v5H2zM9 15h11M17 15v-4M14 8a3 3 0 1 0 6 0a3 3 0 1 0-6 0M14.5 15v3.5h4V15%27/%3E%3C/svg%3E"); }
.gd-ic--dollar { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3v18M17 6.5h-7a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6H6.5%27/%3E%3C/svg%3E"); }
.gd-ic--bolt { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M13 2 4 14h7l-1 8 9-12h-7z%27/%3E%3C/svg%3E"); }
.gd-ic--ruler { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 8h20v8H2zM6 8v3M10 8v4.5M14 8v3M18 8v4.5%27/%3E%3C/svg%3E"); }
.gd-ic--list { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 6h12M9 12h12M9 18h12M4 6h.01M4 12h.01M4 18h.01%27/%3E%3C/svg%3E"); }
.gd-ic--gauge { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3.5 17a9 9 0 1 1 17 0M12 14l4.5-5M12 14h.01M7.5 9.5l.9.9%27/%3E%3C/svg%3E"); }
.gd-ic--scales { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3v17M7 21h10M5 7h14M5 7l-3 7a3 3 0 0 0 6 0zM19 7l-3 7a3 3 0 0 0 6 0z%27/%3E%3C/svg%3E"); }
.gd-ic--trophy { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 4h8v5a4 4 0 0 1-8 0zM8 6H5v1a3 3 0 0 0 3 3M16 6h3v1a3 3 0 0 1-3 3M12 13v4M8.5 21h7M10 17h4l.5 4h-5z%27/%3E%3C/svg%3E"); }
.gd-ic--search { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M10.5 17a6.5 6.5 0 1 0 0-13a6.5 6.5 0 0 0 0 13zM15.5 15.5 20 20%27/%3E%3C/svg%3E"); }
.gd-ic--menu { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 7h16M4 12h16M4 17h16%27/%3E%3C/svg%3E"); }
.gd-ic--close { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 6l12 12M18 6 6 18%27/%3E%3C/svg%3E"); }
.gd-ic--arrow { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E"); }
.gd-ic--car { --gd-ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 17v-4.5L5.5 7h13l2.5 5.5V17zM3 17v2h3v-2M18 17v2h3v-2M7 13.5h.01M17 13.5h.01%27/%3E%3C/svg%3E"); }

/* family versus */
/* versus: two pickers side by side, winner keys (A blue, B orange), slider values. */
.gd-versus-pick { display: grid; gap: 12px; margin: 0 0 20px; }
.gd-versus-pick .gd-picker__h { display: flex; align-items: center; gap: 8px; }
.gd-versus-pick .gd-picker__h::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--blue); }
#gd-pb .gd-picker__h::before { background: var(--accent); }
.gd-versus-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--blue); }
.gd-versus-key--b { background: var(--accent); }
.gd-versus-win { font-weight: 700; white-space: nowrap; }
.gd-versus-big { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.gd-versus-sliders output { float: right; color: var(--ink); font-size: 16px; letter-spacing: 0; }
#gd-vs-cin label[hidden] { display: none; }
#gd-vs-fig svg { max-width: 480px; }
#gd-vs-main > .gd-note, #gd-vs-cost > .gd-note, #gd-vs-wh .gd-note { margin: 8px 0; }
@media (max-width: 639px) {
  #gd-vs-tbl th, #gd-vs-tbl td, #gd-vs-htbl th, #gd-vs-htbl td { padding: 8px 6px; }
  #gd-vs-tbl tbody th, #gd-vs-htbl tbody th { min-width: 88px; }
  #gd-vs-tbl td:last-child, #gd-vs-htbl td:last-child { min-width: 70px; white-space: normal; }
}
@media (min-width: 720px) { .gd-versus-pick { grid-template-columns: 1fr 1fr; } }


/* family trims */
.gd-trims-steps { list-style: none; margin: 0 0 8px; padding: 0; }
.gd-trims-steps > li { margin: 0 0 14px; padding: 4px 0 4px 14px; border-left: 3px solid var(--blue-tint); }
.gd-trims-steps > li > p, .gd-trims-steps .gd-list { margin: 3px 0; }
.gd-trims-st { font-weight: 700; font-size: 17px; }
.gd-trims-g { margin: 18px 0 8px; }
.gd-trims-ft td { text-align: center; }
.gd-trims-ft b { color: var(--blue); }
.gd-trims-ft i { color: var(--ink-2); font-style: normal; }
.gd-trims-cmp { margin-top: 4px; }
#gd-trims-diff .gd-table-wrap { margin-top: 14px; }
.gd-fig svg.gd-trims-lad { max-width: 520px; }
.gd-trims-ft thead th { white-space: normal; min-width: 64px; vertical-align: bottom; }
.gd-trims-ft td { padding: 8px 6px; }


/* family mpg */
/* mpg family. Appended to gd.css by the build. Classes start with gd-mpg-. */
.gd-mpg-in > [hidden], .gd-mpg-fig[hidden] { display: none; }
.gd-mpg-in > p { grid-column: 1 / -1; margin: 0; }
.gd-mpg-in + .gd-mpg-in { margin-top: -10px; }
.gd-sec .gd-mpg-in { margin: 4px 0 14px; }
.gd-mpg-on > th, .gd-mpg-on > td { background: var(--accent-tint); }
.gd-mpg-yn { margin: 4px 0; font: 800 28px/1.15 var(--display); color: var(--blue-dark); }
.gd-mpg-isn { margin: 20px 0; font-weight: 700; }
.gd-mpg-fig .gd-svg { max-width: 760px; }


/* family trips */
/* trips family. Appended to gd.css by the build. Classes start with gd-trips-. */
.gd-trips-in > [hidden], .gd-trips-fig[hidden], #gd-trips-static[hidden] { display: none; }
.gd-trips-in > p { grid-column: 1 / -1; margin: 0; }
.gd-table tbody tr.gd-trips-on > th, .gd-table tbody tr.gd-trips-on > td { background: var(--accent-tint); }
.gd-trips-fig .gd-svg { display: block; max-width: 760px; }


/* family towing */
.gd-towing-check .gd-inputs { margin-bottom: 12px; }
.gd-towing-out { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.gd-towing-out .gd-keys { margin: 0 0 8px; }
.gd-towing-out .gd-note { margin: 4px 0 0; }
.gd-towing-verdict { margin: 0 0 10px; font: 800 26px/1.1 var(--display); letter-spacing: .01em; }
.gd-towing-verdict--yes { color: var(--blue-dark); }
.gd-towing-verdict--some { color: var(--ink); }
.gd-towing-verdict--no { color: var(--accent-ink); }
.gd-table tbody tr.gd-towing-hi > * { background: var(--blue-tint); font-weight: 700; }
.gd-towing-fit--yes { color: var(--blue-dark); font-weight: 700; }
.gd-towing-fit--some { color: var(--ink); }
.gd-towing-fit--no { color: var(--ink-2); }
.gd-towing-strip { display: block; }


/* family powertrain */
/* Powertrain family. Appended to gd.css by the build. Classes start with gd-pt-. */
.gd-pt-answer .gd-pt-say { margin: 6px 0 0; color: #fff; font: 800 clamp(28px, 7.4vw, 44px)/1.04 var(--display); letter-spacing: .01em; }
.gd-pt-answer .gd-answer__n { margin-top: 12px; }
.gd-pt-pick { margin: 0 0 12px; }
.gd-pt-in label { display: flex; flex-direction: column; justify-content: space-between; }
.gd-pt-in label[hidden] { display: none; }
.gd-pt-in .gd-pt-wide { grid-column: 1 / -1; }
.gd-pt-in select { text-overflow: ellipsis; }
.gd-table.gd-pt-tbl tbody tr.gd-pt-on > * { background: var(--accent-tint); }
.gd-pt-list { margin: 0; padding-left: 20px; }
.gd-pt-list li + li { margin-top: 4px; }
.gd-pt-v { margin: 0 0 6px; font-size: 18px; }
.gd-pt-cars { display: grid; gap: 12px; margin: 0 0 12px; }


/* family price */
/* Price family (appended to gd.css). Classes prefixed gd-price-. */
.gd-price-in { margin-bottom: 6px; }
.gd-price-as { margin: 0 0 20px; color: var(--ink-2); }
.gd-table tr.gd-price-base > th, .gd-table tr.gd-price-base > td { background: var(--blue-tint); font-weight: 700; }
.gd-table.gd-price-ch td:last-child { min-width: 240px; text-align: left; white-space: normal; }
#gd-price-f .gd-fig + .gd-fig { margin-top: 18px; }
#gd-price-s .gd-sec, #gd-price-k .gd-sec { margin-top: 24px; }
.gd-price-keys { margin: 18px 0; }
#gd-price-t .gd-sec h3 { margin-top: 18px; }


/* family ownership */
/* Ownership family (appended to gd.css). Classes prefixed gd-own-. */
.gd-own-in { margin-bottom: 6px; }
.gd-own-as { margin: 0 0 20px; color: var(--ink-2); }
.gd-own-left { margin: 4px 0 8px; font-weight: 700; }
.gd-table tr.gd-own-end > th, .gd-table tr.gd-own-end > td,
.gd-table tr.gd-own-me > th, .gd-table tr.gd-own-me > td { background: var(--blue-tint); font-weight: 700; }
.gd-own-keys { margin: 18px 0; }
#gd-own-t .gd-table-wrap + .gd-table-wrap { margin-top: 18px; }
#gd-own-chk { margin-bottom: 8px; }


/* family size */
/* Size family. Appended to gd.css by the build. Classes start with gd-size-. */
.gd-fig .gd-size-svg { max-width: 560px; }
.gd-fig .gd-size-svg--garage { max-width: 600px; }
.gd-size-tl { display: block; min-width: 150px; font-size: 13px; font-weight: 400; line-height: 1.35; }
.gd-size-dims { margin-bottom: 4px; }
.gd-sec .gd-table-wrap + .gd-table-wrap { margin-top: 22px; }
.gd-size-yes { color: var(--blue); }
.gd-size-no { color: var(--accent-ink); }
.gd-size-line { margin-top: 10px; }
.gd-size-rk { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.gd-size-me > * { font-weight: 700; background: var(--blue-tint) !important; }
.gd-size-mine { margin-top: 14px; padding: 14px; border-left: 4px solid var(--blue); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; }
.gd-size-mine .gd-size-line { margin-top: 0; }
.gd-size-res { list-style: none; margin-top: 6px; font-size: 17px; }
.gd-size-res li + li { margin-top: 4px; }
.gd-size-two { grid-template-columns: 1fr; }
.gd-size-align { grid-template-columns: minmax(0, 320px); }
.gd-size-sw { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; }
.gd-size-sw--a { background: rgba(29, 78, 216, .25); border: 2px solid var(--blue); }
.gd-size-sw--b { background: rgba(249, 115, 22, .3); border: 2px solid var(--accent-ink); }
.gd-size-garage label, .gd-size-align label { min-width: 0; }
@media (min-width: 960px) {
  .gd-size-two { grid-template-columns: 1fr 1fr; }
  .gd-size-two .gd-picker__sels--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gd-size-two .gd-picker__sels--4 .gd-sel:nth-child(3), .gd-size-two .gd-picker__sels--4 .gd-sel:nth-child(4) { grid-column: auto; }
}


/* family rankings */
.gd-rankings-t tbody td { text-align: right; }
.gd-rankings-t tbody td:nth-child(2), .gd-rankings-t tbody td:last-child, .gd-rankings-t tbody td.l { text-align: left; }
.gd-rankings-f[hidden] { display: none; }
.gd-rankings-f { align-items: end; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 640px) { .gd-rankings-f { grid-template-columns: repeat(3, minmax(0, 220px)); } }
.gd-rankings-f .gd-rankings-c { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--blue); border-radius: 10px; background: #fff; color: var(--ink); font-size: 16px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.gd-rankings-f .gd-rankings-c input { display: inline-block; width: 22px; height: 22px; min-height: 22px; margin: 0; accent-color: var(--blue); }
.gd-rankings-f p { grid-column: 1 / -1; margin: 0; }
.gd-rankings-all { margin-top: 14px; }
.gd-rankings-all > summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--blue); border-radius: 10px; color: var(--blue); font-weight: 700; cursor: pointer; }
.gd-rankings-all[open] > summary { margin-bottom: 12px; }
.gd-rankings-m { margin: 14px 0 0; }


/* family fit */
/* fit family. Appended to gd.css by the build. Classes start with gd-fit-. */
.gd-fit-yn { margin: 4px 0 12px; font: 800 24px/1.2 var(--display); color: var(--blue-dark); }
.gd-fit-no > td:nth-child(2) { font-weight: 700; color: var(--blue-dark); }
.gd-fit-on > th, .gd-fit-on > td { background: var(--accent-tint); }
.gd-fit-rules { margin: 8px 0 24px; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.gd-fit-d { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.gd-fit-in > p, .gd-fit-find > p { grid-column: 1 / -1; margin: 0; }
.gd-inputs + .gd-fit-in { margin-top: -10px; }
.gd-fit-tg { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.gd-inputs .gd-fit-cb { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; }
.gd-inputs .gd-fit-cb input { width: 22px; min-height: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.gd-fit-chk .gd-keys { margin-bottom: 8px; }
.gd-fit-chk .gd-table-wrap { margin-bottom: 8px; }
#gd-fig[hidden] { display: none; }


/* family performance */
.gd-pf-pick2 { grid-template-columns: 1fr; }
.gd-pf-2col { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.gd-pf-verdict { margin: 0 0 12px; font-size: 18px; }
.gd-pf-cvt { margin: 0 0 10px; font-size: 18px; }
#gd-pf-fuel { margin-top: 4px; }
.gd-pf-basis { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 960px) {
  .gd-pf-pick2 { grid-template-columns: 1fr 1fr; }
  .gd-pf-2col { grid-template-columns: 1fr 1fr; }
}


/* family visual */
/* Visual family (six picture tools). Appended to gd.css by the build. Classes start with gd-visual-. Figures keep their own colours. */
.gd-fig .gd-visual-svg { overflow: hidden; }
.gd-fig .gd-visual-hg { max-width: 420px; }
.gd-fig .gd-visual-cq { max-width: 560px; }
.gd-fig .gd-visual-cp { max-width: 100%; }
.gd-fig .gd-visual-lc { max-width: 100%; }
.gd-fig .gd-visual-lc3 { max-width: 720px; }
.gd-visual-drag { cursor: grab; touch-action: none; }
.gd-visual-two { grid-template-columns: 1fr; }
.gd-visual-span { grid-column: 1 / -1; }
.gd-visual-col > .gd-visual-twin, .gd-visual-col > #gd-visual-twin { margin-top: 10px; }
.gd-visual-twin, .gd-visual-swap { width: 100%; }
.gd-visual-twin[disabled] { background: var(--line); color: var(--ink-2); cursor: default; }
.gd-visual-rg__row { display: flex; gap: 8px; align-items: center; }
.gd-visual-rg__row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.gd-visual-rg__row input[type="number"] { flex: 0 0 96px; }
.gd-visual-in label, .gd-visual-in fieldset { min-width: 0; }
.gd-visual-act { display: flex; align-items: flex-end; }
.gd-visual-hint { margin: -8px 0 16px; }
.gd-visual-seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.gd-visual-seg legend { padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gd-visual-seg div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gd-visual-seg label { position: relative; flex: 1 1 auto; margin: 0; letter-spacing: 0; text-transform: none; }
.gd-visual-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gd-visual-seg span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 12px; border: 1.5px solid var(--blue); border-radius: 10px; background: #fff; color: var(--blue); font: 700 15px/1.2 var(--text); text-align: center; cursor: pointer; }
.gd-visual-seg input:checked + span { background: var(--blue); color: #fff; }
.gd-visual-seg input:focus-visible + span { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
.gd-visual-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gd-visual-chips button { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--blue); border-radius: 999px; background: #fff; color: var(--blue); font: 700 15px var(--text); cursor: pointer; }
.gd-visual-chips button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.gd-visual-sub { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.gd-visual-jugrow { max-width: 640px; margin: 8px auto 0; }
.gd-fig .gd-visual-jugs { margin: 6px 0 0; }
/* Charge calendar: planner card */
.gd-visual-cal { position: relative; max-width: 640px; margin: 14px auto 0; padding: 18px 8px 10px; background: #FFFDF7; border: 1px solid #E7DCC8; border-radius: 10px; color: #2E2A26; }
.gd-visual-cal::before, .gd-visual-cal::after { content: ""; position: absolute; top: -8px; width: 64px; height: 18px; opacity: .85; }
.gd-visual-cal::before { left: 10px; background: #7FB7BE; transform: rotate(-8deg); }
.gd-visual-cal::after { right: 10px; background: #F2A65A; transform: rotate(8deg); }
.gd-visual-wk, .gd-visual-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gd-visual-wk span { text-align: center; font-size: 12px; font-weight: 700; color: #6B5E4E; }
.gd-visual-days { margin-top: 4px; }
.gd-visual-day { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 72px; padding: 4px 2px; border: 1px solid #E7DCC8; border-radius: 6px; background: #fff; color: #2E2A26; font: 500 11px/1.2 var(--text); cursor: pointer; overflow: hidden; }
.gd-visual-day.is-trip { background: repeating-linear-gradient(45deg, #F2A65A 0 6px, #F7C08A 6px 12px); }
.gd-visual-dn { align-self: flex-start; font-size: 12px; font-weight: 700; }
.gd-visual-bat { width: 14px; height: 28px; margin-top: 2px; }
.gd-visual-pc { margin-top: 2px; font-variant-numeric: tabular-nums; }
.gd-visual-tr, .gd-visual-st { font-size: 10px; font-weight: 700; }
.gd-visual-bolt { width: 7px; height: 10px; margin-right: 1px; vertical-align: -1px; }
.gd-visual-stamp { display: block; width: 24px; height: 24px; margin-top: 2px; animation: gd-visual-stamp .2s ease-out; }
@keyframes gd-visual-stamp { from { transform: scale(1.3); } }
/* Cargo cubes: block faces */
.gd-visual-qa path, .gd-visual-qb path { stroke: #161616; stroke-width: 1.25; stroke-linejoin: round; }
.gd-visual-qa .t { fill: #FFD45C; } .gd-visual-qa .l { fill: #F5B92E; } .gd-visual-qa .r { fill: #D9971A; }
.gd-visual-qb .t { fill: #8FA2FF; } .gd-visual-qb .l { fill: #5671F0; } .gd-visual-qb .r { fill: #3C55CF; }
.gd-visual-drop { animation: gd-visual-drop .12s ease-out backwards; }
@keyframes gd-visual-drop { from { transform: translateY(-12px); opacity: 0; } }
/* Legroom card: numbered safety-card panels */
.gd-visual-cards { display: grid; gap: 10px; }
.gd-visual-card { padding: 8px; border: 2px solid #1D3557; border-radius: 12px; background: #fff; }
.gd-visual-card__h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: #1D3557; font: 800 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.gd-visual-card__h span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #1D3557; color: #fff; font: 700 14px var(--text); }
/* Class photo */
.gd-visual-mem { cursor: pointer; }
.gd-visual-mem:focus { outline: none; }
.gd-visual-mem:focus-visible rect:first-child { stroke: #fff; stroke-width: 3; }
.gd-visual-tap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-weight: 700; }
.gd-visual-h2 { margin: 24px 0 8px; font: 800 26px/1.1 var(--display); }
.gd-visual-roll { padding-left: 28px; font-variant-numeric: tabular-nums; }
.gd-visual-roll li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.gd-visual-roll li.is-me { font-weight: 700; color: var(--blue-dark); }
.gd-visual-v { float: right; }
.gd-visual-more summary { min-height: 44px; padding: 10px 0; color: var(--blue); font-weight: 700; cursor: pointer; }
.gd-visual-dots { display: block; max-width: none; }
@media (prefers-reduced-motion: reduce) { .gd-visual-drop, .gd-visual-stamp { animation: none; } }
@media (min-width: 960px) {
  .gd-visual-two { grid-template-columns: 1fr 1fr; }
  .gd-visual-two .gd-picker__sels--4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gd-visual-two .gd-picker__sels--4 .gd-sel:nth-child(3), .gd-visual-two .gd-picker__sels--4 .gd-sel:nth-child(4) { grid-column: auto; }
  .gd-visual-cards { grid-template-columns: 1fr 1fr; }
  .gd-visual-cards .gd-visual-card:nth-child(3) { grid-column: 1 / -1; }
  .gd-visual-day { min-height: 92px; }
  .gd-visual-bat { width: 20px; height: 40px; }
  .gd-visual-stamp { position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; margin: 0; }
}