/* Right2Rest preview — site.css
   One stylesheet, organised so each block maps to one future Shopify section:
   1 tokens · 2 base · 3 layout · 4 components · 5 header/footer · 6 sections · 7 motion */

/* ---------- 1. tokens ---------- */
@font-face { font-family: "MonoSpec"; src: url("fonts/MonoSpecStencil-Variable.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  /* After Light App tokens (owner 2026-11-03, docs/07; source: V3 docs/v3/04 and app/globals.css). One page colour, no section alternation. */
  --bg: #121214;            /* page */
  --bg-2: #121214;
  --card: #19191c;          /* card / control */
  --card-display: #151518;  /* grouped / info card */
  --card-line: #2b2b30;     /* card border, divider inside a card */
  --raised: #1c1c1f;        /* input, selected segment */
  --groove: #141416;        /* segmented-control groove */
  --stage: #000;            /* media stage (App .nightCard outline and shadow; fill pure black like the App's --surface-media, because the renders, video and 3D are pure black and #050506 showed their edges) */
  --stage-line: #26262a;
  --text: #f2f2ef;
  --body: #d2d2d6;
  --sec: #a0a0a6;
  --quiet: #929298;
  --line: #2a2a2e;          /* page dividers */
  --line-2: #35353a;        /* control border */
  --chev: #6a6a70;
  --mint: #9ff5e8;
  --lavender: #c9b9ff;
  --shadow-card: 0 6px 14px rgba(0,0,0,.28);
  --shadow-ctrl: 0 3px 8px rgba(0,0,0,.4);
  --shadow-stage: 0 28px 58px rgba(0,0,0,.62), 0 8px 18px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045);
  /* Three fixed layouts, after apple.com: small <= 734, medium 735-1068, large >= 1069. Values step per breakpoint; nothing is fluid. */
  --content: 87.5%; --narrow: 87.5%;
  --fs-hero: 34px; --fs-sec: 28px; --fs-md: 24px; --fs-sm: 20px; --fs-lead: 17px; --fs-intro: 24px; --fs-stat: 30px; --fs-step: 24px; --fs-step-num: 56px; --fs-cardh: 20px; --fs-prose: 24px;
  --pad: 72px; --pad-t: 48px; --pad-band: 24px; --pad-hero: 40px; --pad-intro: 64px; --pad-step: 40px; --pad-prose: 36px;
  --gap-split: 32px; --card-pad: 22px; --gap-pair: 12px; --slide-w: 80vw; --fc-w: 78vw; --modal-w: 92vw;
  --header-h: 56px;
  --radius: 20px;      /* every card */
  --radius-sm: 14px;   /* controls (small buttons use 12) */
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: "MonoSpec", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ui: "MonoSpec", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 735px) {
  :root {
    --content: calc(100% - 96px); --narrow: 692px;   /* owner 2026-11-03: cards and pictures looked small; text stays at --narrow */
    --fs-hero: 46px; --fs-sec: 36px; --fs-md: 28px; --fs-sm: 21px; --fs-lead: 19px; --fs-intro: 30px; --fs-stat: 34px; --fs-step: 28px; --fs-step-num: 80px; --fs-cardh: 20px; --fs-prose: 28px;
    --pad: 96px; --pad-t: 64px; --pad-band: 32px; --pad-hero: 48px; --pad-intro: 88px; --pad-step: 64px; --pad-prose: 48px;
    --gap-split: 48px; --card-pad: 28px; --gap-pair: 20px; --slide-w: 760px; --fc-w: 280px; --modal-w: 640px;
  }
}
@media (min-width: 1069px) {
  :root {
    --content: 1200px; --narrow: 692px;
    --fs-hero: 56px; --fs-sec: 42px; --fs-md: 32px; --fs-sm: 22px; --fs-lead: 21px; --fs-intro: 36px; --fs-stat: 30px; --fs-step: 34px; --fs-step-num: 112px; --fs-cardh: 20px; --fs-prose: 32px;
    --pad: 128px; --pad-t: 80px; --pad-band: 40px; --pad-hero: 56px; --pad-intro: 120px; --pad-step: 88px; --pad-prose: 56px;
    --gap-split: 72px; --card-pad: 32px; --gap-pair: 28px; --slide-w: 1040px; --fc-w: 296px; --modal-w: 860px;
  }
}
/* Chinese: system fonts only (owner 2026-10-28). */
html:lang(zh) {
  /* owner 2026-11-03: English in the Chinese pages also uses the Stencil face; MonoSpec has no CJK glyphs, so Chinese
     characters and full-width punctuation fall through to PingFang */
  --font-display: "MonoSpec", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-ui: "MonoSpec", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html.has-localbar { scroll-padding-top: calc(var(--header-h) + 64px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--body); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 12px; font: 500 14px var(--font-ui); text-decoration: none; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }

/* ---------- 3. layout ---------- */
.wrap { width: var(--content); margin-inline: auto; }
.wrap--narrow { width: var(--narrow); }
.sec { position: relative; padding-block: var(--pad); }
.sec--tight { padding-block: var(--pad-t); }
.sec--line { border-top: 1px solid var(--line); }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
.stack > * + * { margin-top: 20px; }

.split { display: grid; gap: var(--gap-split); align-items: center; }
@media (min-width: 735px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > :first-child { order: 2; }
  .split--wide-media { grid-template-columns: 5fr 7fr; }
  .split--wide-media.split--flip { grid-template-columns: 7fr 5fr; }
}
.grid { display: grid; gap: 16px; }
@media (min-width: 735px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 4. components ---------- */
.eyebrow { font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--sec); margin-bottom: 18px; }
html:lang(zh) .eyebrow { letter-spacing: .08em; font-size: 12px; }

.display { font: 500 var(--fs-sec)/1.2 var(--font-display); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.display--xl { font-size: var(--fs-hero); line-height: 1.2; }
.display--md { font-size: var(--fs-md); }
.display--sm { font-size: var(--fs-sm); letter-spacing: -.02em; line-height: 1.2; }
html:lang(zh) .display { font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--body); max-width: 34em; margin-top: 22px; text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.55; color: var(--sec); }
.fine { font-size: 13px; line-height: 1.55; color: var(--quiet); }
.mono { font-family: var(--font-ui); }
.tag { display: inline-block; font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 11px; }
.dot { color: var(--mint); }

/* Buttons follow the After Light app's shared Button (V3 doc 16 §4.3, owner 2026-10-28):
   45 px tall, 14 px corners, neutral dark fill, hairline border, body text in the reading font,
   sentence case. The main action uses the app's tone-orange frame (the colour of STILL's light). */
.btn { --btn-rgb: 210,210,214; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--body); font: 500 15px/1 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: var(--shadow-ctrl); transition: border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease); }
/* coloured buttons take the colour of the page's light (owner 2026-11-05): --accent-rgb is the light shown on the first
   screen — the home page's Welcome colour (fx.js), the STILL page's warm entrance light, the After Light page's blue sphere.
   App rule: the colour sits only in the border (.28) and a faint fill (.045); the text stays neutral. Never white. */
:root { --accent-rgb: 255,210,184; }
html:has(.hero-al) { --accent-rgb: 184,220,255; }
html:has(body[data-page="why"]) { --accent-rgb: 201,185,255; }   /* owner 2026-11-03: About buttons purple, the About nav colour */
.btn:not(.btn--ghost) { border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.045); transition: border-color .3s, background .3s; }
.btn:hover { border-color: #45454b; }
.btn:not(.btn--ghost):hover { border-color: rgba(var(--accent-rgb),.45); }
.btn:active { transform: scale(.97); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn--ghost { color: var(--body); }
/* Navigation button (docs/19 B, 2026-11-04): a link to another page or section, drawn as the App's neutral Button — surface #19191C,
   1 px --border-strong #45454B, text colour, 14 px corners, 45 px tall, control shadow; inside a card no shadow (App shadow matrix).
   Press: .97 and a brighter edge, the fill stays. No arrow. Mapping: preview/README.md "Site ↔ App components". */
.btn-nav { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 20px; border: 1px solid #45454b; border-radius: 14px; background: var(--card); color: var(--text); font: 500 15px/1.2 var(--font-body); letter-spacing: 0; text-decoration: none; box-shadow: var(--shadow-ctrl); cursor: pointer; transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.btn-nav:hover { border-color: rgba(255,255,255,.32); }
.btn-nav:active { transform: scale(.97); border-color: rgba(255,255,255,.52); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition-duration: .08s; }
.btn-nav:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
:is(.qcard, .buy-facts, .card) .btn-nav, :is(.qcard, .buy-facts, .card) .btn-nav:active { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn-nav { transition: none; } }
.btn--sm { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 13px; box-shadow: none; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .32; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.center .btn-row { justify-content: center; }
.textlink { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); }

.card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--card-pad); }
.card h3 { font: 500 20px/1.2 var(--font-display); color: var(--text); letter-spacing: -.015em; }
html:lang(zh) .card h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; font-size: 19px; }
.card p { margin-top: 12px; font-size: 15.5px; color: var(--body); }
.card .num { display: block; font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; color: var(--sec); margin-bottom: 18px; }

.frame { position: relative; overflow: hidden; }   /* material: section 15 */
.frame > img, .frame > video { width: 100%; height: auto; }
.frame--5x4 { aspect-ratio: 5 / 4; }
.frame--5x4 > img, .frame--5x4 > video { height: 100%; object-fit: cover; }
.frame--bare { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.media-blend { mix-blend-mode: lighten; }
.render { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.figcap { margin-top: 12px; font-size: 13px; color: var(--quiet); }
/* phone: one reusable pattern for every After Light screen (Shopify snippet r2r-phone). Image is a transparent WebP that already contains the device frame. */
.phone { margin: 0 auto; width: min(100%, 300px); }
.phone img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 36px rgba(0,0,0,.5)); }
.phone-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-pair); align-items: start; max-width: 520px; margin-inline: auto; }
.phone-pair .phone { width: 100%; }
.media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec--tech .media-pair { margin-top: 32px; }
.media-duo { display: grid; gap: var(--gap-split); align-items: center; justify-items: center; margin-top: 40px; }
@media (min-width: 735px) { .media-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-duo .slot { width: 100%; } .media-duo .phone--crop { width: 100%; } }

/* slot: placeholder for an image still to be made. Preview scaffolding only; replace the whole figure with an <img> or <video> frame. */
.slot { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; width: 100%; aspect-ratio: 4 / 3; padding: 20px; border: 1px dashed var(--line-2); border-radius: var(--r-media); background: var(--stage); }
.slot-tag { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
.slot p { margin: 0; max-width: 24em; font-size: 14px; line-height: 1.5; color: var(--quiet); }
html:lang(zh) .slot-tag { letter-spacing: .08em; }
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--5x4 { aspect-ratio: 5 / 4; }
.slot--4x5 { aspect-ratio: 4 / 5; }
.slot--1x1 { aspect-ratio: 1 / 1; }
.slot--wide { aspect-ratio: 16 / 9; }
@media (min-width: 735px) { .slot--wide { aspect-ratio: 21 / 9; } }
.slot--after { margin-top: 12px; }
.sec--band { padding-block: var(--pad-band); }

/* facts / pills row */
.facts { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.facts > div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.facts dt { color: var(--sec); }
.facts dd { color: var(--text); text-align: right; }
.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; font-size: 16px; color: var(--body); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 10px; height: 1px; background: var(--sec); }
.ticks--no li::before { width: 10px; transform: rotate(0); background: var(--quiet); }

.shared { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 735px) { .shared { grid-template-columns: 1fr 1fr; } }
.shared .card h3 { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--sec); font-family: var(--font-ui); }
html:lang(zh) .shared .card h3 { font-size: 12px; letter-spacing: .08em; }
.shared .ticks { margin-top: 18px; }
.shared .card--never .ticks li::before { background: var(--quiet); }

/* accordion (details/summary — no JS needed) */
/* FAQ = an App grouped card of folding rows: #151518, 1px #2b2b30, 20 px corners, card shadow; rows split by 1px lines 20 px in, none after the last;
   the chevron points right and turns 90 deg down when the row opens (DS 9.4 / 9.5) */
.faq { margin-top: 32px; background: var(--card-display); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.faq details { margin-inline: 20px; }
.faq details + details { border-top: 1px solid var(--card-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font: 500 18px/1.35 var(--font-body); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1px solid var(--chev); border-bottom: 1px solid var(--chev); transform: rotate(-45deg); transition: transform .3s var(--ease), border-color .2s; }
.faq summary:hover::after { border-color: var(--sec); }
.faq details[open] summary::after { transform: rotate(45deg); border-color: var(--text); }
.faq .ans { padding: 0 28px 22px 0; color: var(--body); font-size: 16px; }
.faq .ans p + p { margin-top: 12px; }

/* forms */
.field { display: grid; gap: 8px; }
.field label, .legend { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
html:lang(zh) .field label, html:lang(zh) .legend { letter-spacing: .08em; font-size: 12px; }
.select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 46px; padding: 0 44px 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236a6a70' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 16px center; color: var(--text); font: 400 16px var(--font-body); }
.select:focus-visible { outline-offset: 2px; border-color: rgba(242,242,239,.55); }

.choice { display: grid; gap: 0; margin: 0; padding: 0; min-width: 0; background: var(--card-display); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.choice label { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; margin-inline: 20px; padding: 14px 0; cursor: pointer; color: var(--text); font-size: 16px; font-weight: 500; line-height: 1.35; }
.choice label + label { border-top: 1px solid var(--card-line); }
.choice label > span { flex: 1; min-width: 0; }
.choice label::after { content: ""; flex: none; width: 16px; height: 16px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f2f2ef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity .2s var(--ease); }
.choice label:has(input:checked)::after { opacity: 1; }
.choice input { position: absolute; top: 0; bottom: 0; left: -20px; width: calc(100% + 40px); height: 100%; margin: 0; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.choice label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
.choice small { display: block; color: var(--sec); font-size: 13px; margin-top: 2px; }

/* tables */
.table-wrap { overflow-x: auto; margin-top: 36px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card-display); box-shadow: var(--shadow-card); }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.table th, .table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-line); }
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }
.table thead th { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
.table tbody th { font-weight: 500; color: var(--text); width: 34%; }
.table td { color: var(--body); }
.table .yes { color: var(--text); }

.notice { position: relative; padding-left: 26px; font-size: 13px; line-height: 1.6; color: var(--quiet); }
.notice::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23929298' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 7.2v4M8 4.9v.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.notice strong { display: block; margin-bottom: 2px; color: var(--sec); font-size: 13px; font-weight: 600; line-height: 1.5; }
.placeholder { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 18px 20px; color: var(--sec); font-size: 15px; }

/* ---------- 5. header / footer ---------- */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); background: rgba(18,18,20,.78); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex: none; color: var(--text); }
.brand svg { height: 15px; width: auto; }
.nav { display: none; align-items: center; gap: 26px; margin-left: 8px; }
.nav a { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--sec); padding: 8px 0; border-bottom: 1px solid transparent; transition: color .2s var(--ease); }
html:lang(zh) .nav a { font-size: 14px; letter-spacing: .08em; text-transform: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
/* owner 2026-11-04: the current page's underline is white on every nav item (it was each item's own colour) */
.nav a[aria-current="page"] { border-bottom-color: var(--text); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; align-items: center; font: 500 12px/1.2 var(--font-ui); }
.lang button { background: none; border: 0; padding: 8px 5px; color: var(--quiet); letter-spacing: .08em; min-height: 32px; }
html:lang(zh) .lang button { font-family: var(--font-ui); }
.lang button[aria-pressed="true"] { color: var(--text); }
.lang span { color: var(--line-2); }
.menu-btn { display: inline-grid; place-content: center; gap: 5px; width: 38px; height: 38px; background: none; border: 0; padding: 0; }
.menu-btn i { display: block; width: 20px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-nav { position: fixed; z-index: 55; inset: var(--header-h) 0 auto 0; max-height: calc(100vh - var(--header-h)); overflow: auto; background: rgba(18,18,20,.97); border-bottom: 1px solid var(--line); padding: 8px calc((100% - var(--content)) / 2) 28px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; }
.mobile-nav.open { opacity: 1; transform: none; visibility: visible; }
.mobile-nav a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font: 500 22px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); text-decoration: none; }
html:lang(zh) .mobile-nav a { letter-spacing: 0; }
@media (min-width: 1069px) { .nav { display: flex; } .menu-btn, .mobile-nav { display: none; } }
@media (max-width: 1068px) { .hdr-right .btn--sm { padding: 0 14px; } .site-header .wrap { gap: 12px; } }
@media (max-width: 380px) { .hdr-right { gap: 6px; } .lang button { padding: 8px 4px; } }

.site-footer { border-top: 1px solid var(--line); padding: 72px 0 40px; background: var(--bg); }
.foot-grid { display: grid; gap: 40px; }
@media (min-width: 735px) { .foot-grid { grid-template-columns: repeat(3, 1fr); } .foot-grid > div:first-child { grid-column: 1 / -1; } }
@media (min-width: 1069px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .foot-grid > div:first-child { grid-column: auto; } }
.site-footer .brand svg { height: 17px; }
.foot-about { margin-top: 18px; max-width: 26em; font-size: 14px; color: var(--sec); }
.foot-col summary { list-style: none; cursor: default; }
.foot-col summary::-webkit-details-marker { display: none; }
.foot-col h4 { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); margin-bottom: 16px; }
html:lang(zh) .foot-col h4 { font-size: 12px; letter-spacing: .08em; }
.foot-col a { display: block; padding: 6px 0; font-size: 14.5px; color: var(--body); text-decoration: none; }
.foot-col a:hover { color: var(--text); text-decoration: underline; }
.foot-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; font-size: 13px; color: var(--quiet); }
.foot-base p { max-width: 46em; }

/* ---------- 6. sections ---------- */
/* hero */
.page-hero { padding-top: var(--pad-t); padding-bottom: var(--pad-band); }

/* product / buy */
.buy-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1069px) { .buy-grid { grid-template-columns: 7fr 5fr; gap: 56px; } .buy-info { position: sticky; top: calc(var(--header-h) + 32px); } }
.gallery-main { overflow: hidden; aspect-ratio: 4 / 3; }   /* material: section 15 */
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.thumbs button { padding: 0; border: 1px solid var(--stage-line); border-radius: 12px; overflow: hidden; background: var(--stage); aspect-ratio: 4 / 3; opacity: .6; transition: opacity .2s, border-color .2s; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button[aria-current="true"] { opacity: 1; border-color: rgba(var(--accent-rgb),.52); }   /* owner 2026-11-04: the light colour */
/* owner 2026-11-04: the gallery has no hover effect (the main image no longer tilts either; fx.js) */
.price { margin-top: 14px; font: 500 22px/1.2 var(--font-display); color: var(--text); letter-spacing: -.01em; }
html:lang(zh) .price { letter-spacing: 0; }
.plus-line { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; color: var(--lavender); font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }   /* the App's PLUS mark: lavender mono 11, no dot, no glow */
html:lang(zh) .plus-line { font-size: 12px; letter-spacing: .08em; text-transform: none; }
.buy-info .choice { margin-top: 32px; }
.buy-info .btn--block { margin-top: 20px; }
.buy-info .notes { margin-top: 24px; display: grid; gap: 8px; }
.buy-info .notes p { font-size: 14px; color: var(--sec); }

/* box contents */
.boxlist { margin-top: 28px; counter-reset: box; display: grid; gap: 0; border-top: 1px solid var(--line); }
.boxlist li { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 16px; }
.boxlist li b { flex: none; width: 24px; font: 500 13px/1.2 var(--font-ui); color: var(--sec); }
.boxlist small { display: block; color: var(--sec); font-size: 14px; }

/* steps */
.step { display: grid; gap: 28px; align-items: center; padding-block: var(--pad-step); border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; }
@media (min-width: 735px) { .step { grid-template-columns: 1fr 1fr; gap: var(--gap-split); } .step--rev > .step-text { order: 2; } }
.step > * { min-width: 0; }
.step-num { font: 500 22px/1.2 var(--font-display); color: var(--text); letter-spacing: 0; margin-bottom: 12px; }   /* App step number: mono 22 / 500 / text colour, no box (DS 7.x) */
html:lang(zh) .step-num { font-family: var(--font-display); }
.step h3, .scrub h3 { font: 500 var(--fs-step)/1.2 var(--font-display); color: var(--text); letter-spacing: -.025em; }
html:lang(zh) .step h3, html:lang(zh) .scrub h3 { letter-spacing: 0; line-height: 1.25; }
.step p, .scrub p { margin-top: 16px; font-size: 17px; max-width: 30em; }
.step .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step-list { margin-top: 18px; display: grid; gap: 10px; max-width: 30em; }
.step-list li { position: relative; padding-left: 22px; font-size: 16px; }
.step-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--sec); }
.steps3 { margin-top: 40px; }
.steps3 .card .num { font-size: 11px; }
.steps3 .phone-thumb { position: relative; aspect-ratio: 5 / 4; margin-bottom: 20px; border-radius: 12px; background: var(--stage); overflow: hidden; }
.steps3 .phone-thumb .phone { position: absolute; inset: 10px 0; width: auto; }
.steps3 .phone-thumb img { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 100%; width: auto; max-width: none; margin: 0; border-radius: 0; background: none; aspect-ratio: auto; object-fit: contain; filter: none; }
.steps3 img { border-radius: 12px; margin-bottom: 20px; aspect-ratio: 5/4; object-fit: cover; width: 100%; background: var(--stage); }

