/* Halingo Support bundle, built by 02-Website/odoo/83-halingo-support-assets.js on 2026-09-27. 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{ font:600 12px/1 var(--ds-font-label); color:var(--ds-text-muted); letter-spacing:.04em; }
.nav-links a[aria-current="page"]{ color:var(--ds-primary); background:var(--ds-hover-wash); }
.hs-nav .lang a{ padding:6px 9px; }

/* 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 17px/1.4 var(--ds-font); color:var(--ds-ink); padding:8px 0; }
.search input::placeholder{ color:var(--ds-text-placeholder); }
.search .ds-btn{ height:44px; padding:0 20px; flex:none; }
.search:focus-within{ outline:2px solid var(--ds-focus); outline-offset:2px; }
.search--sm{ box-shadow:none; padding:3px 3px 3px 14px; }
.search--sm input{ font-size:15px; padding:7px 0; }
.search--sm .ds-btn{ height:36px; padding:0 14px; }
.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 10px; 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:12.5px; color:var(--ds-text-muted); margin-left:auto; text-align:right; }

/* ticket nudge (shared) */
.nudge{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--ds-surface);
  border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:24px; }
.nudge b{ display:block; font-size:17px; }
.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.05 var(--ds-font-display); letter-spacing:-.03em; 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{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); 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 19px/1.3 var(--ds-font); margin:0 0 4px; }
.a-cat .desc{ margin:0 0 16px; font-size:14.5px; 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:-.03em; 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{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; 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 26px/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:44px; 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 13px/1.4 var(--ds-font-label); letter-spacing:.12em; text-transform:uppercase; 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:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); 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:14.5px; 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(2rem,4vw,2.75rem)/1.1 var(--ds-font-display); letter-spacing:-.025em; 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{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; 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:6px; align-items:center; font-size:13.5px; 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 10px; border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); font-family:var(--ds-font-label); font-size:12px; letter-spacing:.06em; }
.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(1.75rem,3.4vw,2.5rem)/1.15 var(--ds-font-display); letter-spacing:-.025em; margin:16px 0 0; text-wrap:balance; }
.article .meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:13.5px; color:var(--ds-text-muted); }
.article .lede{ font-family:var(--ds-font-serif); font-style:italic; font-size:19px; line-height:1.5; color:var(--ds-text-soft); margin:16px 0 0; }
.article .body{ margin-top:32px; font-size:16.5px; 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:7px; padding:9px 12px; background:var(--ds-surface-sunken); border-bottom:1px solid var(--ds-border); }
.article .shot .chrome i{ width:10px; height:10px; border-radius:50%; background:var(--ds-border-strong); opacity:.5; display:block; }
.article .shot .chrome .url{ margin-left:10px; font:500 11.5px/1 var(--ds-font-mono); color:var(--ds-text-muted); }
.article .shot .fake{ padding:16px; display:grid; gap:10px; }
.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:36px; padding:0 14px; }
.related{ margin-top:40px; padding-top:24px; border-top:1px solid var(--ds-border); }
.related h2{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); margin:0 0 4px; }

