/* ============ HOW IT WORKS ============ */
.how-head { max-width: 42rem; }
.how-head .h2 .green { color: var(--secondary); }
.how-list { margin-top: 4rem; display: flex; flex-direction: column; gap: 1.25rem; }

.how-step {
  position: relative; overflow: hidden; border-radius: 2rem; border: 1px solid var(--border);
  padding: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
  transition: transform .3s ease;
}
@media (min-width: 640px) { .how-step { padding: 2.5rem; } }
@media (min-width: 768px) { .how-step { grid-template-columns: auto 4fr 7fr; } }
.how-step:hover { transform: translateY(-4px); }

.how-step.light { background: var(--card); color: var(--card-foreground); }
.how-step.dark { background: var(--secondary); color: var(--secondary-foreground); }

.how-ghost {
  position: absolute; right: -1rem; bottom: -2.5rem; pointer-events: none;
  font-family: "Cabinet Grotesk", sans-serif; font-weight: 900; font-size: 10rem; line-height: 1; opacity: .1;
}
.how-step.light .how-ghost { color: var(--primary); }
.how-step.dark .how-ghost { color: var(--background); }

.how-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; }
.how-step.light .how-ico { background: rgba(14,118,188,.1); color: var(--primary); }
.how-step.dark .how-ico { background: rgba(255,255,255,.15); color: var(--background); }

.how-step h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; margin: 0; position: relative; z-index: 1; }
@media (min-width: 640px) { .how-step h3 { font-size: 1.875rem; } }
.how-step p { font-size: 1.05rem; line-height: 1.7; margin: 0; position: relative; z-index: 1; }
.how-step.light p { color: var(--muted-foreground); }
.how-step.dark p { color: rgba(240,255,225,.85); }