/* ==========================================================================
   iBet Login - mobile-first shell stylesheet
   Canvas : 320-430px phone frame, centered on wide screens
   Look   : slate night base, turquoise action lines, gold CTA accents,
            near-square corners, outlined tile cards, full-width buttons
   Prefix : every class = mobile753b8-  |  every CSS var = --mobile753b8-*
   ========================================================================== */

:root{
  --mobile753b8-slate:        #34495E;
  --mobile753b8-slate-deep:   #2A3B4C;
  --mobile753b8-slate-night:  #223140;
  --mobile753b8-teal:         #40E0D0;
  --mobile753b8-teal-soft:    #80CBC4;
  --mobile753b8-mist:         #B2DFDB;
  --mobile753b8-gold:         #FFD700;
  --mobile753b8-gold-deep:    #C9A800;
  --mobile753b8-page-ink:     #1B2833;
  --mobile753b8-line:         rgba(128,203,196,.30);
  --mobile753b8-line-strong:  rgba(64,224,208,.62);
  --mobile753b8-tile-bg:      rgba(178,223,219,.055);
  --mobile753b8-veil:         rgba(34,49,64,.985);
  --mobile753b8-font-body:    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mobile753b8-radius:       3px;
  --mobile753b8-radius-lg:    4px;
  --mobile753b8-topbar-h:     58px;
  --mobile753b8-bnav-h:       62px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{ overflow-x:hidden; }
body{
  margin:0;
  background:var(--mobile753b8-page-ink);
  color:var(--mobile753b8-mist);
  font:400 15px/1.62 var(--mobile753b8-font-body);
}
img{ max-width:100%; }
a{ color:var(--mobile753b8-teal-soft); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.mobile753b8-tile:focus-visible{
  outline:2px solid var(--mobile753b8-gold);
  outline-offset:2px;
  border-radius:var(--mobile753b8-radius);
}
h1,h2,h3,h4,p,ol,ul,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font-family:inherit; color:inherit; }

/* phone canvas: the whole site lives inside a 430px column */
.mobile753b8-canvas{
  position:relative;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:
    radial-gradient(120% 46% at 50% -6%, rgba(64,224,208,.16), rgba(64,224,208,0) 62%),
    linear-gradient(180deg, var(--mobile753b8-slate-deep) 0%, var(--mobile753b8-slate) 26%, var(--mobile753b8-slate) 100%);
  box-shadow:0 0 0 1px rgba(64,224,208,.16), 0 18px 60px rgba(8,15,22,.65);
}
section[id]{ scroll-margin-top:calc(var(--mobile753b8-topbar-h) + 12px); }

/* display type: heavy, tracked, near-flat */
.mobile753b8-display{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.045em;
  color:#FFFFFF;
}

/* ---------- shared buttons (full-width primary shape) ---------- */
.mobile753b8-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:48px;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:var(--mobile753b8-radius);
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:filter .16s ease, transform .12s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.mobile753b8-btn-gold{
  background:linear-gradient(180deg, var(--mobile753b8-gold), var(--mobile753b8-gold-deep));
  color:#223140;
}
.mobile753b8-btn-ghost{
  background:rgba(64,224,208,.06);
  color:var(--mobile753b8-teal);
  border-color:var(--mobile753b8-line-strong);
}
.mobile753b8-btn:active{ transform:translateY(1px); filter:brightness(1.1); }

/* ---------- fixed top brand bar ---------- */
.mobile753b8-topbar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:60;
  background:linear-gradient(180deg, rgba(42,59,76,.98), rgba(42,59,76,.94));
  border-bottom:1px solid var(--mobile753b8-line);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.mobile753b8-toprow{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--mobile753b8-topbar-h);
  padding:7px 10px;
}
.mobile753b8-brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  text-decoration:none;
}
.mobile753b8-brand img{
  width:36px;
  height:36px;
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius-lg);
  display:block;
  background:var(--mobile753b8-slate-night);
}
.mobile753b8-brand b{
  font-size:16px;
  font-weight:800;
  letter-spacing:.03em;
  color:#FFFFFF;
  white-space:nowrap;
}
.mobile753b8-topacts{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
}
.mobile753b8-btn-sm{
  width:auto;
  min-height:44px;
  padding:9px 13px;
  font-size:12.5px;
  letter-spacing:.05em;
}
.mobile753b8-menubtn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:44px;
  height:44px;
  padding:10px 11px;
  background:rgba(64,224,208,.06);
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease, border-color .16s ease;
}
.mobile753b8-menubtn:active{ background:rgba(64,224,208,.16); }
.mobile753b8-mbar{
  display:block;
  height:2px;
  background:var(--mobile753b8-teal);
  transition:transform .2s ease, opacity .2s ease;
}
.mobile753b8-menubtn[aria-expanded="true"] .mobile753b8-mbar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.mobile753b8-menubtn[aria-expanded="true"] .mobile753b8-mbar:nth-child(2){ opacity:0; }
.mobile753b8-menubtn[aria-expanded="true"] .mobile753b8-mbar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- sectioned full-screen menu ---------- */
.mobile753b8-menu{
  position:fixed;
  inset:0;
  z-index:70;
  max-width:430px;
  margin:0 auto;
  padding:calc(var(--mobile753b8-topbar-h) + 14px) 16px 26px;
  background:var(--mobile753b8-veil);
  overflow-y:auto;
  transform:translateY(-102%);
  visibility:hidden;
  transition:transform .28s ease, visibility .28s ease;
}
.mobile753b8-menu.mobile753b8-open{
  transform:translateY(0);
  visibility:visible;
}
.mobile753b8-mgroup{ margin-bottom:20px; }
.mobile753b8-mlabel{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mobile753b8-teal);
}
.mobile753b8-mlabel::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--mobile753b8-line);
}
.mobile753b8-mlink{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:12px 12px;
  border-bottom:1px solid rgba(128,203,196,.14);
  color:#FFFFFF;
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  transition:color .15s ease, padding-left .15s ease;
}
.mobile753b8-mlink:active{ color:var(--mobile753b8-gold); padding-left:16px; }
.mobile753b8-mlink.mobile753b8-on{
  color:var(--mobile753b8-teal);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
}
.mobile753b8-mlink small{
  margin-left:auto;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mobile753b8-teal-soft);
}
.mobile753b8-mcta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:22px;
}
.mobile753b8-mfoot{
  margin-top:18px;
  font-size:11px;
  line-height:1.6;
  color:rgba(178,223,219,.62);
}

