/* ==========================================================
   SWITCH STEPS — FINAL SYNCHRONIZED VERSION

   10 sec  = neon bar filling
   15 sec  = everything stays ON
   1 sec   = reset
   --------------------------------
   TOTAL   = 26 sec
========================================================== */

.switch-steps {
  --steps-cycle: 26s;

  --fill-end: 38.4615%;
  --step-two-hit: 19.2308%;
  --hold-end: 96.1538%;

  --purple: #7651f7;
  --purple-hot: #9d48ff;
  --purple-light: #ca7fff;

  --section-dark: #0c021f;
  --card-off: #150b23;

  position: relative;

  padding:
    126px
    82px
    140px;

  overflow: hidden;

  color: #ffffff;

}


/* ==========================================================
   BACKGROUND DECORATION
========================================================== */

.switch-steps::before {
  content: "";

  position: absolute;

  bottom: 36px;
  left: -50px;

  width: 330px;
  height: 140px;

  border-top:
    1px solid rgba(126, 91, 255, 0.22);

  border-radius: 50%;

  transform: rotate(-7deg);

  pointer-events: none;
}


.switch-steps::after {
  content: "";

  position: absolute;

  top: 78px;
  right: 9%;

  width: 120px;
  height: 120px;

  opacity: 0.45;

  background-image:
    radial-gradient(
      circle,
      rgba(126, 91, 255, 0.38) 1.5px,
      transparent 1.8px
    );

  background-size: 14px 14px;

  pointer-events: none;
}


/* ==========================================================
   INNER
========================================================== */

.switch-steps__inner {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    310px
    minmax(0, 1fr);

  align-items: center;

  width: 90%;
  max-width: 1362px;

  margin: 0 auto;

  column-gap: 76px;
}


/* ==========================================================
   INTRO
========================================================== */

.switch-steps__intro {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.switch-steps__intro .section-eyebrow {
  margin: 0;

  color: #8d5cff;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: -0.01em;
}


.switch-steps__intro h2 {
  margin:
    18px
    0
    22px;

  color: #ffffff;

  font-size:
    clamp(34px, 3vw, 48px);

  font-weight: 700;

  line-height: 1.04;

  letter-spacing: -0.055em;
}


.switch-steps__intro > p {
  max-width: 292px;

  margin: 0;

  color: #9189a3;

  font-size: 16px;
  font-weight: 500;

  line-height: 1.55;
}


/* ==========================================================
   CTA
========================================================== */

.switch-steps__cta {
  display: inline-flex;

  min-width: 205px;
  height: 60px;

  margin-top: 34px;

  padding:
    0
    24px;

  align-items: center;
  justify-content: center;

  gap: 12px;

  border:
    1px solid rgba(202, 127, 255, 0.85);

  border-radius: 999px;

  color: #ffffff;

  background:
    rgba(67, 15, 165, 0.22);

  box-shadow:
    0 12px 24px rgba(24, 0, 36, 0.15);

  font-size: 15px;
  font-weight: 750;

  text-decoration: none;

  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}


.switch-steps__cta:hover {
    box-shadow: 0 10px 40px rgba(225, 32, 255, 0.28);
  transform: translateY(-3px);
}


.switch-steps__cta-arrow {
  transition:
    transform 180ms ease;
}


.switch-steps__cta:hover .switch-steps__cta-arrow {
  transform:
    translateX(4px);
}


/* ==========================================================
   FLOW
========================================================== */

.switch-steps__flow {
  --step-gap: 42px;

  /*
     card width =
     (100% - 2 gaps) / 3

     bar-edge =
     half card width

     Άρα:
     start = center card 1
     50%  = center card 2
     end   = center card 3
  */

  --bar-edge:
    calc(
      (
        100%
        - (2 * var(--step-gap))
      )
      / 6
    );

  position: relative;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: stretch;

  gap: var(--step-gap);

  min-width: 0;

  padding-top: 28px;

  isolation: isolate;

  overflow: visible;
}


/* παλιές HTML connecting lines */

.switch-steps__line {
  display: none;
}


/* ==========================================================
   NEON TRACK — OFF
========================================================== */

.switch-steps__flow::before {
  content: "";

  position: absolute;

  z-index: 0;

  top: 50%;

  left: var(--bar-edge);
  right: var(--bar-edge);

  height: 9px;

  transform:
    translateY(-50%);

  border-radius: 999px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(85, 29, 164, 0.17),
      rgba(148, 65, 255, 0.28),
      rgba(85, 29, 164, 0.17)
    );

  box-shadow:
    inset 0 0 7px rgba(218, 166, 255, 0.24),
    0 0 10px rgba(157, 72, 255, 0.28),
    0 0 28px rgba(118, 81, 247, 0.14);
}


