/* ============================================================
   _emailkit.css — productpagina /shop/emailkit
   Import: <link rel="stylesheet" href="/shop/_emailkit.css">

   Bouwt bovenop /style.css (tokens, .btn, .container, .reveal).
   Zelfde per-pagina patroon als voorstellen/_proposal.css.
   Alles staat onder .ek-*, zodat er niets van de site wordt geraakt.

   Opzet: een donker koopblok bovenaan, daaronder vijf rustige secties op
   licht met hairlines ertussen, en een slanke afsluitbalk. Eén kolombreedte
   voor alles, zodat de pagina van boven tot onder dezelfde kantlijn houdt.
   ============================================================ */

/* Twee maten voor alle verticale ruimte op deze pagina, en verder geen.
   --ek-gap is de ruimte die elke sectie boven en onder zichzelf houdt, dus
   tussen twee secties staat 2x --ek-gap. --ek-gap-h is de kleinere maat
   tussen een kop en de inhoud die eronder hoort. Het koopblok gebruikt
   dezelfde --ek-gap aan de onderkant, zodat de overgang van de kaart naar de
   volgende sectie precies zo groot is als elke andere sectieovergang.
   Op 390 breed komt dat uit op 22 + 22 = 44px onder de kaart. */
.ek-body{background:var(--bg);--ek-gap:clamp(2rem,4vw,3.5rem);--ek-gap-h:clamp(1.4rem,1.8vw,1.6rem);--ek-measure:720px}

/* ------------------------------------------------------------
   Gedeelde maten
   ------------------------------------------------------------ */
.ek-sec{padding:var(--ek-gap) 0;border-top:1px solid var(--ek-line)}
.ek-sec--white{background:var(--white);border-top:none}
.ek-sec--warm{background:var(--warm);border-top:none}
/* Sectie die direct op de fotoband volgt: de band vormt daar de scheiding. */
.ek-sec--flush{border-top:none}
.ek-wide{max-width:940px;margin:0 auto}
/* Twee breedtes op de pagina en niet meer: .ek-wide voor de volle kolom en
   --ek-measure voor de blokken die je leest. Daarvoor stond results op 620
   en stonden de lijst en de FAQ op 720; die ragden anders uit. */

/* Drie tekstmaten en niet meer: lopende tekst, een kleinere voor bijzaken en
   een grotere voor de aanloop. style.css zet de root vanaf 961px op 14.5px
   voor de negentig-procent-look van de site. Op een pagina waar je zit te
   lezen wordt de lopende tekst daarmee 14px, en dat is te klein. Deze pagina
   compenseert dat in zijn eigen schaal, zodat de tekst op elke breedte rond
   de 16,5px uitkomt. */
.ek-body{
  /* tekstmaten */
  --ek-text:1rem;--ek-text-sm:.88rem;--ek-lead:1.1rem;--ek-micro:.8rem;
  /* regelafstanden: vijf stappen, van kop naar lopende tekst */
  /* De displaymaat stond op 1.06. De schreefletter heeft lange staarten: bij
     die afstand kwam de j van "project" tot vlak bij de kapitaalhoogte van de
     regel eronder, en las dat als letters die over elkaar vallen. Op 1.2 zit
     er ruimte tussen. Deze maat wordt alleen door de kop van het koopblok
     gebruikt. */
  --ek-lh-display:1.2;--ek-lh-heading:1.15;--ek-lh-snug:1.4;
  --ek-lh-list:1.55;--ek-lh-body:1.7;
  /* ruimte: acht stappen, en verder niets */
  --s1:.4rem;--s2:.6rem;--s3:.9rem;--s4:1.2rem;
  --s5:1.6rem;--s6:2.2rem;--s7:3rem;--s8:4rem;
  /* lijnen: één op licht, één op donker */
  --ek-line:rgba(26,26,26,.07);--ek-line-dark:rgba(250,249,247,.14);
  /* Accent. Eén groen voor de hele pagina, in vier sterktes:
     --ek-accent op licht, --ek-accent-deep als hover daarvan,
     --ek-accent-light op de donkere secties en --ek-accent-soft voor vlakken
     en selectie.
     Contrast: #258250 haalt 4.8:1 op wit en 4.6:1 op --bg, dus het mag ook
     tekst dragen; wit op #258250 haalt diezelfde 4.8:1 en op #1d6b42 6.5:1.
     Op het donkerbruin van de secties blijft #258250 op 3.3:1 steken, te
     weinig voor tekst, dus daar staat #5fbf8c en dat haalt 7.0:1; zwarte
     tekst op #5fbf8c haalt 7.7:1.
     Het accent zit op de vinkjes, de nummers, de open FAQ-regel, de randen
     en op de koopknoppen: die dragen het groen omdat de knop het enige is op
     deze pagina waar je op moet klikken. */
  --ek-accent:#258250;--ek-accent-deep:#1d6b42;
  --ek-accent-light:#5fbf8c;--ek-accent-light-deep:#7ccfa1;
  --ek-accent-soft:rgba(37,130,80,.1);
  /* tekst op donker: drie niveaus, alle drie ruim boven 4.5:1 */
  --ek-on-dark:rgba(250,249,247,.92);
  --ek-on-dark-2:rgba(250,249,247,.74);
  --ek-on-dark-3:rgba(250,249,247,.55);
  /* schaduw van een witte kaart op donker */
  --ek-card-shadow:0 34px 70px -28px rgba(0,0,0,.6);
}
@media(min-width:961px){
  .ek-body{--ek-text:1.14rem;--ek-text-sm:1rem;--ek-lead:1.24rem;--ek-micro:.86rem}
}

/* Selectie in het accent. Op tien procent blijft de tekst eronder gewoon
   leesbaar; het is de enige plek waar de kleur over de lopende tekst gaat. */
.ek-body ::selection{background:var(--ek-accent-soft)}

