/* Halingo Support bundle, built by 02-Website/odoo/83-halingo-support-assets.js on 2026-09-28. Do not edit in Odoo. */

/* layer 0: self-hosted fonts */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/web/content/1282/inter-latin-400-normal.woff2?unique=68f645c6b6') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/web/content/1283/inter-latin-500-normal.woff2?unique=6b66c741bf') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/web/content/1284/inter-latin-600-normal.woff2?unique=e0d61f6dc5') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/web/content/1285/inter-latin-700-normal.woff2?unique=5197a7aeb2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('/web/content/1286/inter-tight-latin-500-normal.woff2?unique=eafebe6f87') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/web/content/1287/inter-tight-latin-600-normal.woff2?unique=e40dc7ea46') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('/web/content/1288/inter-tight-latin-700-normal.woff2?unique=9a8514b5e4') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('/web/content/1289/source-serif-4-latin-400-italic.woff2?unique=4eae1c91ec') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:600;font-display:swap;src:url('/web/content/1290/source-serif-4-latin-600-italic.woff2?unique=b7f48d6505') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/web/content/1291/jetbrains-mono-latin-400-normal.woff2?unique=3ae6215182') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/web/content/1292/jetbrains-mono-latin-500-normal.woff2?unique=35c2a72b75') format('woff2');}

/* layer 1: Halingo design system, tokens and kit (Halingo-Brand 08-DesignSystem) */

/* ==========================================================================
   2. DEMO KIT TOKENS — one design, every surface
   ========================================================================== */
/* @generated-tokens:start — colour VALUES are owned by data/tokens.json and verified against it by _shared/generate-tokens.mjs (npm run check-tokens); edit values in tokens.json. The inline annotations below are editorial and live here; the checker fails if any value drifts from tokens.json. */
:root {
  /* semantic color tier (values live in data/tokens.json; each hex equals one raw-tier entry) */
  --ds-primary: #077058; /* raw: teal-700 */
  --ds-primary-hover: #00513f; /* raw: teal-800 */
  --ds-primary-deep: #003d30; /* raw: teal-900 */
  --ds-primary-pressed: #003d30; /* raw: teal-900 */
  --ds-primary-bright: #0bb291; /* raw: teal-400; Halingo Teal, the brand signature: brand surfaces, headline accents, selected/brand fills behind dark text, data-viz. Never carries white text (2.70:1) */
  --ds-primary-mid: #37b799; /* raw: teal-380; 3D-mark front face; illustration + data-viz, not for type */
  --ds-primary-light: #71c4ac; /* raw: teal-320; 3D-mark top face; illustration + data-viz, not for type */
  --ds-primary-soft: #d8f2ea; /* raw: teal-100 */
  --ds-on-primary: #ffffff; /* raw: white */
  --ds-on-primary-secondary: #d8f2ea; /* raw: teal-100 */
  --ds-accent: #ed8b00; /* raw: orange-600 */
  --ds-accent-hover: #d67d00; /* raw: orange-700 */
  --ds-on-accent: #0f1f1b; /* raw: ink-900; text/icons on accent fills other than the CTA button (badges, chips, banners): ink, 6.73:1 AA */
  --ds-on-accent-cta: #ffffff; /* raw: white; CTA BUTTON ONLY — owner decision 2026-07-12: white on orange, a documented WCAG AA exception (2.53:1, not compliant). Everything else on orange uses onAccent (ink) */
  --ds-accent-text: #9c5b00; /* raw: orange-800 */
  --ds-accent-soft: #ffe7c2; /* raw: orange-100 */
  --ds-on-accent-soft: #0f1f1b; /* raw: ink-900 */
  --ds-canvas: #f7f8f5; /* raw: gray-050 */
  --ds-surface: #ffffff; /* raw: white */
  --ds-surface-raised: #ffffff; /* raw: white */
  --ds-surface-sunken: #f3f4f1; /* raw: gray-075 */
  --ds-ink: #0f1f1b; /* raw: ink-900 */
  --ds-text-soft: #3d4f4a; /* raw: gray-700 */
  --ds-text-muted: #5c6461; /* raw: gray-600 */
  --ds-text-placeholder: #5c6461; /* raw: gray-600 */
  --ds-disabled-text: #9aa39f; /* raw: gray-400 */
  --ds-border: #e1e7e3; /* raw: gray-300 */
  --ds-border-disabled: #b9bebb; /* raw: gray-350 */
  --ds-border-strong: #6f7d77; /* raw: gray-500; WCAG 1.4.11: >= 3:1 vs surface (current app uses #a9b6b0 = 2.1:1, fails) */
  --ds-divider: #e8edea; /* raw: gray-200 */
  --ds-focus: #077058; /* raw: teal-700 */
  --ds-focus-on-primary: #ffffff; /* raw: white */
  --ds-selection: #d8f2ea; /* raw: teal-100 */
  --ds-selection-hover: #b0decd; /* raw: teal-200 */
  --ds-hover-wash: #f0f5f2; /* raw: gray-100 */
  --ds-disabled-bg: #eceeed; /* raw: gray-150 */
  --ds-info: #0b6bcb; /* raw: blue-600 */
  --ds-info-soft: #e3effb; /* raw: blue-100 */
  --ds-on-info-soft: #0a4f96; /* raw: blue-800 */
  --ds-success: #1b7d43; /* raw: green-600 */
  --ds-success-soft: #def2e4; /* raw: green-100 */
  --ds-on-success-soft: #135c31; /* raw: green-800 */
  --ds-warning: #9a6700; /* raw: yellow-700 */
  --ds-warning-soft: #fff3d1; /* raw: yellow-100 */
  --ds-on-warning-soft: #7a4c00; /* raw: yellow-800 */
  --ds-warning-solid: #ffb84d; /* raw: yellow-400 */
  --ds-error: #b3261e; /* raw: red-600 */
  --ds-error-soft: #fde5e2; /* raw: red-100 */
  --ds-on-error-soft: #8f1d12; /* raw: red-800 */
  --ds-critical: #8f1d12; /* raw: red-800 */
  --ds-neutral-soft: #e3e8e5; /* raw: gray-250 */
  --ds-on-neutral-soft: #3d4643; /* raw: gray-750 */
  --ds-overlay: rgba(15,26,22,0.5);
  --ds-overlay-subtle: rgba(15,23,42,0.28);
  --ds-inverse-surface: #26302c; /* raw: ink-800 */
  --ds-inverse-error-text: #ff9d92; /* raw: red-300 */
  --ds-inverse-error-soft: #7a2c24; /* raw: red-900 */
  --ds-inverse-error-deep: #3a1512; /* raw: red-950 */
  --ds-inverse-warning-text: #ffd9a0; /* raw: orange-200 */
  --ds-amount-positive: #15633a; /* raw: green-700 */
  --ds-amount-negative: #a82018; /* raw: red-700 */
  --ds-chart-1: #0bb291; --ds-chart-2: #ed8b00; --ds-chart-3: #1e6b91; --ds-chart-4: #9c6bb5; --ds-chart-5: #c46c5a; --ds-chart-6: #5f8c73;
  --ds-chart-seq-1: #eaf7f2; --ds-chart-seq-2: #c6e8da; --ds-chart-seq-3: #8fd4bc; --ds-chart-seq-4: #56bfa0; --ds-chart-seq-5: #0bb291; --ds-chart-seq-6: #077058; --ds-chart-seq-7: #08504c; /* raw: teal-075 · teal-175 · teal-250 · teal-330 · teal-400 · teal-700 · teal-940 */
  --ds-chart-div-1: #ed8b00; --ds-chart-div-2: #f7b86d; --ds-chart-div-3: #e1e7e3; --ds-chart-div-4: #56bfa0; --ds-chart-div-5: #0bb291; /* raw: orange-600 · orange-300 · gray-300 · teal-330 · teal-400 */
  --ds-map-marker: #077058; /* raw: teal-700 */
  --ds-map-marker-selected: #ed8b00; /* raw: orange-600 */
  /* event identity triples (identity is not status) */
  --ds-event-1-fill: #00614e; --ds-event-1-on: #ffffff; --ds-event-1-line: #003d30; /* teal */
  --ds-event-2-fill: #4a5f94; --ds-event-2-on: #ffffff; --ds-event-2-line: #2e3f69; /* blauw */
  --ds-event-3-fill: #59318f; --ds-event-3-on: #ffffff; --ds-event-3-line: #3d2065; /* paars */
  --ds-event-4-fill: #b03a74; --ds-event-4-on: #ffffff; --ds-event-4-line: #7c2450; /* framboos */
  --ds-event-5-fill: #a87b41; --ds-event-5-on: #0f1f1b; --ds-event-5-line: #6e4e22; /* oker */
  --ds-event-6-fill: #3e96a8; --ds-event-6-on: #0f1f1b; --ds-event-6-line: #14606e; /* turkoois */
  /* shape */
  --ds-radius-sm: 6px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-pill: 999px;
  /* spacing scale: --ds-space-N = N x 4px, never rebound */
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px;
  /* sizing + density defaults (comfortable) */
  --ds-control-h: 40px; --ds-control-h-sm: 32px;
  --ds-row-h: 48px; --ds-row-pad: 16px;
  --ds-icon-sm: 16px; --ds-icon-md: 20px; --ds-icon-lg: 24px; --ds-icon-xl: 32px;
  --ds-size-sidebar: 240px; --ds-touch-target-min: 44px;
  /* focus geometry (ring color = --ds-focus / --ds-focus-on-primary) */
  --ds-focus-ring-w: 2px; --ds-focus-ring-offset: 2px;
  /* typography */
  --ds-font: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-display: Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-label: 'Inter Tight', Inter, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --ds-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ds-fs-body: 14px; --ds-fs-sm: 13px; --ds-fs-xs: 12px;
  /* motion */
  --ds-motion-snap: 120ms; --ds-motion-soft: 200ms; --ds-motion-flow: 300ms; --ds-motion-page: 400ms; --ds-motion-data: 600ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1); --ds-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  /* z-index */
  --ds-z-sticky: 10; --ds-z-appbar: 1100; --ds-z-drawer: 1200; --ds-z-modal: 1400; --ds-z-snackbar: 1500; --ds-z-tooltip: 1600; --ds-z-blocking: 1700;
  /* elevation */
  --ds-shadow-raised: 0 1px 3px rgba(16,35,29,.08), 0 1px 2px rgba(16,35,29,.05);
  --ds-shadow-overlay: 0 12px 32px rgba(16,35,29,.18);
  /* component tier: component.<name>.<property> -> --ds-<name>-<property> */
  --ds-appbar-h: 56px; --ds-appbar-h-compact: 48px;
  --ds-button-h: var(--ds-control-h); --ds-button-h-sm: var(--ds-control-h-sm); --ds-button-radius: var(--ds-radius-md);
  --ds-table-row-h: var(--ds-row-h); --ds-table-row-pad: var(--ds-row-pad);
  --ds-card-radius: var(--ds-radius-lg);
  --ds-badge-h: 24px; --ds-badge-radius: var(--ds-radius-pill);
  --ds-modal-w-sm: 480px; --ds-modal-w-md: 640px; --ds-modal-w-lg: 800px;
  --ds-drawer-w-form: 420px; --ds-drawer-w-detail: 560px;
}
/* density: the ONE density mechanism. .density-compact rebinds density tokens only
   (control heights, row height, row padding, table body size); --ds-space-N is never rebound. */
.density-compact { --ds-control-h: 32px; --ds-control-h-sm: 28px; --ds-row-h: 36px;
  --ds-row-pad: 12px; --ds-fs-body: 13px; }
/* @generated-tokens:end */

.ds { font-family: var(--ds-font); color: var(--ds-ink); font-size: var(--ds-fs-body); }

/* ==========================================================================
   DEMO KIT COMPONENTS (.ds-*) — review prototypes, NOT production code
   ========================================================================== */

/* Buttons */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ds-control-h); padding: 0 18px; border-radius: var(--ds-radius-md);
  font: 600 var(--ds-fs-body)/1 var(--ds-font); cursor: pointer; border: 1px solid transparent;
  text-decoration: none; transition: background .15s ease, border-color .15s ease; white-space: nowrap; }
.ds-btn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-btn--primary { background: var(--ds-primary); color: var(--ds-on-primary); }
.ds-btn--primary:hover { background: var(--ds-primary-hover); }
.ds-btn--cta { background: var(--ds-accent); color: var(--ds-on-accent-cta); }
.ds-btn--cta:hover { background: var(--ds-accent-hover); }
.ds-btn--secondary { background: var(--ds-surface); color: var(--ds-primary); border-color: var(--ds-border-strong); }
.ds-btn--secondary:hover { background: var(--ds-hover-wash); }
.ds-btn--ghost { background: transparent; color: var(--ds-primary); }
.ds-btn--ghost:hover { background: var(--ds-hover-wash); }
.ds-btn--destructive { background: var(--ds-error); color: #fff; }
/* pressed (:active) — a TOKEN per state, never a darken() of hover */
.ds-btn--primary:active { background: var(--ds-primary-pressed); }
.ds-btn--cta:active { background: var(--ds-accent-hover); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.ds-btn--secondary:active, .ds-btn--ghost:active { background: var(--ds-selection); }
.ds-btn--destructive:active { background: var(--ds-critical); }
.ds-chip:active, .ds-menuitem:active, .ds-pagebtn:active, .ds-tab:active { background: var(--ds-selection); }
.ds-btn--destructive:hover { background: #8f1d12; }
.ds-btn--sm { height: var(--ds-control-h-sm); padding: 0 12px; font-size: var(--ds-fs-sm); }
.ds-btn[disabled], .ds-btn--disabled { background: var(--ds-disabled-bg) !important;
  color: var(--ds-disabled-text) !important; border-color: transparent !important; cursor: not-allowed; }
.ds-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.ds-btn--loading::after { content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: ds-spin .7s linear infinite; }
.ds-btn--secondary.ds-btn--loading::after, .ds-btn--ghost.ds-btn--loading::after
  { border-color: rgba(0,107,86,.25); border-top-color: var(--ds-primary); }
.ds-iconbtn { width: var(--ds-control-h); padding: 0; }
.ds-iconbtn.ds-btn--sm { width: var(--ds-control-h-sm); }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Fields */
.ds-field { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin: 0 0 var(--ds-space-4); }
.ds-label { font: 600 var(--ds-fs-sm)/1.3 var(--ds-font); color: var(--ds-ink); }
.ds-label .req { color: var(--ds-error); margin-left: 2px; }
.ds-label .opt { color: var(--ds-text-muted); font-weight: 400; font-size: var(--ds-fs-xs); margin-left: 4px; }
.ds-input, .ds-select, .ds-textarea { height: var(--ds-control-h); border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md); padding: 0 12px; font: 400 var(--ds-fs-body)/1.4 var(--ds-font);
  background: var(--ds-surface); color: var(--ds-ink); width: 100%; }
.ds-textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-primary); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: 2px solid var(--ds-focus); outline-offset: -1px; border-color: var(--ds-focus); }
.ds-input[disabled] { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: var(--ds-border-disabled); }
.ds-input[readonly] { background: var(--ds-canvas); border-style: dashed; }
.ds-field.has-error .ds-input, .ds-field.has-error .ds-select, .ds-field.has-error .ds-textarea
  { border-color: var(--ds-error); }
.ds-field.has-error .ds-input:focus { outline-color: var(--ds-error); }
.ds-help { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }
.ds-error-text { font-size: var(--ds-fs-xs); color: var(--ds-error); font-weight: 600;
  display: flex; gap: 5px; align-items: flex-start; }
.ds-input-affix { position: relative; }
.ds-input-affix .ds-input { padding-right: 44px; }
.ds-input-affix .affix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.ds-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--ds-fs-body); margin: 6px 0; }
.ds-check input { width: 18px; height: 18px; accent-color: var(--ds-primary); margin-top: 1px; }

/* Status badge */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ds-radius-pill);
  padding: 2px 10px; font: 700 11px/1.6 var(--ds-font-label); text-transform: uppercase;
  letter-spacing: .12em; }
.ds-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.ds-badge--success { background: var(--ds-success-soft); color: var(--ds-on-success-soft); }
.ds-badge--warning { background: var(--ds-warning-soft); color: var(--ds-on-warning-soft); }
.ds-badge--error   { background: var(--ds-error-soft);   color: var(--ds-on-error-soft); }
.ds-badge--info    { background: var(--ds-info-soft);    color: var(--ds-on-info-soft); }
.ds-badge--neutral { background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft); }
.ds-badge--brand   { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }

/* active sort column reads without hunting for the 10px arrow */
.ds-table th[aria-sort] { background: var(--ds-hover-wash); color: var(--ds-primary); }

/* Eyebrow */
.ds-eyebrow { font: 700 11px/1.4 var(--ds-font-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ds-primary); }

/* Cards */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-raised); }
.ds-card-header { display: flex; align-items: center; gap: 10px; padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-divider); }
.ds-card-title { font: 600 15px/1.3 var(--ds-font); margin: 0; }
.ds-card-body { padding: var(--ds-space-5); }
.ds-kpi { padding: var(--ds-space-4) var(--ds-space-5); }
.ds-kpi .kpi-label { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; }
.ds-kpi .kpi-value { font: 700 26px/1.15 var(--ds-font-display); font-variant-numeric: tabular-nums; margin: 2px 0; }
.ds-kpi .kpi-delta { font-size: var(--ds-fs-xs); font-weight: 600; }
.ds-kpi .kpi-delta.up { color: var(--ds-success); } .ds-kpi .kpi-delta.down { color: var(--ds-error); }

/* Table */
.ds-table { width: 100%; border-collapse: collapse; background: var(--ds-surface);
  font-size: var(--ds-fs-body); }
.ds-table th { text-align: left; font: 600 var(--ds-fs-xs)/1.4 var(--ds-font); color: var(--ds-text-muted);
  text-transform: uppercase; letter-spacing: .05em; padding: 10px var(--ds-row-pad);
  border-bottom: 2px solid var(--ds-border); background: var(--ds-surface); }
.ds-table td { padding: 0 var(--ds-row-pad); height: var(--ds-row-h); border-bottom: 1px solid var(--ds-divider); }
.ds-table tbody tr:hover { background: var(--ds-hover-wash); }
.ds-table tbody tr.is-selected { background: var(--ds-selection); }
.ds-table tbody tr.is-selected:hover { background: var(--ds-selection-hover); }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table-wrap { position: relative; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; }
.ds-table-toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 14px;
  background: var(--ds-surface); border-bottom: 1px solid var(--ds-divider); flex-wrap: wrap; }

/* Alerts */
.ds-alert { display: flex; gap: 10px; border-radius: var(--ds-radius-md); padding: 12px 14px;
  font-size: var(--ds-fs-body); border: 1px solid; }
.ds-alert--info    { background: var(--ds-info-soft);    border-color: #b9d7f3; color: var(--ds-on-info-soft); }
.ds-alert--success { background: var(--ds-success-soft); border-color: #b5e0c3; color: var(--ds-on-success-soft); }
.ds-alert--warning { background: var(--ds-warning-soft); border-color: #ecd9a0; color: var(--ds-on-warning-soft); }
.ds-alert--error   { background: var(--ds-error-soft);   border-color: #f3c1bb; color: var(--ds-on-error-soft); }

/* Tabs */
.ds-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--ds-divider); }
.ds-tab { padding: 10px 16px; font: 600 var(--ds-fs-body)/1 var(--ds-font); color: var(--ds-text-muted);
  border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.ds-tab[aria-selected="true"] { color: var(--ds-primary); border-bottom-color: var(--ds-primary); }
.ds-tab:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; border-radius: 4px; }

/* Modal (static demo) */
.ds-modal-demo { background: var(--ds-overlay); padding: 40px 20px; border-radius: var(--ds-radius-md); }
.ds-modal { background: var(--ds-surface); border-radius: var(--ds-radius-lg); max-width: 480px;
  margin: 0 auto; box-shadow: var(--ds-shadow-overlay); }
.ds-modal-header { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ds-divider); }
.ds-modal-title { font: 600 16px/1.3 var(--ds-font); margin: 0; }
.ds-modal-body { padding: 20px; }
.ds-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--ds-divider); }

/* Empty state */
.ds-empty { text-align: center; padding: 40px 24px; color: var(--ds-text-muted); }
.ds-empty .ds-empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--ds-primary-soft);
  color: var(--ds-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ds-empty h3 { color: var(--ds-ink); margin: 0 0 4px; font-size: 15px; }
.ds-empty p { margin: 0 0 14px; font-size: var(--ds-fs-sm); }

/* Skeleton */
.ds-skeleton { display: inline-block; vertical-align: middle;
  background: linear-gradient(90deg, #eceeed 25%, #f6f7f6 45%, #eceeed 65%);
  background-size: 200% 100%; animation: ds-shimmer 1.4s infinite; border-radius: 6px; height: 14px; }
.ds-skeleton--right { display: block; margin-left: auto; }
@keyframes ds-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ds-skeleton, .ds-btn--loading::after { animation: none; }
}

/* App-shell miniature (for layout pages) */
.ds-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 420px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden;
  background: var(--ds-canvas); }
