:root{
  --ink:#0f172a; --ink-2:#1e293b; --accent:#ea580c; --accent-dark:#c2410c;
  --muted:#64748b; --line:#e2e8f0; --soft:#f8fafc; --ok:#16a34a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:17px;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px; margin:0 auto; padding:0 20px}

.bar{border-bottom:1px solid var(--line); background:#fff}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:20px}
.brand span{color:var(--accent)}
.bar nav a{color:var(--ink); font-weight:600; font-size:14px; margin-left:18px}

.hero{background:var(--ink); color:#fff; padding:54px 0 48px}
.eyebrow{text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; font-weight:700; color:#fb923c; margin:0 0 10px}
h1{font-size:38px; line-height:1.15; letter-spacing:-.02em; margin:0 0 14px}
.hero p{font-size:18px; color:#cbd5e1; margin:0; max-width:680px}

main{padding:40px 0 10px}
h2{font-size:25px; letter-spacing:-.01em; margin:38px 0 12px}
h3{font-size:18px; margin:24px 0 6px}
p{margin:0 0 14px}
ul{margin:0 0 16px; padding-left:22px}
li{margin:6px 0}
.lead{font-size:19px; color:var(--ink-2)}

.cmp{width:100%; border-collapse:collapse; margin:18px 0 26px; font-size:15.5px}
.cmp th,.cmp td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.cmp thead th{background:var(--soft); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.cmp td.feat{font-weight:600}
.yes{color:var(--ok); font-weight:700}
.no{color:var(--muted)}
.cmp tbody td:nth-child(2){background:#fff7ed}

.note{background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:16px 18px; margin:20px 0}
.note strong{color:var(--ink)}

.cta{background:var(--ink); color:#fff; border-radius:14px; padding:32px; margin:40px 0; text-align:center}
.cta h2{margin:0 0 8px; color:#fff}
.cta p{color:#cbd5e1; margin:0 0 18px}
.btn{display:inline-block; background:var(--accent); color:#fff; font-weight:700; padding:13px 22px; border-radius:10px; font-size:16px}
.btn:hover{background:var(--accent-dark); text-decoration:none}
.btn-ghost{display:inline-block; color:#fff; border:1px solid #475569; padding:13px 22px; border-radius:10px; font-weight:600; margin-left:8px}

footer{border-top:1px solid var(--line); margin-top:40px; padding:26px 0; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center}
footer a{color:var(--muted)}
footer .links a{margin-right:16px}

@media(max-width:600px){
  h1{font-size:30px} .hero{padding:40px 0 34px} .wrap{padding:0 16px}
  body{font-size:16px} .cta{padding:24px} .btn-ghost{margin-left:0; margin-top:8px; display:block}
}