/* =========================================================================
   InvoicePilot — Design System (gebaseerd op Channeliser)
   B2B SaaS: automatische Kaufland- & Bol.com-facturatie.
   Wit canvas, indigo primair, oranje accent. Inter overal.
   ========================================================================= */

/* Google-Fonts wordt via <link> in de layout-heads geladen (her-audit r6 #6) — niet meer via @import,
   dat render-blocking serialiseert ná het downloaden+parsen van dit CSS-bestand. preconnect staat in de heads. */

:root {
  /* Brand & accent — InvoicePilot navy + gold (per logo) */
  --primary: #0F172A;
  --primary-hover: #1E293B;
  --primary-light: #EEF2F8;
  --primary-soft: #334155;
  /* Brand wordmark accent (the "Pilot" half + logo flourish) */
  --brand-2: #F59E0B;
  --brand-2-soft: #FBBF24;
  --accent: #F59E0B;
  --accent-deep: #B45309;
  --accent-light: #FEF3C7;

  /* Surfaces */
  --canvas: #FFFFFF;
  --soft: #F7F8FC;
  --medium: #ECEEF5;
  --dark: #0F172A;

  /* Borders */
  --hairline: #E1E4ED;
  --hairline-strong: #C8CCDB;

  /* Text */
  --ink: #0D1321;
  --body: #2D3455;
  --muted: #6B7280;
  --muted-soft: #6D7380;   /* was #9CA3AF (~2.8:1, faalde WCAG AA) → ~4.6:1 op wit; gebruikt voor 11-13px secundaire tekst (review #41 a11y) */
  --on-dark: #E8EAF2;
  --on-dark-soft: rgba(232, 234, 242, 0.7);

  /* Semantic */
  --success: #059669;    --success-light: #D1FAE5;
  --warning: #D97706;    --warning-light: #FEF3C7;
  --error:   #DC2626;    --error-light:   #FEE2E2;
  --info:    #0284C7;    --info-light:    #E0F2FE;

  /* Fonts */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, monospace;

  /* Radii */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;  --r-pill: 9999px;

  /* Elevation */
  --elev-card:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --elev-hover: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --elev-modal: 0 20px 60px rgba(0,0,0,.18);
  --elev-brand: 0 4px 14px rgba(61,90,254,.30);

  /* Transitions */
  --t-base: 150ms ease;
  --t-slow: 200ms ease-out;
  --t-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --content-max: 1200px;
  --sidebar-w: 248px;
  --nav-h: 64px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--primary-light); color: var(--ink); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }
/* Skip-to-content link: off-screen tot toetsenbord-focus (WCAG 2.4.1 Bypass Blocks). */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0; font: 600 14px/1 var(--font-sans); text-decoration: none; }
.skip-link:focus { left: 0; }
.mono { font-family: var(--font-mono); }

/* ===== Layout helpers ===== */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section--soft { background: var(--soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { font: 600 12px/1 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.eyebrow.accent { color: var(--accent); }

/* ===== Type ===== */
.display-xl { font: 800 56px/1.05 var(--font-sans); letter-spacing: -1.6px; color: var(--ink); }
.display-lg { font: 700 36px/1.12 var(--font-sans); letter-spacing: -.7px; color: var(--ink); }
.display-md { font: 700 30px/1.2 var(--font-sans); letter-spacing: -.5px; color: var(--ink); }
.h2 { font: 700 34px/1.15 var(--font-sans); letter-spacing: -.6px; color: var(--ink); }
.h3 { font: 600 18px/1.3 var(--font-sans); color: var(--ink); }
.lead { font: 400 18px/1.6 var(--font-sans); color: var(--body); }
.muted { color: var(--muted); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer; border-radius: var(--r-sm);
  font: 600 15px/1 var(--font-sans); height: 40px; padding: 0 18px;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--elev-brand); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--signup { background: #1dc756; color: #fff; box-shadow: 0 4px 14px rgba(29,199,86,.32); }
.btn--signup:hover { background: #19b34c; }
.btn--secondary { background: #fff; color: var(--ink); border: 1px solid var(--hairline); }
.btn--secondary:hover { background: var(--soft); border-color: var(--hairline-strong); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--soft); }
.btn--white { background: #fff; color: var(--primary); box-shadow: none; }
.btn--white:hover { background: var(--primary-light); }
.btn--accent { background: var(--accent); color: var(--ink); box-shadow: 0 4px 14px rgba(245,158,11,.32); }
.btn--accent:hover { background: #E08C07; }
.btn--lg { height: 50px; padding: 0 26px; font-size: 16px; border-radius: 8px; }
.btn--xl { height: 54px; padding: 0 32px; font-size: 16px; border-radius: 9px; }
.btn--block { width: 100%; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn svg { width: 18px; height: 18px; }
.btn--sm svg { width: 16px; height: 16px; }

/* ===== Logo ===== */
.logo { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.logo__mark { width: 30px; height: 30px; border-radius: 8px; background: #fff url("/includes/img/beeldmerk.svg") center / 76% no-repeat; display: grid; place-items: center; }
.logo__mark svg { display: none; }
.logo__word { font: 700 19px/1 var(--font-sans); letter-spacing: -.4px; color: var(--ink); }
.logo__word b { color: var(--accent); font-weight: 700; }
.logo--lg .logo__word { font-size: 20px; }
.logo--light .logo__word { color: #fff; }
.logo--light .logo__word b { color: var(--brand-2-soft); }

/* ===== Badges / pills ===== */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font: 600 11px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; }
.badge--primary { background: var(--primary-light); color: var(--primary); }
.badge--accent { background: var(--accent); color: var(--ink); }
.badge--success { background: var(--success-light); color: var(--success); }
.badge--soft-accent { background: var(--accent-light); color: var(--accent-deep); }
.badge .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }

.pill-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--primary-light); color: var(--primary); font: 600 12px/1 var(--font-sans); letter-spacing: .2px; }
.pill-eyebrow svg { width: 15px; height: 15px; color: var(--accent); }

/* ===== Status chips ===== */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font: 600 11px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; }
.status .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.status--sent { background: var(--success-light); color: var(--success); }
.status--pending { background: var(--warning-light); color: var(--warning); }
.status--pending .dot { animation: if-pulse 1.1s ease infinite; }
.status--error { background: var(--error-light); color: var(--error); }
.status--active { background: var(--success-light); color: var(--success); }
.status--trial { background: var(--info-light); color: var(--info); }
.status--paused { background: var(--medium); color: var(--muted); }

/* ===== Marketplace + flag chips ===== */
.mp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--hairline); font: 600 12px/1 var(--font-sans); color: var(--body); }
.mp .mp__dot { width: 6px; height: 6px; border-radius: 2px; }
.mp--kaufland .mp__dot { background: #E30613; }
.mp--bol .mp__dot { background: #0000A4; }
.flag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: var(--soft); border: 1px solid var(--hairline); font: 700 10px/1 var(--font-sans); color: var(--body); letter-spacing: .3px; }
.flag--lg { width: 42px; height: 42px; font-size: 13px; border-radius: 8px; }

/* ===== Cards ===== */
.card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 24px; }
.card--hover { transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base); }
.card--hover:hover { box-shadow: var(--elev-hover); border-color: var(--hairline-strong); transform: translateY(-2px); }

/* ===== Nav (marketing) ===== */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hairline); }
.nav__inner { max-width: var(--content-max); margin: 0 auto; padding: 13px 24px; display: flex; align-items: center; gap: 34px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font: 500 14px/1.25 var(--font-sans); color: var(--muted); transition: color var(--t-base); }
.nav__links a:hover { color: var(--ink); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
.lang-toggle button { border: 0; background: transparent; cursor: pointer; padding: 4px 11px; border-radius: var(--r-pill); font: 500 13px/1.25 var(--font-sans); color: var(--muted); transition: all var(--t-base); }
.lang-toggle button.on { background: var(--primary-light); color: var(--primary); }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; }
.hero__blob { position: absolute; top: -120px; right: -80px; width: 560px; height: 560px; background: var(--soft); border-radius: var(--r-pill); z-index: 0; }
.hero__inner { max-width: var(--content-max); margin: 0 auto; padding: 84px 24px 72px; position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin: 0 0 18px; max-width: 600px; }
.hero .lead { max-width: 520px; margin-bottom: 28px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.hero__trust { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 var(--font-sans); color: var(--muted); }
.hero__trust .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--success); }

