/* Water You Don't See
   Mobile-first visual system. Chapter styles are followed by interaction and
   responsive refinements. The refinement order is intentional because later
   rules protect tested mobile/Safari behavior. */

* {
  box-sizing: border-box;
}
:root {
  --paper: #f4efe7;
  --ink: #0d0d0d;
  --blue: #1769ff;
  --water: #248cff;
  --lime: #c9ff38;
  --pink: #ffd4df;
  --line: rgba(13, 13, 13, 0.18);

  /* Scroll distance allocated to each automatic savings beat. */
  --saving-beat-scroll: 165svh;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
html.interaction-locked,
body.interaction-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
body.interaction-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}
button {
  font: inherit;
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.12;
  background:
    repeating-radial-gradient(
      circle at 0 0,
      rgba(0, 0, 0, 0.18) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.8),
      transparent 25%
    );
  mix-blend-mode: multiply;
}
.story-experience {
  position: relative;
}
.chapter {
  position: relative;
  height: 300svh;
}
.chapter-result,
.chapter-glasses,
.chapter-money {
  height: 260svh;
}
.chapter-actions {
  height: 330svh;
}
.chapter-end {
  height: 120svh;
}
.sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  padding: 18px;
}
.tiny-label {
  position: absolute;
  z-index: 30;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.top-left {
  top: 16px;
  left: 18px;
}

.text-on-dark {
  color: #fff;
}

h2 {
  margin: 0;
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: clamp(42px, 13vw, 66px);
  line-height: 0.88;
  letter-spacing: -0.055em;
}
p {
  margin: 0;
}
@media (min-width: 700px) {
  body:before {
    content: "Mobile-first experience. Resize the browser to about 390 px wide.";
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    background: white;
    border: 1px solid var(--line);
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }
  .story-experience {
    max-width: 430px;
    margin: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
}


/* --------------------------------------------------------------------------
   Opening title / loading sequence
   -------------------------------------------------------------------------- */
.story-loader {
  position: fixed;
  z-index: 5000;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(rgba(13,13,13,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,13,13,.035) 1px, transparent 1px),
    #f4efe7;
  background-size: auto, 39px 39px, 39px 39px, auto;
  color: var(--ink);
  isolation: isolate;
  touch-action: none;
}
.story-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .17;
  background-image: repeating-linear-gradient(155deg, rgba(13,13,13,.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
}
.story-loader-water {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background:
    radial-gradient(circle at 50% 112%, rgba(255,255,255,.15), transparent 34%),
    linear-gradient(180deg, #7dd6ff 0%, #2d8fff 54%, #1769ff 100%);
  will-change: height;
}
.story-loader-water::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -12px;
  width: 116%;
  height: 24px;
  border-radius: 50%;
  background: #7dd6ff;
  box-shadow: 0 -7px 20px rgba(23,105,255,.12);
  transform-origin: center;
  animation: story-loader-wave 1.45s ease-in-out infinite alternate;
}
@keyframes story-loader-wave {
  from { transform: translateX(-1.5%) scaleY(.72) rotate(-.6deg); }
  to { transform: translateX(1.5%) scaleY(1.08) rotate(.6deg); }
}
.story-loader-copy {
  position: absolute;
  z-index: 3;
  left: 28px;
  right: 28px;
  top: max(74px, calc(env(safe-area-inset-top) + 52px));
  will-change: transform, opacity, color;
}
.story-loader-kicker {
  display: block;
  margin-bottom: 18px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .16em;
}
.story-loader h1 {
  margin: 0;
  max-width: 340px;
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: clamp(52px, 15vw, 72px);
  line-height: .84;
  letter-spacing: -.065em;
}
.story-loader p {
  max-width: 270px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.42;
  font-weight: 650;
}
.story-loader-status {
  position: absolute;
  z-index: 3;
  left: 28px;
  right: 28px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1.5px solid currentColor;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .13em;
  will-change: color, transform, opacity;
}
.story-loader-status strong {
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: 18px;
  line-height: .8;
  letter-spacing: -.04em;
}
.story-loader.is-complete .story-loader-water::before {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .story-loader-water::before { animation: none; }
}

/* --------------------------------------------------------------------------
   Shower chapter
   -------------------------------------------------------------------------- */
.chapter-shower {
  height: 138svh;
}
.shower-room {
  --shower-paper: #f5f1e9;
  --shower-metal: #eceae5;
  --shower-blue: #287fff;
  --shower-red: #ff4a34;
  background:
    radial-gradient(
      circle at 22% 10%,
      rgba(255, 255, 255, 0.9),
      transparent 30%
    ),
    linear-gradient(rgba(13, 13, 13, 0.044) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.044) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.012) 0 2px,
      transparent 2px 6px
    ),
    var(--shower-paper);
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.shower-room:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0 72%,
    rgba(13, 13, 13, 0.025) 100%
  );
  z-index: 1;
}


/* Simple overhead shower: one head + one riser. */
.shower-fixture {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 35px;
  height: 455px;
  pointer-events: none;
}
.shower-fixture-svg {
  position: absolute;
  left: -3px;
  top: 35px;
  height: 450px;
  width: 100%;
  overflow: visible;
}
.fixture-body {
  filter: drop-shadow(7px 9px 0 rgba(13, 13, 13, 0.075));
}
.fixture-pipe-outline,
.fixture-pipe {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fixture-pipe-outline {
  stroke: var(--ink);
  stroke-width: 15px;
}
.fixture-pipe {
  stroke: var(--shower-metal);
  stroke-width: 11px;
}
.fixture-wall-plate,
.fixture-wall-bracket,
.fixture-head-neck,
.fixture-head-shell {
  fill: var(--shower-metal);
  stroke: var(--ink);
  stroke-width: 2px;
}
.fixture-wall-plate {
  fill: #d7d6cf;
}
.fixture-wall-bracket {
  fill: #e7e5df;
}
.fixture-head-shell {
  fill: #efede8;
}
.fixture-head-face {
  fill: #909699;
  stroke: var(--ink);
  stroke-width: 2.2px;
}
.fixture-head-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 5px;
  stroke-linecap: round;
}
.fixture-nozzles circle {
  fill: #414749;
}

/* Water begins immediately under the face and falls straight down. */
.shower-rain {
  position: absolute;
  left: 164px;
  top: 111px;
  width: 85px;
  height: 405px;
  overflow: visible;
}
.shower-rain .water-line {
  position: absolute;
  top: -12px;
  width: var(--drop-width, 2px);
  height: var(--length, 82px);
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(110, 194, 255, 0),
    rgba(110, 194, 255, 0.88) 22%,
    rgba(45, 143, 255, 0.96)
  );
  opacity: var(--alpha, 0.68);
  transform: none;
  transform-origin: top center;
  animation: clean-shower-fall var(--speed, 1.05s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes clean-shower-fall {
  0% {
    top: -12px;
    opacity: 0;
  }
  9% {
    opacity: var(--alpha, 0.68);
  }
  85% {
    opacity: var(--alpha, 0.68);
  }
  100% {
    top: 236px;
    opacity: 0;
  }
}

/* The interactive control bar is the mixer/control unit. The riser enters it on the right. */
.shower-console {
  position: absolute;
  z-index: 20;
  left: 12px;
  right: 12px;
  top: 530px;
  min-height: 186px;
  padding: 18px 92px 47px;
  border: 2px solid var(--ink);
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.17)
    ),
    #efebe4;
  box-shadow:
    0 12px 0 rgba(13, 13, 13, 0.05),
    0 18px 32px rgba(13, 13, 13, 0.075);
}
.console-rail {
  position: absolute;
  left: 69.25%;
  top: -18px;
  width: 25px;
  height: 18px;
  transform: translateX(-50%);
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: #efebe4;
}
.console-question {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}


