/* ============================================================
   Fastest page — hero spinner + video showcase.
   ============================================================ */

.lp-head { max-width: 660px; margin-bottom: clamp(8px, 1.2vw, 16px); }
.hero-fold { padding: clamp(20px, 3vw, 34px) 0 clamp(4px, 1.2vw, 10px); overflow-x: clip; }

/* ---- headline kicks a loading spinner off screen ---- */
.hero-h1 { display: inline; }
.hero-h1 .shove { display: inline-block; animation: heroShove .55s cubic-bezier(.3,.85,.25,1) .72s both; }
.hero-spin {
  display: inline-flex; vertical-align: -0.12em; margin-left: .32em;
  width: .64em; height: .64em; transform-origin: center;
  animation: heroKick .5s cubic-bezier(.5,0,.75,.25) .8s both;
  will-change: transform, opacity;
}
.hero-spin .ring {
  width: 100%; height: 100%; border-radius: 999px;
  background: conic-gradient(from 130deg, transparent 6%, var(--ink-4) 48%, var(--ink));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .12em), #000 calc(100% - .115em));
          mask: radial-gradient(farthest-side, transparent calc(100% - .12em), #000 calc(100% - .115em));
  animation: heroSpin .7s linear infinite;
}
@keyframes heroSpin  { to { transform: rotate(360deg); } }
@keyframes heroShove { 0%,22% { transform: translateX(0); } 42% { transform: translateX(.12em); } 60% { transform: translateX(-.015em); } 100% { transform: translateX(0); } }
@keyframes heroKick  { 0% { transform: translateX(0) rotate(0); opacity: 1; } 18% { transform: translateX(-.22em) scale(.88); opacity: 1; } 100% { transform: translateX(120vw) rotate(75deg) scale(1.05); opacity: 0; } }

/* ---- the showcase clip ---- */
.clip-wrap { margin-top: clamp(8px, 1.4vw, 16px); width: min(1120px, 100%); margin-inline: auto; }
.clip-note { display: flex; align-items: center; justify-content: flex-start; gap: 9px; margin-bottom: 14px; color: var(--ink-3); font-size: 13.5px; font-weight: 500; }
.clip-note .dot { width: 8px; height: 8px; border-radius: 999px; background: #2c9e63; box-shadow: 0 0 0 0 rgba(44,158,99,.5); animation: livepulse 2s infinite; flex-shrink: 0; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(44,158,99,.45); } 70% { box-shadow: 0 0 0 7px rgba(44,158,99,0); } 100% { box-shadow: 0 0 0 0 rgba(44,158,99,0); } }
.clip-note b { color: var(--ink); font-weight: 600; }

.vidframe {
  position: relative; width: min(1120px, 100%); margin: 0 auto;
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: #fff;
}
.vidframe video,
.vidframe .poster { display: block; width: 100%; height: auto; border-radius: 16px; }
.vidframe .poster { aspect-ratio: 1280 / 800; object-fit: cover; object-position: center top; }
.vidframe .hint {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  background: linear-gradient(transparent, rgba(255,255,255,.9) 40%);
}
.vidframe.has-video .hint { display: none; }

.clip-cap { max-width: 56ch; margin: clamp(16px, 2.2vw, 26px) auto 0; text-align: center; }
.clip-cap p { color: var(--ink-3); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; margin: 0; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .hero-spin { display: none; }
  .hero-h1 .shove { animation: none; }
  .clip-note .dot { animation: none; }
}