/* support.halingo.be bundle, built by 02-Website/odoo/83-halingo-support-assets.js on 2026-09-23. 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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') 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 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_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); }

/* 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; }

@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; }
}