:root { --ink:#17231f; --muted:#607069; --line:#dce4dd; --forest:#184e40; --mint:#dff4e8; --paper:#fbfcf9; --sand:#f4f0e7; --amber:#a66c19; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,sans-serif; line-height:1.55; }
.shell { max-width:1160px; margin:auto; padding:0 28px 72px; }
.topbar { height:82px; display:flex; justify-content:space-between; align-items:center; }
.brand { color:var(--ink); font-size:18px; font-weight:800; text-decoration:none; letter-spacing:-.6px; display:flex; gap:9px; align-items:center; }
.brand-mark { color:white; background:var(--forest); height:26px; width:26px; display:grid; place-items:center; border-radius:8px; font-size:16px; }
.privacy-chip { background:#edf4ee; color:var(--forest); border-radius:999px; padding:6px 12px; font:500 11px 'DM Mono',monospace; }
.hero { display:grid; grid-template-columns:1.35fr .85fr; gap:60px; padding:72px 0 58px; align-items:center; }
.eyebrow,.panel-label { color:var(--forest); font:500 11px 'DM Mono',monospace; letter-spacing:1.05px; margin:0 0 12px; }
h1 { font-size:clamp(40px,5.6vw,67px); line-height:1.06; letter-spacing:-3px; margin:0 0 21px; font-weight:800; }
h1 em { font-family:Georgia,serif; font-weight:600; color:var(--forest); }
.lede { max-width:680px; font-size:17px; color:var(--muted); margin:0; }
.rule-card { background:var(--forest); border-radius:16px; color:#eff9f2; padding:25px; display:flex; align-items:flex-start; gap:16px; box-shadow:0 20px 45px #184e401c; }
.rule-card strong { font-size:16px; }.rule-card p { color:#c5dccd; font-size:13px; margin:5px 0 0; }
.rule-icon { border:1px solid #669585; border-radius:8px; padding:9px 7px; color:#d8f0df; font:500 12px 'DM Mono',monospace; }
.stepper { display:flex; align-items:center; margin:0 0 23px; max-width:665px; color:#829088; font-size:12px; font-weight:700; }.stepper i { height:1px; background:var(--line); flex:1; margin:0 12px; }.step { display:flex; align-items:center; gap:7px; white-space:nowrap; }.step b { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#e8eee9; font-size:11px; }.step.active { color:var(--forest); }.step.active b { background:var(--forest); color:white; }
.workspace { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.panel,.plan { border:1px solid var(--line); border-radius:16px; background:white; padding:31px; }.checklist-panel { background:#f3f7f2; } h2 { font-size:25px; letter-spacing:-1.2px; margin:0 0 6px; }.muted { font-size:13px; color:var(--muted); margin:0 0 25px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:18px; } label { display:block; font-size:12px; font-weight:700; } label span { color:var(--muted); font-weight:400; } input[type=number] { display:block; width:100%; margin-top:7px; font:500 14px Manrope,sans-serif; padding:11px 12px; border:1px solid #cdd9d0; border-radius:7px; outline:none; background:white; } input[type=number]:focus { border-color:var(--forest); box-shadow:0 0 0 3px #dff4e8; }
button { cursor:pointer; font:700 13px Manrope,sans-serif; border-radius:7px; transition:.16s ease; }.primary { width:100%; border:0; color:white; background:var(--forest); padding:13px 16px; display:flex; justify-content:space-between; }.primary:hover { background:#0d3f32; }.fineprint { margin:15px 0 0; color:#78857e; font-size:10px; }.result { font-size:12px; margin-top:16px; padding:11px 13px; border-radius:7px; }.result strong { display:block; margin-bottom:2px; }.result.success { background:var(--mint); color:#0e4936; }.result.neutral { background:#edf1ee; }.result.warning { background:#fff2db; color:#714a12; }
.checks { border-top:1px solid #dce6de; }.checks label { display:flex; gap:10px; align-items:flex-start; padding:14px 1px; border-bottom:1px solid #dce6de; cursor:pointer; }.checks input { position:absolute; opacity:0; }.checks .box { flex:0 0 17px; height:17px; border:1.5px solid #9daea2; border-radius:4px; margin-top:2px; }.checks input:checked + .box { background:var(--forest); border-color:var(--forest); }.checks input:checked + .box:after { content:'✓'; display:block; color:white; font-size:12px; text-align:center; line-height:15px; }.checks strong,.checks small { display:block; }.checks strong { font-size:12px; }.checks small { color:var(--muted); font-size:10px; font-weight:400; margin-top:1px; }.progress-row { margin:18px 0; }.progress-row > span { font:500 10px 'DM Mono',monospace; color:var(--muted); }.progress { background:#dce6de; height:5px; border-radius:10px; margin-top:7px; overflow:hidden; }.progress i { display:block; background:var(--forest); height:100%; width:0; transition:width .2s; }.secondary { width:100%; background:white; border:1px solid #b9c9bd; color:var(--forest); padding:11px; }.secondary:hover { border-color:var(--forest); }
.plan { margin-top:18px; background:#fffdf8; }.hidden { display:none; }.plan-heading { display:flex; justify-content:space-between; align-items:flex-start; }.download { border:1px solid #c8d4ca; color:var(--forest); background:white; padding:8px 11px; font-size:11px; }.plan-intro { margin:19px 0 13px; color:var(--muted); font-size:14px; }.plan ol { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:0; margin:0; list-style:none; counter-reset:item; }.plan li { counter-increment:item; background:#f2f6f1; padding:14px 14px 14px 43px; position:relative; border-radius:8px; font-size:12px; }.plan li:before { content:counter(item, decimal-leading-zero); position:absolute; left:14px; color:var(--forest); font:500 11px 'DM Mono',monospace; }.plan li b,.plan li span { display:block; }.plan li span { color:var(--muted); margin-top:3px; }.plan .all-clear { background:var(--mint); }.plan-note { color:var(--muted); font-size:11px; margin:18px 0 0; }
.how { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; padding:62px 6px 0; }.how span { color:#88a796; font:500 12px 'DM Mono',monospace; }.how h3 { margin:6px 0; font-size:15px; }.how p { color:var(--muted); font-size:12px; margin:0; } footer { border-top:1px solid var(--line); display:flex; max-width:1104px; margin:auto; justify-content:space-between; color:#758279; padding:20px 0 27px; font-size:10px; }
@media (max-width:720px) { .shell{padding:0 18px 45px}.topbar{height:65px}.privacy-chip{font-size:9px}.hero{grid-template-columns:1fr;gap:25px;padding:42px 0}.workspace{grid-template-columns:1fr}.stepper{font-size:10px}.stepper i{margin:0 5px}.panel,.plan{padding:23px}.fields,.plan ol,.how{grid-template-columns:1fr}.how{gap:25px;padding-top:42px}.plan-heading{gap:15px}.download{white-space:nowrap}footer{margin:0 18px}.lede{font-size:15px} }