/* /create/music-video — page-owned layout. Loaded LAST, after home-2026.css, home-v3.css and
   landing2026-nav.css. Every content class is `mv-` prefixed, so nothing here reaches the home page
   or a sibling create page and nothing written for them reaches this markup.

   Not restated here: the header/footer shell, the composer/chips/trust styling, the FAQ accordion,
   the closing CTA card, the shared decision table, and the tutorial teaser cards. Those arrive with
   their components. What IS written here is where those components sit on this page — a shared
   component brings its internals, never its placement. */

.lp-mv {
  /* Short aliases the shared component markup expects (components/composer.js references these
     names, not the --rk-* ones). Same four the sibling pages alias. */
  --font-body: var(--rk-font-body);
  --font-display: var(--rk-font-display);
  --shadow-card: var(--rk-shadow-card);
  --shadow-object: var(--rk-shadow-object);

  --mv-pad: clamp(36px, 3.6vw, 60px);
  /* Gutter and column MATCH THE SHARED HEADER (.landing2026HeaderInner). A content column narrower
     than the header leaves the wordmark and the Start Creating button hanging outside the text on
     wide screens, which reads as two pages stitched together. */
  --mv-gutter: clamp(24px, 4vw, 72px);
  --mv-max: 1560px;
  /* Film frames are dark objects. A near-black surround stops a bright poster from reading as a
     photograph pasted onto paper — the same value and the same reason as /create/animation, which
     is the other page on this site that frames video. */
  --mv-frame: #14171F;
  --mv-frame-edge: rgba(20, 23, 31, .16);
  color: var(--rk-ink);
  font-family: var(--rk-font-body);
}

/* ── bands ───────────────────────────────────────────────────────────────── */
.mv-band {
  width: min(calc(100% - 2 * var(--mv-gutter)), var(--mv-max));
  margin-inline: auto;
  padding: var(--mv-pad) 0;
}
/* Scarce emphasis for the two argument-carrying blocks (the song, and what you walk away with) —
   not a default section appearance. Two tinted bands next to each other read as one container
   repeated, so the contract test asserts both the count and the non-adjacency. */
.mv-band-tint {
  --mv-inset: clamp(18px, 2.4vw, 44px);
  background: var(--rk-paper-2);
  border-radius: clamp(18px, 1.8vw, 26px);
  padding: var(--mv-pad) var(--mv-inset);
  width: min(calc(100% - 2 * var(--mv-gutter)), var(--mv-max));
  margin-inline: auto;
}

