/* Tick & Tide — www.tickandtide.app
   Colours: Still Water (Shared/Theme.swift). Light = paper and teal, dark = Night Tide. */

/* ==== APP STORE SWITCH ====================================================================
   The app is live (1.0 approved 1 Oct 2026): the real App Store badge shows.
   When it is live: change `none` to `flex` on the first line and `flex` to `none` on the second.
   (Nothing else needs editing: every page carries both badges.) */
.store-live { display: flex; }
.store-soon { display: none; }
/* ========================================================================================== */

:root {
  color-scheme: light dark;
  --bg: #F5F2EC;
  --bg-alt: #EDE8DF;
  --card: #FFFFFF;
  --ink: #1D2126;
  --muted: #5E646B;
  --line: #E4DFD6;
  --since: #1F5F5B;
  --since-soft: #E3EEEC;
  --until: #A5552F;
  --until-soft: #F5E7DE;
  --on-accent: #FFFFFF;
  --sun: #F2A65A;
  --sun-deep: #E0965A;
  --moon: #FFF9EA;
  --paper: #F5F2EC;
  --focus: #1F5F5B;
  --error: #A33A2A;
  --sea-top: #2A6F69;
  --sea-mid: #1F5F5B;
  --sea-low: #144346;
  --sea-deep: #0E3134;
  --shadow: rgba(14, 58, 59, .22);
  --radius: 22px;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  /* Scene switches (the night scene is drawn only in dark). */
  --show-day: block;
  --show-night: none;
  --band-bg:
    radial-gradient(40% 60% at 90% 0%, rgba(242,166,90,.28), rgba(242,166,90,0) 70%),
    linear-gradient(172deg, var(--sea-top), var(--sea-low) 70%, var(--sea-deep));
  --then: #F7C48C;
  --dot: var(--sun);
  /* Today's scene, Still Water by day (the app icon: scripts/icon/final.json, r8 calmer water). */
  --sky-top: #F6E1C8;
  --sky-low: #F5E8D7;
  --hero-ink: var(--ink);
  --hero-soft: #454B52;
  --hero-then: var(--until);
  --hero-focus: var(--since);
  --hero-line: rgba(29,33,38,.16);
  --hero-chip: rgba(255,255,255,.4);
  --hero-chip-ink: rgba(29,33,38,.66);
  --hero-chip-on: rgba(29,33,38,.1);
  --hero-hover: rgba(29,33,38,.07);
  --hero-bar: color-mix(in srgb, var(--sky-top) 80%, transparent);
  /* The page behind the app's Today screen in the hero phone (Still Water, DESIGN-LANGUAGE.md). */
  --app-page: #F5F2EC;
  /* The water as Today paints it (iOS/Views/SceneWater.swift, day-light): the icon's hues, translucent over the sky. */
  --water-top: rgba(63,126,119,.3);
  --water-low: rgba(29,78,74,.5);
  --water-back: rgba(153,185,178,.5);
  --swell: #1D4E4A;
  --swell-a1: .16;
  --swell-a2: .2;
  --horizon: #F5F2ED;
  --horizon-a: 1;
  --glow-rgb: 242 166 90;
  --glow-a: .34;
  --cloud-img: url("img/scene-cloud.svg");
  --cloud-lit: none;
  --bird: #1F5F5B;
  /* "Moments along the way": paper warming to sand, like the app's morning sky. */
  --moments-bg:
    radial-gradient(55% 32% at 88% 18%, rgba(242,166,90,.16), rgba(242,166,90,0) 70%),
    linear-gradient(180deg, #F2E9DD 0%, #F5E6D5 30%, #F3E0CC 100%);
  --moments-glow-a: rgba(127,200,187,.22);
  --moments-glow-b: rgba(242,166,90,.2);
  --card-ring: rgba(255,255,255,.7);
  --shot-ring: transparent;
  --field-line: var(--line);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E646B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Dark = night. The same tokens twice: once for Auto (follows the system), once for the header's "Dark" choice.
   Keep the two blocks identical. assets/theme.js sets data-theme="light" | "dark" on <html>, or nothing for Auto. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1620;
    --bg-alt: #101C28;
    --card: #15212D;
    --ink: #E7EDF1;
    --muted: #9AA8B4;
    --line: #243444;
    --since: #7FC8BB;
    --since-soft: #18332F;
    --until: #E6AE72;
    --until-soft: #3A2B1C;
    --on-accent: #0D1620;
    --sun: #E0965A;
    --moon: #F1E9C9;
    --focus: #7FC8BB;
    --error: #FF9C8A;
    --sea-top: #0B1830;
    --sea-mid: #12253A;
    --sea-low: #0F1D2C;
    --sea-deep: #0D1620;
    --shadow: rgba(0, 0, 0, .5);
    --show-day: none;
    --show-night: block;
    --band-bg:
      radial-gradient(40% 70% at 88% 0%, rgba(241,233,201,.07), rgba(241,233,201,0) 70%),
      linear-gradient(180deg, #0D1620 0%, #0B1830 30%, #12253A 70%, #0D1620 100%);
    --then: #F1D9A8;
    --dot: #F1E9C9;
    /* Today's scene at night, Night Tide (the app icon's night). */
    --sky-top: #0B1830;
    --sky-low: #102137;
    --hero-ink: var(--paper);
    --hero-soft: rgba(245,242,236,.86);
    --hero-then: #F1D9A8;
    --hero-focus: var(--moon);
    --hero-line: rgba(245,242,236,.22);
    --hero-chip: rgba(7,18,26,.14);
    --hero-chip-ink: rgba(245,242,236,.72);
    --hero-chip-on: rgba(245,242,236,.2);
    --hero-hover: rgba(255,255,255,.1);
    --hero-bar: color-mix(in srgb, var(--sky-top) 76%, transparent);
    --app-page: #0D1620;
    --water-top: rgba(58,110,112,.78);
    --water-low: rgba(23,58,64,.95);
    --water-back: rgba(40,69,74,.92);
    --swell: #173A40;
    --swell-a1: .28;
    --swell-a2: .34;
    --horizon: #F1E9C9;
    --horizon-a: .32;
    --glow-rgb: 241 233 201;
    --glow-a: .22;
    --cloud-img: url("img/scene-cloud-lit-l.svg");
    --cloud-lit: block;
    --moments-bg:
      radial-gradient(45% 30% at 86% 14%, rgba(241,233,201,.06), rgba(241,233,201,0) 70%),
      linear-gradient(180deg, #102035 0%, #0C1A30 35%, #08111F 100%);
    --moments-glow-a: rgba(127,200,187,.15);
    --moments-glow-b: rgba(241,233,201,.1);
    --card-ring: rgba(241,233,201,.16);
    --shot-ring: rgba(231,237,241,.07);
    --field-line: #33475A;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA8B4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1620;
  --bg-alt: #101C28;
  --card: #15212D;
  --ink: #E7EDF1;
  --muted: #9AA8B4;
  --line: #243444;
  --since: #7FC8BB;
  --since-soft: #18332F;
  --until: #E6AE72;
  --until-soft: #3A2B1C;
  --on-accent: #0D1620;
  --sun: #E0965A;
  --moon: #F1E9C9;
  --focus: #7FC8BB;
  --error: #FF9C8A;
  --sea-top: #0B1830;
  --sea-mid: #12253A;
  --sea-low: #0F1D2C;
  --sea-deep: #0D1620;
  --shadow: rgba(0, 0, 0, .5);
  --show-day: none;
  --show-night: block;
  --band-bg:
    radial-gradient(40% 70% at 88% 0%, rgba(241,233,201,.07), rgba(241,233,201,0) 70%),
    linear-gradient(180deg, #0D1620 0%, #0B1830 30%, #12253A 70%, #0D1620 100%);
  --then: #F1D9A8;
  --dot: #F1E9C9;
  /* Today's scene at night, Night Tide (the app icon's night). */
  --sky-top: #0B1830;
  --sky-low: #102137;
  --hero-ink: var(--paper);
  --hero-soft: rgba(245,242,236,.86);
  --hero-then: #F1D9A8;
  --hero-focus: var(--moon);
  --hero-line: rgba(245,242,236,.22);
  --hero-chip: rgba(7,18,26,.14);
  --hero-chip-ink: rgba(245,242,236,.72);
  --hero-chip-on: rgba(245,242,236,.2);
  --hero-hover: rgba(255,255,255,.1);
  --hero-bar: color-mix(in srgb, var(--sky-top) 76%, transparent);
  --app-page: #0D1620;
  --water-top: rgba(58,110,112,.78);
  --water-low: rgba(23,58,64,.95);
  --water-back: rgba(40,69,74,.92);
  --swell: #173A40;
  --swell-a1: .28;
  --swell-a2: .34;
  --horizon: #F1E9C9;
  --horizon-a: .32;
  --glow-rgb: 241 233 201;
  --glow-a: .22;
  --cloud-img: url("img/scene-cloud-lit-l.svg");
  --cloud-lit: block;
  --moments-bg:
    radial-gradient(45% 30% at 86% 14%, rgba(241,233,201,.06), rgba(241,233,201,0) 70%),
    linear-gradient(180deg, #102035 0%, #0C1A30 35%, #08111F 100%);
  --moments-glow-a: rgba(127,200,187,.15);
  --moments-glow-b: rgba(241,233,201,.1);
  --card-ring: rgba(241,233,201,.16);
  --shot-ring: rgba(231,237,241,.07);
  --field-line: #33475A;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239AA8B4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--since); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.eyebrow { font: 600 .8rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--since); margin: 0 0 .9rem; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 40rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.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;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.todo { background: #FFE9A8; color: #3B2A00; padding: 0 .25em; border-radius: 4px; }

/* ---- Header ------------------------------------------------------------------------------
   Fixed. Transparent over the hero's sky; a translucent sky bar while the hero is still under it (.is-scrolled);
   paper (night: navy) once past it (.is-past). assets/site.js sets the classes. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40;
  transition: background-color .35s ease, box-shadow .35s ease, color .35s ease; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.site-header.is-scrolled { background: var(--hero-bar);
  -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px);
  box-shadow: 0 1px 0 var(--hero-line); }
.site-header.is-past { background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink); --focus: var(--since);
  box-shadow: 0 1px 0 var(--line); }
.site-header.is-past a:not(.btn) { color: var(--ink); }
.site-header.is-past .brand img { box-shadow: 0 0 0 1px var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: var(--sky-top); }
  .site-header.is-past { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.brand picture, .badge-soon picture { display: block; flex: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px var(--hero-line); }
.nav { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.nav a { color: inherit; text-decoration: none; font-weight: 500; font-size: .98rem; padding: 8px 12px; border-radius: 999px; }
.nav a:hover { background: var(--hero-hover); }
.site-header.is-past .nav a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.on-sea { color: var(--paper); --focus: var(--moon); }
.on-sea a:not(.btn) { color: var(--paper); }
/* Over the scene's sky: ink on Still Water's pale morning, paper under Night Tide's stars. */
.on-sky { color: var(--hero-ink); --focus: var(--hero-focus); }
.on-sky a:not(.btn) { color: var(--hero-ink); }
@media (max-width: 880px) { .nav .opt { display: none; } }

/* Theme switch (Auto · Light · Dark) in the header; on narrow screens one button that cycles through them.
   Both are hidden until assets/theme.js wires them up, so they never show without JS. */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; margin-left: 6px; border-radius: 999px;
  border: 1px solid var(--hero-line); background: var(--hero-chip); }
.theme-switch button, .theme-cycle { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--hero-chip-ink); cursor: pointer; transition: background-color .2s, color .2s; }
.theme-switch button:hover, .theme-cycle:hover { color: var(--hero-ink); background: var(--hero-hover); }
.theme-switch button[aria-pressed="true"] { color: var(--hero-ink); background: var(--hero-chip-on); }
.theme-switch svg, .theme-cycle svg { width: 16px; height: 16px; }
.theme-cycle { width: 38px; height: 38px; color: var(--hero-ink); border: 1px solid var(--hero-line); background: var(--hero-chip); }
.theme-cycle svg { display: none; width: 17px; height: 17px; }
.theme-cycle[data-mode="auto"] .ic-auto, .theme-cycle[data-mode="light"] .ic-light, .theme-cycle[data-mode="dark"] .ic-dark { display: block; }
.site-header.is-past .theme-switch, .site-header.is-past .theme-cycle { border-color: var(--line); background: transparent; }
.site-header.is-past .theme-switch button { color: var(--muted); }
.site-header.is-past .theme-switch button:hover, .site-header.is-past .theme-cycle:hover { color: var(--ink); background: var(--line); }
.site-header.is-past .theme-switch button[aria-pressed="true"] { color: var(--ink); background: var(--line); }
.site-header.is-past .theme-cycle { color: var(--ink); }
.theme-cycle { display: none; }
@media (max-width: 480px) {
  .site-header .wrap { gap: 8px; }
  .brand { font-size: 1.15rem; gap: 10px; }
  .nav a { padding: 8px 10px; }
  .theme-switch { display: none; }
  .theme-cycle { display: grid; }
}
.theme-switch[hidden], .theme-cycle[hidden] { display: none; }

/* Language (EN · FR): a small pill beside the theme switch that opens this page in the other language.
   On narrow screens it moves into the menu. */
.site-header .wrap { position: relative; }
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; margin-left: 6px; border-radius: 999px; flex: none;
  border: 1px solid var(--hero-line); background: var(--hero-chip); text-decoration: none; font: 600 .75rem/1 var(--sans); letter-spacing: .05em; }
.lang-switch > span[aria-hidden] { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px;
  color: var(--hero-chip-ink); transition: background-color .2s, color .2s; }
.lang-switch > .is-on { color: var(--hero-ink); background: var(--hero-chip-on); }
.lang-switch:hover > span:not(.is-on) { color: var(--hero-ink); background: var(--hero-hover); }
.site-header.is-past .lang-switch { border-color: var(--line); background: transparent; }
.site-header.is-past .lang-switch > span[aria-hidden] { color: var(--muted); }
.site-header.is-past .lang-switch > .is-on { color: var(--ink); background: var(--line); }
.site-header.is-past .lang-switch:hover > span:not(.is-on) { color: var(--ink); background: var(--line); }

/* Menu (narrow screens, with JS): a round button that opens a small card with the sections, Support and the language.
   assets/site.js opens and closes it (Escape, a tap outside or on a link closes it). */
.menu-btn { display: none; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 999px; cursor: pointer;
  color: var(--hero-ink); border: 1px solid var(--hero-line); background: var(--hero-chip); transition: background-color .2s, color .2s; }
.menu-btn:hover { background: var(--hero-hover); }
.menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn .ic-close, .menu-btn[aria-expanded="true"] .ic-open { display: none; }
.menu-btn[aria-expanded="true"] .ic-close { display: block; }
.site-header.is-past .menu-btn { color: var(--ink); border-color: var(--line); background: transparent; }
.site-header.is-past .menu-btn:hover { background: var(--line); }
.site-menu { --focus: var(--since); position: absolute; top: calc(100% - 8px); right: 0; width: min(300px, 100%); padding: 8px;
  border-radius: 20px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 24px 48px var(--shadow), 0 4px 12px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2,.7,.3,1); }
.site-menu.is-open { opacity: 1; transform: none; }
.site-menu[hidden] { display: none; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-header .site-menu a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.02rem; }
.site-header .site-menu a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-header .site-menu a[aria-current="page"] { color: var(--since); font-weight: 600; }
.menu-lang { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 8px 0 0 14px; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--muted); }
.menu-lang .label { margin-right: auto; }
.site-header .menu-lang a, .menu-lang .is-on { display: inline-flex; min-height: 40px; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: .95rem; }
.menu-lang .is-on { color: var(--since); background: var(--since-soft); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .site-menu, .menu-btn, .lang-switch > span { transition: none; } }
/* The full navigation needs about 880 px (the French labels are longer); below that, the menu takes over. */
@media (max-width: 880px) {
  .js .site-header .nav, .js .site-header .lang-switch { display: none; }
  .js .menu-btn { display: grid; }
  .js .site-header .theme-switch, .js .site-header .theme-cycle { margin-left: auto; }
}
@media (min-width: 881px) { .site-menu { display: none; } }
/* Without JS on a small phone there is no room for the language pill (the pages link each other in the footer too). */
@media (max-width: 480px) { .lang-switch { display: none; } }

/* ---- Hero -------------------------------------------------------------------------------- */
.hero {
  /* The phone stands in the sea, in front of the sun (or moon): --drop moves it down; the hero clips sideways only.
     --sea-in: how much of the sea is inside the hero; --sea-out: how far it runs on below it, fading into the page. */
  --drop: 30px; --sea-in: 150px; --sea-out: 110px; --sea-fade: 70px;
  /* The scene's unit (the sun's radius) and where its sky is anchored (the sun's centre); site.js measures both. */
  --u: 66px; --ay: 142px; --orb-x: calc(89.5% - 66px);
  position: relative; overflow: hidden; overflow-x: clip; overflow-y: visible;
  background: linear-gradient(180deg, var(--sky-top) 0, var(--sky-low) calc(100% - var(--sea-in)), var(--bg) 100%);
  padding: 128px 0 100px;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.1rem); line-height: 1.04; margin-bottom: .45em; color: var(--hero-ink); }
