/* ═══════════════════════════════════════════════════════════════════════════════════
   IE PRO CARDS · card-logic.css
   Static card components only.
   Positional tokens (c1–c10) only – no color alias names.
   Motion (expand + index tabs) lives in motion-logic.css.
═══════════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────────
   BASE CARD
───────────────────────────────────────────────────────────────────────────────── */
.pc-card,
.pc-pricing-card,
.pc-tile,
.pc-stat-card {
  border-radius: var(--pc-r-lg);
  border: var(--pc-border) !important;
  position: relative;
  transition: background var(--pc-t), transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow var(--pc-t);
}

.pc-card::before,
.pc-pricing-card::before,
.pc-tile::before,
.pc-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--pc-bar, 4px);
  z-index: 2;
}

.pc-card::after,
.pc-pricing-card::after,
.pc-tile::after,
.pc-stat-card::after {
  content: '';
  position: absolute;
  top: var(--pc-bar, 4px);
  left: 0; right: 0;
  height: var(--pc-border-width, 1px);
  background: var(--pc-separator);
  opacity: 0.4;
  z-index: 3;
  pointer-events: none;
}

.pc-card               { background: var(--pc-surface-2); overflow: clip !important; }
.pc-card:hover         { transform: translateY(-3px) scale(1.04); background: var(--pc-surface-3); }
.pc-tab-panel .pc-card:hover { transform: none; background: var(--pc-surface-3); }

.pc-pricing-card       { background: var(--pc-surface-2); padding: var(--pc-pad-pricing, 32px); display: flex; flex-direction: column; overflow: clip !important; }
.pc-pricing-card:hover { background: var(--pc-surface-3); transform: translateY(-3px) scale(1.04); }

.pc-tile               { background: var(--pc-surface-2); padding: var(--pc-pad-tile, 24px 22px); overflow: hidden; }
.pc-tile:hover         { background: var(--pc-surface-3); transform: translateY(-3px) scale(1.04); }

.pc-stat-card          { background: var(--pc-surface-2); padding: var(--pc-pad-stat-card, 22px 28px); overflow: clip !important; cursor: default; }
.pc-stat-card:hover    { background: var(--pc-surface-3); transform: translateY(-1px); }


/* ─────────────────────────────────────────────────────────────────────────────────
   GRADIENT BARS
   --pc-bar-fade is set to 0% in client CSS panel so gradients are
   fully opaque edge-to-edge. Fallback here also 0% to match.
───────────────────────────────────────────────────────────────────────────────── */
.pc-c1::before,  .pc-card-c1::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c1)  var(--pc-bar-fade, 0%), var(--pc-c2)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c2::before,  .pc-card-c2::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c2)  var(--pc-bar-fade, 0%), var(--pc-c3)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c3::before,  .pc-card-c3::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c3)  var(--pc-bar-fade, 0%), var(--pc-c4)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c4::before,  .pc-card-c4::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c4)  var(--pc-bar-fade, 0%), var(--pc-c5)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c5::before,  .pc-card-c5::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c5)  var(--pc-bar-fade, 0%), var(--pc-c1)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c6::before,  .pc-card-c6::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c6)  var(--pc-bar-fade, 0%), var(--pc-c2)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c7::before,  .pc-card-c7::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c7)  var(--pc-bar-fade, 0%), var(--pc-c3)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c8::before,  .pc-card-c8::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c8)  var(--pc-bar-fade, 0%), var(--pc-c4)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c9::before,  .pc-card-c9::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c9)  var(--pc-bar-fade, 0%), var(--pc-c5)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.pc-c10::before, .pc-card-c10::before { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c10) var(--pc-bar-fade, 0%), var(--pc-c1)  calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }

.pc-stat-strip::before,
.pc-rainbow::before { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c1) var(--pc-bar-fade, 0%), var(--pc-c2) 38%, var(--pc-c3) 62%, var(--pc-c5) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }

.ppc-standard::before  { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c1) var(--pc-bar-fade, 0%), var(--pc-c2) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
.ppc-qualified::before { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c2) var(--pc-bar-fade, 0%), var(--pc-c3) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }


/* ─────────────────────────────────────────────────────────────────────────────────
   HOVER GLOWS
───────────────────────────────────────────────────────────────────────────────── */
.pc-c1:hover  { box-shadow: 0 4px 20px color-mix(in srgb, var(--pc-c1)  calc(var(--pc-glow-i) * 100%), transparent); }
.pc-c2:hover  { box-shadow: 0 4px 20px color-mix(in srgb, var(--pc-c2)  calc(var(--pc-glow-i) * 100%), transparent); }
.pc-c3:hover  { box-shadow: 0 4px 20px color-mix(in srgb, var(--pc-c3)  calc(var(--pc-glow-i) * 100%), transparent); }
.pc-c4:hover  { box-shadow: 0 4px 20px color-mix(in srgb, var(--pc-c4)  calc(var(--pc-glow-i) * 100%), transparent); }
.pc-c5:hover  { box-shadow: 0 4px 20px color-mix(in srgb, var(--pc-c5)  calc(var(--pc-glow-i) * 100%), transparent); }


