.section-divider {
  position: relative;
  min-height: 4rem;
  background: var(--zl-rail-pattern), var(--zl-paper);
}

/* Full-bleed: offsetting by the page gutter only covered the padding, not the
   auto margins .zl-frame gains once the viewport exceeds --zl-frame-max, so the
   rules stopped short on wide screens. Span the viewport instead. */
.section-divider::before,
.section-divider::after {
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--zl-line);
  content: "";
}

.section-divider::before { top: 0; }
.section-divider::after { bottom: 0; }

.editorial-section {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  min-height: 42rem;
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.editorial-section__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(4rem, 5.2vw, 5.2rem) clamp(1.25rem, 3.4vw, 4rem);
}

.editorial-section__copy h2,
.data-catalog__heading h2,
.capability-section__heading h2,
.use-case-section__heading h2 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.fragment-board {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--zl-line);
  background:
    linear-gradient(var(--zl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--zl-line) 1px, transparent 1px),
    var(--zl-paper);
  background-size: 2.5rem 2.5rem;
}

.problem-lottie-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--zl-line);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 0.9rem,
      var(--zl-line) 0.9rem,
      var(--zl-line) calc(0.9rem + 1px)
    ),
    var(--zl-paper);
}

/* The composition is 1440x532. Sizing the box to that ratio means
   preserveAspectRatio="xMidYMid meet" has nothing to letterbox -- the artwork
   met the box width and was then centred in a taller box, leaving 66px of dead
   space above and below and stopping the art short of the bottom rule. */
.problem-lottie-stage__canvas {
  position: relative;
  margin-inline: var(--problem-rail);
  aspect-ratio: 1440 / 532;
  min-height: 11rem;
  overflow: hidden;
  border-inline: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.problem-lottie {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.problem-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

.problem-lottie text,
.problem-lottie tspan {
  font-family: var(--zl-font-mono) !important;
}

.problem-lottie__connector {
  animation: problem-connector-flow var(--zl-duration-pulse) linear infinite;
  will-change: stroke-dashoffset;
}

@keyframes problem-connector-flow {
  from { stroke-dashoffset: var(--problem-connector-start); }
  to { stroke-dashoffset: calc(var(--problem-connector-start) - 12); }
}

.problem-lottie-stage__fallback {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  margin: 0;
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  line-height: 1.45;
  opacity: 0;
}

.problem-lottie-stage[data-lottie-state="error"] .problem-lottie-stage__fallback {
  opacity: 1;
}

.problem-summary {
  border-top: 1px solid var(--zl-line);
  padding-inline: var(--problem-rail);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 0.9rem,
      var(--zl-line) 0.9rem,
      var(--zl-line) calc(0.9rem + 1px)
    ),
    var(--zl-paper);
}

.problem-summary__content {
  padding: clamp(1.75rem, 2.8vw, 2.75rem) clamp(1.25rem, 3.4vw, 4rem);
  border-inline: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.problem-summary p {
  max-width: 52rem;
  margin: 0;
  color: var(--zl-body);
  font-size: var(--zl-type-summary-size);
  letter-spacing: var(--zl-tracking-summary);
  line-height: var(--zl-leading-summary);
}

.problem-highlight {
  --highlight-accent: var(--zl-cobalt);
  --highlight-wash: var(--zl-cobalt-wash);
  padding-inline: 0.04em;
  background-image:
    linear-gradient(var(--highlight-wash), var(--highlight-wash)),
    linear-gradient(var(--highlight-accent), var(--highlight-accent));
  background-repeat: no-repeat;
  background-position: 0 88%, 0 100%;
  background-size: 0% 42%, 0% 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size var(--zl-duration-highlight) var(--zl-ease-standard);
  transition-delay: calc(var(--highlight-order, 0) * var(--zl-stagger-fast));
}

.problem-highlight--grow {
  --highlight-accent: var(--zl-vermilion);
  --highlight-wash: var(--zl-vermilion-wash);
}

.problem-summary[data-highlight-state="visible"] .problem-highlight {
  background-size: 100% 42%, 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .problem-highlight { transition: none; }
  .solution-highlight { transition: none; }
  .solution-routes path,
  .solution-node,
  .solution-engine__pulse,
  .solution-engine__steps span { animation: none; }
}

.editorial-section--problem {
  /* Capped at 4rem to match .section-divider min-height -- the vertical rail
     should never read heavier than the horizontal separator. */
  --problem-rail: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}

.editorial-section--problem .editorial-section__copy {
  min-height: 0;
  justify-content: center;
  gap: 1.75rem;
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 3.4vw, 4rem);
}

.editorial-section--problem .editorial-section__copy h2 {
  max-width: 24ch;
  font-size: var(--zl-type-section-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-section);
}

.editorial-section--problem .editorial-section__copy .zl-lead {
  max-width: 48rem;
  font-size: var(--zl-type-lead-prominent-size);
  line-height: var(--zl-leading-lead-prominent);
}

.fragment-card {
  position: absolute;
  width: min(42%, 18rem);
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem;
  border: 1px solid var(--zl-line-strong);
  background: var(--zl-surface);
  box-shadow: 0 1rem 3rem var(--zl-ink-a08);
}

.fragment-card span,
.data-catalog__grid article > span,
.capability-grid article > span,
.use-case-grid article > span,
.audience-path__label {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fragment-card strong {
  color: var(--zl-ink);
  font-size: 1.05rem;
}

.fragment-card small {
  color: var(--zl-muted-text);
}

.fragment-card--person { top: 13%; left: 10%; }
.fragment-card--company { top: 36%; right: 8%; }
.fragment-card--signal { right: 28%; bottom: 10%; }

.fragment-board__gap {
  position: absolute;
  top: 44%;
  left: 37%;
  width: 10rem;
  height: 10rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--zl-vermilion);
  border-radius: 50%;
  background: var(--zl-vermilion-wash);
  color: var(--zl-vermilion-text);
  font-family: var(--zl-font-mono);
  font-size: 0.68rem;
  text-align: center;
  text-transform: uppercase;
}

.solution-section {
  /* Same cap as --problem-rail: the vertical rail should never read
     heavier than the horizontal separator (.section-divider, 4rem). */
  --solution-rail: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.solution-section__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: clamp(4rem, 4.6vw, 4.6rem) clamp(1.25rem, 3.4vw, 4rem);
  border-bottom: 1px solid var(--zl-line);
}

.solution-section__heading h2 {
  max-width: 18ch;
  font-size: var(--zl-type-feature-heading-size);
  font-weight: var(--zl-weight-regular);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-feature);
}

