/* A clear estimating workspace, with readable units and visible methodology. */
:root{--paper:#f3f5f7;--ink:#182b3d;--muted:#526171;--line:#d8e0e7;--green:#142d43;--green-light:#e5edf5;--clay:#215b91;--white:#fff;--radius:10px}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6}
.wrap{width:min(1180px,calc(100% - 64px))}
.site-header{height:78px;width:min(1320px,calc(100% - 64px));border-bottom-color:#d2dce5}
.brand{font-size:22px;letter-spacing:-.6px}.brand-light{font-weight:400}.brand svg{width:31px;height:31px}
.brand svg path:nth-child(1){fill:#497ba3}.brand svg path:nth-child(2){fill:#142d43}.brand svg path:nth-child(3){fill:#91acc3}
.site-header nav{font-size:13px;gap:28px;font-weight:600}.site-header nav .active:after{bottom:-27px;background:#215b91}
.header-note{font-size:12px;color:#344f67;text-decoration:none;font-weight:600}
.hero{display:grid;grid-template-columns:1fr 290px;gap:70px;align-items:center;padding-block:38px 32px}
.hero .eyebrow{font-size:10px;letter-spacing:1.25px;color:#426784}
.hero h1{font-size:46px;line-height:1.12;letter-spacing:-1.6px;font-weight:700;margin:13px 0 14px}
.hero-copy{color:#526171;font-size:15px;max-width:690px;line-height:1.7}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11px;color:#395469;margin-top:17px;font-weight:600}
.hero-facts span:before{content:'✓';margin-right:7px;color:#215b91}
.reference-note{border-left:3px solid #a9c0d2;padding:5px 0 5px 23px}
.reference-label{font-size:9px;letter-spacing:1px;font-weight:700;color:#526171}
.reference-note p{font-size:23px;line-height:1.3;font-weight:600;letter-spacing:-.4px;margin:10px 0 15px}
.reference-note a{font-size:11px;line-height:1.6;color:#215b91;text-decoration:none;display:block;max-width:230px}
.reference-note a span{margin-left:4px}
.workspace{grid-template-columns:1.13fr 1fr;border:1px solid #c8d4df;box-shadow:0 6px 20px #162c4008;background:#fff;align-items:start}
.input-panel{padding:28px 30px}.panel-heading{margin-bottom:23px;gap:10px}.panel-heading h2{font-weight:700;font-size:18px;letter-spacing:-.25px}
.panel-meta{font-size:10px;color:#526171}.step-tag{width:25px;height:25px;border-radius:5px;font-size:12px;font-weight:700;font-family:Arial,sans-serif;color:#215b91;background:#edf3f8;border:1px solid #ccdae6}
.unit-panel{padding-bottom:21px;margin-bottom:21px;border-bottom:1px solid var(--line)}
.unit-toggle{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;border-radius:0;position:relative}
.unit-toggle legend{font-size:12px;font-weight:700;margin-bottom:9px;padding:0}
.unit-toggle label{min-width:0;position:relative}
.unit-toggle span{height:72px;border:1px solid #c9d5df;border-radius:6px;background:#fff;padding:12px;display:flex;flex-direction:column;justify-content:center;white-space:normal;line-height:1.5;position:relative}
.unit-toggle span strong{font-size:14px;font-weight:700}.unit-toggle span small{font-size:10px;color:#526171;display:block;margin-top:3px}
.unit-toggle input:checked+span{background:#edf4fb;color:#153f65;border:2px solid #215b91;padding:11px}
.unit-toggle input:checked+span:after{content:'✓';position:absolute;right:10px;top:10px;color:#215b91;font-size:13px;font-weight:700}
.unit-toggle input:checked+span small{color:#344f67}.unit-panel .input-hint{font-size:11px;line-height:1.65;margin-top:9px}
.shape-picker{gap:10px;margin-bottom:21px}.shape-picker legend{font-size:12px;font-weight:700}.shape-picker label>span{height:73px;border-color:#cfdae3;border-radius:5px;font-size:12px;gap:4px}
.shape-picker svg{height:26px;stroke:#5f788e}.shape-picker input:checked+span{background:#edf4fb;border-color:#6b8ba7;color:#153f65;box-shadow:inset 0 0 0 .5px #6b8ba7}.shape-picker input:checked+span svg{stroke:#215b91}.shape-picker label:hover>span{background:#f3f7fa}
.dimension-grid{gap:17px 16px}.field label{font-size:12px;font-weight:700;color:#263e54}
input[type=number],select{height:47px;border-color:#bdcbd7;background:#fff;border-radius:5px;font-size:16px;font-variant-numeric:tabular-nums;color:#182b3d;padding:9px 12px}
.input-wrap input[type=number]{padding-right:52px}.input-wrap>span{color:#42586d;background:#f0f4f7;border-left:1px solid #cbd7e1;right:1px;top:1px;bottom:1px;width:40px;border-radius:0 4px 4px 0;font-size:11px;font-weight:600;display:flex;justify-content:center;align-items:center}
input::-webkit-inner-spin-button{display:none}input[type=number]{appearance:textfield;-moz-appearance:textfield}
input::placeholder{color:#657483}select{font-size:13px;height:47px;padding-right:28px}
input:hover,select:hover{border-color:#7795b0}input:focus,select:focus{border-color:#215b91;outline:2px solid #94b7d6;outline-offset:1px}
input[aria-invalid=true]{border-color:#a23b2c}.input-hint{color:#526171;font-size:11px}.allowance-row{margin-top:22px}.allowance-row label{font-weight:700}.compact{width:94px}.compact input{font-size:15px}.compact.input-wrap>span{width:32px}.compact.input-wrap input[type=number]{padding-right:38px}
.bag-row{margin-top:21px;gap:0}.bag-row .field+.field{margin-top:13px}#bag-preset-note{margin-top:8px}
.cost-options{margin-top:23px;border-color:#d2dde6}.cost-options summary{font-size:13px;padding-block:16px}.small-plus{color:#215b91;font-weight:700}.optional{font-size:9px;letter-spacing:.8px;color:#526171}.cost-fields{padding-bottom:18px}.form-bottom{font-size:11px;color:#526171}.text-button{font-size:12px;color:#215b91}.status-dot{background:#427765}
.result-panel{background:#142d43;padding:28px 31px 29px;color:#f5f8fc;align-self:stretch}
.result-heading h2{font-size:18px;font-weight:700}.result-heading .step-tag{background:#294359;color:#d3e4f0;border-color:#527089}.live-badge{color:#dbeaf5;background:#2a465d;border-color:#527089;font-size:9px;letter-spacing:1px}
.pour-drawing{height:174px;margin:7px -3px 3px}.pour-drawing svg{max-width:410px}
.total-label{font-size:10px;letter-spacing:1px;font-weight:700;gap:10px;margin-top:12px}.total-label>span{font-size:8px;color:#dbe9f5;border-color:#4b6680;padding:3px 6px}
.volume-main{gap:13px;margin-top:11px}.volume-main output{font-size:66px;letter-spacing:-2px;font-weight:600;line-height:1.14}.volume-main>span{font-family:Arial,sans-serif;font-style:normal;font-size:16px;color:#d1e0ec}
.secondary-volume{color:#bdcddd;font-size:13px;margin-top:7px;margin-bottom:23px}.bag-result{background:#213e56;border-color:#3d5b73;padding:18px 20px;border-radius:6px;gap:16px}.bag-result svg{stroke:#c2d8e9}.bag-result output{font-size:34px;line-height:1.3;font-weight:600;letter-spacing:-.4px}.bag-result div>span{font-family:Arial,sans-serif;font-style:normal;font-size:16px;color:#e0ebf3}.bag-result small{color:#c3d4e2;font-size:11px;margin-top:3px;line-height:1.5}
.breakdown{border-color:#405c73;padding-top:16px;gap:10px;margin-top:22px}.breakdown>div,.cost-result>div{font-size:12px;color:#c3d4e2}.breakdown strong{color:#f5f8fc;font-weight:600}
.calculation-formula{font-size:11px;color:#bdcddd;line-height:1.7;padding:12px 13px;margin:16px 0 0;border:1px solid #405c73;border-radius:4px;background:#19354d}
.result-actions{margin-top:21px}.result-actions button{font-size:12px;border-color:#6b8498;color:#eaf2f8;min-height:43px}.result-actions button:first-child{background:#fff;border-color:#fff;color:#142d43;font-weight:700}.result-actions button:first-child:hover{background:#eaf3fa}.result-actions button:hover{background:#2b4a63}.result-disclaimer{font-size:11px;color:#bdcddd;max-width:450px;margin-top:17px}
.cost-result{border-color:#405c73}.cost-result h3{font-size:14px;font-weight:700}.cost-result strong{font-size:16px;color:#fff;font-weight:600}.cost-result p{font-size:11px;color:#c3d4e2}.action-status{font-size:12px;color:#d4e9fb}.cost-result>div{align-items:baseline}.cost-result strong{text-align:right}
#error-state h3{font-family:Arial,sans-serif;font-size:24px;font-weight:600}#error-message{color:#d4e2ee;font-size:14px}
.trust-strip{font-size:11px;gap:35px;color:#526171;padding:18px 0}.trust-strip svg{stroke:#426784}
.guide-section{padding-top:55px}.section-intro{gap:40px;align-items:start}.section-intro h2,.reference-copy h2,.example-section h2,.faq-section h2{font-size:28px;font-weight:700;letter-spacing:-.7px;line-height:1.25;margin-top:10px}.eyebrow{font-size:10px;letter-spacing:1px;color:#426784}.section-intro>p{font-size:13px;max-width:370px;margin-top:19px}
.guide-cards{border-color:#d2dde6;border-radius:7px;background:white}.guide-cards article{padding:26px}.guide-cards h3{font-size:17px;font-weight:700;margin-top:12px}.guide-cards p{font-size:13px;color:#526171;line-height:1.8}.guide-number{color:#426784;font-size:10px;font-weight:700}.formula{background:#eef3f7;color:#263f55;font-size:12px;white-space:normal}.guide-cards .small-copy{font-size:11px;color:#526171}
.reference-section{padding-block:50px;gap:60px}.reference-copy>p{font-size:14px}.arrow-link{color:#215b91;font-size:12px;border-bottom-color:#9ab4cb}.table-shell table{background:#fff;border:1px solid #d2dde6;font-size:13px}.table-shell thead th{background:#eaf0f5;color:#41576b;font-size:10px;letter-spacing:.5px;padding:13px 14px;border-color:#c2d1dd;font-weight:700}.table-shell tbody td,.table-shell tbody th{padding:14px}.table-shell .highlight-row{background:#eff5fa}.highlight-row th>span{color:#466580}.table-shell>p{font-size:11px}
.example-section{background:#e8eef4;border-color:#ccdae5;border-radius:7px;padding:33px 36px;gap:60px;margin-block:40px}.example-section p{color:#526171;font-size:14px}.example-section p strong{color:#182b3d;font-weight:700}.primary-button{font-size:12px;font-weight:700;color:#215b91;border-color:#7897b1;border-radius:4px;margin-top:4px}.example-math{transform:none;background:#fff;border:1px solid #cbd8e3;border-radius:5px;box-shadow:none}.example-math>span{color:#526171;font-size:9px;font-weight:700}.example-math>p{font-family:Arial,sans-serif;color:#182b3d;font-size:23px;font-weight:600}.example-math hr{border-color:#d3dfe8}.example-math>div{font-size:12px}.example-math strong{font-weight:700}.example-math>div:last-child{color:#215b91}
.faq-section{padding-bottom:45px}.faq-list summary{font-size:14px;font-weight:600;color:#263f55;padding-block:19px}.faq-list summary:after{color:#466985}.faq-list p{color:#526171;font-size:13px}.method-section{padding-block:28px;color:#526171}.method-section h2{font-size:18px;font-weight:700;color:#263f55}.method-section p{font-size:12px;max-width:980px}.method-section .small-copy{font-size:11px}.method-section a{color:#215b91}.site-footer{padding-block:25px}.site-footer>p{font-family:Arial,sans-serif;font-style:normal;font-size:11px}.site-footer>div{font-size:11px}.privacy-content p{color:#526171}
@media(max-width:1000px){.hero{grid-template-columns:1fr 235px;gap:35px}.hero h1{font-size:40px}.reference-note{padding-left:18px}.reference-note p{font-size:21px}.header-note{display:none}.input-panel,.result-panel{padding-inline:24px}.panel-meta{display:none}.volume-main output{font-size:56px}.unit-toggle span{padding:11px}.unit-toggle input:checked+span{padding:10px}.unit-toggle span small{font-size:9px}.guide-cards article{padding:21px}}
@media(max-width:760px){.wrap,.site-header{width:calc(100% - 32px)}.site-header{height:68px}.brand{font-size:20px}.site-header nav{gap:16px;font-size:11px}.site-header nav a:first-child{display:none}.site-header nav a:nth-child(2){display:none}.site-header nav .active:after{display:none}.hero{display:block;padding-block:27px 25px}.hero h1{font-size:37px;letter-spacing:-1.15px;margin-block:11px 12px}.hero .eyebrow{font-size:9px;letter-spacing:.9px}.hero-copy{font-size:14px;line-height:1.7}.hero-facts{font-size:10px;gap:4px 14px;margin-top:14px}.reference-note{display:none}.workspace{grid-template-columns:1fr;max-width:none}.input-panel{padding:23px}.panel-heading{margin-bottom:20px}.panel-heading h2{font-size:18px}.unit-toggle span{height:75px;padding:11px}.unit-toggle span small{font-size:10px;max-width:160px}.unit-toggle input:checked+span{padding:10px}.shape-picker label>span{height:72px;font-size:11px}.result-panel{padding:26px;border-top:1px solid #8ea6bb}.result-heading h2{font-size:18px}.pour-drawing{height:156px;margin:2px auto}.volume-main output{font-size:64px}.volume-main>span{font-size:17px}.total-label{font-size:9px}.trust-strip{font-size:10px;gap:10px 20px;justify-content:flex-start}.trust-strip>span:nth-child(2){order:0}.guide-section{padding-top:38px}.section-intro{display:block;margin-bottom:23px}.section-intro>p{margin-top:15px;max-width:none}.section-intro h2,.reference-copy h2,.example-section h2,.faq-section h2{font-size:26px}.guide-cards{grid-template-columns:1fr}.guide-cards article{padding:24px}.guide-cards article+article{border-left:0;border-top:1px solid #d2dde6}.reference-section{grid-template-columns:1fr;gap:22px;padding-block:38px}.example-section{grid-template-columns:1fr;padding:27px 23px;gap:22px;margin-block:32px}.example-math{margin:0;padding:22px}.faq-section{grid-template-columns:1fr;gap:18px}.site-footer{align-items:flex-start;flex-direction:column;gap:13px}.method-section p{font-size:12px}}
@media(max-width:390px){.input-panel{padding:20px 16px}.result-panel{padding:24px 19px}.unit-toggle{gap:8px}.unit-toggle span{padding:10px}.unit-toggle input:checked+span{padding:9px}.unit-toggle span strong{font-size:13px}.unit-toggle span small{font-size:9px;max-width:135px}.unit-toggle input:checked+span:after{right:8px;top:8px}.hero h1{font-size:33px}.total-label{font-size:8px}.volume-main output{font-size:58px}.volume-main>span{font-size:15px}.dimension-grid{gap:14px 12px}.result-heading h2{font-size:16px}.bag-result{padding:15px}.site-header nav{font-size:11px}}
@media print{.unit-panel,.panel-meta,#bag-preset-note,.reference-note,.hero-facts{display:none!important}.result-panel{background:white;color:black}.calculation-formula{background:white;border-color:#aaa;color:black}.input-wrap>span{background:white;border:0}.input-wrap input[type=number]{padding-right:40px}.result-panel{padding-inline:0}.workspace{display:block}.site-header{height:auto}.volume-main output{font-size:45px}.bag-result,.example-math{background:white}}

@media(max-width:480px){.privacy-header{height:auto;min-height:68px;flex-wrap:wrap;gap:5px 16px;padding-block:14px}.privacy-header>a:last-child{font-size:12px}}
