/* How It Works — Figma 2323:289 / 2346:1332 (ScrollStep 2313:28, Phone/* 2317:14 · 2317:57 · 2317:109 · 2317:147)
   Default = un-pinned layout (≤1060px, or reduced motion where <html> has no .js):
   every step open, phone column hidden. The pinned/scrubbed layout is opt-in below. */
.how {
  --how-sub: #a8c6c0;
  position: relative;
  background: var(--ink-deep);
  color: #fff;
}
.how__pin {
  background: linear-gradient(172.77deg, var(--ink-btn) 7.84%, var(--ink-deep) 82.04%);
  padding-block: var(--sec-pad);
}

/* ---------- Plot-grid texture on the green ground ----------
   A faint survey grid everywhere; a brighter mint copy is masked to a soft circle
   that follows the pointer and fades in on hover (js/sections/05-how.js). */
.how__pin { position: relative; isolation: isolate; }
.how__inner { position: relative; z-index: 1; }
.how__tex, .how__tex::before, .how__tex-lit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --grid: 46px;
}
.how__tex { z-index: 0; }
.how__tex::before {
  content: "";
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.6px),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  background-position: -.5px -.5px;
  /* fade the grid out toward the left so the copy stays calm */
  -webkit-mask-image: radial-gradient(120% 90% at 78% 50%, #000 30%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, .2));
  mask-image: radial-gradient(120% 90% at 78% 50%, #000 30%, rgba(0, 0, 0, .35) 75%, rgba(0, 0, 0, .2));
}
.how__tex-lit {
  display: block;
  background-image:
    radial-gradient(circle, rgba(49, 226, 154, .95) 1.6px, transparent 2.2px),
    linear-gradient(rgba(49, 226, 154, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 226, 154, .6) 1px, transparent 1px),
    radial-gradient(300px circle at var(--tx, 50%) var(--ty, 50%), rgba(49, 226, 154, .24), transparent 70%);
  background-size: var(--grid) var(--grid), var(--grid) var(--grid), var(--grid) var(--grid), 100% 100%;
  background-position: -.5px -.5px, -.5px -.5px, -.5px -.5px, 0 0;
  -webkit-mask-image: radial-gradient(290px circle at var(--tx, 50%) var(--ty, 50%), #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  mask-image: radial-gradient(290px circle at var(--tx, 50%) var(--ty, 50%), #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.how__tex.is-lit .how__tex-lit { opacity: 1; }

/* ---------- Backdrop behind the phone mockups ---------- */
.how__backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 456px;
  translate: -50% -50%;
  border-radius: 40px;
  border: 1px solid rgba(168, 255, 216, .28);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(49, 226, 154, .38), transparent 62%),
    linear-gradient(160deg, rgba(25, 154, 172, .42) 0%, rgba(17, 102, 85, .5) 50%, rgba(49, 226, 154, .12) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.how__backdrop::before { /* fine plot grid inside the panel */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 23px 23px;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 70%);
}
.how__glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 300px;
  height: 300px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(49, 226, 154, .45), rgba(25, 154, 172, .15) 60%, transparent);
  filter: blur(10px);
}
.how__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1.5px dashed rgba(168, 255, 216, .28);
}
.how__orbit--outer { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
.how__orbit--inner { width: 340px; height: 340px; margin: -170px 0 0 -170px; border-style: solid; border-color: rgba(168, 255, 216, .14); }
.how__orbit i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(49, 226, 154, .18), 0 0 18px rgba(49, 226, 154, .9);
}
.how__orbit--outer i:nth-child(1) { top: 13%; left: 15%; }
.how__orbit--outer i:nth-child(2) { bottom: 6%; right: 26%; width: 7px; height: 7px; background: #7fe9f0; }
.how__orbit--inner i { top: 50%; right: -5px; margin-top: -5px; }
.js .how__orbit--outer { animation: how-spin 48s linear infinite; }
.js .how__orbit--inner { animation: how-spin 32s linear infinite reverse; }
@keyframes how-spin { to { rotate: 360deg; } }
.js .how__glow { animation: how-breathe 6s ease-in-out infinite; }
@keyframes how-breathe { 50% { opacity: .65; scale: .9; } }

.how__col { max-width: 615px; }

.how__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.how__eyebrow { color: var(--accent); }
.how__title { color: #fff; }

.how__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ScrollStep — State=On is the resting look */
.how__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .055);
}
.how__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--ink-deep);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.how__content {
  flex: 1;
  min-width: 0;
}
.how__step-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
}
.how__more { overflow: hidden; }
.how__body {
  padding-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--how-sub);
}

