/* 't Is er — aankondigingspagina.
   Bouwt op v2/site.css: de hero, de banden, de knoppen en de markeerstreek
   komen ongewijzigd van de landingspagina. Alles hieronder is alleen wat
   deze pagina extra nodig heeft. */

/* Secties die het scherm vullen en hun inhoud in het midden zetten. */
.ann-full { min-height: 100vh; display: flex; align-items: center; }
.ann-full > .v2-wrap { width: 100%; }

/* Rechts in de balk, op dezelfde marge als het woordmerk links. Het woordmerk
   is bodem-zwaar en staat daarom al optisch gecorrigeerd; de datum krijgt
   dezelfde correctie mee zodat de twee op één lijn lijken te staan. */
.ann-date { font-family: var(--t-label); font-size: var(--t-caption);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-ink2);
  margin: 0; transform: translateY(1px); white-space: nowrap; }
/* De balk van de landingspagina is een raster met vaste kolommen voor het
   uitklapmenu; hier staan er maar twee dingen in, dus flex met de twee aan
   de randen. */
.v2-header .v2-nav { display: flex; align-items: center;
  justify-content: space-between; }

/* ── scrollwenk: zelfde figuur als op de landingspagina, in inkt ──── */
.ann-cue { position: fixed; left: 50%; bottom: var(--t-s7); z-index: 90;
  transform: translateX(-50%); pointer-events: none;
  transition: opacity 0.4s var(--v2-ease); }
.ann-cue.is-gone { opacity: 0; }
.ann-cue.is-light .ann-cue__arr { border-color: var(--t-on-cobalt-deep); }
.ann-cue.is-light .ann-cue__arr::after { background: var(--t-on-cobalt-deep); }
.ann-cue__arr { display: block; width: 16px; height: 26px;
  border: 1.5px solid var(--t-ink2); border-radius: var(--t-r-pill);
  position: relative; }
.ann-cue__arr::after { content: ""; position: absolute; left: 50%; top: 5px;
  width: 3px; height: 5px; border-radius: 2px; background: var(--t-ink2);
  transform: translateX(-50%); animation: ann-cue 1.6s ease-in-out infinite; }
@keyframes ann-cue {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  70% { opacity: 0; transform: translate(-50%, 8px); }
}

/* ── wat er per haal beweegt ───────────────────────────────────────
   Twee dingen die niets met vorm te maken hebben maar alles met soepel
   scrollen op een telefoon.

   Ten eerste: de onderdelen die bij elke haal van plaats of dekking
   veranderen krijgen hun eigen laag. Dan kan de browser ze verschuiven
   zonder ze opnieuw te tekenen. Alleen zolang de baan leeft — een laag kost
   geheugen, en de secties die hun vastzetting loslaten bewegen toch niet.

   Ten tweede: in een vastgezette etalage verandert de inhoud van maat
   (er wordt geschreven, er wisselt een vraag). De browser probeert de
   scrollpositie dan te corrigeren op iets wat hij als anker koos, en dat
   leest als een sprong. Hier valt er niets te verankeren. */
.ann-type.is-live .ann-type__stage,
.ann-swapsec.is-live .ann-swap__old,
.ann-swapsec.is-live .ann-swap__new,
.ann-cobalt.is-live .ann-step { will-change: transform, opacity; }
.ann-type__pin, .ann-swap__pin, .ann-qs__pin { overflow-anchor: none; }

/* ── 1 · de typemachine ────────────────────────────────────────────
   Een hoge baan met een vastgezette etalage erin: de pagina schuift, het
   beeld staat stil en de letters lopen mee met de scroll. Alles staat
   gecentreerd in een vol scherm. Zonder js (of met prefers-reduced-motion)
   staat de eindstand er gewoon. */
.ann-type { background: var(--t-canvas); }
.ann-type__track { position: relative; }
.ann-type.is-live .ann-type__track { height: 420vh; }
.ann-type__pin { position: relative; display: flex; align-items: center;
  justify-content: center; text-align: center; }
.ann-type.is-live .ann-type__pin { position: sticky; top: 0; height: 100vh; }
.ann-type:not(.is-live) .ann-type__pin { min-height: 100vh; }
.ann-type__stage { padding-inline: var(--t-s6); max-width: 100%; }
/* Ongeveer twee keer de maat van de rest van de pagina: dit is het eerste
   dat iemand ziet en het is één zin. */
