/* ==========================================================================
   Gamezone Games - shell stylesheet (gamezone-games.homes)
   Mobile-first canvas: 320-430px phone frame, centered on wide screens.
   Palette anchors: #FAF0E6 cream | #008B8B teal | #00695C deep teal
                    #1B263B navy (page base) | #00FFFF cyan (signal accent)
   Class prefix .... mobile490b9-
   Direction ...... stroke-led corners, light floating image cards,
                    bold condensed headings over light body text,
                    full-width primary CTAs, icon-state micro motion only.
   ========================================================================== */

:root{
  --mobile490b9-navy:        #1B263B;
  --mobile490b9-cream:       #FAF0E6;
  --mobile490b9-teal:        #008B8B;
  --mobile490b9-teal-deep:   #00695C;
  --mobile490b9-cyan:        #00FFFF;

  /* Derived tints stay inside the five anchor hues */
  --mobile490b9-page:        #131C2D;
  --mobile490b9-panel:       rgba(250,240,230,.035);
  --mobile490b9-panel-strong:rgba(250,240,230,.06);
  --mobile490b9-line:        rgba(0,255,255,.16);
  --mobile490b9-line-strong: rgba(0,255,255,.34);
  --mobile490b9-ink-soft:    rgba(250,240,230,.62);
  --mobile490b9-ink-mute:    rgba(250,240,230,.42);
  --mobile490b9-shadow:      0 10px 26px rgba(4,10,20,.55);
  --mobile490b9-head-font:   "Chakra Petch","Arial Narrow",Arial,sans-serif;
  --mobile490b9-body-font:   "Inter","Helvetica Neue",Arial,sans-serif;
  --mobile490b9-r-soft:      4px;   /* restrained stroke-led rounding */
  --mobile490b9-r-tile:      6px;
  --mobile490b9-tap:         44px;  /* minimum touch target */
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--mobile490b9-body-font);
  font-size:14px;
  line-height:1.6;
  color:var(--mobile490b9-cream);
  background:
    radial-gradient(120% 60% at 50% 0, rgba(0,139,139,.16), transparent 60%),
    linear-gradient(180deg, #16203A 0%, var(--mobile490b9-page) 100%);
  min-height:100vh;
  word-wrap:break-word;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:var(--mobile490b9-cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{
  font-family:var(--mobile490b9-head-font);
  line-height:1.22;
  margin:0;
  letter-spacing:.01em;
}
p{margin:0 0 10px}
ul{margin:0;padding:0;list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--mobile490b9-cyan);outline-offset:2px;border-radius:var(--mobile490b9-r-soft)}
::selection{background:rgba(0,255,255,.28);color:var(--mobile490b9-cream)}

.mobile490b9-srOnly{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.mobile490b9-skipLink{
  position:absolute;left:10px;top:-48px;z-index:120;
  padding:10px 14px;background:var(--mobile490b9-cyan);color:var(--mobile490b9-navy);
  font-weight:700;border-radius:var(--mobile490b9-r-soft);transition:top .18s ease;
}
.mobile490b9-skipLink:focus{top:8px}

/* ---------- phone canvas ---------- */
.mobile490b9-shell{
  position:relative;
  width:100%;
  max-width:430px;              /* literal phone-canvas ceiling */
  margin:0 auto;
  min-height:100vh;
  background:var(--mobile490b9-navy);
  box-shadow:0 0 0 1px rgba(0,255,255,.10), 0 0 60px rgba(0,0,0,.5);
  overflow-x:clip;
}
@media (min-width:480px){
  .mobile490b9-shell{border-radius:0 0 14px 14px}
}

/* ==========================================================================
   Top bar - asymmetric brand plate + separate action lane
   ========================================================================== */
.mobile490b9-topbar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:60;
  background:linear-gradient(180deg,#182238 0%,#141D31 100%);
  box-shadow:0 1px 0 rgba(0,255,255,.14), 0 8px 18px rgba(4,10,20,.45);
}
.mobile490b9-topInner{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px 8px 8px;min-height:56px;
}
/* brand plate: angled teal block carrying logo + name only */
.mobile490b9-brandPlate{
  display:flex;align-items:center;gap:8px;
  padding:7px 22px 7px 9px;
  background:linear-gradient(135deg,var(--mobile490b9-teal-deep) 0%,var(--mobile490b9-teal) 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);
  min-height:44px;min-width:0;flex:1 1 auto;
}
.mobile490b9-brandPlate img{
  width:30px;height:30px;flex:0 0 30px;
  border-radius:3px;background:rgba(250,240,230,.14);
  border:1px solid rgba(250,240,230,.35);
  object-fit:cover;
}
.mobile490b9-brandName{
  font-family:var(--mobile490b9-head-font);
  font-weight:700;font-size:15px;line-height:1.05;
  color:var(--mobile490b9-cream);white-space:nowrap;
  display:flex;flex-direction:column;letter-spacing:.03em;
}
.mobile490b9-brandName small{
  font-size:9.5px;font-weight:600;letter-spacing:.34em;
  color:rgba(250,240,230,.78);
}
/* action lane sits outside the brand plate */
.mobile490b9-actLane{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.mobile490b9-btnRegister{
  min-height:38px;padding:7px 12px;
  background:var(--mobile490b9-cyan);color:#082626;
  font-family:var(--mobile490b9-head-font);font-weight:700;font-size:12px;
  letter-spacing:.04em;border-radius:var(--mobile490b9-r-soft);
  border:1px solid rgba(250,240,230,.4);
  box-shadow:0 3px 0 rgba(0,105,92,.9);
  transition:transform .12s ease, box-shadow .12s ease;
}
.mobile490b9-btnRegister:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,105,92,.9)}
.mobile490b9-btnLogin{
  min-height:38px;padding:7px 10px;
  border:1px solid var(--mobile490b9-line-strong);border-radius:var(--mobile490b9-r-soft);
  color:var(--mobile490b9-cream);font-family:var(--mobile490b9-head-font);
  font-weight:600;font-size:12px;letter-spacing:.04em;background:rgba(250,240,230,.05);
  transition:border-color .12s ease, background .12s ease;
}
.mobile490b9-btnLogin:active{border-color:var(--mobile490b9-cyan);background:rgba(0,255,255,.12)}
/* menu tile: three bars morph into an X */
.mobile490b9-menuTile{
  width:40px;height:38px;flex:0 0 40px;
  border:1px solid var(--mobile490b9-line);border-radius:var(--mobile490b9-r-soft);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  background:rgba(250,240,230,.05);transition:border-color .15s ease;
}
.mobile490b9-menuTile span{
  width:16px;height:2px;background:var(--mobile490b9-cyan);border-radius:1px;
  transition:transform .2s ease, opacity .15s ease;
}
.mobile490b9-menuTile.is-open{border-color:var(--mobile490b9-cyan)}
.mobile490b9-menuTile.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile490b9-menuTile.is-open span:nth-child(2){opacity:0}
.mobile490b9-menuTile.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* cyan underline runs under the action lane only - asymmetry cue */
.mobile490b9-topbar::after{
  content:"";position:absolute;left:44%;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--mobile490b9-teal),var(--mobile490b9-cyan));
}

