/*
 * Redesign Approach: the whole "How we approach a SaaS product redesign" section —
 * the loop of four steps the orange ball rides as the page scrolls, the arrow down to
 * "Two ways to redesign", the split to the two cards with their illustrations, and
 * "Not sure which you need?" with a slot for the site's button. Every drawing is a
 * lottie from lottie/dist/redesign. Figma "Eleken Site 2026": desktop 1062:1342,
 * tablet 1062:2853, mobile 1062:4414.
 *
 * 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.
 *
 * The section's own padding and its #F9F7F3 background come from the Webflow
 * section around the component (Figma: 150px top and bottom on desktop).
 */

:host {
  display: block;
}

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

/* Desktop: Section / Redesign Approach 1062:1342, content 1008 wide, 40px between blocks */
.ra {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  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;
}

.ra-h2,
.ra-step-title,
.ra-card-title {
  margin: 0;
  color: var(--colors--main, #1d1e22);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-weight: 500;
}

.ra-h2 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.64px;
  text-align: center;
  text-wrap: balance;
}

.ra-lead {
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
  text-align: center;
  white-space: pre-line;
}

/* ---- Section Header 1062:1343 ------------------------------------------------- */

.ra-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

/* ---- The loop: List / Approach Principles 1062:1346, 1008 × 609 -----------------
 *
 * As in Audit Steps, the frame is scaled to the stage'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).
 */

.ra-stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1008px;
  --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: 340;
  /* Figma's frame runs on below the lowest text block: its blocks are 167 high
     (45 under the text), then 45 more to the frame's bottom */
  --after: 90px;
}

.ra-route {
  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 */
.ra-route > svg,
.ra-arrow-art > svg,
.ra-split-art > svg,
.ra-card-lottie > 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. */
.ra-steps {
  display: grid;
  margin: 0;
  padding: 0 0 var(--after);
  list-style: none;
}

.ra-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  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));
}

/* The dots' centres in the frame, in route order: top left, top right, then back
   along the bottom from the right. */
.ra-step[data-step="1"] { --x: 78; --y: 128; }
.ra-step[data-step="2"] { --x: 541; --y: 128; }
.ra-step[data-step="3"] { --x: 541; --y: 407; }
.ra-step[data-step="4"] { --x: 78; --y: 407; }

