/* Dewlet waitlist page, v2 (3 Nov 2026).
   One daylit room, seen through frosted glass. The room is a single photograph, pre-blurred twice (room-*.webp);
   the far layer fades in as you scroll, like a camera pulling focus from the room to the page.
   Brand palette: Dew Green #0F6B57, Deep #0A3F34, Mint #86D9BE, Mist #E8F5F0, Ink #10241E.
   No cookies, no third-party fonts: Albert Sans and Fraunces are self-hosted (see OFL-*.txt).
   The Content-Security-Policy allows no inline styles, so every style lives here; site.js only writes CSSOM. */

@font-face {
  font-family: "Albert Sans";
  src: url("/assets/albert-sans-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Arial, resized to Albert Sans' metrics, so the swap doesn't move the page. */
@font-face {
  font-family: "Albert Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103.75%;
  ascent-override: 91.57%;
  descent-override: 24.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Dewlet";
  src: url("/assets/fraunces-soft-v1.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --mist: #E8F5F0;
  --green: #0F6B57;
  --deep: #0A3F34;
  --mint: #86D9BE;
  --ink: #10241E;

  --text: var(--ink);
  --text-2: #253A31;
  --text-3: #33493F;
  --heading: var(--deep);
  --brand: var(--green);
  --action: var(--deep);
  --action-hover: #0E5243;
  --action-text: #FFFFFF;
  --error: #9E2318;
  --line: rgb(16 36 30 / 0.12);
  --field: rgb(255 255 255 / 0.74);
  --field-line: rgb(16 36 30 / 0.18);

  /* Frosted glass: warm white tint over a blur of whatever is behind it. */
  --veil: 246 243 236;
  --glass: rgb(250 248 243 / 0.52);
  --glass-strong: rgb(250 248 243 / 0.8);
  --glass-rim: rgb(255 255 255 / 0.75);
  --glass-blur: blur(22px) saturate(1.45) brightness(1.1);
  --shadow-sm: 0 1px 2px rgb(28 34 28 / 0.08), 0 6px 16px -8px rgb(28 34 28 / 0.22);
  --shadow-md: 0 2px 6px -2px rgb(28 34 28 / 0.08), 0 22px 44px -22px rgb(28 34 28 / 0.38);
  --scene-tint: rgb(246 243 236 / 0.06);

  /* The app inside the phone (light appearance). */
  --app-bg: #F3F5F1;
  --app-card: #FFFFFF;
  --app-text: #10241E;
  --app-text-2: #5A6B63;
  --app-green: #0F6B57;
  --app-deep: #0A3F34;
  --app-fill: rgb(16 36 30 / 0.06);
  --app-line: rgb(16 36 30 / 0.09);
  --app-dot: #C2D3CB;
  --app-on-green: #FFFFFF;

  --sans: "Albert Sans", "Albert Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Fraunces Dewlet", Georgia, "Times New Roman", serif;
  --app-font: -apple-system, BlinkMacSystemFont, "Albert Sans", "Albert Sans Fallback", "Segoe UI", Roboto, sans-serif;

  /* Motion: one exponential ease-out, and two real springs (CSS linear() curves of a damped spring). */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: linear(0, 0.0279, 0.0983, 0.1948, 0.3044, 0.4173, 0.5265, 0.6275, 0.7175, 0.795, 0.8598, 0.9123, 0.9535, 0.9847, 1.0072, 1.0225, 1.032, 1.0369, 1.0384, 1.0374, 1.0348, 1.0311, 1.0269, 1.0226, 1.0184, 1.0145, 1.011, 1.008, 1.0055, 1.0034, 1.0018, 1.0006, 0.9998, 0.9992, 0.9988, 0.9986, 1);
  --spring-calm: linear(0, 0.0378, 0.1267, 0.239, 0.3572, 0.4705, 0.5732, 0.6626, 0.738, 0.8001, 0.8501, 0.8895, 0.9202, 0.9435, 0.9611, 0.9739, 0.9832, 0.9898, 0.9944, 0.9974, 0.9993, 1.0005, 1.0012, 1.0015, 1);

  --gutter: 20px;
  --max: 1200px;
  --r-panel: 16px;
  --r-field: 14px;
  color-scheme: light;
}

/* Dark: the same room at dusk. Smoked glass, mint actions, and the app in its dark appearance. */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #E4EEE9;
    --text-2: #BBCEC5;
    --text-3: #A3B8AF;
    --heading: #F2F8F5;
    --brand: var(--mint);
    --action: var(--mint);
    --action-hover: #A6E5CF;
    --action-text: #0A2620;
    --error: #FFB4A9;
    --line: rgb(232 245 240 / 0.14);
    --field: rgb(10 22 18 / 0.5);
    --field-line: rgb(232 245 240 / 0.22);

    --veil: 9 19 16;
    --glass: rgb(16 31 26 / 0.56);
    --glass-strong: rgb(16 31 26 / 0.76);
    --glass-rim: rgb(255 255 255 / 0.1);
    --glass-blur: blur(22px) saturate(1.2);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
    --shadow-md: 0 2px 6px -2px rgb(0 0 0 / 0.3), 0 24px 48px -22px rgb(0 0 0 / 0.7);
    --scene-tint: rgb(8 17 14 / 0.7);

    --app-bg: #0A0F0D;
    --app-card: #17201C;
    --app-text: #E7EFEB;
    --app-text-2: #93A79E;
    --app-green: #86D9BE;
    --app-deep: #86D9BE;
    --app-fill: rgb(255 255 255 / 0.08);
    --app-line: rgb(255 255 255 / 0.1);
    --app-dot: #34443E;
    --app-on-green: #0A2620;
    color-scheme: dark;
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: rgb(16 36 30 / 0.32) transparent; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 420;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: #E7E3DA;
}
/* Subpages show the room too (no scroll focus pull there), as a fixed layer: iOS ignores background-attachment: fixed. */
body:not(.home)::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  background: linear-gradient(var(--scene-tint), var(--scene-tint)), url("/assets/room-deep-v1.webp") center / cover;
}
@media (prefers-color-scheme: dark) {
  html { scrollbar-color: rgb(232 245 240 / 0.28) transparent; }
  body { background-color: #0B1613; }
}
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; }
svg { display: block; }
[hidden] { display: none !important; }
::selection { background: rgb(134 217 190 / 0.6); color: var(--ink); }
input, textarea { caret-color: var(--brand); }

a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-thickness 0.15s; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; }