.solution-section__heading .zl-lead {
  max-width: 47rem;
}

.solution-stage {
  padding-inline: var(--solution-rail);
  background: var(--zl-rail-pattern), var(--zl-paper);
}

.solution-stage__canvas {
  position: relative;
  min-height: clamp(34rem, 45vw, 43rem);
  overflow: hidden;
  border-inline: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.solution-lottie {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.solution-lottie svg {
  width: 100% !important;
  height: 100% !important;
}

.solution-lottie-stage__fallback {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  margin: 0;
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  line-height: 1.45;
  opacity: 0;
}

.solution-lottie-stage[data-lottie-state="error"] .solution-lottie-stage__fallback {
  opacity: 1;
}

.solution-mobile-readout { display: none; }

.solution-routes {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.solution-routes path {
  fill: none;
  stroke: var(--zl-cobalt);
  stroke-width: 1.35;
  stroke-dasharray: 5 8;
  vector-effect: non-scaling-stroke;
  animation: solution-route-flow var(--zl-duration-pulse) linear infinite;
}

@keyframes solution-route-flow {
  to { stroke-dashoffset: -26; }
}

.solution-flow {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 0.85fr) minmax(20rem, 1.35fr) minmax(10.5rem, 0.78fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 4rem);
}

.solution-flow__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.solution-flow__caption {
  margin-bottom: 0.15rem;
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.solution-node {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 4.75rem;
  padding: 0.75rem;
  border: 1px solid var(--zl-line-strong);
  background: var(--zl-surface);
  box-shadow: 0 0 0 0 var(--zl-cobalt-a00);
  animation: solution-node-receive var(--zl-duration-cycle) var(--zl-ease-signal) infinite;
  animation-delay: calc(var(--node-order) * var(--zl-stagger-medium));
}

.solution-node--output {
  animation-delay: calc(var(--zl-delay-stage) + var(--node-order) * var(--zl-stagger-medium));
}

@keyframes solution-node-receive {
  0%, 10%, 100% { border-color: var(--zl-line-strong); box-shadow: 0 0 0 0 var(--zl-cobalt-a00); transform: translateX(0); }
  4% { border-color: var(--zl-cobalt); box-shadow: 0 0 0 0.3rem var(--zl-cobalt-wash); transform: translateX(0.2rem); }
}

.solution-node__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--zl-line);
  background: var(--zl-cobalt-wash);
  color: var(--zl-cobalt);
}

.solution-node__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.4;
}

.solution-node strong,
.solution-node small {
  display: block;
}

.solution-node strong {
  color: var(--zl-ink);
  font-size: 0.86rem;
  line-height: 1.15;
}

.solution-node small {
  margin-top: 0.28rem;
  color: var(--zl-muted-text);
  font-size: 0.68rem;
  line-height: 1.25;
}

.solution-engine {
  min-width: 0;
  border: 1px solid var(--zl-cobalt);
  background: var(--zl-cobalt);
  color: var(--zl-on-dark);
  box-shadow: 0 1.5rem 4rem var(--zl-cobalt-a15);
}

.solution-engine__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--zl-on-dark-a22);
  font-family: var(--zl-font-mono);
  font-size: 0.74rem;
}

.solution-engine__header small {
  color: var(--zl-on-dark-a64);
  font-size: 0.62rem;
}

.solution-engine__pulse {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--zl-vermilion);
  box-shadow: 0 0 0 0 var(--zl-vermilion-wash);
  animation: solution-pulse var(--zl-duration-pulse-slow) var(--zl-ease-out) infinite;
}

@keyframes solution-pulse {
  70% { box-shadow: 0 0 0 0.55rem var(--zl-vermilion-a00); }
  100% { box-shadow: 0 0 0 0 var(--zl-vermilion-a00); }
}

.solution-engine__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--zl-on-dark-a22);
}

.solution-engine__steps span {
  min-height: 4.6rem;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border-right: 1px solid var(--zl-on-dark-a18);
  color: var(--zl-on-dark-a58);
  font-family: var(--zl-font-mono);
  font-size: 0.61rem;
  line-height: 1.25;
  text-align: center;
  animation: solution-step var(--zl-duration-cycle) var(--zl-ease-standard) infinite;
  animation-delay: calc(var(--zl-duration-pulse) + var(--step-order) * var(--zl-stagger-slow));
}