.console-question h2 {
  margin: 0;
  max-width: 174px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.console-question p {
  margin-top: 7px;
  max-width: 166px;
  font-size: 8px;
  line-height: 1.32;
  color: rgba(13, 13, 13, 0.57);
  font-weight: 700;
}

.answer-dial {
  --dial-angle: 0deg;
  position: absolute;
  top: 50%;
  width: 78px;
  height: 108px;
  transform: translateY(-50%);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.flow-dial {
  left: 10px;
}
.time-dial {
  right: 10px;
}
.dial-scale {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 72px;
  height: 72px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from -130deg,
    rgba(13, 13, 13, 0.35) 0 1.2deg,
    transparent 1.2deg 16deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 64%,
    #000 65% 68%,
    transparent 69%
  );
  mask: radial-gradient(
    circle,
    transparent 0 64%,
    #000 65% 68%,
    transparent 69%
  );
  opacity: 0.62;
}
.temperature-scale:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 215deg,
    var(--shower-blue) 0 36deg,
    transparent 36deg 205deg,
    var(--shower-red) 205deg 242deg,
    transparent 242deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 60%,
    #000 61% 66%,
    transparent 67%
  );
  mask: radial-gradient(
    circle,
    transparent 0 60%,
    #000 61% 66%,
    transparent 67%
  );
  opacity: 0.95;
}
.dial-scale i {
  display: none;
}
.dial-knob {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 60px;
  height: 60px;
  transform: translateX(-50%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    #fff 0 10%,
    #f9f6f0 34%,
    #ddd8cf 100%
  );
  box-shadow:
    inset -4px -5px 10px rgba(13, 13, 13, 0.08),
    0 2px 0 rgba(13, 13, 13, 0.08);
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease;
}
.dial-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 24px;
  transform: translate(-50%, -100%) rotate(var(--dial-angle));
  transform-origin: 50% 100%;
  border-radius: 99px;
  background: rgb(13 13 13 / 40%);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dial-value {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dial-value span {
  display: block;
  margin-top: 2px;
  font-size: 6px;
  letter-spacing: 0.05em;
  font-weight: 800;
  text-transform: uppercase;
}


.answer-dial.is-active {
  cursor: grab;
}
.answer-dial.is-active:active {
  cursor: grabbing;
}
.answer-dial.is-active .dial-knob {
  box-shadow:
    0 0 0 5px rgba(45, 143, 255, 0.14),
    inset -4px -5px 10px rgba(13, 13, 13, 0.08),
    0 2px 0 rgba(13, 13, 13, 0.08);
}

.answer-dial.is-active:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 76px;
  height: 76px;
  transform: translateX(-50%);
  border: 1.5px solid var(--shower-blue);
  border-radius: 50%;
  animation: dial-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dial-pulse {
  0%,
  100% {
    opacity: 0.18;
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    opacity: 0.65;
    transform: translateX(-50%) scale(1.04);
  }
}
.answer-dial.is-inactive {
  opacity: 0.48;
  filter: grayscale(0.45);
}
.answer-dial:focus-visible .dial-knob {
  box-shadow:
    0 0 0 5px rgba(45, 143, 255, 0.23),
    inset -4px -5px 10px rgba(13, 13, 13, 0.08);
}

.shower-next {
  position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateX(-50%);
  min-width: 156px;
  height: 46px;
  padding: 0 16px 0 18px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(13, 13, 13, 0.12);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}
.shower-next i {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
}
.shower-next:active {
  transform: translateX(-50%) translateY(3px);
  box-shadow: 0 3px 0 rgba(13, 13, 13, 0.12);
}
.shower-next:focus-visible {
  outline: 3px solid rgba(45, 143, 255, 0.28);
  outline-offset: 3px;
}


@media (max-height: 700px) {
  .shower-fixture {
    top: 24px;
    transform: scale(0.91);
    transform-origin: 50% 0;
  }
  .shower-console {
    top: 49svh;
    min-height: 170px;
  }
  
}
@media (prefers-reduced-motion: reduce) {
  .shower-rain .water-line,
  .answer-dial.is-active:before {
    animation-duration: 3s;
  }
  
}

/* --------------------------------------------------------------------------
   Sink chapter
   -------------------------------------------------------------------------- */
.chapter-sink {
  height: 118svh;
}
.kitchen-room {
  background:
    radial-gradient(
      circle at 74% 12%,
      rgba(255, 255, 255, 0.82),
      transparent 28%
    ),
    linear-gradient(rgba(13, 13, 13, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.042) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.012) 0 2px,
      transparent 2px 6px
    ),
    #f4efe7;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.sink-copy {
  position: absolute;
  left: 18px;
  top: 46px;
  width: 74%;
  z-index: 12;
}
.sink-copy h2 {
  max-width: 285px;
  font-size: 35px;
  line-height: 0.92;
}
.sink-copy p {
  font-size: 11px;
  margin-top: 8px;
  font-weight: 700;
}

/* One coherent kitchen scene: counter, faucet, sink and drying rack. */
.sink-scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 225px;
  height: 500px;
  z-index: 8;
  transform-origin: 50% 45%;
}
.countertop {
  position: absolute;
  z-index: 1;
  left: -18px;
  right: -18px;
  top: 204px;
  height: 236px;
  border-top: 2px solid var(--ink);
  background:
    repeating-linear-gradient(
      8deg,
      rgba(13, 13, 13, 0.025) 0 1px,
      transparent 1px 8px
    ),
    #e9e2d8;
  box-shadow: inset 0 9px 0 rgba(255, 255, 255, 0.38);
}
.countertop-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  background: rgba(13, 13, 13, 0.18);
}

/* Faucet deliberately reuses the shower's outlined metal-pipe language. */
.sink-faucet {
  position: absolute;
  z-index: 7;
  left: 4px;
  top: 3px;
  width: 190px;
  height: 245px;
  overflow: visible;
  filter: drop-shadow(6px 8px 0 rgba(13, 13, 13, 0.065));
}
.sink-pipe-outline,
.sink-pipe,
.sink-spout-outline,
.sink-spout {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sink-pipe-outline,
.sink-spout-outline {
  stroke: var(--ink);
  stroke-width: 15px;
}
.sink-pipe,
.sink-spout {
  stroke: #e9e7e1;
  stroke-width: 11px;
}
.sink-faucet-mount,
.sink-faucet-base {
  fill: #e4e2dc;
  stroke: var(--ink);
  stroke-width: 2px;
}
.sink-stream {
  position: absolute;
  z-index: 6;
  left: 177px;
  top: 96px;
  width: 5px;
  height: 145px;
  border-radius: 99px;
  background: linear-gradient(
    180deg,
    rgba(141, 216, 255, 0.72),
    #49adff 42%,
    #258cff
  );
  box-shadow: 0 0 10px rgba(69, 169, 255, 0.18);
}

.basin {
  position: absolute;
  z-index: 4;
  left: 18px;
  top: 201px;
  width: 190px;
  height: 205px;
  border: 3px solid var(--ink);
  border-radius: 24px 24px 78px 78px;
  background: #f7f4ee;
  overflow: hidden;
  box-shadow:
    inset 0 9px 0 rgba(255, 255, 255, 0.65),
    0 8px 0 rgba(13, 13, 13, 0.04);
}
.basin-rim {
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 36px;
  border: 1.5px solid rgba(13, 13, 13, 0.28);
  border-radius: 18px 18px 45% 45%;
  border-bottom-color: transparent;
}
.basin-water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.12) 0 2px,
      transparent 2px 8px
    ),
    linear-gradient(rgba(121, 207, 255, 0.72), rgba(36, 140, 255, 0.94));
  background-size:
    auto 18px,
    auto;
  transition: height 0.46s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: basin-water-shimmer 5.8s linear infinite;
  will-change: height;
}
.basin-water:before,
.basin-water:after {
  content: "";
  position: absolute;
  left: -8%;
  width: 116%;
  border-radius: 50%;
  pointer-events: none;
}
.basin-water:before {
  top: -8px;
  height: 17px;
  background: rgba(127, 210, 255, 0.78);
  animation: basin-wave-front 4.3s ease-in-out infinite;
}
.basin-water:after {
  top: -5px;
  height: 12px;
  background: rgba(210, 239, 255, 0.34);
  transform: translateX(-5%);
  animation: basin-wave-back 5.1s ease-in-out infinite reverse;
}
@keyframes basin-wave-front {
  0%,
  100% {
    transform: translateX(-2%) translateY(0) scaleX(1.02);
  }
  50% {
    transform: translateX(2%) translateY(2px) scaleX(0.98);
  }
}
@keyframes basin-wave-back {
  0%,
  100% {
    transform: translateX(-4%) translateY(1px) scaleX(0.99);
  }
  50% {
    transform: translateX(3%) translateY(-1px) scaleX(1.02);
  }
}
@keyframes basin-water-shimmer {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      0 18px,
      0 0;
  }
}
.basin-drain {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 30px;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  border: 2px solid rgba(13, 13, 13, 0.72);
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(13, 13, 13, 0.55) 0 8deg,
    transparent 8deg 24deg
  );
  opacity: 0.55;
}
.soap-bubbles {
  position: absolute;
  z-index: 6;
}
.soap-bubbles i {
  position: absolute;
  border: 1.7px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 3px 3px 0 rgba(121, 207, 255, 0.18);
}
.basin-bubbles {
  left: 25px;
  right: 22px;
  bottom: 37px;
  height: 88px;
}
.basin-bubbles i:nth-child(1) {
  left: 2%;
  top: 30%;
  width: 27px;
  height: 27px;
}
.basin-bubbles i:nth-child(2) {
  left: 29%;
  top: 49%;
  width: 40px;
  height: 40px;
}
.basin-bubbles i:nth-child(3) {
  left: 54%;
  top: 20%;
  width: 33px;
  height: 33px;
}
.basin-bubbles i:nth-child(4) {
  left: 72%;
  top: 55%;
  width: 22px;
  height: 22px;
}
.basin-bubbles i:nth-child(5) {
  left: 43%;
  top: 72%;
  width: 18px;
  height: 18px;
}

