/* =============================================================
   PLAN-COMPARE-MODAL — V21 Component D · Mode 3
   Lazy-mounted full-viewport overlay with the LARGE PLAN VIEW table.
   Reference: NORA OUTPUTS (OLD)/LARGE PLAN VIEW.pdf
   ============================================================= */

.pcm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  pointer-events: none;
}
.pcm-overlay.is-open {
  display: block;
  pointer-events: auto;
}

.pcm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 42, 58, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  /* V24 Tier 5 motion DNA: 280ms swift-settle */
  transition: opacity 280ms cubic-bezier(.22,.61,.36,1);
}
.pcm-overlay.is-open .pcm-backdrop {
  opacity: 1;
}

.pcm-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0;
  width: min(92vw, 1280px);
  height: min(90vh, 980px);
  background: var(--cream, #FFFFFF);
  border: 2px solid var(--ink, #0E2A3A);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--ink, #0E2A3A);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink, #0E2A3A);
  /* V24 Tier 5: 280ms fade + scale 0.96→1 swift-settle */
  transition:
    opacity 280ms cubic-bezier(.22,.61,.36,1),
    transform 280ms cubic-bezier(.22,.61,.36,1);
}
.pcm-overlay.is-open .pcm-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .pcm-backdrop,
  .pcm-panel {
    transition: none !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Header */
.pcm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--ink, #0E2A3A);
  background: var(--cream, #FFFFFF);
  flex-wrap: wrap;
}
.pcm-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.015em;
  margin: 0;
}
.pcm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink, #0E2A3A);
  cursor: pointer;
  user-select: none;
}
.pcm-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pcm-toggle-track {
  width: 36px;
  height: 20px;
  background: var(--cream, #FFFFFF);
  border: 1.5px solid var(--ink, #0E2A3A);
  border-radius: 999px;
  position: relative;
  transition: background 180ms cubic-bezier(.22,.61,.36,1);
}
.pcm-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: var(--ink, #0E2A3A);
  border-radius: 50%;
  transition: transform 180ms cubic-bezier(.22,.61,.36,1);
}
.pcm-toggle input:checked + .pcm-toggle-track {
  background: var(--lemon, #FFC857);
}
.pcm-toggle input:checked + .pcm-toggle-track::after {
  transform: translateX(16px);
}
.pcm-close {
  background: var(--cream, #FFFFFF);
  border: 1.5px solid var(--ink, #0E2A3A);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pcm-close:hover {
  background: var(--lemon, #FFC857);
}

/* Body — scrollable both axes */
.pcm-body {
  flex: 1;
  overflow: auto;
  padding: 0;
  background: var(--cream, #FFFFFF);
}

/* The table */
.pcm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.4;
  table-layout: fixed;
  min-width: 880px;
}
.pcm-table th,
.pcm-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px dashed rgba(14,42,58,0.18);
}
/* First column = benefit name (sticky-left + sticky-top combo) */
.pcm-table th.pcm-row-label {
  font-weight: 600;
  width: 220px;
  background: var(--cream, #FFFFFF);
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1.5px solid var(--ink, #0E2A3A);
}
.pcm-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--cream, #FFFFFF);
  border-bottom: 2px solid var(--ink, #0E2A3A);
}
.pcm-table thead th.pcm-row-label {
  z-index: 4; /* corner cell sits above both axes */
}

/* Plan column header content */
.pcm-col-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Inter', sans-serif;
}
.pcm-col-head .pcm-col-tier {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink, #0E2A3A);
  background: var(--cream, #FFFFFF);
  border: 1.5px solid var(--ink, #0E2A3A);
  border-radius: 999px;
  line-height: 1;
}
.pcm-col-head .pcm-col-tier--recommended {
  background: var(--lemon, #FFC857);
}
.pcm-col-head .pcm-col-carrier {
  font-size: 11px;
  font-weight: 600;
  color: rgba(14,42,58,0.62);
  letter-spacing: -.005em;
}
.pcm-col-head .pcm-col-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.pcm-col-head .pcm-col-network {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 6px;
  background: var(--lemon, #FFC857);
  border: 1.5px solid var(--ink, #0E2A3A);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.pcm-col-head .pcm-col-price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.pcm-col-head .pcm-col-price small {
  font-size: 0.55em;
  font-style: italic;
  font-weight: 500;
  color: rgba(14,42,58,0.62);
}

/* Cell-level diff highlight */
.pcm-table td.is-diff {
  background: rgba(255, 232, 110, 0.30); /* lemon at 30% */
}

/* Empty / dash cells */
.pcm-table td.is-empty {
  color: rgba(14,42,58,0.40);
  font-style: italic;
}

/* Bottom disclaimer row */
.pcm-foot {
  border-top: 1.5px solid var(--ink, #0E2A3A);
  padding: 12px 18px;
  background: var(--cream, #FFFFFF);
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(14,42,58,0.62);
}
.pcm-foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pcm-foot li::before {
  content: '— ';
  margin-right: 4px;
  opacity: .5;
}
.pcm-foot .pcm-license {
  margin-top: 8px;
  display: block;
  text-align: center;
  font-style: italic;
}

/* Mobile */
@media (max-width: 768px) {
  .pcm-panel {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    top: 0;
    left: 0;
    transform: scale(.98);
    /* V24 Tier 7 · Safe-area insets for iOS notch + home indicator */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pcm-overlay.is-open .pcm-panel {
    transform: scale(1);
  }
  .pcm-head {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .pcm-title { font-size: 17px; }
  /* v31 mobile-ux-overhaul Task 1.2 — hide the wide-table layout on
     phone/tablet. Stacked-diff (.pcs-stacked-wrap) takes its place. */
  .pcm-table-wrap { display: none; }
  /* V24 Tier 7 · 44px min tap target on close */
  .pcm-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Desktop ≥769px: hide stacked, table is canonical */
@media (min-width: 769px) {
  .pcs-stacked-wrap { display: none; }
}

/* =============================================================
   v31 mobile-ux-overhaul Task 1.2 — Stacked-diff comparison
   Replaces the 720px-min-width table on viewports ≤768px. Same
   data + same category-collapse mechanic as the desktop table.
   ============================================================= */
.pcs-stacked-wrap {
  padding: 0 4px 16px;
}

/* Plan-summary strip pinned at the top of the body */
.pcs-plan-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  background: var(--pcm-cream, #FFFFFF);
  z-index: 4;
}
.pcs-plan-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--pcm-rule, #E1E6EC);
  border-radius: 8px;
  font-size: 11px;
}
.pcs-plan-strip-item--recommended {
  border-color: var(--pcm-lemon, #FFD84D);
  background: rgba(255, 216, 77, 0.10);
}
.pcs-plan-strip-tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pcm-mute, #4A6678);
  font-weight: 700;
}
.pcs-plan-strip-carrier {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pcm-ink, #0E2A3A);
}
.pcs-plan-strip-premium {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pcm-ink, #0E2A3A);
}
.pcs-plan-strip-premium small {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--pcm-mute, #4A6678);
}

/* Category section — collapsed by default; toggle expands */
.pcs-cat {
  margin: 0 0 8px;
  border: 1px solid var(--pcm-rule, #E1E6EC);
  border-radius: 10px;
  overflow: hidden;
}
.pcs-cat-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--pcm-cream, #FFFFFF);
  border: 0;
  padding: 14px 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  color: var(--pcm-ink, #0E2A3A);
}
.pcs-cat-label {
  font-weight: 700;
  font-size: 13px;
  flex: 1 1 auto;
}
.pcs-cat-diffs {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--pcm-mute, #4A6678);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pcs-cat-chev {
  font-size: 18px;
  color: var(--pcm-mute, #4A6678);
  transition: transform 180ms cubic-bezier(.22,.61,.36,1);
}
.pcs-cat.is-expanded .pcs-cat-chev {
  transform: rotate(90deg);
}
.pcs-cat-body {
  display: none;
  padding: 4px 12px 12px;
  background: rgba(0, 0, 0, 0.015);
}
.pcs-cat.is-expanded .pcs-cat-body {
  display: block;
}

/* One row per benefit attribute */
.pcs-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--pcm-rule, #E1E6EC);
}
.pcs-row:last-child { border-bottom: 0; }
.pcs-row-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--pcm-mute, #4A6678);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.pcs-row-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pcs-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--pcm-rule, #E1E6EC);
  border-radius: 8px;
  background: var(--pcm-cream, #FFFFFF);
}
.pcs-cell--recommended {
  border-color: var(--pcm-lemon, #FFD84D);
  background: rgba(255, 216, 77, 0.10);
}
.pcs-cell.is-diff {
  border-color: var(--pcm-pink, #00B5D8);
}
.pcs-cell.is-empty .pcs-cell-value {
  color: var(--pcm-mute, #4A6678);
}
.pcs-cell-tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pcm-mute, #4A6678);
  font-weight: 700;
  margin-bottom: 4px;
}
.pcs-cell-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--pcm-ink, #0E2A3A);
  line-height: 1.2;
}

/* OCR baseline row inside the stacked layout */
.pcs-row-baseline {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: rgba(0, 181, 216, 0.08);
  border-left: 3px solid var(--pcm-pink, #00B5D8);
  border-radius: 4px;
  font-size: 12px;
}
.pcs-baseline-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--pcm-mute, #4A6678);
  text-transform: uppercase;
}
.pcs-baseline-value {
  font-weight: 700;
  color: var(--pcm-ink, #0E2A3A);
}

/* V24 Tier 7 · Windows High Contrast Mode for compare modal */
@media (forced-colors: active) {
  .pcm-panel {
    border: 2px solid CanvasText;
  }
  .pcm-table th,
  .pcm-table td {
    border: 1px solid CanvasText !important;
  }
  .pcm-close,
  .pcm-toggle {
    border-color: CanvasText !important;
  }
}

/* =============================================================
   V25 — Categorized compare modal
   12 categories, collapse-by-default, with diff-count summary.
   When window.NORA_OCR_BASELINE present, 4-column mode adds
   a "Your current" baseline column.
   ============================================================= */

.pcm-cat {
  border-top: 2px solid var(--pcm-ink, #0E2A3A);
}
.pcm-cat:first-of-type { border-top: none; }

.pcm-cat-header {
  background: var(--pcm-cream, #FFFFFF);
}
.pcm-cat-cell {
  padding: 0;
  border: none;
}
.pcm-cat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--pcm-ink, #0E2A3A);
  text-align: left;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.22,.61,.36,1);
}
.pcm-cat-toggle:hover {
  background: rgba(255, 200, 87, 0.18);
}
.pcm-cat-toggle:focus-visible {
  outline: 3px solid var(--pcm-lemon, #FFC857);
  outline-offset: -3px;
}
.pcm-cat-label {
  font-weight: 600;
}
.pcm-cat-diffs {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pcm-mute, #4A6678);
  flex: 1;
}
.pcm-cat-chev {
  font-size: 18px;
  font-weight: 400;
  color: var(--pcm-mute, #4A6678);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
  transform-origin: center;
}
.pcm-cat.is-expanded .pcm-cat-chev {
  transform: rotate(90deg);
}

/* Body rows — collapse by default */
.pcm-row.pcm-row--collapsed {
  display: none;
}
.pcm-cat.is-expanded .pcm-row.pcm-row--collapsed {
  display: table-row;
}

/* Baseline column (4-col OCR mode) */
.pcm-table--has-baseline .pcm-col-baseline {
  background: linear-gradient(180deg, #FFF8C8 0%, var(--pcm-cream, #FFFFFF) 100%);
  border-right: 2px dashed var(--pcm-ink, #0E2A3A);
}
.pcm-col-tier--baseline {
  background: var(--pcm-ink, #0E2A3A);
  color: var(--pcm-cream, #FFFFFF);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
}
/* DAV-96 — screen-reader-only utility for the table caption. Standard
   visually-hidden mixin: physically present, removed from layout, hidden
   from sighted users, exposed to AT. */
.pcm-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* DAV-80 — "Your plan" column pinned to the left of the comparison table
   so the user-anchor stays visible when scrolling horizontally through
   3+ plan columns on mobile. Sits at left: 220px (the sticky benefit-
   label width) so it docks immediately to the right of the row labels. */
.pcm-baseline-cell {
  background: rgba(255, 248, 200, 0.55);
  border-right: 2px dashed var(--pcm-ink, #0E2A3A);
  font-weight: 500;
  color: var(--pcm-ink, #0E2A3A);
  position: sticky;
  left: 220px;
  z-index: 2;
}
/* Header cell for the baseline column inherits sticky-top from .pcm-table
   thead th but we re-pin sticky-left here so it wins both axes. */
.pcm-table thead .pcm-baseline-header {
  position: sticky;
  top: 0;
  left: 220px;
  z-index: 4;
  background: rgba(255, 248, 200, 0.75);
  border-right: 2px dashed var(--pcm-ink, #0E2A3A);
}
/* Mobile: narrow the row-label column so the baseline column still has
   reasonable real estate after pinning. */
@media (max-width: 640px) {
  .pcm-table th.pcm-row-label { width: 140px; }
  .pcm-baseline-cell,
  .pcm-table thead .pcm-baseline-header { left: 140px; }
}

/* DAV-82 — Share-by-link button in the modal foot. Secondary to the
   primary lock CTA — same shape (rounded pill) but cream/ink instead of
   cyan/ink. Sits to the right of the primary CTA on a single row. */
.pcm-share-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cream, #FFFAEA);
  color: var(--pcm-ink, #0E2A3A);
  border: 1.5px solid var(--pcm-ink, #0E2A3A);
  border-radius: 12px;
  padding: 11px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  margin: 0 0 12px 10px;
  transition: background 180ms cubic-bezier(.22,.61,.36,1);
}
.pcm-share-cta:hover { background: var(--pcm-lemon, #FFC857); }
.pcm-share-cta:focus-visible {
  outline: 3px solid var(--pcm-lemon, #FFC857);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .pcm-share-cta { display: block; margin: 8px 0; width: 100%; text-align: center; }
}

/* Foot CTA — "Lock the recommended plan →" */
.pcm-foot-cta {
  display: inline-block;
  background: var(--pcm-pink, #00B5D8);
  color: var(--pcm-ink, #0E2A3A);
  border: 2px solid var(--pcm-ink, #0E2A3A);
  border-radius: 12px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pcm-ink, #0E2A3A);
  transition: transform 180ms cubic-bezier(.22,.61,.36,1),
              box-shadow 180ms cubic-bezier(.22,.61,.36,1);
  margin-bottom: 12px;
}
.pcm-foot-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--pcm-ink, #0E2A3A);
  background: var(--pcm-lemon, #FFC857);
}
.pcm-foot-cta:active {
  transform: translate(0,0);
  box-shadow: 1px 1px 0 var(--pcm-ink, #0E2A3A);
}
.pcm-foot-cta:focus-visible {
  outline: 3px solid var(--pcm-lemon, #FFC857);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .pcm-cat-toggle {
    padding: 12px 14px;
    font-size: 13px;
    gap: 8px;
  }
  .pcm-cat-diffs { font-size: 10px; }
  .pcm-foot-cta { width: 100%; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcm-cat-chev,
  .pcm-cat-toggle,
  .pcm-foot-cta {
    transition: none;
  }
}

/* =============================================================
   V36 Phase 3 · Task 3.2 — Side-by-side ↔ Stacked toggle.
   When [data-view="stacked"] is active, the overlay gets
   .pcm--stacked which hides the wide table and forces the
   stacked layout to render at all viewports (not just ≤768px).
   ============================================================= */
.pcm-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--pcm-ink, #0E2A3A);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 700;
}
.pcm-view-toggle button {
  background: var(--cream, #FFFFFF);
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--pcm-mute, #4A6678);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
  transition: background 180ms cubic-bezier(.22,.61,.36,1);
  min-height: 32px;
}
.pcm-view-toggle button:hover { background: rgba(255, 200, 87, 0.18); }
.pcm-view-toggle button.is-active {
  background: var(--pcm-ink, #0E2A3A);
  color: var(--lemon, #FFC857);
}
.pcm-view-toggle button:focus-visible {
  outline: 3px solid var(--pcm-lemon, #FFC857);
  outline-offset: 2px;
}

/* Stacked override — desktop forced stacked when toggle is on. Hide the
   wide table; force the stacked wrap to display regardless of viewport. */
.pcm--stacked .pcm-table-wrap { display: none !important; }
.pcm--stacked .pcs-stacked-wrap { display: block !important; }

/* Mobile already hides the toggle since stacked is the only option. */
@media (max-width: 768px) {
  .pcm-view-toggle { display: none; }
}

/* =============================================================
   V36 Phase 3 · Task 3.3 — "Why this one" rationale slot.
   Renders below each plan card price. Single-line, italic, muted.
   ============================================================= */
.pcm-col-rationale {
  margin-top: 6px;
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--pcm-mute, #4A6678);
  font-weight: 400;
  letter-spacing: -.005em;
  /* Wrap rationales onto 2 lines max — fold long sentences cleanly. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcs-plan-strip-rationale {
  margin-top: 4px;
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--pcm-mute, #4A6678);
  font-weight: 400;
}
.pcm-rationale--loading {
  opacity: .35;
}

/* =============================================================
   V36 Phase 3 · Task 3.4 — ≈ approximate-value badge.
   Used when a cell value was defaulted from the static HPG
   brochure JSON because Quotit returned blank.
   ============================================================= */
.pcm-approx {
  color: var(--pcm-mute, #4A6678);
  font-size: 10px;
  margin-left: 4px;
  font-weight: 600;
  font-style: normal;
  vertical-align: super;
  cursor: help;
}
.pcm-approx::before { content: ''; }