/* ==========================================================
   LIVE NEON BAR
========================================================== */

.switch-steps__flow::after {
  content: "";

  position: absolute;

  z-index: 1;

  top: 50%;

  left: var(--bar-edge);
  right: var(--bar-edge);

  height: 9px;

  transform:
    translateY(-50%)
    scaleX(0);

  transform-origin:
    left center;

  border-radius: 999px;

  opacity: 0;

  pointer-events: none;

  will-change:
    transform,
    opacity;


  /* Electric head + small sparks */

  background:

    radial-gradient(
      circle at 100% 50%,
      #ffffff 0 3px,
      #f0dcff 3.8px,
      transparent 9px
    ),

    radial-gradient(
      circle at 99% -35%,
      #ffffff 0 1.7px,
      #ca7fff 2.6px,
      transparent 5.5px
    ),

    radial-gradient(
      circle at 98% 140%,
      #ffffff 0 1.7px,
      #9d48ff 2.6px,
      transparent 5.5px
    ),

    radial-gradient(
      circle at 96% 50%,
      #ffffff 0 1.3px,
      transparent 4px
    ),

    linear-gradient(
      90deg,
      #5b20df 0%,
      #7430ff 28%,
      #9343ff 58%,
      #b65bff 80%,
      #ca7fff 91%,
      #efd7ff 97%,
      #ffffff 100%
    );


  box-shadow:
    0 0 5px rgba(255, 255, 255, 1),
    0 0 11px rgba(239, 210, 255, 1),
    0 0 23px rgba(202, 127, 255, 1),
    0 0 42px rgba(157, 72, 255, 1),
    0 0 72px rgba(118, 81, 247, 0.72);
}


/* ξεκινά μόνο όταν το JS βάλει .is-animated */

.switch-steps.is-animated
.switch-steps__flow::after {
  animation:
    stepsElectricBar
    var(--steps-cycle)
    linear
    infinite,

    stepsElectricPulse
    650ms
    ease-in-out
    infinite
    alternate;
}


/* ==========================================================
   BAR TIMING

   0%       → 38.4615% = 10 sec fill
   38.4615  → 96.1538% = 15 sec hold
   96.1538  → 100%     = 1 sec reset
========================================================== */

@keyframes stepsElectricBar {

  0% {
    transform:
      translateY(-50%)
      scaleX(0);

    opacity: 1;
  }


  38.4615% {
    transform:
      translateY(-50%)
      scaleX(1);

    opacity: 1;
  }


  96.1538% {
    transform:
      translateY(-50%)
      scaleX(1);

    opacity: 1;
  }


  98.2% {
    transform:
      translateY(-50%)
      scaleX(1);

    opacity: 0;
  }


  100% {
    transform:
      translateY(-50%)
      scaleX(0);

    opacity: 0;
  }

}


/* subtle electricity */

@keyframes stepsElectricPulse {

  from {
    filter:
      brightness(1)
      saturate(1);
  }


  to {
    filter:
      brightness(1.38)
      saturate(1.22)
      drop-shadow(
        0 0 7px
        rgba(202, 127, 255, 0.95)
      );
  }

}


/* ==========================================================
   CARD — OFF STATE
========================================================== */

.step-card {
  position: relative;

  z-index: 3;

  display: flex;

  width: 100%;
  min-width: 0;
  min-height: 272px;

  padding:
    28px
    22px
    20px;

  flex-direction: column;

  overflow: visible;

  border:
    1px solid rgba(202, 127, 255, 0.14);

  border-radius: 24px;

  color:
    rgba(255, 255, 255, 0.80);

  background-color:
    var(--card-off);

  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.32);

  transform-origin: center;

  transition:
    transform 180ms ease;
}


/* ==========================================================
   CARD TEXT
========================================================== */

.step-card h3 {
  min-height: 42px;

  margin: 0;

  color: currentColor;

  font-size: 16px;
  font-weight: 750;

  line-height: 1.22;

  letter-spacing: -0.03em;
}


