/* ==========================================================================
   www bet365 - mobile-first base stylesheet
   File   : css/mobile-d8a9dd-chrome.css
   Prefix : surfacea9dd4-
   Canvas : 320-430px phone frame, centered on wide screens
   Design : geometric headings + neutral body, low-radius segmented panels,
            grouped cover-card game shelves, question-driven rhythm,
            slide-in menu + soft card lift motion, square high-contrast CTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --surfacea9dd4-bg: #3a3a3a;            /* base charcoal canvas */
  --surfacea9dd4-bg-deep: #2f2f2f;       /* recessed wells */
  --surfacea9dd4-panel: #434343;         /* raised panels */
  --surfacea9dd4-panel-hot: #4a4143;     /* warm panel tint */
  --surfacea9dd4-line: #575757;          /* hairline dividers */
  --surfacea9dd4-line-soft: #4d4d4d;

  --surfacea9dd4-ink: #e5e5e5;           /* primary text */
  --surfacea9dd4-ink-dim: #c4c4c4;
  --surfacea9dd4-ink-faint: #9a9a9a;

  --surfacea9dd4-coral: #ff8a80;         /* primary accent */
  --surfacea9dd4-coral-soft: #f08080;    /* secondary accent */
  --surfacea9dd4-pink: #e91e63;          /* deep action pink */
  --surfacea9dd4-blush: #ffb6c1;         /* soft highlight */

  --surfacea9dd4-on-accent: #2b1216;     /* text on coral fills */

  --surfacea9dd4-font-head: Futura, "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --surfacea9dd4-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --surfacea9dd4-r-lg: 6px;              /* low radius scale */
  --surfacea9dd4-r-md: 4px;
  --surfacea9dd4-r-sm: 3px;
  --surfacea9dd4-r-none: 0px;            /* square CTAs */

  --surfacea9dd4-topbar-h: 62px;
  --surfacea9dd4-tabbar-h: 64px;

  --surfacea9dd4-canvas: 480px;
  --surfacea9dd4-gutter: 14px;

  --surfacea9dd4-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #262626; /* letterbox behind the phone canvas */
}

body {
  font-family: var(--surfacea9dd4-font-body);
  font-size: 15px;
  line-height: 1.62;
  color: var(--surfacea9dd4-ink);
  min-height: 100dvh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, p, ul, ol, dl, figure {
  margin: 0;
}

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

a {
  color: var(--surfacea9dd4-coral);
  text-decoration: none;
}

a:hover {
  color: var(--surfacea9dd4-blush);
}

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

:focus-visible {
  outline: 2px solid var(--surfacea9dd4-coral);
  outline-offset: 2px;
  border-radius: 2px;
}

.surfacea9dd4-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surfacea9dd4-coral);
  color: var(--surfacea9dd4-on-accent);
  padding: 10px 16px;
  font-weight: 700;
  z-index: 200;
}

.surfacea9dd4-skip:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   3. Phone canvas
   -------------------------------------------------------------------------- */
.surfacea9dd4-page {
  position: relative;
  width: 100%;
  max-width: var(--surfacea9dd4-canvas);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--surfacea9dd4-bg);
  box-shadow: 0 0 0 1px #1f1f1f;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   4. Fixed top bar (edge-aligned functional header)
   -------------------------------------------------------------------------- */
.surfacea9dd4-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--surfacea9dd4-canvas);
  height: var(--surfacea9dd4-topbar-h);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(180deg, #3f3a3b 0%, #383333 100%);
  border-bottom: 1px solid var(--surfacea9dd4-line);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
}

.surfacea9dd4-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-right: auto;
}

.surfacea9dd4-brand-logo {
  width: 36px;
  height: 36px;
  border-radius: var(--surfacea9dd4-r-sm);
  border: 1px solid var(--surfacea9dd4-line);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--surfacea9dd4-bg-deep);
}

