/**
 * DocuPOW — Home page styles (front-page.php sections only).
 *
 * Scope: everything lives under .page-home (BEM). Global chrome, container,
 * buttons, cards, scroll-reveal and the gradient border come from main.css —
 * this file adds page layout, section skins and Home-specific motion only.
 *
 * Motion contract (transform/opacity/filter only):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if home.js never runs under that preference) content is visible.
 *  - home.js hooks: .is-ready on .page-home__hero (hero entrance);
 *    .is-active / .is-visible show .page-home__pulse rows and fade
 *    [data-home-log] / the chat rows (JS-set inline opacity/transform also
 *    works — the transitions are declared here); .is-glow steps across
 *    [data-home-pill] items in the dark band.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — section rhythm
   ========================================================================= */
.page-home {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* 96px section padding on desktop, 64px under 768 (trust strip is 32px). */
.page-home__hero,
.page-home__era,
.page-home__pipeline,
.page-home__capabilities,
.page-home__flow,
.page-home__meet,
.page-home__cta {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-home__hero,
  .page-home__era,
  .page-home__pipeline,
  .page-home__capabilities,
  .page-home__flow,
  .page-home__meet,
  .page-home__cta {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero
   ========================================================================= */
.page-home__hero .dp-container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.page-home__hero-copy,
.page-home__hero-visual {
  flex: 1 1 0;
  min-width: 0;
}

/* Eyebrow — mono technical label in Royal Indigo. */
.page-home__eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700). */
.page-home__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

/* The title line break only exists from 768 up. */
.page-home__title-break {
  display: none;
}

@media (min-width: 768px) {
  .page-home__title-break {
    display: inline;
  }
}

/* body-lg subhead. */
.page-home__subhead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: var(--space-3);
}

/* CTA pair — 24 + 16 = 40px below the subhead (export space-y-6 + pt-4). */
.page-home__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Visual column — positioning context for the terminal + mascot. */
.page-home__hero-visual {
  position: relative;
  min-height: 400px;
}

@media (min-width: 768px) {
  .page-home__hero-visual {
    min-height: 500px;
  }
}

/* Floating terminal card — the ONE allowed floating-UI shadow. */
.page-home__terminal {
  position: absolute;
  right: 0;
  top: 40px;
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .10); /* floating product-UI exception */
  z-index: 1;
}

/* Title bar. */
.page-home__terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 12px;
  background-color: var(--gray);
  border-bottom: 1px solid var(--border);
}

.page-home__terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: .8;
  flex: none;
}

.page-home__terminal-dot--err {
  background-color: var(--err);
}

.page-home__terminal-dot--warn {
  background-color: var(--warn);
}

.page-home__terminal-dot--ok {
  background-color: var(--ok);
}

