/* Your Senior Health Benefits Review - landing page design system
   Senior-optimized: nothing here is allowed to be small.
   Body 20px, tap targets 44px+, WCAG AA minimum and AAA on body text. */

:root{
  --navy:#122844; --navy-deep:#0c1c30; --navy-soft:#1d3a5f;
  --cream:#e8e2d3; --cream-lt:#f5f1e8;
  --red:#a02828; --red-dk:#8a2222;
  --ink:#16202b; --ink-soft:#43536a;
  --white:#fff; --line:#d6cfc0;
  --ok:#1f6b45;
  --shadow:0 2px 4px rgba(12,28,48,.06),0 8px 24px rgba(12,28,48,.10);
  --shadow-lg:0 4px 8px rgba(12,28,48,.08),0 16px 48px rgba(12,28,48,.16);
  --r:10px; --r-lg:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:20px}  /* rem base = 20px so every rem size below is senior-scale. Do not change. */
body{
  margin:0;font-family:var(--sans);font-size:1rem;line-height:1.6;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section--tight{padding:40px 0}
.section--cream{background:var(--cream-lt)}
.section--navy{background:var(--navy);color:var(--cream-lt)}
.section--navy h2,.section--navy h3{color:var(--white)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);line-height:1.18;margin:0 0 .5em;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.4vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.1rem,2.1vw,1.32rem);line-height:1.55;color:var(--ink-soft)}
.section--navy .lede{color:#c8d4e4}
.eyebrow{
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin:0 0 .8em
}
.section--navy .eyebrow{color:#f0c9c9}
.center{text-align:center}
.mw-60{max-width:62ch}
.mw-60.center{margin-left:auto;margin-right:auto}

/* ---------- flag accent ---------- */
.flag{display:inline-flex;height:5px;width:52px;border-radius:3px;overflow:hidden;vertical-align:middle}
.flag i{flex:1}
.flag i:nth-child(1){background:#a02828}
.flag i:nth-child(2){background:#f5f1e8}
.flag i:nth-child(3){background:#122844}

/* ---------- header ---------- */
.hdr{background:var(--navy);color:var(--white);position:relative;z-index:20}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;padding:10px 20px;max-width:var(--wrap);margin:0 auto}
.hdr__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.hdr__mark{width:44px;height:44px;flex:none}
.hdr__name{font-family:var(--serif);font-size:1.06rem;line-height:1.2;font-weight:700}
.hdr__name small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#a9bdd6;margin-top:3px}
.hdr__tel{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 20px;
  background:var(--red);color:var(--white);border-radius:var(--r);
  font-size:1.06rem;font-weight:700;text-decoration:none;white-space:nowrap
}
.hdr__tel:hover{background:var(--red-dk)}
.hdr__tel svg{width:19px;height:19px;flex:none}

/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--white);padding:52px 0 60px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-12%;top:-30%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(232,226,211,.09),transparent 62%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr;gap:36px;position:relative;z-index:2}
.hero h1{color:var(--white)}
.hero .lede{color:#cdd9e8}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(232,226,211,.22)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:#c8d4e4;font-weight:600}
.hero__trust svg{width:17px;height:17px;flex:none;color:#8fd1a8}

/* ---------- form card ---------- */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.card__top{background:var(--cream);padding:22px 26px;border-bottom:3px solid var(--red)}
.card__top h2{font-size:1.42rem;margin:0 0 4px}
.card__top p{margin:0;font-size:.98rem;color:var(--ink-soft)}
.card__body{padding:26px}

.field{margin-bottom:19px}
.field:last-of-type{margin-bottom:22px}
label{display:block;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:7px}
label .opt{font-weight:500;color:var(--ink-soft);font-size:.9rem}
input[type=text],input[type=tel],input[type=email],select{
  width:100%;min-height:54px;padding:13px 15px;font-size:1.06rem;font-family:var(--sans);
  color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--r);
  transition:border-color .14s,box-shadow .14s
}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,40,68,.15)}
input::placeholder{color:#9aa6b5}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343536a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* radio pills */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;
  border:2px solid var(--line);border-radius:var(--r);font-size:1rem;font-weight:600;
  color:var(--ink-soft);background:var(--white);cursor:pointer;transition:.14s
}
.pill input:checked+span{border-color:var(--navy);background:var(--navy);color:var(--white)}
.pill input:focus-visible+span{box-shadow:0 0 0 3px rgba(18,40,68,.28)}

/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--cream-lt);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.consent input{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--navy)}
.consent label{font-size:.88rem;font-weight:500;color:var(--ink-soft);line-height:1.5;margin:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:0 30px;width:100%;
  background:var(--red);color:var(--white);border:none;border-radius:var(--r);
  font-family:var(--sans);font-size:1.16rem;font-weight:700;cursor:pointer;
  text-decoration:none;transition:background .14s,transform .08s
}
.btn svg{width:21px;height:21px;flex:none}   /* unconstrained SVGs blew up the hero CTA */
.btn{white-space:nowrap}
.btn:hover{background:var(--red-dk)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn--ghost{background:transparent;color:var(--white);border:2px solid rgba(232,226,211,.5)}
.btn--ghost:hover{background:rgba(232,226,211,.12)}
.btn--navy{background:var(--navy)}
.btn--navy:hover{background:var(--navy-deep)}
.btn--auto{width:auto}
.formnote{font-size:.86rem;color:var(--ink-soft);text-align:center;margin:14px 0 0;line-height:1.5}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:24px;counter-reset:s}
.step{position:relative;padding-left:66px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-4px;width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:var(--white);font-family:var(--serif);font-size:1.35rem;font-weight:700;
  display:flex;align-items:center;justify-content:center
}
.step h3{margin-bottom:.3em}
.step p{margin:0;color:var(--ink-soft);font-size:1.02rem}

