/*!
 * NuStar Gaming - Adaptive Interface Layer
 * Mobile-first styling for the NuStar Gaming phone canvas (320-430px).
 * Every class and CSS variable carries the site prefix layer12fb8-.
 */

:root {
  /* Palette tokens derived from the site brief. */
  --layer12fb8-ink: #141414;
  --layer12fb8-graphite: #4a4a4a;
  --layer12fb8-wheat: #f5deb3;
  --layer12fb8-moccasin: #ffe4b5;
  --layer12fb8-cream: #f8f8ff;

  /* Derived surfaces. */
  --layer12fb8-surface: #1b1b1b;
  --layer12fb8-surface-raised: #232323;
  --layer12fb8-line: rgba(245, 222, 179, 0.18);
  --layer12fb8-line-strong: rgba(245, 222, 179, 0.42);
  --layer12fb8-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --layer12fb8-shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.35);

  /* Geometry. */
  --layer12fb8-radius-card: 14px;
  --layer12fb8-radius-pill: 999px;
  --layer12fb8-radius-button: 10px;
  --layer12fb8-tap: 44px;
  --layer12fb8-canvas: 430px;

  /* Typography. */
  --layer12fb8-font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --layer12fb8-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--layer12fb8-font-body);
  color: var(--layer12fb8-cream);
  background: #0c0c0c;
  line-height: 1.55;
  font-size: 15px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--layer12fb8-wheat);
  text-decoration: none;
}
a:hover, a:focus { color: var(--layer12fb8-moccasin); text-decoration: underline; }

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

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

/* Centered phone canvas. */
.layer12fb8-shell {
  max-width: var(--layer12fb8-canvas);
  margin: 0 auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 228, 181, 0.08), transparent 55%),
    radial-gradient(circle at 90% 18%, rgba(245, 222, 179, 0.06), transparent 45%),
    linear-gradient(180deg, #1a1a1a 0%, #101010 60%, #0b0b0b 100%);
  min-height: 100vh;
  position: relative;
  box-shadow: var(--layer12fb8-shadow);
  padding-bottom: 76px; /* keeps content clear of the fixed bottom shelf */
}

/* ============================================================
 * Top centered identity bar
 * ============================================================ */
.layer12fb8-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 12px 10px;
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--layer12fb8-line);
}

.layer12fb8-header__bar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
}

.layer12fb8-id {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: var(--layer12fb8-cream);
}

.layer12fb8-id:hover { text-decoration: none; }

.layer12fb8-id__logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--layer12fb8-wheat);
  flex-shrink: 0;
  background: #0d0d0d;
}

