/* ============================================================
   Shared styles for RoadFolio content / landing pages.
   Brand: navy #0D1F3C, blue #1A56DB. Fonts: DM Sans + Space Grotesk.
   Used by the SEO content pages (mileage guide, trade pages, etc.).
   ============================================================ */
:root{
  --navy:#0D1F3C; --blue:#1A56DB; --blue-mid:#2563EB; --blue-light:#DBEAFE;
  --blue-accent:#60A5FA; --white:#FFFFFF; --off-white:#F8FAFD; --gray-100:#F1F5F9;
  --gray-200:#E2E8F0; --gray-400:#94A3B8; --gray-600:#475569; --gray-800:#1E293B;
  --text:#0F172A; --success:#16A34A;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:var(--white);line-height:1.7;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.brand,.btn,.eyebrow{font-family:'Space Grotesk',sans-serif;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:820px;margin:0 auto;padding:0 22px;}
.wide{max-width:1080px;}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--gray-200);}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;color:var(--navy);}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--blue-accent);}
.bar-cta{background:var(--blue);color:#fff !important;padding:9px 18px;border-radius:10px;font-weight:600;font-size:14px;}
.bar-cta:hover{background:var(--blue-mid);text-decoration:none;}

/* article header */
.head{padding:46px 0 22px;}
.eyebrow{display:inline-block;color:var(--blue);font-weight:600;font-size:13px;letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px;}
.head h1{font-size:clamp(28px,4.5vw,42px);line-height:1.12;font-weight:700;letter-spacing:-.6px;color:var(--navy);}
.head .lede{font-size:18px;color:var(--gray-600);margin-top:16px;}
.meta{font-size:13px;color:var(--gray-400);margin-top:14px;}

/* prose */
.prose{padding:8px 0 10px;font-size:17px;}
.prose h2{font-size:clamp(22px,3vw,28px);color:var(--navy);margin:34px 0 12px;letter-spacing:-.4px;}
.prose h3{font-size:19px;color:var(--navy);margin:24px 0 8px;}
.prose p{margin:14px 0;color:var(--gray-800);}
.prose ul,.prose ol{margin:14px 0 14px 22px;color:var(--gray-800);}
.prose li{margin:7px 0;}
.prose strong{color:var(--navy);}
.prose blockquote{border-left:4px solid var(--blue);background:var(--off-white);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0;color:var(--gray-600);font-size:15.5px;}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px;}
.prose th,.prose td{border:1px solid var(--gray-200);padding:10px 12px;text-align:left;}
.prose th{background:var(--off-white);color:var(--navy);font-family:'Space Grotesk';}
.callout{background:var(--blue-light);border-radius:14px;padding:18px 20px;margin:22px 0;font-size:15.5px;color:var(--gray-800);}

/* inline CTA card */
.cta{background:linear-gradient(135deg,var(--navy),#1A56DB);color:#fff;border-radius:20px;padding:34px 26px;text-align:center;margin:34px 0;}
.cta h2{color:#fff;font-size:clamp(22px,3vw,30px);margin:0 0 8px;}
.cta p{color:rgba(255,255,255,0.85);margin:0 0 20px;}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--blue-accent);color:var(--navy) !important;padding:13px 24px;border-radius:12px;font-weight:600;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.2);}
.btn:hover{transform:translateY(-2px);text-decoration:none;}
.btn.outline{background:transparent;color:#fff !important;border:1.5px solid rgba(255,255,255,0.32);box-shadow:none;}

/* faq */
.faq{padding:6px 0 20px;}
.faq h2{font-size:clamp(22px,3vw,28px);color:var(--navy);margin:30px 0 14px;letter-spacing:-.4px;}
.faq details{border:1px solid var(--gray-200);border-radius:12px;padding:14px 18px;margin:10px 0;}
.faq summary{font-weight:600;color:var(--navy);cursor:pointer;font-family:'Space Grotesk';}
.faq details p{margin-top:10px;color:var(--gray-600);font-size:15.5px;}

/* related links */
.related{background:var(--off-white);border-radius:16px;padding:22px 24px;margin:26px 0;}
.related h3{font-family:'Space Grotesk';color:var(--navy);font-size:16px;margin-bottom:10px;}
.related a{display:inline-block;margin:4px 14px 4px 0;font-weight:600;}

footer{text-align:center;padding:30px 0 44px;color:var(--gray-400);font-size:13px;border-top:1px solid var(--gray-200);margin-top:30px;}
footer a{color:var(--gray-600);}
.disc{font-size:12.5px;color:var(--gray-400);margin-top:8px;max-width:680px;margin-left:auto;margin-right:auto;}

@media(max-width:640px){ .head{padding:30px 0 16px;} .prose{font-size:16px;} }