/* ==========================================================================
   Carpay — shared chrome for the /comparison series.
   Used by carpay-vs-blytz.html (campaign landing) and comparison/*.html
   (the long-form articles).

   Deliberately NOT site.css. Same reasoning as statement-review.html: these
   pages carry the design-system tokens themselves so an edit to site.css
   can't break them and an edit here can't break the rest of the site. The
   difference is that this file is shared between the comparison pages rather
   than inlined per page — they're a series, so a change to the chrome should
   land on all of them at once.

   Tokens lifted from the Carpay design system (brand guidelines section 02),
   identical to the set in statement-review.html. Brand typeface is Poppins
   per the brand book; the React pages still render in Inter.
   ========================================================================== */
:root{
  --blue-light:#2A5AA7; --blue:#203B8E; --blue-contrast:#03258C; --blue-bright:#2570B6;
  --blue-900:#16275f; --blue-800:#1b3277; --blue-700:#203b8e; --blue-600:#284aa6;
  --blue-500:#2a5aa7; --blue-400:#4f78c3; --blue-300:#8aa6db; --blue-200:#c2d2ef;
  --blue-100:#e1e9f8; --blue-50:#eef3fc;
  --periwinkle:#5f72cb;
  --green:#54a85b; --green-dark:#468f4d; --green-soft:#e7f3e8;
  --red:#e0414b; --red-soft:#fbe7e9; --amber:#f5b21b; --amber-soft:#fdf2d8;
  --ink:#1a2440; --gray-900:#232c45; --gray-700:#4a536b; --gray-600:#69718a;
  --gray-500:#8b92a7; --gray-400:#abb1c2; --gray-300:#d2d6e1; --gray-200:#e6e9f0;
  --gray-100:#f1f3f8; --gray-50:#f8f9fc; --white:#fff;
  --navy:#0F2347;
  --text-strong:var(--ink); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --text-link:var(--blue-bright);
  --surface-page:var(--blue-50); --surface-card:var(--white);
  --border-subtle:var(--gray-200); --border-strong:var(--gray-300); --focus-ring:var(--blue-400);
  --font-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(26,36,64,.06); --shadow-sm:0 2px 8px rgba(26,36,64,.06);
  --shadow-md:0 8px 24px rgba(26,36,64,.08); --shadow-lg:0 16px 40px rgba(26,36,64,.12);
}

/* --- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);font-family:var(--font-sans);
  color:var(--text-strong);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--blue-800)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-bright);margin:0}
.eyebrow-mute{color:var(--text-muted)}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);
  font-weight:600;line-height:1;border-radius:var(--radius-md);cursor:pointer;text-align:center;
  transition:background .16s ease,transform .12s ease,box-shadow .16s ease;
  background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:var(--shadow-xs);
  min-height:48px;padding:12px 22px;font-size:15px}
.btn:hover{background:var(--blue-600);color:#fff}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:38px;padding:8px 16px;font-size:14px}
.btn-lg{min-height:56px;padding:16px 28px;font-size:17px}
.btn-block{width:100%}
.btn-secondary{background:transparent;color:var(--blue);border:1.5px solid var(--blue);box-shadow:none}
.btn-secondary:hover{background:var(--blue-50);color:var(--blue)}
.btn-light{background:#fff;color:var(--blue);border:1px solid #fff}
.btn-light:hover{background:var(--blue-50);color:var(--blue)}
.btn-green{background:var(--green);border-color:var(--green)}
.btn-green:hover{background:var(--green-dark);color:#fff}

/* --- header ------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle)}
.hdr-in{max-width:1120px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:22px}
.hdr-logo{height:22px;width:auto;display:block}
.hdr-nav{display:flex;align-items:center;gap:22px;margin-left:8px}
.hdr-nav a{font-size:14.5px;font-weight:500;color:var(--text-body)}
.hdr-nav a:hover{color:var(--blue)}
.hdr-nav a[aria-current="page"]{color:var(--blue);font-weight:600}
.hdr-spacer{flex:1}
.hdr-tel{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;
  color:var(--text-body);white-space:nowrap}
.hdr-tel:hover{color:var(--blue)}

/* --- sitewide footer ---------------------------------------------------- */
/* Same markup and class names as the footer in site.css / app-person-v2.jsx,
   including the Comparisons column, so this reads as the carpay.com footer.
   Restated here (in Poppins, the brand face) rather than pulled from
   site.css to keep these pages independent of it. */
