/* Resole brand: official logo, yellow, charcoal, warm ivory. */
:root{color:#17181a;background:#fbfaf4;--yellow:#ffd43d;--ink:#17181a;--line:#e9e7e1}
body{background:#fbfaf4}
header{background:#fff;border-bottom:1px solid var(--line);padding:15px max(24px,calc((100vw - 1072px)/2));min-height:100px;gap:24px}
.brand-logo{display:block;width:172px;height:auto}
header span{color:#575752;font-size:12px;letter-spacing:.08em;font-weight:600}
main{position:relative;padding-top:46px;isolation:isolate}
main::before{content:'';position:absolute;z-index:-1;right:34px;top:33px;width:210px;height:135px;background:#fff1b8;border-radius:60% 40% 65% 35% / 45% 60% 40% 55%;transform:rotate(-12deg)}
.eyebrow{color:#605d50;font-size:12px;font-weight:700;letter-spacing:.12em}
h1{font-weight:900;letter-spacing:.015em;font-size:clamp(28px,4vw,42px);display:table;background:linear-gradient(transparent 73%,#ffd43d 73%,#ffd43d 94%,transparent 94%);margin-top:11px}
.intro{color:#62615a;font-size:14px;max-width:700px;margin-top:18px;margin-bottom:34px}
.grid{gap:26px;align-items:start}
.panel{border:1px solid #d9d7ce;border-radius:16px;box-shadow:0 5px 0 #eeece3;padding:30px;background:#fff}
h2{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800;letter-spacing:.025em;margin-bottom:28px}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--ink);color:var(--yellow);font-size:14px;border-radius:50%;flex-shrink:0;letter-spacing:0}
label{font-weight:700;color:#252521}
input,select{border-color:#d7d5cc;background:#fffefa;border-radius:8px;padding:13px 12px;min-height:49px}
input:focus,select:focus{outline:3px solid #ffd43d;outline-offset:1px;border-color:#17181a}
small,.note{color:#6d6a61}
button{background:var(--yellow);color:var(--ink);border:1px solid var(--ink);border-radius:50px;font-weight:800;padding:12px 20px;min-height:48px;box-shadow:0 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
button:active{transform:translateY(2px);box-shadow:none}
button.secondary{background:#fff;box-shadow:none;border-color:#b8b5a9;color:#38382f}
button:focus-visible{outline:3px solid #e6b100;outline-offset:4px}
.results{background:#fff;color:var(--ink);border:2px solid var(--ink);padding:0 28px 28px;overflow:hidden;position:sticky;top:24px;box-shadow:5px 6px 0 #ffe691}
.results h2{margin:0 -28px 23px;padding:20px 28px;background:var(--ink);color:#fff}
.results .step-number{background:var(--yellow);color:var(--ink)}
.results .eyebrow{color:#4d4b40;font-size:12px;letter-spacing:.035em;margin-top:22px}
.results #who{padding-bottom:17px;border-bottom:1px solid #e9e7e1;margin-bottom:24px;color:#656259;font-size:12px}
.hero{font-size:clamp(48px,5vw,64px);font-weight:850;letter-spacing:-.035em;margin-top:8px;display:table;background:linear-gradient(transparent 65%,#ffd43d 65%,#ffd43d 93%,transparent 93%);padding-right:10px}
.unit{font-size:13px;font-weight:700;color:#666359;margin-top:8px}
.caption{color:#716e64;font-size:12px}
.stats{gap:12px;margin:25px 0}
.stat{border:1px solid #e5e1d4;background:#fbfaf4;border-radius:10px;padding:16px 14px}
.stat strong{font-size:29px;color:#17181a;margin:5px 0 1px;line-height:1.35}
.stat span{color:#676358;font-size:12px}



.formula{color:#706b60;background:#fbfaf4;border-left:3px solid #ffd43d;padding:12px 14px;white-space:pre-line;line-height:1.9}
.results .actions{gap:10px;margin-top:24px}
#status{color:#625c4b}
.info{margin-top:30px;border-radius:12px;box-shadow:none;background:#fffefa}
summary{font-size:14px;color:#292923}
summary::marker{color:#b48b00}
a{color:#534600;text-decoration-thickness:1px;text-underline-offset:3px}
th{background:#fff6d8}th,td{border-bottom-color:#e5e1d4}
footer{border-top:1px solid #ddd8c6;margin-top:36px;padding:24px 0 12px;color:#777164;font-size:11px;text-align:center}
@media(max-width:760px){header{min-height:83px;padding:13px 22px}.brand-logo{width:140px}main{padding-top:30px}main::before{width:120px;height:100px;right:12px;top:20px;opacity:.65}.panel{padding:24px 20px}.results{position:static;padding:0 20px 24px}.results h2{margin:0 -20px 22px;padding:18px 20px}.grid{gap:28px}.hero{font-size:57px}.intro{font-size:13px}h2{font-size:18px}.stat strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
@media print{body{background:white}main::before{display:none}.results{position:static;box-shadow:none;border:1px solid #777;padding:20px}.results h2{background:white;color:black;margin:0 0 16px;padding:0}.results h2 .step-number{display:none}.results #who{margin-bottom:14px}.hero{background:none;font-size:48px}.stat,.formula{background:white}.info{padding:12px}.panel{box-shadow:none}.results .actions{display:none}}

.meal-plan{background:#fff9e5;border:1px solid #e9cf76;border-radius:12px;padding:18px;margin-top:24px}.meal-plan h3{font-size:16px;line-height:1.6;margin:0 0 8px;font-weight:800}.meal-lead,.meal-note{font-size:12px;color:#696253;line-height:1.8;margin:8px 0}.meal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:17px 0}.meal-grid>div{background:#fff;border:1px solid #eee1af;border-radius:9px;text-align:center;padding:12px 4px}.meal-grid span{display:block;font-size:12px;font-weight:700}.meal-grid strong{display:block;font-size:clamp(20px,2.5vw,29px);line-height:1.5;letter-spacing:-.03em}.meal-grid small{font-size:11px}.meal-total{font-size:13px;font-weight:700;margin:10px 0}.meal-note:last-child{margin-bottom:0}@media print{.meal-plan{background:white;break-inside:avoid}.meal-grid strong{font-size:24px}}