/* ==========================================================================
   Nick Heyse Insurance — Design System
   Palette: deep trustworthy navy + soft shielding green + warm cream.
   Deliberately NO red, no stars-and-stripes iconography, no government-clone
   look — 42 CFR 422.2262(a)(1)(ix)/(xvii).
   Typography is set large on purpose: base 20px, nothing below 18px, because
   the audience reads on iPads, phones and older laptops.
   ========================================================================== */

:root{
  /* Core palette */
  --navy:        #17405E;   /* primary brand, headings, primary button        */
  --navy-deep:   #0E2C43;   /* footer, hover, deep contrast                    */
  --navy-tint:   #E9F0F5;   /* soft blue section background                    */
  --blue:        #2E6E9E;   /* links, secondary accent                         */
  --blue-bright: #3D82B5;
  --green:       #3F6B50;   /* "shielding green" — trust/checkmarks            */
  --green-soft:  #E6EEE7;   /* green section background                        */
  --cream:       #FBF8F3;   /* page background                                 */
  --sand:        #F1EAE0;   /* alt section background                          */
  --white:       #FFFFFF;
  --ink:         #1E2A32;   /* body text                                       */
  --muted:       #4A5A66;   /* secondary text — 7.1:1 on cream                 */
  --line:        #DCD3C6;   /* borders                                         */
  --gold:        #B8862F;   /* single warm accent, text-safe on cream (4.9:1)  */
  --focus:       #B8862F;

  /* Type */
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-body:     1.25rem;   /* 20px */
  --fs-small:    1.125rem;  /* 18px — absolute floor */
  --fs-lead:     1.4375rem; /* 23px */
  --fs-h3:       1.5rem;
  --fs-h2:       clamp(1.75rem, 3.4vw, 2.375rem);
  --fs-h1:       clamp(2rem, 4.6vw, 3.25rem);
  --lh-body:     1.65;

  /* Space */
  --gap:         1.5rem;
  --pad-section: clamp(3rem, 7vw, 5.5rem);
  --maxw:        1120px;
  --maxw-text:   46rem;

  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 2px 4px rgba(14,44,67,.06), 0 10px 26px rgba(14,44,67,.08);
  --shadow-lg:   0 4px 8px rgba(14,44,67,.08), 0 18px 44px rgba(14,44,67,.12);
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--navy); line-height:1.22; margin:0 0 .6em; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:var(--fs-h1); line-height:1.16; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:1.25rem; }
p{ margin:0 0 1.1em; max-width:var(--maxw-text); }
ul,ol{ margin:0 0 1.2em; padding-left:1.35em; max-width:var(--maxw-text); }
li{ margin-bottom:.6em; }
strong{ font-weight:600; color:var(--ink); }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }

