/* ============================================================
 * /eligibility-check  —  page-specific styles
 *
 * Loads alongside /brand.css.
 *
 * Brand-canon notes baked in:
 *   - A Medicare rejection is not an error — Stone 60 for not-eligible
 *     and cannot-determine verdicts, NOT error red.
 *     (colour-palette.md §"How to message a Medicare rejection".)
 *   - Functional UI colour never used as marketing decoration —
 *     no error red on "$X caught", no warning amber on "cannot
 *     determine" pills.
 *   - "Per transaction" not "per item" (messaging-pillars.md §"What
 *     we don't claim to check").
 *   - Specimen-sheet aesthetic on §3 + §4 — typography + structured
 *     data laid out with the care of a print specimen sheet.
 *     (imagery-direction.md §5.)
 * ============================================================ */


/* ============================================================ */
/* Active-nav state — Integrations active on /eligibility-check  */
/* ============================================================ */
/* ============================================================
 * Typography — follows the canon. DM Serif Display only at
 * Display XL/L (hero h1) and on impact figures (.specimen-total
 * .total-amount, .specimen-caught .caught-amount — caught-dollar
 * figures, per data-visualisation.md big-number-hero rule).
 * Section h2s, mode-card / not-checked-head h3s, trace text — all
 * Inter. Earlier serif overrides removed in the 2026-05-25 sweep.
 * ============================================================ */


/* ============================================================ */
/* Shared building blocks                                         */
/* ============================================================ */
.section-heading .lede {
  margin-top: var(--space-20);
  max-width: 58ch;
}


/* ============================================================ */
/* §1  HERO                                                       */
/* ============================================================ */
@media (min-width: 1024px) {
  }

/* Tagline — matches /pricing and / treatment exactly for cross-page consistency.
   Royal italic, ~20–28px fluid, modest size, modest top margin. The brand-
   standard secondary lockup that sits under the h1. */
/* Descriptor — matches /pricing and other sibling-page descriptor exactly.
   18px Inter Stone-60, 24px top margin, 44ch reading measure.
   On /eligibility-check the descriptor IS the patient-led beat:
   "Tell the patient what they'll pay, before they consent."
   No serif, no italic, no Royal — quiet typography, the words do the work. */
.product-hero .cta-row {
  display: flex; flex-wrap: wrap;
  gap: var(--space-16) var(--space-24);
  align-items: center;
  /* Matches /pricing — 48px breath between descriptor and CTAs. */
  margin-top: var(--space-48);
}

/* — Hero card: the tri-state eligibility check data card — */
@media (max-width: 500px) {
  .ec-card .card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  }

.ec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16) 0;
}
/* Subtle divider between rows — same hairline as the card-meta border, applied
   only between rows so the top and bottom of the row stack don't have stray rules. */
.ec-row + .ec-row {
  border-top: 1px solid var(--color-stone-20);
}

/* All rows share the same 3-cell grid (icon · meta · pill). The patient,
   eligible, and not-eligible rows look structurally identical so the eye
   reads them as one stack of "checked X, result Y" outcomes. */

/* Section distinction inside the card — the patient verification row is its
   own beat, the items are a separate beat. A small uppercase tag between them
   ("Items checked") labels the items section. Same .label-s eyebrow style used
   on the page's section headings — familiar visual vocabulary, brand-on.
   No competing colours, no fighting borders. */
.ec-card .ec-section-tag {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-stone-20);
}
/* No double-divider between the tag and the first item underneath it
   (the tag carries the visual break already). */
.ec-card .ec-section-tag + .ec-row {
  border-top: none;
  padding-top: var(--space-8);
}

.ec-row .row-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ec-row .row-item {
  color: var(--color-midnight);
}
.ec-row .row-mbs {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: var(--space-8);
  vertical-align: 1px;
}
.ec-row .row-detail {
  color: var(--color-stone-60);
  letter-spacing: 0;
  line-height: 1.4;
}

/* Status pill carries both the verdict colour and its glyph (icon sits inside
   the pill, next to the label — matching the App's verdict pills). The icon
   inherits the pill's colour via currentColor. */
.ec-row .row-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.ec-row .row-status svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}
/* Eligible + Verified pills share the same green — both are "yes" outcomes.
   The visual distinction between the verification row and the items section
   is carried by whitespace below, not pill colour. */
.ec-row .row-status.eligible,
.ec-row .row-status.matched {
  color: var(--verdict-eligible);
  background: color-mix(in srgb, var(--verdict-eligible) 12%, transparent);
}
.ec-row .row-status.not-eligible {
  color: var(--verdict-not-eligible);
  background: color-mix(in srgb, var(--verdict-not-eligible) 12%, transparent);
}
/* Cannot-determine pill — Info-slate, matching the verdict layer. */
.ec-row .row-status.cannot-determine {
  color: var(--verdict-cannot-determine);
  background: color-mix(in srgb, var(--verdict-cannot-determine) 12%, transparent);
}

