/* =========================================================================
   Benefighter — standalone marketing site
   Design system / stylesheet
   Self-contained: system fonts only, no external requests, no build step.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Warm "paper" palette — deliberately NOT law-firm navy/gray */
  --paper:      #FBF6EC;   /* warm cream page background */
  --paper-2:    #F4EBDA;   /* deeper cream for alternating bands */
  --paper-3:    #EFE3CE;   /* card wash */
  --white:      #FFFFFF;

  --ink:        #23201B;   /* warm near-black body text (high contrast) */
  --ink-soft:   #5B5346;   /* muted warm brown-gray */
  --line:       #E4D9C4;   /* warm hairline border */

  --pine:       #1E4E3C;   /* primary: deep forest green (calm, trust, "money found") */
  --pine-deep:  #143829;
  --pine-soft:  #2F6B52;
  --pine-tint:  #E7EFE9;   /* pale green wash */

  --honey:      #E4A126;   /* accent: warm amber (optimism, "found money", the CTA) */
  --honey-deep: #B97C12;
  --honey-tint: #FBEECB;

  --clay:       #B65A38;   /* secondary accent: terracotta (human warmth) */
  --clay-tint:  #F6E2D8;

  /* Type */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing / shape */
  --maxw: 1080px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(35,32,27,.06), 0 12px 28px -12px rgba(35,32,27,.22);
  --shadow-soft: 0 1px 2px rgba(35,32,27,.05), 0 6px 18px -10px rgba(35,32,27,.16);
}

/* ---- Reset-ish -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.15rem;           /* ~18.4px base — large & readable for older eyes */
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; color: var(--pine-deep); margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
p  { margin: 0 0 1em; }
a  { color: var(--pine-soft); text-underline-offset: 3px; }
a:hover { color: var(--pine-deep); }
strong { font-weight: 700; }
img { max-width: 100%; display: block; }

/* ---- Accessibility helpers ------------------------------------------- */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--pine); color: #fff; padding: 12px 18px;
  border-radius: 0 0 10px 10px; z-index: 999; font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--honey-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---- Layout ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: clamp(48px, 8vw, 84px); }
