/* Light-mode art direction: daylight imagery, soft typography, pearl surfaces. */
body{background:radial-gradient(ellipse at 8% 3%,#f9ead84a,transparent 32%),radial-gradient(ellipse at 92% 8%,#e4eff16b,transparent 34%),#fffcf8}
.hero{padding-top:68px;text-align:center}
.hero>.eyebrow{color:#776b5f;font-weight:500;font-size:10px;letter-spacing:2.3px}
.hero-grid{display:block;margin-top:23px}
.hero h1,:lang(zh) .hero h1,:lang(ja) .hero h1{font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:76px;line-height:1.08;letter-spacing:-2.8px;color:#514b44}
.hero h1>span+span{margin-top:7px}
.hero h1 .gradient-text{background:none;color:#58777b;-webkit-text-fill-color:currentColor}
.hero-summary{padding:0;margin:24px auto 0;max-width:550px}
.hero-description{max-width:510px;margin-inline:auto;font-size:16px;line-height:1.75;color:#72695e}
.hero-actions{justify-content:center;gap:24px;margin-top:23px}
.hero-actions .button{background:linear-gradient(145deg,#647b7c,#526869);color:#fffdfa;box-shadow:inset 0 1px #ffffff38,0 5px 14px #52686913;padding:13px 21px;min-height:46px}
.hero-actions .button:hover{background:#496366}
.hero-actions .quiet-link{color:#6b665e}
.cinema-showcase{width:min(1080px,100%);aspect-ratio:1.84;margin:54px auto 0;text-align:left}
.cinema-aura{inset:11% 0 -5%;background:radial-gradient(ellipse at 20% 65%,#e8d9c76b,transparent 56%),radial-gradient(ellipse at 75% 40%,#cfe5eb6b,transparent 60%);filter:blur(30px)}
.hero-tv{left:0;top:0;width:87%;border:5px solid #f3f0e8;border-radius:17px;box-shadow:0 0 0 1px #d9d9d1,inset 0 0 0 1px #fff,0 24px 55px #6877791c;background:#e6eef0}
.hero-tv>img{border-radius:12px}
.hero-tv:after{background:linear-gradient(180deg,#fff9ed0a,transparent 80%)}
.tv-top{top:20px;left:24px;right:24px;color:#38535f;font-size:9px;letter-spacing:1.7px}
.tv-top>span:first-child{font-size:13px;font-weight:550}
/* Video subtitles stay directly on the picture in every appearance and preview theme. */
.tv-subtitles,.scene-subtitles,.workspace-subtitle{padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:#fff;text-shadow:0 1px 2px #000b,0 0 1px #000,-.5px 0 #0008,.5px 0 #0008,0 -.5px #0008}
.tv-subtitles{left:19%;right:19%;bottom:9%}
.tv-subtitles>p:first-child{font-size:23px;font-weight:400;line-height:1.5}
.tv-subtitles>p:last-child{font-size:12px;margin-top:6px;color:#f4f5f6}
.tv-stand{bottom:-26px;height:23px;background:linear-gradient(180deg,#deddd5,#eae6dc);opacity:.85}
.showcase-phone,.showcase-phone:has(>.product-ui){right:0;bottom:0;width:24.5%;transform:rotate(2deg);border:5px solid #e7e1d6;box-shadow:0 0 0 1px #c6c2b970,inset 0 0 0 1px #fff,0 25px 55px #5e675e26}
.device-caption{left:0;bottom:1%;color:#72695e;font-size:9px;letter-spacing:1.4px;gap:18px}
.device-caption>span:first-child{color:#72695e}
.hero-under{margin-top:26px;color:#72695e}
.hero-under>p:last-child{color:#72695e}
.section-heading h2{font-weight:450}
.hero-under,.hero-under>p:last-child,.custom-note,.demo-caption,.platform-note{color:#72695e}
.scene:after{background:linear-gradient(180deg,#fffef90a,transparent 45%,#edf5f21a 68%,#edf4f1ed)}
.scene-heading{color:#36525d}
.scene-number{border-color:#506d6e40}
.scene-caption-icon{color:#36525d;background:#fffdf3cc;border-color:#fff}
.scene-subtitles span,.workspace-subtitle span{color:#f4f5f6}
.scene-timeline{background:#748f934d}.scene-timeline>span,.scene-timeline>i{background:#526e76}
.scene-bottom{color:#36535d}.scene-bottom i{color:#526970}
.workspace-video:after{background:linear-gradient(180deg,transparent 42%,#153c512b)}
.custom-workspace[data-theme=black] .workspace-video:after,.custom-workspace[data-theme=twilight] .workspace-video:after,.custom-workspace[data-theme=ocean] .workspace-video:after{background:linear-gradient(180deg,transparent 45%,#0008)}
@media(max-width:1000px){
 .hero{padding-top:59px}.hero h1,:lang(zh) .hero h1,:lang(ja) .hero h1{font-size:65px;letter-spacing:-2.2px}
 .cinema-showcase{aspect-ratio:1.8;margin-top:45px}.hero-tv{width:88%}.showcase-phone,.showcase-phone:has(>.product-ui){width:25.5%;border-radius:29px}
 .tv-subtitles{left:14%;right:18%}.tv-subtitles>p:first-child{font-size:19px}.tv-subtitles>p:last-child{font-size:10px}.tv-top{font-size:8px;top:15px;left:18px;right:18px}
 :lang(ja) .hero h1{font-size:48px;line-height:1.3}
}
@media(max-width:700px){
 .hero{padding-top:44px}.hero>.eyebrow{font-size:8px;letter-spacing:1.7px}.hero-grid{margin-top:19px}
 .hero h1{font-size:44px;line-height:1.13;letter-spacing:-1.7px}.hero h1>span+span{margin-top:5px}
 :lang(zh) .hero h1{font-size:39px;line-height:1.3;letter-spacing:-.7px}
 :lang(ja) .hero h1{font-size:27px;line-height:1.45;letter-spacing:-.8px}
 .hero-summary{margin-top:20px;max-width:340px}.hero-description,:lang(zh) .hero-description,:lang(ja) .hero-description{font-size:13px;line-height:1.85;max-width:310px}
 .hero-actions{gap:18px;margin-top:20px}.hero-actions .button{font-size:10px;min-height:43px;padding:11px 15px;gap:16px}.hero-actions .quiet-link{font-size:10px}
 .cinema-showcase{aspect-ratio:.8;margin-top:41px}.cinema-aura{inset:12% 0 0}
 .hero-tv{width:96%;left:0;border-width:3px;border-radius:12px}.hero-tv>img,.hero-tv:after{border-radius:9px}
 .tv-top{font-size:5px;top:11px;left:12px;right:12px;letter-spacing:.8px}.tv-top>span:first-child{font-size:8px}
 .tv-subtitles{left:10%;right:10%;bottom:12%}
 .tv-subtitles>p:first-child{font-size:12px;line-height:1.5}.tv-subtitles>p:last-child{font-size:7px;margin-top:3px}
 .tv-stand{bottom:-13px;height:12px}
 .showcase-phone,.showcase-phone:has(>.product-ui){width:38%;right:0;bottom:0;border-width:3px;border-radius:22px;transform:rotate(2deg)}
 .device-caption{left:3%;bottom:21%;max-width:49%;display:flex;flex-wrap:wrap;font-size:7px;letter-spacing:1px;gap:7px;line-height:1.8}.device-caption>span:nth-child(2){display:none}
 .hero-under{margin-top:21px;gap:8px}.hero-under,.hero-under>p:last-child{font-size:8px}
}
@media(max-width:370px){
 .hero h1{font-size:37px;letter-spacing:-1.5px}:lang(zh) .hero h1{font-size:34px}:lang(ja) .hero h1{font-size:24px}
 .hero>.eyebrow{font-size:7px;letter-spacing:1.2px}.hero-actions{gap:14px}.hero-actions .button{font-size:9px;padding:10px 13px}.hero-actions .quiet-link{font-size:9px}
 .tv-subtitles{left:8%;right:8%}.tv-subtitles>p:first-child{font-size:10px}.tv-subtitles>p:last-child{font-size:6px}.showcase-phone,.showcase-phone:has(>.product-ui){border-radius:19px}
}
@media(prefers-contrast:more){.hero h1{color:#302b27}.hero h1 .gradient-text{color:#34575b}.tv-subtitles,.scene-subtitles,.workspace-subtitle{text-shadow:0 1px 2px #000,0 0 2px #000,-.5px 0 #000,.5px 0 #000,0 -.5px #000}}