.sponge {
  position: absolute;
  z-index: 9;
  left: 214px;
  top: 186px;
  width: 52px;
  height: 27px;
  border: 2px solid var(--ink);
  border-radius: 8px 12px 7px 10px;
  background: #f1d348;
  transform: rotate(-7deg);
  box-shadow: 3px 5px 0 rgba(13, 13, 13, 0.06);
}
.sponge:before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 9px;
  border: 2px solid var(--ink);
  border-radius: 0 0 8px 9px;
  background: #98c85e;
}
.sponge span,
.sponge i {
  position: absolute;
  border: 1.3px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.sponge span {
  width: 11px;
  height: 11px;
  right: -7px;
  top: -11px;
}
.sponge i:nth-child(2) {
  width: 7px;
  height: 7px;
  right: 7px;
  top: -16px;
}
.sponge i:nth-child(3) {
  width: 5px;
  height: 5px;
  right: -13px;
  top: 5px;
}
.sponge i:nth-child(4) {
  width: 6px;
  height: 6px;
  left: 5px;
  top: -9px;
}

/* Four fully visible plate choices: fast to scan, compare and tap. */
.plate-rack {
  position: absolute;
  z-index: 10;
  right: 7px;
  top: 203px;
  width: 166px;
  height: 178px;
  padding: 7px 7px 18px;
  display: grid;
  grid-template-columns: repeat(2, 72px);
  grid-template-rows: repeat(2, 72px);
  gap: 7px;
  align-content: start;
}
.rack-back {
  position: absolute;
  z-index: 0;
  left: 2px;
  right: 2px;
  top: 1px;
  bottom: 5px;
  border: 2px solid rgba(13, 13, 13, 0.72);
  border-top: 0;
  border-radius: 0 0 11px 11px;
  pointer-events: none;
}
.rack-back:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 16px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(13, 13, 13, 0.48);
}
.rack-back:after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 79px;
  height: 2px;
  background: rgba(13, 13, 13, 0.48);
  box-shadow: 0 74px 0 rgba(13, 13, 13, 0.32);
}
.plate {
  position: relative;
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 5px 6px rgba(13, 13, 13, 0.055));
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.plate:nth-of-type(1),
.plate:nth-of-type(2),
.plate:nth-of-type(3),
.plate:nth-of-type(4) {
  inset: auto;
  bottom: auto;
  right: auto;
  z-index: 3;
}
.plate svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plate-fill {
  fill: #f8f4ed;
  stroke: var(--ink);
  stroke-width: 2.5px;
  transition:
    fill 0.18s ease,
    stroke-width 0.18s ease;
}
.plate-ring {
  fill: none;
  stroke: rgba(13, 13, 13, 0.34);
  stroke-width: 1.35px;
  stroke-dasharray: 2 3;
}
.plate-arc {
  fill: none;
}
.plate-label {
  fill: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.09em;
}
.plate-center {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.035em;
  pointer-events: none;
}
.plate.is-selected {
  z-index: 6;
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 7px 8px rgba(13, 13, 13, 0.11));
}
.plate.is-selected .plate-fill {
  fill: var(--lime);
  stroke-width: 3px;
}
.plate:not(.is-selected):hover {
  transform: translateY(-2px);
}
.plate:focus-visible {
  outline: 3px solid rgba(45, 143, 255, 0.34);
  outline-offset: 3px;
}
.plate-bubble {
  position: absolute;
  z-index: 8;
  border: 1.3px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  pointer-events: none;
}
.plate-bubble.plate-bubble--large-right {
  width: 9px;
  height: 9px;
  right: 9px;
  top: 13px;
}
.plate-bubble.plate-bubble--small-right {
  width: 6px;
  height: 6px;
  right: 4px;
  top: 27px;
}
.plate-bubble.plate-bubble--medium-left {
  width: 7px;
  height: 7px;
  left: 10px;
  top: 10px;
}
.rack-feet {
  position: absolute;
  z-index: 8;
  left: 5px;
  right: 5px;
  bottom: -4px;
  height: 18px;
  pointer-events: none;
}
.rack-feet i {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 17px;
  border-radius: 99px;
  background: var(--ink);
}
.rack-feet i:nth-child(1) {
  left: 14px;
  transform: rotate(7deg);
}
.rack-feet i:nth-child(2) {
  left: 55px;
  transform: rotate(2deg);
}
.rack-feet i:nth-child(3) {
  right: 55px;
  transform: rotate(-2deg);
}
.rack-feet i:nth-child(4) {
  right: 14px;
  transform: rotate(-7deg);
}

.sink-next {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 24px;
  min-width: 156px;
  height: 46px;
  padding: 0 16px 0 18px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(13, 13, 13, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition:
    opacity 0.2s ease,
    transform 0.22s ease,
    visibility 0s linear 0.22s;
}
.sink-next.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.sink-next i {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
}
.sink-next:active {
  transform: translate(-50%, 3px);
}
.sink-next:focus-visible {
  outline: 3px solid rgba(45, 143, 255, 0.28);
  outline-offset: 3px;
}

.sink-question-two {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10%;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  z-index: 26;
  background: linear-gradient(transparent, #f4efe7 18%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(42px);
  transition:
    opacity 0.25s ease,
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.32s;
}
.sink-question-two.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.sink-question-two h3 {
  font-family: "Archivo Black";
  font-size: 22px;
  line-height: 1;
  margin: 0 0 10px;
}
.method-plates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}
.method-plates::-webkit-scrollbar {
  display: none;
}
.method-plate {
  flex: 0 0 100px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.method-plate.is-selected {
  background: var(--pink);
  transform: translateY(-2px);
}
.kitchen-room.is-method-step .plate-rack {
  opacity: 0.58;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.kitchen-room.is-method-step .sink-copy {
  opacity: 0.58;
  transition: opacity 0.22s ease;
}

@media (max-height: 760px) {
  .sink-copy h2 {
    font-size: 31px;
  }
  .sink-scene {
    top: 205px;
    transform-origin: 50% 40%;
  }
  .sink-next {
    bottom: 14px;
  }
  .sink-question-two {
    bottom: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .basin-water,
  .basin-water:before,
  .basin-water:after {
    animation: none;
  }
  .sink-next,
  .sink-question-two {
    transition-duration: 0.01ms;
  }
}

/* --------------------------------------------------------------------------
   Laundry chapter
   -------------------------------------------------------------------------- */
.laundry-room {
  background:
    radial-gradient(
      circle at 22% 10%,
      rgba(255, 255, 255, 0.88),
      transparent 30%
    ),
    linear-gradient(rgba(13, 13, 13, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.042) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.012) 0 2px,
      transparent 2px 6px
    ),
    #f4efe7;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.laundry-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 48px;
  text-align: center;
  z-index: 10;
}
.laundry-copy h2 {
  max-width: 330px;
  margin: 0 auto;
  font-size: 35px;
  line-height: 0.94;
}
.laundry-copy p {
  font-size: 10px;
  margin-top: 9px;
  font-weight: 700;
  color: rgba(13, 13, 13, 0.58);
}
.washer {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: min(82vw, 342px);
  height: 420px;
  border: 2.5px solid var(--ink);
  border-radius: 25px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 255, 255, 0.08)
    ),
    #ebe8e1;
  box-shadow:
    9px 11px 0 rgba(13, 13, 13, 0.07),
    0 20px 36px rgba(13, 13, 13, 0.06);
  overflow: visible;
  will-change: transform;
}
.washer-panel {
  height: 78px;
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.26);
}
.washer-panel button {
  height: 39px;
  min-width: 39px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #f8f5ee;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.washer-panel button.is-selected {
  background: var(--lime);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(13, 13, 13, 0.1);
}
.washer-dial {
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background:
    radial-gradient(circle at center, #f6f2eb 0 55%, transparent 56%),
    repeating-conic-gradient(
      from -110deg,
      var(--ink) 0 2deg,
      transparent 2deg 18deg
    );
}
.washer-door {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 238px;
  height: 238px;
  border-radius: 50%;
  border: 15px solid var(--ink);
  background: #d7dadb;
  padding: 13px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35);
}
.washer-drum {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.45),
      transparent 38%
    ),
    #c8cdd0;
  box-shadow: inset 0 0 0 7px #a1a9ad;
}
.washer-water {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 22%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.12) 0 2px,
      transparent 2px 9px
    ),
    linear-gradient(rgba(121, 207, 255, 0.78), rgba(36, 140, 255, 0.95));
  background-size:
    auto 18px,
    auto;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation:
    washer-water-bob 4.8s ease-in-out infinite,
    washer-water-shimmer 6s linear infinite;
  will-change: height, transform;
}
.washer-water:before,
.washer-water:after {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50%;
  pointer-events: none;
}
.washer-water:before {
  top: -8px;
  height: 17px;
  background: rgba(127, 210, 255, 0.86);
  animation: washer-wave-front 4.1s ease-in-out infinite;
}
.washer-water:after {
  top: -5px;
  height: 12px;
  background: rgba(220, 244, 255, 0.38);
  animation: washer-wave-back 5.2s ease-in-out infinite reverse;
}
@keyframes washer-water-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}
@keyframes washer-wave-front {
  0%,
  100% {
    transform: translateX(-3%) translateY(0) scaleX(1.02);
  }
  50% {
    transform: translateX(3%) translateY(2px) scaleX(0.98);
  }
}
@keyframes washer-wave-back {
  0%,
  100% {
    transform: translateX(-4%) translateY(1px) scaleX(0.99);
  }
  50% {
    transform: translateX(4%) translateY(-1px) scaleX(1.02);
  }
}
@keyframes washer-water-shimmer {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      0 18px,
      0 0;
  }
}
.washer-load {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.laundry-piece {
  position: absolute;
  opacity: 0.96;
  filter: drop-shadow(0 5px 4px rgba(13, 13, 13, 0.10));
}
.laundry-piece::before,
.laundry-piece::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.laundry-piece--shirt-pink,
.laundry-piece--shirt-lime {
  border: 2px solid rgba(13, 13, 13, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.laundry-piece--shirt-pink {
  width: 88px;
  height: 68px;
  left: 38px;
  top: 76px;
  background: var(--pink);
  clip-path: polygon(18% 0, 31% 0, 38% 12%, 62% 12%, 69% 0, 82% 0, 100% 24%, 84% 39%, 76% 32%, 74% 100%, 26% 100%, 24% 32%, 16% 39%, 0 24%);
  transform: rotate(18deg);
}
.laundry-piece--shirt-pink::after,
.laundry-piece--shirt-lime::after {
  left: 50%;
  top: 8px;
  width: 18px;
  height: 11px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.52);
  border-radius: 0 0 12px 12px;
}
.laundry-piece--shirt-lime {
  width: 98px;
  height: 74px;
  left: 84px;
  top: 108px;
  background: var(--lime);
  clip-path: polygon(14% 0, 28% 0, 35% 12%, 65% 12%, 72% 0, 86% 0, 100% 23%, 86% 38%, 77% 32%, 74% 100%, 26% 100%, 23% 32%, 14% 38%, 0 23%);
  transform: rotate(-24deg);
}
.laundry-piece--sock {
  width: 58px;
  height: 82px;
  left: 50px;
  top: 132px;
  background: #fff;
  border: 2px solid rgba(13, 13, 13, 0.52);
  border-radius: 20px 20px 16px 16px;
  clip-path: polygon(34% 0, 82% 0, 82% 50%, 100% 50%, 100% 81%, 74% 100%, 25% 100%, 0 84%, 0 58%, 33% 58%);
  transform: rotate(36deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.laundry-piece--sock::after {
  left: 10px;
  top: 12px;
  width: 18px;
  height: 14px;
  border-radius: 10px;
  background: rgba(220, 225, 232, 0.68);
}
.washer-handle {
  position: absolute;
  right: 17px;
  top: 92px;
  width: 20px;
  height: 72px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #d7d4cd;
}


/* --------------------------------------------------------------------------
   Personalized result chapter
   -------------------------------------------------------------------------- */
.result-room {
  background:
    radial-gradient(
      circle at 78% 16%,
      rgba(121, 207, 255, 0.15),
      transparent 25%
    ),
    linear-gradient(rgba(13, 13, 13, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.04) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.012) 0 2px,
      transparent 2px 6px
    ),
    var(--paper);
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.result-heading {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  top: 66px;
  text-align: center;
}
.result-heading > span {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 8px;
  letter-spacing: 0.16em;
  font-weight: 900;
  color: rgba(13, 13, 13, 0.55);
}
.result-heading h2 {
  font-size: 34px;
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.result-card {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  top: 205px;
  min-height: 445px;
  padding: 24px 22px 22px;
  border: 2px solid var(--ink);
  border-radius: 30px;
  background: rgba(247, 244, 238, 0.9);
  box-shadow:
    9px 11px 0 rgba(13, 13, 13, 0.07),
    0 18px 34px rgba(13, 13, 13, 0.05);
  overflow: hidden;
}
.result-card-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.result-card:after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -58px;
  height: 178px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(
    180deg,
    rgba(121, 207, 255, 0.34),
    rgba(36, 140, 255, 0.16)
  );
  pointer-events: none;
}
.result-kicker {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: rgba(13, 13, 13, 0.55);
}
.result-number {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  text-align: center;
  font-family: "Archivo Black";
  font-size: clamp(92px, 28vw, 120px);
  line-height: 0.75;
  letter-spacing: -0.075em;
  transform-origin: 50% 50%;
  will-change: transform;
}
.result-number small {
  display: block;
  margin-top: 19px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.15em;
  font-weight: 900;
  color: var(--blue);
}
.result-copy {
  position: relative;
  z-index: 2;
  max-width: 270px;
  margin: 24px auto 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: rgba(13, 13, 13, 0.68);
  font-weight: 600;
}
.marker-strip {
  --user-position: 54%;
  --avg-position: 54%;
  position: relative;
  z-index: 3;
  margin-top: 27px;
  opacity: 0;
}


@keyframes result-scroll-arrow {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}
@media (max-height: 760px) {
  .result-heading {
    top: 54px;
  }
  .result-heading h2 {
    font-size: 30px;
  }
  .result-card {
    top: 174px;
    min-height: 412px;
    padding-top: 20px;
  }
  .result-copy {
    margin-top: 18px;
  }
  .marker-strip {
    margin-top: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  
}

/* --------------------------------------------------------------------------
   Glasses visualization
   -------------------------------------------------------------------------- */
.glasses-room {
  background: #061935;
  color: white;
}
.glasses-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 47%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 20;
}
.glasses-copy > span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 900;
}
.glasses-copy strong {
  display: block;
  font-family: "Archivo Black";
  font-size: 18vw;
  line-height: 0.83;
  letter-spacing: -0.06em;
  margin: 8px 0;
}
.glasses-copy p {
  font-size: 11px;
  opacity: 0.75;
}
.flying-glasses {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.fly-glass {
  position: absolute;
  width: 28px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 4px 4px 9px 9px;
  overflow: hidden;
  opacity: 0;
}
.fly-glass:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: var(--water);
}


/* --------------------------------------------------------------------------
   Cost visualization
   -------------------------------------------------------------------------- */
.chapter-money {
  height: 210svh;
}
.money-room {
  background:
    radial-gradient(
      circle at 22% 14%,
      rgba(255, 255, 255, 0.72),
      transparent 26%
    ),
    linear-gradient(rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.014) 0 2px,
      transparent 2px 6px
    ),
    #f5f1e9;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.money-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
}
.euro {
  position: absolute;
  top: -10%;
  color: #4f9b59;
  font-weight: 900;
  animation: eurofall linear infinite;
}
@keyframes eurofall {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(128svh) rotate(12deg);
  }
}
.money-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88vw, 340px);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 22px;
  z-index: 4;
}
.money-title {
  text-align: center;
}
.money-title span {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: rgba(13, 13, 13, 0.52);
}
.money-title strong {
  display: block;
  margin-top: 10px;
  font-family: "Archivo Black";
  font-size: clamp(54px, 20vw, 92px);
  line-height: 0.84;
  letter-spacing: -0.065em;
}
.money-title p {
  max-width: 240px;
  margin: 12px auto 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(13, 13, 13, 0.46);
}


