/* Codex: hero-only layout, 2026-11-03. Content strings remain owned by their pages/i18n. */
:is(.hero-v-top,.page-hero) h1 { text-wrap: wrap; }
/* Full-screen STILL: an intentional opening line, not width-dependent wrapping. */
html:lang(en) .hero-v--still h1[data-i18n="still.hero.slogan"] > .hl:first-child { display:block; }
html:lang(zh) .hero-v--still h1[data-i18n="still.hero.slogan"] > .hl { display:inline-block; }
/* About: quiet, full-bleed brand stage using the existing wordmark. */
body[data-page="why"] .page-hero { min-height:calc(100svh - var(--header-h)); box-sizing:border-box; display:flex; padding-block:48px 64px; }
body[data-page="why"] .page-hero > .wrap-ch { width:var(--content); max-width:1200px; display:flex; flex-direction:column; align-items:center; }
body[data-page="why"] .page-hero h1 { max-width:100%; }
body[data-page="why"] .page-hero h1 > .hl { display:block; }
.about-hero-mark { display:flex; flex:1; align-items:center; justify-content:center; width:100%; padding:64px 0; min-height:180px; }
.about-hero-mark img { width:min(72%,640px); height:auto; display:block; }
body[data-page="why"] .page-hero .lead { max-width:42em; margin-top:0; }
@media (max-width:734px) {
  html:lang(en) .hero-v--still h1[data-i18n="still.hero.slogan"] > .hl > .hl { display:block; }
  html:lang(zh) .hero-v--still h1[data-i18n="still.hero.slogan"] > .hl { display:block; }
  .hero-al h1[data-i18n="al.hero.h"] > .hl { display:block; }
  .page-hero h1:is([data-i18n="how.h"],[data-i18n="sup.h"],[data-i18n="priv.h"]) > .hl { display:block; }
  body[data-page="why"] .page-hero { padding-block:56px 40px; }
  body[data-page="why"] .page-hero > .wrap-ch { width:calc(100% - 40px); }
  .about-hero-mark { min-height:140px; padding:48px 0; }
  .about-hero-mark img { width:90%; }
}

@media (max-width:734px) {
  .hero-al .hero-v-top { width:calc(100% - 40px); }
  .hero-al .hero-v-group, .hero-al .hero-v-group h1 { width:100%; }
  html:lang(en) body[data-page="why"] .page-hero h1 > .hl:first-child > .hl { display:block; }
}

/* One title alignment and spacing across product and text heroes. */
.page-hero > .wrap-ch, .sec--specs-head > .wrap-ch { text-align:left; }
.page-hero .eyebrow { margin-bottom:14px; }
.page-hero h1 { margin-top:0; }
.page-hero .lead { margin-left:0; }
body[data-page="why"] .page-hero { background:#000; }
body[data-page="why"] .page-hero > .wrap-ch { align-items:stretch; text-align:left; }
body[data-page="why"] .page-hero h1 { text-align:left; }
@media (max-width:734px) {
  .hero-v-top { width:calc(100% - 40px); text-align:left; }
  .hero-v-group { text-align:left; }
  .page-hero .eyebrow { margin-bottom:10px; }
}

.page-hero .eyebrow { text-align:left; margin-left:0; margin-right:0; }

/* Hide the welcome end-frame poster until playback actually starts; reduced motion and no-JS remain static. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-hero-welcome]:not(.welcome-media-ready) .hero-w-media { visibility:hidden; }
}

/* Enter the waiting state immediately; only the reveal may fade. */
.hero-w.is-wait .hero-text { transition:none; }

/* About (owner 2026-11-03): the wordmark goes from black to pure white, growing slightly (to 105%) as it lights, in one motion —
   no glow, no tint. One filter + scale on the <img> (its fill is #f2f2f4; brightness 1.06 makes it #fff).
   Reduced motion / no JS: the plain wordmark. */
body[data-page="why"] .page-hero .lead { max-width:36em; }
body[data-page="why"] .page-hero .lead > .hl { display:block; }
.mark-light { display:block; width:min(72%,640px); }
.about-hero-mark .mark-light img { width:100%; }
@media (max-width:734px) { .mark-light { width:90%; } }
@media (prefers-reduced-motion: no-preference) {
  .js .about-intro .about-hero-mark img { filter:brightness(0); transform:scale(1); }
  .js .about-intro :is(.eyebrow,h1,.lead) { opacity:0; transform:none; transition:none; }
  html:not(.hero-boot) .about-intro .about-hero-mark img { animation:aboutMarkFocus 2.6s cubic-bezier(.4,0,.3,1) both; }
  html:not(.hero-boot) .about-intro :is(.eyebrow,h1,.lead) { animation:aboutCopyIntro 1s cubic-bezier(.45,0,.55,1) 2.3s both; }   /* owner: all the copy together, a little before the mark finishes (2.6 s) */
}
/* owner: no blur — black to pure white, growing slightly as it lights, one motion */
@keyframes aboutMarkFocus {
  from { filter:brightness(0); transform:scale(1); }
  to { filter:brightness(1.06); transform:scale(1.05); }
}
@keyframes aboutCopyIntro { from {opacity:0} to {opacity:1} }

/* Shared copy entrance: opacity only, one duration and one curve on all four heroes. */
.hero-v .hero-text { transition:opacity 1s cubic-bezier(.45,0,.55,1); transform:none; }
.hero-w.is-wait .hero-text { transition:none; }
.al-live .hero-al .hero-text { opacity:0; transition:opacity 1s cubic-bezier(.45,0,.55,1); transform:none; }
.al-live .hero-al.copy-reveal .hero-text { opacity:1; }

.al-live .hero-al:not(.copy-reveal) .hero-text { transition:none; }

/* Owner: desktop hero slogans use at least two intentional semantic lines. */
@media (min-width:1069px) {
  html .hero-v-top h1:is([data-i18n="still.hero.slogan"],[data-i18n="al.hero.h"]) > .hl,
  html:lang(zh) .hero-v-top [data-i18n="home.hero.h"] > .hl,
  .page-hero h1:is([data-i18n="why.h2"],[data-i18n="how.h"],[data-i18n="sup.h"],[data-i18n="priv.h"]) > .hl { display:block; }
}

@media (min-width:1069px) { html:lang(zh) .hero-v--still h1[data-i18n="still.hero.slogan"] > .hl { display:block; } }

/* App availability is a status, not a disabled purchase control. */
.hero-al .app-coming { opacity:1; cursor:default; border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.09); color:var(--text); }

