:root{color:#17212b;font-synthesis:none;text-rendering:optimizelegibility;background:#eef7f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 20%,#4dc0b542,#0000 34rem),radial-gradient(circle at 90% 0,#ffba6333,#0000 30rem),linear-gradient(135deg,#f7fbf8 0%,#e8f3f6 46%,#f3f0e8 100%);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}.number-input-shell{align-self:center;width:100%;min-width:0;position:relative}.number-input-shell input[type=number]{padding-inline-end:2.35rem}.number-input-steppers{pointer-events:none;z-index:2;grid-template-rows:1fr 1fr;gap:0;width:1.65rem;display:grid;position:absolute;inset-block:1px;inset-inline-end:1px}.number-input-step{pointer-events:auto;color:#103846;cursor:pointer;touch-action:manipulation;background:#e3f1edf0;border:none;border-radius:0;place-items:center;margin:0;padding:0;font-size:.72rem;font-weight:900;line-height:1;display:grid}.number-input-step-up{border-bottom:1px solid #2b576524;border-radius:0 7px 0 0}.number-input-step-down{border-radius:0 0 7px}.number-input-step:hover:not(:disabled){background:#1f9c9338}.number-input-step:active:not(:disabled){background:#1f9c9359}.number-input-step:disabled{opacity:.45;cursor:not-allowed}.price-row>.number-input-shell,.water-price-row>.number-input-shell{grid-column:2;min-width:0}.volume-setup-inline>.number-input-shell{grid-column:1;min-width:0}.price-row input[type=number],.water-price-row input[type=number],.volume-setup-inline input[type=number]{grid-column:unset}button{cursor:pointer}.app-shell{min-height:100vh}.hero-band{color:#f8fffc;background:linear-gradient(120deg,#0a4d68f0,#1a7b74e6),#0a4d68;grid-template-columns:minmax(0,1fr) minmax(21rem,31rem);gap:1.7rem;padding:clamp(1.0625rem,2.55vw,2.55rem);display:grid;position:relative;overflow:hidden}.hero-band:after{content:"";opacity:.32;background:repeating-radial-gradient(at 50% 120%,#fff3 0 .18rem,#0000 .2rem 1.3rem);height:5.95rem;position:absolute;inset:auto 0 0}.watermark{opacity:.26;pointer-events:none;position:absolute;inset:0}.watermark span{border:1px solid #ffffff38;border-radius:48% 52% 46% 54%;width:42rem;height:42rem;display:block;position:absolute}.watermark span:first-child{top:-26rem;right:-4rem}.watermark span:nth-child(2){bottom:-28rem;left:7rem;transform:rotate(34deg)}.watermark span:nth-child(3){width:22rem;height:22rem;top:-12rem;left:38%;transform:rotate(68deg)}.hero-content,.hero-metrics{z-index:1;position:relative}.hero-content{max-width:52rem}.eyebrow,.section-kicker{color:#8bded1;letter-spacing:0;text-transform:uppercase;font-size:.72rem;font-weight:800}h1,h2,h3,p{margin:0}h1{letter-spacing:0;margin-top:.3rem;font-size:clamp(2.55rem,5.95vw,5.695rem);line-height:.9}.hero-content p{color:#f8fffcd6;max-width:46rem;margin-top:.935rem;font-size:clamp(.85rem,1.7vw,1.037rem);line-height:1.65}.hero-metrics{grid-template-columns:repeat(3,minmax(0,1fr));align-self:end;gap:.595rem;display:grid}.hero-metrics div{background:#ffffff2e;border:1px solid #ffffff38;border-radius:8px;flex-direction:column;justify-content:space-between;min-width:0;padding:.85rem;display:flex}.hero-metrics span,.projection-grid span{color:#f8fffcb8;font-size:.78rem;font-weight:700;display:block}.hero-metrics strong{flex-shrink:0;margin-top:0;font-size:clamp(1.0625rem,1.7vw,1.7rem);display:block}.workspace{grid-template-columns:minmax(16rem,21.5rem) minmax(0,1fr) minmax(19.5rem,26.5rem);align-items:start;gap:1rem;width:100%;min-width:0;max-width:100%;padding:1rem;display:grid}.left-rail,.right-rail,.center-stack{gap:1rem;min-width:0;display:grid}.panel{background:#ffffffeb;border:1px solid #2a515d1f;border-radius:8px;min-width:0;box-shadow:0 24px 60px #143c481a}.panel-heading{justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.1rem .65rem;display:flex}.panel-heading h2{letter-spacing:0;margin-top:.1rem;font-size:1.25rem}.icon-button,.ghost-button,.seg-button{color:#103846;background:#e4f5f1;border:0;border-radius:8px;min-height:2.35rem;font-weight:800}.icon-button{width:2.35rem;font-size:1.1rem}.ghost-button,.seg-button{padding:0 .85rem}.seg-button{background:#f3f7f3}.field{gap:.35rem;padding:.8rem;display:grid;position:relative}.field span,.reading-tile span,.target-row span,.tap-row span{color:#4b6870;font-size:.78rem;font-weight:800}.field input,.field select,.reading-tile input,.target-row input{color:#122b33;text-align:left;background:#ffffffd1;border:1px solid #2b576524;border-radius:8px;outline:none;width:100%;min-width:0;padding:.75rem .8rem}.field input:disabled{color:#87989d;background:#e9f1efb8}.reading-tile input:disabled{color:#87989d}.checkbox-field input{accent-color:#128f86;width:1.35rem;height:1.35rem}.field input:focus,.field select:focus,.reading-tile input:focus,.target-row input:focus{border-color:#1f9c93;box-shadow:0 0 0 3px #1f9c9326}.field em{color:#6d858c;font-size:.74rem;font-style:normal;font-weight:700}.volume-panel .field input[type=number]{font-size:.95rem;font-weight:700}.sanitization-select{color:#122b33;background:#ffffffd1;border:1px solid #2b576524;border-radius:8px;outline:none;width:100%;min-width:0;padding:.75rem .8rem;font-size:.95rem;font-weight:700}.sanitization-select:focus{border-color:#1f9c93;box-shadow:0 0 0 3px #1f9c9326}.field-hint{color:#6d858c;margin:0;font-size:.72rem;font-weight:600;line-height:1.45}.temperature-unit-field{gap:.45rem;padding:0 .35rem .85rem;display:grid}.temperature-unit-heading{color:#4b6870;font-size:.78rem;font-weight:800}.temperature-unit-options{flex-wrap:wrap;gap:.65rem 1.25rem;display:flex}.unit-option{cursor:pointer;color:#122b33;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;display:inline-flex}.unit-option input{accent-color:#128f86;width:1rem;height:1rem;margin:0}.price-list,.setup-list,.tap-list{padding:0 .35rem .55rem;display:grid}.setup-list>.temperature-unit-field{padding:0 .8rem .85rem}.target-list{grid-template-columns:minmax(0,1fr) 6rem 1.5rem 6rem;gap:.45rem;min-width:0;padding:.35rem .75rem .55rem;display:grid}.volume-setup-inline{grid-template-columns:minmax(7.5rem,1fr) 6rem;align-items:center;column-gap:.35rem;min-width:0;display:grid}.volume-setup-inline>.number-input-shell{font-variant-numeric:tabular-nums}.volume-setup-inline .price-unit-select{grid-column:2}.price-row,.water-price-row{grid-template-columns:minmax(0,1fr) minmax(4.25rem,6rem) 5.4rem auto;align-items:center;column-gap:.35rem}.water-price-row .price-unit-select{grid-column:3}.water-price-row .availability-toggle{grid-column:4}.tap-row{grid-template-columns:minmax(0,1fr) 5.8rem;align-items:center}.tap-row em{grid-column:2}.price-unit-select{box-sizing:border-box;color:#122b33;background:#ffffffd1;border:1px solid #2b576524;border-radius:6px;outline:none;grid-column:3;justify-self:stretch;width:100%;min-width:0;padding:.35rem .22rem;font-size:.65rem;font-weight:800;line-height:1.2}.price-unit-select:focus{border-color:#1f9c93;box-shadow:0 0 0 3px #1f9c9326}.availability-toggle{color:#60757b;justify-self:end;align-items:center;gap:.35rem;font-size:.72rem;font-weight:800;display:flex}.availability-toggle input{accent-color:#128f86;width:1rem;height:1rem}.price-row.disabled,.water-price-row.disabled{opacity:.6}.readings-panel{background:linear-gradient(135deg,#ffffffe6,#f0f9f6d6),#fff}.reading-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;padding:.25rem 1rem .85rem;display:grid}.reading-tile{padding:.65rem;background:linear-gradient(#ffffffeb,#edf7f6e0),#fff;border:1px solid #155d671f;border-radius:8px;gap:.32rem;min-width:0;padding-bottom:.72rem;display:grid}.reading-tile input{background:0 0;border:0;padding:0;font-size:1.42rem;font-weight:900}.reading-tile .number-input-shell input[type=number]{padding-inline-end:2.05rem}.reading-tile em{color:#71858a;font-size:.74rem;font-style:normal;font-weight:800}.optional-reading-tile em,.calcium-hardness-tile em{padding-right:3.1rem}.current-calculated{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;padding:0 1.1rem 1.1rem;display:grid}.current-calculated div{background:#ffffffad;border:1px solid #155d671f;border-radius:8px;min-width:0;padding:.85rem}.current-calculated span{color:#4b6870;font-size:.78rem;font-weight:800;display:block}.current-calculated strong{color:#173943;margin-top:.15rem;font-size:1.45rem;display:block}.calcium-hardness-tile,.optional-reading-tile{position:relative}.calcium-hardness-tile input,.optional-reading-tile input{padding-right:0}.tile-toggle{background:#ffffffdb;border:1px solid #2b57651f;border-radius:999px;align-items:center;gap:.25rem;padding:.22rem .35rem;display:inline-flex;position:absolute;bottom:.45rem;right:.48rem}.tile-toggle input{accent-color:#128f86;width:.95rem;height:.95rem;padding:0}.tile-toggle b{color:#375862;font-size:.62rem;line-height:1}.plan-panel{overflow:hidden}.status-pill{border-radius:999px;padding:.5rem .7rem;font-size:.78rem;font-weight:900}.status-pill.good{color:#07594d;background:#d9f6e8}.status-pill.warn{color:#7a3712;background:#ffead7}.timeline{gap:0;margin:0;padding:.4rem 1.1rem 1.1rem;list-style:none;display:grid}.timeline li{grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;padding:.75rem 0;display:grid}.step-index{color:#fff;background:#0d6d77;border-radius:8px;place-items:center;width:2.2rem;height:2.2rem;font-weight:900;display:grid}.step-body{border-bottom:1px solid #274e591a;min-width:0;padding-bottom:.8rem}.step-topline{justify-content:space-between;gap:1rem;display:flex}.step-topline h3{font-size:1rem}.step-topline strong{white-space:nowrap;color:#0a7168}.amount-line{color:#173943;margin-top:.18rem;font-size:1.15rem;font-weight:900}.step-body p{color:#5c747b;margin-top:.35rem;line-height:1.5}.chemistry-changes{flex-wrap:wrap;gap:.35rem;margin-top:.6rem;display:flex}.chemistry-changes span{color:#17434d;background:#edf8f5;border:1px solid #0d6d7724;border-radius:8px;padding:.32rem .45rem;font-size:.78rem;font-weight:800}.inline-warnings,.warnings{gap:.45rem;margin-top:.7rem;display:grid}.inline-warnings span,.warnings span{color:#71380b;background:#fff0db;border-radius:8px;padding:.55rem .65rem;font-size:.82rem;font-weight:700;display:block}.target-temperature-unit{color:#6d858c;white-space:nowrap;font-size:.74rem;font-weight:700}.target-row{grid-template-columns:subgrid;grid-column:1/-1;align-items:center;min-width:0;padding:0;display:grid}.target-row>span:first-child{overflow-wrap:break-word;min-width:0}.target-temperature-inline{grid-column:2/-1;justify-self:start;align-items:center;gap:.35rem;min-width:0;display:inline-flex}.target-temperature-inline .number-input-shell{box-sizing:border-box;flex:none;width:6rem}.target-temperature-inline .number-input-shell input[type=number]{box-sizing:border-box;width:100%}.target-row b{color:#819197;font-size:.72rem}.projection-panel{color:#f6fffb;background:linear-gradient(145deg,#0a4d68f2,#1f7168eb),#0a4d68}.projection-panel .section-kicker{color:#96efe3}.projection-grid{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.55rem;padding:.35rem 1.1rem 1.1rem;display:grid}.projection-grid div{background:#ffffff1a;border:1px solid #ffffff29;border-radius:8px;min-width:0;padding:.85rem}.projection-grid strong{margin-top:.15rem;font-size:1.45rem;display:block}.projection-panel .warnings{padding:0 1.1rem 1.1rem}.diagnostics{background:#ffffff1a;border:1px solid #ffffff29;border-radius:8px;margin:0 1.1rem 1rem;padding:.85rem}.diagnostics span{color:#f8fffcb8;font-size:.78rem;font-weight:800;display:block}.diagnostics strong{margin-top:.25rem;display:block}.diagnostics p{color:#f8fffcb8;margin-top:.45rem;font-size:.82rem;line-height:1.45}@media (width<=1180px){.workspace{grid-template-columns:minmax(16rem,22rem) minmax(0,1fr)}.right-rail{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.reading-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=820px){.hero-band,.workspace,.right-rail{grid-template-columns:1fr}.hero-metrics,.reading-grid,.current-calculated{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.hero-band{padding:.85rem}.workspace{padding:.7rem}.hero-metrics,.reading-grid,.current-calculated,.projection-grid{grid-template-columns:1fr}.target-list{grid-template-columns:minmax(0,1fr) 5.75rem 1.2rem 5.75rem}.target-temperature-inline input{width:5.75rem}}