/* hero card */
.runcard { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(13,19,33,.10), 0 4px 12px rgba(13,19,33,.05); padding: 22px; }
.runcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.runcard__title { display: flex; align-items: center; gap: 9px; font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.runcard__title .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-light); display: grid; place-items: center; color: var(--primary); }
.runcard__title .ic svg { width: 17px; height: 17px; }
.runcard__rows { display: flex; flex-direction: column; gap: 9px; }
.runrow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 11px 13px; background: var(--soft); border-radius: 9px; }
.runrow__ic { width: 34px; height: 34px; border-radius: 7px; background: #fff; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--muted); }
.runrow__ic svg { width: 16px; height: 16px; }
.runrow__order { font: 600 14px/1.3 var(--font-mono); color: var(--ink); }
.runrow__meta { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }
.runcard__foot { font: 400 12px/1.4 var(--font-sans); color: var(--muted); padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--hairline); }

/* ===== Trust strip ===== */
.trust-strip { background: var(--soft); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 26px 0; }
.trust-strip__text { text-align: center; font: 500 14px/1.4 var(--font-sans); color: var(--muted); }

/* ===== VAT grid ===== */
.vat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vat-card { display: flex; align-items: center; gap: 14px; padding: 20px; }
.vat-card__rate { font: 700 24px/1 var(--font-sans); letter-spacing: -.5px; color: var(--ink); }
.vat-card__name { font: 500 13px/1.3 var(--font-sans); color: var(--body); margin-top: 3px; }
.vat-card__mp { font: 400 11px/1.3 var(--font-sans); color: var(--muted-soft); margin-top: 2px; }

/* ===== Steps ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { position: relative; padding: 26px; }
.step__num { position: absolute; top: 22px; right: 24px; font: 800 40px/1 var(--font-sans); color: var(--medium); }
.step__ic { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--primary-light); display: grid; place-items: center; margin-bottom: 18px; color: var(--primary); }
.step__ic svg { width: 22px; height: 22px; }
.step h3 { margin-bottom: 8px; }
.step p { font: 400 14px/1.55 var(--font-sans); color: var(--body); }

/* ===== Benefits ===== */
.bene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bene__ic { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--primary-light); display: grid; place-items: center; margin-bottom: 18px; color: var(--primary); }
.bene__ic svg { width: 22px; height: 22px; }
.bene h3 { font-size: 17px; margin-bottom: 8px; }
.bene p { font: 400 14px/1.55 var(--font-sans); color: var(--body); }