.ek-h2{font-family:var(--serif);font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:400;line-height:var(--ek-lh-heading);letter-spacing:-.022em;margin-bottom:var(--ek-gap-h);max-width:min(34ch,var(--ek-measure));text-wrap:balance}
/* Tweede kop binnen dezelfde sectie: houdt de sectiemaat boven zich. */
.ek-h2--after{margin-top:var(--ek-gap)}
/* Een woord met een koppelteken breekt op een telefoon precies op dat
   koppelteken af. Deze span houdt zo'n woord bij elkaar. */
.ek-nobreak{white-space:nowrap}

/* ------------------------------------------------------------
   Koopblok bovenaan
   ------------------------------------------------------------ */
.ek-top{background:linear-gradient(180deg,var(--dark) 0%,#141414 100%);color:var(--bg)}

.ek-header{padding:1.1rem 0}
.ek-header .ek-wide{display:flex;align-items:center}
/* Logo is zwart ingekleurd; op donker wordt het wit gezet. */
.ek-logo{display:flex;align-items:center;min-width:44px;min-height:44px}
.ek-logo img{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.7;transition:opacity .3s var(--ease)}
.ek-logo:hover img{opacity:1}

.ek-hero{padding:.5rem 0 var(--ek-gap)}
/* Zelfde maat als .ek-wide, zodat het koopblok en alles eronder op één
   linkerlijn staan in plaats van op twee. */
.ek-hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start;max-width:940px;margin:0 auto}
.ek-offer{max-width:620px}

.ek-stage{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:#222;aspect-ratio:4/3;box-shadow:0 50px 90px -35px rgba(0,0,0,.75)}
.ek-stage::after{content:'';position:absolute;inset:0;border-radius:var(--radius-xl);box-shadow:inset 0 0 0 1px rgba(250,249,247,.08);pointer-events:none}
.ek-stage img{width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease)}
/* De vierde reactie wacht nog op zijn bestand. Een lege src laat anders het
   alt-etiket en een gebroken beeldje zien; zo blijft het vlak gewoon leeg.
   De regels vervallen zodra de src gevuld is. */
.ek-results .ek-shot img[src=""]{visibility:hidden}
.ek-results .ek-shot:has(img[src=""]){min-height:120px}
.ek-stage.is-swapping img{opacity:0}

/* Afspeelknop op het vierde beeld. De knop en het verloop staan alleen op het
   beeld dat de video is; op de andere drie zijn ze weg, ook uit de tabvolgorde.
   Het verloop houdt de knop leesbaar op een licht beeld. */
.ek-play{display:none}
.ek-stage.has-video::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.42) 100%);pointer-events:none;z-index:1}
.ek-stage.has-video .ek-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.ek-play-circle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(250,249,247,.82);color:var(--dark);box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .35s var(--ease-out),background .35s var(--ease)}
.ek-play-circle svg{margin-left:3px}
.ek-play:hover .ek-play-circle,.ek-play:focus-visible .ek-play-circle{transform:scale(1.09);background:rgba(250,249,247,.95)}
.ek-play:focus-visible{outline:3px solid var(--bg);outline-offset:-6px;border-radius:var(--radius-xl)}

/* Het iframe komt pas bij de klik in de pagina en neemt dan exact het vlak
   van de still over: zelfde 4 op 3, geen randen, dus er verschuift niets.
   Still, verloop en knop gaan tegelijk weg, ook uit de tabvolgorde. */
.ek-video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;background:#000}
.ek-stage.is-playing img,.ek-stage.is-playing::before,.ek-stage.is-playing .ek-play{display:none}

/* Op de telefoon speelt hij over de volle breedte. De sluitknop is 44 bij 44,
   staat rechtsboven en ligt boven de sticky balk (z-index 90). */
.ek-lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92)}
.ek-lightbox-inner{position:relative;width:100%;aspect-ratio:4/3;background:#000}
.ek-lightbox-close{position:absolute;top:var(--s3);right:var(--s3);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(250,249,247,.9);color:var(--dark);cursor:pointer}
.ek-lightbox-close:focus-visible{outline:3px solid var(--bg);outline-offset:3px}

.ek-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin-top:var(--s1)}
.ek-thumb{position:relative;padding:0;border:0;border-radius:var(--radius-md);overflow:hidden;background:#222;cursor:pointer;aspect-ratio:4/3;opacity:.45;transition:opacity .4s var(--ease),transform .4s var(--ease-out)}
.ek-thumb img{width:100%;height:100%;object-fit:cover}
.ek-thumb::after{content:'';position:absolute;inset:0;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px rgba(250,249,247,.12);transition:box-shadow .4s var(--ease)}
.ek-thumb:hover{opacity:.8;transform:translateY(-2px)}
.ek-thumb.is-on{opacity:1}
.ek-thumb.is-on::after{box-shadow:inset 0 0 0 2px var(--bg)}
.ek-thumb:focus-visible{opacity:1;outline:2px solid var(--bg);outline-offset:2px}
/* Klein afspeelmerkje op de thumb die de video is. */
.ek-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(250,249,247,.85);color:var(--dark)}
.ek-thumb-play svg{margin-left:2px}

/* Op een telefoon kost het raster van vier bij twee ongeveer 140px aan hoogte,
   precies de ruimte waarin de prijs en de knop hadden gepast. Daaronder wordt
   het dus een rij die je opzij schuift: acht thumbs van 64px, met snap zodat
   hij netjes op een beeld stopt. De schuifbalk is verborgen, want de rij loopt
   zichtbaar door en zegt daarmee zelf al dat er meer staat.
   De 4 op 3 hangt aan .ek-thumb zelf en niet aan de rasterkolom, dus die blijft
   staan zonder dat hier iets voor nodig is. */
