/* =====================================================================
   299b.homes — css/surface-responsive-59af34.css
   Mobile-first shell for a 320–430px phone canvas, centered on wide
   screens. Every class and CSS variable uses the site prefix
   "shell59af3-". Palette: ink #0F0F23, cream #FDF5E6, wheat #F5DEB3,
   brick #B22222, teal #004D40. Square-corner high-contrast CTAs,
   lightly rounded cards, compact square game catalog.
   ===================================================================== */

:root {
  --shell59af3-ink: #0F0F23;
  --shell59af3-ink-2: #16162E;
  --shell59af3-ink-3: #1E1E3C;
  --shell59af3-cream: #FDF5E6;
  --shell59af3-wheat: #F5DEB3;
  --shell59af3-brick: #B22222;
  --shell59af3-brick-hot: #D64545;
  --shell59af3-teal: #004D40;
  --shell59af3-teal-soft: #0B6E5C;
  --shell59af3-muted: #C7BBA1;
  --shell59af3-line: rgba(245, 222, 179, 0.16);
  --shell59af3-head-font: 'Anek Bangla', 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --shell59af3-body-font: 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--shell59af3-body-font);
  background: #070712;
  color: var(--shell59af3-cream);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--shell59af3-wheat); text-decoration: none; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--shell59af3-wheat);
  outline-offset: 2px;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(178, 34, 34, 0.25);
}

h1, h2, h3 {
  font-family: var(--shell59af3-head-font);
  font-weight: 700;
  line-height: 1.38;
}

/* ---------------------------------------------------------------
   Page canvas: fixed 430px ceiling so wide screens keep the phone
   frame, with the same fixed navigation experience.
   --------------------------------------------------------------- */
.shell59af3-page {
  position: relative;
  max-width: 430px;
  min-height: 430px;
  margin: 0 auto;
  background:
    radial-gradient(120% 46% at 50% 0%, #1B1B3A 0%, var(--shell59af3-ink) 62%),
    var(--shell59af3-ink);
  box-shadow: 0 0 0 1px rgba(245, 222, 179, 0.07), 0 0 44px rgba(0, 0, 0, 0.5);
}

.shell59af3-main {
  padding: 66px 12px calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------
   Top brand bar: compact rail — logo + name only on the left,
   account actions and the menu switch live outside the brand zone.
   --------------------------------------------------------------- */
.shell59af3-topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  background: rgba(15, 15, 35, 0.97);
  border-bottom: 1px solid var(--shell59af3-teal);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.shell59af3-barrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 10px;
}

.shell59af3-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  min-height: 44px;
}

.shell59af3-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--shell59af3-teal);
  border-radius: 6px;
  background: var(--shell59af3-ink-2);
  object-fit: cover;
}

.shell59af3-name {
  font-family: var(--shell59af3-head-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--shell59af3-cream);
}

.shell59af3-login {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--shell59af3-wheat);
  border-radius: 0;
  color: var(--shell59af3-cream);
}

.shell59af3-login:active { background: rgba(245, 222, 179, 0.14); }

.shell59af3-reg {
  min-height: 44px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  background: var(--shell59af3-brick);
  color: var(--shell59af3-cream);
}

.shell59af3-reg:active { background: var(--shell59af3-brick-hot); }

.shell59af3-burger {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--shell59af3-line);
}

.shell59af3-burger svg { width: 22px; height: 22px; display: block; }
.shell59af3-burger .shell59af3-x { display: none; }
.shell59af3-burger.shell59af3-flipped .shell59af3-x { display: block; }
.shell59af3-burger.shell59af3-flipped .shell59af3-lines { display: none; }

/* ---------------------------------------------------------------
   Sectioned menu drawer (slides under the brand bar).
   --------------------------------------------------------------- */
.shell59af3-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.shell59af3-drawer.shell59af3-open {
  max-height: 560px;
  overflow-y: auto;
  border-top: 1px solid var(--shell59af3-line);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.45);
}

.shell59af3-dgroup { padding: 10px 14px 4px; }

.shell59af3-dlabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--shell59af3-muted);
  padding-bottom: 4px;
}

