/* ══ Site page system (2026-11-10) ════════════════════════════════════════
   roadmap/2026-11-10-site-page-system — approved sample: website-redesign/design/site-pages.html
   Loaded LAST in the <head> of pageLayout / navPage / blogLayout / forumLayout and the
   legal pages, so it re-skins their inline template CSS onto the homepage system
   (home.css). One header look, one banner, left-aligned section headings, one card,
   one button set, one accordion, navy closing band, one footer, three image shapes
   (screens 4:3 in the stage, scene photos 16:9 / 4:3 in banners, people 4:5).
   If this file fails to load, pages fall back to their old inline styles. */

:root {
  --sp-navy: #0A2463; --sp-navy-2: #061847; --sp-ink: #0F1B3D; --sp-text: #3D4A66; --sp-muted: #66728C;
  --sp-blue: #1563D6; --sp-blue-2: #0F4FB0; --sp-blue-50: #EEF3FC; --sp-blue-100: #DCE7FA; --sp-sky: #9CC3FF;
  --sp-orange: #F5821F; --sp-orange-2: #DE6E0E; --sp-mist: #F6F8FC; --sp-line: #E3E8F1;
  --sp-ok: #12805C; --sp-ok-50: #E8F5EF;
  --sp-f-d: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-f-b: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-f-m: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --sp-r: 12px; --sp-r-l: 16px; --sp-r-xl: 20px;
  --sp-sh: 0 1px 2px rgba(15,27,61,.05), 0 12px 32px -16px rgba(15,27,61,.22);
  --sp-sh-lg: 0 2px 6px rgba(10,36,99,.08), 0 32px 64px -28px rgba(10,36,99,.45);
  --sp-banner-glow: radial-gradient(70% 90% at 85% 10%, rgba(21,99,214,.45), transparent 60%);
}

