.hero {
  position: relative;
  padding: 47px var(--pad-x) 0;
  min-height: 409px;
}

.hero__title {
  margin-top: 13px;
  max-width: 800px;
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.002em;
  color: var(--color-dark);
}

.hero__note {
  position: absolute;
  top: 264px;
  right: 63px;
  display: flex;
  align-items: center;
  gap: 70px;
}

.hero__arrow {
  flex-shrink: 0;
  margin-top: 12px;
}

.hero__arrow--mobile {
  display: none;
}

.hero__note p {
  width: 432px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.exhibit {
  --exhibit-rule: #b3ada1;
  --exhibit-sub: var(--color-light);
  --exhibit-fg: var(--color-light);
  --exhibit-fg-strong: var(--color-dark);
  background: var(--color-cream);
}

.exhibit--rust {
  --exhibit-rule: rgba(255, 248, 242, 0.32);
  --exhibit-sub: #fff8f26b;
  --exhibit-fg: var(--color-bg);
  --exhibit-fg-strong: var(--color-bg);
  background: var(--color-brown);
}

.exhibit__head,
.exhibit__foot {
  display: flex;
  align-items: center;
  height: 63px;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  /* color: var(--color-white); */
  color: var(--exhibit-fg);
}

.exhibit__head {
  border-bottom: 1.07px solid var(--exhibit-rule);
}

.exhibit__foot {
  justify-content: space-between;
  padding: 25px 38px;
  border-top: 1px solid var(--exhibit-rule);
}

.exhibit__head-left {
  flex: 1;
  font-family: var(--font-inter);
  padding-inline: var(--pad-card);
  color: var(--color-white);
  font-weight: var(--fw-regular);
}

.exhibit__head-right {
  width: 23.24%;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: var(--pad-card);
  font-weight: var(--fw-regular);
  font-family: var(--font-inter);
  border-left: 1px solid var(--exhibit-rule);
  color: var(--color-white);
}

.exhibit__head-right.rust {
  color: var(--color-white) !important;
}

.exhibit__brand {
  font-size: 23.58px;
  line-height: 1;
  /* color: var(--color-white); */
}

.exhibit__body {
  height: 500px;
  padding: 29px var(--pad-card) 0;
}

.desk__zone-exhibit {
  max-width: 914.5px;
  margin: 0 auto;
  margin-top: -25px;
  width: 100%;
}

.desk__zone-exhibit svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.mob__zone-exhibit {
  display: none;
}

.exhibit__title {
  font-size: 38.59px;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.003em;
  color: var(--exhibit-fg-strong);
}

.exhibit__sub {
  margin-top: 13px;
  font-size: var(--fs-sm);
  color: #fff8f26b;
  font-weight: var(--fw-regular);
  font-family: var(--font-inter);
}

.exhibit__sub.mob {
  display: none;
}

.exhibit--cream .exhibit__head .exhibit__head-left,
.exhibit__head-right {
  color: var(--color-dark);
}

.chart {
  position: relative;
  margin-top: 16px;
}

.chart--fan {
  margin-top: 12px;
}

/* the distribution SVG carries its callouts above the plot area, so it is
   pulled up to sit level with the exhibit subtitle */
.chart--dist {
  margin-top: -24px;
}

.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Scroll wrapper for the charts that sit bare inside a flex column. It is
   transparent to layout on desktop, so the desktop rendering is unchanged. */
.chart-scroll {
  display: contents;
}

.chart__heading {
  font-size: 13px;
  color: var(--color-dark);
  font-family: var(--font-inter);
}

.decision__left .chart__heading {
  color: var(--color-light);
}

.decision__left .decision__left-mob {
  display: none;
}

.decision__right .chart__heading {
  color: var(--color-light);
}

.decision__right-mob {
  display: none;
}
.fan-grid {
  stroke: rgba(255, 248, 242, 0.28);
  stroke-width: 1;
}

.fan-axis {
  fill: rgba(255, 248, 242, 0.62);
  font-family: var(--font-base);
  font-size: 15px;
}

.fan-axis.hero-chart {
  font-size: 13.93px;
  font-family: var(--font-inter);
  fill: #fff8f26b;
}

/* The founder path runs inside the cloud rather than above it, so it stays
   traceable only if it outweighs the hairlines it crosses. */
.fan-line {
  fill: none;
  stroke: rgba(255, 248, 242, 0.26);
  stroke-width: 1;
}

.fan-founder {
  fill: none;
  stroke: #dbf1ff;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.fan-note {
  fill: var(--color-white);
  font-family: var(--font-base);
  font-size: 15px;
}

.fan-note.fan-note--founder {
  fill: #dbf1ff !important;
}

.fan-note--faint {
  fill: #fff8f273;
  font-family: var(--font-inter);
  font-size: 13.93px;
  font-weight: var(--fw-regular);
}

/* the portrait variant draws into a 360-unit box, so its legend has to fit
   roughly a phone's width rather than the card's */
.fan-note--sm {
  font-size: 13px;
}

/* the distribution is drawn as a continuous stepped outline over faint
   column separators, matching the Figma treatment */
.hist-sep {
  fill: none;
  stroke: #b3ada121;
  /* stroke: #cfc5b7; */
  stroke-opacity: 0.45;
  stroke-width: 1;
}

.step-line {
  transform: translate(6%, 80%) !important;
}
.hist-line {
  fill: none;
  stroke: #b3ada1;
  stroke-opacity: 0.9;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.hist-axis {
  stroke: #cfc6ba;
  stroke-width: 1;
}

.marker-median {
  stroke: #b3a99c;
  stroke-width: 1;
}

.marker-founder {
  stroke: var(--color-brown);
  stroke-width: 2;
}

.marker-founder-dot {
  fill: var(--color-brown);
}

.chart-label {
  fill: var(--color-dark);
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: var(--fw-medium);
}

.chart-label--lg {
  font-size: 16px;
}

.chart-label--muted {
  font-size: 13px;
  fill: var(--color-light);
  font-family: var(--font-inter);
}

.chart-label--rust {
  fill: var(--color-brown);
}

.chart-tick,
.chart-scale,
.chart-caption {
  fill: var(--color-light) !important;
  font-family: var(--font-inter) !important;
  font-size: 12px;
  font-weight: var(--fw-regular) !important;
  color: var(--color-light) !important;
}

.chart-scale {
  font-size: 13px !important;
}

.chart-caption {
  font-size: 13px;
  font-family: var(--font-inter) !important;
  color: var(--color-light) !important;
  font-weight: var(--fw-regular);
}

.chart-caption--sm {
  font-size: 12px;
}

.drivers {
  display: flex;
  margin-top: 12px;
}

.drivers__left {
  position: relative;
  flex: 0 0 50.08%;
  padding-bottom: 12px;
  border-right: 1px solid var(--exhibit-rule);
}

/* The list is bottom-aligned with the taller chart beside it. The leader defines
   the scale every other bar is drawn against; --lead-share must stay the largest
   share in the ranking. */
.drivers__list {
  --lead-bar: 471px;
  --lead-share: 31;
  margin-top: 41px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drivers__list li {
  display: flex;
  flex-direction: column;
  align-content: start;
  height: max-content;
  width: 100%;
  margin-bottom: 15px;
}

.drivers__name {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  font-size: 15px;
  color: var(--color-dark);
}

.drivers__meter {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* The padding reserves the column the percentage sits in, so a bar measured
   against the row can never be squeezed to make room for its own label. */
.drivers__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 44px;
}

/* Every bar is a share of the leader, which takes 471px where the row allows it
   and the whole row where it does not. Absolute per-row widths did not survive a
   narrow screen: the two longest were both cut to the same length, so 31% and 22%
   arrived indistinguishable while the shorter bars stayed exact. */
.drivers__bar {
  height: 7px;
  background: #8c8681;
  display: block;
  flex-shrink: 0;
  width: calc(var(--share) / var(--lead-share) * min(var(--lead-bar), 100%));
}

.drivers__bar--lead {
  background: var(--color-brown);
}

.drivers__value {
  font-size: 13px;
  color: var(--color-light);
  font-family: var(--font-inter) !important;
  flex-shrink: 0;
}

.drivers__value--lead {
  color: var(--color-brown);
}
.drivers__right {
  flex: 1;
  min-width: 0;
  padding-left: 5%;
}

.driver__right-mob {
  display: none;
}

/* The phone curve is drawn at 300 units wide and takes the card's width from here, so
   its type lands at roughly the size it is written at. */
.driver__right-mob > svg {
  width: 100%;
  height: auto;
}

.drivers__right .chart__svg {
  margin-top: 9px;
}

.decision__left .chart__svg,
.decision__right .chart__svg {
  margin-top: 20px;
}

.curve-main {
  fill: none;
  stroke: #3a3733;
  stroke-width: 1.6;
  transform: translate(75px, 58px);
}

.curve-band {
  fill: none;
  transform: translate(75px, 10px);
}

.curve-band--bottom {
  fill: none;
  transform: translate(75px, 100px);
}

.decision {
  display: flex;
  align-items: center;
  margin-top: 31px;
}

.decision__left {
  flex: 0 0 50.08%;
  padding-bottom: 12px;
  padding-right: 55px;
  border-right: 1px solid #b3ada1;
}

.decision__right {
  flex: 1;
  min-width: 0;
  padding-left: 10.68%;
}

.zero-line {
  stroke: #c7bcae;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.est__whisker,
.est__cap {
  stroke-width: 1.2;
}

.est--dark .est__whisker,
.est--dark .est__cap {
  stroke: #3a3733;
}

.est--dark .est__dot {
  fill: var(--color-dark);
}

.est--dark .est__value {
  fill: var(--color-dark);
}

.est--rust .est__whisker,
.est--rust .est__cap {
  stroke: var(--color-brown);
}

.est--rust .est__dot,
.est--rust .est__value {
  fill: var(--color-brown);
}

.est__value {
  font-family: var(--font-inter);
  font-size: 13px;
  color: #1f1e1dd9;
}

.axis-ticks line {
  stroke: var(--color-brown);
  stroke-width: 1;
  opacity: 0.55;
}

.step {
  fill: none;
  stroke-width: 1.4;
}

.step.step-wave {
  transform: translate(6%, 20%);
}
.step--base {
  stroke: #6f6a64;
}

.step--mod {
  stroke: var(--color-brown);
}

.legend__swatch {
  stroke-width: 1.4;
  width: 22px;
}

.legend__swatch--base {
  stroke: #6f6a64;
}

.legend__swatch--mod {
  stroke: var(--color-brown);
}

.legend__label {
  fill: var(--color-light);
  font-family: var(--font-inter);
  font-size: 12px;
}

.legend__label--rust {
  fill: var(--color-brown);
}

.source {
  display: flex;
  align-items: center;
  gap: 27px;
  height: 83px;
  padding-inline: var(--pad-row);
  padding: 26px;
  border-top: 1px solid var(--color-border);
}

.source--tint,
.statement--tint {
  background: var(--color-cream);
  border-bottom: 1px solid #e1dad3;
}

.source__label {
  flex-shrink: 0;
  font-size: var(--fs-base);
  color: var(--color-light);
}

.source__label strong {
  font-weight: var(--fw-medium);
  color: var(--color-dark);
}

.source__desc {
  flex: 1;
  padding-left: 20px;
  border-left: 1px solid #e1dad3;
  font-size: var(--fs-base);
  color: var(--color-light);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.source--tint .source__desc {
  border-left: 1px solid #e1dad3;
}

.source__chip {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
  padding-inline: 27px;
  background: var(--color-cream);
  font-size: var(--fs-base);
  color: var(--color-light);
  border: 1px solid #eae4dd;
}

.source__chip:hover {
  opacity: 85%;
}
.source__chip.dependency {
  background-color: #f9efe6 !important;
  border: 1px solid #eae4dd !important;
}

.source--tint .source__chip {
  background: var(--color-bg);
}

.statement {
  display: flex;
  align-items: center;
  height: 85px;
  padding-inline: var(--pad-row);
  border-top: 1.19px solid var(--color-border);
  border-bottom: 1.19px solid var(--color-border);
  font-size: var(--fs-base);
  color: var(--color-dark);
}

.argument {
  display: flex;
  padding: 64px 63px 0 var(--pad-x);
  min-height: 314px;
}

.argument--mid {
  min-height: 356px;
  /* the dependencies frame sits its columns differently to the range frame */
  padding-top: 82px;
}

.argument--mid .argument__body {
  padding-top: 16px;
}

.argument--tall {
  min-height: 411px;
  /* the decision-test frame offsets its columns differently again */
  padding-top: 80px;
}

.argument--tall .argument__body {
  padding-top: 2px;
}

.argument__head {
  flex: 1;
  min-width: 0;
  max-width: 57.97%;
}

.argument__title {
  margin-top: 13px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 120%;
  color: var(--color-dark);
}

.argument__body {
  flex-shrink: 0;
  width: 36.83%;
  padding-top: 66px;
  margin-left: auto;
  height: max-content;
  margin-bottom: 12px;
}

.argument__body.x_spacing {
  margin-top: 0;
}

.argument__body p {
  font-size: var(--fs-base);
  line-height: 150%;
  color: var(--color-light);
}

.argument__body p + p {
  margin-top: 14px;
}

.argument--tall .argument__body p + p {
  margin-top: 22px;
}

.argument--tall .argument__body {
  width: 415px;
}

.objection {
  padding: 37px 29px 35px;
  border-top: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brown);
}

.objection__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 150%;
  color: var(--color-dark);
}

.objection__text {
  margin-top: 9px;
  font-size: var(--fs-base);
  line-height: 150%;
  color: var(--color-light);
}

.panel--navy {
  background: var(--color-navy);
  color: var(--color-bg);
  padding: 110px 43px 0 var(--pad-x);
}

.panel__cols {
  display: flex;
}

.panel__left {
  position: relative;
  flex: 0 0 57.21%;
  min-width: 0;
}

.panel__title {
  margin-top: 12px;
  /* the designed headline runs wider than its column and overhangs the
     right column's empty upper area, as in the Figma frame */
  width: 111.44%;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-bg);
}

.panel__arrow {
  position: absolute;
}

.judgment .panel__arrow {
  bottom: 19px;
  right: 47px;
}

.panel__arrow-mob {
  display: none;
}

.engagement .panel__arrow {
  top: 125px;
  right: 65px;
}

.panel__right {
  flex-shrink: 0;
  width: 42.79%;
  padding-right: 20px;
}
.panel__independent-judgment p {
  color: #ccdae2 !important;
}

.panel__right.panel__right-b.mob {
  display: none;
}

.panel__right p {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--on-navy);
}

.panel__right-b p {
  color: #c4b9bc;
}

.panel__right p + p {
  margin-top: 15px;
}

.panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 20px;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--transition-fast);
  border-radius: 4px;
}