/* ===== Story ===== */
.story { background: var(--dark); border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.story__avatar { width: 96px; height: 96px; border-radius: var(--r-pill); background: var(--primary); display: grid; place-items: center; font: 700 30px/1 var(--font-sans); color: #fff; }
.story__person { text-align: center; margin-top: 14px; }
.story__person .name { font: 600 15px/1.3 var(--font-sans); color: #fff; }
.story__person .meta { font: 400 13px/1.4 var(--font-sans); color: var(--on-dark-soft); margin-top: 3px; }
.story__quote { font: 500 24px/1.5 var(--font-sans); letter-spacing: -.4px; color: #fff; }
.story__tag { display: inline-flex; padding: 4px 11px; border-radius: var(--r-pill); background: rgba(255,107,43,.16); color: var(--accent); font: 600 11px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; margin-bottom: 18px; }

/* ===== Testimonials ===== */
.tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tm { display: flex; flex-direction: column; gap: 18px; }
.tm p { font: 400 15px/1.6 var(--font-sans); color: var(--ink); flex: 1; }
.tm__person { display: flex; align-items: center; gap: 12px; }
.tm__avatar { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center; font: 600 14px/1 var(--font-sans); flex-shrink: 0; }
.tm__name { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.tm__loc { font: 400 12px/1.3 var(--font-sans); color: var(--muted); }

/* ===== Pricing ===== */
.ptier__name { font: 700 18px/1.2 var(--font-sans); color: var(--ink); }
.ptier__desc { font: 400 14px/1.4 var(--font-sans); color: var(--muted); margin: 4px 0 18px; }
.price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 780px; margin: 0 auto; align-items: start; }
.price-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 30px 28px; position: relative; }
.price-card--featured { border: 2px solid var(--accent); box-shadow: 0 14px 40px rgba(245,158,11,.18); }
.price-card__ribbon { position: absolute; top: -12px; left: 26px; background: var(--accent); color: var(--ink); font: 700 11px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); }
.price-card__plan { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font-sans); color: var(--ink); margin-bottom: 12px; }
.price-note { text-align: center; font: 400 14px/1.5 var(--font-sans); color: var(--muted); max-width: 520px; margin: 22px auto 0; }
.price-card__label { display: flex; align-items: center; justify-content: space-between; font: 600 14px/1 var(--font-sans); color: var(--muted); margin-bottom: 8px; }
.price-card__amount { display: flex; align-items: baseline; gap: 4px; }
.price-card__amount .num { font: 800 48px/1 var(--font-sans); letter-spacing: -1.4px; color: var(--ink); }
.price-card__amount .per { font: 500 16px/1 var(--font-sans); color: var(--muted); }
.price-card__fine { font: 400 13px/1.4 var(--font-sans); color: var(--muted-soft); margin-top: 6px; }
.price-card__divider { height: 1px; background: var(--hairline); margin: 24px 0; }
.price-feats { display: flex; flex-direction: column; gap: 13px; margin-bottom: 26px; }
.price-feat { display: flex; align-items: center; gap: 11px; font: 400 15px/1.4 var(--font-sans); color: var(--ink); }
.price-feat .chk { width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--success-light); display: grid; place-items: center; flex-shrink: 0; color: var(--success); }
.price-feat .chk svg { width: 14px; height: 14px; }
.price-card__guarantee { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font: 400 13px/1.4 var(--font-sans); color: var(--muted); }
.price-card__guarantee svg { width: 15px; height: 15px; }

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px 22px; cursor: pointer; transition: border-color var(--t-base); }
.faq.open { border-color: var(--hairline-strong); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq__q span { font: 600 16px/1.4 var(--font-sans); color: var(--ink); }
.faq__sign { color: var(--muted); flex-shrink: 0; display: grid; place-items: center; }
.faq.open .faq__sign { color: var(--primary); }
.faq__a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--t-slow), opacity var(--t-slow), margin var(--t-slow); }
.faq.open .faq__a { max-height: 260px; opacity: 1; margin-top: 12px; }
.faq__a p { font: 400 15px/1.6 var(--font-sans); color: var(--body); }

/* ===== Final CTA ===== */
.cta-band { background: var(--primary); border-radius: 20px; padding: 64px 56px; text-align: center; position: relative; overflow: hidden; }
.cta-band__blob1 { position: absolute; top: -60px; right: -40px; width: 300px; height: 300px; background: rgba(255,255,255,.06); border-radius: var(--r-pill); }
.cta-band__blob2 { position: absolute; bottom: -80px; left: -30px; width: 240px; height: 240px; background: rgba(255,255,255,.05); border-radius: var(--r-pill); }
.cta-band h2 { font: 800 40px/1.1 var(--font-sans); letter-spacing: -1px; color: #fff; margin-bottom: 24px; position: relative; }
.cta-band__points { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; position: relative; }
.cta-point { display: flex; align-items: center; gap: 8px; font: 500 15px/1.3 var(--font-sans); color: #fff; }
.cta-point .chk { width: 20px; height: 20px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); display: grid; place-items: center; }
.cta-point .chk svg { width: 13px; height: 13px; }

/* ===== Footer ===== */
.footer { background: var(--soft); border-top: 1px solid var(--hairline); }
.footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 60px 24px 32px; }
.footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer__tagline { font: 400 14px/1.6 var(--font-sans); color: var(--muted); max-width: 340px; margin-top: 14px; }
.footer__col h4 { font: 600 14px/1.4 var(--font-sans); color: var(--ink); margin-bottom: 14px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font: 400 14px/1.4 var(--font-sans); color: var(--muted); }
.footer__col a:hover { color: var(--ink); }
.footer__bottom { border-top: 1px solid var(--hairline); padding-top: 24px; font: 400 12px/1.4 var(--font-sans); color: var(--muted-soft); }

/* =========================================================================
   AUTH (login / signup)
   ========================================================================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth__brand { background: var(--dark); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth__brand-blob { position: absolute; bottom: -120px; right: -80px; width: 380px; height: 380px; background: rgba(61,90,254,.16); border-radius: var(--r-pill); }
.auth__headline { font: 700 30px/1.2 var(--font-sans); letter-spacing: -.6px; color: #fff; max-width: 380px; margin-bottom: 28px; position: relative; }
.auth__benefits { display: flex; flex-direction: column; gap: 16px; position: relative; }
.auth__benefit { display: flex; align-items: center; gap: 13px; }
.auth__benefit .ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.1); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.auth__benefit .ic svg { width: 17px; height: 17px; }
.auth__benefit span { font: 400 15px/1.4 var(--font-sans); color: var(--on-dark); }
.auth__secure { display: flex; align-items: center; gap: 8px; position: relative; font: 400 13px/1.4 var(--font-sans); color: var(--on-dark-soft); }
.auth__secure svg { width: 14px; height: 14px; }
.auth__form-wrap { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth__form { width: 100%; max-width: 380px; }
.auth__form h1 { font: 700 28px/1.2 var(--font-sans); letter-spacing: -.6px; margin-bottom: 8px; }
.auth__form .sub { font: 400 15px/1.5 var(--font-sans); color: var(--muted); margin-bottom: 28px; }
.auth__switch { text-align: center; margin-top: 22px; font: 400 14px/1.4 var(--font-sans); color: var(--muted); }
.auth__switch a { color: var(--primary); font-weight: 600; cursor: pointer; }
.auth__trial { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; font: 400 12px/1.4 var(--font-sans); color: var(--muted-soft); text-align: center; }

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field__label { font: 600 13px/1.4 var(--font-sans); color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.field__label a { font: 500 12px/1 var(--font-sans); color: var(--primary); cursor: pointer; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--muted-soft); pointer-events: none; }
.input-wrap.has-icon .input { padding-left: 42px; }
.input {
  width: 100%; height: 44px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font: 400 15px/1 var(--font-sans); padding: 0 13px;
  outline: none; transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input::placeholder { color: var(--muted-soft); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.input.error { border-color: var(--error); }
.input.error:focus { box-shadow: 0 0 0 3px var(--error-light); }
.input--mono { font-family: var(--font-mono); font-size: 14px; }
textarea.input { height: auto; min-height: 96px; padding: 11px 13px; resize: vertical; }
select.input { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
/* (.input-eye verwijderd — login/signup gebruiken nu het generieke .pw-field/data-pw-toggle, her-audit r11 #5) */
.field__error { font: 400 12px/1.4 var(--font-sans); color: var(--error); display: none; }
.field.invalid .field__error { display: block; }
.field.invalid .input { border-color: var(--error); }

