@font-face{font-family:'Work Sans Variable';src:url(assets/work-sans.woff2);font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{background:#07080a;color:#f4f3ef;color-scheme:dark;font-family:'Work Sans Variable',sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0}
main{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;--edge:clamp(24px,4.4vw,72px)}
canvas{position:absolute;inset:0;width:100%;height:100%;--focus:#78a9f7;--surface-control-strong:#28384f;z-index:-2}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,#07080acc,transparent 24%,transparent 68%,#07080a 100%),linear-gradient(90deg,#07080af5 0%,#07080ad9 28%,#07080a33 60%,transparent 80%)}
footer{position:absolute;left:var(--edge);right:var(--edge);display:flex;align-items:center;z-index:2}






footer{bottom:22px;border-top:1px solid #899cb12e;padding-top:12px;gap:32px;font-size:12px;line-height:1.4;color:#acbad0}
.copyright{margin-right:auto}
nav,.playback{display:flex;align-items:center;gap:24px}
a{color:inherit;text-decoration:none}
a:hover,button:hover{color:#e2edff}
button{font:inherit;background:none;color:inherit;border:0;padding:10px 0;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:9px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
a:focus-visible,button:focus-visible{outline:2px solid #a9c8fa;outline-offset:6px}
::selection{background:#233d66;color:#fff}
.teaser-copy{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(135px,18vh,190px);pointer-events:none;opacity:0;transform:translateY(20px);filter:blur(5px);transition:opacity 1.6s ease,transform 1.6s cubic-bezier(.16,1,.3,1),filter 1.6s ease}
h1{font-size:clamp(58px,7.4vw,96px);font-weight:480;letter-spacing:-.04em;line-height:.98;margin:0}
h1 span{display:block}
h1 span:last-child{color:#a9c8fa}
.teaser-copy p{font-size:14px;letter-spacing:-.01em;color:#afbed3;margin:26px 0 0;opacity:0;transition:opacity 1.5s ease}
body[data-phase=accumulate] .teaser-copy,body[data-phase=complete] .teaser-copy{opacity:1;transform:none;filter:none}
body[data-phase=complete] .teaser-copy p{opacity:1}
body[data-phase=complete] #pause{display:none}
.skip{position:absolute;top:-100px;left:24px;z-index:5}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){


  .teaser-copy{bottom:168px}h1{font-size:clamp(58px,16vw,80px)}.teaser-copy p{font-size:13px;margin-top:22px}
  footer{bottom:18px;gap:0;flex-wrap:wrap;font-size:11px;padding-top:10px;row-gap:4px}
  .copyright{flex-basis:100%;margin-right:0}nav{gap:22px}.playback{margin-left:auto;gap:18px}
  .vignette{background:linear-gradient(180deg,#07080ad9,transparent 23%,transparent 38%,#07080acc 63%,#07080ae8 78%,#07080a 100%)}
}
@media(max-height:520px) and (min-width:601px){.teaser-copy{bottom:100px}h1{font-size:52px}.teaser-copy p{margin-top:16px}footer{bottom:12px}}
@media(prefers-reduced-motion:reduce){.teaser-copy,.teaser-copy p{transition:none;transform:none;filter:none}}
/* The availability line belongs to the reveal, keeping the upper edge quiet. */


.teaser-copy{bottom:clamp(150px,22vh,220px)}
h1{font-size:clamp(54px,6.5vw,88px);font-weight:460;line-height:1.02}
footer{display:grid;grid-template-columns:1fr auto 1fr}
.copyright{grid-column:2;grid-row:1;text-align:center;margin:0}
footer nav{grid-column:1;grid-row:1}
.playback{grid-column:3;grid-row:1;justify-self:end}
@media(max-width:600px){
 .teaser-copy{bottom:185px}h1{font-size:clamp(48px,13vw,68px)}
 footer{grid-template-columns:1fr 1fr;row-gap:12px}
 .copyright{grid-column:1 / -1;grid-row:2;font-size:11px;color:#9aacc5}
 footer nav{grid-row:1}.playback{grid-column:2;grid-row:1}
}
@media(max-height:520px) and (min-width:601px){.teaser-copy{bottom:100px}h1{font-size:48px}}

.fallback-mark{display:none;position:absolute;right:8%;top:12%;width:min(40vw,420px);z-index:-2}
body[data-fallback=true] .fallback-mark{display:block}
@media(max-width:600px){.fallback-mark{width:80%;right:10%;top:10%}}

.logo-reveal{position:absolute;width:48%;height:auto;left:70%;top:40%;transform:translate(-50%,-50%);opacity:0;z-index:-2;pointer-events:none}
@media(max-width:600px){.logo-reveal{width:84%;left:50%;top:30%}}

/* Quiet, aligned supporting copy beneath the statement. */
.release-note{margin-top:30px}
.teaser-copy .release-note p{margin:0;line-height:1.45}
.teaser-copy .release-note .promise{font-size:17px;font-weight:450;letter-spacing:-.015em;color:#d5dfef}
.teaser-copy .release-note .availability{margin-top:8px;font-size:12px;font-weight:400;letter-spacing:.025em;color:#a8bad3}
@media(max-width:600px){.release-note{margin-top:26px}.teaser-copy .release-note .promise{font-size:15px}.teaser-copy .release-note .availability{margin-top:7px}}
@media(max-height:520px) and (min-width:601px){.release-note{margin-top:20px}}

.teaser-copy .release-note .availability{display:inline-flex;align-items:center;gap:8px}
.iphone-icon{display:block;flex:none}