/* Product openings have room to perform before the technical reference begins. */
.product-hero {
  min-height: 92svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--public-header-height) + 42px) var(--pad) 52px;
  display: flex;
  flex-direction: column;
  background: #e8ebea;
}
.product-hero h1 {
  position: relative;
  font-size: clamp(85px, 11.5vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: var(--ginsi-public-display-weight);
  margin: 0;
}
.product-hero-bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14vw;
  align-items: end;
  position: relative;
  margin-top: auto;
  padding-top: 120px;
}
.product-hero-headline {
  font-family: var(--ginsi-public-font);
  font-weight: var(--ginsi-public-heading-weight);
  font-size: clamp(35px, 3.8vw, 59px);
  letter-spacing: -0.045em;
  line-height: 1.04;
  max-width: 21ch;
}
.product-hero-bottom > div > p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 47ch;
  color: #536065;
}
.product-hero-bottom a {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 30px;
  border-top: 1px solid #aab3b7;
  padding-top: 18px;
  font-size: 12px;
}
.product-hero-bottom a span {
  font-size: 23px;
  color: #aa762e;
}
.product-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.product-field path {
  stroke: #849297;
  stroke-width: 1;
  opacity: 0.18;
}
.product-field g {
  transform-origin: 50% 50%;
}
.product-hero-voice {
  background: #f0f1ef;
}
.product-hero-voice .product-field {
  opacity: 0.6;
  transform: rotate(-15deg) scale(1.2);
}
.product-hero-voice .product-field path {
  stroke: #9dabae;
  stroke-width: 0.8;
}
.product-hero-workflow {
  background: #1c2327;
  color: #f2f3f1;
}
.product-hero-workflow .product-hero-bottom > div > p {
  color: #aab7bc;
}
.product-hero-workflow .product-field path {
  opacity: 0.27;
  stroke: #8da2ad;
}
.product-hero-workflow .product-field .product-route {
  stroke: #d5a057;
  opacity: 0.7;
  stroke-width: 1.4;
}
.product-hero-workflow .product-hero-bottom a {
  border-color: #53626a;
}
.product-hero-case {
  background: #e6e8e6;
}
.product-hero-case .product-sheets {
  transform: rotate(-12deg) translateY(70px);
}
.product-hero-case .product-sheets path {
  fill: #edf0ed;
  stroke: #b7c0c1;
  opacity: 0.35;
}

/* The canvas holds explanations. Surfaces are reserved for product artifacts. */
.product-experience {
  padding: 110px var(--pad) 60px;
  overflow: clip;
}
/* The opening reads like every other section: the heading on the gutter, its
   explanation beside it. */
.experience-opening {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  column-gap: 11%;
  row-gap: 18px;
  align-items: end;
  margin-bottom: 95px;
}
.tech-depth .experience-opening h2 {
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1.02;
  max-width: 16ch;
  margin: 0;
  font-weight: var(--ginsi-public-display-weight);
  letter-spacing: -0.04em;
}
.experience-opening > p {
  grid-column: 2;
  font-size: 16px;
  line-height: 1.7;
  max-width: 45ch;
  margin: 0;
  color: var(--ink);
}
.experience-frame {
  margin: 0;
  min-width: 0;
}
.scene-record {
  min-width: 0;
}
.experience-frame h3 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  max-width: 25ch;
  margin: 30px 0;
}
.experience-frame-context h3 {
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  max-width: 18ch;
  margin: 0;
}
.experience-frame-context > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 43ch;
  margin-top: 28px;
}
.scene-record-foot {
  font-size: 13px;
  line-height: 1.6;
  color: #626b6e;
  margin-top: 30px;
  max-width: 52ch;
}
.experience-frame figcaption,
.experience-sample-caption {
  font-size: 11px;
  line-height: 1.6;
  color: #727a7d;
  margin-top: 23px;
}
.experience-sample-caption {
  margin-top: 60px;
}
.experience-demo-link {
  display: block;
  width: fit-content;
  font-size: 14px;
  margin: 28px 0 10px;
}

/* Cases: one Case record grows while the explanation beside it changes. Each step adds
   its entry to the same record along one thread, and scrolling back takes it away again.
   Ordinary reading order, each entry beside its explanation, is the fallback. */
.experience-case {
  background: var(--reading-paper, #fff);
}
.case-journey {
  max-width: 1180px;
}
.case-journey-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 8%;
  padding-block: 32px;
}
.case-line {
  display: block;
}
.case-journey-explanation > h3 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: var(--ginsi-public-display-weight);
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.case-journey-explanation > p {
  max-width: 44ch;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}