/* =========================================================================
   ONBOARDING
   ========================================================================= */
.ob { min-height: 100vh; background: var(--soft); display: flex; flex-direction: column; }
.ob__top { background: #fff; border-bottom: 1px solid var(--hairline); }
.ob__top-inner { max-width: 760px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.ob__body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; }
.ob__card { width: 100%; max-width: 620px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--elev-card); padding: 40px; }
.steps-ind { display: flex; align-items: center; gap: 0; margin-bottom: 36px; }
.steps-ind__item { display: flex; align-items: center; gap: 9px; }
.steps-ind__dot { width: 28px; height: 28px; border-radius: var(--r-pill); display: grid; place-items: center; font: 600 13px/1 var(--font-sans); flex-shrink: 0; border: 2px solid var(--hairline); background: #fff; color: var(--muted-soft); }
.steps-ind__item.done .steps-ind__dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.steps-ind__item.active .steps-ind__dot { border-color: var(--primary); color: var(--primary); }
.steps-ind__label { font: 500 13px/1 var(--font-sans); color: var(--muted-soft); }
.steps-ind__item.active .steps-ind__label, .steps-ind__item.done .steps-ind__label { color: var(--ink); }
.steps-ind__bar { flex: 1; height: 2px; background: var(--hairline); margin: 0 12px; }
.steps-ind__item.done + .steps-ind__bar { background: var(--primary); }
.ob__step { display: none; animation: if-rise .35s ease both; }
.ob__step.active { display: block; }
.ob h2 { font: 700 24px/1.25 var(--font-sans); letter-spacing: -.4px; margin-bottom: 8px; }
.ob .ob__sub { font: 400 15px/1.6 var(--font-sans); color: var(--muted); margin-bottom: 28px; }
.ob__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.mp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mp-choice { display: flex; align-items: center; gap: 14px; padding: 18px; border: 2px solid var(--hairline); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-base), background var(--t-base); }
.mp-choice:hover { border-color: var(--hairline-strong); }
.mp-choice.on { border-color: var(--primary); background: var(--primary-light); }
.mp-choice__logo { width: 44px; height: 44px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--hairline); display: grid; place-items: center; font: 700 13px/1 var(--font-sans); }
.mp-choice__name { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.mp-choice__meta { font: 400 12px/1.3 var(--font-sans); color: var(--muted); margin-top: 2px; }
.ob__hint { display: flex; gap: 10px; padding: 14px 16px; background: var(--info-light); border-radius: var(--r-sm); font: 400 13px/1.5 var(--font-sans); color: #0C4A6E; margin-top: 16px; }
.ob__hint svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--info); margin-top: 1px; }
.conn-result { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--success-light); border-radius: var(--r-sm); font: 500 14px/1.4 var(--font-sans); color: var(--success); margin-top: 14px; }
.conn-result svg { width: 18px; height: 18px; }
.country-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.country-pick { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--hairline); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t-base), background var(--t-base); }
.country-pick:hover { border-color: var(--hairline-strong); }
.country-pick.on { border-color: var(--primary); background: var(--primary-light); }
.country-pick__check { width: 20px; height: 20px; border-radius: var(--r-xs); border: 2px solid var(--hairline-strong); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.country-pick.on .country-pick__check { background: var(--primary); border-color: var(--primary); }
.country-pick.on .country-pick__check svg { width: 13px; height: 13px; }
.country-pick:not(.on) .country-pick__check svg { display: none; }
.country-pick__name { font: 500 14px/1.3 var(--font-sans); color: var(--ink); flex: 1; }
.country-pick__vat { font: 400 12px/1.3 var(--font-mono); color: var(--muted); }
.ob__done { text-align: center; }
.ob__done-check { width: 72px; height: 72px; border-radius: var(--r-pill); background: var(--success-light); display: grid; place-items: center; margin: 0 auto 24px; color: var(--success); }
.ob__done-check svg { width: 36px; height: 36px; }
.ob__done-stats { display: flex; gap: 16px; justify-content: center; margin: 28px 0; }
.ob__done-stat { padding: 16px 24px; background: var(--soft); border-radius: var(--r-md); }
.ob__done-stat .v { font: 700 28px/1 var(--font-sans); color: var(--primary); }
.ob__done-stat .l { font: 400 12px/1.3 var(--font-sans); color: var(--muted); margin-top: 5px; }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { background: var(--dark); padding: 20px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar__logo { display: flex; align-items: center; gap: 7px; padding: 6px 8px; margin-bottom: 24px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); font: 500 14px/1 var(--font-sans); color: var(--on-dark-soft); cursor: pointer; transition: background var(--t-base), color var(--t-base); }
.sidebar__item svg { width: 20px; height: 20px; }
.sidebar__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar__item.active { background: var(--accent); color: var(--ink); }
.sidebar__section { font: 600 11px/1 var(--font-sans); letter-spacing: .4px; text-transform: uppercase; color: rgba(232,234,242,.4); padding: 8px 12px; margin-top: 16px; }
.sidebar__foot { margin-top: auto; }
.sidebar__user { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); }
.sidebar__user .avatar { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--primary); display: grid; place-items: center; font: 600 13px/1 var(--font-sans); color: #fff; flex-shrink: 0; }
.sidebar__user .name { font: 600 13px/1.3 var(--font-sans); color: #fff; }
.sidebar__user .plan { font: 400 11px/1.3 var(--font-sans); color: var(--on-dark-soft); }
.sidebar__user .out { margin-left: auto; color: var(--on-dark-soft); cursor: pointer; display: grid; place-items: center; }
.sidebar__user .out svg { width: 18px; height: 18px; }
.sidebar__me { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: inherit; cursor: pointer; }
.sidebar__me:hover .name { text-decoration: underline; }

.main { display: flex; flex-direction: column; min-width: 0; background: var(--soft); }
.topbar { background: #fff; border-bottom: 1px solid var(--hairline); padding: 0 32px; height: var(--nav-h); display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 20; }
.topbar__search { flex: 1; min-width: 0; max-width: 420px; position: relative; display: flex; align-items: center; }
.topbar__search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted-soft); }
.topbar__search input { width: 100%; height: 40px; border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 0 13px 0 38px; font: 400 14px/1 var(--font-sans); background: var(--soft); outline: none; transition: border-color var(--t-base), background var(--t-base); }
.topbar__search input:focus { border-color: var(--primary); background: #fff; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar__live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--success-light); color: var(--success); font: 600 12px/1 var(--font-sans); }
.topbar__live .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--success); animation: if-pulse 1.4s ease infinite; }
.topbar__icon { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: #fff; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.topbar__icon svg { width: 19px; height: 19px; }
/* Hamburger (alleen mobiel zichtbaar) + scrim achter het uitschuifpaneel */
.topbar__burger { display: none; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: #fff; color: var(--ink); cursor: pointer; }
.topbar__burger svg { width: 22px; height: 22px; }
.topbar__logo { display: none; align-items: center; gap: 8px; }
.app__scrim { display: none; position: fixed; inset: 0; background: rgba(13,19,33,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 90; }

.page { padding: 32px; max-width: 1280px; width: 100%; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page__title { font: 700 26px/1.2 var(--font-sans); letter-spacing: -.5px; }
.page__sub { font: 400 15px/1.5 var(--font-sans); color: var(--muted); margin-top: 5px; }
.page__actions { display: flex; gap: 10px; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.kpi { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 22px; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kpi__ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--primary-light); display: grid; place-items: center; color: var(--primary); }
.kpi__ic svg { width: 19px; height: 19px; }
.kpi__ic.accent { background: var(--accent-light); color: var(--accent); }
.kpi__ic.success { background: var(--success-light); color: var(--success); }
.kpi__ic.warning { background: var(--warning-light); color: var(--warning); }
.kpi__delta { font: 600 12px/1 var(--font-sans); padding: 3px 8px; border-radius: var(--r-pill); }
.kpi__delta.up { background: var(--success-light); color: var(--success); }
.kpi__delta.down { background: var(--error-light); color: var(--error); }
.kpi__value { font: 700 30px/1 var(--font-sans); letter-spacing: -.6px; color: var(--ink); }
.kpi__label { font: 400 13px/1.4 var(--font-sans); color: var(--muted); margin-top: 7px; }

/* Dashboard grid */
.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
/* Laat kolommen krimpen i.p.v. de brede tabel z'n min-content te laten opdringen */
.dash-grid > * { min-width: 0; }
.panel { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.panel__title { font: 600 15px/1.3 var(--font-sans); color: var(--ink); }
.panel__sub { font: 400 12px/1.3 var(--font-sans); color: var(--muted); margin-top: 2px; }
.panel__link { font: 600 13px/1 var(--font-sans); color: var(--primary); cursor: pointer; }
.panel__body { padding: 18px 22px; }

/* per-country bars */
.cbar { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; margin-bottom: 14px; }
.cbar:last-child { margin-bottom: 0; }
.cbar__track { height: 8px; background: var(--medium); border-radius: var(--r-pill); overflow: hidden; }
.cbar__fill { height: 100%; background: var(--primary); border-radius: var(--r-pill); animation: if-bar .6s ease both; }
.cbar__val { font: 600 13px/1 var(--font-mono); color: var(--ink); min-width: 48px; text-align: right; }

/* sync status */
.sync-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.sync-row:last-child { border-bottom: 0; }
.sync-row__label { display: flex; align-items: center; gap: 10px; font: 400 14px/1.3 var(--font-sans); color: var(--body); }
.sync-row__label svg { width: 17px; height: 17px; color: var(--muted); }
.sync-row__value { font: 600 13px/1.3 var(--font-sans); color: var(--ink); }

/* action item */
.action-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--warning-light); border-radius: var(--r-sm); margin-bottom: 10px; }
.action-item.err { background: var(--error-light); }
.action-item__ic { color: var(--warning); flex-shrink: 0; margin-top: 1px; }
.action-item.err .action-item__ic { color: var(--error); }
.action-item__ic svg { width: 18px; height: 18px; }
.action-item__title { font: 600 13px/1.4 var(--font-sans); color: var(--ink); }
.action-item__desc { font: 400 12px/1.4 var(--font-sans); color: var(--body); margin-top: 2px; }
.action-item__btn { margin-left: auto; font: 600 12px/1 var(--font-sans); color: var(--primary); cursor: pointer; white-space: nowrap; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px; text-align: center; color: var(--muted); }
.empty-state svg { width: 28px; height: 28px; color: var(--success); }
.empty-state span { font: 400 14px/1.4 var(--font-sans); }

/* =========================================================================
   TABLES
   ========================================================================= */
.table-wrap { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table thead th { text-align: left; font: 600 11px/1.4 var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); padding: 13px 18px; background: var(--soft); border-bottom: 1px solid var(--hairline-strong); white-space: nowrap; }
.table thead th.right, .table td.right { text-align: right; }
.table tbody td { padding: 14px 18px; border-bottom: 1px solid var(--hairline); font: 400 14px/1.4 var(--font-sans); color: var(--body); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-base); }
.table tbody tr:hover { background: var(--soft); }
.table .t-mono { font-family: var(--font-mono); color: var(--ink); font-size: 13px; }
.table .t-strong { font-weight: 600; color: var(--ink); }
.table .t-amount { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
.cell-country { display: flex; align-items: center; gap: 9px; }

/* Filter bar */
.filterbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.filterbar__search { position: relative; display: flex; align-items: center; min-width: 280px; flex: 1; max-width: 360px; }
.filterbar__search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--muted-soft); }
.filterbar__search input { width: 100%; height: 40px; border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 0 13px 0 38px; font: 400 14px/1 var(--font-sans); background: #fff; outline: none; }
.filterbar__search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.filterbar select { height: 40px; min-width: 150px; }
.filterbar__spacer { margin-left: auto; }
.result-count { font: 400 13px/1.4 var(--font-sans); color: var(--muted); margin-left: 4px; }

/* =========================================================================
   SETTINGS
   ========================================================================= */
.set-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 28px; }
.set-tab { padding: 11px 16px; border: 0; background: transparent; cursor: pointer; font: 500 14px/1 var(--font-sans); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-base), border-color var(--t-base); }
.set-tab:hover { color: var(--ink); }
.set-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.set-panel { display: none; }
.set-panel.active { display: block; animation: if-rise .3s ease both; }
.set-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 28px; max-width: 640px; margin-bottom: 18px; }
.set-card h3 { font: 600 17px/1.3 var(--font-sans); margin-bottom: 4px; }
.set-card .desc { font: 400 14px/1.5 var(--font-sans); color: var(--muted); margin-bottom: 22px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.set-row:last-of-type { border-bottom: 0; }
.set-row__info .t { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.set-row__info .d { font: 400 13px/1.4 var(--font-sans); color: var(--muted); margin-top: 3px; }
.key-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 12px; }
.key-row__logo { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--soft); border: 1px solid var(--hairline); display: grid; place-items: center; font: 700 12px/1 var(--font-sans); }
.key-row__name { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.key-row__key { font: 400 13px/1.3 var(--font-mono); color: var(--muted); margin-top: 3px; }

/* toggle switch */
.switch { position: relative; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--hairline-strong); cursor: pointer; transition: background var(--t-base); flex-shrink: 0; border: 0; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--t-base); }
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(18px); }