/* --------------------------------------------------------------------------
   Savings narrative
   -------------------------------------------------------------------------- */


.saving-main-line,
.future-headline strong {
  font-family: "Archivo Black";
  font-size: clamp(34px, 12vw, 54px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-align: center;
}
.saving-face {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13, 13, 13, 0.08);
}


.beat-year .saving-main-line {
  max-width: 300px;
}

/* --------------------------------------------------------------------------
   Personalized actions
   -------------------------------------------------------------------------- */
.chapter-actions {
  height: 300svh;
}
.actions-room {
  background:
    radial-gradient(
      circle at 15% 12%,
      rgba(255, 255, 255, 0.78),
      transparent 22%
    ),
    linear-gradient(rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.014) 0 2px,
      transparent 2px 6px
    ),
    #f5f1e9;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.actions-intro {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 96px;
  text-align: center;
}
.actions-intro h2 {
  margin-top: 0;
  font-size: clamp(40px, 14vw, 60px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.action-cards {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 215px;
  display: grid;
  gap: 16px;
}
.action-card {
  padding: 17px 18px 18px;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(13, 13, 13, 0.06);
  opacity: 0;
}
.action-card span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  font-size: 10px;
  font-weight: 900;
  margin-bottom: 10px;
}
.action-card strong {
  display: block;
  font-family: "Archivo Black";
  font-size: 20px;
  line-height: 1;
}
.action-card p {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.action-card.action-card--lime {
  background: #dbff59;
}
.action-card.action-card--pink {
  background: #ffd4df;
}
.action-card.action-card--blue {
  background: #d7efff;
}

/* --------------------------------------------------------------------------
   Environmental consequence story
   -------------------------------------------------------------------------- */
.future-story {
  position: relative;
  background: #f4f0e8;
}
.future-screen {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 26%
    ),
    linear-gradient(rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.014) 0 2px,
      transparent 2px 6px
    ),
    #f5f1e9;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.future-screen-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 18px;
}
.future-headline {
  width: min(88vw, 340px);
  text-align: center;
}
.future-headline strong {
  display: block;
  font-family: "Archivo Black";
  font-size: clamp(34px, 12vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-align: center;
}
.future-headline em {
  color: #e5422b;
  font-style: normal;
}
.future-reference-image {
  display: block;
  width: min(86vw, 334px);
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}
.future-comparison-screen .future-screen-inner {
  align-items: center;
}

.future-morph-chapter {
  position: relative;
  height: 360svh;
  background: #f4f0e8;
}
.future-morph-room {
  display: grid;
  place-items: center;
  background: #f4f0e8;
  padding: 0;
}
.morph-frame-shell {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #102316;
}
.morph-frame-shell :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------------------------------
   Closing chapter
   -------------------------------------------------------------------------- */
.chapter-end {
  height: 300svh;
}
.end-room {
  background: #070707;
  overflow: hidden;
  transition: background-color 0.08s linear;
}


#restartBtn {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(44% + 182px);
  transform: translateX(-50%);
  min-width: 156px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s linear;
}
#restartBtn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-height: 700px) {
  
  #restartBtn {
    top: calc(42% + 176px);
  }
  
  
}
@media (max-width: 380px) {
  .money-title strong {
    font-size: clamp(52px, 18vw, 82px);
  }
  .future-headline strong {
    font-size: clamp(30px, 10.7vw, 44px);
  }
}

/* Long-form story pacing and viewport centering */
.saving-story {
  position: relative;
  background: #f5f1e9;
}
.saving-scroll-beat {
  position: relative;
  height: var(--saving-beat-scroll);
  background:
    radial-gradient(
      circle at 80% 12%,
      rgba(255, 255, 255, 0.7),
      transparent 25%
    ),
    linear-gradient(rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.014) 0 2px,
      transparent 2px 6px
    ),
    #f5f1e9;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.saving-beat-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.saving-beat-content {
  width: min(88vw, 350px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  text-align: center;
}
.saving-main-line {
  width: 100%;
  margin: 0;
  text-align: center;
}
.saving-face {
  margin: 0 auto;
}


