/* ═══════════════════════════════════════════════════════════════════
   Pricing comparison table — shared between portal.html landing
   page and patient.html SelfPriceCards modal. Same class structure,
   same visual design, "equalized" per Isaac 2026-05-05.

   DOM contract:

   .pc-compare-wrap
     .pc-compare-billing-note      (optional, used by landing context)
     table.pc-compare
       thead
         tr
           th (empty, feature column header)
           th.pc-tier-head.pc-col-free
             .pc-tier-name
             .pc-tier-price
             .pc-tier-billed       (optional second-line price detail)
           th.pc-tier-head.pc-col-pro
             .pc-tier-name
             .pc-tier-price (with .pc-tier-per inside)
             .pc-tier-billed
       tbody
         tr (one per feature row)
           th.pc-row-label
           td.pc-cell                 (Free value — use .pc-cell-no for em-dash)
           td.pc-cell.pc-col-pro      (Pro value)
       tfoot
         tr
           td (empty)
           td.pc-cta-cell  (Free CTA)
           td.pc-cta-cell  (Pro CTA)
     .pc-single-note                  (Single session note below table)

   Pro column gets a soft gold tint to draw the eye without screaming.
   Mobile (<640px): horizontal scroll inside .pc-compare-wrap so the
   table stays a true comparison rather than collapsing rows.
   ═══════════════════════════════════════════════════════════════════ */

.pc-compare-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pc-compare {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate-mid, #3d5056);
}

/* Cells — aggressive vertical compression so the modal fits laptop
   viewports (~640px content height) without a scrollbar. */
.pc-compare th,
.pc-compare td {
  padding: 4px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(20, 18, 14, 0.06);
  font-size: 12.5px;
  line-height: 1.35;
}

/* Header row — compact. Tier name + price stack tightly, billed-line is
   reserved-height (so Pro and Free columns line up without jitter). */
.pc-compare thead th {
  border-bottom: 2px solid rgba(20, 18, 14, 0.10);
  text-align: center;
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: bottom;
}
.pc-compare thead th:first-child {
  border-bottom-color: rgba(20, 18, 14, 0.06);
}

/* Tier head content — tighter type + tighter spacing per Isaac
   2026-05-05 "top of each price card is very tall. no need". */
