/* Hero film: the knowledge base drafts itself, HeyFable researches the account, then the
   headline and sign-up take the stage. Tokens only. Without JS, or with reduced motion,
   only the finished state (headline + sign-up) shows. */

.film { padding-block: 0; }
.film::before {
  content: ""; position: absolute; inset: 0 0 0 35%; pointer-events: none;
  background-image: var(--dot-grid); background-size: var(--dot-gap) var(--dot-gap);
  mask-image: radial-gradient(ellipse 60% 70% at 62% 50%, var(--ink-900) 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 62% 50%, var(--ink-900) 20%, transparent 75%);
}
.film__stage {
  position: relative; display: grid; grid-template-areas: "film"; align-items: center;
  min-height: clamp(var(--film-min-h), calc(100svh - var(--nav-height)), var(--film-max-h));
  padding-block: var(--space-8);
}
.film__scenes, .film__end { grid-area: film; }

/* ---- States ---- */
.film__scenes { display: none; }
html.js .film.is-playing .film__scenes { display: grid; }
html.js .film.is-end .film__scenes { opacity: 0; transition: opacity var(--duration-panel) var(--ease-out); }
html.js .film.is-done .film__scenes { display: none; }
html.js .film:not(.is-end) .film__end { opacity: 0; pointer-events: none; }
.film.is-end .film__end > * { animation: hf-reveal var(--duration-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
.film__end > :nth-child(2) { --i: 1; }
.film__end > :nth-child(3) { --i: 2; }

/* ---- The scenes: caption left, card right ---- */
.film__scenes { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: center; }
.film__captions { grid-column: 1 / span 4; display: grid; }
.film__cap { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-5); }
.film__h { font: 600 56px/1.04 var(--font-display); letter-spacing: -0.035em; color: var(--ink-900); text-wrap: balance; }
.film__lead { display: block; color: var(--brand-500); margin-bottom: var(--space-2); }
.film__sub { color: var(--ink-600); max-width: 28ch; }
.film__deck { grid-column: 5 / span 8; display: grid; background: transparent; color: var(--ink-900); }

/* Everything that arrives: fades up, leaves upward */
.film__cap, .fx { opacity: 0; transform: translateY(var(--space-3)); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.film__cap.is-on, .fx.is-on { opacity: 1; transform: none; }
.film__cap.is-off, .fx.is-off { opacity: 0; transform: translateY(calc(-1 * var(--space-4))); }
.kb-pop { opacity: 0; transform: scale(0.6); transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-panel) var(--ease-out); }
.kb-pop.is-on { opacity: 1; transform: none; }
.typing::after { content: ""; display: inline-block; width: var(--rail-width); height: 1em; margin-left: var(--space-1); vertical-align: -0.12em; background: var(--brand-500); }

/* ---- Card shell (dark, from the brand's dark theme) ---- */
.fc {
  grid-area: 1 / 1; position: relative; overflow: hidden;
  width: 100%; max-width: var(--film-card-w); height: var(--film-card-h); justify-self: end;
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface-000); border: var(--hairline) solid var(--line-100); border-radius: var(--radius-xl);
  box-shadow: var(--film-shadow);
  opacity: 0; transform: translateY(var(--space-5)) scale(0.97);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}
.fc.is-on { opacity: 1; transform: none; }
.fc.is-off { opacity: 0; transform: translateY(calc(-1 * var(--space-4))) scale(0.95); }
.fc::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: var(--dot-grid); background-size: var(--dot-gap) var(--dot-gap);
  mask-image: radial-gradient(ellipse 70% 50% at 80% 0%, var(--ink-900), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 80% 0%, var(--ink-900), transparent 70%);
}
.fc > * { position: relative; }
.fc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.fc__id { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.fc__eyebrow { display: flex; align-items: center; gap: var(--space-2); font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-500); }
.fc__eyebrow--meta { color: var(--ink-500); }

/* ---- Knowledge base card ---- */
.kb__name { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink-900); min-height: 1.1em; }
.kb__url { font: 400 13px/1.3 var(--font-mono); color: var(--ink-500); }
.kb__ring { display: flex; align-items: center; gap: var(--space-3); }
.kb__dial { position: relative; width: var(--film-dial); height: var(--film-dial); }
.kb__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kb__dial circle { fill: none; stroke: var(--line-100); stroke-width: 5; }
.kb__dial .kb__arc { stroke: var(--brand-500); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset var(--duration-reveal) var(--ease-out); }
.kb__count { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 var(--font-display); color: var(--ink-900); }
.kb__ringlbl { font: 400 12px/1.3 var(--font-sans); color: var(--ink-500); max-width: 7ch; }