.layer12fb8-id__name {
  font-family: var(--layer12fb8-font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--layer12fb8-wheat);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.layer12fb8-id__name em {
  font-style: normal;
  color: var(--layer12fb8-moccasin);
}

.layer12fb8-header__spacer { width: 40px; }

.layer12fb8-icon-button {
  width: var(--layer12fb8-tap);
  height: var(--layer12fb8-tap);
  border-radius: var(--layer12fb8-radius-button);
  background: transparent;
  border: 1px solid var(--layer12fb8-line);
  color: var(--layer12fb8-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.layer12fb8-icon-button:hover,
.layer12fb8-icon-button--active {
  color: var(--layer12fb8-moccasin);
  border-color: var(--layer12fb8-wheat);
  background: rgba(245, 222, 179, 0.08);
}

.layer12fb8-header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.layer12fb8-header-actions .layer12fb8-btn {
  flex: 1 1 0;
  max-width: 160px;
}

/* Compact icon-text CTA buttons. */
.layer12fb8-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--layer12fb8-radius-button);
  padding: 9px 16px;
  min-height: var(--layer12fb8-tap);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.12s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.layer12fb8-btn--primary {
  background: linear-gradient(180deg, var(--layer12fb8-moccasin), var(--layer12fb8-wheat));
  color: #2a1d05;
  border-color: var(--layer12fb8-wheat);
  box-shadow: 0 6px 14px rgba(245, 222, 179, 0.2);
}

.layer12fb8-btn--primary:hover {
  transform: translateY(-1px);
  color: #2a1d05;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(245, 222, 179, 0.32);
}

.layer12fb8-btn--ghost {
  background: transparent;
  color: var(--layer12fb8-cream);
  border-color: var(--layer12fb8-line-strong);
}

.layer12fb8-btn--ghost:hover {
  color: var(--layer12fb8-moccasin);
  border-color: var(--layer12fb8-wheat);
  text-decoration: none;
}

.layer12fb8-btn--block { width: 100%; }

.layer12fb8-btn svg { width: 16px; height: 16px; }

/* ============================================================
 * Stacked overlay menu
 * ============================================================ */
.layer12fb8-menu {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 8, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 60;
  padding: 18px 18px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
  overflow-y: auto;
}

.layer12fb8-menu--open {
  opacity: 1;
  visibility: visible;
}

.layer12fb8-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.layer12fb8-menu__heading {
  font-family: var(--layer12fb8-font-head);
  font-size: 16px;
  color: var(--layer12fb8-wheat);
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layer12fb8-menu__group {
  margin: 14px 0 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--layer12fb8-wheat);
  opacity: 0.78;
}

.layer12fb8-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer12fb8-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border-radius: var(--layer12fb8-radius-button);
  color: var(--layer12fb8-cream);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--layer12fb8-line);
  background: rgba(245, 222, 179, 0.04);
  min-height: var(--layer12fb8-tap);
}

.layer12fb8-menu__link:hover, .layer12fb8-menu__link:focus {
  background: rgba(245, 222, 179, 0.1);
  color: var(--layer12fb8-moccasin);
  text-decoration: none;
  border-color: var(--layer12fb8-wheat);
}

.layer12fb8-menu__link span {
  font-size: 11px;
  color: var(--layer12fb8-wheat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layer12fb8-menu__cta {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ============================================================
 * Main layout
 * ============================================================ */
.layer12fb8-main { padding: 14px 14px 0; }

.layer12fb8-section { margin: 24px 0 0; }

.layer12fb8-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--layer12fb8-line);
}

.layer12fb8-section__title {
  font-family: var(--layer12fb8-font-head);
  font-size: 19px;
  color: var(--layer12fb8-moccasin);
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.layer12fb8-section__hint {
  font-size: 10px;
  color: var(--layer12fb8-wheat);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.78;
  white-space: nowrap;
}

/* Hero heading + intro strip. */
.layer12fb8-hero {
  margin: 4px 0 14px;
}

.layer12fb8-hero__title {
  font-family: var(--layer12fb8-font-head);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--layer12fb8-cream);
  letter-spacing: 0.01em;
}

.layer12fb8-hero__title em {
  font-style: normal;
  color: var(--layer12fb8-moccasin);
}

.layer12fb8-hero__lede {
  margin: 0;
  font-size: 13px;
  color: rgba(248, 248, 255, 0.86);
}

/* Quick category chips. */
.layer12fb8-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  margin: 0 0 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.layer12fb8-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--layer12fb8-radius-pill);
  border: 1px solid var(--layer12fb8-line);
  background: rgba(74, 74, 74, 0.22);
  color: var(--layer12fb8-cream);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.layer12fb8-chip:hover {
  color: var(--layer12fb8-moccasin);
  border-color: var(--layer12fb8-wheat);
  background: rgba(245, 222, 179, 0.08);
  text-decoration: none;
}

/* Trust strip. */
.layer12fb8-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 4px;
}

.layer12fb8-trust__item {
  background: rgba(74, 74, 74, 0.18);
  border: 1px solid var(--layer12fb8-line);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}

.layer12fb8-trust__num {
  font-family: var(--layer12fb8-font-head);
  font-size: 17px;
  color: var(--layer12fb8-moccasin);
  display: block;
}