.btn-ghost:hover {
  background: var(--color-cream);
}

.btn-outline {
  border: 1px solid #ffffff26;
  background-color: transparent;
  color: white;
  transition: all 0.4s linear;
}
.btn-outline:hover {
  color: black;
}
.steps {
  margin: 53px 4px 0;
}

.steps__row {
  display: flex;
  align-items: center;
  height: 70px;
  border-top: 1px solid var(--on-navy-rule);
  font-size: var(--fs-base);
}

.steps__row:last-child {
  border-bottom: 1px solid var(--on-navy-rule);
}

.steps__num {
  width: 71px;
  flex-shrink: 0;
  color: var(--color-bg);
}

.steps__name {
  color: var(--color-bg);
}

.steps__desc {
  margin-left: auto;
  color: #ccdae2;
  /* color: var(--on-navy); */
}

.qa {
  display: flex;
  gap: 23px;
  margin: 70px -5px 0 -25px;
}

.qa__item {
  flex: 1;
  min-height: 132px;
  padding: 28px 0 0 27px;
  border-left: 3px solid var(--color-brown);
}

.qa__item--tight {
  min-height: 0;
  max-width: 574px;
  margin-top: 109px;
  padding: 0 0 0 20px;
  border-left-width: 2px;
}

.qa__q {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 150%;
  color: var(--color-bg);
}

