:root{color-scheme:light;--bg:#f7f5f1;--surface:#fff;--ink:#23231f;--muted:#65655e;--line:#deded6;--accent:#b46b31;--soft:#fcf1e7;--dark:#212421;--light:#f7f7f2;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:clamp(1.65rem,2.3vw,2.25rem);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px}
[data-theme=dark]{color-scheme:dark;--bg:#191b19;--surface:#242724;--ink:#f2f2eb;--muted:#b7bbb3;--line:#454a42;--accent:#e3a36d;--soft:#373027;--dark:#101310}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Satoshi",Arial,sans-serif;font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a,select,summary{touch-action:manipulation}
a{color:inherit;text-underline-offset:4px}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.skip{position:absolute;top:-100px;background:var(--surface);padding:var(--s3);z-index:10}.skip:focus{top:0}
.site-header{height:88px;background:#111310;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(var(--s6),calc((100vw - 1160px)/2));gap:var(--s6)}
.brand{display:flex;gap:var(--s3);align-items:center;text-decoration:none;white-space:nowrap;font-size:var(--text-lg);font-weight:500}.brand strong{font-weight:900}.brand svg{flex-shrink:0}
.header-right{display:flex;align-items:center;gap:var(--s6)}.header-label,.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em}.header-label{color:#b9bdb2}.theme-button{border:1px solid #60645c;background:none;color:#fff;padding:var(--s2) var(--s4);min-height:44px;font-size:var(--text-sm);border-radius:4px}.theme-button:hover{background:#30362d}
main{max-width:1160px;margin:auto;padding:var(--s12) var(--s6) var(--s16)}
.intro{margin-bottom:var(--s8)}.eyebrow{margin:0 0 var(--s3);color:var(--accent)}h1{font-size:var(--text-xl);line-height:1.2;letter-spacing:-.03em;margin:0 0 var(--s4);font-weight:900}.intro>p:last-child{color:var(--muted);margin:0;max-width:740px}
.calculator-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.input-panel{background:var(--surface);padding:var(--s8);min-width:0}.section-heading{display:flex;gap:var(--s3);align-items:baseline;margin-bottom:var(--s5)}h2{font-size:var(--text-lg);line-height:1.4;margin:0;font-weight:700;letter-spacing:-.02em}.step{font-size:var(--text-xs);color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.area-row{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s3)}label{display:block}.area-row label{font-size:var(--text-sm);margin-bottom:var(--s2);font-weight:700}
input[type=number],select{width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);padding:var(--s3);height:56px}input[type=number]{font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums}
.hint,.conversion,.error{font-size:var(--text-sm);line-height:1.5;margin:var(--s3) 0 0}.hint{color:var(--muted)}.conversion{color:var(--muted);font-size:var(--text-xs)}.error{color:#ae341e}[data-theme=dark] .error{color:#ffb598}input[aria-invalid=true]{border-color:#ae341e}
.rate-section{border:0;padding:0;margin:var(--s8) 0 0;min-width:0}.rate-section legend{display:flex;gap:var(--s3);font-size:var(--text-lg);font-weight:700;line-height:1.4;padding:0}.rate-intro{font-size:var(--text-sm);color:var(--muted);margin:var(--s3) 0 var(--s5)}.rate-intro strong{color:var(--ink)}
.rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}.rate{position:relative;cursor:pointer}.rate input{position:absolute;width:1px;height:1px;opacity:0}.rate-face{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:1px solid var(--line);border-radius:4px;min-height:90px;padding:var(--s3);transition:border-color .15s,background .15s}.rate:hover .rate-face{border-color:var(--accent);background:var(--soft)}.rate input:checked+.rate-face{border:2px solid var(--accent);padding:calc(var(--s3) - 1px);background:var(--soft)}.rate input:focus-visible+.rate-face{outline:3px solid var(--accent);outline-offset:3px}
.rate-number{font-size:var(--text-lg);font-weight:900;white-space:nowrap}.rate-number small{font-size:var(--text-xs);font-weight:500}.rate-label{font-size:var(--text-xs);color:var(--muted);margin-top:var(--s1)}.suggested .rate-label{font-weight:900;color:var(--accent)}.suggested .rate-face{border-color:var(--accent)}
.rate-note{font-size:var(--text-sm);background:var(--bg);border-radius:4px;padding:var(--s4);margin:var(--s4) 0 0;min-height:96px;line-height:1.55}.rate-note.caution{background:var(--soft)}
.reset{display:inline-block;border:0;background:none;color:var(--muted);font-size:var(--text-sm);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:var(--s2) 0;margin-top:var(--s2)}.reset:hover{color:var(--ink)}
.result-panel{background:var(--dark);color:var(--light);padding:var(--s8);display:flex;flex-direction:column;min-width:0}.result-heading{margin-bottom:var(--s8)}.result-heading .eyebrow{color:#e7a26a;margin-bottom:var(--s1)}.live-label{color:#afb9ab;font-size:var(--text-xs)}
.result-label{margin:0;color:#d3dacf;font-size:var(--text-sm)}.main-result{line-height:1.2;margin:var(--s2) 0;font-weight:700;font-size:var(--text-xl);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.result-unit{font-size:var(--text-lg);font-weight:400}.kg-result{color:#c2ccbd;margin:0;font-size:var(--text-base);font-variant-numeric:tabular-nums}.formula{padding:var(--s4) 0;margin:var(--s5) 0 0;border-top:1px solid #41493e;border-bottom:1px solid #41493e;color:#bec9b8;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.bag-summary{margin-top:var(--s5)}.bag-summary>div{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}.bag-number{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}.bag-label{font-size:var(--text-base)}.bag-summary p{font-size:var(--text-sm);color:#bec9b8;margin:var(--s2) 0 var(--s5)}
dl{font-size:var(--text-sm);margin:0}dl>div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s1) 0}dt{color:#bec9b8}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.quote-area{margin-top:auto;padding-top:var(--s8)}.quote-button{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4) var(--s5);background:#edac79;color:#1b2218;border-radius:4px;font-weight:900;font-size:var(--text-base);text-decoration:none;min-height:56px}.quote-button:hover{background:#fac497}.quote-area>p{font-size:var(--text-xs);color:#b6c1b0;line-height:1.5;margin:var(--s3) 0 0}
.comparison{margin-top:var(--s6);border-bottom:1px solid var(--line)}summary{padding:var(--s4) 0;cursor:pointer;font-size:var(--text-base);font-weight:700;display:flex;justify-content:space-between;gap:var(--s4);list-style:none;min-height:56px}summary::-webkit-details-marker{display:none}summary>span{font-size:var(--text-lg);font-weight:400}details[open] summary>span{transform:rotate(45deg)}.table-wrap{padding-bottom:var(--s5)}.table-wrap>p{font-size:var(--text-sm);color:var(--muted)}table{width:100%;border-collapse:collapse;font-size:var(--text-sm);font-variant-numeric:tabular-nums}th{text-align:left;font-size:var(--text-xs);color:var(--muted);font-weight:700;padding:var(--s3) var(--s2);border-bottom:1px solid var(--line)}td{padding:var(--s3) var(--s2)}td:not(:first-child),th:not(:first-child){text-align:right}tr.selected{background:var(--soft)}td small{display:block;font-size:var(--text-xs);color:var(--muted)}
.guidance{padding-top:var(--s8);max-width:900px}.guidance h2{font-size:var(--text-base)}.guidance p{color:var(--muted);font-size:var(--text-sm);line-height:1.7;margin:var(--s3) 0}.guidance a{font-size:var(--text-sm);font-weight:700;display:inline-block;padding:var(--s2) 0;min-height:44px}
footer{border-top:1px solid var(--line);max-width:1112px;margin:auto;padding:var(--s6) 0;display:flex;justify-content:space-between;gap:var(--s4);color:var(--muted);font-size:var(--text-xs)}footer>span:first-child{font-weight:900;letter-spacing:.1em}
[hidden]{display:none!important}.invalid .main-result,.invalid .kg-result,.invalid .formula,.invalid .bag-summary{display:none}
@media(max-width:800px){.calculator-grid{grid-template-columns:1fr}.header-label{display:none}main{padding-top:var(--s8)}.input-panel,.result-panel{padding:var(--s6)}.result-heading{margin-bottom:var(--s5)}.rate-note{min-height:0}footer{margin:0 var(--s6)}.quote-area{padding-top:var(--s6)}}
@media(max-width:460px){.site-header{height:76px;padding:0 var(--s4);gap:var(--s3)}.brand{font-size:var(--text-base);gap:var(--s2)}.brand svg{width:28px;height:28px}.theme-button{font-size:var(--text-xs);padding:var(--s2) var(--s3)}main{padding:var(--s8) var(--s4) var(--s10)}.input-panel,.result-panel{padding:var(--s5)}.area-row{grid-template-columns:1fr}.area-row select{height:48px}.rate-face{padding:var(--s2);min-height:84px}.rate input:checked+.rate-face{padding:calc(var(--s2) - 1px)}.rate-label{font-size:var(--text-xs);line-height:1.3}.rate-number{font-size:var(--text-lg)}.section-heading h2,.rate-section legend{font-size:var(--text-base)}.desktop-break{display:none}footer{margin:0 var(--s4);flex-direction:column;gap:var(--s2)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.rate-face{transition:border-color .15s}
.calculator-nav{display:flex;gap:var(--s6);margin-bottom:var(--s8);border-bottom:1px solid var(--line);font-size:var(--text-sm);font-weight:700}.calculator-nav a{padding:var(--s3) 0;text-decoration:none;color:var(--muted);min-height:48px}.calculator-nav a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--accent)}.calculator-nav a:hover{color:var(--ink)}
.transport-link{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);font-size:var(--text-sm);color:#efb07d;font-weight:700;padding:var(--s3) 0;margin-bottom:var(--s3);min-height:44px}
.field-label{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--s2)}input[type=text]{width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);padding:var(--s3);min-height:56px}.origin{font-size:var(--text-sm);display:flex;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin:0 0 var(--s5);color:var(--muted)}.origin strong{color:var(--ink)}
.route-button{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);background:none;color:var(--ink);border:1px solid var(--line);border-radius:4px;min-height:48px;padding:var(--s3);font-size:var(--text-sm);font-weight:700;width:100%;margin-top:var(--s3)}.route-button:hover{background:var(--soft);border-color:var(--accent)}.distance-label{margin-top:var(--s5)}.freight-quantity{margin-top:var(--s8)}.freight-quantity .area-row{grid-template-columns:1fr 1fr}.tonnage-readout{align-self:end;padding:var(--s3);background:var(--bg);border-radius:4px;min-height:56px}.tonnage-readout span{display:block;font-size:var(--text-xs);color:var(--muted)}.tonnage-readout strong{font-size:var(--text-lg);font-variant-numeric:tabular-nums}
#freight-empty{padding:var(--s4) 0 var(--s8)}#freight-empty p{color:#bec9b8;font-size:var(--text-sm)}.freight-totals{margin-top:var(--s5)}.total-line{font-weight:700;margin-top:var(--s3)}.total-line dt{color:#f7f7f2}.freight-basis{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid #41493e}.baseline-rate{font-size:var(--text-lg);font-weight:700;margin:var(--s2) 0}.baseline-rate span{display:block;font-size:var(--text-sm);font-weight:400;color:#c2ccbd}.freight-basis p:not(.baseline-rate){font-size:var(--text-xs);color:#bec9b8;line-height:1.6}.band-warning{font-size:var(--text-sm);padding:var(--s4);background:#433627;color:#f4cfb3;line-height:1.55;margin-top:var(--s5);border-radius:4px}
@media(max-width:460px){.calculator-nav{gap:var(--s5)}.freight-quantity .area-row{grid-template-columns:1fr}.tonnage-readout{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}.origin{flex-direction:column;gap:var(--s1)}.total-line{flex-direction:column;gap:var(--s1)}.total-line dd{text-align:left}}