/* Service story: one stable device, six scroll-linked scenes. */
.mapp { position:relative;background:#fff;--app-pin-top:108px;--app-stage-height:calc(100svh - 108px); }
.mapp-pin { position:relative;padding:88px 0; }
.mapp-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,380px);gap:64px;align-items:center;width:100%; }
.app-story,.app-device { min-width:0; }
.app-device { position:relative;justify-self:center; }
.mapp .eyebrow { color:#ca1111;font-size:15px;margin-bottom:16px; }
.mapp .h2 { font-size:clamp(30px,3.4vw,46px);line-height:1.22; }
.app-active { margin-top:30px;max-width:470px; }
.app-count { display:flex;align-items:center;gap:7px;color:#9b3840;font:500 12px var(--mono);margin-bottom:14px; }
.app-count>span:last-child { margin-left:12px;font-size:10px;letter-spacing:.08em;color:var(--sub); }
.app-active h3 { font-size:23px;line-height:1.4;letter-spacing:-.04em;min-height:2.8em; }
.app-active>p:last-of-type { font-size:16px;line-height:1.65;color:var(--sub);min-height:3.3em;margin-top:8px; }
.app-service-link { display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:12px;font-size:14px;font-weight:700; }
.app-service-link:hover { color:#ca1111; }
.msteps { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:24px; }
.ms { position:relative;min-height:60px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--sub);cursor:pointer;transition:background .25s,color .25s,border-color .25s; }
.ms.on { background:#fff2f2;border-color:#e7bcbc;color:#a31722; }
.ms .n { font:600 12px var(--mono); }
.ms .step-label { font-size:11px;font-weight:700;white-space:nowrap; }
.ms b,.ms .step-detail { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.phone { position:relative;width:300px;max-width:100%;aspect-ratio:460 / 997;border-radius:38px;background:#0f1012;padding:9px;box-shadow:0 30px 65px -28px #14202c66,0 0 0 1px #00000012; }
.phone .scr { position:relative;width:100%;height:100%;border-radius:29px;overflow:hidden;background:#fff; }
.phone .scr img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transform:translateY(7%);opacity:0;transition:transform .65s var(--ease),opacity .45s; }
.phone .scr img.on { transform:none;opacity:1; }
.phone .scr img.past { transform:translateY(-5%);opacity:0; }
.phone-glow { position:absolute;inset:10% 0;background:radial-gradient(closest-side,#ca111112,transparent);pointer-events:none; }
.phone-cap { max-width:300px;min-height:38px;margin-top:14px;text-align:center;font-size:12px;line-height:1.5;color:var(--sub); }
.phone-cap em { font-style:normal;color:#a31722;font-family:var(--mono);margin-right:6px; }
.mprog { position:absolute;left:28px;right:28px;bottom:8px;max-width:1124px;margin:auto;height:3px;border-radius:2px;background:var(--gray-2);overflow:hidden; }
.mprog i { display:block;height:100%;background:#ca1111;transform-origin:0;transform:scaleX(0); }
.mobile-downloads { display:flex;align-items:center;flex-direction:column;gap:12px;padding:28px 22px 44px;background:#fff; }
.app-pinned .mapp-pin { position:sticky;top:var(--app-pin-top);height:var(--app-stage-height);padding:24px 0 32px;display:flex;align-items:center; }
.app-pinned .phone { width:min(300px,calc((var(--app-stage-height) - 110px)*.461)); }
html:not(.app-pinned) .mapp { height:auto!important; }
html:not(.app-pinned) .mprog { display:none; }
html:not(.enhanced) .app-active,html:not(.enhanced) .msteps { display:none; }
html:not(.enhanced) .mapp-grid { grid-template-columns:1fr; }
html:not(.enhanced) .app-device { width:100%; }
html:not(.enhanced) .phone { width:100%;max-width:none;border-radius:0;aspect-ratio:auto;padding:0;background:transparent;box-shadow:none; }
html:not(.enhanced) .phone .scr { display:flex;gap:16px;overflow-x:auto;border-radius:0;scroll-snap-type:x proximity; }
html:not(.enhanced) .phone .scr img { position:static;width:240px;height:auto;flex:none;transform:none;opacity:1;border-radius:20px; }
@media(max-width:1000px) { .mapp-grid { gap:32px; } }
@media(max-height:740px) and (min-width:761px) {
  .app-pinned .mapp .h2 { font-size:32px; }
  .app-pinned .app-active { margin-top:18px; }
  .app-pinned .app-active h3 { font-size:21px; }
  .app-pinned .msteps { margin-top:14px; }
}
@media(max-width:760px) {
  .mapp-pin { padding:70px 0; }
  .mapp-grid { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px 18px; }
  .app-story { display:contents; }
  .app-intro { grid-column:1 / -1;grid-row:1; }
  .mapp .eyebrow { font-size:12px;margin-bottom:10px; }
  .mapp .h2 { font-size:clamp(25px,6vw,34px); }
  .app-active { grid-column:1;grid-row:2;margin:0;align-self:center; }
  .app-count { font-size:11px;margin-bottom:12px; }
  .app-count>span:last-child { display:none; }
  .app-active h3 { font-size:clamp(17px,4.7vw,22px);min-height:0; }
  .app-active>p:last-of-type { font-size:13px;min-height:0;line-height:1.65;margin-top:12px; }
  .app-service-link { font-size:12px;gap:5px;margin-top:12px; }
  .app-device { grid-column:2;grid-row:2;max-width:100%; }
  .phone { width:100%;border-radius:25px;padding:6px; }
  .phone .scr { border-radius:19px; }
  .phone-cap { display:none; }
  .msteps { grid-column:1 / -1;grid-row:3;margin:0;gap:6px; }
  .ms { min-height:52px;border-radius:10px;padding:7px 2px; }
  .ms .step-label { font-size:10px; }
  .app-pinned .mapp-pin { padding:18px 0 24px; }
  .app-pinned .phone { width:min(230px,calc((var(--app-stage-height) - 222px)*.461)); }
}
@media(max-height:650px) and (max-width:760px) {
  .app-pinned .mapp-grid { gap:12px 16px; }
  .app-pinned .app-active h3 { font-size:17px; }
  .app-pinned .app-active>p:last-of-type { font-size:12px; }
  .app-pinned .mapp .h2 { font-size:25px; }
  .app-pinned .app-service-link { margin-top:3px; }
}
/* gallery strip */
.mgal{padding:40px 0 150px;background:#fff;overflow:hidden}
.mgal-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.mgal-h h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.04em}
.mgal-h p{font-size:14px;color:var(--sub)}
.mrow{display:flex;gap:18px;margin-top:36px;padding-left:max(28px,calc(50% - 562px));will-change:transform}
.mcard{flex:none;width:210px}
.mcard .f{aspect-ratio:916/1986;border-radius:28px;background:#0f1012;padding:6px;box-shadow:0 24px 50px -24px rgba(20,20,30,.4)}
.mcard .f img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:22px}
.mcard b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;margin-top:14px}
.mcard span{display:block;font-size:13px;color:var(--sub);margin-top:2px}