@media(max-width:760px){
  /* Zonder deze regel schuift de rij niet maar rekt hij op: de galerij is een
     rastercel en die neemt vanzelf de min-content-breedte van zijn inhoud aan,
     dus acht thumbs van 64px maakten de cel 557px breed en het beeld erboven
     mee. min-width:0 laat de cel weer zo breed zijn als het scherm, zodat
     overflow-x zijn werk kan doen. */
  .ek-gallery{min-width:0}
  .ek-thumbs{display:flex;gap:var(--s1);overflow-x:auto;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .ek-thumbs::-webkit-scrollbar{display:none}
  .ek-thumb{flex:0 0 64px;scroll-snap-align:start}
}

/* Sociale bewijskracht. Op een breed scherm is de rechterkolom hoger dan de
   galerij en bleef daar een leeg donker vlak over; dit paneel vult de bovenkant
   daarvan. Het staat daarom in de html na het aanbod en niet in de galerij: op
   een telefoon valt de koopknop dan boven de beoordeling in plaats van
   eronder, en vanaf 1001px zet het raster het paneel terug onder de galerij.

   Het paneel heeft een eigen effen kleur in plaats van doorschijnend wit. Dat
   is nodig voor de ring om de gezichten: een stapel die overlapt vraagt een
   dekkende ring in de paneelkleur, anders zie je de onderliggende foto er
   doorheen schemeren. #1f1e1c is een tikje warmer dan de ondergrond, in lijn
   met de rest van de palet.

   Contrast op die kleur: de regel haalt 9.2:1 en het goud 9.1:1, allebei ruim
   boven de 4.5:1 voor tekst en de 3:1 voor een grafisch element.

   Geen los cijfer bij de sterren: vijf gevulde sterren zeggen het, en een
   screenreader krijgt het via aria-label op de groep. */
/* De inset-lijn licht de bovenrand van het paneel net op, zodat het van de
   ondergrond loskomt in plaats van er als een vlek op te liggen. */
.ek-proof{padding:var(--s4);border:1px solid var(--ek-line-dark);border-radius:var(--radius-lg);background:#1f1e1c;box-shadow:inset 0 1px 0 rgba(250,249,247,.06)}
.ek-proof-row{display:flex;align-items:center;gap:var(--s3)}

/* Overlappende stapel. De ring is de paneelkleur, dus de gezichten snijden
   elkaar schoon af in plaats van in elkaar over te lopen. */
.ek-faces{display:flex;flex:0 0 auto}
.ek-face{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #1f1e1c}
.ek-face+.ek-face{margin-left:-11px}

.ek-stars{display:flex;gap:.13rem;color:#e9b949}
.ek-stars svg{display:block}
/* De regel loopt net over de kolombreedte heen; text-wrap:balance houdt
   "worldwide" van een eigen regel af. */
.ek-proof-note{margin-top:var(--s3);font-size:var(--ek-text-sm);line-height:var(--ek-lh-list);color:var(--ek-on-dark-2);max-width:44ch;text-wrap:balance}

/* Zelfde conventie als de eyebrow in het aanbodblok, alleen in het lichtere
   groen: het volle accent valt weg tegen het donker van het koopblok. */
/* Kleiner dan de micromaat en met minder spatiering dan de eyebrow in het
   aanbodblok: de regel moet op een telefoon op een regel passen, en op .19em
   deed hij dat pas bij een maat waarop je hem niet meer leest. Bij deze
   waarden is hij 300px breed en er is 312px op een scherm van 360. De factor
   houdt hem aan het token, dus hij schaalt mee met de rest van de pagina. */
.ek-eyebrow{font-family:var(--sans);font-size:calc(var(--ek-micro) * .85);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ek-accent-light);margin-bottom:var(--s2)}
/* De kop stond op -.032em en daarna op -.015em. In de schreefletter op
   displaymaat lopen de vormen dan nog steeds tegen elkaar aan, het duidelijkst
   tussen twee woorden en in de cijfers. Hier staat dus geen eigen spatiering
   meer: de letterontwerper heeft die afstanden al bepaald. */
.ek-offer h1{font-family:var(--serif);font-size:clamp(2.1rem,4.2vw,3.2rem);font-weight:400;line-height:var(--ek-lh-display);letter-spacing:normal;margin-bottom:var(--s4);color:var(--bg);text-wrap:balance}
/* De subregel is het laatste wat boven de kaart staat, dus de ruimte naar de
   kaart hangt hieraan. De kortingsregel en de garantie staan in de kaart zelf,
   bij de prijs en de knop waar ze over gaan. */
.ek-offer-sub{font-size:var(--ek-lead);line-height:var(--ek-lh-body);color:var(--ek-on-dark-2);margin-bottom:var(--s5)}
.ek-offer-sub strong{font-weight:700;color:var(--ek-on-dark)}

.ek-card{background:var(--white);color:var(--text);border-radius:var(--radius-xl);padding:clamp(1.7rem,2.6vw,2.3rem);box-shadow:var(--ek-card-shadow)}
.ek-price{font-family:var(--serif);font-size:clamp(2.6rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.035em;display:block;margin-bottom:var(--s1)}

/* Regeltje onder de prijs. Negenentwintig dollar zegt niets zonder iets
   ernaast om het tegen af te zetten. */
.ek-anchor{font-size:var(--ek-micro);line-height:var(--ek-lh-list);color:var(--muted);margin-bottom:var(--s5)}

/* Doorgestreepte oude prijs, vlak voor de nieuwe. Kleiner en gedempt: hij is
   het referentiepunt, niet het bedrag dat je betaalt. Een screenreader krijgt
   "Regular price" en "Now" mee, want een streep door een getal hoor je niet.

   De kortingsregel eronder is de enige plek op de pagina waar het accent op
   lopende tekst staat. #258250 haalt 4.8:1 op wit, dus dat mag. */
.ek-price-was{margin-right:.32em;font-size:.56em;color:var(--muted);text-decoration-thickness:.055em}
.ek-price--light .ek-price-was{color:var(--ek-on-dark-3)}
.ek-sticky-price .ek-price-was{margin-right:.28em;font-size:.72em}
.ek-discount{font-size:var(--ek-micro);font-weight:700;line-height:var(--ek-lh-list);color:var(--ek-accent);margin-bottom:var(--s5)}

/* Tekst die alleen een screenreader krijgt. */
.ek-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* De koopknop draagt het accent, op elke plek waar hij staat. Op licht is dat
   het volle groen met witte tekst, op de donkere secties het lichtere groen
   met zwarte tekst: daar zou #258250 in de ondergrond wegvallen. Hover gaat
   een stap donkerder in plaats van door de dekking heen, want een knop die
   doorzichtig wordt verliest zijn contrast precies op het moment dat je hem
   aanwijst.

   Het opschrift breekt nooit: op een telefoon viel "KIT" op een tweede regel
   in de knop, en dat leest als twee knoppen op elkaar. De knop houdt zijn
   label dus op één regel en de rij eromheen wijkt uit (zie .ek-inline-buy-act
   en .ek-close-buy-row): daar valt de knop onder de prijs zodra hij er niet
   meer naast past. */
.ek-cta{background:var(--ek-accent);color:#fff;width:100%;justify-content:center;padding:1.25rem 2rem;font-size:.92rem;letter-spacing:.1em;font-weight:700;white-space:nowrap}
.ek-cta:hover{background:var(--ek-accent-deep);transform:scale(1.015)}
.ek-cta--light{background:var(--ek-accent-light);color:var(--dark);width:auto;padding:1.1rem 2.4rem}
.ek-cta--light:hover{background:var(--ek-accent-light-deep)}

.ek-micro{font-size:var(--ek-micro);line-height:var(--ek-lh-list);color:var(--muted);margin-top:var(--s4);text-align:center}
.ek-micro--light{color:var(--ek-on-dark-3);text-align:left;margin:var(--s1) 0 0}

/* Garantieregel. Staat direct onder de knop en woordelijk hetzelfde onder
   elke andere call to action op de pagina. Het vinkje hangt op de eerste
   regel en schuift niet mee met de tekst. */
.ek-guarantee{display:flex;align-items:flex-start;gap:var(--s1);margin-top:var(--s3);font-size:var(--ek-text-sm);line-height:var(--ek-lh-list);color:var(--text2)}
.ek-guarantee-icon{flex:0 0 auto;margin-top:.22rem;color:var(--ek-accent)}
.ek-guarantee--light{color:var(--ek-on-dark);margin-top:var(--s3)}
.ek-guarantee--light .ek-guarantee-icon{color:var(--ek-accent-light)}

/* Stripe-regel met de betaalmerken eronder. De merken zijn inline svg in
   index.html in hun eigen merkkleuren, dus ze schalen mee en kosten geen
   verzoek. Zeven van 38 breed passen op twee regels binnen de kaart op een
   telefoon van 390. */
.ek-paywrap{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--ek-line)}
.ek-pay-note{font-size:var(--ek-micro);line-height:var(--ek-lh-list);color:var(--muted);text-align:center;margin-bottom:var(--s1)}
.ek-pay{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1)}
.ek-pay-mark{display:block;width:38px;height:24px}

/* Staat onder de knop: de prijs en de knop zijn het eerste wat je in de kaart
   ziet, het lijstje is wat je leest als je nog niet overtuigd bent. De
   scheidingslijn hangt daarom boven het lijstje in plaats van eronder. */
.ek-card-inside{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--ek-line)}
.ek-card-inside h2{font-family:var(--sans);font-size:var(--ek-micro);font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.ek-card-inside ul{list-style:none;margin:0;padding:0}
.ek-card-inside li{position:relative;font-size:var(--ek-text-sm);font-weight:500;line-height:var(--ek-lh-list);color:var(--text);padding:var(--s1) 0 var(--s1) 1.6rem}
.ek-card-inside li::before{content:'';position:absolute;left:.1rem;top:.87rem;width:6px;height:6px;border-radius:50%;background:var(--ek-accent);opacity:.6}

/* ------------------------------------------------------------
   Gedeeld beeldkader

   De screenshots houden hun eigen beeldverhouding: het zijn opnames van
   documenten en mails, en die mogen niet bijgesneden worden. Het kader
   past zich dus aan het beeld aan in plaats van andersom.
   ------------------------------------------------------------ */
.ek-shot{background:var(--warm2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.ek-shot img{display:block;width:100%;height:auto}

/* ------------------------------------------------------------
   Results — drie screenshots van reacties, verder geen tekst
   ------------------------------------------------------------ */
/* De bouwstap snijdt de witte marges van de screenshots af en zet ze op één
   gedeelde schaal, zodat de tekst in alle drie even groot is. Wat er dan
   overblijft is kale inhoud op transparant, dus de kaart eromheen staat hier
   in CSS: dat houdt de drie blokken uit elkaar en gelijk aan elkaar. */
/* Elke reactie moet in één keer te zien zijn, ook op een telefoon. Het beeld
   schaalt dus mee met de kaart en loopt nergens buiten beeld. Op een smal
   scherm houdt de kaart weinig binnenruimte, zodat het beeld zo groot
   mogelijk blijft. */
.ek-results{display:grid;grid-template-columns:1fr;gap:var(--s5);max-width:var(--ek-measure)}
.ek-results .ek-shot{background:var(--white);border:1px solid var(--ek-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--s2);overflow:hidden}
.ek-results .ek-shot img{width:100%;max-width:100%}

/* ------------------------------------------------------------
   De drie processtappen, met de punten eronder

   Elk beeld loopt van het bestand naar de reactie naar het bedrag. Naast
   elkaar lezen ze als een reeks; op een telefoon onder elkaar, want daar
   is de tekst in het beeld anders te klein.
   ------------------------------------------------------------ */
.ek-process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start}
.ek-process li{margin:0}
.ek-process img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--ek-line);background:var(--white);box-shadow:var(--shadow-card)}

/* ------------------------------------------------------------
   Why email old clients — vier tegels in een 2x2

   Vier gelijke vlakken, elk met één reden. Ze wegen even zwaar, dus ze
   krijgen dezelfde maat en staan niet in een rangorde onder elkaar. Het
   icoon zit in een zachte accentbol linksboven en is het enige met kleur.
   Onder 761px vallen ze onder elkaar, want twee tegels naast elkaar op een
   telefoon laat drie woorden per regel over.
   ------------------------------------------------------------ */
.ek-why-lead{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--text2);margin:0 0 var(--ek-gap-h);max-width:52ch}
.ek-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s4)}
.ek-why li{display:flex;flex-direction:column;align-items:flex-start;margin:0;background:var(--white);border:1px solid var(--ek-line);border-radius:var(--radius-lg);padding:clamp(1.4rem,2.4vw,1.9rem);box-shadow:var(--shadow-card)}
/* De bol is een vast rondje van 34px met het icoon gecentreerd. De svg staat
   op currentColor, dus de kleur komt van de bol en niet uit de tekening. */
