:root { --ink:#28231f; --cream:#f7f3eb; --paper:#fffdfa; --tan:#b88a5a; --line:#ddd2c4; --danger:#8d382e; }
* { box-sizing:border-box; }
html,body { width:100%; max-width:100%; overflow-x:hidden; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Assistant, sans-serif; }
img,video,iframe { max-width:100%; }
.hero { text-align:center; padding:24px 20px 58px; color:#fff; background:radial-gradient(circle at 50% 0,#695444,#2e2722 70%); }
.brand { display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; letter-spacing:.24em; font-weight:600; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid #d8b98f; border-radius:50%; color:#d8b98f; font-family:Assistant,sans-serif; font-weight:700; letter-spacing:0; }
.eyebrow { display:inline-block; margin:0 0 10px; padding:6px 13px; border:1px solid #c7a77f; border-radius:99px; color:#ead3b3; font-size:10px; font-weight:600; letter-spacing:.14em; }
h1,h2 { font-family:Assistant,sans-serif; }
h1 { margin:0; font-size:clamp(32px,5vw,48px); line-height:1; }
.hero p { color:#ded5cd; font-size:14px; }
main { width:min(900px,calc(100% - 32px)); min-width:0; margin:-36px auto 40px; }
.measure-help,.calculator,.result { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px #46372912; }
.measure-help { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px; padding:22px 26px 26px; }
.measure-help>*,.calculator>*,.fields>*,.shoe-options>* { min-width:0; }
.ruler { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#eee3d5; color:#805e3e; font-size:25px; }
.measure-help h2 { margin:0 0 3px; font-size:23px; }.measure-help p { margin:0; color:#716860; font-size:12px; }
.measure-video { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:4px; }
.measure-video video { display:block; width:min(100%,340px); max-height:560px; border-radius:12px; background:#211c19; box-shadow:0 10px 28px #35281d2b; }
.video-link { padding:11px 15px; border:1px solid var(--tan); border-radius:7px; color:#6d4b2f; text-decoration:none; font-size:12px; font-weight:600; text-align:center; }
.video-link:hover { background:#f3e9dc; }
.calculator { margin-top:20px; padding:34px clamp(20px,5vw,52px) 44px; }
.section-heading { text-align:center; }.section-heading>span { color:#9a744e; font-size:10px; letter-spacing:.2em; font-weight:600; }
.section-heading h2 { margin:4px 0 22px; font-size:32px; }
fieldset { border:0; padding:0; margin:0; } legend { margin-bottom:12px; font-size:12px; font-weight:600; }
.shoe-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.shoe-options label { cursor:pointer; }.shoe-options input { position:absolute; opacity:0; }
.shoe-options span { display:flex; flex-direction:column; align-items:center; gap:5px; padding:22px 10px; border:1px solid var(--line); border-radius:9px; transition:.2s; }
.shoe-options input:checked+span { border:2px solid var(--tan); background:#faf4eb; box-shadow:0 0 0 3px #b88a5a18; }
.shoe-options small { color:#7c746d; }
.measurements-heading { margin-top:42px; border-top:1px solid var(--line); padding-top:35px; }
.measurements-heading h2 { margin-bottom:4px; }.measurements-heading p { color:#777069; margin:0 0 22px; font-size:12px; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fields>label { font-size:12px; font-weight:600; }.fields em { display:block; margin:3px 0 7px; color:#847a71; font-size:10px; font-style:normal; font-weight:400; min-height:12px; }
.input-wrap { display:flex; align-items:center; margin-top:7px; border:1px solid var(--line); border-radius:7px; background:#fff; overflow:hidden; }
.input-wrap:focus-within { outline:2px solid #b88a5a55; border-color:var(--tan); }.input-wrap input { width:100%; border:0; padding:13px; font:inherit; outline:0; }.input-wrap i { padding-right:13px; color:#8d847b; font-size:11px; font-style:normal; }
.calculate { display:block; width:min(360px,100%); margin:30px auto 0; padding:15px; border:0; border-radius:8px; color:#fff; background:#7b5537; font:600 12px Assistant,sans-serif; letter-spacing:.04em; cursor:pointer; }.calculate:hover { background:#60412c; }
.form-error { min-height:17px; text-align:center; color:var(--danger); font-size:12px; }
.result { margin-top:20px; padding:34px; text-align:center; border-top:4px solid var(--tan); }.result h2 { margin:0 0 8px; font-size:28px; }.size { margin:12px 0; color:#765238; font:700 clamp(34px,6vw,50px) Assistant,sans-serif; }.result p { line-height:1.65; font-size:13px; }.result .warning { padding:13px; border-radius:7px; background:#f7ede3; color:#684833; }.result.blocked { border-top-color:var(--danger); }.whatsapp { display:inline-block; margin-top:12px; padding:12px 18px; border-radius:7px; background:#237a4b; color:white; text-decoration:none; font-weight:600; }
.disclaimer { color:#81786f; text-align:center; font-size:10px; }
[hidden] { display:none!important; }
@media(max-width:650px){ .measure-help { grid-template-columns:auto minmax(0,1fr); padding-inline:18px; }.shoe-options { grid-template-columns:minmax(0,1fr); }.fields { grid-template-columns:minmax(0,1fr); }.hero { padding:20px 16px 52px; }.measure-help h2,.measure-help p,.section-heading h2 { overflow-wrap:anywhere; } }