.ds-shell-nav { background: var(--ds-primary); color: #fff; padding: 14px 10px; font-size: var(--ds-fs-sm); }
.ds-shell-nav .navitem { display: flex; gap: 10px; align-items: center; padding: 8px 12px;
  border-radius: 8px; color: var(--ds-on-primary-secondary); }
.ds-shell-nav .navitem.active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.ds-shell-main { position: relative; padding: 20px; }
.ds-pagehead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.ds-pagehead h1, .ds-pagehead .ds-pagetitle { font: 700 22px/1.2 var(--ds-font-display); margin: 0; letter-spacing: -0.01em; }
.ds-pagehead .actions { margin-left: auto; display: flex; gap: 10px; }

/* toast */
.ds-toast { display: inline-flex; gap: 10px; align-items: center; background: #26302c; color: #fff;
  border-radius: var(--ds-radius-md); padding: 12px 16px; font-size: var(--ds-fs-body);
  box-shadow: var(--ds-shadow-overlay); }

/* misc */
.ds-divider { border: 0; border-top: 1px solid var(--ds-divider); margin: var(--ds-space-4) 0; }
.ds-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ds-stack { display: flex; flex-direction: column; gap: 12px; }

/* ---- navigation demo kit (components/navigation/*) ---- */
.ds-appbar { display: flex; align-items: center; gap: 8px; height: var(--ds-appbar-h, 56px);
  padding: 0 12px; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); min-width: 0; }
.ds-appbar-title { font: 600 15px/1.2 var(--ds-font); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.ds-appbar .spacer { flex: 1; min-width: 8px; }
.ds-ghosticon { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ds-ink);
  cursor: pointer; position: relative; flex: none; }
.ds-ghosticon:hover { background: var(--ds-hover-wash); }
.ds-ghosticon:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-countdot { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px;
  border-radius: 999px; background: var(--ds-error); color: #fff; font: 700 10px/16px var(--ds-font);
  padding: 0 4px; text-align: center; }
.ds-searchbox { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md);
  background: var(--ds-surface); color: var(--ds-text-muted); font-size: var(--ds-fs-sm); min-width: 0; }
.ds-searchbox kbd { border: 1px solid var(--ds-border); border-radius: 4px; padding: 0 5px;
  font-size: 11px; color: var(--ds-text-muted); background: var(--ds-canvas); margin-left: auto; }
.ds-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ds-primary-soft);
  color: var(--ds-primary-hover); display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--ds-font); flex: none; }
/* shell variants */
.ds-shell--bar { grid-template-rows: auto 1fr; }
.ds-shell--bar .ds-shell-nav { grid-row: 1 / span 2; }
.ds-shell--rail { grid-template-columns: 60px 1fr; }
.ds-shell--rail .ds-shell-nav { padding: 14px 8px; }
.ds-shell--rail .navitem { justify-content: center; padding: 8px; }
.ds-shell--rail .navlabel, .ds-shell--rail .ds-navsection, .ds-shell--rail .ds-navbadge,
.ds-shell--rail .ds-navbrand .sub { display: none; }
/* collapsed rail: the logo drops to the mark alone (brand rule), items center */
.ds-shell--rail .ds-logo { font-size: 0; }
.ds-shell--rail .ds-logo::before { margin-right: 0; }
.ds-shell--rail .ds-logo::after { content: none; }
.ds-shell--rail .navitem span:not(.ds-navbadge) { display: none; }
.ds-shell--rail .scr-brand { text-align: center; }
.ds-shell--rail .scr-brand .b2 { display: none; }
.ds-navbrand { display: flex; align-items: baseline; gap: 6px; color: #fff; font: 700 15px/1.2 var(--ds-font);
  padding: 4px 12px 14px; }
.ds-navbrand .sub { font: 400 12px/1.2 var(--ds-font); color: var(--ds-on-primary-secondary); }
.ds-shell-nav .navitem { border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
  font: inherit; }
.ds-shell-nav .navitem:hover { background: rgba(255,255,255,.08); color: #fff; }
.ds-shell-nav .navitem:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; }
.ds-shell-nav .navitem.focus-old:focus-visible,
.ds-shell-nav .navitem.focus-old { outline: 2px solid var(--ds-accent); outline-offset: -2px; border-radius: 8px; }
.ds-navsection { font: 700 10px/1.4 var(--ds-font); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-on-primary-secondary); margin: 14px 12px 4px; }
.ds-navbadge { margin-left: auto; background: var(--ds-accent); color: var(--ds-on-accent);
  border-radius: 999px; font: 700 10.5px/1.6 var(--ds-font); padding: 0 7px; flex: none; }
.ds-mobiledrawer { width: 250px; background: var(--ds-primary); border-radius: 0 12px 12px 0;
  padding: 14px 10px; min-height: 320px; color: #fff; font-size: var(--ds-fs-sm); }
.ds-skiplink { display: inline-block; background: var(--ds-primary); color: #fff; padding: 8px 14px;
  border-radius: 0 0 8px 8px; font: 600 var(--ds-fs-sm)/1.2 var(--ds-font); text-decoration: none; }
/* hidden until keyboard focus (the app pattern); demos inherit the same behavior */
a.ds-skiplink { position: absolute; left: -9999px; z-index: 10; }
a.ds-skiplink:focus { position: static; left: auto; outline: 2px solid var(--ds-focus); outline-offset: 2px; }
/* page header */
.ds-pagehead-block { flex: 1; min-width: 220px; }
.ds-pagehead .ds-pagesub { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-fs-sm);
  max-width: 60ch; }
.ds-pagehead .ds-pagemeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ds-pagehead-art { width: 104px; height: 72px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--ds-primary-soft), var(--ds-surface));
  border: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: center;
  color: var(--ds-primary); }
.ds-actionbar { display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  padding: 10px 16px; background: var(--ds-surface); border-top: 1px solid var(--ds-border);
  box-shadow: 0 -2px 8px rgba(15,31,27,.06); }
/* breadcrumbs */
.ds-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none;
  margin: 0; padding: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
.ds-crumbs li { display: flex; align-items: center; gap: 4px; }
.ds-crumbs a { color: var(--ds-text-muted); text-decoration: none; border-radius: 4px; }
.ds-crumbs a:hover { color: var(--ds-primary); text-decoration: underline; }
.ds-crumbs a:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-crumbs .sep { color: var(--ds-border-strong); user-select: none; }
.ds-crumbs [aria-current="page"] { color: var(--ds-ink); font-weight: 600; }
/* nav tabs additions */
.ds-tabs--scroll { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: thin; }
.ds-tabcount { display: inline-block; margin-left: 6px; background: var(--ds-neutral-soft);
  color: var(--ds-on-neutral-soft); border-radius: 999px; font: 600 11px/1.6 var(--ds-font); padding: 0 7px; }
.ds-tab[aria-selected="true"] .ds-tabcount { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }
/* stepper */
.ds-steps { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.ds-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; position: relative; font-size: var(--ds-fs-xs); color: var(--ds-text-muted); min-width: 68px; }
.ds-step::before { content: ""; position: absolute; top: 14px; left: calc(-50% + 22px);
  right: calc(50% + 22px); height: 2px; background: var(--ds-border); }
.ds-step:first-child::before { display: none; }
.ds-step .dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font: 700 12px/1 var(--ds-font); background: var(--ds-surface);
  border: 2px solid var(--ds-border-strong); color: var(--ds-text-muted); z-index: 1; }
.ds-step.done .dot { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }
.ds-step.done::before, .ds-step.current::before { background: var(--ds-primary); }
.ds-step.current .dot { border-color: var(--ds-primary); color: var(--ds-primary);
  box-shadow: 0 0 0 4px var(--ds-primary-soft); }
.ds-step.current { color: var(--ds-ink); font-weight: 600; }
.ds-step.error .dot { background: var(--ds-error); border-color: var(--ds-error); color: #fff; }
.ds-step.error { color: var(--ds-error); font-weight: 600; }
.ds-stepdots { display: flex; gap: 6px; align-items: center; }
.ds-stepdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-border); }
.ds-stepdots i.done { background: var(--ds-primary); }
.ds-stepdots i.current { background: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-soft); }
/* pagination */
.ds-pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 14px;
  border-top: 1px solid var(--ds-divider); background: var(--ds-surface);
  font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
.ds-pager .range { font-variant-numeric: tabular-nums; }
.ds-pagebtn { min-width: 32px; height: 32px; border-radius: var(--ds-radius-sm); padding: 0 6px;
  border: 1px solid transparent; background: transparent; color: var(--ds-ink);
  font: 600 13px/1 var(--ds-font); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; }
.ds-pagebtn:hover { background: var(--ds-hover-wash); }
.ds-pagebtn[aria-current="page"] { background: var(--ds-primary); color: #fff; }
.ds-pagebtn:disabled { color: var(--ds-disabled-text); cursor: not-allowed; background: none; }
.ds-pagebtn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
/* menus */
.ds-menu { background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-overlay); padding: 6px;
  min-width: 220px; font-size: var(--ds-fs-body); display: inline-block; vertical-align: top; }
.ds-menuitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--ds-radius-sm); border: 0; background: none;
  font: 400 var(--ds-fs-body)/1.3 var(--ds-font); color: var(--ds-ink); cursor: pointer;
  text-decoration: none; }
.ds-menuitem:hover { background: var(--ds-hover-wash); }
.ds-menuitem:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
.ds-menuitem[aria-checked="true"], .ds-menuitem.selected { background: var(--ds-selection);
  font-weight: 600; color: var(--ds-primary-hover); }
.ds-menuitem .hint { margin-left: auto; color: var(--ds-text-muted); font-size: var(--ds-fs-xs); }
.ds-menuitem.danger { color: var(--ds-error); }
.ds-menusep { border: 0; border-top: 1px solid var(--ds-divider); margin: 6px 0; }
.ds-menuhead { padding: 8px 10px 4px; font: 600 var(--ds-fs-xs)/1.3 var(--ds-font);
  color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* --- demo-kit additions: data-display part 2 (tables & lists pages) --- */
.ds-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ds-cb { width: 16px; height: 16px; accent-color: var(--ds-primary); cursor: pointer; }
.ds-cb:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

/* sortable header cell (button inside th) */
.ds-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.ds-sort:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; border-radius: 4px; }
.ds-sort .arrow { font-size: 10px; line-height: 1; }
.ds-table th[aria-sort] .ds-sort { color: var(--ds-primary); }

/* row-link pattern: first-cell anchor stretches over the row */
.ds-table tr.is-linked { position: relative; }
.ds-rowlink { color: inherit; font-weight: 600; text-decoration: none; }
.ds-rowlink::after { content: ""; position: absolute; inset: 0; }
.ds-rowlink:hover { text-decoration: underline; }
.ds-rowlink:focus-visible { outline: none; }
.ds-rowlink:focus-visible::after { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
.ds-table tr.is-linked td.cell-actions { position: relative; z-index: 1; } /* actions stay clickable above the link */

/* selection bulk bar */
.ds-bulkbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; flex-wrap: wrap;
  background: var(--ds-selection); border-bottom: 1px solid var(--ds-border);
  font: 600 var(--ds-fs-sm)/1.4 var(--ds-font); color: var(--ds-primary-hover); }
.ds-bulkbar .spacer { margin-left: auto; }

/* pagination footer */
.ds-pager { display: flex; align-items: center; gap: 14px; justify-content: flex-end; padding: 8px 14px;
  border-top: 1px solid var(--ds-divider); background: var(--ds-surface);
  font-size: var(--ds-fs-sm); color: var(--ds-text-muted); flex-wrap: wrap; }
.ds-pager .range { font-variant-numeric: tabular-nums; }
.ds-pager select { height: 28px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); font: inherit; font-size: var(--ds-fs-sm); color: var(--ds-ink); }

/* sticky header inside a scrolling wrap */
.ds-table-wrap--scroll { max-height: 260px; overflow: auto; }
.ds-table--sticky th { position: sticky; top: 0; z-index: 2; box-shadow: 0 2px 0 var(--ds-border); border-bottom: 0; }

/* responsive table→card transform (container query) */
.ds-table-cq { container-type: inline-size; }
@container (max-width: 560px) {
  .ds-table--responsive thead { position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .ds-table--responsive, .ds-table--responsive tbody, .ds-table--responsive tr, .ds-table--responsive td { display: block; }
  .ds-table--responsive tr { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
    margin: 10px; padding: 6px 0; background: var(--ds-surface); box-shadow: var(--ds-shadow-raised); }
  .ds-table--responsive td { height: auto; min-height: 0; padding: 5px 14px; border-bottom: 0;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .ds-table--responsive td::before { content: attr(data-label); font: 600 var(--ds-fs-xs)/1.6 var(--ds-font);
    color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .05em; flex: none; }
  .ds-table--responsive td.num { text-align: right; }
  .ds-table--responsive tbody tr:hover { background: var(--ds-surface); }
}

/* list kit */
.ds-list { list-style: none; margin: 0; padding: 0; background: var(--ds-surface); }
.ds-list-group { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font: 700 var(--ds-fs-xs)/1.5 var(--ds-font); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ds-text-muted); background: var(--ds-canvas);
  border-top: 1px solid var(--ds-divider); border-bottom: 1px solid var(--ds-divider); }
.ds-list-group .grp-actions { margin-left: auto; text-transform: none; letter-spacing: 0; }
.ds-list-item { display: flex; gap: 12px; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--ds-divider); min-height: var(--ds-row-h); }
.ds-list-item .li-main { min-width: 0; flex: 1; }
.ds-list-item .li-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-list-item .li-meta { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }
.ds-list-item .li-side { text-align: right; flex: none; }
.ds-list-item .li-actions { display: flex; gap: 4px; flex: none; }
a.ds-list-item { text-decoration: none; color: inherit; }
a.ds-list-item:hover, li.ds-list-item.is-interactive:hover { background: var(--ds-hover-wash); }
a.ds-list-item:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }

/* description list */
.ds-dl-wrap { container-type: inline-size; }
.ds-dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; column-gap: 24px; margin: 0; }
.ds-dl dt { font: 600 var(--ds-fs-sm)/1.5 var(--ds-font); color: var(--ds-text-muted);
  padding: 8px 0; border-bottom: 1px solid var(--ds-divider); }
.ds-dl dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--ds-divider); min-width: 0; }
.ds-dl dt:last-of-type, .ds-dl dd:last-of-type { border-bottom: 0; }
.ds-dl .empty { color: var(--ds-text-muted); }
@container (max-width: 480px) {
  .ds-dl { grid-template-columns: 1fr; }
  .ds-dl dt { border-bottom: 0; padding-bottom: 0; }
  .ds-dl dd { padding-top: 2px; }
}

/* accordion (native details/summary demo) */
.ds-acc { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
.ds-acc + .ds-acc { margin-top: 8px; }
.ds-acc summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  font: 600 var(--ds-fs-body)/1.3 var(--ds-font); cursor: pointer; list-style: none; }
.ds-acc summary::-webkit-details-marker { display: none; }
.ds-acc summary::after { content: "▾"; margin-left: auto; color: var(--ds-text-muted); transition: transform .15s ease; }
.ds-acc[open] > summary::after { transform: rotate(180deg); }
.ds-acc summary:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; border-radius: var(--ds-radius-md); }
.ds-acc .acc-body { padding: 0 16px 14px; }
@media (prefers-reduced-motion: reduce) { .ds-acc summary::after { transition: none; } }

/* tabs additions */
.ds-tabs--scroll { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: thin; }
.ds-tab .count { background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft);
  border-radius: var(--ds-radius-pill); font-size: 11px; padding: 1px 7px; margin-left: 6px;
  font-variant-numeric: tabular-nums; }
.ds-tab[aria-selected="true"] .count { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }

/* file / document item */
.ds-file { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--ds-divider); background: var(--ds-surface); min-height: var(--ds-row-h); }
.ds-file .f-icon { width: 36px; height: 36px; border-radius: var(--ds-radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--ds-font); letter-spacing: .04em; }
.f-icon--pdf { background: var(--ds-error-soft); color: var(--ds-on-error-soft); }
.f-icon--img { background: var(--ds-info-soft); color: var(--ds-on-info-soft); }
.f-icon--doc { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }
.f-icon--audio { background: var(--ds-warning-soft); color: var(--ds-on-warning-soft); }
.f-icon--generic { background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft); }
.ds-file .f-main { flex: 1; min-width: 0; }
.ds-file .f-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-file .f-meta { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }
.ds-file .f-actions { display: flex; gap: 4px; flex: none; }
.ds-file--broken { box-shadow: inset 3px 0 0 var(--ds-error); }

/* --- data-display kit (status-badge, chip-tag, avatar, card, typography-display, timeline pages) --- */
/* solid status badge (all pairs measured in data/contrast-results.json) */
.ds-badge--solid-success { background: var(--ds-success); color: #fff; }
.ds-badge--solid-warning { background: #ffb84d; color: var(--ds-ink); }
.ds-badge--solid-error   { background: var(--ds-error); color: #fff; }
.ds-badge--solid-info    { background: var(--ds-info); color: #fff; }
.ds-badge--solid-neutral { background: #26302c; color: #fff; }
.ds-badge--solid-brand   { background: var(--ds-primary); color: #fff; }
.ds-badge--sm { padding: 1px 8px; font-size: 11px; }
/* chips & tags */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-border-strong);
  background: var(--ds-surface); color: var(--ds-ink); font: 500 var(--ds-fs-sm)/1 var(--ds-font);
  cursor: pointer; }
.ds-chip:hover { background: var(--ds-hover-wash); }
.ds-chip:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-chip[aria-pressed="true"], .ds-chip--selected { background: var(--ds-selection);
  border-color: var(--ds-primary); color: var(--ds-primary-hover); font-weight: 600; }
.ds-chip .ds-chip-x { display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.ds-chip .ds-chip-x:hover { background: rgba(0,0,0,.12); }
.ds-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: var(--ds-radius-sm); background: var(--ds-neutral-soft);
  color: var(--ds-on-neutral-soft); font: 500 var(--ds-fs-xs)/1.5 var(--ds-font); }
.ds-countbadge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ds-radius-pill);
  background: var(--ds-error); color: #fff; font: 700 11px/1 var(--ds-font);
  font-variant-numeric: tabular-nums; }
.ds-countbadge--muted { background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft); }
/* avatars & identity rows */
.ds-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; font: 600 14px/1 var(--ds-font); letter-spacing: .02em; }
.ds-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ds-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.ds-avatar--p0 { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }
.ds-avatar--p1 { background: var(--ds-info-soft); color: var(--ds-on-info-soft); }
.ds-avatar--p2 { background: var(--ds-success-soft); color: var(--ds-on-success-soft); }
.ds-avatar--p3 { background: var(--ds-warning-soft); color: var(--ds-on-warning-soft); }
.ds-avatar--p4 { background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft); }
.ds-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-identity .id-text { min-width: 0; }
.ds-identity .id-name { font-weight: 600; color: var(--ds-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ds-identity .id-meta { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* timeline */
.ds-timeline { list-style: none; margin: 0; padding: 0; }
.ds-tl-day { font: 600 var(--ds-fs-xs)/1.4 var(--ds-font); color: var(--ds-text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin: var(--ds-space-4) 0 var(--ds-space-2); }
.ds-tl-item { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 0 12px;
  position: relative; padding-bottom: var(--ds-space-4); }
.ds-tl-item::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px;
  width: 2px; background: var(--ds-divider); border-radius: 1px; }
.ds-tl-item:last-child::before, .ds-tl-item.is-last::before { display: none; }
.ds-tl-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft);
  font-size: 13px; }
.ds-tl-icon--success { background: var(--ds-success-soft); color: var(--ds-on-success-soft); }
.ds-tl-icon--error   { background: var(--ds-error-soft);   color: var(--ds-on-error-soft); }
.ds-tl-icon--info    { background: var(--ds-info-soft);    color: var(--ds-on-info-soft); }
.ds-tl-icon--warning { background: var(--ds-warning-soft); color: var(--ds-on-warning-soft); }
.ds-tl-body { font-size: var(--ds-fs-body); padding-top: 4px; }
.ds-tl-body .tl-actor { font-weight: 600; }
.ds-tl-time { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); margin-top: 2px;
  font-variant-numeric: tabular-nums; }
