/* ==========================================================================
   How it works — Figma frame-y 4563→5694 (1131 tall)
   ========================================================================== */

.gw-how {
  position: relative;
  background: var(--gw-white);
  overflow: clip;
  container-type: inline-size;
}

.gw-how__stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  height: calc(1131 * var(--u));
  --u: min(1px, calc(100cqw / 1440));
}
.gw-how__stage > * { position: absolute; }

.gw-how__bg {
  top: calc(321 * var(--u)); left: calc(-3 * var(--u));
  width: calc(1447 * var(--u)); height: calc(814 * var(--u));
  overflow: hidden; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.gw-how__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }

.gw-how__watermark {
  top: calc(27 * var(--u)); left: calc(194 * var(--u));
  width: calc(192 * var(--u)); height: calc(192 * var(--u));
  color: var(--gw-line);
  z-index: 1;
}
.gw-how__watermark svg { width: 100%; height: 100%; }

.gw-how__eyebrow {
  top: calc(97 * var(--u)); left: calc(199 * var(--u));
  width: calc(112 * var(--u));
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(20 * var(--u));
  line-height: calc(24 * var(--u));
  background-image: linear-gradient(90deg, #000000 0%, #6D28D9 100%);
  z-index: 3;
}

.gw-how__flag {
  top: calc(98 * var(--u)); left: calc(934 * var(--u));
  width: calc(183 * var(--u)); height: calc(201 * var(--u));
  object-fit: contain;
  z-index: 2;
}

.gw-how__title {
  top: calc(148 * var(--u)); left: calc(194 * var(--u));
  width: calc(1161 * var(--u));
  display: flex; flex-direction: column;
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(36 * var(--u));
  line-height: calc(50.4 * var(--u));
  z-index: 3;
}
.gw-how__title-a { color: var(--gw-black); }
.gw-how__title-b { color: var(--gw-violet); }

/* gradient rules bleeding off both edges (Figma 91:192 / 91:225) */
.gw-how__rule {
  top: calc(219 * var(--u));
  height: calc(16 * var(--u));
  background: var(--gw-grad-bar);
  z-index: 2;
}
.gw-how__rule--l { left: calc(-4 * var(--u));   width: calc(166 * var(--u)); }
.gw-how__rule--r { left: calc(1169 * var(--u)); width: calc(271 * var(--u)); }

/* ---- accordion (215:196) — 511x662 ---------------------------------------
   Step 1 runs 0→178 with its body open; the rest are 64 closed. Every step ends
   in a rule 18 under its content, and the next starts 57 after that rule, which
   is what puts the five rules at 178 / 299 / 420 / 541 / 662.                 */
.gw-how__steps {
  top: calc(346 * var(--u)); left: calc(194 * var(--u));
  width: calc(511 * var(--u));
  z-index: 3;
}
.gw-how__step {
  position: relative;
  padding-bottom: calc(18 * var(--u));
  /* Figma's divider is a zero-height line: draw it without taking layout space */
  box-shadow: 0 1px 0 var(--gw-line);
  cursor: pointer;
}
/* the whole row is the target, so the whole row lights up. Painted by a
   pseudo-element bled outside the box so the wash has some air around the text
   without any padding disturbing the comp's measured rhythm. */
.gw-how__step::before {
  content: '';
  position: absolute;
  inset: calc(-8 * var(--u)) calc(-16 * var(--u)) calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgb(109 40 217 / 0.05);
  opacity: 0;
  transition: opacity var(--gw-dur) var(--gw-ease);
  pointer-events: none;
  z-index: -1;
}
/* hover only — :focus-within would leave the wash stuck on after a click, so
   keyboard users get it via :focus-visible, which a mouse click does not set */
.gw-how__step:hover::before,
.gw-how__step:has(:focus-visible)::before { opacity: 1; }
/* The comp leaves 57 between a step's divider and the next step's title. That
   much air reads as a gap rather than a rhythm, and it left the hover wash
   floating in the middle of it. A step now carries its own breathing space
   instead — even above and below the row — so the wash lands on the row it
   belongs to and the list closes up. */
.gw-how__step + .gw-how__step { margin-top: calc(20 * var(--u)); }

/* 46-tall header: 10 of inset, a 24 glyph, 10, then the label */
.gw-how__step-head {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: calc(10 * var(--u));
  width: 100%;
  height: calc(46 * var(--u));
  padding: 0 calc(10 * var(--u));
  text-align: left;
  color: var(--gw-black);
  transition: color var(--gw-dur) var(--gw-ease);
}
.gw-how__step.is-open .gw-how__step-head,
.gw-how__step-head:hover { color: var(--gw-violet); }

.gw-how__step-icon {
  flex: none;
  display: block;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.gw-how__step-icon svg { display: block; width: 100%; height: 100%; }

.gw-how__step-title {
  display: block;
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(20 * var(--u));
  line-height: calc(26 * var(--u));
  color: currentColor;
}

.gw-how__step-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--gw-ease);
}
/* the clip is the grid item, so the copy inside can keep its own height while
   the track collapses to nothing */
