/* CommentCenter colors — values copied verbatim from the landing-page sections.
   Base palette first, then semantic aliases. Light is the default (:root);
   dark is applied by adding .dark or [data-theme="dark"] to any wrapper. */
:root{
  /* base — light paper stack */
  --white:#ffffff;
  --paper:#f4f4f2;        /* sunken panel */
  --paper-2:#f9f9f7;      /* footer plate */
  --paper-3:#fafafa;      /* app chrome (topbar, rail) */
  --paper-4:#ebebe8;      /* bar / meter track */
  --ink:#141414;
  --ink-muted:#6b6b6b;
  --ink-faint:#6e6e6e;   /* 5,2:1 op wit — was #9a9a9a, 2,6:1 */
  --btn-grey:#ececea;

  /* base — dark zinc stack */
  --zinc-950:#09090b;
  --zinc-925:#101013;
  --zinc-900:#151517;
  --zinc-880:#1b1b1f;
  --zinc-870:#1e1e23;
  --zinc-850:#1c1c20;
  --zinc-800:#26262b;
  --zinc-50:#fafafa;
  --zinc-400:#a1a1aa;
  --zinc-500:#71717a;

  /* base — hue ramps (600-level = light theme, 400/500-level = dark theme) */
  --blue-600:#2867d4;
  --blue-500:#3b82f6;
  --green-600:#137a3a;
  --green-400:#4ade80;
  --amber-700:#a34a08;
  --amber-400:#fbbf24;
  --violet-700:#6d28d9;
  --violet-400:#a78bfa;
  --rose-700:#be123c;
  --rose-400:#fb7185;
  --grey-500:#63636d;
  --grey-400:#a1a1aa;
  --facebook:#1877f2;

  /* semantic — surfaces */
  --bg:var(--white);
  --surface-sunken:var(--paper);   /* big rounded section panels */
  --surface-card:var(--white);     /* cards, composer, tiers */
  --surface-chrome:var(--paper-3); /* app topbar + rail */
  --surface-footer:var(--paper-2);
  --surface-raised:var(--white);
  --track:rgba(0,0,0,.11);
  --bar-track:var(--paper-4);

  /* semantic — text */
  --text:var(--ink);
  --text-muted:var(--ink-muted);
  --text-faint:var(--ink-faint);
  --text-on-accent:#ffffff;

  /* semantic — lines */
  --border:rgba(0,0,0,.08);
  --border-soft:rgba(0,0,0,.06);

  /* semantic — accent */
  --accent:var(--blue-600);
  --mark-tile:#09090b;
  --accent-solid:var(--blue-600);
  --accent-hover:#1e57ba;
  --accent-soft:rgba(40,103,212,.10);
  --accent-tile:rgba(40,103,212,.09);

  /* semantic — classification (the five categories) */
  --cat-hot:var(--green-600);        --cat-hot-bg:rgba(19,122,58,.12);
  --cat-interest:var(--amber-700);   --cat-interest-bg:rgba(163,74,8,.11);
  --cat-question:var(--violet-700);  --cat-question-bg:rgba(109,40,217,.11);
  --cat-complaint:var(--rose-700);   --cat-complaint-bg:rgba(190,18,60,.11);
  --cat-spam:var(--grey-500);        --cat-spam-bg:rgba(99,99,109,.12);

  /* semantic — buttons */
  --btn-secondary-bg:var(--btn-grey);
  --btn-secondary-text:var(--ink);
  --btn-invert-bg:var(--ink);
  --btn-invert-text:var(--white);
}
.dark,[data-theme="dark"]{
  --bg:var(--zinc-950);
  --surface-sunken:var(--zinc-900);
  --surface-card:var(--zinc-850);
  --surface-chrome:var(--zinc-880);
  --surface-footer:var(--zinc-925);
  --surface-raised:var(--zinc-870);
  --track:rgba(255,255,255,.14);
  --bar-track:var(--zinc-800);

  --text:var(--zinc-50);
  --text-muted:var(--zinc-400);
  --text-faint:#8b8b93;  /* 5,8:1 op de donkere grond — was zinc-500, 4,0:1 */

  --border:rgba(255,255,255,.10);
  --border-soft:rgba(255,255,255,.07);

  --accent:var(--blue-500);
  --mark-tile:#26262b;
  --accent-solid:var(--blue-600);
  --accent-hover:#7cb3ff;
  --accent-soft:rgba(59,130,246,.16);
  --accent-tile:rgba(59,130,246,.14);

  --cat-hot:var(--green-400);        --cat-hot-bg:rgba(74,222,128,.13);
  --cat-interest:var(--amber-400);   --cat-interest-bg:rgba(251,191,36,.12);
  --cat-question:var(--violet-400);  --cat-question-bg:rgba(167,139,250,.13);
  --cat-complaint:var(--rose-400);   --cat-complaint-bg:rgba(251,113,133,.13);
  --cat-spam:var(--grey-400);        --cat-spam-bg:rgba(161,161,170,.13);

  --btn-secondary-bg:var(--zinc-800);
  --btn-secondary-text:var(--zinc-50);
  --btn-invert-bg:var(--zinc-50);
  --btn-invert-text:var(--zinc-950);
}

/* CommentCenter type — DM Sans for everything except numbers, JetBrains Mono for numbers.
   Sizes are the literal values used on the landing page; do not round them to a grid. */
:root{
  --font-sans:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* display + headings */
  --fs-hero:64px;
  --lh-hero:1.05; /* @kind other */
  --ls-hero:-.035em; /* @kind other */
  --fs-close:56px;
  --lh-close:1.04; /* @kind other */
  --ls-close:-.036em; /* @kind other */
  --fs-h2:46px;
  --lh-h2:1.06; /* @kind other */
  --ls-h2:-.033em; /* @kind other */
  --fs-h2-panel:44px;
  --lh-h2-panel:1.08; /* @kind other */
  --ls-h2-panel:-.03em; /* @kind other */
  --fs-h3:19px;
  --lh-h3:1.3; /* @kind other */
  --ls-h3:-.018em; /* @kind other */
  --fs-h4:16.5px;
  --ls-h4:-.014em; /* @kind other */

  /* prose */
  --fs-lead:18px;
  --lh-lead:1.55; /* @kind other */
  --fs-sub:16.5px;
  --fs-body:15px;
  --lh-body:1.55; /* @kind other */
  --fs-body-sm:14.5px;
  --lh-body-sm:1.62; /* @kind other */
  --fs-meta:13px;
  --fs-micro:12.5px;
  --fs-fine:11.5px;
  --fs-tiny:10.5px;

  /* tracking loopt mee met de graad: negatief bij groot, positief bij klein */
  --ls-body-sm:.004em; /* @kind other */
  --ls-meta:.008em;    /* @kind other */
  --ls-micro:.011em;   /* @kind other */
  --ls-fine:.015em;    /* @kind other */
  --ls-tiny:.02em;     /* @kind other */

  /* labels */
  --fs-eyebrow:11px;
  --ls-eyebrow:.14em; /* @kind other */
  --fs-rail:9.5px;
  --ls-rail:.13em; /* @kind other */
  --fs-tag:9.5px;
  --ls-tag:.05em; /* @kind other */

  /* mono numerals */
  --fs-num-xl:112px;
  --lh-num-xl:.92; /* @kind other */
  --fs-num-lg:84px;
  --lh-num-lg:.94; /* @kind other */
  --fs-num-md:52px;
  --lh-num-md:1; /* @kind other */
  --fs-num-sm:42px;
  --ls-num:-.05em; /* @kind other */

  /* weights: 400 body, 500 = every UI label and button, 700 = headings + numbers */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-bold:700; /* @kind other */
}

