* { box-sizing: border-box; }
:root { color-scheme: light; --paper:#f5f3ee; --ink:#202721; --green:#194331; --line:#d9ded5; --muted:#4d5b52; font: 16px/1.55 "Segoe UI", system-ui, sans-serif; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:var(--green); text-underline-offset:.22em; }
:focus-visible { outline:3px solid #b76312; outline-offset:3px; }
[hidden] { display:none !important; }
.skip { position:absolute; top:-10rem; background:white; padding:.75rem; z-index:2; }
.skip:focus { top:1rem; left:1rem; }
.bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem 2rem; padding:.85rem max(5vw,calc((100vw - 1120px)/2)); background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:800; text-decoration:none; white-space:nowrap; }
.mark { display:inline-grid; place-items:center; width:1.75rem; height:1.75rem; margin-right:.35rem; border-radius:6px; background:var(--green); color:#e4f4c3; }
nav,.footer { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1.5rem; }
nav a { font-size:.92rem; font-weight:600; text-decoration:none; }
nav a:hover { text-decoration:underline; }
.wrap { width:min(90%,1120px); margin-inline:auto; }
.hero { background:#183c2e; color:#f7f7ea; padding:clamp(2.3rem,5vw,4.3rem) 0 clamp(3.3rem,6vw,5.6rem); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.3rem,6.4vw,4.6rem); letter-spacing:-.055em; line-height:1.04; margin-bottom:.65rem; }
.hero p { max-width:48ch; font-size:clamp(1.02rem,2vw,1.28rem); color:#dde9df; margin-bottom:0; }
.content { margin-top:-1.35rem; }
.calculator,.quote-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1rem; }
.card { border:1px solid var(--line); border-radius:16px; padding:clamp(1rem,2.65vw,1.75rem); background:white; min-width:0; }
h2 { font-size:clamp(1.2rem,2.5vw,1.6rem); line-height:1.2; letter-spacing:-.03em; }
h3 { font-size:1.12rem; margin-top:1.65rem; margin-bottom:.4rem; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
label { font-weight:650; font-size:.86rem; display:block; min-width:0; }
label small { color:var(--muted); }
input,select,button { font:inherit; }
input,select { width:100%; min-height:44px; padding:.45rem .55rem; margin-top:.28rem; border:1px solid #bcc8bf; background:#fff; color:var(--ink); border-radius:7px; font-weight:450; }
input:invalid { border-color:#aa421e; background:#fff5ef; }
button { border:1px solid var(--green); color:var(--green); background:#fff; border-radius:8px; padding:.5rem .8rem; cursor:pointer; font-weight:650; min-height:44px; white-space:nowrap; }
.hint { font-size:.85rem; color:var(--muted); margin:1rem 0 0; }
.result { background:#e8f1df; border-color:#d2dfcb; color:#173826; }
.big { font-size:clamp(2.25rem,5vw,3.9rem); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; letter-spacing:-.055em; margin:1.5rem 0 .2rem; overflow-wrap:anywhere; }
.big small { font-size:.43em; letter-spacing:0; white-space:nowrap; }
.result-divider { border-top:1px solid #bacdb6; }
.facts,.breakdown { margin:.8rem 0; }
.facts div,.breakdown div { display:flex; justify-content:space-between; gap:.5rem; padding:.25rem 0; }
dd { margin:0; text-align:right; font-weight:750; overflow-wrap:anywhere; min-width:0; }
.jump { font-weight:700; display:inline-block; margin-top:.6rem; }
.compare { margin-top:1rem; }
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.section-head h2 { margin-bottom:.45rem; }
.section-head p { color:var(--muted); max-width:68ch; }
.quote-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.quote { min-width:0; border:1px solid var(--line); border-radius:12px; padding:1rem; margin:0; }
legend { font-weight:800; padding:0 .4rem; }
.quote-result { font-weight:750; margin:1rem 0 .25rem; overflow-wrap:anywhere; }
.breakdown { font-size:.86rem; color:var(--muted); }
.bag-price { margin-top:1rem; display:flex; gap:.5rem 1rem; flex-wrap:wrap; align-items:end; }
.bag-price p { margin:0 0 .5rem; }
.verdict,.notice { padding:.65rem .85rem; margin:1rem 0 0; background:#e8f1df; border-radius:8px; font-weight:650; }
.notice { margin:0 0 .8rem; }
.guide { padding:2.4rem 0 1rem; max-width:74ch; }
.guide p { margin-bottom:.75rem; }
.table-scroll { overflow:auto; }
table { border-collapse:collapse; width:100%; background:#fff; }
caption { text-align:left; font-weight:650; padding:.45rem 0; }
th,td { text-align:left; padding:.55rem .65rem; border-bottom:1px solid var(--line); }
.footer { border-top:1px solid var(--line); margin-top:1rem; padding:1rem 0 1.5rem; }
@media (max-width:750px) { .calculator,.quote-grid { grid-template-columns:1fr; } .section-head { flex-wrap:wrap; } }
@media (max-width:350px) { .fields { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { :root,body { background:#fff; } .hero { padding:.25rem 0 1rem; color:#000; background:#fff; } .hero p { color:#000; } .content { margin-top:0; } .bar,button,.jump,.guide,.footer { display:none; } .calculator,.quote-grid { grid-template-columns:1fr 1fr; } .card,.quote { break-inside:avoid; } }

nav a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; }
.guide .table-scroll + h2, .guide p + h2 { margin-top:1.65rem; }