/* Shared base for all variants (kept tiny on purpose) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html.lb-open{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* reveal */
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-rv].in{opacity:1;transform:none}
[data-rv="2"]{transition-delay:.08s}[data-rv="3"]{transition-delay:.16s}[data-rv="4"]{transition-delay:.24s}

/* ================= DEVICES (frames from the Figma community mockups) ================= */
/* iPhone 15 Pro frame (straight view of the "iPhone 15 Pro 3D Mockups" pack, baked with the screen cut out:
   assets/mock/iphone15-frame.webp). <img data-phone src> is wrapped by common.js into .ph > .ph-s.
   Screens are fitted to the 15 Pro ratio (746 x 1618) by _notes/tools/make_mock15.py; longer ones scroll on hover. */
.ph{width:var(--pw,240px);max-width:100%;flex:none;position:relative;isolation:isolate;aspect-ratio:823/1677}
.ph-s{position:absolute;left:4.617%;top:1.908%;width:90.644%;height:96.482%;overflow:hidden;border-radius:14.745%/6.8%;background:#000}
.ph-s img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none}
.ph::after{content:"";position:absolute;inset:0;background:url(mock/iphone15-frame.webp) center/100% 100% no-repeat;pointer-events:none;z-index:2}
.ph::before{content:"";position:absolute;left:7%;right:7%;bottom:1.5%;top:8%;border-radius:22%/10%;box-shadow:0 40px 60px -30px rgba(12,12,24,.5),0 10px 22px -14px rgba(12,12,24,.35);z-index:-1}

