/* ==========================================================================
   Homepage rebuild — layout and components.
   Depends on brand.css for every colour, typeface, and radius.

   RULE: this file must not introduce a colour, font, or radius literal.
   Everything visual comes through a var(--ami-*) token. The only literals
   here are neutral alphas for shadows and rules, which are derived from
   --ami-ink rather than sampled from anywhere new.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spacing rhythm.
   NOT extracted from her site: her CSS is Duda's 16px utility padding and
   per-widget inline spacing, so no scale could be lifted (docs/BRAND.md #3).
   This is the rebuild's own consistent scale. Documented as invented spacing,
   which is allowed; colour, type, and copy are not.
   -------------------------------------------------------------------------- */
:root {
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 6rem;

  /* System monospace stack for reproducing a raw URL as text. Not a brand
     typeface: it is deliberately the reader's own OS mono face, so a broken
     address reads as machine output rather than as her voice. */
  --ami-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rule: 1px solid var(--ami-border);
  --shadow-sm: 0 1px 2px rgba(51, 51, 51, .06), 0 2px 8px rgba(51, 51, 51, .05);
  --shadow-md: 0 2px 4px rgba(51, 51, 51, .06), 0 12px 32px rgba(51, 51, 51, .09);
}

*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Progressive enhancement.

   The page must be fully usable with scripting off. The <html> element gets a
   `js` class from a tiny inline script in <head>, which runs before first
   paint, so there is no flash of the wrong state.

   Without JS:  the tab strip is hidden, because a control that does nothing is
                worse than no control, and ALL THREE chooser panels are shown
                stacked. Every panel carries its own heading, so the page reads
                as three plain sections.
   With JS:     the tab strip appears and shows one panel at a time.

   Header dropdowns: the CSS :hover rules that open them are scoped
   html:not(.js), so a no-JS visitor still reaches every nav link by hover. With
   scripting on the script owns hover, because it has to hold the panel open
   while the pointer crosses to it and :hover cannot wait.
   CASCADE NOTE: `display` for .chooser is set ONLY here, never in its
   component rule further down. An earlier attempt put `.chooser{display:none}`
   at the top of this file and the component rule `.chooser{display:grid}`
   below it silently won on source order, leaving dead controls on screen with
   scripting off. Do not add a `display` declaration to the component block.
   -------------------------------------------------------------------------- */
html:not(.js) .chooser         { display: none; }
.js .chooser                   { display: grid; }
.js-only                       { display: none; }
.js .js-only                   { display: block; }
.js .no-js-only                { display: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky, so an in-page jump must clear it or the target
     lands underneath the bar. */
  scroll-padding-top: 6rem;
  /* Hold the scrollbar gutter open even on pages short enough not to need one.
     Without this the usable width changes by the scrollbar's thickness between
     a short page and a long one, and on a window sitting near a header
     breakpoint the header itself then changes shape from page to page. The
     header must look the same everywhere, so the width it is laid out in has
     to be the same everywhere. No-op where scrollbars overlay the content. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ami-offwhite);
  color: var(--ami-ink);
  font-family: var(--ami-font-body);
  font-weight: var(--ami-body-weight);
  font-size: var(--ami-body-size);
  line-height: var(--ami-lh-body);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--ami-container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

h1 {
  font-family: var(--ami-font-h1);
  font-weight: var(--ami-h1-weight);
  font-size: clamp(var(--ami-h1-mobile), 6.2vw, var(--ami-h1-desktop));
  line-height: 1.02;
  letter-spacing: -0.015em;
}
h2 {
  font-family: var(--ami-font-h2);
  font-size: clamp(var(--ami-h2-mobile), 4vw, var(--ami-h2-desktop));
  line-height: var(--ami-lh-heading);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--ami-font-h2);
  font-size: 1.25rem;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Eyebrow.
   Colour is her live-site lime (--ami-eyebrow), kept per Kalob's Checkpoint A
   decision. Contrast is handled by size and weight only, never by swapping the
   hex. Measured ratios are reported in docs/BRAND.md.
   .eyebrow--on-dark is the same lime on the ink band, where it measures 6.36:1
   and passes AA outright.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--ami-font-ui);
  font-size: 0.9375rem;      /* 15px, up from her ~12px, per the size/weight fix */
  font-weight: 700;          /* up from her 400 */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ami-eyebrow);
  margin-bottom: var(--s-2);
}
.eyebrow--on-dark { color: var(--ami-eyebrow); }

/* Body links. Colour sampled from her live global stylesheet:
   #dm .dmNewParagraph a { color: var(--color_3) } = #4A9ED9, identical for
   :link, :hover and :visited. Underlined so colour is not the only cue. */
