:root{--y:#ffd400;--b:#0b0b0c;--p:#f4f4f1;--m:#6b6b70;--l:#dddde0}
*{box-sizing:border-box;-webkit-tap-highlight-color:#ffd40033}
body{margin:0;color:#171719;font:16px/1.6 Inter,sans-serif}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit;color:inherit}
button{-webkit-appearance:none;appearance:none}
.top{background:var(--y);text-align:center;padding:7px;font-size:9px;font-weight:800;letter-spacing:.14em}
header{height:76px;padding:0 max(4vw,calc((100vw - 1350px)/2));display:flex;align-items:center;gap:30px;border-bottom:1px solid #eee}
.logo img{width:155px}
header nav{display:flex;gap:25px;margin-left:auto;font-size:13px;font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--y);border:0;padding:14px 22px;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0002}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;line-height:.95;margin:0}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.16em}
.eyebrow:before{content:"";display:inline-block;width:25px;height:3px;background:var(--y);margin-right:9px;vertical-align:middle}
.hero{display:grid;grid-template-columns:1fr 1fr;background:#111;color:#fff}
.hero>div{padding:90px 6vw 80px max(5vw,calc((100vw - 1300px)/2))}
.hero h1{font-size:clamp(58px,6vw,88px)}
.hero p:last-child{color:#aaa;font-size:17px;max-width:600px}
.hero img{width:100%;height:100%;object-fit:cover;min-height:500px}
.calculator,.sizing{padding:85px max(5vw,calc((100vw - 1250px)/2))}
.intro,.sectionhead{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;align-items:start}
.intro>div:first-child,.sectionhead{position:relative}
.intro span,.sectionhead>span{font:900 65px 'Barlow Condensed';color:#ddd}
.intro h2,.sectionhead h2,.explain h2,.cta h2{font-size:clamp(40px,5vw,64px)}
.intro p,.sectionhead p{color:var(--m)}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{border:1px solid var(--l);background:#fff;padding:11px 14px;font-size:13px;font-weight:800;cursor:pointer}
.presets button:hover{background:var(--y)}
.tablewrap{overflow:auto;margin-top:35px}
table{width:100%;border-collapse:collapse;min-width:800px}
th{text-align:left;font-size:8px;letter-spacing:.12em;padding:10px;background:#111;color:#fff}
td{padding:7px;border-bottom:1px solid var(--l)}
td input,td select{width:100%;border:1px solid var(--l);padding:10px;background:#f8f8f6}
td:nth-child(2),td:nth-child(4),td:nth-child(5){width:110px}
td:nth-child(3){width:105px}
td:nth-child(6){width:120px;font-weight:800}
.remove{border:0;background:none;cursor:pointer;font-size:19px}
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}
.totals article{background:var(--p);padding:25px}
.totals .main{background:var(--y)}
.totals small,.recommendations small{font-size:8px;font-weight:800;letter-spacing:.14em}
.totals strong,.totals span{display:block}
.totals strong{font:900 34px 'Barlow Condensed'}
.totals span{font-size:12px;color:var(--m)}
.sizing{background:#111;color:#fff}
.sectionhead{grid-template-columns:80px 1fr}
.sectionhead>span{color:#333}
.sectionhead p{color:#999}
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:35px 0}
.controls label{display:grid;gap:7px;font-size:13px;font-weight:800;position:relative}
.controls input,.controls select{padding:13px;border:1px solid #444;background:#1b1b1d;color:#fff}
.controls label span{position:absolute;right:12px;bottom:12px}
.recommendations{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.recommendations article{border:1px solid #333;padding:25px}
.recommendations .highlight{background:var(--y);color:#111;border:0}
.recommendations strong{display:block;font:900 33px 'Barlow Condensed';margin:10px 0}
.recommendations p{color:#aaa;font-size:13px}
.recommendations .highlight p{color:#635400}
.disclaimer{font-size:13px;color:#999;margin-top:25px}
.explain{padding:85px max(5vw,calc((100vw - 1100px)/2));display:grid;grid-template-columns:1.3fr .7fr;gap:60px}
.explain>div:first-child>p:last-child{color:var(--m)}
.tip{background:var(--y);padding:35px}
.tip b{font:800 30px 'Barlow Condensed';text-transform:uppercase}
.tip p{font-size:14px}
.cta{text-align:center;background:var(--y);padding:75px 20px}
.cta p{max-width:640px;margin:20px auto}
.cta .btn{background:#111;color:#fff}
footer{background:#09090a;color:#aaa;padding:35px max(5vw,calc((100vw - 1250px)/2));display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:12px}
:where(a,button,input,select):focus-visible{outline:3px solid var(--y);outline-offset:3px;box-shadow:0 0 0 2px #111}
footer img{width:150px}
@media(max-width:850px){header nav,header>.btn{display:none}
.hero{grid-template-columns:1fr}
.hero img{min-height:300px}
.intro,.explain{grid-template-columns:1fr}
.controls,.recommendations{grid-template-columns:1fr 1fr}
.totals{grid-template-columns:1fr}
}
@media(max-width:520px){header{padding:0 18px}
.hero>div,.calculator,.sizing,.explain{padding:60px 20px}
.controls,.recommendations{grid-template-columns:1fr}
footer{align-items:flex-start;gap:20px;flex-direction:column}
}