.hero h1 .then { display: block; color: var(--hero-then); }
.hero .sub { font-size: 1.22rem; line-height: 1.55; color: var(--hero-soft); max-width: 34rem; margin-bottom: 1.8rem; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 1.4rem 0 0; padding: 0; list-style: none; color: var(--hero-soft); font-size: .95rem; }
.hero .facts li { display: flex; align-items: center; gap: 8px; }
.hero .facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }

/* ---- Today's scene: Still Water by day, Night Tide at night ---------------------------------
   The app icon's picture (scripts/icon/final.json) as the app paints it on Today (ThemeScenes.swift, SceneSky.swift):
   the sky's gradient; the sun, or the crescent moon, with the icon's glow hugging its lit shape (assets/img/scene-*.svg);
   the icon's three clouds in its layout (in front of the sun and moon), its two birds by day between the back clouds
   and the front one, its stars at night; then the calm sea: the tide edge and horizon line, two soft wide swells and a
   diffuse glow of the sun or moon, running on below the hero and fading into the page.
   assets/site.js brings it to life: the clouds drift together one way, the birds glide across now and then with a few
   wing-beats, a star sparkles every few seconds and a slow shooting star crosses every 30–60 s. Without JS, or with
   Reduce Motion, it is the icon's still picture. Positions are in the scene's unit --u from the anchor --ay. */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky .sun, .sky .moon { position: absolute; right: 10.5%; top: 76px; width: 132px; height: 132px; }