.step-card p {
  margin:
    14px
    0
    0;

  color: currentColor;

  opacity: 0.62;

  font-size: 13px;
  font-weight: 500;

  line-height: 1.45;
}


/* ==========================================================
   START CARD ANIMATIONS
========================================================== */

.switch-steps.is-animated
.step-card:not(.step-card--two):not(.step-card--three) {
  animation:
    stepOnePower
    var(--steps-cycle)
    linear
    infinite;
}


.switch-steps.is-animated
.step-card--two {
  animation:
    stepTwoPower
    var(--steps-cycle)
    linear
    infinite;
}


.switch-steps.is-animated
.step-card--three {
  animation:
    stepThreePower
    var(--steps-cycle)
    linear
    infinite;
}


/* ==========================================================
   CARD 1

   bar starts exactly at center card 1
========================================================== */

@keyframes stepOnePower {

  0% {
    color:
      rgba(255, 255, 255, 0.80);

    background-color:
      #150b23;

    border-color:
      rgba(202, 127, 255, 0.14);

    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.32);
  }


  /* electricity hits */

  0.7% {
    color: #171126;

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow:
      0 0 8px #ffffff,
      0 0 22px #ca7fff,
      0 0 54px rgba(157, 72, 255, 1);
  }


  /* tiny flicker */

  1.35% {
    color:
      rgba(255, 255, 255, 0.90);

    background-color:
      #55425f;

    border-color:
      rgba(202, 127, 255, 0.75);
  }


  /* lamp turns ON */

  2% {
    color: #171126;

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow:
      0 0 9px rgba(255, 255, 255, 1),
      0 0 24px rgba(202, 127, 255, 1),
      0 0 52px rgba(118, 81, 247, 0.62);
  }


  /*
     STAYS WHITE + GLOWING
  */

  2.8%,
  96.1538% {
    color: #171126;

    background-color: #ffffff;

    border-color:
      rgba(202, 127, 255, 0.90);

    box-shadow:

      0 12px 28px
      rgba(0, 0, 0, 0.16),

      0 0 8px
      rgba(255, 255, 255, 0.55),

      0 0 20px
      rgba(202, 127, 255, 0.82),

      0 0 42px
      rgba(157, 72, 255, 0.45),

      0 0 70px
      rgba(118, 81, 247, 0.20);
  }


  98.2%,
  100% {
    color:
      rgba(255, 255, 255, 0.80);

    background-color:
      #150b23;

    border-color:
      rgba(202, 127, 255, 0.14);

    box-shadow:
      0 12px 32px
      rgba(0, 0, 0, 0.32);
  }

}


/* ==========================================================
   CARD 2

   reaches exactly half of fill:
   5 sec / 26 sec = 19.2308%
========================================================== */

@keyframes stepTwoPower {

  0%,
  18.5% {
    color:
      rgba(255, 255, 255, 0.80);

    background-color:
      #150b23;

    border-color:
      rgba(202, 127, 255, 0.14);

    box-shadow:
      0 12px 32px
      rgba(0, 0, 0, 0.32);
  }


  19.2308% {
    color: #171126;

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow:
      0 0 8px #ffffff,
      0 0 22px #ca7fff,
      0 0 54px rgba(157, 72, 255, 1);
  }


  19.9% {
    color:
      rgba(255, 255, 255, 0.90);

    background-color:
      #55425f;

    border-color:
      rgba(202, 127, 255, 0.75);
  }


  20.6% {
    color: #171126;

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow:
      0 0 9px rgba(255, 255, 255, 1),
      0 0 24px rgba(202, 127, 255, 1),
      0 0 52px rgba(118, 81, 247, 0.62);
  }


  21.4%,
  96.1538% {
    color: #171126;

    background-color: #ffffff;

    border-color:
      rgba(202, 127, 255, 0.90);

    box-shadow:

      0 12px 28px
      rgba(0, 0, 0, 0.16),

      0 0 8px
      rgba(255, 255, 255, 0.55),

      0 0 20px
      rgba(202, 127, 255, 0.82),

      0 0 42px
      rgba(157, 72, 255, 0.45),

      0 0 70px
      rgba(118, 81, 247, 0.20);
  }


  98.2%,
  100% {
    color:
      rgba(255, 255, 255, 0.80);

    background-color:
      #150b23;

    border-color:
      rgba(202, 127, 255, 0.14);

    box-shadow:
      0 12px 32px
      rgba(0, 0, 0, 0.32);
  }

}


