/* =========================================================
   MINDD2 — How It Works page (mobile-first)
   Builds on css/styles.css (tokens, header, footer, buttons).
   ========================================================= */

/* ---------- Introduction ---------- */
.hiw-intro {
  position: relative;
  padding: 48px 0 40px;
  overflow: hidden;
  text-align: center;
}
.hiw-intro::before {
  content: "";
  position: absolute;
  left: 50%; top: -220px;
  width: 560px; height: 560px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91, 46, 255, .07), transparent);
  pointer-events: none;
}
.hiw-intro-inner { position: relative; max-width: 880px; margin: 0 auto; }

.hiw-eyebrow {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--purple);
}

.hiw-title {
  margin: 16px auto 18px;
  font-size: clamp(1.625rem, 7vw, 2rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: .005em;
  text-wrap: balance;
}
.hiw-line { display: inline; }

.hiw-lead {
  max-width: 24em;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- Three steps ---------- */
.hiw-steps-section { padding: 24px 0 80px; }

.hiw-steps {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}

.hiw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hiw-num {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--purple);
}

.hiw-step h2 {
  margin: 10px 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-wrap: balance;
}

.hiw-step p {
  max-width: 22em;
  color: var(--muted);
  text-wrap: pretty;
}

.hiw-icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-top: 22px;
  border-radius: 50%;
  background: var(--tint);
}
.hiw-icon svg { width: 50px; height: 50px; overflow: visible; }

/* Mobile connector: thin line + small chevron between stacked steps */
.hiw-step:not(:last-child)::after {
  content: "";
  display: block;
  width: 12px; height: 44px;
  margin: 26px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 44'%3E%3Cpath d='M6 1v40M2 37l4 4 4-4' fill='none' stroke='%234B45D8' stroke-opacity='.4' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Icon motion (very gentle) ---------- */
.hiw-icon svg * { transform-box: fill-box; transform-origin: center; }

.hiw-step.is-in .hiw-wave { animation: hiw-wave 4.8s var(--ease) infinite; }
.hiw-step.is-in .hiw-wave-2 { animation-delay: .6s; }
@keyframes hiw-wave {
  0%, 100% { opacity: .25; }
  50%      { opacity: .7; }
}

.hiw-step.is-in .hiw-venn-a { animation: hiw-venn-a 7s ease-in-out infinite alternate; }
.hiw-step.is-in .hiw-venn-b { animation: hiw-venn-b 7s ease-in-out infinite alternate; }
.hiw-step.is-in .hiw-venn-c { animation: hiw-venn-c 7s ease-in-out infinite alternate; }
@keyframes hiw-venn-a { from { transform: translate(-2px, -1px); } to { transform: none; } }
@keyframes hiw-venn-b { from { transform: translate(2px, -1px); }  to { transform: none; } }
@keyframes hiw-venn-c { from { transform: translate(0, 2px); }     to { transform: none; } }

.hiw-step.is-in .hiw-node { animation: hiw-node 6s ease-in-out infinite alternate; }
.hiw-step.is-in .hiw-node-2 { animation-delay: -1.5s; }
.hiw-step.is-in .hiw-node-3 { animation-delay: -3s; }
.hiw-step.is-in .hiw-node-4 { animation-delay: -4.5s; }
@keyframes hiw-node {
  from { transform: translateY(0); }
  to   { transform: translateY(-1.5px); }
}

/* ---------- Reveal stagger ---------- */
.js .hiw-step.reveal:nth-child(2) { transition-delay: .14s; }
.js .hiw-step.reveal:nth-child(3) { transition-delay: .28s; }

/* =========================================================
   Tablet
   ========================================================= */
@media (min-width: 640px) {
  .hiw-intro { padding: 72px 0 48px; }
  .hiw-title { font-size: clamp(2rem, 4.6vw, 2.5rem); }
  .hiw-line { display: block; }
  .hiw-steps-section { padding: 32px 0 96px; }
}

/* =========================================================
   Desktop — steps side by side: 01 → 02 → 03
   ========================================================= */
@media (min-width: 900px) {
  .hiw-intro { padding: 104px 0 64px; }
  .hiw-title { font-size: clamp(2.5rem, 3.7vw, 3rem); margin: 20px auto 22px; }
  .hiw-lead { font-size: 1.125rem; }

  .hiw-steps-section { padding: 40px 0 128px; }

  .hiw-steps {
    --gap: 48px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    max-width: 1100px;
  }

  /* Icon sits above the text on desktop */
  .hiw-icon {
    order: -1;
    width: 76px; height: 76px;
    margin: 0 0 28px;
    box-shadow: 0 0 0 12px var(--white);
  }
  .hiw-icon svg { width: 56px; height: 56px; }

  /* One hairline running through the icon centres */
  .hiw-steps::before {
    content: "";
    position: absolute;
    top: 38px;
    left: calc((100% - 2 * var(--gap)) / 6);
    right: calc((100% - 2 * var(--gap)) / 6);
    height: 1px;
    background: linear-gradient(90deg, rgba(91, 46, 255, .28), rgba(75, 69, 216, .28) 60%, rgba(184, 240, 0, .7));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.4s var(--ease) .3s;
  }
  .js .hiw-steps.is-in::before,
  html:not(.js) .hiw-steps::before { transform: scaleX(1); }

  .hiw-step { position: relative; }
  .hiw-step:not(:last-child)::after {
    position: absolute;
    top: 38px;
    right: calc(var(--gap) / -2);
    width: 7px; height: 7px;
    margin: 0;
    background: none;
    border-top: 1px solid rgba(75, 69, 216, .5);
    border-right: 1px solid rgba(75, 69, 216, .5);
    transform: translate(50%, -50%) rotate(45deg);
  }

  .hiw-step h2 { margin: 12px 0 10px; letter-spacing: .06em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hiw-step.is-in .hiw-wave,
  .hiw-step.is-in .hiw-venn-a,
  .hiw-step.is-in .hiw-venn-b,
  .hiw-step.is-in .hiw-venn-c,
  .hiw-step.is-in .hiw-node { animation: none; }
  .hiw-wave { opacity: .5; }
}