/* scroll lock while the sectioned menu is open */
.mobile753b8-noscroll{ overflow:hidden; }

/* ---------- main flow ---------- */
.mobile753b8-main{
  padding:calc(var(--mobile753b8-topbar-h) + 14px) 14px calc(var(--mobile753b8-bnav-h) + 64px + env(safe-area-inset-bottom));
}
.mobile753b8-block{ margin-top:26px; }

/* hero */
.mobile753b8-kicker{
  display:inline-block;
  margin-bottom:10px;
  padding:4px 9px;
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mobile753b8-teal);
}
.mobile753b8-h1{
  font-size:26px;
  line-height:1.22;
  letter-spacing:.01em;
}
.mobile753b8-lead{
  margin-top:12px;
  font-size:14.5px;
  line-height:1.66;
  color:var(--mobile753b8-mist);
}
.mobile753b8-heroacts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:16px;
}

/* section headings: gold tick + heavy caps */
.mobile753b8-h2{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:18.5px;
  line-height:1.3;
  color:#FFFFFF;
}
.mobile753b8-h2::before{
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  align-self:center;
  background:var(--mobile753b8-gold);
}
.mobile753b8-sub{
  margin-top:9px;
  font-size:13.5px;
  line-height:1.62;
  color:var(--mobile753b8-mist);
}