/* checker */
.checker { margin-top: 36px; display: grid; gap: 20px; }
@media (min-width: 735px) { .checker { grid-template-columns: 1fr 1fr; } .checker .result { grid-column: 1 / -1; } }
.result { border: 1px solid var(--card-line); border-radius: var(--radius); padding: var(--card-pad); background: var(--card); box-shadow: var(--shadow-card); min-height: 120px; }
.result h3 { font: 500 var(--fs-sm)/1.2 var(--font-display); color: var(--text); letter-spacing: -.02em; }
html:lang(zh) .result h3 { letter-spacing: 0; }
.result p { margin-top: 12px; font-size: 16px; }
.result[data-state="works"] { border-color: rgba(159,245,232,.28); background: rgba(159,245,232,.045); }   /* App coloured frame: same-colour .28 border + .045 fill, no glow */
.result .btn-row { margin-top: 20px; }

/* membership */
.plans { margin-top: 36px; display: grid; gap: 16px; }
@media (min-width: 735px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan h3 { font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--sec); }
html:lang(zh) .plan h3 { font-family: var(--font-ui); font-size: 15px; letter-spacing: .08em; }
.plan .plan-price { margin-top: 18px; font: 500 28px/1.2 var(--font-display); color: var(--text); letter-spacing: -.02em; }
html:lang(zh) .plan .plan-price { letter-spacing: 0; font-size: 26px; }
.plan .plan-price small { font: 400 15px var(--font-body); color: var(--sec); letter-spacing: 0; }

/* CTA band */
.sec--cta { text-align: center; border-top: 1px solid var(--line); }
.sec--cta .lead { margin-inline: auto; }

/* sticky buy bar */
.buybar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: rgba(18,18,20,.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .45s var(--ease); }
.buybar.show { transform: none; }
.buybar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buybar b { display: block; font: 500 15px/1.2 var(--font-display); color: var(--text); letter-spacing: .02em; }
html:lang(zh) .buybar b { font-family: var(--font-display); }
.buybar span { font-size: 13px; color: var(--sec); }

