/* ==========================================================================
   ABC VIP - dynamic interface stylesheet (abc-vip.click)
   Design voice: deep charcoal canvas, one violet accent (#8470FF),
   bold short headings over light body text, image game tiles with a
   name strip, restrained fade/lift feedback, compact dual CTAs.
   Mobile canvas: 320 - 430 px. Wide screens keep the centered canvas.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --mobileec3a5-accent: #8470ff;
  --mobileec3a5-accent-deep: #6a55e8;
  --mobileec3a5-accent-soft: rgba(132, 112, 255, 0.16);
  --mobileec3a5-accent-line: rgba(132, 112, 255, 0.42);
  --mobileec3a5-dark: #2c2c2c;
  --mobileec3a5-deep: #232326;
  --mobileec3a5-surface: #35353b;
  --mobileec3a5-surface-2: #3d3d45;
  --mobileec3a5-mist: #696969;
  --mobileec3a5-ink: #f2f1f7;
  --mobileec3a5-ink-dim: #c9c7d4;
  --mobileec3a5-line: rgba(255, 255, 255, 0.09);
  --mobileec3a5-good: #7fd6a4;
  --mobileec3a5-gold: #e8c66a;
  --mobileec3a5-radius: 14px;
  --mobileec3a5-radius-sm: 9px;
  --mobileec3a5-radius-xs: 6px;
  --mobileec3a5-pad: 14px;
  --mobileec3a5-topbar-h: 100px;
  --mobileec3a5-tabbar-h: 62px;
  --mobileec3a5-font: "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
}

/* ---------- 2. Base & reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--mobileec3a5-font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mobileec3a5-ink);
  background: #191a1f;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; border: 0; }

a { color: var(--mobileec3a5-accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

ul, ol { list-style-position: inside; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--mobileec3a5-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Phone canvas shell ---------- */
.mobileec3a5-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(120% 44% at 50% 0%, rgba(132, 112, 255, 0.14), transparent 62%),
    linear-gradient(180deg, var(--mobileec3a5-deep) 0%, var(--mobileec3a5-dark) 42%);
  overflow-x: hidden;
}

@media (min-width: 430px) {
  body { background: #101014; }
  .mobileec3a5-shell {
    box-shadow: 0 0 0 1px rgba(132, 112, 255, 0.22), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- 4. Fixed top bar: centered identity strip ---------- */
.mobileec3a5-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 60;
  background: rgba(35, 35, 38, 0.96);
  border-bottom: 1px solid var(--mobileec3a5-accent-line);
  backdrop-filter: blur(8px);
}

.mobileec3a5-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px var(--mobileec3a5-pad) 4px;
}

.mobileec3a5-brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--mobileec3a5-accent-line);
  object-fit: cover;
}

.mobileec3a5-brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mobileec3a5-ink);
}
.mobileec3a5-brand-name strong { color: var(--mobileec3a5-accent); }

/* Action strip under the identity: dual CTA + menu control */
.mobileec3a5-actionbar {
  display: flex;
  gap: 8px;
  padding: 0 var(--mobileec3a5-pad) 9px;
}

.mobileec3a5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--mobileec3a5-radius-sm);
  font-weight: 700;
  font-size: 13.5px;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}

.mobileec3a5-btn-cta {
  flex: 1;
  background: linear-gradient(135deg, var(--mobileec3a5-accent), var(--mobileec3a5-accent-deep));
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(132, 112, 255, 0.35);
}
.mobileec3a5-btn-cta:active { transform: translateY(2px); }

.mobileec3a5-btn-ghost {
  flex: 1;
  color: var(--mobileec3a5-accent);
  border: 1px solid var(--mobileec3a5-accent-line);
  background: var(--mobileec3a5-accent-soft);
}
.mobileec3a5-btn-ghost:active { transform: translateY(2px); }

