:root {
  --page: #f4f6f8;
  --surface: #fff;
  --ink: #142033;
  --muted: #687386;
  --line: #e1e6ec;
  --blue: #2859d6;
  --blue-soft: #edf2ff;
  --coral: #cf3f48;
  --coral-soft: #fff0f1;
  --green: #17845a;
  --green-soft: #eaf7f1;
  --violet: #7753c7;
}
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--ink); background: linear-gradient(135deg,#f7f8fa,#eef3f5); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 72px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95) !important; backdrop-filter: blur(18px); }
.topbar .brand, .topbar .back-link { color: var(--ink) !important; }.topbar .brand img { width: 38px; height: 38px; border-radius: 8px; }.topbar .brand small { color: var(--muted) !important; }.back-link { color: var(--blue) !important; font-size: 13px; font-weight: 800; }
main { width: 100%; padding: 0 0 116px; }
main > .hero { min-height: 360px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,390px); align-items: center; gap: 72px; margin: 0 0 58px; padding: 64px max(24px, 7vw); color: #fff; background: linear-gradient(135deg,#173b78,#2859d6 62%,#327ea2) !important; }
.hero .eyebrow { color: #dfe9ff !important; font-size: 12px; font-weight: 850; }.eyebrow::before { background: #8ee0bd; }.hero h1 { max-width: 700px; color: #fff; font-size: clamp(44px, 5.4vw, 66px); line-height: 1.07; }.hero-copy { max-width: 620px; color: rgba(255,255,255,.76) !important; font-size: 16px; line-height: 1.75; }.hero-note { padding: 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px !important; background: rgba(7,28,66,.22) !important; }.hero-note strong { color: #fff; font-size: 20px; }.hero-note p { color: rgba(255,255,255,.72); line-height: 1.7; }
main > section:not(.hero), .benefits, .invite-strip { width: min(1180px, calc(100% - 40px)); margin-right: auto; margin-left: auto; }
.section-heading { align-items: end; }.section-heading h2 { margin: 0; color: var(--ink); font-size: 32px; }.section-heading span { color: var(--muted); font-size: 12px; }
.pricing-grid { gap: 12px; }.plan { position:relative; min-height: 252px; border: 1px solid var(--line); border-radius: 12px !important; box-shadow: 0 4px 16px rgba(20,32,51,.04) !important; background: #fff; }.plan::before { position:absolute; top:0; right:18px; left:18px; height:3px; border-radius:0 0 4px 4px; background:#dbe2ea; content:""; }.plan:hover { border-color: #b9c5d2; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,32,51,.08) !important; }.plan.selected { border-color: var(--blue); background: var(--blue-soft); }.plan.selected::before,.plan.featured::before { background:var(--blue); }.plan.featured { border-color: #bdcafa !important; background: #f5f7ff !important; }.plan-badge { border-radius: 6px; color: #fff; background: var(--blue); }.plan-badge.orange { background: var(--coral); }.plan-meta strong { color: var(--blue); }.plan-button { border-color: var(--line); border-radius: 8px !important; color: var(--ink); background: #fff !important; }.plan:hover .plan-button, .plan.selected .plan-button { border-color: var(--blue); color: #fff; background: var(--blue) !important; }
.benefits { margin-top: 62px; gap: 12px; }.benefit { min-height: 150px; border-color: var(--line); border-radius: 8px !important; background: #fff; }.benefit-mark, .benefit:nth-child(n) .benefit-mark { border-radius: 7px; color: var(--blue); background: var(--blue-soft); }.benefit:first-child .benefit-mark { color: #b94038; background: var(--coral-soft); }.benefit:nth-child(3) .benefit-mark { color: var(--green); background: var(--green-soft); }.benefit:nth-child(4) .benefit-mark { color: var(--violet); background: #f1efff; }
.invite-strip { margin-top: 28px; border: 1px solid #d9e0fb; border-radius: 8px !important; color: var(--ink); background: var(--blue-soft) !important; }.invite-strip p { color: var(--muted); }.invite-link { border: 1px solid #c4cff5; border-radius: 7px; color: var(--blue); background: #fff; }.invite-link:hover { border-color: var(--blue); background: #fff; }
.selection-bar { border: 1px solid #cfd7f4; border-radius: 8px !important; color: var(--ink); background: #fff !important; box-shadow: 0 12px 28px rgba(37,43,58,.12) !important; }.selection-label { color: var(--muted); }.selection-label strong { color: var(--ink); }.selection-action { border-radius: 7px !important; background: var(--blue) !important; box-shadow: none; }
footer { border-color: var(--line); color: var(--muted); background: #fff; } footer a { color: var(--blue); }
@media (max-width: 960px) { main > .hero { grid-template-columns: 1fr; gap: 30px; } .hero-note { max-width: 560px; } }
@media (max-width: 700px) { main { padding-top: 0; } main > .hero { min-height: 430px; margin-bottom: 42px; padding: 52px 20px 44px; } .hero h1 { font-size: 39px; } main > section:not(.hero), .benefits, .invite-strip { width: calc(100% - 28px); } .pricing-grid, .benefits { grid-template-columns: 1fr; } .plan { min-height:230px; }.selection-bar { left: 14px; right: 14px; } }

/* Keep the purchase affordance absent until a plan is intentionally chosen. */
.selection-bar{visibility:hidden;opacity:0;transform:translateY(calc(100% + 24px));}
.selection-bar.visible{visibility:visible;opacity:1;transform:translateY(0);}
@media (max-width:700px){
  main > .hero{min-height:398px;margin-bottom:34px;padding:42px 20px 34px}
  .hero h1{max-width:340px;font-size:36px;line-height:1.1}
  .hero-copy{font-size:15px;line-height:1.62}
  .hero-note{padding:18px}
  .section-heading{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:14px}
  .section-heading h2{font-size:28px}
  .plan{min-height:218px;padding:20px 16px 15px}
  .price-line b{font-size:30px}
  .benefits{margin-top:44px;gap:10px}
  .benefit{min-height:136px;padding:18px}
}