/* how-it-works.html (POP-112). Reuses styles.css tokens + .step/.num/.vs-*/.faq-item.
   New only: a 4-column step grid and the two "on the job" surface cards. No inline CSS. */

/* Hero h1 — matches the .center h2 scale used elsewhere (this page's heading is a
   real page-level h1, not a section h2). */
.center h1 { font-family: var(--disp); font-weight: 800; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; }

/* 4-step flow grid (styles.css .steps is fixed at 3 columns) */
.hiw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* On-the-job surfaces (AI coach + cheat sheet) */
.hiw-surfaces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hiw-surface {
    background: #fff;
    border: var(--bd);
    border-radius: 18px;
    padding: 28px;
    box-shadow: var(--sh);
}
.hiw-surface .hiw-ico {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: var(--bd); border-radius: 12px;
    background: var(--lime);
    margin-bottom: 16px;
}
.hiw-surface .hiw-ico svg { width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hiw-surface h3 { font-size: 19px; margin-bottom: 9px; }
.hiw-surface p { color: var(--g500); font-size: 14.5px; font-weight: 600; line-height: 1.55; }

@media (max-width: 980px) {
    .hiw-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .hiw-steps { grid-template-columns: 1fr; }
    .hiw-surfaces { grid-template-columns: 1fr; }
}