.ann-type__line { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(56px, 10.5vw, 150px); line-height: 1; letter-spacing: -0.03em;
  margin: 0; min-height: 1em; white-space: nowrap;
  color: var(--t-cobalt-deep); }
/* Definitie en opsomming delen één plek: ze lossen elkaar af, dus ze horen
   niet onder elkaar te staan. Een raster met beide kinderen in hetzelfde vak
   houdt de hoogte gelijk aan de langste van de twee — geen gat, geen sprong. */
.ann-type__slot { display: grid; margin-top: var(--t-s6); }
.ann-type__slot > * { grid-area: 1 / 1; align-self: start; }
.ann-type__dict { margin: 0; }
.ann-type__tail { margin: 0; font-size: 20px; line-height: 1.5;
  color: var(--t-ink2); }
.ann-type.is-live .ann-type__dict { opacity: 0; }
.ann-cursor { display: inline-block; width: 0.045em; height: 0.74em;
  background: var(--t-cobalt-deep); vertical-align: -0.04em; margin-left: var(--t-s1);
  animation: ann-blink 1.1s steps(1) infinite; }
@keyframes ann-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* Tijdens het typen staat de balk stil: een knipperende cursor onder een
   lopende hand leest als haperen, niet als typen. */
.ann-type__line.is-typing .ann-cursor { animation: none; opacity: 1; }

.ann-pos { display: block; font-style: italic; color: var(--t-ink2);
  font-size: 20px; }
/* maat in ch, dus gerekend met de eigen letter: een em-breedte op het blok
   erboven rekent met 16px en knijpt de definitie tot vier woorden per regel */
.ann-def { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 44px); line-height: 1.35;
  margin: var(--t-s4) auto 0; max-width: 26ch; }
.ann-defnum { color: var(--t-ink2); }
/* Zelfde streek als in de koppen, maar de breedte wordt hier per frame door
   de scroll gezet in plaats van door een transition. Een los vlak dat in de
   breedte schaalt zou goedkoper zijn, maar deze streek zit om een inline
   stuk tekst dat over regels afbreekt — en een absoluut gepositioneerd vlak
   krijgt in zo'n inline vak geen breedte. Verf dus, en wel de hele regel. */
.ann-mark3 { background-image: linear-gradient(transparent 22%,
    var(--t-butter-100) 22% 96%, transparent 96%);
  background-repeat: no-repeat; background-size: 0% 100%;
  background-position: left center; padding: 0 0.04em; }

/* ── 3 · AI Opener wordt Tisser ───────────────────────────────────
   Zelfde machinerie als de andere banen: een hoge baan met een vastgezette
   etalage, zodat de sectie blijft staan terwijl de tekst opkomt. De foto zit
   op de etalage en niet op de baan — anders schuift het beeld mee omhoog. */
.ann-hero { position: relative; }
.ann-hero__track { position: relative; }
.ann-hero.is-live .ann-hero__track { height: 320vh; }
.ann-hero__pin { display: flex; align-items: center; min-height: 100vh;
  background-color: var(--t-canvas);
  background-size: cover; background-repeat: no-repeat;
  /* 40%: verder naar links snijdt de schuine stoelrand het tekstvak in en
     zakt het contrast daar onder 4,5:1 (gemeten op de landingspagina) */
  background-position: 40% center; }
.ann-hero.is-live .ann-hero__pin { position: sticky; top: 0; height: 100vh; }
.ann-hero__pin > .v2-wrap { width: 100%; }
.ann-hero__pin .v2-hero__copy { max-width: clamp(440px, 42vw, 640px); }
/* kop op 125% van de standaardmaat, en de zin eronder mee omhoog zodat de
   verhouding tussen de twee blijft kloppen */
.ann-hero__pin .v2-display { font-size: clamp(50px, 4.25vw + 20px, 85px); }
/* Drie regels, en de breedte is die van de eerste regel. Dat is met een
   maximumbreedte niet betrouwbaar te sturen — dan brak "afspraken." los af.
   De knippen staan dus in de tekst; op smalle schermen vallen ze weg en
   loopt de zin gewoon door. */
.ann-hero__pin .v2-sub { font-size: clamp(18px, 0.5vw + 14px, 20px);
  line-height: 1.55; max-width: none; }
