/* Page-scoped styles for /how-it-works/ — recovered from the WP origin (custom-route.php inline blocks) 2026-07-16.
   Loads after the shared stack; selectors are scoped body.how-it-works-page. */

body.how-it-works-page .step-list { display: grid; gap: 0; margin-top: 1rem; }
body.how-it-works-page .step-row { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--grey-200); }
body.how-it-works-page .step-row:first-child { border-top: 1px solid var(--grey-200); }
body.how-it-works-page .step-row:last-child { border-bottom: 1px solid var(--grey-200); }
@media (max-width: 720px) { body.how-it-works-page .step-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.75rem 0; } }
body.how-it-works-page .step-num { font-family: var(--font-m); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); padding-top: 0.25rem; }
body.how-it-works-page .step-h3 { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 0.625rem; line-height: 1.3; letter-spacing: -0.015em; }
body.how-it-works-page .step-text { font-size: 0.92rem; color: var(--grey-700); line-height: 1.7; max-width: 720px; }
body.how-it-works-page .step-text strong { color: var(--ink); font-weight: 600; }
body.how-it-works-page .step-text code { font-family: var(--font-m); font-size: 0.85em; background: var(--grey-100); border: 1px solid var(--grey-200); padding: 1px 6px; color: var(--grey-700); }

body.how-it-works-page .why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--grey-200); background: var(--white); margin-top: 1rem; }
@media (max-width: 800px) { body.how-it-works-page .why-grid { grid-template-columns: 1fr; } }
body.how-it-works-page .why-card { padding: 1.875rem 1.75rem; border-right: 1px solid var(--grey-200); }
body.how-it-works-page .why-card:last-child { border-right: 0; }
@media (max-width: 800px) { body.how-it-works-page .why-card { border-right: 0; border-bottom: 1px solid var(--grey-200); } body.how-it-works-page .why-card:last-child { border-bottom: 0; } }
body.how-it-works-page .why-eyebrow { font-family: var(--font-m); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 0.625rem; }
body.how-it-works-page .why-h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; line-height: 1.3; letter-spacing: -0.015em; }
body.how-it-works-page .why-text { font-size: 0.88rem; color: var(--grey-700); line-height: 1.65; }

/* ============ "INSIDE ONE LOOKUP" PIPELINE ============
   Added 2026-07-30. This page was 723 words explaining a process with zero diagrams.
   Built in HTML/CSS (not a flat SVG) so it stays token-styled, responsive and
   editable — the same approach as the homepage §01 mock. The numbered rail reads
   top-to-bottom on mobile and as a 2/3-up grid on wider screens. */
body.how-it-works-page .hiw-pipe {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--grey-300); border: 1px solid var(--grey-300);
}
body.how-it-works-page .hiw-stage {
  position: relative; background: var(--white);
  padding: 1.6rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
}
body.how-it-works-page .hiw-n {
  font-family: var(--font-m); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--red);
}
body.how-it-works-page .hiw-h {
  font-family: var(--font-h); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
body.how-it-works-page .hiw-d {
  font-size: 0.85rem; line-height: 1.55; color: var(--grey-700); margin: 0;
}
body.how-it-works-page .hiw-src {
  font-family: var(--font-m); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-500); margin-top: auto; padding-top: 0.5rem;
}
/* The confidence tier, styled the same way the product renders it, so the page
   teaches the vocabulary rather than describing it. */
body.how-it-works-page .hiw-tier {
  font-family: var(--font-m); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.45rem; border: 1px solid currentColor;
}
body.how-it-works-page .hiw-tier.ok { color: var(--tier-verified); }
body.how-it-works-page .hiw-tier.warn { color: var(--tier-extract-ink); }
body.how-it-works-page .hiw-foot {
  font-size: 0.85rem; line-height: 1.7; color: var(--grey-700); margin: 1.5rem 0 0;
}
body.how-it-works-page .hiw-inline-tier {
  font-family: var(--font-m); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tier-extract-ink); border: 1px solid currentColor; padding: 0.1rem 0.4rem;
}
@media (max-width: 900px) {
  body.how-it-works-page .hiw-pipe { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body.how-it-works-page .hiw-pipe { grid-template-columns: 1fr; }
}