/* MIEL — two-slide preview. Fills the frame, never crops the ads. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--miel-base); font-family: var(--miel-system); overflow: hidden; }

.stage { position: relative; height: 100dvh; display: grid; }
.slides, .slide { position: absolute; inset: 0; }
.slide { display: grid; place-items: center; opacity: 0; transition: opacity 0.5s ease; }
.slide.is-active { opacity: 1; }

.duo { display: flex; gap: clamp(0.8rem, 2vw, 1.8rem); align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: clamp(0.8rem, 2.5vw, 2rem); }
.panel { margin: 0; position: relative; width: min(44%, calc((100dvh - 5rem) * 0.8)); aspect-ratio: 4 / 5;
  overflow: hidden; box-shadow: 0 30px 80px rgb(79 58 59 / 30%); }
.panel-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel-logo { background: var(--miel-cocoa); display: grid; place-content: center;
  justify-items: center; gap: 1.4rem; }
.panel-logo .ghost { position: absolute; inset: 0; display: grid; place-items: center; }
.panel-logo .ghost img { width: 150%; max-width: none; opacity: 0.12; }
.pl-lock { position: relative; width: clamp(9rem, 22vw, 15rem); }
.pl-sub { position: relative; font-size: clamp(0.55rem, 1.1vw, 0.78rem); letter-spacing: 0.42em;
  text-indent: 0.42em; color: var(--miel-gold); white-space: nowrap; }

.duo.ads img { width: min(44%, calc((100dvh - 5rem) * 0.8)); aspect-ratio: 4 / 5;
  height: auto; object-fit: contain; box-shadow: 0 30px 80px rgb(79 58 59 / 30%); }

.nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(246 231 231 / 92%); color: var(--miel-cocoa);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgb(79 58 59 / 30%); }
.nav svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.nav-prev { inset-inline-start: clamp(0.6rem, 2vw, 1.6rem); }
.nav-next { inset-inline-end: clamp(0.6rem, 2vw, 1.6rem); }
.nav:hover { background: var(--miel-light); }
.nav:focus-visible { outline: 3px solid var(--miel-cocoa); outline-offset: 3px; }

.dots { position: absolute; bottom: clamp(0.8rem, 2.5vh, 1.6rem); left: 0; right: 0;
  display: flex; justify-content: center; gap: 0.4rem; z-index: 5; }
.dots button { width: 2.75rem; height: 2.75rem; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%; }
.dots button i { width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: rgb(246 231 231 / 55%); transition: transform 0.25s ease, background 0.25s ease; }
.dots button[aria-selected="true"] i { background: var(--miel-light); transform: scale(1.35); }
.dots button:focus-visible { outline: 3px solid var(--miel-light); outline-offset: -6px; }

.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 700px) {
  .duo { flex-direction: column; }
  .panel, .duo.ads img { width: min(74vw, calc(41dvh * 0.8)); aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}