/* ==========================================================================
   bdt 6  ·  layers-compact mobile stylesheet
   file   : css/layers-compact-a44bef.css
   prefix : surface44bef-
   canvas : 320–430px phone frame, dark layered surfaces, near-square corners
   palette: #3A3A3A base · #F0FDFF ink · #B8860B gold · #4DB6AC teal · #20B2AA sea
   ========================================================================== */

/* ---------- design tokens ---------- */
:root {
  --surface44bef-back: #3a3a3a;            /* base dark layer */
  --surface44bef-void: #232323;            /* outside the phone canvas */
  --surface44bef-panel: #414141;           /* raised card layer */
  --surface44bef-panelhi: #484848;         /* hover / active layer */
  --surface44bef-well: #303030;            /* recessed layer */
  --surface44bef-ink: #f0fdff;             /* light text */
  --surface44bef-dim: rgba(240, 253, 255, 0.68);
  --surface44bef-faint: rgba(240, 253, 255, 0.44);
  --surface44bef-line: rgba(240, 253, 255, 0.14);
  --surface44bef-linestrong: rgba(240, 253, 255, 0.28);
  --surface44bef-gold: #b8860b;
  --surface44bef-goldhi: #d3a41f;
  --surface44bef-goldink: #221803;
  --surface44bef-teal: #4db6ac;
  --surface44bef-sea: #20b2aa;
  --surface44bef-headfont: "Anek Bangla", "Noto Sans Bengali", "Hind Siliguri",
    "SolaimanLipi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --surface44bef-bodyfont: "Hind Siliguri", "Noto Sans Bengali", "SolaimanLipi",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --surface44bef-r: 3px;                   /* near-square, tool-like */
  --surface44bef-r-sm: 2px;
  --surface44bef-topH: 100px;              /* brand row + action row */
  --surface44bef-dockH: 64px;
  --surface44bef-gap: 10px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--surface44bef-void);
  color: var(--surface44bef-ink);
  font-family: var(--surface44bef-bodyfont);
  font-size: 15px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

a { color: var(--surface44bef-teal); text-decoration: none; }
a:hover { color: var(--surface44bef-ink); }

:focus-visible {
  outline: 2px solid var(--surface44bef-sea);
  outline-offset: 2px;
  border-radius: var(--surface44bef-r-sm);
}

::selection { background: var(--surface44bef-gold); color: var(--surface44bef-goldink); }

/* ---------- phone canvas ---------- */
.surface44bef-shell {
  position: relative;
  max-width: 430px;
  margin-inline: auto;
  min-height: 100dvh;
  background: var(--surface44bef-back);
  background-image:
    linear-gradient(180deg, rgba(32, 178, 170, 0.06), rgba(0, 0, 0, 0) 240px),
    linear-gradient(0deg, rgba(184, 134, 11, 0.05), rgba(0, 0, 0, 0) 200px);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.6);
}

.surface44bef-page {
  padding: calc(var(--surface44bef-topH) + 12px) 12px calc(var(--surface44bef-dockH) + 30px);
}

/* ==========================================================================
   top bar · brand row + action row (two stacked strips)
   ========================================================================== */
.surface44bef-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: 430px;
  z-index: 60;
  background: linear-gradient(180deg, #3f3f3f, #373737);
  border-bottom: 1px solid var(--surface44bef-linestrong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.surface44bef-brandrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 12px 2px;
}

.surface44bef-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border: 1px solid var(--surface44bef-line);
  background: var(--surface44bef-well);
  padding: 2px;
  flex: 0 0 auto;
}

.surface44bef-brandname {
  font-family: var(--surface44bef-headfont);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.4px;
  line-height: 1.15;
  color: var(--surface44bef-ink);
}
.surface44bef-brandname em {
  font-style: normal;
  color: var(--surface44bef-goldhi);
}

.surface44bef-actionrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}

/* compact icon+text CTA buttons */
.surface44bef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--surface44bef-r);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.surface44bef-btn:active { transform: scale(0.95); }

