/* Hermy mobiel, herbouw volgens de mobiele lay-out van mondorobotics.com.
   REGEL: alles hierin staat in @media (max-width: 900px). Desktop vanaf 901px blijft
   onaangeroerd. Bron: spec/MOBIEL-SPEC.md, gemeten op 390 x 844.
   Volgorde in de head: index-Bos5djmh.css, hermy-premium-v17.css, dit bestand.
   Dus gelijk-specifieke regels winnen hier vanzelf; !important staat er alleen waar de
   bestaande CSS zelf !important gebruikt.

   RONDE 2, wat er veranderd is en waarom (kort):
   a. De typografische trap stond een trede te laag. Mondo zet leads op 18 tot 20 px,
      wij stonden op 14. Alle sectie-leads, de filmregels, de faq-vraag en de
      lijstregels in de prijskaart gaan mee omhoog.
   b. Elke sectiekop die over drie of vier regels liep is teruggebracht naar twee
      regels: kleiner corps plus kortere tekst in de bundel.
   c. De secties beginnen nu op 112 tot 128 px in plaats van 96, zodat de zwevende
      Adopt-pil (viewport 61..103) nergens meer de eerste kopregel raakt. Mondo start
      zijn titels op 125 tot 133.
   d. De filmsecties eindigen niet meer met een half leeg zwart scherm.
   e. De scrim over het lifestyle-beeld had een harde rand; dat is nu een verloop.

   RONDE 3. De grote correctie zit in de typografische trap. Ronde 2 ging uit van
   "Mondo zet leads op 18 tot 20 px". Nagemeten op de referentie-PNG's is dat de
   REGELAFSTAND, niet het corps. Mondo's lopende tekst staat overal op 12,5 tot 15,5 px
   met 17 tot 22 px regelafstand. Gemeten inkthoogtes op 390 x 844, device px, gedeeld
   door (0,937 x 2) voor een regel met stok en staart:
     film-tekstscherm  Mondo 26 dev -> 13,9 px   wij stonden op 18
     privacy-alinea    Mondo 26 dev -> 13,9 px   wij stonden op 18
     campus-lead       Mondo 26 dev -> 13,9 px   wij stonden op 18
     partners-lead     Mondo 25 dev -> 13,3 px   wij stonden op 18
     specs-subregel    Mondo 20 dev -> 13,8 px   wij stonden op 18
     specs-waarde      Mondo 18 dev -> 12,4 px   wij stonden op 15
     lifestyle-lead    Mondo 29 dev -> 15,5 px   wij stonden op 19
   Alle lopende tekst zakt daarom een trede, met de regelafstand die Mondo erbij zet.
   De koppen gaan juist omhoog: Mondo's sectiekoppen halen een cap van 32,5 tot 37,5 css
   px (corps 46 tot 52), de onze bleven op 31,5 steken.

   RONDE 4. Alle maten hieronder zijn opnieuw nagemeten op de referentie-PNG's en op
   onze eigen verse capture, allebei op 390 x 844 met deviceScaleFactor 2. Waar een
   criticus iets beweerde dat de meting niet haalt, staat dat bij de regel zelf.
   De drie grootste correcties van deze ronde:
     a. De XL-koppen. Mondo houdt door de hele pagina een cap van 37,5 css px aan:
        hero "Meet Beni" 75 dev, hoofdstukkop "Meet Beni" 75 dev, campuskop
        "a Camera" 76 dev, partnerkop "Love Beni" 75 dev. Onze Nunito Sans haalt
        cap = 0,719 x corps, dus 37,5 css hoort bij corps 52. De hero stond al op 52
        en klopt; het lifestyle-hoofdstuk stond op 46 en de campuskop op 48.
     b. De filmkop stond juist te hoog: Mondo's "Beni Films" heeft cap 31 css met 40,5
        leading, wij hadden 33,5 met 46,5. Terug naar corps 43 met leading 41.
     c. De zwevende pil. Twee critici wilden hem naar rechtsonder of helemaal weg in
        lichte secties. Nagekeken op de referentietegels doet Mondo dat niet: hun pil
        staat in sec-04 (zwarte filmclip) en in sec-09 en sec-12 (allebei lichte
        secties) op exact dezelfde plek rechtsboven, y 59..105 css. De plaats blijft
        dus; wat wel fout was, is dat de onze half doorzichtig was (alpha 0,96) en
        even lang als de kaartknop eronder. Nu dekkend, met een eigen kort label.

   RONDE 5. Drie blinde critici, gemiddeld 8,8. Hun gebreken zijn hieronder een voor
   een verwerkt. De vier keuzes waar zij elkaar tegenspraken, met de reden:
     a. Kleur van lopende tekst op lichte vlakken. Mondo zet kop en alinea in exact
        dezelfde kleur; wij hadden kop op var(--ink) en elke lead op var(--muted). Dat
        is nu een gedeelde selector in blok 1. Een criticus schreef #22241f; dat is
        rgb(34,36,31) en niet de gemeten kopkleur rgb(22,24,21), dus wij nemen
        var(--ink) zelf.
     b. De zwevende pil. Een criticus wilde hem in de lichte campussectie verbergen,
        twee anderen kleiner en hoger. Op de referentietegels staat Mondo's pil in
        elke tegel op dezelfde plek rechtsboven, ook boven zijn zwarte filmschermen en
        boven zijn lichte secties. Plaats en maat blijven dus; wat verschuift is onze
        eigen tekst, want de pil dekt in elke tegelcapture de band y 61..103 af.
     c. Het blok "Year one is completely free." Een criticus wilde er een derde
        subonderwerp van maken met eigen eyebrow en subkop, dezelfde criticus bood als
        alternatief invouwen aan. Mondo kent per mediablok precies drie niveaus en
        geen vierde, en een derde ladder zonder eigen beeld zou een nieuw patroon zijn.
        Dus invouwen tot nadruk binnen de alinea.
     d. De agentrij. Een criticus wilde tegels van 66vw, een ander een raster van twee
        of tegels van 35vw. Mondo's enige schuifrij (sec-09) heeft een kaart van 257
        met 87 peek; onze eigen partnerrij doet 258 met 88. Een agenttegel van 257 zou
        een tegel per scherm betekenen bij 25+ agents, dus twee tegels met een peek van
        60 css: dezelfde leesbare overloop, hetzelfde aantal tegels als nu.

   RONDE 6. Drie blinde critici, gemiddeld 8,8. Alles wat zij noemden is hieronder
   verwerkt, behalve vier punten waar de meting of de referentie iets anders zegt. Die
   vier staan hier, met de reden erbij; de rest staat bij de regel zelf.
     a. De herokop. Een criticus wil font-size 58px omdat "Meet Hermy" 281 css breed is
        tegen 235 voor "Meet Beni". Zijn eigen getal klopt niet met zijn eigen fix: 58
        is groter dan de 52 die er staat en zou de regel juist breder maken, en de
        marge die hij wil (68 px) hoort bij 48. Los daarvan is de maat zelf al gelijk:
        Mondo's "Meet Beni" meet 75 dev van kaplijn tot basislijn en onze "Meet Hermy"
        op 52px haalt 0,719 x 52 = 37,4 css, dus 74,8 dev. Het verschil zit in het
        woord, niet in de letter: "Hermy" heeft twee tekens meer dan "Beni". Kleiner
        zetten zou de enige XL-maat op de pagina breken die op vier plekken gelijk
        loopt (hero, lifestyle, campus, partners). De kop blijft 52px.
     b. De balk bovenin het lifestyle-hoofdstuk. Een criticus wil .site-header op
        mobiel terugzetten omdat Mondo daar een complete balk heeft met logo links en
        hamburger rechts, terwijl bij ons alleen de Adopt-pil rechtsboven hangt.
        Nagekeken op de andere referentietegels staat in Mondo's sec-04, sec-09 en
        sec-12 op precies dezelfde scrollpositie geen balk maar alleen de pil, dus die
        balk in sec-03 is gedrag bij omhoog scrollen en geen lay-outregel. Een balk die
        bij ons wel in elke sectie zou meekomen wijkt dus verder af van de referentie
        dan de pil alleen. Blijft zoals het is.
     c. De hoekstraal van de partnervideokaarten. Een criticus mat 32 dev (16 css) en
        vroeg 40 dev (20 css). In de DOM staat .reel-card al op border-radius 20px en
        de kaart meet 258 x 459; de 32 dev is een meting op de antialiasing van de
        videohoek eronder. Er verandert hier niets.
     d. De breedte van de agenttegels. Een criticus wil 120 css, ronde 5 koos 137 met
        een peek van 60 omdat Mondo's enige schuifrij 257 met 87 peek doet en onze
        eigen partnerrij 258 met 88. Wat hij aanwijst is niet de maat maar de harde
        snee door een gecentreerd label; dat is opgelost met een masker, zie de regel
        bij .agent-ticker .ticker-row.

   Waar de critici elkaar tegenspraken staat de keuze in een commentaar bij de
   regel zelf. */

