/* ============================================================
   agenda.css: campagne "Agent op de agenda" (sep t/m dec 2026)

   Gedeeld door drie pagina's zonder menu:
   - van-chatbots-naar-agents-webinar.html            aanmelden voor het webinar
   - webinar-aangemeld.html  de bevestiging
   - nieuwe-site.html                   de pagina onder de lanceermail
                                        van 1 oktober (blok 14 t/m 16; de
                                        melding staat in melding.css)

   Het idee dat alles draagt: een vergaderagenda. Op de aanmeldpagina
   schuift de agent als agendapunt 1 binnen en zakken de andere punten
   een plek (het enige bewegende moment op die pagina). Op de bevestiging
   is het een blok in je dagagenda, op de aanbodpagina een besluit met
   een uiterste datum. Dat is de campagnenaam, letterlijk genomen, en het
   sluit aan op de gedrukte kaart "Agendapunt 1 voor 2027".

   Materiaal en compositie zijn die van de rest van de site: de Apple-
   hero uit hero-ap.css, het glas, het merkverloop op de tweede regel,
   de dienstregeling van de intakepagina. Niets nieuws waar de site al
   een antwoord had.

   Prefix: ag-. De datums en fases komen uit AIR_CONFIG.campagne, de
   logica staat in agenda.js.
   ============================================================ */

/* Klasse-selectors met display winnen van het UA-[hidden]. Deze pagina's
   verbergen veel met hidden, dus hier één keer hard. */
.page--ag [hidden] {
  display: none !important;
}

/* Zelfde correctie als op de afspraak- en intakepagina: het verloop loopt
   bijna horizontaal, zodat je het in een kort woord ook echt ziet lopen. */
.page--ag {
  --ag-grad-word: linear-gradient(100deg, #11a0d0 0%, #1f7fe0 100%);
  --ag-paper-shadow: 0 46px 100px -38px rgba(18, 30, 45, 0.34);
  --ag-narrow: 62rem;
}
[data-theme="dark"] .page--ag {
  --ag-grad-word: linear-gradient(100deg, #c6faff 0%, #8fe2fb 45%, #6fb0ff 100%);
  --ag-paper-shadow: 0 46px 100px -34px rgba(0, 0, 0, 0.8);
}
.page--ag .lw__in--grad {
  background: var(--ag-grad-word);
  -webkit-background-clip: text;
  background-clip: text;
}
.page--ag em:has(.lw) {
  background: none;
}

/* ---------- fases ----------
   agenda.js zet data-fase op <html> en zet hidden op elk blok met een
   data-alleen dat niet bij die fase hoort. In de HTML staan de blokken van
   de latere fases al op hidden, zodat de pagina zonder JavaScript de eerste
   fase laat zien. */

/* ============================================================
   1. BOVENBALK
   Alleen het A-merkteken, gecentreerd, en de themaknop rechts. Zelfde
   opzet als de intake- en afspraakpagina: op een pagina met één doel is
   de afzender genoeg.
   ============================================================ */
.ag-top {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) var(--gutter) 0;
}
.ag-mark {
  --ag-mark-1: #0e9ed2;
  --ag-mark-2: #1683db;
  --ag-mark-3: #1e81e0;
  display: inline-flex;
  color: var(--ink);
}
[data-theme="dark"] .ag-mark {
  --ag-mark-1: #c0f7fe;
  --ag-mark-2: #8ed9fc;
  --ag-mark-3: #73b7ff;
}
.ag-mark svg {
  display: block;
  width: clamp(36px, 1.6vw + 28px, 46px);
  height: auto;
}
.ag-top .theme-toggle {
  position: absolute;
  right: var(--gutter);
  top: calc(50% + clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) / 2);
  transform: translateY(-50%);
}

/* ============================================================
   2. HERO
   De compositie van hero-ap.css: één boodschap gecentreerd, de tweede
   regel in het verloop, een grote gedempte onderkop, één pilknop plus
   een chevronlink, en daaronder het podium.
   ============================================================ */
.ag-hero {
  position: relative;
  text-align: center;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  overflow-x: clip;
}
.ag-hero > .container {
  position: relative;
  z-index: 1;
}
/* Speelt de video in de hero (webinarpagina), dan tilt film-veil.js het
   podium met .is-veil-lift boven de waas (z-index 160 tegen 150). Die
   z-index: 1 hierboven maakt van de container een eigen laag, en dan komt
   niets erin boven de waas uit: de hele video werd mee wazig. Zolang hij
   speelt valt die laag dus weg; de rest van de hero ligt dan toch onder
   de waas. */
html.fv-on .ag-hero > .container:has(.is-veil-lift) {
  z-index: auto;
}
.ag-hero__head {
  padding-top: clamp(2.6rem, 1.6rem + 4vw, 5.4rem);
}

/* het label boven de kop: wanneer het is, niet een categorie */
.ag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 auto;
  padding: 0.5em 1.1em 0.5em 0.9em;
  border-radius: var(--r-pill);
  font-size: clamp(0.88rem, 0.84rem + 0.25vw, 1.02rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  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);
}
.ag-pill::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);
}
/* "nu live": dezelfde stip, maar hij ademt */
.ag-pill--live::before {
  background: #ff5a5f;
  box-shadow: 0 0 0 0.26rem rgba(255, 90, 95, 0.22);
  animation: agPulse 1.8s ease-in-out infinite;
}
@keyframes agPulse {
  50% {
    box-shadow: 0 0 0 0.5rem rgba(255, 90, 95, 0);
  }
}

.ag-hero__title {
  font-size: clamp(2.3rem, 1.15rem + 4.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 640;
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) auto 0;
  max-width: none;
}
/* alleen de directe kinderen: grad-words.js hakt de kop in woord-spans */
.ag-hero__title > span {
  display: block;
}
.ag-nw {
  white-space: nowrap;
}
.ag-hero__sub {
  margin: clamp(1.1rem, 0.9rem + 1vw, 1.7rem) auto 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.8rem);
  line-height: 1.28;
  letter-spacing: -0.014em;
  font-weight: 440;
  color: var(--ink-soft);
  text-wrap: balance;
}
/* twee korte zinnen: vanaf tablet elk op een eigen regel */
@media (min-width: 761px) {
  .ag-hero__sub--twee {
    max-width: none;
  }
  .ag-hero__sub--twee > span {
    display: block;
  }
}
.ag-actions {
  margin-top: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
}
.ag-actions--start {
  justify-content: flex-start;
}
.ag-chev {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--accent-deep);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 480;
}
.ag-chev:hover,
.ag-chev:focus-visible {
  text-decoration: underline;
}
.ag-chev .chev {
  font-size: 1.3em;
  line-height: 1;
  transform: translateY(-0.06em);
}

/* ---------- het podium onder de kop ---------- */
.ag-stage {
  position: relative;
  max-width: var(--ag-narrow);
  margin: clamp(2.8rem, 1.8rem + 4vw, 5rem) auto 0;
  text-align: left;
}
/* Op de webinarpagina staat het vel sinds 27 sep 2026 niet meer in de hero
   (daar staat de video) maar in een eigen sectie onder een kop; de ruimte
   daarboven komt dan van .ag-head. */