.surface44bef-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.surface44bef-btn--gold {
  background: linear-gradient(180deg, var(--surface44bef-goldhi), var(--surface44bef-gold));
  color: var(--surface44bef-goldink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px rgba(184, 134, 11, 0.35);
}
.surface44bef-btn--gold:hover { background: linear-gradient(180deg, #e2b133, var(--surface44bef-goldhi)); color: var(--surface44bef-goldink); }

.surface44bef-btn--ghost {
  border: 1px solid var(--surface44bef-teal);
  color: var(--surface44bef-teal);
  background: rgba(77, 182, 172, 0.08);
}
.surface44bef-btn--ghost:hover { border-color: var(--surface44bef-ink); color: var(--surface44bef-ink); }

.surface44bef-btn--bar {
  margin-left: auto;
  width: 44px;
  padding: 0;
  border: 1px solid var(--surface44bef-line);
  background: var(--surface44bef-well);
  color: var(--surface44bef-ink);
}
.surface44bef-btn--bar:hover { border-color: var(--surface44bef-linestrong); }

/* ==========================================================================
   stacked slide-in menu overlay
   ========================================================================== */
.surface44bef-menu {
  position: fixed;
  inset: 0;
  margin-inline: auto;
  max-width: 430px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: #343434;
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s ease;
}
.surface44bef-menu--open { transform: translateX(0); visibility: visible; }

.surface44bef-menu__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--surface44bef-line);
  background: #3b3b3b;
}
.surface44bef-menu__head img { width: 30px; height: 30px; object-fit: contain; }
.surface44bef-menu__title {
  font-family: var(--surface44bef-headfont);
  font-weight: 800;
  font-size: 17px;
}
.surface44bef-menu__shut {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface44bef-line);
  border-radius: var(--surface44bef-r);
  background: var(--surface44bef-well);
}
.surface44bef-menu__shut svg { width: 18px; height: 18px; }

.surface44bef-menu__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.surface44bef-menu__list li { border-bottom: 1px solid rgba(240, 253, 255, 0.07); }
.surface44bef-menu__list li:last-child { border-bottom: 0; }

.surface44bef-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 6px 16px;
  color: var(--surface44bef-ink);
  font-weight: 600;
  font-size: 15px;
  transition: background-color 0.15s ease, padding-left 0.15s ease;
}
.surface44bef-menu__link:hover { background: rgba(240, 253, 255, 0.06); color: var(--surface44bef-ink); }
.surface44bef-menu__link:active { transform: scale(0.985); }
.surface44bef-menu__no {
  flex: 0 0 auto;
  width: 22px;
  font-size: 11px;
  font-weight: 700;
  color: var(--surface44bef-goldhi);
  font-variant-numeric: tabular-nums;
}
.surface44bef-menu__link[aria-current="page"] {
  background: rgba(184, 134, 11, 0.14);
  box-shadow: inset 3px 0 0 var(--surface44bef-gold);
}

.surface44bef-menu__cta {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--surface44bef-line);
  background: #3b3b3b;
}
.surface44bef-menu__cta .surface44bef-btn { flex: 1; }

.surface44bef-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(12, 12, 12, 0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.surface44bef-scrim--open { opacity: 1; visibility: visible; }

.surface44bef-noscroll { overflow: hidden; }

/* ==========================================================================
   hero carousel · real promo banners
   ========================================================================== */
.surface44bef-hero {
  position: relative;
  margin: 0 -12px 14px;
  background: var(--surface44bef-well);
  border-block: 1px solid var(--surface44bef-line);
  overflow: hidden;
}

.surface44bef-hero__track {
  display: flex;
  transition: transform 0.42s ease;
}

.surface44bef-hero__slide {
  position: relative;
  flex: 0 0 100%;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.surface44bef-hero__slide:active img { transform: scale(0.99); }
.surface44bef-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.surface44bef-hero__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78));
  font-family: var(--surface44bef-headfont);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: left;
  color: var(--surface44bef-ink);
}

.surface44bef-hero__dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.surface44bef-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--surface44bef-r-sm);
  background: rgba(240, 253, 255, 0.34);
  transition: background-color 0.2s ease, width 0.2s ease;
}
.surface44bef-hero__dot--on { width: 20px; background: var(--surface44bef-goldhi); }