.ek-why-ic{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--ek-accent-soft);color:var(--ek-accent);margin-bottom:var(--s4)}
.ek-why-ic svg{display:block}
.ek-why h3{font-family:var(--sans);font-size:var(--ek-text);font-weight:700;line-height:var(--ek-lh-snug);color:var(--text);margin-bottom:var(--s2)}
.ek-why p{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--text2);margin:0}

/* ------------------------------------------------------------
   What's in it — deliverable met screenshot, om en om
   ------------------------------------------------------------ */
/* Deze sectie staat op een zachte, warme donkere grond. Donker genoeg om
   los te springen van de lichte secties erboven en eronder, maar niet hard
   zwart. De rijen wisselen van kant; verder blijft het blok rustig. Boven de
   sectie staat een dubbele sectiemaat, want de overgang van licht naar
   donker vraagt meer lucht dan een gewone sectiegrens. */
.ek-sec--dark{background:#26241f;color:var(--bg);border-top:none;padding-top:calc(var(--ek-gap) * 2)}
.ek-sec--dark .ek-h2{color:var(--bg)}

.ek-item{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:center;padding:clamp(2rem,3vw,2.6rem) 0;border-bottom:1px solid var(--ek-line-dark)}
.ek-item:first-of-type{padding-top:0}
.ek-item:last-of-type{border-bottom:none;padding-bottom:0}

.ek-item .ek-shot{background:rgba(250,249,247,.05);border:1px solid var(--ek-line-dark);border-radius:var(--radius-lg);box-shadow:none;padding:var(--s4);overflow:visible}
.ek-item .ek-shot img{opacity:.85;transition:opacity .45s var(--ease)}
.ek-item:hover .ek-shot img{opacity:1}
.ek-item h3{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:400;line-height:var(--ek-lh-heading);letter-spacing:-.022em;margin-bottom:var(--s2);color:var(--bg)}
.ek-item p{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--ek-on-dark-2);margin:0;max-width:46ch}
.ek-item-list{list-style:none;margin:var(--s4) 0 0;padding:0}
.ek-item-list li{position:relative;font-size:var(--ek-text-sm);line-height:var(--ek-lh-list);color:var(--ek-on-dark-3);padding:.3rem 0 .3rem 1.4rem}
.ek-item-list li::before{content:'';position:absolute;left:.2rem;top:.82rem;width:5px;height:5px;border-radius:50%;background:var(--ek-on-dark-3)}