.solution-engine__steps span:last-child {
  border-right: 0;
}

@keyframes solution-step {
  0%, 9%, 100% { background: transparent; color: var(--zl-on-dark-a58); }
  3%, 6% { background: var(--zl-surface); color: var(--zl-cobalt); }
}

.solution-engine__record {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.solution-engine__record > span {
  color: var(--zl-on-dark-a62);
  font-family: var(--zl-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-engine__record strong {
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.solution-engine__record small {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  font-family: var(--zl-font-mono);
  font-size: 0.68rem;
}

.solution-engine__record i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--zl-vermilion);
}

.solution-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(14rem, 0.65fr);
  gap: 3rem;
  align-items: end;
  padding: clamp(3rem, 3.9vw, 3.9rem) clamp(1.25rem, 3.4vw, 4rem);
  border-top: 1px solid var(--zl-line);
}

.solution-summary p {
  max-width: 50rem;
  color: var(--zl-body);
  font-size: var(--zl-type-summary-secondary-size);
  letter-spacing: var(--zl-tracking-summary);
  line-height: var(--zl-leading-lead-prominent);
}

.solution-highlight {
  --highlight-accent: var(--zl-vermilion);
  --highlight-wash: var(--zl-vermilion-wash);
  padding-inline: 0.04em;
  background-image:
    linear-gradient(var(--highlight-wash), var(--highlight-wash)),
    linear-gradient(var(--highlight-accent), var(--highlight-accent));
  background-repeat: no-repeat;
  background-position: 0 88%, 0 100%;
  background-size: 0% 42%, 0% 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size var(--zl-duration-highlight) var(--zl-ease-standard);
  transition-delay: calc(var(--highlight-order, 0) * var(--zl-stagger-fast));
}

.solution-highlight--outcome {
  --highlight-accent: var(--zl-cobalt);
  --highlight-wash: var(--zl-cobalt-wash);
}

.solution-summary[data-highlight-state="visible"] .solution-highlight {
  background-size: 100% 42%, 100% 1px;
}

.solution-summary .zl-button {
  width: 100%;
}

.solution-proof {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--zl-line);
}

.solution-proof article {
  min-height: 18rem;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border-right: 1px solid var(--zl-line);
}

.solution-proof article:last-child {
  border-right: 0;
}

.solution-proof__icon {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--zl-cobalt);
  background: var(--zl-cobalt-wash);
  color: var(--zl-cobalt);
}

.solution-proof__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.solution-proof h3 {
  margin-top: 3rem;
  color: var(--zl-ink);
  font-size: var(--zl-type-card-heading-size);
  font-weight: var(--zl-weight-semibold);
  letter-spacing: var(--zl-tracking-summary);
  line-height: 1.2;
}

.solution-proof p {
  margin-top: 1rem;
  color: var(--zl-muted-text);
  font-size: var(--zl-type-card-body-size);
  line-height: var(--zl-leading-card);
}

.product-stage {
  padding: clamp(4rem, 5.2vw, 5.2rem) clamp(1.25rem, 3.4vw, 4rem);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-ink);
  color: var(--zl-on-dark);
}

.product-stage__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-bottom: 3rem;
}

.product-stage .zl-eyebrow,
.product-stage h2,
.product-stage p {
  color: var(--zl-on-dark);
}

.product-stage__heading .zl-eyebrow {
  grid-column: 1 / -1;
}

.product-stage__heading h2 {
  max-width: 13ch;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 0.96;
}

.product-stage__heading p {
  max-width: 30rem;
  opacity: 0.64;
}

.product-console {
  min-height: 35rem;
  border: 1px solid var(--zl-on-dark-a25);
  background:
    linear-gradient(var(--zl-on-dark-a06) 1px, transparent 1px),
    linear-gradient(90deg, var(--zl-on-dark-a06) 1px, transparent 1px),
    var(--zl-cobalt-deep);
  background-size: 2.5rem 2.5rem;
}

.product-console__bar {
  display: flex;
  gap: 2rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--zl-on-dark-a18);
  color: var(--zl-on-dark-a66);
  font-family: var(--zl-font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.product-console__body {
  width: min(82%, 58rem);
  margin: 5rem auto;
}

.product-console__query {
  padding: 1.25rem;
  border: 1px solid var(--zl-on-dark-a30);
  background: var(--zl-on-dark-a08);
  color: var(--zl-on-dark);
  font-size: clamp(1rem, 2vw, 1.4rem);
}

.product-console__results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
  border: 1px solid var(--zl-on-dark-a18);
}

.product-console__results > div {
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border-right: 1px solid var(--zl-on-dark-a18);
}

.product-console__results > div:last-child { border-right: 0; }
.product-console__results span { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--zl-vermilion); }
.product-console__results strong { margin-top: auto; color: var(--zl-on-dark); font-weight: 500; }
.product-console__results small { color: var(--zl-on-dark-a54); }

.operating-proof,
.capability-grid,
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.operating-proof article,
.capability-grid article,
.use-case-grid article {
  min-width: 0;
  padding: clamp(2rem, 3vw, 3.25rem);
  border-right: 1px solid var(--zl-line);
}