/* ---------- banner carousel ---------- */
.mobile753b8-carousel{
  position:relative;
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--mobile753b8-line);
  border-radius:var(--mobile753b8-radius-lg);
  background:var(--mobile753b8-slate-night);
  touch-action:pan-y;
}
.mobile753b8-track{
  display:flex;
  transition:transform .4s ease;
}
.mobile753b8-slide{
  flex:0 0 100%;
  position:relative;
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mobile753b8-slide img{
  display:block;
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
}
.mobile753b8-slidecap{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-width:72%;
  padding:22px 12px 12px;
  background:linear-gradient(0deg, rgba(21,32,43,.94) 30%, rgba(21,32,43,0));
  font-size:12.5px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.02em;
  text-align:left;
  color:#FFFFFF;
}
.mobile753b8-dots{
  position:absolute;
  right:9px;
  bottom:9px;
  display:flex;
  gap:6px;
}
.mobile753b8-dot{
  width:22px;
  height:8px;
  padding:0;
  border:1px solid var(--mobile753b8-teal-soft);
  border-radius:2px;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease, border-color .16s ease;
}
.mobile753b8-dot.mobile753b8-on{
  background:var(--mobile753b8-gold);
  border-color:var(--mobile753b8-gold);
}

/* ---------- direct answer block ---------- */
.mobile753b8-answer{
  margin-top:14px;
  padding:14px 13px 16px;
  background:rgba(64,224,208,.07);
  border:1px solid var(--mobile753b8-line);
  border-left:4px solid var(--mobile753b8-teal);
  border-radius:var(--mobile753b8-radius);
}
.mobile753b8-answer p{ font-size:14px; line-height:1.68; }
.mobile753b8-steps{
  counter-reset:mobile753b8step;
  margin-top:14px;
}
.mobile753b8-step{
  position:relative;
  counter-increment:mobile753b8step;
  display:flex;
  gap:11px;
  padding:9px 0;
  border-bottom:1px dashed rgba(128,203,196,.22);
  font-size:13.5px;
  line-height:1.55;
}
.mobile753b8-step:last-child{ border-bottom:0; }
.mobile753b8-step::before{
  content:counter(mobile753b8step,decimal-leading-zero);
  flex:0 0 30px;
  align-self:flex-start;
  padding:5px 0 4px;
  border:1px solid var(--mobile753b8-gold);
  border-radius:var(--mobile753b8-radius);
  font-size:12px;
  font-weight:800;
  text-align:center;
  color:var(--mobile753b8-gold);
}

/* ---------- game shelves ---------- */
.mobile753b8-cathead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.mobile753b8-catmeta{
  margin-left:auto;
  flex:0 0 auto;
  padding:3px 8px;
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mobile753b8-teal);
  white-space:nowrap;
}
.mobile753b8-catintro{ margin-bottom:11px; }

/* 320px keeps 4 columns; 375-430px widens to 5 */
.mobile753b8-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
@media (min-width:375px){
  .mobile753b8-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
  }
}
.mobile753b8-tile{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  padding:6px 5px 7px;
  background:var(--mobile753b8-tile-bg);
  border:1px solid var(--mobile753b8-line);
  border-radius:var(--mobile753b8-radius);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.mobile753b8-tile img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:2px;
  background:var(--mobile753b8-slate-night);
}
.mobile753b8-tile span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:27px;
  font-size:10.5px;
  line-height:1.3;
  text-align:center;
  color:var(--mobile753b8-mist);
}
.mobile753b8-tile:active{
  transform:scale(.95);
  border-color:var(--mobile753b8-teal);
  background:rgba(64,224,208,.12);
}

