/* ============================================================
   Agencies page styles
   Self-contained: includes the shared component classes this page
   borrows (hero, dark trust cards, deliverables grid, cta panel),
   copied from how.css so the page does not depend on how.css being
   loaded. Global classes (.section, .container, .eyebrow,
   .section-title, .section-sub, .section-dark, .btn*) come from
   site.css.
   ============================================================ */

/* hero */
.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:26ch;margin-left:auto;margin-right:auto;text-align:center;}

/* 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;}

/* ---- agencies-specific bits ---- */
.ag-narrow{max-width:760px;}
.ag-lede{font-size:16px;line-height:1.7;color:var(--muted);margin:0 auto 18px;max-width:760px;}
.ag-lede:last-child{margin-bottom:0;}
.ag-note{margin:30px auto 0;max-width:640px;text-align:center;font-size:13.5px;line-height:1.6;color:var(--muted-2);}
.ag-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

@media (max-width:900px){
  .how-h1{font-size:32px;}
  .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;}
  .ag-cta-row .btn{width:100%;justify-content:center;}
}

/* FAQ (copied from pricing.css so the page is self-contained) */
.faq{max-width:820px;margin:50px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;}
.faq-item h3{font-family:var(--display);font-size:16.5px;font-weight:600;margin-bottom:8px;}
.faq-item p{font-size:14px;color:var(--muted);line-height:1.6;}
@media(max-width:680px){
  .faq{grid-template-columns:1fr;gap:22px;}
}

/* ---- Pass 2: two-column splits, who-its-for, workflow ---- */

/* two-column split (text + illustration) */
.ag-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.ag-split-text{min-width:0;}
.ag-split-illo{width:100%;}
.ag-illo{width:100%;height:auto;display:block;border-radius:25px;box-shadow:0 18px 44px rgba(11,18,32,.14);}
/* on the dark section, put the illustration first (left), text right, for variety */
.ag-split-dark{grid-template-columns:1fr 1fr;}
.ag-split-dark .ag-split-text{order:2;}
.ag-split-dark .ag-split-illo{order:1;}

/* bullet points in the dark section */
.ag-points{list-style:none;padding:0;margin:20px 0 0;}
.ag-points li{position:relative;padding-left:26px;margin-bottom:16px;font-size:14.5px;line-height:1.6;color:var(--on-dark-muted);}
.ag-points li:last-child{margin-bottom:0;}
.ag-points li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;background:var(--green-bright);}
.ag-points li b{color:var(--on-dark);font-weight:600;}

/* who it's for */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.who-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 22px;}
.who-ic{width:44px;height:44px;border-radius:12px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--blue);margin-bottom:16px;}
.who-card h3{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:8px;line-height:1.25;}
.who-card p{font-size:13.5px;color:var(--muted);line-height:1.55;}

/* workflow steps */
.wf-steps{display:grid;gap:4px;}
.wf-split{align-items:center;}
.wf-step{display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line);}
.wf-step:last-child{border-bottom:none;}
.wf-n{width:36px;height:36px;border-radius:10px;background:var(--ink-panel);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;}
.wf-body h3{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:5px;}
.wf-body p{font-size:14px;color:var(--muted);line-height:1.55;}

@media (max-width:820px){
  .ag-split,.ag-split-dark{grid-template-columns:1fr;gap:28px;}
  .ag-split-dark .ag-split-text{order:1;}
  .ag-split-dark .ag-split-illo{order:2;}
  .ag-illo{max-width:420px;}
  .who-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .who-grid{grid-template-columns:1fr;}
}