.surfacea9dd4-brand-name {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--surfacea9dd4-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surfacea9dd4-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* Square high-contrast action buttons */
.surfacea9dd4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--surfacea9dd4-r-none);
  font-family: var(--surfacea9dd4-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color 0.25s var(--surfacea9dd4-ease),
              color 0.25s var(--surfacea9dd4-ease),
              border-color 0.25s var(--surfacea9dd4-ease),
              transform 0.2s var(--surfacea9dd4-ease);
}

.surfacea9dd4-btn:active {
  transform: translateY(1px);
}

.surfacea9dd4-btn-ghost {
  color: var(--surfacea9dd4-ink);
  border-color: var(--surfacea9dd4-line);
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  font-size: 12px;
}

.surfacea9dd4-btn-ghost:hover {
  color: var(--surfacea9dd4-blush);
  border-color: var(--surfacea9dd4-coral-soft);
}

.surfacea9dd4-btn-solid {
  background: var(--surfacea9dd4-pink);
  color: #fff;
  padding: 8px 11px;
  font-size: 12px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

.surfacea9dd4-btn-solid:hover {
  background: var(--surfacea9dd4-coral-soft);
  color: var(--surfacea9dd4-on-accent);
}

.surfacea9dd4-btn-coral {
  background: var(--surfacea9dd4-coral);
  color: var(--surfacea9dd4-on-accent);
}

.surfacea9dd4-btn-coral:hover {
  background: var(--surfacea9dd4-blush);
}

/* Hamburger trigger */
.surfacea9dd4-menubtn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
  background: rgba(255, 255, 255, 0.03);
}

.surfacea9dd4-menubtn:hover {
  border-color: var(--surfacea9dd4-coral-soft);
}

.surfacea9dd4-menubtn-ic {
  width: 20px;
  height: 20px;
  stroke: var(--surfacea9dd4-ink);
  fill: none;
  stroke-width: 2;
  stroke-linecap: square;
  transition: stroke 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-menubtn:hover .surfacea9dd4-menubtn-ic {
  stroke: var(--surfacea9dd4-coral);
}

.surfacea9dd4-topbar-spacer {
  height: var(--surfacea9dd4-topbar-h);
}

/* --------------------------------------------------------------------------
   5. Route panel menu (compact slide-in)
   -------------------------------------------------------------------------- */
.surfacea9dd4-navmask {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(20, 18, 18, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--surfacea9dd4-ease), visibility 0.3s;
}

.surfacea9dd4-navmask-open {
  opacity: 1;
  visibility: visible;
}

.surfacea9dd4-routes {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(84vw, 336px);
  z-index: 100;
  background: #35302f;
  border-left: 1px solid var(--surfacea9dd4-line);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.45);
  transform: translateX(102%);
  transition: transform 0.34s var(--surfacea9dd4-ease);
  display: flex;
  flex-direction: column;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.surfacea9dd4-routes-open {
  transform: translateX(0);
}

.surfacea9dd4-routes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--surfacea9dd4-line);
}

.surfacea9dd4-routes-title {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--surfacea9dd4-blush);
}

.surfacea9dd4-routes-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
}

.surfacea9dd4-routes-close:hover {
  border-color: var(--surfacea9dd4-coral-soft);
}

.surfacea9dd4-routes-close-ic {
  width: 16px;
  height: 16px;
  stroke: var(--surfacea9dd4-ink);
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: square;
}

.surfacea9dd4-routes-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 10px;
}

.surfacea9dd4-routes-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-sm);
  background: rgba(255, 255, 255, 0.025);
  color: var(--surfacea9dd4-ink);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.25s var(--surfacea9dd4-ease),
              border-color 0.25s var(--surfacea9dd4-ease),
              color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-routes-link:hover {
  color: var(--surfacea9dd4-blush);
  border-color: var(--surfacea9dd4-coral-soft);
  background: rgba(255, 138, 128, 0.08);
}

.surfacea9dd4-routes-link-no {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--surfacea9dd4-coral);
  border: 1px solid var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
  padding: 2px 6px;
  flex: 0 0 auto;
}

.surfacea9dd4-routes-cta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--surfacea9dd4-line);
}

