/* ==========================================================================
   xs6666.click base stylesheet
   File   : css/responsive-253483-tokens.css
   Prefix : every class and custom property starts with c48324-
   Canvas : mobile-first 320px -> 430px, wider screens keep a centered shell
   Palette: #0E1621 base / #4DB6AC accent / #ADD8E6 body text /
            #87CEEB highlight / #000080 deep panels
   Voice  : bold short headings + light body copy, small-medium radii,
            mixed large/small game cards, conclusion-first blocks,
            sliding focus indicators, full-width primary CTAs
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --c48324-bg: #0E1621;
  --c48324-bg-soft: #131f2c;
  --c48324-bg-lift: #17273a;
  --c48324-line: #24384e;
  --c48324-line-soft: #1c2d40;
  --c48324-teal: #4DB6AC;
  --c48324-teal-deep: #2f8f86;
  --c48324-ice: #ADD8E6;
  --c48324-sky: #87CEEB;
  --c48324-navy: #000080;
  --c48324-ink: #052128;
  --c48324-text: #c6dcea;
  --c48324-muted: #8aa8bd;
  --c48324-gold: #ffd489;
  --c48324-danger: #ff8f7a;
  --c48324-radius-s: 8px;
  --c48324-radius-m: 12px;
  --c48324-radius-l: 18px;
  --c48324-head-h: 106px;
  --c48324-tabbar-h: 64px;
  --c48324-gap: 10px;
  --c48324-pad: 12px;
  --c48324-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- base mesh */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c48324-bg);
  color: var(--c48324-text);
  font-family: var(--c48324-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.62;
  overflow-x: hidden;
}

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

a { color: var(--c48324-sky); text-decoration: none; }
a:hover { color: var(--c48324-teal); }

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.28;
  margin: 0 0 10px;
  color: #eaf6fc;
  letter-spacing: -0.01em;
}

p { margin: 0 0 12px; }

ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

/* Centered phone canvas: the shell never grows past a handset width so the
   layout stays a stable mobile canvas on tablets and desktop screens. */
.c48324-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background:
    radial-gradient(120% 46% at 50% 0%, #142236 0%, var(--c48324-bg) 58%);
  position: relative;
}

@media (min-width: 520px) {
  .c48324-shell {
    box-shadow: 0 0 0 1px var(--c48324-line-soft), 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

/* Main column clears both fixed bars; extra bottom room keeps the last
   blocks readable above the tab bar. */
.c48324-main {
  padding: calc(var(--c48324-head-h) + 14px) var(--c48324-pad)
           calc(var(--c48324-tabbar-h) + 34px);
}

/* ----------------------------------------------------------------- top bar
   Identity strip: centered logo + brand mark, actions live on their own
   row so the identity stays symmetrical. Bars are pinned to the phone
   canvas, not the whole viewport, so wide screens keep the centered look. */
.c48324-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 60;
  background: linear-gradient(180deg, #101c2b 0%, rgba(14, 22, 33, 0.97) 100%);
  border-bottom: 1px solid var(--c48324-line-soft);
  backdrop-filter: blur(6px);
}

.c48324-idstrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px var(--c48324-pad) 6px;
}

.c48324-idlogo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(77, 182, 172, 0.35);
  flex: none;
}

.c48324-idname {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(92deg, var(--c48324-sky), var(--c48324-teal) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Action row: menu trigger on the left, register/login pair on the right. */
.c48324-actrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 var(--c48324-pad) 9px;
}

.c48324-menubtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: var(--c48324-radius-m);
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--c48324-ice);
}

.c48324-menubtn:hover { border-color: var(--c48324-teal-deep); color: var(--c48324-sky); }

/* Hamburger glyph morphs into a cross while the panel is open. */
.c48324-menubtn-box {
  position: relative;
  width: 18px;
  height: 13px;
  flex: none;
}

.c48324-menubtn-box i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--c48324-teal);
  transition: transform 0.28s ease, width 0.28s ease, opacity 0.2s ease;
}