h1, h2 {
  font-weight: 560;
  color: var(--heading);
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.03em; }
h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 620; letter-spacing: -0.012em; color: var(--heading); text-wrap: balance; }

.i { width: 1em; height: 1em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 50;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--glass-strong);
  color: var(--heading);
  box-shadow: var(--shadow-md);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.demo-banner {
  position: relative; z-index: 30;
  padding: 10px var(--gutter);
  background: #FFF1C7;
  color: #4A3A00;
  font-size: 0.875rem;
  text-align: center;
}

/* The room */

.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #E7E3DA; }
.scene img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.scene-far { opacity: 0; }
.scene::after { content: ""; position: absolute; inset: 0; background: var(--scene-tint); }
@media (prefers-color-scheme: dark) { .scene { background: #0B1613; } }

/* Glass. One material for nav, panels, readouts and fields: tint, blur, a lit top rim, one shadow. */

.nav, .hero-join, .readout, .stage figcaption, .faq-list, .page > .wrap, .site-header > .wrap {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--shadow-md);
}

/* Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.btn-primary {
  background: var(--action);
  color: var(--action-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 10px 22px -12px rgb(10 63 52 / 0.7);
}
.btn-primary:hover {
  background: var(--action-hover);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 16px 30px -14px rgb(10 63 52 / 0.75);
}
.btn-primary:active { transform: translateY(0) scale(0.985); transition-duration: 0.1s; }
@media (prefers-color-scheme: dark) {
  .btn-primary, .btn-primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 10px 22px -12px rgb(0 0 0 / 0.6); }
}
.btn .i-arrow { width: 20px; height: 20px; transition: transform 0.35s var(--ease-out); }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.btn:disabled { cursor: progress; opacity: 0.7; transform: none; }

.btn-link {
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 620;
  color: var(--action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.btn-link:hover { text-decoration-thickness: 2px; }
.btn-link:disabled { cursor: progress; opacity: 0.6; }

/* Header */

.site-header { position: sticky; top: 0; z-index: 20; padding: 12px var(--gutter) 0; }
/* Mist at the top edge, so content scrolls away under the floating nav instead of peeking above it. */
.site-header::before {
  content: "";
  position: absolute; inset: 0 0 -26px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgb(var(--veil) / 0.9), rgb(var(--veil) / 0.55) 55%, rgb(var(--veil) / 0));
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max);
  height: 62px;
  margin-inline: auto;
  padding: 0 9px 0 22px;
  border-radius: 999px;
}
.logo { width: auto; height: 34px; fill: currentColor; color: var(--heading); }
.nav .logo { height: 30px; }
.logo-link { display: inline-block; color: var(--heading); border-radius: 8px; }
.nav-links { display: none; gap: 2px; list-style: none; }
.nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 520;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.nav-links a:hover { background: rgb(16 36 30 / 0.06); color: var(--heading); }
@media (prefers-color-scheme: dark) { .nav-links a:hover { background: rgb(255 255 255 / 0.08); } }
@media (min-width: 840px) { .nav-links { display: flex; } }
@media (max-width: 380px) { .nav-cta { padding: 0 16px; } }