.shell59af3-dlinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}

.shell59af3-dlinks a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 9px;
  font-size: 13.5px;
  color: var(--shell59af3-cream);
  border-left: 2px solid transparent;
}

.shell59af3-dlinks a:active {
  border-left-color: var(--shell59af3-brick);
  background: var(--shell59af3-ink-3);
}

.shell59af3-dpromo {
  display: flex;
  gap: 10px;
  padding: 10px 14px 14px;
}

.shell59af3-dpromo .shell59af3-reg,
.shell59af3-dpromo .shell59af3-login { flex: 1; }

/* ---------------------------------------------------------------
   Hero + H1.
   --------------------------------------------------------------- */
.shell59af3-hero { padding: 14px 0 4px; }

.shell59af3-hero h1 {
  font-size: 23px;
  letter-spacing: 0.2px;
  color: var(--shell59af3-cream);
}

.shell59af3-lede {
  margin: 10px 0 14px;
  font-size: 14px;
  color: var(--shell59af3-muted);
}

.shell59af3-herobtns { display: flex; flex-wrap: wrap; gap: 10px; }

.shell59af3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 0; /* square-corner, high-contrast CTA system */
}

.shell59af3-btn-solid {
  background: var(--shell59af3-brick);
  color: var(--shell59af3-cream);
  box-shadow: 3px 3px 0 var(--shell59af3-teal);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.shell59af3-btn-solid:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shell59af3-teal);
}

.shell59af3-btn-ghost {
  border: 1px solid var(--shell59af3-wheat);
  color: var(--shell59af3-cream);
}

.shell59af3-btn-ghost:active { background: rgba(245, 222, 179, 0.12); }

/* ---------------------------------------------------------------
   Promo banner carousel (full-bleed inside the canvas gutters).
   --------------------------------------------------------------- */
.shell59af3-car {
  position: relative;
  margin: 16px -12px 0;
  overflow: hidden;
  background: var(--shell59af3-ink-2);
  border-top: 1px solid var(--shell59af3-line);
  border-bottom: 1px solid var(--shell59af3-line);
}

.shell59af3-slide {
  position: relative;
  display: none;
  width: 100%;
  min-height: 44px;
  text-align: left;
}

.shell59af3-slide.shell59af3-on { display: block; }

.shell59af3-slide img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.shell59af3-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 12px 12px;
  font-family: var(--shell59af3-head-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--shell59af3-cream);
  text-align: left;
  background: linear-gradient(180deg, rgba(15, 15, 35, 0) 0%, rgba(15, 15, 35, 0.94) 78%);
}

.shell59af3-capsmall {
  display: block;
  font-family: var(--shell59af3-body-font);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--shell59af3-wheat);
}

.shell59af3-dots {
  position: absolute;
  right: 10px;
  bottom: 8px;
  display: flex;
  gap: 7px;
  z-index: 2;
}

.shell59af3-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border-radius: 50%;
  background: rgba(253, 245, 230, 0.35);
}

.shell59af3-dot.shell59af3-on { background: var(--shell59af3-brick-hot); }

/* ---------------------------------------------------------------
   Quick category chips (horizontal scroll shortcut rail).
   --------------------------------------------------------------- */
.shell59af3-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 14px -12px 0;
  padding: 2px 12px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shell59af3-chips::-webkit-scrollbar { display: none; }

.shell59af3-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--shell59af3-wheat);
  background: var(--shell59af3-ink-2);
  border: 1px solid var(--shell59af3-line);
  border-radius: 999px;
}

.shell59af3-chip:active {
  border-color: var(--shell59af3-brick);
  color: var(--shell59af3-cream);
}

/* ---------------------------------------------------------------
   Game category sections — compact square catalog grid.
   --------------------------------------------------------------- */
.shell59af3-cat { margin: 28px 0 0; scroll-margin-top: 66px; }

.shell59af3-catbar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 2px solid var(--shell59af3-teal);
  padding-top: 9px;
}

.shell59af3-catbar h2 { font-size: 17px; }