.c48324-menubtn-box i:nth-child(1) { top: 0; }
.c48324-menubtn-box i:nth-child(2) { top: 5.5px; width: 68%; }
.c48324-menubtn-box i:nth-child(3) { top: 11px; }

.c48324-topbar.is-open .c48324-menubtn-box i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.c48324-topbar.is-open .c48324-menubtn-box i:nth-child(2) { opacity: 0; width: 100%; }
.c48324-topbar.is-open .c48324-menubtn-box i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.c48324-actpair { display: flex; gap: 8px; justify-self: end; }

/* Buttons ---------------------------------------------------------------- */
.c48324-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--c48324-radius-m);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.c48324-btn:active { transform: scale(0.97); }

.c48324-btn--primary {
  background: linear-gradient(135deg, var(--c48324-teal) 0%, #35948b 100%);
  color: var(--c48324-ink);
  box-shadow: 0 4px 14px rgba(77, 182, 172, 0.32);
}

.c48324-btn--primary:hover { filter: brightness(1.08); color: var(--c48324-ink); }

.c48324-btn--ghost {
  background: transparent;
  border: 1px solid var(--c48324-teal-deep);
  color: var(--c48324-teal);
}

.c48324-btn--ghost:hover { background: rgba(77, 182, 172, 0.12); color: var(--c48324-sky); }

/* Signature CTA shape: one full-width primary bar used sparingly. */
.c48324-btn--block { width: 100%; min-height: 50px; font-size: 15.5px; }

.c48324-btn--navy {
  background: linear-gradient(140deg, #1a2f8f 0%, var(--c48324-navy) 90%);
  color: var(--c48324-ice);
  border: 1px solid #2c40a8;
}

.c48324-btn--navy:hover { color: #ffffff; filter: brightness(1.15); }

/* --------------------------------------------------------------- menu page
   Sectioned slide-down panel: grouped routes, generous 44px+ rows. */
.c48324-menu {
  position: fixed;
  top: var(--c48324-head-h);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--c48324-head-h) - var(--c48324-tabbar-h));
  overflow-y: auto;
  background: #101a27;
  border-top: 1px solid var(--c48324-line-soft);
  border-bottom: 2px solid var(--c48324-teal-deep);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.26s ease, opacity 0.26s ease, visibility 0.26s;
}

.c48324-topbar.is-open + .c48324-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.c48324-menu-sect { padding: 12px var(--c48324-pad) 4px; }

.c48324-menu-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c48324-teal);
  margin: 0 0 6px 2px;
}

.c48324-menu-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: var(--c48324-radius-s);
  color: var(--c48324-text);
  font-size: 14.5px;
  font-weight: 600;
  position: relative;
}

.c48324-menu-link:hover { background: rgba(77, 182, 172, 0.1); color: var(--c48324-sky); }

/* Active route marker: a short teal indicator line on the left edge. */
.c48324-menu-link.is-current { color: #ffffff; background: rgba(77, 182, 172, 0.08); }
.c48324-menu-link.is-current::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 3px;
  background: var(--c48324-teal);
}

.c48324-menu-ico {
  width: 21px; height: 21px;
  flex: none;
  color: var(--c48324-sky);
}

.c48324-menu-note {
  display: block;
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c48324-gold);
  background: rgba(255, 212, 137, 0.12);
  border: 1px solid rgba(255, 212, 137, 0.28);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.c48324-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 9, 15, 0.6);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.c48324-menu-backdrop.is-shown { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------------- hero */
.c48324-hero {
  padding: 4px 2px 16px;
}

.c48324-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c48324-teal);
  margin-bottom: 9px;
}

.c48324-hero-kicker::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c48324-teal), transparent);
}

.c48324-hero h1 { font-size: 24.5px; }

.c48324-hero-lede {
  color: var(--c48324-ice);
  font-size: 14.5px;
  margin-bottom: 14px;
}

.c48324-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}

.c48324-hero-fact {
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-m);
  padding: 9px 8px 8px;
  text-align: center;
}

.c48324-hero-fact b {
  display: block;
  font-size: 17px;
  color: var(--c48324-sky);
  font-weight: 800;
}

