/* =========================================================
   regulation-ai.eu — Main CSS
   Design: Signal (Spectral + Space Grotesk, gold accent)
   ========================================================= */

/* ---- Keyframe Animations ---- */
@keyframes scSpin    { from { transform: rotate(0); }    to { transform: rotate(360deg); } }
@keyframes scSpinRev { from { transform: rotate(0); }    to { transform: rotate(-360deg); } }
@keyframes scTicker  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scFloat   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes scGlow    { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes scBlink   { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes scReveal  { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Design system.
   The subject is legal citation and chronology — "which article, what date,
   what status". That vernacular drives the palette (status gets first-class
   colour), the type (a mono face carries every citation and date), and the
   spacing scale. The body ground is a cool document grey rather than a warm
   cream: this is a reference instrument, not a magazine. */
:root {
  --bg:         #eef1f6;   /* cool document ground */
  --surface:    #ffffff;
  --text:       #0a1428;
  --text-muted: #55617a;
  --accent:     #f4c20d;   /* brand gold, shared with regulation-dora.eu */
  --dark:       #0a1f44;
  --darker:     #060b18;
  --blue-light: #8fb2ff;
  --green:      #3ddc84;
  --secondary:  #5b9bd8;
  --rule:       #d4dae6;   /* hairline */

  /* Status is the content, so it gets a semantic palette.
     "Deferred" earns its own hue: the Omnibus moving a date is the news. */
  --st-live:    #0f7b54;
  --st-live-bg: #dff3e9;
  --st-defer:   #5b4bc4;
  --st-defer-bg:#e9e6fb;
  --st-ban:     #c0332a;
  --st-ban-bg:  #fbe4e2;

  /* legacy aliases kept for tool/faq/table components */
  --blue-900:  #0a1f44;
  --blue-700:  #1e3a5f;
  --blue-500:  #1f4fa3;
  --sky-400:   #8fb2ff;
  --amber-500: #f59e0b;
  --red-600:   #c0332a;
  --green-600: #0f7b54;
  --slate-50:  #f5f7fb;
  --slate-100: #e9edf5;
  --slate-200: #d4dae6;
  --slate-300: #b6bfd1;
  --slate-600: #55617a;
  --slate-700: #33405c;
  --slate-900: #0a1428;

  --font-sans:  'Space Grotesk', system-ui, sans-serif;
  --font-serif: 'Spectral', Georgia, serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Vertical rhythm — one scale, used everywhere, so sections stop
     drifting to arbitrary margins. */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2.5rem; --s-5: 4rem;   --s-6: 6rem;

  --radius:    6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(10,20,40,.06), 0 2px 8px rgba(10,20,40,.04);
  --shadow-md: 0 4px 12px rgba(10,20,40,.07), 0 18px 40px rgba(10,20,40,.09);
  --measure:   68ch;       /* reading measure */
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark);
  margin-top: 2rem;
  margin-bottom: .75rem;
}
h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-top: 0; }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); margin-top: var(--s-5); position: relative; padding-top: .75rem; }
h2::before { content: ''; position: absolute; top: 0; left: 0; width: 2.25rem; height: 3px; background: var(--accent); border-radius: 2px; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p  { margin-bottom: 1.2rem; }
ul, ol { margin: 0 0 1.2rem 1.4rem; }
li { margin-bottom: .35rem; }

blockquote {
  border-left: 3px solid var(--accent);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(244,194,13,.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--slate-700);
  font-style: italic;
}

code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--slate-100);
  padding: .15em .4em;
  border-radius: 3px;
  color: var(--blue-700);
}
pre {
  background: var(--darker);
  color: var(--blue-light);
  padding: 1.25rem;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: .875rem;
}
pre code { background: none; padding: 0; color: inherit; }
strong { font-weight: 700; }

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 800px; }

/* ---- Scroll Reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* ---- Utility Strip ---- */
.utility-strip {
  background: #081229;
  color: #b9c4e6;
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: .625rem 1.5rem;
  border-bottom: 1px solid rgba(150,180,255,.08);
  white-space: nowrap;
  overflow: hidden;
}
.utility-strip__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: scBlink 2s infinite;
  flex-shrink: 0;
}
.utility-strip__days { color: var(--accent); font-weight: 700; }
.utility-strip a { color: rgba(255,255,255,.45); }
.utility-strip a:hover { color: rgba(255,255,255,.8); text-decoration: none; }

/* ---- Navigation (Glassmorphism) ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(7,12,28,.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(150,180,255,.1);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  gap: 1rem;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__logo-ring {
  width: 28px; height: 28px;
  animation: scSpin 26s linear infinite;
  flex-shrink: 0;
}
.nav__logo-text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
.nav__logo-text em { color: var(--accent); font-style: normal; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  color: rgba(255,255,255,.72);
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  transition: color .15s;
}
.nav__links a:hover { color: #fff; text-decoration: none; }
.nav__links a.active { color: var(--accent); }
/* Marks a nav target served in English because that locale has no translation yet */
.nav__lang-hint {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .55;
}
.nav__cta {
  background: var(--accent) !important;
  color: var(--dark) !important;
  padding: .45rem 1rem !important;
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
  font-size: .8125rem !important;
  transition: opacity .15s !important;
}
.nav__cta:hover { opacity: .88 !important; text-decoration: none !important; }

/* Lang switcher */
.nav__lang {
  position: relative;
  flex-shrink: 0;
}
.nav__lang-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: var(--radius);
  cursor: pointer;
  letter-spacing: .04em;
}
.nav__lang-btn:hover { background: rgba(255,255,255,.14); }
.nav__lang-btn .fi,
.nav__lang-dropdown .fi {
  width: 1.125em;
  height: .85em;
  border-radius: 2px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: .25em;
}
.nav__lang-dropdown a { display: flex; align-items: center; gap: .35rem; }
.nav__lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #0d1629;
  border: 1px solid rgba(150,180,255,.18);
  border-radius: var(--radius);
  padding: .35rem;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 50;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.nav__lang-dropdown a {
  display: block;
  padding: .4rem .625rem;
  color: rgba(255,255,255,.72);
  font-size: .8125rem;
  font-family: var(--font-sans);
  border-radius: .375rem;
  white-space: nowrap;
}
.nav__lang-dropdown a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav__lang-dropdown a.nav__lang-all {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: .25rem;
  padding-top: .5rem;
  color: rgba(255,255,255,.45);
  font-size: .75rem;
}
.nav__lang.open .nav__lang-dropdown { display: grid; }

/* AI Act mega-menu */
.nav__inner { position: relative; }
.nav__mega-item { position: static; }
.nav__mega-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: #0d1629;
  border-top: 1px solid rgba(150,180,255,.18);
  border-bottom: 1px solid rgba(150,180,255,.18);
  padding: 1.25rem 1.5rem 1.5rem;
  z-index: 60;
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.nav__mega-item.open .nav__mega-panel { display: grid; }
.nav__mega-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav__mega-group {
  color: rgba(244,194,13,.75);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .625rem 0 .25rem;
  margin-top: .375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__mega-group:first-child { margin-top: 0; padding-top: 0; }
.nav__mega-panel a {
  display: block;
  padding: .175rem .375rem;
  color: rgba(255,255,255,.6);
  font-size: .7rem;
  font-family: var(--font-sans);
  border-radius: .25rem;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.nav__mega-panel a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
@media (max-width: 768px) {
  .nav__mega-panel { display: none !important; }
}

/* Sectors dropdown */
.nav__sector-item {
  position: relative;
}
.nav__sector-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.72);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  letter-spacing: .02em;
  transition: color .15s;
}
.nav__sector-btn:hover { color: #fff; }
.nav__sector-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #0d1629;
  border: 1px solid rgba(150,180,255,.18);
  border-radius: var(--radius);
  padding: .35rem;
  min-width: 210px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 50;
  display: none;
}
.nav__sector-dropdown a {
  display: block;
  padding: .4rem .625rem;
  color: rgba(255,255,255,.72);
  font-size: .8125rem;
  font-family: var(--font-sans);
  border-radius: .375rem;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.nav__sector-dropdown a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.nav__sector-dropdown a.nav__sector-all {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: .25rem;
  padding-top: .5rem;
  color: rgba(255,255,255,.45);
  font-size: .75rem;
}
.nav__sector-dropdown a.nav__sector-all:hover { color: rgba(255,255,255,.7); }
.nav__sector-item.open .nav__sector-dropdown { display: block; }

@media (max-width: 768px) {
  .nav__sector-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,.04);
    border-radius: .5rem;
    margin-top: .25rem;
    padding: .25rem;
  }
}