.mobileec3a5-menubtn {
  width: 46px;
  flex: 0 0 46px;
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.mobileec3a5-menubtn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--mobileec3a5-ink);
  border-radius: 2px;
  position: relative;
  transition: background 0.15s ease;
}
.mobileec3a5-menubtn span::before,
.mobileec3a5-menubtn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--mobileec3a5-ink);
  border-radius: 2px;
  transition: transform 0.18s ease, top 0.18s ease;
}
.mobileec3a5-menubtn span::before { top: -6px; }
.mobileec3a5-menubtn span::after { top: 6px; }
.mobileec3a5-menubtn-open span { background: transparent; }
.mobileec3a5-menubtn-open span::before { top: 0; transform: rotate(45deg); }
.mobileec3a5-menubtn-open span::after { top: 0; transform: rotate(-45deg); }

/* Expandable route panel */
.mobileec3a5-drawer {
  position: fixed;
  top: var(--mobileec3a5-topbar-h);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 55;
  background: rgba(35, 35, 38, 0.985);
  border-bottom: 2px solid var(--mobileec3a5-accent);
  padding: 10px var(--mobileec3a5-pad) 14px;
  max-height: calc(100vh - var(--mobileec3a5-topbar-h));
  overflow-y: auto;
}
.mobileec3a5-drawer[aria-hidden="true"] { display: none; }

.mobileec3a5-drawer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.mobileec3a5-drawer a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--mobileec3a5-radius-sm);
  background: var(--mobileec3a5-surface);
  color: var(--mobileec3a5-ink-dim);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.mobileec3a5-drawer a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mobileec3a5-accent);
  flex: 0 0 auto;
}
.mobileec3a5-drawer a:hover,
.mobileec3a5-drawer a[aria-current="page"] {
  background: var(--mobileec3a5-accent);
  color: #ffffff;
  text-decoration: none;
}

/* ---------- 5. Main flow ---------- */
.mobileec3a5-main {
  padding: calc(var(--mobileec3a5-topbar-h) + 12px) var(--mobileec3a5-pad)
    calc(var(--mobileec3a5-tabbar-h) + 22px + env(safe-area-inset-bottom));
}

/* Hero heading block */
.mobileec3a5-herohead { margin-bottom: 12px; }

.mobileec3a5-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mobileec3a5-accent);
  margin-bottom: 6px;
}
.mobileec3a5-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--mobileec3a5-accent);
}

h1.mobileec3a5-h1 {
  font-size: 24px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mobileec3a5-lede {
  margin-top: 8px;
  color: var(--mobileec3a5-ink-dim);
  font-size: 13.5px;
}
.mobileec3a5-lede strong { color: var(--mobileec3a5-ink); font-weight: 600; }

.mobileec3a5-duocta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.mobileec3a5-duocta .mobileec3a5-btn-cta,
.mobileec3a5-duocta .mobileec3a5-btn-ghost { flex: 1; }

/* ---------- 6. Carousel ---------- */
.mobileec3a5-hero {
  position: relative;
  border-radius: var(--mobileec3a5-radius);
  overflow: hidden;
  border: 1px solid var(--mobileec3a5-line);
  background: var(--mobileec3a5-surface);
  margin-bottom: 14px;
}

.mobileec3a5-slide {
  display: none;
  position: relative;
}
.mobileec3a5-slide-on { display: block; animation: mobileec3a5-fade 0.45s ease both; }

.mobileec3a5-slide a {
  display: block;
  aspect-ratio: 10 / 9;
  max-height: 340px;
  overflow: hidden;
}
.mobileec3a5-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobileec3a5-slide-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 11px;
  border-radius: var(--mobileec3a5-radius-xs);
  background: rgba(24, 24, 28, 0.82);
  color: var(--mobileec3a5-ink);
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.mobileec3a5-slide-tag em {
  font-style: normal;
  color: var(--mobileec3a5-gold);
}

/* Dots + arrows row */
.mobileec3a5-hero-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.mobileec3a5-dot {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobileec3a5-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: width 0.2s ease, background 0.2s ease;
}
.mobileec3a5-dot-on::before {
  width: 16px;
  border-radius: 4px;
  background: var(--mobileec3a5-accent);
}

/* ---------- 7. Quick fact strip ---------- */
.mobileec3a5-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 6px;
}
.mobileec3a5-fact {
  background: var(--mobileec3a5-surface);
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  padding: 9px 6px;
  text-align: center;
}
.mobileec3a5-fact b {
  display: block;
  font-size: 15px;
  color: var(--mobileec3a5-accent);
  font-weight: 800;
  line-height: 1.3;
}
.mobileec3a5-fact small {
  display: block;
  font-size: 10.5px;
  color: var(--mobileec3a5-ink-dim);
  line-height: 1.35;
  margin-top: 2px;
}

