/* =============================================================
   Site-wide restyle — brings every page built on styles.css in line with the
   homepage: Geist type, brand-blue accent, the framed column, dashed section
   dividers, one spacing scale and small radii. Content and layout are unchanged.
   Loaded on every page after brand.css (tokens come from brand.css).
   ============================================================= */
.bx {
  --base: var(--bx-bg);
  --text: var(--bx-text);
  --near-black: var(--bx-text);
  --black: var(--bx-text);
  --muted: var(--bx-muted);
  --border: #D8E0EA;
  --border-soft: #E6EBF2;
  --radius: 6px;
  --radius-lg: 10px;
  --gutter: var(--pad);
  --font: var(--bx-sans);
}

/* ---------- Sections: one rhythm, a dashed divider between each ---------- */
.bx .section { position: relative; padding-block: var(--sec); }
.bx .section-sm { position: relative; padding-block: clamp(48px, 5vw, 72px); }
.bx main > section { position: relative; }
.bx main > section + section::before, .bx main > section:first-child::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--bx-dash) 0 6px, transparent 6px 12px);
  background-size: 12px 1px; animation: bx-march 1.4s linear infinite;
}
.bx main > section:first-child::before { top: var(--nav-h); }
/* sections that are deliberately joined (no gap between them) keep no divider */
.bx main > section[style*="padding-top:0"]::before,
.bx main > section[style*="padding-bottom:0"] + section::before { display: none; }
.bx .frame { border-color: transparent; }
.bx .divider { border-top-color: var(--bx-line-2); }