.operating-proof article:last-child,
.capability-grid article:last-child { border-right: 0; }

.operating-proof article > span {
  color: var(--zl-vermilion-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
}

.operating-proof h3,
.capability-grid h3,
.use-case-grid h3,
.data-catalog__grid h3 {
  margin-top: 3rem;
  font-size: clamp(1.45rem, 2.5vw, 2.25rem);
}

.operating-proof p,
.capability-grid p,
.use-case-grid p,
.data-catalog__grid p {
  margin-top: 1rem;
  color: var(--zl-muted-text);
}

.statement-break {
  min-height: 24rem;
  display: grid;
  place-items: center;
  padding: 2.75rem 1.25rem;
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-paper);
  text-align: center;
}

.statement-break p {
  max-width: 19ch;
  color: var(--zl-ink);
  font-size: clamp(3rem, 7vw, 7rem);
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.audience-section,
.data-catalog,
.capability-section,
.use-case-section,
.faq-section {
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.audience-section__heading,
.data-catalog__heading,
.capability-section__heading,
.use-case-section__heading {
  display: grid;
  gap: 1.5rem;
  padding: clamp(4rem, 5.2vw, 5.2rem) clamp(1.25rem, 3.4vw, 4rem);
  border-bottom: 1px solid var(--zl-line);
}

.audience-section__heading h2 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: 0.96;
}

.audience-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.audience-path {
  min-height: 35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 3.4vw, 4rem);
}

.audience-path + .audience-path { border-left: 1px solid var(--zl-line); }
.audience-path[data-tone="build"] { box-shadow: inset 0 3px var(--zl-cobalt); }
.audience-path[data-tone="grow"] { box-shadow: inset 0 3px var(--zl-vermilion); }
.audience-path[data-tone="build"] .audience-path__label { color: var(--zl-cobalt); }
.audience-path[data-tone="grow"] .audience-path__label { color: var(--zl-vermilion-text); }

.audience-path h3 {
  max-width: 13ch;
  margin-top: 2rem;
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 0.98;
}

.audience-path p { max-width: 37rem; margin-top: 1.5rem; }
.audience-path ul { display: grid; gap: 0.7rem; margin: auto 0 0; padding: 0; list-style: none; }
.audience-path li { display: flex; gap: 0.7rem; align-items: center; }
.audience-path li::before { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; content: ""; }

.data-catalog { background: var(--zl-paper); }
.data-catalog__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.data-catalog__grid article { min-height: 22rem; padding: clamp(2rem, 4vw, 4rem); border-right: 1px solid var(--zl-line); border-bottom: 1px solid var(--zl-line); }
.data-catalog__grid article:nth-child(even) { border-right: 0; }
.data-catalog__grid article:nth-last-child(-n + 2) { border-bottom: 0; }
.data-catalog__grid article:nth-child(1) { background: var(--zl-cobalt-wash); }
.data-catalog__grid article:nth-child(3) { background: var(--zl-vermilion-wash); }

.capability-section { background: var(--zl-surface); }
.capability-grid article { min-height: 23rem; display: flex; flex-direction: column; }
.capability-grid article > span { color: var(--zl-cobalt); }
.capability-grid h3 { margin-top: auto; }

.benchmark-band {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-cobalt);
  color: var(--zl-on-dark);
}

.benchmark-band > div { min-height: 24rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem; padding: clamp(3rem, 5vw, 5rem); }
.benchmark-band > div + div { border-left: 1px solid var(--zl-on-dark-a22); }
.benchmark-band h2, .benchmark-band p, .benchmark-band .zl-eyebrow { color: var(--zl-on-dark); }
.benchmark-band h2 { max-width: 13ch; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.96; }
.benchmark-band__action p { max-width: 30rem; opacity: 0.7; }

.use-case-section { background: var(--zl-paper); }
.use-case-grid { grid-template-columns: repeat(3, 1fr); border-bottom: 0; background: transparent; }
.use-case-grid article { min-height: 22rem; border-bottom: 1px solid var(--zl-line); }
.use-case-grid article:nth-child(3n) { border-right: 0; }
.use-case-grid article:nth-last-child(-n + 3) { border-bottom: 0; }
.use-case-grid article[data-tone="build"] { box-shadow: inset 0 3px var(--zl-cobalt); }
.use-case-grid article[data-tone="grow"] { box-shadow: inset 0 3px var(--zl-vermilion); }
.use-case-grid article[data-tone="build"] > span { color: var(--zl-cobalt); }
.use-case-grid article[data-tone="grow"] > span { color: var(--zl-vermilion-text); }



/* FAQs — heading left, disclosure list right. Native <details> keeps the
   keyboard and screen-reader behaviour; the open transition is the 0fr -> 1fr
   grid-row trick, so no script is needed. */
.faq-section {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  padding: clamp(4rem, 5.2vw, 5.2rem) clamp(1.25rem, 3.4vw, 4rem);
  border-top: 1px solid var(--zl-line);
  background: var(--zl-surface);
}
.faq-section__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.faq-section__heading h2 {
  font-size: var(--zl-type-section-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-heading);
}

.faq-list { border-top: 1px solid var(--zl-line); }
.faq-item { border-bottom: 1px solid var(--zl-line); }

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.15rem, 1.8vw, 1.55rem) 0;
  color: var(--zl-ink);
  font-size: var(--zl-type-card-heading-size);
  line-height: var(--zl-leading-card);
  cursor: pointer;
  list-style: none;
  transition: color 200ms var(--zl-ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--zl-cobalt); }
