/* Mobile app service page. All component rules are scoped to the page. */
.mapp-page { --mapp-text: #d4d0c9; --mapp-line: rgba(212,175,55,.22); }
.mapp-page [hidden] { display: none !important; }
.mapp-page main { overflow: clip; }
.mapp-page main { background:#1c211e; color:#f7f3ee; color-scheme:dark; }
.mapp-page main .section { background:#1c211e; color:#f7f3ee; }
.mapp-page main .mapp-hero { background:radial-gradient(ellipse at 84% 45%,#35413955,transparent 60%),#18211c; color:#f7f3ee; }
.mapp-page main .mapp-concepts { background:radial-gradient(ellipse at 78% 50%,#3f555125,transparent 60%),#202823; }
.mapp-page main .mapp-brief-section { background:linear-gradient(130deg,#34312666,#242b2b44),#1d241e; }
.mapp-page main .section-title,.mapp-page main h3 { color:#f7f3ee; }
.mapp-page main .eyebrow,.mapp-page main .text-link { color:#dfc68d; }
.mapp-page main .button:not(.button--primary) { color:#efdfb2; border-color:#c9b681; background:transparent; }
.mapp-page main .button--primary { color:#19251c; background:#dfc68d; border-color:#dfc68d; }
.mapp-page main .button--primary:hover { color:#19251c; background:#ecd59f; border-color:#ecd59f; }
.mapp-page main .button:not(.button--primary):hover { color:#fff3d4; background:#dfc68d16; }
.mapp-page main .faq-item { background:#262f28; border-color:#65705c; color:#f7f3ee; }
.mapp-page main .faq-item summary { color:#f7f3ee; }
.mapp-page main .faq-item summary::after { color:#dfc68d; }
.mapp-page main .seo-breadcrumbs { background:#202b23; color:#d9dbc9; }
.mapp-page main .mapp-device { color-scheme:light; }
.mapp-page main .mapp-device p { font-size:12px; line-height:1.7; }
.mapp-page main .mapp-demo-note p { font-size:12px; }
.mapp-page main .mapp-device .button--primary { background:#304635; color:#fff; border-color:#304635; }
.mapp-page main .mapp-device .button--primary:hover { background:#3c5742; color:#fff; }
.mapp-page .mapp-hero { padding: 88px 0 92px; border-bottom: 1px solid var(--mapp-line); }
.mapp-page .mapp-hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr); gap:48px; align-items:center; }
.mapp-page .mapp-title { margin:0 0 28px; color:var(--cream); font-family:var(--display); font-size:clamp(44px,5.8vw,78px); font-weight:400; line-height:1.08; letter-spacing:-.025em; text-transform:none; }
.mapp-page .mapp-title .eyebrow { display:flex; margin-bottom:26px; font-family:var(--body); font-size:11px; letter-spacing:.12em; line-height:1.6; }
.mapp-page .mapp-title em { color:var(--gold); font-style:normal; }
.mapp-page .lede { color:var(--mapp-text); font-size:16px; }
.mapp-page .mapp-hero .button-row { margin-top:32px; }
.mapp-page .mapp-hero-notes { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; color:var(--sand); font-size:11px; }
.mapp-page .mapp-hero-art { position:relative; min-height:510px; display:grid; place-items:center; isolation:isolate; }
.mapp-page .mapp-orbit { position:absolute; width:420px; height:420px; max-width:120%; border:1px solid var(--mapp-line); border-radius:50%; z-index:-1; }
.mapp-page .mapp-orbit--one { transform:rotate(-28deg) scaleY(.76); }
.mapp-page .mapp-orbit--two { transform:rotate(28deg) scaleY(.76); border-color:rgba(64,199,199,.2); }
.mapp-page .mapp-hero-phone { width:260px; padding:20px; min-height:448px; border:5px solid #62615c; border-radius:43px; background:linear-gradient(145deg,#333936,#182121 66%); box-shadow:18px 24px 60px #0007,inset 0 0 0 2px #111; transform:rotate(-7deg); }
.mapp-page .mapp-island { width:76px; height:19px; background:#111; border-radius:20px; margin:0 auto 26px; }
.mapp-page .mapp-phone-brand { font-family:var(--display); color:var(--gold); font-size:17px; letter-spacing:.18em; display:flex; justify-content:space-between; align-items:center; }
.mapp-page .mapp-phone-brand span { font-family:var(--body); font-size:7px; letter-spacing:.12em; }
.mapp-page .mapp-art-greeting { margin:23px 0 16px; font-size:18px; color:var(--cream); }
.mapp-page .mapp-art-feature { padding:20px 15px; min-height:106px; border:1px solid #d4af3738; border-radius:18px; background:linear-gradient(130deg,#99814044,#b7caad0a); display:flex; align-items:center; gap:16px; }
.mapp-page .mapp-art-feature>span { font-family:var(--display); font-size:44px; color:var(--gold); }
.mapp-page .mapp-art-feature strong { font-size:15px; font-weight:500; line-height:1.5; }
.mapp-page .mapp-art-tiles { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:17px 0 22px; }
.mapp-page .mapp-art-tiles span { border:1px solid #ffffff18; background:#ffffff05; border-radius:10px; padding:14px 8px; font-size:10px; }
.mapp-page .mapp-art-nav { display:flex; justify-content:space-around; border-top:1px solid #ffffff20; padding-top:13px; color:var(--gold); }
.mapp-page .mapp-art-label { position:absolute; bottom:4px; font-size:10px; letter-spacing:.08em; color:var(--sand); }
.mapp-page .section-title { text-transform:none; font-size:clamp(30px,3.5vw,45px); line-height:1.18; letter-spacing:0; }
.mapp-page .section-copy { color:var(--mapp-text); font-size:14px; }
.mapp-page .mapp-platform-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--mapp-line); }
.mapp-page .mapp-platform { padding:32px 24px 28px; border-inline-end:1px solid var(--mapp-line); }
.mapp-page .mapp-platform:first-child { padding-inline-start:0; }
.mapp-page .mapp-platform:last-child { border-inline-end:0; padding-inline-end:0; }
.mapp-page .mapp-number { display:block; color:var(--gold); font-size:12px; letter-spacing:.1em; margin-bottom:20px; }
.mapp-page .mapp-platform h3,.mapp-page .mapp-process h3,.mapp-page .mapp-integration h3 { font-size:19px; font-weight:500; margin-bottom:16px; line-height:1.5; }
.mapp-page .mapp-platform p,.mapp-page .mapp-process p,.mapp-page .mapp-integration p { font-size:13px; color:var(--mapp-text); line-height:1.9; }
.mapp-page .mapp-concepts { background:radial-gradient(ellipse at 78% 50%,#3f555125,transparent 60%),#202321; border-block:1px solid var(--mapp-line); }
.mapp-page .mapp-demo-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:60px; align-items:start; }
.mapp-page .mapp-tabs { display:grid; border-top:1px solid var(--mapp-line); }
.mapp-page .mapp-tabs button { width:100%; min-height:70px; display:flex; align-items:center; gap:17px; border:0; border-bottom:1px solid var(--mapp-line); background:transparent; color:var(--sand); text-align:start; padding:14px 16px; font-size:15px; transition:background .18s,color .18s; }
.mapp-page .mapp-tabs button span:first-child { font-size:10px; opacity:.75; }
.mapp-page .mapp-tabs button span:last-child { margin-inline-start:auto; color:var(--gold); }
.mapp-page .mapp-tabs button[aria-selected="true"] { background:#d4af3714; color:var(--cream); box-shadow:inset 3px 0 0 var(--gold); }
html[dir="rtl"] .mapp-page .mapp-tabs button[aria-selected="true"] { box-shadow:inset -3px 0 0 var(--gold); }
.mapp-page .mapp-demo-note { margin-top:28px; border:1px solid #40c7c733; border-radius:8px; padding:18px; color:var(--mapp-text); font-size:12px; }
.mapp-page .mapp-demo-note p:first-of-type { color:var(--aqua); margin-bottom:9px; }
.mapp-page .mapp-dot { width:6px; height:6px; border-radius:50%; background:var(--aqua); display:block; margin-bottom:10px; }
.mapp-page .mapp-demo-panels { min-width:0; }
.mapp-page .mapp-demo-panel { display:grid; grid-template-columns:minmax(0,.9fr) minmax(250px,1fr); gap:28px; align-items:center; margin-bottom:40px; }
.mapp-page.mapp-ready .mapp-demo-panel { margin-bottom:0; }
.mapp-page .mapp-demo-description h3 { font-size:26px; font-weight:400; line-height:1.35; color:var(--cream); margin-bottom:18px; }
.mapp-page .mapp-demo-description p { font-size:13px; color:var(--mapp-text); line-height:1.9; }
.mapp-page .mapp-device { width:100%; max-width:315px; min-width:0; border:5px solid #77766e; border-radius:35px; background:#f1ede4; color:#222825; box-shadow:0 22px 48px #0004; overflow:hidden; }
.mapp-page .mapp-device-top { display:flex; justify-content:space-between; padding:14px 22px 8px; font-size:10px; font-weight:700; direction:ltr; }
.mapp-page .mapp-device-body { padding:15px 17px 20px; }
.mapp-page .mapp-device-kicker { font-size:10px; font-weight:600; letter-spacing:.1em; color:#4b5146; margin-bottom:14px; }
.mapp-page .mapp-device-heading { font-size:25px; font-weight:600; line-height:1.3; }
.mapp-page .mapp-device-intro { font-size:11px; margin:10px 0 20px; line-height:1.6; color:#52594f; }
.mapp-page .mapp-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mapp-page .mapp-service { min-height:94px; border:1px solid #c4c9bf; border-radius:12px; background:#fbfaf6; color:#29352c; text-align:start; padding:12px 9px; display:flex; flex-direction:column; gap:9px; font-size:12px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.mapp-page .mapp-service>span:first-child { color:#697d52; font-size:23px; line-height:1; }
.mapp-page .mapp-service[aria-pressed="true"] { background:#314637; color:#fff; border-color:#314637; }
.mapp-page .mapp-service[aria-pressed="true"]>span:first-child { color:#dacf9b; }
.mapp-page .mapp-request { border:1px solid #c9c7bb; border-radius:10px; background:#e8e5d9; padding:12px; margin-top:13px; }
.mapp-page .mapp-request>span { display:block; font-size:9px; color:#51594e; }
.mapp-page .mapp-request strong { display:block; font-size:12px; margin:4px 0 10px; }
.mapp-page .mapp-request .button { min-height:44px; width:100%; padding:8px; font-size:11px; line-height:1.5; }
.mapp-page .mapp-demo-status { min-height:50px; margin:14px 0 5px; font-size:10px; line-height:1.7; color:#374c3c; }
.mapp-page .mapp-reset { border:0; background:transparent; color:#365039; font-size:12px; min-height:44px; text-decoration:underline; text-underline-offset:4px; padding:7px 0; }
.mapp-page .mapp-device-disclaimer { padding-top:10px; border-top:1px solid #c8c9bf; font-size:10px; color:#4b5146; line-height:1.5; }
.mapp-page .mapp-process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; }
.mapp-page .mapp-process { padding-top:24px; border-top:1px solid var(--mapp-line); }
.mapp-page .mapp-process h3 { font-size:17px; }
.mapp-page .mapp-integration { display:grid; grid-template-columns:1fr 1fr; gap:45px; margin-top:54px; padding:32px; border:1px solid var(--mapp-line); border-radius:8px; }
.mapp-page .mapp-integration .text-link { display:inline-block; margin-top:18px; }
.mapp-page .mapp-brief-section { border-block:1px solid var(--mapp-line); background:linear-gradient(130deg,#34312666,#242b2b44); }
.mapp-page .mapp-brief-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.mapp-page .mapp-brief-grid .lede { margin:24px 0; font-size:14px; }
.mapp-page .mapp-privacy-note { color:var(--mapp-text); font-size:12px; margin-bottom:20px; }
.mapp-page .mapp-brief-card { padding:30px; background:#1c1e1c; border:1px solid var(--mapp-line); border-radius:14px; min-width:0; }
.mapp-page .mapp-field { margin-bottom:20px; min-width:0; }
.mapp-page .mapp-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mapp-page .mapp-field label,.mapp-page .mapp-brief-review label { display:block; margin-bottom:8px; color:var(--cream); font-size:12px; }
.mapp-page .mapp-field input,.mapp-page .mapp-field select,.mapp-page .mapp-field textarea,.mapp-page #app-brief-output { width:100%; min-width:0; border:1px solid #5e6256; border-radius:6px; background:#262b25; color:var(--cream); padding:12px 14px; font-size:14px; line-height:1.6; }
.mapp-page .mapp-field input::placeholder,.mapp-page .mapp-field textarea::placeholder { color:#a6aa9f; }
.mapp-page .mapp-field select { min-height:48px; padding-inline-end:8px; }
.mapp-page .mapp-field textarea,.mapp-page #app-brief-output { resize:vertical; }
.mapp-page .mapp-field textarea { min-height:120px; }
.mapp-page .mapp-brief-review { padding-top:24px; margin-top:24px; border-top:1px solid var(--mapp-line); }
.mapp-page #app-brief-output { font-size:12px; min-height:210px; }
.mapp-page .mapp-brief-review .button-row { gap:10px; margin-top:16px; }
.mapp-page .mapp-brief-status { margin-top:16px; color:var(--aqua); font-size:12px; min-height:20px; }
.mapp-page .faq-item p { color:var(--mapp-text); }
.mapp-page button:disabled { cursor:default; opacity:.55; }
.mapp-page .mapp-device :focus-visible { outline-color:#226543; }
html[dir="rtl"] .mapp-page .mapp-title,html[dir="rtl"] .mapp-page .section-title { font-family:'Noto Sans Arabic',sans-serif; letter-spacing:0; line-height:1.4; }
html[dir="rtl"] .mapp-page .mapp-title .eyebrow { letter-spacing:0; }
html[dir="rtl"] .mapp-page .mapp-hero-phone { transform:rotate(7deg); }
@media(max-width:1100px) {
 .mapp-page .mapp-demo-layout { grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:30px; }
 .mapp-page .mapp-demo-panel { grid-template-columns:1fr; gap:24px; }
 .mapp-page .mapp-device { margin-inline:auto; }
 .mapp-page .mapp-brief-grid { gap:35px; }
 .mapp-page .mapp-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
 .mapp-page .mapp-hero { padding:48px 0 52px; }
 .mapp-page .mapp-hero-grid { grid-template-columns:1fr; gap:34px; }
 .mapp-page .mapp-title { font-size:clamp(39px,9vw,62px); }
 .mapp-page .mapp-hero-art { min-height:500px; }
 .mapp-page .mapp-hero-phone { transform:rotate(-4deg); }
 .mapp-page .mapp-platform-grid,.mapp-page .mapp-brief-grid,.mapp-page .mapp-integration { grid-template-columns:1fr; }
 .mapp-page .mapp-platform { padding:24px 0; border-inline-end:0; border-bottom:1px solid var(--mapp-line); }
 .mapp-page .mapp-platform:last-child { border-bottom:0; }
 .mapp-page .mapp-demo-layout { grid-template-columns:1fr; gap:28px; }
 .mapp-page .mapp-tabs { grid-template-columns:1fr 1fr; gap:6px; border-top:0; }
 .mapp-page .mapp-tabs button { border:1px solid var(--mapp-line); border-radius:6px; padding:12px 9px; gap:9px; font-size:12px; min-height:60px; }
 .mapp-page .mapp-tabs button span:last-child { display:none; }
 .mapp-page .mapp-demo-note { margin-top:18px; }
 .mapp-page .mapp-demo-description { max-width:560px; }
 .mapp-page .mapp-integration { padding:24px; gap:22px; }
 .mapp-page .mapp-brief-card { padding:24px; }
 .mapp-page .mapp-brief-grid { gap:32px; }
 .mapp-page .mapp-field input,.mapp-page .mapp-field textarea,.mapp-page .mapp-field select { font-size:16px; }
}
@media(max-width:420px) {
 .mapp-page .container { width:calc(100% - 36px); }
 .mapp-page .mapp-title { font-size:38px; }
 .mapp-page .mapp-title .eyebrow { font-size:10px; }
 .mapp-page .mapp-title .eyebrow::before { width:14px; }
 .mapp-page .mapp-hero-art { min-height:490px; }
 .mapp-page .mapp-process-grid,.mapp-page .mapp-field-row { grid-template-columns:1fr; }
 .mapp-page .mapp-field-row { gap:0; }
 .mapp-page .mapp-brief-card { padding:18px; }
 .mapp-page .mapp-device-body { padding:13px; }
 .mapp-page .mapp-brief-review .button { width:100%; }
 .mapp-page .mapp-title .eyebrow { letter-spacing:0; }
}
@media(prefers-reduced-motion:reduce) {
 .mapp-page * { scroll-behavior:auto !important; }
 .mapp-page .mapp-tabs button,.mapp-page .button { transition:none; }
}