/* ============================================================
   weggever.css, landingspagina per gratis download.
   Eén stylesheet voor alle zeven weggevers. Per pagina zet je
   op <main> een --wg-accent / --wg-accent-2 als een gids een
   eigen kleuraccent nodig heeft; laat je ze weg, dan pakt hij
   het merk-accent uit tokens.css.

   Structuur volgt de klassieke lead-magnet-opbouw:
   hero + boekenwaaier → social proof → wat er in zit →
   herkenning → wat er daarna gebeurt → vragen → slot-cta.
   ============================================================ */

.page--wg {
  --wg-accent: var(--accent-2);
  --wg-accent-2: var(--accent-3);
  --wg-paper-shadow: 0 40px 90px -30px rgba(4, 8, 16, 0.62);
}
[data-theme="light"] .page--wg {
  --wg-paper-shadow: 0 40px 90px -34px rgba(18, 30, 45, 0.34);
}

/* ============================================================
   0. MERKBALK EN JURIDISCHE REGEL
   Een weggeverpagina heeft geen menu: elke uitgaande link is een
   afslag weg van het formulier. Wat overblijft is de afzender.
   ============================================================ */
.wg-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
}
/* alleen het beeldmerk: op een pagina met één doel hoeft de naam er niet
   voluit bij te staan. */
.wg-topbar .brand-mark {
  width: clamp(34px, 30px + 0.9vw, 44px);
  height: clamp(34px, 30px + 0.9vw, 44px);
}

/* Licht/donker-schakelaar. Absoluut rechts, zodat het beeldmerk optisch
   in het midden blijft staan; de knop zelf komt uit layout.css. */
.wg-topbar .theme-toggle {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
}

.wg-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.6rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.wg-legal a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}
.wg-legal a:hover {
  color: var(--ink);
}

/* ============================================================
   1. HERO
   ============================================================ */
.wg-hero {
  position: relative;
  padding-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  padding-bottom: 0;
  overflow: hidden;
  text-align: center;
}
.wg-hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 78%;
  background: radial-gradient(46% 52% at 50% 30%, var(--mesh-1), transparent 70%),
    radial-gradient(38% 44% at 74% 12%, var(--mesh-2), transparent 72%);
  opacity: var(--mesh-alpha);
  pointer-events: none;
  z-index: 0;
}
.wg-hero > .container {
  position: relative;
  z-index: 1;
}
.wg-hero .eyebrow {
  justify-content: center;
}

/* De naam van de gids staat niet in de kop, dus die moet hier leesbaar zijn:
   geen weggemoffelde eyebrow maar een label dat je in één oogopslag leest. */
.wg-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 auto;
  padding: 0.5em 1.1em 0.5em 0.9em;
  border-radius: 999px;
  font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg-3) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 0 0 1px var(--glass-border),
    0 14px 34px -22px rgba(0, 0, 0, 0.5);
}
.wg-hero__badge::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 0 0.26rem color-mix(in srgb, var(--accent-2) 20%, transparent);
}
.wg-hero__head {
  padding-top: clamp(2rem, 1.4rem + 3.6vw, 4.6rem);
}
.wg-hero__title {
  font-size: clamp(2.6rem, 1.3rem + 5.6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 640;
  max-width: 17ch;
  margin: 0.7rem auto 0;
}
.wg-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: -0.018em;
  max-width: 46ch;
  margin: clamp(1.1rem, 0.8rem + 1vw, 1.8rem) auto 0;
}
.wg-hero__act {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.wg-hero__act .btn {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  padding: 1.05em 2.1em;
}
.wg-hero__meta {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  letter-spacing: -0.01em;
}

/* ---------- de waaier met echte pagina's uit de gids ---------- */
.wg-deck {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  /* bewust lager dan een pagina hoog is: de waaier loopt onderaan
     de hero door en wordt daar door overflow:hidden afgesneden. */
  height: clamp(250px, 15vw + 140px, 380px);
  perspective: 1600px;
}
.wg-deck__page {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(180px, 15vw + 90px, 300px);
  border-radius: clamp(8px, 0.8vw, 14px);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--wg-paper-shadow);
  transform: translateX(-50%) translateX(var(--dx, 0)) translateY(var(--dy, 0))
    rotate(var(--rot, 0deg));
  transform-origin: 50% 100%;
}
.wg-deck__page img {
  display: block;
  width: 100%;
  height: auto;
}
/* de cover ligt vooraan en iets hoger dan de rest */
.wg-deck__page--cover {
  z-index: 5;
  --dy: -12%;
  width: clamp(200px, 17vw + 96px, 330px);
  box-shadow: 0 50px 110px -28px rgba(4, 8, 16, 0.75);
}
[data-theme="light"] .wg-deck__page--cover {
  box-shadow: 0 50px 110px -32px rgba(18, 30, 45, 0.42);
}
.wg-deck__page--n1 { --dx: -152%; --dy: 9%; --rot: -14deg; z-index: 1; }
.wg-deck__page--n2 { --dx: -80%;  --dy: 4%; --rot: -7deg;   z-index: 3; }
.wg-deck__page--n3 { --dx: 80%;   --dy: 4%; --rot: 7deg;    z-index: 3; }
.wg-deck__page--n4 { --dx: 152%;  --dy: 9%; --rot: 14deg;   z-index: 1; }

/* het enige niet-gevraagde moment op de pagina: de waaier valt
   bij het laden open vanuit een gesloten stapel. */
.has-js[data-motion="on"] .wg-deck__page {
  animation: wg-fan 1s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 0.07s + 0.15s);
}
@keyframes wg-fan {
  from {
    transform: translateX(-50%) translateY(var(--dy, 0)) translateY(5%) rotate(0deg)
      scale(0.94);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-js[data-motion="on"] .wg-deck__page {
    animation: none;
  }
}

/* de waaier loopt onderaan de hero door in de sectie eronder */
.wg-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(56px, 6vw, 96px);
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 6;
}

@media (max-width: 700px) {
  .wg-deck {
    height: clamp(240px, 46vw + 60px, 340px);
  }
  .wg-deck__page--n1,
  .wg-deck__page--n4 {
    display: none;
  }
  .wg-deck__page--n2 { --dx: -66%; --rot: -9deg; }
  .wg-deck__page--n3 { --dx: 66%;  --rot: 9deg; }
}

/* gecentreerde sectiekop. .section__head uit pages.css heeft wel een
   max-width maar geen auto-marges, dus zonder dit blijft een lange kop
   links in het blok hangen. */