a { color: var(--ami-link); }
.prose a, .disclaimer a, .site-footer a {
  color: var(--ami-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.prose a:hover, .disclaimer a:hover, .site-footer a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ami-btn-hover);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Buttons. Her pill, lifted exactly: 50px radius, bold, off-white text.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-family: var(--ami-font-ui);
  font-size: var(--ami-btn-size);
  font-weight: var(--ami-btn-weight);
  line-height: 1;
  text-decoration: none;
  padding: 1.05rem 2rem;
  border: 0;
  border-radius: var(--ami-btn-radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
/* --ami-btn-hover (#256C45) as the resting background, not --ami-btn-bg
   (#46944C). Off-white on #46944C measures 3.50:1, and the label is 18px bold,
   which is below WCAG's 18.66px large-text threshold, so it needs 4.5:1 and
   fails. #256C45 gives 5.92:1 with the same off-white label. Her brighter green
   stays as the hover state, where the pill is already identified by position
   and the resting state has carried the meaning. Measured with
   verify.mjs --contrast, not eyeballed. */
.btn--primary { background: var(--ami-btn-hover); color: var(--ami-btn-text); }
.btn--primary:hover { background: var(--ami-btn-bg); }

/* On the green hero her pill disappears: --ami-btn-bg #46944C sitting on
   --ami-green #459349 is a 1.01:1 difference, so the button reads as plain
   text. This inverts it using two tokens that already exist. Off-white pill,
   her deep button-hover green as the label, which measures 5.92:1 and passes
   AA. No new colour is introduced. */
.btn--on-green { background: var(--ami-offwhite); color: var(--ami-btn-hover); }
.btn--on-green:hover { background: var(--ami-white); color: var(--ami-green-deep); }
.btn--ghost {
  background: transparent;
  color: var(--ami-offwhite);
  box-shadow: inset 0 0 0 2px var(--ami-offwhite);
}
.btn--ghost:hover { background: var(--ami-offwhite); color: var(--ami-ink); }
.btn--outline {
  background: transparent;
  color: var(--ami-btn-hover);
  box-shadow: inset 0 0 0 2px var(--ami-btn-hover);
}
.btn--outline:hover { background: var(--ami-btn-hover); color: var(--ami-offwhite); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Preview banner. Development only. Removed at cutover.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Header. Ink bar, as on her live site.
   The logo IMAGE and the business NAME TEXT are separate elements on purpose:
   the name is an open question (Q7) and the logo is another (Q8). Either can
   be swapped without touching the other.
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--ami-ink);
  color: var(--ami-offwhite);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Auto-hiding header, phones only. Kalob, Aug 23: scroll down a little and it
   goes, scroll back up a little and it comes back.

   This is the fix for something flagged and left alone twice: the mobile header
   stacks into three rows and occupies about 180px of an 844px viewport, a fifth
   of the screen, permanently, while reading. Tucking it on the way down gives
   that back and returns it the moment someone reaches for it.

   Scoped to .js, which the document sets on itself at the top of every page. If
   scripting is off, the class that drives this is never added and the header
   stays plainly sticky, which is the correct fallback rather than a header that
   has vanished with no way to bring it back.

   No prefers-reduced-motion rule is needed here: the global block near the end
   of this file already removes every transition, so a reduced-motion reader
   gets the same behaviour without the slide. */
@media (max-width: 767px) {
  .js .site-header { transition: transform .25s ease; }
  .js .site-header.is-tucked { transform: translateY(-100%); }
  /* With scripting off the header cannot get out of the way, so an anchor has
     to land below the whole 181px of it. html's default scroll-padding-top of
     6rem is 96px and would leave the target heading covered by about 85px.
     Scoped to :not(.js) so the scripted case keeps the tighter 6rem, where the
     jump tucks the header instead. */
  html:not(.js) { scroll-padding-top: 12rem; }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; margin-right: auto; }
/* The logo artwork was drawn for a LIGHT background: the MCDONNELL wordmark is
   #304830, which against the dark grey header measures 1.26:1 and is all but
   invisible. Measured, not guessed. Rather than lighten the header, which Kalob
   wants dark grey, or recolour Jennifer's artwork, the logo sits on a light
   plate. Same artwork, untouched, now at 10.02:1.
   Also enlarged from 46px so the "INSURANCE BENEFITS SPECIALIST" line is
   legible rather than a smudge. */
.brand__logo {
  display: block;
  width: auto;
  height: 80px;
  flex: none;
  background: var(--ami-white);
  padding: 14px 20px;
  border-radius: 12px;
}
.brand__name {
  font-family: var(--ami-font-h2);
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--ami-offwhite);
  letter-spacing: -0.01em;
}
.brand__name small {
  display: block;
  font-family: var(--ami-font-ui);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ami-eyebrow);
  margin-top: 2px;
}
.header-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.header-phone {
  font-family: var(--ami-font-ui);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ami-offwhite);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { text-decoration: underline; }
.header-actions .btn { padding: .8rem 1.5rem; font-size: 1rem; }


/* --------------------------------------------------------------------------
   Hero. Green field with the curved lower edge her site uses.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ami-green);
  color: var(--ami-offwhite);
  padding-block: var(--s-8) calc(var(--s-8) + 3vw);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -6vw;
  height: 12vw;
  min-height: 60px;
  background: var(--ami-offwhite);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hero .wrap { position: relative; z-index: 1; }

/* Two columns on desktop: her face, then the promise, then the buttons.
   Collapses to one column at 767px with the photo on top. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(var(--s-5), 5vw, var(--s-7));
  align-items: center;
}
.hero__figure { margin: 0; }
.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 28%;      /* keeps her face centred in a square crop */
  border-radius: 50%;
  background: var(--ami-border);
  box-shadow: 0 0 0 6px rgba(247, 247, 245, .28), var(--shadow-md);
}
.hero__copy { min-width: 0; }
.hero h1 { color: var(--ami-white); }
.hero__sub {
  font-size: clamp(1.0625rem, 2vw, var(--ami-body-lg));
  margin-top: var(--s-4);
  max-width: 40rem;
  color: var(--ami-offwhite);
}
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }

/* Headline chooser: a meeting control, not a site feature. Removed at cutover. */