/* ---------- checklist ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:1.06rem;line-height:1.5}
.checks svg{width:26px;height:26px;flex:none;margin-top:1px;color:var(--ok)}
.section--navy .checks svg{color:#8fd1a8}

/* ---------- agent ---------- */
.agent{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.agent__photo{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;max-width:330px;margin:0 auto;background:var(--cream);aspect-ratio:4/5;object-fit:cover}
.agent__ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:.9rem;color:var(--ink-soft);border:2px dashed var(--line)}

/* ---------- alt path ---------- */
.alt{background:var(--cream);border-left:5px solid var(--red);border-radius:var(--r);padding:22px 24px}
.alt p{margin:0;font-size:1.06rem}
.alt strong{color:var(--navy)}

/* ---------- footer ---------- */
.ftr{background:var(--navy-deep);color:#a9bdd6;padding:44px 0 36px;font-size:.9rem;line-height:1.65}
.ftr a{color:#cdd9e8}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ftr__brand img,.ftr__brand svg{width:40px;height:40px}
.ftr__name{font-family:var(--serif);color:var(--white);font-size:1.02rem;font-weight:700}
.ftr__disc{border-top:1px solid rgba(169,189,214,.22);margin-top:24px;padding-top:20px;font-size:.83rem;color:#8ba3c0}
.ftr__disc p{margin:0 0 .8em}
.ftr__links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}

/* ---------- sticky mobile CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px 14px;
  background:rgba(18,40,68,.97);backdrop-filter:blur(6px);
  box-shadow:0 -3px 18px rgba(0,0,0,.24)
}
.sticky .btn{min-height:52px;font-size:1.04rem;padding:0 16px}
.sticky .btn--ghost{border-color:rgba(232,226,211,.45)}

/* ---------- success ---------- */
.done{display:none;text-align:center;padding:16px 4px}
.done svg{width:60px;height:60px;color:var(--ok);margin:0 auto 14px}
.done h2{font-size:1.5rem}
.err{display:none;background:#fdecec;border:2px solid #e5a3a3;color:#7d1d1d;border-radius:var(--r);padding:13px 15px;font-size:.96rem;margin-bottom:16px}

/* ---------- responsive ---------- */
@media (min-width:900px){
  .hero{padding:72px 0 80px}
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
  .section{padding:76px 0}
  .steps{grid-template-columns:repeat(3,1fr);gap:34px}
  .agent{grid-template-columns:330px 1fr;gap:44px}
  .checks{grid-template-columns:1fr 1fr;gap:16px 34px}
}
@media (max-width:899px){
  body{padding-bottom:98px}          /* clears the sticky bar (87px) with room */
  .sticky{display:flex}
  .sticky .btn{flex:1;white-space:nowrap}
  .hdr__name small{display:none}
  /* Mobile hero: the h1 was eating the entire first screen at 40px x 5 lines.
     Smaller head + tighter padding puts the form one thumb-flick away, and the
     sticky Start Review button jumps straight to it. */
  .hero{padding:32px 0 40px}
  h1{font-size:clamp(1.68rem,7vw,2.3rem)}
  .hero .lede{font-size:1.02rem}
  .hero__trust{margin-top:20px;padding-top:18px;gap:8px 18px}
  .hero__trust span{font-size:.86rem}
  .section{padding:44px 0}
}
@media (max-width:560px){
  /* Brand name was wrapping to 5 lines and pushing the phone button off screen. */
  .hdr__in{min-height:66px;gap:10px}
  .hdr__mark{width:38px;height:38px}
  .hdr__name{font-size:.8rem;line-height:1.22;max-width:8.2em}
  .hdr__tel{padding:0 13px;font-size:.92rem;min-height:46px;gap:7px}
  .hdr__tel svg{width:17px;height:17px}
  .card__top,.card__body{padding-left:19px;padding-right:19px}
}
@media (max-width:420px){
  .row2{grid-template-columns:1fr}
  .hdr__name{font-size:.75rem;max-width:7.4em}
  .hdr__tel{padding:0 11px;font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════════
   SITE COMPONENTS - added for the full site rebuild (2026-08-29).
   Everything above is the shared landing-page design system.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- site nav ---------- */
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  color:#c8d4e4;text-decoration:none;font-size:.8rem;font-weight:600;
  padding:10px 13px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center
}
.nav a:hover{background:rgba(232,226,211,.12);color:#fff}
.nav a[aria-current=page]{color:#fff;background:rgba(232,226,211,.16)}
.hdr__in--site{flex-wrap:wrap}
.navtoggle{
  display:none;background:none;border:2px solid rgba(232,226,211,.4);color:#fff;
  border-radius:8px;min-height:44px;min-width:44px;cursor:pointer;align-items:center;justify-content:center
}
.navtoggle svg{width:24px;height:24px}

/* ---------- generic page head ---------- */
.phead{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:48px 0 52px}
.phead h1{color:#fff;margin-bottom:.35em}
.phead .lede{color:#cdd9e8;max-width:60ch}

/* ---------- cards grid ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:22px}
.grid--3{grid-template-columns:1fr}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.tile--cream{background:var(--cream-lt)}
.tile h3{margin-bottom:.4em}
.tile p:last-child{margin-bottom:0}
.tile__ico{width:46px;height:46px;border-radius:10px;background:var(--navy);color:var(--cream-lt);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tile__ico svg{width:25px;height:25px}

/* ---------- compare table (workshop vs us) ---------- */
.vs{display:grid;grid-template-columns:1fr;gap:22px}
.vs__col{border-radius:var(--r-lg);padding:26px;border:1px solid var(--line)}
.vs__col--bad{background:#f7f4f1}
.vs__col--good{background:var(--navy);color:var(--cream-lt);border-color:var(--navy)}
.vs__col--good h3{color:#fff}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.vs li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.5}
.vs svg{width:22px;height:22px;flex:none;margin-top:2px}
.vs__col--bad svg{color:#9b3535}
.vs__col--good svg{color:#8fd1a8}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:78ch;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden}
.faq details[open]{border-color:var(--navy);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 54px 19px 21px;position:relative;
  font-weight:700;font-size:1.04rem;color:var(--navy);min-height:44px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:21px;top:50%;width:12px;height:12px;
  border-right:3px solid var(--red);border-bottom:3px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .16s
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq__a{padding:0 21px 20px;color:var(--ink-soft);font-size:1rem}
.faq .faq__a p:last-child{margin-bottom:0}

/* ---------- state list ---------- */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px;list-style:none;margin:0;padding:0}
.states a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:56px;padding:0 17px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;color:var(--navy);font-weight:700;font-size:1rem
}
.states a:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.states a span{color:var(--ink-soft);font-weight:600;font-size:.85rem}

/* ---------- carriers ---------- */
.carriers{display:grid;grid-template-columns:1fr;gap:26px}
.carriers h3{font-size:1.1rem;margin-bottom:.6em;padding-bottom:.5em;border-bottom:2px solid var(--line)}
.carriers ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.carriers li{font-size:1rem;color:var(--ink-soft)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--navy);line-height:1.1}
.section--navy .stat b{color:#fff}
.stat span{font-size:.92rem;color:var(--ink-soft)}
.section--navy .stat span{color:#c8d4e4}

/* ---------- callout ---------- */
.callout{background:var(--cream);border-left:5px solid var(--red);border-radius:var(--r);padding:24px 26px}
.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}

/* ---------- prose (guides / legal) ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.55em}
.prose a{color:var(--red);font-weight:600}

/* ---------- footer nav ---------- */
.ftr__cols{display:grid;grid-template-columns:1fr;gap:26px;margin-bottom:26px}
.ftr__cols h4{color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}
.ftr__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__cols a{text-decoration:none}
.ftr__cols a:hover{text-decoration:underline}

@media (min-width:760px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:1fr 1fr;gap:26px}
  .carriers{grid-template-columns:repeat(3,1fr)}
  .ftr__cols{grid-template-columns:2fr 1fr 1fr}
  .phead{padding:66px 0 70px}
}
@media (max-width:759px){
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:10px}
  .nav.open{display:flex}
  .nav a{font-size:1rem;padding:13px}
  .navtoggle{display:inline-flex}
}