/* =====================================================================
   How It Works: Step by Step — Figma "How It Works" Module 8487:27982.
   A WHITE band locked to the 1240 content area. Centred Axiforma Medium
   32/45 H2, then a centred module card (max ~900px, 1px soft-blue border,
   radius 20, 40px pad) split into a LEFT steps column (clickable steps +
   prev/next arrows) and a RIGHT phone mockup. The first step is active by
   default (title dark, body visible); inactive steps show a muted title and
   a hidden body. Self-contained / page-scoped; tokens only with
   component-local --hiw-* properties for one-off Figma values.
   ===================================================================== */

.how-it-works {
  /* Component-local values (no token edits; mirrors about-values' --av-* pattern). */
  --hiw-band-gap: 40px;        /* H2 -> module card (Figma vertical gap)         */
  --hiw-card-max: 900px;       /* module card max-width                          */
  --hiw-card-pad: 40px;        /* padding inside the card                        */
  --hiw-card-gap: 40px;        /* gap between the left column and the image      */
  --hiw-left-w: 370px;         /* left column target width                       */
  --hiw-image-w: 425px;        /* phone image target width                       */
  --hiw-steps-gap: 30px;       /* between steps in the list                      */
  --hiw-step-gap: 15px;        /* icon -> step content                           */
  --hiw-step-text-gap: 8px;    /* title -> body within a step                    */
  --hiw-icon-size: 25px;       /* blue line icon box                             */
  --hiw-nav-gap: 15px;         /* prev -> next arrow                             */
  --hiw-arrow-w: 48px;         /* arrow button width                             */
  --hiw-arrow-h: 48px;         /* arrow button height                            */
  --hiw-card-min-h: 600px;     /* fixed module height so toggling steps can't    */
                               /* resize the card (no page "shake")              */
  --hiw-body-min-h: 50px;      /* reserve the active step's body (~2 lines) so   */
                               /* steps below don't shift between steps          */
  --hiw-card-border: var(--soft-blue);
  --hiw-card-radius: var(--radius-20);

  background: var(--gray-0);
  padding-block: var(--home-sec-pad-y);
}

.how-it-works__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hiw-band-gap);
}

/* H2 — Axiforma Medium 32/45 (OG Desktop H2), centred. */
.how-it-works__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Module card ---- */
.how-it-works__card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--hiw-card-gap);
  width: 100%;
  max-width: var(--hiw-card-max);
  min-height: var(--hiw-card-min-h);
  background: var(--gray-0);
  border: 1px solid var(--hiw-card-border);
  border-radius: var(--hiw-card-radius);
  padding: var(--hiw-card-pad);
}

/* ---- LEFT column: steps list pushed apart from the arrow row ---- */
.how-it-works__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--hiw-steps-gap);
  flex: 1 1 var(--hiw-left-w);
  min-width: 0;
}

.how-it-works__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hiw-steps-gap);
}

.how-it-works__step-item {
  min-width: 0;
}

/* Each step is a full-width reset button. */
.how-it-works__step {
  display: flex;
  align-items: flex-start;
  gap: var(--hiw-step-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Blue line icon — 25x25 box, image contained within. */
.how-it-works__step-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hiw-icon-size);
  height: var(--hiw-icon-size);
}
.how-it-works__step-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.how-it-works__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--hiw-step-text-gap);
  min-width: 0;
}

/* Title — Axiforma SemiBold 20. Muted while inactive. */
.how-it-works__step-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-25);
  color: var(--gray-6);
  word-break: break-word;
}

/* Body — Axiforma Regular 16. Hidden while inactive. When shown it reserves a
   ~2-line min-height so switching between steps with 1- vs 2-line bodies does
   not shift the steps below it. */
.how-it-works__step-body {
  display: none;
  min-height: var(--hiw-body-min-h);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-25);
  color: var(--gray-8);
  word-break: break-word;
}