/* De grens tussen etalage en foto valt op een halve pixel; die wordt dan
   gemengd tussen twee net iets verschillende tinten en leest als een haarlijn.
   Eén pixel overlap dekt de naad af — de bovenste beeldrij is toch de
   achtergrondkleur. */
.ann-hero__mobile { display: none; width: 100%; height: auto;
  margin-top: -1px; background: var(--t-canvas); }
@media (max-width: 1024px) {
  .ann-hero.is-live .ann-hero__track { height: auto; }
  .ann-hero.is-live .ann-hero__pin,
  .ann-hero__pin { position: static; height: auto; min-height: 0;
    background-image: none !important;
    /* de balk staat vast bovenin en zou de kop anders afsnijden */
    padding-block: calc(var(--v2-section-lg) + var(--t-s8)) var(--v2-section-lg); }
  .ann-hero__pin .v2-hero__copy { max-width: none; }
  .ann-hero__mobile { display: block; }
}

/* ── 2 · de wissel ─────────────────────────────────────────────────
   Rol in, rol uit: het oude merk verlaat het venster naar boven terwijl het
   nieuwe van onderen binnenkomt. Eén venster dat afsnijdt, twee merken die
   erdoorheen schuiven — meer heeft het niet nodig. */
.ann-swapsec { background: var(--t-canvas); margin-block: 0; }
.ann-swap__track { position: relative; }
.ann-swapsec.is-live .ann-swap__track { height: 350vh; }
.ann-swap__pin { display: flex; align-items: center; justify-content: center; }
.ann-swap__pin { position: relative; }
.ann-swapsec.is-live .ann-swap__pin { position: sticky; top: 0; height: 100vh; }
.ann-swapsec:not(.is-live) .ann-swap__pin { min-height: 100vh; }
.ann-swap { display: flex; flex-direction: column; align-items: center;
  gap: var(--t-s7); }
.ann-swap__cap { font-family: var(--t-label); font-size: var(--t-caption);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-ink2);
  margin: 0; }
/* Het venster loopt van rand tot rand: het nieuwe merk komt van rechts en
   duwt het oude er links uit. Eén verschuiving voor allebei, dus het is een
   duw en geen kruisvervaging. */
.ann-swap__win { position: relative; width: 100vw; height: 46vh;
  min-height: 300px; overflow: hidden; }
.ann-swap__old, .ann-swap__new { position: absolute; left: 50%; top: 50%;
  height: auto; transform: translate(-50%, -50%); }
.ann-swap__old { width: min(420px, 62vw); }
.ann-swap__new { width: min(464px, 62vw); }
/* Het venster snijdt af — daar mag de confetti dus niet in zitten. Hij ligt
   nu als eigen laag over de hele etalage heen. */
.ann-burst { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; }

/* ── 4 · de kan-vragen, op cobalt ──────────────────────────────────
   Vraag en antwoord wisselen elkaar af: eerst staat de vraag er, dan pas
   wordt het antwoord aangestreept met een butter marker. */
.ann-cobalt { background: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep);
  margin-block: 0; }
.ann-qs__track { position: relative; }
.ann-cobalt.is-live .ann-qs__track { height: 480vh; }
.ann-qs__pin { display: flex; align-items: center; }
.ann-cobalt.is-live .ann-qs__pin { position: sticky; top: 0; height: 100vh; }
.ann-cobalt:not(.is-live) .ann-qs__pin { min-height: 100vh; }

.ann-cobalt__h { color: var(--t-on-cobalt-deep); }
/* Alle stappen liggen op elkaar in hetzelfde rastervak; er staat er altijd
   maar één. Zo hoeft er niets te verspringen als de volgende het overneemt. */
/* Alle stappen liggen op elkaar in hetzelfde rastervak; er staat er altijd
   maar één. Zo hoeft er niets te verspringen als de volgende het overneemt. */
.ann-qs__stage { display: grid; place-items: center; text-align: center; }
.ann-step { grid-area: 1 / 1; max-width: min(94vw, 1000px); }
.ann-cobalt__h { color: var(--t-on-cobalt-deep); margin: 0;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(27px, 4.05vw, 63px); line-height: 1.08;
  letter-spacing: -0.02em; }