.plan-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; background: var(--primary-light); border: 1px solid #C7D0FF; border-radius: var(--r-md); }
.plan-card__name { font: 700 17px/1.3 var(--font-sans); color: var(--ink); }
.plan-card__meta { font: 400 13px/1.4 var(--font-sans); color: var(--body); margin-top: 4px; }
.plan-card__price { font: 700 22px/1 var(--font-sans); color: var(--primary); }

/* =========================================================================
   CHANNELS · BILLING · MODAL · GOOGLE
   ========================================================================= */
.channel-card { border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 16px; overflow: hidden; }
.channel-card__head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--soft); border-bottom: 1px solid var(--hairline); }
.channel-card__logo { width: 40px; height: 40px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--hairline); display: grid; place-items: center; font: 700 15px/1 var(--font-sans); flex-shrink: 0; }
.channel-card__name { font: 600 15px/1.2 var(--font-sans); color: var(--ink); }
.channel-card__meta { font: 400 12px/1.3 var(--font-sans); color: var(--muted); margin-top: 3px; }
.channel-card__price { font: 700 15px/1 var(--font-sans); color: var(--ink); white-space: nowrap; }
.channel-card__price small { font: 400 12px/1 var(--font-sans); color: var(--muted); }
.channel-card__keys { padding: 4px 18px; }
.channel-card__keys .key-row { border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 12px 0; margin: 0; gap: 12px; }
.channel-card__keys .key-row:last-child { border-bottom: 0; }
/* Kanaal-detail: klikbare landenrij (groep -> land) */
.ch-country { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--r-sm); text-decoration: none; transition: background var(--t-base); cursor: pointer; }
.ch-country:hover { background: var(--soft); }
.ch-country.on { background: var(--primary-light); }
.ch-country + .ch-country { border-top: 1px solid var(--hairline); border-radius: 0; }
.key-row__name { font: 600 14px/1.3 var(--font-sans); color: var(--ink); }
.key-row__key { font: 400 13px/1.3 var(--font-mono); color: var(--muted); margin-top: 3px; }

