/* 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:36px 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); }