/* Mobile toggle */
.nav__menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  cursor: pointer;
  padding: .35rem .6rem;
  color: #fff;
  font-size: 1.2rem;
  border-radius: var(--radius);
}

/* ---- Page Hero (inner pages) ---- */
.page-hero {
  background: linear-gradient(150deg, var(--darker) 0%, var(--dark) 100%);
  color: #fff;
  padding: 3.5rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}
/* subtle glow */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 42%, rgba(70,110,255,.22), transparent 52%),
              radial-gradient(circle at 18% 80%, rgba(70,110,255,.1), transparent 50%);
  pointer-events: none;
}
.page-hero__inner { max-width: 900px; margin: 0 auto; position: relative; }
.page-hero__breadcrumbs {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  margin-bottom: .875rem;
  font-family: var(--font-sans);
}
.page-hero__breadcrumbs a { color: rgba(255,255,255,.65); }
.page-hero__breadcrumbs span { margin: 0 .4rem; }
.page-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(244,194,13,.15);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .28em .85em;
  border-radius: 99px;
  border: 1px solid rgba(244,194,13,.3);
  margin-bottom: 1rem;
  font-family: var(--font-sans);
}
.page-hero h1 { color: #fff; font-family: var(--font-serif); margin-top: .5rem; max-width: 60ch; }
.page-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(244,194,13,.25) 38%, transparent 72%);
}
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  padding: .3em .8em;
  border-radius: 4px;
  border: 1px solid rgba(150,180,255,.25);
  color: rgba(255,255,255,.82);
  background: rgba(10,20,40,.45);
  white-space: nowrap;
}
.chip--cite { border-color: rgba(244,194,13,.45); color: var(--accent); }
.chip--date::before { content: '⟳'; opacity: .6; font-size: .85em; }
/* Course pages only: the three facts that decide the click — free, certificate,
   included — were nowhere above the fold before this. */
.chip--free { border-color: rgba(74,222,128,.5); color: #86efac; }
.page-hero__meta {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-top: 1rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  font-family: var(--font-sans);
}
.page-hero__meta time { color: rgba(255,255,255,.8); }

/* ---- Content layout (pillar: 2-col) ---- */
.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}
@media (min-width: 900px) {
  .content-layout--sidebar {
    grid-template-columns: 210px 1fr;
    align-items: start;
  }
  /* partials/toc.html.twig renders nothing when a page has one heading or none,
     which used to drop the article column into the 210px gutter meant for the
     table of contents. Pages whose sections are generated by a template rather
     than written in Markdown hit this every time. Span both columns when main
     is the only child. */
  .content-layout--sidebar > .article-body:first-child {
    grid-column: 1 / -1;
  }
}

/* ---- Sidebar TOC ---- */
.toc {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: sticky;
  top: 82px;
  font-size: .875rem;
}
.toc__title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: .75rem;
  margin-top: 0;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
}
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list li { margin-bottom: .4rem; }
.toc__list a { color: var(--slate-700); line-height: 1.4; display: block; font-family: var(--font-sans); font-size: .8375rem; }
.toc__list a:hover { color: var(--dark); }
.toc__list a.active { color: var(--dark); font-weight: 600; }

/* ---- Article body ---- */
.article-body { min-width: 0; }
.article-body h2 { scroll-margin-top: 82px; }
.article-body h3 { scroll-margin-top: 82px; }

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: 1.5rem 0;
  display: block;
  overflow-x: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.article-body table th {
  background: var(--dark);
  color: #fff;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.article-body table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
  line-height: 1.5;
}
.article-body table tr:last-child td { border-bottom: none; }
.article-body table tr:hover td { background: var(--slate-50); }

/* ---- Deadline table ---- */
.deadline-section { margin: 2.5rem 0; }
.deadline-section h2 { margin-top: 0; }
.deadline-table-wrap { overflow-x: auto; }
.deadline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.deadline-table th {
  background: var(--dark);
  color: #fff;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.deadline-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--slate-200);
  vertical-align: top;
}
.deadline-table tr:last-child td { border-bottom: none; }
.deadline-table tr:hover td { background: var(--slate-50); }

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2em .65em;
  border-radius: 99px;
  font-family: var(--font-sans);
}
.status--active    { background: var(--st-live-bg);  color: var(--st-live); }
.status--deferred  { background: var(--st-defer-bg); color: var(--st-defer); }
.status--prohibited{ background: var(--st-ban-bg);   color: var(--st-ban); }

