/* Zen Timer product page (/zen-timer/). Tokens only: no new colour values (black or white with opacity for
   scrims and shadows). Class names start with zt-. Loaded after orbi.css: Orbilla on this page is the living
   component (.orbi), placed and sized here.
   .film and .play are the hooks site.js looks for; they are styled here only through zt- classes.
   Spec: docs/DESIGN-SYSTEM.md */

/* ---------- 0. Pieces used in several sections ---------- */
.zt-head { display: grid; grid-template-columns: 7fr 5fr; gap: 20px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4.6vw, 64px); }
.zt-head .stack { gap: 16px; }
/* Two other ways a scene opens (S19, October 18, 2026), so no two in a row open alike: the words centred above the row,
   or the words after the picture. */
.zt-head-centred { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; text-align: center; }
.zt-head-centred h2 { max-width: 20ch; }
.zt-head-centred .lede { text-align: center; }
.zt-head-after { margin-top: clamp(28px, 3.4vw, 48px); margin-bottom: clamp(36px, 4.6vw, 64px); }
.zt-cols { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.zt-cols-faq { grid-template-columns: 4fr 8fr; }
.zt-anchor { scroll-margin-top: 64px; }          /* clears the sticky sub-navigation */
.zt-h { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -.02em; }
.zt-after { margin-top: clamp(32px, 4vw, 56px); }
.fine.zt-fine { font-size: 15px; }
.zt-links a { color: var(--accent); }
@media (min-width: 901px) { .zt-lines span { display: block; } }   /* one sentence per line */

/* The page's own rhythm (owner's review, October 15, 2026; D005-1): about half the air of the other pages between
   sections, with and without the flight behind them. The rest of the site keeps the generous rhythm. */
.zt-page > section { --space: clamp(64px, 7vw, 112px); }
.zt-page > section.chapter { --space: var(--space-s); }
.film-on .zt-page.film-read > section.chapter:not([data-film-open]) { --space: var(--space-s); --ft: clamp(20px, 2.6vw, 40px); }
.film-on .zt-page.film-read > section:not([data-film-open]) { --space: clamp(44px, 5.4vw, 88px); --ft: clamp(28px, 3.6vw, 60px); }
.zt-page .zt-head { margin-bottom: clamp(28px, 3.4vw, 48px); }
/* A lighter band every other section, so the dark look is not one colour from top to bottom; the garden and the
   scenes let the evening flight show through, as their own sky. */
.zt-page > section.zt-alt { background-color: var(--bg-2); }
.film-on .zt-page.film-read > section.zt-alt:not([data-film-open]) { --veil: color-mix(in srgb, var(--bg-2) 90%, transparent); }
.film-on .zt-page.film-read > section:is(.zt-sky-garden, .zt-sky-scene):not([data-film-open]) { --veil: color-mix(in srgb, var(--bg) 58%, transparent); }
/* The badge again, after Orbilla, the garden and the devices. */
.zt-again { justify-content: center; align-items: center; margin-top: clamp(36px, 4vw, 56px); }
.zt-again .fine { font-size: 15px; }

/* ---------- 0b. Sub-navigation ---------- */
.subnav .zt-get { padding-inline: 18px; }
@media (max-width: 820px) { .subnav .zt-get { display: none; } }
/* On a phone the bar is one row you swipe: every section link stays on one line, and the ends fade to say
   there is more. (The header above already names the app.) */
@media (max-width: 640px) {
  .subnav .wrap { width: 100%; gap: 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
  .subnav strong { display: none; }
  .subnav a { padding-inline: 10px; font-size: 15px; }
  .subnav a:first-of-type { margin-left: -10px; }
}

/* ---------- 1. Hero: a dusk stage, the promise, Orbilla beside its app ----------
   --zt-bar is the height of .subnav (52px row + two 1px rules): the hero slides up under it so the sky starts at
   the very top of the page. */
.zt-hero { --zt-bar: 54px; margin-top: calc(-1 * var(--zt-bar)); padding-top: calc(var(--nav-h) + var(--zt-bar) + clamp(32px, 4vw, 56px)); padding-bottom: clamp(48px, 6vw, 88px); }
.zt-hero-grid { display: grid; grid-template-columns: 6fr 6fr; gap: 32px clamp(24px, 4vw, 64px); align-items: center; min-height: min(700px, calc(100vh - var(--nav-h) - var(--zt-bar) - 64px)); }
.zt-hero-copy { display: grid; gap: 22px; justify-items: start; }
.zt-hero h1 span { display: block; }
.zt-hero .lede { max-width: 44ch; }
.zt-hero-copy .actions { margin-top: 4px; }
/* The facts at first glance, under the badge: one line of true things, dots between them. */
.zt-facts { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: -6px; font-size: 15px; color: var(--muted); }
.zt-facts li:not(:last-child)::after { content: "·"; padding-inline: 9px; color: var(--gold-text); }
/* The app first: the iPhone with its running session is the largest thing in the scene, Orbilla beside it. */
.zt-hero-pair { width: min(620px, 100%); aspect-ratio: 1 / 1.1; }
.zt-hero-pair > .lit { width: 48%; left: 0; top: 36%; }
.zt-hero-pair > .dev { width: 48%; right: 3%; bottom: 1%; }
.zt-hero-pair > .orbit-path { top: 52%; height: 30%; }
.zt-orb { cursor: pointer; }
.dev-body > video { display: block; width: 100%; border-radius: var(--screen-r); }
/* Without scripts a browser paints its own controls on a video: the hero's shows its poster, clean. */
@media (scripting: none) { .zt-hero video::-webkit-media-controls { display: none; } }

/* ---------- 2. Rows of screens: a phone, a heading, one or two lines ----------
   Three, four or five across at 1000px and wider; under that each row is a site.css rail (one row that scrolls
   sideways and snaps), with room above and below so the phones' shadows are not cut. */
.zt-row { display: grid; grid-template-columns: repeat(var(--zt-n, 3), minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px) clamp(20px, 2.6vw, 44px); width: 100%; }
.zt-row-4 { --zt-n: 4; }
.zt-row-5 { --zt-n: 5; gap: clamp(16px, 2vw, 32px); }
.zt-row-after { margin-top: clamp(48px, 5.6vw, 88px); }
.zt-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2vw, 26px); align-content: start; }
.zt-card > .dev { width: min(248px, 100%); justify-self: center; }
.zt-row-5 .zt-card > .dev { width: min(204px, 100%); }
.zt-card-copy { display: grid; gap: 8px; justify-items: start; align-content: start; }
.zt-card h3 { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.12; letter-spacing: -.015em; }
.zt-card p { max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.zt-card .link-arrow { margin-block: -4px; }
.zt-card .zt-tag { font: 600 12px/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); }
.zt-card .zt-tag-free { color: var(--text); }
.zt-steps { counter-reset: zt-step; }
.zt-steps .zt-card { counter-increment: zt-step; }
.zt-steps .zt-card-copy::before { content: "0" counter(zt-step); font: 500 15px/1 var(--serif); letter-spacing: .1em; color: var(--gold-text); font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-row-note { margin-top: clamp(24px, 3vw, 40px); }
.zt-langs .zt-card > .dev { width: min(204px, 100%); }
.zt-langs .zt-lang-still { display: block; width: min(204px, 100%); height: auto; justify-self: center; border-radius: calc(min(204px, 100%) * .04); }   /* the story's still 1, whole (part 19) */
.zt-langs .zt-card-copy { justify-items: center; text-align: center; }
/* Twelve languages are one sliding row at every width. On a wide screen two round buttons under it move it
   (zen-timer.js shows them); without the script the row still scrolls. */
.zt-rail-nav { display: none; }
.zt-rail-nav button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; font: 600 18px/1 var(--sans); color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: box-shadow .3s var(--ease), opacity .3s var(--ease); }
.zt-rail-nav button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent); }
.zt-rail-nav button:disabled { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1px var(--rule); }
@media (min-width: 1000px) {
  .zt-rail-nav:not([hidden]) { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
}

/* ---------- 3. Orbilla: the living Orbilla beside its eight ranks ---------- */
.zt-orb-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.zt-live { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
.zt-live > .lit { width: min(400px, 92%); }
.zt-grow { cursor: pointer; }
.zt-readout { display: grid; justify-items: center; gap: 6px; text-align: center; }
.zt-readout-n { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.zt-readout-name { max-width: 15em; font: 460 clamp(24px, 2.2vw, 30px)/1.12 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; text-wrap: balance; }
.zt-readout-at { font-size: 16px; color: var(--gold-text); }

/* The app's own Orbilla, cut from a session, beside the living one: the same character, in the app's paint. */
.zt-app-orb { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 20px; align-items: center; width: min(440px, 100%); margin-top: 12px; }
.zt-app-orb img { width: 100%; height: auto; -webkit-mask: radial-gradient(closest-side, #000 56%, rgba(0, 0, 0, 0) 100%); mask: radial-gradient(closest-side, #000 56%, rgba(0, 0, 0, 0) 100%); }   /* its aurora given back to the air: no tile (S19) */
.zt-app-orb figcaption { font-size: 15px; line-height: 1.45; color: var(--muted); }

/* The eight ranks: a ledger in two columns. The row of the colour Orbilla is wearing is marked. */
.zt-ranks { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(20px, 3vw, 40px); width: 100%; max-width: 560px; margin-top: 4px; border-top: 1px solid var(--rule); }
/* Each row is a button (S20: keyboard and reader, as Meet Orbilla's stops are): the pressed one is the colour Orbilla wears. */
.zt-ranks li { border-bottom: 1px solid var(--rule); }
.zt-ranks button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-height: 44px; padding: 10px 0 10px 12px; border: 0; border-radius: 0; background: none; box-shadow: inset 2px 0 0 transparent; color: var(--muted); font: inherit; font-size: 16px; line-height: 1.35; text-align: left; cursor: pointer; transition: color .3s var(--ease), box-shadow .3s var(--ease); }
.zt-ranks b { font: 500 17px/1.2 var(--serif); color: var(--gold-text); font-variation-settings: "SOFT" 40, "WONK" 0; white-space: nowrap; }
.zt-ranks button:hover { color: var(--text); }
.zt-ranks button[aria-pressed="true"] { color: var(--text); box-shadow: inset 2px 0 0 var(--gold); }
.zt-ranks button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* ---------- 4. The garden: the app's Garden at its fullest, then the island a visitor plants on ---------- */
/* The island a visitor plants on. Every piece is placed by percentages of the app's canvas (2400 by 2422), so the
   stack fits at any width. Dawn pieces show in light mode and Dusk in dark; a hidden lazy picture is not fetched. */
.zt-plot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: center; }
.zt-plot-stage { width: min(560px, 100%); margin-inline: auto; }
.zt-plot-canvas { position: relative; aspect-ratio: 2400 / 2422; }
.zt-plot-canvas img { position: absolute; height: auto; max-width: none; }
.zt-plot-island { left: 0; top: 0; width: 100%; }
[data-theme="zen"] .zt-plot .zt-dawn, [data-theme="orbilla"] .zt-plot .zt-dusk { display: none; }
.zt-plot-orbilla { z-index: 60; }
/* plot-places:begin (written by tools/garden_pieces.py) */
.zt-plant[data-n="1"] { left: 43.333%; top: 35.797%; width: 7.5%; z-index: 7; }
.zt-plant[data-n="2"] { left: 51.167%; top: 35.178%; width: 7.5%; z-index: 5; }
.zt-plant[data-n="3"] { left: 47.542%; top: 42.197%; width: 7.5%; z-index: 11; }
.zt-plant[data-n="4"] { left: 57.042%; top: 43.187%; width: 5.333%; z-index: 10; }
.zt-plant[data-n="5"] { left: 39.167%; top: 40.05%; width: 7.5%; z-index: 12; }
.zt-plant[data-n="6"] { left: 39.75%; top: 35.59%; width: 5.083%; z-index: 3; }
.zt-plant[data-n="7"] { left: 35.708%; top: 39.141%; width: 4.792%; z-index: 8; }
.zt-plant[data-n="8"] { left: 58.375%; top: 33.898%; width: 5.083%; z-index: 2; }
.zt-plant[data-n="9"] { left: 63.167%; top: 35.838%; width: 5.042%; z-index: 6; }
.zt-plant[data-n="10"] { left: 48.167%; top: 30.966%; width: 5.042%; z-index: 1; }
.zt-plant[data-n="11"] { left: 61.792%; top: 46.697%; width: 5.375%; z-index: 14; }
.zt-plant[data-n="12"] { left: 53.625%; top: 48.348%; width: 5%; z-index: 15; }
.zt-plant[data-n="13"] { left: 30.833%; top: 34.558%; width: 5%; z-index: 4; }
.zt-plant[data-n="14"] { left: 68.083%; top: 39.761%; width: 4.833%; z-index: 9; }
.zt-plant[data-n="15"] { left: 44.542%; top: 51.652%; width: 5.125%; z-index: 16; }
.zt-plant[data-n="16"] { left: 29.542%; top: 42.981%; width: 5.083%; z-index: 13; }
.zt-plot-orbilla { left: 73.958%; top: 10.57%; width: 18.208%; }
/* plot-places:end */
.zt-plant { transform-origin: 50% 88%; transition: opacity .6s var(--ease); }
.zt-plant.zt-away { opacity: 0; }
.zt-plant.zt-fly { z-index: 50 !important; }
.zt-plot-glow, .zt-plot-ring { position: absolute; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; }
.zt-plot-glow { z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 85%, transparent), color-mix(in srgb, var(--gold) 35%, transparent) 55%, transparent); transition: opacity .8s var(--ease); }
.zt-plot-glow.zt-on { opacity: 1; }
.zt-plot-ring { z-index: 55; border: 2px solid var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 70%, transparent); }
.zt-plot-panel { display: grid; gap: 14px; justify-items: start; align-content: center; }
.zt-plot-count { display: flex; align-items: baseline; gap: 12px; font: 460 clamp(22px, 2vw, 28px)/1 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-plot-count b { font-weight: 460; font-size: clamp(72px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.zt-plot-line { max-width: 34ch; min-height: 3em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; }
.zt-plot-panel .btn { margin-top: 6px; }
.zt-plot-panel .fine { max-width: 40ch; margin-top: 6px; }
/* On a phone the whole island would leave the plants a few millimetres tall, so the picture is enlarged one and a
   half times around the lawn and the pond (owner, October 14, 2026): the island runs off both sides of the screen
   and fades out at the bottom. The pieces are placed by percentages of the canvas, so they follow. */
@media (max-width: 699px) {
  .zt-plot-stage { width: auto; margin-inline: calc(var(--gutter) * -1); aspect-ratio: 1 / 1; overflow: clip; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
  .zt-plot-canvas { width: 150%; margin: -12% 0 0 -36%; }
}
@media (prefers-reduced-motion: no-preference) {
  .zt-plot-orbilla { animation: zt-plot-float 14s var(--ease-breathe) infinite alternate; }   /* it breathes at the site's pace, as every Orbilla does */
  @keyframes zt-plot-float { from { translate: 0 1%; } to { translate: 0 -3%; } }
}
/* The garden at its fullest, the app's own picture, Dawn in light mode and Dusk in dark. */
.zt-full { display: grid; gap: 18px; justify-items: center; width: min(640px, 100%); margin: 0 auto clamp(48px, 6vw, 88px); }
/* The island floats in the scene like the one a visitor plants on below it: its painted sky fades into the stage, no card, no shadow (S19). */
.zt-full img { width: 100%; height: auto; -webkit-mask: radial-gradient(closest-side, #000 60%, rgba(0, 0, 0, 0) 100%); mask: radial-gradient(closest-side, #000 60%, rgba(0, 0, 0, 0) 100%); }
[data-theme="zen"] .zt-full .zt-dawn, [data-theme="orbilla"] .zt-full .zt-dusk { display: none; }
.zt-full figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; text-align: center; font: 460 clamp(20px, 1.8vw, 24px)/1.2 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-full figcaption b { font-weight: 460; color: var(--gold-text); }
.zt-full figcaption .fine { flex-basis: 100%; font-family: var(--sans); letter-spacing: 0; }
/* The one wide scene: the whole width of the screen up to 1440px, then a framed picture. */
.zt-wow { display: grid; gap: 16px; width: min(1440px, 100%); margin: 0 auto clamp(40px, 5vw, 72px); }
.zt-wow img { width: 100%; height: auto; box-shadow: var(--lift-3); }
@media (min-width: 1441px) { .zt-wow img { border-radius: var(--r-l); } }
.zt-wow figcaption { font: 460 clamp(19px, 1.6vw, 23px)/1.3 var(--serif); letter-spacing: -.012em; font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--muted); }
.zt-wow figcaption b { font-weight: 460; color: var(--text); }
/* iPhone Duo, unfolded, on the devices' floor. */
.zt-duo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 24px clamp(32px, 5vw, 72px); align-items: center; margin: 0 auto clamp(40px, 5vw, 64px); width: min(940px, 100%); }
.zt-duo .dev-duo { width: 100%; }
.zt-duo-story { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); width: min(780px, 100%); }
.zt-duo-story img { display: block; width: min(340px, 100%); justify-self: center; height: auto; border-radius: 14px; }   /* the story's Duo still, whole, corners as the store rounds them (part 19) */
.zt-duo figcaption { max-width: 22ch; font: 460 clamp(22px, 2.2vw, 30px)/1.2 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--muted); }
.zt-duo figcaption b { display: block; font-weight: 460; color: var(--text); }
.zt-garden-note { max-width: 58ch; margin-top: clamp(36px, 4.6vw, 64px); }
.zt-wide { display: grid; gap: 14px; }
.zt-wide img { width: 100%; height: auto; -webkit-mask: radial-gradient(ellipse closest-side, #000 58%, rgba(0, 0, 0, 0) 100%); mask: radial-gradient(ellipse closest-side, #000 58%, rgba(0, 0, 0, 0) 100%); }
/* Its dusk twin (S20, October 18, 2026): the app has painted the wide island at dawn only, so in dark mode the full garden
   at dusk stands here, at the size it has on the Zen Timer page, and the dawn painting is not shown (one world per mode).
   A hidden lazy picture is not fetched. When the app paints the wide island at dusk (docs/requests/zen-timer.md), it
   takes the dusk picture's place and this width rule goes. */
.zt-wide .zt-dusk { width: min(640px, 100%); margin-inline: auto; -webkit-mask: radial-gradient(closest-side, #000 60%, rgba(0, 0, 0, 0) 100%); mask: radial-gradient(closest-side, #000 60%, rgba(0, 0, 0, 0) 100%); }
[data-theme="zen"] .zt-wide .zt-dawn, [data-theme="orbilla"] .zt-wide .zt-dusk { display: none; }
.zt-wide figcaption { max-width: 60ch; }

/* ---------- 5. A place to do the work: the words, then two screens standing together ---------- */
.zt-place { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.zt-sound { gap: 16px; justify-items: start; }   /* two lines beside the sound picker; the gold bar went in S20 */
.zt-sound p { max-width: 44ch; }
.zt-hear[aria-pressed="true"] { color: var(--gold-text); }
.zt-pair { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 3.4vw, 48px); }
.zt-pair .dev { width: min(240px, 62%); }
.zt-place { align-items: center; }
.zt-pair .dev:nth-child(2) { margin-top: clamp(28px, 4vw, 56px); }

/* ---------- 6. Everywhere you are: every device on one floor, then the facts at a glance ---------- */
.zt-every { margin: clamp(8px, 2vw, 24px) auto clamp(40px, 5vw, 64px); width: min(1060px, 100%); }
/* The Lock Screen's Live Activity, cut to the activity itself (tools/app_assets.py), floating as it does on the glass. */
.zt-activities { display: grid; gap: clamp(32px, 4vw, 56px); justify-content: center; margin: 0 auto clamp(40px, 5vw, 64px); }
@media (min-width: 1000px) { .zt-activities { grid-template-columns: repeat(2, minmax(0, 520px)); } }
.zt-activity { display: grid; grid-template-rows: 1fr auto; gap: 16px; justify-items: center; width: min(520px, 100%); margin: 0 auto; text-align: center; }
.zt-activity img { align-self: center; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(var(--shade), .4)) drop-shadow(0 2px 4px rgba(var(--shade), .25)); }
.zt-activity figcaption { max-width: 34ch; font: 460 clamp(19px, 1.6vw, 23px)/1.3 var(--serif); letter-spacing: -.012em; font-variation-settings: "SOFT" 40, "WONK" 0; text-wrap: balance; }
.zt-glance-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; }   /* the four devices, solid (B002); the facts that are not doors sit under them as a line (S15, C-10) */
.zt-glance-note { margin-top: 20px; max-width: 62ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.zt-glance-note b { color: var(--text); font-weight: 600; }
.zt-glance-rows > div { display: grid; gap: 6px; align-content: start; padding: 20px 22px 22px; border: 1px solid var(--rule); border-radius: var(--r-m); }
.zt-glance-rows dt { font: 500 clamp(20px, 1.7vw, 22px)/1.15 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-glance-rows dd { max-width: 36ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
/* A tile that leads somewhere is a solid button, in the colours of .btn: the title is the link, an arrow says so,
   and the whole tile takes the tap. A tile with no link stays an outline. */
.zt-glance-rows > div:has(a) { position: relative; border-color: transparent; background: var(--text); color: var(--bg); box-shadow: var(--lift-1); transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.zt-glance-rows > div:has(a) dd { color: color-mix(in srgb, var(--bg) 80%, transparent); }
.zt-glance-rows dt a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-block: -11px; color: inherit; text-decoration: none; }
.zt-glance-rows dt a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.zt-glance-rows dt a::after { content: "→"; font: 600 18px/1 var(--sans); transition: translate .3s var(--ease); }
.zt-glance-rows > div:has(a):hover { translate: 0 -2px; box-shadow: var(--lift-2); }
.zt-glance-rows > div:has(a):active { translate: 0 1px; }
.zt-glance-rows > div:has(a):hover dt a::after { translate: 4px 0; }
.zt-glance-rows dt a:focus-visible { outline: 0; }
.zt-glance-rows dt a:focus-visible::before { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-m); }

/* ---------- 8. Privacy: one large zero and the four things it counts ---------- */
.zt-priv { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.zt-zero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.zt-zero-n { font: 460 clamp(200px, 21vw, 288px)/.74 var(--serif); letter-spacing: -.04em; color: var(--gold-text); font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-zeros { border-top: 1px solid var(--rule); }
.zt-zeros li { padding: 15px 0 17px; border-bottom: 1px solid var(--rule); font: 460 clamp(24px, 2.5vw, 34px)/1.1 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; }

/* Plan my day, as motion (S36): beside the three phones, above them. Colours as the app gives the three parts. */
.zt-plan-mo { display: grid; justify-items: start; gap: 4px; width: min(760px, 100%); margin: clamp(28px, 3.4vw, 48px) auto clamp(36px, 4.4vw, 64px); }
.zt-plan-mo .mg-pic { justify-self: stretch; background: rgba(var(--pane), .55); }
.zt-busy { fill: color-mix(in srgb, var(--text) 10%, transparent); }
.zt-p1 { fill: var(--accent); }
.zt-p2 { fill: var(--gold); }
.zt-p3 { fill: var(--mg-coral); }

/* ---------- 9. Pricing: a table of fares ---------- */
.zt-head .lede b { color: var(--text); }
.zt-plans { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; border-block: 1px solid var(--rule); }
.zt-plans li { display: grid; gap: 12px; align-content: start; padding: 26px clamp(16px, 2.2vw, 28px) 30px; border-left: 1px solid var(--rule); }
.zt-plans li:first-child { padding-left: 0; border-left: 0; }
.zt-plans h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 24px; }
.zt-flag { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.zt-price { font: 460 clamp(40px, 4.6vw, 66px)/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-price small { font: 400 16px/1 var(--sans); letter-spacing: 0; color: var(--muted); }
.zt-plans li > p:last-child { font-size: 16px; line-height: 1.5; color: var(--muted); }
.zt-best { box-shadow: inset 0 2px 0 var(--gold); }
/* What Zen Plus adds: the paywall's six lines, each with the app's own screen. */
.zt-adds { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 72px); }
.zt-adds .zt-rail-nav:not([hidden]) { margin-top: 0; }
.zt-adds h3 { font-size: clamp(26px, 2.6vw, 36px); }
.zt-adds .zt-card { grid-template-rows: 1fr auto; align-content: stretch; }
.zt-adds .zt-card > .dev { width: min(204px, 100%); align-self: center; }
.zt-adds .zt-card > .dev-watch { width: min(168px, 80%); }
.zt-adds .zt-card h4 { font: 500 clamp(21px, 1.8vw, 24px)/1.15 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.zt-adds .zt-card-copy { justify-items: center; text-align: center; }
.zt-adds .zt-card p { margin-inline: auto; }

/* ---------- 10. Questions ---------- */
.zt-cols-faq .fine { font-size: 15px; }

/* ---------- 11. The closing: the evening sky opens out, the largest Orbilla on the page ---------- */
.zt-final { padding-block: clamp(160px, 16vw, 240px) clamp(80px, 9vw, 120px); }
.zt-final-in { display: grid; justify-items: center; text-align: center; gap: 18px; }
.zt-final h2 { font-size: clamp(44px, 5.6vw, 80px); letter-spacing: -.03em; line-height: .98; }
.zt-final .lede { max-width: 32ch; }
.zt-final-stage { position: relative; width: min(520px, 80vw); margin-block: clamp(4px, 1.6vw, 20px) 4px; }
.zt-final-path { left: -36%; right: -36%; top: 38%; height: 40%; rotate: -6deg; }
.zt-final-orbi { width: 100%; cursor: pointer; }
.zt-final .actions { justify-content: center; }

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  .zt-head, .zt-cols, .zt-priv, .zt-hero-grid, .zt-orb-grid, .zt-place, .zt-plot, .zt-duo { grid-template-columns: minmax(0, 1fr); }
  .zt-duo figcaption { max-width: none; }
  .zt-hero-grid { min-height: 0; }
  .zt-hero-pair { justify-self: center; width: min(520px, 100%); }
  .zt-final-path { left: -12%; right: -12%; }
  .zt-head { align-items: start; }
  .zt-live > .lit { width: min(300px, 70%); }
}

/* ---------- Rails (under 1000px) ----------
   The rows of screens, the six facts and the four plans are site.css rails on a phone or a tablet. The same
   elements carry the .rail class at every width; at 1000px and wider the grids above take over. */
@media (min-width: 1000px) {
  .zt-row.rail, .zt-glance-rows.rail, .zt-plans.rail { overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; -webkit-mask: none; mask: none; }
}
@media (min-width: 1000px) {
  .zt-row.rail:is(.zt-langs, .zt-slide) { display: flex; gap: clamp(28px, 3vw, 44px); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: 16px 36px; margin-bottom: -36px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - max(var(--gutter), 72px)), transparent); mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - max(var(--gutter), 72px)), transparent); }
  .zt-row.rail.zt-langs .zt-card { width: 204px; }
  .zt-row.rail.zt-slide { gap: clamp(28px, 3vw, 44px); }
  .zt-row.rail.zt-slide .zt-card { flex: 0 0 calc((100% - 2 * clamp(28px, 3vw, 44px) - var(--gutter)) / 3); scroll-snap-align: start; }
}
@media (max-width: 999px) {
  .zt-row.rail, .zt-glance-rows.rail, .zt-plans.rail { display: flex; gap: 16px; width: auto; }   /* the grids' width: 100% left a rail two gutters short, cut at the wrap's edge instead of fading at the screen's (S20) */
  .zt-row.rail { gap: 22px; padding-block: 16px 28px; margin-block: -16px -28px; }
  .zt-row.rail.zt-row-after { margin-top: 40px; }
  .zt-row.rail .zt-card { width: min(248px, 68%); }   /* the first card whole and a little wider; of the next, a sliver of its phone (S20) */
  /* The sliver shows a phone, not a cut heading: a card's words arrive as it slides into view (a scroll-driven fade on
     the rail's own scroll; browsers without it show the words at once). */
  @supports (animation-timeline: view()) {
    .zt-row.rail .zt-card-copy { animation: zt-card-words linear both; animation-timeline: view(inline); animation-range: entry 45% entry 95%; }
  }
  .zt-row.rail .zt-card > .dev { width: 100%; }
  .zt-row.rail.zt-langs .zt-card { width: min(190px, 50%); }
  .zt-glance-rows.rail > div { width: min(260px, 74%); padding: 16px 18px 18px; }
  .zt-glance-rows dt { font-size: 20px; }
  .zt-plans.rail li { width: min(236px, 70%); padding: 18px 0 20px 16px; border-left: 1px solid var(--rule); }
  .zt-plans.rail li:first-child { padding-left: 16px; border-left: 1px solid var(--rule); }
  .zt-price { font-size: 40px; }
  .zt-plans h3 { font-size: 22px; }
}

@keyframes zt-card-words { from { opacity: 0; } to { opacity: 1; } }

/* ---------- The phone (under 700px): one idea per screen ---------- */
@media (max-width: 699px) {
  #tour, #uses, #orbilla, #garden, #atmospheres, #plan, #devices, #privacy, #plus, #faq { scroll-margin-top: 40px; }   /* lands under the two sticky bars */
  .zt-final { padding-block: 130px 48px; }
  .zt-cols-faq .faq summary { min-height: 48px; padding-block: 10px; }
  .zt-head { gap: 14px; margin-bottom: 28px; }
  .zt-head .stack { gap: 12px; }
  .zt-cols { gap: 24px; }
  .zt-after { margin-top: 28px; }
  .zt-ranks { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }          /* one column: no name breaks in two */
  .zt-ranks li { padding-block: 6px; }
  .zt-readout-name { font-size: 22px; }

  /* The hero on a phone: the words and the badge first, then Orbilla and its phone, then the small print. */
  .zt-hero { padding-top: calc(var(--nav-h) + var(--zt-bar) + 18px); padding-bottom: 36px; }
  .zt-hero-grid { gap: 18px; }
  .zt-hero-copy { gap: 14px; }
  .zt-hero h1 { margin-top: 6px; font-size: clamp(32px, 9.3vw, 42px); line-height: 1.03; }
  .zt-hero .lede { max-width: none; font-size: 17px; line-height: 1.42; }
  .zt-facts { margin-top: -2px; font-size: 14px; }
  .zt-hero-pair { width: 100%; margin-top: 4%; }

  .zt-sound { padding-left: 16px; }
  .zt-pair { gap: 18px; }
  .zt-pair .dev { width: 52%; }
  .zt-app-orb { grid-template-columns: 140px minmax(0, 1fr); }
  .zt-full { width: auto; margin-inline: calc(var(--gutter) * -1); }
  .zt-full figcaption { padding-inline: var(--gutter); }
  .zt-wow figcaption { padding-inline: var(--gutter); }
  .zt-pair .dev:nth-child(2) { margin-top: 24px; }


  /* Privacy: a smaller zero beside its four lines. */
  .zt-priv { gap: 24px; }
  .zt-zero { gap: 18px; }
  .zt-zero-n { font-size: 112px; }
  .zt-zeros li { padding: 6px 0 7px; font-size: 20px; }
  .zt-plans.rail { margin-top: 4px; }

  /* The closing: the living Orbilla, one line, the badge. */
  .zt-final h2 { font-size: 40px; }
  .zt-final-stage { width: 74vw; }
  .zt-final-path { left: -4%; right: -4%; }   /* both ends of the orbit clear of the screen's edges (S20) */
}

@media (prefers-reduced-motion: reduce) {
  .zt-row.rail .zt-card-copy { animation: none; }
}

/* Over the flight the reel's sticky backdrop comes before the first screen, so the first screen's own pull under the
   bar no longer reaches the top of the page: the reel is pulled up instead. */
:is(.film-prep, .film-on) .film-reel:has(> .zt-hero) { margin-top: -54px; }
:is(.film-prep, .film-on) .film-reel > .zt-hero { margin-top: 0; }

/* ---------- 2. A day with Orbilla (notes.md, part 19): the store's ten stills in one rail, whole, corners rounded as the
   store rounds them (4% of the width). The band behind them, from still 1's dawn to still 10's dusk, moves with the rail
   (a scroll-driven animation on the rail's own scroll; where a browser has none, the band stands at dawn) and stops
   short of the stills' feet; the words stand under it on the page.
   About 3½ stills on a wide screen, one at 80% with the next peeking on a phone. ---------- */
.zt-day { padding-bottom: clamp(56px, 6vw, 96px); }
.zt-day .zt-head { margin-bottom: clamp(24px, 3vw, 40px); }
.zt-day-band { timeline-scope: --zt-day; --zt-day-cap: 76px; --zt-day-gap: clamp(16px, 1.6vw, 28px); --zt-day-w: calc((min(100vw, 1440px) - 2 * var(--gutter) - 3 * var(--zt-day-gap)) / 3.5); position: relative; }
.zt-day-band::before { content: ""; position: absolute; inset: 0 0 calc(var(--zt-day-cap) + 52px); pointer-events: none;
  background: linear-gradient(90deg, #f7e0d8 0%, #f0d4d6 22%, #d3c3dc 45%, #959acb 68%, #4a5686 86%, #283962 100%); background-size: 300% 100%; background-position: 0 0; }
@supports (animation-timeline: scroll()) {
  .zt-day-rail { scroll-timeline: --zt-day inline; }
  .zt-day-band::before { animation: zt-day linear both; animation-timeline: --zt-day; }
}
@keyframes zt-day { to { background-position: 100% 0; } }
.zt-day-rail { position: relative; display: flex; gap: var(--zt-day-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: clamp(28px, 3vw, 48px) max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))) 0; scroll-padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))); }
.zt-day-rail::-webkit-scrollbar { display: none; }
.zt-day-rail:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.zt-day-card { flex: 0 0 var(--zt-day-w); display: grid; gap: 12px; align-content: start; scroll-snap-align: start; }
.zt-day-card img { display: block; width: 100%; height: auto; border-radius: calc(var(--zt-day-w) * .04); }
.zt-day-cap { min-height: var(--zt-day-cap); display: grid; align-content: start; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.zt-day-cap b { font: 460 18px/1.25 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 40, "WONK" 0; color: var(--text); }
.zt-day-cap .zt-tag { font: 600 12px/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-text); }
.zt-day-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 24px; }
.zt-day-nav:not([hidden]) { display: flex; align-items: center; gap: 14px; }
.zt-day-nav button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; font: 600 18px/1 var(--sans); color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; transition: box-shadow .3s var(--ease), opacity .3s var(--ease); }
.zt-day-nav button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent); }
.zt-day-nav button:disabled { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1px var(--rule); }
.zt-day-count { min-width: 4.5ch; text-align: center; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 699.98px) {
  .zt-day-band { --zt-day-w: 80vw; --zt-day-cap: 64px; }
  .zt-day-foot { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .zt-day-band::before { animation: none; background-size: 100% 100%; background-position: 0 0; } }