/* ---------- 8. Section rails & game grids ---------- */
.mobileec3a5-rail {
  margin-top: 20px;
}

.mobileec3a5-railhead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 10px;
  position: relative;
  margin-bottom: 4px;
}
.mobileec3a5-railhead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mobileec3a5-accent), var(--mobileec3a5-accent-deep));
}

h2.mobileec3a5-h2 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
}

.mobileec3a5-railnote {
  font-size: 12.5px;
  color: var(--mobileec3a5-ink-dim);
  margin: 4px 0 10px;
}
.mobileec3a5-railnote a { font-weight: 600; }

.mobileec3a5-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 7px;
}
@media (min-width: 360px) { .mobileec3a5-grid { gap: 9px 8px; } }
@media (min-width: 375px) { .mobileec3a5-grid { grid-template-columns: repeat(5, 1fr); } }

/* Game tile: square art + bottom name strip */
.mobileec3a5-gcard {
  display: block;
  background: var(--mobileec3a5-surface);
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.2s ease;
}
.mobileec3a5-gcard:active {
  transform: translateY(-3px);
  border-color: var(--mobileec3a5-accent-line);
}
.mobileec3a5-gthumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #26262b;
}
.mobileec3a5-gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mobileec3a5-gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 4px 5px 5px;
  min-height: 31px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.44));
  font-size: 10px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--mobileec3a5-ink);
  text-align: center;
  border-radius: 0 0 var(--mobileec3a5-radius-sm) var(--mobileec3a5-radius-sm);
}

/* ---------- 9. Feature tiles ---------- */
.mobileec3a5-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.mobileec3a5-perk {
  background: var(--mobileec3a5-surface);
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius);
  padding: 12px 12px 11px;
}
.mobileec3a5-perk h3 {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--mobileec3a5-ink);
  display: flex;
  align-items: center;
  gap: 7px;
}
.mobileec3a5-perk h3 svg { color: var(--mobileec3a5-accent); flex: 0 0 auto; }
.mobileec3a5-perk p {
  font-size: 12px;
  color: var(--mobileec3a5-ink-dim);
  line-height: 1.55;
}

/* ---------- 10. Guide rows ---------- */
.mobileec3a5-guides { display: grid; gap: 9px; }
.mobileec3a5-guiderow {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  background: var(--mobileec3a5-surface);
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius);
  padding: 11px 12px;
  align-items: center;
}
.mobileec3a5-guiderow-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--mobileec3a5-accent-soft);
  border: 1px solid var(--mobileec3a5-accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mobileec3a5-accent);
}
.mobileec3a5-guiderow b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
}
.mobileec3a5-guiderow p {
  font-size: 12px;
  color: var(--mobileec3a5-ink-dim);
  line-height: 1.5;
  margin-top: 2px;
}

/* ---------- 11. Promotion rows ---------- */
.mobileec3a5-offers { display: grid; gap: 10px; }
.mobileec3a5-offer {
  position: relative;
  border-radius: var(--mobileec3a5-radius);
  border: 1px solid var(--mobileec3a5-accent-line);
  background:
    linear-gradient(120deg, var(--mobileec3a5-accent-soft), transparent 58%),
    var(--mobileec3a5-surface);
  padding: 12px 13px;
}
.mobileec3a5-offer-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--mobileec3a5-accent);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 6px;
}
.mobileec3a5-offer b { display: block; font-size: 14px; font-weight: 800; }
.mobileec3a5-offer p {
  font-size: 12px;
  color: var(--mobileec3a5-ink-dim);
  margin: 3px 0 9px;
  line-height: 1.5;
}
.mobileec3a5-offer .mobileec3a5-btn { min-height: 40px; font-size: 12.5px; }