/* monetary / technical text display */
.ds-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-money--neg { color: var(--ds-amount-negative); }
.ds-money--pos { color: var(--ds-amount-positive); }
.ds-code { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: 0.92em;
  background: var(--ds-canvas); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); padding: 1px 6px; }
.ds-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* forms-page additions (components/forms/*) */
.ds-help-row { display: flex; gap: 8px; align-items: baseline; }
.ds-charcount { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); margin-left: auto;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-charcount.over { color: var(--ds-error); font-weight: 700; }
.ds-input--num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-input-affix--left .ds-input { padding-left: 34px; padding-right: 12px; }
.ds-input-affix .affix-left { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.ds-affix-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--ds-text-muted);
  border-radius: var(--ds-radius-sm); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; }
.ds-affix-btn:hover { background: var(--ds-hover-wash); color: var(--ds-ink); }
.ds-affix-btn:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; }
.ds-affix-btn[aria-pressed="true"] { color: var(--ds-primary); background: var(--ds-primary-soft); }
.ds-fieldset { border: 0; padding: 0; margin: 0 0 var(--ds-space-4); min-width: 0; }
.ds-fieldset > legend { font: 600 var(--ds-fs-sm)/1.3 var(--ds-font); color: var(--ds-ink);
  padding: 0; margin-bottom: 6px; }
.ds-fieldset .ds-help { margin-top: 2px; }
.ds-switch { position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--ds-fs-body); cursor: pointer; }
.ds-switch input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.ds-switch .track { flex: none; width: 40px; height: 22px; border-radius: var(--ds-radius-pill);
  background: var(--ds-border-strong); position: relative; transition: background .15s ease; }
.ds-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.ds-switch input:checked + .track { background: var(--ds-primary); }
.ds-switch input:checked + .track::after { transform: translateX(18px); }
.ds-switch input:focus-visible + .track { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-switch input[disabled] + .track { background: var(--ds-disabled-bg); }
.ds-switch input[disabled] ~ .switch-label { color: var(--ds-disabled-text); }
@media (prefers-reduced-motion: reduce) { .ds-switch .track, .ds-switch .track::after { transition: none; } }
.ds-valchip { display: inline-flex; align-items: center; gap: 6px; background: var(--ds-primary-soft);
  color: var(--ds-primary-hover); border-radius: var(--ds-radius-pill); padding: 2px 4px 2px 10px;
  font: 600 var(--ds-fs-xs)/1.6 var(--ds-font); }
.ds-valchip--count { padding: 2px 10px; background: var(--ds-neutral-soft); color: var(--ds-on-neutral-soft); }
.ds-valchip .x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 4px;
  font-size: 13px; line-height: 1.4; border-radius: var(--ds-radius-pill); }
.ds-valchip .x:hover { background: rgba(0,0,0,.08); }
.ds-valchip .x:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; }
.ds-listbox { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-overlay); max-width: 360px;
  margin-top: 4px; padding: 4px 0; font-size: var(--ds-fs-body); list-style: none; }
.ds-listbox .ds-option { padding: 8px 12px; cursor: pointer; display: flex;
  justify-content: space-between; gap: 10px; align-items: baseline; }
.ds-listbox .ds-option:hover, .ds-listbox .ds-option[aria-selected="true"] { background: var(--ds-hover-wash); }
.ds-listbox .ds-option .opt-meta { color: var(--ds-text-muted); font-size: var(--ds-fs-xs); }
.ds-listbox .ds-option mark { background: none; color: inherit; font-weight: 700; }
.ds-listbox .ds-empty-option { padding: 10px 12px; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }

/* layout-page additions (layouts/*) — .ds-appbar itself is defined once in the navigation
   kit above (height = --ds-appbar-h); only the extra hooks live here */
.ds-appbar .ds-appbar-spacer { margin-left: auto; }
.ds-avatar-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--ds-primary-soft);
  color: var(--ds-primary); font: 700 11px/26px var(--ds-font); text-align: center; flex: none; }
.ds-avatar-dot--lg { width: 44px; height: 44px; font: 700 15px/44px var(--ds-font); }
.ds-crumbs { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); margin: 0 0 10px; }
.ds-crumbs a { color: var(--ds-text-muted); text-decoration: none; }
.ds-crumbs a:hover { color: var(--ds-primary); text-decoration: underline; }
.ds-shell--mobile { display: block; min-height: 0; }
.ds-shell--mobile .ds-shell-main { padding: 14px; }
.ds-mobilebar { display: flex; align-items: center; gap: 10px; background: var(--ds-primary); color: #fff;
  padding: 10px 14px; font-weight: 600; font-size: var(--ds-fs-body); }
.ds-mobilebar .ds-appbar-spacer { margin-left: auto; }
.ds-actionbar { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px;
  background: var(--ds-surface); border-top: 1px solid var(--ds-border); position: sticky; bottom: 0; }
.ds-actionbar .ds-actionbar-note { margin-right: auto; align-self: center;
  font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }
.ds-stepper { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: var(--ds-fs-sm); }
.ds-step { display: inline-flex; gap: 8px; align-items: center; color: var(--ds-text-muted); }
.ds-step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--ds-neutral-soft);
  color: var(--ds-on-neutral-soft); display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--ds-font); flex: none; }
.ds-step[aria-current="step"] { color: var(--ds-ink); font-weight: 600; }
.ds-step[aria-current="step"] .n { background: var(--ds-primary); color: var(--ds-on-primary); }
.ds-step.done .n { background: var(--ds-primary-soft); color: var(--ds-primary-hover); }
.ds-step-sep { flex: none; width: 24px; border-top: 1px solid var(--ds-border); }
.ds-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-surface); min-height: 320px; }
.ds-master { border-right: 1px solid var(--ds-border); overflow-y: auto; max-height: 420px; }
.ds-master-item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 10px 14px; border-bottom: 1px solid var(--ds-divider); font: 400 var(--ds-fs-sm)/1.45 var(--ds-font);
  color: var(--ds-ink); }
.ds-master-item:hover { background: var(--ds-hover-wash); }
.ds-master-item[aria-selected="true"] { background: var(--ds-selection); box-shadow: inset 3px 0 0 var(--ds-primary); }
.ds-master-item:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
.ds-master-item .mi-title { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.ds-master-item .mi-meta { color: var(--ds-text-muted); font-size: var(--ds-fs-xs); }
.ds-rail { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.ds-rail a { display: block; padding: 8px 12px; border-radius: var(--ds-radius-md); color: var(--ds-ink);
  text-decoration: none; font-size: var(--ds-fs-sm); }
.ds-rail a:hover { background: var(--ds-hover-wash); }
.ds-rail a[aria-current="page"] { background: var(--ds-primary-soft); color: var(--ds-primary-hover); font-weight: 600; }
.ds-print-sheet { background: #fff; color: #0f1f1b; border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-raised); max-width: 560px; margin: 0 auto; padding: 28px 32px;
  font-size: 12px; line-height: 1.5; }
.ds-print-sheet h1, .ds-print-sheet h2, .ds-print-sheet h3 { color: #0f1f1b; }
.ds-print-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  border-bottom: 2px solid #0f1f1b; padding-bottom: 8px; margin-bottom: 14px; }
.ds-print-foot { display: flex; justify-content: space-between; border-top: 1px solid #0f1f1b;
  padding-top: 6px; margin-top: 18px; font-size: 10px; color: #333; }

/* patterns-page additions (patterns/*) */
.ds-banner { display: flex; gap: 10px; align-items: center; padding: 10px 16px;
  font-size: var(--ds-fs-sm); font-weight: 600; border-radius: var(--ds-radius-md); }
.ds-banner--offline { background: #26302c; color: #fff; }
.ds-banner--warning { background: var(--ds-warning-soft); color: var(--ds-on-warning-soft);
  border: 1px solid #ecd9a0; }
.ds-banner .ds-banner-action { margin-left: auto; }
.ds-progress { height: 6px; border-radius: var(--ds-radius-pill); background: var(--ds-divider);
  overflow: hidden; }
.ds-progress > i { display: block; height: 100%; background: var(--ds-primary);
  border-radius: inherit; transition: width .2s ease; }
/* viewport-control helpers: swap markup when the demo toolbar is set to Mobile */
.ds-show-mobile { display: none !important; }
.demo[data-vw="mobile"] .ds-show-mobile { display: block !important; }
.demo[data-vw="mobile"] .ds-hide-mobile { display: none !important; }

/* ==========================================================================
   RESPONSIVE + PRINT
   ========================================================================== */
@media (max-width: 980px) {
  .bk-sidebar { transform: translateX(-100%); transition: transform .2s ease; z-index: 90; }
  .bk-sidebar.open { transform: none; }
  .bk-nav-toggle { display: inline-block; }
  .bk-main { margin-left: 0; padding: 20px 18px 60px; }
  /* topbar: search collapses to an icon button; chip drops the date; brand truncates */
  .bk-topbar { gap: 10px; padding: 0 12px; }
  .bk-version-chip .bk-vc-date { display: none; }
  .bk-search-toggle { display: inline-flex; }
  .bk-search { display: none; }
  .bk-topbar.bk-search-open .bk-search { display: block; position: fixed;
    top: var(--bk-topbar-h); left: 0; right: 0; width: auto; margin: 0; padding: 8px 12px;
    background: var(--bk-primary); box-shadow: 0 8px 20px rgba(15,40,32,.25); z-index: 150; }
  .bk-topbar.bk-search-open .bk-search input { height: 44px; font-size: 16px; /* no iOS zoom */
    padding-left: 36px; }
  .bk-topbar.bk-search-open .bk-search > svg { left: 22px; top: 22px; }
  .bk-topbar.bk-search-open .bk-search-results { position: fixed; top: calc(var(--bk-topbar-h) + 60px);
    left: 12px; right: 12px; width: auto; max-height: 55vh; }
}
@media (pointer: coarse) {
  .demo-toolbar button { min-height: 40px; min-width: 32px; padding: 8px 12px; }
  .bk-nav-toggle, .bk-search-toggle { min-height: 40px; min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-sidebar, .bk-scrim, .demo-viewport, .bk-search, .bk-search input, .bk-anchor,
  .demo-toolbar button, .bk-search-toggle, .bk-nav-toggle
    { transition: none !important; animation: none !important; }
}
@media print {
  .bk-topbar, .bk-sidebar, .bk-prevnext, .demo-toolbar, .bk-nav-toggle, .bk-search { display: none !important; }
  .bk-main { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; font-size: 12px; }
  .demo, .ds-card { box-shadow: none; }
  a { color: #0f1f1b; text-decoration: none; }
}
:focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; }



/* layer 2: marketing template (Halingo-Brand 11-Website) */

/* ==========================================================================
   Halingo.be redesign — marketing composition layer  (SINGLE SOURCE)
   Linked by every page (index.html, index.fr.html, and future pages).
   Edit here once; all pages update.

   Rule: colour / font / radius / shadow / motion come ONLY from --ds-* tokens
   (defined in ../08-DesignSystem/assets/book.css). No raw brand hexes.
   The website display ramp is the DS displayRamp (tokens.json), rendered here
   with fluid clamp() as that ramp specifies.

   Content-width caps use the more generous (FR) values so the same file serves
   both NL and the longer French copy without per-page overrides.
   ========================================================================== */
:root{
  --site-max: 1200px;
  --site-pad: clamp(20px, 5vw, 48px);
  --site-gap: clamp(48px, 8vw, 100px);      /* section rhythm — 8pt grid */
  /* website display ramp (DS displayRamp: displayM 64 / h1 48-56 / h2 36-40 / h3 24-28) */
  --t-hero: clamp(2.75rem, 6vw, 4rem);      /* 44 -> 64  (displayM) */
  --t-h2:   clamp(2rem, 3.4vw, 2.5rem);     /* 32 -> 40  (h2)       */
  --t-h3:   clamp(1.375rem, 2vw, 1.5rem);   /* 22 -> 24  (h3)       */
  --t-lede: clamp(1.125rem, 1.4vw, 1.375rem);
}

html{ scroll-behavior:smooth; }
body{ background:var(--ds-canvas); color:var(--ds-ink); font-family:var(--ds-font);
      font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.wrap{ max-width:var(--site-max); margin:0 auto; padding-inline:var(--site-pad); }
.eyebrow{ font:700 12px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase;
          color:var(--ds-primary); display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--ds-accent);
          transform:skewX(-18deg); display:inline-block; } /* the slash device, abstracted */
.serif{ font-family:var(--ds-font-serif); font-style:italic; }
.section{ padding-block:var(--site-gap); }

/* ---------- reveal-on-load (respects reduced motion) ---------- */
.rise{ opacity:0; transform:translateY(20px); animation:rise var(--ds-motion-page) var(--ds-ease) forwards; }
.rise.d1{ animation-delay:.06s } .rise.d2{ animation-delay:.12s } .rise.d3{ animation-delay:.18s }
.rise.d4{ animation-delay:.24s } .rise.d5{ animation-delay:.30s }
@keyframes rise{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .rise{ animation:none; opacity:1; transform:none } html{scroll-behavior:auto} }

/* ==========================================================================
   NAV
   ========================================================================== */
.hs-nav{ position:sticky; top:0; z-index:var(--ds-z-appbar); background:color-mix(in srgb, var(--ds-canvas) 88%, transparent);
      backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--ds-border); }
.nav-inner{ display:flex; align-items:center; gap:24px; height:68px; }
.logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
.logo img{ display:block; }
.logo .wm{ font:600 20px/1 var(--ds-font); letter-spacing:-.025em; color:var(--ds-primary); }
.logo .sl{ color:var(--ds-accent); font-weight:500; }
.nav-links{ display:flex; gap:4px; margin-left:8px; }
.nav-links a{ text-decoration:none; color:var(--ds-text-soft); font-weight:500; font-size:15px;
      padding:8px 12px; border-radius:var(--ds-radius-md); }
.nav-links a:hover{ background:var(--ds-hover-wash); color:var(--ds-primary); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.lang{ display:inline-flex; border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); overflow:hidden;
      font:600 12px/1 var(--ds-font-label); }
.lang a{ padding:6px 11px; text-decoration:none; color:var(--ds-text-muted); }
.lang a[aria-current="true"]{ background:var(--ds-primary); color:var(--ds-on-primary); }
.nav-signin{ text-decoration:none; color:var(--ds-primary); font-weight:600; font-size:15px; padding:8px 6px; }
.nav-signin:hover{ text-decoration:underline; }
.nav-burger{ display:none; }
.hs-nav .ds-btn--cta{ height:44px; }
/* on-brand keyboard focus for the custom marketing links (DS components already carry it) */
.nav-links a:focus-visible, .nav-signin:focus-visible, .lang a:focus-visible, .logo:focus-visible{
  outline:2px solid var(--ds-focus); outline-offset:2px; border-radius:6px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; overflow:hidden; padding-top:clamp(40px, 7vw, 80px); padding-bottom:var(--site-gap); }
.hero::before{ /* calm teal-soft aura, top-right */
  content:""; position:absolute; inset:-30% -20% auto auto; width:60vw; height:60vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle at 60% 40%, var(--ds-primary-soft), transparent 62%); z-index:0; pointer-events:none; }
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,64px); align-items:center; }
.hero-copy, .hero-media{ min-width:0; }
.strap{ font-family:var(--ds-font-serif); font-style:italic; color:var(--ds-text-muted); font-size:15px; margin:14px 0 0; }
.strap b{ color:var(--ds-primary); font-weight:600; font-style:normal; }
/* hero bilingual signature — a label-register tag, so the serif italic stays reserved for the lede/quote */
.bislash{ display:inline-flex; align-items:center; gap:7px; margin:16px 0 0; padding:5px 13px;
  border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); background:var(--ds-surface);
  font:600 12px/1 var(--ds-font-label); letter-spacing:.08em; color:var(--ds-text-soft); }
.bislash b{ color:var(--ds-accent); font-weight:700; }
.hero h1{ font:600 var(--t-hero)/1.05 var(--ds-font-display); letter-spacing:-.03em; margin:16px 0 0;
      text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--ds-primary); }
.hero .lede{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); line-height:1.5;
      color:var(--ds-text-soft); max-width:36ch; margin:20px 0 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-cta .ds-btn{ height:48px; padding:0 22px; font-size:15px; }
.microtrust{ display:flex; align-items:center; gap:8px; color:var(--ds-text-muted); font-size:13px; margin-top:16px; }
.microtrust svg{ color:var(--ds-primary); flex:none; }

/* hero product window — built from the real .ds-* app kit */
.window{ border-radius:14px; background:var(--ds-surface); border:1px solid var(--ds-border);
      box-shadow:0 30px 60px -20px rgba(16,35,29,.28), var(--ds-shadow-raised); overflow:hidden;
      transform:perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin:left center; }
.window .chrome{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--ds-surface-sunken);
      border-bottom:1px solid var(--ds-border); }
.window .chrome i{ width:11px; height:11px; border-radius:50%; background:var(--ds-border-strong); opacity:.5; display:block; }
.window .chrome .url{ margin-left:12px; font:500 12px/1 var(--ds-font-mono); color:var(--ds-text-muted);
      background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill);
      padding:5px 12px; }
.window .ds-shell{ border:0; border-radius:0; min-height:0; }
.window .ds-shell-main{ padding:16px; min-width:0; }
.mini-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.mini-kpis .ds-card{ box-shadow:none; }
.window .ds-shell-nav .navitem{ font-size:12.5px; padding:7px 10px; }
.window .ds-navbrand{ font-size:14px; padding:2px 10px 12px; }

/* ==========================================================================
   PARTNER STRIP
   ========================================================================== */
.partners{ border-block:1px solid var(--ds-border); background:var(--ds-primary-soft); }
.partners .wrap{ display:flex; align-items:center; gap:clamp(20px,4vw,52px); flex-wrap:wrap; padding-block:22px; }
.partners .lbl{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); }
.partners ul{ display:flex; align-items:center; gap:clamp(20px,4vw,52px); flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.partners li{ font:600 17px/1 var(--ds-font); color:var(--ds-text-soft); letter-spacing:-.01em; }
.partners li span{ color:var(--ds-text-muted); font-weight:500; }

/* ==========================================================================
   FEATURE ROWS
   ========================================================================== */
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.feat + .feat{ margin-top:var(--site-gap); }
.feat.rev .feat-media{ order:-1; }
.feat h2{ font:600 var(--t-h2)/1.15 var(--ds-font-display); letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance; }
.feat .sub{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); color:var(--ds-text-soft); margin:14px 0 0; }
.feat ul.checks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.feat ul.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--ds-ink); }
.feat ul.checks .tick{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--ds-primary-soft);
      color:var(--ds-primary); display:grid; place-items:center; margin-top:1px; }
.feat-media .panel{ background:var(--ds-primary-soft); border-radius:var(--ds-radius-lg); padding:clamp(18px,3vw,30px);
      border:1px solid color-mix(in srgb, var(--ds-primary) 16%, transparent); }
.feat-media .ds-card{ box-shadow:var(--ds-shadow-raised); }

/* ==========================================================================
   DOMAIN GRID — "Halingo kent uw werk" / "Halingo connaît votre métier"
   ========================================================================== */
.domain{ background:var(--ds-primary-soft); border-block:1px solid var(--ds-border); }
.domain .head{ max-width:60ch; }
.domain h2{ font:600 var(--t-h2)/1.15 var(--ds-font-display); letter-spacing:-.02em; margin:14px 0 0; }
.domain .sub{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); color:var(--ds-text-soft); margin:12px 0 0; }
.domain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
.dcard{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:22px; }
.dcard .ic{ width:40px; height:40px; border-radius:var(--ds-radius-md); background:var(--ds-primary-soft);
      color:var(--ds-primary); display:grid; place-items:center; margin-bottom:14px; }
.dcard h3{ font:600 17px/1.3 var(--ds-font); margin:0 0 4px; }
.dcard p{ margin:0; font-size:15px; color:var(--ds-text-muted); line-height:1.55; }
.dcard .tag{ display:inline-block; margin-top:12px; font:600 11px/1.6 var(--ds-font-label); letter-spacing:.1em;
      text-transform:uppercase; color:var(--ds-accent-text); }

/* ==========================================================================
   TESTIMONIAL — editorial serif register
   ========================================================================== */
.quote{ text-align:center; }
.quote blockquote{ font-family:var(--ds-font-serif); font-style:italic; font-weight:600;
      font-size:clamp(1.5rem,3.2vw,2.125rem); line-height:1.4; letter-spacing:-.01em; color:var(--ds-ink);
      max-width:24ch; margin:22px auto 0; text-wrap:balance; }