/* ── base type ── */
html body { font-family: var(--sp-f-b); color: var(--sp-text); background: #fff; }
html body h1, html body h2, html body h3, html body h4 { font-family: var(--sp-f-d); letter-spacing: -.02em; }

/* ══ HEADER (pg-nav · np-nav · bl-nav) ══ */
html body .pg-nav, html body .np-nav, html body .bl-nav {
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sp-line); box-shadow: none; min-height: 68px;
}
html body .pg-nav-links a, html body .np-links a, html body .bl-nav-links a {
  font-family: var(--sp-f-b); font-size: 15px; font-weight: 500; color: #2A3756; border-radius: 8px;
}
html body .pg-nav-links a:hover, html body .np-links a:hover, html body .bl-nav-links a:hover { color: var(--sp-ink); background: var(--sp-mist); }
html body .pg-nav-links a.pg-nav-active, html body .np-links a.np-active, html body .bl-nav-links a.active { color: var(--sp-blue); background: var(--sp-blue-50); }
html body .pg-nav-dropdown-menu, html body .np-ddm, html body .bl-nav-links .dd-menu { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); box-shadow: var(--sp-sh-lg); }
html body .pg-nav-links .pg-nav-dropdown-menu a:hover, html body .np-ddm a:hover, html body .bl-nav-links .dd-menu a:hover { background: var(--sp-blue-50); color: var(--sp-blue); }
html body .nva a { border-radius: var(--sp-r); font-family: var(--sp-f-b); font-weight: 600; font-size: 14.5px; padding: .55rem 1rem; }
html body .nva-enq { color: var(--sp-ink); border: 1px solid var(--sp-line); background: #fff; }
html body .nva-enq:hover { border-color: var(--sp-ink); color: var(--sp-ink); }
html body .nva-auth { background: var(--sp-orange); }
html body .nva-auth:hover { background: var(--sp-orange-2); }

/* ══ THE BANNER ══ */
html body .pg-hero, html body .np-hero, html body .ee-hero, html body .ed-hero, html body .bl-hero {
  background: var(--sp-navy); color: #fff; position: relative; overflow: hidden; text-align: left;
}
html body .pg-hero::before, html body .np-hero::before, html body .ee-hero::before, html body .ed-hero::before, html body .bl-hero::before {
  content: ""; position: absolute; inset: 0; top: 0; right: 0; width: auto; height: auto; border-radius: 0;
  background: var(--sp-banner-glow); pointer-events: none;
}
html body .pg-hero::after, html body .np-hero::after, html body .bl-hero::after { display: none; }
html body .pg-hero { padding: 56px 32px 64px; }
html body .np-hero { padding: 56px 32px 64px; }
html body .pg-hero-grid { max-width: 1200px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
/* banner text */
html body .pg-eyebrow, html body .np-hero .np-eyebrow, html body .ee-hero .np-eyebrow, html body .bl-hero-eyebrow {
  display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; margin-bottom: 16px;
  font: 600 13px/1.4 var(--sp-f-b); letter-spacing: .08em; text-transform: uppercase; color: var(--sp-sky);
}
html body .pg-h1, html body .np-hero h1, html body .ee-hero h1, html body .ed-hero h1, html body .bl-hero-title {
  color: #fff; font-family: var(--sp-f-d); font-weight: 800; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance;
}
html body .np-hero h1 span, html body .ee-hero h1 span, html body .bl-hero-title span { color: var(--sp-sky); }
html body .pg-hero-sub, html body .np-hero-sub, html body .ee-hero-sub, html body .ed-lead, html body .bl-hero-sub { color: #C2CEE8; font-size: 18px; line-height: 1.6; }
html body .pg-updated, html body .ed-note { color: #93A4CC; }
html body .pg-hero-sec, html body .ed-ctas small { color: #93A4CC; }
html body .ee-hero nav[aria-label="Breadcrumb"], html body .ed-hero nav[aria-label="Breadcrumb"],
html body .ee-hero nav[aria-label="Breadcrumb"] a, html body .ed-hero nav[aria-label="Breadcrumb"] a { color: #93A4CC; }
html body .ee-hero nav[aria-label="Breadcrumb"] a:hover, html body .ed-hero nav[aria-label="Breadcrumb"] a:hover { color: #fff; }
/* left-aligned on every width (old templates centred on mobile) */
@media (max-width: 960px) {
  html body .pg-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  html body .pg-hero-copy { align-items: flex-start; text-align: left; }
  html body .pg-hero-sub { margin-left: 0; margin-right: 0; }
}
@media (max-width: 600px) { html body .pg-hero, html body .np-hero { padding: 40px 16px 48px; } }

/* navPage heroes: text left, optional picture right */
html body .np-hero-inner { max-width: 1200px; margin: 0 auto; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
html body .np-hero-inner > * { grid-column: 1; max-width: 640px; }
html body .np-hero-inner:has(> .np-hero-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
html body .np-hero-inner > .np-hero-art { grid-column: 2; grid-row: 1 / span 8; max-width: none; width: 100%; margin: 0; }
html body .np-hero-art img { border-radius: var(--sp-r-l); box-shadow: var(--sp-sh-lg); aspect-ratio: 4 / 3; object-fit: cover; }
html body .np-hero-sub { margin: 0 0 28px; max-width: 600px; }
html body .np-hero-btns { justify-content: flex-start; }
@media (max-width: 860px) {
  html body .np-hero-inner:has(> .np-hero-art) { grid-template-columns: 1fr; }
  html body .np-hero-inner > .np-hero-art { grid-column: 1; grid-row: auto; margin-top: 28px; }
  html body .np-hero-btns { align-items: flex-start; }
}

/* entrance exams list + exam detail heroes */
html body .ee-hero-in, html body .ed-hero-in { max-width: 1200px; }
html body .ee-stats, html body .ed-facts { border-color: rgba(255,255,255,.12); }
html body .ee-stats b, html body .ed-facts b { color: #fff; font-family: var(--sp-f-d); }
html body .ee-stats span, html body .ed-facts span { color: #93A4CC; }
html body .ed-facts > div { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html body .ee-search { border: 0; border-radius: var(--sp-r-l); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
html body .ee-search button, html body .ed-btn-p { background: var(--sp-orange); border-radius: var(--sp-r); }
html body .ee-search button:hover, html body .ed-btn-p:hover { background: var(--sp-orange-2); }
html body .ed-btn-s { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: var(--sp-r); }
html body .ed-btn-s:hover { border-color: #fff; }
html body .ed-tags .ee-badge { background: rgba(255,255,255,.1); color: #E2E9F7; border-color: rgba(255,255,255,.18); }
html body .ee-hero-art img, html body .ed-hero-art img, html body .ed-hero-art picture, html body .ed-hero-art .sv-photo { border-radius: var(--sp-r-l); box-shadow: var(--sp-sh-lg); }

/* blog hero */
html body .bl-hero-inner { max-width: 1200px; }
html body .bl-hero-proof { display: none; }   /* unverified "Join thousands" claim removed */
html body .bl-hero-btn-primary { background: var(--sp-orange); color: #fff; border-radius: var(--sp-r); box-shadow: none; }
html body .bl-hero-btn-primary:hover { background: var(--sp-orange-2); }
html body .bl-hero-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: var(--sp-r); }
html body .bl-score-card { border-radius: var(--sp-r-l); border: 0; box-shadow: var(--sp-sh-lg); }

/* banner picture (pageBannerArt) */
.sp-art { width: 100%; }
.sp-art-photo { aspect-ratio: 4 / 3; border-radius: var(--sp-r-l); overflow: hidden; box-shadow: var(--sp-sh-lg); background: rgba(255,255,255,.06); }
.sp-art-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-art-stage { position: relative; overflow: hidden; border-radius: var(--sp-r-xl); padding: 28px 28px 0; background: rgba(255,255,255,.06); }
.sp-art-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; }
.sp-win { position: relative; background: #fff; border-radius: var(--sp-r) var(--sp-r) 0 0; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); }
.sp-bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--sp-line); background: #FAFBFD; }
.sp-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D9DEE8; }
.sp-bar span { margin-left: 8px; font: 500 10.5px var(--sp-f-m); color: var(--sp-muted); white-space: nowrap; overflow: hidden; }
.sp-shot { aspect-ratio: 4 / 3; background: #fff; }
.sp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.sp-shot.sp-fit img { object-fit: contain; object-position: top center; }
.sp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: #93A4CC; margin-bottom: 14px; }
.sp-crumbs a { color: #93A4CC; text-decoration: none; }
.sp-crumbs a:hover { color: #fff; }
.sp-crumbs span { opacity: .5; }

/* ══ BUTTONS ══ */
html body .pg-hero-cta, html body .np-btn-primary, html body .np-price-btn {
  background: var(--sp-orange); color: #fff; border: 1px solid transparent; border-radius: var(--sp-r);
  font: 600 15px/1.2 var(--sp-f-b); padding: 14px 24px; transform: none; box-shadow: none;
}
html body .pg-hero-cta:hover, html body .np-btn-primary:hover, html body .np-price-btn:hover { background: var(--sp-orange-2); transform: none; }
html body .np-btn-ghost { background: #fff; color: var(--sp-ink); border: 1px solid var(--sp-line); border-radius: var(--sp-r); font: 600 15px/1.2 var(--sp-f-b); padding: 14px 24px; }
html body .np-btn-ghost:hover { border-color: var(--sp-ink); color: var(--sp-ink); background: #fff; }
html body .np-hero .np-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
html body .np-hero .np-btn-ghost:hover { border-color: #fff; color: #fff; }

/* ══ SECTIONS + HEADINGS (always left-aligned) ══ */
html body .np-section { padding: 96px 32px; }
html body .np-section-inner { max-width: 1200px; }
html body .np-section-alt, html body .np-section-light { background: var(--sp-mist); }
html body .np-section-title, html body .pg-section-title, html body .ed-sec > h2, html body .ee-rhead h2, html body .ee-about h2 {
  font-family: var(--sp-f-d); font-weight: 800; color: var(--sp-ink); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15;
  letter-spacing: -.02em; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important;
}
html body .ed-sec > h2, html body .ee-rhead h2 { font-size: clamp(24px, 2.6vw, 32px); }
html body .np-section-sub, html body .ed-sub { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; color: var(--sp-muted); font-size: 17px; max-width: 680px; }
html body .np-eyebrow, html body .np-eyebrow-sm {
  background: none; border: 0; padding: 0; border-radius: 0; color: var(--sp-blue);
  font: 600 13px/1.4 var(--sp-f-b); letter-spacing: .08em; text-transform: uppercase; text-align: left !important;
}
html body .np-section-inner > .np-eyebrow-sm, html body .np-section-inner > .np-eyebrow { display: block; }
@media (max-width: 760px) { html body .np-section { padding: 64px 16px; } }

/* pageLayout body sections */
html body .pg-benefits, html body .pg-body, html body .pg-faq, html body .pg-related { padding: 88px 32px; }
html body .pg-benefits { background: #fff; }
html body .pg-body:nth-of-type(even), html body .pg-related { background: var(--sp-mist); }
html body .pg-faq { background: #fff; }
html body .pg-wrap, html body .pg-body-inner, html body .pg-grid, html body .pg-related-grid { max-width: 1200px; }
html body .pg-body-inner { max-width: 760px; margin-left: max(0px, calc((100% - 1200px) / 2)); }
html body .pg-section-title { max-width: 1200px; margin: 0 auto 40px !important; }
html body .pg-benefits > .pg-section-title, html body .pg-faq > .pg-section-title, html body .pg-related > .pg-section-title { margin-left: auto !important; margin-right: auto !important; }
html body .pg-body-inner h2 { font-family: var(--sp-f-d); font-weight: 800; color: var(--sp-ink); font-size: 28px; line-height: 1.2; margin: 44px 0 14px; }
html body .pg-body-inner h2:first-child { margin-top: 0; }
html body .pg-body-inner p, html body .pg-body-inner li { color: var(--sp-text); font-size: 17px; line-height: 1.75; }
@media (max-width: 760px) {
  html body .pg-benefits, html body .pg-body, html body .pg-faq, html body .pg-related { padding: 64px 16px; }
  html body .pg-body-inner { margin-left: 0; }
}

/* ══ CARDS ══ */
html body .pg-benefit, html body .np-card, html body .pg-related-card, html body .np-usp-card, html body .np-usp-card-sm, html body .np-price-card, html body .np-contact-card {
  background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
html body .pg-benefit, html body .np-card { padding: 28px; }
html body .np-card:hover, html body .pg-related-card:hover, html body .np-price-card:hover { border-color: var(--sp-blue-100); box-shadow: var(--sp-sh); transform: none; }
html body .pg-benefit h3, html body .np-card h3, html body .np-usp-card h3, html body .np-price-label { font-family: var(--sp-f-d); color: var(--sp-ink); font-size: 19px; font-weight: 700; }
html body .pg-benefit p, html body .np-card p { color: var(--sp-text); font-size: 15px; line-height: 1.6; }
/* emoji icons → one neutral icon tile */
html body .pg-benefit-icon, html body .np-card-icon {
  width: 44px; height: 44px; border-radius: var(--sp-r); background: var(--sp-blue-50); color: var(--sp-blue);
  display: grid; place-items: center; font-size: 0; margin-bottom: 16px; position: relative;
}
html body .pg-benefit-icon::before, html body .np-card-icon:not(:has(svg))::before {
  content: ""; width: 20px; height: 20px; background: var(--sp-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .np-card-icon svg { width: 22px; height: 22px; color: var(--sp-blue); stroke: currentColor; }
html body .np-usp-ico { background: var(--sp-blue-50); color: var(--sp-blue); border-radius: var(--sp-r); }
html body .pg-related-card { padding: 24px; }
html body .pg-related-card strong { font-family: var(--sp-f-d); color: var(--sp-ink); font-size: 17px; }
html body .pg-related-card span { color: var(--sp-muted); font-size: 14px; }
html body .pg-grid { gap: 24px; }
html body .pg-related-grid { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* steps */
html body .np-step-num { background: var(--sp-navy); color: #fff; font-family: var(--sp-f-m); border-radius: 50%; }
html body .np-step h3 { font-family: var(--sp-f-d); color: var(--sp-ink); }
/* price cards */
html body .np-price-badge { background: var(--sp-blue); color: #fff; border-radius: 999px; }
html body .np-price-amount { font-family: var(--sp-f-d); color: var(--sp-ink); }
html body .np-price-card:has(.np-price-badge) { border: 2px solid var(--sp-blue); box-shadow: var(--sp-sh); }

/* ══ FAQ — one line-style accordion ══ */
html body .pg-faq-item, html body details.np-faq {
  max-width: 1200px; border: 0; border-bottom: 1px solid var(--sp-line); border-radius: 0; margin: 0 auto; background: transparent; box-shadow: none; overflow: visible;
}
html body .pg-faq-item:first-of-type, html body details.np-faq:first-of-type { border-top: 1px solid var(--sp-line); }
html body .pg-faq-q, html body details.np-faq > summary {
  padding: 22px 0; font: 700 17px/1.4 var(--sp-f-d); color: var(--sp-ink); background: transparent;
}
html body .pg-faq-q::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sp-line); display: grid; place-items: center; color: var(--sp-blue); font-size: 16px; transition: transform .2s; }
html body details[open] .pg-faq-q::after { content: "+"; transform: rotate(45deg); }
html body .pg-faq-a, html body details.np-faq .np-faq-a { padding: 0 48px 22px 0; color: var(--sp-text); font-size: 15.5px; line-height: 1.7; }
html body .np-faq-list { max-width: 1200px; gap: 0; }

/* ══ CLOSING BAND (pg-cta · np-cta-band) ══ */
html body .pg-cta, html body .np-cta-band {
  background: var(--sp-navy); position: relative; overflow: hidden; text-align: left; padding: 80px max(32px, calc((100% - 1200px) / 2));
}
html body .pg-cta::before, html body .np-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 90% 0%, rgba(21,99,214,.45), transparent 60%); pointer-events: none; }
html body .pg-cta > *, html body .np-cta-band > * { position: relative; }
html body .pg-cta h2, html body .np-cta-band h2 { font: 800 clamp(28px, 3.2vw, 40px)/1.15 var(--sp-f-d); color: #fff; max-width: 18em; margin: 0 0 12px; text-align: left; }
html body .pg-cta p, html body .np-cta-band p { color: #C2CEE8; font-size: 18px; margin: 0 0 28px; opacity: 1; text-align: left; }
html body .pg-cta > div { justify-content: flex-start !important; }
html body .pg-cta-btn, html body .np-cta-band .np-btn-primary { background: var(--sp-orange); color: #fff; border-radius: var(--sp-r); font: 600 15px/1.2 var(--sp-f-b); padding: 14px 24px; }
html body .pg-cta-btn:hover { background: var(--sp-orange-2); opacity: 1; }
html body .np-cta-band .np-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
html body .np-cta-band > div, html body .np-cta-band .np-hero-btns { justify-content: flex-start; }
@media (max-width: 760px) { html body .pg-cta, html body .np-cta-band { padding: 64px 16px; } }

/* ══ IMAGES — three shapes ══ */
html body .pg-img-row img, html body .pg-fig img, html body .np-img-band img { border-radius: var(--sp-r-l); border: 1px solid var(--sp-line); }
html body .pg-img-steps img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
html body .pg-img-people img, html body .pg-img-people .sv-photo { aspect-ratio: 4 / 5; object-fit: cover; }
html body .pg-img-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
html body .pg-img-people { gap: 16px; max-width: 760px; }
html body .pg-fig figcaption { text-align: left; color: var(--sp-muted); }
html body .pg-guide-photo { display: none; }   /* photo now lives in the banner */

/* ══ TABLES ══ */
html body .np-table-wrap table, html body .ed-table { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); overflow: hidden; }
html body .np-table-wrap th, html body .ed-table th { background: var(--sp-mist); color: var(--sp-muted); font: 600 12.5px var(--sp-f-b); text-transform: uppercase; letter-spacing: .04em; }

/* ══ ENTRANCE EXAMS list + detail (accents only) ══ */
html body .ee-tabs .np-cat-chip { border-radius: 999px; border: 1px solid var(--sp-line); color: var(--sp-text); }
html body .ee-tabs .np-cat-chip.is-active { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
html body .np-card.ee-card { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); }
html body .ee-card h3 { font-family: var(--sp-f-d); color: var(--sp-ink); }
html body .ee-price b { font-family: var(--sp-f-d); color: var(--sp-ink); }
html body .ed-tabs a.on { color: var(--sp-blue); border-color: var(--sp-blue); }
html body .ed-pbar i { background: var(--sp-blue); }
html body .ed-subj { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); }
html body .ed-rc { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); }
html body .ed-mbar .ed-btn { background: var(--sp-orange); }

/* ══ BLOG ══ */
html body .bl-tab.active { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
html body .bl-card { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); box-shadow: none; overflow: hidden; }
html body .bl-card:hover { border-color: var(--sp-blue-100); box-shadow: var(--sp-sh); transform: none; }
html body .bl-card-thumb { aspect-ratio: 16 / 9; height: auto; }
html body .bl-card-title { font-family: var(--sp-f-d); color: var(--sp-ink); }
html body .bl-cat-badge { background: rgba(255,255,255,.92); color: var(--sp-blue); border-radius: 999px; }
html body .bl-articles-header h2 { font: 800 clamp(24px, 2.6vw, 32px)/1.2 var(--sp-f-d); color: var(--sp-ink); }
html body .post-hero { border-radius: var(--sp-r-l); overflow: hidden; aspect-ratio: 16 / 9; }
html body .post-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ══ COMMUNITY (theme only, layout kept) ══ */
html body .fm-page-title { font: 800 clamp(28px, 3.2vw, 40px)/1.15 var(--sp-f-d); color: var(--sp-ink); }
html body .fm-page-sub { color: var(--sp-muted); }
html body .fm-searchbar button, html body .fm-signin-btn { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; border-radius: var(--sp-r); }
html body .fm-filter.active { background: var(--sp-ink); color: #fff; border-color: var(--sp-ink); }
html body .fm-section-head h2 { font-family: var(--sp-f-d); color: var(--sp-ink); }
html body .fm-hero-img, html body .fm-thread-img { border-radius: var(--sp-r-l); }

/* ══ LEGAL PAGES (static) ══ */
body.sp-legal { background: #fff; }
body.sp-legal .legal-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--sp-line); padding: 0 max(16px, calc((100% - 1200px) / 2)); height: 68px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
body.sp-legal .legal-header a { color: var(--sp-ink); font-weight: 600; font-size: 15px; }
body.sp-legal .legal-header img { height: 40px; width: auto; display: block; }
body.sp-legal .legal-wrap { max-width: 1200px; padding: 0 max(16px, calc((100% - 1200px) / 2)) 80px; }
body.sp-legal .legal-wrap > h1 {
  margin: 0 calc(50% - 50vw) 0; padding: 56px max(16px, calc(50vw - 600px)) 12px; background: var(--sp-navy) var(--sp-banner-glow);
  color: #fff; font: 800 clamp(32px, 4vw, 50px)/1.08 var(--sp-f-d); letter-spacing: -.03em;
}
body.sp-legal .legal-wrap > h1 + .meta, body.sp-legal .legal-wrap > .meta:first-of-type {
  margin: 0 calc(50% - 50vw) 48px; padding: 0 max(16px, calc(50vw - 600px)) 56px; background: var(--sp-navy); color: #93A4CC;
}
body.sp-legal .legal-wrap > :not(h1):not(.meta) { max-width: 760px; }
body.sp-legal h2 { font: 800 24px/1.25 var(--sp-f-d); color: var(--sp-ink); margin-top: 40px; }
body.sp-legal p, body.sp-legal li { font-size: 16px; color: var(--sp-text); line-height: 1.75; }
body.sp-legal a { color: var(--sp-blue); }
body.sp-legal .hp-foot a { color: #9EADCF; }
body.sp-legal .hp-foot a:hover { color: #fff; }
body.sp-legal .legal-wrap .footer { display: none; }

/* ══ Fixes after the first visual pass ══ */
/* breadcrumbs inside the exam banners carry inline colours */
html body .ee-hero nav[aria-label="Breadcrumb"] a, html body .ed-hero nav[aria-label="Breadcrumb"] a { color: #93A4CC !important; }
html body .ee-hero nav[aria-label="Breadcrumb"] span, html body .ed-hero nav[aria-label="Breadcrumb"] span { color: #C2CEE8 !important; }
/* USP cards on np-* pages: white card, icon without a pale bar */
html body .np-usp-core .np-usp-card, html body .np-usp-support .np-usp-card-sm { background: #fff; border: 1px solid var(--sp-line); box-shadow: none; }
html body .np-usp-ico { background: none; }
html body .np-usp-card h3, html body .np-usp-card-sm h3 { font-family: var(--sp-f-d); color: var(--sp-ink); }
/* Pricing store banner (STORE2_CSS is a <style> in <body>, so match with higher specificity) */
html body .sx-hero { background: var(--sp-banner-glow), var(--sp-navy); }
html body .sx-hero h1 span { background: none; -webkit-text-fill-color: currentColor; color: var(--sp-sky); }
html body .sx-hero p { color: #C2CEE8; }
html body .sx-eyebrow { background: none; border: 0; padding: 0; color: var(--sp-sky); font: 600 13px/1.4 var(--sp-f-b); letter-spacing: .08em; }
html body .sx-hero h1 { font-family: var(--sp-f-d); letter-spacing: -.03em; }
html body .sx-search button { background: var(--sp-orange); }
html body .sx-search button:hover { background: var(--sp-orange-2); }
/* Community */
html body .fm-page-title { background: none; -webkit-text-fill-color: currentColor; color: var(--sp-ink); }
html body .fm-side-cat.active { background: var(--sp-navy); color: #fff; box-shadow: none; }
html body .fm-signin-note { background: var(--sp-blue-50); border-color: var(--sp-blue-100); color: var(--sp-ink); }
html body .fm-signin-note a { color: var(--sp-blue); }
/* cookie banner (consent.js) */
html body #sv-cc .sv-cc-yes { background: var(--sp-blue); }
html body #sv-cc .sv-cc-yes:hover { background: var(--sp-blue-2); }
html body .np-usp-ico, html body .np-usp-ico svg { color: var(--sp-blue); }

/* ══ Shared nav for templates that had none (blog posts: .sp-nav) ══ */
html body .sp-nav { height: auto; min-height: 68px; padding: 0 max(16px, 2rem); display: flex; align-items: center; gap: 24px; justify-content: space-between; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--sp-line); position: sticky; top: 0; z-index: 60; }
html body .sp-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto; padding: 0; }
html body .sp-nav-links > li { position: relative; }
html body .sp-nav-links > li > a { display: block; padding: 8px 12px; border-radius: 8px; font: 500 15px var(--sp-f-b); color: #2A3756; cursor: pointer; white-space: nowrap; text-decoration: none; }
html body .sp-nav-links > li > a:hover { background: var(--sp-mist); color: var(--sp-ink); }
html body .sp-nav-links > li > a.on { color: var(--sp-blue); background: var(--sp-blue-50); }
html body .sp-dd > a::after { content: "▾"; font-size: .7rem; opacity: .6; margin-left: 4px; }
html body .sp-ddm { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 260px; display: flex; flex-direction: column; gap: 2px; padding: 16px 8px 8px; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); box-shadow: var(--sp-sh-lg); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 200; }
html body .sp-dd-last .sp-ddm { left: auto; right: 0; transform: none; }
html body .sp-dd:hover .sp-ddm, html body .sp-dd:focus-within .sp-ddm { visibility: visible; opacity: 1; pointer-events: auto; }
html body .sp-ddm a { display: block; padding: 10px 14px; border-radius: 8px; font: 500 14px var(--sp-f-b); color: var(--sp-ink); text-decoration: none; }
html body .sp-ddm a:hover { background: var(--sp-blue-50); color: var(--sp-blue); }
html body .sp-ddm a span { display: block; font-size: 12px; color: var(--sp-muted); font-weight: 400; margin-top: 2px; }
html body .sp-nav .nva { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
html body .sp-nav .nva a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.2; white-space: nowrap; }
html body .sp-nav .nva svg { width: 15px; height: 15px; }
html body .sp-nav .nva-auth { color: #fff !important; }
@media (max-width: 1100px) { html body .sp-nav-links { display: none; } }
@media (max-width: 420px) { html body .sp-nav .nva-enq span { display: none; } }

/* ══ Blog post title band: navy, full width, text aligned with the article column ══ */
html body .blog-wrap { padding-top: 0; }
html body .blog-wrap > .breadcrumb, html body .blog-wrap .article-header {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
  background: var(--sp-navy);
}
html body .blog-wrap > .breadcrumb { padding-top: 48px; margin-bottom: 0; color: #93A4CC; }
html body .blog-wrap > .breadcrumb a { color: #93A4CC; }
html body .blog-wrap > .breadcrumb a:hover { color: #fff; }
html body .blog-wrap .article-header { padding-top: 16px; padding-bottom: 48px; margin-bottom: 40px; border-bottom: 0; }
html body .article-meta { border-color: rgba(255,255,255,.14); }
html body .article-cat { background: none; padding: 0; border-radius: 0; color: var(--sp-sky); font: 600 13px/1.4 var(--sp-f-b); letter-spacing: .08em; }
html body .article-title { color: #fff; font-family: var(--sp-f-d); font-weight: 800; letter-spacing: -.03em; }
html body .article-meta, html body .article-meta span, html body .article-author-name { color: #C2CEE8; }
html body .article-author-avatar { background: rgba(255,255,255,.12); color: #fff; }
html body .article-body h2 { font-family: var(--sp-f-d); color: var(--sp-ink); }
html body .article-body a { color: var(--sp-blue); }
html body .related-card { border: 1px solid var(--sp-line); border-radius: var(--sp-r-l); }
html body .related-card:hover { border-color: var(--sp-blue-100); box-shadow: var(--sp-sh); }
html body .post-cat { color: var(--sp-blue); background: var(--sp-blue-50); }
@media (max-width: 600px) {
  
  html body .blog-wrap > .breadcrumb { padding-top: 32px; }
}

/* full-bleed bands use 100vw; never let that add a sideways scroll */
html { overflow-x: clip; }