/* About footer: one quiet fact and a genuine cross-page link. */
.about-hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.about-hero-bottom > .lead { flex:1; min-width:0; }
.about-tech-note { flex:none; text-align:right; color:var(--sec); }
.about-tech-note p { margin:12px 0 0; }
.about-tech-note a:focus-visible { outline:1px solid var(--text); outline-offset:6px; }
@media (prefers-reduced-motion:no-preference) {
  .js .about-intro .about-tech-note { opacity:0; visibility:hidden; }
  html:not(.hero-boot) .about-intro .about-tech-note { animation:aboutInfoIntro 1s cubic-bezier(.45,0,.55,1) 2.3s both; }
}
@keyframes aboutInfoIntro { from {opacity:0;visibility:visible} to {opacity:1;visibility:visible} }
@media (max-width:1068px) { .about-hero-bottom { flex-wrap:wrap; } .about-tech-note { margin-left:auto; } }

body[data-page="technology"] .page-hero { background:var(--stage); }

/* Home, STILL and After Light heroes (owner 2026-11-06: text never covers an image; supersedes "STILL may overlap the title").
   Chinese fills the em box and at equal px reads about 23 % taller than the English capitals, so its title sits one step below the English. */
@media (max-width:1068px) { html:lang(zh) .hero-w [data-i18n="home.hero.h"] > .hl { display:block; } }
html:lang(zh) :is(.hero-w,.hero-v--still) { --ht:32px; }
@media (min-width:735px) { html:lang(zh) :is(.hero-w,.hero-v--still) { --ht:44px; } }

:is(.hero-w,.hero-v--still) .hero-v-top .display { font-size:var(--ht); }

/* Below desktop the titles keep the same two lines as desktop. */
@media (max-width:1068px) {
  html:lang(zh) .hero-v--still h1[data-i18n] > .hl, .hero-al h1[data-i18n="al.hero.h"] > .hl { display:block; }
}
/* Chinese phones: the highlighted clause keeps to one line and lines break evenly, so no word is split or left alone. */
@media (max-width:734px) {
  html:lang(zh) .hero-w .hero-v-bottom .lead { text-wrap:balance; }
  html:lang(zh) .hero-w .hero-v-bottom .lead em { display:inline-block; }
  html:lang(zh) .hero-al .hero-v-buy .small { text-wrap:balance; }
}

/* Desktop (owner 2026-11-06): one composition, scaled as a whole to fit the window. Title, text, button, the product and gaps all follow --u, so their
   proportions never change. The composition is 804u tall and sits in the middle of the hero, so a window wider or taller than it only gets margins outside it.
   Every number is its size in a 1512 x 860 window (hero 804 tall). Type keeps a reading floor (14 / 11 / 12 px), reached only in the smallest windows.
   The header on these pages shares the hero's width so the first screen lines up; the sections below keep the site's --content (1260 at most). */
