/* A little coffee ritual, from an empty cup to a shared good idea. */
.teal .how .steps{gap:40px;margin-top:56px;max-width:1200px}
.teal .how .steps::before{display:block;top:145px;left:12%;right:12%;height:70px;border:2px dashed #9eb59a;transform:rotate(-4deg);opacity:.65}
.teal .how .steps article{position:relative;padding:30px 26px 34px;border-radius:40px 30px 46px 28px;background:#fbf3df;border-color:#e4d8b9;box-shadow:0 9px 0 #e7dfc24d;overflow:visible}
.teal .how .steps article:nth-child(2){background:#edf3e5;border-color:#d2dfc4;margin-top:24px;border-radius:30px 46px 28px 40px;box-shadow:0 9px 0 #d0dfbd4d}
.teal .how .steps article:nth-child(3){background:#e8f3ef;border-color:#c6dfd5;box-shadow:0 9px 0 #c4ddd44d}
.teal .how .steps article:not(:last-child)::after{content:'↝';position:absolute;z-index:2;right:-38px;top:145px;color:#608778;font-size:42px;line-height:1;rotate:-12deg;font-family:Georgia,serif}
.teal .how .step-num{font-size:17px;letter-spacing:.08em;color:#6e8269;display:inline-flex;align-items:center;justify-content:center;width:42px;height:34px;border:1px solid #a2b09966;border-radius:50%;background:#fff8;rotate:-8deg}
.teal .how .step-visual.brew-visual{display:block;height:190px;width:210px;max-width:100%;margin:-12px auto 10px;background:none;border:0;box-shadow:none;transform:none;rotate:0;border-radius:0;transition:transform .4s}
.brew-visual>svg{display:block;height:100%;width:100%;overflow:visible}
.teal .how .steps article:hover .brew-visual{rotate:0;transform:translateY(-4px)}
.teal .how .steps h3{font-size:26px;line-height:1.3;margin:10px auto 14px;max-width:290px}
.teal .how .steps p{font-size:19px;line-height:1.7;max-width:310px}
.brew-jug{transform-origin:100px 57px;animation:brew-pour 5s ease-in-out infinite}
.brew-milk-stream{stroke-dasharray:3 3;animation:brew-milk .9s linear infinite}
.brew-steam path{animation:brew-steam 3.5s ease-in-out infinite}
.brew-steam path:nth-child(2){animation-delay:-1.2s}.brew-steam path:nth-child(3){animation-delay:-2.3s}
.brew-twinkle{transform-origin:110px 80px;animation:brew-sparkle 4s ease-in-out infinite}
.brew-splash{animation:brew-sparkle 1.6s ease-in-out infinite}
@keyframes brew-pour{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-4deg)}}
@keyframes brew-milk{to{stroke-dashoffset:-12}}
@keyframes brew-steam{0%,100%{opacity:.2;transform:translateY(3px)}50%{opacity:.8;transform:translateY(-5px)}}
@keyframes brew-sparkle{0%,100%{opacity:.5;transform:scale(.93)}50%{opacity:1;transform:scale(1.05)}}
@media(max-width:980px) and (min-width:701px){.teal .how .steps{gap:22px}.teal .how .steps article{padding:24px 18px}.teal .how .steps article:not(:last-child)::after{right:-23px;font-size:29px}.teal .how .step-visual.brew-visual{width:180px;height:164px}.teal .how .steps h3{font-size:23px}.teal .how .steps p{font-size:18px}}
@media(max-width:700px){.teal .how .steps{display:grid;grid-template-columns:1fr;gap:34px;max-width:460px;margin-top:36px}.teal .how .steps::before{display:none}.teal .how .steps article,.teal .how .steps article:nth-child(2){display:block;text-align:center;width:100%;margin:0;padding:24px 24px 30px}.teal .how .step-num{position:absolute;left:22px;top:22px}.teal .how .step-visual.brew-visual{width:200px;height:182px;margin:0 auto 8px}.teal .how .steps h3{font-size:26px;margin:8px auto 12px}.teal .how .steps p{font-size:19px;max-width:340px}.teal .how .steps article:not(:last-child)::after{content:'↓';top:auto;bottom:-34px;left:calc(50% - 14px);right:auto;font-size:30px;rotate:0}}
@media(prefers-reduced-motion:reduce){.brew-jug,.brew-milk-stream,.brew-steam path,.brew-twinkle,.brew-splash{animation:none}.teal .how .steps article:hover .brew-visual{transform:none}}