.bill-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.bill-item:last-child { border-bottom: 0; }
.bill-item__name { display: inline-flex; align-items: center; font: 500 14px/1.3 var(--font-sans); color: var(--ink); }
.bill-total { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 6px; border-top: 2px solid var(--hairline-strong); }
.bill-total .l { font: 700 15px/1 var(--font-sans); color: var(--ink); }
.bill-total .amt { font: 700 22px/1 var(--font-sans); color: var(--primary); }

.modal { position: fixed; inset: 0; z-index: 150; display: none; }
.modal.open { display: block; }
.modal__scrim { position: absolute; inset: 0; background: rgba(13,19,33,.42); animation: if-rise .2s ease; }
.modal__card { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 40px); max-width: 470px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--elev-modal); padding: 28px; animation: if-rise .25s ease both; }
.modal__title { font: 700 20px/1.3 var(--font-sans); color: var(--ink); margin-bottom: 6px; }
.modal__sub { font: 400 14px/1.5 var(--font-sans); color: var(--muted); margin-bottom: 22px; }
.modal__cost { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--primary-light); border-radius: var(--r-sm); margin: 20px 0 8px; }
.modal__cost .l { font: 500 13px/1.3 var(--font-sans); color: var(--body); }
.modal__cost .v { font: 700 17px/1 var(--font-sans); color: var(--primary); }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

.btn--google { background: #fff; border: 1px solid var(--hairline); color: var(--ink); box-shadow: none; }
.btn--google:hover { background: var(--soft); border-color: var(--hairline-strong); }
.btn--google svg { width: 18px; height: 18px; }
.auth__divider { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--muted-soft); font: 500 12px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.country-pick--radio .country-pick__check { border-radius: var(--r-pill); }

/* JSON payload viewer (admin invoice detail) */
.json-view { margin: 0; background: var(--dark); color: #E2E8F0; border-radius: var(--r-sm); padding: 18px; font: 400 12.5px/1.65 var(--font-mono); overflow-x: auto; white-space: pre; }

/* =========================================================================
   TOAST
   ========================================================================= */
.toast-host { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px 18px; min-width: 300px; box-shadow: var(--elev-modal); display: flex; align-items: center; gap: 11px; animation: if-toast var(--t-spring); }
.toast svg { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; }
.toast.err svg { color: var(--error); }
.toast span { font: 500 14px/1.4 var(--font-sans); color: var(--ink); }

/* =========================================================================
   ANIMATIONS + UTIL
   ========================================================================= */
@keyframes if-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } }
@keyframes if-spin { to { transform: rotate(360deg); } }
@keyframes if-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes if-toast { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes if-bar { from { width: 0 !important; } }
.spin { animation: if-spin 1s linear infinite; }
.fade-in { animation: if-rise .4s ease both; }
.hidden { display: none !important; }

/* =========================================================================
   LANDING VARIANTS (B & C) + variant switcher
   ========================================================================= */
.variant-switch { position: fixed; left: 16px; bottom: 16px; z-index: 120; display: flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-pill); box-shadow: var(--elev-hover); }
.variant-switch a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); font: 600 13px/1 var(--font-sans); color: var(--muted); }
.variant-switch a.on { background: var(--primary); color: #fff; }
.variant-switch a:hover:not(.on) { background: var(--soft); color: var(--ink); }

/* Variant B — dark centered hero */
.hero-dark { background: var(--dark); position: relative; overflow: hidden; }
.hero-dark__blob { position: absolute; top: -160px; left: 50%; transform: translateX(-50%); width: 760px; height: 520px; border-radius: var(--r-pill); background: rgba(61,90,254,.20); }
.hero-dark__inner { max-width: var(--content-max); margin: 0 auto; padding: 84px 24px 80px; position: relative; z-index: 1; text-align: center; }
.hero-dark h1 { color: #fff; max-width: 840px; margin: 18px auto 18px; }
.hero-dark .lead { color: var(--on-dark); max-width: 600px; margin: 0 auto 28px; }
.hero-dark .pill-eyebrow { background: rgba(255,255,255,.1); color: #fff; }
.hero-dark__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.hero-dark__trust { display: flex; align-items: center; gap: 8px; justify-content: center; font: 400 13px/1.4 var(--font-sans); color: var(--on-dark-soft); }
.hero-dark__trust .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--success); }
.hero-dark .runcard { max-width: 540px; margin: 48px auto 0; text-align: left; }

.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-cell { text-align: center; }
.stat-cell .v { font: 800 42px/1 var(--font-sans); letter-spacing: -1px; color: var(--primary); }
.stat-cell .l { font: 400 14px/1.4 var(--font-sans); color: var(--muted); margin-top: 8px; }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.timeline__item { padding: 0 22px; position: relative; text-align: center; }
.timeline__dot { width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--primary); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; position: relative; z-index: 1; }
.timeline__dot svg { width: 22px; height: 22px; }
.timeline__item:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 50%; width: 100%; height: 2px; background: var(--hairline); z-index: 0; }
.timeline h3 { margin-bottom: 8px; }
.timeline p { font: 400 14px/1.55 var(--font-sans); color: var(--body); }