.shell59af3-catcount {
  margin-left: auto;
  font-size: 11px;
  color: var(--shell59af3-muted);
  white-space: nowrap;
}

.shell59af3-catintro {
  margin: 7px 0 12px;
  font-size: 13.5px;
  color: var(--shell59af3-muted);
}

.shell59af3-catintro a {
  color: var(--shell59af3-wheat);
  border-bottom: 1px dashed rgba(245, 222, 179, 0.45);
}

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

@media (min-width: 393px) {
  .shell59af3-grid { grid-template-columns: repeat(5, 1fr); gap: 14px 10px; }
}

.shell59af3-game {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  min-height: 44px;
  border-radius: 0;
}

.shell59af3-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px; /* lightly rounded card */
  border: 1px solid var(--shell59af3-line);
  background: var(--shell59af3-ink-2);
}

.shell59af3-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shell59af3-game:active .shell59af3-thumb {
  border-color: var(--shell59af3-brick);
}

.shell59af3-gname {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.32;
  color: var(--shell59af3-wheat);
  min-height: 2.64em;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   Latest winners board.
   --------------------------------------------------------------- */
.shell59af3-win {
  margin: 32px 0 0;
  border: 1px solid var(--shell59af3-line);
  border-radius: 10px;
  background: var(--shell59af3-ink-2);
  overflow: hidden;
  scroll-margin-top: 66px;
}

.shell59af3-winhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  background: var(--shell59af3-teal);
}

.shell59af3-winhead h2 { font-size: 15.5px; }

.shell59af3-winsub {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--shell59af3-wheat);
  white-space: nowrap;
}

.shell59af3-winrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--shell59af3-line);
  font-size: 13px;
}

.shell59af3-winrow:first-of-type { border-top: 0; }

.shell59af3-winwho { font-weight: 600; color: var(--shell59af3-cream); }

.shell59af3-wingame { flex: 1; color: var(--shell59af3-muted); font-size: 12.5px; }

.shell59af3-winamt { font-weight: 700; color: var(--shell59af3-wheat); white-space: nowrap; }

.shell59af3-wintime { font-size: 10.5px; color: var(--shell59af3-muted); white-space: nowrap; }

.shell59af3-winnote {
  padding: 9px 12px;
  border-top: 1px solid var(--shell59af3-line);
  font-size: 11.5px;
  color: var(--shell59af3-muted);
  background: rgba(15, 15, 35, 0.4);
}

/* ---------------------------------------------------------------
   Play-now CTA band (placed right after the winners context).
   --------------------------------------------------------------- */
.shell59af3-ctaband {
  margin: 30px 0 0;
  padding: 18px 14px;
  background: var(--shell59af3-brick);
  box-shadow: 5px 5px 0 var(--shell59af3-teal);
  border-radius: 0;
}

.shell59af3-ctaband p {
  font-size: 13.5px;
  color: var(--shell59af3-cream);
  margin-bottom: 12px;
}

.shell59af3-ctaband .shell59af3-btn {
  background: var(--shell59af3-cream);
  color: var(--shell59af3-brick);
  box-shadow: 3px 3px 0 rgba(15, 15, 35, 0.55);
  font-size: 14px;
}

.shell59af3-ctaband .shell59af3-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(15, 15, 35, 0.55);
}

/* ---------------------------------------------------------------
   Trick cards (scenario-branch rhythm: one card per play scenario).
   --------------------------------------------------------------- */
.shell59af3-modhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 32px 0 4px;
}

.shell59af3-modhead h2 { font-size: 17px; }

.shell59af3-modhead::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: var(--shell59af3-brick);
  align-self: center;
}

.shell59af3-modsub { font-size: 12.5px; color: var(--shell59af3-muted); margin: 2px 0 12px; }

.shell59af3-tricks {
  display: grid;
  gap: 10px;
  scroll-margin-top: 66px;
}

@media (min-width: 375px) {
  .shell59af3-tricks { grid-template-columns: 1fr 1fr; }
}

.shell59af3-trick {
  border-left: 3px solid var(--shell59af3-teal);
  border-radius: 0 8px 8px 0;
  background: var(--shell59af3-ink-2);
  padding: 11px 12px;
}

