/* CarXray.nl — design system (from the 2026-10-08 design set). Typeface: IBM Plex Sans (SIL OFL 1.1, self-hosted), 2026-10-16. */
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-ext-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-ext-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-ext-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/assets/fonts/ibm-plex-sans-latin-ext-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --navy: #0a1a42; --ink: #1d2b4a; --muted: #5d6b85; --faint: #8592a8;
  --blue: #0b5fff; --blue-d: #084ad1; --blue-50: #eef4ff; --blue-100: #dde9ff;
  --green: #138a49; --green-d: #0f6f3b; --green-btn: #18753f; --green-50: #e8f6ee; --green-100: #cdebd9;
  --red: #e5353a; --red-50: #fdecec; --amber: #f5b300; --amber-50: #fff6e3; --amber-100: #fbe4ad;
  --c-blue: #1f6fe5; --slate: #475569;
  --bg: #f4f7fb; --card: #fff; --line: #e1e7f0; --line-2: #cfd8e5;
  --r: 10px; --r-lg: 14px; --sh: 0 1px 2px rgba(16, 32, 72, .05), 0 2px 10px rgba(16, 32, 72, .04);
  --head: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--body); color: var(--ink); background: var(--bg); }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--navy); margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; line-height: 1.15; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.25; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #86b0ff; outline-offset: 2px; border-radius: 4px; }

