/* ==========================================================================
   bdkk.homes - mobile palette stylesheet
   Prefix contract: every class and variable uses layer8a468-
   Palette: #262626 bg / #CCCCCC text / #FFEF94 accent
   Design tone: rounded headings + compact body, light card radius,
   horizontal icon-name game bars, fact-then-expand rhythm,
   icon micro-motion only, staggered primary/secondary CTAs.
   ========================================================================== */

:root {
  --layer8a468-bg: #262626;
  --layer8a468-bg-deep: #1c1c1c;
  --layer8a468-surface: #2d2d2d;
  --layer8a468-surface-2: #232323;
  --layer8a468-fg: #CCCCCC;
  --layer8a468-fg-dim: #8f8f8f;
  --layer8a468-accent: #FFEF94;
  --layer8a468-accent-soft: rgba(255, 239, 148, 0.14);
  --layer8a468-line: rgba(204, 204, 204, 0.15);
  --layer8a468-radius-card: 12px;
  --layer8a468-radius-tile: 11px;
  --layer8a468-radius-pill: 999px;
  --layer8a468-font-round: "Baloo Da 2", "Hind Siliguri", "Noto Sans Bengali", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --layer8a468-font-compact: "Hind Siliguri", "Noto Sans Bengali", "Segoe UI", system-ui, sans-serif;
  --layer8a468-touch: 44px;
  --layer8a468-canvas: 480px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--layer8a468-bg-deep);
  color: var(--layer8a468-fg);
  font-family: var(--layer8a468-font-compact);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

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

a { color: var(--layer8a468-accent); text-decoration: none; }

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

/* --- phone canvas, centered on wide screens --- */
.layer8a468-canvas {
  position: relative;
  max-width: var(--layer8a468-canvas);
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--layer8a468-bg);
  box-shadow: 0 0 48px rgba(0, 0, 0, 0.55);
}

.layer8a468-skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 90;
  background: var(--layer8a468-accent);
  color: #262626;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}

.layer8a468-skip:focus { left: 0; }

/* --- headings: rounded voice --- */
.layer8a468-h1,
.layer8a468-h2 {
  font-family: var(--layer8a468-font-round);
  color: #FFFFFF;
  letter-spacing: 0.2px;
}

.layer8a468-h1 {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  margin: 4px 0 10px;
}

.layer8a468-h2 {
  position: relative;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 10px;
  padding-left: 12px;
}

.layer8a468-h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 5px;
  border-radius: var(--layer8a468-radius-pill);
  background: var(--layer8a468-accent);
}

.layer8a468-h3 {
  font-family: var(--layer8a468-font-round);
  font-size: 15px;
  font-weight: 700;
  color: var(--layer8a468-accent);
  margin: 16px 0 6px;
}

.layer8a468-lead {
  margin: 0 0 12px;
  color: var(--layer8a468-fg);
}

.layer8a468-p {
  margin: 0 0 10px;
}

/* --- top header: centered identity bar + action row --- */
.layer8a468-head {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--layer8a468-canvas);
  z-index: 50;
  background: rgba(38, 38, 38, 0.97);
  border-bottom: 1px solid var(--layer8a468-line);
  backdrop-filter: blur(8px);
}

.layer8a468-head-id {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px 4px;
}

.layer8a468-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--layer8a468-line);
  object-fit: cover;
  background: var(--layer8a468-surface);
}

.layer8a468-brand {
  font-family: var(--layer8a468-font-round);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #FFFFFF;
}

.layer8a468-brand::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--layer8a468-accent);
  vertical-align: middle;
}

.layer8a468-head-act {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
}

/* --- buttons: staggered primary / secondary --- */
.layer8a468-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--layer8a468-touch);
  border-radius: var(--layer8a468-radius-pill);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

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

.layer8a468-btn-primary {
  flex: 1;
  background: var(--layer8a468-accent);
  color: #262626;
  font-family: var(--layer8a468-font-round);
  font-size: 15.5px;
  font-weight: 800;
  padding: 12px 20px;
  box-shadow: 0 4px 16px rgba(255, 239, 148, 0.22);
}

.layer8a468-btn-ghost {
  background: transparent;
  color: var(--layer8a468-fg);
  border: 1px solid rgba(204, 204, 204, 0.4);
  font-size: 13px;
  padding: 10px 16px;
}

