:root{
  --paper:#FFFFFF;
  --surface:#FBFBF9;
  --ink:#16211D;
  --ink-soft:#3F4B45;
  --brand:#1E4B43;
  --brand-line:#2F6657;
  --gold:#A9762F;
  --gold-ink:#5C3F14;
  --line:#E4E7E2;
  --line-strong:#C7CCC5;
  --radius:3px;
  --tint:#F0F3EE;
  --gold-deep:#7A5420;
}
*{box-sizing:border-box;}
body{margin:0;}
.page{
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.7;
}
h1,h2,h3{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  font-weight:400;
  color:var(--ink);
  text-wrap:balance;
  margin:0;
}
h1{font-size:clamp(40px,4.15vw,51px);line-height:1.12;letter-spacing:-0.016em;}
h2{font-size:clamp(30px,4.4vw,50px);line-height:1.08;letter-spacing:-0.018em;}
h3{font-size:21px;line-height:1.35;letter-spacing:-0.006em;}
p{margin:0;}
a{color:var(--brand-line);}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}
.wrap{max-width:1120px;margin:0 auto;padding-left:28px;padding-right:28px;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:11.5px;
  color:var(--brand-line);
  font-weight:700;
}
.topbar{
  background:var(--brand);
  color:var(--paper);
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding-top:10px; padding-bottom:10px;
  font-size:15px;
}
.topbar a{color:var(--paper);text-decoration:none;}
.topbar .sep{opacity:0.55;margin:0 10px;}
nav.mainnav{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
nav.mainnav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px; gap:24px;
}
.wordmark{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);}
.wordmark .crest{height:48px;width:auto;display:block;flex-shrink:0;}
.wordmark .lock{display:flex;flex-direction:column;line-height:1;gap:3px;}
.footer-logo{height:104px;width:auto;display:block;margin-bottom:18px;}
.wordmark .name{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:27px;font-weight:700;letter-spacing:0.01em;color:var(--ink);}
.wordmark .tag{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);}
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{color:var(--ink-soft);text-decoration:none;font-size:16.5px;}
.navlinks a:hover{color:var(--ink);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;
  border-radius:var(--radius);
  font-size:16.5px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
}
.btn-gold{background:var(--gold-deep);color:#FFFFFF;border-color:var(--gold-deep);}
.btn-gold:hover{background:var(--gold-ink);border-color:var(--gold-ink);}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-line:hover{border-color:var(--ink);}

.hero{padding-top:92px;padding-bottom:104px;}
.hero .wrap{display:grid;grid-template-columns:1.14fr 0.86fr;gap:64px;align-items:center;}
.hero h1{margin-top:16px;}
.hero .lede{margin-top:26px;max-width:44ch;color:var(--ink-soft);font-size:20px;line-height:1.65;}
.hero .cta-row{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.microtrust{font-size:16px;color:var(--ink-soft);}
.choice{margin-top:34px;}
.choice-q{font-size:17px;color:var(--ink);margin-bottom:14px;font-weight:600;}
.choice-row{display:flex;gap:14px;flex-wrap:wrap;}
.choice-btn{
  flex:1 1 220px;position:relative;
  display:flex;flex-direction:column;gap:3px;
  padding:20px 46px 20px 22px;
  background:var(--tint);
  border:1.5px solid var(--brand-line);
  border-radius:6px;
  text-decoration:none;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.choice-btn::after{
  content:"";position:absolute;right:22px;top:50%;
  width:9px;height:9px;margin-top:-5px;
  border-right:2px solid var(--brand);border-top:2px solid var(--brand);
  transform:rotate(45deg);
  transition:transform 0.2s ease;
}
.choice-btn:hover{border-color:var(--brand);background:#E4EDE7;transform:translateY(-2px);}
.choice-btn:hover::after{transform:rotate(45deg) translate(2px,-2px);}
.choice-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.choice-main{font-size:17.5px;color:var(--ink);font-weight:600;text-wrap:balance;}
.choice-sub{font-size:16px;color:var(--ink-soft);}
.choice .microtrust{margin-top:14px;display:block;}
@media (prefers-reduced-motion: reduce){.choice-btn{transition:none;}}
.hero-art{display:flex;justify-content:center;}
.photo-wrap{position:relative;width:100%;max-width:none;margin-right:-40px;}
.photo-frame{
  width:100%;aspect-ratio:4/4.4;
  background:var(--surface);
  border:none;
  border-radius:2px;
  overflow:hidden;
}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-label{color:var(--ink-soft);font-size:14px;}

section{padding-top:110px;padding-bottom:110px;border-top:1px solid var(--line);}
/* anchor jumps shouldn't land underneath the sticky bar */
section,header,nav.jump{scroll-margin-top:76px;}
section.tint{
  background:var(--tint);
}
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:26px;padding-bottom:26px;}
.trust-strip .wrap{display:flex;gap:0;}
.trust-strip .item{flex:1;padding:0 24px;border-left:1px solid var(--line);font-size:16.5px;color:var(--ink-soft);}
.trust-strip .item:first-child{border-left:none;padding-left:0;}
.trust-strip strong{color:var(--ink);font-weight:600;}

.two-col{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;}
.photo-tint{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
.photo-tint img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(0.75) contrast(1.02);}
.photo-tint::after{content:"";position:absolute;inset:0;background:var(--brand);mix-blend-mode:multiply;opacity:0.14;}
.section-photo{aspect-ratio:4/3;margin-bottom:24px;}
.guide-box{
  margin-top:40px;
  background:var(--brand);border:none;border-radius:8px;
  padding:36px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  text-decoration:none;cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease;
}
.guide-box:hover{transform:translateY(-3px);background:var(--brand-line);}
.guide-box:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
.guide-box .eyebrow{color:#B8DBCE;}
.guide-box h3{margin-top:6px;color:var(--paper);font-size:24px;}
.guide-box p{margin-top:8px;color:#DDE7E2;max-width:40ch;}
.guide-box .btn{flex-shrink:0;pointer-events:none;}
@keyframes guide-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.02);}}
.guide-box.pulse{animation:guide-pulse 1.6s ease-in-out 1.2s 2;}
@media (prefers-reduced-motion: reduce){.guide-box.pulse{animation:none;}.guide-box{transition:none;}}
.reasons{display:flex;flex-direction:column;gap:26px;margin-top:8px;}
.reasons{display:flex;flex-direction:column;gap:26px;margin-top:8px;}
.reasons .r{padding-top:20px;border-top:1px solid var(--line);}
.reasons .r:first-child{padding-top:0;border-top:none;}
.reasons .r h3{margin-bottom:8px;}
.reasons .r p{color:var(--ink-soft);}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;}
.step{padding:0 32px;border-left:1px solid var(--line);}
.step:first-child{border-left:none;padding-left:0;}
.step .num{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:38px;color:var(--gold);line-height:1;}
.step h3{margin-top:18px;}
.step p{margin-top:10px;color:var(--ink-soft);font-size:16.5px;}

.kicker{text-align:center;text-transform:uppercase;letter-spacing:0.11em;font-size:12.5px;color:var(--brand-line);font-weight:600;margin-bottom:10px;}
.title{text-align:center;font-size:clamp(26px,3.4vw,34px);margin-bottom:44px;}
.stage{
  position:relative;
  max-width:560px;margin:0 auto;
  opacity:0;transform:translateY(14px);
  animation:enter 0.6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes enter{to{opacity:1;transform:translateY(0);}}
.frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);
  height:420px;
}
.track{
  position:absolute;top:0;left:0;height:100%;
  display:flex;
  will-change:transform;
  transition:transform 0.55s cubic-bezier(.2,.7,.3,1);
}
.track.dragging{transition:none;}
.card{
  flex:0 0 auto;height:100%;
  padding:44px 40px;
  display:flex;flex-direction:column;justify-content:center;
  gap:16px;
  user-select:none;
}
.card .eyebrow{text-transform:uppercase;letter-spacing:0.1em;font-size:12px;color:var(--gold-ink);font-weight:600;}
.card h2{font-size:26px;line-height:1.3;}
.card p{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.65;max-width:44ch;}
.hint{font-size:16px;color:var(--gold-ink);font-weight:600;margin-top:6px;}
.glossary{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.flip{perspective:800px;height:66px;cursor:pointer;}
.flip-inner{
  position:relative;width:100%;height:100%;
  transition:transform 0.5s cubic-bezier(.2,.7,.3,1);
  transform-style:preserve-3d;
}
.flip.open .flip-inner{transform:rotateX(180deg);}
.flip-face{
  position:absolute;inset:0;
  border:1px solid var(--line);border-radius:var(--radius);
  display:flex;align-items:center;padding:0 18px;
  backface-visibility:hidden;
  background:var(--paper);
}
.flip-face.back{transform:rotateX(180deg);background:var(--brand);border-color:var(--brand);}
.flip-face .term{font-weight:600;font-size:17px;}
.flip-face .term::after{content:"tap ↓";float:right;font-weight:400;font-size:14px;color:var(--ink-soft);}
.flip-face.back .term{color:#EAF2EE;font-size:16.5px;font-weight:400;line-height:1.35;}
.flip-face.back .term::after{content:"";}
.counter{text-align:center;margin-top:18px;font-size:16px;color:var(--ink-soft);letter-spacing:0.02em;}
.controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:12px;}
.arrow{
  min-height:48px;padding:0 20px;border-radius:24px;
  border:1.5px solid var(--line-strong);background:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;color:var(--ink);font-size:16px;font-family:inherit;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.arrow:hover{border-color:var(--brand-line);background:var(--surface);}
.arrow:disabled{opacity:0.3;cursor:default;}
.arrow:disabled:hover{border-color:var(--line-strong);background:var(--paper);}
.arrow.nudge{border-color:var(--gold);animation:nudge-move 1.3s ease-in-out 0.9s 3;}
@keyframes nudge-move{0%,100%{transform:translateX(0);}50%{transform:translateX(7px);}}
.dots{display:flex;gap:8px;}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--line-strong);
  transition:background 0.3s ease, transform 0.3s ease;
  cursor:pointer;
}
.dot.active{background:var(--gold);transform:scale(1.3);}
.cta-row{text-align:center;margin-top:16px;}

