/* GripL — huisstijl: #004481 + wit, Manrope */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("fonts/manrope-800.woff2") format("woff2"); }

:root {
  --blue: #004481;
  --blue-dark: #00335f;
  --blue-deep: #00233f;
  --tint: #eef4fa;
  --tint-2: #dde9f5;
  --ink: #0e1d2f;
  --muted: #4b5d72;
  --line: #d6e1ec;
  --white: #ffffff;
  --ok: #1d7a4a;
  --err: #b3261e;
  --radius: 18px;
  --wrap: 1120px;
  --shadow: 0 18px 50px -20px rgba(0, 35, 63, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px 12px; z-index: 99; }
:focus-visible { outline: 3px solid #7fb2e5; outline-offset: 3px; border-radius: 6px; }

/* ---------- Header ---------- */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.site-header .brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 6px; }
/* Geen knopvorm: de huidige pagina is wit, de andere lichtgrijs. */
.nav a {
  color: #9fb8d1; text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: 8px 14px; border-radius: 6px; transition: color .15s;
}
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-light { background: var(--white); color: var(--blue); }
.btn-light:hover { background: var(--tint); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: var(--white); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-dark); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 85% -10%, #0a5aa3 0%, transparent 60%), var(--blue);
  color: var(--white);
  padding: 130px 0 90px;
}
.hero::after { /* subtiel symbool als watermerk */
  content: ""; position: absolute; right: -120px; bottom: -80px; width: 520px; height: 260px;
  background: url("img/symbool-wit.png") no-repeat center / contain; opacity: .06; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-block; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #b9d4ee; margin-bottom: 18px;
}
.hero .lead { font-size: 1.2rem; color: #d7e6f5; max-width: 34em; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Voordelen bij het scherm dat de telefoon op dat moment toont (telefoon.js wisselt ze mee). De
   min-height houdt de knoppen eronder op hun plek als een blok een regel meer of minder heeft. */
.voordelen { max-width: 34em; min-height: 196px; margin: 6px 0 26px; }
.voordeel { animation: voordeel-in .45s ease; }
.voordeel[hidden] { display: none; }
.voordeel .eyebrow { margin-bottom: 6px; text-transform: none; letter-spacing: .01em; font-size: .95rem; }
.v-keuze { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.v-knop {
  font: inherit; font-size: .95rem; font-weight: 700; color: var(--white); background: transparent; cursor: pointer;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 18px; transition: background .2s, color .2s, border-color .2s;
}
.v-knop:hover { border-color: var(--white); }
.v-knop[aria-pressed="true"] { background: var(--white); color: var(--blue); border-color: var(--white); }
.v-knop:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v-titel { font-size: 1.35rem; font-weight: 700; color: var(--white); margin: 0 0 12px; }
.v-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; color: #d7e6f5; font-size: 1.05rem; line-height: 1.45; }
.v-lijst li { position: relative; padding-left: 30px; }
.v-lijst li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
@keyframes voordeel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Keuzepagina ---------- */
.choose { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 110px 0 60px; }
.choose .intro { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.choose .intro img { height: 64px; width: auto; margin: 0 auto 34px; }
.choose .intro h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 400; letter-spacing: .04em; }
.choose .intro p { font-size: 1.15rem; color: #d7e6f5; margin: 0; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.choice {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 22px; padding: 30px 30px 26px; color: var(--white); text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.choice:hover { background: var(--white); color: var(--blue); border-color: var(--white); transform: translateY(-3px); }
.choice .who { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.choice .title { font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; line-height: 1.15; }
.choice .title .voor { display: block; font-weight: 400; opacity: .6; white-space: nowrap; }
.choice .desc { color: inherit; opacity: .85; }
.choice .desc .regel { display: block; }
.choice .desc .regel + .regel { margin-top: 6px; }
.choice .go { margin-top: auto; padding-top: 12px; font-size: 1.6rem; font-weight: 700; line-height: 1; display: flex; justify-content: flex-end; }
.choice:hover .go .arrow { transform: translateX(4px); }
.choice .go .arrow { transition: transform .2s; }
/* Drie keuzes: iets breder en een kleinere titel, zodat "je persoonlijke uitgaven" op twee regels past. */
.choices-drie { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
.choices-drie .choice .title { font-size: 1.4rem; }

/* ---------- Secties ---------- */
section { padding: 90px 0; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.tinted { background: var(--tint); }

.benefits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; }
.benefits li {
  grid-column: span 2; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.benefits li:nth-child(4), .benefits li:nth-child(5) { grid-column: span 3; }
.benefits .num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--blue); color: var(--white); font-weight: 800; font-size: .95rem; margin-bottom: 16px;
}
.benefits p { color: var(--muted); margin: 0; }
.benefits ul { margin: 10px 0 0; padding-left: 1.1em; color: var(--muted); }
.benefits ul li { all: unset; display: list-item; }

.steps { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 20px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--blue); color: var(--white); }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 18px; color: #8fbbe6;
}
.steps h3 { margin: 0 0 4px; }
.steps p { margin: 0; color: #d7e6f5; }

.trust { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.trust blockquote {
  margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--blue);
}
.trust p { color: var(--muted); font-size: 1.1rem; }

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 12px 0 0; }

/* ---------- Formulier ---------- */
.cta-block { background: var(--blue); color: var(--white); }
.cta-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.cta-grid .lead { color: #d7e6f5; font-size: 1.15rem; }
.form {
  background: var(--white); color: var(--ink); border-radius: 22px; padding: 30px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.field .opt { font-weight: 500; color: var(--muted); }
.field input, .field textarea {
  width: 100%; font: inherit; font-weight: 500; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfdff;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,68,129,.15); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.form-note { margin: 0; font-size: .92rem; color: var(--muted); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.hp { position: absolute !important; left: -9999px !important; }
.form .btn { justify-self: start; }
.form-msg { border-radius: 12px; padding: 14px 16px; font-weight: 700; }
.form-msg.ok { background: #e7f5ec; color: var(--ok); }
.form-msg.err { background: #fbeaea; color: var(--err); }
.form-msg[hidden] { display: none; }

/* ---------- Telefoon (consument) ----------
   Het Bon details-scherm uit de app (mobile/src/screens/BonDetail.tsx), op ware grootte
   opgebouwd (390 × 844 pt) en als geheel geschaald naar het toestel. */
.phone {
  --scale: .682;
  width: 290px; margin-left: auto; border-radius: 46px; padding: 12px;
  background: linear-gradient(145deg, #3a4150, #14171d 55%, #2a2f38);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 5px #0b0d10;
  position: relative;
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2f38; }
.phone::before { left: -3px; top: 110px; height: 56px; box-shadow: 0 70px 0 #2a2f38; }
.phone::after { right: -3px; top: 150px; height: 80px; }
.screen { position: relative; width: calc(390px * var(--scale)); height: calc(844px * var(--scale)); border-radius: 36px; overflow: hidden; background: linear-gradient(#004481 50%, #F8F9FA 50%); }
.app {
  width: 390px; height: 844px; transform: scale(var(--scale)); transform-origin: 0 0;
  position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; background: #F8F9FA; color: #1A1A1A;
  padding-bottom: 34px;
  z-index: 2; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  background-image: linear-gradient(#004481 104px, transparent 104px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-weight: 400;
}
.a-status { height: 54px; padding: 0 30px 0 44px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 17px; font-weight: 600; }
.a-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.a-sys { display: flex; gap: 6px; align-items: center; }
.a-sys svg { height: 12px; fill: currentColor; }
.a-sys svg:first-child { width: 18px; } .a-sys svg:last-child { width: 26px; }
.a-header { height: 50px; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; }
.a-title { font-size: 17px; font-weight: 600; }
.a-back { position: absolute; left: 8px; display: flex; align-items: center; gap: 6px; font-size: 17px; }
.a-back svg { width: 12px; height: 20px; }
.a-actie { position: absolute; right: 18px; display: flex; }
.a-actie.u-bak { position: absolute; }
.a-actie svg { width: 24px; height: 26px; }
.a-body { flex: 1; overflow: hidden; }
.a-top { background: #fff; padding: 24px; text-align: center; border-bottom: 1px solid #F0F0F0; }
.a-merchant { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 4px; }
.a-addr { font-size: 13px; color: #888; margin-bottom: 8px; }
.a-date { font-size: 14px; color: #888; }
.a-section { background: #fff; margin-top: 16px; border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; }
.a-row { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 15px; color: #555; border-bottom: 1px solid #F8F8F8; }
.a-row b { color: #1A1A1A; font-weight: 500; }
.a-label { font-size: 13px; color: #888; padding: 12px 16px 0; }
.a-item { display: flex; align-items: center; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid #F8F8F8; }
.a-desc { flex: 1 1 auto; }
.a-vat { font-size: 10px; color: #888; background: #F0F0F0; padding: 1px 5px; border-radius: 4px; margin: 0 auto 0 6px; }
.a-amt { font-weight: 500; margin-left: 12px; }
.a-qty { display: block; font-size: 12px; color: #999; margin-top: 2px; }
.a-vatsum { border-top: 1px solid #E8E8E8; margin-top: 4px; padding-top: 4px; }
.a-vatsum div { display: flex; justify-content: space-between; padding: 4px 16px; font-size: 13px; color: #888; }
.a-total { display: flex; justify-content: space-between; padding: 10px 16px 12px; font-size: 14px; font-weight: 600; color: #333; }
.a-total b { color: #1A1A1A; font-weight: 700; }
/* Bedragen in hetzelfde lettertype als Mijn uitgaven (Manrope 500); de rest van dit scherm
   houdt het systeemlettertype, zoals BonDetail.tsx. */
.a-amt, .a-vatsum span:last-child, .a-total b { font-family: "Manrope", system-ui, sans-serif; font-weight: 500; }
.a-cat { display: flex; align-items: center; padding: 14px 16px; font-size: 15px; }
.a-cat i { width: 12px; height: 12px; border-radius: 6px; margin-right: 10px; background: #4CAF50; }
.a-actions { display: flex; gap: 12px; margin: 16px 16px 32px; }
.a-actions span { flex: 1; text-align: center; padding: 14px 0; border-radius: 10px; font-size: 15px; font-weight: 600; }
.a-edit { background: #EDF4FF; color: #004481; }
.a-del { background: #FDECEC; color: #E53935; }
.a-home { position: absolute; z-index: 3; bottom: calc(8px * var(--scale)); left: 50%; width: calc(134px * var(--scale)); height: calc(5px * var(--scale)); transform: translateX(-50%); border-radius: 3px; background: #1A1A1A; }
/* Schermwissel zonder flits: het nieuwe scherm fadet bovenop het oude in, met een klein zetje
   omhoog. Het oude blijft eronder staan tot het nieuwe er helemaal is, en verdwijnt pas dan
   (de vertraging op de hidden-toestand) — anders schijnt halverwege de achtergrond door. */
.app[hidden] {
  display: flex; opacity: 0; visibility: hidden; z-index: 1;
  transform: scale(var(--scale)) translateY(14px);
  transition: opacity 0s linear .55s, transform 0s linear .55s, visibility 0s linear .55s;
}
/* Schermen met AppText (Manrope Medium), zoals Tracker en Prijsontwikkeling */
.app-m { font-family: "Manrope", system-ui, sans-serif; font-weight: 500; }
.app-m .a-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Tracker (Tracker.tsx) */
.t-list { padding-top: 16px; }
.t-card { background: #fff; margin: 0 16px 10px; border-radius: 12px; overflow: hidden; }
.t-head { display: flex; align-items: center; gap: 8px; padding: 14px; }
.t-main { flex: 1; min-width: 0; }
.t-name { font-size: 15px; font-weight: 600; }
.t-cheap { font-size: 13px; color: #666; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-promo { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.t-promo span { flex: 1; font-size: 13px; font-weight: 700; color: #8A6100; }
.t-promo em, .t-label { font-style: normal; font-size: 11px; font-weight: 700; color: #8A6100; background: #FFF8E7; padding: 2px 6px; border-radius: 4px; }
.t-bel { width: 20px; height: 20px; color: #BBB; margin: 0 2px; }
.t-bel.aan { fill: #004481; }
.t-chev { width: 20px; height: 20px; color: #999; }
.t-exp { border-top: 1px solid #F0F0F0; padding: 0 14px 10px; }
.t-prow { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.t-pmain { flex: 1; }
.t-merch { font-size: 13px; line-height: 17px; }
.t-date { font-size: 12px; color: #999; margin-top: 1px; }
.t-pright { text-align: right; margin-left: 4px; }
.t-pright b { display: block; font-size: 14px; font-weight: 600; }
.t-pright small { display: block; font-size: 11px; color: #999; margin-top: 1px; }
.t-remove { display: flex; align-items: center; gap: 6px; padding-top: 10px; margin-top: 4px; border-top: 1px solid #F8F8F8; font-size: 13px; color: #C0392B; }
.t-remove svg { width: 16px; height: 16px; }
.t-cta { font-size: 13px; color: #9AA5B1; text-align: center; line-height: 19px; padding: 14px 40px 0; margin: 0; }
.t-search { display: flex; align-items: center; gap: 8px; background: #fff; padding: 16px 16px; border-top: 1px solid #F0F0F0; font-size: 16px; color: #AAA; }
.t-search svg { width: 18px; height: 18px; color: #004481; }

/* Mijn bonnen (BonnenLijst.tsx). De app laadt alleen Manrope 500 (App.tsx: useFonts), dus ook
   het bedrag met fontWeight 600 staat in het echt in 500 — niet vet. */
.b-list { font-weight: 500; }
.b-row { display: flex; align-items: center; background: #fff; padding: 14px 16px; }
.b-dot { width: 12px; height: 12px; border-radius: 6px; margin-right: 12px; flex-shrink: 0; }
.b-main { flex: 1; min-width: 0; }
.b-merchant { font-size: 15px; line-height: 19px; color: #1A1A1A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-meta { font-size: 13px; color: #888; margin-top: 2px; }
.b-amount { font-size: 16px; color: #1A1A1A; flex-shrink: 0; margin-left: 12px; }
.b-sep { height: 1px; background: #F0F0F0; margin-left: 40px; }
/* In de app: right 20, bottom 80 boven de onderrand van het scherm (vlak boven de tabbalk);
   hier komt de ruimte voor de home-indicator (34) er nog bij. */
.b-fab {
  position: absolute; right: 20px; bottom: 118px; width: 56px; height: 56px; border-radius: 28px;
  background: #004481; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 32px; font-weight: 400;
  box-shadow: 0 4px 8px rgba(0,68,129,.35);
}

/* Mijn uitgaven (Uitgaven.tsx) */
.u-bak i { position: absolute; top: -1px; left: -1px; width: 9px; height: 9px; border-radius: 5px; background: #E53935; }
.u-bak svg { width: 28px; height: 26px; }
.u-maand { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 12px 16px; border-bottom: 1px solid #F0F0F0; }
.u-pijl { padding: 0 8px; font-size: 28px; line-height: 32px; color: #333; }
.u-label { font-size: 17px; }
.u-label small { font-size: 11px; margin-left: 6px; }
.u-totaal { background: #fff; padding: 20px; text-align: center; font-size: 32px; border-bottom: 1px solid #F0F0F0; }
.u-sectie { background: #fff; margin-top: 16px; padding: 16px; border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; }
.u-cat, .u-bon { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #F8F8F8; font-size: 15px; }
.u-cat.on { background: #F0F7FF; margin: 0 -16px; padding: 10px 16px; }
.u-cat i, .u-bon i { width: 10px; height: 10px; border-radius: 5px; margin-right: 10px; flex-shrink: 0; }
.u-naam { flex: 1; }
.u-pct { font-size: 13px; color: #888; margin-right: 10px; }
.u-kop { font-size: 15px; color: #333; margin-bottom: 12px; }
.u-kop span { font-size: 13px; color: #999; margin-left: 8px; }
.u-bon { font-size: 14px; }
.u-winkel { flex: 1; margin-left: 4px; }
.u-datum { font-size: 12px; color: #999; margin: 0 12px; }
.u-cat b, .u-bon b { font-weight: 500; }
.u-artikel small { display: block; font-size: 14px; color: #888; margin-bottom: 4px; }
.u-artikel small.u-aantal { font-size: 13px; margin: 4px 0 0; }
.u-x { color: #999; margin-right: 12px; }
.u-kop-trend { display: flex; align-items: center; }
.u-trend { width: 22px; height: 22px; margin-left: auto; color: #004481; }
.u-getypt { color: #1A1A1A; }

/* Pushmelding bovenin het scherm (ondernemerspagina): zoals iOS hem toont, met de tekst die de
   app echt stuurt (backend/src/push/send.ts). Komt binnen en schuift weer weg, zodat daarna de
   nieuwe bon bovenaan de lijst te zien is; telefoon.js start hem opnieuw elke keer dat het scherm
   terugkomt. Bij "verminder beweging" blijft hij gewoon staan. */
.melding {
  position: absolute; top: 58px; left: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: #F4F5F7; border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1A1A1A;
  animation: melding 4.6s cubic-bezier(.2,.8,.2,1) .5s both;
}
.m-icoon { width: 40px; height: 40px; border-radius: 10px; background: #004481; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.m-icoon img { width: 27px; height: auto; }
.m-tekst { flex: 1; min-width: 0; }
.m-kop { display: flex; justify-content: space-between; font-size: 13px; color: #7b7f86; margin-bottom: 1px; }
.m-kop b { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 12px; }
.m-titel { font-size: 15px; font-weight: 600; }
.m-body { font-size: 15px; }
@keyframes melding {
  0%   { opacity: 0; transform: translateY(-40px); }
  12%  { opacity: 1; transform: none; }
  84%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* Prijsontwikkeling (PrijsontwikkelingWeergave.tsx) */
.g-top { background: #fff; padding: 20px; text-align: center; border-bottom: 1px solid #F0F0F0; }
.g-name { font-size: 18px; font-weight: 600; }
.g-brand { font-size: 13px; color: #888; margin-top: 2px; }
.g-price { font-size: 32px; font-weight: 700; color: #004481; margin-top: 10px; }
.g-range { display: flex; justify-content: center; gap: 8px; padding: 14px 0; }
.g-range span { padding: 7px 16px; border-radius: 16px; background: #EDEFF2; font-size: 13px; color: #555; }
.g-range .on { background: #004481; color: #fff; font-weight: 600; }
.g-card { background: #fff; margin: 0 16px; border-radius: 12px; padding: 8px 0; }
.g-chart { display: block; width: 100%; height: auto; font-size: 10px; fill: #9AA5B1; }
.g-chart path { fill: none; stroke: #004481; stroke-width: 3; }
.g-chart circle { fill: #004481; stroke: #004481; stroke-width: 2; }
.g-stats { display: flex; margin: 12px 16px 0; background: #fff; border-radius: 12px; }
.g-stats div { flex: 1; text-align: center; padding: 14px 0; }
.g-stats small { display: block; font-size: 12px; color: #9AA5B1; }
.g-stats b { display: block; font-size: 16px; font-weight: 600; margin-top: 3px; }
.g-stats b.op { color: #C0392B; }
.g-label { padding-bottom: 4px; }
.g-obs { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #EEE; }
.g-obs > div { flex: 1; }
.g-om { font-size: 14px; }
.g-od { font-size: 12px; color: #999; margin-top: 1px; }
.g-obs b { font-size: 14px; font-weight: 600; }

/* Wisselknoppen onder de telefoon */
.hero-phone { display: flex; flex-direction: column; align-items: flex-end; }
.phone-pijlen { display: flex; gap: 14px; justify-content: center; margin-top: 16px; width: 290px; }
.phone-pijlen button {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #cfe0f1; cursor: pointer; padding: 0;
  transition: background .2s, border-color .2s;
}
.phone-pijlen button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.phone-pijlen button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.phone-pijlen svg { width: 18px; height: 18px; }
.mock-note { text-align: right; font-size: .78rem; color: #9fc0e0; margin-top: 10px; }

/* ---------- Oplossingen (ondernemer) ---------- */
.oplossing {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  background: var(--tint); border-radius: var(--radius); padding: 44px;
}
.oplossing + .oplossing { margin-top: 24px; }
.oplossing.omgekeerd .o-beeld { order: -1; }
.o-label { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.oplossing h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
.oplossing p { color: #26374b; margin: 0 0 18px; }
.o-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.o-lijst li { position: relative; padding-left: 32px; font-weight: 600; color: var(--ink); }
.o-lijst li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.oplossing[hidden] { display: none; }
.o-beeld { background: var(--blue); border-radius: var(--radius); padding: 28px; }
.o-beeld svg { display: block; width: 100%; height: auto; max-width: 380px; margin: 0 auto; }

/* ---------- Lage drempel (ondernemer): staat onder beide branches ---------- */
.drempel { margin-top: 24px; background: var(--blue); color: var(--white); border-radius: var(--radius); padding: 44px; }
.drempel h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 28px; }
.d-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.d-nr {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255,255,255,.14); font-weight: 800; font-size: .95rem;
}
.d-item b { display: block; font-size: 1.05rem; margin: 12px 0 6px; }
.d-item p { color: #d7e6f5; margin: 0; font-size: .98rem; line-height: 1.55; }

/* ---------- Brug naar een andere doelgroep ----------
   Eén regel onder een sectie die de bezoeker doorstuurt naar de pagina waar zijn andere vraag
   beantwoord wordt (consument → zakelijk, zakelijk → retail & horeca). */
.brug {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 24px; padding: 22px 28px; border-radius: var(--radius); background: var(--tint);
}
.brug p { margin: 0; color: #26374b; }
.brug p b { color: var(--ink); }
.brug a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.brug a:hover { text-decoration: underline; }

/* Deelscherm (zakelijk): het deelmenu van iOS, zoals het eruit zou zien als de gebruiker een bon
   doorstuurt. Bestaat nog niet in de app — dit is een concept van de functie. */
.s-dim { position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: 1; }
.s-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: #F2F2F7;
  border-radius: 14px 14px 0 0; padding: 10px 16px 50px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.s-greep { width: 36px; height: 5px; border-radius: 3px; background: #C7C7CC; margin: 0 auto 16px; }
.s-kop { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.s-pdf { width: 38px; height: 48px; border-radius: 6px; background: #EDF4FF; color: #004481; font-size: 11px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; flex-shrink: 0; }
.s-kop b { display: block; font-size: 15px; font-weight: 600; color: #1A1A1A; }
.s-kop small { display: block; font-size: 13px; color: #888; }
.s-titel { font-size: 13px; color: #6D6D72; text-transform: uppercase; letter-spacing: .03em; margin: 4px 4px 8px; }
.s-groep { background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.s-optie { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 16px; color: #1A1A1A; border-bottom: 1px solid #EFEFF4; }
.s-optie:last-child { border-bottom: 0; }
.s-optie i { width: 30px; height: 30px; border-radius: 8px; background: #004481; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: 14px; font-weight: 700; }
.s-optie span { flex: 1; }
.s-optie em { font-style: normal; font-size: 13px; color: #8E8E93; }
.s-optie.on { background: #F0F7FF; }
.s-optie.on em { color: #1d7a4a; font-weight: 600; }

/* ---------- Tap-illustratie (ondernemer) ---------- */
.tap { position: relative; margin-left: auto; width: 100%; max-width: 380px; aspect-ratio: 1 / .95; }
.tap svg { width: 100%; height: 100%; }

/* ---------- Pagina's met tekst (privacy, 404, bedankt) ---------- */
.page-hero { padding: 130px 0 60px; }
.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; margin-top: 1.8em; }
.prose p, .prose li { color: #26374b; }
.prose ul { padding-left: 1.2em; }
.center-page { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; text-align: center; }
.center-page .wrap { max-width: 640px; }
.center-page .hero-actions { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-deep); color: #b8cbe0; padding: 44px 0; font-size: .95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.site-footer img { height: 24px; width: auto; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer .copy { flex-basis: 100%; margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: #8fa6bf; }
.site-footer .copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-footer .copy a:hover { color: var(--white); }

/* ---------- Responsief ---------- */
@media (max-width: 900px) {
  .hero-grid, .trust, .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .phone, .tap { margin: 0 auto; }
  .hero-phone { align-items: center; }
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefits li, .benefits li:nth-child(4), .benefits li:nth-child(5) { grid-column: span 1; }
  .benefits li:nth-child(5) { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; }
  .oplossing { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .drempel { padding: 28px; }
  .d-grid { grid-template-columns: 1fr; gap: 22px; }
  .oplossing.omgekeerd .o-beeld { order: 0; }
  .choices-drie { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .hero { padding: 110px 0 64px; }
  .site-header .brand img { height: 24px; }
  /* Drie menu-items passen niet naast het logo op een telefoon: het menu gaat eronder. */
  .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 18px; row-gap: 6px; }
  .nav { width: 100%; margin-left: -10px; gap: 2px; }
  .nav a { padding: 7px 10px; font-size: .88rem; }
  .hero { padding-top: 128px; }
  .choose { padding-top: 110px; }
  .brug { padding: 20px 22px; }
  .choices { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .benefits li:nth-child(5) { grid-column: auto; }
  .form { grid-template-columns: 1fr; padding: 22px; }
  .phone { width: 260px; --scale: .605; }
  .phone-pijlen { width: auto; }
  .mock-note { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}