.layer8a468-btn-icon {
  flex: 0 0 44px;
  width: 44px;
  border: 1px solid var(--layer8a468-line);
  background: var(--layer8a468-surface);
  border-radius: var(--layer8a468-radius-tile);
  color: var(--layer8a468-fg);
}

.layer8a468-btn-icon svg { width: 20px; height: 20px; }

.layer8a468-btn-wide {
  width: 100%;
  margin-top: 6px;
}

/* --- slide-up route panel + veil --- */
.layer8a468-veil {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.layer8a468-veil.is-on {
  opacity: 1;
  pointer-events: auto;
}

.layer8a468-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: var(--layer8a468-canvas);
  z-index: 60;
  background: var(--layer8a468-surface-2);
  border: 1px solid var(--layer8a468-line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0.32s;
}

.layer8a468-sheet.is-open {
  transform: translate(-50%, 0);
  visibility: visible;
}

.layer8a468-sheet-grip {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(204, 204, 204, 0.3);
  margin: 0 auto 12px;
}

.layer8a468-sheet-title {
  font-family: var(--layer8a468-font-round);
  font-size: 14px;
  font-weight: 700;
  color: var(--layer8a468-fg-dim);
  margin: 0 0 10px;
  text-align: center;
}

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

.layer8a468-route {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: var(--layer8a468-radius-card);
  background: var(--layer8a468-surface);
  border: 1px solid transparent;
  color: var(--layer8a468-fg);
  font-size: 13px;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.layer8a468-route:hover,
.layer8a468-route:focus-visible {
  border-color: rgba(255, 239, 148, 0.4);
  color: #FFFFFF;
}

.layer8a468-route-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--layer8a468-accent-soft);
  color: var(--layer8a468-accent);
}

.layer8a468-route-ico svg { width: 18px; height: 18px; }

.layer8a468-route.is-here {
  background: var(--layer8a468-accent-soft);
  border-color: rgba(255, 239, 148, 0.5);
  color: var(--layer8a468-accent);
}

/* --- main column with fixed-nav safe space --- */
.layer8a468-main {
  padding: 122px 14px calc(102px + env(safe-area-inset-bottom));
}

.layer8a468-sec {
  padding: 24px 0 4px;
}

.layer8a468-sec-first { padding-top: 6px; }

/* --- hero carousel --- */
.layer8a468-hero {
  position: relative;
}

.layer8a468-hero-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 16px;
}

.layer8a468-hero-track::-webkit-scrollbar { display: none; }

.layer8a468-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--layer8a468-surface);
  border: 1px solid var(--layer8a468-line);
}

.layer8a468-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layer8a468-slide-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 78%);
  text-align: left;
  font-family: var(--layer8a468-font-round);
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.layer8a468-slide-cap small {
  display: block;
  font-family: var(--layer8a468-font-compact);
  font-size: 11px;
  font-weight: 400;
  color: var(--layer8a468-accent);
  margin-bottom: 2px;
}

.layer8a468-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.layer8a468-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--layer8a468-radius-pill);
  background: rgba(204, 204, 204, 0.32);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.layer8a468-dot.is-on {
  width: 22px;
  background: var(--layer8a468-accent);
}

/* --- quick fact chips --- */
.layer8a468-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 4px 0 8px;
}

.layer8a468-fact-chip {
  background: var(--layer8a468-surface);
  border: 1px solid var(--layer8a468-line);
  border-radius: var(--layer8a468-radius-card);
  padding: 8px 6px;
  text-align: center;
  font-family: var(--layer8a468-font-round);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--layer8a468-accent);
  line-height: 1.35;
}

.layer8a468-fact-chip span {
  display: block;
  font-family: var(--layer8a468-font-compact);
  font-weight: 400;
  color: var(--layer8a468-fg-dim);
  font-size: 10.5px;
}

/* --- fact line: summary first, expand after --- */
.layer8a468-factline {
  margin: 0 0 10px;
  padding: 7px 11px;
  border-left: 3px solid var(--layer8a468-accent);
  border-radius: 0 10px 10px 0;
  background: var(--layer8a468-accent-soft);
  color: #E3E3E3;
  font-size: 12.5px;
}

/* --- CTA block --- */
.layer8a468-cta {
  background: var(--layer8a468-surface-2);
  border: 1px solid var(--layer8a468-line);
  border-radius: 16px;
  padding: 16px 14px;
  margin-top: 14px;
}