/* --------------------------------------------------------------------------
   Sections.
   -------------------------------------------------------------------------- */
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--ink { background: var(--ami-ink); color: var(--ami-offwhite); }
.section--ink h2 { color: var(--ami-offwhite); }
.section__head { max-width: 42rem; margin-bottom: var(--s-6); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p { margin-top: var(--s-3); font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   Chooser. Three doors. This is the core interaction and is never cut.
   -------------------------------------------------------------------------- */
/* `display` deliberately omitted: it is owned by the progressive-enhancement
   block near the top of this file. Adding it here reintroduces the bug. */
.chooser { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.chooser__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
  background: var(--ami-white);
  color: var(--ami-ink);
  border: var(--rule);
  border-radius: 14px;
  padding: var(--s-5);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.chooser__card:hover { border-color: var(--ami-green); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.chooser__card[aria-selected="true"] {
  border-color: var(--ami-green);
  box-shadow: inset 0 0 0 2px var(--ami-green), var(--shadow-md);
}
.chooser__age {
  font-family: var(--ami-font-ui);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ami-btn-hover);
}
.chooser__card h3 { font-size: 1.375rem; }
.chooser__card p { font-size: .9375rem; }

.chooser__panel {
  margin-top: var(--s-5);
  background: var(--ami-white);
  border: var(--rule);
  border-left: 5px solid var(--ami-green);
  border-radius: 14px;
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.chooser__panel[hidden] { display: none; }
.chooser__panel h3 { margin-bottom: var(--s-2); }
.chooser__panel ul { margin: var(--s-3) 0 0; padding-left: 1.15rem; display: grid; gap: var(--s-1); }
.chooser__panel .btn { margin-top: var(--s-4); }
.chooser__note {
  margin-top: var(--s-3);
  font-size: .875rem;
  color: var(--ami-ink);
  opacity: .78;
}

/* --------------------------------------------------------------------------
   Plan lists. One row per carrier: name on the left, her real broker-ID quote
   link on the right. Rows are generous because this page is read by people
   who are, by definition, 65 or older or shopping for a parent.
   -------------------------------------------------------------------------- */
.plan-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.plan-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3);
  background: var(--ami-offwhite);
  border: var(--rule);
  border-radius: 10px;
}
.plan__name { font-size: 1rem; line-height: 1.4; min-width: 0; flex: 1 1 16rem; }
.btn--sm { padding: .6rem 1.15rem; font-size: .9375rem; white-space: nowrap; }
.chooser__panel .plan-list + .btn { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Jennifer. Headshot plus her bio.
   -------------------------------------------------------------------------- */
.bio { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
/* Photo lives in the hero now, so the bio is a single readable column. */
.bio--text-only { grid-template-columns: minmax(0, 46rem); }
.bio--text-only .prose { max-width: none; }
.bio__figure { margin: 0; position: relative; }
.bio__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 344 / 414;
  object-fit: cover;
  border-radius: 999px 999px 18px 18px;   /* soft arch, mirrors the hero curve */
  box-shadow: var(--shadow-md);
  background: var(--ami-border);
}
.bio__caption {
  margin-top: var(--s-3);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ami-ink);
  opacity: .72;
}
/* minmax(0, 1fr), not the implicit auto column. An auto grid track is floored
   at min-content, and min-content for a paragraph containing
   support@affordablemichiganinsurance.com is that whole unbreakable 39-character
   token. Below 375px the track demanded 362px inside a 272px box and shoved the
   entire page sideways, so /contact scrolled horizontally on an iPhone SE.
   overflow-wrap lets the address itself break rather than merely relocating the
   overflow once the track can no longer expand. Both are needed: the first stops
   the grid growing, the second stops the word spilling out of it. */
.prose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  font-size: 1.0625rem;
  max-width: 40rem;
  overflow-wrap: break-word;
}
.prose p:first-of-type { font-size: 1.1875rem; }
.bio__sign {
  font-family: var(--ami-font-h2);
  font-size: 1.375rem;
  color: var(--ami-btn-hover);
}

/* --------------------------------------------------------------------------
   Credentials.
   -------------------------------------------------------------------------- */
.creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.cred { display: grid; gap: var(--s-1); align-content: start; }
.cred dt {
  font-family: var(--ami-font-h1);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ami-eyebrow);
}
.cred dd { margin: 0; font-size: 1rem; color: var(--ami-offwhite); }

/* --------------------------------------------------------------------------
   FAQ accordion.

   Built on <details>/<summary> rather than the button + aria-expanded pattern
   the header dropdowns use. That is a deliberate departure and the reason is
   the no-JS state: the header pattern degrades by SHOWING EVERYTHING, which is
   right for a nav list of six links and wrong for seven answers, because the
   section stops being an FAQ and becomes a wall of prose. <details> opens and
   closes with scripting off, so the no-JS reader gets the real component
   rather than a fallback, and it carries native keyboard and screen-reader
   semantics that no hand-written aria can improve on.

   There is deliberately no accordion JS at all: no "only one open at a time".
   Someone comparing two answers should be able to hold both open, and this
   audience is the one most likely to lose their place when a panel they were
   reading closes itself.
   -------------------------------------------------------------------------- */
.faq {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* Narrower than the section: answers are prose and a 42rem measure is the
     same one .section__head uses, so the two line up. */
  max-width: 48rem;
  display: grid;
  gap: var(--s-2);
}

.faq__item {
  background: var(--ami-white);
  border: var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq__item[open] { border-color: var(--ami-green); box-shadow: var(--shadow-md); }
.faq__item:hover { border-color: var(--ami-green); }

/* The question. A summary is a list-item by default in every engine and shows
   a disclosure triangle; both markers have to go before the custom one reads
   as the only affordance. ::-webkit-details-marker is still needed for Safari. */
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  margin: 0;
  font-family: var(--ami-font-ui);
  /* 18px. Deliberately above the 16px body size: this is the layer of the page
     a reader scans rather than reads, and the audience skews older. */
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ami-ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

/* Plus that becomes a minus. Drawn in CSS rather than shipped as an icon font
   or an SVG file, because it is two rectangles and this site loads no icon
   assets at all. */
.faq__mark {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: var(--ami-btn-hover);
}
.faq__mark::before, .faq__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate .18s ease, opacity .18s ease;
}
.faq__mark::before { width: 1.25rem; height: 2px; }
.faq__mark::after  { width: 2px; height: 1.25rem; }
/* Rotating the upright stroke rather than hiding it keeps the two bars joined
   through the whole transition, so it reads as one mark turning. */
.faq__item[open] .faq__mark::after { rotate: 90deg; opacity: 0; }

.faq__a {
  padding: 0 var(--s-4) var(--s-4);
  /* Indented to clear nothing: it lines up with the question text above it. */
  max-width: 42rem;
}
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: var(--s-3); }

/* The one answer that is a list of steps rather than prose. Bullets are kept
   (these are three separate routes, not one paragraph) but pulled in tight, so
   the item still reads as an answer rather than as a nested menu. */
