/* eResonate explainer films: what the explainers add to the shared stylesheet (film.css):
   their own scene types, and the tall layout.

   The stage is a fixed canvas the page scales to fit: 1920x1080 for the wide film, and
   1080x1800 for the tall one the web player uses on a phone (#stage.tall).
   The monitor and the iPhone are drawn with film.css's own .win-* and .phone-* styles. */

/* ───────────────────────────── shot: product screens in a device */

.s-shot .x-copy { position: absolute; top: 130px; bottom: 190px; width: 590px; display: flex; flex-direction: column; justify-content: center; }
.s-shot.right .x-copy { left: 110px; }
.s-shot.left .x-copy { right: 100px; }
.s-shot .x-copy .eyebrow { margin-bottom: 26px; }
.x-title { font: 800 76px/1.06 var(--display); letter-spacing: -.02em; }
.x-title.long { font-size: 60px; line-height: 1.1; }
.x-sub { margin: 28px 0 0; font: 400 33px/1.4 var(--body); color: var(--muted); }
.x-bullets { margin: 34px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 19px; }
.x-bullets li { font: 500 33px/1.25 var(--body); display: flex; gap: 18px; align-items: center; }
.x-bullets svg { flex: 0 0 34px; width: 34px; height: 34px; color: var(--green); }
.x-stat { margin-top: 30px; }
.x-stat b {
  display: block; font: 900 132px/.98 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #7FA4FF 0%, #6BC5FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.x-stat span { display: block; margin-top: 10px; font: 500 31px/1.3 var(--body); color: var(--text); }

.s-shot.center .x-copy { left: 130px; right: 130px; top: 54px; bottom: auto; width: auto; align-items: center; text-align: center; }
.s-shot.center .x-copy .eyebrow { margin-bottom: 16px; }
.s-shot.center .x-title, .s-shot.center .x-title.long { font-size: 58px; }
.s-shot.center .x-sub, .s-shot.center .x-bullets, .s-shot.center .x-stat { display: none; }

/* Everything a shot stands its screens in: one monitor, and iPhones over it or in a row. */
.x-devices { position: absolute; inset: 0; }
.x-layer { position: absolute; inset: 0; overflow: hidden; }
.x-shot { position: absolute; left: 0; will-change: transform; }
.x-phone-label { position: absolute; text-align: center; font: 700 32px/1.2 var(--display); letter-spacing: .005em; color: var(--text); }

/* ───────────────────────────── money: the artist and the venue share what a show earns */

.x-head { position: absolute; left: 130px; right: 130px; top: 92px; }
.x-head .eyebrow { margin-bottom: 24px; }
.s-money .x-title.long { font-size: 66px; max-width: 1500px; }
.x-money { position: absolute; left: 130px; right: 130px; top: 420px; }
.x-money .feed { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font: 500 30px/1 var(--body); color: var(--muted); }
.x-money .chip { padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line); background: rgba(17,26,51,.9); color: var(--text); font: 600 27px/1 var(--body); }
.x-money .track { position: relative; margin-top: 34px; height: 150px; display: flex; --share: .5; }
.x-money .seg { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; overflow: hidden; white-space: nowrap; }
.x-money .seg.artist { width: calc(var(--share) * 100%); background: linear-gradient(90deg, #2247D6, #2E5CFF 60%, #4C78FF); border-radius: 36px 0 0 36px; }
.x-money .seg.venue { flex: 1; background: linear-gradient(90deg, #1FAE68, #3EE08C); color: #04150C; border-radius: 0 36px 36px 0; }
.x-money .seg b { font: 800 44px/1 var(--display); letter-spacing: .04em; }
.x-money .seg span { font: 800 72px/1 var(--display); font-variant-numeric: tabular-nums; }
.x-money .knob {
  position: absolute; left: calc(var(--share) * 100%); top: -22px; bottom: -22px; width: 14px; margin-left: -7px; border-radius: 7px; background: #fff;
  box-shadow: 0 0 0 8px rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.5);
}
.x-money .under { margin-top: 42px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.x-money .under .note { font: 500 34px/1.25 var(--body); color: var(--text); }
.x-money .under .tot { font: 700 34px/1.2 var(--display); color: var(--green); }
.x-money .lane {
  margin-top: 40px; border-radius: 26px; border: 2px dashed #34406F; padding: 28px 36px;
  font: 500 32px/1.3 var(--body); color: var(--muted);
}
.x-money .lane .c-accent { color: var(--text); font: 700 34px/1 var(--display); }

/* ───────────────────────────── rooms: one after-show, as many rooms as the night needs */

.s-rooms .r-copy { position: absolute; left: 110px; top: 110px; bottom: 170px; width: 650px; display: flex; flex-direction: column; justify-content: center; }
.s-rooms .r-copy .eyebrow { margin-bottom: 26px; }
.s-rooms .r-stats { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.s-rooms .r-stat { display: flex; align-items: baseline; gap: 26px; }
.s-rooms .r-stat b {
  flex: 0 0 auto; min-width: 250px; font: 900 100px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #7FA4FF 0%, #6BC5FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-rooms .r-stat span { font: 500 32px/1.25 var(--body); color: var(--text); }
.s-rooms .r-wall { position: absolute; left: 850px; top: 150px; width: 960px; }
.s-rooms .r-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.s-rooms .r-tile {
  position: relative; height: 124px; border-radius: 22px; border: 2px solid var(--line); background: rgba(13,20,40,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.s-rooms .r-tile small { font: 600 17px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.s-rooms .r-tile b { margin-top: 9px; font: 800 50px/1 var(--display); font-variant-numeric: tabular-nums; color: #39416B; }
.s-rooms .r-lit {
  position: absolute; inset: -2px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2247D6, #2E5CFF 55%, #4C78FF); box-shadow: 0 10px 38px rgba(46,92,255,.34);
}
.s-rooms .r-lit small { color: rgba(255,255,255,.78); }
.s-rooms .r-lit b { color: #fff; }
.s-rooms .r-band {
  position: absolute; left: 50%; top: -21px; translate: -50% 0; white-space: nowrap; padding: 8px 16px 9px; border-radius: 999px;
  background: var(--green); color: #04150C; font: 800 24px/1 var(--display); letter-spacing: .01em; box-shadow: 0 6px 22px rgba(62,224,140,.4);
}
.s-rooms .r-you { margin-top: 30px; display: flex; align-items: center; gap: 16px; font: 500 32px/1.25 var(--body); color: var(--text); }
.s-rooms .r-you i { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(62,224,140,.18); }

/* ═════════════════════════════ the tall layout (1080 x 1800) ═════════════════════════════ */

#stage.tall { width: 1080px; height: 1800px; }
#stage.tall .broll { width: 1080px; height: 1800px; }
#stage.tall #backdrop .glow.a { left: -520px; top: -420px; }
#stage.tall #backdrop .glow.b { right: -480px; bottom: -380px; }
#stage.tall #caption { bottom: 64px; }
#stage.tall #caption span { max-width: 960px; font-size: 44px; line-height: 1.28; padding: 18px 30px 20px; border-radius: 20px; }

/* open and end: the logo above the name, the lines stacked */
#stage.tall .s-open .center, #stage.tall .s-end .center { padding: 0 60px 160px; }
#stage.tall .logo-row { flex-direction: column; gap: 34px; }
#stage.tall .s-open .logo-mark { width: 300px; height: 300px; }
#stage.tall .s-open .wordmark { font-size: 168px; }
#stage.tall .s-open .tag { margin-top: 50px; font-size: 42px; line-height: 1.5; letter-spacing: .2em; text-align: center; }
#stage.tall .s-end .logo-mark { width: 190px; height: 190px; }
#stage.tall .s-end .wordmark { font-size: 124px; }
#stage.tall .s-end .lines { margin-top: 70px; }
#stage.tall .s-end .lines .h1 { font-size: 98px; line-height: 1.08; }
#stage.tall .s-end .cta { margin-top: 80px; flex-direction: column; gap: 40px; }
#stage.tall .s-end .btn { font-size: 46px; padding: 34px 56px; }
#stage.tall .s-end .url { font-size: 58px; }
#stage.tall .s-end .note { margin-top: 56px; font-size: 34px; line-height: 1.4; text-align: center; max-width: 900px; }

/* cover: the film's opening card, stacked */
#stage.tall .s-cover .center { padding: 0 60px 120px; }
#stage.tall .s-cover .logo-mark { width: 300px; height: 300px; }
#stage.tall .s-cover .wordmark { font-size: 168px; }
#stage.tall .s-cover .headline { margin-top: 64px; max-width: 960px; font-size: 92px; }
#stage.tall .s-cover .chip { margin-top: 64px; font-size: 32px; letter-spacing: .16em; }

/* shot: the words above, one large iPhone below, running off the bottom of the stage */
#stage.tall .s-shot .x-copy { left: 60px; right: 60px; top: 56px; bottom: auto; width: auto; height: 440px; justify-content: center; }
#stage.tall .s-shot .x-copy .eyebrow { font-size: 30px; margin-bottom: 24px; }
#stage.tall .x-title, #stage.tall .x-title.long { font-size: 80px; line-height: 1.06; }
#stage.tall .x-sub { font-size: 40px; margin-top: 24px; }
#stage.tall .x-copy:has(.x-bullets) .x-sub, #stage.tall .x-copy:has(.x-stat) .x-sub { display: none; }
#stage.tall .x-bullets { margin-top: 26px; gap: 13px; }
#stage.tall .x-bullets li { font-size: 38px; }
#stage.tall .x-bullets li:nth-child(n+4) { display: none; }
#stage.tall .x-bullets svg { flex-basis: 40px; width: 40px; height: 40px; }
#stage.tall .x-stat { margin-top: 20px; display: flex; align-items: baseline; gap: 26px; }
#stage.tall .x-stat b { font-size: 140px; }
#stage.tall .x-stat span { font-size: 36px; margin: 0; }
#stage.tall .x-copy:has(.x-stat) .x-bullets { display: none; }
#stage.tall .phone { box-shadow: 0 -20px 120px rgba(46,92,255,.28), 0 44px 110px rgba(0,0,0,.62); }
/* The closing card has no room for phones beside it. */
#stage.tall .s-end .phone { display: none; }
#stage.tall .s-end.has-phones .center { right: 0; }

/* money */
#stage.tall .x-head { left: 60px; right: 60px; top: 150px; }
#stage.tall .s-money .x-title.long { font-size: 74px; }
#stage.tall .x-money { left: 60px; right: 60px; top: 690px; }
#stage.tall .x-money .feed { font-size: 36px; gap: 18px; }
#stage.tall .x-money .chip { font-size: 32px; padding: 16px 26px; }
#stage.tall .x-money .track { height: 230px; margin-top: 44px; }
#stage.tall .x-money .seg { flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 0 34px; }
#stage.tall .x-money .seg b { font-size: 38px; }
#stage.tall .x-money .seg span { font-size: 92px; }
#stage.tall .x-money .under { flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 54px; }
#stage.tall .x-money .under .note { font-size: 42px; }
#stage.tall .x-money .under .tot { font-size: 42px; }
#stage.tall .x-money .lane { font-size: 40px; line-height: 1.35; margin-top: 50px; padding: 34px 36px; }
#stage.tall .x-money .lane .c-accent { font-size: 42px; }

/* rooms: the title, the figures in a row, the wall of rooms under them */
#stage.tall .s-rooms .r-copy { left: 60px; right: 60px; top: 70px; bottom: auto; width: auto; justify-content: flex-start; }
#stage.tall .s-rooms .r-copy .eyebrow { font-size: 30px; margin-bottom: 24px; }
#stage.tall .s-rooms .r-stats { flex-direction: row; gap: 26px; margin-top: 44px; }
#stage.tall .s-rooms .r-stat { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 10px; }
#stage.tall .s-rooms .r-stat b { min-width: 0; font-size: 104px; }
#stage.tall .s-rooms .r-stat span { font-size: 31px; }
#stage.tall .s-rooms .r-wall { left: 60px; top: 640px; width: 960px; }
#stage.tall .s-rooms .r-tile { height: 148px; }
#stage.tall .s-rooms .r-tile small { font-size: 19px; }
#stage.tall .s-rooms .r-tile b { font-size: 58px; }
#stage.tall .s-rooms .r-band { font-size: 27px; top: -23px; }
#stage.tall .s-rooms .r-you { margin-top: 38px; font-size: 38px; }

/* words: statements over footage, set for the narrow stage */
#stage.tall .s-words .box { left: 60px; right: 60px; top: 0; bottom: 380px; }
#stage.tall .s-words .eyebrow { font-size: 30px; }
#stage.tall .s-words .line { font-size: 104px; }
#stage.tall .s-words.size-l .line { font-size: 92px; }
#stage.tall .s-words.size-m .line { font-size: 80px; }
#stage.tall .s-words .line.small { font-size: 44px; margin-top: 30px; }