/*
 * Wave 218 - the public site's one hand-written stylesheet (D5). No Tailwind, no React. The custom
 * properties below are the dashboard's own token values (client/src/index.css + Tailwind's default
 * indigo / gray ramps) copied in by value. System font stack (the dashboard ships no webfont), two
 * weights only: 400 and 600.
 */
:root {
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --brand: #392c7d;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-700: #15803d;
  --amber-500: #f59e0b;
  --white: #fff;

  --ink: var(--gray-900);
  --muted: var(--gray-600);
  --line: var(--gray-200);
  --ground: var(--gray-50);
  --radius: 12px;
  --ring: 0 0 0 3px rgba(79, 70, 229, 0.3);
  --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --header-h: 72px;
  --header-pad-y: 10px;
  --dd-bridge: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
strong { font-weight: 600; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--white); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; box-shadow: var(--ring); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 48px; padding: 0 24px; font-size: 16px; }
.btn-primary { background: var(--indigo-600); color: var(--white); }
.btn-primary:hover { background: var(--indigo-700); }
.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--gray-300); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-onbrand { background: var(--indigo-500); color: var(--white); }
.btn-onbrand:hover { background: var(--indigo-600); }
.btn-onbrand:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.header-grid {
  display: grid; align-items: center; column-gap: 16px; min-height: var(--header-h); position: relative;
  box-sizing: border-box;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "logo nav form login start";
}
.container.header-grid { padding-block: var(--header-pad-y); }
.logo { grid-area: logo; display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 32px; width: auto; }
.site-header .logo img { height: 38px; }
.primary-nav { grid-area: nav; }
.nav-pill {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 999px;
}
.nav-pill > li > a, .dd-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 0; background: transparent; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--gray-700); text-decoration: none; cursor: pointer;
}
.nav-pill > li > a:hover, .dd-btn:hover { background: var(--white); color: var(--brand); }
.chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.dd { position: relative; }
.dd-panel {
  display: none; position: absolute; top: calc(100% + var(--dd-bridge)); left: 0; min-width: 260px; z-index: 60;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12); padding: 12px;
}
.dd.open .dd-panel { display: block; }
/* Invisible bridge over the gap between trigger and panel so the pointer never leaves the hover area. */
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--dd-bridge)); height: var(--dd-bridge); }
@media (prefers-reduced-motion: no-preference) {
  .dd.open .dd-panel { animation: dd-in 0.12s ease-out; }
  @keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.dd-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); padding: 4px 10px 8px; }
.dd-panel a { display: flex; min-height: 40px; align-items: center; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--gray-700); }
.dd-panel a:hover { background: var(--indigo-50); color: var(--brand); }
.dd-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.dd-all a { font-weight: 600; color: var(--indigo-600); }
.only-mobile { display: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--gray-700); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--ground); color: var(--brand); }
.menu-btn { grid-area: menu; display: none; }
.icon-btn.search-toggle { grid-area: toggle; display: none; justify-self: end; }
.icon-btn .i-close { display: none; }
.site-header.search-open .search-toggle .i-open, .site-header.menu-open .menu-btn .i-open { display: none; }
.site-header.search-open .search-toggle .i-close, .site-header.menu-open .menu-btn .i-close { display: inline; }

.site-search {
  grid-area: form; position: relative; display: flex; align-items: center; width: 100%;
  min-width: 240px; max-width: 400px; justify-self: end;
  height: 42px; padding: 0 14px 0 40px; background: var(--ground); border: 1px solid var(--line); border-radius: 999px;
}
.site-search:focus-within { border-color: var(--brand); box-shadow: var(--ring); background: var(--white); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-500); display: inline-flex; }
.site-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 14px; }
.site-search input:focus-visible { box-shadow: none; }
.site-search input::-webkit-search-cancel-button { appearance: none; }
.search-cancel { display: none; border: 0; background: transparent; color: var(--indigo-600); font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 4px 0 12px; cursor: pointer; }

.login-link { grid-area: login; font-size: 14px; font-weight: 600; text-decoration: none; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; color: var(--gray-700); }
.login-link:hover { color: var(--brand); }
.start-link { grid-area: start; position: relative; min-height: 40px; padding: 0 16px; font-size: 15px; }
/* Until site.js knows whether the visitor has a session, the auth links keep their space but stay invisible. */
.site-header.auth-pending [data-auth] { visibility: hidden; }
/* Hairline between "Log in" and "Start free" (boards), centred in the column gap. */
.start-link::before { content: ""; position: absolute; left: -9px; top: 50%; width: 1px; height: 24px; transform: translateY(-50%); background: var(--line); }