.layer12fb8-trust__label {
  font-size: 10px;
  color: rgba(248, 248, 255, 0.78);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
 * Carousel
 * ============================================================ */
.layer12fb8-carousel {
  position: relative;
  border-radius: var(--layer12fb8-radius-card);
  overflow: hidden;
  background: var(--layer12fb8-graphite);
  box-shadow: var(--layer12fb8-shadow);
}

.layer12fb8-slide {
  position: relative;
  display: none;
}

.layer12fb8-slide--active { display: block; }

.layer12fb8-slide__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.layer12fb8-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 30%, rgba(15, 15, 15, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
}

.layer12fb8-slide__tag {
  font-size: 10px;
  color: #2a1d05;
  background: var(--layer12fb8-wheat);
  padding: 3px 9px;
  border-radius: var(--layer12fb8-radius-pill);
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 6px;
}

.layer12fb8-slide__title {
  font-family: var(--layer12fb8-font-head);
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--layer12fb8-cream);
  line-height: 1.2;
}

.layer12fb8-slide__text {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: rgba(248, 248, 255, 0.88);
}

.layer12fb8-slide__cta { align-self: flex-start; }

.layer12fb8-dots {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.layer12fb8-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(248, 248, 255, 0.35);
  padding: 0;
  border: none;
}

.layer12fb8-dot[aria-selected="true"] {
  background: var(--layer12fb8-wheat);
  transform: scale(1.18);
}

/* ============================================================
 * Game grid (compact icon-name tiles)
 * ============================================================ */
.layer12fb8-game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.layer12fb8-game {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(74, 74, 74, 0.18);
  border: 1px solid var(--layer12fb8-line);
  border-radius: 12px;
  padding: 6px 5px 7px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
  color: var(--layer12fb8-cream);
}

.layer12fb8-game:hover, .layer12fb8-game:focus {
  border-color: var(--layer12fb8-wheat);
  background: rgba(245, 222, 179, 0.08);
  text-decoration: none;
  transform: translateY(-2px);
  color: var(--layer12fb8-cream);
}

.layer12fb8-game__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9px;
  background: #0d0d0d;
}

.layer12fb8-game__name {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--layer12fb8-cream);
  line-height: 1.2;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 26px;
}

@media (min-width: 360px) {
  .layer12fb8-game-grid { gap: 10px; }
  .layer12fb8-game__name { font-size: 11px; }
}

@media (min-width: 410px) {
  .layer12fb8-game-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
 * Content modules
 * ============================================================ */
.layer12fb8-card {
  background: rgba(74, 74, 74, 0.16);
  border: 1px solid var(--layer12fb8-line);
  border-radius: var(--layer12fb8-radius-card);
  padding: 14px;
}

.layer12fb8-card + .layer12fb8-card { margin-top: 10px; }

.layer12fb8-prose { font-size: 13.5px; color: rgba(248, 248, 255, 0.92); }
.layer12fb8-prose p { margin: 0 0 10px; }
.layer12fb8-prose p:last-child { margin-bottom: 0; }
.layer12fb8-prose strong { color: var(--layer12fb8-moccasin); font-weight: 600; }

.layer12fb8-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer12fb8-list li {
  position: relative;
  padding: 8px 8px 8px 22px;
  font-size: 12.5px;
  background: rgba(15, 15, 15, 0.5);
  border-radius: 8px;
  border: 1px solid var(--layer12fb8-line);
  line-height: 1.4;
}

.layer12fb8-list li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--layer12fb8-wheat);
}

/* Compact comparison columns. */
.layer12fb8-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.layer12fb8-grid-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 400px) {
  .layer12fb8-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.layer12fb8-mini {
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid var(--layer12fb8-line);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  line-height: 1.4;
}

.layer12fb8-mini__title {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--layer12fb8-moccasin);
  font-family: var(--layer12fb8-font-head);
}