/* ==========================================================
   CARD 3

   reaches end of 10 second fill:
   10 / 26 = 38.4615%
========================================================== */

@keyframes stepThreePower {

  0%,
  37.7% {
    color:
      rgba(255, 255, 255, 0.80);

    background-color:
      #150b23;

    border-color:
      rgba(202, 127, 255, 0.14);

    box-shadow:
      0 12px 32px
      rgba(0, 0, 0, 0.32);
  }


  38.4615% {
    color: #171126;

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow:
      0 0 8px #ffffff,
      0 0 22px #ca7fff,
      0 0 56px rgba(157, 72, 255, 1);
  }


  39.1% {
    color:
      rgba(255, 255, 255, 0.90);

    background-color:
      #55425f;

    border-color:
      rgba(202, 127, 255, 0.75);
  }


  39.8% {
    color: #171126;

    background-color: #ffffff;

    border-color: #ffffff;

    box-shadow:
      0 0 9px rgba(255, 255, 255, 1),
      0 0 24px rgba(202, 127, 255, 1),
      0 0 52px rgba(118, 81, 247, 0.62);
  }


  /*
     3 ON
     now all three stay glowing
     for 15 seconds.
  */

  40.6%,
  96.1538% {
    color: #171126;

    background-color: #ffffff;

    border-color:
      rgba(202, 127, 255, 0.90);

    box-shadow:

      0 12px 28px
      rgba(0, 0, 0, 0.16),

      0 0 8px
      rgba(255, 255, 255, 0.55),

      0 0 20px
      rgba(202, 127, 255, 0.82),

      0 0 42px
      rgba(157, 72, 255, 0.45),

      0 0 70px
      rgba(118, 81, 247, 0.20);
  }


  98.2%,
  100% {
    color:
      rgba(255, 255, 255, 0.80);

    background-color:
      #150b23;

    border-color:
      rgba(202, 127, 255, 0.14);

    box-shadow:
      0 12px 32px
      rgba(0, 0, 0, 0.32);
  }

}


/* ==========================================================
   NUMBER
========================================================== */

.step-card__number {
  position: absolute;

  z-index: 8;

  top: -17px;
  left: -10px;

  display: grid;

  width: 43px;
  height: 43px;

  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #a685ff,
      #7047e0
    );

  box-shadow:
    0 0 16px
    rgba(148, 120, 242, 0.45);

  font-size: 20px;
  font-weight: 800;
}


/* ==========================================================
   ICON
========================================================== */

.step-card__icon {
  display: grid;

  width: 76px;
  height: 76px;

  margin-bottom: 22px;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(118, 81, 247, 0.11);
}


.step-card__icon img {
  display: block;

  width: 39px;
  height: 39px;

  object-fit: contain;
}


/* ==========================================================
   ACCENT
========================================================== */

.step-card__accent {
  width: 43px;
  height: 4px;

  margin-top: auto;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #7651f7,
      #ca7fff
    );

  box-shadow:
    0 0 10px
    rgba(202, 127, 255, 0.45);
}


/* ==========================================================
   IMPORTANT
   ALL CARDS SAME VERTICAL POSITION

   Αυτό μας δίνει πραγματικό synchronization.
========================================================== */

.step-card--two,
.step-card--three {
  margin-top: 0;
}


/* ==========================================================
   HOVER
========================================================== */

.step-card:hover {
  transform:
    translateY(-5px);
}


/* ==========================================================
   SMALL DESKTOP
   1051px — 1350px
========================================================== */

