/* Pause — website styles. Plain CSS, no build step.
   Identity (docs/design/README.md, "Identité retenue" and "Site : accueil validé"):
   real app screens, very short huge headlines, full-width sections alternating light and dark,
   one amber accent (#B4530F light, #FF9F45 dark), water blue only for water,
   wordmark "pause" in Bricolage Grotesque only; everything else in the system font. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-Variable.ttf") format("truetype");
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #111113;
  --text-2: #57575d;        /* 7.1:1 on white, 6.7:1 on --water-bg */
  --line: rgba(60, 60, 67, 0.18);
  --accent: #b4530f;        /* 5.0:1 on white (text and button) */
  --accent-hover: #8a3f0b;
  --on-accent: #ffffff;
  --water-bg: #f4f9fc;
  --glass-empty: rgba(60, 60, 67, 0.3);
  --water: rgba(50, 173, 230, 0.85);
  /* Dark bands (the alternating full-width sections) */
  --ink-bg: #000000;
  --ink-2-bg: #111113;
  --ink-text: #ffffff;
  --ink-text-2: #b0b0b8;    /* 9.7:1 on black */
  --ink-2-text-2: #bcbcc4;  /* 10:1 on #111113 */
  --ink-accent: #ff9f45;
  --ring-track: rgba(120, 120, 128, 0.32);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Bricolage Grotesque", var(--font);
  --max: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #f5f5f7;
    --text-2: #a8a8b0;      /* 8.6:1 on black */
    --line: rgba(235, 235, 245, 0.18);
    --accent: #ff9f45;      /* 10:1 on black; #2a1300 on it: 8.6:1 */
    --accent-hover: #ffb877;
    --on-accent: #2a1300;
    --water-bg: #05161f;
    --glass-empty: rgba(235, 235, 245, 0.3);
    --ink-bg: #161618;      /* keeps the light/dark alternation visible on a black page */
    --ink-2-bg: #1c1c1e;
    --ink-text-2: #b0b0b8;  /* 8.4:1 on #161618 */
    --ink-2-text-2: #bcbcc4; /* 9:1 on #1c1c1e */
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { max-width: 100%; }

[id] { scroll-margin-top: 24px; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--bg);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 10px;
  z-index: 20;
}
.skip-link:focus { top: 12px; }

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

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.app-icon { display: block; flex: none; border-radius: 22.5%; }
.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.8px;
  line-height: 1;
}

/* ---------- Header ---------- */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-nav { display: flex; gap: 4px 20px; flex-wrap: wrap; font-size: 15px; }
.site-nav a { color: var(--text); text-decoration: none; padding: 10px 0; }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Home: sections ----------
   Every section is at least one screen tall, content centered vertically.
   Each section has a tone (light, ink, water, ink2). Without JavaScript the section paints its own background;
   with site.js the page background cross-fades between tones as you scroll (see Motion). */
.home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.home .site-header a.brand, .home .site-nav a { color: var(--fg, var(--text)); }

.tone {
  --tbg: var(--bg); --fg: var(--text); --fg2: var(--text-2);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--gutter);
  background: var(--tbg);
  color: var(--fg);
}
.tone-ink { --tbg: var(--ink-bg); --fg: var(--ink-text); --fg2: var(--ink-text-2); }
.tone-ink2 { --tbg: var(--ink-2-bg); --fg: var(--ink-text); --fg2: var(--ink-2-text-2); }
.tone-water { --tbg: var(--water-bg); }