.ra-step-title {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.ra-step-text {
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 13px;
  line-height: 20px;
  white-space: pre-line;
}

/* The steps' text rides in with the ball (useScrollLottie.ts): --in runs 0 → 1 on a
   step while the ball travels to its dot, so the steps ahead wait pale and a little
   low and rise into place as it comes; scrolling back takes them back. The title
   leads, the text follows. --a is how far each one is in. data-motion is only there
   while the ball is driven by the scroll: before the lottie loads, with reduced
   motion and in the Designer the text is simply there. The short transition evens
   out the steps between scroll frames. */
.ra-steps[data-motion] .ra-step-title,
.ra-steps[data-motion] .ra-step-text {
  opacity: calc(0.16 + 0.84 * var(--a));
  transform: translateY(calc((1 - var(--a)) * 14px));
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.ra-steps[data-motion] .ra-step-title {
  --a: clamp(0, var(--in, 1) * 1.3, 1);
}

.ra-steps[data-motion] .ra-step-text {
  --a: clamp(0, var(--in, 1) * 1.3 - 0.3, 1);
}

/* ---- Arrow 1062:1378: 12 × 120; the lottie is the export plus room for the pen --- */

.ra-arrow {
  position: relative;
  flex: none;
  width: 12px;
  height: 120px;
}

.ra-arrow-art {
  position: absolute;
  top: -8px;
  left: -7.38px;
  width: 27px;
  height: 136px;
  pointer-events: none;
}

/* ---- "Two ways to redesign" 1062:1379 and the split 1062:1380 ------------------- */

.ra-ways-title {
  max-width: 486px;
}

/* "Two ways to redesign" and the cards' text come in with their drawings
   (usePlayOnce.ts): they wait while the drawing is loaded but hasn't started
   ("ready", "waiting") and rise into place as it plays — the title as the arrow's pen
   comes down to it, a card's text just behind its illustration. Waiting is instant,
   coming in is timed. A drawing with no state — not loaded — leaves its text be. */
.ra-arrow:has(> :is([data-state="ready"], [data-state="waiting"])) + .ra-ways-title,
.ra-card:has(.ra-card-lottie:is([data-state="ready"], [data-state="waiting"])) .ra-card-body {
  opacity: 0;
  transform: translateY(16px);
}

.ra-arrow:has(> :is([data-state="playing"], [data-state="drawn"])) + .ra-ways-title {
  transition:
    opacity 0.6s ease-out 0.55s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}

.ra-card:has(.ra-card-lottie:is([data-state="playing"], [data-state="drawn"])) .ra-card-body {
  transition:
    opacity 0.6s ease-out 0.3s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.ra-split {
  position: relative;
  flex: none;
  width: 499.92px;
  height: 171.5px;
}

.ra-split-art {
  position: absolute;
  top: -8px;
  left: -7px;
  width: 514px;
  height: 187px;
  pointer-events: none;
}

/* ---- Grid / Redesign Options 1062:1381: two cards of 496 through 16 ------------- */

.ra-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.ra-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 0 40px;
  text-align: center;
}

/* Illustration / Container: 242 high; the lottie (236 × 236) sits 5px down, its
   centre a pixel left of the container's, as in Figma. */
.ra-card-art {
  position: relative;
  flex: none;
  width: 100%;
  height: 242px;
}

.ra-card-lottie {
  position: absolute;
  top: 5px;
  left: calc(50% - 119px);
  width: 236px;
  height: 236px;
  pointer-events: none;
}

.ra-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ra-card-title {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.18px;
}

.ra-card-text {
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
  white-space: pre-line;
}

/* ---- Callout / UX Audit 1062:1468 ----------------------------------------------- */

.ra-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ra-callout-title {
  max-width: 486px;
}

.ra-callout-text {
  max-width: 416px;
  margin-top: 4px;
}

.ra-button {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

/* ---- Tablet: 1062:2853 — 60px between blocks ------------------------------------ */
@media screen and (max-width: 991px) {
  .ra {
    gap: 60px;
    max-width: none;
  }

  .ra-head-title {
    max-width: 465px;
  }

  /* List / Approach Principles 1062:2857, 682 × 658 */
  .ra-stage {
    max-width: 682px;
    --w: 682;
    --art-x: 0;
    --art-y: -14;
    --art-w: 697;
    --art-h: 408;
    --dx: 25px;
    --dy: -11px;
    --block: 240;
    --after: 44px;
  }

  .ra-step[data-step="1"] { --x: 62; --y: 55; }
  .ra-step[data-step="2"] { --x: 350; --y: 55; }
  .ra-step[data-step="3"] { --x: 350; --y: 384; }
  .ra-step[data-step="4"] { --x: 62; --y: 384; }

  .ra-step-text {
    font-size: 15px;
    line-height: 25px;
  }

  /* 1062:2893: the desktop split resized to 388 × 171 */
  .ra-split {
    width: 388px;
    height: 171px;
  }

  .ra-split-art {
    width: 402px;
    height: 186px;
  }

  /* Grid / Redesign Options 1062:2894: two cards of 314 through 48, text on the left */
  .ra-cards {
    gap: 48px;
    max-width: 676px;
  }

  .ra-card {
    align-items: stretch;
    padding: 0;
    text-align: left;
  }
}

/* ---- Mobile: 1062:4414 — 32px between blocks ------------------------------------- */
@media screen and (max-width: 767px) {
  .ra {
    gap: 32px;
  }

  .ra-h2 {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.44px;
  }

  .ra-lead {
    font-size: 13px;
    line-height: 20px;
  }

  .ra-head-title {
    max-width: 258px;
  }

  .ra-head-text {
    max-width: 274px;
  }

  /* List / Approach Principles 1062:4418, 288 × 1210 — one step per row */
  .ra-stage {
    max-width: 400px;
    --w: 288;
    --art-x: -12;
    --art-y: 14;
    --art-w: 314;
    --art-h: 1000;
    --dx: 24px;
    --dy: -11px;
    --block: 198;
    --after: 28px;
  }

  .ra-step[data-step="1"] { --x: 51; --y: 90; }
  .ra-step[data-step="2"] { --x: 51; --y: 394; }
  .ra-step[data-step="3"] { --x: 51; --y: 698; }
  .ra-step[data-step="4"] { --x: 51; --y: 1001; }

  .ra-step {
    gap: 10px;
  }

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

  .ra-step-text {
    font-size: 13px;
    line-height: 20px;
  }

  /* "Two ways to redesign" 1062:4454 is set small on mobile */
  .ra-ways-title {
    max-width: 228px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.15px;
  }

  /* No split on mobile: the cards stack, 32px apart */
  .ra-split {
    display: none;
  }

  .ra-cards {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 400px;
    margin-bottom: 0;
  }

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

  .ra-card-text {
    font-size: 13px;
    line-height: 20px;
  }

  .ra-callout-title {
    max-width: 262px;
  }

  .ra-callout-text {
    max-width: 262px;
  }
}