.sun { display: var(--show-day); }
.moon { display: var(--show-night); }
.sun::before, .moon::before { content: ""; position: absolute; inset: -125%; background: url("img/scene-sun.svg") center / 100% 100% no-repeat; }
.moon::before { background-image: url("img/scene-moon.svg"); }

.stars { display: var(--show-night); position: absolute; left: 0; right: 0; top: 0; height: calc(100% - var(--sea-in)); }
.stars i { position: absolute; left: var(--x); top: var(--y); width: max(1.4px, calc(var(--r) * var(--u) / 97.5)); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; background: #FFFFFF; opacity: var(--a);
  animation: tt-twinkle var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes tt-twinkle { from { opacity: calc(var(--a) * .4); } }
.stars i:nth-child(1) { --x: 16.6%; --y: 21.96%; --r: 5; --a: 0.9; --d: 5s; --dl: 0s; }
.stars i:nth-child(2) { --x: 29.3%; --y: 38.85%; --r: 3.5; --a: 0.6; --d: 11.3s; --dl: -3.7s; }
.stars i:nth-child(3) { --x: 76.17%; --y: 20.27%; --r: 6; --a: 0.9; --d: 9.5s; --dl: -7.4s; }
.stars i:nth-child(4) { --x: 85.94%; --y: 45.61%; --r: 4; --a: 0.6; --d: 7.7s; --dl: -3.4s; }
.stars i:nth-child(5) { --x: 12.7%; --y: 55.74%; --r: 3.5; --a: 0.45; --d: 5.9s; --dl: -3s; }
.stars i:nth-child(6) { --x: 63.48%; --y: 25.34%; --r: 3; --a: 0.5; --d: 12.2s; --dl: -6.3s; }
.stars i:nth-child(7) { --x: 40.04%; --y: 16.05%; --r: 3; --a: 0.45; --d: 10.4s; --dl: -1.4s; }
.stars i:nth-child(8) { --x: 88.38%; --y: 70.95%; --r: 2.5; --a: 0.35; --d: 8.6s; --dl: -0.1s; }
.stars i:nth-child(9) { --x: 21%; --y: 79.39%; --r: 2.5; --a: 0.3; --d: 6.8s; --dl: -2.4s; }
.stars i:nth-child(10) { --x: 54.69%; --y: 11.82%; --r: 3; --a: 0.5; --d: 5s; --dl: -3.3s; }
.stars i:nth-child(11) { --x: 9.28%; --y: 35.47%; --r: 3; --a: 0.4; --d: 11.3s; --dl: -3.1s; }
.stars i:nth-child(12) { --x: 92.77%; --y: 28.72%; --r: 3.5; --a: 0.55; --d: 9.5s; --dl: -2.7s; }
.stars i:nth-child(13) { --x: 33.69%; --y: 67.57%; --r: 2.5; --a: 0.35; --d: 7.7s; --dl: -5.9s; }
.stars i:nth-child(14) { --x: 68.26%; --y: 24.63%; --r: 4; --a: 0.54; --d: 5.9s; --dl: -0.9s; }
.stars i:nth-child(15) { --x: 80.96%; --y: 39.16%; --r: 2.8000000000000003; --a: 0.36; --d: 12.2s; --dl: -3s; }
.stars i:nth-child(16) { --x: 27.83%; --y: 23.18%; --r: 4.800000000000001; --a: 0.54; --d: 10.4s; --dl: -3.5s; }
.stars i:nth-child(17) { --x: 37.6%; --y: 44.97%; --r: 3.2; --a: 0.36; --d: 8.6s; --dl: -7.6s; }
.stars i:nth-child(18) { --x: 64.36%; --y: 53.68%; --r: 2.8000000000000003; --a: 0.27; --d: 6.8s; --dl: -1.7s; }
.stars i:nth-child(19) { --x: 15.14%; --y: 27.53%; --r: 2.4000000000000004; --a: 0.3; --d: 5s; --dl: -1.6s; }
.stars i:nth-child(20) { --x: 91.7%; --y: 19.54%; --r: 2.4000000000000004; --a: 0.27; --d: 11.3s; --dl: -2.5s; }
.stars i:nth-child(21) { --x: 40.04%; --y: 66.76%; --r: 2; --a: 0.21; --d: 9.5s; --dl: -7.5s; }
.stars i:nth-child(22) { --x: 72.66%; --y: 74.02%; --r: 2; --a: 0.18; --d: 7.7s; --dl: -0.7s; }
.stars i:nth-child(23) { --x: 6.35%; --y: 15.91%; --r: 2.4000000000000004; --a: 0.3; --d: 5.9s; --dl: -4.7s; }
.stars i:nth-child(24) { --x: 60.94%; --y: 36.25%; --r: 2.4000000000000004; --a: 0.24; --d: 12.2s; --dl: -11.9s; }
.stars i:nth-child(25) { --x: 44.43%; --y: 30.44%; --r: 2.8000000000000003; --a: 0.33; --d: 10.4s; --dl: -5.6s; }
.stars i:nth-child(26) { --x: 85.35%; --y: 63.85%; --r: 2; --a: 0.21; --d: 8.6s; --dl: -6.5s; }
/* A star catching the light (the app's four-point glint), and the slow shooting star; site.js moves and fades them. */
.sparkle, .shoot { display: var(--show-night); position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.sparkle { width: 20px; height: 20px; background: #FFFFFF;
  clip-path: path("M0 10Q8.8 8.8 10 0Q11.2 8.8 20 10Q11.2 11.2 10 20Q8.8 11.2 0 10Z"); }
.shoot { width: 100px; height: 2px; border-radius: 0 1px 1px 0; transform-origin: 100% 50%;
  background: linear-gradient(to left, #FFFFFF, rgba(255,255,255,.45) 25%, rgba(255,255,255,.15) 60%, rgba(255,255,255,0)); }

/* The icon's clouds: flat soft puffs, warm white by day; at night each puff lit on the moon's side (site.js blends the
   lit-left and lit-right pictures as a cloud drifts past the moon). --k: its size, --cx / --cy: where the icon has it. */
.cloud { --s: calc(var(--k) * var(--u)); position: absolute; left: var(--cx); top: calc(var(--ay) + var(--cy) * var(--u));
  width: calc(2.261 * var(--s)); height: calc(.687 * var(--s)); margin: calc(-.409 * var(--s)) 0 0 calc(-1.1305 * var(--s));
  opacity: .6; will-change: transform; }
.cloud::before, .cloud i { content: ""; position: absolute; inset: 0; background: var(--cloud-img) center / 100% 100% no-repeat; }
.cloud i { display: var(--cloud-lit); background-image: url("img/scene-cloud-lit-r.svg"); }
.cloud.c1 { --k: 1.6; --cx: 23.44%; --cy: .35; }
.cloud.c2 { --k: 1.04; --cx: 53.98%; --cy: -.55; }
.cloud.c3 { --k: 1.28; --cx: 73.91%; --cy: 1.03; }
.birds { --z: calc(.25 * var(--u)); display: var(--show-day); position: absolute; left: 69.14%; top: calc(var(--ay) - .9 * var(--u));
  width: calc(4.4 * var(--z)); height: calc(2.6 * var(--z)); margin: calc(-1.2 * var(--z)) 0 0 calc(-1.2 * var(--z));
  overflow: visible; fill: none; stroke: var(--bird); stroke-linecap: round; stroke-linejoin: round; opacity: .6; will-change: transform; }

/* The sea: the tide edge (a paler band under the horizon line) and the water, drifting very slowly; two soft wide swells
   and the diffuse glow below. Each wave strip is two periods wide and slides one period, so it loops without a seam. */
.sea { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--sea-out)); height: calc(14px + var(--sea-in) + var(--sea-out));
  z-index: 1; pointer-events: none; overflow: hidden;
  background:
    linear-gradient(180deg, transparent 60px, var(--water-top) 60px, var(--water-low) calc(14px + var(--sea-in) + var(--sea-out))),
    linear-gradient(180deg, transparent 40px, var(--water-back) 40px);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--sea-out) - var(--sea-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--sea-out) - var(--sea-fade)), transparent); }
