/* =========================================================================
   HappyMatch — /handleiding (PGR-351) — v2 vormgeving
   Wat er veranderde t.o.v. v1:
   1. Hiërarchie: hero is geen kaart meer maar een paginakop met metaregel;
      index is een kaart met eigen kop; secties zijn genummerde kaarten met
      een sticky sectiekop.
   2. Typografie: één schaal (30 / 18 / 14.5 / 12.5 / 11.5) en drie gewichten
      (500 body, 700 nadruk, 800 koppen). Geen 13.5/14/19 door elkaar heen.
   3. Ritme: spacing uit één reeks (8 / 12 / 20 / 30 / 32).
   4. Vragenindex: groepen in cellen met nummer + aantal, plus een zoekveld.
   5. Vragen: hele rij is hover-target, chevron in een rondje (huisstijl is rond),
      open antwoord hangt aan een verticale rail — daardoor leest de lijst als lijst.
   6. Feedback: teruggebracht tot twee icoonknoppen rechts onder het antwoord,
      op 65% dekking tot je er met de muis of het toetsenbord komt.
   Alleen deze pagina laadt dit bestand; styles.css blijft gedeeld.
   Alles via tokens uit styles.css — het dark-blok daar schakelt dus mee.
   Radii volgen het systeem: --radius-xl voor kaarten, --radius-md binnenin,
   999px voor pillen. Randen op formuliervelden 1.5px, zoals .field__input.
   ========================================================================= */

.container--handleiding {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 32px;

  /* Inline-SVG als masker voor .hl-link--app; geen los bestand voor 9 pixels. */
  --hl-extern-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}

/* Sticky topbar is 60px — anchors moeten daaronder uitkomen. Een vraag moet
   bovendien onder de sticky sectiekop (~57px) uitkomen, anders landt de sprong uit
   de vragenindex half achter die kop. */
.hl-section { scroll-margin-top: 80px; }
.hl-q { scroll-margin-top: 132px; }

/* ── Paginakop ───────────────────────────────────────────────────────────── */
/* Geen .card: de kop hoort tot de pagina, niet tot de inhoud. */
.hl-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  animation: none;
}
.hl-hero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.hl-hero__eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-dark);
  margin: 0 0 10px;
}
.hl-hero h1 {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
}
.hl-hero p {
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 10px 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.hl-hero__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hl-hero__actions .btn { display: inline-flex; align-items: center; gap: 7px; }

/* Metaregel — versie, datum, omvang. Geeft de kop gewicht zonder extra tekst. */
.hl-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}
.hl-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border-strong);
  vertical-align: 3px;
  margin-right: 14px;
}

/* ── Vragenindex ─────────────────────────────────────────────────────────── */
.hl-index { padding: 0; overflow: hidden; }
.hl-index__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 30px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.hl-index__title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text);
  margin: 0;
}
.hl-index__zoek { position: relative; flex: 0 1 300px; }
.hl-index__zoek svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-soft);
  pointer-events: none;
}
.hl-index__zoek input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 7px 14px 7px 34px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.hl-index__zoek input:hover { border-color: var(--color-border-strong); }
.hl-index__zoek input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
/* Kolommen i.p.v. een grid: groepen verschillen sterk in hoogte (een sectie met
   drie vragen naast één met tien), en CSS-columns balanceren dat zelf uit. Een grid
   met vaste tracks laat bij zulke verschillen halve rijen als lege vakken achter.
   De volgorde blijft 01→05, kolom voor kolom — dezelfde leesrichting als de print. */
.hl-index__grid {
  columns: 2 270px;
  column-gap: 60px;
  column-rule: 1px solid var(--color-border);
  padding: 22px 30px 4px;
}
.hl-index__group {
  break-inside: avoid;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}
.hl-index__group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.hl-index__group-nr {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.hl-index__group-title {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text);
  margin: 0;
}
.hl-index__group-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-soft);
}
.hl-index__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hl-index__group a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 4px 6px;
  margin: 0 -6px 2px;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.hl-index__group a::before {
  content: "—";
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-border-strong);
}
.hl-index__group a:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-softer);
}
.hl-index__group a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* Zoekfilter: JS zet .is-verborgen. */
.hl-index__group.is-verborgen,
.hl-index__group li.is-verborgen,
.hl-section.is-verborgen,
.hl-subkop.is-verborgen,
.hl-q.is-verborgen { display: none; }

.hl-geen {
  padding: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-soft);
  border: 1px dashed var(--color-border-dashed);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