.ag-stage--sectie {
  margin-top: 0;
}

/* ============================================================
   3. HET AGENDAVEL
   Een vergaderagenda als glazen vel. De punten zijn echt genummerd,
   want een agenda is een volgorde. Het nieuwe punt draagt het enige
   accent van het vel: de rail links en het label.
   ============================================================ */
.ag-sheet {
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.6rem) clamp(1.3rem, 0.9rem + 2vw, 3rem)
    clamp(1rem, 0.8rem + 1vw, 1.8rem);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    var(--ag-paper-shadow);
}
.ag-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-bottom: 1px solid var(--line-strong);
}
.ag-sheet__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  max-width: none;
}
.ag-sheet__meta {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: none;
}
.ag-sheet__meta b {
  color: var(--ink);
  font-weight: 600;
}

.ag-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ag-item {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 0.8s var(--ease-out),
    opacity 0.6s var(--ease-out);
}
.ag-item__in {
  min-height: 0;
  overflow: hidden;
}
.ag-item__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: clamp(0.8rem, 0.5rem + 1vw, 1.6rem);
  padding: clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
}
.ag-item:last-child .ag-item__row {
  border-bottom: 0;
}

/* het nummer rolt: het oude cijfer staat erboven, het nieuwe eronder.
   Zonder JS staat de rol al op het nieuwe cijfer. */
.ag-num {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink-faint);
}
.ag-num__roll {
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
  transition: transform 0.7s var(--ease-out);
  transition-delay: calc(0.18s + var(--i, 0) * 0.06s);
}
.ag-num--solo .ag-num__roll {
  transform: none;
}
.ag-item__t {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.28rem);
  font-weight: 560;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--ink);
  max-width: none;
}
.ag-item__s {
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 48ch;
}
.ag-item__min {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* het nieuwe punt. De rail hangt aan het lijstitem en niet aan de rij:
   de rij zit in .ag-item__in, en die knipt af voor het inklappen. */
.ag-item--new {
  position: relative;
}
.ag-item--new::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.3rem, 0.9rem + 2vw, 3rem));
  top: 0.8rem;
  bottom: 0.8rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-switch);
  box-shadow: 0 0 18px var(--accent-glow);
  transform-origin: top;
  transition: transform 0.7s var(--ease-out) 0.35s;
}
.ag-item--new .ag-num {
  color: var(--accent-deep);
}
.ag-item--new .ag-item__t {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.024em;
}
.ag-tag {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.18em 0.6em;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.32em;
  color: var(--switch-ink);
  background: var(--grad-switch);
  white-space: nowrap;
}

/* beginstand van de animatie (agenda.js zet .is-pending tot het vel in
   beeld is); de eindstand is de gewone stand hierboven */
.ag-sheet.is-pending .ag-item--new {
  grid-template-rows: 0fr;
  opacity: 0;
}
.ag-sheet.is-pending .ag-item--new::before {
  transform: scaleY(0);
}
.ag-sheet.is-pending .ag-num__roll {
  transform: translateY(0);
  transition-delay: 0s;
}
.ag-sheet.is-pending .ag-num--solo .ag-num__roll {
  transform: none;
}

/* ---------- het vel als agenda van het webinar ----------
   Op van-chatbots-naar-agents-webinar.html is het vel het programma zelf: vijf punten met
   elk een regel uitleg, dus geen punt dat erbij schuift en geen rollende
   nummers. Eén punt draagt het accent (.ag-item--mark): dezelfde rail en
   hetzelfde label als het nieuwe punt hierboven, maar in de maat van de rest.
   De rijen komen één voor één op; alleen opacity en transform. */
.ag-sheet--webinar {
  scroll-margin-top: clamp(1.2rem, 0.8rem + 2vw, 2.5rem);
}
.ag-item--mark {
  position: relative;
}
.ag-item--mark::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.3rem, 0.9rem + 2vw, 3rem));
  top: 0.8rem;
  bottom: 0.8rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad-switch);
  box-shadow: 0 0 18px var(--accent-glow);
  transform-origin: top;
  transition: transform 0.7s var(--ease-out) 0.75s;
}
.ag-item--mark .ag-num {
  color: var(--accent-deep);
}
.ag-item--mark .ag-tag {
  transition:
    opacity 0.5s var(--ease-out) 0.95s,
    transform 0.6s var(--ease-out) 0.95s;
}
.ag-sheet--webinar .ag-item {
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.ag-sheet--webinar .ag-item__s {
  max-width: 70ch;
}
.ag-sheet__foot {
  margin-top: clamp(0.4rem, 0.3rem + 0.4vw, 0.8rem);
  padding-top: clamp(0.9rem, 0.7rem + 0.6vw, 1.3rem);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: none;
  transition: opacity 0.7s var(--ease-out) 0.55s;
}
.ag-sheet--webinar.is-pending .ag-item {
  opacity: 0;
  transform: translateY(14px);
}
.ag-sheet--webinar.is-pending .ag-item--mark::before {
  transform: scaleY(0);
}
.ag-sheet--webinar.is-pending .ag-tag {
  opacity: 0;
  transform: scale(0.8);
}
.ag-sheet--webinar.is-pending .ag-sheet__foot {
  opacity: 0;
}

/* ---------- de specbalk onder het vel ---------- */
.ag-spec {
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) auto 0;
  border-radius: var(--r);
  padding: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem) clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}
.ag-spec--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ag-spec__i {
  padding-inline: clamp(0.4rem, 0.2rem + 0.6vw, 1rem);
}
.ag-spec__i + .ag-spec__i {
  border-left: 1px solid var(--line);
}
.ag-spec dt {
  font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}
.ag-spec dd {
  margin: 0.25rem 0 0;
  font-size: clamp(0.88rem, 0.8rem + 0.3vw, 1.04rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 560;
  color: var(--ink);
  text-wrap: balance;
}

/* ============================================================
   4. SECTIES
   ============================================================ */
.ag-head {
  margin-bottom: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
}
.ag-head .h2 {
  margin-top: 0.9rem;
  max-width: 18ch;
}
.ag-head .lead {
  margin-top: 1.1rem;
  max-width: 36ch;
}
.ag-head--center {
  text-align: center;
}
.ag-head--center .eyebrow {
  justify-content: center;
}
.ag-head--center .h2,
.ag-head--center .lead {
  margin-inline: auto;
}

/* kop links, inhoud rechts (vanaf 960px) */
.ag-split {
  display: grid;
  gap: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}
.ag-split > .ag-head {
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .ag-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 0.5rem + 5vw, 5.5rem);
    align-items: start;
  }
  .ag-split--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ag-split--sticky > .ag-head {
    position: sticky;
    top: 3rem;
  }
}

/* ============================================================
   5. DIENSTREGELING
   Dezelfde tijdlijn als op de intakepagina: tijd links, een ruggengraat
   van 1px, tekst rechts. Een volgorde in tijd hoort niet in kaarten.
   ============================================================ */
