:root { --navy: #004f71; --sky: #6ad1e3; --gold: #ffb81c; --bg: #ffffff; --ink: #1f2a33; --muted: #52616b; }
@media (prefers-color-scheme: dark) { :root { --navy: #6ad1e3; --bg: #0c1a22; --ink: #e8eef2; --muted: #a7b6bf; } }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: "Century Gothic", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 52rem; margin: 0 auto; padding: 2rem 1rem; border-top: 6px solid var(--gold); }
.mark { margin: 0 0 2rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); font-size: .95rem; }
.cols { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
section { border-left: 4px solid var(--sky); padding-left: 1rem; }
h1 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; color: var(--navy); }
section p { margin: 0; color: var(--muted); font-size: 1.05rem; }
@media (min-width: 40rem) { .cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }