/* Slowwater: mist green and moss, one large pebble. */
body { --bg: #d6e4dc; --fg: #2b4037; --display: Marcellus, serif; --body: Mulish, system-ui, sans-serif; --strip-bg: #d6e4dc; --strip-fg: #2b4037; --why-bg: #c6d8cf; }
.buy { background: #2b4037; border: 0; border-radius: 999px; color: #e6efe9; padding: 0.7rem 1.5rem; }
.ctl { background: none; border: 1px solid #2b4037; border-radius: 999px; color: inherit; padding: 0.6rem 1.2rem; }
.s-hero { background: radial-gradient(90% 70% at 70% 30%, #efe5ee 0%, transparent 70%), #d6e4dc; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; height: calc(100svh - 1.8rem); justify-items: center; min-height: 40rem; overflow: clip; padding: 0.5rem var(--gutter) 1rem; text-align: center; }
.s-top { display: flex; justify-content: space-between; width: 100%; }
.shopname { font-family: Marcellus, serif; font-size: 1.4rem; }
.cartline { font-size: 0.85rem; }
.s-hero h1 { font-family: Marcellus, serif; font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; margin: 0.25rem 0 1rem; max-width: 28ch; }
.s-pebble { animation: breathe 22s cubic-bezier(0.23, 1, 0.32, 1) infinite alternate; border-radius: 47% 53% 44% 56% / 55% 44% 56% 45%; height: 100%; max-width: 90vw; min-height: 0; overflow: hidden; position: relative; aspect-ratio: 1; }
@keyframes breathe { to { border-radius: 56% 44% 54% 46% / 44% 57% 43% 56%; } }
.s-line { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: center; padding-block-start: 1rem; }
.s-name { font-family: Marcellus, serif; font-size: 1.5rem; margin: 0; }
.s-price { font-size: 1.1rem; margin: 0; }
.s-ctl { display: flex; gap: 0.4rem; }
.s-still { align-items: center; display: grid; gap: 1.5rem; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr); padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 8vw, 7rem) var(--gutter); }
.s-still h2 { font-family: Marcellus, serif; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 400; line-height: 1.05; margin: 0 0 0.5rem; }
.s-still .gs-slide { border-radius: 36px; overflow: hidden; }
.s-still .row-demo { --gap: 18px; min-width: 0; }
.why { border-radius: 50px 50px 0 0; }
@media (max-width: 760px) { .s-hero { height: auto; } .s-pebble { height: auto; width: 100%; } .s-still { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .s-pebble { animation: none; } }
.s-hero { height: auto; min-height: calc(100svh - 1.8rem); }
.s-pebble { --sq: min(100svh - 15rem, 80vw); border-radius: 26% 22% 28% 24% / 24% 28% 22% 26%; height: var(--sq); width: var(--sq); }
@keyframes breathe { to { border-radius: 22% 28% 24% 26% / 28% 22% 26% 24%; } }
@media (max-width: 760px) { .s-pebble { height: auto; width: 100%; } }