.faq__steps { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.faq__steps li { padding-left: .125rem; }
/* Naming a control the reader has to go and find, so it needs to be findable in
   the sentence too. A bare <b> will not do it: body copy is Grift Light 300 and
   no bold face is loaded for it, so <b> renders at 400 and is invisible next to
   the two links in the bullets below. This borrows the UI face the header and
   buttons use, which is what "a control on this site" looks like elsewhere. */
.faq__steps b { font-family: var(--ami-font-ui); font-weight: 700; }

/* The closing prompt. "Big letters" per the brief, and the size is the only
   thing carrying that: it is a heading, not a banner, so it does not compete
   with the section h2 above it for colour or weight. */
.faq__after {
  max-width: 48rem;
  margin: var(--s-6) auto 0;
  text-align: center;
}
.faq__after h3 {
  font-family: var(--ami-font-h2);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  line-height: var(--ami-lh-heading);
  margin: 0;
}
.faq__after .btn { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   Booking and lead form.
   -------------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); align-items: start; }

.card {
  background: var(--ami-white);
  border: var(--rule);
  border-radius: 14px;
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.card h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.card > * + * { margin-top: var(--s-4); }

.field { display: grid; gap: var(--s-1); }
.field label { font-family: var(--ami-font-ui); font-size: .9375rem; font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit;
  font-family: var(--ami-font-body);
  color: var(--ami-ink);
  background: var(--ami-offwhite);
  border: var(--rule);
  border-radius: 10px;
  padding: .8rem .9rem;
  width: 100%;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.form-grid { display: grid; gap: var(--s-4); }
.consent {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  font-size: .875rem;
  line-height: 1.5;
  background: var(--ami-offwhite);
  border: var(--rule);
  border-radius: 10px;
  padding: var(--s-3);
}
/* 1.5rem = 24px, the WCAG 2.5.8 target minimum. It was 1.1rem, about 17.6px.
   This is the control that gates lead capture and the audience is largely
   seniors, so it is the last checkbox on the site worth making small. */
.consent input { margin-top: .125rem; flex: none; width: 1.5rem; height: 1.5rem; }

/* --------------------------------------------------------------------------
   Unresolved placeholders and unapproved content.
   Deliberately loud. Nothing wearing these styles may reach production.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Footer.
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ami-ink);
  color: var(--ami-offwhite);
  padding-block: var(--s-6);
  font-size: .9375rem;
}
.site-footer .wrap { display: grid; gap: var(--s-4); }
.site-footer a { color: var(--ami-offwhite); }
/* Footer links measured 17px tall at 390px, under the WCAG 2.5.8 minimum of
   24px. The first version of this rule targeted `.site-footer li a` and matched
   NOTHING: this footer has no lists, its links are inline runs separated by
   middots inside plain divs. Dead CSS that measured as a fix.

   Padding alone is not enough either. Block padding on an inline-block does not
   push the surrounding lines apart, so on a phone, where these runs wrap to
   three or four lines, padded links would silently overlap their neighbours
   above and below and the bigger targets would sit on top of each other. The
   raised line-height on the container is what makes the room the padding then
   occupies. The two only work as a pair.

   Scoped to the link columns. NOT applied to .site-footer p, where links sit
   inside sentences (Medicare.gov in the CMS notice); WCAG exempts those and a
   padded box would disturb the line it sits in. */
.site-footer .wrap > div { line-height: 2; }
.site-footer .wrap > div a {
  display: inline-block;
  padding-block: .25rem;
}
.site-footer__legal { font-size: .8125rem; opacity: .75; }
/* The CMS/TPMO notice. 42 CFR 422.2267(e)(41) requires it to be "prominently
   displayed" on a TPMO site, so it is visible small print rather than hidden
   behind a click. Site-wide in the footer is stronger than the old mid-page
   box, because it now appears on every page instead of only the ones listing
   Advantage or Part D plans. The two bracketed values are CMS's own fields and
   only Jennifer can fill them. */
.site-footer__cms { display: block; margin-bottom: var(--s-2); max-width: 70ch; }

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

/* --------------------------------------------------------------------------
   Responsive. Her breakpoints: 1024 and 767.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bio { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s-5); }
  .two-col { gap: var(--s-5); }
}

@media (max-width: 767px) {
  /* --s-6 (48px), not --s-7 (72px). 72 top plus 72 bottom left 157-192px of
     dead band between sections on a phone -- about a quarter of the screen, and
     after the plan-card fix that was LARGER than a whole card. It read as
     scrolling where nothing happens. Kalob approved the change once he saw the
     boundary measured, Aug 23.

     Deliberately not smaller: sections still have to read as separate things,
     and the eyebrow above each heading needs air or it collides with whatever
     the section above ended on. Desktop keeps --s-7 and is unchanged. */
  .section { padding-block: var(--s-6); }
  .site-header .wrap { padding-block: var(--s-2); gap: var(--s-2); }
  .brand { gap: var(--s-2); }
  .brand__logo { height: 58px; padding: 10px 14px; }
  .brand__name { font-size: 1rem; }
  .header-actions { width: 100%; gap: var(--s-2); }
  .header-phone { font-size: 1rem; }
  .header-actions .btn { flex: 1; padding: .7rem 1rem; font-size: .9375rem; }

  .hero { padding-block: var(--s-5) var(--s-7); }
  /* Photo above the headline, smaller, so both CTAs stay reachable. */
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-4); justify-items: center; text-align: center; }
  .hero__figure { width: 150px; }
  .hero__sub { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__cta .btn { width: 100%; }

  .chooser { grid-template-columns: 1fr; }
  .chooser__card { padding: var(--s-4); }
  /* --------------------------------------------------------------------------
     Plan cards on phones. Replaces the three rules that used to sit here
     (.plan-list--cols 1fr / .plan flex-direction:column / .plan .btn width:100%).

     WHY THEY WENT: flex-basis sizes the MAIN axis, and `flex-direction: column`
     turns the main axis vertical. That silently changed the desktop rule
     `.plan__name { flex: 1 1 16rem }` from "at least 16rem WIDE" into "16rem
     TALL". Every card measured 364px at 393x852 whether the name read "Humana"
     or eleven words. Jennifer's "too much space" is that bug, not a taste call.

     So the card stays a ROW here, the same shape as desktop, which is also the
     "seamless" half of her complaint. Numbers in these comments are CDP
     measurements of this page via tools/browser.mjs, not estimates.
     Six plan lists at 393px: 15,176px -> 4,645px. Page 19,470px -> 8,867px.
     -------------------------------------------------------------------------- */

  /* One column below 768px. An auto-fit track was tried and reverted: measured
     single-column and auto-fit are byte-identical at 320/360/393/430, so it
     bought nothing on any portrait phone, and in the 620-767px band it put the
     full-width lists 2-up next to the in-panel lists 1-up — four name rails and
     six pill rails in one view, which is the layout complaint in a new costume.

     `minmax(0, 1fr)`, not `1fr`: a bare `1fr` is `minmax(auto, 1fr)` and its
     auto floor is min-content, so one unbreakable pill label could set the
     track width and push the page sideways. That is where the page's existing
     1px of overflow at 320px came from. Explicit 0 floor removes the mechanism;
     `white-space: normal` below removes the cause. Both, because the names and
     labels are generated from links.json and neither of us reviews them.

     padding-left:0 cancels `.chooser__panel ul { padding-left: 1.15rem }`
     (site.css:429). That rule is for the panels' prose lists but its selector
     also catches .plan-list and outranks it, spending 18.4px on markers these
     lists do not have. Restating gap here for the same reason: :429's
     `gap: var(--s-1)` was winning too, so panel lists ran on an 8px rhythm and
     every other plan list on 12px. One rhythm now, wherever a visitor lands. */
  .plan-list,
  .chooser__panel .plan-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    padding-left: 0;
  }

  /* 32px of panel padding either side is 19% of a 393px screen. --s-4 matches
     the .chooser__card line above and hands every name in the three tab panels
     16px more to wrap into. */
  .chooser__panel { padding: var(--s-4); }

  /* Stated, not inherited: it pins the axis the old rule flipped, so no future
     edit can turn a flex-basis back into a height without deleting this line. */
  .plan { flex-direction: row; padding: var(--s-2) var(--s-3); gap: var(--s-2); }

  /* flex-basis:auto is the whole idea, and it is why there is no magic width
     here. Flex line-breaking measures each item at max-content, so the name
     itself decides: the pill shares its line only when the WHOLE name fits
     beside it, and drops below the moment it does not. A fixed basis cannot do
     that, because the same card renders at two widths on this one page — inside
     a tab panel and in the full-width add-on lists — so any single number is
     wrong in one of them. Measured against fixed bases: `1 0 5rem` with
     `min-width: min-content` is ~750px shorter over the six lists at 393px, but
     it buys that by shredding names into narrow multi-line ribbons — 23 of 42
     at 393px and 28 of 42 at 360px, worst on the most common Android width.
     `auto` squeezes 0 of 42 at every width from 320 to 767. On a page whose
     entire job is helping a 70-year-old read "New Era - Philadelphia American
     (SAVE 35-55%, great PREMIUM SAVINGS, PPO)", the 750px is the cheaper thing
     to give up.

     Deliberately NOT `min-width: min-content`: that overrides the base rule's
     `min-width: 0` and re-creates a WCAG 1.4.10 reflow failure at the 200% text
     size this audience actually uses — "UnitedHealthcare" then has a min-content
     floor wider than the card holding it. Measured at 320px with a 32px root:
     baseline pushes 42 of 42 cards past the viewport, this pushes 0.
     overflow-wrap is the backstop for whatever the generator emits next. */
  /* flex-basis 100% on BOTH the name and the pill is what gives one button
     size. Each takes a full flex line, so the pill is always the card's full
     width and never the ~116px natural-label version it took when it shared a
     line with a short name. Kalob, Aug 23: "there should only be one Get a
     Quote button size." Same label rendering at two widths in one list reads as
     unfinished, and full width is what every other button on this site already
     does on a phone (.hero__cta .btn, .faq__after .btn, .doc__get).

     Costs about 590px across the page against the shared-line version, because
     16 of 42 cards used to fit name and pill on one line. Worth it: one shape,
     one size, one rail.

     NOTE THE AXIS. This stays flex-direction: row precisely so that basis means
     WIDTH. Writing it as `flex-direction: column` would give the same visual
     result today and re-arm the exact bug this block was written to fix, where
     a basis silently becomes a height. Do not switch it. */
  .plan__name { flex: 1 1 100%; overflow-wrap: break-word; text-wrap: pretty; }

  .plan .btn {
    /* Always its own full-width line, never a natural-width pill beside a short
       name. One card shape, one button size, one rail down the list.

       The earlier version used a 999:1 grow ratio against the name so the pill
       could share a line when the name was short and go full width when it
       wrapped. It was neat and it was wrong for this list: the same "Get a
       quote" label rendered at 116px on one card and 257px on the next.

       shrink 1 and min-width 0 together are what let `white-space: normal`
       actually take effect. A flex item defaults to min-width:auto and cannot
       shrink below min-content, so with nowrap the 208px "Read the official
       guidance" pill was a hard floor and hung ~7px outside the panel wall at
       320px. Now: 0px horizontal overflow from 320 to 767, and nothing clipped
       inside a card even at a 32px root. */
    flex: 1 1 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
    text-align: center;
    /* 44px, the size a phone's own controls use, in rem so it grows with a
       reader who has raised their text size. WCAG 2.5.8 only asks 24; .btn--sm
       gives 34.2px, which passes and still reads as small under an unsteady
       thumb. Costs ~160px over the page and is the right way to spend it. */
    min-height: 2.75rem;
  }

  /* `.chooser__panel .btn { margin-top: var(--s-4) }` (site.css:430) is written
     for the "Book a time" button after each panel's list, but it also matches
     all 22 quote pills inside the panels and was adding 24px above every one —
     528px of invisible scroll, and the reason a panel card measured 364px while
     a byte-identical dental card measured 340px. Scoped at (0,3,0) so it wins on
     specificity rather than on sitting further down the file; the same fix
     written as `.plan .btn` ties at (0,2,0) and silently reverts if this block
     is ever moved above line 430. */
  .chooser__panel .plan .btn { margin-top: 0; }

  /* A tap has to be visibly acknowledged before the new tab appears, and on a
     touch screen there is no :hover to do it. `.btn:active`'s 1px nudge and an
     offwhite->white card flash are both about 1.02:1 — invisible to the eye
     this page is written for. This inverts the pill into the same filled state
     :hover already uses, 5.92:1, no new token. transition:none so the feedback
     lands on contact instead of ramping in over 150ms; it still fades out.

     Note what is deliberately absent: no ::after overlay making the whole card
     a link. It reads as generosity but it puts 41 full-bleed links to
     commission-tracked URLs 12px apart, so a tremor overshoot that used to hit
     dead space now opens the wrong carrier — and it costs the reader the
     ability to select a plan name. The pill keeps the words and the outline. */
  .plan .btn:active {
    background: var(--ami-btn-hover);
    color: var(--ami-offwhite);
    transition: none;
  }
  .bio { grid-template-columns: 1fr; gap: var(--s-5); }
  .bio__figure { max-width: 260px; }
  .creds { grid-template-columns: 1fr; gap: var(--s-4); }
  .faq__q { padding: var(--s-3); font-size: 1.0625rem; }
  .faq__a { padding: 0 var(--s-3) var(--s-3); }
  .faq__after .btn { width: 100%; }
  /* The button drops below the text and goes full width: at this size a narrow
     control beside a paragraph leaves both cramped. */
  .doc { flex-direction: column; gap: var(--s-4); padding: var(--s-4); }
  .doc__get { width: 100%; }
  .two-col { grid-template-columns: 1fr; }
  .card { padding: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .chooser__card:hover { transform: none; }
}