/* Koopstrook onderaan de deliverables. Wie hier is aangekomen heeft alle vijf
   de onderdelen gezien en hoeft niet door te scrollen naar het aanbodblok.

   Geen witte kaart zoals in het koopblok bovenaan en het aanbod onderaan: een
   derde witte kaart zou de donkere sectie openbreken en de twee echte
   koopkaarten verzwakken. Dit is een strook op de eigen ondergrond, met een
   hairline eromheen en de accentlijn links als enige kleur. */
.ek-inline-buy{margin-top:var(--ek-gap);display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);border:1px solid var(--ek-line-dark);border-left:3px solid var(--ek-accent-light);border-radius:var(--radius-lg);background:rgba(250,249,247,.05);box-shadow:inset 0 1px 0 rgba(250,249,247,.06)}
.ek-inline-buy-h{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:var(--ek-lh-heading);letter-spacing:-.022em;color:var(--bg)}
.ek-inline-buy-note{margin-top:var(--s2);font-size:var(--ek-text-sm);line-height:var(--ek-lh-list);color:var(--ek-on-dark-2);max-width:52ch}
/* De prijs staat naast de knop en niet erboven, zoals in de afsluitbalk. De
   rij mag wel uitwijken: de knop houdt zijn label op één regel, dus zodra dat
   label naast de prijs niet meer past valt de knop eronder over de volle
   breedte, net als in de kaart bovenaan. flex-basis auto in plaats van 0 is
   wat dat doet: de knop vraagt de breedte van zijn eigen tekst, en die vraag
   is wat de rij laat breken. */
.ek-inline-buy-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.ek-inline-buy .ek-price--light{flex:0 0 auto}
.ek-inline-buy .ek-cta--light{flex:1 1 auto;justify-content:center}

/* De vlaggenrij hangt onder de tekst van het skillblok. Klein en gedempt: het
   is bewijs bij de belofte, geen versiering, dus hij mag de kop niet
   wegdrukken. Bij hover op het blok gaan ze mee naar vol, net als de shot. */
.ek-langs{margin-top:var(--s4)}
.ek-item .ek-langs-note{font-size:var(--ek-micro);line-height:var(--ek-lh-list);color:var(--ek-on-dark-3);margin:0 0 var(--s2)}
.ek-flags{display:flex;flex-wrap:wrap;gap:4px}
.ek-flag{display:block;width:20px;height:14px;opacity:.78;transition:opacity .45s var(--ease)}
.ek-item:hover .ek-flag{opacity:1}
.ek-flag-edge{fill:none;stroke:#fff;stroke-opacity:.3}

/* ------------------------------------------------------------
   It's only for creatives who — één lijst, daaronder de uitsluiting
   ------------------------------------------------------------ */
.ek-only{background:var(--white);border:1px solid var(--ek-line);border-left:4px solid var(--ek-accent);border-radius:var(--radius-lg);padding:clamp(1.4rem,2.6vw,2.2rem);box-shadow:var(--shadow-card);max-width:var(--ek-measure)}
.ek-only-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
/* De voorwaarden zijn lopende tekst, geen aanloop, dus ze staan op de
   gewone tekstmaat. Op de grotere maat stonden ze te dicht bij de kop. */
.ek-only-list li{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--text)}
.ek-only-list li span{max-width:60ch}
.ek-only-list .ek-ic{flex:0 0 auto;margin-top:.1rem;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--ek-accent);color:#fff}