/* ─────────────────────────────────────────────────────────────────────────────────
   VIVID (colorful card surfaces)
───────────────────────────────────────────────────────────────────────────────── */
.pc-card-c1  { background: var(--pc-c1)  !important; }
.pc-card-c2  { background: var(--pc-c2)  !important; }
.pc-card-c3  { background: var(--pc-c3)  !important; }
.pc-card-c4  { background: var(--pc-c4)  !important; }
.pc-card-c5  { background: var(--pc-c5)  !important; }
.pc-card-c6  { background: var(--pc-c6)  !important; }
.pc-card-c7  { background: var(--pc-c7)  !important; }
.pc-card-c8  { background: var(--pc-c8)  !important; }
.pc-card-c9  { background: var(--pc-c9)  !important; }
.pc-card-c10 { background: var(--pc-c10) !important; }

.pc-card-c1:hover  { background: var(--pc-c1)  !important; filter: brightness(1.08); }
.pc-card-c2:hover  { background: var(--pc-c2)  !important; filter: brightness(1.08); }
.pc-card-c3:hover  { background: var(--pc-c3)  !important; filter: brightness(1.08); }
.pc-card-c4:hover  { background: var(--pc-c4)  !important; filter: brightness(1.08); }
.pc-card-c5:hover  { background: var(--pc-c5)  !important; filter: brightness(1.08); }
.pc-card-c6:hover  { background: var(--pc-c6)  !important; filter: brightness(1.08); }
.pc-card-c7:hover  { background: var(--pc-c7)  !important; filter: brightness(1.08); }
.pc-card-c8:hover  { background: var(--pc-c8)  !important; filter: brightness(1.08); }
.pc-card-c9:hover  { background: var(--pc-c9)  !important; filter: brightness(1.08); }
.pc-card-c10:hover { background: var(--pc-c10) !important; filter: brightness(1.08); }

[class*="pc-card-"] {
  --pc-vivid-text: #000000;
  border: var(--pc-border) !important;
  border-radius: var(--pc-r-lg);
}
[class*="pc-card-"] .card-name,
[class*="pc-card-"] .tile-label     { color: var(--pc-vivid-text) !important; opacity: 1 !important; }
[class*="pc-card-"] .card-eyebrow,
[class*="pc-card-"] .tier-tag       { color: var(--pc-vivid-text) !important; opacity: 0.85 !important; }
[class*="pc-card-"] .card-body,
[class*="pc-card-"] .tile-body,
[class*="pc-card-"] .sp-quote,
[class*="pc-card-"] .stat-label     { color: var(--pc-vivid-text) !important; opacity: 0.8 !important; }


/* ─────────────────────────────────────────────────────────────────────────────────
   TINTED BG
───────────────────────────────────────────────────────────────────────────────── */
.pc-c1-bg  { background: color-mix(in srgb, var(--pc-c1)  5%, transparent) !important; border-color: color-mix(in srgb, var(--pc-c1)  14%, transparent) !important; }
.pc-c2-bg  { background: color-mix(in srgb, var(--pc-c2)  5%, transparent) !important; border-color: color-mix(in srgb, var(--pc-c2)  14%, transparent) !important; }
.pc-c3-bg  { background: color-mix(in srgb, var(--pc-c3)  5%, transparent) !important; border-color: color-mix(in srgb, var(--pc-c3)  14%, transparent) !important; }
.pc-c4-bg  { background: color-mix(in srgb, var(--pc-c4)  5%, transparent) !important; border-color: color-mix(in srgb, var(--pc-c4)  14%, transparent) !important; }
.pc-c5-bg  { background: color-mix(in srgb, var(--pc-c5)  5%, transparent) !important; border-color: color-mix(in srgb, var(--pc-c5)  14%, transparent) !important; }


/* ─────────────────────────────────────────────────────────────────────────────────
   EYEBROW COLORS
───────────────────────────────────────────────────────────────────────────────── */
.pc-c1 .card-eyebrow, .pc-c1 .tier-tag { color: var(--pc-c1); }
.pc-c2 .card-eyebrow, .pc-c2 .tier-tag { color: var(--pc-c2); }
.pc-c3 .card-eyebrow, .pc-c3 .tier-tag { color: var(--pc-c3); }
.pc-c4 .card-eyebrow, .pc-c4 .tier-tag { color: var(--pc-c4); }
.pc-c5 .card-eyebrow, .pc-c5 .tier-tag { color: var(--pc-c5); }