/* Variant C — editorial / bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 196px; gap: 18px; }
.bento__tile { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 24px; background: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.bento__tile.span2 { grid-column: span 2; }
.bento__tile.tall { grid-row: span 2; }
.bento__tile.dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.bento__tile.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.bento__tile .big { font: 800 40px/1 var(--font-sans); letter-spacing: -1px; }
.bento__tile .lbl { font: 600 12px/1.2 var(--font-sans); letter-spacing: .2px; text-transform: uppercase; opacity: .75; }
.bento__ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--primary-light); color: var(--primary); display: grid; place-items: center; }
.bento__ic svg { width: 22px; height: 22px; }
.bento__flags { display: flex; flex-wrap: wrap; gap: 8px; }

.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 4px; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--r-pill); font: 600 13px/1 var(--font-sans); color: var(--ink); background: #fff; }
.hero-chip b { color: var(--primary); }

.bigquote { text-align: center; max-width: 820px; margin: 0 auto; }
.bigquote p { font: 500 30px/1.42 var(--font-sans); letter-spacing: -.5px; color: var(--ink); margin-bottom: 24px; }
.bigquote__who { display: flex; gap: 12px; align-items: center; justify-content: center; }

@media (max-width: 980px) {
  .stats-band { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 24px; }
  .timeline__item:not(:last-child)::after { display: none; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .bento__tile.span2, .bento__tile.tall { grid-column: auto; grid-row: auto; }
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .bigquote p { font-size: 24px; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .display-xl { font-size: 44px; letter-spacing: -1.2px; }
  .vat-grid, .bene-grid { grid-template-columns: 1fr 1fr; }
  .steps, .tm-grid { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; text-align: center; padding: 40px 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }

  /* App-shell: één kolom; de sidebar wordt een uitschuifbaar paneel (drawer) */
  .app { grid-template-columns: 1fr; }
  .topbar__burger { display: inline-grid; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 100;
    width: 264px; max-width: 86vw; height: 100vh; height: 100dvh;
    transform: translateX(-100%); transition: transform var(--t-slow);
    overflow-y: auto; box-shadow: var(--elev-modal);
  }
  .app.nav-open .sidebar { transform: translateX(0); }
  .app.nav-open .app__scrim { display: block; }
  /* brede tabel scrollt binnen z'n kaart i.p.v. de pagina te verbreden */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 600px) {
  .vat-grid, .bene-grid, .kpi-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .mp-choices, .country-grid { grid-template-columns: 1fr; }
  .ob__card, .set-card { padding: 24px; }
  /* App-shell op smal scherm: compactere topbar/pagina, zoekbalk verbergen */
  .topbar { padding: 0 14px; gap: 12px; }
  .topbar__search { display: none; }
  /* 'Live'-badge + taalschakelaar weg; logo gecentreerd in de balk */
  .topbar__live, .topbar .lang-toggle { display: none; }
  .topbar__logo { display: inline-flex; position: absolute; left: 50%; transform: translateX(-50%); }
  .page { padding: 20px 16px; }
  .page__head { margin-bottom: 20px; }
}

