:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#16332d;background:#fff;line-height:1.6;--green:#08794d;--blue:#126eb6;--line:#dae7df}*{box-sizing:border-box}body{margin:0}a{color:var(--green);text-underline-offset:3px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}header{border-bottom:1px solid var(--line)}.nav{max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 24px;gap:20px}.brand{font-weight:850;letter-spacing:2px;text-decoration:none;font-size:23px}.brand span{color:#16975f}nav{display:flex;gap:24px;flex-wrap:wrap}nav a{color:#24483d;text-decoration:none;font-size:14px}main{max-width:1160px;margin:auto;padding:48px 24px 72px}h1{font-size:clamp(30px,4vw,49px);line-height:1.15;letter-spacing:-1.5px;margin:14px 0 18px}h2{font-size:27px;line-height:1.25;letter-spacing:-.6px}h3{line-height:1.3}p{color:#496358}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:750;color:var(--green);text-transform:uppercase}.intro{max-width:700px}.muted,small{color:#536b61}.pill{display:inline-block;background:#edf8f0;padding:5px 12px;border-radius:30px;font-size:12px;font-weight:700}.calculator{margin:30px 0 60px;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 45px #153d2710}.calc-top{padding:22px 28px;border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}.calc-top h2{margin:0;font-size:21px}.tabs{display:flex;background:#f0f5f2;padding:4px;border-radius:10px}.tabs button{border:0;background:transparent;padding:9px 18px;border-radius:7px;color:#34574a}.tabs .active{background:var(--green);color:white}.water .tabs .active{background:var(--blue)}.calc-body{display:grid;grid-template-columns:1.2fr 1fr}.inputs{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:19px}.inputs .full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:650;min-width:0}input,select,textarea{width:100%;min-width:0;border:1px solid #a9bfb2;border-radius:8px;background:#fff;color:#183b2d;padding:11px}textarea{min-height:90px}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #f0aa35;outline-offset:3px}.results{background:#eff9f1;padding:32px;display:flex;flex-direction:column;justify-content:center}.water .results{background:#eef7ff}.results h3{font-size:14px;font-weight:500;margin:0}.big{font-size:clamp(32px,4vw,48px);font-weight:750;letter-spacing:-1px;color:var(--green);overflow-wrap:anywhere}.water .big{color:var(--blue)}.formula{font-size:13px;border-top:1px solid #c8dfcd;padding-top:16px;white-space:pre-line}.error{color:#a22222}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}button,.button{border:1px solid var(--green);background:var(--green);color:white;border-radius:8px;padding:10px 16px;font-weight:650;text-decoration:none;font-size:14px}.secondary{background:white;color:var(--green)}section{margin-top:56px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{border:1px solid var(--line);border-radius:13px;padding:23px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #194f2512}.card h3{font-size:17px;margin:14px 0 8px}.card p{font-size:14px;margin:0}.icon{height:35px;width:35px;color:var(--green)}.card:nth-child(even) .icon{color:var(--blue)}.reading{max-width:760px}.reading p,.reading li{font-size:17px}.reading h2{margin-top:38px}.callout{background:#f2f8f4;border-left:4px solid var(--green);padding:20px;margin:24px 0}.three{grid-template-columns:repeat(3,1fr)}footer{border-top:1px solid var(--line);background:#f8fbf9;padding:36px 24px}footer>div{max-width:1112px;margin:auto}footer nav{margin:20px 0}.skip{position:absolute;left:12px;top:-70px;background:#fff;padding:10px;z-index:9}.skip:focus{top:5px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}.table-wrap{overflow:auto}.status{font-size:13px;min-height:1.5em}.chart{display:flex;gap:8px;align-items:end;height:160px;margin:20px 0}.bar{background:#08794d;min-width:16px;flex:1;position:relative}.bar span{position:absolute;bottom:100%;font-size:10px}.wide{grid-column:1/-1}.check{flex-direction:row;align-items:center}.check input{width:auto}@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.calc-body{grid-template-columns:1fr}.three{grid-template-columns:1fr}.nav{align-items:flex-start}.results{min-height:240px}}@media(max-width:500px){main{padding:30px 16px 50px}.nav{padding:16px;flex-direction:column;gap:10px}nav{gap:14px}.inputs{padding:20px;grid-template-columns:1fr}.calc-top,.results{padding:20px}.grid{grid-template-columns:1fr}.section-head{align-items:flex-start}.calc-top h2{font-size:18px}.inputs .full{grid-column:auto}h1{letter-spacing:-1px}.big{font-size:38px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Home calculator: task-first layout matching the approved composition. */
[hidden]{display:none!important}main:has([data-tool="home"]){max-width:1400px;padding-top:24px}.brand{letter-spacing:0.8px;white-space:nowrap;color:#08794d}.nav{max-width:1400px}.calculator[data-tool="home"]{margin-top:0;border-radius:24px}.calculator[data-tool="home"] .calc-top{align-items:center;border:0;padding:26px 32px 12px;gap:12px}.calculator[data-tool="home"] h1{font-size:32px;letter-spacing:-.8px;margin:0 0 8px}.calculator[data-tool="home"] .calc-top p{margin:0;font-size:16px}.calculator[data-tool="home"] .pill{font-size:11px}.calculator[data-tool="home"] .calc-body{grid-template-columns:minmax(0,1fr) 350px;padding:10px 28px 28px;gap:28px}.calculator[data-tool="home"] .inputs{padding:0 4px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px}.calculator[data-tool="home"] .results{border-radius:20px;align-self:stretch;padding:28px;background:#eefbe7;justify-content:center;min-width:0}.calculator[data-tool="home"].water .results{background:#eef7ff}.calculator[data-tool="home"] .results h3{font-size:21px;font-weight:750}.calculator[data-tool="home"] .big{font-size:46px;margin:16px 0}.calculator[data-tool="home"] #detail,.calculator[data-tool="home"] .formula{background:#ffffffb8;border-radius:12px;border:0;padding:18px;overflow-wrap:anywhere}.calculator[data-tool="home"] .formula{line-height:1.9}.calculator[data-tool="home"] .tabs button{padding:12px 24px;font-size:16px}.step-heading{display:flex;align-items:center;gap:12px;margin:5px 0}.step-heading span{border-radius:50%;background:#148a37;color:white;width:30px;height:30px;text-align:center;line-height:30px;font-weight:750}.step-heading h2{font-size:17px;letter-spacing:0;margin:0}.calculator[data-tool="home"] .muted{font-size:12px;margin:0}.calculator[data-tool="home"] .status{margin:0;font-size:11px}.calculator[data-tool="home"] label:has(#device),.calculator[data-tool="home"] label:has(#activity){grid-column:1/-1}.calculator[data-tool="home"] .actions{gap:8px}.calculator[data-tool="home"] button{font-size:12px;padding:9px 12px}.calculator[data-tool="home"]~section{margin-top:32px}.loading{padding:24px}.results,.inputs,.calc-top>div{min-width:0} .water .step-heading span{background:#126eb6}
@media(max-width:950px){.calculator[data-tool="home"] .calc-body{grid-template-columns:minmax(0,1fr) 290px;gap:18px;padding:12px 20px 20px}.calculator[data-tool="home"] .inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.calculator[data-tool="home"] .big{font-size:34px}}
@media(max-width:700px){.calculator[data-tool="home"] .calc-top{padding:20px 18px 12px}.calculator[data-tool="home"] h1{font-size:26px}.calculator[data-tool="home"] .calc-body{grid-template-columns:1fr;padding:12px 16px 20px}.calculator[data-tool="home"] .inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.calculator[data-tool="home"] .full{grid-column:1/-1}.calculator[data-tool="home"] .results{padding:22px;min-height:240px}.calculator[data-tool="home"] label{font-size:12px}.calculator[data-tool="home"] input,.calculator[data-tool="home"] select{padding:10px 8px}.calculator[data-tool="home"] .tabs{width:100%}.calculator[data-tool="home"] .tabs button{flex:1;padding:12px}.calculator[data-tool="home"] .calc-top p{font-size:14px}.calculator[data-tool="home"] .big{font-size:38px}.step-heading h2{font-size:16px}}
@media(max-width:500px){.section-head{flex-direction:column;gap:0}.section-head a{white-space:nowrap}.calculator[data-tool="home"] .calc-top{padding-top:18px}}
/* Homepage-only direct manipulation; existing tools and result colors retained. */
.calculator[data-tool="home"] .home-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.calculator[data-tool="home"].water .home-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.calculator[data-tool="home"] .home-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:114px;padding:10px 7px;border:1px solid #bcd9c8;border-radius:11px;background:#fff;color:#32644a;box-shadow:none}.calculator[data-tool="home"] .home-choice img{display:block;width:min(100%,clamp(72px,19vw,135px));height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px;flex:none}.calculator[data-tool="home"] .home-choice span{font-size:12px;line-height:1.3;text-align:center;overflow-wrap:normal}.calculator[data-tool="home"] .home-choice small{font-size:10px;line-height:1.3;font-weight:500}.calculator[data-tool="home"] .home-choice[aria-pressed=true]{border:2px solid #08794d;background:#eef9f0;padding:9px 6px}.calculator[data-tool="home"].water .home-choice{color:#316c95;border-color:#c4dced}.calculator[data-tool="home"].water .home-choice[aria-pressed=true]{border-color:#126eb6;background:#eef7ff}.calculator[data-tool="home"] .home-choice:hover{background:#f4faf6}.calculator[data-tool="home"].water .home-choice:hover{background:#f2f8fd}.calculator[data-tool="home"] .home-time{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;border:1px solid #dbe7df;border-radius:10px;padding:12px 14px}.calculator[data-tool="home"] .home-time>label:first-child{max-width:220px}.calculator[data-tool="home"] .home-time>label.muted{font-size:11px;margin-top:4px}.calculator[data-tool="home"] input[type=range]{width:100%;min-height:40px;padding:0;accent-color:#08794d;border:0;cursor:pointer}.calculator[data-tool="home"].water input[type=range]{accent-color:#126eb6}.calculator[data-tool="home"] .home-advanced{border:1px solid #dce6e0;border-radius:10px;padding:6px 12px}.calculator[data-tool="home"] .home-advanced summary{cursor:pointer;font-size:13px;font-weight:650;min-height:40px;align-content:center;color:#315e49}.calculator[data-tool="home"].water .home-advanced summary{color:#285f8b}.calculator[data-tool="home"] .advanced-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 12px}.calculator[data-tool="home"] .home-advanced p{line-height:1.5;margin:10px 0}.calculator[data-tool="home"] .status:empty{display:none}.calculator[data-tool="home"] .home-backup{font-size:12px;padding:8px 0;min-height:40px}.calculator[data-tool="home"] .actions button{min-height:42px}.calculator[data-tool="home"] input:not([type=range]),.calculator[data-tool="home"] select{min-height:46px}.calculator[data-tool="home"] .results{align-self:stretch}.calculator[data-tool="home"] #error:empty{display:none}
@media(max-width:1050px){.calculator[data-tool="home"] .home-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.calculator[data-tool="home"].water .home-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.calculator[data-tool="home"] .home-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.calculator[data-tool="home"] .home-choice{min-height:106px}.calculator[data-tool="home"].water .home-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.calculator[data-tool="home"] .home-time{padding:10px 12px}.calculator[data-tool="home"] .home-time>label:first-child{max-width:none}}
@media(max-width:350px){.calculator[data-tool="home"] .home-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.calculator[data-tool="home"] .home-choice span{font-size:12px}.calculator[data-tool="home"] .advanced-fields{gap:10px}.calculator[data-tool="home"] .inputs{gap:12px 10px}}
/* Final homepage layout. */
.calculator[data-tool="home"] .calc-body {
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  gap: 20px;
}
.calculator[data-tool="home"] .results {
  align-self: start;
  justify-content: flex-start;
  min-height: 0;
  padding: 18px;
  background: #eff8ef;
  overflow-wrap: anywhere;
}
.period-costs { display: grid; gap: 2px; margin: 14px 0 4px; }
.period-costs > div { background: #fff; border-radius: 8px; padding: 7px 10px; }
.period-costs dt { font-size: 12px; font-weight: 650; }
.period-costs dd { margin: 0; font-size: clamp(18px, 1.55vw, 25px); font-weight: 800; color: var(--green); }
.water .period-costs dd { color: var(--blue); }
.calculator[data-tool="home"] #detail,
.calculator[data-tool="home"] .formula { padding: 10px; font-size: 13px; line-height: 1.55; }
.home-tools { border-top: 1px solid var(--line); padding-top: 12px; }
.home-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.photo-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  min-width: 0;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.photo-card:hover { border-color: var(--green); }
.photo-card picture { display: block; min-width: 0; }
.photo-card img { display: block; width: 100%; height: 108px; object-fit: cover; border-radius: 11px; }
.photo-card h3 { margin: 0; padding: 12px; font-size: 16px; overflow-wrap: anywhere; }
.photo-card:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.home-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 35px; }
.home-features section { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; }
.home-features .section-head { padding: 12px 14px; background: #eff8ef; border-radius: 13px 13px 0 0; }
.home-features section + section .section-head { background: #eef7ff; }
.home-features h2 { font-size: 21px; margin: 0; }
.home-features .section-head a { font-size: 13px; }
.home-feature-list { display: grid; gap: 8px; padding: 10px; }
.home-feature-list .photo-card { grid-template-columns: 96px minmax(0, 1fr); min-height: 64px; }
.home-feature-list .photo-card img { height: 64px; }
.home-feature-list .photo-card:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 950px) {
  .calculator[data-tool="home"] .calc-body { grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr); }
  .home-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .calculator[data-tool="home"] .calc-body, .home-features { grid-template-columns: minmax(0, 1fr); }
  .home-tool-grid .photo-card { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .home-tool-grid .photo-card img { height: auto; aspect-ratio: 3 / 2; }
  .home-tool-grid .photo-card h3 { font-size: 14px; padding: 10px; }
}
@media (max-width: 339px) {
  .home-tool-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .calculator[data-tool="home"]:not(.water) .inputs .home-time { grid-column: span 2; }
}

.example-list { columns: 2; padding-left: 1.25rem; }
.example-list li { break-inside: avoid; margin-bottom: .45rem; }
.example-breadcrumbs { gap: .45rem; margin-bottom: 1.25rem; font-size: .875rem; }
.reading caption { text-align: left; font-weight: 700; padding: .7rem .75rem; background: #f2f8f4; }
@media (max-width: 600px) { .example-list { columns: 1; } }