.pc-card:hover .card-body,
.pc-card:hover .stat-label,
.pc-card:hover .sp-quote,
.pc-card:hover .tier-covers li { color: var(--pc-card-hover-color); }


/* ─────────────────────────────────────────────────────────────────────────────────
   A · CARD GRIDS
───────────────────────────────────────────────────────────────────────────────── */
.pc-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--pc-gap); margin-bottom: 28px; }
.pc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pc-gap); }
.pc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pc-gap); }
.pc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pc-gap); }

.card-inner { padding: 45px 25px 25px !important; }

.card-eyebrow {
  font-family: var(--pc-eyebrow-font, var(--pc-font));
  font-size: var(--pc-eyebrow-size, 0.85rem);
  font-weight: var(--pc-fw-eyebrow, 500);
  letter-spacing: var(--pc-eyebrow-ls, 0.08em);
  text-transform: uppercase;
  margin-bottom: 15px !important;
  line-height: 1;
}

[data-section-theme] .pc-card .card-name,
.pc-card .card-name,
.tile-label {
  font-family: var(--pc-title-font, var(--pc-font)) !important;
  font-size: var(--pc-card-name-size, 2rem) !important;
  font-weight: var(--pc-fw-title, 600) !important;
  line-height: var(--pc-card-name-lh, 1.05) !important;
  letter-spacing: var(--pc-fw-bold-ls) !important;
  color: var(--pc-card-title-color) !important;
  text-transform: none !important;
  display: block !important;
  margin-bottom: 15px !important;
}

.card-body {
  font-family: var(--pc-font);
  font-size: var(--pc-body-size, 0.9rem);
  color: var(--pc-card-body-color);
  line-height: 1.55;
}

.card-list          { list-style: none; margin-top: 15px !important; }
.card-list li       { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); padding: 6px 0 !important; border-bottom: var(--pc-border); line-height: 1.3; display: flex; align-items: center !important; gap: 10px; }
.card-list li:last-child { border-bottom: none; }
.card-list li::before    { content: '✓'; font-size: 14px !important; flex-shrink: 0; }

.pc-c1 .card-list li::before { color: var(--pc-c1); }
.pc-c2 .card-list li::before { color: var(--pc-c2); }
.pc-c3 .card-list li::before { color: var(--pc-c3); }
.pc-c4 .card-list li::before { color: var(--pc-c4); }
.pc-c5 .card-list li::before { color: var(--pc-c5); }


/* ─────────────────────────────────────────────────────────────────────────────────
   B · PILLS
───────────────────────────────────────────────────────────────────────────────── */
.pc-pills          { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pc-pills-centered { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }

.pc-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: var(--pill-radius, 100px) !important;
  font-family: var(--pc-font) !important;
  font-size: var(--pill-font-size, 1rem) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: var(--pill-padding, 8px 16px) !important;
  color:       var(--pill-color) !important;
  background:  color-mix(in srgb, var(--pill-color) 6%,  transparent) !important;
  border:      1px solid color-mix(in srgb, var(--pill-color) 20%, transparent) !important;
  box-shadow:  none !important;
  opacity:     0.75 !important;
  transition:  filter var(--pc-t), transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

.pc-pill:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-2px) scale(1.02) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────────
   C · PRICING CARD PAIR
───────────────────────────────────────────────────────────────────────────────── */
.pc-pricing-pair  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pc-gap); margin: 20px 0; }

.ppc-standard .ppc-eyebrow   { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: var(--pc-eyebrow-ls, 0.08em); text-transform: uppercase; color: var(--pc-white); margin-bottom: 10px; }
.ppc-standard .ppc-price     { font-family: var(--pc-number-font, var(--pc-title-font)); font-size: var(--pc-h2); font-weight: var(--pc-number-weight, 400); letter-spacing: var(--pc-number-ls, -2px); color: var(--pc-white); line-height: 1; margin-bottom: 2px; }
.ppc-standard .ppc-period    { font-size: var(--pc-eyebrow-size, 0.85rem); color: color-mix(in srgb, var(--pc-white) 40%, transparent); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.ppc-standard .ppc-divider   { border: none; border-top: var(--pc-border); margin: 16px 0; }
.ppc-standard .ppc-body      { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); margin-bottom: 16px; line-height: var(--pc-body-lh); }
.ppc-standard .ppc-note      { font-size: var(--pc-eyebrow-size, 0.85rem); color: color-mix(in srgb, var(--pc-white) 40%, transparent); margin-top: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.ppc-qualified               { border-color: color-mix(in srgb, var(--pc-c2) 16%, transparent); }
.ppc-qualified .ppc-eyebrow  { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: var(--pc-eyebrow-ls, 0.08em); text-transform: uppercase; color: var(--pc-c2); margin-bottom: 10px; }
.ppc-qualified .ppc-price    { font-family: var(--pc-number-font, var(--pc-title-font)); font-size: var(--pc-h2); font-weight: var(--pc-number-weight, 400); letter-spacing: var(--pc-number-ls, -2px); background: var(--pc-num-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 2px; }
.ppc-qualified .ppc-period   { font-size: var(--pc-eyebrow-size, 0.85rem); color: color-mix(in srgb, var(--pc-c2) 35%, transparent); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.ppc-qualified .ppc-divider  { border: none; border-top: var(--pc-border-md); margin: 16px 0; }
.ppc-qualified .ppc-body     { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-c2) 65%, transparent); margin-bottom: 16px; line-height: var(--pc-body-lh); }
.ppc-qualified .ppc-note     { font-size: var(--pc-eyebrow-size, 0.85rem); color: color-mix(in srgb, var(--pc-c2) 40%, transparent); margin-top: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

.ppc-checklist               { list-style: none; padding: 0; margin: 0 0 20px; }
.ppc-checklist li            { font-size: var(--pc-body-size, 0.9rem); padding: 5px 0; border-bottom: var(--pc-border); line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; }
.ppc-checklist li:last-child { border-bottom: none; }
.ppc-checklist li::before    { content: '✓'; font-size: var(--pc-eyebrow-size, 0.85rem); flex-shrink: 0; margin-top: 2px; }

.ppc-standard .ppc-checklist li        { color: color-mix(in srgb, var(--pc-white) 70%, transparent); }
.ppc-standard .ppc-checklist li::before { color: var(--pc-c1); }
.ppc-qualified .ppc-checklist li        { color: color-mix(in srgb, var(--pc-c2) 65%, transparent); }
.ppc-qualified .ppc-checklist li::before { color: var(--pc-c2); }

.ppc-standard .pc-btn  { background: var(--pc-black) !important; color: var(--pc-white) !important; border: var(--pc-border-md) !important; border-radius: var(--pc-r); padding: 10px 20px; font-size: var(--pc-body-size, 0.9rem); font-weight: var(--pc-fw-bold); cursor: pointer; margin-top: auto; transition: border-color var(--pc-t); }
.ppc-qualified .pc-btn { background: var(--pc-black) !important; color: var(--pc-c2) !important; border: var(--pc-border-md) !important; border-radius: var(--pc-r); padding: 10px 20px; font-size: var(--pc-body-size, 0.9rem); font-weight: var(--pc-fw-bold); cursor: pointer; margin-top: auto; transition: border-color var(--pc-t); }
.ppc-standard .pc-btn:hover  { border-color: color-mix(in srgb, var(--pc-white) 70%, transparent) !important; }
.ppc-qualified .pc-btn:hover { border-color: color-mix(in srgb, var(--pc-c2) 85%, transparent) !important; }

.pc-pricing-card              { --ppc-color: var(--pc-c1); }
.pc-pricing-card .ppc-price   { color: var(--ppc-color) !important; -webkit-text-fill-color: var(--ppc-color) !important; background: none !important; }
.pc-pricing-card .ppc-checklist li::before { color: var(--ppc-color) !important; }
.pc-pricing-card .pc-btn      { color: var(--ppc-color) !important; border-color: color-mix(in srgb, var(--ppc-color) 55%, transparent) !important; }
.pc-pricing-card .pc-btn:hover { border-color: color-mix(in srgb, var(--ppc-color) 85%, transparent) !important; }


/* ─────────────────────────────────────────────────────────────────────────────────
   D · STAT STRIP
───────────────────────────────────────────────────────────────────────────────── */
.pc-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--pc-border);
  border-radius: var(--pc-r-lg);
  overflow: hidden;
  position: relative;
}

.pc-stat-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--pc-bar, 6px);
  background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c1) var(--pc-bar-fade, 0%), var(--pc-c2) 38%, var(--pc-c3) 62%, var(--pc-c5) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent));
  z-index: 2;
  pointer-events: none;
}

.stat-item            { padding: var(--pc-pad-stat-item, 20px 24px); border-right: var(--pc-border); background: var(--pc-surface-2); cursor: default; transition: background var(--pc-t); }
.stat-item:last-child { border-right: none; }
.stat-item:hover      { background: var(--pc-surface-3); }

.stat-value {
  font-family: var(--pc-number-font, var(--pc-title-font));
  font-size: var(--pc-h3);
  font-weight: var(--pc-number-weight, 400);
  line-height: 1;
  margin-bottom: 8px;
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-value.c1   { background-image: linear-gradient(90deg, var(--pc-c1), var(--pc-c2)); }
.stat-value.c2   { background-image: linear-gradient(90deg, var(--pc-c2), var(--pc-c3)); }
.stat-value.c3   { background-image: linear-gradient(90deg, var(--pc-c3), var(--pc-c4)); }
.stat-value.c4   { background-image: linear-gradient(90deg, var(--pc-c4), var(--pc-c5)); }
.stat-value.c5   { background-image: linear-gradient(90deg, var(--pc-c5), var(--pc-c1)); }
.stat-label      { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); line-height: 1.55; }