.surfacea9dd4-routes-cta .surfacea9dd4-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. Shared content scaffolding
   -------------------------------------------------------------------------- */
.surfacea9dd4-main {
  padding: 6px var(--surfacea9dd4-gutter) calc(var(--surfacea9dd4-tabbar-h) + 34px + env(safe-area-inset-bottom));
}

.surfacea9dd4-h2 {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 19px;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--surfacea9dd4-ink);
}

.surfacea9dd4-h3 {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--surfacea9dd4-blush);
}

.surfacea9dd4-kicker {
  display: inline-block;
  font-family: var(--surfacea9dd4-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--surfacea9dd4-coral);
  margin-bottom: 6px;
}

.surfacea9dd4-copy {
  color: var(--surfacea9dd4-ink-dim);
  font-size: 14.5px;
}

.surfacea9dd4-copy + .surfacea9dd4-copy {
  margin-top: 10px;
}

.surfacea9dd4-copy a,
.surfacea9dd4-shelf-lead a,
.surfacea9dd4-note a {
  color: var(--surfacea9dd4-coral);
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 128, 0.5);
  text-underline-offset: 3px;
  font-weight: 600;
}

.surfacea9dd4-copy a:hover,
.surfacea9dd4-shelf-lead a:hover,
.surfacea9dd4-note a:hover {
  color: var(--surfacea9dd4-blush);
}

/* --------------------------------------------------------------------------
   7. Hero (opening question block)
   -------------------------------------------------------------------------- */
.surfacea9dd4-hero {
  padding: 18px 2px 6px;
}

.surfacea9dd4-hero-title {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 26px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--surfacea9dd4-ink);
  max-width: 19ch;
}

.surfacea9dd4-hero-title em {
  font-style: normal;
  color: var(--surfacea9dd4-coral);
}

.surfacea9dd4-hero-lead {
  margin-top: 10px;
  max-width: 46ch;
}

.surfacea9dd4-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.surfacea9dd4-hero-ctas .surfacea9dd4-btn {
  flex: 1 1 140px;
}

.surfacea9dd4-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.surfacea9dd4-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
  background: var(--surfacea9dd4-bg-deep);
  font-size: 12px;
  font-weight: 600;
  color: var(--surfacea9dd4-ink-dim);
  letter-spacing: 0.2px;
}

.surfacea9dd4-chip-ic {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  stroke: var(--surfacea9dd4-coral);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: square;
}

/* --------------------------------------------------------------------------
   8. Promo carousel (snap track + dots)
   -------------------------------------------------------------------------- */
.surfacea9dd4-carousel {
  margin: 20px calc(-1 * var(--surfacea9dd4-gutter));
}

.surfacea9dd4-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.surfacea9dd4-track::-webkit-scrollbar {
  display: none;
}

.surfacea9dd4-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  position: relative;
  display: block;
  text-align: left;
  border-radius: 0;
  background: var(--surfacea9dd4-bg-deep);
  overflow: hidden;
}

.surfacea9dd4-slide-img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  filter: saturate(1.04);
}

.surfacea9dd4-slide-shade {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 14px 12px;
  background: linear-gradient(180deg, rgba(24, 20, 20, 0) 0%, rgba(24, 20, 20, 0.88) 72%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.surfacea9dd4-slide-cap {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  letter-spacing: 0.2px;
}

.surfacea9dd4-slide-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  background: var(--surfacea9dd4-coral);
  color: var(--surfacea9dd4-on-accent);
  font-family: var(--surfacea9dd4-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--surfacea9dd4-r-none);
  transition: background-color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-slide:hover .surfacea9dd4-slide-cta,
.surfacea9dd4-slide:focus-visible .surfacea9dd4-slide-cta {
  background: var(--surfacea9dd4-blush);
}

.surfacea9dd4-slide-cta-ic {
  width: 12px;
  height: 12px;
  stroke: var(--surfacea9dd4-on-accent);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: square;
}

.surfacea9dd4-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 0 2px;
}

.surfacea9dd4-dot {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.surfacea9dd4-dot::before {
  content: "";
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--surfacea9dd4-line);
  transition: background-color 0.3s var(--surfacea9dd4-ease), width 0.3s var(--surfacea9dd4-ease);
}

.surfacea9dd4-dot-on::before {
  background: var(--surfacea9dd4-coral);
  width: 26px;
}

/* --------------------------------------------------------------------------
   9. Quick-question strip
   -------------------------------------------------------------------------- */
.surfacea9dd4-quickstrip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 18px 0 6px;
}