@media (min-width:1069px) {
  body:is([data-page="home"],[data-page="still"],[data-page="after-light"]) {
    --u:min(calc(100vw / 1512), calc((100svh - var(--header-h)) / 804));
    --hero-w:calc(1260 * var(--u));
  }
  /* owner 2026-11-09: the header keeps the site's one width on every page (it used to follow the hero here and shifted between pages) */
  :is(.hero-w,.hero-v--still) { height:calc(100svh - var(--header-h)); min-height:0; }
  html:lang(en) :is(.hero-w,.hero-v--still) { --ht:calc(60 * var(--u)); }
  html:lang(zh) :is(.hero-w,.hero-v--still) { --ht:calc(52 * var(--u)); }
  :is(.hero-w,.hero-v--still) h1 { white-space:nowrap; }
  :is(.hero-w,.hero-v--still) .hero-v-frame { place-self:center stretch; width:100%; height:calc(804 * var(--u)); max-height:none; aspect-ratio:auto; display:grid; grid-template-rows:calc(178 * var(--u)) minmax(0,1fr) calc(102 * var(--u)); row-gap:calc(48 * var(--u)); padding-block:calc(40 * var(--u)) calc(56 * var(--u)); box-sizing:border-box; }
  :is(.hero-w,.hero-v--still) .hero-v-top, :is(.hero-w,.hero-v--still) .hero-v-bottom { position:relative; inset:auto; width:var(--hero-w); margin-inline:auto; }
  :is(.hero-w,.hero-v--still) .hero-v-top { grid-area:1 / 1; align-self:start; }
  :is(.hero-w,.hero-v--still) .hero-v-top .display { max-width:none; margin-inline:0; }
  :is(.hero-w,.hero-v--still) .hero-v-bottom { grid-area:3 / 1; align-self:end; gap:calc(32 * var(--u)); }
  :is(.hero-w,.hero-v--still) .hero-v-bottom .lead { font-size:max(14px, calc(21 * var(--u))); }
  :is(.hero-w,.hero-v--still) .hero-v-buy { max-width:calc(440 * var(--u)); gap:calc(12 * var(--u)) calc(16 * var(--u)); }
  :is(.hero-w,.hero-v--still) .hero-v-buy .small { font-size:max(11px, calc(14 * var(--u))); }
  :is(.hero-w,.hero-v--still) .hero-v-buy .btn { font-size:max(12px, calc(15 * var(--u))); min-height:calc(45 * var(--u)); padding-inline:calc(20 * var(--u)); border-radius:calc(14 * var(--u)); }
  /* Owner 2026-11-06: the product keeps a limit above the window bottom: 134 of 860, about level with the first line of the corner text. */
  /* Home: STILL runs down between the corner text and the button, hung from the title. The clip is square with black above and below STILL: STILL starts 16 % down and is 68 % of its height */
  .hero-w-media { grid-area:2 / 1 / 4 / 2; position:relative; width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:auto; margin:0; background:none; }
  .hero-w-media video { --clip:calc(588 * var(--u)); inset:auto; left:50%; top:calc(4 * var(--u) - .16 * var(--clip)); width:auto; height:var(--clip); aspect-ratio:1; transform:translateX(-50%); }
  /* STILL page: the 4:3 clip, its black running behind the text. The plate runs from 31 % to 80 % of the clip's height (measured), so 779 tall gives a plate of 380 */
  .hero-v--still:not(.hero-al) .hero-v-media { position:absolute; inset:auto; left:calc(50% - 520 * var(--u)); top:calc(41 * var(--u)); width:calc(1039 * var(--u)); height:calc(779 * var(--u)); min-width:0; aspect-ratio:auto; margin:0; }
  /* After Light: the sphere hangs from the title too; its dots fill about 61 % of the canvas (measured), the floor glow sits just below */
  .hero-al .hero-al-media { grid-area:2 / 1 / 4 / 2; position:relative; inset:auto; width:100%; height:100%; min-width:0; min-height:0; aspect-ratio:auto; margin:0; display:grid; place-items:start center; }
  .hero-al .hero-al-sphere { width:calc(490 * var(--u)); margin-top:calc(-71 * var(--u)); }
}