/* drawer */
.scrim { position: fixed; z-index: 80; inset: 0; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--bg); border: 1px solid #37373c; border-right: 0; border-radius: 28px 0 0 28px; overflow: hidden; display: flex; flex-direction: column; transform: translateX(104%); transition: transform .4s var(--ease); visibility: hidden; }   /* App floating layer: page colour, 28 px corners, #37373c edge */
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--sec); }
html:lang(zh) .drawer-head h2 { font-size: 12px; letter-spacing: .08em; }   /* the same label level as the page's other Chinese labels (owner 2026-11-04) */
.drawer-close { width: 40px; height: 40px; background: none; border: 0; position: relative; }
.drawer-close::before, .drawer-close::after { content: ""; position: absolute; left: 10px; right: 10px; top: 19px; height: 1.5px; background: var(--text); transform: rotate(45deg); }
.drawer-close::after { transform: rotate(-45deg); }
.drawer-body { flex: 1; overflow: auto; padding: 24px; }
.line-item { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.line-item img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--stage); border: 1px solid var(--stage-line); }
.line-item b { font: 500 18px/1.2 var(--font-display); color: var(--text); }
html:lang(zh) .line-item b { font-family: var(--font-display); font-weight: 600; }
.line-item p { font-size: 14px; color: var(--sec); margin-top: 4px; }
.drawer-sum { margin-top: 28px; background: var(--card-display); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.drawer-sum > div { display: flex; justify-content: space-between; gap: 16px; margin-inline: 20px; padding: 16px 0; font-size: 15px; }
.drawer-sum > div + div { border-top: 1px solid var(--card-line); }
.drawer-sum dt { color: var(--sec); } .drawer-sum dd { color: var(--text); text-align: right; }
.drawer-foot { padding: 20px 24px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 14px; }
.drawer-foot p { font-size: 14px; color: var(--sec); text-align: center; }

/* legal / prose */
.prose h2 { font: 500 var(--fs-prose)/1.2 var(--font-display); color: var(--text); letter-spacing: -.025em; margin-top: 8px; }
html:lang(zh) .prose h2 { letter-spacing: 0; }
.prose p { margin-top: 16px; max-width: 38em; }
.prose-block { padding-block: var(--pad-prose); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose-block:first-of-type { border-top: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.toc a { text-decoration: none; }

/* ---------- 7. motion ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 8. small-screen adjustments ---------- */
@media (max-width: 559px) {
  .step .pair, .media-pair { grid-template-columns: 1fr; }
  .facts > div { flex-direction: column; gap: 4px; }
  .facts dd { text-align: left; }
  .buybar span { display: none; }
  .table th, .table td { padding: 14px 16px; }
}

/* ---------- 9. depth and motion (fx.js, sphere.js) ---------- */
/* Everything here is decoration over a complete static layout; reduced motion turns the movement off. */


/* hero: the app's "My STILL" entrance clip (4 s, plays once, holds its last frame), then the text fades in around the device.
   small: slogan, clip (full-bleed, 5:4 crop of the square clip), then lead, price, buttons. medium: same, clip 4:3 sized to leave room for the text.
   large: the clip fills the viewport height; headline in the dark above STILL, lead bottom-left and price + Buy bottom-right in the dark below it.
   Without .hero-play (seen this session, reduced motion, failed video) the end frame and the text are simply there. */
.hero-v { position: relative; overflow: hidden; background: var(--stage);   /* owner 2026-11-03: a hard edge to the page, no fade */ padding: var(--pad-hero) 0 40px; text-align: center; }
.hero-v-frame { display: flex; flex-direction: column; }
.hero-v-top, .hero-v-bottom { width: var(--content); margin-inline: auto; position: relative; z-index: 2; }
.hero-v-top .display { margin-top: 0; text-wrap: balance; }
.hero-v-top .lead, .hero-v-bottom .lead { margin-inline: auto; }
.hero-v-media { position: relative; width: 100%; aspect-ratio: 5 / 4; margin: 20px 0 8px; background: var(--stage); }
.hero-v-media img, .hero-v-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.hero-v-media video { opacity: 0; transition: opacity .4s; }
.hero-v.is-playing .hero-v-media video { opacity: 1; }
.hero-v-end { transition: opacity .6s; }
.hero-v-buy .price { margin: 0; }
.hero-v-buy .btn-row { justify-content: center; margin-top: 20px; }
.hero-v-bottom .lead { margin-top: 0; }
.hero-v-bottom .hero-v-buy { margin-top: 20px; }
.hero-skip { position: absolute; z-index: 4; right: max(16px, calc((100% - var(--content)) / 2)); top: 14px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(0,0,0,.4); color: var(--sec); font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
html:lang(zh) .hero-skip { font-size: 12px; letter-spacing: .08em; }
.hero-skip:hover { color: var(--text); border-color: var(--sec); }
.hero-v.is-playing .hero-skip { opacity: 1; visibility: visible; }
/* the entrance is going to play: text and end frame wait (visually only; they stay in the DOM) */
.hero-play .hero-v:not(.is-in) .hero-text { opacity: 0; transform: translateY(12px); }
.hero-v .hero-text { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero-play .hero-v:not(.is-end) .hero-v-end { opacity: 0; }
@keyframes heroSafe { to { opacity: 1; transform: none; } }
.hero-play .hero-v:not(.is-in) .hero-text, .hero-play .hero-v:not(.is-end) .hero-v-end { animation: heroSafe .01s 8s forwards; }   /* never stays hidden if the script fails */
@media (min-width: 735px) {
  .hero-v-media { width: min(100%, calc((100svh - var(--header-h) - 340px) * 1.3333)); min-width: min(100%, 440px); aspect-ratio: 4 / 3; margin-inline: auto; }
}
@media (min-width: 1069px) {
  .hero-v { padding: 0; height: calc(100svh - var(--header-h)); min-height: 560px; display: grid; place-items: center; background: var(--stage); }
  .hero-v::after { content: none; }   /* owner 2026-11-03: hard edge, no fade into the page */
  .hero-v-frame { position: relative; display: block; width: min(100%, calc((100svh - var(--header-h)) * 1.3333)); max-height: 100%; aspect-ratio: 4 / 3; }
  .hero-v-media { position: absolute; inset: 0; width: 100%; min-width: 0; aspect-ratio: auto; margin: 0; }
  .hero-v-top { position: absolute; left: 0; right: 0; top: 5%; width: auto; }
  .hero-v-top .display { max-width: 13em; margin-inline: auto; }
  .hero-v-bottom { position: absolute; left: 6%; right: 6%; bottom: calc(3% + 56px);   /* owner 2026-11-04: every hero's bottom row lifted alike */
    width: auto; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; text-align: left; }
  .hero-v-bottom .lead { margin: 0; max-width: 22em; }
  .hero-v-bottom .hero-v-buy { margin-top: 0; text-align: right; }
  .hero-v-bottom .btn-row { justify-content: flex-end; margin-top: 14px; }
}
@media (min-width: 735px) and (max-width: 1068px) and (max-height: 820px) { .hero-v { padding-top: 24px; padding-bottom: 24px; } .hero-v-media { width: min(100%, calc((100svh - var(--header-h) - 400px) * 1.3333)); margin-block: 14px 4px; } }

/* STILL page hero (owner 2026-11-03): the home layout (title over STILL, sentence bottom left, price + Buy bottom right),
   with a larger title and STILL raised closer to the top bar */
.hero-v--still .hero-v-top .display { font-size: calc(var(--fs-hero) * 1.1); }
/* owner 2026-11-03: as in the App (DS 8.4 two-layer title, .eyebrow): small label on top, big title below, one left edge; label in the
   body colour like the App's AFTER LIGHT top-bar eyebrow (STILL only);
   the slogan takes the size the STILL title had, the name takes the App's eyebrow style scaled up */
/* ratios measured on the App's Now header (eyebrow 11 / title 43 / 10 px between, title -.045em, line-height 1.2); --ht = this hero's title size */
.hero-v--still { --ht: calc(var(--fs-hero) * 1.1); }
.hero-w { --ht: var(--fs-hero); }
.hero-v-group { display: inline-block; max-width: 100%; text-align: left; }   /* label and title share one left edge; the group centres on small screens */
.hero-kicker { margin: 0; font: 500 max(11px, calc(var(--ht) * .256))/1.2 var(--font-ui); letter-spacing: .15em; color: var(--body); }
.hero-kicker + .display { margin-top: calc(var(--ht) * .233); }
.hero-slogan { font: 500 var(--ht)/1.2 var(--font-display); letter-spacing: -.045em; color: var(--text); text-align: left; }
html:lang(zh) .hero-slogan { letter-spacing: 0; }
@media (min-width: 1069px) { .hero-v--still .hero-v-top { top: 6%; } }   /* STILL and After Light: same title size and place */
@media (max-width: 734px) { .hero-v--still .hero-v-buy { flex-wrap: wrap; gap: 12px 16px; } .hero-v--still .hero-v-buy .small { flex-basis: 100%; margin: 0; } .hero-v--still .hero-v-buy .btn { white-space: nowrap; } }

/* After Light page hero (owner 2026-11-03: same format as the STILL page, a perfectly round dot sphere turning in the middle) */
.hero-al-media { display: grid; place-items: center; }
.hero-al .hero-v-buy { flex-wrap: wrap; gap: 12px 16px; }
.hero-al .hero-v-buy .small { flex-basis: 100%; margin: 0; }
@media (min-width: 1069px) { .hero-al .hero-v-buy { justify-content: flex-end; max-width: 440px; margin-left: auto; } .hero-al .hero-v-buy .small { text-align: right; } }
.hero-al-sphere { width: min(78%, 46svh); aspect-ratio: 1; height: auto; display: block; }
@media (min-width: 1069px) { .hero-al-sphere { width: min(56%, 52svh); } }

/* After Light hero entrance (owner 2026-11-04): first only the turning sphere (with the App's soft floor glow under it);
   then it builds the App's Now card round it — the phone card exactly (.nightCard, 350 x 540, copy top-left, sphere stage at
   7% / 92 px / 86%, foot at the bottom), scaled up by --k — and the sphere settles into the card's sphere stage; the title,
   sentence and button come last. It plays by itself on arrival, like the STILL page's clip (owner 2026-11-04: not on scroll).
   fx.js adds .al-live and drives --co / --cs (card), --to (card text), --ho (hero text),
   --k (card size for the screen). Without JS or with reduced motion: the turning sphere and the text, no card. */
.al-card, .al-floor { display: none; }
/* trial (owner 2026-11-04: the card looked more crowded than the STILL page): no card frame or card text — the sphere stays
   where it is and only the title and text come in. Remove the next line to bring the card back. */
.al-live .al-card { display: none !important; }
.al-live .al-card { position: absolute; z-index: 1; left: 50%; top: var(--cy, calc(50% + 30px)); display: block; width: 350px; height: 540px; border: 1px solid #26262a; border-radius: 28px; background: #050506; box-shadow: 0 28px 58px rgba(0,0,0,.62), 0 8px 18px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045); text-align: left; opacity: var(--co, 0); transform: translate(-50%, -50%) scale(calc(var(--k, 1) * var(--cs, .92))); }
.al-card-copy { position: absolute; left: 25px; right: 25px; top: 27px; opacity: var(--to, 0); }
.al-card-copy .eyebrow { margin: 0 0 8px; color: var(--quiet); }
.al-card-copy h2 { margin: 0; font: 500 28px/1.05 var(--font-display); text-transform: uppercase; color: var(--text); }
.al-card-slot { position: absolute; left: 7%; top: 92px; width: 86%; aspect-ratio: 1; }
.al-card-foot { position: absolute; left: 25px; right: 25px; bottom: 25px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; opacity: var(--to, 0); }
.al-card-foot p { margin: 0; max-width: 225px; font-size: 12px; line-height: 1.52; color: var(--sec); }
.al-card-link { min-height: 44px; padding: 12px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border: 1px solid #323237; border-radius: 14px; background: #171719; color: var(--text); font-size: 12px; box-shadow: 0 9px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.055); }
.al-card-link svg { width: 14px; height: 14px; fill: none; stroke: #6a6a70; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.al-live .hero-al-sphere { position: relative; z-index: 2; transform-origin: 50% 50%; will-change: transform; }
/* the App's floor glow under the sphere (heroSphereStage::before / ::after), moving with it */
.al-live .al-floor { display: block; position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.al-floor::before, .al-floor::after { content: ""; position: absolute; left: 0; border-radius: 50%; transform: translateX(-50%); }
.al-floor::before { width: var(--fw, 300px); height: calc(var(--fw, 300px) * .04); top: 0; background: radial-gradient(ellipse at center, rgba(184,220,255,.42), rgba(184,220,255,.12) 58%, transparent 82%); filter: blur(10px); }
.al-floor::after { width: calc(var(--fw, 300px) * .46); height: 4px; top: 2px; background: radial-gradient(ellipse at center, rgba(184,220,255,.34), transparent 75%); filter: blur(2px); }
.al-live .hero-al .hero-text { opacity: var(--ho, 0); transform: none; transition: none; }
.al-mark { position: absolute; z-index: 3; pointer-events: none; }
@media (max-width: 1068px) { .al-live .hero-al { height: max(calc(100svh - var(--header-h)), 680px); overflow: hidden; } .al-live .hero-al .hero-v-frame { height: 100%; } .al-live .hero-al .hero-v-media { flex: 1; aspect-ratio: auto; min-height: 0; display: grid; place-items: center; } .al-live .hero-al .hero-v-bottom { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; } }

/* home hero: the App's Welcome reveal (owner 2026-11-03: home uses the tilted Welcome STILL, the STILL page the entrance clip).
   Square clip, one of the six light colours per visit (fx.js), played once and held on its last frame; full bleed, no frame. */
.hero-w.is-wait .hero-text { opacity: 0; transform: translateY(12px); }
.hero-w-media { position: relative; width: 100%; aspect-ratio: 5 / 4; margin: 20px 0 8px; background: var(--stage); }
.hero-w-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; }
@media (min-width: 735px) { .hero-w-media { width: min(100%, calc((100svh - var(--header-h) - 340px) * 1.3333)); min-width: min(100%, 440px); aspect-ratio: 4 / 3; margin-inline: auto; } }
@media (min-width: 1069px) { .hero-w-media { position: absolute; inset: 0; width: 100%; min-width: 0; aspect-ratio: auto; margin: 0; } .hero-w-media video { top: 14%; height: 76%; } }   /* owner 2026-11-03: STILL higher; it may overlap the title (the title stays on top, z-index 2) */

/* intro paragraph: grey, key phrases white */
.sec--intro { padding-block: var(--pad-intro); }
.intro { font: 500 var(--fs-intro)/1.3 var(--font-body); letter-spacing: -.02em; color: var(--quiet); text-wrap: pretty; }
.intro em { font-style: normal; color: var(--text); }
html:lang(zh) .intro { letter-spacing: 0; line-height: 1.5; }

/* highlights carousel */
.sec--hl { overflow: hidden; }
.sec--hl h2 { margin-bottom: 28px; }
.hl-track { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: calc((100% - var(--content)) / 2); scroll-padding-inline: calc((100% - var(--content)) / 2); border-radius: var(--r-media); padding-bottom: 40px; margin-bottom: -40px; }   /* bottom room so the stage shadow is not clipped; layout unchanged */
.hl-track::-webkit-scrollbar { display: none; }
.hl-track:focus-visible { outline-offset: -3px; }
.hl-track::after { content: ""; flex: 0 0 1px; }
.hl-slide { position: relative; flex: 0 0 var(--slide-w); aspect-ratio: 4 / 5; scroll-snap-align: start; overflow: hidden; isolation: isolate; }   /* material: section 15 */
@media (min-width: 735px) { .hl-slide { aspect-ratio: 4 / 3; } }
@media (min-width: 1069px) { .hl-slide { aspect-ratio: 16 / 9; } }
.hl-cap { position: absolute; z-index: 3; left: 24px; top: 24px; max-width: min(22em, 70%); }
.hl-cap .eyebrow { margin-bottom: 12px; }
.hl-cap h3 { font: 500 var(--fs-sm)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
html:lang(zh) .hl-cap h3 { font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.hl-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
.hl-slide--img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,5,6,.86) 4%, rgba(5,5,6,0) 62%); }
@media (max-width: 734px) { .hl-slide--img::after { background: linear-gradient(180deg, rgba(5,5,6,.86) 6%, rgba(5,5,6,0) 60%); } }
.hl-slide .phone { position: absolute; z-index: 2; width: min(44%, 270px); right: 8%; top: 22%; margin: 0; }
@media (min-width: 735px) { .hl-slide .phone { width: auto; height: 112%; aspect-ratio: 539 / 1100; top: 30%; right: 9%; } .hl-slide .phone img { height: 100%; width: auto; } .hl-cap { max-width: 52%; } .hl-bg { object-position: 62% 50%; } }
@media (min-width: 1069px) { .hl-slide .phone { height: 122%; top: 17%; right: 12%; } .hl-cap { max-width: 46%; } .hl-bg { object-position: 50% 42%; } }
@media (max-width: 734px) { .hl-slide .phone { right: 50%; transform: translateX(50%); top: 38%; width: min(58%, 240px); } .hl-bg { object-position: 56% 70%; } }
.hl-slide--dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hl-ctrl { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.hl-pills { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--groove); border: 1px solid var(--card-line); box-shadow: inset 0 2px 7px rgba(0,0,0,.5); }
.hl-pill { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.3); overflow: hidden; transition: width .4s var(--ease); }
.hl-pill[aria-current="true"] { width: 44px; }
.hl-pill i { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; }
.hl-pill[aria-current="true"] i { transform: scaleX(1); }
@keyframes hlfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hl-pill.run i { animation: hlfill 5s linear forwards; }
.hl.hold .hl-pill.run i, .hl.off .hl-pill.run i { animation-play-state: paused; }
.hl-pp { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: #171719; box-shadow: var(--shadow-ctrl); transition: background .2s; }
.hl-pp:hover { background: #202024; }
.hl-pp i { position: absolute; left: 50%; top: 50%; width: 12px; height: 14px; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%23f2f2ef' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M3.5 1.5v11M8.5 1.5v11'/%3E%3C/svg%3E") center / contain no-repeat; }   /* 1 px line icons, no heavy bars or solid triangle */
.hl-pp[aria-pressed="true"] i { transform: translate(-42%, -50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%23f2f2ef' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M2 1.5v11l9-5.5z'/%3E%3C/svg%3E"); }

/* scroll story: large = one sticky canvas shared by the beats; small / medium = each beat is a normal section with its own sphere above the text (mounted only while visible) */
.story { position: relative; }
.story-stage { display: none; }
.story-beats { position: relative; z-index: 1; }
.beat { padding-block: var(--pad-t); }
.beat + .beat { border-top: 1px solid var(--line); }
.beat-sphere { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 40svh; margin: 0 0 28px; }
.beat-copy { width: 100%; }
.beat .shared { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
.beat .shared .card { padding: 18px 20px; background: rgba(25,25,28,.72); }
.beat .shared .ticks { margin-top: 12px; gap: 8px; }
@media (min-width: 735px) { .beat-sphere { aspect-ratio: 2 / 1; max-height: 34svh; } .beat .shared { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1069px) {
  .story-stage { display: block; position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); z-index: 0; pointer-events: none; }
  .story-stage canvas { width: 100%; height: 100%; display: block; }
  .story-beats { margin-top: calc(var(--header-h) - 100svh); }
  .beat { min-height: 100svh; display: flex; align-items: center; padding-block: 12vh; border-top: 0; }
  .beat .wrap { width: var(--content); }
  .beat-sphere { display: none; }
  .beat-copy { max-width: 460px; }
  .beat--family .beat-copy { max-width: 520px; }
  .beat .shared { grid-template-columns: 1fr; }
  .beat .shared .card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* stat band */
.sec--stats { border-block: 1px solid var(--line); background: var(--bg-2); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
@media (min-width: 735px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1069px) { .stats { grid-template-columns: repeat(5, 1fr); } }
.stat { display: grid; gap: 8px; align-content: start; }
.stat-num { font: 500 var(--fs-stat)/1.2 "MonoSpec", var(--font-display); letter-spacing: -.03em; color: var(--text); white-space: nowrap; }
html:lang(zh) .stat-num { font-family: "MonoSpec", var(--font-display); font-weight: 400; }
.stat span { font-size: 14.5px; line-height: 1.4; color: var(--sec); }

/* local product bar: large and medium show the links inline; small keeps the name and Buy and folds the links into a chevron disclosure */
.localbar { position: fixed; z-index: 55; top: var(--header-h); left: 0; right: 0; height: 48px; background: rgba(18,18,20,.72); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .3s, visibility .45s; }
.localbar.show { transform: none; opacity: 1; visibility: visible; }
.localbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.localbar-name { font: 500 15px/1.2 "MonoSpec", var(--font-display); letter-spacing: .02em; color: var(--text); }
html:lang(zh) .localbar-name { font-family: var(--font-ui); }
.localbar-right { display: flex; align-items: center; gap: 12px; }
.localbar-links { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; padding: 4px calc((100% - var(--content)) / 2) 12px; background: rgba(18,18,20,.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.localbar.open .localbar-links { display: flex; }
.localbar-links a { font: 500 14px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--body); padding: 16px 0; border-bottom: 1px solid var(--line); }
.localbar-links a:last-child { border-bottom: 0; }
html:lang(zh) .localbar-links a { font-size: 15.5px; letter-spacing: .08em; text-transform: none; }
.localbar-links a:hover, .localbar-links a[aria-current="page"] { color: var(--text); }
.localbar-toggle { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: #171719; box-shadow: var(--shadow-ctrl); }
.localbar-toggle i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--sec); border-bottom: 1px solid var(--sec); transform: translate(-65%, -50%) rotate(-45deg); transition: transform .3s var(--ease), border-color .2s; }   /* chevron points right, turns 90 deg down when open */
.localbar.open .localbar-toggle i { transform: translate(-50%, -65%) rotate(45deg); border-color: var(--text); }
@media (min-width: 735px) {
  .localbar-toggle { display: none; }
  .localbar-links { position: static; display: flex; flex-direction: row; align-items: center; gap: 28px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .localbar-links a { font-size: 11px; padding: 8px 0; border: 0; color: var(--sec); }
  html:lang(zh) .localbar-links a { font-size: 13.5px; }
  .localbar-right { gap: 28px; }
}

/* scrubbed install: large pins the section and scrubs the clips with scroll; small / medium stack each text with its clip, played once in view */
.scrub { padding-block: var(--pad-t); border-top: 1px solid var(--line); }
.scrub-grid { display: flex; flex-direction: column; gap: 24px; }
.scrub-copy, .scrub-frame { display: contents; }
.scrub-text[data-for="0 1"] { order: 1; }
.scrub-frame video:nth-child(1) { order: 2; }
.scrub-frame video:nth-child(2) { order: 3; }
.scrub-text[data-for="2"] { order: 4; margin-top: 24px; }
.scrub-frame video:nth-child(3) { order: 5; }
.scrub-steps { display: none; }
.scrub-frame video { width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 5 / 4; object-fit: cover; }   /* material: section 15 */
.scrub-steps li { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px; transition: color .3s, border-color .3s, background .3s; }
html:lang(zh) .scrub-steps li { font-size: 12px; letter-spacing: .08em; }
.scrub-steps li.done { color: var(--sec); }
.scrub-steps li.on { color: var(--text); background: var(--raised); border-color: #45454b; }
.scrub.is-pinned { padding-block: 0; }
.scrub.is-pinned .scrub-track { height: 380vh; }
.scrub.is-pinned .scrub-stick { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
.scrub.is-pinned .scrub-grid { width: var(--content); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-split); align-items: center; }
.scrub.is-pinned .scrub-copy { display: grid; gap: 22px; }
.scrub.is-pinned .scrub-frame { display: block; position: relative; aspect-ratio: 5 / 4; width: min(100%, calc((100svh - var(--header-h) - 120px) * 1.25)); margin-inline: auto; overflow: hidden; }
.scrub.is-pinned .scrub-text, .scrub.is-pinned .scrub-text[data-for="2"] { order: 0; margin-top: 0; }
.scrub.is-pinned .scrub-copy > .scrub-text { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.scrub.is-pinned .scrub-text.on { opacity: 1; transform: none; pointer-events: auto; }
.scrub.is-pinned .scrub-steps { grid-area: 2 / 1; display: flex; gap: 8px; }
.scrub.is-pinned .scrub-frame video { position: absolute; inset: 0; height: 100%; max-width: none; border: 0; border-radius: 0; opacity: 0; transition: opacity .45s var(--ease); }
.scrub.is-pinned .scrub-frame video.on { opacity: 1; }

body:has(dialog[open]) { overflow: hidden; }

/* small spheres in heroes and bands */
.mini-sphere { width: 180px; height: 180px; margin: 0 auto 8px; display: block; }
.sec--cta { overflow: hidden; }
.sec--cta .wrap { position: relative; }
.sec--cta .btn-row { justify-content: center; }
.cta-sphere { position: absolute; left: 50%; top: 50%; width: min(460px, 92vw); height: min(460px, 92vw); transform: translate(-50%, -50%); opacity: .3; pointer-events: none; z-index: 0; }
.sec--cta .wrap > :not(.cta-sphere) { position: relative; z-index: 1; }

/* depth: layered shadows on phones and renders */
.phone img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 30px 40px rgba(0,0,0,.45)); will-change: transform; }
.hl-slide .phone img { will-change: auto; }
.render { transform-origin: 50% 60%; }

@media (prefers-reduced-motion: reduce) {
  .hl-track { scroll-behavior: auto; }
}

/* the header sticks to the page, not to its wrapper (display: contents lets position: sticky see the body) */
#site-header { display: contents; }
html.has-localbar .scrub.is-pinned .scrub-stick { top: calc(var(--header-h) + 48px); height: calc(100svh - var(--header-h) - 48px); }

/* phone--crop: the phone shown large, its top part only, cut off by the bottom edge of a rounded card (Apple health cards).
   Default shows about the top 59 % of the phone, --tall about 76 %. Optional <figcaption> = a lighter band below the card. */
.phone--crop { position: relative; width: min(100%, 420px); aspect-ratio: 5 / 5.5; margin: 0 auto; padding: 6% 7% 0; overflow: hidden; isolation: isolate; }
.phone--crop.phone--tall { aspect-ratio: 5 / 7; }
.phone--crop img { width: 100%; max-width: none; filter: none; }
.phone--crop figcaption { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 14px 20px 16px; background: rgba(21,21,24,.92); font-size: 14px; color: var(--body); }
@media (min-width: 735px) { .split > .phone--crop { width: 100%; } .split:not(.split--flip) > .phone--crop { margin-right: 0; } }
.media-pair > *, .media-duo > *, .phone-pair > * { min-width: 0; }
.slot p { overflow-wrap: anywhere; }

/* footer: on small screens the link groups are accordions */
@media (max-width: 734px) {
  .foot-grid { gap: 0; }
  .foot-grid > div:first-child { padding-bottom: 24px; }
  .foot-col { border-top: 1px solid var(--line); }
  .foot-col summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
  .foot-col summary h4 { margin: 0; }
  .foot-col summary::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--chev); border-bottom: 1px solid var(--chev); transform: rotate(-45deg); transition: transform .3s var(--ease); }
  .foot-col[open] summary::after { transform: rotate(45deg); }
  .foot-col a { padding: 10px 0; }
  .foot-col[open] { padding-bottom: 12px; }
}

/* hero: "After Light" sits on its own line at the slogan's size (owner 2026-10-28) */
.hero-brand { display: block; }
html:lang(zh) .hero-brand { display: none; }   /* owner 2026-11-03: the Chinese hero reads only 入夜，如梦，随行。 */
.hero-v-front { position: absolute; z-index: 3; max-width: none; pointer-events: none; transition: opacity .6s; }
.hero-play .hero-v:not(.is-end) .hero-v-front { opacity: 0; }
.hero-v-front:not([src]) { display: none; }
@media (min-width: 1069px) {
  /* owner 2026-10-28: full screen made STILL too big; the clip sits at 78 % of the frame, same proportions */
  .hero-v-media { inset: auto; left: 11%; top: 7%; width: 78%; height: 78%; }
}
/* owner 2026-10-28: "After Light," and the slogan line up on the left, as one block centred over STILL */
.hero-v-top .display { display: inline-block; text-align: left; }
.hero-v-top { text-align: center; }
/* MonoSpec is fixed-width: 14 characters per line keeps the left-aligned block exactly as wide as its text, so it stays centred */
html:not(:lang(zh)) .hero-v-top .display { max-width: 14.2ch; }
/* owner 2026-10-28: hero intro grey with the two names in white; price with Buy right after it, one row */
.hero-v-bottom .lead { color: var(--quiet); }
.hero-v-bottom .lead em { font-style: normal; color: var(--text); }
.hero-v-buy { display: flex; align-items: center; justify-content: center; gap: 16px; }
.hero-v-buy .price { margin: 0; }
@media (min-width: 1069px) {
  .hero-v-bottom { align-items: center; }
  .hero-v-bottom .hero-v-buy { justify-content: flex-end; }
  /* headline on the left, lined up with the intro below */
  .hero-v-top { left: 6%; right: 6%; text-align: left; }
}
@media (min-width: 1069px) {
  /* owner 2026-10-28: the hero text spans the same width as the header (logo to Buy), not the narrower clip frame */
  .hero-v-top, .hero-v-bottom {
    --hero-side: calc((min(100vw, (100svh - var(--header-h)) * 1.3333) - var(--content)) / 2);
    left: var(--hero-side); right: var(--hero-side);
  }
}
@media (min-width: 1069px) {
  /* owner 2026-10-28: the navigation sits inside the hero text width, 60 px in on each side, not flush with the headline */
  .site-header .wrap { width: calc(var(--content) - 120px); }
}
.sec--intro .display + .intro { margin-top: 24px; }
/* zh headlines break at punctuation and spaces, not mid-phrase; a phrase too long for the line may still wrap */
html:lang(zh) .display { word-break: keep-all; overflow-wrap: anywhere; }
/* docs/14: STILL sections below the hero — Chinese body text also breaks only at punctuation / spaces, so words such as 心率、赠送期 stay whole */
html:lang(zh) body[data-page="still"] main [data-section]:not([data-section="hero"]) :is(p, summary, label, li, dt, dd, td, th) { word-break: keep-all; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
/* the hero text comes up exactly like the light: same moment, same 1 s ease, no slide */
.hero-play .hero-v:not(.is-in) .hero-text { transform: none; }
.hero-v .hero-text { transition: opacity 1s cubic-bezier(.45, 0, .55, 1); }

/* ---------- 10. restructure 2026-10-30: home 11 sections, STILL and After Light detail pages ---------- */
/* feature sections: headline + subheading beside one visual; text stays first in the DOM so phones read text, then picture */
.sec--feat .lead { max-width: 26em; }
.plus-line { margin-top: 20px; }
.plus-line .plus-tag { margin-right: 4px; }
.plus-tag { display: inline-block; font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--lavender); white-space: nowrap; }
html:lang(zh) .plus-tag { letter-spacing: .08em; font-size: 12px; text-transform: none; }



/* quiet: text and space only */
.sec--quiet { padding-block: calc(var(--pad) * 1.4); }
.sec--quiet .lead { margin-inline: auto; }

/* closing purchase */
.close-render { width: min(100%, 380px); margin: 0 auto 12px; aspect-ratio: 4 / 3; }
.sec--close .display { max-width: 16em; margin-inline: auto; }
.close-buy { margin-top: 28px; }
.close-offer { margin-top: 28px; font-size: 16px; color: var(--text); }
.sec--close .small { max-width: 34em; margin: 8px auto 0; }
.sec--close .fine { max-width: 40em; margin-inline: auto; }

/* detail pages: body text under a selling point, and the data / privacy cards */
.feat-body { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--body); max-width: 32em; }
.feat-body + .feat-body { margin-top: 14px; }
.sec--data-privacy .shared { margin-top: 32px; }
.sec--data-privacy .grid { margin-top: 36px; }
.sec--data-privacy .card h3 { font-size: 20px; }
.sec--open .display { margin-top: 0; }
.sec--open .slogan { margin-top: 18px; font: 500 var(--fs-md)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); }
html:lang(zh) .sec--open .slogan { font-weight: 500; letter-spacing: 0; }
.sec--open .lead { margin-inline: auto; }
.table .no { color: var(--quiet); }
.small, .fine { text-wrap: pretty; }
.sec--open .lead em { font-style: normal; color: var(--text); }
.sec--open .lead { color: var(--quiet); }
@media (max-width: 559px) { .table { font-size: 14.5px; } .table th, .table td { padding: 12px 10px; } .table tbody th { width: 27%; } }

/* ---------- 11. Apple-style presentation pass (2026-10-30) ----------
   Patterns after apple.com/iphone-18-pro and /airpods-pro (docs/04): B chapter opener, C headline + large rounded media, D grey copy with white keywords,
   E big numbers, G bento cards, H full-bleed scene, I closing purchase. Black and dark-grey bands alternate. Everything is decoration over a static layout:
   without JS or with prefers-reduced-motion nothing moves and nothing is hidden. Type, spacing and media sizes step with the same three breakpoints. */
:root {
  --band: var(--bg); --cardbg: var(--card);   /* one page colour: no black / grey alternation */
  --wide: calc(100% - 40px);
  --fs-ch: 32px; --fs-c: 30px; --fs-side: 28px; --fs-q: 38px; --fs-qs: 20px; --fs-big: 68px; --fs-d: 22px; --fs-lead2: 18px; --fs-card: 24px;
  --pad-ch: 96px; --r-media: 28px; --gap-ch: 44px;
  --ph: 620px; --crop: 430px;
}
@media (min-width: 735px) {
  :root {
    --wide: calc(100% - 64px);
    --fs-ch: 56px; --fs-c: 46px; --fs-side: 34px; --fs-q: 58px; --fs-qs: 26px; --fs-big: 88px; --fs-d: 28px; --fs-lead2: 21px; --fs-card: 26px;
    --pad-ch: 128px; --r-media: 28px; --gap-ch: 56px;
    --ph: 780px; --crop: 540px;
  }
}
@media (min-width: 1069px) {
  :root {
    --wide: min(100% - 96px, 1480px);
    --fs-ch: 76px; --fs-c: 64px; --fs-side: 44px; --fs-q: 80px; --fs-qs: 32px; --fs-big: 112px; --fs-d: 36px; --fs-lead2: 24px; --fs-card: 30px;
    --pad-ch: 176px; --r-media: 28px; --gap-ch: 72px;
    --ph: 920px; --crop: 640px;
  }
}
/* three page widths (owner 2026-11-03): --narrow is the reading width for paragraphs (692); --content is the standard width
   most of the page keeps (headings, card groups, lists, buy, specs, FAQ: 1200 on large screens); --wide is for blocks led by a
   picture, video or 3D, which may run past it (up to 1480). Chapters use the standard width; add .wrap-ch--wide for media. */
.wrap-ch { width: var(--content); margin-inline: auto; }
.wrap-ch--wide { width: var(--wide); }
.wrap-ch.center { text-align: center; }
.display--ch { font-size: var(--fs-ch); line-height: 1.2; letter-spacing: -.04em; }
.display--c { font-size: var(--fs-c); line-height: 1.2; letter-spacing: -.04em; }
.display--side { font-size: var(--fs-side); line-height: 1.2; letter-spacing: -.035em; }
.display--q { font-size: var(--fs-q); line-height: 1.2; letter-spacing: -.04em; }
html:lang(zh) .display--ch, html:lang(zh) .display--c, html:lang(zh) .display--side, html:lang(zh) .display--q { font-weight: 600; letter-spacing: -.01em; line-height: 1.16; }
.ch-sub { text-align: center; }
.ch-sub .eyebrow, .ch-text .eyebrow { margin-bottom: 20px; }
.ch-sub .display { max-width: 18em; margin-inline: auto; }
.ch-sub .lead, .ch-text .lead { margin-inline: auto; max-width: 30em; margin-top: 26px; font-size: var(--fs-lead2); line-height: 1.5; color: var(--sec); }
.ch-sub .feat-body, .ch-text .feat-body { margin-inline: auto; max-width: 36em; text-align: center; color: var(--quiet); }

/* B: chapter opener. small: image above, headline below. medium and large: the headline sits centred over the full-bleed image, which zooms slowly with scroll */
.ch-open { position: relative; overflow: hidden; background: var(--stage); }
.ch-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--stage); }
.ch-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ch-open > .ch-text { text-align: center; padding: 32px 20px 8px; }
[data-zoom] .zm { transform: scale(calc(1 + var(--z, 0) * .1)); transform-origin: 50% 50%; will-change: transform; }
.sec--wear .ch-sub { padding-top: 40px; }
.sec--wear { padding-block: 0 var(--pad-ch); }
@media (min-width: 735px) {
  .ch-open { height: clamp(520px, 68svh, 740px); }
  .ch-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .ch-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 38%, rgba(0,0,0,.55), rgba(0,0,0,.1) 75%), linear-gradient(var(--bg) 18%, rgba(9,9,10,0) 46%, transparent 72%, rgba(0,0,0,.4)); }
  .ch-open > .ch-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5%; z-index: 1; }
  .ch-open .ch-text .display { max-width: 16em; margin-inline: auto; text-align: center; }
  .sec--wear .ch-sub { padding-top: var(--gap-ch); }
  .ch-open--top > .ch-text { justify-content: flex-start; padding-top: 6.5%; }
  .ch-open--top .ch-media img { position: relative; top: 14%; object-position: 50% 100%; transform-origin: 50% 100%; }
}
@media (min-width: 1069px) { .ch-open { height: clamp(640px, 100svh, 920px); } }

/* C: large rounded media at least as wide as the content */
.media-lg { position: relative; width: var(--wide); margin: var(--gap-ch) auto 0; border-radius: var(--r-media); overflow: hidden; background: var(--stage); aspect-ratio: 5 / 4; isolation: isolate; }
.media-lg video, .media-lg img, .media-lg canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 735px) { .media-lg { aspect-ratio: 16 / 10; } }
@media (min-width: 1069px) { .media-lg { aspect-ratio: 16 / 9; } }
@media (min-width: 1069px) { .media-lg--sphere { aspect-ratio: 21 / 9; } }
.sec--band, .sec--data, .sec--ask { padding-block: var(--pad-ch); }
.ch-sub--top { padding-top: 0; }

/* E: big numbers */
.bn { display: block; font: 500 var(--fs-big)/1.2 "MonoSpec", var(--font-display); letter-spacing: -.05em; color: var(--text); }
.bn small { font-size: .42em; letter-spacing: 0; margin-left: .1em; color: var(--sec); }

/* D: grey copy, key words white and bold */


/* H: full-bleed scene, text on the picture (small: picture, then text) */
.sec--together { padding-block: 0; }
.scene { position: relative; overflow: hidden; background: var(--stage); }
.scene-media { position: relative; overflow: hidden; aspect-ratio: 5 / 4; }
.scene-media video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.scene-text { padding: 36px 20px 56px; }
.scene-text .lead { color: var(--sec); font-size: var(--fs-lead2); line-height: 1.5; margin-top: 22px; }
.scene-text .feat-body { color: var(--quiet); }
.vpause { position: absolute; z-index: 3; right: 16px; bottom: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(40,40,44,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vpause i { position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; transform: translate(-50%, -50%); border-left: 3px solid var(--text); border-right: 3px solid var(--text); }
.vpause[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 11px solid var(--text); border-top: 7px solid transparent; border-bottom: 7px solid transparent; transform: translate(-30%, -50%); }
@media (min-width: 735px) {
  .scene { height: clamp(520px, calc(86svh - var(--header-h)), 760px); }
  .scene-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .scene-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,.35) 48%, rgba(0,0,0,0) 72%), linear-gradient(90deg, rgba(0,0,0,.5), transparent 60%); }
  .scene-text { position: absolute; z-index: 2; left: calc((100% - min(var(--wide), 100%)) / 2); bottom: 56px; max-width: 640px; padding: 0; }
  .vpause { right: calc((100% - min(var(--wide), 100%)) / 2); bottom: 56px; }
}
@media (min-width: 1069px) { .scene { height: clamp(640px, calc(100svh - var(--header-h)), 900px); } .scene-text { bottom: 80px; max-width: 760px; } .vpause { bottom: 80px; } }

/* now: chapter opener with the phone rising from the bottom edge (B and C together); ask: C in a rounded card */
.sphone { margin: 0; width: calc(var(--ph) * .4904); height: var(--crop); overflow: hidden; }
.sphone img.screen { border-radius: calc(var(--ph) * .09) calc(var(--ph) * .09) 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); }
.sphone img { display: block; height: var(--ph); width: auto; max-width: none; margin-inline: auto; transform: translateY(calc((var(--z, .5) - .5) * -36px)); will-change: transform; }
.sec--now { padding: 0; }
.stage-row { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: var(--gap-ch); }
.stage-note { margin: 0 !important; justify-content: center; padding: 0 20px 24px; order: 2; font-size: 15.5px; }
.stage-row .sphone { order: 1; }
@media (min-width: 735px) {
  .stage-note { position: absolute; left: calc(50% + var(--ph) * .2452 + 32px); top: 28%; max-width: 220px; padding: 0; order: 0; }
}
.ch-after { margin-top: 28px; }
.ch-after .small { max-width: 30em; margin-inline: auto; }

/* C, side by side: headline and text on one side, a big rounded card with the cropped phone on the other */
.csplit { display: grid; gap: var(--gap-ch); align-items: center; width: var(--wide); margin-inline: auto; }
.csplit .side-text .eyebrow { margin-bottom: 20px; }
.csplit .side-text .lead { margin-top: 22px; font-size: var(--fs-lead2); line-height: 1.5; color: var(--sec); max-width: 22em; }
.csplit .side-text .feat-body { color: var(--quiet); }
.csplit .plus-line, .csplit .side-note { margin-top: 24px; }
@media (max-width: 1068px) { .display--side { font-size: var(--fs-c); } .side-text { text-align: center; } .side-text .lead, .side-text .feat-body { margin-inline: auto; } .side-text .plus-line { justify-content: center; text-align: left; } .pcard { width: min(100%, 520px); margin-inline: auto; } }
@media (min-width: 1069px) { .csplit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; } .csplit--l > .pcard { order: -1; } }
.sec--family .small, .sec--trends .small { margin-top: 24px; }

/* quiet: one large statement; the three short phrases come up one by one */
.sec--quiet { min-height: 88svh; display: grid; place-content: center; padding-block: var(--pad-ch); }
.sec--quiet .eyebrow { margin-bottom: 28px; }
.quiet-lines { display: grid; gap: 10px; margin: 64px auto 0; text-align: center; font: 500 var(--fs-qs)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--sec); }
html:lang(zh) .quiet-lines { font-weight: 500; letter-spacing: 0; }
.quiet-lines span { display: block; }
.js .quiet-lines.rv { opacity: 1; transform: none; transition: none; }
.js .quiet-lines span { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .quiet-lines.in span { opacity: 1; transform: none; }
.js .quiet-lines span:nth-child(2) { transition-delay: .8s; }
.js .quiet-lines span:nth-child(3) { transition-delay: 1.6s; }

/* I: closing purchase */
.sec--close { background: var(--band); padding-block: var(--pad-ch); }
.close-media { position: relative; overflow: hidden; width: 100%; margin: 0 auto 56px; aspect-ratio: 4 / 3; }   /* material: section 15 */
.close-media img { width: 100%; height: 100%; object-fit: cover; }
.sec--close .display { max-width: 16em; }

/* chapter transitions and shared radii */
.frame { border-radius: var(--r-media); }
@media (max-width: 1068px) {
  /* F: horizontal cards that swipe (still: place / plug in / pair) */
  .fcards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; --edge: 6.25vw; margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge); scroll-padding-inline: var(--edge); -webkit-overflow-scrolling: touch; }
  @media (min-width: 735px) { .fcards { --edge: calc(50vw - 346px); } }
  .fcards::-webkit-scrollbar { display: none; }
  .fcards > .card { flex: 0 0 78%; max-width: 340px; scroll-snap-align: start; }
  .fcards > .card::after { content: none; }
}
.steps3 .card { border-radius: var(--radius); }   /* every card is 20 */
.steps3 .card img, .steps3 .phone-thumb { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .js .quiet-lines span { opacity: 1; transform: none; transition: none; }
  [data-zoom] .zm, .sphone img { transform: none !important; will-change: auto; }
}
@media (min-width: 1069px) { .fcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ---------- 13. Tech Specs page (specs.html): each category is one App grouped card (eyebrow + field label / value rows), owner 2026-11-03 ---------- */
.sec--specs-head { padding-block: calc(48px + var(--pad-t)) 0; text-align: center; }
.sec--specs-head .display { max-width: none; }
.sec--specs-head .lead { margin-inline: auto; max-width: 30em; margin-top: 24px; font-size: var(--fs-lead2); line-height: 1.5; color: var(--sec); }
.specs-fig { width: min(100%, 560px); margin: 44px auto 0; aspect-ratio: 4 / 3; overflow: hidden; }   /* material: section 15 */
.specs-fig img { width: 100%; height: 100%; object-fit: cover; }
.sec--specs { padding-block: var(--pad-t) var(--pad-t); }
.spec-cat { margin-top: 28px; }
.spec-cat:first-child { margin-top: 0; }
.spec-name { font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--body); margin-bottom: 12px; }
html:lang(zh) .spec-name { font-size: 12px; letter-spacing: .08em; text-transform: none; }
.spec-list { background: var(--card-display); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.spec-list > div { display: grid; gap: 4px; margin-inline: 20px; padding: 16px 0; }
.spec-list > div + div { border-top: 1px solid var(--card-line); }
.spec-list dt { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
html:lang(zh) .spec-list dt { font-size: 12px; letter-spacing: .08em; text-transform: none; }
.spec-list dd { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.spec-list dd.tba { color: var(--quiet); font-weight: 400; }
@media (min-width: 735px) { .spec-list > div { grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); gap: 4px 28px; align-items: baseline; } }

/* ---------- 14. v3 structure (2026-10-30 night): home as the overall intro, STILL / After Light scroll stories, Why Us ----------
   Section 12 (the "Learn more" panels) is gone: the depth content is shown open (.drows). New pieces: .ncards (six need cards), .block / .s3d (STILL turntable),
   .fan (phone fan), .proof (stats wall), .reasons, .phero (STILL hero), .sstory (sticky scroll stories), .look (closer look), .drows, .adv, .about.
   Everything is decoration over a complete static layout: without JS or with prefers-reduced-motion the stories are plain stacked content. */
:root { --edge: 20px; --stepH: 85svh; --stick-top: calc(var(--header-h) + 48px); --fs-num: 34px; --fan-w: 150px; --fan-h: 280px; --dic: 24px; }
@media (min-width: 735px) { :root { --edge: 32px; --fs-num: 52px; --fan-w: 190px; --fan-h: 380px; } }
@media (min-width: 1069px) { :root { --edge: max(32px, calc((100vw - 1240px) / 2)); --fs-num: 76px; --fan-w: 250px; --fan-h: 500px; } }
.dic { flex: none; width: var(--dic); height: var(--dic); fill: none; stroke: var(--mint); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }   /* App icons are 1 px line, not 1.6 */
.dic path, .dic circle { vector-effect: non-scaling-stroke; }
.dic--lg { width: 24px; height: 24px; }
.dic--sm { width: 24px; height: 24px; }
.btn-row.center, .center > .btn-row { justify-content: center; }
.display--sm { font-size: var(--fs-md); }
html:lang(zh) .display--sm { font-weight: 600; letter-spacing: 0; line-height: 1.25; }

/* value statement */
.sec--intro2 { padding-block: var(--pad-ch); }
.sec--intro2 .display { max-width: 14em; }
.sec--intro2 .lead { margin-inline: auto; font-size: var(--fs-lead2); color: var(--sec); max-width: 28em; }
.sec--intro2 .lead em { font-style: normal; color: var(--text); }

/* six need cards: horizontal, snap, arrows */
.sec--needs { padding-block: var(--pad-ch); background: var(--band); overflow: hidden; }
.needs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: calc(var(--gap-ch) - 8px); }
.needs-head .display { text-align: left; }
.needs-ctl { display: flex; gap: 10px; flex: none; }
.arrow { position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: #171719; box-shadow: var(--shadow-ctrl); transition: background .2s; }
.arrow:hover { background: #202024; }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-left: 1px solid var(--text); border-bottom: 1px solid var(--text); transform: translate(-30%, -50%) rotate(45deg); }
.arrow--next i { transform: translate(-70%, -50%) rotate(-135deg); }
.ncards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--edge); scroll-padding-inline: var(--edge); -webkit-overflow-scrolling: touch; padding-bottom: 24px; margin-bottom: -24px; }   /* room for the card shadow; layout unchanged */
.ncards::-webkit-scrollbar { display: none; }
.ncards:focus-visible { outline-offset: -3px; }
.ncards::after { content: ""; flex: 0 0 1px; }
.ncard { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
@media (min-width: 735px) { .ncards { gap: 18px; } .ncard { flex-basis: 340px; } }
@media (min-width: 1069px) { .ncards { gap: 20px; } .ncard { flex-basis: 384px; } }
.ncard a { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-media); background: var(--card); border: 1px solid var(--card-line); box-shadow: var(--shadow-card); text-decoration: none; isolation: isolate; }
.ncard a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 22%, rgba(0,0,0,.78) 52%, rgba(0,0,0,.94) 100%); }
.ncard-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s var(--ease); }
.ncard a:hover .ncard-img, .ncard a:focus-visible .ncard-img { transform: scale(1.05); }
.ncard-ph { position: absolute; inset: 0; z-index: -2; display: flex; justify-content: center; padding-top: 8%; background: var(--card); }
.ncard-ph img { width: 62%; height: auto; max-width: none; align-self: flex-start; transition: transform .9s var(--ease); }
.ncard a:hover .ncard-ph img { transform: translateY(-6px); }
.ncard-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 66px 22px 22px; }
.ncard-t h3 { font: 500 21px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
html:lang(zh) .ncard-t h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.ncard-t p { margin-top: 8px; font-size: 14.5px; line-height: 1.4; color: var(--body); }
.ncard-t p b { font-weight: inherit; color: inherit; }
@media (min-width: 1069px) { .ncard-t { padding: 26px 76px 28px 28px; } .ncard-t h3 { font-size: 26px; } .ncard-t p { font-size: 15.5px; } }

/* STILL block with the turntable */
.sec--block { padding-block: var(--pad-ch); }
.block { display: grid; gap: var(--gap-ch); align-items: center; }
@media (min-width: 1069px) { .block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.block-text .lead { margin-top: 24px; color: var(--sec); font-size: var(--fs-lead2); line-height: 1.5; max-width: 24em; }
.points { display: grid; gap: 12px; margin-top: 28px; }
.points li { position: relative; padding-left: 26px; color: var(--text); font-size: 17px; }
.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.block-text .btn-row { margin-top: 36px; }
@media (max-width: 1068px) { .block-text { text-align: center; } .block-text .lead { margin-inline: auto; } .points { justify-items: center; } .points li { padding-left: 0; } .points li::before { position: static; display: inline-block; margin-right: 10px; vertical-align: .08em; } .block-text .btn-row { justify-content: center; } .block-text .display { margin-inline: auto; } }

/* the turntable viewer (assets/stage.js) */
.s3d { position: relative; margin: 0; }
.s3d-box { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stage); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.s3d-box.is-drag { cursor: grabbing; }
.s3d-poster, .s3d-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.s3d-canvas { outline-offset: -4px; }
.s3d-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--quiet); }
html:lang(zh) .s3d-hint { letter-spacing: .08em; text-transform: none; font-size: 13px; }
.s3d-hint i { width: 34px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10' fill='none' stroke='%23929298' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h32M5 1L1 5l4 4M29 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* After Light block with the phone fan */
.sec--al-block { padding-block: var(--pad-ch) 0; overflow: hidden; }
.al-head .lead { margin-inline: auto; max-width: 28em; }
.plus-line--c { justify-content: center; text-align: left; }
.al-head .btn-row { justify-content: center; margin-top: 28px; }
.fan { position: relative; height: var(--fan-h); width: 100%; max-width: 1240px; margin: var(--gap-ch) auto 0; }
.fan-p { position: absolute; left: 50%; bottom: calc(var(--fan-h) * -.22 + var(--lift, 0px)); width: var(--fan-w); margin: 0; transform-origin: 50% 170%; transform: translateX(-50%) translateX(calc(var(--fan-w) * var(--x))) rotate(var(--r)); }
.fan-p img { display: block; width: 100%; height: auto; max-width: none; }
.fan-p img.screen { width: 93.7%; margin-inline: auto; border-radius: 9.5% 9.5% 0 0 / 4.3% 4.3% 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); }
.fan-p--1 { --x: -1.18; --r: -13deg; --lift: -10px; z-index: 1; }
.fan-p--2 { --x: -.4; --r: -4.5deg; --lift: 14px; z-index: 2; }
.fan-p--3 { --x: .4; --r: 4.5deg; --lift: 14px; z-index: 3; }
.fan-p--4 { --x: 1.18; --r: 13deg; --lift: -10px; z-index: 1; }
.fan-p--2, .fan-p--3 { filter: drop-shadow(0 -10px 30px rgba(0,0,0,.45)); }

