/* IntervalNext — "Night Ride", the October 2026 redesign (owner, 13 Oct 2026).
 *
 * The landing, the docs, the three legal pages and the 404: every page drawn
 * by base.html's "base" shell, which puts .shell--night on <body>. The phone
 * pages (connect, linked, unlock, paid, account) use the "phone" shell and
 * never match a rule here; they keep site.css as it was.
 *
 * This sheet comes after site.css and only ever adds to it:
 *
 *   - the shell's own bar and footer keep their markup and their mechanism
 *     (the CSS-only menu, the bands bled to the window edge, the 72px bar the
 *     tests pin) and are re-coloured and re-set in Onest here;
 *   - the landing's own blocks are new classes, all prefixed n-, so none of
 *     them can collide with site.css's .hero, .price, .device and the rest;
 *   - the reading pages (docs, legal, 404) keep their layout classes (.docs,
 *     .rail, .doc …) and are re-set on white.
 *
 * The mock is the owner's chosen draft ("draft 4, Night Ride, refined"):
 * one dark ground, one accent (the handover yellow), the sections that show
 * the Edges on white, and one face, Onest, for text, figures and labels
 * (owner, 25 Oct 2026: Geist read as the AI-template default). The wordmark
 * keeps Plus Jakarta Sans when it is served (site.css, .lockup). */

/* ------------------------------------------------------------- 1 tokens */

.shell--night {
  --n-bg: #0E0F10;
  --n-bg-2: #15171A;
  --n-bg-3: #1C1F23;
  --n-line: #2A2E33;
  --n-text: #F2F1EE;
  --n-text-2: #B7B9BC;
  --n-text-3: #85888C;
  --n-accent: #E7C341;
  --n-accent-ink: #17140A;
  --n-r-panel: 20px;
  --n-r-inner: 12px;
  --n-sans: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --n-display: var(--n-sans);
  --n-mono: 'Onest', ui-sans-serif, system-ui, sans-serif;
  /* The column: 1240 of content and a 28px gutter. The shell's bar and
   * footer read these two tokens (site.css §3), so their contents land on
   * the same column as every .wrap below. */
  --page-max: 1296px;
  --gutter: 28px;
  background: var(--n-bg);
  color: var(--n-text);
  font-family: var(--n-sans);
}

/* White sections (the ones that show the Edges) and the reading pages. */
.shell--night .n-light,
.shell--night .page--read {
  --n-bg: #FFFFFF;
  --n-bg-2: #F5F5F3;
  --n-bg-3: #EDEDEA;
  --n-line: #E3E3DF;
  --n-text: #111214;
  --n-text-2: #4A4D52;
  --n-text-3: #6B6F74;
  --n-accent: #7A5E00;
  background: var(--n-bg);
  color: var(--n-text);
  color-scheme: light;
}

/* ------------------------------------------------------------ 2 the shell */

.shell--night .page {
  background: var(--n-bg);
  color: var(--n-text);
  font-family: var(--n-sans);
}
.shell--night .page--read { max-width: none; }
/* .page is a flex column, so a .wrap with auto margins in it shrinks to its
 * content; on the column it must be the column. */
.shell--night .page > .wrap { width: 100%; }

.shell--night :focus-visible { outline: 2px solid var(--n-accent); outline-offset: 3px; }
.shell--night .n-light :focus-visible,
.shell--night .page--read :focus-visible { outline-color: var(--n-text); }

/* The bar: the shell's own, in the page's ink, frosted. It stays ink when
 * the page scrolls (every page here sets nav.Ink). */
.shell--night .nav {
  background-color: rgb(14 15 16 / 0.86);
  border-bottom-color: #2A2E33;
  font-family: var(--n-sans);
}
/* The bar floats (owner, 5 Nov 2026): a capsule of the same dark glass, on
 * every width, that stays with the reader while the page slides under it. It
 * still takes 72 px of the page, 12 above it and 60 of its own, so what is
 * measured from the bar stands; its lockup stays on the page's left edge. */
.shell--night .nav {
  position: sticky;
  top: 12px;
  z-index: 30;
  height: 60px;
  margin: 12px max(calc(var(--gutter) - 20px), calc((100% - var(--page-max)) / 2 + var(--gutter) - 20px)) 0;
  padding-inline: 19px;
  border: 1px solid #2A2E33;
  border-radius: 14px;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 32px -20px rgb(0 0 0 / 0.7);
}
/* The docs' bar steps aside while reading down and returns on the way up, at
 * the top and to keyboard focus (owner, 5 Nov 2026; nav-menu.js); the chips
 * take its place on a phone. */
