:root { color-scheme: light; --ink:#17211b; --muted:#5f6b63; --line:#d8dfd9; --paper:#f7f9f5; --panel:#fff; --accent:#176b52; --accent-dark:#0e4d3a; --warm:#d99043; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.topbar, main, .footer { max-width:1120px; margin:0 auto; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); }
.brand { font-weight:750; text-decoration:none; }
nav { display:flex; gap:22px; color:var(--muted); font-size:.92rem; }
nav a, .footer a { text-decoration:none; }
nav a:hover, .footer a:hover { color:var(--accent); }
.hero { padding:108px 28px 92px; max-width:850px; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.15; margin:0; }
h1 { max-width:760px; font-size:clamp(2.7rem,7vw,5.8rem); letter-spacing:-.04em; }
h2 { font-size:clamp(1.9rem,3vw,3rem); letter-spacing:-.025em; }
h3 { font-size:1.12rem; }
.lede { max-width:680px; margin:26px 0 0; color:var(--muted); font-size:1.18rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; min-height:46px; padding:0 18px; border:1px solid var(--accent); font-weight:700; text-decoration:none; }
.button.primary { background:var(--accent); color:#fff; }
.button.primary:hover { background:var(--accent-dark); }
.button.secondary { color:var(--accent-dark); }
.button.secondary:hover { background:#e5eee8; }
.note { color:var(--muted); font-size:.9rem; }
.section { padding:72px 28px; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.step { min-height:220px; padding:24px; background:var(--panel); }
.step span { display:block; margin-bottom:42px; color:var(--warm); font-weight:800; }
.step p,.split p,.compact p { color:var(--muted); }
.split { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:64px; align-items:start; }
.fact-panel { display:grid; gap:18px; padding:24px; border-left:3px solid var(--warm); background:var(--panel); }
.fact-panel code { color:var(--accent-dark); white-space:pre-line; }
.fact-panel a { color:var(--accent-dark); font-weight:700; }
.compact { max-width:760px; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:28px; color:var(--muted); font-size:.9rem; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
.prose { max-width:760px; color:var(--muted); }
.permission-list { max-width:760px; display:grid; grid-template-columns:minmax(140px,.35fr) minmax(0,1fr); margin:28px 0 0; border-top:1px solid var(--line); }
.permission-list dt,.permission-list dd { margin:0; padding:15px 0; border-bottom:1px solid var(--line); }
.permission-list dt { color:var(--accent-dark); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:700; }
.permission-list dd { color:var(--muted); }
@media (max-width:700px) { .topbar{padding:0 18px} nav{gap:12px} nav a:nth-child(2){display:none} .hero{padding:76px 18px 64px} h1{font-size:clamp(2.7rem,14vw,4.4rem)} .section{padding:52px 18px} .section-heading,.split{display:block} .section-heading h2{margin-top:18px} .steps{display:block} .step+.step{border-top:1px solid var(--line)} .step{min-height:0} .step span{margin-bottom:24px} .fact-panel{margin-top:32px} .footer{padding:24px 18px} }