.ag-when {
  --when-gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --when-rail: var(--line-strong);
  --when-h-fs: clamp(1.1rem, 1rem + 0.45vw, 1.38rem);
  --when-h-lh: 1.3;
  --when-t-lh: 1.4;
  --when-dot: calc(var(--fs-small) * var(--when-t-lh) / 2);
  --when-rhythm: clamp(1.7rem, 1.3rem + 1.6vw, 2.8rem);
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1px minmax(0, 1fr);
  column-gap: 1.35rem;
}
.ag-when__step {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto auto;
}
.ag-when__step::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  background: var(--when-rail);
}
.ag-when__step::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  width: 7px;
  height: 7px;
  margin-top: calc(var(--when-dot) - 3.5px);
  border-radius: 50%;
  background: var(--ink-faint);
}
.ag-when__step:first-child::before {
  background: linear-gradient(to bottom, transparent 0 var(--when-dot), var(--when-rail) var(--when-dot));
}
.ag-when__step:last-child::before {
  background: linear-gradient(to bottom, var(--when-rail) 0 var(--when-dot), transparent var(--when-dot));
}
/* een gemarkeerd moment: stip en tijd in het accent, de lijn blijft stil */
.ag-when__step--mark::after {
  width: 11px;
  height: 11px;
  margin-top: calc(var(--when-dot) - 5.5px);
  background: var(--grad-switch);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.ag-when__t {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-small);
  line-height: var(--when-t-lh);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: none;
}
.ag-when__step--mark .ag-when__t {
  color: var(--accent-deep);
  font-weight: 560;
}
.ag-when__h {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--when-h-fs);
  line-height: var(--when-h-lh);
  margin: 0.1rem 0 0;
}
.ag-when__p {
  grid-column: 2;
  grid-row: 3;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
  padding-bottom: var(--when-rhythm);
  max-width: 50ch;
}
.ag-when__step:last-child .ag-when__p {
  padding-bottom: 0;
}
@media (min-width: 640px) {
  .ag-when {
    --when-dot: calc(var(--when-h-fs) * var(--when-h-lh) / 2);
    grid-template-columns: fit-content(11rem) 1px minmax(0, 1fr);
    column-gap: var(--when-gap);
  }
  .ag-when__step {
    grid-template-rows: auto auto;
  }
  .ag-when__step::before,
  .ag-when__step::after {
    grid-column: 2;
  }
  .ag-when__t {
    grid-column: 1;
    grid-row: 1 / -1;
    padding-top: calc(var(--when-dot) - var(--fs-small) * var(--when-t-lh) / 2);
    text-align: right;
  }
  .ag-when__h {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
  }
  .ag-when__p {
    grid-column: 3;
    grid-row: 2;
  }
}
.ag-when__end {
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 50ch;
}

/* ============================================================
   6. AANMELDEN: DE VINKJESLIJST + HET FORMULIER
   ============================================================ */
.ag-crit {
  list-style: none;
  margin: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.ag-crit li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  color: var(--ink);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  line-height: 1.45;
}
.ag-crit svg {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.08rem;
  color: var(--accent-deep);
}
/* ---------- het aanmeldvenster ----------
   Een <dialog> die het hele scherm beslaat en zelf doorzichtig is; de kaart
   erin is het formulier. Zo is "naast de kaart" gewoon de dialog zelf (klik
   = sluiten) en scrolt een hoge kaart op een liggende telefoon binnen het
   venster, niet de pagina erachter. Op de telefoon staat de kaart bovenaan:
   dan blijven de velden boven het toetsenbord.

   De pagina erachter verdwijnt in een waas: 70% van de paginakleur, blur
   8px, 0,45 s aan en 0,85 s uit, in beide thema's. (Dezelfde waas stond tot
   okt 2026 op de keuzehulp en de geletterdheidscheck; die hebben nu het
   podium, zie podium.js.) Hier staat hij boven alles
   (ook de cookievraag, z 1200), want onder een modaal venster is niets te
   bedienen. De blur hangt aan het element en niet aan de focusklasse, met
   visibility als schakelaar: zo trekt hij bij het sluiten mee weg met de
   tint in plaats van in één keer scherp te springen, en kost hij in rust
   niets. */
.ag-veil {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(80%);
  backdrop-filter: blur(8px) saturate(80%);
  transition:
    opacity 0.85s var(--ease-out),
    visibility 0s linear 0.85s;
}
html.ag-focus .ag-veil {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.45s var(--ease-out),
    visibility 0s;
}
.ag-dlg {
  /* dezelfde veer als de melding en het ticket (massa en demping, als linear()) */
  --ag-veer: linear(0, 0.0209, 0.0752, 0.1517, 0.2416, 0.3376, 0.4344, 0.5278, 0.6151, 0.6944, 0.7647, 0.8256, 0.8772, 0.9199, 0.9544, 0.9815, 1.0021, 1.0172, 1.0275, 1.034, 1.0374, 1.0384, 1.0376, 1.0356, 1.0326, 1.0292, 1.0255, 1.0218, 1.0182, 1.0148, 1.0118, 1.0091, 1.0067, 1.0047, 1.0031, 1.0018, 1.0007, 0.9999, 0.9993, 0.9989, 0.9987, 0.9986, 0.9985, 0.9986, 0.9986, 0.9987, 0.9989, 0.999, 1);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 0.4rem + 3vw, 3rem) 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ag-dlg[open] {
  display: grid;
  justify-items: center;
  align-items: start;
}
.ag-dlg::backdrop {
  background: transparent;
}
.ag-dlg:focus {
  outline: none;
}
/* de kaart komt boven de waas uit en krijgt wat meer licht, zoals de kaart
   van de keuzehulp in de focusstand */
.ag-dlg__kaart {
  width: min(100%, 31rem);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    var(--shadow-lift),
    0 0 90px -24px var(--accent-glow);
}
.ag-dlg__pil {
  margin-bottom: 0.9rem;
  padding-right: 2.6rem;
  font-size: var(--fs-small);
  color: var(--accent-deep);
  max-width: none;
}
.ag-dlg__sluit {
  position: absolute;
  top: clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem);
  right: clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--ink-soft);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.ag-dlg__sluit:hover,
.ag-dlg__sluit:focus-visible {
  background: var(--line);
  color: var(--ink);
}
.ag-dlg__sluit svg {
  width: 1.15rem;
  height: 1.15rem;
}
@media (min-width: 640px) and (min-height: 700px) {
  .ag-dlg[open] {
    align-items: center;
  }
}
/* De choreografie, alleen opacity en transform. Binnenkomen: de pagina zakt
   weg in de waas, de kaart komt er met een veer uit omhoog (de doorschot van
   een paar procent zit in de veer zelf), en de inhoud volgt rij voor rij.
   Weggaan is kort: de kaart zakt terug, de waas trekt daarna rustig weg. */