.shell59af3-trick h3 {
  font-size: 13.5px;
  color: var(--shell59af3-wheat);
  margin-bottom: 5px;
}

.shell59af3-trick p { font-size: 12.5px; color: var(--shell59af3-muted); }

/* ---------------------------------------------------------------
   Common scenario answer block.
   --------------------------------------------------------------- */
.shell59af3-qa {
  margin: 12px 0 0;
  padding: 14px;
  border: 1px dashed var(--shell59af3-teal-soft);
  border-radius: 10px;
  background: rgba(0, 77, 64, 0.12);
  scroll-margin-top: 66px;
}

.shell59af3-q {
  font-family: var(--shell59af3-head-font);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--shell59af3-wheat);
  margin-bottom: 8px;
}

.shell59af3-ansdirect {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--shell59af3-cream);
  border-left: 3px solid var(--shell59af3-brick);
  padding-left: 10px;
  margin-bottom: 9px;
}

.shell59af3-qa p { font-size: 13px; color: var(--shell59af3-muted); margin-bottom: 8px; }

.shell59af3-qa p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Page fact summary rows.
   --------------------------------------------------------------- */
.shell59af3-facts {
  display: grid;
  margin: 12px 0 0;
  border: 1px solid var(--shell59af3-line);
  border-radius: 10px;
  overflow: hidden;
}

.shell59af3-fact {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-top: 1px solid var(--shell59af3-line);
  font-size: 13px;
}

.shell59af3-fact:first-child { border-top: 0; }

.shell59af3-fact dt {
  flex: 0 0 92px;
  font-size: 12px;
  color: var(--shell59af3-muted);
}

.shell59af3-fact dd { color: var(--shell59af3-cream); }

.shell59af3-fact dd a { border-bottom: 1px dashed rgba(245, 222, 179, 0.45); }

/* ---------------------------------------------------------------
   Extended footer: brand > page directory > promotions > disclaimer.
   --------------------------------------------------------------- */
.shell59af3-xfoot {
  margin: 36px -12px 0;
  padding: 18px 14px 8px;
  background: var(--shell59af3-ink-2);
  border-top: 2px solid var(--shell59af3-brick);
}

.shell59af3-xbrand { display: flex; gap: 10px; align-items: flex-start; }

.shell59af3-xbrand img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--shell59af3-teal);
  border-radius: 6px;
  object-fit: cover;
}

.shell59af3-xbrand p { font-size: 12.5px; color: var(--shell59af3-muted); }

.shell59af3-xtitle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--shell59af3-muted);
  margin: 16px 0 6px;
}

.shell59af3-dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
}

.shell59af3-dir a {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 12.5px;
  color: var(--shell59af3-cream);
  border-left: 2px solid transparent;
  padding-left: 8px;
}

.shell59af3-dir a:active {
  border-left-color: var(--shell59af3-brick);
  color: var(--shell59af3-wheat);
}

.shell59af3-promos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.shell59af3-promos::-webkit-scrollbar { display: none; }

.shell59af3-promo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 46px;
  padding: 10px 13px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--shell59af3-cream);
  background: var(--shell59af3-teal);
  border-radius: 0;
  scroll-snap-align: start;
}

.shell59af3-promo:active { background: var(--shell59af3-brick); }

.shell59af3-disc {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--shell59af3-line);
  font-size: 11.5px;
  color: var(--shell59af3-muted);
}

/* ---------------------------------------------------------------
   Common footer line (copyright only).
   --------------------------------------------------------------- */
.shell59af3-footer {
  margin-top: 18px;
  padding: 4px 0 2px;
  text-align: center;
  font-size: 11.5px;
  color: var(--shell59af3-muted);
}

/* ---------------------------------------------------------------
   Bottom navigation rail — 5 roles, monochrome icons, brick top
   indicator for the current page, label reveal on press.
   --------------------------------------------------------------- */
.shell59af3-bnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(12, 12, 27, 0.98);
  border-top: 1px solid var(--shell59af3-teal);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.shell59af3-bni {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 6px 2px;
  color: var(--shell59af3-muted);
  font-size: 10.5px;
  line-height: 1.25;
}