/* stats wall on a dotted ground */
.sec--proof { position: relative; padding-block: var(--pad-ch); overflow: hidden; }
.proof-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; margin-top: var(--gap-ch); }
@media (min-width: 735px) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; } }
.proof-grid li { padding-top: 24px; border-top: 1px solid var(--line); }
.proof-grid .bn { font-size: var(--fs-num); line-height: .95; }
.proof-grid li > span { display: block; margin-top: 16px; max-width: 18em; font-size: 15px; line-height: 1.45; color: var(--sec); }
@media (min-width: 1069px) { .proof-grid li > span { font-size: 17px; } }
.proof-lead { position: relative; max-width: 30em; margin: 20px auto 0; }
.proof-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 735px) { .proof-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.proof-note { position: relative; margin: 48px auto 0; max-width: 46em; text-align: center; }

/* "why us" reasons and the data promises */
/* Why Us (owner 2026-11-05): the company, the sensor, accuracy, scale and research — two text blocks side by side */
.whyx { display: grid; gap: calc(var(--pad-ch) * .5); }
@media (min-width: 1069px) { .whyx { grid-template-columns: 1fr 1fr; gap: 72px; } }
.whyx-item .dp { max-width: 30em; }
.dsphere { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the owner's piezo sphere page (assets/tech/piezo.html), piezo card only, in a stage */
.dmedia.dmedia--tech { aspect-ratio: auto; width: 100%; height: clamp(460px, 64svh, 720px); }
.tech-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: dark; }
.sec--whysum { padding-block: var(--pad-ch); }
.reasons { display: grid; gap: 40px; margin: var(--gap-ch) auto 0; text-align: left; }
@media (min-width: 735px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.reasons li { padding-top: 28px; border-top: 1px solid var(--line); }
.reasons h3 { margin-top: 22px; font: 500 var(--fs-card)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
html:lang(zh) .reasons h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.reasons p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--sec); }
.sec--whysum .btn-row { justify-content: center; margin-top: var(--gap-ch); }
.reasons--promises { margin-bottom: 0; }
.sec--data-privacy { padding-block: var(--pad-ch); }
.sec--data-privacy .notice { margin: var(--gap-ch) auto 0; max-width: 692px; text-align: left; }
.sec--data-privacy .lead { margin-inline: auto; }

/* STILL hero (A) */
.phero { padding: 0; background: var(--stage); }   /* hero image: full bleed, never framed (owner 2026-11-03) */
.phero-frame { display: grid; gap: 8px 40px; padding-top: 28px; padding-bottom: 56px; }
.phero-media img { display: block; width: auto; max-width: 100%; height: min(54svh, calc((100vw - 40px) * .75)); aspect-ratio: 4 / 3; margin-inline: auto; object-fit: cover; }
.phero-text .display { font-size: var(--fs-ch); line-height: 1.2; }
.phero-text .lead { margin-top: 18px; max-width: 24em; font-size: var(--fs-lead2); line-height: 1.5; color: var(--sec); }
.phero-buy { margin-top: 16px; }
.phero-buy .price { margin: 0 0 14px; font-size: 26px; }
.phero-buy .btn { margin-right: 6px; }
.phero-buy .small { margin-top: 14px; }
@media (min-width: 735px) {
  .phero-frame { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-top: 40px; padding-bottom: 72px; }
  .phero-media { grid-column: 1 / -1; }
  .phero-media img { height: min(50svh, 560px); }
  .phero-buy { margin-top: 0; text-align: right; }
}
@media (min-width: 1069px) { .phero-frame { padding-bottom: 96px; } .phero-media img { height: min(56svh, 620px); } }

/* sticky scroll stories. Static first: the stage, then the four beats stacked. The script adds .is-live (no reduced motion) and the section pins. */
.sec--sstory { padding: 0; }
.sstory { position: relative; }
.sstory-steps { display: none; }
.sstory-stick { padding-block: var(--pad-ch) 0; }
.sstory-grid { position: relative; display: grid; gap: 32px; }
.sstory-text { display: block; }
.sstory-stage { order: -1; position: relative; }
.sstory-prog { display: none; }
.sbeat { text-align: center; margin-top: 56px; }
.sbeat:first-child { margin-top: 0; }
.sbeat .lead { margin-inline: auto; color: var(--sec); font-size: var(--fs-lead2); line-height: 1.5; max-width: 26em; }
.sbeat .eyebrow { margin-bottom: 18px; }
.sbeat .plus-line { justify-content: center; text-align: left; }
.sbeat .display { max-width: 12em; margin-inline: auto; }
.sstory-sphere { display: none; }
.pst-stage { height: min(560px, 90vw); overflow: hidden; border-radius: var(--r-media) var(--r-media) 0 0; background: var(--stage); }
.pst-screen { position: absolute; left: 50%; top: 0; height: 150%; transform: translateX(-50%); }
.pst-screen:not(:first-child) { display: none; }
.pst-screen img { display: block; height: 100%; width: auto; max-width: none; }
.pst-screen img.screen { border-radius: 9.5% 9.5% 0 0 / 4.3% 4.3% 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); }
.sstory-stage .s3d { width: min(100%, 880px); margin-inline: auto; }

