@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --ink:#153a35; --deep:#0e2c28; --paper:#f7f3ec; --card:#fffdf9; --line:#dcd7cd; --muted:#6b7770; --gold:#e4a83a; --mint:#dcebe2; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; }
.auth-gate { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(14,44,40,.72); }.auth-gate.hidden{display:none}.auth-card{width:min(420px,100%);background:var(--card);padding:34px;border:1px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.28)}.auth-card h2{font:700 32px/1.05 "Playfair Display",Georgia,serif;margin:0 0 10px}.auth-card>p:not(.eyebrow):not(.copy-status){color:var(--muted);font-size:14px}.auth-card input{margin:10px 0 0}.auth-card .button{margin-top:10px}.auth-card .secondary{width:100%}
.shell { max-width:1120px; margin:0 auto; padding:72px 28px 48px; }
.hero { min-height:250px; background:var(--deep); color:#f9f5ed; padding:42px 48px; display:flex; justify-content:space-between; align-items:flex-start; position:relative; overflow:hidden; }
.hero:after { content:""; position:absolute; width:320px; height:320px; border:1px solid rgba(255,255,255,.18); border-radius:50%; right:-100px; bottom:-196px; box-shadow:0 0 0 40px rgba(255,255,255,.045),0 0 0 80px rgba(255,255,255,.035); }
.eyebrow,.section-kicker { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.09em; margin:0 0 11px; color:var(--gold); text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { font:700 57px/0.93 "Playfair Display",Georgia,serif; letter-spacing:-.04em; margin-bottom:18px; } h1 em { color:#a9d1b9; font-weight:600; }
.intro { max-width:490px; line-height:1.55; color:#d5e0da; font-size:16px; margin:0; }.hero-badge { z-index:1; margin-top:3px; border:1px solid rgba(255,255,255,.27); padding:9px 12px; font:11px "DM Mono",monospace; color:#e8eee9; }.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#8ed0a5; margin-right:6px; }
.workspace { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-top:20px; align-items:start; }.card { background:var(--card); border:1px solid var(--line); padding:34px; box-shadow:0 8px 22px rgba(31,45,39,.04); }.card h2 { font-size:24px; letter-spacing:-.04em; margin-bottom:28px; }.section-kicker { color:#819087; margin-bottom:7px; }.card-heading .section-kicker { color:var(--gold); }
label { display:block; font-size:13px; font-weight:600; margin-bottom:19px; color:#3b504a; } input,select { display:block; width:100%; appearance:none; border:1px solid #cbd0ca; border-radius:0; background:#fff; color:var(--ink); padding:12px 11px; margin-top:7px; font:15px "DM Sans",sans-serif; outline:none; } input:focus,select:focus { border-color:#438070; box-shadow:0 0 0 3px #dcebe2; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.input-suffix { position:relative; }.input-suffix input { padding-right:31px; }.input-suffix span { position:absolute; right:11px; bottom:12px; color:var(--muted); font-size:13px; }.measurements { border-top:1px solid var(--line); padding-top:19px; margin-top:4px; }.measurements h3 { font-size:14px; margin:0 0 15px; }.unit-note { color:var(--muted); font-size:12px; font-weight:400; }.button { border:0; cursor:pointer; font:600 13px "DM Sans",sans-serif; transition:transform .15s,background .15s; }.button:hover { transform:translateY(-1px); }.primary { width:100%; background:var(--ink); color:#fff; padding:14px; margin-top:8px; }.text-button { background:transparent; color:#617069; padding:15px 0 0; width:100%; }.estimate { background:#eaf2ed; border-color:#cadcd1; }.estimate-topline { display:flex; justify-content:space-between; gap:12px; align-items:start; }.estimate h2 { margin:0; font:700 29px/1 "Playfair Display",Georgia,serif; }.pill { background:#fffdf9; color:#3f6655; padding:7px 9px; font:11px "DM Mono",monospace; white-space:nowrap; }.total-block { margin:32px 0 23px; padding:22px 0; border-top:1px solid #bdd2c5; border-bottom:1px solid #bdd2c5; }.total-block span,.total-block small { display:block; color:#5f7369; font-size:12px; }.total-block strong { display:block; font:700 44px/1.05 "Playfair Display",Georgia,serif; letter-spacing:-.04em; margin:7px 0; }.results { margin-bottom:26px; }.result { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(91,126,106,.2); gap:15px; }.result span { color:#526a5e; font-size:13px; }.result b { text-align:right; font-size:13px; }.estimate-actions { display:grid; grid-template-columns:1fr 1fr auto; gap:9px; }.secondary { background:var(--ink); color:#fff; padding:13px; }.secondary.light { background:#4d7563; }.icon-button { background:transparent; border:1px solid #a9c3b3; color:#315545; padding:0 13px; }.copy-status { min-height:17px; margin:9px 0 0; color:#42715b; text-align:center; font-size:12px; }.how-it-works { padding:39px 2px 0; }.tips { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }.tips p { color:#65736c; line-height:1.5; font-size:13px; }.tips b { display:block; color:var(--ink); font-size:14px; } footer { max-width:1120px; margin:0 auto; padding:0 28px 32px; color:#849089; font:11px "DM Mono",monospace; } footer span { color:var(--gold); margin:0 7px; }
@media (max-width:720px) { .shell { padding:20px 14px 30px; }.hero { padding:32px 26px; min-height:0; }.hero-badge { display:none; } h1 { font-size:46px; }.workspace { grid-template-columns:1fr; }.card { padding:26px; }.tips { grid-template-columns:1fr; gap:4px; }.field-grid { grid-template-columns:1fr; gap:0; }.estimate-actions { grid-template-columns:1fr 1fr; }.estimate-actions .icon-button { grid-column:span 2; padding:12px; } }
@media print { body { background:#fff; }.shell { padding:0; }.hero { min-height:0; }.controls,.how-it-works,footer,.estimate-actions,.copy-status { display:none; }.workspace { display:block; margin:0; }.estimate { border:0; box-shadow:none; }.hero-badge { display:none; } }