.kb__tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--space-7); }
.kb__pill { position: absolute; top: 0; left: 0; width: 20%; height: 100%; border-radius: var(--radius-pill); background: var(--brand-500); transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform var(--duration-reveal) var(--ease-out); }
.kb__tab { position: relative; display: grid; place-items: center; font: 500 13px/1 var(--font-sans); color: var(--ink-500); white-space: nowrap; transition: color var(--duration-panel) var(--ease-out); }
.kb__tab.is-done { color: var(--ink-900); }
.kb__tab.is-active { color: var(--on-brand); }
.kb__tab.is-done:not(.is-active)::after { content: ""; position: absolute; top: var(--space-1); right: var(--space-2); width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); }
.kb__tab-s { display: none; }

.kb__box { flex: 1; position: relative; overflow: hidden; border: var(--hairline) solid var(--line-100); border-radius: var(--radius-lg); background: var(--surface-100); }
.kb__panel { position: absolute; inset: 0; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); opacity: 0; transform: translateX(var(--space-4)); transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-panel) var(--ease-out); }
.kb__panel.is-on { opacity: 1; transform: none; transition-delay: var(--duration-hover); }
/* The old panel clears before the new one lands, so their text never overlaps */
.kb__panel.is-off { opacity: 0; transform: translateX(calc(-1 * var(--space-4))); transition-duration: var(--duration-hover); }
.kb__ph { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.kb__title { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink-900); }
.kb__sub { font: 400 14px/1.35 var(--font-sans); color: var(--ink-500); margin-top: var(--space-1); }
.kb__rows { display: flex; flex-direction: column; gap: var(--space-4); }
.kb__beam { position: absolute; left: 0; right: 0; top: 0; height: var(--rail-width); background: var(--brand-500); box-shadow: var(--shadow-glow); opacity: 0; }
.kb__beam.is-on { animation: kb-beam var(--film-beam) linear both; }
@keyframes kb-beam { 0% { top: 0; opacity: 0; } 50% { opacity: 0.9; } 100% { top: 100%; opacity: 0; } }

.kb-row--kv, .kb-row--chips, .kb-row--news { display: grid; grid-template-columns: var(--film-label) minmax(0, 1fr); gap: var(--space-4); }
.kb-row--kv, .kb-row--news, .kb-row--stack { padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--line-100); }
.kb-row--chips { align-items: center; }
.kb-row--news { align-items: baseline; }
.kb-row--bul { display: flex; align-items: center; gap: var(--space-3); }
.kb-row--stack { display: flex; flex-direction: column; gap: var(--space-1); }
.kb-label { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); padding-top: var(--space-1); }
.kb-row--chips .kb-label { padding-top: 0; }
.kb-val { font: 400 15px/1.4 var(--font-sans); color: var(--ink-900); }
.kb-val--soft { font-size: 14px; color: var(--ink-600); }
.kb-val--strong { font-weight: 500; }
.kb-name { font: 600 16px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }
.kb-date { font: 500 13px/1 var(--font-mono); color: var(--ink-500); }
.kb-bul { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500); }
.kb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kb-chips .hf-chip { height: var(--space-6); padding-inline: var(--space-3); }
.kb-mark { display: flex; align-items: center; gap: var(--space-2); }
.kb-mark::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.kb-mark--good::before { background: var(--success-600); }
.kb-mark--risk::before { background: var(--danger-600); }

