/* Night Flight: the Travel Timeline site. One sky, light or dark as the visitor's system (or their own choice) has it,
   one line of light, one motion curve.
   Every chapter is a full-viewport stage pinned (position: sticky; top: 0) inside a tall section; scrolling through the
   section plays its story, and only then does the stage scroll away. */

:root {
  /* DARK, the default (html.is-dark): deep neutral near-black in three elevation steps, soft off-white ink, one accent.
     theme.js TOKENS hold exactly these values and tween them in OKLab when the mode changes. */
  --bg: #0c0c0e; --bg2: #151517; --bg3: #1e1e21; --page-back: #1b1b1e;
  --glass: rgba(21, 21, 23, 0.78);
  --hair: rgba(255, 255, 255, 0.10); --hair2: rgba(255, 255, 255, 0.06);
  --ink: #ececf0; --ink2: #a1a1a8; --ink3: #8a8a92;
  --accent: #4a9bff; --accent-fill: #0a6fe0; --on-accent: #ffffff;
  --now: #ff453a; --on-now: #ffffff;   /* the app's red (Palette.swift): every Now marker */
  --sw-track: #232327; --sw-knob: #45454a;   /* the appearance switch */
  --plan: #c9c9cf;
  --red: #ff6961; --amber: #ffcc4d; --green: #4cd471;
  --shadow: rgba(0, 0, 0, 0.55); --sky-top: #0f0f11; --sky-bottom: #0c0c0e;
  /* fixed per mode: wallpapers (Lock, Home, Spotlight), document paper; shadow recipes (black only) */
  --wall-top: #16171b; --wall-bottom: #1c1d22; --paper: #1d1d20; --thumb: #2c2c30;
  --sh-rest: 0 0 0 1px var(--hair), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  --sh-device: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --sh-doc: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  --sh-mac: 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.55);
  /* fixed in both modes */
  --device-body: #1d1d1f; --bezel: #000000;
  --noise: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAHGklEQVR42m2ZiZIkOQhDCfj/b2a3yyA9crcrJqaOzLS5hJCjK6KzM/7+Mup9/r3/+/bvVe/9+7bfp/KVPdd0db7Xu+v9Nk/+9+/9/ntSvdX6775+i9bv499F71393s2/2dDf0vFd6C0wm4hZ/D36982YU8ekmHfv+98C++G3od3tPnzsDHli7NuH9255LNRz7MF69/wMSm/lzxdwx2/R3wXP0XpodE2AUp56Wy5s9+c9hfJtujZ0s3x6rbn/uXS38ZYen5QdutdM9H639gYnep2vjTrq45HqfV7F5MAaNnueiMsHv4fMAoqn/BT7/cR/lk/5oBD7NS4mv5g/GZHK5OjN0LXlped6JmIXngX2134pGxPhONWgPHnXbeX0BmUz+eMi53Gi3ELO9BWbpptUWwMxW9rQzHITuA17jnMCURnb01X79qtsfxZvck0+bHlq+7Gm/Bch5r7x5tZ4afdbiokyyjCI5McL5cSa7Ww5FupgUnWuG5wJ5X4iDW/Nvo1NAa09RgLnTwhPH7B9sKNUJxuAZ6SqPLoQwwi5uFXpW8sHqg06vlKgFCpqPc0mvNxpI1PF2ovIPpAWhEbbW2Nbl0owJvmcFc6OrY9awIupmVJqqPBU594a0S1CD0QtLGRpqa2bb2HO77X5kBfPBlJLOFaGHLedKab0lbBsgXctdzkKxtsG2i3Bkiy0KDp7f5GXevqB7N8KyHYL3y2XnlPy9WKa3B5aeJOMdq4jB8uUK9PQ1by2hfkJoVoDBD0+QLARPKj4BEAosyS2N1BPPRHgvU1L1KfQtMv4l4qcwSZbt48PCqlp1BPcskEJbk4JqstufnQ5emqagUYyzps+p19bxQTsKFI6FZ8aHPwFxKnT89UdF5zA7LT0NijxgFrkXxBHAOPkig1aEG+72m7ZWJVjteW3TGlZIoiYAiczFNJWh0BWzHZKBPR0MANTL0uqRfwmK17ANTvc0BX41Qav3HcWWxMdUTerARcbidDQ4LJAHZ8GHV2AL1U++8r2ySUdtaxft67dBYQold9uIfi/rdRrGZY+N03NUKEllivzHxecGXIf1uDmC67jPhGHXwOqFognQ09bsb3mC/u3Dxl0DIGSSciGT5sKDynNjussaGAgqIQ6gmpl5yj3e9MYU1hbGeZMESzUBSr2vCKbMfN3DntOxKh28EEglGdIC+d8eLL60HIlHckV8qAcAiGCWiqJ1u0JbZB2aBJV4qm3FSUX2KXPCkAwHK1SdOs2LQdR9yyV2PZtxu35MNwDhI0iZs5/476G9/A0rPlRtNX0ZLa6qYQgiN0wDzCyJXhwud+b9TSXQwl7kxpPMyhIiJIrbVDj+96ETWDr0UsYmJQyXM4I8n4jAE33QbEZ8oRSPoeGuLCNno8JbWxIojJxSGlDGRDn3VYhAtLsEhVI0jD7BQSjA+h7wF2B6O9ku+B4pp76DGQFBrRhKlnHTwUK5paXp+29a1H5HsrzoxRodmg02SndxLzrujFDMOQ6IMXpy+JJonIVjM/mBETmBp4VNAuViKqpp8mvk/jpA2gWO5okeYJcCgs1jNUJWrnvgbwTfuVhBdOyARgNxs6mwiVmKFJh0QLDaRTaNj0UqA7zgbCwIlUQWpkDxClwur6K846vTjJpSl0fP+xcbrcsawX3txJQqOT8sIX4DGRWQDzEfXwGo8ThIEioAxRJiOrYGlJBlORsRWrD2djsk+18uTs7QNxBzVyuAuGg0MBm1GcLrrAA1Rcx0XIRHswhU/aZCdUpC73Dgl0dqTrbWJCGdhD31w37DtyEjziiRJF69BUvLEBaJbE4TfBBjj3/lpIiApqXRjOSsPBwcjUhilZSkq2M1yEs0pF/fkGGW+miEhial0JK+bYj6WeYEglLKk+PZ7AeaZ7I/ojyocLHhSYsCUEHIkYkuMLCbp0eUdJVBqidFIGR0+yveDDBYwudF8gLnHsaCYnqijgp2MlhAaogZqMPkmMuDD5eYM7hTcnbdc9ScM4C+TQChBEXahaOAuG0tpbgwhWQvKbC6pw2cSZAO4aWgwSx9AKyenXBuN09MeyWOTGJXQP4IhW5hoCoC2BzF86FVAPUk5agQAk9J0pSHgJnbKXatIbTltRBUv9nFA0jok4DqAxmcBjPw6wdMtgMaTU+Jwd70CBAraP8B5T1zXXppxjVC4hQ0knPUVM1BrHO0+c5YOedluF8dwdIUbe/WoXtPCPXOReyVo7jCU6GDZXIZXZBy0dAOD+U2q5CP2NGoQB5YFUWK7vsD08KTjGfIoK24Hh0qetblXNcNQ+sDrxadrUCGnmOIEItR4NJ21/JI0wcA3bydINAGUctp8J/2rE4TzjOUAkCJ49NQru99xxG8hjbAzQmQEu6nxNgwaySMG073J+k+O99WddF/9oEKzWNIs5ZEcLBBRLtKKt1VSYO613/ADfme6eLrVtBAAAAAElFTkSuQmCC");
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-io: cubic-bezier(0.45, 0, 0.2, 1);
  --quick: 180ms; --zoom: 280ms; --frame: 420ms; --reveal: 900ms;
  --gutter: 16px; --maxw: 1240px; --navh: 56px;
  --fs-display: clamp(44px, 5.4vw + 14px, 96px);
  --fs-h2: clamp(30px, 3.2vw + 14px, 60px);
  --fs-lede: clamp(17px, 0.6vw + 14px, 21px);
  color-scheme: dark;
}
/* LIGHT: today's look on neutral values. The no-JS rule follows the OS; with JS, theme-boot.js sets the class first. */
html.is-light {
  --bg: #f5f5f7; --bg2: #ffffff; --bg3: #ececee; --page-back: #ebebed;
  --glass: rgba(255, 255, 255, 0.78);
  --hair: rgba(0, 0, 0, 0.10); --hair2: rgba(0, 0, 0, 0.06);
  --ink: #1d1d1f; --ink2: #5f5f66; --ink3: #6e6e73;
  --accent: #0066cc; --accent-fill: #0066cc; --on-accent: #ffffff;
  --now: #ff3b30; --on-now: #ffffff;
  --sw-track: #e3e3e8; --sw-knob: #ffffff;
  --plan: #3a3a3e;
  --red: #d70015; --amber: #a05a00; --green: #1f7a35;
  --shadow: rgba(0, 0, 0, 0.12); --sky-top: #fafafa; --sky-bottom: #f5f5f7;
  --wall-top: #e9eaee; --wall-bottom: #f1f2f4; --paper: #fbfbfa; --thumb: #ffffff;
  --sh-rest: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
  --sh-device: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 30px 60px -30px rgba(0, 0, 0, 0.25);
  --sh-doc: 0 1px 1px rgba(0, 0, 0, 0.06), 0 12px 28px -14px rgba(0, 0, 0, 0.25);
  --sh-mac: 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.18);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-js]):not(.is-dark) {
    --bg: #f5f5f7; --bg2: #ffffff; --bg3: #ececee; --page-back: #ebebed;
    --glass: rgba(255, 255, 255, 0.78);
    --hair: rgba(0, 0, 0, 0.10); --hair2: rgba(0, 0, 0, 0.06);
    --ink: #1d1d1f; --ink2: #5f5f66; --ink3: #6e6e73;
    --accent: #0066cc; --accent-fill: #0066cc; --on-accent: #ffffff;
    --now: #ff3b30; --on-now: #ffffff;
    --sw-track: #e3e3e8; --sw-knob: #ffffff;
    --plan: #3a3a3e;
    --red: #d70015; --amber: #a05a00; --green: #1f7a35;
    --shadow: rgba(0, 0, 0, 0.12); --sky-top: #fafafa; --sky-bottom: #f5f5f7;
    --wall-top: #e9eaee; --wall-bottom: #f1f2f4; --paper: #fbfbfa; --thumb: #ffffff;
    --sh-rest: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
    --sh-device: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 30px 60px -30px rgba(0, 0, 0, 0.25);
    --sh-doc: 0 1px 1px rgba(0, 0, 0, 0.06), 0 12px 28px -14px rgba(0, 0, 0, 0.25);
    --sh-mac: 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.18);
    color-scheme: light;
  }
}
/* A stage with its own tone (theme.js applyScoped sets data-tone): the shadow recipes and wallpapers follow it. */
[data-tone="dark"] {
  --wall-top: #16171b; --wall-bottom: #1c1d22; --paper: #1d1d20; --thumb: #2c2c30; --page-back: #1b1b1e;
  --sh-rest: 0 0 0 1px var(--hair), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
  --sh-device: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --sh-doc: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  --sh-mac: 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}
[data-tone="light"] {
  --wall-top: #e9eaee; --wall-bottom: #f1f2f4; --paper: #fbfbfa; --thumb: #ffffff; --page-back: #ebebed;
  --sh-rest: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
  --sh-device: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 30px 60px -30px rgba(0, 0, 0, 0.25);
  --sh-doc: 0 1px 1px rgba(0, 0, 0, 0.06), 0 12px 28px -14px rgba(0, 0, 0, 0.25);
  --sh-mac: 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.18);
}
/* Device-screen tokens: the app's own iOS system colours, only for use inside .screen. They follow the page's mode,
   or the tone of the stage they sit in. */
:root, [data-tone="dark"] {
  --app-bg: #000000; --app-grouped: #000000; --app-cell: #1c1c1e; --app-cell2: #2c2c2e;
  --app-label: #ffffff; --app-label2: rgba(235, 235, 245, 0.6); --app-label3: rgba(235, 235, 245, 0.3);
  --app-sep: rgba(84, 84, 88, 0.65); --app-fill: rgba(120, 120, 128, 0.36);
  --app-blue: #0a84ff; --app-red: #ff453a; --app-green: #30d158; --app-orange: #ff9f0a;
}
html.is-light, html.is-light [data-tone="light"], [data-tone="light"] {
  --app-bg: #ffffff; --app-grouped: #f2f2f7; --app-cell: #ffffff; --app-cell2: #e5e5ea;
  --app-label: #000000; --app-label2: rgba(60, 60, 67, 0.6); --app-label3: rgba(60, 60, 67, 0.3);
  --app-sep: rgba(60, 60, 67, 0.29); --app-fill: rgba(120, 120, 128, 0.2);
  --app-blue: #007aff; --app-red: #ff3b30; --app-green: #34c759; --app-orange: #ff9500;
}
@media (prefers-color-scheme: light) {
  :root:not([data-js]):not(.is-dark) {
    --app-bg: #ffffff; --app-grouped: #f2f2f7; --app-cell: #ffffff; --app-cell2: #e5e5ea;
    --app-label: #000000; --app-label2: rgba(60, 60, 67, 0.6); --app-label3: rgba(60, 60, 67, 0.3);
    --app-sep: rgba(60, 60, 67, 0.29); --app-fill: rgba(120, 120, 128, 0.2);
    --app-blue: #007aff; --app-red: #ff3b30; --app-green: #34c759; --app-orange: #ff9500;
  }
}
@media (min-width: 700px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Nav ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* Always the page's own surface at 84 %, blurred; a hairline once the page has scrolled. Over a stage with its own tone
   (On the day), app.js gives the header that tone's tokens and data-tone, so it never forms a band of another tone. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; color: var(--ink);
  background-color: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 -0.5px 0 transparent;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow var(--quick) var(--ease);
}
.nav.scrolled { box-shadow: inset 0 -0.5px 0 var(--hair2); }
.nav-in { display: flex; align-items: center; gap: 12px; height: var(--navh); }
.brand { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; margin-right: auto; color: var(--ink); }
.brand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest); }
.nav-links { display: none; gap: 20px; font-size: 14px; color: var(--ink2); }
.nav-links a { text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color var(--quick) var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="true"] { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--accent); }
/* the one pill in the nav: quiet, a hairline ring, no fill */
.soon {
  position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 0.5px var(--hair); transition: background-color var(--quick) var(--ease);
}
.soon:hover { background-color: var(--hair2); }
.soon::after, .brand::after { content: ""; position: absolute; inset: -8px -4px; }
/* Appearance: one switch. Its knob carries a sun (Light) or a moon (Dark) and slides across while the page's colours
   crossfade (theme.js, 560 ms); the label on the other side says which, and slides off as the knob pushes past it.
   html[data-scheme] is its state: theme-boot.js sets it before first paint, theme.js at the click (the classes flip at
   the crossfade's midpoint). A 44 px tall button around a 30 px pill; the tokens --sw-track/--sw-knob follow a stage's
   own tone with the rest of the header. Without JavaScript there is nothing to switch, so it is not shown. */
