/*
 * A seven-stop phase track. The rail fills to the active stop, passed stops
 * keep their own colour, and a dashed arc returns from the last stop to the
 * first because the final phase is continuous rather than an endpoint.
 *
 * Geometry rests on two numbers passed in from the component: --n (stop count)
 * and --p (progress, 0..1). Stops are equal grid columns, so the rail spans
 * exactly centre-to-centre with calc() instead of measured pixels, and adding
 * or removing a phase needs no other change.
 *
 * The rail's vertical offset is computed from --numH, --gapY, --dot and --rail
 * rather than eyeballed. That is why --numH is applied as an explicit
 * line-height on the number: it makes the arithmetic exact.
 *
 * Colours arrive per-stop as --c, matching the .color-bar-left classes the
 * phases already use on the live page.
 */

.jWw5vRCczatX6t5vaI3J {
  /* Overridden by the theme variant below. */
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.4);
  --line: rgba(255, 255, 255, 0.16);
  --panel: rgba(255, 255, 255, 0.04);
  --ok: #00ffa1;

  --numH: 1.3rem;
  /* Sets both gaps in a stop — number to dot, and dot to verb. The rail and
     the snake links derive their offset from it, so they stay centred on the
     dots without a second number to keep in step. */
  --gapY: 1.4rem;
  --dot: 15px;
  --rail: 2px;

  box-sizing: border-box;
  display: block;
  /* The track lays itself out against the width it actually gets, not the
     viewport — in Webflow this sits in a column that is routinely much
     narrower than the window. Everything below the desktop track is a
     @container query against this.

     width:100% is load-bearing, not cosmetic. inline-size containment makes
     this element contribute nothing to intrinsic width, so a parent that
     shrink-wraps or centres its child (a flex row, or a grid with
     justify-items other than stretch) collapses it to zero. An explicit width
     takes the size from the parent instead of from the contents. */
  container-type: inline-size;
  width: 100%;
  color: var(--fg);
  /* No vertical padding: the eyebrow, heading and intro are native Webflow
     elements above this component, so its spacing divs own the rhythm. */
  padding: 0;
  font-family: Figtree, Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.asnkZPbSvNnCwW9UQJhA {
  --fg: #001727;
  --muted: #3d4a55;
  --faint: #8a949c;
  --line: rgba(0, 23, 39, 0.16);
  --panel: rgba(0, 23, 39, 0.035);
  --ok: #00875a;
}

.jWw5vRCczatX6t5vaI3J *,
.jWw5vRCczatX6t5vaI3J *::before,
.jWw5vRCczatX6t5vaI3J *::after {
  box-sizing: inherit;
}

.t3_a9pCn7zfKoRDjo8nm {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- track --------------------------------------------------------- */

.R4M31CSPDQmwHhK1ri7q {
  position: relative;
}

.uoHJhxR87DJeeGXzEdAg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  align-items: start;
}

.pTp_DEfvAaAcc6JEq3tH,
.tHamUlfdRYaGOeouUxu2 {
  position: absolute;
  top: calc(var(--numH) + var(--gapY) + var(--dot) / 2 - var(--rail) / 2);
  left: calc(50% / var(--n));
  height: var(--rail);
  border-radius: var(--rail);
}

.pTp_DEfvAaAcc6JEq3tH {
  width: calc(100% - 100% / var(--n));
  background: var(--line);
}

.tHamUlfdRYaGOeouUxu2 {
  width: calc((100% - 100% / var(--n)) * var(--p));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 25%, transparent),
    var(--accent)
  );
  transition:
    width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.55s ease;
}

.qjmpe_tVCM53OPgSaUPk {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--gapY);
  padding: 0 0.4rem;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
}

.qjmpe_tVCM53OPgSaUPk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: 3px;
}

