/* ═══════════════════════════════════════════════════════════════════════════
   Save the stock — subpages (over ons · vraag een demo · wachtlijst)
   Same tokens, masthead and button recipes as the main concept page.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Hanken Fallback"; font-weight:400 500;
  src:local("Arial"), local("Liberation Sans");
  size-adjust:101.4%; ascent-override:101.5%; descent-override:27%; line-gap-override:0%;
}
@font-face{
  font-family:"Hanken Fallback"; font-weight:600 700;
  src:local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust:94.2%; ascent-override:109%; descent-override:29%; line-gap-override:0%;
}
@font-face{
  font-family:"Bricolage Fallback"; font-weight:400 500;
  src:local("Arial"), local("Liberation Sans");
  size-adjust:100%; ascent-override:95%; descent-override:25%; line-gap-override:0%;
}
@font-face{
  font-family:"Bricolage Fallback"; font-weight:600 700;
  src:local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust:98.5%; ascent-override:96%; descent-override:25%; line-gap-override:0%;
}

:root{
  color-scheme: light;
  --paper:#FFFFFF; --surface:#F3F5F7; --surface-2:#E9EDF2;
  --line:#DADFE7; --line-soft:#E7EBF0;
  --ink:#1D2530; --ink-2:#59616C;
  --teal:#0D7FA5; --teal-ink:#0B6D8E; --teal-tint:#E4F1F7; --teal-line:#B9DCEA;
  --green:#16A249; --green-2:#1E8042; --accent:#E2F3E8; --accent-ink:#1D6336;
  --font:"Hanken Grotesk","Hanken Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Bricolage Fallback","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-2:clamp(30px,3.6vw,46px); --t-3:clamp(20px,2.1vw,26px);
  --t-4:19px; --t-5:16px; --t-6:14px; --t-7:11px;
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --gut:clamp(24px,5vw,88px);
  --ease:cubic-bezier(.22,1,.36,1); --ease-2:cubic-bezier(.33,1,.68,1);
  --lift:0 1px 1px rgb(29 37 48 / .04), 0 18px 38px -22px rgb(29 37 48 / .30);
}

*, *::before, *::after{ box-sizing:border-box; }
/* zelfde gereserveerde scrollbalk-goot als de startpagina, zodat wisselen
   tussen pagina's de gecentreerde inhoud niet opzij laat springen */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font);
  font-size:var(--t-5); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, svg{ max-width:100%; }