.gw-how__step-clip { overflow: hidden; }
.gw-how__step.is-open .gw-how__step-body { grid-template-rows: 1fr; }
.gw-how__step-body p {
  padding-top: calc(24 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(22.4 * var(--u));
  color: var(--gw-black);
}
/* Figma reserves 90 for the open body — four lines of leading for three lines
   of copy, the trailing newline this file uses throughout. It is what sets
   where the first rule falls, so the box keeps that floor. */
.gw-how__step.is-open .gw-how__step-body p { min-height: calc(114 * var(--u)); }

/* ---- tab panel: one illustration per step, crossfading ------------------- */
.gw-how__visual {
  top: calc(343 * var(--u)); left: calc(736 * var(--u));
  width: calc(511 * var(--u)); height: calc(509 * var(--u));
  border: 1px solid var(--gw-gray-100);
  overflow: hidden;
  z-index: 3;
}
.gw-how__visual-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--gw-ease);
}
.gw-how__visual-img.is-active { opacity: 1; }
/* with no JS every step is readable, so pin the panel to the one the comp shows */
.gw-how__visual-img[data-index="0"] { opacity: 1; }
.gw-motion .gw-how__visual-img[data-index="0"]:not(.is-active) { opacity: 0; }

/* ---- CTA (280:1314) — 508x97, label left, 40x40 flag right --------------- */
.gw-how__cta {
  top: calc(909 * var(--u)); left: calc(736 * var(--u));
  width: calc(508 * var(--u)); height: calc(97 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(47 * var(--u));
  background: var(--gw-black);
  color: var(--gw-white);
  z-index: 3;
  transition: background var(--gw-dur) var(--gw-ease);
}
.gw-how__cta:hover { background: #1a1a1a; }
.gw-how__cta-label {
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: calc(36 * var(--u));
  line-height: calc(47 * var(--u));
}
.gw-how__cta-icon {
  flex: none;
  display: block;
  /* 40 box, 28.33x33.33 glyph (280:1318) */
  width: calc(28.33 * var(--u));
  height: calc(33.33 * var(--u));
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .gw-how__stage {
    height: auto; --u: 1px;
    padding: 56px var(--gw-gutter) 64px;
    display: flex; flex-direction: column; gap: 28px;
  }
  .gw-how__stage > * { position: static; }
  .gw-how__bg, .gw-how__watermark, .gw-how__rule { display: none; }
  .gw-how__flag { width: 120px; height: auto; }
  .gw-how__title { width: 100%; font-size: 30px; line-height: 40px; }
  .gw-how__steps, .gw-how__visual, .gw-how__cta { width: 100%; }
  .gw-how__visual { height: auto; aspect-ratio: 511 / 509; }
  .gw-how__cta { height: 78px; padding-inline: 24px; }
  .gw-how__cta-label { font-size: 26px; line-height: 32px; }
  .gw-how__cta-icon { width: 24px; height: 28px; }
  .gw-how__step + .gw-how__step { margin-top: 24px; }
}

@media (max-width: 640px) {
  .gw-how__title { font-size: 24px; line-height: 32px; }
  .gw-how__cta { height: 64px; padding-inline: 18px; }
  .gw-how__cta-label { font-size: 20px; line-height: 26px; }
  .gw-how__cta-icon { width: 20px; height: 24px; }
}