@media (max-width: 1099px) {
  .header-grid { grid-template-areas: "logo nav toggle login start"; grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
  .icon-btn.search-toggle { display: inline-flex; }
  .site-search { display: none; }
  .site-header.search-open .header-grid { grid-template-areas: "logo form toggle login start"; grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
  .site-header.search-open .primary-nav { display: none; }
  .site-header.search-open .site-search { display: flex; max-width: none; justify-self: stretch; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .container { padding: 0 16px; }
  .header-grid, .site-header.search-open .header-grid, .site-header.menu-open .header-grid { column-gap: 8px; }
  .start-link::before { display: none; }
  .only-mobile { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
  .nav-pill > li.only-mobile > a { justify-content: center; border: 1px solid var(--gray-300); border-radius: 10px; }
  .header-grid {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "logo . toggle start menu" "form form form form form" "panel panel panel panel panel" "nav nav nav nav nav";
    row-gap: 0;
  }
  .site-header.search-open .header-grid, .site-header.menu-open .header-grid {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "logo . toggle start menu" "form form form form form" "panel panel panel panel panel" "nav nav nav nav nav";
  }
  .login-link { display: none; }
  .menu-btn { display: inline-flex; }
  .primary-nav { display: none; padding: 8px 0 16px; }
  .site-header.menu-open .primary-nav { display: block; }
  .site-header.search-open .primary-nav { display: none; }
  .site-search { display: none; max-width: none; justify-self: stretch; margin: 8px 0 12px; }
  .site-header.search-open .site-search, .site-header.menu-open .site-search { display: flex; }
  .site-header.search-open .search-cancel { display: inline-flex; align-items: center; }
  .site-header.search-open .site-search { padding-right: 6px; }
  .nav-pill { flex-direction: column; align-items: stretch; background: transparent; border: 0; border-radius: 0; padding: 0; gap: 0; }
  .nav-pill > li > a, .dd-btn { width: 100%; justify-content: space-between; min-height: 48px; padding: 0 4px; border-radius: 8px; font-size: 16px; }
  .only-mobile { display: block; }
  .dd.open .dd-panel { display: block; animation: none; }
  .dd-panel::before { display: none; }
  .dd-panel { position: static; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
  .dd-label { padding-left: 4px; }
  .dd-panel a { min-height: 44px; font-size: 15px; }
}

/* ---------- hero ---------- */
.hero { padding: 56px 0; background: var(--white); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; align-items: center; }
.hero h1 { font-size: 44px; line-height: 1.12; max-width: 14em; }
.lede { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-media { width: 560px; max-width: 100%; aspect-ratio: 560 / 360; border-radius: 16px; overflow: hidden; background: var(--indigo-50); }
.hero-media img { width: 100%; height: auto; aspect-ratio: 560 / 360; object-fit: cover; }
.hero-placeholder { width: 100%; height: 100%; }
@media (max-width: 1099px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
  .hero-media { width: 420px; }
}
@media (max-width: 860px) {
  .hero { padding: 32px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: 32px; }
  .lede { font-size: 16px; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero-media { width: 100%; aspect-ratio: 390 / 244; }
  .hero-media img { aspect-ratio: 390 / 244; }
}

/* ---------- sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--ground); }
.section h2 { font-size: 28px; line-height: 1.2; }
.section-lede { margin-top: 8px; color: var(--muted); }
.section-link { margin-top: 28px; }
.section-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.section-link a:hover { text-decoration: underline; }
.section-link a:hover span { transform: translateX(3px); }
.section-link a span { transition: transform 0.15s; }
@media (prefers-reduced-motion: reduce) { .section-link a span, .card .arrow { transition: none; } .section-link a:hover span, .card:hover .arrow { transform: none; } }
@media (max-width: 860px) { .section { padding: 40px 0; } .section h2 { font-size: 24px; } }

.grid { display: grid; gap: 24px; margin-top: 28px; }
.field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.few { grid-template-columns: repeat(auto-fill, minmax(260px, 360px)); justify-content: start; }
.course-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid { gap: 12px; }
  .field-grid, .course-grid, .steps { grid-template-columns: 1fr; }
  .field-grid.few { grid-template-columns: 1fr; }
}

/* ---------- cards ---------- */
.card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card:hover { border-color: var(--brand); }
.card:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--indigo-50); overflow: hidden; }
.card-media picture, .card-media img { width: 100%; height: 100%; }
/* The placeholder is the base layer; the picture sits on top so a missing or failed variant shows it. */
.card-media .media-placeholder { position: absolute; inset: 0; }
.card-media picture { position: relative; display: block; }
.card-media img { object-fit: cover; }
.media-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--brand); color: rgba(255, 255, 255, 0.55); }
.course-card .media-placeholder { background: var(--indigo-100); color: var(--indigo-500); }
.hero-placeholder { background: var(--indigo-50); color: var(--indigo-500); }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.card-title { font-size: 16px; line-height: 1.3; }
.card-link { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { box-shadow: none; }
.card:hover .card-title, .card:hover .card-link { color: var(--brand); }
.card-desc { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.5em); }
.field-card__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; }
.card-meta, .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.arrow { color: var(--gray-600); transition: transform 0.15s; }
.card:hover .arrow { transform: translateX(3px); color: var(--brand); }
.card-sub { font-size: 13px; color: var(--gray-500); margin-top: -4px; }
.counts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 12px; font-weight: 600; color: var(--indigo-700); background: var(--indigo-50); border: 1px solid var(--indigo-100); border-radius: 999px; padding: 2px 10px; }
.proof { font-size: 13px; color: var(--gray-700); }
.star { color: var(--amber-500); }
.free-badge { font-size: 12px; font-weight: 600; color: var(--green-700); background: var(--green-100); border-radius: 6px; padding: 2px 8px; }

@media (max-width: 600px) {
  .field-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
  .field-card .card-media { width: 72px; height: 72px; aspect-ratio: 1; border-radius: 10px; }
  .field-card .card-body { padding: 0; }
  .field-card .arrow { display: none; }
  .course-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
  .course-card .card-media { width: 72px; height: 72px; aspect-ratio: 1; border-radius: 10px; }
  .course-card .card-body { padding: 0; }
  .course-card .arrow { display: none; }
}

/* ---------- steps, points, CTA ---------- */
.step, .point { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.step h3, .point h3 { font-size: 16px; }
.step p, .point p { font-size: 14px; color: var(--muted); }
.num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--indigo-50); color: var(--indigo-600); font-weight: 600; font-size: 14px; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-50); color: var(--indigo-600); }
.free-line { margin-top: 20px; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.cta-section { padding: 24px 0 64px; background: var(--ground); }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--brand); color: var(--white); border-radius: 16px; padding: 40px 48px; }
.cta-band h2 { font-size: 28px; color: var(--white); max-width: 18em; }
@media (max-width: 860px) { .cta-band { padding: 28px 24px; flex-direction: column; align-items: flex-start; } .cta-band .btn { width: 100%; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--white); padding: 40px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 22em; }
.footer-col li a { display: inline-flex; min-height: 32px; align-items: center; font-size: 14px; color: var(--gray-700); }
.footer-col li a:hover { color: var(--brand); }
.footer-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--gray-500); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ---------- search + 404 ---------- */
.search-head { padding: 40px 0 32px; }
.search-head h1 { font-size: 34px; line-height: 1.15; overflow-wrap: anywhere; }
.result-count { margin-top: 6px; font-size: 14px; color: var(--muted); }
.search-large { position: relative; display: flex; gap: 12px; margin-top: 20px; max-width: 640px; }
.search-large input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; font-size: 16px; background: var(--white); border: 1px solid var(--gray-300); border-radius: 12px; outline: none; }
.search-large input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.search-large .btn { min-height: 52px; }
.tips { margin-top: 16px; display: grid; gap: 6px; color: var(--muted); }
.tips li::before { content: "\2022"; margin-right: 10px; color: var(--gray-400); }
.search-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.search-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.search-links a:hover { text-decoration: underline; }
.search-results { padding-top: 32px; min-height: 240px; }
.search-results h2 { font-size: 20px; margin: 32px 0 12px; }
.search-results h2:first-child { margin-top: 0; }
.table-wrap { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line); overflow-x: auto; }
.exam-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.exam-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.exam-table td { height: 52px; padding: 0 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.exam-table tr:last-child td { border-bottom: 0; }
.exam-table .c-exam a { font-weight: 600; text-decoration: none; color: var(--ink); }
.exam-table .c-exam a:hover { color: var(--brand); text-decoration: underline; }
.exam-table .c-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--gray-600); }
.dash { color: var(--gray-400); }
.plain-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); max-width: 640px; }
.plain-list li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid var(--gray-100); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list a { font-weight: 600; text-decoration: none; }
.plain-list a:hover { color: var(--brand); text-decoration: underline; }
.meta { font-size: 13px; color: var(--gray-500); }
@media (max-width: 640px) {
  .exam-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .exam-table, .exam-table tbody, .exam-table tr { display: block; }
  .exam-table tr { display: grid; grid-template-columns: auto auto auto 1fr; padding: 10px 16px; border-bottom: 1px solid var(--gray-100); gap: 0 6px; }
  .exam-table tr:last-child { border-bottom: 0; }
  .exam-table td { display: block; height: auto; padding: 0; border: 0; font-size: 13px; }
  .exam-table .c-exam { grid-column: 1 / -1; font-size: 15px; }
  .exam-table .c-code:has(.dash) { display: none; }
  .exam-table .c-code + .c-vendor::before { content: "\00b7\00a0"; }
  .exam-table .c-vendor + .c-field::before { content: "\00b7\00a0"; }
  .search-large { flex-direction: column; }
}

