/* The H1 is the descriptive line (.hero-sub); the slogan (.hero-title) is a styled paragraph.
   These base rules give each element the global styles of the tag it used to be. */
.hero-title{margin:0;color:inherit;font-family:var(--head);line-height:1.18;font-weight:500;letter-spacing:-.045em}
.hero-sub{margin:0;font:inherit;letter-spacing:inherit;color:var(--muted)}
.cinema{position:relative;background:#0b0c12;height:auto;isolation:isolate}
.cinema-stage{height:min(850px,calc(100svh - 81px));min-height:610px;position:relative;overflow:hidden;background:#0b0c12;isolation:isolate}
.studio-scene,.studio-shade{position:absolute;inset:0;pointer-events:none}
.studio-scene{transform-origin:50% 66%;will-change:transform;z-index:-3}
.studio-scene img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
.studio-shade{z-index:-2;background:linear-gradient(180deg,#080b1055,transparent 44%,#080b1020 76%,#080b10 100%)}
.cinema-copy{position:absolute;top:5%;inset-inline:20px;text-align:center;z-index:5;will-change:transform,opacity}
.cinema-copy .beta-link{background:#15141cad;border-color:#80709255;color:#dad3e8}
.cinema-copy .hero-title{font-size:clamp(45px,5vw,74px);line-height:1.15;font-weight:500;letter-spacing:-.055em;margin:20px 0 14px}
.cinema-copy .hero-title>span{color:#bcabeb}
.cinema-copy>.hero-sub{font-size:17px;color:#c4bdcf;line-height:1.7}
.cinema-actions{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:22px}
.cinema-actions .button{background:#c7b6ef;border-color:#dacbff;color:#241d34;box-shadow:0 5px 35px #9170d322}
.cinema-skip{font-size:13px;color:#d5cbe7}
.cinema-device{position:absolute;width:min(44vw,660px);left:50%;top:66%;transform:translate(-50%,-50%);transform-origin:center;will-change:transform;direction:ltr;z-index:2}
.device-lid{padding:11px 10px 17px;border-radius:15px 15px 7px 7px;background:linear-gradient(125deg,#4b4c54,#15151b 22%,#26262d 68%,#76727f);border:1px solid #85818b;box-shadow:0 16px 35px #0008,0 0 0 1px #000;position:relative}
.device-camera{position:absolute;top:4px;left:50%;width:3px;height:3px;border-radius:50%;background:#333640;box-shadow:0 0 0 1px #101016}
.device-screen{position:relative;aspect-ratio:1.5;background:#0f1217;overflow:hidden;border-radius:3px}
.product-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform,opacity}
.frame-stats,.frame-insights{opacity:0}
.screen-glass{position:absolute;inset:0;background:linear-gradient(120deg,#d7cdf70b,transparent 45%);pointer-events:none}
.device-wordmark{position:absolute;bottom:3px;width:100%;text-align:center;left:0;font:5px var(--mono);letter-spacing:.28em;color:#77727d}
.device-base{position:absolute;top:100%;left:-8%;width:116%;height:16px;border-radius:1px 1px 50% 50% / 1px 1px 100% 100%;background:linear-gradient(#88858f,#3d3b46 38%,#14141a);box-shadow:0 8px 15px #0008;border-top:1px solid #aca6b3;transform-origin:top}
.device-base>span{position:absolute;top:0;left:42%;width:16%;height:4px;border-radius:0 0 7px 7px;background:#333039}
.device-shadow{position:absolute;top:85%;left:25%;width:50%;height:25px;background:#0009;filter:blur(16px);border-radius:50%;z-index:1}
.cinema-caption{position:absolute;right:5%;bottom:15%;max-width:330px;z-index:4;opacity:0;pointer-events:none;text-shadow:0 2px 20px #000;will-change:opacity,transform}
.cinema-chapter{font-size:11px;color:#c4b5e5;display:block;margin-bottom:15px}.cinema-caption h2{font-size:clamp(28px,3vw,46px);line-height:1.15;margin-bottom:13px}.cinema-caption p{font-size:14px;color:#d0c6df}
.cinema-controls{position:absolute;bottom:37px;inset-inline:5%;display:flex;align-items:center;justify-content:space-between;gap:22px;z-index:8;color:#d4cce0;font-size:11px}
.cinema-controls a,.cinema-controls button{color:#ded5ed;background:#111018b8;border:1px solid #75618a66;padding:8px 13px;border-radius:5px;font-size:11px}
.cinema-position{width:220px;max-width:35vw}.cinema-progress{height:2px;background:#ffffff25;margin-top:10px;overflow:hidden}.cinema-progress i{display:block;width:100%;height:100%;background:#c5adef;transform:scaleX(0);transform-origin:right}
.cinema-disclaimer{position:absolute;bottom:10px;inset-inline:0;text-align:center;font-size:9px;color:#a89dbb;z-index:8;pointer-events:none}
.cinema-bridge{display:flex;gap:30px;align-items:center;padding-block:48px;border-bottom:1px solid var(--line-soft)}.cinema-bridge .section-index{margin:0;white-space:nowrap;color:#b6a1d9}.cinema-bridge>p{font-size:17px;color:#c9c1d5}.cinema-bridge>.mono{margin-right:auto;font-size:9px;letter-spacing:.13em;color:#7e728f}
.cinema-active .cinema{height:330svh}.cinema-active .cinema-stage{height:calc(100svh - 81px);position:sticky;top:81px;min-height:0}
@media(max-width:1000px) and (min-width:761px){.cinema-stage,.cinema-active .cinema-stage{height:calc(100svh - 108px);top:108px}.cinema-copy .hero-title{font-size:50px}.cinema-device{width:54vw;top:70%}.cinema-copy{top:4%}}
@media(max-width:760px){.cinema-stage{height:820px;min-height:0}.cinema-copy{top:40px;inset-inline:16px}.cinema-copy .hero-title{font-size:49px;max-width:360px;margin:25px auto 17px}.cinema-copy .hero-title span{display:block}.cinema-copy>.hero-sub{font-size:15px}.cinema-actions{gap:18px}.cinema-actions .button{font-size:13px;padding:10px 18px}.cinema-skip{font-size:11px}.cinema-device{width:86%;top:66%;max-width:580px}.device-lid{padding:8px 7px 12px;border-radius:9px 9px 4px 4px}.device-base{height:11px}.device-wordmark{font-size:4px;bottom:2px}.studio-scene img{object-position:50% 60%;opacity:.75}.cinema-caption{right:7%;bottom:20%;max-width:230px}.cinema-caption h2{font-size:30px}.cinema-caption p{font-size:12px}.cinema-controls{bottom:38px;inset-inline:6%;gap:8px;flex-wrap:wrap}.cinema-position{max-width:none;width:100%;margin-bottom:8px}.cinema-controls a,.cinema-controls button{font-size:10px}.cinema-bridge{flex-direction:column;gap:12px;align-items:flex-start;padding-block:30px}.cinema-bridge>.mono{margin:0}.cinema-bridge p{font-size:15px}.cinema-active .cinema{height:220svh}.cinema-active .cinema-stage{top:112px;height:calc(100svh - 112px)}.cinema-active .cinema-copy{top:20px}.cinema-active .cinema-copy .hero-title{font-size:42px;margin:18px auto 10px}.cinema-active .cinema-copy>.hero-sub{font-size:13px}.cinema-active .cinema-actions{margin-top:17px}.cinema-active .cinema-device{top:68%;width:82%}}
@media(max-height:760px) and (min-width:761px){.cinema-copy{top:3%}.cinema-copy .hero-title{font-size:48px;margin:12px 0 8px}.cinema-copy>.hero-sub{font-size:14px}.cinema-actions{margin-top:14px}.cinema-actions .button{min-height:40px;padding:8px 18px}.cinema-device{width:min(37vw,540px);top:68%}}
@media print{.cinema{height:auto!important}.cinema-stage{height:600px!important;position:relative!important;top:0!important}.cinema-controls{display:none}}
@media(max-width:760px){.navigation{top:112px}html{scroll-padding-top:128px}}
@media(max-width:760px) and (max-height:760px){.cinema-active .cinema-stage{min-height:650px}.cinema-active .cinema-copy .hero-title{font-size:36px;margin-top:12px}.cinema-active .cinema-copy>.hero-sub{font-size:12px}.cinema-active .cinema-actions .button{min-height:42px;padding:8px 15px}}
/* Match the landing palette and place the opening copy above the physical device. */
.cinema-copy{top:2%}
.cinema-copy .beta-link{background:#111b29ad;border-color:#314969;color:#c7d6ed}
.cinema-copy .hero-title{margin:14px 0 10px}
.cinema-copy .hero-title>span{color:var(--blue)}
.cinema-copy>.hero-sub{color:#c1cddd}
.cinema-actions{margin-top:16px}
.cinema-actions .button{background:#afcaff;border-color:#c6daff;color:#101c30;box-shadow:0 5px 35px #548cff22}
.cinema-skip{color:#c9d8ed}
.cinema-chapter{color:#adc7eb}.cinema-caption p{color:#c6d4e7}
.cinema-controls{color:#c4d2e5}
.cinema-controls a,.cinema-controls button{color:#d0dff2;background:#101824cf;border-color:#5b7ea366}
.cinema-progress i{background:var(--blue)}
.cinema-disclaimer{color:#99abc4}
.cinema-bridge .section-index{color:#acc7ec}.cinema-bridge>p{color:#c1cddd}.cinema-bridge>.mono{color:#8197b5}
.device-shadow{height:10px;filter:blur(6px);background:#000c}
.product-frame{object-fit:contain}
@media(max-width:760px){.cinema-copy,.cinema-active .cinema-copy{top:16px}.cinema-active .cinema-copy .hero-title{margin:12px auto 8px}.cinema-actions,.cinema-active .cinema-actions{margin-top:12px}}
/* The MacBook chassis, keyboard, reflection and contact shadow belong to the photo. */
.studio-scene{background:#080b10}
.studio-scene img{position:absolute;max-width:none;object-fit:fill;opacity:1;mask-image:linear-gradient(to bottom,#000 90%,transparent),linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.device-lid{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.device-base,.device-camera,.device-wordmark,.device-shadow,.screen-glass{display:none}
.device-screen{aspect-ratio:482/305;border-radius:2px;background:#0f1217}
.device-screen::after{content:'';position:absolute;width:10%;height:3%;left:45%;top:0;background:#050609;border-radius:0 0 3px 3px;opacity:var(--notch-opacity,1)}
.cinema-copy .hero-title{font-size:clamp(42px,4.5vw,62px);margin:12px 0 8px}
.cinema-copy>.hero-sub{font-size:16px;line-height:1.6}
.cinema-actions{margin-top:14px}
@media(max-width:760px){.cinema-copy .hero-title,.cinema-active .cinema-copy .hero-title{font-size:38px}.cinema-copy>.hero-sub,.cinema-active .cinema-copy>.hero-sub{font-size:13px}}

/* Fill the opening viewport with the studio, including compact screens. */
.studio-scene{background:#080b10 url("/cinematic/studio-blue.webp") center/cover no-repeat}
.studio-scene img{mask-image:none}
@media(max-width:760px){.studio-scene img{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:add}}
@media(min-width:761px) and (max-width:1100px){.cinema-copy .hero-title{font-size:40px}.cinema-copy .beta-link{font-size:10px}.cinema-copy>.hero-sub{font-size:13px}.cinema-actions .button{min-height:40px;padding:8px 18px}.cinema-actions{margin-top:10px}}
@media(min-width:761px) and (max-height:800px){.cinema-copy .hero-title{font-size:40px;margin:8px 0 6px}.cinema-copy>.hero-sub{font-size:13px;line-height:1.5}.cinema-actions{margin-top:10px}.cinema-actions .button{min-height:40px;padding:8px 18px}}
@media(max-width:760px){.studio-scene{background:radial-gradient(ellipse at 100% 25%,#172b44 0,transparent 65%),linear-gradient(#101318,#080b10)}}

/* Preserve every edge of the original photograph at the opening frame. */
.studio-scene{background:radial-gradient(ellipse at 100% 25%,#172b44 0,transparent 65%),linear-gradient(#101318,#080b10)}
.studio-scene img{mask-image:none}
.cinema-copy{transform-origin:top center}

/* Full-width room with an undistorted central MacBook and aligned desk edge. */
.studio-scene{background-color:#0c1017;background-repeat:no-repeat}
.studio-scene img{mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}
@media(max-width:760px){.studio-scene img{mask-image:none}}
.studio-scene img{mask-image:linear-gradient(to right,transparent 24%,#000 30%,#000 70%,transparent 76%)}
@media(max-width:760px){.studio-scene img{mask-image:none}}

/* Mobile header and product framing — September 30. */
.cinema-actions .cinema-skip{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:13px 22px;border:1px solid #536b90;border-radius:8px;background:#111b29dd;color:#d6e4fa;font-size:14px;line-height:1.4;touch-action:manipulation}
.cinema-actions .cinema-skip:active{background:#23344b}
@media(hover:hover) and (pointer:fine){.cinema-actions .cinema-skip:hover{background:#1b2b42;border-color:#91b6ff}}
@media(max-width:760px){
 .site-header{height:72px}
 .header-inner{width:calc(100% - 32px);flex-wrap:nowrap;gap:12px}
 .site-header .brand{width:auto;gap:7px;justify-content:flex-start}
 .site-header .brand>img{width:26px;height:26px}
 .site-header .brand>span{font-size:17px;letter-spacing:.12em}
 .site-header .brand-descriptor{font-size:15px;gap:6px}
 .header-actions{width:auto;gap:0}
 .header-actions>.button,.header-actions>.login-link{display:none}
 .header-actions .icon-button{width:42px;height:42px;min-width:42px;touch-action:manipulation}
 .navigation{top:72px}
 html{scroll-padding-top:88px}
 .cinema-stage,.cinema-active .cinema-stage{top:72px;height:calc(100svh - 72px);min-height:568px}
 .cinema-active .cinema{height:250svh}
 .cinema-copy,.cinema-active .cinema-copy{top:22px;inset-inline:20px}
 .cinema-copy .hero-title,.cinema-active .cinema-copy .hero-title{font-size:40px;margin:16px auto 12px}
 .cinema-copy>.hero-sub,.cinema-active .cinema-copy>.hero-sub{font-size:14px;line-height:1.65}
 .cinema-actions,.cinema-active .cinema-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
 .cinema-actions .button,.cinema-actions .cinema-skip{min-height:52px;padding:10px 9px;font-size:12px;gap:10px;line-height:1.4}
 .cinema-controls{bottom:28px;inset-inline:20px;gap:10px}
 .cinema-position{margin-bottom:2px}
 .cinema-controls a,.cinema-controls button{min-height:40px;padding:8px 10px;touch-action:manipulation}
 .cinema-disclaimer{bottom:6px;font-size:8px}
 .cinema-caption{bottom:23%;right:7%;max-width:86%}
 .cinema-caption h2{font-size:28px}
 .studio-scene{background-image:none!important}
 .studio-scene img{mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent)}
}
@media(max-width:360px){.site-header .brand-descriptor{font-size:13px}.site-header .brand>span{font-size:15px}.site-header .brand{gap:5px}.cinema-copy .hero-title,.cinema-active .cinema-copy .hero-title{font-size:35px}.cinema-copy>.hero-sub,.cinema-active .cinema-copy>.hero-sub{font-size:13px}}
@media(max-width:760px) and (max-height:720px){.cinema-copy,.cinema-active .cinema-copy{top:14px}.cinema-copy .hero-title,.cinema-active .cinema-copy .hero-title{font-size:34px;margin:10px auto 8px}.cinema-actions,.cinema-active .cinema-actions{margin-top:12px}.cinema-copy>.hero-sub,.cinema-active .cinema-copy>.hero-sub{font-size:12px}}
/* Desktop: start the photo where measure() will put it (full stage height, centred), so the first paint matches the scripted layout and nothing shifts. */
@media(min-width:761px){.studio-scene img{top:0;left:50%;height:100%;width:auto;translate:-50% 0}}
@media(min-width:761px){.cinema-stage{container-type:size}.cinema-device{width:calc(100cqh*482/941);left:calc(50% + 100cqh/941);top:calc(100cqh*464.5/941)}}
/* Mobile geometry depends on the copy height, so the photo stays hidden until measure() has placed it (an element appearing is not a layout shift). */
.cinema-js .studio-scene img:not([style]),.cinema-js .cinema-device:not([style]){visibility:hidden}