/* Row accent: the status reads before the words do */
.deadline-table tr:has(.status--active)     td:first-child { box-shadow: inset 3px 0 0 var(--st-live); }
.deadline-table tr:has(.status--deferred)   td:first-child { box-shadow: inset 3px 0 0 var(--st-defer); }
.deadline-table tr:has(.status--prohibited) td:first-child { box-shadow: inset 3px 0 0 var(--st-ban); }
.deadline-table td time, .deadline-table td .dl-date { font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* Countdown chip */
.countdown-chip {
  display: inline-block;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 4px;
  padding: .15em .55em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--slate-700);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
}
.countdown-chip[data-urgent="true"] {
  background: rgba(244,194,13,.18);
  border-color: var(--accent);
  color: #7a5c00;
}
.countdown-chip--past { background: #fee2e2; border-color: var(--red-600); color: var(--red-600); }

/* ---- FAQ Section ---- */
.faq-section { margin: 3rem 0; }
.faq-section h2 { margin-top: 0; }
.faq-item {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  margin-bottom: .625rem;
  overflow: hidden;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  gap: 1rem;
  user-select: none;
  font-family: var(--font-sans);
}
.faq-question:hover { background: var(--slate-50); }
.faq-chevron { flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer {
  display: none;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  font-size: .9375rem;
}
.faq-item.open .faq-answer { display: block; }

/* ---- Cross-link DORA ---- */
.crosslink-dora {
  background: linear-gradient(135deg, var(--dark) 0%, var(--blue-700) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin: 2.5rem 0;
}
.crosslink-dora__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: rgba(244,194,13,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.crosslink-dora__title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .4rem;
  border: none;
  padding: 0;
  font-family: var(--font-serif);
}
.crosslink-dora__text {
  font-size: .875rem;
  color: rgba(255,255,255,.8);
  margin: 0 0 .75rem;
}
.crosslink-dora__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--accent);
  color: var(--dark);
  padding: .45rem .9rem;
  border-radius: var(--radius);
  font-size: .825rem;
  font-weight: 700;
  transition: opacity .15s;
  font-family: var(--font-sans);
}
.crosslink-dora__link:hover { opacity: .88; text-decoration: none; }

/* ---- Lead Capture CTA ---- */
.lead-cta {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.lead-cta h3 { margin-top: 0; }
.lead-cta__form {
  display: flex;
  gap: .5rem;
  max-width: 440px;
  margin: 1rem auto 0;
}
.lead-cta__input {
  flex: 1;
  padding: .65rem .9rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: var(--font-sans);
  background: var(--bg);
}
.lead-cta__input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.lead-cta__btn {
  background: var(--dark);
  color: #fff;
  border: none;
  padding: .65rem 1.25rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: opacity .15s;
}
.lead-cta__btn:hover { opacity: .82; }
.lead-cta__note { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; font-family: var(--font-sans); }

/* Lead states */
.lead-cta__success {
  background: #f0fdf4;
  border: 1px solid var(--green-600);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  color: #14532d;
  font-size: .9375rem;
  text-align: center;
}
.lead-cta__form--stacked { flex-direction: column; }
.lead-cta__row { display: flex; gap: .5rem; width: 100%; }
.lead-cta__topics {
  display: flex; flex-wrap: wrap; gap: .375rem .875rem;
  border: none; margin: .625rem 0 0; padding: 0;
  font-family: var(--font-sans); font-size: .8125rem; color: var(--text-muted);
}
.lead-cta__topics-legend { width: 100%; padding: 0; margin-bottom: .25rem; font-size: .8125rem; font-weight: 600; }
.lead-cta__topic { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; white-space: nowrap; }
.lead-cta__topic input { accent-color: var(--accent, #1e3a5f); margin: 0; }
.newsletter-section .lead-cta__topics, .newsletter-section .lead-cta__topics-legend { color: rgba(185,196,230,.8); }
@media (max-width: 640px) { .lead-cta__row { flex-direction: column; } }
.lead-cta__success strong { display: block; font-size: 1.0625rem; margin-bottom: .5rem; }
.lead-cta__success p { margin: 0 0 .5rem; line-height: 1.55; }
.lead-cta__success p:last-child { margin-bottom: 0; }
.lead-cta__success-note { font-size: .8125rem; opacity: .75; }
.lead-cta__dl-link { color: var(--green-600); font-weight: 700; }
.lead-cta__error { color: var(--red-600); font-size: .8125rem; margin-top: .4rem; }
.lead-cta__form--inline { flex-direction: row; max-width: 100%; }

/* ---- Checkout form ---- */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .25rem;
}
.checkout-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .7rem 1.25rem;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
  width: 100%;
}
.checkout-btn:hover { opacity: .85; }
.checkout-btn:disabled { opacity: .55; cursor: not-allowed; }
.checkout-error { color: var(--red-600); font-size: .8125rem; margin-top: .25rem; }

/* ---- Academy upsell CTA ---- */
.academy-upsell {
  background: linear-gradient(135deg,#f0f4ff 0%,#e8f0fe 100%);
  border: 1px solid rgba(10,31,68,.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}
.academy-upsell h3 { margin: 0 0 .5rem; font-size: 1.125rem; color: var(--dark); }
.academy-upsell p { color: #475569; font-size: .9375rem; margin: 0 0 1.25rem; }
.academy-upsell__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.academy-upsell__link { font-size: .875rem; color: var(--accent); font-weight: 600; text-decoration: none; }
.academy-upsell__link:hover { text-decoration: underline; }

/* ---- Course track CTAs (partials/course-cta, course-exam-bar, course-sticky) ----
   Same visual family as .academy-upsell, but left-aligned: this one sits under
   the lede as part of the reading flow rather than as a closing panel. */
.course-cta {
  background: linear-gradient(135deg,#f0f4ff 0%,#e8f0fe 100%);
  border: 1px solid rgba(10,31,68,.1);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 0 0 2rem;
}
.course-cta__lede { margin: 0 0 1rem; color: var(--dark); font-size: 1rem; font-weight: 600; }
.course-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.course-cta__proof {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: #475569;
  line-height: 1.6;
}

.course-exam-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg,#f0f4ff 0%,#e8f0fe 100%);
  border: 1px solid rgba(10,31,68,.1);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 2.5rem;
}
.course-exam-bar__copy { flex: 1 1 20rem; }
.course-exam-bar h3 { margin: 0 0 .35rem; font-size: 1.0625rem; color: var(--dark); }
.course-exam-bar p  { margin: 0; color: #475569; font-size: .9375rem; }

/* Hidden by default and switched on in the narrow-screen media query below.
   z-index stays under the consent banner's 900 so a cookie choice is never
   buried; the footer clears the bar via body.has-sticky-cta. */
.course-sticky { display: none; }

/* ---- Resource grid ---- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.resource-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.resource-card__badge {
  display: inline-block;
  background: rgba(10,31,68,.07);
  color: var(--dark);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: .2rem .5rem;
  align-self: flex-start;
}
.resource-card__title { font-size: 1rem; font-weight: 700; color: var(--dark); margin: 0; }
.resource-card__desc { font-size: .875rem; color: #475569; margin: 0; flex: 1; }
.resource-card__price { font-size: 1.125rem; font-weight: 800; color: var(--dark); }
.resource-card__cta .btn { width: 100%; text-align: center; }

/* ---- Callout boxes ---- */
.callout {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  display: flex;
  gap: .75rem;
}
.callout--info    { background: rgba(43,87,151,.07); border-left: 3px solid var(--blue-500); }
.callout--warn    { background: rgba(244,194,13,.1); border-left: 3px solid var(--accent); }
.callout--danger  { background: #fef2f2; border-left: 3px solid var(--red-600); }
.callout--success { background: #f0fdf4; border-left: 3px solid var(--green-600); }
.callout__body p:last-child { margin-bottom: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9375rem;
  font-family: var(--font-sans);
  transition: all .18s;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--dark); }
.btn--primary:hover { opacity: .88; text-decoration: none; }
.btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
.btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { opacity: .85; text-decoration: none; }
/* partials/academy-cta.html.twig has asked for .btn--sm on every article page
   since it was written; the rule was never added, so the modifier did nothing. */
.btn--sm { padding: .5rem 1rem; font-size: .875rem; }

/* ---- Section generic ---- */
.section { padding: 4rem 1.5rem; }
.section--alt { background: #fff; }
.section--dark { background: var(--dark); color: #fff; }
.section--darker { background: var(--darker); color: #fff; }
.section__title { text-align: center; margin-bottom: 3rem; }
.section__title h2 { margin-top: 0; border: none; padding: 0; }
.section__title p { color: var(--text-muted); margin-top: .5rem; }
.section__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
  font-family: var(--font-sans);
}

/* ---- Homepage Hero ---- */
.home-hero {
  background: linear-gradient(150deg, var(--darker) 0%, var(--dark) 100%);
  color: #fff;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 0;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-hero__orbit {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-52%);
  width: min(560px, 55vw);
  height: min(560px, 55vw);
  pointer-events: none;
}
.home-hero__orbit svg { width: 100%; height: 100%; filter: drop-shadow(0 0 7px rgba(244,194,13,.5)); animation: scSpin 48s linear infinite; }
.home-hero__dot {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: scFloat var(--dur,7s) ease-in-out infinite;
}
.home-hero__content {
  position: relative;
  max-width: 680px;
  padding-bottom: 3rem;
}
.home-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.75rem;
}
.home-hero__badge .blink-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: scBlink 1.6s infinite;
}
.home-hero h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1.5rem;
  margin-top: 0;
  border: none;
  padding: 0;
}
.home-hero h1 strong { font-weight: 600; color: var(--accent); text-shadow: 0 0 24px rgba(244,194,13,.45); }
.home-hero__sub {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  color: #9fb0d8;
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 2.25rem;
}
.home-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Stats strip */
.home-hero__stats {
  position: relative;
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(150,180,255,.18);
  max-width: 680px;
  margin-top: 3rem;
}
.home-hero__stat {
  padding: 1.25rem 2rem 1.25rem 0;
  border-right: 1px solid rgba(150,180,255,.15);
  margin-right: 2rem;
}
.home-hero__stat:last-child { border-right: none; margin-right: 0; }
.home-hero__stat-num {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 1.875rem;
  color: #fff;
  line-height: 1;
}
.home-hero__stat-label {
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(185,196,230,.7);
  margin-top: .25rem;
}

/* Marquee ticker */
.ticker {
  position: relative;
  border-top: 1px solid rgba(150,180,255,.12);
  background: rgba(6,7,15,.55);
  overflow: hidden;
  padding: .875rem 0;
  margin-top: 3rem;
}
.ticker__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: #b9c4e6;
  width: max-content;
  animation: scTicker 32s linear infinite;
}
.ticker__track span { display: flex; gap: 3rem; }
.ticker__track .highlight { color: var(--accent); }

/* ---- Panorama Section (Topic Cards) ---- */
.panorama { background: var(--bg); padding: 5rem 1.5rem; }
.panorama__inner { max-width: 1200px; margin: 0 auto; }
.panorama__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.25rem;
}
.panorama-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 8px;
  padding: 1.75rem;
  transition: box-shadow .22s, transform .22s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.panorama-card:hover {
  box-shadow: 0 8px 32px rgba(10,31,68,.14);
  transform: translateY(-3px);
  text-decoration: none;
}
.panorama-card__num {
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .625rem;
}
.panorama-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--dark);
  margin-bottom: .5rem;
  line-height: 1.35;
}
.panorama-card__desc { font-size: .875rem; color: var(--text-muted); margin: 0; line-height: 1.55; }
.panorama-card__arrow {
  display: inline-block;
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-sans);
}

/* ---- Risk Pyramid Section ---- */
.risk-pyramid { background: var(--dark); padding: 5rem 1.5rem; color: #fff; }
.risk-pyramid__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.risk-pyramid__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.25rem); color: #fff; border: none; padding: 0; margin-top: 0; }
.risk-pyramid__subtitle { color: rgba(185,196,230,.75); font-size: .9375rem; margin-top: .5rem; }
.risk-level {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s;
  border: 1px solid rgba(150,180,255,.1);
  margin-bottom: .625rem;
}
.risk-level:hover { background: rgba(255,255,255,.06); }
.risk-level.active { background: rgba(255,255,255,.1); border-color: rgba(244,194,13,.4); }
.risk-level__color {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.risk-level__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  color: #fff;
}
.risk-level__count {
  margin-left: auto;
  font-size: .75rem;
  color: rgba(185,196,230,.6);
  font-family: var(--font-sans);
}
.risk-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(150,180,255,.15);
  border-radius: 8px;
  padding: 2rem;
  min-height: 220px;
}
.risk-panel__level {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .625rem;
  font-family: var(--font-sans);
}
.risk-panel__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: .75rem;
  border: none;
  padding: 0;
  margin-top: 0;
  line-height: 1.3;
}
.risk-panel__desc {
  font-size: .9375rem;
  color: rgba(185,196,230,.85);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.risk-panel__link {
  color: var(--accent);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font-sans);
}

