/* CentriWeb Help Centre — client-facing design system v2.
   Editorial, light, phone-first. Bricolage Grotesque display over a system body;
   paper-white ground, deep navy ink, CentriWeb blue as the single working accent. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&display=swap');

:root {
  --paper:#fbfcfd; --card:#ffffff; --ink:#152230; --mut:#5a6b7d; --soft:#8b9aab;
  --line:#e4eaf0; --line2:#d3dde6;
  --blue:#2f7fc4; --blue-d:#1f5f99; --blue-wash:#eaf3fb; --blue-edge:#c9e0f3;
  --ok:#1f9d4d; --ok-wash:#e9f7ee;
  --disp:'Bricolage Grotesque', -apple-system, 'Segoe UI', sans-serif;
  --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.7 var(--body); -webkit-font-smoothing:antialiased; }

/* chrome */
.topbar { position:sticky; top:0; z-index:10; background:rgba(251,252,253,.88); backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid var(--line); }
.topbar-in { max-width:820px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; }
.brand .mark { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,#4a9fe0,#2f6fb0); display:grid; place-items:center; box-shadow:0 2px 8px rgba(47,127,196,.35); }
.brand .mark::after { content:''; width:10px; height:10px; border-radius:50%; border:2.5px solid #fff; }
.brand small { font-weight:600; color:var(--soft); font-family:var(--body); font-size:12.5px; margin-left:2px; }
.topbar a.back { font-size:14px; color:var(--blue); text-decoration:none; font-weight:600; white-space:nowrap; }
.topbar a.back:hover { color:var(--blue-d); }

.wrap { max-width:820px; margin:0 auto; padding:34px 22px 90px; }

/* home hero */
.hero { padding:26px 0 8px; }
.kicker { font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 12px; }
h1 { font-family:var(--disp); font-size:clamp(30px, 5.4vw, 44px); font-weight:800; line-height:1.08; letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance; }
.lede { font-size:18.5px; line-height:1.65; color:var(--mut); margin:0 0 8px; max-width:56ch; }

/* home cards */
.cat { font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--soft); text-transform:uppercase; margin:38px 0 14px; display:flex; align-items:center; gap:12px; }
.cat::after { content:''; flex:1; height:1px; background:var(--line); }
.cards { display:grid; gap:14px; }
a.gcard { display:flex; gap:18px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; text-decoration:none; color:var(--ink); box-shadow:0 1px 2px rgba(21,34,48,.04); transition:border-color .14s, box-shadow .14s, transform .14s; }
a.gcard:hover { border-color:var(--blue-edge); box-shadow:0 10px 30px rgba(21,34,48,.09); transform:translateY(-2px); }
.gnum { flex:none; width:44px; height:44px; border-radius:13px; background:var(--blue-wash); border:1px solid var(--blue-edge); color:var(--blue-d); font-family:var(--disp); font-weight:800; font-size:19px; display:grid; place-items:center; margin-top:2px; }
a.gcard .t { font-family:var(--disp); font-size:18.5px; font-weight:700; letter-spacing:-.01em; margin:0 0 5px; }
a.gcard .d { font-size:15px; line-height:1.55; color:var(--mut); margin:0 0 8px; }
a.gcard .m { font-size:12.5px; color:var(--blue); font-weight:700; }

/* guide page header */
.ghead { padding:28px 0 6px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.gmeta { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 22px; }
.chip { font-size:12.5px; font-weight:700; color:var(--blue-d); background:var(--blue-wash); border:1px solid var(--blue-edge); border-radius:99px; padding:4px 12px; }
.chip.grey { color:var(--mut); background:#f1f4f7; border-color:var(--line2); }

/* content */
h2 { font-family:var(--disp); font-size:24px; font-weight:800; letter-spacing:-.02em; margin:44px 0 14px; text-wrap:balance; }
h2 .h2n { color:var(--blue); margin-right:8px; }
p { max-width:66ch; }

/* step rail */
.steps { position:relative; margin:18px 0 8px; }
.steps::before { content:''; position:absolute; left:21px; top:16px; bottom:16px; width:2px; background:linear-gradient(180deg,var(--blue-edge),var(--line)); }
.step { position:relative; display:flex; gap:18px; padding:14px 0; }
.step .n { flex:none; z-index:1; width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#4a9fe0,#2f6fb0); color:#fff; font-family:var(--disp); font-weight:800; font-size:18px; display:grid; place-items:center; box-shadow:0 3px 10px rgba(47,127,196,.3), 0 0 0 4px var(--paper); }
.step .b { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 19px; flex:1; box-shadow:0 1px 2px rgba(21,34,48,.04); }
.step h3 { font-family:var(--disp); margin:0 0 6px; font-size:17px; font-weight:700; letter-spacing:-.01em; }
.step p { margin:0; font-size:15.5px; line-height:1.6; color:var(--mut); }
.step p b, .note b, td b { color:var(--ink); }

/* callouts */
.note { background:var(--blue-wash); border:1px solid var(--blue-edge); border-left:4px solid var(--blue); border-radius:12px; padding:15px 19px; font-size:15.5px; line-height:1.6; margin:22px 0; }
.note.good { background:var(--ok-wash); border-color:#c4e8d2; border-left-color:var(--ok); }
.auto { display:flex; align-items:center; gap:9px; font-family:var(--disp); font-size:13px; font-weight:800; color:var(--ok); text-transform:uppercase; letter-spacing:.08em; margin:34px 0 6px; }
.auto::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-wash); }

/* tables */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; margin:18px 0; box-shadow:0 1px 2px rgba(21,34,48,.04); }
table { border-collapse:collapse; width:100%; font-size:15px; background:var(--card); }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--soft); padding:11px 16px; border-bottom:1px solid var(--line); background:#f7fafc; font-weight:700; }
td { padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; }
tr:last-child td { border-bottom:0; }

/* footer */
.pager { display:flex; justify-content:space-between; gap:12px; margin-top:44px; }
.pager a { flex:1; max-width:48%; border:1px solid var(--line); border-radius:14px; padding:14px 18px; text-decoration:none; color:var(--ink); background:var(--card); transition:border-color .14s; }
.pager a:hover { border-color:var(--blue-edge); }
.pager .lbl { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); display:block; margin-bottom:3px; }
.pager .ttl { font-family:var(--disp); font-size:15px; font-weight:700; }
.pager a.next { text-align:right; margin-left:auto; }
.foot { margin-top:46px; padding-top:20px; border-top:1px solid var(--line); font-size:14.5px; color:var(--mut); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot a { color:var(--blue); font-weight:600; }

@media (max-width:560px) {
  .wrap { padding:26px 18px 70px; }
  .step { gap:13px; } .step .n { width:38px; height:38px; font-size:16px; }
  .steps::before { left:18px; }
  .gnum { width:38px; height:38px; font-size:17px; border-radius:11px; }
  .pager { flex-direction:column; } .pager a { max-width:100%; } .pager a.next { text-align:left; }
}
@media print { .topbar, .pager, .foot { display:none; } body { background:#fff; } }