/* Gedeelde basis voor de developer-pagina's: zelfde merkstijl als de WoningMe-homepage.
   Pagina-specifieke opmaak staat per pagina in een klein <style>-blok. */
@font-face{font-family:'Schibsted Grotesk';src:url('/static/fonts/schibsted-grotesk-latin.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';src:url('/static/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';src:url('/static/fonts/source-sans-3-latin.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';src:url('/static/fonts/source-sans-3-latin-ext.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f6f7f9; --surface:#fff; --border:#dde2e8; --border-strong:#c3c9d2;
  --primary:#1a56db; --primary-dark:#123d9c; --primary-light:#eef2fb;
  --text:#101c2c; --muted:#55606e; --error:#c2331f;
  --code-bg:#0d1827; --code-text:#d6deea; --code-muted:#7d8da3; --code-green:#6ee7a0;
  --font:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --radius:4px; --radius-screen:4px; --radius-panel:3px;
  --shadow:none;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);font-size:17px;line-height:1.6;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);line-height:1.2;text-wrap:balance}
a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
img{display:block;max-width:100%}

.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;white-space:nowrap;color:var(--text);text-decoration:none}
.brand img{width:30px;height:30px;object-fit:contain}
.brand small{font-family:var(--font);font-weight:400;font-size:15px;color:var(--muted);padding-left:10px;border-left:1px solid var(--border-strong)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--display);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-sm{height:36px;padding:0 14px;font-size:14px}
code{font-family:var(--mono)}