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

/* layer 0: self-hosted fonts */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.hs-page .section.flush-top{ padding-top:0; }
.hs-page .section.flush-bottom{ padding-bottom:0; }

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

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

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

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

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

/* ---------- what practices say (prices) ---------- */
.practices{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--card-gap); margin-top:var(--blk-gap); }
/* BUG-15: six card look-alikes for one .ds-card. Each composition below carries its padding
   or its tint and nothing else; the surface, the border, the 12px radius and the raised shadow
   come from .ds-card in bundle layer 1, which the page builders now emit on every one of them. */
.practices .pr{ padding:24px; }
.practices .pr .hl{ font:600 20px/1.3 var(--ds-font-display); color:var(--ds-primary); margin:0; }
.practices .pr p{ margin:12px 0 0; font-size:15px; color:var(--ds-text-soft); line-height:1.6; }
.practices .pr .nm{ margin-top:20px; padding-top:16px; border-top:1px solid var(--ds-divider); font-size:13px; color:var(--ds-text-muted); }
.practices .pr .nm b{ display:block; color:var(--ds-ink); font-size:15px; }

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

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

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

/* ---------- prices: FAQ, native disclosure, no script ---------- */
.faq{ margin-top:var(--blk-gap); border-top:1px solid var(--ds-border); }
.faq details{ border-bottom:1px solid var(--ds-border); }
.faq summary{ cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font:600 18px/1.4 var(--ds-font); color:var(--ds-ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:12px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--ds-primary); border-bottom:2px solid var(--ds-primary);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--ds-motion-snap) var(--ds-ease); }
.faq details[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq summary:focus-visible{ outline:2px solid var(--ds-focus); outline-offset:2px; border-radius:var(--ds-radius-sm); }
.faq .ans{ padding:0 0 24px; max-width:72ch; color:var(--ds-text-soft); font-size:16px; line-height:1.65; }
.faq .ans p{ margin:0 0 12px; }
.faq .ans p:last-child{ margin-bottom:0; }

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

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

.hs-page .detail{ margin:0; }
/* R5, design-critique: the three home stages measured 514, 514 and 452 wide around images of
   446x223, 446x115 and 352x72, so three frames of one component read as three objects. --stage-w
   is that one width, the widest crop the site ships; a narrower crop sits centred in it rather
   than being stretched to fill it, which the R4 rule forbids. */
.hs-page .detail{ --stage-w: 542px; --frame-w: 446px; }
.hs-page .detail .panel{ background:var(--ds-primary-soft);
  border-color:color-mix(in srgb, var(--ds-primary) 16%, transparent); box-shadow:none;
  padding:clamp(20px, 3vw, 32px); display:grid; justify-items:center;
  box-sizing:border-box; width:min(100%, var(--stage-w)); margin-inline:auto; }
/* R5 BUG-08: the frame wore --ds-shadow-overlay, the token reserved for dropdowns, popovers and
   modals, on a static figure, and an 8px radius where the card scale is 12px.
   overflow-x:auto at every width, not only on a phone: the frame can be narrower than the crop
   in the middle of the desktop range, and a screenshot that pans is honest where one that is
   scaled to 0.8 or clipped is not. */
.hs-page .detail .shotframe{ width:min(100%, var(--frame-w)); padding:0;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.hs-page .detail .shot img{ margin-inline:0; max-width:none; }
.hs-page .detail figcaption{ margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font:600 14px/1.5 var(--ds-font); color:var(--ds-text-soft); }
.hs-page .detail figcaption .lbl{ color:var(--ds-primary); background:var(--ds-surface);
  border:1px solid var(--ds-border); border-radius:var(--ds-radius-pill); padding:8px 12px; }
/* one chapter of /features, centred under its heading with air on both sides */
.hs-page .detail--wide{ margin-top:var(--blk-gap); }
.hs-page .detail--wide .panel{ padding:clamp(24px, 4vw, 48px); }
.hs-page .detail--wide{ --stage-w: 542px; }
.hs-page .detail--wide figcaption{ justify-content:center; }

/* R5 #04: the hero carries one crop in the same stage the feature rows use, at its own pixel
   width, so the one image above the fold can actually be read. The media column no longer needs
   to be the wider half, because it is no longer trying to hold 1658px of collage. */
.hs-page .detail--hero{ margin-top:8px; }
.hs-page .detail--hero figcaption{ justify-content:flex-start; }
@media (min-width: 900px){
  .hs-page .hero .wrap{ grid-template-columns:1.05fr 1fr; gap:clamp(32px, 4vw, 48px); }
  .hs-page .hero-media{ justify-self:end; }
}

/* Phones. The gutter costs the detail 40px of its 446, so below 600 the stage breaks the
   gutter and runs to the viewport edge: the crop renders at 0.77 of intrinsic instead of 0.65.
   The negative margin is exactly --site-pad, so the document width does not change. */
/* R5 #26: measured at 375, crop-agenda rendered 446 intrinsic into 301 CSS px, 0.67x, and the
   in-app text is already small at 1:1. The phone is this audience's primary device and the
   screenshots are the proof, so the frame scrolls and the image keeps its own width. The stage
   still breaks the gutter, which buys 40px of the pan back. */
@media (max-width: 599px){
  .hs-page .detail .panel{
    margin-inline:calc(-1 * var(--site-pad)); border-radius:0; border-inline:0; padding-inline:16px;
    width:auto; justify-items:stretch; }
  .hs-page .detail figcaption{ margin-top:12px; }
}

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

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

/* the attribution under a testimonial: the brand avatar, not a 44px circle of a 500px logo.
   R5 BUG-12 (ticket 43): all three rendered --ds-primary with white text, which is not one of
   the five identity pairs and defeats the palette purpose, telling people apart. The colour is
   derived from the name now (.ds-avatar--pN, emitted by 98) and nothing is set here. */
.hs-page .practices .pr .nm{ display:flex; align-items:center; gap:12px; }

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

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

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

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

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

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

/* ---------- R4: phones ----------
   Therapists browse on a phone, and at 375 the two hero buttons were 150px and 175px wide,
   stacked and ragged, and the check beside the three-line trial line was optically centred
   against the whole paragraph. Every button pair below 480 is one column, full width. */
.hs-page .microtrust{ align-items:flex-start; }
.hs-page .microtrust svg{ margin-top:3px; }
@media (max-width: 599px){
  .hs-page .hero-cta, .hs-page .row-cta, .hs-page .cta-band .hs-row{
    display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .hs-page .hero-cta .ds-btn, .hs-page .row-cta .ds-btn, .hs-page .cta-band .hs-row .ds-btn{ width:100%; }
  .hs-page .includes{ gap:12px; padding:16px 20px; }
  .hs-page .plan-body{ padding:24px; }
  .hs-page .plan .pn{ padding-right:88px; }
}

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

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