/* CommentCenter spacing + layout. Section padding is generous, in-card padding is tight. */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:26px; --space-7:32px; --space-8:44px;
  --space-9:56px; --space-10:64px; --space-11:72px; --space-12:92px;

  --page-max:1120px;   /* content column, every section */
  --page-pad:32px;     /* horizontal gutter */
  --section-y:64px;    /* vertical section rhythm (56-64px) */
  --scroll-off:84px;   /* plakbalk + lucht, voor scroll-margin op ankers */
  --panel-pad:52px 56px 50px;
  --gap-grid:18px;     /* 3-up card grids */
  --gap-bento:20px;    /* 2x2 bento */
  --gap-split:72px;    /* two-column split (text | numbers) */
}

/* CommentCenter radii + elevation. Pills for anything clickable, soft rectangles for containers. */
:root{
  --r-tag:4px;        /* classification badge */
  --r-mark:4px;       /* logo mark */
  --r-row:8px;        /* rail rows, inner boxes */
  --r-tile:12px;      /* trust icon tile */
  --r-card:12px;      /* small card */
  --r-frame:16px;     /* app frame */
  --r-card-lg:16px;   /* composer card */
  --r-panel:22px;     /* bento tile / newsletter */
  --r-panel-lg:24px;  /* full-width sunken panel */
  --r-pill:999px;

  --border-w:1px;

  /* two-part shadows: a tight contact shadow plus a wide soft lift */
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.07);
  --shadow-lift:0 2px 5px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.09);
  --shadow-float:0 2px 6px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.11);
  --shadow-accent:0 1px 2px rgba(43,111,224,.2), 0 8px 22px rgba(43,111,224,.22);
  --shadow-accent-lg:0 1px 2px rgba(43,111,224,.2), 0 10px 26px rgba(43,111,224,.24);
  --shadow-launcher:0 6px 24px rgba(43,111,224,.4);
  --shadow-knob:0 1px 4px rgba(0,0,0,.15);

  /* Motion — durations en curves overgenomen uit de M3 motion-spec.
     Regel die het verschil maakt: binnenkomen vertraagt, weggaan versnelt,
     en weggaan is korter dan binnenkomen. Nooit ease of ease-in-out. */
  --ease-std:cubic-bezier(.2,0,0,1);          /* @kind other */
  --ease-std-in:cubic-bezier(.3,0,1,1);       /* @kind other — leaving */
  --ease-std-out:cubic-bezier(0,0,0,1);       /* @kind other — entering */
  --ease-emph:cubic-bezier(.2,0,0,1);         /* @kind other */
  --ease-emph-in:cubic-bezier(.3,0,.8,.15);   /* @kind other — leaving */
  --ease-emph-out:cubic-bezier(.05,.7,.1,1);  /* @kind other — entering */

  --dur-1:50ms;  --dur-2:100ms; --dur-3:150ms; --dur-4:200ms;   /* @kind other — kleine state-changes */
  --dur-m1:250ms; --dur-m2:300ms; --dur-m3:350ms; --dur-m4:400ms; /* @kind other — iets komt of gaat */
  --dur-l1:450ms; --dur-l2:500ms;                                 /* @kind other — groot vlak */

  /* State layers: een laag van de voorgrondkleur op de component, geen kleurwissel.
     focus en pressed zijn bewust dezelfde waarde. */
  --state-hover:.08;  /* @kind other */
  --state-focus:.12;  /* @kind other */
  --state-press:.12;  /* @kind other */

  /* aliassen — bestaande regels blijven werken, nu op de M3-ramp */
  --ease:var(--ease-std);      /* @kind other */
  --dur-fast:var(--dur-2);     /* @kind other */
  --dur:var(--dur-3);          /* @kind other */
  --dur-slow:var(--dur-m2);    /* @kind other */
}
.dark,[data-theme="dark"]{
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.6);
  --shadow-lift:0 2px 5px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.6);
  --shadow-float:0 2px 6px rgba(0,0,0,.5), 0 28px 70px rgba(0,0,0,.65);
}

/* Minimal element defaults. Everything else is component-level. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-optical-sizing:auto;text-rendering:optimizeLegibility;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-bold);color:var(--text);text-wrap:pretty}
h1{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4{font-size:var(--fs-h4);letter-spacing:var(--ls-h4)}
p{margin:0}
a{color:var(--accent);text-decoration:none;font-weight:var(--fw-medium);transition:color var(--dur-2) var(--ease-std)}
[id]{scroll-margin-top:var(--scroll-off)}
a:hover{color:var(--accent-hover)}
button{font-family:inherit}
code,kbd,samp{font-family:var(--font-mono)}
::selection{background:var(--accent-soft);color:var(--text)}

/* CommentCenter landing — alleen tokens uit het design system. Geen losse hex. */

/* ---------- basis ---------- */
.cc-wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.cc-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-faint)}
.cc-panel{background:var(--surface-sunken);border-radius:var(--r-panel-lg)}
.cc-center{text-align:center}
.cc-sub{font-size:var(--fs-sub);line-height:var(--lh-lead);color:var(--text-muted)}
em:empty{display:none}

/* ---------- knoppen ---------- */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-medium);letter-spacing:-.008em;padding:13px 24px;border:0;border-radius:var(--r-pill);cursor:pointer;position:relative;transition:transform var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std)}
/* State layer: de voorgrondkleur van de knop zelf, over de achtergrond heen.
   Werkt daardoor op primair, secundair en invert zonder aparte hover-kleuren. */
.cc-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-std)}
.cc-btn:hover::after{opacity:var(--state-hover)}
.cc-btn:focus-visible::after{opacity:var(--state-focus)}
.cc-btn:active::after{opacity:var(--state-press)}
.cc-btn:hover{transform:translateY(-1px)}
.cc-btn:active{transform:translateY(0);transition-duration:var(--dur-1)}
.cc-btn-p:hover{box-shadow:var(--shadow-accent-lg)}
.cc-btn-p:active{box-shadow:var(--shadow-accent)}
.cc-btn-p{background:var(--accent-solid);color:var(--text-on-accent);box-shadow:var(--shadow-accent)}
.cc-btn-s{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}
.cc-btn-i{background:var(--btn-invert-bg);color:var(--btn-invert-text);white-space:nowrap}
.cc-btn-sm{font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);padding:10px 18px}
.cc-btn-lg{font-size:15.5px;padding:14px 30px;box-shadow:var(--shadow-accent-lg)}

/* Tussen de klik en de app zit een gat. app.commentcenter.nl tekent zijn
   inlogscherm in de browser, dus het eerste antwoord van de server bevat geen
   letter van wat je zo te zien krijgt: ruim een seconde lang blijft het daar
   donker en leeg. En de pressed-state van de knop is al weg zodra de vinger
   loskomt. Op het duurste moment van de hele trechter gebeurt er dus zichtbaar
   niets, en twijfelt iemand of zijn klik wel is aangekomen.

   Dit versnelt de app niet. Het maakt alleen dat de klik aankomt: de knop
   houdt zijn ingedrukte staat vast tot de sprong gemaakt is, en bovenaan loopt
   een streep door in de richting waarin de pagina gaat. */