.about-block{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:start;}
.about-block .quote{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-size:22px;line-height:1.55;color:var(--ink);}
.about-block .meta{margin-top:20px;font-size:16px;color:var(--ink-soft);}
.about-block .meta a{color:var(--brand-line);}

.faq-list{margin-top:36px;border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{
  cursor:pointer;list-style:none;
  padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;font-size:17.5px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary .mark{font-size:20px;color:var(--gold-deep);flex-shrink:0;}
.faq-list details[open] summary .mark{transform:rotate(45deg);}
.faq-list .a{color:var(--ink-soft);max-width:66ch;}
.faq-list details > .a:last-of-type{padding-bottom:22px;}
/* stacked paragraphs need air between them, p has no margin by default */
.faq-list .a + .a,
.timing-item p + p,
.promise p + p,
.jstage p + p,
.qz-sub + p{margin-top:14px;}

.closing{
  background:var(--brand);color:var(--paper);border-top:none;
}
.closing .wrap{text-align:left;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.closing h2{color:var(--paper);}
.closing p{color:#DDE7E2;margin-top:10px;max-width:44ch;}

footer{border-top:1px solid var(--line);padding-top:44px;padding-bottom:44px;}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
footer h4{font-size:16px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-soft);margin:0 0 14px;font-weight:600;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
footer a{color:var(--ink-soft);text-decoration:none;font-size:16px;}
footer a:hover{color:var(--ink);}
.legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:16px;line-height:1.75;}
.legal p{margin-bottom:10px;max-width:80ch;}

@media (max-width:880px){
  .hero .wrap,.two-col,.about-block{grid-template-columns:1fr;}
  .hero{padding-top:30px;padding-bottom:32px;}
  .hero .lede{margin-top:16px;font-size:17.5px;line-height:1.55;}
  .hero h1{margin-top:10px;}
  .choice{margin-top:24px;}
  .choice-q{margin-bottom:10px;}
  .choice-row{gap:10px;}
  .choice-btn{padding:16px 42px 16px 18px;}
  .choice .microtrust{margin-top:12px;font-size:18px;line-height:1.65;}
  .hero .wrap{gap:36px;}
  .photo-wrap{max-width:100%;}
  .photo-frame{aspect-ratio:4/3;}
  .steps{grid-template-columns:1fr;gap:28px;}
  .step{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:24px;}
  .step:first-child{border-top:none;padding-top:0;}
  .trust-strip .wrap{flex-direction:column;gap:14px;}
  .trust-strip .item{border-left:none;padding-left:0;}
  footer .cols{grid-template-columns:1fr;gap:28px;}
  .navlinks{display:none;}
  nav.mainnav .wrap{gap:12px;}
  .wordmark{flex-direction:column;align-items:flex-start;gap:1px;}
  .wordmark .name{font-size:22px;line-height:1.1;}
  .wordmark .crest{height:40px;}
  .wordmark .tag{font-size:10.5px;}
  /* 16px is the accessibility floor for a 65+ audience, stated as a
     non-negotiable in OPERATING_POLICY.md §5. This rule sat at 15px and
     applied to every button on every page including the primary phone CTA.
     Found by the Aug 22 2026 funnel beta test, not by a design review.
     `nowrap` is dropped with it: at 16px a long label like the phone CTA
     would otherwise push past 390px instead of wrapping. */
  .btn{padding:12px 16px;font-size:16px;}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:3px;font-size:12.5px;}
  h1{font-size:clamp(30px,8vw,38px);}
  .guide-box{padding:26px 22px;}
  .guide-box h3{font-size:21px;}
  .card{padding:32px 24px;}
  .choice-btn{flex:1 1 100%;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  .stage{animation:none;opacity:1;transform:none;}
  .arrow.nudge{animation:none;}
}

#journey{
  background:var(--brand);
  border-top:none;
}
#journey .eyebrow{color:#9FCFBD;}
#journey h2{color:#FFFFFF;max-width:16ch;}
.journey{
  display:flex;flex-direction:column;gap:0;margin-top:64px;
  position:relative;
}
.journey::before{
  content:"";position:absolute;left:21px;top:14px;bottom:34px;
  width:1px;background:rgba(255,255,255,0.22);
}
.jstage{
  display:grid;grid-template-columns:44px 1fr;gap:30px;
  padding:26px 0;border-top:none;position:relative;
}
.jstage:first-child{padding-top:0;}
.jstage-num{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  background:var(--brand);color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;flex-shrink:0;
  position:relative;z-index:1;
}
.jstage-quote{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:#FFFFFF;
  letter-spacing:-0.014em;
}
.jstage p:not(.jstage-quote){margin-top:12px;color:#C4DCD3;max-width:56ch;font-size:17.5px;}

.section-lede{margin-top:16px;color:var(--ink-soft);max-width:62ch;}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:64px;}
.compare-col{
  background:transparent;border:none;
  padding:0 48px;
  display:flex;flex-direction:column;
}
.compare-col:first-child{padding-left:0;border-right:1px solid var(--line-strong);}
.compare-col:last-child{padding-right:0;}
.compare-col h3{font-size:clamp(26px,2.8vw,36px);margin-bottom:4px;letter-spacing:-0.016em;}
.compare-kind{font-size:11.5px;color:var(--brand-line);font-weight:700;text-transform:uppercase;letter-spacing:0.2em;}
.compare-lede{margin-top:14px;color:var(--ink-soft);font-size:18px;line-height:1.6;}
.compare-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.compare-list li{
  position:relative;padding-left:26px;color:var(--ink);font-size:16.5px;line-height:1.55;
}
.compare-list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--brand-line);
}
.compare-fit{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  color:var(--ink-soft);font-style:italic;
}