.sea .drift { position: absolute; left: 0; top: 0; width: 200%; height: 100%; will-change: transform;
  animation: tt-drift 150s linear infinite; }
.sea .drift svg { display: block; width: 100%; height: 100%; }
.sea .back { height: 40px; }
.sea .back .fill { fill: var(--water-back); }
.sea .back .line { fill: none; stroke: var(--horizon); stroke-opacity: var(--horizon-a); stroke-width: 1.5px; stroke-linecap: round; }
.sea .front { height: 60px; animation-duration: 110s; animation-direction: reverse; }
.sea .front path { fill: var(--water-top); }
.swell { position: absolute; left: 0; right: 0; top: calc(.33 * var(--sea-in) - 26px); bottom: 0; opacity: var(--swell-a1); }
.swell.s2 { top: calc(.6 * var(--sea-in) - 26px); opacity: var(--swell-a2); }
.swell .drift { height: 80px; animation-duration: 130s; }
.swell.s2 .drift { animation-duration: 96s; animation-direction: reverse; }
.swell path { fill: var(--swell); }
.swell::after { content: ""; position: absolute; left: 0; right: 0; top: 80px; bottom: 0; background: var(--swell); }
/* The glow: a wide soft ellipse under the sun or moon (the app's falloff), its light breathing a little. */
.sea-glow { --gh: min(calc(3 * var(--u)), calc(.9 * var(--sea-in))); position: absolute; left: var(--orb-x);
  top: calc(14px + .38 * var(--sea-in) - var(--gh) / 2); width: calc(7.4 * var(--u)); height: var(--gh); margin-left: calc(-3.7 * var(--u));
  background: radial-gradient(closest-side, rgb(var(--glow-rgb) / var(--glow-a)), rgb(var(--glow-rgb) / calc(var(--glow-a) * .9)) 35%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .62)) 60%, rgb(var(--glow-rgb) / calc(var(--glow-a) * .32)) 80%,
    rgb(var(--glow-rgb) / calc(var(--glow-a) * .13)) 92%, rgb(var(--glow-rgb) / 0));
  animation: tt-glow 9s ease-in-out infinite alternate; }
@keyframes tt-drift { to { transform: translateX(-50%); } }
@keyframes tt-glow { from { opacity: .82; transform: scaleX(.97); } to { opacity: 1; transform: scaleX(1.03); } }
/* site.js pauses the scene when it is off-screen or the tab is hidden. */
.scene-paused .sea .drift, .scene-paused .sea-glow, .scene-paused .stars i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sea .drift, .sea-glow, .stars i { animation: none; }
}

.hero-art { position: relative; justify-self: center; width: min(330px, calc((100svh - 150px) * .46)); translate: 0 var(--drop); }
/* The sun and moon beside the phone always stay behind it. */
.art-sky { position: absolute; inset: 0; z-index: 0; }
.art-device { z-index: 1; }
.phone { position: relative; container-type: inline-size; padding: 10px; border-radius: 54px;
  background: linear-gradient(145deg, #2b3338, #0d1216 40%, #1c2429);
  box-shadow: 0 50px 90px rgba(4,20,22,.55), 0 14px 30px rgba(0,0,0,.2), inset 0 0 0 2px rgba(255,255,255,.1); }
.phone img { border-radius: 44px; width: 100%; aspect-ratio: 1320 / 2868; background: var(--paper); }
.phone::after { content: ""; position: absolute; left: 50%; top: calc(10px + 2.7cqw); width: 28%; aspect-ratio: 375 / 110; transform: translateX(-50%); background: #000; border-radius: 999px; }
.hero-art .phone { transform: rotate(5deg); }

/* The hero phone's screen: the whole Today screen, which scrolls before the page does. The screen clips a tall picture
   (the first screen, loaded at once, then the rest, loaded lazily); the status bar and the floating tab bar stay put
   over it, like the app, with the app's soft fade of the page under each while the list is scrolled.
   site.js pins the hero (.hero-pin.is-pinned: sticky at --pin-top, the wrapper --pin-dist taller) and moves the
   picture with --screen-y as the page scrolls through that distance; then the hero lets go and the page moves on.
   Without JS, with Reduce Motion, or on a very short window: no pinning, the top of Today. */
.phone .screen { position: relative; overflow: hidden; border-radius: 44px; aspect-ratio: 1320 / 2868;
  background: var(--app-page); isolation: isolate; }
.phone .screen img { border-radius: 0; aspect-ratio: auto; background: none; display: block; width: 100%; height: auto; }
.screen-scroll { position: absolute; left: 0; top: 0; width: 100%; transform: translate3d(0, var(--screen-y, 0px), 0); }
.screen-scroll > picture { display: block; }
.screen-scroll .screen-top img { aspect-ratio: 1320 / 2868; background: var(--app-page); }
.screen-scroll .screen-rest img { aspect-ratio: 1320 / 3535; background: var(--app-page); }
.screen-status, .screen-tabs { position: absolute; left: 0; width: 100%; z-index: 2; pointer-events: none; }
.screen-status { top: 0; }
.screen-tabs { bottom: 0; }
.screen-edge { position: absolute; left: 0; width: 100%; z-index: 1; pointer-events: none; opacity: var(--screen-edge, 0); }
.screen-edge.top { top: 0; height: 9%; background: linear-gradient(180deg, var(--app-page) 45%, color-mix(in srgb, var(--app-page) 0%, transparent)); }
.screen-edge.bottom { bottom: 0; height: 12%; opacity: 1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--app-page) 70%, transparent) 30%, color-mix(in srgb, var(--app-page) 0%, transparent)); }
/* The room the hero stays pinned for (a sticky element stays inside its parent's content box, so not padding). */
.hero-pin.is-pinned::after { content: ""; display: block; height: var(--pin-dist, 0px); }
.hero-pin.is-pinned > .hero { position: sticky; top: var(--pin-top, 0px); }
.hero-pin.is-pinned .screen-scroll { will-change: transform; }