/* Het statuslaagje lag over het label in plaats van eronder. Een pseudo-element
   met inset 0 en z-index auto schildert boven een kale tekstknoop, dus bij
   hover, focus en indrukken trok er een waas over de letters -- precies op de
   momenten dat een knop juist scherper moet worden. Met een eigen stapel-
   context valt het laagje nu tussen de achtergrond en het label. */
.cc-btn,.cc-theme,.cc-burger{isolation:isolate}
.cc-btn::after,.cc-theme::after,.cc-burger::after{z-index:-1}

/* De knop ging een pixel omhoog bij hover, en bij indrukken gebeurde er niets:
   :active zette de hover-lift alleen terug. Een pixel op een knop van
   negenenveertig is geen reactie maar ruis, en indrukken zonder antwoord voelt
   als een dode knop.

   Nu zakt de knop in en worden zijn hoeken korter. De vorm zelf antwoordt op de
   vinger -- dat is de beweging die M3 aan een knop geeft, en het is het enige
   moment in de hele trechter waarop het product iets terugzegt voordat de
   volgende pagina er is. Die ingedrukte vorm blijft staan zolang de sprong naar
   de app loopt, zodat het laatste wat je ziet je eigen klik is. */
.cc-btn{transition:transform var(--dur-3) var(--ease-emph-out),box-shadow var(--dur-3) var(--ease-std),border-radius var(--dur-3) var(--ease-emph-out)}
.cc-btn:hover{transform:translateY(-2px)}
.cc-btn:active,.cc-btn.is-going{transform:translateY(0) scale(.955);border-radius:14px;transition-duration:var(--dur-1)}
/* Bewust geen statuslaag tijdens de sprong. Twaalf procent inkt over een witte
   knop maakt hem grijs, en een grijze knop leest als uitgeschakeld -- precies
   het tegenovergestelde van wat er gebeurt. De ingedrukte vorm zegt het al, en
   de streep bovenaan zegt de rest. */
.cc-btn.is-going{pointer-events:none}
.cc-theme,.cc-burger{transition:color var(--dur-2) var(--ease-std),transform var(--dur-2) var(--ease-emph-out)}
.cc-theme:active,.cc-burger:active{transform:scale(.88)}
.cc-prog{position:fixed;top:0;left:0;height:3px;width:0;border-radius:0 3px 3px 0;background:var(--accent-solid);z-index:62;pointer-events:none;transition:width 1.4s var(--ease-emph-out)}
.cc-prog.on{width:88%}

/* ---------- nav ---------- */
.cc-nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--border-soft)}
.cc-nav-in{max-width:var(--page-max);margin:0 auto;padding:12px var(--page-pad);display:flex;align-items:center;gap:28px}
.cc-lockup{display:flex;align-items:center;gap:9px;font-weight:var(--fw-bold);color:var(--text);letter-spacing:-.01em}
.cc-word{color:var(--text)}.cc-word span{color:var(--accent)}
.cc-mark{width:19px;height:19px;display:block;flex:none}.cc-mark .tile{fill:var(--mark-tile)}.cc-mark .acc{fill:var(--blue-500)}.cc-mark .mut{fill:var(--grey-400);fill-opacity:.34}

.cc-nav .cc-lockup{font-size:15px}
.cc-nav-links{display:flex;gap:22px}
.cc-nav-links a{font-size:var(--fs-meta);letter-spacing:var(--ls-meta);font-weight:var(--fw-medium);color:var(--text-muted)}
.cc-nav-links a{transition:color var(--dur-2) var(--ease-std)}
.cc-nav-links a:hover{color:var(--text)}
.cc-nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.cc-theme{width:34px;height:34px;border:0;border-radius:var(--r-pill);background:var(--btn-secondary-bg);color:var(--text-muted);display:grid;place-items:center;cursor:pointer;flex:none;position:relative;transition:color var(--dur-2) var(--ease-std)}
/* Visueel 34px, aanraakvlak 44px — het vlak groeit, de knop niet. */
.cc-theme::before{content:"";position:absolute;inset:-5px;border-radius:inherit}
.cc-theme::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-std)}
.cc-theme:hover{color:var(--text)}
.cc-theme:hover::after{opacity:var(--state-hover)}
.cc-theme:focus-visible::after{opacity:var(--state-focus)}
.cc-theme:active::after{opacity:var(--state-press)}
.cc-theme svg{width:16px;height:16px}
[data-theme="dark"] .cc-theme .i-moon,.cc-theme .i-sun{display:none}
[data-theme="dark"] .cc-theme .i-sun{display:block}
/* Onder 760px verdwenen de vier links zonder vervanging: de hele site was op
   telefoon alleen nog scrollbaar. Ze komen terug achter een knop. */
.cc-burger{display:none;width:34px;height:34px;border:0;border-radius:var(--r-pill);background:var(--btn-secondary-bg);color:var(--text-muted);cursor:pointer;flex:none;position:relative;padding:0}
/* Visueel 34px, aanraakvlak 44px — zelfde truc als .cc-theme. */
.cc-burger::before{content:"";position:absolute;inset:-5px;border-radius:inherit}
.cc-burger::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-std)}
.cc-burger:hover{color:var(--text)}
.cc-burger:hover::after{opacity:var(--state-hover)}
.cc-burger:focus-visible::after{opacity:var(--state-focus)}
.cc-burger:active::after{opacity:var(--state-press)}
.cc-burger i{position:absolute;z-index:1;left:50%;top:50%;width:15px;height:1.5px;margin-left:-7.5px;border-radius:1px;background:currentColor;transition:transform var(--dur-m1) var(--ease-emph-out),opacity var(--dur-2) var(--ease-std)}
.cc-burger i:nth-child(1){transform:translateY(-4px)}
.cc-burger i:nth-child(2){transform:translateY(3px)}
.cc-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(0) rotate(45deg)}
.cc-burger[aria-expanded="true"] i:nth-child(2){transform:translateY(0) rotate(-45deg)}

/* Sluiten gaat sneller dan openen: wachten op iets dat je net wegklikte is de
   vervelendste beweging in een interface. */
.cc-menu{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border-soft);box-shadow:var(--shadow-card);overflow:hidden;max-height:0;visibility:hidden;transition:max-height var(--dur-4) var(--ease-emph-in),visibility 0s linear var(--dur-4)}
.cc-nav.open .cc-menu{max-height:320px;visibility:visible;transition:max-height var(--dur-m2) var(--ease-emph-out),visibility 0s}
.cc-menu-in{max-width:var(--page-max);margin:0 auto;padding:6px var(--page-pad) 14px;display:flex;flex-direction:column}
.cc-menu a{display:flex;align-items:center;min-height:44px;font-size:15px;font-weight:var(--fw-medium);color:var(--text-muted);border-top:1px solid var(--border-soft)}
.cc-menu a:first-child{border-top:0}
.cc-menu a:active{color:var(--text)}

@media(max-width:760px){.cc-nav-links{display:none}.cc-burger{display:block}}
/* Boven 760px staan de links weer in de balk; het paneel mag dan nooit open
   blijven hangen. */
@media(min-width:761px){.cc-nav.open .cc-menu{max-height:0;visibility:hidden}}
@media(max-width:420px){
  .cc-nav-in{gap:10px;padding-left:16px;padding-right:16px}
  .cc-nav .cc-lockup{font-size:14px;gap:7px}
  .cc-nav-right .cc-btn{padding:9px 13px;font-size:13px}
}
/* Onder 340px (SE, of gewoon ingezoomd) wint het merkteken van het woord. */
@media(max-width:340px){.cc-nav .cc-word{display:none}}

