:root{
  --p-t:#C9A35A; --p-r:#E3CFA0; --p-s:#8FB59A; --p-e:#A9B4C2; --p-l:#7FA3C9;
  --bg:#F3F4F1; --card:#FFFFFF; --ink:#1B1D1C; --muted:#5B615E; --line:#D8DBD5;
  --brass:#8A6A28; --brass-soft:#EFE6D0; --band:#1F2422; --band-ink:#EEEFEB; --band-muted:#A9AFAB;
  --wa:#1F8A4C; --err:#B3261E; --display:"Marcellus",Georgia,serif; --body:"Manrope",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121413; --card:#1A1D1C; --ink:#ECEDEA; --muted:#A2A8A4; --line:#2C312F; --brass:#D4B066; --brass-soft:#2E2819; --band:#0B0D0C; --wa:#3BB273; --err:#F2B8B5; --p-t:#B08A3E; --p-r:#8C7A52; --p-s:#5F8A6B; --p-e:#6E7A88; --p-l:#4E7299;}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--body)}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
header.site{background:var(--band);color:var(--band-ink);position:sticky;top:0;z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;max-width:1200px}
.brand{font-family:var(--display);letter-spacing:.22em;font-size:18px;color:#E3C27A;text-decoration:none;white-space:nowrap}
.hlinks{display:flex;gap:8px}
.back{font-size:13px;font-weight:700;text-decoration:none;border:1px solid #3a403d;border-radius:30px;padding:8px 12px;color:var(--band-ink);white-space:nowrap}
.head{padding:30px 0 6px}
.eyebrow{font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,44px);margin:10px 0 8px;line-height:1.1}
h2{font-family:var(--display);font-weight:400;font-size:clamp(23px,3.6vw,30px);margin:0 0 6px;line-height:1.2}
h3{font-size:17px;margin:0 0 4px}
.lede{color:var(--muted);margin:0;max-width:640px}
.progress{display:flex;gap:6px;margin:20px 0 16px}
.progress span{flex:1;height:5px;border-radius:5px;background:var(--line);transition:background .25s}
.progress span.on{background:var(--brass)}
.step-n{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:16px 0 8px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;font:inherit;color:inherit;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;min-height:66px;transition:border-color .15s}
.opt:hover{border-color:var(--brass)}
.opt[aria-pressed="true"]{border-color:var(--brass);background:var(--brass-soft)}
.opt .ic{font-size:24px;line-height:1;flex:none;width:30px;text-align:center}
.opt b{display:block;font-size:16px}
.opt small{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:2px}
.nav{display:flex;justify-content:space-between;gap:10px;margin:16px 0 40px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font:700 15px/1 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;background:none;color:inherit}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-line{border-color:var(--line)}
.btn-wa{background:var(--wa);color:#fff}
.btn[disabled]{opacity:.35;cursor:default}
.btn.wide{width:100%;margin-top:6px}
/* form bits */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 4px}
label{display:block;font-weight:700;font-size:14px}
label input,.num{display:block;width:100%;margin-top:6px;font:600 17px/1.2 var(--body);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;min-height:50px}
label input:focus{border-color:var(--brass);outline:none}
.unit{font-weight:500;color:var(--muted)}
.lab{font-weight:700;font-size:14px;margin:16px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:700 14px/1 var(--body);color:inherit;background:var(--card);border:1.5px solid var(--line);border-radius:30px;padding:11px 15px;cursor:pointer;min-height:44px}
.chip[aria-pressed="true"]{border-color:var(--brass);background:var(--brass-soft)}
.chip small{font-weight:500;color:var(--muted)}
.hint{font-size:13px;color:var(--muted);margin:8px 0 0}
.err{color:var(--err);font-weight:700;font-size:14px;margin:10px 0 0}
.gate{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin:10px 0 40px}
.gate form{margin-top:14px;display:grid;gap:12px}
.gate .lab{margin:2px 0 0}
/* results */
.summary{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.summary span{font-size:13px;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:6px 12px}
.rec{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:14px}
.rec.top{border:2px solid var(--brass)}
.rec.alt{padding:16px 20px}
.badge{display:inline-block;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--brass);color:var(--bg);border-radius:30px;padding:6px 10px;margin-bottom:10px}
.badge.soft{background:var(--brass-soft);color:var(--brass)}
.rec-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.price{text-align:right;font-size:13px;color:var(--muted)}
.price b{display:block;font-size:24px;color:var(--ink);font-family:var(--display);font-weight:400}
.why{margin:8px 0 0;padding-left:20px}
.why li{margin:3px 0}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 12px}
.thumbs a{display:block;border-radius:10px;overflow:hidden;background:var(--line);aspect-ratio:1;position:relative;text-decoration:none}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs span{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 5px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.need{display:flex;gap:12px;align-items:flex-start;background:var(--brass-soft);border-radius:14px;padding:14px 16px;margin:0 0 14px}
.need .ic{font-size:22px;line-height:1}
.need p{margin:2px 0 0;color:var(--muted);font-size:14px}
.tip{font-size:14px;color:var(--muted);margin:10px 0 0}
.state{padding:40px 0;text-align:center;color:var(--muted)}
.qty{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:15px}
.qty th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line)}
.qty td{padding:11px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.qty td.n{text-align:right;font-weight:800;white-space:nowrap}
.qty small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 6px 2px;font-weight:700}
.total b{font-family:var(--display);font-weight:400;font-size:26px}
.cta{background:var(--band);color:var(--band-ink);border-radius:18px;padding:22px;margin:8px 0 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.cta p{margin:0;max-width:520px;color:var(--band-muted)}
.cta h3{margin:0 0 4px;font-family:var(--display);font-weight:400;font-size:22px;color:var(--band-ink)}
footer{background:var(--band);color:var(--band-muted);font-size:14px;padding:24px 0}
footer a{color:#E3C27A}
@media (max-width:560px){.thumbs{grid-template-columns:repeat(2,1fr)}.price{text-align:left}.opts{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr 1fr}.brand{font-size:15px;letter-spacing:.16em}.back{padding:7px 10px;font-size:12px}}
/* stone planner */
.big{font-family:var(--display);font-size:40px;line-height:1.1}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-bottom:10px}
.legend i,.dot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.hatchkey{background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 5px);border:1px solid var(--line)}
.slabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.slab{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px 12px}
.slab figcaption{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.slab svg{display:block;width:100%;height:auto}
.slab .sb{fill:var(--bg);stroke:var(--muted);stroke-width:.6}
.slab .ht{stroke:var(--muted);stroke-width:.5;opacity:.6}
.slab .pl{fill:#1B1D1C;font-family:var(--body);font-weight:800}
.lock{display:flex;gap:12px;align-items:flex-start;border:1.5px dashed var(--brass);border-radius:14px;padding:16px;margin:16px 0 0;background:var(--card)}
.lock .ic{font-size:24px;line-height:1}
.lock p{margin:4px 0 0;color:var(--muted);font-size:14px}