.ag-dlg[open] .ag-dlg__kaart {
  animation:
    agDlgVeer 0.85s var(--ag-veer) both,
    agDlgToon 0.32s ease-out both;
}
.ag-dlg[open] .ag-dlg__kaart > * {
  animation: agDlgRij 0.7s var(--ease-out) both;
  animation-delay: calc(0.14s + var(--rij, 0) * 0.045s);
}
.ag-dlg[open] .ag-dlg__sluit {
  animation: agDlgToon 0.5s ease-out 0.4s both;
}
.ag-dlg.is-weg .ag-dlg__kaart {
  animation: agDlgUit 0.24s cubic-bezier(0.4, 0, 1, 1) both;
}
.ag-dlg.is-weg .ag-dlg__kaart > * {
  animation: none;
}
@keyframes agDlgVeer {
  from {
    transform: translateY(34px) scale(0.92);
  }
}
@keyframes agDlgToon {
  from {
    opacity: 0;
  }
}
@keyframes agDlgRij {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes agDlgUit {
  to {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

.ag-form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  border-radius: var(--r-lg);
}
.ag-form__title {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.024em;
  margin-bottom: 0.35rem;
}
.ag-form__intro {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  max-width: none;
}
.page--ag .field__opt {
  font-weight: 400;
  color: var(--ink-faint);
}
.page--ag .field textarea {
  min-height: 132px;
}
.page--ag .field [aria-invalid="true"] {
  border-color: #ff7a7f;
  box-shadow: 0 0 0 3px rgba(255, 122, 127, 0.18);
}
.ag-form .form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ag-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  padding-block: 1.05em;
}
.ag-form__note {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: none;
}
.ag-form__note.is-err {
  color: #ff9a9e;
}
[data-theme="light"] .ag-form__note.is-err {
  color: #b3261e;
}
.ag-form__fine {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: none;
}
.ag-form__fine a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ag-form[aria-busy="true"] .ag-form__submit {
  opacity: 0.6;
  pointer-events: none;
}

/* het formulier na een geslaagde inzending (Q&A) */
.ag-done {
  display: grid;
  justify-items: start;
  gap: 0.8rem;
}
/* krijgt focus zodat een schermlezer hem voorleest; het is geen knop */
.ag-done:focus {
  outline: none;
}
.ag-done__mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: var(--switch-ink);
  background: var(--grad-switch);
}
.ag-done__mark svg {
  width: 1.3rem;
  height: 1.3rem;
}
.ag-done__t {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: none;
}

/* ============================================================
   7. DE SKILL
   ============================================================ */
.ag-tools {
  list-style: none;
  margin: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.ag-tools li {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  color: var(--ink);
}
.ag-tools img {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0.42rem;
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.ag-tools span {
  color: var(--ink-faint);
}

/* het gesprek met de skill */
.ag-chat {
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.8rem);
}
.ag-chat__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.ag-chat__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: var(--grad-switch);
  color: var(--switch-ink);
}
.ag-chat__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}
.ag-chat__name {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  max-width: none;
}
.ag-chat__sub {
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.3;
  max-width: none;
}
.ag-msgs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.ag-msg {
  max-width: 86%;
  padding: 0.7rem 0.95rem;
  border-radius: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink);
}
.ag-msg--ai {
  justify-self: start;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-bottom-left-radius: 0.35rem;
}
.ag-msg--jij {
  justify-self: end;
  color: var(--switch-ink);
  background: var(--grad-switch);
  border-bottom-right-radius: 0.35rem;
}
.ag-file {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  border-radius: 0.95rem;
  border: 1px solid var(--line-strong);
}
.ag-file svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-deep);
}
.ag-file__n {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  max-width: none;
}
.ag-file__s {
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.3;
  max-width: none;
}

/* ============================================================
   8. WIE JE LIVE ZIET
   Eén grote kaart: het uitgesneden portret staat op de onderrand van het
   glas, zoals op over-ons, de tekst ernaast. Op de telefoon staat het
   portret boven de tekst.
   ============================================================ */
.ag-spreker {
  display: grid;
  max-width: 62rem;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ag-spreker__img {
  align-self: end;
  justify-self: center;
  width: min(74%, 21rem);
  margin-top: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  margin-bottom: -1px;
}
.ag-spreker__img img {
  width: 100%;
  height: auto;
  display: block;
}
.ag-spreker__txt {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.ag-spreker__n {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  max-width: none;
}
.ag-spreker__r {
  margin-top: 0.45rem;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  color: var(--accent-deep);
  max-width: none;
}
.ag-spreker__p {
  margin-top: 1rem;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.14rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.ag-spreker__r + .ag-spreker__p {
  margin-top: 1.3rem;
  color: var(--ink);
}
.ag-spreker__feiten {
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem) 0 0;
  padding-top: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem clamp(0.8rem, 0.4rem + 1.4vw, 1.8rem);
}
.ag-spreker__feiten dt {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.ag-spreker__feiten dd {
  margin: 0.3rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-faint);
  text-wrap: balance;
}
.ag-spreker__actie {
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
}
@media (min-width: 820px) {
  .ag-spreker {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: end;
  }
  .ag-spreker__img {
    width: 100%;
    max-width: 26rem;
    margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
    padding-left: clamp(1rem, 0rem + 2vw, 2.5rem);
  }
  .ag-spreker__txt {
    align-self: center;
    border-top: 0;
    padding: clamp(2rem, 1rem + 3vw, 3.6rem) clamp(2rem, 1rem + 3vw, 3.6rem)
      clamp(2rem, 1rem + 3vw, 3.6rem) clamp(1rem, 0.4rem + 1.6vw, 2.2rem);
  }
}

/* ============================================================
   9. SLOT EN VOET
   ============================================================ */
.ag-close {
  text-align: center;
}
.ag-close .h2 {
  margin-inline: auto;
  max-width: 16ch;
}
.ag-close .lead {
  margin: 1.1rem auto 0;
  max-width: 42ch;
}
.ag-close__alt {
  margin: 1.4rem auto 0;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 44ch;
}
.ag-close__alt a {
  color: var(--accent-deep);
  white-space: nowrap;
}

.ag-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.6rem;
  padding: clamp(2.4rem, 2rem + 2vw, 3.6rem) var(--gutter);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.ag-legal a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--dur-1), border-color var(--dur-1);
}
.ag-legal a:hover {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* een melding in plaats van een formulier (aanmelden gesloten e.d.) */
.ag-notice {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  border-radius: var(--r-lg);
  text-align: center;
}
.ag-notice .h3 {
  margin-bottom: 0.6rem;
}
.ag-notice p {
  margin-inline: auto;
  max-width: 40ch;
}
.ag-notice .btn {
  margin-top: 1.4rem;
}

/* ============================================================
   10. BEVESTIGING: HET BLOK IN JE DAGAGENDA
   ============================================================ */
.ag-cal {
  border-radius: var(--r-lg);
  display: grid;
  overflow: hidden;
}
@media (min-width: 820px) {
  .ag-cal {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}
.ag-day {
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
}
.ag-day__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.ag-day__wd {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-deep);
  max-width: none;
}
.ag-day__d {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  max-width: none;
}
.ag-hours {
  /* hoog genoeg dat een half uur (het webinar) één regel tekst houdt */
  --hr: clamp(4rem, 3.6rem + 1.4vw, 4.6rem);
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0;
  position: relative;
}
.ag-hour {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  height: var(--hr);
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.ag-hour span {
  transform: translateY(-0.55em);
}
.ag-hour::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border-top: 1px solid var(--line);
}
/* het blok zelf: --span is het deel van een uurrij, een half uur is .5 */
.ag-event {
  position: absolute;
  left: 3.6rem;
  right: 0;
  top: calc(0.6rem + var(--row, 2) * var(--hr) + 2px);
  height: calc(var(--span, 0.75) * var(--hr) - 4px);
  padding: 0.3rem 0.9rem 0.3rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--accent-2) 22%, transparent);
  overflow: hidden;
  transition:
    transform 0.8s var(--ease-spring),
    opacity 0.5s var(--ease-out);
}
.ag-event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad-switch);
}
.ag-event__t {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  max-width: none;
  white-space: nowrap;
}
/* de naam wijkt als eerste, de tijd blijft staan: zo kun je altijd zien dat
   het een half uur is */