.sstory.is-live { height: calc(var(--n) * var(--stepH) + 100svh - var(--stick-top)); }
.is-live .sstory-steps { display: block; position: absolute; left: 0; top: 0; width: 1px; height: 100%; pointer-events: none; }
.is-live .sstory-steps i { position: absolute; left: 0; top: calc(var(--i) * var(--stepH)); width: 1px; height: 1px; }
.is-live .sstory-stick { position: sticky; top: var(--stick-top); height: calc(100svh - var(--stick-top)); padding: 0; overflow: hidden; }
.is-live .sstory-grid { height: 100%; width: var(--wide); margin-inline: auto; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.is-live .sstory-stage { display: grid; place-items: center; min-height: 0; height: 100%; }
.is-live .sstory-text { display: grid; padding-bottom: 84px; }
.is-live .sbeat { grid-area: 1 / 1; align-self: start; margin: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease), visibility .55s; }
.is-live .sbeat.on { opacity: 1; visibility: visible; transform: none; }
.is-live .sstory-sphere { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.is-live .sstory-stage .s3d { width: min(100%, calc((100svh - var(--stick-top) - 250px) * 1.3333)); }
.is-live .sstory-prog { display: grid; gap: 8px; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); z-index: 3; }
.sstory-prog li { width: 3px; height: 22px; border-radius: 3px; background: rgba(255,255,255,.22); transition: background .3s, height .3s var(--ease); }
.sstory-prog li.on { background: var(--text); height: 34px; }
.is-live .pst-stage { height: 100%; width: 100%; border-radius: var(--r-media) var(--r-media) 0 0; }
.is-live .pst-screen { display: block; opacity: 0; transform: translateX(-50%) translateY(24px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.is-live .pst-screen.on { opacity: 1; transform: translateX(-50%); }
.is-live .pst-screen img { height: 100%; }
@media (min-width: 1069px) {
  .is-live .sstory-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); gap: 56px; }
  .is-live .sstory-stage { order: 0; }
  .is-live .sstory-text { padding-bottom: 0; align-self: center; }
  .is-live .sbeat { text-align: left; align-self: center; }
  .is-live .sbeat .display { margin-inline: 0; }
  .is-live .sbeat .lead { margin-inline: 0; }
  .is-live .sbeat .plus-line { justify-content: flex-start; }
  .is-live .sstory-stage .s3d { width: min(118%, calc((100svh - var(--stick-top) - 40px) * 1.3333)); }
  .is-live .sstory-prog { right: auto; left: -24px; }
  .is-live .pst-stage { border-radius: var(--r-media); }
}
@media (min-width: 1069px) { .sstory-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; } .sstory-stage { order: 0; } .sbeat { text-align: left; } .sbeat .display, .sbeat .lead { margin-inline: 0; } .sbeat .plus-line { justify-content: flex-start; } .pst-stage { height: 640px; border-radius: var(--r-media); } }
.pstory .sstory-stage { overflow: hidden; }
.is-live.pstory .sstory-stage { height: 100%; }

/* closer look, laid out as on Apple's iPhone 18 Pro page (owner 2026-11-03: "just follow the iPhone 18 Pro"): a black
   stage the width of the window and nearly a screen tall, the model large in the middle; a column of round "+" pills at
   the left, one opens in place into a short paragraph while the model turns to it, with up / down arrows beside the
   column and a close button at the top right. On arrival the model swings in, then nudges once to show it can be turned. */
.sec--look { padding-block: var(--pad-ch); background: var(--band); --look-h: clamp(300px, calc(100svh - var(--stick-top) - 255px), 640px); }   /* heading + frame fit one screen between the top bars and the buy bar */
.look { margin-top: 32px; }
@media (max-width: 733px) { .sec--look { --look-h: max(520px, calc(100svh - var(--stick-top) - 96px)); } }   /* clear of the bottom buy bar */
.look-stage { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: var(--look-h); border: 1px solid #26262a; border-radius: 28px; background: var(--stage); box-shadow: 0 28px 58px rgba(0,0,0,.62), 0 8px 18px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045); }
/* one big rounded frame inside the page margins, as on the iPhone page; its material is After Light's Now card (.nightCard: 1px #26262a outline, 28 px corners,
   top-edge highlight; black, the App's media stage, so the 3D box does not show) and the pills / round buttons are the App's controls (.textLink) (owner 2026-11-03) */
.look-stage .s3d { width: min(100%, var(--look-h) * 1.25); transition: transform .8s var(--ease); }
.look-stage .s3d-hint, .look-stage .s3d-views { display: none !important; }
/* the pills keep their own column at the left, so they never sit on the model; on phones they sit under it */
@media (min-width: 734px) { .look-stage { padding-left: 452px; padding-right: 24px; } }
@media (max-width: 733px) { .look-stage { align-items: flex-start; padding-top: 32px; } }
.look-media { position: absolute; inset: 0; z-index: 2; background: var(--stage); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; }
.look-stage.is-media .look-media { opacity: 1; visibility: visible; }
.look-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; opacity: 0; transition: opacity .3s; }
.look-media video.on { opacity: 1; }
.look-ctrl { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 20px; }
@media (min-width: 734px) { .look-ctrl { left: 48px; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); } }
.look-nav { display: none; flex-direction: column; gap: 12px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
@media (min-width: 734px) { .look-nav { display: flex; } }
.look-stage.is-open .look-nav { visibility: visible; opacity: 1; }
.look-arrow, .look-close { position: relative; width: 44px; height: 44px; border: 1px solid #323237; border-radius: 50%; background: #171719; box-shadow: 0 9px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.055); color: var(--text); cursor: pointer; transition: background .25s; }
.look-arrow:hover, .look-close:hover { background: #202024; }
.look-arrow i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -2px 0 0 -4.5px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.look-arrow[data-look-step="1"] i { margin-top: -7px; transform: rotate(225deg); }
.look-close { position: absolute; z-index: 3; top: 20px; right: 20px; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s, background .25s; }
.look-stage.is-open .look-close { visibility: visible; opacity: 1; }
.look-close i::before, .look-close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.look-close i::after { transform: rotate(-45deg); }
/* the points are an After Light grouped card (ListGroup: #151518, 1px #2B2B30, 20 px corners, card shadow): rows split by
   lines 20 px in from the edge, each opens in place (folding row: the chevron turns 90 deg down), pressing shrinks the
   row content slightly (.97) */
.look-list { width: 340px; max-width: 100%; max-height: calc(var(--look-h) - 32px); overflow-y: auto; scrollbar-width: none; margin: 0; padding: 0; list-style: none; border: 1px solid #2b2b30; border-radius: 20px; background: #151518; box-shadow: 0 6px 14px rgba(0, 0, 0, .28); }
.look-item { position: relative; }
.look-item + .look-item::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: #2b2b30; }
.look-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 20px; border: 0; background: none; text-align: left; font: 500 15px/1.35 var(--font-body); color: var(--sec); cursor: pointer; transition: color .2s, transform .15s; }
.look-btn:hover, .look-item.is-open .look-btn { color: var(--text); }
.look-btn:active > * { transform: scale(.97); }
.look-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .3s var(--ease); }
.look-item.is-open .look-chev { transform: rotate(90deg); opacity: 1; }
.look-panel { display: none; outline: none; }
.look-item.is-open .look-panel { display: block; animation: look-open .4s var(--ease); }
.look-panel p { margin: -2px 0 0; padding: 0 20px 14px; font-size: 14px; line-height: 1.55; color: var(--sec); }
@keyframes look-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* arrival: the model rises and swings in (the turn itself is stage.js), then the pills follow one by one */
.look-stage.look-pre .s3d-box { opacity: 0; transform: translateY(6%); }
.look-stage.look-pre .look-list { opacity: 0; transform: translateY(12px); }
.look-stage.look-pre.is-in .s3d-box { opacity: 1; transform: none; transition: opacity 1.1s ease, transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.look-stage.look-pre.is-in .look-list { opacity: 1; transform: none; transition: opacity .6s ease .9s, transform .6s var(--ease) .9s; }

/* detail blocks (2026-10-30 e): one image-led block per topic, image about 62 % of the width with the text beside it from 1069 px, stacked below; every other block flips */
.sec--details { padding-block: var(--pad-ch); }
.dblock { display: grid; gap: 28px; align-items: center; width: var(--wide); margin-inline: auto; }
.dblock + .dblock { margin-top: calc(var(--pad-ch) * .7); }
.dmedia { position: relative; margin: 0; overflow: hidden; container-type: inline-size; aspect-ratio: 4 / 3; border-radius: var(--r-media); background: var(--stage); isolation: isolate; }
.dmedia video, .dmedia > img:not(.dph), .dmedia canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dph { position: absolute; left: 50%; top: calc(7cqw - var(--oy, 0cqw)); width: 46cqw; height: auto; max-width: none; transform: translateX(-50%); }
.dph.screen { border-radius: 4.4cqw; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); }
.slot--blk { aspect-ratio: 4 / 3; border-radius: var(--r-media); }
.dtext .eyebrow { margin-bottom: 16px; }
.dtext .display { margin: 0; }
.dtext .dp { margin-top: 18px; max-width: 26em; font-size: 17px; line-height: 1.6; color: var(--sec); }
.dtext .plus-line { margin-top: 18px; }
.dtext .fine { margin-top: 16px; }
.dlink { display: inline-block; margin-top: 22px; font-size: 16px; color: var(--text); text-decoration: none; }
.dlink::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; vertical-align: .1em; border-top: 1px solid var(--chev); border-right: 1px solid var(--chev); transform: rotate(45deg); transition: margin-left .25s var(--ease), border-color .2s; }   /* the shared right chevron, not an arrow glyph */
.dlink:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.dlink:hover::after { margin-left: 13px; border-color: var(--text); }
@media (min-width: 735px) { .dmedia, .slot--blk { aspect-ratio: 16 / 10; } .dmedia--phone { aspect-ratio: 4 / 3; } .dtext .dp { font-size: 18px; } .dph { width: 40cqw; } }
@media (min-width: 1069px) {
  .dblock { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 72px; }
  .dblock--flip { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
  .dblock--flip > .dmedia, .dblock--flip > .slot--blk { order: 2; }
  .dmedia, .slot--blk, .dmedia--phone { aspect-ratio: 5 / 4; }
  .dtext .dp { font-size: 19px; }
  .dph { width: 46cqw; }
}
.dims { margin-top: 26px; }
.dims h4 { margin-bottom: 12px; font: 600 14px/1.3 var(--font-body); color: var(--quiet); }
.dim-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dim-list li { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; line-height: 1.2; color: var(--text); }

/* After Light quiet: the full-screen statement, then its four rows */
.sec--quiet { display: block; min-height: 0; padding-block: 0; }
.quiet-full { min-height: 88svh; display: grid; place-content: center; padding-block: var(--pad-ch); }
.quiet-rows { padding-bottom: var(--pad-ch); }

/* Why Us */
.sec--adv { padding-block: calc(var(--pad-ch) * .6); }
.sec--adv.sec--band { background: var(--band); }
.sec--adv .dtext .display { font-size: var(--fs-side); line-height: 1.2; letter-spacing: -.035em; }
html:lang(zh) .sec--adv .dtext .display { font-weight: 600; letter-spacing: -.01em; line-height: 1.16; }
.sec--adv .dtext .dp { font-size: var(--fs-lead2); line-height: 1.5; }
@media (max-width: 1068px) { .sec--adv .dtext .display { font-size: var(--fs-c); } }
.sec--about { padding-block: var(--pad-ch); }
.about-grid { display: grid; gap: var(--gap-ch); margin-top: var(--gap-ch); align-items: center; }
@media (min-width: 1069px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; } }
.about-img { margin: 0; }
.about-img img { width: 100%; border-radius: var(--r-media); }
.about-text h3 { margin-top: 40px; }
.about-text h3:first-child { margin-top: 0; }
.about-text .lead { margin-top: 14px; max-width: 28em; font-size: var(--fs-lead2); color: var(--sec); }
.sec--about .lead { margin-inline: auto; }
.about-text .lead { margin-inline: 0; }

@media (prefers-reduced-motion: reduce) {
  .ncard-img, .ncard-ph img, .ncard-plus, .look-panel, .look-media, .look-stage .s3d { transition: none !important; animation: none !important; }
  .ncard a:hover .ncard-img, .ncard a:hover .ncard-ph img { transform: none; }
}

/* ask block: the flat Ask capture shown from its lower part (suggested questions and the input), cut by the card edges */
.dph--low { --oy: 27cqw; }
@media (min-width: 735px) { .dph--low { --oy: 14cqw; } }
@media (min-width: 1069px) { .dph--low { --oy: 22cqw; } }

/* ===== After Light: one night, hour by hour (Oura's day timeline) ===== */
.sec--night { padding-block: var(--pad-ch); }
.night { position: relative; display: grid; gap: 40px; max-width: 520px; margin: 56px auto 0; padding-left: 30px; }
.night::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.night li { position: relative; }
.night li::before { content: ""; position: absolute; left: -30px; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.night-t { display: block; font: 500 var(--fs-stat)/1.2 "MonoSpec", var(--font-display); letter-spacing: -.02em; color: var(--text); }
.night h3 { margin-top: 14px; font: 500 var(--fs-cardh)/1.2 var(--font-display); color: var(--text); }
.night p { margin-top: 8px; max-width: 22em; font-size: 15.5px; line-height: 1.55; color: var(--sec); }
@media (min-width: 1069px) {
  .night { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; max-width: none; margin-top: 72px; padding: 40px 0 0; }
  .night::before { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; background: var(--line); }
  .night li::before { left: 0; top: -40px; }
  .night p { font-size: 17px; }
}

/* ===== After Light: features in one block with tabs (Oura feature tabs) ===== */
.ftabs { margin-top: 48px; }
.ftabs-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin-inline: auto; padding: 4px; background: var(--groove); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: inset 0 2px 7px rgba(0,0,0,.5); }   /* App segmented control: groove + raised selected block (DS 9.x) */
.ftabs-list button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 16px; background: transparent; color: var(--sec); font: 500 15px/1 var(--font-body); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.ftabs-list button:focus-visible { border-radius: 16px; outline-offset: 0; }
.ftabs-list button:hover { color: var(--text); }
.ftabs-list button[aria-selected="true"] { background: var(--raised); color: var(--text); box-shadow: 0 4px 10px rgba(0,0,0,.28); }
.ftabs-body { display: grid; gap: 36px; margin-top: 40px; align-items: center; }
.ft-panel { text-align: center; }
.ft-panel .dp { margin: 18px auto 0; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--sec); }
.ft-panel .plus-line { justify-content: center; text-align: left; margin-top: 18px; }
.ft-panel .dims { margin-top: 22px; }
.ft-panel .dim-list { justify-content: center; }
.js .ft-panel:not(.on) { display: none; }
.ft-stage { position: relative; height: min(520px, 112vw); overflow: hidden; }   /* material: section 15 */
.ft-screen { position: absolute; left: 50%; top: 9%; height: 140%; opacity: 0; transform: translateX(-50%) translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ft-screen.on { opacity: 1; transform: translateX(-50%); }
.ft-screen img { display: block; height: 100%; width: auto; max-width: none; }
.ft-screen img.screen { border-radius: 9.5% 9.5% 0 0 / 4.3% 4.3% 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); }
@media (min-width: 735px) { .ft-panel .dp { font-size: 18px; } }
@media (min-width: 1069px) {
  .ftabs-list { justify-content: flex-start; margin-inline: 0; }
  .ftabs-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; margin-top: 48px; }
  .ft-panel, .ft-panel .dp { text-align: left; margin-inline: 0; }
  .ft-panel .plus-line, .ft-panel .dim-list { justify-content: flex-start; }
  .ft-stage { height: 600px; }
  .ft-panel .dp { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ft-screen { transition: none; } }