/* Bore-echo capsule on the patient-verification beat — a quiet nod to the
   logo's MRI bore (the aperture Medicare's match passes through). One dose,
   static. Also gives the verification its own beat, distinct from the items. */
.ec-card .ec-row-verification {
  background: var(--color-mist);
  border-radius: var(--radius-pill);
  padding: var(--space-12) var(--space-20);
  margin-block: var(--space-8) var(--space-4);
  border-top: none;
}
/* The "Items checked" tag already carries a top rule; with the capsule above
   it we don't want a double divider. */
.ec-card .ec-row-verification + .ec-section-tag {
  border-top: none;
  padding-top: var(--space-12);
}

/* Hero card footer — left label, right caught figure (the bottom line). */
.ec-card .ec-card-foot {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-stone-20);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-16);
}
.ec-card .ec-card-foot .foot-label {
  font-family: var(--font-mono); font-size: var(--type-label-s); letter-spacing: 0.02em;
  color: var(--color-stone-60);
}
.ec-card .ec-card-foot .foot-amount {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--color-navy); font-feature-settings: "tnum" 1;
}

/* Hero-tail micro-proof bar, mirrors /air */


/* ============================================================ */
/* §2  DATA-GAP SPECIMEN — heading + card 2-col at desktop        */
/* Mirrors the .product-hero pattern (1.3fr 1fr text + card).     */
/* Stacks on mobile. Card stays at 520px, sits in the right col.  */
/* ============================================================ */
.specimen-feature {
  padding-top: var(--space-section-generous);
  padding-bottom: var(--space-section-generous);
}
.specimen-feature .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
@media (min-width: 960px) {
  .specimen-feature .container {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-64);
  }
}
.specimen-feature .specimen-heading {
  max-width: 56ch;
  margin-bottom: 0;
}

/* Stage centers the card in the section. The card stays narrow (~520px)
   to match the homepage hero `.rr-card` proportions — the section heading
   above takes the full container width, the card below sits centered. */
.specimen-stage {
  display: flex;
  justify-content: center;
}

/* Finding card — mirrors the homepage `.rr-card .single-finding` exactly
   (chrome, proportions, font sizes). Same shape rebuilt locally because
   `.rr-card` styles live in pages/index.css, not in shared brand.css. */
.finding-card,
.correction-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  padding: var(--space-32);
  box-shadow: var(--shadow-card-hero);
  width: 100%;
  max-width: 520px;
}

.finding-card .card-meta,
.correction-card .card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-mist);
  gap: var(--space-12);
}
.finding-card .card-meta .meta-left,
.correction-card .card-meta .meta-left {
  display: inline-flex; align-items: center; gap: var(--space-12);
}
.finding-card .card-meta .brand-mark,
.correction-card .card-meta .brand-mark {
  width: 28px; height: 28px;
  color: var(--color-navy);
  display: block; flex-shrink: 0;
}
.finding-card .card-footer,
.correction-card .card-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-mist);
  font-family: var(--font-mono); font-size: var(--type-label-s);
  color: var(--color-stone-60);
  letter-spacing: 0.02em;
  text-align: right;
}

/* Inner content for the finding card — pill + reason + item footer.
   Left-aligned, the reason gets a 2px Navy left rule — the not-eligible verdict
   colour, matching the `.eligibility-card .finding-reason` treatment on the
   homepage. A Medicare 'not eligible' is an answer, not an error (never Royal). */
.finding-card .single-finding {
  padding: var(--space-32) 0 var(--space-24);
  display: flex; flex-direction: column;
  gap: var(--space-24);
  align-items: flex-start;
}
.finding-card .pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  background: color-mix(in srgb, var(--verdict-not-eligible) 12%, var(--color-paper));
  color: var(--verdict-not-eligible);
  white-space: nowrap;
}
.finding-card .pill svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--verdict-not-eligible);
}
/* Override brand.css blockquote default — this is product output, not a
   customer pull-quote. Inter, not DM Serif Display. */
.finding-card .finding-reason {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 1.8vw + 1rem, 1.875rem);
  font-weight: 600;
  color: var(--color-midnight);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-inline-size: 24ch;
  border-inline-start: 2px solid var(--verdict-not-eligible);
  padding-inline-start: var(--space-20);
  margin: 0;
}
.finding-card .finding-item-foot {
  display: inline-flex; align-items: baseline; gap: var(--space-8);
  color: var(--color-stone-60);
  padding-left: var(--space-20);
  margin: 0;
}
.finding-card .finding-item-foot .item-no {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--color-stone-60); font-weight: 500;
}
.finding-card .finding-item-foot .item-no .mbs {
  /* 9px is a deliberate micro exception — below the 11px label-s floor; sans reset off the mono .item-no. */
  font-family: var(--font-sans); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--color-stone-60);
  margin-right: 4px;
}
.finding-card .finding-item-foot .item-name {
  color: var(--color-stone-60);
}
.finding-card .finding-item-foot .item-name::before {
  content: "· ";
  color: var(--color-stone-60);
  margin-right: 2px;
}