/* ---------- hero ---------- */
.cc-hero{padding:56px 0 60px;text-align:center}
.cc-pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);font-weight:var(--fw-medium);padding:6px 14px;border-radius:var(--r-pill);letter-spacing:-.005em}
.cc-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cc-h1{margin-top:26px;font-size:clamp(34px,7.4vw,var(--fs-hero))}
.cc-h1 b{color:var(--accent);font-weight:inherit}
.cc-lead{margin:20px auto 0;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-muted);max-width:30em}
.cc-cta{margin-top:30px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cc-trustline{margin-top:16px;display:inline-flex;align-items:flex-start;gap:7px;font-size:var(--fs-meta);letter-spacing:var(--ls-meta);color:var(--text-faint);text-align:left}
.cc-trustline svg{width:14px;height:14px;flex:none;opacity:.85;margin-top:3px}

/* ---------- classificatiebadge (sectie 3 + demo) ---------- */
.cc-tag{font-size:var(--fs-tag);font-weight:var(--fw-bold);letter-spacing:var(--ls-tag);text-transform:uppercase;padding:2px 8px;border-radius:var(--r-tag);flex:none;width:74px;text-align:center}
.cc-tag-hot{background:var(--cat-hot-bg);color:var(--cat-hot)}
.cc-tag-interest{background:var(--cat-interest-bg);color:var(--cat-interest)}
.cc-tag-question{background:var(--cat-question-bg);color:var(--cat-question)}

/* ---------- sectie 2, de rekening ---------- */
.cc-sec{padding:var(--section-y) 0}
.cc-rekening{padding:56px 0 60px}
.cc-split{padding:72px 56px 66px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-10);align-items:center}
.cc-h2-panel{font-size:var(--fs-h2-panel);line-height:var(--lh-h2-panel);letter-spacing:var(--ls-h2-panel);max-width:12ch}
.cc-split .cc-eyebrow{margin-bottom:20px}
.cc-split-sub{margin-top:20px;font-size:16px;line-height:1.6;color:var(--text-muted);max-width:34ch}
.cc-num{text-align:right}
.cc-num .cc-eyebrow{margin-bottom:14px}
.cc-big{font-family:var(--font-mono);font-size:var(--fs-num-xl);line-height:var(--lh-num-xl);font-weight:var(--fw-bold);color:var(--text);letter-spacing:-.055em}
.cc-big i{font-style:normal;margin-right:.16em;font-weight:var(--fw-medium);color:var(--text-muted)}
.cc-num-s{margin-top:20px;font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);line-height:var(--lh-body);color:var(--text-muted)}
.cc-num-s b{color:var(--text);font-weight:var(--fw-medium)}
.cc-num-f{margin-top:22px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--text-faint);display:flex;justify-content:flex-end;gap:22px;align-items:baseline;flex-wrap:wrap}
.cc-num-f a{font-size:var(--fs-meta);letter-spacing:var(--ls-meta)}
@media(max-width:900px){.cc-split{grid-template-columns:minmax(0,1fr);gap:36px;padding:52px 34px 48px}.cc-num,.cc-num-f{text-align:left;justify-content:flex-start}.cc-big{font-size:72px}.cc-h2-panel{max-width:none}}
@media(max-width:520px){.cc-split{padding:40px 24px 38px}.cc-big{font-size:58px}}

/* ---------- sectie 3, in handeling (richting A) ---------- */
.cc-hand{padding:58px 0 62px}
.cc-hand-in{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:52px 0 56px}
.cc-hand-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
.cc-hand-head h2{font-size:clamp(30px,5.2vw,var(--fs-h2-panel));line-height:var(--lh-h2-panel);letter-spacing:var(--ls-h2-panel);margin-top:16px;max-width:20ch}
.cc-hand-hint{font-size:var(--fs-meta);letter-spacing:var(--ls-meta);color:var(--text-faint);white-space:nowrap;padding-bottom:6px}
.cc-hand-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--space-10);align-items:start}
.cc-verbs{display:flex;flex-direction:column}
.cc-verb{display:flex;align-items:baseline;gap:18px;padding:14px 0;border:0;border-bottom:1px solid var(--border-soft);background:none;font-family:inherit;text-align:left;cursor:pointer}
.cc-verb:first-child{border-top:1px solid var(--border-soft)}
.cc-verb-n{font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--text-faint);width:22px;flex:none}
.cc-verb-t{font-size:clamp(26px,5vw,38px);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1.1;color:var(--text-faint);transition:color var(--dur-3) var(--ease-std)}
.cc-verb:hover .cc-verb-t{color:var(--text-muted)}
.cc-verb[aria-selected="true"] .cc-verb-t{color:var(--text)}
.cc-stage{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--r-card-lg);box-shadow:var(--shadow-card);padding:26px 26px 24px;min-height:300px}
.cc-stage-l{font-size:var(--fs-fine);letter-spacing:var(--ls-fine);font-weight:var(--fw-medium);letter-spacing:var(--ls-rail);text-transform:uppercase;color:var(--text-faint);margin-bottom:18px}
.cc-pane{display:none}
.cc-pane.on{display:block}
.cc-pane-q{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);line-height:1.5;color:var(--text-faint);padding-left:12px;border-left:2px solid var(--border);margin-bottom:16px}
.cc-pane-box{background:var(--surface-sunken);border-radius:var(--r-card);padding:14px 16px;font-size:var(--fs-body);line-height:1.55;color:var(--text)}
.cc-pane-row{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.cc-pane-row .cc-btn{font-size:14px;padding:10px 18px}
.cc-pane-chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);font-weight:var(--fw-medium);color:var(--accent);background:var(--accent-soft);padding:5px 12px;border-radius:var(--r-pill)}
.cc-pane-note{margin-top:14px;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);line-height:1.5;color:var(--text-faint)}
.cc-pane-score{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.cc-pane-score b{font-family:var(--font-mono);font-size:32px;font-weight:var(--fw-bold);letter-spacing:var(--ls-num);color:var(--text)}
.cc-pane-score span{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);line-height:1.45;color:var(--text-muted);max-width:24ch}
.cc-pane-score .cc-tag{width:auto}
.cc-pane-check{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:var(--fs-body);color:var(--text)}
.cc-pane-check i{width:16px;height:16px;border-radius:4px;background:var(--accent);flex:none;position:relative;font-style:normal}
.cc-pane-check i::after{content:"";position:absolute;left:5.5px;top:3px;width:4px;height:7px;border:solid var(--text-on-accent);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.cc-pane-check em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--text-faint)}
.cc-file{display:flex;align-items:center;gap:14px;background:var(--surface-sunken);border-radius:var(--r-card);padding:16px}
.cc-file-i{width:34px;height:42px;border-radius:4px;background:var(--surface-card);border:1px solid var(--border);flex:none;display:grid;place-items:center;font-family:var(--font-mono);font-size:9px;font-weight:var(--fw-bold);color:var(--text-faint)}
.cc-file-n{display:block;font-family:var(--font-mono);font-size:var(--fs-body);font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--text)}
.cc-file-s{display:block;margin-top:3px;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--text-faint)}
@media(max-width:900px){.cc-hand-grid{grid-template-columns:minmax(0,1fr);gap:34px}.cc-hand-head{display:block}.cc-hand-hint{display:none}.cc-hand-head h2{max-width:none}}