/* ─────────────────────────────────────────────────────────────────────────────────
   E · TIMELINE
───────────────────────────────────────────────────────────────────────────────── */
.pc-timeline    { position: relative; }
.pc-tl-line     { position: absolute; top: 24px; height: 1px; z-index: 0; }

.pc-tl3 .pc-tl-line { left: 16.67%; right: 16.67%; background: linear-gradient(90deg, color-mix(in srgb, var(--pc-c1) 22%, transparent), color-mix(in srgb, var(--pc-c2) 22%, transparent), color-mix(in srgb, var(--pc-c3) 22%, transparent)); }
.pc-tl4 .pc-tl-line { left: 12.5%;  right: 12.5%;  background: linear-gradient(90deg, color-mix(in srgb, var(--pc-c1) 22%, transparent), color-mix(in srgb, var(--pc-c2) 22%, transparent), color-mix(in srgb, var(--pc-c3) 22%, transparent), color-mix(in srgb, var(--pc-c4) 22%, transparent)); }
.pc-tl5 .pc-tl-line { left: 10%;    right: 10%;    background: linear-gradient(90deg, color-mix(in srgb, var(--pc-c1) 22%, transparent), color-mix(in srgb, var(--pc-c2) 22%, transparent), color-mix(in srgb, var(--pc-c3) 22%, transparent), color-mix(in srgb, var(--pc-c4) 22%, transparent), color-mix(in srgb, var(--pc-c5) 22%, transparent)); }

.pc-tl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 1; }
.pc-tl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; }
.pc-tl-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; z-index: 1; }

.pc-step       { display: flex; flex-direction: column; align-items: center; padding: 0 10px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); }
.pc-step:hover { transform: translateY(-4px) scale(1.04); }

.step-dot {
  width: var(--pc-dot-size, 48px); height: var(--pc-dot-size, 48px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: var(--pc-fw-bold);
  margin-bottom: 14px; flex-shrink: 0; position: relative; z-index: 2;
  background: var(--dot-bg, color-mix(in srgb, var(--pc-c1) 8%, transparent));
  border: 1.5px solid var(--dot-stroke, #000000);
  color: var(--dot-stroke, #000000);
  transition: background var(--pc-t), border-color var(--pc-t);
}

.dot-c1  { --dot-bg: var(--pc-c1);  }
.dot-c2  { --dot-bg: var(--pc-c2);  }
.dot-c3  { --dot-bg: var(--pc-c3);  }
.dot-c4  { --dot-bg: var(--pc-c4);  }
.dot-c5  { --dot-bg: var(--pc-c5);  }
.dot-c6  { --dot-bg: var(--pc-c6);  }
.dot-c7  { --dot-bg: var(--pc-c7);  }
.dot-c8  { --dot-bg: var(--pc-c8);  }
.dot-c9  { --dot-bg: var(--pc-c9);  }
.dot-c10 { --dot-bg: var(--pc-c10); }

.step-label { font-family: var(--pc-title-font, var(--pc-font)); font-size: var(--pc-step-label-size, 1.6rem) !important; font-weight: var(--pc-fw-title, 800) !important; text-align: center; margin-bottom: 6px; line-height: 1.1 !important; }
.step-body  { font-size: var(--pc-step-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); text-align: center; line-height: 1.6; }

.ie-dark .pc-tl-line  { background: rgba(255,255,255,0.15) !important; }
.ie-dark .step-label,
.ie-dark .step-body   { color: rgba(255,255,255,1) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; }
.ie-dark .step-dot    { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; border: 1.5px solid rgba(255,255,255,1) !important; }
.ie-dark .pc-step     { border-bottom-color: rgba(255,255,255,0.3) !important; }

.ie-light .pc-tl-line { background: rgba(255,255,255,0.3) !important; }
.ie-light .step-label,
.ie-light .step-body  { color: rgba(255,255,255,1) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; }
.ie-light .step-dot   { background: rgba(0,0,0,0.15) !important; color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; border: 1.5px solid rgba(255,255,255,1) !important; }
.ie-light .pc-step    { border-bottom-color: rgba(255,255,255,0.3) !important; }

.ie-vivid .pc-tl-line { background: rgba(0,0,0,0.2) !important; }
.ie-vivid .step-label,
.ie-vivid .step-body  { color: rgba(0,0,0,1) !important; -webkit-text-fill-color: rgba(0,0,0,0.85) !important; }
.ie-vivid .step-dot   { color: rgba(0,0,0,0.85) !important; -webkit-text-fill-color: rgba(0,0,0,0.85) !important; border: 1.5px solid rgba(0,0,0,1) !important; }
.ie-vivid .pc-step    { border-bottom-color: rgba(0,0,0,0.3) !important; }


/* ─────────────────────────────────────────────────────────────────────────────────
   F · TIERS
───────────────────────────────────────────────────────────────────────────────── */
.pc-tier-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pc-gap); margin-bottom: 14px; }
.pc-tier-card      { padding: var(--pc-pad-tier, 26px 22px); display: flex; flex-direction: column; }

.tier-tag          { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: var(--pc-eyebrow-ls, 0.08em); text-transform: uppercase; margin-bottom: 12px; opacity: 0.85; }
.tier-amount       { font-family: var(--pc-number-font, var(--pc-title-font)); font-size: var(--pc-h3); font-weight: var(--pc-number-weight, 400); line-height: 1; letter-spacing: var(--pc-number-ls, -2px); margin-bottom: 3px; display: block; }
.tier-amount-label { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--pc-white) 40%, transparent); display: block; margin-bottom: 18px; }
.tier-divider      { height: 1px; background: var(--pc-border-color); margin-bottom: 14px; }
.tier-covers-label { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--pc-white) 40%, transparent); margin-bottom: 8px; }
.tier-covers       { list-style: none; flex-grow: 1; }
.tier-covers li    { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); padding: 5px 0; border-bottom: var(--pc-border); line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; }
.tier-covers li:last-child { border-bottom: none; }
.tier-covers li::before    { content: '✓'; font-size: var(--pc-eyebrow-size, 0.85rem); flex-shrink: 0; margin-top: 2px; }
.tier-fee          { margin-top: 14px; font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--pc-white) 40%, transparent); padding-top: 10px; border-top: var(--pc-border); }
.tier-disclaimer   { font-size: var(--pc-body-size, 0.9rem); font-style: italic; color: color-mix(in srgb, var(--pc-white) 16%, transparent); line-height: 1.45; margin-top: 12px; }