.ann-q { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(24px, 3.45vw, 54px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--t-on-cobalt-deep); margin: 0; }
.ann-ans { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(24px, 3.45vw, 54px); white-space: nowrap;
  margin: var(--t-s6) 0 0; }
/* Een echte markeerstift: onder ligt het woord in wit op cobalt, erboven
   hetzelfde woord in inkt op butter, afgesneden tot waar de stift is
   gekomen. Zo draaien de letters mee met de streek in plaats van halverwege
   om te klappen — wit op butter is onleesbaar, en dat zag je. */
.ann-sweep { position: relative; display: inline-block;
  padding: 0 0.14em; color: var(--t-on-cobalt-deep); }
.ann-sweep__on { position: absolute; left: 0; top: 0; padding: 0 0.14em;
  white-space: nowrap; color: var(--t-on-butter);
  background-image: linear-gradient(transparent 6%,
    var(--t-butter-100) 6% 98%, transparent 98%);
  background-repeat: no-repeat; background-size: 100% 100%;
  background-position: left center;
  clip-path: inset(0 100% 0 0); }
.ann-ja, .ann-ja .ann-sweep__on { padding: 0 0.24em; }
.ann-slash { color: var(--t-on-cobalt-deep); opacity: 0.34; margin: 0 0.2em; }
.ann-nee { color: var(--t-on-cobalt-deep); opacity: 0.38; }

/* ── 5 · AI is er. En wij ook. ──────────────────────────────────── */
.ann-show { position: relative; background: var(--t-surface); }
.ann-show__track { position: relative; }
.ann-show.is-live .ann-show__track { height: 300vh; }
.ann-show__pin { display: flex; align-items: center; min-height: 100vh; }
.ann-show.is-live .ann-show__pin { position: sticky; top: 0; height: 100vh; }
.ann-show__pin > .v2-wrap { width: 100%; }

.ann-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--t-s6), 5vw, var(--t-s8)); align-items: center; }
/* De bak snijdt af, dus het beeld mag erin terugzoomen zonder over de
   afgeronde hoeken heen te lopen. */
.ann-split__frame { overflow: hidden; border-radius: var(--t-r-panel);
  height: min(68vh, 680px); }
.ann-split__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zonder merkteken staat er nog één ding in deze kolom; die hoort dan ook
   echt in het midden van de kolom te staan, niet bovenin. */
.ann-split__body { display: flex; flex-direction: column; gap: var(--t-s7);
  align-items: center; justify-content: center; text-align: center;
  min-height: 100%; }
@media (max-width: 860px) {
  .ann-split { grid-template-columns: minmax(0, 1fr); }
  .ann-split__frame { height: min(52vh, 460px); }
  .ann-show.is-live .ann-show__track { height: auto; }
  /* Losse etalage: geen volle sectiepadding meer, anders past beeld + zin niet
     meer in één scherm en staat het blok bovenaan in plaats van in het midden. */
  .ann-show.is-live .ann-show__pin,
  .ann-show__pin { position: static; height: auto; min-height: 100svh;
    padding-block: var(--t-s7); }
}

.ann-show__line { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: clamp(32px, 2.4vw + 18px, 57px); line-height: 1.08;
  letter-spacing: -0.02em; }

/* ── 6 · hoe dan ──────────────────────────────────────────────────
   Vier losse vragen lezen als vier vragen; in één grijze alinea lezen ze als
   een blok tekst dat je overslaat. Elke vraag krijgt dus zijn eigen regel,
   met een haarlijn ertussen, en de slotzin staat er los onder. */
.ann-how { background: var(--t-butter-50); margin-block: 0; }
.ann-how__in { text-align: center; }
.ann-how__h { margin: 0 auto; max-width: 20ch;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(34px, 3.8vw, 62px); line-height: 1.08;
  letter-spacing: -0.02em; text-wrap: balance; }
/* breed genoeg dat elke vraag op één regel past; onder die breedte mag
   hij gewoon afbreken in plaats van te overlopen */
.ann-how__list { list-style: none; margin: var(--t-s8) auto 0; padding: 0;
  max-width: min(94vw, 860px); }
.ann-how__list li { font-family: var(--t-display); font-weight: 400;
  font-size: clamp(19px, 1.5vw, 26px); line-height: 1.35; color: var(--t-ink2);
  padding: var(--t-s5) 0; border-top: 1px solid var(--t-border); }
