/* Guest POS marketingsite.
   Typografie: één schreefloze letter voor alles. Op Apple-apparaten is dat de systeemletter
   San Francisco, elders de zelf gehoste Inter. Dat sluit aan op de kassa-interface in
   packages/ui en scheelt de bezoeker een download op de helft van de apparaten.
   Inter staat onder de SIL Open Font License 1.1, zie static/fonts/README.md. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-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 {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #e8e8ed;
  --ink: #1d1d1f;
  --ink-soft: #424245;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --blue: #0071e3;
  --blue-deep: #0058b9;
  --blue-bright: #2997ff; /* blauw op zwart, licht genoeg om te lezen */
  --dark: #000000;
  --dark-2: #1d1d1f;
  --on-dark: #f5f5f7;
  --on-dark-muted: #86868b;
  --ok: #14794a;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--sans);
  --serif: var(--sans); /* aliassen, oudere regels blijven werken */

  --wrap: 1140px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 4px 24px rgba(0, 0, 0, .06), 0 24px 60px -30px rgba(0, 0, 0, .18);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px -20px rgba(0, 0, 0, .2);
}

*, *::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(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.53; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

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(--bg-2); }

/* Typografie
   Eén schreefloze letter, het verschil zit in grootte en gewicht. Grote koppen krijgen
   negatieve letterafstand, want op formaat gaan letters anders te ver uit elkaar staan. */
.display { font-size: clamp(40px, 6.4vw, 80px); font-weight: 600; line-height: 1.05; letter-spacing: -.022em; color: #fff; }
.display-2 { font-size: clamp(34px, 4.8vw, 60px); font-weight: 600; line-height: 1.07; letter-spacing: -.02em; color: var(--on-dark); }
.h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 600; line-height: 1.07; letter-spacing: -.02em; }
.h2 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -.018em; }
.h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 1.5vw, 21px); font-weight: 400; line-height: 1.5; letter-spacing: -.004em; color: var(--muted); max-width: 62ch; }
.lead-light { color: var(--on-dark-muted); }
/* Geen kapitaaltjes met veel spatiëring: een klein blauw label leest rustiger. */
/* Het label staat zowel op wit als op het lichtgrijze vlak. Het heldere blauw haalt
   daar 4,31 tegen 1 en dat is net te weinig, dus staat hier de donkerder tint. */
.eyebrow { font-size: 15px; font-weight: 600; letter-spacing: -.004em; color: var(--blue-deep); margin-bottom: 12px; }
.eyebrow-brass { color: var(--blue-deep); }
.eyebrow-light { color: var(--blue-bright); }
.vs { color: var(--muted); font-weight: 400; }
.section-head { display: grid; gap: 14px; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; justify-items: center; }
.section-head .lead { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 0; }
.rhythm-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 23px; border-radius: 980px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; 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: none; }
.btn-lg { padding: 15px 30px; font-size: 17px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #0077ed; }
.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(255, 255, 255, .72); backdrop-filter: saturate(180%) blur(20px); 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(--blue); }
.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); border-radius: 999px; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + 8px); background: var(--bg); 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(--bg-2); }
.lang-switch li a[aria-current="true"] { color: var(--blue); font-weight: 600; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); 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(--bg-2); }
.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(--dark); }
.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(0, 0, 0, .28) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .9) 100%), linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .66) 45%, rgba(0, 0, 0, .42) 68%, rgba(0, 0, 0, .08) 85%, rgba(0, 0, 0, 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(--blue-bright); 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(--bg); border-bottom: 1px solid var(--line-soft); }
.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); margin-right: 24px; }
.strip-item:last-child { border-right: 0; margin-right: 0; }
.strip-item strong { 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); }
.pain-item { padding: 26px 0; border-bottom: 1px solid var(--line); 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(--dark); color: var(--on-dark); }
.rhythm .h2 { color: #fff; }
.rhythm .lead { color: var(--on-dark-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-weight: 600; font-size: 26px; color: var(--blue-bright); 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(--on-dark-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(--blue-bright); border: 1px solid rgba(41, 151, 255, .4); 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(--dark); }

/* Functiekaarten */
.features-teaser { background: var(--bg-2); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { display: grid; align-content: start; gap: 10px; padding: 28px 26px 30px; background: var(--bg); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-soft); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 20px 44px -26px rgba(0, 0, 0, .3); }
.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(--bg); 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-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(--blue); }

/* Vergelijk teaser */
.compare-mini { display: grid; border-top: 1px solid var(--line); 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); }
.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(--bg-2); }
.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(--dark); color: var(--on-dark); 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(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(20px); 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); background: var(--bg); }

/* 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); }
.feature-list > div { padding: 22px 0; border-bottom: 1px solid var(--line); 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(--bg-2); }
.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(--blue); }
.extras-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.extra { padding: 26px; background: var(--bg); 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(--bg); 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); padding: 6px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.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(--blue); 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(--bg); 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 { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 20px 44px -26px rgba(0, 0, 0, .3); }
.compare-vs { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); 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); border-radius: var(--radius); background: var(--bg); }
.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(--muted); background: var(--bg-3); }
.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(--bg-2); border-radius: var(--radius); border: 1px solid var(--line); }
.switch-note { margin-top: 32px; padding: 20px 24px; border-left: 3px solid var(--blue); background: var(--bg); 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(--blue); 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(--bg); 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); 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(--blue); }
.demo-img { border-radius: var(--radius); margin-top: 12px; }

/* Footer */
.site-footer { background: var(--dark); color: var(--on-dark-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(--on-dark); 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(--blue); 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); 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) {
  /* Op mobiel staan demo en inloggen in het uitklapmenu, niet dubbel in de balk. */
  .main-nav, .header-actions .btn, .header-login { 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; }
}

/* Portaal
   Twee gelijkwaardige keuzes. Geen inlogformulier: deze site is statisch en heeft
   geen backend, dus wachtwoorden gaan hier niet langs. De kaarten wijzen de weg
   naar de kassa en de backoffice, waar het inloggen thuishoort. */
.portal { padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px); }
.portal .section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 840px; margin-inline: auto; }
/* Vaste rijen, zodat de knop in beide kaarten op dezelfde hoogte staat,
   ook als de ene omschrijving een regel langer is dan de andere. */
.portal-card { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; text-align: center; gap: 10px; padding: 40px 32px 34px; background: var(--bg-2); border: 1px solid transparent; border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s, background .18s; }
.portal-card:hover { background: var(--bg); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 20px 44px -26px rgba(0, 0, 0, .3); }
.portal-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); color: var(--blue); margin-bottom: 6px; }
.portal-card:hover .portal-icon { background: var(--blue); color: #fff; }
.portal-name { font-size: 22px; font-weight: 600; letter-spacing: -.012em; }
.portal-desc { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 30ch; }
.portal-cta { color: var(--blue-deep); font-weight: 600; font-size: 16px; margin-top: 8px; }
.portal-card:hover .portal-cta { text-decoration: underline; }
.portal-help { max-width: 640px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; display: grid; gap: 10px; }
.portal-help p { color: var(--muted); }

/* Inloggen in de header: een gewone tekstlink, de demo blijft de blauwe knop. */
.header-login { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.header-login:hover { color: var(--ink); }

@media (max-width: 700px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { padding: 32px 24px 28px; }
}