/* ==========================================================================
   page head · h1 + lead
   ========================================================================== */
.surface44bef-ph {
  padding: 4px 2px 14px;
}

.surface44bef-ph h1 {
  margin: 0 0 8px;
  font-family: var(--surface44bef-headfont);
  font-size: 24px;
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.surface44bef-ph h1 b {
  color: var(--surface44bef-goldhi);
  font-weight: 800;
}

.surface44bef-lead {
  margin: 0;
  color: var(--surface44bef-dim);
  font-size: 14.5px;
}

/* category shortcut chips */
.surface44bef-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.surface44bef-chips::-webkit-scrollbar { display: none; }

.surface44bef-chips a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--surface44bef-line);
  border-radius: var(--surface44bef-r);
  background: var(--surface44bef-panel);
  color: var(--surface44bef-ink);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.surface44bef-chips a:active { transform: scale(0.94); }
.surface44bef-chips a:hover { border-color: var(--surface44bef-teal); color: var(--surface44bef-ink); }
.surface44bef-chips a i {
  font-style: normal;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--surface44bef-sea);
}

/* ==========================================================================
   sections
   ========================================================================== */
.surface44bef-section { margin: 0 0 22px; scroll-margin-top: calc(var(--surface44bef-topH) + 8px); }

.surface44bef-sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  border-bottom: 2px solid var(--surface44bef-gold);
  padding-bottom: 6px;
}

.surface44bef-sechead h2 {
  margin: 0;
  font-family: var(--surface44bef-headfont);
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.38;
}

.surface44bef-sechead span {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--surface44bef-faint);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.surface44bef-secp {
  margin: 0 0 12px;
  color: var(--surface44bef-dim);
  font-size: 14.5px;
}

.surface44bef-secp a { border-bottom: 1px dotted var(--surface44bef-teal); }

/* fact strip: summary-first rhythm */
.surface44bef-fact {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--surface44bef-sea);
  background: var(--surface44bef-well);
  border-radius: 0 var(--surface44bef-r) var(--surface44bef-r) 0;
  font-size: 14px;
  color: var(--surface44bef-ink);
}

/* ---------- game grids ---------- */
.surface44bef-cathead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
}
.surface44bef-cathead h3 {
  margin: 0;
  font-family: var(--surface44bef-headfont);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--surface44bef-ink);
}
.surface44bef-cathead i {
  font-style: normal;
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--surface44bef-goldhi);
  font-variant-numeric: tabular-nums;
}
.surface44bef-catnote {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--surface44bef-dim);
}

.surface44bef-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* image card with bottom name bar */
.surface44bef-gcard {
  display: block;
  width: 100%;
  background: var(--surface44bef-panel);
  border: 1px solid var(--surface44bef-line);
  border-radius: var(--surface44bef-r-sm);
  padding: 4px 4px 6px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.34s ease, transform 0.34s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.surface44bef-gcard--in { opacity: 1; transform: translateY(0); }
.surface44bef-gcard:hover, .surface44bef-gcard:focus-visible { border-color: var(--surface44bef-linestrong); }
.surface44bef-gcard:active { transform: translateY(0) scale(0.94); }

.surface44bef-gcard__pic {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #2c2c2c;
  border-radius: var(--surface44bef-r-sm);
}
.surface44bef-gcard__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surface44bef-gcard__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--surface44bef-ink);
  overflow-wrap: anywhere;
}

/* wider canvas → 5 tracks */
@media (min-width: 412px) {
  .surface44bef-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
}

@media (min-width: 430px) {
  .surface44bef-page { padding-inline: 16px; }
  .surface44bef-hero { margin-inline: -16px; }
}

/* ==========================================================================
   content modules (each keeps its own shape)
   ========================================================================== */

/* decision CTA band */
.surface44bef-ctaband {
  margin: 0 0 22px;
  padding: 16px 14px;
  background:
    linear-gradient(135deg, rgba(184, 134, 11, 0.2), rgba(32, 178, 170, 0.12)),
    var(--surface44bef-panel);
  border: 1px solid rgba(184, 134, 11, 0.45);
  border-radius: var(--surface44bef-r);
}
.surface44bef-ctaband h2 { margin: 0 0 6px; font-family: var(--surface44bef-headfont); font-size: 18.5px; font-weight: 800; }
.surface44bef-ctaband p { margin: 0 0 12px; color: var(--surface44bef-dim); font-size: 14.5px; }