.layer8a468-cta-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}

.layer8a468-cta-row .layer8a468-btn-primary { flex: 1.4; }
.layer8a468-cta-row .layer8a468-btn-ghost { flex: 1; }

/* --- game grid: horizontal icon-name bars --- */
.layer8a468-ggrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 6px 0 4px;
}

.layer8a468-gcard {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  min-height: 58px;
  padding: 6px 5px;
  background: var(--layer8a468-surface);
  border: 1px solid var(--layer8a468-line);
  border-radius: var(--layer8a468-radius-card);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.layer8a468-gcard:active {
  border-color: rgba(255, 239, 148, 0.55);
  background: #313131;
}

.layer8a468-gthumb {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--layer8a468-radius-tile);
  overflow: hidden;
  background: #1f1f1f;
  border: 1px solid rgba(204, 204, 204, 0.12);
}

.layer8a468-gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, filter 0.25s ease;
}

@media (min-width: 410px) {
  .layer8a468-ggrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
}

@media (max-width: 374px) {
  .layer8a468-gcard { gap: 4px; padding-left: 4px; padding-right: 4px; }
  .layer8a468-gthumb { flex-basis: 34px; width: 34px; height: 34px; }
  .layer8a468-gname { font-size: 10.5px; }
}

.layer8a468-gcard:active .layer8a468-gthumb img {
  transform: scale(1.12);
  filter: saturate(1.25);
}

.layer8a468-gname {
  font-size: 12px;
  line-height: 1.35;
  color: var(--layer8a468-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* --- related internal page chips --- */
.layer8a468-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.layer8a468-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--layer8a468-touch);
  padding: 8px 14px;
  border: 1px dashed rgba(255, 239, 148, 0.45);
  border-radius: var(--layer8a468-radius-pill);
  font-size: 12.5px;
  color: var(--layer8a468-accent);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.layer8a468-chip:hover,
.layer8a468-chip:focus-visible {
  background: var(--layer8a468-accent-soft);
  border-style: solid;
}

.layer8a468-chip svg { width: 14px; height: 14px; flex: none; }

/* --- play styles blocks --- */
.layer8a468-style-block {
  background: var(--layer8a468-surface-2);
  border: 1px solid var(--layer8a468-line);
  border-radius: var(--layer8a468-radius-card);
  padding: 12px 13px;
  margin-bottom: 10px;
}

.layer8a468-style-block .layer8a468-h3 { margin: 0 0 6px; }

/* --- FAQ: expandable answers --- */
.layer8a468-faq {
  border: 1px solid var(--layer8a468-line);
  border-radius: var(--layer8a468-radius-card);
  background: var(--layer8a468-surface-2);
  margin-bottom: 9px;
  overflow: hidden;
}

.layer8a468-faq summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 13px;
  font-family: var(--layer8a468-font-round);
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  list-style: none;
}

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

.layer8a468-faq summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--layer8a468-accent-soft);
  color: var(--layer8a468-accent);
  font-size: 15px;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.layer8a468-faq[open] summary::after {
  content: "-";
  background: var(--layer8a468-accent);
  color: #262626;
}

.layer8a468-faq[open] summary { color: var(--layer8a468-accent); }

.layer8a468-faq-body {
  padding: 0 13px 13px;
  font-size: 13px;
  color: var(--layer8a468-fg);
}

/* --- takeaways --- */
.layer8a468-take {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: layer8a468-take;
}

.layer8a468-take li {
  position: relative;
  counter-increment: layer8a468-take;
  padding: 10px 12px 10px 46px;
  background: var(--layer8a468-surface-2);
  border: 1px solid var(--layer8a468-line);
  border-radius: var(--layer8a468-radius-card);
  margin-bottom: 8px;
  font-size: 13px;
}

.layer8a468-take li::before {
  content: counter(layer8a468-take);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--layer8a468-accent);
  color: #262626;
  font-family: var(--layer8a468-font-round);
  font-size: 13px;
  font-weight: 800;
}

/* --- extended footer: brand > promotions > directory > disclaimer --- */
.layer8a468-xfoot {
  margin-top: 26px;
  padding: 24px 14px 8px;
  border-top: 1px solid var(--layer8a468-line);
  background: var(--layer8a468-surface-2);
}