/* ---------- search typeahead (wave 219) ---------- */
.ta-panel {
  position: absolute; z-index: 70; top: 60px; left: 0; right: 0; max-height: 70vh; overflow-y: auto;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12); padding: 8px;
}
.ta-panel[hidden] { display: none; }
.ta-in-header { grid-area: form; top: calc(100% - 4px); left: auto; right: 0; width: 440px; max-width: calc(100vw - 32px); }
.ta-heading { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); padding: 8px 10px 4px; }
.ta-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 8px;
  text-decoration: none; font-size: 14px; color: var(--gray-700);
}
.ta-row:hover, .ta-row.is-active { background: var(--indigo-50); color: var(--brand); }
.ta-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-label strong { font-weight: 600; color: var(--ink); }
.ta-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--gray-600); }
.ta-vendor, .ta-tag { font-size: 12px; color: var(--gray-500); }
.ta-all { margin-top: 6px; padding-top: 0; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; font-weight: 600; color: var(--indigo-600); justify-content: space-between; }
.ta-empty { padding: 12px 10px; font-size: 14px; color: var(--gray-500); }
@media (max-width: 1099px) {
  .site-header:not(.search-open) .ta-in-header { display: none; }
}
@media (max-width: 860px) {
  .ta-in-header { grid-area: panel; position: static; width: auto; max-width: none; margin: 0 0 12px; }
}

/* ---------- category hub (/certifications/{field}/) ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--muted); }
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; color: var(--gray-400); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }
.hub-head { padding: 20px 0 0; background: var(--white); }
.hub-head h1 { margin-top: 16px; font-size: 40px; line-height: 1.15; }
.hub-hero { padding: 24px 0 32px; background: var(--white); }
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 48px; align-items: start; }
.hub-copy p { margin-top: 14px; color: var(--muted); font-size: 17px; max-width: 40em; }
.hub-copy p:first-child { margin-top: 0; }
.hub-copy .hub-fixed { color: var(--ink); font-weight: 600; }
.hub-copy .hub-count { color: var(--ink); font-size: 15px; }
.hub-hero-media { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--indigo-50); }
.hub-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-hero-media .hero-placeholder { height: 100%; }
.hub-chips { padding-bottom: 32px; }
.hub-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.hub-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink); text-decoration: none; background: var(--white); }
.hub-chips a:hover { border-color: var(--brand); }
.hub-chips a span { color: var(--muted); font-size: 12px; }
.hub-band { padding: 64px 0; border-top: 1px solid var(--line); }
.hub-band-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hub-band h2 { font-size: 28px; line-height: 1.2; }
.hub-band .pill { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.hub-band-desc { margin-top: 8px; color: var(--muted); }
.hub-faq { padding: 64px 0; border-top: 1px solid var(--line); }
.hub-faq-inner { max-width: 760px; }
.hub-faq h2 { font-size: 28px; line-height: 1.2; }
.hub-faq h3 { margin-top: 24px; font-size: 17px; }
.hub-faq p { margin-top: 6px; color: var(--muted); }
.hub-related { padding: 0 0 64px; }
.hub-related h2 { font-size: 24px; }
.hub-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 20px 0 0; }
.hub-related-grid a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; }
.hub-related-grid a:hover { border-color: var(--brand); }
@media (max-width: 860px) {
  .hub-head h1 { font-size: 30px; }
  .hub-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hub-hero-media { order: 2; }
  .hub-band, .hub-faq { padding: 40px 0; }
  .hub-band h2, .hub-faq h2 { font-size: 24px; }
  .hub-related-grid { grid-template-columns: 1fr; }
}

/* ---------- certifications index (/certifications/) ---------- */
.cert-head { padding-bottom: 40px; }
.cert-intro { margin-top: 12px; max-width: 40em; color: var(--muted); font-size: 17px; }
.cert-count { margin-top: 12px; font-size: 14px; color: var(--muted); }
.cert-count strong { color: var(--ink); }
.cert-fields { padding-bottom: 72px; }
.cert-directory { padding-bottom: 48px; }
.sd-grid { columns: 2; column-gap: 24px; margin-top: 28px; }
.sd-block { break-inside: avoid; margin: 0 0 24px; padding: 18px 24px 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.sd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; }
.sd-head h3 { font-size: 17px; line-height: 1.3; }
.sd-head h3 a { text-decoration: none; }
.sd-head h3 a:hover { color: var(--brand); text-decoration: underline; }
.sd-head h3 a:focus-visible { box-shadow: var(--ring); }
.sd-arrow { display: inline-block; transition: transform 0.15s; }
.sd-head h3 a:hover .sd-arrow { transform: translateX(3px); }
.sd-total { font-size: 13px; color: var(--gray-600); white-space: nowrap; }
.sd-list li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); font-size: 14px; }
.sd-list a { display: inline-block; padding: 10px 0; min-height: 40px; line-height: 20px; text-decoration: none; color: var(--ink); }
.sd-list a:hover { color: var(--brand); text-decoration: underline; }
.sd-list a:focus-visible { box-shadow: var(--ring); border-radius: 4px; }
.sd-n { color: #4b5563; font-size: 13px; }
.cert-exam { background: var(--ground); padding: 32px 0 8px; }
.exam-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 24px; }
.exam-band p { font-size: 14px; font-weight: 600; }
.exam-band a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.exam-band a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .sd-grid { columns: 1; }
  .cert-head { padding-bottom: 28px; }
  .cert-fields { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) { .sd-arrow { transition: none; } .sd-head h3 a:hover .sd-arrow { transform: none; } }