.ta-c1 { color: var(--pc-c1); } .ta-c2 { color: var(--pc-c2); } .ta-c3 { color: var(--pc-c3); } .ta-c4 { color: var(--pc-c4); } .ta-c5 { color: var(--pc-c5); }
.tc-c1 li::before { color: var(--pc-c1); } .tc-c2 li::before { color: var(--pc-c2); } .tc-c3 li::before { color: var(--pc-c3); } .tc-c4 li::before { color: var(--pc-c4); } .tc-c5 li::before { color: var(--pc-c5); }


/* ─────────────────────────────────────────────────────────────────────────────────
   G · FEATURE TABLE
───────────────────────────────────────────────────────────────────────────────── */
.pc-table-outer             { background: var(--pc-surface-2); border: var(--pc-border-md); border-radius: var(--pc-r-lg); overflow: visible !important; padding: 1px; }
.pc-table-outer table       { width: 100%; border-collapse: separate; border-spacing: 0; }
thead tr th                 { padding: 35px 20px 15px !important; font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500) !important; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--pc-white) 40%, transparent); }
thead tr th:first-child     { border-top-left-radius: var(--pc-r-lg); text-align: left; }
thead tr th:last-child      { border-top-right-radius: var(--pc-r-lg); text-align: center; width: 130px; }

tr.cat-row                  { position: relative; }
tr.cat-row td               { padding: 10px 20px !important; font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500) !important; letter-spacing: 0.13em; text-transform: uppercase; border-bottom: var(--pc-border); background: color-mix(in srgb, var(--pc-black) 30%, transparent) !important; }
tr.cat-row::after           { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--pc-bar, 4px); pointer-events: none; }
tr.cat-row.c1 td { color: var(--pc-c1); } tr.cat-row.c2 td { color: var(--pc-c2); } tr.cat-row.c3 td { color: var(--pc-c3); } tr.cat-row.c4 td { color: var(--pc-c4); } tr.cat-row.c5 td { color: var(--pc-c5); }
tr.cat-row.c1::after { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c1) var(--pc-bar-fade, 0%), var(--pc-c2) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
tr.cat-row.c2::after { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c2) var(--pc-bar-fade, 0%), var(--pc-c3) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
tr.cat-row.c3::after { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c3) var(--pc-bar-fade, 0%), var(--pc-c4) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
tr.cat-row.c4::after { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c4) var(--pc-bar-fade, 0%), var(--pc-c5) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }
tr.cat-row.c5::after { background: linear-gradient(90deg, var(--gradient-bar-edge, transparent), var(--pc-c5) var(--pc-bar-fade, 0%), var(--pc-c1) calc(100% - var(--pc-bar-fade, 0%)), var(--gradient-bar-edge, transparent)); }