/* ==========================================================================
   PHASE 1 HEADER (2026-08-22). Dark bar #333333 (her --ami-ink, [clone+live]).
   Every text/background pair in this header measures >= 4.5:1:
     off-white #F7F7F5 on #333333          = 11.78:1  (nav triggers, Questions)
     lime #93C83E on #333333               =  6.36:1  (brand tag)
     deep green #256C45 on pill #F7F7F5    =  5.92:1  (call button)
     ink #333333 on panel #FFFFFF          = 12.63:1  (dropdown items)
   Dropdowns use the APG disclosure pattern (button + aria-expanded + list),
   NOT role="menu": menu roles are for application menus and degrade
   screen-reader navigation of site links. They open on hover (CSS), on
   keyboard focus and Enter/Space, and on tap (JS), and close on Escape with
   focus returned to the trigger.
   ========================================================================== */
.site-nav { display: flex; align-items: center; gap: var(--s-2); }
.nav-item { position: relative; }
.nav-trigger {
  font-family: var(--ami-font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ami-offwhite);
  background: transparent;
  border: 0;
  padding: .55rem .75rem;
  border-radius: 8px;
  cursor: pointer;
}
.nav-trigger:hover { background: rgba(247, 247, 245, .12); }
.nav-caret { display: inline-block; margin-left: .25rem; font-size: .8em; }
/* Right-aligned to its trigger, not left-aligned. The Resources trigger sits in
   the right half of the nav, so a panel growing rightward runs off the window:
   at 1000px it measured [857..1121] against a 1000px viewport. That is the same
   class of bug as the Types of Insurance panel hanging off the left edge, and
   it reappeared the moment the logo got wider. Anchoring to the trigger's right
   edge makes it independent of how wide anything to the left becomes. */
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  min-width: 16.5rem;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--ami-white);
  border: var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 60;
}
/* Hover-open is CSS ONLY when scripting is off, where it is the sole way in.
   With scripting on, the script owns hover so it can hold the panel open while
   the pointer crosses the gap between the trigger and the panel. Leaving this
   rule unscoped would let :hover slam the panel shut the instant the pointer
   left the trigger, and the script's grace period could never win against it. */