/* ---------- compact route panel ---------- */
.mobile490b9-routePanel{
  position:absolute;top:calc(100% + 2px);left:8px;right:8px;
  background:#101a2e;border:1px solid var(--mobile490b9-line-strong);
  border-radius:var(--mobile490b9-r-tile);box-shadow:var(--mobile490b9-shadow);
  padding:8px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.mobile490b9-routePanel.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.mobile490b9-routeGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mobile490b9-routeItem{
  display:flex;align-items:center;gap:8px;min-height:42px;
  padding:6px 8px;border:1px solid rgba(0,255,255,.10);border-radius:var(--mobile490b9-r-soft);
  color:var(--mobile490b9-cream);background:rgba(250,240,230,.03);
  transition:border-color .12s ease, background .12s ease;
}
.mobile490b9-routeItem:hover{text-decoration:none;border-color:var(--mobile490b9-cyan)}
.mobile490b9-routeItem svg{width:18px;height:18px;flex:0 0 18px;color:var(--mobile490b9-cyan)}
.mobile490b9-routeItem b{
  font-family:var(--mobile490b9-head-font);font-weight:600;font-size:12px;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mobile490b9-routeItem i{
  margin-left:auto;font-style:normal;font-size:9px;color:var(--mobile490b9-ink-mute);
  font-family:var(--mobile490b9-head-font);letter-spacing:.08em;
}
.mobile490b9-routeItem.is-cur{
  border-color:var(--mobile490b9-cyan);background:rgba(0,255,255,.09);
}
.mobile490b9-routeItem.is-cur b{color:var(--mobile490b9-cyan)}

/* ==========================================================================
   Layout flow
   ========================================================================== */
.mobile490b9-main{
  padding:calc(60px + env(safe-area-inset-top,0px)) 14px
           calc(92px + env(safe-area-inset-bottom,0px));
}
.mobile490b9-sec{margin:0 0 26px}

/* ---------- hero ---------- */
.mobile490b9-hero{padding:16px 2px 4px}
.mobile490b9-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mobile490b9-head-font);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mobile490b9-cyan);
  border:1px solid var(--mobile490b9-line);border-radius:3px;
  padding:4px 8px;margin-bottom:10px;background:rgba(0,255,255,.05);
}
.mobile490b9-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:1px;
  background:var(--mobile490b9-cyan);box-shadow:0 0 8px var(--mobile490b9-cyan);
}
.mobile490b9-hero h1{
  font-size:26px;font-weight:700;letter-spacing:.01em;margin-bottom:10px;
  text-shadow:0 2px 14px rgba(0,139,139,.5);
}
.mobile490b9-hero h1 em{
  font-style:normal;color:var(--mobile490b9-cyan);
}
.mobile490b9-lead{font-size:13.5px;color:rgba(250,240,230,.86)}
.mobile490b9-heroCta{margin:14px 0 8px}
.mobile490b9-ctaMain{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:50px;
  background:linear-gradient(180deg,#2BFFF6 0%,var(--mobile490b9-cyan) 55%,#00D9D9 100%);
  color:#06302E;font-family:var(--mobile490b9-head-font);
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(250,240,230,.55);border-radius:var(--mobile490b9-r-tile);
  box-shadow:0 4px 0 var(--mobile490b9-teal-deep), 0 10px 24px rgba(0,255,255,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}
.mobile490b9-ctaMain:active{transform:translateY(3px);box-shadow:0 1px 0 var(--mobile490b9-teal-deep)}
.mobile490b9-ctaMain svg{width:16px;height:16px}
.mobile490b9-ctaAside{
  text-align:center;font-size:11.5px;color:var(--mobile490b9-ink-soft);margin-top:8px;
}
.mobile490b9-trustRow{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;
}
.mobile490b9-trustChip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;letter-spacing:.04em;color:rgba(250,240,230,.8);
  border:1px solid rgba(250,240,230,.16);border-radius:3px;
  padding:4px 8px;background:rgba(250,240,230,.03);
}
.mobile490b9-trustChip svg{width:11px;height:11px;color:var(--mobile490b9-cyan)}

/* ==========================================================================
   Banner carousel
   ========================================================================== */
.mobile490b9-carousel{
  position:relative;border:1px solid var(--mobile490b9-line);
  border-radius:8px;overflow:hidden;background:#0E1727;
  box-shadow:var(--mobile490b9-shadow);
}
.mobile490b9-csViewport{overflow:hidden}
.mobile490b9-csTrack{display:flex;width:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.mobile490b9-csSlide{position:relative;flex:0 0 100%;aspect-ratio:16/9}
.mobile490b9-csBtn{
  position:absolute;inset:0;width:100%;
  display:block;text-align:left;
}
.mobile490b9-csBtn img{width:100%;height:100%;object-fit:cover}
.mobile490b9-csCap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 12px 10px;
  background:linear-gradient(180deg,transparent 0%,rgba(9,15,28,.86) 62%,rgba(9,15,28,.95) 100%);
  display:flex;flex-direction:column;gap:2px;pointer-events:none;
}
.mobile490b9-csCap b{
  font-family:var(--mobile490b9-head-font);font-size:14.5px;
  color:var(--mobile490b9-cream);letter-spacing:.02em;
}
.mobile490b9-csCap span{font-size:10.5px;color:var(--mobile490b9-cyan);letter-spacing:.1em;text-transform:uppercase}
.mobile490b9-csDots{
  position:absolute;right:10px;bottom:8px;z-index:5;
  display:flex;gap:6px;
}
.mobile490b9-csDot{
  width:22px;height:14px;display:flex;align-items:center;justify-content:center;
}
.mobile490b9-csDot::before{
  content:"";width:7px;height:7px;border-radius:2px;
  background:rgba(250,240,230,.4);border:1px solid rgba(250,240,230,.3);
  transition:background .15s ease, transform .15s ease;
}
.mobile490b9-csDot[aria-current="true"]::before{
  background:var(--mobile490b9-cyan);border-color:var(--mobile490b9-cyan);
  transform:scale(1.18);
}
.mobile490b9-csEdge{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--mobile490b9-cream);background:rgba(9,15,28,.55);
  border:1px solid rgba(0,255,255,.22);z-index:5;
}
.mobile490b9-csEdge svg{width:14px;height:14px}
.mobile490b9-csPrev{left:4px;border-radius:0 4px 4px 0}
.mobile490b9-csNext{right:4px;border-radius:4px 0 0 4px}
.mobile490b9-csEdge:active{background:rgba(0,255,255,.22)}