h1, h2, h3, p, ul, ol, figure{ margin:0; }
ul, ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--teal); color:#FFFFFF; }
.skip{ position:absolute; left:-9999px; z-index:60; }
.skip:focus{ left:var(--sp-4); top:var(--sp-4); padding:10px 16px; border-radius:8px;
  background:var(--teal); color:#FFFFFF; font-weight:700; text-decoration:none; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--teal-ink); outline-offset:3px; border-radius:6px; }
.wrap{ width:min(1120px, 100% - var(--gut) * 2); margin-inline:auto; }

/* type */
.h1{ font-family:var(--display); font-size:clamp(32px,4.6vw,56px); line-height:1.03;
  letter-spacing:-.028em; font-weight:700; text-wrap:balance; }
.h2{ font-family:var(--display); font-size:var(--t-3); line-height:1.2; letter-spacing:-.015em; font-weight:600; }
.lead{ font-size:var(--t-4); line-height:1.55; color:var(--ink-2); max-width:58ch; text-wrap:pretty; }
.lead b{ color:var(--ink); font-weight:600; }
.prose{ display:grid; gap:var(--sp-4); max-width:62ch; }
.prose p{ color:var(--ink-2); line-height:1.65; }
.prose b{ color:var(--ink); font-weight:600; }
.prose ul{ display:grid; gap:8px; padding-left:20px; list-style:disc; color:var(--ink-2); line-height:1.65; }
.prose .h2{ margin-top:var(--sp-4); }

/* veelgestelde vragen: native accordions, geen script nodig */
.faq{ display:grid; gap:var(--sp-6); max-width:820px; }
.faq section{ display:grid; gap:var(--sp-3); }
.faq details{ border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; cursor:pointer; font-weight:600; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; font-family:var(--display); font-size:20px; line-height:1;
  color:var(--teal-ink); }
.faq details[open] summary::after{ content:"−"; }
.faq details > p{ padding:0 18px 16px; color:var(--ink-2); line-height:1.65; max-width:70ch; }

/* buttons + icons — the app recipes */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:46px; padding:12px 20px; border:1px solid transparent; border-radius:10px;
  font:inherit; font-size:var(--t-6); font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.btn:active{ transform:scale(.98); }
.btn--go{ background:var(--teal); color:#FFFFFF; }
.btn--go:hover{ background:var(--teal-ink); }
.btn--outline{ border:2px solid var(--teal); color:var(--teal-ink); background:var(--paper); }
.btn--outline:hover{ background:var(--teal); color:#FFFFFF; }
.btn--lg{ min-height:50px; padding:13px 22px; font-size:14px; }
.btn--sm{ min-height:36px; padding:8px 14px; }
.link{ color:var(--teal-ink); text-underline-offset:3px; }
.link:hover{ color:var(--ink); }
.ico{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.ico--sm{ width:15px; height:15px; }

/* masthead — identical to the main page */
.mast{ position:fixed; inset:0 0 auto 0; z-index:40; height:64px;
  background:rgb(255 255 255 / .95); border-bottom:1px solid rgb(218 223 231 / .8); }
@supports (backdrop-filter: blur(8px)){
  .mast{ background:rgb(255 255 255 / .8); backdrop-filter:blur(14px) saturate(1.5); }
}
@media (prefers-reduced-transparency: reduce){
  .mast{ background:var(--paper); backdrop-filter:none; }
}
/* the same measure as the main page's .wrap, so the nav logo sits on the
   page's left edge rather than on a narrower, differently inset one */
.mast__in{ display:flex; align-items:center; gap:clamp(14px,2.2vw,28px);
  width:min(1400px, 100% - var(--gut) * 2); height:100%; margin-inline:auto; }
.mast__logo{ display:flex; align-items:center; }
.mast__logo img{ display:block; width:auto; height:36px; }
.mast__nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); align-self:stretch; }
.mast__nav a{ display:inline-flex; align-items:center; align-self:stretch; font-size:var(--t-5);
  font-weight:500; color:var(--ink-2); text-decoration:none;
  border-bottom:2px solid transparent; border-top:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.mast__nav a:hover{ color:var(--teal-ink); }
.mast__nav a[aria-current="page"]{ color:var(--teal-ink); border-bottom-color:var(--teal); }
.mast__right{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); }
@media (max-width:767px){ .mast__nav{ display:none; } }
@media (max-width:659px){ .mast__right .btn--outline{ display:none; } }

/* page scaffold */
.page{ padding-top:clamp(96px,12vh,132px); padding-bottom:clamp(48px,6vw,88px);
  display:grid; gap:clamp(40px,5.5vw,72px); }
.phead{ display:grid; gap:var(--sp-4); max-width:760px; }
/* live wachtlijstteller: pas zichtbaar zodra de database een getal teruggeeft */
.phead__count{ justify-self:start; display:block; color:var(--muted);
  margin:4px 0 0; font-size:var(--t-5); line-height:1.5; }
.phead__count-number{ color:var(--green-2); font-size:1.5em;
  font-weight:700; font-variant-numeric:tabular-nums; }
.phead__count[hidden]{ display:none; }
.split{ display:grid; gap:clamp(24px,3.5vw,56px); align-items:center; }
.split--start{ align-items:start; }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split--wide-txt{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
}
.pframe{ position:relative; overflow:hidden; border-radius:16px; box-shadow:var(--lift); }
.pframe img{ display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(.97); }
.pframe--tall{ aspect-ratio:4 / 3; }
.pframe--wide{ aspect-ratio:21 / 9; }

/* a real sequence, so the numbers carry information */
.steps{ counter-reset:step; display:grid; gap:clamp(20px,2.6vw,32px); max-width:56ch; }
.steps li{ counter-increment:step; display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--sp-4); }
.steps li::before{ content:counter(step); display:grid; place-items:center; width:34px; height:34px;
  border:1.5px solid var(--teal-line); border-radius:50%; background:var(--teal-tint);
  color:var(--teal-ink); font-family:var(--display); font-size:15px; font-weight:700; }
.steps h3{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.012em; }
.steps p{ margin-top:4px; color:var(--ink-2); line-height:1.6; }

/* the demo page stacks the photo and what happens next in one column, so the
   form beside it stays on a single row */
.demo-aside{ display:grid; gap:clamp(24px,3.2vw,40px); align-content:start; }

/* forms — the app input recipe */
.form{ display:grid; gap:var(--sp-4); max-width:560px; }
.field{ display:grid; gap:6px; }
.field > span{ font-size:var(--t-6); font-weight:600; }
.field em{ font-style:normal; font-weight:500; color:var(--ink-2); }
.field input, .field textarea{ width:100%; min-height:46px; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  color:var(--ink); font:inherit; font-size:var(--t-5); }
.field textarea{ min-height:110px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#6B7684; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--teal-ink); outline-offset:1px; }
.form__note{ font-size:var(--t-6); color:var(--ink-2); max-width:52ch; }
.form__ok{ display:none; padding:14px 16px; border:1px solid #BEE3CC; border-radius:12px;
  background:var(--accent); color:var(--accent-ink); font-weight:600; }
.form__ok p + p{ margin-top:10px; }
.form__ok p{ font-weight:400; }
.form__ok .form__receipt-title{ font-weight:700; }
.form__receipt-help{ font-size:var(--t-6); line-height:1.6; }
.form__reference{ padding-top:12px; border-top:1px solid #BEE3CC; font-size:var(--t-6); }
.form__reference code{ display:block; margin-top:4px; overflow-wrap:anywhere; font-size:.9em; }
.form__receipt-contact{ display:inline-flex; align-items:center; min-height:44px; margin-top:6px; }
.form__err{ display:none; padding:14px 16px; border:1px solid #F1C0C0; border-radius:12px;
  background:#FDECEC; color:#9F2B2B; font-weight:600; }
.form.is-sent .form__ok{ display:block; }
.form.is-sent .form__submit{ display:none; }
.form.is-failed .form__err{ display:block; }

/* aanbieder / afnemer segmented switch */
.seg{ display:grid; grid-template-columns:1fr 1fr; width:min(420px,100%); padding:5px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.seg button{ min-height:44px; padding:10px 14px; border:0; border-radius:999px; background:transparent;
  font-size:var(--t-5); font-weight:650; color:var(--ink-2); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease); }
.seg button[aria-pressed="true"]{ background:var(--teal); color:#FFFFFF; }
.seg button:not([aria-pressed="true"]):hover{ color:var(--teal-ink); }
.seg-note{ min-height:24px; color:var(--ink-2); }
.seg-note b{ color:var(--ink); font-weight:600; }

/* het moment: een strip werkdagen en vaste tijdsloten, geen zware datepicker */
.when{ display:grid; gap:var(--sp-3); }
.when__q{ font-size:var(--t-6); font-weight:600; }
.when__lbl{ font-size:var(--t-6); font-weight:600; color:var(--ink-2); }
.when__pick{ font-size:var(--t-6); color:var(--ink-2); }
.when__pick b{ color:var(--ink); font-weight:600; }

.cal{ display:grid; gap:10px; padding:14px; border:1px solid var(--line); border-radius:14px;
  background:#FFFFFF; max-width:380px; }
.cal__head{ display:flex; align-items:center; gap:8px; }
.cal__month{ flex:1; text-align:center; font-family:var(--display); font-size:16px; font-weight:600;
  letter-spacing:-.012em; text-transform:capitalize; }
.cal__nav{ width:32px; height:32px; flex:none; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:9px; background:#FFFFFF; color:var(--ink); cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.cal__nav:hover:not(:disabled){ border-color:var(--teal-line); color:var(--teal-ink); }
.cal__nav:disabled{ opacity:.35; cursor:default; }
/* stepping through months is the one thing this calendar asks a thumb to do,
   so on touch the two arrows grow from 32px to a full target */
@media (pointer:coarse){
  .cal__nav{ width:44px; height:44px; }
  .btn--sm{ min-height:44px; }
}
.cal__dows, .cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.cal__dows span{ text-align:center; font-family:var(--mono); font-size:var(--t-7); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); }
.cal__grid button{ aspect-ratio:1; display:grid; place-items:center; border:1px solid transparent;
  border-radius:9px; background:transparent; color:var(--ink); font-size:var(--t-6); font-weight:500;
  cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease); }
.cal__grid button:hover:not(:disabled){ border-color:var(--teal-line); }
.cal__grid button:disabled{ color:#B4BAC4; cursor:default; }
.cal__grid .is-today{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* een geboekte dag verschilt van gewoon "uit": het cijfer blijft staan en
   krijgt een schuine streep, zoals een bezette stoel op een zaalplan */
.cal__grid button.is-full{ position:relative; color:#97A0AB; }
.cal__grid button.is-full::after{ content:""; position:absolute; left:50%; top:50%; width:16px; height:1.5px;
  border-radius:1px; background:currentColor; transform:translate(-50%,-50%) rotate(-32deg); }
.cal__lead{ font-size:var(--t-7); color:var(--ink-2); }
.cal__legend{ display:flex; align-items:center; gap:8px; font-size:var(--t-7); color:var(--ink-2); }
.cal__legend-mark{ position:relative; width:22px; height:22px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:7px; font-size:11px; font-weight:500; color:#97A0AB;
  font-variant-numeric:tabular-nums; }
.cal__legend-mark::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px;
  border-radius:1px; background:currentColor; transform:translate(-50%,-50%) rotate(-32deg); }

/* dag en tijd naast elkaar: de sloten staan verticaal naast de kalender en
   rekken mee tot zijn hoogte, zodat de twee als één rij lezen */
.when__row{ display:grid; gap:var(--sp-3); }
.when__col{ display:grid; gap:var(--sp-3); align-content:start; }
@media (min-width:640px){
  .when__row{ grid-template-columns:minmax(0,1fr) clamp(180px,34%,236px); align-items:stretch; }
  .when__col--tijd{ grid-template-rows:auto 1fr; }
  /* the slots size to their own content: dividing the calendar's full height
     between them made each one grow every time a slot was dropped */
  .chips--stack{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
  .chips--stack button{ flex:none; border-radius:14px; padding:10px 16px; text-align:left; justify-items:start; align-content:center; }
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips button{ display:grid; gap:1px; padding:8px 15px; border:1px solid var(--line); border-radius:999px;
  background:#FFFFFF; color:var(--ink); font-size:var(--t-6); font-weight:600; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease); }
.chips button em{ font-style:normal; font-family:var(--mono); font-size:var(--t-7); font-weight:500;
  letter-spacing:.06em; color:var(--ink-2); }

.chips button:hover{ border-color:var(--teal-line); }
.cal__grid button[aria-pressed="true"], .chips button[aria-pressed="true"]{
  background:var(--teal); border-color:var(--teal); color:#FFFFFF; font-weight:600; }
.chips button[aria-pressed="true"] em{ color:rgb(255 255 255 / .78); }
.when__tz{ font-size:var(--t-7); color:var(--ink-2); }

.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }

/* footer — same recipe as the landing page */
.foot{ background:rgb(243 245 247 / .5); border-top:1px solid var(--line); padding-block:36px var(--sp-5); }
/* the footer takes the startpagina's measure, not the narrower reading measure
   the subpage content sits on, so it lines up on every page — the same trick
   .mast__in already uses for the masthead */
.foot .wrap{ width:min(1400px, 100% - var(--gut) * 2); }
.foot__top{ display:grid; gap:var(--sp-6); }
@media (min-width:900px){ .foot__top{ grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr)); gap:clamp(20px,2.6vw,52px); } }
/* contactgegevens only earns its own column once there is room for the e-mail
   on one line; below that the cell drops under the brand block, where it sat
   before there was a sixth column to give it */
@media (min-width:1160px){ .foot__top{ grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr)) minmax(0,1.2fr); } }
.foot img{ display:block; height:48px; width:auto; }
.foot__line{ margin-top:var(--sp-4); max-width:40ch; font-size:var(--t-5); color:var(--ink-2); line-height:1.6; }
.foot__line b{ color:var(--ink); font-weight:600; }
.foot__contact{ font-style:normal; font-size:var(--t-6); line-height:1.7; color:var(--ink-2); }
.foot__contact a{ color:inherit; text-decoration:none; }
.foot__contact a:hover{ color:var(--teal-ink); }
.foot__col h3{ font-family:var(--mono); font-size:var(--t-7); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--sp-3); }
.foot__col li + li{ margin-top:2px; }
.foot__col a{ font-size:var(--t-6); color:var(--ink); text-decoration:none; }
.foot__col a:hover{ color:var(--teal-ink); }
.foot__social a{ display:inline-flex; align-items:center; gap:8px; }
/* the footer links set at the line box alone, 18px, under the 24px WCAG 2.2
   target floor. The min-height lifts them clear of it without moving the text,
   and on a touch screen out to the 44px a thumb actually wants. */
.foot__col a, .foot__contact a, .foot__social a{
  display:inline-flex; align-items:center; min-height:26px; }
@media (pointer:coarse){
  .foot__col a, .foot__contact a, .foot__social a{ min-height:44px; }
  .foot__col li + li{ margin-top:0; }
}
.foot__social .ico{ color:var(--ink-2); transition:color .2s var(--ease); }
.foot__social a:hover .ico{ color:var(--teal-ink); }
.foot__col .foot__soon{ font-size:var(--t-6); color:var(--ink-2); }
.foot__soon em{ font-style:normal; font-family:var(--mono); font-size:var(--t-7); letter-spacing:.08em; text-transform:uppercase; }
.foot__bot{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); font-family:var(--mono); font-size:var(--t-7); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); }
.foot__legal{ display:flex; gap:var(--sp-4); margin-left:auto; }
.foot__legal a{ text-decoration:none; }
.foot__legal a:hover{ color:var(--teal-ink); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}