@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* =====================================================================
   AutoAsist — unified editorial "paper" design system.
   ONE source of truth for every public page. Each page still ships its
   own (legacy, mostly dark) inline <style>; this file loads AFTER it and
   flips everything to the warm-paper / deep-green / Fraunces look of the
   landing page (hub.html), then layers on subtle entrance animations.
   Strategy: (1) remap the legacy CSS variables so every var(--x) recolors
   for free, (2) hard-override the handful of hardcoded darks that pages
   bake into class rules, (3) unify header, cards, forms, buttons, tables,
   (4) animate.
   ===================================================================== */

/* ---- palette : redefine the shared vars to PAPER ---------------------- */
:root{
  --paper:#f4f1e9; --bg:#f4f1e9; --background:#f4f1e9;
  --bg-soft:#eae6db; --panel2:#faf8f2; --bg-dark:#eae6db;
  --panel:#fffdf8; --card:#fffdf8; --surface:#fffdf8;
  --line:#e4ddcc; --border:#e4ddcc; --line-strong:#d3ccb8; --line2:#d3ccb8;
  --txt:#191712; --ink:#191712; --text:#191712;
  --muted:#5f5a4d; --ink-soft:#5c574a; --text-secondary:#5f5a4d; --text-light:#8b8472;
  --accent:#15583c; --accent-2:#1c7a52; --green:#15583c; --green2:#1c7a52;
  --good:#1c7a52; --success:#1c7a52; --warn:#b0791f; --warning:#b0791f;
  --bad:#c0392b; --danger:#c0392b; --gold:#15583c; --grad:#15583c;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(30,25,10,.06);
  --shadow:0 18px 40px -24px rgba(30,25,10,.30);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html{-webkit-text-size-adjust:100%}

/* ---- base ------------------------------------------------------------- */
body{
  background:var(--paper) !important;
  color:var(--txt) !important;
  font-family:var(--sans) !important;
  line-height:1.6;
  max-width:1080px !important;
  margin:0 auto !important;
  padding:0 26px 72px !important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(21,88,60,.16)}
a{color:var(--accent)}

/* Serif display for every heading + card title */
h1,h2,h3,.hero h1,.head h1,.tool h2,.card h3,.verdict h2,.verdict h3,
.stat .v,.big,.profit{
  font-family:var(--serif) !important;letter-spacing:-.015em !important;
  color:var(--txt) !important;
}
h1,h2,h3{font-weight:500 !important;line-height:1.12 !important}
h1{font-weight:600 !important}
.big,.profit,.v,.stat .v,.price,.flip{font-variant-numeric:tabular-nums}
.eyebrow,th,.stat .l,.l{letter-spacing:.08em;text-transform:uppercase}

/* Slim warm scrollbars */
*{scrollbar-width:thin;scrollbar-color:#cfc7b3 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#d8d0bd;border-radius:20px;border:2px solid transparent;background-clip:content-box}

/* ---- unified header (matches hub.html) -------------------------------- */
header,.head{
  display:flex !important;justify-content:space-between !important;align-items:center !important;
  flex-wrap:wrap;gap:14px;
  padding:24px 0 !important;margin-bottom:8px;
  border-bottom:1px solid var(--line) !important;background:transparent !important;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--txt) !important;
}
.brand .logo,.brand .mk{
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--txt);background:transparent;
  display:grid;place-items:center;color:var(--txt);font-family:var(--serif);font-size:15px;font-weight:600;box-shadow:none;
}
nav a{
  color:var(--muted) !important;text-decoration:none;margin-left:20px;font-size:14px;font-weight:500;
  position:relative;transition:color .18s;
}
nav a:hover{color:var(--accent) !important}
nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--accent);
  transition:right .22s ease;
}
nav a:hover::after{right:0}

