/* HumFut components. Every value comes from tokens.css (colors, radii,
   shadows, spacing, font families). Source per component in its README. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&family=Nunito:wght@500;700&display=swap");

/* ---------- App Store button (Apple badge; Things 6px button radius) ---------- */
.hf-store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 18px 8px 14px;
  border-radius: var(--radius-button);
  background: var(--store-badge); color: var(--on-store-badge);
  font-family: var(--font-sans); text-decoration: none;
}
.hf-store:hover { color: var(--on-store-badge); opacity: .88; }
.hf-store svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.hf-store .hf-store-lines { display: flex; flex-direction: column; line-height: 1.05; }
.hf-store .hf-store-small { font-size: 11px; font-weight: 500; }
.hf-store .hf-store-big { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Text link with chevron (Things Inline Text Link) ---------- */
.hf-link {
  font-family: var(--font-sans); font-size: 17px; line-height: 1.3; font-weight: 400;
  color: var(--accent); text-decoration: none;
}
.hf-link::after { content: " \25B8"; }
.hf-link:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Focus ring (accent, 3px solid; 3:1+ on every surface) ---------- */
.hf-focus:focus-visible, .hf-store:focus-visible, .hf-link:focus-visible,
.hf-tab:focus-visible, .hf-step:focus-visible, .hf-doc-button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

/* ---------- App icon (iOS mask) ---------- */
.hf-app-icon { display: block; border-radius: var(--radius-app-icon); }

/* ---------- Feature card (Things: surface on canvas, 18px, paired shadow) ---------- */
.hf-feature {
  background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-24); font-family: var(--font-sans); color: var(--ink);
}
.hf-feature-head { display: flex; align-items: center; gap: var(--space-10); }
.hf-feature-icon {
  width: 40px; height: 40px; border-radius: var(--radius-button); flex: none;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  --ai-size: 26px; --ai-bg: var(--accent);
}
.hf-feature h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0; }
.hf-feature p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: var(--space-10) 0 0; }

/* ---------- Floating card (Flighty: 20px, whisper stack, ±3deg) ---------- */
.hf-float {
  display: flex; gap: var(--space-10); align-items: center;
  background: var(--surface); border-radius: var(--radius-float); box-shadow: var(--shadow-float);
  padding: var(--space-16); font-family: var(--font-sans); color: var(--ink); width: max-content; max-width: 260px;
}
.hf-float strong { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; }
.hf-float span.hf-float-meta { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hf-float .hf-float-art { width: 32px; height: 32px; border-radius: var(--radius-pill); flex: none; background: var(--live); display: grid; place-items: center; }
.hf-float .hf-float-art svg { width: 16px; height: 16px; fill: var(--on-live); }

/* ---------- Live waveform (Stable Audio: lime marks audio-active) ---------- */
.hf-live { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.hf-live i { display: block; width: 3px; height: 30%; border-radius: 2px; background: var(--live); animation: hf-eq 1s ease-in-out infinite; }
.hf-live i:nth-child(2) { animation-delay: -.2s; } .hf-live i:nth-child(3) { animation-delay: -.5s; }
.hf-live i:nth-child(4) { animation-delay: -.7s; } .hf-live i:nth-child(5) { animation-delay: -.35s; }
@keyframes hf-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ---------- Kicker badge (Jitter pill badge, one per section) ---------- */
.hf-kicker {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--kicker); color: var(--on-kicker);
  font-family: var(--font-doc); font-size: 13px; line-height: 1.2; font-weight: 500;
}

/* ---------- Tutorial tabs (Duolingo: 12px, 2px outline, pressed edge) ---------- */
.hf-tabs { display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: center; }
.hf-tab {
  display: inline-flex; align-items: center; gap: var(--space-10); cursor: pointer;
  padding: var(--space-12) var(--space-16); border-radius: var(--radius-tutorial);
  border: 2px solid var(--hairline); border-bottom-width: 4px; background: var(--surface); color: var(--ink);
  font-family: var(--font-rounded); font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: .8px;
}
.hf-tab .hf-num {
  width: 28px; height: 28px; border-radius: var(--radius-tutorial); display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
}
.hf-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent-press); color: var(--on-accent); }
.hf-tab[aria-selected="true"] .hf-num { background: var(--on-accent); color: var(--accent); }
.hf-tab:active { border-bottom-width: 2px; transform: translateY(2px); }

