/* ---------- Tokens ---------- */
:root{
  --paper:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#EEF1F5;
  --text:#151924;
  --text-dim:#5C6472;
  --line: rgba(21,25,36,0.10);
  --line-strong: rgba(21,25,36,0.20);
  --accent:#2857D6;
  --accent-strong:#1E44B0;
  --accent-soft: rgba(40,87,214,0.10);
  --good:#1A8A5F;
  --good-soft: rgba(26,138,95,0.12);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(21,25,36,0.04), 0 8px 22px rgba(21,25,36,0.06);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1116;
    --surface:#171B22;
    --surface-2:#1E232C;
    --text:#EDEFF3;
    --text-dim:#9AA2AF;
    --line: rgba(237,239,243,0.10);
    --line-strong: rgba(237,239,243,0.20);
    --accent:#6E97F5;
    --accent-strong:#8FAEF8;
    --accent-soft: rgba(110,151,245,0.16);
    --good:#3FC98A;
    --good-soft: rgba(63,201,138,0.16);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1116;
  --surface:#171B22;
  --surface-2:#1E232C;
  --text:#EDEFF3;
  --text-dim:#9AA2AF;
  --line: rgba(237,239,243,0.10);
  --line-strong: rgba(237,239,243,0.20);
  --accent:#6E97F5;
  --accent-strong:#8FAEF8;
  --accent-soft: rgba(110,151,245,0.16);
  --good:#3FC98A;
  --good-soft: rgba(63,201,138,0.16);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.35);
}

*{ box-sizing:border-box; }
html{ color-scheme: light dark; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
}
button, input, textarea{ color:inherit; }
::selection{ background: var(--accent-soft); }
h1,h2,h3{ text-wrap: balance; margin:0; }
button{ font-family:inherit; }
a{ color:var(--accent); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap{ max-width: 1000px; margin:0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }

/* ---------- Nav ---------- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem clamp(1.1rem,4vw,2.5rem); border-bottom:1px solid var(--line);
  background:var(--surface); position:sticky; top:0; z-index:20;
}
.brand{
  font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; display:flex; align-items:center;
  gap:.4rem; cursor:pointer; border:none; background:none; color:var(--text); padding:0;
  text-decoration:none;
}
.brand .dot{ color:var(--accent); }
.nav-links{ display:flex; gap:.25rem; }
.nav-links a{
  border:none; background:transparent; color:var(--text-dim); font-weight:600; font-size:0.94rem;
  padding:.55rem .9rem; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block;
}
.nav-links a[aria-current="true"]{ color:var(--text); background:var(--surface-2); }
.nav-links a:hover{ color:var(--text); }

main{ padding-bottom: 4rem; }

/* ---------- Home hero ---------- */
.hero{ padding: clamp(2.4rem,6vw,3.6rem) 0 .5rem; text-align:center; }
.hero h1{ font-size:clamp(1.7rem,3.6vw,2.3rem); font-weight:800; letter-spacing:-0.01em; max-width:30ch; margin:0 auto .9rem; }
.hero p{ color:var(--text-dim); font-size:1.02rem; max-width:58ch; margin:0 auto; line-height:1.65; }

/* ---------- Chooser ---------- */
.chooser{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin: 2.2rem 0 2rem; }
@media (max-width: 720px){ .chooser{ grid-template-columns:1fr; } }
.chooser-card{
  background:var(--surface); border:2px solid var(--line); border-radius: var(--radius);
  padding:1.4rem 1.5rem; cursor:pointer; text-align:left; transition:border-color .12s ease;
  display:flex; flex-direction:column; gap:.7rem; width:100%; color:var(--text); font-family:inherit;
}
.chooser-card:hover{ border-color:var(--line-strong); }
.chooser-card[aria-current="true"]{ border-color:var(--accent); box-shadow: var(--shadow); }
.chooser-card .icon{
  width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.chooser-card .icon svg{ width:19px; height:19px; }
.chooser-card h3{ font-size:1.08rem; font-weight:700; }
.chooser-card p{ color:var(--text-dim); font-size:0.87rem; margin:0; line-height:1.5; }

/* ---------- Flow panels ---------- */
.panel{ display:none; }
.panel.active{ display:block; }

.module{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.6rem; margin-bottom: 1rem;
}
.module-label{
  text-transform:uppercase; letter-spacing:.06em; font-size:0.7rem; color:var(--text-dim); font-weight:700;
  margin-bottom:.7rem;
}
.module h3{ font-size:1.05rem; font-weight:700; margin-bottom:.2rem; }
.module p.hint{ color:var(--text-dim); font-size:0.86rem; margin:.15rem 0 0; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem; }
.chip{
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text);
  padding:.5rem .95rem; border-radius:999px; font-size:0.86rem; cursor:pointer;
  font-weight:500; transition: all .12s ease; line-height:1.2;
}
.chip:hover{ border-color:var(--accent); }
.chip[aria-pressed="true"]{
  background: var(--accent-soft); border-color:var(--accent); color:var(--accent-strong);
  font-weight:700;
}
.budget-grid{ display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-size:0.78rem; color:var(--text-dim); font-weight:600; }
.field input[type="number"]{
  font-family: inherit; font-size:1rem; padding:.55rem .7rem; width:140px;
  border-radius: var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text);
  font-variant-numeric: tabular-nums;
}

