/* ===========================================================================
   OttaNote — marketingsite v2, gedeelde stijl.

   Opzet: gecentreerde kolom van 880px op een blauwe achtergrond. Geen site die
   de hele schermbreedte volloopt; binnen de kolom alles onder elkaar.

   Kleur: het zachte blauw is de SFEER (achtergrond + rustige banen), royal blue
   (#4169E1) is alléén accent — knoppen, links, vinkjes, woordmerk. Het papier is
   bewust een warme off-white (#FCFBF9), geen koud wit.

   Vormen: geen kleurverlopen, geen pill-knoppen. Radii volgen de app
   (lib/theme/tokens.dart): 8 voor knoppen/badges, ruimer voor vlakken.

   Elms Sans (lokaal, OFL) voor display; systeemfont voor leestekst.
   Geen externe bronnen — geen tracking, geen CDN, geen Google Fonts.
   =========================================================================== */

@font-face{
  font-family:'Elms Sans';
  src:url('elms-sans-variable.woff2') format('woff2');
  font-weight:300 700;
  font-display:swap;
}

:root{
  /* De zijkanten hebben hetzelfde lichtblauw als de rustige banen in de kolom.
     Daardoor loopt het blauw door van rand tot rand en gaan de warme, lichte
     panelen erop zweven; de "banen" zijn nu simpelweg gaten in die panelen. */
  --backdrop:#EFF3F9;
  --paper:#FCFBF9;
  --mist:#EFF3F9;
  --haze:#E2EAF6;
  --line:#E3E6EC;

  --ink:#1E2733;
  --muted:#69737F;

  --accent:#4169E1;
  --accent-dark:#3457C4;
  --accent-soft:rgba(65,105,225,.10);

  /* Actie-oranje (eerste 1000 Plus-gebruikers). Oranje en niet rood: rood is de
     kleur van een storing of een fout, en een aanbieding is geen alarm. Oranje
     valt even hard op zonder die lading.
     Twee tinten, want één oranje kan dit niet: --promo-vol is het volle oranje
     voor vlakken met witte tekst, --promo is een tint donkerder voor oranje
     tekst op licht. Onder die donkerdere tint haalt kleine tekst de 4,5:1 niet.
     Alles met promo erin kan weg zodra de actie voorbij is. */
  --promo:#B34A00;
  --promo-vol:#CC4E00;   /* het lichtste oranje waarop witte tekst nog 4,5:1 haalt */
  --promo-soft:rgba(211,84,0,.09);
  --promo-line:#F0CBA8;

  --radius:16px;
  --radius-s:10px;
  --radius-btn:8px;      /* = AppRadius.field in de app */
  --site:880px;
  --pad:40px;

  /* De kantlijn die in de hero ontstaat doordat het beeldmerk links naast de
     tekst staat: 40 (paneelrand) + 64 (beeldmerk) + 26 (tussenruimte) = 130.
     Alle tekst op de site lijnt daarop uit, zodat de pagina één linkerlijn
     heeft. Beeld en prijskaarten trekken we terug naar de paneelrand. */
  --kantlijn:130px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--backdrop);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

/* De kolom zelf is doorzichtig: het blauw van de body loopt eronder door.
   Wat je ziet zijn de losse panelen (.block) die erop zweven. */
.site{
  max-width:var(--site);
  margin:0 auto;
  padding:14px 0 28px;
  min-height:100vh;
}

h1,h2,h3{font-family:'Elms Sans',-apple-system,'Segoe UI',sans-serif;font-weight:600;line-height:1.18;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.1rem,4.6vw,2.9rem)}
h2{font-size:clamp(1.5rem,3vw,1.95rem)}
h3{font-size:1.08rem;font-weight:600}
p{margin:0 0 1.05em;max-width:62ch}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:.92rem}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}

/* Een paneel: warm, licht, zwevend op het blauw. Tekst begint op de kantlijn. */
.block{
  padding:56px var(--pad) 56px var(--kantlijn);
  background:var(--paper);
  border:1px solid rgba(30,39,51,.05);
  border-radius:var(--radius);
  margin:14px 0;
}
/* Beeld en prijskaarten mogen wél tot aan de paneelrand: die dragen niet de
   leeslijn maar hebben juist baat bij de volle breedte.
   De koppen staan er ook: die hangen links uit, zodat ze de leestekst
   aankondigen in plaats van erin mee te lopen. De hero-kop op de home doet
   hier níét aan mee — die staat naast het beeldmerk en máákt de kantlijn. */
