/* Gedeelde tools-hubstijl voor de Engelse route; bronvorm gelijk aan de Nederlandse hub. */

/* ============ pg-tools-en-plugins · pagina-eigen stijl ============
   Zelfde grammatica als /skills/ en als de vijftien toolpaginas eronder:
   terminalvenster, mono-annotaties, figuren op de volle breedte van
   .v2main (1132px) en lopende tekst in .dos-in (860px). Alles hier is
   bewust pagina-lokaal, zodat de pagina ook klopt bij een browser die
   v2.css nog uit de cache haalt. */

/* ---------- boot-sequence bij laden ---------- */
.boot { display: none; position: fixed; inset: 0; z-index: 2000; background: #050914; align-items: center; justify-content: center; }
html.jsboot .boot { display: flex; animation: bootUit .45s var(--ease) 1.75s forwards; }
.boot-in { font: 400 13.5px/2.1 var(--mono); color: #c8d6f5; min-width: min(560px, 86vw); }
.boot-ln { opacity: 0; animation: bootLn .01s steps(1) forwards; }
.boot-ln:nth-child(1) { animation-delay: .12s; }
.boot-ln:nth-child(2) { animation-delay: .55s; }
.boot-ln:nth-child(3) { animation-delay: .95s; }
.boot-ln:nth-child(4) { animation-delay: 1.35s; }
.boot-ln .bp { color: var(--cyan); }
.boot-ln.ok { color: #86efac; }
@keyframes bootLn { to { opacity: 1; } }
@keyframes bootUit { to { opacity: 0; visibility: hidden; } }

/* ---------- gedeelde kleine onderdelen ---------- */
.pg-tools-en-plugins .tbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); background: rgba(8,14,30,.75); font: 400 11px/1 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .tbar i { width: 9px; height: 9px; border-radius: 999px; background: #31435f; flex: none; }
.pg-tools-en-plugins .tbar i:nth-child(2) { background: #27364e; }
.pg-tools-en-plugins .tbar i:nth-child(3) { background: #233047; }
.pg-tools-en-plugins .tbar .tpath { margin-left: 6px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tools-en-plugins .tbar .tok { margin-left: auto; color: #86efac; flex: none; }
.pg-tools-en-plugins .v2sec > .tbar { margin-bottom: 12px; }
.pg-tools-en-plugins .thub-intro { max-width: 880px; margin: -6px 0 34px; color: var(--mut); }
.pg-tools-en-plugins .thub-intro a { color: var(--per2); }
#waar, #plugins, #register, #maatwerk { scroll-margin-top: 100px; }
.pg-tools-en-plugins .v2sec-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: #c7d2fe; }

/* ---------- glyfen: elk item krijgt een eigen tekening ----------
   Een gedeelde sprite met twintig symbolen. De vorm is het verschil,
   niet de kleur: de kleur zegt waar het ding draait (violet is jouw
   server, cyaan is deze browser, grijs is er nog niet). */
.pg-tools-en-plugins .gly { width: 34px; height: 34px; flex: none; display: block; color: var(--per2); }
.pg-tools-en-plugins .gly--nu { color: var(--cyan); }
.pg-tools-en-plugins .gly--lees { color: #93b4ff; }
.pg-tools-en-plugins .gly--stil { color: #7c8aa5; }
.pg-tools-en-plugins .gly--groot { width: 40px; height: 40px; }

/* ---------- paginahero, vorm volgens paginas/paginahero-norm.md ----------
   De metaregel en de kop lopen over de volle rasterbreedte, het tweeluik
   met de terminalfiguur begint eronder. Zo begint de kop op dezelfde x als
   op /seo-verbeteren/ in plaats van halverwege het raster. */
.pg-tools-en-plugins .thub-hero { padding: 96px 0 6px; }
.pg-tools-en-plugins .thub-hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--hair); padding-bottom: 14px; margin: 24px 0 40px; }
.pg-tools-en-plugins .thub-hero .v2h1 { font-size: clamp(44px, 6.0vw, 79px); overflow-wrap: break-word; }
/* De cursieve serif steekt boven en onder de regel uit en .lm{overflow:hidden}
   snijdt dat af. Padding geeft de inkt ruimte, de negatieve marge houdt de
   hoogte gelijk, de grotere translate houdt de regel vooraf verborgen. */
.pg-tools-en-plugins .thub-hero .v2h1 .lm { padding: .14em 0; margin: -.14em 0; }
.pg-tools-en-plugins .thub-hero .v2h1 .lm > span { transform: translateY(145%); }
.pg-tools-en-plugins .thub-hero .v2h1 .lm.isIn > span { transform: none; }
.pg-tools-en-plugins .thub-hero-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); gap: 46px; align-items: start; margin-top: 52px; }
.pg-tools-en-plugins .thub-hero .prog-lead { max-width: 56ch; }
.pg-tools-en-plugins .thub-cta-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
/* De knoppenrij staat hier in de linkerkolom van het tweeluik, niet over de
   volle rasterbreedte. Naast de twee knoppen blijft te weinig ruimte over voor
   een leesbare bewijsregel, dus krijgt hij bewust een eigen regel eronder. */
.pg-tools-en-plugins .thub-cta-sub { font: 400 12px/1.5 'JetBrains Mono'; color: var(--mut2); flex: 1 1 100%; }
.pg-tools-en-plugins .thub-tweede { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border: 1px solid var(--line); border-radius: 999px; font: 600 13.5px/1 Inter, sans-serif; color: #dbe2f7; text-decoration: none; transition: border-color .4s var(--ease), color .4s var(--ease); }
.pg-tools-en-plugins .thub-tweede:hover, .pg-tools-en-plugins .thub-tweede:focus-visible { border-color: rgba(103,232,249,.4); color: #fff; }
.pg-tools-en-plugins .thub-hero .prog-feiten { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-tools-en-plugins .thub-hero .prog-feiten span { font: 400 11.5px/1.5 var(--mono); color: #9aa6c6; text-transform: none; letter-spacing: 0; }
.pg-tools-en-plugins .thub-hero .prog-feiten b { display: block; color: #fff; font: 700 15px/1.4 Inter, sans-serif; letter-spacing: -.01em; }
.pg-tools-en-plugins .thub-noot { margin-top: 12px; }
.pg-tools-en-plugins .fig-lbl { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pg-tools-en-plugins .term-body { overflow-wrap: anywhere; }
.pg-tools-en-plugins .thub-hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .pg-tools-en-plugins .thub-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

/* ===== FIG.01 · de twee plekken =====
   Vorm volgt inhoud: de eerste vraag van een bezoeker is niet welke tool,
   maar of hij nu iets doet of iets downloadt. Dus twee banen die elk hun
   eigen scherm laten zien, met een echte scheidslijn ertussen. */
.pg-tools-en-plugins .tlan { border: 1px solid var(--line); background: rgba(8,14,30,.7); }
.pg-tools-en-plugins .tlan-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: rgba(22,82,240,.06); border-bottom: 1px solid var(--line); }
.pg-tools-en-plugins .tlan-bar strong { font: 600 12px/1 var(--mono); color: var(--ink); }
.pg-tools-en-plugins .tlan-bar .ann { margin-left: auto; }
.pg-tools-en-plugins .tlan-in { display: grid; grid-template-columns: 1fr 54px 1fr; }
.pg-tools-en-plugins .tlan-kol { min-width: 0; padding: 20px; }
.pg-tools-en-plugins .tlan-kop { display: flex; align-items: center; gap: 13px; padding-bottom: 15px; margin-bottom: 16px; border-bottom: 1px solid rgba(148,163,184,.12); }
.pg-tools-en-plugins .tlan-kop b { display: block; font: 700 14.5px/1.3 Inter, sans-serif; color: #fff; }
.pg-tools-en-plugins .tlan-kop span span { display: block; font: 400 10.5px/1.6 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .tlan-mid { position: relative; }
.pg-tools-en-plugins .tlan-mid::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, transparent, rgba(139,149,255,.32) 18%, rgba(139,149,255,.32) 82%, transparent); }
.pg-tools-en-plugins .tlan-mid span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(90deg); font: 700 9px/1 var(--mono); letter-spacing: .18em; color: var(--mut2); background: rgba(8,14,30,.98); padding: 7px 4px; white-space: nowrap; }
/* het schermpje in elke baan */
.pg-tools-en-plugins .tlan-scherm { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(5,9,20,.62); }
.pg-tools-en-plugins .tlan-chrome { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-bottom: 1px solid rgba(148,163,184,.12); background: rgba(110,121,255,.05); }
.pg-tools-en-plugins .tlan-chrome i { width: 7px; height: 7px; border-radius: 999px; background: #31435f; flex: none; }
.pg-tools-en-plugins .tlan-url { flex: 1; min-width: 0; font: 400 10.5px/1.5 var(--mono); color: #9aa6c6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tools-en-plugins .tlan-body { padding: 14px; display: grid; gap: 9px; }
.pg-tools-en-plugins .tlan-veld { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hair); border-radius: 8px; padding: 9px 11px; font: 400 11.5px/1.4 var(--mono); color: #7c8aa5; }
.pg-tools-en-plugins .tlan-veld b { color: #dbe2f7; font-weight: 400; }
.pg-tools-en-plugins .tlan-knop { justify-self: start; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #050914; background: var(--cyan); border-radius: 999px; padding: 8px 14px; }
.pg-tools-en-plugins .tlan-uit { border-left: 2px solid var(--cyan); background: rgba(103,232,249,.06); padding: 10px 12px; font: 400 11.5px/1.7 var(--mono); color: #c8d6f5; }
.pg-tools-en-plugins .tlan-uit b { color: #86efac; font-weight: 500; }
/* de uploadbalk in de rechterbaan */
.pg-tools-en-plugins .tlan-bestand { display: flex; align-items: center; gap: 9px; font: 400 11.5px/1.5 var(--mono); color: #dbe2f7; }
.pg-tools-en-plugins .tlan-bestand span { margin-left: auto; color: var(--mut2); }
.pg-tools-en-plugins .tlan-balk { height: 6px; border-radius: 999px; background: rgba(148,163,184,.14); overflow: hidden; }
.pg-tools-en-plugins .tlan-balk i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--per), var(--per2)); transform: scaleX(.04); transform-origin: left; }
.pg-tools-en-plugins .tlan.isIn .tlan-balk i { animation: tlanVul 1.5s var(--ease) .35s forwards; }
@keyframes tlanVul { to { transform: scaleX(1); } }
.pg-tools-en-plugins .tlan-caret { display: inline-block; width: 6px; height: 1em; background: var(--cyan); vertical-align: -2px; margin-left: 2px; animation: tlanCaret 1.1s steps(1) infinite; }
@keyframes tlanCaret { 50% { opacity: 0; } }
.pg-tools-en-plugins .tlan-lijst { list-style: none; margin: 16px 0 0; padding: 0; }
.pg-tools-en-plugins .tlan-lijst li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(148,163,184,.1); font: 400 12.6px/1.6 Inter, sans-serif; color: var(--mut); }
.pg-tools-en-plugins .tlan-lijst b { font: 700 9.5px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); }
.pg-tools-en-plugins .tlan-lijst i { font-style: normal; color: var(--ink); }
.pg-tools-en-plugins .tlan-voet { padding: 14px 18px; border-top: 1px solid var(--line); background: rgba(5,9,20,.4); font: 400 11.5px/1.65 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .tlan-voet a { color: var(--per2); }
@media (max-width: 900px) {
  .pg-tools-en-plugins .tlan-in { grid-template-columns: 1fr; }
  .pg-tools-en-plugins .tlan-mid { height: 1px; background: rgba(139,149,255,.24); }
  .pg-tools-en-plugins .tlan-mid::before, .pg-tools-en-plugins .tlan-mid span { display: none; }
  .pg-tools-en-plugins .tlan-lijst li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ===== FIG.03 · de acht plugins, elk met een eigen tekening ===== */
.pg-tools-en-plugins .plg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-tools-en-plugins .plg-k { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,14,30,.55);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.pg-tools-en-plugins .plg-k::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--per2), var(--cyan)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.pg-tools-en-plugins .plg-k:hover, .pg-tools-en-plugins .plg-k:focus-visible { border-color: rgba(139,149,255,.42); background: rgba(22,82,240,.09); transform: translateY(-2px); }
.pg-tools-en-plugins .plg-k:hover::after, .pg-tools-en-plugins .plg-k:focus-visible::after { transform: scaleY(1); }
.pg-tools-en-plugins .plg-k:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pg-tools-en-plugins .plg-n { font: 700 9.5px/1.9 var(--mono); letter-spacing: .09em; color: var(--mut2); display: block; }
.pg-tools-en-plugins .plg-k h3 { margin: 2px 0 6px; font: 700 1.02rem/1.32 Inter, sans-serif; color: #fff; letter-spacing: -.015em; }
.pg-tools-en-plugins .plg-k p { margin: 0 0 11px; font-size: .885rem; line-height: 1.6; color: var(--mut); }
.pg-tools-en-plugins .plg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 10.5px/1.6 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .plg-meta b { color: #c7d2fe; font-weight: 600; }
.pg-tools-en-plugins .plg-nieuw { display: inline-block; margin-left: 8px; font: 700 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #86efac; border: 1px solid rgba(52,211,153,.36); border-radius: 999px; padding: 4px 8px; vertical-align: 1px; }
.pg-tools-en-plugins .plg-voet { margin-top: 14px; padding: 13px 16px; border: 1px dashed rgba(148,163,184,.25); border-radius: 10px; font: 400 11.5px/1.7 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .plg-voet a { color: var(--per2); }
@media (max-width: 820px) { .pg-tools-en-plugins .plg { grid-template-columns: minmax(0, 1fr); } }

/* ---------- het register met filters ----------
   De filterbalk draagt bewust geen .rv: die zet een transform op het
   element, en een transform op een sticky element schuift hem uit zijn
   vastgezette positie. Een bedieningselement hoort bovendien meteen
   zichtbaar te zijn. */
.pg-tools-en-plugins .thub-filter { position: sticky; top: 92px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 13px 14px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 14px;
  background: #070c1a; box-shadow: 0 18px 40px rgba(3,6,15,.55); }
.pg-tools-en-plugins .thub-chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.pg-tools-en-plugins .thub-chip { font: 500 12px/1 Inter, sans-serif; color: #b9c4de; background: transparent; cursor: pointer;
  border: 1px solid var(--hair); border-radius: 999px; padding: 9px 13px;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease); }
.pg-tools-en-plugins .thub-chip b { font: 700 11px/1 var(--mono); color: var(--mut2); margin-left: 6px; }
.pg-tools-en-plugins .thub-chip:hover { color: #fff; border-color: rgba(139,149,255,.4); }
.pg-tools-en-plugins .thub-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pg-tools-en-plugins .thub-chip[aria-pressed="true"] { color: #fff; border-color: rgba(103,232,249,.45); background: rgba(103,232,249,.09); }
.pg-tools-en-plugins .thub-chip[aria-pressed="true"] b { color: var(--cyan); }
.pg-tools-en-plugins .thub-zoek { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pg-tools-en-plugins .thub-zoek label { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut2); }
.pg-tools-en-plugins .thub-zoek input { width: 216px; font: 400 12.5px/1 var(--mono); color: #e6e9f5; background: rgba(8,14,30,.9);
  border: 1px solid var(--hair); border-radius: 999px; padding: 9px 13px; }
.pg-tools-en-plugins .thub-zoek input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.pg-tools-en-plugins .thub-teller { flex: 1 1 160px; font: 400 11px/1.6 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .thub-leeg { font: 400 12px/1.7 var(--mono); color: var(--mut2); padding: 20px 0; }
.pg-tools-en-plugins .thub-leeg[hidden] { display: none; }

.pg-tools-en-plugins .thub-groep { margin-bottom: 44px; }
.pg-tools-en-plugins .thub-groepkop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 12px; border-bottom: 1px solid rgba(148,163,184,.18); }
.pg-tools-en-plugins .thub-groep-in { color: var(--mut); font-size: .95rem; line-height: 1.72; max-width: 74ch; margin: 14px 0 18px; }
.pg-tools-en-plugins .thub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pg-tools-en-plugins .thub-kaart { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 17px; border: 1px solid rgba(148,163,184,.14); background: rgba(8,14,30,.52); border-radius: 11px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .3s ease, background .3s ease, transform .4s var(--ease); }
/* het streepje links kleurt mee met de baan, zodat de kaart ook in een
   gefilterde lijst nog zegt waar het ding draait */
.pg-tools-en-plugins .thub-kaart::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--cyan); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.pg-tools-en-plugins .thub-kaart--plug::after { background: linear-gradient(180deg, var(--per2), var(--cyan)); }
.pg-tools-en-plugins .thub-kaart[data-status="lees"]::after { background: #93b4ff; }
.pg-tools-en-plugins .thub-kaart[data-status="stil"]::after { background: #7c8aa5; }
.pg-tools-en-plugins .thub-kaart:hover, .pg-tools-en-plugins .thub-kaart:focus-visible { border-color: rgba(148,163,184,.38); background: rgba(8,14,30,.74); transform: translateY(-2px); }
.pg-tools-en-plugins .thub-kaart:hover::after, .pg-tools-en-plugins .thub-kaart:focus-visible::after { transform: scaleY(1); }
.pg-tools-en-plugins .thub-kaart:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pg-tools-en-plugins .thub-kaart h3 { margin: 3px 0 5px; font-size: .98rem; font-weight: 700; line-height: 1.33; color: #eaeefb; }
.pg-tools-en-plugins .thub-kaart p { margin: 0; font-size: .865rem; line-height: 1.55; color: #94a3b8; }
.pg-tools-en-plugins .thub-status { display: inline-flex; align-items: center; gap: .5em; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #94a3b8; }
.pg-tools-en-plugins .thub-status i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pg-tools-en-plugins .thub-status--nu { color: #34d399; }
.pg-tools-en-plugins .thub-status--nu i { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.5); }
.pg-tools-en-plugins .thub-status--lees { color: #93b4ff; }
.pg-tools-en-plugins .thub-status--lees i { background: #93b4ff; }
.pg-tools-en-plugins .thub-status--stil { color: #94a3b8; }
.pg-tools-en-plugins .thub-status--stil i { background: #94a3b8; }
.pg-tools-en-plugins .thub-status--plug { color: #c7d2fe; }
.pg-tools-en-plugins .thub-status--plug i { background: #8b95ff; box-shadow: 0 0 6px rgba(139,149,255,.5); }
.pg-tools-en-plugins .thub-kaart--plug { border-color: rgba(139,149,255,.32); background: rgba(22,82,240,.07); }
.pg-tools-en-plugins .thub-kaart--plug:hover { border-color: rgba(139,149,255,.55); background: rgba(22,82,240,.11); }
.pg-tools-en-plugins .thub-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: 400 10.5px/1.5 var(--mono); color: #94a3b8; }
.pg-tools-en-plugins .thub-meta b { color: #c7d2fe; font-weight: 600; }
.pg-tools-en-plugins .thub-kaart[hidden], .pg-tools-en-plugins .thub-groep[hidden] { display: none; }
.pg-tools-en-plugins .thub-voet { margin-top: 26px; padding: 16px 18px; border: 1px dashed rgba(148,163,184,.25); border-radius: 10px; }
.pg-tools-en-plugins .thub-voet p { margin: 0; font-size: .9rem; color: #94a3b8; }
@media (max-width: 1040px) { .pg-tools-en-plugins .thub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .pg-tools-en-plugins .thub-filter { position: static; }
  .pg-tools-en-plugins .thub-zoek { margin-left: 0; width: 100%; }
  .pg-tools-en-plugins .thub-zoek input { width: 100%; flex: 1; }
  .pg-tools-en-plugins .thub-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== FIG.02 · de gegevensmatrix =====
   Vorm volgt inhoud: de vraag bij acht plugins is niet welke functies ze
   hebben maar welke gegevens ze aanraken, dus dit is een tabel met precies
   drie kolommen en geen kolom meer. */
.pg-tools-en-plugins .thub-mat{border:1px solid var(--line);background:rgba(8,14,30,.7);margin-top:4px}
.pg-tools-en-plugins .thub-mat-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(22,82,240,.06);border-bottom:1px solid var(--line)}
.pg-tools-en-plugins .thub-mat-bar strong{font:600 12px/1 'JetBrains Mono';color:var(--ink)}
.pg-tools-en-plugins .thub-mat-bar .ann{margin-left:auto}
.pg-tools-en-plugins .thub-mat-r{display:grid;grid-template-columns:200px 1fr 210px;gap:16px;padding:12px 18px;border-top:1px solid rgba(148,163,184,.1);align-items:start}
.pg-tools-en-plugins .thub-mat-r:first-child{border-top:0}
.pg-tools-en-plugins .thub-mat-r span{font:400 12.5px/1.55 'Inter';color:var(--mut);min-width:0}
.pg-tools-en-plugins .thub-mat-r a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(148,163,184,.3)}
.pg-tools-en-plugins .thub-mat-r a:hover{border-bottom-color:#fff}
.pg-tools-en-plugins .thub-mat-r--kop span{font:700 9.5px/1 'JetBrains Mono';letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.pg-tools-en-plugins .thub-mat-r .ja{color:#34d399;font-weight:600}
.pg-tools-en-plugins .thub-mat-r .soms{color:#fbbf24}
.pg-tools-en-plugins .thub-mat-voet{padding:13px 18px;border-top:1px solid var(--line);font:400 12px/1.65 'Inter';color:var(--mut2)}
.pg-tools-en-plugins .thub-mat-voet code{font:400 11px/1.4 'JetBrains Mono';color:var(--ink);background:rgba(148,163,184,.08);padding:1px 5px}
.pg-tools-en-plugins .thub-mat-r{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pg-tools-en-plugins .thub-mat.isIn .thub-mat-r{opacity:1;transform:none}
@media(max-width:900px){.pg-tools-en-plugins .thub-mat-r{grid-template-columns:1fr;gap:5px}.pg-tools-en-plugins .thub-mat-r--kop{display:none}}

/* ===== figuurgrammatica (zelfde als /seo-verbeteren/) ===== */
.pg-tools-en-plugins .fig-h{margin:0 0 10px;font-size:1.1rem;color:#fff;font-weight:700;letter-spacing:-.02em}
.pg-tools-en-plugins .fig-p{color:var(--mut);margin:0 0 18px;max-width:720px}

/* ===== FIG.04 · twee soorten hulp naast elkaar =====
   Vorm volgt inhoud: deze hub bestaat uit wezenlijk verschillende dingen,
   een machine waar je iets in stopt en een blad waar je iets van leert. Dus
   drie banen naast elkaar, met dezelfde vier vragen eronder. */
.pg-tools-en-plugins .tsrt{border:1px solid var(--line);background:rgba(8,14,30,.7)}
.pg-tools-en-plugins .tsrt-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(22,82,240,.06);border-bottom:1px solid var(--line)}
.pg-tools-en-plugins .tsrt-bar strong{font:600 12px/1 'JetBrains Mono';color:var(--ink)}
.pg-tools-en-plugins .tsrt-bar .ann{margin-left:auto}
.pg-tools-en-plugins .tsrt-in{display:grid;grid-template-columns:repeat(3,1fr)}
.pg-tools-en-plugins .tsrt-kol{border-left:1px solid rgba(148,163,184,.1);min-width:0}
.pg-tools-en-plugins .tsrt-kol:first-child{border-left:0}
.pg-tools-en-plugins .tsrt-kop{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid rgba(148,163,184,.1)}
.pg-tools-en-plugins .tsrt-ic{width:38px;height:38px;flex-shrink:0}
.pg-tools-en-plugins .tsrt-ic svg{width:100%;height:100%;display:block}
.pg-tools-en-plugins .tsrt-ic .sk{fill:none;stroke:var(--per2);stroke-width:1.4}
.pg-tools-en-plugins .tsrt-ic .vl{fill:var(--per2)}
.pg-tools-en-plugins .tsrt-ic .knop{fill:#34d399;transform:translateX(0);transition:transform 1.1s var(--ease) .3s}
.pg-tools-en-plugins .tsrt.isIn .tsrt-ic .knop{transform:translateX(11px)}
.pg-tools-en-plugins .tsrt-kop b{display:block;font:700 14px/1.3 'Inter';color:#fff}
.pg-tools-en-plugins .tsrt-kop span{display:block;font:400 10.5px/1.5 'JetBrains Mono';color:var(--mut2)}
.pg-tools-en-plugins .tsrt-r{padding:15px 18px;border-bottom:1px solid rgba(148,163,184,.1)}
.pg-tools-en-plugins .tsrt-r:last-child{border-bottom:0}
.pg-tools-en-plugins .tsrt-l{display:block;font:700 9.5px/1.4 'JetBrains Mono';color:var(--mut2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.pg-tools-en-plugins .tsrt-t{display:block;font:400 12.8px/1.6 'Inter';color:var(--mut)}
.pg-tools-en-plugins .tsrt-t b{color:var(--ink);font-weight:600}
.pg-tools-en-plugins .tsrt-voet{padding:14px 18px;border-top:1px solid var(--line);background:rgba(5,9,20,.4);font:400 11.5px/1.65 'JetBrains Mono';color:var(--mut2)}
.pg-tools-en-plugins .tsrt-voet a{color:var(--per2)}
@media(max-width:980px){.pg-tools-en-plugins .tsrt-in{grid-template-columns:1fr}.pg-tools-en-plugins .tsrt-kol{border-left:0;border-top:1px solid rgba(148,163,184,.1)}.pg-tools-en-plugins .tsrt-kol:first-child{border-top:0}}

/* ===== FIG.05 · de drie treden =====
   De ruststand is zichtbaar en alle beweging zit in de animatie
   (fill-mode backwards). Zo staat de ladder er ook als de onthulling
   nooit afgaat, bijvoorbeeld zonder IntersectionObserver. */
.pg-tools-en-plugins .tlad { border: 1px solid var(--line); background: rgba(8,14,30,.7); }
.pg-tools-en-plugins .tlad-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: rgba(22,82,240,.06); border-bottom: 1px solid var(--line); }
.pg-tools-en-plugins .tlad-bar strong { font: 600 12px/1 var(--mono); color: var(--ink); }
.pg-tools-en-plugins .tlad-bar .ann { margin-left: auto; }
.pg-tools-en-plugins .tlad-stap { display: grid; grid-template-columns: 190px 1fr; gap: 6px 20px; padding: 20px; border-bottom: 1px solid rgba(148,163,184,.07); }
.pg-tools-en-plugins .tlad.isIn .tlad-stap { animation: tladIn .55s var(--ease) backwards; }
.pg-tools-en-plugins .tlad.isIn .tlad-stap:nth-child(4) { animation-delay: .3s; }
.pg-tools-en-plugins .tlad.isIn .tlad-stap:nth-child(6) { animation-delay: .6s; }
@keyframes tladIn { from { opacity: 0; transform: translateY(8px); } }
.pg-tools-en-plugins .tlad-lab { font: 700 10px/1.8 var(--mono); color: var(--per2); letter-spacing: .07em; }
.pg-tools-en-plugins .tlad-lab .gr { color: #86efac; }
.pg-tools-en-plugins .tlad-t { font: 700 14.5px/1.35 Inter, sans-serif; color: var(--ink); display: block; margin: 0 0 6px; }
.pg-tools-en-plugins .tlad-d { font: 400 13px/1.7 Inter, sans-serif; color: var(--mut); display: block; }
.pg-tools-en-plugins .tlad-d a { color: var(--per2); }
.pg-tools-en-plugins .tlad-meta { display: block; margin-top: 9px; font: 400 11px/1.7 var(--mono); color: var(--mut2); }
.pg-tools-en-plugins .tlad-meta .cp { color: var(--cyan); }
.pg-tools-en-plugins .tlad-pijl { text-align: center; font: 400 15px/1 var(--mono); color: var(--per2); padding: 9px 0; border-bottom: 1px solid rgba(148,163,184,.07); animation: tladPuls 2.8s ease-in-out infinite; }
.pg-tools-en-plugins .tlad-pijl:nth-child(3) { animation-delay: .15s; }
.pg-tools-en-plugins .tlad-pijl:nth-child(5) { animation-delay: .45s; }
@keyframes tladPuls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pg-tools-en-plugins .tlad-voet { padding: 13px 16px; font: 400 11px/1.7 var(--mono); color: var(--mut2); background: rgba(5,9,20,.5); }
@media (max-width: 700px) { .pg-tools-en-plugins .tlad-stap { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* smalle schermen: de sectiekop is een drietrapsrij (annotatie, titel,
   registernummer). Onder 700 px wordt dat een geperste kolom, dus daar
   stapelt hij netjes uit elkaar. */
@media (max-width: 700px) {
  .pg-tools-en-plugins .v2sec-head { display: block; }
  .pg-tools-en-plugins .v2sec-head h2 { margin: 8px 0 10px; }
  .pg-tools-en-plugins .v2sec-head .ann:last-child { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .boot, html.jsboot .boot { display: none; }
  .pg-tools-en-plugins .tlad-stap, .pg-tools-en-plugins .tlad.isIn .tlad-stap { animation: none; opacity: 1; transform: none; }
  .pg-tools-en-plugins .tlad-pijl { animation: none; opacity: 1; }
  .pg-tools-en-plugins .tlan-caret { animation: none; }
  .pg-tools-en-plugins .tlan-balk i, .pg-tools-en-plugins .tlan.isIn .tlan-balk i { animation: none; transform: scaleX(1); }
  .pg-tools-en-plugins .thub-mat-r { opacity: 1; transform: none; }
}