.tsw {
  --w: 74px; --h: 30px; --k: 24px; --p: 3px; --t: 560ms; --e: cubic-bezier(0.4, 0, 0.2, 1);
  --x: calc(var(--w) - var(--k) - 2 * var(--p));
  position: relative; display: none; flex: none; align-items: center; justify-content: center; height: 44px;
  margin: 0; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
html[data-js] .tsw { display: inline-flex; }
.tsw::after { content: ""; position: absolute; inset: 0 -4px; }
.tsw:focus-visible { outline: none; }
.tsw:focus-visible .tsw-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.tsw-track {
  position: relative; display: block; width: var(--w); height: var(--h); border-radius: 999px; background: var(--sw-track);
  box-shadow: inset 0 0 0 0.5px var(--hair); transition: box-shadow var(--quick) var(--ease);
}
@media (hover: hover) { .tsw:hover .tsw-track { box-shadow: inset 0 0 0 0.5px var(--hair), inset 0 0 0 99px var(--hair2); } }
.tsw-knob {
  position: absolute; left: var(--p); top: var(--p); width: var(--k); height: var(--k); border-radius: 50%;
  background: var(--sw-knob); color: var(--ink); box-shadow: 0 0 0 0.5px var(--hair), 0 1px 2px var(--shadow), 0 2px 6px -2px var(--shadow);
  transition: transform var(--t) var(--e);
}
html[data-scheme="dark"] .tsw-knob { transform: translateX(var(--x)); }
.tsw-knob svg {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; fill: currentColor;
  transition: opacity calc(var(--t) * 0.6) var(--ease), transform var(--t) var(--e);
}
.tsw-sun path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tsw-moon { opacity: 0; transform: rotate(-70deg) scale(0.55); }
html[data-scheme="dark"] .tsw-sun { opacity: 0; transform: rotate(80deg) scale(0.55); }
html[data-scheme="dark"] .tsw-moon { opacity: 1; transform: none; }
/* each label holds the side the knob is not on; the one leaving is pushed out the way the knob goes, the one arriving
   follows the knob in */
.tsw-label {
  position: absolute; top: 0; bottom: 0; width: var(--x); display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--sans); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
  transition: opacity calc(var(--t) * 0.55) var(--ease) calc(var(--t) * 0.3), transform var(--t) var(--e);
}
.tsw-l { left: calc(var(--p) + var(--k)); padding-right: 1px; }
.tsw-d { left: var(--p); padding-left: 1px; opacity: 0; transform: translateX(-10px); }
html[data-scheme="dark"] .tsw-l { opacity: 0; transform: translateX(10px); }
html[data-scheme="dark"] .tsw-d { opacity: 1; transform: none; }
html[data-scheme="dark"] .tsw-l, html[data-scheme="light"] .tsw-d { transition: opacity calc(var(--t) * 0.3) var(--ease), transform var(--t) var(--e); }
/* "Auto": a click has handed the page back to the system; it shows for a moment under the switch, then fades */
.tsw-auto {
  position: absolute; left: 50%; top: calc(50% + var(--h) / 2 + 6px); padding: 4px 8px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: 0.02em; color: var(--ink2); white-space: nowrap; pointer-events: none;
  background: var(--bg2); box-shadow: 0 0 0 0.5px var(--hair), 0 4px 12px -6px var(--shadow);
  opacity: 0; transform: translate(-50%, -4px); transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.tsw-auto.on { opacity: 1; transform: translate(-50%, 0); transition-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  .tsw-knob, .tsw-knob svg, .tsw-label, html[data-scheme] .tsw-label { transition: none; }
  .tsw-auto, .tsw-auto.on { transform: translate(-50%, 0); transition-property: opacity; }
}
.reduce .tsw-knob, .reduce .tsw-knob svg, .reduce .tsw-label, html.reduce[data-scheme] .tsw-label { transition: none; }
.reduce .tsw-auto, .reduce .tsw-auto.on { transform: translate(-50%, 0); transition-property: opacity; }
/* Phones: the switch at the pill's 28 px; the name gives way with an ellipsis rather than touch the buttons (a wider
   system font than SF), and the "Coming soon" pill and the gaps tighten; on the smallest phones the app icon stands for
   the name alone (the link's own name still says it), so the switch keeps its label. */
@media (max-width: 400px) {
  .tsw { --w: 66px; --h: 28px; --k: 22px; }
  .tsw-label { font-size: 12px; }
  .tsw-knob svg { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .brand { min-width: 0; }
  .brand img { flex: none; }
  .brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .soon { padding: 0 10px; font-size: 12px; }
}
@media (max-width: 380px) { .brand span { font-size: 15px; } .nav-in { gap: 8px; } }
@media (max-width: 359px) { .brand span { display: none; } }
@media (min-width: 1000px) { .nav-links { display: flex; margin-right: 12px; } }

/* ── Chapters: tall sections with a pinned stage ───────────────────────────────────────────────────────── */
.ch { position: relative; }
.h140 { height: 140vh; } .h200 { height: 200vh; } .h220 { height: 220vh; } .h260 { height: 260vh; } .h300 { height: 300vh; }
.h320 { height: 320vh; } .h480 { height: 480vh; } .h780 { height: 780vh; }
@supports (height: 100svh) {
  .h140 { height: 140svh; } .h200 { height: 200svh; } .h220 { height: 220svh; } .h260 { height: 260svh; } .h300 { height: 300svh; }
  .h320 { height: 320svh; } .h480 { height: 480svh; } .h780 { height: 780svh; }
}
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
@supports (height: 100svh) { .stage { height: 100svh; } }
.ch-rail { position: absolute; z-index: 8; right: 10px; top: calc(var(--navh) + 24px); bottom: 24px; width: 1px; background: var(--hair2); pointer-events: none; }
.ch-rail i { position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); }
@media (max-width: 759px) {
  .ch-rail { top: var(--navh); bottom: auto; right: 0; left: 0; width: auto; height: 1px; }
  .ch-rail i { transform-origin: 0 50%; transform: scaleX(0); }
}

.eyebrow { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.big { margin: 0; font: 600 var(--fs-h2)/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; color: var(--ink); }
.sub { margin: 18px 0 0; max-width: 620px; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink2); text-wrap: balance; }
.avail { margin: 18px 0 0; font-size: 13px; color: var(--ink3); }
.fine { margin: 18px 0 0; font-size: 12px; color: var(--ink3); }

.ch-grid {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px);
  padding-top: var(--navh); padding-bottom: 16px;
}
.ch.rev .ch-copy { order: 2; }
.ch-copy { max-width: 470px; }
.ch.rev .ch-copy { justify-self: end; }
.ch-visual { display: flex; justify-content: center; align-items: center; gap: 28px; min-height: 0; height: 100%; position: relative; }
.beats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: b; }
.beats li {
  position: relative; padding: 10px 0 10px 22px; font-size: 16px; line-height: 1.45; color: var(--ink2); opacity: 1;
  transition: color var(--frame) var(--ease);
}
.beats li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 9px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ink3); transition: background-color var(--frame) var(--ease), box-shadow var(--frame) var(--ease); }
.beats li::after { content: ""; position: absolute; left: 4px; top: 30px; bottom: -14px; width: 1px; background: var(--hair2); }
.beats li:last-child::after { display: none; }
.beats li b { color: inherit; font-weight: 600; }
.beats li.on { color: var(--ink); }
.beats li.on::before { background: var(--accent); box-shadow: none; }
.beats li.done::before { background: var(--ink3); box-shadow: none; }

/* short desktop and tablet screens: the headline comes down a size and the beats sit closer, so every chapter's copy
   fits between the nav (+ 24 px) and the stage's foot */
@media (min-width: 760px) and (max-height: 760px) {
  .ch-grid { padding-top: calc(var(--navh) + 24px); padding-bottom: 24px; }
  .big { font-size: min(var(--fs-h2), max(34px, 7.2svh)); }
  .sub { margin-top: 12px; }
  .beats { margin-top: 16px; }
  .beats li { padding-top: 7px; padding-bottom: 7px; }
  .beats li::before { top: 14px; }
  .beats li::after { top: 27px; bottom: -11px; }
  .avail { margin-top: 12px; }
}
@media (max-width: 759px) {
  .ch-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 8px; padding-top: calc(var(--navh) + 14px); }
  .ch.rev .ch-copy { order: 0; justify-self: start; }
  .big { font-size: clamp(26px, 7.4vw, 34px); }
  .eyebrow { margin-bottom: 8px; }
  .beats { margin-top: 12px; display: grid; }
  .beats li { grid-area: 1 / 1; padding: 0; font-size: 15px; opacity: 0; transform: translateY(6px); transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease); }
  .beats li::before, .beats li::after { display: none; }
  .beats li.on { opacity: 1; transform: none; }
  .beats li.done { opacity: 0; transform: translateY(-6px); }
  .avail { margin-top: 8px; font-size: 12px; }
  .ch-visual { align-items: flex-start; padding-top: 6px; }
}

/* ── Devices ─────────────────────────────────────────────────────────────────────────────────────────── */
.phone {
  --pw: min(300px, calc((100svh - var(--navh) - 120px) * 0.46));
  position: relative; width: var(--pw); aspect-ratio: 598 / 1300; flex: none; border-radius: calc(var(--pw) * 0.17); padding: calc(var(--pw) * 0.034);
  background: var(--device-body); container-type: inline-size;
  box-shadow: var(--sh-device);
  isolation: isolate;              /* its own stack: the Dynamic Island never draws over a paper held in front of it */
}
/* the inner bezel: a black ring between the body's edge and the screen */
.phone::before { content: ""; position: absolute; z-index: 0; inset: calc(var(--pw) * 0.012); border-radius: calc(var(--pw) * 0.158); background: var(--bezel); pointer-events: none; }
.phone > .screen { z-index: 1; }
.phone::after { content: ""; position: absolute; z-index: 3; top: calc(var(--pw) * 0.058); left: 50%; width: 31%; height: calc(var(--pw) * 0.085); transform: translateX(-50%); border-radius: 99px; background: #000; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.14); background: var(--app-bg); font-size: 4.4cqw; color: var(--app-label); }
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .phone { --pw: min(260px, calc((100svh - var(--navh) - 210px) * 0.46)); } }

/* app screens drawn in HTML: the app's own light or dark appearance, from the --app-* tokens only */
.screen.app, .screen.lock {
  /* a grouped row on a sheet or a card (#f2f2f2 light, #292929 dark), and the share tiles (#e0e0e0 light, #363637 dark) */
  --row: color-mix(in srgb, var(--app-label) 5.5%, var(--app-cell));
  --tile: color-mix(in srgb, var(--app-label) 12%, var(--app-cell));
}
.screen.app { background: var(--app-bg); }
.app .st, .lock .st { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms var(--ease), transform 360ms var(--ease); transform: scale(0.985); pointer-events: none; }
.app .st.on, .lock .st.on { opacity: 1; transform: none; }
/* the status bar, either side of the Dynamic Island */
.sb { position: absolute; z-index: 7; inset: 0 0 auto; height: 3em; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5% 0.15em 9%; color: var(--app-label); font: 600 0.9em/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; pointer-events: none; }
.sb-t { min-width: 3.4em; text-align: center; }
.sb-ic { width: 4.2em; height: 0.74em; }
/* a sheet over the journey, as the app presents them */
.st.sheet { inset: 7% 0 0; display: flex; flex-direction: column; background: var(--app-cell); border-radius: 1.5em 1.5em 0 0; transform: translateY(2.5%); box-shadow: 0 -0.5px 0 var(--app-sep); }
.st.sheet.on { transform: none; }
.grab { display: block; flex: none; width: 2.6em; height: 0.28em; margin: 0.45em auto 0; border-radius: 99px; background: var(--app-label3); }
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); opacity: 0; transition: opacity var(--frame) var(--ease); pointer-events: none; }
.scrim.on { opacity: 1; }
.nav-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.4em 1em 0.55em; font-size: 1em; }
.nav-bar b { font-weight: 600; font-size: 0.95em; }
.nav-bar .done, .nav-bar .cancel { padding: 0.36em 0.9em; border-radius: 99px; background: var(--row); font-weight: 600; font-size: 0.86em; box-shadow: inset 0 0 0 0.5px var(--app-sep); white-space: nowrap; }
.nav-bar .done { justify-self: end; }
.nav-bar .cancel { justify-self: start; font-weight: 500; }
.nav-bar .done.blue { background: var(--app-blue); color: #fff; box-shadow: none; }
.av { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; color: #fff; font-weight: 600; font-size: 0.84em; font-style: normal; flex: none; }
/* the people's own colours, as the app gives them; You in ink */
.av.p0 { background: var(--app-label); color: var(--app-bg); } .av.p1 { background: #b04a6e; } .av.p2 { background: #3f6a92; } .av.p3 { background: #5e7d2f; }
.toggle { display: inline-block; width: 2.9em; height: 1.75em; border-radius: 99px; background: var(--app-fill); position: relative; flex: none; }
.toggle::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.18); transition: transform var(--zoom) var(--ease); }
.toggle.on { background: var(--app-green); }
.toggle.on::after { transform: translateX(1.15em); }
.btn-ink, .btn-fill { display: flex; align-items: center; justify-content: center; gap: 0.5em; margin: 0.5em 1em 0; padding: 0.78em; border-radius: 99px; font-size: 0.86em; font-weight: 600; transition: box-shadow var(--quick) var(--ease); }
.btn-ink { background: var(--app-label); color: var(--app-bg); }
.btn-fill { background: var(--row); }
.btn-ink .ic, .btn-fill .ic { width: 1.1em; height: 1.1em; }
.btn-fill.hl { box-shadow: 0 0 0 2px var(--app-blue); }

/* the journey down the screen (Days), as on the iPhone held upright: day, stays, plans, icon, title and times */
.dl { position: absolute; inset: 0; padding-top: 3em; background: var(--app-bg); }
.dl-head { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) 2.3em; align-items: center; gap: 0.4em; padding: 0.3em 0.9em 0.1em; }
.tg .dl-head { grid-template-columns: 2.3em minmax(0, 1fr) auto; }
.dl-btn { width: 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; background: var(--row); box-shadow: inset 0 0 0 0.5px var(--app-sep); }
.dl-btn .ic { width: 1.05em; height: 1.05em; }
.dl-title { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; min-width: 0; }
.dl-title b { font-size: 0.94em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dl-title small { font-size: 0.66em; color: var(--app-label2); white-space: nowrap; }
.dl-people { display: flex; padding-left: 0.4em; }
.dl-people .av { width: 1.7em; height: 1.7em; font-size: 0.62em; margin-left: -0.45em; box-shadow: 0 0 0 0.16em var(--app-bg); transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease); }
.dl-people .av.wait { opacity: 0; transform: scale(0.6); }
.dl-seg { display: flex; align-items: center; gap: 0.7em; margin: 0.55em 0.9em 0.35em; }
.dl-sg { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.16em; border-radius: 99px; background: var(--row); }
.dl-sg i { font-style: normal; text-align: center; font-size: 0.68em; font-weight: 500; padding: 0.4em 0; border-radius: 99px; }
.dl-sg i.on { background: var(--app-cell); font-weight: 600; box-shadow: 0 0 0 0.5px var(--app-sep), 0 0.1em 0.3em rgba(0, 0, 0, 0.12); }
.dl-seg > b { color: var(--app-blue); font-size: 0.8em; font-weight: 600; }
.dl-rows { position: relative; margin-top: 0.2em; }
.dl-r { position: relative; display: grid; grid-template-columns: 2.4em 0.5em 0.5em 1.05em minmax(0, 1fr) auto; align-items: center; column-gap: 0.42em; height: 2.62em; padding: 0 0.9em 0 0.75em; }
.screen [data-hue] { --hue: var(--hd); }
html.is-light .screen [data-hue] { --hue: var(--hl); }
.dl-r.first::before { content: ""; position: absolute; left: 0.75em; right: 0; top: 0; border-top: 0.5px solid var(--app-sep); }
.dl-d { grid-column: 1; align-self: start; padding-top: 0.45em; display: flex; flex-direction: column; line-height: 1.05; }
.dl-d span { font-size: 0.52em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-label2); }
.dl-d b { font-size: 1.08em; font-weight: 600; }
.dl-d.today span, .dl-d.today b { color: var(--app-blue); }
.dl-bar { grid-column: 3; justify-self: center; width: 0.48em; height: 1.95em; border-radius: 0.24em; background: var(--hue); }
.dl-r.idea .dl-bar { background: none; box-shadow: inset 0 0 0 1.5px var(--hue); }
.dl-stay { position: absolute; z-index: 0; left: calc(0.75em + 2.4em + 0.42em + 0.01em); width: 0.48em; border-radius: 0.24em; background: var(--hue); opacity: 0.9; }
.dl-r > .ic { grid-column: 4; width: 1.05em; height: 1.05em; color: var(--hue); }
.dl-t { grid-column: 5; display: flex; flex-direction: column; line-height: 1.22; min-width: 0; }
.dl-t b { font-size: 0.8em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-t small { font-size: 0.64em; color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-r.idea .dl-t b { color: var(--app-label2); }
.dl-r .dl-by { grid-column: 6; width: 1.6em; height: 1.6em; font-size: 0.6em; }
.dl-r.fresh > *, .dl-r.land > *, .dl-stay { transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease); }
.dl-r.wait > :not(.dl-d):not(.dl-ring) { opacity: 0; transform: translateY(-0.5em); }
.dl-ring { position: absolute; inset: 0.12em 0.45em 0.12em 3.3em; border-radius: 0.7em; box-shadow: 0 0 0 1px var(--app-blue); opacity: 0; pointer-events: none; }

/* Together: the invitation, the QR code, Invite Nearby, then the journey with Kim's change on it */
.inv-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.18em; margin: 0.15em 1em 0; aspect-ratio: 3 / 2; padding: 1.1em 1.2em; border-radius: 1.1em; background: var(--row); overflow: hidden; }
/* a few bars like the timeline, as on the app's invitation picture: the trip's flight, a stay and a day out, in their
   own hues (road-trip.json?v=a18ba10f52) */