.site-footer{background:var(--navy);color:#B9C4DA;padding:60px 0 26px}
.site-footer .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.site-footer .ft-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.site-footer .ft-brand .logo-img{height:24px;width:auto;display:block;margin-bottom:16px}
.site-footer .ft-tagline{font-size:14px;line-height:1.55;color:#8FA1C4;max-width:300px;margin:0}
.site-footer .ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.site-footer .ft-h{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#6E80A6;margin:0 0 4px}
.site-footer .ft-col a{font-size:14.5px;color:#C9D4E8;transition:color .15s}
.site-footer .ft-col a:hover{color:#fff}
.site-footer .ft-bottom{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.09);padding-top:22px;font-size:13.5px;color:#8FA1C4}
.site-footer .ft-legal-links{display:flex;gap:22px;margin-left:auto}
.site-footer .ft-legal-links a{color:#8FA1C4;transition:color .15s}
.site-footer .ft-legal-links a:hover{color:#fff}

/* --- shared: comparison table ------------------------------------------ */
/* Three columns — row label, Carpay, competitor. The Carpay column is the
   tinted one. Collapses to stacked cards under 720px, where a 3-up grid of
   long sentences becomes unreadable. */
.cmp{display:grid;grid-template-columns:var(--cmp-label,1.15fr) 1fr 1fr;align-items:stretch}
.cmp-head-us,.cmp-head-them{height:76px;padding:0 22px;display:flex;align-items:center;justify-content:center}
.cmp-head-us{background:var(--blue-700);border-radius:14px 14px 0 0}
.cmp-head-us img{height:44px;width:auto;display:block}
.cmp-head-them{font-size:15px;font-weight:600;color:var(--gray-600)}
.cmp-label{padding:20px 4px 20px 0;border-top:1px solid var(--border-subtle);font-size:15px;
  font-weight:600;color:var(--ink);line-height:1.45;display:flex;align-items:center}
.cmp-us{padding:20px 22px;border-top:1px solid #d3dff4;background:var(--blue-50);
  display:flex;gap:12px;align-items:flex-start}
.cmp-them{padding:20px 22px;border-top:1px solid var(--border-subtle);display:flex;gap:12px;align-items:flex-start}
.cmp-us .mk{width:22px;height:22px;border-radius:7px;background:var(--green);color:#fff;font-size:12px;
  font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.cmp-them .mk{width:22px;height:22px;border-radius:7px;background:var(--gray-100);color:var(--gray-500);
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.cmp-us .tx{font-size:15px;line-height:1.55;color:var(--blue-700);font-weight:500}
.cmp-them .tx{font-size:15px;line-height:1.55;color:var(--gray-600)}
.cmp-stack-label{display:none}

/* --- responsive --------------------------------------------------------- */
@media (max-width:860px){
  .site-footer .ft-top{grid-template-columns:1fr 1fr;gap:32px 24px}
  .site-footer .ft-brand{grid-column:1/-1}
}
@media (max-width:760px){
  .hdr-nav{display:none}
}
@media (max-width:720px){
  .hdr-in{padding-left:20px;padding-right:20px;gap:14px}
  .site-footer .wrap{padding:0 20px}
  /* Comparison table -> stacked cards. Each row becomes its own block with
     the row label as a heading, so no cell is ever 90px wide. */
  .cmp{display:block}
  .cmp-head-us,.cmp-head-them{display:none}
  .cmp-label{border-top:1px solid var(--border-subtle);padding:22px 0 12px;display:block;
    font-size:16px;line-height:1.4}
  .cmp-us,.cmp-them{border-top:0;border-radius:var(--radius-md);padding:14px 16px;margin-bottom:8px}
  .cmp-us{background:var(--blue-50)}
  .cmp-them{background:var(--gray-50)}
  .cmp-stack-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--gray-500);margin-bottom:6px}
  .cmp-us .cmp-stack-label{color:var(--blue-500)}
}
@media (max-width:520px){
  .site-footer .ft-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .site-footer .ft-legal-links{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}