/* Owner 2026-11-07: Chinese page titles one step below English, as on the three heroes (52 : 60, about .86). The step applies to the page title only. */
html:lang(zh) body:is([data-page="how"],[data-page="updates"]) .page-hero, html:lang(zh) body[data-page="specs"] .sec--specs-head { --ht:32px; }
html:lang(zh) body[data-page="why"] .page-hero h1 { font-size:calc(var(--fs-hero) * .86); }
html:lang(zh) body[data-page="privacy"] .privacy-head h1, html:lang(zh) body:is([data-page="support"],[data-page="legal"]) .helpdoc-head h1 { font-size:calc(var(--t1) * .86); }
@media (min-width:735px) { html:lang(zh) body:is([data-page="how"],[data-page="updates"]) .page-hero, html:lang(zh) body[data-page="specs"] .sec--specs-head { --ht:44px; } }
@media (min-width:1069px) { html:lang(zh) body:is([data-page="how"],[data-page="updates"]) .page-hero, html:lang(zh) body[data-page="specs"] .sec--specs-head { --ht:52px; } }

/* Chinese small print breaks at punctuation or spaces, never inside a word. */
html:lang(zh) .al-plat { word-break:keep-all; overflow-wrap:anywhere; }

/* Chinese page titles step down, the small line above them does not: it keeps the English size. */
html:lang(zh) :is(.hero-w,.hero-v--still,.page-hero,.sec--specs-head) .hero-kicker { font-size:max(11px, calc(var(--ht) / .86 * .256)); }

/* Phones and tablets (owner 2026-11-07): three rows, with the hero exactly the height the browser shows. Title and text never move or shrink; the product takes the middle row.
   --rt and --rb reserve the same room for title and text in both languages, the longest case at the narrowest width of the tier, so with height to spare the product has the same size and place in English and Chinese.
   When height runs out the reserves give way first (--short), then each language's real text sets the room, and the product shrinks. --boxmin is where that starts. Layout only: nothing here depends on .al-live or JS. */
@media (max-width:1068px) {
  :is(.hero-w,.hero-v--still) { display:block; height:auto; min-height:0; padding:0; overflow:hidden; --pt:var(--pad-hero); --pb:40px; --short:max(0px, calc(var(--header-h) + var(--pt) + var(--rt) + var(--gap,16px) + var(--boxmin) + var(--rb) + var(--pb) - 100svh)); }
  :is(.hero-w,.hero-v--still) .hero-v-frame { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(max-content, max(0px, calc(var(--rt) - var(--short)))) minmax(0,1fr) minmax(max-content, max(0px, calc(var(--rb) - var(--short)))); row-gap:calc(var(--gap,16px) / 2); width:100%; height:auto; max-height:none; aspect-ratio:auto; min-height:calc(100svh - var(--header-h)); padding-block:var(--pt) var(--pb); box-sizing:border-box; }
  :is(.hero-w,.hero-v--still) .hero-v-top { position:relative; inset:auto; width:var(--content); margin-inline:auto; text-align:left; align-self:start; }
  :is(.hero-w,.hero-v--still) .hero-v-top .display { margin-inline:0; }
  :is(.hero-w,.hero-v--still) .hero-v-bottom { position:relative; inset:auto; align-self:end; }
  .hero-w .hero-w-media, .hero-v--still .hero-v-media { position:relative; inset:auto; width:100%; min-width:0; height:auto; min-height:0; max-height:none; aspect-ratio:auto; margin:0; flex:none; background:none; container-type:size; }
  /* Home: STILL is 67 % of the square clip, centred (measured over the whole clip). */
  .hero-w-media video { inset:auto; left:50%; top:50%; width:auto; height:min(145cqh, min(100cqw, 480px)); aspect-ratio:1; transform:translate(-50%,-50%); }
  /* STILL page: clip, end frame and cut-out share one box; fx.js reads this box for the cut-out. The plate is 49 % of its height, centred at 55.45 %. */
  .hero-v--still:not(.hero-al) .hero-v-media :is(picture img, video) { inset:auto; left:50%; top:50%; width:auto; height:min(200cqh, 100cqw); max-width:none; aspect-ratio:1; transform:translate(-50%,-55.45%); }
  /* After Light: the canvas's clear margin may run behind the text; its dots are 61 % of it. */
  .hero-al .hero-al-media { display:grid; place-items:center; place-content:center; }
  .hero-al { --sw:min(70cqw, 32svh, 150cqh); }
  .hero-al .hero-al-sphere { width:var(--sw); margin:0; }
  .hero-w { --rt:204px; --rb:181px; --boxmin:200px; }
  .hero-v--still { --rt:159px; --rb:154px; --boxmin:200px; }
  .hero-v--still.hero-al { --rt:159px; --rb:263px; --boxmin:130px; --pb:16px; }
}
@media (max-width:734px) and (max-height:720px) { :is(.hero-w,.hero-v--still) { --pt:56px; --pb:20px; } .hero-v--still.hero-al { --pb:16px; } }
@media (min-width:735px) and (max-width:1068px) {
  .hero-v--still:not(.hero-al) .hero-v-media :is(picture img, video) { height:min(200cqh, 75cqw); aspect-ratio:4 / 3; }
  .hero-w-media video { height:min(145cqh, min(75cqw, 640px)); }
  .hero-w { --rt:213px; --rb:190px; --boxmin:240px; }
  .hero-v--still { --rt:213px; --rb:130px; --boxmin:240px; }
  .hero-v--still.hero-al { --rt:152px; --rb:224px; --boxmin:200px; --pb:40px; }
}
@media (min-width:900px) and (max-width:1068px) {
  :is(.hero-w,.hero-v--still), .hero-v--still.hero-al { --rt:150px; }
}
@media (min-width:735px) and (max-width:1068px) and (max-height:500px) { :is(.hero-w,.hero-v--still), .hero-v--still.hero-al { --pt:12px; --pb:12px; } }