/* ---------- Step card (Duolingo: border only, no fill change, no shadow) ---------- */
.hf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); }
.hf-step {
  position: relative; overflow: hidden; cursor: pointer;
  display: grid; grid-template-columns: 36px 1fr; gap: var(--space-16); align-items: start;
  padding: var(--space-16); border-radius: var(--radius-tutorial);
  border: 2px solid var(--hairline); border-bottom-width: 4px; background: var(--surface);
  font-family: var(--font-rounded); color: var(--ink);
}
.hf-step .hf-num {
  width: 36px; height: 36px; border-radius: var(--radius-tutorial); display: grid; place-items: center;
  border: 2px solid var(--hairline); color: var(--muted);
  font-size: 15px; font-weight: 700; letter-spacing: .8px;
}
.hf-step strong { display: block; font-size: 19px; line-height: 1.33; font-weight: 700; letter-spacing: 1px; }
.hf-step span.hf-step-body { display: block; font-size: 15px; line-height: 1.47; font-weight: 500; letter-spacing: .8px; color: var(--muted); margin-top: 2px; }
.hf-step.is-active { border-color: var(--accent); border-bottom-color: var(--accent-press); }
.hf-step.is-active .hf-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hf-step.is-done .hf-num { border-color: var(--accent); color: var(--accent); }
.hf-step .hf-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); }
.hf-step.is-active .hf-bar { animation: hf-fill var(--dur, 3s) linear forwards; }
@keyframes hf-fill { to { width: 100%; } }

/* ---------- Animation preview card (Jitter: 40px, four-layer float) ---------- */
.hf-preview {
  background: var(--surface); border-radius: var(--radius-preview); box-shadow: var(--shadow-preview);
  padding: var(--space-40) var(--space-24); display: grid; place-items: center;
}
/* Tap ring (Jitter Electric Blue highlight ring) */
.hf-tap {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: var(--radius-pill);
  border: 3px solid var(--tap-ring); pointer-events: none; animation: hf-tap 1.6s ease-out infinite;
}
@keyframes hf-tap {
  0% { opacity: 0; transform: scale(1.4); } 20% { opacity: 1; transform: scale(.85); }
  45% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- Doc (Signal): outlined button, panel ---------- */
.hf-doc-button {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-24); border-radius: var(--radius-doc-button);
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  font-family: var(--font-doc); font-size: 16px; font-weight: 600; text-decoration: none;
}
.hf-doc-button:hover { color: var(--accent-press); border-color: var(--accent-press); }
.hf-doc-panel {
  background: var(--accent-wash); border-radius: var(--radius-doc-panel); padding: 30px;
  font-family: var(--font-doc); color: var(--doc-ink);
}
.hf-doc-panel p { margin: 0; font-size: 16px; line-height: 1.5; }

