/* Cohesion Insight — Post-beta pricing view
 * FIG-05-GA / FIG-05B-GA / FIG-05C-GA / FIG-05D-GA
 * Rendered only when the dev toggle switches to Post-beta.
 * All selectors scoped under [data-phase-view="postbeta"] so nothing leaks
 * into the live beta view or any other page. Uses site.css tokens only.
 */

/* -------- default visibility (beta shown, postbeta hidden) -------- */
[data-phase-view="postbeta"][hidden] { display: none !important; }

/* Hide beta banner when previewing postbeta phase */
body[data-phase-preview="postbeta"] .beta-banner { display: none !important; }

/* ============ HERO (FIG-05-GA) ============ */
[data-phase-view="postbeta"] .pb-hero {
  background: var(--cream);
  padding: 72px 40px 56px;
  border-bottom: 1px solid rgba(53,20,55,.10);
}
[data-phase-view="postbeta"] .pb-hero .pb-inner {
  max-width: 1200px; margin: 0 auto;
}
[data-phase-view="postbeta"] .pb-hero-grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end;
}
[data-phase-view="postbeta"] .pb-h1 {
  font: 900 60px/1.05 var(--display); letter-spacing: -0.025em;
  color: var(--plum-ink); margin: 0;
  -webkit-text-stroke: 0.5px currentColor; text-rendering: geometricPrecision;
}
[data-phase-view="postbeta"] .pb-h1 .accent { color: var(--magenta); font-style: normal; }
[data-phase-view="postbeta"] .pb-lede {
  color: rgba(53,20,55,.78); font-size: 16px; line-height: 1.55; margin: 0 0 20px;
}
[data-phase-view="postbeta"] .pb-toggle {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(53,20,55,.06); border: 1px solid rgba(53,20,55,.15);
  border-radius: 999px; padding: 3px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
}
[data-phase-view="postbeta"] .pb-toggle button {
  background: transparent; border: 0; padding: 8px 18px; border-radius: 999px;
  cursor: pointer; color: rgba(53,20,55,.72); font: inherit; letter-spacing: inherit;
  text-transform: uppercase; font-weight: 500;
}
[data-phase-view="postbeta"] .pb-toggle button.is-active {
  background: var(--plum-ink); color: var(--cream); font-weight: 700;
}