/* Each future beat owns multiple viewport-heights, while its content stays centered. */
.future-hold-screen {
  height: 220svh;
  min-height: 220svh;
  overflow: visible;
  background: #f5f1e9;
}
.future-hold-screen .future-screen-inner {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 12%,
      rgba(255, 255, 255, 0.72),
      transparent 26%
    ),
    linear-gradient(rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 13, 13, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(
      155deg,
      rgba(13, 13, 13, 0.014) 0 2px,
      transparent 2px 6px
    ),
    #f5f1e9;
  background-size:
    auto,
    39px 39px,
    39px 39px,
    auto,
    auto;
}
.future-comparison-figure {
  width: min(88vw, 350px);
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.future-reference-image {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  border: 0;
}
.future-comparison-figure figcaption {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
  font-style: italic;
  font-weight: 600;
  text-align: left;
}
.future-morph-chapter {
  height: 420svh;
}
.future-headline {
  margin: 0 auto;
}

/* Mobile: shorten the shower composition so the controls remain visible above Safari chrome. */
@media (max-width: 600px) {
  .chapter-shower {
    height: 128svh;
  }
  .shower-fixture {
    top: 20px;
    height: 400px;
  }
  .shower-fixture-svg {
    top: 24px;
    height: 398px;
  }
  .shower-rain {
    top: 101px;
    height: 325px;
  }
  .shower-console {
    top: 458px;
    min-height: 178px;
  }
  .console-question {
    min-height: 108px;
  }
}

/* Lightweight snap assistance only for the long-form story beats. */
html {
  scroll-snap-type: y proximity;
}
.saving-scroll-beat,
.future-hold-screen,
.future-morph-chapter {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Content and presentation refinements */

/* The calculated amount is part of the same strong element as the euro sign
   and "A MONTH", so it inherits exactly the same display typography. */
#monthlyCostLine {
  display: block;
  margin-top: 10px;
  font-family: "Archivo Black";
  font-size: clamp(54px, 20vw, 92px);
  line-height: 0.84;
  letter-spacing: -0.065em;
}

/* Keep the scroll instruction present throughout the story once scrolling begins. */
.global-scroll-hint {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1.5px solid rgba(13, 13, 13, 0.72);
  border-radius: 999px;
  background: rgba(245, 241, 233, 0.88);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(13, 13, 13, 0.08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}
.global-scroll-hint.is-visible {
  opacity: 0.82;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.global-scroll-hint i {
  font-style: normal;
  font-size: 13px;
  animation: result-scroll-arrow 1.2s ease-in-out infinite;
}

/* Morph media stays scroll-scrubbed inside a compact card rather than filling the viewport. */
.future-morph-room {
  padding: 72px 18px 62px;
}
.morph-frame-shell {
  width: min(88vw, 350px);
  height: min(68svh, 560px);
  border: 2px solid var(--ink);
  border-radius: 24px;
  overflow: hidden;
  background: #102316;
  box-shadow:
    0 10px 0 rgba(13, 13, 13, 0.06),
    0 18px 34px rgba(13, 13, 13, 0.09);
}
.morph-frame-shell :is(img, video) {
  object-fit: cover;
}

@media (max-width: 600px) {
  #monthlyCostLine {
    font-size: clamp(52px, 19vw, 84px);
  }
  .morph-frame-shell {
    width: min(86vw, 340px);
    height: min(64svh, 520px);
  }
  .global-scroll-hint {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-scroll-hint i {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Interaction-state presentation
   -------------------------------------------------------------------------- */

/* Sink question 2 reads as a modal layer: dim/soften the previous scene behind it. */
.kitchen-room .sink-copy,
.kitchen-room .sink-scene {
  transition:
    filter 0.28s ease,
    opacity 0.28s ease;
}
.kitchen-room.is-method-step .sink-copy,
.kitchen-room.is-method-step .sink-scene {
  filter: blur(2.2px) brightness(0.72);
  opacity: 0.58;
}
.sink-question-two {
  background: rgba(244, 239, 231, 0.94);
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 42px rgba(13, 13, 13, 0.16);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Clear result comparison: two named bars, never overlapping. */
.result-compare-card {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 15px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 7px 0 rgba(13, 13, 13, 0.055);
}
.compare-row {
  display: grid;
  gap: 7px;
}
.compare-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 9px;
  line-height: 1;
}
.compare-label strong {
  font-family: "Archivo Black";
  font-size: 10px;
  letter-spacing: -0.02em;
}
.compare-label span {
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.compare-track {
  position: relative;
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.08);
}
.compare-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.28s ease;
}
.user-fill {
  width: var(--user-position);
  background: var(--blue);
}
.average-fill {
  width: var(--avg-position);
  background: rgba(13, 13, 13, 0.32);
}

/* Slow the global arrow pulse so it reads as a gesture cue, not a button. */
.global-scroll-hint i {
  animation-duration: 2.8s;
}


/* Let the final before/after story breathe a little longer. */
.chapter-end {
  height: 360svh;
}


/* Use the full safe viewport while keeping content clear of iPhone UI chrome. */
html,
body {
  min-height: 100%;
}
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}


/* --------------------------------------------------------------------------
   GSAP interaction and motion support
   -------------------------------------------------------------------------- */
:root {
  /* The two auto-story sections only need one short scroll to enter. */
  --saving-auto-height: 125svh;
  --future-auto-height: 125svh;
  /* Scroll distance used to scrub the waterfall morph. */
  --morph-scroll: 245svh;
}

html {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

/* Scroll locking is handled by input-gating in JS so GSAP can still move the page. */
html.interaction-locked,
body.interaction-locked {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: none;
}
body.interaction-locked {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
}

#story-wrapper,
#story-content {
  width: 100%;
}
#story-wrapper {
  overflow: hidden;
}

/* GSAP owns moving interaction states; CSS remains the static visual fallback. */
.shower-rain .water-line,
.answer-dial.is-active:before,
.basin-water,
.basin-water:before,
.basin-water:after,
.washer-water,
.washer-water:before,
.washer-water:after,
.euro,
.global-scroll-hint i {
  animation: none !important;
}

/* ---------- shower: mobile-first tap answers ---------- */
.chapter-shower {
  height: 100svh !important;
}
.shower-console {
  top: 438px;
  min-height: 224px;
  padding: 15px 92px 15px;
}
.console-question {
  min-height: 194px;
  justify-content: flex-start;
  padding-top: 5px;
  transition: none !important;
}
.console-question h2 {
  max-width: 178px;
  font-size: 14px;
  line-height: 1.08;
}
.console-question p {
  margin-top: 5px;
  max-width: 174px;
}

.answer-dial {
  width: 86px;
  height: 122px;
  pointer-events: none !important;
  touch-action: auto;
  cursor: default;
}
.flow-dial { left: 7px; }
.time-dial { right: 7px; }
.dial-scale {
  width: 79px;
  height: 79px;
}
.dial-knob {
  top: 13px;
  width: 66px;
  height: 66px;
  transition: none !important;
}
.dial-marker {
  height: 27px;
  transition: none !important;
}
.answer-dial.is-active:before {
  width: 83px;
  height: 83px;
  opacity: .42;
}
.answer-dial.is-inactive {
  opacity: .28;
  filter: grayscale(.65);
}

.flow-dial .dial-value:empty {
  visibility: hidden;
}

.shower-answer-options {
  width: 178px;
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.shower-answer-options button {
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  border: 1.7px solid var(--ink);
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .015em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.shower-answer-options button:focus-visible {
  outline: 3px solid rgba(45, 143, 255, .25);
  outline-offset: 2px;
}

.shower-next {
  z-index: 30;
  top: 681px;
  bottom: auto;
  opacity: 1;
  transition: none !important;
  touch-action: manipulation;
}
.shower-next:disabled {
  opacity: .32;
  cursor: default;
  box-shadow: 0 3px 0 rgba(13,13,13,.08);
}
.shower-next:active:not(:disabled) {
  transform: translateX(-50%) translateY(2px);
}

/* ---------- guided chapter handoff ---------- */
.chapter-transition {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.chapter-transition-water {
  position: absolute;
  inset: -6%;
  background:
    linear-gradient(180deg, rgba(125,214,255,.96), rgba(35,128,255,.97));
  transform: translateY(105%);
  box-shadow: 0 -24px 70px rgba(23,105,255,.18);
}
.chapter-transition-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(82vw, 320px);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  opacity: 0;
}
.chapter-transition-copy span {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}
.chapter-transition-copy strong {
  display: block;
  font-family: "Archivo Black";
  font-size: clamp(38px, 13vw, 58px);
  line-height: .9;
  letter-spacing: -.055em;
}

/* Sink UI state changes are animated by GSAP instead of CSS transitions. */
.sink-next,
.sink-question-two,
.kitchen-room .sink-copy,
.kitchen-room .sink-scene,
.method-plate,
.basin-water,
.washer-water,
.compare-fill,
#restartBtn {
  transition: none !important;
}

/* ---------- 08: one scroll-in, then an automatic GSAP story ---------- */
.saving-story {
  height: var(--saving-auto-height) !important;
  min-height: var(--saving-auto-height);
  position: relative;
  overflow: clip;
}
.saving-scroll-beat.saving-auto-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100svh !important;
  min-height: 100svh !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  scroll-snap-align: none !important;
}
.saving-auto-slide .saving-beat-sticky {
  position: absolute !important;
  inset: 0;
  top: 0 !important;
  height: 100svh;
  min-height: 100svh;
}
.saving-auto-slide .saving-beat-content {
  will-change: transform, opacity;
}

.auto-story-progress {
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.auto-story-progress i {
  display: block;
  width: 20px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(13,13,13,.16);
}
.auto-story-progress i:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--ink);
}
.auto-story-progress i.is-done:after {
  transform: scaleX(1);
}
.auto-story-progress i.is-active:after {
  transform: scaleX(var(--dot-progress, .45));
}

.gsap-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .04em;
}
.gsap-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* ---------- future examples: title + 2 comparisons autoplay ---------- */
.future-auto-stage {
  position: relative;
  height: var(--future-auto-height);
  min-height: var(--future-auto-height);
  overflow: clip;
  background: #f5f1e9;
}
.future-auto-stage .future-auto-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100svh !important;
  min-height: 100svh !important;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  scroll-snap-align: none !important;
}
.future-auto-stage .future-screen-inner {
  position: absolute !important;
  inset: 0;
  top: 0 !important;
  width: 100%;
  height: 100svh !important;
  min-height: 100svh !important;
}
.future-auto-progress {
  position: absolute;
}
.future-morph-chapter {
  height: var(--morph-scroll) !important;
  scroll-snap-align: none !important;
}