/* ---- Research card ---- */
.rs { gap: var(--space-3); }
.rs__head { padding-bottom: var(--space-4); border-bottom: var(--hairline) solid var(--line-100); }
.rs__dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--brand-500); transition: background var(--duration-panel) var(--ease-out); }
.rs.is-done .rs__dot { background: var(--brand-500); }
.rs__title { font: 600 26px/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--ink-900); }
.rs__clock { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.rs__time { font: 500 30px/1 var(--font-mono); color: var(--ink-900); font-variant-numeric: tabular-nums; }

.rs__stages { display: flex; flex-direction: column; gap: var(--space-1); }
.rs-stage { position: relative; border-radius: var(--radius-md); overflow: hidden; opacity: 0.35; transition: opacity var(--duration-panel) var(--ease-out), background var(--duration-panel) var(--ease-out); }
.rs-stage.is-near { opacity: 1; }
.rs-stage.is-active { background: var(--surface-200); }
.rs-stage__row { display: grid; grid-template-columns: var(--film-icon) auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); height: 52px; padding-inline: var(--space-4); }
.rs-stage__icon { position: relative; width: var(--film-icon); height: var(--film-icon); }
.rs-stage__icon > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-stage__icon circle { fill: none; stroke: var(--line-200); stroke-width: 2.5; }
.rs-stage__icon .rs-stage__arc { stroke: var(--brand-500); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rs-stage__check { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--brand-500); color: var(--on-brand); opacity: 0; transform: scale(0.5); transition: opacity var(--duration-panel) var(--ease-out), transform var(--duration-panel) var(--ease-out); }
.rs-stage__check svg { width: 14px; height: 14px; stroke-width: 2.25; }
.rs-stage.is-done .rs-stage__check { opacity: 1; transform: none; }
.rs-stage__num { font: 500 12px/1 var(--font-mono); color: var(--ink-500); }
.rs-stage__name { font: 600 20px/1.1 var(--font-display); letter-spacing: -0.015em; color: var(--ink-900); }
.rs-stage__line { font: 400 13px/1.2 var(--font-mono); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rs-stage.is-active .rs-stage__line { color: var(--brand-500); }
.rs-stage__pct { font: 500 14px/1 var(--font-mono); color: var(--ink-500); text-align: right; min-width: 4ch; font-variant-numeric: tabular-nums; }
.rs-stage.is-done .rs-stage__pct { color: var(--ink-900); }
.rs-stage__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--rail-width); background: var(--brand-500); transform: scaleX(0); transform-origin: left; opacity: 0.35; }
.rs-stage.is-active .rs-stage__bar { opacity: 1; }
.rs-stage__det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-reveal) var(--ease-out); }
.rs-stage.is-open .rs-stage__det { grid-template-rows: 1fr; }
.rs-stage__det > div { min-height: 0; overflow: hidden; }
.rs-stage__inner { padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + var(--film-icon) + var(--space-3)); }

.rs-in { opacity: 0; transform: translateY(var(--space-1)); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.rs-in.is-on { opacity: 1; transform: none; }
.rs-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rs-chips .hf-chip { padding-inline: var(--space-1) var(--space-3); }
.rs-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rs-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: var(--space-6); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-100); }
.rs-fact__t { font: 500 14px/1.25 var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ok { display: flex; align-items: center; gap: var(--space-2); }
.rs-ver { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--success-600); }
.rs-ver svg { width: 11px; height: 11px; stroke-width: 2.25; }
.rs-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-100); white-space: nowrap; }
.rs-pair { display: flex; flex-direction: column; gap: var(--space-1); }
.rs-k { font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.rs-k--brand { color: var(--brand-500); }
.rs-v { font: 500 14px/1.2 var(--font-sans); color: var(--ink-900); }
.rs-plus { font: 600 16px/1 var(--font-sans); color: var(--ink-500); }
.rs-join { margin-left: auto; width: var(--space-5); height: var(--rail-width); background: var(--brand-500); }
.rs-link .hf-chip { padding-inline: var(--space-3); }
.rs-story { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--rail-width) solid var(--brand-500); border-radius: var(--radius-md); }
.rs-line { font: 600 16px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900); }