.surfacea9dd4-quick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--surfacea9dd4-panel);
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-left: 3px solid var(--surfacea9dd4-coral);
  border-radius: var(--surfacea9dd4-r-md);
  color: var(--surfacea9dd4-ink);
  transition: background-color 0.25s var(--surfacea9dd4-ease),
              transform 0.22s var(--surfacea9dd4-ease);
}

.surfacea9dd4-quick:hover {
  background: var(--surfacea9dd4-panel-hot);
  color: var(--surfacea9dd4-ink);
}

.surfacea9dd4-quick:active {
  transform: translateY(-2px);
}

.surfacea9dd4-quick-q {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.surfacea9dd4-quick-a {
  display: block;
  font-size: 12.5px;
  color: var(--surfacea9dd4-ink-faint);
  margin-top: 3px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   10. Game shelves (grouped cover-card grid)
   -------------------------------------------------------------------------- */
.surfacea9dd4-shelf {
  margin-top: 30px;
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-lg);
  background: linear-gradient(180deg, #3e3a3b 0%, #383536 100%);
  padding: 16px 12px 14px;
  overflow: clip;
}

.surfacea9dd4-shelf-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.surfacea9dd4-shelf-no {
  flex: 0 0 auto;
  font-family: var(--surfacea9dd4-font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--surfacea9dd4-on-accent);
  background: var(--surfacea9dd4-coral);
  border-radius: var(--surfacea9dd4-r-sm);
  padding: 3px 7px;
  letter-spacing: 1px;
  margin-top: 3px;
}

.surfacea9dd4-shelf-lead {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--surfacea9dd4-ink-dim);
  line-height: 1.58;
}

.surfacea9dd4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 396px) {
  .surfacea9dd4-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.surfacea9dd4-tile {
  min-width: 0;
  text-align: center;
  border-radius: var(--surfacea9dd4-r-md);
  background: var(--surfacea9dd4-bg-deep);
  border: 1px solid var(--surfacea9dd4-line-soft);
  padding: 5px 4px 7px;
  transition: transform 0.22s var(--surfacea9dd4-ease),
              border-color 0.25s var(--surfacea9dd4-ease),
              background-color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-tile:hover {
  border-color: var(--surfacea9dd4-coral-soft);
  background: #332e2e;
  transform: translateY(-3px);
}

.surfacea9dd4-tile:active {
  transform: translateY(0);
}

.surfacea9dd4-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--surfacea9dd4-r-sm);
  background: #2a2727;
}

.surfacea9dd4-tile-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 10.5px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: var(--surfacea9dd4-ink-dim);
  min-height: 2.64em;
  word-break: break-word;
}

.surfacea9dd4-tile:hover .surfacea9dd4-tile-name {
  color: var(--surfacea9dd4-blush);
}

.surfacea9dd4-shelf-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--surfacea9dd4-line);
}

.surfacea9dd4-shelf-links-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--surfacea9dd4-ink-faint);
}

.surfacea9dd4-taglink {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
  background: rgba(255, 138, 128, 0.06);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--surfacea9dd4-coral);
  transition: border-color 0.25s var(--surfacea9dd4-ease),
              color 0.25s var(--surfacea9dd4-ease),
              background-color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-taglink:hover {
  color: var(--surfacea9dd4-blush);
  border-color: var(--surfacea9dd4-coral-soft);
  background: rgba(255, 138, 128, 0.14);
}

/* --------------------------------------------------------------------------
   11. Content modules (varied shapes, not one repeated card)
   -------------------------------------------------------------------------- */