.inv-line { position: absolute; inset: 0; pointer-events: none; }
.inv-line i { position: absolute; height: 0.42em; border-radius: 99px; background: var(--hue); }
.inv-line i:nth-child(1) { --hl: #b8352e; --hd: #ff6b60; left: 11%; top: 1.25em; width: 30%; }
.inv-line i:nth-child(2) { --hl: #305273; --hd: #7daad8; left: 25%; top: 2.05em; width: 50%; }
.inv-line i:nth-child(3) { --hl: #496223; --hd: #9bc45e; left: 47%; top: 2.85em; width: 22%; }
.inv-line i { --hue: var(--hd); }
html.is-light .inv-line i { --hue: var(--hl); }
@media (prefers-color-scheme: light) { :root:not([data-js]):not(.is-dark) .inv-line i { --hue: var(--hl); } }
.inv-card img { position: absolute; right: 1em; top: 3.6em; width: 2.5em; height: 2.5em; border-radius: 0.6em; }
.inv-eb { font-size: 0.7em; font-weight: 600; color: var(--app-label2); }
.inv-card b { font-size: 1.28em; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.inv-d { font-size: 0.74em; color: var(--app-label2); }
.inv-l { margin: 0.8em 1.2em 0.3em; font-size: 0.76em; color: var(--app-label2); }
.share { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3em; padding: 1em 0.9em 1.5em; background: var(--app-cell); border-radius: 1.4em 1.4em 0 0; box-shadow: 0 -0.5px 0 var(--app-sep), 0 -0.6em 1.6em -1em rgba(0, 0, 0, 0.3); transform: translateY(105%); transition: transform var(--frame) var(--ease); }
.share.on { transform: none; }
.sh { display: flex; flex-direction: column; align-items: center; gap: 0.4em; font-size: 0.74em; color: var(--app-label2); }
.sh i { width: 3.4em; height: 3.4em; border-radius: 0.95em; display: grid; place-items: center; background: var(--tile); color: var(--app-label); }
.sh .ic { width: 1.55em; height: 1.55em; }
.st-qr { align-items: stretch; }
.qr.qr-s { width: 30%; margin-top: 0.7em; border-radius: 0.6em; }
.qr-title { margin: 0.7em 1em 0.6em; font-size: 1.12em; font-weight: 700; text-align: center; }
.qr { align-self: center; width: 56%; height: auto; aspect-ratio: 1; border-radius: 0.8em; background: #fff; padding: 3.2%; box-shadow: 0 0 0 0.5px var(--app-sep); }
.qr-note { margin: 0.75em 1em 0.45em; font-size: 0.66em; color: var(--app-label2); text-align: center; }
.qr-fine { margin: 0.9em 1.2em 0; font-size: 0.64em; color: var(--app-label2); text-align: center; }
/* the three sheets stand as tall as what they hold, the journey (dimmed) above them, so no screen is left half empty;
   Invite Nearby keeps room for both rows, so it doesn't grow when Mo turns up */
.tg .st.sheet { inset: auto 0 0; padding-bottom: 2.4em; }
html:not([data-js]) .tg .st.sheet { inset: 7% 0 0; }   /* (without the script the journey behind it is empty) */
.st.sheet.st-nearby { min-height: 15.5em; }
.nb-list { list-style: none; margin: 0.3em 1em 0; padding: 0; border-radius: 0.95em; background: var(--row); }
.nb-list li { display: flex; align-items: center; gap: 0.7em; min-height: 2.9em; padding: 0.5em 0.85em; font-size: 1em; }
.nb-list .av { width: 1.9em; height: 1.9em; font-size: 0.8em; }
.nb-list li + li { border-top: 0.5px solid var(--app-sep); }
.nb-list li.gone { display: none; }
.nb-list li.in { animation: nb-in var(--frame) var(--ease); }
@keyframes nb-in { from { opacity: 0; transform: translateY(0.4em); } }
.nb-list b { flex: 1; font-weight: 500; }
.nb-wait { color: var(--app-label2); }
.nb-wait span:last-child { font-size: 0.86em; line-height: 1.35; }
.spin { width: 1.15em; height: 1.15em; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--app-label3); }
.nb-s { font-size: 0.8em; font-weight: 600; padding: 0.32em 0.85em; border-radius: 99px; background: var(--app-label); color: var(--app-bg); white-space: nowrap; }
.nb-s.joining { background: none; padding: 0.32em 0; color: var(--app-label2); font-weight: 500; }
.nb-s.sent { background: none; padding: 0.32em 0; color: var(--app-green); }
.nb-note { margin: 0.8em 1.3em 0; font-size: 0.76em; line-height: 1.4; color: var(--app-label2); }
.toast-k { position: absolute; z-index: 5; left: 50%; bottom: 5%; display: flex; align-items: center; gap: 0.5em; padding: 0.45em 1em 0.45em 0.45em; border-radius: 99px; background: var(--app-cell); box-shadow: 0 0 0 0.5px var(--app-sep), 0 0.7em 1.6em -0.7em rgba(0, 0, 0, 0.4); font-size: 0.78em; font-weight: 600; white-space: nowrap; transform: translate(-50%, 1em); opacity: 0; transition: transform var(--frame) var(--ease), opacity 320ms var(--ease); }
.toast-k.on { transform: translate(-50%, 0); opacity: 1; }
.toast-k .av { width: 2em; height: 2em; font-size: 0.8em; }

/* Add without typing: the Check and Add sheet, and the share sheet's Timeline */
.rv-found { margin: 0.7em 1.1em 0.15em; font-size: 0.9em; font-weight: 600; color: var(--app-label2); }
.rv-ai { margin: 0 1.1em 0.75em; font-size: 0.74em; color: var(--app-label2); }
.rv-row { display: flex; align-items: flex-start; gap: 0.6em; margin: 0 1em; padding: 0.8em; border-radius: 0.9em; background: var(--row); }
.rv-check { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--app-blue); display: grid; place-items: center; flex: none; }
.rv-check .ic { width: 0.95em; height: 0.95em; color: #fff; }
.rv-ic { width: 1.2em; height: 1.2em; color: var(--app-label2); }
.rv-t { display: flex; flex-direction: column; gap: 0.18em; font-size: 0.8em; line-height: 1.3; }
.rv-t small { color: var(--app-label2); }
.rv-t em { font-style: normal; font-weight: 600; font-size: 0.9em; color: var(--app-green); }
.rv-to { margin: 0.8em 1.1em; font-size: 0.8em; color: var(--app-blue); }
.rv-h { margin: 0.9em 1.1em 0.4em; font-size: 0.9em; font-weight: 600; color: var(--app-label2); }
.rv-cost { display: flex; align-items: center; gap: 0.6em; margin: 0 1em; padding: 0.75em 0.85em; border-radius: 0.9em; background: var(--row); }
.rv-cost span { display: flex; flex-direction: column; flex: 1; font-size: 0.82em; line-height: 1.3; }
.rv-cost small { font-size: 0.85em; color: var(--app-label2); }
.rv-fine { margin: 0.6em 1.1em 0; font-size: 0.68em; line-height: 1.4; color: var(--app-label2); }
.rv-read { position: relative; margin: 0 1em; padding: 0.2em 0.85em; border-radius: 0.9em; background: var(--row); font-size: 0.74em; }
/* phones: the paper is already in the phone, so the stroke reads the sheet's own rows */
.read-mark.rv-mark { left: 0.85em; width: calc(100% - 1.7em); height: max(1.5px, 0.12em); }
.rv-read div { display: flex; justify-content: space-between; gap: 1em; padding: 0.42em 0; }
.rv-read div + div { box-shadow: inset 0 0.5px 0 var(--app-sep); }
.rv-read dt { color: var(--app-label2); }
.rv-read dd { margin: 0; font-variant-numeric: tabular-nums; }
.share-pop { position: absolute; z-index: 5; left: 50%; bottom: 6%; display: flex; flex-direction: column; align-items: center; gap: 0.3em; padding: 0.8em 1.1em 0.7em; border-radius: 1.2em; background: var(--app-cell); box-shadow: 0 0 0 0.5px var(--app-sep), 0 1em 2.4em -1em rgba(0, 0, 0, 0.45); transform: translate(-50%, 1em) scale(0.94); opacity: 0; transition: transform var(--frame) var(--ease), opacity 320ms var(--ease); }
.share-pop.on { transform: translate(-50%, 0); opacity: 1; }
.tt-app img { width: 3em; height: 3em; border-radius: 0.7em; box-shadow: 0 0 0 2px var(--app-blue); }
.share-pop small { font-size: 0.7em; color: var(--app-label2); }

/* Lock Screen, Home Screen, Siri, Spotlight: one wallpaper of one hue, light or dark with the page */
.screen.lock { background: var(--noise), linear-gradient(180deg, var(--wall-top), var(--wall-bottom)); /* one-hue */ color: var(--app-label); }
html.is-light .screen.lock { color: var(--ink); }
.lock .sb { color: inherit; transition: opacity var(--frame) var(--ease); }
/* while the Live Activity fills the Dynamic Island, the island takes the status bar's place */
.lock:has(.st-ls.on .ls-island:not(.idle)) .sb { opacity: 0; }
.ls-island { position: absolute; z-index: 4; top: 0.55em; left: 50%; width: 58%; height: 1.93em; transform: translateX(-50%); border-radius: 99px; background: var(--bezel); display: flex; align-items: center; justify-content: space-between; padding: 0 0.7em; color: var(--app-blue); transition: opacity var(--frame) var(--ease); }
.ls-island span { font: 600 0.74em var(--sans); font-variant-numeric: tabular-nums; }
.ls-island .ic { width: 1.05em; height: 1.05em; }
.ls-island.idle { opacity: 0; }
.ls-date { margin-top: 23%; text-align: center; font: 600 1.02em var(--sans); opacity: 0.86; }
.ls-clock { text-align: center; font: 600 5.3em/1 var(--rounded); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ls-wg { margin: 0.9em auto 0; width: 64%; display: flex; flex-direction: column; line-height: 1.25; font-size: 0.78em; opacity: 0.9; }
.ls-wg small { font-size: 0.85em; font-weight: 600; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; }
.ls-wg b { font-weight: 600; }
.ls-wg span { font-variant-numeric: tabular-nums; opacity: 0.8; }
.la { position: absolute; left: 0.7em; right: 0.7em; bottom: 15%; padding: 0.85em; border-radius: 1.5em; background: color-mix(in srgb, var(--app-cell) 80%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 0.5px var(--app-sep); color: var(--app-label); transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease); }
.la.off { opacity: 0; transform: translateY(0.6em); }
.la-top { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; gap: 0.65em; align-items: center; }
.la-icon { width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--tile); display: grid; place-items: center; }
.la-icon .ic { width: 1.2em; height: 1.2em; }
.la-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.la-label { font-size: 0.74em; color: var(--app-label2); font-variant-numeric: tabular-nums; }
.la.leave .la-label { color: var(--app-blue); font-weight: 600; }
.la-text b { font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-sub { font-size: 0.74em; color: var(--app-label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.la-count { font: 600 1.12em var(--sans); font-variant-numeric: tabular-nums; }
.la-strip { display: flex; gap: 2px; margin-top: 0.8em; height: 0.34em; }
.la-strip span { position: relative; border-radius: 2px; overflow: hidden; background: var(--app-fill); min-width: 3px; }
.la-strip span::after { content: ""; position: absolute; inset: 0; background: var(--hue, var(--app-label)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.la-off { position: absolute; left: 1.2em; right: 1.2em; bottom: 16%; margin: 0; text-align: center; font-size: 0.76em; line-height: 1.4; opacity: 0.85; }
.ls-btns { position: absolute; left: 1.6em; right: 1.6em; bottom: 3.2%; display: flex; justify-content: space-between; }
.ls-btns i { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--tile); opacity: 0.8; }
.st-home.under { opacity: 0.32; transform: scale(0.985); }
.hs-grid { position: absolute; inset: 12.5% 1.1em 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; align-content: start; }
.wg { border-radius: 1.3em; background: color-mix(in srgb, var(--app-cell) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 0.5px var(--app-sep); padding: 0.85em; display: flex; flex-direction: column; gap: 0.12em; line-height: 1.25; color: var(--app-label); }
.wg-s { aspect-ratio: 1; }
.wg-l, .wgt-h { font-size: 0.64em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-label2); }
.wg-s b { font-size: 0.88em; }
.wg-time { margin-top: auto; font: 600 0.92em var(--sans); font-variant-numeric: tabular-nums; }
.wg-leave { font-size: 0.7em; color: var(--app-label2); font-variant-numeric: tabular-nums; }
.wg-leave.lv-soon { color: var(--app-blue); font-weight: 600; }
.hs-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9em; padding: 0.3em; }
.hs-apps i { aspect-ratio: 1; border-radius: 23%; background: var(--tile); }
.hs-apps.four { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); padding: 0 0.3em; }
.hs-apps i.tt { background: url("img/icon.svg?v=a18ba10f52") center / cover; }
.wg-m { grid-column: 1 / -1; padding: 0.85em 1em; gap: 0.18em; }
.wgt-h { margin-bottom: 0.25em; }
.wgt-r { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 0.5em; font-size: 0.74em; white-space: nowrap; }
.wgt-r time { color: var(--app-label2); font-variant-numeric: tabular-nums; }
.wgt-r span { overflow: hidden; text-overflow: ellipsis; }
.wgt-r.done { opacity: 0.45; }
.hs-dock { position: absolute; left: 0.6em; right: 0.6em; bottom: 0.6em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; padding: 0.85em 1.1em; border-radius: 1.9em; background: color-mix(in srgb, var(--app-cell) 55%, transparent); }
.hs-dock i { aspect-ratio: 1; border-radius: 23%; background: var(--tile); }
.siri-q { position: absolute; left: 1.2em; right: 1.2em; bottom: 15%; text-align: center; font-size: 1.08em; font-weight: 600; line-height: 1.3; }
.siri-card { position: absolute; left: 0.75em; right: 0.75em; top: 13%; display: flex; gap: 0.7em; padding: 1em; border-radius: 1.4em; background: var(--app-cell); box-shadow: 0 0 0 0.5px var(--app-sep), 0 1em 2.4em -1.2em rgba(0, 0, 0, 0.4); color: var(--app-label); transform: translateY(-0.6em); opacity: 0; transition: transform var(--frame) var(--ease) 240ms, opacity var(--frame) var(--ease) 240ms; }
.st-siri.on .siri-card { transform: none; opacity: 1; }
.siri-card img { width: 2em; height: 2em; border-radius: 0.5em; }
.siri-card > span { display: flex; flex-direction: column; font-size: 0.84em; line-height: 1.35; }
.siri-card small, .siri-card span span { color: var(--app-label2); }
.siri-card small { font-size: 0.85em; }
/* Siri listening: a 2px ring round the screen that breathes, only while this state is on screen */
.siri-ring { position: absolute; inset: 0; border-radius: calc(var(--pw) * 0.14); box-shadow: inset 0 0 0 2px var(--app-label); opacity: 0.4; pointer-events: none; }
.in-view .st-siri.on .siri-ring { animation: siri-breathe 1.2s var(--ease-io) infinite alternate; }
@keyframes siri-breathe { from { opacity: 0.4; } to { opacity: 0.8; } }
.spot-field { margin: 3.7em 0.9em 1em; display: flex; align-items: center; gap: 0.5em; padding: 0.62em 0.85em; border-radius: 99px; background: color-mix(in srgb, var(--app-cell) 88%, transparent); box-shadow: 0 0 0 0.5px var(--app-sep); font-size: 0.95em; }
.spot-field .ic { width: 1.1em; height: 1.1em; color: var(--app-label2); }
.caret { width: 2px; height: 1.1em; background: var(--app-blue); margin-left: -0.3em; }
.spot-h { margin: 0 1.2em 0.4em; font-size: 0.72em; font-weight: 600; color: var(--app-label2); }
.spot-row { margin: 0 0.9em 0.5em; display: flex; gap: 0.7em; align-items: center; padding: 0.7em; border-radius: 0.95em; background: color-mix(in srgb, var(--app-cell) 88%, transparent); box-shadow: 0 0 0 0.5px var(--app-sep); transition: opacity 240ms var(--ease); }
.spot-row.dim { opacity: 0.8; }
.spot-ic { width: 2.2em; height: 2.2em; border-radius: 0.55em; display: grid; place-items: center; flex: none; background: var(--app-red); overflow: hidden; }
.spot-ic .ic { width: 1.15em; height: 1.15em; color: #fff; }
.spot-ic.app { background: none; }
.spot-ic img { width: 100%; height: 100%; }
.spot-row > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 0.84em; line-height: 1.3; }
.spot-row small { font-size: 0.86em; color: var(--app-label2); font-variant-numeric: tabular-nums; }
.kb { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5em 0.2em 2.4em; display: flex; flex-direction: column; gap: 0.5em; background: color-mix(in srgb, var(--app-label) 10%, var(--app-grouped)); }
.kb div { display: flex; justify-content: center; gap: 0.25em; }
.kb i { flex: 0 0 8.6%; height: 2.25em; display: grid; place-items: center; border-radius: 0.35em; font: 400 0.98em var(--sans); font-style: normal; background: color-mix(in srgb, var(--app-label) 30%, var(--app-cell)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.kb i.w { flex-basis: 48%; font-size: 0.78em; }
.kb i.m { flex-basis: 12%; font-size: 0.7em; }
html.is-light .kb i { background: var(--app-cell); }
@media (prefers-color-scheme: light) {
  :root:not([data-js]):not(.is-dark) .screen.lock { color: var(--ink); }
}

/* ── The line (hero + unfold + route) ─────────────────────────────────────────────────────────────────── */
.h560 { height: 560vh; }
@supports (height: 100svh) { .h560 { height: 560svh; } }
.pin { background: var(--bg); touch-action: pan-y; }
.sky, .labels { transition: opacity 200ms linear; }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.pin:not(.drawn) .sky { visibility: hidden; }                 /* the stage's own --bg until the first frame is drawn */
.pin.grabbing .sky, .pin.grabbing .pl { cursor: grabbing; }
.pin.over-end .sky { cursor: ew-resize; }

/* copy: the kicker, the headline (solid ink, both lines), the lede, the demo line */
.copy { position: absolute; left: 0; right: 0; top: calc(var(--navh) + clamp(20px, 5svh, 64px)); pointer-events: none; z-index: 2; }
.copy > * { pointer-events: auto; max-width: 640px; }
.kicker { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
h1 { margin: 0; font: 600 var(--fs-display)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.h1-b { color: var(--ink); background: none; }
.lede { margin: 18px 0 0; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.demo-line { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink3); }
@media (min-width: 760px) { .copy h1 { white-space: nowrap; max-width: none; width: fit-content; } }
@media (min-width: 1180px) { .copy > .lede, .copy > .demo-line { max-width: calc(100% * 7 / 12); } }
@media (max-height: 699px) { .demo-line { display: none; } .copy h1 { font-size: clamp(36px, 9vw, 44px); } }
/* short desktops (app.js decides): the headline a size down, so the line keeps clear of the lede */
.copy.tight h1 { font-size: min(var(--fs-display), max(44px, 9svh)); }
.copy.tight .lede { margin-top: 14px; }
@media (max-width: 759px) { .copy { top: calc(var(--navh) + 18px); } .lede { margin-top: 12px; font-size: 16px; } .demo-line { font-size: 14px; margin-top: 8px; } }

/* the beats: one block of copy at a time, faded by the scroll (opacity and 6 px) */
.beat-copy, .moment, .route-copy { position: absolute; left: 0; right: 0; top: calc(var(--navh) + clamp(20px, 5svh, 64px)); opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; }
.beat-copy > *, .moment > *, .route-copy > * { max-width: 640px; }
.beat-h, .route-copy h2 { margin: 0; font: 600 var(--fs-h2)/1.04 var(--display); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.beat-s, .route-copy h2 + p { margin: 18px 0 0; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink2); text-wrap: balance; }
.m-label { margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.m-time { margin: 6px 0 0; font: 200 clamp(72px, 9vw, 148px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.m-time small { font-size: 0.3em; font-weight: 500; letter-spacing: 0; margin-left: 0.2em; color: var(--ink2); }
.m-time small:empty { display: none; }
/* short screens (app.js?v=a18ba10f52): the leave time comes down a size so it keeps clear of the line */
.moment.tight .m-time { font-size: clamp(56px, 13svh, 112px); }
.moment.tight .m-sub { margin-top: 12px; }
.m-sub { margin: 18px 0 0; max-width: 560px; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink2); text-wrap: balance; }
@media (max-width: 759px) {
  .beat-copy, .moment, .route-copy { top: calc(var(--navh) + 18px); }
  .beat-h, .route-copy h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .beat-s, .m-sub, .route-copy h2 + p { font-size: 15px; margin-top: 10px; }
}

/* the day card on the road: a raised surface, centred at the bottom (docked bottom-left on phones) */
.day-card {
  position: absolute; z-index: 4; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 8px); opacity: 0; visibility: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 18px; border-radius: 14px; text-align: center; min-width: 260px;
  pointer-events: none; background: var(--bg2); box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest);
}
.day-card.docked { left: var(--gutter); min-width: 0; max-width: 70vw; align-items: flex-start; text-align: left; transform: translate(0, 8px); }
.dc-day { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.day-card b { font-size: 15px; font-weight: 600; color: var(--ink); }
.dc-sub { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* every word on the line: HTML placed from the camera, snapped to device pixels */
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.lbl-layer { position: absolute; inset: 0; }
.pl-li { display: contents; }
.pl, .stl, .rl, .maplbl, .bubble, .now-knob, .dayhdr {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; will-change: transform;
  transition: opacity var(--quick) var(--ease);
}
.labels .on { opacity: 1; }
.pl {
  display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 4px; margin: 0; border: 0; border-radius: 6px; background: none;
  font: 600 13px/20px var(--sans); color: var(--ink); cursor: grab; pointer-events: none; letter-spacing: -0.005em;
}
.pl::after { content: ""; position: absolute; inset: -12px 0; }
.pl.on { pointer-events: auto; }
.pl.on.dim { opacity: 0.5; }
.pl:hover { box-shadow: inset 0 0 0 1px var(--hair); }
.pl:focus-visible { opacity: 1; outline-offset: 2px; }
.pl-i { width: 14px; height: 14px; color: var(--ink2); }
.labels[data-lvl="0"] .pl:not(.inside) .pl-i { display: none; }
.pl-m { font: 400 12px/20px var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pl.short .pl-m { display: none; }
/* a named plan's words a row or more above the bars (labels.js?v=a18ba10f52), with a hairline down to its bar */
.pl.raised::before { content: ""; position: absolute; left: var(--lx, 8px); top: 100%; width: 1px; height: var(--lead, 0px); background: var(--ink3); opacity: 0.5; pointer-events: none; }
.pl.quiet .pl-t { color: var(--ink2); }
.pl.inside { padding: 0 8px; color: var(--bg); }
.pl.inside .pl-i, .pl.inside .pl-m { color: inherit; }
.stl { display: flex; align-items: center; gap: 5px; height: 18px; font: 500 12px/18px var(--sans); color: var(--ink2); pointer-events: none; }
.stl-i { width: 13px; height: 13px; }
.stl-m { font: 400 12px/18px var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; }
.stl[data-mode="meta"] .stl-t, .stl[data-mode="meta"] .stl-i { display: none; }
.stl[data-mode="meta"] .stl-m { color: var(--ink2); }
.rl { font: 400 12px/16px var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; pointer-events: none; }
.rl-day { font-weight: 600; color: var(--ink2); }
.rl-c { font-weight: 600; color: var(--ink); }
.rl-pin { padding: 0 6px; margin-left: -6px; border-radius: 6px; background: var(--bg); }
/* the day headers, as in the app: weekday, date (today's in the app's red, with the Now line), and where the trip sleeps */
.dayhdr { display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.dayhdr:not(.on) { opacity: 0 !important; }
.dh-wd { font: 600 11px/14px var(--sans); letter-spacing: 0.12em; color: var(--ink3); }
.dh-d { font: 500 34px/34px var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink2); }
.dh-pl { font: 400 11px/14px var(--sans); color: var(--ink3); }
.dayhdr.today .dh-wd, .dayhdr.today .dh-d { color: var(--now); }
/* the map's words */
.maplbl { font: 600 13px/1.25 var(--sans); color: var(--ink); pointer-events: none; transition: none; display: flex; flex-direction: column; }
.maplbl small { font: 400 12px/1.3 var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; }
.maplbl.drive, .maplbl.flight { font: 400 12px/15px var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; }
.maplbl.left { text-align: right; align-items: flex-end; }
.maplbl:not(.on) { opacity: 0 !important; }
.labels.morphing .pl, .labels.morphing .now-knob { pointer-events: none; }
/* Now: the pill on top of the Now line, both in the app's red (the line itself is drawn with the timeline) */
.now-knob {
  display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 9px; border: 0; border-radius: 999px;
  background: var(--now); color: var(--on-now); font: 600 12px/22px var(--sans); font-variant-numeric: tabular-nums;
  cursor: ew-resize; pointer-events: none; touch-action: none;
}
.now-knob::after { content: ""; position: absolute; inset: -11px -6px; }
.now-knob.on { pointer-events: auto; }
.bubble { display: flex; flex-direction: column; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--bg2); box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest); pointer-events: none; }
.bubble .b1 { font: 600 13px/18px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.bubble .b2 { font: 400 12px/16px var(--sans); color: var(--ink2); }
.bubble .b2.bad { color: var(--red); }

/* HUD: the status, the scale toolbar and To Sort Out, inside the line's own width */
.hud {
  position: absolute; z-index: 5; bottom: max(14px, env(safe-area-inset-bottom));
  left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)), var(--line-r, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "status status" "tool sort"; gap: 8px; align-items: end;
  transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease);
}
.hud.away { opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden; transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease), visibility 0s linear var(--frame); }
/* wide: the status takes the width its words need (never an ellipsis), the toolbar sits in the middle of what is left */
@media (min-width: 980px) {
  .hud { grid-template-columns: max-content minmax(0, 1fr) max-content; grid-template-areas: "status tool sort"; bottom: 24px; }
  .status-next { display: flex; flex-direction: column; }
  .seg button { min-width: 50px; padding: 0 8px; }
}
.status, .toolbar, .sortout-btn {
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest);
}
.status { grid-area: status; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 14px; border-radius: 14px; justify-self: start; max-width: 100%; }
.status-when { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-next { font-size: 14px; line-height: 1.35; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-next b { font-weight: 600; }
.status-next span { color: var(--ink2); font-variant-numeric: tabular-nums; }
.status-next .st-short { display: none; }
.toolbar { grid-area: tool; display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 14px; justify-self: center; }
.seg { position: relative; display: flex; padding: 2px; border-radius: 10px; background: var(--bg3); }
.seg button {
  position: relative; z-index: 1; min-width: 54px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; transition: color var(--quick) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg-thumb { position: absolute; z-index: 0; top: 2px; left: 0; height: 32px; width: 54px; border-radius: 8px; background: var(--bg2); box-shadow: var(--sh-rest); transition: transform var(--zoom) var(--ease), width var(--zoom) var(--ease); }
.ib { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease); }
.ib:hover { background: var(--hair2); }
.ib:active { transform: scale(0.96); background: var(--bg3); }
.sortout { grid-area: sort; position: relative; justify-self: end; }
.sortout-btn { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 14px; border: 0; border-radius: 14px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.so-ic { display: none; width: 18px; height: 18px; color: var(--ink2); }
.so-counts { display: flex; gap: 8px; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink2); }
.so-counts span { display: inline-flex; align-items: center; gap: 5px; }
.so-counts i { width: 7px; height: 7px; border-radius: 4px; display: inline-block; }
.lv-bad { background: var(--red); } .lv-warn { background: var(--amber); } .lv-ok { background: var(--green); }
.chev { width: 14px; height: 14px; color: var(--ink2); transition: transform var(--zoom) var(--ease); transform: rotate(180deg); }
.sortout-btn[aria-expanded="true"] .chev { transform: rotate(0deg); }
.sortout-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(400px, calc(100vw - 2 * var(--gutter))); max-height: min(62svh, 520px); overflow: auto;
  padding: 16px; border-radius: 18px; background: var(--bg2); box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest);
  transform-origin: 100% 100%; animation: so-pop var(--zoom) var(--ease);
}
@keyframes so-pop { from { opacity: 0; transform: translateY(6px); } }
.so-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.so-head b { font-size: 17px; color: var(--ink); }
.so-head span { font-size: 13px; color: var(--ink2); }
.so-group { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.08em; }
.so-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 0.5px solid var(--hair2); }
.so-row .lv { width: 7px; height: 7px; border-radius: 4px; flex: none; }
.so-row p { margin: 0; flex: 1; font-size: 14px; line-height: 1.35; color: var(--ink); }
.so-row.fresh { animation: so-fresh 1.2s var(--ease); }
@keyframes so-fresh { 0% { background: var(--bg3); } 100% { background: transparent; } }
.so-try { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--hair); }
.so-try p { margin: 0 0 10px; font-size: 13px; color: var(--ink2); }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* phones: one row of status above the toolbar; To Sort Out is a toolbar button with its count */
@media (max-width: 759px) {
  /* one 52 px row: the pretend time over 'Now · Breakfast at the cabin · until 11:15 AM'; where that is too long, the
     plan's name gives way and the time always shows */
  .status { justify-content: center; height: 52px; padding: 0 14px; width: 100%; gap: 1px; }
  .status-next { display: flex; }
  .status-next b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .status-next .st-short { display: inline; flex: none; white-space: pre; }
  .status-next .st-sub { display: none; }
  .toolbar { justify-self: start; padding: 4px; gap: 4px; min-width: 0; max-width: 100%; }
  .seg { min-width: 0; }
  .seg button { height: 40px; min-width: 46px; padding: 0 7px; }
  .seg-thumb { height: 40px; }
  .ib { width: 40px; height: 40px; }
  /* To Sort Out: an icon button with its count, beside the toolbar */
  .sortout-btn { height: 48px; padding: 0 9px; gap: 4px; justify-content: center; min-width: 48px; }
  .so-label, .chev { display: none; }
  .so-ic { display: block; }
}
@media (max-width: 419px) { .toolbar .ib { display: none; } }
/* touch: every toolbar control reaches at least 44 px tall through an ::after inset; the visuals keep their size */
@media (pointer: coarse) {
  .toolbar .ib, .toolbar .now-btn { position: relative; }
  .seg button::after, .toolbar .ib::after, .toolbar .now-btn::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
}
@media (max-width: 379px) {
  .hud { gap: 6px; }
  .toolbar { padding: 3px; gap: 3px; }
  .seg button { min-width: 0; padding: 0 5px; font-size: 12px; }
  .toolbar .now-btn { padding: 0 9px; }
  .sortout-btn { padding: 0 7px; }
}

/* the .pill-btn family (global's selectors, kept where they were; on tokens) */
.pill-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--bg3); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; color: var(--ink); cursor: pointer;
  transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.pill-btn:hover { background: var(--hair); }
.pill-btn:active { transform: scale(0.96); }
.pill-btn.accent { background: var(--accent-fill); color: var(--on-accent); }
.pill-btn.accent:hover { background: var(--accent-fill); background: color-mix(in oklab, var(--accent-fill), #fff 7%); }
.pill-btn.ghost { background: none; box-shadow: inset 0 0 0 1px var(--hair); }
.pill-btn.small { height: 28px; padding: 0 11px; font-size: 13px; }
.pill-btn.small::after { content: ""; position: absolute; inset: -8px 0; }

/* the plan card: a raised surface beside the line (an inspector from 980 px, a sheet below) */
.card {
  position: absolute; z-index: 6; right: max(var(--gutter), var(--line-r, 0px)); top: calc(var(--navh) + 16px); bottom: 120px; width: 340px;
  border-radius: 18px; overflow: hidden; background: var(--bg2); box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest);
  opacity: 0; transform: translateX(12px); transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease);
}
.card.open { opacity: 1; transform: none; }
.card-scroll { height: 100%; overflow: auto; padding: 18px 18px 22px; overscroll-behavior: contain; }
/* the copy steps back while the card is open beside it */
.pin.card-open .copy, .pin.card-open .beat-copy, .pin.card-open .moment { opacity: 0.12 !important; transition: opacity var(--frame) var(--ease); }
@media (max-width: 979px) {
  .card { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: min(56svh, 560px); border-radius: 18px; transform: translateY(24px); }
  .card-scroll { max-height: min(56svh, 560px); height: auto; }
  .pin.sheet-open .copy, .pin.sheet-open .moment, .pin.sheet-open .beat-copy { opacity: 0.06 !important; }
  .pin.sheet-open .hud, .pin.sheet-open .hint { opacity: 0; pointer-events: none; }
  .card::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--hair); }
}
.c-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--ink2); }
.c-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 6px; background: var(--bg3); color: var(--ink); font-weight: 600; }
.c-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--plan); }
.c-sw.ring { background: none; box-shadow: inset 0 0 0 1px var(--plan); }
.c-sw.prop { background: none; box-shadow: inset 0 0 0 1px var(--plan); }
.c-close { margin-left: auto; width: 30px; height: 30px; border-radius: 15px; border: 0; background: var(--bg3); color: var(--ink2); display: grid; place-items: center; cursor: pointer; position: relative; }
.c-close::after { content: ""; position: absolute; inset: -7px; }
.c-close .ic { width: 14px; height: 14px; }
.c-title { margin: 0 0 4px; font: 600 24px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.c-title:focus { outline: none; }
.c-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-sub { margin: 0 0 14px; font-size: 14px; color: var(--ink2); }
.c-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 8px; padding: 14px; border-radius: 14px; background: var(--bg3); margin-bottom: 10px; }
.c-hero .end { text-align: right; }
.c-hero small { display: block; font-size: 12px; color: var(--ink2); }
.c-hero b { display: block; font: 500 26px/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); }
.c-hero .code { font: 600 15px/1.2 var(--sans); color: var(--ink); }
.c-hero .mid { align-self: center; text-align: center; font-size: 12px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-hero .mid i { display: block; height: 1px; min-width: 40px; margin-top: 6px; background: var(--hair); }
.c-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.c-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 6px; background: var(--bg3); font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.c-chip .ic { width: 15px; height: 15px; }
.c-checks { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.c-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg3); font-size: 14px; color: var(--ink); }
.c-check .lv { width: 7px; height: 7px; border-radius: 4px; flex: none; }
.c-check p { margin: 0; flex: 1; }
.c-h { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink2); display: flex; justify-content: space-between; }
.c-h span + span { font-weight: 500; font-variant-numeric: tabular-nums; }
.timing { list-style: none; margin: 0; padding: 0; }
.timing li { display: grid; grid-template-columns: 64px 20px 1fr auto; align-items: center; gap: 8px; min-height: 36px; border-top: 0.5px solid var(--hair2); font-size: 14px; color: var(--ink); }
.timing li.anim { opacity: 0; transform: translateY(6px); animation: c-rise var(--frame) var(--ease) forwards; }
.timing li:first-child { border-top: 0; }
.timing time { font: 400 13px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink2); }
.timing .ic { width: 16px; height: 16px; color: var(--ink2); }
.timing .d { font: 400 12px var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; }
.timing li.core { font-weight: 600; }
.timing li.core time, .timing li.core .ic { color: var(--ink); }
@keyframes c-rise { to { opacity: 1; transform: none; } }
.c-more { margin-top: 14px; width: 100%; justify-content: space-between; }
.c-more .ic { width: 14px; height: 14px; transition: transform var(--zoom) var(--ease); }
.c-more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.c-details[hidden] { display: none; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 14px 0 0; }
.facts dt { font-size: 12px; color: var(--ink2); }
.facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.facts dd.mono { font-family: var(--mono); }
.bigcode { margin: 16px 0 0; padding: 14px; border-radius: 14px; background: var(--bg3); text-align: center; }
.bigcode small { display: block; font-size: 12px; color: var(--ink2); }
.bigcode b { font: 600 28px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--ink); }
.msgs-c { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.msgs-c li { padding: 10px 12px; border-radius: 14px; background: var(--bg3); font-size: 14px; color: var(--ink); }
.msgs-c b { display: block; font-size: 12px; color: var(--ink2); }
.c-note { font-size: 14px; color: var(--ink2); margin: 10px 0 0; }

/* the toast: hidden from the keyboard while it is away (and inert) */
.toast {
  position: absolute; z-index: 7; left: calc((100% - var(--line-r, 0px)) / 2); bottom: 128px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 2 * var(--gutter));
  padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--bg2); box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest); font-size: 14px; color: var(--ink);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); pointer-events: none;
  transition: opacity var(--zoom) var(--ease), transform var(--zoom) var(--ease), translate var(--frame) var(--ease), visibility 0s linear var(--zoom);
}
.toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s; }
.reduce .toast { transition: none; }
.toast > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-undo { height: 30px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg3); font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; flex: none; }