/* ---- Timeline Section ---- */
.timeline-section { background: var(--bg); padding: 5rem 1.5rem; }
.timeline-section__inner { max-width: 800px; margin: 0 auto; }
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  margin-top: 2.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--slate-200);
}
.timeline-item {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
  position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item__dot {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--slate-200);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-sans);
  position: relative;
  z-index: 1;
}
.timeline-item--active .timeline-item__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark);
  box-shadow: 0 0 0 4px rgba(244,194,13,.2);
}
.timeline-item--past .timeline-item__dot {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.timeline-item__body { padding-top: .625rem; }
.timeline-item__date {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-sans);
  margin-bottom: .25rem;
}
.timeline-item--active .timeline-item__date { color: var(--accent); }
.timeline-item__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--dark);
  margin-bottom: .25rem;
}
.timeline-item__desc { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ---- Pour qui Section ---- */
.pour-qui { background: #fff; padding: 5rem 1.5rem; }
.pour-qui__inner { max-width: 1100px; margin: 0 auto; }
.pour-qui__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
.audience-card {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 1.75rem;
  background: var(--bg);
  transition: box-shadow .2s;
}
.audience-card:hover { box-shadow: var(--shadow-md); }
.audience-card__icon { font-size: 2rem; margin-bottom: .875rem; }
.audience-card__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem; color: var(--dark); margin-bottom: .4rem; }
.audience-card__desc { font-size: .875rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* ---- Newsletter Section ---- */
.newsletter-section {
  background: linear-gradient(150deg, var(--dark) 0%, var(--darker) 100%);
  padding: 5rem 1.5rem;
  text-align: center;
}
.newsletter-section__inner { max-width: 540px; margin: 0 auto; }
.newsletter-section h2 { font-family: var(--font-serif); color: #fff; border: none; padding: 0; margin-top: 0; }
/* The rule already means "no decoration here", but h2::before is positioned,
   not bordered, so the accent bar survived at the left edge of a centred
   heading. Centre it with the text (homepage carries the same band). */
.newsletter-section h2::before { left: 50%; transform: translateX(-50%); }
.newsletter-section p { color: rgba(185,196,230,.8); font-size: 1rem; }
.newsletter-form {
  display: flex;
  gap: .5rem;
  margin-top: 1.5rem;
}
.newsletter-input {
  flex: 1;
  padding: .75rem 1rem;
  border: 1px solid rgba(150,180,255,.25);
  border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: .9375rem;
  font-family: var(--font-sans);
}
.newsletter-input::placeholder { color: rgba(185,196,230,.5); }
.newsletter-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.newsletter-note { font-size: .75rem; color: rgba(185,196,230,.55); margin-top: .625rem; font-family: var(--font-sans); }

/* ---- Cards (generic, homepage) ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
}
.card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.card__icon { font-size: 1.75rem; margin-bottom: .75rem; }
.card__title { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--dark); margin-bottom: .4rem; }
.card__desc { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ---- Footer ---- */
.footer {
  background: var(--darker);
  color: rgba(255,255,255,.6);
  padding: 4rem 1.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.footer__star-ring {
  position: absolute;
  right: -180px;
  bottom: -180px;
  width: 560px; height: 560px;
  pointer-events: none;
  opacity: .1;
}
.footer__star-ring svg { width: 100%; height: 100%; animation: scSpinRev 64s linear infinite; }
.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  position: relative;
}
@media (min-width: 600px) {
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Five columns since the footer became the site's topical index rather than a
   courtesy list — see partials/footer.html.twig. */
@media (min-width: 920px) {
  .footer__inner { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .5rem;
}
.footer__brand em { color: var(--accent); font-style: normal; }
.footer__tagline { font-size: .8125rem; margin-bottom: 1rem; line-height: 1.55; }
.footer__sister { font-size: .8rem; margin-top: .5rem; }
.footer__sister a { color: rgba(255,255,255,.4); }
.footer__col h4 {
  color: rgba(255,255,255,.85);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 .875rem;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 700;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: .425rem; }
.footer__col a { color: rgba(255,255,255,.5); font-size: .85rem; font-family: var(--font-sans); }
.footer__col a:hover { color: rgba(255,255,255,.9); text-decoration: none; }
.footer__bottom {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .8rem;
  font-family: var(--font-sans);
  position: relative;
}
.footer__legal a { color: rgba(255,255,255,.4); margin-left: 1rem; }
.footer__legal a:hover { color: rgba(255,255,255,.8); text-decoration: none; }

/* ---- Tool Widget ---- */
.tool-widget {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
  min-height: 200px;
}
.tool-step { display: none; }
.tool-step.active { display: block; }
.tool-question {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .5rem;
  line-height: 1.45;
}
.tool-help {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-style: italic;
  font-family: var(--font-sans);
}
.tool-options { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.tool-option {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border: 2px solid var(--slate-200);
  border-radius: var(--radius);
  padding: .875rem 1.125rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
  background: var(--slate-50);
}
.tool-option:hover { border-color: var(--dark); background: rgba(10,31,68,.04); }
.tool-option.selected { border-color: var(--accent); background: rgba(244,194,13,.07); }
.tool-option input[type="radio"] { margin-top: .15rem; flex-shrink: 0; accent-color: var(--dark); }
.tool-option__text { font-size: .9375rem; line-height: 1.45; color: var(--slate-700); font-family: var(--font-sans); }
.tool-nav { display: flex; gap: .75rem; margin-top: 1.5rem; }
.tool-btn {
  background: var(--dark); color: #fff; border: none;
  padding: .65rem 1.4rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  font-family: var(--font-sans); transition: opacity .15s;
}
.tool-btn:hover { opacity: .82; }
.tool-btn:disabled { opacity: .4; cursor: not-allowed; }
.tool-btn--next { background: var(--dark); color: #fff; }
.tool-btn--reset {
  background: none; color: var(--text-muted); border: 1px solid var(--slate-300);
  padding: .55rem 1rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; cursor: pointer;
  font-family: var(--font-sans); transition: all .15s;
}
.tool-btn--reset:hover { border-color: var(--slate-600); color: var(--text); }
.tool-revenue-input {
  width: 100%; max-width: 320px; display: block;
  padding: .65rem .9rem; border: 1px solid var(--slate-300);
  border-radius: var(--radius); font-size: 1rem; font-family: var(--font-sans);
  margin-bottom: 1.25rem; background: var(--bg);
}
.tool-revenue-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Tool results */
.tool-result {
  border-radius: var(--radius);
  padding: 1.75rem;
  border-left: 4px solid var(--slate-300);
}
.tool-result--amber { border-color: var(--amber-500); background: rgba(245,158,11,.08); }
.tool-result--red   { border-color: var(--red-600);   background: #fef2f2; }
.tool-result--green { border-color: var(--green-600); background: #f0fdf4; }
.tool-result--sky   { border-color: var(--blue-light); background: rgba(143,178,255,.1); }
.tool-result--slate { border-color: var(--slate-300); background: var(--slate-50); }
.tool-result__icon { font-size: 2rem; margin-bottom: .5rem; }
.tool-result__title { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--dark); margin-bottom: .5rem; }
.tool-result__deadline { font-size: .875rem; color: var(--text-muted); margin-bottom: .75rem; font-family: var(--font-sans); }
.tool-result__desc { font-size: .9375rem; color: var(--slate-700); margin-bottom: 1rem; line-height: 1.6; }
.tool-result__extra { margin: .75rem 0; font-size: .9rem; }
.tool-result__fine { text-align: center; padding: 1rem; }
.tool-result__fine-amount { font-size: 2.25rem; font-weight: 800; color: var(--red-600); font-family: var(--font-serif); }
.tool-result__fine-label { font-size: .875rem; color: var(--text-muted); margin-top: .25rem; font-family: var(--font-sans); }
.tool-result__countdown { display: inline-block; margin: .5rem 0; font-weight: 700; }
.tool-result__actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---- Compliance Checklist Tool (Tool 7) ---- */
.cl-progress-header { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 6px; padding: .875rem 1rem; margin-bottom: 1.25rem; }
.cl-progress-label { font-size: .875rem; font-weight: 600; color: var(--dark); font-family: var(--font-sans); margin-bottom: .5rem; }
.cl-progress-bar { height: 8px; background: var(--slate-200); border-radius: 4px; overflow: hidden; }
.cl-progress-fill { height: 100%; width: 0; border-radius: 4px; transition: width .4s ease, background .4s ease; background: var(--red-600); }
.cl-group { margin-bottom: 1.5rem; }
.cl-group-title { font-family: var(--font-sans); font-size: .875rem; font-weight: 700; color: var(--dark); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--slate-200); padding-bottom: .4rem; margin-bottom: .75rem; }
.cl-item { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .6rem; border-radius: 4px; cursor: pointer; transition: background .15s; font-family: var(--font-sans); font-size: .9rem; line-height: 1.45; color: var(--slate-700); border: 1px solid transparent; }
.cl-item:hover { background: rgba(10,31,68,.04); border-color: var(--slate-200); }
.cl-item--checked { background: #f0fdf4; border-color: rgba(22,163,74,.25); }
.cl-item--checked .cl-item-text { text-decoration: line-through; color: var(--text-muted); }
.cl-checkbox { flex-shrink: 0; margin-top: .15rem; width: 16px; height: 16px; accent-color: var(--green-600); cursor: pointer; }
.cl-item-text { flex: 1; }
.cl-result-bar { height: 10px; background: var(--slate-200); border-radius: 5px; overflow: hidden; margin: .75rem 0 1rem; }
.cl-result-fill { height: 100%; border-radius: 5px; transition: width .5s ease; }
.cl-result-gaps { background: #fff7f0; border: 1px solid #f97316; border-radius: 6px; padding: .875rem 1rem; margin: .75rem 0 1rem; }
.cl-result-gaps-title { font-size: .875rem; font-weight: 700; color: #c2410c; margin-bottom: .5rem; font-family: var(--font-sans); }
.cl-result-gaps-list { margin: 0 0 0 1.25rem; padding: 0; font-size: .8375rem; color: var(--slate-700); line-height: 1.5; }
.cl-result-gaps-list li { margin-bottom: .25rem; }
.cl-email-gate { background: var(--dark); border-radius: 8px; padding: 1.25rem 1.25rem 1rem; margin-top: 1.25rem; }
.cl-email-gate-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.cl-email-gate .lead-cta__input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.cl-email-gate .lead-cta__input::placeholder { color: rgba(255,255,255,.55); }
.cl-email-gate .lead-cta__note { color: rgba(255,255,255,.6); }
.tool-callout { background: rgba(244,194,13,.12); border-left: 3px solid var(--accent); border-radius: 4px; padding: .875rem 1rem; margin: 1.25rem 0; font-family: var(--font-sans); font-size: .9375rem; }
.tool-callout a { color: var(--dark); font-weight: 600; }

/* ---- Pricing Grid (Academy) ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.pricing-card {
  background: #fff;
  border: 2px solid var(--slate-200);
  border-radius: 8px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.pricing-card:hover { box-shadow: var(--shadow-md); }
.pricing-card--featured {
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(10,31,68,.1);
}
.pricing-card__badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: .25em .75em;
  border-radius: 99px;
  background: var(--slate-100);
  color: var(--text-muted);
  margin-bottom: 1rem;
  align-self: flex-start;
  font-family: var(--font-sans);
}
.pricing-card__badge--pro { background: rgba(10,31,68,.1); color: var(--dark); }
.pricing-card__badge--bundle { background: rgba(244,194,13,.18); color: #7a5c00; }
.pricing-card__price {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1;
  margin-bottom: .35rem;
}
.pricing-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
}
.pricing-card__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}
.pricing-card__features li {
  font-size: .9rem;
  color: var(--text-muted);
  padding: .35rem 0;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-family: var(--font-sans);
}
.pricing-card__features li::before {
  content: '✓';
  color: var(--green-600);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .05rem;
}
.pricing-card__cta { margin-top: auto; }

/* ═════════════════════════════════════════════════════════════════════════
   ACADEMY
   ─────────────────────────────────────────────────────────────────────────
   The hub used to be one 820px white column with the whole offer poured into
   it as markdown: a three-card "pricing" grid comparing a free course, a
   spreadsheet bundle and a product that is not on sale, a five-column
   comparison table crammed into the reading measure, and the four role tracks
   — 28 modules of real content with pages of their own — hidden inside a
   bullet list in the third card.

   The layout below is a full-bleed grid with one content track. Prose is
   capped at a reading measure and centred inside that track; a card grid, a
   table or a section band opts out of the cap and takes the whole track, and a
   band goes edge to edge. One wrapper can then hold both an argument and an
   offer without the offer being squeezed into 68 characters.

   The vocabulary is the site's own: mono for every figure and citation,
   Spectral for headings, status colour used semantically ("free" is not the
   same green as "in preparation" is blue). Nothing here invents a second
   design system.
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- Hero ------------------------------------------------------------- */

.page-hero--academy { padding: 3.25rem 1.5rem 3.75rem; }

.acad-hero__inner {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem;
  align-items: center;
}
/* Locales that declare no `tracks` render no panel; without this the lead
   column would sit in a two-column grid with an empty half beside it. */
.acad-hero__inner--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.acad-hero__lead { min-width: 0; }
.acad-hero h1 { max-width: none; margin: .35rem 0 0; }
.acad-hero__title-tail {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-sans);
  font-size: .36em;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(190,208,255,.78);
}
.acad-hero__sub {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,.8);
}
.acad-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.acad-hero__trust {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}
.acad-hero__trust li {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(200,214,250,.72);
}
.acad-hero__trust li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  margin-right: .4rem;
}

/* The register. Five rows of "what it is / how big it is / can you have it
   yet", in mono, because the numbers are the argument. Each row is a link:
   the track pages were reachable from one bullet list and nowhere else. */
.acad-panel {
  background: rgba(6,12,26,.55);
  border: 1px solid rgba(150,180,255,.2);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.15rem 1rem;
}
.acad-panel__title {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}
.acad-panel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem 1rem;
  padding: .6rem .45rem;
  margin: 0 -.45rem;
  border-top: 1px solid rgba(150,180,255,.13);
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  transition: background .16s;
}
.acad-panel__row:hover,
.acad-panel__row:focus-visible { background: rgba(150,180,255,.09); text-decoration: none; }
.acad-panel__name {
  display: block;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.acad-panel__spec {
  display: block;
  margin-top: .18rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .01em;
  color: rgba(185,205,255,.7);
}
.acad-panel__tag {
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3em .6em;
  border-radius: 99px;
  white-space: nowrap;
}
.acad-panel__tag--free { background: rgba(61,220,132,.16); color: #74e8ad; }
.acad-panel__tag--soon { background: rgba(150,180,255,.13); color: #b3c7ff; }
.acad-panel__foot {
  margin: .85rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid rgba(150,180,255,.18);
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(185,205,255,.72);
}
.acad-panel__foot b { color: #fff; font-weight: 600; }

@media (max-width: 940px) {
  .acad-hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .acad-hero__sub { max-width: none; }
}
/* .page-hero--academy outranks the generic .page-hero mobile padding further
   down the file, so it has to restate it rather than inherit it. */
@media (max-width: 520px) {
  .page-hero--academy { padding: 2.5rem 1.1rem 2.75rem; }
  .acad-hero__ctas .btn { width: 100%; text-align: center; }
}

/* ---- Body: full-bleed grid -------------------------------------------- */

.academy-body {
  background: var(--surface);
  padding: 3.25rem 0 var(--s-4);
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [wide-start] minmax(0, 1160px) [wide-end]
    minmax(1.25rem, 1fr) [full-end];
  row-gap: 0;
}
/* One column, three widths, and no second breakpoint to keep in step: prose is
   capped and centred inside the wide track rather than given a track of its
   own. Three competing max-width tracks squeeze the middle one first, which put
   the reading column at 440px on a 900px viewport with 190px of white either
   side of it — worse than the single column it replaced. */
.academy-body > * {
  grid-column: wide;
  /* `width: 100%`, not auto: a grid item with auto margins is sized to
     fit-content, not stretched, so a short block (the module/article map) shrank
     to its own text and sat indented next to the prose it belongs with. */
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  min-width: 0;
}
.academy-body > *:first-child { margin-top: 0; }
.academy-body > h2 { margin-top: 3.25rem; }
.academy-body > h3 { margin-top: 2rem; }
.academy-body > p { color: var(--text-muted); }
.academy-body > p strong { color: var(--text); }
.academy-body > hr {
  max-width: none;
  margin: 3rem 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
.academy-body > .acad-wide,
.academy-body > .pricing-grid,
.academy-body > .track-grid,
.academy-body > .tkit-grid,
.academy-body > .acad-steps,
.academy-body > .acad-feature,
.academy-body > .acad-aud,
.academy-body > .acad-head,
.academy-body > .xprev { max-width: none; }
.academy-body > .acad-band {
  grid-column: full;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.academy-body > .acad-band:last-child { margin-bottom: calc(-1 * var(--s-4)); }
.academy-body > .pricing-grid { margin-top: 1.75rem; }

/* Section headings sit over a wide grid, so they are centred like the
   homepage's .section__title — a left-aligned heading over a centred grid
   reads as an indent. The accent rule moves to the centre with the text. */
.academy-body > .acad-head { margin-top: 3.5rem; text-align: center; }
.acad-head h2 { margin-top: 0; }
.acad-head h2::before { left: 50%; transform: translateX(-50%); }
.acad-head p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--text-muted);
}

/* ---- Steps ------------------------------------------------------------ */

.acad-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: acad-step;
}
.acad-step {
  position: relative;
  margin: 0;
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--slate-50);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.acad-step::before {
  counter-increment: acad-step;
  content: '0' counter(acad-step);
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: .5rem;
}
.acad-step__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .35rem;
}
.acad-step p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted); }

/* ---- Feature block (the free course) ---------------------------------- */

.acad-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  margin: 1.75rem 0 0;
  padding: 2rem;
  background: linear-gradient(150deg, var(--darker) 0%, var(--dark) 100%);
  border-radius: var(--radius-lg);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.acad-feature::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(244,194,13,.2) 45%, transparent 80%);
}
.acad-feature__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3em .7em;
  border-radius: 99px;
  background: rgba(61,220,132,.16);
  color: #74e8ad;
  margin-bottom: .9rem;
}
.acad-feature__price {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.acad-feature__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: .5rem 0 .5rem;
  line-height: 1.25;
}
.acad-feature p { color: rgba(200,214,250,.82); font-size: .9375rem; line-height: 1.65; margin-bottom: 1rem; }
.acad-feature__meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: rgba(185,205,255,.72);
  margin-bottom: 1.25rem;
}
.acad-feature__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.acad-feature__note { font-size: .75rem; color: rgba(185,205,255,.6); margin: .9rem 0 0; }

/* The five modules, as a numbered register rather than a bullet list. */
.acad-modules { list-style: none; margin: 0; padding: 0; counter-reset: acad-mod; }
.acad-modules li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  padding: .6rem 0;
  border-top: 1px solid rgba(150,180,255,.14);
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.4;
  color: rgba(230,238,255,.92);
}
.acad-modules li:first-child { border-top: 0; padding-top: 0; }
.acad-modules li::before {
  counter-increment: acad-mod;
  content: counter(acad-mod, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--accent);
}
.acad-modules cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .7rem;
  color: rgba(185,205,255,.7);
  white-space: nowrap;
}

