/* how.css — /how-it-works page. Loaded only by how-it-works.html; reuses the
   landing.css design tokens (dark, coral accent, rounded). Matches the site. */
.how{padding:clamp(52px,9vh,116px) 0 clamp(40px,6vh,80px)}
.how-head{max-width:730px;margin:0 0 clamp(28px,4.5vh,48px)}

/* reassurance callout */
.how-callout{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line-2);
  background:var(--accent-soft);border-radius:var(--radius);padding:18px 20px;margin-top:24px}
.how-callout .ic{font-size:20px;line-height:1.3;flex:0 0 auto}
.how-callout p{margin:0;color:var(--ink);font-size:15px;line-height:1.55}

/* "works with your builder" pills */
.how-builders{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.how-builder{border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);
  border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;white-space:nowrap}

/* two lanes: prompts vs motion backgrounds */
.how-lanes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.how-lane{border:1px solid var(--line);background:var(--bg-soft);border-radius:var(--radius-lg);padding:24px}
.how-lane h3{margin:0 0 12px;font-size:18px;display:flex;align-items:center;gap:10px}
.how-lane ol{margin:0;padding-left:20px;color:var(--ink-dim);line-height:1.75;font-size:14.5px}
.how-lane ol li{margin:6px 0}
.how-lane ol strong{color:var(--ink);font-weight:600}
.how-code{margin:14px 0 0;border:1px solid var(--line);background:#0d0d0d;border-radius:12px;
  padding:14px 16px;overflow-x:auto;font-size:12.5px;line-height:1.65;color:var(--ink-dim);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;white-space:pre}
.how-code .t{color:var(--accent-hi)}

@media(max-width:720px){.how-lanes{grid-template-columns:1fr}}