.rs__cmp { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline) solid var(--line-100); }
.rs-cmp { display: grid; grid-template-columns: var(--film-label) minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.rs-cmp__l { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.rs-cmp--hot .rs-cmp__l { color: var(--brand-500); }
.rs-cmp__track { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rs-cmp__fill { flex: none; width: 0; height: var(--film-bar); border-radius: var(--radius-pill); background: var(--line-200); transition: width var(--duration-reveal) var(--ease-out); }
.rs-cmp--hot .rs-cmp__fill { background: var(--brand-500); }
.rs-cmp__v { font: 400 16px/1.2 var(--font-sans); color: var(--ink-600); white-space: nowrap; opacity: 0; transition: opacity var(--duration-reveal) var(--ease-out); }
.rs-cmp--hot .rs-cmp__v { font-weight: 600; color: var(--ink-900); }
.rs__cmp.is-on .rs-cmp .rs-cmp__fill { width: 40%; }
.rs__cmp.is-on .rs-cmp--hot .rs-cmp__fill { width: var(--space-4); }
.rs__cmp.is-on .rs-cmp__v { opacity: 1; }

/* ---- The finished state: headline and sign-up ---- */
.film__end { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; transition: opacity var(--duration-panel) var(--ease-out); }
.film__title { text-wrap: balance; max-width: 20ch; }
.film__intro { color: var(--ink-600); max-width: var(--container-text); }
.film__signup { width: 100%; max-width: 520px; align-items: center; }
.film__signup .signup__row { width: 100%; }

/* ---- Skip and replay ---- */
.film__controls { position: absolute; right: var(--space-5); bottom: var(--space-5); display: flex; gap: var(--space-2); }
.film__controls .hf-btn { color: var(--ink-600); }
.film__controls svg { width: 16px; height: 16px; stroke-width: 1.5; }
.film__skip, .film__replay { display: none; }
html.js .film.is-playing:not(.is-end) .film__skip { display: inline-flex; }
html.js .film.is-done .film__replay { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  html.js .film.is-done .film__replay { display: none; }
}

/* ---- Smaller screens ---- */
@media (max-width: 1023px) {
  .film__scenes { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .film__captions, .film__deck { grid-column: 1; }
  .fc { justify-self: center; }
  .film__h { font-size: 44px; }
  .film__sub { max-width: none; }
}
@media (max-width: 767px) {
  .film__stage { padding-block: var(--space-5) var(--space-9); }
  .film__scenes { row-gap: var(--space-5); }
  .film__h { font-size: 34px; line-height: 1.08; letter-spacing: -0.03em; }
  .film__lead { margin-bottom: 0; }
  .film__cap { gap: var(--space-3); }
  .film__sub { font-size: 16px; }
  .film__title { font-size: 38px; line-height: 1.08; letter-spacing: -0.03em; }
  .fc { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); gap: var(--space-3); }
  .kb__name { font-size: 22px; }
  .kb__tab { font-size: 12px; }
  .kb__tab-l { display: none; }
  .kb__tab-s { display: inline; }
  .kb__box { border-radius: var(--radius-md); }
  .kb__panel { padding: var(--space-4); gap: var(--space-4); }
  .kb__ph .hf-badge { display: none; }
  .kb__rows { gap: var(--space-3); }
  .kb-val { font-size: 14px; }
  .kb-val--soft { font-size: 13px; }
  .rs__title { font-size: 20px; }
  .rs__time { font-size: 22px; }
  .rs-stage__row { height: 40px; gap: var(--space-2); padding-inline: var(--space-3); }
  .rs-stage__name { font-size: 16px; }
  .rs-stage__line { font-size: 11px; }
  .rs-stage__pct { font-size: 12px; }
  .rs-stage__inner { padding: 0 var(--space-3) var(--space-3); }
  .rs-fact__t { font-size: 13px; }
  .rs-ver { display: none; }
  .rs-link { flex-wrap: wrap; white-space: normal; }
  .rs-plus, .rs-join { display: none; }
  .rs-cmp { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .rs-cmp__v { font-size: 14px; }
  .film__controls { right: var(--space-4); bottom: var(--space-4); }
}
.film:focus { outline: none; } /* focused by script when "How it works" replays it */

/* Headline words in Cobalt with a soft glow; a light band sweeps across them once when the film lands */
.glow {
  color: var(--brand-500);
  background: linear-gradient(100deg, var(--brand-500) 42%, var(--glow-shine) 50%, var(--brand-500) 58%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(var(--glow-halo));
}
.film.is-end .glow { animation: hf-shimmer var(--glow-sweep) var(--ease-out) calc(var(--duration-reveal) + 2 * var(--stagger)) 1 both; }
.film.is-end .glow + .glow, .film.is-end .film__title .glow:last-child { animation-delay: calc(var(--duration-reveal) + 4 * var(--stagger)); }
/* Jumping in from a "Get early access" link shows the finished hero with no motion at all */
.film.is-instant, .film.is-instant * { transition: none !important; animation: none !important; }
@keyframes hf-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .film.is-end .glow { animation: none; } }