.ann-how__list li:first-child { border-top: 0; padding-top: 0; }
.ann-how__last { margin: var(--t-s8) auto 0; max-width: 34ch;
  font-family: var(--t-display); font-weight: 400;
  font-size: clamp(20px, 1.7vw, 28px); line-height: 1.35;
  letter-spacing: -0.01em; color: var(--t-ink); text-wrap: balance; }

/* ── 7 · wat verandert / wat niet ──────────────────────────────────
   Alles gecentreerd, ook de adressenlijst — maar die krijgt max-content
   breedte met automatische marges, zodat de kolommen over de rijen heen
   uitgelijnd blijven in plaats van per regel te gaan zwerven. */
.ann-chg { text-align: center; }
.ann-chg .ann-card--lead p { margin-inline: auto; max-width: 62ch; }
/* De kop en de brede kaart staan gecentreerd; de twee kaarten eronder niet —
   een adressenlijst en een opsomming lezen links uitgelijnd. Ze rekken tot
   dezelfde hoogte zodat de rij als één blok staat. */
.ann-two { align-items: stretch; }
.ann-two .ann-card { text-align: left; }
.ann-chg .ann-two .ann-rows { width: auto; margin-inline: 0; text-align: left; }
.ann-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--t-s5); margin-top: var(--t-s5); }
.ann-card { border: 1px solid var(--t-border); border-radius: var(--t-r-panel);
  padding: var(--t-s6); background: var(--t-surface); }
.ann-card--butter { background: var(--t-butter-50);
  border-color: var(--t-butter-100); }
/* De twee kaarten dragen de twee merkkleuren: wat verandert op cobalt, wat
   blijft op butter. Op cobalt gaat alle tekst naar wit; het oude adres blijft
   leesbaar op 84% (gemeten 4,87:1) in plaats van weg te zakken. */
.ann-card--cobalt { background: var(--t-cobalt-deep);
  border-color: var(--t-cobalt-deep); color: var(--t-on-cobalt-deep); }
.ann-card--cobalt h3 { color: var(--t-on-cobalt-deep); }
.ann-card--cobalt .ann-rows li { border-color: rgba(255, 255, 255, 0.22); }
.ann-card--cobalt .ann-rows__k { color: var(--t-on-cobalt-deep); opacity: 0.84; }
.ann-card--cobalt .ann-rows__arr { color: var(--t-on-cobalt-deep); opacity: 0.7; }
.ann-card--cobalt .ann-rows__old { color: var(--t-on-cobalt-deep); opacity: 0.84; }
.ann-card--cobalt .ann-rows__new { color: var(--t-on-cobalt-deep); }
.ann-card--lead { margin-top: var(--t-s7); }
.ann-card h3 { font-family: var(--t-display); font-weight: 400; font-size: 32px;
  line-height: 1.1; margin: var(--t-s4) 0 0; }
.ann-card--butter h3, .ann-two .ann-card h3 { margin-top: 0; }
.ann-card--lead h3 { margin-top: var(--t-s4); }
.ann-card p { color: var(--t-ink2); font-size: var(--t-body-lg);
  line-height: 1.6; margin: var(--t-s4) 0 0; }
/* .ann-card p zet de kleur op ink2 en is specifieker dan een losse klasse;
   vandaar hier de kaart erbij, anders wint die algemene regel. */
.ann-card .ann-was { font-family: var(--t-label); font-size: var(--t-body);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-cta); margin: 0; }
.ann-was s { text-decoration-thickness: 1px; }
.ann-card ul { margin: var(--t-s4) 0 0; padding: 0; list-style: none; }
/* haarlijn in grijs: butter op butter is geen lijn maar een vlek */
.ann-card li { padding: var(--t-s4) 0; border-top: 1px solid var(--t-border);
  font-size: var(--t-body-lg); }
.ann-card li:first-child { border-top: 0; }
@media (max-width: 760px) { .ann-two { grid-template-columns: minmax(0, 1fr); } }

/* rijen: oud adres wordt nieuw adres.
   Eén raster over álle rijen via subgrid — met een raster per <li> hebben de
   rijen elk hun eigen kolombreedtes en staan de pijlen niet onder elkaar.
   De pijl is getekend, niet getypt: een streep met een punt, zodat hij de
   lengte krijgt die de sprong verdient. */