.layer8a468-xfoot-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.layer8a468-xfoot-brand .layer8a468-logo {
  flex: none;
  width: 34px;
  height: 34px;
}

.layer8a468-xfoot-label {
  font-family: var(--layer8a468-font-round);
  font-size: 13px;
  font-weight: 700;
  color: var(--layer8a468-fg-dim);
  letter-spacing: 0.4px;
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--layer8a468-line);
}

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

.layer8a468-promo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 9px 11px;
  background: var(--layer8a468-surface);
  border: 1px solid rgba(255, 239, 148, 0.26);
  border-radius: var(--layer8a468-radius-card);
  font-size: 12.5px;
  color: #FFFFFF;
  text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.layer8a468-promo:active {
  border-color: var(--layer8a468-accent);
  background: #313131;
}

.layer8a468-promo-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--layer8a468-accent-soft);
  color: var(--layer8a468-accent);
}

.layer8a468-promo-ico svg { width: 18px; height: 18px; }

.layer8a468-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.layer8a468-dirlink {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--layer8a468-touch);
  padding: 9px 11px;
  border-radius: var(--layer8a468-radius-tile);
  background: var(--layer8a468-surface);
  border: 1px solid var(--layer8a468-line);
  color: var(--layer8a468-fg);
  font-size: 12.5px;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.layer8a468-dirlink svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--layer8a468-fg-dim);
  transition: color 0.25s ease;
}

.layer8a468-dirlink:hover,
.layer8a468-dirlink:focus-visible {
  border-color: rgba(255, 239, 148, 0.45);
  color: #FFFFFF;
}

.layer8a468-dirlink:hover svg { color: var(--layer8a468-accent); }

.layer8a468-note {
  margin-top: 18px;
  padding: 11px 12px;
  border-radius: var(--layer8a468-radius-card);
  background: rgba(204, 204, 204, 0.06);
  font-size: 11px;
  line-height: 1.6;
  color: var(--layer8a468-fg-dim);
}

/* --- common copyright footer --- */
.layer8a468-foot {
  padding: 16px 14px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--layer8a468-fg-dim);
  border-top: 1px solid var(--layer8a468-line);
}

/* --- mobile bottom dock: compact icon rack --- */
.layer8a468-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--layer8a468-canvas);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(30, 30, 30, 0.97);
  border-top: 1px solid var(--layer8a468-line);
  backdrop-filter: blur(8px);
}

.layer8a468-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 52px;
  padding: 4px 2px;
  border-radius: 12px;
  color: var(--layer8a468-fg-dim);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.layer8a468-dock-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--layer8a468-radius-tile);
  background: rgba(204, 204, 204, 0.07);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.layer8a468-dock-ico svg {
  width: 19px;
  height: 19px;
  transition: transform 0.25s ease;
}

.layer8a468-dock-item:active .layer8a468-dock-ico svg { transform: scale(1.15); }

.layer8a468-dock-item span {
  font-size: 10px;
  line-height: 1;
}

.layer8a468-dock-item.is-here {
  color: var(--layer8a468-accent);
}

.layer8a468-dock-item.is-here .layer8a468-dock-ico {
  background: var(--layer8a468-accent-soft);
  color: var(--layer8a468-accent);
}

/* --- help page reading modules --- */
.layer8a468-page-hero {
  position: relative;
  padding: 16px 14px 17px;
  margin: 0 0 4px;
  border: 1px solid rgba(255, 239, 148, 0.3);
  border-radius: 18px;
  background: linear-gradient(135deg, #34342d 0%, #292929 62%, #232323 100%);
  overflow: hidden;
}

.layer8a468-page-hero::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -34px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255, 239, 148, 0.26);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(255, 239, 148, 0.06), 0 0 0 28px rgba(255, 239, 148, 0.04);
  pointer-events: none;
}

.layer8a468-page-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 5px;
  color: var(--layer8a468-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.layer8a468-page-hero .layer8a468-h1 { position: relative; z-index: 1; margin-top: 0; }
.layer8a468-page-hero .layer8a468-p { position: relative; z-index: 1; max-width: 40em; }

.layer8a468-step-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: layer8a468-step; }

.layer8a468-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--layer8a468-line);
  border-radius: 13px;
  background: var(--layer8a468-surface-2);
  counter-increment: layer8a468-step;
}

