/* =============================================================
   PLAN-CARDS — V21 Component D · Mode 1
   3-card plan selection in the dashboard zone.
   Design: nora-app-design-brief.md §5 + quiz-app-capture-flow.md §7
   ============================================================= */

.plan-cards {
  /* V24 Tier 5: SHC-Match defaults (white/gold/teal/navy) */
  --pc-ink:        var(--ink, #0E2A3A);
  --pc-cream:      var(--cream, #FFFFFF);
  --pc-lemon:      var(--lemon, #FFC857);
  --pc-blush:      var(--blush, #FFFFFF);
  --pc-pink:       var(--pink, #00B5D8);
  --pc-pink-dark:  var(--pink-dark, #007A93);
  --pc-mute:       var(--mute, #5D7C8E);
  --pc-rule:       var(--rule, #DDE9EE);

  font-family: 'Inter', system-ui, sans-serif;
  color: var(--pc-ink);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* v31 F3 — Honest "broker config gap" notice when the Golden Ticket bundle
   isn't returning for the user's state. Renders above the head row so users
   see the framing before they see the plans. Per D4 Option C ship-the-truth. */
.plan-cards__fallback-notice {
  background: rgba(255, 216, 77, 0.18); /* lemon-tint */
  border: 1px solid rgba(255, 216, 77, 0.55);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pc-ink);
}
.plan-cards__fallback-notice .pcn-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-ink);
  padding: 2px 6px;
  background: var(--lemon, #FFD84D);
  border-radius: 4px;
  margin-right: 6px;
}
.plan-cards__fallback-notice .pcn-em {
  font-style: italic;
  color: var(--pc-ink);
  opacity: .85;
}

/* v31 F3 — state-fallback mid-tier eyebrow gets a muted treatment so it
   visually distinguishes from the lemon-star RECOMMENDED ⭐. */
.plan-card__tier-eyebrow--fallback {
  background: rgba(0, 181, 216, 0.10) !important; /* pink-mute */
  color: var(--pc-ink) !important;
  letter-spacing: .14em;
}

/* V36 Phase 3 · Task 3.1 — Pager prev/next + dots removed (dead UI; no
   caller ever passed onSetChange). The compare-modal stacked-toggle
   (Task 3.2) replaces that "switch layout" affordance.
   DAV-174 fix 3 — .plan-cards__set-label rendering removed from JS;
   .plan-cards__head kept for the fallback notice (bundle_quality). */
.plan-cards__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.plan-cards__set-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 600;
}

/* v31 Task 2.1 — base grid (default = vertical stack on desktop).
   Tablet + mobile breakpoints override below. */
.plan-cards__grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

/* ---- single card ---- */
/* V23 H4 — min-height locks all cards to the same vertical envelope.
   Equal-heights via flex column + min-height. */
.plan-card {
  position: relative;
  background: var(--pc-cream);
  border: 2px solid var(--pc-ink);
  border-radius: 16px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 4px 4px 0 var(--pc-ink);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.22,.61,.36,1), box-shadow 180ms cubic-bezier(.22,.61,.36,1);
  font-family: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  min-height: 480px;
}
.plan-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--pc-ink);
}

/* V24 Tier 5 — choreographed cascade entrance (60ms stagger, 460ms swift-settle) */
.plan-cards .plan-card {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 460ms cubic-bezier(.22,.61,.36,1),
    transform 460ms cubic-bezier(.22,.61,.36,1),
    box-shadow 180ms cubic-bezier(.22,.61,.36,1);
}
.plan-cards.is-revealed .plan-card {
  opacity: 1;
  transform: translateY(0);
}
.plan-cards.is-revealed .plan-card:nth-child(1) { transition-delay: 0ms, 0ms, 0ms; }
.plan-cards.is-revealed .plan-card:nth-child(2) { transition-delay: 60ms, 60ms, 0ms; }
.plan-cards.is-revealed .plan-card:nth-child(3) { transition-delay: 120ms, 120ms, 0ms; }
.plan-cards.is-revealed .plan-card:nth-child(4) { transition-delay: 180ms, 180ms, 0ms; }
@media (prefers-reduced-motion: reduce) {
  .plan-cards .plan-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.plan-card:focus-visible {
  outline: 3px solid var(--pc-pink);
  outline-offset: 2px;
}

/* Recommended card — extra emphasis */
.plan-card--recommended {
  background: linear-gradient(180deg, #FFF8C8 0%, var(--pc-cream) 65%);
  box-shadow: 6px 6px 0 var(--pc-ink);
}
.plan-card--recommended:hover {
  box-shadow: 8px 8px 0 var(--pc-ink);
}

/* Selected card — flips background to lemon, locks the shadow */
.plan-card.is-selected {
  background: var(--pc-lemon);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--pc-ink);
}
.plan-card--recommended.is-selected {
  background: linear-gradient(180deg, var(--pc-lemon) 0%, #FFE49A 100%);
}

/* V24 Tier 3 · Robinhood milestone celebration — card lemon-glow.
   Single 1.0s breath on the chosen card the moment lock fires.
   Ink-shadow grows 4 → 6 → 4. Pairs with the dial radial pulse. */
.plan-card.is-locking {
  animation: pc-lock-glow 1.0s cubic-bezier(.22,.61,.36,1) 1 forwards;
}
@keyframes pc-lock-glow {
  0% {
    box-shadow: 4px 4px 0 var(--pc-ink),
                0 0 0 0 rgba(255, 200, 87, 0);
  }
  50% {
    box-shadow: 6px 6px 0 var(--pc-ink),
                0 0 18px 4px rgba(255, 200, 87, 0.55);
  }
  100% {
    box-shadow: 4px 4px 0 var(--pc-ink),
                0 0 0 0 rgba(255, 200, 87, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card.is-locking {
    animation: none !important;
  }
}

/* Tier badge (top of card) */
.plan-card__tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-ink);
  border: 1.5px solid var(--pc-ink);
  border-radius: 999px;
  background: var(--pc-cream);
  line-height: 1;
}
.plan-card--recommended .plan-card__tier {
  background: var(--pc-lemon);
}

/* V23 H6 — RECOMMENDED ⭐ pill badge (replaces tier label on middle card) */
.plan-card__rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-ink);
  background: var(--pc-lemon);
  border: 2px solid var(--pc-ink);
  border-radius: 999px;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--pc-ink);
}

/* Card top row: carrier logo + network type */
.plan-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}
.plan-card__carrier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* DAV-77 — Baseline-aware tag row. Sits just below the carrier line,
   above the headline. Two variants:
   • --same-carrier: ink-on-cream, neutral acknowledgement
   • --higher-deductible: soft-red, honest-losses pattern */
.plan-card__baseline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 -2px;
  width: 100%;
}
.plan-card__baseline-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: help;
}
.plan-card__baseline-tag--same-carrier {
  background: var(--cream, #FFFAEA);
  color: var(--ink, #0E2A3A);
  border: 1px solid var(--ink, #0E2A3A);
}
.plan-card__baseline-tag--higher-deductible {
  background: #FFE9E3;
  color: #8A2A1A;
  border: 1px solid #C4593E;
}
/* DAV-77 follow-up — Similar-pricing tag (server-side baseline rank).
   Muted treatment because the entire point of this flag is to demote the
   plan's framing — "not a savings story, look at coverage instead". */
.plan-card__baseline-tag--similar-price {
  background: rgba(74, 102, 120, 0.08);
  color: var(--pc-mute, #4A6678);
  border: 1px dashed var(--pc-mute, #4A6678);
}
.plan-card__carrier-logo {
  width: 36px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-card__carrier-logo img,
.plan-card__carrier-logo svg {
  max-width: 100%;
  max-height: 22px;
  display: block;
}
.plan-card__carrier-text {
  /* V27 — was clipping "Regence BCBS" by 3 px (78/75) under default container.
     Tightened letter-spacing -.005 → -.012 + slight font-size trim from 11→10.5
     fits the longest carrier name in the canonical mock data without changing
     the visual hierarchy on shorter strings (UHC / Aetna / Cigna). */
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pc-mute);
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-card__network {
  display: inline-block;
  padding: 3px 8px;
  background: var(--pc-lemon);
  color: var(--pc-ink);
  border: 1.5px solid var(--pc-ink);
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}

/* Plan name (legacy — kept for backwards compatibility) */
.plan-card__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--pc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* V23 H5 — short tier name + full technical name as a 3-line clamped subhead */
.plan-card__nameblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 76px;
}
.plan-card__short {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--pc-ink);
  margin: 0;
}
.plan-card__name-full {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--pc-mute);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}

/* Price block — Component A goes here in compact mode.
   Fallback: simple text rendering if Component A not loaded. */
.plan-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 0 8px;
  border-top: 1px dashed var(--pc-rule);
  border-bottom: 1px dashed var(--pc-rule);
}
.plan-card__price-fallback {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--pc-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
  display: inline-flex;
  align-items: baseline;
}
.plan-card__price-fallback .pcp-prefix,
.plan-card__price-fallback .pcp-suffix {
  font-size: 0.42em;
  font-weight: 500;
  font-style: italic;
  color: var(--pc-mute);
  letter-spacing: 0;
}
.plan-card__price-fallback .pcp-prefix { margin-right: 0.05em; }
.plan-card__price-fallback .pcp-suffix { margin-left: 0.06em; }
.plan-card__price-host {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
/* When ValueStack is mounted inside a card, override its size to
   compact display only (no big arc visible on the card). */
.plan-card__price-host .value-stack {
  width: auto;
  align-items: flex-start;
  text-align: left;
}
.plan-card__price-host .value-stack__primary {
  width: auto;
  height: auto;
  display: inline-flex;
  padding: 4px 0 0;
}
.plan-card__price-host .value-stack__arc {
  display: none; /* compact — no arc */
}
.plan-card__price-host .value-stack__sparks { display: none; }
.plan-card__price-host .value-stack__primary-number {
  font-size: 36px;
}
.plan-card__price-host .value-stack__estimate-note {
  display: none;
}
.plan-card__price-host .value-stack__secondary,
.plan-card__price-host .value-stack__tertiary {
  display: none;
}

/* Highlights list */
.plan-card__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-card__highlights li {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--pc-ink);
  display: flex;
  gap: 6px;
}
.plan-card__highlights li strong {
  font-weight: 600;
  color: var(--pc-ink);
}
.plan-card__highlights li span {
  color: var(--pc-mute);
  flex: 1;
  min-width: 0;
}

/* Description */
.plan-card__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--pc-mute);
  margin: 0;
}