/* ---- App Store badge --------------------------------------------------------------------- */
.store { align-items: center; gap: 14px; flex-wrap: wrap; }
.badge-soon { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 14px; border-radius: 14px;
  background: #0B0F12; color: #fff; border: 1px solid rgba(255,255,255,.38); text-decoration: none; }
.badge-soon .dot { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.badge-soon small { display: block; font-size: .72rem; letter-spacing: .02em; opacity: .85; line-height: 1.1; }
.badge-soon strong { display: block; font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.badge-live img { height: 54px; width: auto; }
.store .note { font-size: .92rem; opacity: .85; }

/* ---- Sections ---------------------------------------------------------------------------- */
/* Anchors land below the fixed header: html { scroll-padding-top } above. */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 26px; }
.pillar .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; }
.pillar .ic svg { width: 28px; height: 28px; }
.pillar.since .ic { background: var(--since-soft); color: var(--since); }
.pillar.until .ic { background: var(--until-soft); color: var(--until); }
.pillar.tide .ic { background: linear-gradient(160deg, var(--until-soft), var(--since-soft)); color: var(--since); }
.pillar h3 { margin-bottom: .35em; }
.pillar .kicker { font: 600 .78rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.pillar.since .kicker { color: var(--since); }
.pillar.until .kicker { color: var(--until); }
.pillar.tide .kicker { color: var(--muted); }
.pillar p { color: var(--muted); margin: 0; }

/* Moments along the way. One phone that stays put while its screen changes from moment to moment, with each moment's
   cards lifted out around it (scripts/site-assets.cjs: moment-frame, moment-screen-*, moment-pop-*, all the same size).
   On wide screens with motion, that phone is sticky and each moment's cards grow out of it one after the other while
   its text rests beside it (site.js, see below). Elsewhere (narrow screens, Reduce Motion, no JS) each moment shows its
   whole picture (the same phone, same framing, every card at rest) beside or above its text. Dark pictures swap in
   through <source data-scheme="dark"> (theme.js). The dots on the right show the moment in view and jump.
   The background is plain by default; `.moments-glow` (or ?moments=glow) adds a very soft, blurred wave-glow. */
.moments { position: relative; background: var(--moments-bg); overflow: clip; }
.moments.moments-glow::before { content: ""; position: absolute; inset: -80px 0; pointer-events: none;
  background:
    radial-gradient(60% 9% at 18% 22%, var(--moments-glow-a), transparent 72%),
    radial-gradient(55% 8% at 82% 48%, var(--moments-glow-b), transparent 72%),
    radial-gradient(65% 9% at 30% 74%, var(--moments-glow-a), transparent 72%),
    radial-gradient(50% 7% at 76% 92%, var(--moments-glow-b), transparent 72%);
  filter: blur(28px); }
.moments > .wrap, .m-stage { position: relative; z-index: 1; }
.seq { display: grid; gap: clamp(64px, 8vw, 110px) clamp(32px, 6vw, 96px); align-items: center; }
.m-shot { justify-self: center; width: min(460px, 100%); }
.m-shot img { width: 100%; aspect-ratio: 1348 / 2078; }
.m-scene { display: none; }
.m-copy h3 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); }
.m-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.12rem; }
/* A dot moves focus to its moment's text (so Tab carries on from there); the lit text and dot already show it. */
.m-copy:focus, .m-copy:focus-visible { outline: none; }
.m-copy.m1, .m-copy.m4 { --m-len: .4; } .m-copy.m3 { --m-len: .7; }
@media (min-width: 961px) {
  .seq { grid-template-columns: 1fr 1fr; }
  .m-shot.m1 { grid-area: 1 / 1; } .m-copy.m1 { grid-area: 1 / 2; }
  .m-shot.m2 { grid-area: 2 / 2; } .m-copy.m2 { grid-area: 2 / 1; }
  .m-shot.m3 { grid-area: 3 / 1; } .m-copy.m3 { grid-area: 3 / 2; }
  .m-shot.m4 { grid-area: 4 / 2; } .m-copy.m4 { grid-area: 4 / 1; }
  .m-shot.m5 { grid-area: 5 / 1; } .m-copy.m5 { grid-area: 5 / 2; }
}
@media (max-width: 960px) {
  .m-stage { padding-right: 28px; }
  .seq { max-width: 560px; margin-inline: auto; gap: 20px; }
  .m-shot { width: min(420px, 100%); }
  .m-copy:not(:last-child) { margin-bottom: 40px; }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .m-shot { animation: m-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes m-reveal { from { opacity: 0; transform: translateY(48px) scale(.96); } }

/* Dots: a rail as tall as the moments, at the right of the screen; the dots stay in the middle of the screen. */
.m-rail { position: absolute; top: 0; bottom: 0; right: clamp(4px, 2.2vw, 36px); width: 28px; z-index: 2; pointer-events: none; }
.m-dots { position: sticky; top: calc(50vh - 48px); pointer-events: auto; }
.m-dots[hidden] { display: none; }
.m-dots ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; justify-items: center; }
.m-dots a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; }
.m-dots a::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--muted); opacity: .45;
  transition: height .35s ease, opacity .35s ease, background-color .35s ease; }
.m-dots a:hover::before { opacity: .8; }
.m-dots a[aria-current="step"]::before { height: 24px; opacity: 1; background: var(--since); }
.m-dots a[aria-current="step"] { height: 40px; }
@media (prefers-reduced-motion: reduce) { .m-dots a::before { transition: none; } }

/* The sticky sequence (wide screens with motion and JS). The one phone stays put in the left column; each moment's text
   is a tall block whose words stay in the middle of the screen (sticky) while the page scrolls on, so the text rests
   beside the phone for a while. site.js reads each block's scroll position (rAF, transforms and opacity only):
   the moment's screen cross-fades in as its text arrives, then its lifted cards grow out of the phone one after the
   other (each from the spot on the screen it was lifted from, --ox/--oy), rest at full size while the text sits beside
   the phone, and shrink back in before the next card or the next moment. Without JS, on narrow screens or with Reduce
   Motion, each moment shows its whole picture (cards at rest) beside or above its text. */
@media (min-width: 961px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js .seq { --shot-w: min(500px, calc((100vh - 150px) * .64)); grid-template-columns: 1fr 1fr; row-gap: 0; align-items: start; }
  .js .seq .m-shot { display: none; }
  .js .seq .m-scene { display: block; grid-area: 1 / 1 / 6 / 2; justify-self: center; position: sticky;
    top: calc(50vh + 36px - var(--shot-w) * .7708); width: var(--shot-w); aspect-ratio: 1348 / 2078; }
  .m-scene > picture, .m-scene img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .js .seq .m-layer { opacity: 0; will-change: opacity, transform; }
  .js .seq .m-scr.m1 { opacity: 1; }
  .js .seq .m-pop { transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(.2); }
  /* Each moment: a screen's height to arrive and leave, plus a long rest beside the phone for its cards. */
  /* Each moment scrolls for as long as its cards need (--m-len: 1 = two cards; no cards still leaves room to read). */
  .js .seq .m-copy { grid-column: 2; height: calc(100vh + max(900px, 125vh) * var(--m-len, 1)); }
  .js .seq .m-copy.m1 { grid-row: 1; }
  .js .seq .m-copy.m2 { grid-row: 2; }
  .js .seq .m-copy.m3 { grid-row: 3; }
  .js .seq .m-copy.m4 { grid-row: 4; }
  .js .seq .m-copy.m5 { grid-row: 5; }
  .js .seq .m-text { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding-top: 36px; }
  .js .seq.seq-live .m-text { will-change: opacity, transform; }
  /* The moment in the middle of the screen is lit; the others rest in the muted ink (still AA on this background). */
  .js .seq .m-copy h3, .js .seq .m-copy .eyebrow { transition: color .5s ease; }
  .js .seq .m-copy:not(.is-active) h3, .js .seq .m-copy:not(.is-active) .eyebrow { color: var(--muted); }
}
/* The same sequence on phones and narrow windows (with motion and JS, and at least 560 px tall): the phone stays in the
   upper part of the screen, under the header, sized so it and the text both fit; each moment's text is a card that
   rests at the foot of the screen (sticky to the bottom, a blurred backing over whatever is behind) while the page
   scrolls on, and site.js runs the same screens and cards (a longer scroll per moment than on wide screens, so it
   isn't rushed under a thumb). Shorter windows keep the pictures above their text (the rules above). */