/* the hint, the touch follow-up and the "same in the app" line: just above the toolbar, never over the line's words */
.hint, .same { position: absolute; z-index: 4; left: 0; right: var(--line-r, 0px); margin: 0; text-align: center; pointer-events: none; transition: opacity var(--frame) var(--ease); }
.hint-in { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink2); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 0 0 0.5px var(--hair); }
.hint.gone { opacity: 0; }
.hint.hold { opacity: 0; }
.hint.hold.on { opacity: 1; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .hint-desk { display: none; } .hint-touch { display: inline; } }
.same { font-size: 13px; line-height: 32px; color: var(--ink2); opacity: 0; transform: translateY(6px); transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease); }
.same.on { opacity: 1; transform: none; }
/* while the plan card is open beside the line, the hints and the 'same way in the app' line keep left of it */
.pin.card-open .hint, .pin.card-open .same { right: calc(max(var(--gutter), var(--line-r, 0px)) + 340px + 24px); }
.cue { position: absolute; z-index: 4; left: 50%; bottom: 6px; transform: translateX(-50%); display: none; align-items: center; gap: 6px; min-height: 24px; font-size: 12px; color: var(--ink3); text-decoration: none; transition: opacity var(--frame) var(--ease); }
.cue .ic { width: 14px; height: 14px; }
@media (min-width: 980px) and (min-height: 760px) { .cue { display: flex; } }
.cue.gone { opacity: 0; pointer-events: none; }
.route-toggle { position: absolute; z-index: 6; right: max(var(--gutter), var(--line-r, 0px)); top: calc(var(--navh) + 12px); }
/* tap me: a 2 px accent ring centred on the tour's bar, two pulses when the Hours beat begins */
.tapme { position: absolute; z-index: 4; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.tapme::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; opacity: 0; }
.tapme.on::before { animation: tapme 1.25s var(--ease) 2; }
@keyframes tapme { 0% { transform: scale(0.55); opacity: 0.95; } 75% { opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } }
.reduce .hint, .reduce .tapme, .reduce .same { display: none; }