/* ==========================================================================
   Section headings
   ========================================================================== */
.mobile490b9-secHead{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 8px;padding-left:10px;position:relative;
}
.mobile490b9-secHead::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;
  background:linear-gradient(180deg,var(--mobile490b9-cyan),var(--mobile490b9-teal));
  border-radius:2px;
}
.mobile490b9-secHead h2{
  font-size:18.5px;font-weight:700;color:var(--mobile490b9-cream);
  flex:1 1 auto;min-width:0;
}
.mobile490b9-countChip{
  font-family:var(--mobile490b9-head-font);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;color:var(--mobile490b9-cyan);
  border:1px solid var(--mobile490b9-line-strong);border-radius:3px;
  padding:2px 6px;white-space:nowrap;
}
.mobile490b9-secIntro{font-size:12.5px;color:var(--mobile490b9-ink-soft);margin:0 0 12px}

/* ==========================================================================
   Game grids - light floating tiles
   ========================================================================== */
.mobile490b9-gameGrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.mobile490b9-gameCard{
  display:flex;flex-direction:column;gap:5px;
  padding:6px 5px 7px;
  background:linear-gradient(180deg,rgba(250,240,230,.055) 0%,rgba(250,240,230,.025) 100%);
  border:1px solid rgba(0,255,255,.15);border-radius:var(--mobile490b9-r-tile);
  box-shadow:inset 0 1px 0 rgba(250,240,230,.08), 0 5px 12px rgba(4,10,20,.34);
  text-align:center;position:relative;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.mobile490b9-gameCard img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:4px;border:1px solid rgba(250,240,230,.1);
  background:#0E1727;
  transition:transform .14s ease;
}
.mobile490b9-gameCard b{
  font-weight:500;font-size:10px;line-height:1.28;color:rgba(250,240,230,.92);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:26px;
}
.mobile490b9-gameCard::after{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,255,.55),transparent);
  opacity:.5;transition:opacity .14s ease;
}
.mobile490b9-gameCard:active{
  border-color:var(--mobile490b9-cyan);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(250,240,230,.1), 0 9px 18px rgba(0,0,0,.45);
}
.mobile490b9-gameCard:active img{transform:scale(.97)}
.mobile490b9-gameCard:active::after{opacity:1}
@media (hover:hover){
  .mobile490b9-gameCard:hover{border-color:var(--mobile490b9-line-strong)}
}
@media (min-width:400px){
  .mobile490b9-gameGrid{grid-template-columns:repeat(5,1fr);gap:9px}
}