.page-home__terminal-name {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  /* Never overflow the card on narrow screens. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Terminal body — skeleton bars, agent pulse, extraction log. */
.page-home__terminal-body {
  padding: var(--space-3);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-home__skeleton {
  height: 16px;
  background-color: var(--border);
  border-radius: 4px;
  width: 75%;
}

.page-home__skeleton--w75 {
  width: 75%;
}

.page-home__skeleton--w50 {
  width: 50%;
}

.page-home__skeleton + .page-home__skeleton {
  width: 50%;
}

/* Agent pulse — hidden until home.js shows it (also used in the S7 chat).
   JS hook: add .is-active (or .is-visible) to display the row. */
.page-home__pulse {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.page-home__pulse.is-active,
.page-home__pulse.is-visible {
  display: flex;
}

.page-home__pulse > * {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--indigo);
  flex: none;
}

/* Extraction log — dashed drop-zone look; fades in after the pulse. */
.page-home__terminal-log {
  height: 96px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* Infinity mascot — shared base (hero peek + S7 render). */
.page-home__infinity {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain; /* keep aspect if a narrow column caps the width */
  /* Obsidian-tint drop shadow — floating imagery exception. */
  filter: drop-shadow(0 12px 24px rgba(28, 28, 40, .18));
}

/* Hero peek: bottom-left, overlapping the terminal card. */
.page-home__infinity--hero {
  position: absolute;
  left: -16px;
  bottom: 0;
  height: 256px;
  z-index: 2;
}

/* <1024: copy stacks above the visual. */
@media (max-width: 1023.98px) {
  .page-home__hero .dp-container {
    flex-direction: column;
    align-items: stretch;
  }

  .page-home__hero-visual {
    width: 100%;
  }
}

/* =========================================================================
   S2 — Trust strip
   ========================================================================= */
.page-home__trust {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
  padding-block: var(--space-4);
}

.page-home__trust .dp-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Infrastructure statement (first child of the strip container). */
.page-home__trust-label,
.page-home__trust .dp-container > :first-child {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-home__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  /* Muted via colour, not opacity: ink at .6 alpha computes to 4.36:1 on
     --gray and fails AA for the 14px labels. --text-muted is 8.70:1. */
}

.page-home__badge,
.page-home__badges > * {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-muted);
}

.page-home__badges svg {
  width: 24px;
  height: 24px;
  flex: none;
}

@media (max-width: 767.98px) {
  .page-home__trust .dp-container {
    flex-direction: column;
    text-align: center;
  }

  .page-home__badges {
    justify-content: center;
  }
}

/* =========================================================================
   S3 — Template era (copy + flow diagram)
   ========================================================================= */
.page-home__era .dp-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
}

.page-home__era h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

.page-home__era p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-home__era p + p {
  margin-top: var(--space-2);
}

/* Diagram card — muted tonal layer, 16/9. */
.page-home__diagram {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PDF -> Agent -> Data row. Children in specced order:
   1 node, 2 arrow, 3 node (agent), 4 arrow, 5 node — the structural
   :nth-child selectors mirror the class hooks so either markup works. */
.page-home__diagram-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  width: 100%;
  max-width: 384px;
}

/* Nodes (odd children). */
.page-home__diagram-node,
.page-home__node,
.page-home__diagram-flow > :nth-child(odd) {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: var(--space-2);
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  min-width: 0;
}

.page-home__diagram-node svg,
.page-home__node svg,
.page-home__diagram-flow > :nth-child(odd) svg {
  width: 24px;
  height: 24px;
  margin-inline: auto;
  margin-bottom: var(--space-1);
}

/* Node icon colours: doc = error red, database = success green. */
.page-home__diagram-node--pdf svg,
.page-home__diagram-flow > :nth-child(1) svg {
  color: var(--err);
}

.page-home__diagram-node--data svg,
.page-home__diagram-flow > :nth-child(5) svg {
  color: var(--ok);
}

/* Agent node — Tech Blue fill, white icon + label. */
.page-home__diagram-node--agent,
.page-home__node--agent,
.page-home__diagram-flow > :nth-child(3) {
  background-color: var(--techblue);
  border-color: var(--techblue);
  color: var(--white);
}

/* Arrows (even children) — muted, gentle opacity pulse. */
.page-home__diagram-arrow,
.page-home__diagram-flow > :nth-child(even) {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  flex: none;
}

.page-home__diagram-flow > :nth-child(even) svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 767.98px) {
  .page-home__era .dp-container {
    grid-template-columns: 1fr;
  }
}

/* Tighten the diagram so three nodes always fit at 320px. */
@media (max-width: 639.98px) {
  .page-home__diagram {
    padding: var(--space-2);
  }

  .page-home__diagram-node,
  .page-home__node,
  .page-home__diagram-flow > :nth-child(odd) {
    padding: var(--space-1);
  }

  .page-home__diagram-arrow,
  .page-home__diagram-flow > :nth-child(even),
  .page-home__diagram-flow > :nth-child(even) svg {
    width: 20px;
    height: 20px;
  }
}

/* =========================================================================
   S4 — Processing pipeline
   ========================================================================= */
.page-home__pipeline {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
  text-align: center;
}

/* headline-md per the export (24/1.3/500) — does not scale down. */
.page-home__pipeline h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--indigo);
  margin-bottom: var(--space-5);
}

.page-home__pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Shared card base (S4 + S5) — hover lifts via the standalone `translate`
   property so it never fights the reveal's `transform`; border + lift only,
   ~180ms, NO added shadow. (Note: the reveal stagger's inline
   transition-delay also delays the first hover on staggered cards — an
   accepted boilerplate trait.) */