@media (max-width: 1068px) { .ft-stage { order: -1; height: min(420px, 96vw); } .ftabs-body { margin-top: 28px; } }
/* tab stage holding a full-bleed clip, canvas or placeholder instead of a phone screen (STILL page) */
.ft-screen.ft-fill { inset: 0; top: 0; height: 100%; width: 100%; left: 0; transform: translateY(18px); }
.ft-screen.ft-fill.on { transform: none; }
.ft-fill video, .ft-fill canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-fill .slot { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
/* home need cards, Oura-style: bigger image card, product chip top-left, one line, arrow bottom-right */
@media (min-width: 735px) { .ncard { flex-basis: 420px; } }
@media (min-width: 1069px) { .ncard { flex-basis: 500px; } .ncard a { aspect-ratio: 4 / 5; } }
.ncard-chip { position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(20,20,22,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 12px/1 var(--font-body); color: var(--text); }
.ncard-t { padding-right: 76px; }
.ncard-go { position: absolute; right: 18px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: #171719; box-shadow: var(--shadow-ctrl); transition: transform .3s var(--ease), background .2s; }
.ncard-go::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -6px 0 0 -6px; border-top: 1px solid var(--text); border-right: 1px solid var(--text); }
.ncard-go::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; margin: -.5px 0 0 -7px; background: var(--text); transform: rotate(-45deg); }
.ncard a:hover .ncard-go { transform: scale(1.08); }
@media (min-width: 1069px) { .ncard-chip { left: 24px; top: 24px; } .ncard-go { right: 24px; bottom: 28px; } .ncard-t h3 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .ncard-go { transition: none; } }
/* STILL buy: box, warranty and shipping beside the price; safety notices under it (box / tech / shipping sections folded in, 2026-11-01) */
.buy-facts { margin-top: 28px; background: var(--card-display); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.buy-facts > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; margin-inline: 20px; padding: 16px 0; font-size: 14.5px; line-height: 1.5; }
.buy-facts > div + div { border-top: 1px solid var(--card-line); }
.buy-facts dt { color: var(--text); font-weight: 500; }
.buy-facts dd { color: var(--sec); }
.buy-specs { margin-top: 18px; font-size: 15px; }
.buy-notices { display: grid; gap: 12px; margin-top: 56px; }
.buy-notices .fine { margin-top: 4px; }
@media (min-width: 1069px) { .buy-notices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; } .buy-notices .fine { grid-column: 1 / -1; } }
.dph--bottom { top: auto; bottom: -3cqw; }   /* show the lower half of the phone (a bottom sheet) */
/* 3D viewer: Top / Edge / Bottom (only once the all-angle frames exist; owner 2026-11-01) */
.s3d-views { display: none; justify-content: center; gap: 8px; margin-top: 14px; }
.s3d.has-tilt .s3d-views { display: flex; }
.s3d-views button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--sec); font: 500 13px/1 var(--font-body); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.s3d-views button:hover { color: var(--text); }
.s3d-views button[aria-pressed="true"] { color: var(--text); border-color: rgba(242,242,239,.55); }
/* real-time 3D viewer (2026-11-02): its canvas sits over the poster once the model is in */
.s3d-live { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.s3d-box.is-live .s3d-poster { visibility: hidden; }
.s3d-box.is-live .s3d-canvas { opacity: 0; }   /* kept focusable: the arrow keys turn the live model */

/* ---------- 15. App alignment pass (owner 2026-11-03, docs/07) ----------
   Media stage: every 3D / image / video frame takes the material of After Light's Now card (.nightCard):
   #050506, 1px #26262a, 28 px corners, two drop shadows and a top-edge highlight. One page colour #121214 everywhere;
   no glows, tinted gradients, dot lines or pulses. Frames listed here lose their one-off colours / borders above. */
.frame, .gallery-main, .hl-slide, .ft-stage, .scrub-frame video, .scrub.is-pinned .scrub-frame, .specs-fig, .close-media, .dmedia, .phone--crop, .about-img, .s3d-box {
  background: var(--stage); border: 1px solid var(--stage-line); border-radius: var(--r-media); box-shadow: var(--shadow-stage);
}
.frame--bare { border: 0; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
.scrub.is-pinned .scrub-frame video { border: 0; border-radius: 0; box-shadow: none; }   /* the pinned frame carries the material */
.look-stage .s3d-box { background: transparent; border: 0; border-radius: 0; box-shadow: none; }   /* the closer-look stage is the frame */
.about-img { overflow: hidden; }
.about-img img { border-radius: 0; display: block; }

/* ===== content pass (docs/10-11, 2026-11-05): layout for the new copy only; colours, type and material are the existing tokens ===== */
/* home hero: the plan note sits under the price + Buy row, as on the After Light hero */
/* owner 2026-11-03: the STILL / After Light buy block also wraps to two rows, like the home hero: price + button, then the included line */
.hero-w .hero-v-buy, .hero-v--still .hero-v-buy { flex-wrap: wrap; gap: 12px 16px; }
.hero-w .hero-v-buy .small, .hero-v--still .hero-v-buy .small { flex-basis: 100%; margin: 0; }
@media (min-width: 1069px) { .hero-w .hero-v-buy, .hero-v--still .hero-v-buy { justify-content: flex-end; max-width: 440px; margin-left: auto; } .hero-w .hero-v-buy .small, .hero-v--still .hero-v-buy .small { text-align: right; } }
/* About us: the brand story is plain reading text at the reading width */
.sec--story { padding-block: var(--pad-ch); }
.story p { margin: 0; font-size: var(--fs-lead2); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.story p + p { margin-top: 1.5em; }
/* STILL: highlight captions carry one short line; the closer-look intro sits under its heading (the frame offset above grew by ~60px to keep heading + intro + frame on one screen) */
.hl-cap p:not(.eyebrow) { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--sec); text-wrap: balance; }
html:lang(zh) .hl-cap p:not(.eyebrow) { line-height: 1.5; }
.look-intro { margin-inline: auto; margin-top: 12px; max-width: 36em; }
/* STILL features: the condition line under a tab, and the compact data bridge below the tabs (old #data) */
.ft-panel .small { margin: 14px auto 0; max-width: 30em; }
@media (min-width: 1069px) { .ft-panel .small { margin-inline: 0; } }
.data-bridge { margin: calc(var(--pad-ch) * .7) auto 0; max-width: var(--narrow); }
.data-bridge .lead { margin-inline: auto; margin-top: 14px; }
.data-bridge .btn-row { justify-content: center; margin-top: 28px; }
/* After Light: hero price slot carries a sentence; quiet body replaces the three phrases; data block keeps two short boundaries */
.hero-al .hero-v-buy .price { flex-basis: 100%; }
@media (min-width: 1069px) { .hero-al .hero-v-buy .price { text-align: right; } }
.quiet-body { margin-top: 40px; max-width: 34em; }
.dtext .small { margin-top: 16px; max-width: 26em; }
.dp-bounds { margin-top: calc(var(--pad-ch) * .7); }
@media (min-width: 735px) { .reasons--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }
/* a phone with a flat screen capture (no device body) inside a highlight slide */
.hl-slide .phone img.screen { width: 93.7%; height: auto; margin-inline: auto; border-radius: 9.5% 9.5% 0 0 / 4.3% 4.3% 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.2); }

/* docs/13 (2026-11-03): hero titles and intros break at meaning boundaries. Each .hl phrase stays whole while it fits and only
   breaks at its own inner phrases when the screen is narrower; .hb starts a line on every width. Scoped to first screens. */
:is(.hero-v-top, .hero-v-bottom, .page-hero, .sec--specs-head) .hl { display: inline-block; }
/* docs/14 (2026-11-03): the same phrase method below the STILL hero. span.hl only: div.hl is the highlights carousel. */
body[data-page="still"] span.hl { display: inline-block; }
:is(.hero-v-top, .page-hero) .hb { display: block; }
html .hero-v-top .hero-v-group .display { max-width: none; text-wrap: wrap; }

/* ===== Title levels (owner 2026-11-03): one size per level, all left-aligned. First screens keep their own hero sizes.
   Level 1 — a section's main title (h2.display*)            48 → 32 px
   Level 2 — a title inside a section (h3.display*, policy h2) 32 → 24 px
   Level 3 — item titles: cards, steps, FAQ questions (h3)    20 → 18 px
   Eyebrows stay the App's 11 px. The eyebrow, title and the intro under it move to the left together. */
:root {
  --t1: clamp(32px, calc(16px + 2.25vw), 48px);
  --t2: clamp(24px, calc(14px + 1.25vw), 32px);
  --t3: clamp(18px, calc(16px + .3vw), 20px);
}
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) h2.display { font-size: var(--t1); line-height: 1.2; letter-spacing: -.03em; }
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) :is(h3.display, .prose h2) { font-size: var(--t2); line-height: 1.2; letter-spacing: -.02em; }
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) h3:not(.display):not(.shared .card h3) { font-size: var(--t3); line-height: 1.25; letter-spacing: -.01em; }
html:lang(zh) main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) :is(h2.display, h3.display, .prose h2, h3:not(.display)) { letter-spacing: 0; line-height: 1.25; }
/* left alignment for every section header block */
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) :is(.center, .wrap-ch.center, .sec--cta, .ch-sub, .ch-text, .side-text) { text-align: left; }
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) :is(h2.display, h3.display, .eyebrow, :is(h2, h3).display ~ .lead, :is(h2, h3).display ~ p, .feat-body) { text-align: left; margin-left: 0; margin-right: auto; }
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) :is(.center, .sec--cta) .btn-row { justify-content: flex-start; }
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .data-bridge { margin-left: 0; margin-right: auto; }

/* docs/15 (2026-11-04): STILL below the hero. A title phrase group marked .hb always starts its own line (the .hl phrase method of docs/14);
   the setup flow under the closer look is three plain steps and one link; the Plus note under the record tabs appears once. Desktop only is verified; no mobile redesign. */
body[data-page="still"] span.hl.hb { display: block; }
body[data-page="still"] .look-flow { margin-top: 40px; }
body[data-page="still"] .flow3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
body[data-page="still"] .flow3 li { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--card-line); }
body[data-page="still"] .flow3-n { font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; color: var(--sec); }
body[data-page="still"] .flow3-t { font: 500 var(--t3)/1.35 var(--font-body); color: var(--text); text-wrap: pretty; }
@media (min-width: 735px) { body[data-page="still"] .flow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
body[data-page="still"] .look-flow .btn-row { margin-top: 28px; }
body[data-page="still"] .ft-shared { margin-top: 40px; max-width: var(--narrow); }
body[data-page="still"] .ft-shared .btn-row { margin-top: 24px; }
/* docs/16 (2026-11-04): STILL desktop proportions. Below 1069 px the docs/15 layout stays as it was (mobile is deferred).
   A — the closer look: a shorter frame and a larger STILL. The disc is drawn up to --look-px across, which now meets the crop framing
       itself (90 % of the frame height / --look-zoom), so the opened magnet and the plate's tab keep the same room as before. Overrides the
       earlier ~400 px "a little under life size" cap (owner asked for a larger product).
   B — setup guide to "Nightly records": 80 + 80 px of section padding instead of 128 + 128.
   C — records: the description, the Plus note and its link read as one left column; the media frame is 500 px tall.
   (D, the two-column FAQ, and F, the setup steps, were replaced by docs/18: see the block below.)
   E — buy: the outer edges on the wide grid (columns: docs/19 block below).
   F — step 3 is a short title with a small line under it. */
body[data-page="still"] .flow3-p { font-size: 14px; line-height: 1.55; color: var(--sec); text-wrap: pretty; }
html:lang(zh) body[data-page="still"] .flow3-p { word-break: keep-all; }
@media (min-width: 1069px) {
  body[data-page="still"] .sec--look { --look-h: clamp(300px, calc(100svh - 360px), 580px); padding-bottom: 80px; }
  body[data-page="still"] .look-stage { --look-px: 490; }
  body[data-page="still"] [data-section="features"] { padding-top: 80px; }

  body[data-page="still"] .ftabs-body { align-items: start; }
  body[data-page="still"] .ftabs-text { display: flex; flex-direction: column; align-items: flex-start; }
  body[data-page="still"] .ftabs { margin-top: 56px; }
  body[data-page="still"] .ft-shared { margin-top: 32px; }
  body[data-page="still"] .ft-stage { height: 500px; }


  body[data-page="still"] [data-section="buy"] > .wrap { width: var(--wide); }
  body[data-page="still"] .buy-info { top: 80px; }   /* under the 48 px product bar; the main header is folded away here (§4) */
}

/* docs/16 §4, extended by the owner 2026-11-04 to every page with a product bar (STILL, After Light, Tech Specs, How it works): past the
   first screen only the product bar stays at the top (site.js sets html.nav-min; every width). The hidden header is also
   visibility:hidden, so nothing off screen can take keyboard focus. STILL has no bottom buy bar and no language switch in the bar. */
html.lb-nav { scroll-padding-top: 72px; }   /* every width (owner 2026-11-04) */
html.lb-nav .site-header { transition: transform .45s var(--ease), visibility 0s; }
html.nav-min .site-header { transform: translateY(-100%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
html.lb-nav .localbar { transition: transform .45s var(--ease), opacity .3s, visibility .45s, top .45s var(--ease); }
html.nav-min .localbar { top: 0; }
html.nav-min .scrub.is-pinned .scrub-stick { top: 48px; height: calc(100svh - 48px); }   /* how-it-works: the pinned steps sit under the product bar only */
/* owner 2026-11-04: the Buy button in the 48 px product bar was too big — 32 px tall, 12 px type (every product bar) */
.localbar .btn--sm { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { html.lb-nav :is(.site-header, .localbar), html.nav-min .site-header { transition: none; } }

/* docs/18 + docs/19 (2026-11-04): STILL content final, then the owner's eight design notes.
   Design (19 F): a compact stage (about 500 px) with the model centred, one row of three choices under it and the chosen point's line.
   Records (18 §3.3): one title (full width, so its two lines hold), one paragraph, the piezo animation from About (assets/tech/piezo.html?still), the Plus note, one button.
   Before you buy (19 A): four equal cards, 2 × 2, App ordinary-card surface #19191C; the button sits at the foot of each card.
   Buy (19 C, D): three separate set buttons (native radios; only the chosen one lifts, with the white check); main row gallery | buying
   (about 52 / 48); under it one notes area: what is in the box, warranty, shipping, tech specs, then Use & safety lines. */
@media (min-width: 734px) { body[data-page="still"] .look-stage { padding: 0 24px; } }
/* owner 2026-11-04 (annotation on the docs/19 build): on desktop the choices sit on the left under the title, the 3D window on the right */
@media (min-width: 1069px) {
  body[data-page="still"] .sec--look { --look-h: clamp(300px, calc(100svh - 440px), 560px); }
  body[data-page="still"] .sec--look > .wrap-ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
  body[data-page="still"] .sec--look .design { display: contents; }
  body[data-page="still"] .sec--look #wear { grid-area: 1 / 1; }
  body[data-page="still"] .sec--look .look-stage { grid-area: 1 / 2 / 4 / 3; padding: 0; height: auto; aspect-ratio: 5 / 4; }
  body[data-page="still"] .sec--look .look-stage .s3d { width: 100%; }   /* owner 2026-11-04: the plate's tab was cut in the top view — the 1.15 frame is back; the window is 5:4 so the 4:3 canvas has room above and below */
  body[data-page="still"] .sec--look .design-picker { grid-area: 2 / 1; margin-top: 40px; max-width: 36rem; }   /* owner: about as wide as the intro above */
  body[data-page="still"] .sec--look .look-guide { grid-area: 3 / 1; }
  /* owner 2026-11-04: more air above, below and between the lines of the design block */
  body[data-page="still"] .sec--look { padding-block: 168px 152px; }
  body[data-page="still"] .sec--look #wear .eyebrow { margin-bottom: 20px; }
  body[data-page="still"] .sec--look .look-intro { margin-top: 28px; line-height: 1.65; }
  body[data-page="still"] .sec--look .design-picker { margin-top: 56px; }
  body[data-page="still"] .sec--look .design-opt { min-height: 60px; padding-block: 18px; }
  body[data-page="still"] .sec--look .look-guide { margin-top: 44px; }
  body[data-page="still"] .sec--look .look-stage { align-self: stretch; aspect-ratio: auto; }   /* as tall as the left column; the 4:3 canvas sits in the middle */
}
/* owner 2026-11-04: the App puts several options in one grouped card (04 §9.5, "多个选项放进一张分组卡片"), not one card per row:
   card surface #151518, inset 1 px dividers, the chosen row keeps a white check; a row never lifts or tints, its content shrinks to .97 */
body:is([data-page="still"], [data-page="how"]) .design-picker { display: grid; margin-top: 20px; background: var(--card-display); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
@media (min-width: 735px) and (max-width: 1068px) { body[data-page="still"] .design-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-page="still"] .design-opt + .design-opt { border-top: 0; border-left: 1px solid var(--card-line); margin-left: 0; padding-left: 20px; } }
body:is([data-page="still"], [data-page="how"]) .design-opt { position: relative; display: flex; align-items: center; min-height: 52px; margin: 0 20px; padding: 14px 32px 14px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--body); font: 500 15px/1.35 var(--font-body); text-align: left; cursor: pointer; }
body:is([data-page="still"], [data-page="how"]) .design-opt + .design-opt { border-top: 1px solid var(--card-line); }
body:is([data-page="still"], [data-page="how"]) .design-opt > span { transition: transform .15s var(--ease), color .15s var(--ease); }
body:is([data-page="still"], [data-page="how"]) .design-opt:hover, body:is([data-page="still"], [data-page="how"]) .design-opt[aria-checked="true"] { color: var(--text); }
body:is([data-page="still"], [data-page="how"]) .design-opt:active > span { transform: scale(.97); transition-duration: .08s; }
body:is([data-page="still"], [data-page="how"]) .design-opt::after { content: ""; position: absolute; right: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f2f2ef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
body:is([data-page="still"], [data-page="how"]) .design-opt[aria-checked="true"]::after { opacity: 1; }
body[data-page="still"] .set-choice label:has(input:checked)::after { opacity: 1; }
body:is([data-page="still"], [data-page="how"]) .design-opt:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
/* owner 2026-11-04: each point's line sits inside the 3D window and fades in 0.2 s after its move (still-design.js adds .show);
   bottom right by default, data-cap="tl" puts it top left */
body[data-page="still"] .look-stage .design-text { position: absolute; z-index: 3; right: 28px; bottom: 24px; max-width: min(24em, calc(100% - 56px)); margin: 0; font-size: 15px; line-height: 1.55; color: var(--sec); text-align: right; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
body[data-page="still"] .look-stage .design-text.show { opacity: 1; }
body[data-page="still"] .look-stage[data-cap="tl"] .design-text { right: auto; bottom: auto; left: 28px; top: 24px; text-align: left; }
@media (prefers-reduced-motion: reduce) { body[data-page="still"] .look-stage .design-text { transition: none; } }
body[data-page="still"] .look-guide { margin-top: 28px; }

body[data-page="still"] .rec-demo { margin: 0; }
body[data-page="still"] .ftabs-text .lead { margin-top: 0; max-width: 30em; }
body[data-page="still"] [data-section="features"] .ftabs { margin-top: 40px; }

body[data-page="still"] .qcards { display: grid; gap: 16px; margin-top: 40px; }
body[data-page="still"] .qcard { display: flex; flex-direction: column; padding: 24px 24px 24px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
body[data-page="still"] .qcard p { margin-top: 10px; max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--body); }
body[data-page="still"] .qcard .qcard-link { margin-top: auto; padding-top: 20px; }
@media (min-width: 1069px) { body[data-page="still"] .qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; } }

body[data-page="still"] .set-choice { display: grid; gap: 10px; background: none; border: 0; border-radius: 0; box-shadow: none; }
body[data-page="still"] .set-choice label { margin: 0; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-ctrl); color: var(--sec); transition: transform .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
body[data-page="still"] .set-choice label + label { border-top: 1px solid var(--line-2); }
body[data-page="still"] .set-choice label:hover { border-color: #45454b; }
body[data-page="still"] .set-choice label:has(input:checked) { border-color: rgba(255,255,255,.4); background: #202024; color: var(--text); }
body[data-page="still"] .set-choice label:active { transform: scale(.985); border-color: rgba(255,255,255,.52); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition-duration: .08s; }
body[data-page="still"] .set-choice label:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 14px; }
body[data-page="still"] .set-choice input { left: 0; width: 100%; }
body[data-page="still"] .set-choice .plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--text); }
body[data-page="still"] .set-choice .plan-price { flex: none; font-variant-numeric: tabular-nums; }
body[data-page="still"] .set-choice small { line-height: 1.5; margin-top: 4px; }
body[data-page="still"] .plan-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--quiet); }
body[data-page="still"] .plan-note + .btn--block { margin-top: 20px; }
@media (min-width: 1069px) { body[data-page="still"] .buy-grid { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 64px; } }
body[data-page="still"] .buy-more { margin-top: 40px; }
body[data-page="still"] .buy-more .buy-facts { margin-top: 0; }
@media (min-width: 1069px) {
  body[data-page="still"] .buy-more .buy-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-page="still"] .buy-more .buy-facts > div { display: block; margin: 0; padding: 20px 24px; }
  body[data-page="still"] .buy-more .buy-facts > div + div { border-top: 0; border-left: 1px solid var(--card-line); }
  body[data-page="still"] .buy-more .buy-facts dd { margin-top: 6px; }
}
body[data-page="still"] .buy-more .buy-facts dd .btn-nav { margin-top: 12px; }
body[data-page="still"] .use-notes { margin-top: 28px; max-width: 52em; }
body[data-page="still"] .use-notes p:not(.eyebrow) { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--quiet); }
body[data-page="still"] .use-notes strong { color: var(--sec); font-weight: 600; }
body[data-page="still"] .use-notes .eyebrow { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { body[data-page="still"] :is(.design-opt > span, .set-choice label) { transition: none; } }
@media (max-width: 1068px) { body[data-page="still"] .rec-demo { order: 0; margin-top: 8px; } }   /* one block: title and text first, then the animation */

/* Owner 2026-11-04: one content width on desktop for the whole site, after apple.com's current product pages (measured: AirPods Pro,
   iPhone 17 Pro, Apple Watch Series 11): 87.5 % of the window, at most 1260 px, centred. Header, product bar, heroes, sections, buy bar
   and footer share this edge. Text measures (--narrow 692) are unchanged. Notes: work/review/layout-margins/README.md */
@media (min-width: 1069px) {
  :root { --content: min(87.5vw, 1260px); --wide: min(87.5vw, 1260px); }   /* vw, not %: the same width when nested in another wrap (e.g. the how-it-works scrub grid) */
  .site-header .wrap { width: var(--content); }
  /* hero text sits in the media frame (as wide as the window or 4:3 of its height): measure the same grid in vw so it lines up */
  .hero-v-top, .hero-v-bottom { --hero-side: calc((min(100vw, (100svh - var(--header-h)) * 1.3333) - min(87.5vw, 1260px)) / 2); }
  html body[data-page="why"] .page-hero > .wrap-ch { max-width: none; }
  /* STILL design: the title keeps its two lines; the left column is never narrower than them, the 3D window takes the rest */
  body[data-page="still"] .sec--look > .wrap-ch { grid-template-columns: var(--still-split); }
  body[data-page="still"] .sec--look #wear h2 .hl { white-space: nowrap; }
}

/* Owner 2026-11-04: a section's eyebrow and its level-1 title keep the App's main-title ratio (11 : 39, title = 3.5 × eyebrow).
   The eyebrow follows --t1 (48 px title → about 14 px), never below the App's 11 px (12 px in Chinese). First screens keep their own sizes. */
main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .eyebrow:has(+ h2.display) { font-size: max(11px, calc(var(--t1) / 3.5)); }
html:lang(zh) main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .eyebrow:has(+ h2.display) { font-size: max(12px, calc(var(--t1) / 3.5)); }

/* Owner 2026-11-04: the buy facts follow the App's report summary card (globals.css .sharedSummary.nightSleepSummary): an info card
   (#151518, 24 / 20 padding), MonoSpec 11 px uppercase labels in the secondary grey, the text 12 px under them, and 1 px dividers that
   run only the height of the content, not the card. The shipping row no longer carries a button (the policy is still being prepared). */
@media (min-width: 1069px) {
  body[data-page="still"] .buy-more .buy-facts { padding: 24px 20px; }
  body[data-page="still"] .buy-more .buy-facts > div { padding: 0 28px; }
  body[data-page="still"] .buy-more .buy-facts > div:first-child { padding-left: 0; }
  body[data-page="still"] .buy-more .buy-facts > div:last-child { padding-right: 0; }
}
body[data-page="still"] .buy-more .buy-facts dt { font: 500 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sec); }
html:lang(zh) body[data-page="still"] .buy-more .buy-facts dt { font-size: 12px; letter-spacing: .08em; }
body[data-page="still"] .buy-more .buy-facts dd { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--body); }