.feature-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:.6rem; margin-top:1rem; }
.feature-toggle{
  display:flex; align-items:center; gap:.55rem; border:1px solid var(--line-strong);
  background:var(--surface-2); border-radius: var(--radius-sm); padding:.6rem .75rem;
  cursor:pointer; font-size:0.86rem; font-weight:500; text-align:left; color:var(--text); font-family:inherit;
}
.feature-toggle .box{
  width:16px; height:16px; border-radius:4px; border:1.5px solid var(--line-strong); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.feature-toggle[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.feature-toggle[aria-pressed="true"] .box{ background:var(--accent); border-color:var(--accent); }
.feature-toggle .box svg{ width:10px; height:10px; display:none; stroke:white; }
.feature-toggle[aria-pressed="true"] .box svg{ display:block; }

.seat-row{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.seat-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--text); font-weight:600;
  cursor:pointer; font-size:0.85rem; font-variant-numeric: tabular-nums;
}
.seat-btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.seat-btn:disabled{ opacity:.32; cursor:not-allowed; }

.chip-unsure{ border-style:dashed; color:var(--text-dim); }
.chip-unsure[aria-pressed="true"]{
  background:var(--good-soft); border-color:var(--good); color:var(--good); font-weight:700;
}

.cta-row{ display:flex; justify-content:flex-end; margin-top:.5rem; }
.btn-primary{
  background:var(--accent); color:#fff; border:none; padding:.85rem 1.6rem; border-radius:999px;
  font-weight:700; font-size:0.98rem; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem;
}
.btn-primary:hover{ background:var(--accent-strong); }
.btn-primary svg{ width:16px; height:16px; }
.btn-secondary{
  background:none; border:1px solid var(--line-strong); color:var(--text); padding:.6rem 1.1rem;
  border-radius:999px; font-weight:600; font-size:0.88rem; cursor:pointer;
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Chat panel ---------- */
.chat-box textarea{
  width:100%; min-height:120px; resize:vertical; border-radius: var(--radius-sm);
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text);
  font-family: inherit; font-size:1rem; padding: .9rem 1rem; margin-top:.9rem;
}
.example-row{ margin-top: .9rem; }
.example-row .chip{ font-size:0.8rem; }
.heard-box{
  margin-top:1rem; padding:1rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--good-soft); border:1px solid rgba(26,138,95,0.3);
  display:none;
}
.heard-box.show{ display:block; }
.heard-box .heard-title{ font-weight:700; font-size:0.85rem; color:var(--good); margin-bottom:.5rem; }
.heard-box .chip-row .chip{ background:var(--surface); border-color:rgba(26,138,95,0.3); cursor:default; }