.ek-ic{flex:0 0 auto;margin-top:.32rem}
.ek-ic--yes{color:var(--ek-accent)}

/* ------------------------------------------------------------
   Reviews
   ------------------------------------------------------------ */
.ek-reviews{display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:stretch}
.ek-review{margin:0;background:var(--white);border:1px solid var(--ek-line);border-radius:var(--radius-lg);padding:var(--s5);display:flex;flex-direction:column}
.ek-review blockquote{margin:0;flex-grow:1}
.ek-review p{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--text2);margin:0}
.ek-review-by{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--ek-line)}
.ek-review-face{width:42px;height:42px;flex-shrink:0;border-radius:50%;object-fit:cover;background:var(--warm2)}
/* Daan en Jonathan staan in /assets/shop/emailkit/ als vierkante uitsnede
   van de sitefoto's. De originelen zijn breed en Daan staat daar rechts in
   een groepsfoto, dus een ronde uitsnede op het midden liet iemand anders
   zien. Het logo is al rond en vult het vlak; niet bijsnijden. */
.ek-review-face--logo{object-fit:contain;background:var(--white)}
.ek-review-who{min-width:0}
.ek-review-by strong{display:block;font-size:var(--ek-text-sm);font-weight:700;line-height:var(--ek-lh-snug)}
.ek-review-role{display:block;margin-top:.15rem;font-size:var(--ek-micro);line-height:var(--ek-lh-snug);color:var(--muted)}

/* ------------------------------------------------------------
   About the writer — portret links, tekst rechts
   ------------------------------------------------------------ */
/* De tekst is kort, dus de foto blijft klein en de twee staan op ooghoogte
   naast elkaar. Een portret op volle kolombreedte zou hier een halve meter
   leegte naast de tekst zetten. */
.ek-about{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center}
.ek-about-photo{max-width:260px;border-radius:var(--radius-lg);overflow:hidden;background:var(--warm2);box-shadow:var(--shadow-card)}
.ek-about-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ek-about-body p{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--text2);margin:0 0 var(--s4);max-width:48ch}
.ek-about-body p:last-child{margin-bottom:0}

/* ------------------------------------------------------------
   Aanbodblok vlak voor de FAQ

   Twee kolommen: links waarom, rechts de kaart waar je koopt. Dezelfde
   witte koopkaart als bovenaan de pagina, zodat de bezoeker onderaan
   hetzelfde herkent. Geen afteller, geen voorraadmelding en geen
   doorgestreepte prijs: de reden om nu te kopen staat in één zin.
   ------------------------------------------------------------ */
.ek-offerblock{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:center;background:#26241f;color:var(--bg);border-radius:var(--radius-xl);padding:clamp(1.8rem,3.6vw,3.2rem);box-shadow:var(--shadow-card)}
/* Zachte lichtval linksboven, zodat het vlak niet als één dode kleur leest. */
.ek-offerblock::before{content:'';position:absolute;left:-10%;top:-60%;width:70%;height:180%;background:radial-gradient(closest-side,rgba(250,249,247,.09),transparent);pointer-events:none}
.ek-offerblock>*{position:relative}

.ek-offerblock-eyebrow{font-family:var(--sans);font-size:var(--ek-micro);font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--ek-accent-light);margin-bottom:var(--s3)}
.ek-offerblock-h{font-family:var(--serif);font-size:clamp(1.55rem,2.8vw,2.1rem);font-weight:400;line-height:var(--ek-lh-heading);letter-spacing:-.027em;margin:0;max-width:18ch;text-wrap:balance}
.ek-offerblock-note{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--ek-on-dark-2);margin:var(--s3) 0 0;max-width:44ch}
.ek-offerblock-list{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:var(--s3)}
.ek-offerblock-list li{display:flex;align-items:flex-start;gap:var(--s2);font-size:var(--ek-text);line-height:var(--ek-lh-list);color:var(--ek-on-dark);max-width:40ch}
.ek-ic--light{flex:0 0 auto;margin-top:.28rem;color:var(--ek-accent-light)}

/* De koopkaart. Zelfde witte kaart als in het koopblok bovenaan. */
.ek-offerblock-card{background:var(--white);color:var(--text);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.4vw,2rem);box-shadow:var(--ek-card-shadow)}

/* ------------------------------------------------------------
   FAQ — native details/summary
   ------------------------------------------------------------ */
.ek-faq{border-top:1px solid var(--ek-line);max-width:var(--ek-measure)}
/* De open vraag is de enige regel in de lijst die het accent draagt. De
   inspringing staat op elke details, ook de gesloten, zodat de tekst niet
   verschuift op het moment dat je hem opent. */
.ek-faq details{border-bottom:1px solid var(--ek-line);box-shadow:inset 2px 0 0 transparent;transition:box-shadow .35s var(--ease)}
.ek-faq details[open]{box-shadow:inset 2px 0 0 var(--ek-accent)}
.ek-faq summary{list-style:none;cursor:pointer;padding:var(--s5) 2.8rem var(--s5) var(--s4);position:relative;font-size:var(--ek-text);font-weight:700;line-height:var(--ek-lh-snug);max-width:48ch;transition:color .3s var(--ease)}
.ek-faq summary::-webkit-details-marker{display:none}
.ek-faq summary:hover{color:var(--muted)}
.ek-faq summary::after{content:'';position:absolute;right:.6rem;top:1.5rem;width:10px;height:10px;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:rotate(45deg);transition:transform .35s var(--ease-out)}
.ek-faq details[open] summary::after{transform:rotate(-135deg);border-right-color:var(--ek-accent);border-bottom-color:var(--ek-accent)}
.ek-faq-body{padding:0 2.8rem var(--s5) var(--s4)}
.ek-faq-body p{font-size:var(--ek-text);line-height:var(--ek-lh-body);color:var(--text2);margin:0;max-width:50ch}
/* ------------------------------------------------------------
   Afsluitend koopblok
   ------------------------------------------------------------ */