.wg-head {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.wg-head .eyebrow {
  justify-content: center;
}
.wg-head .h2 {
  text-wrap: balance;
}
/* Twee zinnen in een kop die samen niet op een regel passen. Balance zoekt
   de kortste twee regels en breekt daarvoor middenin de tweede zin
   ("... staat er. Hij / pakt hem alleen nooit."). Elke zin een eigen blok
   geven houdt de breuk op de punt: zin een boven, zin twee eronder. De
   gradient-woorden van grad-words.js blijven gewoon inline binnen het blok. */
.wg-head .wg-kop--zinnen em {
  display: block;
}
/* Zelfde truc, maar voor een kop van één zin met een komma erin. Balance
   zoekt daar de kortste twee regels en breekt middenin de tweede helft
   ("Acht plekken, één / keer aanzetten."). Het em-blok houdt de breuk op de
   komma, zodat "één keer aanzetten." heel op regel twee staat. */
.wg-head .wg-kop--em-onder em {
  display: block;
}
.wg-head .lead {
  max-width: 50ch;
  margin-inline: auto;
}

/* ============================================================
   2. SOCIAL PROOF
   ============================================================ */
.wg-proof {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.wg-proof__grid {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.5rem);
}
@media (min-width: 860px) {
  .wg-proof__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wg-quote {
  border-radius: var(--r);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.wg-quote__stars {
  color: var(--accent-deep);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}
.wg-quote blockquote {
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
  flex: 1;
}
.wg-quote__by {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.wg-quote__by img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.wg-quote__who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.wg-quote__who b {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.wg-quote__who span {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ============================================================
   3. WAT ER IN ZIT, drie stappen, elk met een echte pagina
   ============================================================ */
.wg-inside__grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.8rem);
  margin-top: clamp(2.4rem, 1.6rem + 2.5vw, 4rem);
}
@media (min-width: 900px) {
  .wg-inside__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wg-step {
  border-radius: var(--r-lg);
  padding: clamp(1rem, 0.7rem + 1vw, 1.4rem);
  display: flex;
  flex-direction: column;
}
.wg-step__shot {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(4, 8, 16, 0.6);
  /* alleen de bovenkant van de pagina: dat is waar de kop staat */
  aspect-ratio: 4 / 3;
}
.wg-step__shot img {
  display: block;
  width: 100%;
  height: auto;
}
.wg-step__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  margin: 1.4rem 0 0.5rem;
}
.wg-step h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  font-weight: 640;
  color: var(--ink);
}
.wg-step p {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34ch;
}
.wg-cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.2rem, 1.5rem + 2vw, 3.4rem);
}

/* ============================================================
   4. HERKENBAAR, de pijn, zonder nummers (het is geen volgorde)
   ============================================================ */
.wg-pain__grid {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1.2vw, 1.4rem);
  margin-top: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem);
}
@media (min-width: 860px) {
  .wg-pain__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.wg-pain__item {
  border-radius: var(--r);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  position: relative;
  overflow: hidden;
}
.wg-pain__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--wg-accent), transparent);
}
.wg-pain__item h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  letter-spacing: -0.025em;
  font-weight: 640;
  color: var(--ink);
  line-height: 1.2;
}
.wg-pain__item p {
  margin-top: 0.6rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 36ch;
}

/* ============================================================
   6. SLOT-CTA
   ============================================================ */