/* ---------- sectie 4, bewijs ---------- */
.cc-bewijs{padding:var(--section-y) 0 68px}
.cc-head{text-align:center;margin:0 auto 46px;max-width:none}
.cc-head .cc-eyebrow{margin-bottom:18px}
.cc-head h2{font-size:clamp(30px,5.6vw,var(--fs-h2))}
.cc-head .cc-sub{margin:18px auto 0;max-width:50ch}
.cc-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid)}
.cc-card{background:var(--surface-sunken);border-radius:var(--r-panel);padding:30px 28px 26px;display:flex;flex-direction:column}
.cc-num-md{font-family:var(--font-mono);font-size:var(--fs-num-md);line-height:var(--lh-num-md);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);color:var(--text)}
.cc-num-md em{font-style:normal;font-size:26px;font-weight:var(--fw-medium);color:var(--text-faint);margin-left:2px}
.cc-card-lab{margin-top:12px;font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);font-weight:var(--fw-medium);line-height:1.45;color:var(--text)}
.cc-quote{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--border-soft);font-size:14px;line-height:var(--lh-body);color:var(--text-muted);flex:1}
.cc-who{margin-top:16px;font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--text-faint)}
.cc-who b{display:block;font-weight:var(--fw-medium);color:var(--text-muted)}
.cc-foot-note{margin-top:26px;text-align:center;font-size:var(--fs-meta);letter-spacing:var(--ls-meta);color:var(--text-faint)}
@media(max-width:900px){.cc-grid3{grid-template-columns:minmax(0,1fr)}}

/* ---------- sectie 5, rekenmodule + prijzen ---------- */
.cc-calc{padding:52px 56px 50px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:var(--gap-split);align-items:start}
.cc-calc .cc-eyebrow{margin-bottom:18px}
.cc-calc h2{font-size:var(--fs-h2-panel);line-height:var(--lh-h2-panel);letter-spacing:var(--ls-h2-panel);max-width:13ch}
.cc-calc-sub{margin-top:16px;font-size:15.5px;line-height:1.6;color:var(--text-muted);max-width:36ch}
.cc-fields{margin-top:38px;display:flex;flex-direction:column;gap:26px}
.cc-f-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.cc-f-l{font-size:13.5px;font-weight:var(--fw-medium);color:var(--text)}
.cc-f-v{font-family:var(--font-mono);font-size:16px;font-weight:var(--fw-medium);color:var(--text);letter-spacing:-.02em}
.cc-f-h{margin-top:7px;font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--text-faint)}
.cc-slider{position:relative;height:18px}
.cc-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.cc-track{position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;border-radius:var(--r-pill);background:var(--track);pointer-events:none}
.cc-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,46%);border-radius:var(--r-pill);background:var(--accent)}
.cc-knob{position:absolute;top:50%;left:var(--p,46%);width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:50%;background:var(--surface-raised);border:1.5px solid var(--accent);box-shadow:var(--shadow-knob)}
.cc-range:focus-visible+.cc-track .cc-knob{box-shadow:0 0 0 4px var(--accent-soft)}
.cc-chain{border-top:1px solid var(--border-soft)}
.cc-step{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--border-soft)}
.cc-step-n{font-family:var(--font-mono);font-size:17px;font-weight:var(--fw-medium);color:var(--text);width:96px;flex:none;letter-spacing:-.02em}
.cc-step-l{font-size:13.5px;color:var(--text-muted);flex:1;min-width:0}
.cc-step-a{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);flex:none}
.cc-out{margin-top:30px}
.cc-out .cc-eyebrow{margin-bottom:12px}
.cc-num-lg{font-family:var(--font-mono);font-size:var(--fs-num-lg);line-height:var(--lh-num-lg);font-weight:var(--fw-bold);color:var(--text);letter-spacing:var(--ls-num)}
.cc-num-lg i{font-style:normal;margin-right:.16em;font-weight:var(--fw-medium);color:var(--text-muted)}
.cc-out-s{margin-top:16px;font-size:14px;line-height:var(--lh-body);color:var(--text-muted);max-width:42ch}
.cc-out-s b{color:var(--text);font-weight:var(--fw-medium)}
.cc-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:var(--fs-fine);letter-spacing:var(--ls-fine);line-height:1.65;color:var(--text-faint);max-width:52ch}
.cc-calc-cta{margin-top:22px}
@media(max-width:900px){.cc-calc{grid-template-columns:minmax(0,1fr);gap:38px;padding:44px 34px 42px}.cc-calc h2{max-width:none}.cc-num-lg{font-size:64px}}
@media(max-width:520px){.cc-calc{padding:36px 24px 34px}.cc-num-lg{font-size:52px}.cc-step-n{width:74px}.cc-step-a{display:none}
  /* .cc-btn-i staat op nowrap; laat dit label wel afbreken als het ooit groeit. */
  .cc-calc-cta{white-space:normal}}

.cc-prijzen{padding:var(--section-y) 0 0}
.cc-prijzen-head{margin-top:var(--space-12)}
.cc-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid);margin:44px auto 0;max-width:760px;align-items:start}
.cc-tier{background:var(--surface-sunken);border-radius:var(--r-panel);padding:28px 26px 26px;position:relative;display:flex;flex-direction:column}
.cc-tier.on{background:var(--surface-card);border:1px solid var(--accent);box-shadow:var(--shadow-lift);padding:32px 26px 30px}
.cc-tier-badge{position:absolute;top:-11px;left:26px;background:var(--accent-solid);color:var(--text-on-accent);font-size:var(--fs-tiny);letter-spacing:var(--ls-tiny);font-weight:var(--fw-medium);letter-spacing:.02em;padding:4px 11px;border-radius:var(--r-pill)}
.cc-tier-n{font-size:15px;font-weight:var(--fw-bold);color:var(--text)}
.cc-tier-d{margin-top:5px;font-size:var(--fs-meta);letter-spacing:var(--ls-meta);line-height:1.5;color:var(--text-muted);min-height:39px}
.cc-price{margin-top:18px;display:flex;align-items:baseline;gap:7px}
.cc-price b{font-family:var(--font-mono);font-size:var(--fs-num-sm);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);color:var(--text)}
.cc-price span{font-size:var(--fs-meta);letter-spacing:var(--ls-meta);color:var(--text-faint)}
/* De oprichtersprijs staat direct onder het bedrag, want hij hoort bij het
   bedrag: 29 is een besluit, geen marktwaarde. Mono, want het is een feit. */
.cc-tier-be{margin-top:5px;font-size:12px;line-height:1.5;color:var(--text-faint)}
.cc-tier-be i{font-style:normal;color:var(--accent);font-weight:var(--fw-bold)}
.cc-tier .cc-btn{margin-top:20px;width:100%;font-size:14px;padding:11px 18px}
/* ── BETAALTERMIJN ─────────────────────────────────────────────────────────
   Een schakelaar boven de kaarten, niet een tweede knop eronder. Twee knoppen
   onder elkaar in dezelfde kaart vechten om dezelfde klik; hierboven is het
   een instelling die de kaart aanpast, en blijft er onder de prijs precies
   een ding te doen. */
.cc-term-row{display:flex;justify-content:center;margin:26px auto 0;max-width:760px}
.cc-term{position:relative;display:inline-flex;padding:3px;border-radius:var(--r-pill);background:var(--surface-sunken)}
/* M3 segmented button: de selectie is een indicator die verschuift, niet twee
   achtergronden die om beurten aan- en uitknipperen. Wat je moet zien is dat
   er iets van links naar rechts ging -- dat is de hele boodschap van een
   schakelaar. JS zet breedte en positie op de actieve knop. */