@media (max-width: 600px) {
  .chapter-shower {
    height: 100svh !important;
  }
  .shower-fixture {
    top: 10px;
    height: 390px;
  }
  .shower-fixture-svg {
    top: 18px;
    height: 390px;
  }
  .shower-rain {
    top: 96px;
    height: 315px;
  }
  .shower-console {
    top: 423px;
    min-height: 218px;
  }
  .shower-next {
    top: 657px;
  }
}

@media (max-height: 720px) {
  .shower-fixture {
    transform: scale(.88);
    transform-origin: top center;
    top: 6px;
  }
  .shower-console {
    top: 376px;
    min-height: 210px;
  }
  .shower-next {
    top: 600px;
  }
  .console-question {
    min-height: 180px;
  }
  .shower-answer-options button {
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #story-wrapper {
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Pinned viewport stages and touch-first controls
   -------------------------------------------------------------------------- */
:root {
  --saving-auto-height: 100svh;
  --future-auto-height: 100svh;
  --morph-scroll: 285svh;
}

/* Each important chapter keeps the viewport visually held while scroll drives its story. */
.chapter-shower { height: 100svh !important; }
.chapter-sink { height: 100svh !important; }
.chapter-laundry { height: 100svh !important; }
.chapter-result { height: 100svh !important; }
.chapter-glasses { height: 100svh !important; }
.chapter-money { height: 100svh !important; }
.chapter-actions { height: 100svh !important; }
.chapter-end { height: 100svh !important; min-height: 100svh; }

.sticky {
  top: 0;
  height: 100svh;
  min-height: 100svh;
}

/* ---------- shower: range + stepper instead of rotary dragging ---------- */
.shower-console {
  min-height: 232px;
  padding-left: 94px;
  padding-right: 94px;
}
.console-question {
  min-height: 202px;
  padding-top: 3px;
}
.console-question h2 {
  max-width: 178px;
  font-size: 14px;
}
.console-question p {
  max-width: 178px;
  margin-top: 4px;
  font-size: 8px;
  line-height: 1.25;
}
.answer-dial {
  width: 88px;
  height: 124px;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}
.answer-dial.is-active {
  opacity: 1 !important;
  filter: none !important;
}
.answer-dial.is-active .dial-knob {
  box-shadow:
    0 0 0 3px rgba(45, 143, 255, .11),
    0 5px 0 rgba(13,13,13,.08);
}

.answer-dial.is-inactive {
  opacity: .30 !important;
  filter: grayscale(.65) !important;
}
.flow-dial.is-active:before {
  opacity: .48 !important;
}

.shower-answer-options {
  display: block !important;
  width: 178px;
  margin-top: 8px;
}
.shower-answer-options > button {
  display: none !important;
}
.shower-stepper {
  width: 100%;
  padding: 7px 7px 6px;
  border: 1.5px solid rgba(13,13,13,.34);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.stepper-row {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 5px;
}
.stepper-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.7px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.stepper-button:active {
  transform: translateY(1px) scale(.97);
}
.stepper-readout {
  min-width: 0;
  text-align: center;
}
.stepper-readout strong {
  display: block;
  font-family: "Archivo Black";
  font-size: 12px;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.stepper-readout span {
  display: block;
  margin-top: 3px;
  font-size: 6.5px;
  line-height: 1;
  font-weight: 800;
  color: rgba(13,13,13,.48);
}
.shower-range {
  display: block;
  width: 100%;
  height: 20px;
  margin: 6px 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
.shower-range::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgba(13,13,13,.65);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(45,143,255,.35), rgba(45,143,255,.9));
}
.shower-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 0 rgba(13,13,13,.12);
}
.shower-range::-moz-range-track {
  height: 5px;
  border: 1px solid rgba(13,13,13,.65);
  border-radius: 99px;
  background: rgba(45,143,255,.68);
}
.shower-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  margin-top: -1px;
  font-size: 6px;
  line-height: 1;
  font-weight: 900;
  color: rgba(13,13,13,.45);
}
.shower-next {
  top: 691px;
}

/* ---------- sink: default choice + transition behaves as a true loading layer ---------- */
.chapter-transition {
  background: #248cff;
}
.chapter-transition-water {
  background: linear-gradient(180deg, #7dd6ff 0%, #258cff 52%, #1769ff 100%);
}
.plate.is-selected,
.method-plate.is-selected,
.washer-panel button.is-selected {
  box-shadow: 0 4px 0 rgba(13,13,13,.10);
}

/* ---------- held-stage sizing ---------- */
.saving-story {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}
.saving-scroll-beat.saving-auto-slide,
.saving-auto-slide .saving-beat-sticky {
  height: 100svh !important;
  min-height: 100svh !important;
}
.future-auto-stage {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}
.future-auto-stage .future-auto-slide,
.future-auto-stage .future-screen-inner {
  height: 100svh !important;
  min-height: 100svh !important;
}
.future-morph-chapter {
  height: var(--morph-scroll) !important;
  min-height: var(--morph-scroll);
}

.story-release-cue {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 44px));
  transform: translate(-50%, 10px);
  width: min(86vw, 330px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1.5px solid rgba(13,13,13,.74);
  border-radius: 999px;
  background: rgba(245,241,233,.92);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(13,13,13,.08);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
}
.story-release-cue span {
  font-size: 7px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .09em;
}
.story-release-cue i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 13px;
}

/* Result comparison starts hidden and becomes the purpose of the scroll. */
.result-compare-card {
  will-change: transform, opacity;
}

/* Glasses and money remain fixed in their viewport while GSAP advances them. */
.flying-glasses,
.money-rain,
.money-stack,
.washer,
.result-card,
.morph-frame-shell {
  will-change: transform, opacity;
}

/* ---------- final black closing screen ---------- */
.end-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 48px 24px max(34px, env(safe-area-inset-bottom));
  background: #070707 !important;
  color: #fff;
  text-align: center;
}

.end-message {
  width: min(88vw, 350px);
  margin: 0 auto;
}
.end-kicker {
  display: block;
  margin-bottom: 16px;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(255,255,255,.58);
}
.end-message h2 {
  margin: 0;
  font-family: "Archivo Black";
  font-size: clamp(34px, 11vw, 50px);
  line-height: .94;
  letter-spacing: -.055em;
}
.end-message p {
  max-width: 310px;
  margin: 20px auto 0;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255,255,255,.72);
}
#restartBtn {
  position: static !important;
  transform: none !important;
  min-width: 170px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 16px;
  background: #fff;
  color: #070707;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 0 rgba(255,255,255,.14);
}
#restartBtn:active {
  transform: translateY(2px) !important;
}

@media (max-width: 600px) {
  .chapter-shower { height: 100svh !important; }
  .shower-console {
    top: 415px;
    min-height: 232px;
  }
  .shower-next {
    top: 662px;
  }
}

@media (max-height: 720px) {
  .shower-console {
    top: 365px;
    min-height: 224px;
  }
  .shower-next {
    top: 602px;
  }
  .console-question {
    min-height: 194px;
  }
  .shower-stepper {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .chapter-actions {
    height: 220svh !important;
  }
  .end-room {
    gap: 24px;
  }
}

/* ScrollTrigger, not CSS sticky, owns the viewport hold on these stages. */
.chapter-laundry .laundry-room,
.chapter-result .result-room,
.chapter-glasses .glasses-room,
.chapter-money .money-room,
.chapter-actions .actions-room,
.future-morph-chapter .future-morph-room {
  position: relative;
  top: auto;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
}

/* --------------------------------------------------------------------------
   ScrollTrigger spacing and chapter handoffs
   -------------------------------------------------------------------------- */

/* The transition moves as one panel so no child layer can become stranded. */
.chapter-transition {
  background: linear-gradient(180deg, #79d5ff 0%, #2d8fff 50%, #1769ff 100%) !important;
  will-change: transform, opacity;
}
.chapter-transition-water {
  inset: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 50% 110%, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(180deg, rgba(125,214,255,.22), rgba(23,105,255,.08)) !important;
  pointer-events: none;
}
.chapter-transition-copy {
  left: 50%;
  top: 50%;
  transform: none;
  margin: 0;
  will-change: transform, opacity;
}

/* ScrollTrigger itself creates the required scroll distance. Keeping the source
   sections at one viewport prevents the blank-background gaps. */
.chapter-laundry,
.chapter-result,
.chapter-glasses,
.chapter-money,
.chapter-actions,
.future-morph-chapter {
  height: 100svh !important;
  min-height: 100svh !important;
}

/* These rooms are just the 100svh visual canvas. The parent chapter is pinned. */
.chapter-laundry .laundry-room,
.chapter-result .result-room,
.chapter-glasses .glasses-room,
.chapter-money .money-room,
.chapter-actions .actions-room,
.future-morph-chapter .future-morph-room {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  width: 100%;
  height: 100svh !important;
  min-height: 100svh !important;
}

/* On touch devices ScrollSmoother is intentionally not created; native scrolling
   + ScrollTrigger pinning is more stable and still gives GSAP-driven movement. */
@media (pointer: coarse), (max-width: 760px) {
  #story-wrapper {
    overflow: visible !important;
  }
  #story-content {
    overflow: visible !important;
  }
}