/* the iPhone beside the line: as tall as the stage allows (≥ 1180 × 720), the app's own timeline in it */
.mirror {
  --phw: clamp(260px, calc((100svh - var(--navh) - 72px) * 0.46), 340px);
  position: absolute; z-index: 4; top: var(--navh); bottom: 0; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  margin: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
}
.mirror .phone { --pw: var(--phw); }
.mirror figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.mirror.away { visibility: hidden; }
@media (min-width: 1180px) and (min-height: 720px) { .mirror { display: flex; } }
/* below 1180 × 720: the same iPhone, smaller, between the leave time and the line while it holds (app.js places it,
   only where that band is at least 300 px tall) */
.mirror.m-hold { display: flex; top: var(--hold-top); bottom: auto; height: var(--hold-h); width: var(--hold-w); left: var(--hold-left); right: auto; justify-content: flex-start; opacity: 0; }
.mirror.m-hold figcaption { width: max-content; white-space: nowrap; font-size: 12px; }
.mirror.m-hold .phone { --pw: var(--hold-w); }
.mirror.m-hold.m-side { align-items: flex-end; }   /* beside the leave time: the caption keeps to the content's edge */
/* phones: the iPhone beside the leave time, whose words keep to the column on its left */
.mirror.m-hold.m-narrow { align-items: center; }
.mirror.m-hold.m-narrow figcaption { width: auto; white-space: normal; text-align: center; line-height: 1.35; text-wrap: balance; }
.moment.beside > * { max-width: var(--m-w, 100%); }
.moment.beside .m-time { font-size: clamp(44px, 13vw, 60px); }
.moment.beside .m-sub { text-wrap: pretty; }
.moment.beside .eyebrow, .moment.beside .m-label { text-wrap: balance; }   /* no word alone on the narrow column's last line */
/* where nothing else makes room for the leave time, the line steps back with the scroll for that beat (no lag) */
.pin.step-back .sky, .pin.step-back .labels { transition: none; }
/* tall screens: on the map, the land and coast fade out under the route's words (an alpha mask, no colour) */
.pin.map-tall.on-map .sky {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--map-mask-top, 0px), #000 calc(var(--map-mask-top, 0px) + 56px)); /* mask fade */
  mask-image: linear-gradient(to bottom, transparent var(--map-mask-top, 0px), #000 calc(var(--map-mask-top, 0px) + 56px)); /* mask fade */
}
html:not([data-js]) .mirror, html:not([data-js]) .tapme { display: none !important; }

/* the app's vertical timeline, in the app's own points (1 pt = 100cqw / 393) and --app-* colours */
.mscr { --u: calc(100cqw / 393); position: absolute; inset: 0; container-type: size; overflow: hidden; background: var(--app-bg); color: var(--app-label); font-family: var(--sans); font-size: calc(15 * var(--u)); -webkit-font-smoothing: antialiased; }
.m-status { position: absolute; left: 0; right: 0; top: 0; height: calc(54 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(46 * var(--u)); }
.m-clock { font: 600 calc(17 * var(--u))/1 var(--sans); letter-spacing: -0.01em; }
.m-sys { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.m-sys svg { fill: currentColor; height: calc(12 * var(--u)); }
.m-sys svg:nth-child(1) { width: calc(18 * var(--u)); }
.m-sys svg:nth-child(2) { width: calc(17 * var(--u)); }
.m-sys svg:nth-child(3) { width: calc(27 * var(--u)); }
.m-head { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); top: calc(62 * var(--u)); height: calc(46 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.m-btn { flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--app-cell); box-shadow: 0 0 0 max(0.5px, calc(0.5 * var(--u))) var(--app-sep); color: var(--app-label); }
.m-btn svg { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.m-btn.m-dots { display: flex; align-items: center; justify-content: center; gap: calc(3.5 * var(--u)); }
.m-dots i { width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); border-radius: 50%; background: currentColor; }
.m-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); }
.m-tline { display: flex; align-items: center; gap: calc(7 * var(--u)); max-width: 100%; }
.m-tline b { font: 600 calc(17 * var(--u))/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-chev { flex: none; width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--app-fill); color: var(--app-label2); }
.m-chev svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.m-tsub { font: 400 calc(13 * var(--u))/1.25 var(--sans); color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-check { position: absolute; left: calc(18 * var(--u)); right: calc(16 * var(--u)); top: calc(124 * var(--u)); height: calc(28 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font: 400 calc(16 * var(--u))/1.25 var(--sans); }
.m-dot { flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--app-orange); }
.m-dot.bad { background: var(--app-red); }
.m-ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-cm { flex: none; color: var(--app-label3); }
.m-ctl { position: absolute; left: calc(16 * var(--u)); right: calc(14 * var(--u)); top: calc(171 * var(--u)); height: calc(32 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.m-seg { position: relative; flex: none; width: calc(279 * var(--u)); height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); padding: calc(2 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--app-fill); }
.m-seg span { position: relative; z-index: 1; display: grid; place-items: center; font: 500 calc(14 * var(--u))/1 var(--sans); color: var(--app-label); }
.m-seg span.on { font-weight: 600; }
.m-thumb { position: absolute; z-index: 0; top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); left: calc(2 * var(--u)); width: calc((100% - 4 * var(--u)) / 4); border-radius: calc(14 * var(--u)); background: var(--app-cell); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.12); transition: transform var(--zoom) var(--ease); }
html.is-dark .m-thumb { background: var(--app-cell2); background: color-mix(in srgb, var(--app-label) 34%, var(--app-bg)); box-shadow: none; }
.m-nowbtn { font: 600 calc(17 * var(--u))/1 var(--sans); color: var(--app-blue); }
.m-swap { display: grid; place-items: center; color: var(--app-label); }
.m-swap svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.m-tl { position: absolute; left: 0; right: 0; top: calc(230 * var(--u)); bottom: 0; overflow: hidden; border-top: max(0.5px, calc(0.5 * var(--u))) solid var(--app-sep); }
.m-content { position: absolute; left: 0; right: 0; top: 0; height: 0; will-change: transform; }
.m-days, .m-rail, .m-rows { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.m-day { position: absolute; left: calc(12 * var(--u)); right: 0; top: 0; height: 0; }
.m-day::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: max(0.5px, calc(0.5 * var(--u))); background: var(--app-sep); }
.m-wd { position: absolute; left: 0; top: calc(10 * var(--u)); font: 600 calc(12 * var(--u))/1 var(--sans); letter-spacing: 0.02em; color: var(--app-label2); }
.m-dn { position: absolute; left: calc(1 * var(--u)); top: calc(25 * var(--u)); font: 500 calc(26 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--app-label); }
.m-day.today .m-wd, .m-day.today .m-dn { color: var(--app-blue); }
.m-cap { position: absolute; left: 0; top: 0; width: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--cl); }
html.is-dark .m-cap { background: var(--cd); }
.m-cap.idea { background: none; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--cl); }
html.is-dark .m-cap.idea { background: none; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--cd); }
/* a step (a drive, a wait), as the app draws it: a narrower solid bar in the plan's lighter tone, on the core's axis */
.m-cap.step { width: calc(5 * var(--u)); margin-left: calc(1.5 * var(--u)); border-radius: calc(2.5 * var(--u)); }
.m-row { position: absolute; left: calc(88 * var(--u)); right: auto; max-width: calc(100% - 100 * var(--u)); top: 0; display: flex; align-items: flex-start; gap: calc(8 * var(--u)); padding-right: calc(6 * var(--u)); background: var(--app-bg); }
.m-row.off { visibility: hidden; }
.m-ic { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin-top: calc(1 * var(--u)); color: var(--cl); }
html.is-dark .m-ic { color: var(--cd); }
.m-rx { min-width: 0; display: flex; flex-direction: column; }
.m-r1 { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.m-rt { font: 600 calc(17 * var(--u))/calc(22 * var(--u)) var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-label); }
.m-row.stay .m-rt { font-weight: 400; }
.m-row.quiet .m-rt { color: var(--app-label2); }
.m-rm { font: 400 calc(15 * var(--u))/calc(20 * var(--u)) var(--sans); color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-flag { display: none; flex: none; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; }
.m-flag.warn { display: block; background: var(--app-orange); }
.m-flag.bad { display: block; background: var(--app-red); }
.m-ring { position: absolute; left: calc(82 * var(--u)); right: calc(8 * var(--u)); top: 0; height: calc(52 * var(--u)); border-radius: calc(12 * var(--u)); box-shadow: inset 0 0 0 2px var(--accent); opacity: 0; transition: opacity var(--quick) var(--ease); }
.m-ring.on { opacity: 1; }
.m-nowline { position: absolute; left: calc(12 * var(--u)); right: 0; top: 0; height: max(1px, calc(1.5 * var(--u))); margin-top: min(-0.5px, calc(-0.75 * var(--u))); background: var(--now); }
.m-nowpill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: calc(22 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: 999px; background: var(--now); color: var(--on-now); font: 600 calc(14 * var(--u))/calc(22 * var(--u)) var(--sans); font-variant-numeric: tabular-nums; }
.m-next { position: absolute; left: 50%; bottom: calc(28 * var(--u)); transform: translateX(-50%); max-width: calc(340 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(13 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); border-radius: 999px; background: var(--app-cell); box-shadow: 0 0 0 max(0.5px, calc(0.5 * var(--u))) var(--app-sep), 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.12); font: 400 calc(15 * var(--u))/1 var(--sans); white-space: nowrap; }
.m-next b { font-weight: 600; }
.m-nt { display: flex; min-width: 0; color: var(--app-label2); font-variant-numeric: tabular-nums; }
.m-nt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-nt-w { flex: none; white-space: pre; }
.m-ni { display: grid; place-items: center; }
.m-ni svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* the ghost hand */
.ghost { position: absolute; z-index: 9; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 260ms var(--ease); }
.ghost.on { opacity: 1; }
.ghost svg { position: absolute; width: 42px; height: 42px; left: -14px; top: -4px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3)); transition: none; }
.ghost .g2 { opacity: 0; }
.ghost .g-ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink2); opacity: 0; }