/* Sound toggle: a speaker whose waves fold away into a small cross when muted. */
.nav-end { display: flex; align-items: center; gap: 4px; }
.sound-toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.3s var(--spring);
}
.sound-toggle:hover { background: rgb(16 36 30 / 0.06); color: var(--heading); }
.sound-toggle:active { transform: scale(0.9); transition-duration: 0.08s; }
.sound-toggle svg { width: 22px; height: 22px; overflow: visible; }
.sound-cone { fill: currentColor; }
.sound-waves path, .sound-off { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sound-waves, .sound-off { transform-box: fill-box; transition: opacity 0.2s, transform 0.4s var(--spring); }
.sound-waves { transform-origin: 0 50%; }
.sound-off { transform-origin: 50% 50%; opacity: 0; transform: scale(0.4) rotate(-45deg); }
.sound-toggle[aria-pressed="false"] .sound-waves { opacity: 0; transform: scale(0.4); }
.sound-toggle[aria-pressed="false"] .sound-off { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) { .sound-toggle:hover { background: rgb(255 255 255 / 0.08); } }
@media (max-width: 380px) { .nav-end { gap: 0; } .sound-toggle { width: 40px; } }
/* The narrowest phones: the logo, gaps and toggle step down a size so the CTA keeps to one line. */
@media (max-width: 359px) {
  .nav { gap: 8px; padding-left: 14px; }
  .nav .logo { height: 26px; }
  .sound-toggle { width: 36px; height: 36px; }
  .nav-cta { padding: 0 14px; }
}

/* Hero */

.hero { position: relative; isolation: isolate; padding-block: 28px 72px; }
/* A soft wash of light behind the words, so they read on any part of the photograph. */
.hero::before {
  content: "";
  position: absolute; inset: -140px 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--veil) / 0.86) 0%, rgb(var(--veil) / 0.62) 46%, rgb(var(--veil) / 0.32) 72%, rgb(var(--veil) / 0) 100%);
}
.hero-grid { display: grid; gap: 40px; }
.hero-copy { max-width: 600px; }
.hero h1 {
  font-size: clamp(2.625rem, 1.5rem + 3.9vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.034em;
}
.lede {
  margin-top: 22px;
  max-width: 33ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-2);
}
.price { margin-bottom: 16px; color: var(--text-2); }
/* After the signup step, the pane belongs to the follow-up questions; the reserve button carries the price. */
.hero-join:has(.join[hidden]) .price { display: none; }
.price strong { font-weight: 650; color: var(--heading); }

@media (min-width: 960px) {
  .hero { padding-block: 24px 64px; }
  .hero::before {
    inset: -140px 0 0;
    background:
      radial-gradient(ellipse 62% 78% at 18% 46%, rgb(var(--veil) / 0.8) 0%, rgb(var(--veil) / 0.58) 48%, rgb(var(--veil) / 0) 100%),
      linear-gradient(180deg, rgb(var(--veil) / 0.35), rgb(var(--veil) / 0) 40%);
  }
  /* Words and form share the left column; the phone spans both rows on the right.
     Narrow screens stack them in reading order: words, phone, then the form. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
    align-content: center;
    min-height: min(calc(100svh - 110px), 880px);
  }
  .hero-copy { grid-area: 1 / 1; align-self: end; }
  .hero-join { grid-area: 2 / 1; align-self: start; margin-top: 30px; }
  .stage { grid-area: 1 / 2 / 3; align-self: center; }
}

/* Waitlist panel: step 1 */

/* The offer and the form share one pane, so the price never sits on bare room. */
.hero-join { max-width: 470px; padding: 22px; border-radius: var(--r-panel); }
.label { display: block; margin-bottom: 8px; font-size: 0.875rem; font-weight: 620; color: var(--text-2); }
.join-button { width: 100%; margin-top: 18px; }

.input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-field);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
  box-shadow: inset 0 1px 2px rgb(16 36 30 / 0.06);
  transition: border-color 0.2s, box-shadow 0.25s var(--ease-out), background-color 0.2s;
}
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: rgb(16 36 30 / 0.3); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(15 107 87 / 0.18); }
.input[aria-invalid="true"] { border-color: var(--error); }
@media (prefers-color-scheme: dark) {
  .input:hover { border-color: rgb(232 245 240 / 0.4); }
  .input:focus { box-shadow: 0 0 0 4px rgb(134 217 190 / 0.22); }
}