/* ── Sectie ──────────────────────────────────────────────────────────────── */
.hl-section { padding: 0 30px 10px; }
/* Sticky sectiekop: bij 40 vragen weet je zo altijd waar je bent. */
.hl-section__head {
  position: sticky;
  top: 60px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -30px;
  padding: 18px 30px 14px;
  /* 97% en niet 92%: bij 92% bleef de tekst die eronder doorschoof leesbaar
     doorschemeren naast de sectietitel. */
  background: color-mix(in oklab, var(--color-surface) 97%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.hl-section__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hl-section__nr {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hl-section__head h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0;
}
/* Aantal vragen in de sectiekop: bij 10 subvragen wil je dat vooraf weten. */
.hl-section__count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-soft);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  font-variant-numeric: tabular-nums;
}

/* Subkop binnen een sectie — knipt 9-10 vragen in clusters van 3-4.
   Komt uit een h4 (####) in de markdown; zie services/handleiding.py. */
.hl-subkop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 2px;
  padding-top: 4px;
}
.hl-subkop__label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.hl-subkop::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
/* De subkop-streep is al een scheiding; de rij eronder hoeft er geen tweede bij. */
.hl-subkop + .hl-q { border-top: none; }

.hl-section__top {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-text-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 999px;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.hl-section__top:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-softer);
}

/* ── Bodytekst ───────────────────────────────────────────────────────────── */
.hl-prose {
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--color-text-muted);
}
.hl-prose > *:first-child { margin-top: 0; }
.hl-prose > *:last-child { margin-bottom: 0; }
.hl-prose p { margin: 0 0 12px; max-width: 72ch; text-wrap: pretty; }
.hl-prose strong { color: var(--color-text); font-weight: 800; }
.hl-prose em { font-style: italic; }
.hl-prose a {
  color: var(--color-primary-darker);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-soft);
}
.hl-prose a:hover { border-bottom-color: var(--color-primary); }
/* Verwijzing naar een app-pagina: opent in een nieuwe tab, dus dat mag je zien. */
.hl-prose a.hl-link--app::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  vertical-align: 1px;
  background: currentColor;
  opacity: 0.7;
  /* pijl-uit-vierkant, als masker zodat hij de linkkleur volgt */
  -webkit-mask: var(--hl-extern-icoon) center / contain no-repeat;
  mask: var(--hl-extern-icoon) center / contain no-repeat;
}
/* Actie in de tekst (Feedback, sjabloonscherm) — een knop die als link leest:
   er hoort geen navigatie bij, dus geen href en dus geen <a>. */
.hl-prose .hl-actie {
  font: inherit;
  color: var(--color-primary-darker);
  font-weight: 700;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-primary-soft);
  padding: 0;
  cursor: pointer;
}
.hl-prose .hl-actie:hover { border-bottom-color: var(--color-primary); }
.hl-prose .hl-actie:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hl-prose code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--color-text);
}
/* Sectie-intro staat buiten de vragen en mag iets rustiger. */
.hl-section > .hl-prose { margin-top: 18px; font-size: 14px; }
/* Sectie-intro's die uit één alinea bestaan (§0, §5, §6) hingen los tussen de
   sectiekop en de vragenlijst: te klein en te grijs om bij de kop te horen, te ver
   weg om bij de lijst te horen. Als lead behandelen — dichter tegen de kop aan,
   groter en in de tekstkleur — zodat hij de sectie inleidt in plaats van zweeft. */
.hl-section > .hl-prose:has(> p:only-child) { margin-top: 10px; }
.hl-section > .hl-prose > p:only-child {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 68ch;
  margin-bottom: 0;
}

.hl-prose .hl-list { margin: 0 0 14px; padding-left: 0; max-width: 72ch; list-style: none; }
.hl-prose .hl-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  line-height: 1.6;
}
/* Genummerde stappen krijgen een eigen bolletje: leest als stap, niet als tekst. */
.hl-prose ol.hl-list { counter-reset: hlstap; }
.hl-prose ol.hl-list li { counter-increment: hlstap; }
.hl-prose ol.hl-list li::before {
  content: counter(hlstap);
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-softer);
  border: 1px solid var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hl-prose ul.hl-list li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

/* Let op-kader — oranje accent uit de huisstijl. */
.hl-note {
  margin: 0 0 14px;
  padding: 13px 18px;
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 72ch;
}
/* Geen "Let op"-label via ::before: het kader in de content heeft zijn eigen,
   specifiekere kop ("⚠ Let op bij filteren"). Een generiek label erboven zou die
   verdubbelen. De eerste alinea draagt de kop. */
