/* ═══════════════════════════════════════════════════════════════════════
   LiveBlueprints: shared foundation
   Design tokens and the chrome every page carries: type scale, buttons,
   navigation, footer and the cookie bar. Page-specific layout stays in
   the page itself. Change a brand value here and all pages follow.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ═══ LBP design system: Foundations → Colors ═══
     Seven families, six steps: 50 / 100 (tinted surfaces), 300 (borders &
     dividers), 500 (base), 700 (hover, pressed, accessible text), 900 (ink).
     Nothing outside this set is part of the system. */
  --base-white:#FFFFFF;
  --base-dark:#1B073C;

  --gray-50:#FAF9FB;   --gray-100:#F2F0F4;  --gray-300:#D5D0DC;
  --gray-500:#776D88;  --gray-700:#4C445A;  --gray-900:#1B073C;

  --brand-50:#F6F3FC;  --brand-100:#EBE7F3; --brand-300:#B098D8;
  --brand-500:#3C1085; --brand-700:#260263; --brand-900:#1B073C;

  --coral-50:#FEF6F5;  --coral-100:#FDEDEC; --coral-300:#F4A09A;
  --coral-500:#EF4E44; --coral-700:#AF2A22; --coral-900:#6E1812;

  --error-50:#FEF1F4;  --error-100:#FCDEE6; --error-300:#F490A9;
  --error-500:#CF1745; --error-700:#8E102F; --error-900:#4B0C1C;

  --warning-50:#FFFAEB;  --warning-100:#FEF0C7; --warning-300:#FEC84B;
  --warning-500:#F79009; --warning-700:#B54708; --warning-900:#7A2E0E;

  --success-50:#ECFDF3;  --success-100:#DCFAE6; --success-300:#75E0A7;
  --success-500:#17B26A; --success-700:#067647; --success-900:#084C2E;

  /* semantic aliases: page roles mapped onto the ramps above */
  --bg:var(--gray-50);
  --panel:var(--base-white);
  --ink:var(--gray-900);        /* headings + body copy */
  --ink-2:var(--gray-700);
  --muted:var(--gray-500);      /* secondary text */
  --hair:var(--gray-300);       /* borders & dividers */
  --accent:var(--brand-500);    /* buttons, links, focus rings */
  --accent-hover:var(--brand-700);
  --accent-tint:var(--brand-50);
  --accent-tint-2:var(--brand-100);
  --emphasis:var(--coral-500);  /* accent: emphasis & highlights, used sparingly */
  --emphasis-text:var(--coral-700);
  /* brand ink as rgb, for scrims and shadows over photography */
  --ink-rgb:27,7,60;
  --accent-rgb:60,16,133;

  /* ═══ Foundations → Typography ═══
     Outfit Medium 500 for every heading (H1–H6), letter-spacing +0.8px.
     Space Grotesk Regular 400 for all body copy, labels and captions. */
  --font-head:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ls-head:0.8px;

  /* line heights are the system's ratios (unitless), so a step keeps its
     designed leading when the fluid clamps scale it down on small screens */
  /* Display is NOT in the design system; it is derived, for the two
     full-bleed hero headlines. Size: the scale steps up by 1.2 at the top
     (20, 24, 30, 36, 48, 60), so 60 x 1.2 = 72. Leading: the ratio tightens
     as the steps grow (H6 1.4, H5 1.33, H4 1.27, H3 1.22, H1 1.2), so the
     step above H1 takes H1's ratio as its ceiling: 72 x 1.2 = 86.4. Weight
     and tracking stay Outfit Medium 500 / +0.8px like every other heading. */
  --display:4.5rem; --display-lh:1.2; /* 72 / 86.4 */
  --h1:3.75rem;   --h1-lh:1.2;      /* 60 / 72 */
  --h2:3rem;      --h2-lh:1.25;     /* 48 / 60 */
  --h3:2.25rem;   --h3-lh:1.222;    /* 36 / 44 */
  --h4:1.875rem;  --h4-lh:1.267;    /* 30 / 38 */
  --h5:1.5rem;    --h5-lh:1.333;    /* 24 / 32 */
  --h6:1.25rem;   --h6-lh:1.4;      /* 20 / 28 */
  --body-lg:1.125rem; --body-lg-lh:1.556; /* 18 / 28 */
  --body-md:1rem;     --body-md-lh:1.5;   /* 16 / 24 */
  --body-sm:0.875rem; --body-sm-lh:1.429; /* 14 / 20 */
  --caption:0.75rem;  --caption-lh:1.5;   /* 12 / 18 */

  /* fluid heading steps: each tops out on a scale value */
  --display-fluid:clamp(2.75rem,7.4vw,var(--display));
  --h1-fluid:clamp(2.25rem,6.2vw,var(--h1));
  --h2-fluid:clamp(2rem,5vw,var(--h2));
  --h3-fluid:clamp(1.75rem,3.6vw,var(--h3));
  --h4-fluid:clamp(1.5rem,2.8vw,var(--h4));
  --h5-fluid:clamp(1.25rem,2.2vw,var(--h5));

  /* Shared components → Buttons */
  --radius-btn:8px;
  --shadow-xs:0 1px 2px rgba(10,13,18,0.05);

  --col:680px;
  --pad:clamp(96px,16vh,190px)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--body-md);line-height:var(--body-md-lh);
  font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:500;letter-spacing:var(--ls-head);
  line-height:1.15;text-wrap:balance}