/* Without scripts the browser adds its own controls to the home clip; they would sit on the text. */
.hero-w-media video::-webkit-media-controls { display:none !important; }

/* Phone held sideways and other very short windows (owner 2026-11-07: not fitted to one screen): the hero simply scrolls, and the product keeps a visible size rather than vanishing. */
@media (max-width:1068px) and (max-height:500px) { .hero-w .hero-w-media, .hero-v--still .hero-v-media { height:200px; } }

/* Type details (owner 2026-11-07, after the sspai piece on apple.com.cn): no one- or two-character last lines; low specificity, so any block's own text-wrap still wins.
   Chinese breaks at punctuation and spaces, not inside a word (the rule the STILL page already had). */
:where(main) :is(p,li,dd,dt,summary,figcaption,td,th) { text-wrap:pretty; }
:where(main) :is(h2,h3) { text-wrap:balance; }
/* break-word, not anywhere: Safari's text-wrap:pretty treats anywhere as a normal break and splits words. !important because older page rules still say anywhere. */
html:lang(zh) main :is(p,summary,label,li,dt,dd,td,th,figcaption,h2,h3) { word-break:keep-all; overflow-wrap:break-word !important; }
/* Mid-line punctuation in Chinese titles takes half its width (.pn in the strings), so a comma does not open a gap. A margin rather than the font's "halt" feature, which Safari ignores. */
.pn { margin-right:-.5em; }

/* Phone type scale follows the App (owner 2026-11-07: too crowded; closer to docs/v3/04 section 4.2): title 30, section 24, card 18, body 14 / 1.5, small 12-13, button 12. Chinese titles about .93 of English: the wide, open MonoSpec reads larger than its height (owner 2026-11-07: Chinese looked small). */
@media (max-width:734px) {
  :root { --fs-hero:27.3px; --fs-sec:24px; --fs-md:22px; --fs-sm:18px; --fs-lead:14px; --fs-intro:22px; --fs-step:22px; --fs-cardh:18px; --fs-prose:22px; --t1:24px; --t2:18px; --t3:16px; }
  html:lang(zh) { --t1:22px; }
  html:lang(en) :is(.hero-w,.hero-v--still), html:lang(en) body:is([data-page="how"],[data-page="updates"]) .page-hero, html:lang(en) body[data-page="specs"] .sec--specs-head { --ht:30px; }
  html:lang(zh) :is(.hero-w,.hero-v--still), html:lang(zh) body:is([data-page="how"],[data-page="updates"]) .page-hero, html:lang(zh) body[data-page="specs"] .sec--specs-head { --ht:28px; }
  html:not(:lang(zh)) .hero-v-top .display { max-width:none; }
  body[data-page="why"] .page-hero h1, body[data-page="privacy"] .privacy-head h1, body:is([data-page="support"],[data-page="legal"]) .helpdoc-head h1 { font-size:30px; }
  html:lang(zh) body[data-page="why"] .page-hero h1, html:lang(zh) body[data-page="privacy"] .privacy-head h1, html:lang(zh) body:is([data-page="support"],[data-page="legal"]) .helpdoc-head h1 { font-size:28px; }
  :is(.hero-w,.hero-v--still) .hero-v-bottom .lead { font-size:14px; line-height:1.5; }
  :is(.hero-w,.hero-v--still) .hero-v-buy .small { font-size:12px; }
    :is(.hero-w,.hero-v--still) .hero-v-buy .btn { font-size:12px; }
  /* Many blocks set their own 15-17 px; on phones they all read at the App's 14 / 1.5. !important because the older page rules are more specific. Small print, labels and prices keep their sizes. */
  main .lead { line-height:1.5; }
  main [data-section] :is(p,li,td,dd):not(.price,.eyebrow,.hero-kicker,.small,.fine,.al-tag,.plan-note,.upd-consent,.upd-fine,.upd-msg,.lead),
  main :is(.privacy-topic,.helpdoc-topic) :is(p,li):not(.small,.fine,.eyebrow),
  main :is(.spec-list dt,.al-table tbody th,button.design-opt,.buy-info label) { font-size:14px !important; line-height:1.5 !important; }
  body[data-page="privacy"] main li { font-size:14px; line-height:1.5; }
  main figcaption { font-size:13px !important; }
  .hero-w { --rt:130px; --rb:159px; --boxmin:240px; }
  .hero-v--still { --rt:130px; --rb:138px; --boxmin:200px; }
  .hero-v--still.hero-al { --rt:94px; --rb:229px; --boxmin:160px; }
  main :is(a.btn,button.btn) { font-size:12px; }
}

