@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

:root { --paper:#f4f1e8; --ink:#11120f; --muted:#66675f; --red:#e33d28; --blue:#2758d8; --green:#b9ee40; --line:#b8b6ad; --panel:#fbfaf5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Geist,Arial,sans-serif; letter-spacing:0; }
button,input,select { font:inherit; }
button,a,select,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.page { width:100%; max-width:100%; overflow-x:hidden; }
.nav { min-height:72px; padding:14px clamp(18px,4vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); background:rgba(244,241,232,.96); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:700; }
.brand span { width:34px; height:34px; display:grid; place-items:center; color:white; background:var(--ink); border-radius:3px; font-size:12px; }
.nav-actions,.action-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.icon-button { width:42px; height:42px; border:1px solid var(--ink); background:transparent; font-size:22px; cursor:pointer; }
.button { min-height:42px; border:1px solid var(--ink); border-radius:3px; padding:0 16px; font-weight:650; cursor:pointer; transition:transform .2s ease,background .2s ease; }
.button:hover,.icon-button:hover { transform:translateY(-2px); }
.button.dark { color:white; background:var(--ink); }.button.red { color:white; background:var(--red); }.button.light { color:var(--ink); background:white; }
.hero { padding:clamp(52px,8vw,110px) clamp(18px,4vw,64px) 56px; display:grid; grid-template-columns:minmax(0,2.1fr) minmax(250px,.9fr); gap:48px; align-items:end; border-bottom:1px solid var(--ink); }
.hero > div { min-width:0; }
.kicker,.eyebrow { margin:0 0 10px; font-size:11px; line-height:1.2; font-weight:700; text-transform:uppercase; color:var(--muted); }
h1,h2,h3,p { overflow-wrap:break-word; }
h1 { max-width:100%; margin:0; font-size:clamp(2rem,3vw,3.4rem); line-height:1.02; font-weight:600; overflow-wrap:anywhere; }
.inline-chart { width:clamp(72px,8vw,110px); }
.inline-chart { display:inline-flex; width:clamp(100px,13vw,190px); height:.5em; align-items:flex-end; justify-content:center; gap:6px; vertical-align:.08em; margin:0 .05em; overflow:hidden; }
.inline-chart i { display:block; width:13%; background:var(--red); height:42%; }.inline-chart i:nth-child(2){height:76%;background:var(--blue)}.inline-chart i:nth-child(3){height:28%;}.inline-chart i:nth-child(4){height:90%;background:var(--green)}.inline-chart i:nth-child(5){height:58%;background:var(--blue)}
.hero-copy { max-width:30rem; margin:0; font-size:clamp(16px,1.5vw,21px); line-height:1.45; }
.workbench { display:grid; grid-template-columns:minmax(300px,4fr) minmax(0,8fr); grid-auto-flow:dense; gap:0; border-bottom:1px solid var(--ink); }
.panel { background:var(--panel); }
.controls,.results { padding:clamp(24px,3vw,44px); }
.controls { border-right:1px solid var(--ink); }
.panel-head,.saved-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
h2 { margin:0; font-size:clamp(2rem,3vw,3.7rem); line-height:1; font-weight:600; } h3 { margin:0; }
.text-button { padding:4px 0; border:0; border-bottom:1px solid currentColor; background:transparent; cursor:pointer; font-weight:600; }.danger{color:#a22316}
.controls>label,.save-panel>label { display:grid; gap:8px; margin-top:25px; font-size:13px; font-weight:600; }
select,input[type=text] { width:100%; min-height:44px; border:1px solid var(--line); border-radius:2px; padding:0 12px; background:white; color:var(--ink); }
.range-label span { display:flex; justify-content:space-between; }.range-label output { color:var(--blue); font-variant-numeric:tabular-nums; }
input[type=range] { accent-color:var(--blue); width:100%; }
.segmented { margin-top:24px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }.segmented>span { grid-column:1/-1; margin-bottom:8px; font-size:13px; font-weight:600; }.segmented label { padding:10px 8px; border:1px solid var(--line); margin-left:-1px; text-align:center; font-size:12px; background:white; }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.two-up label { display:grid; gap:8px; margin-top:24px; font-size:13px; font-weight:600; }
.stress-list { margin:24px 0 0; padding:0; border:0; display:grid; gap:8px; }.stress-list legend { margin-bottom:8px; font-size:13px; font-weight:600; }.stress-list label { padding:11px; border:1px solid var(--line); background:white; }
.result-lead { display:flex; justify-content:space-between; align-items:flex-start; gap:25px; padding-bottom:30px; border-bottom:1px solid var(--line); }.result-lead h2 { font-size:clamp(3.7rem,8vw,8.5rem); color:var(--red); }.result-lead p:not(.eyebrow){max-width:40rem;font-size:18px;}
.confidence { min-width:128px; text-align:right; }.confidence span { display:block; font-size:35px; font-weight:600; }.confidence small { color:var(--muted); }
.score-stack { margin:34px 0; display:grid; gap:12px; }.score-card { position:relative; min-height:92px; padding:18px 20px; border:1px solid var(--ink); background:white; overflow:hidden; }.score-card:first-child { background:var(--green); }.score-row { position:relative; display:flex; justify-content:space-between; gap:20px; align-items:center; z-index:1; }.score-row strong { font-size:22px; }.score-row b { font-size:32px; }.bar { height:7px; margin-top:14px; background:#d8d6ce; position:relative; }.bar i { display:block; height:100%; background:var(--ink); transition:width .35s ease; }
.explanation { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); }.explanation>div { padding:20px; border-right:1px solid var(--line); }.explanation>div:last-child{border-right:0}.explanation p:last-child{margin:0;line-height:1.45}
.chapter { padding:clamp(100px,15vw,210px) clamp(18px,4vw,64px); border-bottom:1px solid var(--ink); }
.comparison { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:clamp(40px,8vw,120px); align-items:start; }.chapter-title{max-width:390px}.chapter-title>p:last-child,.decision-copy>p:last-child{font-size:18px;line-height:1.5}
.matrix-wrap { overflow:hidden; }table { width:100%; border-collapse:collapse; font-size:14px; }th,td { padding:17px 10px; border-bottom:1px solid var(--line); text-align:left; }th { font-size:11px; text-transform:uppercase; color:var(--muted); }td:first-child{font-weight:700;font-size:17px}
details { border-bottom:1px solid var(--line); }summary { padding:18px 0; cursor:pointer; font-weight:650; }details p{margin:0 0 20px;line-height:1.55;color:#3f403a}
.decision { display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(40px,8vw,120px); background:var(--blue); color:white; }.decision .eyebrow{color:#d2dbff}.save-panel{color:var(--ink);padding:clamp(24px,3vw,44px);border:1px solid var(--ink);}.action-row{margin-top:18px}.status{min-height:24px;padding:12px;background:#e9e7df;border-left:4px solid var(--blue)}.saved-head{margin-top:30px}.saved-list{display:grid;gap:8px;margin-top:12px}.saved-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);background:white}.saved-item button{border:0;background:transparent;text-decoration:underline;cursor:pointer}
footer { min-height:210px; padding:50px clamp(18px,4vw,64px); display:grid; grid-template-columns:1fr 2fr auto; gap:30px; align-items:end; background:var(--ink); color:white; }footer a{color:white}
@media (max-width:900px){.hero,.workbench,.comparison,.decision{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--ink)}.explanation{grid-template-columns:1fr}.explanation>div{border-right:0;border-bottom:1px solid var(--line)}.explanation>div:last-child{border-bottom:0}.chapter-title{max-width:none}footer{grid-template-columns:1fr}}
@media (max-width:560px){.nav{min-height:64px}.brand{font-size:13px}.nav .button{display:none}.hero{padding-top:48px;gap:25px}h1{font-size:clamp(2.7rem,14vw,4.4rem)}.inline-chart{width:90px}.controls,.results{padding:24px 18px}.result-lead{display:grid}.confidence{text-align:left}.result-lead h2{font-size:58px}.two-up{grid-template-columns:1fr}.segmented{grid-template-columns:1fr}.segmented label{margin:-1px 0 0}.chapter{padding:90px 18px}.matrix-wrap{overflow-x:auto}table{min-width:680px}.action-row .button{width:100%}.saved-item{align-items:flex-start;flex-direction:column}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}