/* 11a. Split answer rows */
.surfacea9dd4-splits {
  margin-top: 12px;
  border-top: 1px solid var(--surfacea9dd4-line-soft);
}

.surfacea9dd4-split {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--surfacea9dd4-line-soft);
}

.surfacea9dd4-split-term {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--surfacea9dd4-coral);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.35;
}

.surfacea9dd4-split-def {
  font-size: 13.5px;
  color: var(--surfacea9dd4-ink-dim);
  line-height: 1.58;
}

/* 11b. Promo band */
.surfacea9dd4-band {
  margin-top: 12px;
  border: 1px solid rgba(255, 138, 128, 0.4);
  border-left: 5px solid var(--surfacea9dd4-coral);
  border-radius: var(--surfacea9dd4-r-md);
  background:
    linear-gradient(120deg, rgba(233, 30, 99, 0.22) 0%, rgba(255, 138, 128, 0.08) 58%, rgba(0, 0, 0, 0) 100%),
    var(--surfacea9dd4-panel);
  padding: 16px 14px;
}

.surfacea9dd4-band-copy {
  font-size: 13.5px;
  color: var(--surfacea9dd4-ink-dim);
}

.surfacea9dd4-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.surfacea9dd4-band-actions .surfacea9dd4-btn {
  flex: 1 1 120px;
}

.surfacea9dd4-band-fine {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--surfacea9dd4-ink-faint);
  line-height: 1.5;
}

/* 11c. Versus rows (play styles) */
.surfacea9dd4-versus {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.surfacea9dd4-vsrow {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-md);
  background: var(--surfacea9dd4-bg-deep);
  padding: 11px 12px;
}

.surfacea9dd4-vsrow-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.surfacea9dd4-vsrow-name {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--surfacea9dd4-ink);
}

.surfacea9dd4-vsrow-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--surfacea9dd4-blush);
  border: 1px solid rgba(255, 182, 193, 0.45);
  padding: 2px 6px;
  border-radius: var(--surfacea9dd4-r-sm);
  white-space: nowrap;
}

.surfacea9dd4-vsrow-txt {
  margin-top: 5px;
  font-size: 13px;
  color: var(--surfacea9dd4-ink-dim);
  line-height: 1.55;
}

/* 11d. Numbered path (mobile steps) */
.surfacea9dd4-path {
  margin-top: 12px;
  display: grid;
  gap: 0;
}

.surfacea9dd4-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 0 0 16px 0;
}

.surfacea9dd4-step::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--surfacea9dd4-line);
}

.surfacea9dd4-step:last-child::before {
  display: none;
}

.surfacea9dd4-step:last-child {
  padding-bottom: 2px;
}

.surfacea9dd4-step-no {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--surfacea9dd4-coral);
  color: var(--surfacea9dd4-coral);
  font-family: var(--surfacea9dd4-font-head);
  font-size: 12.5px;
  font-weight: 700;
  background: var(--surfacea9dd4-bg);
  position: relative;
  z-index: 1;
}

.surfacea9dd4-step-body h3 {
  font-size: 14px;
  color: var(--surfacea9dd4-ink);
  font-family: var(--surfacea9dd4-font-head);
  letter-spacing: 0.2px;
}

.surfacea9dd4-step-body p {
  margin-top: 3px;
  font-size: 13px;
  color: var(--surfacea9dd4-ink-dim);
  line-height: 1.56;
}

/* 11e. Relation map (entity relationships) */
.surfacea9dd4-relmap {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.surfacea9dd4-rel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-sm);
  background: var(--surfacea9dd4-bg-deep);
  padding: 9px 10px;
}

.surfacea9dd4-rel-a,
.surfacea9dd4-rel-b {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--surfacea9dd4-ink);
}

.surfacea9dd4-rel-a {
  color: var(--surfacea9dd4-coral);
}

.surfacea9dd4-rel-op {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--surfacea9dd4-ink-faint);
  padding: 3px 8px;
  border: 1px dashed var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
  white-space: nowrap;
}

