:root{color-scheme:light;--paper:#F5F1E8;--ink:#292825;--muted:#726D64}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}header{position:absolute;top:0;left:6%;right:6%;height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #29282520;font-size:14px;z-index:10}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-size:25px;font-weight:750;letter-spacing:.06em}.hero{min-height:100svh;display:grid;place-items:center;padding:160px 24px 110px;text-align:center}.hero-copy{will-change:transform,opacity}.eyebrow{font-size:12px;font-weight:650;letter-spacing:.18em;margin:0 0 25px}h1{font-size:clamp(62px,10.5vw,156px);letter-spacing:-.065em;line-height:1.02;font-weight:600;margin:0 0 32px}.subtitle{font-size:clamp(25px,3.3vw,44px);font-weight:550;letter-spacing:-.035em;margin:0 0 24px}.intro,.story-copy>p:last-child{font-size:19px;line-height:1.6;color:var(--muted)}.scroll-cue{display:inline-flex;flex-direction:column;gap:12px;margin-top:45px;color:var(--muted);font-size:14px;text-decoration:none}.scroll-cue span{font-size:23px}.story{height:160vh;min-height:1000px;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:700px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:8%;max-width:1150px;padding:60px 55px;margin:auto;overflow:hidden}.story-copy h2,.ending h2{font-size:clamp(42px,5.6vw,80px);line-height:1.05;letter-spacing:-.055em;margin:0 0 26px;font-weight:600}.story-copy,.screen{will-change:transform,opacity}.screen{margin:0;justify-self:center;max-width:310px;width:100%;perspective:1000px}.screen img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 35px 80px #29282525,0 0 0 1px #29282515}.screen figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:24px}.second{background:#e7eceb}.second .stage{grid-template-columns:.9fr 1.1fr}.second .story-copy{grid-column:2;grid-row:1}.second .screen{grid-column:1;grid-row:1}.ending{min-height:90svh;text-align:center;display:grid;place-items:center;padding:110px 24px}.end-copy>img{margin-bottom:35px}.ending h2{font-size:clamp(64px,9vw,128px)}.ending p{font-size:18px;color:var(--muted);margin-top:35px}.ending strong{color:var(--ink);font-weight:500}footer{padding:32px 6%;border-top:1px solid #29282520;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}a:focus-visible{outline:2px solid currentColor;outline-offset:6px}@media(max-width:700px){header{height:78px}.hero{padding-top:125px}.intro{font-size:16px}.story{height:150svh;min-height:1000px}.stage,.second .stage{min-height:740px;height:100svh;grid-template-columns:1fr;gap:25px;padding:45px 24px 40px;text-align:center;align-content:center}.story-copy h2{font-size:40px;margin-bottom:15px}.story-copy .eyebrow{margin-bottom:15px}.story-copy>p:last-child{font-size:16px;line-height:1.4;margin:0}.screen{width:min(210px,48vw)}.screen figcaption{margin-top:16px}.second .story-copy,.second .screen{grid-column:auto;grid-row:auto}.ending{min-height:75svh}footer{flex-wrap:wrap;font-size:12px}footer span:nth-child(2){order:3;width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story{height:auto;min-height:0}.stage{position:relative}.hero-copy,.story-copy,.screen,.end-copy{transform:none!important;opacity:1!important}}@media(max-height:740px) and (min-width:701px){.screen{max-width:245px}.stage{min-height:620px}} 

.hero .intro{font-size:clamp(20px,2.5vw,32px);line-height:1.4;letter-spacing:-.025em;max-width:740px;margin:0 auto;color:var(--muted)}
/* Transparent device artwork; hover remains independent of scroll movement. */
.screen{max-width:370px;width:100%}
.screen img{border-radius:0;box-shadow:none;filter:drop-shadow(0 30px 20px #29282526);transition:transform .7s cubic-bezier(.2,.75,.25,1),filter .7s ease;transform-origin:center 65%}
.second .screen{max-width:480px;width:120%}
@media(hover:hover) and (pointer:fine){.screen:hover img{transform:translateY(-14px) rotate(-1deg);filter:drop-shadow(0 44px 27px #29282530)}.second .screen:hover img{transform:translateY(-14px) rotate(1deg)}}
@media(max-width:700px){.screen{width:min(260px,62vw)}.second .screen{width:min(330px,79vw)}.screen figcaption{margin-top:10px}}
@media(max-height:740px) and (min-width:701px){.screen{max-width:290px}.second .screen{max-width:385px}}
@media(prefers-reduced-motion:reduce){.screen img{transition:none}.screen:hover img,.second .screen:hover img{transform:none}}
@media(max-width:700px){.second .screen{width:min(300px,75vw)}}
.device-art{filter:drop-shadow(0 28px 19px #2928252b);transition:transform .7s cubic-bezier(.2,.75,.25,1),filter .7s ease}
.phone-art{transform:rotate(-4deg)}
.ipad-art{transform:rotate(-18deg)}
.screen .device-art img{filter:none;transition:none;transform:none}
.ipad-art img{clip-path:polygon(6.1% 7.3%,6.2% 5.7%,6.8% 4.4%,8% 3.3%,9.6% 2.6%,11.4% 2.35%,13% 2.35%,76.8% 10.6%,80.7% 11.6%,83.1% 13%,84.5% 15%,85.3% 18%,97.1% 89.5%,97.3% 91.1%,96.7% 92.7%,95.5% 94%,93.5% 95%,91.2% 95.5%,21% 97%,18.2% 96.8%,15.8% 96%,13.9% 94.7%,12.8% 92.8%,12.3% 90.8%)}
@media(hover:hover) and (pointer:fine){.screen:hover .phone-art{transform:translateY(-14px) rotate(-5deg);filter:drop-shadow(0 42px 25px #29282533)}.screen:hover .ipad-art{transform:translateY(-14px) rotate(-16deg);filter:drop-shadow(0 42px 25px #29282533)}.screen:hover .device-art img{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.device-art{transition:none}.screen:hover .phone-art{transform:rotate(-4deg)}.screen:hover .ipad-art{transform:rotate(-18deg)}}
/* Reserve room for rotated devices and their shadows. */
.stage{overflow:visible}
.second .screen{width:100%;max-width:380px}
@media(min-width:701px){.second .stage{grid-template-columns:1fr 1.1fr;gap:10%;padding-left:85px;padding-right:55px}.second .screen{max-width:min(380px,49svh)}}
@media(max-width:700px){.second .screen{width:min(270px,64vw)}}
@media(max-height:740px) and (min-width:701px){.second .screen{max-width:300px}}

footer{align-items:center}.maker-credit{display:inline-flex;align-items:center;gap:12px;color:var(--muted);text-decoration:none;font-size:14px;padding:6px 0}.maker-credit img{display:block;width:150px;height:auto}.maker-credit:hover{color:var(--ink)}.maker-credit:hover>span{text-decoration:underline;text-underline-offset:4px}@media(max-width:700px){.maker-credit{margin-left:auto;gap:9px}.maker-credit img{width:130px}}

footer{position:relative;z-index:2}.maker-credit{position:relative;z-index:3;cursor:pointer;min-height:44px}.maker-credit>*{pointer-events:none}
.phone-art img{-webkit-mask-image:url('phone-cutout.png');mask-image:url('phone-cutout.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}