.hl-note p { margin-bottom: 8px; font-size: 13.5px; line-height: 1.6; }
.hl-note p:first-child strong { color: var(--color-accent-dark); }
.hl-note p:last-child { margin-bottom: 0; }

/* Tabellen. */
.hl-tablewrap {
  overflow-x: auto;
  margin: 0 0 14px;
  max-width: 72ch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hl-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.hl-table th,
.hl-table td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.55;
}
.hl-table thead th {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border-strong);
}
.hl-table tbody th,
.hl-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface-alt);
  white-space: normal;
}
.hl-table tbody tr:last-child td,
.hl-table tbody tr:last-child th { border-bottom: none; }

/* ── Vraag (details) ─────────────────────────────────────────────────────── */
.hl-questions { margin-top: 20px; display: flex; flex-direction: column; }
.hl-q { border-top: 1px solid var(--color-border); border-bottom: none; }
.hl-q__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 10px;
  margin: 0 -10px;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.hl-q__summary::-webkit-details-marker { display: none; }
.hl-q__summary:hover { background: var(--color-surface-alt); }
/* Vraagnummer binnen de sectie — "waar zit ik in de tien" zonder teller. */
.hl-q__nr {
  flex-shrink: 0;
  width: 20px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}
.hl-q[open] > .hl-q__summary > .hl-q__nr { color: var(--color-primary-dark); }
.hl-q__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Chevron in een rondje — de huisstijl is rond (avatars, iconknoppen, rank). */
.hl-q__chev {
  flex-shrink: 0;
  box-sizing: content-box;
  width: 11px;
  height: 11px;
  padding: 4px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  transition: transform 150ms ease, color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.hl-q__summary:hover .hl-q__chev { border-color: var(--color-border-strong); color: var(--color-text); }
.hl-q[open] > .hl-q__summary { color: var(--color-primary-darker); }
.hl-q[open] > .hl-q__summary > .hl-q__chev {
  transform: rotate(90deg);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}
/* Het antwoord hangt aan een rail onder de chevron — visueel ondergeschikt. */
/* De rail lijnt uit onder de chevron; met een vraagnummer ervoor schuift hij mee. */
.hl-q__body {
  padding: 2px 0 24px 32px;
  margin-left: 42px;
  border-left: 2px solid var(--color-primary-soft);
}
/* "Je bent hier" na een sprong uit de vragenindex — alleen de kop markeren. */
.hl-q:target > .hl-q__summary {
  color: var(--color-primary-darker);
  background: var(--color-primary-softer);
}

/* ── Feedback per vraag ──────────────────────────────────────────────────── */
/* Discreet: rechts uitgelijnd, halfdoorzichtig tot je hem nodig hebt. */
.hl-fb {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  max-width: 72ch;
  /* 0,8 en niet 0,65: op 0,65 zakte het label naar ~2,3:1 en dat is onder AA.
     Blijft discreet, blijft leesbaar; hover/focus brengt het volledig naar voren. */
  opacity: 0.8;
  transition: opacity 140ms ease;
  border-top: none;
  padding-top: 0;
}
.hl-fb:hover,
.hl-fb:focus-within { opacity: 1; }
.hl-fb__vraag { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.hl-fb__btns { display: flex; gap: 6px; }
.hl-fb__btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: inherit;
  color: var(--color-text-soft);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.hl-fb__btn:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.hl-fb__btn[data-oordeel="duidelijk"]:hover { color: var(--color-success); }
.hl-fb__btn[data-oordeel="onduidelijk"]:hover { color: var(--color-accent-dark); }
.hl-fb__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hl-fb__btn.is-selected {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-darker);
}
.hl-fb__btn[disabled] { cursor: default; opacity: 0.75; }
.hl-fb__btn-label { display: none; }
.hl-fb__dank { font-size: 11.5px; font-weight: 700; color: var(--color-success); }
.hl-fb__extra {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
  max-width: 72ch;
}
.hl-fb__tekst {
  flex: 1 1 320px;
  min-width: 220px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  resize: vertical;
}
.hl-fb__tekst:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
/* De Versturen-knop is .btn.btn--color-primary uit styles.css — alleen compacter. */
.hl-fb__send { padding: 8px 18px; font-size: 13px; }

@media (max-width: 768px) {
  .hl-hero__actions { width: 100%; }
  .hl-index__group { border-right: none; }
  .hl-index__head { padding: 16px 20px; }
  .hl-index__grid { columns: 1; padding: 20px 20px 4px; }
  .hl-section { padding: 0 20px 10px; }
  .hl-section__head { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .hl-q__body { padding-left: 22px; margin-left: 32px; }
}

/* =========================================================================
   Print — één bron, twee vormen. handleiding.js klapt alle vragen open in
   beforeprint; deze regels halen de app-chrome weg en houden secties heel.
   ========================================================================= */
@media print {
  @page { margin: 16mm 14mm; }

  html, body { background: #fff; }

  /* Vangnet voor printpaden zonder beforeprint-event (PDF-export via
     devtools/automation). */
  details.hl-q::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }

  .sidebar,
  .sidebar-overlay,
  .topbar,
  .footer,
  .feedback-fab,
  .bg-orb,
  .hl-hero__actions,
  .hl-index__zoek,
  .hl-index__group-count,
  .hl-fb,
  .hl-section__top,
  #toast,
  .uitleg-modal { display: none !important; }

  .app-shell, .shell-main { display: block; }
  .container--handleiding { max-width: none; padding: 0; gap: 0; display: block; }

  .card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    animation: none;
    background: transparent;
  }

  .hl-hero { margin-bottom: 12pt; gap: 8pt; }
  .hl-hero h1 { font-size: 20pt; }
  .hl-hero p { font-size: 10pt; }
  .hl-hero__eyebrow { font-size: 8pt; color: #444; }
  .hl-meta { font-size: 8.5pt; color: #444; border-top: 0.5pt solid #bbb; padding-top: 6pt; }

  .hl-index {
    margin-bottom: 18pt;
    padding-bottom: 10pt;
    border-bottom: 1pt solid #999;
    break-after: page;
  }
  .hl-index__head { background: transparent; border-bottom: 0.5pt solid #999; padding: 0 0 4pt; }
  .hl-index__title { font-size: 11pt; }
  .hl-index__grid { columns: 2; column-gap: 18pt; column-rule: none; padding: 8pt 0 0; }
  .hl-index__group { break-inside: avoid; margin-bottom: 10pt; padding: 0; border: none; }
  .hl-index__group a { color: #000; border: none; padding: 0; margin: 0; }
  .hl-index__group a::before { color: #999; }
  .hl-index__group-nr { color: #666; }

  .hl-section { break-before: auto; margin-bottom: 16pt; padding: 0; }
  .hl-section__head {
    position: static;
    margin: 0;
    padding: 0 0 3pt;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1pt solid #ccc;
    border-radius: 0;
    break-after: avoid;
  }
  .hl-section__head h2 { font-size: 13pt; }
  .hl-section__nr { background: transparent; border: 0.5pt solid #999; color: #000; width: 16pt; height: 16pt; }

  .hl-prose, .hl-prose p, .hl-prose li { font-size: 10pt; line-height: 1.5; color: #000; }
  .hl-prose a { color: #000; border: none; text-decoration: none; }
  .hl-prose p, .hl-prose li { orphans: 2; widows: 2; }
  .hl-prose ol.hl-list li::before { background: transparent; border: 0.5pt solid #666; color: #000; }
  .hl-prose ul.hl-list li::before { background: #666; }

  .hl-questions { border-top: none; margin-top: 8pt; }
  .hl-q {
    break-inside: avoid;
    border-top: none;
    border-bottom: none;
    margin-bottom: 9pt;
    background: transparent !important;
  }
  .hl-q__summary,
  .hl-q:target > .hl-q__summary {
    padding: 0 0 3pt;
    margin: 0;
    font-size: 11pt;
    break-after: avoid;
    background: transparent;
    color: #000;
  }
  .hl-q__chev { display: none; }
  .hl-q__nr { color: #666; }
  .hl-q__body { padding: 0; margin: 0; border-left: none; }

  .hl-subkop { margin: 10pt 0 4pt; }
  .hl-subkop__label { font-size: 9pt; color: #000; }
  .hl-subkop::after { background: #ccc; }
  .hl-section__count { display: none; }

  .hl-note { background: transparent; border-left: 2pt solid #666; break-inside: avoid; }
  .hl-note p:first-child strong { color: #000; }
  .hl-tablewrap { border: none; }
  .hl-table { break-inside: avoid; font-size: 9.5pt; }
  .hl-table th, .hl-table td { border-bottom: 0.5pt solid #ccc; padding: 4pt 6pt; background: transparent; }
  .hl-prose code { background: transparent; border: none; padding: 0; }
}