tr.feat-row td              { padding: 8px 20px !important; line-height: 1.2 !important; font-size: var(--pc-body-size, 1rem); color: color-mix(in srgb, var(--pc-white) 90%, transparent); border-bottom: var(--pc-border); }
tr.feat-row:last-child td   { border-bottom: none; padding-bottom: 15px !important; }
tr.feat-row:last-child td:first-child { border-bottom-left-radius: var(--pc-r-lg); }
tr.feat-row:last-child td:last-child  { border-bottom-right-radius: var(--pc-r-lg); }

.chk-std  { color: var(--pc-c1) !important; }
.chk-qual { color: var(--pc-c2) !important; }

.col-price { display: block; font-family: var(--pc-number-font, var(--pc-title-font)); font-size: var(--pc-h3); font-weight: var(--pc-number-weight, 400); letter-spacing: var(--pc-number-ls, -2px); line-height: 1; }


/* ─────────────────────────────────────────────────────────────────────────────────
   H · SOCIAL PROOF
───────────────────────────────────────────────────────────────────────────────── */
.pc-sp-featured { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--pc-gap); }
.pc-sp-grid     { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pc-gap); }

.sp-card        { padding: var(--pc-pad-sp-card, 18px 22px); cursor: pointer; }
.sp-card.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: var(--pc-pad-sp-featured, 22px 26px); }

.sp-stars       { color: var(--pc-c3); font-size: var(--pc-eyebrow-size, 0.85rem); letter-spacing: 2px; margin-bottom: 12px; }
.sp-quote       { font-size: var(--pc-body-size, 1rem); line-height: 1.5; color: color-mix(in srgb, var(--pc-white) 92%, transparent); font-style: italic; margin-bottom: 14px; }
.sp-author      { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-bold); color: color-mix(in srgb, var(--pc-white) 75%, transparent); }
.sp-props       { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--pc-white) 65%, transparent); margin-top: 3px; }

.sp-numbers     { display: flex; flex-direction: column; gap: 18px; }
.sp-num-value   { font-family: var(--pc-number-font, var(--pc-title-font)); font-size: var(--pc-h4); font-weight: var(--pc-number-weight, 400); letter-spacing: var(--pc-number-ls, -2px); line-height: 1; margin-bottom: 3px; background: var(--pc-num-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sp-num-label   { font-size: var(--pc-body-size, 1rem); color: color-mix(in srgb, var(--pc-white) 65%, transparent); line-height: 1.4; }


/* ─────────────────────────────────────────────────────────────────────────────────
   J · JOURNEY GRID
───────────────────────────────────────────────────────────────────────────────── */
.pc-journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pc-gap); }
.journey-inner   { padding: var(--pc-pad-journey, 24px 22px); }
.journey-body    { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); line-height: 1.6; }


/* ─────────────────────────────────────────────────────────────────────────────────
   K · INFO TILES
───────────────────────────────────────────────────────────────────────────────── */
.pc-tiles-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--pc-gap); }
.pc-tiles-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pc-gap); }

.tile-icon  { width: var(--pc-icon-size, 48px); height: var(--pc-icon-size, 48px); display: flex; align-items: center; justify-content: center; font-size: 4em; margin-bottom: 16px; }
.tile-body  { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); line-height: 1.6; transition: color var(--pc-t); }
.pc-tile:hover .tile-body { color: color-mix(in srgb, var(--pc-white) 72%, transparent); }


/* ─────────────────────────────────────────────────────────────────────────────────
   L · STAT STACK
───────────────────────────────────────────────────────────────────────────────── */
.pc-stat-stack { display: flex; flex-direction: column; gap: var(--pc-gap); width: 100%; }

.ss-value {
  font-family: var(--pc-number-font, var(--pc-title-font));
  font-size: var(--pc-h2);
  font-weight: var(--pc-number-weight, 400);
  line-height: 1.05;
  margin-bottom: 10px;
  display: inline;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ss-label  { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); line-height: 1.5; transition: color var(--pc-t); }
.pc-stat-card:hover .ss-label { color: color-mix(in srgb, var(--pc-white) 72%, transparent); }

.ss-c1 { background-image: var(--pc-num-1); }
.ss-c2 { background-image: var(--pc-num-2); }
.ss-c3 { background-image: var(--pc-num-3); }
.ss-c4 { background-image: var(--pc-num-4); }
.ss-c5 { background-image: var(--pc-num-5); }