/* ============ TIER CARDS (FIG-05B-GA) ============ */
[data-phase-view="postbeta"] .pb-tiers-wrap {
  padding: 56px 40px 64px; background: var(--cream);
}
[data-phase-view="postbeta"] .pb-tiers-inner { max-width: 1200px; margin: 0 auto; }
[data-phase-view="postbeta"] .pb-tiers {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
  align-items: stretch; position: relative;
}
[data-phase-view="postbeta"] .pb-tier {
  background: var(--cream); border: 1px solid rgba(53,20,55,.14);
  border-radius: 12px; padding: 28px 26px;
  display: flex; flex-direction: column; position: relative; z-index: 1;
}
[data-phase-view="postbeta"] .pb-tier.is-highlighted {
  border-color: var(--magenta);
  box-shadow: 0 12px 40px rgba(184,50,128,.18);
  transform: translateY(-4px);
}
[data-phase-view="postbeta"] .pb-tier.is-highlighted::after {
  content: ''; position: absolute;
  top: -18px; bottom: -14px; left: -14px; right: -14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(184,50,128,.04) 0%, rgba(184,50,128,0) 55%),
    linear-gradient(180deg, rgba(253,231,243,.18) 0%, rgba(253,231,243,.04) 100%);
  border-radius: 20px; z-index: -1; pointer-events: none;
}
[data-phase-view="postbeta"] .pb-tier.is-highlighted::before {
  content: 'MOST POPULAR';
  position: absolute; top: -10px; left: 24px;
  background: var(--magenta); color: #fff;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  padding: 5px 10px; border-radius: 3px; font-weight: 500;
}
[data-phase-view="postbeta"] .pb-tier-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--plum-deep); font-weight: 500;
}
[data-phase-view="postbeta"] .pb-tier-head {
  font-size: 22px; font-weight: 900; letter-spacing: -.01em;
  margin: 10px 0 14px; color: var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-tier-price {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px;
}
[data-phase-view="postbeta"] .pb-tier-price .amt {
  font-size: 46px; font-weight: 900; letter-spacing: -.02em;
  color: var(--plum-ink); font-family: var(--sans); font-variant-numeric: tabular-nums;
}
[data-phase-view="postbeta"] .pb-tier-price .cyc { font-size: 14px; color: rgba(53,20,55,.65); }
[data-phase-view="postbeta"] .pb-tier-ann {
  font-size: 12px; color: var(--gold); font-weight: 700;
  font-family: var(--mono); letter-spacing: .05em; margin: 4px 0 20px;
}
[data-phase-view="postbeta"] .pb-tier-desc {
  font-size: 14px; color: rgba(53,20,55,.78); line-height: 1.55;
  margin-bottom: 22px; min-height: 68px;
}
[data-phase-view="postbeta"] .pb-tier-cta { margin-bottom: 26px; position: relative; }
[data-phase-view="postbeta"] .pb-tier-cta > a {
  display: block; text-align: center; text-decoration: none;
  padding: 13px 18px; border-radius: 4px;
  font-weight: 700; font-size: 14px;
  background: transparent; color: var(--plum-ink);
  border: 1.5px solid var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-tier.is-highlighted .pb-tier-cta > a {
  background: var(--magenta); color: #fff; border-color: var(--magenta);
}
[data-phase-view="postbeta"] .pb-tier-includes {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--plum-deep); font-weight: 500;
  margin-bottom: 12px;
}
[data-phase-view="postbeta"] .pb-tier-list { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
[data-phase-view="postbeta"] .pb-tier-list li {
  display: flex; gap: 10px; padding: 6px 0;
  color: rgba(53,20,55,.85); align-items: baseline;
}
[data-phase-view="postbeta"] .pb-tier-list li::before {
  content: '✓'; color: var(--magenta); font-weight: 900; flex-shrink: 0;
}

/* ============ MDF ADD-ON BAND (FIG-05C-GA) ============ */
[data-phase-view="postbeta"] .pb-mdf {
  background: var(--plum-ink); color: var(--cream); padding: 56px 40px;
}
[data-phase-view="postbeta"] .pb-mdf,
[data-phase-view="postbeta"] .pb-mdf * {
  color: inherit;
}
[data-phase-view="postbeta"] .pb-mdf-inner { max-width: 1200px; margin: 0 auto; }
[data-phase-view="postbeta"] .pb-mdf-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 10px;
}
[data-phase-view="postbeta"] .pb-mdf-title {
  font: 900 32px/1.15 var(--display); letter-spacing: -.015em;
  margin: 0 0 10px; color: var(--cream);
}
[data-phase-view="postbeta"] .pb-mdf-sub {
  color: rgba(250,244,227,.75); font-size: 15px; max-width: 720px;
  margin: 0 0 24px; line-height: 1.55;
}
[data-phase-view="postbeta"] .pb-mdf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
[data-phase-view="postbeta"] .pb-mdf-item {
  border: 1px solid rgba(250,244,227,.16); border-radius: 10px; padding: 24px;
}
[data-phase-view="postbeta"] .pb-mdf-item-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-soft);
}
[data-phase-view="postbeta"] .pb-mdf-item h3 {
  font: 900 22px/1.2 var(--display); margin: 8px 0 10px; color: var(--cream);
}
[data-phase-view="postbeta"] .pb-mdf-item .p {
  color: rgba(250,244,227,.72); font-size: 14px; margin-bottom: 12px; line-height: 1.55;
}
[data-phase-view="postbeta"] .pb-mdf-item .price {
  font-size: 30px; font-weight: 900; letter-spacing: -.015em;
  color: var(--cream); font-variant-numeric: tabular-nums;
}