/* ======================================================================
   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{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:16px 24px; }
.rail h2{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); 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:14.5px; }
.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:13.5px; color:var(--ds-text-soft); display:block; }
.rail .box.tk .ds-btn{ margin-top:16px; width:100%; justify-content:center; }
.langbar{ display:flex; gap:6px; }

/* ======================================================================
   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(1.9rem,3.6vw,2.5rem)/1.12 var(--ds-font-display); letter-spacing:-.025em; 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); 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:44px; }
.tk-form .ds-input, .tk-form .ds-select, .tk-form .ds-textarea{ width:100%; box-sizing:border-box; font:400 15px/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, .tk-form .ds-select:focus, .tk-form .ds-textarea:focus{ 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:48px; padding:0 24px; }
.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{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:16px 24px; }
.tk-side h2{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); margin:0 0 8px; }
.tk-side p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ds-text-soft); }
.tk-side p + p{ margin-top:8px; }
.tk-side .alist a{ font-size:14.5px; 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(1.75rem,3.4vw,2.4rem)/1.12 var(--ds-font-display); letter-spacing:-.025em; 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: 960px){
  .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: 560px){
  .foot .lang{ display:inline-flex; }
  .tk-form .two{ grid-template-columns:1fr; }
  .search{ padding-left:14px; }
  .search .ds-btn{ padding:0 14px; }
}


/* 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:6px; }
.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 6px; }
.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 10px; 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:17px; }
.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); }
.hs-nav .ds-btn--cta, .hs-nav .ds-btn--cta:hover{ color:var(--ds-on-accent-cta); }
.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 10px; font:600 12px/1 var(--ds-font-label); letter-spacing:.06em; }
.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); padding:9px 14px; 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:14px; padding-block:24px 4px; }
.hs-sr-head .back{ display:inline-flex; align-items:center; gap:6px; 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(22px,3vw,28px)/1.2 var(--ds-font-display); margin:0; letter-spacing:-.01em; }
.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 17px/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 6px; }
.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:6px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-md); box-shadow:var(--ds-shadow-lg, 0 12px 32px rgba(0,0,0,.12)); z-index:30; max-height:min(60vh,420px); overflow:auto; }
.search .dropdown-item{ display:block; padding:10px 12px !important; border-radius:var(--ds-radius-sm, 6px); 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:18px; justify-items:start; }
.hs-nf h1{ font:700 clamp(32px,5vw,48px)/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:10px; 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:14px 0 15px; 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 3px; font:600 11px/1.4 var(--ds-font-label, var(--ds-font)); letter-spacing:.12em; text-transform:uppercase; color:var(--ds-text-muted); }
.hs-sr-list h2{ margin:0; font:600 17px/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:3px; }
.hs-sr-more{ margin:20px 0 0; }
.hs-sr .hs-sr-none-p{ margin:0; max-width:56ch; }

@media (max-width: 900px){
  .hs-nav .nav-links, .hs-nav .nav-signin{ display:none; }
}
@media (max-width: 560px){
  .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:14px 16px; display:grid; gap:8px; }
.tk-guide .h{ margin:0; font:600 11px/1.2 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-primary); }
.tk-guide ol{ margin:0; padding-left:20px; display:grid; gap:4px; font-size:14.5px; 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); padding:10px 14px; }
.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 10px; }
.a-hero .hints .hints-l{ font:600 11px/1.6 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); }
.a-hero .hints a{ border-radius:var(--ds-radius-md); padding:6px 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: 560px){
  .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: council C2. The orange stays; only the ink on it changes, 2.53:1 -> 6.73:1. */
#wrapwrap .ds-btn--cta,
#wrapwrap .ds-btn--cta:hover,
#wrapwrap .ds-btn--cta:active,
#wrapwrap .ds-btn--cta:focus-visible,
.hs-nav .ds-btn--cta,
.hs-nav .ds-btn--cta:hover,
.tk-form .actions .ds-btn.s_website_form_send{ color:var(--ds-on-accent, #0F1F1B); }

/* 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: 900px){
  .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) 18px; }
  .hs-nav .nav-sheet .sheet-links{ display:grid; }
  .hs-nav .nav-sheet .sheet-links a{ display:flex; align-items:center; min-height:44px; padding:6px 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 600 */
@media (max-width: 600px){
  .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: 961px){
  .art-a{ grid-template-columns:260px minmax(0,1fr); }
  .art-a > .c-tree{ order:-1; }
  .art-a > .article{ order:0; }
}
@media (min-width: 961px){
  /* 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: 960px){
  /* 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:14px 2px; min-height:44px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; 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: 960px){
  .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:10px 14px;
  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 14px;
  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:680px; }
.article .body .o_readonly > p:first-of-type:not(.hs-ui-note),
.article .body .o_readonly > .hs-ui-note + p{
  font:italic 400 19px/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:36px; 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:44px; 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:44px; }
@media (min-width: 961px){ .hs-fb{ max-width:680px; } }

/* 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. */
.tk-side .box.tk-m > summary{ list-style:none; }
.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: 960px){
  /* 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; min-height:44px; display:flex; align-items:center;
    justify-content:space-between; gap:12px; padding:12px 0; }
  .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:14.5px; 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:10px 16px; }
.tk-sent p.note{ font-size:14.5px; 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 4px; font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ds-text-muted); }
.tk-sent-next .alist{ list-style:none; margin:0; padding:0; }
.tk-sent-next .alist a{ display:block; padding:10px 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: 900px){
  .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:42px; 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;
}


/* 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. */
:root{
  --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; } }
@media (min-width: 1200px){ :root{ --site-pad:48px; --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; }

/* ---------- 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.05 var(--ds-font-display); letter-spacing:-.03em; 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:48px; padding:0 22px; font-size:15px; }

/* the hero keeps the brand promise as the lede and the old product line right under it */
.hero .hero-sub{ font-size:17px; line-height:1.6; color:var(--ds-text-muted); 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; }
.hs-page .weekline .ds-tl-item{ grid-template-columns:32px minmax(0,1fr); gap:0 16px; padding-bottom:28px; }
.hs-page .weekline .ds-tl-item::before{ left:15px; top:36px; }
.hs-page .weekline .ds-tl-icon{ width:32px; height:32px; 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{ font:700 11px/1.5 var(--ds-font-label); letter-spacing:.13em;
  text-transform:uppercase; 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:6px 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:14px 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); }
.hs-page .weekline .does .lbl{ flex:none; margin-top:1px; font:700 10px/1 var(--ds-font-label); letter-spacing:.12em;
  text-transform:uppercase; 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:6px 10px; }
@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; font:700 12px/1 var(--ds-font-label); letter-spacing:.14em;
  color:var(--ds-primary); font-variant-numeric:tabular-nums; }
.hs-page .fact p{ margin:10px 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: 559px){ .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); }
.practices .pr{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:24px; }
.practices .pr .hl{ font:600 20px/1.3 var(--ds-font-display); color:var(--ds-primary); margin:0; }
.practices .pr p{ margin:12px 0 0; font-size:15px; color:var(--ds-text-soft); line-height:1.6; }
.practices .pr .nm{ margin-top:20px; 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{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); 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 17px/1.35 var(--ds-font); margin:0 0 6px; }
.fitem p{ margin:0; font-size:15px; color:var(--ds-text-muted); line-height:1.6; }
.fitem .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); }