/* Phone hero with more air (owner 2026-11-07, against AirPods): status and a small button share one row, the product leaves room around it, wider gaps. */
@media (max-width:734px) {
  :is(.hero-w,.hero-v--still) { --gap:40px; --pb:24px; }
  :is(.hero-w,.hero-v--still) .hero-v-bottom .hero-v-buy { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; text-align:left; }
  :is(.hero-w,.hero-v--still) .hero-v-buy .small { flex-basis:auto; flex:1 1 0; min-width:0; margin:0; text-align:left; }
  :is(.hero-w,.hero-v--still) .hero-v-buy .btn { flex:none; min-height:36px; padding-inline:14px; border-radius:12px; }
  main :is(a.btn,button.btn):not(.btn--block, .demo-btn) { min-height:36px; padding-inline:14px; border-radius:12px; }
  .hero-v--still.hero-al { --pb:20px; }
  .hero-al .hero-v-buy .btn { order:2; }
  .hero-al .hero-v-buy .small:not(.al-plat) { order:1; }
  .hero-al .hero-v-buy .al-plat { order:3; flex:0 0 100%; margin-top:0; }
  .hero-w { --rt:130px; --rb:119px; --boxmin:200px; }
  .hero-v--still { --rt:130px; --rb:98px; --boxmin:180px; }
  .hero-v--still.hero-al { --rt:94px; --rb:190px; --boxmin:150px; }
  .hero-al { --sw:min(86cqw, 46svh, 150cqh); }
}
@media (max-width:734px) and (max-height:720px) { :is(.hero-w,.hero-v--still) { --gap:28px; --pb:16px; } .hero-v--still.hero-al { --pb:16px; } }

/* The floor glow also shows when the entrance does not run (reduced motion): placed by CSS under the sphere. Without scripts there is no sphere, so no glow either. */
.js [data-al-scroll]:not(.al-live) .al-floor { display:block; position:absolute; z-index:1; left:50%; top:calc(50% + var(--sw) * .38); width:0; height:0; --fw:calc(var(--sw) * .7); pointer-events:none; }
@media (min-width:1069px) { .js [data-al-scroll]:not(.al-live) .hero-al { --sw:calc(490 * var(--u)); } .js [data-al-scroll]:not(.al-live) .al-floor { top:calc(var(--sw) * .88 - 71 * var(--u)); } }

/* Below desktop the hero text keeps at least its two written lines, never one long line (owner 2026-11-07). */
@media (max-width:1068px) { :is(.hero-w,.hero-v--still) .hero-v-bottom .lead > .hl { display:block; } }
@media (max-width:734px) { .hero-v--still.hero-al { --rb:100px; } }
@media (min-width:735px) and (max-width:1068px) { .hero-v--still.hero-al { --rb:150px; } }

