/* Homepage blocks — layout only; typography via 03-patterns.css */

/* --- Hero scroll experience — Figma 2288:5197, 2306:6621, 2294:5301 --- */

.home-hero {
  /* Locked to Figma 1440 (2396:5627); narrower bands override below. */
  --home-hero-header: var(--site-header-height, 5rem);
  --home-hero-copy-w: 37.5rem; /* 600 */
  --home-hero-stage-w: 37.5rem; /* 600 */
  --home-hero-stage-h: 43.75rem; /* 700 */
  --home-hero-demo-w: 34.4375rem; /* 551 */
  --home-hero-layout-gap: 6.25rem; /* 100 */
  --home-hero-headline-size: 4rem; /* 64 */
  --home-hero-headline-line: 1;
  --home-hero-headline-tracking: 0;
  --home-hero-parallax-max: 1rem;
  --home-hero-parallax-lerp: 0.04;
  --home-hero-repulsion-radius: 120vmax;
  --home-hero-repulsion-max: 7.625rem;
  --home-hero-settle-duration: 300ms;
  /* Empty space between consecutive era collages so the incoming era
     visibly travels up through a gap instead of butting the outgoing one. */
  --home-hero-era-gap: calc(var(--home-hero-stage-h) * 0.5);
  --home-hero-era-slot-h: calc(var(--home-hero-stage-h) + var(--home-hero-era-gap));

  /* Padding lives on the inner container so the bg can be truly full-bleed. */
  padding-inline: 0;
  overflow: visible;
  background: var(--color-grey-200);
}

.home-hero__track {
  position: relative;
  width: 100%;
}

.home-hero__pin {
  position: sticky;
  top: var(--home-hero-header);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Grow with stacked mobile content — fixed height left grey gaps below.
     Prefer lvh so mobile browser chrome show/hide doesn’t leave a strip. */
  min-height: 42rem;
  min-height: calc(100dvh - var(--home-hero-header));
  min-height: calc(100lvh - var(--home-hero-header));
  overflow: visible;
  background: var(--color-grey-200);
}

.home-hero__pin > .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  padding-inline: var(--d-8);
  padding-bottom: 0;
  overflow: visible;
  box-sizing: border-box;
}

.home-hero__inner {
  flex: 1;
  min-height: 0;
  gap: 0;
}

.home-hero__layout {
  display: grid;
  grid-template-columns: var(--home-hero-copy-w) var(--home-hero-stage-w);
  align-items: center;
  align-content: center;
  flex: 1;
  gap: var(--home-hero-layout-gap);
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: visible;
}

.home-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: var(--home-hero-copy-w);
  min-width: 0;
  text-align: left;
}

.home-hero__stage {
  position: relative;
  z-index: 1;
  width: var(--home-hero-stage-w);
  height: var(--home-hero-stage-h);
  min-height: var(--home-hero-stage-h);
  margin-inline: auto;
  overflow: visible;
  pointer-events: none;
  touch-action: pan-y;
}

.home-hero__headline {
  width: 100%;
  margin: 0;
  font-family: var(--font-display-family);
  font-size: var(--home-hero-headline-size);
  font-weight: var(--font-display-weight);
  line-height: var(--home-hero-headline-line);
  letter-spacing: var(--home-hero-headline-tracking);
  color: var(--text);
  white-space: nowrap;
}

.home-hero__headline-line {
  display: block;
}

.home-hero__headline-line[hidden] {
  display: none;
}

.home-hero__headline-line:nth-child(1),
.home-hero__headline-line:nth-child(2) {
  transform: none;
}

.home-hero__headline-line:nth-child(3),
.home-hero__headline-line:nth-child(4) {
  padding-left: 40.5%; /* 243/600 — Figma 1440 */
  text-align: left;
}

.home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(1) {
  transform: translateX(1ch);
}

.home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(2) {
  transform: none;
}

.home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(3),
.home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(4) {
  padding-left: 0;
  text-align: center;
  transform: translateX(12%);
}

.home-hero__copy-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--d-8);
  margin-top: var(--d-8);
}

.home-hero__copy-illustration {
  display: block;
  width: 11.3125rem; /* 181 — Figma 1440/1024 */
  height: auto;
  margin-inline: auto;
}

.home-hero[data-active-era="reporting"] .home-hero__copy-illustration {
  width: 6.875rem;
  transform: rotate(4.3deg);
}

.home-hero__support {
  max-width: 18.6875rem; /* 299 */
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0;
  color: var(--text);
  text-align: left;
}

.home-hero__era-track {
  overflow: visible;
  will-change: transform;
  transform: translateY(calc(var(--era-scroll-index, 0) * -1 * var(--home-hero-era-slot-h)));
}

.home-hero__era {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: var(--home-hero-era-slot-h);
  overflow: visible;
  visibility: hidden;
}

.home-hero__era.is-era-visible,
.home-hero__era.is-era-exiting {
  visibility: visible;
}

.home-hero__collage--placeholder {
  width: 100%;
  height: var(--home-hero-stage-h);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-grey-300);
}

.home-hero__collage {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--home-hero-stage-h);
  overflow: visible;
}

/* z-index on slots (not imgs) — filter on clipping-2 must not beat higher layers */
.home-hero__layer-slot {
  position: absolute;
  pointer-events: none;
}

/* Animated Q&A — Figma 2328:8794 */
.home-hero__layer-slot--question-demo {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--home-hero-demo-w);
  container-type: inline-size;
  transform: translate(-50%, -50%);
}

.home-question-demo {
  position: relative;
  display: block;
  width: 100%;
  height: 127.04cqw;
  color: var(--text);
}

.home-question-demo p {
  margin: 0;
}

.home-question-demo__prompt {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2cqw;
  width: 100%;
  height: 18.6cqw;
  padding: 3.2cqw;
  border: 0.162cqw solid var(--border);
  border-radius: 1.6cqw;
  background: var(--color-grey-200);
}

.home-question-demo__question {
  flex: 1 1 auto;
  max-width: 73.8cqw;
  font-family: var(--font-body-family);
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 4cqw;
  letter-spacing: 0.02em;
}

.home-question-demo__cursor {
  display: inline-block;
  width: 0.36cqw;
  height: 3.3cqw;
  margin-left: 0.18cqw;
  vertical-align: -0.2em;
  background: #9397ff;
}