.ag-event__naam {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-event__s {
  flex: none;
  margin-left: auto;
  font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.74rem);
  font-weight: 500;
  color: var(--ink-soft);
}
/* op de telefoon past "12:00 tot 12:30" niet naast de naam. De rij ernaast
   zegt al 12:00, dus daar blijft "tot 12:30" over. */
@media (max-width: 560px) {
  .ag-event {
    left: 3.3rem;
    padding-right: 0.6rem;
  }
  .ag-event__van {
    display: none;
  }
}
/* een afspraak die er al stond: alleen om te laten zien dat dit een agenda is */
.ag-event--vaag {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ag-event--vaag::before {
  background: var(--line-strong);
}
.ag-event--vaag .ag-event__t {
  color: var(--ink-faint);
  font-weight: 500;
}
.ag-cal.is-pending .ag-event:not(.ag-event--vaag) {
  transform: translateY(-1.2rem) scale(0.96);
  opacity: 0;
}

.ag-cal__side {
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .ag-cal__side {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}
.ag-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  font-variant-numeric: tabular-nums;
}
.ag-count__lbl {
  width: 100%;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: none;
}
.ag-count b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.ag-count i {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-right: 0.5rem;
}
.ag-count i:last-child {
  margin-right: 0;
}
.ag-count__fallback {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink);
  max-width: 28ch;
}
/* Hoofdknop over de volle breedte, de twee agenda-links eronder naast
   elkaar. Staat er een regel boven de knoppen, zoals op de
   bevestiging van het webinar, dan is die regel het eerste kind en staan de
   twee links vanzelf naast elkaar. */
.ag-addcal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.ag-addcal .btn {
  justify-content: center;
  padding: 0.85em 1em;
}
.ag-addcal .btn:first-child {
  grid-column: 1 / -1;
}
/* de regel loopt over in de knoppen: "Of open hem direct in [Google] [Outlook]" */
.ag-addcal__lbl {
  grid-column: 1 / -1;
  margin-bottom: -0.25rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: none;
}
/* net boven de kantelbreedte is de zijkolom te smal voor "Google Agenda" op
   één regel; daar staan de twee links onder elkaar */
@media (min-width: 820px) and (max-width: 899px) {
  .ag-cal__side .ag-addcal {
    grid-template-columns: minmax(0, 1fr);
  }
}
.ag-cal__fine {
  font-size: 0.8rem;
  color: var(--ink-faint);
  max-width: 36ch;
}

/* ---------- tot die tijd: drie kaarten ----------
   Zelfde opzet als de goedgekeurde kaarten op de afspraakpagina: links
   uitgelijnd, kop met alinea, een klein bewijsstuk, onderaan een actie. */
.ag-wait {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
}
@media (min-width: 960px) {
  .ag-wait {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ag-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  border-radius: var(--r-lg);
}
.ag-card__h {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.ag-card__p {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: none;
}
.ag-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.ag-card__foot .btn {
  padding: 0.75em 1.15em;
}
.ag-bubble {
  align-self: flex-start;
  margin-top: 0.4rem;
  max-width: 92%;
  padding: 0.75rem 0.95rem;
  border-radius: 1.1rem 1.1rem 1.1rem 0.35rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.ag-bubble b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.ag-bubble u {
  text-decoration: none;
  color: var(--accent-deep);
  word-break: break-all;
}
.ag-copied {
  font-size: 0.8rem;
  color: var(--accent-deep);
}
.ag-thumb {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  cursor: pointer;
}
.ag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.ag-thumb:hover img {
  transform: scale(1.03);
}
.ag-thumb__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 16, 26, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.ag-thumb__play svg {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.15rem;
}
.ag-quote {
  margin-top: 0.3rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}
.ag-quote b {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.ag-quote--goed {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  color: var(--ink);
}
.ag-quote--goed b {
  color: var(--accent-deep);
}

/* ============================================================
   11. AANBOD: HET BESLUIT MET EEN UITERSTE DATUM
   ============================================================ */
.ag-decision {
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.6rem) clamp(1.3rem, 0.9rem + 2vw, 3rem);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    var(--ag-paper-shadow);
}
.ag-decision__row {
  display: grid;
  gap: 1.4rem 2rem;
}
@media (min-width: 820px) {
  .ag-decision__row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
  }
}
.ag-decision__lbl {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--switch-ink);
  background: var(--grad-switch);
}
.ag-decision__t {
  text-wrap: balance;
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -0.026em;
  color: var(--ink);
  max-width: 22ch;
}
.ag-decision__due {
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: none;
}
.ag-decision__due b {
  color: var(--ink);
  font-weight: 600;
}
.ag-decision .ag-count {
  justify-content: flex-start;
}
@media (min-width: 820px) {
  .ag-decision .ag-count {
    justify-content: flex-end;
    text-align: right;
  }
}

/* plekken tegen het oude tarief: één streepje per plek */
.ag-seats {
  margin-top: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  padding-top: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.ag-seats__bar {
  display: flex;
  gap: 4px;
}
.ag-seats__bar i {
  flex: 1;
  height: 0.55rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.ag-seats__bar i.is-vrij {
  background: var(--grad-switch);
}
.ag-seats__t {
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: none;
}
.ag-seats__t b {
  color: var(--ink);
}

/* wat je vastlegt: twee kolommen */
.ag-offer {
  display: grid;
  gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
}
@media (min-width: 860px) {
  .ag-offer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ag-offer .ag-card__h {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
}
.ag-offer__list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.ag-offer__list li {
  padding-left: 1.1rem;
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.ag-offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-deep);
}
.ag-offer__list b {
  color: var(--ink);
  font-weight: 600;
}
.ag-offer__fine {
  margin-top: 1.2rem;
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 60ch;
}

/* de opname */
.ag-film {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(58% 74% at 50% 52%, var(--glass-tint), transparent 68%),
    var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: var(--ag-paper-shadow);
}
.ag-film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ag-film__wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: var(--gutter);
  text-align: center;
}
.ag-film__wait svg {
  width: clamp(42px, 2.2vw + 32px, 58px);
  height: auto;
  color: var(--ink);
  opacity: 0.2;
}
.ag-film__wait p {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 32ch;
}

/* de intake met Jura: een kleine voorstelregel boven de agenda */
.ag-host {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
}
.ag-host img {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong);
}
/* in de gecentreerde kop van de boekingskaart */
.booking-suite__intro .ag-host {
  justify-content: center;
}
.ag-host p {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 34ch;
}
.ag-host b {
  color: var(--ink);
  font-weight: 600;
}

/* ============================================================
   12. DE SKILLPAGINA: KIES JE TOOL
   ============================================================ */
.ag-picker {
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 2rem);
}
.ag-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ag-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.ag-tab img {
  width: 1.15rem;
  height: 1.15rem;
}
.ag-tab:hover {
  color: var(--ink);
}
.ag-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--bg-3);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
}
.ag-tab:focus-visible {
  border-radius: var(--r-pill);
}
.ag-panel {
  display: grid;
  gap: 1.6rem;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) clamp(0.2rem, 0.1rem + 0.6vw, 0.8rem) 0.2rem;
}
@media (min-width: 820px) {
  .ag-panel {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 3.6rem);
    align-items: start;
  }
}
.ag-panel__kind {
  font-size: var(--fs-small);
  color: var(--accent-deep);
  font-weight: 600;
  max-width: none;
}
.ag-panel__h {
  margin-top: 0.4rem;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.024em;
}
.ag-panel__p {
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.ag-panel .btn {
  margin-top: 1.3rem;
}
.ag-panel .btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.ag-panel__wait {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  max-width: 34ch;
}
.ag-steps {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.ag-steps li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
}
.ag-steps li::before {
  content: counter(stap);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ag-steps b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  padding-top: 0.25rem;
}

/* de contextfile die de skill oplevert */
.ag-doc {
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.ag-doc__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.ag-doc__name svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--accent-deep);
}
.ag-doc h3 {
  margin-top: 1rem;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.ag-doc h3:first-of-type {
  margin-top: 0;
}
.ag-doc p {
  margin-top: 0.2rem;
  max-width: none;
}
.ag-doc mark {
  margin-left: auto;
  background: none;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* ============================================================
   14. LANCEERPAGINA (nieuwe-site.html)
   De pagina onder de lanceermail van 1 oktober. De video gedraagt zich
   als die op ai-training.html: reel.js, film-veil.js en de meegroeiende
   schaal van home-ap.js. Hier alleen het kader en waar de schalen landen.
   ============================================================ */
.ag-reel {
  position: relative;
  max-width: 1180px;
  margin: clamp(2.6rem, 2rem + 3.5vw, 4.6rem) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(58% 74% at 50% 52%, var(--glass-tint), transparent 68%),
    radial-gradient(120% 90% at 50% 0%, var(--glass-tint), transparent 62%),
    var(--bg-3);
  border: 1px solid var(--line);
  box-shadow: var(--ag-paper-shadow);
  /* meegroeien bij het scrollen (--ap-z) en opveren bij het spelen
     (--fv-pop, geërfd van de container met data-veil-lift). Losse scale,
     zodat hij niet vecht met de transform van .reveal. */
  scale: calc(var(--ap-z, 1) * var(--fv-pop, 1));
  transform-origin: 50% 100%;
}
/* bij het opveren groeit hij vanuit zijn midden, zoals op de trainingspagina */
html.fv-on .is-veil-lift .ag-reel {
  transform-origin: 50% 50%;
}
/* de draaiende lichtrand: het merk-idioom voor "hier staat film" */
.ag-reel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    var(--accent) 10%,
    rgba(102, 198, 255, 0.9) 18%,
    transparent 32%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spinBorder 7s linear infinite;
  pointer-events: none;
}
.ag-reel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ag-reel__shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 6, 12, 0.45), transparent 50%);
  pointer-events: none;
  transition: opacity var(--dur-1) ease;
}
.ag-reel.is-started .ag-reel__shade {
  opacity: 0;
}
/* wachtstand: zolang de opname er niet is (agenda.js zet .is-leeg) staat
   er geen speelknop die nergens op reageert */