/* 11f. Checklist */
.surfacea9dd4-checklist {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.surfacea9dd4-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-sm);
  background: var(--surfacea9dd4-bg-deep);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--surfacea9dd4-ink-dim);
  line-height: 1.55;
}

.surfacea9dd4-check-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  stroke: var(--surfacea9dd4-coral);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: square;
}

.surfacea9dd4-check strong {
  color: var(--surfacea9dd4-ink);
}

/* Section rhythm for prose modules */
.surfacea9dd4-module {
  margin-top: 30px;
}

.surfacea9dd4-module-head {
  padding-left: 10px;
  border-left: 3px solid var(--surfacea9dd4-pink);
}

.surfacea9dd4-module-head .surfacea9dd4-copy {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   12. Homepage extended footer
   -------------------------------------------------------------------------- */
.surfacea9dd4-xfooter {
  margin-top: 34px;
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-lg);
  background: var(--surfacea9dd4-bg-deep);
  padding: 16px 12px 14px;
  display: grid;
  gap: 16px;
}

.surfacea9dd4-xf-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.surfacea9dd4-xf-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--surfacea9dd4-r-sm);
  border: 1px solid var(--surfacea9dd4-line);
  object-fit: cover;
  flex: 0 0 auto;
}

.surfacea9dd4-xf-brand-txt {
  font-size: 12.5px;
  color: var(--surfacea9dd4-ink-dim);
  line-height: 1.55;
}

.surfacea9dd4-xf-label {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--surfacea9dd4-coral);
  margin-bottom: 8px;
}

.surfacea9dd4-xf-promos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.surfacea9dd4-xf-promo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 138, 128, 0.45);
  border-radius: var(--surfacea9dd4-r-md);
  background: linear-gradient(150deg, rgba(233, 30, 99, 0.24), rgba(255, 138, 128, 0.06));
  color: var(--surfacea9dd4-ink);
  font-family: var(--surfacea9dd4-font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: background-color 0.25s var(--surfacea9dd4-ease),
              transform 0.22s var(--surfacea9dd4-ease),
              border-color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-xf-promo:hover {
  color: #fff;
  border-color: var(--surfacea9dd4-coral);
  background: linear-gradient(150deg, rgba(233, 30, 99, 0.42), rgba(255, 138, 128, 0.16));
  transform: translateY(-2px);
}

.surfacea9dd4-xf-promo:active {
  transform: translateY(0);
}

.surfacea9dd4-xf-promo-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: var(--surfacea9dd4-coral);
  fill: none;
  stroke-width: 2;
  stroke-linecap: square;
}

.surfacea9dd4-xf-promo:hover .surfacea9dd4-xf-promo-ic {
  stroke: var(--surfacea9dd4-blush);
}

.surfacea9dd4-xf-dir {
  columns: 2;
  column-gap: 14px;
}

.surfacea9dd4-xf-dir li {
  break-inside: avoid;
  margin-bottom: 2px;
}

.surfacea9dd4-xf-dir a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--surfacea9dd4-ink-dim);
  border-bottom: 1px dotted var(--surfacea9dd4-line-soft);
  transition: color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-xf-dir a::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--surfacea9dd4-pink);
  transform: rotate(45deg);
}

.surfacea9dd4-xf-dir a:hover {
  color: var(--surfacea9dd4-blush);
}

.surfacea9dd4-xf-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--surfacea9dd4-ink-faint);
  border-top: 1px dashed var(--surfacea9dd4-line);
  padding-top: 12px;
}

/* --------------------------------------------------------------------------
   13. Common footer
   -------------------------------------------------------------------------- */
.surfacea9dd4-footer {
  margin-top: 22px;
  padding: 14px 4px 6px;
  border-top: 1px solid var(--surfacea9dd4-line-soft);
  text-align: center;
}

