/* =============================================================
   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;
  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;
  }
  .plan-card--recommended { order: -1; }
  .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%;
  }
  /* Recommended first on mobile + tablet */
  .plan-card--recommended {
    order: -1;
  }
  /* 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;
}
.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;
}

/* =============================================================
   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;
}