:root{--navy:#0d2344;--blue:#1457c7;--blue2:#246ce3;--aqua:#e9f8ff;--bg:#f3f7fd;--line:#d9e5f4;--muted:#566981;--radius:19px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--navy)}
[hidden]{display:none!important}
a{color:#1255b7;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
:focus-visible{outline:3px solid #ffaf35;outline-offset:3px}
.wrapper{width:min(1200px,calc(100% - 36px));margin:auto}
.site-header{background:#071e46;padding:15px 0;border-bottom:3px solid #2c7bf2}
.site-header img{display:block;width:min(200px,100%);height:auto}
main{padding:25px 0 55px}
.breadcrumb{font-size:.87rem;color:var(--muted);margin-bottom:19px}
.breadcrumb a{color:#355981}
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:20px;align-items:center;background:linear-gradient(123deg,#083575 5%,#1457c7 70%,#2578d9);color:white;padding:clamp(24px,4vw,52px);border-radius:26px;overflow:hidden;box-shadow:0 22px 55px #1e478724;margin-bottom:22px}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1660b1}
.hero .eyebrow{color:#aeeafa}
.hero h1{font-size:clamp(1.85rem,4vw,3.2rem);line-height:1.12;letter-spacing:-.035em;margin:13px 0 18px}
.hero p{font-size:1.05rem;max-width:68ch;color:#e8f4ff;margin:0 0 20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:.84rem;padding:5px 10px;border:1px solid #ffffff63;background:#ffffff14;border-radius:999px}
.tile-diagram{background:#ffffff16;border:1px solid #ffffff55;min-height:230px;padding:18px;border-radius:18px;display:grid;place-content:center;text-align:center}
.tile-grid{display:grid;grid-template-columns:repeat(3,70px);gap:7px;transform:rotate(-7deg);margin:0 auto 18px}
.tile-grid i{display:block;height:64px;background:linear-gradient(150deg,#c6ebff,#f9fcff);border:2px solid #6dc5ea;border-radius:5px;box-shadow:2px 3px 0 #062b5c55}
.tile-diagram strong{font-size:1rem}.tile-diagram small{color:#d6edff}
.app-layout{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(315px,.84fr);gap:20px;align-items:start}
.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 30px #1031630a;padding:clamp(19px,2.6vw,32px);margin-bottom:19px;min-width:0}
.panel h2{font-size:clamp(1.2rem,2.3vw,1.65rem);line-height:1.24;margin:7px 0 9px;letter-spacing:-.02em}
.panel h3{font-size:1.08rem;margin:26px 0 8px}
.panel p{margin:0 0 15px}
.section-head{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.section-head p{color:var(--muted);font-size:.94rem;margin:0}
.zone-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(105px,1fr) auto;gap:10px;align-items:end;margin-bottom:11px;padding:14px;background:#f7faff;border:1px solid #e5edf8;border-radius:12px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
.field{min-width:0}
.field label{display:block;font-size:.85rem;font-weight:750;color:#253b55;margin-bottom:6px;line-height:1.35}
.field input{width:100%;min-width:0;display:block;border:1px solid #c7d7e9;background:white;border-radius:10px;padding:12px 11px;color:#122c52;box-shadow:0 1px 2px #002b5110}
.field input:focus{border-color:#2366ce}
.field small{display:block;font-size:.75rem;color:var(--muted);margin-top:5px;line-height:1.42}
.subheading{font-size:1rem;font-weight:800;margin:22px 0 12px}
.note{background:#eff7ff;border-left:3px solid #2e74d6;color:#304f6c;border-radius:0 10px 10px 0;padding:10px 13px;margin:17px 0;font-size:.86rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.primary,.secondary,.tertiary,.remove-zone{border-radius:10px;padding:12px 17px;font-weight:750;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px}
.primary{background:var(--blue);color:white;border:1px solid var(--blue);box-shadow:0 5px 15px #0d58b52d}
.primary:hover{background:#0b418e;color:white}
.secondary{border:1px solid #bacfec;background:white;color:#1552a3}
.secondary:hover{background:#edf5ff}
.tertiary{border:1px solid transparent;background:transparent;color:#344b68}
.tertiary:hover{background:#f1f6ff}
.remove-zone{min-height:44px;border:1px solid #e5ccd0;background:#fff5f5;color:#923344;padding:10px;font-size:.8rem}
.remove-zone:hover{background:#ffe6e8}
.error{background:#fff1f2;border:1px solid #e799a3;padding:13px;border-radius:10px;margin:16px 0 0;color:#9e1a34}
.result-panel{position:sticky;top:16px}
.empty{border:1px dashed #bfd1e9;background:#f8fbff;border-radius:12px;padding:24px;color:#5f718a}
.result-hero{background:linear-gradient(135deg,#0c2e63,#1263bd);padding:22px;border-radius:15px;color:#fff;margin:17px 0}
.result-hero span{display:block;font-size:.89rem;color:#d5eeff}
.result-hero strong{display:block;font-size:clamp(2.5rem,5vw,3.9rem);line-height:1.05;margin-top:8px}
.result-hero small{font-size:.84rem;color:#eff8ff}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.metric{background:#f4f8fe;padding:14px 12px;border:1px solid #e1eaf8;border-radius:12px;overflow-wrap:anywhere}
.metric span{display:block;font-size:.76rem;color:var(--muted)}
.metric strong{display:block;font-size:1.1rem;margin-top:5px}
.cost{background:#eaf8f4;border:1px solid #bde2d3;padding:18px;border-radius:12px;margin:12px 0}
.cost span{display:block;font-size:.86rem;color:#2d6354}
.cost strong{display:block;font-size:clamp(1.3rem,3vw,1.85rem);overflow-wrap:anywhere}
.cost small{display:block;margin-top:4px;color:#34685b}
.fine{font-size:.82rem;color:var(--muted);line-height:1.55}
.table-scroll{width:100%;overflow:auto;margin:14px 0}
table{width:100%;border-collapse:collapse;text-align:left;min-width:355px;font-size:.91rem}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#edf5fe;font-size:.8rem;color:#2b4e7b}
td:nth-child(n+2){white-space:nowrap}
.guide{line-height:1.78}
.formula{font-weight:750;background:#f0f6ff;border-left:4px solid #236bce;padding:16px;border-radius:0 10px 10px 0;overflow-wrap:anywhere}
.guide ul{padding-left:22px}
.guide li{margin-bottom:7px}
details{border-top:1px solid #e3ecf6;padding:14px 0}
details summary{cursor:pointer;font-weight:750}
details p{padding-top:10px;color:var(--muted)}
.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.related a{display:block;padding:17px;background:#f5f9ff;border:1px solid #dbe7f5;border-radius:12px;text-decoration:none}
.related a:hover{border-color:#6e9ed9;background:#edf4ff}
.related a strong{display:block;color:#164e9e}
.related a span{display:block;font-size:.84rem;color:var(--muted)}
.cta-panel{background:linear-gradient(130deg,#edf7ff,#f5fffb);border-color:#b8d9f4;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.cta-panel p{max-width:69ch}
.cta-panel .primary{white-space:nowrap}
.back-link{margin:19px 0}
@media(max-width:970px){.app-layout{grid-template-columns:1fr}.result-panel{position:static}.hero{grid-template-columns:1fr}.tile-diagram{display:none}}
@media(max-width:620px){.wrapper{width:calc(100% - 22px)}main{padding:16px 0 36px}.hero{padding:24px 20px;border-radius:17px}.hero h1{font-size:1.95rem}.panel{padding:19px 16px;border-radius:14px}.zone-row{grid-template-columns:1fr 1fr;gap:10px;padding:12px}.zone-row .field:first-child{grid-column:span 2}.zone-row .remove-zone{grid-column:span 2;justify-self:start}.field-grid{grid-template-columns:1fr}.actions>button,.actions>a{flex:1 1 130px}.cta-panel{grid-template-columns:1fr}.cta-panel .primary{white-space:normal}.related{grid-template-columns:1fr}}
@media(max-width:355px){.zone-row{grid-template-columns:1fr}.zone-row .field:first-child,.zone-row .remove-zone{grid-column:auto}.metrics{grid-template-columns:1fr}.hero h1{font-size:1.7rem}}
@media print{body{background:white;color:#111}.site-header,.breadcrumb,.no-print,.cta-panel,.back-link,.ent-site-footer{display:none!important}main{padding:0}.wrapper{width:100%}.hero{background:white!important;color:#111!important;box-shadow:none;padding:10px 0}.hero p,.hero .eyebrow{color:#111!important}.hero .chips{display:none}.app-layout{display:block}.panel{box-shadow:none;break-inside:avoid;border:1px solid #ccc}#grout-form{display:none}.result-panel{position:static}.metrics{grid-template-columns:repeat(2,1fr)}.result-hero{background:#eee!important;color:#111!important}.result-hero span,.result-hero small{color:#333!important}.guide{display:none!important}a{color:#111}}