.qa__a {
  margin-top: 7px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--on-navy);
}
.qa__a-b {
  color: #c4b9bc;
}

.qa__b {
  color: #ccdae2;
}
.signature {
  margin-top: 47px;
  padding-bottom: 46px;
  text-align: center;
  font-size: var(--fs-base);
  /* color: var(--on-navy); */
  color: #ccdae2;
}

.signature strong {
  font-weight: var(--fw-medium);
  color: var(--color-bg);
}

.engagement {
  padding-top: 119px;
  padding-bottom: 114px;
}

.engagement .panel__right {
  padding-top: 137px;
}

.usecase {
  position: relative;
  display: flex;
  min-height: 690px;
  padding-top: 182px;
}

/* full-bleed square grid behind the section */
.usecase::before,
.usecase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.usecase::before {
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-cream);
  background-image: repeating-linear-gradient(
    to bottom,
    #eae4dd 0 1px,
    transparent 1px 116.36px
  );
  background-position: 0 0px;
}

.usecase::after {
  /* left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to right,
    #eae4dd 0 1px,
    transparent 1px 150px 
  ); */
  width: 101%;
  left: 0%;
  background-image: repeating-linear-gradient(
    to right,
    #eae4dd 0 1px,
    transparent 1px 116.4px
  );
}

