/* Landing-only onboarding. Content stays visible without JavaScript. */
.how-it-works {
  margin: 0 0 clamp(3rem, 7vw, 6rem);
  padding: clamp(1.25rem, 4vw, 3.5rem);
  scroll-margin-top: 90px;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--paper);
  box-shadow: 0 18px 55px rgba(40, 26, 75, .05);
}
.how-heading { max-width: 780px; }
.how-heading h2 {
  margin: .5rem 0 1rem;
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  letter-spacing: -.055em;
  line-height: 1.08;
}
.how-intro { margin: 0 0 .7rem; font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.5; }
.how-definition { margin: 0; color: #5c5c63; line-height: 1.6; }
.how-definition strong { color: var(--violet-dark); }
.how-audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.how-audience { min-width: 0; padding: clamp(1.2rem, 2.5vw, 2rem); border-radius: 22px; }
.how-parent { background: #f2edff; }
.how-teen { background: #eaf6ff; }
.how-audience-label { display: block; color: #4b2fc7; font-size: .875rem; font-weight: 800; }
.how-teen .how-audience-label { color: #075f9c; }
.how-audience h3 { margin: .65rem 0 .8rem; font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.03em; line-height: 1.2; }
.how-audience p { margin: 0; line-height: 1.65; }
.how-audience .how-aside { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(40, 26, 75, .12); color: #4d4d57; font-size: .95rem; }
.how-start-title { margin: 2.25rem 0 1.4rem; font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.3; letter-spacing: -.025em; }
.how-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 0; margin: 0; list-style: none; }
.how-steps li { min-width: 0; }
.how-step-number { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1rem; color: #4b2fc7; background: #f2edff; border-radius: 14px; font-weight: 850; font-size: 1rem; font-variant-numeric: tabular-nums; }
.how-steps h4 { margin: 0 0 .6rem; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.35; }
.how-steps p { margin: 0; color: #5c5c63; line-height: 1.65; }
.how-steps strong { color: #36363d; font-weight: 700; }
.how-bottom { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.how-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.4rem; }
.how-actions a { max-width: 100%; text-align: center; }
.how-availability { max-width: 800px; margin: 1.3rem 0 0; color: #5c5c63; font-size: .9rem; line-height: 1.6; }
@media (max-width: 1000px) { .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } }
@media (max-width: 620px) {
  .how-it-works { border-radius: 26px; scroll-margin-top: 1rem; }
  .how-audiences, .how-steps { grid-template-columns: minmax(0, 1fr); }
  .how-audiences { margin-top: 1.5rem; }
  .how-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .85rem; }
  .how-step-number { margin-bottom: 0; }
  .how-actions { align-items: stretch; flex-direction: column; }
}
@media (forced-colors: active) { .how-audience, .how-step-number { border: 1px solid CanvasText; } }