/* Why HydroCrew only. Native image geometry and hotspot coordinates share one reference box. */
[data-why-guide]{--why-blue:var(--hc-page-blue);--why-navy:var(--hc-page-navy);--why-white:var(--hc-page-white);--why-muted:var(--hc-page-muted);--why-line:var(--hc-page-border);--why-sky:var(--hc-page-sky);--why-overlay:#062b7280;--why-connector:72px;--why-flow-x:112%;--why-flow-y:7%;--why-chloramine-x:112%;--why-chloramine-y:30%;--why-carbon-x:112%;--why-carbon-y:46%;--why-resin-x:112%;--why-resin-y:64%;--why-sizing-x:112%;--why-sizing-y:81%}
.hc-buying-guide{padding:64px 0 58px;background:var(--why-white);color:var(--why-navy)}
.why-guide__intro{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.why-guide__copy h2{font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.1;letter-spacing:-.035em;max-width:640px;margin:14px 0 24px;font-weight:800}
.why-guide__copy h2 span{color:var(--why-blue)}
.why-guide__support{font-size:19px;line-height:1.65;max-width:620px;color:var(--why-muted)}
.why-guide__promises{list-style:none;padding:0;margin:28px 0;display:grid;gap:16px;font-weight:650}
.why-guide__promises li{display:flex;align-items:center;gap:14px}
.why-guide__icon{display:inline-flex;flex:none;color:var(--why-blue);width:36px;height:36px}
.why-guide__icon svg{width:100%;height:100%;stroke-width:1.7}
.why-guide__hint{font-size:14px;color:var(--why-muted)}
.why-guide__equipment{display:grid;place-items:center;isolation:isolate;position:relative;min-width:0}
.why-guide__equipment::before{content:"";position:absolute;width:486px;height:486px;max-width:none;border-radius:50%;background:var(--why-sky);z-index:-1}
.why-guide__tank{position:relative;margin:0;width:223px;max-width:100%}
.why-guide__tank>img{display:block;width:100%;height:auto;object-fit:contain}
.why-guide__hotspot{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;color:var(--why-white);background:transparent;cursor:pointer;padding:0}
/* The visual circle pulses; its 44px hit target and connector never move. */
.why-guide__hotspot>span{position:absolute;inset:0;border:3px solid var(--why-white);border-radius:50%;background:var(--why-blue);box-shadow:var(--hc-page-shadow);font-size:0;animation:why-hotspot-pulse 10s ease-in-out infinite;animation-delay:var(--why-pulse-delay,0s);pointer-events:none}
.why-guide__hotspot>span::before,.why-guide__hotspot>span::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
.why-guide__hotspot>span::after{transform:translate(-50%,-50%) rotate(90deg)}
.why-guide__hotspot--chloramine{--why-pulse-delay:2s}.why-guide__hotspot--carbon{--why-pulse-delay:4s}.why-guide__hotspot--resin{--why-pulse-delay:6s}.why-guide__hotspot--sizing{--why-pulse-delay:8s}
@keyframes why-hotspot-pulse{0%,2%,10%,100%{transform:scale(1)}6%{transform:scale(1.12)}}
[data-why-guide]:has(.why-guide__hotspot:focus) .why-guide__hotspot>span,[data-why-guide]:has(:focus-visible) .why-guide__hotspot>span,[data-why-guide]:has(dialog[open]) .why-guide__hotspot>span{animation:none}
@media(prefers-reduced-motion:reduce){.why-guide__hotspot>span{animation:none}}
.why-guide__hotspot::before{content:"";position:absolute;right:calc(100% + 1px);top:50%;width:var(--why-connector);height:1px;background:var(--why-blue);pointer-events:none}
.why-guide__hotspot--flow{left:var(--why-flow-x);top:var(--why-flow-y)}
.why-guide__hotspot--chloramine{left:var(--why-chloramine-x);top:var(--why-chloramine-y)}
.why-guide__hotspot--carbon{left:var(--why-carbon-x);top:var(--why-carbon-y)}
.why-guide__hotspot--resin{left:var(--why-resin-x);top:var(--why-resin-y)}
.why-guide__hotspot--sizing{left:var(--why-sizing-x);top:var(--why-sizing-y)}
.why-guide__cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:48px}
.why-guide__card{display:flex;flex-direction:column;align-items:flex-start;gap:20px;border:1px solid var(--why-line);border-radius:14px;background:var(--why-white);color:var(--why-navy);padding:27px 20px;text-align:left;font:inherit;cursor:pointer;position:relative;min-width:0}
.why-guide__card:hover{background:var(--why-sky)}
.why-guide__card strong{display:block;font-size:18px;line-height:1.3;font-weight:750}
.why-guide__question{display:block;color:var(--why-muted);font-size:15px;line-height:1.5;margin-top:12px}
.why-guide__card-plus{position:absolute;right:15px;top:18px;color:var(--why-blue);font-size:24px}
.why-guide__sizing{padding:56px 0;background:var(--why-navy);color:var(--why-white);text-align:center}
.why-guide__sizing h2,.why-guide__difference h2,.why-guide__closing h2{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;font-weight:800;letter-spacing:-.025em;margin:0 0 20px}
.why-guide__sizing>.hc-section>p{max-width:740px;margin:0 auto 24px;font-size:17px;line-height:1.6}
.why-guide__sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:850px;margin:28px auto}
.why-guide__sizes>div{display:grid;gap:8px;border:1px solid var(--why-blue);border-radius:12px;padding:22px 12px}
.why-guide__sizes strong{font-size:18px}.why-guide__sizes span{font-size:17px}
.why-guide__custom{font-size:14px!important;line-height:1.6}
.why-guide__difference{padding-top:42px;padding-bottom:24px;text-align:center;color:var(--why-navy)}
.why-guide__difference>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:26px}
.why-guide__difference article{display:grid;justify-items:center;align-content:start;gap:13px}.why-guide__difference h3{font-size:19px;font-weight:750;line-height:1.4;margin:0}.why-guide__difference p{font-size:15px;line-height:1.7;color:var(--why-muted);margin:0;max-width:330px}
.why-guide__closing{padding-top:24px;padding-bottom:44px;text-align:center;color:var(--why-navy)}
.why-guide__closing h2{max-width:790px;margin:0 auto 22px}.why-guide__closing p{max-width:720px;margin:0 auto 26px;font-size:17px;line-height:1.7;color:var(--why-muted)}
.why-guide__dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(640px,calc(100vw - 32px));border:0;border-radius:18px;padding:40px;max-width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;color:var(--why-navy);background:var(--why-white);box-shadow:var(--hc-page-shadow)}
.why-guide__dialog::backdrop{background:var(--why-overlay)}
.why-guide__dialog h2{font-size:28px;font-weight:800;line-height:1.2;margin:20px 0}.why-guide__dialog p{font-size:16px;line-height:1.8;margin:16px 0}.why-guide__ask{background:var(--why-sky);border-radius:10px;padding:18px;font-weight:600}
.why-guide__dialog form{position:sticky;top:0;z-index:1;background:var(--why-white);display:flex;justify-content:flex-end;margin:0}.why-guide__close{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:50%;background:var(--why-sky);color:var(--why-navy);cursor:pointer}.why-guide__close svg{width:24px;height:24px}
[data-why-guide] :is(.why-guide__hotspot,.why-guide__card,.why-guide__close):focus-visible{outline:3px solid var(--why-navy);outline-offset:4px}
@media(max-width:860px){.why-guide__intro{gap:24px;grid-template-columns:1.2fr 1fr}.why-guide__cards{grid-template-columns:repeat(3,minmax(0,1fr))}.why-guide__difference>div{gap:20px}}
@media(max-width:560px){.hc-buying-guide{padding:38px 0}.why-guide__intro{grid-template-columns:1fr;gap:18px;text-align:center}.why-guide__copy h2{font-size:30px;margin:12px 0 20px}.why-guide__support{font-size:16px;line-height:1.65}.why-guide__promises{justify-items:start;text-align:left;font-size:14px;gap:12px;margin:24px 0}.why-guide__promises .why-guide__icon{width:28px;height:28px}.why-guide__tank{width:190px;--why-connector:48px;--why-flow-x:112%;--why-chloramine-x:112%;--why-carbon-x:112%;--why-resin-x:112%;--why-sizing-x:112%}.why-guide__equipment::before{width:340px;height:340px}.why-guide__hint{font-size:13px}.why-guide__cards{grid-template-columns:1fr;gap:10px;margin-top:28px}.why-guide__card{flex-direction:row;align-items:center;gap:15px;padding:17px 40px 17px 16px}.why-guide__card .why-guide__icon{width:30px;height:30px}.why-guide__card strong{font-size:16px}.why-guide__question{font-size:13px;margin-top:4px}.why-guide__card-plus{top:50%;transform:translateY(-50%);right:14px}.why-guide__sizing{padding:36px 0}.why-guide__sizes{gap:8px}.why-guide__sizes>div{padding:16px 8px}.why-guide__sizes strong{font-size:13px}.why-guide__sizes span{font-size:13px}.why-guide__difference{padding-top:28px;padding-bottom:18px}.why-guide__difference>div{grid-template-columns:1fr;gap:20px;margin-top:22px}.why-guide__difference article{grid-template-columns:36px 1fr;justify-items:start;gap:4px 15px;text-align:left}.why-guide__difference article>.why-guide__icon{grid-row:span 2}.why-guide__difference h3{font-size:17px}.why-guide__difference p{font-size:14px}.why-guide__closing{padding-top:18px;padding-bottom:32px}.why-guide__closing p{font-size:16px}.why-guide__dialog{padding:22px}.why-guide__dialog h2{font-size:24px}}

.why-guide__topic-difference{margin-top:24px;padding:20px;border-radius:10px;background:var(--why-sky)}
.why-guide__topic-difference h3{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.4;font-weight:750;margin:0}
.why-guide__topic-difference h3 span{display:flex;flex:none;width:24px;height:24px;color:var(--why-blue)}
.why-guide__topic-difference svg{width:100%;height:100%;stroke-width:1.7}
.why-guide__topic-difference p{margin:12px 0 0;font-size:15px;line-height:1.7}