/* One shared status treatment for every app screenshot, including the lightbox. */
.app-screen{position:relative;display:block;width:100%;isolation:isolate;overflow:hidden;border-radius:inherit;line-height:0}
.app-screen>img:not(.app-status-bar){display:block;width:100%;max-width:none;height:auto;margin:0;border:0;border-radius:0;box-shadow:none}
.app-screen>.app-status-bar{position:absolute;inset:0 0 auto;width:100%;max-width:none;height:7.4%;margin:0;padding:0;background:var(--screen-bg,#1f1e1c);border:0;border-radius:0;box-shadow:none;aspect-ratio:auto;object-fit:fill;pointer-events:none;z-index:1}
.app-screen--tablet>.app-status-bar{height:3.45%}
.topic-media .app-screen{max-width:185px;border:4px solid #11110f;border-radius:21px;box-shadow:0 12px 25px #0003}
.screenshot-showcase .app-screen{max-width:295px;margin-inline:auto;border:6px solid #10100f;border-radius:27px}
.feature-screen .app-screen{border:5px solid #121210;border-radius:23px;box-shadow:0 15px 28px #0003}
.image-viewer .app-screen{max-width:none;border:0;border-radius:10px}
.image-viewer figure{max-width:1100px}
.image-viewer .app-screen--phone{width:min(100%,660px);margin-inline:auto}
/* A landscape iPad is the main canvas; the iPhone sits just in front of it. */
.hero-art .tablet-device{width:100%;left:0;right:auto;top:90px;border-radius:24px;transform:rotate(-7deg);z-index:1}
.hero-art .tablet-device img:not(.app-status-bar){aspect-ratio:3180/2384}
.hero-art .phone-front{width:32%;left:auto;right:0;top:165px;transform:rotate(9deg);z-index:2;border-radius:29px}
.hero-art .art-caption{left:0;right:auto;bottom:0;width:100%;text-align:center}
.hero-art .spark-one{left:0;top:25px}.hero-art .spark-two{right:0;bottom:26px}
/* Device support is a feature story, with enough space to inspect the real screens. */
.devices-section{border-top:1px solid var(--line)}
.devices-heading{display:grid;grid-template-columns:1.25fr 1fr;gap:80px;align-items:end;margin-bottom:48px}
.devices-heading .eyebrow{color:var(--label-neutral);font-size:10px}
.devices-heading h2{font-size:clamp(34px,3.8vw,50px);line-height:1.15;letter-spacing:-1.6px}
.devices-heading>p{color:var(--muted);font-size:16px;line-height:1.9;margin:0;max-width:450px}
.devices-visual{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1fr);align-items:center;gap:42px;padding:34px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse at 50% 25%,#8b849e10,transparent 75%),#242321}
.devices-visual figure{min-width:0;margin:0}
.devices-visual .media-image-link{border:7px solid #0e0e0d;border-radius:24px;overflow:hidden;box-shadow:0 18px 36px #0005}
.devices-visual .app-screen{border-radius:0}
.devices-visual figcaption{font-size:11px;color:var(--muted);line-height:1.7;margin-top:18px;text-align:center}
.device-handset .media-image-link{border-radius:29px}
.devices-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:34px}
.devices-benefits article{padding-top:23px;border-top:1px solid var(--line)}
.devices-benefits h3{font-size:19px;line-height:1.4;font-weight:500;margin:0 0 12px}
.devices-benefits p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}
.devices-benefits .context-link{margin-top:15px;font-size:12px}
@media(max-width:1100px) and (min-width:761px){.hero-art .tablet-device{top:100px}.hero-art .phone-front{top:165px}.devices-heading{gap:35px}.devices-visual{gap:25px}}
@media(max-width:760px){
 .hero-art{max-width:460px;aspect-ratio:1/1.12;min-height:0}
 .hero-art .tablet-device{left:4%;right:auto;top:12%;width:88%;border-radius:17px}
 .hero-art .phone-front{left:auto;right:5%;top:30%;width:31%;border-radius:20px}
 .hero-art .art-caption{bottom:0;font-size:9px}
 .hero-art .spark-one{top:0;left:3%}.hero-art .spark-two{right:0;bottom:10%}
 .devices-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}
 .devices-heading h2{font-size:34px;letter-spacing:-1px}.devices-heading>p{font-size:15px}
 .devices-visual{grid-template-columns:1fr;gap:28px;padding:18px;border-radius:14px}
 .devices-visual .media-image-link{border-width:4px;border-radius:15px}
 .devices-visual .device-handset{width:44%;min-width:140px;max-width:210px;justify-self:center}
 .devices-visual .device-handset .media-image-link{border-radius:23px}
 .devices-visual figcaption{font-size:10px;margin-top:12px}
 .devices-benefits{grid-template-columns:1fr;gap:0;margin-top:18px}
 .devices-benefits article{padding-block:24px}.devices-benefits h3{font-size:18px}
}