/* ============================================================
   pages/pricing.css — Pricing page styles
   ------------------------------------------------------------
   Depends on: tokens.css, base.css, chrome.css
   Notes:
     - .sx-mast + .faq-* are duplicated from compare.css (same shape,
       no shared sheet yet — pull up to a components.css later).
     - .btn-red + .btn-full are pricing-only button variants.
   ============================================================ */

/* ─── Extra button variants used on this page ─── */
.btn-red       { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn-full      { width: 100%; justify-content: center; }

/* ════ MASTHEAD — §-numbered section markers ════ */
.sx-mast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 56px;
}
.sx-mast-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--slate-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sx-mast-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.sx-mast-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.sx-mast.dark {
  border-top-color: rgba(255,255,255,0.16);
  border-bottom-color: rgba(255,255,255,0.16);
}
.sx-mast.dark .sx-mast-num   { color: #fca5a5; }
.sx-mast.dark .sx-mast-label { color: #fff; }
.sx-mast.dark .sx-mast-meta  { color: rgba(255,255,255,0.50); }
@media (max-width: 720px) {
  .sx-mast {
    grid-template-columns: auto 1fr;
    gap: 16px; padding: 10px 0 12px; margin-bottom: 32px;
  }
  .sx-mast-meta  { display: none; }
  .sx-mast-label { font-size: 10.5px; letter-spacing: 0.18em; }
}

/* ════ HERO ════ */
.hero {
  padding: 48px 0 32px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(61,90,122,0.08) 0%, transparent 50%),
    var(--bg);
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  background: var(--red-wash);
  border: 1px solid rgba(220,38,38,0.30);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 26px;
}
.hero h1 {
  font-size: 60px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.045em;
  line-height: 1.05; margin: 0 auto 22px;
  max-width: 880px;
}
.hero h1 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.03em;
}
@media (max-width: 1100px) { .hero h1 { font-size: 48px; } }
@media (max-width: 720px)  { .hero h1 { font-size: 34px; } }
.hero-sub {
  font-size: 18px; color: var(--body);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto 36px;
}

/* Billing toggle */
.bill-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  font-size: 13.5px;
  font-weight: 600;
}
.bill-toggle button {
  background: transparent;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.bill-toggle button.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,0.18);
}
.bill-save {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(34,197,94,0.18);
  color: #15803d;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.bill-toggle button.active .bill-save {
  /* Active button background is dark var(--ink) — bright green pill
     with white text so "Save 15%" stays legible. */
  background: #22c55e;
  color: #ffffff;
}