.quote .mark{ font-family:var(--ds-font-serif); font-style:italic; font-size:64px; line-height:.4; color:var(--ds-primary-light); }
.quote .who{ display:inline-flex; align-items:center; gap:12px; margin-top:26px; }
.quote .who .av{ width:44px; height:44px; border-radius:50%; background:var(--ds-primary); color:var(--ds-on-primary);
      display:grid; place-items:center; font:700 15px/1 var(--ds-font); }
.quote .who .nm{ text-align:left; }
.quote .who .nm b{ display:block; font-size:15px; }
.quote .who .nm span{ font-size:13px; color:var(--ds-text-muted); }

/* ==========================================================================
   CTA BAND — dark teal (white on primary-dark = AA safe)
   ========================================================================== */
.cta-band{ background:var(--ds-primary-hover); color:var(--ds-on-primary); border-radius:clamp(16px,3vw,28px);
      padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; inset:auto -10% -60% auto; width:50%; padding-bottom:50%;
      background:radial-gradient(circle, rgba(11,178,145,.35), transparent 60%); }
.cta-band .eyebrow{ color:var(--ds-primary-soft); justify-content:center; }
.cta-band .eyebrow::before{ background:var(--ds-accent); }
.cta-band h2{ font:600 var(--t-h2)/1.12 var(--ds-font-display); letter-spacing:-.02em; margin:14px 0 0; position:relative; }
.cta-band p{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); color:var(--ds-primary-soft);
      margin:14px auto 0; max-width:42ch; position:relative; }
.cta-band .hs-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; position:relative; }
.cta-band .ds-btn{ height:48px; padding:0 24px; font-size:15px; }
.btn-onprimary{ background:transparent; color:var(--ds-on-primary); border:1px solid rgba(255,255,255,.5); }
.btn-onprimary:hover{ background:rgba(255,255,255,.12); }

/* ==========================================================================
   FOOTER — deep teal
   ========================================================================== */
.foot{ background:var(--ds-primary-deep); color:var(--ds-on-primary-secondary); margin-top:var(--site-gap); }
.foot .wrap{ padding-block:56px 30px; }
.foot-top{ display:grid; grid-template-columns:1.4fr repeat(3, .9fr); gap:36px; }
.foot .logo .wm{ color:#fff; } .foot .logo .sl{ color:var(--ds-accent); }
.foot .blurb{ margin:16px 0 0; font-size:15px; color:var(--ds-on-primary-secondary); max-width:34ch; }
.foot .strap{ margin-top:14px; color:var(--ds-primary-light); }
.foot h3{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.13em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot a{ color:var(--ds-on-primary-secondary); text-decoration:none; font-size:15px; }
.foot ul a{ display:inline-block; padding-block:4px; }   /* >=24px hit area (WCAG 2.5.8) */
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot a:focus-visible{ outline:2px solid var(--ds-focus-on-primary); outline-offset:2px; border-radius:6px; }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between;
      margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:13px;
      color:var(--ds-on-primary-secondary); }
.foot-bottom .social{ display:flex; gap:8px; }
.foot-bottom .social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
      display:grid; place-items:center; color:#fff; }
.foot-bottom .social a:hover{ background:rgba(255,255,255,.12); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-media{ order:2; }
  .window{ transform:none; }
  .feat{ grid-template-columns:1fr; }
  .feat.rev .feat-media{ order:0; }
  .domain-grid{ grid-template-columns:repeat(2,1fr); }
  .foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 900px){
  .nav-links, .nav-signin{ display:none; }
  .nav-burger{ display:inline-grid; }
}
@media (max-width: 560px){
  .lang{ display:none; }              /* language toggle moves into the burger menu */
  .logo .wm{ display:none; }          /* mark-only on mobile — brand rail-collapse rule; frees room for the CTA */
  .domain-grid{ grid-template-columns:1fr; }
  .mini-kpis{ grid-template-columns:1fr 1fr; }
  .foot-top{ grid-template-columns:1fr; gap:26px; }
  /* hero product window collapses to an icon rail — the app shell's own behaviour */
  .window .ds-shell{ grid-template-columns:56px 1fr; }
  .window .ds-navbrand{ font-size:0; padding:6px 0; text-align:center; }
  .window .ds-shell-nav{ padding:12px 6px; }
  .window .ds-shell-nav .navitem{ justify-content:center; padding:8px 4px; }
  .window .ds-shell-nav .navitem span:not(.ds-navbadge){ display:none; }
  .window .ds-navbadge{ display:none; }
}


/* layer 3: support layouts (from the approved prototype, option A) */

/* ---------- shared ---------- */
.sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
body{ background:var(--ds-canvas); }
.page[hidden]{ display:none !important; }
main{ min-height:0; }
.h2{ font:600 var(--t-h2)/1.15 var(--ds-font-display); letter-spacing:-.02em; margin:0; text-wrap:balance; }
.h3{ font:600 var(--t-h3)/1.25 var(--ds-font-display); letter-spacing:-.015em; margin:0; }
.sub{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); color:var(--ds-text-soft); margin:12px 0 0; }
.muted{ color:var(--ds-text-muted); }
.count{ color:var(--ds-text-muted); }
.nav-links a[aria-current="page"]{ color:var(--ds-primary); background:var(--ds-hover-wash); }
.hs-nav .lang a{ padding:8px 12px; }

/* search box: DS input + affix, sized for a hero */
.search{ position:relative; display:flex; align-items:center; background:var(--ds-surface); border:1px solid var(--ds-border-strong);
  border-radius:var(--ds-radius-pill); box-shadow:var(--ds-shadow-raised); padding:8px 8px 8px 16px; gap:8px; }
.search svg{ color:var(--ds-text-muted); flex:none; }
.search input{ flex:1 1 auto; width:0; min-width:0; border:0; outline:0; background:transparent; font:500 16px/1.4 var(--ds-font); color:var(--ds-ink); padding:8px 0; }
.search input::placeholder{ color:var(--ds-text-placeholder); }
.search .ds-btn{ height:var(--ds-control-h); flex:none; }
.search:focus-within{ outline:2px solid var(--ds-focus); outline-offset:2px; }
.search--sm{ box-shadow:none; padding:4px 4px 4px 16px; }
.search--sm input{ font-size:15px; padding:8px 0; }
.search--sm .ds-btn{ height:var(--ds-control-h); }
.hints{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px; font-size:14px; color:var(--ds-text-muted); }
.hints a{ color:var(--ds-primary); font-weight:500; text-decoration:none; padding:4px 12px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); background:var(--ds-surface); }
.hints a:hover{ background:var(--ds-hover-wash); }

/* eyebrow inside serif-lede containers keeps the label face (cascade guard) */
.cta-band .eyebrow, .b-ticket .eyebrow{ font-family:var(--ds-font-label); font-style:normal; }
/* footer language pill on deep teal, token colours only */
.foot .lang{ display:none; border-color:var(--ds-on-primary-secondary); }
.foot .lang a{ color:var(--ds-on-primary-secondary); }
.foot .lang a[aria-current="true"]{ background:var(--ds-on-primary); color:var(--ds-primary-deep); }

/* article link list (shared) */
.alist{ list-style:none; margin:0; padding:0; display:grid; }
.alist li{ border-top:1px solid var(--ds-border); }
.alist li:first-child{ border-top:0; }
.alist a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 4px; text-decoration:none; color:var(--ds-ink); font-size:15px; }
.alist a:hover{ color:var(--ds-primary); }
.alist a svg{ flex:none; color:var(--ds-text-muted); }
.alist a:hover svg{ color:var(--ds-primary); }
.alist .sec{ font-size:12px; color:var(--ds-text-muted); margin-left:auto; text-align:right; }

/* ticket nudge (shared) */
/* BUG-15: one .ds-card, composed. The local class carries layout and padding only. */
.nudge{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:24px; }
.nudge b{ display:block; font:600 18px/1.35 var(--ds-font); }
.nudge span{ font-size:14px; color:var(--ds-text-muted); }

/* ======================================================================
   HOME A: "Zoek eerst". Centred search hero on a soft-teal band, then the
   three categories as columns of section links.
   ====================================================================== */
.a-hero{ background:var(--ds-primary-soft); border-bottom:1px solid var(--ds-border); padding-block:clamp(48px,7vw,88px); text-align:center; }
.a-hero h1{ font:600 var(--t-hero)/1.08 var(--ds-font-display); letter-spacing:-.025em; margin:16px 0 0; text-wrap:balance; }
.a-hero h1 em{ font-style:normal; color:var(--ds-primary); }
.a-hero .search{ max-width:680px; margin:32px auto 0; }
.bislash{ display:flex; width:max-content; }
.a-hero .bislash{ margin:16px auto 0; }
.a-hero .hints{ justify-content:center; }
.a-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.a-cat{ padding:24px; }
.a-cat .ic{ width:44px; height:44px; border-radius:var(--ds-radius-md); background:var(--ds-primary-soft); color:var(--ds-primary); display:grid; place-items:center; margin-bottom:16px; }
.a-cat h2{ font:600 20px/1.3 var(--ds-font); margin:0 0 4px; }
.a-cat .desc{ margin:0 0 16px; font-size:14px; color:var(--ds-text-muted); }
.a-cat ul{ list-style:none; margin:0; padding:0; display:grid; }
.a-cat li a{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; text-decoration:none; color:var(--ds-ink); font-size:15px; border-top:1px solid var(--ds-border); }
.a-cat li:first-child a{ border-top:0; }
.a-cat li a:hover{ color:var(--ds-primary); }

/* ======================================================================
   HOME B: "Twee sporen". Left: search plus the most-read articles. Right: the
   ticket path as a first-class card. Below: every section as a dense index.
   ====================================================================== */
.b-hero{ padding-block:clamp(40px,6vw,72px) clamp(32px,4vw,48px); }
.b-hero .wrap{ display:grid; grid-template-columns:1.618fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.b-hero h1{ font:600 clamp(2.25rem,4.5vw,3.25rem)/1.08 var(--ds-font-display); letter-spacing:-.025em; margin:16px 0 0; text-wrap:balance; }
.b-hero .search{ margin-top:24px; }
.b-hero .bislash{ margin-top:16px; }
.b-pop{ margin-top:32px; }
.b-pop .lbl{ color:var(--ds-text-muted); margin:0 0 8px; }
.b-ticket{ background:var(--ds-primary-hover); color:var(--ds-on-primary); border-radius:var(--ds-radius-lg); padding:clamp(24px,3vw,32px); position:relative; overflow:hidden; }
.b-ticket::after{ content:""; position:absolute; inset:auto -20% -50% auto; width:70%; padding-bottom:70%; background:radial-gradient(circle, rgba(11,178,145,.4), transparent 60%); }
.b-ticket > *{ position:relative; }
.b-ticket .eyebrow{ color:var(--ds-primary-soft); }
.b-ticket h2{ font:600 24px/1.15 var(--ds-font-display); letter-spacing:-.02em; margin:16px 0 0; }
.b-ticket p{ font-family:var(--ds-font-serif); font-style:italic; color:var(--ds-primary-soft); margin:16px 0 0; font-size:16px; }
.b-ticket .hs-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.b-ticket .btn-onprimary{ height:var(--ds-control-h); display:inline-flex; align-items:center; padding:0 18px; border-radius:var(--ds-button-radius); text-decoration:none; font-weight:600; font-size:15px; }
.b-ticket .meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:24px; font-size:13px; color:var(--ds-primary-soft); font-family:var(--ds-font); font-style:normal; }
.b-ticket .meta b{ color:#fff; font-weight:600; }
.b-index{ background:var(--ds-surface); border-block:1px solid var(--ds-border); }
.b-index .wrap{ display:grid; grid-template-columns:1.618fr 1fr; gap:0 clamp(24px,4vw,56px); padding-block:48px; }
.b-index h2{ font:600 18px/1.35 var(--ds-font); color:var(--ds-primary); margin:0 0 8px; }
.b-index ul{ list-style:none; margin:0; padding:0; }
.b-index li a{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; text-decoration:none; color:var(--ds-ink); font-size:15px; border-bottom:1px solid var(--ds-border); }
.b-index li a:hover{ color:var(--ds-primary); }
.b-index ul.two{ columns:2; column-gap:clamp(24px,4vw,56px); }
.b-index ul.two li{ break-inside:avoid; }

/* ======================================================================
   HOME C: "Gids". A docs-style two-column reading layout: sticky section tree
   on the left, search plus curated lists on the right.
   ====================================================================== */
.c-wrap{ display:grid; grid-template-columns:272px minmax(0,1fr); gap:clamp(32px,5vw,72px); padding-block:40px 0; }
.c-tree{ position:sticky; top:88px; align-self:start; }
.c-tree h2{ font:600 18px/1.35 var(--ds-font); color:var(--ds-ink); margin:24px 0 8px; }
.c-tree h2:first-child{ margin-top:0; }
.c-tree ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--ds-border); }
.c-tree li a{ display:flex; justify-content:space-between; gap:8px; padding:8px 12px; margin-left:-2px; border-left:2px solid transparent; text-decoration:none; color:var(--ds-text-soft); font-size:14px; font-weight:500; }
.c-tree li a:hover, .c-tree li a[aria-current="true"]{ color:var(--ds-primary); border-left-color:var(--ds-primary); background:var(--ds-hover-wash); }
.c-main h1{ font:600 clamp(48px,4vw,56px)/1.1 var(--ds-font-display); letter-spacing:-.02em; margin:16px 0 0; }
.c-main .search{ margin-top:24px; max-width:640px; }
.c-block{ margin-top:40px; }
.c-block.lead .head h2{ font:600 var(--t-h3)/1.25 var(--ds-font-display); letter-spacing:-.015em; margin:0; }
.c-block .head .lbl{ color:var(--ds-text-muted); margin:0; }
.c-block .head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:8px; }
.c-block .head a{ font-size:14px; color:var(--ds-primary); font-weight:600; text-decoration:none; }
.c-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); }
.c-strip{ margin-top:48px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 24px; border-radius:var(--ds-radius-lg);
  background:var(--ds-primary-soft); border:1px solid color-mix(in srgb, var(--ds-primary) 16%, transparent); }
.c-strip b{ font-size:15px; }
.c-strip span{ font-size:14px; color:var(--ds-text-soft); }
.c-strip .ds-btn{ margin-left:auto; }

/* ======================================================================
   ARTICLE A: docs layout. Left section tree, article, language row on top.
   ====================================================================== */
.art-a{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(32px,5vw,72px); padding-block:32px 0; }
.art-a .c-tree{ top:88px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--ds-text-muted); }
.crumbs a{ color:var(--ds-text-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--ds-primary); }
.crumbs .sl{ color:var(--ds-accent); font-weight:500; padding:0 2px; }
.langrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:16px; font-size:13px; color:var(--ds-text-muted); }
.langrow a{ text-decoration:none; color:var(--ds-text-soft); font-weight:600; padding:4px 12px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); }
.langrow a[aria-current="true"]{ background:var(--ds-primary); color:var(--ds-on-primary); border-color:var(--ds-primary); }
.langrow a.todo{ color:var(--ds-text-muted); border-style:dashed; }
.article{ max-width:72ch; }
.article h1{ font:600 clamp(48px,4vw,56px)/1.1 var(--ds-font-display); letter-spacing:-.02em; margin:16px 0 0; text-wrap:balance; }
.article .meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--ds-text-muted); }
.article .lede{ font-family:var(--ds-font-serif); font-style:italic; font-size:20px; line-height:1.5; color:var(--ds-text-soft); margin:16px 0 0; }
.article .body{ margin-top:32px; font-size:16px; line-height:1.7; }
.article .body h2{ font:600 22px/1.3 var(--ds-font-display); letter-spacing:-.01em; margin:32px 0 8px; }
.article .body ol{ padding-left:24px; display:grid; gap:8px; }
.article .body ol li::marker{ color:var(--ds-primary); font-weight:700; }
.article .body p{ margin:0 0 16px; }
.article .shot{ margin:16px 0 24px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); background:var(--ds-surface); overflow:hidden; box-shadow:var(--ds-shadow-raised); }
.article .shot .chrome{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--ds-surface-sunken); border-bottom:1px solid var(--ds-border); }
.article .shot .chrome i{ width:8px; height:8px; border-radius:50%; background:var(--ds-border-strong); opacity:.5; display:block; }
.article .shot .chrome .url{ margin-left:12px; font:500 12px/1 var(--ds-font-mono); color:var(--ds-text-muted); }
.article .shot .fake{ padding:16px; display:grid; gap:12px; }
.article .shot .fake .hs-row{ height:12px; border-radius:6px; background:var(--ds-surface-sunken); }
.article .shot .fake .hs-row.w{ width:60%; } .article .shot .fake .hs-row.hi{ background:var(--ds-primary-soft); width:35%; }
.article .ds-alert{ margin:16px 0; }
.helpful{ margin-top:40px; padding-top:24px; border-top:1px solid var(--ds-border); display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:15px; }
.helpful .ds-btn{ height:var(--ds-control-h); }
.related{ margin-top:40px; padding-top:24px; border-top:1px solid var(--ds-border); }
.related h2{ font:600 18px/1.35 var(--ds-font); color:var(--ds-ink); margin:0 0 8px; }

/* ======================================================================
   ARTICLE B: reading layout. No tree; breadcrumb, centred column, right rail
   with the outline, related articles and the ticket card.
   ====================================================================== */
.art-b{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,5vw,72px); padding-block:32px 0; }
.art-b .article{ max-width:70ch; }
.rail{ position:sticky; top:88px; align-self:start; display:grid; gap:16px; }
.rail .box{ padding:16px 24px; }
.rail h2{ font:600 18px/1.35 var(--ds-font); color:var(--ds-ink); margin:0 0 8px; }
.rail .toc{ list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:2px solid var(--ds-border); }
.rail .toc a{ display:block; padding:4px 12px; margin-left:-2px; border-left:2px solid transparent; text-decoration:none; color:var(--ds-text-soft); font-size:14px; }
.rail .toc a:hover, .rail .toc a[aria-current="true"]{ color:var(--ds-primary); border-left-color:var(--ds-primary); }
.rail .rel{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rail .rel a{ text-decoration:none; color:var(--ds-ink); font-size:14px; }
.rail .rel a:hover{ color:var(--ds-primary); }
.rail .box.tk{ background:var(--ds-primary-soft); border-color:color-mix(in srgb, var(--ds-primary) 16%, transparent); }
.rail .box.tk b{ display:block; font-size:15px; margin-bottom:4px; }
.rail .box.tk span{ font-size:13px; color:var(--ds-text-soft); display:block; }
.rail .box.tk .ds-btn{ margin-top:16px; width:100%; justify-content:center; }
.langbar{ display:flex; gap:8px; }

/* ======================================================================
   TICKET FORM: single design, two states (form / sent).
   ====================================================================== */
.tk-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(32px,5vw,72px); padding-block:40px 0; align-items:start; }
.tk-head h1{ font:600 clamp(48px,4vw,56px)/1.1 var(--ds-font-display); letter-spacing:-.02em; margin:16px 0 0; }
.tk-form{ margin-top:32px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); box-shadow:var(--ds-shadow-raised); padding:clamp(20px,3vw,32px); display:grid; gap:20px; max-width:680px; }
.tk-form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tk-form .ds-field{ display:grid; gap:8px; align-content:start; max-width:none; width:100%; }
.tk-form .ds-label{ font-weight:600; font-size:14px; }
.tk-form .ds-help{ font-size:13px; color:var(--ds-text-muted); }
.tk-form .ds-input, .tk-form .ds-select{ height:var(--ds-touch-target-min); }
.tk-form .ds-input, .tk-form .ds-select, .tk-form .ds-textarea{ width:100%; box-sizing:border-box; font:400 var(--ds-fs-body)/1.4 var(--ds-font); color:var(--ds-ink);
  background:var(--ds-surface); border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-md); padding:8px 16px; }