/* selection guide: reader-goal → section map */
.surface44bef-map { list-style: none; margin: 0; padding: 0; }
.surface44bef-map li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px dashed var(--surface44bef-line);
}
.surface44bef-map li:last-child { border-bottom: 0; }
.surface44bef-map__tag {
  flex: 0 0 auto;
  max-width: 42%;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 8px;
  background: var(--surface44bef-well);
  border: 1px solid var(--surface44bef-line);
  border-radius: var(--surface44bef-r-sm);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--surface44bef-teal);
}
.surface44bef-map__txt { font-size: 14px; color: var(--surface44bef-dim); }
.surface44bef-map__txt a { color: var(--surface44bef-teal); font-weight: 700; border-bottom: 1px dotted var(--surface44bef-teal); }

/* rtp accordion */
.surface44bef-acc { border: 1px solid var(--surface44bef-line); border-radius: var(--surface44bef-r); background: var(--surface44bef-well); }
.surface44bef-acc + .surface44bef-acc { margin-top: 8px; }
.surface44bef-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--surface44bef-headfont);
}
.surface44bef-acc summary::-webkit-details-marker { display: none; }
.surface44bef-acc summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface44bef-gold);
  color: var(--surface44bef-goldhi);
  border-radius: var(--surface44bef-r-sm);
  font-size: 13px;
  font-weight: 800;
}
.surface44bef-acc[open] summary::before { content: "–"; }
.surface44bef-acc[open] summary { color: var(--surface44bef-goldhi); }
.surface44bef-acc__body { padding: 0 12px 12px 40px; color: var(--surface44bef-dim); font-size: 14px; }
.surface44bef-acc__body p { margin: 0 0 8px; }
.surface44bef-acc__body p:last-child { margin: 0; }

/* numbered steps */
.surface44bef-steps { list-style: none; margin: 0; padding: 0; counter-reset: surface44befstep; }
.surface44bef-steps li {
  position: relative;
  counter-increment: surface44befstep;
  padding: 0 0 12px 40px;
}
.surface44bef-steps li::before {
  content: counter(surface44befstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface44bef-sea);
  color: #062622;
  font-weight: 800;
  font-size: 13px;
  border-radius: var(--surface44bef-r-sm);
}
.surface44bef-steps b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.surface44bef-steps p { margin: 0; color: var(--surface44bef-dim); font-size: 13.5px; }

/* requirements checklist */
.surface44bef-check { list-style: none; margin: 0; padding: 0; }
.surface44bef-check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--surface44bef-well);
  border: 1px solid var(--surface44bef-line);
  border-radius: var(--surface44bef-r-sm);
  font-size: 14px;
  color: var(--surface44bef-dim);
}
.surface44bef-check li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border: 2px solid var(--surface44bef-gold);
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 42%, var(--surface44bef-gold) 42% 58%, transparent 58%) center / 10px 10px no-repeat;
}
.surface44bef-check b { color: var(--surface44bef-ink); font-weight: 700; }

/* ==========================================================================
   extended footer (homepage only)
   ========================================================================== */
.surface44bef-xfoot {
  margin: 26px -12px 0;
  padding: 16px 12px 4px;
  border-top: 1px solid var(--surface44bef-linestrong);
  background: var(--surface44bef-well);
}

.surface44bef-xfoot h2 {
  margin: 0 0 10px;
  font-family: var(--surface44bef-headfont);
  font-size: 16.5px;
  font-weight: 800;
}
.surface44bef-xfoot h3 {
  margin: 16px 0 6px;
  font-family: var(--surface44bef-headfont);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--surface44bef-goldhi);
  letter-spacing: 0.4px;
}