/* ---- legacy base.html sidebar -> editorial top navigation -------------- */
.sidebar{
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
  padding:24px 0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  overflow:visible !important;
}
.sidebar-header{
  display:flex !important;align-items:center !important;gap:10px !important;
  padding:0 !important;margin:0 !important;border:0 !important;background:transparent !important;
}
.sidebar-header .logo{
  display:inline-flex !important;align-items:center !important;gap:10px !important;
  font-family:var(--serif) !important;font-weight:600 !important;font-size:20px !important;
  color:var(--txt) !important;text-decoration:none !important;
}
.sidebar-header .logo i{
  width:30px;height:30px;border:1.5px solid var(--txt);border-radius:50%;
  display:grid;place-items:center;font-size:13px;color:var(--txt) !important;
}
.elite-badge{display:none !important}
.sidebar-nav{
  display:flex !important;align-items:center !important;justify-content:flex-end !important;
  gap:0 !important;flex-wrap:wrap !important;padding:0 !important;margin:0 !important;overflow:visible !important;
}
.sidebar-nav .nav-item{
  display:inline-flex !important;align-items:center !important;gap:7px !important;
  width:auto !important;margin:0 0 0 16px !important;padding:0 !important;border:0 !important;
  background:transparent !important;color:var(--muted) !important;border-radius:0 !important;
  font-size:14px !important;font-weight:500 !important;text-decoration:none !important;
}
.sidebar-nav .nav-item:hover,.sidebar-nav .nav-item.active{
  color:var(--accent) !important;background:transparent !important;
}
.sidebar-nav .nav-item i{color:currentColor !important;font-size:13px !important}
.nav-divider,.nav-section-title,.sidebar-footer{display:none !important}
.nav-section{display:contents !important}
.main-content{
  margin-left:0 !important;
  width:auto !important;
  min-height:0 !important;
  background:transparent !important;
}
.main-content > .header{
  display:none !important;
}
.content{
  padding:34px 0 0 !important;
  max-width:none !important;
}
.page-header{
  padding:0 0 22px !important;
  margin:0 0 26px !important;
  border-bottom:1px solid var(--line) !important;
  background:transparent !important;
}
.page-header h1{
  font-size:clamp(30px,4.5vw,46px) !important;
  margin-bottom:8px !important;
}
.footer{
  background:transparent !important;
  border-top:1px solid var(--line) !important;
  padding:22px 0 0 !important;
  margin-top:42px !important;
}
@media(max-width:820px){
  .sidebar{align-items:flex-start !important;flex-direction:column !important}
  .sidebar-nav{justify-content:flex-start !important}
  .sidebar-nav .nav-item{margin:8px 14px 0 0 !important}
}

/* page hero row that follows the header on inner pages */
.pagehead{padding:34px 0 18px;border-bottom:1px solid var(--line);margin-bottom:26px}
.pagehead h1{font-size:clamp(26px,4vw,40px);margin-bottom:8px}
.pagehead .sub,.pagehead .lead{color:var(--muted) !important;max-width:640px}

/* eyebrows / section labels / lead text */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent) !important}
.section-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted) !important;margin:40px 0 16px}

/* Any muted / secondary text the pages baked with dark hexes → warm ink-soft */
.sub,.lead,.step-note,.meta,.muted,.k,.l,.n,.vnote,.tflag,.disc,.foot,.empty,
.card .k,.row .k,.stat .l,.stat-card-label,.text-secondary,.subtitle,
ol li span,ul.docs li,label,label.f{color:var(--muted) !important}
li{color:var(--txt)}

/* ---- panels / cards : flat paper with hairline border ----------------- */
.tool,.card,.stat,.stat-card,.second,.form,.trust,.msg,.verdict,.res .card,
.grid > div,.stats .stat,.panel,.box-card,.result-card{
  background:var(--panel) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm) !important;
}
.tool,.card,a.tool,a.card{transition:border-color .18s,box-shadow .18s,transform .18s}
a.tool:hover,a.card:hover,.tool:hover,.card:hover{
  border-color:var(--line-strong) !important;box-shadow:var(--shadow) !important;transform:translateY(-2px);
}
.card h3,.form h3{color:var(--accent) !important}