.wg-close {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(168deg, #101827, #05070c 62%);
  border: 1px solid var(--line-strong);
  /* dit vlak blijft donker in beide thema's, dus ook in light de lichte
     gradient-tekst: de donkerblauwe variant zou hier wegvallen. */
  --grad-text: var(--grad-text-dark);
  color: var(--ink-invert);
  padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  text-align: center;
}
/* de laatste sectie hoeft niet ook nog eens de volle sectie-marge naar
   de footer te houden; het slotblok heeft zijn eigen ruimte al. */
.wg-outro {
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.wg-close::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background: radial-gradient(44% 50% at 50% 18%, rgba(102, 198, 255, 0.5), transparent 66%),
    radial-gradient(36% 42% at 80% 4%, rgba(79, 147, 255, 0.42), transparent 68%);
  pointer-events: none;
}
.wg-close > * {
  position: relative;
}
.wg-close h2 {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-inline: auto;
  color: #f4f7fb;
}
.wg-close p {
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: rgba(238, 243, 249, 0.66);
  max-width: 40ch;
}
.wg-close__act {
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.wg-close__act .btn {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  padding: 1.05em 2.1em;
}
.wg-close__fine {
  font-size: var(--fs-small);
  color: rgba(238, 243, 249, 0.45);
}

/* ============================================================
   7. BEDANKPAGINA (bedankt.html)
   Eén pagina achter alle weggevers. De held is niet een vinkje
   in een cirkel maar de mail die eraan komt: zo weet de bezoeker
   waar hij in zijn inbox naar moet zoeken.
   ============================================================ */
/* twee zinnen, twee regels: elke zin krijgt zijn eigen blok en breekt
   daarbinnen gewoon mee op smalle schermen. */
.wg-line {
  display: block;
}
.wg-line + .wg-line {
  margin-top: 0.15em;
}
/* Eén zin in twee lengtes. Op de telefoon is de kolom ~339px en heeft de
   lange versie er 419 nodig, dus valt de zin eronder op regel 3. De korte
   versie houdt het op twee regels; vanaf 768px staat de lange er weer.
   Beide zijn altijd de eerste van het paar, dus de tussenruimte hierboven
   geldt voor geen van tweeën. */
.wg-line--lang {
  display: none;
}
.wg-line--kort,
.wg-line--lang {
  margin-top: 0;
}
@media (min-width: 768px) {
  .wg-line--kort {
    display: none;
  }
  .wg-line--lang {
    display: block;
  }
}

/* Uitzondering op het paar hierboven: op de telefoon breekt de eerste zin al
   over twee regels, dus zou een eigen blok de tweede zin naar regel 3 duwen.
   Onder 768px lopen beide zinnen daarom door, zodat de tweede achter de
   eerste blijft staan; vanaf 768px staan ze weer onder elkaar. */
@media (max-width: 767.98px) {
  .wg-lead--doorloop .wg-line {
    display: inline;
  }
  .wg-lead--doorloop .wg-line + .wg-line {
    margin-top: 0;
  }
}

/* Twee zinnen die op de telefoon aan elkaar door lopen. De eerste zin vult
   daar anderhalve regel, waardoor de tweede zin in zijn eentje op regel drie
   belandt. Inline gezet eindigt hij netjes op regel twee, achter "output.".
   De spatie ertussen komt uit ::before: in de HTML staan de spans tegen
   elkaar aan, zonder witruimte. Vanaf 768px blijft het gewoon twee blokken. */
@media (max-width: 767px) {
  .wg-lead--doorloop {
    /* op de smalste telefoons (375px) passen de twee zinnen niet samen op
       twee regels; balance houdt de derde regel dan van een los woord af. */
    text-wrap: balance;
  }
  .wg-lead--doorloop .wg-line {
    display: inline;
  }
  .wg-lead--doorloop .wg-line + .wg-line {
    margin-top: 0;
  }
  .wg-lead--doorloop .wg-line + .wg-line::before {
    content: " ";
  }
}

/* Twee zinnen die op de telefoon elk hun eigen regel krijgen en vanaf 768px
   weer achter elkaar staan. Beide zinnen dragen de klasse: pas als ze allebei
   inline zijn vormen ze samen één regel naast de blokken eromheen. Zou alleen
   de tweede inline worden, dan kreeg die een eigen anoniem blok en bleef hij
   eronder hangen. De spatie ertussen komt uit ::before, want in de HTML staan
   de spans tegen elkaar aan. */
@media (min-width: 768px) {
  .wg-line--samen {
    display: inline;
  }
  .wg-line--samen + .wg-line--samen::before {
    content: " ";
  }
}

/* Spiegelbeeld van hierboven: hier is het juist de brede kolom waar de lange
   eerste zin over twee regels valt, zodat de tweede zin op regel drie
   terechtkomt. Vanaf 768px lopen ze daarom door, zodat de tweede achter
   "knop klikt." blijft staan en het geheel op twee regels eindigt. De korte
   variant blijft buiten schot, anders zou hij op desktop weer opduiken.
   Onder 768px verandert er niets: daar staan de blokken al goed. */
@media (min-width: 768px) {
  .wg-lead--doorloop-breed .wg-line:not(.wg-line--kort) {
    display: inline;
  }
  .wg-lead--doorloop-breed .wg-line + .wg-line {
    margin-top: 0;
  }
  .wg-lead--doorloop-breed .wg-line + .wg-line::before {
    content: " ";
  }
}

.th-hero .wg-hero__title {
  max-width: 14ch;
}
.th-hero .wg-hero__lead b {
  color: var(--ink);
  font-weight: 600;
}

.th-mailwrap {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}
.th-mail {
  max-width: 620px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: var(--wg-paper-shadow);
}
.th-mail__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.th-mail__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
.th-mail__box {
  margin-left: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}
.th-mail__row {
  display: flex;
  gap: clamp(0.8rem, 0.6rem + 0.7vw, 1.1rem);
  padding: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  /* de regel is 'net binnen': een zweem accent langs de linkerkant,
     tot aan de rand van het venster */
  background:
    linear-gradient(90deg, var(--glass-tint), transparent 42%);
}
.th-mail__av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.th-mail__body {
  min-width: 0;
  flex: 1;
}
.th-mail__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.th-mail__from {
  font-size: 0.95rem;
  font-weight: 640;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.th-mail__when {
  font-size: 0.75rem;
  color: var(--accent-deep);
  font-weight: 600;
  flex: none;
}
.th-mail__subj {
  margin-top: 0.35rem;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.028em;
  font-weight: 640;
  color: var(--ink);
  max-width: none;
}
.th-mail__prev {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
}
.th-mail__file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 100%;
}
.th-mail__file svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent-deep);
}
.th-mail__file b {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* het enige geënsceneerde moment: de mail komt binnen, de bijlage
   verschijnt een tel later. */
.has-js[data-motion="on"] .th-mail {
  animation: th-arrive 0.8s var(--ease-spring) 0.25s both;
}
.has-js[data-motion="on"] .th-mail__file {
  animation: th-attach 0.5s var(--ease-out) 0.85s both;
}
@keyframes th-arrive {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
}
@keyframes th-attach {
  from { transform: translateY(6px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .has-js[data-motion="on"] .th-mail,
  .has-js[data-motion="on"] .th-mail__file {
    animation: none;
  }
}

.wg-close__fine a {
  color: rgba(238, 243, 249, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 243, 249, 0.28);
}
.wg-close__fine a:hover {
  color: #fff;
}

/* ============================================================
   8. BENTO, het probleemvlak

   Herzien. De eerste versie was zeven identieke glazen kaarten:
   alleen de maat verschilde, het materiaal niet. Nu heeft elke tegel
   een materiaal dat iets betekent:

     paneel   vlak, haarlijn, rustig, de meeste cellen
     artefact een stuk interface: invoerbalk,
              modellenlijst, knipperende cursor, a, c, e
     bleed    beeld loopt tot de rand van de
              tegel door, bijschrift op het beeld, g, f

   Eén tegel mag hard zijn: de omslag van de gids. Dat is het
   antwoord op alles eromheen, dus dat is waar de merkgradient zit.
   Verder geen accentkleur.

   Typografie-regel: monospace = letterlijk getypt of door de machine
   teruggegeven. De rest is gewone tekst. Geen mono voor labels.
   ============================================================ */
.bento {
  display: grid;
  gap: clamp(0.7rem, 0.5rem + 0.7vw, 1rem);
  margin-top: clamp(2.2rem, 1.5rem + 2.5vw, 3.6rem);
}
@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "g g"
      "d d"
      "e e"
      "f f";
  }
  /* alleen hier: onder 700px bestaan deze gebiedsnamen niet en zou
     grid-area de cellen juist door elkaar gooien. */
  .bento__cell--a { grid-area: a; }
  .bento__cell--b { grid-area: b; }
  .bento__cell--c { grid-area: c; }
  .bento__cell--d { grid-area: d; }
  .bento__cell--e { grid-area: e; }
  .bento__cell--f { grid-area: f; }
  .bento__cell--g { grid-area: g; }
}
@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    /* Vaste ondergrens per rij, geen vaste hoogte: de omslag (g) en het
       anker (a) spannen rij 1 en 2 samen, dus zonder ondergrens bepaalt de
       kortste tekst in b of c hoe groot de omslag wordt. Daardoor kreeg de
       ene weggeverpagina een merkbaar kleiner raster dan de andere. De
       maten hieronder zijn het rooster van de blueprintpagina; een cel met
       meer inhoud dan dat mag nog steeds groeien (auto). */
    grid-template-rows:
      minmax(18.6rem, auto)
      minmax(20.5rem, auto)
      minmax(16.1rem, auto)
      auto;
    grid-template-areas:
      "a a b g"
      "a a c g"
      "d d e e"
      "f f f f";
  }
}

