body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); line-height:1.55; -webkit-font-smoothing: antialiased; }

a { color: inherit; }

.nav { position: sticky; top: 0; z-index: 20; background: rgba(11,11,15,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }

.nav-cta { background: var(--accent); color:#0b0b0f; font-weight:600; font-size:0.85rem; padding:9px 18px; border-radius:8px; text-decoration:none; transition:background 0.15s; }

.nav-login { color: var(--fg-2); font-size:0.85rem; font-weight:600; text-decoration:none; padding:9px 4px; transition:color 0.15s; }

.page-hero { padding: 72px 0 24px; text-align:center; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; background: var(--accent-soft); border:1px solid var(--accent-ring); color: var(--accent-hi); font-size:0.78rem; font-weight:600; padding:6px 14px; border-radius:99px; margin-bottom:22px; }

h1 { font-size: 2.6rem; line-height:1.1; letter-spacing:-0.03em; margin:0 0 18px; font-weight:800; }

.page-hero p { font-size:1.1rem; color: var(--fg-2); max-width:560px; margin:0 auto; }

/* billing toggle */
  .toggle-row { display:flex; align-items:center; justify-content:center; gap:14px; padding: 36px 0 8px; font-size:0.88rem; color: var(--fg-2); }

.toggle-row .save { background: rgba(52,211,153,0.12); color: var(--success); font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:99px; }

.switch { width:44px; height:24px; background: var(--surface-3); border:1px solid var(--border-2); border-radius:99px; position:relative; cursor:pointer; transition: background 0.15s; }

.switch::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background: var(--accent); transition: transform 0.15s; }

.switch.on { background: var(--accent-soft); border-color: var(--accent-ring); }

.switch.on::after { transform: translateX(20px); }

.toggle-row span { cursor:pointer; }

.toggle-row .active-label { color: var(--fg); font-weight:600; }

/* pricing grid */
  .pricing-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; padding: 36px 0 80px; align-items:stretch; }

.plan { background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px; display:flex; flex-direction:column; position:relative; }

.plan.featured { border-color: var(--accent-ring); background: linear-gradient(180deg, rgba(129,140,248,0.06), var(--surface) 40%); box-shadow: 0 20px 50px -24px rgba(129,140,248,0.35); }

.plan-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--accent); color:#0b0b0f; font-size:0.7rem; font-weight:700; padding:4px 14px; border-radius:99px; white-space:nowrap; }

.plan-name { font-size:1.05rem; font-weight:700; margin:0 0 6px; }

.plan-desc { font-size:0.85rem; color: var(--fg-2); margin:0 0 24px; min-height:38px; }

.plan-price { display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }

.plan-price .amt { font-size:2.4rem; font-weight:800; letter-spacing:-0.02em; font-family: var(--font-mono); }

.plan-price .per { font-size:0.85rem; color: var(--fg-3); }

.plan-sub { font-size:0.78rem; color: var(--fg-3); margin-bottom:26px; }

.plan-btn { display:block; text-align:center; padding:12px; border-radius:9px; font-weight:600; font-size:0.9rem; text-decoration:none; margin-bottom:28px; transition: all 0.15s; }

.plan-btn.primary { background: var(--accent); color:#0b0b0f; }

.plan-btn.primary:hover { background: var(--accent-hi); }

.plan-btn.ghost { background: var(--surface-2); color: var(--fg); border:1px solid var(--border-2); }

.plan-btn.ghost:hover { background: var(--hover); border-color: var(--border-bright); }

.plan-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:0.86rem; flex:1; }

.plan-features li { display:flex; gap:10px; color: var(--fg-2); }

.plan-features li i { color: var(--success); flex-shrink:0; }

.plan-features li b { color: var(--fg); font-weight:600; }

/* comparison table */
  .compare { padding: 0 0 88px; }

.compare h2 { text-align:center; font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; margin: 0 0 40px; }

.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

table.cmp { width:100%; min-width:560px; border-collapse: collapse; background: var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; font-size:0.86rem; }

table.cmp th, table.cmp td { padding:14px 18px; text-align:center; border-bottom:1px solid var(--border); }

table.cmp th:first-child, table.cmp td:first-child { text-align:left; color: var(--fg-2); }

table.cmp thead th { background: var(--surface-2); font-weight:700; color: var(--fg); }

table.cmp thead th:first-child { text-align:left; }

table.cmp tbody tr:last-child td { border-bottom:none; }

table.cmp .yes { color: var(--success); font-weight:700; }

table.cmp .no { color: var(--fg-3); }

/* faq */
  .faq { padding: 0 0 88px; }

.faq h2 { text-align:center; font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; margin: 0 0 40px; }

.faq-grid { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }

.faq-item { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px 22px; }

.faq-item h3 { margin:0 0 8px; font-size:0.94rem; font-weight:700; }

.faq-item p { margin:0; color: var(--fg-2); font-size:0.87rem; }

footer { border-top:1px solid var(--border); padding: 40px 0; }

@media (max-width: 900px) {
    h1 { font-size:2rem; }
    .pricing-grid { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: 1fr; }
    table.cmp { font-size:0.78rem; }
    .nav-links, .nav-actions > .nav-login, .nav-actions > .nav-cta { display:none; }
    .mobile-nav { display:block; }
  }

@media (max-width: 480px) {
    .nav .wrap { padding: 0 16px; }
    .nav-actions { gap:10px; }
    .page-hero { padding: 48px 0 16px; }
    h1 { font-size:1.7rem; }
    .toggle-row { flex-wrap:wrap; padding: 28px 0 8px; }
    footer .wrap { flex-direction:column; align-items:flex-start; }
  }