@media (max-width: 960px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js .seq { --hdr: calc(70px + env(safe-area-inset-top, 0px)); --text-h: 236px;
    --shot-w: min(400px, calc(100vw - 64px), calc((100svh - var(--hdr) - 18px - var(--text-h)) * .6487));
    grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
  .js .seq .m-shot { display: none; }
  .js .seq .m-scene { display: block; grid-area: 1 / 1 / 6 / 2; justify-self: center; position: sticky; top: calc(var(--hdr) + 4px);
    width: var(--shot-w); aspect-ratio: 1348 / 2078; }
  .m-scene > picture, .m-scene img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .js .seq .m-layer { opacity: 0; will-change: opacity, transform; }
  .js .seq .m-scr.m1 { opacity: 1; }
  .js .seq .m-pop { transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(.2); }
  .js .seq .m-copy { grid-column: 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
    height: calc(100svh + max(1150px, 175svh) * var(--m-len, 1)); margin: 0; }
  .js .seq .m-copy.m1 { grid-row: 1; }
  .js .seq .m-copy.m2 { grid-row: 2; }
  .js .seq .m-copy.m3 { grid-row: 3; }
  .js .seq .m-copy.m4 { grid-row: 4; }
  .js .seq .m-copy.m5 { grid-row: 5; }
  .js .seq .m-text { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 14px 18px 16px; border-radius: 22px;
    background: color-mix(in srgb, var(--card) 84%, transparent); border: 1px solid var(--line);
    -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: 0 12px 30px var(--shadow); }
  .js .seq.seq-live .m-text { will-change: opacity, transform; }
  .js .seq .m-text .eyebrow { margin-bottom: 2px; }
  .js .seq .m-copy h3 { font-size: 1.42rem; margin: 0 0 6px; line-height: 1.2; }
  .js .seq .m-copy .m-text > p:not(.eyebrow) { font-size: .95rem; line-height: 1.45; margin: 0; color: var(--muted); }
  .js .seq .m-copy .m-text > p:not(.eyebrow) + p { margin-top: 6px; }
  .js .seq .m-copy h3, .js .seq .m-copy .eyebrow { transition: color .5s ease; }
  .js .seq .m-copy:not(.is-active) h3, .js .seq .m-copy:not(.is-active) .eyebrow { color: var(--muted); }
}

/* Gallery */
.gallery-sec { background: var(--bg-alt); }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 18px; overflow-x: auto; padding: 8px 16px 22px;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; margin: 0; list-style: none;
  max-width: 1440px; margin-inline: auto; justify-content: safe center; }
.gallery li { scroll-snap-align: start; }
.gallery img { width: 100%; aspect-ratio: 1320 / 2868; border-radius: 20px; box-shadow: 0 16px 36px var(--shadow), 0 0 0 1px var(--shot-ring); background: var(--sea-mid); }
.gallery:focus-visible { outline-offset: -3px; }
.gallery-hint { font-size: .9rem; margin-top: 4px; }

/* What's inside band */
.band { position: relative; overflow: hidden; color: var(--paper);
  background: var(--band-bg); }
.band h2 { color: var(--paper); }
.band .lede { color: rgba(245,242,236,.85); }
.band .eyebrow { color: var(--then); }
.band a { color: var(--paper); }
.inside-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 28px; padding: 0; list-style: none; }
.inside-grid li { background: rgba(245,242,236,.08); border: 1px solid rgba(245,242,236,.16); border-radius: 20px; padding: 24px 20px; }
.inside-grid svg { width: 40px; height: 40px; margin-bottom: 14px; stroke: var(--paper); }
.inside-grid strong { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.inside-grid span { color: rgba(245,242,236,.8); font-size: .96rem; line-height: 1.5; display: block; }

/* Achievements: the words beside two phone shots (Profile › Achievements and a special medal), styled like the gallery. */
.achieve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.achieve-copy > p:not(.eyebrow):not(.lede) { color: var(--muted); font-size: 1.08rem; max-width: 40rem; }
.achieve-shots { display: flex; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.achieve-shots li { flex: 0 1 232px; min-width: 0; }
.achieve-shots li:nth-child(2) { margin-top: 48px; }
.achieve-shots img { width: 100%; height: auto; aspect-ratio: 1320 / 2868; border-radius: 20px; box-shadow: 0 16px 36px var(--shadow), 0 0 0 1px var(--shot-ring); background: var(--sea-mid); }
@media (max-width: 960px) {
  .achieve-grid { grid-template-columns: 1fr; }
  .achieve-copy { text-align: center; }
  .achieve-copy .lede, .achieve-copy > p { margin-inline: auto; }
}

/* Plus: a warm intro, then the extras as cards with small examples from the app (scripts/site-assets.cjs: plus-*). */
.plus { position: relative; }
.plus-chip { display: inline-block; margin: 6px 0 0; padding: 7px 16px; border-radius: 999px; font-size: .92rem; font-weight: 600;
  color: var(--since); background: var(--since-soft); }
.plus-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.p-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.p-card h3 { font-size: 1.22rem; margin: 10px 0 2px; }
.p-card p { color: var(--muted); margin: 0; font-size: .98rem; line-height: 1.55; }
.p-third { grid-column: span 2; }
.p-half { grid-column: span 3; }
.p-full { grid-column: span 6; }
/* The examples are light app screens in both themes, so their mat is the app's paper. */
.p-media { border-radius: 16px; overflow: hidden; background: #F4F1EB; box-shadow: 0 0 0 1px var(--line); }
.p-media img { width: 100%; height: auto; }
.p-third .p-media { aspect-ratio: 16 / 10; display: grid; place-items: center; }
.p-third .p-media picture { width: 100%; }
/* A half card with a picture (Custom milestones): picture beside the text on wide screens, above it on narrower ones. */
@media (min-width: 961px) {
  .p-card.p-half:not(.p-small):not(.p-col) { flex-direction: row; align-items: center; gap: 22px; }
  .p-card.p-half:not(.p-small):not(.p-col) > .p-media { flex: 0 0 46%; }
  .p-card.p-half:not(.p-small):not(.p-col) > .p-media.p-milestone { flex-basis: 220px; max-width: 220px; }
}
.p-col .p-media.p-strip { padding: 8px 4px 4px; }
.p-media.p-milestone { aspect-ratio: 1; }
.p-media.p-milestone img { height: 100%; object-fit: cover; }
.p-media.p-strip { background: none; box-shadow: none; overflow: visible; }
.p-media.p-strip img { filter: drop-shadow(0 10px 18px var(--shadow)); }
.p-themes { margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.p-themes img { width: max(100%, 700px); height: auto; filter: drop-shadow(0 8px 14px var(--shadow)); }
.p-small { flex-direction: row !important; align-items: flex-start; gap: 18px; }
.p-small h3 { margin-top: 2px; }
.p-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--since-soft); color: var(--since); }
.p-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) {
  .plus-grid { grid-template-columns: repeat(2, 1fr); }
  .p-third, .p-half { grid-column: span 1; }
  .p-full { grid-column: span 2; }
  .p-media.p-milestone { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .plus-grid { grid-template-columns: 1fr; }
  .p-third, .p-half, .p-full { grid-column: auto; }
}

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-family: var(--serif); font-size: 1.28rem; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2.5px solid var(--since); border-bottom: 2.5px solid var(--since); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details > div { padding: 0 0 22px; color: var(--muted); }
.faq details > div p:last-child { margin: 0; }

/* Contact */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.form { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 600; font-size: .96rem; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--field-line); border-radius: 12px; padding: 12px 14px; width: 100%; }
.field select { appearance: none; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field .err { margin: 0; color: var(--error); font-size: .92rem; font-weight: 500; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--error); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .small { font-size: .88rem; color: var(--muted); margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 1.05rem/1 var(--sans); border: 0; cursor: pointer;
  padding: 16px 26px; border-radius: 999px; background: var(--since); color: var(--on-accent); text-decoration: none; justify-self: start; }
.btn:hover { filter: brightness(1.08); }
.btn[disabled] { opacity: .6; cursor: progress; }
.notice { border-radius: 18px; padding: 18px 20px; margin: 0 0 4px; }
.notice.ok { background: var(--since-soft); border: 1px solid color-mix(in srgb, var(--since) 35%, transparent); }
.notice.warn { background: var(--until-soft); border: 1px solid color-mix(in srgb, var(--until) 35%, transparent); }
.notice h3 { font-size: 1.2rem; margin: 0 0 4px; }
.notice p { margin: 0; }
.notice[hidden] { display: none; }
#sent { display: none; }
#sent:target, #sent.show { display: block; }
.contact-aside p { color: var(--muted); }
.contact-aside .mail { font-size: 1.15rem; font-weight: 600; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: .95rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 0; }
.site-footer .brand { font-size: 1.1rem; color: var(--ink); }
.site-footer .brand img { width: 28px; height: 28px; border-radius: 7px; }

/* ---- Text pages (privacy, support, 404) ------------------------------------------------- */
/* The same scene as the home page's hero, smaller: a smaller sun or moon, and a slimmer sea with one swell. */
.page-hero { --sea-in: 76px; --sea-out: 36px; --sea-fade: 40px; --u: 44px; --ay: 124px; --orb-x: calc(90% - 40px);
  position: relative; overflow: hidden; overflow-x: clip; overflow-y: visible; padding: 128px 0 100px; color: var(--hero-ink);
  background: linear-gradient(180deg, var(--sky-top) 0, var(--sky-low) calc(100% - var(--sea-in)), var(--bg) 100%); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .sky .sun, .page-hero .sky .moon { right: 10%; top: 84px; width: 80px; height: 80px; }
.page-hero .swell.s1 { top: calc(.55 * var(--sea-in) - 26px); }
.page-hero .swell.s2 { display: none; }
.page-hero h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.4rem); color: var(--hero-ink); margin-bottom: .3em; }
.page-hero p { color: var(--hero-soft); font-size: 1.15rem; max-width: 42rem; margin: 0; }
.prose { max-width: 760px; margin-inline: auto; padding: 48px 0 80px; }
.prose h2 { font-size: 1.75rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.2rem; margin: 1.8em 0 .4em; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--since); }
.prose .short { font-size: 1.2rem; background: var(--since-soft); border-radius: 18px; padding: 18px 22px; }
.prose .contact-block { margin-top: 3rem; }
.qa h3 { font-family: var(--serif); }
/* Medal tables (Support → How do medals work?): scroll sideways on a narrow screen rather than squash. */
.table-scroll { overflow-x: auto; margin: 0 0 1.4em; }
.medal-table { width: 100%; border-collapse: collapse; font-size: .96rem; line-height: 1.45; color: var(--ink); }
.medal-table caption { text-align: left; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; padding: 4px 0 8px; color: var(--ink); }
.medal-table caption span { display: block; font: 400 .92rem/1.4 var(--sans); color: var(--muted); }
.medal-table th, .medal-table td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.medal-table thead th { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.medal-table tbody th { font-weight: 600; }
.medal-table td { color: var(--muted); }
.medal-table .gold { color: var(--until); font-weight: 600; }
.medal-table.special { min-width: 520px; }
.faq .medal-note { font-size: .94rem; }
.helplines { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.helplines p:last-child { margin: 0; }
.lost { text-align: center; padding: 80px 0 110px; }
.lost h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); }
.lost .lede { margin-inline: auto; }
.lost .btn { justify-self: center; margin-top: 12px; }