/* Safari sizes grid and flex items by long Chinese clauses under keep-all and pushes text off the screen; these items may always shrink to the screen. */
@media (max-width:734px) { html:lang(zh) main :is(section,article,div,ul,ol,dl,li,dd,dt,figure,details,summary,p,h2,h3) { min-width:0; } }
/* Phones, Tech Specs figures: the two parts stack at a size that reads, and the box labels wrap instead of running into each other. */
@media (max-width:734px) {
  body[data-page="specs"] :is(.dim-row,.box-row) * { min-width:0; }
  body[data-page="specs"] .dim-row { --dim-k:.27; flex-direction:column; align-items:center; gap:64px; padding-right:0; }
  body[data-page="specs"] .spec-box-media .box-item .dim-name { font-size:11px; white-space:normal; text-align:center; line-height:1.3; }
  body[data-page="specs"] .box-row { --box-k:.16; flex-wrap:wrap; gap:20px 10px; }
  body[data-page="specs"] .box-row .box-item:has(img[src*="cable"]) { order:-1; flex:0 0 100%; }
  body[data-page="specs"] .dim-row .dim-text--t, body[data-page="specs"] .dim-row .dim-text--ph { left:auto; right:0; top:100%; margin-top:2px; }
}
/* Titles never leave one short word on its own line; the text under a section title keeps some air. */
@media (max-width:734px) { .page-hero h1 .hl { text-wrap:balance; } }
@media (max-width:1068px) { body[data-page="still"] [data-section="features"] h2.display + .lead { margin-top:16px; } }


/* Phone: a switcher sits right under the figure it drives (owner 2026-11-08), so the
   picture changes where the finger is. Text first, then figure, picker, link.
   The copy column dissolves into the section so its children can be reordered; HTML
   and larger screens unchanged. The STILL "closer look" picker already sits below. */
