/* Two views of one taat. Keep the native app upright and undistorted. */
.hero { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-areas:"copy phone" "privacy privacy"; column-gap:56px; }
.hero-copy { align-self:center; }
.hero h1 { font-size:clamp(46px,4.9vw,70px); }
html:not([lang="fr"]) .hero h1 { font-size:clamp(44px,4.45vw,64px); }
.hero-stores { justify-content:flex-start; margin-top:28px; }
.hero-stores .store-placeholder { min-width:144px; min-height:56px; padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); }
.hero-stores .store-placeholder img { opacity:1; }
.motion-column { width:100%; max-width:620px; }
.phone-pair { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pair-gap); --pair-gap:24px; align-items:start; isolation:isolate; }
.phone-device { min-width:0; width:100%; margin:0; position:relative; }
.creator-device { z-index:2; transform:translateX(calc(50% + var(--pair-gap)/2)); }
.participant-device { z-index:1; opacity:0; visibility:hidden; transform-origin:center center; }
.phone-device figcaption { display:flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--muted); font-size:12px; line-height:18px; }
.phone-device figcaption>span { display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; font-size:10px; font-weight:550; }
.phone-device .art-stage { max-width:none; width:100%; }
/* Role colour stays on the hardware and letter badge, never the app UI. */
.creator-device { --device-rim:#282a30; --device-edge:#92959d; }
.participant-device { --device-rim:#B5B8BF; --device-edge:#747981; }
.phone-device .art-stage { border-color:var(--device-rim); box-shadow:0 0 0 1px var(--device-edge),0 24px 45px -28px #0005; }
.phone-device figcaption>span { background:var(--device-rim); border-color:var(--device-rim); color:#fff; }
.phone-device figcaption { min-height:36px; }
.map-credit { margin-top:16px; }
@media(min-width:601px) and (max-width:1099px) {
 .hero { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "phone" "privacy"; row-gap:48px; }
 .hero-copy { width:min(100%,640px); justify-self:center; text-align:center; }
 .hero-stores { justify-content:center; }
 .hero h1,html:not([lang="fr"]) .hero h1 { font-size:clamp(44px,6vw,64px); }
 .motion-column { max-width:580px; }
}
@media(max-width:600px) {
 .hero { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "phone" "privacy"; row-gap:32px; }
 .hero h1,html:not([lang="fr"]) .hero h1 { font-size:clamp(41px,10.2vw,58px); }
 .motion-column { width:100%; max-width:500px; }
 .phone-pair { --pair-gap:14px; scroll-margin-top:24px; }
 .phone-device .art-stage { border-width:4px; border-radius:clamp(18px,5vw,30px); }
 .phone-device figcaption { font-size:11px; line-height:15px; gap:6px; margin-bottom:10px; }
 .phone-device figcaption>span { width:22px; height:22px; }
 .map-credit { margin-top:12px; }
}
@media(max-width:360px) {
 .phone-pair { --pair-gap:10px; }
 .phone-device figcaption { font-size:10px; }
}

@media(prefers-reduced-motion:reduce) {
 .creator-device { transform:none; }
 .participant-device { opacity:1; visibility:visible; }
}