/* --------------------------------------------------------------------------
   Compact shower controls
   -------------------------------------------------------------------------- */
.chapter-shower .shower-console {
  top: 421px;
  min-height: 154px;
  height: 154px;
  padding: 12px 92px;
  display: flex;
  align-items: center;
}

.chapter-shower .console-question {
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.chapter-shower .console-question h2 {
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.chapter-shower .console-question p {
  max-width: 176px;
  margin: 5px auto 0;
  text-align: center;
}

.chapter-shower .answer-dial {
  top: 50%;
  transform: translateY(-50%);
}

.chapter-shower .flow-dial {
  left: 10px;
}

.chapter-shower .time-dial {
  right: 10px;
}

/* The answer input is its own piece below the physical shower mixer. */
.chapter-shower .shower-answer-panel {
  position: absolute;
  z-index: 24;
  top: 592px;
  left: 50%;
  width: min(246px, calc(100% - 52px));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.chapter-shower .shower-answer-options {
  width: 100%;
  margin: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.chapter-shower .shower-stepper {
  width: 100%;
  padding: 9px 11px 8px;
  border: 1.5px solid rgba(13,13,13,.34);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 5px 0 rgba(13,13,13,.045);
}

.chapter-shower .stepper-row {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 10px;
  justify-items: center;
}

.chapter-shower .stepper-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.chapter-shower .stepper-readout {
  width: 100%;
  text-align: center;
}

.chapter-shower .stepper-readout strong {
  font-size: 13px;
  text-align: center;
}

.chapter-shower .stepper-readout span {
  margin-top: 4px;
  text-align: center;
}

.chapter-shower .shower-range {
  width: 100%;
  margin-top: 8px;
}

.chapter-shower .range-ends {
  width: 100%;
}

.chapter-shower .shower-next {
  top: 711px;
}

@media (max-width: 600px) {
  .chapter-shower .shower-console {
    top: 414px;
    min-height: 154px;
    height: 154px;
  }

  .chapter-shower .shower-answer-panel {
    top: 584px;
  }

  .chapter-shower .shower-next {
    top: 706px;
  }
}

@media (max-height: 760px) {
  .chapter-shower .shower-fixture {
    transform: scale(.92);
    transform-origin: top center;
  }

  .chapter-shower .shower-console {
    top: 376px;
    min-height: 146px;
    height: 146px;
  }

  .chapter-shower .shower-answer-panel {
    top: 536px;
    width: min(236px, calc(100% - 48px));
  }

  .chapter-shower .shower-next {
    top: 650px;
  }
}


/* Compact dial layout and resilient closing screen */

/* DURATION / FREQUENCY captions are gone. The dial only needs room for the
   actual knob, allowing the physical mixer to stay compact. */


.chapter-shower .answer-dial {
  width: 86px;
  height: 88px;
  top: 50%;
  transform: translateY(-50%);
}

.chapter-shower .dial-scale {
  top: 4px;
}

.chapter-shower .dial-knob {
  top: 10px;
}

.chapter-shower .answer-dial.is-active:before {
  top: 0;
}

.chapter-shower .shower-console {
  top: 428px;
  min-height: 132px;
  height: 132px;
  padding: 10px 92px;
}

.chapter-shower .console-question {
  min-height: 0;
  height: 100%;
}

.chapter-shower .console-question h2 {
  max-width: 182px;
}

.chapter-shower .shower-answer-panel {
  top: 576px;
}

.chapter-shower .shower-next {
  top: 695px;
}

@media (max-width: 600px) {
  .chapter-shower .shower-console {
    top: 421px;
    min-height: 132px;
    height: 132px;
  }

  .chapter-shower .shower-answer-panel {
    top: 569px;
  }

  .chapter-shower .shower-next {
    top: 690px;
  }
}

@media (max-height: 760px) {
  .chapter-shower .shower-console {
    top: 382px;
    min-height: 126px;
    height: 126px;
  }

  .chapter-shower .shower-answer-panel {
    top: 522px;
  }

  .chapter-shower .shower-next {
    top: 637px;
  }
}

/* Final screen: content is visible without JavaScript. GSAP only enhances the
   entrance, which prevents another empty-black-screen failure mode. */
.chapter-end {
  height: 100svh !important;
  min-height: 100svh !important;
  background: #070707;
}

.chapter-end .end-room {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  width: 100%;
  height: 100svh !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: max(38px, env(safe-area-inset-top)) 24px max(34px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 39%, rgba(36,140,255,.14), transparent 27%),
    #070707 !important;
  color: #fff;
  text-align: center;
}

.end-orbit {
  position: relative;
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(36,140,255,.08);
}

.end-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 28px;
  transform: translate(-50%, -48%) rotate(45deg);
  border-radius: 65% 35% 65% 35%;
  background: linear-gradient(145deg, #79cfff, #248cff 62%, #1769ff);
  box-shadow: 0 5px 18px rgba(36,140,255,.34);
}

.end-orbit i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
}
.end-orbit i:nth-child(1) { left: 7px; top: 15px; }
.end-orbit i:nth-child(2) { right: 6px; top: 24px; }
.end-orbit i:nth-child(3) { left: 19px; bottom: 5px; }

.chapter-end .end-message {
  width: min(88vw, 350px);
  margin: 0 auto;
}

.chapter-end .end-kicker {
  display: block;
  margin-bottom: 14px;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .2em;
  color: var(--lime);
}

.chapter-end .end-message h2 {
  margin: 0;
  color: #fff;
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: clamp(34px, 11vw, 50px);
  line-height: .92;
  letter-spacing: -.055em;
}

.chapter-end .end-message p {
  max-width: 310px;
  margin: 18px auto 0;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
}

.chapter-end #restartBtn {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 176px;
  height: 52px;
  padding: 0 20px;
  transform: none !important;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #070707;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 6px 0 rgba(255,255,255,.13);
  cursor: pointer;
}

.chapter-end #restartBtn i {
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}

.chapter-end #restartBtn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 4px 0 rgba(255,255,255,.11);
}

/* Touch controls, laundry answer gate, and result fill */

/* Make the native range a proper mobile control. The JS scroll gate explicitly
   ignores touchmove on this element, so Safari can keep ownership of the drag. */
