/* Ghost · Scroll study 01. Static content is the default; motion is progressive. */
:root{--bg:#080c09;--lime:#c2ff54;--white:#f4f6ef;--muted:#a3afa5;--line:#ffffff16;--header:68px;--preview:0px;--chrome:calc(var(--header) + var(--preview));color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--chrome) + 24px)}body{margin:0;background:var(--bg);color:var(--white);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}h1,h2,h3,p{margin:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:5px}::selection{background:var(--lime);color:var(--bg)}.skip{position:fixed;top:-120px;left:20px;z-index:30;padding:16px;background:var(--lime);color:var(--bg)}.skip:focus{top:12px}.preview-bar{position:sticky;top:0;z-index:21;min-height:var(--preview);padding:0 5%;display:flex;justify-content:space-between;align-items:center;background:#1b251b;color:#bfccb7;font-size:9px;letter-spacing:.07em}.preview-bar>span{display:flex;align-items:center;gap:8px}.preview-bar i{width:5px;height:5px;border-radius:50%;background:var(--lime)}.preview-bar a{letter-spacing:0;padding:6px 0}.preview-bar a:hover{color:white}.site-header{position:sticky;top:var(--preview);z-index:20;height:var(--header);padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#080c09ed;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;font-size:29px;letter-spacing:-1.5px;font-weight:750}.brand>span{color:var(--lime);margin-left:-8px}.brand img{border-radius:9px;margin-right:1px}.site-header nav{display:flex;align-items:center;gap:24px}.language{font-size:11px;letter-spacing:.08em;color:#c3cbbf;padding:12px 0}.button{display:inline-flex;align-items:center;justify-content:center;gap:35px;background:var(--lime);color:#121a08;border-radius:99px;padding:17px 25px;font-size:14px;font-weight:650;transition:background .2s}.button:hover{background:#d6ff92}.button.small{padding:10px 18px;gap:22px;font-size:12px;min-height:38px}.motion-toggle{display:none;align-items:center;gap:8px;border:1px solid #ffffff25;border-radius:50px;padding:9px 12px;color:var(--muted);background:transparent;font-size:10px;min-height:34px}.js-ready .motion-toggle{display:flex}.motion-toggle:hover{color:var(--white);border-color:#ffffff60}.journey-progress{position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--lime);transform-origin:left;transform:scaleX(0)}
.eyebrow{font-size:10px;line-height:1.6;letter-spacing:.18em;font-weight:650;color:var(--lime)}h1,h2{font-weight:650;letter-spacing:-.065em;line-height:1.02;text-wrap:balance}h1 span,h2 span{color:var(--lime)}h1{font-size:clamp(64px,7.7vw,118px)}h2{font-size:clamp(52px,6.3vw,90px)}.scene h1,.scene h2{margin:24px 0}.description{max-width:380px;font-size:17px;line-height:1.6;color:var(--muted);letter-spacing:-.015em;text-wrap:pretty}.annotation{font-size:11px;color:#8d9b8e;margin-top:24px;line-height:1.6}.hero-cta{margin-top:28px}.scene-0 .annotation{margin-top:16px}.scene:focus,#details:focus{outline:none}.scene{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;max-width:1240px;padding:80px 5%;margin:auto}.static-device{justify-self:center}.device{position:relative;flex:none;filter:drop-shadow(12px 25px 24px #0007)}.iphone{width:320px;height:640px}.watch{width:340px;height:510px}.hardware{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none}.screen{position:absolute;overflow:hidden;background:#080c09}.screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}.iphone .screen{left:13%;top:7.85%;width:74%;height:84.3%;border-radius:13% / 6%}/* Real Watch screenshot: 374 × 446. Keep its aspect ratio and full status bar. */
.watch .screen{left:18%;top:22.7%;width:63%;height:47.4%;border-radius:15% / 13%;background:#060b08}
.watch .screen>img{object-fit:contain;object-position:center}.device-space,.atmosphere,.track,.scroll-cue,.gap-echo,.stage-bottom{display:none}.stage{position:relative}.island{position:absolute;left:36%;top:1.35%;width:28%;height:3.5%;border-radius:40px;background:#020302}.island:after{content:"";position:absolute;right:8%;top:28%;width:9%;aspect-ratio:1;border-radius:100%;background:radial-gradient(circle,#284667,#060b10 60%)}.reflection{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 20%,#ffffff08 35%,transparent 52%)}
.motion-enabled .story{height:450svh;position:relative}.motion-enabled .stage{position:sticky;top:var(--chrome);height:calc(100svh - var(--chrome));isolation:isolate;overflow:clip}.motion-enabled .scene{position:absolute;left:max(7%,calc(50% - 610px));top:45%;width:46%;padding:0;margin:0;display:block;transform:translateY(-50%);z-index:3;will-change:opacity,transform}.motion-enabled .scene:not(.scene-0){opacity:0;visibility:hidden}.motion-enabled .scene h1{font-size:clamp(60px,7.1vw,111px)}.motion-enabled .scene h2{font-size:clamp(52px,6.2vw,94px)}.motion-enabled .static-device{display:none}.motion-enabled .device-space{display:block;position:absolute;inset:0;perspective:1400px;z-index:2;pointer-events:none}.moving-phone{position:absolute;left:calc(50% - 160px);top:calc(50% - 320px);will-change:transform,opacity}.moving-watch{position:absolute;left:calc(50% - 170px);top:calc(50% - 255px);will-change:transform,opacity}.phone-shot{opacity:0}.phone-shot.shot-0{opacity:1}.motion-enabled .atmosphere{display:block;position:absolute;left:34%;top:0;width:70%;height:100%;background:radial-gradient(ellipse at center,#7faa3620,transparent 65%);z-index:0;pointer-events:none}.motion-enabled .track{display:block;position:absolute;left:23%;top:83%;width:100%;height:90%;border:1px solid #a4c96420;border-radius:45%;transform:perspective(600px) rotateX(65deg) rotateZ(-15deg);pointer-events:none;z-index:0}.track i{position:absolute;inset:12%;border:1px solid #a4c96416;border-radius:45%}.track i:nth-child(2){inset:25%}.track i:nth-child(3){inset:38%}.motion-enabled .gap-echo{display:block;position:absolute;left:48%;top:10%;font-size:clamp(240px,33vw,530px);font-weight:650;line-height:1;letter-spacing:-.09em;color:#c2ff54;opacity:0;z-index:0;pointer-events:none}.gap-echo span{font-size:.35em;margin-left:.07em}.motion-enabled .scroll-cue{display:flex;align-items:center;gap:13px;position:absolute;left:7%;bottom:94px;font-size:10px;color:#b2bea9;letter-spacing:.03em;z-index:4}.scroll-cue>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #b2bea944;border-radius:50%}.motion-enabled .stage-bottom{position:absolute;left:5%;right:5%;bottom:22px;display:flex;align-items:center;justify-content:space-between;z-index:5}.chapters{display:flex;gap:8px}.chapters a{display:flex;gap:9px;align-items:center;font-size:11px;border:1px solid transparent;border-radius:40px;padding:12px 17px;color:#98a390;min-height:42px;white-space:nowrap}.chapters a[aria-current="step"]{border-color:#c2ff5440;background:#c2ff540a;color:var(--lime)}.chapter-num{font-size:9px;opacity:.6}.next-chapter{font-size:11px;color:#a9b5a1;padding:14px 0}.next-chapter:hover{color:var(--lime)}
.content{max-width:1140px;margin:auto}.voice-section{padding:125px 7%;border-block:1px solid var(--line);background:#0c130e}.voice-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}.voice-section h2{font-size:clamp(44px,4.9vw,72px);margin:24px 0}.voice-section h2 span{color:#95a78d}.section-copy{color:var(--muted);font-size:17px;line-height:1.7;max-width:440px}.voice-visual{text-align:center}.wave{height:150px;display:flex;align-items:center;justify-content:center;gap:5px;transform-origin:center;will-change:transform}.wave i{display:block;flex:1;max-width:4px;height:var(--bar);border-radius:6px;background:var(--lime);opacity:.85}.wave i:nth-child(3n){background:#8da36d;opacity:.6}.voice-visual blockquote{margin:25px 0 14px;font-size:28px;letter-spacing:-.04em;line-height:1.25;font-weight:550}.caption{font-size:11px;line-height:1.5;color:#909e89}.voice-range{font-size:12px;color:#b1bba9;margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}
.details{background:#eef1e9;color:#192017;padding:115px 7% 105px}.details .eyebrow{color:#576d3f}.details h2{font-size:clamp(46px,5.4vw,78px);margin:25px 0}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:70px}.detail-grid article{border-top:1px solid #b9c2b0;padding-top:22px}.detail-number{color:#75836b;font-size:10px}.detail-grid h3{font-size:24px;line-height:1.2;letter-spacing:-.04em;margin:24px 0 15px;max-width:270px;font-weight:650}.detail-grid p{font-size:14px;line-height:1.8;color:#5f6b55;max-width:310px}.closing{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:105px 24px 100px}.closing>img{border-radius:20px;display:block;margin:0 auto 30px}.closing h2{font-size:clamp(60px,8vw,114px);margin:26px 0 36px}.closing .caption{margin-top:19px}.closing-lines{position:absolute;z-index:-1;width:820px;height:820px;left:calc(50% - 410px);top:30px;border:1px solid #c2ff540b;border-radius:50%;box-shadow:0 0 0 90px #c2ff5403,0 0 0 180px #c2ff5402}.footer{padding:35px 5%;display:grid;grid-template-columns:1fr auto;gap:23px;border-top:1px solid var(--line);font-size:11px;color:#909c86}.footer .brand{color:var(--white)}.footer nav{display:flex;gap:24px;align-items:center}.footer p{line-height:1.6}.footer p:last-child{text-align:right}.footer a:hover{color:var(--lime)}
@media(min-width:1600px){.motion-enabled .scene{width:570px}}
@media(max-width:1000px) and (min-width:761px){.motion-enabled .scene{left:5%;width:47%}.motion-enabled .scene h1{font-size:68px}.motion-enabled .scene h2{font-size:61px}.description{font-size:16px;max-width:320px}.voice-grid{gap:50px}}
@media(max-height:760px) and (min-width:761px){.motion-enabled .scene{top:43%}.motion-enabled .scene h1{font-size:clamp(55px,6.5vw,90px)}.motion-enabled .scene h2{font-size:clamp(50px,5.7vw,79px)}.scene h1,.scene h2{margin:18px 0}.description{font-size:15px;max-width:365px}.hero-cta{margin-top:21px;padding:14px 22px}.annotation{margin-top:18px}.motion-enabled .scroll-cue{bottom:78px}.motion-enabled .stage-bottom{bottom:15px}}
@media(max-width:760px){:root{--header:60px;--preview:0px}.preview-bar{padding:0 5%;font-size:7px;letter-spacing:.025em}.preview-bar a{font-size:9px}.site-header nav{gap:15px}.brand{font-size:25px}.brand img{width:27px;height:27px}.site-header .motion-toggle{width:32px;height:32px;padding:0;justify-content:center}.motion-label{display:none}.button.small{padding:10px 13px;font-size:11px;gap:12px}.eyebrow{font-size:9px}.scene{display:flex;flex-direction:column;gap:24px;padding:60px 7%;text-align:left;align-items:stretch}.scene h1,.scene h2{font-size:clamp(46px,10.5vw,75px);margin:20px 0}.description{font-size:15px;line-height:1.55}.static-device{align-self:center}.static-device.iphone{width:260px;height:520px}.static-device.watch{width:280px;height:420px}.motion-enabled .story{height:430svh}.motion-enabled .scene{left:6%;top:4%;width:88%;text-align:center;transform:none}.motion-enabled .scene h1{font-size:clamp(44px,11.7vw,72px);margin:14px 0}.motion-enabled .scene h2{font-size:clamp(41px,10.8vw,68px);margin:13px 0}.motion-enabled .description{font-size:13px;line-height:1.5;max-width:330px;margin:auto}.motion-enabled .hero-cta{display:none}.motion-enabled .annotation{font-size:9px;margin-top:14px}.motion-enabled .scene-0 .annotation{margin-top:13px}.motion-enabled .scroll-cue{bottom:68px;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap}.scroll-cue>span{width:23px;height:23px}.motion-enabled .stage-bottom{left:4%;right:4%;bottom:11px}.chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:100%}.chapters a{justify-content:center;padding:9px 4px;font-size:10px;min-height:38px}.chapter-num{display:none}.next-chapter{display:none}.motion-enabled .gap-echo{left:6%;top:42%;font-size:78vw}.motion-enabled .atmosphere{left:0;top:18%;width:100%;height:85%}.motion-enabled .track{left:-35%;top:85%;width:180%}.voice-section{padding:75px 7%}.voice-grid{grid-template-columns:1fr;gap:45px}.voice-section h2{font-size:clamp(43px,10vw,64px)}.section-copy{font-size:15px}.wave{height:125px;max-width:340px;margin:auto;gap:4px}.voice-visual blockquote{font-size:27px}.voice-range{margin-top:25px;padding-top:22px}.details{padding:75px 7%}.details h2{font-size:clamp(42px,10vw,62px)}.detail-grid{grid-template-columns:1fr;margin-top:45px;gap:32px}.detail-grid article{display:grid;grid-template-columns:28px 1fr}.detail-number{padding-top:5px}.detail-grid h3{margin:0 0 12px;max-width:none;font-size:23px}.detail-grid p{grid-column:2;max-width:none}.closing{padding:80px 20px}.closing h2{font-size:clamp(51px,11.5vw,80px)}.footer{padding:30px 7%;gap:23px}.footer nav{gap:16px}.footer p{grid-column:1/-1}.footer p:last-child{text-align:left}}
@media(max-width:760px) and (max-height:710px){.motion-enabled .scene{top:3%}.motion-enabled .scene h1{font-size:43px;margin:10px 0}.motion-enabled .scene h2{font-size:40px;margin:10px 0}.motion-enabled .description{font-size:12px;max-width:310px}.motion-enabled .annotation{margin-top:9px}.motion-enabled .scene-0 .annotation{display:none}.motion-enabled .scroll-cue{bottom:57px}}
html.reduced-view{scroll-behavior:auto}.reduced-view .device,.reduced-view .wave{will-change:auto}.reduced-view .journey-progress{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.preview-bar,.site-header,.stage-bottom,.scroll-cue,.device-space{display:none!important}.story,.stage{height:auto!important;position:static!important;overflow:visible!important}.scene{display:grid!important;position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;width:auto!important;break-inside:avoid}.static-device{display:block!important}.voice-section,.details,.closing{break-inside:avoid}}
@media(max-height:580px) and (min-width:761px){.scene{padding:40px 5%;align-items:start}.scene-text{padding-top:30px}.scene h1{font-size:54px}.scene h2{font-size:49px}.static-device.iphone{width:240px;height:480px}.static-device.watch{width:280px;height:420px}}
.motion-toggle:disabled{cursor:default;opacity:.6}
