/* Plans page (pricing.html) — plan cards + the feature comparison matrix. */

.wrap.wide { max-width: 1120px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pr-hero { padding-bottom: 28px; }
.pr-hero p.lead { max-width: 700px; margin-bottom: 0; }

/* ── Plan cards ── */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 20px; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px 20px;
}
.plan h2 { font-size: 21px; margin: 2px 0 6px; }
.plan-kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }
.plan-price { font-size: 15px; font-weight: 600; color: var(--accent-2); margin-bottom: 12px; }
.plan-desc { font-size: 14px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 20px; flex: 1; }
.plan-cta { text-align: center; justify-content: center; }
.plan-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(155, 122, 214, .16), rgba(155, 122, 214, .04) 60%), var(--bg-soft);
  box-shadow: 0 18px 44px -22px rgba(155, 122, 214, .7);
}
.plan-flag {
  position: absolute; top: -11px; left: 20px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff;
}
@media (max-width: 960px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* ── Comparison matrix ── */
.cmp-scroll {
  margin-top: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft);
}
.cmp { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; }
.cmp { table-layout: fixed; }
.cmp col.c-feat { width: 28%; }
.cmp col:not(.c-feat) { width: 18%; }
.cmp th, .cmp td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cmp td { text-align: center; color: var(--fg-dim); line-height: 1.45; }
.cmp tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--fg); line-height: 1.45; }

/* Sticky header row + sticky feature column, so the matrix stays readable while scrolling. */
.cmp thead th {
  position: sticky; top: 0; z-index: 2;
  background: #15121f; text-align: center; font-size: 15px; padding: 16px 12px 14px;
}
.cmp thead th small { display: block; font-size: 12px; font-weight: 500; color: var(--fg-dim); margin-top: 2px; }
.cmp tbody th[scope="row"], .cmp tfoot th, .cmp .cmp-corner { position: sticky; left: 0; z-index: 1; background: var(--bg-soft); }
.cmp .cmp-corner { z-index: 3; background: #15121f; }

.cmp tr.grp th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-2); background: rgba(155, 122, 214, .07); padding: 9px 14px;
}
.cmp tr.grp th { position: sticky; left: 0; }
.cmp tbody tr:not(.grp):hover th, .cmp tbody tr:not(.grp):hover td { background-color: rgba(155, 122, 214, .05); }

/* Highlighted (promoted) column — Cloud spaces. */
.cmp .hl { background: rgba(155, 122, 214, .08); }
.cmp thead th.hl { background: #241c38; color: #fff; box-shadow: inset 0 3px 0 var(--accent); }

.cmp .y { color: #7FD8A4; font-weight: 700; font-size: 15px; }
.cmp .n { color: #4d4566; }
.cmp .pill {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  color: var(--accent-2); background: rgba(155, 122, 214, .12); border: 1px solid var(--border);
}

.cmp tfoot td, .cmp tfoot th { border-bottom: 0; padding: 18px 10px; }
.cmp tfoot .btn { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
.cmp-foot { font-size: 13.5px; margin-top: 14px; }
.plan-note { margin: -8px 0 12px; font-size: 12.5px; color: var(--fg-dim); }