/* ============ FEATURE MATRIX (compare-the-tiers) ============ */
[data-phase-view="postbeta"] .pb-matrix-wrap {
  padding: 56px 40px; background: #F5EDD6;
}
[data-phase-view="postbeta"] .pb-matrix-inner { max-width: 1200px; margin: 0 auto; }
[data-phase-view="postbeta"] .pb-matrix-title {
  font: 900 26px/1.2 var(--display); margin: 0 0 20px; color: var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-matrix {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; table-layout: fixed;
}
/* Sticky matrix column headers — position:sticky on <th> only (thead sticky is unreliable).
   Offset by nav height (~72px) so the row sits below the site-nav when scrolled. */
[data-phase-view="postbeta"] .pb-matrix thead th,
[data-phase-view="postbeta"] table.pb-matrix > thead > tr > th {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 72px !important;
  z-index: 52;
  background: #F5EDD6 !important;
  box-shadow: 0 1px 0 rgba(53,20,55,.14), 0 6px 12px -6px rgba(53,20,55,.10);
  font: 500 11px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: .12em; text-transform: uppercase;
  color: #351437 !important;
  padding: 14px 14px;
}
/* Sticky matrix header sticks at top:0 (dev strip sits above in normal flow). */
[data-phase-view="postbeta"] .pb-matrix th,
[data-phase-view="postbeta"] .pb-matrix td {
  padding: 12px 14px; border-bottom: 1px solid rgba(53,20,55,.10);
  vertical-align: middle;
}
[data-phase-view="postbeta"] .pb-matrix th.pb-feat,
[data-phase-view="postbeta"] .pb-matrix td.pb-feat { text-align: left; }
[data-phase-view="postbeta"] .pb-matrix th.pb-thead-tier,
[data-phase-view="postbeta"] .pb-matrix td.pb-val,
[data-phase-view="postbeta"] .pb-matrix td.pb-check,
[data-phase-view="postbeta"] .pb-matrix td.pb-dash { text-align: center; }
[data-phase-view="postbeta"] .pb-matrix th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--plum-deep); font-weight: 500;
}
[data-phase-view="postbeta"] .pb-matrix .pb-cat {
  background: var(--magenta-soft); color: var(--plum-deep);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase;
}
[data-phase-view="postbeta"] .pb-matrix .pb-cat td { padding: 10px 14px; text-align: left; }
[data-phase-view="postbeta"] .pb-matrix td.pb-feat {
  font-family: var(--mono); font-size: 12.5px; color: var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-matrix td.pb-val {
  font-family: var(--mono); font-size: 12.5px; color: var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-matrix td.pb-check {
  color: var(--magenta); font-weight: 900; font-size: 15px;
}
[data-phase-view="postbeta"] .pb-matrix td.pb-dash { color: rgba(53,20,55,.35); }

/* ============ FAQ (FIG-05D-GA) ============ */
[data-phase-view="postbeta"] .pb-faq {
  padding: 56px 40px; background: var(--cream);
  border-top: 1px solid rgba(53,20,55,.10);
}
[data-phase-view="postbeta"] .pb-faq-inner { max-width: 1200px; margin: 0 auto; }
[data-phase-view="postbeta"] .pb-faq-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: 10px;
}
[data-phase-view="postbeta"] .pb-faq-h {
  font: 900 30px/1.15 var(--display); letter-spacing: -.02em;
  margin: 0 0 24px; color: var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-faq-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
[data-phase-view="postbeta"] .pb-faq-q {
  border-top: 1px solid rgba(53,20,55,.14); padding: 16px 0;
}
[data-phase-view="postbeta"] .pb-faq-q h4 {
  font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--plum-ink);
}
[data-phase-view="postbeta"] .pb-faq-q p {
  font-size: 14px; color: rgba(53,20,55,.72); margin: 0; line-height: 1.6;
}

/* ============ CTA FOOTER ============ */
[data-phase-view="postbeta"] .pb-cta {
  background: var(--plum-ink); color: var(--cream);
  padding: 56px 40px; text-align: center;
}
[data-phase-view="postbeta"] .pb-cta,
[data-phase-view="postbeta"] .pb-cta * {
  color: inherit;
}
[data-phase-view="postbeta"] .pb-cta-inner { max-width: 720px; margin: 0 auto; }
[data-phase-view="postbeta"] .pb-cta h2 {
  font: 900 30px/1.15 var(--display); letter-spacing: -.015em;
  margin: 0 0 12px; color: var(--cream);
}
[data-phase-view="postbeta"] .pb-cta p {
  color: rgba(250,244,227,.72); margin: 0 0 24px; font-size: 15px;
}
[data-phase-view="postbeta"] .pb-cta a.btn.primary {
  background: var(--magenta); color: var(--cream);
  border: 0; padding: 13px 28px; border-radius: 4px;
  font-weight: 700; font-size: 14px; text-decoration: none;
  display: inline-block;
}

/* ============ RESPONSIVE / MOBILE (<=768px) ============ */
@media (max-width: 768px) {
  [data-phase-view="postbeta"] .pb-hero { padding: 48px 22px 32px; }
  [data-phase-view="postbeta"] .pb-hero-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  [data-phase-view="postbeta"] .pb-h1 { font-size: 40px; line-height: 1.06; }
  [data-phase-view="postbeta"] .pb-lede { font-size: 14.5px; }

  [data-phase-view="postbeta"] .pb-tiers-wrap { padding: 36px 22px 40px; }
  [data-phase-view="postbeta"] .pb-tiers { grid-template-columns: 1fr; gap: 24px; }
  [data-phase-view="postbeta"] .pb-tier.is-highlighted { transform: none; }
  [data-phase-view="postbeta"] .pb-tier.is-highlighted::after { top: -12px; bottom: -12px; left: -10px; right: -10px; }
  [data-phase-view="postbeta"] .pb-tier-desc { min-height: 0; }

  [data-phase-view="postbeta"] .pb-mdf { padding: 40px 22px; }
  [data-phase-view="postbeta"] .pb-mdf-title { font-size: 26px; }
  [data-phase-view="postbeta"] .pb-mdf-row { grid-template-columns: 1fr; gap: 16px; }

  [data-phase-view="postbeta"] .pb-matrix-wrap { padding: 40px 22px; overflow-x: visible; }
  /* Hide the desktop table on mobile; show the stacked variant. */
  /* !important because the default `display:none` for .pb-matrix-mobile is
     declared later in the file (source order beats media-query specificity). */
  [data-phase-view="postbeta"] .pb-matrix-desktop { display: none !important; }
  [data-phase-view="postbeta"] .pb-matrix-mobile { display: block !important; }

  [data-phase-view="postbeta"] .pb-faq { padding: 40px 22px; }
  [data-phase-view="postbeta"] .pb-faq-h { font-size: 26px; }
  [data-phase-view="postbeta"] .pb-faq-list { grid-template-columns: 1fr; gap: 12px; }

  [data-phase-view="postbeta"] .pb-cta { padding: 40px 22px; }
  [data-phase-view="postbeta"] .pb-cta h2 { font-size: 24px; }
}

/* ============ Dev pricing-phase toggle strip ============ */
/* Reuses the same visual language as the author-state strip so it feels
   like a single dev-tools family. */
.dev-pricing-strip {
  position: sticky; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 16px;
  background: #121014; color: #FAF4E3;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: .06em;
  border-bottom: 1px solid rgba(250,244,227,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.dev-pricing-strip__brand { display: inline-flex; align-items: center; gap: 8px; }
.dev-pricing-strip__brand b { font-weight: 700; letter-spacing: .12em; }
.dev-pricing-strip__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--magenta, #B83280);
  box-shadow: 0 0 0 3px rgba(184,50,128,.25);
}
.dev-pricing-strip__label { color: rgba(250,244,227,.65); }
.dev-pricing-strip__chips { display: inline-flex; align-items: center; gap: 8px; }
.dev-pricing-strip__chips-lbl {
  color: rgba(250,244,227,.55); text-transform: uppercase; letter-spacing: .14em;
}
.dev-pricing-strip__chips button {
  background: transparent; color: #FAF4E3;
  border: 1px solid rgba(250,244,227,.28);
  padding: 5px 12px; border-radius: 999px;
  font: inherit; letter-spacing: inherit; cursor: pointer;
}
.dev-pricing-strip__chips button.on {
  background: var(--magenta, #B83280); border-color: var(--magenta, #B83280);
  color: #fff; font-weight: 700;
}
.dev-pricing-strip__right { display: inline-flex; align-items: center; gap: 12px; }
.dev-pricing-strip__flag {
  color: rgba(250,244,227,.55); font-size: 10px; letter-spacing: .14em;
}
.dev-pricing-strip__hide {
  background: transparent; color: rgba(250,244,227,.7);
  border: 1px solid rgba(250,244,227,.24);
  padding: 4px 10px; border-radius: 4px;
  font: inherit; letter-spacing: inherit; cursor: pointer;
}
/* Nav stays sticky at top:0; dev strip is sticky in flow above it so no manual offset needed. */

/* Billing toggle "Save 15%" microlabel */
[data-phase-view="postbeta"] .pb-toggle-save {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(184,50,128,.12);
  color: #7A1F5C;
  font: 500 10px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
[data-phase-view="postbeta"] .pb-toggle button.is-active .pb-toggle-save {
  background: rgba(255,255,255,.22);
  color: #FAF4E3;
}
[data-phase-view="postbeta"] .pb-tier-ann-save {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(184,50,128,.10);
  color: #7A1F5C;
  font: 500 10px/1 var(--mono, ui-monospace, Menlo, monospace);
  letter-spacing: .10em;
}

/* ============ Mobile-specific matrix variant ============ */
/* Hidden on desktop; the CSS above flips it on at <=768px. */
[data-phase-view="postbeta"] .pb-matrix-mobile { display: none; }

[data-phase-view="postbeta"] .pb-mm-tier-nav {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: 0 0 20px;
  background: #FFF2BF;  /* Gold Wash, per brand palette */
  border: 1px solid #C99700;
  border-radius: 999px;
}
[data-phase-view="postbeta"] .pb-mm-tab {
  flex: 1;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #351437;
  font: 600 13px/1 var(--body, 'Satoshi', system-ui, sans-serif);
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
[data-phase-view="postbeta"] .pb-mm-tab.is-on {
  background: #B83280;   /* Signal Magenta */
  color: #FAF4E3;
}

[data-phase-view="postbeta"] .pb-mm-card {
  border: 1px solid rgba(53, 20, 55, .18);
  border-radius: 12px;
  padding: 20px 20px 8px;
  background: #FAF4E3;
}
[data-phase-view="postbeta"] .pb-mm-card[hidden] { display: none; }

[data-phase-view="postbeta"] .pb-mm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(53, 20, 55, .12);
  margin-bottom: 16px;
}
[data-phase-view="postbeta"] .pb-mm-name {
  font: 700 20px/1.1 var(--display, var(--body));
  color: #351437;
}
[data-phase-view="postbeta"] .pb-mm-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #FDE7F3;
  color: #7A1F5C;
  font: 500 10px/1 var(--mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: .12em;
  vertical-align: middle;
}
[data-phase-view="postbeta"] .pb-mm-price {
  font: 700 20px/1 var(--display, var(--body));
  color: #351437;
  white-space: nowrap;
}
[data-phase-view="postbeta"] .pb-mm-price .cyc {
  font: 500 12px/1 var(--body);
  color: rgba(53, 20, 55, .6);
  margin-left: 2px;
}

[data-phase-view="postbeta"] .pb-mm-cat {
  font: 500 10.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A1F5C;
  padding: 12px 0 8px;
  border-top: 1px solid rgba(53, 20, 55, .10);
  margin-top: 4px;
}
[data-phase-view="postbeta"] .pb-mm-card > .pb-mm-cat:first-of-type {
  border-top: 0;
  padding-top: 0;
}

[data-phase-view="postbeta"] .pb-mm-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
[data-phase-view="postbeta"] .pb-mm-feats li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(53, 20, 55, .08);
  font: 500 14px/1.35 var(--body);
  color: #351437;
}
[data-phase-view="postbeta"] .pb-mm-feats li:last-child { border-bottom: 0; }
[data-phase-view="postbeta"] .pb-mm-feats .lbl { flex: 1; }
[data-phase-view="postbeta"] .pb-mm-feats .val {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-weight: 600;
}
[data-phase-view="postbeta"] .pb-mm-feats .val.pb-check {
  color: #C99700;   /* Strategic Gold — brand palette check */
  font-size: 16px;
}
[data-phase-view="postbeta"] .pb-mm-feats .val.pb-dash {
  color: rgba(53, 20, 55, .4);
}
[data-phase-view="postbeta"] .pb-mm-feats .val.pb-val {
  color: #351437;
  font-size: 13.5px;
}