.page-home__card,
.page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal] {
  padding: var(--space-4);
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

.page-home__card:hover,
.page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal]:hover {
  translate: 0 -6px;
  border-color: var(--techblue);
}

/* Icon roundel; tints keyed by grid position (content order is fixed). */
.page-home__card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2);
}

.page-home__card-icon svg {
  width: 24px;
  height: 24px;
}

.page-home__card-icon--ingest,
.page-home__pipeline-grid > :nth-child(1) .page-home__card-icon {
  background-color: rgba(43, 118, 210, .12); /* techblue tint */
  color: var(--techblue);
}

.page-home__card-icon--understand,
.page-home__pipeline-grid > :nth-child(2) .page-home__card-icon {
  background-color: rgba(61, 46, 112, .12); /* indigo tint */
  color: var(--indigo);
}

.page-home__card-icon--activate,
.page-home__pipeline-grid > :nth-child(3) .page-home__card-icon {
  background-color: rgba(16, 185, 129, .15); /* success tint */
  color: var(--ok);
}

.page-home__pipeline .page-home__card h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: var(--space-1);
}

.page-home__pipeline .page-home__card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 767.98px) {
  .page-home__pipeline-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   S5 — Core capabilities
   ========================================================================= */
.page-home__capabilities h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  text-align: center;
  margin-bottom: var(--space-5);
}

.page-home__capabilities-grid,
.page-home__capabilities [data-dp-reveal-stagger] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Flat cards per the export — white, hairline border, no shadow. */
.page-home__capabilities .page-home__card,
.page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal] {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  text-align: left;
}

/* 28px Tech-Blue feature icon; scales 1.1 on card hover. */
.page-home__capabilities .page-home__card > svg,
.page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal] > svg {
  width: 28px;
  height: 28px;
  color: var(--techblue);
  margin-bottom: var(--space-2);
  transition: transform .18s ease;
}

.page-home__capabilities .page-home__card:hover > svg,
.page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal]:hover > svg {
  transform: scale(1.1);
}

.page-home__capabilities h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.page-home__capabilities .page-home__card p,
.page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal] p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Mono metric chip. */
.page-home__chip {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  background-color: var(--gray);
  color: var(--text-muted);
  padding: var(--space-1);
  border-radius: 4px;
}

@media (max-width: 767.98px) {
  .page-home__capabilities-grid,
  .page-home__capabilities [data-dp-reveal-stagger] {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   S6 — Dark flow band
   ========================================================================= */
.page-home__flow {
  background-color: var(--obsidian);
  color: var(--white);
  text-align: center;
  border-block: 1px solid rgba(255, 255, 255, .12); /* hairline on obsidian */
}

.page-home__flow h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-3);
}

.page-home__flow p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* Stepper — horizontal pills with chevrons; vertical under 768. */
.page-home__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Works whether the <li> IS the pill or wraps pill + chevron. */
.page-home__steps > li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 0;
}

/* Chevron separators keep their natural icon width — only the five pills
   share the row (per the export). The <768 block overrides all li anyway. */
.page-home__steps > .page-home__step-sep {
  flex: 0 0 auto;
}

/* Flows Library funnel link (user-directed addition) — dark-canvas variant
   of the tertiary pattern: WHITE text (17.21:1 on obsidian; 16px/600
   techblue would be 3.71:1 and fail AA at this size — the spec's own
   fallback), techblue arrow (non-text, 3.71:1 >= 3:1), underline on
   hover/focus. Centered below the step pills; reveals with the section. */
.page-home__flows-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
}

.page-home__flows-link:hover,
.page-home__flows-link:focus-visible {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-home__flows-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--techblue);
}


.page-home__pill {
  flex: 1 1 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  padding: var(--space-2);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .06); /* panel on obsidian */
  border: 1px solid rgba(255, 255, 255, .15); /* hairline on obsidian */
  color: var(--text-muted-dark);
  /* Keep main.css's reveal transition AND add the ambient glow ramp. */
  transition: opacity .6s ease, transform .6s ease, filter .4s ease;
}

/* Active step — white text (not techblue: 3.71:1 on obsidian fails AA);
   glow is a highlight, not elevation. */