.headline {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.say {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--fg2);
  max-width: 34ch;
}
.split {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 64px;
}
.split.text-first-on-phone { flex-wrap: wrap-reverse; }
.copy {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Hero ---------- */
.hero { padding-top: 104px; }
.hero-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.hero-copy {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.hero-sub {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--fg2);
  max-width: 30ch;
}
.get { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.get-note { font-size: 15px; color: var(--fg2); }
.float-in { flex: none; }

/* Spot for Apple's official "Download on the App Store" badge.
   Replace the whole <a class="store-badge"> content with the badge SVG from
   https://developer.apple.com/app-store/marketing/guidelines/ (do not redraw it). */
.store-badge {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 28px;
  background: #111113;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.store-badge:hover { color: #ffffff; background: #2c2c30; }

/* ---------- Big ring ---------- */
.big-ring { flex: 1 1 360px; max-width: 460px; min-width: 0; display: block; }
.big-ring text { font-family: var(--font-round); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Story (pinned iPhone on wide screens) ---------- */
.story-stage { display: none; }
.water-copy .say { max-width: 40ch; }
.glasses {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 20px);
  width: min(100%, 560px);
  margin-top: 12px;
}
.glasses svg { width: 100%; height: auto; display: block; }
.glasses path { stroke-width: 1.6; stroke-linejoin: round; }
.glasses .full path { fill: var(--water); stroke: var(--water); }
.glasses .empty path { fill: none; stroke: var(--glass-empty); }

/* ---------- Data ---------- */
.data .inner { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.data .headline { font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: -0.04em; }
.facts {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  font-size: 1.35rem; color: var(--fg2);
}

/* ---------- Price ---------- */
.price-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.price-lead { font-size: 1.35rem; color: var(--fg2); }
.price-amount {
  font-family: var(--font-round);
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.price-once { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.price-fine { margin: 0; font-size: 1.2rem; color: var(--fg2); }
.price-fine .line { display: inline-block; }
.price-local { margin: -12px 0 0; font-size: 15px; color: var(--fg2); }
.cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 28px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.cta:hover { background: var(--accent-hover); color: var(--on-accent); }


/* ---------- CSS-built iPhone. --s scales the 390x844 app screen. ---------- */
.phone {
  --s: 0.72;
  --bezel: 12px;
  flex: none;
  position: relative;
  width: calc(390px * var(--s) + 2 * var(--bezel));
  height: calc(844px * var(--s) + 2 * var(--bezel));
  padding: var(--bezel);
  border-radius: calc(55px * var(--s) + var(--bezel));
  background: #0e0e10;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
  margin: 0;
}
@media (min-width: 400px) { .phone { --s: 0.8; } }
.phone .screen {
  position: relative;
  width: calc(390px * var(--s));
  height: calc(844px * var(--s));
  border-radius: calc(55px * var(--s));
  overflow: hidden;
  background: #ffffff;
}
.phone .screen > img,
.phone .screen > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Live HTML recreations of the app screens (until real captures exist).
   Laid out at 390x844 points, then scaled. Always the app's light look, like a screenshot. ---------- */
.app {
  position: absolute;
  top: 0; left: 0;
  width: 390px; height: 844px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  overflow: hidden;
  background: #ffffff;
  color: #111113;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.2;
  text-align: left;
}
.app .abs { position: absolute; }
.app .sec { color: rgba(60, 60, 67, 0.72); }
.app .round { font-family: var(--font-round); font-variant-numeric: tabular-nums; }
.app .island {
  position: absolute; z-index: 3;
  top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 18px; background: #000;
}
.app .head { top: 62px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; }
.app .title { font-size: 34px; font-weight: 700; letter-spacing: -0.4px; }
.app .pill {
  height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(120, 120, 128, 0.10);
  font-size: 17px; font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.app .ring { top: 128px; left: 45px; width: 300px; height: 300px; }
.app .ring svg { display: block; }
.app .ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.app .ring-label .big { font-size: 64px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; }
.app .times { top: 450px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app .times div { display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.app .times .k { font-size: 13px; }
.app .times .v { font-weight: 500; display: flex; align-items: center; gap: 6px; }
.app .times div:last-child { text-align: right; align-items: flex-end; }
.app .actions { top: 526px; left: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.app .button {
  width: 100%; height: 50px; border-radius: 25px;
  background: #b4530f; color: #ffffff;
  font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.app .streak { font-size: 15px; }
.app .water { top: 626px; left: 0; width: 390px; height: 116px; padding: 12px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.app .water-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(60, 60, 67, 0.18); padding-top: 12px; }
.app .water-row > div { display: flex; flex-direction: column; gap: 1px; }
.app .water-row strong { font-weight: 600; }
.app .water-row .sec { font-size: 15px; }
.app .water-add {
  height: 40px; padding: 0 16px; border-radius: 20px;
  background: rgba(50, 173, 230, 0.14); color: #0071a4;
  font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.app .water-glasses { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); justify-items: center; }
.app .water-glasses path { stroke-width: 2; stroke-linejoin: round; }
.app .water-glasses .f { fill: rgba(50, 173, 230, 0.85); stroke: rgba(50, 173, 230, 0.85); }
.app .water-glasses .e { fill: none; stroke: rgba(60, 60, 67, 0.3); }
.app .tabbar {
  left: 24px; right: 24px; bottom: 30px; height: 62px; border-radius: 31px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding: 0 6px;
}
.app .tab { height: 52px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 500; color: #111113; }
.app .tab.on { background: rgba(120, 120, 128, 0.12); color: #b4530f; font-weight: 600; }
.app .tab svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Lock screen */
.app.lock { background: #1b1b1f; color: #ffffff; }
.app.lock .island-live {
  top: 11px; left: 95px; width: 200px; height: 37px; border-radius: 19px; background: #000;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
}
.app.lock .island-live span { font-size: 15px; font-weight: 600; color: #ff9f45; }
.app.lock .clock { top: 96px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app.lock .clock .date { font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.app.lock .clock .time { font-size: 96px; font-weight: 600; letter-spacing: -2px; line-height: 1; }
.app.lock .live {
  left: 12px; right: 12px; top: 560px; border-radius: 24px;
  background: rgba(40, 40, 44, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 16px; display: flex; align-items: center; gap: 14px;
}
.app.lock .live .mid { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.app.lock .live .lsec { font-size: 15px; color: rgba(235, 235, 245, 0.7); }
.app.lock .live .left { font-size: 28px; font-weight: 600; }
.app.lock .live .end { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.app.lock .live .end .lsec { font-size: 13px; }
.app.lock .live .end strong { font-weight: 600; }
.app.lock .corners { left: 0; right: 0; bottom: 34px; display: flex; justify-content: space-between; padding: 0 46px; }
.app.lock .corners i { width: 50px; height: 50px; border-radius: 25px; background: rgba(255, 255, 255, 0.14); }
.app.lock .home-bar { bottom: 10px; left: 128px; width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.8); }

/* History */
.app .segmented {
  top: 116px; left: 20px; right: 20px; height: 36px; border-radius: 18px;
  background: rgba(120, 120, 128, 0.12);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px;
}
.app .segmented span { display: flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 16px; }
.app .segmented .on { background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); font-weight: 600; }
.app .stats { top: 166px; left: 16px; right: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app .stats div {
  height: 84px; padding: 12px; border-radius: 18px; background: rgba(120, 120, 128, 0.10);
  display: flex; flex-direction: column; justify-content: space-between;
}
.app .stats .sec { font-size: 13px; line-height: 1.2; }
.app .stats .round { font-size: 22px; font-weight: 600; }
.app .month { top: 262px; left: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; }
.app .month-head { display: flex; align-items: center; justify-content: space-between; }
.app .month-head strong { font-size: 20px; font-weight: 600; }
.app .month-head div { display: flex; }
.app .month-head i { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.app .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; text-align: center; }
.app .cal .wd { font-size: 12px; color: rgba(60, 60, 67, 0.6); height: 20px; }
.app .cal .d { height: 40px; display: flex; align-items: center; justify-content: center; }
.app .cal .d span {
  width: 34px; height: 34px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-variant-numeric: tabular-nums; color: rgba(60, 60, 67, 0.45);
}
.app .cal .d.done span { background: #b4530f; color: #ffffff; font-weight: 600; }
.app .cal .d.today span { border: 2px solid #b4530f; color: #b4530f; font-weight: 600; }
.app .list { top: 620px; left: 20px; right: 20px; margin: 0; padding: 0; list-style: none; }
.app .list li { border-top: 1px solid rgba(60, 60, 67, 0.12); display: flex; align-items: center; gap: 12px; min-height: 52px; }
.app .list li span:first-child { flex: 1; }


/* Lock screen: end-of-fast notification (only shown once site.js animates the screen) */
.app.lock .notif {
  display: none;
  left: 12px; right: 12px; top: 250px;
  border-radius: 24px;
  background: rgba(58, 58, 62, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 16px;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.app.lock .notif .n-body { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.app.lock .notif .n-top { display: flex; justify-content: space-between; font-size: 13px; color: rgba(235, 235, 245, 0.7); }
.app.lock .notif strong { font-weight: 600; }
.app.lock .left { display: grid; }
.app.lock .left > span { grid-area: 1 / 1; }
.app.lock .lv-b { visibility: hidden; }
.app.lock .live-arc { stroke-dashoffset: 9.2; }

/* Water screen: the second label (after the "+ 1 verre" tap) is the final state without JS */
.app .wl { display: grid; }
.app .wl > span { grid-area: 1 / 1; }
.app .wl5 { visibility: hidden; }
.app .water-glasses .f6 { fill: rgba(50, 173, 230, 0.85); stroke: rgba(50, 173, 230, 0.85); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap {
  padding-top: 32px;
  padding-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-2);
}
.site-footer .brand { gap: 8px; }
.site-footer .wordmark { font-size: 20px; letter-spacing: -0.6px; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer nav a { color: var(--text-2); display: inline-block; padding: 10px 0; }
.site-footer nav a:hover { color: var(--accent); }
.site-footer p { margin: 0; }
.site-footer .fine { flex-basis: 100%; font-size: 13px; }

/* ---------- Text pages (help, legal) ---------- */
.page { padding: clamp(48px, 9vw, 104px) 0 clamp(64px, 10vw, 128px); }
.page .wrap { max-width: calc(680px + 2 * var(--gutter)); }
.page h1 {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.page .updated { color: var(--text-2); margin: 0 0 40px; font-size: 15px; }
.page .lead {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 48px;
}
.page h2 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.01em; margin: 48px 0 12px; }
.page p, .page li { line-height: 1.65; }
.page ul { padding-left: 1.2em; }
.page li + li { margin-top: 6px; }
.page li::marker { color: var(--text-2); }
.page address { font-style: normal; }
.page .note {
  margin: 40px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  color: var(--text-2);
}

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  padding: 18px 44px 18px 0;
  font-size: 1.1rem;
  font-weight: 600;
  list-style: none;
  position: relative;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  translate: 0 -70%;
  rotate: 45deg;
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.faq details p { margin: 0 0 20px; color: var(--text-2); }

/* ---------- 404 ---------- */
.notfound {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
}
.notfound .wordmark { font-size: clamp(56px, 16vw, 96px); }
.notfound h1 { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; margin: 24px 0 8px; }
.notfound p { margin: 4px 0; color: var(--text-2); }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .tone { padding-top: 80px; padding-bottom: 80px; }
  .hero { padding-top: 96px; }
  .split { gap: 48px; }
  .hero-inner { gap: 48px; }
}
@media (min-width: 960px) and (max-height: 820px) {
  .phone { --s: 0.7; }
}

/* ---------- Home on phones and small tablets (below 960 px): one screen per swipe ----------
   Each section (and each story step) is exactly one screen tall and is a mandatory snap point,
   so a swipe moves one page, like a vertical video feed. The text keeps its natural height and the
   iPhone shrinks to the room that is left (container query units). The footer snaps at the end.
   Wide screens are not affected. Pure CSS: it also works without JavaScript. */
@media (max-width: 959px) {
  html:has(body.home) { scroll-snap-type: y mandatory; }
  .home .tone {
    height: 100vh;
    height: 100svh;
    min-height: min-content;   /* never clip: on a very short screen the page grows instead */
    padding: 48px 20px 40px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .home .hero { padding-top: 80px; padding-bottom: 32px; }
  .home .site-footer { scroll-snap-align: end; }

  /* Pages with an iPhone: text first in size, the iPhone fills the rest. */
  .home .hero-inner,
  .home .step .split {
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
  }
  .home .step .split.text-first-on-phone { flex-direction: column-reverse; }
  .home .hero-copy { flex: none; gap: 18px; }
  .home .step .copy { flex: none; gap: 14px; }
  .home .hero .float-in,
  .home .step-phone {
    flex: 1 1 0;
    min-height: 160px;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home .hero .float-in .phone,
  .home .step-phone .phone { --bezel: 8px; --s: 0.5; }
  @media (max-height: 700px) {
    .home .hero .float-in .phone,
    .home .step-phone .phone { --s: 0.4; }
  }
  @supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    .home .hero .float-in .phone,
    .home .step-phone .phone {
      --s: min(0.8, tan(atan2(100cqh - 2 * var(--bezel), 844px)), tan(atan2(100cqw - 2 * var(--bezel), 390px)));
    }
  }

  /* Big ring page: the ring never takes more than about half the screen. */
  .home .tone-ink .big-ring { flex: none; width: min(100%, 42vh); width: min(100%, 42svh); }
  .home .tone-ink .split { gap: 40px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  /* Softer: the page still settles on a screen when it stops near one, but never forces it. */
  html:has(body.home) { scroll-snap-type: y proximity; }
  .home .tone { scroll-snap-stop: normal; }
}

/* ---------- Motion ----------
   Hidden or "before" states only apply under html.js, which site.js adds only when the visitor
   has not asked for reduced motion. Without JavaScript, or with reduced motion, every element is
   visible in its final state and nothing moves. Only opacity, transform and SVG stroke offsets animate. */
.ring-arc { stroke-dashoffset: var(--off, 0); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Page background cross-fades between section tones (body[data-tone] is set by site.js). */
  .js body.home {
    --fg: var(--text); --fg2: var(--text-2);
    transition: background-color 0.9s var(--ease), color 0.9s var(--ease);
  }
  .js body.home[data-tone="ink"] { background: var(--ink-bg); color: var(--ink-text); --fg: var(--ink-text); --fg2: var(--ink-text-2); }
  .js body.home[data-tone="ink2"] { background: var(--ink-2-bg); color: var(--ink-text); --fg: var(--ink-text); --fg2: var(--ink-2-text-2); }
  .js body.home[data-tone="water"] { background: var(--water-bg); }
  .js .tone { background: transparent; color: inherit; --fg: inherit; --fg2: inherit; }
  .js .say, .js .hero-sub, .js .get-note, .js .facts, .js .price-lead, .js .price-fine, .js .price-local,
  .js .home .site-header a { transition: color 0.9s var(--ease); }

  /* Gentle reveals */
  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Hero iPhone floats in, then keeps a very slow idle float. */
  .js .float-in.reveal { transform: translate3d(0, 56px, 0) scale(0.98); transition-duration: 1.1s; }
  .js .float-in.reveal.in { transform: none; }
  .js .phone.idle { animation: idle 8s ease-in-out 1.6s infinite; }
  @keyframes idle {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
  }

  /* Rings draw from empty when they come into view; site.js then keeps the hero ring progressing. */
  .js [data-ring] .ring-arc { transition: stroke-dashoffset 1.6s var(--ease) 0.2s, opacity 0.3s; }
  .js [data-ring]:not(.in) .ring-arc { stroke-dashoffset: 100; opacity: 0; }

  /* Big water glasses fill one after the other. */
  .js .glasses .full path { transition: fill-opacity 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 0.12s + 0.3s); }
  .js .glasses:not(.in) .full path { fill-opacity: 0; }

  /* Price: the amount scales in while it counts up, then the three lines follow one another. */
  .js .price .price-amount { opacity: 0; transform: scale(0.88); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
  .js .price.in .price-amount { opacity: 1; transform: none; }
  .js .price .price-once { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.7s var(--ease) 0.6s, transform 0.7s var(--ease) 0.6s; }
  .js .price.in .price-once { opacity: 1; transform: none; }
  .js .price .line { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.6s var(--ease) var(--d), transform 0.6s var(--ease) var(--d); }
  .js .price.in .line { opacity: 1; transform: none; }

  /* App screens: each plays when it becomes visible (.play), and resets instantly when it leaves. */
  /* Lock Screen: the Live Activity slides in, then the "fast complete" notification drops from the top. */
  .js .app.lock .notif { display: flex; opacity: 0; transform: translate3d(0, -170px, 0); }
  .js .app.lock.play .notif { opacity: 1; transform: none; transition: transform 0.8s var(--ease) 1.5s, opacity 0.5s var(--ease) 1.5s; }
  .js .app.lock .live { opacity: 0; transform: translate3d(0, 80px, 0); }
  .js .app.lock.play .live { opacity: 1; transform: none; transition: transform 0.8s var(--ease) 0.3s, opacity 0.6s var(--ease) 0.3s; }
  .js .app.lock .lv-b { visibility: visible; opacity: 0; }
  .js .app.lock.play .lv-a { opacity: 0; transition: opacity 0.4s var(--ease) 1.9s; }
  .js .app.lock.play .lv-b { opacity: 1; transition: opacity 0.4s var(--ease) 2s; }
  .js .app.lock.play .live-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease) 1.5s; }

  /* Water: glasses fill one by one, then "+ 1 glass" is tapped and a sixth glass fills. */
  .js .app.waterscr .water-glasses path.f,
  .js .app.waterscr .water-glasses path.f6 { fill-opacity: 0; stroke: rgba(60, 60, 67, 0.3); }
  .js .app.waterscr.play .water-glasses path.f {
    fill-opacity: 1; stroke: rgba(50, 173, 230, 0.85);
    transition: fill-opacity 0.45s var(--ease) calc(var(--i) * 0.14s + 0.3s), stroke 0.45s var(--ease) calc(var(--i) * 0.14s + 0.3s);
  }
  .js .app.waterscr.play .water-glasses path.f6 {
    fill-opacity: 1; stroke: rgba(50, 173, 230, 0.85);
    transition: fill-opacity 0.5s var(--ease) 1.75s, stroke 0.5s var(--ease) 1.75s;
  }
  .js .app.waterscr.play .water-add { animation: tap 0.6s var(--ease) 1.3s both; }
  @keyframes tap {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(50, 173, 230, 0.45); }
    35% { transform: scale(0.92); }
    100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(50, 173, 230, 0); }
  }
  .js .app .wl5 { visibility: visible; }
  .js .app .wl6 { opacity: 0; }
  .js .app.play .wl5 { opacity: 0; transition: opacity 0.3s var(--ease) 1.75s; }
  .js .app.play .wl6 { opacity: 1; transition: opacity 0.3s var(--ease) 1.8s; }

  /* History: calendar days fill in sequence (stat blocks count up in site.js). */
  .js .app.hist .d.done span { background: transparent; color: rgba(60, 60, 67, 0.45); }
  .js .app.hist.play .d.done span {
    background: #b4530f; color: #ffffff;
    transition: background-color 0.35s var(--ease) calc(var(--i) * 0.07s + 0.25s), color 0.35s var(--ease) calc(var(--i) * 0.07s + 0.25s);
  }
  .js .app.hist .d.today span { border-color: transparent; color: rgba(60, 60, 67, 0.45); }
  .js .app.hist.play .d.today span { border-color: #b4530f; color: #b4530f; transition: border-color 0.4s var(--ease) 1.25s, color 0.4s var(--ease) 1.25s; }

  /* Story: on wide screens one iPhone stays pinned while the text steps scroll past;
     its screen cross-fades Fast -> Lock Screen -> Water -> History. */
  @media (min-width: 960px) {
    .js .story {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 64px;
      max-width: calc(var(--max) + 2 * var(--gutter));
      margin: 0 auto;
      padding: 0 var(--gutter);
    }
    .js .story-steps { grid-column: 1; grid-row: 1; }
    .js .story-stage {
      display: flex;
      align-items: center;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
    }
    .js .step { padding-left: 0; padding-right: 0; }
    .js .step-phone { display: none; }
    .js .stage-phone .app.scr { opacity: 0; transition: opacity 0.7s var(--ease); }
    .js .stage-phone .app.scr.on { opacity: 1; }
  }
}