:root { color-scheme: light; --paper:#f4f6f4; --ink:#18302b; --muted:#5f7068; --line:#d3ddd5; --accent:#b9d4a4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
.page { max-width:1400px; min-height:100vh; margin:auto; padding:0 5vw; }
.masthead { min-height:98px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); font-weight:700; letter-spacing:-.02em; }
.mark { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--ink); color:var(--accent); font-size:30px; line-height:1; font-weight:400; }
.version { margin-left:auto; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.hero { min-height:620px; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:6vw; border-bottom:1px solid var(--line); }
.hero-copy { padding:84px 0; }
.eyebrow,.label { display:flex; align-items:center; gap:11px; margin:0; color:#4b685b; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.dot { width:9px; height:9px; border-radius:50%; background:#5e9c71; box-shadow:0 0 0 5px #dcebdd; }
h1 { margin:30px 0 26px; font-size:clamp(62px,7.7vw,112px); line-height:1.02; letter-spacing:-.08em; }
h1 em { font-style:normal; color:#5f806d; }
.lead { max-width:610px; margin:0; color:var(--muted); font-size:clamp(18px,1.9vw,23px); line-height:1.55; }
.diagram { margin:72px 0; padding:28px; background:#e5ebe3; border:1px solid #d2ded0; border-radius:12px; }
.diagram-heading { padding:0 0 18px; font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.step { min-height:90px; display:grid; grid-template-columns:44px 1fr 20px; align-items:center; gap:16px; border-top:1px solid #cbd7cc; font-size:20px; font-weight:700; letter-spacing:-.04em; }
.step-num { color:#6d8a74; font-size:12px; letter-spacing:0; }
.step span:last-child { color:#6d8a74; font-size:24px; font-weight:400; }
.note { display:grid; grid-template-columns:1fr 2fr; gap:40px; padding:80px 0 100px; border-bottom:1px solid var(--line); }
.label { padding-top:11px; }
h2 { max-width:820px; margin:0 0 21px; font-size:clamp(32px,4vw,54px); line-height:1.17; letter-spacing:-.06em; }
.note p { max-width:700px; margin:0; color:var(--muted); font-size:17px; line-height:1.7; }
footer { min-height:95px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }
@media (max-width:800px) { .page { padding:0 24px; } .masthead { min-height:80px; } .hero { grid-template-columns:1fr; gap:0; } .hero-copy { padding:70px 0 30px; } .diagram { margin:20px 0 60px; } .note { grid-template-columns:1fr; gap:24px; padding:65px 0 75px; } }
@media (max-width:460px) { .page { padding:0 18px; } .masthead { font-size:14px; } .version { font-size:10px; } h1 { font-size:clamp(52px,13vw,70px); } .lead { font-size:17px; } .diagram { padding:21px; } .step { min-height:77px; font-size:18px; } footer { font-size:10px; } }