html:not(.js) .nav-item:hover .nav-menu,
.nav-item.open .nav-menu { display: block; }
.nav-menu a {
  display: block;
  padding: .6rem .75rem;
  border-radius: 8px;
  font-family: var(--ami-font-ui);
  font-size: .9375rem;
  color: var(--ami-ink);
  text-decoration: none;
}
.nav-menu a:hover { background: var(--ami-offwhite); text-decoration: underline; }

.q-label {
  font-family: var(--ami-font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ami-offwhite);
  white-space: nowrap;
}
.q-arrow { display: inline-block; margin-left: .15rem; }
.btn--call { background: var(--ami-offwhite); color: var(--ami-btn-hover); }
.btn--call:hover { background: var(--ami-white); color: var(--ami-green-deep); }

/* Types of Insurance tree: mirrors the old site's Coverages dropdown exactly,
   6 category links with their 15 sub-pages nested beneath (per Gate 1 answer).
   Grouped columns instead of hover flyouts so every link works by tap and keyboard. */
/* The panel is far wider than its trigger, so it must escape the trigger box.
   It anchors to .site-header (sticky, therefore a containing block) rather
   than to .site-nav: .site-nav's right edge moves with the nav's own width, so
   a panel pinned to it hung off the LEFT of the window near 1100px and slid
   under the logo. Centring on the header instead keeps it clear of both edges
   at every width, since max-width already keeps it inside the viewport. */
.nav-item--wide { position: static; }
.nav-menu--tree {
  display: none;
  grid-template-columns: repeat(3, auto);
  gap: .25rem 1rem;
  min-width: 0;
  width: max-content;
  max-width: min(58rem, calc(100vw - 2rem));
  padding: .75rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
html:not(.js) .nav-item:hover .nav-menu--tree,
.nav-item.open .nav-menu--tree { display: grid; }
.nav-menu--tree > li { break-inside: avoid; }
a.nav-cat { font-weight: 700; }
.nav-sub {
  margin: 0 0 .35rem;
  padding: 0 0 0 .75rem;
  list-style: none;
}
.nav-sub a { font-size: .875rem; padding: .4rem .75rem; }

/* Hero primary CTA, made more prominent per 1.11. */
.btn--lg { font-size: 1.25rem; padding: 1.3rem 2.6rem; }

/* Between roughly a small laptop and a large one the row is close to full.
   Tighten the spacing rather than let the nav drop to a second row: dropping it
   changes the shape of the header, and the header is supposed to look the same
   on every page at every size anyone is likely to be using. Nothing is removed
   here, only the gaps between things. */
@media (max-width: 1200px) and (min-width: 1000px) {
  .site-header .wrap { gap: var(--s-3); }
  .brand { gap: var(--s-2); }
  .nav-trigger { padding: .55rem .5rem; }
  .header-actions { gap: var(--s-3); }
  .header-actions .btn { padding: .8rem 1.15rem; }
}

@media (max-width: 999px) {
  .site-header .wrap { row-gap: var(--s-2); }
  .site-nav { order: 3; width: 100%; }
  .nav-menu--tree { grid-template-columns: repeat(2, minmax(13rem, 1fr)); }
}
@media (max-width: 767px) {
  .site-nav { flex-wrap: wrap; gap: var(--s-1); }
  .nav-menu { position: static; min-width: 0; width: 100%; box-shadow: var(--shadow-sm); }

  /* THE OPEN MENU MUST SCROLL ITSELF.

     At this width .nav-menu drops to position: static, so the panel sits in
     normal flow INSIDE a position: sticky header. Types of Insurance is 21
     links and 831px tall, which made the header 1057px in an 844px viewport.
     A sticky element taller than the screen does not scroll: it stays pinned at
     top: 0 while the PAGE scrolls behind it, so the last four links sat below
     the fold and could not be reached by any gesture. The menu looked simply
     truncated, with scrolling that did nothing.

     Capping the panel and giving it its own scroll keeps the whole header
     inside one screen: the bar stays put and the list moves under it.

     The height comes from --ami-bar-h, which the header script measures from
     the real collapsed bar and keeps current on resize, so this does not drift
     when the bar rewraps. The 12rem fallback covers the no-JS case, where the
     variable is never set and the bar is three rows of about 11.3rem.

     overscroll-behavior: contain stops the page behind from taking over the
     gesture when the list hits its end, which is the other half of feeling
     stuck. */
  .nav-item.open .nav-menu,
  html:not(.js) .nav-item:hover .nav-menu {
    max-height: calc(100vh - var(--ami-bar-h, 12rem));
    max-height: calc(100dvh - var(--ami-bar-h, 12rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Back in normal flow, so the centring offset above no longer applies and
     would just shove the panel half a screen to the left. */
  .nav-menu--tree { grid-template-columns: 1fr; max-width: none; width: 100%; transform: none; }
  .q-label { display: none; }  /* phone pill remains; label is redundant at this width */
  .btn--lg { font-size: 1.125rem; padding: 1.1rem 1.6rem; }
}

/* Visible only when focused. Off-screen rather than display:none, because a
   display:none element is not focusable and the link would never be reachable. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ami-offwhite);
  color: var(--ami-btn-hover);
  font-family: var(--ami-font-ui);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* Blog article. The only page type whose value is long-form reading, so it gets
   a measure near 65 characters and generous vertical rhythm. */
.article { max-width: 42rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ami-ink); }
.article > * { margin: 0 0 var(--s-4); }
.article > *:last-child { margin-bottom: 0; }
.article h2, .article h3, .article h4 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  line-height: 1.25;
  color: var(--ami-ink);
}
.article h2 { font-size: 1.75rem; }
.article h3 { font-size: 1.375rem; }
.article h4 { font-size: 1.125rem; }
.article ul, .article ol { padding-left: 1.5rem; }
.article li { margin-bottom: var(--s-2); }
.article a { color: var(--ami-btn-hover); }
.article a:hover { text-decoration: none; }
.article img { max-width: 100%; height: auto; border-radius: 10px; }

/* The old pages set a small line above each section heading. It is a visual
   kicker, not a subsection, so it is a paragraph here rather than the h4 the
   Duda export used, which produced an h1 -> h4 -> h2 outline. */
.kicker {
  margin: 0 0 .25rem !important;
  font-family: var(--ami-font-ui);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ami-btn-hover);
}
.article .kicker + h2 { margin-top: 0; }

/* ==========================================================================
   INTERIOR PAGES
   Same components as the homepage. Only three things are new here: a shorter
   hero for pages that carry no headshot, an alternating section ground so long
   pages keep the homepage's rhythm, and the link list.
   ========================================================================== */

/* The homepage hero is tall because it holds a portrait and two doors. An
   interior hero holds a title and a sentence, so it is shorter, and its curved
   base is smaller to match. */
.hero--page { padding-block: var(--s-7) calc(var(--s-7) + 2vw); }
.hero--page::after { bottom: -4vw; height: 8vw; }
.hero--page h1 { max-width: 22ch; }
.hero--page .hero__sub { max-width: 46rem; margin-top: var(--s-4); }
.hero__cta--center { justify-content: center; }

/* Alternating ground. The page background is off-white, so every other section
   lifts to white and the eye gets the same banding as the homepage. */
.section--alt { background: var(--ami-white); }

/* Body copy inside a section. .prose already sets the measure and rhythm; these
   only cover the elements the old pages use that the homepage never did. */
.prose h3 { font-size: 1.375rem; margin-top: var(--s-3); }
.prose h4 { font-size: 1.125rem; margin-top: var(--s-2); }
.prose ul, .prose ol { margin: 0; padding-left: 1.5rem; display: grid; gap: var(--s-2); }
.prose li h3, .prose li h4, .prose li h5 { font-size: 1.0625rem; margin: 0 0 .25rem; }
.prose li p { margin: 0; }
.prose > *:first-child { margin-top: 0; }

/* Placeholder, not legal text. Styled to look unfinished on purpose so it can
   never be mistaken for approved wording during a client review. */
.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--s-2);
}

