/* How It Works - page-specific styles.
   Static styles lifted out of inline attributes into semantic classes.
   All values reference canonical tokens; the one local tint below keeps
   the step-circle / pill background pixel-identical to the original. */

.howit {
  --howit-step-bg: #FFF3E0; /* warm cream tint, matches original inline value */
  max-width: 720px;
}

.howit__title {
  font-size: 28px;
}

.howit__note {
  border-radius: var(--radius-md);
}

.howit__steps {
  counter-reset: m2y-step;
}

.howit__card {
  border-radius: var(--radius-lg);
}

.howit__step-num {
  width: 56px;
  height: 56px;
  background: var(--howit-step-bg);
  color: var(--brand-orange-800);
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-display);
}

.howit__step-title {
  font-size: 18px;
}

.howit__flow {
  font-size: 14px;
}

.howit__flow-pill {
  background: var(--howit-step-bg);
  color: var(--brand-orange-800);
  padding: 8px 16px;
}

.howit__section-heading {
  font-size: 20px;
}

/* ----------------------------------------------------------------
   Dark mode. Light mode above is untouched. Bootstrap's .card has
   no dark override in site.css, so the numbered step cards render
   white on the dark canvas. Pin them to the elevated --paper
   surface with a light title; .text-muted body copy is already
   pinned to --ink-500 (about 4.9:1 on --paper #2a2a2a) in site.css.
   The local cream tint behind the step circle and flow pills also
   stays pale in dark mode, so we swap it for a deep amber surface
   tint with a bright --brand-orange glyph, matching the dark
   .sell-option__icon and .m2y-trust__icon treatments.
   ---------------------------------------------------------------- */
[data-theme="dark"] .howit__card {
  background: var(--paper);
  border-color: var(--ink-200);
}

[data-theme="dark"] .howit__step-title {
  color: var(--ink-900);
}

[data-theme="dark"] .howit {
  --howit-step-bg: rgba(248, 154, 31, 0.18);
}

[data-theme="dark"] .howit__step-num,
[data-theme="dark"] .howit__flow-pill {
  color: var(--brand-orange);
}