.promises{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 64px;margin-top:56px;max-width:900px;}
.promise{padding:0;background:none;border:none;border-top:2px solid var(--gold);padding-top:20px;}
.promise h3{font-size:20px;margin-bottom:8px;}
.promise p{color:var(--ink-soft);font-size:16.5px;}

.timing{display:flex;flex-direction:column;gap:38px;margin-top:64px;max-width:74ch;}
.timing-item{padding-left:28px;border-left:2px solid var(--gold);}
.timing-item h3{font-size:18.5px;margin-bottom:5px;}
.timing-item p{color:var(--ink-soft);}

@media (max-width:880px){
  .compare{grid-template-columns:1fr;gap:44px;}
  .compare-col{padding:0;}
  .compare-col:first-child{border-right:none;border-bottom:1px solid var(--line-strong);padding-bottom:40px;}
  .promises{grid-template-columns:1fr;gap:36px;}
  .photo-wrap{margin-right:0;}
  .photo-frame{aspect-ratio:4/3;}
  section{padding-top:66px;padding-bottom:66px;}
  .jstage{grid-template-columns:40px 1fr;gap:16px;}
  .jstage-num{width:36px;height:36px;font-size:15px;}
  .jstage-quote{font-size:19px;}
}
#journey{position:relative;overflow:hidden;}
#journey .wrap{display:block;position:relative;z-index:1;}
#journey .wrap > div:first-child{max-width:600px;}
.journey-portrait{
  position:absolute;top:0;right:0;bottom:0;
  width:44%;z-index:0;
  overflow:hidden;border-radius:0;
}
.journey-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:62% 28%;display:block;
  filter:saturate(0.5) contrast(1.06) brightness(0.94);
}
/* tone: pull the photo into the brand teal so it stops reading as stock */
.journey-portrait::before{
  content:"";position:absolute;inset:0;
  background:var(--brand);mix-blend-mode:multiply;opacity:0.52;
}
/* dissolve: no hard edges, the image fades into the field on every side */
.journey-portrait::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, #1E4B43 0%, rgba(30,75,67,0.92) 18%, rgba(30,75,67,0.30) 52%, rgba(30,75,67,0.18) 100%),
    linear-gradient(180deg, #1E4B43 0%, rgba(30,75,67,0) 22%, rgba(30,75,67,0) 76%, #1E4B43 100%);
}

.band{
  position:relative;padding:0;border-top:none;
  min-height:clamp(320px,42vw,520px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.band img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(22,33,29,0.32) 0%, rgba(22,33,29,0.52) 100%);
}
.band-line{
  position:relative;z-index:1;text-align:center;
  color:#FFFFFF;padding:0 28px;max-width:20ch;
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:clamp(28px,3.6vw,46px);line-height:1.12;letter-spacing:-0.018em;
}

@media (max-width:880px){
  #journey .wrap > div:first-child{max-width:none;}
  .journey-portrait{
    position:relative;width:auto;margin:44px 0 0;
    aspect-ratio:4/3;
  }
  .journey-portrait img{object-position:62% 24%;}
  .journey-portrait::after{
    background:
      linear-gradient(180deg, #1E4B43 0%, rgba(30,75,67,0) 26%, rgba(30,75,67,0) 72%, #1E4B43 100%);
  }
}

/* Content is visible by default. The fade-in is only ever applied once JS has
   confirmed it can run and can undo it, so a failed observer, a slow phone or
   a script error can never leave a section permanently blank. */
.reveal{opacity:1;transform:none;}
html.has-reveal .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1);
}
html.has-reveal .reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  html.has-reveal .reveal{opacity:1;transform:none;transition:none;}
}
/* No fade-in on phones at all. Blank space while scrolling is confusing,
   and this audience is the least forgiving of it. */
@media (max-width:880px){
  html.has-reveal .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Mobile: jump menu, so nobody has to scroll to find things ---------- */
.jump{display:none;}
@media (max-width:880px){
  .jump{display:block;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0 8px;}
  .jump-q{font-size:16.5px;color:var(--ink-soft);margin-bottom:12px;}
  .jump-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
  .jump-list li{border-bottom:1px solid var(--line);}
  .jump-list a{
    display:flex;align-items:center;gap:12px;
    min-height:60px;padding:8px 30px 8px 0;position:relative;
    color:var(--ink);text-decoration:none;font-size:18px;
  }
  .jump-list a span{flex:1;}
  .jump-list a em{
    font-style:normal;font-size:14.5px;color:var(--ink-soft);
    letter-spacing:0.04em;white-space:nowrap;
  }
  .jump-list a::after{
    content:"";position:absolute;right:6px;top:50%;
    width:8px;height:8px;margin-top:-4px;
    border-right:2px solid var(--brand-line);border-top:2px solid var(--brand-line);
    transform:rotate(45deg);
  }
  .jump-list a:active{background:var(--tint);}
  .jump-note{margin-top:16px;font-size:16px;color:var(--ink-soft);}
}

/* ---------- Mobile: always-there action bar ---------- */
.mobile-bar{display:none;}
@media (max-width:880px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1.4fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.97);
    border-top:1px solid var(--line-strong);
    box-shadow:0 -6px 22px rgba(0,0,0,0.10);
  }
  /* The bar is a safety net for the rest of the page, not part of the
     landing screen. It stays out of the way until the hero choice is
     behind them. */
  .mobile-bar{
    transform:translateY(110%);
    transition:transform 0.28s cubic-bezier(.2,.7,.3,1);
    pointer-events:none;
  }
  .mobile-bar.show{transform:translateY(0);pointer-events:auto;}
  @media (prefers-reduced-motion: reduce){.mobile-bar{transition:none;}}
  .mobile-bar a{
    display:flex;align-items:center;justify-content:center;
    min-height:54px;border-radius:7px;text-decoration:none;
    font-size:17px;font-weight:600;font-family:inherit;
  }
  .mb-call{background:var(--paper);color:var(--ink);border:1.5px solid var(--line-strong);}
  .mb-start{background:var(--gold-deep);color:#FFFFFF;}
  .page{padding-bottom:86px;}
}