.ag-reel__wait {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  padding: var(--gutter);
  text-align: center;
}
.ag-reel__mark {
  width: clamp(42px, 2.2vw + 32px, 58px);
  height: auto;
  color: var(--ink);
  opacity: 0.2;
}
.ag-reel__wait p {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: 32ch;
}
.ag-reel.is-leeg {
  cursor: default;
}
.ag-reel.is-leeg .ag-reel__wait {
  display: grid;
}
.ag-reel.is-leeg .ag-reel__video,
.ag-reel.is-leeg .ag-reel__shade,
.ag-reel.is-leeg .reel-play,
.ag-reel.is-leeg .reel-loop {
  display: none;
}
/* op de telefoon groeit de video niet mee bij het scrollen: op een klein
   scherm leest dat als "hij wordt groter gemaakt" */
@media (max-width: 760px) {
  .ag-reel {
    scale: var(--fv-pop, 1);
  }
}

.ag-actions--film {
  margin-top: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
}
.ag-go {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.08rem);
  padding: 1.05em 1.8em;
}

/* ---------- de doorkijk op de nieuwe homepage ---------- */
.ag-split--mid {
  align-items: center;
}
.ag-peek {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--ag-paper-shadow), 0 0 0 1px var(--line-strong);
  transition: box-shadow var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.ag-peek__bar {
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.ag-peek__url {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ag-peek__url svg {
  width: 0.8rem;
  height: 0.8rem;
}
.ag-peek__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ag-peek__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: scale 0.9s var(--ease-out);
}
.ag-peek__cta {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.65em 1.1em;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: #04181b;
  background: var(--grad-accent);
  box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.ag-peek__cta .arrow {
  transition: transform var(--dur-1) var(--ease-out);
}
.ag-peek:hover {
  translate: 0 -4px;
  box-shadow: var(--ag-paper-shadow), 0 0 0 1px var(--accent-2);
}
.ag-peek:hover .ag-peek__shot img {
  scale: 1.03;
}
.ag-peek:hover .ag-peek__cta .arrow {
  transform: translateX(4px);
}
.ag-peek:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
  border-radius: var(--r-lg);
}

/* ---------- wat er anders is ---------- */
.ag-news {
  list-style: none;
  margin: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) 0 0;
  padding: 0;
}
.ag-news li {
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.4rem) 0;
  border-top: 1px solid var(--line);
}
.ag-news li:last-child {
  border-bottom: 1px solid var(--line);
}
.ag-news__h {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.38rem);
  line-height: 1.3;
}
.ag-news__p {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  max-width: 50ch;
}
.ag-news__p b {
  color: var(--ink);
  font-weight: 600;
}
.ag-news__p a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- de uitnodiging voor het webinar ---------- */
.ag-invite {
  display: grid;
  gap: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  padding: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    var(--ag-paper-shadow);
}
@media (min-width: 900px) {
  .ag-invite {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
  }
}
.ag-invite__h {
  margin-top: 1.1rem;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 640;
}
.ag-invite__p {
  margin: 0.9rem 0 1.6rem;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  max-width: 40ch;
}
.ag-invite__list {
  margin: 0 0 clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  gap: 0.6rem;
}
.ag-invite__list li {
  font-size: clamp(0.96rem, 0.93rem + 0.15vw, 1.04rem);
}
.ag-invite__sheet {
  position: relative;
  padding: 0.4rem 0 0.4rem clamp(1.2rem, 0.8rem + 1.4vw, 2rem);
  border-left: 1px solid var(--line-strong);
}
/* de kop maakt er een vergaderagenda van: daar hoort de agent op */
.ag-invite__sheet .ag-sheet__head {
  padding-bottom: 0.9rem;
}
.ag-invite__sheet .ag-sheet__title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
}
.ag-invite__sheet .ag-item--new::before {
  left: calc(-1 * clamp(1.2rem, 0.8rem + 1.4vw, 2rem) - 1px);
}
@media (max-width: 899px) {
  .ag-invite__sheet {
    padding-left: 0;
    padding-top: clamp(1.4rem, 1rem + 2vw, 2rem);
    border-left: 0;
    border-top: 1px solid var(--line-strong);
  }
  .ag-invite__sheet .ag-item--new::before {
    left: calc(-1 * clamp(1.6rem, 1rem + 2.6vw, 3.4rem));
  }
}