/* ---------- category value strip ---------- */
.mobile490b9-catStrip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:0 0 26px;
}
.mobile490b9-catCell{
  display:flex;align-items:center;gap:9px;padding:10px;
  border:1px solid rgba(250,240,230,.13);border-radius:var(--mobile490b9-r-tile);
  background:rgba(250,240,230,.03);
}
.mobile490b9-catCell:nth-child(2n){border-color:rgba(0,139,139,.4)}
.mobile490b9-catCell svg{width:20px;height:20px;flex:0 0 20px;color:var(--mobile490b9-cyan)}
.mobile490b9-catCell div{min-width:0}
.mobile490b9-catCell b{
  display:block;font-family:var(--mobile490b9-head-font);font-size:12px;
  letter-spacing:.03em;color:var(--mobile490b9-cream);
}
.mobile490b9-catCell span{font-size:10px;color:var(--mobile490b9-ink-soft)}

/* ==========================================================================
   Content modules - each block keeps its own rhythm
   ========================================================================== */

/* steps rail */
.mobile490b9-steps{position:relative;padding-left:2px}
.mobile490b9-step{
  display:flex;gap:11px;padding:0 0 14px;position:relative;
}
.mobile490b9-step:last-child{padding-bottom:2px}
.mobile490b9-stepNo{
  flex:0 0 30px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mobile490b9-head-font);font-weight:700;font-size:13px;
  color:var(--mobile490b9-cyan);border:1px solid var(--mobile490b9-line-strong);
  border-radius:4px;background:rgba(0,255,255,.05);position:relative;z-index:2;
}
.mobile490b9-step:not(:last-child) .mobile490b9-stepNo::after{
  content:"";position:absolute;left:50%;top:100%;bottom:-14px;width:1px;
  transform:translateX(-50%);background:rgba(0,255,255,.2);z-index:-1;
}
.mobile490b9-stepBody{flex:1;min-width:0;padding-top:3px}
.mobile490b9-stepBody b{
  display:block;font-family:var(--mobile490b9-head-font);font-size:13px;
  color:var(--mobile490b9-cream);letter-spacing:.02em;margin-bottom:2px;
}
.mobile490b9-stepBody p{font-size:12px;color:rgba(250,240,230,.78);margin:0}

