/* ===========================================
   PAGE: BiteMap (loaded after style.css)
   The hero is a room, as in the app: the character stands in a glow of its
   own colour, and the whole stage takes that colour when you switch.
   =========================================== */

.bm-hero {
  --room: #30734D;
  --light: #619775;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + var(--space-10)) var(--gutter) var(--space-12);
  background:
    radial-gradient(ellipse 70% 60% at 68% 45%, var(--light) 0%, transparent 70%),
    var(--room);
  transition: background-color 0.6s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.bm-hero__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.bm-hero__copy {
  text-align: center;
  position: relative;
  z-index: 2;
}

.bm-hero__title {
  font-size: clamp(56px, 9vw, 104px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  margin: 0 0 var(--space-4);
}

.bm-hero__lead {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 var(--space-4);
}

.bm-hero__lead em {
  font-style: normal;
  color: #F6B5CF;
}

.bm-hero__desc {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.82);
  max-width: 440px;
  margin: 0 auto var(--space-8);
}

.bm-hero .store-badges { justify-content: center; }

.bm-hero .bitemap-hero__links { justify-content: center; }

.bm-hero .bitemap-hero__link,
.bm-hero .bitemap-hero__sep { color: rgba(255, 255, 255, 0.75); }

.bm-hero .bitemap-hero__link:hover { color: #fff; }

/* The stage: the model, its floor shadow, and the picker under it. */
.bm-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bm-stage__viewer {
  width: min(88vw, 520px);
  height: min(100vw, 600px);
  --poster-color: transparent;
  background: transparent;
  touch-action: pan-y;
  cursor: grab;
}

.bm-stage__viewer:active { cursor: grabbing; }

.bm-stage__viewer::part(default-progress-bar) { display: none; }

.bm-stage__hint {
  margin-top: calc(-1 * var(--space-4));
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bm-stage__name {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
}

.bm-picker {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 520px;
  padding: 0;
  list-style: none;
}

.bm-picker__chip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.bm-picker__chip img {
  width: 40px;
  height: auto;
  transform: translateY(6px);
}

.bm-picker__chip:hover { transform: scale(1.08); }

.bm-picker__chip[aria-pressed="true"] { border-color: #fff; }

.bm-picker__chip:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Phones: the character first, where the eye lands, then the words. */
@media (max-width: 899px) {
  .bm-stage { order: -1; }
  .bm-stage__viewer { height: min(52vh, 440px); }
  .bm-hero { padding-top: calc(var(--nav-height) + var(--space-4)); }
  .bm-hero__inner { gap: var(--space-6); }
}

@media (min-width: 900px) {
  .bm-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .bm-hero__copy { text-align: left; }

  .bm-hero__desc { margin-left: 0; }

  .bm-hero .store-badges,
  .bm-hero .bitemap-hero__links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-hero { transition: none; }
}

/* ----- Below the hero: dark and quiet, so the coloured room above leads. ----- */

.bm-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.bm-heading {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
  margin: 0 0 var(--space-12);
}

.bm-how {
  padding: var(--space-20) var(--gutter);
  background: #1B1622;
}

.bm-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.bm-step {
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
}

.bm-step__phone {
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-6);
  display: block;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

.bm-step__num {
  width: 32px;
  height: 32px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: #F6B5CF;
  color: #1B1622;
  font-weight: 900;
  font-size: 15px;
  line-height: 32px;
}

.bm-step__title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--space-2);
}

.bm-step__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.bm-inside {
  padding: var(--space-20) var(--gutter);
  background: #241D2D;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) var(--space-12);
}

.bm-list li {
  padding-left: var(--space-5);
  border-left: 3px solid #F6B5CF;
}

.bm-list h3 {
  font-size: var(--text-md);
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--space-2);
}

.bm-list p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (min-width: 760px) {
  .bm-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .bm-list { grid-template-columns: repeat(2, 1fr); }
}

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

/* The lock screen carries its notification enlarged beyond the phone's edges,
   so its image is wider; scale it so the phone inside matches the others. */
.bm-step__phone--wide { width: 274px; margin-top: -4px; margin-bottom: calc(var(--space-6) - 10px); }

/* A lighter film grain than the studio's 0.15: at full strength it sat on top of
   the 3D character and the phone screens and made them look soiled. */
.grain { opacity: 0.05; }