/* --------------------------------------------------------------------------
   Downloadable documents.

   One column, not the auto-fill grid the link list uses. A link is a label and
   tiles well; a document here carries a title, a paragraph and a caveat, and
   three of those side by side would be three walls of text.
   -------------------------------------------------------------------------- */
.doc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }

.doc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  background: var(--ami-white);
  border: var(--rule);
  border-radius: 14px;
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.doc__text { min-width: 0; max-width: 44rem; }
.doc__title { font-size: 1.25rem; margin: 0; }
.doc__desc { margin: var(--s-2) 0 0; font-size: 1rem; }

/* The document's own statement about what it is not. Deliberately not styled as
   an error: it is not a fault, it is the thing a reader most needs to see and
   is likeliest to skip. Left rule rather than a red box, for that reason. */
.doc__flag {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--ami-green);
  font-size: .9375rem;
  color: var(--ami-ink);
}

/* Stacked label: action on top, weight underneath, so the size is attached to
   the button rather than floating in the layout as a stray number. */
.doc__get {
  flex: none;
  flex-direction: column;
  gap: .15rem;
  text-align: center;
}
.doc__size { font-size: .8125rem; font-weight: 400; opacity: .85; }
.link-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem 1rem;
  border: var(--rule);
  border-radius: 10px;
  background: var(--ami-offwhite);
  font-family: var(--ami-font-ui);
  font-size: 1rem;
  line-height: 1.35;
}
.section--alt .link-item { background: var(--ami-offwhite); }
/* The whole row is the target, not just the words: comfortable on a phone and
   for anyone whose aim is not precise. */
.link-item__link {
  display: block;
  margin: -.85rem -1rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  /* --ami-btn-hover (#256C45), NOT --ami-green-deep (#429047). The brand green
     measures 3.95:1 on white, which fails AA for body text. Measured with
     verify.mjs --contrast, not eyeballed. */
  color: var(--ami-btn-hover);
  font-weight: 700;
  text-decoration: none;
}
.link-item__link:hover { background: var(--ami-white); text-decoration: underline; }
.link-item__link:focus-visible { outline: 3px solid var(--ami-btn-hover); outline-offset: 2px; }
.link-item__ext { margin-left: .35rem; font-size: .85em; }
.link-item__name { font-weight: 700; color: var(--ami-ink); }
.link-item__call { color: var(--ami-btn-hover); font-size: .9375rem; }
/* Unresolved source defects. Never styled as a link, so nobody clicks something
   that cannot work and nobody reads it as finished. */
.link-item--pending { border-style: dashed; }

/* A link that leaves the rebuild for one of this site's own candidate domains.
   Marked rather than removed: the address is Jennifer's and the primary-domain
   decision is still open, so the row warns instead of deciding. */
.link-item--offsite { border-color: var(--ami-eyebrow); }
.link-item--offsite .link-item__flag { display: block; margin-top: .35rem; }
.link-item__flag,
.link-item__raw { font-size: .875rem; color: var(--ami-ink); word-break: break-all; }
.link-item__raw { font-family: var(--ami-font-mono); }

@media (max-width: 767px) {
  .link-list { grid-template-columns: 1fr; }
  .hero__cta--center .btn { width: 100%; }
}

/* ==========================================================================
   LEAD MODAL
   Opened by "Help me choose a plan". Kalob asked for the data capture form to
   appear before the under-65 / 65+ / disability chooser.

   Dismissible on purpose, and that is not a loophole: a modal a keyboard or
   screen-reader user cannot escape is a trap, so Escape, the overlay and a
   visible close control all work, and focus returns to the button that opened
   it. Someone who closes it still reaches the chooser.

   No literal colours. Everything here is a token that already existed, except
   the overlay wash, which is a black alpha and has no meaningful token form.
   ========================================================================== */
.lead-modal[hidden] { display: none; }
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: rgba(0, 0, 0, .55);
  overflow-y: auto;
}
.lead-modal__box {
  background: var(--ami-white);
  border: var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: var(--s-6);
  width: min(38rem, 100%);
  max-height: calc(100vh - var(--s-6));
  overflow-y: auto;
  position: relative;
}
.lead-modal__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.lead-modal__head h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); margin-right: auto; }
.lead-modal__close {
  flex: none;
  border: var(--rule);
  background: var(--ami-offwhite);
  color: var(--ami-ink);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.lead-modal__close:hover { background: var(--ami-border); }
.lead-modal__box > * + * { margin-top: var(--s-4); }
.lead-modal__skip {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ami-link);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
/* Consent refused: the box is called out visibly, not just by colour. */
.consent.is-invalid {
  outline: 3px solid var(--ami-error);
  outline-offset: 4px;
  border-radius: 6px;
}
/* font-family here as well as on .form-status: say() REPLACES className rather
   than adding to it, so an error message is not also a .form-status and would
   otherwise drop to the body font mid-form. */
.form-error { color: var(--ami-error); font-weight: 700; font-family: var(--ami-font-ui); }

/* Submission status. Empty until the form has something to say, and it must not
   reserve space while empty or every form carries a permanent gap. The class the
   JS used to set here was `todo`, whose rule was deleted as dead in an earlier
   pass, so even once the element existed its messages would have been unstyled
   body text. */
.form-status { margin: 0; font-family: var(--ami-font-ui); font-size: .9375rem; }
.form-status:empty { display: none; }
.form-status.is-working { color: var(--ami-btn-hover); font-weight: 700; }
/* Sent. Deliberately the same green as is-working rather than --ami-green-deep,
   which is only 3.3:1 on white and fails at this size. The two states are told
   apart by their words, which is what a screen reader gets anyway. Only the
   note form reaches this state; the modal navigates instead. */
.form-status.is-ok { color: var(--ami-btn-hover); font-weight: 700; }
/* Honeypot. Off-screen rather than display:none, because some bots skip
   display:none fields. Never focusable: tabindex="-1" in the markup. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}