/* Sell My Car Hub — "Trust & Money"
   Light, clean, high-trust lead-gen palette.
   bg #F6F8FA | surface #FFF | navy #133B5C | navy-deep #0C2A44
   green #1E9E5A / #157347 | amber CTA #F59E0B | line #DCE4EB */

:root{
  --bg:#F6F8FA;
  --surface:#FFFFFF;
  --band-tint:#EAF1F7;
  --navy:#133B5C;
  --navy-deep:#0C2A44;
  --ink:#1C2B36;
  --muted:#5B6B78;
  --line:#DCE4EB;
  --green:#1E9E5A;
  --green-deep:#157347;
  --amber:#F59E0B;
  --amber-deep:#D97706;
  --low:#C0533B;
  --link:#1D64A8;
  --shadow-sm:0 1px 2px rgba(16,42,67,.06);
  --shadow-md:0 8px 24px rgba(16,42,67,.09);
  --maxw:1080px;
  --display:'Archivo Black','Arial Black',sans-serif;
  --body:'Public Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'Space Mono','Courier New',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--navy)}
a:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.02em;color:var(--navy)}
h1{font-size:clamp(2.4rem,6.2vw,4.3rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);margin:0 0 14px}
h3{font-size:1.1rem;letter-spacing:-.01em;margin:0 0 8px}

p{margin:0 0 17px}

.label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-deep);
}