/* ---------- category highlight ledger ---------- */
.mobile753b8-hl{
  margin-top:12px;
  border-top:2px solid var(--mobile753b8-line-strong);
}
.mobile753b8-hl-row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:10px;
  padding:11px 2px;
  border-bottom:1px dashed rgba(128,203,196,.22);
}
.mobile753b8-hl-key{
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mobile753b8-gold);
  padding-top:2px;
}
.mobile753b8-hl-txt{ font-size:13.5px; line-height:1.6; }

/* ---------- game plan (numbered ledger) ---------- */
.mobile753b8-plan{
  counter-reset:mobile753b8plan;
  margin-top:12px;
}
.mobile753b8-planstep{
  position:relative;
  counter-increment:mobile753b8plan;
  padding:0 0 14px 34px;
  border-left:1px solid var(--mobile753b8-line);
  margin-left:11px;
}
.mobile753b8-planstep:last-child{ padding-bottom:2px; }
.mobile753b8-planstep::before{
  content:counter(mobile753b8plan);
  position:absolute;
  left:-11px;
  top:0;
  width:22px;
  height:22px;
  background:var(--mobile753b8-slate-deep);
  border:1px solid var(--mobile753b8-teal);
  border-radius:var(--mobile753b8-radius);
  font-size:11.5px;
  font-weight:800;
  line-height:20px;
  text-align:center;
  color:var(--mobile753b8-teal);
}
.mobile753b8-planstep b{
  display:block;
  margin-bottom:3px;
  font-size:13.5px;
  color:#FFFFFF;
}
.mobile753b8-planstep p{ font-size:13px; line-height:1.6; }

/* ---------- payment module ---------- */
.mobile753b8-paynote{
  margin-top:12px;
  padding:13px 12px;
  background:var(--mobile753b8-tile-bg);
  border:1px solid var(--mobile753b8-line);
  border-radius:var(--mobile753b8-radius);
  font-size:13.5px;
  line-height:1.64;
}
.mobile753b8-chiprow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.mobile753b8-chip{
  padding:7px 11px;
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mobile753b8-teal-soft);
  white-space:nowrap;
}

/* ---------- faq ---------- */
.mobile753b8-qa{
  margin-top:10px;
  border:1px solid var(--mobile753b8-line);
  border-radius:var(--mobile753b8-radius);
  background:var(--mobile753b8-tile-bg);
}
.mobile753b8-q{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 12px;
  min-height:48px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5;
  color:#FFFFFF;
  cursor:pointer;
  list-style:none;
}
.mobile753b8-q::-webkit-details-marker{ display:none; }
.mobile753b8-q::after{
  content:"+";
  margin-left:auto;
  flex:0 0 auto;
  font-size:18px;
  font-weight:800;
  color:var(--mobile753b8-gold);
  transition:transform .18s ease;
}
.mobile753b8-qa[open] .mobile753b8-q::after{ transform:rotate(45deg); }
.mobile753b8-a{
  padding:0 12px 14px;
  font-size:13px;
  line-height:1.66;
  color:var(--mobile753b8-mist);
}

/* ---------- pros and limits split ---------- */
.mobile753b8-split{
  margin-top:12px;
  display:grid;
  gap:12px;
}
.mobile753b8-splitcol{
  padding:13px 12px;
  border-radius:var(--mobile753b8-radius);
}
.mobile753b8-good{
  background:rgba(64,224,208,.08);
  border:1px solid var(--mobile753b8-line-strong);
  border-left:4px solid var(--mobile753b8-teal);
}
.mobile753b8-limit{
  background:rgba(255,215,0,.06);
  border:1px solid rgba(255,215,0,.4);
  border-left:4px solid var(--mobile753b8-gold);
}
.mobile753b8-splitcol h3{
  margin-bottom:8px;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#FFFFFF;
}
.mobile753b8-splitlist li{
  position:relative;
  padding:5px 0 5px 16px;
  font-size:13px;
  line-height:1.58;
}
.mobile753b8-splitlist li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:7px;
  height:2px;
  background:currentColor;
}
.mobile753b8-good .mobile753b8-splitlist{ color:var(--mobile753b8-mist); }
.mobile753b8-good .mobile753b8-splitlist li::before{ background:var(--mobile753b8-teal); }
.mobile753b8-limit .mobile753b8-splitlist li::before{ background:var(--mobile753b8-gold); }

