:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f4f1eb; color: #1d2924; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 30px; }
.hero { margin: 0 0 28px; }
.eyebrow, .step { margin: 0 0 8px; color: #5e6c65; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 8vw, 5rem); line-height: .98; letter-spacing: -.045em; }
h2 { margin: 0 0 18px; font-size: 1.45rem; }
.lede { max-width: 760px; color: #4c5a54; font-size: 1.08rem; line-height: 1.65; }
.boundary, .helper { padding: 13px 15px; border-left: 4px solid #a6682a; background: #fff9ef; color: #5e4933; line-height: 1.5; }
.form-stack { display: grid; gap: 20px; }
.card { background: #fff; border: 1px solid #d9ded9; border-radius: 18px; padding: 24px; box-shadow: 0 8px 26px rgba(36, 49, 42, .055); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
label { display: grid; align-content: start; gap: 7px; font-size: .92rem; font-weight: 750; line-height: 1.35; }
select, input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #bfc8c2; border-radius: 10px; background: #fff; color: inherit; font: inherit; }
select:focus, input:focus, button:focus, a:focus { outline: 3px solid rgba(47, 105, 76, .25); outline-offset: 2px; }
.dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button, .cta { font: inherit; }
.primary, .cta { display: inline-flex; margin-top: 22px; border: 0; border-radius: 11px; padding: 13px 18px; background: #244e3a; color: #fff; font-weight: 800; text-decoration: none; cursor: pointer; }
.primary:hover, .cta:hover { background: #183829; }
.secondary { display: block; margin: 18px auto 0; border: 1px solid #98a49d; border-radius: 10px; padding: 10px 15px; background: transparent; color: #30423a; font-weight: 750; cursor: pointer; }
.result { margin-top: 22px; border-top: 5px solid #5e6c65; }
.result--diy_path_available { border-top-color: #2f764f; }
.result--more_information_required { border-top-color: #bd7c25; }
.result--professional_recommended { border-top-color: #9a4b39; }
.result--out_of_scope { border-top-color: #697079; }
.result-status { display: inline-flex; margin: 0 0 10px; padding: 6px 9px; border-radius: 999px; background: #eef2ef; font-size: .76rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.result p { color: #4c5a54; line-height: 1.6; }
.result-note { padding: 12px 14px; border-radius: 10px; background: #f3f5f3; font-size: .91rem; }
.missing-list { line-height: 1.7; }
.cta-note { margin: 8px 0 0; font-size: .8rem; }
footer { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 44px; color: #69746e; font-size: .82rem; line-height: 1.55; }
[hidden] { display: none !important; }
@media (max-width: 690px) { .shell { padding-top: 34px; } .card { padding: 19px; border-radius: 14px; } .field-grid { grid-template-columns: 1fr; } }