/* CarCompare: warm paper, bold typography, road-sign orange. */
:root {
  color-scheme: light;
  --bg:#f8f7f3; --surface:#fff; --surface-2:#f0eee8;
  --text:#252723; --muted:#686a63; --border:#dedfd5;
  --primary:#b94320; --primary-2:#b94320; --primary-soft:#f8e9dd;
  --primary-text:#fff; --good:#25613d; --good-soft:#e9f3e9;
  --bad:#b3261e; --bad-soft:#fdecea; --warn-soft:#fff4dc;
  --radius:16px; --radius-sm:8px; --shadow:none;
  --shadow-lg:0 12px 36px #2527230c;
}
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { padding-bottom:35px; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.container { max-width:1280px; padding-left:32px; padding-right:32px; }
.site-header { background:#f8f7f3f5; border-bottom:1px solid var(--border); }
.site-header .container { min-height:88px; }
.logo { gap:0; letter-spacing:-1px; font-size:23px; }
.logo span { background:none; color:var(--text); }
.logo .logo-mark { background:var(--primary); color:white; width:34px; height:34px; display:inline-grid; place-items:center; border-radius:9px; margin-right:9px; font-size:27px; }
.logo small { font:600 9px var(--font-body); letter-spacing:1.4px; border-left:1px solid #caccc3; padding-left:12px; margin-left:14px; max-width:55px; }
.nav { gap:30px; }
.nav a { font-size:13px; padding:8px 0; }
.nav a.active { color:var(--primary); box-shadow:0 2px var(--primary); }
.btn { background:var(--primary); box-shadow:none; font-size:13px; padding:14px 23px; }
.btn:hover { box-shadow:none; background:#9b371a; }
.btn.ghost:hover { background:var(--primary-soft); }
.hero { padding:52px 0 24px; }
.hero::before { display:none; }
.hero-layout { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin-bottom:32px; }
.eyebrow { display:block; color:var(--primary); font-size:10px; font-weight:800; letter-spacing:2.2px; margin-bottom:20px; }
.hero h1,.editorial-heading h1 { font-size:clamp(42px,5.3vw,70px); line-height:1.06; letter-spacing:-3.8px; font-weight:800; margin:0 0 23px; }
h1 em { font-style:normal; color:var(--primary); }
.hero-copy p { font-size:14px; line-height:1.8; }
.vehicle-switch { display:inline-flex; padding:5px; gap:4px; border:1px solid #d6d8cd; border-radius:9px; margin-top:9px; }
.vehicle-switch a { padding:10px 18px; border-radius:5px; color:var(--text); font-size:12px; font-weight:700; }
.vehicle-switch a.selected { background:var(--text); color:#fff; }
.vehicle-switch a:hover { text-decoration:none; background:var(--primary-soft); color:var(--primary); }
.hero-showcase { position:relative; background:#e8ecdf; border-radius:22px; min-height:342px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.showcase-word { position:absolute; top:9px; left:25px; font-weight:800; font-size:clamp(65px,8vw,110px); line-height:1; letter-spacing:-6px; color:#d2d9c6; }
.hero-showcase>img { position:relative; width:100%; height:268px; object-fit:contain; mix-blend-mode:multiply; padding:22px 8px 0; }
.showcase-caption { position:relative; display:flex; justify-content:space-between; align-items:center; margin:0 24px; padding:16px 0; border-top:1px solid #cdd3c3; color:var(--text); }
.showcase-caption small { display:block; font-size:9px; letter-spacing:1.7px; color:var(--muted); margin-bottom:3px; }
.showcase-caption strong { font-size:14px; }
.round-arrow { background:#fff; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; }
.showcase-empty { position:relative; font-size:34px; padding:90px 24px; }
.search-box { border:1px solid var(--border); border-radius:12px; padding:22px 24px; grid-template-columns:2fr 1fr 1fr auto; gap:24px; }
.search-box label { font-size:11px; letter-spacing:.15px; }
.search-box select { font-size:12px; padding:10px; }
.budget-value { font-size:20px; }
.quick-budgets { align-items:center; gap:8px; }
.quick-label { font-size:9px; letter-spacing:1.3px; font-weight:700; color:var(--muted); margin-right:5px; }
.chip { background:transparent; border:1px solid var(--border); font-size:11px; padding:6px 12px; box-shadow:none; }
.chip.active { background:var(--text); border-color:var(--text); color:white; }
.trust-strip { display:flex; justify-content:space-between; gap:18px; padding:24px 0 6px; border-top:1px solid var(--border); margin-top:24px; color:var(--muted); font-size:12px; }
.trust-strip b { color:var(--text); margin-right:7px; }
.body-type-row { margin-top:24px; }
.body-type-chip { border-radius:9px; background:transparent; box-shadow:none; }
.body-type-chip .icon { font-size:22px; filter:grayscale(1); }
.brand-strip { padding-top:22px; padding-bottom:18px; }
.section-title { font-size:24px; letter-spacing:-.7px; }
.brand-grid { gap:12px; }
.brand-chip { background:transparent; box-shadow:none; border:1px solid var(--border); padding:20px; border-radius:9px; }
.brand-chip-name { font-size:18px; }
.top-picks { padding-top:30px; padding-bottom:30px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:24px; }
.section-heading .eyebrow { margin-bottom:9px; }
.section-heading a { font-size:12px; font-weight:700; }
.top-picks .grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { border:1px solid var(--border); box-shadow:none; border-radius:12px; overflow:hidden; transition:transform .2s,border-color .2s; }
.card:hover { transform:translateY(-3px); border-color:#b7b9aa; box-shadow:0 8px 22px #25272308; }
.card-img { background:#f0f1eb; }
.card-img img { mix-blend-mode:multiply; }
.image-fallback { display:grid; place-items:center; width:100%; min-height:160px; padding:24px; color:var(--muted); font-size:16px; text-align:center; }
.hero-showcase .image-fallback { position:relative; min-height:250px; }
.card-body { padding:20px; }
.card h3 { font-size:18px; letter-spacing:-.4px; }
.brand-name { font-size:9px; letter-spacing:1.4px; color:var(--muted); }
.price { color:var(--text); font-size:17px; }
.tag.safety { background:#fff; color:#34573b; border:1px solid #dce5d9; font-size:10px; }
.rating { font-size:11px; }
.layout { padding-top:34px; border-top:1px solid var(--border); grid-template-columns:210px minmax(0,1fr); gap:32px; }
.filters { background:transparent; box-shadow:none; border:0; padding:0 20px 0 0; border-right:1px solid var(--border); border-radius:0; }
.filters h3 { font-size:11px; letter-spacing:1px; text-transform:uppercase; margin-top:24px; }
.filters .check { font-size:12px; }
.results-head h2 { font-size:24px; letter-spacing:-.6px; }
.grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.browse-more { text-align:center; padding:22px 0; }
.blog-teaser { padding-top:50px; }
.blog-teaser .results-head { margin-bottom:25px; }
.blog-teaser .eyebrow { margin-bottom:10px; }
.blog-card .card-img { background:#e9e4d9; }
.blog-card .card-img:empty::after { content:'THE JOURNAL ↗'; display:grid; place-items:center; height:100%; min-height:160px; color:#9c5a32; font-size:28px; font-weight:800; letter-spacing:-1px; }
.blog-card .card-img img { mix-blend-mode:normal; }
.blog-hero { padding:60px 0 10px; }
.blog-hero h1 { font-size:52px; }
.blog-grid { padding-bottom:20px; }
.blog-hero + .container .blog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.post-body { font-size:17px; }
.site-footer { background:#242a25; color:#fff; padding-top:48px; margin-top:65px; }
.site-footer .logo,.site-footer .logo span { color:#fff; }
.site-footer .muted,.site-footer .footer-grid>div>a { color:#bfc7bd; }
.site-footer .footer-bottom { border-color:#465044; text-align:left; padding-top:20px; padding-bottom:20px; }
.bike-page { padding-top:50px; }
.editorial-heading p { color:var(--muted); font-size:15px; }
.bike-search { display:grid; grid-template-columns:2fr 1fr auto; align-items:end; gap:20px; background:white; border:1px solid var(--border); padding:24px; border-radius:12px; margin:35px 0; }
.bike-search label { display:grid; gap:7px; color:var(--muted); font-size:12px; }
input[type=search] { width:100%; min-width:0; border:1px solid var(--border); background:white; color:var(--text); padding:10px; border-radius:8px; font:inherit; }
.bike-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.bike-card .card-img { position:relative; padding:28px 8px 12px; aspect-ratio:1.35; display:flex; align-items:center; }
.bike-card .card-img img { width:100%; object-fit:contain; }
.bike-card .tag { position:absolute; left:12px; top:10px; background:white; color:var(--primary); font-size:10px; }
.bike-card h2 { font-size:23px; }
.bike-card p { font-size:13px; }
.bike-card .card-body { display:flex; flex-direction:column; flex:1; }
.bike-card .btn { margin-top:auto; font-size:11px; padding:10px; }
.bike-card { display:flex; flex-direction:column; }
.source-note { font-size:11px; color:var(--muted); margin-top:20px; }
.journal-banner { display:flex; justify-content:space-between; align-items:center; gap:24px; background:#e8ecdf; border-radius:14px; padding:36px; margin-top:50px; }
.journal-banner .eyebrow { margin-bottom:10px; }
.journal-banner h2 { font-size:28px; }
.journal-banner p { color:var(--muted); margin-bottom:0; }
@media(max-width:1000px) {
  .logo small { display:none; }
  .nav { gap:20px; }
  .hero-layout { gap:20px; }
  .hero h1 { font-size:52px; letter-spacing:-2.5px; }
  .search-box { grid-template-columns:2fr 1fr; }
  .search-box .budget-field { grid-column:auto; }
  .top-picks .grid,.bike-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .layout { grid-template-columns:180px minmax(0,1fr); gap:20px; }
  .blog-hero + .container .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .container { padding-left:20px; padding-right:20px; }
  .site-header .container { gap:14px; padding-top:16px; padding-bottom:12px; }
  .logo { font-size:21px; }
  .nav { width:100%; margin:0; justify-content:space-between; gap:10px; }
  .nav a { font-size:12px; }
  .hero { padding-top:32px; }
  .hero-layout { grid-template-columns:1fr; }
  .hero h1,.editorial-heading h1 { font-size:50px; letter-spacing:-2.5px; }
  .hero-copy p { font-size:13px; }
  .desktop-break { display:none; }
  .hero-showcase { min-height:285px; margin-top:8px; }
  .showcase-word { font-size:95px; }
  .hero-showcase>img { height:220px; }
  .search-box { padding:18px; gap:16px; grid-template-columns:1fr 1fr; }
  .search-box .budget-field,.search-box .btn { grid-column:1/-1; }
  .trust-strip { display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:11px; }
  .quick-label { width:100%; }
  .section-title,.results-head h2 { font-size:21px; }
  .section-heading { align-items:start; }
  .section-heading a { white-space:nowrap; font-size:10px; }
  .top-picks .grid { gap:12px; }
  .top-picks .card-body { padding:12px; }
  .top-picks .card h3 { font-size:15px; }
  .top-picks .price { font-size:13px; }
  .layout { grid-template-columns:1fr; }
  .filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; border-right:0; border-bottom:1px solid var(--border); padding-bottom:20px; }
  .filters h3 { grid-column:1/-1; margin:12px 0 3px; }
  .blog-hero h1 { font-size:42px; }
  .blog-hero + .container .blog-grid,.blog-grid { grid-template-columns:1fr; }
  .bike-search { grid-template-columns:1fr; padding:18px; }
  .bike-grid { grid-template-columns:1fr; }
  .journal-banner { align-items:start; flex-direction:column; padding:25px; }
  .footer-grid { grid-template-columns:1fr; }
  .compare-tray .container { flex-wrap:wrap; gap:8px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .card,.btn { transition:none; } }