h1{font-size:var(--h1-fluid);line-height:var(--h1-lh)}
h2{font-size:var(--h2-fluid);line-height:var(--h2-lh)}
h3{font-size:var(--h3-fluid);line-height:var(--h3-lh)}
h4{font-size:var(--h4);line-height:var(--h4-lh)}
h5{font-size:var(--h5);line-height:var(--h5-lh)}
h6{font-size:var(--h6);line-height:var(--h6-lh)}
/* Brand/500 is the focus-ring colour in the system */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
section{scroll-margin-top:60px}
.wrap{max-width:var(--col);margin:0 auto;padding:0 24px}

/* ── buttons ──
   Shared components → Buttons in Figma. Rounded rectangle at 8px, never a
   pill; Space Grotesk Regular 400, not medium; shadow-xs and nothing more.
   Sizes follow the component set: sm 36 / md 40 / lg 44 / xl 48 tall.
   Hierarchy=Primary is a Brand/500 fill, Hierarchy=Secondary a Coral/500
   fill, both with white text. */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:400;letter-spacing:0;
  font-size:var(--body-md);line-height:var(--body-md-lh);
  padding:12px 20px;border-radius:var(--radius-btn);          /* xl: 48px tall */
  background:var(--accent);color:var(--base-white);border:0;
  box-shadow:var(--shadow-xs);
  transition:background .2s}
.pill:hover{background:var(--accent-hover)}
/* Hierarchy=Secondary. Coral is the accent, never a second primary.
   NOTE: the component pairs white text with a Coral/500 fill, which is ~3.4:1
   and below WCAG AA; the Colors page says to use Coral/700 where white text
   sits on a coral fill. This follows the component. Swap the two values below
   for var(--coral-700) / var(--coral-900) to follow the colour rule instead. */
.pill.secondary{background:var(--coral-500)}
.pill.secondary:hover{background:var(--coral-700)}
.pill .ar{font-size:var(--body-md);transition:transform .2s}
.pill:hover .ar{transform:translateX(3px)}
/* the smaller steps of the same component, for tighter spots */
.pill.lg{padding:10px 18px}                                    /* lg: 44px tall */
.pill.md{padding:10px 16px;font-size:var(--body-sm);line-height:var(--body-sm-lh)}
.pill.sm{padding:8px 14px;font-size:var(--body-sm);line-height:var(--body-sm-lh)}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:52px;display:flex;align-items:center;
  background:var(--base-white);border-bottom:1px solid var(--hair)}
.nav-in{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px}

.nav-links{margin-left:auto;display:flex;gap:30px}
.nav-links a{font-size:var(--body-sm);font-weight:400;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-demo{font-size:var(--body-sm);font-weight:400;color:var(--accent)}
/* the nav is an opaque white bar everywhere on the page */
/* on phones the wordmark keeps the bar, and the two links step aside for it */
@media (max-width:640px){.nav-links{display:none}}

/* ── brand mark (nav) ── */
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{width:auto}
.logo .logo-full{display:block;height:20px}

/* ── footer ── */
.footer{padding:clamp(32px,5vh,56px) 24px;text-align:center}
.footer .line{font-size:var(--body-sm);color:var(--muted);display:inline-flex;flex-wrap:wrap;justify-content:center;gap:14px}
.footer .line a:hover{color:var(--ink)}
.footer .sep{color:var(--hair)}

/* ── cookie consent ──
   GDPR / ePrivacy: no analytics before an explicit opt-in, refusing is one
   click and as prominent as accepting, and consent can be withdrawn later
   through the "Cookievoorkeuren" button in the footer. */
.linklike{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--gray-300)}
.linklike:hover{color:var(--ink);text-decoration-color:currentColor}
.cc{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  padding:0 16px 16px;pointer-events:none}
.cc[data-open]{display:block}
.cc-in{pointer-events:auto;max-width:960px;margin:0 auto;background:var(--panel);
  border:1px solid var(--hair);border-radius:16px;padding:22px 24px;
  box-shadow:0 2px 4px rgba(27,7,60,0.04),0 30px 70px -40px rgba(27,7,60,0.34);
  display:flex;align-items:center;gap:clamp(18px,3vw,36px)}