.layer8a468-step-no {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--layer8a468-accent);
  color: #262626;
  font-family: var(--layer8a468-font-round);
  font-size: 15px;
  font-weight: 800;
}

.layer8a468-step-no::before { content: counter(layer8a468-step); }
.layer8a468-step h3 { margin: 0 0 4px; color: #FFFFFF; font-family: var(--layer8a468-font-round); font-size: 15px; line-height: 1.35; }
.layer8a468-step p { margin: 0; font-size: 13px; }

.layer8a468-callout {
  margin: 10px 0;
  padding: 12px 13px;
  border-left: 4px solid var(--layer8a468-accent);
  border-radius: 0 12px 12px 0;
  background: var(--layer8a468-accent-soft);
  color: #F1F1F1;
}

.layer8a468-callout strong { color: var(--layer8a468-accent); }
.layer8a468-checklist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.layer8a468-checklist li {
  position: relative;
  padding: 10px 11px 10px 35px;
  border: 1px solid var(--layer8a468-line);
  border-radius: 10px;
  background: var(--layer8a468-surface);
  font-size: 13px;
}

.layer8a468-checklist li::before { content: "✓"; position: absolute; left: 12px; color: var(--layer8a468-accent); font-weight: 800; }
.layer8a468-answer-list { display: grid; gap: 8px; margin: 0; }

.layer8a468-answer-list details {
  border-bottom: 1px solid var(--layer8a468-line);
  padding: 0 0 8px;
}

.layer8a468-answer-list summary { min-height: 44px; padding: 9px 0; color: #FFFFFF; font-family: var(--layer8a468-font-round); font-weight: 700; cursor: pointer; }
.layer8a468-answer-list p { margin: 0 0 4px; font-size: 13px; }
.layer8a468-fact-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 8px 0; }
.layer8a468-fact-band span { display: block; padding: 10px 6px; border-radius: 11px; background: var(--layer8a468-surface); border: 1px solid var(--layer8a468-line); color: var(--layer8a468-accent); text-align: center; font-family: var(--layer8a468-font-round); font-size: 12px; }
.layer8a468-fact-band small { display: block; margin-top: 2px; color: var(--layer8a468-fg-dim); font-family: var(--layer8a468-font-compact); font-size: 10px; }
.layer8a468-promo-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 10px 0 2px; padding-bottom: 2px; }
.layer8a468-promo-strip::-webkit-scrollbar { display: none; }
.layer8a468-promo-strip .layer8a468-btn { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; white-space: nowrap; }
.layer8a468-source-note { color: var(--layer8a468-fg-dim); font-size: 11.5px; }

/* --- narrow phone canvas: 430px breakpoint --- */
@media (max-width: 430px) {
  .layer8a468-main { padding: 116px 11px calc(98px + env(safe-area-inset-bottom)); }
  .layer8a468-h1 { font-size: 20px; }
  .layer8a468-h2 { font-size: 16.5px; }
  .layer8a468-ggrid { gap: 7px; }
  .layer8a468-gcard { min-height: 56px; gap: 5px; padding: 6px 5px; }
  .layer8a468-gthumb { flex-basis: 36px; width: 36px; height: 36px; }
  .layer8a468-gname { font-size: 11.5px; }
  .layer8a468-slide-cap { font-size: 13.5px; }
  .layer8a468-facts { gap: 6px; }
  .layer8a468-fact-chip { font-size: 11px; padding: 7px 4px; }
  .layer8a468-head-act { padding: 6px 11px 9px; }
  .layer8a468-btn-primary { font-size: 14.5px; }
  .layer8a468-promos,
  .layer8a468-directory { gap: 7px; }
  .layer8a468-dock-item span { font-size: 9.5px; }
  .layer8a468-xfoot { padding: 20px 11px 8px; }
}

/* --- slightly larger canvas --- */
@media (min-width: 431px) {
  .layer8a468-main { padding: 126px 18px calc(104px + env(safe-area-inset-bottom)); }
  .layer8a468-h1 { font-size: 24px; }
  .layer8a468-h2 { font-size: 19px; }
  .layer8a468-gname { font-size: 12.5px; }
}

/* --- very narrow legacy phones --- */
@media (max-width: 340px) {
  .layer8a468-routes,
  .layer8a468-promos,
  .layer8a468-directory { grid-template-columns: 1fr; }
  .layer8a468-brand { font-size: 19px; }
}

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