/* Owner 2026-11-04: the product bar shows which page you are on, like the main nav — the current item in the text colour with a
   1 px white underline (Overview on STILL / After Light, Tech Specs, How it works) */
@media (min-width: 735px) {   /* wherever the links sit in a row (below 735 they are a drop-down list) */
  .localbar-links a, .localbar-links a:last-child { border-bottom: 1px solid transparent; }
  .localbar-links a[aria-current="page"] { border-bottom-color: var(--text); }
}
/* owner 2026-11-04: the Tech Specs intro starts on the same left edge as its title (it was a centred 30em block) */
.sec--specs-head .lead { margin-left: 0; margin-right: auto; }
/* owner 2026-11-04: the product name in the product bar leads to that product's overview (as on apple.com) */
a.localbar-name { text-decoration: none; }
a.localbar-name:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }

/* owner 2026-11-04: the four design points use the App's measurement detail switch (globals.css .sleepEvidenceSwitch) instead of a
   check: a small round dot before each line, the line's own colour in order blue / mint / orange / lavender; unselected rows show the
   muted dot and secondary-grey text, the selected row the full colour and white text. Dot 6 px here (App 4 px at 12 px type). */
body:is([data-page="still"], [data-page="how"]) .design-opt::after { display: none; }
body:is([data-page="still"], [data-page="how"]) .design-opt { --dot: #b8dcff; --dot-muted: #404d59; padding-right: 0; color: var(--sec); }
body:is([data-page="still"], [data-page="how"]) .design-opt:nth-child(2) { --dot: #9ff5e8; --dot-muted: #3a5955; }
body:is([data-page="still"], [data-page="how"]) .design-opt:nth-child(3) { --dot: #ffd2b8; --dot-muted: #594a40; }
body:is([data-page="still"], [data-page="how"]) .design-opt:nth-child(4) { --dot: #c9b9ff; --dot-muted: #464159; }
body:is([data-page="still"], [data-page="how"]) .design-opt::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 14px; border-radius: 50%; background: var(--dot-muted); transition: background-color .15s var(--ease); }
body:is([data-page="still"], [data-page="how"]) .design-opt[aria-checked="true"] { color: var(--text); }
body:is([data-page="still"], [data-page="how"]) .design-opt[aria-checked="true"]::before { background: var(--dot); }
body:is([data-page="still"], [data-page="how"]) .design-opt:hover { color: var(--body); }
body:is([data-page="still"], [data-page="how"]) .design-opt[aria-checked="true"]:hover { color: var(--text); }

/* docs/18 §3.3 / docs/19 G (2026-11-04): Nightly records sits on the Design grid. One split for both blocks (same tracks, same 56 px
   gap): the left column is half the grid, or wide enough for the Design title's two lines (13 × the level-1 size), whichever is
   larger — the same value Design already resolved to, now written once. Records keeps its own heights (no stretching). */
@media (min-width: 1069px) {
  body:is([data-page="still"], [data-page="specs"], [data-page="how"]) { --still-split: max(calc((100% - 56px) / 2), calc(var(--t1) * 13)) minmax(0, 1fr); }
  html:lang(zh) body:is([data-page="still"], [data-page="specs"], [data-page="how"]) { --still-split: minmax(0, 1fr) minmax(0, 1fr); }   /* the Chinese title fits a half column: the split Design already had */
  /* owner 2026-11-04: laid out like Design — eyebrow and title in the left column (English title in three lines), the window on the
     right from the eyebrow down, in Design's window proportions (580 × 636 English, 602 × 641 Chinese at 1440 / 1800) */
  body[data-page="still"] [data-section="features"] .ftabs { margin-top: 0; }
  body[data-page="still"] [data-section="features"] .ftabs-body { grid-template-columns: var(--still-split); column-gap: 56px; margin-top: 0; }
  body[data-page="still"] [data-section="features"] .ftabs-text .lead { margin-top: 28px; }
  body[data-page="still"] [data-section="features"] .rec-demo { align-self: start; height: auto; aspect-ratio: 580 / 636; }
  html:lang(zh) body[data-page="still"] [data-section="features"] .rec-demo { aspect-ratio: 602 / 641; }
}
body[data-page="still"] .rec-plus { margin-top: 20px; max-width: 30em; font-size: 17px; line-height: 1.55; color: var(--text); }

/* STILL purchase membership: one paragraph, lavender Plus words only. */
body[data-page="still"] .buy-membership { margin-top: 20px; font-family: var(--font-body, sans-serif); font-size: 14px; line-height: 1.6; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--sec); }
body[data-page="still"] .buy-membership-plus { color: var(--lavender); }

/* Selected package beside the purchase total; uses existing plan visibility. */
body[data-page="still"] .buy-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
body[data-page="still"] .buy-price-row .price { margin: 0; }
body[data-page="still"] .buy-selected-plan { margin: 0; color: var(--sec); font-size: 14px; line-height: 1.5; }

/* owner 2026-11-04: like the setup guide in Design, Explore After Light sits at the foot of the left column, level with the bottom
   of the window */
@media (min-width: 1069px) {
  body[data-page="still"] [data-section="features"] .ftabs-text { align-self: stretch; }
  body[data-page="still"] [data-section="features"] .ft-shared { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  body[data-page="still"] [data-section="features"] .ft-shared .btn-row { margin-top: auto; padding-top: 32px; }
}

/* docs/18 §3.4 (2026-11-04): card 3 carries a short App Store status under its answer */
body[data-page="still"] .qcard .qcard-note { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--sec); }
/* owner 2026-11-04: in each set button the price sits in the middle of the row's height, a little in from the check */
body[data-page="still"] .set-choice label > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
body[data-page="still"] .set-choice .plan-row { display: contents; }
body[data-page="still"] .set-choice .plan-row > span:first-child { grid-column: 1; grid-row: 1; }
body[data-page="still"] .set-choice label > span > small { grid-column: 1; grid-row: 2; }
body[data-page="still"] .set-choice .plan-price { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-right: 20px; color: var(--text); }

/* Nightly records: keep CTA level with the stage; supporting copy lives below that row. */
body[data-page="still"] .rec-plus-word { color: var(--lavender); }
body[data-page="still"] .rec-footnote { margin: 0; max-width: 48em; line-height: 1.6; color: var(--sec); }
@media (min-width: 1069px) {
  body[data-page="still"] [data-section="features"] .ftabs-body { row-gap: 20px; }
  body[data-page="still"] .rec-footnote { grid-column: 1; }
}


/* Desktop records typography follows Design's full column and reading measure. */
@media (min-width: 1069px) {
  body[data-page="still"] [data-section="features"] .ftabs-text > h2 { width: 100%; max-width: none; }
  body[data-page="still"] [data-section="features"] .ftabs-text > .lead { width: 100%; max-width: 36em; line-height: 1.65; }
}

/* owner 2026-11-04: Use & safety reads as the page's fine print, one step under body text (Apple's footnotes are 12 / 16; 13 / 18 here
   on the dark page, as these are safety notes), and runs the full content width, its right edge on the facts card's */
body[data-page="still"] .use-notes { max-width: none; margin-top: 72px; }   /* owner: further from the facts card (28 → 48 → 72) */
body[data-page="still"] .use-notes p:not(.eyebrow) { font-size: 13px; line-height: 18px; margin-top: 8px; }

/* owner 2026-11-04 (Overview review): one even gap between the sections after the hero — 120 + 120 = 240 px between each; the
   design block keeps its own space under the hero, the buy block its 80 px above the footer */
@media (min-width: 734px) {
  body[data-page="still"] .sec--look { padding-bottom: 120px; }
  body[data-page="still"] :is(.sec--ftabs, .sec--faq) { padding-block: 120px; }
  body[data-page="still"] .sec--buy { padding-top: 120px; }
}
/* the buy block's "STILL" is an h2 now (one h1 per page); it keeps the size and label it had as the product name */
html main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .buy-info > h2.display { font-size: var(--fs-md); line-height: 1.2; letter-spacing: -.03em; }
html:lang(zh) main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .buy-info > h2.display { letter-spacing: normal; line-height: 1.2; }
html main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .buy-info > .eyebrow:has(+ h2.display) { font-size: 11px; }
html:lang(zh) main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) .buy-info > .eyebrow:has(+ h2.display) { font-size: 12px; }

/* owner 2026-11-04: the two nav levels read one step larger on wide screens — links at the App's nav size (12 px; Apple's global and
   local nav links are 12 px too), Chinese 14 px on both levels, and the product name a clearer step above its links */
@media (min-width: 735px) {
  .nav a, .localbar-links a { font-size: 12px; }
  html:lang(zh) :is(.nav a, .localbar-links a) { font-size: 14px; }
  .localbar-name { font-size: 18px; }
}

/* owner 2026-11-04: on the STILL pages (Overview, Tech Specs, How it works; docs/20 §5) every coloured button takes the visit's light colour (site.js html[data-light]), as the
   home page does; After Light and About keep their own */
html[data-light="mint"]:has(body:is([data-page="still"],[data-page="specs"],[data-page="how"])) { --accent-rgb: 159,245,232; }
html[data-light="sky-blue"]:has(body:is([data-page="still"],[data-page="specs"],[data-page="how"])) { --accent-rgb: 184,220,255; }
html[data-light="lavender"]:has(body:is([data-page="still"],[data-page="specs"],[data-page="how"])) { --accent-rgb: 201,185,255; }
html[data-light="rose-pink"]:has(body:is([data-page="still"],[data-page="specs"],[data-page="how"])) { --accent-rgb: 255,185,217; }
/* owner 2026-11-04: no second Buy beside the hero's — the header's Buy returns once the hero's is off screen (site.js) */
html.hero-buy-in .hdr-right > .btn--sm { display: none; }

/* owner 2026-11-04: the product bar's Buy steps aside while the page's own buy link or buy block is on screen (site.js; docs/20 §4) */
html.page-buy-in .localbar .btn--sm { display: none; }

/* Tech Specs and How it works follow the STILL Overview (docs/20): one grid, left-aligned, 240 px between sections
   (120 above and below each), the last section 80 px above the footer */
@media (min-width: 735px) {
  body[data-page="specs"] .sec--specs { padding-bottom: 80px; }   /* the last section: 80 above the footer */
  body[data-page="how"] [data-section="setup-steps"] { padding-bottom: 120px; }
  body[data-page="how"] :is([data-section="placement"], [data-section="two-people"], [data-section="first-nights"], [data-section="bed-check"]) { padding-block: 120px; }
  body[data-page="how"] [data-section="bed-check"] { padding-bottom: 80px; }   /* the last section since the closing band went (owner 2026-11-04) */
  /* the bed check sits on the grid's left edge (it was a centred 692 px column); its form keeps that reading width */
  body[data-page="how"] [data-section="bed-check"] > .wrap--narrow { width: var(--content); }
  body[data-page="how"] [data-section="bed-check"] :is(.checker, .result, .fine, .small) { max-width: 692px; }
}

/* owner 2026-11-04: Tech Specs is a page about the specs only — no price, no Buy (header and product bar included) */
body[data-page="specs"] .hdr-right > .btn--sm { display: none; }

body[data-page="specs"] .sec--specs-head { padding-bottom: 40px; }

/* owner 2026-11-04: Tech Specs follows the STILL Overview (docs/20 §2–3). The top is a hero: the Overview hero's kicker,
   title and intro levels. Each category's lines sit in one App ordinary card, its name above the card; the three type levels are
   set below (owner 2026-11-04). */
body[data-page="specs"] .sec--specs-head { --ht: calc(var(--fs-hero) * 1.1); }
body[data-page="specs"] .sec--specs-head .hero-kicker { margin-bottom: 0; }
body[data-page="specs"] .sec--specs-head .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--quiet); max-width: 34em; margin-top: 28px; }
/* owner 2026-11-04: as in the App, the group title sits outside its card (title → card 12, between groups 28) */
body[data-page="specs"] .spec-cat + .spec-cat { margin-top: 28px; }
/* owner 2026-11-04: three levels in each card, after the App — the category in the largest MonoSpec, each line's name in
   MonoSpec, its value smaller and greyer in the reading (system) font */
body[data-page="specs"] .spec-name { font: 500 24px/1.2 var(--font-display); letter-spacing: -.02em; text-transform: none; color: var(--text); margin: 0 0 12px; }
html:lang(zh) body[data-page="specs"] .spec-name { font-size: 24px; font-weight: 600; letter-spacing: 0; }
body[data-page="specs"] .spec-list { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
body[data-page="specs"] .spec-list > div { margin-inline: 24px; }
body[data-page="specs"] .spec-list dt { font: 500 17px/1.4 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
html:lang(zh) body[data-page="specs"] .spec-list dt { font-size: 17px; letter-spacing: 0; }
body[data-page="specs"] .spec-list dd { font: 400 14px/1.55 var(--font-body); color: var(--sec); }
body[data-page="specs"] .spec-list dd.tba { color: var(--quiet); }
/* owner 2026-11-04: the Tech Specs kicker and title sit where the Overview hero's do — the hero title's top is 5 % (6 % from
   1069 px) of the screen below the top bar (.hero-v-top) */
/* the black starts right under the 48 px product bar (no strip of page grey between), the kicker stays put */
body[data-page="specs"] .sec--specs-head { margin-top: calc(48px - var(--header-h)); padding-top: calc((100svh - var(--header-h)) * .05 + var(--header-h) - 48px); }
@media (min-width: 1069px) { body[data-page="specs"] .sec--specs-head { padding-top: calc((100svh - var(--header-h)) * .06 + var(--header-h) - 48px); } }

/* owner 2026-11-04: a compact Tech Specs top — no note line and (since the owner took it out) no product picture: the kicker,
   title and intro only */

/* owner 2026-11-04: one ground for the whole Tech Specs page, footer included (the colour is set below) */
body[data-page="specs"] main .sec, body[data-page="specs"] .site-footer { background: transparent; }

/* Tech Specs pictures inside a category (docs/05 配图规则): between the category title and its card, no frame; a one-line caption
   at the left edge */
body[data-page="specs"] .spec-fig { margin: 0 0 16px; }
body[data-page="specs"] .spec-fig img { display: block; width: 100%; max-width: 880px; height: auto; margin-inline: auto; }
body[data-page="specs"] .spec-fig figcaption { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--sec); }

/* owner 2026-11-04 (chosen over pure black): Tech Specs on the App page colour (--surface-page #121214) */
body[data-page="specs"], body[data-page="specs"] .sec--specs-head { background: var(--bg); }
/* the dimensions figure, the Apple tech-specs way (apple.com/iphone-18-pro/specs, owner 2026-11-04): one axonometric view in the
   guide's grey outlined style (work/still3d/render_specs_dims.py iso), no dimension lines; each measurement is a small text block
   beside the edge it describes — a bold label, then inches over (mm) in English, millimetres in Chinese; 12 / 16 secondary */
body[data-page="specs"] .dim-diagram { position: relative; width: calc(var(--w, 924) * var(--dim-k, .5) * 1px); max-width: 100%; margin: 0; }   /* one scale for every part: .5 px per render pixel (5 px / mm) */
body[data-page="specs"] .dim-diagram img { display: block; width: 100%; height: auto; }
body[data-page="specs"] .dim-text { position: absolute; font: 400 12px/16px var(--font-body); color: var(--sec); white-space: nowrap; }
body[data-page="specs"] .dim-text strong { display: block; font-weight: 600; }
body[data-page="specs"] .dim-text span { display: block; }
body[data-page="specs"] .dim-text--d { left: 74%; bottom: 96%; }   /* above the far right rim */
body[data-page="specs"] .dim-text--t { left: calc(100% + 16px); top: 62%; }   /* beside the near right edge, clear of the rim (owner 2026-11-04: it sat too close) */
body[data-page="specs"] .dim-text--ps { left: 66%; bottom: 97%; }  /* the plate: its footprint above the far rim */
body[data-page="specs"] .dim-text--ph { left: 101%; top: 50%; }    /* its height beside the near right rim */
/* owner 2026-11-04: STILL and its base plate side by side at the same scale, each with its sizes and its name below, as Apple sets
   iPhone 18 Pro beside 18 Pro Max */
body[data-page="specs"] .dim-row { display: flex; justify-content: center; align-items: flex-end; gap: 128px; padding-right: 80px; }
@media (max-width: 1439px) { body[data-page="specs"] .dim-row { --dim-k: .46; } }   /* both parts a little smaller, still one scale, so they fit at 1280 */   /* room for the plate's height label */
body[data-page="specs"] .dim-name { margin: 28px 0 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--text); }