.faq-item > summary:focus-visible { outline: 2px solid var(--zl-cobalt); outline-offset: .3rem; }

/* plus that becomes a minus */
.faq-item > summary i {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
}
.faq-item > summary i::before,
.faq-item > summary i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 260ms var(--zl-ease-out), opacity 260ms var(--zl-ease-out);
  content: "";
}
.faq-item > summary i::before { width: 1.1rem; height: 1px; transform: translate(-50%, -50%); }
.faq-item > summary i::after { width: 1px; height: 1.1rem; transform: translate(-50%, -50%); }
.faq-item[open] > summary { color: var(--zl-cobalt); }
.faq-item[open] > summary i::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--zl-ease-out);
}
.faq-item[open] .faq-item__body { grid-template-rows: 1fr; }
.faq-item__body > p {
  overflow: hidden;
  max-width: 58ch;
  margin: 0;
  padding-right: 3rem;
  color: var(--zl-body);
  font-size: var(--zl-type-card-body-size);
  line-height: var(--zl-leading-copy);
}
.faq-item[open] .faq-item__body > p { padding-bottom: clamp(1.2rem, 2vw, 1.7rem); }
.faq-item__body a { color: var(--zl-cobalt); text-underline-offset: .2em; }

@media (prefers-reduced-motion: reduce) {
  .faq-item__body { transition: none; }
  .faq-item > summary i::before,
  .faq-item > summary i::after { transition: none; }
}