/* ---------- extended footer ---------- */
.mobile753b8-xfoot{
  margin-top:34px;
  padding-top:18px;
  border-top:2px solid var(--mobile753b8-line-strong);
}
.mobile753b8-xf-label{
  margin:18px 0 9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mobile753b8-teal);
}
.mobile753b8-xf-label:first-child{ margin-top:0; }
.mobile753b8-xf-promos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.mobile753b8-xf-promo{
  min-height:52px;
  padding:9px 10px;
  background:rgba(64,224,208,.06);
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius);
  font-size:11.5px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.03em;
  text-align:center;
  color:var(--mobile753b8-mist);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .16s ease, color .16s ease, transform .12s ease;
}
.mobile753b8-xf-promo:active{
  transform:scale(.97);
  border-color:var(--mobile753b8-gold);
  color:#FFFFFF;
}
.mobile753b8-xf-brand{
  font-size:12.5px;
  line-height:1.68;
  color:rgba(178,223,219,.86);
}
.mobile753b8-xf-dir{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
}
.mobile753b8-xf-link{
  font-size:12.5px;
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:rgba(128,203,196,.5);
  text-underline-offset:4px;
  white-space:nowrap;
}
.mobile753b8-xf-link:active{ color:var(--mobile753b8-gold); }
.mobile753b8-xf-note{
  margin-top:14px;
  padding:11px 12px;
  border:1px dashed rgba(255,215,0,.42);
  border-radius:var(--mobile753b8-radius);
  font-size:11.5px;
  line-height:1.62;
  color:rgba(178,223,219,.8);
}

/* ---------- legal line ---------- */
.mobile753b8-legal{
  margin-top:22px;
  padding-top:12px;
  border-top:1px solid rgba(128,203,196,.16);
  text-align:center;
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(178,223,219,.6);
}

/* ---------- bottom navigation, center raised ---------- */
.mobile753b8-bnav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  z-index:65;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:end;
  min-height:calc(var(--mobile753b8-bnav-h) + env(safe-area-inset-bottom));
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(42,59,76,.97), var(--mobile753b8-slate-night));
  border-top:1px solid var(--mobile753b8-line-strong);
}
.mobile753b8-bnav-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  min-height:48px;
  padding:6px 2px 3px;
  background:none;
  border:0;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  color:var(--mobile753b8-mist);
}
.mobile753b8-bnav-item svg{
  width:22px;
  height:22px;
  transition:transform .15s ease, color .15s ease;
}
.mobile753b8-bnav-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(178,223,219,.78);
  transition:color .16s ease, letter-spacing .16s ease;
  white-space:nowrap;
}
.mobile753b8-bnav-item::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:2px;
  background:var(--mobile753b8-teal);
  transition:width .18s ease;
}
.mobile753b8-bnav-item.mobile753b8-on{ color:var(--mobile753b8-teal); }
.mobile753b8-bnav-item.mobile753b8-on .mobile753b8-bnav-label{
  color:var(--mobile753b8-gold);
  letter-spacing:.09em;
}
.mobile753b8-bnav-item.mobile753b8-on::after{ width:26px; }
.mobile753b8-bnav-item:active svg{ transform:translateY(-2px) scale(1.08); }

/* raised center promo */
.mobile753b8-bnav-cta{ padding-top:0; }
.mobile753b8-ctaring{
  width:54px;
  height:54px;
  margin-top:-30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg, var(--mobile753b8-gold), var(--mobile753b8-gold-deep));
  color:#223140;
  box-shadow:0 8px 18px rgba(8,15,22,.55), 0 0 0 5px var(--mobile753b8-slate-night);
  transition:transform .15s ease;
}
.mobile753b8-bnav-cta:active .mobile753b8-ctaring{ transform:translateY(2px) scale(.95); }
.mobile753b8-bnav-cta svg{ width:26px; height:26px; }