/* ============================================================
   15. VOOR EN NA (nieuwe-site.html)
   Eén venster, twee sites: links de oude, rechts de nieuwe, met een
   schuifknop ertussen. De nieuwe schermafdruk ligt bovenop en wordt
   afgeknipt vanaf --p; de oude ligt eronder. agenda.js zet --p, de maat
   van het venster en de vorm (breed of telefoon). Bij "Op je telefoon"
   vervormt het venster zelf tot een toestel.
   Schermafdrukken: tools/voor-na/opnemen.mjs.
   ============================================================ */
.ag-vn {
  text-align: center;
}
.ag-vn .ag-head {
  margin-bottom: 0;
}
.ag-vn__stage {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.4rem, 1.6rem + 3vw, 4.2rem);
}
.ag-vn__frame {
  --p: 50%;
  --vn-oud: 1;
  --vn-nieuw: 1;
  --bar: 44px;
  --pad: 0px;
  --vr: var(--r-lg);
  position: relative;
  width: 100%;
  max-width: 1180px;
  /* zonder JavaScript: gewoon de verhouding van een breed scherm */
  aspect-ratio: 1440 / 944;
  padding: var(--bar) var(--pad) var(--pad);
  border-radius: var(--vr);
  background: var(--bg-3);
  /* dezelfde merkgloed als achter een spelende video (film-veil) */
  box-shadow: var(--ag-paper-shadow), 0 40px 140px -40px var(--accent-glow), 0 0 0 1px var(--line-strong);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: ew-resize;
  transition:
    width 0.85s var(--ease-in-out),
    height 0.85s var(--ease-in-out),
    padding 0.85s var(--ease-in-out),
    border-radius 0.85s var(--ease-in-out),
    background-color 0.85s var(--ease-in-out);
}
/* agenda.js zet de maat in pixels; dan telt de verhouding niet meer */
.ag-vn__frame.has-maat {
  aspect-ratio: auto;
}
/* eerste keer maat zetten of het venster verandert: niet animeren */
.ag-vn__frame.is-vast {
  transition: none;
}
.ag-vn__frame[data-vorm="telefoon"] {
  --bar: 0px;
  --pad: 9px;
  --vr: 52px;
  background-color: #05070b;
  box-shadow: var(--ag-paper-shadow), 0 40px 140px -40px var(--accent-glow), 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* de adresbalk: hetzelfde adres boven beide versies */
.ag-vn__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s var(--ease-out);
}
.ag-vn__frame[data-vorm="telefoon"] .ag-vn__bar {
  opacity: 0;
}
.ag-vn__url {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 1.2rem;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ag-vn__url svg {
  width: 0.8rem;
  height: 0.8rem;
}

.ag-vn__view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 0 var(--vr) var(--vr);
  background: #04050a;
  transition: border-radius 0.85s var(--ease-in-out);
}
.ag-vn__frame[data-vorm="telefoon"] .ag-vn__view {
  border-radius: calc(var(--vr) - var(--pad));
}

/* de scènes: bij wisselen vervaagt de vorige terwijl het venster van vorm
   verandert, en komt de volgende pas binnen als de vorm er bijna is */
.ag-vn__scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0s 0.35s;
}
.ag-vn__scene.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out) 0.45s, visibility 0s;
}
.ag-vn__scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ag-vn__new {
  clip-path: inset(0 0 0 var(--p));
}

/* labels in de onderhoeken (boven staan de logo's van beide sites); ze
   verdwijnen zodra hun kant uit beeld is */
.ag-vn__tag {
  position: absolute;
  z-index: 3;
  bottom: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem);
  padding: 0.38em 0.9em;
  border-radius: var(--r-pill);
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.84rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  background: rgba(6, 10, 18, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.ag-vn__tag--oud {
  left: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem);
  opacity: var(--vn-oud);
}
.ag-vn__tag--nieuw {
  right: clamp(0.6rem, 0.4rem + 0.8vw, 1.1rem);
  opacity: var(--vn-nieuw);
  color: #04181b;
  background: var(--grad-accent);
  box-shadow: 0 8px 24px -10px rgba(102, 198, 255, 0.7);
}

/* de naad en de knop */
.ag-vn__line {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(174, 245, 253, 0.2), #aef5fd 18%, #66c6ff 60%, #4f93ff 86%, rgba(79, 147, 255, 0.2));
  box-shadow: 0 0 14px rgba(102, 198, 255, 0.75), 0 0 40px rgba(102, 198, 255, 0.35);
  pointer-events: none;
}
.ag-vn__knob {
  /* de halve knop: de knop blijft zo binnen het venster, ook als de naad
     helemaal tegen de rand staat */
  --kh: clamp(24px, 1vw + 20px, 30px);
  position: absolute;
  z-index: 4;
  top: 50%;
  left: clamp(var(--kh), var(--p), calc(100% - var(--kh)));
  translate: -50% -50%;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  gap: 0.35rem;
  width: calc(2 * var(--kh));
  height: calc(2 * var(--kh));
  border-radius: 50%;
  color: #fff;
  cursor: ew-resize;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 55%),
    rgba(6, 13, 24, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.95);
  backdrop-filter: blur(14px) saturate(1.6) brightness(0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 10px 30px -8px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(102, 198, 255, 0.12);
  transition: scale 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.ag-vn__knob svg {
  width: 0.7rem;
  height: 0.7rem;
}
.ag-vn__frame:hover .ag-vn__knob,
.ag-vn__frame.is-slepen .ag-vn__knob {
  scale: 1.08;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 12px 34px -8px rgba(0, 0, 0, 0.6),
    0 0 0 9px rgba(102, 198, 255, 0.18);
}
.ag-vn__knob:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 50%;
}

/* de keuze tussen de drie vergelijkingen */
.ag-seg {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  margin-top: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  padding: 4px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.ag-seg button {
  padding: 0.6rem clamp(0.8rem, 0.5rem + 1vw, 1.3rem);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ag-seg button:hover {
  color: var(--ink);
}
.ag-seg button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--bg-3);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
}
.ag-seg button:focus-visible {
  border-radius: var(--r-pill);
}

/* de drie veranderingen eronder, als de kolommen onder een Apple-product */
.ag-vn__feats {
  list-style: none;
  margin: clamp(3rem, 2rem + 4vw, 5.5rem) auto 0;
  padding: 0;
  max-width: 1180px;
  display: grid;
  gap: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  text-align: left;
}
@media (min-width: 860px) {
  .ag-vn__feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ag-vn__feats li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}
.ag-vn__feats .ag-news__p {
  max-width: 36ch;
}
.ag-vn .ag-actions {
  margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
}

