/* Scroll to Sold. Dark, one accent, editorial chrome.
   Rules: only transform and opacity animate, every scene fills its frame,
   nothing is centered in a void. */

/* the hidden attribute must win over any display rule (.nav, .steps are flex) */
[hidden] { display: none !important; }

:root {
  --bg: #07080b;
  --panel: #0c0e13;
  --panel-2: #0a0c10;
  --line: #1a1e27;
  --line-soft: #14171e;
  --fg: #f4f6fa;
  --muted: #868e9e;
  --accent: #4d7cfe;
  --accent-soft: #8fb0ff;
  --green: #3fb873;
  --green-soft: #74d6a0;
  --red: #e0685f;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 4.5vw, 72px);
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background:
    radial-gradient(70% 50% at 12% -5%, rgba(77, 124, 254, .16), transparent 60%),
    linear-gradient(180deg, #090a0e, var(--bg) 40%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* fine grid + grain so the dark never reads as an empty void */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 92;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  body::before { animation: grow linear both; animation-timeline: scroll(root block); }
}
@keyframes grow { to { transform: scaleX(1); } }

/* ── scene shell ────────────────────────────────────────────────────── */
.scene {
  position: relative;
  z-index: 2;
  padding: clamp(84px, 13vh, 150px) var(--pad) clamp(64px, 10vh, 120px);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.scene.full { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.scene.alt { background: linear-gradient(180deg, rgba(255, 255, 255, .014), transparent); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; }
.wrap.center { text-align: center; }
.split { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }

.chrome {
  position: absolute;
  top: clamp(24px, 4vh, 40px);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.chrome .tag:first-child { color: var(--accent-soft); }
.chrome.light { color: rgba(7, 8, 11, .6); }
.chrome.light .tag:first-child { color: rgba(7, 8, 11, .85); }

/* ── type ───────────────────────────────────────────────────────────── */
.display {
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.045em;
  font-size: clamp(40px, 8.6vw, 92px);
}
.display.lg { font-size: clamp(34px, 6.4vw, 68px); }
.display.xl { font-size: clamp(56px, 13vw, 150px); }
.display.xxl { font-size: clamp(52px, 12.5vw, 146px); }
.accent { color: var(--accent-soft); }
.line { display: block; overflow: hidden; padding-bottom: .055em; }
.line-i { display: block; }

.lede { margin-top: 24px; max-width: 36ch; font-size: clamp(16.5px, 2.2vw, 20px); color: #b8bfcd; }
.kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.note { margin-top: 22px; max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.note.center { margin-inline: auto; }

.cta {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 0 16px 40px -18px rgba(77, 124, 254, .9);
  transition: transform .2s var(--ease);
}
.cta:active { transform: scale(.97); }
.hero-cta { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-note { font-size: 13px; color: var(--muted); }

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  font-size: 12px;
  letter-spacing: .04em;
  color: #b8bfcd;
}
.pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(77, 124, 254, .15); }
.pip.green { background: var(--green); box-shadow: 0 0 0 4px rgba(63, 184, 115, .15); }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { padding-bottom: clamp(86px, 12vh, 140px); }
.hero-grid { display: grid; gap: clamp(34px, 5vw, 60px); align-items: center; }

/* the reel: his actual work, on a loop. Video, so it still moves under Reduce Motion. */
.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  justify-self: center;
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #07080b url("/media/header-poster.jpg") center / cover;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -40px #000, 0 0 0 1px var(--line);
}
.reel-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* bottom shade so the caption reads on any frame */
.reel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 9, .82));
  pointer-events: none;
}
.reel-cap, .reel-stat { position: absolute; z-index: 1; }
.reel-cap {
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.reel-dim { font-weight: 400; color: var(--muted); }
.reel-stat {
  right: 14px;
  top: 14px;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(7, 8, 11, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  text-align: right;
}
.reel-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reel-n { font-size: 22px; font-weight: 700; color: var(--accent-soft); font-variant-numeric: tabular-nums; }

/* ticker across the bottom of the hero */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--line-soft);
  padding: 14px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-in {
  display: flex;
  gap: 26px;
  white-space: nowrap;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  width: max-content;
  animation: slide 34s linear infinite;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ── 02 case, full bleed accent ─────────────────────────────────────── */
.case { background: var(--accent); color: #06070a; border-bottom: none; }
.case .display { letter-spacing: -.05em; }
.case-sub { margin: 26px auto 0; max-width: 38ch; font-size: clamp(15px, 2vw, 18px); color: rgba(7, 8, 11, .72); }
.case-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.case-meta div { padding: 14px 22px; border: 1px solid rgba(7, 8, 11, .18); border-radius: 14px; background: rgba(255, 255, 255, .1); }
.case-meta dt { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(7, 8, 11, .6); }
.case-meta dd { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }

/* ── 03 speed ruler ─────────────────────────────────────────────────── */
.ruler { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); padding: clamp(18px, 3vw, 28px); }
.ruler-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 14px; margin-bottom: 16px; }
.ruler-k { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ruler-track { position: relative; height: 34px; border-radius: 10px; background: #12151c; overflow: hidden; }
.ruler-fill { position: absolute; inset: 0 auto 0 0; border-radius: 10px; transform-origin: 0 50%; transform: scaleX(0); width: 100%; }
.ruler-fill.slow { background: linear-gradient(90deg, #2a3040, #363d4f); }
.ruler-fill.fast { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.in .ruler-fill.slow { transform: scaleX(1); transition: transform 1.1s var(--ease); }
.in .ruler-fill.fast { transform: scaleX(.02); transition: transform 1.1s .18s var(--ease); }
.ruler-v { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ruler-v.accent { right: auto; left: calc(2% + 14px); color: var(--accent-soft); }
.ruler-scale { display: flex; justify-content: space-between; margin-top: 6px; padding-left: 76px; font-size: 10.5px; letter-spacing: .1em; color: #4d5565; }

/* ── 04 squares ─────────────────────────────────────────────────────── */
.squares { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, 1vw, 9px); }
.squares i {
  aspect-ratio: 1;
  border-radius: 4px;
  background: #171b23;
  opacity: 0;
  transform: scale(.6);
}
.in .squares i { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 9ms); }
.squares i.us { background: linear-gradient(160deg, var(--accent-soft), var(--accent)); }
.legend { display: flex; gap: 18px; margin-top: 22px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 12px; height: 12px; border-radius: 3px; }
.sw.us { background: var(--accent); }
.sw.him { background: #171b23; }

/* ── 05 chart + costs ───────────────────────────────────────────────── */
.chart { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); padding: clamp(18px, 3vw, 26px); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chart-tot { font-size: clamp(20px, 3.4vw, 28px); font-weight: 800; letter-spacing: -.03em; color: var(--fg); text-transform: none; font-variant-numeric: tabular-nums; }
.curve { display: block; width: 100%; height: clamp(120px, 20vh, 170px); margin-top: 14px; overflow: visible; }
.curve .area { fill: url(#g); opacity: 0; }
.in .curve .area { opacity: 1; transition: opacity .9s .5s var(--ease); }
.curve .stroke { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.in .curve .stroke { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10.5px; letter-spacing: .1em; color: #4d5565; }

.costs { display: grid; gap: 12px; margin-top: clamp(28px, 5vw, 48px); }
.cost { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 18px 20px; }
.cost-k { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cost-v { display: block; margin-top: 8px; font-size: clamp(21px, 3.4vw, 27px); font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.cost-v s { color: #5a6273; font-weight: 500; margin-right: 10px; text-decoration-color: var(--red); }
.cost-d { position: absolute; top: 16px; right: 18px; padding: 5px 10px; border-radius: 999px; background: rgba(63, 184, 115, .12); border: 1px solid rgba(63, 184, 115, .4); color: var(--green-soft); font-size: 12px; font-weight: 700; }

/* ── 06 money ───────────────────────────────────────────────────────── */
.money { background: linear-gradient(180deg, rgba(77, 124, 254, .05), transparent 45%); }
.big { line-height: .88; font-variant-numeric: tabular-nums; }
.big.green .num { color: var(--green-soft); }
.big-k { margin: 16px 0 52px; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.money .kicker { margin-bottom: 30px; display: block; }
.num { display: inline-block; }

/* ── 07 apply ───────────────────────────────────────────────────────── */
.next { list-style: none; margin-top: 30px; display: grid; gap: 14px; }
.next li { display: flex; gap: 14px; align-items: baseline; font-size: 15px; color: #b8bfcd; }
.next span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent-soft); }
.form { border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 3.4vw, 32px); background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: 0 40px 90px -60px #000; }
.steps { display: flex; gap: 6px; margin-bottom: 26px; }
.steps i { height: 3px; flex: 1; border-radius: 999px; background: #1c212b; transition: background .3s var(--ease); }
.steps i.on { background: var(--accent); }
.steps i.past { background: rgba(77, 124, 254, .4); }
.step label { display: block; font-size: clamp(19px, 2.6vw, 23px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; }
.step label em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
input, textarea {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #222734;
  background: #090b0f;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color .2s var(--ease);
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; line-height: 1.45; }
/* tap questions: big targets, no keyboard until step 3 */
.pick { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.pick legend { padding: 0; font-size: clamp(18px, 2.4vw, 21px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opts.three { grid-template-columns: repeat(3, 1fr); }
.opts:not(.three) button:last-child:nth-child(odd) { grid-column: span 2; }
.opts button {
  min-height: 50px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid #222734;
  background: rgba(255, 255, 255, .015);
  color: #c9ceda;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.opts button.on { color: #fff; border-color: var(--accent); background: rgba(77, 124, 254, .16); box-shadow: 0 0 0 1px var(--accent) inset; }
.step label + input, .step label + .at { margin-bottom: 18px; }
.step input + label, .step .at + label { margin-top: 4px; }
.at { position: relative; }
.at span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; pointer-events: none; }
.at input { padding-left: 34px; }
.hint { margin-top: 10px; font-size: 13px; color: var(--muted); }
.saved { margin: -10px 0 18px; font-size: 12.5px; color: var(--green-soft); }
/* the first wrong answer shakes and goes red; under Reduce Motion it only goes red */
.bad { animation: shake .42s var(--ease); }
.pick.bad .opts button, input.bad { border-color: var(--red); }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .bad { animation: fade-bad .42s; } @keyframes fade-bad { from { opacity: .6; } } }
.err { min-height: 20px; margin-top: 10px; font-size: 13.5px; color: var(--red); }
.nav { display: flex; gap: 10px; }
button.solid, button.ghost { flex: 1; padding: 16px 22px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; border: 1px solid transparent; transition: transform .2s var(--ease); }
button.solid { background: var(--accent); color: #fff; }
button.ghost { flex: 0 0 auto; background: transparent; border-color: var(--line); color: var(--muted); }
button:active { transform: scale(.97); }
.done { text-align: center; padding: 6px 0 2px; }
.done:not([hidden]) .check { animation: pop .6s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.check { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-size: 25px; }
.done h3 { font-size: 26px; letter-spacing: -.02em; }
.done p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.fine { margin-top: 16px; font-size: 11.5px; color: #5a6273; text-align: center; }

.foot { position: relative; z-index: 2; padding: 44px var(--pad) 60px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.foot-logo { font-weight: 700; color: var(--fg); letter-spacing: -.01em; }

/* ── reveals ────────────────────────────────────────────────────────── */
.line-i { transform: translateY(105%); }
.in .line-i { transform: translateY(0); transition: transform .9s var(--ease); }
.in .line:nth-child(2) .line-i { transition-delay: .08s; }
.in .line:nth-child(3) .line-i { transition-delay: .16s; }
.in .line:nth-child(4) .line-i { transition-delay: .24s; }
.rise { opacity: 0; transform: translateY(18px); }
.in .rise { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.in .rise[data-d="1"] { transition-delay: .14s; }
.in .rise[data-d="2"] { transition-delay: .26s; }
.in .rise[data-d="3"] { transition-delay: .38s; }

/* ── phone ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .display { font-size: clamp(36px, 10.4vw, 52px); }
  .display.lg { font-size: clamp(32px, 9vw, 46px); }
  .display.xl { font-size: clamp(46px, 14vw, 72px); }
  .display.xxl { font-size: clamp(44px, 13.5vw, 70px); }
  .lede { max-width: none; }
  .scene { padding-top: clamp(76px, 11vh, 110px); }
  .hero { padding-bottom: 96px; }
  .reel { aspect-ratio: 4 / 5; max-height: 64svh; border-radius: 22px; }
  .ruler-row { grid-template-columns: 52px 1fr; }
  .ruler-scale { padding-left: 66px; }
  .case-meta div { flex: 1 1 42%; padding: 12px 14px; }
  .big-k { margin-bottom: 38px; }
}

/* ── desktop composition ────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .costs { grid-template-columns: repeat(3, 1fr); }
  .scene[data-scene="05"] .split { align-items: center; }
  .ruler-row { grid-template-columns: 76px 1fr; }
}
@media (min-width: 1280px) {
  .display { font-size: 88px; }
  .display.lg { font-size: 64px; }
}

/* phones: his jewelry IS the first screen. The reel becomes a full-bleed
   backdrop behind the headline instead of a card below the fold. */
@media (max-width: 767px) {
  .hero { position: relative; min-height: 100svh; overflow: hidden; }
  /* the reel must size to the whole section, so .wrap stays unpositioned and
     only the words and labels get lifted above it */
  .hero > .wrap { position: static; }
  .hero > .chrome, .hero > .ticker, .hero .hero-copy { position: relative; z-index: 1; }
  .hero-grid { min-height: calc(100svh - 150px); align-content: end; }
  .hero .reel {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  /* shade top for the labels, clear middle for the gold, heavy bottom for the words */
  .hero .reel::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(7, 8, 11, 0) 0%, rgba(7, 8, 11, 0) 46%, rgba(7, 8, 11, .6) 62%, rgba(7, 8, 11, .92) 78%, #07080b 100%);
  }
  .hero .reel-stat { display: none; }
  .hero .reel-cap { display: none; } /* the chrome label already names him */
  .hero .display { text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
}

/* Reduce Motion means "no travel", not "no animation" (Apple HIG: swap movement
   for dissolves). Headlines and blocks fade in place instead of sliding. Counters,
   bars, squares, the curve and the ticker keep running: they change in place. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line-i { transform: none; opacity: 0; }
  .in .line-i { opacity: 1; transition: opacity .7s var(--ease); }
  .rise { transform: none; }
  .in .rise { transition: opacity .8s var(--ease); }
}

/* ── hero lock screen ───────────────────────────────────────────────────
   The video (media/header.mp4, 1080x1920) carries the notifications. The clock,
   date and the call button's number are live HTML on top, positioned in the
   video's own coordinates by app.js, so they line up at any size. */
.lock, .reel-call { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; transform-origin: 0 0; }
.lock { text-align: center; font-family: -apple-system, "SF Pro Display", system-ui, sans-serif; }
.lock-d { font-size: 45px; font-weight: 600; color: #fff; letter-spacing: .01em; }
.lock-t { font-size: 189px; font-weight: 700; line-height: 1.02; letter-spacing: -.01em; color: rgba(120, 122, 132, .5); text-shadow: 0 2px 0 rgba(255, 255, 255, .14), 0 -2px 0 rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
.reel-call { display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 32px; font-weight: 700; color: #fff; opacity: 0; white-space: nowrap; }
.reel-call svg { width: 34px; height: 34px; }
.reel-call b { font-weight: 700; }
.hero .reel-v { will-change: auto; }
/* desktop: the reel is a phone standing next to the headline, so the whole lock screen shows */
@media (min-width: 768px) {
  .hero .reel { aspect-ratio: 9 / 16; width: auto; height: min(76svh, 780px); max-height: none; border-radius: 38px; }
}