/* owner 2026-11-04: the dimensions figure and its lines are one card, like the App's My STILL card (DeviceMediaCard): one outline,
   the black media stage across the top (no frame of its own), the lines straight under it. The stage is as tall as its content,
   not the App's 5:4 — on a 1260 px card 5:4 would be over 1000 px tall. */
body[data-page="specs"] .spec-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
body[data-page="specs"] .spec-card > .spec-list { background: none; border: 0; border-radius: 0; box-shadow: none; }
body[data-page="specs"] .spec-card-media { margin: 0; padding: 72px 24px 20px; background: var(--stage); }



/* Tech Specs: supporting figure and visible safety notes; existing App materials. */
body[data-page="specs"] .spec-box-media { padding: 24px; }
body[data-page="specs"] .spec-box-media img { display: block; width: min(100%, 720px); height: auto; margin-inline: auto; }
body[data-page="specs"] .spec-box-media figcaption { margin-top: 20px; font: 400 13px/18px var(--font-body); color: var(--sec); }
body[data-page="specs"] .spec-safety { margin-top: 24px; }
body[data-page="specs"] .spec-safety p { margin-top: 8px; font: 400 13px/18px var(--font-body); color: var(--sec); }
body[data-page="specs"] .spec-safety strong { font-weight: 600; margin-right: .5em; }

/* owner 2026-11-04: in the box — the parts in one row on the card's black stage, no numbers, at their real relative size (the guide
   renders brought to one scale: assets/img/specs/in-the-box-*.png are 8 px / mm; --w is each file's width) */
body[data-page="specs"] .spec-box-media { padding: 56px 24px 20px; }
body[data-page="specs"] .box-row { --box-k: .29; display: flex; justify-content: center; align-items: flex-end; gap: 48px; }
@media (max-width: 1439px) { body[data-page="specs"] .box-row { --box-k: .26; } }
body[data-page="specs"] .box-item { display: flex; flex-direction: column; align-items: center; }
body[data-page="specs"] .spec-box-media .box-item img { display: block; width: calc(var(--w) * var(--box-k) * 1px); max-width: none; height: auto; margin: 0; }
body[data-page="specs"] .spec-box-media .box-item .dim-name { margin-top: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; }
body[data-page="specs"] .spec-box-media figcaption { margin-top: 36px; }
/* owner 2026-11-04: the safety notes are the page's fine print, last on the page as on the Overview (Use & safety: 72 px below the
   last card, 13 / 18, quiet with secondary bold leads) */
body[data-page="specs"] .spec-safety { margin-top: 72px; }
body[data-page="specs"] .spec-safety p:not(.eyebrow) { margin-top: 8px; font: 400 13px/18px var(--font-body); color: var(--quiet); }
body[data-page="specs"] .spec-safety strong { color: var(--sec); }
body[data-page="specs"] .spec-safety .eyebrow { margin-bottom: 4px; }

/* owner 2026-11-04: links inside the spec cards follow the App's ListRow — the whole row is the link, its text in the reading
   colour and a right chevron at the end (the FAQ chevron: 8 px, --chev #6a6a70 = App --chevron; pressed, it lights to --text).
   Styles only: the <a class="btn"> markup stays as the content round left it. */
body[data-page="specs"] .spec-list > div:has(> dd > a.btn) { position: relative; }
body[data-page="specs"] .spec-list > div:has(> dd > a.btn) > dd { padding-right: 32px; }   /* room for the chevron without moving the columns */
body[data-page="specs"] .spec-list dd > a.btn { all: unset; font: 400 14px/1.55 var(--font-body); color: var(--body); cursor: pointer; }
body[data-page="specs"] .spec-list dd > a.btn::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }   /* the whole row takes the tap */
body[data-page="specs"] .spec-list dd > a.btn::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 1px solid var(--chev); border-bottom: 1px solid var(--chev); transform: rotate(-45deg); transition: border-color .15s; }
body[data-page="specs"] .spec-list dd > a.btn:active::after { border-color: var(--text); }
body[data-page="specs"] .spec-list dd > a.btn:focus-visible::before { outline: 1px solid var(--text); outline-offset: 2px; }

/* Tech Specs closing fixes (owner 2026-11-04, Claude + Codex review): the safety notes' eyebrow is the site eyebrow (MonoSpec 11,
   ZH 12), not the 13 px note text; the names under the dimensions and the box parts share one size; "to be announced" inside a
   value line keeps the quieter colour */
body[data-page="specs"] .spec-safety .eyebrow { font: 500 11px/1.2 var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--sec); }
html:lang(zh) body[data-page="specs"] .spec-safety .eyebrow { font-size: 12px; letter-spacing: .08em; }
body[data-page="specs"] .spec-box-media .box-item .dim-name { font-size: 15px; }
body[data-page="specs"] .spec-list dd .tba { color: var(--quiet); }
/* typography check (owner 2026-11-04): below 1440 px the label column is a little wider so the longest English labels ("Operating
   temperature and humidity") stay on one line; the note above the cards is the page's fine print, 13 / 18 like the other notes */
@media (min-width: 735px) and (max-width: 1439px) { body[data-page="specs"] .spec-list > div { grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); } }
body[data-page="specs"] .sec--specs > .wrap > .small { font-size: 13px; line-height: 18px; }

/* How it works sized like the STILL Overview (owner 2026-11-04: "卡片太小了，学 Overview 那个卡片那么大"; docs/20 §1–3). From 1069 px:
   every text-and-media row uses the Overview split (text 624 | media 580 at 1440, 56 apart); every picture sits in the Overview
   media window — 580 x 636 at 1440 (the Design / records ratio), black, the 5:4 renders and clips whole in the middle (contain,
   nothing cropped), the phone crop at the same ratio; the steps' type takes the Overview levels: title level 2 (--t2), text the
   lead (21 / 1.65, 36em). Copy is unchanged (Codex owns it). */
@media (min-width: 1069px) {
  body[data-page="how"] :is(.step, .split, .scrub.is-pinned .scrub-grid) { grid-template-columns: var(--still-split); column-gap: 56px; }
  body[data-page="how"] .step--rev { grid-template-columns: minmax(0, 1fr) max(calc((100% - 56px) / 2), calc(var(--t1) * 13)); }
  html:lang(zh) body[data-page="how"] .step--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body[data-page="how"] :is(.step > .frame--5x4, .split > .frame--5x4, .scrub.is-pinned .scrub-frame) { width: 100%; aspect-ratio: 580 / 636; height: auto; background: #050505; }   /* the guide clips' own black (#050505 as played; the posters are #090909), so the 5:4 picture has no visible edge in the taller window */
  body[data-page="how"] :is(.step > .frame--5x4, .split > .frame--5x4) > :is(img, video), body[data-page="how"] .scrub.is-pinned .scrub-frame video { width: 100%; height: 100%; object-fit: contain; }
  body[data-page="how"] .split > .phone--crop.phone--tall { width: 100%; aspect-ratio: 580 / 636; }
  html body[data-page="how"] main [data-section]:not([data-section="hero"]):not([data-section="page-hero"]):not([data-section="specs-head"]) :is(.step, .scrub) h3:not(.display):not(.shared .card h3) { font-size: var(--t2); line-height: 1.2; }   /* over the site-wide h3 level-3 rule */
  body[data-page="how"] :is(.step p, .scrub p):not(.small) { font-size: var(--fs-lead); line-height: 1.65; max-width: 36em; color: var(--body); }
  body[data-page="how"] .step-list { max-width: 36em; }
  body[data-page="how"] .step-list li { font-size: 17px; line-height: 1.6; }
}
@media (min-width: 1069px) { body[data-page="how"] :is(.step > .frame--5x4, .split > .frame--5x4, .scrub.is-pinned .scrub-frame) > :is(img, video) { background: #050505; } }

/* How it works, reorganised (owner 2026-11-05, docs/21): hero → Place STILL (hardware demo) → Connect After Light (app demo) →
   your bed. The two demo cards keep the Overview split and window (580 x 636 at 1440, set above for .split > .frame--5x4);
   copy reads left, media right in both. */
body[data-page="how"] .sec--how .display > .hl, body[data-page="how"] .sec--check .display > .hl { display: block; }
/* the steps as the Overview Design list (owner 2026-11-05): the same grouped card, dots and type (rules shared above); the
   "secure" row carries the placement conditions as its secondary line (App ListRow title + detail), readable without the video */
body[data-page="how"] .design-picker { margin-top: 40px; max-width: 36rem; }
body[data-page="how"] .design-opt { align-items: flex-start; }
body[data-page="how"] .design-opt::before { margin-top: 7px; }
body[data-page="how"] .opt-detail { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; font-weight: 400; color: var(--sec); }
@media (min-width: 1069px) { body[data-page="how"] .sec--how .split { align-items: start; } body[data-page="how"] .design-picker { margin-top: 34px; } body[data-page="how"] .design-opt { min-height: 60px; padding-block: 18px; } }
body[data-page="how"] .how-need { margin-top: 24px; max-width: 36em; font-size: 15px; line-height: 1.6; color: var(--sec); }
body[data-page="how"] .how-need .textlink { margin-left: .3em; }
body[data-page="how"] .how-end { margin-top: 24px; max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--body); }   /* one closing note at body level (docs/21 round 2) */
body[data-page="how"] .how-note { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--sec); }
/* demo card: the steps stacked in the window, one shown at a time; captions bottom right (as the Overview Design window),
   the app steps named top left, Pause / Replay bottom left */
body[data-page="how"] .demo { position: relative; overflow: hidden; }
body[data-page="how"] .demo > [data-demo-step] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; opacity: 0; transition: opacity .45s var(--ease); }
body[data-page="how"] .demo > [data-demo-step].is-on { opacity: 1; }
body[data-page="how"] .demo-phone { display: flex; justify-content: center; align-items: flex-start; padding-top: 72px; }
body[data-page="how"] .demo-phone img { width: 62%; height: auto; }
body[data-page="how"] .demo-caps p { position: absolute; right: 28px; bottom: 24px; max-width: min(24em, calc(100% - 56px)); margin: 0; text-align: right; font-size: 15px; line-height: 1.55; color: var(--sec); opacity: 0; transition: opacity .3s var(--ease); }
body[data-page="how"] .demo-caps p.is-on { opacity: 1; }
body[data-page="how"] .demo-ctrl { position: absolute; left: 24px; bottom: 24px; display: flex; gap: 8px; z-index: 2; }
/* replay (owner 2026-11-05): the site's own .btn made round at the App's figure-replay size (32), with the App's replay icon; no pause
   control, as in the App. No new material: border, ground and shadow are the .btn's. */
body[data-page="how"] .demo-btn { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { body[data-page="how"] .demo > [data-demo-step], body[data-page="how"] .demo-caps p { transition: none; } }
/* your bed: three plain states, no quiz; the common setups card carries the slatted-base figure (the guide's bed); the other
   two are short text cards, the last one ending in an App ListRow to support */
/* your bed in the Overview Design layout (owner 2026-11-05): the three states are static rows in the same grouped card — a title and
   a secondary line each, no dot, no hover or press (App: a row that does nothing looks like nothing to press); the figure in the window */
body[data-page="how"] .bed-rows { list-style: none; padding: 0; }
body[data-page="how"] .design-row { margin: 0 20px; padding: 18px 0; font: 500 15px/1.35 var(--font-body); color: var(--text); }
body[data-page="how"] .design-row + .design-row { border-top: 1px solid var(--card-line); }
body[data-page="how"] .bed-cta { margin-top: 66px; }
/* bed question dialog (owner 2026-11-05; demo): the App ConversationSheet layout on the site's materials — page ground, card line,
   28 radius; identity top left and a round close top right; the opening and answers as reading text; your words on the right in the
   light's frame (the site's coloured-frame rule, App .conversationUser shape); suggestions and send are the site's .btn; the composer
   is the App groove without its shadow. */
.ask-sheet { width: min(560px, calc(100% - 32px)); height: min(720px, calc(100svh - 64px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--card-line); border-radius: 28px; background: var(--bg); color: var(--body); overflow: hidden; }
.ask-sheet[open] { display: flex; flex-direction: column; }
.ask-sheet::backdrop { background: rgba(0,0,0,.62); }
/* title as the App agent's identity (owner 2026-11-05: "learn the After Light agent"): the App's nine-dot mark (tellMoreMark, 24) and the
   title in MonoSpec 30 / 500, -.045em, white; the close sits level with it */
.ask-id { position: absolute; top: 24px; left: 28px; right: 84px; display: flex; align-items: center; gap: 12px; margin: 0; font: 500 30px/1.1 var(--font-ui); letter-spacing: -.045em; text-transform: uppercase; color: var(--text); }
html:lang(zh) .ask-id { letter-spacing: 0; }
.ask-mark { position: relative; flex: none; width: 24px; height: 24px; }
.ask-mark::after { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><circle cx='11' cy='1.26' r='1.215'/><circle cx='4.915' cy='4.455' r='1.215'/><circle cx='17.085' cy='4.455' r='1.215'/><circle cx='1.715' cy='11' r='1.215'/><circle cx='11' cy='11' r='1.52'/><circle cx='20.285' cy='11' r='1.215'/><circle cx='4.915' cy='17.545' r='1.215'/><circle cx='17.085' cy='17.545' r='1.215'/><circle cx='11' cy='20.74' r='1.215'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><circle cx='11' cy='1.26' r='1.215'/><circle cx='4.915' cy='4.455' r='1.215'/><circle cx='17.085' cy='4.455' r='1.215'/><circle cx='1.715' cy='11' r='1.215'/><circle cx='11' cy='11' r='1.52'/><circle cx='20.285' cy='11' r='1.215'/><circle cx='4.915' cy='17.545' r='1.215'/><circle cx='17.085' cy='17.545' r='1.215'/><circle cx='11' cy='20.74' r='1.215'/></svg>") center / 100% 100% no-repeat; }
.ask-close { position: absolute; top: 21px; right: 22px; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; }
.ask-transcript { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 88px; padding: 12px 28px 24px; scrollbar-width: none; }   /* scrolls below the identity and close, never under them */
.ask-transcript::-webkit-scrollbar { display: none; }
.ask-reply { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--body); }
.ask-you { width: fit-content; max-width: 88%; margin: 0 0 24px auto; padding: 12px 16px; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 20px 20px 4px 20px; background: rgba(var(--accent-rgb), .045); font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 24px; }
.ask-chips .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
.ask-composer { padding: 12px 28px 22px; }
.ask-input { display: flex; align-items: flex-end; gap: 8px; padding: 4px 4px 4px 8px; border: 1px solid var(--card-line); border-radius: 20px; background: #141416; }
.ask-input textarea { flex: 1; min-height: 36px; max-height: 120px; padding: 8px; border: 0; background: none; color: var(--text); font: 15px/1.4 var(--font-body); resize: none; outline: none; }
.ask-input textarea::placeholder { color: var(--quiet); }
.ask-input:focus-within { border-color: var(--line-2); }
.ask-send { width: 32px; min-height: 32px; height: 32px; margin: 2px; padding: 0; border-radius: 50%; }
.ask-note { margin: 10px 4px 0; font-size: 12px; line-height: 18px; color: var(--quiet); }
/* measured against the Overview Design / Nightly records blocks at 1440–1728 (owner 2026-11-05): title → intro 28, intro line 1.65,
   intro → card 34, card → button 66 (as seen there), Chinese window 602 × 641 */
@media (min-width: 1069px) {
  body[data-page="how"] .sec--how .how-copy > .lead { margin-top: 28px; line-height: 1.65; }
  html:lang(zh) body[data-page="how"] .sec--how .split > .frame--5x4 { aspect-ratio: 602 / 641; }
}
body[data-page="how"] .split > .frame--5x4.bed-media { position: relative; margin: 0; background: #090909; }   /* the render's own black */
body[data-page="how"] .split > .frame--5x4.bed-media > img { width: 100%; height: 100%; object-fit: contain; background: #090909; }
body[data-page="how"] .bed-media figcaption { position: absolute; right: 24px; bottom: 24px; font-size: 15px; line-height: 23px; color: var(--sec); }
/* section rhythm of the reorganised page (docs/20 §1: 240 between sections, 80 above the footer) */
@media (min-width: 735px) {
  body[data-page="how"] [data-section="place"] { padding-block: 80px 120px; }
  body[data-page="how"] [data-section="connect"] { padding-block: 120px; }
}
body[data-page="how"] .page-hero .small { margin-top: 16px; }
/* the head as the Overview head (owner 2026-11-05; docs/20: text-page head = Overview hero kicker / title / height), as Tech Specs:
   kicker .hero-kicker, title .hero-slogan at --ht, the block 6 % of the screen below the bar (5 % below 1069) */
body[data-page="how"] .page-hero { --ht: calc(var(--fs-hero) * 1.1); margin-top: calc(48px - var(--header-h)); padding-top: calc((100svh - var(--header-h)) * .05 + var(--header-h) - 48px); }
@media (min-width: 1069px) { body[data-page="how"] .page-hero { padding-top: calc((100svh - var(--header-h)) * .06 + var(--header-h) - 48px); } }
body[data-page="how"] .page-hero .hero-kicker { margin-bottom: 0; }   /* the bed-check link, a step below the intro */

/* Connection requirements link starts on its own line. */
body[data-page="how"] #connect .how-need .textlink { margin-left: 0; }

/* app card (owner 2026-11-05): three success screens captured from the deployed After Light prototype at one size, the phone cut
   by the window's foot; the line sits top left as the Overview Design window's [data-cap="tl"] (left 28, top 24, left-aligned) */
body[data-page="how"] #demo-connect .demo-caps p { top: 24px; bottom: auto; left: 28px; right: auto; text-align: left; }
body[data-page="how"] #demo-connect .demo-phone { padding-top: 120px; }
body[data-page="how"] #demo-connect .demo-phone img { width: 57%; height: auto; max-width: none; }

/* Connect CTA follows the Overview button and rests at the media baseline. */
body[data-page="how"] .connect-cta { margin-top: 66px; }
@media (min-width: 1069px) {
 body[data-page="how"] :is(#connect, #placement) .split { align-items: stretch; }
 body[data-page="how"] :is(#connect, #placement) .how-copy { display: flex; flex-direction: column; align-items: flex-start; }
 body[data-page="how"] :is(#connect, #placement) .design-picker { width: 100%; }
 body[data-page="how"] :is(#connect, #placement) .connect-cta { margin-top: auto; padding-top: 66px; }
}


.still-safety-notes strong { color: var(--sec); font-weight: 600; margin-right: .3em; }
.still-safety-notes .eyebrow { margin-bottom: 4px; }

/* Shared STILL safety footnotes: Overview, Tech Specs, How it works. */
body:is([data-page="still"], [data-page="specs"], [data-page="how"]) .still-safety { padding: 0 0 80px; }
.still-safety-notes p:not(.eyebrow) { margin-top: 8px; font: 400 13px/18px var(--font-body); color: var(--quiet); }
.still-safety-notes { border-top: 1px solid var(--line); padding-top: 32px; }

/* Review 22: match the STILL text-hero description hierarchy. */
body[data-page="how"] .page-hero .lead { color: var(--quiet); }