/* ════ TIERS — three cards ════ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 880px) { .tier-grid { grid-template-columns: 1fr; gap: 18px; } }
.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tier:hover {
  transform: translateY(-3px);
  border-color: var(--slate-blue);
  box-shadow: 0 16px 36px -12px rgba(15,23,42,0.12);
}
.tier.featured {
  border-color: var(--red);
  background: linear-gradient(180deg, var(--red-wash) 0%, #fff 30%);
  box-shadow: 0 16px 36px -12px rgba(220,38,38,0.18);
}
.tier.featured:hover {
  border-color: var(--red-deep);
  box-shadow: 0 20px 44px -12px rgba(185,28,28,0.28);
}
.tier.featured::before {
  content: 'Most popular';
  position: absolute; top: -11px; left: 26px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(185,28,28,0.30);
}
.tier-name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 4px;
}
.tier.featured .tier-name { color: var(--red); }
.tier-tagline {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.45;
}
.tier-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.tier-price .currency {
  font-size: 18px; font-weight: 700;
  color: var(--muted);
  line-height: 1;
  align-self: flex-start;
  margin-top: 8px;
}
.tier-price .amount {
  font-family: var(--mono);
  font-size: 56px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.tier-price .unit {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 2px;
}
.tier-price.custom .amount {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 44px;
  font-weight: 500;
  color: var(--slate-blue);
  letter-spacing: -0.02em;
}
.tier-price-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.tier-price-note strong { color: var(--ink); font-weight: 600; }
.tier-cta { margin-bottom: 26px; }
.tier-feats-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.tier-feats { list-style: none; padding: 0; margin: 0; flex: 1; }
.tier-feats li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
.tier-feats li:last-child { border-bottom: none; }
.tier-feats li::before {
  content: '\2713';
  color: var(--slate-blue);
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1.4;
}
.tier.featured .tier-feats li::before { color: var(--red); }
.tier-feats li strong { color: var(--ink); font-weight: 700; }

/* ════ PLAN VISUALIZATION — value escalation ════ */
.plan-viz-section {
  padding: 100px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.plan-viz-head {
  max-width: 760px; margin: 0 auto 56px;
  text-align: center;
}
.plan-viz-head h2 {
  font-size: 42px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.035em;
  line-height: 1.1; margin: 0 0 18px;
}
.plan-viz-head h2 .accent {
  color: var(--slate-blue);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .plan-viz-head h2 { font-size: 30px; } }
.plan-viz-head p {
  font-size: 16.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.plan-viz {
  max-width: 980px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 14px 36px -16px rgba(15,23,42,0.12);
}
.plan-viz-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.plan-viz-row:first-child { border-top: none; padding-top: 4px; }
.plan-viz-row:last-child  { padding-bottom: 4px; }
@media (max-width: 720px) {
  .plan-viz-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
}
.plan-viz-tier {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
}
.plan-viz-tier .num { color: var(--faint); font-weight: 500; }
@media (max-width: 720px) {
  .plan-viz-tier { text-align: left; justify-content: flex-start; }
}
.plan-viz-bar {
  height: 56px;
  border-radius: 8px;
  display: flex; align-items: center;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.plan-viz-bar .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bar-grad);
  width: var(--bar-width);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.plan-viz-bar .bar-rail {
  position: absolute;
  inset: 0;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 0;
}
.plan-viz-bar .bar-content {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; gap: 12px;
  /* Constrain content to the fill width so labels never bleed onto
     the light rail where the white text becomes unreadable. */
  width: var(--bar-width);
  padding: 0 20px;
  min-width: 0;
}
.plan-viz-bar .bar-label {
  flex: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-viz-bar .bar-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  padding: 4px 9px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}
.plan-viz-row.solo {
  --bar-width: 36%;
  --bar-grad: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}
.plan-viz-row.team {
  --bar-width: 68%;
  --bar-grad: linear-gradient(90deg, #4a6fa5 0%, #2c4361 100%);
}
.plan-viz-row.ent {
  --bar-width: 100%;
  --bar-grad: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
}
.plan-viz-row.ent .plan-viz-bar .bar-tag { background: rgba(220,38,38,0.50); }

/* ════ FEATURE MATRIX ════ */
.matrix-section {
  padding: 100px 0;
  background: var(--bg);
}
.matrix-head {
  max-width: 760px; margin: 0 auto 48px;
  text-align: center;
}
.matrix-head h2 {
  font-size: 40px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.035em;
  line-height: 1.1; margin: 0 0 18px;
}
.matrix-head h2 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .matrix-head h2 { font-size: 28px; } }
.matrix-head p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.matrix-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 36px -16px rgba(15,23,42,0.10);
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.matrix-table thead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.matrix-table th {
  padding: 18px 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-blue);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line);
}
.matrix-table th:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
  width: 38%;
}
.matrix-table th.featured-col {
  color: var(--red);
  background: rgba(220,38,38,0.04);
  position: relative;
}
.matrix-table th.featured-col::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
}
.matrix-section-row td {
  padding: 14px 20px 8px;
  background: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate-blue);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.matrix-section-row:first-child td { border-top: none; }
.matrix-section-row .sec-num {
  color: var(--faint);
  margin-right: 8px;
  font-weight: 500;
}
.matrix-table tbody tr.feat-row td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.matrix-table tbody tr.feat-row:last-child td { border-bottom: none; }
.matrix-table tbody tr.feat-row td:first-child {
  text-align: left;
  color: var(--ink);
  font-weight: 500;
}
.matrix-table tbody tr.feat-row td.featured-col {
  background: rgba(220,38,38,0.03);
}
.check-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
}
.featured-col .check-icon {
  background: rgba(220,38,38,0.15);
  color: var(--red);
}
.dash-icon {
  color: var(--faint);
  font-weight: 500;
  font-size: 14px;
}
.matrix-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 880px) {
  .matrix-table                         { font-size: 12.5px; }
  .matrix-table th,
  .matrix-table tbody tr.feat-row td    { padding: 11px 12px; }
  .matrix-table th:first-child          { width: 44%; }
}
@media (max-width: 640px) {
  .matrix-table th,
  .matrix-table tbody tr.feat-row td    { padding: 9px 8px; font-size: 11.5px; }
}

