/* Compact overview: copy on the left, real screens in devices on the right. */
.platform-overview { min-height:calc(100svh - 83px); display:flex; align-items:center; padding:54px 0 52px; background:radial-gradient(ellipse at 75% 53%,#e3eadb80,transparent 54%),#f7f5ee; }
.overview-wrap.overview-layout { max-width:1280px; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr); gap:48px; align-items:center; }
.overview-copy { min-width:0; position:relative; z-index:2; }
.overview-copy .overview-kicker { margin-bottom:24px; }
.overview-copy h1 { font-size:clamp(32px,2.7vw,42px); line-height:1.36; letter-spacing:-.045em; font-weight:500; color:#344d3c; }
.overview-copy .overview-key { position:relative; white-space:nowrap; }
.overview-copy .overview-intro { font-size:17px; line-height:1.95; margin-top:27px; padding:0; }
.overview-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:30px; }
.overview-actions .overview-download { display:inline-flex; align-items:center; gap:22px; padding:11px 17px; background:#4e6e3d; color:#f5f9ed; border-color:#4e6e3d; font-size:14px; }
.overview-actions .overview-download span { color:inherit; }
.overview-story-link { color:#7a8d6c; font-size:13px; display:inline-flex; align-items:center; gap:13px; }
.overview-story-link span { display:inline-block; animation:next-nudge 4s ease-in-out infinite; }
.platform-device-showcase { position:relative; margin:0; min-width:0; width:100%; aspect-ratio:1.36; }
.platform-device-showcase figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.device-laptop { position:absolute; width:91%; left:0; top:7%; }
.laptop-display { margin:0 4%; padding:11px 7px 7px; background:linear-gradient(145deg,#35483e,#1a2a23 65%); border:1px solid #768676; border-radius:12px 12px 5px 5px; position:relative; box-shadow:0 15px 30px #435c4020; }
.laptop-camera { position:absolute; top:3px; left:calc(50% - 2px); width:4px; height:4px; border-radius:50%; background:#6a7c6c; box-shadow:inset 0 0 0 1px #283b30; }
.laptop-screen { overflow:hidden; border-radius:3px; background:#eef4eb; }
.laptop-screen img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; }
.laptop-base { height:17px; margin-top:-1px; background:linear-gradient(#d5dccb 0,#c5cebd 50%,#94a28d 100%); border-radius:2px 2px 45% 45% / 2px 2px 80% 80%; box-shadow:0 16px 15px -10px #324a382b; position:relative; }
.laptop-base i { display:block; position:absolute; top:0; left:40%; width:20%; height:4px; background:#9fae97; border-radius:0 0 5px 5px; }
.device-phone { position:absolute; width:24%; right:0; top:20%; animation:phone-hover 8s ease-in-out infinite; }
.phone-frame { position:relative; background:linear-gradient(135deg,#415246,#213328 70%); border:1px solid #7b8c75; border-radius:26px; padding:6px; box-shadow:0 18px 32px #2d453927; }
.phone-frame::before { content:""; position:absolute; left:-3px; top:20%; width:2px; height:11%; border-radius:2px; background:#52664d; }
.phone-screen { border-radius:19px; overflow:hidden; background:#fff; }
.phone-screen img { display:block; width:100%; height:auto; aspect-ratio:1280/2769; object-fit:contain; }
.device-caption { display:block; text-align:center; font-size:12px; line-height:1.7; color:#819775; margin-top:13px; }
.laptop-caption { padding-right:18%; }
.phone-caption { font-size:11px; margin-top:10px; }
@keyframes phone-hover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@media(max-width:1180px) {
 .overview-wrap.overview-layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:30px; }
 .overview-copy .overview-intro { font-size:16px; }
 .overview-actions { gap:16px; }
 .phone-frame { border-radius:22px; padding:5px; }
 .phone-screen { border-radius:16px; }
 .laptop-display { padding:10px 6px 6px; }
}
@media(max-width:900px) {
 .platform-overview { min-height:calc(100svh - 75px); padding:42px 0 36px; }
 .overview-wrap.overview-layout { display:block; }
 .overview-copy { max-width:620px; }
 .overview-copy h1 { font-size:43px; }
 .platform-device-showcase { max-width:670px; margin:30px auto 0; }
 .overview-copy .overview-intro { font-size:17px; margin-top:20px; }
 .overview-actions { margin-top:23px; }
}
@media(max-width:640px) {
 .platform-overview { min-height:calc(100svh - 71px); padding:32px 0 27px; }
 .overview-copy .overview-kicker { margin-bottom:19px; }
 .overview-copy h1 { font-size:clamp(25px,7.2vw,37px); line-height:1.38; }
 .overview-copy .overview-intro { font-size:15px; line-height:1.9; margin-top:20px; }
 .overview-actions { gap:19px; margin-top:22px; }
 .overview-actions .overview-download { padding:9px 13px; gap:16px; font-size:13px; margin:0; }
 .overview-story-link { font-size:12px; gap:8px; }
 .platform-device-showcase { aspect-ratio:1.22; margin-top:26px; }
 .device-laptop { top:8%; }
 .laptop-display { padding:8px 4px 4px; border-radius:8px 8px 3px 3px; }
 .laptop-camera { width:3px; height:3px; top:2px; }
 .laptop-base { height:11px; }
 .laptop-base i { height:3px; }
 .device-phone { top:20%; width:26%; }
 .phone-frame { padding:4px; border-radius:17px; }
 .phone-screen { border-radius:12px; }
 .device-caption { font-size:10px; margin-top:9px; }
 .phone-caption { font-size:9px; margin-top:7px; }
}
@media(prefers-reduced-motion:reduce) {
 .platform-device-showcase *, .overview-story-link span { animation:none!important; }
}

/* One transparent photo composition; screen overlays move with their devices. */
.platform-overview { position:relative; overflow:hidden; background:radial-gradient(ellipse at 75% 47%,#e8eddf,transparent 56%),#f7f5ee; }
.platform-overview::before { content:""; position:absolute; width:240px; height:240px; border:1px solid #95a98c3b; border-radius:50%; right:-125px; top:16%; pointer-events:none; }
.platform-overview::after { content:""; position:absolute; width:72px; height:72px; bottom:12%; left:3%; background:radial-gradient(circle,#92aa7a55 1.5px,transparent 1.7px) 0 0/14px 14px; pointer-events:none; }
.real-device-showcase { aspect-ratio:1.5; isolation:isolate; }
.real-device-showcase::before { content:""; position:absolute; width:72%; height:62%; top:8%; left:14%; border-radius:50%; background:#dce6d03b; z-index:-1; }
.real-device-scene { position:relative; width:100%; aspect-ratio:1280/853; animation:device-breathe 9s ease-in-out infinite; }
.real-device-render { display:block; width:100%; height:auto; position:relative; z-index:1; }
.real-laptop-screen { position:absolute; left:14.02%; top:12.3%; width:59.88%; height:52.58%; overflow:hidden; z-index:2; border-radius:1px; background:#f5f6f3; }
.real-phone-screen { position:absolute; left:81.39%; top:36.67%; width:14.38%; height:45.51%; overflow:hidden; z-index:2; border-radius:0 0 12% 12%/0 0 6% 6%; background:#f5f6f3; }
.real-laptop-screen img,.real-phone-screen img { display:block; width:100%; height:100%; object-fit:fill; }
.device-platform-labels { display:flex; justify-content:space-between; width:66%; margin:-5% 0 0 26%; gap:20%; font-size:12px; color:#789070; letter-spacing:.08em; }
.device-platform-labels span { white-space:nowrap; }
@keyframes device-breathe { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@media(max-width:900px) { .real-device-showcase { max-width:690px; aspect-ratio:1.5; margin:24px auto 0; } .platform-overview::after { bottom:8%; left:-24px; } }
@media(max-width:640px) { .real-device-showcase { aspect-ratio:1.5; margin-top:30px; } .device-platform-labels { font-size:10px; margin-top:-3%; } .platform-overview::before { width:150px; height:150px; top:58%; } }
@media(prefers-reduced-motion:reduce) { .real-device-scene { animation:none; } }