/* ===== Workspace-switcher (topbar) ===== */
.ws-switch { position: relative; }
.ws-switch__btn { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 10px; background: #fff; cursor: pointer; max-width: 260px; }
.ws-switch__btn:hover { background: var(--soft); }
.ws-switch__logo { width: 26px; height: 26px; border-radius: 7px; background: var(--primary); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--font-sans); flex-shrink: 0; }
.ws-switch__name { font: 600 14px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-switch__btn svg { color: var(--muted); flex-shrink: 0; }
.ws-switch__menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 264px; background: #fff; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--elev-card); padding: 8px; z-index: 80; display: none; }
.ws-switch.open .ws-switch__menu { display: block; }
.ws-switch__label { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 8px 10px 6px; }
.ws-switch__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.ws-switch__item:hover { background: var(--soft); }
.ws-switch__item.on { background: var(--primary-light); }
.ws-switch__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ws-switch__iname { font: 600 14px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-switch__plan { font: 500 12px/1.2 var(--font-sans); color: var(--muted); text-transform: capitalize; }
.ws-switch__check { flex-shrink: 0; }
.ws-switch__add { display: flex; align-items: center; gap: 8px; padding: 10px; margin-top: 6px; border-top: 1px solid var(--hairline); color: var(--primary); font: 600 13px/1 var(--font-sans); text-decoration: none; }
.ws-switch__add:hover { background: var(--soft); }

/* Workspace-switcher in de (donkere) sidebar */
.ws-switch--side { margin: 6px 0 14px; }
.ws-switch--side .ws-switch__btn { width: 100%; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.ws-switch--side .ws-switch__btn:hover { background: rgba(255,255,255,.10); }
.ws-switch--side .ws-switch__name { color: #fff; flex: 1; text-align: left; }
.ws-switch--side .ws-switch__btn > svg { color: rgba(255,255,255,.6); margin-left: auto; }
.ws-switch--side .ws-switch__menu { left: 0; right: 0; min-width: 0; }

/* Toggle-switch op basis van een echte checkbox (verstuurt mee in formulieren) */
.toggle { display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { width: 42px; height: 24px; border-radius: 12px; background: var(--hairline); position: relative; transition: background var(--t-base); flex-shrink: 0; }
.toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13,19,33,.25); transition: transform var(--t-base); }
.toggle input:checked + .toggle__track { background: var(--primary); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }

/* 6-vakjes OTP-invoer (2FA) */
.otp { display: flex; gap: 8px; }
.otp__box { width: 44px; height: 52px; text-align: center; font: 600 22px/1 var(--font-mono, ui-monospace, Menlo, Consolas, monospace); border: 1px solid var(--hairline, #E1E4ED); border-radius: 10px; background: #fff; color: var(--ink, #0F172A); }
.otp__box:focus { outline: none; border-color: var(--primary, #2F6BFF); box-shadow: 0 0 0 3px rgba(47, 107, 255, .15); }

/* Filterbar: dropdowns naast elkaar i.p.v. volle breedte (anders wrappen ze) */
.filterbar select.input { width: auto; min-width: 150px; flex: 0 0 auto; }
.filterbar__spacer { margin-left: auto; }

/* Toegankelijkheid: respecteer "verminder beweging" — animaties/transities vrijwel uit (review #41 a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Flash/alert-componenten (her-audit #6): fout en succes visueel duidelijk onderscheiden.
   Werd nergens gedefinieerd → alle flash/foutmeldingen renderden kaal + identiek (login/2FA/reset). */
.alert { padding: 11px 14px; border-radius: var(--r-sm, 8px); border: 1px solid transparent;
  font: 500 13.5px/1.45 var(--font-sans, system-ui, sans-serif); margin-bottom: 14px; }
.alert--success { background: #E7F6EE; border-color: #BFE6CF; color: #0A5235; }
.alert--warning { background: #FFF6E5; border-color: #F5D89A; color: #7A4E00; }
.alert--error   { background: #FDECEC; border-color: #F5C2C2; color: #9B1C1C; }

/* Meldingen-dropdown (verplaatst uit layouts/App.cfm, her-audit r7 #6) — getokeniseerd; off-brand blauw
   (#2F6BFF/#F4F8FF) → brand-tokens en het ~2.8:1-grijs (#9AA1B2) → var(--muted-soft) (~4.6:1, WCAG-AA). */
.notif{ position:relative; display:inline-flex }
.notif__badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--error); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px #fff }
.notif__panel{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:88vw; background:#fff; border:1px solid #E2E5EC; border-radius:12px; box-shadow:0 14px 36px rgba(20,24,31,.18); z-index:60; overflow:hidden }
.notif__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #EEF0F5; font-weight:700; font-size:13px; color:var(--primary) }
.notif__readall{ border:0; background:none; color:var(--primary); font-size:12px; font-weight:600; cursor:pointer }
.notif__list{ max-height:380px; overflow:auto }
.notif__item{ display:block; width:100%; text-align:left; border:0; background:none; padding:11px 14px; border-bottom:1px solid #F2F4F8; cursor:pointer; border-left:3px solid transparent }
.notif__item:hover{ background:#F7F8FB }
.notif__item.unread{ background:var(--primary-light) }
.notif__item.sev-warning{ border-left-color:var(--accent) }
.notif__item.sev-critical{ border-left-color:var(--error) }
.notif__item .t{ font-weight:600; font-size:13px; color:var(--primary); margin-bottom:2px }
.notif__item .b{ font-size:12px; color:var(--muted); line-height:1.45 }
.notif__item .ago{ font-size:11px; color:var(--muted-soft); margin-top:4px }
/* Unread (her-audit r8 #7): niet-kleur-indicator (leading dot, naast de achtergrond — WCAG 1.4.1) + iets
   donkerder tekst zodat .b/.ago op de getinte --primary-light-achtergrond ≥4.5:1 contrast houden (WCAG AA). */
.notif__item.unread .t::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--accent); vertical-align:middle }
.notif__item.unread .b{ color:var(--primary-soft) }
.notif__item.unread .ago{ color:var(--primary-soft) }   /* op de getinte --primary-light-bg ≥4.5:1 (her-audit r9: --muted bleef op 4.3:1) */
.notif__empty{ padding:26px 14px; text-align:center; color:var(--muted-soft); font-size:13px }
/* Screen-reader-only (visueel verborgen, wél voorgelezen) — o.a. de "Ongelezen"-prefix (her-audit r8 #7). */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Generiek wachtwoord-tonen/verbergen (oog-icoon) — werkt op elk veld in een .pw-field met pw-toggle.js.
   Tegen typefout-uitsluiting bij inloggen/wijzigen/resetten (NIST 800-63B: tonen i.p.v. 2× intypen). */
.pw-field{ position:relative; }
.pw-field > input{ padding-right:42px; }
.pw-field > button[data-pw-toggle]{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0;
  background:none; color:var(--muted-soft); cursor:pointer; padding:6px; display:grid; place-items:center; border-radius:8px; line-height:0; }
.pw-field > button[data-pw-toggle]:hover{ color:var(--body); }
.pw-field > button[data-pw-toggle]:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; }

/* Verbinding-testen-knop: resultaatkleur na de test (naast de toast) */
.btn--test-ok { background: var(--success-light) !important; color: var(--success) !important; border-color: var(--success) !important; }
.btn--test-err { background: var(--error-light) !important; color: var(--error) !important; border-color: var(--error) !important; }

/* Onboarding: landen-stap */
.ob-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 6px; }
.ob-country { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; font: 500 14px/1.2 Inter, sans-serif; color: var(--ink); background: #fff; transition: border-color var(--t-base); }
.ob-country:hover { border-color: var(--hairline-strong); }
.ob-country input { accent-color: var(--primary); width: 16px; height: 16px; }
.ob-countries.invalid .ob-country { border-color: var(--error); }

/* hidden-attribuut wint van display:grid (anders schemeren de landen van de andere marktplaats door) */
.ob-countries[hidden] { display: none; }