.consent {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.45;
}
.consent input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  border: 1.5px solid var(--field-line);
  border-radius: 7px;
  background: var(--field);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--spring);
}
.consent input:hover { border-color: var(--brand); }
.consent input:active { transform: scale(0.9); }
.consent input:checked {
  border-color: var(--action);
  background: var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.consent input[aria-invalid="true"] { border-color: var(--error); }
@media (prefers-color-scheme: dark) {
  .consent input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.4' fill='none' stroke='%230A2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
.consent label { cursor: pointer; }

.error { margin-top: 8px; color: var(--error); font-size: 0.9375rem; font-weight: 620; }
.form-status { font-size: 0.9375rem; }
.form-status:not(:empty) { margin-top: 14px; }
.form-status.is-error { color: var(--error); font-weight: 620; }
.made-note { margin-top: 14px; color: var(--text-2); font-size: 0.875rem; }
.hp { display: none; }

/* Waitlist panel: steps 2 and 3 */

.step-title { font-size: 1.75rem; font-weight: 580; line-height: 1.1; letter-spacing: -0.024em; color: var(--heading); }
.step-title:focus { outline: none; }
.step-intro { margin-top: 8px; color: var(--text-2); }
.done p { margin-top: 8px; max-width: 46ch; color: var(--text-2); }

.q { min-width: 0; margin-top: 22px; padding: 0; border: 0; }
.q legend { padding: 0; margin-bottom: 10px; font-weight: 620; color: var(--heading); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--field-line);
  font-size: 0.9375rem;
  transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.35s var(--spring);
}
.chip:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--brand); }
.chip input:active + span { transform: scale(0.96); }
.chip input:checked + span { background: var(--action); color: var(--action-text); box-shadow: none; font-weight: 620; }
.chip input:focus-visible + span { outline: 2.5px solid var(--brand); outline-offset: 2px; }

.reserve { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.reserve .btn { width: 100%; }
@media (min-width: 520px) { .reserve .btn { width: auto; } }
.reserve-note { margin-top: 10px; color: var(--text-2); font-size: 0.9375rem; }
.reserve .btn-link { margin-top: 6px; }

/* The stage: a phone floating in the room, with two readouts that follow the demo. */

.stage {
  --w: min(72vw, 292px);
  --t: calc(var(--w) * 0.095);
  --r: calc(var(--w) * 0.168);
  --bezel: calc(var(--w) * 0.031);
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
  padding-top: 8px;
}
@media (min-width: 960px) {
  .stage { --w: clamp(250px, min(22vw, 34vh), 318px); padding-top: 0; }
}
.stage-3d { position: relative; perspective: 1600px; perspective-origin: 50% 30%; }
/* The wrappers' own planes sit at z = 0, in front of the half of the tilted face that leans back,
   so they would swallow clicks on the app. Only the face takes pointer events. */
.device-enter, .device-float, .device-tilt, .device { transform-style: preserve-3d; pointer-events: none; }
.device-face { pointer-events: auto; }
.device {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 2.07);
  border-radius: var(--r);
  transform: rotateX(6deg) rotateY(-15deg);
}
@media (min-width: 960px) { .device { transform: rotateX(6deg) rotateY(-17deg); } }

/* The titanium band: site.js lays thin facets around the outline (straight sides and rounded corners). */
.device-band { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.device-band i {
  position: absolute; left: 0; top: 0;
  backface-visibility: hidden;
  background: linear-gradient(90deg,
    hsl(200 6% calc(var(--l) * 64%)) 0%,
    hsl(200 5% calc(var(--l) * 34%)) 9%,
    hsl(200 6% calc(var(--l) * 19%)) 45%,
    hsl(200 5% calc(var(--l) * 23%)) 86%,
    hsl(200 5% calc(var(--l) * 42%)) 100%);
}
.device-band i.key {
  border-radius: 2px;
  background: linear-gradient(90deg, hsl(200 5% calc(var(--l) * 52%)), hsl(200 5% calc(var(--l) * 28%)) 50%, hsl(200 5% calc(var(--l) * 46%)));
}

.device-face {
  position: absolute; inset: 0;
  border-radius: var(--r);
  transform: translateZ(calc(var(--t) / 2));
  background: #040506;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.22),
    inset 0 0 0 2.5px #15181A,
    -26px 44px 72px -26px rgb(16 24 20 / 0.55),
    -6px 14px 24px -8px rgb(16 24 20 / 0.32);
}
.screen {
  position: absolute; inset: var(--bezel);
  overflow: hidden;
  border-radius: calc(var(--r) - var(--bezel));
  background: var(--app-bg);
  color: var(--app-text);
  container-type: size;
  text-align: left;
}
.device-glare {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 40%, rgb(255 255 255 / 0.2) 48%, rgb(255 255 255 / 0.05) 56%, transparent 66%) 40% 0 / 300% 100% no-repeat,
    linear-gradient(155deg, rgb(255 255 255 / 0.1), transparent 36%);
  mix-blend-mode: screen;
}
.device-shadow {
  position: absolute; left: 50%; bottom: -34px;
  width: 64%; height: 34px;
  margin-left: -36%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(28 34 28 / 0.32), rgb(28 34 28 / 0));
  filter: blur(5px);
}

/* The app, sized in container units so the whole screen scales with the phone. */

