/* My Medicare Solution by TA — funnel design system.
   Senior-first: 19px body, 48px+ tap targets, WCAG AA contrast, one action per screen. */
/* See docs/DESIGN.md for why these values are what they are.
   Token NAMES are unchanged from the navy/gold era on purpose — every rule below and several
   inline styles in the HTML reference them, so the redesign remaps values rather than renaming.
   --navy and --gold now hold the ink and the reserved window colour respectively. */
/* "Ink" — chosen from the six directions on 2026-09-29. White ground, near-black ink, one
   saturated blue that appears only where something is actionable, and one brick red reserved
   entirely for the late-enrollment penalty. Very high contrast on purpose: it is the direction
   that reads most easily at 64, and the one that looks least like a financial-services template. */
:root {
  --navy: #0d1117;        /* near-black, barely blue. Reads as black, never as tinted grey */
  --navy-2: #2b3644;
  --gold: #1d4ed8;        /* RESERVED: actions, and the open enrollment window. Nothing else */
  --gold-soft: #c3d2f7;
  --gold-wash: #e8edfc;
  --ground: #ffffff;
  --panel: #ffffff;
  --ink: #0d1117;
  --ink-soft: #4d5866;
  --line: #d7dce3;
  --ok: #1d4ed8;
  --late: #b42318;        /* RESERVED: the penalty zone after the window closes */
  --warn-wash: #fdeceb;
  --focus: #0b5ed7;
  /* Bricolage Grotesque for display: a grotesque with real character at large sizes and none of
     the fragility of a high-contrast serif at 64-year-old reading distance. Figtree for everything
     else — open apertures, unambiguous 1/l/I.
     Public Sans was dropped deliberately: it is the US government's own typeface, and these pages
     must never imply a government connection. */
  --serif: 'Bricolage Grotesque', 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
/* Kills double-tap-to-zoom on anything you tap, which is what makes a quiz feel jumpy on a phone:
   two quick answers in a row and the browser reads it as a double tap and zooms the page instead.
   `manipulation` keeps pinch-zoom, so nobody who needs to magnify the page loses it — only the
   accidental zoom goes. It also removes the legacy 300ms click delay. */
button, a, label, input, select, textarea, summary, .choice, .opt { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 19px; line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-2); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Header */
.bar { background: var(--navy); color: #fff; }
.bar-in { max-width: 1040px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 9px; background: #fff; padding: 3px; }
.brand b { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: 0.01em; }
.brand small { display: block; font-size: 12px; color: var(--gold-soft); letter-spacing: 0.12em; text-transform: uppercase; }
.call { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; white-space: nowrap; border: 2px solid var(--gold); border-radius: 999px; padding: 8px 16px; }
.lang { color: var(--gold-soft); font-size: 15px; margin-right: 10px; }

/* Layout */
.wrap { max-width: 1040px; margin: 0 auto; padding: 28px 18px 60px; display: grid; gap: 28px; grid-template-columns: 1fr; }
/* Left: headline, lede, video. Right: the question, the dates it is for, then who is asking.
   Near-even columns because the quiz now lives on the right and needs room for 60px inputs. */
@media (min-width: 900px) { .wrap { grid-template-columns: 1.02fr 0.98fr; align-items: start; } }
.col-r { display: grid; gap: 20px; align-content: start; }

h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 6vw, 52px); line-height: 1.08; margin: 0 0 14px; text-wrap: balance; letter-spacing: -0.015em; }
/* No colour change inside a headline. Accenting one phrase is the commonest tell of a generated
   page, and if the sentence needs a highlight to be interesting it needs rewriting instead. */
h1 em { font-style: normal; color: inherit; }

/* ---- The enrollment window -------------------------------------------------------------------
   The one bold thing on the page (docs/DESIGN.md). Seven months drawn as a ruler: three before
   the month they turn 65, the birthday month, three after — then the penalty zone.
   Static until they answer "when do you turn 65?", then funnel.js fills in the real months. */
.iepband { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px 16px; margin: 0 0 22px; }
.iepband-h { font-size: 16px; font-weight: 600; color: var(--ink-soft); margin: 0 0 14px; }
.iepband-h b { color: var(--ink); font-weight: 700; }
/* Seven equal months plus a narrower cliff-edge cell. The open months butt together so the window
   reads as ONE continuous span rather than eight separate blocks; the only gap in the whole bar is
   the one right before the penalty, which is the point being made. */
.months { display: grid; grid-template-columns: repeat(7, 1fr) 0.8fr; list-style: none; margin: 0; padding: 0; }
/* 11.5px and tight, because eight labels now share the narrower right-hand column. "3 months
   before" wrapped to three lines at 13px, which made the ruler unreadable — the one thing it
   cannot afford to be. The markup says "3 mo" rather than "3 months" for the same reason. */
.months li { position: relative; text-align: center; font-size: 11.5px; line-height: 1.25; padding: 28px 2px 0; color: var(--ink-soft); letter-spacing: -0.01em; }
.months li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--gold);
}
.months li:first-child::before { border-radius: 3px 0 0 3px; }
.months li[data-in]:last-of-type::before { border-radius: 0 3px 3px 0; }
/* The break before the penalty — the only gap in the bar. */
.months li[data-late] { padding-left: 10px; }
.months li[data-late]::before {
  left: 10px; border-radius: 3px;
  background: repeating-linear-gradient(135deg, var(--late) 0 5px, #ad4034 5px 10px);
}
.months li[data-birth]::before { background: var(--ink); }
.months li[data-birth] { font-weight: 700; color: var(--ink); }
.months li[data-late] { color: var(--late); font-weight: 600; }
.months li b { display: block; font-weight: 700; color: var(--ink); }
.months li[data-late] b { color: var(--late); }
.iepband-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-soft); }
.iepband-key li { display: flex; align-items: center; gap: 7px; }
.iepband-key i { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.iepband-key .k-open { background: var(--gold); }
.iepband-key .k-late { background: repeating-linear-gradient(135deg, var(--late) 0 4px, #b5453a 4px 8px); }
@media (max-width: 520px) {
  .months { grid-template-columns: repeat(4, 1fr); gap: 3px 4px; row-gap: 10px; }
}
.lede { font-size: 21px; color: var(--ink-soft); margin: 0 0 20px; max-width: 34ch; }
h2 { font-family: var(--serif); font-size: 27px; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.promise { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 8px; list-style: none; font-weight: 600; }
.promise li::before { content: "✓ "; color: var(--ok); }

/* Quiz card */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 38, 61, 0.08); padding: 24px; }
.progress { height: 8px; background: var(--ground); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.progress i { display: block; height: 100%; background: var(--gold); width: 0; transition: width 0.35s ease; }
.step { animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } .progress i { transition: none; } }
.stepnum { font-size: 15px; color: var(--ink-soft); margin: 0 0 6px; }
label.field { display: block; font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=tel], input[type=email], select {
  width: 100%; font: inherit; font-size: 20px; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 10px; padding: 13px 14px; min-height: 56px;
}
input:focus, select:focus { border-color: var(--navy-2); outline: none; box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.2); }
.row2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.choices { display: grid; gap: 10px; margin-top: 12px; }
.choice {
  font: inherit; font-size: 20px; font-weight: 600; text-align: left; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 16px 18px; min-height: 60px; cursor: pointer;
}
/* Hover only where there is a real pointer. On a phone the browser applies :hover to whatever sits
   under the finger after a tap — and the next step puts a new answer in exactly that spot — so the
   visitor arrived at a question with an answer that looked already chosen, because hover and
   selected share this colour. Found by Playwright on an iPhone 13 profile (hover: none). */
@media (hover: hover) and (pointer: fine) {
  .choice:hover { border-color: var(--navy-2); background: var(--gold-wash); }
}
.choice[aria-pressed=true] { border-color: var(--navy); background: var(--gold-wash); }
/* Multi-select: a checkbox square so it reads as "pick several" */
[data-multi] .choice { display: flex; align-items: center; gap: 12px; }
[data-multi] .choice::before { content: ""; flex: none; width: 24px; height: 24px; border: 2px solid var(--ink-soft); border-radius: 6px; background: #fff; }
[data-multi] .choice[aria-pressed=true]::before { content: "✓"; display: grid; place-items: center; background: var(--navy); border-color: var(--navy); color: #fff; font-size: 16px; line-height: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px;
  font: inherit; font-size: 21px; font-weight: 700; color: #fff; background: var(--gold);
  border: 0; border-radius: 12px; padding: 14px 22px; cursor: pointer; margin-top: 18px; text-decoration: none;
  transition: background 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.btn:hover { background: #1740b8; }
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background 160ms ease; } .btn:active { transform: none; } }
.btn[disabled] { opacity: 0.55; cursor: default; }
.back, .skip { background: none; border: 0; font: inherit; font-size: 17px; color: var(--ink-soft); margin-top: 12px; cursor: pointer; text-decoration: underline; padding: 6px 0; }
.err { color: #9b1c1c; font-weight: 600; font-size: 17px; margin: 8px 0 0; min-height: 1em; }
/* Darel's intro video, when one is set in the Control Room. The slot ships hidden and empty, so a
   page with no video has no gap where one would be. */
/* The drawn Medicare card beside "have you received your card?". Small on purpose — it is there so
   the question is recognisable at a glance, not to be studied. It draws itself in once, gently,
   because a card that lands is a card you look at. */
/* 2026-10-05: redrawn to match the current card (blue header, bilingual labels, red stripe), and
   step 4 compacted ("it looks too large"): the line and the card sit side by side. */
.cardq { display: grid; grid-template-columns: 1fr minmax(120px, 210px); gap: 14px; align-items: center; margin: 4px 0 2px; }
.cardq > p { margin: 0; }
.cardpic { display: block; width: 100%; margin: 0;
  filter: drop-shadow(0 6px 14px rgba(13, 17, 23, 0.14)); }
.cardpic-b { animation: cardin 640ms cubic-bezier(.23, 1, .32, 1) 80ms both; transform-origin: 30% 70%; }
@keyframes cardin { from { opacity: 0; transform: rotate(-3.5deg) translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cardpic-b { animation: none; } }
@media (max-width: 599px) {
  .cardq { grid-template-columns: 1fr 9.5rem; gap: 0.75rem; }
  .cardq > p { font-size: 0.9375rem; line-height: 1.4; }
  .step:has(.cardq) h2 { font-size: 1.25rem; line-height: 1.2; margin-bottom: 0.375rem; }
  .step:has(.cardq) .iepsay { font-size: 0.9375rem; line-height: 1.4; padding: 0.5rem 0.75rem; margin-bottom: 0.625rem; }
  .step:has(.cardq) .choices { gap: 0.4rem; margin-top: 0.75rem; }
  .step:has(.cardq) .choice { min-height: 2.75rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
}

.videoslot { margin: 0 0 20px; position: relative; }
/* Our own player for uploaded videos (brand.js buildPlayer): no browser control bar, one button
   in the middle at a time. "Tap for sound" while it autoplays muted — deliberately loud, because a
   silent video of someone talking reads as broken unless the way to hear it is obvious — and a
   round play button whenever it is paused, finished or blocked. */
.vplayer { position: relative; border-radius: var(--radius); overflow: hidden; }
.vplayer .videoframe { cursor: pointer; }
.vbtn {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; color: #fff; border: 0; cursor: pointer;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background 160ms ease;
}
.vbtn svg { width: 26px; height: 26px; flex: none; }
.vbtn-sound { font-size: 19px; padding: 14px 24px; min-height: 56px; border-radius: 999px; background: rgba(13, 17, 23, 0.82); backdrop-filter: blur(4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.vbtn-play { width: 76px; height: 76px; border-radius: 50%; background: var(--gold); box-shadow: 0 8px 24px rgba(13, 17, 23, 0.35); }
.vbtn-play svg { width: 34px; height: 34px; margin-left: 4px; }
.vbtn:active { transform: translate(-50%, -50%) scale(0.95); }
@media (hover: hover) and (pointer: fine) { .vbtn-sound:hover { background: rgba(13, 17, 23, 0.94); } .vbtn-play:hover { background: #1740b8; } }
@media (prefers-reduced-motion: reduce) { .vbtn { transition: background 160ms ease; } .vbtn:active { transform: translate(-50%, -50%); } }
@media (max-width: 599px) { .vbtn-sound { font-size: 17px; padding: 12px 20px; min-height: 52px; } .vbtn-play { width: 68px; height: 68px; } }
.videohead { margin: 0 0 8px; font-weight: 700; font-size: 18px; color: var(--navy); }
.videoframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius);
  background: #0c1626; box-shadow: 0 2px 10px rgba(20, 38, 61, 0.12);
}

/* The reply to the previous answer, at the top of the next question. Deliberately quiet: it is
   Darel acknowledging what they said, not a callout box competing with the question itself. */
.ack {
  margin: 0 0 14px; padding: 11px 15px; font-size: 18px; line-height: 1.45; color: var(--navy);
  background: var(--gold-wash); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
}
/* The carrier search: three buttons cover most people, and everyone else types the name on their
   card. A county can have 22 companies and 22 full-width buttons on a phone is a wall, not a
   question. */
.carriersearch { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.more { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.carriersearch input[type=text] {
  font: inherit; font-size: 19px; width: 100%; min-height: 58px; padding: 14px 16px;
  border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink);
}
.carriersearch input:focus { border-color: var(--navy-2); outline: none; box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.2); }
[data-carrier-results] { margin-top: 10px; }
.nomatch { margin: 4px 0 0; font-size: 16px; color: var(--ink-soft); }
/* The always-available answers (Original Medicare, Medigap, another company, not sure) sit slightly
   apart from the company names, so the list reads as "your company … or one of these". */
.choices.tail { gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.choices.tail .choice { font-size: 18px; font-weight: 600; min-height: 54px; color: var(--ink-soft); }
.choices.tail .choice[aria-pressed=true] { color: var(--ink); }

/* County result */
/* The county line and the TPMO disclaimer under the ZIP field.
   Deliberately QUIET: it was an 18px tinted box with 21px bold, and it pulled the eye off the
   quiz. It is a legal notice, not a selling point. But it is not hidden and not collapsed —
   CMS requires this disclaimer to be prominently displayed, so it stays plain, readable and
   always present; it just stops shouting. */
.county { margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.county b { font-size: 15px; color: var(--ink); font-weight: 700; }
.county.outside { color: var(--ink); font-size: 16px; border-top: 0; padding: 12px 14px; background: var(--warn-wash); border-radius: 10px; }
.outside { background: var(--warn-wash); border-color: #efd28c; }

/* Consent */
.consent { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.consent input { width: 26px; height: 26px; margin: 2px 0 0; }
/* The contact step's consent, asked to be small. Same checkbox, same exact words — the text is
   what the lead record stores as the consent the visitor gave — just set as fine print. The box
   itself stays a comfortable 22px tap target. */
.consent.consent-small { font-size: 12.5px; line-height: 1.45; grid-template-columns: 24px 1fr; gap: 8px; margin-top: 14px; }
.consent.consent-small input { width: 22px; height: 22px; }

/* "Good news, Maria — your enrollment window opens December 1, 2026…" above the card question. */
.iepsay { margin: 0 0 12px; padding: 10px 13px; border-left: 3px solid var(--gold); background: var(--gold-wash);
  border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.iepsay b { font-weight: 700; }
.donesub { margin: 6px 0 14px; color: var(--ink-soft); font-size: 18px; }

/* "Show 14 more in Harris County" under the three biggest carriers. */
.showmore { display: inline-block; margin: 10px 0 0; padding: 10px 4px; min-height: 44px; background: none; border: 0;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--gold); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }

/* Trust column */
.agent { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
.agent img { width: 112px; height: 112px; object-fit: cover; object-position: center 25%; border-radius: 50%; border: 3px solid var(--gold-soft); }
.agent b { font-family: var(--serif); font-size: 22px; display: block; }
.agent span { color: var(--ink-soft); font-size: 16px; }
.facts { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.facts li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; font-size: 17px; }
.facts li i { font-style: normal; width: 36px; height: 36px; border-radius: 50%; background: var(--gold-wash); color: var(--navy); display: grid; place-items: center; font-weight: 700; }
/* Unnumbered variant: a short rule instead of a counter, because the items are not a sequence. */
.facts-plain li { grid-template-columns: 1fr; padding-left: 14px; border-left: 2px solid var(--line); }
.window { margin-top: 12px; border-left: 4px solid var(--gold); padding: 10px 14px; background: var(--gold-wash); border-radius: 0 10px 10px 0; font-size: 18px; }

/* Booking embed */
.booking { width: 100%; min-height: 720px; border: 0; border-radius: 12px; background: #fff; }

/* Sticky call on mobile */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--navy); z-index: 10; }
.sticky a { display: flex; justify-content: center; align-items: center; min-height: 52px; color: #fff; font-weight: 700; font-size: 20px; text-decoration: none; border: 2px solid var(--gold); border-radius: 999px; }
@media (min-width: 900px) { .sticky { display: none; } }
body.has-sticky { padding-bottom: 84px; }
@media (min-width: 900px) { body.has-sticky { padding-bottom: 0; } }

/* Phones: calmer type scale and a compact header so the question sits above the fold.
   Tested widths: 320 (iPhone SE 1st gen), 360 (small Android), 375, 390, 414, 430 (Pro Max). */
@media (max-width: 599px) {
  body { font-size: 17px; line-height: 1.5; }
  .bar-in { padding: 8px 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand img { width: 30px; height: 30px; border-radius: 7px; padding: 2px; }
  .brand b { font-size: 16px; }
  .brand small { font-size: 10px; letter-spacing: 0.08em; }
  .lang { font-size: 14px; margin-right: 6px; }
  .call { display: none; }
  .wrap { padding: 16px 14px 40px; gap: 18px; }
  .eyebrow { font-size: 12px; margin-bottom: 6px; }
  h1 { font-size: clamp(24px, 7vw, 29px); line-height: 1.15; margin-bottom: 8px; }
  .lede { font-size: 17px; margin-bottom: 12px; }
  .promise { font-size: 15px; gap: 4px 12px; }
  h2 { font-size: 22px; }
  .card { padding: 18px 16px; border-radius: 12px; }
  label.field { font-size: 16px; margin-top: 12px; }
  input[type=text], input[type=tel], input[type=email], select { font-size: 18px; min-height: 52px; padding: 11px 12px; }
  .choice { font-size: 18px; padding: 14px 16px; min-height: 54px; }
  .btn { font-size: 19px; min-height: 54px; margin-top: 14px; }
  .county { font-size: 14px; }
  .county b { font-size: 14.5px; }
  .consent { font-size: 14px; grid-template-columns: 26px 1fr; }
  .agent { grid-template-columns: 76px 1fr; gap: 12px; }
  .agent img { width: 76px; height: 76px; }
  .agent b { font-size: 19px; }
  .facts li { font-size: 16px; }
  .window { font-size: 16px; }
  .booking { min-height: 640px; }
  .sticky a { min-height: 48px; font-size: 18px; }
  body.has-sticky { padding-bottom: 76px; }
}
/* Tablets and small laptops */
@media (min-width: 600px) and (max-width: 899px) {
  body { font-size: 18px; }
  .bar-in { padding: 10px 18px; }
  .brand img { width: 34px; height: 34px; }
  .brand b { font-size: 18px; }
  h1 { font-size: 36px; }
  .lede { font-size: 19px; }
  h2 { font-size: 24px; }
}
@media (max-width: 359px) {
  .brand small { display: none; }
  .eyebrow { display: none; }
  .lede { font-size: 16px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  h1 { font-size: 23px; }
}

/* Medicare 101 class page */
.nextclass { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 16px 20px; margin: 16px 0 18px; display: grid; gap: 4px; }
.nextclass p { margin: 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); }
.nextclass > b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.countdown { display: flex; gap: 10px; margin-top: 8px; }
.countdown:empty { display: none; }
.countdown span { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px 12px; font-size: 14px; color: var(--gold-soft); }
.countdown b { font-size: 22px; color: #fff; margin-right: 4px; }
.session-choice b { display: block; }
.session-choice span { display: block; font-size: 16px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.alt { font-size: 16px; color: var(--ink-soft); margin: 16px 0 0; }
.calhead { font-weight: 700; margin: 22px 0 8px; }
.cal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal a { text-align: center; border: 2px solid var(--line); border-radius: 10px; padding: 12px 6px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--navy); min-height: 48px; }
.cal a:hover { border-color: var(--navy-2); background: var(--gold-wash); }
.btn-ghost { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.btn-ghost:hover { background: var(--gold-wash); }
[data-final] h3, .aside-h { font-family: var(--serif); font-size: 21px; margin: 24px 0 4px; }
.edu { margin: 18px 0 0; background: var(--gold-wash); border-radius: 10px; padding: 12px 14px; font-size: 16px; }
@media (max-width: 599px) {
  .nextclass { padding: 13px 15px; margin: 12px 0 14px; }
  .nextclass > b { font-size: 18px; }
  .countdown b { font-size: 19px; }
  .session-choice span { font-size: 15px; }
  .cal { grid-template-columns: 1fr; }
  .edu { font-size: 15px; }
}

/* Gold pill eyebrow + deadline card (AEP), in the style of t65-made-easy */
.pill { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-wash); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 6px 14px; margin: 0 0 14px; }
.deadline { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 16px 20px; margin: 16px 0 18px; display: grid; gap: 4px; }
.deadline p { margin: 0; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); }
.deadline > b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
@media (max-width: 599px) { .pill { font-size: 12px; padding: 5px 12px; } .deadline { padding: 13px 15px; } .deadline > b { font-size: 18px; } }

/* "How we help" section below the quiz */
.help { background: var(--panel); border-top: 1px solid var(--line); }
.help-in { max-width: 1040px; margin: 0 auto; padding: 44px 18px 52px; }
.help h2 { font-size: clamp(24px, 4vw, 32px); max-width: 26ch; margin-bottom: 20px; }
.help h3 { font-family: var(--serif); font-size: 23px; margin: 34px 0 14px; }
.how { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: how; }
@media (min-width: 760px) { .how { grid-template-columns: repeat(3, 1fr); } }
.how li { counter-increment: how; background: var(--ground); border-radius: 12px; padding: 18px 18px 18px 64px; position: relative; }
.how li::before { content: counter(how); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.how b, .tile b { display: block; margin-bottom: 4px; }
.how span, .tile span { color: var(--ink-soft); font-size: 17px; }
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; padding: 16px 18px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding: 16px 34px 16px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; color: var(--gold); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 16px; color: var(--ink-soft); }
.help-cta { max-width: 420px; margin-top: 30px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 599px) {
  .help-in { padding: 30px 14px 36px; }
  .help h3 { font-size: 20px; margin-top: 26px; }
  .how li { padding: 14px 14px 14px 56px; }
  .how li::before { left: 12px; top: 13px; width: 30px; height: 30px; }
  .how span, .tile span { font-size: 16px; }
  .tile { padding: 14px 15px; }
  .faq summary { padding: 14px 34px 14px 0; }
}

/* Compact trust strip (phones and tablets; the side card takes over on desktop) */
.agent-mini { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.agent-mini img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 2px solid var(--gold-soft); flex: none; }
.agent-mini span { font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.agent-mini b { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
@media (min-width: 900px) { .agent-mini { display: none; } }
.nextnote { font-size: 15px; color: var(--ink-soft); background: var(--ground); border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; }

.swipe { display: none; }
@media (max-width: 899px) {
  /* The side card repeats the strip and the "How we help" section on small screens. */
  .hide-sm { display: none; }

  /* Steps become a connected timeline */
  .how { gap: 0; }
  .how li { background: none; border-radius: 0; padding: 0 0 20px 50px; }
  .how li::before { left: 0; top: 0; }
  .how li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: var(--gold-soft); }

  /* Cards become a swipeable row */
  .tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -14px; padding: 2px 14px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 78%; scroll-snap-align: start; background: var(--ground); }
  .swipe { display: block; font-size: 14px; color: var(--ink-soft); margin: -6px 0 10px; }
}
@media (min-width: 600px) and (max-width: 899px) { .tile { flex-basis: 44%; } }

/* Footer */
footer { background: var(--navy); color: #d8dee7; font-size: 14px; line-height: 1.6; }
.foot { max-width: 1040px; margin: 0 auto; padding: 26px 18px 34px; display: grid; gap: 12px; }
footer b { color: #fff; }
footer a { color: var(--gold-soft); }
.tpmo { border: 1px solid rgba(233, 220, 188, 0.35); border-radius: 10px; padding: 12px 14px; color: #fff; }

/* Shown when no class or event is scheduled (or the series is switched off in GHL) */
.fallback { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 20px 22px; margin-top: 18px; }
.fallback h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; }
.fallback p { margin: 0 0 14px; color: var(--ink-soft); }
.fallback .btn { margin-top: 8px; }
@media (max-width: 599px) { .fallback { padding: 16px; } .fallback h3 { font-size: 19px; } }

/* ---- After booking -------------------------------------------------------------------------
   Appears under GHL's own "Your meeting has been scheduled" the moment the calendar reports the
   booking (funnel.js). The frame sizes itself once iframe-resizer is talking to it, so the fixed
   min-height is only the loading placeholder. */
.booking.fitted { min-height: 0; }
.booked { margin: 18px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); animation: booked-in 420ms cubic-bezier(.23,1,.32,1); }
@keyframes booked-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .booked { animation: none; } }
.booked .videoslot { margin-bottom: 22px; }
.booked-acts { display: grid; gap: 18px; }
@media (min-width: 560px) { .booked-acts { grid-template-columns: 1fr 1fr; } }
/* Secondary on purpose: the booking was the action; these are the two useful things after it. */
.btn.btn-line { background: #fff; color: var(--gold); border: 2px solid var(--gold); margin-top: 0; min-height: 56px; font-size: 19px; gap: 10px; }
.btn.btn-line:hover { background: #fff; }
@media (hover: hover) and (pointer: fine) { .btn.btn-line:hover { background: var(--gold-wash); } }
.btn-line svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-line[data-save-contact] svg { fill: currentColor; stroke: none; }
.booked-act p { margin: 8px 2px 0; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.booked-act .booked-copied { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* ---- AEP guide: the Annual Notice of Change ------------------------------------------------
   The one drawn thing on the AEP page: a generic plan letter marked up in blue pen, each mark
   numbered to match the list beside it. Everything around it stays plain. */
.guide { border-top: 1px solid var(--line); }
.guide-in { max-width: 1040px; margin: 0 auto; padding: 48px 18px 56px; }
.guide h2 { font-size: clamp(26px, 4.4vw, 36px); max-width: 24ch; margin: 0 0 12px; }
.guide-lede { font-size: 19px; color: var(--ink-soft); max-width: 60ch; margin: 0 0 30px; }
.guide h3 { font-family: var(--serif); font-size: 24px; line-height: 1.25; margin: 46px 0 16px; }

.anoc { display: grid; gap: 28px; align-items: start; }
@media (min-width: 820px) { .anoc { grid-template-columns: 330px 1fr; gap: 48px; } }
.letter { margin: 0 auto; max-width: 330px; width: 100%; transform: rotate(-1.5deg); filter: drop-shadow(0 14px 22px rgba(13, 17, 23, 0.12)); }
.letter svg { display: block; width: 100%; height: auto; }
.lt-sheet { fill: #fff; stroke: var(--line); }
.lt-logo, .lt-line { fill: #e6e9ee; }
.lt-plan { font: 700 12px var(--sans); fill: var(--ink-soft); }
.lt-title { font: 700 19px var(--serif); fill: var(--ink); }
.lt-sub { font: 500 12px var(--sans); fill: var(--ink-soft); }
.lt-label { font: 700 12.5px var(--sans); fill: var(--ink); }
.ink { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }
.ink-n { font: 700 13px var(--sans); fill: var(--gold); text-anchor: middle; }
/* The pen marks draw themselves once, the first time the letter is on screen. Without JS, or
   with reduced motion, they are simply there. */
.letter.will-ink .ink { stroke-dasharray: 1; stroke-dashoffset: 1; }
.letter.will-ink .ink-n { opacity: 0; }
.letter.inked .ink { stroke-dashoffset: 0; transition: stroke-dashoffset 520ms ease-out calc(var(--d) * 150ms + 150ms); }
.letter.inked .ink-n { opacity: 1; transition: opacity 240ms ease-out calc(var(--d) * 150ms + 350ms); }

.anoc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: anoc; }
.anoc-list li { counter-increment: anoc; display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; }
.anoc-list li::before { content: counter(anoc); grid-row: span 2; width: 30px; height: 30px; margin-top: 1px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.anoc-list b { font-size: 19px; line-height: 1.3; }
.anoc-list span { color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.anoc-ending { margin: 30px 0 0; padding: 14px 18px; border-left: 4px solid var(--ink); background: #f4f6f8; border-radius: 0 10px 10px 0; font-size: 17px; max-width: 70ch; }

/* Key dates: a vertical rule on phones, a horizontal ruler from 820px — the same device as the
   T65 enrollment window. The Oct 15 – Dec 7 stretch is the one part drawn in blue. */
.dates { list-style: none; padding: 0; margin: 0; }
.dates li { position: relative; margin-left: 7px; padding: 0 0 22px 26px; border-left: 2px solid var(--line); }
.dates li:last-child { border-left-color: transparent; padding-bottom: 0; }
.dates li::before { content: ""; position: absolute; left: -9px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-soft); }
.dates .d-open { border-left-color: var(--gold); }
.dates .d-open::before, .dates .d-close::before { background: var(--gold); border-color: var(--gold); }
.d-when { display: block; font-weight: 700; font-size: 15px; color: var(--ink-soft); }
.d-open .d-when, .d-close .d-when { color: var(--gold); }
.dates b { display: block; font-size: 18px; line-height: 1.3; }
.d-what { display: block; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
@media (min-width: 820px) {
  .dates { display: grid; grid-template-columns: repeat(5, 1fr); }
  .dates li, .dates li:last-child { margin: 0; padding: 24px 18px 0 0; border-left: 0; border-top: 2px solid var(--line); }
  .dates li::before { left: 0; top: -9px; }
  .dates .d-open { border-top-color: var(--gold); }
}

.guide-two { display: grid; gap: 0 48px; }
@media (min-width: 820px) { .guide-two { grid-template-columns: 1fr 1fr; } }
.ready { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ready li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.45; }
.ready li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid var(--ink-soft); border-radius: 5px; }
.guide .faq { max-width: 760px; }

@media (max-width: 599px) {
  .guide-in { padding: 34px 14px 40px; }
  .guide-lede { font-size: 17px; }
  .guide h3 { font-size: 21px; margin-top: 36px; }
  .anoc-list b { font-size: 18px; }
  .anoc-list span, .ready li, .anoc-ending { font-size: 16px; }
  .letter { max-width: 290px; }
}
.nowrap { white-space: nowrap; }
/* Skip sits in the right-hand corner, Back stays on the left: side by side they were close enough
   to hit the wrong one. The clearfix keeps the floated Skip inside its step. */
.step > .skip { float: right; margin-left: 16px; }
.step::after { content: ""; display: block; clear: both; }

/* AEP hero: the arrow from the intro down to the first question. It nudges three times on load to
   say "this way", then stays still. */
.godown { display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; margin: 4px auto 22px; color: var(--gold); font-weight: 700; font-size: 17px; text-decoration: none; }
.godown i { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--gold); display: grid; place-items: center; animation: nudge 1.4s ease-in-out 0.8s 3; transition: background 160ms ease; }
.godown svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (hover: hover) and (pointer: fine) { .godown:hover i { background: var(--gold-wash); } }
@media (prefers-reduced-motion: reduce) { .godown i { animation: none; } }
.videoslot + .promise { margin-bottom: 12px; }
/* At the END the last frame is the TPMO disclaimer card, which must stay readable — so "play again"
   moves out of the middle into the top-right corner (empty on that card) as a small labelled pill. */
.vplayer[data-state="ended"] .vbtn-play { left: auto; bottom: auto; top: 10px; right: 10px; transform: none; width: auto; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 15px; gap: 4px; }
.vplayer[data-state="ended"] .vbtn-play svg { width: 18px; height: 18px; margin-left: 0; }
.vplayer[data-state="ended"] .vbtn-play::after { content: attr(data-again); }
.vplayer[data-state="ended"] .vbtn-play:active { transform: scale(0.96); }
.videoslot + .agent-mini { margin-top: -6px; }

/* ==== AEP design (chosen 2026-10-04) =========================================================
   #1's headline (a two-tier Fraunces serif), #2's styling (pill-shaped promises, a centred
   intro, rounded cards and buttons), and #4's dark intro band at night. html.night is set in
   the page head when the visitor's phone is in dark mode or it is 7pm–6am where they are.
   Applies to /aep, /t65 and the class pages /medicare-101 and /events (all 2026-10-05). */
body:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) { --aep-serif: 'Fraunces', Georgia, serif; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero { position: relative; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero-in { max-width: 820px; margin: 0 auto; padding: 34px 18px 12px; text-align: center; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero-in > * { margin-left: auto; margin-right: auto; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) h1, :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) h2, :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) h3 { font-family: var(--aep-serif); font-variation-settings: 'SOFT' 50; letter-spacing: -0.02em; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero h1 { font-size: clamp(42px, 9.5vw, 72px); font-weight: 600; line-height: 1.0; margin-bottom: 22px; text-wrap: balance; font-variation-settings: 'opsz' 144, 'SOFT' 50; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .h1-lead { display: block; font-size: 0.5em; font-style: italic; font-weight: 400; color: var(--ink-soft); margin-bottom: 0.18em; letter-spacing: -0.01em; }
/* The Control Room title over the video ("AEP") is a label above content; the headline already
   says what this is. Kept in the DOM for the video's own title attribute. */
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .videohead { display: none; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .videoslot { max-width: 700px; text-align: left; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .agent-mini { max-width: 440px; text-align: left; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise { justify-content: center; gap: 8px 10px; margin: 6px auto 14px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise li { background: var(--gold-wash); padding: 6px 14px; border-radius: 999px; }
/* Drawn checkmark, not a text glyph. */
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise li::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.14em; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .lede { max-width: 36ch; margin: 0 auto 6px; font-size: 20px; text-wrap: pretty; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) main.wrap { padding-top: 6px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .card { border-radius: 24px; border: 0; box-shadow: 0 4px 10px rgba(20, 38, 61, 0.05), 0 18px 44px rgba(20, 38, 61, 0.11); }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .btn, :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .booked .btn { border-radius: 999px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .choice { border-radius: 16px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) ::selection { background: var(--gold); color: #fff; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) input { caret-color: var(--gold); accent-color: var(--gold); }
@media (max-width: 599px) {
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero-in { padding: 26px 16px 10px; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .lede { font-size: 18px; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise { font-size: 15px; }
}

/* ---- Night: #4's dark band behind the intro, the quiz card overlapping its edge ---- */
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero { background: #0f1520; color: #fff; box-shadow: 0 0 0 100vmax #0f1520; clip-path: inset(0 -100vmax); }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero-in { padding-bottom: 80px; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero h1 { color: #fff; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .h1-lead { color: #a9bbdb; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .videoframe { box-shadow: 0 0 0 1px #2a3341, 0 24px 60px rgba(29, 78, 216, 0.22); }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise li { background: #1b2433; color: #fff; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise li::before { background: #8aa9ff; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .lede { color: #cdd5df; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .agent-mini { background: #161d29; border-color: #2a3341; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .agent-mini b { color: #fff; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .agent-mini span { color: #b9c3cf; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .godown { color: #fff; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .godown i { border-color: #fff; }
@media (hover: hover) and (pointer: fine) { .night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .godown:hover i { background: rgba(255, 255, 255, 0.08); } }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) main.wrap { margin-top: -58px; position: relative; }
.night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .card { box-shadow: 0 4px 12px rgba(15, 21, 32, 0.08), 0 22px 54px rgba(15, 21, 32, 0.22); }

/* Multi-select with a cap (data-max): at the cap the unpicked answers dim, and a tap on one nudges
   the "Choose up to 3" note so the reason is visible. */
.choice.capped { opacity: 0.45; }
.step > p.nudge { animation: shake 420ms cubic-bezier(.36, .07, .19, .97); color: var(--ink); font-weight: 600; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .step > p.nudge { animation: none; } }

/* AEP step 5 (phone + email), compact (Darel, 2026-10-04: "too large"). Same content and the same
   full consent wording — only spacing and sizes come in. */
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .step:has(#contact) h2 { font-size: 23px; line-height: 1.2; margin-bottom: 2px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .field { margin-top: 10px; margin-bottom: 4px; font-size: 16px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact input[type=tel], :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact input[type=email] { min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .consent.consent-small { margin-top: 12px; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .nextnote { font-size: 14px; padding: 8px 12px; margin-top: 10px; }
/* T65 (Darel, 2026-10-05): the note now sits UNDER "Continue to my needs review" — a quiet line,
   not a box, so the button is what the eye lands on. */
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .nextnote-after { background: none; padding: 0; margin-top: 10px; text-align: center; font-size: 13.5px; line-height: 1.4; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .err:empty { margin: 0; min-height: 0; }
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .btn { min-height: 54px; margin-top: 12px; }

/* The booking step, tighter (Darel, 2026-10-04: "a little wider and shorter"). Measured on GHL's
   real widget: it grows TALLER as it gets wider (672px at 300–375 wide, 730 at 520, 844 from
   760 when the time slots move beside the calendar), so the width win is on phones only, where
   it runs edge to edge across the card; the height win is the space around it. */
.step[data-final] > h2 { font-size: 23px; margin-bottom: 4px; }
.step[data-final] > p { font-size: 16px; line-height: 1.45; margin: 0 0 10px; color: var(--ink-soft); }
.step[data-final] > p:last-child { margin: 10px 0 0; }
@media (max-width: 599px) {
  .step[data-final] .booking { width: calc(100% + 32px); margin: 0 -16px; border-radius: 0; }
}
:is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .consent.consent-small { line-height: 1.38; }

/* ==== After booking: layout 4 (chosen 2026-10-04) =========================================
   "You're booked, {name}." → video → our confirmation box → save / share → add to calendar.
   Our box and the calendar buttons appear once /api/appt returns the real time; until then
   GHL's own confirmation shows under the panel. Overrides the earlier divider styling above. */
.booked { margin: 6px 0 0; padding: 0; border: 0; }
.booked .videohead { display: none; }
.booked .videoslot { margin-bottom: 14px; }
.booked-acts { grid-template-columns: 1fr 1fr; gap: 10px; }
.booked .btn.btn-line { min-height: 48px; font-size: 15px; padding: 8px 10px; gap: 7px; white-space: nowrap; }
.booked .btn-line svg { width: 19px; height: 19px; }
.booked-act p { font-size: 13px; line-height: 1.4; margin-top: 6px; }
.booked + iframe[data-booking] { margin-top: 16px; }

.bconf { text-align: center; padding: 18px 14px 16px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.bconf p { margin: 0; }
.bconf-h { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 19px; line-height: 1.25; color: var(--ink); }
.bconf-h b { font-weight: 700; text-align: left; }
.bconf-ok { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #16a34a; display: grid; place-items: center; }
.bconf-ok svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bconf .bconf-when { margin-top: 10px; font-size: 18px; font-weight: 600; color: var(--ink); }
.bconf-tz { font-size: 16px; color: var(--ink-soft); }
.bconf .bconf-soon { margin-top: 8px; font-size: 17px; color: var(--ink); }

/* Add to calendar: GHL's own outlined style, larger and easier to tap. */
.bcal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.bcal-say { grid-column: 1 / -1; margin: 0 0 -2px; font-size: 16px; font-weight: 600; color: var(--ink); text-align: center; }
.bcal a { display: grid; place-items: center; min-height: 54px; border: 1px solid #c9d0da; border-radius: 10px; background: #fff; color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bcal a:hover { border-color: var(--gold); background: var(--gold-wash); } }
.bcal a:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .bcal a:active { transform: none; } }

/* ==== Phones: the compact scale (Darel, 2026-10-05) ==========================================
   On an iPhone 16 Pro Max the page read ~15% too big: the first screen ran out before the ZIP
   box, and he had to zoom his browser out to see a step whole. This is that zoomed-out size as
   the default.
   In rem on purpose: 1rem is the visitor's own default text size, so anyone who has set larger
   text in their browser or phone still gets larger text. Everyone else gets the compact page.
   Form inputs never go under 1rem (16px) — below that an iPhone zooms in when the box is tapped.
   Last in the file so it wins over the per-page rules above it. */
@media (max-width: 599px) {
  html { font-size: 100%; }
  body { font-size: 1rem; line-height: 1.5; }
  .wrap { padding: 0.875rem 0.875rem 2.25rem; gap: 1rem; }
  .card { padding: 1rem 0.875rem; }
  h1 { font-size: 1.625rem; }
  h2, :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .step:has(#contact) h2, .step[data-final] > h2 { font-size: 1.3125rem; line-height: 1.2; }
  .stepnum { font-size: 0.875rem; margin-bottom: 0.25rem; }
  .step > p { font-size: 0.9375rem; }
  label.field, :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .field { font-size: 0.9375rem; margin-top: 0.625rem; margin-bottom: 0.25rem; }
  input[type=text], input[type=tel], input[type=email], select,
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact input[type=tel], :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact input[type=email] { font-size: 1rem; min-height: 3rem; padding: 0.625rem 0.75rem; }
  .choice { font-size: 1rem; padding: 0.75rem 0.875rem; min-height: 3rem; }
  .choices { gap: 0.5rem; }
  .btn, :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) #contact .btn { font-size: 1.0625rem; min-height: 3.125rem; margin-top: 0.75rem; }
  .back, .skip { font-size: 0.9375rem; margin-top: 0.5rem; }
  .county { font-size: 0.8125rem; }
  .county b { font-size: 0.875rem; }
  .consent { font-size: 0.8125rem; }
  .consent.consent-small { font-size: 0.75rem; }
  .sticky a { min-height: 2.75rem; font-size: 1.0625rem; }
  body.has-sticky { padding-bottom: 4.25rem; }

  /* The AEP intro — the part that pushed the ZIP box off the first screen. */
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero-in { padding: 1.25rem 0.875rem 0.5rem; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero h1 { font-size: 2.25rem; margin-bottom: 0.875rem; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .videoslot { margin-bottom: 0.75rem; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .agent-mini { margin: 0 auto 0.75rem; padding: 0.5rem 0.625rem; gap: 0.625rem; }
  .agent-mini img { width: 2.5rem; height: 2.5rem; }
  .agent-mini b { font-size: 0.9375rem; }
  .agent-mini span { font-size: 0.8125rem; }
  /* One row when they fit (English), two when they do not (Spanish is longer). Forcing one row
     made the Spanish page wider than the phone and scroll sideways (caught 2026-10-05). */
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise { font-size: 0.875rem; gap: 0.375rem; margin: 0 auto 0.625rem; flex-wrap: wrap; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .promise li { padding: 0.3125rem 0.625rem; white-space: nowrap; }
  :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero .lede { font-size: 1rem; line-height: 1.5; margin-bottom: 0.25rem; }
  .godown { font-size: 0.9375rem; gap: 0.375rem; margin: 0.25rem auto 0.875rem; }
  .godown i { width: 2.5rem; height: 2.5rem; }
  .night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) .hero-in { padding-bottom: 4.25rem; }
  .night :is([data-page="aep"], [data-page="t65"], [data-page="web101"], [data-page="events"]) main.wrap { margin-top: -3.25rem; }

  /* The deadline, the guide below the quiz, and the after-booking screen. */
  .deadline { padding: 0.75rem 0.875rem; }
  .guide-in { padding: 1.75rem 0.875rem 2.25rem; }
  .guide h2 { font-size: 1.5rem; }
  .guide h3 { font-size: 1.25rem; margin-top: 2rem; }
  .guide-lede, .anoc-list span, .ready li, .anoc-ending, .d-what { font-size: 0.9375rem; }
  .anoc-list b, .dates b { font-size: 1.0625rem; }
  .bconf-h { font-size: 1.0625rem; }
  .bconf .bconf-when { font-size: 1rem; }
  .bcal a { min-height: 3rem; font-size: 1rem; }
}

/* The consent disclaimer on the phone + email step, smaller still (Darel, 2026-10-05: "the
   disclaimer is what needs to be reduced"). Same full wording — only the size. 11.5px is the
   floor: this is the TCPA consent, and it has to stay clear and readable to count. */
.consent.consent-small { font-size: 11.5px; line-height: 1.35; gap: 8px; }
.consent.consent-small input { width: 20px; height: 20px; }
@media (max-width: 599px) { .consent.consent-small { font-size: 0.72rem; line-height: 1.35; } }

/* T65: clear space under the quiz card before the enrollment-window band (Darel, 2026-10-05:
   "move this more down and leave that blank space under the zipcode part"). The quiz stands
   alone on screen; the band is still there for anyone who scrolls.
   Then (same day): "add more space and move the initial enrollment box closer to 'Medicare is
   confusing…'". So the gap above grows, and the band sits just over the help heading — the
   divider line and the bottom padding between them go, so it reads as that section's opener. */
[data-page="t65"] .card + .iepband { margin-top: clamp(140px, 22vh, 220px); margin-bottom: 0; }
[data-page="t65"] main.wrap { padding-bottom: 0; }
[data-page="t65"] main.wrap + .help { border-top: 0; }
[data-page="t65"] main.wrap + .help .help-in { padding-top: 32px; }
/* Class pages (Medicare 101, Events), same treatment: the "next class" box sits under the quiz with
   the same clear space, and just above the "how the class works" section. */
:is([data-page="web101"], [data-page="events"]) .card + .nextclass { margin-top: clamp(140px, 22vh, 220px); margin-bottom: 0; }
:is([data-page="web101"], [data-page="events"]) main.wrap { padding-bottom: 0; }
:is([data-page="web101"], [data-page="events"]) main.wrap + .help { border-top: 0; }
:is([data-page="web101"], [data-page="events"]) main.wrap + .help .help-in { padding-top: 32px; }
:is([data-page="web101"], [data-page="events"]) .nextclass { border-radius: 20px; }
/* AEP, same treatment (Darel, 2026-10-05): the "Annual Enrollment ends" countdown moves down,
   with the same clear space under the quiz, and sits just above the Annual Notice of Change guide. */
[data-page="aep"] .card + .deadline { margin-top: clamp(140px, 22vh, 220px); margin-bottom: 0; }
[data-page="aep"] main.wrap { padding-bottom: 0; }
[data-page="aep"] main.wrap + .guide { border-top: 0; }
[data-page="aep"] main.wrap + .guide .guide-in { padding-top: 32px; }

/* ==== "How we help" — version 1, "The call, mapped" (Darel's pick, 2026-10-05) ==============
   No eyebrow label, the page's serif headings, drawn line icons, and FAQ answers that slide
   open. help.js puts .will-in on the section and .in on the steps the first time they scroll into
   view — one arrive-moment: the line draws circle to circle. Reduced motion: everything shows. */
.help .hicon { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.help details[open] .faq-a { animation: faqin 260ms cubic-bezier(.23, 1, .32, 1); }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }
.help .faq-a p { margin: 0 0 16px; color: var(--ink-soft); }

/* 1 · The call, mapped: a line draws through three numbered stops, then a two-column topic list. */
.hv1-path { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; }
/* One segment per gap, circle to circle, so the line ends exactly at the last stop. */
.hv1-path li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; align-content: start; position: relative; }
.hv1-path li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -22px; width: 2px; background: var(--gold); transform-origin: top;
  transition: transform 340ms cubic-bezier(.4, 0, .2, 1) calc(var(--i) * 280ms + 180ms); }
.hv1-n { width: 44px; height: 44px; border-radius: 50%; background: var(--ground); border: 2px solid var(--gold); color: var(--gold); display: grid; place-items: center; font: 600 22px/1 var(--aep-serif, var(--serif)); position: relative; z-index: 1;
  transition: opacity 300ms ease calc(var(--i) * 280ms), transform 420ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * 280ms); }
.hv1-path b { display: block; font-size: 19px; margin: 8px 0 2px; }
.hv1-path span { color: var(--ink-soft); font-size: 16.5px; }
.help.will-in .hv1-path:not(.in) li::before { transform: scaleY(0); }
.help.will-in .hv1-path:not(.in) .hv1-n { opacity: 0; transform: scale(0.6); }
@media (min-width: 760px) {
  .hv1-path { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .hv1-path li { grid-template-columns: 1fr; }
  .hv1-path li:not(:last-child)::before { left: 44px; right: -24px; top: 21px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .help.will-in .hv1-path:not(.in) li::before { transform: scaleX(0); }
}
.hv1-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 700px) { .hv1-topics { grid-template-columns: 1fr 1fr; } }
.hv1-topics li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hv1-topics .hicon { color: var(--gold); margin-top: 2px; }
.hv1-topics b { display: block; font-size: 17.5px; }
.hv1-topics span { color: var(--ink-soft); font-size: 15.5px; }

@media (prefers-reduced-motion: reduce) {
  .hv1-path li::before, .hv1-n { opacity: 1 !important; transform: none !important; transition: none !important; }
  .help details[open] .faq-a { animation: none; }
}
@media (max-width: 599px) {
  .hv1-path b { font-size: 1.0625rem; }
  .hv1-path span, .hv1-topics span { font-size: 0.9375rem; }
  .hv1-topics b { font-size: 1rem; }
}