/* Caught figure elevated to a bottom-line total beneath the finding card.
   data-visualisation.md: DM Serif Display for big-number heroes; the dollar
   we saved is the result, not a footnote. Scoped to §2 so §4 (which shares
   .specimen-stage) is untouched. */
.specimen-feature .specimen-stage { flex-direction: column; align-items: center; }
.specimen-caught {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4);
  width: 100%; max-width: 520px;
  margin-top: var(--space-24);
}
.specimen-caught .caught-amount {
  font-family: var(--font-display);
  font-size: var(--type-hero-num);
  line-height: 1;
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--color-navy);
  font-feature-settings: "tnum" 1;
}
/* ============================================================ */
/* §3  THREE POSSIBLE VERDICTS — typology cards                  */
/* Three equal-weight cards in a row at desktop, stacked on      */
/* mobile. Each card colour-codes its verdict via icon + title.  */
/* Reads as "the three possible answers," not as a list of       */
/* sequential response rows.                                      */
/* ============================================================ */
.ec-verdicts {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-standard);
}

.verdicts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  margin-top: var(--space-48);
}
@media (min-width: 720px) {
  .verdicts-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
  }
}

/* No card chrome — bare text blocks in a 3-col grid with a 2px left
   rule in the verdict colour. Matches the homepage `.line` pattern on
   the problem section. Icon + title + description sit in the rule's
   indent. */
.verdict-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-12);
  padding-left: var(--space-20);
  border-left: 2px solid var(--color-stone-20);
}
.verdict-yes   { border-left-color: var(--verdict-eligible); }
.verdict-no    { border-left-color: var(--verdict-not-eligible); }
.verdict-maybe { border-left-color: var(--verdict-cannot-determine); }

.verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.verdict-icon svg { width: 28px; height: 28px; }
.verdict-yes   .verdict-icon { color: var(--verdict-eligible); }
.verdict-no    .verdict-icon { color: var(--verdict-not-eligible); }
.verdict-maybe .verdict-icon { color: var(--verdict-cannot-determine); }

.verdict-title {
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.verdict-yes   .verdict-title { color: var(--verdict-eligible); }
.verdict-no    .verdict-title { color: var(--verdict-not-eligible); }
.verdict-maybe .verdict-title { color: var(--verdict-cannot-determine); }

.verdict-description {
  line-height: 1.55;
  color: var(--color-stone-60);
  margin: 0;
}

.verdicts-handoff {
  margin-top: var(--space-48);
  text-align: center;
  color: var(--color-stone-60);
}
/* .verdicts-handoff links underline via the shared .copy rule (container carries .copy). */


/* ============================================================ */
/* §5  CAPABILITIES + §7 disclosure                              */
/* ============================================================ */
.cap-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-32);
  display: grid;
  gap: var(--space-16);
  align-content: start;
}
.cap-card h3 {
  color: var(--color-midnight);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cap-card ul {
  list-style: none;
  display: grid;
  gap: var(--space-12);
}
.cap-card li {
  position: relative;
  padding-left: var(--space-20);
  line-height: 1.55;
  color: var(--color-stone-60);
}
.cap-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-royal);
}
.cap-card li code {
  font-family: var(--font-mono);
  font-size: var(--type-label-m);
  background: var(--color-mist);
  color: var(--color-navy);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

/* ============================================================ */
/* §6  MODES  — single vs bulk                                    */
/* ============================================================ */
.ec-modes {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-standard);
}
.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
@media (min-width: 768px) {
  .mode-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-32); }
}
.mode-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-32);
  display: grid;
  gap: var(--space-16);
  align-content: start;
}
.mode-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-navy) 6%, transparent);
  border-radius: var(--radius-pill);
  justify-self: start;
}
.mode-card h3 {
  color: var(--color-midnight);
  line-height: 1.25;
}
.mode-card .mode-lede {
  line-height: 1.6;
}
.mode-card ul {
  list-style: none;
  display: grid;
  gap: var(--space-8);
  padding: 0;
  margin: 0;
}
.mode-card li {
  position: relative;
  padding-left: var(--space-20);
  line-height: 1.55;
  color: var(--color-stone-60);
}
.mode-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-royal);
}
/* .mode-card links underline via the shared .copy rule (container carries .copy). */
.mode-card a:hover { color: var(--color-navy); }