/* CTA */
.plan-card__cta {
  margin-top: auto;
  padding-top: 8px;
}
.plan-card__cta-btn {
  width: 100%;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  background: var(--pc-pink);
  color: var(--pc-ink);
  border: 2px solid var(--pc-ink);
  border-radius: 10px;
  padding: 11px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--pc-ink);
  transition: transform 180ms cubic-bezier(.22,.61,.36,1), box-shadow 180ms cubic-bezier(.22,.61,.36,1);
  text-align: center;
  white-space: normal;
  box-sizing: border-box;
}
.plan-card__cta-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pc-ink);
}
.plan-card__cta-btn:active {
  transform: translate(0,0);
  box-shadow: 1px 1px 0 var(--pc-ink);
}
.plan-card.is-selected .plan-card__cta-btn {
  background: var(--pc-lemon);
}

/* V23 M4 — recommended CTA gets a subtle pulse to nudge selection.
   Pulse pauses on hover/active so users see the hover lift cleanly. */
.plan-card--recommended:not(.is-selected) .plan-card__cta-btn {
  animation: pc-rec-pulse 2.4s ease-in-out infinite;
}
.plan-card--recommended:hover .plan-card__cta-btn,
.plan-card--recommended:active .plan-card__cta-btn,
.plan-card--recommended.is-selected .plan-card__cta-btn {
  animation: none;
}
@keyframes pc-rec-pulse {
  0%, 100% { box-shadow: 3px 3px 0 var(--pc-ink); }
  50%      { box-shadow: 3px 3px 0 var(--pc-ink), 0 0 0 4px rgba(255, 232, 110, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card--recommended:not(.is-selected) .plan-card__cta-btn {
    animation: none;
  }
}

/* DAV-174 fix 4 — Compare bar above grid replaces below-cards link.
   Brand-Confident: white bar + ink border + lemon CTA button. */
.plan-cards__compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: #fff;
  border: 1.5px solid var(--pc-ink, #0F172A);
  border-radius: 6px;
}
.plan-cards__compare-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-ink, #0F172A);
  letter-spacing: -.01em;
}
.plan-cards__compare-bar-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  min-height: 40px;
  background: var(--lemon, #FACC15);
  border: 2px solid var(--pc-ink, #0F172A);
  border-radius: 4px;
  color: var(--pc-ink, #0F172A);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow .1s;
}
.plan-cards__compare-bar-btn:hover {
  box-shadow: 2px 2px 0 var(--pc-ink, #0F172A);
}
@media (max-width: 480px) {
  .plan-cards__compare-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .plan-cards__compare-bar-btn { width: 100%; text-align: center; }
}

/* -----------------------------------------------------------
   RESPONSIVE — v31 Task 2.1
   Desktop ≥769px: vertical stack of full-width cards (max 880px),
   recommended-first, 5-column fact strip per card. Tablet 768-1023
   wraps fact strip to 3 cols for tighter layout. <768 handled below.
   ----------------------------------------------------------- */
@media (min-width: 769px) {
  .plan-cards__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: visible;
  }
  .plan-card {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
  }
  /* MAJOR fix (Cost-of-Care review) — `order:-1` used to visually pin the
     recommended card first while leaving it in its original DOM position,
     so keyboard/AT focus order disagreed with visual order. plan-cards.js
     mount() now renders the cards in this same order at the source (a
     stable sort putting tier:'recommended' first), so DOM order already
     matches; no CSS reorder needed or wanted here. */
  .plan-card__facts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .plan-card__facts .pc-facts-eyebrow {
    grid-column: 1 / -1;
  }
  .plan-card__fact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border-bottom: none;
    padding: 0;
  }
  .plan-card__fact-row .pc-fact-value {
    text-align: left;
  }
  .plan-card__fact-row.is-muted .pc-fact-value {
    color: var(--pc-mute);
    opacity: .7;
  }

  /* v31 Task 2.2 — OCR-aware comparison render.
     Switches from the flat 5-fact strip to 5 stacked compare rows when
     window.NORA_OCR_BASELINE is set. Targets the .plan-card--ocr class on
     the card root so non-OCR cards keep the Task 2.1 5-column grid. */
  .plan-card.plan-card--ocr .plan-card__facts {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .plan-card.plan-card--ocr .plan-card__facts .pc-facts-eyebrow {
    grid-column: 1 / -1;
  }
  .plan-card__fact-compare {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .plan-card__fact-compare .pc-fact-label {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
  }
  .plan-card__fact-compare .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
  }
  .plan-card__fact-compare .row .tag {
    color: var(--mute, var(--pc-mute, #888));
    font-family: var(--mono, monospace);
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .plan-card__fact-compare .row .val {
    font-weight: 500;
  }
  .plan-card__fact-compare .row.theirs .val {
    font-weight: 600;
  }
  .plan-card__fact-compare .row.theirs.is-muted .val {
    color: var(--pc-mute, #888);
    opacity: .8;
  }
  .plan-card__fact-compare .delta {
    font-size: 11px;
    border-top: 1px dashed var(--rule, var(--pc-rule, #ccc));
    padding-top: 3px;
    font-family: var(--mono, monospace);
    line-height: 1.35;
  }
  .plan-card__fact-compare .delta.win  { color: var(--green, #1a8c4d); }
  .plan-card__fact-compare .delta.loss { color: var(--red, #b03a2e); }
  .plan-card__fact-compare .delta.neutral { color: var(--pc-mute, #888); }

  .plan-card--ocr .plan-card-monthly-hero {
    font-size: 14px;
    font-weight: 700;
    color: var(--green, #1a8c4d);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 8px;
  }
  .plan-card--ocr .plan-card-monthly-hero.loss { color: var(--red, #b03a2e); }
  .plan-card--ocr .plan-card-monthly-hero.neutral { color: var(--pc-mute, #888); }
  .plan-card--ocr .plan-card-monthly-hero .pc-hero-sign {
    font-size: 16px;
    line-height: 1;
  }

  .plan-card__full-compare {
    grid-column: 1 / -1;
    margin-top: 6px;
    background: none;
    border: 0;
    border-top: 1px dashed var(--pc-rule, #ccc);
    /* DAV-95 — bump from 8/0 to 14/4 so the touch target clears the 44px
       floor on mobile. Was previously ~28px tall total. */
    padding: 14px 4px 12px;
    min-height: 44px;
    color: var(--pc-accent, #00B5D8);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .plan-card__full-compare:hover { text-decoration: underline; }
  .plan-card__full-compare:focus-visible {
    outline: 3px solid var(--pc-lemon, #FFC857);
    outline-offset: 2px;
    border-radius: 4px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .plan-card__facts { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
}
/* v31 mobile-ux-overhaul Task 1.1 — stack vertically across ALL mobile + tablet
   (480 → 768). The phablet range (481-767) previously hit the @1023 horizontal-
   scroll carousel which forced users to swipe a pager they rarely noticed. */
@media (max-width: 768px) {
  .plan-cards__grid {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .plan-card {
    min-width: 0;
    width: 100%;
  }
  /* MAJOR fix (Cost-of-Care review) — recommended-first ordering is now
     handled at the DOM source (plan-cards.js mount()'s renderOrderPlans
     stable sort), so this CSS `order:-1` reorder was removed rather than
     duplicated; keeping it here would have re-introduced the exact
     visual-vs-focus-order mismatch the fix at the source resolves. */
  /* V24 Tier 7 · 44px min tap targets on mobile */
  .plan-card {
    min-height: 44px;
  }
  .plan-card__cta-btn,
  .plan-cards__compare-bar-btn {
    min-height: 44px;
    padding: 12px 16px;
  }
  /* Replace hover-lift with tap-active feedback on touch */
  .plan-card:active {
    transform: scale(0.98);
    transition: transform 100ms cubic-bezier(.22,.61,.36,1);
  }
  /* V36 Phase 3 · Task 3.1 — .plan-cards__pager hide rule dropped along
     with the pager markup (dead UI; no caller wired onSetChange). */
}

/* V24 Tier 7 · Windows High Contrast Mode */
@media (forced-colors: active) {
  .plan-card,
  .plan-card__cta-btn,
  .plan-cards__compare-bar-btn {
    border: 2px solid CanvasText !important;
    box-shadow: none !important;
  }
  .plan-card.is-selected,
  .plan-card[aria-pressed="true"] {
    background: Highlight !important;
    color: HighlightText !important;
    forced-color-adjust: none;
  }
  .plan-card--recommended .plan-card__tier-badge {
    background: Highlight !important;
    color: HighlightText !important;
    forced-color-adjust: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plan-card,
  .plan-card__cta-btn {
    transition: none !important;
  }
  .plan-card:hover {
    transform: none !important;
  }
}

/* =============================================================
   V24 Tier 3 · Wealthfront-style "WHY THIS ONE" rationale band
   Renders only on the Recommended ⭐ card. Cream-tinted panel
   with a lemon-gold left border. Mono-caps eyebrow + Fraunces
   italic line. ≤14 words.
   ============================================================= */
.plan-card__rationale {
  margin: 8px 0 0;
  padding: 9px 10px 10px 12px;
  background: rgba(255, 200, 87, 0.10);
  border-left: 3px solid var(--pc-lemon);
  border-radius: 0 6px 6px 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.plan-card__rationale .pc-rationale-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-mute);
  line-height: 1;
}
/* The set-aware comparison (premium vs what a bad year exposes you to). Leads
   the block and is weighted above the stock rationale below it, because it is
   the line that actually decides between two cards — the generic description
   reads the same on every plan. */
/* The set-aware comparison, one discrete fact per bullet. This replaced a
   single 60-word sentence: it was accurate after the copy audit but nobody
   scans a paragraph at the moment of choosing a plan. Bullets let the eye
   land on the price gap, then how the plan pays, then what is capped.
   The bold lead phrase carries the fact; the rest is qualification, so a
   shopper skimming only the bold text still gets the comparison. */
.plan-card__rationale .pc-rationale-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plan-card__rationale .pc-rationale-bullets li {
  position: relative;
  padding-left: 15px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  line-height: 1.36;
  color: var(--pc-ink);
  letter-spacing: -.005em;
}
.plan-card__rationale .pc-rationale-bullets li + li { margin-top: 6px; }
.plan-card__rationale .pc-rationale-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pc-pink, #c2536a);
  opacity: .55;
}
.plan-card__rationale .pc-rationale-bullets li b {
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Only becomes a separator when BOTH parts are present — buildSetComparison
   returns [] whenever the set can't support an honest claim, and a lone
   rationale should not sit under a floating rule. */
.plan-card__rationale .pc-rationale-bullets + .pc-rationale-text {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--pc-rule, rgba(0,0,0,.08));
}
.plan-card__rationale .pc-rationale-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  line-height: 1.32;
  color: var(--pc-ink);
  margin: 0;
  font-weight: 500;
  letter-spacing: -.005em;
}
.plan-card__rationale .pc-rationale-text em {
  font-style: italic;
  color: var(--pc-pink);
  font-weight: 500;
}

/* Owner ask (2026-07-30) — per-card trigger for the Cost-of-Care overlay.
   Sits directly under WHY THIS ONE (see renderCard), i.e. still inside the
   price/rationale cluster, not down by the lock CTA. Deliberately a plain
   underlined text-button rather than another bordered pill — the card
   already carries a pill row, a hero, a rationale block, and (on FI cards)
   pricing-row chips; one more boxed control would compete with the CTA for
   visual weight, which is the "not buried by the CTA" ask read the other
   direction. */
.pc-cc-coc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px; /* touch-target */
  margin: 2px 0 0;
  padding: 4px 0;
  background: none;
  border: none;
  border-bottom: 1.5px solid currentColor;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pc-pink-dark);
  cursor: pointer;
}
.pc-cc-coc-trigger span { transition: transform 140ms ease; }
.pc-cc-coc-trigger:hover span { transform: translateX(2px); }
.pc-cc-coc-trigger:focus-visible { outline: 3px solid var(--pc-pink); outline-offset: 3px; }

/* Owner ask (2026-07-30) — "highly recommended with fixed indemnity
   plans" chip on the Accident ExpenseGuard row. FI-only by construction
   (renderAccidentRecommendedChip returns '' when !isFI) — this is styling
   only, never a second gate. Doubles as the lightbox trigger, so it needs
   a real focus/hover state like the other interactive chrome on the row. */
.pc-cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1.5px solid var(--pc-ink);
  background: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.pc-cc-chip--rec {
  background: var(--pc-mint-bg, #DCF3EA);
  border-color: var(--pc-mint-ink, #0D5C46);
  color: var(--pc-mint-ink, #0D5C46);
}
.pc-cc-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-mint, #61C9A8);
  flex-shrink: 0;
}
.pc-cc-chip:hover { box-shadow: 2px 2px 0 var(--pc-ink); transform: translate(-1px, -1px); }
.pc-cc-chip:focus-visible { outline: 3px solid var(--pc-pink); outline-offset: 2px; }

/* =============================================================
   V25 — 5-element card additions
   ============================================================= */

/* Tier eyebrow — universal small caps anchor at top of every card.
   Replaces the V21/V24 split between .plan-card__tier and .plan-card__rec-badge. */
.plan-card__tier-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-ink);
  border: 1.5px solid var(--pc-ink);
  border-radius: 999px;
  background: var(--pc-cream);
  line-height: 1;
}
.plan-card__tier-eyebrow--budget {
  background: var(--pc-cream);
}
.plan-card__tier-eyebrow--recommended {
  background: var(--pc-lemon);
  border-width: 2px;
  padding: 5px 12px;
  box-shadow: 2px 2px 0 var(--pc-ink);
}
.plan-card__tier-eyebrow--premium {
  background: var(--pc-cream);
  border-style: dashed;
}

/* Standalone carrier block (no longer wrapped in __topline) */
.plan-card > .plan-card__carrier {
  margin-top: 4px;
}

/* DAV-78 — Savings delta line. Italic Fraunces, no chrome. Renders below
   the price block when window.NORA_OCR_BASELINE has a real premium AND
   the plan price is lower (or higher, for the honest-losses variant). */
.plan-card__savings {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 -2px;
  padding: 0;
  background: none;
  border: none;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.005em;
  line-height: 1.25;
  color: var(--pc-mint, #1FBE85);
}
.plan-card__savings .pcs-mark {
  color: var(--pc-mint, #1FBE85);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.plan-card__savings .pcs-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.plan-card__savings .pcs-anchor {
  color: var(--pc-mute);
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .04em;
  margin-left: 2px;
  text-transform: uppercase;
}

/* DAV-81 — Honest-losses variant. When the plan costs MORE per month
   than the user's current card, name it in soft red instead of hiding.
   Same typography family, ink-on-red treatment. */
.plan-card__savings--loss {
  color: #8A2A1A;
}
.plan-card__savings--loss .pcs-mark,
.plan-card__savings--loss .pcs-amount {
  color: #8A2A1A;
}

/* DAV-83 — RU1 coverage-parity badges (replaces dollar deltas because
   RU1's old premium was employer-subsidized; dollar comparison would
   mislead). Mint-on-cream for wins, ink-on-cream for neutrals. */
.plan-card__parity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 -2px;
}
.plan-card__parity {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.plan-card__parity--same {
  background: var(--pc-cream, #FFFAEA);
  color: var(--pc-ink, #0E2A3A);
  border: 1px solid var(--pc-ink, #0E2A3A);
}
.plan-card__parity--better {
  background: rgba(31, 190, 133, 0.12);
  color: #0F5C2C;
  border: 1px solid #1F8A45;
}

/* DAV-83 — RU1 employer-subsidy footer. Plain Inter, muted, one short
   paragraph below the FI footer when present. Because the card root is a
   <button> and renderCard emits the footer AFTER an inner button
   (fullCompareHTML), the browser auto-closes the outer <button> and the
   footer ends up as a sibling node in the parent host (one per card).
   We dedupe with CSS — show only the first occurrence per host. */
.plan-card__ru1-footer {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(255, 248, 200, 0.45);
  border-left: 2px solid var(--pc-lemon, #FFC857);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pc-mute, #4A6678);
  border-radius: 3px;
}
.plan-card__ru1-footer ~ .plan-card__ru1-footer { display: none; }

/* =============================================================
   v0.7 — Key facts block (5 rows: Network · Deductible · OOP max
   · Primary care · Generic Rx). Same order on every card so the
   user can scan top-to-bottom across plans for direct comparison.
   ============================================================= */
.plan-card__facts {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed var(--pc-rule, rgba(14,42,58,.18));
  border-radius: 10px;
}
.plan-card.is-selected .plan-card__facts {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--pc-ink);
}
.pc-facts-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-mute);
  margin-bottom: 6px;
}
.plan-card__fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--pc-rule, rgba(14,42,58,.12));
  font-size: 12.5px;
  line-height: 1.3;
}
.plan-card__fact-row:last-child { border-bottom: none; }
.pc-fact-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  color: var(--pc-mute);
  letter-spacing: .005em;
  flex-shrink: 0;
}
.pc-fact-value {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: var(--pc-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-word;
}
.plan-card__fact-row.is-deferred .pc-fact-value {
  font-weight: 500;
  font-style: italic;
  color: var(--pc-mute);
  font-size: 11.5px;
}

/* =============================================================
   v0.8 C — "Not covered" strip on every plan card. Honest framing
   of the dental/vision/CI gap with a bundled add-on pill so users
   understand it AT compare time, not after lock.
   ============================================================= */
.plan-card__not-covered {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
  padding: 10px 12px;
  background: rgba(0, 181, 216, 0.06);
  border: 1px dashed var(--pc-pink-dark, #007A93);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.3;
}
.plan-card__not-covered .pc-nc-icons {
  font-size: 14px;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.plan-card__not-covered .pc-nc-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  color: var(--pc-ink, #0E2A3A);
}
.plan-card__not-covered .pc-nc-pill {
  flex-shrink: 0;
  background: var(--pc-pink-dark, #007A93);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.plan-card.is-selected .plan-card__not-covered {
  background: rgba(0, 181, 216, 0.12);
  border-style: solid;
}

/* =============================================================
   v1.0 · Fixed Indemnity (Plan 01 / Golden Rule HPG) treatments
   Adaptive plan-card schema per v1.0 plan §A. Rendered when the
   plan exposes `is_fixed_indemnity: true` (or matches GR HPG).
   Compliance: Copy Bible §8.4, Scott §3-4.
   ============================================================= */

/* Product-type badge — sits between the tier eyebrow and carrier block.
   Visually firm but not screaming; readability over decoration. */
.plan-card__product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 10px;
  background: var(--pc-ink, #0E2A3A);
  color: var(--pc-cream, #FFFFFF);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.plan-card--fixed-indemnity.is-selected .plan-card__product-badge {
  background: var(--pc-pink-dark, #007A93);
}

/* 1-line italic disclaimer on the card surface (Copy Bible §8.4).
   Sits between the key facts and any not-covered/rationale strip. */
.plan-card__fi-disclaimer {
  margin: 6px 0 4px;
  padding: 0 2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-style: italic;
  color: var(--pc-mute, #5D7C8E);
  line-height: 1.35;
}

/* Footer micro under the CTA — qualification + state-availability reminder. */
.plan-card__fi-footer {
  margin: 10px 0 0;
  padding: 8px 4px 0;
  border-top: 1px dashed var(--pc-rule, #DDE9EE);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--pc-mute, #5D7C8E);
  text-align: center;
}
.plan-card--fixed-indemnity.is-selected .plan-card__fi-footer {
  color: var(--pc-ink, #0E2A3A);
}

/* Brochure-link cell — tier-3 fallback when secondary + primary APIs both
   returned nothing for that benefit. Renders inline in the value column. */
.plan-card__fact-row.is-brochure .pc-fact-value--brochure {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-pink-dark, #007A93);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.plan-card__fact-row.is-brochure .pc-fact-value--brochure:hover {
  color: var(--pc-ink, #0E2A3A);
  text-decoration-thickness: 2px;
}

/* =============================================================
   v1.1 · Not-covered strip wrap fix
   The flex row clipped "Doesn't include dental · vision" mid-word
   when the card was narrow (LOCK-phase tablet, mid-tier card).
   Allow the row to wrap so the icons + text + Add pill never clip.
   ============================================================= */
.plan-card__not-covered {
  flex-wrap: wrap;
  row-gap: 6px;
}
.plan-card__not-covered .pc-nc-text {
  min-width: 0;            /* enable shrink inside flex */
}
.plan-card__not-covered .pc-nc-pill {
  margin-left: auto;       /* push pill to far right when on same line */
}

/* V32 PA-4.1 — Late-email-capture Lock CTA (skip-mode users only) */
.es-lock-cta {
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--lemon, #FFD84D);
  color: var(--ink, #1A1D2E);
  border: 0;
  font-family: var(--font-body, system-ui);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
}
.es-lock-cta:hover { filter: brightness(1.05); }

/* =============================================================
   DAV-168 Phase 4 — BundledCard host wrappers inside plan cards
   .pc-bc-subcard-host  : positioning wrapper for bc-subcard
   .pc-bc-combined-host : positioning wrapper for bc-combined-price
   BundledCard itself provides all visual styles (Phase 3).
   These wrappers only add spacing and a "click does not select
   plan" shield (pointer-events handled by bc-subcard's own toggle).
   ============================================================= */
.pc-bc-subcard-host {
  margin: 12px 0 0;
  /* Prevent tap on the subcard from bubbling up to the card button */
  display: block;
  text-align: left;
}
.pc-bc-combined-host {
  margin: 8px 0 12px;
  display: block;
}

/* Empty hosts (NoraAccident unavailable, non-recommended tier) take no space */
.pc-bc-subcard-host:empty,
.pc-bc-combined-host:empty {
  margin: 0;
  display: none;
}

/* DAV-179 — base styles for the full-compare link at ALL widths. The link
   is now a span[role=button] (a real <button> gets parser-ejected from the
   card, see plan-cards.js renderCard); without UA button chrome the prior
   desktop-only @media scoping left mobile with unstyled inline text and a
   ~17px tap target. display:block + 44px floor applies everywhere; the
   existing >=769px rules layer the grid placement on top. */
.plan-card__full-compare {
  display: block;
  margin-top: 6px;
  border-top: 1px dashed var(--pc-rule, #ccc);
  padding: 14px 4px 12px;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--pc-accent, #00B5D8);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.plan-card__full-compare:hover { text-decoration: underline; }
.plan-card__full-compare:focus-visible {
  outline: 3px solid var(--pc-lemon, #FFC857);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================================
   COST-OF-CARE REDESIGN
   Ported from the approved mockup (front-end design/v39-plan-card-
   directions/direction-cost-of-care.html), re-skinned onto this file's
   existing --pc-* token names instead of the mockup's standalone
   :root vars. Classes prefixed pc-cc- (card chrome), pc-coc- (the
   cross-plan Cost-of-Care module) and pc-lb- (the shared lightbox) to
   avoid colliding with any existing global class names.
   ============================================================= */

/* ---- eyebrow row: product-type pills + honest tagline ---- */
.pc-cc-eyebrow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.pc-cc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-ink);
  border: 1.5px solid var(--pc-ink);
  border-radius: 999px;
  background: var(--pc-cream);
  line-height: 1;
  white-space: nowrap;
}
.pc-cc-pill--fi { background: var(--pc-lemon); }
.pc-cc-pill--aca { background: rgba(0, 181, 216, 0.10); }
.pc-cc-pill--flag { background: #fff; border-style: dashed; }
/* MAJOR fix (Cost-of-Care review) — the visible "?" circle stays the
   designed 20px so it doesn't crowd the row/pill text it sits beside, but
   the actual clickable box (what a11y-audit/WCAG 2.2 SC 2.5.8 and the
   brief's own 40px touch-target ask measure) is grown to 40x40 via a
   transparent ::before that's centered on the button. The visible circle
   is drawn on the button itself so it stays perfectly centered inside the
   larger invisible hit area. */
.pc-cc-info-btn {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--pc-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.pc-cc-info-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1; /* keep the "?" glyph (normal in-flow content) painted above this */
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--pc-ink);
  background: #fff;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.pc-cc-info-btn:hover::before { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--pc-ink); }
.pc-cc-info-btn:focus-visible { outline: 3px solid var(--pc-pink); outline-offset: 2px; }
.pc-cc-tagline {
  width: 100%;
  font-size: 11.5px;
  color: var(--pc-mute);
  font-weight: 500;
  margin: 2px 0 0;
}

/* ---- hero price ---- */
.pc-cc-hero {
  margin-top: 8px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--pc-blush-2, rgba(0,181,216,.05)) 0%, #fff 100%);
  border: 1.5px solid var(--pc-rule);
}
.plan-card--fixed-indemnity .pc-cc-hero {
  background: linear-gradient(180deg, rgba(255, 200, 87, 0.22) 0%, #fff 100%);
  border-color: #F0D48E;
}
.pc-cc-hero__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-mute);
  margin: 0 0 4px;
}
.pc-cc-hero__amount {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pc-ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.pc-cc-hero__amount .u,
.pc-cc-hero__amount .suf {
  font-size: .34em;
  font-weight: 500;
  font-style: italic;
  color: var(--pc-mute);
}
.pc-cc-hero__amount .suf { margin-left: 2px; }
.pc-cc-hero__base {
  font-size: 11.5px;
  color: var(--pc-mute);
  margin: 6px 0 0;
}
.pc-cc-hero__includes {
  font-size: 11.5px;
  color: var(--pc-pink-dark);
  font-weight: 600;
  margin: 2px 0 0;
}
@media (max-width: 480px) {
  .pc-cc-hero__amount { font-size: clamp(34px, 11vw, 44px); }
}

/* ---- FI coverage-caps line, appended under the facts table ---- */
.pc-cc-caps {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--pc-rule);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--pc-mute);
  letter-spacing: .01em;
}
.pc-cc-caps b { color: var(--pc-ink); }
.pc-cc-caps-note { display: block; margin-top: 3px; font-style: italic; }

/* ---- itemized, toggleable pricing rows ---- */
.pc-cc-pricing {
  border: 1.5px solid var(--pc-ink);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 4px;
}
.pc-cc-pricing__eyebrow {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-mute);
  padding: 9px 14px 6px;
  background: #fff;
}
.pc-cc-pricing__hint {
  font-size: 11px;
  color: var(--pc-mute);
  padding: 0 14px 8px;
  line-height: 1.4;
  margin: 0;
  background: #fff;
}
.pc-cc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--pc-rule);
  background: #fff;
  flex-wrap: wrap;
}
.pc-cc-row--static .pc-cc-row__label { font-weight: 600; }
.pc-cc-row__switch { flex-shrink: 0; }
.pc-cc-row__body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-cc-row__label { font-size: 13px; color: var(--pc-ink); font-weight: 500; }
.pc-cc-row__val {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.pc-cc-row__val.is-active { color: var(--pc-pink-dark); }
.pc-cc-row__val.is-inactive { color: var(--pc-mute); font-weight: 500; font-style: italic; }
.pc-cc-row__val.is-static { color: var(--pc-ink); }

.pc-cc-bundle-row {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--pc-rule);
  background: rgba(0, 181, 216, 0.05);
}
.pc-cc-bundle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 40px; /* touch-target fix (Cost-of-Care review) */
  text-align: left;
  background: #fff;
  border: 1.5px dashed var(--pc-pink-dark);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--pc-pink-dark);
  cursor: pointer;
  transition: background 140ms ease, border-style 140ms ease;
}
.pc-cc-bundle-btn:hover { background: rgba(0, 181, 216, 0.08); }
.pc-cc-bundle-btn.is-active {
  border-style: solid;
  background: #fff;
  color: #0F5C2C;
  border-color: #1F8A45;
}
.pc-cc-bundle-btn:focus-visible { outline: 3px solid var(--pc-pink); outline-offset: 2px; }

.pc-cc-row--total {
  padding: 12px 14px;
  border-top: 2px solid var(--pc-ink);
  background: var(--pc-ink);
  color: #fff;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pc-cc-row--total .pc-cc-row__label {
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
.pc-cc-row--total .pc-cc-row__val {
  color: var(--pc-lemon);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  font-style: normal;
}
.pc-cc-row--total .pc-cc-row__val .suf { font-size: .6em; color: #9FD8E6; font-style: italic; }

/* ---- toggle switches ---- */
/* MAJOR fix (Cost-of-Care review) — the visible pill stays a slim 36x21
   (unchanged design), but the LABEL's own box (which the input covers via
   inset:0, so it IS the clickable/tappable hit area) is grown to a 44x40
   touch target per the brief's 40px ask and WCAG 2.2 SC 2.5.8. The track
   is centered inside via flex instead of stretching to inset:0, so it
   keeps its designed visual size. */
.pc-cc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
}
.pc-cc-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.pc-cc-switch-track {
  position: relative;
  width: 36px;
  height: 21px;
  background: #fff;
  border: 2px solid var(--pc-ink);
  border-radius: 999px;
  transition: background 160ms ease;
  pointer-events: none;
}
.pc-cc-switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pc-ink);
  transition: transform 160ms ease;
}
.pc-cc-switch input:checked ~ .pc-cc-switch-track { background: var(--pc-mint, #61C9A8); }
.pc-cc-switch input:checked ~ .pc-cc-switch-track .pc-cc-switch-thumb {
  transform: translateX(15px);
  background: #fff;
}
.pc-cc-switch input:focus-visible ~ .pc-cc-switch-track {
  outline: 3px solid var(--pc-pink);
  outline-offset: 2px;
}

/* =============================================================
   COST OF CARE — cross-plan scenario module (below the card grid)
   ============================================================= */
.pc-coc { margin-top: 40px; }
.pc-coc__head { max-width: 760px; margin-bottom: 20px; }
.pc-coc__eyebrow-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pc-cc-eyebrow-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-pink-dark);
  background: rgba(0, 181, 216, .10);
  border: 1px solid var(--pc-pink-dark);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 700;
}
h2.pc-coc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--pc-ink);
}
.pc-coc__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--pc-mute);
  margin: 0;
}
.pc-coc-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
  font-size: 12px;
  color: var(--pc-mute);
  font-weight: 600;
}
.pc-coc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-coc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.pc-coc-dot--fi { background: var(--pc-lemon); border: 1.5px solid var(--pc-ink); }
.pc-coc-dot--aca { background: var(--pc-pink); border: 1.5px solid var(--pc-ink); }

.pc-coc-scenario {
  background: #fff;
  border: 1.5px solid var(--pc-rule);
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
}
.pc-coc-scenario__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pc-coc-scenario__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--pc-ink);
  margin: 0;
}
.pc-coc-scenario__illus {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 200, 87, .22);
  border: 1px solid #E0B65C;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7A5A16;
}
.pc-coc-scenario__assumption {
  font-size: 12px;
  color: var(--pc-mute);
  font-style: italic;
  margin: 2px 0 12px;
}
.pc-coc-scenario__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) {
  .pc-coc-scenario__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.pc-coc-col {
  padding: 12px 13px;
  border: 1px solid var(--pc-rule);
  border-radius: 10px;
  background: rgba(0, 181, 216, .04);
}
.pc-coc-col--fi { background: rgba(255, 200, 87, .10); border-color: #F0D48E; }
.pc-coc-plan {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-ink);
  margin-bottom: 6px;
}
.pc-coc-text { font-size: 13px; line-height: 1.5; color: var(--pc-ink); margin: 0; }
.pc-coc-text b { font-weight: 700; }
.pc-coc-number {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--pc-ink);
  display: block;
  margin-bottom: 2px;
}

.pc-coc-synthesis {
  background: var(--pc-ink);
  color: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 4px;
}
.pc-coc-synthesis__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FD8E6;
  display: block;
  margin-bottom: 8px;
}
.pc-coc-synthesis p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: #fff;
  font-weight: 500;
}
.pc-coc-synthesis em { color: var(--pc-lemon); font-style: italic; }

/* =============================================================
   LIGHTBOX — shared "what is this" explainer overlay, mounted once to
   document.body by plan-cards.js's mountLightbox(). Namespaced pc-lb-
   so it never collides with any other overlay class on the page.
   ============================================================= */
.pc-lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 31, 46, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.pc-lb-overlay.is-open { opacity: 1; pointer-events: auto; }
.pc-lb-panel {
  background: #fff;
  border: 2px solid var(--pc-ink, #0E2A3A);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--pc-ink, #0E2A3A);
  max-width: 460px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 24px 24px 22px;
  transform: translateY(10px);
  transition: transform 160ms ease;
}
.pc-lb-overlay.is-open .pc-lb-panel { transform: translateY(0); }
.pc-lb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pc-lb-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-pink-dark, #007A93);
}
/* Touch-target fix (Cost-of-Care review) — visible circle stays 28px
   (clears the WCAG 24px floor already, but not the brief's 40px ask); grow
   the actual hit box the same way pc-cc-info-btn does, via a centered
   ::before circle inside a larger transparent button. */
.pc-lb-close {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--pc-ink, #0E2A3A);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-lb-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--pc-ink, #0E2A3A);
  background: #fff;
  transition: background 140ms ease;
}
.pc-lb-close:hover::before { background: var(--pc-lemon, #FFC857); }
.pc-lb-close:focus-visible { outline: 3px solid var(--pc-pink, #00B5D8); outline-offset: 2px; }
.pc-lb-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.12;
  color: var(--pc-ink, #0E2A3A);
  margin: 0 0 12px;
}
.pc-lb-body p { font-size: 14px; line-height: 1.58; color: var(--pc-ink, #0E2A3A); margin: 0 0 12px; }
.pc-lb-body p:last-child { margin-bottom: 0; }
.pc-lb-foot { margin-top: 16px; text-align: right; }
.pc-lb-got-it {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px; /* touch-target fix (Cost-of-Care review) */
  background: var(--pc-lemon, #FFC857);
  border: 2px solid var(--pc-ink, #0E2A3A);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc-ink, #0E2A3A);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--pc-ink, #0E2A3A);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.pc-lb-got-it:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pc-ink, #0E2A3A); }
.pc-lb-got-it:focus-visible { outline: 3px solid var(--pc-pink, #00B5D8); outline-offset: 2px; }

/* Cost-of-Care overlay: same fixed/backdrop/dialog shape as .pc-lb-overlay
   above, sized for long-form content. z-index sits BELOW .pc-lb-overlay's
   1200 on purpose — this overlay's own content contains a "cost" info
   button, so the small lightbox must be able to stack on top of it.
   .pc-coc-panel re-declares --pc-* custom properties because this panel
   lives outside .plan-cards in the DOM (document.body, not the card
   grid) — see top of file for the same block on .plan-cards itself. */
.pc-coc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 31, 46, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.pc-coc-overlay.is-open { opacity: 1; pointer-events: auto; }
.pc-coc-panel {
  --pc-ink:        var(--ink, #0E2A3A);
  --pc-cream:      var(--cream, #FFFFFF);
  --pc-lemon:      var(--lemon, #FFC857);
  --pc-blush:      var(--blush, #FFFFFF);
  --pc-pink:       var(--pink, #00B5D8);
  --pc-pink-dark:  var(--pink-dark, #007A93);
  --pc-mute:       var(--mute, #5D7C8E);
  --pc-rule:       var(--rule, #DDE9EE);
  --pc-mint:       var(--mint, #61C9A8);
  --pc-mint-ink:   var(--mint-ink, #0D5C46);
  --pc-mint-bg:    var(--mint-bg, #DCF3EA);

  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  border: 2px solid var(--pc-ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--pc-ink);
  max-width: 940px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 24px 26px;
  transform: translateY(10px);
  transition: transform 160ms ease;
}
.pc-coc-overlay.is-open .pc-coc-panel { transform: translateY(0); }
.pc-coc-panel__top {
  position: sticky;
  top: -22px;
  margin: -22px -24px 0;
  padding: 14px 24px 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
  border-bottom: 1px solid var(--pc-rule);
}
/* renderCostOfCare's own .pc-coc carries margin-top:40px, tuned for
   sitting below a card grid — inside the panel it's the first thing in
   the body, so that top margin would just be dead space under the
   sticky header above. */
.pc-coc-panel__body .pc-coc { margin-top: 14px; }
@media (max-width: 900px) {
  .pc-coc-panel { max-width: 100%; max-height: 92vh; padding: 18px 16px 22px; }
  .pc-coc-panel__top { margin: -18px -16px 0; padding: 12px 16px 10px; }
}
@media (max-width: 480px) {
  .pc-coc-overlay { padding: 0; align-items: flex-end; }
  .pc-coc-panel { max-width: 100%; width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
}

/* This SPECIFIC reveal-step override (narrow dual-pane takeover column, not
   full viewport width) lives here rather than homepage-39.html because it's
   about the scenario grid's own intrinsic sizing, not the takeover layout —
   the analogous #stage-reveal-cards override for .plan-cards__grid (the
   actual page-scoped exception) stays in homepage-39.html per the plan. */
@media (max-width: 900px) {
  .pc-coc-scenario__grid { grid-template-columns: 1fr; }
}