.usecase__left,
.usecase__cards {
  position: relative;
  z-index: 1;
}

.usecase__left {
  flex: 1;
  min-width: 0;
  padding-left: 44px;
  padding-right: 40px;
}

.usecase__title {
  margin-top: 9px;
  max-width: 560px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-dark);
}

.usecase__text {
  margin-top: 39px;
  max-width: 465px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}

.usecase__text--strong {
  margin-top: 31px;
  max-width: 560px;
  color: var(--color-dark);
}

.usecase__cards {
  flex: 0 0 45.38%;
  margin-top: -66px;
}

.usecard {
  height: 233px;
  padding: 28px 8px 0 29px;
}

.usecard--rust {
  background: var(--color-brown);
  color: var(--color-bg);
}

.usecard--light {
  background: var(--color-bg);
  color: var(--color-light);
}

.usecard__head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 27px;
  border-bottom: 1px solid;
}

.usecard--rust .usecard__head {
  border-color: rgba(255, 248, 242, 0.3);
}

.usecard--light .usecard__head {
  border-color: var(--color-border-strong);
}

.usecard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  background: var(--color-cream);
}

.usecard__icon--navy {
  background: var(--color-navy);
}

.usecard__kicker {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 7px;
}
.usecard__kicker-a {
  color: var(--color-white) !important;
}
.usecard__kicker-b {
  color: var(--color-dark) !important;
}

.usecard--rust .usecard__kicker {
  color: var(--on-rust);
}

