:root{color-scheme:light;--ink:#192d25;--muted:#5d6a62;--cream:#f8f7f1;--line:#d9ded5;--green:#153e2e;--accent:#d9e8a5;--white:#fff;--sans:Inter,"Helvetica Neue",Arial,sans-serif;--serif:Georgia,"Times New Roman",serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.55 var(--sans);color:var(--ink);background:var(--cream)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,select{cursor:pointer}button:disabled{opacity:.65;cursor:not-allowed}input,select{color:var(--ink)}.shell{width:min(1200px,calc(100% - 64px));margin:auto}.skip{position:absolute;left:12px;top:-100px;z-index:20;background:white;padding:10px}.skip:focus{top:12px}:focus-visible{outline:3px solid #9d5925;outline-offset:3px}section[id]{scroll-margin-top:24px}.nav{background:#fff;border-bottom:1px solid #eceee9}.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-flex;align-items:center;gap:9px;font-weight:750;letter-spacing:-.045em;font-size:20px;white-space:nowrap}.brand-dot{color:#8ca244}.brand-mark{width:31px;height:31px;border-radius:9px;display:inline-grid;place-items:center;background:var(--green);color:#dceaa8;font-size:20px;font-weight:400;letter-spacing:0}.nav nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}.nav nav>a:not(.nav-cta){color:#536258}.nav-cta{border:1px solid #bec9bd;border-radius:9px;padding:10px 15px}.nav-cta span{margin-left:8px}.hero{background:#e9eee4;border-bottom:1px solid #d9e2d6}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:75px;align-items:center;padding-top:86px;padding-bottom:88px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:750;letter-spacing:.12em;color:#607468;margin:0 0 22px}.eyebrow>span{width:7px;height:7px;border-radius:50%;background:#84a767;flex:none}h1,h2,h3,p{margin-top:0}h1,h2{font-weight:500;letter-spacing:-.045em}h1{font-size:clamp(48px,6.4vw,82px);line-height:1.04;margin-bottom:24px}h1 em,.guidance h2 em{font-family:var(--serif);font-weight:400}h1 em{color:#526f58}.hero-copy{font-size:18px;line-height:1.6;max-width:560px;color:#506357;margin-bottom:30px}.button{min-height:48px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:32px;padding:12px 19px;border:1px solid transparent;font-size:14px;font-weight:700;transition:background .2s,transform .2s}.button:hover{transform:translateY(-1px)}.primary{background:var(--green);color:white}.primary:hover{background:#285a43}.outline{border-color:#abbcac;background:transparent;color:var(--green)}.hero-note{font-size:12px;color:#65786a;margin:17px 0 0}.hero-note span{padding:0 5px;color:#95a89a}.hero-side{background:#fff;border-radius:14px;padding:23px 25px;box-shadow:0 16px 40px #193b2112,0 0 0 1px #d9e3d9}.side-top{display:flex;justify-content:space-between;color:#87958b;font-size:10px;font-weight:700;letter-spacing:.13em}.hero-side>p{font:26px/1.22 var(--serif);letter-spacing:-.025em;margin:26px 0 22px}.mini-row,.mini-bottom{display:flex;justify-content:space-between;border-top:1px solid #e8eee6;padding:12px 0;font-size:13px}.mini-row span:last-child{font-weight:700}.mini-bottom{background:#edf4df;border:0;margin:8px -8px 12px;padding:12px 9px;border-radius:7px;color:#365941;font-size:11px;font-weight:700}.hero-side small{font-size:11px;color:#7f8b82}.work{padding-top:95px;padding-bottom:96px}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:34px}.section-heading .eyebrow,.before .eyebrow,.result .eyebrow,.sources .eyebrow,.guidance .eyebrow{margin-bottom:14px}h2{font-size:clamp(32px,4vw,48px);line-height:1.12;margin-bottom:14px}.section-heading p:not(.eyebrow){color:var(--muted);max-width:670px;margin-bottom:0}.step-tag{font-size:12px;color:#6e8173;letter-spacing:.06em;white-space:nowrap}.step-tag span{color:#c1cbc1;padding:0 7px}.volume-card{background:#eff2e8;border:1px solid #e0e8da;border-radius:14px;padding:23px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px}.volume-card label,.before label{font-weight:700;font-size:15px}.volume-card p,.before p:not(.eyebrow){font-size:13px;color:var(--muted);margin:4px 0 0}.volume-field{display:flex;align-items:center;background:#fff;border:1px solid #ccd6cc;border-radius:9px;overflow:hidden;min-width:200px}.volume-field input{width:120px;border:0;outline:0;padding:12px 13px;background:transparent}.volume-field:focus-within{outline:3px solid #9d5925;outline-offset:2px}.volume-field span{font-size:12px;color:#7c8b80;padding-right:13px}.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}fieldset{min-width:0;border:1px solid #dce3d9;border-radius:14px;background:#fff;padding:26px;margin:0}legend{display:flex;align-items:center;gap:12px;padding:0 8px 0 0;font-size:16px;font-weight:700}legend small{display:block;font-size:11px;color:#809184;font-weight:500}.quote-letter{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;background:#dbeab1;color:#25472f}.quote-letter.second{background:#dbe8e2;color:#315d50}fieldset label{display:flex;justify-content:space-between;font-size:13px;font-weight:650;margin:18px 0 7px}fieldset label span{font-weight:400;color:#89958b}.input-wrap{display:flex;border:1px solid #d1dbd1;background:#fcfdfb;border-radius:9px;align-items:center}.input-wrap:focus-within{outline:3px solid #9d5925;outline-offset:2px}.input-wrap b{padding-left:13px;font-size:14px;color:#718378;font-weight:500}.input-wrap input{min-width:0;width:100%;padding:11px 13px;border:0;outline:0;background:transparent}.before{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid #dce3d9;border-radius:14px;padding:24px 26px;margin-top:16px}.before select,.feedback select{border:1px solid #cdd9ce;border-radius:9px;background:#fff;padding:12px;min-height:48px}.before select{min-width:200px}.form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px}.text-button{border:0;background:transparent;color:#596e5e;text-decoration:underline;text-underline-offset:4px;font-size:13px;padding:10px 0}.error{color:#a32924;font-size:13px;margin:0}.result{border-radius:14px;background:#e9f0df;border:1px solid #d9e5d3;margin-top:30px;padding:30px}.result-top{display:flex;justify-content:space-between;gap:20px}.result h2{font-size:clamp(26px,3.3vw,40px);margin-bottom:10px}.result-top p:not(.eyebrow){font-size:13px;color:#617265;margin-bottom:10px}.result-icon{border:1px solid #b8cbae;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;flex:none}.result-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #cddcc8;border-bottom:1px solid #cddcc8;margin:20px 0}.result-grid>div{padding:20px 0}.result-grid>div+div{padding-left:24px;border-left:1px solid #cddcc8}.result-grid span,.result-grid small{display:block;font-size:11px;color:#647968}.result-grid span{font-weight:750;letter-spacing:.09em}.result-grid strong{display:block;font:36px/1.3 var(--serif);letter-spacing:-.04em;margin:6px 0}.result-note{font-size:13px;color:#5c6f5f;max-width:740px}.feedback{margin-top:16px;background:#fff;border:1px solid #dce3d9;border-radius:14px;padding:22px 26px}.feedback summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;font-size:18px;font-weight:700}.feedback summary::-webkit-details-marker{display:none}.feedback summary small{display:block;font-size:10px;letter-spacing:.1em;color:#819183;margin-bottom:4px}.summary-plus{font-size:26px;font-weight:400}.feedback[open] .summary-plus{transform:rotate(45deg)}.feedback-body{max-width:560px}.feedback-body>p{font-size:13px;color:#65746a;margin:15px 0}.feedback label{display:block;font-size:13px;font-weight:650;margin:16px 0 6px}.feedback select{display:block;width:100%}.feedback button{margin-top:20px}.feedback #feedback-status{font-size:13px;min-height:1.5em}.guidance{background:#17372a;color:white;padding:92px 0}.guidance-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.light{color:#aabfb0}.light>span{background:#c5d68d}.guidance h2{font-size:clamp(35px,4vw,50px)}.guidance h2 em{color:#c5d79e}.guidance-intro{max-width:430px;color:#b5c8ba;font-size:15px}.guide-list article{display:grid;grid-template-columns:35px 1fr;gap:12px;border-bottom:1px solid #ffffff25;padding:0 0 20px;margin-bottom:20px}.guide-list article:last-child{margin-bottom:0;border:0}.guide-list b{font-size:11px;color:#acc48e}.guide-list h3{font-size:16px;margin:0 0 5px}.guide-list p{font-size:13px;color:#bdd0c2;line-height:1.6;margin:0}.sources{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:90px;padding-bottom:95px}.sources p{color:#5c6e61;font-size:14px}.source-links{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:26px 0}.source-links a{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid #dae2d8;font-size:13px;font-weight:650}.source-links a:hover{text-decoration:underline}.source-note{font-size:12px!important;color:#7c8a7e!important}footer{background:#f0f2ec;border-top:1px solid #dfe6dd;padding:30px 0}.footer-inner{display:flex;align-items:center;gap:30px}.footer-inner p,.footer-inner>span{font-size:12px;color:#708074;margin:0}.footer-inner>span{margin-left:auto}.no-js{padding:15px;background:#fff2dc}.result[hidden],.feedback[hidden]{display:none}@media(max-width:800px){.shell{width:min(100% - 36px,700px)}.nav-inner{height:68px}.nav nav{gap:16px}.nav nav>a:not(.nav-cta){display:none}.hero-grid{grid-template-columns:1fr;gap:36px;padding:60px 0}.hero-side{max-width:480px}.work{padding:68px 0}.guidance{padding:68px 0}.guidance-grid,.sources{grid-template-columns:1fr;gap:28px}.sources{padding:68px 0}.footer-inner{flex-wrap:wrap;gap:12px 25px}.footer-inner>span{margin-left:0}}@media(max-width:570px){.nav-cta{font-size:12px;padding:9px!important}h1{font-size:clamp(42px,11vw,58px)}.hero-grid{padding:48px 0}.hero-copy{font-size:16px}.hero-note{font-size:11px}.volume-card,.before{align-items:stretch;flex-direction:column;padding:20px}.volume-field{width:100%}.volume-field input{flex:1}.quote-grid{grid-template-columns:1fr;gap:22px}fieldset{padding:20px}.before select{width:100%}.section-heading{align-items:start}.result{padding:21px}.result-grid strong{font-size:29px}.result-grid>div+div{padding-left:14px}.feedback{padding:20px}.source-links{grid-template-columns:1fr}.footer-inner{align-items:flex-start;flex-direction:column}.hero-side{width:100%}}@media print{.nav,.hero,.form-actions,.feedback,.guidance,.sources,footer,.before{display:none!important}.work{padding:0}.result{break-inside:avoid}.quote-grid{grid-template-columns:1fr 1fr}.shell{width:100%}body{background:white}}

/* Return Notes · visual direction. The calculator and sources remain the proof. */
:root{--ink:#20201e;--muted:#686762;--cream:#f9f8f5;--line:#dedbd5;--green:#242421;--accent:#f2c77f;--white:#fff;--sans:Inter,"Helvetica Neue",Arial,sans-serif;--serif:Inter,"Helvetica Neue",Arial,sans-serif}
body{background:#faf9f6;color:var(--ink);font-weight:400}
a{text-underline-offset:.2em} :focus-visible{outline:3px solid #a05815;outline-offset:3px}
.shell{width:min(1312px,calc(100% - 64px))}.nav{background:#faf9f6;border-color:#e6e2dc}.nav-inner{height:76px}.brand{font-weight:650;letter-spacing:-.04em}.brand-mark{background:#272724;color:#fff;border-radius:50%;font-size:17px;width:28px;height:28px}.brand-dot{color:inherit}.nav nav{font-weight:500}.nav nav>a:not(.nav-cta){color:#4e4b47}.nav-cta{border-color:#d7d2cb;border-radius:6px;padding:10px 15px}
.hero{background:#f1efea;border-color:#e3dfd8}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,480px);gap:clamp(48px,7vw,100px);padding-top:100px;padding-bottom:104px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;color:#77726c;margin-bottom:20px}.eyebrow>span{background:#858078;width:5px;height:5px}h1,h2,h3{text-wrap:balance}h1{font-size:clamp(48px,6vw,80px);line-height:1.01;letter-spacing:-.045em;font-weight:450}h1 em,.guidance h2 em{font:inherit;color:inherit}.hero-copy{font-size:19px;line-height:1.5;color:#55524d;max-width:540px}.hero-note{font-size:13px;color:#706c65}.hero-note span{color:#969188}
.button{min-height:50px;border-radius:7px;font-weight:600;font-size:15px;gap:24px;padding:12px 20px}.primary{background:#f2c77f;color:#24211b}.primary:hover{background:#eaba6e}.outline{border-color:#bcb7af;color:#262421}.hero-side{border-radius:10px;padding:30px 32px;background:#fff;box-shadow:0 12px 36px #37302710,0 0 0 1px #ddd9d2}.side-top{color:#7b766f;font-size:12px;font-weight:600;letter-spacing:.06em}.hero-side>p{font:400 29px/1.18 var(--sans);letter-spacing:-.035em}.mini-row,.mini-bottom{border-color:#e8e5df;font-size:15px;padding:15px 0}.mini-row span:last-child{font-weight:600;font-variant-numeric:tabular-nums}.mini-bottom{background:#f6f4ef;color:#292824;font-size:13px;margin:8px -10px 14px;padding:14px 10px}.hero-side small{font-size:13px;color:#716d67}
.work{padding-top:112px;padding-bottom:112px}.section-heading{margin-bottom:40px}h2{font-weight:450;letter-spacing:-.035em;font-size:clamp(32px,4vw,50px);line-height:1.1}.step-tag{color:#807a73}.volume-card{background:#f0eee9;border:1px solid #e4e0d9;border-radius:10px}.volume-card label,.before label{font-weight:600}.volume-card p,.before p:not(.eyebrow){font-size:14px}.volume-field,.input-wrap{border-color:#d6d2ca;background:#fff;border-radius:6px}.volume-field span,fieldset label{font-size:14px}.quote-grid{gap:16px}fieldset{border-color:#e1ddd7;border-radius:10px;padding:26px;background:#fff}legend{font-weight:600}.quote-letter,.quote-letter.second{background:#efede8;color:#36332e;border-radius:6px}.before,.feedback,.study{border-color:#e1ddd7;border-radius:10px;background:#fff}.before select,.feedback select,.study-body select{border-color:#d6d2ca;border-radius:6px}.text-button{color:#4e4b47}.result{background:#f2f0eb;border-color:#ddd9d2;border-radius:10px}.result-grid{border-color:#d5d1ca}.result-grid>div+div{border-color:#d5d1ca}.result-grid span,.result-grid small,.result-top p:not(.eyebrow),.result-note{color:#66615a;font-size:13px}.result-grid strong{font:450 38px/1.2 var(--sans);font-variant-numeric:tabular-nums}.result-icon{border-color:#c8c2b8}.result h2{font-weight:450}.feedback summary,.study summary{font-weight:600}.feedback-body>p,.study-body p{font-size:14px;color:#66615a}
.guidance{background:#282824;color:#fff;padding:100px 0}.guidance-grid{gap:80px}.guidance h2 em{color:inherit}.guidance-intro,.guide-list p{color:#c6c2ba;font-size:15px}.guide-list b{color:#aaa49a;font-size:13px}.guide-list h3{font-size:18px;font-weight:550}.light{color:#c5c0b8}.light>span{background:#c5c0b8}.sources{padding-top:100px;padding-bottom:105px}.sources p{color:#625e58;font-size:15px}.source-links a{border-color:#ddd9d2;font-weight:550;font-size:14px}.source-note{color:#716c65!important;font-size:13px!important}footer{background:#f1efea;border-color:#e0dcd5}.footer-inner p,.footer-inner>span{color:#716d67;font-size:13px}
@media(max-width:800px){.shell{width:calc(100% - 40px)}.hero-grid{grid-template-columns:1fr;gap:40px;padding:70px 0}.hero-side{max-width:600px}.work{padding:78px 0}.guidance{padding:78px 0}.sources{padding:78px 0}}
@media(max-width:570px){.shell{width:calc(100% - 32px)}.nav-inner{height:68px}.hero-grid{padding:52px 0 58px;gap:32px}h1{font-size:clamp(42px,11vw,54px)}.hero-copy{font-size:17px}.hero-side{padding:23px}.hero-side>p{font-size:25px}.hero-note{font-size:13px}.quote-grid{gap:20px}.result-grid strong{font-size:30px}.source-links{grid-template-columns:1fr}}
/* The live example uses the same numbers shown in the comparison article. */
.hero-side h2{font-size:26px;line-height:1.2;letter-spacing:-.03em;margin:24px 0 18px}.hero-side .mini-row{gap:16px;align-items:flex-start}.hero-side .mini-row strong{white-space:nowrap;font-weight:600;font-size:19px;font-variant-numeric:tabular-nums}.hero-side .mini-row small{display:inline-block;font-size:13px;color:#736e67;line-height:1.5;margin-top:4px}.hero-side>p.mini-bottom{display:block;font:400 13px/1.5 var(--sans);letter-spacing:0;margin:8px 0 13px;padding:12px;background:#f4f2ee;color:#5e5952}.hero-side>small{display:block;line-height:1.5}.hero-side>small a{text-decoration:underline}.before{display:block}.before summary{cursor:pointer;font-size:15px;font-weight:600}.before>div{padding-top:16px}.before select{margin-top:12px}.guide-aside .aside-card{max-width:100%}
/* Show the actual comparison before the reader has to scroll. */
.hero-side .mini-row strong{font-size:clamp(26px,2.3vw,32px);line-height:1;letter-spacing:-.04em}.hero-side .mini-row{align-items:center}.hero-side .mini-row span{font-size:15px;line-height:1.4}
@media(max-width:570px){.hero-grid{padding:30px 0 36px;gap:22px}.hero .eyebrow{margin-bottom:12px;font-size:11px}.hero h1{font-size:clamp(35px,10vw,42px);line-height:1.03;margin-bottom:15px}.hero-copy{font-size:15px;line-height:1.42;margin-bottom:18px}.hero .button{min-height:46px;padding:10px 16px;font-size:14px}.hero-note{margin-top:9px;font-size:12px}.hero-side{padding:18px 20px}.hero-side h2{font-size:20px;margin:12px 0 8px}.side-top{font-size:11px}.hero-side .mini-row{padding:9px 0}.hero-side .mini-row strong{font-size:25px}.hero-side .mini-row span{font-size:14px}.hero-side .mini-row small{font-size:12px;line-height:1.25;margin-top:1px}.hero-side>p.mini-bottom{margin:5px 0 8px;padding:8px;font-size:12px;line-height:1.35}.hero-side>small{font-size:12px}}