/* ceeme-hoe.css — de pagina "hoe het werkt".
   Eén accent: amber #C6892B. Geen beelden, geen tweede kleur. Alles wat je ziet is tekst of vorm,
   want alles wat een crawler niet kan lezen, telt voor ons niet mee. */

/* Globaal, en daarom hier in plaats van in een <style> per pagina. Op /alternatieven stonden deze
   drie regels los in de head, op /hoe-het-werkt in de body-tag en op /ceeme-vs-peec nergens.
   Drie oplossingen voor hetzelfde probleem is precies wat de herbouw moet wegnemen. */
html { scroll-behavior: smooth }
::selection { background: #C6892B; color: #17170F }

.hw { max-width: 880px; margin: 0 auto; padding: 0 24px 80px }

/* ── Hero. De definitiezin krijgt bewust het meeste gewicht van de pagina: dat is de zin die een
      AI overneemt als hij na de eerste alinea afknipt, en dat doet hij vaak. ─────────────────── */
.hw-hero { padding: 56px 0 8px }
.hw h1 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.05; margin: 0 0 20px }
.hw-def { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: #221E18; margin: 0 0 34px;
  max-width: 62ch; border-left: 3px solid #C6892B; padding-left: 18px }
.hw-kort-h { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px !important;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #83837A; margin: 0 0 12px }

/* ── In het kort: een echte definitielijst. <dl> is de vorm die een model als definitie herkent;
      drie div'jes met vet erin zijn dat niet. ─────────────────────────────────────────────────── */
.hw-dl { margin: 0 0 8px; border-top: 1px solid rgba(34,30,24,.1) }
.hw-dl dt { font-family: "Space Mono", ui-monospace, monospace; font-size: 12.5px; font-weight: 700;
  color: #221E18; padding: 14px 0 0 }
.hw-dl dd { margin: 4px 0 14px; padding: 0 0 14px; color: #5A564F; line-height: 1.6;
  border-bottom: 1px solid rgba(34,30,24,.08); max-width: 68ch }

/* ── Secties. Elke H2 is een vraag; ze staan ruim uit elkaar zodat elk blok op zichzelf leest. ── */
.hw-sec { padding: 34px 0; border-top: 1px solid rgba(34,30,24,.1) }
.hw h2 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; margin: 0 0 14px }
.hw-sec p { color: #5A564F; line-height: 1.7; margin: 0 0 14px; max-width: 68ch; font-size: 16px }

/* ── De bronnenlijst onder een studie — de tweede sprong ─────────────────────────────────────
   Njusja, 10 augustus 2026: de copy verwijst naar onze samenvatting, en dáár staat de echte link.
   Dit is die plek. Elke kaart draagt vier regels in een vaste volgorde: wie het onderzocht (met de
   link naar buiten), hoe groot de meting was, wat eruit kwam, en wat de studie NIET zegt.

   Die vierde regel krijgt met opzet een eigen kleur en een streep ervoor. Hij is het verschil
   tussen een bronvermelding en een bron: wie de grens van een bevinding niet noemt, nodigt uit
   tot misbruik ervan. Amber blijft het accent en er komt geen kleur bij. */
.bronlijst { list-style: none; margin: 8px 0 0; padding: 0 }
.bronkaart { border: 1px solid rgba(34,30,24,.12); border-radius: 12px; padding: 18px 20px;
  margin: 0 0 12px; background: #FBF8F2 }
.bronkaart p { margin: 0 0 8px; max-width: 68ch }
.bk-wie { font-weight: 700; font-size: 16px; color: #221E18 }
.bk-wie a { color: #221E18; text-decoration: underline; text-decoration-color: #C6892B;
  text-underline-offset: 3px; text-decoration-thickness: 2px }
.bk-wie a:hover { color: #885700 }
.bk-datum { font-family: "Space Mono", monospace; font-size: 12px; font-weight: 400;
  color: #7a7869; letter-spacing: .04em; margin-left: 6px }
.bk-omvang { font-family: "Space Mono", monospace; font-size: 12.5px; color: #67635D; line-height: 1.6 }
.bk-bevinding { font-size: 16px; color: #221E18; line-height: 1.65 }
.bk-letop { font-size: 14.5px; color: #67635D; line-height: 1.6; margin-bottom: 0;
  border-left: 2px solid #C6892B; padding-left: 12px }
.bronlijst-onder { font-size: 14px; color: #7a7869; line-height: 1.65; margin-top: 14px }

/* ── De drie stappen ─────────────────────────────────────────────────────────────────────────── */
.hw-three { margin: 22px 0 6px; padding: 18px; background: #FBF8F2;
  border: 1px solid rgba(34,30,24,.1); border-radius: 12px }
.hw-three svg { width: 100%; height: auto; display: block }
.hw3-box { fill: #fff; stroke: rgba(34,30,24,.14) }
.hw3-k { font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 700; fill: #221E18 }
.hw3-s { font-family: "Manrope", system-ui, sans-serif; font-size: 11px; fill: #83837A }
.hw3-line { stroke: rgba(34,30,24,.16); stroke-width: 1.5; stroke-dasharray: 3 4 }
.hw3-dot { fill: #C6892B }
@media (prefers-reduced-motion: reduce) { .hw3-dot { display: none } }

/* ── Tabel. Wat we niet meten staat even breed als wat we wel meten — dat is het punt. ────────── */
.hw-table { width: 100%; border-collapse: collapse; margin: 20px 0 6px; font-size: 14.5px }
.hw-table th { text-align: left; font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #83837A; font-weight: 700;
  padding: 0 14px 10px 0; border-bottom: 1px solid rgba(34,30,24,.14); vertical-align: bottom }
.hw-table th + th { color: #A8721F }
.hw-table td { padding: 13px 14px 13px 0; color: #5A564F; line-height: 1.55; vertical-align: top;
  border-bottom: 1px solid rgba(34,30,24,.07) }
.hw-table td:first-child { color: #221E18; font-weight: 500 }

/* Een cel MAG sinds 31 augustus 2026 een link dragen — zie J161 en `tabelCel()` in
   lib/paginavorm.js. Amber is hier het accent in tekst, violet blijft voorbehouden aan knoppen;
   dat is de werkverdeling die Njusja op 27 augustus vastlegde. De pijl staat er omdat een
   onderstreping in de eerste kolom van een tabel wegvalt tegen de rijlijnen: in een tabel vol
   namen moet je op één blik zien wélke namen ergens naartoe gaan. */
.hw-table td a { color: #A8721F; text-decoration: none; border-bottom: 1px solid rgba(198,137,43,.35) }
.hw-table td a:hover { color: #221E18; border-bottom-color: #221E18 }
.hw-table td:first-child a::after { content: " \2192"; border-bottom: 0 }

/* ── De crew. Dertien namen met dertien taken, als tekst. In een canvas leest niemand ze. ─────── */
 /* Dertien is geen deelbaar getal, dus de laatste rij loopt nooit vol. Met een rasterkleur als
    achtergrond werden die lege plekken grijze blokken — alsof er iets ontbrak. Nu staat de lijn
    op de cel zelf en blijft de rest gewoon wit. */
.hw-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 0;
  margin: 20px 0 14px; background: #fff; border: 1px solid rgba(34,30,24,.1);
  border-radius: 10px; overflow: hidden }
.hw-agent { background: #fff; padding: 12px 14px; outline: .5px solid rgba(34,30,24,.1) }
.hw-agent b { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 12.5px;
  color: #221E18 }
.hw-agent span { display: block; font-size: 12.5px; color: #83837A; margin-top: 3px; line-height: 1.4 }
.hw-note { font-size: 13.5px !important; color: #5A564F !important; margin: 0 0 8px !important;
  padding-left: 14px; border-left: 2px solid #C6892B }
.hw-note b { font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .1em; color: #A8721F; margin-right: 8px }

/* ── Code. Donker paneel met tabbladen — de vorm van docs.mistral.ai, omdat die werkt. ────────── */
.hw-code { margin: 22px 0 6px; border-radius: 12px; overflow: hidden; background: #17170F;
  border: 1px solid rgba(34,30,24,.2) }
.hw-tabs { display: flex; align-items: center; gap: 2px; padding: 8px 8px 0; background: #0E0E09;
  overflow-x: auto }
.hw-tab { border: 0; background: transparent; color: rgba(246,242,233,.5); cursor: pointer;
  font-family: "Space Mono", ui-monospace, monospace; font-size: 11.5px; padding: 8px 13px;
  border-radius: 7px 7px 0 0; white-space: nowrap }
.hw-tab:hover { color: rgba(246,242,233,.85) }
/* ⛔ VIOLET, NIET INKT — J173, 31 augustus 2026.
   Njusja: *"ook nog veel zwarte knoppen terwijl ik paarse vroeg!"* En dat vroeg ze op 27 augustus
   al, met de werkverdeling erbij: **violet #6B3FD4 is voor KNOPPEN, amber is het accent in tekst,
   crème is het vlak.** Een geselecteerde tab is een knop — hij draagt de keuze van de bezoeker —
   en die hoorde dus nooit inkt te zijn. Ik heb ze vanmiddag zelf zo gebouwd. */
.hw-tab.on { background: #6B3FD4; color: #F6F2E9 }
.hw-copy { margin-left: auto; border: 1px solid rgba(246,242,233,.18); background: transparent;
  color: rgba(246,242,233,.6); cursor: pointer; font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10.5px; padding: 5px 11px; border-radius: 999px; white-space: nowrap }
.hw-copy:hover { color: #F6F2E9; border-color: rgba(246,242,233,.4) }
/* ── De codepanelen ──────────────────────────────────────────────────────────────────────────
   Drie tabbladen met echte voorbeelden: schema, llms.txt, robots. Één ervan staat open.

   LET OP HOE DE ZICHTBAARHEID GEREGELD IS, want dat is hier op 9 augustus omgedraaid. Er stond:

       .hw-pre    { display: none }
       .hw-pre.on { display: block }

   Dat werkte, en het verborg zonder JavaScript twee van de drie voorbeelden. Precies de fout die
   scripts/test-zonderjs.mjs zoekt: een tabblad-widget die zijn inhoud pas vrijgeeft als er een
   script draait. En het is een pijnlijke plek om hem te maken — het gaat om onze eigen voorbeelden
   van schema en llms.txt, dus om exact de content die geciteerd hoort te worden.

   Nu andersom: in de basis staan alle drie de panelen open, onder elkaar, met een lijn ertussen.
   Dat leest prima — het is drie codeblokken op een uitlegpagina, en dat is niets bijzonders. Pas
   als ceeme-hoe.js draait, zet hij `hw-tabs` op de wikkel en wórdt het een tabbladenwidget.

   Dezelfde afspraak als bij .cmp-menu, .cmp-zij en .rv: verbergen mag, maar alleen achter een
   klasse die JavaScript zet. */
.hw-pre { display: block; margin: 0; padding: 18px 20px; overflow-x: auto;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.65; color: #F6F2E9 }
.hw-pre + .hw-pre { border-top: 1px solid rgba(246, 242, 233, .12) }

.hw-code.hw-tabs .hw-pre { display: none }
.hw-code.hw-tabs .hw-pre.on { display: block }
.hw-code.hw-tabs .hw-pre + .hw-pre { border-top: 0 }

/* De tabbladen en de kopieerknop hebben zonder script niets te doen: er valt niets te wisselen als
   alles al open staat, en "kopieer het open paneel" heeft geen betekenis als het er drie zijn. */
.hw-tab, .hw-copy { display: none }
.hw-code.hw-tabs .hw-tab { display: inline-block }
.hw-code.hw-tabs .hw-copy { display: inline-block; margin-left: auto }

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────────────── */
.hw-faq { border-bottom: 1px solid rgba(34,30,24,.09) }
.hw-faq summary { cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 15.5px;
  color: #221E18; list-style: none; display: flex; justify-content: space-between; gap: 16px }
.hw-faq summary::-webkit-details-marker { display: none }
.hw-faq summary::after { content: "+"; color: #C6892B; font-weight: 400; font-size: 20px; line-height: 1 }
.hw-faq[open] summary::after { content: "\2013" }
.hw-faq p { margin: 0 0 16px !important; color: #5A564F; line-height: 1.65; max-width: 68ch }

/* ── DE PAKKETKAARTEN VAN /prijzen ────────────────────────────────────────────────────────────
   Njusja, 31 augustus 2026: *"waar is mijn prijzen pagina!!!! dit zijn gewoon teksten met prijzen
   en mijn prijzenpagina is weg!!!!!!"* — de kaartvorm is op 9 augustus stil meegegaan in een
   opruimcommit (J163). Dit is die vorm terug, in het palet van redesign-2026 en niet in de oude
   Tailwind-klassen: crème vlak, amber accent in de tekst, violet alleen op de knop.

   `auto-fit` met `minmax(240px, 1fr)`: drie kaarten naast elkaar waar het past, twee waar het
   moet, één op een telefoon. Geen mediaquery nodig en geen vaste drie — de routes hebben er twee,
   drie of vier. */
.hw-kaarten, .pr-kaarten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 22px 0 10px;
}
.pr-kaart {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid rgba(34, 30, 24, .12); border-radius: 14px;
  background: #fff; padding: 22px 20px 20px;
}
/* Eén uitgelichte kaart. De rand is inkt in plaats van lijn, plus een tweede rand als ring — geen
   kleurvlak, want dan zou de kaart iets anders BELOVEN in plaats van iets anders te ZIJN. */
.pr-kaart.pr-uit { border-color: #17170F; box-shadow: 0 0 0 1px #17170F, 0 8px 28px rgba(23, 23, 15, .1) }
.pr-vlag {
  align-self: flex-start; margin: 0 0 10px;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
  background: #F6EBDA; color: #7E5512; border-radius: 999px; padding: 5px 10px;
}
.pr-naam { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #221E18 }
/* De prijs is een eigen element en geen zin. Dat was het in de oude pagina ook, en het is de reden
   dat de betaalschakelaar één attribuut hoeft te wisselen in plaats van tekst te ontleden. */
.pr-prijs {
  margin: 8px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #221E18;
  font-variant-numeric: tabular-nums;
}
.pr-wat { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: #5A564F; flex: 1 }
/* De grens staat op élke kaart, en dat is geen kleine lettertjes maar het product: wie alleen naar
   prijs en inhoud kijkt, koopt Watch en verwacht uitvoering. */
.pr-grens {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(34, 30, 24, .1);
  font-size: 12.5px; line-height: 1.5; color: #83837A;
}
.pr-grens span {
  display: block; font: 700 9.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #A8721F; margin-bottom: 5px;
}
.pr-knop {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 11px 18px; font-size: 13px; font-weight: 700;
  text-decoration: none; border: 1px solid rgba(23, 23, 15, .25); color: #221E18;
}
.pr-knop:hover { border-color: #17170F; background: rgba(23, 23, 15, .04); color: #221E18 }
/* De uitgelichte kaart krijgt de violette knop — het enige violet op deze pagina, en volgens de
   werkverdeling die Njusja op 27 augustus vastlegde: violet is voor KNOPPEN. */
.pr-kaart.pr-uit .pr-knop { background: #6B3FD4; border-color: #6B3FD4; color: #F6F2E9 }
.pr-kaart.pr-uit .pr-knop:hover { background: #5A34B4; border-color: #5A34B4; color: #F6F2E9 }

/* De betaalschakelaar. `hidden` in de HTML tot het script hem aanzet — zonder JavaScript staat de
   maandprijs er gewoon, en drie knoppen die niets doen zijn erger dan geen knoppen (J164). */
.pr-schakel { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0 }
.pr-schakel[hidden] { display: none }
.pr-schakel-k {
  font: 700 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #83837A;
}
.pr-schakel [role="tablist"] {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(34, 30, 24, .14); border-radius: 999px; background: #fff;
}
.pr-schakel button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 7px 14px; font: 600 12.5px/1 inherit; color: #5A564F;
}
.pr-schakel button:hover { color: #221E18 }
.pr-schakel button[aria-selected="true"] { background: #6B3FD4; color: #F6F2E9 }
.pr-noot { font-size: 12px; color: #A8721F; font-weight: 600 }

/* De routetabs: Watch · DIY · ProOps. Groter dan de betaalschakelaar, want dit is de keuze die de
   koper werkelijk maakt — de betaaltermijn is een detail erbovenop. */
.pr-routes {
  display: inline-flex; gap: 4px; margin: 22px 0 0; padding: 4px;
  border: 1px solid rgba(34, 30, 24, .14); border-radius: 999px; background: #fff;
}
.pr-routes button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 9px 20px; font: 700 14px/1 inherit; color: #5A564F;
}
.pr-routes button:hover { color: #221E18 }
.pr-routes button[aria-selected="true"] { background: #6B3FD4; color: #F6F2E9 }
/* De zin onder de tabs zegt waar de route ophoudt. Ze staat er op élke route en niet alleen bij
   Watch: wie alleen naar prijs kijkt, koopt Watch en verwacht uitvoering. */
.pr-paneel-w { margin: 16px 0 0; font-size: 13.5px; color: #5A564F }
.pr-paneel[hidden] { display: none }
.pr-onder { margin: 6px 0 0; font-size: 13.5px; color: #5A564F; max-width: 62ch }

/* De kenmerken onder de prijs. Amber vinkje, want dat is het accent in tekst; violet blijft van
   de knop. De getallen komen uit lib/pack-registry.js — zie kenmerkenVan() in prijspagina.js. */
.pr-lijst { list-style: none; margin: 14px 0 0; padding: 0; flex: 1 }
.pr-lijst li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 7px;
  font-size: 13px; line-height: 1.5; color: #5A564F;
}
.pr-lijst li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #C6892B; font-weight: 700; font-size: 12px;
}

/* ── Interne links: hub naar spaken. ─────────────────────────────────────────────────────────── */
.hw-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px;
  margin-top: 18px }
.hw-link { display: block; padding: 14px 16px; border: 1px solid rgba(34,30,24,.12);
  border-radius: 10px; text-decoration: none; background: #fff; transition: border-color 160ms ease }
.hw-link:hover { border-color: #C6892B }
.hw-link b { display: block; color: #221E18; font-size: 14.5px }
.hw-link span { display: block; color: #83837A; font-size: 12.5px; margin-top: 2px; line-height: 1.4 }

/* ── Slot ────────────────────────────────────────────────────────────────────────────────────── */
.hw-cta { padding: 40px 0 0; border-top: 1px solid rgba(34,30,24,.1); text-align: center }
.hw-btn { display: inline-block; background: #6B3FD4; color: #F6F2E9; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 999px }
.hw-btn:hover { background: #5A34B4; color: #F6F2E9 }
.hw-cta p { color: #83837A; font-size: 13px; margin: 12px 0 0 }

@media (max-width: 640px) {
  .hw { padding: 0 18px 60px }
  .hw-table, .hw-table thead, .hw-table tbody, .hw-table tr, .hw-table th, .hw-table td { display: block }
  .hw-table th { padding-bottom: 6px }
  .hw-table th + th { margin-top: 18px }
  .hw-table td { padding: 10px 0 }
}

/* De FAQ die op de gidsen alleen in de structured data stond en nergens op het scherm. */
.hw-faq-h { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; margin: 0 0 10px; color: #221E18 }

/* ══ De familie "alternatieven" ═══════════════════════════════════════════════════════════════
   Wat hieronder staat, is niet van één pagina maar van elke vergelijking: een tabel met meer dan
   twee kolommen, een routeblok en een bronregel. Ze staan in dezelfde stylesheet omdat ze bij
   dezelfde vorm horen, niet bij dezelfde URL. */

/* ── De oordeeltabel ─────────────────────────────────────────────────────────────────────────
   Vijf kolommen passen niet op een telefoon, en de blok-weergave hieronder maakt er dan een
   onleesbare sliert van. Daarom mag deze ene tabel horizontaal schuiven: een tabel die je moet
   verschuiven is beter dan een tabel die uit elkaar valt — en voor een crawler blijft het gewoon
   een <table>, wat het enige is wat telt voor de citatie. */
.hw-scroll { overflow-x: auto; margin: 20px -4px 0; padding: 0 4px 4px;
  -webkit-overflow-scrolling: touch }
.hw-oordeel { min-width: 720px; margin-top: 0 }
.hw-oordeel th { white-space: pre-line }
.hw-oordeel thead th + th { width: 17% }
.hw-oordeel tbody th { text-align: left; font-family: inherit; font-size: 14.5px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: #221E18; padding: 13px 14px 13px 0;
  border-bottom: 1px solid rgba(34,30,24,.07); vertical-align: top }
.hw-oordeel td { font-size: 13.5px }

/* Het teken draagt het oordeel, de zin draagt de onderbouwing. Alleen een vinkje zou een claim
   zijn zonder bewijs — precies wat we een ander verwijten. */
.hw-oo { display: inline-block; width: 15px; font-family: "Space Mono", ui-monospace, monospace;
  font-weight: 700; line-height: 1.4 }
.hw-oo-ja { color: #A8721F }
.hw-oo-deels { color: #83837A }
.hw-oo-nee { color: #B4B4AA }
.hw-oo-t { display: inline }
.hw-legende { font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px !important;
  letter-spacing: .06em; color: #83837A !important; margin: 10px 0 0 !important }

/* ── De tabel naast elkaar, op de vergelijkingspagina's. Onze kolom staat links en is op alle
      drie de pagina's dezelfde; wijkt ze af, dan schrijven we onszelf naar de tegenstander toe. */
.hw-naast { min-width: 600px; margin-top: 0 }
.hw-naast thead th:nth-child(2) { color: #A8721F }
.hw-naast thead th:nth-child(3) { color: #83837A }
.hw-naast tbody th { text-align: left; font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: #83837A; width: 22%; padding: 13px 14px 13px 0;
  border-bottom: 1px solid rgba(34,30,24,.07); vertical-align: top }
.hw-naast tbody td:first-of-type { color: #221E18 }

/* ── Punten. Een echte <ul>: een model neemt lijst-items als losse feiten over, terwijl vier
      alinea's achter elkaar één blok zijn waarin het moet zoeken. ───────────────────────────── */
.hw-punten { margin: 18px 0 4px; padding: 0; list-style: none }
.hw-punten li { position: relative; padding: 0 0 14px 22px; color: #5A564F; line-height: 1.65;
  font-size: 15px; max-width: 68ch }
.hw-punten li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px;
  height: 6px; border-radius: 50%; background: #C6892B }

/* ══ Het werkvlak van de promptchecker ════════════════════════════════════════════════════════
   Alles binnen .cmp-pc, zoals de agent-canvas binnen .cmp-ac blijft. Zonder voorvoegsel botsen
   deze regels met ceeme.css — allebei gebruiken ze generieke namen. */
.cmp-pc { margin: 22px 0 6px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px; align-items: start }
@media (max-width: 820px) { .cmp-pc { grid-template-columns: 1fr } }
.cmp-pc .pc-in { background: #fff; border: 1px solid rgba(34,30,24,.12); border-radius: 12px; padding: 16px }
.cmp-pc .pc-l { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #83837A; margin: 0 0 6px }
.cmp-pc .pc-veld { width: 100%; border: 1px solid rgba(34,30,24,.16); border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 14px; color: #221E18; background: #FBF8F2 }
.cmp-pc .pc-veld:focus { outline: none; border-color: #C6892B }
.cmp-pc .pc-tekst { line-height: 1.6; resize: vertical; min-height: 150px }
.cmp-pc .pc-jargon { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 10px 0 16px }
.cmp-pc .pc-jl { font-family: "Space Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #A8721F; margin-right: 4px }
.cmp-pc .pc-jl.pc-stil { color: #83837A; text-transform: none; letter-spacing: 0; font-size: 12px }
.cmp-pc .pc-pil { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px;
  border: 1px solid rgba(198,137,43,.4); background: rgba(198,137,43,.08); color: #A8721F;
  border-radius: 6px; padding: 2px 7px }
.cmp-pc .pc-uit { background: #FBF8F2; border: 1px solid rgba(34,30,24,.1); border-radius: 12px;
  padding: 16px; min-height: 180px }
.cmp-pc .pc-leeg { color: #83837A; font-size: 13.5px; line-height: 1.6; margin: 0 }
.cmp-pc .pc-som { font-size: 14px; color: #5A564F; margin: 0 0 12px }
.cmp-pc .pc-som b { font-family: "Space Mono", ui-monospace, monospace; color: #A8721F; font-size: 16px }
.cmp-pc .pc-lijst { list-style: none; margin: 0; padding: 0 }
.cmp-pc .pc-rij { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 8px;
  padding: 10px 0; border-top: 1px solid rgba(34,30,24,.08) }
.cmp-pc .pc-teken { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; line-height: 1.5 }
.cmp-pc .pc-ja .pc-teken { color: #A8721F }
.cmp-pc .pc-deels .pc-teken { color: #83837A }
.cmp-pc .pc-nee .pc-teken { color: #B4B4AA }
.cmp-pc .pc-q { font-size: 13.5px; color: #221E18; line-height: 1.5; word-break: break-word }
.cmp-pc .pc-oordeel { font-family: "Space Mono", ui-monospace, monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: #83837A; white-space: nowrap; padding-top: 2px }
.cmp-pc .pc-reden { grid-column: 2 / -1; font-size: 12.5px; color: #83837A; line-height: 1.5 }
.cmp-pc .pc-reden b { color: #A8721F; font-family: "Space Mono", ui-monospace, monospace; font-size: 12px }

/* ── De bronregel. Alles wat we over een ander bedrijf zeggen, draagt datum en herkomst. ─────── */
.hw-bron { font-size: 12.5px !important; color: #83837A !important; line-height: 1.6;
  margin: 14px 0 0 !important; padding-left: 14px; border-left: 2px solid #E2E2D8 }

/* ── Het routeblok. Prijs, uitkomst en grens — en de grens staat er even nadrukkelijk bij, want
      hij is in lib/pack-registry.js hard afgedwongen en hoort dus niet in de kleine lettertjes. */
.hw-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 10px;
  margin: 22px 0 6px }
.hw-route { background: #fff; border: 1px solid rgba(34,30,24,.12); border-radius: 10px;
  padding: 16px 16px 14px }
.hw-route b { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 13px;
  color: #221E18 }
.hw-route-p { display: block; color: #A8721F; font-size: 12.5px; font-weight: 600; margin-top: 3px }
.hw-route-w { display: block; color: #5A564F; font-size: 13px; line-height: 1.5; margin-top: 10px }
.hw-route-g { display: block; color: #83837A; font-size: 12px; line-height: 1.45; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(34,30,24,.08) }

/* ── De dubbele oproep: meten of eerst praten. Wie vergelijkt, wil vaak eerst een mens. ──────── */
.hw-cta-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.hw-btn2 { display: inline-block; background: transparent; color: #221E18; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 12px 25px; border-radius: 999px;
  border: 1px solid rgba(34,30,24,.22) }
.hw-btn2:hover { border-color: #6B3FD4; color: #5A34B4 }

@media (max-width: 640px) {
  /* De blok-weergave van .hw-table hierboven zou de oordeeltabel slopen; hier blijft ze tabel. */
  .hw-scroll .hw-table, .hw-scroll thead, .hw-scroll tbody, .hw-scroll tr { display: revert }
  .hw-scroll th, .hw-scroll td { display: table-cell }
  .hw-scroll th + th { margin-top: 0 }
}

/* De weging onder het resultaat van de promptchecker. Elk cijfer draagt zijn bron; hebben we voor
   dat land geen eigen cijfers, dan staat daar dat het het wereldbeeld is. */
.cmp-pc .pc-weging { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(34,30,24,.1);
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center; border-radius: 0 }
.cmp-pc .pc-bronregel { flex-basis: 100%; font-size: 11.5px; color: #83837A; line-height: 1.5;
  margin-top: 6px }
.cmp-pc select.pc-veld { appearance: none; background-image: none; cursor: pointer }

/* ── DE ENGINEKAARTEN — J178, 31 augustus 2026 ────────────────────────────────────────────────
   Njusja: *"hun logo in kaarten die rond lijken te vliegen als je muis erover gaat. beter dan deze
   onnodige uitleg!"* Ze vervangen de tabel die per engine vertelde HOE wij hem bevragen — dat was
   het recept, en het argument is een getal: negen.

   De beweging staat volledig in CSS-variabelen die public/js/ceeme-engines.js zet. Draait dat
   script niet, dan blijven `--rx` en `--ry` op nul en ligt het raster stil met alle negen namen
   erin. Dat is de regel: het beeld is versiering, de tekst is de inhoud. */
.eng-raster {
  list-style: none; margin: 22px 0 6px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
  perspective: 900px;
}
/* ── DE GEDEELDE KANTELING ────────────────────────────────────────────────────────────────────
   Njusja: *"maar ook motion op andere dingen zoals prijzen etc"*. Daarom staat de beweging hier
   los van de enginekaart: élk element met `data-kantel` krijgt haar, en de component eronder zegt
   alleen hoe hij eruitziet. De pakketkaarten op /prijzen dragen hetzelfde attribuut. */
[data-kantel] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1), box-shadow 220ms ease,
              border-color 220ms ease;
  will-change: transform;
}
/* De overgang op de TRANSFORM staat uit zolang de muis erop staat: anders loopt elke kanteling
   220 ms achter de cursor aan en voelt de kaart traag in plaats van meegevend. Schaduw en rand
   houden hun overgang wél — die hoeven de cursor niet te volgen. */
[data-kantel].kantel-aan {
  transition: box-shadow 220ms ease, border-color 220ms ease;
  box-shadow: 0 14px 34px rgba(23, 23, 15, .13);
  border-color: rgba(198, 137, 43, .45);
}

.eng-kaart {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(34, 30, 24, .12); border-radius: 14px; background: #fff;
}
/* Het logo komt naar voren. `translateZ` op een kind van een `preserve-3d`-ouder is wat het
   verschil maakt tussen een gekantelde afbeelding en een voorwerp met diepte. */
.eng-logo {
  width: 34px; height: 34px; object-fit: contain; display: block; margin-bottom: 10px;
  transform: translateZ(26px);
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1);
}
.eng-kaart.kantel-aan .eng-logo { transform: translateZ(42px) scale(1.06) }
.eng-naam { font-size: 15px; font-weight: 700; color: #221E18; transform: translateZ(14px) }
.eng-huis {
  font: 600 10.5px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase; color: #A8721F;
  transform: translateZ(10px);
}
.eng-wat { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #83837A; transform: translateZ(6px) }
/* De glans volgt de cursor. Zonder haar leest de kanteling als een scheve kaart in plaats van als
   licht dat over een oppervlak schuift — dat is precies het verschil dat het 3D maakt. */
/* ⚠ De doorschijnendheid staat achter `html.beweegt`, en dat is geen omweg maar de regel van dit
   project: `scripts/test-zonderjs.mjs` valt op élke regel die iets verbergt zonder dat een script
   het aanzet — en hij viel hier ook op, terecht. Zonder JavaScript hoort er niets verborgen te
   zijn, ook geen versiering; met JavaScript begint de glans onzichtbaar en volgt ze de cursor.
   Dezelfde constructie als `.mn-toon` in ceeme-menu.css. */
.eng-glans {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(198, 137, 43, .16), rgba(198, 137, 43, 0) 65%);
  transition: opacity 220ms ease;
}
html.beweegt .eng-glans { opacity: 0 }
html.beweegt .kantel-aan .eng-glans, html.beweegt .kantel-aan .pr-glans { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
  [data-kantel], .eng-logo, .pr-prijs { transition: none; transform: none }
  .kantel-aan .eng-logo { transform: none }
}

/* ── De pakketkaarten kantelen mee — J179 ─────────────────────────────────────────────────────
   Dezelfde beweging, kleiner: `data-kantel="4"` in plaats van zeven graden. Een prijskaart is
   hoger en smaller dan een enginekaart, en dezelfde hoek voelt daar heftiger.

   De PRIJS komt naar voren in plaats van een logo — dat is het element waar iemand naar kijkt, en
   diepte eronder maakt hem het middelpunt van de kaart. */
.pr-kaart .pr-prijs { transform: translateZ(20px); transition: transform 220ms cubic-bezier(.22, .61, .36, 1) }
.pr-kaart.kantel-aan .pr-prijs { transform: translateZ(34px) }
.pr-kaart .pr-naam { transform: translateZ(12px) }
.pr-kaart .pr-vlag { transform: translateZ(24px) }
.pr-glans {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(107, 63, 212, .10), rgba(107, 63, 212, 0) 65%);
  transition: opacity 220ms ease;
}
html.beweegt .pr-glans { opacity: 0 }

/* ══ DE CAMERA — J182, 1 september 2026 ════════════════════════════════════════════════════════
   Wat hier staat is de derde poging. De eerste twee zijn afgekeurd en het is nuttig te weten waarom,
   want beide fouten zijn makkelijk opnieuw te maken.

   1. EEN FADE-AND-RISE. Tekst die opkomt bij het binnenkomen en dan stilligt. Njusja: *"ik zie
      niets wat ik nog nooit op een andere website zag"*. Terecht — het zit in elk sjabloon.
   2. EEN "LEESKOP": een amberen naad die door elke alinea liep. Mooi idee, kapotte uitvoering; hij
      maakte tekst onzichtbaar. Het verslag staat hieronder bij het ⛔-blok en hoort gelezen te
      worden voor iemand ooit weer een verloop over letters legt.

   ── Wat er nu wél staat ──────────────────────────────────────────────────────────────────────
   Geen effect maar een CAMERA. Elke sectie ligt als een plaat in de ruimte: ze komt van
   onder-achter aan, staat recht en scherp zolang ze in beeld is, en kantelt weg als ze vertrekt.
   Wat erin staat loopt een fractie achter, zodat een blok niet als één plaat aankomt.

   ── De maat die alles bepaalt ────────────────────────────────────────────────────────────────
   Njusja, over versie twee: *"nog voor ik kon lezen was het al weg"* en *"slechte uitlijning tegen
   titel geplakt"*. Daaruit volgen de twee regels die hier boven mooi gaan:

     · Een sectie staat van 28% tot 72% van haar doorloop VOLLEDIG stil, scherp en op volle sterkte
       — ruim de helft van de tijd dat ze in beeld is. De camera beweegt alleen aan de uiteinden,
       waar je toch niet leest. Beweging mag nooit tussen de lezer en de zin gaan staan.
     · De nasleep trekt alleen van ONDEREN naar rust, nooit omhoog: een blok dat omhoog schuift
       kruipt tegen de kop erboven en dan plakt de alinea aan de titel. De H2 doet niet mee.

   ── De grens ─────────────────────────────────────────────────────────────────────────────────
   Alles in `@supports (animation-timeline: view())` + `prefers-reduced-motion`. Geen JavaScript,
   dus niets kan halverwege stukgaan. Geen `filter: blur` meer en geen opacity onder 0,6: op elk
   punt van de baan is elke letter leesbaar. Zie ceeme-beweging.css §8 voor dezelfde beweging op de
   homepage — één camera voor de hele site, anders voelen homepage en gids als twee websites. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ⛔ HIER STOND DE "LEESKOP" (J181) EN HIJ IS ERUIT GEHAALD — 1 september 2026, 00u35.
       Het idee: een amberen naad die door elke alinea loopt, met een verloop als achtergrond en
       `background-clip: text`. Ik schreef er in het commit-bericht bij dat er geen tekst kon
       verdwijnen "omdat er geen transparante stop in het verloop zit".

       Dat was fout, en Njusja zag het meteen op het scherm: het begin van elke regel was weg.
       `background-repeat: no-repeat` betekent dat het verloop een VLAK is met randen. Tekst die
       buiten dat vlak valt krijgt geen verf, en met `-webkit-text-fill-color: transparent` is
       "geen verf" niet bleek maar ONZICHTBAAR. Bij `background-position: 100%` verdween de
       linkerkant van elke zin, bij `-60%` de rechterkant.

       ⚠ DE LES, en die is groter dan dit effect: ik heb de veiligheid BEREDENEERD in plaats van
       gemeten, en het argument klonk sluitend. Geen enkele toets ving het: `test-zonderjs.mjs`
       kijkt naar `opacity` en `display`, en hier was de opacity gewoon 1 — de letters wérden
       alleen nooit geschilderd. Wie tekst met `background-clip: text` aankleedt, moet het ZIEN,
       niet uitrekenen. Niet opnieuw invoeren zonder schermafdruk. */

    /* ── 2. DEZELFDE CAMERA ALS OP DE HOMEPAGE — zie ceeme-beweging.css §8 voor het waarom.
       Eén beweging over de hele site: een sectie hier hoort zich net zo te gedragen als een band
       daar, anders voelt de overgang tussen homepage en gids als twee websites. */
    @keyframes ceeme-plaat {
      0%   { opacity: .6; transform: perspective(1600px) translate3d(0, 5vh, -180px) rotateX(7deg) }
      28%  { opacity: 1;  transform: perspective(1600px) translate3d(0, 0, 0) rotateX(0) }
      72%  { opacity: 1;  transform: perspective(1600px) translate3d(0, 0, 0) rotateX(0) }
      100% { opacity: .6; transform: perspective(1600px) translate3d(0, -5vh, -180px) rotateX(-7deg) }
    }
    @keyframes ceeme-nasleep {
      0% { transform: translate3d(0, 36px, 0) } 50% { transform: none } 100% { transform: translate3d(0, -22px, 0) }
    }
    .hw-sec {
      animation: ceeme-plaat linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .pr-kaarten, .eng-raster, .hw-crew, .hw-table {
      animation: ceeme-nasleep linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 92%;
    }
  }
}