.band-tint  { background: var(--paper-2); }
.band-pine  { background: var(--pine); color: var(--pine-tint); }
.band-pine h2, .band-pine h3 { color: #fff; }
.band-pine a { color: #fff; }

.eyebrow {
  font-family: var(--sans);
  font-size: .82rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--clay); margin: 0 0 .8em;
}
.band-pine .eyebrow { color: var(--honey); }
.tagline {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 1.3rem; color: var(--clay); margin: 0 0 .45em;
}
.tagline-icon { flex: none; }
.lede { font-size: 1.3rem; color: var(--ink-soft); max-width: 44ch; }
.center { text-align: center; }
.center .lede, .center .measure { margin-inline: auto; }
.measure { max-width: 62ch; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: 14px 26px;
  font-family: var(--sans); font-size: 1.08rem; font-weight: 800;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center; line-height: 1.2;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--honey); color: #2A2007; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--honey-deep); color: #fff; }

.btn-pine { background: var(--pine); color: #fff; }
.btn-pine:hover { background: var(--pine-deep); color: #fff; }

.btn-ghost { background: transparent; color: var(--pine-deep); border-color: var(--pine); }
.btn-ghost:hover { background: var(--pine-tint); color: var(--pine-deep); }

.band-pine .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.band-pine .btn-ghost:hover { background: rgba(255,255,255,.12); color:#fff; }

.btn-lg { min-height: 62px; font-size: 1.16rem; padding: 16px 32px; }
.btn-full { width: 100%; }

/* ---- Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,246,236,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--pine-deep); flex-shrink: 0; }
.brand:hover { color: var(--pine-deep); }
.brand svg { flex: none; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.brand-sub { display: block; font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav a.navlink { font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a.navlink:hover { color: var(--pine-deep); text-decoration: underline; }
.header-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.phone { font-weight: 800; color: var(--pine-deep); text-decoration: none; white-space: nowrap; }
.phone:hover { color: var(--pine-deep); text-decoration: underline; }
.phone span { display:block; font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); }

@media (max-width: 900px) {
  .nav .navlink { display: none; }
}
@media (max-width: 620px) {
  .phone .num { font-size: .95rem; }
  .header-cta .btn { padding: 12px 18px; min-height: 48px; font-size: 1rem; }
}
/* Below ~560px the logo + phone number + button no longer all fit on one row
   and the button was getting clipped off the right edge. Drop the phone
   number here — the "Start free check" button stays visible, and the number
   is still in the CTA note lower on the page. */
@media (max-width: 560px) {
  .header-cta .phone { display: none; }
}
/* Below ~430px (iPhone-width phones), the brand block (icon + "Benefighter" +
   "Massachusetts Senior Benefits" subtitle) plus the CTA button still don't
   fit on one row even with the phone number gone — the button was getting
   pushed off the right edge of the screen entirely (unreachable, not just
   visually clipped). Drop the subtitle and tighten everything else so the
   whole header fits on one line with room to spare. */
@media (max-width: 430px) {
  .header-inner.wrap { padding-inline: 14px; gap: 8px; }
  .brand-sub { display: none; }
  .brand svg { width: 34px; height: 34px; }
  .brand-name { font-size: 1.08rem; }
  .header-cta .btn { padding: 10px 14px; font-size: .92rem; min-height: 44px; }
}

/* ---- Hero ------------------------------------------------------------- */
.hero { padding-block: clamp(44px, 7vw, 76px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(34% 38% at 91% 2%, rgba(228,161,38,.15), transparent 62%),
    repeating-radial-gradient(circle at 0 0, transparent 0, transparent 3px, rgba(35,32,27,.028) 3px, rgba(35,32,27,.028) 3.6px);
  background-size: auto, 21px 21px;
  background-repeat: no-repeat, repeat;
  pointer-events: none;
}
.h1-swash { display: block; margin: -6px 0 18px; }

/* Hero — photo-background variant (boxer-vs-bank illustration, full-bleed)
   Scrim is tinted with --pine-deep (the site's own brand green) instead of a
   neutral near-black — near-black + gold text over a photoreal image reads
   as a generic "AI dark hero" cliche, and it made the whole top of an
   otherwise warm cream/green/gold site feel like a different, harsher
   product. Same fade shape, lighter peak opacity, brand color throughout;
   text-shadow (not blanket darkness) carries the legibility. */
.hero.hero-photo {
  background-image:
    linear-gradient(100deg, rgba(20,56,41,.82) 0%, rgba(20,56,41,.68) 32%, rgba(20,56,41,.32) 58%, rgba(20,56,41,.05) 78%),
    url("images/hero-boxer.jpg");
  background-size: cover;
  background-position: right center;
}
.hero.hero-photo::before { content: none; }
.hero.hero-photo .eyebrow { color: var(--honey); text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 14px rgba(0,0,0,.45); }
.hero.hero-photo h1,
.hero.hero-photo .tagline span { color: var(--paper); text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 20px rgba(0,0,0,.55); }
.hero.hero-photo .lede { color: rgba(251,246,236,.92); text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 1px 12px rgba(0,0,0,.45); }
.hero.hero-photo .hero-chips { color: rgba(251,246,236,.95); text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 1px 10px rgba(0,0,0,.4); }
.hero.hero-photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero.hero-photo .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 820px) {
  .hero.hero-photo {
    /* Was a near-opaque (.80-.90) scrim over the ENTIRE image on mobile —
       it made the boxer artwork invisible (the whole point of the photo).
       Fade from dark at the top (behind the eyebrow/headline) down to much
       lighter toward the bottom (behind the CTA), so the boxer's fist/face
       actually show through, and rely on stronger per-line text-shadow
       below for legibility instead of blanket darkness. Brand green, not
       neutral black — see the desktop comment above. */
    background-image:
      linear-gradient(180deg, rgba(20,56,41,.80) 0%, rgba(20,56,41,.62) 32%, rgba(20,56,41,.36) 62%, rgba(20,56,41,.20) 100%),
      url("images/hero-boxer.jpg");
    background-position: 75% 30%;
  }
  /* Tight, high-contrast shadow anchors every line so text stays readable
     even where the lighter overlay lets the busy photo show through. */
  .hero.hero-photo .eyebrow,
  .hero.hero-photo h1,
  .hero.hero-photo .tagline span,
  .hero.hero-photo .subhead,
  .hero.hero-photo .lede,
  .hero.hero-photo .cta-note,
  .hero.hero-photo .hero-chips {
    text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.6);
  }
}
.hero-grid {
  position: relative; z-index: 1;
}
/* Text column is deliberately capped in width (not full-bleed) so it stays
   inside the dark scrim on the left and never runs into the boxer/building
   artwork on the right. */
.hero-copy { max-width: 620px; }
.hero h1 { margin-bottom: .3em; }
.hero h1.hero-slogan {
  display: flex; align-items: center; gap: 14px;
  font-style: italic;
}
.hero h1.hero-slogan .tagline-icon { flex: none; }
.subhead {
  font-family: var(--serif); font-weight: 700; line-height: 1.32;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  color: var(--pine-deep); margin: 0 0 .6em; max-width: 38ch;
  text-wrap: balance;
}
.hero.hero-photo .subhead { color: var(--paper); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero .lede { max-width: 46ch; margin-bottom: 1.5em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 22px; }
.hero-cta-primary { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.btn-xl { min-height: 68px; font-size: 1.24rem; padding: 18px 38px; }
.cta-note { font-size: .92rem; font-weight: 700; color: var(--honey-deep); }
.hero.hero-photo .cta-note { color: var(--honey); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.link-secondary { font-weight: 700; color: var(--pine-deep); text-decoration: underline; text-underline-offset: 3px; }
.link-secondary:hover { color: var(--pine); }
.hero.hero-photo .link-secondary { color: #fff; }
.hero.hero-photo .link-secondary:hover { color: var(--paper); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: .98rem; color: var(--ink-soft); }
.chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.chip svg { flex: none; }

/* "100% free" promise in the hero — Ryan (2026-09-25): make it unmistakable
   that you can start clicking without paying, without a card, and get
   answers right away. Replaced the $179 chips that used to sit here (paid-
   product details directly under the FREE button muddied the message; the
   $179 card is still in its own band just below). */
.free-promise {
  margin-top: 6px; max-width: 560px;
  background: rgba(251,246,236,.10); border: 1px solid rgba(251,246,236,.35);
  border-radius: 14px; padding: 16px 18px 12px;
}
.free-promise-h { font-weight: 800; font-size: 1.05rem; margin: 0 0 8px; color: var(--honey); }
.free-promise ul { list-style: none; margin: 0; padding: 0; }
.free-promise li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.02rem; line-height: 1.45; margin-bottom: 8px; color: var(--paper); }
.free-promise li svg { flex: none; margin-top: 2px; }
.free-promise strong { color: #fff; }
.hero.hero-photo .free-promise-h,
.hero.hero-photo .free-promise li { text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 1px 10px rgba(0,0,0,.4); }
.hero.hero-photo .free-promise { background: rgba(20,56,41,.55); backdrop-filter: blur(2px); }

/* ---- "Look here" motion on the FREE parts (Ryan 2026-09-25: "make it
   sparkle so they know the spot they're supposed to click") -------------
   1) a hand-drawn honey circle draws itself around "free." once, on load
   2) the main free-check buttons pulse a soft glow ring + a shine sweeps
      across them every few seconds
   3) three small twinkling sparkles around the hero button
   All of it is switched OFF for visitors who ask their device for reduced
   motion (see the @media block at the end of this section). */
.free-mark { position: relative; display: inline-block; color: var(--honey); white-space: nowrap; }
.free-circle { position: absolute; left: -14%; top: -16%; width: 128%; height: 136%; overflow: visible; pointer-events: none; }
.free-circle path {
  fill: none; stroke: var(--honey); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: freeDraw 1.1s .6s cubic-bezier(.6,.05,.3,1) forwards;
}
@keyframes freeDraw { to { stroke-dashoffset: 0; } }

.sparkle-wrap { position: relative; display: inline-block; }
.cta-glow { position: relative; overflow: hidden; isolation: isolate; animation: ctaPulse 2s ease-out infinite; }
.cta-glow::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  transform: skewX(-20deg); animation: ctaShine 3.8s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,209,102,.9), 0 0 18px 2px rgba(255,209,102,.55), var(--shadow-soft); }
  70%  { box-shadow: 0 0 0 22px rgba(255,209,102,0), 0 0 18px 2px rgba(255,209,102,.25), var(--shadow-soft); }
  100% { box-shadow: 0 0 0 0 rgba(255,209,102,0), 0 0 18px 2px rgba(255,209,102,.55), var(--shadow-soft); }
}
@keyframes ctaShine { 0%, 55% { left: -70%; } 85%, 100% { left: 135%; } }

.spark {
  position: absolute; width: 24px; height: 24px; pointer-events: none;
  background: #FFF3C4;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 6px rgba(255,214,110,1)) drop-shadow(0 0 2px #fff);
  opacity: 0; animation: twinkle 2.4s ease-in-out infinite;
}
.spark.s1 { top: -16px; left: -12px; }
.spark.s2 { top: -22px; right: 22%; width: 18px; height: 18px; animation-delay: .6s; }
.spark.s3 { bottom: -14px; right: -12px; width: 28px; height: 28px; animation-delay: 1.2s; }
.spark.s4 { bottom: -18px; left: 30%; width: 16px; height: 16px; animation-delay: 1.8s; }
.spark.s5 { top: 30%; right: -20px; width: 14px; height: 14px; animation-delay: .3s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .free-circle path { animation: none !important; stroke-dashoffset: 0; }
  .cta-glow { animation: none !important; }
  .cta-glow::after, .spark { display: none; }
}

/* ---- Rotating bullet lists (Ryan 2026-09-25: "too much to read — make the
   bullets show up and disappear to save space"). One item at a time, fades
   up, advances every few seconds; pauses while hovered/focused/touched so a
   slow reader is never rushed; dots let you jump. Without JS, or with
   prefers-reduced-motion, every item is simply shown as a normal list. ----- */
ul.rotator.is-rotating { position: relative; margin-bottom: 0; }
ul.rotator.is-rotating > li {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}
ul.rotator.is-rotating > li.is-active { opacity: 1; transform: none; pointer-events: auto; }
.rot-dots { display: flex; gap: 8px; margin-top: 10px; }
.rot-dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid currentColor; background: transparent; opacity: .55;
}
.rot-dots button[aria-current="true"] { background: currentColor; opacity: 1; }
.free-promise .rot-dots { color: var(--honey); }
.freecheck .rot-dots { color: var(--pine); justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  ul.rotator.is-rotating > li { transition: none; }
}
/* programs list: names + worth only — descriptions were most of the words */
.programs .p-desc { display: none; }

/* Header tagline under the logo (replaces "Massachusetts Senior Benefits") */
.brand-sub.brand-tag { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 700; color: var(--clay); margin-top: 4px; }

/* Full Benefits Check card — its own band directly below the hero now,
   instead of sitting inside the hero and covering the artwork. */
.full-check-band { padding-top: clamp(28px, 5vw, 48px); }
.hero-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 26px 22px; position: relative;
}
.hero-card--band { max-width: 640px; margin-inline: auto; }
.hero-card .card-flag {
  position: absolute; top: -14px; left: 22px;
  background: var(--clay); color: #fff; font-weight: 800; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.hero-card h2 { font-size: 1.3rem; margin-top: 6px; }
.hero-card .price { font-family: var(--serif); font-size: 3rem; color: var(--pine); line-height: 1; }
.hero-card .price small { font-family: var(--sans); font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.checklist { list-style: none; padding: 0; margin: 14px 0 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 1.02rem; }
.checklist li svg { flex: none; margin-top: 4px; }

@media (max-width: 620px) {
  .hero-cta { flex-direction: column; align-items: flex-start; }
}

/* ---- Stat band -------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-soft);
}
.stat .num { font-family: var(--serif); font-size: 2.5rem; color: var(--honey-deep); line-height: 1; display:block; }
.stat .lbl { display: block; margin-top: 8px; color: var(--ink); font-weight: 600; }
.stat .sub { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }

/* ---- Feature cards ---------------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-soft); height: 100%; position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card::after {
  content: attr(data-n); position: absolute; top: 16px; right: 20px;
  font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--line);
}
.grid-4 .card:nth-child(1) { transform: rotate(-.6deg); }
.grid-4 .card:nth-child(2) { transform: rotate(.5deg); }
.grid-4 .card:nth-child(3) { transform: rotate(-.4deg); }
.grid-4 .card:nth-child(4) { transform: rotate(.6deg); }
.grid-4 .card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-top: 6px; }
.card p:last-child { margin-bottom: 0; }
.card-ico {
  width: 52px; height: 52px; border-radius: 42% 58% 53% 47% / 51% 46% 54% 49%;
  display: grid; place-items: center;
  background: var(--pine-tint); color: var(--pine); margin-bottom: 14px;
}
.card-ico.honey { background: var(--honey-tint); color: var(--honey-deep); border-radius: 56% 44% 41% 59% / 46% 56% 51% 49%; }
.card-ico.clay  { background: var(--clay-tint);  color: var(--clay); border-radius: 44% 56% 60% 40% / 56% 44% 46% 54%; }
.card-ico.ink   { background: var(--pine-deep);  color: var(--paper); border-radius: 50% 50% 44% 56% / 55% 51% 49% 45%; }

/* ---- Guarantee band --------------------------------------------------- */
.guarantee { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.guarantee .seal {
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--honey); color: var(--pine-deep);
  display: grid; place-items: center; text-align: center; flex: none;
  font-family: var(--serif); font-weight: 700; line-height: 1.05;
  box-shadow: 0 0 0 8px rgba(228,161,38,.22);
}
.guarantee .seal b { font-size: 1.5rem; }
.guarantee .seal span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.guarantee h2 { margin-bottom: .25em; }
.guarantee p { margin-bottom: 0; font-size: 1.18rem; }
@media (max-width: 620px) { .guarantee { grid-template-columns: 1fr; text-align: center; } .guarantee .seal { margin-inline: auto; } }

/* ---- Programs list ---------------------------------------------------- */
.programs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; list-style: none; padding: 0; margin: 0; }
.programs li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.programs .pin {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--pine-tint); color: var(--pine); display: grid; place-items: center; font-weight: 800;
}
.programs .p-name { font-weight: 700; color: var(--pine-deep); display:block; }
.programs .p-worth { color: var(--clay); font-weight: 700; }
.programs .p-desc { color: var(--ink-soft); font-size: 1rem; }
@media (max-width: 760px) { .programs { grid-template-columns: 1fr; } }

/* ---- How it works steps ---------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.step { position: relative; padding-top: 8px; }
.step .n {
  width: 46px; height: 46px; border-radius: 50%; background: var(--pine); color: #fff;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 700;
  display: grid; place-items: center; margin-bottom: 14px;
}
.step h3 { font-size: 1.2rem; }
.step p { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .steps { grid-template-columns: 1fr; } }

/* ---- Founders --------------------------------------------------------- */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.founder {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
}
.founder .portrait {
  aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--pine-soft), var(--pine-deep));
  display: grid; place-items: center; color: rgba(255,255,255,.9); position: relative;
}
.founder .portrait.clay { background: linear-gradient(135deg, #C97A54, var(--clay)); }
.founder .portrait .mono { font-family: var(--serif); font-size: 3.4rem; font-weight: 700; }
/* Real photo, background removed (cut out of a family photo with macOS Vision
   person segmentation) and stood in front of the colour panel — a layered
   look instead of a boxed headshot. Bottom edge of the cutout sits on the
   bottom of the panel so the crop line reads as intentional. */
.founder .portrait.has-photo { overflow: hidden; }
.founder .portrait img.cutout {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 96%; width: auto; max-width: none;
  filter: drop-shadow(0 10px 18px rgba(35,32,27,.28));
}
.founder .portrait .ph-note { position:absolute; bottom:10px; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; opacity:.8; }
.founder .body { padding: 22px 24px 24px; }
.founder .role { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }
.founder h3 { margin: 3px 0 .4em; }
.founder p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .founders { grid-template-columns: 1fr; } }

/* NP card: our own checklist illustration tilted behind her, a credential
   badge in front — three layers on the panel instead of a flat headshot. */
.np-panel .np-form {
  position: absolute; left: 6%; top: auto; bottom: 12%; width: 34%; max-width: 190px; height: auto; z-index: 0;
  transform: rotate(-8deg); filter: drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
/* Base cutout placement lives here (not under .founder) since the NP card
   moved out of the old founders grid: she stands on the panel's bottom edge,
   right of centre, with the checklist to her left so it never covers her face. */
.np-panel img.cutout {
  position: absolute; bottom: 0; right: 9%; left: auto; transform: none;
  height: 94%; width: auto; max-width: none; z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(35,32,27,.28));
}
.np-badge {
  position: absolute; right: 4%; bottom: 7%; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--honey); color: #2A2007; font-weight: 800; font-size: .82rem; line-height: 1.15;
  padding: 8px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  max-width: 44%;
}
.np-badge svg { flex: none; }
@media (max-width: 420px) { .np-badge { font-size: .74rem; padding: 7px 10px; } }