.c48324-hero-fact span {
  font-size: 10.5px;
  color: var(--c48324-muted);
  line-height: 1.3;
  display: block;
}

/* ---------------------------------------------------------------- carousel */
.c48324-hero-carousel {
  position: relative;
  border-radius: var(--c48324-radius-l);
  overflow: hidden;
  border: 1px solid var(--c48324-line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  margin-bottom: 22px;
  background: var(--c48324-bg-soft);
}

.c48324-hero-carousel::after {
  content: "";
  display: block;
  padding-top: 46%;
}

.c48324-cslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(6%) scale(1.01);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.c48324-cslide.is-live {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.c48324-cslide img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.c48324-cslide-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 12, 20, 0.9) 78%);
}

.c48324-cslide-t {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.32;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.c48324-cslide-chip {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--c48324-ink);
  background: var(--c48324-teal);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Dots: the live dot stretches sideways - the sliding focus indicator. */
.c48324-cdots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 7px;
  z-index: 3;
}

.c48324-cdot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(238, 248, 252, 0.42);
  transition: width 0.3s ease, background 0.3s ease;
  padding: 0;
}

.c48324-cdot.is-live {
  width: 26px;
  background: var(--c48324-teal);
}

/* ------------------------------------------------------------ game modules */
.c48324-sect { margin: 0 0 30px; }

.c48324-sect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.c48324-sect-head h2 { font-size: 19px; margin: 0; }

.c48324-count {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--c48324-teal);
  border: 1px solid rgba(77, 182, 172, 0.4);
  background: rgba(77, 182, 172, 0.08);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.c48324-sect-lead {
  font-size: 13.8px;
  color: var(--c48324-text);
  margin: 0 0 12px;
}

/* Related-route chips close each game block (real internal hrefs). */
.c48324-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.c48324-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--c48324-navy);
  border: 1px solid #2b3f9e;
  color: var(--c48324-ice);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.c48324-chip:hover { border-color: var(--c48324-sky); color: #ffffff; }

.c48324-chip svg { width: 14px; height: 14px; color: var(--c48324-sky); }

/* --------------------------------------------------------------- game grid
   Four stable tracks on small handsets, five from 430px up. Cards mix:
   small icon cells everywhere, two wide feature cells lead the hot room. */
.c48324-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--c48324-gap);
}

.c48324-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 9px;
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-m);
  color: var(--c48324-text);
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.c48324-cell:hover {
  transform: translateY(-3px);
  border-color: var(--c48324-teal-deep);
  background: var(--c48324-bg-lift);
  color: var(--c48324-sky);
}

.c48324-cell:active { transform: translateY(-1px) scale(0.98); }

.c48324-cell img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--c48324-radius-s);
  background: #0b1420;
}

.c48324-cell-name {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 2.6em;
}

/* Wide feature card: spans two tracks, icon left, copy right. */
.c48324-cell--wide {
  grid-column: span 2;
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(135deg, #182c44 0%, var(--c48324-bg-soft) 80%);
}

.c48324-cell--wide img { width: 74px; flex: none; }

.c48324-cell--wide .c48324-cell-copy {
  flex: 1;
  min-width: 0;
}

.c48324-cell--wide .c48324-cell-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #eaf6fc;
  min-height: 0;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.c48324-cell--wide .c48324-cell-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c48324-gold);
  margin-top: 3px;
}

/* ------------------------------------------------------------ testimonials */
.c48324-quotes { display: grid; gap: 10px; }

.c48324-quote {
  position: relative;
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-m);
  padding: 13px 13px 11px;
}

.c48324-quote-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.c48324-quote-ava {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--c48324-ink);
  background: linear-gradient(135deg, var(--c48324-sky), var(--c48324-teal));
}

.c48324-quote-who b { display: block; font-size: 13.5px; color: #eaf6fc; }
.c48324-quote-who span { font-size: 11px; color: var(--c48324-muted); }

.c48324-quote-stars {
  margin-left: auto;
  color: var(--c48324-gold);
  font-size: 12px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.c48324-quote p {
  font-size: 13.4px;
  margin: 0;
  color: var(--c48324-text);
}

.c48324-quote p b { color: var(--c48324-sky); font-weight: 700; }

/* ------------------------------------------------------------ winners list */
.c48324-winners {
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-m);
  overflow: hidden;
  margin-bottom: 10px;
}

.c48324-wrow {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--c48324-bg-soft);
}

