/* The explaining parts of the pages (cx-): a card with a title on the left and its lead from the line
   of the homepage's headline (50.27%), and below it a grid of numbered points, a row of steps, or a
   list of checks or crosses. Used on the homepage (where the money leaks, what you can hold us to),
   the solutions page (how process improvement runs) and about (what we believe, what we will not
   do). motion.js brings them in; this file is the resting state. */

.cx-sec {
  position: relative;
  padding: 16px 16px 0;
}

.cx-sec--last {
  padding-bottom: 120px;
}

.cx-card {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  padding: 48px 32px 44px 40px;
}

.cx-card > .pg-fx,
.cx-card > .cx-fx {
  border-radius: inherit;
}

.cx-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cx-fx--grain {
  background: url(img/grain-card.png) 0 0 / 128px 128px repeat;
  mix-blend-mode: overlay;
  opacity: 0.1;
}

.cx-fx--dots {
  background-image: radial-gradient(circle at center, rgba(255, 252, 225, 0.09) 0.62px, rgba(255, 252, 225, 0) 1.05px);
  background-size: 7.5px 7.5px;
}

.cx-fx--ink {
  background-image: radial-gradient(circle at center, rgba(37, 35, 36, 0.08) 0.62px, rgba(37, 35, 36, 0) 1.05px);
  background-size: 7.5px 7.5px;
}

.cx-card--black {
  background: #000000;
  color: #fffce1;
  box-shadow: inset 0 0 0 1px rgba(122, 119, 114, 0.45);
}

.cx-card--cream {
  background: #fffce1;
  color: #000000;
}

.cx-card--butter {
  background: #feeb8d;
  color: #252324;
}

