/* Shared styles for /compare/ and /vs/* — same look as the legal pages, plus tables and CTAs. */
:root {
  --bg:#08090C; --surface:#0F1116; --text:#F4F4F5; --dim:#A1A1AA; --faint:#71717A;
  --acc-1:#0FB5BA; --acc-2:#22D3EE;
  --border:rgba(255,255,255,.08);
  --yes:#34D399; --no:#F87171;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.top { border-bottom:1px solid var(--border); }
.top .wrap { display:flex; align-items:center; gap:16px; padding:18px 24px; }
.logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); }
.logo .mark { width:26px; height:26px; }
.logo .word { font-weight:700; font-size:17px; letter-spacing:-.03em; }
.logo .word .fin { display:inline-block; transform:skewX(-11deg); color:var(--acc-2); }
.top .back { margin-left:auto; font-size:13px; color:var(--dim); text-decoration:none; }
.top .back:hover { color:var(--acc-2); }
.wrap { max-width:860px; margin:0 auto; padding:0 24px; }
main { padding:52px 24px 40px; }
.eyebrow { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--acc-2); }
h1 { font-size:clamp(28px,4.4vw,40px); line-height:1.15; letter-spacing:-.03em; margin:12px 0 14px; }
.lede { font-size:18px; color:var(--dim); margin:0 0 10px; }
.meta { color:var(--faint); font-size:13px; margin-bottom:32px; }
h2 { font-size:23px; letter-spacing:-.02em; margin:48px 0 12px; }
h3 { font-size:17px; margin:26px 0 6px; }
p, li { color:var(--dim); }
strong { color:var(--text); font-weight:600; }
ul { padding-left:22px; }
li { margin:7px 0; }
a { color:var(--acc-2); text-decoration:none; }
a:hover { text-decoration:underline; }

.tldr {
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--acc-2);
  border-radius:12px; padding:18px 22px; margin:8px 0 8px;
}
.tldr p { margin:0; color:var(--text); }

/* Wide tables scroll inside their own box so the page never scrolls sideways on phones */
.table-scroll { overflow-x:auto; margin:18px 0 8px; border:1px solid var(--border); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
thead th { background:var(--surface); color:var(--text); font-weight:600; white-space:nowrap; }
tbody th { color:var(--text); font-weight:500; width:28%; }
td { color:var(--dim); }
tr:last-child th, tr:last-child td { border-bottom:0; }
td.us { color:var(--text); background:rgba(34,211,238,.05); }
.y { color:var(--yes); font-weight:600; }
.n { color:var(--no); font-weight:600; }
.note { font-size:13px; color:var(--faint); }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:18px 0; }
.card {
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; color:var(--text); text-decoration:none;
}
.card:hover { border-color:var(--acc-2); text-decoration:none; }
.card b { display:block; font-size:16px; margin-bottom:4px; }
.card span { color:var(--dim); font-size:14px; }

.cta {
  margin:52px 0 10px; padding:28px; border-radius:16px; text-align:center;
  background:linear-gradient(135deg,rgba(15,181,186,.14),rgba(34,211,238,.06));
  border:1px solid rgba(34,211,238,.25);
}
.cta h2 { margin:0 0 8px; }
.cta p { margin:0 0 18px; }
.btn {
  display:inline-block; padding:12px 22px; border-radius:999px; font-weight:600;
  background:linear-gradient(135deg,var(--acc-1),var(--acc-2)); color:#04181A;
}
.btn:hover { text-decoration:none; filter:brightness(1.08); }

.footer { border-top:1px solid var(--border); padding:26px 0 40px; margin-top:30px; }
.footer .wrap { display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13px; color:var(--faint); }
.footer a { color:var(--dim); }