/* trick list */
.mobile490b9-trickList{display:flex;flex-direction:column;gap:8px}
.mobile490b9-trick{
  border-left:2px solid var(--mobile490b9-teal);
  padding:8px 10px;background:var(--mobile490b9-panel);
  border-radius:0 var(--mobile490b9-r-soft) var(--mobile490b9-r-soft) 0;
}
.mobile490b9-trickTag{
  display:inline-block;font-family:var(--mobile490b9-head-font);
  font-size:9px;font-weight:600;letter-spacing:.16em;color:#06302E;
  background:var(--mobile490b9-cyan);border-radius:2px;padding:1px 6px;margin-right:6px;
  vertical-align:1px;
}
.mobile490b9-trick p{display:inline;font-size:12px;color:rgba(250,240,230,.82);margin:0}

/* milestone tiles */
.mobile490b9-mileGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile490b9-mileTile{
  border:1px solid rgba(0,139,139,.42);border-radius:var(--mobile490b9-r-tile);
  background:linear-gradient(180deg,rgba(0,139,139,.12) 0%,rgba(0,139,139,.04) 100%);
  padding:10px 9px;
}
.mobile490b9-mileTile svg{width:18px;height:18px;color:var(--mobile490b9-cyan);margin-bottom:6px}
.mobile490b9-mileTile b{
  display:block;font-family:var(--mobile490b9-head-font);font-size:12px;
  color:var(--mobile490b9-cream);letter-spacing:.02em;margin-bottom:3px;
}
.mobile490b9-mileTile span{font-size:10.5px;color:var(--mobile490b9-ink-soft);line-height:1.45;display:block}

/* selection guide rows */
.mobile490b9-guideRow{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  padding:10px;border:1px solid rgba(250,240,230,.12);border-radius:var(--mobile490b9-r-tile);
  background:var(--mobile490b9-panel);margin-bottom:7px;
}
.mobile490b9-guideRow:last-child{margin-bottom:0}
.mobile490b9-guideGoal b{
  display:block;font-family:var(--mobile490b9-head-font);font-size:11.5px;
  color:var(--mobile490b9-cyan);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px;
}
.mobile490b9-guideGoal span{font-size:11px;color:rgba(250,240,230,.75)}
.mobile490b9-guideArrow{
  width:26px;height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--mobile490b9-line);border-radius:50%;color:var(--mobile490b9-cyan);
}
.mobile490b9-guideArrow svg{width:12px;height:12px}
.mobile490b9-guidePick{font-size:11.5px;color:rgba(250,240,230,.85);line-height:1.5}
.mobile490b9-guidePick b{color:var(--mobile490b9-cream)}

/* pros / limits */
.mobile490b9-pnlWrap{display:flex;flex-direction:column;gap:10px}
.mobile490b9-pnlPanel{
  border-radius:var(--mobile490b9-r-tile);padding:11px 11px 7px;
}
.mobile490b9-pnlPanel h3{
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;margin-bottom:8px;
}
.mobile490b9-pnlPanel h3 svg{width:15px;height:15px}
.mobile490b9-pnlGood{border:1px solid rgba(0,255,255,.34);background:rgba(0,139,139,.1)}
.mobile490b9-pnlGood h3{color:var(--mobile490b9-cyan)}
.mobile490b9-pnlHold{border:1px dashed rgba(250,240,230,.26);background:rgba(250,240,230,.03)}
.mobile490b9-pnlHold h3{color:rgba(250,240,230,.72)}
.mobile490b9-pnlPanel li{
  position:relative;padding:0 0 8px 18px;
  font-size:12px;color:rgba(250,240,230,.8);line-height:1.5;
}
.mobile490b9-pnlPanel li::before{
  position:absolute;left:0;top:0;font-family:var(--mobile490b9-head-font);
  font-weight:700;font-size:12px;
}
.mobile490b9-pnlGood li::before{content:"+";color:var(--mobile490b9-cyan)}
.mobile490b9-pnlHold li::before{content:"\2013";color:rgba(250,240,230,.5)}

/* FAQ */
.mobile490b9-faq{display:flex;flex-direction:column;gap:7px}
.mobile490b9-faqItem{
  border:1px solid rgba(250,240,230,.13);border-radius:var(--mobile490b9-r-tile);
  background:var(--mobile490b9-panel);overflow:hidden;
}
.mobile490b9-faqItem summary{
  display:flex;align-items:center;gap:10px;min-height:46px;
  padding:10px 11px;cursor:pointer;list-style:none;
  font-family:var(--mobile490b9-head-font);font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--mobile490b9-cream);
}
.mobile490b9-faqItem summary::-webkit-details-marker{display:none}
.mobile490b9-faqItem summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--mobile490b9-line-strong);border-radius:4px;
  color:var(--mobile490b9-cyan);font-size:14px;transition:transform .18s ease;
}
.mobile490b9-faqItem[open] summary::after{transform:rotate(45deg)}
.mobile490b9-faqItem p{padding:0 12px 12px;font-size:12px;color:rgba(250,240,230,.78);margin:0}

