/* Dedicated product demonstrations: readable evidence, real listening, chosen audiences. */
.fx-page {
  --fx-radius: 14px;
}
.fx-hero {
  padding-top: clamp(72px, 10vw, 144px);
  padding-bottom: 64px;
}
.fx-hero h1 {
  max-width: 1080px;
  font-size: clamp(2.6rem, 6.4vw, 6.25rem);
  line-height: 1.06;
  letter-spacing: -0.055em;
  margin: 24px 0 40px;
}
.fx-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.fx-hero-bottom > p {
  max-width: 670px;
  font-size: clamp(1.1rem, 1.65vw, 1.35rem);
  margin: 0;
}
.fx-hero-actions {
  display: grid;
  gap: 16px;
  flex-shrink: 0;
}
.fx-experience {
  padding-top: 0;
}
.fx-demo {
  border-top: 1px solid var(--line);
  padding-top: 48px;
}
.fx-demo-heading {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 40px;
}
.fx-demo h2,
.fx-depth h2,
.fx-closing h2 {
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 16px 0 0;
}
.fx-demo-heading > p {
  max-width: 42ch;
  margin: 0;
  font-size: var(--text-body);
}
.fx-caption {
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  font-weight: 650;
  color: var(--muted);
}
.fx-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: color-mix(in oklch, var(--line), var(--paper) 45%);
  border-radius: 10px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 24px;
}
.fx-selector button {
  background: none;
  color: var(--muted);
  border: 0;
  border-radius: 6px;
  padding: 12px 18px;
  min-height: 48px;
  font: inherit;
  font-size: var(--text-support);
  font-weight: 600;
  cursor: pointer;
}
.fx-selector button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.fx-selector button:hover:not([aria-pressed="true"]) {
  background: var(--surface);
  color: var(--ink);
}
.fx-page button:focus-visible,
.fx-page summary:focus-visible,
.fx-page audio:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.fx-panel[data-fx-panel] {
  min-width: 0;
}
.fx-panel.fx-enter {
  animation: fx-enter 0.48s var(--ease) both;
}
@keyframes fx-enter {
  from {
    opacity: 0.25;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fx-window-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--text-caption);
  color: var(--muted);
}
.fx-window-dots {
  display: flex;
  gap: 6px;
}
.fx-window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: oklch(70% 0.09 40);
}
.fx-window-dots i:nth-child(2) {
  background: oklch(80% 0.08 85);
}
.fx-window-dots i:nth-child(3) {
  background: oklch(73% 0.065 145);
}
.fx-window-bar > span:last-child {
  font-size: var(--text-caption);
}
.fx-recording-layout,
.fx-evidence-layout,
.fx-sharing-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  align-items: stretch;
}
.fx-desktop,
.fx-evidence-screen,
.fx-share-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--fx-radius);
  overflow: hidden;
  align-self: center;
}
.fx-app-screen {
  display: grid;
  grid-template-columns: 126px 1fr;
  min-height: 330px;
}
.fx-app-sidebar {
  background: color-mix(in oklch, var(--paper), var(--sage) 12%);
  padding: 28px 20px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  font-size: var(--text-caption);
}
.fx-app-sidebar b {
  font-size: var(--text-support);
  margin-bottom: 16px;
}
.fx-app-sidebar strong {
  color: var(--accent);
}
.fx-app-content {
  padding: 32px;
  min-width: 0;
}
.fx-app-content h3 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 16px 0 24px;
  letter-spacing: -0.04em;
}
.fx-invite {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  font-size: var(--text-support);
}
.fx-invite b {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  overflow-wrap: anywhere;
  font-weight: 450;
}
.fx-fake-button {
  background: var(--ink);
  color: var(--surface);
  padding: 10px 12px;
  text-align: center;
  font-size: var(--text-caption);
  border-radius: 5px;
  margin-top: 4px;
}
.fx-screen-note {
  font-size: var(--text-caption);
  margin-bottom: 0;
}
.fx-error {
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  font-size: var(--text-support);
  line-height: 1.4;
}
.fx-error > span {
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.fx-recording-strip {
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: var(--text-caption);
  flex-wrap: wrap;
}
.fx-recording-strip > span:last-child {
  margin-left: auto;
}
.fx-record-dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: oklch(75% 0.13 42);
}
.fx-mode-control {
  padding: 20px 0 20px 48px;
}
.fx-mode-control > .fx-caption {
  display: block;
  margin-bottom: 16px;
}
.fx-large-index {
  display: block;
  color: var(--accent);
  font-size: var(--text-body);
  margin-bottom: 16px;
}
.fx-mode-control h3,
.fx-event-readout h3,
.fx-share-explanation h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}
.fx-mode-control p,
.fx-event-readout p,
.fx-share-explanation p {
  max-width: 45ch;
}
.fx-checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.fx-checklist li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-support);
}
.fx-checklist li::before {
  content: "✓";
  color: var(--accent);
  margin-right: 12px;
}
.fx-disclosure {
  color: var(--muted);
  font-size: var(--text-caption);
  max-width: 90ch;
  margin: 24px 0 0;
  line-height: 1.6;
}
.fx-event-readout {
  padding: 40px 0 32px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fx-event-readout > .fx-caption {
  margin-bottom: 20px;
}
.fx-timeline {
  display: flex;
  gap: 20px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 20px;
  background: var(--paper);
  font-size: var(--text-support);
  line-height: 1.5;
}
.fx-timeline strong {
  color: var(--accent);
}
.fx-source-receipt {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
}
.fx-source-receipt b {
  font-size: var(--text-body);
}
.fx-event-readout .text-link {
  margin-top: 24px;
}
.fx-agent-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  border-radius: var(--fx-radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.fx-agent-request {
  padding: clamp(28px, 4vw, 56px);
  background: var(--ink);
  color: var(--paper);
}
.fx-agent-request .fx-caption {
  color: var(--sage);
}
.fx-agent-request blockquote {
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  line-height: 1.5;
  letter-spacing: -0.025em;
  margin: 24px 0 40px;
}
.fx-agent-request .text-link {
  color: var(--paper);
  margin-top: 32px;
}
.fx-tool-path {
  display: grid;
  gap: 16px;
}
.fx-tool-path > span {
  color: var(--sage);
  font-size: var(--text-caption);
}
.fx-tool-path b {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid color-mix(in oklch, var(--ink), var(--sage) 30%);
  padding-bottom: 14px;
  font-size: var(--text-support);
  font-weight: 500;
  gap: 16px;
}
.fx-agent-answer {
  padding: clamp(28px, 4vw, 56px);
  background: var(--surface);
}
.fx-agent-answer h3 {
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
  line-height: 1.25;
  letter-spacing: -0.035em;
  margin: 20px 0 24px;
}
.fx-agent-answer > p {
  font-size: var(--text-body);
}
.fx-proof {
  margin: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fx-proof summary,
.fx-sample-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  padding: 20px 0;
  min-height: 48px;
  font-size: var(--text-support);
  font-weight: 600;
  list-style: none;
}
.fx-proof summary::-webkit-details-marker,
.fx-sample-details summary::-webkit-details-marker {
  display: none;
}
.fx-proof[open] summary > span,
.fx-sample-details[open] summary > span {
  transform: rotate(45deg);
}
.fx-proof dl {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
}
.fx-proof dt {
  font-size: var(--text-caption);
  color: var(--muted);
  margin-bottom: 4px;
}
.fx-proof dd {
  margin: 0;
  font-size: var(--text-support);
  overflow-wrap: anywhere;
}
.fx-next-check .fx-caption {
  color: var(--accent);
}
.fx-next-check p {
  font-size: var(--text-support);
}
.fx-answer-boundary {
  display: block;
  margin-top: 24px;
  font-size: var(--text-caption);
  color: var(--muted);
}
.fx-listening-room {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(28px, 5vw, 64px);
  gap: 64px;
  border-radius: var(--fx-radius);
}
.fx-audio-intro .fx-caption {
  color: var(--sage);
}
.fx-audio-intro blockquote {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.5;
  letter-spacing: -0.025em;
  margin: 24px 0;
}
.fx-audio-intro > p {
  color: color-mix(in oklch, var(--sage), var(--paper) 60%);
  font-size: var(--text-support);
}
.fx-audio-settings {
  display: block;
  color: var(--sage);
  font-size: var(--text-caption);
  margin-top: 32px;
}
.fx-audio-tracks {
  display: grid;
  gap: 24px;
  align-content: center;
  min-width: 0;
}
.fx-audio-track {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  border-top: 1px solid color-mix(in oklch, var(--ink), var(--sage) 35%);
  padding-top: 24px;
  min-width: 0;
}
.fx-audio-track > div {
  min-width: 0;
}
.fx-track-index {
  font-size: var(--text-caption);
  color: var(--sage);
  padding-top: 6px;
}
.fx-audio-track h3 {
  font-size: 1.3rem;
  color: var(--paper);
  margin: 0;
  letter-spacing: -0.025em;
}
.fx-audio-track p {
  font-size: var(--text-caption);
  color: var(--sage);
  margin: 6px 0 16px;
}
.fx-audio-track audio {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  border-radius: 24px;
}
.fx-audio-status {
  color: var(--sage);
  font-size: var(--text-caption);
  margin: 0 0 0 48px;
  min-height: 1.65em;
}
.fx-sample-details {
  border-bottom: 1px solid var(--line);
}
.fx-sample-details > div {
  max-width: 80ch;
  padding-bottom: 20px;
  font-size: var(--text-support);
}
.fx-share-document {
  padding: 40px;
}
.fx-share-document h3 {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.035em;
  margin: 16px 0 32px;
}
.fx-share-moment {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fx-share-moment b {
  color: var(--accent);
  font-size: var(--text-support);
}
.fx-share-moment p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}
.fx-access {
  display: grid;
  gap: 20px;
  margin: 24px 0 0;
}
.fx-access dt {
  color: var(--muted);
  font-size: var(--text-caption);
  margin-bottom: 4px;
}
.fx-access dd {
  margin: 0;
  font-size: var(--text-support);
}
.fx-share-explanation {
  align-self: center;
  padding: 40px 0 40px 56px;
}
.fx-sharing-note {
  font-size: var(--text-support);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 28px;
  color: var(--muted);
}
.fx-depth {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 96px;
  border-top: 1px solid var(--line);
}
.fx-depth-intro {
  align-self: start;
  position: sticky;
  top: 120px;
}
.fx-depth-intro > p {
  max-width: 32ch;
  margin: 24px 0;
}
.fx-depth-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.fx-depth-row:first-child {
  padding-top: 0;
}
.fx-depth-row > span {
  color: var(--accent);
  font-size: var(--text-caption);
  padding-top: 5px;
}
.fx-depth-row h3 {
  font-size: 1.35rem;
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.fx-depth-row p {
  margin: 0;
}
.fx-depth-row ul {
  padding-left: 20px;
  margin: 24px 0 0;
}
.fx-depth-row li {
  margin-top: 12px;
}
.fx-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background: color-mix(in oklch, var(--paper), var(--sage) 20%);
}
.fx-closing h2 {
  max-width: 800px;
}
.fx-closing > div:last-child {
  flex-shrink: 0;
}
.fx-closing p {
  font-size: var(--text-support);
  margin-top: 20px;
}
@media (max-width: 900px) {
  .fx-hero-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
  }
  .fx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
  }
  .fx-demo-heading {
    gap: 32px;
  }
  .fx-recording-layout,
  .fx-evidence-layout,
  .fx-sharing-layout {
    grid-template-columns: 1.15fr 1fr;
  }
  .fx-mode-control,
  .fx-event-readout,
  .fx-share-explanation {
    padding-left: 28px;
  }
  .fx-app-sidebar {
    display: none;
  }
  .fx-app-screen {
    grid-template-columns: 1fr;
  }
  .fx-agent-layout {
    grid-template-columns: 1fr 1.2fr;
  }
  .fx-listening-room {
    gap: 32px;
    grid-template-columns: 1fr 1.1fr;
  }
  .fx-depth {
    gap: 48px;
  }
}
@media (max-width: 680px) {
  .fx-hero {
    padding-top: 64px;
    padding-bottom: 48px;
  }
  .fx-hero h1 {
    margin: 20px 0 28px;
  }
  .fx-demo-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fx-demo-heading > p {
    max-width: none;
  }
  .fx-recording-layout,
  .fx-evidence-layout,
  .fx-sharing-layout,
  .fx-agent-layout,
  .fx-listening-room,
  .fx-depth {
    grid-template-columns: 1fr;
  }
  .fx-mode-control,
  .fx-event-readout,
  .fx-share-explanation {
    padding: 32px 0 0;
  }
  .fx-mode-control {
    min-height: 350px;
  }
  .fx-event-readout {
    min-height: 360px;
  }
  .fx-selector {
    width: 100%;
  }
  .fx-selector button {
    flex: 1;
    padding: 10px 12px;
    font-size: var(--text-caption);
  }
  .fx-investigation > .fx-selector {
    flex-direction: column;
  }
  .fx-investigation > .fx-selector button {
    text-align: left;
  }
  .fx-app-content {
    padding: 28px;
  }
  .fx-window-bar {
    padding: 14px;
    gap: 8px;
  }
  .fx-window-bar > span:last-child {
    display: none;
  }
  .fx-recording-strip > span:last-child {
    margin-left: 22px;
  }
  .fx-agent-request,
  .fx-agent-answer,
  .fx-listening-room {
    padding: 28px;
  }
  .fx-agent-request blockquote {
    margin-bottom: 28px;
  }
  .fx-listening-room {
    gap: 32px;
  }
  .fx-audio-track {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fx-track-index {
    display: none;
  }
  .fx-audio-status {
    margin-left: 0;
  }
  .fx-share-document {
    padding: 28px;
  }
  .fx-share-explanation {
    min-height: 360px;
  }
  .fx-depth {
    gap: 40px;
  }
  .fx-depth-intro {
    position: static;
  }
  .fx-depth-intro > p {
    max-width: none;
  }
  .fx-depth-row {
    gap: 12px;
    grid-template-columns: 24px 1fr;
  }
  .fx-closing {
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-panel.fx-enter {
    animation: none;
  }
}
html[data-motion="reduced"] .fx-panel.fx-enter,
html.reduce-motion .fx-panel.fx-enter {
  animation: none;
}

.fx-page p, .fx-depth-list ul { font-size: var(--text-body); line-height: 1.65; }
.fx-page .fx-disclosure, .fx-page .fx-audio-status, .fx-page .fx-screen-note, .fx-page .fx-error { font-size: var(--text-support); }
.fx-selector button { font-size: var(--text-support); }

/* Each feature becomes a three-chapter, scroll-directed product demonstration. */
.fx-hero { padding-top: clamp(48px, 6vw, 80px); padding-bottom: 48px; }
.fx-hero h1 { font-size: clamp(2.6rem, 5.5vw, 5.6rem); margin: 20px 0 28px; }
.fx-hero-bottom > p { max-width: 56ch; }
.fx-scroll-experience { padding-top: 0; padding-bottom: 0; }
.fs-story { --story-progress: 1; --fs-stage-height: 510px; position: relative; border-top: 1px solid var(--line); }
.fs-sticky { padding-top: 24px; padding-bottom: 24px; }
.fs-story.story-ready { height: 270vh; }
.fs-story.story-ready .fs-sticky { position: sticky; top: 88px; }
.fs-story-top, .fs-story-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fs-story-top { margin-bottom: 24px; }
.fs-chapters { display: flex; gap: 8px; }
.fs-chapters button { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: 1rem; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.fs-chapters button > span { font-size: .875rem; color: var(--accent); }
.fs-chapters button:hover { background: var(--surface); color: var(--ink); }
.fs-chapters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fs-story.story-ready[data-story-step="0"] [data-story-jump="0"], .fs-story.story-ready[data-story-step="1"] [data-story-jump="1"], .fs-story.story-ready[data-story-step="2"] [data-story-jump="2"] { color: var(--ink); background: var(--surface); }
.fs-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.35fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.fs-narrative { display: grid; gap: 40px; min-width: 0; }
.fs-chapter-index { display: block; color: var(--accent); font-size: .875rem; font-weight: 650; letter-spacing: .1em; margin-bottom: 20px; }
.fs-chapter h2 { font-size: clamp(1.8rem, 2.8vw, 2.9rem); line-height: 1.12; letter-spacing: -.045em; margin: 0 0 22px; }
.fs-chapter p { font-size: 1.125rem; line-height: 1.65; margin: 0; max-width: 38ch; }
.fs-result { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 600; color: var(--accent); }
.fs-story.story-ready .fs-narrative { gap: 0; }
.fs-story.story-ready .fs-chapter { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 280ms ease-out, transform 380ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.fs-story.story-ready[data-story-step="0"] [data-fs-chapter="0"], .fs-story.story-ready[data-story-step="1"] [data-fs-chapter="1"], .fs-story.story-ready[data-story-step="2"] [data-fs-chapter="2"] { opacity: 1; visibility: visible; transform: translateY(0); }
.fs-stage { min-width: 0; min-height: var(--fs-stage-height); position: relative; }
.fs-stage > div { min-height: var(--fs-stage-height); }
.fs-stage p { font-size: 1rem; line-height: 1.55; }
.fs-stage h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.15; letter-spacing: -.035em; margin: 14px 0 18px; }
.fs-kicker { display: block; font-size: .875rem; font-weight: 650; letter-spacing: .06em; color: var(--muted); }
.fs-layer { --layer-progress: 1; }
.fs-story.story-ready .fs-layer { opacity: clamp(0, calc(var(--layer-progress) * 2), 1); transform: translateY(calc((1 - var(--layer-progress)) * 70px)); }
.fs-progress-track { height: 2px; background: var(--line); margin-top: 24px; }
.fs-progress-track > span { display: block; width: 100%; height: 100%; transform-origin: left center; background: var(--accent); }
.fs-story-bottom { margin-top: 12px; font-size: .875rem; color: var(--muted); }
.fs-window-bar { min-height: 46px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .875rem; }
.fs-dots { display: flex; gap: 5px; }
.fs-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: oklch(70% .09 40); }
.fs-dots i:nth-child(2) { background: oklch(80% .08 85); }
.fs-dots i:nth-child(3) { background: oklch(73% .065 145); }
.fs-sample-screen { background: var(--surface); display: grid; grid-template-columns: 110px 1fr; }
.fs-sample-nav { background: color-mix(in oklch, var(--sage), var(--paper) 72%); padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; font-size: .875rem; }
.fs-sample-nav span { color: var(--accent); }
.fs-sample-content { padding: 28px; }
.fs-sample-content h3 { margin-top: 14px; }
.fs-input { border-bottom: 1px solid var(--line); padding-bottom: 12px; font-size: 1rem; }
.fs-send { background: var(--ink); color: var(--paper); padding: 10px 16px; margin-top: 14px; font-size: .875rem; text-align: center; border-radius: 4px; }
.fs-record-scene { position: relative; padding: 12px 24px 0 0; }
.fs-record-window { width: 92%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transform-origin: 0 0; }
.fs-story.story-ready .fs-record-window { transform: translateY(calc(var(--story-progress) * -3px)) scale(calc(1 - var(--story-progress) * .07)); }
.fs-capture { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px; background: var(--ink); color: var(--paper); font-size: .875rem; }
.fs-rec-dot { height: 8px; width: 8px; border-radius: 50%; background: oklch(74% .15 40); }
.fs-record-time { margin-left: auto; font-variant-numeric: tabular-nums; }
.fs-record-evidence { position: absolute; right: 0; top: 218px; width: 83%; background: var(--ink); color: var(--paper); border: 1px solid color-mix(in oklch, var(--ink), var(--paper) 20%); padding: 24px; box-shadow: 0 18px 36px color-mix(in oklch, var(--ink), transparent 88%); }
.fs-record-evidence .fs-kicker { color: var(--sage); }
.fs-evidence-line { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 1rem; }
.fs-evidence-line b { color: var(--sage); }
.fs-evidence-line strong { margin-left: auto; color: oklch(82% .12 45); }
.fs-record-evidence p { margin: 12px 0 0; color: var(--sage); }
.fs-record-handoff { position: absolute; width: 83%; right: 0; top: 270px; padding: 26px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 36px color-mix(in oklch, var(--ink), transparent 92%); }
.fs-record-handoff h3 { font-size: 1.65rem; }
.fs-record-handoff p { margin: 16px 0 0; }
.fs-pills { display: flex; gap: 16px; flex-wrap: wrap; font-size: .875rem; }
.fs-pills span { display: flex; align-items: center; gap: 6px; }
.fs-pills svg { color: var(--accent); }
.fs-debug-scene { border: 1px solid var(--line); background: var(--surface); overflow: hidden; border-radius: 12px; }
.fs-debug-video { position: relative; }
.fs-debug-video .fs-sample-screen { grid-template-columns: 110px 1fr; }
.fs-debug-video .fs-sample-content { padding: 20px 28px; }
.fs-debug-video .fs-sample-content h3 { font-size: 1.5rem; margin: 10px 0 14px; }
.fs-debug-video .fs-send { max-width: 260px; }
.fs-debug-error { background: var(--paper); border: 1px solid var(--accent); color: var(--accent); position: absolute; right: 18px; bottom: 16px; padding: 12px 18px; font-size: 1rem; --layer-progress: 1; }
.fs-story.story-ready .fs-debug-error { opacity: var(--layer-progress); transform: translateY(calc((1 - var(--layer-progress)) * 20px)); }
.fs-debug-track { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px; font-size: .875rem; }
.fs-debug-track > span:nth-child(2) { text-align: center; }
.fs-debug-track > span:nth-child(3) { text-align: right; }
.fs-time-rail { grid-column: 1 / -1; height: 3px; background: color-mix(in oklch, var(--ink), var(--paper) 28%); position: relative; }
.fs-time-rail i { display: block; height: 100%; width: 100%; background: var(--sage); transform: scaleX(var(--story-progress)); transform-origin: left center; }
.fs-time-rail b { width: 10px; height: 10px; border: 2px solid var(--paper); background: var(--accent); border-radius: 50%; position: absolute; top: -4px; left: 0; transform: translateX(calc(var(--story-progress) * (min(45vw, 604px) - 82px))); }
.fs-debug-evidence { padding: 20px; display: grid; gap: 16px; }
.fs-debug-evidence p { margin: 4px 0 0; }
.fs-debug-request, .fs-debug-note { border-top: 1px solid var(--line); padding-top: 12px; }
.fs-mcp-scene { position: relative; padding: 28px; background: var(--ink); color: var(--paper); border-radius: 12px; }
.fs-mcp-scene .fs-kicker { color: var(--sage); }
.fs-mcp-prompt p { font-size: 1.3rem; line-height: 1.45; margin: 12px 0 0; }
.fs-mcp-route { display: flex; align-items: center; gap: 14px; font-size: .875rem; color: var(--sage); margin: 16px 0; }
.fs-route-line { height: 34px; width: 2px; background: color-mix(in oklch, var(--ink), var(--paper) 25%); margin-left: 12px; }
.fs-route-line i { display: block; height: 100%; background: var(--sage); transform: scaleY(var(--story-progress)); transform-origin: center top; }
.fs-mcp-evidence { display: grid; gap: 12px; }
.fs-mcp-source { border: 1px solid color-mix(in oklch, var(--ink), var(--paper) 25%); padding: 12px 16px; }
.fs-mcp-source b { display: block; font-weight: 500; font-size: 1rem; margin-top: 5px; }
.fs-story.story-ready .fs-mcp-source { transform: translateX(calc((1 - var(--layer-progress)) * -40px)); }
.fs-mcp-response { position: absolute; bottom: 44px; left: 28px; right: 28px; background: var(--paper); color: var(--ink); padding: 24px; box-shadow: 0 -20px 40px color-mix(in oklch, var(--ink), transparent 50%); }
.fs-mcp-response .fs-kicker { color: var(--accent); }
.fs-mcp-response p { margin: 0; }
.fs-mcp-response h3 { font-size: 1.75rem; }
.fs-citations { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.fs-citations span { border-bottom: 1px solid var(--line); font-size: .875rem; padding-bottom: 4px; color: var(--accent); }
.fs-scene-footnote { position: absolute; bottom: 14px; left: 28px; right: 28px; font-size: .875rem; color: var(--sage); }
.fs-audio-scene { padding: 32px; position: relative; background: var(--ink); color: var(--paper); border-radius: 12px; overflow: hidden; }
.fs-audio-scene .fs-kicker { color: var(--sage); }
.fs-audio-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--sage); }
.fs-audio-scene blockquote { font-size: clamp(1.8rem, 3vw, 2.8rem); font-family: "Manrope", sans-serif; line-height: 1.15; letter-spacing: -.04em; margin: 32px 0 16px; }
.fs-wave-area { position: relative; height: 126px; margin: 24px -8px 14px; }
.fs-wave { display: flex; gap: 4px; position: absolute; inset: 0; align-items: center; }
.fs-wave i { flex: 1; min-width: 1px; border-radius: 2px; }
.fs-wave-noise i { height: var(--noise); background: oklch(72% .115 45); }
.fs-wave-voice i { height: var(--voice); background: var(--sage); }
.fs-wave-noise { transform: scaleY(calc(1 - var(--story-progress) * .92)); opacity: calc(1 - var(--story-progress) * .8); }
.fs-wave-voice { opacity: calc(.18 + var(--story-progress) * .82); transform: scaleY(calc(.52 + var(--story-progress) * .48)); }
.fs-wave-sweep { position: absolute; height: 100%; width: 1px; background: var(--paper); left: 0; transform: translateX(calc(var(--story-progress) * (min(45vw, 604px) - 68px))); opacity: .7; }
.fs-wave-labels { display: flex; justify-content: space-between; gap: 16px; color: var(--sage); font-size: .875rem; }
.fs-wave-labels > span:first-child { color: oklch(82% .115 45); }
.fs-audio-resolve { display: flex; align-items: end; gap: 24px; justify-content: space-between; margin-top: 28px; }
.fs-audio-resolve h3 { font-size: 1.6rem; margin: 8px 0 0; }
.fs-audio-resolve p { max-width: 22ch; margin: 0; color: var(--sage); }
.fs-share-scene { position: relative; padding: 8px 28px 0 0; }
.fs-share-origin { width: 91%; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; overflow: hidden; }
.fs-share-thumbnail { display: flex; gap: 18px; align-items: center; padding: 24px; background: color-mix(in oklch, var(--paper), var(--sage) 24%); }
.fs-share-thumbnail b { font-size: 1.125rem; display: block; margin-bottom: 8px; }
.fs-share-thumbnail span:not(.fs-play) { font-size: .875rem; }
.fs-play { color: var(--accent); font-size: 1.5rem; }
.fs-share-owner { display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.fs-share-owner b, .fs-share-owner div > span { display: block; font-size: 1rem; }
.fs-share-owner div > span { margin-top: 4px; color: var(--muted); }
.fs-avatar { display: inline-grid; place-items: center; background: var(--ink); color: var(--paper); width: 36px; height: 36px; border-radius: 50%; font-size: .875rem; flex-shrink: 0; }
.fs-share-path { height: 160px; width: 1px; background: var(--line); position: absolute; left: 24px; top: 240px; }
.fs-share-path i { display: block; height: 100%; width: 100%; transform: scaleY(var(--story-progress)); transform-origin: center top; background: var(--accent); }
.fs-share-team { position: absolute; top: 225px; left: 54px; right: 0; border: 1px solid var(--line); background: var(--paper); padding: 24px; }
.fs-audience-people { display: flex; align-items: center; gap: 6px; margin: 16px 0; }
.fs-audience-people .fs-avatar { background: color-mix(in oklch, var(--ink), var(--sage) 20%); }
.fs-audience-people b { margin-left: 12px; font-size: 1rem; }
.fs-share-team p { margin: 0; }
.fs-share-guest { position: absolute; top: 264px; left: 54px; right: 0; padding: 26px; background: var(--ink); color: var(--paper); }
.fs-share-guest .fs-kicker { color: var(--sage); }
.fs-share-guest h3 { margin: 12px 0 18px; }
.fs-share-guest p { margin: 16px 0 0; color: var(--sage); }
.fs-share-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .875rem; padding: 12px 0; border-top: 1px solid color-mix(in oklch, var(--ink), var(--paper) 25%); border-bottom: 1px solid color-mix(in oklch, var(--ink), var(--paper) 25%); }
.fs-share-setting b { font-weight: 500; color: var(--sage); }
/* Final assembled illustrations accompany fully readable chapters without animation. */
.fs-story:not(.story-ready) .fs-stage { align-self: start; position: sticky; top: 112px; }
.fs-story:not(.story-ready) .fs-chapters { display: none; }
.fs-story:not(.story-ready) .fs-story-bottom > span:first-child { visibility: hidden; }
@media (min-width: 761px) and (max-height: 850px) {
  .fs-story { --fs-stage-height: 430px; }
  .fs-sticky { padding-top: 12px; padding-bottom: 12px; }
  .fs-story-top { margin-bottom: 12px; }
  .fs-layout { gap: 32px; }
  .fs-chapter h2 { font-size: clamp(1.75rem, 2.4vw, 2.4rem); margin-bottom: 16px; }
  .fs-chapter-index { margin-bottom: 14px; }
  .fs-result { margin-top: 20px; padding-top: 14px; }
  .fs-progress-track { margin-top: 16px; }
  .fs-story-bottom { margin-top: 8px; }
  .fs-sample-content { padding: 20px 24px; }
  .fs-sample-content h3 { font-size: 1.5rem; margin: 10px 0 14px; }
  .fs-record-evidence { top: 160px; padding: 20px; }
  .fs-record-handoff { top: 211px; padding: 20px; }
  .fs-record-handoff h3 { font-size: 1.4rem; margin: 10px 0 14px; }
  .fs-record-handoff p { margin-top: 12px; }
  .fs-debug-video .fs-sample-screen { grid-template-columns: 110px 1fr; }
  .fs-debug-video .fs-sample-content { padding: 14px 22px; }
  .fs-debug-video .fs-sample-content h3 { font-size: 1.25rem; margin: 8px 0; }
  .fs-debug-video .fs-sample-content h3 br { display: none; }
  .fs-debug-video .fs-input { padding-bottom: 8px; }
  .fs-debug-video .fs-send { margin-top: 8px; padding: 7px 12px; }
  .fs-debug-track { padding: 14px 18px; }
  .fs-debug-evidence { gap: 10px; padding: 14px 18px; }
  .fs-debug-evidence .fs-kicker { font-size: .875rem; }
  .fs-debug-evidence p { line-height: 1.4; }
  .fs-debug-request, .fs-debug-note { padding-top: 8px; }
  .fs-mcp-scene { padding: 22px; }
  .fs-mcp-prompt p { margin-top: 8px; }
  .fs-mcp-route { margin: 10px 0; }
  .fs-mcp-source { padding: 10px 14px; }
  .fs-mcp-evidence { gap: 8px; }
  .fs-mcp-response { left: 22px; right: 22px; bottom: 40px; padding: 20px; }
  .fs-mcp-response h3 { font-size: 1.5rem; margin: 10px 0 12px; }
  .fs-citations { margin-top: 12px; }
  .fs-audio-scene { padding: 24px; }
  .fs-audio-scene blockquote { margin: 22px 0 12px; font-size: 2rem; }
  .fs-wave-area { height: 90px; margin-top: 18px; }
  .fs-audio-resolve { margin-top: 22px; }
  .fs-audio-resolve h3 { font-size: 1.4rem; }
  .fs-share-thumbnail { padding: 18px 20px; }
  .fs-share-owner { padding: 16px 20px; }
  .fs-share-team { top: 192px; padding: 20px; }
  .fs-share-guest { top: 216px; padding: 20px; }
  .fs-share-guest h3 { font-size: 1.5rem; margin: 10px 0 12px; }
  .fs-share-guest p { margin-top: 12px; font-size: .875rem; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .fs-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr); gap: 24px; }
  .fs-chapters button { padding-inline: 8px; gap: 6px; }
  .fs-story-top > .eyebrow { font-size: .875rem; }
  .fs-sample-screen, .fs-debug-video .fs-sample-screen { grid-template-columns: 1fr; }
  .fs-sample-nav { display: none; }
  .fs-window-bar > span:last-child { display: none; }
  .fs-record-handoff, .fs-record-evidence { width: 96%; }
  .fs-share-team, .fs-share-guest { left: 20px; }
  .fs-audience-people { flex-wrap: wrap; }
  .fs-audio-resolve { display: block; }
  .fs-audio-resolve p { display: none; }
}
@media (max-width: 760px) {
  .fs-story { --fs-stage-height: 530px; }
  .fs-story-top { margin-bottom: 24px; }
  .fs-layout { grid-template-columns: 1fr; gap: 32px; }
  .fs-narrative { gap: 32px; }
  .fs-chapter h2 { max-width: 22ch; }
  .fs-chapter p { max-width: none; }
  .fs-story:not(.story-ready) .fs-stage { position: relative; top: auto; }
  .fs-story-bottom { flex-wrap: wrap; gap: 8px; }
  .fs-window-bar > span:last-child { display: none; }
  .fs-sample-screen, .fs-debug-video .fs-sample-screen { grid-template-columns: 1fr; }
  .fs-sample-nav { display: none; }
  .fs-record-scene { padding-right: 10px; }
  .fs-record-window { width: 98%; }
  .fs-record-evidence, .fs-record-handoff { width: 94%; padding: 20px; }
  .fs-evidence-line { gap: 10px; }
  .fs-record-handoff { top: 280px; }
  .fs-stage .fs-debug-track { gap: 8px; font-size: .875rem; }
  .fs-mcp-scene { padding: 22px; }
  .fs-mcp-response { left: 16px; right: 16px; padding: 20px; }
  .fs-share-scene { padding-right: 10px; }
  .fs-share-team, .fs-share-guest { left: 20px; padding: 20px; }
  .fs-share-origin { width: 98%; }
  .fs-share-guest { top: 290px; }
  .fs-audio-scene { padding: 24px; }
  .fs-audio-resolve { display: block; }
  .fs-audio-resolve p { margin-top: 14px; max-width: none; }
  .fs-wave { gap: 3px; }
  .fs-story-bottom > span:first-child { display: none; }
}
/* The cursor travels the actual rail width, including resized desktop panels. */
.fs-time-rail { overflow: visible; }
.fs-time-rail b { width: 100%; height: 10px; border: 0; border-radius: 0; background: none; transform: translateX(calc(var(--story-progress) * 100%)); }
.fs-time-rail b::after { content: ""; position: absolute; left: -5px; top: 0; width: 10px; height: 10px; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); }
.fs-wave-area { overflow: hidden; }
.fs-wave-sweep { width: 100%; background: transparent; border-left: 1px solid var(--paper); transform: translateX(calc(var(--story-progress) * 100%)); }
@media (min-width: 761px) and (max-height: 850px) {
  .fs-share-guest { top: 188px; }
  .fs-share-guest h3 br { display: none; }
  .fs-share-guest p { font-size: 1rem; }
}
.fs-story:not(.story-ready) .fs-stage { position: relative; top: auto; }
.fs-story:not(.story-ready) .fs-record-scene,
.fs-story:not(.story-ready) .fs-share-scene { padding-right: 0; }
.fs-story:not(.story-ready) .fs-record-window,
.fs-story:not(.story-ready) .fs-share-origin { width: 100%; }
.fs-story:not(.story-ready) .fs-record-evidence,
.fs-story:not(.story-ready) .fs-record-handoff,
.fs-story:not(.story-ready) .fs-mcp-response,
.fs-story:not(.story-ready) .fs-share-team,
.fs-story:not(.story-ready) .fs-share-guest { position: relative; inset: auto; width: auto; margin-top: 20px; box-shadow: none; }
.fs-story:not(.story-ready) .fs-scene-footnote { position: static; display: block; margin-top: 24px; }
.fs-story:not(.story-ready) .fs-share-path { display: none; }
@media (min-width: 761px) and (max-height: 850px) {
  .fs-debug-video .fs-sample-content { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 14px 22px; }
  .fs-debug-video .fs-sample-content > .fs-kicker { grid-column: 1 / -1; }
  .fs-debug-video .fs-sample-content h3 { margin: 0; font-size: 1.125rem; }
  .fs-debug-video .fs-input { font-size: .875rem; align-self: end; }
  .fs-debug-video .fs-send { grid-column: 1 / -1; margin: 0; padding: 6px 12px; }
}
.fs-mcp-prompt p { color: var(--paper); }
.fs-audio-listen { text-decoration: underline; text-underline-offset: 4px; }
.fs-audio-listen svg { display: inline-block; vertical-align: middle; margin-left: 3px; }

/* Keep chapter copy aligned with the shared marketing type scale. */
.fs-chapters button, .fs-result { font-size: var(--text-support); }
.fs-chapters button > span, .fs-chapter-index, .fs-story-bottom,
.fs-story-top > .eyebrow { font-size: var(--text-caption); }
.fs-chapter p { font-size: var(--text-body); }