:root { color-scheme: dark; --ink: #101225; --paper: #fffaf0; --gold: #f8c72a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 18px/1.75 "Trebuchet MS", sans-serif; }
header, main, footer { width: min(850px, calc(100% - 40px)); margin: auto; }
header { padding: 32px 0; border-bottom: 1px solid #55576a; }
a { color: var(--gold); text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.brand { font-size: 18px; font-weight: bold; letter-spacing: .14em; text-decoration: none; }
main { padding: 64px 0 80px; }
.eyebrow { font-size: 13px; letter-spacing: .14em; color: var(--gold); }
h1, h2 { font-family: Georgia, serif; font-weight: normal; line-height: 1.12; }
h1 { font-size: clamp(42px, 8vw, 72px); letter-spacing: -.04em; margin: 24px 0 30px; }
h2 { font-size: 32px; margin-top: 50px; }
.intro { font-size: 23px; color: #d8d4e4; }
li { padding: 6px 0; }
.cta { display: inline-block; background: var(--gold); color: var(--ink); padding: 15px 24px; text-decoration: none; font-weight: bold; margin: 24px 0; }
.callout { border-left: 3px solid var(--gold); padding: 12px 24px; background: #1d2040; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare section { padding: 24px; background: #1d2040; }
.compare h2 { margin-top: 0; font-size: 29px; }
figure { margin: 34px 0; display: flex; align-items: center; gap: 30px; }
figure img { width: min(42%, 250px); height: auto; border-radius: 16px; }
figcaption { font-size: 16px; color: #d8d4e4; }
footer { padding: 28px 0 40px; border-top: 1px solid #55576a; font-size: 15px; }
footer a { display: inline-block; margin-right: 18px; }
@media(max-width: 550px) { .compare { grid-template-columns: 1fr; } main { padding-top: 40px; } figure { gap: 20px; } .intro { font-size: 20px; } }