.tk-form .ds-textarea{ min-height:240px; resize:vertical; }
.tk-form .ds-textarea--sm{ min-height:88px; }
.tk-form .ds-input:focus-visible, .tk-form .ds-select:focus-visible, .tk-form .ds-textarea:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:-1px; border-color:var(--ds-primary); }
.drop{ border:1.5px dashed var(--ds-border-strong); border-radius:var(--ds-radius-md); padding:16px; text-align:center; color:var(--ds-text-muted); font-size:14px; background:var(--ds-surface-sunken); }
.drop b{ color:var(--ds-primary); font-weight:600; }
.tk-form .actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tk-form .actions .ds-btn{ height:var(--hs-control-h-lg); padding:0 24px; font-size:var(--hs-fs-button-lg); }
.tk-form .actions span{ font-size:13px; color:var(--ds-text-muted); }
.tk-side{ display:grid; gap:16px; position:sticky; top:88px; }
.tk-side .box{ padding:16px 24px; }
.tk-side h2{ font:600 18px/1.35 var(--ds-font); color:var(--ds-ink); margin:0 0 8px; }
.tk-side p{ margin:0; font-size:14px; line-height:1.55; color:var(--ds-text-soft); }
.tk-side p + p{ margin-top:8px; }
.tk-side .alist a{ font-size:14px; padding:8px 0; }
.tk-sent{ max-width:640px; margin:0 auto; padding-block:64px 0; text-align:center; }
.tk-sent .ok{ width:64px; height:64px; border-radius:50%; background:var(--ds-primary-soft); color:var(--ds-primary); display:grid; place-items:center; margin:0 auto 24px; }
.tk-sent h1{ font:600 clamp(48px,4vw,56px)/1.1 var(--ds-font-display); letter-spacing:-.02em; margin:0; }
.tk-sent .ref{ display:inline-block; margin-top:16px; font:500 14px/1 var(--ds-font-mono); color:var(--ds-text-soft); background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); padding:8px 16px; }
.tk-sent p{ margin:16px auto 0; max-width:46ch; color:var(--ds-text-soft); font-size:16px; }
.tk-sent .hs-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* ---------- footer adjustments for support ---------- */
.foot .legal{ font-size:13px; }

/* ---------- responsive ---------- */
@media (max-width: 899px){
  .a-cats{ grid-template-columns:minmax(0,1fr); }
  .b-hero .wrap{ grid-template-columns:minmax(0,1fr); }
  .b-hero .wrap > *{ min-width:0; }
  .b-index .wrap{ grid-template-columns:minmax(0,1fr); }
  .b-index ul.two{ columns:1; }
  .c-wrap, .art-a{ grid-template-columns:minmax(0,1fr); }
  .c-wrap > *, .art-a > *{ min-width:0; }
  .c-tree{ position:static; order:2; margin-top:40px; }
  .c-two{ grid-template-columns:minmax(0,1fr); }
  .art-b{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:static; }
  .tk-wrap{ grid-template-columns:minmax(0,1fr); }
  .tk-side{ position:static; }
}
@media (max-width: 599px){
  .foot .lang{ display:inline-flex; }
  .tk-form .two{ grid-template-columns:1fr; }
  .search{ padding-left:16px; }
}


/* support.halingo.be, layer 4: Odoo frame adjustments.
   Layers 1-3 (design system tokens and components, marketing template, support
   layouts) come from the Halingo-Brand repo and the prototype. This layer only
   reconciles them with Odoo's website frame (Bootstrap 5, #wrapwrap, the website
   form widget, the Knowledge public layout). Colour, type, radius and shadow
   still come from --ds-* tokens only. */

#wrapwrap{ background:var(--ds-canvas); color:var(--ds-ink); display:flex; flex-direction:column; min-height:100vh; }
#wrapwrap > main{ flex:1 0 auto; }
#wrapwrap > .hs-main{ flex:1 0 auto; width:100%; }
#wrapwrap > .hs-nav{ flex:none; }
#wrapwrap > .foot{ flex:none; }
#wrapwrap > main > #wrap{ min-height:0; }

/* Bootstrap resets that the prototype relied on the browser for */
.hs-nav, .foot, .hs-page, .hs-main{ font-family:var(--ds-font); font-size:16px; line-height:1.6; }
.eyebrow{ margin:0; }
.hs-nav p, .foot p{ margin-bottom:0; }
.hs-nav ul, .foot ul, .a-cat ul, .c-tree ul, .alist, .rail ul, .tk-side ul{ margin-bottom:0; padding-left:0; }
.hs-nav a, .foot a, .a-cat a, .c-tree a, .alist a, .crumbs a, .hints a, .langrow a, .logo{ text-decoration:none; }
.hs-nav a:hover, .a-cat a:hover, .c-tree a:hover, .alist a:hover, .crumbs a:hover{ text-decoration:none; }
.foot a:hover{ text-decoration:underline; }
.a-cat h2 a{ color:inherit; text-decoration:none; }
.a-cat h2 a:hover{ color:var(--ds-primary); }
.a-cat .ic{ font-size:22px; line-height:1; }
.a-hero h1, .article h1, .tk-head h1, .tk-sent h1, .cta-band h2, .a-cat h2, .c-tree h2, .related h2, .foot h3, .tk-side h2{ margin-bottom:0; }
.a-hero h1 em{ font-style:normal; }
.article .body a{ color:var(--ds-primary); }
.article .body a:hover{ color:var(--ds-primary-hover); }
.article .body img{ max-width:100%; height:auto; display:block; margin:8px 0 16px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-md); }
.article .body ul{ padding-left:24px; display:grid; gap:8px; }
.article .body h1{ font:600 22px/1.3 var(--ds-font-display); margin:32px 0 8px; }
.article .body h3{ font:600 18px/1.3 var(--ds-font); margin:24px 0 8px; }
.article .body table{ width:100%; border-collapse:collapse; font-size:15px; margin:0 0 16px; }
.article .body td, .article .body th{ border:1px solid var(--ds-border); padding:8px 12px; vertical-align:top; }
.article .body .o_readonly{ min-height:0; }
.article .body pre, .article .body code{ font-family:var(--ds-font-mono); font-size:14px; }
.article .body blockquote{ border-left:3px solid var(--ds-primary-soft); padding-left:16px; color:var(--ds-text-soft); }
.hs-empty{ max-width:60ch; margin:0 auto; text-align:center; color:var(--ds-text-soft); font-size:18px; }
.hs-empty a{ color:var(--ds-primary); font-weight:600; }
.hs-band{ padding-bottom:var(--site-gap); }
.hs-nav .nav-links a[aria-current="page"]{ color:var(--ds-primary); background:var(--ds-hover-wash); }
/* the nav CTA takes its label colour from .ds-btn--cta in bundle layer 1 (ticket 44): the
   duplicate assertion that used to stand here is gone, so one rule decides, not source order.
   The form submit keeps its own assertion below, where the <button> element needs it. */
.ds-btn, .ds-btn:hover{ text-decoration:none; }
.btn-onprimary, .btn-onprimary:hover{ color:var(--ds-on-primary); text-decoration:none; }
.tk-sent .hs-row, .cta-band .hs-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; position:relative; }
.langrow span.todo{ color:var(--ds-text-muted); border:1px dashed var(--ds-border); border-radius:var(--ds-radius-pill); padding:4px 12px; }
.crumbs a[href]{ color:var(--ds-text-soft); }

/* website form widget (Odoo s_website_form) inside the DS form */
.tk-form .s_website_form_rows{ display:grid; gap:20px; }
.tk-form .ds-field.s_website_form_field{ margin:0; }
.tk-form .s_website_form_mark{ color:var(--ds-error); }
.tk-form .is-invalid{ border-color:var(--ds-error) !important; }
.tk-form .ds-input.form-control, .tk-form .ds-textarea.form-control{ box-shadow:none; }
.tk-form input[type="file"]{ display:block; width:100%; font-size:14px; color:var(--ds-text-soft); }
.tk-form input[type="file"]::file-selector-button{ font:600 14px/1 var(--ds-font); color:var(--ds-primary); background:var(--ds-surface); border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-md); height:var(--ds-control-h); padding:0 16px; margin-right:12px; cursor:pointer; }
.tk-form input[type="file"]::file-selector-button:hover{ background:var(--ds-hover-wash); }
.tk-form .actions .ds-btn.s_website_form_send{ color:var(--ds-on-accent-cta); cursor:pointer; }
.tk-form #s_website_form_result{ font-size:14px; }
.tk-form .s_website_form_dnone{ display:none; }
.tk-form .alert{ font-size:14px; border-radius:var(--ds-radius-md); }

/* search results page (Odoo template, our header/footer overrides from 91) */
.hs-sr-head{ display:grid; gap:16px; padding-block:24px 4px; }
.hs-sr-head .back{ display:inline-flex; align-items:center; gap:8px; color:var(--ds-text-soft); font-size:14px; text-decoration:none; justify-self:start; }
.hs-sr-head .back:hover{ color:var(--ds-primary); }
.hs-sr-bar{ display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; }
.hs-sr-bar h1{ font:600 clamp(48px,4vw,56px)/1.1 var(--ds-font-display); margin:0; letter-spacing:-.02em; overflow-wrap:anywhere; }
.hs-sr-bar h1 q{ color:var(--ds-primary); quotes:"“" "”"; }
.hs-sr-bar .search{ flex:1 1 320px; max-width:440px; }
.whelpdesk_search_results .container{ max-width:var(--site-max); padding-inline:var(--site-pad); margin-bottom:0 !important; }
.whelpdesk_result{ padding:16px 0; border-bottom:1px solid var(--ds-border); }
.whelpdesk_result .website_forum{ border:0 !important; padding:0 !important; }
.whelpdesk_result h5{ margin:0; font:600 18px/1.35 var(--ds-font); }
.whelpdesk_result h5 a{ color:var(--ds-ink); text-decoration:none; }
.whelpdesk_result h5 a:hover{ color:var(--ds-primary); }
.whelpdesk_result .hs-result-path{ margin:4px 0 0; color:var(--ds-text-soft); font-size:14px; }
.whelpdesk_result .ms-3{ margin-left:0 !important; }
.hs-sr-none{ font:600 22px/1.3 var(--ds-font-display); margin:24px 0 8px; }
.hs-sr-none q{ color:var(--ds-primary); }
.hs-sr-none-p{ color:var(--ds-text-soft); margin:0 0 24px; }
.hs-sr-foot{ padding-block:32px var(--site-gap); }
.hs-sr-foot .nudge{ margin-top:0; }
#whelpdesk_top .oe_structure:empty, #whelpdesk_bottom .oe_structure:empty{ display:none; }
/* search autocomplete dropdown (Odoo JS, Bootstrap classes) */
.search{ position:relative; }
.search .dropdown-menu{ position:absolute; top:calc(100% + 8px); left:0; right:0; margin:0; padding:8px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-md); box-shadow:var(--ds-shadow-overlay); z-index:30; max-height:min(60vh,420px); overflow:auto; }
.search .dropdown-item{ display:block; padding:12px !important; border-radius:var(--ds-radius-sm); color:var(--ds-ink); font-size:15px; line-height:1.35; text-decoration:none; white-space:normal; }
.search .dropdown-item:hover, .search .dropdown-item:focus{ background:var(--ds-hover-wash); color:var(--ds-primary); }
.search .dropdown-item .fa{ color:var(--ds-text-muted); margin-right:4px; }
.search .dropdown-menu .dropdown-item-text, .search .dropdown-menu .dropdown-divider{ display:none; }

/* search results page (Odoo template, our chrome) */
.whelpdesk_search_results .whelpdesk_result h5 a{ color:var(--ds-primary); text-decoration:none; }
.whelpdesk_search_results .website_forum{ border-color:var(--ds-border) !important; }
.whelpdesk_search_results .website_forum small{ display:none; }   /* no author byline on the public site */
#whelpdesk_top .container > a{ color:var(--ds-primary); text-decoration:none; }
.o_helpdesk_knowledge_search .form-control{ border-color:var(--ds-border-strong); }
.o_helpdesk_knowledge_search .btn{ background:var(--ds-primary); color:var(--ds-on-primary); border-color:var(--ds-primary); }

/* 404 page (website-2 override of website.page_404) */
.hs-nf{ max-width:62ch; padding-block:clamp(48px,8vw,96px); display:grid; gap:20px; justify-items:start; }
.hs-nf h1{ font:600 clamp(48px,4vw,56px)/1.1 var(--ds-font-display); letter-spacing:-.02em; margin:0; }
.hs-nf h1 a{ color:var(--ds-primary); text-decoration:none; }
.hs-nf .lede{ font-size:18px; color:var(--ds-text-soft); margin:0; }
.hs-nf .search{ width:100%; max-width:520px; }
.hs-nf .hs-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* Knowledge public layout: our chrome around the article */
.hs-main .o_knowledge_article{ padding:0; }
.hs-main .o_knowledge_article .o_readonly{ padding:0; }
.hs-main .o_knowledge_public_content{ height:auto; }

/* === R1-D search results === */
/* Odoo's KnowledgeBaseAutocomplete needs an .input-group element inside the search
   form or it throws on every keystroke; display:contents keeps the flex row intact. */
#wrapwrap .search .input-group{ display:contents; }
/* results column capped near 760px and left-aligned to the site gutter */
.hs-sr-head .hs-sr-bar{ display:grid; justify-items:stretch; gap:12px; max-width:760px; }
.hs-sr-head .hs-sr-bar .search{ flex:none; max-width:520px; margin-top:4px; }
.hs-sr-count{ margin:0; color:var(--ds-text-muted); font-size:14px; }
.hs-sr{ max-width:760px; padding-block:12px var(--site-gap); }
.hs-sr-list{ list-style:none; margin:0; padding:0; }
.hs-sr-list li{ padding:16px 0; border-top:1px solid var(--ds-border); }
.hs-sr-list li:last-child{ border-bottom:1px solid var(--ds-border); }
.hs-sr-path{ margin:0 0 4px; color:var(--ds-text-muted); }
.hs-sr-list h2{ margin:0; font:600 18px/1.35 var(--ds-font); }
.hs-sr-list h2 a{ color:var(--ds-ink); text-decoration:none; }
.hs-sr-list h2 a:hover{ color:var(--ds-primary); }
.hs-sr-ex{ margin:4px 0 0; color:var(--ds-text-soft); font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hs-sr-ex mark{ background:var(--ds-primary-soft); color:inherit; padding:0 2px; border-radius:var(--ds-radius-sm); }
.hs-sr-more{ margin:20px 0 0; }
.hs-sr .hs-sr-none-p{ margin:0; max-width:56ch; }

@media (max-width: 899px){
  .hs-nav .nav-links, .hs-nav .nav-signin{ display:none; }
}
@media (max-width: 599px){
  .hs-nav .lang{ display:none; }
  .foot .lang{ display:inline-flex; }
}

/* === R1-C form === (council R1 block C: ticket form)
   C1 real submit button, C4 guide block, C5 localised file control,
   C6 Article 13 notice and the data-minimisation line, C8 honeypot, C9 error microcopy. */
.tk-form button.s_website_form_send{ font:600 15px/1 var(--ds-font); border:0; }
.tk-form .actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.tk-form #s_website_form_result:empty{ display:none; }
.tk-form .hs-err{ color:var(--ds-error); font-weight:500; }
.tk-form .hs-err[hidden]{ display:none; }
.tk-form .ds-select{ appearance:none; -webkit-appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.tk-form .ds-select:invalid{ color:var(--ds-text-muted); }
/* C4 guiding questions, Primary-Soft helper block above an empty textarea */
.tk-guide{ background:var(--ds-primary-soft); border-radius:var(--ds-radius-md); padding:16px; display:grid; gap:8px; }
.tk-guide .h{ margin:0; color:var(--ds-primary); }
.tk-guide ol{ margin:0; padding-left:20px; display:grid; gap:4px; font-size:14px; color:var(--ds-ink); }
.tk-guide .note{ margin:0; font-size:13px; color:var(--ds-text-soft); }
/* C5 native file input visually hidden but focusable, the label is the control */
.tk-form .hs-file-input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.tk-form .hs-file-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tk-form .hs-file-btn{ display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer;
  font:600 14px/1 var(--ds-font); color:var(--ds-primary); background:var(--ds-surface);
  border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-md); height:var(--ds-control-h); padding:0 16px; }
.tk-form .hs-file-btn:hover{ background:var(--ds-hover-wash); }
.tk-form .hs-file-input:focus-visible + .hs-file-row .hs-file-btn{ outline:2px solid var(--ds-focus); outline-offset:2px; }
.tk-form .hs-file-name{ font-size:14px; color:var(--ds-text-soft); }
.tk-form .hs-min{ color:var(--ds-text-soft); }
/* C6 Article 13 notice */
.tk-notice{ margin:0; font-size:13px; line-height:1.55; color:var(--ds-text-soft); border-top:1px solid var(--ds-border); padding-top:16px; }
.tk-notice a{ color:var(--ds-primary); font-weight:600; }
/* C8 honeypot */
.hs-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* === R1-F home === (council R1 block F: home surface)
   F1 Lucide marks in the category tile, F2 card alignment, F3 chips, F4 plain hero label. */
.a-cat .ic{ width:40px; height:40px; font-size:0; }
.a-cat .ic svg.lu{ display:block; }
.a-cats{ align-items:start; }
.a-cat .desc{ min-height:44px; }
.a-cat li a{ align-items:baseline; }
.a-cat .count{ font-variant-numeric:tabular-nums; }
.a-hero .hints{ gap:8px 12px; }
.a-hero .hints .hints-l{ color:var(--ds-text-muted); }
.a-hero .hints a{ border-radius:var(--ds-radius-md); padding:8px 12px; font-size:14px; }
.bislash--plain{ border:0; background:none; padding:0; text-transform:uppercase; }
.bislash--plain .mid{ color:var(--ds-text-muted); font-weight:700; }
@media (max-width: 599px){
  .a-cat .desc{ min-height:0; }
}

/* === R1-B chrome === (council R1 block B: head, chrome, caching, plus F27/P1-4/P1-5)
   B4 focus ring, B6 mobile header, B7 CTA text ink, F27 sticky tree scroll and mobile tree. */

/* B4: the shipped bundle ends on ":focus-visible{ outline:2px solid var(--bk-primary) }" and
   --bk-primary is a book.css variable that never reaches this site, so the whole shorthand is
   invalid at computed-value time and no ring is painted anywhere. Repoint it at the DS token. */
:focus-visible{ outline:2px solid var(--ds-focus, #077058); outline-offset:2px; }

/* B7 is withdrawn. Owner decision of 2026-09-27 (ticket 44): the orange call to action
   carries WHITE text, as Halingo-Brand/05-Assets/brand-config.json locks it
   (ratifiedAmendments[0].ownerOverride, 2026-07-12). White on #ED8B00 measures 2.53:1,
   below both the 4.5:1 body floor and the 3:1 large-text floor. The owner has seen that
   number and accepted it knowingly for this single element, so no exception needs to be
   sought and no shadow, outline or darker ink may be added to soften it. The council R1
   C2 override that painted ink here (6.73:1) and the design-system proposal DS-PROP-01
   that would have made ink the rule are both declined. Nothing is written here: the CTA
   takes --ds-on-accent-cta (#FFFFFF) from bundle layer 1. An audit that reopens this is
   answered with the ticket-44 comment, not with a new rule. */

/* B6: the mobile header. The CSS half of the burger pattern shipped in layer 2 and the markup
   half did not; 84-halingo-support-chrome.js now emits the button and the sheet. */
.hs-nav .nav-burger{ display:none; }
.hs-nav .nav-sheet{ display:none; }
.hs-nav .nav-sheet[hidden]{ display:none; }
@media (max-width: 899px){
  .hs-nav .nav-burger{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
    flex:none; padding:0; background:var(--ds-surface); color:var(--ds-primary); cursor:pointer;
    border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-md); }
  .hs-nav .nav-burger:hover{ background:var(--ds-hover-wash); }
  .hs-nav .nav-burger:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:2px; }
  .hs-nav .nav-sheet:not([hidden]){ display:grid; gap:12px; border-top:1px solid var(--ds-border);
    background:var(--ds-surface); padding:12px var(--site-pad) 20px; }
  .hs-nav .nav-sheet .sheet-links{ display:grid; }
  .hs-nav .nav-sheet .sheet-links a{ display:flex; align-items:center; min-height:var(--ds-touch-target-min); padding:8px 2px;
    color:var(--ds-ink); font-size:16px; font-weight:500; text-decoration:none; }
  .hs-nav .nav-sheet .sheet-links a:hover, .hs-nav .nav-sheet .sheet-links a[aria-current="page"]{ color:var(--ds-primary); }
  .hs-nav .nav-sheet .lang{ display:inline-flex; justify-self:start; }
  .hs-nav .nav-sheet .lang a{ display:inline-flex; align-items:center; justify-content:center; min-width:48px; min-height:40px; padding:0 12px; }
}
/* the lockup keeps its wordmark on a phone (layer 2 hides it at 560); breakpoint moved to 599 */
@media (max-width: 599px){
  .logo .wm{ display:inline; }
  .hs-nav .lang{ display:none; }
  .foot .lang{ display:inline-flex; }
}

/* F27 / P1-4: the sticky article tree could not be scrolled, so on a 1366x768 laptop its lower
   half was unreachable. It is now emitted after the article in the DOM and pulled back with
   order:-1 on desktop, so keyboard and screen-reader users reach the H1 first. */
.art-a .c-tree{ max-height:calc(100vh - 108px); overflow-y:auto; overscroll-behavior:contain; }
@media (min-width: 900px){
  .art-a{ grid-template-columns:260px minmax(0,1fr); }
  .art-a > .c-tree{ order:-1; }
  .art-a > .article{ order:0; }
}
@media (min-width: 900px){
  /* desktop: the disclosure is a plain container, its summary is not a control */
  .art-a .c-tree .c-tree-m > summary{ display:none; }
}
@media (max-width: 899px){
  /* mobile: two collapsed disclosures instead of forty links between article and footer */
  .art-a .c-tree{ max-height:none; overflow:visible; margin-top:40px; }
  .art-a .c-tree .c-tree-m{ border-top:1px solid var(--ds-border); }
  .art-a .c-tree .c-tree-m > summary{ cursor:pointer; list-style:none; padding:16px 2px; min-height:var(--ds-touch-target-min);
    display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ds-text-muted); }
  .art-a .c-tree .c-tree-m > summary::-webkit-details-marker{ display:none; }
  .art-a .c-tree .c-tree-m > summary::after{ content:"+"; font:400 18px/1 var(--ds-font); color:var(--ds-text-muted); }
  .art-a .c-tree .c-tree-m[open] > summary::after{ content:"\2212"; }
  .art-a .c-tree .c-tree-m > summary:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:2px; }
  .art-a .c-tree .c-tree-m .c-tree-body{ padding-bottom:12px; }
  .art-a .c-tree .c-tree-m h2{ margin-top:16px; }
  .art-a .c-tree .c-tree-m h2:first-child{ margin-top:0; }
}
/* P1-5: the skip link now lands on <main id="main-content">, which is the article column only */
.art-a > main.article{ min-width:0; }
/* F27 continued: the tree headings now live inside .c-tree-body, so the first-child reset and
   the mobile de-duplication (summary repeats the label) key off that wrapper. */