/* ---- Nurse practitioner feature (directly under the hero) ------------- */
.np-feature-band { padding-block: clamp(34px, 5vw, 56px); }
.np-feature {
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.1fr; align-items: stretch;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden; max-width: 940px; margin-inline: auto;
}
.np-feature .portrait {
  position: relative; min-height: 380px; overflow: hidden;
  background: linear-gradient(135deg, var(--pine-soft), var(--pine-deep));
}
.np-feature .np-copy { padding: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.np-feature .np-copy h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .35em; }
.np-feature .np-copy p:last-child { margin: 0; font-size: 1.15rem; color: var(--ink-soft); }
@media (max-width: 720px) {
  .np-feature { grid-template-columns: 1fr; }
  .np-feature .portrait { min-height: 0; aspect-ratio: 3 / 2; }
}

/* ---- Free check promo (homepage) -------------------------------------- */
.freecheck {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); padding: 26px 28px 30px;
}
.freecheck .checklist { margin-top: 0; }
.freecheck .checklist li { font-size: 1.08rem; }
@media (max-width: 520px) { .freecheck { padding: 20px 18px 24px; } .freecheck .btn-xl { width: 100%; padding-inline: 18px; } }

/* ---- Pre-check widget ------------------------------------------------- */
.precheck {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.precheck .pc-head { background: var(--pine); color: #fff; padding: 22px 26px; }
.precheck .pc-head h3 { color: #fff; margin-bottom: .2em; }
.precheck .pc-head p { color: var(--pine-tint); margin: 0; font-size: 1rem; }
.precheck .pc-body { padding: 24px 26px; }
.pc-q { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 16px 2px; min-width: 0; }
.pc-q:first-child { padding-top: 4px; }
.pc-q:last-of-type { border-bottom: 0; }
.pc-q legend, .pc-q .q { font-weight: 700; color: var(--pine-deep); padding: 0; margin-bottom: 10px; font-size: 1.08rem; }
.pc-options { display: flex; flex-wrap: wrap; gap: 10px; }
.pc-opt {
  position: relative;
}
.pc-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pc-opt span {
  display: inline-block; padding: 11px 18px; border: 2px solid var(--line); border-radius: 999px;
  font-weight: 600; cursor: pointer; background: var(--paper); min-height: 46px; line-height: 1.4;
  transition: border-color .12s, background .12s;
}
.pc-opt input:hover + span { border-color: var(--pine-soft); }
.pc-opt input:checked + span { border-color: var(--pine); background: var(--pine-tint); color: var(--pine-deep); }
.pc-opt input:focus-visible + span { outline: 3px solid var(--honey-deep); outline-offset: 2px; }

.pc-actions { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pc-result {
  margin-top: 22px; padding: 22px; border-radius: var(--radius-sm);
  background: var(--honey-tint); border: 1px solid #E8D08A;
}
.pc-result[hidden] { display: none; }
.pc-result h4 { font-family: var(--serif); color: var(--pine-deep); font-size: 1.35rem; margin: 0 0 .3em; }
.pc-result .est { font-family: var(--serif); font-size: 2.2rem; color: var(--honey-deep); line-height: 1; }
.pc-hits { list-style: none; padding: 0; margin: 14px 0 0; }
.pc-hits li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.pc-hits li svg { flex: none; margin-top: 4px; }
.pc-disclaimer { font-size: .92rem; color: var(--ink-soft); margin-top: 16px; }

/* ---- Form ------------------------------------------------------------- */
.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(24px, 4vw, 40px);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; color: var(--pine-deep); margin-bottom: 7px; }
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1.08rem; color: var(--ink);
  padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); min-height: 52px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pine-soft); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.req { color: var(--clay); }
.form-note { font-size: .95rem; color: var(--ink-soft); margin-top: 8px; }
.form-msg {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--pine-tint); border: 1px solid #BFD6C7; color: var(--pine-deep); font-weight: 600;
}
.form-msg[hidden] { display: none; }