.page-home__pill--active {
  border-color: var(--techblue);
  background-color: rgba(43, 118, 210, .10); /* techblue tint */
  font-weight: 700;
  color: var(--white);
  box-shadow: 0 0 15px rgba(43, 118, 210, .30); /* techblue glow */
}

/* Ambient loop — home.js walks .is-glow across [data-home-pill] items. */
.page-home__pill.is-glow {
  filter: brightness(1.25);
}

/* Chevron separators. */
.page-home__steps svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted-dark);
  flex: none;
}

@media (max-width: 767.98px) {
  .page-home__steps {
    flex-direction: column;
    align-items: stretch;
  }

  .page-home__steps > li {
    flex: none;
    flex-direction: column;
    width: 100%;
  }

  .page-home__pill {
    flex: none;
    width: 100%;
  }

  /* Chevrons point down the vertical stepper. */
  .page-home__steps svg {
    transform: rotate(90deg);
    margin-inline: auto;
  }
}

/* =========================================================================
   S7 — Meet Infinity (render + chat panel)
   ========================================================================= */
.page-home__meet .dp-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
}

.page-home__meet .dp-container > * {
  min-width: 0;
}

/* Centered 3D render (block img centers via auto margins). */
.page-home__meet .page-home__infinity {
  height: 320px;
  margin-inline: auto;
}

.page-home__meet h2 {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

.page-home__meet h2 + p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Tertiary deep-dive link (user-directed addition) — mirrors .page-platform__more:
   16/600 techblue (4.54:1 on white, AA), underline on hover/focus, inline arrow. */
.page-home__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
  margin-bottom: var(--space-3);
}