/* ---------- header / footer */
.top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.top-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { font-family: var(--head); font-weight: 700; font-size: 27px; letter-spacing: -.03em; text-decoration: none !important; white-space: nowrap; }
.logo-a { color: var(--navy); } .logo-b { color: var(--blue); }
.nav { flex: 1; display: flex; justify-content: center; }
.nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--navy); font-size: 15px; font-weight: 500; padding: 22px 0 21px; border-bottom: 3px solid transparent; }
.nav a:hover { text-decoration: none; color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
.top-r { display: flex; align-items: center; gap: 14px; }
.icon-btn { background: none; border: 0; padding: 6px; color: var(--navy); cursor: pointer; display: inline-flex; border-radius: 8px; }
.icon-btn .ic { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--blue-50); }
.sep { width: 1px; height: 24px; background: var(--line-2); }
.lang { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--line-2); }
.lang a { color: var(--navy); font-weight: 500; }
.lang a[aria-current] { color: var(--blue); font-weight: 700; }
.menu-btn { display: none; }
.search-pop { border-top: 1px solid var(--line); background: #fff; padding: 16px 0 20px; box-shadow: 0 10px 24px rgba(10, 26, 66, .08); }
.foot { background: #fff; border-top: 1px solid var(--line); margin-top: 40px; }
.foot-in { display: flex; align-items: center; gap: 28px; padding-top: 22px; padding-bottom: 14px; flex-wrap: wrap; }
.logo-foot { font-size: 25px; }
.foot-nav { flex: 1; border-left: 1px solid var(--line); padding-left: 22px; }
.foot-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.foot-nav a { color: var(--navy); font-size: 13px; }
.foot-src { font-size: 11.5px; color: var(--muted); line-height: 1.55; text-align: left; }
.foot-legal { display: flex; gap: 18px; padding-bottom: 18px; font-size: 12px; color: var(--faint); flex-wrap: wrap; }
.foot-legal a { color: var(--faint); }

/* ---------- generic */
main { display: block; }
.page-pad { padding-top: 22px; }
.crumbs ol { display: flex; gap: 8px; list-style: none; margin: 0 0 6px; padding: 0; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--faint); }
.crumbs a { color: var(--muted); }
.demo-tag { display: inline-block; font-size: 12px; color: var(--muted); background: #e9eef6; padding: 3px 9px; border-radius: 6px; }
.tag-line { font-size: 12.5px; color: var(--muted); }
.lead { font-size: clamp(17px, 1.8vw, 22px); color: var(--ink); margin-top: 6px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
.pad { padding: 22px 24px; }
.panel { background: var(--blue-50); border-radius: var(--r-lg); }
.muted { color: var(--muted); } .small { font-size: 13px; } .tiny { font-size: 11.5px; }
.row { display: flex; gap: 12px; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sec { margin-top: 26px; }
.sec-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 12px; }
.sec-h p { color: var(--muted); font-size: 15px; margin-top: 2px; }
.link-arr { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.link-arr .ic { width: 16px; height: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1.5px solid transparent; border-radius: 8px; padding: 11px 18px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none !important; line-height: 1.2; }
.btn .ic { width: 17px; height: 17px; }
.btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--blue-d); }
.btn-green { background: var(--green-btn); color: #fff; } .btn-green:hover { background: var(--green-d); }
.btn-line { background: #fff; color: var(--blue); border-color: var(--blue); } .btn-line:hover { background: var(--blue-50); }
.btn-gline { background: #fff; color: var(--green-btn); border-color: var(--green-btn); } .btn-gline:hover { background: var(--green-50); }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line-2); font-weight: 600; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-block { width: 100%; }

/* form fields */
.field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 14px; height: 46px; }
.field input, .field select { border: 0; outline: 0; background: none; width: 100%; height: 100%; font-size: 15px; }
.field .ic { color: var(--navy); width: 20px; height: 20px; }
.field.big { height: 54px; }
.sel { position: relative; display: block; }
.sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; padding: 0 40px 0 14px; font-size: 15px; color: var(--ink); cursor: pointer; }
.sel::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.lbl { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.ac { list-style: none; margin: 6px 0 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; max-height: 340px; overflow: auto; box-shadow: var(--sh); }
.ac:empty { display: none; }
.ac a, .ac button { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; color: var(--ink); width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font-size: 15px; }
.ac a:hover, .ac button:hover, .ac [aria-selected="true"] { background: var(--blue-50); text-decoration: none; }
.ac small { color: var(--muted); }
.ac-wrap { position: relative; }
.ac-wrap .ac { position: absolute; left: 0; right: 0; z-index: 20; }

/* plate */
.plate { display: inline-flex; align-items: stretch; background: #f7c600; border: 2px solid #1a1a1a; border-radius: 6px; overflow: hidden; font-family: var(--head); font-weight: 700; color: #111; height: 36px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.plate-eu { background: #1546a8; color: #fff; width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; gap: 1px; }
.plate-eu svg { width: 16px; height: 16px; }
.plate-eu b { font-size: 10px; line-height: 1; }
.plate-t { padding: 0 14px; display: flex; align-items: center; font-size: 22px; letter-spacing: .03em; white-space: nowrap; }
.plate-lg { height: 54px; border-radius: 7px; } .plate-lg .plate-eu { width: 36px; } .plate-lg .plate-eu svg { width: 22px; height: 22px; } .plate-lg .plate-eu b { font-size: 13px; } .plate-lg .plate-t { font-size: 36px; padding: 0 24px; }
.plate-md { height: 44px; } .plate-md .plate-t { font-size: 27px; padding: 0 18px; } .plate-md .plate-eu { width: 30px; }
.plate-input { display: flex; align-items: stretch; background: #f7c600; border: 2px solid #1a1a1a; border-radius: 6px; overflow: hidden; height: 46px; }
.plate-input .plate-eu { width: 30px; }
.plate-input input { border: 0; outline: 0; background: transparent; font-family: var(--head); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; padding: 0 14px; width: 100%; color: #111; }
.plate-input input::placeholder { color: #2a2a2a; font-size: 15px; letter-spacing: .02em; }

/* tier badges */
.tb { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-family: var(--head); font-size: 14px; flex: none; }
.tb-A { background: var(--red); color: #fff !important; } .tb-B { background: var(--amber); color: #1b1b1b !important; } .tb-C { background: var(--c-blue); color: #fff !important; } .tb-D { background: var(--slate); color: #fff !important; }
.tb.sq { border-radius: 6px; }
.tb.lg { width: 42px; height: 42px; font-size: 21px; }
.tchip { display: inline-flex; align-items: center; gap: 7px; border-radius: 6px; padding: 2px 9px 2px 3px; font-size: 13px; font-weight: 600; }
.tchip .tb { width: 21px; height: 21px; font-size: 12px; }
.tchip-A { background: var(--red-50); color: #c62828; } .tchip-B { background: #fff1d6; color: #9a6400; } .tchip-C { background: #e6efff; color: #1556c4; } .tchip-D { background: #edf0f4; color: #3d4a5c; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; }
.pill-blue { background: #e6efff; color: #1556c4; } .pill-amber { background: #fde7a6; color: #6b4800; } .pill-grey { background: #edf1f6; color: var(--muted); }

/* window strip */
.window { display: flex; align-items: center; justify-content: center; gap: 10px; background: #e8f0fb; border-radius: 10px; padding: 11px 16px; font-size: 13.5px; color: var(--ink); }
.window .ic { color: var(--blue); width: 20px; height: 20px; }

/* big percentages */
.big { font-family: var(--head); font-weight: 700; font-size: 34px; letter-spacing: -.02em; line-height: 1.05; }
.big.green { color: var(--green); } .big.navy { color: var(--navy); }
.nci { font-size: 12.5px; color: var(--muted); }
.bar { height: 10px; border-radius: 6px; background: #e8edf5; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--blue); border-radius: 6px; }
.bar.red > i { background: var(--red); } .bar.grey > i { background: #8b95a6; }

/* car images */
.car { width: 100%; height: auto; }

/* notices */
.notice { display: flex; gap: 16px; align-items: center; border-radius: var(--r-lg); padding: 18px 22px; }
.notice > .ic { width: 34px; height: 34px; }
.notice h2, .notice h3 { font-size: 20px; }
.notice-green { background: var(--green-50); border: 1px solid var(--green-100); } .notice-green > .ic, .notice-green h2, .notice-green h3 { color: var(--green-d); }
.notice-amber { background: var(--amber-50); border: 1px solid var(--amber-100); } .notice-amber > .ic { color: var(--amber); }
.notice-blue { background: var(--blue-50); border: 1px solid var(--blue-100); } .notice-blue > .ic { color: var(--blue); }
.round-ic { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.round-ic .ic { width: 24px; height: 24px; }
.ri-green { background: var(--green-btn); color: #fff; } .ri-blue { background: var(--blue); color: #fff; } .ri-amber { background: var(--amber); color: #fff; } .ri-soft { background: var(--blue-50); color: var(--blue); }

/* charts */
.chart { width: 100%; height: auto; display: block; }
.c-ax { font: 12px var(--body); fill: #5d6b85; }
.c-note { font: 11px var(--body); fill: #7b879b; }
.c-tip { font: 11px var(--body); fill: #5d6b85; }
.c-tip-t { font: 700 12px var(--body); fill: #0a1a42; }
.c-row { font: 700 13px var(--body); fill: #0a1a42; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--ink); display: grid; gap: 10px; }
.legend li { display: flex; gap: 8px; align-items: center; }
.lg-line { width: 26px; height: 3px; background: var(--blue); border-radius: 2px; position: relative; }
.lg-line::after { content: ''; position: absolute; left: 9px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.lg-dash { width: 26px; border-top: 2.5px dashed #8a94a6; }
.lg-band { width: 18px; height: 14px; background: #dce8ff; border-radius: 3px; }

/* tabs (segmented) */
.seg { display: inline-flex; background: #eef2f8; border-radius: 9px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: none; padding: 9px 18px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--navy); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; padding: 10px 2px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 700; color: var(--navy); background: #f2f5fa; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl .num { text-align: center; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.dot-green { background: var(--green); } .dot-grey { background: #a0a9b8; }

/* faq */
.faq details { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: 8px; }
.faq summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 16px 14px; color: var(--ink); font-size: 14.5px; }

/* ================================================================== pages */

/* home */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #dfeaf6 0%, #eef3f8 46%, #c9d8c3 64%, #a7bf94 76%, #8a9fa8 84%, #6f7b85 100%); }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 30%, rgba(255, 244, 214, .9), rgba(255, 244, 214, 0) 45%); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, #7c8791, #5f6a74); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding-top: 30px; padding-bottom: 26px; align-items: end; }
.hero h1 { font-size: clamp(38px, 5.2vw, 62px); margin-top: 6px; }
.hero .lead { font-size: 20px; margin-top: 8px; }
.hero .sub { color: var(--muted); font-size: 15px; margin-top: 2px; }
.hero-car { align-self: end; margin-bottom: -6px; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25)); }
.hero-forms { display: flex; gap: 0; align-items: stretch; margin-top: 18px; }
.hero-box { background: #fff; border-radius: 10px; padding: 14px 16px 16px; width: 252px; box-shadow: 0 6px 20px rgba(10, 26, 66, .12); }
.hero-box h2 { font-size: 15px; font-family: var(--body); font-weight: 700; letter-spacing: 0; margin-bottom: 10px; }
.hero-box .field { height: 40px; font-size: 13px; }
.hero-box .btn { width: 100%; margin-top: 10px; }
.hero-or { align-self: center; color: var(--muted); font-size: 13px; padding: 0 10px; border-left: 1px solid rgba(0, 0, 0, .1); height: 60%; display: flex; align-items: center; margin-left: 10px; }
.usp { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 0 14px; }
.usp li { display: flex; gap: 14px; align-items: center; padding: 0 20px; border-left: 1px solid var(--line); }
.usp li:first-child { border-left: 0; padding-left: 0; }
.usp b { display: block; color: var(--navy); font-size: 15px; }
.usp span { font-size: 13px; color: var(--muted); }
.usp .ic { width: 42px; height: 42px; }
.usp ul, ul.usp { list-style: none; margin: 0; padding-left: 0; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.step { position: relative; padding: 18px 20px; min-height: 148px; overflow: hidden; }
.step .num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-50); color: var(--blue); font-weight: 700; align-items: center; justify-content: center; font-family: var(--head); }
.step h3 { margin-top: 10px; font-size: 17px; }
.step p { font-size: 13.5px; color: var(--muted); max-width: 62%; margin-top: 4px; }
.step .art { position: absolute; right: 12px; bottom: 12px; width: 38%; }
.step .art-ic { position: absolute; right: 26px; bottom: 26px; color: #8e9bb0; }
.step .art-ic .ic { width: 64px; height: 64px; stroke-width: 1.4; }
.step-top-ic { position: absolute; left: 62px; top: 16px; color: var(--blue); }
.step-top-ic .ic { width: 34px; height: 34px; }
.mini-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.mini { display: grid; grid-template-columns: 42% 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; color: inherit; }
.mini:hover { text-decoration: none; border-color: var(--blue-100); }
.mini h3 { font-size: 15px; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
.mini .yrs { font-size: 13px; color: var(--muted); }
.mini .lab { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.mini .big { font-size: 30px; }
.mini .nci { white-space: nowrap; font-size: 10.5px; }
.mini .chev { color: var(--navy); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.duo-l { background: var(--blue-50); border-radius: var(--r-lg); padding: 22px 24px; }
.duo-r { background: var(--green-50); border-radius: var(--r-lg); padding: 22px 24px; }
.duo h2 { font-size: 23px; }
.duo .hd { display: flex; gap: 12px; align-items: flex-start; }
.duo .hd .ic { width: 30px; height: 30px; color: var(--blue); }
.duo-r .hd .ic { color: var(--green-d); }
.duo .hd p { font-size: 14px; color: var(--ink); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.checks .ok { color: var(--green); width: 22px; height: 22px; }
.checks b { display: block; color: var(--navy); font-size: 14px; }
.checks span { color: var(--muted); font-size: 12.5px; }
.sample-list { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--line); }
.sample-list h3 { font-size: 14px; font-family: var(--body); letter-spacing: 0; margin-bottom: 8px; }
.sample-list li { font-size: 13px; }
.cb { display: inline-flex; width: 20px; height: 20px; border-radius: 4px; background: var(--green-btn); color: #fff; align-items: center; justify-content: center; flex: none; }
.cb .ic { width: 14px; height: 14px; stroke-width: 3; }
.cb.warn { background: var(--amber); border-radius: 50%; font-weight: 700; font-size: 13px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.trio > div { display: flex; gap: 14px; padding: 4px 22px; border-left: 1px solid var(--line-2); }
.trio > div:first-child { border-left: 0; padding-left: 0; }
.trio .ic { width: 40px; height: 40px; color: var(--blue); }
.trio b { display: block; color: var(--navy); font-size: 14.5px; }
.trio span { font-size: 12.5px; color: var(--muted); }

/* models hub / brand */
.bhero { position: relative; overflow: hidden; background: linear-gradient(180deg, #f5f8fc 0%, #eef3f8 50%, #dfe8de 78%, #c9d5cd 100%); }
.bhero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244, 247, 251, 1) 35%, rgba(244, 247, 251, .2) 70%, rgba(244, 247, 251, 0)); }
.bhero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; padding-top: 22px; padding-bottom: 10px; align-items: end; }
.bhero .car { max-width: 330px; margin-left: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .2)); }
.filters { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin-top: 14px; }
.chip-field { display: flex; align-items: center; gap: 6px; height: 46px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding-left: 14px; position: relative; }
.chip-field > span { font-size: 14px; color: var(--navy); white-space: nowrap; font-weight: 600; }
.chip-field select { appearance: none; -webkit-appearance: none; border: 0; background: none; height: 100%; flex: 1; font-size: 14px; padding-right: 40px; cursor: pointer; color: var(--ink); }
.chip-field::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.infobar { display: flex; gap: 12px; align-items: center; background: #e8f0fb; border-radius: 10px; padding: 13px 18px; font-size: 14px; margin-top: 14px; }
.infobar .ic { color: var(--blue); width: 24px; height: 24px; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.mcard { padding: 14px 18px 18px; position: relative; }
.mcard .car { max-width: 260px; margin: 2px auto 6px; }
.mcard h2 { font-size: 19px; font-family: var(--head); }
.mcard .yrs { color: var(--muted); font-size: 15px; }
.mcard .fuel { display: inline-flex; align-items: center; gap: 6px; background: #eef2f8; border-radius: 16px; padding: 4px 12px 4px 8px; font-size: 13px; color: var(--muted); margin: 10px 0 12px; }
.mcard .fuel .ic { width: 17px; height: 17px; color: var(--navy); }
.mcard .k { font-size: 14px; color: var(--navy); } .mcard .k b { font-weight: 700; } .mcard .k span { color: var(--muted); }
.mcard .big { font-size: 34px; margin-top: 2px; }
.mcard-f { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 12px; }
.mcard-f .btn { flex: 0 0 auto; padding: 10px 30px; }
.cmp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--navy); cursor: pointer; }
.cmp-check input { width: 20px; height: 20px; accent-color: var(--blue); }
.sel-flag { position: absolute; top: 12px; right: 14px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 4px 9px; display: none; gap: 5px; align-items: center; }
.sel-flag .ic { width: 13px; height: 13px; stroke-width: 3; }
.mcard.is-sel .sel-flag { display: inline-flex; }
.mcard[hidden] { display: none; }
.lowdata { margin-top: 18px; padding: 16px 22px; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; }
.lowdata > .ic { width: 50px; height: 50px; color: #9aa4b2; grid-row: span 2; }
.lowdata h3 { font-size: 15.5px; font-family: var(--body); letter-spacing: 0; }
.low-list { display: flex; gap: 20px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.low-list a { display: flex; gap: 12px; align-items: center; color: var(--navy); font-size: 14px; padding-right: 20px; border-right: 1px solid var(--line); }
.low-list img { width: 84px; filter: grayscale(.6); opacity: .85; }
.low-list .more { margin-left: auto; border: 0; }
.fair { display: flex; gap: 16px; align-items: center; margin-top: 20px; background: #e8f0fb; border-radius: 12px; padding: 18px 24px; }
.fair > .ic { width: 36px; height: 36px; color: var(--blue); }
.fair h2 { font-size: 20px; }
.fair p { font-size: 14px; }
.fair .link-arr { margin-left: auto; }
.cmpbar { position: sticky; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(10, 26, 66, .06); margin-top: 20px; }
.cmpbar-in { display: flex; gap: 16px; align-items: center; height: 74px; }
.cmpbar .ic.car-ic { width: 36px; height: 36px; color: var(--navy); }
.cmpbar b { font-size: 17px; color: var(--navy); }
.cmpbar .chips { display: flex; gap: 10px; flex: 1; flex-wrap: wrap; }
.cmpbar .chips span { display: inline-flex; align-items: center; gap: 10px; background: #eef2f8; border-radius: 7px; padding: 6px 10px; font-size: 14px; }
.cmpbar .chips button { border: 0; background: none; padding: 0; color: var(--blue); cursor: pointer; display: inline-flex; }
.cmpbar .chips .ic { width: 16px; height: 16px; }
.cmpbar .btn { padding: 13px 32px; }
.brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.brand-card { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; color: var(--navy); }
.brand-card:hover { text-decoration: none; border-color: var(--blue-100); }
.brand-card b { font-family: var(--head); font-size: 18px; }
.brand-card span { color: var(--muted); font-size: 13px; white-space: nowrap; margin-left: 8px; }

/* model page */
.mhead { display: grid; grid-template-columns: 1fr 1.05fr .95fr; gap: 18px; align-items: start; margin-top: 4px; }
.mhead h1 { font-size: clamp(36px, 4.6vw, 54px); margin-top: 10px; }
.mhead .yrs { font-size: 19px; color: var(--ink); margin-top: 4px; }
.gen-nav { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.mhead .car { margin-top: 4px; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .18)); }
.verdict { background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--r-lg); padding: 16px 18px; }
.verdict.worse { background: var(--amber-50); border-color: var(--amber-100); }
.verdict.same { background: var(--blue-50); border-color: var(--blue-100); }
.verdict-h { display: flex; gap: 10px; align-items: flex-start; }
.verdict h2 { font-size: 17px; font-family: var(--body); letter-spacing: 0; font-weight: 700; color: var(--navy); }
.verdict p { font-size: 14px; color: var(--ink); margin-top: 2px; }
.verdict .btn { width: 100%; margin-top: 12px; }
.ok-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--green-btn); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ok-dot .ic { width: 16px; height: 16px; stroke-width: 3; }
.verdict.worse .ok-dot { background: var(--amber); } .verdict.same .ok-dot { background: var(--blue); }
.kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 16px; }
.kpi { display: flex; gap: 16px; padding: 18px 20px; align-items: flex-start; }
.kpi h2 { font-size: 16px; font-family: var(--body); letter-spacing: 0; font-weight: 700; }
.kpi .demo-tag { padding: 0; background: none; font-size: 12px; }
.kpi .big { margin-top: 2px; }
.kpi-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px; }
.chart-card { margin-top: 16px; padding: 20px 22px 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.chart-body { display: grid; grid-template-columns: 1fr 180px; gap: 18px; align-items: start; margin-top: 8px; }
.chart-foot { display: flex; justify-content: space-between; align-items: center; background: #f2f6fc; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; gap: 10px; }
.chart-foot button { border: 0; background: none; color: var(--blue); font-weight: 600; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 0; font-size: 14px; }
.datatable { margin-top: 10px; }
.spots { margin-top: 16px; padding: 18px 22px; }
.spots-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.tier-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 540px; }
.tier-tabs button { background: #fff; border: 0; border-left: 1px solid var(--line); display: flex; gap: 10px; align-items: center; padding: 9px 16px; font-weight: 600; font-size: 14px; color: var(--navy); cursor: pointer; }
.tier-tabs button:first-child { border-left: 0; }
.tier-tabs button[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--red); border-radius: 10px; background: #fff; }
.tier-tabs button[data-tier="B"][aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--amber); }
.tier-tabs button[data-tier="C"][aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--c-blue); }
.spots-tbl { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.spots-tbl th { font-size: 12.5px; color: var(--muted); font-weight: 600; text-align: left; padding: 8px; border-bottom: 1px solid var(--line); background: #f6f8fb; }
.spots-tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.spots-tbl th:nth-child(1) { width: 30%; } .spots-tbl th:nth-child(2) { width: 26%; } .spots-tbl th:nth-child(4) { width: 18%; }
.spots-tbl .bar { width: 100%; max-width: 220px; }
.spots-tbl .r-up { color: var(--red); font-weight: 700; } .spots-tbl .r-ok { color: var(--green); font-weight: 700; }
.spots-tbl tr.more { display: none; } .spots-tbl.all tr.more { display: table-row; }
.duo2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.recall { padding: 18px 22px; }
.recall-h { display: flex; gap: 14px; align-items: flex-start; }
.recall-h .ic { width: 38px; height: 38px; color: var(--green); }
.recall-f { display: flex; gap: 12px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.recall-f .plate-input { flex: 1; min-width: 200px; height: 54px; }
.recall-f .plate-input input { font-size: 26px; }
.about { padding: 18px 22px; display: grid; grid-template-columns: 1fr 150px; gap: 12px; }
.about-h { display: flex; gap: 12px; align-items: center; grid-column: 1 / -1; }
.about-h .round-ic { background: var(--blue-50); color: var(--blue); }
.about dl { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; font-size: 13px; }
.about dt { color: var(--muted); padding: 7px 18px 7px 0; border-bottom: 1px solid var(--line); }
.about dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.about .car { align-self: center; }
.about .link-arr { grid-column: 1 / -1; justify-self: end; }
.faq-card { margin-top: 16px; padding: 18px 22px; }
.take { display: flex; gap: 16px; align-items: center; background: var(--green-50); border-radius: var(--r-lg); padding: 18px 22px; margin-top: 16px; }
.take > .ic { width: 42px; height: 42px; color: var(--green-d); }
.take h2 { font-size: 20px; }
.take p { font-size: 14px; }
.take .btn { margin-left: auto; padding: 13px 34px; }

/* compare */
.cmp-ctrl { display: grid; grid-template-columns: auto minmax(200px, 1.1fr) auto auto minmax(180px, 1fr) auto auto; gap: 16px; align-items: center; background: #e8f0fb; border-radius: var(--r-lg); padding: 16px 22px; margin-top: 16px; }
.cmp-ctrl > .ic { width: 30px; height: 30px; color: var(--blue); }
.cmp-ctrl .divider { width: 1px; height: 48px; background: var(--line-2); }
.cmp-table { margin-top: 16px; display: grid; overflow: hidden; }
.cmp-table .cell { padding: 14px 18px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cmp-table .rowh { border-left: 0; padding-left: 20px; }
.rowh b { display: block; color: var(--navy); font-size: 15.5px; }
.rowh span { font-size: 13px; color: var(--muted); }
.cmp-head { display: flex; justify-content: space-between; gap: 8px; }
.cmp-head h2 { font-size: 16px; font-family: var(--body); letter-spacing: 0; font-weight: 700; }
.cmp-head .yrs { font-size: 15px; color: var(--muted); }
.cmp-head .acts { display: flex; gap: 12px; align-items: flex-start; font-size: 12px; }
.cmp-head .acts button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--blue); }
.cmp-head .acts .ic { width: 15px; height: 15px; color: var(--navy); }
.cmp-best { background: var(--green-50); }
.cmp-val .big { font-size: 26px; }
.cmp-val .bar { margin: 8px 0 8px; }
.top3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.top3 li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.nr { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--red); flex: none; }
.nr.n2, .nr.n3 { background: var(--amber); color: #1b1b1b; }
.cmp-next .btn { width: 100%; margin-top: 6px; }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.why > div { display: flex; gap: 18px; padding: 18px 22px; }
.why > div > .ic { width: 34px; height: 34px; color: var(--blue); }
.why h2 { font-size: 16.5px; font-family: var(--body); letter-spacing: 0; font-weight: 700; }
.why p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* plate report */
.phead { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
.phead h1 { font-size: clamp(36px, 4.8vw, 54px); }
.phead .meta { font-size: 17px; color: var(--navy); font-weight: 600; margin-top: 12px; }
.phead .car { filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .16)); max-width: 380px; margin-left: auto; }
.pform { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pform .plate-input { width: 300px; height: 54px; }
.pform .plate-input input { font-size: 28px; }
.pform .plate-input input::placeholder { font-size: 16px; }
.alert { display: flex; gap: 18px; align-items: center; background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--r-lg); padding: 18px 24px; margin-top: 18px; }
.alert > .ic { width: 42px; height: 42px; color: var(--amber); }
.alert h2 { font-size: 22px; }
.alert p { font-size: 15px; }
.alert .btn { margin-left: auto; white-space: nowrap; }
.alert.ok { background: var(--green-50); border-color: var(--green-100); } .alert.ok > .ic { color: var(--green); }
.alert.err { background: var(--red-50); border-color: #f7c6c8; } .alert.err > .ic { color: var(--red); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.fact { padding: 18px 20px; }
.fact-h { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; color: var(--navy); font-size: 14.5px; }
.fact-h .ic { width: 38px; height: 38px; flex: none; }
.fact .big { font-size: 28px; margin-top: 10px; }
.fact .big.sm { font-size: 22px; }
.fact small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.c-green { color: var(--green); } .c-amber { color: #e49b00; } .c-blue { color: var(--blue); } .c-red { color: var(--red); } .c-navy { color: var(--navy); }
.hist-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 16px; margin-top: 16px; }
.hist { padding: 18px 22px; }
.hist-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.hist-head p { color: var(--muted); font-size: 14px; }
.legend4 { display: grid; grid-template-columns: auto auto; gap: 8px 20px; font-size: 12px; color: var(--ink); }
.legend4 span { display: inline-flex; gap: 8px; align-items: center; }
.legend4 .tb { width: 18px; height: 18px; font-size: 11px; border-radius: 4px; }
.tl { list-style: none; margin: 18px 0 0; padding: 0; }
.tl > li { display: grid; grid-template-columns: 110px 26px 1fr; gap: 10px; align-items: start; padding-bottom: 16px; position: relative; }
.tl > li::before { content: ''; position: absolute; left: 122px; top: 6px; bottom: -6px; width: 2px; background: #dfe5ee; }
.tl > li:last-child::before { display: none; }
.tl time { font-weight: 700; color: var(--navy); font-size: 14.5px; padding-top: 8px; }
.tl .dotm { width: 12px; height: 12px; border-radius: 50%; margin: 10px 0 0 7px; position: relative; z-index: 1; background: #9aa4b2; }
.dotm.A { background: var(--red); } .dotm.B { background: var(--amber); } .dotm.C { background: var(--blue); }
.tl-items { display: grid; gap: 0; border-radius: 8px; overflow: hidden; }
.tl-items.hasA { background: #fde9ea; }
.tl-items.only { background: #f4f7fb; }
.tl-row { display: flex; gap: 12px; align-items: center; padding: 10px 14px; font-size: 14px; color: var(--navy); }
.tl-row .tb { width: 24px; height: 24px; border-radius: 5px; font-size: 13px; }
.tl-row .grow { flex: 1; }
.tl-row small { color: var(--muted); }
.tl-row a { font-size: 13px; font-weight: 600; }
.tl-none { padding-top: 8px; font-size: 14px; color: var(--ink); }
.tl-note { display: flex; gap: 10px; align-items: center; background: #e8f0fb; border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--ink); margin-top: 4px; }
.tl-note .ic { width: 18px; height: 18px; color: var(--blue); }
.side-stack { display: grid; gap: 16px; align-content: start; }
.vs { padding: 18px 20px; }
.vs h2 { font-size: 18px; }
.vs .row2 { margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.vs .bar { height: 14px; margin-top: 6px; }
.notell { padding: 18px 20px; }
.notell-h { display: flex; gap: 12px; align-items: center; }
.notell-h .ic { width: 32px; height: 32px; color: var(--blue); }
.notell ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.notell li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.notell li .ic { width: 24px; height: 24px; color: #8a94a6; }
.recall-box { display: flex; gap: 16px; align-items: center; background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--r-lg); padding: 18px 24px; margin-top: 16px; }
.recall-box > .ic { width: 40px; height: 40px; color: var(--amber); }
.recall-box h2 { font-size: 20px; }
.recall-box .btn { margin-left: auto; }
.take3 { background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--r-lg); padding: 18px 24px; margin-top: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: center; }
.take3 > .ic { width: 42px; height: 42px; color: var(--green-d); grid-row: span 2; }
.take3 h2 { font-size: 20px; }
.take3 ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; font-size: 13.5px; }
.take3 ol li { display: flex; gap: 8px; align-items: center; }
.take3 ol .nr { background: var(--green-btn); color: #fff; }
.take3 .btn { grid-row: span 2; }
.privacy { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: #e8f0fb; border-radius: var(--r-lg); padding: 18px 24px; margin-top: 16px; }
.privacy > .ic { width: 40px; height: 40px; color: var(--blue); }
.privacy h2 { font-size: 16px; font-family: var(--body); letter-spacing: 0; font-weight: 700; }
.privacy p { font-size: 13px; color: var(--muted); }
.privacy form { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; border-left: 1px solid var(--line-2); padding-left: 22px; }
.privacy form b { grid-column: 1 / -1; font-size: 14px; color: var(--navy); }
.privacy .plate-input { width: 190px; }
.loading { display: flex; gap: 12px; align-items: center; color: var(--muted); padding: 30px 0; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--blue-100); border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* checklist */
.chead { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.chead h1 { font-size: clamp(34px, 4.4vw, 50px); }
.chead .yrs { font-size: 20px; color: var(--ink); margin-top: 2px; }
.chead .acts { display: flex; gap: 10px; }
.chead-car { display: flex; gap: 30px; align-items: center; margin-top: 10px; }
.chead-car .car { width: 240px; }
.chead-car small { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.progress { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: center; background: #e8f0fb; border-radius: var(--r-lg); padding: 18px 24px; margin-top: 16px; }
.progress b { font-size: 16px; color: var(--navy); }
.progress .bar { height: 12px; margin-top: 10px; background: #d3dcea; }
.progress .bar > i { background: var(--green-btn); }
.progress .store { display: flex; gap: 12px; align-items: center; border-left: 1px solid var(--line-2); padding-left: 22px; font-size: 13.5px; color: var(--navy); }
.progress .store .ic { width: 28px; height: 28px; color: var(--navy); }
.progress .store small { display: block; color: var(--muted); }
.cl-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
.cl-grid h2 { font-size: 26px; }
.cl-grid .sub { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.items { display: grid; gap: 8px; margin-top: 12px; }
.item { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.item-h { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; }
.item-h input { width: 24px; height: 24px; accent-color: var(--green-btn); margin: 0; }
.item-t { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.item-t b { font-size: 16.5px; color: var(--navy); font-weight: 700; font-family: var(--head); letter-spacing: -.01em; }
.item-t small { flex-basis: 100%; color: var(--muted); font-size: 13px; }
.item-h .chev { width: 20px; height: 20px; color: var(--navy); transition: transform .15s; }
.item.open .chev { transform: rotate(180deg); }
.item-b { display: none; padding: 0 16px 16px 54px; }
.item.open .item-b { display: block; }
.item-b h3 { font-size: 16px; }
.item-b .how { color: var(--muted); font-size: 14px; margin-top: 2px; }
.ask { display: flex; gap: 12px; background: #fff8e6; border-radius: 8px; padding: 12px 14px; margin-top: 12px; font-size: 13.5px; }
.ask .ic { width: 24px; height: 24px; color: #e49b00; }
.ask b { display: block; color: var(--navy); }
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.states button { border: 1px solid var(--line-2); background: #f4f6f9; border-radius: 6px; padding: 9px; font-weight: 500; cursor: pointer; font-size: 14px; color: var(--navy); }
.states button[aria-pressed="true"][data-state="ok"] { background: var(--green-50); border-color: var(--green-btn); font-weight: 700; }
.states button[aria-pressed="true"][data-state="attn"] { background: #fcd34d; border-color: #b78400; font-weight: 700; }
.states button[aria-pressed="true"][data-state="skip"] { background: #e5e9f0; border-color: #8a94a6; font-weight: 700; }
.gen-items .item-h { grid-template-columns: auto 200px 1fr auto; }
.gen-items .item-t b { font-size: 14.5px; font-family: var(--body); }
.gen-items .gdesc { color: var(--muted); font-size: 12.5px; }
.notes { padding: 18px; }
.notes-h { display: flex; gap: 12px; align-items: center; }
.notes-h .ic { width: 32px; height: 32px; color: var(--blue); }
.notes-h h2 { font-size: 20px; }
.attn-box { background: #fff7e0; border: 1px solid #f6d58a; border-radius: 10px; margin-top: 14px; padding: 14px; }
.attn-count { display: flex; gap: 12px; align-items: center; background: #fde9ad; margin: -14px -14px 12px; padding: 12px 14px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 17px; color: var(--navy); }
.attn-count .round-ic { width: 34px; height: 34px; background: var(--amber); color: #fff; }
.attn-box h3 { font-size: 16px; }
.attn-box p { font-size: 13.5px; color: var(--muted); }
.attn-box textarea { width: 100%; min-height: 96px; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; margin-top: 10px; resize: vertical; font-size: 14px; background: #fff; }
.attn-box .btn { width: 100%; margin-top: 10px; }
.ready { padding: 18px 20px; }
.ready-h { display: flex; gap: 12px; align-items: center; }
.ready-h h2 { font-size: 20px; }
.ready ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.ready li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.ready li .ic { width: 28px; height: 28px; color: var(--blue); }
.ready li b { display: block; color: var(--navy); font-size: 14.5px; }
.ready li span { color: var(--muted); font-size: 13px; }
.ready .car { max-width: 220px; margin: 16px auto 0; }
.ready .cap { text-align: center; font-weight: 700; color: var(--navy); font-size: 15px; }
.ready .cap small { display: block; font-weight: 400; color: var(--muted); }
.concrete { display: flex; gap: 18px; align-items: center; background: var(--green-50); border-radius: var(--r-lg); padding: 20px 26px; margin-top: 20px; }
.concrete > .ic { width: 44px; height: 44px; color: var(--green-d); }
.concrete h2 { font-size: 23px; }
.concrete .aside { margin-left: auto; background: #d9efe2; border-radius: 10px; padding: 12px 18px; font-size: 14px; max-width: 260px; }
.cl-mobilebar { display: none; }
.pick-model { padding: 18px 22px; margin-top: 16px; }

/* method */
.mth-head { display: grid; grid-template-columns: 1fr 220px; gap: 20px; align-items: center; }
.mth-art { position: relative; width: 170px; height: 150px; margin-left: auto; }
.mth-art .db { width: 120px; height: 120px; color: var(--blue); }
.mth-art .db .ic { width: 120px; height: 120px; stroke-width: 1.6; }
.mth-art .seal { position: absolute; right: 8px; top: 38px; width: 76px; height: 76px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; border: 6px solid #fff; }
.mth-art .seal .ic { width: 40px; height: 40px; stroke-width: 3; }
.mth-art::before { content: ''; position: absolute; right: -6px; top: 10px; width: 140px; height: 140px; border-radius: 50%; background: #e3edfd; z-index: -1; }
.mth-grid { display: grid; grid-template-columns: 1fr 230px; gap: 20px; margin-top: 18px; align-items: start; }
.mth-grid > div > section + section { margin-top: 24px; }
.mth-grid h2 { font-size: 27px; }
.mth-grid .sub { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.flow3 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 12px; }
.flow3 .card { padding: 14px 16px; display: grid; grid-template-columns: 1fr 64px; gap: 8px; min-height: 116px; }
.flow3 .num { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-50); color: var(--blue); font-weight: 700; align-items: center; justify-content: center; }
.flow3 b { display: block; color: var(--navy); font-size: 14.5px; margin-top: 8px; }
.flow3 span { color: var(--muted); font-size: 12.5px; }
.flow3 .art .ic { width: 52px; height: 52px; color: var(--navy); stroke-width: 1.5; }
.flow3 > .ic { color: var(--blue); width: 22px; height: 22px; }
.formula { background: #e8f0fb; border-radius: var(--r-lg); padding: 22px 24px 18px; margin-top: 12px; }
.formula-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 18px; align-items: center; }
.formula-row b { color: var(--navy); font-size: 16px; }
.frac { text-align: center; color: var(--navy); font-size: 17px; }
.frac span { display: block; padding: 6px 12px; }
.frac span:first-child { border-bottom: 2px solid var(--navy); }
.formula .x100 { font-family: var(--head); font-weight: 700; font-size: 28px; color: var(--navy); }
.formula .fn { text-align: center; font-size: 13px; color: var(--muted); margin-top: 6px; }
.toc { padding: 16px 20px; }
.toc h2 { font-size: 19px !important; }
.toc ul { list-style: none; margin: 10px 0 0; padding: 0 0 14px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.toc li a { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.toc li .ic { width: 16px; height: 16px; color: var(--navy); }
.toc .btn { width: 100%; margin-top: 14px; }
.toc small { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; }
.side-win { display: flex; gap: 12px; background: #e8f0fb; border-radius: 12px; padding: 14px 16px; margin-top: 14px; font-size: 13px; }
.side-win .ic { width: 30px; height: 30px; color: var(--blue); }
.side-win b { display: block; color: var(--navy); }
.src4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.src4 .card { padding: 14px 16px; display: grid; grid-template-columns: 34px 1fr; gap: 6px 12px; }
.src4 .ic { width: 30px; height: 30px; }
.src4 b { color: var(--navy); font-size: 14.5px; } .src4 code { font-size: 13px; color: var(--muted); font-family: var(--body); }
.src4 p { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink); }
.src4 small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.cat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.cat4 > div { border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 46px 1fr; gap: 8px 12px; min-height: 104px; }
.cat4 .tb { width: 42px; height: 42px; font-size: 21px; }
.cat4 b { font-size: 15px; align-self: center; }
.cat4 p { grid-column: 2; font-size: 12px; color: var(--muted); }
.cat-A { background: #fdebec; } .cat-A b { color: #b71c1c; }
.cat-B { background: #fff3dc; } .cat-B b { color: #8a5a00; }
.cat-C { background: #e6efff; } .cat-C b { color: #0d47a1; }
.cat-D { background: #eceff3; } .cat-D b { color: #283548; }
.sure { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.sure2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sure2 > div { border-radius: 10px; padding: 16px; }
.sure2 .s-ok { background: #e8f0fb; } .sure2 .s-low { background: #eef1f5; }
.sure2 b { font-size: 13.5px; color: var(--navy); }
.ival { width: 150px; height: 30px; margin: 14px 0 8px; }
.sure2 .big { font-size: 30px; color: var(--navy); }
.sure2 .s-low .big { font-size: 17px; }
.limits { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.limits li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.limits .ic { width: 28px; height: 28px; color: var(--navy); }
.limits b { display: block; color: var(--navy); font-size: 14px; }
.limits span { color: var(--muted); font-size: 12.5px; }
.duo3 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.duo3 > div { display: flex; gap: 16px; align-items: center; border-radius: var(--r-lg); padding: 16px 20px; }
.duo3 .g { background: var(--green-50); } .duo3 .b { background: #e8f0fb; }
.duo3 b { color: var(--navy); font-size: 15px; display: block; }
.duo3 p { font-size: 12.5px; color: var(--ink); }
.duo3 .btn { margin-left: auto; white-space: nowrap; }

/* data page */
.dhero { background: linear-gradient(180deg, #e6eefa, #f4f7fb); padding-bottom: 18px; }
.dhero-in { display: grid; grid-template-columns: 1fr 170px; gap: 20px; align-items: center; }
.csv-art { width: 150px; height: 150px; border-radius: 50%; background: #dbe7fb; display: flex; align-items: center; justify-content: center; }
.csv-file { width: 90px; height: 110px; position: relative; color: var(--blue); }
.lic { display: grid; grid-template-columns: auto 1fr auto auto 1fr auto; gap: 16px; align-items: center; background: #fff; border-radius: 12px; padding: 14px 22px; margin-top: 16px; box-shadow: var(--sh); }
.lic .ic { width: 38px; height: 38px; }
.lic b { display: block; color: var(--navy); font-size: 14.5px; }
.lic span { font-size: 13px; color: var(--muted); }
.lic .divider { width: 1px; height: 40px; background: var(--line); }
.dmain { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-top: 22px; align-items: start; }
.dbig { background: #e8f0fb; border-radius: var(--r-lg); padding: 18px; }
.dbig h2 { font-size: 27px; }
.dbig .sub { color: var(--muted); }
.dfile { background: #fff; border-radius: 10px; padding: 18px; margin-top: 12px; border: 1px solid var(--line); }
.dfile-h { display: flex; gap: 16px; align-items: center; }
.dfile-h b { font-size: 21px; color: var(--navy); font-family: var(--head); }
.dfile-h span { display: block; color: var(--muted); }
.csv-ic { width: 46px; height: 54px; flex: none; }
.dfile .acts { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-top: 16px; }
.dfile .acts .btn { padding: 14px; }
.dfile small { display: block; color: var(--muted); font-size: 12px; margin-top: 12px; }
.use { padding: 18px 20px; }
.use h2 { font-size: 22px; }
.use h3 { font-size: 15px; font-family: var(--body); letter-spacing: 0; margin-top: 10px; }
.use p { color: var(--muted); font-size: 14px; margin-top: 8px; }
.ccby { display: inline-block; background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-d); font-weight: 700; padding: 8px 14px; border-radius: 8px; margin: 14px 0; font-size: 17px; }
.more3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.more3 > div { padding: 16px; }
.more3 .dfile-h b { font-size: 15.5px; font-family: var(--body); font-weight: 700; }
.more3 .dfile-h span { font-size: 13px; }
.more3 .btn { width: 100%; margin-top: 12px; }
.prev { margin-top: 18px; padding: 18px 20px; }
.prev h2 { font-size: 23px; }
.cols-list { display: grid; grid-template-columns: 220px 1fr; gap: 0; font-size: 13.5px; margin-top: 10px; }
.cols-list dt { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--navy); }
.cols-list dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.arch { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.arch > div, .arch > section { padding: 18px 20px; }
.arch h2 { font-size: 23px; }
.arch ul { list-style: none; margin: 10px 0 0; padding: 0; }
.arch li a { display: flex; justify-content: flex-start; gap: 6px; align-items: center; padding: 12px 14px; border-radius: 8px; color: var(--navy); font-weight: 700; }
.arch li a .c-blue { margin-left: auto; }
.arch li:first-child a { background: #e8f0fb; color: var(--blue); }
.arch li small { color: var(--blue); font-weight: 400; margin-left: 8px; }
.cite { display: flex; gap: 10px; background: #f3f6fa; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-top: 10px; font: 13px/1.6 ui-monospace, Menlo, monospace; color: var(--ink); justify-content: space-between; }
.cite button { border: 0; background: none; color: var(--blue); cursor: pointer; }
.cite-btn { margin-top: 12px; }
.feat3 { display: grid; grid-template-columns: repeat(3, 1fr); background: #e8f0fb; border-radius: var(--r-lg); padding: 18px 10px; margin-top: 18px; }
.feat3 > div { display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; padding: 0 16px; border-left: 1px solid var(--line-2); }
.feat3 > div:first-child { border-left: 0; }
.feat3 .ic { width: 40px; height: 40px; color: var(--blue); grid-row: span 2; }
.feat3 b { color: var(--navy); font-size: 15px; }
.feat3 p { font-size: 13px; color: var(--muted); }
.feat3 a { grid-column: 2; font-size: 13.5px; font-weight: 600; }

/* legal */
.legal { max-width: 760px; padding: 24px 28px; margin-top: 16px; }
.legal h1 { font-size: 40px; }
.legal h2 { font-size: 21px; margin-top: 22px; }
.legal p, .legal li { margin-top: 10px; color: var(--ink); }
.legal dl { display: grid; grid-template-columns: 220px 1fr; gap: 8px 16px; margin-top: 16px; }
.legal dt { color: var(--muted); }

/* ================================================================== responsive */
@media (max-width: 1080px) {
  .nav ul { gap: 20px; }
  .mhead { grid-template-columns: 1fr 1fr; } .mhead .verdict { grid-column: 1 / -1; }
  .tier-tabs { min-width: 0; width: 100%; }
}
@media (max-width: 900px) {
  .sure2 { grid-template-columns: 1fr; } .ival { max-width: 100%; }
  .wrap { padding: 0 16px; }
  .duo2 > *, .mth-grid > *, .hist-grid > *, .cl-grid > *, .dmain > *, .sure > *, .kpis > *, .mhead > *, .grid2 > * { min-width: 0; }
  .filters { grid-template-columns: 1fr; }
  .chip-field select, .sel select { min-width: 0; }
  .recall-f .plate-input { min-width: 0; width: 100%; }
  .recall-f .btn { width: 100%; }
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .fact { padding: 14px; } .fact .big { font-size: 21px; } .fact-h { font-size: 13px; } .fact-h .ic { width: 28px; height: 28px; }
  .prev .tbl, .datatable .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .cl-mobilebar { gap: 6px; } .cl-mobilebar .btn-sm { padding: 8px 10px; }
  .cl-mobilebar b { font-size: 13px; }
  h1 { overflow-wrap: anywhere; hyphens: auto; }
  .spots-head .tier-tabs { grid-template-columns: 1fr; }
  .chart-foot span { display: none; }
  .chip-field select { width: 0; }
  .about { grid-template-columns: 1fr; } .about .car { max-width: 200px; }
  .spots .row { flex-wrap: wrap; gap: 6px; }
  .cl-mobilebar .btn-line { padding: 8px; }
  .mth-grid .src4, .mth-grid .cat4 { grid-template-columns: 1fr; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #fff; border-bottom: 1px solid var(--line); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 6px 16px 12px; }
  .nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .top-in { justify-content: space-between; height: 64px; }
  .menu-btn { display: inline-flex; }
  .icon-btn[data-search-open], .top .sep { display: none; }
  .logo { font-size: 30px; }
  .hero-in, .bhero-in, .phead, .mth-head, .dhero-in, .chead { grid-template-columns: 1fr; }
  .hero-forms { flex-direction: column; gap: 10px; } .hero-box { width: 100%; } .hero-or { display: none; }
  .usp, .facts, .grid4, .src4, .cat4 { grid-template-columns: 1fr 1fr; }
  .usp li { border-left: 0; padding: 8px 0; }
  .steps3, .mini-models, .duo, .mgrid, .kpis, .duo2, .why, .hist-grid, .cl-grid, .mth-grid, .sure, .duo3, .dmain, .more3, .arch, .feat3, .grid3, .grid2, .trio, .brands { grid-template-columns: 1fr; }
  .trio > div, .feat3 > div { border-left: 0; padding: 8px 0; }
  .filters { grid-template-columns: 1fr 1fr; }
  .mhead { grid-template-columns: 1fr; }
  .chart-body { grid-template-columns: 1fr; }
  .cmp-ctrl { grid-template-columns: auto 1fr; } .cmp-ctrl .divider { display: none; }
  .cmp-table { overflow-x: auto; }
  .alert, .recall-box, .take, .fair, .concrete { flex-wrap: wrap; }
  .alert .btn, .recall-box .btn, .take .btn, .fair .link-arr { margin-left: 0; }
  .take3 { grid-template-columns: auto 1fr; } .take3 .btn { grid-column: 1 / -1; grid-row: auto; }
  .privacy { grid-template-columns: auto 1fr; } .privacy form { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .progress { grid-template-columns: 1fr; } .progress .store { border-left: 0; padding-left: 0; }
  .chead .acts { display: none; }
  .chead-car { position: relative; }
  .chead-car .car { position: absolute; right: -10px; top: -150px; width: 170px; }
  .item-b { padding-left: 16px; }
  .gen-items .item-h { grid-template-columns: auto 1fr auto; } .gen-items .gdesc { display: none; }
  .cl-mobilebar { display: flex; position: sticky; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; gap: 10px; align-items: center; margin: 20px -16px 0; }
  .cl-mobilebar b { font-size: 15px; color: var(--navy); margin-right: auto; }
  .lic { grid-template-columns: auto 1fr; } .lic .link-arr { grid-column: 1 / -1; } .lic .divider { display: none; }
  .flow3 { grid-template-columns: 1fr; } .flow3 > .ic { transform: rotate(90deg); justify-self: center; }
  .formula-row { grid-template-columns: 1fr; text-align: center; }
  .foot-nav { border-left: 0; padding-left: 0; flex-basis: 100%; }
  .tl > li { grid-template-columns: 84px 22px 1fr; } .tl > li::before { left: 94px; }
  .spots-tbl .bar { display: none; }
}
@media print {
  .top, .foot, .cl-mobilebar, .chead .acts, .notes .btn, .states, .cmpbar { display: none !important; }
  body { background: #fff; }
  .item-b { display: block; }
}

.hero-box .plate-input input { font-size: 15px; letter-spacing: .02em; }
.hero-box .plate-input input::placeholder { font-size: 13.5px; }
.plate-input .plate-eu { gap: 1px; }
.plate-input .plate-eu svg { width: 16px; height: 16px; }
.plate-input .plate-eu b { font-size: 10px; line-height: 1; }

.item.open .item-t small { display: none; }
.plate-empty { opacity: .55; }
.plate-empty .plate-t { font-size: 15px; letter-spacing: .06em; }
a.plate:hover { text-decoration: none; opacity: .8; }

/* ---------------------------------------------------------------- licensed photos (Wikimedia Commons) */
.car-fig { position: relative; margin: 0; }
.car-fig .car.photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; filter: none; box-shadow: 0 10px 24px rgba(10, 26, 66, .14); }
.car-fig figcaption { position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 10.5px; line-height: 1.5; }
.car-fig figcaption a { display: block; padding: 1px 7px; border-radius: 6px; background: rgba(10, 26, 66, .55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.car-fig figcaption a:hover { background: rgba(10, 26, 66, .8); }
.mcard .car-fig { max-width: 300px; margin: 2px auto 10px; }
.mcard .car-fig .car.photo { max-width: none; margin: 0; }
.mini .car-fig { width: 100%; }
.mini .car-fig .car.photo, .low-list .car-fig .car.photo { border-radius: 8px; box-shadow: none; }
.mini .car-fig figcaption, .low-list .car-fig figcaption, .cmpbar .car-fig figcaption { display: none; }
.low-list .car-fig { width: 84px; flex: none; }
.low-list .car-fig .car.photo { width: 84px; }
/* same footprint as the illustrations so cards line up */
.mcard .car-fig { max-width: 260px; }
.bhero .car-fig { max-width: 330px; margin-left: auto; }
.phead .car-fig { max-width: 380px; margin-left: auto; }
.chead-car .car-fig { width: 240px; flex: none; }
.ready .car-fig { max-width: 220px; margin: 16px auto 0; }
.hero-car.car-fig { align-self: end; filter: none; }
.photos-legal .tbl td { vertical-align: top; font-size: 13.5px; }
.photos-legal .tbl td:nth-child(2) a { word-break: break-word; }
.about .car-fig { align-self: center; }
.chead-car .car-fig .car.photo { position: static; width: 100%; }
@media (max-width: 900px) {
  .chead-car .car-fig { position: static; width: 132px; }
  .chead-car .car-fig figcaption { display: none; }
  .photos-legal .tbl-wrap { overflow-x: auto; }
}

/* AI illustrations (illus/*.webp, transparent 16:10): same slots as the old body-type SVGs */
.car.illus { aspect-ratio: 16 / 10; object-fit: contain; filter: none; }
.illus-fig { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.illus-fig .car.illus { display: block; }
.illus-fig figcaption { margin-top: -6px; font-size: 11px; line-height: 1.4; }
.illus-fig figcaption a { color: var(--muted, #6b7891); text-decoration: none; }
.illus-fig figcaption a:hover { text-decoration: underline; }
.mhead .illus-fig { margin-top: 4px; }
.low-list .car.illus { width: 84px; flex: none; }
.photos-legal h2 { font-size: 19px; margin: 22px 0 8px; }
/* one-column model header (phones/tablets): trim the empty sky above the car (cars sit at the bottom of the 16:10 canvas, top edge ≥ 16%) */
@media (max-width: 900px) {
  .mhead .illus-fig { width: 100%; align-items: stretch; }
  .mhead .illus-fig .car.illus { width: 100%; height: auto; aspect-ratio: 19 / 10; object-fit: cover; object-position: 50% 100%; }
  .mhead .illus-fig figcaption { text-align: right; margin-top: 2px; }
}

/* cookie consent (only when a GA4 id is configured) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line, #dfe5ee); border-radius: 12px; box-shadow: 0 12px 40px rgba(10, 26, 66, .18); padding: 16px 18px; display: flex; gap: 16px; align-items: center; }
.consent p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.consent-acts { display: flex; gap: 8px; flex: none; }
.consent .btn { padding: 9px 16px; font-size: 14px; }
.foot-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .consent { flex-direction: column; align-items: stretch; } .consent-acts .btn { flex: 1; } }
@media print { .consent { display: none; } }

/* growth pages (SEO/GEO review 2026-10-16): rankings, comparisons, guides, model-page conclusion and peers */
.foot-guides { flex-basis: 100%; order: 3; margin: 0; font-size: 12.5px; color: var(--muted); }
.foot-guides a { color: var(--muted); }
.concl { margin-top: 18px; padding: 18px 22px; border-left: 4px solid var(--blue); }
.concl h2 { font-size: 17px; font-family: var(--body); letter-spacing: 0; margin-bottom: 6px; }
.concl p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.concl-f { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 10px; font-size: 14px; }
.concl-cite summary { cursor: pointer; color: var(--blue); font-weight: 600; font-family: var(--body); }
.concl-cite p { margin: 8px 0; font-size: 13px; color: var(--muted); background: #f2f5fa; padding: 10px 12px; border-radius: 8px; }
.rank-nav { display: grid; gap: 10px; margin: 18px 0 8px; }
.rank-nav div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rank-nav b { font-size: 13px; color: var(--navy); min-width: 92px; }
.chip-link { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; color: var(--navy); background: #fff; text-decoration: none !important; }
.chip-link:hover { border-color: var(--blue); color: var(--blue); }
.chip-link.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg, 12px); margin-top: 12px; }
.rank-tbl td a { font-weight: 600; color: var(--navy); }
.rank-tbl .yrs-s { display: block; color: var(--muted); font-size: 12px; }
.rank-tbl .r-ok { color: var(--green); font-weight: 700; } .rank-tbl .r-up { color: var(--red); font-weight: 700; }
.how-read p { margin: 8px 0 0; }
.src-note { margin-top: 18px; }
.prose-wide { max-width: 900px; }
.link-list { columns: 2; padding-left: 18px; }
.link-list li { margin: 4px 0; }
.peers { padding: 18px 22px; }
.peers .peer-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.peers .peer-list li { display: grid; gap: 6px; }
.peer { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: inherit; text-decoration: none !important; }
.peer:hover { border-color: var(--blue); }
.peer img { width: 100%; height: auto; }
.peer b { color: var(--navy); font-size: 14px; display: block; } .peer small { color: var(--muted); display: block; }
.peer-v { font-size: 20px; font-weight: 700; } .peer-v.r-ok { color: var(--green); } .peer-v.r-up { color: var(--red); }
.cmp-static .cmp-head .acts { display: none; }
@media (max-width: 900px) { .peers { padding: 18px 22px; }
.peers .peer-list { grid-template-columns: repeat(2, 1fr); } .link-list { columns: 1; } }
@media (max-width: 640px) {
  .hide-s { display: none; }
  /* compare table on phones: row labels stay visible while the model columns scroll */
  .cmp-table { grid-template-columns: 112px repeat(var(--n, 3), minmax(150px, 1fr)) !important; overflow-x: auto; scroll-snap-type: x proximity; }
  .cmp-table .rowh { position: sticky; left: 0; z-index: 1; background: #fff; padding-left: 12px; padding-right: 8px; box-shadow: 1px 0 0 var(--line); }
  .cmp-table .cell:not(.rowh) { scroll-snap-align: start; padding: 12px; }
  .cmp-table .rowh span { font-size: 12px; }
  .cmp-table .rowh .tb.lg { display: none; }
}
.home-rank-list { list-style: none; counter-reset: r; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.home-rank-list li { counter-increment: r; }
.home-rank-list a { display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; color: inherit; text-decoration: none !important; height: 100%; }
.home-rank-list a::before { content: counter(r); font-weight: 700; color: var(--blue); font-size: 20px; }
.home-rank-list b { color: var(--navy); font-size: 14px; } .home-rank-list small { color: var(--muted); } .home-rank-list .r-ok { color: var(--green); font-weight: 700; font-size: 13px; }
@media (max-width: 900px) { .home-rank-list { grid-template-columns: 1fr 1fr; } }