.c48324-wrow + .c48324-wrow { border-top: 1px solid var(--c48324-line-soft); }

.c48324-wrow:nth-child(even) { background: #11202f; }

.c48324-wmedal {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--c48324-ink);
  background: var(--c48324-ice);
}

.c48324-wrow:nth-child(1) .c48324-wmedal { background: var(--c48324-gold); }
.c48324-wrow:nth-child(2) .c48324-wmedal { background: #d7e6ef; }
.c48324-wrow:nth-child(3) .c48324-wmedal { background: #e8b98c; }

.c48324-wwho b { display: block; font-size: 13px; color: #eaf6fc; font-weight: 700; }
.c48324-wwho span { font-size: 11px; color: var(--c48324-muted); }

.c48324-wamt {
  text-align: right;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--c48324-teal);
  white-space: nowrap;
}

.c48324-wamt small {
  display: block;
  font-size: 10px;
  color: var(--c48324-muted);
  font-weight: 600;
}

.c48324-note {
  font-size: 11.5px;
  color: var(--c48324-muted);
  line-height: 1.5;
}

/* -------------------------------------------------------------- promotions */
.c48324-promos { display: grid; gap: 10px; }

.c48324-promo {
  position: relative;
  border-radius: var(--c48324-radius-m);
  border: 1px solid var(--c48324-line-soft);
  background: linear-gradient(150deg, #16283d 0%, var(--c48324-bg-soft) 70%);
  padding: 12px 12px 11px;
  overflow: hidden;
}

.c48324-promo::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  border-radius: 3px;
  background: var(--c48324-teal);
}

.c48324-promo--gold::before { background: var(--c48324-gold); }
.c48324-promo--navy::before { background: var(--c48324-sky); }

.c48324-promo-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c48324-teal);
  margin-bottom: 4px;
}

.c48324-promo--gold .c48324-promo-tag { color: var(--c48324-gold); }
.c48324-promo--navy .c48324-promo-tag { color: var(--c48324-sky); }

.c48324-promo h3 { font-size: 15.5px; margin: 0 0 4px; }

.c48324-promo p { font-size: 12.8px; color: var(--c48324-muted); margin: 0 0 8px; }

.c48324-promo-cta {
  font-size: 13px;
  font-weight: 800;
  color: var(--c48324-teal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}

.c48324-promo-cta:hover { color: var(--c48324-sky); }

.c48324-promo-cta svg { width: 15px; height: 15px; }

/* ------------------------------------------------------- help-page primitives */
.c48324-helpintro,
.c48324-panel {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-l);
  background: linear-gradient(145deg, #16283d 0%, var(--c48324-bg-soft) 72%);
}

.c48324-helpintro p:last-child,
.c48324-panel > p:last-child { margin-bottom: 0; }

.c48324-panel h2 { font-size: 19px; }
.c48324-lead-answer { color: var(--c48324-ice); font-size: 14px; }

.c48324-timeline,
.c48324-ledger,
.c48324-scenarios,
.c48324-factgrid { display: grid; gap: 8px; }

.c48324-timeline article,
.c48324-scenario,
.c48324-ledger-row,
.c48324-fact {
  padding: 11px 12px;
  border-left: 3px solid var(--c48324-teal);
  border-radius: var(--c48324-radius-s);
  background: rgba(14, 22, 33, 0.62);
}

.c48324-timeline article:nth-child(even),
.c48324-scenario:nth-child(even) { border-left-color: var(--c48324-sky); }
.c48324-timeline h3,
.c48324-scenario h3 { font-size: 14px; margin-bottom: 3px; }
.c48324-timeline p,
.c48324-scenario p,
.c48324-ledger-row span,
.c48324-fact span { color: var(--c48324-muted); font-size: 12.8px; margin: 0; }
.c48324-ledger-row { display: grid; gap: 3px; }
.c48324-ledger-row b,
.c48324-fact b { color: var(--c48324-sky); font-size: 13px; }

.c48324-steps {
  display: grid;
  gap: 9px;
  counter-reset: c48324-step;
}
.c48324-steps li {
  counter-increment: c48324-step;
  position: relative;
  padding: 11px 11px 11px 43px;
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-s);
  background: var(--c48324-bg-soft);
  font-size: 13px;
}
.c48324-steps li::before {
  content: counter(c48324-step);
  position: absolute;
  left: 11px; top: 10px;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c48324-teal);
  color: var(--c48324-ink);
  font-weight: 800;
}
.c48324-factgrid { grid-template-columns: 1fr 1fr; }
.c48324-fact { border-left-width: 1px; border-top: 3px solid var(--c48324-teal); }
.c48324-fact:nth-child(3n) { border-top-color: var(--c48324-gold); }

