/* ============================================================
   Per-slide composition. Master layout = 4:5 (1080×1350).
   r-1-1 / r-9-16 overrides live in responsive.css.
   ============================================================ */

/* ---------------- Slide A — hook ---------------- */
.slide-a { background: #e9edf1; }
.a-sheet {
  flex: 1 1 auto; min-height: 0;
  margin: var(--pad) var(--pad) 22px;
  box-shadow: var(--shadow-win);
}
.a-band {
  flex: 0 0 auto; min-height: 30%;
  gap: 30px;
}

/* ---------------- Slide B — pain ---------------- */
.slide-b { background: #fff; }
.b-title {
  flex: 0 0 auto;
  padding: var(--pad) var(--pad) 0;
}
.b-sheet {
  flex: 0 0 auto;
  height: 300px;
  margin: var(--gap) var(--pad);
  box-shadow: var(--shadow-win);
}
.b-video {
  flex: 1 1 auto; min-height: 0;
  position: relative; overflow: hidden;
  background: #11150f;
}
.b-video-el { width: 100%; height: 100%; object-fit: cover; }
.b-video-mug {
  position: absolute; left: var(--pad); bottom: var(--pad);
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  font-weight: 800; font-size: 30px; color: var(--green);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
}

/* ---------------- Slide C — transformation ---------------- */
.slide-c { background: #fff; }
.c-title {
  flex: 0 0 auto;
  padding: var(--pad) var(--pad) 0;
  font-size: calc(var(--h1) * .82);
}
.c-transform {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 22px var(--pad) 0;
}
.c-sheet { width: 100%; flex: 0 0 41%; min-height: 0; }
.c-app   { width: 100%; flex: 1 1 auto; min-height: 0; }
.c-arrow { flex: 0 0 auto; line-height: 0; }
.c-arrow svg { width: 48px; height: 48px; }
.c-arrow path { fill: none; stroke: var(--green-bright); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.c-band { flex: 0 0 auto; gap: 14px; padding-top: calc(var(--pad) * .7); padding-bottom: calc(var(--pad) * .7); }
.c-band .band-title { font-size: var(--h2); }

/* ---------------- Slide D — beauty + CTA ---------------- */
.slide-d { background: #e9edf1; }
.d-app {
  flex: 0 0 44%; min-height: 0;
  margin: var(--pad) var(--pad) 0;
}
.d-band {
  flex: 1 1 auto;
  gap: 30px; justify-content: center;
}
.d-band .cta { margin: 6px 0; }