/* Shared navigation and document presentation; loaded after page styles. */
html { scroll-padding-top: 100px; }
body { overflow-x: visible; }
.topbar { height:80px; min-height:80px; padding:12px max(24px,calc((100vw - 1240px)/2)); display:flex; flex-wrap:nowrap; gap:28px; background:var(--surface-solid); border:0; backdrop-filter:none; box-shadow:0 3px 18px rgba(20,42,70,.07); }
.topbar::before,.topbar::after { content:none; }
.topbar .brand { flex-shrink:0; font-size:22px; gap:10px; }
.topbar .brand .brand-mark { width:42px; height:42px; }
.topbar .brand-words, .site-footer .brand-words, .brand.compact .brand-words { height:auto; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; gap:0; white-space:nowrap; }
.topbar .brand-words strong, .site-footer .brand-words strong, .brand.compact .brand-words strong { font:700 36px/1 var(--serif); letter-spacing:.01em; }
.topbar .brand-words b, .site-footer .brand-words b, .brand.compact .brand-words b { font:700 13px/1 var(--product); letter-spacing:.06em; text-indent:.06em; margin-top:2px; }
.site-footer .brand, .brand.compact { align-items:center; }
.site-footer .brand .brand-mark, .brand.compact .brand-mark { width:42px; height:42px; }
.topbar nav { display:flex; align-items:center; margin-left:auto; gap:24px; }
.topbar nav a { font:700 17px/1.3 var(--sans); text-decoration:none; color:var(--ink2); white-space:nowrap; padding:10px 0; border:0; background:none; }
.topbar nav a::after { content:none; }
.topbar nav a:hover,.topbar nav a[aria-current="page"] { color:var(--blue); }
.topbar .theme-toggle { flex-shrink:0; margin:0; padding:9px 13px; min-height:44px; font:600 14px/1 var(--sans); background:var(--canvas); border:1px solid var(--line); box-shadow:none; }
.menu-toggle { display:none; }
.site-footer { max-width:1240px; margin:0 auto; padding:38px 28px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; border-top:1px solid var(--line); }
.site-footer p { margin:0; max-width:760px; font-size:14px; color:var(--ink2); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 22px; font-size:14px; }
.site-footer small { max-width:760px; }
.site-footer .brand { font-size:20px; }
.cookie-banner { max-width:860px; padding:12px 16px; bottom:12px; border-radius:12px; }
.cookie-banner strong { font-size:14px; }
.cookie-banner p { font-size:12px; line-height:1.4; }
.cookie-banner .button { min-height:40px; font-size:12px; padding:8px 12px; }
.header-b .topbar { background:var(--canvas); box-shadow:none; }
.header-b .topbar nav { padding:0 16px; border-radius:12px; background:var(--surface-solid); }
.sp-main { max-width:1000px; margin:0 auto; padding:36px 28px 72px; font:17px/1.7 var(--sans); overflow-wrap:anywhere; }
.sp-main h1 { font:600 clamp(34px,4vw,54px)/1.12 var(--serif); letter-spacing:-.025em; margin:24px 0; }
.sp-main h2 { font:600 30px/1.2 var(--serif); margin:44px 0 16px; }
.sp-main h3 { font:600 23px/1.3 var(--serif); }
.sp-main a { color:var(--blue); }
.sp-crumbs,.sp-meta { font-size:14px; color:var(--muted); }
.sp-crumbs ol { display:flex; flex-wrap:wrap; list-style:none; gap:8px; padding:0; }
.sp-crumbs li+li::before { content:'›'; margin-right:8px; }
.sp-summary,.sp-toc,.sp-note,.sp-cta { background:var(--surface-solid); border:1px solid var(--line); border-radius:16px; padding:22px; margin:24px 0; }
.sp-summary { border-left:4px solid var(--blue); }
.sp-summary h2,.sp-toc h2 { font-size:22px; margin:0 0 12px; }
.sp-cards { list-style:none; padding:0; display:grid; gap:18px; }
.sp-cards li { padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface-solid); }
.sp-cards li>a { font:600 26px/1.25 var(--serif); text-decoration:none; }
.sp-cards p { color:var(--ink2); }
.sp-table-wrap { max-width:100%; overflow-x:auto; margin:24px 0; }
.sp-main table { width:100%; border-collapse:collapse; font-size:14px; }
.sp-main th,.sp-main td { border:1px solid var(--line); padding:12px; text-align:left; vertical-align:top; }
.sp-main th { background:var(--surface-solid); }
.sp-btn { display:inline-block; border-radius:10px; padding:10px 16px; margin:4px 8px 4px 0; font-weight:700; background:var(--red); color:white!important; text-decoration:none; }
.sp-btn.sec { background:var(--surface-solid); color:var(--blue)!important; border:1px solid var(--line); }
.sp-sources { font-size:14px; }
.legal { overflow-wrap:anywhere; }
@media(max-width:1100px) {
 .topbar { height:72px; min-height:72px; padding:10px 20px; gap:12px; }
 .topbar .theme-toggle { margin-left:auto; }
 .menu-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:10px; background:var(--canvas); cursor:pointer; }
 .menu-toggle svg { width:22px; height:22px; }
 .topbar nav { display:none; position:absolute; top:100%; left:0; right:0; margin:0; padding:12px 20px 20px; background:var(--surface-solid); box-shadow:0 12px 18px rgba(20,42,70,.1); }
 .topbar.menu-open nav { display:flex; flex-direction:column; align-items:stretch; gap:2px; }
 .topbar nav a { padding:12px; border-radius:8px; }
 .topbar nav a:hover { background:var(--canvas); }
 .header-b .topbar nav { padding:12px 20px 20px; border-radius:0; }
}
@media(max-width:540px) {
 html { scroll-padding-top:88px; }
 .topbar { padding:10px 14px; gap:8px; }
 .topbar .brand { gap:7px; }
 .topbar .brand .brand-mark { width:37px; height:37px; }
 .topbar .brand-words strong, .site-footer .brand-words strong, .brand.compact .brand-words strong { font-size:32px; }
 .topbar .brand-words b, .site-footer .brand-words b, .brand.compact .brand-words b { font-size:12px; margin-top:2px; }
 .topbar .theme-toggle { padding:9px 11px; }
 .site-footer { padding:30px 18px; }
 .site-footer .brand .brand-mark, .brand.compact .brand-mark { width:37px; height:37px; }
 .site-footer nav { gap:12px 18px; }
 .cookie-banner { left:8px; right:8px; bottom:8px; padding:10px 12px; gap:8px; }
 .cookie-banner>div:last-child { display:flex; flex-wrap:wrap; }
 .cookie-banner .button { flex:1; }
 .sp-main { padding:20px 18px 48px; font-size:16px; }
 .sp-main h1 { font-size:34px; }
 .sp-main h2 { font-size:28px; }
 .sp-cards li,.sp-summary,.sp-toc,.sp-note,.sp-cta { padding:18px; }
 .sp-cards li>a { font-size:24px; }
 .checks label { flex-wrap:wrap; }
 .checks input { flex:0 0 auto; }
}

.section-art-shield[data-lazy-loaded="true"]{background-image:url("bg/ai-shield.webp")}
@media(max-width:540px){.section-art-shield[data-lazy-loaded="true"]{background-image:url("bg/ai-shield-mobile.webp")}}

/* The mark inherits the same theme color as the RANLEX wordmark. */
.brand .brand-mark { display:block; flex-shrink:0; color:inherit; }