@media (max-width: 899px){
  .art-a .c-tree .c-tree-body > h2:first-child{ margin-top:0; }
  .art-a .c-tree .c-tree-body > .c-tree-h--dup{ display:none; }
}

/* ---------------------------------------------------------------------------
   R1 block E (content pipeline). Added, nothing above is changed.
   E6 / E7: translated articles open with one line saying the app interface and
   every screenshot are Dutch. The pipeline emits it as p.hs-ui-note.
   --------------------------------------------------------------------------- */
.article .body .hs-ui-note{
  margin:0 0 20px; padding:12px 16px;
  border-left:3px solid var(--ds-border);
  background:var(--ds-surface-2, transparent);
  font:400 14px/1.6 var(--ds-font); color:var(--ds-text-muted);
}

/* home hero: the same disclosure as on the translated articles (R1 E7) */
.a-hero .hs-ui-note--hero{
  margin:16px auto 0; max-width:640px; padding:8px 16px;
  border-left:3px solid var(--ds-primary, #077058);
  font:400 14px/1.6 var(--ds-font); color:var(--ds-text-muted, #3D4F4A); text-align:left;
}

/* === R1-P1-B ===============================================================
   Council R1 P1 item 10 (fonts), added only. Nothing above this line changes.

   The three above-the-fold faces are preloaded from 84-halingo-support-chrome.js.
   Preloading removes the discovery latency but not the swap: with font-display:swap
   the first paint still uses the fallback, and 09-performance.md measured the reflow
   at 0.078 on /help/169, attributed to the step list and DIV.nav-right (the language
   pills and the CTA, both Inter Tight). These two faces give the fallback the metrics
   of the real one, so the swap moves nothing.

   Both are Arial-derived. size-adjust is the ratio of Arial's average advance width to
   the target's; the ascent and descent overrides are the target's hhea values divided by
   that ratio (Inter and Inter Tight share 2048 upm, ascender 1984, descender -494, so
   96.88% and 24.12% before adjustment). Inter against Arial is the published 107.12%;
   Inter Tight is roughly 6 percent narrower, hence a size-adjust near 100%.

   local() only: no network request, and where none of the three faces exists (most
   Android) the @font-face simply does not load and the stack falls through to
   system-ui exactly as it did before.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust:107.12%; ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%;
}
@font-face{
  font-family:'Inter Tight Fallback';
  src:local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust:100.5%; ascent-override:96.4%; descent-override:24%; line-gap-override:0%;
}
/* the same stacks as layer 1, with the metric-matched fallback inserted directly after the
   web font. Redefining the token here rather than editing layer 1 keeps the design-system
   import byte-identical to the brand repo. */
:root{
  --ds-font: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-display: Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --ds-font-label: 'Inter Tight', 'Inter Tight Fallback', Inter, 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ===========================================================================
   === R1-P1-A ===  (council R1 P1 items 6, 17, 19, 21, 26, 27, 28, 29, 30)
   Article lead and measure, body link underlines, the feedback control, the
   ticket-page disclosures, the confirmation continuation, count baselines.
   Added below everything above; nothing earlier is changed.
   =========================================================================== */

/* 21: the article gets its editorial face back. The first paragraph of the body is a
   Source Serif italic lead, the prose column is capped near 72 characters, and every
   screenshot sits in the same 560px frame with equal air above and below. The .hs-ui-note
   disclosure that opens the translated articles is not the lead, so it is excluded and the
   paragraph after it takes the treatment instead. */
.article .body{ max-width:var(--hs-measure); }
.article .body .o_readonly > p:first-of-type:not(.hs-ui-note),
.article .body .o_readonly > .hs-ui-note + p{
  font:italic 400 20px/1.5 var(--ds-font-serif); color:var(--ds-text-soft); margin:24px 0 20px;
}
.article .body img{ width:auto; max-width:min(100%, 560px); margin:24px 0; }

/* 28: green on ink measures 2.81:1, so colour alone cannot carry a link (WCAG 1.4.1). The
   rest of the site keeps its underline-free treatment, where layout supplies the cue. */
.article .body a{ text-decoration:underline; text-underline-offset:2px; }

/* 30: counts sat about 6px above their own label because the flex row defaulted to stretch.
   The home cards were fixed in R1-F; the article tree rows are the same component. */
.c-tree li a{ align-items:baseline; }
.c-tree .count, .related .sec{ font-variant-numeric:tabular-nums; }
/* 30: the in-article language row is the one language control that is always on screen on a
   phone, so it moves toward the 44px design-system target. */
.langrow a, .langrow span.todo{ display:inline-flex; align-items:center; min-height:var(--ds-control-h); padding:8px 12px; }

/* 6: article feedback. Two buttons, no free-text box (council C6), and on "Nee" the ticket
   link appears carrying ?from=<article id> so the ticket knows where the reader came from. */
.hs-fb{ margin-top:40px; padding-top:24px; border-top:1px solid var(--ds-border); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hs-fb .q{ margin:0; font:600 15px/1.4 var(--ds-font); color:var(--ds-ink); flex:1 1 100%; }
.hs-fb .ds-btn{ min-width:88px; min-height:var(--ds-touch-target-min); justify-content:center; }
.hs-fb .hs-fb-done{ margin:0; flex:1 1 100%; font-size:15px; color:var(--ds-text-soft); }
.hs-fb .hs-fb-done[hidden]{ display:none; }
.hs-fb .hs-fb-cta{ min-height:var(--ds-touch-target-min); }
@media (min-width: 900px){ .hs-fb{ max-width:var(--hs-measure); } }

/* 17: the ticket-page boxes are disclosures now. On desktop the summary is not a control and
   the card looks exactly as it did; below 960px they collapse and move above the form, so the
   suggested articles are seen before the decision to write a ticket has been made. */
/* R5 BUG-02 (ticket 38): a <summary> is a control at every width, and on desktop these two
   measured 270x15, under the 24x24 floor of WCAG 2.5.8. The target geometry that used to live
   only in the phone query is the base rule now, so the card keeps its static look and the
   control keeps its 44px. Only the collapse affordances stay behind the breakpoint. */
.tk-side .box.tk-m > summary{ list-style:none; min-height:var(--ds-touch-target-min); display:flex; align-items:center; padding:12px 0; }
.tk-side .box.tk-m > summary::-webkit-details-marker{ display:none; }
.tk-side .box.tk-m > summary h2{ margin:0 0 8px; }
@media (max-width: 899px){
  /* display:contents lifts the head and the form out of their wrapper so the two disclosures
     can sit between the H1 and the form rather than above the page title. */
  .tk-wrap > div{ display:contents; }
  .tk-wrap > div > .tk-head{ order:-2; }
  .tk-wrap > .tk-side{ order:-1; }
  .tk-wrap > div > .s_website_form{ order:0; }
  .tk-form{ margin-top:0; }
  .tk-side .box.tk-m{ padding:0 24px; }
  .tk-side .box.tk-m > summary{ cursor:pointer; justify-content:space-between; gap:12px; }
  .tk-side .box.tk-m > summary h2{ margin:0; }
  .tk-side .box.tk-m > summary::after{ content:"+"; font:400 18px/1 var(--ds-font); color:var(--ds-text-muted); }
  .tk-side .box.tk-m[open] > summary::after{ content:"\2212"; }
  .tk-side .box.tk-m > summary:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:2px; }
  .tk-side .box.tk-m > .box-b{ padding-bottom:16px; }
}

/* 18: the line that names the article the reader came from. */
.tk-from{ margin:12px 0 0; font-size:14px; color:var(--ds-text-soft); }
.tk-from a{ color:var(--ds-primary); font-weight:600; }

/* 19: the ticket number is the one thing the page exists to deliver, so it stops being white
   on off-white. And the page stops being a dead end: search plus the suggested articles. */
.tk-sent .ref{ background:var(--ds-primary-soft); border-color:transparent; color:var(--ds-primary);
  font:500 16px/1 var(--ds-font-mono); border-radius:var(--ds-radius-md); padding:12px 16px; }
.tk-sent p.note{ font-size:14px; color:var(--ds-text-muted); }
.tk-sent-next{ margin:48px auto 0; max-width:520px; text-align:left; padding-top:32px; border-top:1px solid var(--ds-border); }
.tk-sent-next h2{ margin:24px 0 8px; font:600 18px/1.35 var(--ds-font); color:var(--ds-ink); }
.tk-sent-next .alist{ list-style:none; margin:0; padding:0; }
.tk-sent-next .alist a{ display:block; padding:12px 0; font-size:15px; color:var(--ds-primary); text-decoration:none; border-bottom:1px solid var(--ds-border); }
.tk-sent-next .alist a:hover{ background:var(--ds-hover-wash); }

/* ===========================================================================
   === R3 ===  Council R3 fixes. Added below everything above; nothing earlier
   is changed. F15 (reflow at 320), F3 (the phone sheet search), F25 (the serif
   fallback face).
   =========================================================================== */

/* F15 / 08 P0.1: horizontal scroll at 320 CSS px on every page in every language.
   The block at "max-width: 600px" above re-shows the wordmark that layer 2 hides at 560,
   which costs 86px: .wrap padding 40 + .logo 113 + .nav-right 176 = 333 of 320, and 368 in
   French, where the CTA reads "Vers l application". Below 380 the mark alone carries the
   lockup, which leaves 245 of 280 usable even in French. WCAG 1.4.10 Reflow (AA). */
@media (max-width: 380px){
  .hs-nav .logo .wm{ display:none; }
}

/* F3 / 02 P0.1: the phone sheet carries the help-centre search as its first row. The sheet
   only exists below 900px, so the rule sits in the same query as the sheet itself. */
@media (max-width: 899px){
  .hs-nav .nav-sheet .search{ display:flex; align-items:center; gap:8px; width:100%;
    background:var(--ds-surface); border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-md);
    padding:0 12px; min-height:44px; color:var(--ds-text-muted); }
  .hs-nav .nav-sheet .search .input-group{ display:flex; flex:1; min-width:0; }
  .hs-nav .nav-sheet .search input.search-query{ flex:1; min-width:0; width:100%; height:var(--ds-control-h); border:0;
    background:transparent; font:400 16px/1.4 var(--ds-font); color:var(--ds-ink); outline:none; padding:0; }
  .hs-nav .nav-sheet .search input.search-query::placeholder{ color:var(--ds-text-muted); }
  .hs-nav .nav-sheet .search:focus-within{ outline:2px solid var(--ds-focus); outline-offset:2px; }
  .hs-nav .nav-sheet .search .dropdown-menu{ max-width:100%; }
}

/* F25 / 03 P1-4 and 09 P1-2: Source Serif 4 italic 400 paints every .lede and pull quote and
   was neither preloaded nor metric-matched, which is the whole of the desktop CLS on /prices
   (0.0123) and /features (0.0137). The preload is the fourth entry in PRELOAD_FONTS in
   84-halingo-support-chrome.js; this is the fallback that stops the swap from moving anything.
   Georgia-derived: Source Serif 4 is 1000 upm with hhea ascender 1036 and descender -335, and
   its average advance is within a percent of Georgia's, so the overrides are those two values
   over the size-adjust. local() only, no network request. */
@font-face{
  font-family:'Source Serif 4 Fallback';
  font-style:italic;
  src:local('Georgia Italic'), local('Georgia'), local('Times New Roman Italic'), local('Times New Roman');
  size-adjust:100.5%; ascent-override:103.1%; descent-override:33.3%; line-gap-override:0%;
}
:root{
  --ds-font-serif: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, 'Times New Roman', serif;
}

/* ===========================================================================
   === R5 ===  Ticket 38, the two public forms. Added below everything above;
   nothing earlier is changed except the disclosure target geometry, which had
   to move out of its phone query to exist on desktop at all.
   =========================================================================== */

/* BUG-01: the privacy sentence under both forms told its link from its text by hue alone
   (#077058 on white, 3.94:1), which WCAG 1.4.1 does not allow for a link in prose. The
   article layer already underlines its body links; this does the same for the two form
   pages. Prose only: the nav, the footer, the card lists and .ds-btn are untouched. */
/* #wrapwrap prefixed on purpose: layer 5 loads after this file and resets `.hs-page a` to
   text-decoration:none at the same specificity, which would win on source order alone. */
#wrapwrap .tk-notice a, #wrapwrap .tk-from a, #wrapwrap .tk-head .sub a, #wrapwrap .hs-nojs a,
#wrapwrap .tk-side .box .box-b p a, #wrapwrap .tk-side .box > p a{
  text-decoration:underline; text-underline-offset:2px; }

/* BUG-17: every field computed 15px, and iOS Safari zooms the viewport whenever a focused
   input is under 16px, so both public forms zoomed on every iPhone focus. The desktop size
   is the ramp token; a coarse pointer gets the 16px that stops the zoom. */
.tk-form .ds-input, .tk-form .ds-select, .tk-form .ds-textarea{ font-size:var(--ds-fs-body); }
@media (pointer: coarse){
  .tk-form .ds-input, .tk-form .ds-select, .tk-form .ds-textarea{ font-size:16px; }
}

/* BUG-16: layer 3 binds the field ring to bare :focus with outline-offset:1px, so it painted
   on a mouse click too and sat outside the field. The book says :focus-visible only, and an
   input takes -1px so the ring hugs the border. */
.tk-form .ds-input:focus, .tk-form .ds-select:focus, .tk-form .ds-textarea:focus{
  outline:none; border-color:var(--ds-border-strong); }
.tk-form .ds-input:focus-visible, .tk-form .ds-select:focus-visible, .tk-form .ds-textarea:focus-visible{
  outline:2px solid var(--ds-focus); outline-offset:-1px; border-color:var(--ds-primary); }
.tk-form .is-invalid:focus-visible{ outline-color:var(--ds-error); }

/* #05: the error summary that a failed submit writes into #s_website_form_result. The count
   line, then one anchor per invalid field; the validator in 85 and 97 builds it and moves the
   caret. It only exists while the form is wrong, so it is styled as an error, not as a note. */
.tk-form #s_website_form_result{ display:block; flex-basis:100%; }
.tk-form .hs-sum{ margin:0; padding:12px 16px; border-left:3px solid var(--ds-error);
  background:var(--ds-surface); font-size:14px; line-height:1.55; color:var(--ds-ink); }
.tk-form .hs-sum p{ margin:0; font-weight:600; }
.tk-form .hs-sum ul{ margin:8px 0 0; padding-left:20px; display:grid; gap:2px; }
.tk-form .hs-sum a{ color:var(--ds-error); text-decoration:underline; text-underline-offset:2px; }

/* #11: the guidance panel sat between the Beschrijving label and its textarea and was not in
   aria-describedby, so a screen reader never heard the three questions the form exists to ask.
   It is above the label now (85), which leaves the label sitting directly on its control. */
.tk-form .tk-guide{ margin-bottom:12px; }

/* #36: the required-field legend floated above the form card. It is the first element inside
   the form now (85, 97), so it belongs to the card it describes. */
.tk-form .hs-req-note{ margin:0 0 20px; }

/* #16 and #40: /contact/verzonden centres its check mark, H1, body and buttons and then
   left-aligned the trial block below the divider inside the same 640px column. The ticket
   confirmation keeps its left-aligned search and article list, so this is scoped to .ct-page. */
.ct-page .tk-sent-next{ text-align:center; }
.ct-page .tk-sent-next p{ margin-inline:auto; }

/* #37: the reCAPTCHA badge is fixed to the right edge and spanned 305 to 561 in a 375px
   viewport on /contact. reCAPTCHA itself is a settled owner decision and stays; the badge
   leaving the viewport is not part of that decision, so below the phone breakpoint it sits in
   the flow under the form, beside the attribution text the notice already carries. */
@media (max-width: 899px){
  .grecaptcha-badge{ position:static !important; width:auto !important; right:auto !important;
    bottom:auto !important; box-shadow:none !important; margin:0 auto; }
}

/* design-critique: the "Al klant?" card is 320x196 beside a form roughly 850px tall, so about
   650px of the column was dead. Layer 3 already makes .tk-side sticky, but a grid item
   stretches to its row by default, which is exactly what stops a sticky item from sticking. */
@media (min-width: 900px){
  .hs-page.ct-page .tk-side{ align-self:start; }
}

/* ===========================================================================
   === R5 ===  Ticket 43: one type scale, one spacing grid, one of each
   component. Added below everything above; nothing earlier is changed except
   the literals this sweep replaced in place.

   The design system (Halingo-Brand 08-DesignSystem v0.7.3) exports colour,
   shape, space, size, focus, fonts, motion and elevation as --ds-* variables,
   and does NOT export the display ramp, the product ramp or the breakpoints
   (DS-PROP-06, ticket 47). It also has no content-page layout at all: no hero,
   no section rhythm, no pricing card, no marketing footer (DS-PROP-04). The
   website therefore has to state a handful of numbers the system has no name
   for. Each of those is a token here, declared once, with the reason; every
   other value in layers 3, 4 and 5 binds to a --ds-* token or to a ramp step.
   =========================================================================== */
:root{
  /* DS-PROP-02 is unanswered (ticket 47): DS-CMP-BUTTON-001 allows md 40 and sm 32 only, and a
     40px control under a 64px displayM headline is subordinate to the headline own cap height.
     The marketing hero, the closing band, the plan card and the two public form submits all
     reach for the same larger control, so it is ONE token, not five literals. If the owner
     declines the proposal this line becomes 40px and nothing else changes; if it is ratified
     the line becomes var(--ds-control-h-lg). */
  --hs-control-h-lg: 48px;
  --hs-fs-button-lg: 15px;          /* ramp step 15, the label on that control */
  /* DS-PROP-04: the system fixes a 640px reading measure for app surfaces and has no measure for
     an article page. The article column was 680px, which is about 85 characters at the 16px body
     and the same defect the blog lane fixed on its own side by capping .bl-body; the blog lane
     flagged the article half as belonging here. 620px is the one prose measure on the site now,
     and the feedback row under the article shares it so the two columns line up. */
  --hs-measure: 620px;
}

/* R5 BUG-05: ONE eyebrow. The ramp entry is Inter Tight 11 / 700 / 1.4 / +0.12em / uppercase, and
   the site carried four trackings (.14em sixteen times, .13em three, .10em two, .06em two, .04em
   one) at four sizes (10, 10.5, 11, 12) for the same role. Every label-face microcopy role binds
   here; the per-block declarations that used to restate it are deleted, not overridden. */
#wrapwrap .eyebrow,
#wrapwrap .foot h3,
#wrapwrap .count,
#wrapwrap .hs-sr-path,
#wrapwrap .langrow a, #wrapwrap .langrow span.todo,
#wrapwrap .a-hero .hints .hints-l,
#wrapwrap .tk-guide .h,
#wrapwrap .b-pop .lbl, #wrapwrap .c-block .head .lbl,
#wrapwrap .art-a .c-tree .c-tree-m > summary,
#wrapwrap .partners .lbl,
#wrapwrap .weekline .when, #wrapwrap .weekline .does .lbl,
#wrapwrap .fact .n,
#wrapwrap .detail figcaption .lbl,
#wrapwrap .plan .pn{
  font:700 11px/1.4 var(--ds-font-label); letter-spacing:.12em; text-transform:uppercase;
}
#wrapwrap .eyebrow{ gap:8px; }   /* layer 2 sets 9px, which is off the 4px grid */
/* The blog owns css/halingo-blog.css and closed its share of this sweep in 855660b; the two
   trackings below were the one thing it could not reach, because that sheet loads after this
   bundle and two other agents were in the tree. Tracking only: the blog lane's own sizes,
   weights and colours on these two elements are left exactly as it shipped them. */