/* ------------------------------------------------------- checklist + table */
.c48324-checklist { display: grid; gap: 8px; }

.c48324-checkitem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-s);
  padding: 10px 11px;
}

.c48324-checkitem::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 6px;
  border: 2px solid var(--c48324-teal);
  background:
    linear-gradient(var(--c48324-ink), var(--c48324-ink)) content-box no-repeat
    center / 10px 10px;
}

.c48324-checkitem b { display: block; font-size: 13.5px; color: #eaf6fc; }
.c48324-checkitem span { font-size: 12.6px; color: var(--c48324-muted); }

/* Compact comparison strip: two labeled lanes, no table overflow. */
.c48324-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.c48324-compare-lane {
  border-radius: var(--c48324-radius-m);
  padding: 11px 12px;
  border: 1px solid var(--c48324-line-soft);
  background: var(--c48324-bg-soft);
}

.c48324-compare-lane--start { border-color: rgba(77, 182, 172, 0.5); }
.c48324-compare-lane--pro { border-color: rgba(255, 212, 137, 0.45); }

.c48324-compare-lane b {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
  color: var(--c48324-sky);
}

.c48324-compare-lane--pro b { color: var(--c48324-gold); }

.c48324-compare-lane span { font-size: 12.6px; color: var(--c48324-text); }

/* --------------------------------------------------------- extended footer
   Sectioned list, fixed order: promo actions > brand > directory > note. */
.c48324-xfoot {
  margin-top: 34px;
  border-top: 1px solid var(--c48324-line-soft);
  padding-top: 18px;
}

.c48324-xfoot-sect { margin-bottom: 22px; }

.c48324-xfoot-cap {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c48324-teal);
  margin-bottom: 9px;
}

.c48324-xfoot-cap::after {
  content: "";
  display: block;
  width: 34px; height: 2px;
  margin-top: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--c48324-teal), transparent);
}

.c48324-actions { display: grid; gap: 8px; }

.c48324-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 13px;
  border-radius: var(--c48324-radius-m);
  background: linear-gradient(135deg, rgba(77, 182, 172, 0.16), rgba(0, 0, 128, 0.22));
  border: 1px solid rgba(77, 182, 172, 0.35);
  color: #eaf6fc;
  font-size: 13.8px;
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.c48324-action:hover {
  border-color: var(--c48324-sky);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(77, 182, 172, 0.26), rgba(0, 0, 128, 0.3));
}

.c48324-action svg { width: 17px; height: 17px; color: var(--c48324-teal); flex: none; }

.c48324-action i {
  margin-left: auto;
  font-style: normal;
  color: var(--c48324-teal);
  font-weight: 800;
}

.c48324-brandbox {
  font-size: 13px;
  color: var(--c48324-text);
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-m);
  padding: 12px 13px;
}

.c48324-brandbox p { margin: 0; }

.c48324-dirgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.c48324-dirlink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--c48324-bg-soft);
  border: 1px solid var(--c48324-line-soft);
  border-radius: var(--c48324-radius-s);
  padding: 9px 10px;
  min-height: 58px;
}