.status, .app, .island, .home-bar { position: absolute; }
.status {
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 13cqw;
  padding: 1.2cqw 8.2cqw 0 9.6cqw;
  font-family: var(--app-font);
  font-size: max(11px, 5cqw);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.status-icons { display: flex; align-items: center; gap: 1.6cqw; }
.status svg { fill: currentColor; }
.i-signal { width: 5.6cqw; height: 3.7cqw; }
.i-wifi { width: 5.2cqw; height: 3.9cqw; }
.i-battery { width: 8.4cqw; height: 3.9cqw; }
.island { top: 3.2cqw; left: 50%; width: 31cqw; height: 9.2cqw; margin-left: -15.5cqw; border-radius: 99px; background: #000; }
.home-bar { bottom: 2.3cqw; left: 50%; width: 35cqw; height: 1.5cqw; margin-left: -17.5cqw; border-radius: 99px; background: currentColor; opacity: 0.88; }

.app {
  inset: 14.5cqw 0 0;
  padding: 0 5.4cqw;
  font-family: var(--app-font);
  font-size: max(11px, 4.3cqw);
  line-height: 1.35;
}
.app-nav { display: flex; align-items: center; gap: 0.6cqw; height: 9cqw; margin-left: -1.4cqw; color: var(--app-green); font-size: max(11px, 4.9cqw); font-weight: 500; }
.app-nav .i { width: 5.6cqw; height: 5.6cqw; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; margin-top: 1.4cqw; }
.app-title { font-size: 9.4cqw; font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; }
.app-sub { margin-top: 0.6cqw; color: var(--app-text-2); font-size: max(11px, 4.7cqw); }
.app-avatar { display: grid; place-items: center; width: 12.6cqw; height: 12.6cqw; border-radius: 50%; background: rgb(134 217 190 / 0.32); color: var(--app-deep); }
.app-avatar svg { width: 4.4cqw; height: 6.6cqw; fill: currentColor; }
.app-tags { display: flex; gap: 1.6cqw; margin-top: 3.2cqw; list-style: none; }
.app-tags li { padding: 0.9cqw 3cqw; border-radius: 99px; background: var(--app-fill); color: var(--app-text-2); font-size: max(11px, 4.2cqw); font-weight: 550; }

.note, .rhythm {
  margin-top: 4.2cqw;
  padding: 4.4cqw 4.6cqw 4.6cqw;
  border-radius: 5.4cqw;
  background: var(--app-card);
  box-shadow: 0 0.3cqw 1cqw rgb(16 36 30 / 0.05);
}
.note-q {
  font-family: var(--serif);
  font-size: 9.2cqw;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--app-deep);
}
.note-hint { margin-top: 1.6cqw; color: var(--app-text-2); font-size: max(11px, 4.3cqw); line-height: 1.38; }
.note-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-top: 3.8cqw; }
.app-btn {
  min-height: 12.4cqw;
  padding: 0;
  border: 0;
  border-radius: 3.6cqw;
  background: var(--app-fill);
  color: var(--app-deep);
  font: inherit;
  font-size: max(11px, 4.6cqw);
  font-weight: 620;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.3s var(--spring);
}
.app-btn:hover { background: rgb(15 107 87 / 0.14); }
.app-btn:active { transform: scale(0.96); transition-duration: 0.08s; }
.app-btn-primary { background: var(--app-green); color: var(--app-on-green); }
.app-btn-primary:hover { background: var(--app-deep); }
@media (prefers-color-scheme: dark) {
  .app-btn:hover { background: rgb(134 217 190 / 0.16); }
  .app-btn-primary:hover { background: #A6E5CF; }
}
.app-btn:focus-visible, .app-link:focus-visible { outline: 2px solid var(--app-green); outline-offset: 2px; }
.note-result { font-size: max(11px, 4.5cqw); font-weight: 650; color: var(--app-deep); }
.note-result:not(:empty) { margin-top: 3.4cqw; animation: result-in 0.5s var(--ease-out) both; }
.note-after { margin-top: 0.4cqw; }
.app-link { padding: 1.4cqw 0; border: 0; background: none; color: var(--app-green); font: inherit; font-size: max(11px, 4.2cqw); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; }

.rhythm { margin-top: 3.4cqw; }
.rhythm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.8cqw 3cqw; color: var(--app-text-2); font-size: max(11px, 4.1cqw); }
.rhythm-title { color: var(--app-text); font-size: max(11px, 4.5cqw); font-weight: 650; }
.legend { display: inline-flex; align-items: center; gap: 1.2cqw; }
.key { display: inline-block; width: 2.5cqw; height: 2.5cqw; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.key-watered { background: var(--app-green); }
.key-next { margin-left: 1.6cqw; box-shadow: inset 0 0 0 0.55cqw var(--app-green); }

.days { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); height: 7cqw; margin-top: 3.4cqw; }
.day { position: relative; display: grid; place-items: center; }
.day::before { content: ""; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: var(--app-dot); }
.day.is-watered::before,
.day.is-next::before { width: 2.9cqw; height: 2.9cqw; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.day.is-watered::before { background: var(--app-green); }
.day.is-next::before { background: transparent; box-shadow: inset 0 0 0 0.6cqw var(--app-green); }
.day.is-checked::before { width: 2.6cqw; height: 2.6cqw; background: transparent; box-shadow: inset 0 0 0 0.6cqw var(--app-green); }
.day.is-today::after {
  content: "";
  position: absolute; left: 50%; bottom: -1.6cqw;
  width: 0.6cqw; height: 1.8cqw;
  margin-left: -0.3cqw;
  border-radius: 1px;
  background: var(--app-text);
}
.day.is-new::before { animation: drop-in 0.6s var(--spring) both; }
@keyframes drop-in {
  from { transform: rotate(45deg) scale(0.2); opacity: 0; }
  to { transform: rotate(45deg) scale(1); opacity: 1; }
}
.axis { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); margin-top: 2.6cqw; color: var(--app-text-2); font-size: max(11px, 3.8cqw); white-space: nowrap; }
.axis > * { grid-row: 1; }
.axis-start { grid-column: 1 / 10; }
.axis-today { grid-column: 19 / 26; text-align: center; font-weight: 650; color: var(--app-text); }
.axis-end { grid-column: 24 / 33; text-align: right; }
.rhythm-caption { margin-top: 2.8cqw; font-size: max(11px, 4.4cqw); line-height: 1.36; }