.usecard--light .usecard__kicker {
  color: var(--color-light);
}

.usecard__title {
  margin-top: 10px;
  font-size: 22px;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  /* These headings are barely wider than the card, so their last word lands
     alone on line two — a fifth of the line above it, directly on the rule
     spanning the card, which reads as a mistake. */
  text-wrap: balance;
}

.usecard--light .usecard__title {
  color: var(--color-dark);
}

.usecard__text {
  margin-top: 25px;
  font-size: var(--fs-base);
  line-height: 1.5;
}

.usecard--rust .usecard__text {
  color: var(--on-rust);
}

.report {
  display: flex;
  min-height: 468px;
}

.report__form {
  flex: 0 0 50.08%;
  padding: 128px 74px 0;
  background: var(--color-cream);
}

.report__label {
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.report__input {
  width: 100%;
  height: 44px;
  padding-inline: 18px;
  background-color: transparent;
  border: 1px solid #eae4dd;
  font-size: 12px;
  color: var(--color-light);
  outline: 0px;
  border-radius: 5px;
}
.report__input:focus {
  background: var(--color-bg);
}

.report__input::placeholder {
  color: var(--color-light);
  font-size: 12px;
}

.report__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-light);
  cursor: pointer;
}

.report__consent input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  accent-color: var(--color-brown);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.report__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.report__error {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-brown);
}

.report__submit {
  width: 100%;
  height: 44px;
  margin-top: 17px;
  background: var(--color-brown);
  color: var(--color-bg);
  font-size: 13.88px;
  font-weight: var(--fw-medium);
  transition: background var(--transition-fast);
  border-radius: 4px;
}

.report__submit:hover {
  background: var(--color-rust-hover);
}

.report__note {
  margin-top: 16px;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--color-light);
}

/* The global reset strips colour and underline from every anchor, so a link in
   body copy is invisible until it gets them back. */