.shell59af3-bni::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24%;
  right: 24%;
  height: 2px;
  background: transparent;
}

.shell59af3-bni svg {
  width: 21px;
  height: 21px;
  display: block;
}

.shell59af3-bni span {
  opacity: 0.85;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.shell59af3-bni:active { color: var(--shell59af3-cream); }

.shell59af3-bni:active span {
  opacity: 1;
  transform: translateY(-1px);
}

.shell59af3-bni.shell59af3-on { color: var(--shell59af3-wheat); }

.shell59af3-bni.shell59af3-on::before { background: var(--shell59af3-brick-hot); }

.shell59af3-bni.shell59af3-on span { opacity: 1; }

/* ---------------------------------------------------------------
   Help page surfaces: the FAQ uses an expanding answer rail while
   the how-to guide uses a numbered route and decision branches.
   --------------------------------------------------------------- */
.shell59af3-helphead {
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--shell59af3-line);
}

.shell59af3-helphead h1 { font-size: 23px; color: var(--shell59af3-cream); }
.shell59af3-helphead p { margin-top: 9px; font-size: 14px; color: var(--shell59af3-muted); }

.shell59af3-helpnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 14px -12px 0;
  padding: 2px 12px 8px;
  scrollbar-width: none;
}

.shell59af3-helpnav::-webkit-scrollbar { display: none; }
.shell59af3-helpnav a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--shell59af3-line);
  color: var(--shell59af3-wheat);
  font-size: 12.5px;
}
.shell59af3-helpnav a:active { border-color: var(--shell59af3-brick); }

.shell59af3-faqrail {
  margin-top: 20px;
  border-top: 2px solid var(--shell59af3-teal);
}
.shell59af3-faqrail h2,
.shell59af3-route h2,
.shell59af3-issue h2,
.shell59af3-answer h2,
.shell59af3-steps h2,
.shell59af3-device h2,
.shell59af3-mistakes h2,
.shell59af3-verify h2,
.shell59af3-entities h2 {
  padding-top: 9px;
  font-size: 17px;
  color: var(--shell59af3-cream);
}
.shell59af3-faqrail > p,
.shell59af3-route > p,
.shell59af3-issue > p,
.shell59af3-answer > p,
.shell59af3-steps > p,
.shell59af3-device > p,
.shell59af3-mistakes > p,
.shell59af3-verify > p,
.shell59af3-entities > p {
  margin: 7px 0 11px;
  font-size: 13.5px;
  color: var(--shell59af3-muted);
}

.shell59af3-faqitem {
  border-bottom: 1px solid var(--shell59af3-line);
  background: rgba(22, 22, 46, 0.74);
}
.shell59af3-faqitem summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  color: var(--shell59af3-wheat);
  font-family: var(--shell59af3-head-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.shell59af3-faqitem summary::after { content: "+"; color: var(--shell59af3-brick-hot); font-size: 20px; }
.shell59af3-faqitem[open] summary::after { content: "−"; }
.shell59af3-faqitem summary::-webkit-details-marker { display: none; }
.shell59af3-faqitem p { padding: 0 12px 13px; font-size: 13px; color: var(--shell59af3-muted); }

.shell59af3-paystrip {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.shell59af3-paystep {
  padding: 12px;
  border-left: 3px solid var(--shell59af3-brick);
  background: var(--shell59af3-ink-2);
}
.shell59af3-paystep strong { display: block; font-size: 13.5px; color: var(--shell59af3-wheat); }
.shell59af3-paystep span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--shell59af3-muted); }

.shell59af3-promoline {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 18px -12px 0;
  padding: 2px 12px 8px;
  scrollbar-width: none;
}
.shell59af3-promoline::-webkit-scrollbar { display: none; }
.shell59af3-promoline button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--shell59af3-wheat);
  color: var(--shell59af3-cream);
  font-size: 12.5px;
}
.shell59af3-promoline button:active { background: var(--shell59af3-brick); }