/* ---------- het paneel: het rustige materiaal ---------- */
.bento__cell {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bento__cell h3 {
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem);
  line-height: 1.2;
  letter-spacing: -0.026em;
  font-weight: 640;
  color: var(--ink);
}
.bento__cell p {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
/* de grote cel draagt het probleem waar alle andere uit voortkomen */
.bento__cell--a {
  gap: 0.7rem;
}
.bento__cell--a h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* ============================================================
   ARTEFACT 1, de invoerbalk
   Waar dit hele hoofdstuk over gaat is één handeling: iets in een
   balk typen. Vijf mensen, vijf balken, vijf formuleringen.
   ============================================================ */
.bento__type {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.bento__type-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0.62rem 0.62rem 0.66rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-3);
  min-width: 0;
}
.bento__who {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.bento__typed {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* het verstuurknopje: het enige wat elke balk gemeen heeft */
.bento__send {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
/* op licht is een lichte cirkel te zwak voor een licht pijltje */
[data-theme="light"] .bento__send {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.bento__send::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-top: 1.5px solid var(--bg-2);
  border-right: 1.5px solid var(--bg-2);
  transform: rotate(-45deg) translate(-0.5px, 0.5px);
}
/* verder naar onderen wordt het slordiger en vager: zo voelt het ook */
.bento__type-row:nth-of-type(3) { opacity: 0.86; }
.bento__type-row:nth-of-type(4) { opacity: 0.72; }
.bento__type-row:nth-of-type(5) { opacity: 0.58; }
.bento__type-row:nth-of-type(6) { opacity: 0.42; }
.bento__type-row:nth-of-type(7) { opacity: 0.26; }

/* ============================================================
   ARTEFACT 2, de lege balk
   Een knipperende cursor achter een placeholder die je al veertig
   keer hebt getypt. De leegte is het punt, dus er staat verder niets.
   ============================================================ */
.bento__empty {
  margin-top: auto;
  padding-top: 1.5rem;
}
.bento__empty-box {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.85rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg-3);
}
.bento__caret {
  flex: none;
  width: 2px;
  height: 1.1em;
  border-radius: 1px;
  background: var(--accent-2);
  animation: bento-caret 1.15s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bento__caret { animation: none; }
}
@keyframes bento-caret {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
.bento__empty-box em {
  flex: 1;
  min-width: 0;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bento__empty-box .bento__send { margin-left: auto; }

/* ============================================================
   ARTEFACT 3, de modellenlijst die nooit opengaat
   ============================================================ */
.bento__picker {
  margin-top: auto;
  padding-top: 1.3rem;
}
.bento__picker-now {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-3);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bento__picker-now::after {
  content: "";
  margin-left: auto;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg) translate(-1px, -1px);
}
.bento__picker-rest {
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.bento__picker-rest li {
  padding: 0.32rem 0.75rem;
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.bento__picker-rest li:nth-child(2) { opacity: 0.72; }
.bento__picker-rest li:nth-child(3) { opacity: 0.5; }

/* ============================================================
   HET GETAL, één harde datum of bedrag, als machinefeit
   ============================================================ */
.bento__stat {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.bento__stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0.6rem;
}
.bento__stat span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
}

/* ---------- de doorverwijzing naar een afdeling die hier niet bestaat ----------
   Boven het machineantwoord (mono, want letterlijk teruggegeven), eronder hoe
   het bij dit bedrijf werkelijk heet. Het verschil is het hele punt. */
.bento__route {
  margin-top: auto;
  padding-top: 1.2rem;
  /* zelfde reden als bij het citaat hieronder: de omslag ernaast bepaalt de
     rijhoogte, dus de streep maakt van de overgebleven ruimte een indeling. */
  border-top: 1px solid var(--line);
}
.bento__route-said {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}
.bento__route-real {
  position: relative;
  margin-top: 0.55rem;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}
.bento__route-real::before {
  content: "\21B3";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-faint);
  font-weight: 400;
}

/* ---------- vier onderdelen, waarvan er twee ontbreken ----------
   Doorgetrokken = wat mensen wél opschrijven, gestippeld = wat ze
   overslaan. De vorm van het blokje vertelt het, niet een label. */
.bento__parts {
  margin-top: auto;
  padding-top: 1.3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.bento__part {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.4rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bento__part--mist {
  border-style: dashed;
  border-color: var(--line-strong);
  background: none;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ---------- de zin die niemand zo schrijft ---------- */
.bento__strike {
  margin-top: auto;
  padding-top: 1.2rem;
  /* deze cel vult een rij die door de omslag ernaast wordt bepaald, dus er
     valt ruimte tussen alinea en citaat. Met een streep leest die ruimte
     als indeling in plaats van als gat. */
  border-top: 1px solid var(--line);
}
.bento__strike q {
  display: block;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  quotes: "\201C" "\201D";
}
.bento__instead {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.bento__instead::before { content: "\201C"; }
.bento__instead::after { content: "\201D"; }

/* ---------- het handwerk ertussen, als lus van vier stappen ---------- */
.bento__loop {
  margin-top: auto;
  padding-top: 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.9;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}
.bento__loop i {
  font-style: normal;
  color: var(--line-strong);
}

/* ---------- twee berichten: wat er wél en niet gebeurde ---------- */
.bento__notes {
  margin-top: auto;
  padding-top: 1.3rem;
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 560px) {
  .bento__notes { grid-template-columns: 1fr 1fr; }
}
.bento__note {
  border-left: 2px solid var(--line-strong);
  padding: 0.1rem 0 0.1rem 0.85rem;
}
.bento__note em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
  /* geen merk-gradient hier: dit is een labeltje, geen accent */
  background: none;
  -webkit-text-fill-color: currentColor;
}
.bento__note span {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
}
.bento__note--gone {
  border-left-color: var(--line);
}
.bento__note--gone span { color: var(--ink-faint); }

/* ============================================================
   DE OMSLAG, de enige harde tegel
   Geen plat plaatje maar een boekje: dikte, een rug die je ziet
   omdat het ding een slag gedraaid staat, en een schaduw eronder
   zodat het ergens op ligt. Dit is het antwoord op alle andere
   tegels, dus hier zit de merkgradient en verder nergens.
   ============================================================ */
.bento__cell--g {
  padding: 0;
  justify-content: flex-end;
  min-height: clamp(384px, 26vw + 140px, 480px);
  border-color: color-mix(in srgb, var(--accent-2) 26%, var(--line));
  background:
    radial-gradient(78% 58% at 50% 8%, rgba(102, 198, 255, 0.28), transparent 72%),
    linear-gradient(168deg, #16324a 0%, #0b1420 46%, var(--bg-2) 100%);
}
/* het schijnsel onder de omslag: die staat op iets, hij zweeft niet */
.bento__cell--g::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 130%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(102, 198, 255, 0.16), transparent 78%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .bento__cell--g {
  background:
    radial-gradient(78% 58% at 50% 8%, rgba(102, 198, 255, 0.3), transparent 72%),
    linear-gradient(168deg, #dff2fd 0%, #eaf2fb 48%, var(--bg-2) 100%);
}

.bento__cover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  max-width: 200px;
  transform: translate(-50%, -56%);
  /* de dikte van het boekje; verderop wordt hij groter zodra er
     ruimte voor is */
  --mock-dik: 13px;
  --mock-draai: 21deg;
  perspective: 1500px;
  perspective-origin: 46% 42%;
  z-index: 1;
}
@media (min-width: 1000px) {
  /* hier is de tegel hoog en smal: twee banen, boekje boven,
     bijschrift in wat overblijft */
  .bento__cell--g {
    display: grid;
    grid-template-rows: 68% 1fr;
  }
  .bento__cover {
    top: 43%;
    width: 90%;
    max-width: none;
    --mock-dik: 18px;
  }
}

.bento__mock {
  position: relative;
  margin: 0;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(var(--mock-draai));
}
.bento__mock img {
  display: block;
  width: 100%;
  height: auto;
  /* de rugzijde is strak, de voorsnede iets ronder: zo vouwt papier */
  border-radius: 2px 7px 7px 2px;
  box-shadow:
    0 2px 0 0 rgba(255, 255, 255, 0.06) inset,
    26px 42px 60px -30px rgba(2, 6, 14, 0.95),
    10px 16px 30px -18px rgba(2, 6, 14, 0.7);
}
/* de rug: hetzelfde vlak, een kwartslag weggedraaid vanaf de linkerrand */
.bento__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--mock-dik);
  transform-origin: left center;
  transform: rotateY(90deg);
  border-radius: 2px 0 0 2px;
  /* de rug is donker als de omslag, maar met een lichtval erover en een
     cyaan haarlijn op de vouw: anders valt hij weg tegen de tegel */
  background: linear-gradient(90deg, #060b15 0%, #16263c 34%, #0a1220 72%, #05080f 100%);
  box-shadow:
    inset -1px 0 0 rgba(174, 245, 253, 0.35),
    inset 1px 0 0 rgba(255, 255, 255, 0.05);
}
/* de bovensnede: een streepje papier, anders lijkt het een bordje */
.bento__edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--mock-dik);
  transform-origin: center top;
  transform: rotateX(-90deg);
  /* de bovensnede: een stapeltje papier, geen bordje */
  background: linear-gradient(180deg, #e7edf4 0%, #cdd7e2 45%, #9aa8b8 100%);
  border-radius: 2px 2px 0 0;
}
/* strijklicht over de omslag, van linksboven */
.bento__sheen {
  position: absolute;
  inset: 0;
  border-radius: 2px 7px 7px 2px;
  background: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.06) 16%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 78%,
    rgba(255, 255, 255, 0.09) 100%
  );
  pointer-events: none;
}
/* de spiegeling onder het boekje. Op een donkere tegel is een donkere
   contactschaduw onzichtbaar; een weerkaatsing vertelt hetzelfde en
   werkt in beide thema's. */
.bento__mock-reflect {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* spiegelen om het midden, niet om de bovenrand: anders klapt de
     weerkaatsing over de omslag heen in plaats van eronder. Het masker
     draait mee, dus dat loopt hier andersom. */
  transform-origin: center center;
  transform: scaleY(-1);
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 38%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 38%);
  pointer-events: none;
}
.bento__mock-reflect img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 7px 7px 2px;
  box-shadow: none;
}
[data-theme="light"] .bento__mock-reflect { opacity: 0.1; }
[data-theme="light"] .bento__mock img {
  box-shadow:
    26px 42px 60px -32px rgba(16, 34, 56, 0.6),
    10px 16px 28px -20px rgba(16, 34, 56, 0.45);
}

.bento__cover-cap {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 3.4rem 1.4rem 1.35rem;
  max-width: 26ch;
  margin-inline: auto;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}
/* De wegvloeier waar het boekje op landt. Hij hoort bij de tegel, niet
   bij de zin: als hij op het bijschrift zelf staat is hij maar 26ch
   breed en tekent hij een doos om de tekst heen. Vandaar een laag die
   over de volle tegel loopt; overflow: hidden op de cel snijdt hem af. */
.bento__cover-cap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--bg-2) 62%);
  pointer-events: none;
}
@media (min-width: 1000px) {
  .bento__cover-cap {
    grid-row: 2;
    align-self: center;
    padding: 0 1.4rem;
  }
  .bento__cover-cap::before {
    content: none;
  }
}
.bento__cover-cap b {
  color: var(--ink);
  font-weight: 640;
}

