/* Shared look for the public Overview and Pricing pages (matches /). */
:root{
  --bg:#09090b; --surface:#111113; --surface-2:#18181b; --border:#27272a;
  --text:#fafafa; --text-muted:#a1a1aa; --text-faint:#71717a;
  --accent:#8f7bf5; --accent-soft:rgba(143,123,245,0.16); --ok:#3ecf8e;
  --radius:16px; --ctl-radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:'Inter',-apple-system,'Segoe UI',sans-serif; font-feature-settings:'cv11','ss01','ss03'; font-optical-sizing:auto; color:var(--text); background:var(--bg); line-height:1.55; padding-top:72px; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
body::before{content:''; position:fixed; left:50%; bottom:-38vw; width:140vw; height:70vw; max-width:1600px; max-height:800px; transform:translateX(-50%); border-radius:50%; border:1px solid rgba(255,255,255,0.07); pointer-events:none; z-index:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
header{position:fixed; top:0; left:0; right:0; z-index:50; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); background:rgba(9,9,11,0.72); border-bottom:1px solid rgba(255,255,255,0.08);}
.brand{display:flex; align-items:center; gap:9px; font-weight:650; font-size:14.5px; letter-spacing:-0.015em; text-decoration:none;}
.brand-mark{width:26px; height:26px; border-radius:7px; overflow:hidden; flex-shrink:0;}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.top-links{display:flex; align-items:center; gap:18px;}
.top-links a{font-size:13px; color:var(--text-muted); text-decoration:none;}
.top-links a:hover, .top-links a.here{color:var(--text);}
.top-links a.pill{background:#fff; color:#09090b; font-weight:600; padding:7px 14px; border-radius:var(--ctl-radius);}
@media (max-width:560px){ .top-links a.hide-sm{display:none;} }
.wrap{max-width:1000px; margin:0 auto; padding:0 20px; position:relative; z-index:1;}
section{padding:72px 0; position:relative; z-index:1;}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin:0 0 12px;}
h1{font-size:clamp(36px,6vw,60px); font-weight:650; letter-spacing:-0.04em; line-height:1.04; margin:0 0 18px; text-wrap:balance;}
h2{font-size:clamp(26px,3.6vw,36px); font-weight:650; letter-spacing:-0.03em; line-height:1.15; margin:0 0 14px; text-wrap:balance;}
h3{font-size:17px; font-weight:600; margin:0 0 8px; letter-spacing:-0.02em;}
.lead{font-size:17px; color:var(--text-muted); max-width:600px; margin:0 0 28px;}
.hero{text-align:center; padding-top:88px;}
.hero .lead{margin-left:auto; margin-right:auto;}
.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:var(--ctl-radius); font-weight:600; font-size:15px; letter-spacing:-0.01em; text-decoration:none; transition:opacity 150ms ease;}
.btn:hover{opacity:0.88;}
.btn.primary{background:#fff; color:#09090b; box-shadow:0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);}
.btn.ghost{border:1px solid var(--border); color:var(--text);}
.grid{display:grid; gap:16px;}
.grid.three{grid-template-columns:repeat(3,1fr);}
.grid.two{grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){ .grid.three, .grid.two{grid-template-columns:1fr;} }
.card{background:var(--surface); border:1px solid rgba(255,255,255,0.07); box-shadow:0 1px 0 rgba(255,255,255,0.025) inset; border-radius:var(--radius); padding:24px;}
.card p{color:var(--text-muted); font-size:14.5px; margin:0;}
.step-num{font-size:34px; font-weight:650; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; color:var(--accent); line-height:1; margin-bottom:14px;}
.quote{font-size:15px; color:var(--text); background:var(--surface-2); border-radius:12px; padding:12px 14px; margin-top:14px;}
.ask-row{display:grid; grid-template-columns:200px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:15px;}
.ask-row:last-child{border-bottom:none;}
.ask-row b{font-weight:600;}
.ask-row span{color:var(--text-muted);}
@media (max-width:560px){ .ask-row{grid-template-columns:1fr; gap:4px;} }
.nav-demo{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.chip{font-size:13px; padding:5px 12px; border-radius:8px; background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);}
.chip.on{background:var(--accent-soft); color:#c9bffb; border-color:rgba(143,123,245,0.5);}
.compare{width:100%; border-collapse:collapse; font-size:14px; min-width:640px;}
.compare th{text-align:left; font-size:12px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; padding:12px; border-bottom:1px solid var(--border);}
.compare td{padding:12px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--text-muted);}
.compare td:first-child{color:var(--text);}
.compare .us{color:var(--ok); font-weight:600;}
.table-wrap{overflow-x:auto; border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); background:var(--surface);}
.note{font-size:12.5px; color:var(--text-faint); margin-top:10px;}
.cta{text-align:center;}
footer{border-top:1px solid rgba(255,255,255,0.08); padding:36px 0 48px; position:relative; z-index:1;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:24px;}
@media (max-width:640px){ .footer-grid{grid-template-columns:1fr; gap:28px;} }
.footer-brand p{color:var(--text-faint); font-size:12.5px; margin:10px 0 0;}
.footer-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); margin:0 0 12px; font-weight:600;}
.footer-col a{display:block; color:var(--text-muted); font-size:13.5px; text-decoration:none; margin-bottom:10px;}
.footer-col a:hover{color:var(--text);}
