/* v206: a calm personal pause, with theme-aware surfaces and blue water. */
html body .water-card{display:flex;align-items:center;gap:28px;padding:26px 30px;margin-top:14px;min-width:0;background:var(--card);color:var(--ink);border-radius:24px}
html body .water-visual{display:grid;place-items:center;flex:0 0 100px;padding:12px 0}
html body .water-copy{flex:1;min-width:0}
html body .water-eyebrow{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);line-height:1.5}
html body .water-copy h3{margin:6px 0 8px;font-size:23px;font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
html body .water-copy p{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--muted)}
html body .water-summary{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--muted)}
html body .water-summary b{color:var(--ink);font-weight:600}
html body .water-copy small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:6px}
html body .water-actions{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
html body .water-actions .btn{min-height:42px;font-size:12px;white-space:normal}
html body .water-dialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(700px,calc(100% - 32px));max-width:none;max-height:calc(var(--ds-vh,100dvh) - 32px);padding:34px 46px 26px;border:1px solid var(--line);border-radius:30px;background:var(--card);color:var(--ink);box-shadow:0 24px 80px #0005;text-align:center;overflow-y:auto;overscroll-behavior:contain;font-family:inherit}
html body .water-dialog::backdrop{background:rgba(12,20,18,.55);backdrop-filter:blur(5px)}
html body .water-dialog-visual{display:flex;justify-content:center;padding:0 0 20px}
html body .water-dialog h2{font-family:inherit;font-size:clamp(30px,5vw,46px);line-height:1.15;letter-spacing:-.035em;font-weight:650;margin:10px 0;color:var(--ink);overflow-wrap:anywhere}
html body .water-dialog .water-intro{font-size:17px;line-height:1.5;margin:0 0 20px;color:var(--muted)}
html body .water-quote{font-size:clamp(17px,2.2vw,22px);line-height:1.5;font-weight:500;margin:0 auto 24px;max-width:520px;color:var(--ink)}
html body .water-bottle{padding:18px;background:var(--soft);border:1px solid var(--line);border-radius:18px;text-align:left}
html body .water-bottle strong{display:block;font-size:16px;line-height:1.4;color:var(--ink)}
html body .water-bottle span{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.5}
html body .water-dialog-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px}
html body .water-dialog-actions .btn{min-height:46px;white-space:normal;font-size:13px}
html body .water-dialog-note{display:block;margin-top:16px;font-size:11px;line-height:1.5;color:var(--muted)}
html body .water-close{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FFF;border:1px solid #D5DED8;color:#19251E;font-size:26px;line-height:1;cursor:pointer;padding:0}
html body .water-close:hover{background:#EAF0EC}
html body .water-close:focus-visible{outline:3px solid #82B594;outline-offset:3px}
@media(max-width:650px){
 html body .water-card{display:grid;grid-template-columns:65px minmax(0,1fr);padding:20px;gap:16px}
 html body .water-visual{padding:0}
 html body .water-copy h3{font-size:20px}
 html body .water-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
 html body .water-actions .btn{flex:1}
 html body .water-dialog{width:calc(100% - 20px);max-height:calc(var(--ds-vh,100dvh) - 20px);padding:24px 20px;border-radius:24px}
 html body .water-dialog-visual{padding-bottom:16px}
 html body .water-dialog-actions{flex-direction:column;margin-top:18px}
 html body .water-dialog .water-intro{font-size:15px}
}
@media(max-height:550px){
 html body .water-dialog{padding-top:24px}
 html body .water-dialog-visual{display:none}
 html body .water-dialog .water-intro,html body .water-quote{margin-bottom:12px}
 html body .water-dialog h2{font-size:28px}
 html body .water-dialog .water-eyebrow{padding:0 30px}
}
/* v207: a reusable glass bottle with a dimensional cap and moving liquid.
   Only transforms/opacity animate. No canvas, image downloads or animation timers. */
html body .water-bottle-art{display:block;width:116px;height:auto;max-width:100%;overflow:visible;flex-shrink:0}
html body .water-visual{flex-basis:126px;min-width:0;padding:0}
html body .water-dialog-visual{padding-bottom:10px}
html body .water-dialog-visual .water-bottle-art{width:116px;height:188px}
html body .water-wave{animation:water-surface-flow 6s linear infinite;animation-play-state:paused}
html body .water-wave-back{animation-duration:8s;animation-direction:reverse}
html body .water-air{animation:water-air-rise 7s ease-in infinite;animation-play-state:paused;opacity:0}
html body .water-air-two{animation-delay:-3s;animation-duration:9s}
html body .water-air-three{animation-delay:-5s;animation-duration:11s}
html body .water-caustic{animation:water-light-shift 7s ease-in-out infinite alternate;animation-play-state:paused}
html body .water-in-view :is(.water-wave,.water-air,.water-caustic){animation-play-state:running}
html[data-water-motion=paused] body .water-bottle-art :is(.water-wave,.water-air,.water-caustic){animation-play-state:paused}
@keyframes water-surface-flow{from{transform:translateX(0)}to{transform:translateX(-160px)}}
@keyframes water-air-rise{0%{transform:translate(0,0);opacity:0}15%{opacity:.55}80%{opacity:.35}100%{transform:translate(3px,calc(-1 * var(--water-rise)));opacity:0}}
@keyframes water-light-shift{from{transform:translateX(-5px);opacity:.35}to{transform:translateX(5px);opacity:.8}}
@media(max-width:650px){
 html body .water-card{grid-template-columns:70px minmax(0,1fr)}
 html body .water-visual .water-bottle-art{width:70px}
 html body .water-dialog-visual .water-bottle-art{width:86px;height:140px}
}
@media(max-height:550px){html body .water-dialog-visual{display:none}}
@media(prefers-reduced-motion:reduce){
 html body .water-bottle-art :is(.water-wave,.water-air,.water-caustic){animation:none!important}
 html body .water-air{opacity:.25}
}