/*
 * Process Steps: "Identify what matters → … → Measure, learn, iterate", with the
 * steps lottie (lottie/dist/steps/steps-*.json) scrubbed by the page scroll.
 * Figma "Eleken Site 2026": desktop 375:1808, tablet 396:1258, mobile 409:7596.
 *
 * This CSS lives inside the component's Shadow DOM: site classes never reach it,
 * but site variables (var(--…)) and the site's @font-face fonts do.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 *
 * Every breakpoint is its Figma frame scaled to the component's width: 100cqw is
 * the frame's width (--w, in Figma pixels), so a Figma x or y becomes
 * calc(x / var(--w) * 100cqw). Only positions and widths scale. Type keeps its
 * size, and each text block keeps its Figma offset from its dot (--dx, --dy), so
 * the text stays next to its dot at any width.
 */

:host {
  display: block;
}

.ps,
.ps *,
.ps *::before,
.ps *::after {
  box-sizing: border-box;
}

/* Desktop: Content Frame 375:1808, 1008 × 609 */
.ps {
  container-type: inline-size;
  width: 100%;
  max-width: 1008px;
  margin: 0 auto;
  color: var(--colors--main, #1d1e22);
  font-family: "Inter Variable Local", Inter, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  overflow-wrap: break-word;
  --w: 1008;
  /* the lottie canvas in the frame: [left, top, width, height] */
  --art-x: -2;
  --art-y: 40;
  --art-w: 1024;
  --art-h: 380;
  /* a text block's top-left, from its dot's centre */
  --dx: 25px;
  --dy: -10px;
  --block: 251;
  /* Figma's frame runs on below the last text block */
  --after: 70px;
}

.ps-stage {
  position: relative;
}

.ps-art {
  position: absolute;
  top: calc(var(--art-y) / var(--w) * 100cqw);
  left: calc(var(--art-x) / var(--w) * 100cqw);
  width: calc(var(--art-w) / var(--w) * 100cqw);
  height: calc(var(--art-h) / var(--w) * 100cqw);
  pointer-events: none;
}

/* lottie-web's <svg> fills the box; as an inline box it would add a baseline gap */
.ps-art > svg {
  display: block;
}

/* All steps share one grid cell, each pushed to its dot by its margins, so the
   list is as tall as its lowest step. */
.ps-steps {
  display: grid;
  margin: 0;
  padding: 0 0 var(--after);
  list-style: none;
}

.ps-step {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  width: calc(var(--block) / var(--w) * 100cqw);
  margin: calc(var(--y) / var(--w) * 100cqw + var(--dy)) 0 0 calc(var(--x) / var(--w) * 100cqw + var(--dx));
}

.ps-step[data-step="1"] { --x: 64; --y: 128; }
.ps-step[data-step="2"] { --x: 361; --y: 128; }
.ps-step[data-step="3"] { --x: 658; --y: 128; }
.ps-step[data-step="4"] { --x: 658; --y: 407; --text: 238; }
.ps-step[data-step="5"] { --x: 361; --y: 407; --text: 216; }
.ps-step[data-step="mobile"] { display: none; }

.ps-title {
  margin: 0;
  color: var(--colors--main, #1d1e22);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

/* Figma sets some descriptions narrower than their block, for the line breaks. */
.ps-text {
  max-width: calc(var(--text, var(--block)) / var(--w) * 100cqw);
  margin: 18px 0 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 13px;
  line-height: 20px;
  white-space: pre-line;
}

/* Tablet: Frame 396:1258, 682 × 718 */
@media screen and (max-width: 991px) {
  .ps {
    max-width: none;
    --w: 682;
    --art-x: -16;
    --art-y: -16;
    --art-w: 716;
    --art-h: 592;
    --dx: 25px;
    --dy: -11px;
    --block: 240;
    --after: 0px;
  }

  .ps-step[data-step="1"] { --x: 62; --y: 55; }
  .ps-step[data-step="2"] { --x: 350; --y: 55; }
  .ps-step[data-step="3"] { --x: 350; --y: 309; }
  .ps-step[data-step="4"] { --x: 62; --y: 309; --text: 240; }
  .ps-step[data-step="5"] { --x: 62; --y: 563; --text: 240; }

  .ps-text {
    color: var(--body, #717171);
    font-size: 15px;
    line-height: 25px;
  }
}

/* Mobile: Frame 409:7596, 288 × 1401, with the extra «Interface design» step */
@media screen and (max-width: 767px) {
  .ps {
    max-width: 400px;
    --w: 288;
    --art-x: -12;
    --art-y: 12;
    --art-w: 314;
    --art-h: 1260;
    --dx: 24px;
    --dy: -11px;
    --block: 198;
  }

  .ps-step[data-step="1"] { --x: 51; --y: 90; --block: 201; }
  .ps-step[data-step="2"] { --x: 51; --y: 324; }
  .ps-step[data-step="3"] { --x: 51; --y: 558; }
  .ps-step[data-step="4"] { --x: 51; --y: 792; --text: 198; }
  .ps-step[data-step="mobile"] { display: block; --x: 51; --y: 1026; }
  .ps-step[data-step="5"] { --x: 51; --y: 1260; --text: 198; }

  .ps-title {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: normal;
  }

  .ps-text {
    margin-top: 10px;
    font-size: 13px;
    line-height: 20px;
  }
}