/* ============================================================
   How it works page styles
   ============================================================ */

.how-hero{padding:60px 0 30px;}
.how-h1{font-family:var(--display);font-weight:700;font-size:46px;line-height:1.08;letter-spacing:-1.6px;margin-bottom:16px;max-width:16ch;margin-left:auto;margin-right:auto;}

/* the numbered flow */
.flow{max-width:840px;margin:0 auto;}
.flow-step{display:grid;grid-template-columns:64px 1fr;gap:28px;}
.flow-left{display:flex;flex-direction:column;align-items:center;}
.flow-n{width:52px;height:52px;flex-shrink:0;border-radius:13px;background:var(--ink-panel);color:#fff;font-family:var(--display);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;}
.flow-line{flex:1;width:2px;background:linear-gradient(var(--line-2),transparent);margin:10px 0;}
.flow-body{padding-bottom:52px;}
.flow-step.last .flow-body{padding-bottom:0;}
.flow-body h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.5px;margin-bottom:12px;line-height:1.2;}
.flow-body>p{font-size:15.5px;color:var(--muted);line-height:1.65;max-width:600px;}
.flow-body>p b{color:var(--text);font-weight:600;}

.flow-card{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px 20px;max-width:460px;}
.flow-card.dark{background:var(--ink-panel);border-color:rgba(255,255,255,.08);}
.fc-label{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;}
.flow-card.dark .fc-label{color:var(--on-dark-muted);}
.fc-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px solid var(--line);}
.fc-row:last-child{border-bottom:none;}
.fc-row span{color:var(--muted);}
.fc-row b{color:var(--text);font-weight:600;}
.fc-answer{font-family:var(--mono);font-size:13.5px;line-height:1.8;color:#C9D3E0;}
.fc-answer .c{color:var(--blue-bright);border-bottom:1px solid rgba(35,169,225,.4);}
.fc-answer .g{color:#8A94A6;}
.fc-scoreline{display:flex;align-items:center;gap:18px;}
.fc-score{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--text);}
.fc-score small{font-size:16px;color:var(--muted-2);font-weight:600;}
.fc-verdict b{display:block;font-family:var(--display);font-size:16px;}
.fc-verdict span{font-size:13px;color:var(--muted);}

/* trust cards (dark) */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.trust-card{background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:14px;padding:28px 24px;}
.trust-card h3{font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:10px;color:#fff;}
.trust-card p{font-size:14px;color:var(--on-dark-muted);line-height:1.6;}

/* deliverables */
.deliver-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.deliver{text-align:center;padding:10px;}
.dv-ic{width:52px;height:52px;margin:0 auto 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--blue);}
.deliver h3{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:8px;}
.deliver p{font-size:13.5px;color:var(--muted);line-height:1.55;}

/* cta panel (shared look) */
.cta-panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:56px 40px;}

@media (max-width:900px){
  .how-h1{font-size:32px;}
  .flow-step{grid-template-columns:48px 1fr;gap:18px;}
  .flow-n{width:44px;height:44px;font-size:16px;}
  .trust-grid{grid-template-columns:1fr;gap:16px;}
  .deliver-grid{grid-template-columns:1fr 1fr;gap:26px;}
}
@media (max-width:520px){
  .deliver-grid{grid-template-columns:1fr;}
}