.nudge-box{
  border:1px dashed var(--line-strong); border-radius: var(--radius); padding: 1.8rem 1.6rem;
  text-align:center;
}
.nudge-box p{ color:var(--text-dim); margin:0 0 1rem; font-size:0.95rem; }
.nudge-box p b{ color:var(--text); }

/* ---------- Results ---------- */
.results-section{ margin-top: 2.2rem; }
.results-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.results-heading h2{ font-size:1.4rem; font-weight:800; }
.results-heading .sub{ color:var(--text-dim); font-size:0.9rem; }

.placeholder-card{
  border:1px dashed var(--line-strong); border-radius: var(--radius); padding: 2.2rem 1.5rem;
  text-align:center; color:var(--text-dim); font-size:0.95rem;
}

.results-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.1rem; }
@media (max-width: 860px){ .results-grid{ grid-template-columns: 1fr; } }

.result-card{
  background:var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.3rem 1.3rem 1.5rem; display:flex; flex-direction:column; gap:.9rem;
}
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.card-title-row{ display:flex; align-items:center; gap:.6rem; }
.rank-badge{
  width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff;
  font-weight:800; font-size:0.82rem; display:flex; align-items:center; justify-content:center; flex:none;
}
.card-title{ font-weight:700; font-size:1.08rem; line-height:1.25; }
.card-title .year{ color:var(--text-dim); font-weight:500; font-size:0.85rem; }

.match-row{ display:flex; align-items:center; gap:.7rem; }
.match-bar-track{ flex:1; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.match-bar-fill{ height:100%; border-radius:999px; background:var(--accent); }
.match-pct{ font-weight:800; font-size:1rem; white-space:nowrap; font-variant-numeric: tabular-nums; color:var(--text); }
.match-pct span{ font-weight:600; font-size:0.72rem; color:var(--text-dim); margin-left:.15rem; }

.spec-strip{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:0.82rem; color:var(--text-dim); }
.spec-strip .row{ display:flex; align-items:center; gap:.4rem; }
.spec-strip svg{ width:14px; height:14px; flex:none; stroke:var(--text-dim); }

.blurb{ font-size:0.88rem; color:var(--text-dim); }

.reason-list{ display:flex; flex-direction:column; gap:.4rem; margin-top:auto; }
.reason-list .reason{
  font-size:0.8rem; display:flex; gap:.5rem; align-items:flex-start; color:var(--text);
}
.reason-list .reason::before{ content:'—'; color:var(--accent); flex:none; }

.body-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:0.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-strong);
  background:var(--accent-soft); padding:.25rem .55rem; border-radius:6px; width:fit-content;
}

/* ---------- About page ---------- */
.about-page{ max-width:640px; margin:0 auto; padding: 3rem 0 4rem; }
.about-page h1{ font-size:1.9rem; font-weight:800; margin-bottom:1.4rem; letter-spacing:-0.01em; }
.about-page p{ margin:0 0 1.15rem; color:var(--text); line-height:1.75; font-size:1rem; }
.about-page p.lede{ font-size:1.15rem; font-weight:600; color:var(--text); }