.ebr34JS7o1Sp4zpzul2n {
  font-size: 0.85rem;
  line-height: var(--numH);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.BBOTUIdBmA5hQHwVbjIK {
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.45s ease;
}

/* Scales down between 992px and ~1200px so OPERATIONALIZE keeps to one line
   inside its 1/7 column. A fixed size wraps there. Measured in cqw, not vw:
   the column that has to fit the word is a fraction of the component, which
   is not the window. */
.Zds1ffxIpGjJEriiVDIL {
  font-size: clamp(0.8rem, 0.72cqw + 0.4rem, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--faint);
  transition: color 0.3s ease;
}

.qjmpe_tVCM53OPgSaUPk.GPPLzyHXMI_N1cCbXTVV .BBOTUIdBmA5hQHwVbjIK {
  background: color-mix(in srgb, var(--c) 55%, transparent);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}

.qjmpe_tVCM53OPgSaUPk.GPPLzyHXMI_N1cCbXTVV .ebr34JS7o1Sp4zpzul2n,
.qjmpe_tVCM53OPgSaUPk.GPPLzyHXMI_N1cCbXTVV .Zds1ffxIpGjJEriiVDIL {
  color: var(--muted);
}

.qjmpe_tVCM53OPgSaUPk.aU4vA3Y7hqC6G5hElRpv .BBOTUIdBmA5hQHwVbjIK {
  background: var(--c);
  border-color: var(--c);
  transform: scale(1.5);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent);
}

.qjmpe_tVCM53OPgSaUPk.aU4vA3Y7hqC6G5hElRpv .ebr34JS7o1Sp4zpzul2n {
  color: var(--c);
}

.qjmpe_tVCM53OPgSaUPk.aU4vA3Y7hqC6G5hElRpv .Zds1ffxIpGjJEriiVDIL {
  color: var(--fg);
  font-weight: 600;
}

.qjmpe_tVCM53OPgSaUPk:hover .Zds1ffxIpGjJEriiVDIL {
  color: var(--fg);
}

/* The return loop, built from borders rather than an SVG arc so it stays crisp
   at any width. The label sits below the arc rather than on it — the component
   background is transparent, so there is nothing to knock a gap in the border
   with. */
.sqTEzVfYH8OvFiWYVV7k {
  margin-top: 1.1rem;
}

.vR7PNqSNLkK6CVaVbm92 {
  display: block;
  position: relative;
  margin: 0 calc(50% / var(--n));
  height: 30px;
  border-left: 1px dashed var(--line);
  border-right: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  border-radius: 0 0 12px 12px;
  transition: border-color 0.45s ease;
}

