/* ───────────────────────────────────────────────
   Rule the Bar — shared site stylesheet
   Foundation + nav + footer + buttons + section shell
   Pages add their own page-specific CSS on top.
   ─────────────────────────────────────────────── */

:root{
  --bg:#f6f3ff;
  --v:#7c3aed;
  --vl:#ede9fe;
  --vm:#a78bfa;
  --vd:#4c1d95;
  --pk:#e8006f;
  --tl:#0891b2;
  --em:#059669;
  --am:#d97706;
  --or:#f97316;
  --cr:#dc2626;
  --text:#130d2e;
  --mid:#3d3568;
  --muted:#8577b8;
  --surface:#ffffff;
  --border:#ece8fc;
  --grad-headline:linear-gradient(95deg,#7c3aed 0%,#c026d3 38%,#e8006f 64%,#f97316 100%);
  --grad-btn:linear-gradient(135deg,#7c3aed,#9333ea);
  --grad-nav:linear-gradient(120deg,#6d28d9,#7c3aed 55%,#8b3ff0);
  --grad-progress:linear-gradient(90deg,#7c3aed,#e8006f);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
html{scroll-behavior:smooth;}
body{
  font-family:'DM Sans',-apple-system,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 620px at 93% 26%, rgba(255,206,224,.40) 0%, transparent 56%),
    radial-gradient(820px 600px at 6% -4%, #efe9ff 0%, transparent 52%),
    #f5f1ff;
  background-attachment:fixed;
  line-height:1.5;
  min-height:100vh;
}
.display{font-family:'Fraunces',Georgia,serif;letter-spacing:-.02em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{text-decoration:none;color:inherit;}
img{display:block;}

/* ─────────── NAV ─────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--grad-nav);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 30px rgba(76,29,149,.18);
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  height:78px;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:0;}
.brand img{height:26px;width:auto;filter:brightness(0) invert(1);}
.nav-links{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:5px;border-radius:9999px;
}
.nav-links a{
  padding:9px 18px;border-radius:9999px;
  font-size:14.5px;font-weight:500;color:rgba(255,255,255,.92);
  transition:background .18s ease,color .18s ease;
}
.nav-links a:hover{background:rgba(255,255,255,.18);color:#fff;}
.nav-links a.active{background:rgba(255,255,255,.22);color:#fff;}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-login{
  padding:11px 22px;border-radius:9999px;
  font-size:14.5px;font-weight:500;color:#fff;white-space:nowrap;
  transition:background .18s ease;
}
.nav-login:hover{background:rgba(255,255,255,.14);}
.btn-white{
  padding:11px 22px;border-radius:9999px;
  background:#fff;color:var(--vd);
  font-size:14.5px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.2);}

/* ─────────── PAGE SHELL ─────────── */
.page{padding:54px 32px 96px;}
.wrap{max-width:1180px;margin:0 auto;}
.wrap-narrow{max-width:920px;margin:0 auto;}

.crumb{
  font-size:15px;color:var(--muted);margin-bottom:28px;
}
.crumb a{color:var(--v);font-weight:500;transition:color .15s ease;}
.crumb a:hover{color:var(--vd);}
.crumb .sep{margin:0 8px;color:var(--vm);}

.page-title{
  font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(40px,5.4vw,68px);line-height:1.02;color:var(--text);
  margin-bottom:24px;
}
.page-intro{
  font-size:clamp(18px,1.9vw,22px);color:var(--mid);line-height:1.5;
  max-width:760px;
}

/* ─────────── SECTION SHELL ─────────── */
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--v);margin-bottom:16px;
}
.section-title{
  font-family:'Fraunces',serif;font-size:clamp(30px,4vw,46px);
  font-weight:600;letter-spacing:-.025em;color:var(--text);line-height:1.08;
}
.section-lead{
  font-size:18px;color:var(--muted);max-width:640px;margin-top:16px;
}

/* ─────────── BUTTONS ─────────── */
.btn-lg{
  padding:19px 40px;border-radius:18px;
  font-size:18px;font-weight:600;cursor:pointer;border:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 14px 32px rgba(124,58,237,.36);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,58,237,.46);}
.btn-ghost{background:#fff;color:var(--text);border:1.5px solid var(--border);box-shadow:0 6px 18px rgba(76,29,149,.06);}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--vm);}

/* ─────────── BOTTOM CTA BANNER ─────────── */
.cta-banner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;text-align:center;
  background:var(--grad-btn);color:#fff;
  padding:26px 32px;border-radius:20px;
  font-size:clamp(17px,1.7vw,20px);font-weight:600;letter-spacing:-.01em;
  box-shadow:0 18px 40px rgba(124,58,237,.34);cursor:pointer;border:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-banner:hover{transform:translateY(-2px);box-shadow:0 24px 52px rgba(124,58,237,.44);}
.cta-sub{
  text-align:center;font-size:15px;color:var(--muted);margin-top:22px;
}
.cta-sub a{color:var(--v);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.cta-sub a:hover{color:var(--vd);}

/* ─────────── FOOTER ─────────── */
footer.site-foot{background:var(--grad-nav);color:#fff;padding:64px 32px 40px;margin-top:0;}
/* Horizontal footer layout for the .inner/.top/.links/.legal markup the static
   pages use (florida-materials, california-materials, about, reviews, faq, app).
   These rules existed only for #site-footer / in guides.css, so on the static
   pages the logo rendered at full size and the links crammed into one run. */
.site-foot .inner{max-width:1080px;margin:0 auto;}
.site-foot .top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.16);}
.site-foot .top img{height:26px;width:auto;display:block;filter:brightness(0) invert(1);margin-bottom:0;}
.site-foot .links{display:flex;gap:1.5rem;flex-wrap:wrap;}
.site-foot .links a{font-size:14px;color:rgba(255,255,255,.86);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;transition:color .15s;}
.site-foot .links a:hover{color:#fff;}
.site-foot .legal{font-size:12px;color:rgba(255,255,255,.6);line-height:1.6;padding-top:.25rem;}
.foot-inner{max-width:1180px;margin:0 auto;}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.16);}
.foot-brand img{height:28px;filter:brightness(0) invert(1);margin-bottom:16px;}
.foot-brand p{font-size:14px;color:rgba(255,255,255,.72);max-width:300px;line-height:1.5;}
.foot-links{display:flex;gap:54px;flex-wrap:wrap;}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:16px;}
.foot-col a{display:block;font-size:14.5px;color:rgba(255,255,255,.86);margin-bottom:11px;line-height:1.35;white-space:nowrap;transition:color .15s ease;}
.foot-col a:hover{color:#fff;}
.foot-bottom{padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.6;}

/* ─────────── RESPONSIVE ─────────── */
@media(max-width:920px){
  .nav-links{display:none;}
  .page{padding:40px 22px 72px;}
  .foot-top{flex-direction:column;gap:26px;}
  .foot-links{gap:36px;}
}
@media(max-width:560px){
  .nav-inner{padding:0 18px;height:66px;}
  .brand img{height:22px;}
  .nav-right .nav-login{display:none;}
  .btn-white{padding:10px 18px;font-size:13.5px;}
  .page{padding:30px 18px 64px;}
  .crumb{margin-bottom:20px;font-size:14px;}
  .page-intro{font-size:17px;}
  .section-lead{font-size:16px;}
  .cta-banner{padding:22px 22px;border-radius:16px;}
  footer.site-foot{padding:48px 22px 34px;}
  .foot-links{gap:28px 40px;}

  /* logged-in nav + topbar (defined per-page; higher-specificity overrides) */
  body .topbar{padding:8px 16px;gap:10px;font-size:11px;}
  .nav .nav-acct{gap:8px;}
  .nav .nav-acct .pill-nav{padding:8px 13px;font-size:13px;}
  .nav .nav-acct .pill-nav.muted{display:none;}
}
@media(max-width:380px){
  .nav .nav-acct .pill-nav{padding:7px 11px;font-size:12px;}
}