/* ---------- Hero ---------- */
.bx .hero-grid-bg { display: none; }
.bx .hero-radial { opacity: 1; background: radial-gradient(90% 60% at 50% 0%, #E2EBFA 0%, #EFF4FB 55%, var(--bx-bg) 100%); }
.bx .hero-badge { border-radius: var(--bx-r); background: #fff; box-shadow: none; border-color: var(--bx-line-2); }
.bx .hero-badge .pip { border-radius: 4px; }
.bx .hero-note { color: var(--bx-muted); }

/* ---------- Type ---------- */
.bx h1, .bx h2, .bx h3, .bx h4 { color: var(--bx-text); }
.bx .display { font-weight: 600; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.05em; }
.bx .h1 { font-weight: 600; font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1.05; letter-spacing: -0.045em; }
.bx .h2 { font-weight: 600; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.06; letter-spacing: -0.045em; }
.bx .h3 { font-weight: 600; letter-spacing: -0.03em; }
.bx .lead { color: #4A5568; }
.bx .eyebrow { font-family: var(--bx-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; color: var(--bx-gold); }
.bx .eyebrow.muted { color: var(--bx-muted); }
.bx .section-head { max-width: 860px; margin-bottom: var(--gap); }
.bx .section-head .lead { margin-top: 16px; }
.bx .link-arrow { color: var(--bx-gold); font-weight: 600; }
.bx .link-arrow:hover { color: var(--bx-gold-2); }

/* ---------- Buttons (same as the homepage) ---------- */
.bx .btn { min-width: 0; border-radius: var(--bx-r); font-family: var(--bx-sans); font-weight: 600; box-shadow: none; }
.bx .btn svg { transition: transform 0.2s ease; }
.bx .btn:hover svg { transform: translateX(3px); }
.bx .btn-lg { height: 50px; padding: 0 24px; font-size: 0.97rem; }
.bx .btn-primary { background: var(--bx-gold); color: #fff; }
.bx .btn-primary:hover { background: var(--bx-gold-2); box-shadow: none; }
.bx .btn-secondary { background: #fff; color: var(--bx-text); border: 1px solid var(--bx-line-2); }
.bx .btn-secondary:hover { background: #F1F5FB; border-color: rgba(15, 23, 42, 0.24); box-shadow: none; }

/* ---------- Surfaces: small radii, hairline borders, blue hover ---------- */
.bx .card, .bx .step, .bx .role, .bx .compare .col, .bx .tcard, .bx .post-card, .bx .form, .bx .mock, .bx .pstage,
.bx .viz-app, .bx .viz-hero, .bx .viz-traps, .bx .article-banner, .bx .stats, .bx .dropdown, .bx .prose .callout { border-radius: var(--bx-r2); }
.bx .card .ic, .bx .contact-feat .ic, .bx .cand, .bx .mock-float, .bx .rz-doc, .bx .rz-ghost, .bx .viz-tile, .bx .viz-node,
.bx .viz-template, .bx .viz-prompt, .bx .viz-cal, .bx .step .s-ic, .bx .frow .fic, .bx .logo-pill, .bx .pill, .bx .cand .av { border-radius: var(--bx-r); }
.bx .card, .bx .step, .bx .role, .bx .tcard, .bx .post-card { border-color: var(--bx-line-2); }
.bx .card.hoverable:hover, .bx .step.hoverable:hover { border-color: var(--bx-blue-c); box-shadow: 0 18px 36px -18px rgba(37, 99, 235, 0.35); }
.bx .callout { border-radius: var(--bx-r); }
/* no pills: tags and badges get the same small radius as the homepage */
.bx .chip, .bx .viz-pill, .bx .rz-chip, .bx .rz-tag, .bx .rz-badge, .bx .post-thumb .tag { border-radius: 4px; }
.bx .bar, .bx .bar > i { border-radius: 3px; }

/* ---------- Stats (homepage style: solid numbers, mono labels) ---------- */
.bx .stats { background: var(--bx-line-2); border-color: var(--bx-line-2); }
.bx .stat-num { background: none; -webkit-text-fill-color: currentColor; color: var(--bx-text); font-weight: 600; letter-spacing: -0.05em; }
.bx .stat-label { font-family: var(--bx-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bx-muted); }

/* ---------- Dark panels: the homepage's ink colour, small radius ---------- */
.bx .navy { border-radius: var(--bx-r2); background: #0B1220; }
.bx .navy::before { background: radial-gradient(70% 120% at 100% 0%, rgba(37, 99, 235, 0.28), transparent 55%); }
.bx .navy .eyebrow { color: #93C5FD; }

/* ---------- CTA band → the homepage's closing call to action (light, left-aligned) ---------- */
.bx main > section:has(> .container > .cta) { background: radial-gradient(70% 90% at 15% 0%, #E2EBFA, var(--bx-bg) 70%); }
.bx .cta { background: none; border-radius: 0; overflow: visible; color: var(--bx-text); text-align: left; padding: clamp(24px, 4vw, 56px) 0; }
.bx .cta::before, .bx .cta::after, .bx .cta .beam { display: none; }
.bx .cta h2 { max-width: 900px; margin-inline: 0; color: var(--bx-text); font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.4rem); line-height: 1.03; letter-spacing: -0.05em; }
.bx .cta p { max-width: 660px; margin: 24px 0 0; color: #4A5568; font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.3rem); line-height: 1.55; }
.bx .cta .btn-row { justify-content: flex-start; margin-top: 36px; }
.bx .cta .btn-secondary { background: var(--bx-gold); border-color: var(--bx-gold); color: #fff; }
.bx .cta .btn-secondary:hover { background: var(--bx-gold-2); border-color: var(--bx-gold-2); }
.bx .cta .btn-ghost-light { background: #fff; color: var(--bx-text); border: 1px solid var(--bx-line-2); }
.bx .cta .btn-ghost-light:hover { background: #F1F5FB; }

/* ---------- FAQ, forms, lists ---------- */
.bx .faq-item, .bx .faq-item:last-child { border-color: var(--bx-line-2); }
.bx .frow, .bx .contact-feat { border-top-color: var(--bx-line); }
.bx .checks li svg { color: var(--bx-gold); }
.bx .checks.on-dark li svg { color: #93C5FD; }

/* text inside the dark panels stays light */
.bx .navy h1, .bx .navy h2, .bx .navy h3, .bx .navy h4 { color: #fff; }
.bx .navy .lead, .bx .navy p { color: var(--on-dark); }
.bx .navy .stat-num { color: #fff; }
.bx .navy .stat-label { color: var(--on-dark); }