@media (max-width: 600px) {
  .ag-vn__knob {
    --kh: 21px;
  }
  .ag-vn__tag {
    padding: 0.3em 0.75em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-vn__frame,
  .ag-vn__view,
  .ag-vn__scene,
  .ag-vn__scene.is-on,
  .ag-vn__knob {
    transition: none;
  }
}

/* ============================================================
   16. CHATBOT OF AGENT (nieuwe-site.html)
   "Zet de agent op de agenda" zegt pas iets als je weet wat een agent
   is. Twee kaarten met hetzelfde voorbeeld: links de vier klussen die na
   het antwoord van een chatbot bij jou blijven liggen, rechts dezelfde
   vier, afgevinkt door de agent. Naast elkaar lopen de rijen gelijk op
   (subgrid), zodat je de lijsten regel voor regel vergelijkt.
   Het enige dat beweegt: de vinkjes van de agent, één voor één zodra de
   kaart in beeld is (.is-in van reveal.js). Zonder JS of met reduced
   motion staan ze meteen aan.
   ============================================================ */
.ag-shift .ag-head .h2 {
  max-width: none;
  text-wrap: balance;
}
.ag-shift .ag-head .lead {
  max-width: 40ch;
}
/* elke zin op een eigen regel, ook op de telefoon: anders begint de
   tweede zin achter "antwoordt." */
.ag-shift .ag-head .h2 em {
  display: block;
}

.ag-duo {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  max-width: 1060px;
  margin: 0 auto;
}
.ag-duo__card {
  display: grid;
  align-content: start;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  border-radius: var(--r-lg);
}
@media (min-width: 860px) {
  .ag-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }
  .ag-duo__card {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.ag-duo__card--agent {
  box-shadow:
    inset 0 1px 0 0 var(--glass-hi),
    0 40px 110px -44px var(--accent-glow),
    var(--shadow-soft);
}

.ag-duo__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ag-duo__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.ag-duo__card--agent .ag-duo__icon {
  color: var(--switch-ink);
  background: var(--grad-switch);
}
.ag-duo__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.ag-duo__lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: none;
}
.ag-duo__card--agent .ag-duo__lbl {
  color: var(--accent-deep);
}
.ag-duo__h {
  margin-top: 1.1rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 620;
  max-width: 22ch;
}
.ag-duo__chat {
  margin-top: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  align-content: start;
}
.ag-duo__work {
  margin-top: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  padding-top: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem);
  border-top: 1px solid var(--line);
}
.ag-duo__sub {
  font-size: var(--fs-small);
  color: var(--ink-faint);
  max-width: none;
}
.ag-duo__list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.ag-duo__list li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}
/* nog te doen: een open, gestippelde ring */
.ag-duo__list li::before,
.ag-duo__list--done li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.45em - 1.25rem) / 2);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}
.ag-duo__list li::before {
  border: 1.5px dashed var(--line-strong);
}
/* gedaan: een gevulde stip waar het vinkje uit is gesneden, zodat het
   vinkje in beide thema's de kleur van de kaart heeft */
.ag-duo__list--done li {
  color: var(--ink);
  transition: color 0.4s var(--ease-out) calc(0.75s + var(--i, 0) * 0.45s);
}
.ag-duo__list--done li::after {
  background: var(--grad-switch);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.8 12.4 3.5 3.5 7-7.3'/%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(#000 0 0);
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.8 12.4 3.5 3.5 7-7.3'/%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition:
    transform 0.5s var(--ease-out) calc(0.75s + var(--i, 0) * 0.45s),
    opacity 0.3s var(--ease-out) calc(0.75s + var(--i, 0) * 0.45s);
}
/* waarmee de agent erbij kan: een plug-in naar een systeem, een skill
   voor hoe jullie het doen */
.ag-duo__via {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.55em;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 40%, transparent);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-deep);
  vertical-align: 0.08em;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease-out) calc(0.9s + var(--i, 0) * 0.45s);
}
.ag-duo__foot {
  margin-top: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  font-weight: 560;
  color: var(--ink-soft);
  max-width: none;
}
.ag-duo__card--agent .ag-duo__foot {
  color: var(--ink);
}

/* beginstand van de vinkjes, alleen als reveal.js de kaart binnenhaalt.
   Zonder transition: reveal-js komt pas na de eerste opmaak, en anders
   faden de vinkjes bij het laden eerst zichtbaar weg. */
.reveal-js .ag-duo__card--agent:not(.is-in) .ag-duo__list--done li {
  color: var(--ink-faint);
  transition: none;
}
.reveal-js .ag-duo__card--agent:not(.is-in) .ag-duo__list--done li::after {
  opacity: 0;
  transform: scale(0.4);
  transition: none;
}
.reveal-js .ag-duo__card--agent:not(.is-in) .ag-duo__via {
  opacity: 0;
  transition: none;
}

/* de uitnodiging staat een flink stuk onder het verschil */
.ag-shift .ag-invite {
  margin-top: clamp(3.6rem, 2.4rem + 5vw, 7rem);
}

@media (prefers-reduced-motion: reduce) {
  .ag-duo__list--done li,
  .ag-duo__list--done li::after,
  .ag-duo__via {
    transition: none;
  }
}

/* ============================================================
   17. VAN PAGINA NAAR PAGINA
   Wie in de melding op nieuwe-site.html op "Meld je aan" klikt, ziet de
   sterren die hij net zag doorlopen op de aanmeldpagina, en na het
   aanmelden het ticket op de bevestiging (sterren.css). De pagina's
   vloeien daarom in elkaar over in plaats van te verspringen. Beide
   pagina's moeten meedoen, en dat doen ze omdat ze allebei dit bestand
   laden. Een browser die het niet kent (Firefox) wisselt gewoon van
   pagina.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ============================================================
   13. TELEFOON EN BEWEGING
   ============================================================ */
@media (max-width: 760px) {
  .ag-spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.9rem;
  }
  .ag-spec__i:nth-child(odd) {
    border-left: 0;
  }
  .ag-spec--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ag-spec--3 .ag-spec__i + .ag-spec__i {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 0.9rem;
  }
  .ag-item__row {
    grid-template-columns: 1.8rem minmax(0, 1fr);
  }
  .ag-item__min {
    grid-column: 2;
    margin-top: 0.3rem;
  }
  .ag-tag {
    margin-left: 0;
    margin-top: 0.35rem;
    vertical-align: baseline;
    display: table;
  }
}
@media (max-width: 380px) {
  .ag-tab img {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-pill--live::before {
    animation: none;
  }
  .ag-item,
  .ag-sheet--webinar .ag-item,
  .ag-num__roll,
  .ag-item--new::before,
  .ag-item--mark::before,
  .ag-item--mark .ag-tag,
  .ag-sheet__foot,
  .ag-event,
  .ag-peek,
  .ag-peek__shot img {
    transition: none;
  }
  .ag-reel::before {
    animation: none;
  }
  .ag-dlg[open] .ag-dlg__kaart,
  .ag-dlg[open] .ag-dlg__kaart > *,
  .ag-dlg.is-weg .ag-dlg__kaart {
    animation: none;
  }
  .ag-veil,
  html.ag-focus .ag-veil {
    transition: none;
  }
}