/* ---------- Footer (Signal Twilight band) ---------- */
.hf-footer { background: var(--footer); color: var(--on-footer); font-family: var(--font-doc); font-size: 14px; }
.hf-footer a { color: var(--on-footer); text-decoration: none; }
.hf-footer a:hover { text-decoration: underline; }
.hf-footer h4 { color: #ffffff; font-size: 16px; font-weight: 600; margin: 0 0 var(--space-12); }


/* ---------- Animated icon (HumFut line glyphs; parts move by role) ---------- */
.hf-ai { display: inline-grid; place-items: center; flex: none; width: var(--ai-size, 32px); height: var(--ai-size, 32px); color: inherit; }
.hf-ai svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.hf-ai svg * { transform-box: fill-box; transform-origin: center; }
.hf-ai .ai-draw { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.hf-ai .ai-cut { stroke: var(--ai-bg, var(--surface)); stroke-width: 6; }
.hf-ai .ai-ring { opacity: var(--o, .3); }
.hf-ai .ai-sway, .hf-ai .ai-eq { transform-origin: 50% 100%; }
.hf-ai .ai-shake { transform-origin: 30% 70%; }
.hf-ai .ai-toggle { transform: translateX(12px); }
.hf-ai.is-playing svg *, .hf-ai.is-looping svg * {
  animation-duration: 1.5s; animation-timing-function: cubic-bezier(.3, .7, .3, 1);
  animation-fill-mode: both; animation-delay: var(--d, 0s);
}
.hf-ai.is-looping svg * { animation-duration: 2.2s; animation-iteration-count: infinite; }
.hf-ai.is-playing .ai-press, .hf-ai.is-looping .ai-press { animation-name: ai-press; }
.hf-ai.is-playing .ai-ring, .hf-ai.is-looping .ai-ring { animation-name: ai-ring; }
.hf-ai.is-playing .ai-rise, .hf-ai.is-looping .ai-rise { animation-name: ai-rise; }
.hf-ai.is-playing .ai-drop, .hf-ai.is-looping .ai-drop { animation-name: ai-drop; }
.hf-ai.is-playing .ai-draw, .hf-ai.is-looping .ai-draw { animation-name: ai-draw; }
.hf-ai.is-playing .ai-pulse, .hf-ai.is-looping .ai-pulse { animation-name: ai-pulse; }
.hf-ai.is-playing .ai-sway, .hf-ai.is-looping .ai-sway { animation-name: ai-sway; }
.hf-ai.is-playing .ai-pop, .hf-ai.is-looping .ai-pop { animation-name: ai-pop; }
.hf-ai.is-playing .ai-eq, .hf-ai.is-looping .ai-eq { animation-name: ai-eq; }
.hf-ai.is-playing .ai-slide, .hf-ai.is-looping .ai-slide { animation-name: ai-slide; }
.hf-ai.is-playing .ai-lift, .hf-ai.is-looping .ai-lift { animation-name: ai-lift; }
.hf-ai.is-playing .ai-blink, .hf-ai.is-looping .ai-blink { animation-name: ai-blink; }
.hf-ai.is-playing .ai-shake, .hf-ai.is-looping .ai-shake { animation-name: ai-shake; }
.hf-ai.is-playing .ai-wave, .hf-ai.is-looping .ai-wave { animation-name: ai-wave; }
.hf-ai.is-playing .ai-nudge, .hf-ai.is-looping .ai-nudge { animation-name: ai-nudge; }
.hf-ai.is-playing .ai-toggle, .hf-ai.is-looping .ai-toggle { animation-name: ai-toggle; }
@keyframes ai-press { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(.82); } 28% { transform: scale(1.06); } }
@keyframes ai-ring {
  0%, 100% { opacity: var(--o, .3); transform: scale(1); } 8% { opacity: 0; transform: scale(.55); }
  30% { opacity: .95; transform: scale(.95); } 55% { opacity: 0; transform: scale(1.18); } 70% { opacity: 0; transform: scale(1); }
}
@keyframes ai-rise { 0%, 55%, 100% { transform: translateY(0); } 20% { transform: translateY(-4.5px); } 36% { transform: translateY(.6px); } 45% { transform: translateY(-1.4px); } }
@keyframes ai-drop {
  0%, 60%, 100% { transform: translateY(0); opacity: 1; } 28% { transform: translateY(7px); opacity: 0; }
  29% { transform: translateY(-7px); opacity: 0; }
}
@keyframes ai-draw { 0% { stroke-dashoffset: var(--len); } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes ai-pulse { 0%, 50%, 100% { transform: scale(1); } 14% { transform: scale(.5); } 32% { transform: scale(1.15); } }
@keyframes ai-sway { 0%, 70%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg) translateY(-1px); } 32% { transform: rotate(9deg); } 48% { transform: rotate(-4deg); } 60% { transform: rotate(2deg); } }
@keyframes ai-pop { 0% { transform: scale(.3); opacity: .2; } 28% { transform: scale(1.15); opacity: 1; } 42%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ai-eq { 0%, 62%, 100% { transform: scaleY(1); } 14% { transform: scaleY(.35); } 28% { transform: scaleY(1.25); } 44% { transform: scaleY(.6); } }
@keyframes ai-slide { 0%, 100% { transform: translateX(0); } 40%, 60% { transform: translateX(5px); } }
@keyframes ai-lift { 0%, 70%, 100% { transform: translateY(0); } 18%, 42% { transform: translateY(-4px); } 56% { transform: translateY(.6px); } }
@keyframes ai-blink { 0%, 34%, 100% { transform: scaleY(1); } 17% { transform: scaleY(.1); } }
@keyframes ai-shake { 0%, 56%, 100% { transform: rotate(0); } 8% { transform: rotate(-14deg); } 16% { transform: rotate(12deg); } 24% { transform: rotate(-10deg); } 32% { transform: rotate(8deg); } 40% { transform: rotate(-4deg); } 48% { transform: rotate(2deg); } }
@keyframes ai-wave { 0%, 60%, 100% { opacity: 1; } 18% { opacity: .1; } 40% { opacity: 1; } }
@keyframes ai-nudge { 0%, 40%, 100% { transform: translateX(0); } 10% { transform: translateX(-1.5px); } 20% { transform: translateX(1.5px); } 30% { transform: translateX(-1px); } }
@keyframes ai-toggle { 0%, 12% { transform: translateX(0); } 42%, 100% { transform: translateX(12px); } }

/* ---------- Feature Board: every feature is a Pad (mirrors the app's Reactions board) ---------- */
.hf-board { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-24); align-items: start; font-family: var(--font-sans); }
.hf-bpads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.hf-bpad {
  --pad: var(--pad-orange);
  position: relative; overflow: hidden; cursor: pointer; text-align: left; appearance: none;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-12);
  min-height: 136px; padding: var(--space-16); margin: 0;
  border: 0; border-bottom: 5px solid color-mix(in srgb, var(--pad) 70%, #000000);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pad) 84%, #ffffff) 0%, var(--pad) 100%);
  color: var(--on-pad); font: inherit;
  box-shadow: var(--shadow-card);
  transition: transform .14s ease, border-bottom-width .14s ease, box-shadow .2s ease;
}
.hf-bpad:hover { transform: translateY(-2px); }
.hf-bpad:active, .hf-bpad.is-active { transform: translateY(3px); border-bottom-width: 2px; }
.hf-bpad.is-active { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px color-mix(in srgb, var(--pad) 70%, #000000); }
.hf-bpad:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.hf-bpad::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--on-pad); opacity: .12; pointer-events: none; }
.hf-bpad.is-firing::before { animation: hf-bpad-fill 1.6s linear forwards; }
@keyframes hf-bpad-fill { from { width: 0; } to { width: 100%; } }
.hf-bpad .hf-ai { --ai-size: 38px; position: relative; }
.hf-bpad-label { position: relative; font-size: 19px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.hf-bpad-key {
  position: absolute; top: var(--space-12); right: var(--space-12);
  min-width: 22px; padding: 3px 6px; border-radius: var(--radius-button); text-align: center;
  font: 600 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; background: color-mix(in srgb, var(--on-pad) 12%, transparent);
}
.hf-board-panel {
  background: var(--canvas); border-radius: var(--radius-card); padding: var(--space-24);
  display: grid; gap: var(--space-16); align-content: start;
}
.hf-callstrip {
  display: flex; align-items: center; gap: var(--space-10); padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--app-ground); color: var(--app-ink); font-size: 13px; font-weight: 600; line-height: 1.2;
}
.hf-callstrip .hf-call-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--app-ready); flex: none; }
.hf-callstrip time { margin-left: auto; color: var(--app-ink-dim); font-variant-numeric: tabular-nums; }
.hf-callstrip .hf-live i { animation-play-state: paused; }
.hf-callstrip.is-sounding .hf-live i { animation-play-state: running; }
.hf-lane-title { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hf-lane { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); min-height: 124px; align-content: start; }
.hf-chip {
  --pad: var(--pad-orange);
  display: flex; align-items: center; gap: var(--space-10); padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-tutorial); background: var(--surface); font-size: 15px; line-height: 1.3; color: var(--ink);
}
.hf-chip .hf-chip-swatch { width: 14px; height: 14px; border-radius: var(--radius-icon); background: var(--pad); flex: none; }
.hf-chip b { font-weight: 600; }
.hf-chip .hf-chip-meta { margin-left: auto; font-size: 13px; color: var(--muted); }
.hf-chip.is-new { animation: hf-chip-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.hf-chip:nth-child(3) { opacity: .6; }
@keyframes hf-chip-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
.hf-detail { display: grid; gap: var(--space-12); }
.hf-detail[hidden] { display: none; }
.hf-detail.is-new { animation: hf-detail-in .45s ease both; }
@keyframes hf-detail-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hf-detail-head { display: flex; align-items: center; gap: var(--space-12); }
.hf-detail-head .hf-ai { --ai-size: 30px; color: var(--accent); }
.hf-detail h3 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.hf-detail p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.hf-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.hf-facts li { display: flex; gap: var(--space-10); align-items: center; font-size: 15px; line-height: 1.4; color: var(--ink); }
.hf-facts .hf-ai { --ai-size: 20px; color: var(--accent); }
@media (max-width: 900px) { .hf-board { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .hf-bpads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-bpads .hf-bpad:last-child { grid-column: span 2; }
  .hf-bpad { min-height: 112px; }
  .hf-bpad-key { display: none; }
}

/* ---------- Signal flow: your voice and a Pad go down the call to their phone ---------- */
.hf-flow { display: grid; grid-template-columns: minmax(0, 250px) minmax(120px, 1fr) minmax(0, 250px); align-items: center; gap: var(--space-16); font-family: var(--font-sans); }
.hf-flow-node { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-24); display: grid; gap: var(--space-12); }
.hf-flow-node h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.hf-flow-node .hf-flow-sub { margin: -8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hf-flow-row { display: flex; align-items: center; gap: var(--space-10); font-size: 15px; color: var(--ink-2); }
.hf-flow-row .hf-ai { --ai-size: 24px; color: var(--ink); }
.hf-flow-voice { display: inline-flex; gap: 3px; align-items: center; height: 18px; margin-left: auto; }
.hf-flow-voice i { width: 3px; height: 40%; border-radius: 2px; background: var(--fog); animation: hf-voice 1.1s ease-in-out infinite alternate; }
.hf-flow-voice i:nth-child(2) { animation-delay: -.3s; } .hf-flow-voice i:nth-child(3) { animation-delay: -.6s; }
.hf-flow-voice i:nth-child(4) { animation-delay: -.15s; } .hf-flow-voice i:nth-child(5) { animation-delay: -.45s; }
@keyframes hf-voice { from { height: 25%; } to { height: 95%; } }
.hf-flow-pad {
  display: inline-flex; align-items: center; gap: var(--space-8); align-self: start; justify-self: start;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-tutorial);
  background: var(--pad-orange); color: var(--on-pad); font-weight: 700; font-size: 15px;
  border-bottom: 4px solid color-mix(in srgb, var(--pad-orange) 70%, #000000);
  animation: hf-flow-press 4.8s ease infinite;
}
.hf-flow-track { position: relative; height: 64px; container-type: inline-size; }
.hf-flow-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--hairline); border-radius: 2px; }
.hf-flow-label { position: absolute; left: 0; right: 0; top: -6px; text-align: center; font-size: 13px; line-height: 1.2; color: var(--muted); }
.hf-flow-dot { position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: var(--radius-pill); background: var(--ink-2); animation: hf-flow-dot 2.4s linear infinite; }
.hf-flow-dot:nth-of-type(2) { animation-delay: -.6s; } .hf-flow-dot:nth-of-type(3) { animation-delay: -1.2s; } .hf-flow-dot:nth-of-type(4) { animation-delay: -1.8s; }
.hf-flow-packet {
  position: absolute; left: 0; top: 50%; margin-top: -15px; height: 30px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border-radius: var(--radius-pill); background: var(--live); color: var(--on-live); font-size: 13px; font-weight: 700;
  transform: translateX(calc(50cqw - 50%)); animation: hf-flow-packet 4.8s ease-in-out infinite;
}
.hf-flow-hears {
  display: inline-flex; align-items: center; gap: var(--space-8); align-self: start; justify-self: start;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-tutorial); background: var(--canvas);
  font-size: 15px; color: var(--ink); animation: hf-flow-hears 4.8s ease infinite;
}
.hf-flow-hears::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--live); }
.hf-flow-them .hf-ai .ai-wave { animation: hf-flow-waves 4.8s ease infinite; }
@keyframes hf-flow-press { 0%, 8%, 24%, 100% { transform: none; border-bottom-width: 4px; } 12% { transform: translateY(3px); border-bottom-width: 1px; } }
@keyframes hf-flow-packet {
  0%, 13% { opacity: 0; transform: translateX(0); } 17% { opacity: 1; transform: translateX(0); }
  55% { opacity: 1; transform: translateX(calc(100cqw - 100%)); } 60%, 100% { opacity: 0; transform: translateX(calc(100cqw - 100%)); }
}
@keyframes hf-flow-dot { 0% { transform: translateX(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(calc(100cqw - 100%)); opacity: 0; } }
@keyframes hf-flow-hears { 0%, 57% { opacity: 0; transform: translateY(6px) scale(.96); } 63%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes hf-flow-waves { 0%, 57%, 100% { opacity: .25; } 63% { opacity: 1; } 70% { opacity: .25; } 77% { opacity: 1; } 86% { opacity: .25; } }
@media (max-width: 760px) {
  .hf-flow { grid-template-columns: 1fr; }
  .hf-flow-track { height: 132px; width: 100%; container-type: size; }
  .hf-flow-track::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin: 0 0 0 -1px; }
  .hf-flow-label { top: 50%; left: 50%; right: auto; margin: -8px 0 0 18px; text-align: left; }
  .hf-flow-dot, .hf-flow-packet { left: 50%; top: 0; }
  .hf-flow-dot { margin: 0 0 0 -3px; animation-name: hf-flow-dot-y; }
  .hf-flow-packet { margin: 0; translate: -50% 0; transform: translateY(calc(50cqh - 50%)); animation-name: hf-flow-packet-y; }
}
@keyframes hf-flow-packet-y {
  0%, 13% { opacity: 0; transform: translateY(0); } 17% { opacity: 1; transform: translateY(0); }
  55% { opacity: 1; transform: translateY(calc(100cqh - 100%)); } 60%, 100% { opacity: 0; transform: translateY(calc(100cqh - 100%)); }
}
@keyframes hf-flow-dot-y { 0% { transform: translateY(0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateY(calc(100cqh - 100%)); opacity: 0; } }

/* ---------- Chat vs call: reactions people already send, and the call that had none ---------- */
.hf-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); font-family: var(--font-sans); }
.hf-why-card { border-radius: var(--radius-card); padding: var(--space-24); display: grid; gap: var(--space-12); align-content: start; min-height: 380px; position: relative; overflow: hidden; }
.hf-why-card h3 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; }
.hf-chat { background: var(--canvas); color: var(--ink); }
.hf-chat h3 { color: var(--muted); }
.hf-bubble { position: relative; max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.35; justify-self: start; }
.hf-bubble.them { background: var(--surface); color: var(--ink); border-bottom-left-radius: 6px; }
.hf-bubble.me { justify-self: end; background: var(--ink); color: var(--canvas); border-bottom-right-radius: 6px; }
.hf-bubble small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.hf-tapbacks { position: absolute; top: -14px; right: -12px; display: flex; gap: 4px; }
.hf-tapbacks span { width: 30px; height: 30px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-float); font-size: 15px; }
.hf-gif { position: relative; width: 200px; height: 112px; border-radius: 16px; overflow: hidden; background: var(--app-ground); justify-self: start; }
.hf-gif b { position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 700; color: var(--app-ink); background: var(--app-panel); padding: 2px 6px; border-radius: var(--radius-icon); }
.hf-gif i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: hf-confetti 1.8s linear infinite; }
.hf-gif i:nth-child(1) { left: 10%; background: var(--pad-orange); animation-delay: -.2s; } .hf-gif i:nth-child(2) { left: 26%; background: var(--pad-ochre); animation-delay: -1.1s; }
.hf-gif i:nth-child(3) { left: 42%; background: var(--pad-teal); animation-delay: -.6s; } .hf-gif i:nth-child(4) { left: 58%; background: var(--pad-rose); animation-delay: -1.5s; }
.hf-gif i:nth-child(5) { left: 74%; background: var(--pad-blue); animation-delay: -.9s; } .hf-gif i:nth-child(6) { left: 88%; background: var(--pad-olive); animation-delay: -.35s; }
@keyframes hf-confetti { from { transform: translateY(0) rotate(0); } to { transform: translateY(140px) rotate(320deg); } }
.hf-callcard { background: var(--app-ground); color: var(--app-ink); }
.hf-callcard h3 { color: var(--app-ink-dim); }
.hf-call-who { display: flex; align-items: center; gap: var(--space-12); }
.hf-call-who .hf-avatar { width: 48px; height: 48px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--pad-blue); color: #ffffff; font-weight: 700; font-size: 20px; }
.hf-call-who b { display: block; font-size: 20px; line-height: 1.2; }
.hf-call-who span { font-size: 13px; color: var(--app-ink-dim); }
.hf-call-said { margin: 0; font-size: 17px; line-height: 1.4; color: var(--app-ink); }
.hf-call-voice { display: flex; align-items: center; gap: 4px; height: 44px; }
.hf-call-voice i { flex: 1; max-width: 6px; height: 30%; border-radius: 3px; background: var(--app-ink-dim); animation: hf-voice 1s ease-in-out infinite alternate; }
.hf-call-voice i:nth-child(3n) { animation-delay: -.35s; } .hf-call-voice i:nth-child(3n+1) { animation-delay: -.7s; } .hf-call-voice i:nth-child(4n) { animation-duration: .8s; }
.hf-call-status { position: relative; min-height: 44px; font-size: 15px; line-height: 1.4; }
.hf-call-status span { position: absolute; inset: 0 auto auto 0; display: inline-flex; align-items: center; gap: var(--space-8); }
.hf-call-status .is-before { color: var(--app-ink-dim); opacity: 0; }
.hf-call-status .is-after { opacity: 1; }
.hf-call-status .is-after::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--live); }
.hf-call-pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: auto; }
.hf-call-pads span {
  position: relative; padding: var(--space-12) var(--space-10); border-radius: var(--radius-tutorial);
  font-size: 13px; font-weight: 700; color: var(--on-pad); text-align: center; line-height: 1.2;
  background: var(--pad); border-bottom: 4px solid color-mix(in srgb, var(--pad) 70%, #000000);
}
.hf-call-pads span.is-fired::after { content: ""; position: absolute; inset: -4px; border-radius: 16px; border: 3px solid var(--live); opacity: 0; }
/* The 7s story: chat fills with reactions; the call sits silent until a Pad fires. */
.hf-why .w-b1 { animation: w-b1 7s ease infinite; } .hf-why .w-tap span { animation: w-tap 7s ease infinite; }
.hf-why .w-tap span:nth-child(2) { animation-delay: .15s; } .hf-why .w-tap span:nth-child(3) { animation-delay: .3s; }
.hf-why .w-gif { animation: w-gif 7s ease infinite; } .hf-why .w-b3 { animation: w-b3 7s ease infinite; }
.hf-why .is-before { animation: w-before 7s ease infinite; } .hf-why .is-after { animation: w-after 7s ease infinite; }
.hf-why .is-fired { animation: w-press 7s ease infinite; } .hf-why .is-fired::after { animation: w-ring 7s ease-out infinite; }
@keyframes w-b1 { 0%, 3% { opacity: 0; transform: translateY(8px); } 8%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes w-tap { 0%, 12% { opacity: 0; transform: scale(.3); } 16% { opacity: 1; transform: scale(1.15); } 19%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes w-gif { 0%, 24% { opacity: 0; transform: translateY(8px); } 29%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes w-b3 { 0%, 34% { opacity: 0; transform: translateY(8px); } 39%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes w-before { 0%, 46% { opacity: 1; } 50%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes w-after { 0%, 50% { opacity: 0; transform: translateY(6px); } 55%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes w-press { 0%, 48%, 56%, 100% { transform: none; border-bottom-width: 4px; } 51% { transform: translateY(3px); border-bottom-width: 1px; } }
@keyframes w-ring { 0%, 50% { opacity: 0; transform: scale(.9); } 53% { opacity: 1; } 72%, 100% { opacity: 0; transform: scale(1.35); } }
@media (max-width: 760px) { .hf-why { grid-template-columns: 1fr; } .hf-why-card { min-height: 0; } }

/* Scenes wait off screen: [data-inview] elements get .in-view from script */
.js [data-inview]:not(.in-view) *, .js [data-inview]:not(.in-view)::before, .js [data-inview]:not(.in-view)::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hf-ai svg *, .hf-bpad, .hf-bpad::before, .hf-chip, .hf-detail,
  .hf-flow *, .hf-why *, .hf-why *::after { animation: none !important; transition: none !important; }
  .hf-flow-packet { opacity: 1; }
  .hf-call-status .is-before { opacity: 0; } .hf-call-status .is-after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-live i, .hf-tap, .hf-step.is-active .hf-bar { animation: none; }
  .hf-live i { height: 60%; }
  .hf-step.is-active .hf-bar { width: 100%; }
  .hf-tap { opacity: 1; }
}