.chapter-shower .shower-range {
  height: 34px !important;
  margin-top: 4px !important;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chapter-shower .shower-range::-webkit-slider-runnable-track {
  height: 6px;
}
.chapter-shower .shower-range::-webkit-slider-thumb {
  width: 27px;
  height: 27px;
  margin-top: -11px;
  border-width: 2px;
  box-shadow: 0 3px 0 rgba(13,13,13,.12), 0 0 0 5px rgba(36,140,255,.08);
}
.chapter-shower .shower-range::-moz-range-thumb {
  width: 25px;
  height: 25px;
}

/* The rain density is controlled by JS from both shower answers. Keeping hidden
   lines in the same layout means changing the amount never shifts the fixture. */
.shower-rain .water-line {
  transition: visibility 0s linear;
}

/* Laundry requires an explicit answer. The hint sits relative to the washer
   itself, so it automatically stays centered above the machine on any phone. */
.laundry-answer-hint {
  position: absolute;
  z-index: 24;
  left: 50%;
  top: 0;
  transform: translate(-50%, -52%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content;
  pointer-events: none;
  color: var(--ink);
  text-align: center;
}
.laundry-answer-hint span {
  padding: 7px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 0 rgba(13,13,13,.06);
  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .11em;
  white-space: nowrap;
}
.laundry-answer-hint i {
  font-style: normal;
  font-size: 20px;
  line-height: .9;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(255,255,255,.55);
  animation: laundry-answer-bounce 1s ease-in-out infinite;
}
@keyframes laundry-answer-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.laundry-room.has-answer .laundry-answer-hint {
  opacity: 0;
  visibility: hidden;
}

/* The main litres value fills from the bottom in the same deep blue used by the
   visualization chapters. JS updates --litre-fill with ScrollTrigger progress. */
#personalLitres {
  --litre-fill: 0%;
  display: inline-block;
  color: transparent;
  background: linear-gradient(
    to top,
    #061935 0%,
    #061935 var(--litre-fill),
    rgba(6,25,53,.12) var(--litre-fill),
    rgba(6,25,53,.12) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Reduce rubber-band propagation around pinned chapters on touch hardware. GSAP's
   normalizeScroll in script.js handles the actual iPhone momentum/pin handoff. */
@media (pointer: coarse) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  .chapter-laundry,
  .chapter-result,
  .chapter-glasses,
  .chapter-money,
  .chapter-actions,
  .saving-story,
  .future-auto-stage,
  .future-morph-chapter {
    overscroll-behavior: contain;
  }
}


/* --------------------------------------------------------------------------
   Viewport entry, compact tips, and personalized savings
   -------------------------------------------------------------------------- */

/* Native momentum/rubber-band is restored between held chapters. JS temporarily
   normalizes touch only while an actual ScrollTrigger pin is active. */
@media (pointer: coarse) {
  html,
  body {
    overscroll-behavior-y: auto !important;
  }

  .chapter-laundry,
  .chapter-result,
  .chapter-glasses,
  .chapter-money,
  .chapter-actions,
  .saving-story,
  .future-auto-stage,
  .future-morph-chapter {
    overscroll-behavior: auto !important;
  }
}

/* Comparison should be noticed while the litre-number fill is still happening,
   not only at the very end of the pinned result chapter. */
.result-compare-card {
  will-change: transform, opacity;
}

/* Neutral subscription comparisons keep the savings story broadly relatable. */


.saving-sub-line {
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  opacity: .58;
}

/* Keep all three action cards completely inside the visual viewport, including
   phones with shorter browser viewports. This also keeps the next chapter from
   visually cutting through the third card as the action pin releases. */
.actions-intro {
  top: clamp(58px, 9svh, 82px) !important;
}
.actions-intro h2 {
  font-size: clamp(34px, 11.5vw, 50px) !important;
}
.action-cards {
  top: clamp(145px, 20svh, 178px) !important;
  bottom: 18px !important;
  gap: clamp(8px, 1.2svh, 11px) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.action-card {
  min-height: 0;
  padding: clamp(10px, 1.55svh, 14px) 15px !important;
  border-radius: 19px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.action-card span {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 6px !important;
  font-size: 8px !important;
  flex: 0 0 auto;
}
.action-card strong {
  font-size: clamp(15px, 4.55vw, 18px) !important;
  line-height: .98 !important;
}
.action-card p {
  margin-top: 6px !important;
  font-size: clamp(9px, 2.75vw, 11px) !important;
  line-height: 1.23 !important;
}

@media (max-height: 740px) {
  .actions-intro {
    top: 48px !important;
  }
  .actions-intro h2 {
    font-size: 32px !important;
  }
  .action-cards {
    top: 122px !important;
    bottom: 12px !important;
    gap: 7px !important;
  }
  .action-card {
    padding: 8px 12px !important;
  }
  .action-card span {
    width: 21px !important;
    height: 21px !important;
    margin-bottom: 4px !important;
  }
  .action-card strong {
    font-size: 14px !important;
  }
  .action-card p {
    font-size: 8.5px !important;
    margin-top: 4px !important;
  }
}

/* Mobile browser chrome changes the visual viewport height while scrolling.
   100svh can become shorter than the visible iPhone/Android viewport after the
   address bar moves, exposing part of the previous/next chapter. Use dvh for the
   held stages so a snapped chapter always covers the full live viewport. */
@supports (height: 100dvh) {
  @media (pointer: coarse) {
    .chapter-laundry,
    .chapter-result,
    .chapter-glasses,
    .chapter-money,
    .chapter-actions,
    .future-morph-chapter,
    .saving-story,
    .future-auto-stage,
    .chapter-laundry .laundry-room,
    .chapter-result .result-room,
    .chapter-glasses .glasses-room,
    .chapter-money .money-room,
    .chapter-actions .actions-room,
    .future-morph-chapter .future-morph-room,
    .saving-scroll-beat.saving-auto-slide,
    .saving-auto-slide .saving-beat-sticky,
    .future-auto-stage .future-auto-slide,
    .future-auto-stage .future-screen-inner {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}

/* Mobile momentum, natural-height tips, and savings comparison */

/* The action cards keep their original compact, content-driven height. They are
   no longer stretched into three equal full-screen rows. */
.actions-intro {
  top: clamp(56px, 8dvh, 82px) !important;
}
.actions-intro h2 {
  font-size: clamp(36px, 12vw, 52px) !important;
}
.action-cards {
  top: clamp(150px, 19dvh, 182px) !important;
  bottom: auto !important;
  gap: 11px !important;
  grid-template-rows: none !important;
}
.action-card {
  min-height: 0 !important;
  padding: 13px 16px 14px !important;
  border-radius: 22px !important;
  display: block !important;
  overflow: visible !important;
}
.action-card span {
  width: 25px !important;
  height: 25px !important;
  margin-bottom: 7px !important;
  font-size: 8px !important;
}
.action-card strong {
  font-size: clamp(15px, 4.55vw, 18px) !important;
  line-height: 1 !important;
}
.action-card p {
  margin-top: 6px !important;
  font-size: clamp(9px, 2.65vw, 11px) !important;
  line-height: 1.25 !important;
}

@media (max-height: 680px) {
  .actions-intro { top: 44px !important; }
  .actions-intro h2 { font-size: 31px !important; }
  .action-cards {
    top: 120px !important;
    gap: 7px !important;
  }
  .action-card { padding: 9px 12px 10px !important; }
  .action-card span {
    width: 21px !important;
    height: 21px !important;
    margin-bottom: 4px !important;
  }
  .action-card strong { font-size: 13.5px !important; }
  .action-card p {
    margin-top: 4px !important;
    font-size: 8.3px !important;
    line-height: 1.18 !important;
  }
}

/* Savings deliberately uses two beats: yearly saving, then one short
   relatable comparison. */
.saving-compare-content {
  gap: 18px;
}
.saving-comparison-grid {
  width: min(88vw, 352px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 20px auto 0;
}
.saving-compare-card {
  min-height: 178px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: #f8f4ed;
  box-shadow: 0 7px 0 rgba(13, 13, 13, .08);
  text-align: center;
}
.saving-compare-card span,
.saving-compare-card small {
  font-size: 7px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .08em;
}
.saving-compare-card strong {
  display: block;
  margin-top: 9px;
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: clamp(19px, 6vw, 25px);
  line-height: .98;
  letter-spacing: -.04em;
}
.saving-compare-card small {
  margin-top: 7px;
  opacity: .52;
}
.compare-service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}
.phone-icon {
  font-family: "Archivo Black", Inter, sans-serif;
  font-size: 30px;
  line-height: 1;
}
.spotify-icon {
  position: relative;
  display: block;
  background: #1ed760;
}
.spotify-icon i {
  position: absolute;
  left: 9px;
  width: 28px;
  height: 11px;
  border-top: 3px solid #0d0d0d;
  border-radius: 50%;
  transform: rotate(7deg);
}
.spotify-icon i:nth-child(1) { top: 12px; }
.spotify-icon i:nth-child(2) { top: 20px; width: 25px; left: 10px; }
.spotify-icon i:nth-child(3) { top: 28px; width: 21px; left: 12px; }

/* The morph remains a held scroll interaction with a source/name
   caption underneath. The user can replace EXAMPLE NAME with the final place name. */
.future-morph-room {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
.future-morph-room .morph-frame-shell {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
}
.morph-caption {
  flex: 0 0 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px max(2px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(13,13,13,.14);
  background: #f4f0e8;
  color: rgba(13,13,13,.72);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}

/* Keep the pinned viewport exact on touch hardware while JavaScript limits the
   momentum duration globally instead of disabling/re-enabling scrolling at every
   chapter boundary. */
@supports (height: 100dvh) {
  @media (pointer: coarse) {
    .chapter-laundry,
    .chapter-result,
    .chapter-glasses,
    .chapter-money,
    .chapter-actions,
    .saving-story,
    .future-auto-stage,
    .future-morph-chapter,
    .chapter-laundry .laundry-room,
    .chapter-result .result-room,
    .chapter-glasses .glasses-room,
    .chapter-money .money-room,
    .chapter-actions .actions-room,
    .future-morph-chapter .future-morph-room,
    .saving-scroll-beat.saving-auto-slide,
    .saving-auto-slide .saving-beat-sticky,
    .future-auto-stage .future-auto-slide,
    .future-auto-stage .future-screen-inner {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}


/* Laundry answer affordance: arrow only, anchored to the answer row. */
.laundry-answer-hint {
  position: absolute !important;
  z-index: 30 !important;
  left: 39% !important;
  top: 4px !important;
  width: 28px !important;
  height: 34px !important;
  transform: translate(-50%, -100%) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.laundry-answer-hint span { display: none !important; }
.laundry-answer-hint i {
  display: block !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.9) !important;
}
.laundry-room.has-answer .laundry-answer-hint {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* --------------------------------------------------------------------------
   Global scroll affordance
   -------------------------------------------------------------------------- */
/* A borderless vertical text + arrow cue reads as an instruction/gesture, not a
   tappable control. The soft halo keeps it legible over both light and dark scenes. */
.global-scroll-hint,
.story-release-cue {
  width: max-content !important;
  max-width: min(86vw, 280px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: rgba(13, 13, 13, 0.78) !important;
  text-align: center !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.98),
    0 0 8px rgba(255,255,255,0.82),
    0 0 16px rgba(255,255,255,0.52) !important;
}
.global-scroll-hint span,
.story-release-cue span {
  font-size: 7px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}
.global-scroll-hint i,
.story-release-cue i {
  display: block !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 0.8 !important;
  font-weight: 700 !important;
}
.global-scroll-hint {
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 6px)) !important;
}
.story-release-cue {
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 46px)) !important;
}


/* --------------------------------------------------------------------------
   Visual-viewport-safe shower positioning
   -------------------------------------------------------------------------- */

/* The shower fixture keeps its original top-anchored composition. Only the
   interactive stack moves upward when browser chrome reduces the actually
   visible viewport (notably Safari with both address and bottom toolbars open). */
.chapter-shower .shower-room {
  height: var(--shower-vvh, 100svh) !important;
  min-height: var(--shower-vvh, 100svh) !important;
}

@media (max-width: 600px), (pointer: coarse) {
  .chapter-shower .shower-console {
    top: min(421px, calc(var(--shower-vvh, 844px) - 378px)) !important;
  }

  .chapter-shower .shower-answer-panel {
    top: min(569px, calc(var(--shower-vvh, 844px) - 238px)) !important;
  }

  .chapter-shower .shower-next {
    top: min(690px, calc(var(--shower-vvh, 844px) - 123px)) !important;
    bottom: auto !important;
  }
}

/* On exceptionally short in-app/Safari viewports, keep the mixer usable rather
   than shrinking the shower head. The pipe/rain simply disappears behind it. */
@media (max-width: 600px) {
  .chapter-shower .shower-console {
    min-height: 126px !important;
    height: 126px !important;
  }
}


/* --------------------------------------------------------------------------
   Hardware-decoded scroll-scrubbed morph videos
   -------------------------------------------------------------------------- */
.morph-frame-shell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #102316;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}