.page-home__more:hover,
.page-home__more:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-home__more svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Chat panel. */
.page-home__chat {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-home__chat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-home__msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.page-home__avatar {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.page-home__avatar svg {
  width: 16px;
  height: 16px;
}

/* Question row avatar — person on techblue tint. */
[data-home-chat-question] .page-home__avatar {
  background-color: rgba(43, 118, 210, .12); /* techblue tint */
  color: var(--techblue);
}

/* Answer row avatar — indigo with the typographic white "dp" mark
   (a white knockout mark asset replaces the text later). */
[data-home-chat-answer] .page-home__avatar {
  background-color: var(--indigo);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

/* Bubbles — speech-pointer corner (top-left 0). */
.page-home__bubble,
.page-home__bubble--q,
.page-home__bubble--a {
  border-radius: 8px;
  border-top-left-radius: 0;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  min-width: 0;
}

.page-home__bubble--q {
  background-color: var(--gray);
  border: 1px solid var(--border);
}

.page-home__bubble--a {
  background-color: var(--white);
  border: 1px solid rgba(43, 118, 210, .30); /* techblue tint */
}

/* Chat "typing" pulse row aligns under the avatar column. */
[data-home-chat-pulse] {
  margin-left: 44px; /* 32px avatar + 12px gap */
}

@media (max-width: 767.98px) {
  .page-home__meet .dp-container {
    grid-template-columns: 1fr; /* render stacks above the chat */
  }
}

/* =========================================================================
   S8 — Final CTA
   ========================================================================= */
.page-home__cta {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Headline-xl scale, like the hero h1. */
.page-home__cta h2 {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: var(--space-4);
}

.page-home__cta .page-home__cta-row {
  justify-content: center;
  margin-top: 0;
}

/* Large button variant. */
.page-home__btn-lg {
  padding: var(--space-2) var(--space-4);
  font-size: 18px;
  line-height: 28px;
}

/* Trial microcopy with inline shield-check. */
.page-home__cta-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.page-home__cta-note svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   Mobile type scale (<768) — 64->44 and 36->28
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-home__title,
  .page-home__cta h2 {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-home__era h2,
  .page-home__capabilities h2,
  .page-home__flow h2,
  .page-home__meet h2 {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* =========================================================================
   Motion — entrance base states, loops (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — home.js adds .is-ready to .page-home__hero on init;
     children rise in with 0/80/160/240ms delays. */
  .page-home__hero .page-home__eyebrow,
  .page-home__hero .page-home__title,
  .page-home__hero .page-home__subhead,
  .page-home__hero .page-home__cta-row {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-home__hero .page-home__title {
    transition-delay: 80ms;
  }

  .page-home__hero .page-home__subhead {
    transition-delay: 160ms;
  }

  .page-home__hero .page-home__cta-row {
    transition-delay: 240ms;
  }

  .page-home__hero.is-ready .page-home__eyebrow,
  .page-home__hero.is-ready .page-home__title,
  .page-home__hero.is-ready .page-home__subhead,
  .page-home__hero.is-ready .page-home__cta-row {
    opacity: 1;
    transform: none;
  }

  /* Terminal — scale-in on .is-ready, then a slow float loop (the .8s
     animation-delay lets the 600ms entrance transition finish first). */
  .page-home__terminal {
    opacity: 0;
    transform: scale(.96);
    transition:
      opacity .6s cubic-bezier(0.16, 1, 0.3, 1),
      transform .6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-home__hero.is-ready .page-home__terminal {
    opacity: 1;
    transform: none;
    animation: dp-home-float 7s ease-in-out .8s infinite;
  }

  /* Extraction log — hidden until home.js fades it in after the pulse
     (class hook below, or JS-set inline opacity). Visible from the start
     under reduced motion because this base state only exists here. */
  .page-home__terminal-log {
    opacity: 0;
    transition: opacity .6s ease;
  }

  /* Pulse dots — staggered opacity loop while the row is shown. */
  .page-home__pulse > * {
    animation: dp-home-dot 1.2s ease-in-out infinite;
  }

  .page-home__pulse > :nth-child(2) {
    animation-delay: .2s;
  }

  .page-home__pulse > :nth-child(3) {
    animation-delay: .4s;
  }

  /* Infinity idle bob — hero peek and S7 render. */
  .page-home__infinity {
    animation: dp-home-bob 5s ease-in-out infinite;
  }

  /* Diagram arrows — soft alternating opacity pulse, offset like the export. */
  .page-home__diagram-arrow,
  .page-home__diagram-flow > :nth-child(even) {
    animation: dp-home-arrow 2s ease-in-out infinite alternate;
  }

  .page-home__diagram-flow > :nth-child(4) {
    animation-delay: .5s;
  }

  /* Chat sequence — question slides in, answer fades in (home.js, once). */
  [data-home-chat-question] {
    opacity: 0;
    transform: translateX(-8px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-home-chat-answer] {
    opacity: 0;
    transition: opacity .6s ease;
  }
}

/* Shown-state class hooks (outside the media query: harmless no-ops when
   reduced motion already forces everything visible). */
.page-home__terminal-log.is-visible,
.page-home__terminal-log.is-active,
[data-home-chat-question].is-visible,
[data-home-chat-question].is-revealed,
[data-home-chat-answer].is-visible,
[data-home-chat-answer].is-revealed {
  opacity: 1;
  transform: none;
}

/* Keyframes (only ever attached inside the no-preference block above). */
@keyframes dp-home-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes dp-home-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes dp-home-dot {
  0%,
  100% {
    opacity: .25;
  }

  50% {
    opacity: 1;
  }
}

@keyframes dp-home-arrow {
  from {
    opacity: .35;
  }

  to {
    opacity: 1;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-home__hero .page-home__eyebrow,
  .page-home__hero .page-home__title,
  .page-home__hero .page-home__subhead,
  .page-home__hero .page-home__cta-row,
  .page-home__terminal,
  .page-home__terminal-log,
  [data-home-chat-question],
  [data-home-chat-answer] {
    opacity: 1;
    transform: none;
  }

  .page-home__terminal,
  .page-home__infinity,
  .page-home__pulse > *,
  .page-home__diagram-arrow,
  .page-home__diagram-flow > :nth-child(even),
  .page-home__pill {
    animation: none;
  }

  .page-home__pill.is-glow {
    filter: none;
  }

  /* The typing/agent pulse is purely decorative — never shown. */
  .page-home__pulse {
    display: none !important;
  }

  /* No hover lift — :hover selectors included so this outweighs the
     (0,2,0)-specificity hover rules; without them cards still jump. */
  .page-home__card,
  .page-home__card:hover,
  .page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal],
  .page-home__capabilities [data-dp-reveal-stagger] > [data-dp-reveal]:hover {
    translate: none;
  }
}