/* ---------- Our Picks page ---------- */
.picks-page{ max-width:680px; margin:0 auto; padding: 3rem 0 4rem; }
.picks-page > h1{ font-size:1.9rem; font-weight:800; margin-bottom:.4rem; }
.picks-page > p.sub{ color:var(--text-dim); margin:0 0 2rem; }
.picks-list{ display:flex; flex-direction:column; gap:1rem; }
.picks-card{
  background:var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.3rem 1.5rem; cursor:pointer; transition:border-color .12s ease;
  display:block; text-decoration:none; color:inherit;
}
.picks-card:hover{ border-color:var(--line-strong); }
.picks-card .date{ font-size:0.76rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.picks-card h3{ font-size:1.15rem; margin:.35rem 0 .4rem; font-weight:700; }
.picks-card p{ color:var(--text-dim); font-size:0.92rem; margin:0; line-height:1.55; }
.picks-detail .back-link{
  color:var(--accent); font-weight:600; cursor:pointer; font-size:0.9rem; margin-bottom:1.4rem;
  display:inline-flex; align-items:center; gap:.35rem; border:none; background:none; padding:0;
  font-family:inherit; text-decoration:none;
}
.picks-detail h1{ font-size:1.6rem; font-weight:800; margin-bottom:.4rem; }
.picks-detail .date{ color:var(--text-dim); font-size:0.85rem; margin-bottom:1.5rem; text-transform:uppercase; letter-spacing:.05em; }
.picks-detail p{ line-height:1.75; margin-bottom:1.1rem; }
.picks-detail .pick-lede{ font-size:1.05rem; color:var(--text-dim); line-height:1.7; }
.pick-vehicle{ border-top:1px solid var(--line); padding-top:1.7rem; margin-top:1.7rem; }
.pick-vehicle:first-of-type{ border-top:none; padding-top:0; margin-top:.2rem; }
.pick-vehicle h3{ font-size:1.22rem; font-weight:800; margin-bottom:.25rem; }
.pick-vehicle .tagline{ color:var(--accent); font-weight:600; font-size:0.88rem; margin-bottom:1rem; }
.pick-vehicle p{ line-height:1.7; font-size:0.96rem; }
.pick-vehicle .take{
  background:var(--surface-2); border-radius:var(--radius-sm); padding:.75rem .95rem;
  font-size:0.92rem; margin-top:1rem; line-height:1.55;
}
.pick-vehicle .take b{ color:var(--accent-strong); }
.pick-recap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin:2.1rem 0 1.6rem;
}
.pick-recap h4{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);
  font-weight:700; margin-bottom:.85rem;
}
.pick-recap ul{ margin:0; padding-left:1.15rem; }
.pick-recap li{ margin-bottom:.45rem; font-size:0.94rem; line-height:1.5; }
.pick-recap li:last-child{ margin-bottom:0; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); margin-top:3rem; padding: 1.6rem clamp(1.1rem,4vw,2.5rem) 2.5rem; }
footer .wrap{ max-width:1000px; display:flex; flex-direction:column; gap:.4rem; }
footer p{ font-size:0.78rem; color:var(--text-dim); max-width:70ch; margin:0; }
footer .footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1.2rem; margin-top:.3rem; }
footer .copyright{ font-size:0.78rem; color:var(--text-dim); }
footer .footer-link{ font-size:0.78rem; color:var(--text-dim); text-decoration:none; border-bottom:1px solid transparent; }
footer .footer-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- Legal pages ---------- */
.legal-page{ max-width:720px; margin:0 auto; padding: 3rem 0 4rem; }
.legal-page h1{ font-size:1.9rem; font-weight:800; margin-bottom:.4rem; letter-spacing:-0.01em; }
.legal-page .updated{ color:var(--text-dim); font-size:0.8rem; text-transform:uppercase; letter-spacing:.05em; margin:0 0 2rem; }
.legal-page h2{ font-size:1.12rem; font-weight:700; margin:2.1rem 0 .7rem; }
.legal-page h2:first-of-type{ margin-top:0; }
.legal-page p{ margin:0 0 1.05rem; color:var(--text); line-height:1.7; font-size:0.96rem; }
.legal-page ul{ margin:0 0 1.05rem; padding-left:1.25rem; color:var(--text); line-height:1.7; font-size:0.96rem; }
.legal-page li{ margin-bottom:.45rem; }
.legal-page a{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}