/* ── Shared styles for TradeStart evergreen guides ──────────────────────── */
.guide-hero { padding: 52px 0 24px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.guide-hero .eyebrow { color: var(--blue); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.guide-hero h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 12px 0 14px; max-width: 20ch; }
.guide-hero p.standfirst { color: var(--muted); max-width: 62ch; font-size: 1.08rem; }

.region-switch { display: inline-flex; gap: 4px; margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.region-switch a { padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--muted); text-decoration: none; }
.region-switch a.active { background: var(--blue); color: #fff; }

.guide-body { padding: 40px 0 8px; }
.guide-body .prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 12px; scroll-margin-top: 90px; }
.prose h3 { font-size: 1.18rem; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--ink); line-height: 1.75; font-size: 1.02rem; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 8px 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
/* Don't restyle button links (e.g. the inline tool CTA) — they own their colours. */
.prose a:not(.btn) { color: var(--blue); font-weight: 500; }
.prose strong { font-weight: 700; }
.prose .muted { color: var(--muted); }

.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.prose td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.callout { background: var(--bg-soft); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; padding: 16px 20px; margin: 20px 0; }
.callout p { margin: 0; }
.callout .k { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); margin-bottom: 4px; }

.tool-inline { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 22px 0; box-shadow: var(--shadow); }
.tool-inline .ti-body { flex: 1; min-width: 0; }
.tool-inline .ti-body b { display: block; font-size: 1rem; }
.tool-inline .ti-body span { font-size: .88rem; color: var(--muted); }
.tool-inline .btn { flex: none; }

.g-faq { border-top: 1px solid var(--line); padding: 18px 0; max-width: 760px; }
.g-faq h3 { font-size: 1.06rem; margin-bottom: 6px; }
.g-faq p { color: var(--muted); line-height: 1.7; margin: 0; }

.guide-cta { margin: 40px 0 8px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 32px; text-align: center; }
.guide-cta h2 { font-size: 1.5rem; margin-bottom: 8px; }
.guide-cta p { color: var(--muted); max-width: 560px; margin: 0 auto 18px; }

.disclaimer { color: var(--muted); font-size: .82rem; max-width: 760px; margin: 26px 0 0; }