@media (max-width: 780px) {
  .acad-feature { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1.25rem; }
  .acad-modules cite { display: none; }
}

/* ---- Role certification tracks ---------------------------------------- */

.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 0;
}
.track-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  border-top: 3px solid var(--dark);
  transition: box-shadow .2s, transform .2s;
}
.track-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.track-card--deployer { border-top-color: var(--secondary); }
.track-card--provider { border-top-color: var(--accent); }
.track-card--gpai     { border-top-color: var(--st-defer); }
.track-card--compliance { border-top-color: var(--st-live); }
.track-card__role {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .55rem;
}
.track-card__title {
  margin: 0 0 .5rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}
.track-card__desc {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 1rem;
  flex: 1;
}
.track-card__specs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .75rem;
  padding: .6rem 0;
  border-top: 1px solid var(--slate-100);
  border-bottom: 1px solid var(--slate-100);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--slate-700);
}
.track-card__specs b { color: var(--dark); font-weight: 600; }
.track-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .9rem;
}
.track-card__link {
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue-500);
}
.status-pill {
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3em .6em;
  border-radius: 99px;
  white-space: nowrap;
}
.status-pill--free { background: var(--st-live-bg); color: var(--st-live); }
.status-pill--soon { background: var(--st-defer-bg); color: var(--st-defer); }