.mv-head { max-width: 760px; margin-bottom: clamp(28px, 3vw, 42px); }
#faq .mv-head { max-width: 720px; margin-inline: auto; text-align: center; }
#faq .mv-head .mv-kicker { justify-content: center; }
.mv-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 12.5px var(--rk-font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rk-emerald);
}
/* The short rule before the label. It is the sibling pages' signature and costs no markup. */
.mv-kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.lp-mv h1 {
  margin-top: 14px;
  font-family: var(--rk-font-display);
  font-size: clamp(36px, 3.3vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lp-mv h2 {
  margin-top: 12px;
  font-family: var(--rk-font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lp-mv h3 { font: 700 clamp(17px, 1.2vw, 20px)/1.3 var(--rk-font-body); color: var(--rk-ink); }


.mv-lede { margin-top: 12px; color: var(--rk-ink-soft); font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.6; max-width: 62ch; }

/* ── 1 · hero ────────────────────────────────────────────────────────────── */
.mv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(20px, 3svh, 52px);
}
/* Without min-width:0 a grid child refuses to shrink below its content's intrinsic width and the
   composer's button pushes this column out of the viewport. */
.mv-hero-copy { min-width: 0; }
/* Sized off BOTH axes: width alone gives a 54px headline on a 1280x720 laptop, where the hero then
   fills the screen and the finished film below it does not exist as far as the visitor is
   concerned. */
.mv-hero-copy h1 { font-size: clamp(30px, min(4.2vw, 6.4svh), 50px); line-height: 1.08; margin: 0 0 clamp(10px, 1.8svh, 16px); }
.mv-hero-copy .mv-lede { margin-bottom: clamp(16px, 2.4svh, 26px); }
/* The composer/chips/trust stack comes from a shared sheet that cannot know how much room this page
   has, so its gaps are tied to viewport height here. */
:where(.lp-mv) .composer { margin-top: clamp(16px, 2.4svh, 24px); }
:where(.lp-mv) .trust { margin-top: clamp(10px, 1.6svh, 16px); }
.mv-try { margin-top: clamp(10px, 1.6svh, 18px); }
.mv-try-label { display: block; font-size: 13px; color: var(--rk-ink-soft); margin-bottom: 8px; }

.mv-hero-right { min-width: 0; }
.mv-hero-frame { margin: 0; }
.mv-hero-frame img {
  display: block;
  width: 100%;
  /* NO frame, NO crop, NO shadow drawn here. The hero is a composed scene with a transparent
     background and its own painted shadows (scripts/gen-lp-mv-hero-scene.js), exactly like the two
     older /create/* pages — objects resting on the paper, not a picture inside a box. A border and
     a box-shadow around it is what made this page read as a different product: a rectangle in a
     frame is a screenshot, objects casting shadows are a scene.
     object-fit: contain, not cover — cropping a composition cuts its edges off. */
  height: auto;
  max-height: 64svh;
  object-fit: contain;
}

/* ── 2 · the film ────────────────────────────────────────────────────────── */
.mv-film { margin-top: clamp(22px, 2.6vw, 36px); }
.mv-player {
  position: relative;
  aspect-ratio: 16 / 9;
  /* 75% and centred, like the sibling video page. The film is the exhibit, and an exhibit needs
     paper around it — edge-to-edge inside a tinted panel reads as a screenshot pasted in. */
  width: min(75%, 100%);
  margin-inline: auto;
  border-radius: clamp(12px, 1.2vw, 18px);
  border: 1px solid var(--mv-frame-edge);
  box-shadow: var(--rk-shadow-object);
  overflow: hidden;
  background: var(--mv-frame);
}
.mv-player-poster,
.mv-player-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The player sits behind its cover until a real frame exists. Both are always in the layout, so
   swapping them cannot shift anything. */
.mv-player-el { opacity: 0; }
.mv-player.is-playing .mv-player-el { opacity: 1; }
.mv-player.is-playing .mv-player-poster,
.mv-player.is-playing .mv-player-play { opacity: 0; pointer-events: none; }

.mv-player-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 6px 24px rgba(20, 19, 15, .32);
  cursor: pointer;
  transition: transform .18s ease, opacity .2s ease;
}
.mv-player-play svg { width: 30px; height: 30px; fill: var(--rk-ink); margin-left: 3px; }
.mv-player-play:hover { transform: translate(-50%, -50%) scale(1.06); }

.mv-film-meta {
  width: min(760px, 100%);
  margin: 14px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mv-film-fact {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--rk-paper) 88%, transparent);
  text-align: left;
}
.mv-film-fact dt { font: 700 11.5px var(--rk-font-body); letter-spacing: 1.1px; text-transform: uppercase; color: var(--rk-ink-muted); }
.mv-film-fact dd { margin: 7px 0 0; font: 600 clamp(15px, 1.1vw, 17px)/1.4 var(--rk-font-body); color: var(--rk-ink); }

/* ── 3 · the song ────────────────────────────────────────────────────────── */
.mv-song {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.mv-lyrics {
  margin: 0;
  padding: 28px 30px;
  background: var(--rk-surface);
  border-radius: var(--rk-radius-lg);
  border: 1px solid var(--rk-line);
}
.mv-lyrics figcaption {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rk-ink-soft);
  margin-bottom: 14px;
}
.mv-lyrics blockquote { margin: 0; display: grid; gap: 8px; }
.mv-lyrics blockquote span {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
}

.mv-takes h3 { font-size: 20px; margin: 0 0 8px; }
.mv-takes-sub { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }
.mv-take-row { display: grid; gap: 12px; }
.mv-take {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: var(--rk-surface);
  cursor: pointer;
  text-align: left;
}
.mv-take:hover { border-color: var(--rk-emerald); }
.mv-take-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(15, 164, 126, .12);
}
.mv-take-icon svg { width: 15px; height: 15px; fill: var(--rk-emerald); margin-left: 2px; }
.mv-take-name { font-weight: 600; font-size: 16px; }
.mv-take-action { margin-left: auto; font-size: 14px; color: var(--rk-ink-soft); }
.mv-take.is-playing { border-color: var(--rk-emerald); background: rgba(15, 164, 126, .06); }
.mv-take.is-playing .mv-take-action { color: var(--rk-emerald); font-weight: 600; }

.mv-song-notes {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.mv-song-notes h3 { font-size: 17px; margin: 0 0 6px; }
.mv-song-notes p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }

/* ── 4 · cast and scenes ─────────────────────────────────────────────────── */
.mv-cast { display: grid; gap: 20px; }
.mv-cast figure { margin: 0; }
.mv-cast img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46svh;
  object-fit: contain;
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-lg);
  background: var(--rk-surface);
}
.mv-cast-notes {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.mv-cast-notes h3 { font-size: 17px; margin: 0 0 6px; }
.mv-cast-notes p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }

/* ── 5 · look and mood ───────────────────────────────────────────────────── */
.mv-looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mv-look { margin: 0; }
.mv-look img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: var(--rk-surface);
}
.mv-look figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; text-align: center; }
.mv-looks-hint { margin: 22px 0 0; font-size: 14px; color: var(--rk-ink-soft); text-align: center; }

/* ── 6 · tutorial band ───────────────────────────────────────────────────── */
/* Placement only — the cards are `.lp-tut-*` and belong to /tutorials. */
#how-it-works .lp-tut-teasers { margin-top: 0; }
.mv-howto-more { margin: 26px 0 0; }
.mv-howto-more a { font-size: 15px; font-weight: 600; color: var(--rk-emerald); text-decoration: none; }
.mv-howto-more a:hover { text-decoration: underline; }
/* The arrow is punctuation, not a word: keeping it out of the copy string spares 25 translators
   carrying it and stops it pointing the wrong way in RTL. */
.mv-howto-more a::after { content: " \2192"; }
[dir="rtl"] .mv-howto-more a::after { content: " \2190"; }

/* ── 7 · delivery ────────────────────────────────────────────────────────── */
.mv-delivery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.mv-delivery-items { list-style: none; margin: 0; padding: 0; }
.mv-delivery-items li { padding: 18px 0; border-top: 1px solid var(--rk-line); }
.mv-delivery-items li:first-child { border-top: 0; padding-top: 0; }
.mv-delivery-items h3 { font-size: 18px; margin: 0 0 6px; }
.mv-delivery-items p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rk-ink-soft); }

.mv-subs-pair { display: grid; gap: 14px; }
.mv-subs-pair figure { margin: 0; }
.mv-subs-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--rk-line);
}
.mv-subs-pair figcaption { margin-top: 8px; }
.mv-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(70, 61, 48, .09);
  color: var(--rk-ink-soft);
}
.mv-tag-on { background: rgba(15, 164, 126, .13); color: var(--rk-emerald); }

.mv-delivery-note { margin: 28px 0 0; font-size: 14px; color: var(--rk-ink-soft); }
.mv-delivery-note a { color: var(--rk-emerald); font-weight: 600; text-decoration: none; }
.mv-delivery-note a:hover { text-decoration: underline; }

/* ── 8 · decision table + crosslinks ─────────────────────────────────────── */
.mv-crosslink {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--rk-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--rk-ink);
  text-decoration: none;
  background: var(--rk-surface);
}
.mv-crosslink:hover { border-color: var(--rk-emerald); color: var(--rk-emerald); }

/* ── 9 · faq ─────────────────────────────────────────────────────────────── */

/* ── crosslinks + decision table: centred, as on /create/animation ─────────
   Both blocks sit alone in a full-width band. Left-aligned there they read as leftovers pinned
   to the left edge of an empty page; the sibling centres its crosslink row for exactly this
   reason. The table keeps its own left-aligned rows inside a centred, measure-width column —
   centring the ROWS would make label and value drift apart as the values change length. */
#facts .rk-mk-decision { width: min(860px, 100%); margin-inline: auto; }
#facts .rk-mk-decision h2 { text-align: center; }
.mv-crosslinks { margin-top: clamp(34px, 3.6vw, 52px); text-align: center; }
.mv-crosslinks h3 { font: 600 15px var(--rk-font-body); color: var(--rk-ink-muted); margin: 0 0 14px; }
.mv-crosslink-row { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lp-mv { --mv-band-y: 64px; --mv-head-gap: 32px; }
  .mv-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-song-notes,
  .mv-cast-notes { gap: 24px; }
}

@media (max-width: 860px) {
  .mv-hero,
  .mv-song,
  .mv-delivery { grid-template-columns: minmax(0, 1fr); }
  .mv-hero { padding-top: 32px; }
  .mv-hero-frame img { max-height: 34svh; }
  .mv-song-notes,
  .mv-cast-notes { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mv-player-play { width: 62px; height: 62px; }
  .mv-player-play svg { width: 24px; height: 24px; }
}

@media (max-width: 560px) {
  .lp-mv { --mv-band-y: 52px; }
  .mv-band,
  .mv-band-tint { padding-inline: 18px; }
  .mv-lyrics { padding: 22px 20px; }
  .mv-looks { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-player-play,
  .mv-player-play:hover { transition: none; transform: translate(-50%, -50%); }
}