.shell59af3-issue {
  margin-top: 27px;
  padding: 0 0 2px;
}
.shell59af3-issuegrid {
  display: grid;
  gap: 9px;
}
.shell59af3-issuecard {
  padding: 11px 12px;
  border: 1px solid var(--shell59af3-line);
  border-radius: 8px;
  background: rgba(0, 77, 64, 0.1);
}
.shell59af3-issuecard h3 { font-size: 13.5px; color: var(--shell59af3-wheat); }
.shell59af3-issuecard p { margin-top: 4px; font-size: 12.5px; color: var(--shell59af3-muted); }

.shell59af3-route { margin-top: 27px; }
.shell59af3-routelist {
  display: grid;
  gap: 6px;
  padding-left: 21px;
  color: var(--shell59af3-cream);
}
.shell59af3-routelist li { padding-left: 4px; font-size: 13px; }
.shell59af3-routelist a { color: var(--shell59af3-wheat); border-bottom: 1px dashed rgba(245, 222, 179, 0.45); }

.shell59af3-answer {
  margin-top: 27px;
  padding: 14px;
  border: 1px solid var(--shell59af3-brick);
  background: rgba(178, 34, 34, 0.13);
}
.shell59af3-answer .shell59af3-direct {
  margin: 9px 0 8px;
  color: var(--shell59af3-cream);
  font-size: 14px;
  font-weight: 600;
}
.shell59af3-answer p:last-child { margin-bottom: 0; }

/* Numbered route layout for the second help page. */
.shell59af3-steps { margin-top: 20px; }
.shell59af3-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--shell59af3-line);
}
.shell59af3-stepno {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--shell59af3-teal);
  color: var(--shell59af3-cream);
  font-family: var(--shell59af3-head-font);
  font-weight: 700;
}
.shell59af3-step h3 { font-size: 14px; color: var(--shell59af3-wheat); }
.shell59af3-step p { margin-top: 4px; font-size: 12.8px; color: var(--shell59af3-muted); }

.shell59af3-device { margin-top: 27px; }
.shell59af3-devicegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shell59af3-devicecard {
  padding: 11px;
  min-height: 118px;
  border-top: 3px solid var(--shell59af3-brick);
  background: var(--shell59af3-ink-2);
}
.shell59af3-devicecard h3 { font-size: 13.5px; color: var(--shell59af3-wheat); }
.shell59af3-devicecard p { margin-top: 5px; font-size: 12.2px; color: var(--shell59af3-muted); }

.shell59af3-mistakes { margin-top: 27px; }
.shell59af3-mistakelist {
  display: grid;
  gap: 8px;
  list-style: none;
}
.shell59af3-mistakelist li {
  padding: 10px 11px 10px 34px;
  border-left: 2px solid var(--shell59af3-teal);
  background: var(--shell59af3-ink-2);
  font-size: 12.8px;
  color: var(--shell59af3-muted);
}
.shell59af3-mistakelist li::before { content: "!"; margin-left: -22px; margin-right: 10px; color: var(--shell59af3-brick-hot); font-weight: 700; }

.shell59af3-verify { margin-top: 27px; }
.shell59af3-checklist {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  list-style: none;
}
.shell59af3-checklist li {
  min-height: 44px;
  padding: 10px 11px 10px 35px;
  border: 1px solid var(--shell59af3-line);
  color: var(--shell59af3-cream);
  font-size: 12.8px;
  background: rgba(0, 77, 64, 0.12);
}
.shell59af3-checklist li::before { content: "✓"; margin-left: -23px; margin-right: 11px; color: var(--shell59af3-wheat); font-weight: 700; }

.shell59af3-entities { margin-top: 27px; }
.shell59af3-entityrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--shell59af3-line);
}
.shell59af3-entityrow strong { flex: 0 0 95px; font-size: 12.8px; color: var(--shell59af3-wheat); }
.shell59af3-entityrow span { font-size: 12.8px; color: var(--shell59af3-muted); }

/* ---------------------------------------------------------------
   Motion budget: only key CTA feedback; honor reduced motion.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shell59af3-drawer, .shell59af3-bni span, .shell59af3-btn-solid { transition: none; }
}