/* ---------- header ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px}
.brand{font-family:var(--display);font-size:1.08rem;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.brand span{color:var(--green-deep)}
.top-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:.9rem}
.nav a:hover{color:var(--navy)}
.callbtn{
  font-family:var(--mono);font-size:.92rem;letter-spacing:.02em;
  background:var(--amber);color:var(--navy-deep);padding:9px 16px;border-radius:8px;
  font-weight:700;white-space:nowrap;box-shadow:var(--shadow-sm);
}
.callbtn:hover{background:var(--amber-deep);color:#fff}

/* ---------- hero ---------- */
.hero{padding:70px 0 34px}
.hero .label{display:block;margin-bottom:16px}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--green-deep)}
.hero p.lede{max-width:54ch;margin-top:22px;font-size:1.14rem;color:var(--muted)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-block;padding:14px 26px;border-radius:8px;
  font-family:var(--body);font-weight:700;font-size:1rem;
}
.btn-a{background:var(--amber);color:var(--navy-deep);box-shadow:var(--shadow-sm)}
.btn-a:hover{background:var(--amber-deep);color:#fff}
.btn-b{border:1.5px solid var(--navy);color:var(--navy)}
.btn-b:hover{background:var(--navy);color:#fff}

/* ---------- signature: the spread ---------- */
.spread-band{padding:26px 0 74px}
.gauge{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:28px 28px 24px;box-shadow:var(--shadow-md);
}
.gauge-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.gauge-head h2{font-size:clamp(1.2rem,2.4vw,1.55rem);margin:0}
.gauge-head .label{color:var(--muted)}

.bar-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:16px;margin-bottom:13px}
.bar-row .who{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.bar-track{background:#E8EEF4;border-radius:4px;height:26px;overflow:hidden;position:relative}
.bar-fill{display:block;height:100%;border-radius:4px 0 0 4px;background:linear-gradient(90deg,#B9CCDD,#7FA1BE);border-right:3px solid #48708F}
.bar-row.is-low .bar-fill{background:linear-gradient(90deg,#EBC4B8,#D07B62);border-right-color:var(--low)}
.bar-row.is-high .bar-fill{background:linear-gradient(90deg,#BFE3CF,#2FAE6C);border-right-color:var(--green-deep)}
.bar-row .tick{font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.bar-row.is-low .tick{color:var(--low)}
.bar-row.is-high .tick{color:var(--green-deep)}

.gauge-foot{border-top:1px solid var(--line);margin-top:20px;padding-top:16px;display:grid;gap:8px}
.gauge-foot .big{font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.6rem);color:var(--navy);letter-spacing:-.02em}
.gauge-foot .big b{color:var(--green-deep);font-weight:400}
.gauge-foot .fine{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:#7C8B98;line-height:1.6}

/* ---------- tinted band ---------- */
.pale-band{background:var(--band-tint);padding:66px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pale-band h2{color:var(--navy)}
.pale-band p{color:#42525F}
.pale-band .label{color:var(--green-deep)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:28px;box-shadow:var(--shadow-sm)}
.step{background:var(--surface);padding:24px 22px 26px}
.step .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--green-deep);display:block;margin-bottom:10px}
.step h3{color:var(--navy)}
.step p{margin:0;font-size:.95rem}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* ---------- content bands ---------- */
.band{padding:64px 0}
.band-panel{background:var(--navy-deep)}
.band-panel h2,.band-panel h3{color:#fff}
.band-panel .label{color:#7FD3A8}
.band-panel p{color:#B8C7D4}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
.cols p{margin:0;font-size:.96rem;color:var(--muted)}
.band-panel .cols p{color:#B8C7D4}
@media (max-width:800px){.cols{grid-template-columns:1fr;gap:22px}}

.checklist{display:grid;gap:12px;margin-top:24px;max-width:62ch}
.checklist li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.checklist .mark{font-family:var(--mono);color:var(--green);font-size:.8rem;padding-top:4px}
.checklist strong{color:var(--navy)}
.band-panel .checklist strong{color:#fff}
.checklist span.t{color:var(--muted);font-size:.96rem}
.band-panel .checklist span.t{color:#B8C7D4}

/* ---------- call strip ---------- */
.callstrip{background:var(--amber);color:var(--navy-deep);padding:44px 0}
.callstrip h2{color:var(--navy-deep);margin:0;max-width:20ch}
.callstrip .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.callstrip .num{font-family:var(--mono);font-size:clamp(1.4rem,3.4vw,2rem);font-weight:700;color:var(--navy-deep);white-space:nowrap}
.callstrip .num:hover{color:#000}
.callstrip .num span{display:block;font-family:var(--body);font-size:.8rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#7A5211}

/* ---------- article pages ---------- */
.doc{padding:56px 0 84px;max-width:68ch}
.doc .label{display:block;margin-bottom:14px}
.doc h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin-bottom:20px}
.doc h2{font-size:1.45rem;margin:40px 0 12px}
.doc ul,.doc ol{margin:0 0 18px 22px;color:#42525F}
.doc li{margin-bottom:9px}
.doc .note{border-left:4px solid var(--green);background:var(--surface);border-radius:0 10px 10px 0;box-shadow:var(--shadow-sm);padding:16px 18px;margin:24px 0}
.doc .note p:last-child{margin:0}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);border-top:none;padding:40px 0 50px;font-size:.88rem}
.foot .wrap{display:grid;gap:15px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{color:#B8C7D4}
.foot nav a:hover{color:#fff}
.foot .fine{color:#8AA0B2;font-size:.79rem;line-height:1.65;max-width:78ch}

/* ---- lead form ---- */
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:28px 26px 30px;margin:30px 0 8px}
.lead-card h2{font-size:1.3rem;margin:0 0 6px}
.lead-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.lead-grid .full{grid-column:1/-1}
.lead-grid .third{grid-column:auto}
@media(min-width:640px){.lead-grid{grid-template-columns:repeat(6,1fr)}
  .lead-grid .half{grid-column:span 3}.lead-grid .third{grid-column:span 2}.lead-grid .full{grid-column:1/-1}}
@media(max-width:639px){.lead-grid{grid-template-columns:1fr 1fr}.lead-grid .half{grid-column:1/-1}}
.f label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-family:var(--body);font-size:1rem;padding:11px 12px;border-radius:8px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--amber);outline-offset:0;border-color:var(--amber);background:#fff}
.f textarea{min-height:96px;resize:vertical}
.f ::placeholder{color:#96A5B3}
.lead-actions{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lead-actions .btn{border:0;cursor:pointer;font-size:1rem}
.lead-actions .alt{color:var(--muted);font-size:.9rem}
.lead-actions .alt a{color:var(--link);font-weight:700}
.lead-msg{display:none;margin-top:18px;padding:14px 16px;font-size:.95rem;border-radius:8px}
.lead-msg.ok{display:block;background:#E7F5EE;border:1px solid var(--green);color:#0E4D2E}
.lead-msg.err{display:block;background:#FAEBE6;border:1px solid var(--low);color:#7A3020}
.hp-field{position:absolute!important;left:-9999px!important;top:auto!important;height:1px;width:1px;overflow:hidden}
.doc.doc-wide{max-width:none}
.doc.doc-wide .prose{max-width:68ch}

/* ---- homepage: conversion sections ---- */
.cta-note{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-top:16px}
.trustbar{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-top:44px}
.trustbar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tb{display:grid;gap:2px;text-align:center}
.tb-n{font-family:var(--display);font-size:1.5rem;color:var(--green-deep);line-height:1.1}
.tb-t{font-size:.84rem;color:var(--muted);line-height:1.4}
@media(max-width:800px){.trustbar-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}}
.band-cta{margin-top:30px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
@media(max-width:800px){.paths{grid-template-columns:1fr}}
.path{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);padding:26px 24px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.path-hot{border:2px solid var(--amber);box-shadow:var(--shadow-md)}
.path-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--amber);color:var(--navy-deep);border-radius:5px;padding:4px 10px;font-weight:700;margin-bottom:14px}
.path-tag-alt{background:var(--band-tint);color:var(--navy)}
.path h3{font-size:1.25rem}
.path p{color:var(--muted);font-size:.96rem}
.path-list{list-style:none;margin:2px 0 20px;display:grid;gap:8px}
.path-list li{padding-left:26px;position:relative;font-size:.95rem;color:var(--ink)}
.path-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.path .btn{margin-top:auto}
.path-alt-link{margin:12px 0 0;font-size:.87rem;color:var(--muted)}
.faq{display:grid;gap:12px;margin-top:26px;max-width:70ch}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-sm);padding:0 20px}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:16px 0;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:1.2rem;color:var(--green-deep)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);font-size:.95rem;padding-bottom:18px;margin:0}

/* ---- photo layouts ---- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-media{order:-1}}
.hero-media img,.media-card img{width:100%;height:auto;display:block;border-radius:14px}
.hero-media img{box-shadow:var(--shadow-md)}
.media-band{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.media-band{grid-template-columns:1fr}.media-band-rev .media-card{order:-1}}
.media-card{margin:0;position:relative}
.media-card img{box-shadow:var(--shadow-md)}
.band-panel .media-card img{box-shadow:0 8px 28px rgba(0,0,0,.45)}
.band-alt{background:var(--band-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.media-copy .band-cta{margin-top:22px}
.trust-line{font-size:.86rem;color:var(--muted);margin-top:10px}
.trust-line a{color:var(--green-deep);font-weight:700}
.stars{color:var(--green-deep)}
.callstrip .stars{color:var(--navy-deep)}
.trust-line .rcount{font-weight:400;color:var(--muted)}
.btn-navy{background:var(--navy-deep);color:#fff;box-shadow:var(--shadow-sm)}
.btn-navy:hover{background:#081D30;color:#fff}
.callstrip-cta{display:flex;flex-direction:column;align-items:center;gap:8px}
.callstrip-note{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#7A5211}
@media(max-width:640px){.callstrip-cta{align-items:flex-start}}
.note{border-left:4px solid var(--green);background:var(--surface);border-radius:0 10px 10px 0;box-shadow:var(--shadow-sm);padding:16px 18px;margin:28px 0 0;max-width:68ch}
.note p:last-child{margin:0}
.step p{font-size:.95rem}
.step p strong{color:var(--navy)}