/* ---- Responsive ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* One column: the sun (or moon) sits at the phone's shoulder, the horizon crosses the phone, and the sky's
     clouds and birds float in the gap above it (site.js anchors them to the phone). */
  .hero { --drop: 76px; --sea-in: 290px; --sea-out: 90px; --u: 65px; --ay: calc(100% - 540px); --orb-x: calc(50% + 119px); padding-bottom: 50px; }
  .hero + .section, .hero-pin + .section { padding-top: calc(clamp(64px, 8vw, 112px) + 40px); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 56px; }
  .hero .sub { margin-inline: auto; }
  .hero .facts, .store { justify-content: center; }
  .hero-art { width: min(280px, calc((100svh - 150px) * .46)); }
  .sky .sun, .sky .moon { display: none; }
  .art-sky .sun, .art-sky .moon { position: absolute; right: -64px; top: -44px; width: 130px; height: 130px; }
  .pillars { grid-template-columns: 1fr; }
}
.art-sky .sun, .art-sky .moon { display: none; }
.art-device { position: relative; }
/* The tilted phone rasterised as one layer (in front of the moving sky), so its edges stay clean. */
.hero .phone { will-change: transform; }
@media (max-width: 960px) {
  .art-sky .sun { display: var(--show-day); }
  .art-sky .moon { display: var(--show-night); }
}
@media (max-width: 720px) {
  .page-hero { --ay: 96px; }
  .page-hero .sky .sun, .page-hero .sky .moon { display: none; }
}
@media (max-width: 960px) {
  .inside-grid { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero { --drop: 70px; padding: 100px 0 40px; }
  .page-hero { padding: 100px 0 80px; }
  .hero .sub { font-size: 1.08rem; }
  .hero-art { width: min(240px, calc((100svh - 150px) * .46)); }
  .phone { border-radius: 40px; padding: 8px; }
  .phone img { border-radius: 33px; }
  .phone .screen { border-radius: 33px; }
  .phone::after { top: calc(8px + 2.7cqw); }
  .inside-grid { grid-template-columns: 1fr; }
  .form .row2 { grid-template-columns: 1fr; }
  .gallery { grid-auto-columns: 70%; }
  .faq summary { font-size: 1.15rem; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* ---- Switching Light ⇄ Dark -------------------------------------------------------------
   assets/theme.js wraps a switch the visitor makes in a View Transition: the page cross-fades while the sun
   sets and the moon rises (and the stars come out), or the reverse. The names exist only during the switch. */
html.vt-theme .sun { view-transition-name: tt-sun; }
html.vt-theme .moon { view-transition-name: tt-moon; }
html.vt-theme .stars { view-transition-name: tt-stars; }
html.vt-theme .art-device { view-transition-name: tt-device; }
html.vt-theme .site-header { view-transition-name: tt-header; }
/* Layers during the switch: the page, then the sky (sun, moon, stars), then the phone, then the header. The moon or
   sun that only exists in the new state would otherwise be stacked last, over the phone. */
::view-transition-group(tt-sun), ::view-transition-group(tt-moon), ::view-transition-group(tt-stars) { z-index: 1; }
::view-transition-group(tt-device) { z-index: 2; }
::view-transition-group(tt-header) { z-index: 3; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .7s; animation-timing-function: ease-in-out; }
::view-transition-group(tt-device), ::view-transition-group(tt-header) { animation-duration: .7s; }
::view-transition-old(tt-device), ::view-transition-new(tt-device),
::view-transition-old(tt-header), ::view-transition-new(tt-header) { animation-duration: .7s; animation-timing-function: ease-in-out; }
html.vt-to-dark::view-transition-old(tt-sun), html.vt-to-light::view-transition-old(tt-moon) { animation: tt-set .55s cubic-bezier(.4,0,.75,.5) both; }
html.vt-to-dark::view-transition-new(tt-moon), html.vt-to-light::view-transition-new(tt-sun) { animation: tt-rise .6s cubic-bezier(.2,.65,.3,1) .2s both; }
html.vt-to-dark::view-transition-new(tt-stars) { animation: tt-fade-in .8s ease .15s both; }
html.vt-to-light::view-transition-old(tt-stars) { animation: tt-fade-out .45s ease both; }
@keyframes tt-set { 80% { opacity: 0; } to { transform: translateY(110px); opacity: 0; } }
@keyframes tt-rise { from { transform: translateY(70px); opacity: 0; } }
@keyframes tt-fade-in { from { opacity: 0; } }
@keyframes tt-fade-out { to { opacity: 0; } }
/* Without View Transitions: the colours fade instead. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .7s ease, color .7s ease, border-color .7s ease, fill .7s ease, stroke .7s ease, box-shadow .7s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Plus → Themes: the app's theme picker, live (theme-picker.js; pictures from scripts/site-themes.cjs). The top of Today
   in a phone, and the picker's solid panel over its foot, in the chosen theme's own card colours. Without JS the card
   keeps the static strip of icons. */
.p-themes.is-live { overflow: visible; margin-top: 22px; }
.p-themes.is-live > picture { display: none; }
.tp { display: flex; flex-direction: column; align-items: center; user-select: none; -webkit-user-select: none; }
.tp img { filter: none; }
.tp-phone { position: relative; width: min(300px, 80%); container-type: inline-size; padding: 9px 9px 0; border-radius: 48px 48px 0 0;
  background: linear-gradient(145deg, #2b3338, #0d1216 40%, #1c2429);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.1);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.tp-phone::after { content: ""; position: absolute; left: 50%; top: calc(9px + 2.7cqw); width: 28%; aspect-ratio: 375 / 110; transform: translateX(-50%); background: #000; border-radius: 999px; }
.tp-screen { position: relative; overflow: hidden; border-radius: 39px 39px 0 0; aspect-ratio: 1320 / 1600; background: var(--app-page); }
.tp .tp-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .28s ease; }
.tp .tp-shot.is-instant { transition: none; }
.tp-panel { --tp-card: #FFFFFF; --tp-ink: #1D2126; --tp-muted: #5E646B; --tp-line: #E4DFD6;
  position: relative; z-index: 1; width: min(100%, 380px); margin-top: -76px; padding: 10px 14px 16px;
  background: var(--tp-card); color: var(--tp-ink); border: 1px solid var(--tp-line); border-radius: 30px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16); text-align: center; touch-action: pan-y; cursor: grab;
  transition: background-color .28s ease, border-color .28s ease; }
.tp.is-dragging .tp-panel { cursor: grabbing; }
.tp-strip { position: relative; height: 72px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.tp-row { position: absolute; left: 50%; top: 7px; height: 58px; display: flex; align-items: center; gap: 14px;
  transition: transform .34s cubic-bezier(.3, .8, .3, 1); will-change: transform; }
.tp.is-dragging .tp-row { transition: none; }
.tp-icon { flex: none; width: 42px; height: 42px; border-radius: 22.5%; opacity: .5; cursor: pointer;
  transition: width .34s cubic-bezier(.3, .8, .3, 1), height .34s cubic-bezier(.3, .8, .3, 1), opacity .2s ease; }
.tp-icon.is-on { width: 58px; height: 58px; opacity: 1; }
.tp-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); pointer-events: none; }
.tp-icon:focus-visible { outline: 2.5px solid var(--tp-ink); outline-offset: 2px; border-radius: 22.5%; }
.p-card .tp-name { margin: 2px 0 0; color: var(--tp-ink); font-weight: 600; font-size: 1.06rem; line-height: 1.3; }
.p-card .tp-detail { margin: 3px auto 0; max-width: 32ch; color: var(--tp-muted); font-size: .94rem; line-height: 1.4; min-height: 2.8em; }
.tp-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.tp-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--tp-ink); opacity: .22; transition: opacity .2s ease; }
.tp-dots span.is-on { opacity: 1; }
@media (min-width: 961px) {
  .p-card.p-theme-card:has(.p-themes.is-live) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: 48px; align-items: center; padding: 34px 40px 30px; }
  .p-theme-card:has(.p-themes.is-live) > h3 { grid-column: 1; align-self: end; font-size: 1.5rem; }
  .p-theme-card:has(.p-themes.is-live) > p { grid-column: 1; align-self: start; font-size: 1.04rem; max-width: 46ch; }
  .p-theme-card > .p-themes.is-live { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tp .tp-shot, .tp-row, .tp-icon, .tp-dots span, .tp-panel { transition: none; }
}