@media (min-width: 1051px) and (max-width: 1350px) {

  .switch-steps {
    padding:
      clamp(90px, 8vw, 116px)
      clamp(32px, 5vw, 70px)
      clamp(105px, 9vw, 140px);
  }


  .switch-steps__inner {
    grid-template-columns:
      clamp(250px, 23vw, 310px)
      minmax(0, 1fr);

    width: 100%;

    column-gap:
      clamp(36px, 4vw, 76px);
  }


  .switch-steps__flow {
    --step-gap:
      clamp(18px, 2.4vw, 42px);
  }


  .step-card {
    min-height:
      clamp(245px, 21vw, 272px);

    padding:
      clamp(24px, 2vw, 28px)
      clamp(15px, 1.6vw, 22px)
      20px;
  }


  .step-card__icon {
    width:
      clamp(64px, 5.7vw, 76px);

    height:
      clamp(64px, 5.7vw, 76px);

    margin-bottom:
      clamp(16px, 1.7vw, 22px);
  }


  .step-card__icon img {
    width:
      clamp(32px, 3vw, 39px);

    height:
      clamp(32px, 3vw, 39px);
  }


  .step-card h3 {
    font-size:
      clamp(14px, 1.2vw, 16px);
  }


  .step-card p {
    font-size:
      clamp(12px, 0.95vw, 13px);
  }

}


/* ==========================================================
   TABLET
   701px — 1050px

   SAME GEOMETRY AS DESKTOP
========================================================== */

@media (min-width: 701px) and (max-width: 1050px) {

  .switch-steps {
    padding:
      82px
      30px
      100px;
  }


  .switch-steps__inner {
    grid-template-columns: 1fr;

    width: 92%;
    max-width: 850px;

    row-gap: 55px;
  }


  .switch-steps__intro {
    max-width: 620px;
  }


  .switch-steps__intro h2 {
    max-width: 520px;

    font-size:
      clamp(36px, 5vw, 46px);
  }


  .switch-steps__intro > p {
    max-width: 520px;
  }


  .switch-steps__flow {
    --step-gap: 22px;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      var(--step-gap);

    width: 100%;

    padding-top: 24px;
  }


  .step-card {
    min-height: 255px;

    padding:
      26px
      17px
      20px;
  }


  .step-card__icon {
    width: 68px;
    height: 68px;

    margin-bottom: 18px;
  }


  .step-card__icon img {
    width: 35px;
    height: 35px;
  }


  .step-card h3 {
    min-height: 40px;

    font-size: 15px;
  }


  .step-card p {
    font-size: 12.5px;
  }

}


/* ==========================================================
   MOBILE
   ≤ 700px

   SAME CLOCK.
   SAME POSITIONS.
   Only rotated vertically.
========================================================== */

