/* Stijl van heybillie.be: de coming-soon-pagina uit design/coming-soon (canvaspagina "Coming soon"), plus de
   juridische pagina's en de 404 in dezelfde vorm. Wit, Figtree, petrol als accent; Bricolage alleen voor het logo.
   De fonts staan hier zelf (de CSP laat geen Google Fonts toe). */
@font-face{font-family:Figtree;src:url("/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
/* Alleen de letters van het logo; zie maak_logo_font.py. */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-logo.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}

:root{
  --line:#eef0f1;--line-strong:#dce0e3;
  --ink:#10212b;--ink-2:#4a5862;--ink-3:#5f6b72;
  --petrol:#0f4c5c;--petrol-tint:#eaf2f4;--perzik:#ffb38a;
  --logo-boven:#0f4c5c;--logo-onder:#ffb38a;
  --font-sans:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;--font-merk:"Bricolage Grotesque",Figtree,system-ui,sans-serif;
  --radius-control:10px;--radius-card:14px;
  --focus-ring:0 0 0 2px #ffffff,0 0 0 4px #0f4c5c;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:#fff}
body{font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a:focus-visible{outline:none;border-radius:4px;box-shadow:var(--focus-ring)}
.lp{container:lp / inline-size;--hoogte:100svh}
:where(.lp) :where(p,h1,h2,ul){margin:0}
.lp-binnen{max-width:1272px;margin:0 auto;padding:0 56px}
.ic{width:20px;height:20px;flex:none}
.merk{height:1em;width:auto;flex:none}
@container lp (max-width:760px){.lp-binnen{padding:0 20px}}

.hb-logo{display:inline-flex;align-items:center;gap:0.22em;color:var(--logo-boven);text-decoration:none;font-family:var(--font-merk)}
.hb-logo svg{height:1.25em;width:auto;flex:none}
.hb-logo__boven{fill:var(--logo-boven)}
.hb-logo__onder{fill:var(--logo-onder)}
.hb-logo__woord{display:flex;flex-direction:column;line-height:1}
.hb-logo__hey{font-size:0.42em;font-weight:600;letter-spacing:-0.01em;margin:0 0 0.04em 0.06em}
.hb-logo__naam{font-size:1em;font-weight:700;letter-spacing:-0.04em}

/* Coming soon — één scherm. Het merk, één zin over wat Billie is, 'binnenkort', een contactadres en de links naar de
   privacyverklaring en de algemene voorwaarden (nodig om het domein bij Google te laten verifiëren).
   Geen prijzen, geen functielijst. Wit, Figtree, petrol als accent, de stemgolf als beeld van Billie. */
.lp-cs .cs{display:flex;flex-direction:column;min-height:var(--hoogte,900px);background:#fff}
.lp-cs .cs__kop{flex:none;height:88px}
.lp-cs .cs__kop>.lp-binnen{height:100%;display:flex;align-items:center}
.lp-cs .cs__midden{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0 72px;text-align:center}
.lp-cs .stem{display:flex;align-items:center;justify-content:center;gap:4px;height:88px}
.lp-cs .stem i{display:block;width:5px;flex:none;height:calc(var(--h) * 1%);border-radius:3px;background:var(--petrol);opacity:var(--o)}
.lp-cs .stem i.p{background:var(--perzik)}
.lp-cs .cs h1{margin-top:40px;font-size:76px;line-height:1.02;font-weight:700;letter-spacing:-0.045em;color:var(--ink)}
.lp-cs .cs h1 span{display:block}
.lp-cs .cs h1 .accent{color:var(--petrol)}
.lp-cs .cs h1 .cs__naam{margin-bottom:14px;font-size:.4em;letter-spacing:-0.02em;color:var(--petrol)}  /* de naam als tekst (Google-keuring 1/11) */
.lp-cs .cs__en{margin-top:14px}  /* dezelfde uitleg in het Engels, voor de keuring van Google */
.lp-cs .cs__sub{margin-top:24px;max-width:600px;font-size:20px;line-height:1.55;color:var(--ink-2)}
.lp-cs .binnenkort{display:inline-flex;align-items:center;gap:9px;height:40px;margin-top:40px;padding:0 16px;border-radius:var(--radius-control);background:var(--petrol-tint);color:var(--petrol);font-size:15px;font-weight:700}
.lp-cs .binnenkort .ic{width:18px;height:18px}
.lp-cs .cs__contact{margin-top:18px;font-size:16px;color:var(--ink-2)}
/* Wat Billie met je agenda doet, met de link naar de privacyverklaring (gevraagd door de Google-keuring). */
.lp-cs .cs__agenda{margin:16px auto 0;max-width:560px;font-size:16px;line-height:1.6;color:var(--ink-3)}
.lp-cs .cs a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(15,76,92,.3)}
.lp-cs .cs__voet{flex:none;border-top:1px solid var(--line)}
.lp-cs .cs__voet>.lp-binnen{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;font-size:14px;color:var(--ink-3)}
.lp-cs .cs__info span+span::before{content:"·";margin:0 .35em}
.lp-cs .cs__voet nav{display:flex;gap:24px}
.lp-cs .cs__voet nav a{color:var(--ink-2);font-weight:600;text-decoration:none}
.lp-cs .cs__voet nav a[aria-current="page"]{color:var(--petrol)}

/* Juridische pagina's (/privacy, /voorwaarden): dezelfde kop en voet, de tekst in één leeskolom onder het logo. */
.lp-cs .doc{flex:1;padding:56px 0 96px}
.lp-cs .doc__tekst{max-width:720px}
.lp-cs .doc h1{margin-top:0;font-size:52px;line-height:1.05;letter-spacing:-0.04em}
.lp-cs .doc__stand{margin-top:16px;font-size:15px;color:var(--ink-3)}
.lp-cs .doc h2{margin-top:40px;font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.lp-cs .doc p,.lp-cs .doc li{font-size:17px;line-height:1.65;color:var(--ink-2)}
.lp-cs .doc h2+p,.lp-cs .doc p+p,.lp-cs .doc p+ul,.lp-cs .doc ul+p{margin-top:14px}
.lp-cs .doc ul{padding-left:22px}
.lp-cs .doc li+li{margin-top:6px}
/* De langere teksten uit docs/juridisch/ (maak_juridisch.py): tussentitels, genummerde artikels, tabellen, de inhoud
   bovenaan, een voorbeeldtekst en de open punten van het ontwerp. */
.lp-cs .doc__tekst>*+*{margin-top:14px}
.lp-cs .doc h3{margin:28px 0 0;font-size:18px;line-height:1.35;font-weight:700;color:var(--ink)}
:where(.lp-cs .doc) :where(ol){margin:0}
.lp-cs .doc ol{padding-left:24px}
.lp-cs .doc li>ul,.lp-cs .doc li>ol,.lp-cs .doc li>p+p{margin-top:6px}
.lp-cs .doc li>p{margin:0}
.lp-cs .doc strong{font-weight:700;color:var(--ink)}
.lp-cs .doc a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(15,76,92,.3)}
.lp-cs .doc code{font-size:.88em;padding:1px 5px;border-radius:5px;background:#f3f5f6;overflow-wrap:anywhere}
.lp-cs .doc__tabel{overflow-x:auto}
.lp-cs .doc table{width:100%;border-collapse:collapse}
.lp-cs .doc th,.lp-cs .doc td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px;line-height:1.55;color:var(--ink-2)}
.lp-cs .doc th{border-bottom-color:var(--line-strong);font-weight:700;color:var(--ink)}
.lp-cs .doc .toc{margin-top:32px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius-card)}
.lp-cs .doc .toctitle{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.lp-cs .doc .toc ul{margin-top:10px;padding:0;list-style:none}
.lp-cs .doc .toc li{font-size:15px;line-height:1.5}
.lp-cs .doc .toc a{font-weight:500;text-decoration:none}
.lp-cs .doc blockquote{margin:16px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--line-strong)}
.lp-cs .doc blockquote>*+*{margin-top:12px}
.lp-cs .doc mark.open{padding:1px 5px;border-radius:5px;background:#fff1cc;color:#5c4300;font-size:.92em}
.lp-cs .plaatshouder{margin-top:40px;padding:24px;border:1px dashed var(--line-strong);border-radius:var(--radius-card)}
.lp-cs .doc .plaatshouder__label{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:var(--petrol-tint);color:var(--petrol);font-size:13px;font-weight:700;line-height:1}

/* 404: hetzelfde scherm als de coming-soon-pagina, met één zin en een weg terug. */
.lp-cs .fout h1{margin-top:0;font-size:52px}

@container lp (max-width:760px){
  .lp-cs .cs{min-height:var(--hoogte,812px)}
  .lp-cs .cs__kop{height:72px}
  .lp-cs .cs__midden{padding:16px 0 56px}
  .lp-cs .stem{height:64px;gap:3px}
  .lp-cs .stem i{width:4px}
  .lp-cs .cs h1{margin-top:32px;font-size:40px;line-height:1.06}
  .lp-cs .cs h1 span{display:inline}
  .lp-cs .cs h1 .cs__naam{display:block;margin-bottom:10px}
  .lp-cs .cs__sub{margin-top:18px;font-size:17px}
  .lp-cs .binnenkort{margin-top:32px}
  .lp-cs .cs__contact{font-size:15px}
  .lp-cs .cs__agenda{margin-top:14px;font-size:15px}
  .lp-cs .cs__voet>.lp-binnen{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding-top:20px;padding-bottom:20px}
  .lp-cs .cs__info span{display:block}
  .lp-cs .cs__info span+span::before{content:none}
  .lp-cs .doc{padding:32px 0 64px}
  .lp-cs .doc h1{margin-top:0;font-size:36px;line-height:1.08}
  .lp-cs .doc h2{margin-top:32px;font-size:20px}
  .lp-cs .doc p,.lp-cs .doc li{font-size:16px}
  .lp-cs .doc h3{margin-top:24px;font-size:17px}
  .lp-cs .doc th,.lp-cs .doc td{font-size:14px;padding-right:10px}
  .lp-cs .doc .toc{padding:16px 18px}
  /* Tabellen vanaf 3 kolommen: elke rij een kaartje, met de kolomtitel (data-label) boven elke waarde. */
  .lp-cs .doc__tabel--stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .lp-cs .doc__tabel--stapel tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .lp-cs .doc__tabel--stapel td{display:block;padding:3px 0;border:0}
  .lp-cs .doc__tabel--stapel td:first-child{font-weight:700;color:var(--ink)}
  .lp-cs .doc__tabel--stapel td:not(:first-child)::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
  .lp-cs .plaatshouder{margin-top:32px;padding:20px}
  .lp-cs .fout h1{margin-top:0;font-size:34px}
}