/* One overview film above the original app explorer. */
.overview-hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:58px;min-height:570px;padding-block:40px 65px}
.overview-hero h1{font-size:clamp(44px,5.2vw,72px);max-width:none}
.overview-hero .hero-copy>p{max-width:28em;font-size:17px;line-height:1.65}
/* The film, drawn live: a 1920 × 1080 stage scaled to the frame. Keys, words
   and the menu are vector and text, sharp at any size; footage is full size. */
.overview-film{margin:0;position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--ground,#F2F5F2);isolation:isolate;container-type:inline-size}
.ov-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;transform:scale(var(--k,.36));font-family:Geist,sans-serif;color:#2C2C2C}
.ov-key{position:absolute;left:0;top:0;width:300px;height:300px;transform-origin:50% 50%;will-change:transform,opacity}
.ov-line{position:absolute;left:0;right:0;top:760px;text-align:center;font-size:64px;font-weight:550;letter-spacing:-.04em;line-height:1.1;opacity:0}
.ov-screen{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.ov-full{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover;background:var(--ground,#F2F5F2)}
.live-landing #apps{scroll-margin-top:24px}.live-landing .site-nav .button{white-space:nowrap}
@media(min-width:1500px){.overview-hero{min-height:610px;padding-block:55px 75px}}
@media(max-width:1000px){.overview-hero{gap:28px;min-height:510px}.overview-hero h1{font-size:54px}.overview-hero .hero-copy>p{font-size:16px}}
@media(max-width:700px){.overview-hero{display:flex;gap:27px;min-height:0;padding-block:25px 40px}.overview-hero h1{font-size:46px;max-width:none}.overview-hero .hero-copy>p{font-size:15px;margin-block:18px 22px}.overview-film{width:100%;max-width:640px;margin-inline:auto}.live-landing .hero-copy .fine{font-size:10px}}
@media(max-width:360px){.overview-hero h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.overview-film *{transition:none!important}}
/* The film moves the keycaps itself, frame by frame: no hover easing in the way. */
.ov-key .keycap-face,.ov-key .keycap-shadow{transition:none}
/* The header's button is a button: no link underline on hover. */
.site-nav a.button:hover{text-decoration:none}
/* The explorer plays each app at work, on the page's own ground, at 16:9. */
.preview-picture.ex-live{height:auto;aspect-ratio:16/9;max-width:100%;background:var(--ground,#F2F5F2);border-radius:14px}
.ex-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;transform:scale(var(--k,.33))}
.ex-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ground,#F2F5F2)}
/* ALT Plus: one line of offer, after the apps. */
.plus{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end;padding-block:72px;border-top:1px solid var(--line)}
.plus-mark{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.plus h2{margin-bottom:16px}.plus-copy>p:last-child{max-width:34em;color:var(--muted)}
.plus-offer{display:grid;gap:6px;justify-items:start}
.plus-price{font-size:17px}.plus-price strong{font-size:40px;font-weight:550;letter-spacing:-.03em}
.plus-offer .button{margin-top:12px}
.plus-soon{opacity:.55;cursor:default}
@media(max-width:800px){.plus{grid-template-columns:1fr;gap:24px;padding-block:52px}}
.plus-list{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 24px}
.plus-list li{display:flex;align-items:baseline;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.plus-list b{font-weight:550}.plus-list span{font-size:12px;color:var(--muted)}