/* wide-screen dressing: keep the phone canvas, dim the shoulders */
@media (min-width:431px){
  body{
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(64,224,208,.07), rgba(27,40,51,0) 70%),
      var(--mobile753b8-page-ink);
  }
}

/* motion budget: light press + color shifts only */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- help-page layouts: app route and play route stay distinct ---------- */
.mobile753b8-appintro{
  display:grid;
  gap:12px;
  margin-top:15px;
}
.mobile753b8-appfact{
  padding:13px 12px;
  border:1px solid var(--mobile753b8-line-strong);
  border-left:4px solid var(--mobile753b8-gold);
  background:rgba(255,215,0,.055);
  border-radius:var(--mobile753b8-radius);
  font-size:13.5px;
  line-height:1.65;
}
.mobile753b8-appgrid{
  display:grid;
  gap:9px;
  margin-top:12px;
}
.mobile753b8-appcard{
  padding:12px;
  border:1px solid var(--mobile753b8-line);
  background:var(--mobile753b8-tile-bg);
  border-radius:var(--mobile753b8-radius);
}
.mobile753b8-appcard h3,
.mobile753b8-routecard h3{
  margin-bottom:5px;
  font-size:14px;
  line-height:1.35;
  color:#FFFFFF;
}
.mobile753b8-appcard p,
.mobile753b8-routecard p{
  font-size:13px;
  line-height:1.64;
}
.mobile753b8-appcard strong{ color:var(--mobile753b8-gold); }
.mobile753b8-appcheck{
  margin-top:11px;
  padding-left:18px;
  list-style:disc;
}
.mobile753b8-appcheck li{
  margin:5px 0;
  font-size:13px;
  line-height:1.55;
}
.mobile753b8-callout{
  margin-top:12px;
  padding:12px;
  border:1px dashed var(--mobile753b8-gold);
  color:var(--mobile753b8-mist);
  font-size:13px;
  line-height:1.65;
}
.mobile753b8-route{
  margin-top:13px;
  border-top:2px solid var(--mobile753b8-line-strong);
}
.mobile753b8-routecard{
  position:relative;
  padding:14px 10px 14px 42px;
  border-bottom:1px dashed rgba(128,203,196,.25);
}
.mobile753b8-routecard::before{
  content:attr(data-step);
  position:absolute;
  left:0;
  top:15px;
  width:27px;
  height:27px;
  border:1px solid var(--mobile753b8-teal);
  background:var(--mobile753b8-slate-deep);
  color:var(--mobile753b8-teal);
  border-radius:var(--mobile753b8-radius);
  font-size:11px;
  font-weight:800;
  line-height:25px;
  text-align:center;
}
.mobile753b8-decision{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.mobile753b8-decision div{
  padding:11px 12px;
  border-left:3px solid var(--mobile753b8-teal-soft);
  background:rgba(128,203,196,.07);
  font-size:13px;
  line-height:1.6;
}
.mobile753b8-decision b{ color:#FFFFFF; }
.mobile753b8-supportstrip{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.mobile753b8-supportstrip a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 10px;
  border:1px solid var(--mobile753b8-line-strong);
  border-radius:var(--mobile753b8-radius);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.mobile753b8-brief{
  margin-top:12px;
  padding:12px;
  background:rgba(64,224,208,.06);
  border:1px solid var(--mobile753b8-line);
  font-size:13px;
  line-height:1.66;
}
@media (min-width:390px){
  .mobile753b8-appgrid{ grid-template-columns:1fr 1fr; }
  .mobile753b8-appcard:last-child{ grid-column:1 / -1; }
}