/* ============================================================
   BLEED 2, de brede cel: de pagina uit de gids loopt tot de rand
   ============================================================ */
.bento__cell--f {
  padding: 0;
  gap: 0;
}
.bento__split {
  display: grid;
  align-items: center;
  min-width: 0;
}
.bento__split > * { min-width: 0; }
.bento__split-text {
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
@media (min-width: 820px) {
  .bento__split { grid-template-columns: 1fr 1.06fr; }
  .bento__split-text { padding-right: 0.4rem; }
}
.bento__shot {
  margin: 0;
  align-self: stretch;
  display: block;
  overflow: hidden;
  /* de grond krijgt de kleur van de gidspagina zelf, zodat het beeld
     naadloos doorloopt tot de rand in plaats van bijgesneden te worden */
  background: #060a12;
}
.bento__shot--paper {
  background: #f4f7fb;
}
.bento__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* onder 820px staat het beeld onder de tekst en loopt het over de
   volle breedte door tot beide onderhoeken */
@media (max-width: 819.98px) {
  .bento__shot img { height: auto; min-height: 0; }
}
.bento__split-cap {
  font-size: 0.74rem;
  letter-spacing: -0.005em;
  color: var(--ink-faint);
}

/* ---------- fragmenten die je letterlijk overtypt ---------- */
.bento__solve {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.bento__file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0.36rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-3);
}
.bento__file i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--grad-accent-soft);
  flex: none;
}

/* ============================================================
   9. HET COMPLETE PAKKET (het-complete-pakket.html)

   Dezelfde pagina-opbouw als een losse weggever, met drie
   afwijkingen die alleen hier bestaan:

     de waaier  toont vijftien omslagen in plaats van vijf pagina's
                uit een gids: bij dit aanbod is de stapel het aanbod
     het rooster  vervangt de drie genummerde stappen door de vijftien
                gidsen zelf, plus een zestiende tegel die optelt
     de stapel  het boekje in de bento-omslagtegel krijgt twee
                omslagen achter zich

   Alles daarbuiten komt uit de blokken hierboven.
   ============================================================ */