/* text link style used inside prose */
.mobile490b9-inlineLink{
  color:var(--mobile490b9-cyan);text-decoration:underline;
  text-decoration-color:rgba(0,255,255,.45);text-underline-offset:2px;
}
.mobile490b9-inlineLink:active{color:#8FFFFF}

/* ==========================================================================
   Extended footer (home-only): brand > directory > promotions > disclaimer
   ========================================================================== */
.mobile490b9-extFooter{
  margin:30px 0 0;border-top:2px solid rgba(0,139,139,.55);
  background:linear-gradient(180deg,rgba(0,105,92,.14) 0%,rgba(10,16,30,.5) 55%);
  border-radius:0 0 10px 10px;padding:16px 13px 14px;
}
.mobile490b9-extBrand p{
  font-size:12px;color:rgba(250,240,230,.8);margin:0;
}
.mobile490b9-extLabel{
  font-family:var(--mobile490b9-head-font);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mobile490b9-cyan);
  display:flex;align-items:center;gap:8px;margin:18px 0 9px;
}
.mobile490b9-extLabel::after{content:"";flex:1;height:1px;background:rgba(0,255,255,.16)}
.mobile490b9-extDir{
  display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;
}
.mobile490b9-extDir a{
  display:flex;align-items:center;gap:6px;min-height:32px;
  font-size:11.5px;color:rgba(250,240,230,.85);
  border-bottom:1px dotted rgba(250,240,230,.16);
}
.mobile490b9-extDir a::before{
  content:"";width:5px;height:5px;flex:0 0 5px;
  background:var(--mobile490b9-teal);border-radius:1px;
}
.mobile490b9-extDir a:hover{color:var(--mobile490b9-cyan);text-decoration:none}
.mobile490b9-promoList{display:flex;flex-direction:column;gap:6px}
.mobile490b9-promoAct{
  display:flex;align-items:center;gap:9px;width:100%;min-height:44px;
  padding:9px 11px;text-align:left;
  border:1px solid rgba(0,255,255,.24);border-radius:var(--mobile490b9-r-soft);
  background:linear-gradient(90deg,rgba(0,255,255,.1) 0%,rgba(0,139,139,.08) 100%);
  color:var(--mobile490b9-cream);font-size:12px;font-weight:500;
  transition:border-color .12s ease, transform .12s ease;
}
.mobile490b9-promoAct:active{border-color:var(--mobile490b9-cyan);transform:translateX(2px)}
.mobile490b9-promoAct svg{width:15px;height:15px;flex:0 0 15px;color:var(--mobile490b9-cyan)}
.mobile490b9-promoAct b{font-weight:600}
.mobile490b9-promoAct i{
  margin-left:auto;font-style:normal;color:var(--mobile490b9-cyan);
  font-family:var(--mobile490b9-head-font);font-size:11px;letter-spacing:.06em;
}
.mobile490b9-extDisclaimer{
  margin-top:16px;padding-top:10px;border-top:1px solid rgba(250,240,230,.12);
  font-size:10.5px;line-height:1.55;color:var(--mobile490b9-ink-mute);
}

/* ==========================================================================
   Common footer + segmented bottom action bar
   ========================================================================== */