.layer12fb8-mini__meta {
  font-size: 10px;
  color: var(--layer12fb8-wheat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* Testimonials. */
.layer12fb8-quote {
  background: rgba(15, 15, 15, 0.5);
  border-left: 3px solid var(--layer12fb8-wheat);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
}

.layer12fb8-quote:last-child { margin-bottom: 0; }

.layer12fb8-quote__author {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--layer12fb8-wheat);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Inline promo text link. */
.layer12fb8-promo-link {
  color: var(--layer12fb8-moccasin);
  font-weight: 600;
  border-bottom: 1px dashed var(--layer12fb8-wheat);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 0 0 1px;
  display: inline;
}

.layer12fb8-promo-link:hover {
  color: var(--layer12fb8-wheat);
  text-decoration: none;
}

/* Pros vs limitations two-column block. */
.layer12fb8-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.layer12fb8-split__col {
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid var(--layer12fb8-line);
  border-radius: 10px;
  padding: 10px;
}

.layer12fb8-split__title {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--layer12fb8-font-head);
}

.layer12fb8-split__title--good { color: var(--layer12fb8-moccasin); }
.layer12fb8-split__title--care { color: #d8a878; }

.layer12fb8-split__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
}

.layer12fb8-split__list li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--layer12fb8-line);
}

.layer12fb8-split__list li:last-child { border-bottom: none; }

/* ============================================================
 * Extended footer
 * ============================================================ */
.layer12fb8-extended {
  margin: 26px 0 0;
  padding: 18px 14px;
  background:
    linear-gradient(180deg, rgba(74, 74, 74, 0.25), rgba(15, 15, 15, 0.7));
  border-top: 1px solid var(--layer12fb8-line);
}

.layer12fb8-extended__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.layer12fb8-extended__brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--layer12fb8-wheat);
}

.layer12fb8-extended__brand-text {
  font-size: 12.5px;
  color: rgba(248, 248, 255, 0.85);
  margin: 0;
  line-height: 1.45;
}

.layer12fb8-extended__title {
  font-family: var(--layer12fb8-font-head);
  font-size: 14px;
  color: var(--layer12fb8-moccasin);
  margin: 12px 0 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.layer12fb8-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 6px 0 10px;
}

.layer12fb8-shortcut {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--layer12fb8-radius-button);
  border: 1px solid var(--layer12fb8-line);
  background: rgba(15, 15, 15, 0.55);
  color: var(--layer12fb8-cream);
  font-size: 12px;
  min-height: 40px;
  line-height: 1.2;
}

.layer12fb8-shortcut:hover {
  color: var(--layer12fb8-moccasin);
  border-color: var(--layer12fb8-wheat);
  background: rgba(245, 222, 179, 0.08);
  text-decoration: none;
}

.layer12fb8-shortcut--promo {
  background: linear-gradient(180deg, rgba(255, 228, 181, 0.18), rgba(245, 222, 179, 0.06));
  border-color: var(--layer12fb8-wheat);
  color: var(--layer12fb8-moccasin);
  font-weight: 600;
}

.layer12fb8-shortcut--promo:hover {
  color: var(--layer12fb8-wheat);
  background: linear-gradient(180deg, rgba(255, 228, 181, 0.28), rgba(245, 222, 179, 0.1));
}

.layer12fb8-shortcut svg, .layer12fb8-shortcut img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.layer12fb8-disclaimer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--layer12fb8-line);
  font-size: 11px;
  color: rgba(248, 248, 255, 0.55);
  line-height: 1.5;
}

/* Copyright footer. */
.layer12fb8-footer {
  padding: 12px 14px;
  text-align: center;
  font-size: 11px;
  color: rgba(248, 248, 255, 0.55);
  border-top: 1px solid var(--layer12fb8-line);
  background: rgba(10, 10, 10, 0.7);
  line-height: 1.5;
}

.layer12fb8-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-bottom: 6px;
}

.layer12fb8-footer__links a {
  color: rgba(248, 248, 255, 0.7);
  font-size: 11px;
}

.layer12fb8-footer__links a:hover {
  color: var(--layer12fb8-moccasin);
}