/* ── On the day ───────────────────────────────────────────────────────────────────────────────────────── */
.h360 { height: 360vh; }
@supports (height: 100svh) { .h360 { height: 360svh; } }
.day-stage { color: var(--ink); background: var(--bg); }
.day-sky { position: absolute; inset: 0; z-index: -1; background-color: var(--bg); background-size: 64px 64px, 100% 100%; }
.day-sky { background-image: var(--noise), linear-gradient(180deg, var(--sky-top), var(--sky-bottom)); /* one-hue */ }
/* The stage's height is shared out: the heading over the calendar and the clock, two equal tiles side by side whose
   bottom edge lines up with the bottom of the day's column (the sentence under it sits below both); the column fills
   the rest. Unpinned (reduced motion, phones on their side), the column falls back to --view-h. */
.day-grid { --say: 88px; position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); padding-top: calc(var(--navh) + 24px); padding-bottom: 28px; }
.day-l, .day-r { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.day-head, .day-things, .day-col { min-width: 0; }
.day-things { --tile: min(220px, 25vh); display: flex; align-items: flex-end; gap: 24px; margin: auto 0 var(--say); padding-top: 24px; }
@supports (height: 100svh) { .day-things { --tile: min(220px, 25svh); } }
.cal, .clock-box { position: relative; flex: 0 1 var(--tile); min-width: 0; aspect-ratio: 1 / 1; }

/* the calendar: a tile cut like the clock (its rounded square, face, hairline and lift), the weekday in the app's red
   over the date. At midnight its page curls at the corner and lifts away onto the next day (and lies back down,
   scrolling up). The page underneath shows its words and hairline only while the page above it moves. */
.cal { perspective: 1400px; filter: var(--clock-lift); }
.cal-page { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.cal-face { fill: var(--bg2); stroke: var(--hair); stroke-width: 1px; }
.cal-under .cal-face { stroke: none; }
.cal-under .cal-txt { visibility: hidden; }
.cal.is-peel .cal-under .cal-face { stroke: var(--hair); }
.cal.is-peel .cal-under .cal-txt { visibility: visible; }
.cal-wd { fill: var(--now); font: 600 25px/1 var(--display); letter-spacing: 0.02em; text-anchor: middle; }
.cal-d { fill: var(--ink); font: 300 112px/1 var(--display); letter-spacing: -0.03em; text-anchor: middle; }
.cal-sheet { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; }
/* each side of the page is an HTML box with its back hidden; day.js also shows only the side that faces you, for a
   renderer without 3D (WebKit's software path ignores backface-visibility) */
.cal-side { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cal-side[data-cal-flap] { opacity: 0; }
.cal-flap { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.cf-back { fill: var(--page-back); stroke: var(--hair); stroke-width: 1px; stroke-linejoin: round; }
.cal-rev { transform: rotateX(180deg); visibility: hidden; }
.cal-rev .cal-face { fill: var(--page-back); }

/* the clock: a rounded-square face, the hour and minute hands follow the scroll, the seconds keep time. Its seconds
   hand is the page's one orange; both tiles lift off the page in light only (--clock-lift). */
:root, [data-tone="dark"] { --clock-sec: #ff9f0a; --clock-pin: var(--ink); --clock-lift: none; }
html.is-light, [data-tone="light"] {
  --clock-sec: #ff9500; --clock-pin: var(--bg2);
  --clock-lift: drop-shadow(0 0.5px 0.75px rgba(0, 0, 0, 0.06)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.07));
}
.clock { display: block; width: 100%; height: 100%; overflow: visible; filter: var(--clock-lift); }
.c-face { fill: var(--bg2); stroke: var(--hair); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.c-ticks line { stroke: var(--ink3); stroke-opacity: 0.5; stroke-width: 1px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-ticks line.h { stroke: var(--ink); stroke-opacity: 1; stroke-width: 2.4px; vector-effect: none; }
.c-nums text { fill: var(--ink); font: 600 26px/1 var(--display); letter-spacing: -0.02em; text-anchor: middle; }
.c-hand, .c-hub { fill: var(--ink); }
.c-sec-line { stroke: var(--clock-sec); stroke-width: 1.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c-sec-cap { fill: var(--clock-sec); }
.c-sec-pin { fill: var(--clock-pin); }

/* the day as the app draws it: hours down the side, the rail, the rows, the Now line held at 40 %. Today's date and
   the Now line are in the app's red, as in the app and Calendar. */
.day-col { --view-h: max(220px, min(66vh, calc(100vh - 280px))); flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
@supports (height: 100svh) { .day-col { --view-h: max(220px, min(66svh, calc(100svh - 280px))); } }
.dcol-head { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.dcol-head b { font: 600 13px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--now); }
.dcol-head span { font-size: 15px; line-height: 1.3; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; }
.dcol-view { position: relative; flex: 1 1 var(--view-h); min-height: 160px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.dcol-track { position: absolute; left: 0; right: 0; top: 0; height: 0; will-change: transform; }
.dcl-hour, .dcl-bar, .dcl-row { position: absolute; }
.dcl-hour { left: 0; right: 0; height: 1px; }
.dcl-hour::before { content: ""; position: absolute; left: 56px; right: 0; top: 0; height: 1px; background: var(--hair2); }
.dcl-hour.is-short::before { right: auto; width: 32px; }
.dcl-hour span { position: absolute; left: 0; top: -8px; width: 48px; text-align: right; font: 400 12px/16px var(--sans); color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcl-bar { width: 8px; left: 72px; border-radius: 4px; background: var(--plan); }
.dcl-bar.stay { left: 62px; top: 0; width: 4px; height: 1px; border-radius: 0; opacity: 0.25; transform-origin: 0 0; }
.dcl-bar.step { left: 74px; width: 4px; border-radius: 0; opacity: 0.35; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Ccircle cx='2' cy='3' r='2'/%3E%3C/svg%3E") 0 0 / 4px 6px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Ccircle cx='2' cy='3' r='2'/%3E%3C/svg%3E") 0 0 / 4px 6px repeat-y; }
.dcl-row { left: 96px; right: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; color: var(--ink2); }
.dcl-row .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--ink2); }
.dcl-x { min-width: 0; }
.dcl-t { display: block; font: 600 17px/1.3 var(--sans); letter-spacing: -0.012em; overflow-wrap: anywhere; }
.dcl-row.step .dcl-t { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.dcl-tail { white-space: nowrap; }
.dcl-dot { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--now); vertical-align: 0.12em; opacity: 0; transition: opacity var(--quick) var(--ease); }
.dcl-s { display: block; margin-top: 1px; font: 400 14px/1.35 var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; }
.dcl-row.is-on { color: var(--ink); }
.dcl-row.is-on .dcl-dot { opacity: 1; }
.dcol-now { position: absolute; z-index: 2; left: 0; right: 0; top: 40%; height: 1px; }
.dcol-now::before, .dcol-now::after { content: ""; position: absolute; top: 0; height: 1px; background: var(--now); }
.dcol-now::before { left: 0; width: 92px; }
.dcol-now::after { left: 92px; right: 0; transition: opacity var(--quick) var(--ease); }
.dcol-now.is-over::after { opacity: 0; }   /* never a line through a row's words: it reads as struck out */
.dcol-pill { position: absolute; left: 0; top: -10px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--now); color: var(--on-now); font: 600 12px/20px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-say { margin: 14px 0 0; min-height: calc(var(--say) - 14px); }
.say-t { display: block; font: 600 clamp(20px, 0.6vw + 14px, 24px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.say-s { display: block; margin-top: 4px; font: 400 15px/1.4 var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; text-wrap: pretty; }

/* tablets held upright: the head, the calendar and clock under it, then the day filling the rest */
@media (min-width: 760px) and (max-width: 1179px) and (orientation: portrait) {
  .day-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "things" "col"; }
  .day-l, .day-r { display: contents; }
  .day-head { grid-area: head; }
  .day-things { grid-area: things; --tile: min(200px, 17vh); gap: 24px; margin: 0; padding-top: 32px; }
  @supports (height: 100svh) { .day-things { --tile: min(200px, 17svh); } }
  .day-col { grid-area: col; padding-top: 32px; --view-h: max(200px, min(40vh, calc(100vh - 640px))); }
  @supports (height: 100svh) { .day-col { --view-h: max(200px, min(40svh, calc(100svh - 640px))); } }
}
/* tablets on their side and small windows: two columns at the tablet sizes */
@media (min-width: 760px) and (max-width: 1179px) and (orientation: landscape) {
  .day-things { --tile: min(184px, 25vh); gap: 20px; }
  @supports (height: 100svh) { .day-things { --tile: min(184px, 25svh); } }
}
/* phones: the head, the calendar and clock in a row, the day, and one line of what's happening */
@media (max-width: 759px) {
  .day-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head" "things" "col"; padding-top: calc(var(--navh) + 20px); padding-bottom: 12px; }
  .day-l, .day-r { display: contents; }
  .day-head { grid-area: head; }
  .day-things { grid-area: things; --tile: min(140px, 16vh, calc(50vw - 24px)); gap: 16px; margin: 0; padding-top: 16px; }
  @supports (height: 100svh) { .day-things { --tile: min(140px, 16svh, calc(50vw - 24px)); } }
  .day-col { grid-area: col; padding-top: 16px; --view-h: max(160px, min(42vh, calc(100vh - 410px))); }
  @supports (height: 100svh) { .day-col { --view-h: max(160px, min(42svh, calc(100svh - 410px))); } }
  .dcol-head { margin-bottom: 6px; }
  .day-say { margin-top: 8px; min-height: 2.7em; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .say-t, .say-s { display: inline; font: inherit; letter-spacing: 0; margin: 0; }
  .say-t { font-weight: 600; color: var(--ink); }
  .say-s::before { content: " · "; }
  .dcl-t { font-size: 16px; }
  .dcl-row.step .dcl-t { font-size: 14px; }
  .dcl-s { font-size: 13px; }
}
/* phones: the sub stays (15 px, two lines); the day column gives up the room for it. Under 700 px tall only screen
   readers get it */
@media (max-width: 759px) and (min-height: 700px) {
  .day .sub { font-size: 15px; margin-top: 10px; }
  .day-col { --view-h: max(160px, min(38vh, calc(100vh - 495px))); }
  @supports (height: 100svh) { .day-col { --view-h: max(160px, min(38svh, calc(100svh - 495px))); } }
}
@media (max-width: 759px) and (max-height: 699px) {
  .day .sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
}
/* phones on their side (the stage lets go of the pin): the calendar and clock beside the day */
@media (max-height: 500px) and (orientation: landscape) {
  .day-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: none; column-gap: 28px; padding-top: calc(var(--navh) + 16px); padding-bottom: 16px; }
  .day-l, .day-r { display: flex; }
  .day .sub { display: none; }
  .day-things { --tile: 104px; gap: 16px; margin-bottom: 0; padding-top: 16px; }
  .day-col { padding-top: 0; --view-h: max(160px, min(70vh, calc(100vh - 150px))); }
  @supports (height: 100svh) { .day-col { --view-h: max(160px, min(70svh, calc(100svh - 150px))); } }
  .day-say { min-height: 0; }
}
/* unpinned and still (reduced motion): the stage is at least a screen tall, and the day fills it */
.reduce .day-grid { min-height: 100vh; }
@supports (height: 100svh) { .reduce .day-grid { min-height: 100svh; } }
/* without JavaScript: the heading and the calendar page; the day itself is in the summary for screen readers */
html:not([data-js]) .day-col, html:not([data-js]) .clock-box { display: none; }

/* ── Chapters: heights (each a pinned stage this many viewports tall) ─────────────────────────────────── */
.h180 { height: 180vh; } .h200 { height: 200vh; } .h220 { height: 220vh; } .h240 { height: 240vh; } .h260 { height: 260vh; } .h300 { height: 300vh; }
@supports (height: 100svh) {
  .h180 { height: 180svh; } .h200 { height: 200svh; } .h220 { height: 220svh; } .h240 { height: 240svh; } .h260 { height: 260svh; } .h300 { height: 300svh; }
}
/* devices fit the room actually left under the copy (chapters.js sets --pw from the visual's measured height, so
   the frame keeps its proportions), and never overflow on tablets */
@media (max-width: 759px) { .ch:not(.ch-line):not(.day) .ch-visual { min-height: 0; } }
@media (max-width: 759px) and (max-height: 700px) { #together .sub { display: none; } }

/* ── Add without typing: four made-up documents, each dropped into the phone ─────────────────────────── */
@media (min-width: 1180px) { .imp-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); } }
.imp-visual { justify-content: center; gap: 32px; }
.docs { position: relative; z-index: 2; flex: none; width: 320px; height: 100%; pointer-events: none; }
.doc {
  position: absolute; left: 0; top: 50%; width: 320px; margin: 0; padding: 16px 18px; border-radius: 12px;
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 0.5px var(--hair), var(--sh-doc);
  font: 400 13px/1.35 var(--sans); transform-origin: 50% 50%; transform: translateY(-50%); will-change: transform, opacity;
}
.doc p { margin: 0; }
.doc dl, .doc dd { margin: 0; }
.doc dt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.doc dd { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-head { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.doc-head b { font-weight: 700; letter-spacing: -0.01em; }
.doc-head span { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.doc .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doc .nw { white-space: nowrap; }
/* the boarding pass: perforated at 72 %, with a stub and our own bars (not a code anything can scan) */
.bp { padding: 0; border-radius: 14px; }
.bp-main { padding: 16px 18px 14px; }
.bird { width: 22px; height: 22px; color: var(--ink); }
.bp-big { margin-top: 10px !important; font: 600 34px/1 var(--display); letter-spacing: -0.02em; }
.bp-big i { font-style: normal; font-weight: 300; color: var(--ink3); }
.bp-cities { margin-top: 4px !important; font-size: 12px; color: var(--ink2); }
.bp-f { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px 14px; margin-top: 14px !important; }
.bp-stub { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 12px 18px 14px; border-top: 1px dashed var(--hair); }
.bp-stub::before, .bp-stub::after { content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 0.5px var(--hair); }
.bp-stub::before { left: -8px; } .bp-stub::after { right: -8px; }
.bp-stub p { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-code { grid-column: 2; grid-row: 1 / span 3; width: 116px; height: 46px; color: var(--ink); }
.bp-num { font-size: 11px !important; font-weight: 400 !important; color: var(--ink3); }
/* the confirmation email */
.mail-from { display: flex; align-items: center; gap: 10px; }
.mail-from > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.mail-from b { font-size: 14px; }
.mail-from small { font-size: 11px; color: var(--ink3); }
.mail-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg3); color: var(--ink2); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.mail-h { margin-top: 12px !important; font: 600 16px/1.25 var(--display); letter-spacing: -0.01em; }
.mail-p { margin-top: 6px !important; font-size: 12px; color: var(--ink2); }
.mail-dl { position: relative; margin-top: 10px !important; }
.mail-dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; box-shadow: inset 0 -0.5px 0 var(--hair2); }
.mail-dl dt { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink2); white-space: nowrap; }
.mail-dl dd { font-size: 12px; text-align: right; }
.read-mark { position: absolute; left: 18px; top: 0; width: calc(100% - 36px); height: 1.5px; border-radius: 1px; background: var(--accent); opacity: 0; transform-origin: 0 50%; }
/* the rental voucher */
.vc-no { margin-left: 0 !important; font-size: 11px; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink3); }
.vc-no b { color: var(--ink); font-weight: 600; }
.vc .doc-head { flex-wrap: wrap; row-gap: 2px; }
.vc .doc-head span:nth-of-type(1) { margin-left: auto; }
.vc .doc-head .vc-no { flex-basis: 100%; }
.vc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px !important; padding-top: 12px; box-shadow: inset 0 0.5px 0 var(--hair); }
.vc-cols dd { display: flex; flex-direction: column; gap: 2px; font-weight: 400; font-size: 12px; color: var(--ink2); }
.vc-cols dd b { font-size: 13px; color: var(--ink); font-weight: 600; }
.vc-foot { margin-top: 12px !important; padding-top: 10px; box-shadow: inset 0 0.5px 0 var(--hair); font-size: 12px; color: var(--ink2); }
/* the tour ticket */
.tk { display: grid; grid-template-columns: 1fr 76px; padding: 0; border-radius: 14px; }
.tk-main { padding: 16px 18px; }
.tk-big { margin-top: 8px !important; font: 600 22px/1.1 var(--display); letter-spacing: -0.02em; }
.tk-sub { margin-top: 2px !important; font-size: 13px; color: var(--ink2); }
.tk-when { margin-top: 12px !important; display: flex; flex-direction: column; font-size: 12px; color: var(--ink2); }
.tk-when b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-fine { margin-top: 10px !important; font-size: 11px; color: var(--ink3); }
.tk-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-left: 1px dashed var(--hair); text-align: center; }
.tk-stub b { font: 200 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.tk-stub span { font-size: 11px; color: var(--ink2); }
.tk-stub .mono { margin-top: 8px; color: var(--ink3); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.04em; }
/* a paper's words fade apart from the paper itself (chapters.js?v=a18ba10f52), so they never show through the phone's screen */
.doc > * { opacity: var(--ink-o, 1); }
/* one document at a time over the phone on narrower screens, each held for a good stretch of scrolling: the chapter
   is taller there */
@media (max-width: 1179px) and (min-height: 501px) {
  html[data-js] #import.h300 { height: 400vh; }
  @supports (height: 100svh) { html[data-js] #import.h300 { height: 400svh; } }
}
@media (max-width: 1179px) {
  .imp-visual { gap: 0; }
  .docs { position: absolute; left: 0; right: 0; top: 0; height: 100%; width: min(300px, calc(100vw - 32px)); margin: 0 auto; }
  .doc { width: 100%; top: 4%; transform: none; }
}
@media (max-width: 759px) {
  .docs { top: 4px; }
  .doc { padding: 14px 16px; }
  .bp-main { padding: 14px 16px 12px; }
  .bp-big { font-size: 30px; }
  .bp-f { grid-template-columns: repeat(3, auto); gap: 8px 10px; }
  .bp-stub { padding: 10px 16px 12px; }
  .bp-code { width: 96px; height: 40px; }
  .tk { grid-template-columns: 1fr 64px; }
  .tk-main { padding: 14px 16px; }
}
/* calm and still: all four in a row, and the phone at its last state */
.reduce .docs, html:not([data-js]) .docs { position: static; transform: none; width: 100%; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.reduce .doc, html:not([data-js]) .doc { position: relative; top: auto; left: auto; width: auto; transform: none !important; opacity: 1 !important; }
.reduce .imp-visual, html:not([data-js]) .imp-visual { flex-wrap: wrap; height: auto; gap: 24px; padding: 24px 0; }
.reduce .imp-grid, html:not([data-js]) .imp-grid { grid-template-columns: 1fr; }
.reduce .ch.rev .imp-grid .ch-copy, html:not([data-js]) .imp-grid .ch-copy { order: 0; justify-self: start; }
.reduce .read-mark { display: none; }

/* ── Apple Watch ──────────────────────────────────────────────────────────────────────────────────────── */
.watch-visual { gap: clamp(20px, 4vw, 56px); }
.aw { position: relative; --ww: min(250px, calc((100svh - var(--navh) - 140px) * 0.68)); width: var(--ww); container-type: inline-size; }
/* the case and crown: flat, one material, a hairline rim (the face itself is black in both modes) */
.aw-case { position: relative; aspect-ratio: 410 / 502; border-radius: 24% / 20%; padding: 5.5%; background: var(--device-body); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--sh-device); }
.aw-case.small { border-radius: 26% / 22%; }
.aw-crown, .aw-btn { position: absolute; border-radius: 3px; background: var(--device-body); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 0.5px var(--hair); }
.aw-crown { right: -3.4%; top: 25%; width: 4.6%; height: 15%; }
.aw-btn { right: -2.2%; top: 47%; width: 3%; height: 20%; }
.aw-screen { position: relative; height: 100%; border-radius: 19% / 15.5%; background: var(--bezel); overflow: hidden; padding: 9% 8.5% 0; font-size: 6.6cqw; color: var(--app-label); line-height: 1.25; }
.aw-title { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4em; font-size: 0.8em; font-weight: 600; color: var(--app-label2); }
.aw-title span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aw-clock { color: var(--app-label); font-variant-numeric: tabular-nums; }
.aw-focus { margin-top: 0.55em; padding: 0.6em 0.7em; border-radius: 0.8em; background: var(--app-cell); }
.aw-l1 { font-size: 0.86em; font-weight: 600; font-variant-numeric: tabular-nums; transition: color var(--quick) var(--ease); }
.aw-l1.urgent { color: var(--app-blue); }
.aw-count { margin: 0.1em 0 0.25em; font: 600 1.2em/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.aw-plan { display: flex; align-items: center; gap: 0.4em; font-size: 0.84em; font-weight: 600; }
.aw-plan i { width: 0.7em; height: 0.7em; border-radius: 0.15em; flex: none; background: var(--app-red); }
.aw-plan span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-place { font-size: 0.72em; color: var(--app-label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-steps { list-style: none; margin: 0.45em 0 0; padding: 0; }
.aw-steps li { display: grid; grid-template-columns: 2.9em 1em minmax(0, 1fr); gap: 0.35em; align-items: center; font-size: 0.74em; padding: 0.22em 0; transition: opacity var(--quick) var(--ease), color var(--quick) var(--ease); }
.aw.h12 .aw-steps li { grid-template-columns: 4.6em 1em minmax(0, 1fr); }
.aw-steps time { color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-steps .ic { width: 1em; height: 1em; color: var(--app-label2); }
.aw-steps span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-steps li.done { opacity: 0.4; }
.aw-steps li.now, .aw-steps li.now time, .aw-steps li.now .ic { color: var(--app-blue); }
.aw-steps li.plan span { font-weight: 600; }
.aw-face { --ww: min(170px, calc((100svh - var(--navh) - 140px) * 0.46)); width: var(--ww); container-type: inline-size; }
.aw-screen.face { padding: 12% 9%; display: flex; flex-direction: column; }
.f-time { font: 600 3.2em/1 var(--rounded); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.f-date { margin: 0.2em 0 auto; font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; color: var(--app-label2); }
.cp { display: flex; flex-direction: column; margin-bottom: 4%; padding: 0.55em 0.7em; border-radius: 0.8em; background: var(--app-cell); font-size: 0.86em; line-height: 1.25; }
.cp-1 { font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-2 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-3 { font-size: 0.9em; color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp.accent .cp-1, .cp.accent .cp-2 { color: var(--app-blue); }
@media (max-width: 759px) {
  .watch-visual { align-items: center; padding-bottom: 24px; }
  .aw { --ww: min(250px, 66vw, calc((100svh - var(--navh) - 300px) * 0.8)); }
  .aw-face { display: none; }
}

/* ── Trail ────────────────────────────────────────────────────────────────────────────────────────────── */
/* the stage follows the page: the sea is the page, the land a shade off it, the contours hairlines (trail.js?v=a18ba10f52) */
.trail-stage { background: var(--bg); }
.contours {
  position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent var(--fade0, 34%), #000 var(--fade1, 48%)); /* mask fade */
  mask-image: linear-gradient(90deg, transparent var(--fade0, 34%), #000 var(--fade1, 48%)); /* mask fade */
}
/* a tablet held upright: the copy and the phone at the top, the map in the band under them */
.trail-stage.map-below .ch-grid { align-items: start; padding-top: calc(var(--navh) + 40px); }
.trail-stage.map-below .ch-visual { align-items: flex-start; height: auto; }
.trail-stage.map-below .contours {
  -webkit-mask-image: linear-gradient(180deg, transparent var(--fade0, 70%), #000 var(--fade1, 76%)); /* mask fade */
  mask-image: linear-gradient(180deg, transparent var(--fade0, 70%), #000 var(--fade1, 76%)); /* mask fade */
}
.trail-marks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tmark { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: var(--ink); white-space: nowrap; will-change: transform; transition: opacity var(--frame) var(--ease); }
.tmark.l { flex-direction: row-reverse; }
.tmark i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg2); box-shadow: 0 0 0 1.5px var(--ink); }
.tmark.you i { background: var(--ink); color: var(--bg); }
.tmark.place { font-weight: 500; color: var(--ink2); transition-duration: var(--quick); }
.tmark.place i { width: 5px; height: 5px; background: var(--ink2); box-shadow: none; }
.tmark.off { opacity: 0; }
.trail-visual { justify-content: flex-end; }
/* the sheet scrolls as the app's does (trail.js sets --tm-scroll from the progress): the newest message keeps just
   above the field or the offline card, and what scrolls up goes under the pinned nav bar */
.trail-app { padding-top: 3em; }
.trail-app > :not(.sb):not(.nav-bar):not(.tm-offline):not(.tm-input) { transform: translateY(calc(-1 * var(--tm-scroll, 0px))); transition: transform var(--zoom) var(--ease); }
.trail-app .nav-bar { position: relative; z-index: 2; background: var(--app-bg); box-shadow: 0 -3em 0 1em var(--app-bg); }
.trail-app .nav-bar::after {
  /* what scrolls up fades out under the bar instead of ending at a hard edge: the bar's own colour, faded by an alpha
     mask over 0.9em (only once the sheet has scrolled) */
  content: ""; position: absolute; left: -1.1em; right: -1.1em; top: 100%; height: 0.9em; background: var(--app-bg); pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, transparent); /* mask fade */
  mask-image: linear-gradient(#000, transparent); /* mask fade */
  opacity: 0; transition: opacity var(--quick) var(--ease);
}
.trail-app.tm-scrolled .nav-bar::after { opacity: 1; }
.tm-on { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0.7em 1.1em 0; }
.tm-on > span { display: flex; flex-direction: column; line-height: 1.25; }
/* at the app's own type scale (1em = 17 pt), so the sheet is as full as the app's */
.tm-on b { font-size: 1em; font-weight: 400; }
.tm-on small { font-size: 0.82em; color: var(--app-label2); }
.tm-foot { margin: 0.9em 1.1em 0; padding-bottom: 1em; font-size: 0.78em; line-height: 1.38; color: var(--app-label2); box-shadow: inset 0 -0.5px 0 var(--app-sep); }
.tm-h { margin: 1.4em 1.1em 0.3em; font-size: 0.8em; font-weight: 600; color: var(--app-label2); }
.tm-pp { list-style: none; margin: 0; padding: 0 1.1em; }
.tm-pp li { display: flex; align-items: center; gap: 0.7em; padding: 0.72em 0; box-shadow: inset 0 -0.5px 0 var(--app-sep); }
.tm-pp .av { width: 2.2em; height: 2.2em; font-size: 0.8em; }
.tm-pp li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; font-size: 1em; }
.tm-pp b { font-weight: 400; }
.tm-pp small { font-size: 0.82em; color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; margin: 1.1em 1.1em 0; }
.tm-acts span { display: flex; align-items: center; justify-content: center; gap: 0.35em; padding: 0.75em 0.3em; border-radius: 99px; background: var(--row); font-size: 0.8em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.tm-acts .ic { width: 1.15em; height: 1.15em; flex: none; }
.msgs { list-style: none; margin: 0; padding: 0 1.1em; display: flex; flex-direction: column; gap: 0.55em; }
.msgs li { display: none; flex-direction: column; font-size: 0.9em; line-height: 1.35; }
.msgs li.on { display: flex; animation: msg-in var(--frame) var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(0.5em); } }
.msgs small { font-size: 0.84em; color: var(--app-label2); font-variant-numeric: tabular-nums; }
.msgs small b { color: var(--app-label); font-weight: 600; }
.msgs .me-asked { color: var(--app-label2); font-style: italic; }
.msgs .reach { font-size: 0.8em; color: var(--app-green); }
.msgs .voice { display: inline-flex; align-items: center; white-space: nowrap; gap: 0.5em; align-self: flex-start; padding: 0.45em 0.8em; border-radius: 99px; background: var(--row); font-variant-numeric: tabular-nums; }
.msgs .voice .ic { width: 1em; height: 1em; color: var(--app-blue); }
.msgs .voice .bars { display: inline-flex; gap: 0.16em; align-items: center; height: 1em; }
.msgs .voice .bars i { width: 0.16em; border-radius: 0.08em; background: var(--app-label2); }
.tm-offline { position: absolute; left: 1.1em; right: 1.1em; bottom: 4.4em; padding: 0.3em 0; border-radius: 1em; background: var(--app-cell); box-shadow: 0 0 0 0.5px var(--app-sep), 0 1em 2em -1em rgba(0, 0, 0, 0.45); transform: translateY(0.6em) scale(0.98); opacity: 0; transition: transform var(--frame) var(--ease), opacity 0s; }
/* the messages make room first, then the card comes; going back, it goes at once (never over the words) */
.tm-offline.on { transform: none; opacity: 1; transition: transform var(--frame) var(--ease) 300ms, opacity 240ms var(--ease) 300ms; }
.tm-offline p { margin: 0.4em 1em 0.2em; font-size: 0.64em; font-weight: 600; color: var(--app-label2); }
.tm-offline span { display: flex; align-items: center; gap: 0.55em; padding: 0.55em 1em; font-size: 0.8em; }
.tm-offline span + span { box-shadow: inset 0 0.5px 0 var(--app-sep); }
.tm-offline .ic { width: 1.15em; height: 1.15em; color: var(--app-blue); }
.tm-input { position: absolute; left: 1.1em; right: 1.1em; bottom: 1.1em; display: flex; justify-content: space-between; align-items: center; padding: 0.5em 0.6em 0.5em 0.9em; border-radius: 99px; background: var(--row); color: var(--app-label3); font-size: 0.82em; }
.tm-mic .ic { width: 1.2em; height: 1.2em; color: var(--app-label); transition: color var(--quick) var(--ease); }
.tm-mic.talk .ic { color: var(--app-red); }
@media (max-width: 759px) {
  .contours { -webkit-mask-image: linear-gradient(180deg, transparent var(--fade0, 30%), #000 var(--fade1, 42%)); mask-image: linear-gradient(180deg, transparent var(--fade0, 30%), #000 var(--fade1, 42%)); /* mask fade */ }
  /* the whole iPhone at the right of the room under the copy, as tall as that room allows (trail.js sets --pw); the
     map runs on behind it, and its camera follows you in the column beside it */
  .trail .ch-visual { position: relative; }
  .trail .ch-visual .phone { --pw: min(210px, 54vw); position: absolute; right: 0; bottom: 0; }
}
.msgs.measure li { display: flex; animation: none; }
.reduce .tmark, html:not([data-js]) .trail-marks { transition: none; }
.reduce .trail .ch-visual .phone, html:not([data-js]) .trail .ch-visual .phone { position: relative; top: auto; bottom: auto; }

/* ── Costs ────────────────────────────────────────────────────────────────────────────────────────────── */
.costs-app { --co-bg: var(--app-bg); background: var(--co-bg); padding-top: 3em; }
.nav-bar .x, .nav-bar .plus { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: var(--row); box-shadow: inset 0 0 0 0.5px var(--app-sep); }
.nav-bar .plus { justify-self: end; }
.nav-bar .x .ic, .nav-bar .plus .ic { width: 1em; height: 1em; }
.co-l { margin: 0.7em 1.1em 0; font-size: 0.72em; font-weight: 600; color: var(--app-label2); }
.co-total { margin: 0 calc(1.1em / 2.05) 0.4em; font: 700 2.05em/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.co-people, .co-settle { list-style: none; margin: 0; padding: 0 1.1em; }
.co-people li, .co-settle li { display: flex; align-items: center; gap: 0.6em; padding: 0.42em 0; font-size: 0.8em; box-shadow: inset 0 -0.5px 0 var(--app-sep); }
.co-people .av { width: 1.9em; height: 1.9em; font-size: 0.78em; }
.co-people li b { flex: 1; font-weight: 500; }
.co-people li > span:last-child { font-size: 0.86em; color: var(--app-label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-h { margin: 0.9em 1.1em 0.2em; font-size: 0.68em; font-weight: 600; color: var(--app-label2); }
/* the payments wait, quiet, until the third beat settles them */
.co-settle li { opacity: 0.32; transition: opacity var(--frame) var(--ease); }
.co-settle li.on { opacity: 1; }
.co-settle li i { opacity: 0; transition: opacity var(--frame) var(--ease); }
.co-settle li.on i { opacity: 1; }
.co-settle li span { flex: 1; }
.co-settle li b { font-variant-numeric: tabular-nums; }
.co-settle li i { font-style: normal; font-size: 0.82em; font-weight: 600; padding: 0.25em 0.7em; border-radius: 99px; background: var(--row); box-shadow: inset 0 0 0 0.5px var(--app-sep); }
.co-items ul { list-style: none; margin: 0; padding: 0 1.1em; }
.co-items li { display: flex; align-items: center; gap: 0.6em; padding: 0.38em 0; font-size: 0.78em; }
/* opaque, and the later ones on top: a cost still to come lies under the ones below it until they move down off it */
.co-items li, .co-items .co-h { position: relative; background: var(--co-bg); }
.co-items .co-h { margin: 0; padding: 0.9em 1.1em 0.2em; }
.co-items li .ic { width: 1.1em; height: 1.1em; color: var(--app-label2); }
.co-items li span { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.co-items li span b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-items li small { color: var(--app-label2); }
.co-items li > b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* a payment no longer needed leaves the list */
.co-settle li.gone { display: none; }

/* ── Mac and iPad ─────────────────────────────────────────────────────────────────────────────────────── */
.mac-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); align-items: center; gap: 12px clamp(28px, 4vw, 64px); padding-top: calc(var(--navh) + 16px); padding-bottom: 14px; }
@media (max-width: 1199px) { .mac-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } }
/* The desk: a laptop and an iPad in frames drawn here (no product photos, no logos), around the apps' own screens at
   1 px per point (site/tools/devices). Everything on the desk is in its em, 1 % of its width, so the composition
   scales as one to the room it has: --W is the visual's width, or its height over --ar. data-at (chapters.js?v=a18ba10f52) is the
   beat: 0 and 1 the laptop alone (the trip, then a dropped booking being checked); 2 and 3 the laptop steps back to
   the upper left and the iPad comes forward over its lower right (the trip, then Costs). Only transform and opacity
   move; scrolling back plays it backwards. */
.dv { container-type: size; align-self: stretch; min-width: 0; min-height: 0; display: grid; place-items: center; }
.dv-desk {
  --ar: 0.8;                                       /* the desk's height over its width */
  --lap-y: 7.9;                                    /* the laptop's top while it is alone, in em */
  --lap-back: translate(0, -7.4em) scale(0.58);    /* the laptop stepped back, from its top left corner */
  --pad-w: 72;                                     /* the iPad's width, in % of the desk */
  --W: min(100cqw, calc(100cqh / var(--ar)));
  position: relative; width: var(--W); height: calc(var(--W) * var(--ar)); font-size: calc(var(--W) / 100);
}
/* the laptop: a lid (the body's rim, black glass, a camera) a little narrower than the base it stands on */
.lap { position: absolute; left: 0; top: calc(var(--lap-y) * 1em); width: 100em; margin: 0; transform-origin: 0 0; transition: transform 1000ms var(--ease); }
.lap-lid { position: relative; margin: 0 4em; padding: 2.1em 1.9em 2.5em; border-radius: 2.6em 2.6em 1.1em 1.1em; background: var(--device-body); box-shadow: var(--sh-device); }
.lap-lid::before { content: ""; position: absolute; inset: 0.36em; border-radius: 2.25em 2.25em 0.8em 0.8em; background: var(--bezel); }
.lap-lid::after { content: ""; position: absolute; left: 50%; top: 0.8em; width: 0.5em; height: 0.5em; margin-left: -0.25em; border-radius: 50%; background: var(--device-body); }
.lap .dv-scr { aspect-ratio: 1320 / 860; border-radius: 0.55em 0.55em 0.15em 0.15em; }
/* the base, seen edge-on: a lit top edge and a darker underside */
.lap-base {
  height: 2.2em; border-radius: 0.2em 0.2em 1.8em 1.8em / 0.2em 0.2em 1.4em 1.4em; background: var(--device-body);
  box-shadow: inset 0 0.12em 0 rgba(255, 255, 255, 0.14), inset 0 -0.5em 0.6em -0.3em rgba(0, 0, 0, 0.6), var(--sh-device);
}
/* the iPad, landscape: an even bezel (2.2 % of its width), corners concentric with the screen's, a camera on the long
   edge. In its own em, 1 % of its width. */
.pad {
  position: absolute; right: 0; bottom: 1.5%; width: 100em; margin: 0; padding: 2.2em; font-size: calc(var(--pad-w) * 0.01em);
  border-radius: 3.7em; background: var(--device-body); box-shadow: var(--sh-device);
  opacity: 0; transform: translateY(12%); transition: opacity 700ms var(--ease), transform 1000ms var(--ease);
}
.pad::before { content: ""; position: absolute; inset: 0.4em; border-radius: 3.3em; background: var(--bezel); }
.pad::after { content: ""; position: absolute; left: 50%; top: 0.85em; width: 0.5em; height: 0.5em; margin-left: -0.25em; border-radius: 50%; background: var(--device-body); }
.pad .dv-scr { aspect-ratio: 1180 / 820; border-radius: 1.5em; }
/* the screens: the beat's picture fades in over the one before it */
.dv-scr { position: relative; z-index: 1; overflow: hidden; background: var(--app-bg); }
.dv-shot { position: absolute; inset: 0; opacity: 0; transition: opacity var(--frame) var(--ease); }
.dv-shot.s0, .dv[data-at="1"] .lap .s1, .dv[data-at="3"] .pad .s1 { opacity: 1; }
.dv-shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dv[data-at="2"] .lap, .dv[data-at="3"] .lap { transform: var(--lap-back); }
.dv[data-at="2"] .pad, .dv[data-at="3"] .pad { opacity: 1; transform: none; }
/* the one making room moves first: the laptop steps back a beat before the iPad arrives, and the iPad leaves a beat
   before the laptop comes forward again */
.lap { transition-delay: 140ms; }
.dv[data-at="2"] .lap, .dv[data-at="3"] .lap { transition-delay: 0ms; }
.dv[data-at="2"] .pad, .dv[data-at="3"] .pad { transition-delay: 140ms; }
/* each picture in the page's own appearance: only the visible one is laid out, so only it loads (loading=lazy) */
.dv-shot [data-light] { display: none; }
html.is-light .dv-shot [data-light] { display: block; }
html.is-light .dv-shot [data-dark] { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-js]):not(.is-dark) .dv-shot [data-light] { display: block; }
  :root:not([data-js]):not(.is-dark) .dv-shot [data-dark] { display: none; }
}
/* without JavaScript: both devices, the laptop behind the iPad. Where the stage isn't pinned (reduced motion, no
   JavaScript, a phone on its side) the visual has no height of its own: it measures only its width, and --W falls
   back to the screen's height. */
html:not([data-js]) .lap { transform: var(--lap-back); }
html:not([data-js]) .pad { opacity: 1; transform: none; }
.reduce .dv, html:not([data-js]) .dv { container-type: inline-size; }
/* a phone on its side holds the section still: both devices, as without JavaScript */
@media (max-height: 500px) and (orientation: landscape) {
  .dv { container-type: inline-size; }
  .dv .lap, .dv[data-at] .lap { transform: var(--lap-back); }
  .dv .pad, .dv[data-at] .pad { opacity: 1; transform: none; }
}
@supports not (height: 1cqh) {
  .dv-desk { --W: min(calc((100vw - 2 * var(--gutter)) * 0.66), calc((100vh - var(--navh) - 60px) / var(--ar)), 776px); }
}
/* tablets and phones: the copy above the desk */
@media (max-width: 899px) {
  .mac-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(var(--navh) + 14px); align-items: start; }
  @supports not (height: 1cqh) { .dv-desk { --W: min(calc(100vw - 2 * var(--gutter)), calc((100vh - var(--navh) - 340px) / var(--ar))); } }
}
/* the shortest desktops: the beats a little closer still */
@media (min-width: 900px) and (max-height: 640px) {
  .mac .big { font-size: min(var(--fs-h2), max(32px, 6.2vh)); }
  .mac .beats li { padding-top: 5px; padding-bottom: 5px; }
  .mac .beats li::before { top: 12px; }
  .mac .beats li::after { top: 25px; bottom: -9px; }
}
/* a tablet's width on a screen too short for the whole list above the desk: only the beat being told, as on phones */
@media (min-width: 760px) and (max-width: 899px) and (min-height: 501px) and (max-height: 940px) {
  html[data-js]:not(.reduce) .mac .beats { margin-top: 14px; }
  html[data-js]:not(.reduce) .mac .beats li { grid-area: 1 / 1; padding: 0; opacity: 0; transform: translateY(6px); transition: opacity var(--frame) var(--ease), transform var(--frame) var(--ease); }
  html[data-js]:not(.reduce) .mac .beats li::before, html[data-js]:not(.reduce) .mac .beats li::after { display: none; }
  html[data-js]:not(.reduce) .mac .beats li.on { opacity: 1; transform: none; }
  html[data-js]:not(.reduce) .mac .beats li.done { opacity: 0; transform: translateY(-6px); }
}
/* phones: a taller desk under the copy, the laptop at its top; the iPad comes up under it, nearly as wide as the page,
   and covers only the laptop's base */
@media (max-width: 759px) {
  .dv { place-items: start center; padding-top: 8px; }
  .dv-desk { --ar: 1.16; --lap-y: 2; --lap-back: translate(0, -2em) scale(0.8); --pad-w: 92; }
}

/* ── Privacy ──────────────────────────────────────────────────────────────────────────────────────────── */
.h100 { height: 100vh; } .h120 { height: 120vh; }
@supports (height: 100svh) { .h100 { height: 100svh; } .h120 { height: 120svh; } }
.priv-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--navh) + 24px); padding-bottom: 32px; }
.tiles { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  padding: 24px; border-radius: 14px; background: var(--bg2); box-shadow: var(--sh-rest);
  opacity: 0; transform: translateY(16px); transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease);
}
.tile.on { opacity: 1; transform: none; }
.tile .ic { width: 24px; height: 24px; color: var(--ink2); }
.tile h3 { margin: 16px 0 0; font: 600 19px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.tile p { margin: 6px 0 0; color: var(--ink2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.priv-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-top: 24px; }
.priv-line { margin: 0; font-size: 15px; color: var(--ink2); }
.priv-link { position: relative; font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.priv-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.priv-link::after { content: ""; position: absolute; inset: -12px -4px; }
@media (max-width: 759px) {
  .tiles { gap: 8px; margin-top: 18px; }
  .tile { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; padding: 14px 16px; }
  .tile .ic { width: 20px; height: 20px; grid-row: span 2; margin-top: 1px; }
  .tile h3 { margin: 0; font-size: 16px; }
  .tile p { margin-top: 2px; font-size: 14px; line-height: 1.45; }
  .priv-foot { margin-top: 16px; }
  .priv-line, .priv-link { font-size: 14px; }
}

/* ── End and footer ───────────────────────────────────────────────────────────────────────────────────── */
.end-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--navh) + 24px); padding-bottom: 32px; }
.end .sub { margin-left: auto; margin-right: auto; max-width: 720px; }
.end-icon { width: 88px; height: 88px; border-radius: 20px; margin-bottom: 32px; box-shadow: 0 0 0 0.5px var(--hair), var(--sh-rest); }
.end-req { margin: 12px 0 0; max-width: 520px; font-size: 13px; line-height: 1.5; color: var(--ink3); text-wrap: balance; }
.big-btn { margin-top: 32px; height: 44px; padding: 0 22px; border-radius: 999px; font-size: 16px; }
.end-contact { margin: 24px 0 0; font-size: 15px; color: var(--ink2); }
.end-contact a, .foot a { position: relative; color: var(--ink2); text-decoration: none; transition: color var(--quick) var(--ease); }
.end-contact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.end-contact a:hover, .foot a:hover { color: var(--ink); text-decoration-color: currentColor; }
.end-contact a::after, .foot a::after { content: ""; position: absolute; inset: -12px -4px; }
@media (max-width: 759px) { .end-icon { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 24px; } .big-btn { margin-top: 24px; } }
.foot { position: relative; padding: 28px 0 calc(40px + env(safe-area-inset-bottom)); box-shadow: inset 0 0.5px 0 var(--hair2); font-size: 13px; color: var(--ink3); background: var(--bg); }
.foot-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }

/* between chapters: the page itself, flat */
.ch:not(.ch-line):not(.day):not(.trail) .stage { background: var(--bg); }

/* ── Reduced motion: calm, still sections in the flow of the page ─────────────────────────────────────── */
.reduce .ch:not(.ch-line) { height: auto !important; }
.reduce .ch:not(.ch-line) .stage { position: relative; height: auto; min-height: 100svh; }
.reduce .ch-line { height: auto !important; }
.reduce .ch-line .stage { position: relative; }
.reduce .ch-grid, .reduce .mac-grid { min-height: 100svh; padding-bottom: 56px; }
.reduce .beats li { opacity: 1 !important; transform: none !important; position: relative; } /* its dot and connector stay beside it */
.reduce .beats li { color: var(--ink); }
.reduce .beats li::before { background: var(--ink3); }
.reduce .ch-rail { display: none; }
.reduce .route-toggle { display: inline-flex; }
.reduce *, .reduce *::before, .reduce *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Without JavaScript, or when the boot failed: every section in the flow, showing its first state ────── */
html:not([data-js]) .ch { height: auto; }
html:not([data-js]) .ch .stage { position: relative; height: auto; min-height: 100vh; }
@supports (height: 100svh) { html:not([data-js]) .ch .stage { min-height: 100svh; } }
html:not([data-js]) .ch .ch-grid { min-height: 100vh; padding-bottom: 48px; }
html:not([data-js]) .st[data-state="0"] { opacity: 1; transform: none; }
html:not([data-js]) .beats li { opacity: 1; transform: none; grid-area: auto; color: var(--ink); }
html:not([data-js]) .tile { opacity: 1; transform: none; }
html:not([data-js]) canvas, html:not([data-js]) .hud, html:not([data-js]) .ghost, html:not([data-js]) .hint,
html:not([data-js]) .cue, html:not([data-js]) .ch-rail, html:not([data-js]) .tsw { display: none !important; }

/* ── Phone in landscape: too short to pin, so the stages sit in the flow ──────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .ch.ch { height: auto; }
  .ch.ch .stage { position: relative; height: auto; min-height: 100vh; }
  @supports (height: 100svh) { .ch.ch .stage { min-height: 100svh; } }
  /* the line: its still key state, with room for the headline, the line and its toolbar one under the other */
  .ch.ch-line.ch-line .stage { min-height: 760px; }
}
@media (max-width: 759px) {
  .reduce .beats { display: block; }
  .reduce .beats li { padding: 6px 0; }
}


/* interim: the iPad pictures are still being taken */
.pad { display: none !important; }
.dv .lap, .dv[data-at] .lap { transform: none !important; }