/* A small screen (every phone, and laptops with short windows): the secondary lines step out,
   so nothing on the screen drops below 11px and the rest keeps its room. */
@container (max-width: 275px) {
  .note-hint, .legend, .axis-start, .axis-end { display: none; }
}

/* Readouts beside the phone */

.readout {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 9px;
  border-radius: var(--r-panel);
  white-space: nowrap;
}
.readout-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--deep); color: var(--mint); }
.readout-icon .i { width: 20px; height: 20px; }
.readout-text { display: grid; }
.readout-label { color: var(--text); font-size: 0.75rem; font-weight: 560; line-height: 1.3; }
.readout-value { color: var(--heading); font-size: 0.96875rem; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.readout-value.is-new { animation: value-in 0.55s var(--ease-out) both; }
/* Against the phone's box: the left one only touches the frame, the right one sits over the empty foot of the screen.
   Each is pinned by its outer edge, so a longer value ("In about 10 days") grows in over the phone, never off the page. */
.readout-watered { top: 13%; right: calc(100% - 16px); }
.readout-next { bottom: 9%; right: -104px; }
@media (max-width: 959px) {
  .readout { padding: 7px 12px 7px 7px; gap: 8px; }
  .readout-icon { width: 30px; height: 30px; border-radius: 9px; }
  .readout-icon .i { width: 17px; height: 17px; }
  .readout-value { font-size: 0.875rem; }
  /* Narrow screens: both over the empty foot of the screen, staggered, each reaching out past its own side
     by at most the margin beside the phone (14vw while the phone is 72vw wide). */
  .readout-watered { top: auto; bottom: 13.5%; right: auto; left: calc(-1 * min(40px, 14vw - 10px)); }
  .readout-next { bottom: 2%; right: calc(-1 * min(24px, 14vw - 10px)); }
}

.stage figcaption {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 38px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.875rem;
}
.stage figcaption .i { width: 18px; height: 18px; color: var(--brand); }

/* Sections */

.section { position: relative; isolation: isolate; padding-block: clamp(72px, 9vw, 128px); scroll-margin-top: 84px; }
/* A band of mist behind the light sections; it fades out at both edges, so the words sit straight on the room. */
.how::before, .faq::before, .closing::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: rgb(var(--veil) / 0.64);
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

/* How it works: three concept screens */

/* No pane: each concept screen stands on the room by itself, its words on the mist below it. */
.steps { display: grid; gap: 44px; margin-top: 40px; list-style: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 52px; } }
.step h3 { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.step-num {
  display: inline-grid; place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--brand);
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 650;
  transform: translateY(-2px);
}
.step > p { max-width: 34ch; margin-top: 8px; padding-left: 40px; color: var(--text-2); }
.section-note { margin-top: 40px; color: var(--text-3); font-size: 0.875rem; }

.preview {
  position: relative;
  height: 266px;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  box-shadow: var(--shadow-md);
}

