/* ============================================================
   Newsletter hero split + Issue Builder motion graphic
   Source composition: pb_newsletter/videos/newsletter-issue-builder
   Stage is authored at 1080x1080 and scaled by js/issue-builder.js.
   ============================================================ */
.nl-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.nl-hero-split .nl-title { flex-wrap: wrap; font-size: clamp(34px, 3.9vw, 52px); }
.nl-hero-split .lede { max-width: 34rem; }
@media (max-width: 920px) {
  .nl-hero-split { grid-template-columns: 1fr; }
  .nl-hero-motion { width: min(100%, 600px); }
}

.ib-frame {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--radius-card, 20px);
  background: var(--bg); box-shadow: 0 34px 90px rgba(1, 7, 12, 0.5);
}
.ib-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 250ms ease; }
.ib-stage {
  position: absolute; top: 0; left: 0; width: 1080px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; opacity: 0; transition: opacity 250ms ease;
  color: var(--text); font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  pointer-events: none; user-select: none;
}
.ib-frame.ready .ib-stage { opacity: 1; }
.ib-frame.ready .ib-poster { opacity: 0; }
.ib-toggle {
  display: block; margin: 12px 0 0 auto; padding: 9px 13px;
  border: 1px solid var(--hairline); border-radius: 12px; background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.ib-toggle:hover, .ib-toggle:focus-visible { background: var(--surface-2); color: var(--text); }

.ib-stage *, .ib-stage *::before, .ib-stage *::after { box-sizing: border-box; }
.ib-court { position: absolute; background: rgba(78, 154, 217, 0.075); }
.ib-court.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.ib-court.h { top: 540px; left: 0; width: 100%; height: 1px; }
.ib-ring {
  position: absolute; right: -112px; top: -112px; width: 340px; height: 340px;
  border: 1px solid rgba(78, 154, 217, 0.08); border-radius: 50%;
}
.ib-world { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, opacity; }

.ib-shell {
  position: absolute; left: 48px; top: 28px; width: 984px; height: 1024px; z-index: 1;
  border: 1px solid var(--hairline); border-radius: 24px; background: var(--surface);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.32); opacity: 0;
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.ib-headline {
  position: absolute; left: 0; right: 0; top: 26px; margin: 0;
  font-size: 52px; font-weight: 780; line-height: 1; letter-spacing: -0.04em;
  text-align: center; white-space: nowrap; opacity: 0;
}
.ib-final-rule {
  position: absolute; left: 422px; top: 92px; width: 140px; height: 4px;
  border-radius: 2px; background: var(--accent);
}
.ib-schedule {
  position: absolute; left: 0; right: 0; top: 110px; margin: 0;
  color: var(--muted); font-size: 21px; font-weight: 650; line-height: 1;
  letter-spacing: 0.075em; text-align: center; white-space: nowrap; opacity: 0;
}

.ib-card {
  position: absolute; left: 84px; width: 912px; z-index: 3; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface-2);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform-origin: 50% 50%; will-change: transform, opacity; opacity: 0;
}
#ib-industry { top: 186px; height: 222px; }
#ib-pro { top: 424px; height: 222px; }
#ib-video { top: 662px; height: 358px; }
.ib-rule {
  position: absolute; left: 0; top: 0; width: 100%; height: 6px;
  background: var(--accent); transform-origin: 0 50%;
}
.ib-title {
  position: absolute; left: 0; right: 0; top: 20px; margin: 0;
  color: var(--text); font-size: 36px; font-weight: 780; line-height: 1;
  letter-spacing: -0.03em; text-align: center; white-space: nowrap;
}
.ib-title .accent { color: var(--accent); }
.ib-shot { position: absolute; left: 50%; top: 68px; transform: translateX(-50%); }
.ib-shot img { display: block; height: 100%; width: auto; max-width: none; }
.ib-shot.news { height: 134px; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.ib-shot.video { height: 270px; }