.final-cta {
  position: relative;
  isolation: isolate;
  min-height: clamp(27rem, 36vw, 32rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(2.5rem, 4vw, 4rem) 1.25rem;
  border-block: 1px solid var(--zl-line);
  background:
    linear-gradient(var(--zl-ink-a05) 1px, transparent 1px),
    linear-gradient(90deg, var(--zl-ink-a05) 1px, transparent 1px),
    var(--zl-surface);
  background-size: 3rem 3rem;
  color: var(--zl-ink);
  text-align: center;
}

.final-cta__content {
  position: relative;
  z-index: 2;
  width: min(100%, 54rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1rem, 2vw, 1.75rem);
  background: var(--zl-surface-a94);
  box-shadow: 0 0 5rem 4rem var(--zl-surface);
}

.final-cta h2 {
  max-width: 17ch;
  color: var(--zl-ink);
  font-size: clamp(3rem, 6vw, 6rem);
  letter-spacing: var(--zl-tracking-heading);
  line-height: 0.94;
}

.final-cta__content > p {
  max-width: 52ch;
  color: var(--zl-body);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}

.final-cta__routes {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.final-cta__route path {
  fill: none;
  stroke: var(--zl-vermilion);
  stroke-width: 1.35;
  stroke-dasharray: 6 8;
  vector-effect: non-scaling-stroke;
  animation: final-cta-route 14s linear infinite;
}

.final-cta__route rect {
  fill: var(--zl-vermilion);
  stroke: var(--zl-surface);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: final-cta-node 2.8s var(--zl-ease-in-out) infinite;
}

.final-cta__route--two path,
.final-cta__route--four path,
.final-cta__route--six path { animation-direction: reverse; }
.final-cta__route--two rect,
.final-cta__route--five rect { animation-delay: -.7s; }
.final-cta__route--three rect,
.final-cta__route--six rect { animation-delay: -1.4s; }
.final-cta__route--four rect { animation-delay: -2.1s; }

.zl-section-divider {
  height: clamp(3.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-rail-pattern), var(--zl-paper);
}

.zl-section-divider--footer {
  border-top: 1px solid var(--zl-line);
  border-bottom: 0;
}

@keyframes final-cta-route {
  to { stroke-dashoffset: -112; }
}

@keyframes final-cta-node {
  0%, 100% { opacity: 0.45; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta__route path,
  .final-cta__route rect { animation: none; }
}

@media (max-width: 64rem) {
  .solution-flow {
    grid-template-columns: minmax(10rem, 0.8fr) minmax(17rem, 1.25fr) minmax(9.5rem, 0.72fr);
    gap: 1.5rem;
    padding: 2rem;
  }
  .solution-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solution-proof article:nth-child(3n) { border-right: 0; }
  .solution-proof article:nth-child(n + 4) { border-top: 1px solid var(--zl-line); }
  .operating-proof,
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .operating-proof article:nth-child(2),
  .capability-grid article:nth-child(2) { border-right: 0; }
  .operating-proof article:nth-child(n + 3),
  .capability-grid article:nth-child(n + 3) { border-top: 1px solid var(--zl-line); }
  .use-case-grid { grid-template-columns: repeat(2, 1fr); }
  .use-case-grid article:nth-child(3n) { border-right: 1px solid var(--zl-line); }
  .use-case-grid article:nth-child(even) { border-right: 0; }
  .use-case-grid article:nth-last-child(-n + 3) { border-bottom: 1px solid var(--zl-line); }
  .use-case-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 52rem) {
  .editorial-section,
  .product-stage__heading,
  .audience-paths,
  .benchmark-band,
  .faq-section { grid-template-columns: 1fr; }
  .editorial-section { min-height: auto; }
  .fragment-board { min-height: 32rem; border-top: 1px solid var(--zl-line); border-left: 0; }
  .solution-section { --solution-rail: 2rem; }
  .solution-stage__canvas { min-height: 28rem; }
  .solution-routes { display: none; }
  .solution-flow {
    position: relative;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem;
  }
  .solution-flow__group--sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-flow__group--delivery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solution-flow__caption { grid-column: 1 / -1; }
  .solution-node { min-height: 4.5rem; }
  .solution-summary { grid-template-columns: 1fr; align-items: start; }
  .editorial-section--problem { --problem-rail: 2rem; }
  .problem-lottie-stage { min-height: 0; }
  .problem-summary__content { padding-block: 1.75rem; }
  .problem-summary p { font-size: 1.3rem; }
  .editorial-section--problem .editorial-section__copy { min-height: auto; }
  .product-stage__heading .zl-eyebrow { grid-column: auto; }
  .audience-path + .audience-path { border-top: 1px solid var(--zl-line); border-left: 0; }
  .audience-path { min-height: 30rem; }
  .benchmark-band > div + div { border-top: 1px solid var(--zl-on-dark-a22); border-left: 0; }
  .benchmark-band > div { min-height: auto; }
  .faq-section { padding-inline: 1.25rem; }
}

@media (max-width: 46rem) {
  .section-divider { min-height: 3rem; }
  .editorial-section--problem { --problem-rail: 0rem; }
  .problem-lottie-stage__canvas,
  .problem-summary__content { border-inline: 0; }
  .editorial-section__copy,
  .audience-section__heading,
  .data-catalog__heading,
  .capability-section__heading,
  .use-case-section__heading { padding: 3.5rem 1.25rem; }
  .editorial-section__copy h2,
  .data-catalog__heading h2,
  .capability-section__heading h2,
  .use-case-section__heading h2,
  .audience-section__heading h2 { font-size: clamp(2.35rem, 11vw, 3.4rem); }
  .editorial-section--problem .editorial-section__copy { gap: 1.35rem; padding: 2.75rem 1.25rem; }
  .editorial-section--problem .editorial-section__copy h2 { max-width: none; font-size: var(--zl-type-section-heading-mobile-size); }
  .editorial-section--problem .editorial-section__copy .zl-lead { font-size: var(--zl-type-lead-mobile-size); }
  .solution-section { --solution-rail: 0rem; }
  .solution-section__heading { padding: 3.5rem 1.25rem; }
  .solution-section__heading h2 { max-width: none; }
  .solution-stage__canvas { border-inline: 0; }
  .solution-mobile-readout {
    display: grid;
    gap: 1px;
    border-top: 1px solid var(--zl-line);
    background: var(--zl-line);
    color: var(--zl-on-dark);
  }
  .solution-mobile-readout__sources,
  .solution-mobile-readout__result {
    display: grid;
    gap: 1px;
    background: var(--zl-on-dark-a18);
  }
  .solution-mobile-readout__sources span,
  .solution-mobile-readout__result > span,
  .solution-mobile-readout__result > small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.9rem 1.25rem;
    background: var(--zl-ink);
  }
  .solution-mobile-readout strong { font-size: 1.1rem; font-weight: 500; }
  .solution-mobile-readout b {
    color: var(--zl-on-dark);
    font-family: var(--zl-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
  }
  .solution-mobile-readout small { color: var(--zl-on-dark); font-size: 0.8rem; }
  .solution-lottie {
    inset: 0 auto 0 50%;
    width: 48rem;
    /* Held centred, not panned: the composition is wider than a phone, so
       the stage crops both edges evenly. The old 18s pan drifted it left
       and right, which read as the section wobbling while you read it. */
    transform: translateX(-50%);
  }
  .solution-flow { padding: 2rem 1.25rem; }
  .solution-flow__group--sources,
  .solution-flow__group--delivery { grid-template-columns: 1fr; }
  .solution-engine__header { grid-template-columns: auto minmax(0, 1fr); }
  .solution-engine__header small { grid-column: 2; }
  .solution-engine__steps { grid-template-columns: 1fr; }
  .solution-engine__steps span { min-height: 2.5rem; border-right: 0; border-bottom: 1px solid var(--zl-on-dark-a18); }
  .solution-engine__steps span:last-child { border-bottom: 0; }
  .solution-summary { gap: 2rem; padding: 3.5rem 1.25rem; }
  .solution-proof { grid-template-columns: 1fr; }
  .solution-proof article,
  .solution-proof article:nth-child(3n) { min-height: auto; border-right: 0; border-top: 0; border-bottom: 1px solid var(--zl-line); }
  .solution-proof article:last-child { border-bottom: 0; }
  .solution-proof h3 { margin-top: 2rem; }
  .fragment-card { width: 47%; padding: 0.9rem; }
  .fragment-card--person { left: 4%; }
  .fragment-card--company { right: 4%; }
  .fragment-card--signal { right: 16%; }
  .fragment-board__gap { left: 33%; width: 8rem; height: 8rem; }
  .product-stage { padding: 3.5rem 1.25rem; }
  .product-console { min-height: 31rem; }
  .product-console__bar { gap: 0.8rem; overflow: hidden; }
  .product-console__body { width: calc(100% - 2rem); margin-block: 3rem; }
  .product-console__results { grid-template-columns: 1fr; }
  .product-console__results > div { min-height: 7rem; border-right: 0; border-bottom: 1px solid var(--zl-on-dark-a18); }
  .product-console__results > div:last-child { border-bottom: 0; }
  .operating-proof,
  .capability-grid,
  .use-case-grid,
  .data-catalog__grid { grid-template-columns: 1fr; }
  .operating-proof article,
  .capability-grid article,
  .use-case-grid article,
  .data-catalog__grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--zl-line); }
  .operating-proof article:last-child,
  .capability-grid article:last-child,
  .use-case-grid article:last-child,
  .data-catalog__grid article:last-child { border-bottom: 0; }
  .use-case-grid article:nth-child(n),
  .data-catalog__grid article:nth-child(n) { border-right: 0; }
  .operating-proof h3,
  .capability-grid h3,
  .use-case-grid h3,
  .data-catalog__grid h3 { margin-top: 2rem; }
  .capability-grid h3 { margin-top: 4rem; }
  .statement-break { min-height: 19rem; }
  .audience-path { min-height: auto; padding: 3.5rem 1.25rem; }
  .audience-path ul { margin-top: 3rem; }
  .benchmark-band > div { padding: 3.5rem 1.25rem; }
}

@media (max-width: 32rem) {
  .final-cta { min-height: 31rem; }
  .final-cta__content { padding-inline: 0; box-shadow: 0 0 3rem 2.5rem var(--zl-surface); }
  .final-cta__content .zl-button-row { width: 100%; }
  .final-cta__content .zl-cta { width: 100%; }
}


@media (max-width: 46rem) and (prefers-reduced-motion: reduce) {
  .solution-lottie { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------
   Trust band — the page's answer to "can we hand you regulated data?".
   Sits where the proof placeholder was: after the closing statement,
   before the FAQ, which is where that question actually lands.
   Marks are drawn line-art in currentColor rather than official badge
   artwork, so the row stays on the L1 palette and reads as one set.
   ------------------------------------------------------------------ */
.trust-band {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.3fr);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}
.trust-band__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.35rem;
  padding: clamp(3rem, 3.9vw, 3.9rem) clamp(1.25rem, 3.4vw, 4rem);
}
.trust-band__copy h2 {
  max-width: 17ch;
  font-size: var(--zl-type-section-heading-size);
  letter-spacing: var(--zl-tracking-heading);
  line-height: var(--zl-leading-heading);
}
.trust-band__copy p {
  max-width: 46ch;
  color: var(--zl-body);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}
.trust-band__copy .zl-cta { margin-top: .35rem; }

.trust-band__panel {
  display: grid;
  align-content: stretch;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2rem, 3vw, 2.75rem) clamp(1rem, 1.8vw, 1.75rem);
  border-left: 1px solid var(--zl-line);
  background: var(--zl-paper);
}
.trust-band__marks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1rem, 1.8vw, 1.5rem);
}
/* Fixed icon band. Three marks are self-labelling lockups and DPDP carries a
   text name instead, so aligning whole cells left its shield floating higher
   than the other three. Reserving one row for the glyph aligns them all and
   lets the captions stack underneath at whatever height they need. */
