/* KNUENCE™ website — Stage G additions: the official launch film on the home page.
   Existing design tokens only. The gradient is used on graphics and edges, never on text. */
.k-film { position: relative; padding-top: var(--k-space-10); border-top: 1px solid rgba(255, 255, 255, .08); }
.k-film__head { max-width: 760px; margin-inline: auto; text-align: center; }
.k-film__eyebrow { font-size: var(--k-text-overline-size); line-height: var(--k-text-overline-lh); letter-spacing: var(--k-text-overline-tracking);
  font-weight: var(--k-text-overline-weight); text-transform: uppercase; color: var(--k-cyan); }
.k-film__title { margin-top: var(--k-space-4); }

/* Frame: 16:9, gradient hairline edge, panel shadow. Space is reserved before anything loads (no layout shift). */
.k-film__frame { margin: var(--k-space-8) auto 0; max-width: 1040px; }
.k-film__player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--k-radius-xl); padding: 1px;
  background: var(--k-gradient); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.k-film__poster, .k-film__iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: calc(var(--k-radius-xl) - 1px); }
.k-film__poster { position: relative; overflow: hidden; padding: 0; cursor: pointer; color: var(--k-white); text-align: left; font: inherit;
  background: radial-gradient(120% 90% at 78% 30%, var(--k-ink) 0%, var(--k-navy) 62%); }
.k-film__iframe { background: var(--k-navy); }
.k-film__symbol { position: absolute; right: 7%; top: 50%; width: 36%; height: auto; transform: translateY(-50%); opacity: .95; }
.k-film__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-film__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 13, 28, .92) 0%, rgba(4, 13, 28, .55) 48%, rgba(4, 13, 28, 0) 75%); }
.k-film__caption { position: absolute; z-index: 1; left: 6%; bottom: 10%; display: grid; gap: var(--k-space-2); max-width: 52%; }
.k-film__kicker { font-size: var(--k-text-small-size); font-weight: 600; color: var(--k-soft); }
.k-film__name { font-family: var(--k-font-display); font-weight: 600; font-size: var(--k-text-h1-size); line-height: var(--k-text-h1-lh); letter-spacing: var(--k-text-h1-tracking); text-wrap: balance; }
.k-film__play { position: absolute; z-index: 1; left: 6%; top: 10%; display: inline-flex; align-items: center; gap: var(--k-space-3); }
.k-film__play svg { width: 72px; height: 72px; padding: 22px 20px 22px 24px; border-radius: 50%; background: var(--k-white); fill: var(--k-navy);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform var(--k-duration-ui) var(--k-ease-out); }
.k-film__playlabel { font-weight: 600; font-size: var(--k-text-body-size); }
.k-film__poster:hover .k-film__play svg { transform: scale(1.06); }
.k-film__poster:focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 4px; }

.k-film__note { max-width: 680px; margin: var(--k-space-4) auto 0; text-align: center; color: var(--k-mist); font-size: var(--k-text-small-size); line-height: var(--k-text-small-lh); }
.k-film__note a { color: var(--k-cyan); }

/* Closing question: the film's call, set large in the display face. Uppercase via CSS so it reads naturally to screen readers. */
.k-film__question { max-width: 900px; margin: var(--k-space-10) auto 0; text-align: center; text-transform: uppercase; text-wrap: balance;
  font-family: var(--k-font-display); font-weight: 600; font-size: var(--k-text-h1-size); line-height: var(--k-text-h1-lh); letter-spacing: var(--k-text-h3-tracking); }

@media (max-width: 899.98px) {
  .k-film { padding-top: var(--k-space-9); }
  .k-film__name { font-size: var(--k-text-h2-size); line-height: var(--k-text-h2-lh); }
  .k-film__question { margin-top: var(--k-space-8); }
}
@media (max-width: 599.98px) {
  .k-film__frame { margin-top: var(--k-space-6); }
  .k-film__player { border-radius: var(--k-radius-lg); }
  .k-film__poster, .k-film__iframe { border-radius: calc(var(--k-radius-lg) - 1px); }
  .k-film__symbol { width: 44%; right: 5%; }
  .k-film__caption { max-width: 60%; bottom: 8%; gap: var(--k-space-1); }
  .k-film__kicker { font-size: var(--k-text-overline-size); }
  .k-film__name { font-size: var(--k-text-h3-size); line-height: var(--k-text-h3-lh); }
  .k-film__play { top: 8%; }
  .k-film__play svg { width: 52px; height: 52px; padding: 15px 14px 15px 17px; }
  .k-film__playlabel { font-size: var(--k-text-small-size); }
  .k-film__question { font-size: var(--k-text-h2-size); line-height: var(--k-text-h2-lh); }
}
@media (max-width: 419.98px) {
  .k-film__kicker { display: none; } /* the section eyebrow already says "The official launch film" */
  .k-film__symbol { width: 40%; right: 4%; }
}