/* ---------- exam hub (/exams/{vendor}/{exam}/) ---------- */
.badge-free { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--green-100); color: #166534; font-size: 12px; font-weight: 600; white-space: nowrap; }
.xh-hero { padding: 20px 0 56px; background: var(--white); }
.xh-hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 56px; align-items: center; margin-top: 16px; }
.xh-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.xh-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-700); font-size: 12px; font-weight: 600; }
.xh-tag--code { background: var(--gray-100); color: var(--ink); }
.xh-hero h1 { margin-top: 14px; font-size: 44px; line-height: 1.12; }
.xh-sub { margin-top: 16px; max-width: 36em; color: var(--muted); font-size: 17px; }
.xh-stats { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 16px; font-size: 14px; color: var(--muted); }
.xh-stats li { white-space: nowrap; }
.xh-stats li strong { color: var(--ink); font-weight: 600; }
.xh-stats li + li::before { content: "\00b7"; margin: 0 10px 0 0; color: var(--gray-400); }
.xh-stats li:not(:first-child) { margin-left: 10px; }
.xh-hero .cta-row { margin-top: 24px; }
.xh-pg-row { margin-top: 16px; }
.xh-pg { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-700); font-size: 13px; font-weight: 600; text-decoration: none; }
.xh-pg:hover { background: var(--indigo-100); }
.xh-section { padding: 64px 0; border-top: 1px solid var(--line); }
.xh-section h2 { font-size: 28px; line-height: 1.2; }
.xh-lede { margin-top: 8px; color: var(--muted); }
.xh-overview { max-width: 760px; }
.xh-overview p { margin-top: 14px; color: var(--gray-700); }
.xh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; }
.xh-tile { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.xh-tile dd { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.1; }
.xh-tile dt { margin-top: 6px; color: var(--muted); font-size: 14px; }
.xh-sim { margin-top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.xh-sim h3 { font-size: 17px; }
.xh-sim-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.xh-sim-rows li { display: flex; gap: 12px; align-items: flex-start; }
.xh-sim-ico { flex: none; margin-top: 2px; color: var(--indigo-600); }
.xh-sim-rows strong { display: block; font-size: 15px; }
.xh-sim-rows div span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.xh-free-line { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--gray-700); }
.xh-curr { margin-top: 28px; }
.xh-curr--aside { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.xh-chapters { display: grid; gap: 12px; }
.xh-ch { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.xh-ch summary { display: grid; grid-template-columns: 32px minmax(0, 1fr) 24px; column-gap: 16px; row-gap: 4px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: var(--radius); }
.xh-ch summary::-webkit-details-marker { display: none; }
.xh-ch summary:hover { background: var(--ground); }
.xh-ch-n { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--indigo-50); color: var(--indigo-600); font-size: 14px; font-weight: 600; }
.xh-ch h3 { grid-column: 2; font-size: 17px; line-height: 1.3; }
.xh-ch-meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 13px; }
.xh-chev { grid-column: 3; grid-row: 1 / span 2; width: 10px; height: 10px; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(45deg); justify-self: center; }
.xh-ch[open] .xh-chev { transform: rotate(-135deg); }
.xh-lessons { border-top: 1px solid var(--line); padding: 4px 20px 8px 68px; }
.xh-lessons li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 0; font-size: 14px; color: var(--gray-700); }
.xh-ls { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.xh-doc { flex: none; color: var(--gray-500); }
.xh-lessons li + li { border-top: 1px solid var(--gray-100); }
.xh-aside { position: sticky; top: calc(var(--header-h) + 16px); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.xh-aside-title { font-weight: 600; }
.xh-aside ul { margin-top: 12px; display: grid; gap: 8px; font-size: 14px; }
.xh-aside li { display: flex; gap: 8px; align-items: flex-start; }
.xh-aside li svg { flex: none; margin-top: 3px; color: #166534; }
.xh-aside-detail { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.xh-aside-line { margin-top: 12px; color: var(--muted); font-size: 13px; }
.xh-aside .btn { width: 100%; margin-top: 16px; }
.xh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.xh-chips li { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; }
.xh-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
/* Hub FAQ: DOM order 1 to 8; two columns on desktop read down (1 to 4 left, 5 to 8 right). */
.xh-faq-cols { grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
.xh-faq-item { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.xh-faq-item h3 { font-size: 16px; line-height: 1.35; }
.xh-faq-item p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.xh-faq-item a, .xh-reviewed a { color: var(--indigo-700); }
.cta-band--line { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 10px; }
.cta-band--line h2 { grid-column: 1; }
.cta-band--line .cta-line { grid-column: 1; max-width: 40em; color: rgba(255, 255, 255, 0.85); }
.cta-band--line .cta-line a { color: var(--white); }
.cta-band--line .btn { grid-column: 2; grid-row: 1 / span 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); }
.cta-band--line .btn:focus-visible { box-shadow: 0 0 0 3px var(--white); }
.xh-related { padding-top: 48px; }
.xh-reviewed { margin-top: 32px; font-size: 13px; color: var(--muted); }
@media (max-width: 991px) {
  .xh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .xh-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .xh-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .xh-hero h1 { font-size: 32px; }
  .xh-hero .cta-row .btn { width: 100%; }
  .xh-section { padding: 40px 0; }
  .xh-section h2 { font-size: 24px; }
  .xh-sim-rows, .xh-faq { grid-template-columns: 1fr; }
  .xh-faq-cols { grid-auto-flow: row; grid-template-rows: none; }
  .xh-curr--aside { grid-template-columns: 1fr; }
  .xh-aside { position: static; }
  .xh-lessons { padding-left: 20px; }
  .cta-band--line { grid-template-columns: 1fr; }
  .cta-band--line .btn { grid-column: 1; grid-row: auto; }
}

/* ---------- vendor page (/exams/{vendor}/, wave 224) ---------- */
.nav-pill > li > a[aria-current="page"] { background: var(--white); color: var(--brand); }
.vh-band-end { margin-top: 24px; }
.vh-band-end a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.vh-band-end a:hover { text-decoration: underline; }
.vh-band-end a:focus-visible { box-shadow: var(--ring); border-radius: 6px; }
.course-card .card-title, .course-card .card-sub { min-width: 0; overflow-wrap: anywhere; }
/* Exam Hub retired notice (neutral slate, never red) */
.xh-tag--retired { height: 26px; background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; }
.xh-retired { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px; padding: 16px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 12px; max-width: 640px; }
.xh-retired-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1px solid #cbd5e1; color: #334155; }
.xh-retired-text { min-width: 0; color: #334155; font-size: 15px; }
.xh-retired-text p { margin: 0; }
.xh-retired-title { display: block; color: #0f172a; font-weight: 600; }
.xh-retired-line { display: block; }
.xh-retired-text .btn { margin-top: 12px; }
.xh-retired-link { display: inline-block; margin-top: 2px; color: #4338ca; font-weight: 600; text-decoration: underline; }
.xh-retired-link:focus-visible, .xh-retired-text .btn:focus-visible, .xh-free-line .xh-retired-link:focus-visible { outline: 3px solid var(--indigo-600); outline-offset: 2px; box-shadow: none; border-radius: 6px; }
@media (max-width: 480px) {
  .xh-retired { padding: 14px; gap: 10px; }
  .xh-retired-icon { width: 32px; height: 32px; }
  .xh-retired-text { font-size: 15px; }
  .xh-retired-text .btn { display: block; text-align: center; }
}
.vh-retired { padding: 48px 0; }
.vh-retired-list { list-style: none; margin: 16px 0 0; padding: 0; max-width: 880px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.vh-retired-list li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; min-height: 44px; }
.vh-retired-list li + li { border-top: 1px solid var(--line); }
.vh-retired-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vh-retired-name a { font-weight: 600; color: var(--ink); text-decoration: none; }
.vh-retired-name a:hover { color: var(--brand); text-decoration: underline; }
.vh-retired-code { margin-left: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.vh-retired-pill { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--ground); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.vh-retired-next { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; white-space: nowrap; }
.vh-retired-next:hover { text-decoration: underline; }
.vh-retired-name a:focus-visible, .vh-retired-next:focus-visible { box-shadow: var(--ring); border-radius: 6px; }
.vh-retired-none { color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .vh-retired-list li { flex-wrap: wrap; gap: 4px 12px; }
  .vh-retired-name { flex: 1 1 100%; }
}

/* ---------- exams index (/exams/) ---------- */
.exams-head { padding-bottom: 40px; background: linear-gradient(180deg, var(--indigo-50) 0%, var(--white) 100%); }
.xs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.xs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.xs-link:hover { text-decoration: underline; }
.xs-link:focus-visible { box-shadow: var(--ring); }
.vendor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vendor-tile .card-title { font-size: 16px; }
.exams-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.exams-grid[hidden], .xt[hidden], .xt-single[hidden], .xt-empty[hidden], .course-card--compact[hidden] { display: none; }
.course-card--compact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
.course-card--compact .card-media { width: 96px; height: 96px; aspect-ratio: 1; border-radius: 10px; }
.course-card--compact .card-body { padding: 0; gap: 6px; }
.course-card--compact .card-sub { margin-top: 0; }
.course-card--compact .counts { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.course-card--compact .card-foot { justify-content: flex-start; margin-top: 2px; }
.xt { position: sticky; top: var(--header-h); z-index: 20; margin-top: 20px; padding: 12px 0; background: var(--white); border-bottom: 1px solid var(--line); }
.xt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xt-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--gray-300); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.xt-chip:hover { border-color: var(--indigo-500); background: var(--indigo-50); }
.xt-chip:focus-visible { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--indigo-600); }
.xt-chip .xt-check { display: none; }
.xt-chip[aria-pressed="true"] { background: var(--indigo-600); border-color: var(--indigo-600); color: var(--white); }
.xt-chip[aria-pressed="true"] .xt-check { display: inline-block; }
.xt-single { margin-top: 10px; font-size: 14px; }
.xt-single a { font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.xt-single a:hover { text-decoration: underline; }
.xt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 12px; }
.xt-text { position: relative; flex: 1 1 280px; max-width: 520px; }
.xt-glass { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-500); pointer-events: none; }
.xt-text input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--gray-300); border-radius: 999px; background: var(--white); font: inherit; font-size: 14px; color: var(--ink); }
.xt-text input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.xt-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.xt-sort select { height: 42px; padding: 0 12px; border: 1px solid var(--gray-300); border-radius: 10px; background: var(--white); font: inherit; font-size: 14px; color: var(--ink); }
.xt-sort select:focus-visible { outline: none; box-shadow: var(--ring); }
.xt-count { font-size: 14px; color: var(--muted); }
.xt-count strong { color: var(--ink); }
.xt-empty { margin-top: 24px; padding: 40px 24px; text-align: center; border: 1px dashed var(--gray-300); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.xt-empty a { color: var(--indigo-600); text-decoration: underline; }
.xv-list { columns: 5; column-gap: 24px; margin-top: 24px; list-style: none; padding: 0; }
.xv-list li { break-inside: avoid; font-size: 15px; }
.xv-list a { display: inline-block; padding: 8px 0; min-height: 40px; line-height: 24px; color: var(--ink); text-decoration: none; }
.xv-list a:hover { color: var(--brand); text-decoration: underline; }
.xv-list a:focus-visible { box-shadow: var(--ring); border-radius: 4px; }
.xv-n { color: var(--gray-600); font-size: 13px; }
@media (max-width: 1099px) {
  .vendor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xv-list { columns: 3; }
}
@media (max-width: 600px) {
  .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exams-grid { grid-template-columns: 1fr; }
  .xv-list { columns: 2; }
  .vendor-tile { display: block; padding: 0; }
  .vendor-tile .card-media { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
  .vendor-tile .card-body { padding: 12px 14px 14px; }
  .xt { margin-inline: -16px; padding-inline: 16px; }
  .xt-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .xt-chip { flex: 0 0 auto; }
  .xt-text { flex-basis: 100%; max-width: none; }
}

.course-card--compact .card-media { background: var(--indigo-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8 12 16v14c0 12 8.5 21 20 26 11.5-5 20-14 20-26V16z'/%3E%3Cpath d='m23 32 6 6 12-13'/%3E%3C/svg%3E") center / 56px no-repeat; }

/* ---------- vendor hub (/exams/{vendor}/) ---------- */
.hub-band h2[id] { scroll-margin-top: 96px; }
.vh-count { margin-top: 12px; font-size: 15px; color: var(--ink); }
.vh-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 32px; font-size: 15px; color: var(--muted); }
.vh-pager a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.vh-pager a:hover { text-decoration: underline; }
.vh-others { padding-top: 0; }
.vh-others ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; margin: 20px 0 0; }
.vh-others a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.vh-others a:hover { text-decoration: underline; }

/* ---------- content pages (/legal/*, /about/, /contact/, /methodology/) ---------- */
.content-page { padding: 20px 0 56px; }
.content-col { max-width: 760px; margin: 0 auto; }
.content-col h1 { margin-top: 16px; font-size: 40px; line-height: 1.15; }
.content-updated { margin-top: 8px; font-size: 14px; color: var(--muted); }
.content-toc { margin-top: 24px; padding: 16px 20px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); }
.content-toc-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.content-toc ul { margin-top: 8px; display: grid; gap: 2px; }
.content-toc a { display: inline-block; padding: 4px 0; color: var(--indigo-600); text-decoration: none; }
.content-toc a:hover { text-decoration: underline; }
.content-body { margin-top: 32px; font-size: 17px; line-height: 1.7; color: var(--gray-700); }
.content-body > :first-child { margin-top: 0; }
.content-body h2 { margin-top: 40px; font-size: 24px; line-height: 1.25; color: var(--ink); scroll-margin-top: 96px; }
.content-body h3 { margin-top: 28px; font-size: 19px; line-height: 1.3; color: var(--ink); scroll-margin-top: 96px; }
.content-body p, .content-body ul, .content-body ol, .content-body table { margin-top: 16px; }
.content-body ul { list-style: disc; padding-left: 24px; }
.content-body ol { list-style: decimal; padding-left: 24px; }
.content-body li + li { margin-top: 6px; }
.content-body a, .content-email a { color: var(--indigo-600); text-decoration: underline; text-underline-offset: 2px; }
.content-body a:hover, .content-email a:hover { color: var(--indigo-700); }
.content-body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.content-body th, .content-body td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.content-body th { font-weight: 600; color: var(--ink); background: var(--ground); }
.content-body code { font-size: 0.92em; padding: 1px 5px; background: var(--gray-100); border-radius: 4px; }
.content-email { margin-top: 24px; font-size: 17px; }
@media (max-width: 860px) {
  .content-page { padding-bottom: 40px; }
  .content-col h1 { font-size: 30px; }
}

/* content pages: each rendered table scrolls sideways inside its own box, never the page */
.table-scroll { max-width: 100%; margin-top: 16px; overflow-x: auto; }
.table-scroll table { display: table; min-width: 520px; margin-top: 0; overflow: visible; }

/* ---------- footer legal line (amendment 1) ---------- */
@media (min-width: 861px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-legal a { color: var(--gray-600); text-decoration: none; display: inline-block; padding: 6px 2px; }
.footer-legal a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- About / Contact layouts (amendment 1) ---------- */
.cp-hero { padding: 20px 0 48px; background: linear-gradient(135deg, var(--indigo-50) 0%, var(--indigo-100) 100%); }
.cp-hero h1 { margin-top: 16px; font-size: 40px; line-height: 1.15; }
.cp-sub { margin-top: 14px; max-width: 40em; font-size: 18px; color: var(--gray-700); }
.cp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cp-split--hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: 8px; }
.cp-split--hero .cp-sub { margin-top: 14px; }
.cp-split--map { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cp-split-media, .cp-split-text { min-width: 0; }
.cp-prose { margin-top: 16px; color: var(--gray-700); font-size: 17px; line-height: 1.7; }
.cp-prose p + p { margin-top: 16px; }
.cp-prose a { color: var(--indigo-600); text-decoration: underline; text-underline-offset: 2px; }
.cp-illus { position: relative; width: 100%; border-radius: 16px; overflow: hidden; background: var(--indigo-50); }
.cp-illus--about-hero { max-width: 406px; aspect-ratio: 406 / 228; }
.cp-illus--contact-hero { max-width: 406px; aspect-ratio: 4 / 3; }
.cp-illus--your-partner { max-width: 590px; aspect-ratio: 590 / 442; margin-left: auto; }
.cp-illus--about-global { max-width: 540px; aspect-ratio: 1 / 1; margin-left: auto; }
.cp-illus--contact-team { max-width: 540px; aspect-ratio: 4 / 3; margin-left: auto; }
.cp-illus .media-placeholder { position: absolute; inset: 0; }
.cp-illus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--indigo-50); }
.cp-center { text-align: center; }
.cp-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-card h3 { font-size: 17px; line-height: 1.3; }
.cp-card p { font-size: 15px; color: var(--muted); }
.cp-card .cp-card-link { margin-top: auto; }
.cp-card .cp-card-link a { font-weight: 600; color: var(--indigo-600); overflow-wrap: anywhere; }
.cp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-link-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; text-decoration: none; color: var(--ink); }
.cp-link-card h3 { font-size: 17px; line-height: 1.3; }
.cp-links { padding-top: 0; }
.cp-cards { padding-bottom: 16px; }
.cp-note-band { padding: 0 0 24px; }
.cp-note { text-align: center; font-size: 14px; color: var(--muted); }
.cp-reading { max-width: 760px; margin: 0 auto; }
.cp-reading .content-body { margin-top: 8px; }
.cp-band-gradient { padding: 56px 0; background: linear-gradient(135deg, var(--indigo-50) 0%, var(--indigo-100) 100%); }
.cp-band-gradient h2, .cp-split h2 { font-size: 28px; line-height: 1.2; }
@media (max-width: 1099px) { .cp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cp-hero { padding-bottom: 32px; }
  .cp-hero h1 { font-size: 30px; }
  .cp-split, .cp-split--hero, .cp-split--map { grid-template-columns: 1fr; gap: 28px; }
  .cp-split--hero .cp-split-media { order: 2; }
  .cp-illus--your-partner, .cp-illus--contact-team, .cp-illus--about-global { margin-left: 0; }
  .cp-grid-3 { grid-template-columns: 1fr; }
  .cp-band-gradient { padding: 40px 0; }
  .cp-band-gradient h2, .cp-split h2 { font-size: 24px; }
}
@media (max-width: 600px) { .cp-grid-4, .cp-grid-2 { grid-template-columns: 1fr; } }

/* ---------- pricing (/pricing/) ---------- */
.pr-head { padding: 20px 0 64px; background: linear-gradient(180deg, var(--indigo-50) 0%, var(--white) 100%); }
.pr-intro { text-align: center; margin-top: 24px; }
.pr-intro h1 { font-size: 44px; line-height: 1.12; }
.pr-lede { max-width: 40em; margin: 12px auto 0; color: var(--muted); font-size: 17px; }
.pr-toggle { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; display: flex; justify-content: center; }
.pr-toggle-track { display: inline-flex; gap: 4px; padding: 4px; background: var(--white); border: 1px solid #c7d2fe; border-radius: 999px; }
.pr-opt { position: relative; display: inline-flex; }
.pr-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pr-opt-face {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: 15px; color: var(--gray-700); pointer-events: none; transition: background-color 0.15s, color 0.15s;
}
.pr-opt-check { display: none; }
.pr-opt input:hover + .pr-opt-face { background: var(--indigo-50); color: var(--indigo-700); }
.pr-opt input:checked + .pr-opt-face { background: var(--indigo-600); color: var(--white); font-weight: 600; }
.pr-opt input:checked + .pr-opt-face .pr-opt-check { display: block; }
.pr-opt input:focus-visible + .pr-opt-face { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--indigo-600); }
.pr-save { padding: 2px 8px; border-radius: 999px; background: var(--indigo-50); color: var(--indigo-700); font-size: 12px; font-weight: 600; }
.pr-opt input:checked + .pr-opt-face .pr-save { background: var(--white); }
.pr-toggle-help { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }

.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; align-items: stretch; }
.pr-plan {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; align-content: start;
  padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pr-plan:hover { border-color: #c7d2fe; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08); }
.pr-plan:has(:focus-visible) { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3); }
.pr-plan-featured { border: 2px solid var(--indigo-600); padding: 27px; }
.pr-plan-featured:hover { border-color: var(--indigo-600); }
/* "Most Popular": the shared .badge pill, sitting on the featured card's top border (out of the card's row subgrid). */
.pr-plan-featured { position: relative; }
.pr-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.pr-plan h3 { font-size: 22px; line-height: 1.25; }
.pr-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-chip { min-height: 28px; font-size: 12px; }
.pr-tagline { margin-top: 6px; font-size: 14px; color: var(--muted); }
.pr-live { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 16px; }
.pr-price { display: flex; align-items: baseline; gap: 4px; align-self: end; }
.pr-price > span:not([hidden]) { display: inline-flex; align-items: baseline; gap: 4px; }
.pr-amount { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.pr-per { font-size: 15px; color: var(--muted); }
.pr-note {
  display: flex; align-items: center; gap: 8px; align-self: start; padding: 8px 12px;
  background: var(--gray-50); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--gray-700);
}
.pr-note .pr-info { flex: none; color: var(--indigo-600); }
.pr-btn { width: 100%; min-height: 48px; }
.pr-btn[hidden] { display: none; }
.pr-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pr-features { padding-top: 20px; border-top: 1px solid var(--line); }
.pr-list li { display: flex; gap: 10px; font-size: 15px; color: var(--gray-700); }
.pr-list li + li { margin-top: 10px; }
.pr-list svg { flex: none; margin-top: 3px; }
.pr-check { color: var(--indigo-600); }
.pr-cross { color: #b91c1c; }
.pr-list-no li { color: var(--muted); }
.pr-sub { margin: 18px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); }
.pr-muted { margin-top: 16px; font-size: 13px; color: var(--muted); }

.pr-compare { border-top: 1px solid var(--line); }
.pr-scroll-hint { display: none; margin-top: 8px; font-size: 13px; color: var(--muted); }
/* position: relative keeps the absolutely positioned .sr-only cell text inside the scroll box (it widened the page at 390px). */
.pr-table-wrap { position: relative; margin-top: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.pr-table-wrap:focus-visible { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3); border-radius: var(--radius); }
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.pr-table th, .pr-table td { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); text-align: center; vertical-align: middle; }
.pr-table tbody tr:last-child > * { border-bottom: 0; }
.pr-table thead th { background: var(--gray-50); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); }
.pr-table thead .pr-col-feature { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); }
.pr-table tbody th { text-align: left; font-weight: 600; color: var(--ink); width: 34%; background: var(--white); }
.pr-table td { color: var(--gray-600); }
.pr-table td svg { margin: 0 auto; }
.pr-table .pr-col-featured { background: #f5f7ff; }
.pr-table thead .pr-col-featured { color: var(--indigo-700); background: #eef1ff; }
.pr-cross.pr-no { color: var(--gray-400); }

.pr-guarantee-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; }
.pr-callout { display: flex; gap: 10px; padding: 16px 20px; background: var(--indigo-50); border: 1px solid #c7d2fe; border-radius: var(--radius); font-size: 16px; }
.pr-callout svg { flex: none; margin-top: 4px; color: var(--indigo-600); }
.pr-guarantee-text { margin-top: 16px; color: var(--muted); }
.pr-req { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.pr-req-title { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.pr-req .pr-list li { font-size: 14px; }
.pr-terms { margin-top: 20px; }
.pr-terms a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--indigo-600); text-decoration: none; }
.pr-terms a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .pr-plan, .pr-opt-face { transition: none; } }
@media (max-width: 1099px) { .pr-plans { gap: 16px; } .pr-plan { padding: 24px; } .pr-plan-featured { padding: 23px; } }
@media (max-width: 860px) {
  .pr-head { padding-bottom: 40px; }
  .pr-intro h1 { font-size: 32px; }
  .pr-plans { grid-template-columns: 1fr; }
  .pr-plan { grid-row: auto; grid-template-rows: none; }
  .pr-live { grid-row: auto; grid-template-rows: none; }
  .pr-scroll-hint { display: block; }
  .pr-table { min-width: 680px; }
  .pr-table th[scope="row"], .pr-table .pr-col-feature { position: sticky; left: 0; z-index: 1; width: 160px; }
  .pr-table thead .pr-col-feature { background: var(--gray-50); }
  .pr-guarantee-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- exam guide (/exams/{vendor}/{exam}/exam-guide/) and the Hub's guide card ---------- */
.xg-bg { background: var(--ground); }
.xg-top { padding: 20px 0 8px; }
.xg-top h1 { font-size: 40px; line-height: 1.15; margin-top: 8px; }
.xg-sub { margin-top: 12px; color: var(--gray-700); max-width: 760px; }
.xg-hub { margin-top: 12px; font-weight: 600; }
.xg-hub a { color: var(--indigo-700); }
.xg-verified { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.xg-check { display: inline-flex; color: var(--green-700); }
.xg-notice { margin-top: 12px; padding: 10px 14px; background: var(--indigo-50); border-radius: 8px; font-size: 14px; color: var(--gray-700); max-width: 760px; }
.xg-notice a { color: var(--indigo-700); text-decoration: underline; }
.xg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 56px; padding-top: 16px; padding-bottom: 64px; }
.xg-main { grid-column: 1; grid-row: 1; max-width: 760px; min-width: 0; }
.xg-toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding-top: 48px; }
.xg-toc-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xg-toc ul { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); display: grid; gap: 10px; }
.xg-toc a { color: var(--gray-600); font-size: 14px; }
.xg-toc a:hover { color: var(--brand); }
.xg-section { padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.xg-section h2 { font-size: 24px; line-height: 1.25; }
.xg-section h3 { margin-top: 20px; font-size: 16px; }
.xg-section p { margin-top: 12px; color: var(--gray-700); }
.xg-section h3 + p { margin-top: 4px; }
.xg-note { font-size: 13px; color: var(--muted); }
.xg-note a, .xg-sources a { color: var(--indigo-700); text-decoration: underline; }
.xg-table { width: 100%; margin-top: 16px; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; }
.xg-table tr + tr th, .xg-table tr + tr td { border-top: 1px solid var(--line); }
.xg-table th, .xg-table td { padding: 12px 16px; text-align: left; font-size: 15px; }
.xg-table th { width: 40%; font-weight: 400; color: var(--gray-600); }
.xg-table td { font-weight: 600; }
.xg-obj { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.xg-obj-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.xg-obj-w { font-variant-numeric: tabular-nums; color: var(--gray-700); }
.xg-bar { display: block; width: 100%; height: 8px; margin-top: 6px; border: 0; border-radius: 4px; background: var(--gray-200); appearance: none; -webkit-appearance: none; overflow: hidden; }
.xg-bar::-webkit-progress-bar { background: var(--gray-200); }
.xg-bar::-webkit-progress-value { background: var(--indigo-600); border-radius: 4px; }
.xg-bar::-moz-progress-bar { background: var(--indigo-600); border-radius: 4px; }
.xg-faq-item { padding: 16px 0; border-top: 1px solid var(--line); }
.xg-faq-item:first-of-type { border-top: 0; }
.xg-faq-item h3 { margin-top: 0; }
.xg-course { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 8px 0 0; padding: 24px; background: var(--indigo-50); border: 1px solid var(--indigo-100); border-radius: var(--radius); }
.xg-course h2 { font-size: 18px; }
.xg-course p { margin-top: 6px; font-size: 14px; color: var(--gray-700); }
.xg-sources { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.xg-sources h2 { font-size: 14px; font-weight: 600; color: var(--gray-700); }
.xg-sources ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.xg-sources p { margin-top: 8px; }
@media (max-width: 1024px) {
  .xg-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .xg-toc { grid-column: 1; grid-row: 1; position: static; padding-top: 16px; }
  .xg-toc ul { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; border-left: 0; }
  .xg-toc a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
  .xg-main { grid-row: 2; }
}
@media (max-width: 640px) {
  .xg-top h1 { font-size: 30px; }
  .xg-section { padding: 28px 0; }
  .xg-table th { width: 45%; }
  .xg-table th, .xg-table td { padding: 10px 14px; font-size: 14px; }
  .xg-course { flex-direction: column; align-items: stretch; }
  .xg-course .btn { width: 100%; }
}
/* Hub: overview beside the guide card (only when a guide is live; otherwise .xh-overview stays capped at 760px) */
.xh-overview-row { display: grid; grid-template-columns: minmax(0, 760px) 320px; gap: 48px; align-items: start; }
.xh-guide { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.xh-guide-title { font-size: 18px; font-weight: 600; }
.xh-guide ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.xh-guide a { color: var(--indigo-700); font-weight: 500; }
.xh-guide .btn { margin-top: 16px; }
@media (max-width: 991px) { .xh-overview-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } }