/* Guest POS marketingsite.
   Typografie: Fraunces voor display en sectiekoppen, Figtree voor alles wat je leest of scant.
   Beide zelf gehost (SIL Open Font License 1.1), zie static/fonts/README.md. Geen externe CDN,
   dus geen verbinding met Google vanaf de bezoeker en één ronde minder voor de eerste render. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Materialen: linnen, papier, espresso, messing. Blauw is het merkaccent uit het logo. */
  --linen: #f4ece1;
  --linen-deep: #ebdfd0;
  --paper: #fffcf7;
  --ink: #1c1614;
  --ink-soft: #453b34;
  --muted: #6b5d53;
  --line: #e5d8c7;
  --line-strong: #cbbaa4;
  --blue: #0071e3;
  --blue-deep: #0a5bc4;
  --brass: #a67338;
  --brass-deep: #855827;
  --brass-light: #cf9f61; /* messing op espresso, licht genoeg om te lezen */
  --brass-soft: #f2e5cf;
  --espresso: #191311;
  --espresso-2: #2a201b;
  --cream-text: #f6efe4;
  --cream-muted: #c9b9a4;
  --ok: #1f7a54;

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: var(--display); /* alias, oudere regels blijven werken */

  /* Fraunces is variabel. opsz bepaalt de optische maat, SOFT de rondingen.
     WONK op 0 houdt de eigenzinnige varianten uit, dat leest zakelijker. */
  --fr-display: "opsz" 144, "SOFT" 30, "WONK" 0;
  --fr-head: "opsz" 72, "SOFT" 22, "WONK" 0;
  --fr-mid: "opsz" 32, "SOFT" 16, "WONK" 0;

  --wrap: 1180px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 26px 64px -36px rgba(60, 40, 24, .5);
  --shadow-soft: 0 1px 2px rgba(60, 40, 24, .05), 0 8px 24px -18px rgba(60, 40, 24, .3);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Papierkorrel over de hele pagina. Onzichtbaar als korrel, merkbaar als materiaal. */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; background-image: var(--grain); mix-blend-mode: multiply; }
@media print { body::after { display: none; } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section.alt { background: var(--paper); }

/* Typografie
   Eén regel: Fraunces draagt de grote koppen, Figtree draagt alles wat je scant.
   Een kaartkop van 26px in een serif op gewicht 400 leest als sfeer, niet als kop.
   Daarom staat alles onder sectieniveau in Figtree 600, strak en met duidelijk gewicht. */
.display { font-family: var(--display); font-variation-settings: var(--fr-display); font-weight: 600; font-size: clamp(46px, 7vw, 94px); line-height: .96; letter-spacing: -.022em; color: #fff; }
.display-2 { font-family: var(--display); font-variation-settings: var(--fr-display); font-weight: 600; font-size: clamp(38px, 5.5vw, 68px); line-height: 1.0; letter-spacing: -.018em; color: var(--cream-text); }
.h1 { font-family: var(--display); font-variation-settings: var(--fr-head); font-weight: 600; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.018em; }
.h2 { font-family: var(--display); font-variation-settings: var(--fr-head); font-weight: 600; font-size: clamp(31px, 4vw, 46px); line-height: 1.06; letter-spacing: -.015em; }
/* Componentkop: geen serif meer. Dit is de belangrijkste leesbaarheidswinst. */
.h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -.011em; }
.lead { font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.lead-light { color: var(--cream-text); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: 16px; }
.eyebrow-brass { color: var(--brass-deep); }
.eyebrow-light { color: var(--brass-light); }
/* Fraunces wordt alleen romein geladen. Een schuine serif laten simuleren oogt slap,
   dus krijgt "vs" zijn nadruk van kleur en maat in plaats van van een cursief. */
.vs { color: var(--brass); font-variation-settings: var(--fr-mid); }
.section-head, .rhythm-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .eyebrow, .rhythm-head .eyebrow, .page-head .eyebrow { position: relative; padding-top: 18px; margin-bottom: 10px; }
.section-head .eyebrow::before, .rhythm-head .eyebrow::before, .page-head .eyebrow::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 2px; background: var(--brass); }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -.005em; text-decoration: none; border: 1.5px solid transparent; transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; cursor: pointer; line-height: 1.2; }
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 16px 28px; font-size: 17px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(10, 60, 120, .2), 0 10px 24px -14px rgba(10, 91, 196, .7); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #000; }
.btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .22); }
.text-link { color: var(--blue-deep); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; justify-self: start; width: max-content; max-width: 100%; }
.card-link { color: var(--blue-deep); font-weight: 600; font-size: 15px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 239, 230, .88); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand img { height: 32px; width: auto; }
.main-nav { display: flex; gap: 26px; margin-left: 12px; }
.main-nav a, .mobile-nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .08em; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 8px); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 170px; box-shadow: var(--shadow); }
.lang-switch li a { display: block; padding: 8px 12px; text-decoration: none; border-radius: 8px; font-size: 15px; }
.lang-switch li a:hover { background: var(--linen); }
.lang-switch li a[aria-current="true"] { color: var(--brass); font-weight: 600; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu-toggle span { width: 18px; height: 2px; background: var(--ink); display: block; }
.mobile-nav { display: none; flex-direction: column; padding: 8px 20px 18px; border-top: 1px solid var(--line); background: var(--linen); }
.mobile-nav a { padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
.mobile-nav:not([hidden]) { display: flex; }

/* Hero */
.hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--espresso); }
.hero-media { position: absolute; inset: 0; }
/* Scrim over de video. De beelden wisselen, dus dit moet op het lichtste beeld nog
   genoeg contrast geven voor witte tekst. Gemeten over de hele film, niet op één frame. */
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(25, 19, 17, .28) 0%, rgba(25, 19, 17, .42) 45%, rgba(25, 19, 17, .9) 100%), linear-gradient(90deg, rgba(25, 19, 17, .8) 0%, rgba(25, 19, 17, .66) 45%, rgba(25, 19, 17, .42) 68%, rgba(25, 19, 17, .08) 85%, rgba(25, 19, 17, 0) 100%); }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-poster { transform-origin: 60% 40%; }
/* De poster staat na de video in de HTML en zou hem dus afdekken. Met deze stapeling
   ligt de video erboven en vervaagt hij eroverheen zodra hij speelt. */
.hero-poster { z-index: 0; }
.hero-video { z-index: 1; opacity: 0; transition: opacity 1.2s; }
.hero-video.is-playing { opacity: 1; }
.hero-video.is-playing + .hero-poster { animation: none; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-inner { position: relative; z-index: 3; padding-block: clamp(90px, 12vw, 150px) clamp(56px, 7vw, 96px); max-width: min(var(--wrap), calc(100% - 40px)); }
/* 12ch brak de kop in het Nederlands af op een losse "zaak." en in het Frans op vijf regels.
   Op 20ch valt de kop in alle zes talen netjes, zonder weesregel. */
.hero-inner .display { max-width: 24ch; }

/* Typemachine.
   De h1 bevat alleen de echte kop: de vaste regel plus de eerste zin. De overige zinnen
   staan in een data-attribuut, niet als verborgen tekst in de kop zelf. site.js meet ze
   en zet een min-height op .tw, zodat er niets verspringt terwijl de tekst wisselt.
   Zonder JavaScript en bij reduced motion blijft simpelweg de eerste zin staan. */
.hero-line { display: block; }
.tw { display: block; }
.tw-caret { display: inline-block; width: .055em; height: .74em; margin-left: .07em; background: var(--brass-light); border-radius: 1px; animation: caret 1.05s step-end infinite; }
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { animation: none; } }
.hero-inner .lead { margin-top: 26px; max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Strip */
.strip { background: var(--paper); border-bottom: 1px solid var(--line); }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-item { padding: 28px 24px 28px 0; display: grid; gap: 6px; border-right: 1px solid var(--line-strong); margin-right: 24px; }
.strip-item:last-child { border-right: 0; margin-right: 0; }
.strip-item strong { font-family: var(--display); font-variation-settings: var(--fr-mid); font-size: 27px; line-height: 1.1; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.strip-item span { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* Pijn */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pain .col-text .lead { margin-top: 18px; }
.col-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.pain-item { padding: 26px 0; border-bottom: 1px solid var(--line-strong); display: grid; gap: 8px; }
.pain-item h3 { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -.011em; }
.pain-item p { color: var(--ink-soft); }

/* Ritme (donker) */
.rhythm { background: var(--espresso); color: var(--cream-text); }
.rhythm .h2 { color: #fff; }
.rhythm .lead { color: var(--cream-muted); }
.rhythm-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.rhythm-list { counter-reset: step; display: grid; }
.rhythm-list li { counter-increment: step; position: relative; padding: 26px 0 26px 64px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 8px; }
.rhythm-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rhythm-list li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--display); font-variation-settings: var(--fr-mid); font-weight: 600; font-size: 26px; color: var(--brass-light); line-height: 1; font-variant-numeric: tabular-nums; }
.rhythm-list h3 { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -.011em; color: #fff; }
.rhythm-list p { color: var(--cream-muted); max-width: 56ch; }
.rhythm-tag { display: inline-block; width: max-content; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light); border: 1px solid rgba(207, 159, 97, .45); border-radius: 999px; padding: 4px 10px; }
.rhythm-media { position: sticky; top: 96px; display: grid; gap: 18px; }
.rhythm-img { border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.rhythm-img-2 { width: 78%; margin-left: auto; margin-top: -60px; border: 6px solid var(--espresso); }

/* Functiekaarten */
.features-teaser { background: var(--paper); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
.feature-card:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60,40,24,.05), 0 18px 40px -24px rgba(60,40,24,.45); }
.feature-card h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -.011em; }
.feature-card p { color: var(--ink-soft); font-size: 15.5px; }
.feature-card .card-link { margin-top: auto; padding-top: 6px; }

/* Prijs */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.price-grid .lead { margin: 16px 0 28px; }
.price-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow); display: grid; gap: 22px; }
.price-amount { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price-num { font-family: var(--display); font-variation-settings: var(--fr-display); font-weight: 600; font-size: clamp(64px, 8vw, 104px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-unit { color: var(--muted); font-size: 15px; max-width: 18ch; line-height: 1.35; }
.check-list { display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.check-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M4.5 8.5l2.3 2.3 4.7-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M4.5 8.5l2.3 2.3 4.7-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; }
.check-list-lg li { font-size: 17.5px; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--line); }
.check-list-lg li::before { top: 17px; }
.dash-list { display: grid; gap: 10px; }
.dash-list li { position: relative; padding-left: 22px; color: var(--ink-soft); }
.dash-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--brass); }

/* Vergelijk teaser */
.compare-mini { display: grid; border-top: 1px solid var(--line-strong); margin: 0 0 30px; }
.compare-mini > div { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.compare-mini dt { font-weight: 600; }
.compare-mini dd { margin: 0; color: var(--ink-soft); }
.compare-mini-us dt { color: var(--blue-deep); }
.compare-mini-us dd { color: var(--ink); font-weight: 600; }

/* Herkomst */
.origin { background: var(--paper); }
.origin .col-text { display: grid; gap: 18px; }
.origin-img { border-radius: var(--radius); }
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 26px 34px; margin-top: 16px; }
.partner-logos img { height: 28px; width: auto; }
.partner-logos-lg { margin-top: 34px; }
.partner-logos-lg img { height: 34px; }
.logo-text { font-weight: 600; font-size: 21px; letter-spacing: -.015em; color: var(--ink); }
.logo-text-lg { font-size: 30px; display: block; }

/* Slot-CTA */
.final-cta { background: var(--espresso); color: var(--cream-text); text-align: center; }
.final-inner { display: grid; gap: 22px; justify-items: center; }
.final-inner .lead { max-width: 58ch; }

/* Pagina-kop */
.page-head { padding: clamp(56px, 8vw, 104px) 0 clamp(28px, 4vw, 48px); display: grid; gap: 18px; }
.page-head .wrap { display: grid; gap: 18px; }
.page-head-center .wrap { justify-items: center; text-align: center; }
.page-head .lead { max-width: 66ch; }
.sub-nav { position: sticky; top: 68px; z-index: 40; background: rgba(245, 239, 230, .92); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.sub-nav-row { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.sub-nav-row::-webkit-scrollbar { display: none; }
.sub-nav a { white-space: nowrap; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 7px 12px; border-radius: 999px; border: 1px solid transparent; }
.sub-nav a:hover { border-color: var(--line-strong); background: var(--paper); }

/* Functies */
.feature-group { scroll-margin-top: 130px; }
.feature-group-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.feature-group-head { display: grid; gap: 16px; position: sticky; top: 130px; }
.feature-img { border-radius: var(--radius); margin-top: 10px; }
.feature-list { display: grid; margin: 0; border-top: 1px solid var(--line-strong); }
.feature-list > div { padding: 22px 0; border-bottom: 1px solid var(--line-strong); display: grid; gap: 6px; }
.feature-list dt { font-weight: 600; font-size: 17.5px; letter-spacing: -.008em; }
.feature-list dd { margin: 0; color: var(--ink-soft); max-width: 64ch; }
.cta-band { background: var(--brass-soft); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band-inner .lead { margin-top: 8px; }

/* Integraties */
.integration { scroll-margin-top: 90px; }
.integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.integration-head { display: grid; gap: 14px; }
.integration-logo { height: 40px; width: auto; }
.integration-role { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--brass); }
.extras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.extra { padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); display: grid; gap: 10px; }
.extra h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -.011em; }
.extra p { color: var(--ink-soft); }