/* ---------- 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{ background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg);
  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); }
.plan .flag{ position:absolute; top:20px; right:20px; font:700 10.5px/1 var(--ds-font-label);
  letter-spacing:.12em; text-transform:uppercase; }
.plan h2, .plan h3{ font:600 19px/1.3 var(--ds-font); margin:0; padding-right:92px; }
.plan .users{ font-size:14px; color:var(--ds-text-muted); margin:4px 0 0; }
.plan .price{ margin:24px 0 0; display:flex; align-items:baseline; gap:6px; 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:48px; }
.plan .spacer{ flex:1; min-height:24px; }

.includes{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 32px; margin:var(--card-gap) 0 0;
  padding:16px 24px; list-style:none; background:var(--ds-surface); border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg); }
.includes li{ display:flex; gap:10px; align-items:center; font-size:15px; color:var(--ds-ink); }
.includes .tick{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--ds-primary-soft);
  color:var(--ds-primary); display:grid; place-items:center; }
.note{ margin-top:20px; max-width:78ch; }

/* ---------- prices: FAQ, native disclosure, no script ---------- */
.faq{ margin-top:var(--blk-gap); border-top:1px solid var(--ds-border); }
.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 17px/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:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:2px; border-radius:6px; }
.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 ---------- */
@media (max-width: 960px){
  .practices, .plans, .flist{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 640px){
  .practices, .plans, .flist{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- R4: the framed product detail ----------
   Before: the six app-* screens (502x245 whole application windows, the largest the old
   halingo.be ever published) were shown at 502px on the home page and at 357px, three across, on
   /features, dropping to 220px (0.44 of intrinsic) at 768. A whole application window at that
   size is a grey smudge. The pages now carry the crop-* details, each rendered at its own pixel
   width or smaller and never stretched, one per section, on a tinted stage with a caption that
   names the screen. Owner instruction: no new capture, no CSS mock, no stock photography.
   The stage is the brand `.panel` of 11-Website/site.css; the frame is the `.ds-card`. */
.hs-page picture{ display:block; }
.hs-page .shot img{ display:block; width:100%; height:auto; }

.hs-page .detail{ margin:0; }
.hs-page .detail .panel{ background:var(--ds-primary-soft);
  border:1px solid color-mix(in srgb, var(--ds-primary) 16%, transparent);
  border-radius:var(--ds-radius-lg); padding:clamp(20px, 3vw, 32px); display:grid; justify-items:center;
  width:fit-content; max-width:100%; margin-inline:auto; }
.hs-page .detail .shotframe{ width:100%; padding:0; overflow:hidden; background:var(--ds-surface);
  border:1px solid var(--ds-border); border-radius:var(--ds-radius-md); box-shadow:var(--ds-shadow-overlay); }
.hs-page .detail figcaption{ margin-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font:600 14px/1.5 var(--ds-font); color:var(--ds-text-soft); }
.hs-page .detail figcaption .lbl{ font:700 10px/1 var(--ds-font-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ds-primary); background:var(--ds-surface);
  border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); padding:6px 10px; }
/* one chapter of /features, centred under its heading with air on both sides */
.hs-page .detail--wide{ margin-top:var(--blk-gap); }
.hs-page .detail--wide .panel{ padding:clamp(24px, 4vw, 48px); }
.hs-page .detail--wide figcaption{ justify-content:center; }

/* the hero: the one high-resolution asset (1658x686) on a stage, so the cut-out devices stand on
   something instead of floating. Measured before: 510px rendered at 1440, 0.31 of intrinsic. */
.hs-page .hero-stage{ background:var(--ds-primary-soft);
  border:1px solid color-mix(in srgb, var(--ds-primary) 16%, transparent);
  border-radius:clamp(16px, 2.4vw, 24px); box-shadow:var(--ds-shadow-raised);
  padding:clamp(16px, 2.4vw, 24px) clamp(16px, 2.4vw, 24px) 0; overflow:hidden; }
.hs-page .hero-media .shot--hero{ max-width:none; margin:0; }
.hs-page .hero-media .shot--hero img{ display:block; width:100%; height:auto; }
@media (min-width: 961px){
  .hs-page .hero .wrap{ grid-template-columns:1fr 1.18fr; gap:clamp(32px, 4vw, 48px); }
}

/* Phones. The gutter costs the detail 40px of its 446, so below 600 the stage breaks the
   gutter and runs to the viewport edge: the crop renders at 0.77 of intrinsic instead of 0.65.
   The negative margin is exactly --site-pad, so the document width does not change. */
@media (max-width: 599px){
  .hs-page .detail .panel, .hs-page .hero-stage{
    margin-inline:calc(-1 * var(--site-pad)); border-radius:0; border-inline:0; padding-inline:16px; }
  .hs-page .detail figcaption{ margin-top:12px; }
}

/* ---------- 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:18px; }
.hs-page .partners .riziv-line{ margin:0; display:inline-flex; align-items:center; gap:10px;
  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:26px; flex:none;
  background:color-mix(in srgb, var(--ds-primary) 28%, transparent); }
.hs-page .partners .works{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hs-page .partners .lbl{ font:700 11px/1.4 var(--ds-font-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ds-text-muted); }
.hs-page .partners ul{ display:flex; align-items:center; gap:10px; margin:0; padding:0; list-style:none; }

.hs-page .paycard{ display:inline-flex; align-items:center; justify-content:center; height:40px;
  padding:0 14px; background:var(--ds-surface); border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-md); }
.hs-page .paycard img.lg{ display:block; width:auto; }
.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; }
.hs-page .lg-stripe{ height:17px; }            /* one-line wordmark, cap height fills the file */
.hs-page .lg-sendgrid{ height:22px; }          /* TWILIO sits above the wordmark in the file */
.hs-page .lg-visa{ height:16px; }
.hs-page .lg-mastercard, .hs-page .lg-bancontact{ height:22px; }
@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 */
.hs-page .practices .pr .nm{ display:flex; align-items:center; gap:12px; }
.hs-page .practices .pr .nm .ds-avatar{ flex:none; width:40px; height:40px;
  background:var(--ds-primary); color:var(--ds-on-primary); font:700 14px/1 var(--ds-font); }

/* 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:14px; 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 72px/.6 var(--ds-font-serif); font-style:italic;
  color:var(--ds-primary-light, var(--ds-primary)); background:transparent; padding:0 0 12px; }
.hs-page .quote blockquote{ border-left:0; padding-left:0; margin-left:0; }

/* 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{ font:700 12px/1.4 var(--ds-font-label); letter-spacing:.14em;
  text-transform:uppercase; font-style:normal; 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: 480px){
  .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 .includes{ gap:12px; padding:16px 20px; }
  .hs-page .plan-body{ padding:24px; }
  .hs-page .plan h2, .hs-page .plan h3{ padding-right:88px; }
}