/* Features ("All the little things"): an Apple-style bento that complements What's inside. Each piece sits straight in
   its own tile, sized to its role; the phone at night anchors the middle. Wide: 6 columns × 6 rows, placed by hand; phones: 2 columns. */
.bento { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1060px; }
.bt { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 18px; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.bt picture { display: flex; justify-content: center; min-height: 0; }
.bt img { display: block; max-width: 100%; height: auto; }
.bt-habit img, .bt-live img, .bt-trip img, .bt-rings img, .bt-night img, .bt-watch img { filter: drop-shadow(0 8px 16px var(--shadow)); }
.bt figcaption, .bt-text p:not(.bt-big) { color: var(--muted); font-size: .92rem; font-weight: 600; line-height: 1.3; margin: 0; text-wrap: balance; }
.bt-habit, .bt-live, .bt-night, .bt-watch, .bt-notif, .bt-medal, .bt-themes, .bt-icon { grid-column: span 2; }
.bt-habit img, .bt-live img { width: min(100%, 340px); }
.bt-trip img, .bt-rings img { width: min(100%, 140px); }
.bt-night img { width: min(62vw, 240px); }
.bt-watch img { width: min(44vw, 170px); }
/* The medal is a dark screen of its own: it fills the tile. */
.bt-medal { padding: 0; background: #2C2F2D; border-color: transparent; gap: 0; justify-content: flex-start; }
.bt-medal picture, .bt-medal img { width: 100%; }
.bt-medal img { height: auto; object-fit: cover; }
.bt-medal figcaption { color: #E9E2CF; padding: 0 16px 16px; }
/* A notification as iOS draws it. */
.bt-note { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: min(100%, 360px); padding: 12px 14px; border-radius: 22px;
  background: var(--bg-alt); box-shadow: 0 10px 24px var(--shadow); }
.bt-note img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.bt-note div { min-width: 0; flex: 1; }
.bt-note p { margin: 0; font-size: .9rem; line-height: 1.3; }
.bt-note-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem !important; }
.bt-note-t { font-weight: 700; }
.bt-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.bt-row img { width: 44px; height: 44px; border-radius: 22.5%; box-shadow: 0 6px 14px var(--shadow); }
.bt-icon .bt-row img { width: 64px; height: 64px; }
.bt-arrow { color: var(--muted); font-size: 1.3rem; }
.bt-text { align-items: flex-start; text-align: left; justify-content: flex-end; }
.bt-big { margin: 0; white-space: nowrap; font: 600 1.35rem/1.1 var(--serif, Georgia, serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.bt-p { aspect-ratio: 1; padding: 14px; font-weight: 600; font-size: .95rem; line-height: 1.25; color: var(--ink); }
.bt-p svg { width: 34px; height: 34px; fill: none; stroke: var(--since); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 158px; }
  /* Placed with the arranger (1 Oct). */
  .bt-watch { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .bt-night { grid-column: 3 / span 2; grid-row: 1 / span 4; }
  .bt-live { grid-column: 5 / span 2; grid-row: 1; }
  .bt-p0 { grid-column: 5; grid-row: 2; }
  .bt-quiet { grid-column: 6; grid-row: 2; }
  .bt-trip { grid-column: 1; grid-row: 3; }
  .bt-rings { grid-column: 2; grid-row: 3; }
  .bt-medal { grid-column: 5 / span 2; grid-row: 3 / span 2; }
  .bt-themes { grid-column: 1 / span 2; grid-row: 4; }
  .bt-siri { grid-column: 1; grid-row: 5; }
  .bt-p2 { grid-column: 2; grid-row: 5; }
  .bt-habit { grid-column: 3 / span 2; grid-row: 5; }
  .bt-breathe { grid-column: 5; grid-row: 5; }
  .bt-p1 { grid-column: 6; grid-row: 5; }
  .bt-icon { grid-column: 1 / span 2; grid-row: 6; }
  .bt-export { grid-column: 3; grid-row: 6; }
  .bt-p3 { grid-column: 4; grid-row: 6; }
  .bt-notif { grid-column: 5 / span 2; grid-row: 6; }
  .bt-p { aspect-ratio: auto; font-size: .9rem; }
  .bt-habit img { width: auto; height: 92px; }
  .bt-live img { width: auto; height: 84px; }
  .bt-trip img, .bt-rings img { width: auto; height: 122px; }
  .bt-night img { width: auto; height: 540px; }
  .bt-watch img { width: auto; height: 236px; }
  .bt-medal picture { flex: 1; min-height: 0; overflow: hidden; }
  .bt-medal img { height: 100%; object-fit: cover; object-position: center 30%; }
  .bt-big { font-size: 1.3rem; white-space: nowrap; }
}

.plus-note { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: .92rem; }