/* ---------- de waaier van vijftien omslagen ----------
   Elke omslag krijgt in de HTML alleen --k mee, zijn plek ten opzichte
   van het midden (-7 tot 7). Daaruit volgt de rest: hoe ver hij opzij
   ligt, hoe schuin hij staat en hoe ver hij op de boog zakt. Zo hoeft
   er bij een zestiende gids niets in deze regels te veranderen.

   De stapelvolgorde loopt een kant op, van links naar rechts, in
   plaats van symmetrisch vanaf de omslag in het midden. Dat is geen
   detail: de titel op een omslag staat linksonder, dus bij een
   symmetrische waaier verdwijnt de eerste helft van elke titel rechts
   van het midden onder de buurkaart ("icrosoft opilot"). Zo dekt elke
   omslag zijn linkerbuur af en blijven de namen leesbaar.

   Anders dan bij een losse gids is er hier geen omslag die groter en
   hoger vooraan ligt: alle vijftien zijn even belangrijk, dus de
   middelste staat gewoon in de rij. */
.wg-deck--pack {
  --stap: 52%;
  --draai: 3.1deg;
  --zak: 0.62%;
  height: clamp(230px, 9vw + 150px, 300px);
}
.wg-deck--pack .wg-deck__page {
  width: clamp(92px, 5.2vw + 46px, 138px);
  --dx: calc(var(--k) * var(--stap));
  --rot: calc(var(--k) * var(--draai));
  --dy: calc(var(--k) * var(--k) * var(--zak));
  z-index: calc(var(--k) + 8);
}

/* smaller scherm: de buitenste omslagen vallen weg in plaats van dat
   de waaier krimpt tot postzegels. Vijftien, elf, vijf. Wat wegvalt
   staat gewoon in het rooster eronder. */
@media (max-width: 1000px) {
  .wg-deck--pack .wg-deck__page--ver { display: none; }
}
@media (max-width: 700px) {
  .wg-deck--pack {
    --stap: 60%;
    --draai: 7deg;
    --zak: 2%;
    height: clamp(190px, 26vw + 90px, 250px);
  }
  .wg-deck--pack .wg-deck__page--mid { display: none; }
  .wg-deck--pack .wg-deck__page { width: clamp(84px, 21vw, 112px); }
}

/* ---------- de vijftien gidsen, plus de optelsom ----------
   Vier banen, vier rijen: vijftien omslagen en een zestiende tegel,
   zodat het rooster geen gat heeft op de plek waar geen gids is. */
.wg-pack__grid {
  display: grid;
  gap: clamp(0.8rem, 0.5rem + 1.2vw, 1.4rem);
  margin-top: clamp(2.4rem, 1.6rem + 2.5vw, 4rem);
}
@media (min-width: 560px) {
  .wg-pack__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .wg-pack__grid { grid-template-columns: repeat(4, 1fr); }
}

.wg-pack__item {
  border-radius: var(--r-lg);
  padding: clamp(0.85rem, 0.65rem + 0.8vw, 1.2rem);
  display: flex;
  flex-direction: column;
}
.wg-pack__cover {
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 18px 40px -22px rgba(4, 8, 16, 0.6);
}
.wg-pack__cover img {
  display: block;
  width: 100%;
  height: auto;
}
.wg-pack__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  margin: 1.1rem 0 0.45rem;
}
.wg-pack__item h3 {
  font-size: clamp(1rem, 0.93rem + 0.35vw, 1.18rem);
  line-height: 1.16;
  letter-spacing: -0.026em;
  font-weight: 640;
  color: var(--ink);
}
.wg-pack__item p {
  margin-top: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* de regel eronder duwt zichzelf naar de onderkant, zodat de
   tegels dezelfde voet krijgen ook al is de ene tekst langer */
.wg-pack__item .wg-pack__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}

/* de zestiende tegel: geen gids maar de optelsom. Enige plek in dit
   rooster met de merkgradient, net als de omslagtegel in de bento. */
.wg-pack__sum {
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 0.9rem + 1vw, 1.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent-2) 26%, var(--line));
  background:
    radial-gradient(78% 58% at 50% 8%, rgba(102, 198, 255, 0.28), transparent 72%),
    linear-gradient(168deg, #16324a 0%, #0b1420 46%, var(--bg-2) 100%);
}
[data-theme="light"] .wg-pack__sum {
  background:
    radial-gradient(78% 58% at 50% 8%, rgba(102, 198, 255, 0.3), transparent 72%),
    linear-gradient(168deg, #dff2fd 0%, #eaf2fb 48%, var(--bg-2) 100%);
}
.wg-pack__sum-n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3.2rem, 2.2rem + 3.4vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.wg-pack__sum-lead {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-soft);
}
.wg-pack__sum-list {
  list-style: none;
  margin: clamp(1.2rem, 0.9rem + 1vw, 1.7rem) 0 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
  text-align: left;
}
.wg-pack__sum-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}
.wg-pack__sum-list b {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wg-pack__sum-list span {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------- de omslagtegel als stapel ----------
   Het boekje uit de bento houdt zijn dikte en rug; er liggen alleen
   twee omslagen achter, gedimd en iets kleiner, zodat de tegel het
   pakket toont en niet een enkele gids. */
.bento__cover--stack {
  width: 46%;
  max-width: 176px;
}
@media (min-width: 1000px) {
  /* breder dan het losse boekje op de andere weggeverpagina's mag: die
     heeft een spiegeling onder zich die de tegel vult, de stapel niet. */
  .bento__cover--stack {
    top: 46%;
    width: 76%;
    max-width: none;
  }
}
.bento__cover--stack .bento__mock {
  z-index: 2;
}
.bento__stack-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  border-radius: 2px 7px 7px 2px;
  overflow: hidden;
  transform-origin: 50% 100%;
  box-shadow: 18px 30px 52px -30px rgba(2, 6, 14, 0.9);
}
.bento__stack-back img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
/* de omslagen erachter mogen niet meelezen: een sluier eroverheen
   zet ze in de schaduw van het boekje ervoor */
.bento__stack-back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 18, 0.34);
}
[data-theme="light"] .bento__stack-back::after {
  background: rgba(22, 38, 58, 0.22);
}
.bento__stack-back--l { transform: translate(-17%, 3%) rotate(-10deg) scale(0.92); }
.bento__stack-back--r { transform: translate(17%, 5%) rotate(10deg) scale(0.92); }

/* ============================================================
   10. Het sessiebeeld (alleen ai-website-blauwdruk.html)
   Eén foto uit de sessie, breed en laag zodat hij als filmstill
   leest en niet als stockbeeld. De witte wand links is het
   rustvlak waar het bijschrift overheen valt; op smal scherm
   schuift het bijschrift eronder en verschuift de uitsnede
   naar rechts, waar de twee zitten.
   ============================================================ */