@media (max-width:734px) {
  :is(.split, .home-split):has(> :is(.how-copy, .home-copy) > .design-picker[data-demo-for]) { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  :is(.split, .home-split) > :is(.how-copy, .home-copy):has(> .design-picker[data-demo-for]) { display:contents; }
  :is(.split, .home-split):has(> :is(.how-copy, .home-copy) > .design-picker[data-demo-for]) > :is(.how-copy, .home-copy) > * { align-self:flex-start; }
  :is(.split, .home-split):has(> :is(.how-copy, .home-copy) > .design-picker[data-demo-for]) > :is(.how-copy, .home-copy) > :is(.lead, .design-picker) { align-self:stretch; }
  :is(.split, .home-split):has(> :is(.how-copy, .home-copy) > .design-picker[data-demo-for]) > [data-demo] { order:1; margin-top:28px; }
  :is(.split, .home-split) > :is(.how-copy, .home-copy) > .design-picker[data-demo-for] { order:2; margin-top:0; }
  :is(.split, .home-split) > :is(.how-copy, .home-copy):has(> .design-picker[data-demo-for]) > :is(.home-cta, .connect-cta) { order:3; margin-top:28px; padding-top:0; }
  /* One App card (owner 2026-11-08): picture on top, the list joined below with a hairline;
     App spacing: text -> card 28, card -> button 28 (V3 04 §5.2 "分块"). */
  :is(.split, .home-split):has(> :is(.how-copy, .home-copy) > .design-picker[data-demo-for]) > [data-demo] { border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none; }
  :is(.split, .home-split) > :is(.how-copy, .home-copy) > .design-picker[data-demo-for] { border-top-left-radius:0; border-top-right-radius:0; }
  /* STILL "closer look" already had the list below; join it the same way. */
  body[data-page="still"] .sec--look .look-stage { height:auto; aspect-ratio:1 / 1; padding:0 0 28px; align-items:center; }   /* owner 2026-11-08: shorter, product near the middle */

  body[data-page="still"] .sec--look .look-stage .design-text { right:20px; bottom:20px; max-width:calc(100% - 40px); }
  body[data-page="still"] .sec--look .look-stage .design-text p { font-size:12px !important; line-height:1.5; }   /* over the phone body 14 rule (also !important) */   /* the App's note size (12); one short line in both languages */
  body[data-page="still"] .sec--look .look-stage { border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none; }
  body[data-page="still"] .sec--look .look > .design-picker { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }
}

/* Phone: a section's link button goes under its picture (owner 2026-11-08), as with the
   switchers above: text (and any list) -> picture -> button, App block spacing 28.
   Home STILL and About, STILL nightly records, How it works bed check, After Light data and privacy. */
@media (max-width:734px) {
  :is(.split, .home-split, .ftabs-body):has(> :is(.how-copy, .home-copy, .ftabs-text) > :is(.home-cta, .connect-cta, .bed-cta, .al-cta, .ft-shared)):has(> :is(figure, .frame, .ft-stage)) { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  :is(.split, .home-split, .ftabs-body) > :is(.how-copy, .home-copy, .ftabs-text):has(> :is(.home-cta, .connect-cta, .bed-cta, .al-cta, .ft-shared)) { display:contents; }
  body[data-page] :is(.split, .home-split, .ftabs-body):has(> :is(.how-copy, .home-copy, .ftabs-text) > :is(.home-cta, .connect-cta, .bed-cta, .al-cta, .ft-shared)) > :is(figure, .frame, .ft-stage) { order:1; margin-top:28px; }   /* body[data-page]: over the pages' own margin:0 on these frames */
  body[data-page] :is(.split, .home-split, .ftabs-body) > :is(.how-copy, .home-copy, .ftabs-text) > :is(.home-cta, .connect-cta, .bed-cta, .al-cta, .ft-shared) { order:3; margin-top:28px; padding-top:0; }
  body[data-page="still"] .ftabs-text > .ft-shared > .btn-row { margin-top:0; }
  body[data-page="after-light"] #data-privacy .how-copy > .al-cta { margin-top:28px; }
  /* owner 2026-11-09: the static lists (How it works bed check, After Light data and privacy) follow the picture too, joined
     as one card like the switchers above: text -> picture + list -> button */
  body[data-page] .split:has(> .how-copy > .design-picker.bed-rows):has(> figure, > .frame) > :is(figure, .frame) { border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none; }
  body[data-page] .split > .how-copy:has(> :is(.bed-cta, .al-cta)) > .design-picker.bed-rows { order:2; align-self:stretch; margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }
}

/* Tablet (735-1068, iPad upright; owner 2026-11-09): Home and STILL nightly records are one
   column here too, so the same order and card as on phones: text -> picture (+ joined
   list) -> button. How it works and After Light are two columns at this width: unchanged. */
@media (min-width:735px) and (max-width:1068px) {
  body[data-page="home"] .home-split:has(> .home-copy > :is(.design-picker[data-demo-for], .home-cta)):has(> :is(figure, .frame)),
  body[data-page="still"] .ftabs-body:has(> .ftabs-text > .ft-shared):has(> .ft-stage) { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  body[data-page="home"] .home-split:has(> :is(figure, .frame)) > .home-copy:has(> :is(.design-picker[data-demo-for], .home-cta)),
  body[data-page="still"] .ftabs-body:has(> .ft-stage) > .ftabs-text:has(> .ft-shared) { display:contents; }
  body[data-page="home"] .home-split:has(> :is(figure, .frame)) > .home-copy > * { align-self:flex-start; }
  body[data-page="home"] .home-split:has(> :is(figure, .frame)) > .home-copy > :is(.lead, .design-picker) { align-self:stretch; }
  body[data-page="home"] .home-split:has(> .home-copy > :is(.design-picker[data-demo-for], .home-cta)) > :is(figure, .frame),
  body[data-page="still"] .ftabs-body:has(> .ftabs-text > .ft-shared) > .ft-stage { order:1; margin-top:28px; }
  body[data-page="home"] .home-split > .home-copy > .design-picker[data-demo-for] { order:2; margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }
  body[data-page="home"] .home-split:has(> .home-copy > .design-picker[data-demo-for]) > [data-demo] { border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none; }
  body[data-page="home"] .home-split:has(> :is(figure, .frame)) > .home-copy > .home-cta,
  body[data-page="still"] .ftabs-body:has(> .ft-stage) > .ftabs-text > .ft-shared { order:3; margin-top:28px; padding-top:0; }
  body[data-page="still"] .ftabs-text > .ft-shared > .btn-row { margin-top:0; }
}

/* Phone spacing (owner 2026-11-08): sections 48 above and below (hero to first section 48,
   section to section 96; was 72-96 each side); the first line of every page starts 56 below the
   navigation, short phones too (was 24-40). PRD §5. */
@media (max-width:734px) {
  :root { --pad:48px; --pad-ch:48px; --pad-hero:56px; }
  body[data-page] main > :is(.page-hero, .sec--specs-head):first-child { margin-top:0; padding-top:56px; }
  body[data-page="privacy"] .privacy-head { padding-top:56px; }
  body[data-page="home"] .home-section, body[data-page="why"] main > .sec { padding-block:48px; }
  body[data-page="still"] .sec--ftabs .ftabs, body[data-page="still"] .sec--ftabs .ftabs-body { margin-top:0; }
  body:is([data-page="support"],[data-page="legal"]) .helpdoc-head { padding-top:56px; }
}

/* Tablet spacing (iPad upright, 735-1068; owner 2026-11-09): sections 72 above and below
   (hero to first section 72, section to section 144; was 96-168 each side), between the
   phone's 48 and the desktop. Page heads and the specs table keep their own. PRD §5. */
@media (min-width:735px) and (max-width:1068px) {
  body[data-page] main > .sec:not(.page-hero, .sec--specs-head, .sec--specs, .al-use-notes) { padding-block:72px; }
  body[data-page="home"] #home-still, body[data-page="why"] #about { padding-top:72px; }   /* over the desktop's 168 under the hero (id rules) */
}