/* /:l/how-it-works. Loaded only there. Mobile first: one column, two from 900px. */
:root .fz .how-page { width:calc(100% - 32px); max-width:1200px; margin:auto; padding:32px 0 64px; }
:root .fz .how-head { max-width:820px; margin-bottom:32px; }
:root .fz .how-head h1 { font-size:34px; letter-spacing:-1px; line-height:1.15; margin-bottom:12px; }
:root .fz .how-head p:not(.eyebrow) { color:var(--muted); font-size:16px; margin-bottom:8px; }
:root .fz .how-head .how-hint { color:var(--ink); font-weight:600; }
:root .fz .how-split { display:grid; grid-template-columns:1fr; gap:20px; }
:root .fz .how-col { min-width:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-l); padding:24px 20px; }
:root .fz .how-vendor { background:var(--accent); border-color:var(--accent); color:var(--white); }
:root .fz .how-label { font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
:root .fz .how-col h2 { font-size:28px; letter-spacing:-.6px; margin-bottom:6px; }
:root .fz .how-col-sub { color:var(--muted); margin-bottom:24px; }
:root .fz .how-steps { list-style:none; counter-reset:step; margin:0 0 24px; padding:0; display:grid; gap:18px; }
:root .fz .how-steps li { counter-increment:step; display:grid; grid-template-columns:36px 1fr; gap:4px 14px; }
:root .fz .how-steps li::before { content:counter(step); grid-row:span 2; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--accent); color:var(--white); }
:root .fz .how-steps h3 { font-size:17px; margin:6px 0 0; }
:root .fz .how-steps p { margin:0; color:var(--text); font-size:15px; line-height:1.6; }
:root .fz .how-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
/* Blue card: white text, white step badges and a white primary button. */
:root .fz .how-vendor :is(h2,h3,.how-label,.text-link,.how-col-sub,.how-steps p) { color:var(--white); }
:root .fz .how-vendor .how-steps li::before { background:var(--white); color:var(--accent); }
:root .fz .how-vendor .primary { background:var(--white); color:var(--accent); }
:root .fz .how-vendor .primary:hover { background:var(--accent-soft); color:var(--accent-dark); }
:root .fz .how-faq-col h2 { margin-bottom:8px; }
:root .fz .how-faq { border-bottom:1px solid var(--line); }
:root .fz .how-faq summary { cursor:pointer; padding:14px 0; font-weight:600; }
:root .fz .how-faq p { margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.6; }
@media (min-width:900px) {
  :root .fz .how-page { padding-top:56px; }
  :root .fz .how-head h1 { font-size:44px; }
  /* DOM order is left column then right, so phones read one side at a time; desktop fills column by column. */
  :root .fz .how-split { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; grid-auto-flow:column; }
  :root .fz .how-col { padding:36px; }
}