/* ─────────────────────────────────────────────────────────────────────────────────
   N · RAINBOW CTA
───────────────────────────────────────────────────────────────────────────────── */
.pc-rainbow { border-radius: 20px; border: var(--pc-border-md); background: var(--pc-surface-2); padding: var(--pc-pad-rainbow, 48px 56px); position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), border-color var(--pc-t), box-shadow var(--pc-t); }
.pc-rainbow:hover { transform: translateY(-2px) scale(1.02); border-color: var(--pc-border-color); box-shadow: 0 8px 40px color-mix(in srgb, var(--pc-glow) calc(var(--pc-glow-i) * 100%), transparent); }
.rc-headline { font-family: var(--pc-title-font, var(--pc-font)); font-size: var(--pc-card-name-size, 2.6rem); font-weight: var(--pc-fw-bold); letter-spacing: -0.02em; line-height: 1.1; color: var(--pc-white); margin-bottom: 10px; }
.rc-sub      { font-size: var(--pc-body-size, 0.9rem); color: color-mix(in srgb, var(--pc-white) 70%, transparent); line-height: 1.6; }


/* ─────────────────────────────────────────────────────────────────────────────────
   P · FEAT LINKS
───────────────────────────────────────────────────────────────────────────────── */
.feat-num    { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-bold); letter-spacing: 0.12em; color: color-mix(in srgb, var(--pc-white) 18%, transparent); margin-bottom: 6px; line-height: 1.6; }
.feat-kicker { font-size: var(--pc-eyebrow-size, 0.85rem); font-weight: var(--pc-fw-eyebrow, 500); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; }

.feat-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: var(--pill-padding, 10px 20px) !important;
  border-radius: var(--pill-radius, 100px) !important;
  font-size: 1.1rem !important;
  font-weight: var(--pc-fw-eyebrow, 500) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  border: var(--pc-border) !important;
  opacity: 0.9;
  margin-top: 16px;
  cursor: pointer;
  transition: background var(--pc-t), border-color var(--pc-t), transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), filter var(--pc-t) !important;
}
.feat-link:hover { filter: brightness(1.08) !important; transform: translateY(-2px) scale(1.04) !important; opacity: 1 !important; }


/* ─────────────────────────────────────────────────────────────────────────────────
   MOBILE
───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --pc-gap: 14px; }

  .pc-grid-5,
  .pc-grid-4,
  .pc-grid-3     { grid-template-columns: 1fr; }
  .pc-journey-grid,
  .pc-pricing-pair { grid-template-columns: 1fr; }
  .pc-tier-grid  { grid-template-columns: 1fr; }

  .pc-stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-item     { border-right: none; border-bottom: var(--pc-border); }
  .stat-item:nth-child(odd)      { border-right: var(--pc-border); }
  .stat-item:nth-last-child(-n+2){ border-bottom: none; }

  /* ── Timeline steps — dot left, label + body stacked right ── */
  .pc-tl-grid-3,
  .pc-tl-grid-4,
  .pc-tl-grid-5  { grid-template-columns: 1fr !important; gap: 0; }
  .pc-tl-line    { display: none; }

  .pc-step {
    display: grid !important;
    grid-template-columns: var(--pc-dot-size, 48px) 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    align-items: start !important;
    text-align: left !important;
    padding: 16px 0 !important;
    border-bottom: var(--pc-border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pc-step:last-child { border-bottom: none !important; }

  .pc-step .step-dot {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: var(--pc-dot-size, 48px) !important;
    height: var(--pc-dot-size, 48px) !important;
    min-width: var(--pc-dot-size, 48px) !important;
    min-height: var(--pc-dot-size, 48px) !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 50% !important;
    align-self: start !important;
  }

  .pc-step .step-label {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
    margin-bottom: 6px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .pc-step .step-body {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: left !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .step-label { font-size: 1.3rem !important; }

  /* ── Journey grid ── */
  .pc-journey-grid { grid-template-columns: 1fr !important; }
  .journey-inner   { padding: 20px 18px; }
  .journey-body    { word-break: break-word; overflow-wrap: break-word; }

  /* ── Pills ── */
  .pc-pill {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .pc-pills,
  .pc-pills-centered {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  /* ── Pricing table ── */
  .pc-table-outer {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--pc-r-lg);
  }
  .pc-table-outer table {
    min-width: 480px;
    width: 100%;
  }
  thead tr th:first-child     { min-width: 120px; width: auto; }
  thead tr th:not(:first-child) { min-width: 90px; width: 90px; }

  .pc-sp-featured { grid-template-columns: 1fr; }
  .sp-card.featured { grid-template-columns: 1fr; }
  .pc-sp-grid    { grid-template-columns: 1fr; }
  .pc-tiles-grid,
  .pc-tiles-grid-2 { grid-template-columns: 1fr; }
  .pc-rainbow    { padding: 28px 24px; }
}

@media (max-width: 480px) {
  .pc-stat-strip { grid-template-columns: 1fr; }
  .stat-item     { border-right: none !important; border-bottom: var(--pc-border); }
  .stat-item:last-child { border-bottom: none; }

  .pc-step { padding: 14px 0; column-gap: 12px; }
  .step-label { font-size: 1.15rem !important; }
  .pc-table-outer table { min-width: 420px; }
  thead tr th:not(:first-child) { min-width: 75px; width: 75px; }
}