.mobile490b9-footer{
  padding:14px 0 6px;text-align:center;
  font-size:10.5px;color:var(--mobile490b9-ink-mute);letter-spacing:.03em;
}
.mobile490b9-footer b{color:rgba(250,240,230,.6);font-weight:600}
.mobile490b9-bottomNav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:80;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(13,20,35,.97);
  border-top:1px solid rgba(0,255,255,.22);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 22px rgba(4,10,20,.5);
}
.mobile490b9-navSeg{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:48px;padding:4px 2px;border-radius:var(--mobile490b9-r-soft);
  transition:background .14s ease;
}
.mobile490b9-navSeg + .mobile490b9-navSeg::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:rgba(250,240,230,.14);
}
.mobile490b9-navIcon{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,255,255,.3);border-radius:6px;
  color:var(--mobile490b9-cyan);background:rgba(0,255,255,.04);
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.mobile490b9-navIcon svg{width:14px;height:14px;display:block}
.mobile490b9-navSeg b{
  font-family:var(--mobile490b9-head-font);font-size:9.5px;font-weight:600;
  letter-spacing:.05em;color:rgba(250,240,230,.82);white-space:nowrap;
}
.mobile490b9-navSeg:active .mobile490b9-navIcon{transform:translateY(-2px) scale(1.06)}
.mobile490b9-navSeg.is-current{
  background:var(--mobile490b9-cyan);
}
.mobile490b9-navSeg.is-current .mobile490b9-navIcon{
  background:var(--mobile490b9-navy);color:var(--mobile490b9-cyan);
  border-color:transparent;transform:none;
}
.mobile490b9-navSeg.is-current b{color:#06302E}
.mobile490b9-navSeg.is-current + .mobile490b9-navSeg::before{display:none}
.mobile490b9-navSeg.is-current::before{display:none}

/* ==========================================================================
   Motion discipline - micro state changes only
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* wide-screen framing stays inside the same phone canvas */
@media (min-width:480px){
  body{background:
    radial-gradient(120% 50% at 50% 0, rgba(0,139,139,.12), transparent 55%),
    linear-gradient(180deg,#101828 0%,#0C1322 100%);
  }
}

/* ---------- help-page compositions: distinct editorial layouts ---------- */
.mobile490b9-helpIntro{padding:16px 2px 8px;border-bottom:1px solid var(--mobile490b9-line)}
.mobile490b9-helpIntro h1{font-size:25px;margin-bottom:10px;color:var(--mobile490b9-cream)}
.mobile490b9-helpIntro h1 strong{color:var(--mobile490b9-cyan);font-weight:700}
.mobile490b9-helpLead{font-size:13px;color:rgba(250,240,230,.82);margin:0}
.mobile490b9-helpMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:13px}
.mobile490b9-helpMeta div{padding:8px 6px;border-top:2px solid var(--mobile490b9-teal);background:rgba(250,240,230,.04);text-align:center}
.mobile490b9-helpMeta b{display:block;font-family:var(--mobile490b9-head-font);font-size:11px;color:var(--mobile490b9-cyan)}
.mobile490b9-helpMeta span{display:block;font-size:9.5px;color:var(--mobile490b9-ink-soft);line-height:1.3}
.mobile490b9-promoRail{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:5px 0 25px}
.mobile490b9-promoRail button{min-height:50px;padding:8px 9px;text-align:left;border:1px solid rgba(0,255,255,.25);border-radius:var(--mobile490b9-r-soft);background:rgba(0,139,139,.10);color:var(--mobile490b9-cream);font-size:11px;line-height:1.3}
.mobile490b9-promoRail button:first-child{grid-column:1/-1;background:linear-gradient(90deg,rgba(0,255,255,.18),rgba(0,139,139,.12));font-family:var(--mobile490b9-head-font);font-size:13px}
.mobile490b9-promoRail button:active{border-color:var(--mobile490b9-cyan);transform:translateY(1px)}
.mobile490b9-promoRail small{display:block;color:var(--mobile490b9-cyan);font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.mobile490b9-timeline{display:flex;flex-direction:column;gap:0;border-left:1px solid rgba(0,255,255,.32);margin:4px 0 0 8px}
.mobile490b9-timeline article{position:relative;padding:0 0 17px 18px}
.mobile490b9-timeline article::before{content:"";position:absolute;left:-6px;top:3px;width:11px;height:11px;border:2px solid var(--mobile490b9-cyan);background:var(--mobile490b9-navy);border-radius:50%}
.mobile490b9-timeline h3{font-size:13px;color:var(--mobile490b9-cyan);margin-bottom:3px}
.mobile490b9-timeline p{font-size:12px;color:rgba(250,240,230,.78);margin:0}
.mobile490b9-noteBand{padding:12px;border:1px solid rgba(0,255,255,.24);background:linear-gradient(135deg,rgba(0,105,92,.2),rgba(250,240,230,.035));border-radius:var(--mobile490b9-r-tile);margin-top:11px}
.mobile490b9-noteBand b{font-family:var(--mobile490b9-head-font);font-size:13px;color:var(--mobile490b9-cream)}
.mobile490b9-noteBand p{font-size:12px;color:var(--mobile490b9-ink-soft);margin:5px 0 0}
.mobile490b9-helpLinks{display:flex;flex-direction:column;gap:7px}
.mobile490b9-helpLinks a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:9px 11px;border-left:3px solid var(--mobile490b9-teal);background:rgba(250,240,230,.04);color:var(--mobile490b9-cream);font-family:var(--mobile490b9-head-font);font-size:12px}
.mobile490b9-helpLinks a span{font-family:var(--mobile490b9-body-font);font-size:10px;color:var(--mobile490b9-ink-soft);text-align:right;margin-left:8px}
.mobile490b9-helpLinks a:hover{border-left-color:var(--mobile490b9-cyan);text-decoration:none}
.mobile490b9-answerStack{display:flex;flex-direction:column;gap:8px}
.mobile490b9-answer{padding:11px 12px 10px;border:1px solid rgba(250,240,230,.14);border-radius:var(--mobile490b9-r-tile);background:rgba(250,240,230,.03)}
.mobile490b9-answer h3{font-size:13px;color:var(--mobile490b9-cyan);margin-bottom:4px}
.mobile490b9-answer p{font-size:12px;color:rgba(250,240,230,.78);margin:0}
.mobile490b9-featureIntro{padding:16px 2px 4px}
.mobile490b9-featureIntro h1{font-size:25px;margin-bottom:9px}
.mobile490b9-featureIntro p{font-size:13px;color:rgba(250,240,230,.82);margin:0}
.mobile490b9-featureRibbon{display:flex;overflow-x:auto;gap:7px;padding:13px 0 3px;scrollbar-width:none}
.mobile490b9-featureRibbon::-webkit-scrollbar{display:none}
.mobile490b9-featureRibbon span{flex:0 0 auto;padding:6px 9px;border:1px solid var(--mobile490b9-line-strong);border-radius:3px;font-family:var(--mobile490b9-head-font);font-size:10px;color:var(--mobile490b9-cyan);letter-spacing:.06em}
.mobile490b9-checkGrid{display:flex;flex-direction:column;gap:7px}
.mobile490b9-checkItem{display:grid;grid-template-columns:28px 1fr;gap:9px;padding:10px;border:1px solid rgba(250,240,230,.13);background:rgba(250,240,230,.035);border-radius:var(--mobile490b9-r-soft)}
.mobile490b9-checkItem mark{width:25px;height:25px;display:flex;align-items:center;justify-content:center;background:var(--mobile490b9-teal);color:var(--mobile490b9-cream);font-family:var(--mobile490b9-head-font);font-weight:700;border-radius:3px}
.mobile490b9-checkItem h3{font-size:12.5px;color:var(--mobile490b9-cream);margin-bottom:2px}
.mobile490b9-checkItem p{font-size:11.5px;color:var(--mobile490b9-ink-soft);margin:0}
.mobile490b9-accessSplit{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mobile490b9-accessCard{padding:10px;border-top:2px solid var(--mobile490b9-cyan);background:rgba(0,139,139,.09)}
.mobile490b9-accessCard h3{font-size:12px;color:var(--mobile490b9-cream);margin-bottom:4px}
.mobile490b9-accessCard p{font-size:11px;color:var(--mobile490b9-ink-soft);margin:0}
.mobile490b9-pathList{display:flex;flex-direction:column;gap:7px;counter-reset:path}
.mobile490b9-path{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;padding:9px;border:1px solid rgba(0,255,255,.18);background:rgba(0,255,255,.035);border-radius:var(--mobile490b9-r-tile)}
.mobile490b9-path::before{counter-increment:path;content:counter(path);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--mobile490b9-cyan);color:#06302E;font-family:var(--mobile490b9-head-font);font-weight:700}
.mobile490b9-path h3{font-size:12px;color:var(--mobile490b9-cream);margin-bottom:2px}
.mobile490b9-path p{font-size:11.5px;color:var(--mobile490b9-ink-soft);margin:0}
.mobile490b9-compare{width:100%;border-collapse:collapse;font-size:11px}
.mobile490b9-compare caption{text-align:left;font-family:var(--mobile490b9-head-font);font-size:13px;color:var(--mobile490b9-cyan);padding-bottom:7px}
.mobile490b9-compare th,.mobile490b9-compare td{padding:8px 6px;border:1px solid rgba(250,240,230,.14);vertical-align:top;text-align:left}
.mobile490b9-compare th{color:var(--mobile490b9-cream);background:rgba(0,105,92,.3);font-family:var(--mobile490b9-head-font);font-weight:600}
.mobile490b9-compare td{color:var(--mobile490b9-ink-soft);background:rgba(250,240,230,.025)}
.mobile490b9-condition{padding:11px;border-left:3px solid var(--mobile490b9-teal);background:rgba(250,240,230,.035);margin-bottom:7px}
.mobile490b9-condition:last-child{margin-bottom:0}
.mobile490b9-condition h3{font-size:12px;color:var(--mobile490b9-cyan);margin-bottom:3px}
.mobile490b9-condition p{font-size:11.5px;color:var(--mobile490b9-ink-soft);margin:0}
.mobile490b9-featureCta{margin:9px 0 0}
@media (max-width:359px){
  .mobile490b9-helpMeta{grid-template-columns:1fr 1fr}
  .mobile490b9-helpMeta div:last-child{grid-column:1/-1}
  .mobile490b9-accessSplit{grid-template-columns:1fr}
}
