:root { font-family: Inter, system-ui, sans-serif; color: #0f172a; background: #f8fafc; line-height: 1.6; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
header, main, footer { max-width: 1100px; margin: auto; padding: 24px; }
header, nav, footer { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
header { justify-content: space-between; border-bottom: 1px solid #cbd5e1; }
a { color: #1d4ed8; text-underline-offset: 4px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.brand { font-weight: 800; color: #0f172a; text-decoration: none; }
main { padding-top: 48px; padding-bottom: 64px; }
h1 { font-size: 36px; line-height: 1.15; max-width: 900px; }
h2 { font-size: 24px; line-height: 1.3; }
h3 { font-size: 18px; }
p, li { max-width: 75ch; }
section { padding: 24px 0; border-bottom: 1px solid #cbd5e1; }
.eyebrow { color: #475569; font-size: 14px; }
.comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.cta { display: inline-block; background: #1d4ed8; color: white; padding: 12px 20px; font-weight: 700; text-decoration: none; }
footer { border-top: 1px solid #cbd5e1; font-size: 14px; }
@media (max-width: 600px) { .comparison { grid-template-columns: 1fr; gap: 12px; } h1 { font-size: 30px; } header, main, footer { padding-left: 20px; padding-right: 20px; } }