.ek-close{background:linear-gradient(180deg,var(--dark) 0%,var(--dark-deep) 100%);color:var(--bg);padding:var(--ek-gap) 0}
.ek-close-row{display:flex;flex-direction:column;align-items:stretch;gap:var(--s4)}
.ek-close-name{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:var(--ek-lh-heading);letter-spacing:-.025em}
/* Dezelfde rij als in de strook, en dus dezelfde uitwijk: past de knop niet
   naast de prijs, dan valt hij eronder in plaats van zijn label te breken. */
.ek-close-buy-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s5)}
.ek-cta--light{flex:1 1 auto;justify-content:center}
.ek-price--light{color:var(--bg);margin-bottom:0;font-size:clamp(1.9rem,3vw,2.4rem)}

/* ------------------------------------------------------------
   Sticky balk
   ------------------------------------------------------------ */
.ek-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(250,249,247,.94);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid rgba(0,0,0,.06);box-shadow:0 -10px 34px rgba(0,0,0,.06);transform:translateY(110%);transition:transform .5s var(--ease-out);visibility:hidden}
.ek-sticky.on{transform:translateY(0);visibility:visible}
/* Op een telefoon blijft de balk onder de 72px: 9,6px marge boven en onder
   plus een knop van 44px. De garantie stond eerder op één regel met een
   ellips en viel op 320 half weg; nu breekt hij over twee regels, want de
   twee tekstregels samen blijven lager dan de knop. */
.ek-sticky .container{display:flex;align-items:center;gap:var(--s2);padding-top:var(--s1);padding-bottom:var(--s1)}
/* De balk zegt nog drie dingen: waarom nu, wat het kost en waar je klikt. De
   naam van het product stond er ook in, maar die staat al boven de balk op de
   pagina waar je op dat moment bent. Zelfde opmaak als de kortingsregel in de
   kaart, zodat het dezelfde mededeling blijft. */
.ek-sticky-label{font-family:var(--sans);font-size:var(--ek-micro);font-weight:700;line-height:var(--ek-lh-snug);color:var(--ek-accent);min-width:0}
/* De prijs breekt niet: op de smalste telefoon zette hij anders de oude en de
   nieuwe prijs onder elkaar en dat leest als twee bedragen in plaats van een
   korting. Het opschrift ernaast mag wel over twee regels, dat is de regel die
   ruimte kan inleveren. */
.ek-sticky-price{font-family:var(--serif);font-size:1.05rem;margin-left:auto;letter-spacing:-.025em;white-space:nowrap}
.ek-sticky .btn{flex:0 0 auto;min-height:44px;padding:.75rem 1.1rem;font-size:.74rem;letter-spacing:.06em;font-weight:700}
/* Dezelfde groene knop als in de kaarten, alleen kleiner. De balk staat op
   bijna wit, dus hier geldt het volle groen. */