/* ---- Active step: dark title, visible body. JS sets .is-active; the
   :first-child fallback keeps the first step active before JS runs and if
   JS never loads (progressive enhancement). ---- */
.how-it-works__step.is-active .how-it-works__step-title,
.how-it-works__step-item:first-child .how-it-works__step:not(.is-inactive) .how-it-works__step-title {
  color: var(--gray-8);
}
.how-it-works__step.is-active .how-it-works__step-body,
.how-it-works__step-item:first-child .how-it-works__step:not(.is-inactive) .how-it-works__step-body {
  display: block;
}

/* ---- Arrow nav row ---- */
.how-it-works__nav {
  display: flex;
  gap: var(--hiw-nav-gap);
}

.how-it-works__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hiw-arrow-w);
  height: var(--hiw-arrow-h);
  margin: 0;
  padding: 0;
  background: var(--og-blue);
  border: none;
  border-radius: var(--radius-8);
  cursor: pointer;
  color: var(--gray-0);
  box-shadow: 0 2px 6px rgba(0, 128, 243, 0.3);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.how-it-works__arrow:hover {
  background: #006fd6;
}

/* CSS-drawn chevron (two borders rotated into an arrowhead). */
.how-it-works__chevron {
  display: block;
  width: 11px;
  height: 11px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}
.how-it-works__arrow--prev .how-it-works__chevron {
  transform: translateX(2px) rotate(-135deg);
}
.how-it-works__arrow--next .how-it-works__chevron {
  transform: translateX(-2px) rotate(45deg);
}

/* Disabled-looking end states (JS toggles .is-disabled; prev starts disabled).
   Clearly muted (grey fill) but still visible — no longer the prominent blue. */
.how-it-works__arrow.is-disabled,
.how-it-works__arrow:disabled {
  cursor: default;
  color: var(--gray-6);
  background: var(--gray-3);
  box-shadow: none;
}
.how-it-works__arrow.is-disabled:hover,
.how-it-works__arrow:disabled:hover {
  background: var(--gray-3);
}

/* ---- RIGHT column: phone mockup ---- */
.how-it-works__right {
  flex: 0 1 var(--hiw-image-w);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.how-it-works__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-20);
}

/* ---- Tablet (768–1023px): keep the two columns SIDE BY SIDE (design feedback)
   — shrink the phone and let the steps column wrap narrower so both fit, rather
   than stacking. The fixed card height is retained (like desktop), so this block
   does NOT touch --hiw-card-min-h (it stays 600 from the base). ---- */
@media (max-width: 1023.98px) {
  .how-it-works {
    --hiw-image-w: 300px;   /* smaller phone so it fits beside the steps */
    --hiw-card-gap: 28px;
    --hiw-card-pad: 28px;
  }
  .how-it-works__left {
    flex: 1 1 auto;         /* steps take the remaining width; text wraps */
  }
  .how-it-works__right {
    flex: 0 1 var(--hiw-image-w);
  }
}

/* ---- Large-mobile / phone (<=767.98px): NOW stack (image on top), relax the
   fixed card height, tighter inline padding + scaled H2. ---- */
@media (max-width: 767.98px) {
  .how-it-works {
    --hiw-card-min-h: 0px; /* stacked: content drives height */
    padding-inline: var(--pad-mobile);
  }
  .how-it-works__heading {
    font-size: clamp(28px, 7vw, var(--fs-32));
    line-height: 1.3;
  }
  .how-it-works__card {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: var(--pad-mobile);
  }
  .how-it-works__right {
    order: -1;
    flex: none;
  }
  .how-it-works__image {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .how-it-works__left {
    flex: none;
  }
}

/* ---- Phone (≤599): restore main's card min-height (regression guard — stacked
   card at ≤599 matches production). ---- */
@media (max-width: 599.98px) {
  .how-it-works {
    --hiw-card-min-h: 600px;
  }
}