.wg-origin {
  padding: clamp(2.4rem, 1rem + 4vw, 4.5rem) 0 0;
}
.wg-origin__frame {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
}
.wg-origin__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1800 / 872;
  object-fit: cover;
  object-position: 62% 50%;
}
/* sluier onder het bijschrift: alleen links, zodat de foto rechts
   onaangeraakt blijft */
.wg-origin__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 9, 18, 0.86) 0%, rgba(4, 9, 18, 0.66) 18%, rgba(4, 9, 18, 0.3) 32%, transparent 44%);
}
[data-theme="light"] .wg-origin__frame::after {
  background: linear-gradient(90deg, rgba(9, 16, 28, 0.82) 0%, rgba(9, 16, 28, 0.6) 18%, rgba(9, 16, 28, 0.26) 32%, transparent 44%);
}
.wg-origin__cap {
  position: absolute;
  z-index: 2;
  left: clamp(1.1rem, 0.4rem + 2vw, 2.4rem);
  bottom: clamp(1.1rem, 0.4rem + 2vw, 2.4rem);
  max-width: min(23rem, 35%);
  color: #eef3f9;
}
.wg-origin__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.wg-origin__text {
  font-size: clamp(1.06rem, 0.9rem + 0.42vw, 1.22rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #eef3f9;
  text-wrap: pretty;
}
.wg-origin__text b { font-weight: 640; }
.wg-origin__who {
  margin-top: 0.75rem;
  font-size: 0.87rem;
  color: rgba(238, 243, 249, 0.62);
}

/* de enige uitgaande link op deze pagina: naar de aflevering waarin
   deze sessie te zien is. Opent in een nieuw tabblad, zodat de
   landingspagina met het formulier open blijft staan. */
.wg-origin__play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.42rem 0.9rem 0.42rem 0.42rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 14, 24, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #eef3f9;
  font-size: 0.87rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.wg-origin__play:hover {
  background: rgba(8, 14, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-1px);
}
.wg-origin__play-ic {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.wg-origin__play-ic svg { width: 0.85rem; height: 0.85rem; }

@media (max-width: 760px) {
  /* smal scherm: tekst over de foto zou over de gezichten vallen, dus
     zakt het bijschrift eronder. De sluier vervalt dan ook. */
  .wg-origin__img {
    aspect-ratio: 3 / 2;
    object-position: 62% 50%;
  }
  .wg-origin__frame::after { content: none; }
  .wg-origin__cap {
    position: static;
    max-width: none;
    padding: 1.1rem 1.15rem 1.25rem;
    color: inherit;
  }
  .wg-origin__text { color: var(--ink); }
  .wg-origin__who { color: var(--ink-faint); }
  /* onder de foto staat de knop niet meer op beeld, dus haalt hij
     zijn contrast uit de paginakleuren */
  .wg-origin__play {
    color: var(--ink);
    border-color: var(--line);
    background: transparent;
  }
  .wg-origin__play:hover { background: rgba(127, 216, 245, 0.08); }
}

/* ============================================================
   11. DE ROUTE: zes stappen in één glazen paneel (wg-flow)
   Eén object in plaats van zes tekstkolommen. Per stap één icoon,
   één titel, één zin en het gereedschap. De drie fases zijn banen
   in hetzelfde raster; de voorbereidingsbaan is getint omdat daar
   het verschil zit, en de twee iconen daarin zijn gevuld. Eén draad
   loopt door alle zes de iconen. Verving op 9 sep 2026 de "rail".
   ============================================================ */
.wg-flow-sec {
  /* Boven telt de padding-bottom van .wg-proof mee, want .section heeft op
     deze pagina zelf geen padding-top. Onderaan diezelfde som, zodat het
     paneel even ver van "wat er in zit" af staat als van de testimonials. */
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  padding-bottom: calc(clamp(3rem, 2rem + 4vw, 5.5rem) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
}

.wg-flow {
  --g: clamp(3rem, 2.4rem + 1.6vw, 3.6rem);     /* icoonmaat */
  --pt: clamp(1.4rem, 1rem + 1vw, 2rem);         /* ruimte boven het icoon */
  --thread: calc(var(--pt) + var(--g) / 2);      /* hoogte van de draad */
  --lane-h: calc(2.92rem + 1px);                 /* hoogte van een baankop: 0.9 + 1.12 + 0.9rem + haarlijn */
  margin: 0;
  padding: clamp(1.2rem, 0.7rem + 1.6vw, 2.2rem);
  border-radius: var(--r-xl);
}

/* het raster: rij 1 de fasebanen, rij 2 de zes stappen */
.wg-flow__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* fasebanen */
.wg-flow__lane {
  grid-row: 1;
  padding: 0.9rem 1.1rem 0;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  border-radius: var(--r-sm);
}
.wg-flow__lane--1 { grid-column: 1 / 3; }
.wg-flow__lane--2 { grid-column: 3 / 5; }
.wg-flow__lane--3 { grid-column: 5 / 7; }
/* de getinte baan: spant beide rijen, de stappen 3 en 4 liggen erop */
.wg-flow__lane--key {
  grid-row: 1 / 3;
  color: var(--accent-deep);
  background:
    linear-gradient(180deg, rgba(174, 245, 253, 0.08), transparent 70%),
    var(--glass-tint);
  box-shadow: inset 0 0 0 1px var(--line);
}
.wg-flow__lane span {
  display: block;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

/* de stappen */
.wg-flow__step {
  position: relative;
  z-index: 1;
  grid-row: 2;
  grid-column: calc(var(--i) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--pt) clamp(0.6rem, 0.3rem + 1vw, 1.2rem) clamp(1.2rem, 0.8rem + 1vw, 1.8rem);
}
/* de draad: elk segment loopt van dit icoon naar het volgende */
.wg-flow__step::before {
  content: "";
  position: absolute;
  top: var(--thread);
  left: 50%;
  right: -50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--line-strong);
  transform-origin: left center;
}
.wg-flow__step:last-child::before { display: none; }
/* de segmenten rond de gevulde stappen kleuren mee */
.wg-flow__step:nth-child(5)::before { background: linear-gradient(90deg, var(--line-strong), var(--accent-2)); }
.wg-flow__step:nth-child(6)::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); }
.wg-flow__step:nth-child(7)::before { background: linear-gradient(90deg, var(--accent-3), var(--line-strong)); }

.wg-flow__glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--g);
  height: var(--g);
  border-radius: calc(var(--g) * 0.3);
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 26px -14px var(--glass-shadow);
}
.wg-flow__glyph svg { width: 48%; height: 48%; }
.wg-flow__step--key .wg-flow__glyph {
  color: var(--switch-ink);
  background: var(--grad-switch);
  background-origin: border-box;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 34px -14px var(--accent-glow);
}