.ek-sticky-cta{background:var(--ek-accent);color:#fff}
.ek-sticky-cta:hover{background:var(--ek-accent-deep);transform:scale(1.02)}

/* ------------------------------------------------------------
   Kale footer: alleen de juridische regels
   ------------------------------------------------------------ */
.ek-footer{padding:var(--s6) 0 7rem;border-top:1px solid var(--ek-line)}
.ek-footer-row{display:flex;flex-wrap:wrap;gap:0 var(--s5);font-size:var(--ek-micro);color:var(--light)}
/* De footerlinks zijn 15px hoog; op een telefoon is dat niet te raken. */
.ek-footer a{display:flex;align-items:center;min-height:44px}
.ek-footer a{color:var(--light);text-decoration:none;transition:color .3s var(--ease)}
.ek-footer a:hover{color:var(--muted)}

/* ------------------------------------------------------------
   Leveringspagina /shop/emailkit/toegang — staat op licht
   ------------------------------------------------------------ */
.ek-access{padding:clamp(3rem,6vw,5rem) 0 6rem}
.ek-access .ek-col{max-width:660px;margin:0 auto}
.ek-access h1{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:400;line-height:1.1;letter-spacing:-.025em;margin-bottom:1rem}
.ek-access-note{font-size:1rem;line-height:1.75;color:var(--muted);margin-bottom:2.8rem;max-width:52ch}
.ek-slot{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;border-top:1px solid var(--border);padding:1.5rem 0}
.ek-slot:last-child{border-bottom:1px solid var(--border)}
.ek-slot-name{font-size:1rem;font-weight:700;flex:1 1 16rem}
.ek-slot-todo{font-size:.8rem;color:#6b5410;background:#fff8e1;border:1px dashed #c9a227;border-radius:var(--radius-sm);padding:.35rem .7rem}
/* Daar blijft het logo zwart en krijgt de header een scheidingslijn. */
.ek-access-page .ek-logo img{filter:none;opacity:.75}
.ek-access-page .ek-header{border-bottom:1px solid var(--border)}

/* ------------------------------------------------------------
   Bedankpagina /shop/emailkit/thankyou

   Waar Stripe naartoe stuurt na de betaling. Deelt de opmaak van de
   leveringspagina: dezelfde kolom, dezelfde koppen, dezelfde header op licht.
   Wat erbij komt is het vinkje bovenaan en de drie eerste stappen.
   ------------------------------------------------------------ */
.ek-thanks-mark{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:1.6rem;border-radius:50%;background:var(--ek-accent);color:#fff}
.ek-thanks-mark svg{display:block}
/* De knop naar de map. Zelfde groene knop als de koopknop op de
   productpagina: wie net betaald heeft herkent hem. */
.ek-thanks-cta{background:var(--ek-accent);color:#fff;justify-content:center;padding:1.15rem 2.4rem;font-size:.92rem;letter-spacing:.1em;font-weight:700;transition:background .4s var(--ease),transform .4s var(--ease-out)}
.ek-thanks-cta:hover{background:var(--ek-accent-deep);transform:scale(1.015)}
.ek-thanks-bookmark{margin:1rem 0 0;font-size:.88rem;line-height:1.7;color:var(--muted);max-width:52ch}
.ek-thanks-h2{font-family:var(--serif);font-size:1.3rem;font-weight:400;line-height:1.2;letter-spacing:-.02em;margin:3rem 0 1rem}
/* Het nummer staat in dezelfde zachte accentbol als in de Why-tegels op de
   productpagina, een maat kleiner omdat het hier naast één regel hangt. */
.ek-steps{list-style:none;counter-reset:ekstep;margin:0;padding:0;border-top:1px solid var(--border)}
.ek-steps li{display:flex;align-items:flex-start;gap:1rem;padding:1.4rem 0;border-bottom:1px solid var(--border);font-size:1rem;line-height:1.75;color:var(--text2)}
.ek-steps li::before{counter-increment:ekstep;content:counter(ekstep);flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:.2rem;border-radius:50%;background:var(--ek-accent-soft);color:var(--ek-accent);font-family:var(--serif);font-size:.9rem;line-height:1}
.ek-thanks-help{margin-top:2.4rem;font-size:.88rem;line-height:1.7;color:var(--muted)}
.ek-thanks-help a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------
   Responsief, van klein naar groot

   Alles hierboven is de telefoon. De regels hieronder voegen breedte toe
   naarmate er ruimte is: eerst de kleine dingen die op een tablet al kunnen,
   dan de kolommen, dan het koopblok naast het beeld.
   ------------------------------------------------------------ */

/* Vanaf hier past een mailscreenshot in zijn geheel, dus het schuiven en het
   verloop aan de rand kunnen weg. */
@media(min-width:601px){
  .ek-results{gap:var(--s4)}
  .ek-results .ek-shot{padding:var(--s4)}

  .ek-header{padding:1.5rem 0}
  .ek-hero{padding-top:clamp(1rem,2vw,2rem)}
  .ek-thumbs{gap:var(--s2);margin-top:var(--s2)}
  /* Op de smalste telefoon passen de veertien vlaggen alleen op één regel met
     een krappere tussenruimte; vanaf hier is er plek voor de normale. */
  .ek-flags{gap:var(--s1)}
  .ek-play-circle{width:72px;height:72px}
  .ek-offer h1{margin-bottom:1.4rem}
  .ek-offer-sub{margin-bottom:2.2rem}

  .ek-close-row{flex-direction:row;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
  .ek-close-buy-row{justify-content:flex-start}
  .ek-cta--light{flex:0 0 auto}

  .ek-sticky .container{gap:1rem;padding-top:.75rem;padding-bottom:.75rem}
  .ek-sticky-price{font-size:1.3rem}
  .ek-sticky .btn{padding:.75rem 1.9rem;font-size:.82rem;letter-spacing:.09em}

  .ek-footer{padding-bottom:4.5rem}
  .ek-footer-row{gap:.4rem 1.6rem}
  .ek-footer a{display:inline;min-height:0}
}

/* Vanaf hier is er ruimte voor kolommen naast elkaar. */
@media(min-width:761px){
  .ek-process{grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.8vw,1.4rem)}

  .ek-item{grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.5vw,3rem)}
  /* Om en om: bij de even rijen staat het beeld links. */
  .ek-item:nth-of-type(even) .ek-item-body{order:2}
  .ek-item:nth-of-type(even) .ek-shot{order:1}

  /* Vanaf hier passen twee tegels naast elkaar zonder dat de regels in
     flarden breken. */
  .ek-why{grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.8vw,1.4rem)}

  /* De strook wordt een rij: tekst links, prijs en knop rechts. De knop
     krijgt zijn eigen breedte terug in plaats van de volle kolom. */
  .ek-inline-buy{flex-direction:row;align-items:center;justify-content:space-between;gap:clamp(1.6rem,4vw,3rem)}
  .ek-inline-buy-act{flex:0 0 auto}
  .ek-inline-buy .ek-cta--light{flex:0 0 auto}

  .ek-reviews{grid-template-columns:repeat(3,1fr)}
  .ek-about{grid-template-columns:clamp(190px,26%,290px) 1fr}
  .ek-about-photo{max-width:none}
  .ek-offerblock{grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem)}
  .ek-guarantee--light{max-width:44ch}
}

@media(min-width:768px){
  .ek-results .ek-shot.reveal:nth-child(2),.ek-review.reveal:nth-child(2){transition-delay:.08s}
  .ek-results .ek-shot.reveal:nth-child(3),.ek-review.reveal:nth-child(3){transition-delay:.16s}
  .ek-faq details[open] .ek-faq-body{animation:ekFaq .4s var(--ease-out)}
  @keyframes ekFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
}

/* Pas hier past het beeld naast de koopkaart. Het bewijspaneel staat in de
   html na het aanbod, want op een telefoon hoort het onder de knop. Hier gaat
   het terug naar de plek waarvoor het bedoeld is: onder de galerij in de
   linkerkolom, tegen de galerij aan, terwijl het aanbod beide rijen beslaat.
   De rijruimte is kleiner dan de kolomruimte: het paneel hoort bij de galerij
   erboven en mag er niet los van komen te staan. */
@media(min-width:1001px){
  .ek-hero-grid{grid-template-columns:1.06fr .94fr;grid-template-rows:auto 1fr;column-gap:clamp(2rem,4vw,4rem);row-gap:var(--s5)}
  .ek-gallery{grid-column:1;grid-row:1}
  .ek-proof{grid-column:1;grid-row:2;align-self:start}
  .ek-offer{grid-column:2;grid-row:1/-1;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .ek-stage img,.ek-thumb,.ek-cta,.ek-sticky,.ek-play-circle{transition:none}
  .ek-faq details[open] .ek-faq-body{animation:none}
}