/* ============================================================
   Customization page (Git-to-Live) — self-contained, on-brand.
   Uses logical properties so it works in both LTR and RTL.
   Palette: --primary-blue #1a73e8, --ink #1b2a4a.
   ============================================================ */
.cz-wrap { --cz-blue:#1a73e8; --cz-dark:#0d5bb5; --cz-ink:#1b2a4a; --cz-soft:#e8f0fe; }
.cz-mx { max-width: 1120px; margin: 0 auto; padding-inline: 22px; }

/* Hero */
.cz-hero { padding: 64px 0 40px; }
.cz-eyebrow {
  display:inline-block; font-weight:800; font-size:.8rem; letter-spacing:.04em;
  color: var(--cz-blue); background: var(--cz-soft);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.cz-h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.25; font-weight: 800; color: var(--cz-ink); margin: 0 0 16px; }
.cz-h1 em { color: var(--cz-blue); font-style: normal; }
.cz-sub { font-size: 1.12rem; line-height: 1.8; color: #44506a; max-width: 720px; margin: 0 0 26px; }
.cz-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cz-note { font-size:.92rem; color:#6b7690; margin-top:14px; }

/* Steps */
.cz-section { padding: 40px 0; }
.cz-sec-head { text-align:center; margin-bottom: 34px; }
.cz-sec-h2 { font-size: clamp(1.5rem,3vw,2.1rem); font-weight:800; color:var(--cz-ink); margin:0 0 10px; }
.cz-sec-p { color:#55617a; font-size:1.05rem; max-width:640px; margin:0 auto; line-height:1.7; }
.cz-steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
.cz-step { background:#fff; border:1px solid #e6ecf5; border-radius:18px; padding:26px; position:relative; }
.cz-step-n { width:38px; height:38px; border-radius:10px; background:var(--cz-blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.cz-step h3 { font-size:1.1rem; color:var(--cz-ink); margin:0 0 8px; font-weight:700; }
.cz-step p { color:#55617a; line-height:1.7; margin:0; font-size:.98rem; }

/* Benefits */
.cz-benefits { background:#f6f8fc; border-radius:24px; padding:40px 26px; }
.cz-ben-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:22px; }
.cz-ben { display:flex; gap:14px; align-items:flex-start; }
.cz-ben i { color:var(--cz-blue); font-size:1.3rem; margin-top:3px; flex:0 0 auto; }
.cz-ben h3 { font-size:1.05rem; color:var(--cz-ink); margin:0 0 5px; font-weight:700; }
.cz-ben p { color:#55617a; line-height:1.7; margin:0; font-size:.96rem; }

/* Not a developer / routing cards */
.cz-route-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.cz-route { border:1px solid #e6ecf5; border-radius:18px; padding:24px; background:#fff; }
.cz-route i { color:var(--cz-blue); font-size:1.5rem; margin-bottom:12px; }
.cz-route h3 { font-size:1.1rem; color:var(--cz-ink); margin:0 0 8px; font-weight:700; }
.cz-route p { color:#55617a; line-height:1.7; margin:0 0 14px; font-size:.96rem; }
.cz-route a { color:var(--cz-blue); font-weight:700; text-decoration:none; }

/* CTA band */
.cz-cta { background: var(--cz-ink); border-radius:24px; padding:48px 30px; text-align:center; color:#fff; }
.cz-cta h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight:800; margin:0 0 12px; }
.cz-cta p { color:#c7d2e6; margin:0 0 24px; font-size:1.05rem; }