/* Shared shell. The older content pages retain their base layout in site.css. */
:root { color-scheme: light; --paper:#fff; --ink:#1d1d1f; --muted:#6e6e73; --sage:#0071e3; --line:#e5e5e7; --surface:#f5f5f7; }
html { scroll-padding-top:80px; }
body { background:#fff; }
h1,h2,h3 { font-weight:650; }
header { background:rgba(255,255,255,.72); border:0; border-bottom:1px solid rgba(0,0,0,.06); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); }
main:has(.home-page) { margin-top:-64px; }
@media(max-width:640px) { main:has(.home-page) { margin-top:-60px; } }
.nav-wrap { height:64px; max-width:1200px; }
.brand,.brand.small { font-family:inherit; font-size:27px; font-weight:750; letter-spacing:-1.8px; align-items:baseline; gap:0; }
.brand .brand-dot { font:inherit; color:#0071e3; }
#navigation { gap:35px; font-size:12px; }
#navigation a[aria-current] { color:#1d1d1f; box-shadow:none; font-weight:650; }
.nav-contact { margin-left:25px; border:0; color:#0071e3; }
.lang-switch { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; user-select:none; border:1px solid rgba(0,0,0,.08); padding:3px 10px; border-radius:980px; background:rgba(0,0,0,.03); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:border-color .2s,background .2s; line-height:1.2; }
.lang-switch:hover { border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.05); }
.lang-opt { color:#86868b; text-decoration:none; padding:2px 4px; border-radius:4px; transition:color .15s; }
a.lang-opt:hover { color:#0071e3; }
.lang-opt.is-active { color:#1d1d1f; font-weight:600; cursor:default; }
.lang-divider { color:rgba(0,0,0,.16); font-size:11px; margin:0 1px; }
.button { background:#0071e3; border:1px solid #0071e3; border-radius:999px; min-height:44px; padding:11px 23px; font-size:14px; gap:15px; transition:background .2s,transform .2s; color:#fff; }
.button:hover { background:#0077ed; border-color:#0077ed; color:#fff; transform:translateY(-1px); }
.button.secondary { border-color:#0071e3; color:#0071e3; background:transparent; }
.text-link { color:#06c; font-size:15px; gap:8px; }
.text-link:hover { text-decoration:underline; color:#06c; }
.eyebrow { letter-spacing:1.7px; font-size:10px; color:#86868b; line-height:1.7; }
.actions { gap:24px; }
footer { background:#f5f5f7; max-width:none; padding:48px max(40px,calc((100vw - 1120px)/2)) 25px; }
footer::before { display:none; }
.footer-top p { font-size:21px; }
.footer-top>a { color:#06c; }
.footer-bottom { font-size:11px; }
main:has(.home-page),main:has(.product-page) { max-width:none; padding:0; }
.home-page,.product-page { overflow:clip; }
.page-width { width:calc(100% - 96px); max-width:1120px; margin-inline:auto; }
.wide-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:48px; }
.wide-heading .eyebrow { margin-bottom:18px; }
.wide-heading h2,.waterfall-intro h2,.feature-heading h2 { font-size:clamp(38px,4.6vw,62px); line-height:1.16; letter-spacing:-.055em; margin:0; }
h2>span,.wide-heading h2 span { color:#86868b; }
.wide-heading>p { font-size:16px; color:#6e6e73; line-height:1.8; margin:0; }
.wide-heading>.text-link { white-space:nowrap; }
/* Home: introduction, one overview, then four vertically unfolding products. */
.launch-hero { text-align:center; padding:144px 24px 0; background:linear-gradient(#fff 55%,#fafafa); }
.launch-kicker { font-size:10px; letter-spacing:3px; color:#86868b; font-weight:600; margin:0 0 22px; }
.launch-hero h1 { font-size:clamp(66px,6.8vw,100px); line-height:1.15; letter-spacing:-.065em; margin-bottom:24px; }
.launch-hero h1 span.motto-plain,
.launch-hero h1 .motto-plain span { background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; color:#1d1d1f !important; }
.launch-hero h1 .motto-gradient,
.launch-hero h1 .motto-accent { background:linear-gradient(110deg,#0084dd 15%,#495bd7 58%,#9b5bc0); background-clip:text; -webkit-background-clip:text; color:transparent; }
.mobile-motto-break { display:none; }
.about-motto-part { display:inline-block; white-space:nowrap; }
.launch-description { font-size:18px; color:#6e6e73; line-height:1.75; margin-bottom:24px; }
.launch-hero>.actions { justify-content:center; }
.icon-landscape { height:270px; max-width:940px; margin:40px auto 0; position:relative; background:radial-gradient(ellipse at 50% 80%,#e1e8fa88,transparent 66%); }
.floating-app { position:absolute; display:flex; flex-direction:column; align-items:center; gap:16px; transform:rotate(var(--angle,0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1); isolation:isolate; }
.floating-app::before { content:""; position:absolute; inset:auto 5% 10px; height:25px; background:#26304d38; filter:blur(22px); z-index:-1; transform:translateY(24px); }
.floating-app .app-icon { width:112px; height:112px; border-radius:26px; box-shadow:0 12px 25px #17264a13; }
.floating-app span { font-size:12px; font-weight:550; color:#6e6e73; }
.floating-app:hover { transform:translateY(-10px) rotate(0deg); }
.float-0 { left:9%; top:43px; --angle:-12deg; }
.float-1 { left:33%; top:15px; --angle:-5deg; }
.float-2 { right:28%; top:31px; --angle:8deg; }
.float-3 { right:5%; top:56px; --angle:13deg; }
.landscape-caption { position:absolute; bottom:18px; left:0; right:0; color:#86868b; font-size:10px; letter-spacing:2px; }
.meet-suyue { display:grid; grid-template-columns:1.4fr 1fr; gap:90px; align-items:center; padding-block:130px; }
.meet-copy h2 { font-size:clamp(31px,3.7vw,48px); line-height:1.35; letter-spacing:-.045em; margin-bottom:25px; }
.meet-copy>p:not(.eyebrow) { color:#6e6e73; font-size:16px; line-height:1.95; }
.meet-copy>.eyebrow { margin-bottom:22px; }
.meet-photo { margin:0; position:relative; border-radius:24px; overflow:hidden; }
.meet-photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.meet-photo figcaption { position:absolute; left:24px; bottom:22px; font-size:8px; letter-spacing:2px; color:#fff; text-shadow:0 1px 7px #000; }
.collection-overview { padding-block:110px 65px; background:#f5f5f7; scroll-margin-top:32px; }
.overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.overview-app { background:#fff; border-radius:24px; padding:36px 27px 25px; display:flex; flex-direction:column; align-items:flex-start; }
.overview-app .app-icon { width:68px; height:68px; border-radius:17px; margin-bottom:32px; }
.overview-app .eyebrow { margin-bottom:8px; font-size:10px; letter-spacing:.5px; }
.overview-app h3 { font-size:25px; margin-bottom:16px; }
.overview-app>p:not(.eyebrow) { color:#6e6e73; font-size:14px; line-height:1.8; flex:1; min-height:50px; }
.overview-platforms { color:#86868b; font-size:10px; line-height:1.8; margin:10px 0 13px; min-height:36px; }
.overview-app .text-link { font-size:13px; }
.overview-jump { color:#86868b; font-size:10px; padding:10px 0; }
.overview-jump:hover { color:#0071e3; }
.overview-foot { font-size:12px; color:#86868b; margin:28px 0 0; display:flex; justify-content:space-between; gap:20px; }
.overview-foot a { color:#06c; }
.waterfall-intro { padding-block:120px 65px; }
.waterfall-intro>p:last-child { color:#6e6e73; margin:25px 0 0; font-size:16px; }
.waterfall-product { padding:0 24px 36px; scroll-margin-top:90px; }
.waterfall-frame { position:relative; max-width:1392px; min-height:680px; height:85svh; max-height:920px; margin:auto; border-radius:30px; overflow:hidden; background:#18231d; color:#fff; }
.waterfall-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.waterfall-shade { position:absolute; inset:0; background:linear-gradient(90deg,#07120ce0 0%,#07120c94 42%,#07120c08 100%); }
.waterfall-product:nth-child(even) .waterfall-shade { background:linear-gradient(90deg,#15111b08,#15111b9c 60%,#15111bde); }
.waterfall-copy { position:relative; z-index:1; padding:65px max(45px,calc((100vw - 1120px)/2 - 24px)); max-width:850px; height:100%; display:flex; flex-direction:column; justify-content:center; }
.waterfall-product:nth-child(even) .waterfall-copy { margin-left:auto; padding:65px 65px 65px 50px; max-width:630px; }
.waterfall-identity { display:flex; align-items:center; gap:12px; margin-bottom:35px; }
.waterfall-identity .app-icon { width:42px; height:42px; border-radius:11px; }
.waterfall-identity>span { font-size:18px; font-weight:600; }
.waterfall-identity small { font-size:9px; color:#ffffffb0; margin-left:25px; letter-spacing:2px; }
.waterfall-copy>.eyebrow { font-size:11px; color:#ffffffb5; margin-bottom:18px; letter-spacing:1px; }
.waterfall-copy h2 { font-size:clamp(38px,4.2vw,60px); line-height:1.2; letter-spacing:-.05em; margin-bottom:24px; }
.waterfall-summary { max-width:400px; font-size:16px; line-height:1.9; color:#ffffffe0; margin-bottom:20px; }
.waterfall-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.waterfall-tags>span { border:1px solid #ffffff40; border-radius:20px; font-size:9px; padding:6px 11px; color:#ffffffc9; }
.waterfall-copy .button { background:#fff; border-color:#fff; color:#1d1d1f; }
.waterfall-copy .text-link { color:#fff; font-size:14px; }
.scene-caption { position:absolute; right:25px; bottom:20px; color:#ffffffad; font-size:9px; z-index:2; }
.home-signoff { text-align:center; padding-block:120px; }
.home-signoff h2 { font-size:clamp(44px,5vw,68px); line-height:1.2; margin-bottom:25px; }
.home-signoff>p:not(.eyebrow) { color:#6e6e73; line-height:1.9; font-size:17px; }
/* Product detail pages: overview, image-led narrative and expandable details. */
.story-localnav { display:flex; position:sticky; top:64px; z-index:12; width:100%; padding:0 max(32px,calc((100vw - 1120px)/2)); min-height:62px; background:rgba(255,255,255,.75); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(0,0,0,.06); border-radius:0; justify-content:space-between; font-size:12px; }
.story-localnav .localnav-name { font-size:17px; font-weight:400; display:flex; align-items:center; gap:10px; color:#1d1d1f; letter-spacing:-.01em; }
.story-localnav .localnav-name .app-icon { width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.story-localnav .localnav-name span { font-weight:400; font-size:17px; }
.story-localnav>div { display:flex; align-items:center; gap:25px; }
.story-localnav .button { padding:6px 17px; min-height:32px; font-size:11px; }
.story-localnav a { box-shadow:none; }
.reading-progress { position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:#0071e3; transform:scaleX(var(--reading-progress,0)); transform-origin:left; }
.story-hero { text-align:center; padding-block:70px 40px; }
.story-hero>.eyebrow { margin-bottom:25px; }
.hero-product-icon .app-icon { width:64px; height:64px; border-radius:16px; margin:0 auto 20px; }
.story-hero h1 { font-size:21px; letter-spacing:-.02em; line-height:1.5; margin-bottom:25px; }
.story-hero h1>span { display:block; font-size:clamp(46px,5.3vw,76px); letter-spacing:-.06em; line-height:1.17; color:#1d1d1f; margin-top:18px; }
.story-summary { max-width:640px; margin:0 auto 25px; color:#6e6e73; font-size:18px; line-height:1.85; }
.story-hero .actions,.product-finale .actions { justify-content:center; }
.story-platforms { font-size:11px; color:#86868b; margin:22px 0; }
.scroll-invitation { display:inline-flex; align-items:center; gap:14px; color:#86868b; font-size:10px; padding:10px; margin-top:10px; }
.scroll-invitation span { font-size:18px; }
.hero-scene { margin:20px auto 0; width:calc(100% - 48px); max-width:1392px; height:70svh; min-height:480px; max-height:850px; border-radius:28px; overflow:hidden; position:relative; background:#222; color:white; }
.hero-scene>img { width:100%; height:100%; object-fit:cover; }
.hero-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,#0008); }
.hero-scene-copy { position:absolute; left:7%; right:7%; bottom:12%; z-index:1; }
.hero-scene-copy p { font-size:clamp(28px,3.6vw,48px); letter-spacing:-.04em; line-height:1.4; font-weight:600; margin:0 0 15px; }
.hero-scene-copy>span { font-size:8px; letter-spacing:2px; color:#ffffffbd; }
.hero-scene figcaption,.chapter-image figcaption { position:absolute; right:22px; bottom:17px; font-size:9px; color:#fff; text-shadow:0 1px 6px #000; z-index:2; }
.product-manifesto { text-align:center; padding-block:130px; max-width:1000px; }
.product-manifesto h2 { font-size:clamp(24px,3.1vw,44px); line-height:1.35; letter-spacing:-.03em; }
.product-manifesto>p:last-child { font-size:17px; line-height:1.9; color:#6e6e73; margin:0; }
.title-line { display:inline-block; white-space:nowrap; color:inherit; }
.manifesto-nowrap { display:inline-block; white-space:nowrap; color:inherit; }
.scroll-story { background:#101514; color:#fff; }
.scroll-story-stage { position:relative; min-height:620px; display:grid; align-items:center; overflow:hidden; }
.story-backdrop { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.journey-overlay { position:absolute; inset:0; background:#07110e8c; }
.journey-content { position:relative; z-index:1; text-align:center; width:calc(100% - 60px); max-width:1100px; padding:100px 0; margin:auto; }
.journey-content>.eyebrow { color:#ffffffb3; }
.journey-lines { margin:45px 0 30px; }
.journey-line { font-size:clamp(32px,4.8vw,70px); line-height:1.4; font-weight:650; letter-spacing:-.05em; margin:24px 0; }
.journey-line>span { display:block; font-size:11px; font-weight:400; letter-spacing:2px; margin-bottom:20px; color:#ffffffa3; }
.journey-indicators { display:none; }
.journey-hint { font-size:10px; color:#ffffffba; letter-spacing:1px; margin:30px 0 0; }
.journey-hint>span { margin-left:12px; }
.feature-heading { padding-block:120px 65px; }
.feature-chapter { width:calc(100% - 96px); max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1.15fr; gap:90px; align-items:center; padding-block:35px 100px; }
.chapter-reversed { grid-template-columns:1.15fr 1fr; }
.chapter-reversed .chapter-copy { order:2; }
.chapter-copy>.eyebrow { font-size:10px; margin-bottom:22px; }
.chapter-copy h2 { font-size:clamp(32px,3.6vw,48px); line-height:1.25; letter-spacing:-.05em; margin-bottom:25px; }
.chapter-description { color:#6e6e73; font-size:16px; line-height:1.9; margin-bottom:30px; }
.chapter-image { position:relative; margin:0; border-radius:25px; overflow:hidden; background:#f5f5f7; }
.chapter-image img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.chapter-details details { border-top:1px solid #d2d2d7; }
.chapter-details details:last-child { border-bottom:1px solid #d2d2d7; }
.chapter-details summary { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px; padding:15px 0; cursor:pointer; list-style:none; font-size:14px; font-weight:550; line-height:1.6; }
.chapter-details summary::-webkit-details-marker { display:none; }
.chapter-details summary>span { color:#86868b; font-size:20px; transition:transform .25s; flex-shrink:0; }
.chapter-details details[open] summary>span { transform:rotate(45deg); }
.chapter-details details>p { color:#6e6e73; font-size:13px; line-height:1.9; margin:0 0 22px; padding-right:15px; }
.chapter-details summary:focus-visible { outline:3px solid #0071e3; outline-offset:3px; }
.product-finale { text-align:center; border-top:1px solid #e5e5e7; padding-block:95px 90px; }
.finale-icon .app-icon { margin:0 auto 30px; width:80px; height:80px; border-radius:20px; }
.product-finale h2 { font-size:clamp(36px,4.6vw,62px); line-height:1.25; letter-spacing:-.05em; }
.product-finale>p:not(.eyebrow):not(.fine-print):not(.story-platforms) { max-width:650px; margin:0 auto 30px; font-size:16px; color:#6e6e73; }
.product-finale .download-guide { max-width:620px; text-align:left; border-radius:22px; background:#f5f5f7; margin:40px auto 0; padding:24px 30px; }
.product-finale .download-guide h3 { margin-top:0; }
.asset-disclosure { margin-top:40px; }
.other-products { padding-block:10px 90px; }
.other-products .wide-heading h2 { font-size:30px; }
.other-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.other-grid>a { background:#f5f5f7; border-radius:22px; padding:30px; transition:transform .3s; }
.other-grid>a:hover { transform:translateY(-4px); }
.other-grid .app-icon { width:50px; height:50px; border-radius:12px; margin-bottom:24px; }
.other-grid h3 { font-size:21px; margin-bottom:7px; }
.other-grid p { font-size:12px; color:#6e6e73; margin-bottom:14px; }
.other-grid span { font-size:12px; color:#06c; }
/* Progressive enhancement: native scrolling remains in control. */
.motion-enabled [data-reveal] { opacity:0; transform:translateY(30px); transition:opacity 1.45s ease,transform 1.65s cubic-bezier(.2,.7,.2,1); }
.motion-enabled [data-reveal].in-view { opacity:1; transform:none; }
.motion-enabled [data-scroll-visual]>img,.motion-enabled [data-scroll-visual] .waterfall-photo { transform:scale(calc(1.08 - var(--visual-progress,0)*.08)); }
.motion-enabled .scroll-story { height:220svh; }
.motion-enabled .scroll-story-stage { position:sticky; top:126px; height:calc(100svh - 126px); min-height:0; }
.motion-enabled .story-backdrop { transform:scale(calc(1.13 - var(--story-progress,0)*.13)); }
.motion-enabled .journey-lines { position:relative; height:175px; margin:45px 0 35px; }
.motion-enabled .journey-line { position:absolute; inset:0; opacity:0; transform:translateY(25px); margin:0; transition:opacity .45s ease,transform .6s ease; display:flex; flex-direction:column; justify-content:center; }
.motion-enabled .journey-line.is-active { opacity:1; transform:translateY(0); }
.motion-enabled .journey-indicators { display:flex; gap:9px; justify-content:center; }
.journey-indicators>span { width:28px; height:3px; background:#ffffff40; border-radius:10px; transition:background .35s; }
.journey-indicators>span.is-active { background:#fff; }
/* Existing collection, editorial and secondary product pages. */
.page-heading h1 { font-size:50px; letter-spacing:-.05em; }
.collection .app-card { border-radius:22px; background:#f5f5f7; }
.collection .card-category,.collection .card-info small { color:#6e6e73; }
.product-localnav { position:sticky; top:64px; z-index:10; display:flex; justify-content:space-between; align-items:center; min-height:60px; background:rgba(255,255,255,.75); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(0,0,0,.06); }
.product-localnav .localnav-name { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:400; color:#1d1d1f; }
.product-localnav .localnav-name .app-icon { width:26px; height:26px; border-radius:6px; flex-shrink:0; }
.product-localnav .localnav-name span { font-weight:400; font-size:17px; }
.product-localnav .button { min-height:32px; font-size:11px; padding:6px 17px; }
.product-hero h1 span { color:#6e6e73; }
.product-gallery { border-radius:25px; }
.image-viewer { border:0; padding:55px 20px 20px; border-radius:24px; background:#f5f5f7; width:min(520px,calc(100% - 32px)); max-height:92dvh; overflow:auto; }
.image-viewer::backdrop { background:#14141bc4; backdrop-filter:blur(12px); }
.image-viewer img { max-height:75dvh; width:auto; margin:auto; border-radius:9px; }
.viewer-close { position:absolute; right:14px; top:12px; border:0; border-radius:50%; background:#e5e5e7; color:#1d1d1f; width:34px; height:34px; cursor:pointer; font-size:24px; }
.image-viewer p { text-align:center; color:#6e6e73; font-size:11px; margin:12px 0 0; }
body:has(.image-viewer[open]) { overflow:hidden; }
@media(max-width:1000px) {
 .page-width,.feature-chapter { width:calc(100% - 64px); }
 .meet-suyue { gap:45px; padding-block:100px; }
 .meet-copy>p:not(.eyebrow) br { display:none; }
 .overview-grid { gap:14px; }
 .overview-app { padding:28px 19px 20px; }
 .overview-app h3 { font-size:22px; }
 .overview-app>p:not(.eyebrow) { font-size:13px; }
 .waterfall-copy { padding-inline:45px; }
 .waterfall-product:nth-child(even) .waterfall-copy { max-width:550px; padding:50px 45px; }
 .waterfall-shade { background:linear-gradient(90deg,#07120ce8,#07120c35); }
 .feature-chapter { gap:45px; }
 .chapter-description { font-size:14px; }
 .chapter-copy h2 { font-size:37px; }
 .other-products .wide-heading h2 { font-size:26px; }
}
@media(max-width:760px) {
 .page-width,.feature-chapter { width:calc(100% - 44px); }
 .meet-suyue { gap:30px; }
 .meet-copy h2 { font-size:30px; }
 .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .overview-app { padding:30px 25px 22px; }
 .overview-app .app-icon { margin-bottom:25px; }
 .wide-heading>p { display:none; }
 .waterfall-product:nth-child(even) .waterfall-copy { margin-left:0; padding:50px 40px; max-width:none; }
 .waterfall-product:nth-child(even) .waterfall-shade { background:linear-gradient(90deg,#15111bdf,#15111b55); }
 .waterfall-copy { padding:50px 40px; }
 .waterfall-copy h2 { font-size:42px; }
 .waterfall-summary { font-size:15px; }
 .feature-chapter,.chapter-reversed { grid-template-columns:1fr; gap:30px; padding-bottom:80px; }
 .chapter-reversed .chapter-copy { order:0; }
 .chapter-copy h2 { font-size:42px; }
 .chapter-image img { aspect-ratio:5/4; }
 .chapter-description { font-size:16px; max-width:550px; }
 .other-products .wide-heading { align-items:start; }
 .other-products .wide-heading h2 { font-size:27px; }
 .other-products .wide-heading h2 span { display:block; }
}
@media(max-width:640px) {
 html { scroll-padding-top:78px; }
 .nav-wrap { height:60px; }
 .brand { font-size:25px; }
 .menu-button { border:0; font-size:12px; padding-right:0; }
 #navigation { top:60px; background:rgba(255,255,255,.88); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); gap:2px; }
 .nav-contact { margin:0; }
 .mobile-header-tools .lang-switch { font-size:11px; padding:2px 8px; }
 .launch-hero { padding:117px 20px 0; }
 .launch-kicker { font-size:8px; letter-spacing:2px; margin-bottom:22px; }
 .launch-hero h1 { font-size:clamp(52px,16.4vw,64px); margin-bottom:23px; }
 .mobile-motto-break { display:block; }
 .launch-description { font-size:14px; line-height:1.9; }
 .launch-hero .button { font-size:12px; min-height:42px; }
 .launch-hero .text-link { font-size:13px; }
 .icon-landscape { height:205px; margin-top:36px; max-width:390px; }
 .floating-app .app-icon { width:65px; height:65px; border-radius:16px; }
 .floating-app { gap:11px; }
 .floating-app span { font-size:9px; }
 .float-0 { left:3%; top:36px; }
 .float-1 { left:29%; top:10px; }
 .float-2 { right:26%; top:24px; }
 .float-3 { right:0; top:46px; }
 .landscape-caption { bottom:20px; font-size:8px; letter-spacing:1px; }
 .wide-heading { gap:15px; margin-bottom:32px; }
 .wide-heading h2,.waterfall-intro h2,.feature-heading h2 { font-size:clamp(28px,8.5vw,35px); line-height:1.2; }
 .wide-heading .eyebrow { font-size:8px; letter-spacing:1px; margin-bottom:16px; }
 .wide-heading>.text-link { font-size:12px; }
 .meet-suyue { grid-template-columns:1fr; padding-block:70px; gap:32px; }
 .meet-copy h2 { font-size:31px; line-height:1.4; }
 .meet-copy>p:not(.eyebrow) { font-size:14px; }
 .meet-copy .eyebrow { font-size:9px; }
 .meet-photo img { aspect-ratio:6/5; }
 .meet-photo { border-radius:20px; }
 .collection-overview { padding-block:65px 40px; }
 .overview-grid { gap:12px; }
 .overview-app { padding:24px 17px 17px; border-radius:20px; }
 .overview-app .app-icon { height:52px; width:52px; border-radius:13px; margin-bottom:23px; }
 .overview-app h3 { font-size:21px; margin-bottom:13px; }
 .overview-app>p:not(.eyebrow) { font-size:12px; min-height:65px; }
 .overview-platforms { font-size:8px; min-height:32px; }
 .overview-app .text-link { font-size:11px; }
 .overview-jump { font-size:9px; }
 .overview-foot { font-size:10px; flex-direction:column; gap:5px; }
 .waterfall-intro { padding-block:70px 40px; }
 .waterfall-intro>p:last-child { font-size:13px; }
 .waterfall-product { padding:0 14px 20px; }
 .waterfall-frame { height:auto; min-height:650px; border-radius:22px; }
 .waterfall-copy,.waterfall-product:nth-child(even) .waterfall-copy { padding:40px 25px 65px; min-height:650px; }
 .waterfall-shade,.waterfall-product:nth-child(even) .waterfall-shade { background:linear-gradient(180deg,#0b151867,#0b1518c9 35%,#0b1518df); }
 .waterfall-identity { margin-bottom:45px; }
 .waterfall-identity .app-icon { width:38px; height:38px; border-radius:9px; }
 .waterfall-identity>span { font-size:16px; }
 .waterfall-identity small { margin-left:auto; font-size:8px; }
 .waterfall-copy h2 { font-size:clamp(27px,8.3vw,40px); line-height:1.3; margin-bottom:22px; }
 .waterfall-summary { font-size:14px; line-height:1.9; }
 .waterfall-tags { margin-bottom:24px; gap:6px; }
 .waterfall-tags>span { font-size:8px; padding:5px 8px; }
 .waterfall-copy .actions { gap:18px; }
 .waterfall-copy .button { font-size:12px; padding:11px 18px; }
 .waterfall-copy .text-link { font-size:12px; }
 .scene-caption { right:18px; bottom:17px; font-size:8px; }
 .home-signoff { padding-block:70px; }
 .home-signoff .eyebrow { font-size:8px; }
 .home-signoff h2 { font-size:44px; }
 .home-signoff>p:not(.eyebrow) { font-size:14px; }
 .home-signoff br { display:none; }
 .home-signoff h2 br { display:block; }
 .story-localnav { top:60px; padding:0 22px; min-height:56px; }
 .story-localnav .localnav-name { font-size:17px; }
 .story-localnav>div { gap:16px; }
 .story-localnav>div>a:not(.button) { font-size:10px; }
 .story-localnav>div>a[href="#product-download"] { display:none; }
 .story-localnav .button { min-height:30px; font-size:10px; padding:6px 13px; }
 .story-hero { padding-block:45px 25px; }
 .story-hero .eyebrow { font-size:8px; }
 .hero-product-icon .app-icon { width:55px; height:55px; border-radius:13px; }
 .story-hero h1 { font-size:18px; }
 .story-hero h1>span { font-size:clamp(32px,9.6vw,43px); line-height:1.25; margin-top:18px; letter-spacing:-.055em; }
 .story-summary { font-size:14px; line-height:1.9; }
 .story-hero .actions,.product-finale .actions { gap:12px; }
 .story-hero .button,.product-finale .button { font-size:12px; padding:11px 17px; }
 .story-platforms { font-size:9px; margin:20px 0; }
 .hero-scene { width:calc(100% - 28px); min-height:440px; height:65svh; max-height:600px; border-radius:22px; }
 .hero-scene-copy { left:25px; right:25px; bottom:65px; }
 .hero-scene-copy p { font-size:31px; line-height:1.4; }
 .hero-scene-copy>span { font-size:7px; }
 .product-manifesto { padding-block:75px; }
 .product-manifesto h2 { font-size:32px; line-height:1.4; }
 .product-manifesto>p:last-child { font-size:14px; }
 .scroll-story-stage { min-height:590px; }
 .journey-content { padding:65px 0; }
 .journey-content>.eyebrow { font-size:8px; letter-spacing:1px; }
 .journey-line { font-size:32px; }
 .motion-enabled .scroll-story { height:200svh; }
 .motion-enabled .scroll-story-stage { top:116px; height:calc(100svh - 116px); }
 .motion-enabled .journey-lines { height:180px; margin:35px 0 30px; }
 .motion-enabled .journey-line { font-size:clamp(29px,8.6vw,40px); }
 .journey-hint { font-size:8px; letter-spacing:.5px; }
 .feature-heading { padding-block:75px 40px; }
 .feature-chapter { gap:25px; padding:0 0 65px; }
 .chapter-copy .eyebrow { font-size:9px; margin-bottom:18px; }
 .chapter-copy h2 { font-size:35px; margin-bottom:20px; }
 .chapter-description { font-size:14px; line-height:1.9; margin-bottom:25px; }
 .chapter-image { border-radius:20px; }
 .chapter-image img { aspect-ratio:1/1; }
 .chapter-details summary { font-size:13px; min-height:56px; }
 .chapter-details details>p { font-size:12px; }
 .product-finale { padding-block:65px; }
 .product-finale h2 { font-size:36px; }
 .product-finale>p:not(.eyebrow):not(.fine-print):not(.story-platforms) { font-size:14px; }
 .product-finale .download-guide { padding:22px; }
 .product-finale .fine-print { font-size:9px; }
 .other-products { padding-block:0 60px; }
 .other-products .wide-heading { flex-direction:column; gap:10px; }
 .other-products .wide-heading>.text-link { padding:0; }
 .other-grid { grid-template-columns:1fr; gap:12px; }
 .other-grid>a { padding:23px; display:grid; grid-template-columns:48px 1fr; column-gap:20px; align-items:center; }
 .other-grid .app-icon { width:45px; height:45px; margin:0; grid-row:span 3; }
 .other-grid h3 { font-size:18px; margin:0; }
 .other-grid p { font-size:11px; margin:3px 0; }
 .other-grid span { font-size:11px; }
 .product-localnav { top:60px; }
 .page-heading h1 { font-size:35px; }
 footer { padding:40px 22px 24px; }
 .footer-top p { font-size:18px; }
 .footer-bottom { font-size:10px; }
 .footer-top p span { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
 [data-reveal] { opacity:1!important; transform:none!important; }
 [data-scroll-visual] img,.story-backdrop { transform:none!important; }
 .floating-app:hover,.other-grid>a:hover { transform:none; }
}
/* Developer-supplied product photography and real interface compositions. */
.theme-green { --product-surface:#eff5e9; --product-glow:#d8e9c3; --product-deep:#182a1d; }
.theme-amber { --product-surface:#f8f5ed; --product-glow:#e9e4cb; --product-deep:#242720; }
.theme-violet { --product-surface:#eff5f0; --product-glow:#cae5d8; --product-deep:#122f25; }
.theme-blue { --product-surface:#f0f3fa; --product-glow:#d9dfef; --product-deep:#1d2436; }
.product-screen { display:block; flex-shrink:0; position:relative; background:#17191b; border:1px solid #0004; padding:5px; box-shadow:0 18px 40px #23332922,0 2px 5px #0002; transition:translate .3s; }
a.product-screen:hover { translate:0 -5px; }
.product-screen:focus-visible { outline-color:#0071e3; }
.screen-phone { border-radius:30px; }
.screen-phone img { border-radius:25px; }
.screen-desktop { border-radius:13px; padding:6px; }
.screen-desktop img { border-radius:7px; }
.product-screen img { width:100%; height:auto; max-height:none; object-fit:contain; aspect-ratio:auto; display:block; }
.device-stage { position:relative; width:100%; height:100%; min-height:480px; isolation:isolate; }
.device-stage::before { content:""; position:absolute; inset:12%; background:radial-gradient(ellipse,var(--product-glow,#e3e8ee),transparent 70%); z-index:-1; }
.layout-phones { display:flex; align-items:center; justify-content:center; gap:4%; padding:35px 5%; }
.layout-phones .screen-phone { width:29%; max-width:245px; }
.layout-phones .device-0 { transform:translateY(18px) rotate(-5deg); }
.layout-phones .device-1 { transform:translateY(-12px); z-index:2; }
.layout-phones .device-2 { transform:translateY(25px) rotate(5deg); }
.layout-phones.count-1 .screen-phone { width:48%; max-width:250px; transform:none; }
.layout-phones.count-2 .screen-phone { width:39%; max-width:230px; }
.layout-mixed .screen-desktop { position:absolute; left:4%; top:21%; width:84%; max-width:none; transform:rotate(-3deg); }
.layout-mixed .screen-phone { position:absolute; right:5%; bottom:8%; width:24%; max-width:220px; transform:rotate(5deg); }
.layout-mixed.count-1 .screen-desktop { left:5%; top:50%; width:90%; transform:translateY(-50%); }
.has-product-art .waterfall-frame { display:grid; grid-template-columns:43% 57%; align-items:center; background:var(--product-surface); color:#1d1d1f; height:auto; min-height:700px; max-height:none; }
.has-product-art .waterfall-copy,.has-product-art:nth-child(even) .waterfall-copy { margin:0; max-width:none; width:100%; padding:55px 0 55px 55px; height:auto; }
.has-product-art .waterfall-identity { margin-bottom:32px; }
.has-product-art .waterfall-identity small { color:#86868b; }
.has-product-art .waterfall-copy>.eyebrow { color:#6e6e73; }
.has-product-art .waterfall-copy h2 { font-size:clamp(30px,3.2vw,46px); }
.has-product-art .waterfall-summary { color:#6e6e73; font-size:15px; }
.has-product-art .waterfall-tags>span { border-color:#1d1d1f20; color:#6e6e73; }
.has-product-art .waterfall-copy .button { background:#0071e3; color:#fff; border-color:#0071e3; }
.has-product-art .waterfall-copy .text-link { color:#06c; }
.waterfall-product-art { min-width:0; height:620px; }
.waterfall-product-art .layout-phones { gap:3%; padding-inline:5%; }
.waterfall-product-art .layout-mixed .screen-desktop { top:25%; width:88%; left:0; }
.waterfall-product-art .layout-mixed .screen-phone { right:5%; bottom:12%; width:29%; }
.product-art-caption { position:absolute; right:28px; bottom:22px; color:#86868b; font-size:9px; }
.product-device-hero { background:var(--product-surface); height:650px; min-height:0; max-height:none; }
.product-device-hero::after { display:none; }
.product-device-hero .device-stage { min-height:0; }
.product-device-hero .layout-phones { gap:6%; padding:40px 8%; }
.product-device-hero .layout-phones .screen-phone { width:25%; max-width:230px; }
.product-device-hero .layout-mixed .screen-desktop { top:13%; width:78%; left:8%; }
.product-device-hero .layout-mixed .screen-phone { width:20%; right:8%; bottom:8%; }
.product-device-hero figcaption { color:#86868b; text-shadow:none; }
.product-visual-statement { text-align:center; font-size:clamp(23px,3vw,38px); font-weight:600; letter-spacing:-.04em; margin-top:38px; margin-bottom:0; color:#6e6e73; }
.chapter-screens { background:var(--product-surface); overflow:hidden; }
.chapter-screens .device-stage { height:610px; min-height:0; }
.chapter-screens .layout-phones { gap:5%; padding-inline:6%; }
.chapter-screens .layout-phones.count-1 .screen-phone { width:49%; max-width:245px; }
.chapter-screens .layout-phones.count-2 .screen-phone { width:41%; max-width:225px; }
.chapter-screens img { aspect-ratio:auto; object-fit:contain; }
.chapter-screens figcaption { color:#86868b; text-shadow:none; font-size:9px; }
.chapter-screens .layout-mixed .screen-desktop { top:24%; width:90%; left:3%; }
.chapter-screens .layout-mixed .screen-phone { width:31%; bottom:12%; right:4%; }
.journey-product { background:var(--product-deep); }
.journey-product .scroll-story-stage { min-height:620px; background:radial-gradient(ellipse at 75% 50%,#ffffff13,transparent 65%); }
.journey-product .journey-content { text-align:left; width:calc(100% - 96px); max-width:1120px; padding:80px 0; }
.journey-product .journey-lines { width:57%; }
.journey-product .journey-line { font-size:clamp(30px,4vw,57px); }
.journey-product .journey-indicators { justify-content:flex-start; }
.journey-product .journey-hint { text-align:left; }
.journey-screen-stack { position:absolute; top:8%; bottom:8%; right:10%; width:27%; max-width:285px; }
.journey-screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.journey-screen:not(:first-child) { display:none; }
.journey-screen .product-screen { max-height:94%; padding:4px; width:auto; border-radius:25px; }
.journey-screen img { width:auto; max-height:calc(65svh - 35px); max-width:100%; height:auto; border-radius:21px; }
.journey-screen>span { color:#ffffffa8; font-size:10px; }
.motion-enabled .journey-product .scroll-story-stage { min-height:0; }
.motion-enabled .journey-screen { display:flex; opacity:0; transform:translateY(30px) scale(.95); pointer-events:none; transition:opacity .5s,transform .65s; }
.motion-enabled .journey-screen.is-active { opacity:1; transform:none; pointer-events:auto; }
.screen-gallery { padding-block:0 95px; }
.screen-gallery .wide-heading { align-items:center; margin-bottom:30px; }
.screen-gallery h2 { font-size:clamp(28px,3vw,40px); }
.screen-gallery h2 span { margin-left:12px; }
.gallery-controls { display:flex; gap:10px; }
.gallery-controls button { height:38px; width:38px; border:0; border-radius:50%; background:#e8e8ed; color:#1d1d1f; font-size:26px; cursor:pointer; }
.gallery-controls button:disabled { opacity:.35; cursor:default; }
.screen-gallery-track { display:flex; overflow-x:auto; gap:18px; padding:10px 0 20px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#c7c7cc transparent; }
.screen-gallery-item { display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px 22px 20px; flex:0 0 200px; background:#f5f5f7; border-radius:20px; scroll-snap-align:start; cursor:zoom-in; }
.screen-gallery-item img { height:285px; width:auto; max-width:none; border-radius:14px; box-shadow:0 8px 20px #0001; object-fit:contain; }
.screen-gallery-item.gallery-desktop { flex-basis:520px; justify-content:center; }
.screen-gallery-item.gallery-desktop img { width:470px; height:auto; max-height:285px; border-radius:8px; }
.screen-gallery-item>span { color:#6e6e73; font-size:11px; margin-top:auto; }
.gallery-hint { font-size:11px; color:#86868b; margin:10px 0 0; }
.image-viewer.is-wide { width:min(1120px,calc(100% - 32px)); }
@media(max-width:1000px) {
 .has-product-art .waterfall-copy,.has-product-art:nth-child(even) .waterfall-copy { padding-left:35px; }
 .has-product-art .waterfall-frame { min-height:670px; }
 .waterfall-product-art { height:580px; }
 .waterfall-product-art .screen-phone { border-radius:22px; padding:4px; }
 .waterfall-product-art .screen-phone img { border-radius:18px; }
 .product-device-hero { height:570px; }
 .product-device-hero .layout-phones .screen-phone { width:27%; }
 .product-device-hero .layout-mixed .screen-desktop { top:23%; }
 .product-device-hero .layout-mixed .screen-phone { width:23%; }
 .chapter-screens .device-stage { height:500px; }
 .chapter-screens .screen-phone { padding:4px; border-radius:24px; }
 .chapter-screens .screen-phone img { border-radius:20px; }
 .journey-screen-stack { right:7%; }
}
@media(max-width:760px) {
 .has-product-art .waterfall-frame { grid-template-columns:1fr; min-height:0; }
 .has-product-art .waterfall-copy,.has-product-art:nth-child(even) .waterfall-copy { padding:40px 35px 10px; min-height:0; }
 .has-product-art .waterfall-copy h2 { font-size:39px; }
 .has-product-art .waterfall-summary { max-width:550px; }
 .waterfall-product-art { height:510px; }
 .waterfall-product-art .layout-phones .screen-phone { width:25%; max-width:205px; }
 .waterfall-product-art .layout-mixed .screen-desktop { top:16%; left:6%; width:78%; }
 .waterfall-product-art .layout-mixed .screen-phone { width:23%; right:7%; bottom:10%; }
 .chapter-screens .device-stage { height:580px; }
 .chapter-screens .layout-phones.count-2 .screen-phone { width:35%; }
 .chapter-screens .layout-mixed .screen-desktop { top:16%; width:81%; left:5%; }
 .chapter-screens .layout-mixed .screen-phone { width:25%; right:6%; bottom:9%; }
}
@media(max-width:640px) {
 .has-product-art .waterfall-copy,.has-product-art:nth-child(even) .waterfall-copy { padding:33px 25px 0; }
 .has-product-art .waterfall-identity { margin-bottom:26px; }
 .has-product-art .waterfall-copy h2 { font-size:clamp(27px,8.3vw,36px); }
 .has-product-art .waterfall-summary { font-size:13px; }
 .has-product-art .waterfall-tags { margin-bottom:18px; }
 .has-product-art .waterfall-tags>span { font-size:8px; }
 .waterfall-product-art { height:370px; }
 .waterfall-product-art .device-stage { min-height:0; }
 .waterfall-product-art .layout-phones { gap:4%; padding:25px 4% 45px; }
 .waterfall-product-art .layout-phones .screen-phone { width:28%; max-width:150px; }
 .waterfall-product-art .screen-phone,.product-device-hero .screen-phone { border-radius:17px; padding:3px; }
 .waterfall-product-art .screen-phone img,.product-device-hero .screen-phone img { border-radius:13px; }
 .waterfall-product-art .layout-mixed .screen-desktop { top:17%; width:82%; left:4%; }
 .waterfall-product-art .layout-mixed .screen-phone { width:28%; right:6%; bottom:13%; }
 .waterfall-product-art .screen-desktop,.product-device-hero .screen-desktop { border-radius:8px; padding:3px; }
 .waterfall-product-art .screen-desktop img,.product-device-hero .screen-desktop img { border-radius:5px; }
 .product-art-caption { font-size:8px; bottom:17px; right:20px; }
 .product-device-hero { height:350px; min-height:0; }
 .product-device-hero .layout-phones { gap:4%; padding:25px 4% 35px; }
 .product-device-hero .layout-phones .screen-phone { width:28%; }
 .product-device-hero .layout-mixed .screen-desktop { top:21%; width:84%; left:4%; }
 .product-device-hero .layout-mixed .screen-phone { width:28%; right:5%; bottom:12%; }
 .product-device-hero figcaption { font-size:8px; bottom:13px; right:17px; }
 .product-visual-statement { font-size:24px; margin-top:25px; }
 .chapter-screens .device-stage { height:445px; }
 .chapter-screens .layout-phones { padding:25px 5% 40px; gap:5%; }
 .chapter-screens .layout-phones.count-2 .screen-phone { width:40%; }
 .chapter-screens .layout-phones.count-1 .screen-phone { width:48%; max-width:180px; }
 .chapter-screens .screen-phone { padding:3px; border-radius:20px; }
 .chapter-screens .screen-phone img { border-radius:16px; }
 .chapter-screens .screen-desktop { padding:3px; border-radius:8px; }
 .chapter-screens .screen-desktop img { border-radius:5px; }
 .chapter-screens .layout-mixed .screen-desktop { top:20%; width:85%; }
 .chapter-screens .layout-mixed .screen-phone { width:31%; bottom:12%; }
 .journey-product .journey-content { text-align:center; align-self:start; width:calc(100% - 44px); padding:40px 0 0; }
 .journey-product .journey-lines { width:100%; }
 .motion-enabled .journey-product .journey-lines { height:130px; margin:12px 0 10px; }
 .journey-product .journey-line { font-size:30px; }
 .journey-product .journey-line>span { margin-bottom:12px; }
 .journey-product .journey-indicators { justify-content:center; }
 .journey-product .journey-hint { text-align:center; font-size:8px; margin-top:18px; }
 .journey-screen-stack { top:300px; bottom:30px; width:49%; right:25.5%; max-width:none; }
 .journey-screen { gap:10px; }
 .journey-screen img { max-height:calc(100svh - 475px); max-width:100%; }
 .journey-screen>span { font-size:8px; }
 .journey-screen .product-screen { padding:3px; border-radius:18px; }
 .journey-screen .product-screen img { border-radius:15px; }
 .journey-product .scroll-story-stage { min-height:860px; }
 html:not(.motion-enabled) .journey-screen-stack { top:auto; height:360px; bottom:40px; }
 html:not(.motion-enabled) .journey-screen img { max-height:330px; }
 .screen-gallery { padding-bottom:65px; }
 .screen-gallery .wide-heading { gap:15px; }
 .screen-gallery .wide-heading h2 { font-size:28px; }
 .screen-gallery h2 span { display:block; margin:4px 0 0; }
 .gallery-controls { gap:7px; }
 .gallery-controls button { width:34px; height:34px; font-size:23px; }
 .screen-gallery-track { gap:12px; }
 .screen-gallery-item { padding:20px 18px; flex-basis:170px; }
 .screen-gallery-item img { height:255px; }
 .screen-gallery-item.gallery-desktop { flex-basis:300px; }
 .screen-gallery-item.gallery-desktop img { width:264px; max-height:255px; }
}
@media(prefers-reduced-motion:no-preference) {
 .motion-enabled [data-scroll-visual] .device-stage { transform:translateY(calc(12px - var(--visual-progress,0)*24px)); }
}
@media(prefers-reduced-motion:reduce) {
 .product-screen:hover { translate:none; }
 .journey-screen { transition:none; }
}
/* Campaign art follows each product's own App Store visual identity. */
.overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.overview-app { position:relative; padding:0 30px 27px; overflow:hidden; }
.overview-visual { display:block; width:calc(100% + 60px); margin:0 -30px 26px; overflow:hidden; }
.overview-visual img { display:block; width:100%; height:auto; aspect-ratio:3840/1646; object-fit:contain; transition:transform .65s cubic-bezier(.2,.8,.2,1); }
.overview-visual:hover img { transform:scale(1.025); }
.overview-app .app-icon { width:46px; height:46px; border-radius:12px; margin-bottom:18px; }
.overview-app h3 { margin-bottom:9px; }
.overview-app>p:not(.eyebrow) { min-height:0; margin-bottom:18px; }
.overview-platforms { margin-bottom:18px; }
.overview-jump { position:absolute; right:30px; bottom:28px; }
.waterfall-campaign { min-width:0; padding:35px 28px 35px 0; }
.campaign-preview { display:block; position:relative; border-radius:22px; overflow:hidden; }
.campaign-preview img { width:100%; height:auto; display:block; object-fit:contain; }
.waterfall-campaign .campaign-preview { box-shadow:0 25px 65px #17352013; }
.reading-gallery .product-gallery a { cursor:zoom-in; }
.image-expand { position:absolute; right:16px; bottom:16px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#ffffffd9; color:#1d1d1f; font-size:21px; box-shadow:0 3px 12px #0001; transition:background .2s,transform .2s; }
.campaign-preview:hover .image-expand { background:#fff; transform:scale(1.08); }
.product-campaign-hero { height:auto; min-height:0; max-height:none; background:var(--product-surface); border-radius:28px; }
.product-campaign-hero::after { display:none; }
.product-campaign-hero .campaign-preview { border-radius:inherit; }
.product-campaign-hero img { aspect-ratio:3840/1646; width:100%; height:auto; }
.viewer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 16px; }
.viewer-toolbar button { border:0; background:#e5e5e7; width:34px; height:34px; border-radius:50%; font-size:21px; cursor:pointer; }
.viewer-toolbar button:disabled { opacity:.3; cursor:default; }
.viewer-count { font-size:11px; color:#6e6e73; font-variant-numeric:tabular-nums; }
.image-viewer img { display:block; max-width:100%; max-height:67dvh; object-fit:contain; }
.image-viewer:focus-visible,.campaign-preview:focus-visible,.overview-visual:focus-visible { outline:3px solid #0071e3; outline-offset:4px; }
@media(max-width:760px) {
 .waterfall-campaign { padding:25px 25px 45px; }
 .has-product-art .waterfall-frame { min-height:0; }
 .overview-app { padding:0 24px 25px; }
 .overview-visual { width:calc(100% + 48px); margin:0 -24px 24px; }
 .overview-jump { position:static; margin-top:14px; }
}
@media(max-width:640px) {
 .overview-grid { gap:14px; }
 .overview-app { padding:0 16px 20px; }
 .overview-visual { width:calc(100% + 32px); margin:0 -16px 20px; }
 .overview-app .app-icon { width:40px; height:40px; border-radius:10px; margin-bottom:15px; }
 .overview-app h3 { font-size:20px; }
 .overview-app>p:not(.eyebrow) { min-height:63px; }
 .overview-platforms { font-size:9px; line-height:1.8; }
 .waterfall-campaign { padding:24px 18px 45px; }
 .campaign-preview { border-radius:16px; }
 .product-campaign-hero { border-radius:16px; }
 .image-expand { width:30px; height:30px; right:10px; bottom:10px; font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
 .overview-visual img,.image-expand { transition:none; }
 .overview-visual:hover img,.campaign-preview:hover .image-expand { transform:none; }
}
.meet-suyue { grid-template-columns:1fr 1.25fr; gap:60px; }
.meet-photo img { aspect-ratio:3/2; height:auto; object-fit:contain; }
@media(max-width:1000px) { .meet-suyue { gap:35px; } }
@media(max-width:760px) { .meet-suyue { grid-template-columns:1fr; gap:35px; } }
/* Product-led covers and the supplied Suyue signature. */
.brand,.brand.small { display:flex; align-items:center; }
.brand img { display:block; width:108px; height:44px; object-fit:contain; }
.brand.small img { width:88px; height:36px; }
.footer-products { display:flex; flex-wrap:wrap; gap:30px; margin:30px 0 38px; }
.footer-products a { display:flex; align-items:center; gap:10px; font-size:12px; color:#6e6e73; min-height:44px; }
.footer-products .app-icon { width:34px; height:34px; border-radius:9px; transition:transform .25s; }
.footer-products a:hover .app-icon { transform:translateY(-3px); }
.launch-hero { position:relative; isolation:isolate; overflow:hidden; background:#fcfcff; }
.launch-hero::before,.launch-hero::after { content:""; position:absolute; pointer-events:none; z-index:-1; width:80%; height:75%; border-radius:50%; filter:blur(45px); opacity:.7; }
.launch-hero::before { top:-25%; left:-25%; background:radial-gradient(ellipse,#dce9ff,transparent 68%); }
.launch-hero::after { top:3%; right:-35%; background:radial-gradient(ellipse,#e7ddfc 0%,#fce4e7 30%,transparent 69%); }
@media(prefers-reduced-motion:no-preference) {
 .launch-hero::before { animation:hero-light 18s ease-in-out infinite alternate; }
 .launch-hero::after { animation:hero-light 23s ease-in-out infinite alternate-reverse; }
 @keyframes hero-light { to { transform:translate(12%,16%) scale(1.12); } }
}
.overview-grid { gap:28px; }
.overview-app { padding:0; border-radius:24px; box-shadow:0 5px 20px #1d273504; border:1px solid #fff; }
.overview-visual { width:100%; margin:0; }
.overview-visual img { aspect-ratio:1920/823; object-fit:contain; }
.overview-caption { display:flex; align-items:center; gap:16px; padding:24px; }
.overview-caption .app-icon { width:44px; height:44px; margin:0; flex-shrink:0; }
.overview-caption h3 { font-size:21px; margin:0 0 5px; }
.overview-caption p { font-size:12px; color:#6e6e73; margin:0; }
.overview-open { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:50%; background:#f5f5f7; margin-left:auto; font-size:20px; }
.overview-open:hover { background:#e7edf9; color:#06c; }
.has-product-art .waterfall-frame { position:relative; isolation:isolate; border:1px solid #ffffff; background:radial-gradient(ellipse at 90% 15%,var(--product-glow),transparent 63%),linear-gradient(135deg,#fff,var(--product-surface)); }
.has-product-art .waterfall-frame::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(115deg,transparent 0 99px,#ffffff60 100px 101px); mask-image:linear-gradient(transparent,#000); }
.has-product-art .waterfall-identity { gap:14px; margin-bottom:28px; }
.core-features-label { font-size:11px; font-weight:600; color:#6e6e73; margin:26px 0 10px; }
.has-product-art .waterfall-tags { gap:8px; }
.has-product-art .waterfall-tags>span { background:#ffffff9e; border:1px solid #ffffff; color:var(--product-deep); font-size:11px; padding:7px 12px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; padding:10px 0 90px; }
.portfolio-card { display:flex; flex-direction:column; border:1px solid #e9e9ed; border-radius:24px; overflow:hidden; background:#fafafa; transition:transform .3s,box-shadow .3s; }
.portfolio-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px #21332510; }
.portfolio-cover { overflow:hidden; background:#f1f2ed; }
.portfolio-cover>img { display:block; width:100%; aspect-ratio:3/2; height:auto; object-fit:contain; transition:transform .5s; }
.portfolio-stepbystep .portfolio-cover { background:#fcfaf3; }
.portfolio-card:hover .portfolio-cover>img { transform:scale(1.025); }
.portfolio-info { display:flex; align-items:center; gap:16px; padding:25px; background:white; flex:1; }
.portfolio-info .app-icon { width:48px; height:48px; flex-shrink:0; }
.portfolio-info h2 { font-size:23px; margin:0 0 6px; }
.portfolio-info p { font-size:12px; color:#6e6e73; margin:0 0 9px; }
.portfolio-info small { color:#86868b; font-size:10px; }
.portfolio-arrow { margin-left:auto; font-size:24px; }
.product-opening { position:relative; background:linear-gradient(var(--product-surface) 45%,#fff); padding-top:24px; }
.product-opening .product-campaign-hero { width:calc(100% - 64px); max-width:1440px; margin:0 auto; border-radius:28px; }
.product-opening .story-hero { position:relative; padding:38px 0 70px; text-align:center; }
.product-opening .hero-product-icon { margin:0 auto 16px; }
.product-opening .hero-product-icon .app-icon { width:58px; height:58px; border-radius:15px; }
.product-opening .story-hero>.eyebrow { font-size:15px; letter-spacing:0; color:var(--product-deep); margin-bottom:15px; }
.product-opening .story-hero h1 { font-size:clamp(36px,4.1vw,58px); line-height:1.2; max-width:900px; margin:0 auto 24px; }
.product-opening .story-summary { max-width:620px; font-size:16px; margin:0 auto 24px; }
.product-opening .story-platforms { margin-top:18px; }
.product-opening .scroll-invitation { margin-top:26px; }
.product-manifesto { padding-block:100px 35px; }
.product-manifesto>.eyebrow { font-size:15px; letter-spacing:0; }
.feature-chapter { padding:35px; margin-bottom:32px; background:#fafafa; border:1px solid #f1f1f4; border-radius:28px; }
.feature-chapter.chapter-reversed { background:var(--product-surface); }
@media(max-width:760px) {
 .overview-grid,.portfolio-grid { grid-template-columns:1fr; gap:22px; }
 .overview-caption { padding:20px; }
 .feature-chapter { padding:25px; }
}
@media(max-width:480px) {
 .footer-products { gap:16px 22px; }
 .footer-products a { width:calc(50% - 12px); }
 .overview-caption { gap:12px; padding:18px; }
 .overview-caption h3 { font-size:19px; }
 .overview-caption p { font-size:11px; }
 .overview-caption .app-icon { width:38px; height:38px; }
 .overview-open { width:36px; height:44px; background:transparent; }
 .product-opening { padding-top:12px; }
 .product-opening .product-campaign-hero { width:calc(100% - 24px); border-radius:14px; }
 .product-opening .story-hero { padding-top:26px; padding-bottom:38px; }
 .product-opening .story-hero h1 { font-size:34px; }
 .product-opening .story-summary { font-size:14px; }
 .product-opening .hero-product-icon .app-icon { width:46px; height:46px; border-radius:12px; }
 .feature-explorer { padding-block:40px 20px; }
 .product-manifesto { padding-block:65px 20px; }
 .feature-chapter { padding:22px; margin-inline:16px; width:calc(100% - 32px); border-radius:22px; }
 .feature-chapter .chapter-copy h2 { font-size:31px; }
 .chapter-screens .device-stage { height:390px; }
 .portfolio-info { padding:21px; gap:12px; }
 .portfolio-info h2 { font-size:21px; }
 .portfolio-info .app-icon { width:42px; height:42px; }
}
.reading-page { --card:#f2eadf; }
.reading-hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; padding:35px 0 75px; }
.reading-identity { display:flex; gap:14px; align-items:center; font-weight:600; margin-bottom:24px; }
.reading-hero h1 { font-size:clamp(40px,4.8vw,65px); line-height:1.3; letter-spacing:-.04em; }
.reading-hero h1 span { color:#8d7961; }
.reading-book { display:flex; align-items:center; gap:24px; padding:38px 28px; background:linear-gradient(100deg,#f2e9da,#fffaf1 49%,#e7daca 50%,#faf5eb 52%,#f7efe2); border-radius:8px 28px 28px 8px; box-shadow:0 25px 60px #55443212; transform:rotate(2deg); }
.reading-book>a { width:52%; flex-shrink:0; }
.reading-book img { width:100%; height:auto; border-radius:10px; box-shadow:0 12px 25px #362b1b17; }
.reading-quote { color:#89745d; }
.reading-quote span { font-size:8px; letter-spacing:2px; }
.reading-quote p { font-family:serif; font-size:24px; line-height:1.9; margin-top:28px; }
.reading-details { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:65px 0; border-top:1px solid #e5ded4; }
.reading-details h2,.reading-gallery h2 { font-size:34px; line-height:1.5; }
.reading-details>div>p:last-child { color:#6e6e73; font-size:14px; }
.reading-feature { border-bottom:1px solid #e5ded4; }
.reading-feature summary { cursor:pointer; display:flex; justify-content:space-between; gap:15px; padding:23px 0; font-weight:600; list-style:none; }
.reading-feature summary::-webkit-details-marker { display:none; }
.reading-feature p { color:#6e6e73; font-size:14px; padding-bottom:20px; line-height:1.9; }
.reading-feature[open] summary>span { transform:rotate(45deg); }
.reading-gallery { padding:35px 0 60px; }
.reading-finale { padding:65px 0 90px; text-align:center; }
.reading-finale h2 { font-size:36px; line-height:1.5; }
.reading-finale .actions { justify-content:center; }
@media(max-width:760px) {
 .reading-hero,.reading-details { grid-template-columns:1fr; gap:30px; }
 .reading-book { max-width:500px; padding:28px; }
 .reading-quote p { font-size:21px; }
 .reading-details { padding-block:45px; }
 .reading-gallery h2 { font-size:27px; }
}
@media(max-width:640px) {
 .story-localnav { gap:12px; padding-inline:18px; }
 .story-localnav .localnav-name,.story-localnav a { white-space:nowrap; }
 .story-localnav>div { gap:14px; }
 .product-opening .story-hero h1 { font-size:clamp(25px,7vw,34px); }
}
.reading-quote p { font-size:clamp(17px,2vw,24px); }
/* A quieter signature, richer light, and a connected personal introduction. */
header .brand img { width:86px; height:35px; }
.launch-hero::before { top:-15%; background:radial-gradient(ellipse,#baceff 0%,#d8e7ff80 40%,transparent 72%); opacity:.86; }
.launch-hero::after { top:-8%; right:-23%; background:radial-gradient(ellipse,#d5bff7 0%,#f4d7e6a6 40%,transparent 72%); opacity:.85; }
@media(prefers-reduced-motion:no-preference) {
 .launch-hero::before { animation:hero-light-v2 12s ease-in-out infinite alternate; }
 .launch-hero::after { animation:hero-light-v2 15s ease-in-out infinite alternate-reverse; }
 @keyframes hero-light-v2 { from { transform:translate(-4%,-3%) scale(.95); } to { transform:translate(23%,20%) scale(1.18); } }
}
.meet-suyue { grid-template-columns:1fr 1fr; gap:90px; padding-block:120px; align-items:center; }
.meet-signature { display:block; width:138px; height:58px; object-fit:contain; margin-bottom:24px; }
.meet-copy h2 { font-size:clamp(30px,3.3vw,44px); }
.meet-copy>p:not(.eyebrow) { font-size:14px; }
.meet-workbench { padding:38px; border-radius:32px; background:radial-gradient(ellipse at 0 0,#e9eef9,transparent 70%),#f8f8fa; border:1px solid #f0f0f4; }
.meet-note { font-size:23px; line-height:1.65; letter-spacing:-.03em; margin:0 0 30px; font-weight:550; }
.meet-note>span { color:#787b8d; display:block; }
.meet-apps { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.meet-apps>a { display:grid; grid-template-columns:36px 1fr; gap:4px 12px; padding:18px 14px; position:relative; background:#ffffffc9; border:1px solid #fff; border-radius:18px; transition:transform .4s; }
.meet-apps>a:hover { transform:translateY(-4px); }
.meet-apps .app-icon { grid-row:span 2; width:36px; height:36px; border-radius:10px; }
.meet-apps>a>span { font-size:10px; color:#86868b; }
.meet-apps strong { font-size:13px; font-weight:550; }
.meet-apps>a>span:last-child { position:absolute; top:10px; right:10px; }
.meet-belief { margin:28px 0 0; font-size:12px; color:#86868b; line-height:1.9; }
.overview-caption { width:100%; padding:24px 24px 20px; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:14px; }
.overview-caption h3 { font-size:22px; }
.overview-caption p { font-size:12px; line-height:1.7; }
.overview-caption .overview-open { margin:0; background:var(--surface); }
.core-badges { list-style:none; padding:18px 0 22px; margin:0 24px; width:calc(100% - 48px); display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid #ededf1; }
.core-badges li { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:9px; font-size:11px; color:#5e6472; background:#f5f6f9; }
.core-badges svg { width:16px; height:16px; flex-shrink:0; }
/* The artwork flows into an editorial introduction and a compact download area. */
.product-opening .story-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:65px; text-align:left; padding-block:55px 70px; align-items:center; }
.opening-identity { display:flex; align-items:center; gap:12px; margin-bottom:22px; font-size:15px; font-weight:600; }
.opening-identity .app-icon { width:36px; height:36px; border-radius:10px; }
.product-opening .story-hero h1 { font-size:clamp(30px,3.5vw,49px); margin:0; line-height:1.3; letter-spacing:-.045em; }
.product-opening .story-summary { font-size:15px; margin:0 0 24px; line-height:1.9; }
.product-opening .actions { justify-content:flex-start; gap:12px; flex-wrap:wrap; }
.product-opening .actions .button { padding:10px 18px; font-size:12px; }
.product-opening .story-platforms { margin:15px 0 0; font-size:10px; }
.product-opening .scroll-invitation { margin:14px 0 0; padding:8px 0; }
/* Three natural-scroll chapters. All content stays readable without animation. */
.immersive-story { --scene-ink:#24362b; --scene-muted:#67776c; --scene-bg:#edf3e7; --scene-light:#cbdca9; --scene-line:#5d7c4720; }
.immersive-scene { position:relative; background:var(--scene-bg); color:var(--scene-ink); isolation:isolate; scroll-margin-top:126px; }
.immersive-stage { position:relative; min-height:720px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; }
.immersive-atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 75% 60%,var(--scene-light),transparent 68%); }
.immersive-atmosphere i { position:absolute; display:block; width:42%; aspect-ratio:1; border:1px solid var(--scene-line); border-radius:50%; right:5%; top:15%; }
.immersive-atmosphere i:nth-child(2) { width:64%; right:-6%; top:0; }
.immersive-atmosphere i:nth-child(3) { width:85%; right:-16%; top:-15%; }
.immersive-inner { width:calc(100% - 96px); max-width:1120px; margin:auto; display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:center; padding:55px 0 70px; }
.immersive-copy { max-width:560px; }
.scene-label { font-size:12px; letter-spacing:.06em; color:var(--scene-muted); margin:0 0 26px; }
.immersive-copy h2 { font-size:clamp(36px,4.3vw,58px); line-height:1.24; letter-spacing:-.04em; margin:0 0 28px; }
.scene-description { font-size:16px; line-height:1.95; color:var(--scene-muted); max-width:440px; margin:0; }
.scene-next { display:inline-flex; align-items:center; gap:20px; font-size:12px; margin-top:25px; padding:12px 0; color:var(--scene-ink); }
.immersive-art { display:flex; align-items:center; justify-content:center; min-width:0; }
.immersive-art .product-screen { max-width:285px; width:fit-content; padding:5px; border-radius:30px; }
.immersive-art .product-screen img { width:auto; height:auto; max-width:100%; max-height:65svh; border-radius:25px; }
.scene-footer { position:absolute; bottom:22px; left:max(48px,calc((100% - 1120px)/2)); right:max(48px,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--scene-muted); font-size:10px; }
.scene-dots { display: none !important; }
.mobile-scene-tag { display: none; }
.scene-dots a { display:grid; place-items:center; width:32px; height:32px; }
.scene-dots a::after { content:""; width:5px; height:5px; background:currentColor; border-radius:5px; opacity:.35; }
.scene-dots a[aria-current]::after { width:25px; opacity:1; }
.scene-2 { --scene-bg:#e0eadb; --scene-light:#b2ccaa; }
.scene-3 { --scene-bg:#24382b; --scene-ink:#f4f8ee; --scene-muted:#c0cebc; --scene-light:#4b6844; --scene-line:#e0f0cc16; }
.immersion-firefly .immersive-atmosphere { background:repeating-linear-gradient(0deg,transparent 0 89px,var(--scene-line) 90px 91px),repeating-linear-gradient(90deg,transparent 0 139px,var(--scene-line) 140px 141px),radial-gradient(ellipse at 75% 60%,var(--scene-light),transparent 70%); }
.immersion-firefly .immersive-atmosphere i { width:160px; aspect-ratio:3; border:0; border-radius:12px; background:#ffffff40; top:25%; right:7%; }
.immersion-firefly .immersive-atmosphere i:nth-child(2) { top:55%; right:35%; background:#c7dba84d; }
.immersion-firefly .immersive-atmosphere i:nth-child(3) { top:75%; right:3%; }
.immersion-quicknotes { --scene-bg:#f8f3e7; --scene-light:#e6dcb9; --scene-ink:#383628; --scene-muted:#7d7866; --scene-line:#97885f22; }
.immersion-quicknotes .scene-2 { --scene-bg:#edf3ed; --scene-light:#d1e0ce; }
.immersion-quicknotes .scene-3 { --scene-bg:#eae5f3; --scene-light:#d0c0e4; --scene-ink:#302c41; --scene-muted:#756c87; }
.immersion-quicknotes .immersive-atmosphere i { width:190px; aspect-ratio:4/3; border-radius:10px 10px 35px 10px; background:#ffffff60; transform:rotate(-12deg); top:12%; right:6%; }
.immersion-quicknotes .immersive-atmosphere i:nth-child(2) { top:65%; right:32%; transform:rotate(10deg); }
.immersion-quicknotes .immersive-atmosphere i:nth-child(3) { top:72%; right:-6%; transform:rotate(-4deg); }
.immersion-stepbystep { --scene-bg:#e9f4ec; --scene-light:#c0dfcd; --scene-ink:#153e2b; --scene-muted:#577966; }
.immersion-stepbystep .scene-2 { --scene-bg:#153e2d; --scene-ink:#f2fff6; --scene-muted:#b6d3c1; --scene-light:#2d664b; --scene-line:#cdfce424; }
.immersion-stepbystep .scene-3 { --scene-bg:#f3f5e9; --scene-light:#d9e3b4; --scene-ink:#2d3f28; --scene-muted:#69775d; }
.immersion-stepbystep .immersive-atmosphere i { border-radius:30px; transform:rotate(45deg); }
.immersion-picin { --scene-bg:#182131; --scene-light:#4e5a78; --scene-ink:#f5f2ed; --scene-muted:#bec8d9; --scene-line:#d7e3ff20; }
.immersion-picin .scene-2 { --scene-bg:#2b2938; --scene-light:#6b5c77; }
.immersion-picin .scene-3 { --scene-bg:#e9e2d6; --scene-light:#d6c4a6; --scene-ink:#40392c; --scene-muted:#84755f; }
.immersion-picin .immersive-atmosphere i { width:210px; aspect-ratio:4/3; border:8px solid #ffffff15; border-bottom-width:35px; border-radius:3px; transform:rotate(-18deg); }
.immersion-picin .immersive-atmosphere i:nth-child(2) { top:65%; right:33%; transform:rotate(14deg); }
.immersion-picin .immersive-atmosphere i:nth-child(3) { top:70%; right:-8%; transform:rotate(-10deg); }
.immersion-shiye { --scene-bg:#f6f0e4; --scene-light:#e6d8bc; --scene-ink:#4b3d2c; --scene-muted:#8b7b66; --scene-line:#9b835020; }
.immersion-shiye .scene-2 { --scene-bg:#eae4d7; --scene-light:#d6c6a9; }
.immersion-shiye .scene-3 { --scene-bg:#3c3931; --scene-light:#6f624b; --scene-ink:#f9f1e2; --scene-muted:#cec1aa; }
.immersion-shiye .immersive-copy h2 { font-family:serif; font-weight:500; }
.immersion-shiye .immersive-atmosphere { background:repeating-linear-gradient(0deg,transparent 0 39px,var(--scene-line) 40px 41px),radial-gradient(ellipse at 75% 60%,var(--scene-light),transparent 70%); }
.motion-enabled .immersive-scene { height:175svh; }
.motion-enabled .immersive-stage { position:sticky; top:126px; height:calc(100svh - 126px); min-height:0; }
.motion-enabled .immersive-inner { height:100%; }
.motion-enabled .immersive-copy { transform:translateY(calc(30px - var(--scene-progress,0)*60px)); }
.motion-enabled .immersive-art { transform:translateY(calc(45px - var(--scene-progress,0)*90px)) rotate(calc(-3deg + var(--scene-progress,0)*6deg)); }
.motion-enabled .immersive-atmosphere { transform:scale(calc(1 + var(--scene-progress,0)*.12)); }
.motion-enabled .immersive-atmosphere i { translate:calc(var(--scene-progress,0)*-65px) calc(var(--scene-progress,0)*45px); }
.motion-enabled .scene-dots a[aria-current]::after { width:calc(10px + var(--scene-progress,0)*24px); }
main:has(.reading-page) { max-width:none; padding:0; }
.reading-page>.reading-hero,.reading-page>.reading-details,.reading-page>.reading-gallery,.reading-page>.reading-finale { width:calc(100% - 96px); max-width:1120px; margin-inline:auto; }
.reading-page .immersive-stage { top:64px; height:calc(100svh - 64px); }
.reading-page .immersive-scene { scroll-margin-top:64px; }
@media(min-width:761px) {
 .scene-2 .immersive-copy { grid-column:2; grid-row:1; }
 .scene-2 .immersive-art { grid-column:1; grid-row:1; }
}
@media(max-width:1000px) {
 .meet-suyue { gap:35px; }
 .meet-workbench { padding:28px; }
 .meet-apps { grid-template-columns:1fr; }
 .product-opening .story-hero { gap:35px; }
 .immersive-inner { gap:40px; }
 .scene-description { font-size:14px; }
}
@media(max-width:760px) {
 .meet-suyue { grid-template-columns:1fr; padding-block:75px; gap:35px; }
 .meet-apps { grid-template-columns:1fr 1fr; }
 .meet-note { font-size:22px; }
 .overview-caption { padding:20px; }
 .overview-caption h3 { font-size:20px; }
 .core-badges { margin-inline:20px; width:calc(100% - 40px); gap:7px; padding-block:16px 20px; }
 .core-badges li { font-size:10px; padding:7px 9px; }
 .product-opening .story-hero { grid-template-columns:1fr; gap:25px; padding-block:32px 45px; }
 .product-opening .story-hero h1 { font-size:clamp(27px,6.8vw,39px); }
 .product-opening .story-summary { font-size:14px; }
 .opening-identity { margin-bottom:18px; }
 .immersive-inner { width:calc(100% - 44px); grid-template-columns:1fr; gap:25px; padding:35px 0 65px; text-align:center; }
 .immersive-copy { margin-inline:auto; }
 .immersive-copy h2 { font-size:clamp(31px,8.2vw,44px); margin-bottom:20px; }
 .scene-label { font-size:10px; margin-bottom:14px; }
 .scene-description { font-size:13px; line-height:1.8; max-width:450px; margin:auto; }
 .scene-next { margin-top:10px; font-size:10px; padding-block:8px; }
 .immersive-art .product-screen { max-width:200px; padding:3px; border-radius:21px; }
 .immersive-art .product-screen img { max-height:39svh; border-radius:18px; }
 .scene-footer { left:22px; right:22px; bottom:10px; font-size:8px; }
 .scene-footer>span:last-child { display:none; }
 .immersive-stage { min-height:850px; }
 .motion-enabled .immersive-stage { top:116px; height:calc(100svh - 116px); }
 .motion-enabled .immersive-inner { gap:12px; padding-block:22px 44px; grid-template-rows:auto minmax(0,1fr); }
 .motion-enabled .immersive-copy { transform:translateY(calc(10px - var(--scene-progress,0)*20px)); }
 .motion-enabled .immersive-art { transform:translateY(calc(12px - var(--scene-progress,0)*24px)) rotate(calc(-2deg + var(--scene-progress,0)*4deg)); }
 .immersive-scene { scroll-margin-top:116px; }
 .reading-page>.reading-hero,.reading-page>.reading-details,.reading-page>.reading-gallery,.reading-page>.reading-finale { width:calc(100% - 44px); }
 .reading-page .immersive-stage { top:60px; height:calc(100svh - 60px); }
}
@media(max-width:380px) {
 .meet-workbench { padding:22px; }
 .meet-apps { gap:8px; }
 .meet-apps>a { padding:14px 10px; gap:4px 8px; }
 .meet-apps strong { font-size:11px; }
 .overview-caption { grid-template-columns:36px minmax(0,1fr) 35px; gap:10px; padding:18px; }
 .overview-caption .app-icon { width:36px; height:36px; }
 .overview-caption p { font-size:10px; }
 .core-badges { margin-inline:18px; width:calc(100% - 36px); gap:5px; }
 .core-badges li { font-size:9px; padding:7px; gap:4px; }
 .core-badges svg { width:13px; height:13px; }
}
@media(prefers-reduced-motion:reduce),(max-height:599px) {
 .immersive-stage,.reading-page .immersive-stage { position:relative; top:auto; height:auto; min-height:0; }
 .immersive-inner { height:auto; padding-block:55px 75px; }
 .immersive-art .product-screen img { max-height:450px; }
}
@media(max-height:739px) {
 .motion-enabled .immersive-scene { height:auto; }
 .motion-enabled .immersive-stage,.reading-page .immersive-stage { position:relative; top:auto; height:auto; min-height:0; }
 .motion-enabled .immersive-inner { height:auto; padding-block:55px 75px; }
 .motion-enabled .immersive-copy,.motion-enabled .immersive-art,.motion-enabled .immersive-atmosphere { transform:none; }
 .immersive-art .product-screen img { max-height:420px; }
}
html:has(.product-page) { scroll-padding-top:126px; }
html:has(.reading-page) { scroll-padding-top:64px; }
.immersive-scene,.reading-page .immersive-scene,#features,#screens { scroll-margin-top:0; }
@media(max-width:640px) {
 html:has(.product-page) { scroll-padding-top:116px; }
 html:has(.reading-page) { scroll-padding-top:60px; }
}
/* Motion echoes the action at the heart of each product. */
.motion-enabled .immersion-firefly .immersive-art { transform:translate(calc(30px - var(--scene-progress,0)*60px),calc(30px - var(--scene-progress,0)*60px)); }
.motion-enabled .immersion-quicknotes .immersive-art { transform:translateY(calc(35px - var(--scene-progress,0)*70px)) rotate(calc(-6deg + var(--scene-progress,0)*12deg)); }
.motion-enabled .immersion-stepbystep .immersive-art { transform:translateY(calc(40px - var(--scene-progress,0)*80px)) scale(calc(.94 + var(--scene-progress,0)*.06)); }
.motion-enabled .immersion-picin .immersive-art { transform:rotate(calc(-4deg + var(--scene-progress,0)*8deg)) scale(calc(.97 + var(--scene-progress,0)*.06)); }
.motion-enabled .immersion-shiye .immersive-art { transform:perspective(1100px) rotateY(calc(-9deg + var(--scene-progress,0)*18deg)) translateY(calc(25px - var(--scene-progress,0)*50px)); }
@media(max-width:760px) {
 .motion-enabled .immersive-story .immersive-art { transform:translateY(calc(12px - var(--scene-progress,0)*24px)) rotate(calc(-2deg + var(--scene-progress,0)*4deg)); }
}
@media(max-height:739px) {
 .motion-enabled .immersive-story .immersive-art { transform:none; }
}

/* Design principles and the split, feathered product opening. */
.design-principles { display:grid; gap:16px; min-width:0; }
.design-principles>.eyebrow { margin:0 0 8px; letter-spacing:.08em; color:#6e6e73; }
.design-principle { display:flex; align-items:center; gap:22px; padding:27px 28px; border:1px solid #e9ebf0; border-radius:22px; background:linear-gradient(115deg,#f4f7fd,#fafafb); }
.design-principle:nth-of-type(2) { background:linear-gradient(115deg,#f0f7f2,#fafbf9); }
.design-principle:nth-of-type(3) { background:linear-gradient(115deg,#fbf4ed,#fdfbf8); }
.design-principle svg { width:38px; height:38px; flex-shrink:0; fill:none; stroke:#647f9c; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.design-principle:nth-of-type(2) svg { stroke:#668574; }
.design-principle:nth-of-type(3) svg { stroke:#b38c6b; }
.design-principle h3 { font-size:19px; margin:0 0 7px; letter-spacing:-.025em; }
.design-principle p { font-size:12px; line-height:1.8; color:#737780; margin:0; }
.product-opening.split-opening { display:grid; place-items:center; min-height:650px; padding:85px 0 95px; overflow:hidden; isolation:isolate; background:var(--product-surface); }
.split-opening .opening-edge { position:absolute; top:0; bottom:0; width:34%; z-index:-1; pointer-events:none; }
.split-opening .opening-edge-left { left:0; mask-image:linear-gradient(90deg,#000 25%,#000b 60%,transparent); }
.split-opening .opening-edge-right { right:0; mask-image:linear-gradient(270deg,#000 25%,#000b 60%,transparent); }
.opening-edge>img { width:100%; height:100%; object-fit:cover; }
.opening-edge-right>img { object-position:right center; }
.split-opening .story-hero { display:block; width:48%; max-width:680px; padding:0; text-align:center; }
.split-opening .opening-identity { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; margin-bottom:28px; }
.split-opening .opening-identity .app-icon { width:88px; height:88px; border-radius:22px; box-shadow:0 10px 28px rgba(0,0,0,0.08); }
.split-opening .opening-identity span { font-size:28px; font-weight:650; letter-spacing:-.02em; color:#1d1d1f; }
.split-opening .story-hero h1 { font-size:clamp(36px,3.6vw,56px); line-height:1.24; text-wrap:balance; }
.split-opening .opening-aside { margin:26px auto 0; max-width:450px; }
.split-opening .story-summary { font-size:15px; line-height:1.9; margin:0 auto 25px; text-wrap:pretty; }
.split-opening .actions { justify-content:center; gap:12px; }
.product-download-buttons { display:inline-flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.product-download-buttons .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:116px; min-height:38px; padding:8px 24px; font-size:14px; font-weight:550; border-radius:999px; cursor:pointer; text-align:center; text-decoration:none; line-height:1; background:#fff; color:#1d1d1f; border:1px solid #d2d2d7; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .2s cubic-bezier(.25,1,.5,1),background .2s,border-color .2s,box-shadow .2s; }
.product-download-buttons .button:hover { background:#f5f5f7; border-color:#86868b; color:#1d1d1f; transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.08); }
.product-download-buttons .button:active { transform:translateY(0); background:#e8e8ed; box-shadow:none; }
.product-download-buttons .button:focus-visible { outline:3px solid #0071e3; outline-offset:3px; }
.product-download-buttons .button:disabled,
.product-download-buttons .button.is-disabled { background:#f5f5f7; color:#86868b; border-color:#e5e5ea; box-shadow:none; cursor:not-allowed; opacity:.85; transform:none !important; }
.product-download-buttons .button:disabled:hover,
.product-download-buttons .button.is-disabled:hover { background:#f5f5f7; color:#86868b; border-color:#e5e5ea; box-shadow:none; transform:none !important; }
.product-download-buttons .button:disabled:active,
.product-download-buttons .button.is-disabled:active { background:#f5f5f7; box-shadow:none; transform:none !important; }
.product-download-buttons .button:disabled:focus-visible,
.product-download-buttons .button.is-disabled:focus-visible { outline:none; }
.product-download-buttons .button .btn-icon { width:16px; height:16px; flex-shrink:0; fill:currentColor; margin:0; }
.product-download-buttons .button span { font-size:14px; font-weight:550; letter-spacing:-.01em; }
@media(max-width:420px) {
 .product-download-buttons { gap:8px; }
 .product-download-buttons .button { min-width:92px; min-height:36px; padding:7px 16px; font-size:13px; gap:6px; }
 .product-download-buttons .button .btn-icon { width:15px; height:15px; }
 .product-download-buttons .button span { font-size:13px; }
}
.qr-dialog { border:0; border-radius:24px; padding:0; background:transparent; box-shadow:0 25px 60px rgba(0,0,0,.25); max-width:380px; width:calc(100% - 40px); }
.qr-dialog::backdrop { background:rgba(0,0,0,.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.qr-dialog-box { position:relative; background:#ffffff; border-radius:24px; padding:32px 28px 28px; text-align:center; color:#1d1d1f; }
.qr-dialog-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:0; background:#f5f5f7; color:#86868b; font-size:22px; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .2s,color .2s; }
.qr-dialog-close:hover { background:#e5e5e7; color:#1d1d1f; }
.qr-dialog-header { display:flex; align-items:center; gap:14px; text-align:left; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #f0f0f2; }
.qr-dialog-header .app-icon { width:48px; height:48px; border-radius:12px; flex-shrink:0; }
.qr-dialog-header h3 { font-size:18px; margin:0 0 4px; font-weight:600; }
.qr-dialog-header p { font-size:12px; color:#86868b; margin:0; }
.qr-dialog-content { display:flex; flex-direction:column; align-items:center; }
.qr-image { width:220px; height:220px; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.08); border:1px solid #f0f0f2; margin-bottom:16px; }
.qr-hint { font-size:13px; color:#6e6e73; margin:0 0 14px; }
.qr-direct-link { font-size:12px; color:#0071e3; text-decoration:none; }
.qr-direct-link:hover { text-decoration:underline; }
.split-opening .scroll-invitation { margin-top:22px; }
.split-opening .edge-device { position:absolute; width:47%; right:10%; top:18%; transform:rotate(9deg); }
/* Prepared assets include the complete official bezel, camera and notebook base. */
.product-screen.framed-screen { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; filter:drop-shadow(0 18px 18px #16241d26); }
.product-screen.framed-screen img { display:block; width:100%; height:auto; max-height:none; border-radius:0; box-shadow:none; }
.layout-mixed .screen-tablet { position:absolute; width:88%; left:6%; top:50%; transform:translateY(-50%) rotate(-3deg); }
.screen-gallery-item img { border-radius:0; box-shadow:none; filter:drop-shadow(0 10px 10px #172a221f); }
.screen-gallery-item.gallery-tablet { flex-basis:420px; justify-content:center; }
.screen-gallery-item.gallery-tablet img { width:370px; height:auto; max-height:285px; }
.image-viewer img { border-radius:0; filter:drop-shadow(0 15px 15px #0003); }
.reading-book .framed-screen { width:52%; }
.reading-gallery .product-gallery>a { background:transparent; padding:0; box-shadow:none; border:0; }
.reading-gallery .product-gallery img { border-radius:0; box-shadow:none; }
/* Different silhouettes give each core story its own visual rhythm. */
.immersive-inner { grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr); gap:55px; }
.immersive-art { position:relative; min-height:420px; }
.immersive-art>.framed-screen { width:46%; max-width:260px; }
.immersive-art>.screen-desktop { width:100%; max-width:680px; }
.immersive-art>.screen-tablet { width:100%; max-width:600px; }
.scene-devices { display:flex; align-items:center; justify-content:center; gap:22px; width:100%; }
.scene-devices .framed-screen { width:43%; max-width:235px; }
.scene-duo .framed-screen:first-child { transform:translateY(25px) rotate(-7deg); }
.scene-duo .framed-screen:last-child { transform:translateY(-20px) rotate(7deg); }
.scene-combo { position:relative; width:100%; max-width:760px; min-height:410px; display:flex; align-items:center; }
.scene-combo .screen-desktop { position:relative; width:90%; max-width:660px; transform:rotate(-3deg); margin-right:auto; margin-left:0; border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; filter:drop-shadow(0 20px 24px #16241d22); }
.scene-combo .screen-desktop img { width:100%; height:auto; max-height:none; border-radius:0; box-shadow:none; }
.scene-combo .screen-phone { position:absolute; right:0%; bottom:-8%; width:32%; max-width:235px; transform:rotate(6deg); z-index:2; border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; filter:drop-shadow(0 22px 30px rgba(0,0,0,0.36)); }
.scene-combo .screen-phone img { width:100%; height:auto; max-height:none; border-radius:0; box-shadow:none; }
.scene-layered { width:100%; position:relative; aspect-ratio:1.2; }
.scene-canvas { position:absolute; top:8%; left:0; width:94%; margin:0; transform:rotate(-4deg); }
.scene-canvas img { width:100%; height:auto; max-height:none; border-radius:0; box-shadow:0 20px 50px #182b2917; }
.scene-canvas figcaption { font-size:10px; color:var(--scene-muted); text-align:left; margin-top:10px; }
.scene-layered>.framed-screen { position:absolute; right:1%; bottom:-5%; width:38%; margin:0; max-width:245px; transform:rotate(7deg); }
.scene-layered>.screen-tablet { width:85%; max-width:520px; right:-1%; bottom:0; transform:rotate(5deg); }
@media(min-width:761px) {
 .scene-2 .immersive-copy { grid-column:1; }
 .scene-2 .immersive-art { grid-column:2; }
}
@media(max-width:1050px) {
 .product-opening.split-opening { min-height:600px; }
 .split-opening .story-hero { width:56%; }
 .split-opening .opening-edge { width:29%; }
 .immersive-inner { gap:30px; }
 .scene-devices { gap:14px; }
 .scene-combo { min-height:340px; }
 .scene-combo .screen-desktop { width:90%; }
 .scene-combo .screen-phone { width:33%; max-width:210px; bottom:-6%; right:0; }
}
.highlights-super-title, .immersive-pinned-dots { display: none; }
@media(max-width:760px) {
 /* Layout container & prevent horizontal jitter */
 html, body { overflow-x: hidden; scroll-padding-top: 50px !important; }
 .page-width { width: calc(100% - 36px) !important; max-width: 100%; }

 /* Header & Hamburger Menu Button */
 .menu-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
 }
 .hamburger {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: 20px !important;
  height: 14px !important;
  position: relative !important;
 }
 .hamburger i {
  display: block !important;
  width: 100% !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
  transform-origin: center !important;
 }
 .menu-button[aria-expanded="true"] .hamburger i:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
 }
 .menu-button[aria-expanded="true"] .hamburger i:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0.2) !important;
 }
 .menu-button[aria-expanded="true"] .hamburger i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
 }
 #navigation {
  display: flex !important;
  position: absolute !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 16px 24px 24px !important;
  gap: 6px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  opacity: 0 !important;
  transform: translateY(-16px) scale(0.97) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1), visibility 0.45s !important;
  transform-origin: top center !important;
  z-index: 100 !important;
 }
 #navigation.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
  visibility: visible !important;
 }

 /* 1. HOME: Launch Hero compact */
 .launch-hero { padding: 92px 18px 0 !important; }
 .launch-hero h1 { font-size: clamp(38px, 12.5vw, 52px) !important; line-height: 1.25 !important; margin-bottom: 16px !important; }
 .launch-hero h1 .motto-comma,
 .launch-hero h1 .motto-period,
 .launch-hero h1 .motto-br,
 .launch-hero h1 .mobile-motto-break { display: none !important; }
 .launch-hero h1 .motto-row { display: block !important; }
 .launch-hero h1 span.motto-plain {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #1d1d1f !important;
 }
 .launch-hero h1 .motto-gradient,
 .launch-hero h1 .motto-accent {
  background: linear-gradient(110deg,#0084dd 15%,#495bd7 58%,#9b5bc0) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
 }
 .launch-description { font-size: 13px !important; line-height: 1.7 !important; margin-bottom: 20px !important; }
 .icon-landscape { height: 180px !important; margin-top: 24px !important; max-width: 360px !important; }
 .floating-app .app-icon { width: 58px !important; height: 58px !important; border-radius: 14px !important; }

 /* 2. HOME: Meet Suyue & Design Principles (Vertical list, highly compressed) */
 .meet-suyue { padding-block: 42px 24px !important; gap: 20px !important; }
 .meet-signature { width: 110px !important; height: 46px !important; margin-bottom: 14px !important; }
 .meet-copy h2 { font-size: 24px !important; line-height: 1.35 !important; margin-bottom: 12px !important; }
 .meet-copy>p:not(.eyebrow) { font-size: 13px !important; line-height: 1.7 !important; }
 .design-principles {
  display: flex !important;
  flex-direction: column !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  gap: 8px !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  padding-bottom: 0 !important;
  width: 100% !important;
 }
 .design-principle {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
 }
 .design-principle svg { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; }
 .design-principle h3 { font-size: 14px !important; margin: 0 0 2px !important; font-weight: 600 !important; }
 .design-principle p { font-size: 11px !important; line-height: 1.4 !important; color: #737780 !important; margin: 0 !important; }

 /* 3. HOME: Collection Overview (Horizontal only, no vertical scroll or jitter) */
 .collection-overview { padding-block: 45px 25px !important; }
 .wide-heading { margin-bottom: 20px !important; }
 .wide-heading h2 { font-size: 26px !important; }
 .overview-grid {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  gap: 14px !important;
  margin-inline: -18px !important;
  padding-inline: 18px !important;
  padding-bottom: 8px !important;
  scrollbar-width: none;
 }
 .overview-grid::-webkit-scrollbar { display: none; }
 .overview-app {
  flex: 0 0 84% !important;
  max-width: 320px !important;
  scroll-snap-align: center;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  touch-action: pan-x !important;
  overflow: hidden !important;
  height: auto !important;
 }
 .overview-visual { width: 100% !important; margin: 0 !important; overflow: hidden !important; }
 .overview-visual img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1920/823 !important;
  object-fit: contain !important;
  display: block !important;
 }
 .overview-caption {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
 }
 .overview-caption .app-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; margin: 0 !important; }
 .overview-caption h3 { font-size: 18px !important; margin-bottom: 2px !important; }
 .overview-caption p { font-size: 11px !important; line-height: 1.5 !important; }
 .overview-caption .overview-open {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #f5f5f7 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  margin: 0 !important;
 }
 .core-badges { margin-inline: 16px !important; width: calc(100% - 32px) !important; padding: 12px 0 16px !important; gap: 6px !important; }
 .core-badges li { font-size: 10px !important; padding: 5px 8px !important; }
 .core-badges svg { width: 14px !important; height: 14px !important; }
 .overview-foot { margin-top: 18px !important; font-size: 11px !important; }

 /* 4. HOME: Waterfall Products - Image first, text below, horizontal tags */
 .waterfall-intro { padding-block: 40px 20px !important; }
 .waterfall-intro h2 { font-size: 26px !important; }
 .waterfall-intro>p:last-child { font-size: 13px !important; margin-top: 14px !important; }
 .waterfall-product { padding: 0 12px 18px !important; }
 .has-product-art .waterfall-frame {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 20px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
 }
 .waterfall-campaign {
  order: 1 !important;
  padding: 16px 16px 0 !important;
  width: 100% !important;
 }
 .campaign-preview { border-radius: 14px !important; }
 .has-product-art .waterfall-copy, .has-product-art:nth-child(even) .waterfall-copy {
  order: 2 !important;
  padding: 18px 18px 22px !important;
  min-height: 0 !important;
  width: 100% !important;
 }
 .has-product-art .waterfall-identity { margin-bottom: 12px !important; gap: 10px !important; }
 .has-product-art .waterfall-identity .app-icon { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
 .has-product-art .waterfall-identity>span { font-size: 15px !important; }
 .has-product-art .waterfall-copy h2 { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 10px !important; }
 .waterfall-summary {
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
 .core-features-label { margin: 10px 0 8px !important; font-size: 10px !important; }
 .waterfall-tags {
  display: flex !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
  padding-bottom: 4px !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
 }
 .waterfall-tags::-webkit-scrollbar { display: none; }
 .has-product-art .waterfall-tags>span {
  flex-shrink: 0;
  font-size: 10px !important;
  padding: 5px 9px !important;
  border-radius: 12px !important;
 }
 .waterfall-copy .actions { gap: 10px !important; }
 .waterfall-copy .button { font-size: 12px !important; padding: 8px 16px !important; min-height: 36px !important; }
 .home-signoff { padding-block: 45px 35px !important; }
 .home-signoff h2 { font-size: 28px !important; margin-bottom: 12px !important; }
 .home-signoff>p:not(.eyebrow) { font-size: 13px !important; line-height: 1.7 !important; }

 /* 5. PRODUCT DETAILS: Split opening hero compact */
 .story-localnav { top: 60px !important; padding: 0 16px !important; min-height: 50px !important; }
 .story-localnav .localnav-name { font-size: 15px !important; }
 .story-localnav .localnav-name .app-icon { width: 22px !important; height: 22px !important; }
 .story-localnav div { margin-left: auto !important; }
 .story-localnav div a { display: none !important; }
 .story-localnav .button { margin-left: auto !important; }
 .product-opening.split-opening {
  min-height: 0 !important;
  padding: 36px 18px 42px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
 }
 .split-opening .opening-edge {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 32% !important;
  max-width: 140px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.42 !important;
 }
 .split-opening .opening-edge-left {
  left: -10px !important;
  mask-image: linear-gradient(90deg, #000 20%, transparent 95%) !important;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 95%) !important;
 }
 .split-opening .opening-edge-right {
  right: -10px !important;
  mask-image: linear-gradient(270deg, #000 20%, transparent 95%) !important;
  -webkit-mask-image: linear-gradient(270deg, #000 20%, transparent 95%) !important;
 }
 .opening-edge > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: blur(1.5px) !important;
 }
 .split-opening .story-hero { width: 100% !important; max-width: 100% !important; }
 .split-opening .opening-identity { margin-bottom: 16px !important; gap: 10px !important; }
 .split-opening .opening-identity .app-icon { width: 56px !important; height: 56px !important; border-radius: 14px !important; }
 .split-opening .opening-identity span { font-size: 20px !important; }
 .split-opening .story-hero h1 { font-size: 26px !important; line-height: 1.3 !important; }
 .split-opening .opening-aside { margin: 16px auto 0 !important; }
 .split-opening .story-summary {
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
 .product-download-buttons .button { min-width: 90px !important; min-height: 34px !important; font-size: 12px !important; padding: 6px 14px !important; }
 .split-opening .scroll-invitation { margin-top: 14px !important; font-size: 10px !important; }

 /* Mobile highlights: a native, content-sized product gallery. */
 .immersive-wrapper {
  padding: 38px 0 30px;
  background: #fbfbf9;
  scroll-margin-top: 0;
 }
 .highlights-super-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 24px 20px;
 }
 .highlights-tag { font-size: 23px; font-weight: 650; letter-spacing: -.04em; color: #252923; }
 .highlights-hint { font-size: 12px; color: #797d76; }
 .immersive-story {
  display: flex;
  gap: 12px;
  padding: 0 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
 }
 .immersive-story::-webkit-scrollbar { display: none; }
 .immersive-story .immersive-scene {
  flex: 0 0 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  scroll-snap-align: start;
  scroll-margin: 0;
 }
 .immersive-story .immersive-stage {
  position: relative;
  top: auto;
  height: 100%;
  min-height: 0;
  border-radius: 28px;
  background: var(--scene-bg);
  color: var(--scene-ink);
  border: 1px solid var(--scene-line, #00000009);
  overflow: hidden;
 }
 .immersive-story .immersive-atmosphere { display: none; }
 .immersive-story .immersive-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
 }
 .immersive-wrapper .immersive-story .immersive-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 26px 0;
  box-sizing: border-box;
  transform: none;
 }
 .mobile-scene-tag {
  display: block;
  margin-bottom: 14px;
  color: var(--scene-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
 }
 .scene-tag-dot { display: none; }
 .immersive-story .immersive-copy h2 {
  font-size: clamp(25px, 7vw, 35px);
  line-height: 1.28;
  letter-spacing: -.045em;
  margin: 0 0 12px;
  color: var(--scene-ink);
  text-wrap: balance;
 }
 .immersive-story .scene-description {
  display: block;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--scene-muted);
  margin: 0;
 }
 .immersive-wrapper .immersive-story .immersive-art {
  flex: 1;
  width: 100%;
  min-height: 340px;
  padding: 24px 18px 30px;
  box-sizing: border-box;
  transform: none;
  background: radial-gradient(ellipse at 50% 65%, var(--scene-light), transparent 72%);
 }
 .immersive-story .product-screen.framed-screen {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: none;
  filter: drop-shadow(0 16px 12px #17251d24);
 }
 .immersive-story .product-screen.framed-screen img {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
 }
 .immersive-story .scene-devices {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 360px;
 }
 .immersive-story .scene-duo .framed-screen { width: 44%; }
 .immersive-story .scene-duo .framed-screen:first-child { transform: translateY(12px) rotate(-5deg); }
 .immersive-story .scene-duo .framed-screen:last-child { transform: translateY(-8px) rotate(5deg); }
 .immersive-story .scene-combo {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 300px;
  display: flex;
  align-items: center;
 }
 .immersive-story .scene-combo .screen-desktop { width: 94%; margin: 0; transform: translateY(-35px) rotate(-3deg); }
 .immersive-story .scene-combo .screen-phone { width: 38%; right: 0; bottom: 0; transform: rotate(5deg); }
 .immersive-story .scene-layered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 430px;
  aspect-ratio: auto;
  min-height: 290px;
 }
 .immersive-story .scene-canvas { display: none; }
 .immersive-story .scene-layered > .framed-screen,
 .immersive-story .immersive-art > .framed-screen {
  position: relative;
  inset: auto;
  width: 48%;
  max-width: 195px;
  margin: 0;
  transform: rotate(-3deg);
 }
 .immersive-story .scene-layered > .screen-tablet { width: 100%; max-width: 430px; transform: rotate(-3deg); }
 .immersive-story .scene-next, .immersive-story .scene-footer { display: none; }
 .immersive-pinned-dots {
  position: static;
  border: 0;
  box-shadow: none;
  display: flex;
  gap: 6px;
  margin: 20px 20px 0;
  padding: 5px;
  background: #eeefea;
  border-radius: 18px;
 }
 .immersive-pinned-dots a {
  display: grid;
  place-items: center;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 3px;
  box-sizing: border-box;
  border-radius: 13px;
  color: #74796f;
  font-size: 11px;
  font-weight: 550;
  text-align: center;
  transition: background .25s, color .25s, box-shadow .25s;
 }
 .immersive-pinned-dots a[aria-current="step"] { background: #fff; color: #252923; box-shadow: 0 2px 8px #2332210d; }
 .immersive-pinned-dots a:focus-visible { outline: 2px solid var(--accent, #536b48); outline-offset: 2px; }
 @media (prefers-reduced-motion: no-preference) {
  .immersive-wrapper .immersive-story .immersive-copy { transform: translateY(8px); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .immersive-wrapper .immersive-story .immersive-art { transform: translateY(16px) scale(.97); transition: transform .65s cubic-bezier(.2,.7,.2,1); }
  .immersive-wrapper .immersive-story .scene-active .immersive-copy,
  .immersive-wrapper .immersive-story .scene-active .immersive-art { transform: none; }
 }
 @media (min-width: 500px) {
  .immersive-wrapper .immersive-story .immersive-art { min-height: 410px; }
  .immersive-story .scene-devices { max-width: 390px; }
 }
 @media (prefers-reduced-motion: reduce) {
  .immersive-pinned-dots a { transition: none; }
 }

 /* 7. PRODUCT DETAILS: Features & Chapters - Image first, text below, NO figcaption */
 figcaption, .chapter-screens figcaption {
  display: none !important;
 }
 .product-manifesto { padding-block: 36px 16px !important; }
 .product-manifesto h2 { font-size: 22px !important; line-height: 1.35 !important; }
 .feature-heading { padding-block: 36px 16px !important; }
 .feature-heading h2 { font-size: 23px !important; }
 .feature-chapter, .feature-chapter.chapter-reversed {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 16px !important;
  margin-inline: 0 !important;
  width: 100% !important;
  border-radius: 20px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
 }
 .feature-chapter .chapter-image {
  order: 1 !important;
  width: 100% !important;
  border-radius: 14px !important;
  margin: 0 !important;
  overflow: hidden !important;
 }
 .chapter-screens {
  overflow: hidden !important;
  padding: 14px 0 !important;
 }
 .chapter-screens .device-stage {
  width: 100% !important;
  height: 350px !important;
  min-height: 350px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
 }
 .chapter-screens .layout-phones {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 12px 4% !important;
  gap: 16px !important;
  box-sizing: border-box !important;
 }
 .chapter-screens .layout-phones .screen-phone {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 310px !important;
  width: auto !important;
  max-width: 44% !important;
  flex-shrink: 0 !important;
 }
 .chapter-screens .layout-phones .screen-phone img {
  max-height: 310px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 18px !important;
  display: block !important;
 }
 .chapter-screens .layout-phones.count-1 .screen-phone {
  max-width: 200px !important;
  max-height: 320px !important;
 }
 .chapter-screens .layout-phones.count-1 .screen-phone img {
  max-height: 320px !important;
 }
 .chapter-screens .layout-mixed {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 340px !important;
 }
 .chapter-screens .layout-mixed .screen-desktop {
  position: absolute !important;
  top: 72px !important;
  left: 4% !important;
  width: 78% !important;
  max-width: 280px !important;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.15)) !important;
 }
 .chapter-screens .layout-mixed .screen-desktop img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px !important;
 }
 .chapter-screens .layout-mixed .screen-phone {
  position: absolute !important;
  right: 6% !important;
  bottom: 12px !important;
  width: 32% !important;
  max-width: 125px !important;
  max-height: 250px !important;
  z-index: 2 !important;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.22)) !important;
 }
 .chapter-screens .layout-mixed .screen-phone img {
  max-height: 250px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
 }
 .feature-chapter .chapter-copy {
  order: 2 !important;
  padding: 0 !important;
 }
 .chapter-copy .eyebrow { font-size: 9px !important; margin-bottom: 6px !important; }
 .chapter-copy h2 { font-size: 20px !important; line-height: 1.3 !important; margin-bottom: 8px !important; }
 .chapter-description {
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-bottom: 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
 }
 .chapter-details summary {
  font-size: 12px !important;
  min-height: 42px !important;
  padding: 8px 0 !important;
 }
 .chapter-details details>p {
  font-size: 11px !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
 }

 /* 8. PRODUCT DETAILS: Gallery & Finale & Other Products */
 .screen-gallery { padding-bottom: 40px !important; }
 .screen-gallery .wide-heading h2 { font-size: 22px !important; }
 .screen-gallery-track { gap: 10px !important; padding: 6px 0 14px !important; }
 .screen-gallery-item { padding: 14px 12px !important; flex-basis: 145px !important; border-radius: 16px !important; }
 .screen-gallery-item img { height: 200px !important; }
 .screen-gallery-item.gallery-desktop { flex-basis: 250px !important; }
 .screen-gallery-item.gallery-desktop img { width: 220px !important; max-height: 200px !important; }
 .screen-gallery-item.gallery-tablet { flex-basis: 240px !important; }
 .screen-gallery-item.gallery-tablet img { width: 210px !important; max-height: 200px !important; }

 .product-finale { padding-block: 40px 32px !important; }
 .finale-icon .app-icon { width: 50px !important; height: 50px !important; border-radius: 12px !important; margin-bottom: 14px !important; }
 .product-finale h2 { font-size: 24px !important; margin-bottom: 10px !important; }
 .product-finale>p:not(.eyebrow):not(.fine-print):not(.story-platforms) {
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
 }
 .product-finale .actions { gap: 10px !important; }

 /* 9. Other Products: horizontal swipe */
 .other-products { padding-block: 0 45px !important; }
 .other-products .wide-heading h2 { font-size: 22px !important; }
 .other-grid {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  gap: 12px !important;
  margin-inline: -18px !important;
  padding-inline: 18px !important;
  padding-bottom: 12px !important;
  scrollbar-width: none;
 }
 .other-grid::-webkit-scrollbar { display: none; }
 .other-grid>a {
  flex: 0 0 74% !important;
  max-width: 260px !important;
  scroll-snap-align: start;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  border-radius: 16px !important;
 }
 .other-grid .app-icon { width: 38px !important; height: 38px !important; margin-bottom: 6px !important; }
 .other-grid h3 { font-size: 16px !important; margin: 0 !important; }
 .other-grid p { font-size: 11px !important; margin: 0 !important; }
 .other-grid span { font-size: 11px !important; margin-top: 4px !important; }

 /* 10. Shiye Reading Page: Book visual first, copy below */
 .reading-hero {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 20px 0 35px !important;
 }
 .reading-book {
  order: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 18px !important;
  transform: none !important;
  border-radius: 18px !important;
 }
 .reading-hero>div:first-child {
  order: 2 !important;
 }
 .reading-hero h1 { font-size: 26px !important; }

 /* 11. Portfolio Grid on /apps/: compact */
 .portfolio-grid {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  padding-bottom: 40px !important;
 }
 .portfolio-card { border-radius: 18px !important; }
 .portfolio-cover { background: transparent !important; }
 .portfolio-cover>img,
 .portfolio-cover .campaign-preview>img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: block !important;
 }
 .portfolio-info { padding: 14px 16px !important; gap: 10px !important; }
 .portfolio-info h2 { font-size: 18px !important; margin-bottom: 2px !important; }
 .portfolio-info p { font-size: 11px !important; margin-bottom: 2px !important; }
}

}

@media(min-width:761px) and (max-height:739px) {
 .scene-devices .framed-screen { max-width:180px; }
}
@media(max-width:480px) {
 .title-line,.manifesto-nowrap { white-space:normal; }
}

/* Five-product home and refreshed reading artwork. */
.icon-landscape .float-0 { left:4%; right:auto; }
.icon-landscape .float-1 { left:24%; right:auto; }
.icon-landscape .float-2 { left:44%; right:auto; }
.icon-landscape .float-3 { left:64%; right:auto; }
.icon-landscape .float-4 { left:84%; top:35px; --angle:9deg; }
.theme-sand { --product-surface:#f7f2e9; --product-glow:#e6d8bc; --product-deep:#4b3d2c; }
@media(max-width:700px) {
 .icon-landscape .floating-app .app-icon { width:52px; height:52px; border-radius:13px; }
 .icon-landscape .floating-app { gap:12px; }
 .icon-landscape .floating-app span { font-size:10px; }
 .icon-landscape .float-4 { top:25px; }
}