.cx-card--lilac {
  background: var(--third, #c9b6f5);
  color: #252324;
}

/* a title on the left, its lead on the right */
.cx-split {
  position: relative;
  display: grid;
  grid-template-columns: calc(50.27% - 4px) minmax(0, 1fr);
  align-items: end;
  row-gap: 24px;
}

.cx-h2 {
  margin: 0;
  font-size: clamp(44px, 4.6vw, 96px);
  font-weight: 550;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.cx-h2 > span {
  display: block;
}

.cx-h2 > span + span {
  opacity: 0.5;
}

.cx-lead {
  margin: 0;
  max-width: 32em;
  font-size: clamp(19px, 1.45vw, 26px);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.cx-card--black .cx-lead {
  color: rgba(255, 252, 225, 0.82);
}

.cx-card--cream .cx-lead {
  color: #6f6d60;
}

.cx-card--butter .cx-lead,
.cx-card--lilac .cx-lead {
  color: rgba(37, 35, 36, 0.78);
}

.cx-note {
  position: relative;
  margin: 28px 0 0;
  max-width: 46em;
  font-size: clamp(17px, 1.2vw, 22px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.cx-card--black .cx-note {
  color: rgba(255, 252, 225, 0.7);
}

.cx-card--cream .cx-note {
  color: #6f6d60;
}

.cx-note a,
.cx-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cx-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  margin-top: 32px;
  padding: 0 26px;
  border-radius: 999px;
  background: #252324;
  color: #fffce1;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cx-more,
.cx-more:hover {
  color: #fffce1;
}

.cx-more:hover {
  background: #000000;
}

.cx-card--black .cx-more {
  background: #feeb8d;
  color: #252324;
}

.cx-card--black .cx-more:hover {
  background: #fffce1;
  color: #252324;
}

/* ------------------------------------------------------------ numbered points */

.cx-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

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

.cx-item {
  display: flex;
  flex-direction: column;
  padding: 26px 0 34px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(255, 252, 225, 0.16);
}

.cx-card--cream .cx-item {
  border-top-color: #d3d1bb;
}

.cx-card--butter .cx-item,
.cx-card--lilac .cx-item {
  border-top-color: rgba(37, 35, 36, 0.2);
}

.cx-no {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.04em;
  opacity: 0.6;
}

.cx-title {
  margin: 18px 0 0;
  font-size: clamp(26px, 2vw, 40px);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.cx-text {
  margin: 14px 0 0;
  max-width: 26em;
  font-size: clamp(17px, 1.2vw, 22px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.cx-card--black .cx-text {
  color: rgba(255, 252, 225, 0.7);
}

.cx-card--cream .cx-text {
  color: #6f6d60;
}

.cx-card--butter .cx-text,
.cx-card--lilac .cx-text {
  color: rgba(37, 35, 36, 0.75);
}

/* what to do about it: a rung on the ladder */
.cx-fix {
  align-self: flex-start;
  margin: 18px 0 0;
  padding: 7px 14px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cx-card--black .cx-fix {
  color: #feeb8d;
}

/* ------------------------------------------------------------ steps in a row */

.cx-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 24px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: cx-step;
}

.cx-step {
  position: relative;
  padding-top: 64px;
}

/* the line the steps stand on, and a dot for each */
.cx-step::before {
  content: '';
  position: absolute;
  left: 0;
  right: -24px;
  top: 21px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.25;
}

.cx-step:last-child::before {
  right: 0;
}

.cx-step::after {
  counter-increment: cx-step;
  content: counter(cx-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #feeb8d;
  color: #252324;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.cx-card--butter .cx-step::after {
  background: #252324;
  color: #feeb8d;
}

.cx-step .cx-title {
  margin-top: 0;
  font-size: clamp(24px, 1.7vw, 34px);
}

/* ------------------------------------------------------------ checks and crosses */

.cx-checks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.cx-check {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0 28px;
  border-top: 1px solid rgba(255, 252, 225, 0.16);
}

.cx-card--cream .cx-check,
.cx-card--butter .cx-check,
.cx-card--lilac .cx-check {
  border-top-color: rgba(37, 35, 36, 0.2);
}

.cx-check svg {
  width: 26px;
  height: 26px;
  margin-top: 2px;
}

.cx-card--black .cx-check svg {
  color: #feeb8d;
}

.cx-check .cx-title {
  margin: 0;
  font-size: clamp(22px, 1.6vw, 32px);
  line-height: 1.08;
}

.cx-check .cx-text {
  margin-top: 8px;
}

/* ------------------------------------------------------------ smaller screens */

@media (max-width: 1100px) {
  .cx-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cx-step {
    padding: 0 0 32px 72px;
    min-height: 44px;
  }

  .cx-step::before {
    left: 21px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1.5px;
    height: auto;
  }

  .cx-step:last-child::before {
    bottom: auto;
    height: 44px;
  }
}

@media (max-width: 1000px) {
  .cx-split {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

@media (max-width: 720px) {
  .cx-sec--last {
    padding-bottom: 96px;
  }

  .cx-card {
    border-radius: 32px;
    padding: 32px 20px 30px;
  }

  .cx-grid,
  .cx-grid--2 {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }

  .cx-steps,
  .cx-checks {
    margin-top: 32px;
  }

  .cx-more {
    height: 48px;
    font-size: 18px;
  }
}

/* a card that follows another in the same section */
.cx-card--follow {
  margin-top: 16px;
}

/* ------------------------------------------------------------ where the money leaks (index.html) */

/* From every request to the paid invoice: a band that loses a little at six places, numbered as the
   list under it. A picture, not a measurement: it has no numbers. With the pointer on a leak in the
   list, that leak lights up in the band. What moves: see "moving parts" below. */
.lk-flow {
  position: relative;
  margin: 56px 0 0;
  padding-bottom: 34px;
}

.lk-flow__axis {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 252, 225, 0.82);
}

/* an arrow between them, along the band */
.lk-flow__axis::before {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 252, 225, 0.3), rgba(255, 252, 225, 0.08));
}

.lk-flow__axis span:last-child {
  order: 2;
}

.lk-flow__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lk-leak,
.lk-drip,
.lk-flow__no {
  transition: opacity 0.35s ease;
}

.lk-flow__no {
  position: absolute;
  left: var(--x);
  bottom: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: #feeb8d;
  color: #252324;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lk-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.lk-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 252, 225, 0.16);
  transition: border-color 0.3s ease;
}

.lk-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(254, 235, 141, 0.85);
  color: #feeb8d;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.lk-title {
  margin: 18px 0 0;
  font-size: clamp(24px, 1.8vw, 34px);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.lk-text {
  margin: 12px 0 0;
  max-width: 26em;
  color: rgba(255, 252, 225, 0.7);
  font-size: clamp(16.5px, 1.12vw, 20px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.lk-item .cx-fix {
  color: #feeb8d;
}

/* a leak in the list under the pointer: the others step back */
.lk-item:hover {
  border-top-color: rgba(254, 235, 141, 0.7);
}

.lk-item:hover .lk-no {
  background: #feeb8d;
  color: #252324;
}

.lk:has(.lk-item:hover) .lk-leak,
.lk:has(.lk-item:hover) .lk-drip,
.lk:has(.lk-item:hover) .lk-flow__no {
  opacity: 0.18;
}

.lk:has(.lk-item--1:hover) :is(.lk-leak--1, .lk-drip--1, .lk-flow__no:nth-of-type(1)),
.lk:has(.lk-item--2:hover) :is(.lk-leak--2, .lk-drip--2, .lk-flow__no:nth-of-type(2)),
.lk:has(.lk-item--3:hover) :is(.lk-leak--3, .lk-drip--3, .lk-flow__no:nth-of-type(3)),
.lk:has(.lk-item--4:hover) :is(.lk-leak--4, .lk-drip--4, .lk-flow__no:nth-of-type(4)),
.lk:has(.lk-item--5:hover) :is(.lk-leak--5, .lk-drip--5, .lk-flow__no:nth-of-type(5)),
.lk:has(.lk-item--6:hover) :is(.lk-leak--6, .lk-drip--6, .lk-flow__no:nth-of-type(6)) {
  opacity: 1;
}

/* ------------------------------------------------------------ what you can hold us to (index.html) */

/* Each rule with a small picture of it on top: a number in the proposal, its source, a promise
   struck through for a sum, the people it changes, the button your team presses, data blacked out. */
.pr-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.pr-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pr-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 196px;
  overflow: hidden;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pr-art p {
  margin: 0;
}

.pr-art--butter {
  background: #feeb8d;
  color: #252324;
}

.pr-art--lilac {
  background: var(--third, #c9b6f5);
  color: #252324;
}

.pr-art--dark {
  background: #252324;
  color: #fffce1;
}

.pr-art--black {
  background: #000000;
  color: #fffce1;
}

.pr-title {
  margin: 22px 0 0;
  font-size: clamp(22px, 1.6vw, 30px);
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.pr-text {
  margin: 10px 0 0;
  max-width: 26em;
  color: #6f6d60;
  font-size: clamp(16.5px, 1.12vw, 20px);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.pr-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* a number in every proposal: what it costs now, what it will, when it has paid for itself */
.pr-num {
  width: 228px;
  padding: 10px 16px;
  border-radius: 16px;
  background: #fffce1;
  box-shadow: 0 18px 34px -20px rgba(37, 35, 36, 0.55);
}

.pr-num__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
}

.pr-num__row + .pr-num__row {
  border-top: 1px solid rgba(37, 35, 36, 0.12);
}

.pr-num__row span {
  flex: none;
  width: 72px;
  color: rgba(37, 35, 36, 0.66);
  font-size: 12px;
}

.pr-num__row b {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: #252324;
  transform-origin: 0 50%;
}

.pr-num__row:nth-child(1) b { width: 100%; }
.pr-num__row:nth-child(2) b { width: 58%; opacity: 0.5; }

.pr-num__row--ok span {
  color: #252324;
  font-weight: 600;
}

.pr-num__row i,
.pr-press__btn::after {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #252324;
}

.pr-num__row i::after,
.pr-press__btn::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  width: 4px;
  height: 8px;
  border: solid #feeb8d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* every number has a source: measured, given by you, or assumed */
.pr-src {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.pr-src__value {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: #fffce1;
  box-shadow: 0 18px 34px -20px rgba(37, 35, 36, 0.55);
}

.pr-src__value b {
  display: block;
  width: 64px;
  height: 14px;
  border-radius: 7px;
  background: #252324;
}

.pr-src__value b + b {
  width: 34px;
  opacity: 0.35;
}

.pr-src__tags {
  position: relative;
  display: grid;
  height: 32px;
  min-width: 132px;
}

.pr-src__tags span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  background: #252324;
  color: #fffce1;
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
}

.pr-src__tags span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #feeb8d;
}

.pr-src__tags span:not(:first-child) {
  opacity: 0;
}

/* no savings we have not calculated: the promise struck through, the sum instead */
.pr-calc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pr-calc__hype {
  position: relative;
  padding: 7px 16px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 252, 225, 0.45);
  color: rgba(255, 252, 225, 0.55);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transform: rotate(-4deg);
}

.pr-calc__hype::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: #feeb8d;
  transform-origin: 0 50%;
}

.pr-calc__sum {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pr-calc__sum span {
  padding: 6px 11px;
  border-radius: 999px;
  background: #fffce1;
  color: #252324;
  font-size: 12.5px;
  font-weight: 550;
}

.pr-calc__sum .pr-calc__out {
  background: #feeb8d;
}

.pr-calc__sum em {
  color: #feeb8d;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
}

/* the people side: what changes for whom, out in the open */
.pr-people {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding-top: 28px;
}

.pr-people__p {
  position: relative;
  width: 40px;
  height: 52px;
}

/* a head and shoulders */
.pr-people__p::before,
.pr-people__p::after {
  content: '';
  position: absolute;
  left: 50%;
  background: rgba(255, 252, 225, 0.35);
}

.pr-people__p::before {
  top: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
}

.pr-people__p::after {
  bottom: 0;
  width: 40px;
  height: 27px;
  margin-left: -20px;
  border-radius: 20px 20px 8px 8px;
}

.pr-people__p--hot::before,
.pr-people__p--hot::after {
  background: #feeb8d;
}

.pr-people__p em {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 5px 10px;
  border-radius: 999px;
  background: #fffce1;
  color: #252324;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* your people press the button */
.pr-press {
  position: relative;
  width: 240px;
  height: 120px;
}

.pr-press__btn {
  position: absolute;
  left: 50%;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: #252324;
  color: #fffce1;
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  translate: -50% 0;
}

.pr-press__btn::after {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  background: #feeb8d;
}

.pr-press__btn::before {
  left: auto;
  right: 21px;
  top: 14px;
  border-color: #252324;
  z-index: 1;
}

.pr-press__who {
  position: absolute;
  left: 150px;
  top: 58px;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.pr-press__who svg {
  width: 20px;
  height: 22px;
}

.pr-press__who em {
  margin-top: 16px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--third, #c9b6f5);
  color: #252324;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

/* your data stays yours: what a report does not need is blacked out */
.pr-data {
  position: relative;
  width: 228px;
  padding: 8px 16px;
  border-radius: 16px;
  background: #fffce1;
  box-shadow: 0 18px 34px -20px rgba(37, 35, 36, 0.55);
}

.pr-data__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
}

.pr-data__row + .pr-data__row {
  border-top: 1px solid rgba(37, 35, 36, 0.12);
}

.pr-data__row span {
  flex: none;
  width: 48px;
  color: rgba(37, 35, 36, 0.66);
  font-size: 12px;
}

.pr-data__row b {
  position: relative;
  display: block;
  width: 62%;
  height: 12px;
  border-radius: 3px;
  background: #252324;
}

.pr-data__row b.pr-data__keep {
  width: 30%;
  height: 9px;
  border-radius: 5px;
  background: rgba(37, 35, 36, 0.35);
}

.pr-data__lock {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #252324;
}

.pr-data__lock::after {
  content: '';
  position: absolute;
  inset: 8px 9.5px 8px;
  background: #feeb8d;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2.6 5.6V4a2.9 2.9 0 0 1 5.8 0v1.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='1' y='5.6' width='9' height='6.6' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M2.6 5.6V4a2.9 2.9 0 0 1 5.8 0v1.6' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='1' y='5.6' width='9' height='6.6' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------ moving parts of both blocks */

/* motion.js marks a block with data-inview .is-in once it is well in sight, and .is-on while it is in
   sight at all. Everything here plays from its first frame to the picture above; without motion
   (no JavaScript, reduced motion) the picture above is what shows. */
.js.motion [data-inview] *,
.js.motion [data-inview] *::before,
.js.motion [data-inview] *::after {
  animation-fill-mode: both;
  animation-play-state: paused;
}

.js.motion [data-inview].is-in *,
.js.motion [data-inview].is-in *::before,
.js.motion [data-inview].is-in *::after {
  animation-play-state: running;
}

@keyframes cx-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes cx-pop {
  0% { opacity: 0; transform: scale(0.4); }
  70% { opacity: 1; transform: scale(1.12); }
}

@keyframes cx-rise {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes cx-grow {
  from { transform: scaleX(0); }
}

/* the flow draws itself from left to right, the leaks get their numbers as it passes them; then the
   money keeps moving along the band and down the leaks */
.js.motion .lk-flow__draw { animation: cx-wipe 2.8s cubic-bezier(0.55, 0, 0.3, 1) 0.1s both paused; }
.js.motion .lk-flow__axis { animation: cx-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0s both paused; }
.js.motion .lk-flow__no { animation: cx-pop 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 1s) both paused; }
.js.motion .lk-stream path { animation: lk-stream 1.4s linear infinite both paused; }
.js.motion .lk-stream .lk-stream__b { animation-duration: 1.9s; }
.js.motion .lk-drip { animation: lk-drip 1.6s linear infinite both paused; }

@keyframes lk-stream {
  to { stroke-dashoffset: -52; }
}

@keyframes lk-drip {
  to { stroke-dashoffset: -30; }
}

.js.motion .lk-flow.is-in:not(.is-on) .lk-stream path,
.js.motion .lk-flow.is-in:not(.is-on) .lk-drip {
  animation-play-state: paused;
}

/* the rules */
.js.motion .pr-num { animation: cx-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both paused; }
.js.motion .pr-num__row b { animation: cx-grow 0.9s cubic-bezier(0.65, 0, 0.35, 1) both paused; }
.js.motion .pr-num__row:nth-child(1) b { animation-delay: 0.5s; }
.js.motion .pr-num__row:nth-child(2) b { animation-delay: 0.85s; }
.js.motion .pr-num__row i { animation: cx-pop 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s both paused; }

.js.motion .pr-src__value { animation: cx-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both paused; }
.js.motion .pr-src__tags span { animation: pr-src 7.5s cubic-bezier(0.65, 0, 0.35, 1) infinite both paused; }
.js.motion .pr-src__tags span:nth-child(1) { animation-delay: 0.5s; }
.js.motion .pr-src__tags span:nth-child(2) { animation-delay: 3s; }
.js.motion .pr-src__tags span:nth-child(3) { animation-delay: 5.5s; }

@keyframes pr-src {
  0% { opacity: 0; transform: translateY(10px); }
  5%, 30% { opacity: 1; transform: none; }
  35%, 100% { opacity: 0; transform: translateY(-10px); }
}

.js.motion .pr-calc__hype { animation: cx-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both paused; }
.js.motion .pr-calc__hype::after { animation: cx-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both paused; }
.js.motion .pr-calc__sum > * { animation: cx-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both paused; }
.js.motion .pr-calc__sum > :nth-child(1) { animation-delay: 1.4s; }
.js.motion .pr-calc__sum > :nth-child(2) { animation-delay: 1.5s; }
.js.motion .pr-calc__sum > :nth-child(3) { animation-delay: 1.6s; }
.js.motion .pr-calc__sum > :nth-child(4) { animation-delay: 1.7s; }
.js.motion .pr-calc__sum > :nth-child(5) { animation-delay: 1.85s; }

.js.motion .pr-people__p { animation: cx-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both paused; }
.js.motion .pr-people__p:nth-child(1) { animation-delay: 0.1s; }
.js.motion .pr-people__p:nth-child(2) { animation-delay: 0.2s; }
.js.motion .pr-people__p:nth-child(3) { animation-delay: 0.3s; }
.js.motion .pr-people__p:nth-child(4) { animation-delay: 0.4s; }
.js.motion .pr-people__p--hot::before,
.js.motion .pr-people__p--hot::after { animation: pr-hot 0.6s ease 1.1s both paused; }
.js.motion .pr-people__p em { animation: pr-tag 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.3s both paused; }

@keyframes pr-hot {
  from { background: rgba(255, 252, 225, 0.35); }
}

@keyframes pr-tag {
  from { opacity: 0; translate: 0 8px; scale: 0.9; }
}

.js.motion .pr-press__btn { animation: cx-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both paused, pr-press 5s ease 0.9s infinite both paused; }
.js.motion .pr-press__btn::after { animation: pr-press-ok 5s ease 0.9s infinite both paused; }
.js.motion .pr-press__btn::before { animation: pr-press-tick 5s ease 0.9s infinite both paused; }
.js.motion .pr-press__who { animation: pr-press-who 5s cubic-bezier(0.45, 0, 0.2, 1) 0.9s infinite both paused; }

@keyframes pr-press-who {
  0% { opacity: 0; transform: translate(60px, 50px); }
  12% { opacity: 1; }
  40% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(0, 0) scale(0.85); }
  50% { transform: translate(0, 0) scale(1); }
  85% { opacity: 1; transform: translate(4px, 4px); }
  100% { opacity: 0; transform: translate(30px, 30px); }
}

@keyframes pr-press {
  0%, 44% { scale: 1; }
  47% { scale: 0.94; }
  52%, 100% { scale: 1; }
}

@keyframes pr-press-ok {
  0%, 46% { background: rgba(255, 252, 225, 0.18); }
  50%, 92% { background: #feeb8d; }
  100% { background: rgba(255, 252, 225, 0.18); }
}

@keyframes pr-press-tick {
  0%, 47% { opacity: 0; }
  52%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

.js.motion .pr-data { animation: cx-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both paused; }
.js.motion .pr-data__row b { animation: pr-redact 1.6s cubic-bezier(0.65, 0, 0.35, 1) both paused; }
.js.motion .pr-data__row .pr-data__keep { animation: none; }
.js.motion .pr-data__row:nth-child(1) b { animation-delay: 0.7s; }
.js.motion .pr-data__row:nth-child(2) b { animation-delay: 1s; }
.js.motion .pr-data__lock { animation: cx-pop 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 1.9s both paused; }

/* a name, then blacked out */
@keyframes pr-redact {
  0% { background: rgba(37, 35, 36, 0.3); height: 9px; border-radius: 5px; }
  45% { background: rgba(37, 35, 36, 0.3); height: 9px; border-radius: 5px; }
  70%, 100% { background: #252324; height: 12px; border-radius: 3px; }
}

.js.motion .pr-card.is-in:not(.is-on) .pr-src__tags span,
.js.motion .pr-card.is-in:not(.is-on) .pr-press__btn,
.js.motion .pr-card.is-in:not(.is-on) .pr-press__btn::before,
.js.motion .pr-card.is-in:not(.is-on) .pr-press__btn::after,
.js.motion .pr-card.is-in:not(.is-on) .pr-press__who {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  [data-inview] *,
  [data-inview] *::before,
  [data-inview] *::after {
    animation: none !important;
  }
}

/* ------------------------------------------------------------ both blocks on smaller screens */

@media (max-width: 1000px) {
  .lk-list,
  .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .lk-flow {
    margin-top: 36px;
    padding-bottom: 30px;
  }

  .lk-flow__axis {
    font-size: 14px;
  }

  .lk-flow__no {
    width: 24px;
    height: 24px;
    margin-left: -12px;
    font-size: 12.5px;
  }

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

  .lk-list {
    margin-top: 32px;
  }

  .pr-grid {
    gap: 32px;
    margin-top: 32px;
  }
}