/* ===== ClickSambo · Homepage mobile app banner (scoped: .cma) ===== */
.cma .cmDevice{width:300px; max-width:100%; background:#0A1120; border:10px solid #05090f;
  border-radius:42px; box-shadow:0 30px 64px rgba(28,40,65,.24); overflow:hidden; position:relative;}
.cma .cmScrn{background:#0E1626; color:#E7ECF5; height:588px; display:flex; flex-direction:column; overflow:hidden; font-size:11px; line-height:1.45}
.cma .cmSb{display:flex; justify-content:space-between; align-items:center; padding:11px 18px 5px; font-size:10.5px; font-weight:800; color:#c8d3e6}
.cma .cmSb .cmIc{opacity:.75; letter-spacing:1px}
.cma .cmApphd{display:flex; justify-content:space-between; align-items:center; padding:6px 15px 11px; border-bottom:1px solid rgba(255,255,255,.07)}
.cma .cmApphd .cmB{font-weight:800; font-size:12.5px; color:#fff}
.cma .cmApphd .cmB em{color:var(--orange); font-style:normal}
.cma .cmApphd .cmT{color:#9fb0c9; font-weight:700; font-size:11.5px}
.cma .cmPbody{flex:1; overflow:hidden; padding:11px 13px; display:flex; flex-direction:column; gap:8px}
.cma .cmSiteRow{display:flex; justify-content:space-between; align-items:center; font-weight:700; color:#c8d3e6; font-size:10.5px}
.cma .cmTagOn{background:rgba(34,181,115,.16); color:#4fd39a; border-radius:6px; padding:2px 8px; font-size:9px; font-weight:800}
.cma .cmChips{display:flex; gap:5px; flex-wrap:wrap}
.cma .cmChip{font-size:9.5px; font-weight:800; padding:4px 10px; border-radius:999px; background:#1a2740; color:#9fb0c9}
.cma .cmChip.cmOn{background:var(--orange); color:#fff}
.cma .cmNcard{background:#141f37; border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:9px 10px; display:flex; gap:8px}
.cma .cmNcard.cmFraud{border-left:3px solid #F0453A}
.cma .cmNcard .cmNi{flex:none; width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.06); display:grid; place-items:center; color:#9fb0c9}
.cma .cmNcard .cmNi svg{width:12px;height:12px}
.cma .cmNcard.cmFraud .cmNi{background:rgba(240,69,58,.14); color:#ff6f66}
.cma .cmNcard .cmNc{flex:1; min-width:0}
.cma .cmNcard .cmNt{font-weight:800; color:#fff; font-size:10.5px; display:flex; justify-content:space-between; gap:6px}
.cma .cmNcard .cmNt .cmSite{color:#8fa0ba; font-weight:700; white-space:nowrap}
.cma .cmNcard .cmNd{color:#93a1ba; margin-top:2px; font-size:10px}
.cma .cmNcard .cmDot{width:6px;height:6px;border-radius:50%; background:#F0453A; flex:none; align-self:flex-start; margin-top:3px}
.cma .stat2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.cma .stat2 .s{background:#141f37; border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:10px}
.cma .stat2 .s b{display:block; font-size:19px; font-weight:800; color:#fff; letter-spacing:-.02em}
.cma .stat2 .s u{font-style:normal; text-decoration:none; color:#4fd39a; font-size:9.5px; font-weight:800}
.cma .stat2 .s span{display:block; color:#8fa0ba; font-size:9.5px; margin-top:2px}
.cma .cmTiles{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.cma .cmTiles .cmTl{background:#141f37; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:7px 6px; text-align:center}
.cma .cmTiles .cmTl b{display:block; font-size:13px; font-weight:800; color:#fff}
.cma .cmTiles .cmTl b.cmO{color:var(--orange)}
.cma .cmTiles .cmTl b.cmG{color:#4fd39a}
.cma .cmTiles .cmTl span{display:block; color:#8fa0ba; font-size:7.5px; margin-top:2px; text-transform:uppercase; letter-spacing:.03em}
.cma .vrow{background:#141f37; border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:9px 10px}
.cma .vrow .vt{display:flex; justify-content:space-between; align-items:center; font-weight:800; color:#fff; font-size:11px}
.cma .vrow .vt .bad{color:#ff6f66; font-size:9px; background:rgba(240,69,58,.14); padding:2px 7px; border-radius:6px}
.cma .vrow .vt .good{color:#4fd39a; font-size:9px; background:rgba(34,181,115,.14); padding:2px 7px; border-radius:6px}
.cma .vrow .vm{color:#8fa0ba; font-size:9.5px; margin-top:2px}
.cma .vrow .vs{display:flex; gap:12px; margin-top:6px; color:#c8d3e6; font-size:9.5px; font-weight:700}
.cma .vrow .vs span u{color:#8fa0ba; font-weight:600; font-style:normal; text-decoration:none}
.cma .cmTrow{display:flex; justify-content:space-between; align-items:center; padding:6px 2px; font-size:10.5px; border-bottom:1px solid rgba(255,255,255,.05)}
.cma .cmTrow:last-child{border-bottom:0}
.cma .cmTrow .cmFlag{width:15px;height:11px;border-radius:2px; display:inline-block; margin-right:7px; vertical-align:-1px}
.cma .cmTrow b{color:#fff; font-weight:800}
.cma .cmPie{width:96px;height:96px;border-radius:50%; margin:2px auto 6px;
  background:conic-gradient(#F0453A 0 79%, #F7B733 79% 92%, #4A9CF5 92% 99%, #4fd39a 99% 100%);
  position:relative}
.cma .cmPie::after{content:""; position:absolute; inset:26px; border-radius:50%; background:#0E1626}
.cma .toggle-row{display:flex; justify-content:space-between; align-items:center; background:#141f37; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px 11px; font-weight:700; color:#dbe3f0; font-size:10.5px}
.cma .tg{width:32px;height:18px;border-radius:999px; background:#F0453A; position:relative; flex:none}
.cma .tg::after{content:"";position:absolute; width:14px;height:14px;border-radius:50%; background:#fff; top:2px; right:2px}
.cma .tg.off{background:#2a3757}
.cma .tg.off::after{left:2px; right:auto}
.cma .tg.cmG{background:var(--green)}
.cma .seg{display:flex; gap:5px; background:#141f37; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:4px}
.cma .seg span{flex:1; text-align:center; font-size:9.5px; font-weight:800; color:#9fb0c9; padding:5px; border-radius:6px}
.cma .seg span.cmOn{background:var(--orange); color:#fff}
.cma .set-row{display:flex; justify-content:space-between; align-items:center; padding:9px 2px; font-size:10.5px; color:#dbe3f0; font-weight:700; border-bottom:1px solid rgba(255,255,255,.05)}
.cma .set-row .ci{color:#7f8ea8}
.cma .cmPlabel{font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#6f7f98; margin:2px 0 -2px}
.cma .cmTabbar{display:flex; justify-content:space-between; padding:8px 12px 11px; border-top:1px solid rgba(255,255,255,.07); background:#0a1122}
.cma .cmTab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:8px; color:#6f7f98; font-weight:700; flex:1}
.cma .cmTab svg{width:16px;height:16px}
.cma .cmTab.cmOn{color:var(--orange)}

.cma{
  --navy:#1C2841; --ink:#0F1420; --orange:#F94C10; --orange-d:#D93D08; --orange-t:#B3380A; --orange-soft:rgba(249,76,16,.1);
  --green:#22B573; --cream:#FFF1E9; --line-2:#F0E2D8; --muted:#51607A;
  background:var(--cream); color:var(--navy);
  font-family:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; padding:82px 0 90px; overflow:hidden;
}
.cma.cma--white{background:#fff}
.cma *,.cma *::before,.cma *::after{box-sizing:border-box}
/* layout.css sets a global font-family on elements; keep the design font */
.cma *{font-family:inherit}
/* width comes from the site .container */
.cma-top{text-align:center; margin:0 auto 34px; max-width:30ch; font-size:clamp(26px,3vw,36px); line-height:1.2; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.cma-card{background:#fff; border:1px solid var(--line-2); border-radius:28px; box-shadow:0 12px 40px rgba(28,40,65,.06); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; padding:48px 56px 0}
.cma--white .cma-card{background:var(--cream)}
.cma-phones{position:relative; height:560px; align-self:end}
.cma-phones .cmPh{position:absolute; bottom:-60px}
.cma-phones .cmBack{left:0; transform:rotate(-7deg) scale(.88); transform-origin:bottom center}
.cma-phones .cmFront{left:150px; z-index:2}
.cma-phones .cmFront .cmDevice{box-shadow:0 30px 70px rgba(28,40,65,.3)}
/* wide .container: centre the phone pair in its column instead of pinning it to the left edge */
@media (min-width:1200px){
  .cma-phones{width:450px; justify-self:center}
}
.cma-txt{padding-bottom:48px}
.cma-pill{display:inline-flex; align-items:center; gap:7px; background:var(--orange-soft); color:var(--orange-t); font-size:13px; font-weight:800; border-radius:999px; padding:5px 12px; margin-bottom:14px}
.cma-pill svg{width:16px; height:16px}
.cma h2{margin:0; font-size:clamp(24px,2.6vw,32px); line-height:1.2; font-weight:800; letter-spacing:-.015em; color:var(--navy)}
.cma-txt > p{margin:14px 0 0; color:var(--muted)}
.cma-list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px}
.cma-list li{display:flex; gap:10px; align-items:flex-start; font-weight:700; font-size:15.5px; line-height:1.55}
.cma-list svg{flex:none; width:19px; height:19px; margin-top:2px; color:var(--green)}
.cma-stores{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.cma-stores a{display:inline-flex; align-items:center; gap:11px; min-height:54px; background:var(--navy); color:#fff; border-radius:12px; padding:9px 18px; text-decoration:none; transition:background .15s ease, transform .15s ease}
.cma-stores a:hover{background:var(--ink); transform:translateY(-1px)}
.cma-stores a:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.cma-stores svg{width:24px; height:24px; flex:none}
.cma-stores span{display:flex; flex-direction:column; line-height:1.15}
.cma-stores small{font-size:11px; font-weight:700; color:#C9D5E6}
.cma-stores b{font-size:17px; font-weight:800}
@media (max-width:1000px){
  .cma-card{grid-template-columns:minmax(0,1fr); padding:36px 28px 0; gap:10px}
  .cma-txt{order:-1; padding-bottom:0}
  .cma-phones{height:580px; max-width:480px; width:100%; margin:0 auto}
  .cma-phones .cmFront{left:auto; right:0}
}
@media (max-width:640px){
  .cma{padding:64px 0 70px}
  .cma-card{padding:28px 18px 0; border-radius:22px}
  .cma-phones{height:470px}
  .cma-phones .cmBack{display:none}
  .cma-phones .cmFront{left:50%; right:auto; transform:translateX(-50%)}
  .cma .cmDevice{width:260px}
  .cma .cmScrn{height:500px}
  .cma-stores a{flex:1; justify-content:center}
}
@media (prefers-reduced-motion:reduce){.cma *{transition:none !important}}