.block > h1,
.block > h2,
.block > img,
.block > .ph,
.block > .prices,
.block > .kader,
.block > .cta{margin-left:calc(var(--pad) - var(--kantlijn))}
/* Blokken (kader, placeholders, prijskaarten) rekken vanzelf mee met de
   negatieve marge, maar een <img> met width:100% rekent vanaf de INHOUDS-
   breedte van het paneel — en die is door de kantlijn 90px smaller. Zonder
   deze correctie blijft elke foto 90px te smal en steekt het kader eronder
   eruit. */
.block > img{width:calc(100% + var(--kantlijn) - var(--pad))}
/* Een "baan" is nu géén vlak maar een gat: hier blijft het blauw zichtbaar,
   zodat de panelen erboven en eronder los van elkaar komen te staan.
   De rand blijft bestaan maar wordt onzichtbaar — met `border:0` zou het
   content-vlak 1px opschuiven en zou de kantlijn tussen banen en panelen
   heen en weer wiebelen. */
.band{background:transparent;border-color:transparent}
.eyebrow{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:12px}

/* --- kop ------------------------------------------------------------------ */
.bar{
  display:flex;align-items:center;gap:22px;
  padding:0 var(--pad);height:70px;
  position:sticky;top:14px;z-index:10;
  background:var(--paper);
  border:1px solid rgba(30,39,51,.05);
  border-radius:var(--radius);
}
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}
.mark:hover{text-decoration:none}
.mark svg{width:26px;height:26px;flex:none}
.wm{font-family:'Elms Sans',sans-serif;font-size:1.4rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.wm .a{color:var(--accent)}   /* 'otta' — zoals ottanote_wordmark.dart in de app */
.wm .b{color:var(--ink)}      /* 'note' */
.bar nav{display:flex;gap:20px;margin-left:auto}
/* De menuknop bestaat alleen op smalle schermen; zie de media-query onderaan. */
.menuknop{display:none}
.bar nav a{color:var(--muted);font-size:.92rem}
.bar nav a:hover{color:var(--ink);text-decoration:none}
.bar nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* Taalwisselaar: compacte codes rechts in de balk. Aparte mappen per taal, dus
   het zijn echte links (geen JS-woordenboek zoals de oude site). */
/* Dropdown zonder JS (checkbox-truc, zoals het mobiele menu): met vijf menu-items
   werd een rij van zeven codes te breed en brak de balk over twee regels. */
.talen{position:relative;margin-left:18px;display:flex;align-items:center}
/* Onzichtbaar maar wél focusbaar, zodat de dropdown met het toetsenbord werkt. */
.taalknop{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.taalknop:focus-visible + .taalkop{outline:2px solid var(--accent);outline-offset:2px}
.taalkop{
  cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  color:var(--muted);font-size:.76rem;font-weight:600;letter-spacing:.02em;
  padding:5px 9px;border:1px solid var(--line);border-radius:var(--radius-btn);
}
.taalkop:hover{color:var(--ink)}
.taalkop::after{
  content:"";width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;
}
.taallijst{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  min-width:90px;padding:6px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:0 10px 30px rgba(30,39,51,.12);
}
.taalknop:checked ~ .taallijst{display:block}
.taallijst a{
  display:block;padding:7px 10px;border-radius:6px;
  color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.02em;
}
.taallijst a:hover{background:var(--accent-soft);color:var(--ink);text-decoration:none}
.taallijst a[aria-current="true"]{color:var(--accent)}

.btn{
  display:inline-block;background:var(--accent);color:#fff;
  padding:11px 20px;border-radius:var(--radius-btn);
  font-weight:600;font-size:.95rem;border:0;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid #C9D6EA}
.btn.ghost:hover{background:var(--accent-soft);color:var(--accent-dark)}

/* --- hero ----------------------------------------------------------------- */
.hero{padding-top:56px;padding-bottom:40px}
/* Geen max-width op de kop: die snoerde 'm in tot 15 tekens en dwong een
   tweede regel af terwijl er ruimte zat. Koppen horen op één regel te passen. */
.hero h1{margin-bottom:14px}
.lede{font-size:1.14rem;color:var(--muted);max-width:56ch}
/* Knoppen staan gecentreerd over het hele paneel — vandaar dat de rij, net als
   beeld en kader, terugschuift naar de paneelrand. Zonder die terugschuif zou
   "midden" het midden van de tekstkolom zijn, en dus 45px uit het echte midden. */
.cta{display:flex;gap:12px;align-items:center;justify-content:center;margin:26px 0 12px;flex-wrap:wrap}

/* Beeldmerk náást de tekst i.p.v. erboven: de kop begint dan op ooghoogte met
   het merk, en de eerste gedachte krijgt het woord — niet de knoppen.
   De rij zelf schuift terug naar de paneelrand; het beeldmerk + tussenruimte
   duwen de tekst dan precies op --kantlijn. Dáár is die kantlijn uit ontstaan. */
.hero-rij{
  display:flex;gap:26px;align-items:flex-start;
  margin-left:calc(var(--pad) - var(--kantlijn));
}
.hero-rij .hero-mark{flex:none;margin-bottom:0}
@media(max-width:720px){
  .hero-rij{gap:18px;flex-direction:column}
}

/* --- het kader-paneel onder de hero-foto ---------------------------------- */
/* Een eigen paneel, net als de andere blokken. Het merk-vinkje hangt in de
   kantlijn — precies zoals het beeldmerk in de hero — en gebruikt daarvoor
   dezelfde maatvoering: een slot van 64px + 26px tussenruimte = tekst op 130.
   Zo blijft de leeslijn van de hele pagina doorlopen. */
.kader-rij{
  display:flex;gap:26px;align-items:flex-start;
  margin-left:calc(var(--pad) - var(--kantlijn));
}
.kader-rij .vink{flex:none;width:64px;display:flex;justify-content:flex-start}
.kader-rij svg{width:26px;height:26px;margin-top:2px}
.kader-rij p{margin:0;max-width:60ch;font-size:1rem}
/* Knoppen gecentreerd over het HELE paneel, dus eerst terug naar de paneelrand. */
.kader-cta{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:20px 0 0 calc(var(--pad) - var(--kantlijn));
}

/* Beeldmerk in de hero: het vinkje tekent zichzelf één keer rustig in.
   De oude site duwde het vinkje met een 'reel' weg; dat was nadrukkelijker
   dan deze site wil zijn. Respecteert prefers-reduced-motion. */
.hero-mark{width:64px;height:64px;margin-bottom:22px;display:block}
.hero-mark .tick{
  stroke-dasharray:80;stroke-dashoffset:80;
  animation:tick 1.1s .35s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-mark .ring{opacity:0;animation:ring .9s 1.1s ease forwards}
@keyframes tick{to{stroke-dashoffset:0}}
@keyframes ring{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .hero-mark .tick{animation:none;stroke-dashoffset:0}
  .hero-mark .ring{animation:none;opacity:1}
}

/* --- echte foto's --------------------------------------------------------- */
/* Eén frame voor alle foto's: vult de kolombreedte, vaste verhouding zodat de
   pagina niet verspringt tijdens het laden, en dezelfde radius als de panelen. */
.foto{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);
  background:var(--haze);   /* rustige vulling zolang de foto nog laadt */
}

/* Schermafdrukken krijgen bewust GEEN vaste verhouding en geen object-fit:cover:
   bijsnijden zou de UI aan de randen afkappen. Ze houden hun eigen verhouding;
   width/height in de HTML voorkomt dat de pagina verspringt tijdens het laden. */
.schermafdruk{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
}

/* --- placeholders --------------------------------------------------------- */
.ph{
  border:1.5px dashed #B9CBE6;
  background:var(--haze);
  border-radius:var(--radius);
  padding:22px;
  display:flex;align-items:flex-end;
  min-height:280px;
  position:relative;
}
.ph::before{
  content:'Foto';position:absolute;top:14px;left:18px;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);font-weight:700;opacity:.7;
}
.ph.shot::before{content:'Schermafdruk'}
.ph.shot{min-height:340px;background:#fff;border-style:solid;border-color:var(--line)}
.ph-brief{
  font-size:.88rem;line-height:1.55;color:#3B5C8A;
  background:rgba(255,255,255,.75);border-radius:var(--radius-s);
  padding:13px 15px;max-width:none;margin:0;
}
.ph-brief b{color:#26456F}

/* --- lijst met details ---------------------------------------------------- */
.items{margin:0;padding:0;list-style:none}
/* Asymmetrisch: meer lucht bóven de kop dan eronder, zodat elke kop duidelijk
   bij z'n eigen tekst hoort in plaats van tegen de vorige alinea te plakken.
   28px ≈ 1× regelhoogte binnen het item; tussen items 22+28 = 50px (~1,7×). */
.items li{padding:28px 0 22px;border-top:1px solid var(--line)}
.items li:first-child{border-top:0;padding-top:6px}
.items h3{margin-bottom:5px}
.items p{margin:0;color:var(--muted);font-size:.96rem;max-width:60ch}
.kbd{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8em;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;color:var(--ink);
}

/* --- prijs ---------------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.price{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.price.pick{border-color:#B9CBE6;background:#fff}
.amount{font-family:'Elms Sans',sans-serif;font-size:2.1rem;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.per{color:var(--muted);font-size:.9rem}
/* De actiebadge is een vol oranje vlak met witte tekst: blauw is de huisstijl en
   valt daardoor juist niet op, en een getinte badge is te braaf voor het enige
   aanbod op de pagina. */
.tag{
  display:inline-block;background:var(--promo-vol);color:#fff;
  font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-btn);
  letter-spacing:.03em;margin-bottom:10px;
}
.list{list-style:none;padding:0;margin:16px 0 22px}
.list li{position:relative;padding-left:26px;margin-bottom:7px;color:var(--muted);font-size:.94rem}
.list li::before{
  content:'';position:absolute;left:2px;top:.6em;width:12px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* Prijskaarten: knop onderaan uitgelijnd zodat 'ie naast de andere kaart op
   dezelfde hoogte staat. Flex-kolom; alleen de tag en de knop op content-breedte
   (niet uitrekken) — tekst en opsomming blijven zoals ze zijn. */
.price{display:flex;flex-direction:column}
.price > .tag{align-self:flex-start}
.price .btn{margin-top:auto;align-self:flex-start}
/* Tagloze kaart (Gratis): reserveer bovenaan exact de hoogte van de actiebadge
   (zelfde font/padding/marge), zodat de opsommingen op gelijke hoogte beginnen. */
.price:not(.pick)::before{
  content:'\00a0';display:inline-block;align-self:flex-start;visibility:hidden;
  font-size:.74rem;font-weight:700;padding:4px 10px;margin-bottom:10px;
}

/* --- tabel (prijsperiodes) ------------------------------------------------ */
.tbl{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:.95rem}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl th{font-weight:600;color:var(--muted);font-size:.85rem;letter-spacing:.03em;text-transform:uppercase}
.tbl td:last-child,.tbl th:last-child{text-align:right}
/* NB: bedragen breken niet af omdat er in de HTML een &nbsp; tussen het
   euroteken en het getal staat. Dat werkt óók in lopende tekst; een
   white-space:nowrap hier zou alleen de tabel hebben gered. */

/* --- de lanceeractie ------------------------------------------------------ */
/* Alles hieronder hoort bij de actie "eerste 1000 Plus-gebruikers" en kan er in
   z'n geheel uit zodra die voorbij is. De actierij in de tabel is dan de rij die
   je verwijdert, en "aanrader" verhuist terug naar Jaarlijks. */
.tbl tr.promo{background:var(--promo-soft)}
.tbl tr.promo td{border-bottom-color:var(--promo-line);color:var(--promo);font-weight:700}
/* "aanrader" hangt aan de actierij zolang de actie loopt. */
.promo-tag{
  display:inline-block;background:var(--promo-vol);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:1px;
}
.promo-kader{
  background:var(--promo-soft);border:1px solid var(--promo-line);
  border-radius:var(--radius-s);padding:16px 18px;margin:18px 0 8px;
}
.promo-kader p{margin:0;font-size:.95rem;color:var(--ink);max-width:none}
.promo-kader p + p{margin-top:8px}
.promo-kader strong{color:var(--promo)}
/* Als `.promo-kader p` — die de tekstkleur op inkt zet wint hier op
   specificiteit, dus het kopje moet zelf ook via `.promo-kader` selecteren. */
.promo-kader p.promo-kop{
  font-weight:700;color:var(--promo);
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:8px;
}

/* --- roadmap -------------------------------------------------------------- */
.road{margin:0;padding:0;list-style:none}
.road li{position:relative;padding:0 0 26px 26px;border-left:2px solid var(--line);margin-left:5px}
.road li:last-child{border-left-color:transparent;padding-bottom:0}
.road li::before{
  content:'';position:absolute;left:-7px;top:.55em;width:12px;height:12px;
  border-radius:50%;background:var(--paper);border:2px solid var(--accent);
}
.road h3{margin-bottom:3px}
.road p{margin:0;color:var(--muted);font-size:.95rem}

/* --- mappen met afvink-items --------------------------------------------- */
/* De voorbeelden staan niet als opsomming maar als een stukje OttaNote: een map
   met een lijstje eronder. Het map-icoon hangt in de kantlijn — zelfde
   maatvoering als het beeldmerk in de hero en het vinkje in het kader (slot van
   64px + 26px = tekst op --kantlijn) — zodat de leeslijn van de pagina blijft
   doorlopen en de items precies onder de maptitel uitkomen. */
.mappen{margin:0;padding:0;list-style:none}
.map{margin-left:calc(var(--pad) - var(--kantlijn))}
.map + .map{margin-top:34px}
.map-kop{display:flex;gap:26px;align-items:center}
.map-kop .map-icoon{flex:none;width:64px;display:flex;justify-content:flex-start}
.map-kop svg{width:26px;height:26px;fill:var(--accent)}
.map-kop h3{margin:0;font-size:1.05rem}

.vinklijst{
  margin:10px 0 0 90px;   /* 64px slot + 26px tussenruimte = op de kantlijn */
  padding:0;list-style:none;
}
/* Iets meer lucht tussen de items: op de huidige regelhoogte (~34px pitch)
   brengt +5px margin +2px label-padding de afstand ~15% omhoog — binnen de
   aanbevolen 10–20%, zonder dat de lijst uit elkaar valt. Vooral bij regels
   die naar twee regels breken leest het rustiger. */
.vinklijst li + li{margin-top:5px}
.vinklijst label{
  display:flex;gap:12px;align-items:flex-start;
  padding:5px 8px 5px 0;border-radius:var(--radius-s);
  cursor:pointer;
}
.vinklijst label:hover{background:var(--accent-soft)}

/* Eigen vakje i.p.v. het vakje van het besturingssysteem: dat is per platform
   anders en zou hier dus nergens op lijken. */
.vinklijst input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:18px;height:18px;margin:3px 0 0;
  border:2px solid #B6C0CC;border-radius:4px;background:#fff;
  cursor:pointer;position:relative;
  transition:background .12s ease,border-color .12s ease;
}
.vinklijst input:hover{border-color:var(--accent)}
.vinklijst input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vinklijst input:checked{background:var(--accent);border-color:var(--accent)}
.vinklijst input:checked::after{
  content:'';position:absolute;left:4px;top:0;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
/* Afgevinkt = doorgehaald en grijs, precies zoals de editor het doet
   (appflowy_editor todo_list_block_component.dart: lineThrough + grey). */
.vinklijst input:checked + span{text-decoration:line-through;color:#B9C0C8}
.vinklijst span{font-size:1rem;line-height:1.5;transition:color .12s ease}

/* --- voet ----------------------------------------------------------------- */
/* Uitgelijnd zoals pacito.nl: alles gecentreerd, het projectproject-logo van
   56px erboven, subtiel op 85% en vol bij hover. */
footer{
  padding:38px var(--pad);color:var(--muted);font-size:.9rem;
  background:var(--paper);
  border:1px solid rgba(30,39,51,.05);
  border-radius:var(--radius);
  margin-top:14px;
  text-align:center;
}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}
.foot-logo{
  display:inline-block;width:56px;height:auto;
  margin-bottom:10px;
  opacity:.85;transition:opacity .2s ease;
}
.foot-logo:hover{opacity:1}
/* De ©-regel is een eigen blok, zodat het logo een eigen regel krijgt en
   text-align:center 'm ook echt kan centreren. */
footer p{margin:0;max-width:none}
.sep{opacity:.5;margin:0 8px}
/* Bedrijfsregel: wie verkoopt hier, waarvandaan, en hoe bereik je ze. Stond
   alleen in de juridische teksten; een verkoper hoort dat te tonen en Paddle
   vraagt er bij verificatie naar. */
.foot-biz{margin-top:10px;font-size:.82rem;opacity:.8;line-height:1.6}

@media(max-width:720px){
  /* Een kantlijn van 130px kost op 375px de halve tekstkolom; die zetten we hier
     dus uit. Dat gebeurt door 'm gelijk te stellen aan de padding, en niet door
     alle uithangers los terug te zetten: elke uithanger rekent met
     calc(--pad - --kantlijn), en die som wordt zo vanzelf 0. Deed je dat niet,
     dan hing álles wat in de kantlijn hoort — koppen, beeld, kaders, knoppen —
     81px buiten z'n paneel en sneed de rand de eerste woorden eraf. */
  :root{--pad:24px;--kantlijn:var(--pad)}
  .block{padding:48px var(--pad)}
  .prices{grid-template-columns:1fr}
  .price:not(.pick)::before{display:none} /* gestapeld: geen tag-uitlijning nodig */

  /* --- mobiel menu ---
     De vier links hebben samen 403px nodig en er is er 327; ze passen dus zelfs
     op een eigen regel niet. Daarom een uitklapmenu. Bewust een checkbox en
     geen <details>: Safari rendert de inhoud van een dichte <details> via een
     slot die je met CSS niet kunt terugzetten, waardoor je de links op desktop
     zou moeten dupliceren om ze daar te kunnen tonen. Zo blijft er één <nav>. */
  .menuknop{
    display:block;margin-left:auto;
    appearance:none;-webkit-appearance:none;
    width:44px;height:44px;flex:none;   /* 44px = wat een vinger nodig heeft */
    border:0;border-radius:var(--radius-btn);background:transparent;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369737F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:22px;
  }
  .menuknop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* Open: het icoon wordt een kruisje, zodat de knop zegt wat 'ie nú doet. */
  .menuknop:checked{
    background-color:var(--accent-soft);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234169E1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }

  .bar nav{display:none}
  /* De taalwisselaar zit ín de nav, dus klapt hij vanzelf mee met het menu —
     geen eigen positionering nodig. Op mobiel als rij onderaan het menu. */
  /* In het uitklapmenu is verticaal ruimte zat: daar geen dropdown maar gewoon
     alle talen als rij — dus de knop verbergen en de lijst plat tonen. */
  .talen{position:static;margin-left:0;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap;gap:14px}
  .taalkop{display:none}
  .taallijst,
  .taalknop:checked ~ .taallijst{
    display:flex;position:static;flex-wrap:wrap;gap:14px;min-width:0;
    padding:0;background:none;border:0;box-shadow:none;
  }
  .menuknop:checked ~ nav .taallijst a{padding:0;border-radius:0;font-size:.8rem}
  /* Het paneel hangt ónder de balk (die is sticky en dus al gepositioneerd),
     over de pagina heen — zo duwt het openklappen de inhoud niet weg. */
  .menuknop:checked ~ nav{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;margin-top:8px;padding:8px;
    background:var(--paper);
    border:1px solid rgba(30,39,51,.05);
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(30,39,51,.10);
  }
  .menuknop:checked ~ nav a{
    padding:13px 14px;border-radius:var(--radius-s);font-size:1rem;
  }
  .menuknop:checked ~ nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}

  /* De slots van 64px waar het beeldmerk en het map-icoon in hangen, hoeven op
     deze breedte geen kantlijn meer te vullen: icoon en tekst gaan naast
     elkaar staan op normale leesafstand. */
  .kader-rij{gap:12px}
  .kader-rij .vink{width:auto}
  .map-kop{gap:12px}
  .map-kop .map-icoon{width:auto}
  .vinklijst{margin-left:30px}
}

/* ── FAQ (vraag/antwoord-lijst) ─────────────────────────────── */
.faq h3{margin:22px 0 6px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink)}
.faq h2+h3{border-top:0;padding-top:16px}
.faq h3+p{margin-top:0}
.faq p{max-width:68ch;margin:0}
.faq .cta{margin-top:28px}