/* ---- FAQ (native details/summary, no JS) ------------------------------ */
.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  margin-bottom: 12px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 54px 18px 22px; position: relative;
  font-family: var(--serif); font-size: 1.18rem; font-weight: 700; color: var(--pine-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.7rem; font-weight: 400; color: var(--honey-deep); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; } /* en dash */
.faq .answer { padding: 0 22px 20px; color: var(--ink); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---- Final CTA -------------------------------------------------------- */
.final-cta { text-align: center; }
.final-cta .btn { margin-top: 8px; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { background: var(--pine-deep); color: #CBDDD2; padding-block: 48px 34px; font-size: .98rem; }
.site-footer a { color: #fff; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; margin-bottom: 30px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { color: #A9C3B5; max-width: 34ch; }
.footer-col h4 { color: #fff; font-family: var(--sans); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #CBDDD2; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.disclaimer {
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 22px;
  color: #93AEA0; font-size: .88rem; line-height: 1.6;
}
.disclaimer strong { color: #CBDDD2; }
.disclaimer p { margin-bottom: .8em; }
.disclaimer p:last-child { margin-bottom: 0; }
@media (max-width: 720px) { .footer-top { grid-template-columns: 1fr; gap: 24px; } }

/* ---- Utilities -------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-gap > * + * { margin-top: 1em; }
.pill {
  display:inline-block; background: var(--pine-tint); color: var(--pine-deep);
  font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}