@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap");
/* Sunstate Legacy Planning — site styles
   Layout: single centered column (max 1100px), warm navy + sand palette, large type for 50+ readers. */
:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --fg: #1a1a1a;
  --muted: #3f3f3f;
  --line: #e3dfd5;
  --navy: #141414;        /* brand black (kept var name so existing rules work) */
  --navy-deep: #0a0a0a;
  --gold: #c9a24a;
  --gold-deep: #9a7a2e;
  --accent: #b8902f;      /* gold, darkened for contrast on white */
  --accent-ink: #0a0a0a;
  --good: #2e7d4f;
  --shadow: 0 10px 30px rgba(0, 0, 0, .10);
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", Verdana, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: 20px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--navy); }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1100px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 720px; }

/* Header */
.site-header { background: #0a0a0a; border-bottom: 2px solid var(--gold); }
.site-header .nav a { color: #f2f2f2; }
.site-header .phone { color: var(--gold); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.brand svg { width: 34px; height: 34px; }
.nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--fg); font-weight: 600; }
.phone { color: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-block; padding: 14px 26px; border-radius: 8px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: 1.05rem; font-family: var(--body); }
.btn-primary { background: linear-gradient(180deg, #d9b45c, #b8902f); color: #0a0a0a; }
.btn-primary:hover { background: linear-gradient(180deg, #c9a24a, #9a7a2e); }
.btn-ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Hero */
.hero { background: radial-gradient(120% 90% at 20% 0%, #1c1c1c 0%, #0a0a0a 70%); color: #f2f2f2; }
.hero h1 { color: #fff; }
.hero .lead { color: #d8d8d8; }
.hero .trust span { background: rgba(255,255,255,.06); color: #e8e8e8; border: 1px solid rgba(201,162,74,.35); }
.hero .btn-ghost { color: #fff; border-color: var(--gold); }
.hero .eyebrow { color: var(--gold); }
.hero .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding-block: 56px; }
.hero .lead { font-size: 1.25rem; color: var(--muted); max-width: 36ch; }
.hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.hero-card ul { padding-left: 20px; margin: 0; }
.hero-card li { margin-bottom: 8px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--accent); font-weight: 700; margin-bottom: 10px; }

/* Sections */
section { padding-block: 48px; }
.band { background: var(--navy); color: #fff; }
.band h2, .band a { color: #fff; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; min-width: 0; }
.card h3 { margin-top: 0; }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; padding-top: 44px; min-width: 0; }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.agent { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; }
.agent .avatar { width: 110px; height: 110px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 2.2rem; }

/* Footer */
.site-footer { background: #0a0a0a; color: #c9c9c9; font-size: .92rem; padding-block: 36px; border-top: 2px solid var(--gold); }
.site-footer a { color: #fff; }
.site-footer .wrap { display: grid; gap: 18px; }
.disclosure { font-size: .9rem; color: #b8c3d1; line-height: 1.5; }
.disclosure.light { color: var(--muted); }

/* Lead form */
.form-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.progress { display: flex; gap: 6px; margin-bottom: 18px; }
.progress span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.progress span.on { background: var(--accent); }
.fstep[hidden] { display: none; }
.q { font-family: var(--display); font-size: 1.4rem; margin-bottom: 14px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; font-size: 1.05rem; }
.choice:has(input:checked) { border-color: var(--navy); background: #eef3f9; }
.choice input { width: 20px; height: 20px; accent-color: var(--navy); }
label.field { display: block; margin-bottom: 14px; font-weight: 600; }
label.field input, label.field select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 1.05rem; border: 2px solid var(--line); border-radius: 8px; font-family: var(--body); background: #fff; }
label.field input:focus { outline: 3px solid #cfe0f3; border-color: var(--navy); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.consent { display: grid; gap: 12px; margin: 18px 0; }
.consent label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: .95rem; line-height: 1.45; font-weight: 400; align-items: start; }
.consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--navy); }
.consent .req { color: var(--accent); font-weight: 700; }
.form-actions { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; }
.err { color: #a93226; font-weight: 600; margin-top: 8px; display: none; }
.err.show { display: block; }
.trust { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin-top: 16px; }
.hp { position: absolute; left: -9999px; }
.notice { background: #fff6ea; border: 1px solid #f0d9b8; border-radius: 10px; padding: 14px 16px; font-size: .95rem; }

/* Legal pages */
.legal h2 { font-size: 1.35rem; margin-top: 1.6em; }
.legal { max-width: 760px; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero .wrap, .grid-3, .steps, .row2, .agent { grid-template-columns: 1fr; }
  .nav { gap: 12px; font-size: .95rem; }
  .form-shell { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.avatar-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--accent),0 0 0 8px var(--surface)}
.veteran-band{background:#f1efe8;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero-photo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hero-photo img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--accent)}
.hero-photo div{font-size:.95rem;color:var(--muted);line-height:1.35}
.hero-photo strong{color:var(--fg);display:block;font-size:1.05rem}
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pkg{border:2px solid var(--line);border-radius:12px;padding:20px;background:var(--surface);min-width:0}
.pkg h3{margin-top:0}.pkg.bronze h3{color:#8a5a19}.pkg.silver h3{color:#5f6b78}.pkg.gold h3{color:#9a7b1c}
@media (max-width:760px){.packages{grid-template-columns:1fr}.veteran-band .grid-3{grid-template-columns:1fr!important}}

.brand-logo{height:78px;width:auto;display:block}
.tagline{font-family:var(--display);color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem}
@media (max-width:760px){.brand-logo{height:60px}}

/* Readability fixes: forms and cards that sit inside the dark hero keep dark text */
.hero .form-shell, .hero .form-shell .q, .hero .form-shell .field, .hero .form-shell .choice, .hero .form-shell .consent label, .hero .form-shell .note, .hero .form-shell .disclosure { color: var(--fg); }
.hero .form-shell .q { font-family: var(--display); font-weight: 600; }
.hero .form-shell .btn-ghost { color: var(--fg); border-color: var(--gold); background: #fff; }
.hero .form-shell .req { color: var(--gold-deep); }
.hero .form-shell .choice:has(input:checked) { border-color: var(--gold); background: #faf4e6; }
.hero .form-shell .choice input, .hero .form-shell input[type=checkbox] { accent-color: var(--gold-deep); }
.hero .form-shell .progress span.on { background: var(--gold); }
.hero .hero-photo strong { color: #fff; display: block; }
.hero .hero-photo div { color: #cfcfcf; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 8px; }
.hero .trust span { border-radius: 999px; padding: 5px 14px; font-size: .92rem; }
.q-hint { color: var(--muted); font-size: .95rem; margin: -4px 0 12px; }
.opt { font-weight: 400; color: var(--muted); }
.f-card .q-hint, .f-card .opt { color: #b5b5b5; }
.site-header .phone { text-decoration: none; border: 1px solid var(--gold); border-radius: 999px; padding: 6px 14px; }
.f-phone { border: 1px solid var(--gold); border-radius: 999px; padding: 6px 14px; }

/* ===== Easy-reading pass for older visitors ===== */
h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); line-height: 1.12; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.4rem; }
.nav { gap: 22px; }
.nav a { font-size: 1.05rem; }
.site-header .phone { font-size: 1.05rem; padding: 10px 20px; color: #0a0a0a !important; background: linear-gradient(180deg,#d9b45c,#b8902f); border: 0; font-weight: 700; }
.btn { min-height: 56px; padding: 16px 30px; font-size: 1.15rem; border-radius: 10px; }
.hero .lead { font-size: 1.3rem; color: #eeeeee; max-width: 34ch; }
.hero-points { list-style: none; padding: 0; margin: 18px 0; }
.hero-points li { position: relative; padding-left: 36px; margin-bottom: 12px; font-size: 1.2rem; color: #fff; }
.hero-points li:before { content: "✓"; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #0a0a0a; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.hero-office { color: #d8d8d8; font-size: 1.05rem; margin-top: 8px; }
.q { font-size: 1.55rem; line-height: 1.3; }
.q-hint { font-size: 1.05rem; color: #3f3f3f; }
.choice { font-size: 1.2rem; padding: 18px 18px; min-height: 64px; }
.choice input { width: 26px; height: 26px; }
label.field { font-size: 1.1rem; }
input:not([type=radio]):not([type=checkbox]), select { font-size: 1.15rem !important; min-height: 56px; }
.consent label { font-size: 1.02rem; line-height: 1.5; }
.consent input[type=checkbox] { width: 26px; height: 26px; }
.note, .disclosure { font-size: 1rem; }
.err { font-size: 1.1rem; }
.progress span { height: 8px; }
/* carrier bar: bigger and bolder */
.carrier-bar { background: #0a0a0a; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); padding: 30px 0; text-align: center; }
.carrier-label { color: var(--gold); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.carrier-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.75rem); color: #fff; }
@media (max-width:760px){ .site-header .wrap{gap:10px} .nav{gap:12px 16px} .nav a{font-size:1rem} }
/* Funnel: summary + preference */
.q-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; font-weight: 700; color: var(--gold-deep); margin-bottom: 6px; }
.f-card .q-eyebrow { color: var(--gold); }
.summary-text { font-size: 1.25rem; line-height: 1.55; background: #faf4e6; border-left: 4px solid var(--gold); border-radius: 8px; padding: 16px 18px; margin: 6px 0 16px; color: var(--fg); }
.summary-next { padding-left: 22px; margin: 0 0 12px; }
.summary-next li { margin-bottom: 8px; font-size: 1.1rem; }
.f-card .summary-text { background: #1d1910; color: #f2f2f2; }
.f-card .summary-next li { color: #ececec; }
.pref { border: 0; padding: 0; margin: 4px 0 14px; }
.pref legend { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.choice.small { min-height: 54px; padding: 12px 16px; margin-bottom: 8px; font-size: 1.1rem; }
.f-card .pref legend { color: #f0f0f0; }
.ty-sum { background: #faf4e6; border-left: 4px solid var(--gold); border-radius: 10px; padding: 16px 20px; margin: 16px 0; font-size: 1.2rem; }
/* Remove double top padding on the hero (section padding + wrap padding) */
.hero { padding-top: 0; padding-bottom: 0; }
.hero .wrap { padding-block: 32px 48px; }
@media (max-width:760px){ .hero .wrap { padding-block: 22px 36px; gap: 26px; } }

/* ===== Ideas adapted from strong insurance funnels ===== */
.step-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.st-title{font-family:var(--display);font-weight:700;font-size:1.2rem}
.st-count{color:var(--muted);font-size:1.02rem;white-space:nowrap}
.f-card .st-title{color:#fff}.f-card .st-count{color:#cfcfcf}.f-count{display:none}
.private{text-align:center;color:var(--muted);font-size:1rem;margin:14px 0 0;border-top:1px solid var(--line);padding-top:12px}
.f-card .private{color:#cfcfcf;border-color:#2c2c2c}
.stats{background:#fff;padding:34px 0;border-bottom:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-grid>div{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--bg)}
.stat-grid span{display:block;color:var(--muted);font-size:1rem}
.stat-grid b{display:block;font-family:var(--display);font-size:2.6rem;line-height:1.1;color:#0a0a0a}
.big-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:26px 0 28px}
.big-steps>div{border-top:2px solid var(--line);padding-top:18px}
.big-steps .num{display:block;font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1;color:var(--gold-deep);margin-bottom:10px}
.big-steps p{color:var(--muted)}
.compare{background:#0a0a0a;color:#f2f2f2;padding:60px 0}
.compare h2{color:#fff;max-width:22ch}.compare .eyebrow{color:var(--gold)}
.compare-lead{color:#d8d8d8;font-size:1.2rem;max-width:44ch}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.compare-grid>div{border-radius:14px;padding:24px 26px}
.compare-grid ul{list-style:none;padding:0;margin:0}
.compare-grid li{position:relative;padding-left:34px;margin-bottom:14px;font-size:1.15rem}
.without{border:1px solid #333;background:#121212}.without h3{color:#fff}
.without li:before{content:"\2715";position:absolute;left:2px;color:#9a9a9a;font-weight:700}
.with{background:linear-gradient(180deg,#e2c06a,#c9a24a);color:#0a0a0a}.with h3{color:#0a0a0a}
.with li:before{content:"\2713";position:absolute;left:0;font-weight:700}
.faq-lead{color:var(--muted);font-size:1.15rem}
.trust-trio{background:var(--bg);padding:44px 0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trio>div{border-left:3px solid var(--gold);padding-left:16px}.trio h3{margin-bottom:4px}.trio p{color:var(--muted);margin:0}
.final-cta{background:#0a0a0a;color:#fff;text-align:center;padding:60px 0;border-top:2px solid var(--gold)}
.final-cta h2{color:#fff;font-size:clamp(2rem,5vw,3rem)}.final-cta p{color:#d8d8d8;font-size:1.2rem;margin:0 auto 22px;max-width:40ch}
.bottom-nav{display:none}
@media (max-width:760px){
 .stat-grid{grid-template-columns:1fr 1fr}.big-steps,.compare-grid,.trio{grid-template-columns:1fr}
 .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);justify-content:space-around;align-items:flex-end;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
 .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#333;font-size:.85rem;font-weight:600}
 .bottom-nav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .bottom-nav .bn-quote{margin-top:-30px}
 .bottom-nav .bn-quote svg{width:60px;height:60px;padding:14px;border-radius:50%;background:linear-gradient(180deg,#d9b45c,#b8902f);color:#0a0a0a;box-shadow:0 0 0 5px #fff,0 6px 16px rgba(0,0,0,.2);box-sizing:border-box}
 body.has-bn{padding-bottom:84px}
}