/* 1: the add-a-plant sheet */
.sheet { padding: 14px 16px; font-size: 0.8125rem; }
.sheet-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--app-green); font-size: 0.875rem; }
.sheet-bar b { color: var(--app-text); font-weight: 650; }
.sheet-add { justify-self: end; font-weight: 650; }
.sheet-rows { margin-top: 14px; border-radius: 12px; background: var(--app-card); }
.sheet-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.sheet-row + .sheet-row { border-top: 1px solid var(--app-line); }
.sheet-row span { color: var(--app-text-2); }
.sheet-row b { font-weight: 560; }
.sheet-label { margin: 11px 0 5px 4px; color: var(--app-text-2); font-size: 0.75rem; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 10px; background: var(--app-fill); font-size: 0.75rem; text-align: center; }
.seg span { padding: 6px 4px; border-radius: 8px; color: var(--app-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg .on { background: var(--app-card); color: var(--app-text); font-weight: 620; box-shadow: 0 1px 3px rgb(16 36 30 / 0.12); }
/* Narrow phones: the sheet gives its labels the room, so "Bright window" stays whole from 360px up. */
@media (max-width: 479px) { .sheet { padding-inline: 12px; } .seg span { padding-inline: 2px; } }

/* 2: the check, as it arrives on the lock screen */
.lock {
  position: absolute; inset: 0;
  display: grid; align-content: space-between;
  padding: 18px 16px 18px;
  background: linear-gradient(rgb(12 24 20 / 0.12), rgb(12 24 20 / 0.42)), url("/assets/room-deep-v1.webp") 50% 45% / cover;
  color: #fff;
}
.lock-time { text-align: center; font-size: 3.4rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 12px rgb(0 0 0 / 0.12); }
.notif {
  position: relative;
  padding: 11px 13px 12px;
  border-radius: 18px;
  background: rgb(246 244 238 / 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  color: var(--app-text);
  font-size: 0.8125rem;
  box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.35);
}
.notif-back { position: absolute; left: 28px; right: 28px; bottom: 10px; height: 40px; padding: 0; opacity: 0.55; }
.notif-head { display: flex; align-items: center; gap: 7px; color: var(--app-text-2); font-size: 0.75rem; }
.notif-head b { color: var(--app-text); font-weight: 650; }
.notif-head span:last-child { margin-left: auto; }
.notif-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--green); color: #fff; }
.notif-icon svg { width: 7px; height: 11px; fill: currentColor; }
.notif-plant { margin-top: 7px; font-weight: 600; }
.notif-q { font-family: var(--serif); font-size: 1.375rem; font-variation-settings: "opsz" 72; line-height: 1.15; color: var(--app-deep); }
.notif-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; text-align: center; font-weight: 620; }
.notif-actions span { padding: 7px 0; border-radius: 10px; background: var(--app-fill); color: var(--app-deep); }
.notif-actions .on { background: var(--app-green); color: var(--app-on-green); }
/* Dark appearance: the wallpaper dims and the notification turns to smoked glass, like the other two screens. */
@media (prefers-color-scheme: dark) {
  .lock { background-image: linear-gradient(rgb(6 12 10 / 0.42), rgb(6 12 10 / 0.7)), url("/assets/room-deep-v1.webp"); }
  .notif { background: rgb(30 37 34 / 0.8); box-shadow: 0 8px 24px -10px rgb(0 0 0 / 0.6); }
}

/* 3: rhythms, one per plant */
.rhythms { display: grid; gap: 16px; padding: 18px 18px 14px; }
.rh p { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8125rem; }
.rh b { font-weight: 650; }
.rh p span { color: var(--app-text-2); }
.rh svg { width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.rh-dots { stroke: var(--app-dot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 8; }
.rh-today { stroke: var(--app-text); stroke-width: 1.6; stroke-linecap: round; }
.rh-w { fill: var(--app-green); }
.rh-n { fill: var(--app-bg); stroke: var(--app-green); stroke-width: 2.2; }
.rh-axis { position: relative; height: 1.2em; margin-top: -4px; color: var(--app-text-2); font-size: 0.6875rem; }
.rh-axis-today { position: absolute; left: 73.2%; transform: translateX(-50%); font-weight: 650; color: var(--app-text); }

/* Why Dewlet: the one dark passage, smoked green glass */

.why-panel {
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-panel);
  background: rgb(8 46 38 / 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), var(--shadow-md);
  color: #CFE2DA;
}
@media (prefers-color-scheme: dark) { .why-panel { background: rgb(18 58 48 / 0.62); } }
.why-panel h2 { color: #F2F8F5; }
.reasons { display: grid; margin-top: 36px; list-style: none; }
.reason { display: grid; gap: 10px; padding-block: 24px; border-top: 1px solid rgb(232 245 240 / 0.16); }
.reason:last-child { padding-bottom: 0; }
.reason h3 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); font-weight: 560; line-height: 1.2; letter-spacing: -0.02em; color: var(--mint); }
.reason p { max-width: 52ch; color: #CFE2DA; }
@media (min-width: 860px) {
  .reason { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: baseline; padding-block: 30px; }
}

/* Questions */

.faq-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.faq-intro p { margin-top: 14px; color: var(--text-2); }
.faq-list { padding: 6px 28px; border-radius: var(--r-panel); }
.faq details + details { border-top: 1px solid var(--line); }
/* site.js glides each answer open and shut. Mid-glide the row clips its answer, and the mark already shows where it is going. */
.faq details.is-animating { overflow: hidden; overflow: clip; overflow-clip-margin: 6px; }
.faq summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-weight: 620;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 2px; top: 50%;
  width: 26px; height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background:
    linear-gradient(var(--brand), var(--brand)) center / 11px 1.75px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.75px 11px no-repeat,
    rgb(15 107 87 / 0.09);
  transition: transform 0.45s var(--ease-out), background-size 0.35s var(--ease-out), background-color 0.2s, scale 0.4s var(--spring);
}
.faq summary:hover::after { background-color: rgb(15 107 87 / 0.16); }
.faq summary:active::after { scale: 0.84; transition-duration: 0.45s, 0.35s, 0.2s, 0.08s; }
.faq details[open]:not(.is-closing) summary::after { transform: rotate(180deg); background-size: 11px 1.75px, 1.75px 0, auto; }
.faq details p { padding: 0 44px 22px 0; color: var(--text-2); }