.cc-term-ind{position:absolute;top:3px;left:0;width:0;height:calc(100% - 6px);border-radius:var(--r-pill);
  background:var(--surface-card);box-shadow:var(--shadow-lift);
  transition:transform var(--dur-m2) var(--ease-emph-out),width var(--dur-m2) var(--ease-emph-out)}
/* Bij het plaatsen op de eerste render en bij resize mag hij niet komen
   aanglijden vanaf nul. Dan is het geen schakeling, alleen een sprong. */
.cc-term-ind.cc-noanim{transition:none}
.cc-term-b{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  padding:7px 14px;border-radius:var(--r-pill);background:transparent;color:var(--text-faint);
  font:inherit;font-size:13px;font-weight:var(--fw-medium);letter-spacing:-.005em;white-space:nowrap;
  transition:color var(--dur-m1) var(--ease-std)}
/* Een state layer over de knop, geen kleurwissel -- zelfde patroon als elke
   andere knop hier. Font-weight blijft bewust gelijk: werd de actieve knop
   vetter, dan wordt hij breder, schuift de andere knop opzij en wiebelt de
   hele schakelaar bij elke klik. */
.cc-term-b::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-std)}
.cc-term-b:hover{color:var(--text)}
.cc-term-b:hover::after{opacity:var(--state-hover)}
.cc-term-b:active::after{opacity:var(--state-press)}
.cc-term-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cc-term-b[aria-pressed="true"]{color:var(--text)}
/* De winst hoort op de knop te staan waar hij te halen is, niet in een zin
   eronder die je pas leest nadat je al gekozen hebt. */
.cc-term-b i{font-style:normal;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.01em;
  padding:2px 7px;border-radius:var(--r-pill);color:var(--text);background:var(--accent-soft)}
/* De kaart wisselt van inhoud, niet van plek. Fade-through: het oude gaat kort
   en snel omhoog weg, het nieuwe komt van onder terug met de trage staart van
   de emphasized-curve. Zonder dit knippert een prijs van 29 naar 290 zonder
   dat je doorhebt dat het jouw klik was die dat deed. */
[data-swap]{transition:opacity var(--dur-m1) var(--ease-emph-out),transform var(--dur-m1) var(--ease-emph-out)}
[data-swap].cc-out{opacity:0;transform:translateY(-5px);
  transition-duration:var(--dur-2);transition-timing-function:var(--ease-std-in)}
[data-swap].cc-in{opacity:0;transform:translateY(6px);transition:none}
.cc-price b[data-swap],.cc-price span[data-swap]{display:inline-block}
@media (max-width:760px){
  .cc-term-row{margin-top:24px}
  .cc-term-b{min-height:40px}
}
@media (prefers-reduced-motion:reduce){
  .cc-term-ind,.cc-term-b,.cc-term-b::after,[data-swap]{transition:none}
}
.cc-tier-fine{margin-top:9px;text-align:center;font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--text-faint)}
/* Twee losse beloftes onder een prijs. Past er maar een op een regel, dan
   hoort de breuk tussen de twee te vallen en niet ergens midden in de
   tweede. Vandaar nowrap op de clausule zelf; de punt blijft met een
   harde spatie aan de eerste vastzitten. */
.cc-tier-fine i{font-style:normal;white-space:nowrap}
.cc-tier-list{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:9px}
/* De bullet stond als flex-item naast de tekst, en daardoor werd elke <b> in
   de zin een eigen flex-kolom: "5.000 comments" links, "per maand" ernaast,
   met een gat ertussen. Op desktop bleef dat onzichtbaar omdat de regels kort
   waren; op 375px brak elke bullet met een vetgedrukt getal in twee kolommen.
   De punt hoort geen kolom te zijn -- hij hoort in de marge. */
.cc-tier-list div{font-size:var(--fs-meta);letter-spacing:var(--ls-meta);line-height:1.45;color:var(--text-muted);position:relative;padding-left:14px}
.cc-tier-list div::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
.cc-tier-list b{color:var(--text);font-weight:var(--fw-medium)}
.cc-taxes{margin-top:20px;text-align:center;font-size:12px;line-height:1.55;color:var(--text-faint)}
@media(max-width:815px){.cc-tiers{grid-template-columns:minmax(0,1fr)}.cc-tier.on{order:-1;margin-top:11px}.cc-tier-d{min-height:0}}