/* Prijspagina */
.pricing-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.price-card-lg { gap: 26px; }
.price-card-lg .btn { justify-self: start; }
.pricing-aside { display: grid; gap: 34px; padding-top: 12px; }
.pricing-aside .h3 { margin-bottom: 12px; }
.pricing-compare { padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 12px; }
.pricing-compare .text-link { justify-self: start; }
.faq .h2 { margin-bottom: 26px; }
.faq-item { border-top: 1px solid var(--line-strong); padding: 6px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { cursor: pointer; padding: 17px 40px 17px 0; font-weight: 600; font-size: 17px; letter-spacing: -.008em; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-size: 26px; font-weight: 400; color: var(--brass); font-family: var(--sans); }
.faq-item[open] summary::after { content: "×"; }
.faq-item p { padding: 0 0 18px; color: var(--ink-soft); max-width: 64ch; }

/* Vergelijk */
.compare-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.compare-card { display: grid; gap: 10px; align-content: start; padding: 28px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
.compare-card:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60,40,24,.05), 0 18px 40px -24px rgba(60,40,24,.45); }
.compare-vs { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.compare-card h2 { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -.012em; }
.compare-card p { color: var(--ink-soft); font-size: 15.5px; }
.disclaimer, .checked { font-size: 14px; color: var(--muted); margin-top: 22px; max-width: 80ch; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); }
.ledger { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ledger thead th { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); background: var(--linen-deep); }
.ledger tbody th { font-weight: 600; width: 22%; }
.ledger td { color: var(--ink-soft); width: 39%; }
.ledger .us { background: rgba(0, 113, 227, .06); color: var(--ink); font-weight: 500; }
.ledger thead .us { color: var(--blue-deep); }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 0; }
.when { display: grid; gap: 14px; align-content: start; }
.when-us { padding: 26px; background: var(--linen); border-radius: var(--radius); border: 1px solid var(--line); }
.switch-note { margin-top: 32px; padding: 20px 24px; border-left: 3px solid var(--brass); background: var(--paper); color: var(--ink-soft); max-width: 80ch; }
.source-list { display: grid; gap: 10px; counter-reset: src; margin-bottom: 28px; }
.source-list li { counter-increment: src; display: grid; gap: 2px; padding-left: 30px; position: relative; font-size: 15px; }
.source-list li::before { content: counter(src) "."; position: absolute; left: 0; color: var(--brass); font-family: var(--serif); font-size: 18px; }
.source-list a { color: var(--blue-deep); font-weight: 600; text-decoration: none; }
.source-url { font-size: 12.5px; color: var(--muted); word-break: break-all; }
.sources .btn { margin-bottom: 16px; }

/* Demo */
.demo-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.demo-form { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.demo-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.demo-form input, .demo-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); }
.demo-form input:focus, .demo-form textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.demo-form .btn { justify-self: start; margin-top: 6px; }
.form-note { font-size: 13.5px; color: var(--muted); }
.demo-aside { display: grid; gap: 14px; }
.big-link { font-family: var(--serif); font-size: 28px; text-decoration: none; color: var(--ink); width: max-content; border-bottom: 1px solid var(--brass); }
.demo-img { border-radius: var(--radius); margin-top: 12px; }

/* Footer */
.site-footer { background: var(--espresso); color: var(--cream-muted); padding: 64px 0 28px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-grid a { display: block; text-decoration: none; color: var(--cream-text); padding: 4px 0; font-size: 15px; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { height: 30px; width: auto; }
.footer-tagline { font-family: var(--serif); font-size: 24px; color: #fff; margin-top: 18px; max-width: 18ch; line-height: 1.2; }
.footer-made { margin-top: 12px; font-size: 14px; }
.footer-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; font-weight: 600; }
.footer-h + .footer-h, .footer-langs + .footer-h { margin-top: 18px; }
.footer-small { font-size: 13.5px; margin: 8px 0 18px; }
.footer-langs { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.footer-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; display: grid; gap: 6px; }
.footer-legal p { max-width: none; }
.footer-legal + .footer-h { margin-top: 18px; }

/* Rootpagina */
.root-body { display: grid; place-items: center; min-height: 100vh; }
.root-main { display: grid; gap: 30px; justify-items: center; text-align: center; }
.root-langs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.root-langs a { display: inline-block; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 600; }

/* Responsive */
@media (max-width: 1080px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .compare-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .main-nav, .header-actions .btn { display: none; }
  .menu-toggle { display: flex; }
  .two-col, .rhythm-grid, .price-grid, .feature-group-grid, .integration-grid, .pricing-grid, .demo-grid, .extras-grid { grid-template-columns: 1fr; }
  .rhythm-media { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .rhythm-img-2 { width: 100%; margin: 0; border: 0; }
  .feature-group-head { position: static; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-item:nth-child(2) { border-right: 0; }
  .hero { min-height: 70vh; }
  .origin-media { order: 2; }
  .compare-mini > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .strip-grid { grid-template-columns: 1fr; }
  .strip-item { border-right: 0; margin-right: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .strip-item:last-child { border-bottom: 0; }
  .feature-grid, .compare-cards, .footer-grid { grid-template-columns: 1fr; }
  .rhythm-media { grid-template-columns: 1fr; }
  .rhythm-list li { padding-left: 52px; }
  .cta-row .btn { width: 100%; }
  .price-num { font-size: 64px; }
}