.pc-tier-name {
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate, #1e2d2f);
  margin-bottom: 2px;
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.pc-tier-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--slate, #1e2d2f);
  line-height: 1.15;
}
.pc-tier-per {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #7a9098);
  margin-inline-start: 2px;
}
.pc-tier-billed {
  font-size: 10.5px;
  color: var(--muted, #7a9098);
  min-height: 1.2em;
  font-weight: 500;
  margin-top: 1px;
}

/* Feature rows */
.pc-compare tbody th.pc-row-label {
  text-align: start;
  font-weight: 500;
  color: var(--slate, #1e2d2f);
  width: 36%;
  background: transparent;
}
.pc-compare tbody td.pc-cell {
  text-align: center;
  width: 32%;
  color: var(--slate-mid, #3d5056);
}
.pc-compare tbody td.pc-cell.pc-cell-no {
  color: var(--muted, #c0c8c5);
  font-weight: 400;
}

/* Pro column tinted (subtle gold). Apply to header and body cells. */
.pc-compare thead .pc-col-pro {
  background: linear-gradient(180deg, rgba(216, 168, 74, 0.18) 0%, rgba(216, 168, 74, 0.05) 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.pc-compare tbody .pc-col-pro {
  background: rgba(216, 168, 74, 0.05);
}

/* Footer CTAs */
.pc-compare tfoot td {
  border-bottom: none;
  padding-top: 12px;
  padding-bottom: 4px;
  text-align: center;
}
.pc-compare tfoot td.pc-col-pro {
  background: rgba(216, 168, 74, 0.05);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.pc-cta-cell { text-align: center; }
.pc-cta {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font: 600 12.5px/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.pc-cta-ghost {
  background: #fff;
  color: var(--sage, #4a7c59);
  border-color: rgba(74, 124, 89, 0.4);
}
.pc-cta-ghost:hover {
  background: rgba(74, 124, 89, 0.08);
  transform: translateY(-1px);
}
.pc-cta-primary {
  background: var(--terra, #c2754e);
  color: #fff;
  border-color: var(--terra, #c2754e);
  box-shadow: 0 2px 8px rgba(194, 117, 78, 0.18);
}
.pc-cta-primary:hover {
  background: #a85f3e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194, 117, 78, 0.30);
}

/* Single-session note below the table */
.pc-single-note {
  margin: 16px auto 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted, #7a9098);
  font-style: italic;
}

/* ─── 3-tier mode (.pc-has-pkg): Free | Pro | Package ──────────────── */
/* Pro sits in the middle as the visual hero. Free gets a subtle slate
   tint so it reads as its own column rather than blending into the
   row-label area. Package gets a quiet sage tint and a smaller stepper
   so it doesn't compete with Pro. */
.pc-compare.pc-has-pkg { min-width: 640px; }

/* Free column — subtle slate tint, distinguishes from row-label column */
.pc-compare thead .pc-col-free {
  background: linear-gradient(180deg, rgba(122, 144, 152, 0.07) 0%, rgba(122, 144, 152, 0.02) 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.pc-compare tbody .pc-col-free {
  background: rgba(122, 144, 152, 0.025);
}
.pc-compare tfoot td.pc-col-free {
  background: rgba(122, 144, 152, 0.025);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Package column — quiet sage so Pro wins the eye */
.pc-compare thead .pc-col-pkg {
  background: linear-gradient(180deg, rgba(74, 124, 89, 0.09) 0%, rgba(74, 124, 89, 0.02) 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.pc-compare tbody .pc-col-pkg {
  background: rgba(74, 124, 89, 0.025);
}
.pc-compare tfoot td.pc-col-pkg {
  background: rgba(74, 124, 89, 0.025);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.pc-compare tbody td.pc-col-pkg {
  text-align: center;
  color: var(--slate-mid, #3d5056);
}

/* Pro hero (.pc-col-pro-hero on the th — middle position) — stronger
   gold tint and larger type than the flanking columns. The body cells
   keep .pc-col-pro for the existing tint rule (already defined above).
   Spacing tuned tight so the modal fits a 700px-tall laptop viewport
   without internal scrolling. */
.pc-compare.pc-has-pkg thead .pc-col-pro {
  background: linear-gradient(180deg, rgba(216, 168, 74, 0.32) 0%, rgba(216, 168, 74, 0.10) 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.pc-compare.pc-has-pkg tbody .pc-col-pro {
  background: rgba(216, 168, 74, 0.10);
}
.pc-compare.pc-has-pkg tfoot td.pc-col-pro {
  background: rgba(216, 168, 74, 0.10);
}
.pc-col-pro-hero .pc-tier-name {
  font-size: 15px;
  margin-bottom: 1px;
}
.pc-col-pro-hero .pc-tier-price {
  font-size: 22px;
  letter-spacing: -0.4px;
  line-height: 1.05;
}
.pc-col-pro-hero .pc-tier-billed {
  font-size: 11px;
  margin-top: 1px;
}

/* RECOMMENDED pill — sits above the Pro tier name */
.pc-recommended-pill {
  display: inline-block;
  background: var(--terra, #c2754e);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 999px;
  margin-bottom: 3px;
  box-shadow: 0 2px 6px rgba(194, 117, 78, 0.25);
}

/* Pro billing toggle — small pill chips inside the Pro head */
.pc-pro-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: rgba(20, 18, 14, 0.05);
  border-radius: 999px;
  margin-top: 4px;
}
.pc-pro-billing-tab {
  border: none;
  background: transparent;
  font: 600 10.5px/1 inherit;
  color: var(--muted, #7a9098);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.pc-pro-billing-tab.is-active {
  background: #fff;
  color: var(--slate, #1e2d2f);
  box-shadow: 0 1px 3px rgba(20, 18, 14, 0.10);
}
.pc-pro-billing-tab:hover:not(.is-active) {
  color: var(--slate-mid, #3d5056);
}

/* Stepper — smaller now (Package de-emphasized so Pro wins the eye) */
.pc-pkg-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px auto 0;
}
.pc-pkg-step {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(74, 124, 89, 0.4);
  background: #fff;
  color: var(--sage, #4a7c59);
  font: 700 14px/1 inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
  padding: 0;
  user-select: none;
}
.pc-pkg-step:hover:not(:disabled) {
  background: rgba(74, 124, 89, 0.10);
  transform: translateY(-1px);
}
.pc-pkg-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pc-pkg-stepper-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  line-height: 1;
}
.pc-pkg-stepper-count {
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--slate, #1e2d2f);
  letter-spacing: -0.3px;
}
.pc-pkg-stepper-price {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sage, #4a7c59);
  margin-top: 1px;
}

/* "save $X" pill next to the per-session line. */
.pc-pkg-save-pill {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  background: var(--sage, #4a7c59);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}

/* Package CTA — sage-styled, distinct from Free ghost and Pro terra. */
.pc-cta-pkg {
  background: var(--sage, #4a7c59);
  color: #fff;
  border-color: var(--sage, #4a7c59);
  box-shadow: 0 2px 8px rgba(74, 124, 89, 0.18);
}
.pc-cta-pkg:hover {
  background: #3d6b4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 124, 89, 0.30);
}

/* Compact small-screen mode — keep the table, just shrink type and
   lean on horizontal scroll. Stacking the rows would defeat the
   point of the comparison table. */
@media (max-width: 640px) {
  .pc-compare {
    font-size: 12px;
    min-width: 480px;
  }
  .pc-compare.pc-has-pkg { min-width: 580px; }
  .pc-tier-price { font-size: 22px; }
  .pc-tier-name { font-size: 15px; }
  .pc-compare th,
  .pc-compare td {
    padding: 10px 12px;
  }
  .pc-cta {
    padding: 9px 16px;
    font-size: 12px;
  }
  .pc-pkg-stepper-count { font-size: 18px; }
  .pc-pkg-step { width: 22px; height: 22px; font-size: 14px; }
}