/* ---------- trust ---------- */
.cc-trust{padding:8px 0 44px}
.cc-tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;padding:34px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.cc-ti{display:flex;gap:14px;align-items:flex-start}
.cc-tic{width:38px;height:38px;border-radius:var(--r-tile);background:var(--accent-tile);color:var(--accent);flex:none;display:grid;place-items:center}
.cc-tic svg{width:20px;height:20px}
.cc-ti p{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);line-height:1.5;color:var(--text-muted)}
.cc-ti b{display:block;font-size:14px;font-weight:var(--fw-bold);color:var(--text);margin-bottom:4px;letter-spacing:-.012em}
@media(max-width:900px){.cc-tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}}
@media(max-width:520px){.cc-tgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ ---------- */
.cc-faq-panel{padding:44px 48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.cc-fq-q{font-size:var(--fs-h4);font-weight:var(--fw-bold);letter-spacing:var(--ls-h4);color:var(--text);line-height:1.35;margin-bottom:10px}
.cc-fq-a{font-size:var(--fs-body-sm);letter-spacing:var(--ls-body-sm);line-height:var(--lh-body-sm);color:var(--text-muted)}
.cc-fq-a b{color:var(--text);font-weight:var(--fw-medium)}
.cc-fmore{margin-top:24px;text-align:center;font-size:13.5px;color:var(--text-faint)}
@media(max-width:800px){.cc-faq-panel{grid-template-columns:minmax(0,1fr);gap:30px;padding:36px 26px}}

/* ---------- slot ---------- */
.cc-magnet{padding:0 0 var(--section-y)}
.cc-mag-in{background:var(--surface-sunken);border-radius:var(--r-panel-lg);padding:46px 44px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:center}
.cc-mag-copy,.cc-mag-form{min-width:0}
.cc-mag-copy h2{font-size:clamp(25px,3.4vw,33px);line-height:1.18;letter-spacing:-.02em;margin:10px 0 0;max-width:20ch}
.cc-mag-copy h2 em{font-style:normal;color:var(--accent)}
.cc-mag-copy .cc-sub{margin-top:14px;font-size:15.5px;max-width:46ch}
.cc-mag-label{display:block;font-size:var(--fs-fine);letter-spacing:var(--ls-fine);color:var(--text-faint);margin-bottom:9px}
.cc-mag-row{display:flex;gap:10px}
.cc-mag-input{flex:1;min-width:0;font-family:inherit;font-size:15px;color:var(--text);background:var(--surface-card);border:1px solid var(--border);border-radius:var(--r-pill);padding:13px 18px;transition:border-color var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std)}
.cc-mag-input::placeholder{color:var(--text-faint)}
.cc-mag-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cc-mag-input[aria-invalid="true"]{border-color:var(--cat-complaint)}
.cc-mag-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cc-mag-note,.cc-mag-msg{margin-top:12px;font-size:13px;line-height:1.55;color:var(--text-faint)}
.cc-mag-note a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.cc-mag-msg{color:var(--text);font-weight:var(--fw-medium)}
.cc-mag-form.is-sent .cc-mag-label,.cc-mag-form.is-sent .cc-mag-row,.cc-mag-form.is-sent .cc-mag-note{display:none}
@media(max-width:860px){.cc-mag-in{grid-template-columns:1fr;gap:26px;padding:34px 24px}}
@media(max-width:600px){.cc-magnet{padding-bottom:56px}.cc-mag-row{flex-direction:column}.cc-mag-row .cc-btn{width:100%}}
.cc-close{text-align:center;padding:86px 0 92px}
.cc-close h2{font-size:clamp(32px,6.6vw,var(--fs-close));line-height:var(--lh-close);letter-spacing:var(--ls-close);max-width:16ch;margin:0 auto}
.cc-close h2 em{font-style:normal;color:var(--accent)}
.cc-close .cc-sub{margin:20px auto 0;font-size:17.5px;max-width:48ch}
.cc-close .cc-btn{margin-top:30px}
.cc-close .cc-trustline{display:flex;justify-content:center;margin-top:16px}
@media(max-width:600px){.cc-close{padding:60px 0 68px}}

/* ---------- footer ---------- */
.cc-footer{background:var(--surface-footer);border-top:1px solid var(--border-soft);padding:52px 0 26px}
.cc-fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.cc-ftag{font-size:var(--fs-meta);letter-spacing:var(--ls-meta);line-height:var(--lh-body);color:var(--text-muted);max-width:32ch}
.cc-lockup-f{margin-bottom:12px;font-size:14px}
.cc-lockup-f .cc-mark{width:20px;height:20px}
.cc-stack{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.cc-chip{display:flex;align-items:center;gap:8px;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--text-muted)}
.cc-fb{width:20px;height:20px;border-radius:50%;background:var(--facebook);flex:none;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:var(--fw-bold);line-height:1}
.cc-chip .cc-fb{width:16px;height:16px;font-size:10px}
.cc-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--text-muted);flex:none;position:relative}
.cc-check::after{content:"";position:absolute;left:4.5px;top:3px;width:4px;height:7px;border:solid var(--text-muted);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.cc-fh{font-size:var(--fs-tiny);letter-spacing:var(--ls-tiny);font-weight:var(--fw-medium);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}
.cc-flist{display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--text-muted)}
.cc-flist a{color:var(--text-muted);font-weight:var(--fw-normal)}
.cc-flist a:hover{color:var(--text)}
.cc-fbot{margin-top:44px;padding-top:20px;border-top:1px solid var(--border-soft);display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--text-faint)}
.cc-fbot{align-items:center}
.cc-fbot .r{margin-left:auto}
/* Thema hoort bij de kleine lettertjes, niet naast de CTA. */
.cc-fbot .cc-theme{width:30px;height:30px;margin:-5px 0}
@media(min-width:761px){.cc-fbot .cc-theme{display:none}}
@media(max-width:760px){.cc-nav-right .cc-theme{display:none}}
.cc-fbot .cc-theme::before{inset:-7px}
.cc-fbot .cc-theme svg{width:15px;height:15px}
@media(max-width:900px){.cc-fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  /* Drie groepen in twee kolommen laat er altijd een over. Contact heeft maar
     twee links, dus die neemt de hele breedte met beide naast elkaar. */
  .cc-fcols>:first-child,.cc-fcols>:last-child{grid-column:1/-1}
  .cc-fcols>:last-child .cc-flist{flex-direction:row;flex-wrap:wrap;gap:0 26px}}
@media(max-width:560px){
  /* De voettekst was zevenhonderd pixels hoog: acht links, elk op een eigen
     regel van vierenveertig pixels, met drie kopjes ertussen. Een sitemap voor
     een site met vier paginas, en het laatste wat iemand ziet. De tapdoelen
     blijven vierenveertig - die zijn er niet voor niets - maar de kolommen
     staan weer naast elkaar. Contact heeft er twee, dus die gaat over de volle
     breedte met zijn links naast elkaar: geen weesje onderaan. */
  .cc-fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  /* copyright links, thema rechts, de Anthropic-regel eronder */
  .cc-flist{gap:0}
  .cc-flist a{min-height:44px;display:flex;align-items:center}
  .cc-fbot{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:6px;column-gap:14px}
  .cc-fbot span,.cc-fbot .r{grid-column:1;margin-left:0}
  .cc-fbot .cc-theme{grid-column:2;grid-row:1/3;margin:0;justify-self:end}}

/* ---------- smalle gutter ---------- */
@media(max-width:640px){
  :root{--section-y:44px;--space-12:62px;--scroll-off:78px}
  .cc-hero{padding:36px 0 44px}
  .cc-rekening{padding:40px 0 44px}
  .cc-hand{padding:42px 0 44px}
  .cc-close{padding:58px 0 62px}
  .cc-footer{padding:40px 0 22px}
  .cc-prijzen-head{margin-top:var(--space-12)}
  .cc-tiers{margin-top:30px}
}
@media(max-width:520px){:root{--page-pad:20px}}

/* ── Aanraken ────────────────────────────────────────────────────────────────
   Een muisaanwijzer is een punt, een duim is een vlak van ongeveer een
   vierkante centimeter. Alles wat je op een telefoon kunt indrukken krijgt hier
   minstens 48 bij 48 pixels om in te landen. Waar de knop zelf klein moet
   blijven omdat hij anders de regel uit elkaar duwt, groeit het vlak eromheen
   en niet de knop: een onzichtbare ::before vangt de duim op.
   Dit blok verandert niets op een desktop met muis. */
@media(pointer:coarse){
  /* Elke echte knop wordt 48 hoog. Niet alleen de grote: juist "Scan gratis" in
     de balk bovenaan is de meest aangeraakte knop van de hele site, en die was
     met 38 de kleinste. */
  .cc-btn{min-height:48px}
  .cc-btn-sm{padding-block:0}

  /* Menu-items stonden op 44. Vier pixels, maar het zijn de enige links waarmee
     iemand op een telefoon de site door komt. */
  .cc-menu a,.cc-nav-links a,.cc-flist a{min-height:48px}

  /* De ronde knoppen blijven zo klein als ze zijn — groter duwt de balk uit
     balans — dus alleen het opvangvlak groeit. De marge wordt berekend uit de
     werkelijke maat van de knop, niet uit een aangenomen maat: de twee knoppen
     zijn niet even groot en een vaste waarde haalde er maar één over de 48. */
  .cc-theme::before,.cc-burger::before,.cc-fbot .cc-theme::before{inset:calc((48px - 100%) / -2)}

  /* Het woordmerk is de weg terug naar boven en was 22 hoog. */
  .cc-lockup{position:relative}
  .cc-lockup::before{content:"";position:absolute;inset:-13px -8px}

  /* De schuifbalken van de rekenmodule zijn 18 hoog. Dat is precies de maat
     waarop een duim ernaast grijpt en de pagina scrollt in plaats van de waarde
     verschuift — en dit is het moment waarop iemand uitrekent of het loont.
     Het invoerveld is doorzichtig, dus het mag buiten de balk uitsteken zonder
     dat je er iets van ziet. */
  .cc-range{inset:-15px 0;height:auto}

  /* "Reken het na voor jouw bureau" staat op een eigen regel onder een zin,
     niet middenin een lopende tekst. Het vlak mag dus omhoog en omlaag
     uitsteken zonder een andere link te overlappen. */
  .cc-num-f a{position:relative;display:inline-block}
  .cc-num-f a::before{content:"";position:absolute;inset:-14px -8px}
}