.shell--night .nav:not(.nav--phone) { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.shell--night .nav.nav--tucked:not(:focus-within) { transform: translateY(calc(-100% - 16px)); }
@media (prefers-reduced-motion: reduce) {
  .shell--night .nav:not(.nav--phone) { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .shell--night .nav { background-color: #0E0F10; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__mark { transition: none; }
}
@media (max-width: 999px) {
  /* 73 px on a phone, what its hero and sections are measured from */
  .shell--night .nav { top: 8px; height: 56px; margin: 8px 10px 9px; padding-inline: 12px; }
  /* a jump lands below the bar */
  .shell--night section[id] { scroll-margin-top: 72px; }
  /* the menu: a capsule of its own, under the bar */
  .shell--night .nav:not(.nav--phone) .nav__toggle:checked ~ .nav__links { top: calc(100% + 8px); left: -1px; right: -1px; overflow: hidden; border: 1px solid #2A2E33; border-radius: 14px; box-shadow: 0 14px 32px -20px rgb(0 0 0 / 0.7); }
}
.shell--night .nav__links { font-size: 15px; font-weight: 400; }
.shell--night .nav__link { color: #B7B9BC; }
.shell--night .nav__link:hover { color: #F2F1EE; }
.shell--night .nav__link--muted { color: #85888C; }
.shell--night .nav__link--current { color: #F2F1EE; }
/* The bar's links glide to their sections and the one being read is lit
 * (owner, 5 Nov 2026; nav-menu.js), as the docs' chips mark a step: a soft
 * block and under it a yellow marker that glides from link to link. Only the
 * colour of the text changes, so no link moves when it lights. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.shell--night) { scroll-behavior: smooth; }
}
@media (min-width: 1000px) {
  .shell--night .nav__links { position: relative; gap: 8px; margin-inline: -10px; }   /* 28 px from word to word, the first on its old place */
  .shell--night .nav__link { position: relative; padding: 6px 10px; white-space: nowrap; border-radius: 8px; transition: color 0.2s ease, background-color 0.2s ease; }
  .shell--night .nav__link:hover { background: rgb(255 255 255 / 0.05); }
  .shell--night .nav__link--current, .shell--night .nav__link--current:hover { padding: 6px 10px; border-bottom: 0; background: rgb(255 255 255 / 0.08); }
  /* the marker: the page's own where the server marked it, gliding on the landing */
  .shell--night .nav__link--current::after, .nav__mark { position: absolute; height: 2px; border-radius: 2px; background: #E7C341; pointer-events: none; }
  .shell--night .nav__link--current::after { content: ""; left: 10px; right: 10px; bottom: 0; }
  .shell--night .nav__links--live .nav__link--current::after { display: none; }
  .nav__mark { left: 0; top: 0; opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, background-color 0.3s ease; }
}
@media (max-width: 999px) {
  .nav__mark { display: none; }
}
.shell--night .btn { font-family: var(--n-sans); }

/* The footer: the page's ink, Onest. Sections carry their own space, so the
 * footer no longer needs the 112px it kept from the drawing. */
.shell--night .foot {
  margin-top: 0;
  background: #0E0F10;
  border-top-color: #2A2E33;
  color: #85888C;
  font-family: var(--n-sans);
}
.shell--night .foot__link { color: #B7B9BC; }
.shell--night .foot__link:hover { color: #F2F1EE; }
.shell--night .foot__legal { color: #85888C; }

/* ---------------------------------------------------- 3 shared landing bits */

.n-wrap { box-sizing: border-box; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.n-sec { padding-block: 120px; }
/* a band that follows one of the same colour: no second top padding (the
 * CSP forbids style attributes, so this is a class). */
.n-sec.n-sec--flush { padding-top: 0; }
.n-h2 { margin: 0; font: 600 clamp(34px, 3.6vw, 52px)/1.05 var(--n-display); letter-spacing: -0.03em; text-wrap: balance; max-width: 20ch; }
.n-lead { margin: 18px 0 0; max-width: 56ch; color: var(--n-text-2); font-size: 18px; line-height: 1.6; }
.n-link { color: var(--n-text-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--n-line); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.n-link:hover { color: var(--n-text); text-decoration-color: var(--n-accent); }
/* Garmin's badge, as Garmin draws it; on hover it only fades (owner, 4 Nov
 * 2026), which leaves the artwork itself untouched. Its white shape is 93 %
 * of the image (a dark rim runs round it) and its corner 22 % of its height;
 * a button beside it takes the white's height and that corner, so their edges
 * line up: image 56 px → button 52 px, 48.5 → 45, 41 → 38. */
.n-store { display: inline-flex; line-height: 0; border-radius: 12px; transition: opacity 0.2s ease; }
.n-store:hover { opacity: 0.8; }
.n-store img { height: 56px; width: auto; }
.n-framed { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 28px rgb(16 18 20 / 0.28)); }
.n-screen { border-radius: var(--n-r-inner); overflow: hidden; box-shadow: 0 0 0 1px #3A3F45, 0 24px 48px rgb(0 0 0 / 0.45); }
.n-screen img { display: block; width: 100%; height: auto; }
.n-mono { font-family: var(--n-mono); }

/* ------------------------------------------------------------- 4 the hero */

.n-hero { position: relative; overflow: clip; }
.n-hero::before { content: ""; position: absolute; inset: auto -10% -30% 40%; height: 90%; background: radial-gradient(50% 50% at 50% 50%, rgb(231 195 65 / 0.10), transparent 70%); pointer-events: none; }
/* The hero is the window less the bar, to the pixel (owner, 4 Nov 2026: on a
 * laptop its foot was cut at the fold, and on a 16" or 1920×1200 screen a
 * sliver of the next band showed under it). On a taller monitor it stops at
 * 1000px and the next section shows plainly. */
.n-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; padding-block: 32px; min-height: min(1000px, calc(100dvh - 72px)); }
/* a plain line above the headline: no pill, no icon, no code face (owner,
 * 20 Oct 2026, "looks like an AI-generated design") */
.n-hero__label { margin: 0 0 22px; font: 500 15px/1.4 var(--n-sans); color: var(--n-text-3); }
.n-hero__title { margin: 0; font: 600 clamp(42px, 5vw, 72px)/1.03 var(--n-display); letter-spacing: -0.04em; }
/* the headline's second line in the logo's yellow (owner, 14 Oct 2026) */
.n-hero__title span { display: block; color: var(--amber); }
.n-hero__sub-short { display: none; }
.n-hero__sub { margin: 28px 0 0; max-width: 40ch; font-size: 20px; line-height: 1.5; color: var(--n-text-2); }
.n-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.n-hero__setup { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 52px; padding: 0 22px; border: 1px solid #2A2E33; border-radius: 12px; background: #1F2226; color: var(--n-text); font-weight: 500; font-size: 15px; text-decoration: none; transition: border-color 0.2s ease; }
.n-hero__setup:hover { color: var(--n-text); border-color: var(--n-accent); }
.n-hero__setup svg { width: 16px; height: 16px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.n-hero__setup:hover svg { transform: translateX(3px); }
.n-deal { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; max-width: 560px; font-size: 15px; color: var(--n-text-3); }
.n-deal li { padding-inline: 20px; border-left: 1px solid var(--n-line); }
.n-deal li:first-child { padding-left: 0; border-left: 0; }
.n-deal b { color: var(--n-text); font: 500 15px var(--n-mono); margin-right: 6px; }
/* "on any Edge" carries an asterisk, and the models it means sit under the
 * deal line, one line on a desktop (owner, 4 Nov 2026). The mark is CSS so
 * the translated headlines stay as they are. */
.n-hero__title span::after { content: "*"; font-size: 0.42em; vertical-align: 1.15em; line-height: 0; margin-left: 0.04em; letter-spacing: 0; }
:lang(ja) .n-hero__title span::after { margin-left: -0.12em; }   /* a Japanese glyph carries its own spacing */
.n-hero__models { margin: 10px 0 0; font: 400 13px/1.5 var(--n-sans); color: var(--n-text-3); }
.n-hero__models b { margin-right: 4px; font-weight: 500; color: var(--amber); }
/* right edge on the column's right edge, under the bar's store badge */
.n-hero__device { justify-self: end; width: min(100%, 500px, calc((100dvh - 72px) * 0.6)); margin: -32px 0; }   /* the hero's full height, the grid's padding included: the picture's own clear margin and shadow take the overhang (owner, 4 Nov 2026: 5–10 % larger) */
/* The hero's Edge 1060 (owner, 25 Oct 2026): a still of the 3D model, and
 * the live model over it in a canvas the same size. The model draws the
 * still's exact frame, then reveal.js's module marks the box .is-live and
 * the two swap in one step; its own shadow is part of the picture. */
.n-hero__edge { position: relative; aspect-ratio: 920 / 1533; }
.n-hero__edge img, .n-hero__edge canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.n-hero__edge canvas { opacity: 0; pointer-events: none; }
.n-hero__edge.is-live canvas { opacity: 1; }
.n-hero__edge.is-live img { visibility: hidden; }

/* ---------------------------------------- 5 the sections under the hero
 * (owner, 16 Oct 2026): the instrument explained, the slots on the dark band,
 * the plan as a workout profile, the Edges on a ruler, the trial as a
 * journey, and setup with the way to the docs. */

.n-k { margin: 0; font: 500 13px/1 var(--n-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--n-text-3); }
.n-k + .n-h2 { margin-top: 14px; }
.n-h2 { max-width: 24ch; }
.n-tag { font: 500 12px/1.3 var(--n-mono); color: var(--n-accent); letter-spacing: 0.03em; }
.shell--night .n-dark { --n-accent: #E7C341; background: #0E0F10; color: #F2F1EE; }
.shell--night .n-warm { --n-bg: #F5F5F3; --n-line: #DADAD5; --n-text: #111214; --n-text-2: #4A4D52; --n-text-3: #6B6F74; background: #F5F5F3; color: #111214; color-scheme: light; }

/* the instrument, explained: the ride screen alone (the Edge 1060's 480 x 800
 * pixels, docs/site/screens/docs.py), and a dash from each label that stops
 * just short of the screen, level with the middle of the part it names: y as a
 * share of the screen's 800 rows, measured on the capture (owner, 31 Oct
 * 2026: "the dashes next to the exact thing they are explaining"). The clock's
 * digits 78-162, the session bar 189, the power's digits 312-390, the
 * target's 348-390, the band 432-472, the four readings 552-672, the next
 * step 712-776. No shadow: a hairline keeps the screen's paper off the page's. */
.n-anat { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); align-items: start; }
.n-anat__dev { position: relative; width: 360px; }
.n-anat__dev img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px #D9D9D4; filter: none; }
.n-anat__col { position: relative; z-index: 2; height: 600px; margin: 0; padding: 0; list-style: none; }
.n-co { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 0; transform: translateY(-12px); }
.n-co--clock { top: 15%; } .n-co--session { top: 23.63%; } .n-co--power { top: 43.88%; } .n-co--target { top: 46.13%; } .n-co--gauge { top: 56.5%; } .n-co--readings { top: 76.5%; } .n-co--next { top: 93%; }
.n-anat__col--l .n-co { flex-direction: row-reverse; text-align: right; }
/* the dash: on the element's height (the title's centre), ending just outside the device's frame */
.n-co::before { content: ""; flex: 0 0 auto; width: 40px; height: 1px; margin-top: 12px; background: var(--n-text-3); }
.n-anat__col--l .n-co::before { margin-right: 14px; margin-left: 14px; }
.n-anat__col--r .n-co::before { margin-left: 14px; margin-right: 14px; }
.n-co div { max-width: 250px; }
.n-co b { display: block; font-weight: 600; font-size: 16.5px; line-height: 24px; }
.n-co span { display: block; color: var(--n-text-2); font-size: 14px; line-height: 1.45; }

/* Before, during and after (owner, 25 Oct 2026, in the hero's language): one
 * Edge 1060, a close-up from a little above, its foot cut by the band's
 * bottom edge; beside it the words and the three moments, which take turns
 * with its screen (reveal.js, [data-picker]), a hairline filling under the
 * one shown. Below 1024 px: the words, the moments, then the Edge. */
#features { padding-bottom: 0; }
.n-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "edge head" "edge steps"; column-gap: 72px; align-items: start; }
.n-feat__head { grid-area: head; padding-top: 24px; }
.n-feat__edge { grid-area: edge; align-self: end; position: relative; margin: 0; width: min(100%, 580px); justify-self: center; aspect-ratio: 840 / 1000; }
.n-feat__edge img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.n-feat__edge img.is-on { opacity: 1; }
.n-feat__steps { grid-area: steps; margin-top: 40px; padding-bottom: 120px; display: flex; flex-direction: column; }
.n-feat__steps button { all: unset; position: relative; display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--n-line); cursor: pointer; opacity: 0.42; transition: opacity 0.3s ease; -webkit-tap-highlight-color: transparent; }
.n-feat__steps button:last-child { border-bottom: 1px solid var(--n-line); }
.n-feat__steps button:hover { opacity: 0.7; }
.n-feat__steps button[aria-selected="true"] { opacity: 1; }
.n-feat__steps button:focus-visible { outline: 2px solid var(--n-text); outline-offset: 4px; }
.n-feat__steps b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.n-feat__steps span:not(.n-tag) { color: var(--n-text-2); font-size: 15.5px; line-height: 1.55; max-width: 46ch; }
.n-feat__steps i { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--n-text); transform: scaleX(var(--fill, 0)); transform-origin: left; }
@media (max-width: 1023px) {
  .n-feat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "steps" "edge"; }
  .n-feat__head { padding-top: 0; }
  .n-feat__steps { margin-top: 28px; padding-bottom: 32px; }
  .n-feat__edge { width: min(100%, 460px); }
}
@media (max-width: 640px) {
  .n-feat__steps button { padding: 16px 0; }
  .n-feat__steps b { font-size: 17px; }
  .n-feat__steps span:not(.n-tag) { font-size: 14.5px; }
}

.n-dark .n-models { color: #85888C; }

/* the plan: the workout profile, with pins down to the screens */
/* the note as the big card, heart rate and cadence as text boxes beside it */

/* every Edge, on a ruler */
.n-sizes { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: end; }
.n-sizes figure { margin: 0; min-width: 0; }
.n-dim { margin-top: 30px; position: relative; height: 18px; border-inline: 1px solid var(--n-text); }
/* (owner, 25 Oct 2026) the four Edges in 3D, rendered with one camera on
 * one floor (stills.sh, frameH), so equal columns keep their true relative
 * size; each ruler spans its own Edge (--n-w, its width in the picture) */
.n-sizes .n-still { display: block; width: 100%; height: auto; }
.n-sizes .n-dim { width: var(--n-w, 100%); margin-inline: auto; margin-top: 8px; }
.n-sizes__530 { --n-w: 59%; } .n-sizes__850 { --n-w: 64%; } .n-sizes__ex2 { --n-w: 65%; } .n-sizes__1060 { --n-w: 69%; }
.n-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--n-text); }
.n-dim span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--n-bg); padding: 0 8px; font: 500 13px var(--n-mono); white-space: nowrap; }
.n-sizes figcaption { margin-top: 12px; text-align: center; font-weight: 600; font-size: 15px; }
.n-models-list { margin: 44px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.n-models-list li { font: 500 13px var(--n-mono); border: 1px solid var(--n-line); border-radius: 999px; padding: 6px 12px; color: var(--n-text-2); }
.n-models { margin: 28px 0 0; color: var(--n-text-3); font-size: 15px; }

/* price: the trial as a journey */
/* the trial on a line: three days, the line yellow where the price begins */

/* setup, with the way to the docs */
/* (owner, 25 Oct 2026) a dark band of its own, no box on the light one; it
 * runs on into "who's behind it", a hairline between them */
.n-setup-sec { padding-bottom: 0; }
.n-setup-sec + .n-dark .n-wrap { border-top: 1px solid var(--n-line); padding-top: 96px; }
.n-setup-sec + .n-dark { padding-top: 96px; }
.n-setup { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.n-setup__head { max-width: 760px; }
.n-setup .n-k { color: #85888C; }
.n-setup .n-h2 { font-size: clamp(32px, 3.2vw, 46px); }
.n-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 11px; background: #F2C300; color: #17140A; font: 600 16px var(--n-sans); text-decoration: none; transition: background-color 0.2s ease; }
.n-btn:hover { background: #F7D33E; color: #17140A; }
.n-btn svg { width: 18px; height: 18px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.n-btn:hover svg { transform: translateX(3px); }
/* (owner, 5 Nov 2026) three dots on one thin line, the last gold; the line runs
 * across on a wide screen and down the left from a tablet down */
.n-setup__line { position: relative; margin: 64px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n-setup__line li { position: relative; padding: 28px 40px 0 0; }
.n-setup__line li:last-child { padding-right: 0; }
.n-setup__line li::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--n-line); }
.n-setup__line li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #F2F1EE; }
.n-setup__line li:last-child::before { background: #F2C300; }
.n-setup__line b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.n-setup__line span { display: block; margin-top: 4px; max-width: 30ch; color: #B7B9BC; font-size: 15px; line-height: 1.45; }
@media (max-width: 860px) {
  .n-setup { display: block; }
  .n-setup .n-btn { margin-top: 24px; }
  .n-setup__line { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .n-setup__line li { padding: 0 0 26px 28px; }
  .n-setup__line li:last-child { padding-bottom: 0; }
  .n-setup__line li::before { top: 7px; }
  .n-setup__line li::after { left: 4px; right: auto; top: 7px; bottom: -7px; width: 1px; height: auto; }
  .n-setup__line li:last-child::after { display: none; }
  .n-setup__line b { font-size: 18px; }
  .n-setup__line span { max-width: none; font-size: 14px; }
}
.shell--night .n-setup :focus-visible { outline-color: #F2C300; }

/* ---------------------------------------------------------- 9 questions */

.n-qa { margin-top: 48px; }
.n-qa details { border-top: 1px solid var(--n-line); }
.n-qa details:last-child { border-bottom: 1px solid var(--n-line); }
.n-qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; }
.n-qa summary::-webkit-details-marker { display: none; }
.n-qa summary:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 4px; border-radius: 6px; }
.n-qa h3 { margin: 0; font-size: 18px; font-weight: 600; }
.n-qa summary i { flex: none; position: relative; width: 28px; height: 28px; border: 1px solid var(--n-line); border-radius: 50%; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease; }
.n-qa summary i::before, .n-qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; background: var(--n-text); }
.n-qa summary i::after { transform: rotate(90deg); }
.n-qa details[open] summary i { transform: rotate(45deg); border-color: var(--n-accent); }
.n-qa summary:hover i { border-color: var(--n-text-3); }
.n-qa p { margin: 0; padding: 0 52px 24px 0; color: var(--n-text-2); font-size: 16px; line-height: 1.6; max-width: 70ch; }

/* The price (owner, 5 Nov 2026): one Edge lying flat, as no other section lays
 * it down, and white space. The words stack on the left; the two 1fr rows keep
 * them centred against the Edge whichever is taller. */
.n-pay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". edge" "head edge" "price edge" "say edge" "days edge" ". edge"; column-gap: 64px; }
.n-pay__head { grid-area: head; }
.n-pay__price { grid-area: price; display: flex; align-items: baseline; gap: 9px; margin: 20px 0 0; font: 600 clamp(30px, 2.9vw, 42px)/1.05 var(--n-display); letter-spacing: -0.028em; }
.n-pay__price small { font: 400 16px var(--n-sans); letter-spacing: 0; color: var(--n-text-2); }
.n-pay__say { grid-area: say; }
.n-pay__say .n-lead { margin-top: 16px; }
.n-pay__ctas { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.n-pay__edge { grid-area: edge; align-self: center; justify-self: center; width: min(100%, 400px, calc((100vh - 72px) * 0.52)); margin: 0; }
.n-pay__edge img { display: block; width: 100%; height: auto; }
.n-pay__days { grid-area: days; list-style: none; margin: 34px 0 0; padding: 0; }
.n-pay__days li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 13px 0 14px; border-top: 1px solid var(--n-line); }
.n-pay__days b { font-size: 14px; font-weight: 600; }
.n-pay__days span { color: var(--n-text-3); font-size: 15px; line-height: 1.4; }
.n-pay__terms { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; }
.n-pay__terms li { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; border-top: 1px solid var(--n-line); }
.n-pay__terms b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.n-pay__terms span { color: var(--n-text-3); font-size: 14px; line-height: 1.45; }
/* Tablets and phones (owner, 5 Nov 2026): one object, one price. The words, the
 * Edge alone with its pay screen, the price, the buttons, the terms. The headline
 * already tells the trial, so the three days stay on the desktop. "Unlock with a
 * code" becomes a button as the hero's "How to set it up" is. */
.n-pay__ctas .n-link svg { display: none; }
@media (max-width: 860px) {
  .n-pay { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "edge" "price" "say"; column-gap: 0; }
  .n-pay__edge { justify-self: center; width: min(74%, 400px); margin: 20px 0 6px; }
  .n-pay__price { margin-top: 0; font-size: 30px; }
  .n-pay__price small { font-size: 15px; }
  .n-pay__say .n-lead { margin-top: 12px; }
  .n-pay__days { display: none; }
  .n-pay__ctas .n-link { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 52px; padding: 0 22px; border: 1px solid #2A2E33; border-radius: 12px; background: #1F2226; color: #F2F1EE; font-weight: 500; font-size: 15px; text-decoration: none; }
  .n-pay__ctas .n-link:hover { color: #F2F1EE; border-color: var(--n-accent); }
  .n-pay__ctas .n-link svg { display: block; width: 16px; height: 16px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .n-pay__ctas .n-link:hover svg { transform: translateX(3px); }
  .n-pay__terms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; margin-top: 34px; }
}
@media (max-width: 640px) {
  .n-pay__ctas { gap: 8px; margin-top: 18px; }
  .n-pay__ctas .n-store { border-radius: 11px; flex: none; }
  .n-pay__ctas .n-store img { height: 48.5px; }
  .n-pay__ctas .n-link { flex: 1 1 auto; justify-content: center; height: 45px; padding: 0 12px; gap: 6px; border-radius: 11px; font-size: 14px; white-space: nowrap; }
  .n-pay__ctas .n-link svg { width: 14px; height: 14px; }
  .n-pay__terms { margin-top: 22px; column-gap: 18px; row-gap: 12px; }
  .n-pay__terms li { padding-top: 11px; }
  .n-pay__terms b { font-size: 14px; }
  .n-pay__terms span { font-size: 13px; }
}

/* ------------------------------------------------ 10 the reading pages
 * The docs, the legal pages and the 404 keep site.css's .docs / .rail / .doc
 * layout; here it is re-set on white in Onest. The docs' own blocks are the
 * n- and g- classes below: the quick start, and the guide's reading. */

.shell--night .page--read .docs { width: 100%; box-sizing: border-box; max-width: var(--page-max); margin-inline: auto; }
.shell--night .page--read .docs--daylight { max-width: none; }
.shell--night .page--read .rail__link { color: var(--n-text-2); }
.shell--night .page--read .rail__link:hover { color: var(--n-text); }
.shell--night .page--read .rail__link--current { color: var(--n-text); }
.shell--night .page--read .rail__link--current::before { background: #E7C341; }
/* (owner, 31 Oct 2026) on the docs the rail marks the section being read as
 * the page scrolls, a size larger than the rest, and a link glides to its
 * section (rail.js); the heading lands below the bar, level with the rail */
.shell--night .page--read .rail__link { transition: font-size 0.2s ease, color 0.2s ease; }
.shell--night .page--read .rail__link--current { font-size: 16px; }
.shell--night .page--read [id] { scroll-margin-top: 96px; }   /* below the bar, level with the rail; a phone's is below, under the chips */
/* (owner, 31 Oct 2026: "more modern") the rail beside the text, from 1024 px:
 * each group on a thin track, its name small above it; a link is a row that
 * shades on hover, the one being read shaded and a size larger, and a gold
 * marker on the track that glides from one to the next (rail.js; without it,
 * each current link carries its own). On a phone the rail stays the row of
 * chips (below). */
@media (min-width: 1024px) {
  .shell--night .page--read .rail { gap: 22px; max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }   /* taller than the window, it scrolls on its own */
  .shell--night .page--read .rail__group { gap: 0; }
  .shell--night .page--read .rail .eyebrow { margin: 0 0 6px; padding-left: 14px; font: 600 11.5px/1 var(--n-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-text-3); }
  .shell--night .page--read .rail__link { display: block; padding: 5px 12px 5px 14px; border-left: 1px solid var(--n-line); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.35; transition: font-size 0.2s ease, color 0.2s ease, background-color 0.2s ease; }
  .shell--night .page--read .rail__link:hover { background: var(--n-bg-2); }
  .shell--night .page--read .rail__link--current { font-size: 16px; font-weight: 600; background: var(--n-bg-2); }
  .shell--night .page--read .rail__link--current::before { left: -1px; top: 6px; bottom: 6px; border-radius: 2px; }
  .shell--night .page--read .rail--live .rail__link--current::before { display: none; }
  .rail__mark { position: absolute; left: 0; top: 0; width: 2px; border-radius: 2px; background: #E7C341; pointer-events: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
}
@media (max-width: 1023px) { .rail__mark { position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px; background: #E7C341; pointer-events: none; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } }
@media (prefers-reduced-motion: reduce) { .rail__mark, .shell--night .page--read .rail__link { transition: none; } }
.shell--night .page--read .eyebrow { font-family: var(--n-mono); font-weight: 500; letter-spacing: 0.02em; color: var(--n-text-3); }
.shell--night .page--read .doc__title,
.shell--night .page--read .doc__h2,
.shell--night .page--read .doc__h3 { font-family: var(--n-sans); font-weight: 600; letter-spacing: -0.025em; color: var(--n-text); }
.shell--night .page--read .doc__title { letter-spacing: -0.035em; }
.shell--night .page--read .prose { color: var(--n-text-2); }
.shell--night .page--read .strong--ink,
.shell--night .page--read .strong { color: var(--n-text); }
.shell--night .page--read .callout { background: var(--n-bg-2); border-color: var(--n-line); border-left-color: #E7C341; color: var(--n-text-2); }
.shell--night .page--read .chip { font-family: var(--n-mono); background: var(--n-bg-2); border-color: var(--n-line); }
.shell--night .page--read .log__v { font-family: var(--n-sans); font-weight: 600; color: var(--n-text); }
.shell--night .page--read .log__row { border-top-color: var(--n-line); color: var(--n-text-2); }
.shell--night .page--read .faq__q { font-family: var(--n-sans); font-weight: 600; }

/* the docs' header band: the title and a line under it */
.n-dochead { background: #0E0F10; color: #F2F1EE; border-bottom: 1px solid #2A2E33; }
.n-dochead__inner { padding-block: 64px 72px; }
.n-dochead__label { margin: 0 0 18px; font: 500 13px/1 var(--n-mono); color: #85888C; letter-spacing: 0.02em; }
.n-dochead h1 { margin: 0; font: 600 clamp(38px, 4.4vw, 60px)/1.04 var(--n-display); letter-spacing: -0.035em; max-width: 18ch; }
.n-dochead__sub { margin: 18px 0 0; max-width: 52ch; color: #B7B9BC; font-size: 19px; line-height: 1.55; }

/* The guide (owner, 31 Oct 2026: "look how apple designs their docs … not
 * ai generated"): plain text in one column, as Apple's support pages are. A
 * section is a heading and paragraphs; steps are an ordinary numbered list,
 * notes a sentence that starts "Note:", the settings a list of names with a
 * line under each. No boxes, badges or cards. A screen's picture sits to the
 * right of its words; on a phone, under its heading. */
.shell--night .page--read .docs--guide .doc { display: block; max-width: 680px; }
.g-sec { padding-top: 64px; }
.g-sec:first-child { padding-top: 0; }
.shell--night .page--read .g-sec .doc__h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.15; letter-spacing: -0.025em; }
.g-sec > p, .g-sec > ol, .g-sec > ul, .g-defs { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--n-text); }
.g-sec > ol, .g-sec > ul { padding-left: 1.4em; }
.g-sec > ol > li, .g-sec > ul > li { margin-bottom: 10px; padding-left: 6px; }
.g-sec > ul > li::marker { color: var(--n-text-3); }
.g-sec b { font-weight: 600; }
.g-sec > p.g-aside { color: var(--n-text-2); }
.g-h3 { clear: both; margin: 36px 0 10px; font: 600 21px/1.3 var(--n-sans); letter-spacing: -0.015em; color: var(--n-text); }
.g-defs dt { margin-top: 18px; font-weight: 600; }
.g-defs dt:first-child { margin-top: 24px; }
.g-defs dd { margin: 2px 0 0; color: var(--n-text-2); }
.g-sec > ul.g-cols { columns: 2; column-gap: 40px; }
.g-sec > ul.g-cols > li { margin-bottom: 6px; break-inside: avoid; }
.g-shot { float: right; width: 150px; height: auto; margin: 4px 0 24px 40px; border-radius: 8px; box-shadow: 0 0 0 1px #D9D9D4; }
.g-sec .n-trial3 { margin: 8px 0 24px; }
.g-sec .n-anat--doc { margin: 24px 0 40px; }
.g-sec::after { content: ""; display: block; clear: both; }

/* the trial screens on the reading pages */
.n-trial3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
.n-trial3 figure { margin: 0; }
.n-trial3 figcaption { margin-top: 6px; font-size: 13px; color: var(--n-text-3); text-align: center; }
/* the field in smaller boxes, each at the same scale as the Edge draws it:
 * the half cell (239 px of the 1060's 480) half as wide as the rest */
.g-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; align-items: end; margin: 8px 0 28px; }
.g-boxes figure { margin: 0; }
.g-boxes img, .g-box { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px #D9D9D4; }
.g-boxes img[width="239"] { width: 49.8%; }
.g-boxes figcaption { margin-top: 8px; font-size: 14px; color: var(--n-text-3); }
.g-box { max-width: 330px; margin: 4px 0 24px; }
.n-docshot { display: block; width: 150px; max-width: 100%; height: auto; justify-self: center; align-self: center; border-radius: 8px; box-shadow: 0 0 0 1px #D9D9D4, 0 14px 28px -12px rgb(16 18 20 / 0.3); }
.n-docscreen { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px #D9D9D4; }


/* the labelled ride screen in the docs (moved from the landing, 16 Oct):
 * a narrower screen for the docs' column */
.n-anat--doc { margin-top: 20px; grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr); }
.n-anat--doc .n-anat__dev { width: 250px; }
.n-anat--doc .n-anat__col { height: calc(250px * 1410 / 846); }
.n-anat--doc .n-co::before { width: 20px; }
@media (min-width: 1024px) {   /* the target sits a line above the band: labels a little tighter */
  .n-anat--doc .n-co { transform: translateY(-11px); }
  .n-anat--doc .n-co::before { margin-top: 11px; }
}
.n-anat--doc .n-co b { font-size: 15px; line-height: 22px; }
.n-anat--doc .n-co span { font-size: 13.5px; line-height: 1.35; }
.n-anat--doc .n-co div { max-width: 210px; }

/* ---------------------------------------------------- 11 motion, widths */

/* The entrance (reveal.js): each .n-reveal rises 28px and fades in once, the
 * first time it comes into view, 0.8 s on an ease-out curve; framed Edges
 * also settle from 96 % to full size. A [data-stagger] group's children carry
 * --n-delay, so cards arrive one after another. Hidden only where the script
 * can run and the reader has not asked for less motion; if reveal.js never
 * marks <html> .reveal-ready, everything shows after 2.5 s regardless. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .n-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--n-delay, 0ms);
    will-change: opacity, transform;
  }
  .n-reveal .n-framed { transform: scale(0.96); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--n-delay, 0ms); }
  .n-reveal.is-in { opacity: 1; transform: none; }
  .n-reveal.is-in .n-framed { transform: none; }
  html:not(.reveal-ready) .n-reveal { animation: n-show 0.01s 2.5s forwards; }
}
@keyframes n-show { to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {
  /* site.css stacks .docs here, but its later .docs--daylight rule puts the
   * two columns back, which pushed the docs' text off a phone. */
  .shell--night .page--read .docs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .shell--night .page--read .rail { position: static; }
  .n-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 48px 64px; gap: 40px; }
  .n-hero__device { justify-self: center; width: min(100%, 400px); margin: 0; }
  /* the labels become a numbered list under the screen */
  .n-anat { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .n-anat__dev { order: -1; width: min(100%, 340px); }
  .n-anat__col { height: auto; width: 100%; max-width: 560px; }
  .n-anat__col--l { margin-top: 28px; }
  .n-co { position: static; transform: none; gap: 12px; padding: 12px 0; border-top: 1px solid var(--n-line); align-items: flex-start; }
  .n-anat__col--l .n-co { flex-direction: row; text-align: left; }
  .n-co::before { display: none; }
  .n-co div { max-width: none; }
  .n-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .n-sec { padding-block: 88px; }
}
@media (max-width: 999px) {
  /* the menu panel (site.css §10), in the page's black */
  .shell--night .nav__toggle:checked ~ .nav__links { background: #0E0F10; border-bottom-color: #2A2E33; }
  .shell--night .nav__toggle:checked ~ .nav__links .nav__link { border-top-color: #2A2E33; }
}
@media (max-width: 640px) {
  .shell--night { --gutter: 16px; }
  .n-hero__label { font-size: 14px; }
  .n-deal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 14px; }
  .n-deal li { padding-inline: 14px; }
  .n-deal b { display: block; margin: 0 0 2px; }
  .n-qa summary { padding: 18px 0; }
  .n-qa h3 { font-size: 16.5px; }
  .n-qa p { padding-right: 0; font-size: 15.5px; }
  /* the instrument's labels in the screen's own order, top to bottom */
  .n-anat { display: flex; flex-direction: column; align-items: center; }
  .n-anat__col { display: contents; }
  .n-co { width: 100%; max-width: 560px; }
  .n-co--clock { order: 1; } .n-co--session { order: 2; } .n-co--power { order: 3; } .n-co--target { order: 4; } .n-co--gauge { order: 5; } .n-co--readings { order: 6; } .n-co--next { order: 7; }
  .n-anat__dev { order: 0; margin-bottom: 20px; }
  .n-co b { font-size: 15.5px; line-height: 22px; }
  .n-co span { font-size: 14px; }
  .n-setup-sec + .n-dark, .n-setup-sec + .n-dark .n-wrap { padding-top: 64px; }
  .n-dim span { font-size: 12px; padding: 0 4px; }
  .n-sec { padding-block: 56px; }
  .n-dochead__inner { padding-block: 40px 48px; }
  /* the guide on a phone: a screen's picture under its heading */
  .g-sec { padding-top: 48px; }
  .shell--night .page--read .g-sec .doc__h2 { font-size: 28px; }
  .g-sec > p, .g-sec > ol, .g-sec > ul, .g-defs { font-size: 16.5px; }
  .g-shot { float: none; display: block; width: 170px; margin: 4px 0 20px; }
  .g-boxes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* The phone landing (owner, 17 Oct 2026): one column, nothing scrolls
 * sideways. The hero's Edge rises from the foot of the hero; the ride's three
 * screens play on one Edge that stays put while their words scroll under it
 * (reveal.js marks the step being read). */
@media (max-width: 640px) {
  .n-hero::before { inset: auto -50% -6% -50%; height: 62%; background: radial-gradient(50% 50% at 50% 72%, rgb(231 195 65 / 0.26), transparent 70%); }
  .n-hero__grid { text-align: center; padding-block: 36px 0; gap: 30px; }
  .n-hero__label { margin-bottom: 22px; }
  .n-hero__sub { margin: 18px auto 0; font-size: 17px; }
  .n-hero__ctas { justify-content: center; margin-top: 26px; }
  .n-deal { display: flex; justify-content: center; margin: 24px auto 0; padding: 0; border: 0; font: 500 11px/1 var(--n-mono); letter-spacing: 0.05em; text-transform: uppercase; }
  .n-deal li { padding-inline: 8px; border-left: 0; }
  .n-deal b { display: inline; margin: 0 4px 0 0; font-size: 11px; }
  .n-hero__models { margin: 14px auto 0; font-size: 12px; line-height: 1.5; text-wrap: balance; }
  /* (owner, 25 Oct 2026) the hero is the screen, less the bar (73 px), on
   * every phone, so the Edge is seen without scrolling: the words keep their
   * size and the Edge takes the height left, its width a share of it so the
   * same top five sixths show on any phone, cropped at the foot as before.
   * svh, the height with Safari's bar showing, so the hero does not grow
   * and the 3D does not resize as the bar slides away. */
  .n-hero__grid { display: flex; flex-direction: column; min-height: calc(100vh - 73px); min-height: calc(var(--screen, 100svh) - 73px); }
  /* the badge and the setup guide side by side, one height and one corner
   * (owner, 4 Nov 2026). One row in every language down to 360 px; narrower,
   * it takes its own. */
  .n-hero__ctas { flex-wrap: nowrap; gap: 8px; }
  .n-hero .n-store { border-radius: 11px; }
  .n-hero .n-store img { height: 48.5px; }
  .n-hero__setup { height: 45px; padding: 0 12px; gap: 6px; border-radius: 11px; font-size: 14px; white-space: nowrap; }
  .n-hero__setup svg { width: 14px; height: 14px; }
  .n-hero__device { flex: 1 1 0; min-height: 160px; width: 100%; display: flex; justify-content: center; overflow: hidden; container-type: size; }
  .n-hero__edge { flex: none; width: min(300px, 78cqh); align-self: flex-start; }

  .n-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
  .n-sizes figcaption { font-size: 12.5px; }

}
@media (max-width: 359px) { .n-hero__ctas { flex-wrap: wrap; } }
/* The hero's Edge slides up into place as the page opens: a long, soft
 * ease-out, slightly sharpening as it arrives, the glow following it. On
 * every width since the 3D model (owner, 25 Oct 2026: the desktop had only
 * the generic fade-up); the model takes over on the same frame wherever the
 * rise has got to. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .n-hero__device.n-reveal { opacity: 1; transform: none; transition: none; animation: none; }
  .n-hero__device .n-hero__edge { animation: n-rise 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both; }
  .n-hero::before { animation: n-glow 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both; }
}
@keyframes n-rise { from { opacity: 0; transform: translate3d(0, 140px, 0) scale(0.95); filter: blur(6px); } 55% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
@keyframes n-glow { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
/* The phone pass, second round (owner, 17 Oct 2026): say each thing once,
 * and keep the long sections short. */
@media (max-width: 640px) {
  /* the store badge is the hero's first button; the bar keeps logo and menu */
  .shell--night .store-badge--nav { display: none; }
  /* rhythm */
  .n-models { margin-top: 14px; font-size: 13px; }
}

/* Read at speed (owner, 25 Oct 2026): the 3D Edge 1060 (glance.js). On a
 * wide band its stage fills the band and it owns the right half, beside the
 * words; below 1024 px the stage is a block of its own under the words. In
 * the close-up the stage's edges crop it, like a full-bleed photograph. The
 * still, the model's first frame, shows until the model has drawn that
 * frame; for less motion and without WebGL a close-up still stays. */
.n-glance-sec { position: relative; overflow: hidden; padding-block: 0; }
.n-glance { position: relative; z-index: 1; min-height: 680px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; pointer-events: none; }
.n-glance__copy { pointer-events: auto; padding-block: 96px; }
.n-glance__stage { position: absolute; inset: 0; }
.n-glance__stage img, .n-glance__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.n-glance__stage img { object-fit: cover; object-position: 75% 50%; transition: opacity 0.5s ease; }
.n-glance__stage canvas { opacity: 0; transition: opacity 0.5s ease; }
.n-glance-sec.is-live .n-glance__stage canvas { opacity: 1; }
.n-glance-sec.is-live .n-glance__stage img { opacity: 0; }
@media (max-width: 1023px) {
  /* the stage a block of its own under the words, no fade to measure */
  .n-glance-sec { display: flex; flex-direction: column; }
  .n-glance { display: block; min-height: 0; }
  .n-glance__copy { padding-block: 72px 0; }
  .n-glance__stage { position: relative; order: 1; height: min(116vw, 700px); }
  /* the still sized as the model frames the Edge, by the stage's height, so
     the hand-over does not jump whatever the phone's height (owner, 26 Oct 2026) */
  .n-glance__stage { overflow: hidden; }
  .n-glance__stage img { left: 50%; right: auto; width: auto; max-width: none; transform: translateX(-50%); }
}
/* Phones (owner, 17 Oct 2026): the hero says it in one line, and the sizes
 * show three Edges, the 530, the Explore 2 and the 1060, large enough to read. */
/* short phones (an iPhone SE): the price line goes and the words close up,
 * for the Edge's sake; the price is two sections down */
@media (max-width: 640px) and (max-height: 720px) {
  .n-hero__grid { padding-top: 22px; gap: 18px; }
  .n-hero__label { margin-bottom: 12px; }
  .n-hero__ctas { margin-top: 18px; }
  .n-deal { display: none; }
}
@media (max-width: 640px) {
  .n-hero__sub-long { display: none; }
  .n-hero__sub-short { display: inline; }
  .n-sizes__850 { display: none; }
  .n-dim span { font-size: 12.5px; }
}
/* The language switcher (owner, 19 Oct 2026; i18n.go): a globe and the
 * current language's code in a quiet pill beside the bar's other controls,
 * opening a short menu of the languages in their own names. A <details>, so
 * it works with no script; nav-menu.js closes it on Escape or a click away. */
/* The bar's right side, one group (owner, 4 Nov 2026): the account link, the
 * language and the badge as far apart as the links on the left, 28 px, where
 * the bar's own gap is 40. */
@media (min-width: 1000px) {
  .shell--night .nav > .lang, .shell--night .nav > .lang + * { margin-left: -12px; }
}
.shell--night .lang { position: relative; }
.shell--night .store-badge--nav .store-badge__img { height: 41px; }
.shell--night .lang__button { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 10px; box-sizing: border-box; border: 1px solid #2A2E33; border-radius: 9px; color: #B7B9BC; font: 500 12.5px/1 var(--n-mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.shell--night .lang__button::-webkit-details-marker { display: none; }
.shell--night .lang__globe { width: 16px; height: 16px; flex: none; }
.shell--night .lang__button:hover, .shell--night .lang[open] .lang__button { color: #F2F1EE; border-color: #4A4F55; }
.shell--night .lang__button:focus-visible { outline: 2px solid #F2C300; outline-offset: 2px; }
.shell--night .lang__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: #15171A; border: 1px solid #2A2E33; border-radius: 14px; box-shadow: 0 22px 44px -14px rgb(0 0 0 / 0.65); }
.shell--night .lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; color: #D9DADB; font: 500 14.5px/1.2 var(--n-sans); text-decoration: none; }
.shell--night .lang__menu a:hover, .shell--night .lang__menu a:focus-visible { background: #1F2226; color: #F2F1EE; outline: none; }
.shell--night .lang__menu a.is-current { color: #F2F1EE; }
.shell--night .lang__menu a.is-current::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F2C300; flex: none; }
@media (max-width: 999px) {
  /* the lockup takes the free space, so whatever controls a page has (the
   * language, a button, the menu) sit together at the right edge */
  .shell--night .nav:not(.nav--phone) > .lockup { margin-right: auto; }
  .shell--night .nav .lang { order: 1; margin-left: 0; }
  .shell--night .nav .store-badge--nav { order: 2; margin-left: 12px; }
  .shell--night .nav .nav__burger { order: 3; margin-left: 10px; }
}

/* ------------------------------------------------------ 12 the phone pages
 * The four Edge pages, /account and the notices (owner, 21 Oct 2026: "every
 * page in the home page's design language; most visitors are on a phone").
 * Their <body> carries .shell--night beside .shell--phone, so the bar, the
 * footer and the ground are already the landing's. Inside the column,
 * site.css's own tokens are pointed at Night Ride, so every component that
 * reads them (the cards, the fields, the price, the ticks) follows; the
 * rules after the tokens are what a token cannot say. */

.shell--phone .page--phone {
  --paper: #0E0F10;
  --paper-2: #1C1F23;
  --white: #15171A;
  --ink: #F2F1EE;
  --body: #B7B9BC;
  --muted: #85888C;
  --hairline: #2A2E33;
  --input-border: #3A3F45;
  --border-strong: #3A3F45;
  --green: #8CC57F;
  --amber: #E7C341;
  --sans: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --display: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Onest', ui-sans-serif, system-ui, sans-serif;
  --radius: 20px;
  color-scheme: dark;
}

/* The bar's word of state, as the landing's bar sets its links: plain text, not
 * a box, because nothing happens when it is pressed (owner, 6 Nov 2026). */
.shell--phone .nav__status { font: 400 15px/1 var(--n-sans); color: #B7B9BC; white-space: nowrap; }

.shell--phone .screen { padding-bottom: 56px; }
.shell--phone .screen__title { font-weight: 600; font-size: 32px; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.shell--phone .screen__lede { font-size: 16px; line-height: 1.55; }
.shell--phone .eyebrow { font: 500 13px/1.3 var(--n-mono); letter-spacing: 0.02em; color: #85888C; }
.shell--phone .eyebrow--done { color: #8CC57F; }

/* the cards: the landing's panels */
.shell--phone .device,
.shell--phone .status,
.shell--phone .signin { background: #15171A; border-color: #2A2E33; }
.shell--phone .device__label { font: 500 12px/1.3 var(--n-mono); letter-spacing: 0.02em; color: #85888C; }
.shell--phone .device__model { font-weight: 600; letter-spacing: -0.01em; }
.shell--phone .device__code,
.shell--phone .input--code { font-family: var(--n-mono); font-weight: 600; letter-spacing: 0.04em; }
.shell--phone .device__found svg { stroke: #8CC57F; }
.shell--phone .status__mark--done { background: #3E8E35; }

/* the fields: sunk into the panel, the handover yellow when focused */
.shell--phone .field__label { color: #B7B9BC; }
.shell--phone .input { background: #0E0F10; border-color: #3A3F45; color: #F2F1EE; }
.shell--phone .input::placeholder { color: #5E6267; }
.shell--phone .input:focus { outline: none; border-color: #E7C341; box-shadow: 0 0 0 3px rgb(231 195 65 / 0.18); }
.shell--phone .form-error { color: #F0958A; }

/* the buttons: the one that moves the rider on is the handover yellow */
.shell--phone .btn--ink { background: #E7C341; color: #17140A; }
.shell--phone .btn--ink:hover { background: #F0CF55; color: #17140A; }
.shell--phone .btn--ink svg { stroke: currentColor; }
.shell--phone .btn--white { background: transparent; }
.shell--phone .btn--hairline,
.shell--phone .btn--outline { border-color: #3A3F45; color: #F2F1EE; }
.shell--phone .btn--hairline:hover,
.shell--phone .btn--outline:hover { border-color: #E7C341; color: #F2F1EE; }
.shell--phone .btn--muted,
.shell--phone .btn--muted:hover { color: #B7B9BC; }
.shell--phone .btn--apple { background: #FFFFFF; color: #000000; }
.shell--phone .btn--apple:hover { color: #000000; }
.shell--phone :focus-visible { outline-color: #E7C341; }

.shell--phone .point__icon { stroke: #85888C; }
.shell--phone .link-ink { color: #F2F1EE; text-decoration-color: #E7C341; }
.shell--phone .price__value { font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; }
.shell--phone .pricebar .price__amount { flex: none; }
.shell--phone .btn--block { text-align: center; padding-inline: 18px; text-wrap: balance; }

/* The homepage's language, carried over (owner, 6 Nov 2026), drawn on the
 * connect and account pages and read by the others in the flow: its headline,
 * its yellow button and its raised one, the panel for the one object on the
 * page, and hairline lists rather than boxes for everything else. */
.shell--phone .screen { gap: 28px; padding-top: 32px; padding-bottom: 72px; }
.shell--phone .screen--connect { gap: 26px; }
.shell--phone .intro { gap: 16px; }
.shell--phone .screen__title { font-size: clamp(36px, 10.4vw, 44px); line-height: 1.04; letter-spacing: -0.04em; }
.shell--phone .screen__title span { display: block; color: #F2C300; }
.shell--phone .screen__lede { font-size: 17px; line-height: 1.5; color: #B7B9BC; }
.shell--phone .eyebrow { font: 500 13px/1.3 var(--n-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.shell--phone .screen__h2 { margin: 12px 0 -12px; font: 600 26px/1.1 var(--n-display); letter-spacing: -0.03em; color: #F2F1EE; }
.shell--phone .footnote { font-size: 14px; line-height: 1.45; }

.shell--phone .btn--ink { background: #F2C300; border-radius: 11px; font-size: 16px; font-weight: 600; transition: background-color 0.2s ease; }
.shell--phone .btn--ink:hover { background: #F7D33E; }
.shell--phone .btn--ink svg { flex: none; width: 18px; height: 18px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.shell--phone .btn--ink:hover svg { transform: translateX(3px); }
.shell--phone .btn--h56 { min-height: 52px; }
.shell--phone .btn--hairline,
.shell--phone .btn--outline { min-height: 52px; background: #1F2226; border: 1px solid #2A2E33; border-radius: 12px; font-size: 16px; font-weight: 500; transition: border-color 0.2s ease; }
.shell--phone .btn--h48-quiet { font-size: 15px; font-weight: 500; }
/* A quiet button has no box of its own. As a <button> it took the browser's. */
.shell--phone .btn--muted,
.shell--phone .btn--muted:hover { background: transparent; }
.shell--phone .btn--muted:hover { color: #F2F1EE; }
/* The whole code stays on one line, as on the Edge. */
.status__code { white-space: nowrap; }

.shell--phone .device { gap: 14px; padding: 20px; }
.shell--phone .device__row--stacked { gap: 14px; }
.shell--phone .device__model { font-size: 20px; letter-spacing: -0.015em; }
.shell--phone .device__code { font-size: clamp(26px, 8.2vw, 32px); line-height: 1.15; letter-spacing: 0.05em; }
.shell--phone .input--code { letter-spacing: 0.05em; font-variant-numeric: normal; }

/* The wait on the 530, 830, 1030 and 1030 Plus: the one figure on the page that
 * moves, in the yellow, closing the card it belongs to. */
.wait { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #2A2E33; }
.wait__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wait__label { font-size: 15px; font-weight: 600; }
.wait__time { font-size: 26px; font-weight: 600; line-height: 1; color: #F2C300; font-variant-numeric: tabular-nums; text-align: right; }
.wait__note { font-size: 14px; line-height: 1.45; color: #85888C; }

/* The small print under a button: rows on a hairline, as the price's terms. */
.shell--phone .points { gap: 0; font-size: 14px; color: #B7B9BC; }
.shell--phone .point { padding-block: 14px; border-top: 1px solid #2A2E33; }
.shell--phone .point:last-child { border-bottom: 1px solid #2A2E33; }

/* /account's facts, as the price's list of days. */
.facts { margin: 0; }
.facts__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 13px 0 14px; border-top: 1px solid #2A2E33; }
.facts__row:last-child { border-bottom: 1px solid #2A2E33; }
.facts dt { font-size: 14px; color: #85888C; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.4; color: #F2F1EE; overflow-wrap: anywhere; }
.facts__ok { display: block; color: #8CC57F; }

/* ------------------------------------------- 13 the reading pages on a phone
 * The legal pages and the 404 open on the docs' title band (owner, 21 Oct
 * 2026), a little shorter since what follows is the page itself. Below
 * 1024px the rail is no longer a column beside the text, and as a list of
 * fifteen links it pushed the page under the fold (the docs' twenty-one were
 * hidden there altogether); there it becomes one row of chips that scrolls
 * sideways and stays at the top while the page is read. The group of other
 * pages (.rail__group--also) goes: the footer has them. */

.n-dochead--page .n-dochead__inner { padding-block: 56px 60px; }
.n-dochead--page .n-dochead__sub { font-size: 18px; }

@media (max-width: 1023px) {
  .shell--night .nav--tucked:not(:focus-within) ~ .page--read .rail { top: 0; }
  .shell--night .page--read .docs { padding-top: 0; gap: 32px; }
  .shell--night .page--read .rail {
    position: sticky;
    top: 72px;
    transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 5;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 12px var(--gutter);
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--n-line);
  }
  .shell--night .page--read .rail::-webkit-scrollbar { display: none; }
  .shell--night .page--read .rail__group { display: contents; }
  .shell--night .page--read .rail .eyebrow,
  .shell--night .page--read .rail__group--also { display: none; }
  /* (owner, 31 Oct 2026) the desktop rail's blocks: rows that shade, the one
     being read shaded and bold, the gold marker gliding under it (rail.js) */
  .shell--night .page--read .rail__link { flex: none; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; line-height: 1.2; white-space: nowrap; color: var(--n-text-2); transition: color 0.2s ease, background-color 0.2s ease; }
  .shell--night .page--read .rail__link--current { font-size: 14px; font-weight: 600; color: var(--n-text); background: var(--n-bg-2); }
  .shell--night .page--read .rail__link--current::before { display: none; }
  /* a heading the chips jump to lands below the row, not under it */
  .shell--night .page--read [id] { scroll-margin-top: 144px; }   /* below the bar and the chips */
}
@media (max-width: 640px) {
  .n-dochead--page .n-dochead__inner { padding-block: 32px 36px; }
  .n-dochead--page h1 { font-size: 34px; }
  .n-dochead--page .n-dochead__sub { font-size: 16.5px; }
  .shell--night .page--read .docs { padding-bottom: 48px; }

  /* the docs' bar: its "Unlock with a code" sits beside the menu, small,
   * instead of taking a row of its own (site.css wraps the bar below 553) */
  .shell--night .nav:not(.nav--phone) { flex-wrap: nowrap; gap: 8px; }
  .shell--night .nav > a.btn--sm { order: 2; width: auto; height: 36px; min-height: 36px; padding: 0 10px; font-size: 12.5px; margin-left: 0; white-space: nowrap; }
}
@media (max-width: 539px) {
  /* no room beside the lockup, the language and the menu in every language
   * (Portuguese needs 530px in the floating bar; German at 390 pushed the menu off the screen):
   * the footer's Unlock stands in */
  .shell--night .nav > a.btn--sm { display: none; }
}

/* --------------------------------------------- 14 who's behind it (owner,
 * 21 Oct 2026): his photo from a road race, cropped to him, and why he
 * built the field, in his words. Quiet: one photo, one quote. */
.n-about { display: grid; grid-template-columns: 300px minmax(0, 52rem); gap: 56px; align-items: center; }
.n-about__photo { display: block; width: 100%; height: auto; border-radius: var(--n-r-panel); box-shadow: 0 0 0 1px #2A2E33, 0 30px 60px -24px rgb(0 0 0 / 0.6); }
.n-about__quote { margin: 18px 0 0; font: 500 26px/1.42 var(--n-sans); letter-spacing: -0.015em; color: #F2F1EE; text-wrap: pretty; }
.n-about__quote::before { content: "\201C"; color: #E7C341; margin-right: 2px; }
.n-about__quote::after { content: "\201D"; color: #E7C341; margin-left: 2px; }
.n-about__who { margin: 24px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.n-about__who b { font-weight: 600; color: #F2F1EE; }
.n-about__who span { color: #85888C; }
@media (max-width: 760px) {
  .n-about { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .n-about__photo { width: min(100%, 320px); }
  .n-about__quote { font-size: 20px; line-height: 1.5; }
}

/* The phone pass, third round (owner, 25 Oct 2026: clean and mobile
 * friendly): one idea a screen. Before, during and after shows its moments'
 * titles and one line, the shown moment's, in a box as tall as the longest
 * so nothing moves; the Edge stays last, cut by the band. */
.n-feat__say { display: none; }
@media (max-width: 640px) {
  /* (owner, 25 Oct 2026) the Edge, its moments and the line in one screen:
     the Edge under the heading, its cut foot faded into the band, then the
     titles and the shown moment's line, so what changes is seen together */
  #features { padding-bottom: 56px; }
  .n-feat { grid-template-areas: "head" "edge" "steps" "say"; }
  .n-feat__steps { margin-top: 4px; padding-bottom: 0; }
  .n-feat__steps button { grid-template-columns: minmax(0, 1fr); padding: 11px 0; gap: 2px; }
  .n-feat__steps button > span:not(.n-tag) { display: none; }
  .n-feat__say { grid-area: say; display: grid; margin: 14px 0 0; }
  .n-feat__say p { grid-area: 1 / 1; margin: 0; color: var(--n-text-2); font-size: 15px; line-height: 1.55; opacity: 0; transition: opacity 0.4s ease; }
  .n-feat__say p.is-on { opacity: 1; }
  .n-feat__edge { width: min(100%, 268px, calc(var(--screen, 100svh) * 0.34)); margin-top: 20px; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 98%); mask-image: linear-gradient(to bottom, #000 74%, transparent 98%); }
}

/* Calmer on phones (owner, 25 Oct 2026: it looked janky). Things fade in,
 * briefly and all at once, instead of rising 28 px one after another, and
 * the bands sit closer (the phone's .n-sec padding, 72 -> 56 px), so no
 * screen is mostly empty between two of them. */
@media (max-width: 640px) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .n-reveal:not(.n-hero__device) { transform: none; transition: opacity 0.45s ease; transition-delay: 0ms; will-change: opacity; }
}
/* short phones (an iPhone SE): the Edge, its moments and the line still in
 * one screen, the moments' small labels dropped (after the phone rules above,
 * which these narrow) */
@media (max-width: 640px) and (max-height: 720px) {
  .n-feat__edge { width: min(100%, calc(var(--screen, 100svh) * 0.32)); margin-top: 12px; }
  .n-feat__steps .n-tag { display: none; }
  .n-feat__steps button { padding: 8px 0; }
  .n-feat__say { margin-top: 10px; }
  .n-feat__say p { font-size: 14px; line-height: 1.45; }
}

/* A whole page, or one row of it (owner, 26 Oct 2026: the slider as before,
 * during and after's): the same picker, its Edge on the left as there, the
 * whole screen in the frame since the slot can be anywhere on it; the note
 * on the pictures under the four places. */
#slots { padding-bottom: 0; }
.n-feat--slots { grid-template-areas: "edge head" "edge steps" "edge note"; }
.n-feat--slots .n-feat__steps { padding-bottom: 0; }
.n-feat--slots .n-models { grid-area: note; margin: 24px 0 120px; }
.n-feat--slots .n-feat__steps button { border-color: #2A2E33; }
.n-feat--slots .n-feat__steps span:not(.n-tag) { color: #B7B9BC; }
.n-feat--slots .n-feat__steps i { background: #F2F1EE; }
.n-feat--slots .n-feat__steps button:focus-visible { outline-color: #F2F1EE; }
@media (max-width: 1023px) {
  .n-feat--slots { grid-template-areas: "head" "steps" "note" "edge"; }
  .n-feat--slots .n-models { margin: 20px 0 32px; }
}

/* One screen a section on phones (owner, 26 Oct 2026): from Before, during
 * and after down to the price, each band is the screen less the bar (73 px),
 * its content centred in it, so a section is seen whole and the next begins
 * at the next screen. svh, as the hero, so nothing resizes as Safari's bar
 * slides. What did not fit steps aside: on short phones the sizes' lead. */
@media (max-width: 640px) {
  #features, #slots, #sizes, #pricing { box-sizing: border-box; min-height: calc(100vh - 73px); min-height: calc(var(--screen, 100svh) - 73px); display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
  #features > .n-wrap, #slots > .n-wrap, #sizes > .n-wrap, #pricing > .n-wrap { width: 100%; box-sizing: border-box; }

  /* the glance: the words, then the Edge in all the height left */
  #glance { box-sizing: border-box; height: calc(100vh - 73px); height: calc(var(--screen, 100svh) - 73px); }
  #glance .n-glance__copy { padding-block: 28px 0; }
  #glance .n-glance__stage { flex: 1 1 0; height: auto; min-height: 0; }

  /* a whole page, or one row of it: as before, during and after, the note last */
  .n-feat--slots { grid-template-areas: "head" "edge" "steps" "say" "note"; }
  .n-feat--slots .n-feat__edge { width: min(100%, 268px, calc(var(--screen, 100svh) * 0.31)); -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 99%); mask-image: linear-gradient(to bottom, #000 84%, transparent 99%); }
  .n-feat--slots .n-feat__steps button { padding: 9px 0; }
  .n-feat--slots .n-feat__say p { color: #B7B9BC; }
  .n-feat--slots .n-models { margin: 14px 0 0; font-size: 12px; line-height: 1.45; }

}
@media (max-width: 640px) and (max-height: 720px) {
  #features, #slots, #sizes, #pricing { padding-block: 20px; }
  #sizes .n-lead { display: none; }
  .n-feat--slots .n-feat__edge { width: min(100%, calc(var(--screen, 100svh) * 0.26)); margin-top: 12px; }
  .n-feat--slots .n-feat__steps button { padding: 7px 0; }
}

/* Before, during and after in 3D (owner, 26 Oct 2026): the model's canvas
 * over the stills, shown once it has drawn the first angle, the still's own
 * (hero3d.js, steps.js); the stills stay for less motion and without WebGL. */
.n-feat__edge canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; }
.n-feat__edge.is-live canvas { opacity: 1; }
.n-feat__edge.is-live img { opacity: 0; transition: opacity 0.4s ease 0.1s; }

/* (owner, 26 Oct 2026: on some phones the page jumped as the browser's bar
 * slid in and out) --screen is the window's height as the page opened, held
 * by reveal.js and changed only when the width does (a turn of the phone),
 * so no band, Edge or picture resizes while scrolling, whatever a browser
 * does with svh; without the script, svh. */

/* Laptops (owner, 26 Oct 2026: on a 14-inch MacBook Pro most sections ran
 * taller than the screen): a wide screen no taller than 1000 px keeps every
 * band to about one screen. Less air between and inside the bands, and the
 * Edges beside the words sized by the screen's height, whole on it. */
@media (min-width: 1024px) and (max-height: 1000px) {
  .n-sec { padding-block: 72px; }
  .n-glance-sec { padding-block: 0; }
  .n-setup-sec, #features, #slots { padding-bottom: 0; }
  .n-setup-sec + .n-dark, .n-setup-sec + .n-dark .n-wrap { padding-top: 64px; }
  .n-glance__copy { padding-block: 64px; }
  .n-feat__steps { margin-top: 28px; padding-bottom: 72px; }
  .n-feat__steps button { padding: 14px 0; }
  .n-feat--slots .n-models { margin-bottom: 72px; }
  .n-feat__edge { width: min(100%, 580px, calc((100vh - 120px) * 0.84)); }
  .n-sizes { margin-top: 40px; }
  .n-sizes { max-width: calc((100vh - 330px) * 2); margin-inline: auto; }
}

/* Japanese (26 Oct 2026): no spaces between words, so a line may otherwise
 * break inside one ("ワー|クアウト"). auto-phrase breaks between phrases where
 * the browser knows how (Chrome); others keep their default. */
:lang(ja) { word-break: auto-phrase; line-break: strict; }