.sqTEzVfYH8OvFiWYVV7k.FP4cghHi0opN3k0TcRFh .vR7PNqSNLkK6CVaVbm92 {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.VrdhWGlv0TOSnqotzXXz {
  position: absolute;
  left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid var(--line);
  transition: border-bottom-color 0.45s ease;
}

.sqTEzVfYH8OvFiWYVV7k.FP4cghHi0opN3k0TcRFh .VrdhWGlv0TOSnqotzXXz {
  border-bottom-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

.WK9FcYbDWoDw1BWvJ8M7 {
  display: block;
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.45s ease;
}

.sqTEzVfYH8OvFiWYVV7k.FP4cghHi0opN3k0TcRFh .WK9FcYbDWoDw1BWvJ8M7 {
  color: var(--muted);
}

/* ---- stage --------------------------------------------------------- */

.NnQ2aEnbQUuu6B6ktkbQ {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3.5rem;
  align-items: start;
  margin-top: 4.5rem;
}

.bCdpn91YeyUJOejRJx_M {
  grid-template-columns: minmax(0, 1fr);
}

/* All seven panels share one grid cell: the stage is as tall as the longest
   phase and never resizes as you move along the track. */
.cri7StGXM8IFCnkIa6kL {
  display: grid;
}

.YtCL6lziJfZoJ4JmR8pc {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.YtCL6lziJfZoJ4JmR8pc.aU4vA3Y7hqC6G5hElRpv {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.08s;
}

.yQsZWHUaXSr0CHGeQKO6 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c);
}

.B0JgzBEBbrykgX7_HNca {
  font-variant-numeric: tabular-nums;
}

.bGLcIPyT8dcwXaq92aEw {
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.FyxMtNF_PDxjcwe9b6Mw {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 2.6cqw, 2.35rem);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.vnJQpz5NMazEyjfuOHjw {
  margin: 0;
  max-width: 40rem;
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--muted);
}

/* ---- system state -------------------------------------------------- */

.bAzKCElo0kGA8CbQUEU1 {
  padding: 1.75rem;
  border: 1px solid var(--line);
  background: var(--panel);
}

.RJz03XYsfUf1D0nqgZ_Q {
  margin: 0 0 1.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

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

.jm_lZHudc5DuTn0ejTvL {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.2rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.jm_lZHudc5DuTn0ejTvL:first-child {
  border-top: 0;
  padding-top: 0;
}

.MX8EBPnAuvmjkpN0xZ8v {
  position: relative;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.MX8EBPnAuvmjkpN0xZ8v::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 7px;
  border: solid #001727;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.jm_lZHudc5DuTn0ejTvL.Fdz339ramzPf55VM0rMh .MX8EBPnAuvmjkpN0xZ8v {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: de9gi1qSO399ehV71yFv 1.8s ease-out infinite;
}

.jm_lZHudc5DuTn0ejTvL.HIDkaBdqJxzyrz6N_KEe .MX8EBPnAuvmjkpN0xZ8v {
  border-color: var(--ok);
  background: var(--ok);
}

.jm_lZHudc5DuTn0ejTvL.HIDkaBdqJxzyrz6N_KEe .MX8EBPnAuvmjkpN0xZ8v::after {
  transform: rotate(45deg) scale(1);
}

.AvYiLedTeuB_Yo5jZz4v {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fg);
}

.QzDVRvuWfBhkySanKwYS {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.4;
}

.ePXIW5cTxmN__Y76kx3L {
  color: var(--faint);
  transition:
    color 0.4s ease,
    opacity 0.4s ease;
}

.M702H5n3oIbOUfWnRaJK {
  color: var(--faint);
  transition:
    color 0.4s ease,
    transform 0.4s ease;
}

.A9AO0q6VPBWAT2Sbj_q6 {
  color: var(--faint);
  opacity: 0.45;
  transition:
    color 0.4s ease,
    opacity 0.4s ease;
}

.jm_lZHudc5DuTn0ejTvL.Fdz339ramzPf55VM0rMh .M702H5n3oIbOUfWnRaJK {
  color: var(--accent);
  animation: EjXK0pjp_12pRJ9fYsDI 1.4s ease-in-out infinite;
}

.jm_lZHudc5DuTn0ejTvL.Fdz339ramzPf55VM0rMh .A9AO0q6VPBWAT2Sbj_q6 {
  color: var(--fg);
  opacity: 1;
}

.jm_lZHudc5DuTn0ejTvL.HIDkaBdqJxzyrz6N_KEe .ePXIW5cTxmN__Y76kx3L {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--faint) 70%, transparent);
  opacity: 0.55;
}

.jm_lZHudc5DuTn0ejTvL.HIDkaBdqJxzyrz6N_KEe .A9AO0q6VPBWAT2Sbj_q6 {
  color: var(--ok);
  opacity: 1;
  font-weight: 500;
}

/* The caption swaps between three strings of different lengths, so — like the
   panels — all three share one grid cell and the aside is always as tall as the
   longest. Reserving the space is what stops the section changing height mid-
   sequence and shoving the content below it up and down. The rule and spacing
   live on the wrapper so the stacked captions don't overlap three borders. */