.surfacea9dd4-footer-copy {
  font-size: 11.5px;
  color: var(--surfacea9dd4-ink-faint);
  letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   14. Layered bottom tab bar
   -------------------------------------------------------------------------- */
.surfacea9dd4-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--surfacea9dd4-canvas);
  height: calc(var(--surfacea9dd4-tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 92;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(180deg, #332e2f 0%, #2a2627 100%);
  border-top: 2px solid var(--surfacea9dd4-coral);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}

.surfacea9dd4-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--surfacea9dd4-tabbar-h);
  padding: 6px 2px 4px;
  color: var(--surfacea9dd4-ink-faint);
  transition: color 0.28s var(--surfacea9dd4-ease);
}

.surfacea9dd4-tab-ic {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 0.25s var(--surfacea9dd4-ease), stroke 0.28s var(--surfacea9dd4-ease);
}

.surfacea9dd4-tab-label {
  font-family: var(--surfacea9dd4-font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1.2;
  transition: color 0.28s var(--surfacea9dd4-ease);
}

.surfacea9dd4-tab:hover {
  color: var(--surfacea9dd4-ink-dim);
}

/* Active: filled icon + emphasized label */
.surfacea9dd4-tab-on {
  color: var(--surfacea9dd4-coral);
}

.surfacea9dd4-tab-on .surfacea9dd4-tab-ic {
  fill: rgba(255, 138, 128, 0.28);
  stroke: var(--surfacea9dd4-coral);
  transform: translateY(-2px);
}

.surfacea9dd4-tab-on .surfacea9dd4-tab-label {
  color: var(--surfacea9dd4-blush);
  letter-spacing: 0.9px;
}

.surfacea9dd4-tab-on::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: var(--surfacea9dd4-blush);
}

.surfacea9dd4-tab-promo .surfacea9dd4-tab-ic {
  stroke: var(--surfacea9dd4-blush);
}

.surfacea9dd4-tab-promo:hover {
  color: var(--surfacea9dd4-blush);
}

/* --------------------------------------------------------------------------
   15. Back-to-top
   -------------------------------------------------------------------------- */
.surfacea9dd4-topbtn {
  position: fixed;
  right: calc(50% - var(--surfacea9dd4-canvas) / 2 + 12px);
  bottom: calc(var(--surfacea9dd4-tabbar-h) + 14px + env(safe-area-inset-bottom));
  width: 42px;
  height: 42px;
  z-index: 88;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surfacea9dd4-line);
  border-radius: var(--surfacea9dd4-r-sm);
  background: rgba(47, 42, 43, 0.92);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--surfacea9dd4-ease),
              visibility 0.3s,
              transform 0.3s var(--surfacea9dd4-ease),
              border-color 0.25s var(--surfacea9dd4-ease);
}

.surfacea9dd4-topbtn-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.surfacea9dd4-topbtn:hover {
  border-color: var(--surfacea9dd4-coral-soft);
}

.surfacea9dd4-topbtn-ic {
  width: 16px;
  height: 16px;
  stroke: var(--surfacea9dd4-coral);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: square;
}

@media (min-width: 500px) {
  .surfacea9dd4-topbtn {
    right: max(12px, calc(50% - var(--surfacea9dd4-canvas) / 2 + 12px));
  }
}

/* --------------------------------------------------------------------------
   16. Entrance motion (progressive enhancement)
   -------------------------------------------------------------------------- */
.surfacea9dd4-anim .surfacea9dd4-rise {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--surfacea9dd4-ease),
              transform 0.5s var(--surfacea9dd4-ease);
}

