/* A calm, mechanical illustration and a three-step household check. */
.leak-check{position:relative;overflow:hidden;background:#e2eaf4;isolation:isolate}
.leak-check:before{content:'';position:absolute;width:70vw;height:70vw;right:-28vw;top:0;border:1px solid #6b8bad18;border-radius:50%;box-shadow:0 0 0 60px #e2eaf4,0 0 0 61px #6b8bad13;z-index:-1;pointer-events:none}
.leak-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:7vw;align-items:start}
.leak-content{min-width:0}
.leak-check h2{font-size:clamp(42px,4.5vw,78px);line-height:1.12}
.leak-intro{max-width:500px;font-size:18px;line-height:1.8;color:#556e8b;margin:28px 0 38px}
.leak-steps{display:flex;list-style:none;padding:0;margin:0 0 30px;border-bottom:1px solid #1b41612b}
.leak-steps li{flex:1;min-width:0}
.leak-steps button{display:flex;align-items:center;gap:10px;padding:16px 12px 20px 0;width:100%;font-size:15px;text-align:left;position:relative;min-height:62px;color:#5a7391}
.leak-steps button:after{content:'';position:absolute;inset:auto 0 -1px;height:2px;background:#315f91;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.leak-steps button[aria-current=step]{color:#173759}
.leak-steps button[aria-current=step]:after,.leak-steps button.is-complete:after{transform:scaleX(1)}
.leak-step-number{display:grid;place-items:center;width:28px;height:28px;border:1px solid #6b8bad55;border-radius:50%;font-size:10px;flex-shrink:0;transition:background .3s,color .3s}
.leak-steps button[aria-current=step] .leak-step-number,.leak-steps button.is-complete .leak-step-number{background:#315f91;border-color:#315f91;color:white}
.leak-panel{min-height:240px}
.leak-panel h3,.leak-result h3{font-size:25px;font-weight:500;line-height:1.35;letter-spacing:-.6px;margin:0 0 15px}
.leak-panel h3:focus,.leak-result h3:focus{outline:none}
.leak-panel p,.leak-result p,.leak-result li{font-size:16px;line-height:1.85;color:#536b87;margin:0}
.leak-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:28px}
.leak-next{background:#244c77;color:#f1f6ff;font-size:14px;padding-left:22px;gap:24px}
.leak-next:hover{background:#315f91}
.leak-next .circle{border-color:#dbe8f53d}
.leak-back,.leak-restart{font-size:13px;line-height:1.7;color:#426486;padding:10px 0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#42648655}
.leak-back:hover,.leak-restart:hover{text-decoration-color:currentColor}
.leak-answers{display:flex;gap:14px;margin:25px 0 12px}
.leak-answers button{display:flex;align-items:center;justify-content:space-between;gap:45px;min-width:130px;padding:17px 20px;border:1px solid #6b8bad70;border-radius:4px;font-size:18px;background:#f6f9fc40;transition:background .3s,color .3s}
.leak-answers button:hover{background:#f6f9fc}
.leak-answers button[aria-pressed=true]{background:#244c77;color:white;border-color:#244c77}
.leak-answers svg{width:18px;height:18px}
.leak-result{margin-top:20px;padding:28px;border:1px solid #6b8bad44;border-radius:8px;background:#f5f8fc88;animation:rise .45s var(--ease)}
.leak-result-label{display:block;font-size:10px;letter-spacing:1.5px;color:#4d7199;margin-bottom:15px}
.leak-result ul{padding-left:20px;margin:18px 0 8px}
.leak-result li{margin:10px 0;padding-left:4px}
.leak-result strong{color:#244c77;font-weight:600}
.leak-result .text-link{font-size:14px;gap:18px;line-height:1.7;margin-top:16px;text-align:left}
.leak-result .text-link svg{flex-shrink:0}
.leak-restart{margin-top:18px}
.leak-check [hidden]{display:none!important}
.leak-visual{margin:0;min-width:0;padding-top:20px;position:relative}
.leak-meter-art{position:relative;width:100%;max-width:570px;aspect-ratio:1.12;margin:0 auto;display:grid;place-items:center}
.meter-orbit{position:absolute;width:90%;aspect-ratio:1;border:1px solid #7695b52b;border-radius:50%;pointer-events:none}
.orbit-two{width:106%;border-style:dashed;opacity:.5}
.meter-pipe{position:absolute;top:42%;height:17%;width:30%;background:linear-gradient(#b1c4d7,#e6f0fa 23%,#acc1d6 57%,#7999b9);border:1px solid #849fba;border-radius:8px;box-shadow:inset 0 1px #fff9,0 20px 30px #24436613}
.pipe-left{left:0}.pipe-right{right:0}
.meter-pipe:after{content:'';position:absolute;top:-10%;bottom:-10%;width:30%;left:12%;border:1px solid #7b9bb9;border-radius:5px;background:linear-gradient(#e3edf8,#aac1d8 60%,#92afcc);box-shadow:inset 3px 0 #ecf5ff88}
.pipe-right:after{left:auto;right:12%}
.meter-case{position:relative;width:76%;aspect-ratio:1;border-radius:50%;padding:6.5%;border:1px solid #89a4bf;background:linear-gradient(135deg,#f8fbff 4%,#b5c9dd 22%,#6f91b1 51%,#d9e7f5 76%,#a7bed4);box-shadow:0 25px 40px #23486d20,inset 1px 2px 3px #ffffffd9,inset -2px -4px 4px #456c9190;transform:rotate(-8deg)}
.meter-face{height:100%;width:100%;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#fff,#f0f5fb 60%,#cbdcea);border:2px solid #6d8ba9;box-shadow:inset 0 3px 12px #2b51744d,0 0 0 3px #edf5ff9c;position:relative;overflow:hidden}
.meter-face:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(125deg,transparent 20%,#ffffff80 21%,#ffffff22 35%,transparent 36%,transparent 72%,#ffffff65 73%,transparent 80%);pointer-events:none}
.meter-brand{position:absolute;top:15%;left:0;right:0;text-align:center;font-size:clamp(14px,1.4vw,25px);letter-spacing:-1px;color:#355d86}
.meter-brand small{display:block;font-size:6px;letter-spacing:3px;margin-top:4px}
.meter-unit{position:absolute;top:35%;right:17%;font-size:10px;color:#567594}
.meter-counter{--digit-height:38px;position:absolute;top:42%;left:14%;right:14%;height:calc(var(--digit-height) + 6px);display:flex;gap:3px;padding:3px;border-radius:3px;background:#253f5b;box-shadow:inset 0 2px 5px #0e2138,0 1px #fff}
.meter-counter>span{flex:1;min-width:0;display:grid;place-items:center;background:linear-gradient(#182e47,#3b5670 52%,#1c344e);color:#edf5ff;border-radius:2px;font-size:clamp(13px,1.8vw,29px);font-variant-numeric:tabular-nums;line-height:1;overflow:hidden}
.meter-counter>span.meter-decimal{display:block;background:linear-gradient(#adbed0,#e6edf6 52%,#b8cbde);color:#244d7b}
.meter-roll{display:block;text-align:center;line-height:var(--digit-height);animation:meter-digits 20s steps(10,end) infinite;animation-play-state:paused}
.meter-dial{position:absolute;left:23%;bottom:16%;width:24%;aspect-ratio:1;border:1px solid #6a89a866;border-radius:50%;background:#dce9f5;box-shadow:inset 0 1px 6px #4b71951f}
.meter-tick{position:absolute;left:49%;top:5%;width:1px;height:90%;background:linear-gradient(#4f789b 0 7%,transparent 7% 93%,#4f789b 93%)}
.tick-b{transform:rotate(45deg)}.tick-c{transform:rotate(90deg)}.tick-d{transform:rotate(135deg)}
.meter-needle{position:absolute;inset:12%;animation:spin 24s linear infinite;animation-play-state:paused}
.meter-needle:before{content:'';position:absolute;bottom:50%;left:48%;width:4%;height:50%;background:#325f8e;clip-path:polygon(50% 0,100% 100%,0 100%)}
.meter-pin{position:absolute;width:9%;height:9%;left:45.5%;top:45.5%;background:#325f8e;border-radius:50%}
.meter-flow{position:absolute;right:22%;bottom:20%;width:17%;aspect-ratio:1;border:1px solid #7899b24d;border-radius:50%;padding:8px;background:#e7eff8}
.meter-flow svg{display:block;width:100%;height:100%;fill:#3d75ab;stroke:none}
.meter-rotor{transform-origin:30px 30px;animation:spin 5s linear infinite;animation-play-state:paused}
.meter-face-caption{position:absolute;bottom:9%;left:0;right:0;text-align:center;font-size:6px;letter-spacing:1.2px;color:#6a87a3}
.meter-screw{position:absolute;width:3%;height:3%;border-radius:50%;background:linear-gradient(135deg,#eff7ff,#7d9ab6);border:1px solid #6b89a5;z-index:2}
.meter-screw:after{content:'';position:absolute;inset:48% 15%;height:1px;background:#6e8ba7;transform:rotate(-35deg)}
.screw-one{left:9%;top:22%}.screw-two{right:9%;bottom:22%}
.meter-pointer-label{position:absolute;bottom:1%;right:0;font-size:9px;letter-spacing:1.1px;color:#587c9f;display:flex;align-items:center;gap:12px}
.meter-pointer-label i{width:36px;height:1px;background:#8cabc6;order:-1}
.leak-visual figcaption{text-align:center;margin-top:26px}
.meter-state{display:flex;align-items:center;justify-content:center;gap:9px;font-size:14px;color:#315777}
.meter-state>i{width:6px;height:6px;border-radius:50%;background:#5c8bbb;box-shadow:0 0 0 5px #8caedb1c}
.leak-visual figcaption p{font-size:13px;line-height:1.7;color:#69829e;margin:12px 0 0}
.leak-access-note{max-width:340px;margin:26px auto 0;text-align:center;font-size:12px;line-height:1.75;color:#647e99}
.meter-running:not([data-answer=no]) .meter-roll,.meter-running:not([data-answer=no]) .meter-needle,.meter-running:not([data-answer=no]) .meter-rotor{animation-play-state:running}
.leak-check[data-answer=no] .meter-state>i{background:#8193a7;box-shadow:none}
@keyframes meter-digits{to{transform:translateY(-90.90909%)}}
@media(min-width:1600px){.leak-visual{padding-top:35px}.leak-panel{min-height:230px}}
@media(max-width:1100px){.leak-layout{gap:5vw;grid-template-columns:1.15fr 1fr}.leak-intro{font-size:16px}.leak-panel h3,.leak-result h3{font-size:22px}.leak-steps button{font-size:14px;gap:8px}.meter-flow{padding:5px}.leak-result{padding:22px}}
@media(max-width:800px){.leak-layout{grid-template-columns:1fr;gap:45px}.leak-check h2{font-size:clamp(42px,7.5vw,60px)}.leak-content{max-width:600px;width:100%;margin:auto}.leak-visual{width:min(480px,100%);margin:auto;padding-top:0}.leak-panel{min-height:0}.meter-brand{font-size:22px}.meter-counter>span{font-size:26px}.leak-steps button{font-size:15px}.leak-result{margin-top:25px}}
@media(max-width:520px){.leak-check h2{font-size:11vw}.leak-intro{font-size:16px;margin:24px 0}.leak-steps{margin-bottom:25px}.leak-steps button{font-size:12px;gap:6px;padding-right:4px}.leak-step-number{width:24px;height:24px;font-size:9px}.leak-panel h3,.leak-result h3{font-size:22px}.leak-panel p,.leak-result p,.leak-result li{font-size:15px}.leak-next{font-size:13px;gap:15px;padding-left:17px}.leak-answers button{flex:1;min-width:0;font-size:17px;padding:15px;gap:15px}.leak-result{padding:20px}.leak-result .text-link{font-size:13px}.meter-brand{font-size:17px;top:13%}.meter-counter>span{font-size:18px}.meter-face-caption{font-size:4.5px;letter-spacing:.8px}.meter-unit{font-size:8px}.meter-flow{padding:4px}.meter-pointer-label{font-size:7px;letter-spacing:.7px}.meter-state{font-size:13px}.leak-access-note{font-size:11px}.meter-brand small{font-size:5px}.leak-layout{gap:35px}}
@media(prefers-reduced-motion:reduce){.meter-roll,.meter-needle,.meter-rotor{animation:none!important}.leak-result{animation:none}}
@media(max-width:1100px){.meter-counter{--digit-height:28px}}
@media(max-width:800px){.meter-counter{--digit-height:34px}}
@media(max-width:520px){.meter-counter{--digit-height:24px}}