.cc h2{font-size:var(--h6);line-height:var(--h6-lh);margin-bottom:6px}
.cc p{font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--ink);max-width:68ch}
.cc p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cc-actions{display:flex;gap:12px;flex:0 0 auto}
/* both choices carry the same weight: same size, same shape, same brand
   colour, and refusing comes first in DOM, focus and reading order */
/* same component, md size: 40px tall, 8px radius, Regular 400 */
.cc-btn{appearance:none;cursor:pointer;white-space:nowrap;border-radius:var(--radius-btn);
  display:inline-flex;align-items:center;justify-content:center;min-width:152px;
  padding:9px 16px;font-family:var(--font);font-size:var(--body-sm);
  line-height:var(--body-sm-lh);font-weight:400;box-shadow:var(--shadow-xs);
  transition:background .2s,border-color .2s,color .2s}
.cc-btn.accept{background:var(--accent);color:var(--base-white);border:1px solid var(--accent)}
.cc-btn.accept:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.cc-btn.decline{background:var(--panel);color:var(--accent);border:1px solid var(--accent)}
.cc-btn.decline:hover{background:var(--accent-tint)}
@media (max-width:760px){
  .cc-in{flex-direction:column;align-items:stretch;gap:18px;padding:20px}
  .cc-actions{flex-direction:column}
  .cc-btn{width:100%}
}

/* ── legal / prose pages ── */
.legal{max-width:780px;margin:0 auto;
  padding:calc(52px + clamp(48px,8vh,96px)) 24px clamp(72px,11vh,130px)}
.legal .lede{margin-top:14px;font-size:var(--body-lg);line-height:var(--body-lg-lh);color:var(--muted)}
.legal .meta{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair);
  font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--muted)}
.legal h2{font-size:var(--h4-fluid);line-height:var(--h4-lh);margin:clamp(40px,6vh,64px) 0 14px}
.legal h3{font-size:var(--h5);line-height:var(--h5-lh);margin:32px 0 10px}
.legal p{margin-bottom:16px}
.legal ul{margin:0 0 16px 22px}
.legal li{margin-bottom:10px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--accent-hover)}
/* Run-in labels inside body copy. The system has one body style and no bold
   weight, and Outfit is only defined from 20px up, so emphasis is carried by
   Brand/700, which the Colors page lists as an accessible text colour. */
.legal strong,.legal .short b{font-weight:400;color:var(--accent-hover)}
/* "In Short" summaries ride on Brand/50, the system's tinted-surface role */
.legal .short{background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  border-radius:12px;padding:14px 18px;margin-bottom:18px;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);color:var(--ink)}
/* table of contents */
.legal .toc{background:var(--panel);border:1px solid var(--hair);border-radius:16px;
  padding:24px 28px;margin-top:clamp(32px,5vh,48px)}
.legal .toc h2{font-size:var(--h6);line-height:var(--h6-lh);margin:0 0 12px}
.legal .toc ol{margin:0 0 0 20px}
.legal .toc li{margin-bottom:7px;font-size:var(--body-sm);line-height:var(--body-sm-lh)}
/* cookie / third-party tables */
.legal .tbl{width:100%;margin:8px 0 20px;border-collapse:collapse;
  font-size:var(--body-sm);line-height:var(--body-sm-lh);text-align:left}
.legal .tbl th,.legal .tbl td{border-bottom:1px solid var(--hair);padding:12px 14px;vertical-align:top}
.legal .tbl th{font-weight:400;color:var(--ink);background:var(--gray-100)}
.legal .tbl td{color:var(--ink-2)}
/* the system has two typefaces and no monospace, so a cookie name stays in
   Space Grotesk and is marked out by a tinted chip instead */
.legal .tbl code{font-family:var(--font);font-size:var(--caption);
  line-height:var(--caption-lh);background:var(--gray-100);
  border-radius:4px;padding:2px 6px;white-space:nowrap}
.legal .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal .actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 28px}
@media (max-width:520px){.legal .actions .pill{width:100%;justify-content:center}}