/* small inner blocks pages fill with near-black hexes (#0d1420, #141209…) */
.verdict,.flow,.trust,.conf,.prog,.scam,.chips{background:var(--panel2) !important}
.verdict{border-left:5px solid var(--vc,var(--accent)) !important;border-radius:10px !important}
.verdict h2,.verdict h3{color:var(--vc,var(--accent)) !important}
.flow,.trust{border:1px solid var(--line) !important;border-radius:10px !important}
.log,pre,code{
  background:var(--panel2) !important;
  color:var(--muted) !important;
  border-color:var(--line) !important;
}
.line{border-bottom:1px solid var(--line) !important}

/* ---- buttons ---------------------------------------------------------- */
.btn,button.btn,.btn-primary,button.btn-primary{
  background:var(--accent) !important;color:#fbfdf9 !important;border:none !important;
  border-radius:9px !important;font-weight:600 !important;font-family:var(--sans) !important;
  box-shadow:none !important;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;
}
.btn:hover,button.btn:hover,.btn-primary:hover{background:var(--accent-2) !important;transform:translateY(-1px);box-shadow:var(--shadow-sm) !important}
.btn:active,button.btn:active{transform:translateY(0)}
.btn.ghost,.btn-secondary{background:transparent !important;color:var(--accent) !important;border:1px solid var(--line-strong) !important}
.btn.ghost:hover,.btn-secondary:hover{background:rgba(21,88,60,.06) !important}
.cta .go,.go,.second a{background:var(--accent) !important;color:#fbfdf9 !important}
.cta .go:hover{background:var(--accent-2) !important}
.cta .txt{color:var(--txt) !important;border-bottom:1.5px solid var(--line-strong)}
.cta .txt:hover{border-color:var(--accent)}

/* ---- inputs ----------------------------------------------------------- */
input,select,textarea{
  background:#fffdf8 !important;border:1px solid var(--line-strong) !important;border-radius:9px !important;
  color:var(--txt) !important;font-family:var(--sans) !important;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(21,88,60,.14) !important;
}

/* ---- tabs / chips / pills / badges ------------------------------------ */
.tab{background:var(--panel) !important;border:1px solid var(--line) !important;color:var(--muted) !important;border-radius:10px !important;cursor:pointer;transition:.15s}
.tab:hover{border-color:var(--line-strong) !important;color:var(--txt) !important}
.tab.active{background:var(--accent) !important;color:#fbfdf9 !important;border-color:transparent !important}
.chip,.pill{background:rgba(21,88,60,.08) !important;border:1px solid rgba(21,88,60,.2) !important;color:var(--accent) !important;border-radius:999px !important}
.chip.warn{background:rgba(176,121,31,.1) !important;border-color:rgba(176,121,31,.28) !important;color:var(--warn) !important}
.scam{background:rgba(192,57,43,.08) !important;border:1px solid rgba(192,57,43,.28) !important;color:var(--bad) !important;border-radius:8px !important}
.badge{color:#fbfdf9 !important;box-shadow:var(--shadow-sm) !important}
.conf > i{background:linear-gradient(90deg,var(--warn),var(--good)) !important}
.prog > i{background:linear-gradient(90deg,var(--accent),var(--accent-2)) !important}

/* checklist boxes (pas.html) */
.check li{border-bottom:1px solid var(--line) !important}
.check li .box{border:1.5px solid var(--line-strong) !important;color:transparent}
.check li.done .box{background:var(--accent) !important;border-color:transparent !important;color:#fbfdf9 !important}
.check li.done .txt b{color:var(--muted) !important}
.num{background:rgba(21,88,60,.12) !important;color:var(--accent) !important;font-family:var(--serif)}

/* ---- tables (listings / dashboard / arbitrage) ------------------------ */
table{border-collapse:collapse}
th{color:var(--muted) !important;font-weight:600;border-bottom:1px solid var(--line-strong) !important;background:transparent !important}
td{border-bottom:1px solid var(--line) !important;color:var(--txt) !important}
tr:hover td{background:var(--panel2) !important}

/* ---- footer ----------------------------------------------------------- */
footer,.foot{color:var(--muted) !important;border-top:1px solid var(--line);background:transparent !important}

/* =====================================================================
   ANIMATIONS — subtle editorial entrance + interactions
   ===================================================================== */
@keyframes aa-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aa-fade{from{opacity:0}to{opacity:1}}
@keyframes aa-shimmer{0%{background-position:-360px 0}100%{background-position:360px 0}}
@keyframes aa-pop{0%{opacity:0;transform:scale(.94)}60%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}

/* header slides down, hero/eyebrow rise on load */
header,.head{animation:aa-fade-up .5s ease both}
.hero,.pagehead{animation:aa-fade-up .6s .05s ease both}
.section-label{animation:aa-fade .8s .1s ease both}

/* grids stagger their children as they appear */
.grid > *,.stats > *,.stats-grid > *,.cards > *,.trust .item,.card,.stat,.tool{
  animation:aa-fade-up .5s ease both;
}
.grid > *:nth-child(2),.cards > *:nth-child(2),.stats > *:nth-child(2){animation-delay:.06s}
.grid > *:nth-child(3),.cards > *:nth-child(3),.stats > *:nth-child(3){animation-delay:.12s}
.grid > *:nth-child(4),.stats > *:nth-child(4){animation-delay:.18s}
.grid > *:nth-child(5){animation-delay:.24s}
.grid > *:nth-child(6){animation-delay:.30s}
.grid > *:nth-child(n+7){animation-delay:.34s}

/* verdict banner & result badges pop in */
.verdict{animation:aa-pop .45s ease both}
.badge{animation:aa-pop .4s ease both}

/* empty / loading states: calm, centered, one-time fade */
.empty{animation:aa-fade .5s ease both;border-radius:10px}

/* brand logo gentle hover */
.brand:hover .logo,.brand:hover .mk{border-color:var(--accent);color:var(--accent);transition:.2s}

/* live pulse on the radar dot (h1 "Deal Radar ●") */
@keyframes aa-pulse{0%,100%{opacity:1;text-shadow:0 0 0 rgba(28,122,82,0)}50%{opacity:.35;text-shadow:0 0 12px rgba(28,122,82,.55)}}
h1 .dot{animation:aa-pulse 1.9s ease-in-out infinite;display:inline-block}

/* confidence / progress bars grow from zero when (re)rendered */
@keyframes aa-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.conf > i,.prog > i{transform-origin:left center;animation:aa-grow .9s .15s cubic-bezier(.22,.8,.3,1) both}

/* loading state: quiet shimmer instead of static text */
.empty.loading{
  color:var(--muted) !important;
  background:linear-gradient(90deg,var(--panel) 25%,var(--bg-soft) 45%,var(--panel) 65%) !important;
  background-size:720px 100% !important;
  animation:aa-shimmer 1.4s linear infinite !important;
  border:1px solid var(--line);border-radius:12px;
}

/* smooth in-page anchors (ghid, pas-cu-pas) */
html{scroll-behavior:smooth}

/* scroll-reveal classes driven by /static/anim.js */
.aa-below{opacity:0 !important;transform:translateY(18px);animation:none !important}
.aa-below.aa-in{
  opacity:1 !important;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1);
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .aa-below{opacity:1 !important;transform:none}
}
/* NOTE: the explainer-block (.aa-explain) and glossary-tooltip (.aa-term) styles
   are injected by i18n.js so they reach EVERY page (5 dealer pages don't load
   this file). Kept out of here on purpose — single source in i18n.js. */