.report__note a {
  color: var(--color-brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.report__note a:hover {
  color: var(--color-rust-hover);
}

.report__copy {
  flex: 1;
  min-width: 0;
  padding: 75px 44px 0 40px;
}

.report__title {
  margin-top: 9px;
  max-width: 520px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1.22;
  color: var(--color-dark);
}

.report__text {
  margin-top: 36px;
  max-width: 466px;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-light);
}
.one-path-chart {
  display: none;
}

/* BELOW THE DESIGN WIDTH (container no longer 1280px)
   Columns stay side by side and scale proportionally; only the pieces the
   Figma frame pins absolutely need releasing. */
@media (max-width: 1311px) {
  .hero {
    min-height: 0;
    padding-bottom: 44px;
  }

  .hero__note {
    position: static;
    margin-top: 36px;
    justify-content: flex-end;
  }

  .hero__note p {
    width: auto;
    max-width: 432px;
  }

  .panel__title {
    width: auto;
  }

  .exhibit__chart-2 {
    display: none !important;
  }

  .argument,
  .argument--mid,
  .argument--tall {
    min-height: 0;
    padding-bottom: 44px;
  }

  .usecase {
    min-height: 0;
    padding-bottom: 56px;
  }

  .usecase__cards {
    margin-top: 0;
  }
}

/* RESPONSIVE
   The Figma frame is a fixed 1440 desktop layout; below that the fixed
   column widths, pinned heights and designed line breaks are released so
   the page reflows instead of overflowing. */
@media (max-width: 1100px) {
  :root {
    --fs-h1: 46px;
    --fs-h2: 38px;
  }

  .hero,
  .argument,
  .argument--mid,
  .argument--tall,
  .objection,
  .usecase,
  .report {
    min-height: 0;
  }

  .hero {
    padding-bottom: 40px;
  }

  .hero__note {
    position: static;
    justify-content: flex-end;
  }

  .hero__note p {
    width: auto;
    max-width: 432px;
  }

  .exhibit__body {
    height: auto;
    padding-bottom: 26px;
  }

  .chart--fan,
  .chart--dist {
    margin-top: 16px;
  }

  .argument,
  .panel__cols,
  .drivers,
  .decision,
  .usecase,
  .report {
    flex-direction: column;
  }

  .argument {
    padding-right: var(--pad-x);
    padding-bottom: 40px;
  }

  .argument--tall .argument__body {
    width: auto;
  }

  .argument__head,
  .argument__body,
  .panel__left,
  .panel__right,
  .usecase__cards,
  .report__form,
  .drivers__left,
  .drivers__right,
  .decision__left,
  .decision__right {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }

  .argument__body,
  .panel__right,
  .drivers__right,
  .decision__right {
    padding-top: 32px;
  }

  .panel__title,
  .usecase__title,
  .report__title {
    width: auto;
    max-width: none;
  }

  .panel__arrow {
    display: none;
  }

  .engagement .panel__right {
    padding-top: 32px;
  }

  .drivers__list {
    margin-top: 12px;
  }

  .drivers__list li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    margin-bottom: 20px;
  }

  .drivers__value {
    margin-top: 4px;
    font-family: var(--font-inter);
  }

  .panel__actions {
    flex-wrap: wrap;
  }

  .steps {
    margin-inline: 0;
  }

  .qa {
    margin-inline: 0;
  }

  .qa__item--tight {
    margin-top: 40px;
  }

  .panel--navy {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .engagement {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .usecase {
    padding-top: 96px;
    padding-bottom: 48px;
  }

  .usecase__cards {
    margin-top: 40px;
  }

  .usecase__text,
  .usecase__text--strong {
    max-width: none;
  }

  .usecard {
    height: auto;
    padding-bottom: 28px;
  }

  .report__form {
    padding: 40px var(--pad-x);
  }

  .report__copy {
    padding: 40px var(--pad-x);
  }

  .report__text {
    max-width: none;
  }
}

@media (max-width: 900px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 30px;
    --fs-h3: 20px;
    --pad-x: 16px;
    --pad-card: 24px;
    --pad-row: 16px;
  }

  .hero {
    padding-top: 30px;
    padding-bottom: 35px;
  }

  /* Figma mobile 2058:4: arrow at x315/y382 (49x48), note paragraph at
     x32/y414 with the title bottom at y379. */
  .hero__note {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    transform: translateY(-45px);
  }

  .hero__note p {
    max-width: none;
    font-size: var(--fs-sm);
  }

  .hero__arrow {
    display: none;
  }

  /* Figma has the arrow spanning y382-430 at x315 while the note's first
     line starts at y414, so the two overlap rather than stack. */
  .hero__arrow--mobile {
    display: block;
    align-self: flex-end;
    width: 49px;
    height: 48px;
    margin-right: -79px;
    margin-bottom: 10px;
  }

  .hero__arrow--mobile {
    display: block;
    margin-right: 35px;
  }

  .exhibit__head-right {
    width: max-content;
    padding-left: 0;
    font-size: 11px;
    border-left: 0;
  }

  .exhibit__brand {
    font-size: 15px;
  }

  .exhibit__title {
    font-size: 23.75px;
    max-width: 16ch;
    line-height: 1.2;
  }

  .exhibit__title-mob {
    max-width: 17ch;
  }

  .exhibit__foot-home1,
  .exhibit__foot-home1 .exhibit__brand {
    color: white !important;
  }
  .exhibit__sub {
    font-size: 12px;
  }

  .steps__desc,
  .panel__independent-judgment p {
    font-size: 14px;
  }

  .source {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    height: auto;
    padding: 32px 16px 28px 16px;
  }

  .source__label {
    font-size: var(--fs-sm);
  }
  .source__desc {
    padding-left: 10px;
    font-size: var(--fs-sm);
  }

  .source__chip {
    margin-left: 0;
    font-size: var(--fs-sm);
  }

  .statement {
    height: auto;
    padding: 28px 16px;
    font-size: var(--fs-sm);
  }

  .argument,
  .panel--navy,
  .engagement,
  .usecase {
    padding-top: 34px;
    padding-bottom: 25px;
  }

  .usecard__kicker {
    font-size: 12px;
  }

  .usecard__title {
    font-size: 18px;
    max-width: 90%;
  }
  .argument__body {
    padding-top: 24px;
  }
  .argument__body.argument--tall {
    width: max-content !important;
  }

  .steps {
    margin-top: 42px;
  }
  .steps__row {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  .steps__name {
    font-size: 18px;
  }
  .steps__row {
    height: auto;
    padding-block: 16px;
    flex-wrap: wrap;
    gap: 4px 0;
  }
  .steps__num {
    width: 40px;
  }
  .steps__desc {
    flex-basis: 100%;
    margin-top: 10px;
    text-align: left;
  }

  .qa {
    flex-direction: column;
    gap: 24px;
    margin-top: 42px;
  }

  .qa__a {
    font-size: 14px;
  }

  .qa__item {
    min-height: 0;
    padding-top: 0;
    padding-left: 18px;
  }
  .qa__q {
    font-size: 18px;
  }
  .qa__1 {
    font-size: 14px;
  }
  .signature {
    margin-top: 40px;
    padding-bottom: 0;
    text-align: left;
    font-size: 14px;
  }

  .spacer,
  .spacer--sm {
    height: 40px;
  }

  .exhibit__head-left {
    font-size: 11px;
    color: #fff8f2;
    padding: 0 28px;
  }

  .exhibit--rust .exhibit__head-right {
    color: #fff8f29e;
    padding-right: 28px;
  }

  .exhibit__head {
    height: 45px;
    padding: 0 0;
  }
  .exhibit__body {
    padding: 14px 29px 25px 29px;
  }

  .exhibit__sub {
    font-size: 11px;
  }

  .exhibit__sub.mob {
    display: block;
    margin-top: 24px;
  }

  .exhibit__sub.desk {
    display: none;
  }

  .exhibit__foot {
    height: 43px;
    font-size: 11px;
    padding: 12px 29px;
    color: var(--color-dark);
  }

  .exhibit__foot.fig-one {
    color: #fff8f280;
  }

  .exhibit__brand {
    font-size: 15px;
    color: var(--color-dark);
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
  }

  .exhibit__brand.fig-one {
    color: #fff8f2;
  }
  /* Charts keep their designed proportions: the box follows the viewBox
     instead of being pinned to a fixed height (which letterboxed them). */
  .chart__svg {
    width: 100%;
    height: auto;
  }

  /* Each chart still fits the screen whole; instead of shrinking the whole
     drawing (which rendered 12px labels at ~4px) the SVG type is scaled up by
     the chart's own shrink factor, so every label lands at ~10-12px on glass.
     Sizes are in viewBox units: rendered px = unit * (cardWidth / viewBoxWidth). */
  .chart {
    overflow: hidden;
  }

  .chart-scroll {
    display: block;
  }

  /* --- 1200-unit charts (Figure 1, Exhibit 1): shrink factor ~0.29 ---
     Their in-SVG callouts are stacked only ~19 viewBox units apart, so no type
     size is both legible on a phone and collision-free. The callouts move out
     to an HTML legend under the chart (the pattern Figure 1 already uses),
     leaving the axis to carry the drawing. */
  .chart--dist .chart-label,
  .chart--dist .chart-label--muted,
  .chart--dist .chart-tick {
    display: none;
  }

  /* Aspect ratio: the desktop viewBoxes are ~2.9:1, which renders ~120px tall
     on a phone. Cropping each chart to the region it actually draws in lifts
     the ratio to ~2.2:1 and enlarges everything by the same factor. The box is
     sized from the crop, so it stays correct at every width. */
  .chart--dist {
    position: relative;
    aspect-ratio: 945 / 420;
    overflow: hidden;
  }

  .chart--dist .chart__svg {
    position: absolute;
    top: 0;
    left: -14.29%; /* -135/945: hides the empty left margin */
    width: 127%; /* 1200/945, keeping the "60" tick inside */
  }

  .chart--dist .chart-scale {
    font-size: 30px !important;
  }
  .chart__svg .chart-scale-chart3 {
    font-size: 7px !important;
  }

  .chart--dist .chart-caption {
    font-size: 28px;
  }

  .chart--fan {
    font-size: 34px;
  }

  .drivers__left {
    padding-bottom: 16px;
  }
  /* legend carrying the callouts the SVG can no longer show */
  .chart-key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin-top: 10px;
    font-family: var(--font-inter);
    font-size: 11px;
    line-height: 1.45;
    color: var(--exhibit-sub);
  }

  .chart-key__item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
  }

  .chart-key__swatch {
    flex-shrink: 0;
    width: 14px;
    height: 2px;
    transform: translateY(-3px);
  }

  .chart-key__swatch--median {
    background: #b3a99c;
  }

  .chart-key__swatch--founder {
    background: var(--color-brown);
  }

  .chart-key__name {
    font-weight: var(--fw-medium);
    color: var(--exhibit-fg-strong);
  }

  /* --- 600-unit chart (Exhibit 3 left): shrink factor ~0.57 --- */
  .decision__left .chart-label--lg {
    font-size: 21px;
  }

  .decision__left .decision__left-mob {
    display: block;
    padding-top: 16px;
  }

  .decision__left .decision__left-desk {
    display: none;
  }
  .decision__left .chart-label {
    font-size: 18px;
  }

  .decision__left .chart-tick,
  .decision__left .chart-scale {
    font-size: 19px !important;
  }

  .decision__left .chart-caption {
    font-size: 18px;
  }

  .drivers__right {
    display: none;
  }
  .driver__right-mob {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .drivers__right .chart-label,
  .decision__right .chart-label {
    font-size: 16px;
  }

  .drivers__right .chart-tick,
  .decision__right .chart-tick,
  .drivers__right .chart-scale,
  .decision__right .chart-scale {
    font-size: 15px !important;
  }

  .chart-scale.sales-cycle {
    font-size: 8.31px;
  }
  .drivers__right .chart-caption,
  .decision__right .chart-caption,
  .drivers__right .chart-caption--sm,
  .decision__right .chart-caption--sm {
    font-size: 14px;
  }

  /* let the scrollable chart use the card's full width */
  .chart {
    margin-inline: -20px;
    padding-inline: 20px;
    max-width: none;
  }

  /* flex/grid items default to min-width:auto, which lets a wide chart push
     its ancestors open instead of scrolling inside them */
  .exhibit__body,
  .drivers,
  .drivers__left,
  .drivers__right,
  .decision,
  .decision__left,
  .decision__right,
  .panel__cols,
  .panel__left,
  .panel__right {
    min-width: 0;
  }

  .argument__title {
    font-size: 32px;
  }

  .argument__body {
    padding-top: 14px;
    margin-top: 0;
  }

  .argument__body.decision-test {
    padding-top: 14px;
  }

  .chart__heading {
    font-size: 10.55px;
    font-weight: var(--fw-regular);
    font-family: var(--font-inter);
  }
  .chart__heading.decision__heading {
    display: none;
  }
  .chart__svg.decision__right-desk {
    display: none;
  }

  .decision__right {
    padding-top: 0;
  }

  .decision__right-mob {
    display: block;
  }
  .argument__body p {
    font-size: var(--fs-sm);
  }

  .argument--tall .argument__body p + p {
    margin-top: 16px;
  }

  .objection {
    padding: 28px 14px 28px 14px;
  }

  .objection__title {
    font-size: 18px;
  }

  .objection__text {
    font-size: var(--fs-sm);
  }

  .exhibit--cream .exhibit__head .exhibit__head-left,
  .exhibit__head-right {
    color: var(--color-dark);
    font-family: var(--font-inter);
  }

  .exhibit__head-right {
    padding-right: 28px;
  }

  .desk__zone-exhibit {
    display: none;
  }

  .mob__zone-exhibit {
    display: block;
    max-width: 284px;
    margin: 16px auto 0;
    margin-bottom: -6px;
  }

  .drivers__name {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .drivers__list {
    margin-top: 21px !important;
  }

  .drivers__list li {
    margin-bottom: 9.84px !important;
  }

  .exhibit__title.independent {
    max-width: 16ch;
  }

  .drivers__value {
    font-size: 9px;
    margin-top: -2px;
  }

  .source.dependencies {
    display: none;
  }

  .statement.dependencies {
    display: none;
  }
  .drivers__right {
    padding-top: 0;
  }
  .chart__heading.observational {
    font-size: 9px;
  }

  .usecase__left {
    padding: 16px;
    padding-bottom: 0;
  }
  .usecard__icon {
    width: 52px;
    height: 52px;
  }
  .usecard {
    padding-left: 22px;
    padding-right: 22px;
  }
  .usecard__head {
    align-items: center;
    gap: 14px;
    padding-bottom: 12px;
  }
  .usecard__text {
    font-size: 14px;
    margin-top: 12px;
  }
  .usecase__text {
    font-size: 14px;
    margin-top: 14px;
    margin-bottom: 0;
  }
  .panel {
    padding-left: 22px;
  }
  .panel__right p {
    font-size: 14px;
  }

  .panel__right.panel__right-b:not(.mob) p:nth-of-type(1),
  .panel__right.panel__right-b:not(.mob) p:nth-of-type(2) {
    display: none;
  }

  .report {
    flex-direction: column-reverse;
  }

  .report__note {
    font-size: 12px;
  }

  .report__title {
    font-size: 32px;
  }
  .report__copy {
    padding-bottom: 27px;
  }
  .report__text {
    font-size: 14px;
    margin-top: 14px;
  }
  .report__form {
    padding-inline: 32px 23px;
  }

  .report__label {
    font-size: 12px;
  }

  .panel__title {
    font-size: 32px;
    width: 90%;
  }

  .panel__title.bounded {
    font-size: 30px;
  }

  .panel__arrow-mob.bounded {
    right: 14px;
    top: 110px;
  }

  .panel__arrow-mob {
    display: block;
    margin-left: auto;
    position: absolute;
    right: -20px;
    top: 120px;
  }

  .panel__right.panel__right-b.mob {
    display: block;
  }
}

@media (max-width: 600px) {
  .signature {
    text-align: center;
  }
  .one-path-chart {
    display: block;
    margin-top: 20px;
  }
  .one-path-chart-main,
  .chart-key,
  .chart--dist,
  .exhibit__sub-chart-1 {
    display: none;
  }

  .exhibit__sub-chart-2,
  .exhibit__chart-2 {
    display: block;
  }
  .exhibit__chart-2 {
    margin-top: 25px;
  }
  .chart__heading-chart3 {
    font-size: 10px;
  }

  .panel__title {
    width: auto;
  }
}

@media (min-width: 535px) {
  .panel__arrow-mob {
    top: 70px;
  }

  .panel__arrow-mob.bounded {
    top: 60px;
  }
}
@media (max-width: 460px) {
  .hero__arrow {
    transform: translateY(-33px) !important;
    margin-bottom: 0px !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .decision {
    flex-direction: row;
    justify-content: space-between;
  }

  .drivers {
    flex-direction: row;
    justify-content: space-between;
  }
}