.p6vdgKpfsRZyV3zPxSHC {
  display: grid;
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.ijCYA7F2lv94URb1GO6m {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 300;
  color: var(--faint);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ijCYA7F2lv94URb1GO6m.aU4vA3Y7hqC6G5hElRpv {
  opacity: 1;
}

@keyframes de9gi1qSO399ehV71yFv {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

@keyframes EjXK0pjp_12pRJ9fYsDI {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
}

/* ---- cta ------------------------------------------------------------ */

/* Tinted rather than filled on hover: the accent tracks the active phase, and
   several of the brand colours have too little contrast to carry text. */
.SC5SISYsPu5dfjgVTTfA {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--accent);
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.25s ease,
    border-color 0.45s ease;
}

.SC5SISYsPu5dfjgVTTfA svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.SC5SISYsPu5dfjgVTTfA:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---- responsive ----------------------------------------------------- */

/*
 * Seven horizontal stops stop fitting well before the tablet breakpoint. Rather
 * than stacking into a tall vertical list — which pushes the phase copy and the
 * system-state card off screen on exactly the devices with the least room — the
 * track snakes: each row runs opposite to the row above it, and the line turns
 * down at the end of a row. The return arc is still dropped; it would have to
 * span the whole section to get back to the first stop.
 *
 * A serpentine position cannot be derived from an index in CSS, so the stops
 * are enumerated per column count. THE THREE BLOCKS BELOW ASSUME SEVEN STOPS —
 * changing the number of phases means revising them. The desktop track above
 * still derives its geometry from --n and needs no such maintenance.
 *
 * The stops are addressed with :nth-of-type, not :nth-child: .rail and
 * .railFill are the first two children of .track, so child indices are offset
 * by two. The stops are the only <button>s among those siblings, which makes
 * of-type indices line up with phase numbers.
 */

@container (max-width: 991px) {
  .t3_a9pCn7zfKoRDjo8nm {
    padding: 0 1.75rem;
  }

  /* One straight rail cannot follow a snake — each stop draws its own link to
     the next instead, so the line runs dot centre to dot centre. */
  .pTp_DEfvAaAcc6JEq3tH,
  .tHamUlfdRYaGOeouUxu2 {
    display: none;
  }

  .sqTEzVfYH8OvFiWYVV7k {
    display: none;
  }

  .uoHJhxR87DJeeGXzEdAg {
    --dot: 13px;
    --rowGap: 2.4rem;
    /* Fallback only; each block below sets the real count. */
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    row-gap: var(--rowGap);
    /* Stretched so every stop is exactly one row tall — the turn-down link
       measures itself as 100% of that height plus the row gap. */
    align-items: stretch;
  }

  .qjmpe_tVCM53OPgSaUPk {
    align-content: start;
    /* Equal columns are the whole basis of the link geometry: a link is
       exactly 100% of a stop wide because the next dot is exactly one column
       away. A verb wider than its 1fr share raises that column's min-content
       floor, 1fr stops being an equal share, and every link in the row falls
       short of the dot it is supposed to reach. */
    min-width: 0;
  }

  /* The safety valve for the above — OPERATIONALIZE is one unbreakable word,
     so at some width it has to break rather than widen its column. The sizes
     below are set so this never actually fires down to 320px. */
  .Zds1ffxIpGjJEriiVDIL {
    overflow-wrap: anywhere;
  }

  .BBOTUIdBmA5hQHwVbjIK {
    position: relative;
    z-index: 1;
  }

  .ebr34JS7o1Sp4zpzul2n {
    font-size: 0.8rem;
  }

  .qjmpe_tVCM53OPgSaUPk.aU4vA3Y7hqC6G5hElRpv .BBOTUIdBmA5hQHwVbjIK {
    transform: scale(1.3);
  }

  /* Shared link geometry. Direction is assigned per stop in the blocks below;
     without one of those rules this has no size and does not paint. */
  .qjmpe_tVCM53OPgSaUPk::before {
    content: '';
    position: absolute;
    top: calc(var(--numH) + var(--gapY) + var(--dot) / 2 - var(--rail) / 2);
    background: var(--line);
    transition: background 0.45s ease;
  }

  .qjmpe_tVCM53OPgSaUPk:last-of-type::before {
    display: none;
  }

  .qjmpe_tVCM53OPgSaUPk.GPPLzyHXMI_N1cCbXTVV::before {
    background: color-mix(in srgb, var(--c) 60%, transparent);
  }

  .NnQ2aEnbQUuu6B6ktkbQ {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-top: 2.75rem;
  }

  .vnJQpz5NMazEyjfuOHjw {
    font-size: 1.05rem;
  }

  .SC5SISYsPu5dfjgVTTfA {
    margin-top: 2rem;
  }
}

/*
 * The three placements below cascade on max-width alone rather than sitting in
 * min/max pairs. Paired ranges leave a hole at fractional container widths — a
 * column that computes to 767.5px matches neither (max-width: 767px) nor
 * (min-width: 768px) — and the track would fall back to the bare --cols
 * default there. Narrower blocks come later and simply overwrite the wider
 * ones, so every width lands in exactly one layout.
 *
 * Each link rule sets both `left` and `right`, one of them to auto. Without
 * that reset a stop keeps the offset a wider block gave it, ends up with
 * left, right and width all set at once, and silently resolves to whichever
 * the writing direction favours.
 */

/* Tablet — four across, then back along a row of three:

     01 02 03 04
              |
    (07 06 05)

*/
@container (max-width: 991px) {
  .uoHJhxR87DJeeGXzEdAg {
    --cols: 4;
  }

  .Zds1ffxIpGjJEriiVDIL {
    font-size: 0.9rem;
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(1) {
    grid-area: 1 / 1;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(2) {
    grid-area: 1 / 2;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(3) {
    grid-area: 1 / 3;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(4) {
    grid-area: 1 / 4;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(5) {
    grid-area: 2 / 4;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(6) {
    grid-area: 2 / 3;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(7) {
    grid-area: 2 / 2;
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(1)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(2)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(3)::before {
    left: 50%;
    right: auto;
    width: 100%;
    height: var(--rail);
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(4)::before {
    left: calc(50% - var(--rail) / 2);
    right: auto;
    width: var(--rail);
    height: calc(100% + var(--rowGap));
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(5)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(6)::before {
    left: auto;
    right: 50%;
    width: 100%;
    height: var(--rail);
  }
}

/* Large phone — three across, three back, one to finish. */
@container (max-width: 767px) {
  .uoHJhxR87DJeeGXzEdAg {
    --cols: 3;
  }

  .Zds1ffxIpGjJEriiVDIL {
    font-size: 0.82rem;
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(1) {
    grid-area: 1 / 1;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(2) {
    grid-area: 1 / 2;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(3) {
    grid-area: 1 / 3;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(4) {
    grid-area: 2 / 3;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(5) {
    grid-area: 2 / 2;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(6) {
    grid-area: 2 / 1;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(7) {
    grid-area: 3 / 1;
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(1)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(2)::before {
    left: 50%;
    right: auto;
    width: 100%;
    height: var(--rail);
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(4)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(5)::before {
    left: auto;
    right: 50%;
    width: 100%;
    height: var(--rail);
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(3)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(6)::before {
    left: calc(50% - var(--rail) / 2);
    right: auto;
    width: var(--rail);
    height: calc(100% + var(--rowGap));
  }
}

/* Small phone — two across. OPERATIONALIZE sets the floor on column width;
   below two columns it would have to wrap or shrink past legibility. */
@container (max-width: 479px) {
  /* Narrower gutter here buys the two columns ~16px each, which is the
     difference between OPERATIONALIZE fitting and not at 320px. */
  .t3_a9pCn7zfKoRDjo8nm {
    padding: 0 1.25rem;
  }

  .uoHJhxR87DJeeGXzEdAg {
    --cols: 2;
    --rowGap: 2rem;
  }

  .Zds1ffxIpGjJEriiVDIL {
    font-size: 0.8rem;
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(1) {
    grid-area: 1 / 1;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(2) {
    grid-area: 1 / 2;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(3) {
    grid-area: 2 / 2;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(4) {
    grid-area: 2 / 1;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(5) {
    grid-area: 3 / 1;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(6) {
    grid-area: 3 / 2;
  }
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(7) {
    grid-area: 4 / 2;
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(1)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(5)::before {
    left: 50%;
    right: auto;
    width: 100%;
    height: var(--rail);
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(3)::before {
    left: auto;
    right: 50%;
    width: 100%;
    height: var(--rail);
  }

  .qjmpe_tVCM53OPgSaUPk:nth-of-type(2)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(4)::before,
  .qjmpe_tVCM53OPgSaUPk:nth-of-type(6)::before {
    left: calc(50% - var(--rail) / 2);
    right: auto;
    width: var(--rail);
    height: calc(100% + var(--rowGap));
  }

  .bAzKCElo0kGA8CbQUEU1 {
    padding: 1.25rem;
  }

  .QzDVRvuWfBhkySanKwYS {
    flex-wrap: wrap;
  }
}

/* ---- reduced motion -------------------------------------------------- */

.jWw5vRCczatX6t5vaI3J.ht8snvko64jpbzfomXOk *,
.jWw5vRCczatX6t5vaI3J.ht8snvko64jpbzfomXOk *::before,
.jWw5vRCczatX6t5vaI3J.ht8snvko64jpbzfomXOk *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .jWw5vRCczatX6t5vaI3J *,
  .jWw5vRCczatX6t5vaI3J *::before,
  .jWw5vRCczatX6t5vaI3J *::after {
    animation: none !important;
    transition: none !important;
  }
}