/* ════ VS INCUMBENT — dark stripe ════ */
.vs {
  padding: 110px 0;
  background:
    radial-gradient(ellipse 60% 60% at 30% 30%, rgba(74,111,165,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(220,38,38,0.10) 0%, transparent 50%),
    var(--ink);
  color: #fff;
  position: relative; overflow: hidden;
}
.vs-head {
  max-width: 820px; margin: 0 auto 56px;
  text-align: center;
}
.vs-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: rgba(220,38,38,0.20);
  border: 1px solid rgba(220,38,38,0.45);
  padding: 7px 14px; border-radius: 999px;
  margin-bottom: 24px;
}
.vs-head h2 {
  font-size: 46px; font-weight: 900;
  color: #fff; letter-spacing: -0.035em;
  line-height: 1.1; margin: 0 0 20px;
}
.vs-head h2 .accent {
  color: #fca5a5;
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .vs-head h2 { font-size: 30px; } }
.vs-head p {
  font-size: 17px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin: 0;
}
.vs-wrap {
  max-width: 1040px; margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.vs-table thead {
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.vs-table th {
  padding: 18px 22px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
.vs-table th.rtg-col {
  color: #fca5a5;
  background: rgba(220,38,38,0.10);
  border-left: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.10);
  position: relative;
  width: 28%;
}
.vs-table th.rtg-col::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
}
.vs-table th.them-col {
  color: rgba(255,255,255,0.50);
  width: 28%;
}
.vs-table tbody td {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  line-height: 1.5;
}
.vs-table tbody tr:first-child td { border-top: none; }
.vs-table tbody td:first-child {
  color: #fff;
  font-weight: 500;
}
.vs-table tbody td.rtg-col {
  background: rgba(220,38,38,0.06);
  color: #fff;
  border-left: 1px solid rgba(255,255,255,0.10);
  border-right: 1px solid rgba(255,255,255,0.10);
}
.vs-table tbody td.rtg-col strong {
  color: #fca5a5;
  font-weight: 600;
}
.vs-table tbody td.them-col { color: rgba(255,255,255,0.55); }
.vs-table tbody td.them-col strong {
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.vs-check, .vs-cross, .vs-partial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: -3px;
}
.vs-check   { background: rgba(34,197,94,0.20);  color: #6ee7b7; }
.vs-cross   { background: rgba(220,38,38,0.20);  color: #fca5a5; }
.vs-partial { background: rgba(245,158,11,0.20); color: #fcd34d; }
.vs-footnote {
  max-width: 1040px;
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.50);
}
@media (max-width: 880px) {
  .vs-table th,
  .vs-table tbody td                            { padding: 12px 14px; font-size: 13px; }
  .vs-table th.them-col,
  .vs-table tbody td.them-col                   { display: none; }
  .vs-table th.rtg-col,
  .vs-table tbody td.rtg-col                    { width: 38%; }
}

/* ════ FAQ ════ */
.faq-section { padding: 100px 0; background: var(--bg); }
.faq-head {
  max-width: 760px; margin: 0 auto 48px;
  text-align: center;
}
.faq-head h2 {
  font-size: 40px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.035em;
  line-height: 1.1; margin: 0 0 18px;
}
.faq-head h2 .accent {
  color: var(--slate-blue);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .faq-head h2 { font-size: 28px; } }
.faq-head p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 4px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  transition: color 0.15s ease;
}
.faq-q:hover { color: var(--slate-blue); }
.faq-q-num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.06em;
}
.faq-q-toggle {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.faq-item.open .faq-q-toggle {
  transform: rotate(45deg);
  background: var(--slate-blue);
  color: #fff;
  border-color: var(--slate-blue);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-a { max-height: 600px; }
.faq-a-inner {
  padding: 0 44px 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body);
}
.faq-a-inner p             { margin: 0 0 12px; }
.faq-a-inner p:last-child  { margin-bottom: 0; }
.faq-a-inner strong        { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .faq-q        { font-size: 15.5px; gap: 12px; padding: 18px 0; }
  .faq-q-num    { font-size: 11px; }
  .faq-a-inner  { padding: 0 36px 18px; font-size: 14.5px; }
}

/* ════ FINAL CTA ════ */
.final-cta {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(61,90,122,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 50% 100%, rgba(220,38,38,0.06) 0%, transparent 50%),
    var(--bg-soft);
  border-top: 1px solid var(--line-soft);
  padding: 110px 0;
  text-align: center;
}
.final-cta h2 {
  font-size: 56px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.045em;
  line-height: 1.0; margin: 0 auto 22px;
  max-width: 760px;
}
.final-cta h2 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .final-cta h2 { font-size: 36px; } }
.final-cta p {
  font-size: 18px; color: var(--body);
  max-width: 580px; margin: 0 auto 36px;
}
.final-ctas {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}
.final-trust {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 860px;
  margin-left: auto; margin-right: auto;
}
@media (max-width: 720px) { .final-trust { grid-template-columns: 1fr; } }
.final-trust-item {
  display: flex; align-items: flex-start; gap: 14px;
  text-align: left;
}
.final-trust-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--slate-blue-soft);
  color: var(--slate-blue);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.final-trust-icon.red {
  background: var(--red-wash); color: var(--red);
}
.final-trust-icon svg { width: 18px; height: 18px; }
.final-trust strong {
  display: block; font-size: 14.5px; font-weight: 800;
  color: var(--ink); margin-bottom: 3px;
}
.final-trust span { font-size: 13px; color: var(--muted); }