/* horizontal shortcut buttons */
.surface44bef-shorts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.surface44bef-short {
  flex: 1 1 calc(50% - 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 8px;
  border: 1px solid rgba(184, 134, 11, 0.5);
  border-radius: var(--surface44bef-r);
  background: linear-gradient(180deg, rgba(184, 134, 11, 0.16), rgba(184, 134, 11, 0.05));
  color: var(--surface44bef-ink);
  font-size: 12.5px;
  font-weight: 700;
  transition: transform 0.12s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.surface44bef-short:hover { border-color: var(--surface44bef-goldhi); color: var(--surface44bef-ink); }
.surface44bef-short:active { transform: scale(0.95); }
.surface44bef-short svg { width: 14px; height: 14px; color: var(--surface44bef-goldhi); flex: 0 0 auto; }

.surface44bef-brandblurb {
  margin: 0;
  font-size: 13.5px;
  color: var(--surface44bef-dim);
}

/* page directory, two columns */
.surface44bef-dir {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.surface44bef-dir a {
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--surface44bef-line);
  border-radius: var(--surface44bef-r-sm);
  background: var(--surface44bef-panel);
  color: var(--surface44bef-ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.surface44bef-dir a:hover { border-color: var(--surface44bef-teal); color: var(--surface44bef-ink); }
.surface44bef-dir a:active { transform: scale(0.96); }

.surface44bef-note {
  display: block;
  margin: 14px 0 10px;
  padding: 10px 12px;
  border: 1px dashed var(--surface44bef-linestrong);
  border-radius: var(--surface44bef-r-sm);
  font-size: 12px;
  line-height: 1.65;
  color: var(--surface44bef-faint);
}

/* ==========================================================================
   common footer + bottom dock (center-raised)
   ========================================================================== */
.surface44bef-foot {
  padding: 10px 0 6px;
  border-top: 1px solid var(--surface44bef-line);
  text-align: center;
  font-size: 12px;
  color: var(--surface44bef-faint);
  letter-spacing: 0.3px;
}

.surface44bef-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: 430px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  min-height: var(--surface44bef-dockH);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #3d3d3d, #333333);
  border-top: 1px solid var(--surface44bef-linestrong);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.4);
}

.surface44bef-dock__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-height: 52px;
  padding: 4px 2px;
  color: var(--surface44bef-dim);
  border-radius: var(--surface44bef-r);
  transition: transform 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.surface44bef-dock__item span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; }
.surface44bef-dock__item svg { width: 22px; height: 22px; }
.surface44bef-dock__item:hover { color: var(--surface44bef-ink); }
.surface44bef-dock__item:active { transform: scale(0.9); transition-duration: 0.06s; }

/* active page: slight lift + accent indicator */
.surface44bef-dock__item--on {
  color: var(--surface44bef-goldhi);
  transform: translateY(-4px);
}
.surface44bef-dock__item--on::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--surface44bef-goldhi);
}

/* raised center promo button */
.surface44bef-dock__item--lift {
  transform: translateY(-12px);
  color: var(--surface44bef-goldink);
  background: linear-gradient(180deg, var(--surface44bef-goldhi), var(--surface44bef-gold));
  border-radius: var(--surface44bef-r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px rgba(0, 0, 0, 0.45);
  margin-top: -18px;
  min-height: 56px;
}
.surface44bef-dock__item--lift:active { transform: translateY(-12px) scale(0.92); }
.surface44bef-dock__item--lift:hover { color: var(--surface44bef-goldink); }

/* ==========================================================================
   motion & misc
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .surface44bef-gcard { opacity: 1; transform: none; }
}

.surface44bef-visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- help-page reading tools ---------- */
.surface44bef-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-left: 3px solid var(--surface44bef-gold);
  background: var(--surface44bef-well);
  color: var(--surface44bef-goldhi);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.surface44bef-prose {
  margin: 0 0 12px;
  color: var(--surface44bef-dim);
  font-size: 14.5px;
}
.surface44bef-prose strong { color: var(--surface44bef-ink); }
.surface44bef-prose a { border-bottom: 1px dotted var(--surface44bef-teal); }

.surface44bef-rulebook {
  margin: 0;
  border-top: 1px solid var(--surface44bef-linestrong);
}
.surface44bef-rulebook > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--surface44bef-line);
}
.surface44bef-rulebook dt {
  color: var(--surface44bef-goldhi);
  font-weight: 800;
  font-size: 13px;
}
.surface44bef-rulebook dd {
  margin: 0;
  color: var(--surface44bef-dim);
  font-size: 13.5px;
}