#wrapwrap .bl-more h2, #wrapwrap .bl-body blockquote cite{ letter-spacing:.12em; }

/* R5 BUG-18: Inter Tight is the label face. DS-FND-002: "uppercase eyebrows, overlines, microcopy
   labels and footer tags only. Never headlines, never body text." Six section headings rendered
   11px uppercase Inter Tight, and on /contact and /help/ticket that 11px string was the page only
   section heading, set smaller than the 16px body it introduced. They are the ramp subsectionTitle
   now, in Inter, sentence case. The eyebrow above them, where a page has one, stays a non-heading
   <p class="eyebrow">. The footer h3 keeps the label face: "footer tags" is one of the three uses
   DS-FND-002 allows. */
#wrapwrap .tk-side h2, #wrapwrap .related h2, #wrapwrap .rail h2,
#wrapwrap .c-tree h2, #wrapwrap .tk-sent-next h2{
  font:600 18px/1.35 var(--ds-font); letter-spacing:0; text-transform:none; color:var(--ds-ink);
}

/* R5 BUG-22: the six layers style headings only through page-scoped classes and never set a base
   family, so any heading none of them matches falls through to the Odoo theme. Measured on the
   404 (h2 at 40px / weight 500 / -apple-system) and on /help/43 (three h3 at 24.6, 28.1 and 32px,
   weight 500, Inter Tight). One base rule closes the class, not just the two pages. */
#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap h4, #wrapwrap h5, #wrapwrap h6{
  font-family:var(--ds-font-display); font-weight:600;
}
#wrapwrap .hs-nf h2{ font:600 var(--t-h2)/1.15 var(--ds-font-display); letter-spacing:-.02em; }
/* The topic page (ticket 41) groups its article links under a section name per group. Nothing
   matched those h3, so they took Odoo's fluid heading scale: 32px at 1440 and 24.575px at 375,
   under an 18px h2. cardTitle 15 is the ramp step below that h2. */
#wrapwrap .related h3{ font:600 15px/1.35 var(--ds-font); letter-spacing:0; }
/* Odoo sets the required marker at 0.85em, which computed 11.9px beside a 14px label. */
#wrapwrap .s_website_form_mark{ font-size:inherit; }

/* ---- layer 2 corrections. Halingo-Brand 11-Website/site.css is a byte-identical mirror of the
   brand repo and is not edited here, so its drift is corrected from this layer. ---- */

/* BUG-10: one height per control. .ds-btn--cta rendered at 48 (hero and band), 44 (nav) and 40
   (confirmation, 404); the two search submits rendered 36, which is on neither the 40 nor the 32
   step and misses the 44px touch goal. Every control now names a token. */
#wrapwrap .hs-nav .ds-btn--cta{ height:var(--ds-touch-target-min); }
#wrapwrap .hero-cta .ds-btn, #wrapwrap .cta-band .ds-btn{
  height:var(--hs-control-h-lg); padding:0 24px; font-size:var(--hs-fs-button-lg);
}
/* BUG-06: the band radius was clamp(16px,3vw,28px), which lands on a different number at every
   width and on the 12px card scale at none of them. DS-FND-005: one shape per semantic. */
#wrapwrap .cta-band{ border-radius:var(--ds-radius-lg); }
/* BUG-21: the band h2 rendered 1.12 where every other h2 on the same page rendered 1.15, and the
   hero h1 rendered 1.05 (displayL value) with -0.03em where displayM is 1.08 and -0.025em. */
#wrapwrap .cta-band h2{ line-height:1.15; margin-top:16px; }
#wrapwrap .cta-band p{ margin-top:16px; }
#wrapwrap .hero h1, #wrapwrap .lead-head h1{ line-height:1.08; letter-spacing:-.025em; }
#wrapwrap .feat h2, #wrapwrap .domain h2, #wrapwrap .feat .sub, #wrapwrap .domain .sub{ margin-top:16px; }
/* BUG-06 and BUG-07: .window composited a bespoke 60px-blur shadow on top of the raised token and
   took a 14px radius; .hero-stage took 24px. Neither is emitted by any template today, so these
   two lines are a guard rather than a repair: whichever page reaches for them gets the card. */
#wrapwrap .window, #wrapwrap .hero-stage{ border-radius:var(--ds-radius-lg); box-shadow:var(--ds-shadow-raised); }
/* BUG-09 and BUG-25: the footer strap, the bottom row and the social circles were off the 4px
   grid (14, 22, 26, 30, 34, 44), and a 34px circle misses the 44px touch goal by ten. */
#wrapwrap .foot .strap{ margin-top:16px; }
#wrapwrap .foot h3{ margin-bottom:16px; }
#wrapwrap .foot-bottom{ gap:16px 24px; }
#wrapwrap .foot-bottom .social a{ width:var(--ds-control-h); height:var(--ds-control-h); }
/* BUG-09 and BUG-25: the language chips measured 33x24 at 1440 on padding 6px 11px. */
#wrapwrap .lang a{ padding:8px 12px; }
/* BUG-14: the two tags were badge look-alikes, uppercase 11px label type with no fill, no radius
   and no padding, which reads as a StatusBadge and is not one. They carry .ds-tag now. Layer 2
   styles `.dcard .tag` in place at (0,2,0), which beats `.ds-tag` at (0,1,0), so the component is
   re-asserted here at a higher specificity. The declarations below are DS-CMP-CHIP-002 itself,
   nothing added: neutral-soft fill, radius sm, 12/500, sentence case. */
#wrapwrap .dcard .tag, #wrapwrap .fitem .tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:var(--ds-radius-sm); background:var(--ds-neutral-soft);
  color:var(--ds-on-neutral-soft); font:500 var(--ds-fs-xs)/1.5 var(--ds-font);
  letter-spacing:0; text-transform:none;
}
/* BUG-04 and BUG-15: the .dcard on the home page carried 22px of padding and a 17px h3. */
#wrapwrap .dcard{ padding:24px; }
#wrapwrap .dcard h3{ font:600 18px/1.35 var(--ds-font); }
#wrapwrap .partners li{ font-size:18px; }
/* BUG-04: the pull quote ran to 34px at 1440 on clamp(1.5rem,3.2vw,2.125rem); 24 and 32 are the
   ramp steps either side of it. The 26px gap under it is off the grid. */
#wrapwrap .quote blockquote{ font-size:clamp(24px,3.2vw,32px); letter-spacing:-.02em; }
#wrapwrap .quote .who{ margin-top:24px; }

/* R5 BUG-27: teal element share measured 12% on an article and 11% on the search results against
   53% on /help and 40% on /prices, so the two surfaces a reader spends the most time on read as a
   plainer product than the marketing pages they share a header with. One --ds-primary-soft band
   each, on the rail and on the results header. /features already carries three: the crop stages
   ticket 39 put on every feature chapter are --ds-primary-soft panels. */
#wrapwrap .hs-sr-head{ background:var(--ds-primary-soft); border-radius:var(--ds-radius-lg);
  padding:24px; margin-top:24px; }
#wrapwrap .hs-sr-head .hs-sr-bar{ max-width:none; }
@media (min-width: 900px){
  #wrapwrap .art-a > .c-tree{ background:var(--ds-primary-soft); border-radius:var(--ds-radius-lg);
    padding:20px; box-sizing:border-box; }
}

/* R5 BUG-26, the 40px content-page gutter, is fixed at source in layer 5: --site-pad is declared
   on :root there, and :root beats :root on source order alone, so an override from this layer
   would be the losing half of exactly the kind of pair this ticket exists to remove. */


/* layer 5: marketing pages, ticket #27 */

/* halingo.be marketing pages, layer 5 of the bundle built by 83-halingo-support-assets.js.
   Ticket #27. Derived from the approved prototype (02-Website/halingo-site/prototype/prototype.css,
   branch prototype/halingo-site) with three changes:
     1. only the blocks the three built pages use are kept (home A plus the week line, features,
        prices A). The prototype switcher, home B, prices B, the blog stub and the prototype
        contact form are dropped: /contact is built by 97 and reuses the ticket-form layout.
     2. `.c-wrap`, `.page` and `.sr` are NOT copied: layer 3 (support layouts) already defines
        them for the help centre and this layer loads after it.
     3. the Bootstrap resets Odoo needs are added, scoped the same way layer 4 scopes its own.
   Colour, type, radius, shadow and motion come from --ds-* tokens only. No raw hexes.
   Layers 1 and 2 (book.css tokens and site.css: .hero, .partners, .feat, .domain, .quote,
   .cta-band, .foot) already carry the home page; this file only adds what they do not have. */

/* ---------- R4: the vertical rhythm, on the brand 4px scale ----------
   Measured before this change (v2.halingo.be, 2026-09-27): --site-gap resolved to 100px at 1440
   and 1200, 61.44px at 768 and 48px at 375, and TWO adjacent `.section` paddings stacked, so the
   home page carried 200px of dead air between the RIZIV block and "De week van een praktijk"
   while a band boundary carried the same 200px and read as deliberate. 8vw and 5vw also put the
   gutter and the gap off the 4px grid at every intermediate width (61.44px, 38.4px).
   The scale is stepped instead of fluid, so every value is a multiple of 8, and the gap between
   two blocks is exactly ONE --site-gap:
     .flush-top     the block above it already paid the gap
     .flush-bottom  the block below it is a tinted band, or the footer, which pays its own
   Both are written by the page builders (98, 97), never guessed by a :has() selector.
   R7 (ticket 67): a tinted band's padding is INSIDE its own colour, so it bought its neighbours
   nothing: the payment marks sat on the band edge at 0px and the FAQ eyebrow 9px under it, on
   /prices and on / (the crop against the photo band, the week line against the domain grid).
   A band (.section.domain, .band-photo) now carries one --site-gap of outer margin on both
   sides, and BOTH its neighbours are written flush on the side that touches it. 99 step 7
   measures every seam on every marketing page against the same figure. */
:root{
  /* BUG-04: layer 2 sets --t-hero to clamp(2.75rem,6vw,4rem), which floors at 44px, and 44 is on
     neither the display ramp nor the product one. The ramp steps either side of the fluid range
     are h1's 48 and displayM's 64, so the hero interpolates between two ramp values instead of
     starting below both. --t-h2 (32 to 40), --t-h3 (22 to 24) and --t-lede (18 to 22) already do. */
  --t-hero: clamp(48px, 6vw, 64px);
  --site-pad: 20px;
  --site-gap: 48px;
  --head-pad: 40px;         /* first air above a page head or a hero, under the sticky bar */
  --blk-gap: 32px;          /* section head to its content, card grid gaps step off this */
  --card-gap: 16px;
}
@media (min-width: 600px){ :root{ --site-pad:32px; --site-gap:64px; --head-pad:56px; } }
@media (min-width: 900px){ :root{ --site-pad:40px; --site-gap:80px; --head-pad:64px; --blk-gap:40px; } }
/* BUG-26: --site-pad stops at 40px. foundations/grid.html fixes the content-page gutter at 40
   and calls it a final rule, so the top step repeats the 900 step rather than going to 48. */
@media (min-width: 1200px){ :root{ --site-pad:40px; --site-gap:96px; --head-pad:80px; --card-gap:20px; } }
.hs-page .hero{ padding-top:var(--head-pad); padding-bottom:var(--site-gap); }

.hs-page .section.flush-top{ padding-top:0; }
.hs-page .section.flush-bottom{ padding-bottom:0; }
.hs-page .section.domain, .hs-page .band-photo{ margin-block:var(--site-gap); }

/* ---------- Bootstrap resets for the marketing surfaces ---------- */
.hs-page h1, .hs-page h2, .hs-page h3, .hs-page p, .hs-page ul, .hs-page ol, .hs-page blockquote{ margin-bottom:0; }
.hs-page ul{ padding-left:0; }
.hs-page .feat ul.checks, .hs-page .plan ul, .hs-page .weekline, .hs-page .alist{ list-style:none; }
.hs-page a{ text-decoration:none; }
.hs-page .note a, .hs-page .faq .ans a, .hs-page .feat .more, .hs-page .fitem .more{ text-decoration:underline; }
.hs-page .partners ul{ margin:0; }
.hs-page details > summary{ display:block; }

/* ---------- shared marketing furniture ---------- */
.lead-head{ max-width:62ch; }
.lead-head h1{ font:600 var(--t-hero)/1.08 var(--ds-font-display); letter-spacing:-.025em; margin:16px 0 0; text-wrap:balance; }
.lead-head h1 em{ font-style:normal; color:var(--ds-primary); }
.lead-head .lede{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); line-height:1.5;
  color:var(--ds-text-soft); max-width:46ch; margin:20px 0 0; }
.page-head{ padding-top:var(--head-pad); padding-bottom:0; position:relative; overflow:hidden; }
.page-head::before{ content:""; position:absolute; inset:-40% -20% auto auto; width:56vw; height:56vw; max-width:680px; max-height:680px;
  background:radial-gradient(circle at 60% 40%, var(--ds-primary-soft), transparent 62%); z-index:0; pointer-events:none; }
.page-head .wrap{ position:relative; z-index:1; }
.sec-head{ max-width:58ch; }
.sec-head h2{ font:600 var(--t-h2)/1.15 var(--ds-font-display); letter-spacing:-.02em; margin:16px 0 0; text-wrap:balance; }
.sec-head .sub{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede); color:var(--ds-text-soft); margin:12px 0 0; }
.note{ font-size:13px; color:var(--ds-text-muted); line-height:1.6; }
.note a{ color:var(--ds-primary); }
.row-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.row-cta .ds-btn{ height:var(--hs-control-h-lg); padding:0 24px; font-size:var(--hs-fs-button-lg); }

/* R5, design-critique: Source Serif 4 italic is the brand's reserved editorial voice and it was
   spent on "De administratieve tool voor de logopedist", the line the owner demoted, while the
   sentence that actually sells (agenda, dossiers, facturen, getuigschriften, verzamelstaten) sat
   under it in 17px grey sans. Both strings stay; the serif changes places. */
.hs-page .hero .lede{ font-family:var(--ds-font); font-style:normal; font-size:18px; line-height:1.6;
  color:var(--ds-text-muted); letter-spacing:0; max-width:46ch; }
.hs-page .hero .hero-sub{ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede);
  line-height:1.5; color:var(--ds-text-soft); max-width:44ch; margin:12px 0 0; }
/* "Lees hoe dat werkt", the link from a feature block or a feature card into the help centre */
.feat .more, .fitem .more{ display:inline-block; margin-top:16px; font-weight:600; font-size:15px; color:var(--ds-primary); }
.feat .more{ margin-top:20px; }
.feat .more:hover, .fitem .more:hover, .faq .ans a:hover{ color:var(--ds-primary-hover); }
.faq .ans a{ color:var(--ds-primary); font-weight:600; }
/* the slash in the wordmark of the illustrated app window (layer 2 only styles .logo .sl) */
.ds-navbrand .sl{ color:var(--ds-accent); font-weight:500; }

/* ---------- R4: the week of a practice, on the brand timeline ----------
   Before: `.weekline` was a three-column grid with a 1px rule under every row, which rendered
   as a bare table, and it followed three tick lists, so the page had four consecutive lists of
   ticked sentences. It is book.css `.ds-timeline` now: a numbered dot with a connector, the
   moment and the task, and what Halingo takes over in a tinted callout beside it. */
.hs-page .weekline{ margin:var(--blk-gap) 0 0; padding:0; border:0; list-style:none; }
/* R5 BUG-24: the disc rendered 32x32 where the component fixes it at 28, and the rail was moved
   to left:15px top:36px to compensate, which was the proof of the override. Both are reverted. */
.hs-page .weekline .ds-tl-item{ grid-template-columns:28px minmax(0,1fr); gap:0 16px; padding-bottom:24px; }
.hs-page .weekline .ds-tl-item::before{ left:13px; top:30px; }
.hs-page .weekline .ds-tl-icon{ background:var(--ds-primary); color:var(--ds-on-primary);
  font:700 13px/1 var(--ds-font-label); font-variant-numeric:tabular-nums; }
.hs-page .weekline .ds-tl-body{ padding-top:0; }
.hs-page .weekline .when{ color:var(--ds-text-muted); margin:0; }
.hs-page .weekline h3{ font:600 18px/1.35 var(--ds-font); margin:4px 0 0; }
.hs-page .weekline .sub{ margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--ds-text-muted);
  font-family:var(--ds-font); font-style:normal; }
.hs-page .weekline .does{ margin-top:12px; background:var(--ds-primary-soft); border-radius:var(--ds-radius-md);
  padding:16px; display:flex; gap:12px; align-items:flex-start; }
.hs-page .weekline .does p{ margin:0; font-size:15px; line-height:1.55; color:var(--ds-ink); }
/* R5 #13 and BUG-04: 10px carried the whole week-line comparison, eight times on the home page,
   for readers whose median age is past comfortable 10px on a phone. The eyebrow ramp is 11px. */
.hs-page .weekline .does .lbl{ flex:none; color:var(--ds-primary-hover); background:var(--ds-surface);
  border:1px solid color-mix(in srgb, var(--ds-primary) 18%, transparent);
  border-radius:var(--ds-radius-pill); padding:8px 12px; }
@media (min-width: 900px){
  .hs-page .weekline .ds-tl-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:0 40px; align-items:start; }
  .hs-page .weekline .does{ margin-top:0; }
}

/* ---------- R4: the RIZIV block, full width ----------
   A numbered fact grid instead of a fourth ticked list, and the 352x72 counter strip as one
   small centred detail rather than a half-page media column it cannot fill. */
.hs-page .feat--full{ display:block; }
.hs-page .feat--full .sec-head{ max-width:54ch; margin-inline:auto; text-align:center; }
.hs-page .feat--full .sec-head .eyebrow{ justify-content:center; }
.hs-page .factgrid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--card-gap);
  margin-top:var(--blk-gap); }
.hs-page .fact{ border-top:2px solid var(--ds-primary-soft); padding-top:16px; }
.hs-page .fact .n{ display:block; color:var(--ds-primary); font-variant-numeric:tabular-nums; }
.hs-page .fact p{ margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--ds-text-soft); }
.hs-page .feat-more{ margin-top:24px; text-align:center; }
.hs-page .feat-more .more{ margin-top:0; }
@media (max-width: 899px){ .hs-page .factgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px){ .hs-page .factgrid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- what practices say (prices) ---------- */
.practices{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); margin-top:var(--blk-gap); }
/* BUG-15: six card look-alikes for one .ds-card. Each composition below carries its padding
   or its tint and nothing else; the surface, the border, the 12px radius and the raised shadow
   come from .ds-card in bundle layer 1, which the page builders now emit on every one of them. */
/* R7 (ticket 67): three footers at three heights in one row of equal cards. The card is a column
   and the attribution is pinned to its floor, so the three names share one baseline. */
.practices .pr{ padding:24px; display:flex; flex-direction:column; }
.practices .pr .hl{ font:600 18px/1.3 var(--ds-font-display); color:var(--ds-primary); margin:0; }
.practices .pr p{ margin:12px 0 20px; font-size:15px; color:var(--ds-text-soft); line-height:1.6; }
.practices .pr .nm{ margin-top:auto; padding-top:16px; border-top:1px solid var(--ds-divider); font-size:13px; color:var(--ds-text-muted); }
.practices .pr .nm b{ display:block; color:var(--ds-ink); font-size:15px; }

/* ---------- features ---------- */
.chapter{ margin-top:var(--site-gap); }
.chapter:first-of-type{ margin-top:0; }
.flist{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--card-gap); margin-top:var(--blk-gap); }
.fitem{ padding:24px; }
.fitem .ic{ width:40px; height:40px; border-radius:var(--ds-radius-md); background:var(--ds-primary-soft);
  color:var(--ds-primary); display:grid; place-items:center; margin-bottom:16px; }