.surfacea9dd4-anim .surfacea9dd4-rise-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .surfacea9dd4-anim .surfacea9dd4-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .surfacea9dd4-routes,
  .surfacea9dd4-navmask,
  .surfacea9dd4-tile,
  .surfacea9dd4-slide-cta,
  .surfacea9dd4-tab-ic {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   17. Narrow-canvas hardening (320px safety)
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
  .surfacea9dd4-hero-title {
    font-size: 23px;
  }

  .surfacea9dd4-h2 {
    font-size: 17.5px;
  }

  .surfacea9dd4-brand-name {
    font-size: 14.5px;
    max-width: 96px;
  }

  .surfacea9dd4-grid {
    gap: 6px;
  }

  .surfacea9dd4-split {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .surfacea9dd4-xf-dir {
    columns: 1;
  }
}

/* Wide screens keep the phone canvas centered */
@media (min-width: 520px) {
  .surfacea9dd4-hero-title {
    font-size: 29px;
  }

  .surfacea9dd4-h2 {
    font-size: 20.5px;
  }
}

/* --------------------------------------------------------------------------
   18. Help-page answer rails
   -------------------------------------------------------------------------- */
.surfacea9dd4-help-intro {
  margin-top: 18px;
  padding: 14px 12px;
  border-top: 3px solid var(--surfacea9dd4-coral);
  border-bottom: 1px solid var(--surfacea9dd4-line-soft);
  background: linear-gradient(120deg, rgba(255, 138, 128, 0.12), rgba(233, 30, 99, 0.06));
}

.surfacea9dd4-help-intro p + p {
  margin-top: 9px;
}

.surfacea9dd4-help-grid {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.surfacea9dd4-help-card {
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-left: 4px solid var(--surfacea9dd4-coral-soft);
  border-radius: var(--surfacea9dd4-r-sm);
  background: var(--surfacea9dd4-bg-deep);
  padding: 12px;
}

.surfacea9dd4-help-card h3 {
  color: var(--surfacea9dd4-ink);
  font-family: var(--surfacea9dd4-font-head);
  font-size: 14px;
  line-height: 1.35;
}

.surfacea9dd4-help-card p {
  margin-top: 5px;
  color: var(--surfacea9dd4-ink-dim);
  font-size: 13px;
  line-height: 1.55;
}

.surfacea9dd4-faq-list {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}

.surfacea9dd4-faq-item {
  border: 1px solid var(--surfacea9dd4-line-soft);
  border-radius: var(--surfacea9dd4-r-sm);
  background: var(--surfacea9dd4-panel);
  overflow: hidden;
}

.surfacea9dd4-faq-item summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--surfacea9dd4-ink);
  cursor: pointer;
  font-family: var(--surfacea9dd4-font-head);
  font-size: 13.5px;
  font-weight: 700;
  list-style: none;
}

.surfacea9dd4-faq-item summary::-webkit-details-marker {
  display: none;
}

.surfacea9dd4-faq-item summary::before {
  content: "+";
  color: var(--surfacea9dd4-coral);
  font-size: 19px;
  line-height: 1;
}

.surfacea9dd4-faq-item[open] summary::before {
  content: "-";
}

.surfacea9dd4-faq-answer {
  border-top: 1px dashed var(--surfacea9dd4-line);
  padding: 10px 12px 12px 38px;
  color: var(--surfacea9dd4-ink-dim);
  font-size: 13px;
  line-height: 1.58;
}

.surfacea9dd4-table-wrap {
  margin-top: 13px;
  overflow-x: auto;
  border: 1px solid var(--surfacea9dd4-line-soft);
}

.surfacea9dd4-table {
  width: 100%;
  min-width: 390px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.surfacea9dd4-table th,
.surfacea9dd4-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--surfacea9dd4-line-soft);
  text-align: left;
  vertical-align: top;
}

.surfacea9dd4-table th {
  color: var(--surfacea9dd4-blush);
  background: var(--surfacea9dd4-panel-hot);
  font-family: var(--surfacea9dd4-font-head);
}

.surfacea9dd4-table td {
  color: var(--surfacea9dd4-ink-dim);
  background: var(--surfacea9dd4-bg-deep);
}

.surfacea9dd4-table tr:last-child td {
  border-bottom: 0;
}

.surfacea9dd4-callout {
  margin-top: 14px;
  padding: 13px 12px;
  border: 1px solid rgba(255, 182, 193, 0.42);
  background: rgba(255, 182, 193, 0.08);
  color: var(--surfacea9dd4-ink-dim);
  font-size: 13px;
  line-height: 1.58;
}

@media (max-width: 340px) {
  .surfacea9dd4-table {
    min-width: 350px;
  }
}