/* ---------- The film ---------- */
#film{
  background:var(--brand);border-top:none;
}
.film-head{max-width:60ch;}
#film .eyebrow{color:#9FCFBD;}
#film h2{color:#FFFFFF;}
.film-lede{margin-top:16px;color:#C4DCD3;font-size:18.5px;line-height:1.65;max-width:52ch;}
.film-frame{
  margin-top:44px;border-radius:8px;overflow:hidden;
  background:#0E1F1B;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.film-frame video{display:block;width:100%;height:auto;}
.film-note{margin-top:18px;font-size:16px;color:#9FCFBD;}

/* ---------- Sticky header + persistent phone ---------- */
.topbar{position:sticky;top:0;z-index:40;}
.topbar .phone{
  font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;
  min-height:44px;
}
.topbar .phone-num{white-space:nowrap;}
.topbar .phone-label,.topbar .phone-hours{font-weight:400;}
.topbar .phone:hover{text-decoration:underline;}

/* ---------- Front door: three questions ---------- */
#start{border-top:none;}
.qz{max-width:720px;margin:0 auto;}
.qz-head{text-align:center;margin-bottom:34px;}
.qz-head h2{font-size:clamp(28px,3.6vw,42px);}
.qz-head p{margin-top:14px;color:var(--ink-soft);font-size:18px;max-width:50ch;margin-left:auto;margin-right:auto;}
.qz-shell{
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:42px 44px 36px;
}
.qz-prog{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.qz-bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;}
.qz-bar span{display:block;height:100%;width:33.33%;background:var(--brand-line);transition:width 0.4s cubic-bezier(.2,.7,.3,1);}
.qz-count{font-size:15.5px;color:var(--ink-soft);white-space:nowrap;}
.qz-step{display:none;}
.qz-step.active{display:block;animation:qz-in 0.4s cubic-bezier(.2,.7,.3,1);}
@keyframes qz-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.qz-q{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size:clamp(24px,3vw,33px);line-height:1.2;letter-spacing:-0.014em;color:var(--ink);
}
.qz-sub{margin-top:12px;color:var(--ink-soft);font-size:17px;max-width:52ch;}
.qz-opts{display:flex;flex-direction:column;gap:12px;margin-top:28px;}
.qz-opt{
  min-height:66px;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  text-align:left;padding:14px 22px;
  border:1.5px solid var(--line-strong);border-radius:6px;
  background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:18.5px;cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.qz-opt:hover{border-color:var(--brand);background:var(--tint);transform:translateY(-2px);}
.qz-opt .qz-opt-sub{font-size:16px;color:var(--ink-soft);}
.qz-zip-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;align-items:flex-start;}
.qz-zip{
  min-height:66px;width:190px;
  padding:0 20px;font-family:inherit;font-size:24px;letter-spacing:0.16em;
  border:1.5px solid var(--line-strong);border-radius:6px;background:var(--paper);color:var(--ink);
}
.qz-zip:focus{border-color:var(--brand);outline:2px solid var(--gold);outline-offset:2px;}
.qz-go{min-height:66px;padding:0 30px;font-size:18px;}
.qz-err{margin-top:12px;color:#8A2F2F;font-size:16.5px;display:none;}
.qz-err.show{display:block;}
.qz-back{
  margin-top:24px;background:none;border:none;padding:6px 0;
  font-family:inherit;font-size:16.5px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;
}
.qz-back:hover{color:var(--ink);}
.qz-note{margin-top:22px;font-size:16px;color:var(--ink-soft);}

/* result */
.qz-result .qz-eyebrow{
  text-transform:uppercase;letter-spacing:0.18em;font-size:12.5px;
  color:var(--brand-line);font-weight:700;
}
.qz-result h3{font-size:clamp(23px,2.6vw,29px);margin-top:10px;}
.qz-points{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.qz-points li{position:relative;padding-left:28px;font-size:17.5px;line-height:1.6;color:var(--ink);}
.qz-points li::before{
  content:"";position:absolute;left:0;top:10px;
  width:9px;height:9px;border-radius:50%;background:var(--gold-deep);
}
/* what you'll need, sits before the enrollment doors so nobody starts the
   wizard unprepared. Procedural only, zero plan or benefit content. */
.qz-prep{
  margin-top:34px;padding:22px 24px 20px;
  background:var(--surface);border-left:3px solid var(--gold-deep);
}
.qz-prep-head{
  font-size:17.5px;line-height:1.45;font-weight:600;color:var(--ink);margin:0 0 14px;
}
.qz-prep-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.qz-prep-list li{
  position:relative;padding-left:26px;font-size:16.5px;line-height:1.55;color:var(--ink);
}
.qz-prep-list li::before{
  content:"";position:absolute;left:2px;top:7px;
  width:8px;height:8px;border:2px solid var(--line-strong);border-radius:2px;
}
.qz-prep-note{
  margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--ink-soft);
}
@media (max-width:880px){
  .qz-prep{margin-top:26px;padding:18px 18px 16px;}
  .qz-prep-head{font-size:17px;}
  .qz-prep-list li{font-size:16px;}
}

.qz-doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;}
.qz-door{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 24px;border-radius:8px;text-decoration:none;
  min-height:104px;justify-content:center;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.qz-door:hover{transform:translateY(-3px);}
/* A tel: card on desktop is not clickable (see script.js), so it must not
   pretend to be. No lift, no pointer cursor, no false affordance. */
.tel-static{cursor:default;}
.qz-door.tel-static:hover{transform:none;}
.qz-door-main{font-size:19px;font-weight:600;}
.qz-door-sub{font-size:16px;line-height:1.5;}
.qz-door.primary{background:var(--brand);border:1px solid var(--brand);}
.qz-door.primary .qz-door-main{color:#FFFFFF;}
.qz-door.primary .qz-door-sub{color:#DDE7E2;}
.qz-door.primary:hover{background:var(--brand-line);}
.qz-door.secondary{background:var(--paper);border:1.5px solid var(--line-strong);}
.qz-door.secondary .qz-door-main{color:var(--ink);}
.qz-door.secondary .qz-door-sub{color:var(--ink-soft);}
.qz-door.secondary:hover{border-color:var(--brand);background:var(--tint);}

/* not-ready capture, and the "text me the link" capture below (same base rules) */
.qz-later,.qz-linktext{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.qz-later p,.qz-linktext p{font-size:16.5px;color:var(--ink-soft);max-width:56ch;}
.qz-later-row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.qz-email{
  min-height:56px;flex:1 1 260px;padding:0 18px;
  font-family:inherit;font-size:17px;
  border:1.5px solid var(--line-strong);border-radius:6px;background:var(--paper);color:var(--ink);
}
.qz-email:focus{border-color:var(--brand);outline:2px solid var(--gold);outline-offset:2px;}
.qz-later .btn,.qz-linktext .btn{min-height:56px;}
.qz-later-done{display:none;margin-top:14px;font-size:16.5px;color:var(--brand-line);font-weight:600;}
.qz-later-done.show{display:block;}
/* Failure must not read as success. Distinct colour, measured at 7.31:1 on
   white, well above the 4.5:1 floor, and it keeps a visible underline on the
   phone link so the fallback is obvious rather than decorative. */
#qz-link-fail,#qz-later-fail{color:#9A3412;}
#qz-link-fail a,#qz-later-fail a{color:#9A3412;text-decoration:underline;}

/* inline next-steps under education blocks */
.next-step{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.next-step p{font-size:17.5px;color:var(--ink-soft);}
.next-step a{color:var(--brand-line);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--brand-line);padding-bottom:2px;}
.next-step a:hover{color:var(--ink);border-color:var(--ink);}
#journey .next-step{border-color:rgba(255,255,255,0.25);}
#journey .next-step p{color:#C4DCD3;}
#journey .next-step a{color:#FFFFFF;border-color:rgba(255,255,255,0.6);}

/* human-path closing */
.closing .closing-doors{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.closing .btn-ghost{
  background:transparent;color:#FFFFFF;border:1.5px solid rgba(255,255,255,0.55);
}
.closing .btn-ghost:hover{border-color:#FFFFFF;background:rgba(255,255,255,0.08);}

@media (max-width:880px){
  .qz-shell{padding:28px 22px 26px;}
  .qz-back{min-height:44px;display:inline-flex;align-items:center;}
  .qz-doors{grid-template-columns:1fr;}
  .qz-zip{width:100%;}
  .qz-go{width:100%;}

  /* topbar: one compact row, phone always visible, nothing forcing width */
  .topbar .wrap{
    flex-direction:row !important;align-items:center !important;
    justify-content:space-between;gap:10px;
    padding-top:6px;padding-bottom:6px;font-size:13px;
  }
  .topbar-trust{font-size:13.5px;line-height:1.25;white-space:nowrap;}
  .topbar-extra{display:none;}
  .topbar .phone{min-height:44px;font-size:16px;gap:0;flex-wrap:nowrap;}
  .topbar .phone-label,.topbar .phone-hours{display:none;}

  /* One decision at a time. The nav button, the hero cards and the fixed bar
     were three competing calls to action inside the first screen. The hero
     cards are the real entry point, so the nav button goes. */
  nav.mainnav .btn{display:none;}
  .lede-long{display:none;}
  /* four trust claims stacked is a wall of text right after the choice */
  .trust-strip .item:nth-child(2),.trust-strip .item:nth-child(4){display:none;}

  /* film */
  .film-frame{margin-top:30px;border-radius:6px;}
  .film-lede{font-size:17px;}

  /* basics deck: no sideways swiping on a page that scrolls down.
     Stack the cards and let people keep scrolling. */
  .stage{max-width:none;}
  .frame{height:auto !important;overflow:visible;border:none;background:transparent;}
  .track{position:static;flex-direction:column;gap:14px;transform:none !important;transition:none;}
  .card{
    width:100% !important;height:auto !important;
    background:var(--paper);border:1px solid var(--line);border-radius:8px;
    padding:22px 20px;gap:9px;
  }
  .card h2{font-size:23px;}
  .card p{font-size:16.5px;}
  /* card 1 was carousel scaffolding, and it tells people to tap an arrow
     that no longer exists once the deck is stacked */
  .track .card:first-child{display:none;}
  .counter,.controls,.hint{display:none;}
  .flip{height:74px;}


  /* ---- One reading size, everywhere ----
     The page had five different body sizes (16.5 / 17 / 17.5 / 18 / 22).
     The eye re-adjusts at every section, which is what makes a long page
     feel tiring. One size, one line-height, one rhythm. 18px is the floor
     for this audience, not the ceiling. */
  .page{font-size:18px;}
  #journey .jstage p:not(.jstage-quote),
  .card p,
  .compare-lede,
  .compare-list li,
  .compare-fit,
  .timing-item p,
  .promise p,
  .faq-list .a,
  .film-lede,
  .hero .lede,
  .qz-sub,
  .qz-points li,
  .jump-note,
  .reasons .r p,
  .trust-strip .item{
    font-size:18px;
    line-height:1.65;
  }
  /* section headings: two levels only, nothing in between */
  section h2,.qz-head h2{font-size:29px;line-height:1.15;}
  .card h2,.title{font-size:24px;line-height:1.2;}
  .timing-item h3,.promise h3,.compare-col h3{font-size:21px;line-height:1.25;}
  /* labels read as labels, consistently */
  .eyebrow,.kicker,.compare-kind,.qz-eyebrow{font-size:12.5px;letter-spacing:0.16em;}
  .jump-q{font-size:18px;}
  /* last stragglers onto the same size */
  .microtrust,.film-note,.about-block .meta,.next-step p{font-size:18px;line-height:1.65;}

  /* ---- One spacing rhythm ----
     Gaps between a heading and its content were running 14, 16, 28, 32, 84,
     90 and 101px depending on the section. Same job, seven different gaps.
     Two values now: 22px from a heading to its own text, 34px from a
     heading to a block of content. */
  .wrap{padding-left:20px;padding-right:20px;}
  section h2 + p,
  .qz-head h2 + p,
  #film h2 + p,
  .section-lede{margin-top:22px;}
  .section-lede + .section-lede{margin-top:14px;}
  .journey,.compare,.timing,.promises,.faq-list,.film-frame,.jump-list,.qz{margin-top:34px;}
  .section-lede + .compare{margin-top:34px;}
  .qz-head{margin-bottom:26px;}
  .timing{gap:28px;}
  .promises{gap:28px;}

  /* trim the scroll: this page is long on a phone */
  section{padding-top:46px;padding-bottom:46px;}
  #film{padding-top:42px;padding-bottom:42px;}
  /* the footer was running to a screen and a half on a phone */
  footer{padding-top:28px;padding-bottom:24px;}
  footer .cols{gap:20px;}
  .footer-logo{height:64px;margin-bottom:10px;}
  footer h4{margin-bottom:6px;}
  .legal{margin-top:20px;font-size:16px;line-height:1.6;}
  .legal p{margin-bottom:8px;}
  .jstage{padding:18px 0;}
  .compare{gap:32px;}
  .compare-col:first-child{padding-bottom:30px;}
  .title{margin-bottom:24px;}
  .trust-strip{padding-top:20px;padding-bottom:20px;}
  .trust-strip .wrap{gap:10px;}
  .band{min-height:240px;}
  .about-block{gap:28px;}
  .about-block .quote{margin-top:22px;}
  .next-step{margin-top:34px;padding-top:18px;}

  /* inline links need a real tap area, not a 19px line of text */
  .next-step{gap:10px;}
  .next-step a{display:inline-flex;align-items:center;min-height:44px;}
  footer ul{gap:2px;}
  footer ul a{display:inline-flex;align-items:center;min-height:44px;}
  .about-block .meta a{display:inline-flex;align-items:center;min-height:44px;}
}

/* ================= Multi-page navigation ================= */
.sitenav{border-bottom:1px solid var(--line);background:var(--paper);}
.sitenav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px;}
.navlinks-full{display:flex;align-items:center;gap:26px;}
.navlinks-full a{
  color:var(--ink-soft);text-decoration:none;font-size:16.5px;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.navlinks-full a:hover{color:var(--ink);}
.navlinks-full a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold-deep);font-weight:600;}
.menu-btn{display:none;}

/* where you are, and where you're going next */
.crumb{background:var(--surface);border-bottom:1px solid var(--line);}
.crumb .wrap{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px;font-size:16px;color:var(--ink-soft);}
.crumb a{color:var(--brand-line);text-decoration:none;}
.crumb .sep{opacity:0.5;}
.crumb .here{color:var(--ink);font-weight:600;}

.pagenext{border-top:1px solid var(--line);}
.pagenext .wrap{padding-top:34px;padding-bottom:34px;}
.pagenext-label{font-size:16px;color:var(--ink-soft);margin-bottom:12px;}
.pagenext-card{
  display:flex;align-items:center;gap:16px;
  padding:22px 24px;border:1.5px solid var(--brand-line);border-radius:8px;
  background:var(--tint);text-decoration:none;
  transition:transform .2s ease,background .2s ease;
}
.pagenext-card:hover{transform:translateY(-2px);background:#E4EDE7;}
.pagenext-card .t{flex:1;}
.pagenext-card b{display:block;font-size:19px;color:var(--ink);}
.pagenext-card em{display:block;font-style:normal;font-size:16.5px;color:var(--ink-soft);margin-top:3px;}
.pagenext-card .arrow-i{
  width:11px;height:11px;flex-shrink:0;
  border-right:2.5px solid var(--brand);border-top:2.5px solid var(--brand);transform:rotate(45deg);
}

@media (max-width:880px){
  .navlinks-full{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line-strong);
    box-shadow:0 14px 30px rgba(0,0,0,0.12);
  }
  .sitenav{position:relative;}
  .sitenav.open .navlinks-full{display:flex;}
  .navlinks-full a{
    padding:0 20px;min-height:58px;display:flex;align-items:center;
    font-size:18px;border-bottom:1px solid var(--line);border-left:4px solid transparent;
  }
  .navlinks-full a[aria-current="page"]{border-bottom-color:var(--line);border-left-color:var(--gold-deep);background:var(--surface);}
  .menu-btn{
    display:inline-flex;align-items:center;gap:9px;
    min-height:46px;padding:0 16px;border-radius:6px;
    border:1.5px solid var(--line-strong);background:var(--paper);
    font-family:inherit;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer;
  }
  .menu-btn .bars{display:block;width:17px;height:2px;background:var(--ink);position:relative;}
  .menu-btn .bars::before,.menu-btn .bars::after{
    content:"";position:absolute;left:0;width:17px;height:2px;background:var(--ink);
  }
  .menu-btn .bars::before{top:-5px;} .menu-btn .bars::after{top:5px;}
  .sitenav.open .menu-btn{border-color:var(--brand);}
  .crumb .wrap{font-size:16px;padding-top:10px;padding-bottom:10px;}
  .pagenext .wrap{padding-top:28px;padding-bottom:28px;}
}

/* ---------- Directory list (used on Home at every width) ---------- */
.jump-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.jump-list li{border-bottom:1px solid var(--line);}
.jump-list a{
  display:flex;align-items:center;gap:14px;
  min-height:64px;padding:10px 32px 10px 0;position:relative;
  color:var(--ink);text-decoration:none;font-size:18.5px;
}
.jump-list a span{flex:1;font-weight:600;}
.jump-list a em{font-style:normal;font-size:16.5px;color:var(--ink-soft);text-align:right;}
.jump-list a::after{
  content:"";position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-5px;
  border-right:2px solid var(--brand-line);border-top:2px solid var(--brand-line);
  transform:rotate(45deg);
}
.jump-list a:hover{color:var(--brand);}
.jump-list a:hover::after{border-color:var(--brand);}
@media (max-width:880px){
  .jump-list a{font-size:18px;padding-right:30px;}
  .jump-list a em{display:none;}
}

/* ---------- Language assistance page ---------- */
.lang-lede{max-width:62ch;font-size:19.5px;margin-top:18px;}
.lang-h{
  font-size:21px;
  margin:0 0 10px;
  color:var(--brand);
  letter-spacing:-0.01em;
}
.lang-h + p{margin-top:0;}
section .lang-h:not(:first-child){margin-top:44px;}
.langlist{
  list-style:none;
  margin:30px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.langlist li{
  background:var(--paper);
  padding:20px 22px;
}
.langlist b{
  display:block;
  font-size:15px;
  color:var(--brand);
  margin-bottom:6px;
}
.langlist span{
  display:block;
  font-size:16px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:74ch;
}
.langlist li[dir="rtl"] span,
.langlist li[dir="rtl"] b{direction:rtl;text-align:right;}
.lang-note{
  margin-top:30px;
  font-size:15px;
  color:var(--ink-soft);
  max-width:70ch;
}
@media (min-width:900px){
  .langlist{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .lang-lede{font-size:18px;}
  .langlist li{padding:17px 18px;}
}

/* ---------- California licensing disclosure (Cal. Ins. Code internet advertising) ---------- */
.legal .license{
  color:var(--ink-soft);
  font-weight:600;
  border-left:2px solid var(--line-strong);
  padding-left:14px;
  margin-bottom:16px;
}


/* ---------- Compliance: agent title, consent checkbox, PTC (Kevin Shields review) ---------- */
/* 16px floor for a 65+ audience, OPERATING_POLICY.md §5. This sits directly
   under the phone number, which is the primary conversion, so it was the most
   important of the sub-16px findings in the Aug 30 2026 QA. */
.foot-sub{display:block;font-size:16px;color:var(--ink-soft);margin-top:2px;}

.qz-zip-note{
  margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--ink-soft);max-width:52ch;
}

.qz-verify{
  display:flex;gap:12px;align-items:flex-start;
  margin:18px 0 0;padding:14px 16px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  cursor:pointer;max-width:64ch;
}
.qz-verify input[type="checkbox"]{
  flex:0 0 auto;width:26px;height:26px;margin:0;cursor:pointer;
  accent-color:var(--brand);
}
.qz-verify span{font-size:16px;line-height:1.5;color:var(--ink);}

.qz-ptc{
  margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:64ch;
}

/* Both capture buttons start disabled until the verify box is ticked. The
   disabled state has to LOOK disabled: a full-opacity button with a pointer
   cursor that silently does nothing is how a 65+ visitor loses a lead
   without knowing why. Found in QA Aug 30 2026 on #qz-link-go, which had
   been left out of this rule. */
#qz-email-go[disabled],#qz-link-go[disabled]{opacity:0.45;cursor:not-allowed;}

/* Shown only while the button is disabled, so the dead tap explains itself. */
.qz-gate-hint{margin:10px 0 0;font-size:16px;color:var(--gold-ink);font-weight:600;}
.qz-gate-hint[hidden]{display:none;}

@media (max-width:880px){
  /* Specificity note: .mobile-bar a is (0,1,1) and beats a bare .mb-call (0,1,0)
     regardless of source order, so this selector has to carry the parent class. */
  .mobile-bar .mb-call{
    font-size:16px;line-height:1.15;text-align:center;font-weight:600;
    padding:6px 4px;
  }
  /* 65+ audience: the visible box gets a comfortable target, and the whole
     label row is tappable as well since the input is wrapped by the label. */
  .qz-verify{padding:16px;}
  .qz-verify input[type="checkbox"]{width:26px;height:26px;}
}

/* Consent order: field, then verification, then PTC, then the submit button.
   The button stays disabled until the box is ticked, so it must appear after it.
   Same order applies to .qz-linktext (name, mobile, verify, PTC, button). */
.qz-later > .qz-email,.qz-linktext > .qz-email{display:block;width:100%;max-width:420px;}
.qz-later .qz-later-row,.qz-linktext .qz-later-row{margin-top:18px;}

/* City-guide link lists (county hub + the four city pages). Block-level with
   real padding so each link clears the 45px touch-target floor for 65+ users;
   the inline list they replaced measured 21px tall. Named `citylinks` after
   confirming zero other uses in this file, per the class-collision trap. */
.citylinks{list-style:none;max-width:60ch;margin-top:16px;}
.citylinks li{border-bottom:1px solid var(--line);}
.citylinks li:last-child{border-bottom:none;}
.citylinks a{display:block;min-height:46px;padding:13px 0;font-size:18px;color:var(--brand-line);text-decoration:none;}
.citylinks a:hover{color:var(--ink);}

/* The Medicare card promoted out of the "have these ready" list, Aug 22 2026.
   HealthSherpa's eligibility lookup takes the MBI off that card and returns Part A
   and Part B effective dates, the current plan, and up to ten prior enrollments
   (their own documentation, verified). Those dates price a Medicare Supplement and
   are captured nowhere else in the funnel, so the card is the single highest-value
   thing a caller can have to hand. It was previously the second of six bullets.
   ⛔ We never collect the number itself through this site. It goes to the agent on
   the call and into HealthSherpa, not into our CRM. */
.qz-prep-lead{font-size:18px;line-height:1.6;color:var(--ink);max-width:60ch;margin-top:10px;}
.qz-prep-lead strong{color:var(--brand-line);}

/* Demoted "not ready yet" capture. Kept, but it must never compete with the
   primary advisor door above it (Dave, Aug 27 2026). Disclosure closed by
   default; the summary is the only thing that renders until opened. */
.qz-quiet{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.qz-quiet > summary{
  cursor:pointer;list-style:none;
  font-size:16.5px;color:var(--ink-soft);font-weight:500;
  min-height:48px;display:flex;align-items:center;
}
.qz-quiet > summary::-webkit-details-marker{display:none;}
.qz-quiet > summary::after{content:" +";font-weight:600;margin-left:6px;}
.qz-quiet[open] > summary::after{content:" \2212";}
.qz-quiet > summary:hover{color:var(--ink);}
.qz-quiet .qz-linktext{margin-top:0;padding-top:14px;border-top:0;}

/* ============================================================================
   TWO PRIMARY PATHS. Added Sept 1 2026 on Wolf's instruction: a first-time
   visitor over 65 must be able to answer one question in a few seconds, "do I
   want to shop myself, or do I want help?", and act on the answer.

   Deliberate choices, so they are not undone as "cosmetic":
   - The two cards are the SAME SIZE. Both actions have to be obvious.
   - The agent card carries the solid brand fill and sits first. Advisor
     assisted is the bet (decision WD-005), so it wins the visual rank while
     self-serve stays a real, equally reachable door rather than a footnote.
   - Contrast measured, never eyeballed, per OPERATING_POLICY.md §5:
     #FFFFFF on #1E4B43 = 9.80:1 · #D8E6DF on #1E4B43 = 7.61:1 ·
     #16211D on #F0F3EE = 14.78:1 · #3F4B45 on #F0F3EE = 8.14:1.
   - Tap targets are 84px tall on mobile, well over the 45px floor, because a
     card is easier to hit than a button for an unsteady hand.
   ========================================================================== */
.paths{
  margin-top:32px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.path{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  min-height:118px;padding:24px 46px 24px 26px;
  border-radius:8px;text-decoration:none;position:relative;
  border:1.5px solid transparent;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.path::after{
  content:"";position:absolute;right:24px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform 0.2s ease;
}
.path:hover{transform:translateY(-2px);}
.path:hover::after{transform:rotate(45deg) translate(2px,-2px);}
.path:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){.path{transition:none;}}

.path-agent{background:var(--brand);color:#FFFFFF;border-color:var(--brand);}
.path-agent:hover{background:#183C36;}
.path-agent .path-main{color:#FFFFFF;}
.path-agent .path-sub{color:#D8E6DF;}

.path-shop{background:var(--tint);color:var(--brand);border-color:var(--brand-line);}
.path-shop:hover{background:#E4EDE7;border-color:var(--brand);}
.path-shop .path-main{color:var(--ink);}
.path-shop .path-sub{color:var(--ink-soft);}

.path-main{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-0.008em;text-wrap:balance;}
.path-sub{font-size:16.5px;line-height:1.45;}

/* The 2-question guide, kept exactly as built and deliberately demoted to a
   third option for the people who cannot answer the first question. */
.path-note{margin-top:18px;font-size:17.5px;color:var(--ink-soft);}
.path-note a{color:var(--brand-line);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* Turning 65 / already on Medicare. Kept, secondary, in its own quiet strip
   below the trust row rather than competing with the two paths above it. */
.segstrip{background:var(--surface);border-bottom:1px solid var(--line);}
.segstrip .wrap{padding-top:34px;padding-bottom:34px;}
.seg-q{font-size:17.5px;font-weight:600;color:var(--ink);margin-bottom:14px;}

/* Next step under the film. Same two paths, same order, third option quiet. */
.film-next{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.btn-lg{padding:16px 28px;font-size:18px;min-height:56px;}
.btn-brand{background:var(--brand);color:#FFFFFF;border-color:var(--brand);}
.btn-brand:hover{background:#183C36;border-color:#183C36;}
.film-next-quiet{font-size:17px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;}
.film-next-quiet:hover{color:var(--ink);}

/* Nav: the two paths as actions, sitting apart from the reading links so the
   nav is not nine equal-weight choices. */
.nav-act{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:6px;
  font-size:16.5px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.nav-actions .nav-agent{background:var(--brand);color:#FFFFFF;border:1.5px solid var(--brand);}
.nav-actions .nav-agent:hover{background:#183C36;color:#FFFFFF;}
.nav-actions .nav-shop{background:var(--paper);color:var(--brand);border:1.5px solid var(--brand-line);}
.nav-actions .nav-shop:hover{color:var(--brand);border-color:var(--brand);}
.nav-actions .nav-act[aria-current="page"]{border-bottom-color:transparent;}

/* ---------- Shop and Help pages ---------- */
.stack{display:flex;flex-direction:column;gap:18px;margin-top:34px;}
.door{
  display:block;padding:26px 46px 26px 26px;position:relative;
  border-radius:8px;text-decoration:none;border:1.5px solid var(--line-strong);
  background:var(--paper);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.door:hover{transform:translateY(-2px);border-color:var(--brand);}
.door:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){.door{transition:none;}}
.door::after{
  content:"";position:absolute;right:24px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;
  transform:rotate(45deg);
}
.door-lead{background:var(--brand);border-color:var(--brand);color:#FFFFFF;}
.door-lead:hover{background:#183C36;border-color:#183C36;}
.door-lead .door-main{color:#FFFFFF;}
.door-lead .door-sub{color:#D8E6DF;}
/* Sept 4 2026. .door-reassure inherits --ink-soft, which measured 1.08:1 on the
   dark .door-lead background, i.e. invisible. Same override the sub already
   carries. Caught by measuring, never visible to the eye as a problem. */
.door-lead .door-reassure{color:#D8E6DF;}
.door-main{display:block;font-size:21px;font-weight:700;color:var(--ink);line-height:1.28;text-wrap:balance;}
.door-sub{display:block;font-size:17px;color:var(--ink-soft);margin-top:7px;line-height:1.55;max-width:56ch;}

/* Handoff door, added Sept 4 2026. Two lines only, both reusing existing
   tokens so nothing about the door design changes. .door-cta is the action
   line, styled the same as the established .door-off .door-act pattern.
   .door-reassure is the leaving-the-site note and sits at 16.5px, above the
   16px floor for 65+ readers. */
.door-cta{
  display:block;margin-top:16px;
  font-size:17.5px;font-weight:600;color:var(--brand-line);
  text-decoration:underline;text-underline-offset:4px;
}
.door-reassure{display:block;margin-top:12px;font-size:16.5px;color:var(--ink-soft);line-height:1.5;max-width:56ch;}

/* A product row with no online door yet. NOT a link, so nothing is promised
   that the site cannot deliver. Same rule as the capture forms. */
.door-off{
  padding:26px;border-radius:8px;border:1.5px dashed var(--line-strong);
  background:var(--surface);
}
.door-off .door-main{color:var(--ink);}
.door-off .door-sub{margin-bottom:0;}
.door-off .door-act{
  display:inline-flex;align-items:center;min-height:52px;margin-top:16px;
  font-size:17.5px;font-weight:600;color:var(--brand-line);
  text-decoration:underline;text-underline-offset:4px;
}
.door-off .door-act:hover{color:var(--brand);}

.plain-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.plain-list li{font-size:18px;line-height:1.6;color:var(--ink-soft);padding-left:26px;position:relative;}
.plain-list li::before{
  content:"";position:absolute;left:0;top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--gold-deep);
}

/* ---------- Larger, calmer mobile. Sept 1 2026. -----------------------------
   Older-visitor pass: the floors in OPERATING_POLICY.md §5 are a minimum, and
   the pages were sitting on the minimum in several places. This lifts body and
   control type on small screens and puts every control over 52px.
   -------------------------------------------------------------------------- */
@media (max-width:880px){
  .paths{grid-template-columns:1fr;gap:14px;margin-top:26px;}
  .path{min-height:96px;padding:22px 42px 22px 22px;}
  .path-main{font-size:20px;}
  .path-sub{font-size:17px;}
  .path-note{font-size:18px;}
  .hero .lede{font-size:19px;line-height:1.6;}
  .segstrip .wrap{padding-top:26px;padding-bottom:26px;}
  .film-next{gap:12px;}
  .film-next .btn{width:100%;}
  .btn-lg{min-height:58px;font-size:18px;}
  .btn{min-height:52px;}
  .film-next-quiet{font-size:18px;min-height:48px;display:inline-flex;align-items:center;}
  .door{padding:22px 40px 22px 20px;}
  .door-main{font-size:20px;}
  .door-sub{font-size:17px;}
  .door-off{padding:22px 20px;}
  .plain-list li{font-size:18px;}
  /* Actions hoisted to the top of the open menu, above the reading links. */
  .navlinks-full .nav-act{order:-1;margin:12px 16px 0;min-height:56px;font-size:18px;border-radius:7px;}
  .nav-actions .nav-agent{order:-2;}
  .mobile-bar a{min-height:58px;font-size:17.5px;}
}

/* The buttons live in `.nav-actions` now, not in the link row, so nothing more
   specific competes with `.nav-act`. Target sizes: 48px, over the 45px floor. */
.nav-actions .nav-act{min-height:48px;}

/* Section lede on the two new path pages. `.lede` alone is scoped to `.hero`,
   so it needed its own class rather than a copy of a hero-only rule. */
.lede-block{margin-top:22px;max-width:58ch;color:var(--ink-soft);font-size:20px;line-height:1.65;}
@media (max-width:880px){.lede-block{font-size:18.5px;line-height:1.6;}}

/* Heading and phone line around the two result doors on start.html. */
.qz-doors-head{margin-top:34px;font-size:18px;font-weight:600;color:var(--ink);}
.qz-doors-note{margin-top:18px;font-size:17.5px;color:var(--ink-soft);}
.qz-doors-note a{color:var(--brand-line);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
@media (max-width:880px){
  .qz-doors-head{font-size:18.5px;}
  .qz-doors-note{font-size:18px;}
}

/* Older-visitor readability, mobile top bar. Sept 1 2026.
   The trust line sat at 13.5px and the phone tap target at 44px, both under the
   floors in OPERATING_POLICY.md §5 (15px fine print, 45px targets). This lifts
   them. Measured after the change at 390px: no horizontal overflow. */
@media (max-width:880px){
  .topbar .wrap{font-size:15px;}
  .topbar-trust{font-size:15px;}
  .topbar .phone{min-height:48px;font-size:17px;}
}

/* ============================================================================
   NAV, RESTRUCTURED Sept 1 2026. ⛔ Driven by a real measured bug, not taste.

   Adding the two action buttons to the link row pushed the nav's contents to
   1352px inside a 1120px `.wrap`. Because `.wrap` is capped, that overflowed at
   EVERY desktop width: documentElement.scrollWidth was 1432 at a 1280px
   viewport and 1512 at 1440. Raising the collapse breakpoint did not fix it,
   because the constraint is the container, not the viewport. Seven text links
   plus two buttons do not fit on one line at this container width, full stop.

   So the nav is now two things instead of one:
     · `.nav-actions`: the two primary paths, ALWAYS visible in the bar, at
       every width, on every page. This is the point of the whole change.
     · `.navlinks-full`: the reading links, always behind the Menu button.

   That is an information-architecture change, not a restyle: desktop no longer
   shows a row of seven section links. It is deliberate. The brief is that an
   older first-time visitor should see two choices, and a nine-item nav is the
   single biggest source of competing choices on the page. Every link is still
   one tap away in Menu and still in the footer.
   ========================================================================== */
.sitenav{position:relative;}
.sitenav .wrap{flex-wrap:nowrap;}
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}

.navlinks-full{
  display:none;position:absolute;left:0;right:0;top:100%;z-index:70;
  flex-direction:column;align-items:stretch;gap:0;
  background:var(--paper);border-bottom:1px solid var(--line-strong);
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
}
.sitenav.open .navlinks-full{display:flex;}
.navlinks-full a{
  padding:0 20px;min-height:58px;display:flex;align-items:center;
  font-size:18px;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--line);border-left:4px solid transparent;
}
.navlinks-full a:hover{color:var(--ink);}
.navlinks-full a[aria-current="page"]{
  color:var(--ink);font-weight:600;
  border-bottom-color:var(--line);border-left-color:var(--gold-deep);background:var(--surface);
}
.menu-btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 16px;border-radius:6px;
  border:1.5px solid var(--line-strong);background:var(--paper);
  font-family:inherit;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer;
}
.sitenav.open .menu-btn{border-color:var(--brand);}

/* The bar cannot hold two buttons plus Menu at a 48px target on a narrow
   screen without shrinking type below the 16px floor, so the buttons drop out
   in two stages. Measured at 390px: with "Get agent help" still in the bar the
   Menu button sat flush against the viewport edge with no padding left.

   ⛔ Nothing becomes unreachable at either stage. Both paths are the first two
   items inside Menu, both are in the fixed bottom bar, both are in the footer,
   and on the home page both are the first thing under the headline. */
@media (max-width:699px){
  .nav-actions .nav-shop{display:none;}
  .nav-actions{gap:8px;}
}
@media (max-width:560px){
  .nav-actions .nav-act{display:none;}
}

/* ---------- Guide result capture hierarchy. Sept 2 2026. ----------
   Ruled after Wolf watched a real visitor: the phone capture, the only form on
   the site that takes a phone number, was collapsed while the email-only
   reminder was expanded. Primary stays the two doors, this is SECONDARY, and the
   reminder is TERTIARY and collapsed.
   Deliberately subordinate: no .qz-door, no brand fill, heading smaller than
   .qz-door-main, and it sits below the doors. */
.qz-capture{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.qz-capture > .qz-linktext{margin-top:0;padding-top:12px;border-top:0;}
/* ⛔ SPECIFICITY: `.qz-result h3` (line ~648) is `clamp(23px,2.6vw,29px)` at
   0,1,1, which beats a bare `.qz-capture-head` at 0,1,0. Measured, not assumed:
   the heading rendered at 23px against 19px door labels, i.e. the SECONDARY
   element out-sized the PRIMARY one. Selector below is 0,2,1 so it wins
   unambiguously in both directions. Third specificity bite in this project, hence
   the note. */
.qz-result h3.qz-capture-head{
  margin:0;font-size:18px;line-height:1.35;font-weight:600;
  color:var(--ink);letter-spacing:-0.006em;
}
@media (max-width:600px){ .qz-result h3.qz-capture-head{font-size:18px;} }

/* The reminder now lives inside a <details> nested in #qz-later. #qz-later keeps
   its own border-top and is still what script.js toggles, so kill the second
   border the .qz-quiet defaults would add.
   ⛔ SPECIFICITY TRAP, handled deliberately: the width rule further up this file
   is `.qz-later > .qz-email`, a DIRECT-child selector. The inputs are now
   grandchildren, so that rule silently stopped matching and the inputs would have
   collapsed to their intrinsic width. This project has been bitten twice by
   specificity, so the replacement is explicit rather than inherited. */
.qz-later > .qz-quiet{margin-top:0;padding-top:0;border-top:0;}
.qz-later .qz-remind-body{padding-top:12px;}
.qz-later .qz-remind-body > .qz-email{display:block;width:100%;max-width:420px;}
.qz-later .qz-remind-body .qz-later-row{margin-top:18px;}

/* Honeypot, Sept 9 2026. Deliberately NOT display:none: some bots skip fields
   hidden that way, which defeats the point. Positioned off-canvas instead, so
   it is unreachable and invisible to a human but still a real focusable input
   in the DOM that a naive form-filler will populate. Paired with aria-hidden
   and tabindex="-1" in the HTML so assistive tech never reaches it either. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Hero audience line, Sept 9 2026, senior-simplicity audit. Defined explicitly
   rather than left to inherit: an undefined new class inside an existing block
   is exactly how .door-reassure shipped at 1.08:1 on the dark .door-lead
   background. Sized between the h1 and the .lede so it reads as the answer to
   "what is this" rather than as body copy, and it uses --ink rather than
   --ink-soft so it is the more legible of the two on the hero ground. */
.hero-who{margin-top:20px;max-width:46ch;color:var(--ink);font-size:19px;line-height:1.6;font-weight:500;}
@media (max-width:760px){
  .hero-who{font-size:18px;margin-top:16px;max-width:none;}
}