/* ---------- 12. FAQ (native disclosure) ---------- */
.mobileec3a5-faqs { display: grid; gap: 8px; }
.mobileec3a5-faq {
  background: var(--mobileec3a5-surface);
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  overflow: hidden;
}
.mobileec3a5-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.mobileec3a5-faq summary::-webkit-details-marker { display: none; }
.mobileec3a5-faq summary::after {
  content: "+";
  font-size: 17px;
  font-weight: 700;
  color: var(--mobileec3a5-accent);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}
.mobileec3a5-faq[open] summary::after { transform: rotate(45deg); }
.mobileec3a5-faq-body {
  padding: 0 12px 12px;
  font-size: 12.5px;
  color: var(--mobileec3a5-ink-dim);
  line-height: 1.6;
}

/* ---------- 13. Steps ---------- */
.mobileec3a5-steps { counter-reset: mobileec3a5step; display: grid; gap: 8px; }
.mobileec3a5-step {
  counter-increment: mobileec3a5step;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  background: var(--mobileec3a5-surface);
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  padding: 10px 12px 10px 10px;
}
.mobileec3a5-step::before {
  content: counter(mobileec3a5step);
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--mobileec3a5-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobileec3a5-step b { display: block; font-size: 13px; font-weight: 700; }
.mobileec3a5-step p {
  font-size: 12px;
  color: var(--mobileec3a5-ink-dim);
  line-height: 1.5;
  margin-top: 1px;
}

/* ---------- 14. Extended home footer ---------- */
.mobileec3a5-extfoot {
  margin: 26px calc(-1 * var(--mobileec3a5-pad)) 0;
  padding: 16px var(--mobileec3a5-pad) 6px;
  background: linear-gradient(180deg, rgba(132, 112, 255, 0.08), transparent 30%), #26262a;
  border-top: 1px solid var(--mobileec3a5-accent-line);
}
.mobileec3a5-extfoot-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mobileec3a5-accent);
  margin-bottom: 8px;
}
.mobileec3a5-extbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mobileec3a5-extbrand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--mobileec3a5-accent-line);
}
.mobileec3a5-extbrand b { display: block; font-size: 14.5px; font-weight: 800; }
.mobileec3a5-extbrand p {
  font-size: 11.5px;
  color: var(--mobileec3a5-ink-dim);
  line-height: 1.5;
  margin-top: 1px;
}

/* Horizontal shortcut strip: the 7 promo doors */
.mobileec3a5-shorts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mobileec3a5-short {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--mobileec3a5-accent), var(--mobileec3a5-accent-deep));
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.mobileec3a5-short:active { transform: translateY(2px); }
.mobileec3a5-short-alt {
  background: var(--mobileec3a5-surface-2);
  border: 1px solid var(--mobileec3a5-accent-line);
  color: var(--mobileec3a5-accent);
}

/* Page directory */
.mobileec3a5-directory {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.mobileec3a5-directory a {
  display: block;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--mobileec3a5-radius-xs);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--mobileec3a5-line);
  color: var(--mobileec3a5-ink-dim);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}
.mobileec3a5-directory a:hover { color: var(--mobileec3a5-accent); text-decoration: none; border-color: var(--mobileec3a5-accent-line); }

.mobileec3a5-disclaimer {
  font-size: 11px;
  color: var(--mobileec3a5-mist);
  line-height: 1.55;
  padding-bottom: 8px;
}

/* ---------- 15. Common footer ---------- */
.mobileec3a5-foot {
  padding: 12px var(--mobileec3a5-pad) calc(var(--mobileec3a5-tabbar-h) + 16px + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--mobileec3a5-line);
}
.mobileec3a5-foot small {
  font-size: 11px;
  color: var(--mobileec3a5-mist);
}

