/* A native-scrolling sequence. Each product has room to enter, settle and be read. */
html:has(.home-storypage){scroll-padding-top:104px}
.home-storypage .site-stage{overflow:clip}
.product-stories{position:relative;z-index:3;background:#080a0d;color:#edeef1;padding:0 clamp(22px,5vw,88px)}
.story-intro{max-width:1400px;margin:auto;min-height:72svh;padding:150px 0 90px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.story-eyebrow{font-size:11px;font-weight:450;letter-spacing:.13em;line-height:1.6;color:#a6abb5;margin:0 0 24px}
.story-intro h2{font-size:clamp(42px,5.8vw,84px);font-weight:450;line-height:1.22;letter-spacing:-.055em;margin:0 0 28px}
.story-intro-note{color:#a6abb5;font-size:16px;line-height:1.9;margin:0}
.story-index{display:flex;flex-wrap:wrap;gap:32px;margin-top:48px}
.story-index a{display:flex;gap:30px;align-items:center;min-height:44px;padding-bottom:8px;border-bottom:1px solid #525b68;font-size:13px;transition:border-color .3s}
.story-index span{font:10px ui-monospace,monospace;color:#929cab}
.story-index a:hover{border-color:#fff}
.product-story{position:relative;min-height:155svh;max-width:1400px;margin:0 auto;padding-bottom:18svh;scroll-margin-top:0}
.story-scene{position:sticky;top:112px;padding:18px 0 0}
.story-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;padding-bottom:28px}
.story-heading .story-eyebrow{margin-bottom:14px}
.story-heading h3{font-size:clamp(42px,5.8vw,86px);font-weight:450;line-height:1.02;letter-spacing:-.055em;text-wrap:initial;margin:0 0 20px}
.story-graph h3{font-size:clamp(38px,4.65vw,72px)}
.story-promise{font-size:clamp(18px,1.7vw,26px);font-weight:400;line-height:1.6;letter-spacing:-.025em;margin:0;color:#d4d7df}
.story-description{max-width:430px;justify-self:end}
.story-description>p{font-size:14px;line-height:1.9;color:#a6abb5;margin:0 0 12px}
.story-link{display:inline-flex;align-items:center;gap:20px;font-size:13px;min-height:40px;color:#e3e7ef}
.story-link span,.story-end span{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.story-link:hover span,.story-end a:hover span{transform:translate(3px,-3px)}
.story-figure{margin:0}
.story-frame{height:clamp(240px,46svh,650px);display:flex;justify-content:center;align-items:center;border:1px solid #dce6fa1a;border-radius:12px;background:radial-gradient(ellipse at 50% 105%,#253449 0%,#0e131b 65%);padding:16px;overflow:hidden;transform:translateY(var(--frame-rise,0px)) scale(var(--frame-scale,1));transform-origin:50% 35%;box-shadow:0 24px 65px #0003}
.story-frame>img{display:block;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px;box-shadow:0 8px 30px #0004}
.story-figure figcaption{display:flex;align-items:center;justify-content:space-between;gap:24px;color:#939ba8;font-size:11px;line-height:1.6;letter-spacing:.025em;margin-top:20px}
.story-alfred .story-frame{background:radial-gradient(ellipse at 50% 100%,#153a30 0%,#0b1413 75%);border-color:#b9e8d218}
.story-phones{gap:clamp(20px,4vw,65px);padding:24px 20px 0;align-items:flex-start}
.story-phones>img{height:calc(100% - 14px);width:auto;max-width:29%;object-fit:contain;border:3px solid #3c4945;border-radius:20px;background:#152722;box-shadow:0 15px 35px #0006}
.story-phones>.story-phone-side{transform:translateY(calc(20px + var(--frame-rise,0px) * .5));height:calc(100% - 38px)}
.story-graph .story-frame{background:radial-gradient(ellipse at 50% 105%,#283340 0%,#10141a 65%)}
.story-end{max-width:1400px;margin:0 auto;padding:0 0 100px;display:flex;justify-content:space-between;gap:30px}
.story-end a{font-size:14px;border-bottom:1px solid #444c58;padding:16px 0;display:flex;align-items:center;gap:32px;min-height:48px}
.home-storypage .site-footer{position:relative;z-index:3;border-top:1px solid #ffffff15;padding-block:32px}
/* One-time text reveals, continuous screenshot expansion. No scroll interception. */
[data-enter]{opacity:1;transform:none;transition:opacity 1s ease,transform 1.15s cubic-bezier(.16,1,.3,1)}
[data-enter].enter-pending{opacity:0;transform:translate3d(0,44px,0)}
.story-heading h3[data-enter]{transition-delay:70ms}
.story-promise[data-enter]{transition-delay:130ms}
.story-description[data-enter]{transition-delay:170ms}
.story-figure[data-enter]{transition-duration:1.2s,1.35s;transition-delay:80ms}
@media(min-width:1600px){.story-description>p{font-size:16px}.story-heading{padding-bottom:36px}}
@media(max-width:900px),(max-height:680px){
 .product-story{min-height:0;padding:65px 0 120px}
 .story-scene{position:relative;top:auto;padding:0}
 .story-heading{gap:30px}
 .story-frame{height:auto;min-height:250px;aspect-ratio:1.75}
 .story-frame>img{max-height:100%;height:100%;object-fit:contain}
 .story-phones{height:360px;aspect-ratio:auto}
 .story-phones>img{height:calc(100% - 14px)}
 .story-phones>.story-phone-side{height:calc(100% - 38px)}
}
@media(max-width:640px){
 .story-intro{min-height:65svh;padding:95px 0 65px}
 .story-intro h2{font-size:44px;letter-spacing:-.045em}
 .story-intro-note{font-size:14px;max-width:260px}
 .story-index{gap:14px 24px;margin-top:30px}
 .story-index a{font-size:11px;gap:12px}
 .story-heading{display:block;padding-bottom:28px}
 .story-heading h3{font-size:51px;margin-bottom:16px}
 .story-graph h3{font-size:clamp(34px,9vw,51px);letter-spacing:-.05em}
 .story-promise{font-size:20px;line-height:1.55}
 .story-description{margin-top:24px}
 .story-description>p{font-size:14px;line-height:1.9}
 .story-eyebrow{font-size:10px}
 .product-story{padding:50px 0 105px;scroll-margin-top:0}
 .story-frame{padding:8px;aspect-ratio:1.35;min-height:0;border-radius:7px}
 .story-figure figcaption{font-size:10px;align-items:flex-start;gap:12px;margin-top:17px}
 .story-figure figcaption span:last-child{max-width:60%;text-align:right}
 .story-phones{height:340px;aspect-ratio:auto;padding:20px 12px 0;gap:14px;position:relative}
 .story-phones>img{max-width:none;border-width:2px;border-radius:17px;flex:none}
 .story-phones>.story-phone-main{position:relative;z-index:1;height:calc(100% - 12px)}
 .story-phones>.story-phone-side{height:calc(100% - 52px);position:absolute;left:-20px;transform:translateY(26px) rotate(-7deg);opacity:.75}
 .story-phones>.story-phone-side:last-child{left:auto;right:-20px;transform:translateY(26px) rotate(7deg)}
 .story-end{padding-bottom:65px;gap:20px}
 .story-end a{font-size:12px;gap:15px}
 [data-enter].enter-pending{transform:translate3d(0,28px,0)}
}
@media(prefers-reduced-motion:reduce){
 [data-enter],[data-enter].enter-pending{opacity:1;transform:none;transition:none}
 .story-frame,.story-phones>.story-phone-side{transform:none}
 .product-story{min-height:0;padding-bottom:110px}
 .story-scene{position:relative;top:auto}
}
/* Scroll choreography is independent of navigation transitions on older detail pages. */
@view-transition{navigation:none}