/* GJ Retirement Solutions, shared stylesheet. One file, every page. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy-950:#060d18;
  --navy-900:#0b1626;
  --navy-800:#122238;
  --navy-700:#1c3a5e;
  --gold-300:#eccf8f;
  --gold-500:#d4a94e;
  --gold-600:#b8892f;
  --cream-50:#faf7f0;
  --cream-100:#f3ecdc;
  --ink-900:#10151f;
  --slate-500:#5c6672;
  --slate-600:#4a5568;
  --white:#ffffff;
  --shadow:0 20px 60px -20px rgba(6,13,24,.35);
  --shadow-sm:0 8px 24px -8px rgba(6,13,24,.25);
  --radius:18px;
  --font-display:'Fraunces',serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink-900);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0 0 .5rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1rem}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
section{padding:5.5rem 0}
.section-tight{padding:3.5rem 0}
.kicker{display:inline-block;font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--gold-600);margin-bottom:.9rem}
.eyebrow-line{display:inline-flex;align-items:center;gap:.5rem}
.eyebrow-line::before{content:"";width:26px;height:2px;background:var(--gold-500)}
.lede{font-size:1.15rem;color:var(--slate-600);max-width:62ch}
.center{text-align:center;margin-left:auto;margin-right:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.7rem;border-radius:999px;font-weight:700;font-size:.98rem;border:1px solid transparent;background:linear-gradient(180deg,var(--gold-300),var(--gold-500));color:var(--navy-950);box-shadow:0 10px 26px -10px rgba(212,169,78,.55);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(212,169,78,.65)}
.btn:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:700;font-size:.98rem;border:1.5px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
.btn-dark{background:var(--navy-900);color:#fff;box-shadow:none}
.btn-dark:hover{background:var(--navy-800)}
.btn-block{width:100%}

/* ---------- Nav ---------- */
.topbar{background:var(--navy-950);color:#cfe0f0;font-size:.82rem;padding:.5rem 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem}
.topbar a{color:var(--gold-300)}
nav.site-nav{position:sticky;top:0;z-index:50;background:rgba(6,13,24,.86);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid rgba(212,169,78,.18)}
nav.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:.85rem 24px;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff}
.brand .mark{display:flex;color:var(--gold-500)}
.brand-word{font-family:var(--font-display);font-weight:700;font-size:1.18rem;line-height:1.05;color:#fff;white-space:nowrap}
.brand-word small{display:block;font-family:var(--font-body);font-weight:600;letter-spacing:.1em;font-size:.6rem;color:var(--gold-300);text-transform:uppercase;margin-top:.15rem}
.nav-links{display:flex;align-items:center;gap:1.9rem}
.nav-links a{color:#dbe4ee;font-weight:600;font-size:.94rem;white-space:nowrap}
.nav-links a:hover{color:var(--gold-300)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.nav-phone{color:#dbe4ee;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:.4rem}
.nav-toggle{display:none;background:none;border:none;color:#fff;padding:.4rem}
/* Four links, a phone number and a button stop fitting on one line around 1120,
   and squeezing them further just wraps "Life Insurance" onto two lines. So the
   nav tightens once, then hands off to the menu button at 1080.
   The nowrap here is scoped to that 40px band on purpose. Left unscoped it also
   applied at 390, where an unshrinkable brand + phone + button forced the page
   wider than the phone and cut the right edge off every headline. */
@media(min-width:1081px) and (max-width:1120px){
  .nav-links{gap:1.25rem}
  .nav-links a{font-size:.9rem}
  .nav-cta{gap:.7rem}
  .nav-phone{font-size:.88rem;white-space:nowrap}
  .nav-cta .btn{padding:.8rem 1.15rem;font-size:.9rem;white-space:nowrap}
}
@media(max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:1.35rem;line-height:1;border-radius:8px;cursor:pointer}
  .nav-toggle[aria-expanded="true"]{background:rgba(212,169,78,.16);color:var(--gold-300)}
  .nav-cta{gap:.7rem}
  .nav-cta .btn{padding:.8rem 1.15rem;font-size:.9rem}
  /* The toggle adds .nav-open to .nav-links. Without this rule the class landed
     on an element the line above had already set to display:none, so the button
     appeared to do nothing. Absolute resolves against nav.site-nav, which is
     sticky and therefore a containing block. */
  .nav-links.nav-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--navy-950);
    border-bottom:1px solid rgba(212,169,78,.18);
    padding:.25rem 24px 1rem;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    max-height:calc(100vh - 100%);overflow-y:auto;
  }
  .nav-links.nav-open li{border-top:1px solid rgba(255,255,255,.08)}
  .nav-links.nav-open a{display:flex;align-items:center;min-height:48px;padding:.85rem .2rem;font-size:1rem;white-space:normal}
  .nav-links.nav-open a:focus-visible{outline:2px solid var(--gold-300);outline-offset:-2px}
}
/* On a phone the bar carries the brand, one button and the menu. The number
   comes out because the topbar directly above it already shows the same number
   in gold, and two of them was what pushed the row past the viewport. */
@media(max-width:640px){
  .brand-word{font-size:1.02rem;white-space:normal}
  .brand-word small{font-size:.55rem;letter-spacing:.08em}
  .nav-phone{display:none}
  nav.site-nav .wrap{gap:.6rem;padding:.7rem 18px}
  .nav-cta{gap:.35rem}
  .nav-cta .btn{padding:.68rem .85rem;font-size:.82rem}
  .topbar{font-size:.75rem}
  .topbar .wrap{padding:0 18px;gap:.15rem .5rem}
}

/* ---------- Hero: photographic (home) ---------- */
.hero{position:relative;background:var(--navy-950);color:#fff;overflow:hidden}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding:5rem 24px 5.5rem}
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:68% center;filter:brightness(1.06) saturate(1.04)}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(1100px 520px at 78% -10%,rgba(212,169,78,.16),transparent 60%),
  linear-gradient(180deg,rgba(6,13,24,.34) 0%,rgba(6,13,24,.12) 26%,rgba(6,13,24,.12) 62%,rgba(6,13,24,.46) 100%),
  linear-gradient(100deg,rgba(7,15,28,.80) 0%,rgba(7,15,28,.64) 34%,rgba(9,19,36,.30) 58%,rgba(7,15,28,.18) 100%)}
.hero .kicker{color:var(--gold-300)}
.hero h1{font-size:3.1rem;color:#fff;text-shadow:0 2px 18px rgba(3,8,16,.55)}
.hero p.lede{color:#e7ecf2;font-size:1.16rem;text-shadow:0 1px 12px rgba(3,8,16,.4)}
.lede-more{}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.hero .trust{display:flex;gap:1.6rem;margin-top:2.1rem;flex-wrap:wrap}
.hero .trust li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:#d9e2ec;font-weight:600}
.hero .trust li b{color:var(--gold-300)}

/* ---------- Hero: gradient (pillar + hub pages) ---------- */
.hero-flat{position:relative;background:
  radial-gradient(900px 500px at 88% -8%,rgba(212,169,78,.20),transparent 60%),
  radial-gradient(700px 420px at 6% 110%,rgba(28,58,94,.55),transparent 60%),
  linear-gradient(160deg,var(--navy-950),var(--navy-900) 55%,var(--navy-800));
  color:#fff;overflow:hidden}
.hero-flat .wrap{position:relative;z-index:2;padding:4.6rem 24px 4.8rem}
.hero-flat .skyline{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1;opacity:.5}
.hero-flat h1{font-size:2.75rem;color:#fff;max-width:24ch}
.hero-flat .kicker{color:var(--gold-300)}
.hero-flat p.lede{color:#dbe4ee;font-size:1.12rem}
.hero-flat .hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.5rem}
.hero-flat .breadcrumb{position:relative;z-index:2;font-size:.82rem;color:#b9c6d6;margin-bottom:1.4rem}
.hero-flat .breadcrumb a{color:var(--gold-300)}
.hero-flat .trust{position:relative;z-index:2;display:flex;gap:1.6rem;margin-top:2rem;flex-wrap:wrap}
.hero-flat .trust li{font-size:.86rem;color:#d9e2ec;font-weight:600}
.hero-flat .trust li b{color:var(--gold-300)}

/* ---------- Hero: photographic (pillar + hub pages) ----------
   The copy column is left aligned, so every hero photo is chosen or mirrored
   to put its people in the right third. --fx and --fy are set inline per page
   to steer the crop toward those people. */
.hero-flat.has-photo{background:var(--navy-950)}
.hero-flat.has-photo .hero-bg{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:var(--fx,70%) var(--fy,center)}
.hero-flat.has-photo .hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 460px at 94% -12%,rgba(212,169,78,.14),transparent 62%),
  linear-gradient(180deg,rgba(6,13,24,.36) 0%,rgba(6,13,24,.10) 28%,rgba(6,13,24,.16) 70%,rgba(6,13,24,.52) 100%),
  linear-gradient(96deg,rgba(6,13,24,.95) 0%,rgba(6,13,24,.90) 28%,rgba(7,16,30,.68) 46%,rgba(7,16,30,.32) 62%,rgba(7,16,30,.10) 80%,rgba(7,16,30,.03) 100%)}
.hero-flat.has-photo h1{max-width:31rem;text-shadow:0 2px 18px rgba(3,8,16,.6)}
.hero-flat.has-photo p.lede{max-width:33rem;text-shadow:0 1px 12px rgba(3,8,16,.5)}
.hero-flat.has-photo .hero-cta,.hero-flat.has-photo .trust{max-width:33rem}

@media(max-width:1000px){
  /* Stack the photo above the copy so nothing overlaps the people. */
  /* --fym re-frames the crop when the photo becomes a short wide band. */
  .hero-flat.has-photo .hero-bg{position:relative;inset:auto;height:248px;
    background-position:var(--fx,70%) var(--fym,var(--fy,center))}
  .hero-flat.has-photo .hero-bg::after{background:
    linear-gradient(180deg,rgba(6,13,24,.10) 0%,rgba(6,13,24,.05) 46%,rgba(6,13,24,.82) 100%)}
  .hero-flat.has-photo .wrap{padding-top:1.8rem}
  .hero-flat.has-photo h1,.hero-flat.has-photo p.lede,
  .hero-flat.has-photo .hero-cta,.hero-flat.has-photo .trust{max-width:none}
}
@media(max-width:640px){
  .hero-flat.has-photo .hero-bg{height:186px}
  .hero-flat.has-photo .wrap{padding-top:1.5rem}
}

/* ---------- Hero: photo AND an interactive card ----------
   Annuities, Mortgage Protection and Medicare each carry a working widget in
   the hero. A card on the right would sit straight on top of the people, so
   above 1200px the photo moves into its own right-hand panel and the copy and
   card share the space left of it. Between 1001 and 1199 there is no room for
   three zones, so the photo drops back to a dimmed backdrop. Below 1000 the
   existing stacked band already applies. */
.hero-flat.has-card .hero-grid{padding:3.4rem 24px 3.6rem;gap:2.4rem}
.hero-flat.has-card h1{max-width:none;font-size:clamp(1.95rem,2.35vw,2.55rem)}
.hero-flat.has-card p.lede{max-width:34rem;font-size:1.02rem}
.hero-flat.has-card .breadcrumb{margin-bottom:1rem}
.hero-flat.has-card .trust{margin-top:1.5rem;gap:1.2rem}

/* The card is a sidebar, not a second column. Given a free fraction it grew to
   520px, which both dwarfed the copy and pushed its own right edge 14px past
   the start of the photo panel, so it sat on the people. It is a fixed 20.5rem
   now and the wrap's right padding is derived from the panel width instead of
   guessed, so a 40px gutter always separates the card from the photo.
   padding-right = W - (100 - panel)vw + (100vw - W)/2 + 40, W being the wrap. */
@media(min-width:1200px){
  .hero-flat.has-card .hero-grid{grid-template-columns:minmax(0,1fr) 22rem;
    padding-right:calc(min(1220px,100vw)/2 - 24vw + 40px)}
  .hero-flat.has-card .hero-bg{left:auto;right:0;width:26vw}
  .hero-flat.has-card .hero-bg::after{background:
    linear-gradient(90deg,rgba(6,13,24,.96) 0%,rgba(6,13,24,.5) 16%,rgba(6,13,24,.1) 42%,rgba(6,13,24,0) 68%)}
}
/* Past 1600 there is room to give the people a wider panel, which is the only
   thing on the page that shows who Guy actually sells to. */
@media(min-width:1600px){
  .hero-flat.has-card .hero-grid{padding-right:calc(650px - 20vw)}
  .hero-flat.has-card .hero-bg{width:30vw}
}
@media(min-width:1001px) and (max-width:1199px){
  .hero-flat.has-card .hero-bg{opacity:.4}
  .hero-flat.has-card .hero-grid{grid-template-columns:minmax(0,1fr) 21rem;gap:2rem}
}
@media(max-width:1000px){
  .hero-flat.has-card .hero-grid{grid-template-columns:1fr;padding:1.8rem 24px 3.4rem}
}
/* The card is translucent by design on the homepage, where it sits over a soft
   gradient. Here it sits over a photo, so it goes opaque or the numbers inside
   lose contrast against whatever happens to be behind them. */
.hero-flat.has-card .quotecard{background:linear-gradient(180deg,#fff,#fbf7ef)}
/* In a 22rem sidebar the label and the badge fight for the same line and the
   label breaks across three. Tighter tracking plus a badge that will not shrink
   keeps both on one. */
.hero-flat.has-card .qc-top{align-items:flex-start}
.hero-flat.has-card .qc-top .lab{letter-spacing:.05em;line-height:1.35}
.hero-flat.has-card .qc-top .badge-a{flex:none;white-space:nowrap}
.hero-flat.has-card .btn-block{padding-left:.6rem;padding-right:.6rem}

/* Estimator controls, shared by the annuity and mortgage cards. */
.est-controls{display:grid;gap:.7rem;margin:.2rem 0 1rem}
.est-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.estf{display:flex;flex-direction:column;gap:.3rem}
.estf>span{font-size:.78rem;font-weight:700;color:#4a5568;letter-spacing:.02em}
.estf input{width:100%;border:1.5px solid rgba(16,21,31,.16);border-radius:10px;padding:.6rem .75rem;
  font:600 1rem/1.2 var(--font-body);color:var(--navy-950);background:#fff}
.estf input:focus-visible{outline:2px solid var(--gold-500);outline-offset:1px;border-color:var(--gold-500)}
.estf-money{display:flex;align-items:center;border:1.5px solid rgba(16,21,31,.16);border-radius:10px;background:#fff;padding-left:.7rem}
.estf-money i{font-style:normal;font-weight:700;color:#5f6a7d}
.estf-money input{border:0;padding-left:.3rem}
.estf-money input:focus-visible{outline:none}
.estf-money:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 2px rgba(212,169,78,.35)}
.seg{display:flex;background:rgba(16,21,31,.07);border-radius:10px;padding:3px;gap:3px}
.seg-b{flex:1;border:0;background:transparent;border-radius:8px;padding:.5rem .3rem;cursor:pointer;
  font:700 .84rem var(--font-body);color:#4a5568}
.seg-b.on{background:var(--navy-950);color:#fff}
.est-chart{display:flex;align-items:flex-end;gap:.35rem;height:56px;padding:.55rem 0;
  border-top:1px dashed rgba(16,21,31,.14);border-bottom:1px dashed rgba(16,21,31,.14);margin-bottom:.7rem}
.est-chart i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--navy-800),var(--navy-950))}
.est-chart i:nth-child(1){height:38%}.est-chart i:nth-child(2){height:52%}
.est-chart i:nth-child(3){height:64%}.est-chart i:nth-child(4){height:78%}
.est-chart i:nth-child(5){height:92%}
.est-chart i:last-child{height:100%;background:linear-gradient(180deg,var(--gold-300),var(--gold-500))}
.est-sub{font-size:.86rem;color:#5f6a7d;margin:-.5rem 0 .9rem}

/* Medicare hero picker, three routes straight into the quote modal. */
.hero-pick{position:relative;z-index:2;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(3,10,20,.75)}
.hero-pick .hp-label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#5f6a7d;padding:1.1rem 1.3rem .3rem}
.hp-row{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;background:#fff;border:0;
  border-top:1px solid rgba(16,21,31,.09);padding:1rem 1.3rem;cursor:pointer;font:inherit;color:inherit;
  transition:background .15s}
.hp-row:hover,.hp-row:focus-visible{background:var(--cream-50);outline:none}
.hp-row:focus-visible{box-shadow:inset 3px 0 0 var(--gold-500)}
.hp-ico{width:42px;height:42px;min-width:42px;border-radius:11px;background:rgba(212,169,78,.16);display:grid;place-items:center}
.hp-ico svg{width:22px;height:22px;stroke:var(--navy-900);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-txt{display:flex;flex-direction:column}
.hp-txt b{color:var(--navy-950);font-size:1.02rem}
.hp-txt span{color:#5f6a7d;font-size:.86rem}
.hp-go{margin-left:auto;width:17px;height:17px;min-width:17px;stroke:var(--gold-500);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hp-note{font-size:.78rem;color:#7b8494;padding:.9rem 1.3rem 1.1rem;border-top:1px solid rgba(16,21,31,.09)}
/* The Medicare page already carries the three routes as a full section right
   under the hero. Stacked, the hero copy of it would sit directly on top of
   that section and say the same thing twice, so the shortcut only exists where
   there are two columns to put it in. */
@media(max-width:1000px){
  .hero-pick{display:none}
  .hero-flat.has-card .quotecard{max-width:27rem}
}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;padding:3.2rem 24px 3.6rem}
  .hero-photo{position:relative;inset:auto;height:340px;border-radius:var(--radius);margin-bottom:2rem}
  .hero-photo::after{border-radius:var(--radius)}
}
@media(max-width:900px){
  .hero-photo::after{background:
    radial-gradient(700px 360px at 78% -10%,rgba(212,169,78,.16),transparent 60%),
    linear-gradient(180deg,rgba(6,13,24,.45) 0%,rgba(6,13,24,.55) 60%,rgba(6,13,24,.68) 100%)}
  .hero h1{text-shadow:0 2px 20px rgba(3,8,16,.9),0 0 8px rgba(3,8,16,.85),0 1px 3px rgba(3,8,16,.8)}
  .hero p.lede{text-shadow:0 1px 16px rgba(3,8,16,.9),0 0 7px rgba(3,8,16,.85),0 1px 3px rgba(3,8,16,.75)}
}
@media(max-width:640px){
  .hero-grid{padding:2.2rem 24px 2.6rem;gap:1.5rem}
  .hero h1,.hero-flat h1{font-size:2.05rem;line-height:1.16;margin:.7rem 0 .3rem}
  .hero p.lede,.hero-flat p.lede{font-size:1.02rem;margin-bottom:1.1rem}
  .lede-more{display:none}
  .hero-cta .btn-ghost{display:none}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero .trust,.hero-flat .trust{display:none}
  .hero-flat .wrap{padding:3rem 24px 3.2rem}
}

/* ---------- Frosted quote card ---------- */
.quotecard{position:relative;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(251,247,239,.80));
  -webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem}
.quotecard h3{font-size:1.3rem;color:var(--navy-950)}
.quotecard .qc-note{color:#5f6a7d;font-size:.86rem;margin-bottom:1.2rem}
.qc-row{display:flex;justify-content:space-between;font-size:.9rem;padding:.55rem 0;border-bottom:1px dashed rgba(16,21,31,.12)}
.qc-row span:first-child{color:#4a5568;font-weight:600}
.qc-row span:last-child{color:var(--navy-950);font-weight:700}
.qc-form label{display:block;font-size:.82rem;font-weight:600;color:#465268;margin:0 0 .35rem}
.qc-form input,.qc-form select{width:100%;padding:.75rem .9rem;border-radius:10px;border:1px solid rgba(16,21,31,.16);font:inherit;background:#fff}
.qc-form input:focus,.qc-form select:focus{outline:2px solid var(--gold-500);outline-offset:1px}

/* functional two-step lead form inside the quote card */
.qc-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.5rem}
.qc-top .lab{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5f6a7d}
.qc-top .badge-a{font-size:.7rem;font-weight:700;letter-spacing:.04em;color:#6b5119;background:rgba(212,169,78,.18);
  border:1px solid rgba(212,169,78,.42);border-radius:999px;padding:.28rem .6rem;white-space:nowrap}
.qc-price{font-family:var(--font-display);font-weight:700;font-size:2.7rem;line-height:1;color:var(--navy-950);margin-bottom:.9rem}
.qc-price small{font-size:1rem;font-weight:600;color:#5f6a7d}
.qc-form{margin-top:1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.qc-form .full{grid-column:1/-1}
.qc-form .btn{margin-top:.3rem}
.qc-err{grid-column:1/-1;font-size:.82rem;color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:8px;padding:.5rem .7rem;margin:.1rem 0 0}
.qc-step-note{grid-column:1/-1;font-size:.8rem;color:#5f6a7d;margin:0}
.qc-back{grid-column:1/-1;background:none;border:0;font:inherit;font-size:.82rem;font-weight:600;color:#4a5568;
  text-decoration:underline;cursor:pointer;padding:.2rem 0;justify-self:start}
.qc-done{text-align:center;padding:.6rem 0 .2rem}
.qc-done h3{margin-bottom:.4rem}
.qc-ok{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(212,169,78,.18);
  margin:.4rem auto .9rem;color:#8a6a2a}
.qc-ok svg{width:26px;height:26px}
.qc-disc{font-size:.76rem;color:#6b7484;margin-top:.9rem;line-height:1.5}
.float-badge{position:absolute;left:-14px;bottom:-14px;background:var(--navy-950);color:#fff;border-radius:14px;
  padding:.6rem .85rem;box-shadow:var(--shadow);font-size:.8rem;display:flex;align-items:center;gap:.45rem;
  border:1px solid rgba(255,255,255,.12)}
.float-badge b{color:var(--gold-300)}
@media(max-width:1100px){.quotecard{max-width:27rem}.float-badge{left:-8px}}
@media(max-width:420px){.qc-form{grid-template-columns:1fr}.float-badge{position:static;margin-top:1rem;justify-content:center}}

/* ---------- Trust strip ---------- */
.trust-strip{background:var(--cream-50);border-top:1px solid var(--cream-100);border-bottom:1px solid var(--cream-100)}
.trust-strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:2.6rem;padding:1.6rem 24px}
.trust-strip .t-item{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.92rem;color:var(--navy-900)}
.trust-strip .t-item .n{color:var(--gold-600);font-family:var(--font-display);font-size:1.15rem}

/* ---------- Value / pillar cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.value-card{background:var(--navy-950);border-radius:var(--radius);padding:2.1rem;color:#fff;border:1px solid rgba(212,169,78,.22)}
.value-card .vc-icon{width:46px;height:46px;border-radius:12px;background:rgba(212,169,78,.15);display:flex;align-items:center;justify-content:center;color:var(--gold-300);margin-bottom:1.1rem}
.value-card h3{color:#fff;font-size:1.25rem}
.value-card p{color:#c3ceda;font-size:.94rem;margin:0}

.card{background:#fff;border-radius:var(--radius);padding:1.9rem;border:1px solid rgba(16,21,31,.08);box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.product-card{display:flex;flex-direction:column;gap:.7rem}
.product-card .pc-icon{width:44px;height:44px;border-radius:11px;background:linear-gradient(160deg,var(--navy-900),var(--navy-700));display:flex;align-items:center;justify-content:center;color:var(--gold-300)}
.product-card h3{font-size:1.14rem;color:var(--navy-950)}
.product-card p{color:var(--slate-500);font-size:.92rem;margin:0}
.product-card .pc-link{margin-top:.4rem;font-weight:700;color:var(--gold-600);font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem}

/* ---------- Carrier strip ---------- */
.carrier-strip{background:#fff}
.carrier-strip .grid-carriers{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;align-items:center}
.carrier-strip img{max-height:46px;width:auto;margin:0 auto;filter:grayscale(1) opacity(.72);transition:filter .2s ease}
.carrier-strip img:hover{filter:grayscale(0) opacity(1)}

/* ---------- Testimonials ---------- */
.testimonial-card{background:var(--cream-50);border-radius:var(--radius);padding:1.9rem;border:1px solid var(--cream-100)}
.testimonial-card .stars{color:var(--gold-500);letter-spacing:.15em;margin-bottom:.8rem;font-size:1rem}
.testimonial-card p{color:var(--ink-900);font-size:.98rem;font-style:italic}
.testimonial-card .tc-name{font-weight:700;color:var(--navy-900);font-style:normal;margin-top:.9rem;font-size:.92rem}

/* ---------- Origin story ---------- */
.story{background:var(--navy-950);color:#fff;border-top:3px solid var(--gold-500)}
.story-grid{display:grid;grid-template-columns:minmax(0,368px) 1fr;gap:3.2rem;align-items:center}
/* Guy's Navy portrait is a scanned 1600x1802 studio shot. Unconstrained it fills
   the whole column and the section becomes a wall of face, so it is capped and
   framed at a fixed 4:5 rather than scaling with the viewport. */
.story img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 42%;
  border-radius:var(--radius);box-shadow:var(--shadow)}
.story h2{color:#fff}
.story p{color:#c3ceda}
.story .kicker{color:var(--gold-300)}
.story blockquote{border-left:3px solid var(--gold-500);padding-left:1.3rem;margin:1.4rem 0;font-family:var(--font-display);font-size:1.18rem;color:#fff;font-style:italic}
.badge-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(212,169,78,.13);border:1px solid rgba(212,169,78,.3);color:var(--gold-300);padding:.45rem .9rem;border-radius:999px;font-size:.82rem;font-weight:700}

/* ---------- Our commitment ---------- */
.commitment{background:var(--cream-50)}
.commit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
.commit-photo{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.commit-badge{width:112px;height:112px;display:block;margin-bottom:1.1rem}
.commitment blockquote{border-left:3px solid var(--gold-500);padding-left:1.3rem;margin:1.3rem 0;font-family:var(--font-display);font-size:1.22rem;line-height:1.5;color:var(--navy-950);font-style:italic}
.commitment .badge{background:rgba(212,169,78,.16);border-color:rgba(180,140,55,.42);color:#6b5119}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid rgba(16,21,31,.1);padding:1.2rem 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.02rem;color:var(--navy-950);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-600);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:.8rem;color:var(--slate-600)}

/* ---------- CTA banner ---------- */
.cta-band{background:linear-gradient(160deg,var(--navy-950),var(--navy-800));color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#c3ceda;max-width:56ch;margin-left:auto;margin-right:auto}
.cta-band .hero-cta{justify-content:center;display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-950);color:#aebccb;padding:4rem 0 2rem;font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.6rem}
.footer-grid h4{color:#fff;font-family:var(--font-body);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem}
.footer-grid li{margin-bottom:.6rem}
.footer-grid a:hover{color:var(--gold-300)}
footer .f-brand{display:flex;align-items:center;gap:.6rem;color:#fff;margin-bottom:1rem}
footer .f-brand .brand-word{color:#fff}
footer p{color:#aebccb}
.footer-legal{border-top:1px solid rgba(255,255,255,.08);margin-top:3rem;padding-top:1.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem}
.footer-legal a{color:#8fa1b5}
.disclaimer{border-top:1px solid rgba(255,255,255,.08);margin-top:1.6rem;padding-top:1.6rem;font-size:.78rem;color:#7c8ba0;line-height:1.7}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr;gap:2rem}
  .story img{max-width:284px;margin:0 auto}
  .commit-grid{grid-template-columns:1fr;gap:2.2rem}
  .carrier-strip .grid-carriers{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .footer-grid{grid-template-columns:1fr}
  section{padding:3.4rem 0}
  h1{font-size:2rem}
  .carrier-strip .grid-carriers{grid-template-columns:repeat(2,1fr);gap:1.6rem}
}

/* ---------- Quote modal (two-step) ---------- */
.qmodal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(6,13,24,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.qmodal-backdrop[hidden]{display:none}
.qmodal{background:#fff;border-radius:20px;max-width:480px;width:100%;padding:2.2rem;position:relative;box-shadow:var(--shadow);max-height:92vh;overflow-y:auto}
.qmodal-close{position:absolute;top:1rem;right:1rem;background:var(--cream-50);border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy-900);font-size:1.1rem}
.qmodal h3{color:var(--navy-950);font-size:1.4rem}
.qmodal .qm-step[hidden]{display:none}
.qmodal .qm-progress{display:flex;gap:.4rem;margin-bottom:1.2rem}
.qmodal .qm-progress span{height:4px;flex:1;background:var(--cream-100);border-radius:99px}
.qmodal .qm-progress span.active{background:var(--gold-500)}
.qmodal label{display:block;font-size:.84rem;font-weight:600;color:#465268;margin:1rem 0 .35rem}
.qmodal input,.qmodal select{width:100%;padding:.8rem .95rem;border-radius:10px;border:1px solid rgba(16,21,31,.16);font:inherit}
.qmodal input:focus,.qmodal select:focus{outline:2px solid var(--gold-500);outline-offset:1px}
.qmodal .qm-actions{display:flex;gap:.8rem;margin-top:1.6rem}
.qmodal .qm-success{text-align:center;padding:1rem 0}
.qmodal .qm-success .ok-icon{width:60px;height:60px;border-radius:50%;background:var(--cream-50);color:var(--gold-600);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.8rem}

/* ================================================================
   AA insurance template components, ported to the GJ brand.
   Source: dist/{medicare,annuities,life-insurance,
   mortgage-protection}-template.html
   ================================================================ */

/* ---------- Self-select path cards ("Which best describes you?") ---------- */
.paths{background:var(--cream-50)}
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem}
.pathc{text-align:left;background:#fff;border:1.5px solid rgba(16,21,31,.1);border-radius:var(--radius);padding:1.9rem 1.6rem;cursor:pointer;font:inherit;color:inherit;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;display:flex;flex-direction:column;gap:.55rem;min-height:100%}
.pathc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-500)}
.pathc:focus-visible{outline:3px solid var(--gold-500);outline-offset:2px}
.pathc .pi{width:54px;height:54px;border-radius:14px;background:linear-gradient(160deg,var(--navy-900),var(--navy-700));display:flex;align-items:center;justify-content:center;color:var(--gold-300);margin-bottom:.3rem}
.pathc .pi svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pathc h3{font-size:1.24rem;color:var(--navy-950)}
.pathc p{color:var(--slate-500);font-size:.99rem}
.pathc .go{margin-top:auto;color:var(--gold-600);font-weight:700;font-size:.99rem;padding-top:.5rem}

/* ---------- Self-contained lead answer paragraph (AI extractability) ---------- */
.lead-answer{max-width:52rem;margin:0 auto 3rem;text-align:center;font-size:1.13rem;color:var(--ink-900);background:var(--cream-50);border:1px solid var(--cream-100);border-left:3px solid var(--gold-500);border-radius:var(--radius);padding:1.6rem 1.8rem}
.paths .lead-answer,section[style*="cream"] .lead-answer{background:#fff}

/* ---------- Lettered parts grid (Medicare A/B/C/D) ---------- */
.parts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.part{background:#fff;border:1px solid rgba(16,21,31,.08);border-radius:var(--radius);padding:1.6rem 1.4rem;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.part:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.part .lt{width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,var(--navy-900),var(--navy-700));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--gold-300);margin-bottom:.9rem}
.part h3{font-size:1.06rem;color:var(--navy-950);margin-bottom:.35rem}
.part p{color:var(--slate-500);font-size:.91rem;margin:0}

/* ---------- Icon chip for feature cards ---------- */
.card .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(160deg,var(--navy-900),var(--navy-700));display:flex;align-items:center;justify-content:center;color:var(--gold-300);margin-bottom:1.1rem}
.card .ic svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Comparison table ---------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:2.4rem}
.cmp-table{width:100%;min-width:34rem;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(16,21,31,.08)}
.cmp-table th,.cmp-table td{padding:1rem 1.1rem;text-align:left;font-size:.95rem;border-bottom:1px solid rgba(16,21,31,.08)}
.cmp-table thead th{background:var(--navy-950);color:#fff;font-family:var(--font-display);font-weight:600}
.cmp-table thead th:nth-child(2){background:var(--navy-700)}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table td:first-child{font-weight:600;color:var(--navy-950)}
.cmp-table .yes{color:var(--gold-600);font-weight:700}
.cmp-table .no{color:#8f9aa6}
/* Three columns need about 34rem. On a phone that leaves the third one, the
   Supplement column, entirely off screen with nothing on the page saying so.
   The table already scrolled, it just never told anyone, so the hint shows
   only at the widths where a column is genuinely hidden. */
.tscroll-hint{display:none}
@media(max-width:640px){
  .tscroll-hint{display:block;margin:2.2rem 0 -1.7rem;font-size:.82rem;font-weight:600;color:#7b8494}
  .cmp-table th,.cmp-table td{padding:.85rem .9rem;font-size:.9rem}
}

/* ---------- Timeline / enrollment windows ---------- */
.tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.tl{background:#fff;border:1px solid rgba(16,21,31,.08);border-left:4px solid var(--gold-500);border-radius:14px;padding:1.5rem 1.4rem;box-shadow:var(--shadow-sm)}
.tl .when{font-family:var(--font-display);font-weight:700;color:var(--gold-600);font-size:1rem;margin-bottom:.3rem}
.tl h3{font-size:1.02rem;color:var(--navy-950);margin-bottom:.4rem}
.tl p{color:var(--slate-500);font-size:.89rem;margin:0}

/* ---------- Three-step process band ---------- */
.steps{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#e9eef5}
.steps .kicker{color:var(--gold-300)}
.steps h2{color:#fff}
.steps .lede{color:#c3ceda}
.step-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.step{background:rgba(255,255,255,.07);border:1px solid rgba(212,169,78,.25);border-radius:var(--radius);padding:2rem 1.6rem}
.step .num{font-family:var(--font-display);font-weight:700;font-size:2.2rem;color:var(--gold-300);opacity:.75;line-height:1}
.step h3{color:#fff;font-size:1.18rem;margin:.5rem 0 .4rem}
.step p{color:#c3ceda;font-size:.94rem;margin:0}

/* ---------- Capped product-type cards (annuity types, policy types) ---------- */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.type{background:#fff;border:1px solid rgba(16,21,31,.08);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.type .cap{padding:1.15rem 1.4rem;background:linear-gradient(150deg,var(--navy-900),var(--navy-700));color:#fff}
.type .cap b{font-family:var(--font-display);font-weight:600;font-size:1.24rem;display:block;line-height:1.25}
.type .cap span{font-size:.83rem;color:var(--gold-300)}
.type .tbody{padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.type .tbody p{color:var(--slate-500);font-size:.95rem;margin:0}
.type ul{list-style:none;margin:0;padding:0}
.type li{padding-left:1.55rem;position:relative;font-size:.91rem;color:var(--slate-600);margin-bottom:.42rem}
.type li:last-child{margin-bottom:0}
.type li::before{content:"";position:absolute;left:0;top:.3rem;width:14px;height:14px;border-radius:50%;background:var(--gold-500);box-shadow:inset 0 0 0 3px #fff}

/* ---------- Term-length tier cards with tradeoff meters ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.4rem}
.tier{background:#fff;border:1px solid rgba(16,21,31,.1);border-radius:var(--radius);padding:1.7rem 1.4rem;position:relative;transition:transform .18s ease,box-shadow .18s ease}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tier.feat{border-color:var(--gold-500);box-shadow:0 20px 44px -26px rgba(184,137,47,.6)}
.tier .metal{font-family:var(--font-display);font-weight:700;font-size:1.32rem;color:var(--navy-950)}
.tier .av{display:inline-block;margin:.5rem 0 .9rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--gold-600);background:var(--cream-50);border:1px solid var(--cream-100);padding:.25rem .62rem;border-radius:999px}
.meter{margin:0 0 .9rem}
.meter .m-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.8rem;color:var(--slate-500);margin:.32rem 0}
.dots{display:inline-flex;gap:4px;flex:none}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(16,21,31,.14)}
.dots i.on{background:var(--navy-700)}
.dots.warn i.on{background:var(--gold-500)}
.tier p{color:var(--slate-500);font-size:.93rem;margin-bottom:.5rem}
.tier .best{font-size:.9rem;color:var(--ink-900);border-top:1px dashed rgba(16,21,31,.14);padding-top:.8rem;margin-top:.6rem}
.tier .best b{color:var(--gold-600)}
.tier .tag2{position:absolute;top:-11px;left:1.4rem;background:var(--gold-500);color:var(--navy-950);font-size:.7rem;font-weight:700;padding:.22rem .6rem;border-radius:6px;letter-spacing:.04em}
.cat-note{max-width:52rem;margin:2rem auto 0;text-align:center;color:var(--slate-500);font-size:.98rem;background:var(--cream-50);border:1px dashed rgba(16,21,31,.16);border-radius:14px;padding:1.15rem 1.35rem}
.cat-note b{color:var(--navy-950)}

/* ---------- Two-up explainer cards ---------- */
.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem}
.money-card{background:#fff;border:1px solid rgba(16,21,31,.08);border-radius:var(--radius);padding:1.9rem 1.7rem;box-shadow:var(--shadow-sm)}
.money-card h3{font-size:1.2rem;color:var(--navy-950);margin-bottom:.5rem}
.money-card p{color:var(--slate-500);font-size:.96rem;margin:0}

@media(max-width:900px){
  .tier-grid{grid-template-columns:1fr 1fr}
  .money-grid{grid-template-columns:1fr}
  .path-grid{grid-template-columns:1fr}
  .parts-grid{grid-template-columns:1fr 1fr}
  .tl-grid{grid-template-columns:1fr 1fr}
  .step-row{grid-template-columns:1fr}
  .type-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .parts-grid{grid-template-columns:1fr}
  .tl-grid{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:1fr}
}

/* ---------- Legal pages (privacy, terms) ----------
   Long-form prose, so the measure is capped well below the section wrap.
   Only these two generated pages use it. */
.legal{max-width:760px}
.legal h2{font-size:1.35rem;margin:2.2rem 0 .6rem;color:var(--navy-900)}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 1rem;line-height:1.75;color:var(--ink-600)}
.legal a{color:var(--gold-600);font-weight:700}
.legal-effective{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--cream-100);font-size:.9rem;font-weight:700;color:var(--navy-900)}