/* Step-by-step product guides (guide-*.html). Loaded after site.css; uses its colour variables. */
.g-hero{background:var(--navy,#0C1B33);color:#fff;padding:54px 0 40px}
.g-hero .crumb{font-size:12.5px;opacity:.75;margin-bottom:10px}
.g-hero .crumb a{color:#fff;text-decoration:underline}
.g-hero h1{font-size:clamp(28px,4vw,40px);line-height:1.15;margin:0 0 10px}
.g-hero p{max-width:680px;opacity:.85;margin:0}
.g-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.g-chips a{background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:7px 14px;font-size:13px;text-decoration:none}
.g-chips a:hover{background:rgba(255,255,255,.22)}
.g-body{padding:34px 0 10px}
.g-flow{margin:0 0 46px}
.g-flow>h2{font-size:24px;margin:0 0 4px}
.g-flow>.g-sub{color:var(--text2,#566377);margin:0 0 20px;max-width:720px}
.gstep{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:22px;align-items:start;padding:18px 0;border-top:1px solid var(--border,#d9e0ea)}
.gstep .gnum{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#e5322d;color:#fff;font-weight:700;font-size:14px;margin-bottom:8px}
.gstep h3{font-size:17px;margin:0 0 6px}
.gstep p{margin:0 0 6px;color:var(--text2,#566377);font-size:14.5px;line-height:1.55}
.gstep .gnote{font-size:13px;color:var(--mute,#8a95a6)}
.gstep figure{margin:0;border:1px solid var(--border,#d9e0ea);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(12,27,51,.08)}
.gstep figure img{display:block;width:100%;height:auto}
.gstep figcaption{font-size:12.5px;color:var(--mute,#8a95a6);padding:8px 12px;border-top:1px solid var(--border,#d9e0ea)}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:18px 0 30px}
.g-card{display:block;border:1px solid var(--border,#d9e0ea);border-radius:12px;padding:16px;background:#fff;text-decoration:none;color:inherit}
.g-card:hover{box-shadow:0 10px 28px rgba(12,27,51,.12)}
.g-card h3{margin:0 0 6px;font-size:16px}
.g-card p{margin:0;font-size:13.5px;color:var(--text2,#566377)}
.g-card .g-n{font-size:12px;color:var(--mute,#8a95a6);margin-top:8px}
.g-group{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute,#8a95a6);margin:26px 0 0}
@media (max-width:820px){.gstep{grid-template-columns:1fr}.gstep figure{order:2}}

.g-xref{background:var(--bg,#f3f6fb);border:1px solid var(--border,#d9e0ea);border-radius:10px;padding:12px 16px;margin:0 0 24px;font-size:14px;color:var(--text2,#566377)}
.g-xref a{color:var(--navy,#0C1B33);font-weight:600;text-decoration:underline}
.g-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 10px}
.g-tile{display:block;border:1px solid var(--border,#d9e0ea);border-radius:14px;padding:22px;background:#fff;text-decoration:none;color:inherit}
.g-tile:hover{box-shadow:0 12px 30px rgba(12,27,51,.12)}
.g-tile .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange,#F47C20);font-weight:700;margin-bottom:6px}
.g-tile h3{margin:0 0 8px;font-size:20px}
.g-tile p{margin:0 0 12px;color:var(--text2,#566377);font-size:14.5px}
.g-tile .go{font-weight:700;color:var(--navy,#0C1B33)}
.sg-guides{margin:12px 0 0;font-size:13.5px;color:var(--text2,#566377)}
.sg-guides a{color:var(--navy,#0C1B33);font-weight:600;text-decoration:underline}