@media (max-width: 900px) {
  /* ============================================================
     1. GLOBAAL
     ============================================================ */

  :root {
    /* Nunito Sans voorop, precies zoals desktop. Onder 900px stond Manrope nog eerst. */
    --body: "Nunito Sans", "Manrope", system-ui, sans-serif;
    --display: "Nunito Sans", "Hanken Grotesk", system-ui, sans-serif;
    --mono: "Nunito Sans", "Manrope", system-ui, sans-serif;
    --gutter: 24px;
    --hermy-surface: #f5f6f2;
    --hermy-card: #ebeee7;
    --green-dark: #2e6b43;
    --line: rgba(23, 26, 23, 0.16);
  }

  body {
    font-family: var(--body);
    font-weight: 400;
    line-height: 1.5;
  }

  /* De basis zet [id]{scroll-margin-top:132px} voor de plakkende desktopbalk. Op mobiel
     plakt er niets: .site-header is absolute en .launch-strip is relative, allebei
     scrollen ze gewoon weg. Die 132px duwde een aangeklikte sectie dus 132px te laag
     en sneed er in de sectie-capture een strook af. Op mobiel hoort hij op 0. */
  [id] {
    scroll-margin-top: 0;
  }

  /* De wisselende knoplabels dragen hun eigen gewicht 720. Laat ze de knop volgen. */
  .swap,
  .swap-a,
  .swap-b {
    font: inherit;
    letter-spacing: inherit;
  }

  /* RONDE 5. Mondo houdt per sectie een stem: kop en lopende tekst staan in exact
     dezelfde kleur. Gemeten op de referentie: specs-kop en subregel allebei
     rgb(15,15,15), partnerkop, lead en kaarttekst allebei rgb(15,15,15), en op zijn
     donkere band kop en alinea allebei rgb(245,243,242). Bij ons stonden de koppen op
     var(--ink) rgb(22,24,21) en elke lead en alinea op var(--muted) rgb(98,102,95).
     Drie critici wezen dat los van elkaar aan bij de privacyband, de specs, de partners
     en de community-band; het speelde overal. Daarom een gedeelde selector met dezelfde
     specificiteit als de basisregels die hier var(--muted) zetten. De vinkjeslijst, de
     spec-waarden en de kaartnamen stonden al op var(--ink). De voetnoot onder de
     prijskaarten blijft wel doffer: dat is kleine lettertjes, geen lead. */
  .privacy-copy > span,
  .campus-saas > header > span,
  .campus-row-copy > span,
  .free-note > span,
  .specs > header > span,
  .partners > header > span,
  .partner-cards article p,
  .partner-cards article p span,
  .pricing > header span,
  .price-grid article p {
    color: var(--ink);
  }

  /* ============================================================
     2. HEADER EN STICKY CTA
     ============================================================ */

  .launch-strip {
    min-height: 40px;
    padding: 10px 42px 10px 20px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .launch-strip .launch-link {
    font: inherit;
    font-weight: 700;
    letter-spacing: 0;
  }

  .site-header {
    height: 100px;
  }

  .site-nav {
    width: 100%;
    height: 100%;
    padding: 0 20px 0 16px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  /* Ons woordmerk stond op 26px tegen 14px bij Mondo, en de hamburger was 25 x 3 tegen
     14 x 1,5. De hele kop van de pagina las daardoor twee keer zo zwaar. 20px en
     20 x 2 zit tussen die twee in en houdt "hermy" nog leesbaar op 390. */
  .wordmark {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .menu-button {
    width: 40px;
    height: 40px;
    gap: 5px;
  }

  .menu-button span,
  .menu-button span + span {
    width: 20px;
    height: 2px;
    margin: 0;
  }

  /* De pil rechtsboven zit bij Mondo op y 61..103 met de rechterrand op 366. */
  .floating-waitlist {
    top: 61px !important;
    right: 24px !important;
    left: auto !important;
    min-height: 42px;
  }

  /* De basis zet hier rgba(251, 248, 242, 0.96). Die vier procent was genoeg om op de
     campuskop "25+ agents." de letters "ts." door de pil heen te laten schemeren, en op
     de prijskaart de groene knop eronder. Mondo's pil is volledig dekkend en draagt een
     slagschaduw, zodat er nooit iets doorheen leest. Het label gaat in de bundel van
     "Adopt Hermy" naar "Adopt" (en "Join waitlist" naar "Waitlist"): dat maakt de pil
     130 -> 83 css breed, waardoor hij op x 283 begint in plaats van 236 en de
     gecentreerde subkoppen vrij blijven, en het haalt tegelijk het dubbele label weg dat
     boven de kaartknop "Adopt Hermy" stond. Mondo doet precies dat: pil "Get Beni",
     kaartknop "Get Yours". */
  .floating-adopt {
    height: 42px;
    min-height: 42px;
    padding: 0 21px;
    background: #fbf8f2;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 16px rgba(10, 15, 12, 0.18);
    backdrop-filter: none;
    font: 700 14px/1 var(--body);
    letter-spacing: 0;
  }

  /* ============================================================
     3. sec-00 HERO   (mondo sec-01)
     Schermvullende video, een compact blok iets boven het midden, een pil.
     Onder de knop blijft 55 procent van het scherm leeg.
     ============================================================ */

  .hero {
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    overflow: hidden;
  }

  /* De media dekt de hele sectie. Geen aspect-ratio, geen vaste hoogte: dan blijft er
     onderaan een strook vlakkleur over precies waar het product staat. */
  .hero-slides,
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* De bron is 608 x 1080 staand; op 390 x 844 vult cover in de hoogte, dus er wordt
     alleen links en rechts gesneden en het onderwerp bleef 158 css breed. Mondo's robot
     is ruim 315 css breed en raakt de rechterrand. Met 1,3 vanuit 50% 45% groeit de
     koepel naar ongeveer 205 css, krimpt de lege tafelband onderin en schuift het
     tweede, aangesneden voorwerp aan de rechterrand buiten beeld. */
  .hero-video,
  .hero-slides {
    object-fit: cover;
    transform: scale(1.3);
    transform-origin: 50% 45%;
  }

  .hero-copy {
    top: 230px;
    bottom: auto;
    left: 50%;
    width: 342px;
    transform: translateX(-50%);
    text-align: center;
  }

  /* Was 20px, gemeten gat 29,5 css; Mondo houdt 27. Op 14px werd het 24, dus 17. */
  .hero-copy > p {
    margin: 0 0 17px;
    color: rgba(255, 255, 255, 0.92);
    font: 400 16px/22px var(--body);
    letter-spacing: 0;
  }

  /* Een criticus wilde de hero-kop terug naar clamp(44px, 13.2vw, 52px) omdat onze cap
     40 css zou zijn tegen 37 bij Mondo. Nagemeten klopt dat niet: Mondo's "Meet Beni"
     meet op de referentie 75 dev van kaplijn tot basislijn, dus 37,5 css, en onze
     "Meet Hermy" op 52px haalt 0,719 x 52 = 37,4 css. Gelijk dus. Wat wel verschilt is
     de regelbreedte (281 tegen 236 css), maar dat komt van een langer woord, niet van
     een grotere letter. Deze kop blijft.
     RONDE 5 en 6 kregen dezelfde opmerking terug, nu met 58px als voorstel. Zie punt a
     in het kopblok van dit bestand: 58 zou de regel juist breder maken. */
  .hero-copy h1 {
    margin: 0;
    font: 700 52px/52px var(--body);
    letter-spacing: -0.03em;
  }

  .hero-cta {
    position: static;
    top: auto;
    left: auto;
    height: 42px;
    min-height: 42px;
    /* Was 20px. Kop-baseline naar knop-bovenkant stond op 29,5 css, Mondo op 24. */
    margin: 15px auto 0;
    padding: 0 21px;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    transform: none;
    font: 700 14px/1 var(--body);
    letter-spacing: 0;
  }

  /* ============================================================
     4. sec-01 LIFESTYLE CHAPTER   (mondo sec-03)
     Kop plus lead strak bovenin, midden leeg, drie featureregels aan de onderrand.
     Mondo heeft geen eyebrow, dus onze <p> gaat met order onder de kop.
     ============================================================ */

  .lifestyle-chapter {
    height: 100svh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
  }

  /* De eerste featureregel liep dwars over het gezicht van ons eigen product. Gemeten
     op de vorige capture: de zwarte koepel staat op y 505..615 css en het lachje erop
     op 542..568, terwijl icoon plus "Part of the family" op 545..585 begon. Mondo houdt
     zijn robot juist vrij: hun product staat op 375..450 en hun eerste regel begint pas
     op 556, ruim honderd px lucht.
     De bron is 2240 x 2800 en cover schaalt op 390 x 844 precies op de hoogte, dus
     object-position verticaal doet niets: dat is de reden dat ronde 3 hier bleef
     hangen. Wat wel werkt is het beeldvlak zelf hoger maken en aan de onderrand
     vastzetten. Op 130 procent hoogte, onderaan verankerd, schuift de koepel naar
     403..546 en het lachje naar 452..486, dus alles boven de featureregels. */
  /* RONDE 5. Twee critici maten hetzelfde: onze koepel eindigt op y 540 css en de
     eerste featureregel begint op 557, dus 17 css lucht, waar Mondo 95 houdt (product
     375..450, eerste rij 545). Een van hen stelde object-position: 50% 36% voor, maar
     de bron is 2240 x 2800 en cover snijdt op 390 breed alleen links en rechts: de
     verticale as doet hier niets, dat stond ook al in de regel hierboven.
     Wat wel werkt is de enige knop die dit beeld heeft. Het staat aan de onderrand
     vast, dus geldt koepelonderkant = 844 - 0,277 x beeldhoogte. Nagemeten op de verse
     capture: de koepel eindigde op 561 css met de eerste featureregel op 565, dus vier
     css lucht; op 158 procent eindigt hij op 498,5 en is het 66,5 css. Mondo houdt 95.
     Verder opschalen kan, maar dan valt de koepel links buiten de uitsnede en verdwijnt
     de kat helemaal: dit is een close-up en geen totaal zoals bij Mondo. De uitsnede
     gaat van 44 naar 37 procent van de bronbreedte en de koepel van 119 naar 147 css
     hoog, en dat mag: de critici noemden de afstand, niet de maat. */
  .lifestyle-portrait {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 158%;
    object-fit: cover;
    /* Op 158 procent hoogte wordt de bron 1066 css breed en zien wij er 390 van, dus
       37 procent in plaats van 44. Op 50 procent viel de koepel daarmee links buiten
       beeld: zijn linkerrand stond op -7 css. 42 procent schuift het venster 54 css
       naar links, waarmee de koepel op 47..218 staat en de kat rechts even ver
       doorloopt als eerst. */
    object-position: 42% 50%;
  }

  /* Er lagen twee losse scrims over elkaar. De onderste had wel een hoogte van 42% maar
     ook top:0, dus hij eindigde midden in het beeld op 0,54 zwart: een harde rand over
     de volle breedte op 354px. Mondo heeft daar geen enkele naad. Nu een verloop over
     het hele beeld: donker bovenin voor de kop, open in het midden, donker onderin
     zodat de drie featureregels leesbaar op het beeld staan. */
  .lifestyle-chapter::before {
    content: none;
  }

  /* De onderste helft was te licht. Achter de drie featureregels bleef het beeld op
     luminantie 87 tot 118 hangen (lichte tafel, lichte kat); Mondo's gras zit daar op
     15 tot 25. De onderste drie stops gaan daarom omhoog. Twee critici wilden ook het
     beeld verschuiven met object-position, maar de bron is 2240 x 2800 en cover snijdt
     op 390 x 844 alleen links en rechts: verticaal verschuiven doet daar niets. De
     scrim is dus de enige knop die werkt. */
  /* Een criticus schreef dat er helemaal geen donkere film over dit beeld lag en gaf
     achtergrondwaarden van 141, 107 en 114. Dat is een meting van voor ronde 3. Op de
     verse capture haalt de achtergrond achter de kop 96 (Mondo 112), achter de eerste
     featureregel 67 (Mondo 76) en achter de derde 44 (Mondo 20). Wit op 96 haalt 5,7:1,
     dus er komt geen tweede scrim bij. Een plek bleef wel te licht: achter de subregel
     stonden wij op 102 tegen 37 bij Mondo. Alleen die stop gaat omhoog. */
  /* RONDE 6. Nagemeten op de verse capture tegen de referentie, allebei 780 x 1688
     device px, mediane helderheid per band:
       kopband  (device y 140..620)   wij 96   Mondo 65
       midden   (620..1080)           wij 92   Mondo 141
       features (1080..1560)          wij 58   Mondo 30
     Onze kopband en onze featureband zijn dus allebei te licht, precies wat de
     criticus schreef; het midden hoort juist open te blijven en staat bij ons al
     donkerder dan bij hem. De criticus gaf een vervangend verloop met 0,45 bovenin,
     maar dat is lichter dan wat er nu al ligt (0,66) en zou de kop juist slechter
     maken: zijn meting kwam van voor de scrim. De stops gaan daarom omhoog waar de
     meting het vraagt en het venster van 34 tot 50 procent blijft open. */
  .lifestyle-chapter::after {
    content: "";
    inset: 0;
    height: auto;
    background: linear-gradient(
      180deg,
      rgba(8, 10, 8, 0.78) 0%,
      rgba(8, 10, 8, 0.58) 22%,
      rgba(8, 10, 8, 0.3) 34%,
      rgba(8, 10, 8, 0.06) 44%,
      rgba(8, 10, 8, 0.18) 50%,
      rgba(8, 10, 8, 0.62) 62%,
      rgba(8, 10, 8, 0.76) 78%,
      rgba(8, 10, 8, 0.82) 100%
    );
  }

  /* Het beeld staat nu 130 procent hoog, waardoor er achter de subregel een lichte
     vensterband kwam te staan: mediane helderheid 145 tegen 102 daarvoor. De scrim
     alleen zou daar de halve foto voor moeten dimmen, dus krijgt dit blok dezelfde
     behandeling als de featureregels eronder al hadden: een zachte donkere schaduw,
     zodat wit leesbaar blijft waar het beeld toevallig oplicht. */
  .lifestyle-intro {
    text-shadow:
      0 1px 2px rgba(6, 8, 6, 0.5),
      0 2px 18px rgba(6, 8, 6, 0.55);
    top: 118px;
    bottom: auto;
    left: 50%;
    width: 342px;
    transform: translateX(-50%);
    display: grid;
    text-align: center;
  }

  /* Mondo houdt hier dezelfde XL-maat aan als in zijn hero: "Meet Beni" op 50px, cap
     37,5 css. Wij zaten op 40px, cap 28. Op 46px past "to live with you." niet meer
     (340 van de 342 css), dus de kop is in de bundel ingekort naar "Made to live /
     with you." De lead gaat van twee regels naar een; anders wordt het bovenblok
     hoger in plaats van lager, en juist die hoogte was het bezwaar (138 css bij ons
     tegen 99 bij Mondo). Nu 94 + 10 + 22 = 126. */
  /* RONDE 4. Op 46px meet deze kop cap 34,5 css (69 dev), Mondo's "Meet Beni" op
     dezelfde plek 37,5 (75 dev). Dat is dezelfde XL-maat als onze hero, dus 52px.
     "Made to live" wordt daarmee 277 css breed en blijft binnen de goot van 342.
     Een criticus vroeg 50px; 52 is de maat die de meting oplevert. */
  .lifestyle-intro h2 {
    order: 1;
    max-width: 342px;
    margin: 0 auto;
    font: 700 52px/52px var(--body);
    letter-spacing: -0.03em;
  }

  /* RONDE 5. De maat klopte al (cap 22 css tegen Mondo 23) maar het gewicht niet.
     Mondo zet zijn lead hier vet en zuiver wit over twee regels, het woord "robot"
     meet bij hem 95 css breed, bij ons 85 in een gewone snede. Onder onze kop hing
     daardoor bijna geen massa en de regel viel weg op de foto. Vet, wit, en in de
     bundel een tweede zin erbij zodat het net als bij Mondo twee regels worden. */
  .lifestyle-intro p {
    order: 2;
    max-width: 306px;
    margin: 16px auto 0;
    color: #ffffff;
    font: 700 16px/22px var(--body);
    letter-spacing: 0;
    /* Zonder dit brak de tweede zin af als een losse "gadget.". Mondo's lead staat
       hier als twee bijna even lange regels, dus balance en niet pretty. */
    text-wrap: balance;
  }

  /* Bodemgebonden in plaats van vast op 545, zodat de drie regels op elk toestel op
     dezelfde plek boven de onderrand hangen. */
  /* De rijen hingen in blokken van min-height 84. De laatste rij droeg daardoor 40px
     loze hoogte onder zich, waardoor het hele blok 252 hoog was terwijl er maar 212 aan
     tekst in zat, en dat duwde de eerste regel omhoog tot over de koepel. Met row-gap
     is het ritme hetzelfde (44 tekst plus 40 lucht is 84, net als Mondo's 82) maar
     eindigt het blok op de laatste alinearegel. Bodem 72: Mondo houdt 84 css onder zijn
     laatste regel, wij 72, en de eerste regel begint daardoor op 560 tegen Mondo 556. */
  /* RONDE 6. Een criticus wilde bodem 44 in plaats van 72, omdat onze laatste
     featureregel op 765,5 css eindigt en Mondo's blok pas op 817 van 842 afsluit.
     Nagemeten op de referentie is die 817 niet zijn laatste tekstregel maar zijn
     plakkende CTA-pil: die staat op device 1560..1645, dus css 780..822, en daaronder
     is het beeld weer leeg. Zijn drie featureregels staan op css 556..567, 640..651 en
     724..735 met de laatste subregel op 747..760. De onze stonden op 565..577,
     650..661 en 733..746 met de subregel op 756..766, dus tot op zes css gelijk.
     Bodem 44 geprobeerd en nagemeten: dan zakken onze regels naar 593, 678 en 761 met
     de subregel op 784..794, dus 34 css onder Mondo. Wij hebben die pil niet, dus de
     72 blijft; dit is de enige plek waar de criticus een element vergelijkt dat bij
     ons niet bestaat. */
  .lifestyle-features {
    top: auto;
    right: 24px;
    bottom: 72px;
    left: 68px;
    width: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
    column-gap: 0;
    text-align: left;
  }

  /* De drie iconen waren te klein voor de regels ernaast: gemeten inkt 18 x 16,5,
     19 x 16 en 16 x 20 css, tegen 22 x 22, 25 x 22 en 28,5 x 27,5 bij Mondo. Onze
     tekening vult ongeveer 0,79 van zijn vak, dus 30px vak levert 22 tot 25 css inkt.
     Kolom 30 plus goot 13 zet de tekst op x 111, precies waar Mondo hem heeft. */
  .lifestyle-features > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 13px;
    align-content: start;
    min-height: 0;
  }

  .lifestyle-features > div > .feature-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 30px;
    height: 30px;
    margin: 0;
  }

  /* De drie regels liggen bij ons over een lichte tafel en een lichte kat, waar Mondo
     donker gras heeft. De scrim doet het grove werk, deze schaduw houdt de letters ook
     leesbaar waar ze de witte ogen van de koepel kruisen. */
  .lifestyle-features {
    text-shadow:
      0 1px 2px rgba(6, 8, 6, 0.55),
      0 2px 16px rgba(6, 8, 6, 0.62);
  }

  .lifestyle-features > div > h3 {
    grid-column: 2;
    margin: 0;
    font: 700 17px/23px var(--body);
    letter-spacing: 0;
  }

  /* De subregels stonden in de standaard doffe kleur en vielen weg op de vacht van de
     kat. Mondo houdt zijn subregels vrijwel wit. */
  .lifestyle-features > div > p {
    grid-column: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font: 400 15px/21px var(--body);
    letter-spacing: 0;
  }

  /* ============================================================
     5. sec-02 / sec-04 / sec-06 FILM   (mondo sec-04, drie keer hetzelfde)
     Ritme: schermvullende clip die blijft staan, dan een egaal zwart tekstscherm
     dat eroverheen schuift met een XL gecentreerde kop en korte regels eronder.

     RONDE 1 zette kop en label allebei op min-height 50svh. Dat gaf een kop op 46
     procent en daaronder 380px leeg zwart. Mondo zet zijn tekstblok juist onderin het
     scherm en houdt de leegte erboven. Daarom nu een flexkolom van 200svh: de clip is
     de eerste 100svh, de kop rekt met flex-grow uit tot alles wat overblijft en zet
     zijn inhoud met align-content:end onderaan, en het label sluit er strak op aan met
     76px voet. Het zwarte tekstscherm is dus altijd precies een scherm hoog en het blok
     staat er altijd onderin, hoeveel regels de tekst ook heeft.
     ============================================================ */

  .film-section {
    background: #000;
  }

  .film-section .scroll-film {
    height: auto !important;
    min-height: 0;
    background: #000;
  }

  .film-section .scroll-film-sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 200svh;
    padding: 0;
    overflow: visible;
    background: #000;
  }

  .film-section .film-frames {
    inset: auto;
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    width: 100%;
    height: 100svh;
    overflow: hidden;
  }

  .film-section .film-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Voortgangsrail langs de linkerrand: drie segmenten van 94 met 10 ertussen. */
  .film-section .film-frames::after {
    content: "";
    position: absolute;
    top: calc(50svh - 151px);
    left: 18px;
    z-index: 2;
    width: 2px;
    height: 302px;
    pointer-events: none;
    background: repeating-linear-gradient(
      rgba(251, 247, 240, 0.35) 0 94px,
      transparent 94px 104px
    );
  }

  .film-section .film-shade {
    display: none;
  }

  .film-section .film-heading,
  .film-section--night .film-heading {
    inset: auto;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: grid;
    flex: 1 1 auto;
    align-content: end;
    width: auto !important;
    min-height: 0;
    margin: 0;
    padding: 0 24px;
    background: #000;
    text-align: center;
    text-shadow: none;
    opacity: 1 !important;
    transform: none !important;
  }

  /* RONDE 4, en dit dekt alle drie de filmsecties in een keer. Mondo's "Beni Films"
     meet cap 62 dev (31 css) met 81 dev (40,5 css) tussen twee kaplijnen. Wij stonden
     op 67 dev (33,5 css) met 93 dev (46,5). Corps 43 levert cap 31,3, leading 41 levert
     40,5. Het gat van kop-basislijn naar de eerste labelregel zakt daarmee vanzelf van
     31 naar 26 css, precies de 26 van Mondo, dus de padding van .film-label blijft. */
  .film-section .film-heading h2 {
    margin: 0;
    font: 800 43px/41px var(--body);
    letter-spacing: -0.03em;
  }

  .film-section .film-heading h2 span,
  .film-section .film-heading h2 span:last-child {
    display: block;
    margin: 0 !important;
    justify-self: center;
    text-align: center;
  }

  .film-section .film-label {
    inset: auto;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    /* Was 20px 24px 76px met 18px/25px. Mondo zet vier korte regels op 19,5 css
       regelafstand met een corps van 13,9, en houdt 26 css tussen kop-baseline en de
       eerste regel; wij zaten op 25 en 33. Wij houden 15px in plaats van 14 omdat onze
       kop 46px is tegen Mondo's 41: 15/46 ligt dichter bij Mondo's 14/41 dan 14/46.
       RONDE 4: nu de kop op 43px staat is die verhouding 11/43 tegen Mondo's 14/41, en
       gemeten zakt het gat van kop-basislijn naar de eerste labelregel daarmee van
       30,5 naar de 26 css die Mondo aanhoudt. */
    padding: 11px 24px 76px;
    background: #000;
    color: rgba(251, 247, 240, 0.9);
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-shadow: none;
    opacity: 1 !important;
  }

  /* RONDE 6, en dit dekt alle drie de filmsecties. Met balance op 268 maakte de
     browser drie even lange regels van ongeveer 180 css; Mondo zet daar vier regels
     die tot 250 css vollopen (210,5 / 144,5 / 160 / 250). Drie critici maten dat los
     van elkaar in sec-02, sec-04 en sec-06. Balance is hier dus de fout: het knijpt de
     kolom af in plaats van de tekst te verdelen. Met pretty lopen de regels vol tot de
     kolombreedte en haalt alleen de slotregel zijn wees weg. Kolom 256 in plaats van
     268, want Mondo's langste regel is 250. */
  .film-section .film-label span {
    display: block;
    max-width: 256px;
    margin: 0 auto;
    font-weight: 400;
    text-wrap: pretty;
  }

  /* De rail hoort ook over het zwarte tekstscherm door te lopen, net als bij Mondo.
     Het label is de laatste 100svh van de sectie, dus vanaf zijn onderrand gemeten
     staat de rail op dezelfde viewporthoogte als die op de clip. */
  .film-section .film-label::before {
    content: "";
    position: absolute;
    left: 18px;
    bottom: calc(50svh - 151px);
    width: 2px;
    height: 302px;
    pointer-events: none;
    background: repeating-linear-gradient(
      rgba(251, 247, 240, 0.35) 0 94px,
      transparent 94px 104px
    );
  }

  .film-section--night .night-log,
  .film-section .scroll-film .night-log {
    display: none !important;
  }

  /* De nachtclip had een gemiddelde luminantie van 28 met onderrijen op 8 tot 11; het
     zwarte tekstscherm eronder is 0. Clip en scherm smolten samen tot een blok van 1688
     device px zwart. Onze twee andere clips halen 105 en 132, Mondo's clips 77 en 134.
     Opgetrokken plus een haarlijn op de naad, zodat het ritme clip, tekstscherm blijft
     lezen. */
  /* RONDE 5. Een criticus mat onze koepel in deze clip op 37 x 25 css, tegen 190 x 150
     en 265 x 220 in de twee andere filmsecties, en vroeg om scale 1,45 met oorsprong
     74 procent 27 procent. Nagekeken op de bron klopt de diagnose maar het middel
     niet: de clip is 1920 x 1080 met vijf scenes, en cover toont in een staand kader
     van 390 x 844 maar 26 procent van de breedte. De koepel staat in de inbraakscene
     op bron-x 0,39, in de wieg-scene op 0,27 en op het bureau op 0,55. Met
     object-position 50 procent begon ons venster op 0,37, dus de koepel van de
     inbraakscene lag precies op de linkerrand: vandaar het stipje.
     Het venster staat nu op de scene die deze sectie draagt. object-position 33
     procent plus scale 1,25 met oorsprong linksboven legt het venster op
     0,307..0,515, met de koepel op 67 procent breedte en 32 procent hoogte en 1,25 keer
     zo groot als eerst (45 x 30 css in plaats van 37 x 25). Verder naar het midden kan,
     maar dan schuift de linker inbreker uit beeld en verliest de scene zijn verhaal:
     twee mensen in huis, Hermy die toekijkt. Dit is de balans. */
  .film-section--night .film-video {
    filter: brightness(1.45) contrast(0.95);
    object-position: 38% 50%;
    transform: scale(1.25);
    transform-origin: 50% 0%;
  }

  .film-section--night .film-heading {
    border-top: 1px solid rgba(251, 247, 240, 0.14);
  }

  /* ============================================================
     6. sec-03 PRIVACY BAND   (mondo sec-06)
     Compacte een-feature band: media full bleed boven, dan eyebrow, kop en alinea
     gecentreerd in een kolom. Geen lijst, ongeveer een scherm hoog.
     ============================================================ */

  .privacy-band {
    padding: 0 0 72px;
  }

  .privacy-row {
    position: relative;
    display: block;
    width: 100%;
    gap: 0;
    margin: 0;
  }

  /* De kruin van de man werd op rij 0 afgekapt. Iets hoger uitsnijden houdt hem heel
     zonder de tafel te verliezen. */
  .privacy-row > video {
    display: block;
    width: 100%;
    max-width: none;
    height: 294px;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: 50% 34%;
  }

  .privacy-row::after {
    content: "";
    position: absolute;
    top: 144px;
    right: 0;
    left: 0;
    height: 150px;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(245, 246, 242, 0),
      var(--hermy-surface)
    );
  }

  .privacy-copy {
    width: 342px;
    margin: 0 auto;
    padding-top: 33.5px;
    text-align: center;
  }

  .privacy-copy > p {
    margin: 0;
    color: var(--green-dark);
    font: 700 15px/21px var(--body);
    letter-spacing: 0;
  }

  .privacy-copy h2 {
    max-width: 330px;
    margin: 12px auto 0;
    font: 700 33px/38px var(--body);
    letter-spacing: -0.03em;
  }

  /* Drie dingen tegelijk: de regelafstand ging van 25 naar 20 (Mondo 20), het corps van
     18 naar 15 (Mondo 13,9) en de kolom van 312 naar 324, want onze langste regel bleef
     op 281 css steken waar Mondo er 310 haalt. Het gat kop naar alinea zakt van 30,5
     naar de 23 van Mondo.
     Een criticus vroeg ook om een mask op de video omdat de overgang naar het vlak een
     harde snee zou zijn. Nagemeten klopt dat niet: .privacy-row::after loopt al van
     y 144 tot 294 en is op device-rij 586 exact #f5f6f2. Een mask erbovenop zou dubbel
     verlopen, dus die blijft weg. */
  /* RONDE 4. Het enige wat hier nog afweek: van kop-basislijn naar de eerste
     alinearegel stonden wij op 55 dev (27,5 css), Mondo op 46 dev (23). Vijf px eraf.
     Een criticus wilde de kop ook naar een regel terug omdat onze band 561 css hoog is
     tegen 542 bij Mondo. Met deze vijf px wordt dat 556, en "He takes it all in. And
     keeps it quiet." past op 33px niet op een regel binnen 330 css. De kop blijft. */
  .privacy-copy > span {
    display: block;
    max-width: 324px;
    margin: 7px auto 0;
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
  }

  .privacy-points {
    display: none;
  }

  /* ============================================================
     7. sec-05 CAMPUS SAAS   (mondo sec-05)
     Lang licht hoofdstuk: XL titel plus lead, afgeronde mediakaart met zijmarge 24,
     en per subonderwerp dezelfde drieslag eyebrow, subkop, alinea.
     De agents zijn binnen datzelfde patroon een extra subkopje.
     ============================================================ */

  .campus-saas {
    padding: 128px 0 88px;
  }

  .campus-saas > header {
    width: 342px;
    margin: 0 auto;
    text-align: center;
  }

  .campus-saas > header > p {
    display: none;
  }

  /* RONDE 4. Op 48px haalde deze kop cap 34,5 css en liep "Meet the team" 299 css
     breed, oftewel 77 procent van het scherm; Mondo's "a Camera" haalt cap 38 en blijft
     op 211 css, met aan beide kanten dubbel zoveel marge. Ronde 3 koos 48 omdat 52 niet
     paste, maar dat is de tekst en niet de maat: de kop is in de bundel ingekort van
     "Meet the team / inside Hermy." naar "The team / in Hermy.". Op 52px meet de
     langste regel daarmee ongeveer 230 in plaats van 324. De leading van 52 klopte al:
     gemeten 103 dev tussen de twee kaplijnen, Mondo 103. */
  .campus-saas > header h2 {
    max-width: 342px;
    margin: 0 auto;
    font: 700 52px/52px var(--body);
    letter-spacing: -0.03em;
  }

  /* Mondo's lead is 213 css breed op corps 13,9 met 20 regelafstand; de onze liep 302
     breed op 18 en concurreerde met de kop. */
  .campus-saas > header > span {
    display: block;
    max-width: 274px;
    margin: 20px auto 0;
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
  }

  .campus-row {
    width: 342px;
    margin: 45px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* RONDE 2 hield 16:9 aan om de mockup heel te houden. Twee critici wijzen erop dat
     die keuze zichzelf tegenspreekt: op 342 x 192 is geen enkel label in die mockup
     leesbaar, de kaart leest als grijze ruis, en er stond bovendien een lege lichtblauwe
     band van 33 css links en rechts binnen de afronding. Mondo's kaart is 342 x 252
     (4:3) en altijd gevuld. Vullen wint dus van heel houden: de kaart wordt 4:3, cover,
     en het midden van de mockup blijft staan. Het beeld is 1440 x 810 en wordt in de
     hoogte geschaald, dus alleen de x-as van object-position doet iets. */
  /* RONDE 6. Twee critici lazen deze kaart als kapot: in het mailvenster werd de
     bodytekst midden in een woord afgekapt ("North & Bloom", "into campaigns t",
     "sophie@"), links staken letterfragmenten de kaart in en onder y 714 dev viel de
     linker 36 px terug op de paginakleur met een rechte naad. Dat komt allemaal uit de
     uitsnede: object-view-box zoomde in op een film van vier scenes (campusrender,
     inbox, compose, agentkaarten), dus elke vaste uitsnede landt bij de ene scene
     netjes en snijdt bij de volgende dwars door een venster.
     De bron is 1440 x 810, precies 16:9. Op een kaart van 16:9 valt het hele beeld
     zonder uitsnede in de kaart: niets afgesneden, geen letterbox, geen naad, en de
     kaart is over de volle hoogte dicht. Dat is wat Mondo doet, een beeld dat de
     rechthoek netjes vult; alleen is onze rechthoek 342 x 192 in plaats van 342 x 252.
     Ronde 4 en 5 kozen de andere kant (4:3 met een steeds strakkere uitsnede) en
     leverden allebei precies dit gebrek op, dus de leesbaarheid van een prop weegt hier
     niet op tegen een kaart die heel is. */
  .campus-row > video {
    order: 1;
    width: 342px;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--hermy-card);
    min-height: 0;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    overflow: hidden;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* RONDE 4. De kaartmaat klopte (342 x 256,5 tegen Mondo 342 x 251) maar de inhoud
     niet: op 390px stond er een compleet Gmail-scherm in met regels van ongeveer zes px,
     en de chip "Email Agent" viel half buiten de rechterrand terwijl het tabblad
     linksboven tot "y Campus" was afgesneden. Mondo zet in deze kaart een beeld met een
     onderwerp dat je in een oogopslag leest.
     De bron is 1440 x 810 en cover toont nu de middelste 75 procent van de breedte.
     Deze uitsnede houdt alleen het compose-venster over: bron-x 38..86 procent en
     bron-y 12..76 procent, samen 692 x 519 en dus exact de 4:3 van de kaart, zodat er
     niets meer wordt bijgesneden en er geen randchip in beeld valt. De tekst wordt
     1440/692 = 2,1 keer zo groot als op de volle bron. object-view-box knipt de bron
     voor object-fit; waar de browser dat niet kent blijft gewoon cover staan. */
  /* RONDE 5. Een criticus las de bodytekst in het mailvenster als grijze ruis van
     ongeveer 5 css hoog en vroeg om een strakkere uitsnede. Dat kan, maar niet zover
     als gevraagd: dit is geen stilstaand beeld maar een film van 15 seconden met vier
     scenes (campusrender, inbox, compose, agentkaarten). Een uitsnede op alleen de
     kop van het compose-venster zou de render eruit snijden, en juist die render is
     het beeld dat je in een oogopslag leest. De uitsnede gaat daarom van 48 naar 36
     procent van de bronbreedte: alles wordt 1,33 keer zo groot, de regels in de mail
     komen op ongeveer 6,7 css en de render blijft heel. Hoogte mee zodat de kaart
     precies 4:3 blijft. */
  .campus-row-copy {
    order: 2;
    padding-top: 34px;
    text-align: center;
  }

  .campus-row-copy > p {
    margin: 0;
    color: var(--green-dark);
    font: 700 15px/21px var(--body);
    letter-spacing: 0;
  }

  .campus-row-copy h3 {
    max-width: 330px;
    margin: 12px auto 0;
    font: 700 32px/38px var(--body);
    letter-spacing: -0.03em;
  }

  /* Mondo zet de alinea onder een subkop op 19 css regelafstand met 26 tussen subkop en
     alinea; wij stonden op 25 en 31. Corps mee omlaag, anders wordt 19 een knel. */
  /* RONDE 4. Op 290 css brak "A campus of agents. The Desk picks the team." als 266 css
     plus een losse "team." van 36. Mondo's alinea's in dit hoofdstuk lopen tot 313 css
     breed, dus de kolom kan ruimer. Een criticus vroeg er text-wrap:balance bij; dat
     zou juist twee even lange regels maken, terwijl Mondo's alinea's een volle regel
     plus een korte slotregel zijn. Daarom pretty en niet balance: dat haalt alleen de
     wees weg en laat het blok verder staan. */
  .campus-row-copy > span {
    display: block;
    max-width: 324px;
    margin: 12px auto 0;
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
    text-wrap: pretty;
  }

  .campus-row-copy > .glass-cta,
  .campus-row-copy > a.glass-cta {
    display: none;
  }

  /* Subonderwerp 2: eerst de tekst, dan de tegels. Was 40px; met 47 css tussen het
     einde van blok 1 en de eyebrow van blok 2 stonden er vijf gecentreerde tekstblokken
     achter elkaar met maar een beeld ertussen. Mondo maakt per subonderwerp een
     duidelijke luchtsprong. */
  /* RONDE 5. Twee critici lazen in tegel 1 "Add one from the Store and it arr ... to
     work.": de zwevende pil lag over de alinea. De pil staat waar Mondo hem heeft en
     dekt in elke tegelcapture dezelfde band af (y 61..103, x 272..366), dus verplaatsen
     lost niets op; en er past geen gecentreerde regel breder dan 154 css naast. De
     enige knop is dus het verticale ritme.
     De oplossing komt uit het patroon zelf. Mondo zet in zijn lange sectie eerst het
     beeld en dan de drieslag eyebrow, subkop, alinea. Ons eerste subonderwerp doet dat
     al (mediakaart, dan tekst), het tweede deed het omgekeerd. Nu allebei hetzelfde:
     eerst de tegelrij, dan de tekst. Daarmee valt in tegel 1 de tegelrij in de pilband
     en de tekst eronder, precies zoals bij Mondo de pil alleen over beeld valt. De
     luchtsprong van 72 uit ronde 4 blijft. */
  .campus-row.campus-row--agents {
    width: 342px;
    margin: 72px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .campus-row--agents .campus-row-copy {
    order: 2;
    /* Zelfde afstand van beeld naar eyebrow als bij het eerste subonderwerp. */
    padding-top: 34px;
  }

  .campus-row--agents .agent-ticker {
    order: 1;
    width: 342px;
    margin: 0 auto;
    gap: 12px;
    overflow: visible;
  }

  /* De rij schoof automatisch door, dus hij was op elk moment aan beide kanten
     middenin een woord afgesneden. Mondo heeft geen lopende band: zijn rijen beginnen
     strak op de gootlijn en bloeden alleen rechts door. Animatie uit, rij scrollbaar,
     randvervagingen weg (die stonden bovendien in #fefdfa, niet in ons vlak). */
  .agent-ticker .ticker-track {
    animation: none !important;
    transform: none !important;
  }

  /* RONDE 4. Twee hele tegels vulden de goot precies (161 + 20 + 161 = 342) en de
     derde begon dus exact op de rechter gootlijn: er piepte niets over de rand en de
     rij las als een stilstaand paar. Mondo laat zo'n rij tot aan de schermrand
     doorlopen, zoals in zijn sec-09 waar de tweede kaart aangesneden doorloopt. De rij
     bloedt daarom 24px naar beide kanten uit en houdt met padding zijn inhoud op de
     gootlijn; de derde tegel steekt nu 28 css over de rand. */
  /* RONDE 6. Twee critici lazen de derde tegel als kapot in plaats van als peek: bij
     Mondo snijdt de rand een beeld af, bij ons een gecentreerd label, dat daardoor als
     "En / Cam / Ag / W" over drie regels de rand in loopt. De tegelmaat blijft (137 met
     60 peek, zie de regel hieronder), maar de rij vloeit nu uit over de laatste 48 css.
     Dit is een masker en geen gekleurde verloopband: die stond er in ronde 3 wel en
     was in #fefdfa geschilderd, dus in de verkeerde vlakkleur. Een masker heeft geen
     kleur en werkt dus ook over de tegels heen. */
  .agent-ticker .ticker-row {
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 calc(100% - 62px),
      rgba(0, 0, 0, 0.25) calc(100% - 40px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 calc(100% - 62px),
      rgba(0, 0, 0, 0.25) calc(100% - 40px),
      transparent 100%
    );
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .agent-ticker .ticker-row::-webkit-scrollbar {
    display: none;
  }

  .agent-ticker .ticker-row::before,
  .agent-ticker .ticker-row::after {
    content: none;
  }

  /* RONDE 4. Er stonden twee rijen aan, elk met precies twee zichtbare tegels, en dat
     las als een raster van vier kaarten in plaats van als een strook. Mondo houdt per
     subkop een enkel breed mediablok en gebruikt op deze pagina verder alleen liggende
     schuifrijen waarvan de tweede kaart aangesneden doorloopt, zoals in zijn sec-09.
     Een rij is dus zowel het Mondo-patroon als de taal die onze eigen partner-carrousel
     al spreekt. Rij twee en drie gaan uit. */
  .agent-ticker .ticker-row:nth-child(n + 2) {
    display: none;
  }

  .ticker-group {
    gap: 16px;
    padding-right: 16px;
  }

  /* 161 + 20 + 161 = 342: twee hele tegels binnen dezelfde gootlijnen als de rest van
     de pagina, en de derde piept net over de rechterrand zodat de rij als scrollbaar
     leest. Dat is de opzet die Mondo bij zijn eigen rij gebruikt. */
  /* 161 + 20 + 161 = 342: twee hele tegels binnen dezelfde gootlijnen als de rest van
     de pagina, en de derde piept net over de rechterrand zodat de rij als scrollbaar
     leest. Dat is de opzet die Mondo bij zijn eigen rij gebruikt.
     RONDE 4: in een tegel van 158 hoog stond een merkje van 62, dus meer dan de helft
     was lucht en op #f5f6f2 bestond de tegel nauwelijks. Het merkje gaat naar 88 en de
     tegel krimpt mee, zodat de illustratie de tegel draagt in plaats van erin te
     zweven. */
  /* RONDE 5. Twee tegels van 161 met 20 goot vulden de 342 precies, dus tegel drie
     begon op 386 en toonde vier css: dat leest als een afsnijfout, niet als een rij.
     Onze eigen partnerrij en Mondo's mediarij houden allebei een peek van bijna 90
     css. Met 137 breed en 16 goot staan tegel een en twee op 24..161 en 177..314 en
     piept tegel drie 60 css over de rand: dezelfde leesbare overloop, en nog steeds
     twee hele tegels in beeld. Een criticus vroeg 66vw (257 css); dat is de maat van
     Mondo's mediakaart, maar bij 25+ agents zou je er dan nog maar een per scherm
     zien. */
  .ticker-tile {
    width: 137px;
    padding: 14px 12px 16px;
    gap: 8px;
    background: var(--hermy-card);
    border: 0;
    border-radius: 16px;
    box-shadow: none;
  }

  /* De agent-illustraties zijn 420 x 420 webp met een dekwitte achtergrond, alpha overal
     255. Puur "background: transparent" zoals gevraagd levert dus geen winst: het witte
     vlak zit in het beeld zelf en zou als hard vierkant blijven staan. Multiply laat wit
     wegvallen tegen de tegelkleur, zodat de illustratie rechtstreeks op de tegel staat en
     dit hoofdstuk net als bij Mondo nog maar een omkadering telt: de mediakaart. */
  .tile-avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    background: none;
    border-radius: 0;
    overflow: visible;
  }

  .tile-avatar img {
    mix-blend-mode: multiply;
  }

  .ticker-copy {
    min-height: 0;
  }

  /* Stond op nowrap met ellipsis: "Customer Support ...". Twee regels mag.
     align-content:end zet de naam onderin het vaste blok van 40px, zodat het groene
     labeltje er altijd op 2 css volgt. Daarvoor hing "Work" 41 css onder een naam van
     een regel en "Legal" 21 onder een naam van twee. */
  /* RONDE 6. min-height 40 dekte precies twee regels. "Email Campaign Agent" telt er
     drie, dus het groene categorielabel van tegel 3 zakte naar 353 css terwijl dat van
     tegel 1 en 2 op 315 stond en de rij zijn ritme verloor. Een criticus bood als
     alternatief de agentnamen in te korten tot twee woorden; dat helpt deze ene tegel,
     maar de rij schuift door langs 25+ agents met namen als "Financial Planning Agent"
     en dan staat het probleem er weer. Drie regels dekken is dus de maat. */
  .ticker-copy h3 {
    display: grid;
    align-content: end;
    margin: 0;
    min-height: 60px;
    font: 700 15px/20px var(--body);
    letter-spacing: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .tile-cat {
    margin-top: 2px;
    color: var(--green-dark);
    font: 700 14px/20px var(--body);
    letter-spacing: 0;
    text-transform: none;
  }

  .tile-desc {
    display: none;
  }

  /* RONDE 4. Dit was een kaart in #ebeee7 op een vlak van #f5f6f2, tien niveaus
     verschil, dus hij las als een vlek in plaats van als een element. En Mondo heeft in
     dit hoofdstuk geen losse promokaart staan: daar volgt na de alinea meteen het
     mediablok. De inhoud is te goed om weg te gooien, dus de omkadering gaat eraf en de
     regel loopt als gewone nadruk onder de alinea mee. Dit hoofdstuk telt daarmee nog
     maar twee omkaderde dingen: de mediakaart en de agent-tegels, net als bij Mondo. */
  /* RONDE 5. Deze twee regels vormden een vierde niveau dat Mondo niet kent: een vette
     bodyregel op precies de grootte van de alinea eronder, 24 css onder de vorige
     alinea, terwijl de twee echte subonderwerpen wel de volle trap dragen (eyebrow,
     subkop, alinea). Een criticus bood twee uitwegen: promoveren tot een derde
     subonderwerp met eigen eyebrow en subkop, of invouwen. Mondo houdt per mediablok
     precies drie niveaus, en een derde ladder zonder eigen beeld zou een patroon zijn
     dat op de hele referentie niet voorkomt. Dus invouwen: dezelfde kolom, dezelfde
     regelafstand, geen eigen aanloop, en de vette zin loopt als nadruk binnen de
     alinea mee. */
  /* RONDE 6. De eerste regel van dit blok kwam uit .campus-row-copy > span (15/20) en
     de rest uit .free-note, dat zelf geen regelafstand meekreeg en dus de
     bureaubladwaarde als strut gebruikte: gemeten basislijnen 671, 715 en 763 dev, dus
     22 en 24 css tussen de regels waar de rest van de pagina op 20 staat. De
     regelafstand hoort daarom op het blok zelf en niet alleen op de kinderen. */
  .free-note {
    width: 324px;
    margin: 0 auto;
    padding: 0;
    font: 400 15px/20px var(--body);
    background: none !important;
    background-image: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
  }

  .free-note::before,
  .free-note::after {
    content: none;
  }

  .free-note b {
    display: inline;
    font: 700 15px/20px var(--body);
    letter-spacing: 0;
  }

  /* De bundel zet de twee zinnen zonder spatie tegen elkaar. */
  .free-note b::after {
    content: " ";
  }

  .free-note > span {
    display: inline;
    margin-top: 0;
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
  }

  .agent-notes-mini {
    display: none;
  }

  /* ============================================================
     8. sec-07 SPECS   (mondo sec-07)
     Gecentreerde titel, een subregel, dan cellen zonder kaart of kader:
     lijnicoon gecentreerd, vette labelregel, waarde eronder. Vast rijritme 143.
     ============================================================ */

  /* RONDE 4. Onder de laatste rij bleef 195 dev (97,5 css) leeg, bij Mondo 130 dev
     (65 css). Het raster heeft een vast rijritme van 143, dus de laatste rij draagt zelf
     al 44 css loze hoogte; de rest komt van deze padding. 37 in plaats van 68 zet de
     staart op 65,5 css, gelijk aan Mondo. De bovenpadding blijft: onze titel begint op
     120,5 css vanaf de sectierand, Mondo op 129. */
  .specs {
    padding: 112px 0 37px;
    text-align: center;
  }

  .specs > header {
    width: 342px;
    margin: 0 auto;
    text-align: center;
  }

  .specs > header p {
    display: none;
  }

  /* Mondo's "Key Specs" heeft een cap van 32,5 css, corps 46. Wij stonden op 44. */
  .specs > header h2 {
    max-width: 342px;
    margin: 0 auto;
    font: 700 46px/50px var(--body);
    letter-spacing: -0.03em;
  }

  /* Mondo's subregel is corps 13,8 en trekt geen aandacht weg van de titel; de onze
     stond op 18 en kneep de koptrap aan twee kanten dicht. */
  /* RONDE 6. Van de laatste kopregel naar het kapteken van de subregel stonden wij op
     31,5 css, Mondo op 38,5. Alle corpsen klopten al, alleen deze trede stond te dicht.
     Deze selector staat op > span en niet op span, want de kop draagt sinds deze ronde
     twee varianten. Die twee staan in de bundel bewust in een <b> en niet in een
     <span>: de basis-CSS en hermy-premium mikken allebei met de losse selector
     .specs > header span op deze subregel, en die raakte dan ook de varianten in de
     kop, op elke breedte. Op mobiel kon ik dat hier rechtzetten, op desktop niet, en
     desktop moet onaangeraakt blijven. De <b> draagt in de bundel een inline
     font-weight:inherit, zodat de standaardwaarde bolder de kop nergens verzwaart. */
  .specs > header > span {
    display: block;
    max-width: 306px;
    margin: 25px auto 0;
    font: 400 14px/19px var(--body);
    letter-spacing: 0;
  }

  /* Ronde 2 mat de kolomassen na op 180,5 en concludeerde 1fr 1fr op 342. Dat klopte
     half: de assen liggen inderdaad 181 uit elkaar, maar op x 104,5 en 285,5 en niet op
     109,5 en 280,5. Mondo's raster is dus 362 breed, niet 342, met een celtekst van
     hooguit 148. Zo blijft er 62 css tussen de twee kolommen en 30 tot de schermrand,
     precies wat de critici als 64 en 55 aanwezen. */
  .specs-grid {
    width: 362px;
    margin: 0 auto;
    padding-top: 50px;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 143px;
    column-gap: 0;
    row-gap: 0;
    gap: 0;
    align-content: start;
  }

  .specs-grid > div {
    max-width: 148px;
    margin: 0 auto;
    text-align: center;
  }

  /* RONDE 6. Onze grootste icoonbox mat 55 x 48 dev inkt, bij Mondo 64 x 61, dus
     ongeveer twintig procent kleiner. Onze tekening vult 0,73 van zijn vak, dus 44px
     vak levert ongeveer 32 x 28 css inkt tegen Mondo's 32 x 30. Een criticus schreef
     "width:30px" bij een gemeten 27 css; dat zou het icoon juist kleiner maken dan het
     al is, dus de meting wint van het getal. */
  .spec-icon {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto;
  }

  .spec-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Icoon naar label was 22 css, Mondo 18. Het label zelf van 16 naar 15 (Mondo 15,1). */
  /* RONDE 6. Van de onderste inkt van het icoon naar het kapteken van het label was
     18 css, bij Mondo 25. Het icoonvak groeit hierboven mee van 37 naar 44, waardoor de
     inkt zelf al ongeveer 3 css lager eindigt; 12 in plaats van 6 zet de trede daarmee
     op ongeveer 24 css. */
  .specs-grid dt {
    margin-top: 12px;
    font: 700 15px/20px var(--body);
    letter-spacing: 0;
  }

  .specs-grid dd {
    margin: 0;
  }

  /* Mondo's waarderegels staan op corps 12,4 met 17 css regelafstand; wij op 15 met 20.
     Daardoor liepen binnen een cel de regels losser (20) dan de ruimte tussen twee cellen
     (17,5 tot 21,5) en liep het raster als een doorlopende tekstkolom door. Op 13/17
     binnen een vaste rij van 143 wordt dat 17 binnen en ongeveer 27 ertussen, net als bij
     Mondo. "Wide camera · dual mics" past nu bovendien op een regel van 143 css. */
  /* RONDE 4. Van labelbasislijn naar de eerste waarderegel maten wij 22 dev, Mondo 25.
     Twee px erbij zet dat op 26 dev, oftewel 13 css tegen Mondo 12,5. Een criticus vroeg
     6px; dat zou 15 css worden en dus over Mondo heen schieten. */
  .specs-grid dd b {
    display: block;
    margin-top: 4px;
    font: 400 13px/17px var(--body);
    letter-spacing: 0;
    text-wrap: balance;
  }

  .specs-grid dd span {
    display: block;
    margin-top: 0;
    color: inherit;
    font: 400 13px/17px var(--body);
    letter-spacing: 0;
    text-wrap: balance;
  }

  /* ============================================================
     9. sec-08 PARTNERS   (mondo sec-09)
     Titel plus lead, twee smalle kaarten naast elkaar, daaronder een horizontaal
     schuivende rij staande mediakaarten met rond avatar en naam linksboven.
     ============================================================ */

  /* RONDE 6. Onze eerste inkt stond op 123 css vanaf de sectierand, bij Mondo op 87,
     terwijl onze staart onder de carrousel juist krapper was (76 tegen 94). De kop
     zelf was een op een raak, dus alleen de aanloop gaat eraf. */
  .partners {
    padding: 76px 0 76px;
  }

  .partners > header {
    width: 342px;
    margin: 0 auto;
    text-align: center;
  }

  .partners > header p {
    display: none;
  }

  /* Mondo's "Why People Love Beni" heeft cap 37,5 met leading 62, dus corps 50.
     RONDE 4: op 50px mat "From sketch" 260,5 css en "to production." 302, dus onze kop
     was onderaan breder dan bovenaan en liep 27 css verder door dan Mondo's langste
     regel ("Why People", 275,5). Mondo is juist kopzwaar: 275,5 boven, 212,5 onder. De
     tweede regel is in de bundel ingekort naar "to build.", ongeveer 195 css. */
  /* RONDE 5. Deze kop was als enige XL-kop een halve trede lager: cap 70 dev tegen 73
     tot 75 bij hero, lifestyle en campus, en 74 bij Mondo's partnerkop. Nunito Sans
     haalt cap = 0,719 x corps, dus 52 levert 74,8 dev, gelijk aan de rest. "From
     sketch" wordt daarmee 271 css breed en blijft binnen de goot van 342. De leading
     van 62 klopte al (gemeten 122 dev tegen Mondo 124) en blijft staan. */
  .partners > header h2 {
    max-width: 342px;
    margin: 0 auto;
    font: 700 52px/62px var(--body);
    letter-spacing: -0.03em;
  }

  /* Mondo's lead is corps 13,3 op 19 regelafstand over twee regels. Bij ons zakte het
     contrast titel tegen lead van 3,7 naar 2,5, dus de kop kwam niet los van zijn
     ondertitel. Kolom op 280 zodat het net als bij Mondo twee regels worden. */
  /* RONDE 4. Op 280 css brak de lead als 250 plus een losse "teams." van 40,5. Mondo's
     lead loopt 313,5 en 67 css, dus ruim zestig css breder per regel en met twee
     woorden op de slotregel. Kolom naar 324, en pretty in plaats van het gevraagde
     balance: balance zou er twee even lange regels van maken, wat Mondo hier juist
     niet doet. */
  .partners > header > span {
    display: block;
    max-width: 324px;
    margin: 18px auto 0;
    font: 400 14px/19px var(--body);
    letter-spacing: 0;
    text-wrap: pretty;
  }

  .partner-cards {
    width: 342px;
    margin: 44px auto 0;
    display: grid;
    grid-template-columns: 166px 166px;
    column-gap: 10px;
    row-gap: 0;
    justify-content: space-between;
  }

  /* Mondo's smalle kaarten zijn 210 css hoog, lijnen links uit en sluiten af met een
     merklogo op een eigen basislijn onderin. De onze waren 158 hoog, gecentreerd in een
     kolom van 162 (waardoor "Turned Hermy into / the first physical / prototype." als
     rafelige ruit stond) en eindigden met een dof grijs plaatsnaamregeltje. */
  .partner-cards article {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 166px;
    min-width: 0;
    /* RONDE 4. min-height 200 hield beide kaarten hoger dan hun inhoud, en samen met
       margin-top:auto op de plaatsregel gaf dat een dood gat van 146 dev (73 css)
       tussen de laatste alinearegel en die plaatsregel. Bij Mondo ontstaat zo'n gat
       alleen doordat zijn rechterkaart zes regels telt tegen drie links, en het wordt
       daar gevuld door een merklogo. Onze twee kaarten hebben allebei drie regels, dus
       de grid-stretch houdt ze vanzelf even hoog en er hoort geen gat te zijn.
       RONDE 6: met de sluitregel als merkregel onderin hoort dat gat er wel te zijn,
       precies zoals Mondo's logo onderin zijn kaart hangt. Zie de regel bij
       .partner-cards article b. */
    min-height: 186px;
    padding: 18px 16px 18px;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    text-align: left;
  }

  .partner-cards article > span {
    display: none;
  }

  .partner-cards h3 {
    margin: 0;
    font: 700 16px/22px var(--body);
    letter-spacing: 0;
  }

  /* Mondo's quote staat op ongeveer 12 css met 14 regelafstand. Wij houden 13/16: onder
     een kaarttitel van 16px wordt 12/14 een fluistering, en onze regels zijn langer. */
  .partner-cards article p,
  .partner-cards article p span {
    margin: 8px 0 0;
    font: 400 13px/16px var(--body);
    letter-spacing: 0;
  }

  .partner-cards article p span {
    margin: 0;
  }

  /* Zonder min-height is er niets meer om naartoe te duwen: de plaatsregel volgt de
     alinea op 18 css, net zoals Mondo's merklogo zijn quote op ongeveer 15 volgt. */
  /* RONDE 6. Mondo sluit deze twee smalle kaarten af met een merklogo op een eigen
     basislijn onderin, wij met een gewone vette tekstregel die direct op de alinea
     volgt. Een logo kunnen wij hier niet zetten: van Spark Design en PEZY Group hebben
     wij geen woordmerk in de assets, en er een tekenen zou een merk verzinnen dat niet
     bestaat. Wat wel kan is de sluitregel als merkregel behandelen en hem op een eigen
     basislijn onderin de kaart hangen, zodat de kaart dezelfde opbouw krijgt als bij
     Mondo: tekst boven, merkregel onder. De kaart groeit daarvoor van 149 naar 186 css
     (Mondo 204). */
  .partner-cards article b {
    margin-top: auto;
    padding-top: 22px;
    color: #161815;
    font: 700 12px/16px var(--body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* scroll-padding erbij: zonder dat sprong het snappunt naar de contentrand van de
     rail, waardoor de eerste kaart 24px naar links schoof en op x=0 tegen het scherm
     kwam te staan. Mondo laat zo'n rij op de gootlijn beginnen. */
  .partner-reel {
    width: auto;
    margin: 48px 0 0;
    padding: 0 24px;
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }

  .partner-reel::-webkit-scrollbar {
    display: none;
  }

  .reel-card {
    flex: 0 0 258px;
    width: 258px;
    height: 459px;
    border-radius: 20px;
    box-shadow: none;
    overflow: hidden;
    scroll-snap-align: start;
  }

  /* De bronclips zijn 960 x 540 liggend. In een staande kaart snijdt cover alleen
     links en rechts, dus de ingebrande ondertiteling in de Spark-clip bleef precies in
     beeld staan. De clip is daarom 71px hoger dan de kaart en wordt onderaan
     weggesneden: de ondertitelbalk valt buiten de kaartrand. */
  /* RONDE 5. Een criticus schreef dat het scrim boven in de mediakaart ontbrak en dat
     de witte naam over een witte deurpost wegvalt. De helft klopt niet: de basis zet
     al .reel-card:before met een verloop van rgba(4,10,16,0.5) over 96 css, dus hoger
     dan Mondo's circa 75. Nagemeten op de capture haalt de achtergrond onder de naam
     mediaan 60 luminantie (linkerhelft 76, rechterhelft 50), en wit daarop is 8 tot
     11 op 1. De naam valt dus niet weg.
     Wat wel waar is: dit is een lopende clip en het frame wisselt, en de Spark-clip
     heeft lichte keukenwanden die per frame tot boven 140 kunnen komen. Het scrim gaat
     daarom van een enkele stop van 0,5 naar een verloop dat bovenin 0,7 haalt en op
     45 procent nog 0,42, zodat de naam ook op het lichtste frame blijft staan. Hoogte
     naar 108 css, want daar eindigt onze naamregel. */
  .reel-card::before {
    height: 108px;
    background: linear-gradient(
      180deg,
      rgba(6, 10, 14, 0.7) 0%,
      rgba(6, 10, 14, 0.42) 45%,
      rgba(6, 10, 14, 0) 100%
    );
  }

  /* RONDE 5. Een criticus mat deze kaart op 254 x 492 css (1 op 1,94) en vroeg om
     9:16. Nagemeten in de DOM en op de capture zelf is de kaart 258 x 459 css, oftewel
     1 op 1,779: dat is 9:16 tot op een tiende. Er verandert hier dus niets. */
  .reel-card video {
    display: block;
    width: 258px;
    height: 530px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .reel-card figcaption {
    top: 12px;
    right: 12px;
    left: 12px;
    gap: 8px;
    align-items: center;
  }

  /* Mondo's ronde avatar is 40 css en de naam ernaast staat in een gewone snede op 15.
     Bij ons was de avatar 33 en de naam vet, waardoor de regel zwaarder aandeed dan de
     mediakaart eromheen. */
  .reel-card figcaption span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font: 700 15px/1 var(--body);
    letter-spacing: 0;
  }

  .reel-card figcaption b {
    color: #fff;
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
  }

  /* RONDE 6. Mondo zet onder deze rij twee ronde pijlknoppen, rechts uitgelijnd, circa
     30 css onder de kaarten (gemeten op zijn tegel: cirkels van 48 css met de
     rechterrand op 366, dus dezelfde gootlijn als de rest). Bij ons stond daar niets en
     hadden de twee verborgen video's geen enkele aanwijzing. Een criticus bood als
     alternatief een masker over de rechterrand; dat is bij ons niet nodig, want de
     tweede kaart loopt al 88 css aangesneden door, precies zoals bij Mondo. Wat
     ontbrak was de bediening zelf, dus die is er nu, en hij werkt ook echt: de knoppen
     schuiven de rij een kaartbreedte plus goot op.
     Het element staat in de bundel op style="display:none" en wordt hier aangezet,
     zodat de desktop boven 900px onaangeraakt blijft. Dat is dezelfde constructie als
     bij .site-end-social. */
  .reel-nav {
    display: flex !important;
    justify-content: flex-end;
    gap: 12px;
    width: auto;
    margin: 28px 0 0;
    padding: 0 24px;
  }

  .reel-nav button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    background: var(--hermy-card);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    /* Mondo zet zijn pijltjes duidelijk doffer dan zijn tekst; op de referentie is de
       cirkel een tint lichter dan de kaart en het pijltje middengrijs. Ink zou hier het
       zwaarste element van de sectie worden. */
    color: var(--muted);
  }

  .reel-nav svg {
    width: 20px;
    height: 20px;
  }

  /* ============================================================
     10. sec-09 PRICING   (mondo sec-10 en sec-11)
     Prijskaart over de volle breedte, een per rij, gestapeld. Niets steekt buiten beeld.
     De inhoud van de kaart blijft links, dat is een van de twee uitzonderingen.
     ============================================================ */

  .pricing {
    padding: 128px 0 64px;
  }

  .pricing > header {
    width: 342px;
    margin: 0 auto;
    text-align: center;
  }

  .pricing > header p {
    display: none;
  }

  .pricing > header h2 {
    max-width: 330px;
    margin: 0 auto;
    font: 700 44px/48px var(--body);
    letter-spacing: -0.03em;
  }

  /* RONDE 4. Op 290 css brak de lead als 262,5 plus een losse "service." van 49.
     Op 324 past "First Edition hardware, with year one of service." op een regel. */
  .pricing > header span {
    display: block;
    max-width: 324px;
    margin: 18px auto 0;
    font: 400 15px/20px var(--body);
    letter-spacing: 0;
    text-wrap: pretty;
  }

  .price-grid {
    width: 342px;
    margin: 44px auto 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 20px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .price-grid article,
  .price-grid .price-featured {
    width: 342px;
    margin-left: 0;
    padding: 36px 34px 38px;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    transform: none;
    text-align: left;
  }

  .price-grid article:first-child {
    margin-left: 0;
  }

  /* RONDE 4. De pil was 27 css hoog en 138 breed, Mondo's "ESSENTIAL" 20 x 86. In
     verhouding tot de kaartnaam eronder trok het badge daardoor meer aandacht dan bij
     Mondo. 5 boven en onder plus corps 11 geeft 21 hoog; de tracking van 2px was op
     12px 0,167em, ruim het dubbele van wat Mondo aanhoudt. */
  /* RONDE 6. Nagemeten op de referentie is Mondo's ESSENTIAL 47 dev hoog en 170 dev
     breed, dus 23,5 x 85 css; ronde 4 noteerde daar 20 x 86 en zette onze pil op 21.
     De meting van deze ronde wint: 6 boven, corps 12, 6 onder is 24. */
  .price-badge {
    padding: 6px 13px;
    border-radius: 999px;
    font: 700 12px/1 var(--body);
    letter-spacing: 0.09em;
  }

  /* Kaart een droeg een dichte groene pil met witte letters, kaart twee een omlijnde pil
     met groene letters op de kaartkleur, waardoor de tweede kaart de mindere leek. Mondo
     vult beide pillen en wisselt alleen de tint. */
  .price-featured .price-badge {
    background: var(--green-dark);
    border: 0;
    color: var(--hermy-surface);
  }

  .price-grid h3 {
    margin-top: 16px;
    font: 800 26px/31px var(--body);
    letter-spacing: -0.03em;
    text-align: left;
  }

  .price-grid article p {
    margin-top: 10px;
    font: 400 14px/19px var(--body);
    letter-spacing: 0;
  }

  .price-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 18px;
  }

  /* RONDE 2 koos contain op wit. Dat maakte het erger: de sfeerfoto zweefde met witte
     marges van 10 tot 26 device px in de tegel, en het onderwerp van de tweede miniatuur
     haalde nog maar 62 procent van de tegelhoogte tegen 82 tot 93 bij Mondo. Cover zonder
     padding vult alle vier de tegels. De tweede miniatuur (first-edition.webp) heeft 9 en
     10 procent lege rand ingebakken; object-view-box snijdt die eraf en tilt het onderwerp
     naar ongeveer 88 procent. Waar object-view-box ontbreekt blijft gewoon cover staan. */
  /* RONDE 4. De vier miniaturen stonden op zuiver wit (255,255,255) in een kaart van
     235,238,231, een sprong van twintig niveaus, zodat ze als witte gaten in de kaart
     oplichten. Mondo houdt plaat en kaart tien niveaus uit elkaar: kaart 236,234,232 en
     plaat 246,244,242, en die plaat is precies zijn paginakleur. Bij ons is dat
     #f5f6f2, dus vlakkleur in plaats van wit levert exact dezelfde verhouding.
     Drie van de vier bronnen zijn uitgeknipte webp's met een echte alfakanaal (alpha
     gemiddeld 105), dus het wit kwam hier vandaan en niet uit het beeld. Daarom geen
     mix-blend-mode: multiply zoals gevraagd, want dat zou de vierde tegel, de opaque
     podiumfoto in de Duo-kaart, onnodig verdonkeren. */
  /* RONDE 5. Twee critici zagen hetzelfde: cover sneed het product af. De doos in de
     rechtertegel liep tegen de tegelrand aan kapot en de robot ervoor was links en
     onderaan weg, en in de linkertegel bleef er 15 css boven en 23 onder de koepel
     over op een tegel van 93. Mondo laat het product in zijn tegels helemaal zien met
     circa 35 dev lucht rondom, ongeveer negen procent van de tegelhoogte.
     Drie van onze vier bronnen zijn uitgeknipte webp met alfa (hermy-product,
     first-edition, first-edition), dus daar hoort contain met lucht. De vierde is een
     echte foto (podium.webp, opaque 1920 x 1080); die blijft vullend, want contain zou
     er een zwevend fotootje met randen van maken. Precies de tweedeling die de tweede
     criticus vroeg, alleen op de bron in plaats van op een klasse die wij niet
     hebben. Padding 8 x 10 geeft 8,6 procent lucht, gelijk aan Mondo. */
  /* RONDE 6. Twee critici zagen hetzelfde: in de Duo-kaart was de linker miniatuur een
     vullende sfeerfoto en de rechter een producttegel met lucht, dus binnen een kaart
     stonden twee mediabehandelingen naast elkaar. Mondo zet in allebei zijn vakjes
     exact dezelfde plaat: gemeten 252 x 186 dev met het product in het midden en lucht
     rondom. De uitzondering voor podium.webp uit ronde 5 gaat er daarom af; die foto
     staat nu net als de andere drie op de plaat.
     De hoekstraal is op de referentie nagemeten via de inloop van de bovenrand
     (15 dev op 2 dev diepte, 10 op 4): dat geeft een straal van 23 tot 25 dev, dus 12
     css. Wij stonden op 8. Een criticus schreef 22px, maar dat was zijn meting in
     device px; in css is dat 11. */
  .price-media img {
    width: 100%;
    height: 93px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: var(--hermy-surface);
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    object-fit: contain;
    object-position: 50% 50%;
  }

  @supports (object-view-box: inset(0)) {
    .price-media img + img {
      object-view-box: inset(9% 0% 10% 0%);
    }

    /* podium.webp is de enige echte foto tussen de vier miniaturen en is 16:9, dus
       ingepast op de plaat bleef er boven en onder een strook van 7 css over terwijl de
       drie uitgeknipte webp's hun plaat wel vullen. Deze uitsnede maakt de bron 1,47
       breed tegen hoog, precies de verhouding van het vak binnen de padding, met de
       koepel nog steeds in het midden. */
    .price-media img[src$="podium.webp"] {
      object-view-box: inset(0% 9% 0% 9%);
    }
  }

  /* RONDE 4. De kaart droeg drie haarlijnen, Mondo twee. Bij Mondo: lijn onder de
     subregel, dan de mediastrip, dan de vinkjes, dan lijn, dan het prijsblok. Bij ons
     stond er ook nog een lijn tussen de mediastrip en de vinkjes, waardoor de kaart in
     vier hokjes viel in plaats van drie. Deze gaat eruit; de lijn onder de subregel en
     die boven het prijsblok blijven. */
  .price-grid ul {
    gap: 4px;
    margin-top: 22px;
    padding-top: 0;
    border-top: 0;
  }

  /* Regelritme was 33px met gevulde schijven van 17. Mondo houdt 24px met een klein
     vinkje. Wij houden onze groene schijf als merkteken maar brengen hem terug naar 15,
     zodat het ritme wel klopt. */
  .pricing .price-grid article li {
    gap: 10px;
    font: 400 14px/20px var(--body);
    letter-spacing: 0;
  }

  /* Het regelritme van 24 klopt al met Mondo's 23,75, dus de tekst blijft; wat te hard
     stond was het merkteken: vier gevulde groene schijven van 17 trokken de aandacht weg
     van $499. Mondo zet daar een open vinkje van 9 css in zijn accentkleur. Een gevulde
     schijf van 12 werd onleesbaar (het haakje verdwijnt), dus hetzelfde als Mondo: open,
     14 groot, in ons groen. */
  .pricing .price-grid article li::before {
    width: 14px;
    height: 14px;
    background: none;
    border: 1.5px solid var(--green-dark);
    color: var(--green-dark);
    font-size: 9px;
    font-weight: 800;
  }

  .price {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  /* Stond grijs met 2px spatiering, waardoor het prijsblok als twee losse dingen las.
     Mondo zet dit label donker en vet, vlak boven het bedrag, met nauwelijks tracking. */
  .price small {
    display: block;
    color: #161815;
    font: 700 13px/1 var(--body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .price b {
    font: 800 42px/46px var(--body);
    letter-spacing: -0.03em;
  }

  .price > div {
    gap: 10px;
    margin-top: 8px;
  }

  .price i {
    padding: 6px 10px;
    font: 700 12px/1 var(--body);
    font-style: normal;
    letter-spacing: 0;
  }

  .price s {
    font: 400 14px/1 var(--body);
    letter-spacing: 0;
  }

  /* Mondo's kaartknop meet 47,5 css in de hoogte, wij 48 in CSS maar 43 in beeld. */
  .price-grid article > .glass-cta {
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin-top: 24px;
    padding: 0;
    border-radius: 999px;
    font: 700 15px/1 var(--body);
    letter-spacing: 0;
  }

  .pricing-note {
    width: auto;
    max-width: 306px;
    margin: 26px auto 0;
    padding: 0;
    font: 400 13px/18px var(--body);
    letter-spacing: 0;
    text-align: center;
  }

  /* ============================================================
     11. sec-10 FAQ   (mondo sec-12)
     Losse pills met ruimte ertussen, plus rechts uitgelijnd, afgesloten met een
     gecentreerde pil-knop. De vraagregel blijft links.
     ============================================================ */

  /* RONDE 4. Onder de knop bleef 84,5 css over, bij Mondo 244 dev (122 css). Al het
     andere in deze sectie was al een op een. */
  .faq {
    padding: 126px 0 121px;
  }

  .faq > header {
    width: 342px;
    margin: 0 auto;
    text-align: center;
  }

  .faq > header p {
    display: none;
  }

  /* Zelfde corpsgrootte als Mondo, maar hun FAQ staat in een lichter snede. Op 700 was
     dit de enige kop op de pagina die schreeuwde. */
  .faq > header h2 {
    margin: 0;
    font: 600 50px/50px var(--body);
    letter-spacing: -0.03em;
  }

  .faq > div {
    width: 342px;
    margin: 44px auto 0;
    display: grid;
    gap: 14px;
  }

  .faq-item,
  .faq-item:last-child {
    margin: 0;
    border: 0;
    border-radius: 25px;
    box-shadow: none;
    overflow: hidden;
  }

  /* Alles in deze sectie klopte al op een tot twee css px na; alleen de vraagregel was
     ongeveer tien procent groter dan die van Mondo (corps 16,7 daar, 19 hier). */
  .faq-q {
    min-height: 52px;
    padding: 0 22px 0 20px;
    gap: 10px;
    align-items: center;
    font: 700 17px/24px var(--body);
    letter-spacing: 0;
    text-align: left;
  }

  .faq-item[data-open="true"] .faq-q {
    min-height: 52px;
    padding-top: 14px;
    padding-bottom: 12px;
    align-items: start;
  }

  .faq-toggle {
    width: 18px;
    height: 18px;
  }

  .faq-panel p {
    padding: 0 22px 18px 20px;
    font: 400 15px/21px var(--body);
    letter-spacing: 0;
  }

  .faq-more {
    width: 126px;
    height: 49px;
    min-height: 49px;
    margin: 54px auto 0;
    padding: 0;
    background: var(--hermy-card);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: var(--ink);
    font: 700 14px/1 var(--body);
    letter-spacing: 0;
  }

  /* ============================================================
     12. sec-11 SITE END, deel A: community-band   (mondo sec-13)
     Egale vlakkleur, gecentreerde kop, alinea, kanaalknoppen als brede pills onder
     elkaar met een rond icoon links, daaronder de contactregel.
     ============================================================ */

  .site-end {
    padding: 0 0 64px;
    background: #0a0f0c;
    text-align: center;
  }

  .site-end-mark {
    display: none;
  }

  .site-end-inner {
    width: 342px;
    margin: 0 auto;
    padding-top: 54px;
    text-align: center;
  }

  .site-end-eyebrow {
    display: none;
  }

  .site-end h2 {
    margin: 0;
    font: 700 24px/29px var(--body);
    letter-spacing: -0.03em;
  }

  /* Mondo's alinea hier is 324 css breed, de onze brak op 296 en dus een regel eerder.
     RONDE 5. In Mondo's band staan kop, lead en contactregel alle drie op zuiver wit.
     Bij ons was de kop #fbf8f2 maar zakte de lead naar 0,66 en de contactregel naar
     0,6, dus de band sprak met drie stemmen in plaats van een. Allebei naar de kleur
     van de kop: dat is dezelfde ingreep als Mondo, alleen in ons warme wit in plaats
     van 255,255,255, zodat de band bij de rest van de site blijft horen. */
  .site-end-lead {
    display: block;
    max-width: 324px;
    margin: 12px auto 0;
    color: #fbf8f2;
    font: 400 13px/18px var(--body);
    letter-spacing: 0;
  }

  .community-links {
    display: grid;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
  }

  .community-links > a,
  .community-links > button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    width: 186px;
    height: 40px;
    min-height: 40px;
    /* RONDE 4. Het label stond gecentreerd in de ruimte rechts van het icoon, dus op
       x 216, terwijl Mondo's "Discord" op 205,5 staat: hij centreert net iets meer naar
       het midden van de hele pil. Twintig px rechts erbij zet ons midden op 204. Een
       criticus wilde een derde kolom van 35px, maar dat centreert op 195 en schiet er
       dus tien px overheen. */
    padding: 0 20px 0 2px;
    background: var(--hermy-surface);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: #11140f;
    font: 400 16px/1 var(--body);
    letter-spacing: 0;
  }

  /* Het merkteken vulde 40 procent van de cirkel, bij Mondo 60. Minder padding. */
  .community-links > a svg,
  .community-links > button svg {
    width: 36px;
    height: 36px;
    padding: 5px;
    background: #0a0f0c;
    border-radius: 50%;
    color: var(--hermy-surface);
  }

  /* Liep als een regel van 36 tot 354. Mondo breekt dezelfde zin in twee gecentreerde
     regels, en zet die twee regels op 14 css uit elkaar; wij stonden op 19. */
  .site-end > .site-end-inner > small {
    display: block;
    max-width: 264px;
    margin: 32px auto 0;
    color: #fbf8f2;
    font: 400 13px/14px var(--body);
    letter-spacing: 0;
  }

  /* Alleen de kleur; zet hier geen display, dan wordt het mailadres een eigen blok en
     loopt zijn onderstreping over de volle kolombreedte door. */
  .site-end > .site-end-inner > small a {
    color: #fbf8f2;
  }

  /* ============================================================
     13. sec-11 SITE END, deel B: footerstaart   (mondo sec-14)
     Een gecentreerde linkrij met scheidingsstippen, daaronder de copyrightregel.

     RONDE 2 liet de rij ronde merkknoppen tussen linkrij en copyright bewust weg, met
     als reden dat wij dezelfde drie kanalen al als pills in de band erboven dragen.
     Nagekeken op de referentie klopt dat argument niet: Mondo herhaalt Discord, Reddit
     en Facebook uit zijn eigen band net zo goed in de staart. Zijn staart is daardoor
     drie banden diep en de onze sprong van de linkrij meteen naar het copyright. De rij
     is er nu wel, met alleen de drie kanalen die wij echt hebben. Het element staat in
     de bundel op style="display:none" en wordt hier weer aangezet, zodat de desktop
     boven 900px onaangeraakt blijft.
     ============================================================ */

  /* RONDE 4: met de linkrij op 12px in plaats van 15 werd het gat tussen de haarlijn
     en die rij 36 css, waar Mondo 28 aanhoudt. Zeven px eraf. */
  .site-end-bottom {
    display: block;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(251, 247, 240, 0.14);
    text-align: center;
  }

  /* RONDE 4. De linkrij stond op corps 15 met gewicht 600 en las bijna even zwaar als
     de kop erboven. Mondo's "Privacy Policy" meet van kaplijn tot staart 23 dev; met
     kap plus staart is dat 0,945 em, dus corps 12,2. Gewicht 500 in plaats van 600:
     Mondo staat op normaal, maar onze staart is wit op #0a0f0c en 400 valt daar op
     12px uit elkaar. Een criticus vroeg 15px met gewicht 400; dat houdt de rij even
     groot als nu en lost het gewichtsprobleem maar half op. */
  .site-end-bottom .footer-links,
  .site-end-bottom .footer-legal {
    display: inline;
    gap: 0;
    font: 400 12px/18px var(--body);
    letter-spacing: 0;
  }

  /* Mondo houdt er vier op een regel, samen 338 css breed binnen een goot van 342.
     RONDE 4: op 12px kromp onze rij van vier naar 245 css, dus veel losser dan Mondo.
     "Key specs" mag er daarom weer bij: vijf links plus vier bolletjes komen op
     ongeveer 314 css uit en dat ligt weer naast Mondo. "Contact" blijft weg, want dat
     staat als hello@gethermy.com al in de band er direct boven. */
  .site-end-bottom .footer-legal a[href^="mailto:"] {
    display: none;
  }

  /* Zonder dit zou "Privacy" een tweede bolletje krijgen nu "Contact" verborgen is. */
  .site-end-bottom .footer-legal a + a::before {
    content: none;
  }

  /* De rij droeg twee behandelingen door elkaar: drie links in helder wit, twee in dof
     grijs, alsof de helft uitgeschakeld was. Mondo zet ze alle vier in een kleur en een
     gewicht en dimt alleen de scheidingsstip. */
  .site-end-bottom nav a,
  .site-end-bottom nav button {
    display: inline;
    min-height: 0;
    padding: 0;
    color: #fbf8f2;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0;
    opacity: 1;
    white-space: nowrap;
  }

  /* De spatie na het bolletje viel weg, dus er stond "Meet Hermy ·Campus". Nu even veel
     lucht aan beide kanten, net als bij Mondo. */
  .site-end-bottom nav a + a::before,
  .site-end-bottom .footer-legal::before {
    content: "\00B7";
    display: inline-block;
    margin: 0 8px;
    opacity: 0.55;
  }

  /* Met "Waitlist" erbij past de rij niet op 342. */
  .site-end-bottom .footer-legal button {
    display: none;
  }

  /* Mondo: linkrij, 23 css lucht, een rij cirkels van 28, 13 css lucht, copyright.
     RONDE 4: onze steek was 34 css, dus zes css lucht tussen de schijven, bij Mondo
     38 steek en dus tien lucht. Met drie schijven las onze rij daardoor als een klontje
     in plaats van als een rij. */
  .site-end-social {
    display: flex !important;
    justify-content: center;
    gap: 10px;
    /* Nagemeten na de verkleining van de linkrij: van linkrij naar iconen stonden wij
       op 28 css tegen Mondo's 23, en van iconen naar copyright op 16,5 tegen 13. */
    margin: 18px 0 9px;
  }

  /* De basis zet .site-end-bottom>div>a op min-height:44px en inline-flex. Dat maakte van
     de twee ankers ovalen naast de ronde knop, dus deze regel moet even zwaar wegen. */
  .site-end-bottom .site-end-social > a,
  .site-end-bottom .site-end-social > button {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    align-self: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    background: var(--hermy-surface);
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    color: #0a0f0c;
  }

  .site-end-social svg {
    width: 17px;
    height: 17px;
  }

  /* Was 13px op rgba(...,0.42): bijna even groot als de linkrij en tegelijk het zwakste
     contrast op de pagina. Mondo's copyright is duidelijk kleiner dan zijn links (cap
     7,5 tegen 10,5) maar in dezelfde kleurfamilie.
     RONDE 5. Op 0,78 rendert die regel als 198,197,191 tegen 251,248,242 in de linkrij
     erboven, en een criticus vroeg 0,85. Mondo houdt beide op exact dezelfde waarde
     (245,243,242) en laat alleen de grootte het verschil dragen, dus wij nemen de
     kleur van de linkrij zelf. Dan moet de grootte het wel echt doen: 11 tegen 12 was
     nauwelijks verschil, Mondo staat op cap 7,5 tegen 10,5. Op 10 px wordt onze
     verhouding 0,83 en blijft de regelafstand van 16 staan, dus het verticale ritme
     dat de criticus goedkeurde (iconen naar copyright 23 css, copyright naar onderrand
     134) verandert niet. */
  .site-end-bottom > span {
    display: block;
    margin-top: 0;
    color: #fbf8f2;
    font: 400 10px/16px var(--body);
    letter-spacing: 0;
  }
}

/* ============================================================
   [David 2026-08-31] Drie gerichte correcties na zijn telefoonfoto's.
   ============================================================ */
@media (max-width: 900px) {

  /* 1. De filmtekst hoorde OP de video, niet in een zwart vlak eronder.
     De sectie was twee schermen hoog: video bovenaan, tekst daaronder.
     Nu een scherm hoog, met kop en zin over het beeld onderin. */
  .film-section .scroll-film-sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100svh;
    min-height: 560px;
    padding: 0;
    overflow: hidden;
  }

  .film-section .film-frames {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  /* Donkerloop onderin zodat witte tekst op elk beeld leesbaar blijft. */
  .film-section .film-shade {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0) 26%,
      rgba(0, 0, 0, 0.18) 52%,
      rgba(0, 0, 0, 0.74) 100%
    );
  }

  .film-section .film-heading,
  .film-section--night .film-heading {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    align-content: start;
    padding: 0 22px 10px;
    background: none;
    color: #fff;
  }

  .film-section .film-label,
  .film-section--night .film-label {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: 0 26px 52px;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
  }

  .film-section .film-frames::after { content: none; }

  .film-section--night .night-log,
  .film-section .scroll-film .night-log {
    position: relative;
    z-index: 2;
    top: auto;
    bottom: auto;
    padding: 0 26px 52px;
    background: none;
  }

  /* 2. De secties waren te kort. Mondo houdt elke sectie op ongeveer een vol
     scherm met royale marge boven en onder. */
  .privacy-band,
  .specs,
  .partners,
  .faq,
  .site-end {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .lifestyle-chapter {
    min-height: 100svh;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] De voortgangsrail links op de film stond er nog als drie losse
     streepjes over het beeld. Weg, Mondo heeft dat niet. */
  .film-section .film-frames::after,
  .film-section .scroll-film-sticky::after,
  .film-section .scroll-film::after { content: none !important; }
}

/* ============================================================
   [David 2026-08-31] Vier correcties op zijn telefoonfoto's.
   ============================================================ */
@media (max-width: 900px) {

  /* 1. Elke sectie 900 hoog. 100svh gaf 844 op zijn toestel, dat is te kort.
     Secties met meer inhoud dan 900 mogen doorgroeien. */
  .hero,
  .lifestyle-chapter,
  .film-section,
  .privacy-band,
  .campus-saas,
  .specs,
  .partners,
  .pricing,
  .faq,
  .site-end {
    min-height: 900px;
  }

  .hero,
  .film-section .scroll-film-sticky {
    height: 900px;
    min-height: 900px;
  }

  /* 2. De streepjes links kwamen niet van .film-frames maar van .film-label::before,
     een repeating-linear-gradient van 2 bij 302. Daar zat mijn vorige poging naast. */
  .film-label::before,
  .film-label::after,
  .film-frames::after {
    content: none !important;
  }

  /* 3. De horizontale lijn door de donkere sectie was een border-top van 1px op
     .film-heading, en .night-log had dezelfde. */
  .film-heading,
  .film-label,
  .night-log,
  .film-disclaimer {
    border: 0 !important;
  }

  /* 4. De privacy-video stond als band van 294 hoog met een uitvloeier eroverheen,
     met een harde rand bovenaan en veel leegte eromheen. Nu een afgeronde mediakaart
     met marge opzij, het patroon dat Mondo overal gebruikt. */
  .privacy-band .privacy-row > video {
    width: calc(100% - 44px);
    height: 430px;
    margin: 0 22px;
    border-radius: 22px;
    object-position: 50% 38%;
  }

  .privacy-band .privacy-row::after {
    content: none !important;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] Kop en zin op de film komen op bij binnenkomst.
     De regels grijpen alleen als hermy-mobile-in.js draait en de vlag heeft gezet,
     anders blijft de tekst gewoon staan. */
  html[data-mobile-reveal="on"] .film-heading,
  html[data-mobile-reveal="on"] .film-label,
  html[data-mobile-reveal="on"] .night-log {
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) !important;
    transition:
      opacity 620ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 760ms cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
  }

  html[data-mobile-reveal="on"] .film-label,
  html[data-mobile-reveal="on"] .night-log {
    transition-delay: 130ms;
  }

  html[data-mobile-reveal="on"] .film-heading[data-in],
  html[data-mobile-reveal="on"] .film-label[data-in],
  html[data-mobile-reveal="on"] .night-log[data-in] {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  html[data-mobile-reveal="on"] .film-heading,
  html[data-mobile-reveal="on"] .film-label,
  html[data-mobile-reveal="on"] .night-log {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] Terug naar 840. Campus, partners, pricing en lifestyle houden
     hun eigen hoogte omdat daar meer inhoud in staat dan een scherm. */
  .hero,
  .film-section,
  .privacy-band,
  .specs,
  .faq,
  .site-end {
    min-height: 840px;
  }

  .hero,
  .film-section .scroll-film-sticky {
    height: 840px;
    min-height: 840px;
  }

  .campus-saas,
  .partners,
  .pricing,
  .lifestyle-chapter {
    min-height: 900px;
  }

  /* [David 2026-08-31] Onderaan de pagina bleef een lichte strook staan. Dat is het
     doorveer-vlak van Safari, dat de achtergrond van html pakt. Body houdt zijn lichte
     vlak voor de secties; alleen het doek eronder wordt zwart, net als de balken. */
  html {
    background: #000;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] Specs bleef op 900: de inhoud is 716 en met 92 boven en onder
     kom je precies op 900 uit. Met 60 past hij binnen de 840 en vult de min-height hem. */
  .specs {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] De witte strook onder de footer bleef. Alleen html op zwart
     zetten hielp niet: Safari pakt voor het doorveer-vlak de achtergrond van body.
     Nu staan html, body en #root alle drie op zwart. Dat is veilig, want elke sectie
     schildert zijn eigen kleur: films en footer zwart, de rest #f5f6f2. Nagemeten:
     geen enkele sectie is doorzichtig, dus er valt nergens zwart doorheen. */
  html,
  body,
  #root {
    background: #000;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] De hero moet exact het zichtbare scherm vullen, onder de
     adresbalk. 840 was een vast getal en dus altijd net te hoog of te laag.
     100svh is de hoogte mét de browserbalken in beeld, dus die past altijd.
     De aankondigingsbalk staat erboven in de stroom en wordt eraf getrokken;
     hermy-mobile-in meet die en zet --strip-h, ook als je hem wegklikt.
     De 100vh-regel staat er als terugval voor browsers zonder svh. */
  .hero {
    height: calc(100vh - var(--strip-h, 0px));
    height: calc(100svh - var(--strip-h, 0px));
    min-height: calc(100vh - var(--strip-h, 0px));
    min-height: calc(100svh - var(--strip-h, 0px));
  }

  /* [David 2026-08-31] De agent-plaatjes hadden een witte achtergrond ingebakken,
     die je zag zodra ze langsschoven. De bestanden zijn nu echt transparant.
     De zachte rand hieronder vangt op wat er van de oude uitsnede overblijft. */
  .agent-card img,
  .agent-ticker img,
  .ticker-group img,
  .tile-avatar {
    background: transparent;
  }
}

@media (max-width: 900px) {
  /* [David 2026-08-31] De agent-tegels stonden op mobiel op #ebeee7 en op desktop op wit.
     De motion-video's van de agents zijn mp4 en webm zonder alfakanaal, met een witte
     achtergrond ingebakken, en die kun je niet transparant maken zonder in Safari of in
     Chrome om te vallen. Op wit valt die achtergrond gewoon weg, precies zoals op desktop.
     De stilstaande plaatjes zijn wel echt transparant en staan ook goed op wit. */
  .ticker-tile,
  .agent-card,
  .agent-tile {
    background: #fff !important;
  }
}