:root { --ink:#11271f; --cream:#f6f1e8; --lime:#d6ff6c; --line:#c8d0c9; --muted:#66746c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
main { width:min(1120px, calc(100% - 40px)); margin:auto; padding:56px 0 72px; }
.hero { min-height:430px; padding:32px 0 60px; display:grid; align-content:end; border-bottom:1px solid var(--ink); background:radial-gradient(circle at 80% 18%, #e8ffbd, transparent 24rem); }
.eyebrow { margin:0 0 15px; color:#516156; font-size:.73rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:850px; margin:0; font:clamp(3rem,8vw,7rem)/.9 Georgia,serif; letter-spacing:-.06em; }
h1 em { color:#f05b38; font-weight:400; }
.lede { max-width:625px; margin:26px 0 0; font-size:1.08rem; color:#3d5147; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.chips span { padding:7px 10px; border:1px solid var(--ink); border-radius:999px; font-size:.8rem; }
.panel { margin-top:20px; padding:26px; border:1px solid var(--line); border-radius:18px; background:#fffdfa; }
.panel-title { display:flex; gap:12px; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:16px; }
.panel-title span { color:#f05b38; font-weight:800; }
.panel-title h2 { margin:0; font-size:1.2rem; letter-spacing:-.03em; }
.panel-title small { margin-left:auto; color:var(--muted); }
.mapping-grid { display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:16px; border-top:1px solid var(--line); }
.mapping-grid > div { padding:12px 8px; border-bottom:1px solid var(--line); }
.mapping-grid .head { color:var(--muted); font-size:.75rem; font-weight:750; text-transform:uppercase; }
.check { color:#237351; }
.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin-top:24px; }
.flow article { min-height:105px; padding:15px; border-radius:12px; background:#edf5ef; }
.flow b { font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; }
.flow p { margin:9px 0 0; }
.flow i { color:#f05b38; font-size:1.5rem; font-style:normal; }
.tests { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
button { cursor:pointer; padding:8px 11px; color:var(--ink); border:1px solid var(--ink); border-radius:999px; background:transparent; font:inherit; font-size:.85rem; }
button.active { background:var(--lime); }
output { width:100%; margin-top:5px; color:#3d5147; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.split ul { margin:22px 0 0; padding-left:20px; }
.split li { margin:9px 0; }
.dark { color:white; border-color:var(--ink); background:var(--ink); }
.dark h2 { margin:7px 0 10px; font-size:2rem; letter-spacing:-.05em; }
.dark p { color:#d8e2da; }
.honesty { padding-top:14px; border-top:1px solid #41564a; font-size:.85rem; }
@media (max-width:760px) { main{width:min(100% - 26px,1120px);padding-top:24px}.hero{min-height:390px}.mapping-grid,.flow,.split{grid-template-columns:1fr}.mapping-grid .head{display:none}.flow i{transform:rotate(90deg);margin:auto}.panel{padding:20px}.panel-title small{display:none} }