/* ── Movie scenes: charge & live ────────────────────────────
   Scene furniture specific to movies 02 (Charge for what you know) and 03
   (Talk to it live), plus the outro card every movie ends on. Base player
   styles live in landing-movie.css, the call screen in landing-movie-call.css. */

/* Outro: a card in the page's theme, like the browser frames before it. Set
   straight on the stage (dark in both themes) its title went dark on dark.
   After it fades in it takes the frames' slow push-in, so the last line is
   never read over a frozen picture. */
.mv-outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  animation: mv-scene 0.45s var(--ease), mv-zoom 14s linear 0.45s forwards;
}
.mv-outro-logo svg { width: 48px; height: 48px; }
.mv-outro-logo .mv-person { width: 52px; height: 52px; font-size: 21px; }
.mv-outro-title { font-size: clamp(26px, 3.8vw, 36px); font-weight: 600; letter-spacing: -0.03em; }
.mv-outro-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); }

/* Access toggle (owner flips paid access on) */
.mv-access-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}

.mv-access-label { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; font-weight: 600; }
.mv-access-label small { font-size: 12px; font-weight: 400; color: var(--subtle); }

.mv-toggle {
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--surface-hi);
  border: 1px solid var(--line-hi);
  position: relative;
  flex: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.mv-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--ease);
}

.mv-toggle.is-on { background: var(--good); border-color: var(--good); }
.mv-toggle.is-on .mv-toggle-knob { transform: translateX(18px); }

.mv-price-field { max-width: 140px; font-weight: 600; }
.mv-price-cur { color: var(--subtle); margin-right: 2px; }

/* Visitor paywall card */
.mv-paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
  padding: 26px 24px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}

.mv-paywall .mv-person { width: 44px; height: 44px; font-size: 17px; margin-bottom: 2px; }
.mv-paywall-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.mv-paywall-sub { font-size: 13px; color: var(--muted); line-height: 1.55; }

.mv-paywall-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.mv-paywall-price small { font-size: 12.5px; font-weight: 400; color: var(--subtle); }

.mv-paywall-btn { pointer-events: none; margin-top: 4px; }
.mv-paywall-btn svg { width: 14px; height: 14px; }

/* Stripe checkout sheet, abstracted */
.mv-paysheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 330px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.mv-paysheet.is-done { opacity: 0; transform: translateY(-8px); }
.mv-paysheet-head { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); }

.mv-paysheet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13.5px;
}

.mv-paysheet-exp { margin-left: auto; color: var(--subtle); font-size: 12.5px; }
.mv-paysheet-btn { pointer-events: none; }

.mv-paid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  animation: mv-pop 0.35s var(--ease);
}

.mv-paid .mini-row-check svg { width: 26px; height: 26px; }
.mv-paid small { font-size: 12.5px; font-weight: 400; color: var(--subtle); }

/* Live-call transcript line under the waveform */
.mv-call-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 40ch;
  margin: 0 auto;
}