/* ============================================================ */
/* §7  TRUST STRIP                                                */
/* ============================================================ */
/* ============================================================ */
/* §8  AUDIENCE  — 3+3 grid                                       */
/* ============================================================ */
.aud-card h3 {
  color: var(--color-midnight);
  margin-bottom: var(--space-8);
  line-height: 1.3;
}


/* ============================================================ */
/* §7b  TESTIMONIAL — customer voice after the trust strip        */
/* A single reconciled outcome in the canon blockquote primitive  */
/* (DM Serif Display + 3px Navy rule). Trust moves from stated to  */
/* attested. Sits between the trust strip (§7) and audience (§8).  */
/* ============================================================ */
.ec-testimonial .container-content {
  display: flex;
  justify-content: center;
}
.ec-testimonial blockquote {
  max-inline-size: 40rem;
}


/* ============================================================ */
/* §9  IN EVERY PLAN                                              */
/* ============================================================ */
.ec-every-plan { text-align: center; }
.ec-every-plan .label-s {
  display: block;
  color: var(--color-navy);
  margin-bottom: var(--space-12);
}
.ec-every-plan h2 {
  margin-bottom: var(--space-16);
}
.ec-every-plan .lead {
  margin-bottom: var(--space-32);
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}
.ec-every-plan .action {
  display: flex;
  justify-content: center;
}


/* ============================================================ */
/* §10  FAQ                                                       */
/* ============================================================ */
.ec-faq .section-heading {
  margin-left: auto;
  margin-right: auto;
}
.faq-list summary em {
  font-style: italic;
  color: var(--color-stone-60);
  font-weight: 500;
}
.faq-list .answer strong {
  color: var(--color-midnight);
  font-weight: 500;
}
.faq-list .answer em {
  font-style: italic;
  color: var(--color-stone-90);
}
.faq-list .answer code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-mist);
  color: var(--color-navy);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}
/* "What a check returns" answer: the Rebates result fields are a nested list.
   Indent them behind a quiet Mist left rule so they read as belonging to Rebates. */
.faq-list ul.answer ul {
  margin-block-start: var(--space-12);
  margin-inline-start: var(--space-12);
  padding-inline-start: var(--space-16);
  border-inline-start: 2px solid var(--color-mist);
}
/* §5b  A glimpse of the checks — card grid (reuses .cap-card, icon-less and
   denser since each card is a name + one line). White cards elevate on mist. */
.ec-checks-grid .cap-card {
  padding: var(--space-24);
  gap: var(--space-12);
  background: transparent;
  box-shadow: none;
}
.ec-checks-grid .cap-card h3 { color: var(--color-midnight); }
/* ============================================================ */
/* §11  CTA                                                       */
/* ============================================================ */
.ec-cta {
  padding-top: var(--space-section-generous);
  padding-bottom: var(--space-section-generous);
  text-align: center;
}
.ec-cta h2 {
  margin-bottom: var(--space-16);
}


/* ============================================================ */
/* §5  Cap-grid three-column override                            */
/* Default cap-grid in brand.css is 2-col at >=640px. The         */
/* trimmed "identify · check · calculate" trio fits 3-col cleanly */
/* at desktop; mobile stays single-column.                        */
/* ============================================================ */
@media (min-width: 1024px) {
  .cap-grid.cap-grid-three { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================ */
/* §4  VERIFICATION SPECIMEN                                      */
/* Two-column "submitted · returned" layout demonstrating the     */
/* Patient Card Mismatch case: PETER FLETCHER submitted, Medicare */
/* returns Verified=false with CorrectGivenName=CLINT. Inherits   */
/* the .specimen shell + .specimen-meta from above.               */
/* ============================================================ */
.ec-verification {
  padding-top: var(--space-section-standard);
  padding-bottom: var(--space-section-standard);
}
.ec-verification .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
@media (min-width: 960px) {
  .ec-verification .container {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-64);
  }
}
.ec-verification .section-heading {
  max-width: 56ch;
}
.ec-verification .section-heading .lede code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--color-mist);
  color: var(--color-navy);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

/* Inner content for the correction card — before/after pair with arrow,
   inside the same `.rr-card`-style chrome as §2 (defined above). */
.correction-card .correction-body {
  padding: var(--space-32) 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-16);
}
.correction-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
  min-width: 0;
}
.correction-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-midnight);
}
.correction-value.field-stale {
  text-decoration: line-through;
  text-decoration-color: var(--color-stone-40);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  color: var(--color-stone-60);
}
.correction-value.field-corrected {
  color: var(--color-success-600);
}
.correction-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-stone-60);
}
.correction-arrow svg { width: 20px; height: 20px; }