/* Standalone styling for public pages (terms, privacy, help, pricing). */
:root{
  --bg:#08080d; --card:#11111a; --border:rgba(255,255,255,.08); --strong:rgba(255,255,255,.14);
  --text:#e8e8ef; --muted:#8a8a9a; --dim:#5a5a6a; --accent:#00d9ff; --accent2:#b794f6;
  --grad:linear-gradient(135deg,#00d9ff,#b794f6);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 80% -100px,rgba(0,217,255,.06),transparent 60%);
  min-height:100vh;
}
.wrap{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.topnav{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.topnav img{border-radius:10px}
.topnav .brand{font-weight:800;letter-spacing:.12em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topnav a{margin-left:auto;color:var(--accent);text-decoration:none;font-size:13px}
h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.updated{color:var(--dim);font-size:13px;margin-bottom:32px}
h2{font-size:18px;font-weight:700;margin:28px 0 8px}
p,li{color:var(--muted);font-size:14.5px;margin-bottom:10px}
ul{margin:0 0 10px 22px}
a{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:12px}
.note{font-size:12.5px;color:var(--dim);border-top:1px solid var(--border);margin-top:36px;padding-top:18px}
.footer-links{margin-top:24px;font-size:13px;color:var(--dim)}
.footer-links a{margin-right:14px}
/* pricing — wide breakout so 5 tiers + the comparison chart get room to breathe */
.pricing-wide{width:min(1180px,94vw);margin-left:50%;transform:translateX(-50%)}
.tiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:28px 0}
.tier{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 18px;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.tier:hover{transform:translateY(-4px);border-color:var(--strong)}
.tier.feat{border-color:rgba(74,222,128,.5);box-shadow:0 0 0 1px rgba(74,222,128,.2),0 18px 50px -20px rgba(74,222,128,.35)}
.tier.feat:hover{box-shadow:0 0 0 1px rgba(74,222,128,.35),0 22px 60px -18px rgba(74,222,128,.5)}
.tier .nm{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.tier .pr{font-size:27px;font-weight:800;margin:8px 0 4px}
.tier .pr span{font-size:13px;color:var(--dim)}
.tier .pr .annual{display:block;font-size:11.5px;color:var(--dim);font-weight:600;margin-top:4px}
.tier .pr .annual b{color:#4ade80;font-weight:700}
.tier ul{list-style:none;margin:12px 0 0}
.tier li{margin-bottom:8px;font-size:13.5px}.tier li::before{content:"✓ ";color:#4ade80;font-weight:700}
.tier .tag{display:inline-block;background:linear-gradient(135deg,#4ade80,#22d3ee);color:#04261a;font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.cta{display:inline-block;margin-top:auto;padding-top:16px}
.cta a,a.cta{display:block;text-align:center;background:var(--grad);color:#fff;text-decoration:none;padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;transition:filter .2s,transform .2s}
.cta a:hover,a.cta:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* comparison matrix */
.compare{margin:56px 0 8px}
.cmp-h{font-size:25px;font-weight:800;letter-spacing:-.02em;text-align:center;margin-bottom:6px;color:var(--text)}
.cmp-h .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cmp-sub{text-align:center;color:var(--dim);font-size:13px;margin-bottom:24px}
.cmp-scroll{overflow-x:auto;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:780px;font-size:13.5px}
table.cmp th,table.cmp td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--border);vertical-align:middle}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp thead th{position:sticky;top:0;z-index:3;background:#0c0c14;padding:18px 14px 16px}
table.cmp th.lab,table.cmp td.lab{text-align:left;color:var(--muted);font-weight:600;position:sticky;left:0;z-index:2;background:#0a0a11;min-width:184px;white-space:nowrap}
table.cmp thead th.lab{z-index:4;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.cmp .pname{font-size:15px;font-weight:800;letter-spacing:.01em}
.cmp .pprice{font-size:11.5px;color:var(--dim);font-weight:600;margin-top:3px}
.cmp .pprice b{color:var(--text);font-size:15px}
.cmp .feat-col{background:linear-gradient(180deg,rgba(74,222,128,.10),rgba(74,222,128,.03))}
.cmp thead th.feat-col{background:linear-gradient(180deg,rgba(74,222,128,.20),#0c0c14)}
.cmp .feat-col .pname{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cmp .badge-pop{display:inline-block;margin-top:7px;background:linear-gradient(135deg,#4ade80,#22d3ee);color:#04261a;font-size:9px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.05em}
.cmp .yes{color:#4ade80;font-weight:800;font-size:16px;line-height:1}
.cmp .no{color:var(--dim);font-size:15px;line-height:1}
.cmp .val{color:var(--text);font-weight:700}
.cmp .mut{color:var(--muted);font-weight:500;font-size:12.5px}
.cmp .pct{display:inline-block;font-size:10px;font-weight:800;color:#4ade80;background:rgba(74,222,128,.12);border-radius:6px;padding:1px 6px;margin-left:5px;vertical-align:middle}
table.cmp tbody tr:hover td{background:rgba(255,255,255,.035)}
table.cmp tbody tr:hover td.feat-col{background:linear-gradient(180deg,rgba(74,222,128,.16),rgba(74,222,128,.06))}
table.cmp tbody tr:hover td.lab{background:#101019}
/* entrance animation (armed only when JS adds .reveal, so content shows even if JS is off) */
.compare.reveal thead th{opacity:0;transform:translateY(-10px)}
.compare.reveal tbody tr{opacity:0;transform:translateY(14px)}
.compare.reveal.in thead th{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease .05s}
.compare.reveal.in tbody tr{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*42ms)}
.compare.reveal .yes,.compare.reveal .no{transform:scale(.35);opacity:0}
.compare.reveal.in .yes,.compare.reveal.in .no{transform:scale(1);opacity:1;transition:transform .45s cubic-bezier(.2,1.6,.45,1),opacity .3s ease;transition-delay:calc(.16s + var(--i,0)*42ms)}
.compare.reveal.in .feat-col{box-shadow:inset 1px 0 0 rgba(74,222,128,.28),inset -1px 0 0 rgba(74,222,128,.28)}
@media(max-width:900px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiers{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .compare.reveal thead th,.compare.reveal tbody tr,.compare.reveal .yes,.compare.reveal .no{opacity:1;transform:none;transition:none}
  .tier,.cta a{transition:none}
}
.cmp .cta-row td{padding-top:18px;padding-bottom:18px}
.cmp .cta-mini{display:inline-block;padding:8px 15px;border-radius:10px;font-weight:700;font-size:12.5px;text-decoration:none;border:1px solid var(--strong);color:var(--text);transition:border-color .2s,color .2s,filter .2s,transform .2s}
.cmp .cta-mini:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.cmp .cta-mini.go{background:var(--grad);color:#fff;border-color:transparent}
.cmp .cta-mini.go:hover{filter:brightness(1.1);color:#fff}