/* ==========================================================================
   Pricing page

   A pricing page is read by someone who is already interested and looking for
   a reason to say no. So: the price and what it includes appear immediately,
   the ladder explains why buying now is cheaper than buying later, and every
   objection gets answered before the second CTA.
   ========================================================================== */

.price-hero { padding: 72px 0 48px; text-align: center; }
.price-hero h1 { margin-bottom: 18px; }
.price-hero .lede { max-width: 54ch; margin: 0 auto; }

/* ─── Ladder ──────────────────────────────────────────────── */

.ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto 12px;
}

.rung { background: var(--bg-white); padding: 16px 18px; text-align: center; }
.rung-name { font-size: 11px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.rung-price { font-size: 1.5rem; font-weight: 720; letter-spacing: -0.035em; margin-top: 3px; }
.rung-seats { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }

.rung.is-now { background: var(--ink); }
.rung.is-now .rung-name { color: #9db0cc; }
.rung.is-now .rung-price,
.rung.is-now .rung-seats { color: #fff; }
.rung.is-now .rung-seats { opacity: .75; }

.rung.is-past { opacity: .5; }
.rung.is-past .rung-price { text-decoration: line-through; }

.ladder-note { text-align: center; font-size: 13px; color: var(--text-3); margin-bottom: 44px; }

/* ─── Main card ───────────────────────────────────────────── */

.buy-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.buy-card {
  border: 2px solid var(--ink);
  border-radius: var(--r-xl);
  padding: 32px;
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 96px;
}

.buy-tag {
  display: inline-block;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  margin-bottom: 16px;
}

.buy-price-row { display: flex; align-items: baseline; gap: 12px; }
.buy-price { font-size: 3.6rem; font-weight: 750; letter-spacing: -0.05em; line-height: 1; }
.buy-was { font-size: 17px; color: var(--text-3); text-decoration: line-through; }
.buy-term { font-size: 14px; color: var(--text-3); }

.seats-wrap { margin: 18px 0 22px; }
.seats-track { height: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; }
.seats-fill { height: 100%; background: var(--ink); border-radius: 3px; transition: width .4s ease; }
.seats-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; }
.seats-next { font-size: 12.5px; color: var(--text-3); margin-top: 7px; }

.buy-list { list-style: none; display: grid; gap: 12px; margin: 24px 0; }
.buy-list li { display: flex; gap: 11px; font-size: 15px; color: var(--text-2); }
.buy-list svg { flex: 0 0 auto; margin-top: 4px; color: var(--green); }
.buy-list b { color: var(--ink); font-weight: 620; }

.buy-foot { font-size: 12.5px; color: var(--text-3); text-align: center; margin-top: 14px; line-height: 1.5; }

/* ─── Value stack ─────────────────────────────────────────── */

.stack { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-white); }
.stack h3 { padding: 16px 20px; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); font-size: 14px; }
.stack-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; }
.stack-row:last-of-type { border-bottom: 0; }
.stack-row span:first-child { color: var(--text-2); }
.stack-row span:last-child { color: var(--ink); font-weight: 620; white-space: nowrap; }
.stack-total { display: flex; justify-content: space-between; padding: 16px 20px; border-top: 2px solid var(--ink); font-size: 15px; font-weight: 700; }

/* ─── Comparison ──────────────────────────────────────────── */

.compare { width: 100%; border-collapse: collapse; margin-top: 26px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-soft); font-size: 14.5px; }
.compare thead th {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--border); font-weight: 680;
}
.compare td:first-child { color: var(--ink); font-weight: 600; }
.compare td { color: var(--text-2); }
.compare .ours { background: var(--bg-soft); }
.compare tbody tr:last-child td { border-bottom: 0; }

/* ─── Objections ──────────────────────────────────────────── */

.objection { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; background: var(--bg-white); }
.objection h3 { margin-bottom: 9px; }
.objection p { font-size: 14.5px; color: var(--text-2); }

/* ─── Guarantee ───────────────────────────────────────────── */

.guarantee {
  display: flex; align-items: flex-start; gap: 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  background: var(--bg-white);
  max-width: 760px;
  margin: 0 auto;
}
.guarantee svg { flex: 0 0 auto; color: var(--green); margin-top: 2px; }
.guarantee h3 { margin-bottom: 6px; }
.guarantee p { font-size: 14.5px; color: var(--text-2); }

@media (max-width: 900px) {
  .buy-grid { grid-template-columns: 1fr; }
  .buy-card { position: static; order: -1; }
  .ladder { grid-template-columns: 1fr; }
  .compare thead { display: none; }
  .compare tr { display: block; border-bottom: 1px solid var(--border); padding: 12px 0; }
  .compare td { display: flex; justify-content: space-between; border: 0; padding: 6px 0; }
  .compare td::before { content: attr(data-label); color: var(--text-3); font-weight: 600; }
}