.home-question-demo__submit {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 7.2cqw;
  height: 7.2cqw;
  border-radius: 50%;
  background: var(--color-grey-700, #232323);
  color: var(--color-grey-100);
  font-family: var(--font-body-family);
  font-size: 5cqw;
  font-weight: 300;
  line-height: 1;
}

.home-question-demo__tracker {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
  width: 100%;
  height: 21.8cqw;
  padding: 1.6cqw;
  border: 0.162cqw solid var(--border);
  border-radius: 1.6cqw;
  background: var(--color-grey-100);
  box-shadow: 0 0.76cqw 7.64cqw rgba(87, 84, 80, 0.08);
  overflow: hidden;
  animation: home-question-tracker 8s linear both;
}

.home-question-demo__messages {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.8cqw;
  width: 100%;
  padding: 0;
  will-change: translate;
}

.home-question-demo__fade {
  display: none;
}

.home-question-demo__step {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 1.6cqw;
  width: 100%;
  padding: 3.2cqw;
  border-radius: 0.8cqw;
}

.home-question-demo__step--reading,
.home-question-demo__step--impact,
.home-question-demo__step--reports,
.home-question-demo__step--opening {
  gap: 0.4cqw;
}

.home-question-demo__finding-copy {
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
}

.home-question-demo__heading {
  font-family: var(--font-body-family);
  font-size: 2.8cqw;
  font-weight: 500;
  line-height: 4cqw;
  letter-spacing: 0.02em;
}

.home-question-demo__heading > span {
  margin-left: 1.6cqw;
}

.home-question-demo__heading .home-question-demo__metric {
  font-family: var(--font-mono);
  font-size: 2.4cqw;
  line-height: 3.2cqw;
  letter-spacing: 0.03em;
}

.home-question-demo__detail {
  font-family: var(--font-mono);
  font-size: 2.4cqw;
  font-weight: 500;
  line-height: 3.2cqw;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.home-question-demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
}

.home-question-demo__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8cqw 1.6cqw;
  border-radius: 3.2cqw;
  background: #dff3f0;
  color: #001f1a;
  font-family: var(--font-body-family);
  font-size: 2.4cqw;
  font-weight: 500;
  line-height: 3.2cqw;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.home-question-demo__answer {
  position: absolute;
  z-index: 4;
  top: 60.03cqw;
  left: 2.72cqw;
  display: flex;
  flex-direction: column;
  gap: 3.2cqw;
  width: 88.94cqw;
  padding: 3.2cqw;
  border: 0.2cqw solid var(--surface);
  border-radius: 1.6cqw;
  background: var(--color-grey-100);
  box-shadow: 0 0.8cqw 5.32cqw rgba(0, 0, 0, 0.08);
  rotate: -1.12deg;
}

.home-question-demo__answer-section {
  display: flex;
  flex-direction: column;
}

.home-question-demo__answer-copy {
  max-width: 81.4cqw;
  font-family: var(--font-body-family);
  font-size: 2.8cqw;
  font-weight: 400;
  line-height: 4cqw;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-question-demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqw;
}

.home-question-demo__actions span {
  padding: 1.2cqw 2cqw;
  border-radius: 2cqw;
  background: var(--surface);
  font-family: var(--font-body-family);
  font-size: 2.4cqw;
  line-height: 3.2cqw;
  letter-spacing: 0.01em;
}

.home-question-demo__step,
.home-question-demo__messages,
.home-question-demo__finding-copy,
.home-question-demo__chip,
.home-question-demo__answer,
.home-question-demo__answer-section,
.home-question-demo__actions span {
  backface-visibility: hidden;
  will-change: translate, opacity;
}

.home-hero__era--questions .home-question-demo__step--reading {
  animation: home-question-reading 8s linear both;
}

.home-hero__era--questions .home-question-demo__step--finding {
  animation: home-question-finding 8s linear both;
}

.home-hero__era--questions .home-question-demo__chip--1 {
  animation: home-question-chip-1 8s linear both;
}

.home-hero__era--questions .home-question-demo__chip--2 {
  animation: home-question-chip-2 8s linear both;
}

.home-hero__era--questions .home-question-demo__chip--3 {
  animation: home-question-chip-3 8s linear both;
}

.home-hero__era--questions .home-question-demo__step--impact {
  animation: home-question-impact 8s linear both;
}

.home-hero__era--questions .home-question-demo__step--reports {
  animation: home-question-reports 8s linear both;
}

.home-hero__era--questions .home-question-demo__step--opening {
  animation: home-question-opening 8s linear both;
}

.home-hero__era--questions .home-question-demo__answer {
  animation: home-question-answer 8s linear both;
}

.home-hero__era--questions .home-question-demo__submit {
  animation: home-question-submit 8s linear both;
}

.home-hero__era--questions .home-question-demo__answer-section--changed {
  animation: home-question-answer-changed 8s linear both;
}

.home-hero__era--questions .home-question-demo__answer-section--opportunity {
  animation: home-question-answer-opportunity 8s linear both;
}

.home-hero__era--questions .home-question-demo__actions span:nth-child(1) {
  animation: home-question-action-1 8s linear both;
}

.home-hero__era--questions .home-question-demo__actions span:nth-child(2) {
  animation: home-question-action-2 8s linear both;
}

.home-hero__era--questions .home-question-demo__actions span:nth-child(3) {
  animation: home-question-action-3 8s linear both;
}

@keyframes home-question-tracker {
  0%, 6.25% {
    height: 21.8cqw;
    translate: 0 47.49cqw;
  }
  6.25% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  20% {
    height: 39.95cqw;
    translate: 0 38.41cqw;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  33.75% {
    height: 61.73cqw;
    translate: 0 27.52cqw;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  47.5% {
    height: 79.88cqw;
    translate: 0 18.45cqw;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  58.75% {
    height: 94.4cqw;
    translate: 0 11.19cqw;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  68.75%, 100% {
    height: 112.58cqw;
    translate: 0 2.1cqw;
  }
}

/* Mobile: expand downward from a fixed top (no upward recenter) */
@keyframes home-question-tracker-mobile {
  0%, 6.25% {
    height: 21.8cqw;
    translate: 0 0;
  }
  6.25% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  20% {
    height: 39.95cqw;
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  33.75% {
    height: 61.73cqw;
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  47.5% {
    height: 79.88cqw;
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  58.75% {
    height: 94.4cqw;
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  68.75%, 100% {
    height: 112.58cqw;
    translate: 0 0;
  }
}

@keyframes home-question-submit {
  0% {
    opacity: 1;
    scale: 1;
    animation-timing-function: ease-in;
  }
  1.875% {
    opacity: 0.7;
    scale: 0.82;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  5%, 100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes home-question-reading {
  0%, 7.5% {
    opacity: 0;
    translate: 0 1.45cqw;
  }
  7.5% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  13.75% { opacity: 1; }
  15%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-finding {
  0%, 21.25% {
    opacity: 0;
    translate: 0 1.45cqw;
  }
  21.25% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  27.5% { opacity: 1; }
  28.75%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-chip-1 {
  0%, 26.25% { opacity: 0; translate: -2.9cqw 0; scale: 0.92; }
  26.25% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  30% { opacity: 1; scale: 1; }
  30.625%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes home-question-chip-2 {
  0%, 28.125% { opacity: 0; translate: -2.9cqw 0; scale: 0.92; }
  28.125% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  31.875% { opacity: 1; scale: 1; }
  32.5%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes home-question-chip-3 {
  0%, 30% { opacity: 0; translate: -2.9cqw 0; scale: 0.92; }
  30% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  33.75% { opacity: 1; scale: 1; }
  34.375%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes home-question-impact {
  0%, 35% { opacity: 0; translate: 0 1.45cqw; }
  35% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  41.25% { opacity: 1; }
  42.5%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-reports {
  0%, 47.5% { opacity: 0; translate: 0 1.45cqw; }
  47.5% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  53.75% { opacity: 1; }
  55%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-opening {
  0%, 58.75% { opacity: 0; translate: 0 1.45cqw; }
  58.75% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  65% { opacity: 1; }
  66.25%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-answer {
  0%, 68.75% { opacity: 0; translate: 0 2.18cqw; }
  68.75% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  75% { opacity: 1; }
  77.5%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-answer-changed {
  0%, 72.5% { opacity: 0; translate: 0 1.81cqw; }
  72.5% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  80% { opacity: 1; }
  81.25%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-answer-opportunity {
  0%, 78.75% { opacity: 0; translate: 0 1.81cqw; }
  78.75% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  86.25% { opacity: 1; }
  87.5%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes home-question-action-1 {
  0%, 85% { opacity: 0; translate: -2.9cqw 0; scale: 0.92; }
  85% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  88.75% { opacity: 1; scale: 1; }
  89.375%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes home-question-action-2 {
  0%, 86.875% { opacity: 0; translate: -2.9cqw 0; scale: 0.92; }
  86.875% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  90.625% { opacity: 1; scale: 1; }
  91.25%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes home-question-action-3 {
  0%, 88.75% { opacity: 0; translate: -2.9cqw 0; scale: 0.92; }
  88.75% { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  92.5% { opacity: 1; scale: 1; }
  93.125%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* Data-to-decisions report — Figma Site-hero animations 1:4719 */
.home-hero__layer-slot--report-demo {
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  container-type: size;
}

.home-report-demo {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--text);
  transform-origin: center center;
  /*
    Beat 1 demo fills ~demo-w; beat 2’s cqw layout reads smaller inside the stage.
    Scale the whole composition up, capped so it still fits the stage.
  */
  --home-report-demo-scale: 1.28;
  scale: min(
    var(--home-report-demo-scale),
    calc(100cqh / 125cqw),
    calc(100cqw / 98cqw)
  );
}

.home-report-demo p,
.home-report-demo h3 {
  margin: 0;
}

.home-report-demo__folder,
.home-report-demo__chooser,
.home-report-demo__chart {
  position: absolute;
}

.home-report-demo__folder {
  top: 8cqw;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 62.83cqw;
  filter: drop-shadow(0 0.7cqw 3.1cqw rgba(0, 0, 0, 0.08));
}

.home-report-demo__flair {
  display: block;
  width: 90.7%;
  height: auto;
  flex-shrink: 0;
  /* SVG viewBox (15) is taller than the white path (~14.47) — overlap to close the seam */
  margin-bottom: -0.2cqw;
}

.home-report-demo__report {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 4.1cqw;
  border-radius: 0 1.65cqw 1.65cqw;
  background: var(--color-grey-100);
  overflow: hidden;
}

.home-report-demo__report-reveal {
  display: grid;
  grid-template-rows: 0fr;
  will-change: grid-template-rows;
}

.home-report-demo__report-reveal-inner {
  display: flex;
  flex-direction: column;
  gap: 4.9cqw;
  min-height: 0;
  padding-top: 4.9cqw;
  overflow: hidden;
}

.home-report-demo__chooser,
.home-report-demo__chart {
  background: var(--color-grey-100);
  box-shadow: 0 0.7cqw 3.1cqw rgba(0, 0, 0, 0.08);
}

.home-report-demo__report-header {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0.4cqw;
}

.home-report-demo__report-header > p {
  display: flex;
  align-items: center;
  gap: 1.65cqw;
  font-family: var(--font-mono);
  font-size: 2.46cqw;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.home-report-demo__status {
  width: 2.46cqw;
  height: 2.46cqw;
  border-radius: 50%;
  background: #9397ff;
}

.home-report-demo__report-header small {
  font-family: var(--font-mono);
  font-size: 2.46cqw;
  line-height: 1.333;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.home-report-demo__section {
  display: flex;
  flex-direction: column;
  gap: 0.82cqw;
}

.home-report-demo__section h3 {
  font-family: var(--font-body-family);
  font-size: 2.87cqw;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: 0.02em;
}

.home-report-demo__section p {
  font-family: var(--font-body-family);
  font-size: 2.46cqw;
  font-weight: 400;
  line-height: 1.333;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-report-demo__section u {
  color: var(--color-teal-250);
  text-underline-offset: 0.08em;
}

.home-report-demo__section strong {
  color: var(--text);
  font-weight: 400;
}

/* Report-type dropdown — Figma 1:9449 (218×250) */
.home-report-demo__chooser {
  z-index: 2;
  top: 15.17cqw;
  left: 57.67cqw;
  display: flex;
  flex-direction: column;
  width: 38.56cqw;
  height: 44.22cqw;
  padding: 1.42cqw;
  border-right: 1px solid var(--border);
  border-radius: 1.42cqw;
  overflow: hidden;
  will-change: opacity, translate;
}

.home-report-demo__chooser-scroll {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.home-report-demo__chooser-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: translate;
}

.home-report-demo__choice {
  display: flex;
  align-items: center;
  gap: 2.83cqw;
  width: 100%;
  padding: 1.42cqw;
  border-radius: 2.12cqw;
}

.home-report-demo__choice.is-selected {
  border-radius: 0.71cqw;
  background: var(--border);
}

.home-report-demo__choice-art {
  flex: 0 0 7.08cqw;
  display: block;
  width: 7.08cqw;
  height: 7.08cqw;
  border-radius: 1.18cqw;
  object-fit: cover;
  background: var(--color-grey-300);
}

.home-report-demo__choice > span:last-child {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.71cqw;
}

.home-report-demo__choice b {
  font-family: var(--font-body-family);
  font-size: 2.12cqw;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.02em;
  color: var(--text);
}

.home-report-demo__choice small {
  font-family: var(--font-body-family);
  font-size: 1.77cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-report-demo__chooser-footer {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 14.16cqw;
  padding: 4.25cqw 2.12cqw 2.12cqw;
  background: linear-gradient(
    176.5deg,
    rgba(255, 255, 255, 0) 7%,
    var(--color-grey-100) 32.6%
  );
  pointer-events: none;
}

.home-report-demo__chooser-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.96cqw;
  padding: 1.06cqw 1.77cqw;
  border-radius: 1.77cqw;
  background: var(--color-grey-200);
  font-family: var(--font-body-family);
  font-size: 2.12cqw;
  font-weight: 400;
  line-height: 1.333;
  letter-spacing: 0.01em;
  color: var(--text);
  pointer-events: none;
}

.home-report-demo__chart {
  --transition-rotate: 1.5deg;

  z-index: 3;
  top: 63.67cqw;
  left: 56.5cqw;
  display: flex;
  flex-direction: column;
  gap: 3.54cqw;
  width: 39.73cqw;
  height: 46.55cqw;
  padding: 2.83cqw;
  border-radius: 1.42cqw;
  overflow: hidden;
  transform: rotate(1.5deg);
  transform-origin: center;
  will-change: opacity, translate;
}

.home-report-demo__chart header {
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
}

.home-report-demo__chart h3 {
  font-family: var(--font-mono);
  font-size: 2.12cqw;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.03em;
}

.home-report-demo__chart header p {
  font-family: var(--font-body-family);
  font-size: 1.77cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-report-demo__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7cqw;
}

.home-report-demo__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0.7cqw 1.42cqw;
  border: 1px solid var(--color-grey-300);
  border-radius: 2.83cqw;
  font-family: var(--font-body-family);
  font-size: 1.95cqw;
  line-height: 1;
}

.home-report-demo__legend i {
  display: block;
  width: 2.12cqw;
  height: 2.12cqw;
  border-radius: 50%;
}

.home-report-demo__legend .is-you {
  background: #9397ff;
}

.home-report-demo__legend .is-shyp {
  background: #00eac3;
}

.home-report-demo__legend .is-vantek {
  background: #ffb9ff;
}

.home-report-demo__bars {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.42cqw;
  min-height: 0;
  padding-top: 1.42cqw;
  padding-bottom: 2.83cqw;
  border-top: 1px dashed var(--color-grey-300);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(25% - 1px),
    var(--color-grey-300) 25%
  );
}

.home-report-demo__bar-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 5.66cqw;
  height: 100%;
  min-height: 13.45cqw;
}

.home-report-demo__bar {
  display: block;
  width: 100%;
  height: 13.45cqw;
  border-radius: 0.7cqw;
  background: linear-gradient(
    to bottom,
    #9397ff 0 var(--you),
    #00eac3 var(--you) calc(var(--you) + var(--shyp)),
    #ffb9ff calc(var(--you) + var(--shyp)) 100%
  );
  transform-origin: center bottom;
  will-change: scale;
}

.home-report-demo__bar-col small {
  position: absolute;
  top: calc(100% + 0.7cqw);
  left: 50%;
  font-family: var(--font-body-family);
  font-size: 1.95cqw;
  color: var(--text-muted);
  transform: translateX(-50%);
}

.home-hero[data-demo-era="narrative"] .home-report-demo__report-reveal {
  animation: home-report-expand-reveal 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__status {
  animation: home-report-status 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__section--1 {
  animation: home-report-section-1 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__section--2 {
  animation: home-report-section-2 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__section--3 {
  animation: home-report-section-3 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__chooser {
  animation: home-report-chooser-in 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__chooser-list {
  animation: home-report-chooser-scroll 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__chart {
  animation: home-report-chart-in 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__bar--1 {
  animation: home-report-bar-1 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__bar--2 {
  animation: home-report-bar-2 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__bar--3 {
  animation: home-report-bar-3 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__bar--4 {
  animation: home-report-bar-4 6s linear infinite both;
}

.home-hero[data-demo-era="narrative"] .home-report-demo__bar--5 {
  animation: home-report-bar-5 6s linear infinite both;
}

/*
  Beat 2 timeline (6s loop)
  0–5%     report collapsed (header only), top edge fixed
  5–35%    report expands downward to full content height
  0–10%    chooser fades in; scroll runs in parallel
  12–35%   three report sections stagger in
  38–48%   SOV chart appears after report is done
  42–60%   bars grow (same motion as before, delayed)
*/
@keyframes home-report-expand-reveal {
  0%, 5% {
    grid-template-rows: 0fr;
  }
  5% {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  35%, 100% {
    grid-template-rows: 1fr;
  }
}

@keyframes home-report-status {
  0% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    scale: 1;
  }
  3.333% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    scale: 1.35;
  }
  7.5% {
    scale: 1;
  }
  8.333% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    scale: 1;
  }
  11.667% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    scale: 1.35;
  }
  15.833% {
    scale: 1;
  }
  16.667% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    scale: 1;
  }
  20% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    scale: 1.35;
  }
  24.167%, 100% {
    scale: 1;
  }
}

@keyframes home-report-section-1 {
  0%, 12% {
    opacity: 0;
    translate: 0 12px;
  }
  12% {
    animation-timing-function: ease-out;
  }
  20%, 100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-report-section-2 {
  0%, 18% {
    opacity: 0;
    translate: 0 12px;
  }
  18% {
    animation-timing-function: ease-out;
  }
  26%, 100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-report-section-3 {
  0%, 24% {
    opacity: 0;
    translate: 0 12px;
  }
  24% {
    animation-timing-function: ease-out;
  }
  32%, 100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-report-chooser-in {
  0%, 25% {
    opacity: 0;
    translate: 0 12px;
  }
  25% {
    animation-timing-function: ease-out;
  }
  35%, 100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-report-chooser-scroll {
  0%, 33.333% {
    translate: 0 0;
  }
  33.333% {
    animation-timing-function: ease-in-out;
  }
  66.667%, 83.333% {
    translate: 0 -29.4cqw;
  }
  83.333% {
    animation-timing-function: ease-in-out;
  }
  100% {
    translate: 0 0;
  }
}

@keyframes home-report-chart-in {
  0%, 38% {
    opacity: 0;
    translate: 0 16px;
  }
  38% {
    animation-timing-function: ease-out;
  }
  48%, 100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes home-report-bar-1 {
  0%, 42% {
    scale: 1 0;
  }
  42% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  52%, 100% {
    scale: 1 1;
  }
}

@keyframes home-report-bar-2 {
  0%, 44% {
    scale: 1 0;
  }
  44% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  54%, 100% {
    scale: 1 1;
  }
}

@keyframes home-report-bar-3 {
  0%, 46% {
    scale: 1 0;
  }
  46% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  56%, 100% {
    scale: 1 1;
  }
}

@keyframes home-report-bar-4 {
  0%, 48% {
    scale: 1 0;
  }
  48% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  58%, 100% {
    scale: 1 1;
  }
}

@keyframes home-report-bar-5 {
  0%, 50% {
    scale: 1 0;
  }
  50% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  60%, 100% {
    scale: 1 1;
  }
}

/* Listening-to-leading article analysis — Figma Site-hero 36:2939 */
.home-hero__layer-slot--lead-demo {
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  container-type: size;
}

.home-lead-demo {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--text);
  transform-origin: center center;
  --home-lead-demo-scale: 1.28;
  scale: min(
    var(--home-lead-demo-scale),
    calc(100cqh / 120cqw),
    calc(100cqw / 100cqw)
  );
}

.home-lead-demo p,
.home-lead-demo h3 {
  margin: 0;
}

.home-lead-demo__article,
.home-lead-demo__journalist,
.home-lead-demo__message {
  position: absolute;
  box-shadow: 0 2.94cqw 4.15cqw rgba(0, 0, 0, 0.06);
}

.home-lead-demo__article {
  z-index: 1;
  top: 50%;
  left: 29.67cqw;
  display: flex;
  flex-direction: column;
  width: 52.9cqw;
  height: 97.33cqw;
  border-radius: 1.38cqw;
  background: var(--color-grey-100);
  overflow: hidden;
  translate: 0 -50%;
}

.home-lead-demo__article-image {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 15.73cqw;
  overflow: hidden;
  background: var(--color-grey-100);
}

.home-lead-demo__article-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-lead-demo__publication-mark {
  position: absolute;
  z-index: 3;
  top: 9.33cqw;
  left: 3.46cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.3cqw;
  height: 8.3cqw;
  border-radius: 1.78cqw;
  overflow: hidden;
  background: var(--text);
  box-shadow: 0 0.59cqw 0.76cqw rgba(15, 14, 12, 0.15);
}

.home-lead-demo__publication-mark img {
  display: block;
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.home-lead-demo__hl-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-lead-demo__mark {
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.home-lead-demo__hl {
  position: absolute;
  width: 0;
  background: #ced0f6;
  opacity: 0;
  transform-origin: left center;
  pointer-events: none;
}

.home-lead-demo__article-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4.15cqw;
  width: 100%;
  min-height: 0;
  padding: 3.46cqw;
  overflow: hidden;
}

.home-lead-demo__article-body header {
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
}

.home-lead-demo__article-body h3,
.home-lead-demo__journalist h3 {
  font-family: var(--font-mono);
  font-size: 2.77cqw;
  font-weight: 500;
  line-height: 1.375;
}

.home-lead-demo__article-body header p {
  font-family: var(--font-body-family);
  font-size: 2.08cqw;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-lead-demo__article-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-body-family);
  font-size: 2.08cqw;
  font-weight: 400;
  line-height: 1.333;
  letter-spacing: 0.02em;
  color: var(--text);
}

.home-lead-demo__article-copy p + p {
  margin-top: 2.08cqw;
}

.home-lead-demo__article::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 9.5cqw;
  background: linear-gradient(
    178deg,
    rgba(246, 246, 245, 0) 7%,
    var(--color-grey-100) 75%
  );
  pointer-events: none;
}

.home-lead-demo__message {
  --transition-rotate: -1deg;

  z-index: 4;
  /* Keep Figma offset from article top while article is vertically centered */
  top: calc(50% - 1.835cqw);
  left: 4cqw;
  display: flex;
  flex-direction: column;
  gap: 2.77cqw;
  width: 37.69cqw;
  padding: 2.77cqw;
  border-radius: 1.38cqw;
  background: var(--color-grey-100);
  visibility: hidden;
  translate: 0 18px;
  scale: 0.96;
  transform: rotate(-1deg);
  will-change: translate, scale, visibility;
}

.home-lead-demo__chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 0.69cqw;
  padding: 0.69cqw 1.38cqw;
  border-radius: 2.77cqw;
  font-family: var(--font-body-family);
  font-size: 1.79cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.home-lead-demo__chip--message {
  background: #bec0ff;
  color: #001f1a;
  font-size: 2.15cqw;
}

.home-lead-demo__chip-icon {
  display: block;
  flex: 0 0 auto;
  width: 2.08cqw;
  height: 2.08cqw;
}

.home-lead-demo__message-copy {
  display: flex;
  flex-direction: column;
  gap: 1.04cqw;
}

.home-lead-demo__message-title {
  font-family: var(--font-mono);
  font-size: 2.08cqw;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.03em;
}

.home-lead-demo__message-meta {
  font-family: var(--font-body-family);
  font-size: 1.73cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-lead-demo__journalist {
  --transition-rotate: 2.38deg;

  z-index: 3;
  top: calc(50% - 37.995cqw);
  /* Anchor to stage right — Figma left (77cqw) + width overruns the stage (~120cqw) */
  left: auto;
  right: 2cqw;
  display: flex;
  flex-direction: column;
  gap: 4.15cqw;
  width: 42.88cqw;
  padding: 2.77cqw;
  border-radius: 1.38cqw;
  background: var(--color-grey-100);
  visibility: hidden;
  translate: 0 18px;
  scale: 0.96;
  transform: rotate(2.38deg);
  will-change: translate, scale, visibility;
}

.home-lead-demo__journalist-body {
  display: flex;
  flex-direction: column;
  gap: 4.15cqw;
  width: 100%;
}

.home-lead-demo__journalist-top {
  display: flex;
  align-items: flex-start;
  gap: 2.08cqw;
}

.home-lead-demo__journalist-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1.04cqw;
}

.home-lead-demo__journalist-copy > p {
  font-family: var(--font-body-family);
  font-size: 1.73cqw;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.home-lead-demo__journalist-top img {
  display: block;
  width: 12.45cqw;
  height: 12.45cqw;
  border-radius: 2.69cqw;
  object-fit: cover;
  background: var(--color-grey-300);
}

.home-lead-demo__chip--fit {
  background: #c7fff6;
  color: #001f1a;
}

.home-lead-demo__journalist-insight {
  font-family: var(--font-mono);
  font-size: 2.08cqw;
  font-weight: 500;
  line-height: 1.333;
  letter-spacing: 0.03em;
}

.home-lead-demo__pitch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 4.84cqw;
  padding: 1.04cqw 1.73cqw;
  border-radius: 1.73cqw;
  background: var(--text);
  color: var(--color-grey-100);
  font-family: var(--font-body-family);
  font-size: 2.08cqw;
  line-height: 1.333;
  letter-spacing: 0.01em;
}

/* Beat 3 timeline — Figma 36:2939 (4s loop). Highlight bars are
   positioned from the marked sentence’s line boxes (see home-hero.js). */
.home-hero[data-demo-era="reporting"] .home-lead-demo__hl--1 {
  animation: home-lead-hl-1 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__hl--2 {
  animation: home-lead-hl-2 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__hl--3 {
  animation: home-lead-hl-3 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__hl--4 {
  animation: home-lead-hl-4 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__hl--5 {
  animation: home-lead-hl-5 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__hl--6 {
  animation: home-lead-hl-6 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__message {
  animation: home-lead-message-in 4s linear infinite both;
}

.home-hero[data-demo-era="reporting"] .home-lead-demo__journalist {
  animation: home-lead-journalist-in 4s linear infinite both;
}

@keyframes home-lead-hl-1 {
  0% {
    opacity: 0;
    width: 0;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  1.25% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  12.5%, 100% {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }
}

@keyframes home-lead-hl-2 {
  0%, 5.5% {
    opacity: 0;
    width: 0;
  }
  5.5% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  6.75% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  18%, 100% {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }
}

@keyframes home-lead-hl-3 {
  0%, 11% {
    opacity: 0;
    width: 0;
  }
  11% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  12.25% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  23.5%, 100% {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }
}

@keyframes home-lead-hl-4 {
  0%, 16.5% {
    opacity: 0;
    width: 0;
  }
  16.5% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  17.75% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  29%, 100% {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }
}

@keyframes home-lead-hl-5 {
  0%, 22% {
    opacity: 0;
    width: 0;
  }
  22% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  23.25% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  34.5%, 100% {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }
}

@keyframes home-lead-hl-6 {
  0%, 27.5% {
    opacity: 0;
    width: 0;
  }
  27.5% {
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  28.75% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  40%, 100% {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }
}

@keyframes home-lead-message-in {
  0%, 32.5% {
    visibility: hidden;
    translate: 0 18px;
    scale: 0.96;
  }
  32.5% {
    visibility: visible;
    animation-timing-function: cubic-bezier(0.22, 1.2, 0.36, 1);
  }
  38%, 100% {
    visibility: visible;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes home-lead-journalist-in {
  0%, 65% {
    visibility: hidden;
    translate: 0 18px;
    scale: 0.96;
  }
  65% {
    visibility: visible;
    animation-timing-function: cubic-bezier(0.22, 1.2, 0.36, 1);
  }
  70.5%, 100% {
    visibility: visible;
    translate: 0 0;
    scale: 1;
  }
}

/* Legacy collage positioning retained for the remaining fallback layers. */
.home-hero__collage--narrative .home-hero__layer-slot--today-bg,
.home-hero__collage--narrative .home-hero__layer-slot--today-tracker,
.home-hero__collage--narrative .home-hero__layer-slot--today-report {
  display: none;
}

.home-hero__collage--reporting .home-hero__layer-slot--today-tracker,
.home-hero__collage--reporting .home-hero__layer-slot--today-key-messages,
.home-hero__collage--reporting .home-hero__layer-slot--today-ideas {
  display: none;
}

/* z-index — Figma 2151:9225 / 1986:3622 */
.home-hero__layer-slot--today-bg {
  z-index: 1;
  left: -59.95%;
  top: 3.3%;
  width: 219.9%;
}

.home-hero__layer-slot--today-tracker {
  z-index: 2;
  left: -8.79%;
  top: 19.14%;
  width: 117.35%;
  filter: drop-shadow(0 4px 16px rgba(15, 14, 12, 0.05));
}

.home-hero__layer-slot--today-ideas {
  z-index: 3;
  left: 70.42%;
  top: -9.72%;
  width: 23.86%;
}

.home-hero__layer-slot--today-key-messages {
  z-index: 4;
  left: -8.9%;
  top: -7.89%;
  width: 62.83%;
}

.home-hero__layer-slot--today-report {
  z-index: 5;
  left: 53.66%;
  top: 73.03%;
  width: 61.78%;
}

.home-hero__layer {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate(
    calc(var(--parallax-x, 0px) + var(--settle-x, 0px)),
    calc(var(--parallax-y, 0px) + var(--settle-y, 0px))
  );
}

.home-hero__transition-layer {
  transform: translate(
      var(--settle-x, 0px),
      var(--settle-y, 0px)
    )
    rotate(var(--transition-rotate, 0deg));
}

.home-hero__copy,
.home-hero__era-copy--mobile {
  transform: translate(var(--settle-x, 0px), var(--settle-y, 0px));
}

.home-hero.is-exiting {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero__collage.is-force-active .home-hero__layer {
    will-change: transform;
  }

  .home-hero__collage.is-settling .home-hero__layer {
    transition: transform var(--home-hero-settle-duration) ease-out;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-question-demo__tracker {
    height: 112.58cqw;
    animation: none;
    translate: 0 2.1cqw;
  }

  .home-question-demo__submit,
  .home-question-demo__step,
  .home-question-demo__chip,
  .home-question-demo__answer,
  .home-question-demo__answer-section,
  .home-question-demo__actions span {
    animation: none;
    opacity: 1;
    scale: 1;
    translate: 0;
  }

  .home-report-demo__folder,
  .home-report-demo__report-reveal,
  .home-report-demo__status,
  .home-report-demo__section,
  .home-report-demo__chooser,
  .home-report-demo__chooser-list,
  .home-report-demo__chart,
  .home-report-demo__bar {
    animation: none !important;
  }

  .home-report-demo__report-reveal {
    grid-template-rows: 1fr;
  }

  .home-report-demo__section,
  .home-report-demo__chooser,
  .home-report-demo__chart {
    opacity: 1;
    translate: 0 0;
  }

  .home-report-demo__chooser-list {
    translate: 0 0;
  }

  .home-report-demo__bar {
    scale: 1 1;
  }

  .home-lead-demo__hl,
  .home-lead-demo__message,
  .home-lead-demo__journalist {
    animation: none !important;
  }

  .home-lead-demo__hl {
    opacity: 1;
    width: var(--home-lead-hl-w);
  }

  .home-lead-demo__message,
  .home-lead-demo__journalist {
    visibility: visible;
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 47.99rem) {
  .home-report-demo__report-reveal {
    grid-template-rows: 1fr;
  }

  .home-question-demo__tracker {
    translate: 0 0;
  }
}

.home-hero__era-copy--mobile {
  display: none;
}

.home-hero__beat-copy {
  display: none;
}

.home-hero__beat-stage {
  position: relative;
  width: 100%;
  height: var(--home-hero-stage-h);
}

/* Transparent on desktop; becomes the scale viewport on mobile */
.home-hero__demo-frame {
  display: contents;
}

/*
 * Desktop: scrub in-collage demos from --demo-t (set on each era by
 * home-hero.js). Paused + negative delay seeks the existing keyframes.
 * Play once — loops cannot map 1:1 to a scrollbar. Mobile play-once
 * gating below is unchanged.
 */
@media (min-width: 48rem) {
  .home-hero__era {
    --demo-t: 0;
  }

  .home-hero__era--questions .home-question-demo__tracker,
  .home-hero__era--questions .home-question-demo__step,
  .home-hero__era--questions .home-question-demo__chip,
  .home-hero__era--questions .home-question-demo__answer,
  .home-hero__era--questions .home-question-demo__answer-section,
  .home-hero__era--questions .home-question-demo__actions span,
  .home-hero__era--questions .home-question-demo__submit {
    animation-play-state: paused;
    animation-iteration-count: 1;
    animation-delay: calc(var(--demo-t, 0) * -8s);
  }

  .home-hero__era--narrative .home-report-demo__report-reveal {
    animation: home-report-expand-reveal 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__status {
    animation: home-report-status 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__section--1 {
    animation: home-report-section-1 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__section--2 {
    animation: home-report-section-2 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__section--3 {
    animation: home-report-section-3 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__chooser {
    animation: home-report-chooser-in 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__chooser-list {
    animation: home-report-chooser-scroll 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__chart {
    animation: home-report-chart-in 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__bar--1 {
    animation: home-report-bar-1 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__bar--2 {
    animation: home-report-bar-2 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__bar--3 {
    animation: home-report-bar-3 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__bar--4 {
    animation: home-report-bar-4 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--narrative .home-report-demo__bar--5 {
    animation: home-report-bar-5 6s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -6s);
  }

  .home-hero__era--reporting .home-lead-demo__hl--1 {
    animation: home-lead-hl-1 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__hl--2 {
    animation: home-lead-hl-2 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__hl--3 {
    animation: home-lead-hl-3 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__hl--4 {
    animation: home-lead-hl-4 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__hl--5 {
    animation: home-lead-hl-5 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__hl--6 {
    animation: home-lead-hl-6 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__message {
    animation: home-lead-message-in 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }

  .home-hero__era--reporting .home-lead-demo__journalist {
    animation: home-lead-journalist-in 4s linear both paused;
    animation-delay: calc(var(--demo-t, 0) * -4s);
  }
}

/* Static scroll mobile — Figma 2464:24398 (≤767). Desktop gesture hero unchanged. */
@media (max-width: 47.99rem) {
  .home-hero {
    --home-hero-copy-w: 100%;
    --home-hero-stage-w: 100%;
    --home-hero-demo-w: 100%;
    --home-hero-headline-size: 2.7805625rem; /* ~44.5 */
    --home-hero-headline-line: 1;
    --home-hero-era-gap: 0;
    --home-hero-era-slot-h: auto;
    padding-top: var(--d-10); /* 40 — first beat */
    padding-bottom: var(--d-10); /* 40 — into Trusted */
  }

  .home-hero__pin {
    position: relative;
    top: auto;
    min-height: 0;
    justify-content: flex-start;
    overflow: visible;
  }

  .home-hero__track {
    overflow: visible;
  }

  .home-hero__pin > .container {
    padding-inline: var(--d-4);
    padding-block: 0;
    overflow: visible;
  }

  .home-hero__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 0;
    padding-top: 0;
    overflow: visible;
  }

  /* Desktop synced copy — hidden; each beat has its own */
  .home-hero__copy {
    display: none;
  }

  .home-hero__stage {
    z-index: 3;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-inline: 0;
    overflow: visible;
  }

  .home-hero__era-track {
    display: flex;
    flex-direction: column;
    transform: none !important;
    will-change: auto;
  }

  .home-hero__era {
    display: flex;
    flex-direction: column;
    gap: var(--d-8); /* 32 — copy → stage */
    width: 100%;
    height: auto;
    padding-block: 0; /* avoid 40+40 stacking between beats */
    visibility: visible;
    overflow: visible;
  }

  .home-hero__era + .home-hero__era {
    margin-top: var(--d-10); /* 40 between beats */
  }

  .home-hero__beat-copy {
    display: flex;
    flex-direction: column;
    gap: var(--d-6); /* 24 — Figma hero-text-container */
    width: 100%;
  }

  /*
   * Stages lock Figma aspect ratios (358×379 / 615 / 640) so cards
   * scale uniformly with phone width — not independent flex stretches.
   */
  .home-hero__beat-stage {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .home-hero__era--questions .home-hero__beat-stage {
    aspect-ratio: 358 / 379;
  }

  .home-hero__era--narrative .home-hero__beat-stage {
    aspect-ratio: 358 / 615;
  }

  .home-hero__era--reporting .home-hero__beat-stage {
    aspect-ratio: 358 / 640;
  }

  .home-hero__beat-copy .home-hero__headline {
    white-space: normal;
  }

  .home-hero__beat-copy .home-hero__headline-line:nth-child(1),
  .home-hero__beat-copy .home-hero__headline-line:nth-child(2) {
    transform: none;
  }

  .home-hero__era--questions .home-hero__beat-copy .home-hero__headline-line:nth-child(3),
  .home-hero__era--questions .home-hero__beat-copy .home-hero__headline-line:nth-child(4) {
    padding-left: 0;
    text-align: right;
  }

  .home-hero__era--narrative .home-hero__beat-copy .home-hero__headline-line:nth-child(3),
  .home-hero__era--narrative .home-hero__beat-copy .home-hero__headline-line:nth-child(4) {
    padding-left: 0;
    text-align: right;
  }

  .home-hero__era--reporting .home-hero__beat-copy .home-hero__headline-line:nth-child(3),
  .home-hero__era--reporting .home-hero__beat-copy .home-hero__headline-line:nth-child(4) {
    padding-left: 0;
    text-align: right;
    transform: none;
  }

  .home-hero__beat-copy .home-hero__copy-detail {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--d-6);
    width: 100%;
    margin-top: 0;
  }

  .home-hero__beat-copy .home-hero__copy-illustration {
    flex: 0 0 7.0703125rem; /* ~113 */
    width: 7.0703125rem;
    margin-inline: 0;
  }

  .home-hero__era--reporting .home-hero__beat-copy .home-hero__copy-illustration {
    flex-basis: 5.072rem; /* ~81 */
    width: 5.072rem;
  }

  .home-hero__era--narrative .home-hero__beat-copy .home-hero__copy-illustration {
    flex-basis: 7.41rem; /* ~118.5 */
    width: 7.41rem;
  }

  .home-hero__beat-copy .home-hero__support {
    flex: 1 1 auto;
    order: 0;
    max-width: 13.8125rem;
    width: 100%;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.333;
    letter-spacing: 0.03em;
    text-align: left;
  }

  .home-hero__beat-copy--flip .home-hero__support {
    max-width: none;
    text-align: right;
  }

  .home-hero__beat-stage .home-hero__collage {
    height: 100%;
    overflow: visible;
  }

  /*
   * Beat 1 — tracker ~300×332 centered in 358 stage; answer overlays wider.
   * Slot = tracker width so cqw matches Figma’s 300-wide composition.
   */
  .home-hero__layer-slot--question-demo {
    top: 0;
    left: 50%;
    width: 83.8%; /* 300 / 358 */
    height: 100%;
    transform: translateX(-50%);
    overflow: visible;
  }

  .home-hero__layer-slot--report-demo,
  .home-hero__layer-slot--lead-demo {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .home-question-demo {
    height: 100%;
    min-height: 0;
    overflow: visible;
    border-radius: 1.6cqw;
  }

  .home-question-demo__tracker {
    max-height: none;
    animation-name: home-question-tracker-mobile;
  }

  /* Answer: left 20 / top 160 / ~321 wide relative to 300 tracker */
  .home-question-demo__answer {
    top: 53.33cqw;
    left: -3cqw;
    width: 107cqw;
  }

  /*
   * Beat 2/3 — Figma 2470:24612 / 24844.
   * Stage locks aspect ratio; cards use % of stage so they scale on any phone.
   * (Avoid zoom / transform+cqw — both break on iOS.)
   */
  .home-hero__demo-frame {
    display: block;
    position: absolute;
    inset: 0;
    overflow: visible;
  }

  .home-hero__era--narrative .home-report-demo,
  .home-hero__era--reporting .home-lead-demo {
    position: relative;
    width: 100%;
    height: 100%;
    --home-report-demo-scale: 1;
    --home-lead-demo-scale: 1;
    scale: 1;
  }

  /* Beat 2 — stage 358×615 */
  .home-report-demo__folder {
    top: 0;
    left: 8.101%; /* 29/358 */
    width: 83.799%; /* 300/358 */
    min-height: 78%; /* keep report plane behind chooser + chart */
  }

  .home-report-demo__chooser {
    top: 20.163%; /* 124/615 */
    left: 4.19%; /* 15/358 */
    width: 51.397%; /* 184/358 */
    height: 34.146%; /* 210/615 */
    background: var(--color-grey-100);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }

  .home-report-demo__chart {
    top: 64.39%; /* 396/615 */
    left: 45.251%; /* 162/358 */
    width: 51.955%; /* 186/358 */
    height: 35.61%; /* 219/615 */
  }

  /* Beat 3 — stage 358×640 */
  .home-lead-demo__article {
    top: 0;
    left: 8.101%; /* 29/358 */
    width: 83.799%; /* 300/358 */
    height: 86.25%; /* 552/640 */
    translate: 0 0;
  }

  .home-lead-demo__article-image {
    height: 16.123%; /* 89/552 of article */
  }

  .home-lead-demo__message {
    top: 32.812%; /* 210/640 */
    left: 0.279%; /* 1/358 */
    width: 66.48%; /* 238/358 */
    gap: 4.84cqw; /* 17.3 */
    padding: 4.84cqw;
  }

  .home-lead-demo__chip--message {
    font-size: 3.93cqw; /* 14.07 */
    gap: 1.21cqw;
    padding: 1.21cqw 2.42cqw;
  }

  .home-lead-demo__chip-icon {
    width: 3.63cqw;
    height: 3.63cqw;
  }

  .home-lead-demo__message-copy {
    gap: 1.81cqw;
  }

  .home-lead-demo__message-title {
    font-size: 3.63cqw; /* 13 */
  }

  .home-lead-demo__message-meta {
    font-size: 3.02cqw; /* 10.8 */
  }

  .home-lead-demo__journalist {
    top: 64.688%; /* 414/640 */
    bottom: auto;
    left: 41.62%; /* 149/358 */
    right: auto;
    width: 54.469%; /* 195/358 */
    gap: 5.17cqw; /* 18.5 */
    padding: 3.45cqw; /* 12.3 */
  }

  .home-lead-demo__journalist-body {
    gap: 5.17cqw;
  }

  .home-lead-demo__journalist-top {
    gap: 2.58cqw;
  }

  .home-lead-demo__journalist-copy {
    gap: 1.29cqw;
  }

  .home-lead-demo__chip--fit {
    font-size: 1.66cqw; /* 5.94 */
    padding: 0.86cqw 1.72cqw;
  }

  .home-lead-demo__journalist h3 {
    font-size: 3.45cqw; /* 12.3 */
  }

  .home-lead-demo__journalist-copy > p {
    font-size: 2.15cqw; /* 7.7 */
  }

  .home-lead-demo__journalist-top img {
    width: 15.5cqw; /* 55.5 */
    height: 15.5cqw;
  }

  .home-lead-demo__journalist-insight {
    font-size: 2.58cqw; /* 9.25 */
  }

  .home-lead-demo__pitch {
    font-size: 2.58cqw;
    padding: 1.29cqw 2.15cqw;
    width: 46.51cqw; /* 166.5 */
  }

  /* Report type sizes — Figma 11.765 on 358 canvas */
  .home-report-demo__report {
    padding: 5.48cqw; /* ~19.6 */
    gap: 6.56cqw;
  }

  .home-report-demo__report-header > p,
  .home-report-demo__report-header small {
    font-size: 3.29cqw; /* 11.765 */
  }

  .home-report-demo__status {
    width: 3.29cqw;
    height: 3.29cqw;
  }

  .home-report-demo__section h3 {
    font-size: 3.29cqw;
  }

  .home-report-demo__section p {
    font-size: 3.29cqw;
  }

  .home-report-demo__choice b {
    font-size: 2.8cqw;
  }

  .home-report-demo__choice small {
    font-size: 2.4cqw;
  }

  .home-report-demo__choice-art {
    flex-basis: 9.5cqw;
    width: 9.5cqw;
    height: 9.5cqw;
  }

  .home-report-demo__chart {
    padding: 3.8cqw;
    gap: 4cqw;
  }

  .home-report-demo__chart h3 {
    font-size: 3.5cqw;
  }

  .home-report-demo__chart header p {
    font-size: 2.6cqw;
  }

  .home-lead-demo__article-body h3 {
    font-size: 4.38cqw; /* 15.7 */
  }

  .home-lead-demo__article-body header p,
  .home-lead-demo__article-copy {
    font-size: 3.29cqw; /* 11.765 */
  }

  .home-lead-demo__article-body {
    padding: 5.48cqw;
    gap: 6.56cqw;
  }

  .home-lead-demo__publication-mark {
    top: 14.79cqw; /* 52.9 */
    left: 5.48cqw; /* 19.6 */
    width: 13.15cqw; /* 47 */
    height: 13.15cqw;
  }

  /*
   * Play-once gating: hold frame 0 until .is-demo-playing
   * (IntersectionObserver + delay in home-hero.js).
   */
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__tracker,
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__step,
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__chip,
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__answer,
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__answer-section,
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__actions span,
  .home-hero__era--questions:not(.is-demo-playing) .home-question-demo__submit {
    animation-play-state: paused;
  }

  .home-hero__era--questions.is-demo-playing .home-question-demo__tracker,
  .home-hero__era--questions.is-demo-playing .home-question-demo__step,
  .home-hero__era--questions.is-demo-playing .home-question-demo__chip,
  .home-hero__era--questions.is-demo-playing .home-question-demo__answer,
  .home-hero__era--questions.is-demo-playing .home-question-demo__answer-section,
  .home-hero__era--questions.is-demo-playing .home-question-demo__actions span,
  .home-hero__era--questions.is-demo-playing .home-question-demo__submit {
    animation-play-state: running;
  }

  /* Disable desktop data-demo-era infinite loops on mobile */
  .home-hero[data-demo-era="narrative"] .home-report-demo__report-reveal,
  .home-hero[data-demo-era="narrative"] .home-report-demo__status,
  .home-hero[data-demo-era="narrative"] .home-report-demo__section--1,
  .home-hero[data-demo-era="narrative"] .home-report-demo__section--2,
  .home-hero[data-demo-era="narrative"] .home-report-demo__section--3,
  .home-hero[data-demo-era="narrative"] .home-report-demo__chooser,
  .home-hero[data-demo-era="narrative"] .home-report-demo__chooser-list,
  .home-hero[data-demo-era="narrative"] .home-report-demo__chart,
  .home-hero[data-demo-era="narrative"] .home-report-demo__bar--1,
  .home-hero[data-demo-era="narrative"] .home-report-demo__bar--2,
  .home-hero[data-demo-era="narrative"] .home-report-demo__bar--3,
  .home-hero[data-demo-era="narrative"] .home-report-demo__bar--4,
  .home-hero[data-demo-era="narrative"] .home-report-demo__bar--5,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__hl--1,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__hl--2,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__hl--3,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__hl--4,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__hl--5,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__hl--6,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__message,
  .home-hero[data-demo-era="reporting"] .home-lead-demo__journalist {
    animation: none;
  }

  .home-hero__era--narrative .home-report-demo__report-reveal {
    animation: home-report-expand-reveal 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__status {
    animation: home-report-status 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__section--1 {
    animation: home-report-section-1 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__section--2 {
    animation: home-report-section-2 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__section--3 {
    animation: home-report-section-3 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__chooser {
    animation: home-report-chooser-in 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__chooser-list {
    animation: home-report-chooser-scroll 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__chart {
    animation: home-report-chart-in 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__bar--1 {
    animation: home-report-bar-1 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__bar--2 {
    animation: home-report-bar-2 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__bar--3 {
    animation: home-report-bar-3 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__bar--4 {
    animation: home-report-bar-4 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative .home-report-demo__bar--5 {
    animation: home-report-bar-5 6s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__hl--1 {
    animation: home-lead-hl-1 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__hl--2 {
    animation: home-lead-hl-2 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__hl--3 {
    animation: home-lead-hl-3 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__hl--4 {
    animation: home-lead-hl-4 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__hl--5 {
    animation: home-lead-hl-5 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__hl--6 {
    animation: home-lead-hl-6 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__message {
    animation: home-lead-message-in 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--reporting .home-lead-demo__journalist {
    animation: home-lead-journalist-in 4s linear both;
    animation-play-state: paused;
  }

  .home-hero__era--narrative.is-demo-playing .home-report-demo__report-reveal,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__status,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__section--1,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__section--2,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__section--3,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__chooser,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__chooser-list,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__chart,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__bar--1,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__bar--2,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__bar--3,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__bar--4,
  .home-hero__era--narrative.is-demo-playing .home-report-demo__bar--5,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__hl--1,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__hl--2,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__hl--3,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__hl--4,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__hl--5,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__hl--6,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__message,
  .home-hero__era--reporting.is-demo-playing .home-lead-demo__journalist {
    animation-play-state: running;
  }

  .home-trusted {
    /* hero already ends with 40px; don’t stack another 40/112 */
    padding-block-start: 0;
  }

  .home-hero__layer-slot--today-bg {
    left: 0;
    top: 17.06%;
    width: 99.72%;
  }

  .home-hero__layer-slot--today-tracker {
    left: 5.26%;
    top: 25.32%;
    width: 89.5%;
    filter: drop-shadow(0 2.883px 11.532px rgba(15, 14, 12, 0.05));
  }

  .home-hero__layer-slot--today-ideas {
    left: 68.42%;
    top: 2.39%;
    width: 25.76%;
  }

  .home-hero__layer-slot--today-key-messages {
    left: 11.36%;
    top: 5.69%;
    width: 48.22%;
  }

  .home-hero__layer-slot--today-report {
    left: 40.72%;
    top: 63.85%;
    width: 46.8%;
  }
}

/*
 * Desktop 2-col bands (decisions A–F + stack≤767):
 * - ≤767: stack (above)
 * - 768–1147: 1024 artboard proportions (equal cols, gap 40, cap 476; fluid below 1024)
 * - 1148–1271: copy 600, gap 40, stage+type scale together 476→600 / 59→64
 * - 1272–1299: copy 600, stage 600, gap eases with spare (still pad 16)
 * - ≥1300: same shell gutter as 3-up (--d-10); 1300 column; gap up to 100 → 1440 lock
 */

/* 1024 artboard proportions — Figma 2395:15122 (fluid when viewport < 1024) */
@media (min-width: 48rem) and (max-width: 71.6875rem) {
  .home-hero {
    --home-hero-copy-w: auto;
    --home-hero-stage-w: 100%;
    --home-hero-stage-h: 43.75rem;
    --home-hero-demo-w: min(27.614946365356445rem, 91.833%);
    --home-hero-layout-gap: 2.5rem; /* 40 */
    /* Type tracks column width: 59px at 476, scales down as cols shrink */
    --home-hero-headline-size: clamp(
      2.5rem,
      calc(3.6875rem * ((100vw - 4.5rem) / 2) / 29.75rem),
      3.6875rem
    );
  }

  .home-hero__pin > .container {
    padding-inline: var(--d-4);
  }

  .home-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 29.75rem) minmax(0, 29.75rem);
    gap: var(--home-hero-layout-gap);
    align-items: center;
    justify-content: start;
  }

  .home-hero__copy {
    width: 100%;
    max-width: none;
  }

  .home-hero__stage {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .home-hero__headline {
    white-space: normal;
  }

  .home-hero__headline-line:nth-child(1),
  .home-hero__headline-line:nth-child(2) {
    transform: none;
  }

  .home-hero__headline-line:nth-child(3),
  .home-hero__headline-line:nth-child(4) {
    padding-left: 31.5%; /* 150/476 */
    text-align: left;
  }

  .home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(1),
  .home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(2) {
    transform: none;
  }

  .home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(3),
  .home-hero[data-active-era="reporting"] .home-hero__headline-line:nth-child(4) {
    padding-left: 0;
    text-align: center;
    transform: translateX(12%);
  }

  .home-hero__copy-detail {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero__copy-illustration {
    width: min(11.3125rem, 40%);
    margin-inline: auto;
  }

  .home-hero__support {
    max-width: 18.6875rem;
    font-size: clamp(0.75rem, 1.4cqw + 0.5rem, 1rem);
  }
}

/*
 * Fit OK (A): copy stays 600. D: gap holds at 40 while stage climbs to 600.
 * E: type + stage same rate (59→64 with 476→600) over 1148–1272.
 */
@media (min-width: 71.75rem) and (max-width: 79.4375rem) {
  .home-hero {
    --home-hero-copy-w: 37.5rem; /* 600 */
    --home-hero-stage-w: 100%;
    --home-hero-stage-h: 43.75rem;
    --home-hero-stage-max: 37.5rem;
    --home-hero-demo-w: min(34.4375rem, 91.833%);
    --home-hero-layout-gap: 2.5rem; /* 40 — hold until stage hits 600 */
    /* 1148→1272 (7.75rem): 3.6875→4rem */
    --home-hero-headline-size: clamp(
      3.6875rem,
      calc(3.6875rem + 0.3125rem * (100vw - 71.75rem) / 7.75rem),
      4rem
    );
    --home-hero-headline-indent: clamp(
      31.5%,
      calc(31.5% + 9% * (100vw - 71.75rem) / 7.75rem),
      40.5%
    );
  }

  .home-hero__pin > .container {
    padding-inline: var(--d-4);
  }

  .home-hero__layout {
    grid-template-columns: var(--home-hero-copy-w) minmax(0, 1fr);
  }

  .home-hero__stage {
    width: 100%;
    max-width: var(--home-hero-stage-max);
    justify-self: start;
  }

  .home-hero__headline-line:nth-child(3),
  .home-hero__headline-line:nth-child(4) {
    padding-left: var(--home-hero-headline-indent);
  }

  .home-hero__copy-illustration {
    width: 11.3125rem;
  }
}

/* Stage at 600; gap may grow with spare space (pad still 16) */
@media (min-width: 79.5rem) and (max-width: 81.1875rem) {
  .home-hero {
    --home-hero-copy-w: 37.5rem;
    --home-hero-stage-w: 37.5rem;
    --home-hero-stage-h: 43.75rem;
    --home-hero-demo-w: 34.4375rem;
    --home-hero-headline-size: 4rem;
  }

  .home-hero__pin > .container {
    padding-inline: var(--d-4);
  }

  .home-hero__layout {
    grid-template-columns: 37.5rem 37.5rem;
    /* D: gap 40→100 from leftover after 600+600 */
    gap: clamp(2.5rem, calc(100% - 75rem), 6.25rem);
  }

  .home-hero__headline-line:nth-child(3),
  .home-hero__headline-line:nth-child(4) {
    padding-left: 40.5%;
  }

  .home-hero__copy-illustration {
    width: 11.3125rem;
  }
}

/* F: 1300 column with the same shell gutter as 3-up / trusted (--d-10) */
@media (min-width: 81.25rem) {
  .home-hero {
    --home-hero-copy-w: 37.5rem;
    --home-hero-stage-w: 37.5rem;
    --home-hero-stage-h: 43.75rem;
    --home-hero-demo-w: 34.4375rem;
    --home-hero-layout-gap: 6.25rem;
    --home-hero-headline-size: 4rem;
    padding-inline: var(--d-10);
  }

  .home-hero__pin > .container {
    padding-inline: 0;
  }

  .home-hero__layout {
    grid-template-columns: minmax(0, var(--home-hero-copy-w)) minmax(0, var(--home-hero-stage-w));
    gap: clamp(2.5rem, calc(100% - 75rem), 6.25rem);
  }

  .home-hero__stage {
    width: 100%;
    max-width: var(--home-hero-stage-w);
    min-width: 0;
  }

  .home-hero__headline-line:nth-child(3),
  .home-hero__headline-line:nth-child(4) {
    padding-left: 40.5%;
  }
}

/* Trusted by — Figma 1612:59955 (desktop), 1612:60247 (mobile) */

.home-trusted {
  padding-block-start: var(--space-home-trusted-top);
  padding-block-end: var(--space-home-trusted-bottom);
  padding-inline: var(--d-4);
  background: var(--surface);
}

.home-trusted .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.home-trusted__logos--desktop {
  display: none;
}

.home-trusted__logos--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.home-trusted__row {
  display: flex;
  align-items: stretch;
  gap: var(--d-2);
  min-height: 3.75rem;
}

.home-trusted__cell {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.home-trusted__logo {
  display: block;
  width: var(--d-16);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
}

.home-trusted__logo[src*="salesforce"],
.home-trusted__logo[src*="elastic"] {
  filter: none;
}

.home-trusted__logo--sm {
  width: var(--d-10);
}

@media (min-width: 56.25rem) {
  .home-trusted {
    padding-inline: var(--d-10);
  }

  .home-trusted__logos--desktop {
    display: block;
  }

  .home-trusted__logos--mobile {
    display: none;
  }

  .home-trusted__row {
    min-height: 7.9375rem;
  }

  .home-trusted__logo {
    width: 6rem;
  }

  .home-trusted__logo--sm {
    width: 4rem;
  }
}

/* Quote — Figma 2764:14211 (desktop), 2764:14282 (tablet), 2764:14352 (mobile) */

.home-quote {
  padding: 0 var(--d-3) var(--d-3);
  background: var(--surface);
}

.home-quote__panel {
  width: 100%;
  padding: calc(var(--d-20) + var(--d-5)) var(--d-8);
  border-radius: var(--radius-lg);
  background: url("/images/grainy-background-01.png") center / cover no-repeat;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
}

.home-quote__inner {
  display: flex;
  flex-direction: column;
  gap: var(--d-14);
  align-items: center;
  margin-block: 0;
  margin-inline: auto;
}

.home-quote__copy {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
  min-width: 0;
  margin: 0;
  text-align: center;
}

.home-quote__lede,
.home-quote__body {
  margin: 0;
}

.home-quote__body {
  color: var(--color-grey-600);
}

.home-quote__attribution {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: var(--d-4);
  align-items: center;
}

.home-quote__portrait {
  display: block;
  width: 10rem;
  height: 10rem;
}

.home-quote__attribution-text {
  display: flex;
  flex-direction: column;
  gap: var(--d-0_5);
  align-items: center;
  text-align: center;
}

.home-quote__name,
.home-quote__role {
  margin: 0;
}

.home-quote__role {
  color: var(--color-grey-600);
}

@media (min-width: 40rem) {
  .home-quote__panel {
    padding: 12.25rem var(--d-8);
  }

  .home-quote__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .home-quote__copy {
    flex: 1 1 0;
    text-align: start;
  }
}

@media (min-width: 64rem) {
  .home-quote__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--d-20);
  }

  .home-quote__attribution {
    order: -1;
    align-items: flex-start;
  }

  .home-quote__copy {
    flex: 0 0 37.5rem;
    width: 37.5rem;
    text-align: center;
  }

  .home-quote__lede.h2--mono {
    font-size: var(--font-h1-mono-size);
    line-height: var(--font-h1-mono-line);
    letter-spacing: var(--font-h1-mono-tracking);
  }

  .home-quote__portrait {
    width: 12.5rem;
    height: 12.5rem;
  }
}

/* 3-up — Figma 1624:67968 (desktop), 1624:68088 (mobile) */

.home-three-up {
  padding-block-start: var(--space-home-three-up-top);
  padding-block-end: var(--space-home-three-up-bottom);
  padding-inline: var(--d-4);
  background: var(--surface);
}

.home-three-up .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

@media (min-width: 40rem) {
  .home-three-up .block-header {
    gap: var(--d-10);
  }
}

.home-three-up__grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--d-6);
}

.home-three-up__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--d-14);
  min-width: 0;
}

.home-three-up__illustration {
  display: block;
  flex-shrink: 0;
  order: 2;
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.home-three-up__copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 9px;
  order: 1;
  min-width: 0;
}

.home-three-up__label {
  margin: 0;
  color: var(--text-muted);
}

.home-three-up__text {
  margin: 0;
  font-family: var(--font-h4-mono-family);
  font-size: var(--font-h4-mono-size);
  font-weight: var(--font-h4-mono-weight);
  line-height: var(--font-h4-mono-line);
  letter-spacing: var(--font-h4-mono-tracking);
  color: var(--text);
}

.home-three-up__divider--horizontal {
  display: block;
}

.home-three-up__divider-col {
  display: none;
}

@media (min-width: 56.25rem) {
  .home-three-up {
    padding-inline: var(--d-10);
  }

  .home-three-up .container {
    gap: var(--d-10);
  }

  .home-three-up .block-header {
    gap: 0;
  }

  .home-three-up__grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
  }

  .home-three-up__item {
    flex: 0 0 18.75rem;
    flex-direction: column;
    gap: var(--d-4);
  }

  .home-three-up__illustration {
    order: 0;
    width: 7.5rem;
    height: 7.5rem;
  }

  .home-three-up__copy {
    order: 0;
    flex: none;
  }

  .home-three-up__text {
    font-family: var(--font-body-mono-family);
    font-size: var(--font-body-mono-size);
    font-weight: var(--font-body-mono-weight);
    line-height: var(--font-body-mono-line);
    letter-spacing: var(--font-body-mono-tracking);
  }

  .home-three-up__divider--horizontal {
    display: none;
  }

  .home-three-up__divider-col {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    justify-content: center;
    min-width: 0;
  }

  .home-three-up__divider-col .dotted-divider--vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--divider-stroke-width, 1.2px);
    min-width: var(--divider-stroke-width, 1.2px);
    height: auto;
    transform: translateX(-50%);
  }
}

/* Features — Figma 1610:59575 (desktop), 2149:8765 (mobile) */

.home-features {
  padding-block: var(--d-20);
  padding-inline: var(--d-3);
  background: var(--surface);
}

.home-features .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
}

@media (min-width: 40rem) {
  .home-features .block-header {
    gap: var(--d-10);
  }
}

.home-features__list {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-features__row {
  display: flex;
  gap: var(--d-6);
  align-items: flex-start;
  min-width: 0;
}

.home-features__row--copy-right {
  flex-direction: row;
}

.home-features__description {
  display: flex;
  flex: 0 0 18.75rem;
  flex-direction: column;
  gap: var(--d-2);
  padding-block: var(--d-8);
  min-width: 0;
}

.home-features__label,
.home-features__body {
  margin: 0;
}

.home-features__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 35.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-grey-300);
  overflow: hidden;
}

.home-features__media--connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-6);
  background-color: var(--color-grey-300);
}

.home-features__media--connector::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-05.png") center / cover no-repeat;
  pointer-events: none;
}

.home-features__media--ai {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.home-features__media--ai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-02.png") center / cover no-repeat;
  pointer-events: none;
}

/* AI chat + key-messages — Figma 2416:20828 (stage 686 × 400) */
.home-features__ai {
  position: relative;
  z-index: 1;
  width: min(100%, 42.875rem); /* 686 */
  aspect-ratio: 686 / 400;
  flex-shrink: 0;
}

.home-features__ai-chat {
  position: absolute;
  left: 0;
  top: 0;
  width: 67.64%; /* 464 / 686 */
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
  /* Figma chat: 0 / 2.643 / blur 32 / #000 @ 12% */
  filter: drop-shadow(0 0.165rem 2rem rgba(0, 0, 0, 0.12));
}

.home-features__ai-keys {
  position: absolute;
  z-index: 2;
  left: 57.87%; /* 397 / 686 */
  top: 21.75%; /* 87 / 400 */
  width: 42.13%; /* 289 / 686 */
  height: auto;
  display: block;
  object-fit: contain;
  /* Figma key-messages: 0 / 2.643 / blur 16 / #000 @ 12% */
  filter: drop-shadow(0 0.165rem 1rem rgba(0, 0, 0, 0.12));
}

.home-features__media--report {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.home-features__media--report::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-03.png") center / cover no-repeat;
  pointer-events: none;
}

/* Report podcast stack — Figma 2416:20837 (stage 535 × 423) */
.home-features__report {
  position: relative;
  z-index: 1;
  width: min(100%, 33.4375rem); /* 535 */
  aspect-ratio: 535 / 423;
  flex-shrink: 0;
}

.home-features__report-transcript {
  position: absolute;
  left: 0;
  top: 7.33%; /* 31 / 423 */
  width: 54.02%; /* 289 / 535 */
  height: auto;
  display: block;
  object-fit: contain;
  /* Figma transcript: 0 / 2.643 / blur 32 / #000 @ 12% */
  filter: drop-shadow(0 0.165rem 2rem rgba(0, 0, 0, 0.12));
}

.home-features__report-card {
  position: absolute;
  z-index: 2;
  left: 43.93%; /* 235 / 535 */
  top: 0;
  width: 56.07%; /* 300 / 535 */
  height: auto;
  display: block;
  object-fit: contain;
  /* Figma podcast-card: 0 / 4 / blur 20 / #000 @ 15% */
  filter: drop-shadow(0 0.25rem 1.25rem rgba(0, 0, 0, 0.15));
}

/* Trackers marquee — Figma 2416:20826 */
.home-features__media--trackers {
  display: flex;
  align-items: center;
  background-color: var(--color-grey-300);
}

.home-features__media--trackers::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-01.png") center / cover no-repeat;
  pointer-events: none;
}

.home-features__trackers {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}

.home-features__trackers-track {
  display: flex;
  align-items: center;
  gap: var(--d-4); /* 16 */
  width: max-content;
  padding-block: var(--d-12); /* room for 4px / 40px blur shadow */
  animation: home-features-trackers-scroll 55s linear infinite;
}

.home-features__trackers-card {
  display: block;
  width: 18.75rem; /* 300 — Figma card size */
  height: auto;
  aspect-ratio: 1;
  flex-shrink: 0;
  object-fit: contain;
  /* Match asset corner (~34px @ 600) so box-shadow follows the round */
  border-radius: 5.6667%;
  /* Figma: 0 / 4 / blur 40 / spread 0 / #000 @ 15% — box-shadow avoids filter rim */
  box-shadow: 0 0.25rem 2.5rem rgba(0, 0, 0, 0.15);
}

@keyframes home-features-trackers-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-features__trackers-track {
    animation: none;
  }
}

/* Connector illustration — Figma 2416:20839 (design stage 642 × 420) */
.home-features__connector {
  --connector-em: 3.523cqi; /* 22.615 / 642 — resolves on descendants */
  position: relative;
  z-index: 1;
  /* ~87% of Figma 642 stage — denser match to other feature media */
  width: min(100%, 35rem);
  aspect-ratio: 642 / 420;
  flex-shrink: 0;
  container-type: inline-size;
  container-name: connector;
}

.home-features__connector-chat {
  position: absolute;
  left: 0;
  top: 0;
  width: 74.95%;
  height: 74.77%;
  display: flex;
  flex-direction: column;
  padding: 5.4% 7% 5.4% 6.5%;
  background: var(--color-grey-200);
  border-radius: 0.816em;
  box-shadow: 0 0.051em 3.827em rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-size: var(--connector-em);
}

.home-features__connector-logos {
  display: flex;
  align-items: center;
  gap: 0.575em;
  flex-shrink: 0;
}

.home-features__connector-logo {
  display: block;
  width: 1.193em;
  height: 1.193em;
  object-fit: cover;
}

.home-features__connector-prompt {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding-top: 8%;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-grey-800);
}

.home-features__connector-prompt [data-connector-typewriter] {
  white-space: pre-wrap;
}

.home-features__connector-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875em;
  height: 1.875em;
  margin-top: auto;
  flex-shrink: 0;
  background: var(--color-grey-300);
  border-radius: 0.5em;
}

.home-features__connector-plus img {
  display: block;
  width: 1em;
  height: 1em;
}

/* Secondary dropdown — Figma 2417:21142 (319.43 × 231.80) */
.home-features__connector-panel {
  --panel-pad-x: 7.081%; /* 22.62 / 319.43 */
  position: absolute;
  left: 50.23%;
  top: 44.74%;
  width: 49.77%;
  height: 55.26%;
  background: var(--color-grey-200);
  border-radius: 5.78%; /* 18.461 / 319.43 */
  box-shadow: 0 0.288rem 3.337rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 2;
  container-type: inline-size;
  container-name: connector-panel;
}

.home-features__connector-panel-header {
  position: absolute;
  left: var(--panel-pad-x);
  right: var(--panel-pad-x);
  top: 9.146%; /* 21.2 / 231.8 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  height: 12.51%; /* 29 / 231.8 */
  font-size: 7.081cqi; /* 22.615 / 319.43 */
}

.home-features__connector-panel-brand {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 11.307 / 22.615 */
  min-width: 0;
}

.home-features__connector-panel-mark {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.home-features__connector-panel-name {
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-grey-800);
  white-space: nowrap;
}

.home-features__connector-toggle {
  position: relative;
  width: 2.25em; /* 50.883 / 22.615 */
  height: 1.125em; /* 25.442 / 22.615 */
  flex-shrink: 0;
  background: #007aff;
  border-radius: 999px;
}

.home-features__connector-toggle::after {
  content: "";
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  width: 0.925em;
  height: 0.925em;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.home-features__connector-panel-divider {
  position: absolute;
  left: var(--panel-pad-x);
  right: var(--panel-pad-x);
  top: 29.267%; /* 67.84 / 231.8 */
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1.5px solid rgba(182, 177, 169, 0.45);
}

.home-features__connector-panel-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-features__connector-panel-row {
  position: absolute;
  left: var(--panel-pad-x);
  right: var(--panel-pad-x);
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 12.51%; /* 29 / 231.8 */
  font-family: var(--font-sans);
  font-size: 7.081cqi; /* 22.615 / 319.43 */
  font-weight: 400;
  line-height: 1.25;
  color: #b6b1a9;
  white-space: nowrap;
}

.home-features__connector-panel-row:nth-child(1) {
  top: 38.413%; /* 89.04 / 231.8 */
}

.home-features__connector-panel-row:nth-child(2) {
  top: 58.536%; /* 135.69 / 231.8 */
}

.home-features__connector-panel-row:nth-child(3) {
  top: 78.658%; /* 182.33 / 231.8 */
}

.home-features__connector-panel-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  object-fit: contain;
}

.home-features__connector-panel-caret {
  width: 0.5em !important;
  height: 0.29em !important;
  margin-left: auto;
  transform: rotate(90deg);
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 40rem) {
  .home-features {
    padding-inline: var(--d-3);
  }

  .home-features__list {
    gap: var(--d-12);
  }

  .home-features__row,
  .home-features__row--copy-right {
    flex-direction: column;
    align-items: stretch;
    gap: var(--d-4);
  }

  .home-features__row--copy-right .home-features__description {
    order: 1;
  }

  .home-features__row--copy-right .home-features__media {
    order: 2;
  }

  .home-features__description {
    flex: none;
    width: 100%;
    padding-block: 0;
  }

  .home-features__media {
    flex: none;
    width: 100%;
    height: 25rem;
  }

  .home-features__media--connector {
    height: 22.9375rem;
  }

  .home-features__media--ai {
    padding: var(--d-3);
  }

  .home-features__media--report {
    padding: var(--d-3);
  }

  .home-features__trackers-card {
    width: 14rem;
    height: auto;
  }

  .home-features__trackers-track {
    gap: var(--d-4);
    padding-block: var(--d-10);
    animation-duration: 35s;
  }
}

@media (min-width: 56.25rem) {
  .home-features .block-header {
    gap: 0;
  }
}

/* Compare — Figma 1773:13797 (desktop), 1776:14921 (tablet), 1773:14092 (mobile) */

.home-compare {
  padding: var(--d-3);
  background: var(--color-grey-200);
}

.home-compare__card {
  width: 100%;
  padding-block: var(--d-20);
  padding-inline: var(--d-4);
  background: var(--color-grey-300);
  border-radius: var(--radius-lg);
}

.home-compare__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-10);
}

.home-compare__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-4);
  width: 100%;
}

.home-compare__eyebrow {
  margin: 0;
  text-align: center;
}

.home-compare__title {
  margin: 0;
}

.home-compare__prompt {
  margin: 0;
}

.home-compare__prompt--desktop {
  display: none;
}

.home-compare__prompt--mobile {
  max-width: 9.8125rem;
  text-align: center;
}

.home-compare__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-4);
}

.home-compare__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--d-2);
  width: 100%;
  max-width: 17.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-compare__buttons .btn {
  font-family: var(--font-meta-mono-family);
  font-size: var(--font-meta-mono-size);
  font-weight: var(--font-meta-mono-weight);
  line-height: var(--font-meta-mono-line);
  letter-spacing: var(--font-meta-mono-tracking);
}

@media (max-width: 39.99rem) {
  .home-compare__title {
    font-size: var(--font-display-s-size-mobile);
    line-height: calc(var(--font-display-s-line-mobile) / var(--font-display-s-size-mobile));
    letter-spacing: var(--font-display-s-tracking-mobile);
    text-align: center;
  }

  .home-compare__title .display--illustrated-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }

  .home-compare__title .display--illustrated-mobile .display__line--with-art {
    --display-art-gap: var(--d-1);
    align-items: center;
    justify-content: center;
  }

  .home-compare__title .display--illustrated-mobile .display__line:not(.display__line--with-art) {
    flex: 0 0 100%;
    text-align: center;
  }

  .home-compare__title .display--illustrated-mobile .display__art-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 3rem;
  }

  .home-compare__title .display--illustrated-mobile .display__art {
    height: 3rem;
  }
}

@media (min-width: 40rem) {
  .home-compare__card {
    padding-inline: var(--d-8);
  }

  .home-compare__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-12);
  }

  .home-compare__header {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
  }

  .home-compare__eyebrow {
    text-align: left;
  }

  .home-compare__prompt--mobile {
    display: none;
  }

  .home-compare__prompt--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--d-2);
    flex-shrink: 0;
    width: 9.8125rem;
  }

  .home-compare__prompt-text {
    margin: 0;
    text-align: center;
  }

  .home-compare__arrow {
    display: block;
    width: 3.0625rem;
    height: auto;
    margin-inline-start: auto;
  }

  .home-compare__aside {
    flex-direction: row;
    align-items: flex-end;
    flex-shrink: 0;
    gap: var(--d-2);
  }

  .home-compare__buttons {
    justify-content: flex-end;
  }

  .home-compare__buttons .btn {
    font-family: var(--font-h4-family);
    font-size: var(--font-h4-size);
    font-weight: var(--font-h4-weight);
    line-height: var(--font-h4-line);
    letter-spacing: var(--font-h4-tracking);
  }

  .home-compare__title .display--illustrated-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
  }

  .home-compare__title .display--illustrated-desktop .display__line {
    flex-shrink: 0;
  }

  .home-compare__title .display--illustrated-desktop .display__line--with-art {
    --display-art-gap: 0;
    align-items: center;
  }

  .home-compare__title .display--illustrated-desktop .display__art-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 1lh;
    padding-inline: var(--d-4);
  }

  .home-compare__title .display--illustrated-desktop .display__art {
    height: 4.5rem;
  }
}

@media (min-width: 56.25rem) {
  .home-compare__card {
    padding-inline: var(--d-10);
  }

  .home-compare__buttons {
    max-width: 18.75rem;
  }
}

/* Use cases — Figma 1447:12007 */

.home-use-cases {
  padding-block: var(--d-20);
  padding-inline: var(--d-4);
  background: var(--surface);
}

.home-use-cases .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-8);
}

.home-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--d-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-use-cases__card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--d-6);
  min-height: 26.25rem;
  padding: var(--d-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.home-use-cases__card--yellow {
  background: var(--surface-card-yellow);
}

.home-use-cases__card--neutral {
  background: var(--color-grey-300);
}

.home-use-cases__card--blue {
  background: var(--surface-card-blue);
}

.home-use-cases__header {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
}

.home-use-cases__label {
  margin: 0;
  color: var(--text);
}

.home-use-cases__title {
  margin: 0;
}

.home-use-cases__features {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--d-3);
}

.home-use-cases__feature {
  display: flex;
  align-items: center;
  gap: var(--d-2);
  padding-inline: var(--d-1);
}

.home-use-cases__feature-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.home-use-cases__check {
  flex-shrink: 0;
}

@media (min-width: 40rem) {
  .home-use-cases {
    padding-block: 7.5rem; /* 120 */
  }
}

@media (min-width: 56.25rem) {
  .home-use-cases {
    padding-inline: var(--d-10);
  }
}

@media (max-width: 40rem) {
  .home-use-cases__grid {
    grid-template-columns: 1fr;
  }

  .home-use-cases__card {
    min-height: auto;
  }
}