.surface44bef-warning {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(211, 164, 31, 0.45);
  border-left-width: 4px;
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.14), rgba(184, 134, 11, 0.03));
  color: var(--surface44bef-dim);
  font-size: 13.5px;
}
.surface44bef-warning b { color: var(--surface44bef-ink); }

.surface44bef-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.surface44bef-split__box {
  padding: 11px;
  border: 1px solid var(--surface44bef-line);
  background: var(--surface44bef-panel);
  border-radius: var(--surface44bef-r-sm);
}
.surface44bef-split__box h3 {
  margin: 0 0 5px;
  color: var(--surface44bef-ink);
  font-family: var(--surface44bef-headfont);
  font-size: 14px;
}
.surface44bef-split__box p {
  margin: 0;
  color: var(--surface44bef-dim);
  font-size: 12.8px;
}

.surface44bef-qa {
  margin: 0;
  padding: 0;
  list-style: none;
}
.surface44bef-qa li {
  margin-bottom: 8px;
  padding: 11px 12px;
  border-left: 3px solid var(--surface44bef-teal);
  background: var(--surface44bef-well);
}
.surface44bef-qa b {
  display: block;
  margin-bottom: 4px;
  color: var(--surface44bef-ink);
  font-size: 14px;
}
.surface44bef-qa p {
  margin: 0;
  color: var(--surface44bef-dim);
  font-size: 13.5px;
}

.surface44bef-routecards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.surface44bef-routecard {
  display: block;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--surface44bef-line);
  background: var(--surface44bef-panel);
  color: var(--surface44bef-ink);
  border-radius: var(--surface44bef-r-sm);
}
.surface44bef-routecard:hover { border-color: var(--surface44bef-teal); color: var(--surface44bef-ink); }
.surface44bef-routecard b { display: block; font-size: 14px; }
.surface44bef-routecard span { display: block; margin-top: 2px; color: var(--surface44bef-dim); font-size: 12.5px; }

/* About page uses a ledger rhythm rather than the safety page's rulebook. */
.surface44bef-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--surface44bef-line);
  background: var(--surface44bef-well);
}
.surface44bef-ledger li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  padding: 11px;
  border-bottom: 1px dashed var(--surface44bef-line);
}
.surface44bef-ledger li:last-child { border-bottom: 0; }
.surface44bef-ledger__mark {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface44bef-sea);
  color: #062622;
  font-size: 12px;
  font-weight: 900;
}
.surface44bef-ledger b { display: block; color: var(--surface44bef-ink); font-size: 14px; }
.surface44bef-ledger p { margin: 2px 0 0; color: var(--surface44bef-dim); font-size: 13.3px; }

.surface44bef-facts {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface44bef-well);
  font-size: 13px;
}
.surface44bef-facts th,
.surface44bef-facts td {
  padding: 9px 8px;
  border: 1px solid var(--surface44bef-line);
  text-align: left;
  vertical-align: top;
}
.surface44bef-facts th {
  width: 38%;
  color: var(--surface44bef-goldhi);
  font-weight: 800;
}
.surface44bef-facts td { color: var(--surface44bef-dim); }

.surface44bef-inlinepromo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 11px;
  border: 1px solid var(--surface44bef-linestrong);
  background: linear-gradient(120deg, rgba(32, 178, 170, 0.12), rgba(184, 134, 11, 0.12));
}
.surface44bef-inlinepromo p {
  flex: 1;
  margin: 0;
  color: var(--surface44bef-dim);
  font-size: 12.8px;
}
.surface44bef-inlinepromo .surface44bef-btn { flex: 0 0 auto; padding-inline: 11px; }

@media (max-width: 350px) {
  .surface44bef-rulebook > div { grid-template-columns: 78px 1fr; gap: 7px; }
  .surface44bef-split { grid-template-columns: 1fr; }
  .surface44bef-inlinepromo { align-items: stretch; flex-direction: column; }
  .surface44bef-inlinepromo .surface44bef-btn { width: 100%; }
}