/* Movies section (/movies, 2026-10-23): film case-study cards with click-to-play trailers, soundtrack cards,
   release timeline and the no-song banner. Builds on sections.css / page.css / live.css tokens and components. */

.mv-cases .big { max-width: 13em; }
.mv-sub { max-width: 40em; margin-top: 18px; opacity: .8; }

.mv-posters { list-style: none; padding: 0; margin: clamp(36px, 4vw, 60px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* the biggest result: two columns wide, trailer beside the numbers */
.mv-poster.mv-feature { grid-column: span 2; }
.mv-feature .mv-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
.mv-feature .mv-top, .mv-feature .mv-meta { grid-column: 1 / -1; }
.mv-feature h3, .mv-feature .mv-dir { grid-column: 1; }
.mv-feature .mv-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv-feature .mv-num { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; padding-top: 0; align-self: center; }
.mv-feature .mv-num { flex-wrap: wrap; }
.mv-feature .mv-num b { font-size: clamp(56px, 4.8vw, 84px); }
.mv-feature h3 { font-size: clamp(30px, 2.8vw, 42px); }
.mv-poster { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 12px 12px 24px; border-radius: 30px; background: var(--tone); color: var(--on); }

.mv-trailer { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #000; color: #fff; cursor: pointer; font: inherit; }
.mv-trailer img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mv-trailer:hover img { transform: scale(1.05); }
.mv-trailer::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .12); pointer-events: none; transition: background .3s; }
.mv-trailer:hover::after { background: rgba(0, 0, 0, 0); }
.mv-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 28px rgba(0, 0, 0, .35); transition: transform .25s; }
.mv-play::after { content: ""; position: absolute; left: 26px; top: 20px; border-left: 18px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.mv-trailer:hover .mv-play { transform: scale(1.08); }
.mv-tlabel { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 11px; border-radius: 99px; background: rgba(12, 13, 30, .72); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mv-trailer:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.mv-trailer.is-on { cursor: default; }
.mv-trailer.is-on::after { display: none; }
/* a title with no public trailer: a clapperboard title card in the same frame */
.mv-notrailer { display: grid; place-items: center; padding: 18px; cursor: default; background: repeating-linear-gradient(-45deg, #1b1b1f 0 22px, #2a2c45 22px 44px); }
.mv-notrailer::after { display: none; }
.mv-notrailer span { padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--ink); font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; text-align: center; }
/* hero headline: bigger, two lines, last word flips */
.sh-copy .mv-h1 { font-size: clamp(42px, 7.6vw, 128px); line-height: .94; max-width: none; }
.mv-h1a, .mv-h1b { display: block; }
.mv-flip { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; text-align: left; padding: 0 .06em .16em 0; margin: 0 -.06em -.16em 0; transition: width .38s cubic-bezier(.65, 0, .35, 1); }
.mv-flip-w { display: inline-block; white-space: nowrap; transition: transform .38s cubic-bezier(.65, 0, .35, 1); }
.mv-flip-w.next { position: absolute; left: 0; top: 0; transform: translateY(135%); }
@media (max-width: 640px) {
  .sh-copy:has(.mv-h1) { top: 11vh; }
  .sh-copy:has(.mv-h1) .eyebrow-l { font-size: 11.5px; margin-bottom: 10px; }
  .sh-copy .mv-h1 { font-size: 9.2vw; line-height: .98; }
  .mv-h1b { white-space: nowrap; }
}
/* the orange zoom screen: a big poster-style slogan that swells into “action!” */
.mv-zoom .z1 { font-size: clamp(24px, 3.4vw, 54px); letter-spacing: -.035em; }
.mv-zoom .z2 { margin-top: .16em; font-size: clamp(60px, 11vw, 190px); line-height: .9; letter-spacing: -.06em; }
.mv-zoom .mv-zl, .mv-zoom .zf { display: block; }
.mv-zoom .z1:empty { display: none; }
.mv-zoom .z1:empty + .z2 { margin-top: 0; }
@media (max-width: 640px) { .mv-zoom .z2 { font-size: 17vw; } }
/* hero: film-set footage playing behind the headline, tinted navy so the type stays readable */
.mv-herovid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.mv-herovid-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(25, 28, 70, .58) 0%, rgba(25, 28, 70, .42) 45%, rgba(25, 28, 70, .9) 100%); }
/* the game’s or app’s logo, pinned to the corner of its video */
.mv-badge { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 46px !important; height: 46px !important; border-radius: 23%; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); object-fit: cover; transform: none !important; }
.mv-feature .mv-badge { width: 64px !important; height: 64px !important; right: 16px; bottom: 16px; }
/* an app with no video: its App Store icon on a soft spotlight */
.mv-appicon { display: grid; place-items: center; cursor: default; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .28), rgba(0, 0, 0, .35) 70%), #1b1d33; }
.mv-appicon::after { display: none; }
.mv-appicon img { width: 34%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22.5%; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.mv-trailer:hover .mv-appicon img, .mv-appicon:hover img { transform: none; }
.mv-trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mv-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 4px 12px 0; }
.mv-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.mv-poster h3 { font-size: clamp(23px, 1.9vw, 29px); font-weight: 600; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.mv-dir { font-size: 15.5px; line-height: 1.42; }
.mv-dir b { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.mv-num { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 12px; }
.mv-num b { font-size: clamp(50px, 4.4vw, 72px); font-weight: 600; line-height: .9; letter-spacing: -.055em; }
.mv-num span { font-size: 18px; font-weight: 600; }
/* the ticket stub: a perforated line above the figures */
.mv-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 0; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--on) 32%, transparent); }
.mv-meta dt { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; opacity: .65; }
.mv-meta dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.mv-subhead { margin-top: clamp(52px, 5vw, 80px); font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.035em; }
.mv-tracks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mv-track { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 10px 10px 18px; border-radius: 24px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.mv-track .mv-trailer { border-radius: 18px; }
.mv-track .mv-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.mv-track .mv-play::after { left: 21px; top: 16px; border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
.mv-tbody { display: grid; gap: 4px; padding: 2px 8px 0; }
.mv-track h3 { font-size: 20px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.mv-track p { opacity: .75; font-size: 14px; }
.mv-tmeta { font-size: 13.5px !important; }
.mv-tnum { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; opacity: 1 !important; }
.mv-tnum b { font-size: 40px; font-weight: 600; line-height: .9; letter-spacing: -.05em; color: var(--yellow); }
.mv-tnum span { font-size: 16px; font-weight: 600; }
.mv-more { margin-top: clamp(36px, 4vw, 56px); text-align: center; font-size: clamp(34px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--yellow); }
.mv-note { margin-top: 28px; font-size: 14px; opacity: .6; text-align: center; }

/* release timeline: stops on a film-strip line */
.mv-timeline { position: relative; list-style: none; padding: 0; margin: clamp(40px, 4.4vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: mv; }
.mv-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 16px, transparent 16px 26px); opacity: .16; }
.mv-timeline li { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 56px; counter-increment: mv; }
.mv-timeline li::before { content: counter(mv); position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: var(--dot, var(--orange)); box-shadow: 0 0 0 7px var(--light); }
.mv-timeline li:nth-child(2) { --dot: var(--pink); }
.mv-timeline li:nth-child(3) { --dot: var(--purple); }
.mv-timeline li:nth-child(4) { --dot: var(--yellow); }
.mv-when { justify-self: start; padding: 5px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mv-timeline h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.mv-timeline p { font-size: 16px; line-height: 1.45; opacity: .75; }
.mv-timeline a { text-decoration: underline; text-underline-offset: 3px; }

.mv-nosong .lede { max-width: 32em; margin: 24px auto 0; }
.mv-nosong .ctas { justify-content: center; margin-top: 30px; }

@media (max-width: 1199px) {
  .mv-posters, .mv-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .mv-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .mv-timeline::before { display: none; }
}
@media (max-width: 640px) {
  .mv-posters { grid-template-columns: minmax(0, 1fr); }
  .mv-poster.mv-feature { grid-column: auto; }
  .mv-feature .mv-body { display: flex; align-items: stretch; }
  .mv-feature .mv-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-feature .mv-num { margin-top: auto; padding-top: 12px; align-self: auto; }
  .mv-feature .mv-num b { font-size: clamp(50px, 4.4vw, 72px); }
  .mv-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mv-track { border-radius: 20px; padding: 8px 8px 14px; }
  .mv-track h3 { font-size: 16px; }
  .mv-tnum b { font-size: 30px; }
  .mv-tnum span { font-size: 13px; }
  .mv-tlabel { display: none; }
  .mv-track .mv-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .mv-track .mv-play::after { left: 16px; top: 12px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
  .mv-poster { border-radius: 26px; }
  .mv-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .mv-timeline::before { display: block; left: 15px; right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 16px, transparent 16px 26px); }
  .mv-timeline li { padding: 2px 0 0 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-trailer img, .mv-play { transition: none; }
}

/* stats band: bigger cards with an icon each */
.mv-done .lv-stats { gap: 18px; }
.mv-stats li { position: relative; min-height: clamp(200px, 17vw, 270px); container-type: inline-size; }
.mv-stats b { font-size: clamp(40px, 30cqi, 132px); white-space: nowrap; }
.mv-stats span { font-size: clamp(17px, 1.45vw, 22px); }
.mv-ic { position: absolute; bottom: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .24); }
.mv-ic svg { width: 24px; height: 24px; }
.mv-stats .yellow .mv-ic, .mv-stats .pink .mv-ic { background: rgba(27, 27, 31, .09); }
/* /movies has a fourth card (creators): four across on desktop, 2 x 2 under 900px, one column on phones */
@media (min-width: 901px) { .mv-stats.mv-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* behind the stats: the trailer thumbnails rolling in three blurred rows, under a soft white veil */
.mv-done { overflow: hidden; }
.mv-done > .wrap { position: relative; z-index: 1; }
.mv-bgreel { position: absolute; z-index: 0; inset: -60px -10%; display: flex; flex-direction: column; justify-content: center; gap: 18px; transform: rotate(-4deg); filter: blur(9px) saturate(1.25); opacity: .7; pointer-events: none; }
.mv-done::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38) 100%),
              linear-gradient(#fff, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 86%, #fff); }
.mv-reel { list-style: none; margin: 0; display: flex; gap: 18px; width: max-content; padding: 0 18px 0 0; animation: mv-marquee 140s linear infinite; will-change: transform; }
.mv-reel.r2 { animation-direction: reverse; animation-duration: 170s; }
.mv-reel.r3 { animation-duration: 200s; }
.mv-reel li { flex: none; width: clamp(240px, 22vw, 380px); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #ddd; }
.mv-reel img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes mv-marquee { to { transform: translateX(-50%); } }
/* press: a quiet “As featured in” row instead of a second big heading */
.mv-press { margin-top: clamp(56px, 6vw, 90px); }
.mv-press-l { margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
@media (max-width: 640px) {
  .mv-done .mv-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mv-stats li { min-height: 132px; }
  .mv-stats b { font-size: clamp(40px, 22cqi, 88px); }
  .mv-ic { width: 38px; height: 38px; }
  .mv-ic svg { width: 20px; height: 20px; }
  .mv-reel li { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-reel { animation: none; }
}

/* case cards with the official poster (no trailers): poster left, results right, two cards per row */
.mv-cases .mv-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mv-poster.has-poster { flex-direction: row; align-items: stretch; gap: clamp(16px, 1.6vw, 24px); padding: clamp(12px, 1.2vw, 16px); }
.mv-pos { flex: none; align-self: flex-start; width: clamp(132px, 13vw, 196px); aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.mv-pos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mv-pos.mv-notrailer span { font-size: 16px; }
.has-poster .mv-body { flex: 1; min-width: 0; padding: 6px 8px 4px 0; gap: 9px; }
.has-poster h3 { font-size: clamp(22px, 1.9vw, 30px); }
.has-poster .mv-dir { font-size: 15px; }
.has-poster .mv-num { padding-top: 6px; }
.has-poster .mv-num b { font-size: clamp(44px, 3.8vw, 64px); }
.has-poster .mv-meta { padding-top: 12px; }
/* the blurred background rows now use the posters too */
.mv-reel li { width: clamp(150px, 11vw, 210px); aspect-ratio: 2 / 3; }
@media (max-width: 900px) {
  .mv-cases .mv-posters { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mv-pos { width: 104px; border-radius: 12px; }
  .has-poster h3 { font-size: 21px; }
  .has-poster .mv-dir { font-size: 14px; }
  .has-poster .mv-top { font-size: 11px; }
  .has-poster .mv-num b { font-size: 40px; }
  .has-poster .mv-meta dd { font-size: 15px; }
  .mv-reel li { width: 120px; }
}

/* three figures per card (engagement rate removed, Alex 2026-10-23): one row */
.mv-meta, .mv-feature .mv-meta { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px 14px; }
@media (max-width: 640px) { .mv-meta, .mv-feature .mv-meta { grid-template-columns: repeat(3, auto); gap: 8px 10px; } .mv-meta dt { font-size: 10.5px; white-space: nowrap; } }

/* "…and many more" pins, zooms in, then flies out through the screen while "How to start" slides up over it (Alex 2026-10-23).
   .sec clips with overflow:hidden, which would stop the pin: overflow:clip clips without making a scroll box */
.mv-cases { overflow: hidden; overflow: clip; padding-bottom: 0; }
.mv-fly { position: relative; margin-top: clamp(20px, 3vw, 44px); }
.mv-flypin .mv-more { margin: 0; padding-block: .5em clamp(76px, 10vw, 150px); }
.mv-more span { display: inline-block; }
/* pulled up under the cards (Alex 10-23: "too much dead space under it"): the text comes up ~150px below the last row; the pin
   overlaps the cards' last stretch, so it lets clicks through */
/* (Alex 10-23 again: "still too much dead space") the text sits ~50-65px under the cards when it pins, and "How to start" is
   already rising under it */
/* (Alex 10-24: "too much dead space") 180vh, was 215vh: "How to start" starts rising while the text is still pinned, so no
   empty navy screen is left once it has flown out */
.mv-fly.is-on { height: 180vh; margin-top: calc(-50vh + clamp(90px, 9vw, 150px)); pointer-events: none; }
.mv-fly.is-on .mv-flypin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.mv-fly.is-on .mv-more { padding: 0; }
.mv-cases:has(.mv-fly.is-on) + .sec { z-index: 2; margin-top: -100vh; border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; box-shadow: 0 -24px 70px rgba(8, 10, 40, .45); }
/* ACTION! slams in over LIGHTS, CAMERA (script); shrink-wrapped so it scales around its own letters */
.mv-zoom .zf { display: table; margin-inline: auto; transform-origin: 50% 92%; text-shadow: 0 .04em .14em rgba(25, 28, 70, .28); will-change: transform; }
/* LIGHTS, CAMERA, ACTION! in caps, ACTION! in white on the orange screen (Alex 2026-10-23) */
.mv-zoom .z2 { text-transform: uppercase; font-size: clamp(50px, 8.6vw, 156px); letter-spacing: -.04em; line-height: .92; }
.mv-zoom .zf { color: #fff; }
@media (max-width: 640px) { .mv-zoom .z2 { font-size: 14.5vw; } }

/* "These numbers are from Sound.me campaigns only…" under the totals and the case-study headings */
.mv-only { margin-top: 18px; max-width: 40em; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; line-height: 1.4; opacity: .88; }
.lv-done .mv-only { margin: 22px auto 0; text-align: center; }

/* full-screen title stack (/games-and-apps and /movies): full-bleed panels that stack as you scroll, the trailer playing
   behind huge numbers (Alex 10-23 on /movies: "I want the trailers for movies as well") */
.gm-stack { list-style: none; padding: 0; margin: clamp(40px, 4.4vw, 64px) 0 0; }
.gm-slide { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; border-radius: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px) 0 0; background: #0c0d22; color: #fff; box-shadow: 0 -24px 70px rgba(5, 6, 20, .5); }
.gm-slide::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #05061a; opacity: calc(var(--cover, 0) * .7); pointer-events: none; }
.gm-bg { position: absolute; inset: 0; z-index: 0; }
.gm-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gm-yt { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .9s; }
.gm-yt.on { opacity: 1; }
/* zoomed past every edge by 14%: YouTube's corner pause button and the trailers' letterbox bars stay off screen (Alex 10-23: "remove the button") */
.gm-yt iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78vh); height: max(56.25vw, 100%); border: 0; transform: translate(-50%, -50%) scale(1.4); pointer-events: none; }
.gm-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 9, 28, .86) 0%, rgba(8, 9, 28, .5) 48%, rgba(8, 9, 28, .12) 100%), linear-gradient(0deg, rgba(8, 9, 28, .9) 0%, rgba(8, 9, 28, 0) 52%); }
.gm-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding-block: clamp(96px, 12vh, 128px) clamp(28px, 5vh, 52px); transform: scale(calc(1 - var(--cover, 0) * .06)); transform-origin: 50% 0; }
.gm-kind { margin-top: auto; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.gm-title { margin-top: 8px; max-width: 12em; font-size: clamp(44px, min(6.4vw, 11vh), 112px); font-weight: 600; line-height: .92; letter-spacing: -.05em; text-wrap: balance; }
.gm-dir { margin-top: clamp(14px, 2vh, 22px); max-width: 34em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; opacity: .9; }
.gm-dir b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .62; }
/* the numbers sit right under the directions, the whole block centred under the rank (Alex 10-23: "needs to be higher") */
.gm-huge { display: flex; align-items: baseline; gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(22px, 4vh, 48px); }
.gm-huge b { font-size: clamp(96px, min(17vw, 30vh), 300px); font-weight: 600; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; text-shadow: 0 10px 50px rgba(0, 0, 0, .35); }
.gm-huge span { font-size: clamp(24px, 2.6vw, 44px); font-weight: 600; color: var(--green); }
.gm-stats { display: flex; flex-wrap: wrap; gap: 10px clamp(28px, 4vw, 64px); margin: clamp(18px, 3vh, 30px) 0 auto; padding-top: clamp(14px, 2vh, 20px); border-top: 2px dashed rgba(255, 255, 255, .3); }
.gm-stats dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .65; }
.gm-stats dd { margin: 3px 0 0; font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.gm-apps-h { margin-top: clamp(80px, 9vw, 140px); }
/* on /movies the word "views" is Movies yellow */
.mv-cases:not(.gm-cases) .gm-huge span { color: var(--yellow); }
@media (max-width: 640px) {
  .gm-veil { background: linear-gradient(0deg, rgba(8, 9, 28, .94) 0%, rgba(8, 9, 28, .55) 55%, rgba(8, 9, 28, .35) 100%); }
  .gm-title { font-size: 44px; }
  .gm-dir { font-size: 15px; }
  .gm-huge b { font-size: min(26vw, 18vh); }
  .gm-huge span { font-size: 22px; }
  .gm-stats { gap: 8px 22px; }
  .gm-stats dd { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .gm-slide { position: relative; } }

/* the orange "Any part of your film works" banner: one description for sound or no sound, the email underlined */
.mv-nosong .lede { max-width: 40em; margin-inline: auto; }
.mv-nosong .lede a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* very narrow phones (320px): the three figures share the width and "Follower reach" wraps instead of running past the card
   (outside review 10-24) */
@media (max-width: 380px) { .mv-meta, .mv-feature .mv-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mv-meta dt { white-space: normal; } .mv-meta dd { overflow-wrap: anywhere; } }

/* less dead space after the hero (Alex 10-24: "too much dead space in games movies and music"): the totals come up over the
   hero's white end screen as soon as it is white, instead of after the white screen has scrolled away (Music, Movies, Games) */
@media (prefers-reduced-motion: no-preference) {
  .sh-zoomv + .lv-done { margin-top: -40vh; z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) { .sh-zoomv + .lv-done { margin-top: -30vh; } }