/* ---------- contentpagina's ---------- */
.cc-ph{padding:96px 0 0}
.cc-col{max-width:68ch;margin:0 auto}
@media(max-width:760px){.cc-ph{padding:72px 0 0}}
.cc-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--mono);font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:0 0 18px}
.cc-crumb a{color:var(--text-faint)}
.cc-crumb a:hover{color:var(--text)}
.cc-crumb span{opacity:.5}
.cc-ph h1{font-size:clamp(34px,5.2vw,54px);line-height:1.08;letter-spacing:-.025em;font-weight:var(--fw-bold);color:var(--text);margin:0;max-width:19ch;text-wrap:balance}
.cc-lede{font-size:clamp(17px,2vw,20px);line-height:1.62;color:var(--text-muted);max-width:62ch;margin:20px 0 0}
.cc-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:26px 0 0;font-family:var(--mono);font-size:11.5px;font-weight:var(--fw-medium);letter-spacing:.04em;color:var(--text-faint)}
.cc-meta time{color:var(--text-faint)}

.cc-prose{max-width:68ch;margin:0 auto;padding:44px 0 0}
.cc-prose>*+*{margin-top:22px}
.cc-prose p{font-size:17px;line-height:1.7;color:var(--text-muted)}
.cc-prose h2{font-size:clamp(24px,3vw,31px);line-height:1.2;letter-spacing:-.02em;font-weight:var(--fw-bold);color:var(--text);margin-top:54px;max-width:24ch;text-wrap:balance}
.cc-prose h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;font-weight:var(--fw-bold);color:var(--text);margin-top:34px}
.cc-prose h2+p,.cc-prose h3+p{margin-top:14px}
.cc-prose em,.cc-ph h1 em,.cc-lede em{font-style:normal;font-weight:var(--fw-bold);color:var(--accent)}
.cc-prose strong{font-weight:var(--fw-semibold);color:var(--text)}
.cc-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.cc-prose a:hover{text-decoration-color:var(--accent)}
.cc-prose ul,.cc-prose ol{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.cc-prose li{position:relative;padding-left:26px;font-size:17px;line-height:1.65;color:var(--text-muted)}
.cc-prose ul>li::before{content:"";position:absolute;left:8px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.65}
.cc-prose ol{counter-reset:n}
.cc-prose ol>li{counter-increment:n;padding-left:30px}
.cc-prose ol>li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px;font-weight:var(--fw-bold);color:var(--accent);line-height:1.9}

/* Kernzin die los in de tekst staat. Dit is het stuk dat een AI-antwoord
   citeert, dus het moet als één afgeronde bewering leesbaar zijn. */
.cc-key{border-left:2px solid var(--accent);padding:2px 0 2px 20px;margin-top:30px}
.cc-key p{font-size:18.5px;line-height:1.55;color:var(--text);font-weight:var(--fw-medium)}

.cc-note{background:var(--surface-sunken);border-radius:var(--r-lg);padding:22px 24px;margin-top:32px}
.cc-note p{font-size:15.5px;line-height:1.65;margin:0}
.cc-note p+p{margin-top:10px}
.cc-note .h{font-family:var(--mono);font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:0 0 8px}

/* Vergelijking. Desktop een tabel, mobiel twee kaarten onder elkaar —
   horizontaal scrollen op een tabel is geen optie. */
.cc-cmp{margin-top:34px}
.cc-cmp table{width:100%;border-collapse:collapse;font-size:15px}
.cc-cmp th,.cc-cmp td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top;line-height:1.5}
.cc-cmp thead th{font-family:var(--mono);font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--border)}
.cc-cmp tbody th{font-weight:var(--fw-medium);color:var(--text-muted);width:32%}
.cc-cmp .us{color:var(--text);font-weight:var(--fw-semibold);background:var(--accent-tile)}
.cc-cmp thead .us{color:var(--accent)}
.cc-cmp .them{color:var(--text-faint)}
.cc-cmp-cards{display:none}
@media(max-width:760px){
  .cc-cmp table{display:none}
  .cc-cmp-cards{display:flex;flex-direction:column;gap:14px}
  .cc-cmp-card{background:var(--surface-card);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px 22px}
  .cc-cmp-card.us{box-shadow:var(--shadow-card),inset 0 0 0 1px var(--accent-soft)}
  .cc-cmp-card h4{font-size:16px;font-weight:var(--fw-bold);color:var(--text);margin:0 0 14px}
  .cc-cmp-card.us h4{color:var(--accent)}
  .cc-cmp-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--border-soft)}
  .cc-cmp-row:first-of-type{border-top:0}
  .cc-cmp-row dt{font-size:13.5px;color:var(--text-faint);flex:none;max-width:44%}
  .cc-cmp-row dd{margin:0;font-size:14px;color:var(--text-muted);text-align:right}
  .cc-cmp-card.us .cc-cmp-row dd{color:var(--text);font-weight:var(--fw-medium)}
}

/* Vraag en antwoord, open. Dichtgeklapte tekst wordt slechter opgepikt door
   zoekmachines en AI-antwoorden dan tekst die er gewoon staat. */
.cc-qa{margin-top:16px;display:flex;flex-direction:column;gap:2px}
.cc-qa-item{padding:22px 0;border-top:1px solid var(--border-soft)}
.cc-qa-item h3{margin:0;font-size:17px;font-weight:var(--fw-bold);color:var(--text)}
.cc-qa-item p{margin:9px 0 0;font-size:16px;line-height:1.65;color:var(--text-muted)}

.cc-end{margin:72px 0 0;background:var(--surface-sunken);border-radius:var(--r-xl);padding:52px 40px;text-align:center}
@media(max-width:760px){.cc-end{padding:40px 24px;border-radius:var(--r-lg)}}
.cc-end h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15;letter-spacing:-.022em;font-weight:var(--fw-bold);color:var(--text);margin:0 auto;max-width:18ch;text-wrap:balance}
.cc-end p{margin:14px auto 0;max-width:46ch;font-size:16.5px;line-height:1.6;color:var(--text-muted)}
.cc-end .cc-btn{margin-top:26px}
.cc-end .sub{margin-top:14px;font-size:13.5px;color:var(--text-faint)}

.cc-more{margin-top:64px;padding-top:30px;border-top:1px solid var(--border-soft)}
.cc-more .h{font-family:var(--mono);font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:0 0 16px}
.cc-more-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.cc-more-list{grid-template-columns:1fr}}
.cc-more-list a{display:block;background:var(--surface-card);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:17px 19px;transition:transform var(--dur-2) var(--ease-std)}
.cc-more-list a:hover{transform:translateY(-1px)}
.cc-more-list .t{display:block;font-size:15px;font-weight:var(--fw-semibold);color:var(--text);line-height:1.35}
.cc-more-list .d{display:block;margin-top:5px;font-size:13.5px;color:var(--text-faint);line-height:1.45}

.cc-idx{padding:40px 0 0;display:flex;flex-direction:column;gap:2px;max-width:68ch;margin:0 auto}
.cc-idx a{display:block;padding:24px 0;border-top:1px solid var(--border-soft)}
.cc-idx .t{display:block;font-size:19px;font-weight:var(--fw-bold);color:var(--text);line-height:1.3;letter-spacing:-.012em}
.cc-idx a:hover .t{color:var(--accent)}
.cc-idx .d{display:block;margin-top:7px;font-size:15.5px;color:var(--text-muted);line-height:1.55;max-width:60ch}
.cc-idx .m{display:block;margin-top:9px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--text-faint)}
.cc-foot-space{height:96px}