/* Supplied application screenshots, presented without altering their contents. */
.shot-figure{margin:0;min-width:0}.screenshot-link{position:relative;display:block;overflow:hidden;border:1px solid #c6d5e3;border-radius:12px;background:#fff;box-shadow:0 16px 45px #19375110;cursor:zoom-in;transition:transform .25s,box-shadow .25s}.screenshot-link:hover{transform:translateY(-3px);box-shadow:0 22px 50px #19375120}.screenshot-link img{display:block;width:100%;height:auto}.shot-expand{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff40;border-radius:50%;background:#0c263fe8;color:#fff;font-size:1.1rem;line-height:1;pointer-events:none}.shot-figure figcaption{display:flex;justify-content:space-between;gap:14px;margin-top:12px;color:var(--muted);font-size:.69rem;line-height:1.5}.shot-figure figcaption>span:last-child{white-space:nowrap;color:var(--blue);font-weight:550}.hero-copy{padding-top:24px}.hero{align-items:start}.product-visual{padding-block:0;min-width:0}.product-visual .visual-heading{margin-bottom:18px}.product-visual .shot-figure figcaption{color:#b5c4d4;font-size:.62rem}.product-visual .shot-figure figcaption>span:last-child{color:#7fc4f4}.hero-board .screenshot-link{border:6px solid #273340;border-radius:12px;box-shadow:0 24px 60px #0005;transform:perspective(1200px) rotateY(-3deg) rotateZ(-1deg)}.hero-board .screenshot-link:hover{transform:perspective(1200px) rotateY(0) rotateZ(0)}.hero-board figcaption{padding-inline:4px}.hero-board figcaption>span:last-child{display:none}.hero-phone-row{position:relative;display:grid;grid-template-columns:1fr 160px;align-items:center;gap:25px;margin-top:-32px;padding-left:25px}.hero-phone{transform:rotate(2deg);max-width:160px}.hero-phone .screenshot-link{border:5px solid #263341;border-radius:18px;box-shadow:0 20px 45px #0005}.hero-phone figcaption{padding-inline:3px}.hero-phone .shot-expand{width:26px;height:26px;right:8px;bottom:8px;font-size:.95rem}.hero-screen-note{padding-top:26px}.hero-screen-note .small-label{font-size:.56rem;letter-spacing:.11em;color:var(--brand)}.hero-screen-note p{font-family:var(--heading);font-size:1.1rem;font-weight:550;letter-spacing:-.035em;line-height:1.5;margin-top:13px;color:#dce7f2}.hero-screen-note .text-link{font-size:.72rem;color:#a4cee9;margin-top:14px;gap:10px}.screen-provenance{font-size:.61rem;letter-spacing:.03em;color:#a1b2c5;margin-top:24px;text-align:center}.offline-story{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:70px}.offline-story h2{font-size:clamp(2rem,3.2vw,3rem)}.offline-story .story-copy .eyebrow{font-size:.65rem}.offline-story .story-copy p{max-width:370px}.offline-screen{min-width:0}.offline-screen .screenshot-link{border:5px solid #d5e0eb}.role-panel{grid-template-columns:.8fr 1.2fr;gap:55px}.role-screens{min-width:0}.panel-shot .screenshot-link{border:5px solid #d5e0eb;border-radius:12px}.related-screen{display:flex;align-items:center;gap:18px;margin-top:25px;padding:16px 18px;border:1px solid #d4dfe9;border-radius:10px;background:#eef3f8;transition:background .2s}.related-screen:hover{background:#e5eff8}.related-screen img{width:105px;height:auto;border:1px solid #d2dce5;border-radius:4px;flex-shrink:0}.related-screen>span{display:flex;flex-direction:column;gap:4px}.related-screen strong{font-size:.77rem;font-weight:600;line-height:1.5}.related-screen>span>span{font-size:.68rem;color:var(--blue)}.screen-detail{margin-top:20px;font-size:.82rem;color:var(--muted);max-width:470px}.teacher-screens{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:30px;min-width:0}.teacher-phone .screenshot-link{border:5px solid #d5e0eb;border-radius:16px}.teacher-screen-aside{min-width:0}.teacher-screen-aside h4{font-size:1.2rem;line-height:1.4;letter-spacing:-.04em;margin-top:14px}.teacher-screen-aside>p{font-size:.81rem;color:var(--muted);margin-top:16px}.warning-shot{margin-top:23px}.warning-shot .screenshot-link{background:#e6edf5;border-color:#d1dce8;box-shadow:none}.warning-shot .shot-expand{width:24px;height:24px;right:5px;bottom:5px;font-size:.8rem}.warning-shot figcaption{font-size:.58rem;flex-wrap:wrap;gap:5px}.policy-screen{margin:0 auto 50px;max-width:1050px}.policy-screen .screenshot-link{border:6px solid #2c3e50;box-shadow:0 20px 45px #0003}.policy-screen figcaption{color:#b3c0ce}.policy-screen figcaption>span:last-child{color:#80c5f4}
/* Native modal retains keyboard focus and ordinary links remain usable without JS. */
.screen-viewer-open{overflow:hidden}.screen-dialog:not([open]){display:none}.screen-dialog{position:fixed;inset:0;margin:auto;padding:0;width:min(1440px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 40px);border:1px solid #34516b;border-radius:16px;background:#101820;color:#e6edf6;box-shadow:0 30px 120px #000a;overflow:auto;overscroll-behavior:contain}.screen-dialog::backdrop{background:#060c14e8;backdrop-filter:blur(8px)}.screen-dialog-inner{padding:22px}.screen-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:18px}.screen-dialog-header .small-label{color:#82bff4;font-size:.57rem}.screen-dialog-header h2{font-family:var(--body);font-size:1.08rem;font-weight:550;letter-spacing:-.02em;line-height:1.5;margin-top:6px}.screen-close{flex-shrink:0;width:44px;height:44px;border:1px solid #44607a;border-radius:50%;background:#1c2b39;color:white;font-size:1.75rem;line-height:1}.screen-dialog-stage{display:flex;align-items:center;justify-content:center;min-height:100px;background:#09121b;border-radius:8px;overflow:hidden}.screen-dialog-image{display:block;max-width:100%;max-height:calc(100dvh - 245px);width:auto;height:auto;object-fit:contain}.screen-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px}.screen-pagination{display:flex;gap:14px;align-items:center}.screen-pagination button{width:44px;height:40px;border:1px solid #39576e;border-radius:8px;color:#e1f2ff;background:#1b2d3e;font-size:1.15rem}.screen-pagination button:hover,.screen-close:hover{background:#28475d}.screen-counter{font-size:.8rem;font-variant-numeric:tabular-nums;min-width:42px;text-align:center;color:#c2d5e5}.screen-original{font-size:.76rem;display:inline-flex;align-items:center;gap:15px;padding:9px 0;color:#83c8f6}.screen-original:hover{text-decoration:underline;text-underline-offset:4px}.screen-dialog :focus-visible{outline:3px solid #22d3ee;outline-offset:4px}
@media(max-width:1100px){.hero-phone-row{grid-template-columns:1fr 150px;padding-left:12px;gap:20px;margin-top:-9px}.hero-phone{max-width:150px}.hero-screen-note p{font-size:.95rem}.hero-screen-note .small-label{font-size:.5rem}.hero-screen-note .text-link{font-size:.63rem}.hero-screen-note{padding-top:20px}.role-panel{gap:35px;grid-template-columns:.8fr 1.2fr}.teacher-screens{grid-template-columns:170px 1fr;gap:20px}.teacher-screen-aside h4{font-size:1.03rem}.teacher-screen-aside>p{font-size:.75rem}.teacher-screen-aside .small-label{font-size:.55rem}.offline-story{gap:40px}.related-screen{gap:12px;padding:14px}.related-screen img{width:80px}.related-screen strong{font-size:.7rem}}
@media(max-width:850px){.hero-copy{padding-top:0}.hero-phone-row{grid-template-columns:1fr 185px;padding-left:24px}.hero-phone{max-width:185px}.hero-screen-note p{font-size:1.2rem}.hero-screen-note .small-label{font-size:.65rem}.hero-screen-note .text-link{font-size:.77rem}.role-panel{grid-template-columns:1fr;gap:32px}.role-screens{max-width:700px;width:100%;margin-inline:auto}.teacher-screens{grid-template-columns:220px 1fr;gap:35px;max-width:610px;margin-inline:auto}.teacher-screen-aside h4{font-size:1.4rem}.teacher-screen-aside>p{font-size:.9rem}.teacher-screen-aside .small-label{font-size:.63rem}.teacher-phone figcaption{font-size:.65rem}.offline-story{grid-template-columns:1fr;gap:35px}.offline-story .story-copy{max-width:560px}.offline-story .story-copy p{max-width:none}.offline-story h2 br{display:none}.offline-screen{order:2}.offline-story .story-copy{order:1}.related-screen img{width:120px}.related-screen strong{font-size:.82rem}.related-screen>span>span{font-size:.75rem}.policy-screen{margin-bottom:35px}}
@media(max-width:600px){.product-visual .visual-heading{font-size:.6rem}.product-visual .visual-heading span:first-child{font-size:.55rem}.hero-phone-row{grid-template-columns:1fr 142px;gap:18px;padding-left:4px;margin-top:8px}.hero-phone{max-width:142px;transform:rotate(1deg)}.hero-phone .screenshot-link{border-width:4px;border-radius:14px}.hero-board .screenshot-link{border-width:4px;border-radius:8px}.hero-screen-note{padding-top:0}.hero-screen-note p{font-size:.98rem;line-height:1.6;margin-top:10px}.hero-screen-note .small-label{font-size:.51rem;letter-spacing:.04em}.hero-screen-note .text-link{font-size:.68rem;line-height:1.6;margin-top:10px;gap:6px;flex-wrap:wrap}.product-visual .shot-figure figcaption{font-size:.53rem;gap:7px}.shot-expand{width:26px;height:26px;right:8px;bottom:8px;font-size:.9rem}.screen-provenance{font-size:.58rem;margin-top:20px}.shot-figure figcaption{font-size:.64rem;gap:10px}.panel-shot .screenshot-link,.offline-screen .screenshot-link,.policy-screen .screenshot-link{border-width:3px;border-radius:8px}.related-screen{padding:12px;gap:12px;margin-top:19px}.related-screen img{width:80px}.related-screen strong{font-size:.7rem}.related-screen>span>span{font-size:.65rem}.screen-detail{font-size:.78rem;margin-top:16px}.teacher-screens{grid-template-columns:1fr 1fr;gap:20px;align-items:start}.teacher-phone .screenshot-link{border-width:3px;border-radius:12px}.teacher-phone figcaption{font-size:.57rem;flex-wrap:wrap;gap:5px}.teacher-screen-aside{padding-top:7px}.teacher-screen-aside .small-label{font-size:.5rem;letter-spacing:.04em}.teacher-screen-aside h4{font-size:.98rem;line-height:1.5;margin-top:10px}.teacher-screen-aside>p{font-size:.75rem;line-height:1.7;margin-top:12px}.warning-shot{margin-top:17px}.warning-shot .shot-expand{width:21px;height:21px;font-size:.7rem;right:3px;bottom:3px}.warning-shot figcaption{font-size:.52rem}.policy-screen{margin-bottom:30px}.offline-story h2{font-size:2.1rem}.offline-story .story-copy .eyebrow{font-size:.63rem}.screen-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:12px}.screen-dialog-inner{padding:14px}.screen-dialog-header{gap:12px;padding-bottom:14px}.screen-dialog-header h2{font-size:.87rem;line-height:1.45;margin-top:5px}.screen-dialog-header .small-label{font-size:.5rem;letter-spacing:.06em}.screen-close{width:40px;height:40px}.screen-dialog-image{max-height:calc(100dvh - 210px)}.screen-dialog-footer{gap:12px;padding-top:13px}.screen-pagination{gap:8px}.screen-pagination button{width:38px}.screen-counter{font-size:.72rem;min-width:35px}.screen-original{font-size:.66rem;gap:6px}}
@media(max-width:360px){.hero-phone-row{grid-template-columns:1fr 127px;gap:15px;padding-left:0}.hero-phone{max-width:127px}.hero-screen-note p{font-size:.86rem}.hero-screen-note .small-label{font-size:.45rem}.hero-screen-note .text-link{font-size:.61rem}.product-visual .shot-figure figcaption{font-size:.5rem}.teacher-screens{gap:16px}.teacher-screen-aside h4{font-size:.87rem}.teacher-screen-aside>p{font-size:.7rem}.teacher-screen-aside .small-label{font-size:.45rem}.related-screen img{width:65px}.related-screen strong{font-size:.65rem}.related-screen>span>span{font-size:.6rem}.screen-dialog-inner{padding:11px}.screen-dialog-header h2{font-size:.8rem}.screen-original{font-size:.6rem}.screen-pagination{gap:5px}}
@media(prefers-reduced-motion:reduce){.screenshot-link{transition:none}.hero-board .screenshot-link:hover,.screenshot-link:hover{transform:none}}
@media print{.screen-dialog{display:none!important}.hero-phone-row{break-inside:avoid}.shot-figure{break-inside:avoid}.shot-expand{display:none}}
/* Loading/error recovery is independent of image size and never shows a stale frame. */
.screen-dialog-stage{position:relative;flex-direction:column;gap:12px}.screen-load-status{max-width:540px;padding:24px;color:#c2d5e5;font-size:.9rem;text-align:center}.screen-retry{min-height:44px;padding:10px 20px;margin-bottom:24px;border:1px solid #83c8f6;border-radius:8px;background:#1b2d3e;color:#e1f2ff}.screen-pagination button,.screen-close{min-width:44px;min-height:44px}.screen-original{min-height:44px}