.trust-mark {
  display: grid;
  grid-template-rows: clamp(4.5rem, 8vw, 8rem) auto;
  align-items: center;
  justify-items: center;
  gap: .5rem;
  flex: 0 1 auto;
  padding: 0;
  text-align: center;
}
.trust-mark > :first-child { align-self: center; }
.trust-mark__badge, .trust-mark__icon, .trust-mark__lockup { grid-row: 1; }
.trust-mark__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; color: var(--zl-ink); }
/* GDPR, SOC 2 and AICPA SOC ship as real certification lockups (assets/compliance,
   same files as ziplabs.ai). They carry their own wordmark, so those marks get no <b>.
   DPDP 2023 has no official badge -- it stays a drawn shield with a text label. */
.trust-mark__badge {
  height: clamp(4.5rem, 8vw, 8rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.trust-mark__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-mark small b {
  color: var(--zl-ink);
  font-family: var(--zl-font-mono);
  font-size: inherit;
  font-weight: var(--zl-weight-semibold);
  letter-spacing: .02em;
}
.trust-mark small { color: var(--zl-muted-text); font-size: clamp(.8rem, 1.15vw, 1.02rem); }
.trust-mark small { line-height: 1.35; }


@media (max-width: 64rem) {
  .trust-band { grid-template-columns: 1fr; }
  .trust-band__panel { border-left: 0; border-top: 1px solid var(--zl-line); }
  /* Full-width panel once stacked -- 2x2 here left the marks marooned. */
  .trust-band__marks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .trust-mark {
    grid-template-rows: clamp(4rem, 9vw, 5.5rem) auto;
  }
  .trust-mark__badge,
  .trust-mark__lockup { height: clamp(4rem, 9vw, 5.5rem); }
}
@media (max-width: 30rem) {
  .trust-band__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

/* Security marquee. Two identical tracks; the first is the accessible copy and
   the second is aria-hidden padding, so the loop is seamless while a screen
   reader reads the list once. Pure CSS -- no ticker library. */
.trust-marquee:not([data-marquee-ready]) .trust-marquee__track { animation: none; }
.trust-marquee {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--marquee-gap, 3.5rem);
  padding-block: 1.05rem;
  overflow: hidden;
  border-top: 1px solid var(--zl-line);
  background: var(--zl-surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: var(--marquee-gap, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: trust-marquee var(--marquee-duration, 46s) linear infinite;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
.trust-marquee__track li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .5rem;
  color: var(--zl-body);
  font-size: var(--zl-text-sm);
  white-space: nowrap;
}
.trust-marquee__tick { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; color: var(--zl-cobalt); }
.trust-marquee__tick svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
}
@keyframes trust-marquee { to { transform: translateX(calc(-1 * var(--marquee-distance, 100%))); } }

@media (prefers-reduced-motion: reduce) {
  .trust-marquee__track { animation: none; }
  .trust-marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .trust-marquee__track { flex-wrap: wrap; }
}

/* DPDP has no official badge, so it is drawn -- but on SOC 2's exact shield
   path, at the same box, so the two read as one family rather than as a real
   mark beside a homemade one. Inline SVG, not <img>, so the wordmark renders in
   the site's mono face instead of a system fallback. */
.trust-mark__lockup { display: grid; place-items: center; height: clamp(4.5rem, 8vw, 8rem); }
.trust-mark__lockup svg { height: 100%; width: auto; }
.trust-mark__lockup path { fill: #47423D; }
.trust-mark__lockup text {
  fill: #47423D;
  font-family: var(--zl-font-mono);
  /* Matched optically to SOC 2's lettering, which is outlined paths rather than
     type -- 15px measured visibly lighter than its neighbour. */
  font-size: 18.5px;
  letter-spacing: -.01em;
}

/* Proof row — a signal travelling the row.
   The page's motif is already a line that travels: the Build spine, the Grow
   journey line, the hero signal field. So rather than a generic pulse, a
   hairline runs along the row's top edge and each icon tile lifts as it passes
   — the same idea the rest of the page uses, at a much smaller scale.

   Deliberately restrained: one pass every 9s, the tile shifts by 1px and its
   wash deepens slightly. It reads as alive, not as something demanding a click.
   Gated on data-reveal-state so nothing animates off-screen. */
.solution-proof {
  position: relative;
  /* The sweep translates past the right edge, so it has to be clipped here --
     without this it pushed 235px of horizontal document overflow. */
  overflow-x: clip;
}

.solution-proof[data-reveal-state="in"]::after {
  position: absolute;
  top: -1px;
  left: 0;
  width: 26%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--zl-cobalt) 45%,
    var(--zl-cobalt) 55%,
    transparent);
  opacity: .55;
  content: "";
  animation: proof-sweep 9s var(--zl-ease-in-out) 1.2s infinite;
  pointer-events: none;
}

@keyframes proof-sweep {
  0%        { transform: translateX(-100%); opacity: 0; }
  8%        { opacity: .55; }
  62%       { opacity: .55; }
  72%, 100% { transform: translateX(385%); opacity: 0; }
}

/* Each tile lifts as the hairline reaches it. Delays are spaced to match the
   sweep crossing five columns over the first ~62% of the cycle. */
.solution-proof[data-reveal-state="in"] .solution-proof__icon {
  animation: proof-tile 9s var(--zl-ease-standard) infinite;
}
.solution-proof[data-reveal-state="in"] article:nth-child(1) .solution-proof__icon { animation-delay: 1.35s; }
.solution-proof[data-reveal-state="in"] article:nth-child(2) .solution-proof__icon { animation-delay: 2.25s; }
.solution-proof[data-reveal-state="in"] article:nth-child(3) .solution-proof__icon { animation-delay: 3.15s; }
.solution-proof[data-reveal-state="in"] article:nth-child(4) .solution-proof__icon { animation-delay: 4.05s; }
.solution-proof[data-reveal-state="in"] article:nth-child(5) .solution-proof__icon { animation-delay: 4.95s; }

@keyframes proof-tile {
  0%, 100% { transform: none; background: var(--zl-cobalt-wash); border-style: dashed; }
  4%       { transform: translateY(-1px); background: var(--zl-cobalt-a15); border-style: solid; }
  14%      { transform: none; background: var(--zl-cobalt-wash); border-style: dashed; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-proof[data-reveal-state="in"]::after,
  .solution-proof[data-reveal-state="in"] .solution-proof__icon { animation: none; }
  .solution-proof[data-reveal-state="in"]::after { display: none; }
}

/* Proof text arrives left to right, in step with the sweep above it, and each
   card's body follows its own heading rather than racing it. */
.solution-proof article:nth-child(1) h3 { --blur-base:   0ms; }
.solution-proof article:nth-child(2) h3 { --blur-base: 110ms; }
.solution-proof article:nth-child(3) h3 { --blur-base: 220ms; }
.solution-proof article:nth-child(4) h3 { --blur-base: 330ms; }
.solution-proof article:nth-child(5) h3 { --blur-base: 440ms; }
.solution-proof article:nth-child(1) p  { --blur-base: 150ms; }
.solution-proof article:nth-child(2) p  { --blur-base: 260ms; }
.solution-proof article:nth-child(3) p  { --blur-base: 370ms; }
.solution-proof article:nth-child(4) p  { --blur-base: 480ms; }
.solution-proof article:nth-child(5) p  { --blur-base: 590ms; }

/* Body copy is longer, so its per-word step is tighter -- at 70ms a 12-word
   sentence would still be assembling after the next card had started. */
.solution-proof p[data-blur-ready] { --blur-stagger: 26ms; }