.c48324-dirlink b { font-size: 12.5px; color: #eaf6fc; font-weight: 700; }
.c48324-dirlink span { font-size: 10.8px; color: var(--c48324-muted); line-height: 1.35; }

.c48324-dirlink:hover { border-color: var(--c48324-teal-deep); }
.c48324-dirlink:hover b { color: var(--c48324-sky); }

.c48324-disclaimer {
  font-size: 11.6px;
  color: var(--c48324-muted);
  line-height: 1.6;
  border-left: 3px solid #3d5266;
  padding-left: 11px;
}

/* ------------------------------------------------------- common bottom end */
.c48324-legal {
  text-align: center;
  font-size: 11.5px;
  color: var(--c48324-muted);
  padding: 14px 6px 6px;
  border-top: 1px solid var(--c48324-line-soft);
  margin-top: 4px;
}

.c48324-legal b { color: var(--c48324-ice); font-weight: 700; }

/* ------------------------------------------------- fixed bottom navigation
   Center-lifted bar: the register hub sits on a raised circle, four flat
   roles flank it. The live page gets a top indicator line. */
.c48324-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(var(--c48324-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, #12202f 0%, #0b141f 100%);
  border-top: 1px solid var(--c48324-line-soft);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 70;
}

.c48324-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--c48324-tabbar-h);
  color: var(--c48324-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.c48324-tab svg {
  width: 22px; height: 22px;
  transition: transform 0.22s ease, color 0.22s ease;
}

.c48324-tab:hover { color: var(--c48324-ice); }

/* Live marker: top line that grows in from the center. */
.c48324-tab::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c48324-teal);
  transition: width 0.28s ease;
}

.c48324-tab.is-live { color: var(--c48324-sky); }
.c48324-tab.is-live::before { width: 30px; }
.c48324-tab.is-live svg { transform: translateY(-1.5px) scale(1.08); color: var(--c48324-teal); }

/* Raised center hub. */
.c48324-tab--hub { color: var(--c48324-ice); }

.c48324-tab--hub::before { display: none; }

.c48324-tab-hubbtn {
  width: 54px; height: 54px;
  margin-top: -30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c48324-ink);
  background: linear-gradient(140deg, #63d2c7 0%, var(--c48324-teal) 55%, #2f8f86 100%);
  box-shadow: 0 6px 18px rgba(77, 182, 172, 0.45), 0 0 0 5px #0e1a28;
  border: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.c48324-tab-hubbtn svg { width: 24px; height: 24px; color: var(--c48324-ink); }

.c48324-tab--hub:active .c48324-tab-hubbtn { transform: scale(0.94); }

.c48324-tab--hub .c48324-tab-label { margin-top: 2px; color: var(--c48324-ice); }

/* --------------------------------------------------------------- utilities */
.c48324-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.c48324-skip {
  position: absolute;
  left: 10px; top: 8px;
  z-index: 90;
  transform: translateY(-160%);
  background: var(--c48324-teal);
  color: var(--c48324-ink);
  font-weight: 800;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--c48324-radius-s);
  transition: transform 0.2s ease;
}

.c48324-skip:focus { transform: translateY(0); }

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

/* -------------------------------------------------- wider handset breakpoint
   Literal 430px track: five game columns and slightly roomier copy. */
@media (min-width: 430px) {
  :root { --c48324-pad: 16px; --c48324-gap: 12px; }

  .c48324-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .c48324-hero h1 { font-size: 26.5px; }

  .c48324-sect-head h2 { font-size: 20.5px; }

  .c48324-cell-name { font-size: 11.5px; }

  .c48324-dirgrid { grid-template-columns: 1fr 1fr 1fr; }

  .c48324-compare { grid-template-columns: 1fr 1fr; }
}

/* Very narrow handsets: keep four columns but shave gutters. */
@media (max-width: 349px) {
  :root { --c48324-gap: 7px; --c48324-pad: 10px; }

  .c48324-cell-name { font-size: 10.3px; }

  .c48324-hero-fact b { font-size: 15px; }

  .c48324-actpair .c48324-btn { padding: 0 11px; font-size: 13px; }
}