.how__vis { display: none; }

/* ---------- Pinned + scrubbed (desktop, motion allowed) ---------- */
@media (min-width: 1061px) {
  .js .how {
    height: 340vh;
    height: 340svh;
  }
  /* The pinned band is sized to its content (max 680px) instead of the full
     viewport, and held centred on screen while the runway scrolls. */
  .js .how {
    --how-h: min(100vh, 680px);
    --how-h: min(100svh, 680px);
    background: var(--ground);
  }
  .js .how__pin {
    position: sticky;
    top: max(0px, (100vh - var(--how-h)) / 2);
    top: max(0px, (100svh - var(--how-h)) / 2);
    display: flex;
    align-items: center;
    height: var(--how-h);
    padding: 0;
    overflow: hidden;
  }
  .js .how__inner {
    display: grid;
    grid-template-columns: minmax(0, 615px) 503px;
    justify-content: space-between;
    align-items: center;
    column-gap: 42px;
  }
  .js .how__head { gap: 3px; }
  .js .how__steps { gap: 3px; }

  /* ScrollStep State=Off → On */
  .js .how__step {
    opacity: .42;
    background: transparent;
    border-color: transparent;
    transition:
      opacity var(--t-state) var(--ease),
      background-color var(--t-state) var(--ease),
      border-color var(--t-state) var(--ease);
  }
  .js .how__step.is-on {
    opacity: 1;
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .14);
  }
  .js .how__num {
    background: rgba(255, 255, 255, .12);
    color: var(--how-sub);
    transition:
      background-color var(--t-state) var(--ease),
      color var(--t-state) var(--ease);
  }
  .js .how__step.is-on .how__num {
    background: var(--accent);
    color: var(--ink-deep);
  }
  .js .how__more {
    max-height: 0;
    transition: max-height .5s var(--ease);
  }
  .js .how__step.is-on .how__more { max-height: 120px; }

  /* Phone stage — PinVis 503 × 530, phone 246.84 × 516.12 centred */
  .js .how__vis {
    display: block;
    position: relative;
    width: 503px;
    height: 530px;
  }
  .js .how__phone {
    position: absolute;
    top: 7px;
    left: 128px;
    width: 247px;
    height: 516px;
    border-radius: 34.68px;
    box-shadow: 0 26.52px 35.7px rgba(6, 33, 31, .22);
    opacity: 0;
    transform: translateY(24px) scale(.95);
    transition:
      opacity .5s cubic-bezier(.16, 1, .3, 1),
      transform .5s cubic-bezier(.16, 1, .3, 1);
  }
  .js .how__phone.is-on {
    opacity: 1;
    transform: none;
  }
}

/* ≥1061px: the sticky top nav is always showing, so centre the band in the space below it */
@media (min-width: 1061px) {
  .js .how {
    --how-h: min(100vh - var(--nav-h), 680px);
    --how-h: min(100svh - var(--nav-h), 680px);
  }
  .js .how__pin {
    top: calc(var(--nav-h) + max(0px, (100vh - var(--nav-h) - var(--how-h)) / 2));
    top: calc(var(--nav-h) + max(0px, (100svh - var(--nav-h) - var(--how-h)) / 2));
  }
}

/* Short desktop viewports: keep the 530px phone stage inside the pinned frame */
@media (min-width: 1061px) and (max-height: 700px) {
  .js .how__vis { transform: scale(.86); }
}
@media (min-width: 1061px) and (max-height: 600px) {
  .js .how__vis { transform: scale(.74); }
}

@media (max-width: 720px) {
  .how__pin {
    background: linear-gradient(156.15deg, var(--ink-btn) 7.84%, var(--ink-deep) 82.04%);
  }
  .how__col { max-width: none; }
}