/* ════════════════════════════════════════════
   SINGLE-PLAN MODEL — one price, everything included
   ════════════════════════════════════════════ */
.one-plan-section {
  padding: 80px 0 90px;
  background: var(--bg);
}
/* When the section leads the page (with just the pill-only hero above) —
   tight top padding since the hero already provides the breathing room. */
.one-plan-section.first-section {
  padding-top: 24px;
}

/* Billing toggle wrapper — centers the Monthly/Annual switch above the
   price card (moved from the deleted hero). */
.bill-toggle-wrap {
  text-align: center;
  margin: 0 auto 36px;
}
.one-plan-card {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(15,23,42,0.16);
  overflow: hidden;
}
.one-plan-head {
  padding: 48px 48px 40px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .one-plan-head { padding: 36px 24px 32px; } }
.one-plan-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 18px;
}
.one-plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.one-plan-price .currency {
  font-size: 28px;
  font-weight: 600;
  color: var(--muted);
  align-self: flex-start;
  margin-top: 12px;
}
.one-plan-price .amount {
  font-family: var(--mono);
  font-size: 88px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.one-plan-price .unit {
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 2px;
}
@media (max-width: 720px) {
  .one-plan-price .amount    { font-size: 64px; }
  .one-plan-price .currency  { font-size: 22px; margin-top: 8px; }
}
.one-plan-tag {
  font-size: 19px;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.one-plan-tag em {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
.one-plan-sub {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.one-plan-sub strong { color: var(--ink); font-weight: 600; }

/* What the annual buys — sits between billing note and CTAs.
   Quiet slate chip so it reads as inclusions, not promotion. */
.one-plan-includes {
  display: inline-block;
  margin: 0 auto 26px;
  padding: 10px 18px;
  background: var(--slate-blue-soft);
  border: 1px solid rgba(61,90,122,0.20);
  border-radius: 10px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.55;
  max-width: 600px;
  text-align: center;
}
.one-plan-includes strong { color: var(--slate-blue-deep); font-weight: 700; }
.one-plan-includes em     { color: var(--muted); font-style: italic; }
@media (max-width: 720px) {
  .one-plan-includes { font-size: 12.5px; padding: 9px 14px; }
}

.one-plan-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.one-plan-cta-note {
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Volume pricing table */
.vol-table-wrap { padding: 36px 48px 40px; }
@media (max-width: 720px) { .vol-table-wrap { padding: 28px 20px 32px; } }
.vol-table-head {
  display: flex; align-items: baseline; justify-content: flex-end;
  margin-bottom: 18px;
  gap: 16px; flex-wrap: wrap;
}
.vol-table-head h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.vol-table-head .vol-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.vol-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.vol-table thead th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.vol-table thead th.num-col { text-align: right; }
.vol-table tbody tr {
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.15s ease;
}
.vol-table tbody tr:last-child { border-bottom: none; }
.vol-table tbody tr:hover { background: var(--bg-soft); }
.vol-table tbody td {
  padding: 16px 16px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.vol-table tbody td.seats {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.vol-table tbody td.seats .seats-note {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.vol-table tbody td.discount {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-blue);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vol-table tbody td.discount .none {
  color: var(--faint);
  font-weight: 500;
}
.vol-table tbody td.rate-monthly,
.vol-table tbody td.rate-annual {
  text-align: right;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.vol-table tbody td.rate-monthly .rate-fade,
.vol-table tbody td.rate-annual .rate-fade {
  color: var(--muted);
  font-weight: 500;
  font-size: 12.5px;
  font-family: var(--mono);
}
.vol-table tbody tr.target:hover { background: var(--bg-soft); }

/* Lite seat row — Pulse-only seat type, sits below the volume tiers.
   Thicker top divider separates it from the full-seat rows above;
   otherwise typography matches the other rows (no color differentiation). */
.vol-table tbody tr.lite-row {
  border-top: 1px solid var(--line);
}

.vol-table tbody tr.talk td {
  padding: 16px 16px;
  color: var(--slate-blue);
}
.vol-table tbody tr.talk td.seats { color: var(--slate-blue); }
.vol-table tbody tr.talk td.rate-monthly,
.vol-table tbody tr.talk td.rate-annual {
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--slate-blue);
  font-weight: 600;
}
@media (max-width: 720px) {
  .vol-table                                  { font-size: 13px; }
  .vol-table tbody td                         { padding: 12px 8px; }
  .vol-table tbody td.discount                { display: none; }
  .vol-table thead th.discount-col            { display: none; }
}

/* Lite-seat callout */
.lite-seat {
  margin: 32px auto 0;
  max-width: 880px;
  background: linear-gradient(180deg, var(--slate-blue-soft) 0%, #fff 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
@media (max-width: 720px) {
  .lite-seat { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
}
.lite-seat-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 8px;
}
.lite-seat-eyebrow::before {
  content: '\00a7\00a0';
  color: var(--faint);
}
.lite-seat h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.lite-seat p {
  font-size: 14px;
  color: var(--body);
  margin: 0;
  line-height: 1.55;
}
.lite-seat p strong { color: var(--ink); font-weight: 700; }
.lite-seat-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) { .lite-seat-price { text-align: left; } }
.lite-seat-price .amt {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--slate-blue);
  letter-spacing: -0.03em;
  line-height: 1;
}
.lite-seat-price .unit {
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}
.lite-seat-price .note {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 6px;
}

/* ════════════════════════════════════════════
   EVERYTHING INCLUDED — single checklist
   ════════════════════════════════════════════ */
.included-section {
  padding: 64px 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
/* When the RTG Way section LEADS the page (no hero above) — add top
   breathing room so it doesn't bump the master-page chrome. */
.included-section.first-section {
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: none;
}
.included-head {
  max-width: 760px; margin: 0 auto 56px;
  text-align: center;
}
.included-head h2 {
  font-size: 44px; font-weight: 900;
  color: var(--ink); letter-spacing: -0.035em;
  line-height: 1.05; margin: 0 0 18px;
}
.included-head h2 .accent {
  color: var(--red);
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
@media (max-width: 720px) { .included-head h2 { font-size: 30px; } }
.included-head p {
  font-size: 16.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}
.included-head p strong { color: var(--ink); }

/* "All in" capability list — sits between the section intro and the
   detailed capability groups. Proof block: every line is something a
   competitor gates, sells separately, or doesn't ship at all. */
.all-in-list {
  max-width: 1080px;
  margin: 0 auto 24px;
  padding: 24px 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.06);
}
.all-in-list-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 16px;
  text-align: center;
}
/* Flowing chip cloud — each capability is a soft pill, center-justified
   and flex-wrapped. Subtle border, gentle hover lift. Feels editorial
   rather than spreadsheet. */
.all-in-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.all-in-chip {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.all-in-chip:hover {
  transform: translateY(-2px);
  border-color: var(--slate-blue);
  box-shadow: 0 4px 14px -6px rgba(45, 90, 135, 0.18);
}
@media (max-width: 720px) {
  .all-in-chip { font-size: 13px; padding: 8px 14px; }
}

/* Link out to the full Features page — sits below the chip cloud as
   the bridge for buyers who want every detail. Modern arrow link. */
/* Pill-style callout linking to the full Features page — sits below the
   chip cloud as a confident CTA, not a plain underline-style text link. */
.all-in-more {
  text-align: center;
  margin-top: 0;
}
.all-in-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-blue);
  text-decoration: none;
  background: var(--slate-blue-soft);
  border: 1px solid rgba(45, 90, 135, 0.22);
  border-radius: 999px;
  padding: 10px 22px;
  letter-spacing: -0.005em;
  transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.all-in-more a:hover {
  gap: 14px;
  color: var(--slate-blue-deep, #1e3a5f);
  border-color: var(--slate-blue);
  box-shadow: 0 6px 18px -8px rgba(45, 90, 135, 0.30);
  transform: translateY(-1px);
}
.all-in-more .arrow {
  font-size: 14px;
  display: inline-block;
}

/* Dark-theme variant — sits inside the "Only on RTG" dark stripe section.
   White-tint background and white border so the pill reads on dark blue. */
.all-in-more.all-in-more-dark { margin-top: 56px; }
.all-in-more.all-in-more-dark a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.all-in-more.all-in-more-dark a:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 880px) { .included-grid { grid-template-columns: 1fr; gap: 18px; } }
.included-group {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
}
.included-group-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.included-group-label .sec-num {
  color: var(--faint);
  margin-right: 6px;
}
.included-group h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.015em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.included-group ul { list-style: none; padding: 0; margin: 0; }
.included-group li {
  padding: 9px 0;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
.included-group li::before {
  content: '\2713';
  color: var(--slate-blue);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
  line-height: 1.5;
}
.included-group li strong { color: var(--ink); font-weight: 700; }
.included-group li.coming { color: var(--muted); }
.included-group li.coming::before {
  content: '\25CB';
  color: var(--faint);
  font-weight: 500;
}
.included-group li.coming::after {
  content: 'Coming';
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--bg-soft);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.included-group li.not {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}
.included-group li.not::before {
  content: '\00d7';
  color: var(--faint);
  text-decoration: none;
}
.included-group li.not::after {
  content: 'Not on offer';
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════
   SWITCHING BANNER — slim cross-link between §01 plan card
   and §02 inclusions. Surfaces switching.html at the
   moment cost is on the reader's mind. Slate accent, not red,
   so it reads as helpful pointer, not hard sell.
   ════════════════════════════════════════════════════════ */
.switching-banner-section {
  padding: 0 0 90px;
  background: var(--bg);
}
.switching-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: 880px;
  margin: 32px auto 0;
  padding: 22px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.switching-banner:hover {
  border-color: var(--slate-blue);
  box-shadow: 0 12px 28px -14px rgba(61,90,122,0.30);
  transform: translateY(-1px);
  color: inherit;
}
.switching-banner-text { min-width: 0; }
.switching-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--slate-blue);
  margin-bottom: 8px;
}
.switching-banner-headline {
  font-size: 15.5px;
  color: var(--ink-mid);
  line-height: 1.55;
  margin: 0;
}
.switching-banner-headline em {
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--slate-blue);
}
.switching-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-blue);
  white-space: nowrap;
  transition: gap 0.15s ease;
  flex-shrink: 0;
}
.switching-banner:hover .switching-banner-cta { gap: 12px; color: var(--slate-blue-deep); }
.switching-banner-cta .arrow {
  font-weight: 800;
}
@media (max-width: 720px) {
  .switching-banner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 22px;
  }
  .switching-banner-headline { font-size: 14.5px; }
}