@media (max-width: 700px) {

  .switch-steps {
    padding:
      70px
      20px
      86px;
  }


  .switch-steps__inner {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
    max-width: 420px;

    margin-inline: auto;

    row-gap: 70px;
  }


  /* ========================================================
     INTRO
  ======================================================== */

  .switch-steps__intro {
    width: 100%;
  }


  .switch-steps__intro h2 {
    font-size:
      clamp(30px, 9vw, 36px);
  }


  .switch-steps__intro > p {
    max-width: 100%;

    font-size: 15px;
  }


  .switch-steps__cta {
    height: 50px;

    margin-top: 27px;

    font-size: 14px;
  }


  /* ========================================================
     MOBILE FLOW

     All cards have the SAME fixed track height.
     This is what guarantees exact synchronization.
  ======================================================== */

  .switch-steps__flow {
    --mobile-gap: 34px;

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows:
      repeat(3, 160px);

    gap:
      var(--mobile-gap);

    width: 100%;

    padding: 0;


    /*
       card height = 160px
       first center = 80px

       start of bar = 80px
       end of bar   = height - 80px
    */

    --mobile-bar-edge: 80px;
  }


  /* ========================================================
     VERTICAL TRACK
  ======================================================== */

  .switch-steps__flow::before {
    top:
      var(--mobile-bar-edge);

    bottom:
      var(--mobile-bar-edge);

    left: 50%;
    right: auto;

    width: 9px;
    height: auto;

    transform:
      translateX(-50%);

    background:
      linear-gradient(
        180deg,
        rgba(85, 29, 164, 0.17),
        rgba(148, 65, 255, 0.28),
        rgba(85, 29, 164, 0.17)
      );
  }


  /* ========================================================
     MOBILE LIVE BAR
  ======================================================== */

  .switch-steps__flow::after {
    top:
      var(--mobile-bar-edge);

    bottom:
      var(--mobile-bar-edge);

    left: 50%;
    right: auto;

    width: 9px;
    height: auto;

    transform:
      translateX(-50%)
      scaleY(0);

    transform-origin:
      center top;

    opacity: 0;


    background:

      radial-gradient(
        circle at 50% 100%,
        #ffffff 0 3px,
        #f0dcff 3.8px,
        transparent 9px
      ),

      radial-gradient(
        circle at -35% 99%,
        #ffffff 0 1.7px,
        #ca7fff 2.6px,
        transparent 5.5px
      ),

      radial-gradient(
        circle at 140% 98%,
        #ffffff 0 1.7px,
        #9d48ff 2.6px,
        transparent 5.5px
      ),

      linear-gradient(
        180deg,
        #5b20df 0%,
        #7430ff 28%,
        #9343ff 58%,
        #b65bff 80%,
        #ca7fff 91%,
        #efd7ff 97%,
        #ffffff 100%
      );
  }


  /*
     IMPORTANT:
     override desktop animation completely
  */

  .switch-steps.is-animated
  .switch-steps__flow::after {
    animation:
      stepsElectricBarMobile
      var(--steps-cycle)
      linear
      infinite,

      stepsElectricPulse
      650ms
      ease-in-out
      infinite
      alternate;
  }


  /* ========================================================
     EXACT SAME TIMING AS DESKTOP
  ======================================================== */

  @keyframes stepsElectricBarMobile {

    0% {
      transform:
        translateX(-50%)
        scaleY(0);

      opacity: 1;
    }


    38.4615% {
      transform:
        translateX(-50%)
        scaleY(1);

      opacity: 1;
    }


    96.1538% {
      transform:
        translateX(-50%)
        scaleY(1);

      opacity: 1;
    }


    98.2% {
      transform:
        translateX(-50%)
        scaleY(1);

      opacity: 0;
    }


    100% {
      transform:
        translateX(-50%)
        scaleY(0);

      opacity: 0;
    }

  }


  /* ========================================================
     MOBILE CARD
  ======================================================== */

  .step-card {
    display: grid;

    grid-template-columns:
      72px
      minmax(0, 1fr);

    grid-template-rows:
      auto
      auto
      auto;

    width: 100%;
    height: 160px;

    min-height: 160px;

    padding:
      23px
      22px
      21px
      26px;

    column-gap: 20px;
    row-gap: 4px;

    align-items: center;

    text-align: left;
  }


  .step-card--two,
  .step-card--three {
    margin-top: 0;
  }


  /* NUMBER */

  .step-card__number {
    top: -11px;
    left: -7px;

    width: 38px;
    height: 38px;

    font-size: 17px;
  }


  /* ICON */

  .step-card__icon {
    grid-column: 1;
    grid-row: 1 / 4;

    width: 72px;
    height: 72px;

    margin: 0;
  }


  .step-card__icon img {
    width: 36px;
    height: 36px;
  }


  /* TITLE */

  .step-card h3 {
    grid-column: 2;
    grid-row: 1;

    min-height: 0;

    margin: 0;

    font-size: 18px;

    line-height: 1.25;

    text-align: left;
  }


  /* TEXT */

  .step-card p {
    grid-column: 2;
    grid-row: 2;

    margin:
      5px
      0
      0;

    font-size: 14px;

    line-height: 1.45;

    text-align: left;
  }


  /* ACCENT */

  .step-card__accent {
    grid-column: 2;
    grid-row: 3;

    margin-top: 9px;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

  .switch-steps {
    padding:
      62px
      17px
      76px;
  }


  .switch-steps__inner {
    row-gap: 60px;
  }


  .switch-steps__flow {
    --mobile-gap: 30px;

    grid-template-rows:
      repeat(3, 155px);

    --mobile-bar-edge: 77.5px;
  }


  .step-card {
    grid-template-columns:
      62px
      minmax(0, 1fr);

    height: 155px;
    min-height: 155px;

    padding:
      21px
      18px
      19px
      22px;

    column-gap: 16px;
  }


  .step-card__icon {
    width: 62px;
    height: 62px;
  }


  .step-card__icon img {
    width: 31px;
    height: 31px;
  }


  .step-card h3 {
    font-size: 16px;
  }


  .step-card p {
    font-size: 13px;
  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .switch-steps__flow::after,
  .step-card {
    animation: none !important;
  }


  .step-card {
    color: #171126;

    background-color: #ffffff;

    border-color:
      rgba(202, 127, 255, 0.90);

    box-shadow:
      0 0 20px
      rgba(202, 127, 255, 0.75),

      0 0 42px
      rgba(118, 81, 247, 0.25);
  }

}