/* ---- Toolkits --------------------------------------------------------- */

.tkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 0;
}
.tkit-card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  background: var(--slate-50);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.tkit-card__art {
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}
.tkit-card__title {
  margin: 0 0 .4rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
}
/* `flex: 1` belongs to the description alone. On `.tkit-card p` it also caught
   the article label, so two growing items split the free space and the card
   with the shortest description pushed its own title 28px down the box. */
.tkit-card p { font-size: .8625rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 1rem; }
.tkit-card__desc { flex: 1; }
.tkit-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--slate-200);
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--dark);
}
.tkit-card__foot a { font-family: var(--font-sans); font-weight: 600; font-size: .8125rem; }

/* ---- Audience --------------------------------------------------------- */

.acad-aud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 0;
}
.acad-aud .audience-card { background: var(--slate-50); }
.acad-aud .audience-card p:last-child { margin-bottom: 0; }
.acad-aud .audience-card a { font-weight: 600; }

/* ---- Full-bleed bands inside the body --------------------------------- */

.acad-band { padding: 3.25rem 1.5rem; margin-top: 3.5rem; }
.acad-band--grey { background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.acad-band--dark { background: linear-gradient(150deg, var(--darker) 0%, var(--dark) 100%); color: #fff; }
.acad-band__inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.acad-band__inner > p { max-width: 68ch; margin-left: auto; margin-right: auto; }
.acad-band h2 { margin-top: 0; }
.acad-band h2::before { left: 50%; transform: translateX(-50%); }
.acad-band > .acad-band__inner > h3 { margin-top: 1.75rem; }
.acad-band .tkit-card,
.acad-band .acad-formats li { text-align: left; }
.acad-band__inner--narrow { max-width: 780px; }
.acad-band--dark h2 { color: #fff; }
.acad-band--dark h2::before { background: var(--accent); }
.acad-band--dark p { color: rgba(200,214,250,.82); }
.acad-band + .acad-band { margin-top: 0; }

/* Corporate formats: three columns of what is actually delivered. */
.acad-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.acad-formats li {
  margin: 0;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.acad-formats b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: .3rem;
}
.acad-formats span { display: block; font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
.acad-formats em {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .72rem;
  color: var(--slate-600);
}

/* ---- Module → article map --------------------------------------------- */

.acad-map { list-style: none; margin: 1.5rem auto 1.75rem; padding: 0; }
.acad-map li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: .55rem 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: .9rem;
  color: var(--text);
}
.acad-map cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: .76rem;
  color: var(--blue-500);
  text-align: right;
}

/* ---- Exam call to action (template-rendered) -------------------------- */

.acad-exam { padding: 4rem 1.5rem; background: linear-gradient(150deg, var(--darker) 0%, var(--dark) 100%); }
.acad-exam__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.acad-exam h2 { color: #fff; margin-top: 0; }
.acad-exam p { color: rgba(200,214,250,.82); font-size: .9375rem; line-height: 1.7; }
.acad-exam__actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin-top: 1.5rem; }
.acad-exam__actions a:not(.btn) { color: var(--accent); font-weight: 600; font-size: .875rem; }
.acad-exam__facts { list-style: none; margin: 0; padding: 0; }
.acad-exam__facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  margin: 0;
  padding: .7rem 0;
  border-top: 1px solid rgba(150,180,255,.16);
  color: rgba(210,222,255,.85);
  font-family: var(--font-sans);
  font-size: .8375rem;
  line-height: 1.5;
}
.acad-exam__facts li:first-child { border-top: 0; padding-top: 0; }
.acad-exam__facts b {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 3.5ch;
}

@media (max-width: 860px) {
  .acad-exam__inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---- FAQ band --------------------------------------------------------- */

.academy-faq { background: var(--bg); padding: 3.5rem 1.5rem; border-top: 1px solid var(--rule); }
.academy-faq__inner { max-width: 820px; margin: 0 auto; }
.academy-faq__inner .faq-section { margin: 0; }
.academy-faq__inner .faq-section h2 { margin-top: 0; }

/* ---- Comparison table: readable below 700px --------------------------- */
/* The five-examination table has six columns. Reflowing it to cards on small
   screens beats a horizontal scrollbar nobody finds: each row becomes a block
   whose cells carry their column name in a data attribute. */

@media (max-width: 700px) {
  .xprev__table, .xprev__table tbody, .xprev__table tr, .xprev__table td, .xprev__table th { display: block; }
  .xprev__table thead { display: none; }
  .xprev__table tr {
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    margin-bottom: .875rem;
    padding: .5rem .875rem .75rem;
    background: var(--surface);
  }
  .xprev__table tbody th { width: auto; padding: .5rem 0 .4rem; border: 0; font-size: 1rem; }
  .xprev__table td {
    padding: .3rem 0;
    border: 0;
    border-top: 1px solid var(--slate-100);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    font-size: .875rem;
  }
  .xprev__table tbody .xprev__this { background: none; }
  .xprev__table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .xprev__table td[data-label]:last-child { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---- Article lede ---- */
.article-lede { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 1.75rem; line-height: 1.65; }

/* ---- Utilities ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .risk-pyramid__inner { grid-template-columns: 1fr; gap: 2rem; }
  .home-hero__orbit { display: none; }
}

@media (max-width: 768px) {
  .nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 66px; left: 0; right: 0;
    background: rgba(7,12,28,.97);
    padding: 1rem 1.5rem;
    gap: .625rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    border-top: 1px solid rgba(150,180,255,.1);
  }
  .nav__links.open { display: flex; }
  .nav__menu-toggle { display: flex; }
  .nav__lang { display: none; }
  .crosslink-dora { flex-direction: column; }
  .lead-cta__form { flex-direction: column; }
  .footer__inner { grid-template-columns: 1fr; }
  .home-hero__stats { flex-direction: column; }
  .home-hero__stat { border-right: none; border-bottom: 1px solid rgba(150,180,255,.12); margin-right: 0; padding-bottom: 1rem; margin-bottom: .5rem; }
  .newsletter-form { flex-direction: column; }
}

@media (max-width: 720px) {
  /* The bar is fixed, so the last footer row — copyright, Privacy, and the
     Cookies link that withdraws consent — would sit underneath it. */
  body.has-sticky-cta .footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .course-sticky {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 800;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--dark);
    border-top: 1px solid rgba(150,180,255,.18);
    box-shadow: 0 -6px 24px rgba(0,0,0,.22);
  }
  .course-sticky__note {
    font-family: var(--font-mono);
    font-size: .7rem;
    color: rgba(255,255,255,.75);
    line-height: 1.3;
  }
  .course-sticky__btn {
    flex-shrink: 0;
    background: var(--accent);
    color: var(--dark);
    font-weight: 700;
    font-size: .875rem;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
  }
  .course-sticky__btn:hover, .course-sticky__btn:focus { text-decoration: none; opacity: .9; }
  .course-cta__actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .page-hero { padding: 2.5rem 1rem 3rem; }
  .content-layout { padding: 1.5rem 1rem; }
  .utility-strip { display: none; }
  .lead-cta__form--inline { flex-direction: column; }
}

/* ---- Related pages (contextual internal links) ---- */
.related { margin: 3rem 0; }
.related__title { margin-top: 0; font-size: 1.25rem; }
.related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .5rem;
}
.related__list li {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: #fff;
}
.related__list a {
  display: block;
  padding: .75rem 1rem;
  font-size: .9375rem;
  line-height: 1.45;
  text-decoration: none;
  color: var(--slate-900);
}
.related__list a:hover { background: var(--slate-50); text-decoration: none; box-shadow: inset 3px 0 0 var(--accent); }


/* ---- Accessibility floor ---- */
:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.page-hero :focus-visible, .nav :focus-visible, footer :focus-visible { outline-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Certification exam + certificate verification ─────────────────────────
   Added with the exam engine. The paper is graded server-side, so nothing here
   can leak an answer — these are presentation styles only. */
.tool-label {
  display: block; font-size: .8125rem; font-weight: 700; color: var(--text);
  margin: 1rem 0 .35rem; letter-spacing: .01em;
}
.tool-input {
  width: 100%; max-width: 420px; display: block;
  padding: .65rem .9rem; border: 1px solid var(--slate-300);
  border-radius: var(--radius); font-family: var(--font-sans); font-size: .9375rem;
  background: #fff; color: var(--text);
}
.tool-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.tool-error {
  margin: .75rem 0 0; padding: .6rem .85rem; border-radius: var(--radius);
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: .875rem;
}

.exam-q {
  border: 1px solid var(--slate-300); border-radius: var(--radius-lg);
  padding: 1rem 1.15rem; margin: 1.1rem 0; background: #fff;
}
.exam-q legend {
  font-weight: 700; font-size: .9375rem; color: var(--text);
  padding: 0 .4rem; line-height: 1.45;
}
.exam-opt {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .5rem .2rem; font-size: .9125rem; line-height: 1.5;
  color: var(--text); cursor: pointer;
}
.exam-opt input { margin-top: .28rem; flex: 0 0 auto; }
.exam-opt:hover { color: var(--primary); }

.tool-result.is-pass { border-left: 4px solid var(--green, #15803d); }
.tool-result.is-fail { border-left: 4px solid #b91c1c; }
.exam-cert {
  margin: .9rem 0; padding: .8rem 1rem; border-radius: var(--radius);
  background: var(--blue-light, #eff6ff); font-size: .9375rem;
}
.exam-review { margin: .6rem 0 0; padding-left: 1.2rem; }
.exam-review li { margin: .5rem 0; font-size: .875rem; line-height: 1.55; color: var(--text-muted); }
.exam-review li.ok { color: var(--green, #15803d); }
.exam-review li.ko { color: #b91c1c; }

/* ── Amendment status ──────────────────────────────────────────────────────
   Sits at the top of every article page and answers, in one line, whether
   Regulation (EU) 2026/1744 moved this article. The "no" state is styled as
   deliberately as the "yes": a page that stays silent on the question sends
   the reader elsewhere to check, which is the behaviour the query logs show.
   Reuses the deadline table's semantic palette — deferred keeps its own hue,
   because a moved date is the news. */
.amend {
  margin: 0 0 1.75rem;
  padding: .875rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--st-live);
  border-radius: 3px;
  font-size: .875rem;
  line-height: 1.55;
}
.amend:has(.amend__head--yes) { border-left-color: var(--st-defer); }
.amend__head { margin: 0; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.amend__head strong { font-weight: 700; }
.amend__head--yes strong { color: var(--st-defer); }
.amend__head--no  strong { color: var(--st-live); }
.amend__dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--st-live); flex: none; align-self: center;
}
.amend__head--yes .amend__dot { background: var(--st-defer); }
.amend__act { color: var(--text-muted); font-size: .8125rem; }
.amend__list { list-style: none; margin: .625rem 0 0; padding: 0; display: grid; gap: .5rem; }
.amend__list li {
  display: grid; gap: .1rem .75rem;
  padding-left: .875rem;
  border-left: 2px solid var(--st-defer-bg);
}
.amend__scope { color: var(--text); }
.amend__dates { font-family: var(--font-mono, ui-monospace, monospace); font-size: .8125rem; }
.amend__dates s { color: var(--text-muted); opacity: .7; margin-right: .4rem; }
.amend__dates strong { color: var(--st-defer); }
.amend__basis { color: var(--text-muted); font-size: .75rem; letter-spacing: .02em; }
.amend__meta {
  margin: .625rem 0 0; padding-top: .5rem;
  border-top: 1px dotted var(--rule);
  color: var(--text-muted); font-size: .75rem;
}
.amend__meta a, .amend__head a { color: inherit; text-underline-offset: 2px; }
.amend__head a { color: var(--st-defer); }
@media (min-width: 40rem) {
  .amend__list li { grid-template-columns: 1fr auto; align-items: baseline; }
  .amend__basis { grid-column: 1 / -1; }
}

/* ── Certificate ───────────────────────────────────────────────────────────
   The sheet is A4 landscape at print size and fluid on screen. It is a real
   artefact: it gets printed, screenshotted and attached to emails, so the
   "not a notified body" line is ON it rather than in a footnote elsewhere.  */

.cert { margin: .5rem 0; }

.cert__sheet {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg, 10px);
  padding: 2.75rem 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(10, 20, 40, .06), 0 12px 32px -18px rgba(10, 20, 40, .35);
}
.cert__rule {
  position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
  background: linear-gradient(90deg, var(--dark) 0%, var(--accent) 55%, var(--dark) 100%);
}
.cert__brand {
  margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.cert__kicker {
  margin: .2rem 0 1.6rem; font-size: .8125rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent-ink, #8a6d05); font-weight: 700;
}
.cert__intro { margin: 0; font-size: .9375rem; color: var(--text-muted); }
.cert__holder::before { content: none; }
.cert__holder {
  /* h2 carries a gold accent rule via ::before across the site. On the
     certificate sheet the holder's name is centred, so that rule floated loose
     to its left. Cancel it here rather than downgrade the element: this IS the
     heading of the artefact. */
  position: static;
  padding-top: 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15;
  margin: .35rem 0 .5rem; color: var(--text); font-weight: 700;
}
.cert__course {
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  margin: .35rem 0 1.6rem; color: var(--dark); font-weight: 600;
}
.cert__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem;
  margin: 0 0 1.5rem; padding: 1.1rem 0 0; border-top: 1px solid var(--rule);
}
.cert__meta div { min-width: 7rem; }
.cert__meta dt {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .2rem;
}
.cert__meta dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--text); }
.cert__meta code { font-size: .875rem; letter-spacing: .02em; }
.cert__verify { margin: 0 0 1rem; font-size: .8125rem; color: var(--text-muted); }
.cert__verify span { color: var(--text); font-weight: 600; }
.cert__disclaimer {
  max-width: 46rem; margin: 0 auto; font-size: .6875rem; line-height: 1.6;
  color: var(--text-muted);
}

.cert__actions { margin-top: 1.25rem; }

.cert-share {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  margin: .9rem 0 0;
}
.cert-share__li {
  display: inline-block; padding: .55rem 1rem; border-radius: var(--radius, 6px);
  background: #0a66c2; color: #fff; font-size: .875rem; font-weight: 600;
  text-decoration: none; border: 1px solid #0a66c2;
}
.cert-share__li:hover { background: #004182; border-color: #004182; color: #fff; }
.cert-share__alt {
  display: inline-block; padding: .55rem .9rem; border-radius: var(--radius, 6px);
  background: var(--surface); color: var(--text); font-size: .875rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--rule); cursor: pointer;
  font-family: inherit;
}
.cert-share__alt:hover { border-color: var(--dark); color: var(--dark); }

/* Printing: the sheet IS the page.
   Two mechanisms, because neither alone is enough. display:none collapses the
   site furniture so it leaves no blank first page; visibility then isolates the
   sheet from the page prose, which sits in an unnamed wrapper as a sibling of
   the widget and cannot be targeted by class. */
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  html, body { background: #fff; }

  .utility-strip, .nav, .footer, .consent, .page-hero, .page-hero__breadcrumbs,
  .faq-section, .crosslink-dora, .academy-upsell, .lead-cta, .cert__actions,
  .course-cta, .course-exam-bar, .course-sticky,
  .tool-help, .toc { display: none !important; }

  body * { visibility: hidden; }
  .cert__sheet, .cert__sheet * { visibility: visible; }
  .cert__sheet {
    position: absolute; left: 0; top: 0; width: 100%;
    margin: 0; border: 1px solid #333; box-shadow: none;
    padding: 14mm 12mm 10mm; break-inside: avoid;
  }

  .tool-widget { border: 0; box-shadow: none; padding: 0; margin: 0; min-height: 0; }
  .cert__rule { background: #0a1f44; }
  .cert__holder { font-size: 30pt; }
  .cert__course { font-size: 15pt; }
  .cert__disclaimer { font-size: 7pt; }
  a[href]::after { content: ""; }
}

/* ── Examination preview ───────────────────────────────────────────────────
   Shown on a certification track page so a reader can see, before buying,
   that the paid examination is not the free one. The paired samples do the
   work: same article, recall on one side, application on the other.        */

.xprev { margin: 2.5rem 0; }
.xprev__lede { color: var(--text-muted); font-size: .9375rem; }

.xprev__table {
  width: 100%; border-collapse: collapse; margin: 1.25rem 0 2rem;
  font-size: .9375rem;
}
.xprev__table th, .xprev__table td {
  padding: .6rem .75rem; border-bottom: 1px solid var(--rule); text-align: left;
  vertical-align: top;
}
/* .article-body table th paints a dark header bar site-wide. Work with it
   rather than against it: white text in the head, and reset the background on
   the row headers, which would otherwise be dark text on that same dark bar. */
.xprev__table thead th {
  background: var(--dark); color: rgba(255, 255, 255, .72);
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; white-space: normal;
}
.xprev__table thead .xprev__this {
  color: var(--accent); background: var(--darker);
}
.xprev__table tbody th {
  background: transparent; color: var(--text-muted);
  font-weight: 600; width: 30%; text-transform: none; letter-spacing: 0;
  font-size: .875rem; white-space: normal;
}
.xprev__table td { color: var(--text); }
.xprev__table tbody .xprev__this { background: rgba(244, 194, 13, .12); font-weight: 600; }

.xprev__q {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: var(--radius, 6px); padding: 1rem 1.15rem; margin: 1rem 0;
  background: var(--surface);
}
.xprev__q.is-paid { border-left-color: var(--accent); }
.xprev__from {
  margin: 0 0 .45rem; font-size: .6875rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 700;
}
.xprev__stem { margin: 0 0 .6rem; font-weight: 600; line-height: 1.5; }
.xprev__opts { margin: 0 0 .6rem 1.2rem; padding: 0; }
.xprev__opts li { margin: .25rem 0; font-size: .9125rem; color: var(--text-muted); }
.xprev__reveal summary {
  cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--dark);
  padding: .25rem 0;
}
.xprev__reveal[open] summary { margin-bottom: .4rem; }
.xprev__reveal p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-muted); }
.xprev__note {
  max-width: 74ch;
  margin: 1.25rem auto 0;
  font-size: .8125rem; line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 640px) {
  .xprev__table { font-size: .875rem; }
  .xprev__table th, .xprev__table td { padding: .5rem .4rem; }
  .xprev__table tbody th { width: auto; }
}