/* The record is an actual artifact: white, square and framed by one hairline. */
.case-record-part {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) 10px;
  border: 1px solid var(--tech-rule, #dedbd7);
  background: #fff;
}
.case-record-frame {
  display: none;
}
.case-record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'meta team' 'title title';
  align-items: center;
  gap: 12px 24px;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--tech-rule, #dedbd7);
}
.case-record-head h4 {
  grid-area: title;
  margin: 0;
  max-width: 26ch;
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: var(--ginsi-public-display-weight);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.case-record-team {
  grid-area: team;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.case-record-members {
  display: flex;
  padding-left: 6px;
}
.case-record-members > i,
.case-record-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #8c7898;
  color: #fff;
  font: 10px var(--ginsi-public-font);
}
.case-record-members > i {
  margin-left: -6px;
  border: 2px solid #fff;
}
.case-record-members > i:nth-child(2) {
  background: #727483;
}
.case-record-members > i:nth-child(3) {
  background: #997f8d;
}
/* Entries hang from one thread. A dot marks each and fills once it is reached. */
.case-record-entry {
  position: relative;
  padding: 0 0 20px 32px;
}
.case-record-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--t-cases);
  border-radius: 50%;
  background: color-mix(in srgb, var(--t-cases) calc(var(--case-entry, 1) * 100%), #fff);
}
.case-record-entry::before,
.case-record-entry::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: -6px;
  width: 1px;
  background: var(--tech-rule, #dedbd7);
}
.case-record-entry::after {
  background: var(--t-cases);
  transform-origin: top;
  transform: scaleY(var(--case-thread, 1));
}
.case-record-part-2 .case-record-entry::before,
.case-record-part-2 .case-record-entry::after {
  content: none;
}
.case-record-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.case-record-metrics > div {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: 'label label' 'value slope';
  justify-content: start;
  align-items: end;
  column-gap: 14px;
}
.case-record-metrics dt {
  grid-area: label;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}