.wg-flow__n {
  margin-top: 1.05rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.wg-flow__step--key .wg-flow__n { color: var(--accent-deep); }
.wg-flow__title {
  margin: 0.2rem 0 0;
  font-size: clamp(0.98rem, 0.92rem + 0.2vw, 1.08rem);
  font-weight: 640;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--ink);
}
.wg-flow__line {
  margin: 0.45rem 0 0;
  max-width: 23ch;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.wg-flow__tool {
  margin-top: auto;
  padding-top: 0.95rem;
  font-size: 0.76rem;
  font-weight: 560;
  color: var(--ink-soft);
}
.wg-flow__tool::before {
  content: "";
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin: 0 0.45rem 0.08rem 0;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: 0.8;
}

/* Eén moment: als het paneel in beeld komt, tekent de draad zich van links
   naar rechts en komen de stappen erachteraan. Alleen met JS-reveals actief
   (html.reveal-js), anders blijft alles gewoon staan. */
[data-motion="on"].reveal-js .wg-flow .wg-flow__step {
  opacity: 0;
  transform: translateY(10px);
}
[data-motion="on"].reveal-js .wg-flow .wg-flow__step::before {
  transform: scaleX(0);
}
[data-motion="on"].reveal-js .wg-flow.is-in .wg-flow__step {
  animation: wgFlowStep 0.7s var(--ease-out) both;
  animation-delay: calc(0.3s + var(--i) * 0.11s);
}
[data-motion="on"].reveal-js .wg-flow.is-in .wg-flow__step::before {
  animation: wgFlowThread 0.5s var(--ease-out) both;
  animation-delay: calc(0.5s + var(--i) * 0.11s);
}
@keyframes wgFlowStep { to { opacity: 1; transform: none; } }
@keyframes wgFlowThread { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"].reveal-js .wg-flow .wg-flow__step,
  [data-motion="on"].reveal-js .wg-flow .wg-flow__step::before {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Tablet: twee stappen naast elkaar, de banen erboven als koppen */
@media (max-width: 999px) {
  .wg-flow__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* rij 3 is de kop van de getinte baan; die baan spant rij 3 en 4 en
       geeft rij 3 zelf geen hoogte, dus die staat vast op de kophoogte */
    grid-template-rows: auto auto var(--lane-h) auto auto auto;
  }
  .wg-flow__lane--1 { grid-column: 1 / 3; grid-row: 1; }
  .wg-flow__lane--2 { grid-column: 1 / 3; grid-row: 3 / 5; }
  .wg-flow__lane--3 { grid-column: 1 / 3; grid-row: 5; }
  .wg-flow__step:nth-child(4) { grid-column: 1; grid-row: 2; }
  .wg-flow__step:nth-child(5) { grid-column: 2; grid-row: 2; }
  .wg-flow__step:nth-child(6) { grid-column: 1; grid-row: 4; }
  .wg-flow__step:nth-child(7) { grid-column: 2; grid-row: 4; }
  .wg-flow__step:nth-child(8) { grid-column: 1; grid-row: 6; }
  .wg-flow__step:nth-child(9) { grid-column: 2; grid-row: 6; }
  /* alleen segmenten binnen een rij; de baankop is de pauze */
  .wg-flow__step:nth-child(5)::before,
  .wg-flow__step:nth-child(7)::before { display: none; }
  .wg-flow__step:nth-child(6)::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); }
  .wg-flow__lane--3 { margin-top: 0.4rem; }
}

/* Telefoon: één kolom, icoon links, de draad loopt verticaal */
@media (max-width: 759px) {
  .wg-flow {
    --g: 2.9rem;
    --pt: 0.95rem;
    padding: 1rem;
    border-radius: var(--r-lg);
  }
  .wg-flow__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto var(--lane-h) auto auto auto auto auto;
  }
  .wg-flow__lane--1 { grid-column: 1; grid-row: 1; }
  .wg-flow__lane--2 { grid-column: 1; grid-row: 4 / 7; }
  .wg-flow__lane--3 { grid-column: 1; grid-row: 7; margin-top: 0.4rem; }
  .wg-flow__lane { padding: 0.85rem 0.9rem 0 calc(0.9rem + var(--g) + 0.95rem); }
  .wg-flow__lane span { padding-bottom: 0.7rem; }
  .wg-flow__step:nth-child(4) { grid-column: 1; grid-row: 2; }
  .wg-flow__step:nth-child(5) { grid-column: 1; grid-row: 3; }
  .wg-flow__step:nth-child(6) { grid-column: 1; grid-row: 5; }
  .wg-flow__step:nth-child(7) { grid-column: 1; grid-row: 6; }
  .wg-flow__step:nth-child(8) { grid-column: 1; grid-row: 8; }
  .wg-flow__step:nth-child(9) { grid-column: 1; grid-row: 9; }

  .wg-flow__step {
    display: grid;
    grid-template-columns: var(--g) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 0.95rem;
    align-items: start;
    text-align: left;
    padding: var(--pt) 0.9rem var(--pt);
  }
  .wg-flow__glyph { grid-row: 1 / 4; }
  .wg-flow__n { grid-column: 2; margin-top: 0.1rem; }
  .wg-flow__title { grid-column: 2; margin-top: 0.1rem; }
  .wg-flow__line { grid-column: 2; max-width: none; margin-top: 0.3rem; }
  .wg-flow__tool { grid-column: 2; margin-top: 0; padding-top: 0.6rem; }

  /* verticale draad: van dit icoon tot het volgende (zelfde pt, dus 100%) */
  .wg-flow__step::before {
    top: var(--thread);
    left: calc(0.9rem + var(--g) / 2);
    right: auto;
    width: 1.5px;
    height: 100%;
    margin: 0 0 0 -0.75px;
    transform-origin: top center;
    background: var(--line-strong);
  }
  .wg-flow__step:nth-child(5)::before,
  .wg-flow__step:nth-child(7)::before { display: none; }
  .wg-flow__step:nth-child(6)::before { background: linear-gradient(180deg, var(--accent-2), var(--accent-3)); }
  [data-motion="on"].reveal-js .wg-flow .wg-flow__step::before { transform: scaleY(0); }
  @keyframes wgFlowThread { to { transform: scaleY(1); } }
}

/* Telefoon: van de quote-band (wg-proof, eigen 48px bodem) naar de eerste
   sectie dezelfde 2x sectie-adempauze als elders op de site (zie pages.css) */
@media (max-width: 767px) {
  main > .wg-proof + .section {
    padding-top: calc(var(--section-pad) * 2 - var(--space-5)) !important;
  }
}