.fitem h3{ font:600 18px/1.35 var(--ds-font); margin:0 0 8px; }
.fitem p{ margin:0; font-size:15px; color:var(--ds-text-muted); line-height:1.6; }
/* R5, design-critique: measured at 1440 the tag spanned x=193 to 272 and the card link started
   at x=277 on the same line, an 11px uppercase label sharing a row with a 15px underlined link,
   5px off its baseline. It stacks correctly below 960, so this was desktop only. */
.fitem .tag{ display:flex; width:fit-content; margin-top:12px; }
.fitem .tag + .more{ margin-top:12px; }

/* ---------- R4: prices, three cards and one list ----------
   The three cards printed the same three bullets (every subscription contains every function),
   so the page carried nine identical ticked lines. They are one band under the cards now. The
   "Populair" flag was a pill hanging off the top edge of the middle card; it is the brand
   .ds-badge--brand inside the card, on the plan-name row, so the three cards still line up. */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); margin-top:var(--blk-gap); align-items:stretch; }
.plan{ position:relative; display:flex; flex-direction:column; }
.plan-body{ flex:1; display:flex; flex-direction:column; padding:28px; }
.plan.pop{ border-color:var(--ds-primary); box-shadow:var(--ds-shadow-overlay); }
/* R5 BUG-04 and BUG-13: the flag was 10.5px, the smallest type on the site, and the /1 line
   height collapsed the badge from its 24px --ds-badge-h to 15px. The whole font override is
   gone: .ds-badge in layer 1 is 700 11px/1.6 +0.12em uppercase and owns the component. */
.plan .flag{ position:absolute; top:20px; right:20px; }
/* R5, design-critique: all three plans hold every function, so the only thing a buyer can
   choose by is the seat count, and it was 14px grey under a 19px plan name and above a 40px
   price. The plan name is the label and the seat count is the line, in the same DOM order.
   R5 BUG-18 (ticket 43): the two lines are one <h3> now, so the card keeps a heading without
   that heading being 11px Inter Tight. The label face lives on the .pn span inside it, which is
   a microcopy label and one of the three roles DS-FND-002 allows it. */
.plan .pn{ display:block; color:var(--ds-text-muted); }
.plan .users{ display:block; font:600 20px/1.3 var(--ds-font-display); letter-spacing:-.02em;
  color:var(--ds-ink); margin:8px 0 0; }
/* only the flagged card needs room for its flag (R7: the other two reserved 92px for nothing) */
.plan.pop .pn, .plan.pop .users{ padding-right:92px; }
/* R7 (ticket 67): the one sentence that removes the card objection sits under the button that
   starts the trial, not 400px below it in a 13px note. */
.plan .micro{ margin:12px 0 0; display:flex; align-items:center; gap:6px;
  font-size:15px; line-height:1.4; color:var(--ds-text-muted); }
.plan .micro svg{ color:var(--ds-primary); flex:none; }
.plan .price{ margin:24px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.plan .price b{ font:600 40px/1 var(--ds-font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan .price .cur{ font:600 22px/1 var(--ds-font-display); }
.plan .price .per{ flex-basis:100%; font-size:13px; color:var(--ds-text-muted); margin-top:4px; }
.plan .ds-btn{ margin-top:24px; width:100%; height:var(--hs-control-h-lg); font-size:var(--hs-fs-button-lg); }

/* R7 (ticket 67): the "Betalen" chapter was a 585px column alone in a 1200px row, its three marks
   in three pill widths on the band edge, for a fact the FAQ answers in one line. It is one line
   under the cards now: three equal pills, one gap, then the sentence. The FAQ keeps the detail. */
.payline{ margin-top:var(--blk-gap); display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.payline p{ margin:0; font-size:15px; line-height:1.5; color:var(--ds-text-soft); }
.payline a{ color:var(--ds-primary); text-decoration:underline; }
.payline a:hover{ color:var(--ds-primary-hover); }
.payrow{ display:flex; align-items:center; gap:8px; flex:none; }

/* ---------- prices: FAQ, native disclosure, no script ---------- */
/* R7: the rules ran 393px past the answers they separate (.ans is 72ch); the list shares that measure.
   R7c: a 58ch list under a 58ch head left 535px of the row empty. From 900 up the head takes the left
   column and the list the right one (600px, about 76 characters a line), so the row is filled and the
   chevron sits within 440px of its question. Below 900 they stack as before. */
.faq{ margin-top:var(--blk-gap); border-top:1px solid var(--ds-border); max-width:58ch; }
@media (min-width: 900px){
  .hs-page .faq-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 600px; column-gap:40px; align-items:start; }
  .hs-page .faq-wrap .faq{ margin-top:0; max-width:none; }
}
.faq details{ border-bottom:1px solid var(--ds-border); }
.faq summary{ cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font:600 18px/1.4 var(--ds-font); color:var(--ds-ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:12px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--ds-primary); border-bottom:2px solid var(--ds-primary);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--ds-motion-snap) var(--ds-ease); }
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq summary:hover{ color:var(--ds-primary); }
.faq summary:hover::after{ border-color:var(--ds-primary-hover); }
.faq summary:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:2px; border-radius:var(--ds-radius-sm); }
.faq .ans{ padding:0 0 24px; max-width:72ch; color:var(--ds-text-soft); font-size:16px; line-height:1.65; }
.faq .ans p{ margin:0 0 12px; }
.faq .ans p:last-child{ margin-bottom:0; }

/* ---------- responsive ---------- */
/* R5 #08: at 768 `.plans` computed two columns and the third card, the one carrying the badge
   and the only filled button, sat alone on a second row beside a dead half column. Three-card
   grids go straight to one column; `.flist` has an even count and keeps the two-column step. */
@media (max-width: 899px){
  .flist{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .practices, .plans{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 599px){
  .flist{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- R6: the product detail, bare (tickets 49 and 50) ----------
   R4 put every crop on a tinted stage with a pill and a caption. Council R6 measured the stages
   27 to 66 per cent empty around the crops at 1280, three stage widths on one site, and 24 per
   cent of the hero crop off screen at 375 in a scroll region nobody could see; the owner rejected
   the result outright. The crop sits on one .ds-card at its own pixel width, the way the old
   halingo.be showed its screens, and below its own width it scales instead of panning (council
   C3: wrap on the desktop, scale on the phone, no pan anywhere). Never wider than intrinsic:
   `width:max-content` on the figure takes the img's own width attribute as the ceiling. */
.hs-page picture{ display:block; }
.hs-page .shot img{ display:block; width:100%; max-width:100%; height:auto; }
.hs-page .detail{ margin:0; width:max-content; max-width:100%; }
/* a grid track of 1fr has an `auto` minimum, and the figure's max-content width would set it:
   93px of overflow at 375. Both halves of a feature row may shrink below their content. */
.hs-page .feat-copy, .hs-page .feat-media{ min-width:0; }
.hs-page .detail .shotframe{ padding:0; overflow:hidden; }
.hs-page .detail figcaption{ margin-top:12px; font:500 14px/1.5 var(--ds-font); color:var(--ds-text-muted); }
.hs-page .detail--wide{ margin:var(--blk-gap) 0 0; }
@media (min-width: 900px){
  .hs-page .hero .wrap{ grid-template-columns:1.05fr 1fr; gap:clamp(32px, 4vw, 56px); align-items:center; }
  .hs-page .hero-media{ justify-self:end; width:100%; }
}

/* ---------- R6: the photographs (ticket 48) ----------
   The owner released every picture on the old www.halingo.be on 2026-09-28. Five of them come
   back: the hero of each marketing page and the "Meer vrije tijd" band. 1600 wide with an 800
   variant, WebP, uploaded by 83 as attachments, never hotlinked. */
.hs-page img.photo{ display:block; width:100%; height:auto; border-radius:var(--ds-radius-lg, 16px); object-fit:cover; }
.hs-page .hero-media img.photo{ aspect-ratio:4 / 3; }
.hs-page .head-grid{ display:grid; gap:var(--blk-gap); align-items:center; }
.hs-page .head-media img.photo{ aspect-ratio:3 / 2; }
@media (min-width: 900px){
  .hs-page .head-grid{ grid-template-columns:1.1fr 1fr; gap:clamp(32px, 4vw, 56px); }
  .hs-page .head-media{ width:100%; }
}
/* the full-bleed band: the photograph behind, a scrim in the brand's deep green, white copy */
.hs-page .band-photo{ position:relative; isolation:isolate; overflow:hidden; color:#fff;
  padding-block:clamp(72px, 12vw, 160px); }
.hs-page .band-photo img.photo{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; z-index:-2; }
.hs-page .band-photo::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(4,32,26,.82) 0%, rgba(4,32,26,.6) 50%, rgba(4,32,26,.3) 100%); }
.hs-page .band-photo .eyebrow{ color:var(--ds-primary-soft); }
.hs-page .band-photo h2{ font:600 var(--t-h2)/1.12 var(--ds-font-display); letter-spacing:-.02em; margin:16px 0 0;
  max-width:22ch; text-wrap:balance; color:#fff; }
.hs-page .band-photo p:not(.eyebrow){ font-family:var(--ds-font-serif); font-style:italic; font-size:var(--t-lede);
  line-height:1.5; margin:16px 0 0; max-width:46ch; color:rgba(255,255,255,.92); }
/* the devices shot, the one large product asset the old site published, full width */
.hs-page .devices .dev-shot{ display:block; width:100%; max-width:1100px; height:auto; margin:var(--blk-gap) auto 0; }

/* ---------- R6: prose, alignment, the pricing card (tickets 50 and 51) ---------- */
.hs-page .feat-copy p.prose{ margin:16px 0 0; font-size:17px; line-height:1.65; color:var(--ds-text-soft); max-width:52ch; }
/* the RIZIV block was the one centred head on a page where every other h2 starts at the gutter */
.hs-page .feat--full .sec-head{ margin-inline:0; text-align:left; }
.hs-page .feat--full .sec-head .eyebrow{ justify-content:flex-start; }
.hs-page .feat-more{ text-align:left; }
.hs-page .cta-band .price-link{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.plan h3{ margin:0; font:inherit; }
.plan .for{ margin:8px 0 0; font-size:15px; line-height:1.5; color:var(--ds-text-soft); }
.plan .incl-h{ margin:24px 0 0; padding-top:20px; border-top:1px solid var(--ds-divider);
  font:700 11px/1.6 var(--ds-font-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ds-text-muted); }
.plan .incl{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.plan .incl li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--ds-ink); }
.plan .incl .tick{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--ds-primary-soft);
  color:var(--ds-primary); display:grid; place-items:center; margin-top:1px; }
/* the practices' own marks beside their words, on /prices and in the home quote */
/* R7 (ticket 67): three marks of three aspect ratios in one 56px square measured 52, 22 and
   33px of ink, and the de Taalschat wordmark was a 5px smudge. One frame height, the mark
   contained on a white tile with a hairline, and the wordmark's frame twice as wide so its
   letters resolve. The -128 files are the marks trimmed to their ink (sharp trim), 128 high or 256 wide. */
.hs-page .practices .pr .nm img, .hs-page .quote .who img{ width:64px; height:64px; object-fit:contain; padding:6px;
  background:var(--ds-surface); border:1px solid var(--ds-divider); border-radius:var(--ds-radius-md); flex:none; }
.hs-page .practices .pr .nm img.lg-practice-de-taalschat-128, .hs-page .quote .who img.lg-practice-de-taalschat-128{ width:128px; }
.hs-page .practices .pr .nm img.lg-practice-groepspraktijk-de-brug-128{ width:96px; }
.hs-page .quote .who{ display:flex; align-items:center; justify-content:center; gap:12px; }
.fitem p{ font-size:16px; }

/* ---------- R4: the partner strip, the payment row, one chip ----------
   Before: one line of uppercase label type, a 52px violet Stripe wordmark and a 101px navy and
   light-blue Twilio SendGrid lockup, left aligned on a teal band. Three colour systems, two
   optical weights, nothing shared. The claim is a sentence behind a check now, the two
   suppliers sit in the white chip the payment marks already used on /prices, desaturated until
   hover, each at its own optical height, and the row is centred with a hairline between the two
   halves. Nothing about the strip claims a partnership, and no institution logo appears. */
.hs-page .partners .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px 28px; padding-block:20px; }
.hs-page .partners .riziv-line{ margin:0; display:inline-flex; align-items:center; gap:12px;
  font:600 14px/1.4 var(--ds-font); letter-spacing:0; text-transform:none; color:var(--ds-primary-hover); }
.hs-page .partners .riziv-line svg{ color:var(--ds-primary); flex:none; }
.hs-page .partners .sep{ width:1px; height:24px; flex:none;
  background:color-mix(in srgb, var(--ds-primary) 28%, transparent); }
.hs-page .partners .works{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hs-page .partners .lbl{ color:var(--ds-text-muted); }
.hs-page .partners ul{ display:flex; align-items:center; gap:12px; margin:0; padding:0; list-style:none; }

.hs-page .paycard{ display:inline-flex; align-items:center; justify-content:center; height:var(--ds-control-h);
  padding:0 16px; }
/* R7: on /prices the three pills are one size; the partner chips on / keep their own widths */
.hs-page .payrow .paycard{ width:72px; padding:0; }
.hs-page .paycard img.lg{ display:block; width:auto; object-fit:contain; }
.hs-page .partners img.lg{ filter:grayscale(1); opacity:.62;
  transition:filter var(--ds-motion-soft) var(--ds-ease), opacity var(--ds-motion-soft) var(--ds-ease); }
.hs-page .partners li:hover img.lg{ filter:none; opacity:1; }
/* R5 #34: the Stripe wordmark rendered 40px wide beside SendGrid at 101px, two and a half times
   its size, because both were set by height and a one-line wordmark and a two-line lockup do not
   balance that way. Set so the two marks occupy a comparable optical width: 62 and 83. */
.hs-page .lg-stripe{ height:26px; }            /* one-line wordmark, cap height fills the file */
.hs-page .lg-sendgrid{ height:18px; }          /* TWILIO sits above the wordmark in the file */
/* R7: ink heights converge (Visa 20, the two 25px files at their own size, never upscaled) */
.hs-page .lg-visa{ height:20px; }
.hs-page .lg-mastercard{ height:22px; }
.hs-page .lg-bancontact{ height:25px; }
@media (max-width: 599px){ .hs-page .partners .sep{ display:none; } }

/* the attribution under a testimonial: the brand avatar, not a 44px circle of a 500px logo.
   R5 BUG-12 (ticket 43): all three rendered --ds-primary with white text, which is not one of
   the five identity pairs and defeats the palette purpose, telling people apart. The colour is
   derived from the name now (.ds-avatar--pN, emitted by 98) and nothing is set here. */
/* R7b: the tile sits above the name. Three marks of three shapes get three tile widths (64, 128,
   96) at one height, and the names still start on one x because nothing sits beside them. */
.hs-page .practices .pr .nm{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }

/* the hero label row: the eyebrow and the bilingual chip were two stacked chips above the H1 */
.hs-page .hero-tags{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hs-page .hero-tags .eyebrow, .hs-page .hero-tags .bislash{ margin:0; }
.hs-page .hero h1{ margin-top:20px; }

/* F20: .mark is a Bootstrap utility (a highlighter yellow in no Halingo token) and a bare
   blockquote picks up Odoo's grey 5px rule. The glyph is .qmark now, and both are stated here so
   a future Bootstrap version cannot take them back. */
.hs-page .quote .qmark{ display:block; font:600 64px/.6 var(--ds-font-serif); font-style:italic;
  color:var(--ds-primary-light, var(--ds-primary)); background:transparent; padding:0 0 12px; }
/* R5, design-critique: measured at 1440 the blockquote's optical centre sat at x=395 while its
   wrapper's centre, where the quote glyph and the attribution sit, was x=720. `margin-left:0`
   defeated the `margin:22px auto 0` the block inherits from layer 2. */
.hs-page .quote blockquote{ border-left:0; padding-left:0; margin-inline:auto; }

/* 08 P2.22: the legend that says what the asterisks mean, above both forms. */
.hs-page .hs-req-note{ margin:0 0 12px; font-size:13px; color:var(--ds-text-muted); }

/* ---------- R4: the closing band ----------
   `.cta-band p` (0,1,1) beat `.eyebrow` (0,1,0) in layer 2, so the eyebrow of every closing band
   rendered at 20.2px in Source Serif italic with .14em of uppercase tracking instead of the 12px
   Inter Tight label it is everywhere else. Measured on / and /prices at 1440, 1200, 768 and 375.
   The band also had no rhythm of its own: it is the last thing before the footer, so the section
   that holds it is .flush-bottom and the footer's own --site-gap margin is the single gap. */
.hs-page .cta-band .eyebrow{ color:var(--ds-primary-soft); }
.hs-page .cta-band h2{ margin-top:16px; }
.hs-page .cta-band p{ margin-top:16px; }
.hs-page .cta-band .hs-row{ margin-top:32px; }

/* ---------- R4: /contact ----------
   It was the plainest page on the site: `.tk-wrap` opened 40px under the bar with no eyebrow
   aura, the H1 was capped at 40px by `.tk-head h1` where /features and /prices run to 64px, and
   `.tk-form` was capped at 680px inside a 780px column, so 100px of the column was dead. 97
   gives it the same `.page-head` as the other two; these rules only undo the ticket-form
   defaults of layer 3, and only on the contact pages, so /help/ticket keeps its own scale. */
.hs-page.ct-page .tk-wrap{ padding-block:0; }
.hs-page.ct-page .tk-form{ max-width:none; margin-top:0; }
.hs-page.ct-page .s_website_form{ margin-top:0; }
/* Layer 4 lifts the ticket page's head and form out of their wrapper below 960 so the
   disclosures land between the H1 and the form. /contact keeps its H1 in the .page-head above
   the grid now, so that rule put the "Al klant?" card ahead of the form the visitor came for. */
.hs-page.ct-page .tk-wrap > div{ display:block; }
.hs-page.ct-page .tk-wrap > .tk-side{ order:0; }
.hs-page.ct-page .tk-side{ top:calc(68px + 20px); }
.hs-page.ct-page .tk-sent{ padding-block:var(--head-pad) var(--site-gap); }

/* ---------- R4: the footer ---------- */
.foot .wrap{ padding-block:56px 32px; }
.foot-bottom{ margin-top:40px; padding-top:24px; }

/* ---------- R4: phones ----------
   Therapists browse on a phone, and at 375 the two hero buttons were 150px and 175px wide,
   stacked and ragged, and the check beside the three-line trial line was optically centred
   against the whole paragraph. Every button pair below 480 is one column, full width. */
.hs-page .microtrust{ align-items:flex-start; }
.hs-page .microtrust svg{ margin-top:3px; }
@media (max-width: 599px){
  .hs-page .hero-cta, .hs-page .row-cta, .hs-page .cta-band .hs-row{
    display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .hs-page .hero-cta .ds-btn, .hs-page .row-cta .ds-btn, .hs-page .cta-band .hs-row .ds-btn{ width:100%; }
  .hs-page .plan-body{ padding:24px; }
  .hs-page .plan.pop .pn, .hs-page .plan.pop .users{ padding-right:88px; }
  /* R7 (ticket 67): on a phone the price-tag photograph pushed the first price 131px under the fold */
  .hs-page .pr-head .head-media{ display:none; }
  /* R7c: the French and German ledes ran to five lines at 18px and pushed the first price back under
     the fold; 17px keeps every language's first price on the first screen. */
  .hs-page .pr-head .lede{ font-size:17px; }
}

/* ---------- R5: ticket 40, the phone end of the same blocks ----------
   The timeline callout put an 11px "HALINGO" pill inline with its sentence, which at 375 left
   about 200px of line and wrapped step 3 into seven short ragged lines. Above the phone
   breakpoint the pill and the sentence still share a row, which is where it reads well. */
@media (max-width: 599px){
  .hs-page .weekline .does{ display:grid; gap:8px; justify-items:start; }
  .hs-page .weekline .does .lbl{ margin-top:0; }
}

/* R5 #39: 8,520px at 375 on the home page and 7,921 on /features, with nothing but the browser
   chrome to get back to the navigation. One link at the end of the content, below the phone
   breakpoint only, landing on the same #main-content the skip link uses. */
.hs-page .to-top{ display:none; }
@media (max-width: 599px){
  .hs-page .to-top{ display:block; text-align:center; margin:0; padding:var(--site-gap) var(--site-pad) 0; }
  .hs-page .to-top a{ display:inline-flex; align-items:center; gap:8px; min-height:var(--ds-touch-target-min); padding:0 18px;
    border:1px solid var(--ds-border-strong); border-radius:var(--ds-radius-pill);
    background:var(--ds-surface); color:var(--ds-primary);
    font:600 14px/1 var(--ds-font); text-decoration:none; }
  .hs-page .to-top a::before{ content:"91"; font-size:15px; line-height:1; }
}