.case-record-metrics dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.case-record-before {
  font-size: 18px;
  color: var(--muted);
  white-space: nowrap;
}
.case-record-arrow {
  font-size: 15px;
  color: var(--muted);
}
.case-record-after {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.case-record-entry .scene-record-foot {
  max-width: 64ch;
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.case-record-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.case-record-quote {
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.case-record-question,
.case-record-action,
.case-learning-carry {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.case-record-action {
  margin-top: 0;
}
.case-record-assessment {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 12px 0 0;
}
.case-record-assessment > span {
  font-size: 12px;
  color: var(--muted);
}
.case-record-assessment > strong {
  font-size: 16px;
  font-weight: var(--ginsi-public-display-weight);
  color: var(--ink);
}
/* The recorded outcome connects to its use as context in the next analysis. */
.case-learning-transfer {
  height: 26px;
  margin-top: 10px;
}
.case-learning-transfer > i {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--t-cases);
  transform-origin: top;
}
.case-learning-carry {
  margin-top: 8px;
}
.case-journey-caption {
  margin: 28px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.case-scroll-enhanced {
  position: relative;
  height: var(--case-scroll-height);
}
.case-scroll-enhanced .case-scroll-canvas {
  position: sticky;
  top: var(--case-sticky-top, calc(var(--public-header-height, 84px) + 22px));
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  column-gap: 8%;
}
.case-scroll-enhanced .case-journey-stage {
  display: contents;
}
.case-scroll-enhanced .case-journey-explanation {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  pointer-events: none;
}
.case-scroll-enhanced .case-journey-stage:first-of-type {
  --case-in: 1;
  --case-opacity: 1;
}
/* An explanation's lines rise into their masks and later leave upward for the next,
   the way the landing's headings enter. Its paragraph follows. */
.case-scroll-enhanced .case-line {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.case-scroll-enhanced .case-line > span {
  display: block;
  transform: translate3d(0, calc((1 - var(--case-in, 0)) * 106% - var(--case-leave, 0) * 106%), 0);
}
.case-scroll-enhanced .case-journey-explanation > p {
  opacity: var(--case-opacity, 0);
  transform: translate3d(calc((1 - var(--case-in, 0)) * -28px - var(--case-leave, 0) * 20px), 0, 0);
}
/* The record draws its own edges as it arrives, clockwise from the top left, and its
   first entry settles into it. */
.case-scroll-enhanced .case-record-frame {
  --edge: var(--tech-rule, #dedbd7);
  border: 0;
  background:
    linear-gradient(var(--edge), var(--edge)) left top / calc(var(--case-approach, 1) * 100%) 1px
      no-repeat,
    linear-gradient(var(--edge), var(--edge)) right top / 1px calc(var(--case-approach, 1) * 100%)
      no-repeat,
    linear-gradient(var(--edge), var(--edge)) right bottom / calc(var(--case-approach, 1) * 100%)
      1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) left bottom / 1px calc(var(--case-approach, 1) * 100%)
      no-repeat,
    #fff;
}
.case-scroll-enhanced .case-record-part-0 {
  opacity: var(--case-approach, 1);
  transform: translate3d(0, calc((1 - var(--case-approach, 1)) * 24px), 0);
}
.case-scroll-enhanced :where(.case-record-part-1, .case-record-part-2) .case-record-dot {
  opacity: var(--case-approach, 1);
}
.case-scroll-enhanced .case-record-frame {
  display: block;
  grid-column: 2;
  grid-row: 1 / 4;
  border: 1px solid var(--tech-rule, #dedbd7);
  background: #fff;
}
.case-scroll-enhanced .case-record-part {
  position: relative;
  grid-column: 2;
  padding-block: 0;
  border: 0;
  background: none;
}
.case-scroll-enhanced .case-record-part-0 {
  grid-row: 1;
  padding-top: clamp(24px, 3vw, 36px);
}
.case-scroll-enhanced .case-record-part-1 {
  grid-row: 2;
}
.case-scroll-enhanced .case-record-part-2 {
  grid-row: 3;
  padding-bottom: 10px;
}
/* Low specificity: an entry's own parts may pace themselves within its arrival. */
.case-scroll-enhanced
  :where(.case-record-part-1, .case-record-part-2)
  .case-record-entry
  > :where(:not(.case-record-dot)) {
  opacity: var(--case-entry, 0);
  transform: translate3d(0, calc((1 - var(--case-entry, 0)) * 14px), 0);
}
.case-scroll-enhanced .case-learning-transfer > i {
  transform: scaleY(var(--case-learning-link, 0));
}
.case-scroll-enhanced .case-learning-carry {
  opacity: calc(var(--case-entry, 0) * var(--case-learning-memory, 0));
  transform: translate3d(0, calc((1 - var(--case-learning-memory, 0)) * 12px), 0);
}
@media (max-width: 760px) {
  .case-journey-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-block: 26px;
  }
  .case-journey-explanation > h3 {
    font-size: 28px;
  }
  .case-journey-explanation > p {
    margin-top: 14px;
    font-size: 15px;
  }
  .case-record-part {
    padding-inline: 20px;
  }
  .case-record-head h4 {
    font-size: 23px;
  }
  .case-record-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .case-record-before {
    font-size: 16px;
  }
  .case-record-after {
    font-size: 30px;
  }
  .case-scroll-enhanced .case-scroll-canvas {
    top: var(--case-sticky-top, calc(var(--public-header-height, 72px) + 16px));
    grid-template-columns: minmax(0, 1fr);
  }
  .case-scroll-enhanced .case-journey-explanation {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding-bottom: 18px;
  }
  .case-scroll-enhanced .case-journey-explanation > h3 {
    font-size: 24px;
  }
  .case-scroll-enhanced .case-journey-explanation > p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
  }
  .case-scroll-enhanced .case-record-frame {
    grid-column: 1;
    grid-row: 2 / 5;
  }
  .case-scroll-enhanced .case-record-part {
    grid-column: 1;
  }
  .case-scroll-enhanced .case-record-part-0 {
    grid-row: 2;
  }
  .case-scroll-enhanced .case-record-part-1 {
    grid-row: 3;
  }
  .case-scroll-enhanced .case-record-part-2 {
    grid-row: 4;
  }
}

/* The record as an artifact: its Case line, figures that count and slopes that draw
   between the two recorded points. Entries arrive from their own directions. */
.case-record-meta {
  grid-area: meta;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.case-slope {
  grid-area: slope;
  display: block;
  width: 72px;
  height: 28px;
  margin-bottom: 4px;
  overflow: visible;
}
.case-slope line {
  fill: none;
  stroke: var(--t-cases);
  stroke-width: 1.5;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--case-approach, 1));
}
.case-slope circle {
  fill: #fff;
  stroke: var(--t-cases);
  stroke-width: 1.2;
}
.case-slope .case-slope-end {
  fill: var(--t-cases);
  opacity: var(--case-approach, 1);
}
.case-scroll-enhanced .case-record-members > i {
  opacity: var(--case-approach, 1);
  scale: calc(0.6 + var(--case-approach, 1) * 0.4);
}
/* The team's context arrives from the side, like a message. */
.case-scroll-enhanced .case-record-part-1 .case-record-entry > :where(:not(.case-record-dot)) {
  transform: translate3d(calc((1 - var(--case-entry, 0)) * 56px), 0, 0);
}
.case-scroll-enhanced .case-record-part-1 .case-record-avatar {
  scale: calc(0.4 + var(--case-entry, 0) * 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .case-record-part {
    transition:
      opacity 900ms ease,
      transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
      clip-path 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .case-record-part .case-slope line {
    transition: stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1) 300ms;
  }
  .case-record-part-0.case-arriving {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 24px, 0);
  }
  .case-record-part-1.case-arriving {
    opacity: 0;
    transform: translate3d(64px, 0, 0);
  }
  .case-record-part-2.case-arriving {
    opacity: 0;
    transform: translate3d(-64px, 0, 0);
  }
  .case-record-part.case-arriving .case-slope line {
    stroke-dashoffset: 1;
  }
}
/* Shorter screens keep the whole scene in view with a tighter record. */
@media (max-height: 860px) and (min-width: 761px) {
  .case-record-part {
    padding-inline: 28px;
  }
  .case-scroll-enhanced .case-record-part-0 {
    padding-top: 22px;
  }
  .case-record-head {
    padding-bottom: 14px;
    margin-bottom: 16px;
  }
  .case-record-head h4 {
    font-size: 24px;
  }
  .case-record-entry {
    padding-bottom: 14px;
  }
  .case-record-after {
    font-size: 32px;
  }
  .case-slope {
    height: 24px;
  }
  .case-record-quote {
    margin-top: 8px;
    font-size: 20px;
  }
  .case-record-entry .scene-record-foot {
    margin-top: 8px;
  }
  .case-learning-transfer {
    height: 16px;
  }
}

/* Voice: explanations introduce each exchange; speakers share the full canvas. */
.experience-voice {
  background: #fff;
}
.voice-exchanges {
  max-width: 1250px;
  margin: 0 auto;
}
/* One conversation: the exchanges follow each other like a thread, with each explanation
   a quiet chapter marker above its turn. */
.voice-exchange {
  display: block;
  padding: 22px 0 40px;
}
.voice-exchange + .voice-exchange .experience-frame-context {
  padding-top: 26px;
  border-top: 1px solid var(--tech-rule, #dedbd7);
}
.voice-exchange .experience-frame-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8%;
  margin-bottom: 30px;
}
.voice-exchange .experience-frame-context h3 {
  font-size: clamp(21px, 1.9vw, 27px);
  max-width: 24ch;
}
.voice-exchange .experience-frame-context > p {
  font-size: 15px;
  max-width: 56ch;
  margin-top: 0;
}
/* Your message, sent: the page's own clay. Ori replies on white. */
.scene-voice-question {
  width: fit-content;
  max-width: min(70%, 620px);
  margin: 0 0 22px auto;
  padding: 14px 20px;
  border-radius: 22px 22px 4px 22px;
  background: var(--t-voice, #82665b);
  color: #fff;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.scene-voice-answer {
  position: relative;
  width: fit-content;
  max-width: min(74%, 760px);
  padding: 20px 24px;
  isolation: isolate;
  border-radius: 4px 25px 25px 25px;
}
.scene-voice-answer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #fff;
  box-shadow:
    0 0 0 1px #e8e7e4,
    0 12px 32px -12px #2928261c,
    0 3px 8px -5px #29282614;
  transform-origin: 32px 40px;
}
.scene-voice-person {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: #5f6c64;
  margin-bottom: 14px;
}
.scene-voice-person img {
  width: 30px;
  height: 30px;
}
.scene-voice-answer > p {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.scene-voice-answer > span {
  display: block;
  color: var(--voice-mineral, #82665b);
  font-size: 12px;
  margin-top: 25px;
}
.frame-voice figcaption {
  padding-left: 32px;
  max-width: 58ch;
}
.scene-voice-typing {
  display: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
  [data-voice-state] .scene-voice-question {
    transition:
      opacity 360ms ease,
      transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-voice-state='waiting'] .scene-voice-question {
    opacity: 0;
    transform: translate(20px, 8px);
  }
  [data-voice-state='question'] .scene-voice-question {
    --step: min(24ms, 1700ms / var(--chars, 40));
    animation: voice-sent 360ms ease both;
    animation-delay: calc(var(--chars, 40) * var(--step));
  }
  [data-voice-state='question'] .scene-voice-question > span {
    animation: voice-type 1ms linear backwards;
    animation-delay: calc(var(--c, 0) * var(--step));
  }
  @keyframes voice-type {
    from {
      opacity: 0;
    }
  }
  @keyframes voice-sent {
    from {
      background: #fff;
      color: var(--ink, #131313);
      box-shadow: 0 0 0 1px #e2dfda;
    }
  }
  [data-voice-state] .scene-voice-person {
    transition:
      opacity 260ms ease,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-voice-state='waiting'] .scene-voice-person,
  [data-voice-state='question'] .scene-voice-person {
    opacity: 0;
    transform: translate(-10px, 5px);
  }
  [data-voice-state] .scene-voice-answer::before {
    transition:
      opacity 420ms ease,
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-voice-state]:not([data-voice-state='answered']) .scene-voice-answer::before {
    opacity: 0;
    transform: translateY(8px) scale(0.97, 0.9);
  }
  [data-voice-state] .scene-voice-answer > p {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-voice-state]:not([data-voice-state='answered']) .scene-voice-answer > p {
    transform: translateY(10px);
  }
  [data-voice-state] .voice-reply-word {
    transition: opacity 280ms ease;
    transition-delay: calc(120ms + var(--word, 0) * 34ms);
  }
  [data-voice-state] .scene-voice-answer > span,
  [data-voice-state] .frame-voice figcaption {
    transition:
      opacity 420ms ease 1300ms,
      transform 420ms ease 1300ms;
  }
  [data-voice-state]:not([data-voice-state='answered']) .voice-reply-word,
  [data-voice-state]:not([data-voice-state='answered']) .scene-voice-answer > span,
  [data-voice-state]:not([data-voice-state='answered']) .frame-voice figcaption {
    opacity: 0;
    transition-delay: 0ms;
  }
  [data-voice-state]:not([data-voice-state='answered']) .scene-voice-answer > span,
  [data-voice-state]:not([data-voice-state='answered']) .frame-voice figcaption {
    transform: translateY(5px);
  }
  /* Ori's turn: a small bubble of three dots, as in any conversation. */
  [data-voice-state='typing'] .scene-voice-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 10px 13px;
    border-radius: 16px 16px 16px 4px;
    background: #fff;
    box-shadow: 0 0 0 1px #e8e7e4;
  }
  .scene-voice-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #626b6e;
    animation: voice-demo-typing 520ms ease-in-out infinite alternate;
  }
  .scene-voice-typing i:nth-of-type(2) {
    animation-delay: 110ms;
  }
  .scene-voice-typing i:nth-of-type(3) {
    animation-delay: 220ms;
  }
  @keyframes voice-demo-typing {
    from {
      opacity: 0.35;
      transform: translateY(1px);
    }
    to {
      opacity: 1;
      transform: translateY(-2px);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .product-field g {
    animation: product-field-drift 18s ease-in-out infinite alternate;
  }
  .product-route {
    stroke-dasharray: 130 2200;
    animation: product-trace 10s linear infinite;
  }
  @keyframes product-field-drift {
    to {
      transform: translate(0, -18px) scale(1.025);
    }
  }
  @keyframes product-trace {
    from {
      stroke-dashoffset: 1600;
    }
    to {
      stroke-dashoffset: -1600;
    }
  }
}
@media (max-width: 1050px) {
  .product-hero h1 {
    font-size: clamp(75px, 11vw, 130px);
  }
  .product-hero-bottom {
    gap: 8vw;
  }
  .product-hero-headline {
    font-size: 38px;
  }
  .scene-voice-answer {
    padding: 25px;
  }
}
@media (max-width: 760px) {
  .product-hero {
    min-height: calc(680px + var(--public-header-height));
    padding-top: calc(var(--public-header-height) + 32px);
    padding-bottom: 37px;
  }
  .product-hero h1 {
    font-size: clamp(63px, 14vw, 104px);
  }
  .product-hero-bottom {
    display: block;
    padding-top: 105px;
  }
  .product-hero-headline {
    font-size: 34px;
    max-width: 21ch;
  }
  .product-hero-bottom > div > p {
    margin-top: 26px;
    font-size: 14px;
  }
  .product-field {
    width: 200%;
    left: -50%;
  }
  .product-experience {
    padding: 65px var(--pad) 40px;
  }
  .tech-depth .experience-opening h2 {
    font-size: 43px;
    max-width: 20ch;
  }
  .experience-opening > p {
    font-size: 15px;
    margin-top: 25px;
  }
  .experience-opening {
    display: block;
    margin-bottom: 45px;
  }
  .experience-frame-context > p {
    font-size: 15px;
    max-width: 48ch;
    margin-top: 20px;
  }
  .experience-frame-context h3 {
    font-size: 32px;
  }
  .experience-frame h3 {
    font-size: 29px;
  }
  .scene-record-foot {
    font-size: 12px;
    margin-top: 25px;
  }
  .voice-exchange {
    padding: 0 0 60px;
  }
  .voice-exchange .experience-frame-context {
    display: block;
    margin-bottom: 30px;
  }
  .voice-exchange .experience-frame-context h3 {
    font-size: 29px;
  }
  .voice-exchange .experience-frame-context > p {
    margin-top: 18px;
  }
  .scene-voice-question {
    max-width: 88%;
    font-size: 23px;
    padding: 18px 20px;
  }
  .scene-voice-answer {
    width: 92%;
    padding: 23px;
  }
  .scene-voice-answer > p {
    font-size: 21px;
  }
  .frame-voice figcaption {
    padding-left: 23px;
  }
  .experience-sample-caption {
    margin-top: 20px;
  }
  .experience-demo-link {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-hero *,
  .product-experience *,
  .product-field {
    animation: none !important;
    transition: none !important;
  }
}

.workflow-contract-sequence {
  border-top: 1px solid var(--line);
}
.workflow-contract-sequence > section {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 60px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.workflow-contract-sequence h3,
.workflow-reading h3 {
  margin: 0;
  font: var(--ginsi-public-heading-weight) 22px/1.25 var(--ginsi-public-font);
  letter-spacing: -0.025em;
}
.workflow-contract-sequence p {
  max-width: 68ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.workflow-reading > div > section {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.workflow-reading h3 + p {
  margin-top: 20px;
}
@media (max-width: 700px) {
  .workflow-contract-sequence > section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .workflow-contract-sequence h3,
  .workflow-reading h3 {
    font-size: 21px;
  }
}

@media (max-width: 360px) {
}

/* Photographic product pages share the landing's paper, ink and restrained accents. */
:where([data-landing-style='photographic']) .technical-page {
  --reading-paper: #fff;
  --ink: #131313;
  --muted: #726b79;
  --tech-ink: var(--ink);
  --tech-muted: var(--muted);
  --tech-rule: var(--line);
  --tech-accent: #85728b;
  --tech-surface: #eee9f2;
  background: var(--reading-paper);
  color: var(--ink);
}
:where([data-landing-style='photographic']) .technical-page .tech-header {
  background: var(--reading-paper);
  border-bottom-color: #29262218;
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 450ms ease,
    color 450ms ease,
    border-color 450ms ease;
}
/* As on the landing, the header rests transparent over the opening photograph and
   becomes paper once the reader moves past it (landing-technical.js). The photograph
   runs under the header; without JavaScript the header simply stays paper. */
:where([data-landing-style='photographic']) .technical-page :is(.product-hero, .architecture-hero) {
  margin-top: calc(-1 * var(--public-header-height));
}
.tech-header .tech-logo-on-photo {
  display: none;
}
.technical-page .tech-header[data-over-photo='true'] {
  background: transparent;
  border-bottom-color: transparent;
}
.technical-page .tech-header[data-over-photo='true'] img:not(.tech-logo-on-photo) {
  display: none;
}
.technical-page .tech-header[data-over-photo='true'] .tech-logo-on-photo {
  display: block;
}
.technical-page .tech-header[data-over-photo='true'] :is(.tech-language, .tech-language span) {
  color: rgb(255 255 255 / 0.62);
}
.technical-page
  .tech-header[data-over-photo='true']
  :is(.tech-desktop-nav > a, .site-mega > summary, .tech-language a, .tech-header-contact) {
  color: #fff;
}
.technical-page .tech-header[data-over-photo='true'] .tech-menu span {
  background: #fff;
}
.technical-page .tech-header[data-over-photo='true'] :is(a, summary, button):focus-visible {
  outline-color: var(--c-earthlight);
}

:where([data-landing-style='photographic'])
  .technical-page
  .tech-header
  .tech-header-contact
  > .site-link-arrow,
:where([data-landing-style='photographic']) .technical-page .site-link-arrow,
:where([data-landing-style='photographic']) .technical-page .tech-library a > b {
  color: currentColor;
}
:where([data-landing-style='photographic']) .technical-page .tech-desktop-nav a[aria-current] {
  text-decoration-color: currentColor;
}
:where([data-landing-style='photographic']) .technical-page .product-hero-case {
  background: #05090f;
  color: #f5f3ef;
  min-height: min(calc(820px + var(--public-header-height)), 100svh);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.case-frontier {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.case-frontier img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.case-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #05090f26, transparent 45%, #05060955 65%, #050609c2);
}
:where([data-landing-style='photographic'])
  .technical-page
  .product-hero-case
  .product-hero-bottom {
  padding-top: 150px;
  gap: 10vw;
}
:where([data-landing-style='photographic'])
  .technical-page
  .product-hero-case
  .product-hero-bottom
  > div
  > p {
  color: #dddde0;
  font-size: 16px;
}
:where([data-landing-style='photographic'])
  .technical-page
  .product-hero-case
  .product-hero-bottom
  a {
  border: 0;
  padding-top: 0;
  margin-top: 24px;
  color: #f5f3ef;
}
:where([data-landing-style='photographic']) .technical-page .product-hero-case a:focus-visible {
  outline-color: #e6e6e0;
}
/* On this page: the sections as ordinary links, each moving down the page. */
:where([data-landing-style='photographic']) .technical-page .tech-jump {
  background: var(--reading-paper);
  border: 0;
  gap: 12px 36px;
  padding-block: 28px;
  font-size: 14px;
}
:where([data-landing-style='photographic']) .technical-page .tech-jump a {
  color: var(--ink);
}
:where([data-landing-style='photographic']) .technical-page .experience-case {
  background: var(--reading-paper);
}
:where([data-landing-style='photographic']) .technical-page .tech-contract {
  background: var(--reading-paper);
}
:where([data-landing-style='photographic']) .technical-page .scene-record-foot {
  color: var(--muted);
}
:where([data-landing-style='photographic']) .technical-page .sequence-record {
  border-top: 0;
  gap: 24px 8%;
}
:where([data-landing-style='photographic']) .technical-page .sequence-record > section {
  border: 0;
  padding-block: 20px;
}
:where([data-landing-style='photographic']) .technical-page .tech-contract :is(th, td) {
  border-color: #dedbd7;
}
:where([data-landing-style='photographic']) .technical-page .tech-contract tbody tr:last-child > * {
  border-bottom: 0;
}

:where([data-landing-style='photographic']) .technical-page .technical-reading > div > section {
  border: 0;
  padding-block: 0 40px;
}
:where([data-landing-style='photographic']) .technical-page .tech-library {
  border-top: 0;
  padding-bottom: 90px;
}
:where([data-landing-style='photographic']) .technical-page .tech-library a {
  border-color: #dedbd7;
  padding-top: 24px;
}
:where([data-landing-style='photographic']) .technical-page .tech-library p {
  color: var(--muted);
}
:where([data-landing-style='photographic']) .technical-page .tech-library a:hover p {
  color: var(--ink);
}
/* Keep exploring: each destination opens a window onto its own photograph. The
   windows develop once on arrival and widen slowly on hover; the words stay below,
   in the one link anatomy: an underlined name with its arrow right beside it. */
:where([data-landing-style='photographic']) .technical-page .tech-library a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'window window' 'name arrow' 'line line';
  align-items: baseline;
  column-gap: 0;
  border-top: 0;
  padding-top: 0;
  margin-bottom: 0;
}
.technical-page .tech-library-window {
  grid-area: window;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 22px;
  background: #0e0f0f;
}
.technical-page .tech-library-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(1.001);
  transition:
    transform 1600ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1600ms cubic-bezier(0.16, 1, 0.3, 1);
}
:where([data-landing-style='photographic'])
  .technical-page
  .tech-library
  a
  > span:not(.tech-library-window) {
  grid-area: name;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #c9c6c1;
  text-underline-offset: 6px;
  transition: text-decoration-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.technical-page .tech-library a:is(:hover, :focus-visible) > span:not(.tech-library-window) {
  text-decoration-color: currentColor;
}
:where([data-landing-style='photographic']) .technical-page .tech-library a > b {
  grid-area: arrow;
  justify-self: start;
  position: static;
  padding-left: 8px;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
:where([data-landing-style='photographic']) .technical-page .tech-library a > p {
  grid-area: line;
  margin-top: 14px;
}
.technical-page .tech-library a:is(:hover, :focus-visible) .tech-library-window img {
  transform: scale(1.06);
}
.technical-page .tech-library a:is(:hover, :focus-visible) > b {
  transform: translate(2px, -2px);
}
/* The section itself stays put; only the photographs develop, like prints in a tray. */
@media (prefers-reduced-motion: no-preference) {
  .technical-page [data-reveal='windows'].reveal-pending {
    opacity: 1;
    transform: none;
  }
  .technical-page [data-reveal='windows'].reveal-pending .tech-library-window img {
    filter: brightness(0.2) contrast(0.85) saturate(0.6);
    transform: scale(1.04);
  }
  .technical-page .tech-library[data-reveal='windows'] a:nth-child(2) .tech-library-window img {
    transition-delay: 160ms;
  }
  .technical-page .tech-library[data-reveal='windows'] a:nth-child(3) .tech-library-window img {
    transition-delay: 320ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .technical-page .tech-library-window img,
  .technical-page .tech-library a > b {
    transition: none;
  }
}
@media (max-width: 700px) {
  :where([data-landing-style='photographic']) .technical-page .tech-library a {
    margin-bottom: 36px;
  }
  .technical-page .tech-library-window {
    aspect-ratio: 2 / 1;
    margin-bottom: 16px;
  }
}
:where([data-landing-style='photographic']) .technical-page .tech-contact {
  background: #151418;
  color: #f5f3ef;
}
:where([data-landing-style='photographic']) .technical-page .tech-contact > a > .site-link-arrow {
  color: inherit;
}
@media (max-width: 760px) {
  :where([data-landing-style='photographic']) .technical-page .product-hero-case {
    min-height: calc(760px + var(--public-header-height));
    padding-bottom: 36px;
  }
  :where([data-landing-style='photographic']) .technical-page .product-hero-case .case-frontier {
    width: 100%;
    left: 0;
    top: 0;
  }
  :where([data-landing-style='photographic'])
    .technical-page
    .product-hero-case
    .case-frontier
    img {
    height: 100%;
    object-position: 58% center;
  }
  :where([data-landing-style='photographic'])
    .technical-page
    .product-hero-case
    .product-hero-bottom {
    padding-top: 160px;
  }
  :where([data-landing-style='photographic'])
    .technical-page
    .product-hero-case
    .product-hero-bottom
    > div
    > p {
    font-size: 15px;
    margin-top: 22px;
  }
  :where([data-landing-style='photographic']) .technical-page .tech-jump {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-block: 20px;
  }
  :where([data-landing-style='photographic']) .technical-page .tech-jump a {
    padding-block: 9px;
  }
  :where([data-landing-style='photographic']) .technical-page .sequence-record {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  :where([data-landing-style='photographic']) .technical-page .tech-library {
    padding-bottom: 50px;
  }
}

/* Workflows keeps colour in the photograph and one neutral mission surface. */
.topic-execution {
  --muted: #686966;
  --tech-accent: #737875;
  --tech-surface: #ececeb;
}

.topic-execution .tech-contact {
  background: #18191a;
}
.topic-execution .tech-header {
  color: var(--ink);
  --tech-muted: var(--muted);
  --tech-rule: #dedbd7;
}
.topic-execution .tech-language a[aria-current] {
  color: var(--ink);
}
.topic-execution .tech-menu span {
  background: var(--ink);
}
.topic-execution .product-hero-workflow {
  background: #101b21;
  color: #f5f3ef;
  min-height: min(calc(820px + var(--public-header-height)), 100svh);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.workflow-frontier {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.workflow-frontier img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}
.workflow-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #090f1914, transparent 38%, #0c111933 60%, #0c1019c9);
}
.topic-execution .product-hero-workflow .product-hero-bottom {
  padding-top: 150px;
  gap: 10vw;
}
.topic-execution .product-hero-workflow .product-hero-bottom > div > p {
  color: #e0e0e3;
  font-size: 16px;
}
.topic-execution .product-hero-workflow .product-hero-bottom a {
  border: 0;
  margin-top: 24px;
  padding-top: 0;
}
.topic-execution .product-hero-workflow a:focus-visible {
  outline-color: #f5f3ef;
}
.topic-execution .experience-workflow {
  background: var(--reading-paper);
}
.topic-execution .workflow-contract-sequence,
.topic-execution .workflow-contract-sequence > section,
.topic-execution .workflow-reading > div > section {
  border: 0;
}
.topic-execution .workflow-contract-sequence > section {
  padding-block: 24px;
}
.topic-execution .workflow-contract-sequence p {
  color: var(--ink);
}

@media (max-width: 760px) {
  .topic-execution .product-hero-workflow {
    min-height: calc(760px + var(--public-header-height));
    padding-bottom: 36px;
  }
  .workflow-frontier img {
    object-position: 65% center;
  }
  .topic-execution .product-hero-workflow .product-hero-bottom {
    padding-top: 160px;
  }
  .topic-execution .product-hero-workflow .product-hero-bottom > div > p {
    margin-top: 22px;
    font-size: 15px;
  }
}
:where([data-landing-style='photographic']) .technical-page [data-reveal='reading']::before {
  content: none;
}

/* Workflows: time travels sideways. The question holds on a charcoal stage while its
   reviews pass one fixed moment along a horizon line; most pass quietly, and the last
   lifts off the line as a finding. Natural reading order is the fallback. */
.workflow-horizon {
  --horizon-ink: #f3f3ef;
  --horizon-soft: #c9ccca;
  --horizon-muted: #9ca19f;
  --horizon-rule: #3a3f42;
  --horizon-lit: var(--c-atmosphere, #9ec3e6);
  margin-inline: calc(-1 * var(--pad));
  background: #141617;
  color: var(--horizon-ink);
}
.horizon-stage {
  padding: 72px var(--pad);
}
.horizon-question {
  max-width: 24ch;
  margin: 0 0 48px;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.horizon-track {
  display: grid;
  gap: 40px;
}
.horizon-chapter {
  position: relative;
  max-width: 46ch;
}
.horizon-chapter h3 {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: var(--ginsi-public-display-weight);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.horizon-chapter > p:not(.mission-foot) {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--horizon-soft);
}
.mission-scope {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
}
.mission-scope dt,
.mission-foot,
.horizon-run-label {
  font-size: 12px;
  color: var(--horizon-muted);
}
.mission-scope dd {
  margin: 4px 0 0;
  font-size: 17px;
}
.mission-foot {
  margin: 18px 0 0;
}
.horizon-runs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.horizon-run {
  position: relative;
  width: 170px;
  padding-top: 24px;
}
.horizon-mark {
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--horizon-muted);
  border-radius: 50%;
  background: color-mix(in srgb, var(--horizon-lit) calc(var(--passed, 1) * 100%), #141617);
}
.horizon-run-label {
  display: block;
}
.horizon-run strong {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: var(--ginsi-public-display-weight);
}
.horizon-finding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 6px 18px;
  max-width: 46ch;
}
.horizon-finding .mission-case-glyph {
  grid-row: 1 / 4;
  color: var(--horizon-lit);
}
.horizon-finding h4 {
  margin: 0;
  font-size: 22px;
  font-weight: var(--ginsi-public-display-weight);
  line-height: 1.2;
}
.horizon-finding p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--horizon-soft);
}
.horizon-finding span {
  font-size: 12px;
  color: var(--horizon-lit);
}
.horizon-now {
  display: none;
}

.horizon-enhanced {
  position: relative;
  height: var(--horizon-height);
}
.horizon-enhanced .horizon-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--public-header-height, 84px) + 28px) 0 44px;
  overflow: hidden;
}
.horizon-enhanced .horizon-question {
  margin-inline: var(--pad);
  margin-bottom: 20px;
}
.horizon-enhanced .horizon-window {
  position: relative;
  flex: 1;
  min-height: 0;
}
.horizon-enhanced .horizon-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: repeat(4, max-content);
  column-gap: clamp(64px, 8vw, 140px);
  row-gap: 0;
  padding-inline: 50vw;
  transform: translate3d(var(--horizon-x, 0px), 0, 0);
  will-change: transform;
}
/* The horizon line runs the whole track. */
.horizon-enhanced .horizon-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: var(--line-y, 70%);
  height: 1px;
  background: var(--horizon-rule);
}
.horizon-enhanced .horizon-chapter {
  grid-row: 1;
  align-self: end;
  width: min(32vw, 440px);
  padding-bottom: 36px;
  opacity: calc(0.16 + var(--seen, 1) * 0.84);
}
/* The words drift a little against the line for depth; the mark stays on the line. */
.horizon-enhanced .horizon-chapter > * {
  translate: calc((var(--drift, 0.5) - 0.5) * -80px) 0;
}
.horizon-enhanced .horizon-chapter::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--horizon-ink);
}
.horizon-enhanced .horizon-chapter-0 {
  grid-column: 1;
}
.horizon-enhanced .horizon-runs-earlier {
  grid-row: 2;
  grid-column: 2;
}
.horizon-enhanced .horizon-chapter-1,
.horizon-enhanced .horizon-runs-latest {
  grid-column: 3;
}
.horizon-enhanced .horizon-chapter-2,
.horizon-enhanced .horizon-finding {
  grid-column: 4;
}
.horizon-enhanced .horizon-runs {
  grid-row: 2;
  flex-wrap: nowrap;
  align-self: start;
}
/* Reviews that have happened are recorded in full; those still ahead are faint. */
.horizon-enhanced .horizon-run {
  opacity: calc(0.4 + var(--passed, 0) * 0.6);
}
.horizon-enhanced .horizon-finding {
  grid-row: 2;
  align-self: start;
  width: min(32vw, 440px);
  padding-top: 26px;
  opacity: calc(0.35 + var(--horizon-lift, 0) * 0.65);
  translate: 0 calc(var(--horizon-lift, 0) * -18px);
}
/* The moment every review passes. */
.horizon-enhanced .horizon-now {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(var(--line-y, 70%) - 48px);
  width: 1px;
  height: 96px;
  background: linear-gradient(transparent, var(--horizon-lit), transparent);
  pointer-events: none;
}
@media (max-width: 760px) {
  .horizon-stage {
    padding-block: 56px;
  }
  .horizon-question {
    font-size: 24px;
  }
  .horizon-chapter h3 {
    font-size: 26px;
  }
  .horizon-chapter > p:not(.mission-foot) {
    font-size: 15px;
  }
  .horizon-enhanced .horizon-chapter,
  .horizon-enhanced .horizon-finding {
    width: 78vw;
  }
  .horizon-enhanced .horizon-run {
    width: 44vw;
  }
  .horizon-enhanced .horizon-track {
    column-gap: 18vw;
  }
}

/* Voice: the photograph carries the warmth; the conversation remains clear and white. */
.topic-conversation {
  --muted: #6a6864;
  --tech-accent: #82665b;
  --tech-surface: #efefed;
  --voice-mineral: #82665b;
  --voice-surface: #fff;
  --voice-avatar-background: #efefed;
}
.topic-conversation .product-hero-voice {
  background: #171613;
  color: #f5f3ef;
  min-height: min(calc(820px + var(--public-header-height)), 100svh);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.voice-frontier {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.voice-frontier img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
}
.voice-frontier::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #100e0c20, transparent 36%, #100e0c28 62%, #100e0cbd);
}
.topic-conversation .product-hero-bottom {
  padding-top: 150px;
  gap: 10vw;
}
.topic-conversation .product-hero-bottom > div > p {
  color: #e1ddd6;
  font-size: 16px;
}
.topic-conversation .product-hero-bottom a {
  border: 0;
  margin-top: 24px;
  padding-top: 0;
}
.topic-conversation .product-hero-voice a:focus-visible {
  outline-color: #f5f3ef;
}
.topic-conversation .scene-voice-person {
  color: var(--muted);
}
.topic-conversation .scene-voice-typing i {
  background: var(--voice-mineral);
}

.topic-conversation .tech-contact {
  background: #1b1b19;
}

@media (max-width: 850px) {
  .topic-conversation .voice-presence-sequence > .ginsi-presence-widget {
    background: #fff;
    border-bottom-color: #e4e4e1;
  }
}
@media (max-width: 760px) {
  .topic-conversation .product-hero-voice {
    min-height: calc(820px + var(--public-header-height));
    padding-bottom: 36px;
  }
  .voice-frontier img {
    object-position: 68% center;
  }
  .voice-frontier::after {
    background: linear-gradient(180deg, #100e0c50, transparent 34%, #100e0c70 54%, #100e0ce6);
  }
  .topic-conversation .product-hero-bottom {
    padding-top: 200px;
  }
  .topic-conversation .product-hero-bottom > div > p {
    margin-top: 22px;
    font-size: 15px;
  }
}