/* MacBook Air M4 frame: <img data-laptop src> (data-laptop="dark" = Midnight). Frame and screen rectangle: _notes/tools/make_mba.py */
.lp{position:relative;width:var(--lw,100%);max-width:100%;margin-inline:auto;aspect-ratio:2048/1241;isolation:isolate}
.lp::after{content:"";position:absolute;inset:0;background:url(devices/macbook-air-m4.webp) center/100% 100% no-repeat;pointer-events:none;z-index:2}
.lp.dark::after{background-image:url(devices/macbook-air-m4-dark.webp)}
.lp::before{content:"";position:absolute;left:5%;right:5%;bottom:0;height:6%;border-radius:50%;box-shadow:0 24px 38px -16px rgba(12,12,24,.45);z-index:-1}
.lp-s{position:absolute;left:10.1313%;top:2.8227%;width:79.8247%;height:85.6261%;overflow:hidden;background:#fff}
.lp-s img{display:block;width:100%;height:auto;max-width:none}

/* Browser window: <img data-browser="url" src> */
.bw{position:relative;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 24px 50px -30px rgba(12,12,24,.35)}
.bw-bar{display:block;line-height:0}
.bw-bar svg{display:block;width:100%;height:auto}
.bw-bar.plain{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f2f2f3;border-bottom:1px solid #e5e5e8;line-height:normal}
.bw-bar.plain i{width:9px;height:9px;border-radius:50%;background:#d6d6da}
.bw-bar.plain span{margin-left:12px;flex:1;max-width:320px;height:18px;border-radius:5px;background:#fff;font:11px/18px system-ui,sans-serif;color:#9a9aa0;padding:0 9px;white-space:nowrap;overflow:hidden}
.bw-s{position:relative;max-height:var(--bh,min(62vh,560px));overflow:hidden}
.bw-s img{display:block;width:100%;height:auto;max-width:none}

/* hover-scroll for screens taller than their frame */
.ph-s img,.lp-s img,.bw-s img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.scrolling img{transform:translateY(var(--dy,0));transition:transform var(--t,5s) cubic-bezier(.42,0,.38,1)}
/* the status bar stays where it is while the screen scrolls under it */
.ph-pin{position:absolute;left:0;top:0;z-index:1;width:100%;aspect-ratio:390/47;background:no-repeat center top/100% auto;pointer-events:none}
/* screens that scroll carry a small hint (added by common.js): a mouse with a moving wheel and "Hover to scroll".
   Bright yellow, a colour none of the products uses, so it stands out on any screen, and it pulses gently.
   It fades away while the pointer is on the device, so it never covers what is being read. */
.hs-hint{position:absolute;left:50%;bottom:clamp(8px,5%,16px);z-index:3;display:none;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:#ffd60a;color:#16161a;font:700 11px/1 "Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;text-transform:none;white-space:nowrap;pointer-events:none;translate:-50% 0;box-shadow:0 0 0 1.5px #16161a,0 8px 18px -6px rgba(0,0,0,.6);transition:opacity .35s,translate .35s}
.hs > .hs-hint{display:inline-flex}
.hs-hint::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1}
.hs-hint i{position:relative;flex:none;width:11px;height:16px;border:1.5px solid currentColor;border-radius:6px}
.hs-hint i::after{content:"";position:absolute;left:50%;top:2.5px;width:2px;height:4px;margin-left:-1px;border-radius:2px;background:currentColor}
.hs-hint b{font-weight:700}
.hs-sm > .hs-hint{padding:7px 9px}
.hs-sm > .hs-hint b{display:none}
.scrolling > .hs-hint{opacity:0;translate:-50% 6px}
@media (hover:hover){.hs:hover > .hs-hint{opacity:0;translate:-50% 6px}}
@media (prefers-reduced-motion:no-preference){
  .hs-hint{animation:hs-beat 1.9s ease-in-out infinite}
  .hs-hint::before{animation:hs-pulse 1.9s ease-out infinite}
  .hs-hint i::after{animation:hs-wheel 1.8s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes hs-beat{0%,100%{scale:1}45%{scale:1.06}}
  @keyframes hs-pulse{0%{box-shadow:0 0 0 0 rgba(255,214,10,.85)}75%,100%{box-shadow:0 0 0 13px rgba(255,214,10,0)}}
  @keyframes hs-wheel{0%{transform:none;opacity:1}55%{transform:translateY(5px);opacity:0}56%{transform:none;opacity:0}100%{transform:none;opacity:1}}
}
/* touch screens: no mouse; a tap starts the scroll, a second tap returns to the top */
@media (hover:none){.hs-hint{padding:7px 12px}.hs-hint i{display:none}.hs-sm > .hs-hint{display:none}}
/* a quiet lift on hover: the device rises a little and its shadow softens out */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ph,.bw,.lp{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
  .ph::before{transition:box-shadow .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
  .ph:hover,.bw:hover,.lp:hover{transform:translateY(-4px)}
  .ph:hover::before{transform:translateY(6px) scale(.98)}
}

/* Combo: laptop + phone, bottoms aligned */
.combo{position:relative;width:min(100%,var(--cw,980px));margin-inline:auto;padding-right:11%}
.combo > .ph{position:absolute;right:0;bottom:0;width:20%;z-index:3}

/* Rows of phones: equal widths, equal gaps, centred */
.phones{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--g,28px)}
.phones > .ph,.phones > figure{width:var(--pw,clamp(150px,30vh,230px));flex:none;margin:0}
.phones > figure > .ph{width:100%}
@media (max-width:700px){.phones{--g:14px}.phones > .ph,.phones > figure{width:calc(50% - 7px)}}

/* zoomable images */
[data-zoom] img,img[data-zoom]{cursor:zoom-in}
.can-scroll img{cursor:zoom-in}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(12,12,14,.92);display:grid;place-items:center;padding:4vh 4vw;opacity:0;pointer-events:none;transition:opacity .3s}
.lb.on{opacity:1;pointer-events:auto}
.lb-in{max-width:min(1400px,92vw);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:14px;overflow:auto}
.lb-in img{max-height:84vh;width:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-in img.tall{max-height:none;max-width:min(430px,90vw)}
.lb-in p{color:#cfcfd4;font:14px/1.4 system-ui,sans-serif;text-align:center;max-width:60ch}
/* solid enough to read over a white screenshot too (on phones the image reaches the corner) */
.lb-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(28,28,32,.78);box-shadow:0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:26px;line-height:1;transition:background .2s;z-index:2}
.lb-x:hover{background:rgba(60,60,66,.9)}

@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;transition:none}.scrolling img{transform:none}}