.problem-demo{width:100%;max-width:570px;margin:0 auto;min-width:0;padding:23px 24px 17px;background:#eeefe5;border:1px solid #ced6c6;border-radius:5px;color:var(--ink,#172f35);box-shadow:0 12px 34px #18372c06}
.problem-demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:8px}
.problem-eyebrow{font-size:9px!important;letter-spacing:.15em;line-height:1.6;color:var(--teal,#315e59);max-width:240px}
.problem-pause{padding:8px 0 8px 12px;min-height:44px;border:0;background:none;color:var(--muted,#536560);font-size:10px;line-height:1.5;text-decoration:underline;text-underline-offset:4px;flex:none}
.problem-pause[hidden]{display:none!important}
.problem-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:relative;margin:0;padding:0;min-width:0;border:0}
.problem-controls legend{width:100%;padding:0 0 19px;font-size:29px;font-weight:500;line-height:1.15;letter-spacing:-.035em}
.problem-radio{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.problem-choice{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:9px 7px;border:1px solid #bcc9b6;border-radius:3px;background:#f8f7ee;cursor:pointer;font-size:12px;line-height:1.35;color:#546b60;transition:background .18s,border-color .18s,color .18s}
.problem-choice-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
.problem-radio:checked+.problem-choice{background:#244a46;border-color:#244a46;color:#fffdf2}
.problem-radio:checked+.problem-choice .problem-choice-dot{opacity:1;background:#c3d1a9}
.problem-radio:focus-visible+.problem-choice{outline:3px solid var(--copper,#965436);outline-offset:3px}
.problem-choice:hover{border-color:#54796a}
.problem-stage{grid-column:1/-1;min-width:0;margin-top:17px}
.problem-panel{display:none;min-width:0}
#problem-scenario-leak:checked~.problem-stage .problem-panel-leak,#problem-scenario-drain:checked~.problem-stage .problem-panel-drain,#problem-scenario-plumbing:checked~.problem-stage .problem-panel-plumbing{display:block}
.problem-scene{width:100%;aspect-ratio:26/17;background:#e8ecdf;border:1px solid #d4dccb;border-radius:240px 240px 4px 4px;overflow:hidden}
.problem-art{display:block;width:100%;height:100%;max-width:100%}
.problem-panel-copy{min-height:184px;padding-top:19px}
.problem-panel-copy h2{margin:0 0 10px;font-size:22px;line-height:1.2;letter-spacing:-.03em}
.problem-panel-copy>p{font-size:12px;line-height:1.75;margin:0;min-height:64px;max-width:none;color:var(--muted,#536560)}
.problem-links{display:flex;justify-content:space-between;align-items:center;gap:9px 18px;flex-wrap:wrap;margin-top:13px}
.problem-service-link,.problem-guide-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;line-height:1.4;text-decoration:none}
.problem-service-link{font-size:12px;font-weight:600;color:#254e46}
.problem-service-link>span{font-size:18px;font-weight:400}
.problem-guide-link{font-size:10px;color:#5a6e60;text-decoration:underline;text-underline-offset:4px}
.problem-service-link:hover{text-decoration:underline;text-underline-offset:4px}
.problem-demo-note{margin:0!important;padding-top:12px;border-top:1px solid #ced6c6;font-size:9px!important;color:#657460;letter-spacing:.015em;line-height:1.5}
.problem-drop{transform-box:fill-box;transform-origin:center;animation:problem-drip 1.9s ease-in infinite}
.problem-drop-two{animation-delay:.95s}
.problem-flow{animation:problem-flow 1.8s linear infinite}
.problem-flow-slow{animation-duration:4.8s}
.problem-halo{animation:problem-focus 3.2s ease-in-out infinite}
.problem-ripple{transform-box:fill-box;transform-origin:center;animation:problem-ripple 1.9s ease-out infinite}
.problem-waterline{animation:problem-water 2.6s ease-in-out infinite;transform-origin:center}
.problem-rise{animation:problem-focus 2.6s ease-in-out infinite}
.problem-demo[data-motion="paused"] *{animation-play-state:paused!important}
@keyframes problem-drip{0%,12%{transform:translateY(0) scale(.8);opacity:.65}24%{opacity:.9;transform:translateY(0) scale(1)}78%{opacity:.75}100%{transform:translateY(85px) scale(.85);opacity:0}}
@keyframes problem-flow{to{stroke-dashoffset:-38}}
@keyframes problem-focus{0%,100%{opacity:.32}50%{opacity:.75}}
@keyframes problem-ripple{0%,38%{transform:scale(.4);opacity:0}55%{opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes problem-water{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(2px);opacity:.9}}
@media(max-width:1000px){.problem-demo{padding:19px 18px 16px}.problem-demo-top{align-items:flex-start;gap:8px}.problem-eyebrow{font-size:8px!important;letter-spacing:.11em;max-width:190px}.problem-controls legend{font-size:26px}.problem-choice{font-size:11px;gap:6px}.problem-panel-copy h2{font-size:21px}.problem-panel-copy{min-height:205px}.problem-links{gap:0 13px}.problem-service-link{font-size:11px}.problem-guide-link{font-size:10px}.problem-pause{font-size:9px;padding-left:4px}}
@media(max-width:760px){.problem-demo{max-width:520px;padding:20px 20px 15px}.problem-demo-top{align-items:center}.problem-eyebrow{font-size:8px!important;max-width:200px}.problem-controls legend{font-size:27px;padding-bottom:18px}.problem-panel-copy{min-height:184px;padding-top:16px}.problem-panel-copy>p{font-size:12px;min-height:64px}.problem-panel-copy h2{font-size:22px}.problem-stage{margin-top:15px}.problem-choice{font-size:11px;min-height:46px}.problem-links{margin-top:10px}.problem-service-link{font-size:11px}.problem-scene{border-radius:200px 200px 4px 4px}}
@media(max-width:375px){.problem-demo{padding:17px 15px 14px}.problem-demo-top{min-height:40px;gap:8px}.problem-eyebrow{max-width:135px;font-size:7px!important}.problem-pause{font-size:8px;max-width:95px}.problem-controls{gap:6px}.problem-controls legend{font-size:25px;padding-bottom:16px}.problem-choice{font-size:10px;padding-inline:4px;gap:5px}.problem-panel-copy{min-height:219px}.problem-panel-copy h2{font-size:20px}.problem-panel-copy>p{font-size:11px;min-height:84px}.problem-links{gap:0 10px}.problem-service-link{font-size:10px}.problem-guide-link{font-size:9px}.problem-demo-note{font-size:8px!important}}
@media(prefers-reduced-motion:reduce){.problem-demo *,.problem-demo *:before,.problem-demo *:after{animation:none!important;transition:none!important}.problem-drop{opacity:.8}.problem-ripple{opacity:.5}.problem-halo{opacity:.45}.problem-pause{display:none!important}}
@media print{.problem-demo{display:none!important}}