/*
  How It Works 15 — standalone HTML/CSS/JS implementation.
  No build step, no framework, no external dependency: copy these three
  files into any project and open index.html as-is.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --white: #ffffff;
  --slate-50: #f8fafc;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-900: #0f172a;
  --brand-green: #39ff14;
  --brand-green-dark: #18b800;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--slate-900);
  background-color: var(--slate-50);
  line-height: 1.5;
}

.hiw {
  padding: clamp(3rem, 2.5rem + 2vw, 5rem) clamp(1rem, 0.3rem + 3vw, 2rem);
}

.hiw__grid {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
}

.stat {
  border-radius: 1.5rem;
  border: 1px solid var(--slate-200);
  background-color: var(--white);
  padding: 2rem;
}

.hiw__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.hiw__heading {
  margin: 0.75rem 0 0;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.stat__underline {
  display: block;
  margin-top: 1rem;
  width: 4rem;
  height: 2px;
  background-color: var(--brand-green);
  transform-origin: left;
}

.stat__number {
  margin: 2rem 0 0;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat__plus {
  color: var(--brand-green-dark);
}

.stat__label {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--slate-600);
}

.steps {
  position: relative;
  margin: 0;
  padding: 0 0 0 0.5rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.steps__line {
  position: absolute;
  left: 1.375rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: var(--slate-200);
}

.step {
  position: relative;
  display: flex;
  gap: 1rem;
}

.step__number {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background-color: var(--slate-900);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
}

.step__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.step__text {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--slate-600);
}

@media (min-width: 1024px) {
  .hiw__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  .stat {
    padding: 2.5rem;
  }

  .stat__number {
    font-size: 3.75rem;
  }
}

/* Motion — the count-up itself is driven by script.js (JavaScript
   requestAnimationFrame), not CSS, and is skipped entirely under reduced
   motion in favor of showing the final value immediately. The underline
   and step stagger below are disabled under reduced motion the same way
   as every other resource in the category. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes al-howitworks15-underline {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @keyframes al-howitworks15-step {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .stat__underline {
    animation: al-howitworks15-underline 700ms 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .step {
    animation: al-howitworks15-step 550ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
How It Works 15

Requirements

Dependencies

Usage