/* Closing */

.closing-inner { display: grid; justify-items: center; text-align: center; }
.closing-leaf { width: 26px; height: 40px; fill: var(--brand); }
.closing h2 { margin-top: 22px; font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1; letter-spacing: -0.032em; }
.closing p { max-width: 40ch; margin-top: 16px; color: var(--text-2); font-size: 1.1875rem; }
.closing .btn { margin-top: 30px; }

/* Footer */

.site-footer { position: relative; isolation: isolate; padding-block: 36px 44px; color: var(--text-2); font-size: 0.9375rem; }
/* The floor of the photograph is dark; the footer gets its own mist so small text keeps its contrast. */
.site-footer::before {
  content: "";
  position: absolute; inset: -40px 0 0;
  z-index: -1;
  background: rgb(var(--veil) / 0.78);
  -webkit-mask-image: linear-gradient(transparent, #000 40px);
  mask-image: linear-gradient(transparent, #000 40px);
}
.footer-inner { display: grid; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.logo-sm { height: 30px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; }
.footer-links a { color: var(--text); }
@media (min-width: 760px) {
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
}

/* Simple pages: privacy notice, thanks, 404 */

.site-header > .wrap { display: flex; align-items: center; height: 62px; padding: 0 22px; border-radius: 999px; }
.page { padding-block: 32px 80px; }
.page > .wrap { max-width: 820px; padding: clamp(26px, 6vw, 64px); border-radius: var(--r-panel); background: var(--glass-strong); }
.page .wrap > * { max-width: 680px; }
.page h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); line-height: 1.06; letter-spacing: -0.028em; }
.page h2 { margin-top: 40px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.018em; }
.page p, .page ul { margin-top: 12px; }
.page ul { padding-left: 1.25em; }
.page li + li { margin-top: 8px; }
.page .meta { margin-top: 10px; color: var(--text-2); font-size: 0.9375rem; }
.page .back { margin-top: 32px; }
.page + .site-footer .footer-inner, .page ~ .site-footer .footer-inner { border-top: 0; }

/* Motion. One authored entrance on load (words rise, then the phone swings in on a spring and the
   readouts settle), and a scroll-linked focus pull from the room to the page. Nothing here hides
   content without CSS animation support: the end state is the resting state. */

@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes device-in { from { transform: translate3d(0, 120px, -180px) rotateY(-36deg) rotateX(18deg); } }
@keyframes float { 50% { transform: translate3d(0, -14px, 0) rotateZ(-0.6deg); } }
@keyframes shadow-breathe { 50% { transform: scale(0.84); opacity: 0.68; } }
@keyframes readout-in { from { opacity: 0; scale: 0.88; } }
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes value-in { from { opacity: 0; transform: translateY(7px); filter: blur(3px); } }
@keyframes result-in { from { opacity: 0; transform: translateY(5px); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-join { animation: rise 1s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-join { animation-delay: 0.14s; }
  .stage-3d { animation: fade 0.9s ease-out 0.25s both; }
  .device-enter { animation: device-in 1.8s var(--spring) 0.25s both; }
  .device-float { animation: float 7.5s ease-in-out 2s infinite; }
  .device-shadow { animation: shadow-breathe 7.5s ease-in-out 2s infinite; }
  .readout { animation: readout-in 1s var(--spring) both, bob 6.5s ease-in-out infinite; }
  .readout-watered { animation-delay: 1.15s, 2.4s; }
  .readout-next { animation-delay: 1.35s, 3.1s; }
  .stage figcaption { animation: fade 0.8s ease-out 1.6s both; }

  @supports (animation-timeline: scroll()) {
    .scene-far { animation: fade-up linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .scene-near { animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
    @keyframes fade-up { to { opacity: 1; } }
    @keyframes settle { to { transform: scale(1.05); } }

    /* Only beside the words: stacked, the form sits right under the phone and the drift would slide over it. */
    @media (min-width: 960px) { .stage { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } }
    @keyframes drift { to { transform: translateY(16%); } }

    .step { animation: step-in linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    .step:nth-child(2) { animation-range: entry 6% entry 82%; }
    .step:nth-child(3) { animation-range: entry 12% entry 88%; }
    @keyframes step-in { from { opacity: 0; transform: translateY(48px); } }

    .why-panel { animation: panel-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes panel-in { from { opacity: 0; transform: translateY(56px) scale(0.975); filter: blur(4px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scene-far { opacity: 0.5; }
}