/* ============================================================
 * Bottom navigation shelf (5 roles)
 * ============================================================ */
.layer12fb8-bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--layer12fb8-canvas);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(12, 12, 12, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--layer12fb8-line);
  padding: 5px 4px calc(env(safe-area-inset-bottom, 0px) + 5px);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45);
}

.layer12fb8-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px 4px;
  color: rgba(248, 248, 255, 0.72);
  font-size: 10px;
  border-radius: 8px;
  min-height: 52px;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
  background: none;
  border: none;
  letter-spacing: 0.02em;
}

.layer12fb8-nav-item:hover {
  color: var(--layer12fb8-moccasin);
  text-decoration: none;
}

.layer12fb8-nav-item--promo {
  color: var(--layer12fb8-wheat);
}

.layer12fb8-nav-item--promo .layer12fb8-nav-item__icon {
  color: var(--layer12fb8-moccasin);
}

.layer12fb8-nav-item--active {
  color: #2a1d05;
  background: linear-gradient(180deg, var(--layer12fb8-moccasin), var(--layer12fb8-wheat));
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(245, 222, 179, 0.18);
}

.layer12fb8-nav-item--active .layer12fb8-nav-item__icon { color: #2a1d05; }

.layer12fb8-nav-item__icon {
  width: 22px;
  height: 22px;
  color: currentColor;
}

.layer12fb8-nav-item__label {
  letter-spacing: 0.02em;
  font-size: 10px;
  line-height: 1;
}

/* ============================================================
 * Help center layouts
 * ============================================================ */
.layer12fb8-kicker {
  margin: 0 0 7px;
  color: var(--layer12fb8-wheat);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.layer12fb8-help-hero, .layer12fb8-safety-mast {
  padding: 16px 14px 18px;
  border: 1px solid var(--layer12fb8-line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,222,179,.13), rgba(74,74,74,.14));
  box-shadow: var(--layer12fb8-shadow-soft);
}
.layer12fb8-help-hero .layer12fb8-hero__title, .layer12fb8-safety-mast .layer12fb8-hero__title { font-size: 25px; }
.layer12fb8-action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.layer12fb8-action-row .layer12fb8-btn { flex: 1 1 130px; }
.layer12fb8-guide-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }
.layer12fb8-guide-rail div { min-height: 56px; padding: 8px 5px; border-left: 2px solid var(--layer12fb8-wheat); background: rgba(74,74,74,.18); }
.layer12fb8-guide-rail b, .layer12fb8-guide-rail span { display: block; }
.layer12fb8-guide-rail b { color: var(--layer12fb8-moccasin); font-family: var(--layer12fb8-font-head); font-size: 17px; }
.layer12fb8-guide-rail span { color: rgba(248,248,255,.7); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.layer12fb8-guide-section { margin-top: 26px; }
.layer12fb8-guide-callout { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; padding: 11px; border: 1px solid var(--layer12fb8-line-strong); border-radius: 12px; background: rgba(245,222,179,.08); }
.layer12fb8-guide-callout p { margin: 0; font-size: 13px; }
.layer12fb8-callout-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--layer12fb8-wheat); color: #2a1d05; font-weight: 800; }
.layer12fb8-numbered { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.layer12fb8-numbered li { display: flex; gap: 9px; padding: 10px; border: 1px solid var(--layer12fb8-line); border-radius: 10px; background: rgba(15,15,15,.46); font-size: 12.5px; }
.layer12fb8-numbered li > span { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; background: var(--layer12fb8-moccasin); color: #2a1d05; font-weight: 800; }
.layer12fb8-decision-list, .layer12fb8-compare-grid { display: grid; gap: 8px; }
.layer12fb8-decision-list article, .layer12fb8-compare-grid article { padding: 12px; border: 1px solid var(--layer12fb8-line); border-radius: 12px; background: rgba(15,15,15,.46); }
.layer12fb8-decision-list h3, .layer12fb8-compare-grid h3 { margin: 0 0 5px; font: 600 16px/1.2 var(--layer12fb8-font-head); color: var(--layer12fb8-moccasin); }
.layer12fb8-decision-list p, .layer12fb8-compare-grid p { margin: 0 0 9px; font-size: 12.5px; }
.layer12fb8-decision-list .layer12fb8-btn { width: 100%; }
.layer12fb8-payment-table { margin: 12px 0; border: 1px solid var(--layer12fb8-line); border-radius: 11px; overflow: hidden; }
.layer12fb8-payment-row { display: grid; grid-template-columns: .85fr 1.15fr 1.1fr; gap: 5px; padding: 9px 8px; font-size: 11px; border-bottom: 1px solid var(--layer12fb8-line); }
.layer12fb8-payment-row:last-child { border-bottom: 0; }
.layer12fb8-payment-row--head { color: var(--layer12fb8-wheat); background: rgba(245,222,179,.1); text-transform: uppercase; letter-spacing: .06em; font-size: 9px; }
.layer12fb8-payment-row strong { color: var(--layer12fb8-moccasin); }
.layer12fb8-branch-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 7px; }
.layer12fb8-branch-list li { padding: 9px 10px; border-left: 3px solid var(--layer12fb8-wheat); background: rgba(15,15,15,.48); font-size: 12.5px; }
.layer12fb8-term-list { margin: 10px 0; display: grid; gap: 7px; }
.layer12fb8-term-list div { padding: 10px; border: 1px solid var(--layer12fb8-line); border-radius: 10px; background: rgba(74,74,74,.12); }
.layer12fb8-term-list dt { color: var(--layer12fb8-moccasin); font: 600 15px var(--layer12fb8-font-head); }
.layer12fb8-term-list dd { margin: 4px 0 0; font-size: 12.5px; }
.layer12fb8-compare-grid .layer12fb8-promo-link { font-size: 12px; }
.layer12fb8-faq-band { padding: 13px; border: 1px solid var(--layer12fb8-line); border-radius: 14px; background: rgba(74,74,74,.14); }
.layer12fb8-faq-band details { border-top: 1px solid var(--layer12fb8-line); padding: 10px 0; }
.layer12fb8-faq-band details:first-of-type { border-top: 0; }
.layer12fb8-faq-band summary { cursor: pointer; color: var(--layer12fb8-moccasin); font-weight: 600; font-size: 13px; min-height: 32px; }
.layer12fb8-faq-band details p { margin: 6px 0 0; font-size: 12.5px; color: rgba(248,248,255,.85); }
.layer12fb8-help-end, .layer12fb8-safety-end { margin-top: 24px; padding: 14px; border-radius: 13px; background: var(--layer12fb8-wheat); color: #2a1d05; font-size: 13px; }
.layer12fb8-help-end p, .layer12fb8-safety-end p { margin: 0; }
.layer12fb8-safety-mast { text-align: left; position: relative; padding-right: 62px; }
.layer12fb8-safety-mast > .layer12fb8-btn { margin-top: 13px; }
.layer12fb8-safety-shield { position: absolute; right: 14px; top: 17px; display: grid; place-items: center; width: 38px; height: 44px; border: 2px solid var(--layer12fb8-wheat); color: var(--layer12fb8-moccasin); clip-path: polygon(50% 0, 94% 16%, 87% 72%, 50% 100%, 13% 72%, 6% 16%); font-size: 20px; font-weight: 800; background: rgba(245,222,179,.1); }
.layer12fb8-safety-score { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 12px 0 2px; }
.layer12fb8-safety-score div { padding: 9px 6px; border-bottom: 2px solid var(--layer12fb8-wheat); background: rgba(74,74,74,.17); }
.layer12fb8-score-dot { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 4px; border-radius: 50%; background: var(--layer12fb8-moccasin); color: #2a1d05; font-size: 11px; font-weight: 800; }
.layer12fb8-safety-score strong, .layer12fb8-safety-score small { display: block; }
.layer12fb8-safety-score strong { color: var(--layer12fb8-moccasin); font-size: 11px; }
.layer12fb8-safety-score small { margin-top: 4px; color: rgba(248,248,255,.65); font-size: 9px; line-height: 1.25; }
.layer12fb8-safety-panel { margin-top: 25px; }
.layer12fb8-url-check { display: flex; gap: 10px; align-items: center; padding: 11px; margin: 12px 0; border: 1px solid var(--layer12fb8-line-strong); border-radius: 12px; background: #101010; }
.layer12fb8-url-lock { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #2a1d05; background: var(--layer12fb8-wheat); font-size: 19px; }
.layer12fb8-url-check small, .layer12fb8-url-check strong, .layer12fb8-url-check em { display: block; }
.layer12fb8-url-check small { color: var(--layer12fb8-wheat); font-size: 9px; letter-spacing: .12em; }
.layer12fb8-url-check strong { color: var(--layer12fb8-cream); font-size: 12px; overflow-wrap: anywhere; }
.layer12fb8-url-check em { color: rgba(248,248,255,.62); font-size: 10px; }
.layer12fb8-security-checklist { display: grid; gap: 6px; margin: 12px 0; }
.layer12fb8-security-checklist label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--layer12fb8-line); border-radius: 9px; background: rgba(15,15,15,.48); font-size: 12px; }
.layer12fb8-security-checklist input { width: 18px; height: 18px; accent-color: var(--layer12fb8-wheat); }
.layer12fb8-mistake-list { display: grid; gap: 8px; }
.layer12fb8-mistake-list article { display: flex; gap: 9px; padding: 11px; border: 1px solid var(--layer12fb8-line); border-radius: 12px; background: rgba(15,15,15,.47); }
.layer12fb8-mistake-no { color: var(--layer12fb8-wheat); font: 700 13px var(--layer12fb8-font-head); }
.layer12fb8-mistake-list h3, .layer12fb8-qa-row h3, .layer12fb8-condition-map h3 { margin: 0 0 4px; color: var(--layer12fb8-moccasin); font: 600 15px/1.2 var(--layer12fb8-font-head); }
.layer12fb8-mistake-list p, .layer12fb8-qa-row p, .layer12fb8-condition-map p { margin: 0 0 8px; font-size: 12.5px; }
.layer12fb8-mistake-list .layer12fb8-btn, .layer12fb8-qa-row .layer12fb8-btn { width: 100%; }
.layer12fb8-qa-panel { display: grid; gap: 0; }
.layer12fb8-qa-panel .layer12fb8-section__head { grid-column: 1 / -1; }
.layer12fb8-qa-row { padding: 11px 0; border-bottom: 1px solid var(--layer12fb8-line); }
.layer12fb8-qa-row:last-child { border-bottom: 0; }
.layer12fb8-condition-map, .layer12fb8-criteria-list { display: grid; gap: 8px; }
.layer12fb8-condition-map article { padding: 11px; border-top: 2px solid var(--layer12fb8-wheat); background: rgba(74,74,74,.14); }
.layer12fb8-criteria-list div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--layer12fb8-line); border-radius: 10px; background: rgba(15,15,15,.46); }
.layer12fb8-criteria-list strong { color: var(--layer12fb8-moccasin); font-family: var(--layer12fb8-font-head); }
.layer12fb8-criteria-list span { font-size: 12px; }
.layer12fb8-boundary-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 12px 0; }
.layer12fb8-boundary-strip div { padding: 9px 6px; border: 1px solid var(--layer12fb8-line); border-radius: 9px; text-align: center; }
.layer12fb8-boundary-strip b, .layer12fb8-boundary-strip span { display: block; }
.layer12fb8-boundary-strip b { color: var(--layer12fb8-moccasin); font-size: 12px; }
.layer12fb8-boundary-strip span { color: rgba(248,248,255,.66); font-size: 9px; line-height: 1.3; }

/* ============================================================
 * Utilities
 * ============================================================
.layer12fb8-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}