.ann-rows { list-style: none; margin: var(--t-s5) 0 0; padding: 0;
  display: grid; grid-template-columns: auto auto auto auto;
  column-gap: var(--t-s4); }
.ann-rows li { display: grid; grid-column: 1 / -1;
  grid-template-columns: subgrid; align-items: center;
  padding: var(--t-s4) 0; border-top: 1px solid var(--t-border); }
.ann-rows li:first-child { border-top: 0; padding-top: 0; }
.ann-rows__k { font-family: var(--t-label); font-size: var(--t-caption);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-ink2); }
.ann-rows__old { color: var(--t-ink2); text-decoration: line-through;
  text-decoration-thickness: 1px; font-size: var(--t-body-lg); }
.ann-rows__arr { position: relative; display: block; width: 56px; height: 1px;
  background: currentColor; color: var(--t-ink2); justify-self: center; }
.ann-rows__arr::after { content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translate(1px, -50%) rotate(45deg); }
.ann-rows__new { color: var(--t-ink); font-size: var(--t-body-lg);
  font-weight: 500; }
@media (max-width: 620px) {
  .ann-rows { grid-template-columns: auto auto auto; }
  .ann-rows li { grid-template-columns: subgrid; }
  .ann-rows__k { display: none; }
  .ann-rows__arr { width: 32px; }
}

/* ── 8 · afsluiter ── */
/* De sectie erboven is ook wit en heeft zijn eigen onderruimte; met nog eens
   een volle bovenmarge stond de zin 256px onder de kaarten en maar 128px boven
   de voet. Boven niets extra's, dan is het gat aan beide kanten gelijk. */
/* Vult het scherm, net als de secties ervoor; de zin staat in het midden. */
.ann-end { background: var(--t-surface); margin-block: 0;
  padding-block: var(--v2-section-lg); text-align: center; }
/* ongeveer 70% van het merkteken dat in het slotbeeld stond */
.ann-end__mark { display: block; margin: 0 auto var(--t-s5);
  width: clamp(110px, 12.6vw, 161px); height: auto; }
.ann-end__line { margin: 0; font-family: var(--t-display); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 44px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--t-ink); }

/* ── slot ── */
.ann-close { text-align: center; }
.ann-close .v2-sub { margin-inline: auto; }
.ann-acts { display: flex; gap: var(--t-s3); justify-content: center;
  flex-wrap: wrap; margin-top: var(--t-s6); }
/* De voettekst hoort niet in een eigen band maar onderin het laatste scherm:
   zo eindigt de pagina op één beeld in plaats van op een grijze strook. */
.ann-end { position: relative; }
.ann-end__foot { position: absolute; left: 0; right: 0; bottom: var(--t-s7);
  padding-inline: var(--t-s6); text-align: center;
  color: var(--t-ink2); font-size: var(--t-caption); }

@media (prefers-reduced-motion: reduce) {
  .ann-cursor, .ann-cue__arr::after { animation: none; }
  .ann-cue { display: none; }
  .ann-mark3 { background-size: 100% 100%; }
  .ann-sweep__on { clip-path: none; }
  .ann-step { position: relative; }
}

/* ── mobiel ────────────────────────────────────────────────────────
   Alles een slag rustiger, maar niet kleiner dan leesbaar: meer lucht links
   en rechts, en zetsel dat bewust over twee of drie regels valt. svh in
   plaats van vh, want vh rekent op mobiel met het scherm inclusief de
   browserbalk — daardoor stak elke vastgezette sectie eronder uit. */
