.app-page { background:#fff; padding:96px 0 112px; }
.app-layout { width:min(calc(100% - 64px),1200px); margin:auto; display:grid; grid-template-columns:420px 1fr; gap:72px; align-items:center; }
.app-visual { position:relative; height:540px; overflow:hidden; background:#000c3c; border-radius:24px; color:#fff; }
.app-visual>img { width:100%; height:100%; object-fit:cover; object-position:62% center; }
.app-visual>span { position:absolute; left:32px; top:32px; font-size:24px; letter-spacing:1px; }
.app-visual>p { position:absolute; bottom:0; padding:56px 32px 28px; width:100%; background:linear-gradient(transparent,#000b); font-size:20px; }
.app-heading { display:flex; gap:20px; align-items:center; }
.app-mark { width:84px; height:84px; display:grid; place-items:center; background:#f6f6f6; border-radius:20px; }
.app-mark img { width:66px; }
.app-heading p { color:#777; font-size:14px; margin-bottom:8px; }
.app-heading h1 { font-size:30px; font-weight:600; }
.app-tabs { display:flex; gap:32px; margin-top:36px; border-bottom:1px solid #ddd; }
.app-tabs button { border:0; background:transparent; padding:16px 0; font:inherit; color:#777; cursor:pointer; border-bottom:2px solid transparent; }
.app-tabs button[aria-selected=true] { color:#000c3c; border-bottom-color:#0091d2; font-weight:600; }
.app-features { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:36px 0; border-bottom:1px solid #ddd; }
.app-features b { font-size:16px; }.app-features p { color:#777; font-size:13px; line-height:1.7; margin-top:10px; }
#app-download { display:flex; gap:24px; align-items:center; padding-top:32px; }
#app-qr { width:156px; height:156px; object-fit:contain; }
#app-download h2 { font-size:18px; font-weight:500; } #app-download p { font-size:13px; color:#777; line-height:1.6; margin-top:10px; }
.app-download-links { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }.app-download-links[hidden] { display:none; }
@media(max-width:1100px) { .app-layout { grid-template-columns:34% 1fr; gap:40px; }.app-visual { height:480px; } }
@media(max-width:767px) { .app-page { padding:32px 0 48px; }.app-layout { width:calc(100% - 40px); grid-template-columns:1fr; gap:32px; }.app-visual { height:300px; }.app-heading h1 { font-size:26px; }.app-features { gap:12px; } #app-download { gap:16px; align-items:flex-start; } #app-qr { width:112px; height:112px; } .app-download-links { flex-direction:column; }.app-tabs { margin-top:20px; } }
/* The supplied App artwork includes its own phone-screen copy. */
.app-visual { background:#fff; }
.app-visual>#app-product { object-position:50% center; }
.app-visual>span,
.app-visual>p { display:none; }
.app-mark { flex-shrink:0; overflow:hidden; } .app-mark img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
#app-qr { flex-shrink:0; background:#fff; opacity:1; filter:none; image-rendering:pixelated; }