/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.ahNU_53fKwA4w1RvWCOg,
.ahNU_53fKwA4w1RvWCOg *,
.ahNU_53fKwA4w1RvWCOg *::before {
  box-sizing: border-box;
}

/* The full width of the window, out of the section's page gutter. */
.ahNU_53fKwA4w1RvWCOg {
  display: flex;
  flex-direction: column;
  gap: max(40px, 3.7vw);
  margin-inline: calc(-1 * var(--page-gutter, 64px));
  color: var(--text-primary, #171717);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/*
 * The cycle on its 1920 × 1020 board, the steps over it. --p (0 → 1, set from
 * the scroll) times it: --rays the sides fanning in, --arc the half circle
 * drawing round.
 */
.GdQNoda_VxTIMmN__mE0 {
  --p: 0;
  --rays: clamp(0, var(--p) / 0.35, 1);
  --arc: clamp(0, (var(--p) - 0.25) / 0.65, 1);
  position: relative;
  aspect-ratio: 1920 / 1020;
}

.y7LEDwJ9pBdWNyJfqsJG {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden; /* (the rays run on past the board's foot, as the Figma frame clips them) */
}

.dXe5N4gxk5BuJfpf8Ttd {
  stroke: #595959;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.jSGq5SSpoDx8kT3OIEYS {
  stroke: #595959;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.q5Q2RyXGFHsgY0lFcPRA {
  fill: #73f2e5;
}

.JIVNTzJmbJKVjhrCNSWd {
  fill: var(--action-primary-default, #0073e6);
}

.eXmNhSRhoKX0zhVIbALu {
  opacity: 0.7;
}

.DRFH1gdBJO9_QFEspXGP {
  stroke: #c3bfd6;
  stroke-width: 1.2;
}

.KLA7rRvgHZrffjiofYwv {
  fill: none;
  stroke: #595959;
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.nR60pqZ13N5ecJvkGxIX {
  fill: var(--text-primary, #171717);
}

/* The sides fan down about the centre (the top middle of the board), from along the top line (60° round, folded above it) into place, eased out. */
.KhM3jMrxxuB6Th3A0Mb8,
.txprkLGo7p1Z4Glfrgnm {
  --fan: calc(1 - (1 - var(--rays)) * (1 - var(--rays)));
  transform-box: view-box;
  transform-origin: 960px 0;
}

.KhM3jMrxxuB6Th3A0Mb8 {
  transform: rotate(calc((1 - var(--fan)) * 60deg));
}

.txprkLGo7p1Z4Glfrgnm {
  transform: rotate(calc((1 - var(--fan)) * -60deg));
}

/* The sides' corners: hidden while folded (one sits on the top line), in as they start to fan down. */
.KhM3jMrxxuB6Th3A0Mb8 .nR60pqZ13N5ecJvkGxIX,
.txprkLGo7p1Z4Glfrgnm .nR60pqZ13N5ecJvkGxIX {
  opacity: clamp(0, (var(--fan) - 0.08) / 0.12, 1);
}

.uA8SurTcMjcCX6zSezgM {
  opacity: clamp(0, (var(--rays) - 0.5) / 0.5, 1);
}

/* The half circle, drawn round as --arc goes 0 → 1. */
.Be5oEbrDmW53S2g1G1Jg {
  fill: none;
  stroke: #595959;
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--arc));
}

/* Each arrowhead as the line reaches it (--at: how far along it is). */
.VTTOr6hA0TPbiWuYNBEA {
  fill: #595959;
  opacity: clamp(0, (var(--arc) - var(--at)) / 0.05, 1);
}

.zlAKK9NZ4b4OWyQypR3e {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * The steps, over the board: the first on the left, the second at the foot
 * (centred), the third on the right (right-aligned), each coming in (rising
 * and fading up) as the half circle passes it.
 */
.WBtMTeU5M0YZGuLNsIEQ {
  --in: clamp(0, (var(--arc) - var(--at)) / 0.15, 1);
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: max(12px, 0.93vw);
  width: 20.5%;
  opacity: var(--in);
  translate: 0 calc((1 - var(--in)) * 24px);
}

.WBtMTeU5M0YZGuLNsIEQ[data-pos='left'] {
  top: 18.4%;
  left: var(--page-gutter-min, 64px); /* the base gutter: the steps sit by the artwork's edges, not the capped content's */
  align-items: flex-start;
}

.WBtMTeU5M0YZGuLNsIEQ[data-pos='right'] {
  top: 18.4%;
  right: var(--page-gutter-min, 64px);
  align-items: flex-end;
  text-align: right;
}

.WBtMTeU5M0YZGuLNsIEQ[data-pos='foot'] {
  top: 57%;
  left: 50%;
  width: 24%; /* a little wider than the sides' */
  align-items: center;
  margin-left: -12%;
  text-align: center;
}

/* People soft black, Agents brand blue: a tag, white, uppercase. */
.JUpbyqaKIglEwZa5T7kM {
  padding: 6px 16px;
  background: var(--text-primary, #171717);
  color: var(--text-inverse, #ffffff);
  font-size: 14px;
  font-weight: var(--type-eyebrow-weight, 600);
  line-height: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.WBtMTeU5M0YZGuLNsIEQ[data-who='agents'] .JUpbyqaKIglEwZa5T7kM {
  background: var(--action-primary-default, #0073e6);
}

/* Heading L, Light. */
.XuTqMGyQcLq_23TXZvSu {
  margin: 0;
  font-size: var(--type-heading-l-size, 36px);
  font-weight: 300;
  line-height: var(--type-heading-l-lh, 40px);
  letter-spacing: var(--type-heading-l-ls, 0);
  text-wrap: balance;
}

/* Body / Large. */
.XVo_Jvwc_oKouNo__1nY {
  margin: 0;
  font-size: var(--type-large-size, 20px);
  font-weight: var(--type-large-weight, 400);
  line-height: var(--type-large-lh, 28px);
  letter-spacing: var(--type-large-ls, 0);
  text-wrap: pretty;
}

/* The button centred on a dotted line across the window. */
.SRDJPs1mTT7yKU6phzBZ {
  position: relative;
  display: flex;
  justify-content: center;
}

.SRDJPs1mTT7yKU6phzBZ::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, #595959 0 2px, transparent 2px 4px);
}

.SRDJPs1mTT7yKU6phzBZ > * {
  position: relative;
}

/* Side by side: the line is the graphic's foot (the row pulled up over the gap and half its own height), so the rays end on it. */
@media (min-width: 1101px) {
  .SRDJPs1mTT7yKU6phzBZ {
    margin-top: calc(-1 * max(40px, 3.7vw));
    translate: 0 -50%;
  }
}

/* From 1100px down: the board on its own, the steps one after another under it. */
@media (max-width: 1100px) {
  .GdQNoda_VxTIMmN__mE0 {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }

  .y7LEDwJ9pBdWNyJfqsJG {
    position: relative;
    aspect-ratio: 1920 / 1020;
    height: auto;
  }

  .zlAKK9NZ4b4OWyQypR3e {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }

  .WBtMTeU5M0YZGuLNsIEQ,
  .WBtMTeU5M0YZGuLNsIEQ[data-pos] {
    position: static;
    width: auto;
    margin: 0;
    padding: 0 var(--page-gutter, 20px);
    align-items: flex-start;
    text-align: left;
  }
}

/* Phones: no graphic, the steps still (in from the start, not tied to the scroll). */
@media (max-width: 767px) {
  .y7LEDwJ9pBdWNyJfqsJG {
    display: none;
  }

  .zlAKK9NZ4b4OWyQypR3e {
    margin-top: 0;
  }

  .WBtMTeU5M0YZGuLNsIEQ {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .GdQNoda_VxTIMmN__mE0 {
    --p: 1;
  }
}