@media (max-width: 700px) {
  .ann-full,
  .ann-type:not(.is-live) .ann-type__pin,
  .ann-swapsec:not(.is-live) .ann-swap__pin,
  .ann-cobalt:not(.is-live) .ann-qs__pin { min-height: 100svh; }
  .ann-type.is-live .ann-type__pin,
  .ann-swapsec.is-live .ann-swap__pin,
  .ann-cobalt.is-live .ann-qs__pin { height: 100svh; }
  /* baan en etalage in dezelfde eenheid, anders klopt de voortgang niet.
     Korter dan op desktop: op een telefoon scrol je met kleinere halen. */
  /* korter dan op desktop: op een telefoon scrol je met kleinere halen, en
     dan voelt dezelfde naloop als eindeloos doorschuiven. De typemachine had
     na de definitie nog ruim een scherm dood scrollen; dat is er nu af. */
  .ann-type.is-live .ann-type__track { height: 220svh; }
  .ann-swapsec.is-live .ann-swap__track { height: 210svh; }
  .ann-cobalt.is-live .ann-qs__track { height: 430svh; }
  /* hero en slotbeeld laten hun vastzetting los onder 860px — hier dus géén
     baanhoogte terugzetten, anders staan ze half vast en half los */

  :root { --v2-margin: 24px; }
  .ann-type__stage { padding-inline: 10vw; }
  .ann-how__list { max-width: calc(100vw - 2 * var(--t-s6)); }
  .ann-end { padding-inline: var(--t-s5); }
  .ann-br { display: none; }

  /* De sectie stond uit verhouding: een grote kop met 128px lucht erboven en
     een smalle beeldstrook eronder. Kop kleiner, lucht eraf, en het beeld met
     de mobiele uitsnede fors hoger — die is 1,75:1 in plaats van 2,12:1, dus
     hij verdraagt een bak zonder dat de tablet eruit valt. */
  /* Zonder vastzetting is deze sectie zo hoog als haar inhoud, en dat is op
     een telefoon minder dan een scherm: het blauw kwam er onderaan al bij
     kijken en de sectie voelde afgeraffeld. Ze vult nu minstens één scherm,
     waarbij het beeld zijn maat houdt en de overgebleven ruimte naar de kop
     gaat — die staat daardoor gecentreerd in wat er over is. */
  .ann-hero { display: flex; flex-direction: column; min-height: 100svh; }
  .ann-hero__track { flex: 1 1 auto; display: flex; }
  .ann-hero__pin { flex: 1 1 auto;
    padding-block: var(--t-s8) var(--t-s6) !important; }
  .ann-hero__pin .v2-display { font-size: clamp(34px, 10.6vw, 44px); }
  .ann-hero__pin .v2-sub { font-size: var(--t-body-lg); }
  .ann-hero__mobile { flex: 0 0 auto; height: 42svh; min-height: 300px;
    object-fit: cover; object-position: center; }

  /* de blauwe sectie krijgt echte marges en groter zetsel, zodat elke vraag
     over twee of drie regels valt in plaats van als één krappe zin */
  .ann-qs__stage { padding-inline: 14vw; }
  .ann-step { max-width: 100%; }
  .ann-cobalt__h { font-size: clamp(28px, 8.4vw, 36px); }
  .ann-q, .ann-ans { font-size: clamp(26px, 7.8vw, 34px); }
  .ann-ans { margin-top: var(--t-s6); }

  /* groter zetsel; de definitie hangt aan dezelfde regel, dus tis·ser
     en ’t is er. gaan samen omhoog en blijven gelijk */
  .ann-type__line { font-size: clamp(46px, 13.6vw, 58px); }
  .ann-type__tail { font-size: var(--t-body-lg); }
  .ann-def { font-size: 24px; }
  .ann-pos { font-size: var(--t-body); }
  .ann-how__h { font-size: clamp(26px, 7.4vw, 34px); }
  .ann-how__list li { font-size: var(--t-body-lg); padding: var(--t-s4) 0; }
  .ann-how__last { font-size: var(--t-body-lg); margin-top: var(--t-s7);
    max-width: calc(100vw - 2 * 12vw); }
  .ann-show__line { font-size: clamp(26px, 7.4vw, 34px); }
  .ann-end__line { font-size: clamp(24px, 6.4vw, 30px); }
  .ann-end__mark { width: clamp(78px, 21vw, 98px); }
  .ann-end__foot { bottom: var(--t-s5); }
  .ann-card h3 { font-size: 24px; }

  .ann-swap__win { height: 34svh; min-height: 180px; }
  .ann-swap__old { width: min(200px, 52vw); }
  .ann-swap__new { width: min(192px, 50vw); }
  /* het beeld stond te klein tegenover de tekst ernaast */
  .ann-split__frame { height: min(62svh, 520px); }
  .ann-split { gap: var(--t-s6); }
  .ann-split__body { gap: var(--t-s5); }

  .ann-cue { bottom: var(--t-s5); }
}