a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
a:hover{ color:var(--navy); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px; border-radius:4px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:.9rem 1.4rem;
  font-size:var(--fs-small); border-radius:0 0 var(--radius-sm) 0; text-decoration:none;
}
.skip-link:focus{ left:0; color:#fff; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------- layout helpers --- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.section{ padding-block:var(--pad-section); }
.section--tint{ background:var(--navy-tint); }
.section--sand{ background:var(--sand); }
.section--green{ background:var(--green-soft); }
.section--white{ background:var(--white); }
.section--navy{ background:var(--navy); color:#fff; }
.section--navy h2,.section--navy h3{ color:#fff; }
.section--navy p{ color:#E4EDF3; }

/* A component that paints its own light surface must opt out of an inverted
   parent palette. Without these overrides .section--navy's white heading text
   lands on the white .cta-card and disappears — white on white is 1:1 contrast,
   a WCAG failure that is invisible in the most literal sense. Found by the
   contrast audit, not by looking at the page. Any future light-surface component
   used inside an inverted section needs the same treatment. */
.section--navy .cta-card{ color:var(--ink); }
.section--navy .cta-card h2,
.section--navy .cta-card h3{ color:var(--navy); }
.section--navy .cta-card p{ color:var(--ink); }
/* Hero photo hover — a lift and a warmer shadow, nothing flashy.
   Kept to transform/box-shadow only so it never triggers layout (no reflow, no
   content jumping under a reader's cursor), and disabled entirely under
   prefers-reduced-motion, which some older users have set for vestibular
   reasons. Touch devices never fire :hover, so this is decorative only. */
.hero-photo img{
  transition: transform .35s cubic-bezier(.2,.7,.3,1),
              box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
.hero-photo:hover img,
.hero-photo:focus-within img{
  transform: translateY(-8px) scale(1.015);
  box-shadow:0 10px 20px rgba(14,44,67,.14), 0 34px 68px rgba(14,44,67,.28);
}
@media (prefers-reduced-motion: reduce){
  .hero-photo img{ transition:none; }
  .hero-photo:hover img,
  .hero-photo:focus-within img{ transform:none; }
}

/* ---------------------------------------------------------------- reviews -- */
/* A scrolling strip of Google review quotes. The track is duplicated in the
   markup and translated -50%, so the loop is seamless. It pauses on hover and on
   focus-within, because a moving target is hard to read for exactly the audience
   this site serves. Under prefers-reduced-motion it stops entirely and becomes a
   normal swipeable/scrollable row. */
.review-marquee{
  overflow:hidden; margin-top:2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.review-track{ display:flex; gap:1.5rem; width:max-content; animation:review-scroll 52s linear infinite; }
.review-marquee:hover .review-track,
.review-marquee:focus-within .review-track{ animation-play-state:paused; }
@keyframes review-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .review-track{ animation:none; }
  .review-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
}
.review{
  flex:0 0 min(22rem, 82vw); background:var(--white); border:2px solid var(--line);
  border-radius:var(--radius); padding:1.5rem 1.6rem; box-shadow:var(--shadow);
}
.review-stars{ color:var(--gold); font-size:1.25rem; letter-spacing:.1em; margin-bottom:.6rem; }
.review blockquote{ margin:0; font-size:1.125rem; color:var(--ink); line-height:1.6; }
.review figcaption{ margin-top:.9rem; font-size:1.125rem; color:var(--muted); font-weight:600; }

/* ------------------------------------------------------- linked help cards -- */
/* Cards that are also links. The whole card lifts on hover/focus the same way the
   hero portrait does — same transform and shadow curve, so the site has one hover
   language instead of several. transform/box-shadow only, so nothing reflows under
   the cursor. Underline is suppressed because the card itself is the affordance;
   the "Read the answer" line carries the destination instead. */
.card--link{
  display:block; text-decoration:none; color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s cubic-bezier(.2,.7,.3,1),
             border-color .35s ease;
  border:1px solid transparent;
}
.card--link:hover,
.card--link:focus-visible{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 10px 20px rgba(14,44,67,.14), 0 34px 68px rgba(14,44,67,.24);
  border-color:rgba(63,107,80,.35);
}
.card--link:hover h3,
.card--link:focus-visible h3{ text-decoration:underline; text-underline-offset:4px; }
.card--link:focus-visible{ outline:3px solid #17405E; outline-offset:3px; }
.card--link h3{ color:#17405E; }

/* "Read the answer ->" affordance on a linked card */
.card-more{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-weight:600; font-size:1.125rem; color:#3F6B50;
}
.card--link:hover .card-more,
.card--link:focus-visible .card-more{ color:#2F5540; }
.card--link:hover .card-more svg,
.card--link:focus-visible .card-more svg{ transform:translateX(4px); }
.card-more svg{ transition:transform .35s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce){
  .card--link{ transition:none; }
  .card--link:hover, .card--link:focus-visible{ transform:none; }
  .card-more svg{ transition:none; }
  .card--link:hover .card-more svg{ transform:none; }
}

/* Single-card layout. A lone card in a multi-column grid either stretches to an
   unreadable measure or sits orphaned against the left edge, so it gets one centred
   column capped at a comfortable reading width. Used when only one product line is
   live — see services_grid_class() in build.py. */
.grid--1c{ display:grid; grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }
@media (max-width: 640px){ .grid--1c{ max-width:none; } }

.center{ text-align:center; }
.center p, .center ul, .center ol{ margin-inline:auto; }
.lead{ font-size:var(--fs-lead); color:var(--muted); }
.section--navy .lead{ color:#D6E3EC; }
.stack > * + *{ margin-top:1rem; }

/* ---------------------------------------------------------------- header -- */
.utilbar{ background:var(--navy-deep); color:#EAF1F6; font-size:var(--fs-small); }
.utilbar .wrap{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; padding-block:.6rem; }
.utilbar a{ color:#fff; text-decoration:none; font-weight:600; }
.utilbar a:hover{ text-decoration:underline; }
.utilbar .util-trust{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.utilbar svg{ display:inline-block; vertical-align:-.22em; margin-right:.4rem; }

.site-header{ background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
.brand-mark{ height:46px; width:auto; flex-shrink:0; }
/* White plaque variant, for the navy footer where the transparent extraction
   would show its halo and the punched-out heart. */
.brand-mark-tile{ height:38px; width:auto; flex-shrink:0; border-radius:7px; }

/* Footer brand lockup: mark and wordmark on ONE line, so they read as a single
   branded unit. Stacked, the plaque became the brightest and largest shape in
   the footer and turned the wordmark into a caption for a picture — it read as a
   sticker rather than a brand. Horizontal, the plate is small enough to sit as a
   mark beside the name instead of competing with it. */
.footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem; }
.footer-brand-name{
  font-family:var(--font-head); font-weight:600; font-size:1.375rem;
  color:#fff; line-height:1.15;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--font-head); font-weight:600; font-size:1.375rem; color:var(--navy); }
.brand-sub{ font-size:1.125rem; color:var(--muted); letter-spacing:.01em; }

.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:.35rem; }
.main-nav li{ margin:0; }
.main-nav a{
  display:block; padding:.7rem .8rem; font-size:var(--fs-small); font-weight:600;
  color:var(--navy); text-decoration:none; border-radius:var(--radius-sm); white-space:nowrap;
}
.main-nav a:hover{ background:var(--navy-tint); }
/* Current page: unmistakable without looking like a button. A filled pill here
   competed visually with the real "Schedule a Call" CTA. */
.main-nav a[aria-current="page"]{
  background:transparent; color:var(--navy-deep); font-weight:700;
  text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:8px;
}
.main-nav .nav-cta a{ background:var(--navy); color:#fff; padding:.8rem 1.15rem; }
.main-nav .nav-cta a:hover{ background:var(--navy-deep); }

.nav-toggle{
  display:none; align-items:center; gap:.6rem; background:var(--navy); color:#fff;
  border:0; border-radius:var(--radius-sm); padding:.8rem 1.1rem; font-size:var(--fs-small);
  font-family:inherit; font-weight:600; cursor:pointer;
}
/* Between 1241px and 1420px the six nav labels plus the "Schedule a Call" CTA no
   longer fit beside the wordmark at the default spacing, so the header overflowed the
   viewport. That band covers 1280 and 1366 — the two most common laptop widths — and
   dropping the whole nav to the Menu button across it would cost real navigation on
   exactly the screens most of this audience uses.

   So tighten the spacing instead. Horizontal padding comes off first because it is
   invisible; the labels and the type size stay, since the type floor is the
   accessibility line and the labels are what tell people where to go. Measured at
   1280px: the nav needed 1339px before this rule and fits after it. */
@media (min-width: 1241px) and (max-width: 1420px){
  .main-nav ul{ gap:.1rem; }
  .main-nav a{ padding:.7rem .5rem; }
  .main-nav .nav-cta a{ padding:.8rem .85rem; }
}

/* Below this width the full horizontal nav no longer fits beside the wordmark.
   Measured: at a 1009px viewport the nav's last item ("Schedule a Call") reached
   1187px, so every page between about 1001px and 1190px overflowed the viewport
   — which included iPad landscape at 1024px. The switch to the Menu button
   happens at 1240px instead, with room to spare. */
@media (max-width: 1240px){
  .nav-toggle{ display:inline-flex; }
  .main-nav{ display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:3px solid var(--navy);
    box-shadow:var(--shadow-lg); padding:.75rem clamp(1rem,4vw,2rem) 1.25rem; }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .main-nav a{ padding:1rem .9rem; font-size:1.1875rem; border-bottom:1px solid var(--line); border-radius:0; }
  .main-nav .nav-cta{ margin-top:.75rem; }
  .main-nav .nav-cta a{ text-align:center; border-radius:var(--radius-sm); border-bottom:0; }
}
/* On a phone the utility bar wrapped to three stacked lines and pushed the
   headline 136px down. Keep the one thing that matters at that size: the phone
   number, centered and larger. The trust claims reappear just below the hero. */
@media (max-width: 700px){
  .utilbar .util-trust{ display:none; }
  .utilbar .wrap{ justify-content:center; }
  .utilbar{ font-size:1.1875rem; }
}

/* Interactive Medicare sign-up window calculator (/turning-65).
   Flex-based so the month/day/year fields wrap naturally on a phone and each
   control keeps a 60px minimum touch height. */
#iep-results .card p[id^="iep-"]{ font-variant-numeric:tabular-nums; }
#iep-results[hidden]{ display:none; }

/* -------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family:var(--font-body); font-size:var(--fs-body); font-weight:600; line-height:1.25;
  padding:1.05rem 1.75rem; min-height:60px; border-radius:var(--radius);
  border:2px solid transparent; text-decoration:none; cursor:pointer;
  text-align:center; transition:background-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--navy); color:#fff; }
.btn--primary:hover{ background:var(--navy-deep); color:#fff; }
.btn--secondary{ background:var(--white); color:var(--navy); border-color:var(--navy); }
.btn--secondary:hover{ background:var(--navy-tint); color:var(--navy-deep); }
.btn--green{ background:var(--green); color:#fff; }
.btn--green:hover{ background:#33573F; color:#fff; }
.btn--ghost-light{ background:transparent; color:#fff; border-color:#fff; }
.btn--ghost-light:hover{ background:#fff; color:var(--navy); }
.btn--wide{ width:100%; }
.btn-note{ display:block; font-size:var(--fs-small); color:var(--muted); margin-top:.6rem; }
.section--navy .btn-note{ color:#C9DCE8; }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:stretch; }
.btn-row--center{ justify-content:center; }
.btn-stack{ display:flex; flex-direction:column; gap:1rem; max-width:26rem; }

/* Hero action row: the two parallel CTAs, above the fold, equal width, and
   stacked full-width on a phone so neither is cramped or mis-tapped. */
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.9rem 0 1.1rem; }
.hero-actions .btn{ flex:1 1 13rem; }
.hero-phone{ font-size:1.25rem; color:var(--muted); margin:0 0 .25rem; }
.hero-phone a{ font-weight:700; white-space:nowrap; }

/* The hero text column gets the larger share: with an even split the intro
   wrapped to eight lines and pushed both CTAs below the fold. */
.hero-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:3rem; align-items:center; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:2.25rem; }
}

/* The two parallel CTAs get equal weight in a 2-up grid on desktop. */
.cta-pair{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap:1.75rem; align-items:stretch; margin-top:2.25rem;
}
.cta-card{
  display:flex; flex-direction:column; background:var(--white);
  border:2px solid var(--line); border-radius:var(--radius); padding:2rem 1.75rem;
  box-shadow:var(--shadow); height:100%;
}
.cta-card--featured{ border-color:var(--navy); }
.cta-card h3{ margin-bottom:.5rem; }
.cta-card p{ flex:1 1 auto; }
.cta-card .badge-mini{
  display:inline-block; align-self:flex-start; background:var(--green-soft); color:var(--green);
  font-size:1.125rem; font-weight:600; padding:.35rem .8rem; border-radius:999px; margin-bottom:.9rem;
}

/* --------------------------------------------------------------- badges -- */
.trust-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap:1.5rem 2rem; margin-top:2.5rem; }
.trust-item{ display:flex; gap:.9rem; align-items:flex-start; }
.trust-item svg{ flex-shrink:0; margin-top:.15rem; }
.trust-item strong{ display:block; font-size:1.1875rem; color:var(--navy); font-weight:600; }
.trust-item span{ font-size:var(--fs-small); color:var(--muted); display:block; }

.badge-line{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.badge{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--white);
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem;
  font-size:var(--fs-small); font-weight:600; color:var(--navy); box-shadow:0 1px 2px rgba(14,44,67,.05);
}
.badge svg{ flex-shrink:0; }

/* ---------------------------------------------------------------- cards -- */
.grid{ display:grid; gap:1.75rem; }
/* Tracks are min(N,100%) rather than a bare N: a fixed rem minimum is wider than
   the viewport on a narrow phone (21rem = 336px vs ~285px of usable width at
   320px), which made the page scroll sideways. min() keeps the multi-column
   layout wherever it fits and collapses to one column where it does not. */
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.85rem 1.6rem; box-shadow:0 1px 3px rgba(14,44,67,.05);
}
.card h3{ margin-bottom:.5rem; }
.card p:last-child{ margin-bottom:0; }
.card-icon{ width:48px; height:48px; margin-bottom:1rem; }
.card--step{ position:relative; padding-top:2.25rem; }
.step-num{
  position:absolute; top:-1.1rem; left:1.6rem; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:1.375rem; font-weight:600;
}

/* --------------------------------------------------------------- prompts -- */
.prompt-card{
  display:block; background:var(--white); border:2px solid var(--line); border-radius:var(--radius);
  padding:1.75rem 1.6rem; text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.prompt-card:hover{ border-color:var(--navy); transform:translateY(-3px); box-shadow:var(--shadow); color:var(--ink); }
.prompt-card h3{ margin-bottom:.4rem; font-size:1.375rem; }
.prompt-card p{ color:var(--muted); margin-bottom:.75rem; font-size:var(--fs-small); }
.prompt-card .arrow{ color:var(--blue); font-weight:600; font-size:var(--fs-small); }

/* ------------------------------------------------------------------ FAQ -- */
.faq{ max-width:56rem; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:1rem; overflow:hidden; }
.faq-item > summary{
  cursor:pointer; list-style:none; padding:1.35rem 1.5rem; font-size:1.3125rem;
  font-family:var(--font-head); font-weight:600; color:var(--navy);
  display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::after{
  content:"+"; font-family:var(--font-body); font-weight:600; font-size:1.75rem; line-height:1; color:var(--blue); flex-shrink:0;
}
.faq-item[open] > summary::after{ content:"\2013"; }
.faq-item[open] > summary{ border-bottom:1px solid var(--line); }
.faq-answer{ padding:1.4rem 1.5rem .6rem; }
.faq-answer p:last-child{ margin-bottom:1rem; }
.faq-item:hover{ border-color:var(--blue); }

/* --------------------------------------------------------------- tables -- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size:var(--fs-small); background:var(--white); }
caption{ text-align:left; font-size:var(--fs-small); color:var(--muted); padding-bottom:.75rem; }
th,td{ border:1px solid var(--line); padding:.9rem 1rem; text-align:left; vertical-align:top; }
th{ background:var(--navy-tint); color:var(--navy); font-weight:600; }

/* ----------------------------------------------------------- compliance -- */
/* The TPMO disclaimer band. Deliberately high on the page and legible:
   422.2267(e)(41)(iv) says "prominently displayed on TPMO websites",
   which rules out buried 8pt grey footer text. */
.tpmo{
  background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:2rem;
}
.tpmo-inner{ display:flex; gap:1.25rem; align-items:flex-start; max-width:64rem; }
.tpmo-inner svg{ flex-shrink:0; margin-top:.2rem; }
.tpmo h2{ font-family:var(--font-body); font-size:1.1875rem; font-weight:700; margin-bottom:.5rem; letter-spacing:.01em; text-transform:uppercase; }
.tpmo p{ font-size:var(--fs-small); color:var(--ink); margin-bottom:.65rem; max-width:none; }
.tpmo p:last-child{ margin-bottom:0; }
.tpmo .hours{ font-size:1.125rem; color:var(--muted); }

/* Pre-launch flag. Rendered only while build.py has PRELAUNCH = True. */
.prelaunch{
  background:#FFF4D6; border-bottom:3px solid #B8862F; color:#4A3A10;
  font-size:var(--fs-small); padding-block:.9rem;
}
.prelaunch .wrap{ display:flex; gap:.75rem; align-items:flex-start; }
.prelaunch strong{ color:#3A2C08; }

/* -------------------------------------------------------------- contact -- */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(19rem, 100%), 1fr)); gap:1.5rem; }
.contact-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem; display:flex; gap:1rem; align-items:flex-start;
}
.contact-item svg{ flex-shrink:0; margin-top:.15rem; }
.contact-item h3{ font-size:1.1875rem; margin-bottom:.25rem; font-family:var(--font-body); font-weight:700; }
.contact-item a{ font-size:1.25rem; font-weight:600; }
.contact-item p{ font-size:var(--fs-small); color:var(--muted); margin:0; max-width:none; }

/* --------------------------------------------------------------- footer -- */
.site-footer{ background:var(--navy-deep); color:#CFDDE6; padding-block:3.25rem 2.25rem; font-size:var(--fs-small); }
.site-footer h2{ color:#fff; font-size:1.1875rem; font-family:var(--font-body); font-weight:700; margin-bottom:1rem; }
.site-footer a{ color:#E4EDF3; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; color:#fff; }

/* Phone numbers and inline footer links must be real tap targets on a phone, not
   just text. Measured at 375px before this: the footer phone link was 110x25px —
   under half the 44px minimum — and it is the single most-wanted action for this
   audience. Inline-block with vertical padding gives it height without changing the
   visual layout. */
.site-footer a[href^="tel:"]{
  display:inline-block; padding-block:.7rem; min-height:44px;
  font-weight:600; font-size:1.125rem; line-height:1.4;
}
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(15rem, 100%), 1fr)); gap:2.25rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; max-width:none; }
.site-footer li{ margin-bottom:.7rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18); margin-top:2.5rem; padding-top:1.75rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:flex-start;
}
.footer-bottom p{ max-width:44rem; font-size:1.125rem; color:#B9CDDA; margin:0; }

/* ------------------------------------------------------- cookie notice -- */
/* Deliberately NOT a dark pattern: both choices carry identical visual weight,
   neither is filled-navy, and there is an explicit dismiss that means "no".
   The bar also reports its own height to the page so it can never cover
   content (see main.js) — a fixed overlay cropping a sentence looks broken. */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:100; background:var(--white);
  border-top:3px solid var(--navy); box-shadow:0 -6px 24px rgba(14,44,67,.16);
  padding:1.25rem 0; display:none;
}
.cookie-bar.is-visible{ display:block; }
.cookie-bar .wrap{
  display:flex; flex-wrap:wrap; gap:1.25rem 1.75rem;
  align-items:center; justify-content:space-between;
}
.cookie-bar p{ margin:0; font-size:1.125rem; max-width:33rem; }
.cookie-bar .cookie-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; }
.cookie-bar .btn{ min-height:52px; padding:.85rem 1.35rem; font-size:1.125rem; }
.cookie-close{
  background:none; border:0; cursor:pointer; color:var(--muted);
  font-size:2.25rem; line-height:1; padding:.5rem .75rem; border-radius:var(--radius-sm);
  font-family:inherit; min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.cookie-close:hover{ background:var(--navy-tint); color:var(--navy); }
@media (max-width: 760px){
  .cookie-bar .cookie-actions{ width:100%; }
  .cookie-bar .cookie-actions .btn{ flex:1 1 100%; }
  .cookie-close{ position:absolute; top:.6rem; right:.6rem; }
  .cookie-bar .wrap{ position:relative; padding-right:3.25rem; }
}

/* ----------------------------------------------------------------- misc -- */
.note-box{
  background:var(--green-soft); border-left:6px solid var(--green); border-radius:0 var(--radius) var(--radius) 0;
  padding:1.4rem 1.6rem; margin:2rem 0;
}
.note-box p:last-child{ margin-bottom:0; }
.note-box--sand{ background:var(--sand); border-left-color:var(--gold); }
.note-box--tint{ background:var(--navy-tint); border-left-color:var(--navy); }

.event-row{
  display:flex; gap:1.5rem; align-items:flex-start; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.5rem; margin-bottom:1.25rem;
}
.event-date{
  flex-shrink:0; width:5.25rem; text-align:center; background:var(--navy); color:#fff;
  border-radius:var(--radius-sm); padding:.7rem .4rem; line-height:1.1;
}
.event-date .m{ display:block; font-size:1.125rem; text-transform:uppercase; letter-spacing:.06em; }
.event-date .d{ display:block; font-size:1.75rem; font-family:var(--font-head); font-weight:600; }
.event-row h3{ font-size:1.3125rem; margin-bottom:.35rem; }
.event-row p{ margin-bottom:.5rem; font-size:var(--fs-small); }

.video-embed{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:var(--radius); background:var(--navy-deep); border:1px solid var(--line);
}
.video-embed iframe,.video-embed > *{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-embed--vertical{ padding-bottom:150%; max-width:26rem; }

.imgph{
  background:linear-gradient(135deg, var(--navy-tint) 0%, var(--green-soft) 100%);
  border:2px dashed var(--line); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:var(--fs-small); padding:2rem 1.5rem; min-height:14rem;
}
/* The hero photo slot is locked to the 4:5 portrait ratio the final headshot
   should be, so dropping a real photo in does not reflow the whole hero. */
.imgph--portrait{ aspect-ratio:4 / 5; min-height:0; max-height:34rem; }

/* Portrait hero. Source is the full-resolution studio original (7367x4911),
   cropped to 4:5 with the head in the upper third per a framing comparison of
   three candidate crops. Rounded rectangle rather than a circle: it reads as
   a professional headshot instead of a social avatar, and it gives the
   resolution somewhere to go. */
.hero-photo{
  display:flex; justify-content:center; align-items:center;
}
.hero-photo img{
  width:min(100%, 23rem); height:auto; aspect-ratio:4/5;
  object-fit:cover; object-position:center 12%;
  border-radius:18px;
  box-shadow:0 6px 14px rgba(14,44,67,.10), 0 24px 52px rgba(14,44,67,.20);
}
.portrait-inline img{
  width:min(100%, 21rem); height:auto; aspect-ratio:4/5;
  object-fit:cover; object-position:center 12%;
  border-radius:18px;
  box-shadow:0 6px 14px rgba(14,44,67,.10), 0 18px 40px rgba(14,44,67,.16);
}

.toc{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.75rem; }
.toc h2{ font-size:1.1875rem; font-family:var(--font-body); font-weight:700; margin-bottom:.9rem; }
.toc ol{ margin:0; padding-left:1.3rem; max-width:none; }
.toc li{ margin-bottom:.5rem; }

.prose h2{ margin-top:2.5rem; }
.prose h3{ margin-top:2rem; }
.prose > *:first-child{ margin-top:0; }

@media print{
  .site-header,.utilbar,.cookie-bar,.tpmo svg,.btn,.nav-toggle{ display:none !important; }
  body{ font-size:12pt; background:#fff; }
  a{ color:#000; }
}

/* ============================================================================
   MOBILE / TABLET — the reading experience on a phone
   ============================================================================
   Two problems this block fixes, both measured at 375px rather than guessed:

   1. The comparison tables rendered 993px, 2,092px and 2,507px tall with every
      cell under 130px wide. Side-by-side comparison is unusable at that width,
      so below 760px each row becomes its own block: the row label as a heading,
      then each value with its column name above it (from data-label, injected at
      build time). The table element stays semantic — screen readers still get a
      real table with row and column headers.
   2. Tap targets. The footer phone link measured 110x25px, well under the 44px
      minimum, on the action this audience most wants.

   Nothing here changes the desktop layout.
   ============================================================================ */

@media (max-width: 760px){
  /* ---- grids: one column, explicitly ----
     These used repeat(auto-fit, minmax(N,1fr)) with N up to 21rem (336px). Below
     roughly 370px of viewport the minimum track is wider than the space available,
     so the grid overflowed the page — measured at 320px, .grid--2 tracks were
     336px wide against 285px of usable width. 1fr has no minimum, so the same
     layout simply stacks. */
  .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; }
  .cta-pair{ grid-template-columns:1fr; }
  .hero-grid{ grid-template-columns:1fr; }

  /* ---- tables: stack each row into a labelled block ---- */
  table{ border:0; background:transparent; font-size:var(--fs-body); }
  /* Header row is redundant once every cell is labelled; keep it for screen
     readers only. Not display:none — that would remove it from the a11y tree. */
  table thead{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  table tbody{ display:block; }
  table tr{
    display:block; background:var(--white);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:1.15rem 1.25rem; margin-bottom:1.15rem;
  }
  table tr:last-child{ margin-bottom:0; }
  table th[scope="row"]{
    display:block; border:0; background:transparent; padding:0 0 .7rem;
    font-size:1.1875rem; color:var(--navy); line-height:1.3;
  }
  table td{
    display:block; border:0; border-top:1px solid var(--line);
    padding:.85rem 0; font-size:var(--fs-body);
  }
  table td::before{
    content:attr(data-label); display:block;
    font-size:var(--fs-small); font-weight:700; color:#2F5540;
    margin-bottom:.3rem; letter-spacing:.01em;
  }
  table caption{ font-size:var(--fs-small); padding-bottom:1rem; }

  /* ---- tap targets ---- */
  /* Inline links in body copy are exempt (they sit inside sentences), but every
     standalone control gets a 44px minimum height. */
  .btn, .btn--wide{ min-height:48px; }
  .nav a, .contact-item, summary{ min-height:44px; }

  /* ---- headline scale: keep h1 from wrapping to five lines ---- */
  :root{ --fs-h1:clamp(1.9rem, 7.4vw, 2.5rem); --fs-h2:clamp(1.6rem, 6vw, 2rem); }

  /* ---- spacing: stop the page feeling like one endless scroll ---- */
  .section{ padding-block:2.75rem; }
  .grid{ gap:1.25rem; }
  .card{ padding:1.4rem 1.35rem; }

  /* ---- hero: portrait above the copy reads better than beside it ---- */
  .hero-grid{ gap:1.75rem; }
  .hero-photo img{ width:min(100%, 15rem); }
  .hero-actions .btn{ width:100%; }
}

/* Very narrow phones (360px and below) — drop padding again rather than let
   text get crushed. */
@media (max-width: 400px){
  .section{ padding-block:2.25rem; }
  .wrap{ padding-inline:1.1rem; }
  table tr{ padding:1rem 1.05rem; }
}

/* ---------------------------------------------------------------------------
   HEADER OVERFLOW — the bug that made every page scroll sideways on a phone
   ---------------------------------------------------------------------------
   Measured: at 375px the document was 433px wide, so all 14 pages scrolled
   horizontally. Isolated by hiding elements one at a time — hiding .nav-toggle
   dropped scrollWidth from 433 to 375; hiding the whole header did the same;
   hiding the cookie bar or the table headers changed nothing.

   Cause: .brand was flex-shrink:0, so the logo plus the two-line wordmark could
   not compress, and neither could the Menu button. Together they established a
   min-content width of 433px that the viewport could not override.

   Fix: let the brand shrink and wrap (min-width:0 is what actually allows a flex
   child to go below its content width), shrink the mark and the type, and tighten
   the gaps so a 360px phone still fits two lines of wordmark.
   --------------------------------------------------------------------------- */
@media (max-width: 1000px){
  .site-header .wrap{ gap:.9rem; }
  .brand{ flex-shrink:1; min-width:0; gap:.55rem; }
  .brand-text{ min-width:0; }
  .brand-mark{ height:38px; }
  .brand-name{ font-size:1.1875rem; }
  .brand-sub{ font-size:1.125rem; }
  .nav-toggle{
    flex-shrink:0; padding:.7rem .85rem; font-size:1.125rem;
    min-height:44px; min-width:44px;
  }
}
/* Below 400px the wordmark sub-line is what pushes the header past the edge.
   Drop it — the same claim is in the hero trust row and the footer, and a
   business name plus a working Menu button matters more at this size. */
@media (max-width: 400px){
  .brand-mark{ height:34px; }
  .brand-name{ font-size:1.125rem; }
  .brand-sub{ display:none; }
  .site-header .wrap{ gap:.6rem; }
}

/* ---------------------------------------------------------------------------
   FAQ DEEP-LINK TARGET
   ---------------------------------------------------------------------------
   A card on the homepage links to /faq.html#<slug>. The script opens the matching
   <details> and marks it here, so the visitor can see which answer they asked for
   instead of hunting for it. Outline only — no movement, nothing that would make
   the page feel jumpy for someone reading carefully.
   --------------------------------------------------------------------------- */
.faq-item.is-target-flash{
  outline:3px solid #3F6B50; outline-offset:4px; border-radius:var(--radius-sm);
}
.faq-item.is-target-flash > summary{ background:rgba(63,107,80,.10); }
@media (prefers-reduced-motion: reduce){
  .faq-item.is-target-flash{ outline-width:3px; }
}

/* ---------------------------------------------------------------------------
   TAP TARGETS — standalone phone links
   ---------------------------------------------------------------------------
   Measured at 390px: the utility-bar phone link rendered 27px tall and the header
   brand 34px, both under the 44px minimum. The phone number is the action this
   audience most often wants on a phone, so it should be easy to hit. Inline links
   inside a sentence are deliberately left alone; these are standalone controls.
   --------------------------------------------------------------------------- */
.utilbar a[href^="tel:"],
.hero-phone a[href^="tel:"]{
  display:inline-block; padding-block:.55rem; min-height:44px; line-height:1.4;
}
.brand{ min-height:44px; }


/* ---------------------------------------------------------------------------
   FOOTER LINKS ON TOUCH DEVICES
   ---------------------------------------------------------------------------
   Measured on an iPad (768px): the footer nav links rendered 25px tall. The
   earlier fix only covered widths under 760px, so tablets fell through the gap.
   Touch devices span the whole range up to about 1240px, where this site switches
   to the desktop nav, so the target size applies across that same range and
   desktop keeps the compact list.
   --------------------------------------------------------------------------- */
@media (max-width: 1240px){
  .site-footer li a,
  .site-footer a[href^="tel:"],
  .site-footer a[href^="mailto:"]{
    display:inline-block; padding-block:.55rem; min-height:44px; line-height:1.4;
  }
}
/* Contact cards hold standalone actions — phone, calendar, email — that measured
   28px tall. They are not inline links inside a sentence, so they get the full
   target size on touch widths. The legal links in the footer bottom line are
   inline within a run of text and are deliberately left as-is. */
@media (max-width: 1240px){
  .contact-item a[href^="tel:"],
  .contact-item a[href^="mailto:"],
  .contact-item a[href^="http"]{
    display:inline-block; min-height:44px; padding-block:.5rem; line-height:1.4;
  }
}

/* The phone / calendar / email value line inside a contact card. Styled as a
   standalone value rather than wrapped in its own anchor, because the previous
   markup nested an <a> inside an <a> — invalid HTML that browsers silently
   re-parse, and the reason those links measured only 28px tall. */
.contact-value{ margin:0 0 .5rem; }
.contact-value a{ font-size:1.25rem; font-weight:600; }

/* ---------------------------------------------------------------------------
   REMAINING TAP TARGETS + LONG-STRING WRAPPING
   ---------------------------------------------------------------------------
   Two last groups measured under 44px at 390px:

   1. The "on this page" jump links on /how-medicare-works render as <ol><li><a>.
      They are navigation, not prose, so they get a full target. Same for the
      cited source links inside cards (medicare.gov, SHICK, insurance.ks.gov) and
      the mailto link on the schedule page — all standalone actions.
   2. An email address is an unbreakable string. At 320px,
      nick@nickheyseinsurance.com at 1.25rem is wider than its container, which is
      what still pushed the page sideways at that width. overflow-wrap lets it
      break instead of forcing the layout wider.
   --------------------------------------------------------------------------- */
a[href^="mailto:"], a[href^="tel:"], .contact-value a,
.lede a[href^="http"], p.contact-value a{
  overflow-wrap:anywhere; word-break:break-word;
}

@media (max-width: 1240px){
  /* list links are controls, not inline prose */
  main ol > li > a,
  main ul > li > a,
  .card a[href^="http"],
  .card a[href^="mailto"],
  .wrap.center > p > a[href^="mailto"]{
    display:inline-block; min-height:44px; padding-block:.45rem; line-height:1.4;
  }
}