/* ============================================================
   site-paper.css — re-skins the legacy style.css (Outfit / DM Serif
   light theme) to the TGM "Paper" design system used on the new
   homepage + pay page. Link this AFTER style.css on each legacy page:
       <link rel="stylesheet" href="style.css">
       <link rel="stylesheet" href="/ds/site-paper.css">
   Self-contained: loads its own webfonts + uses Paper hex values, so it
   doesn't depend on ds/styles.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ---- 1) Remap the legacy palette → Paper ------------------- */
:root{
  --green:#2e9e54;  --green-dark:#15803d;  --green-light:#e3f7ea;
  --white:#ffffff;  --gray-bg:#fbf9f5;     --cream:#f7f4ec;
  --text:#0f1c28;   --text-muted:#2c3b48;  --text-dim:#5a6b78;  --text-light:#2c3b48;
  --bg:#ffffff;     --bg-alt:#fbf9f5;      --bg-dark:#081c2e;
  --navy:#0f3354;   --navy-mid:#16456e;
  --primary:#2e9e54; --success:#2e9e54;    --error:#cf4b3f;
  /* Paper semantic signal colors (design spec): status badges/pills */
  --signal-paid:#2e9e54; --signal-paid-bg:#e3f7ea;
  --signal-late:#cf4b3f; --signal-late-bg:#fbe3e0;
  --signal-info:#1f5688; --signal-info-bg:#e2ecf5;
  --signal-due:#c9881f;  --signal-due-bg:#fbf0d8;
  --border:rgba(15,51,84,.10);
  --radius:18px;    --radius-sm:12px;
  --shadow:0 1px 3px rgba(8,28,46,.05),0 1px 2px rgba(8,28,46,.06);
  --shadow-md:0 8px 24px rgba(8,28,46,.07);
  --shadow-lg:0 18px 48px rgba(8,28,46,.10);
}

/* ---- 2) Typography — override the per-class fonts ----------- */
/* Everything → DM Sans (body), then re-apply Syne/DM Mono on top.
   !important + the cascade order below mean class-level font rules in
   style.css get cleanly overridden. */
body, body *{ font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; }

h1,h2,h3,h4,
.section-title,.hero h1,.hero-content h1,
.price-amount,.price-tier,.step h3,.step-card h3,
.zip-card h2,.feature-title,.popular-badge,.pkg-name,
.footer-brand .logo-text,.logo-text{
  font-family:'Syne',sans-serif !important;
  letter-spacing:-.015em;
}
.section-title,.hero h1{ font-weight:800 !important; }

.section-eyebrow,.form-section-title,.hero-badge,.pkg-price,.price-brands{
  font-family:'DM Mono','SF Mono',monospace !important;
  letter-spacing:.06em !important;
}
.section-eyebrow{ text-transform:uppercase; }

/* ---- 3) Page surface --------------------------------------- */
body{ background:var(--cream) !important; color:var(--text); }

/* ---- 4) Header --------------------------------------------- */
.navbar{
  background:color-mix(in srgb, #fbf9f5 88%, transparent) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,51,84,.12) !important;
}
.logo-icon{
  background:var(--navy) !important; color:#fff !important;
  border-radius:9px !important; padding:4px 8px !important;
  font-weight:800 !important; letter-spacing:-.02em;
}
.logo-text{ color:var(--navy) !important; font-weight:800 !important; }
.nav-links li a{ color:var(--text-muted) !important; font-weight:500 !important; }
.nav-links li a:hover,.nav-links li a.active{ color:var(--green) !important; }

/* ---- 5) Buttons -------------------------------------------- */
.btn{ border-radius:12px !important; font-weight:600 !important; }
.btn-primary,.btn-nav{ background:var(--green) !important; border-color:var(--green) !important; color:#fff !important; }
.btn-primary:hover,.btn-nav:hover{ background:var(--green-dark) !important; border-color:var(--green-dark) !important; }
.btn-nav{ border-radius:999px !important; }
.btn-outline{ border-color:var(--navy) !important; color:var(--navy) !important; background:transparent !important; }
.btn-outline:hover{ background:var(--navy) !important; color:#fff !important; }
.btn-outline-white{ border-color:#fff !important; color:#fff !important; }

/* ---- 6) Cards / sections / forms --------------------------- */
.price-card,.signup-card,.zip-card,.step-card,.feature-card,.faq-item,.review-card,.lookup-card{
  border-radius:18px !important;
  border-color:rgba(15,51,84,.10) !important;
}
.price-card.popular,.price-card.featured{ border:2px solid var(--green) !important; }
.section-eyebrow{ color:var(--green-dark) !important; }
input,select,textarea{ border-radius:12px !important; }
input:focus,select:focus,textarea:focus{ border-color:var(--green) !important; box-shadow:0 0 0 3px var(--green-light) !important; }

/* ---- 7) Footer → navy-900 ---------------------------------- */
.footer{ background:var(--bg-dark) !important; }
.footer .logo-icon{ background:var(--green) !important; }
.footer a:hover{ color:#fff !important; }