/* ---------- 16. Layered bottom tab bar ---------- */
.mobileec3a5-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(32, 32, 36, 0.98);
  border-top: 2px solid var(--mobileec3a5-accent);
  padding: 5px 2px calc(5px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
}
.mobileec3a5-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 4px 2px;
  border-radius: var(--mobileec3a5-radius-sm);
  color: var(--mobileec3a5-ink-dim);
  text-decoration: none;
  transition: transform 0.15s ease, color 0.2s ease, background 0.2s ease;
}
.mobileec3a5-tab:active { transform: translateY(-3px); }
.mobileec3a5-tab svg { color: currentColor; }
.mobileec3a5-tab span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Active state: contrast inversion with a soft accent bed */
.mobileec3a5-tab[aria-current="page"] {
  background: var(--mobileec3a5-accent);
  color: #ffffff;
}
.mobileec3a5-tab-mobile-promo {
  color: var(--mobileec3a5-gold);
}

/* ---------- 17. Motion & accessibility ---------- */
@keyframes mobileec3a5-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 339px) {
  .mobileec3a5-facts { grid-template-columns: repeat(2, 1fr); }
  .mobileec3a5-directory { grid-template-columns: 1fr; }
}

/* ---------- 18. Help page reading tools ---------- */
.mobileec3a5-pageintro {
  padding: 15px 14px 14px;
  border: 1px solid var(--mobileec3a5-accent-line);
  border-radius: var(--mobileec3a5-radius);
  background:
    linear-gradient(135deg, rgba(132, 112, 255, 0.18), transparent 65%),
    var(--mobileec3a5-surface);
  margin-bottom: 14px;
}
.mobileec3a5-pageintro p { color: var(--mobileec3a5-ink-dim); font-size: 13px; line-height: 1.65; }
.mobileec3a5-pageintro p + p { margin-top: 8px; }
.mobileec3a5-pageintro .mobileec3a5-kicker { color: var(--mobileec3a5-gold); margin-bottom: 7px; }
.mobileec3a5-answerline {
  border-left: 3px solid var(--mobileec3a5-accent);
  padding: 10px 12px;
  margin: 8px 0 12px;
  background: rgba(132, 112, 255, 0.1);
  color: var(--mobileec3a5-ink);
  font-size: 13px;
  line-height: 1.6;
}
.mobileec3a5-copy p,
.mobileec3a5-copy li {
  color: var(--mobileec3a5-ink-dim);
  font-size: 13px;
  line-height: 1.72;
}
.mobileec3a5-copy p + p { margin-top: 9px; }
.mobileec3a5-copy ul,
.mobileec3a5-copy ol { margin: 8px 0 10px 19px; }
.mobileec3a5-copy li + li { margin-top: 6px; }
.mobileec3a5-copy strong { color: var(--mobileec3a5-ink); }
.mobileec3a5-copy h3 {
  color: var(--mobileec3a5-ink);
  font-size: 15px;
  line-height: 1.4;
  margin: 13px 0 5px;
}
.mobileec3a5-promo-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 11px 0;
  padding: 10px 11px;
  border: 1px solid var(--mobileec3a5-accent-line);
  border-radius: var(--mobileec3a5-radius-sm);
  background: var(--mobileec3a5-accent-soft);
}
.mobileec3a5-promo-line span { color: var(--mobileec3a5-ink-dim); font-size: 12px; line-height: 1.45; }
.mobileec3a5-promo-line .mobileec3a5-btn { flex: 0 0 auto; min-height: 42px; padding: 0 11px; font-size: 11.5px; }
.mobileec3a5-checklist { display: grid; gap: 8px; margin-top: 9px; }
.mobileec3a5-checkitem {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: start;
  padding: 10px 11px;
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  background: var(--mobileec3a5-surface);
}
.mobileec3a5-checkmark {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mobileec3a5-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.mobileec3a5-checkitem b { display: block; color: var(--mobileec3a5-ink); font-size: 13px; }
.mobileec3a5-checkitem p { margin-top: 2px; }
.mobileec3a5-facts-wide { grid-template-columns: repeat(2, 1fr); margin: 10px 0 12px; }
.mobileec3a5-facts-wide .mobileec3a5-fact { text-align: left; padding: 10px 11px; }
.mobileec3a5-facts-wide .mobileec3a5-fact b { font-size: 14px; }
.mobileec3a5-decision {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}
.mobileec3a5-decisionrow {
  padding: 11px 12px;
  border-radius: var(--mobileec3a5-radius-sm);
  border: 1px solid var(--mobileec3a5-line);
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent), var(--mobileec3a5-surface);
}
.mobileec3a5-decisionrow b { display: block; color: var(--mobileec3a5-accent); font-size: 13px; margin-bottom: 3px; }
.mobileec3a5-decisionrow p { color: var(--mobileec3a5-ink-dim); font-size: 12.5px; line-height: 1.6; }
.mobileec3a5-steps-rail { display: grid; gap: 0; margin-top: 10px; }
.mobileec3a5-stepcard {
  position: relative;
  padding: 13px 12px 13px 42px;
  border-left: 2px solid var(--mobileec3a5-accent-line);
  background: rgba(255,255,255,.025);
}
.mobileec3a5-stepcard::before {
  content: attr(data-step);
  position: absolute;
  left: -15px;
  top: 13px;
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mobileec3a5-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.mobileec3a5-stepcard b { display: block; color: var(--mobileec3a5-ink); font-size: 14px; }
.mobileec3a5-stepcard p { margin-top: 3px; }
.mobileec3a5-stepcard + .mobileec3a5-stepcard { border-top: 1px solid var(--mobileec3a5-line); }
.mobileec3a5-factband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 13px;
}
.mobileec3a5-factband div {
  padding: 10px 7px;
  text-align: center;
  border-radius: var(--mobileec3a5-radius-sm);
  background: var(--mobileec3a5-surface);
  border-bottom: 2px solid var(--mobileec3a5-accent);
}
.mobileec3a5-factband b { display: block; color: var(--mobileec3a5-accent); font-size: 16px; }
.mobileec3a5-factband span { display: block; color: var(--mobileec3a5-ink-dim); font-size: 10.5px; line-height: 1.35; }
.mobileec3a5-relationmap { display: grid; gap: 7px; margin-top: 10px; }
.mobileec3a5-relation {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--mobileec3a5-line);
  border-radius: var(--mobileec3a5-radius-sm);
  background: var(--mobileec3a5-surface);
}
.mobileec3a5-relation b { color: var(--mobileec3a5-gold); font-size: 12px; }
.mobileec3a5-relation p { color: var(--mobileec3a5-ink-dim); font-size: 12px; line-height: 1.5; }
.mobileec3a5-pulse {
  padding: 12px;
  border-radius: var(--mobileec3a5-radius);
  background: linear-gradient(135deg, rgba(127,214,164,.12), rgba(132,112,255,.08));
  border: 1px solid rgba(127,214,164,.35);
  margin-top: 10px;
}
.mobileec3a5-pulse b { display: block; color: var(--mobileec3a5-good); font-size: 13px; margin-bottom: 3px; }
.mobileec3a5-pulse p { color: var(--mobileec3a5-ink-dim); font-size: 12.5px; line-height: 1.6; }
.mobileec3a5-tablewrap { overflow-x: auto; margin-top: 9px; border-radius: var(--mobileec3a5-radius-sm); border: 1px solid var(--mobileec3a5-line); }
.mobileec3a5-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 11.5px; }
.mobileec3a5-table th, .mobileec3a5-table td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--mobileec3a5-line); color: var(--mobileec3a5-ink-dim); vertical-align: top; }
.mobileec3a5-table th { color: var(--mobileec3a5-ink); background: var(--mobileec3a5-surface-2); font-weight: 700; }
.mobileec3a5-table tr:last-child td { border-bottom: 0; }
.mobileec3a5-tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mobileec3a5-tag { padding: 5px 8px; border-radius: 999px; background: var(--mobileec3a5-accent-soft); color: var(--mobileec3a5-ink-dim); border: 1px solid var(--mobileec3a5-accent-line); font-size: 11px; }
.mobileec3a5-quiet { color: var(--mobileec3a5-mist); font-size: 11.5px; line-height: 1.6; }

@media (max-width: 359px) {
  .mobileec3a5-promo-line { align-items: flex-start; flex-direction: column; }
  .mobileec3a5-promo-line .mobileec3a5-btn { width: 100%; }
  .mobileec3a5-factband { grid-template-columns: 1fr; }
}