.ci-header * { box-sizing: border-box; }
.ci-header {
  background: #000;
  border-bottom: 1px solid #444;
  color: #fff;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 12px 24px 11px;
  position: relative;
  width: 100%;
}
.ci-header-inner {
  align-items: center;
  border: 1px solid #444;
  border-radius: 16px;
  display: flex;
  gap: clamp(16px, calc(20vw - 224px), 32px);
  height: 56px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 15px;
  position: relative;
}
.ci-header-logo { align-items: center; display: inline-flex; flex: none; text-decoration: none; }
/* The footer logo's ring (DREAM-818), not the browser's own outline. */
.ci-header-logo:focus-visible { border-radius: 4px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-header-logo .ci-logo-img { display: block; height: 31.76px; width: 198.26px; }
/* The pinned bar's own controls count as visible from its bottom edge (BACKLOG, focus scroll); one
   selector per line, as GrapesJS's stock parser splits a list inside :is() (BACKLOG, DREAM-764). */
html:not([data-editor-canvas]) .ci-header-inner > .ci-header-logo,
html:not([data-editor-canvas]) .ci-header-inner .ci-hnav,
html:not([data-editor-canvas]) .ci-header-inner .ci-hnav-toggle,
html:not([data-editor-canvas]) .ci-header-inner .ci-header-burger,
html[data-editor-preview] .ci-header-inner > .ci-header-logo,
html[data-editor-preview] .ci-header-inner .ci-hnav,
html[data-editor-preview] .ci-header-inner .ci-hnav-toggle,
html[data-editor-preview] .ci-header-inner .ci-header-burger { scroll-margin-top: calc(-1 * (var(--ci-header-h, 0px) + 12px)); }
/* DREAM-873: equal gaps and matching logo/last-glyph insets; compact spacing near 1200.
   Long custom menus remain a product choice; see BACKLOG "The grouped header's loose ends". */
.ci-header-nav { align-items: center; align-self: stretch; display: flex; flex: 1; justify-content: space-between; }
.ci-header-nav > :last-child { margin-right: -10px; }
.ci-hnav {
  align-items: center;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  height: 36px;
  line-height: 22px;
  padding: 0 10px;
  text-decoration: none;
  white-space: nowrap;
}
.ci-hnav:focus-visible { outline: 2px solid #5749dd; outline-offset: 1px; }
.ci-hnav-item { align-items: center; border-radius: 8px; display: flex; height: 36px; position: relative; }
/* An item with a panel: label then chevron, the 6px gap on the toggle so the two
   targets tile the box, and ONE ring round both, whichever has the focus. */
.ci-hnav-item > .ci-hnav { padding-right: 0; }
.ci-hnav-toggle { align-items: center; background: none; border: 0; color: #fff; cursor: pointer; display: inline-flex; height: 36px; padding: 10px 10px 10px 6px; position: relative; }
.ci-hnav-toggle:focus-visible { outline: 2px solid #5749dd; outline-offset: 1px; }
/* Where :has() parses, the item draws the one ring and its two stops draw none. */
@supports selector(:has(a)) {
  .ci-hnav-item > .ci-hnav:focus-visible, .ci-hnav-item > .ci-hnav-toggle:focus-visible { outline: none; }
  .ci-hnav-item:has(> .ci-hnav:focus-visible, > .ci-hnav-toggle:focus-visible) { outline: 2px solid #5749dd; outline-offset: 1px; }
}
/* A touch screen opens a panel by the chevron: its target grows to 44px tall. */
@media (hover: none), (any-pointer: coarse) {
  .ci-hnav-toggle::before { bottom: -4px; content: ''; left: 0; position: absolute; right: 0; top: -4px; }
}
.ci-hnav-disclosure { background: none; border: 0; cursor: pointer; font-family: inherit; gap: 6px; padding: 0 10px; }
.ci-hnav-item > .ci-hnav-disclosure { padding-right: 10px; }
.ci-hnav-item.is-current::after { content: ''; }
.ci-hnav-item.is-current > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
.ci-hnav-item.is-current > .ci-hnav-toggle { cursor: default; }
.ci-mobmenu-item.is-current > .ci-mobmenu-group { text-decoration: underline; text-decoration-color: #0c866a; }
.ci-mobmenu-item.is-current .ci-mobmenu-chev { transform: rotate(180deg); }
.ci-hnav-chev { display: block; height: 16px; width: 16px; }
/* Active: a 2px green bar under the content (Figma pins it 10px in, 14px from the
   right) and the chevron up. A border, so forced colours keep it. */
.ci-hnav-item::after { border-bottom: 2px solid #0c866a; bottom: 0; content: none; left: 10px; pointer-events: none; position: absolute; right: 14px; }
.ci-header-nav:not([data-nav-editing]) .ci-hnav-item:has(:focus-visible):not(.is-closed)::after { content: ''; }
.ci-header-nav:not([data-nav-editing]) .ci-hnav-item.has-focus:not(.is-closed)::after { content: ''; }
html[data-editor-preview] .ci-hnav-item:has(:focus-visible):not(.is-closed)::after { content: ''; }
html[data-editor-preview] .ci-hnav-item.has-focus:not(.is-closed)::after { content: ''; }
.ci-hnav-item.is-open::after { content: ''; }
.ci-header-nav:not([data-nav-editing]) .ci-hnav-item:has(:focus-visible):not(.is-closed) > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
.ci-header-nav:not([data-nav-editing]) .ci-hnav-item.has-focus:not(.is-closed) > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
html[data-editor-preview] .ci-hnav-item:has(:focus-visible):not(.is-closed) > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
html[data-editor-preview] .ci-hnav-item.has-focus:not(.is-closed) > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
.ci-hnav-item.is-open > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
/* :focus-visible, not :focus-within — a mouse click on the toggle never
   matches it, so the click toggle can close what the click opened. */
.ci-header-nav:not([data-nav-editing]) .ci-hnav-item:has(:focus-visible):not(.is-closed) > .ci-hnav-menu { display: flex; }
.ci-header-nav:not([data-nav-editing]) .ci-hnav-item.has-focus:not(.is-closed) > .ci-hnav-menu { display: flex; }
html[data-editor-preview] .ci-hnav-item:has(:focus-visible):not(.is-closed) > .ci-hnav-menu { display: flex; }
html[data-editor-preview] .ci-hnav-item.has-focus:not(.is-closed) > .ci-hnav-menu { display: flex; }
.ci-hnav-item.is-open > .ci-hnav-menu { display: flex; }
/* Hover opens a panel only where a pointer hovers: a tap's sticky :hover would
   reopen what the chevron just closed (PR #497 R1.2). */
@media (hover: hover) {
  .ci-header-nav:not([data-nav-editing]) .ci-hnav-item:hover:not(.is-closed)::after { content: ''; }
html[data-editor-preview] .ci-hnav-item:hover:not(.is-closed)::after { content: ''; }
  .ci-header-nav:not([data-nav-editing]) .ci-hnav-item:hover:not(.is-closed) > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
html[data-editor-preview] .ci-hnav-item:hover:not(.is-closed) > .ci-hnav-toggle .ci-hnav-chev { transform: rotate(180deg); }
  .ci-header-nav:not([data-nav-editing]) .ci-hnav-item:hover:not(.is-closed) > .ci-hnav-menu { display: flex; }
html[data-editor-preview] .ci-hnav-item:hover:not(.is-closed) > .ci-hnav-menu { display: flex; }
}
/* menu/panel-desktop on the bar's bottom edge, 14px left of its item. max-content: an absolute box
   shrinks to its containing block (the narrow item) and would wrap every link. The script shifts
   it left by --ci-hnav-shift so it stops at the strip's right edge (DREAM-744). */
.ci-hnav-menu {
  align-items: flex-start;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  box-shadow: 0 8px 24px 0 #00000029, 0 1px 3px 0 #00000014;
  color: #202224;
  display: none;
  gap: 48px;
  left: calc(-14px - var(--ci-hnav-shift, 0px));
  padding: 24px;
  position: absolute;
  top: calc(100% + 22px);
  width: max-content;
  z-index: 5;
}
/* Bridges the gap (and the panel's top border) so the pointer can travel from
   the item into its dropdown without the hover rule closing it on the way. */
.ci-hnav-menu::before { bottom: 100%; content: ''; height: 23px; left: 0; position: absolute; right: 0; }
/* A column: menu/panel-heading (30px box) 14px over menu/panel-link boxes 4px
   apart; it pads 4px (and gives it back) so its scroll box cannot clip a ring. */
.ci-hnav-group { display: flex; flex-direction: column; gap: 4px; margin: -4px; padding: 4px; }
.ci-hnav-group-title { border-radius: 3px; color: #202224; display: block; font-size: 14px; font-weight: 700; line-height: 22px; margin-bottom: 10px; padding: 5px 0 3px; text-decoration: none; white-space: nowrap; width: fit-content; }
.ci-hnav-sub { border-radius: 3px; color: #545658; display: block; font-size: 14px; font-weight: 400; line-height: 22px; padding: 5px 0 3px; text-decoration: none; white-space: nowrap; width: fit-content; }
/* Hover and pressed turn a link green; a heading only with an address (the canvas keeps href="" for the trait). */
.ci-hnav-sub:hover, .ci-hnav-sub:active, a.ci-hnav-group-title[href]:not([href='']):hover, a.ci-hnav-group-title[href]:not([href='']):active { color: #0c866a; }
.ci-hnav-sub:focus-visible, .ci-hnav-group-title:focus-visible { outline: 2px solid #5749dd; outline-offset: 1px; }
/* The lead link is green; a 1px #EDEDED rule follows it across the column (4px either
   side, the flex gap) when links follow it, and they order behind the rule. */
.ci-hnav-sub[data-nav-lead] { color: #0c866a; }
.ci-hnav-sub[data-nav-lead] ~ .ci-hnav-sub { order: 2; }
.ci-hnav-group:has(> .ci-hnav-sub[data-nav-lead] ~ .ci-hnav-sub)::after { align-self: stretch; border-top: 1px solid #ededed; content: ''; flex: none; order: 1; }

/* ---- Mobile: layout/header-mobile, the menu/mobile-* drawer and nav/tabbar-mobile ---- */
/* GEOMETRY — the bar's height is ONE number, --ci-mobbar-h (declared in the
   mobile media query below): the bar's own height, the drawer's bottom and
   the body padding under the bar. */
/* Only html: a hidden body becomes the sticky header's scroller and carries the
   header and its drawer off a scrolled page (PR #497 R1.1, as 0409's R1.3). */
html.ci-mobmenu-lock { overflow: hidden; overscroll-behavior: none; }
.ci-mobbar {
  align-items: stretch;
  background: #000;
  bottom: 0;
  display: none;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  left: 0;
  padding: 0 8px;
  position: fixed;
  right: 0;
  z-index: 60;
}
/* The 1px #545658 divider is drawn over the tabs, as Figma draws it at y 0. */
.ci-mobbar::after { background: #545658; content: ''; height: 1px; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }
.ci-mobbar-item {
  align-items: center;
  background: transparent;
  border: 0;
  color: #c0c4c4;
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  font: inherit;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  padding: 8px 0;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
/* The glyph takes the tab's colour, so Hover and Pressed turn it white (DREAM-704); Active keeps it green. */
.ci-mobbar-ic { display: block; flex: none; height: 24px; width: 24px; }
.ci-mobbar-item span { font-size: 9px; font-weight: 400; letter-spacing: -0.09px; line-height: 12.28px; }
/* Hover only where a pointer hovers: a tapped tab keeps no hover look. */
@media (hover: hover) {
  .ci-mobbar-item:hover { color: #fff; }
}
.ci-mobbar-item:active { background: #202224; color: #fff; }
/* Active only while the drawer is shut: open, the bar draws nav/tabbar-mobile Active=None (v5, DREAM-818); aria-current stays. */
.ci-mobbar:not(.ci-mobmenu.is-open ~ .ci-mobbar) .ci-mobbar-item[aria-current="page"] { color: #fff; }
.ci-mobbar:not(.ci-mobmenu.is-open ~ .ci-mobbar) .ci-mobbar-item[aria-current="page"] .ci-mobbar-ic { color: #0c866a; }
/* Active: a 3px bar UNDER the divider (Figma's indicator sits at y 1). */
.ci-mobbar:not(.ci-mobmenu.is-open ~ .ci-mobbar) .ci-mobbar-item[aria-current="page"]::after { border-top: 3px solid #0c866a; content: ''; left: 0; position: absolute; right: 0; top: 1px; z-index: 2; }
.ci-mobbar-item:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 1px; }
/* The burger: a 32px white glyph in a 44px target; no hover or pressed look (v3 draws none). */
.ci-header-burger {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  display: none;
  flex: none;
  height: 44px;
  justify-content: center;
  margin-right: -6px;
  padding: 0;
  width: 44px;
}
.ci-header-burger:focus-visible { outline: 2px solid #5749dd; outline-offset: -1px; }
.ci-header-burger-ic { display: block; height: 32px; width: 32px; }
/* Open, the same 32px box draws icon/ui close (DREAM-731); the menu glyph hides only after one, so an
   older version's markup (no close glyph) served this shared sheet keeps its burger (PR #550 R1.1). */
.ci-header-burger-x { display: none; height: 32px; width: 32px; }
.ci-header-burger[aria-expanded="true"] .ci-header-burger-x { display: block; }
.ci-header-burger[aria-expanded="true"] .ci-header-burger-x + .ci-header-burger-ic { display: none; }
/* The light drawer opens under the header: menu/mobile-title, then full-width rows. */
.ci-mobmenu {
  background: #fff;
  color: #202224;
  display: none;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  height: calc(100vh - var(--ci-header-h, 62px) - var(--ci-mobbar-h, 0px));
  height: calc(100dvh - var(--ci-header-h, 62px) - var(--ci-mobbar-h, 0px));
  left: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  right: 0;
  top: calc(100% + 1px);
  z-index: 59;
}
.ci-mobmenu.is-open { display: block; }
/* menu/mobile-title: a 40px row, the 12/24 caps (label/sm-bold, trimmed) 16px down. */
.ci-mobmenu-title { color: #545658; font-size: 12px; font-weight: 700; height: 40px; line-height: 24px; overflow: hidden; padding: 8px 20px 0; text-overflow: ellipsis; white-space: nowrap; }
.ci-mobmenu-list { display: flex; flex-direction: column; }
/* Rows WITH sub-links come first (unit 0298's order); a plain item is a section row ending in chevron-right. */
.ci-mobmenu-item { display: flex; flex-direction: column; order: 0; }
/* menu/mobile-section: 49px with its 1px #EDEDED rule, which Figma lays out inside the
   row: label caps and chevron centre in the 20px left between the paddings. */
.ci-mobmenu-group {
  background: #fff; color: #202224; font-size: 16px; font-weight: 700; height: 49px; line-height: 22px; position: relative;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #ededed;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  gap: 12px;
  padding: 14px 20px;
  text-align: left;
  width: 100%;
}
/* A plain item is the same row: a block (its own words ellipsize), the 22px line on the flex
   row's y (13px down), after the groups (0298's order), ending in chevron-right ("go", DREAM-732). */
.ci-mobmenu-quick {
  background: #fff; color: #202224; font-size: 16px; font-weight: 700; height: 49px; line-height: 22px; position: relative;
  border-bottom: 1px solid #ededed;
  display: block;
  order: 1;
  overflow: hidden;
  padding: 13px 20px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Only a row that goes somewhere says "go"; its words stop before the chevron at a rank an older
   version's own .ci-mobmenu-quick padding cannot beat (PR #550 R1.1, R1.5). */
.ci-mobmenu-quick[href]:not([href=""]) { padding-right: 52px; }
/* A CSS image: the render writes the row's words over its children (render/KNOWLEDGE.md, "The nav leaf"). */
.ci-mobmenu-quick[href]:not([href=""])::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.22781%201.22781C4.53155%200.924064%205.0239%200.924064%205.32764%201.22781L11.5499%207.45008C11.8537%207.75383%2011.8537%208.24617%2011.5499%208.54992L5.32764%2014.7722C5.0239%2015.0759%204.53155%2015.0759%204.22781%2014.7722C3.92406%2014.4684%203.92406%2013.9761%204.22781%2013.6724L9.90016%208L4.22781%202.32764C3.92406%202.0239%203.92406%201.53155%204.22781%201.22781Z%22%20fill%3D%22%23545658%22%2F%3E%3C%2Fsvg%3E") center / 20px 20px no-repeat; content: ''; height: 20px; position: absolute; right: 20px; top: 14px; width: 20px; }
/* Forced colours and print drop background images: the chevron falls back to text (the breadcrumb's). */
@media print, (forced-colors: active) { .ci-mobmenu-quick[href]:not([href=""])::before { background: none; color: #545658; content: '\203A'; font-size: 20px; font-weight: 400; line-height: 20px; text-align: center; } }
.ci-mobmenu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-mobmenu-chev { color: #545658; display: block; flex: none; height: 20px; width: 20px; }
.ci-mobmenu-group:active, .ci-mobmenu-quick:active { background: #ededed; }
/* Open: #EDEDED, a 3px green accent the row's full 49px, its rule included (a border,
   so forced colours keep it; DREAM-730), the chevron up. */
.ci-mobmenu-item.is-open > .ci-mobmenu-group { background: #ededed; }
.ci-mobmenu-item.is-open > .ci-mobmenu-group::before { border-left: 3px solid #0c866a; bottom: -1px; content: ''; left: 0; position: absolute; top: 0; }
.ci-mobmenu-item.is-open .ci-mobmenu-chev { transform: rotate(180deg); }
/* Focus: a 2px ring inside the row, 4px in at the sides and 3px at top and bottom; a
   section row's reaches over its 1px rule, as Figma's 43px ring does. */
.ci-mobmenu-group:focus-visible, .ci-mobmenu-quick:focus-visible, .ci-mobmenu-sec-title:focus-visible, .ci-mobmenu-link:focus-visible { outline: none; }
.ci-mobmenu-group:focus-visible::after, .ci-mobmenu-quick:focus-visible::after { border: 2px solid #5749dd; border-radius: 8px; bottom: 2px; content: ''; left: 4px; pointer-events: none; position: absolute; right: 4px; top: 3px; }
.ci-mobmenu-sec-title:focus-visible::after, .ci-mobmenu-link:focus-visible::after { border: 2px solid #5749dd; border-radius: 8px; bottom: 3px; content: ''; left: 4px; pointer-events: none; position: absolute; right: 4px; top: 3px; }
.ci-mobmenu-sub { display: none; flex-direction: column; }
.ci-mobmenu-item.is-open > .ci-mobmenu-sub { display: flex; }
.ci-mobmenu-sec { display: flex; flex-direction: column; }
/* menu/mobile-heading: a 40px row, the 14/22 line 16px down, 32px in. A heading
   with an address is a link, drawn the same (v3 draws it static). */
.ci-mobmenu-sec-title { color: #202224; display: block; font-size: 14px; font-weight: 700; height: 40px; line-height: 22px; overflow: hidden; padding: 17px 20px 0 32px; position: relative; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
/* menu/mobile-link: a 44px row, 16/24, 32px in; pressed fills #EDEDED and turns the label green. */
/* A section of ONE group draws its heading as its first menu/mobile-link (v5, DREAM-818); two or more keep headings. */
.ci-mobmenu-link, .ci-mobmenu-sub > .ci-mobmenu-sec:only-child > .ci-mobmenu-sec-title { color: #545658; display: block; font-size: 16px; font-weight: 400; height: 44px; line-height: 24px; overflow: hidden; padding: 10px 20px 10px 32px; position: relative; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.ci-mobmenu-link:active, .ci-mobmenu-sub > .ci-mobmenu-sec:only-child > a.ci-mobmenu-sec-title[href]:not([href=""]):active { background: #ededed; color: #0c866a; }
@media (max-width: 1199.98px) {
  :root { --ci-mobbar-h: 56px; }
  /* layout/header-mobile: 62px with its 1px rule, logo 16px in, the burger's glyph 8px from the right. */
  .ci-header { padding: 0 8px 0 16px; }
  .ci-header-inner { border: 0; border-radius: 0; gap: 0; height: 61px; justify-content: space-between; max-width: none; padding: 1px 0 0; }
  .ci-header-nav { display: none; }
  .ci-header-burger { display: flex; }
  .ci-mobbar { display: flex; height: var(--ci-mobbar-h); }
  /* Scoped with :has so this component's CSS cannot pad a page (or an editor
     canvas) that carries no mobile bar — it used to style body globally. */
  body:has(.ci-mobbar) { padding-bottom: calc(var(--ci-mobbar-h) + 2px); }
}
/* From 768px wide (a tablet, or a phone held sideways): an open section of two or more groups lays them in two
   columns, tops aligned (384 + 384 at 768); one group, below 768px or without :has() keeps the one column. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ci-mobmenu-item.is-open > .ci-mobmenu-sub:has(> .ci-mobmenu-sec + .ci-mobmenu-sec) { align-items: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .ci-mobmenu { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .ci-hnav { padding-left: 6px; padding-right: 6px; }
  .ci-hnav-item > .ci-hnav { padding-right: 0; }
  .ci-hnav-toggle { padding-right: 6px; }
  .ci-hnav-item > .ci-hnav-disclosure { padding-right: 6px; }
  .ci-header-nav > :last-child { margin-right: -6px; }
}
/* ---- Pinned header (DREAM-553) ---- */
html:not([data-editor-canvas]) .ci-header,
html[data-editor-preview] .ci-header { position: sticky; top: 0; z-index: 58; }
html:not([data-editor-canvas]):has(.ci-header),
html[data-editor-preview]:has(.ci-header) { --ci-header-h: 76px; scroll-padding-top: calc(var(--ci-header-h) + 12px); }
html:not([data-editor-canvas]) .ci-hnav-menu > .ci-hnav-group,
html[data-editor-preview] .ci-hnav-menu > .ci-hnav-group { max-height: calc(100vh - var(--ci-header-h) - 32px); overflow-y: auto; }
html:not([data-editor-canvas]):has(.ci-header),
html[data-editor-preview]:has(.ci-header) { --ci-header-h: 80px; scroll-padding-top: calc(var(--ci-header-h) + 12px); }
html:not([data-editor-canvas]) .ci-hnav-menu > .ci-hnav-group,
html[data-editor-preview] .ci-hnav-menu > .ci-hnav-group { max-height: calc(100vh - var(--ci-header-h) - 58px); overflow-y: auto; }
@media (max-width: 1199.98px) {
  html:not([data-editor-canvas]):has(.ci-header),
  html[data-editor-preview]:has(.ci-header) { --ci-header-h: 62px; }
}
.ci-crumbs-bar * { box-sizing: border-box; }
.ci-crumbs-bar { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; align-items: center; column-gap: 16px; display: flex; margin: 0 auto; max-width: var(--ci-content-width, calc(1200px + 40px)); padding: 20px 20px 0; width: 100%; }
@media (max-width: 1199.98px) { .ci-crumbs-bar { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-crumbs-bar { padding-left: 20px; padding-right: 20px; } }
/* One row at every width (DREAM-802): past every crumb's floor the row is cut here.
   The pads keep Home's ring (3px out + 2px line) and a short label's 44px target. */
.ci-crumbs { margin: 0 -5px 0 -14px; min-width: 0; overflow-x: clip; padding: 0 5px 0 14px; }
/* Its own stacking context: a hit area (z -1) lies under every crumb box. */
.ci-crumbs-list { align-items: center; display: flex; isolation: isolate; list-style: none; margin: 0; padding: 0; }
.ci-crumb-item { align-items: flex-start; display: flex; }
.ci-crumb { color: #545658; font-size: 14px; font-weight: 700; line-height: 22px; position: relative; text-decoration-line: none; text-decoration-skip-ink: none; text-decoration-thickness: 1px; text-underline-offset: 0; white-space: nowrap; }
/* The current page takes the whole shortfall first, down to its floor ("› C…"): its
   factor dwarfs the others' 1 (factors summing under 1 leave space unspent). Clipped
   sideways only: a minimum font size must not cut its glyphs top and bottom. */
.ci-crumb-item:last-child:not(:first-child) { flex-shrink: 1000000; min-width: 56px; }
.ci-crumb-current { color: #202224; min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
@supports not (overflow: clip) { .ci-crumb-current { overflow: hidden; } }
/* Then the section links, where a clip margin keeps their ring and 44px target
   whole; without one they keep their width and the nav's edge cuts the row. */
@supports (overflow-clip-margin: 14px) {
  .ci-crumb-item:not(:first-child):not(:last-child) { min-width: 56px; }
  a.ci-crumb-section { min-width: 0; overflow: clip; overflow-clip-margin: 14px; text-overflow: ellipsis; }
}
/* The separator hangs off the ITEM, not the link: a crumb dropped with its
   <li> takes its own separator with it. */
.ci-crumb-item:not(:first-child)::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.22781%201.22781C4.53155%200.924064%205.0239%200.924064%205.32764%201.22781L11.5499%207.45008C11.8537%207.75383%2011.8537%208.24617%2011.5499%208.54992L5.32764%2014.7722C5.0239%2015.0759%204.53155%2015.0759%204.22781%2014.7722C3.92406%2014.4684%203.92406%2013.9761%204.22781%2013.6724L9.90016%208L4.22781%202.32764C3.92406%202.0239%203.92406%201.53155%204.22781%201.22781Z%22%20fill%3D%22%23545658%22%2F%3E%3C%2Fsvg%3E") center / 12px 12px no-repeat; content: ''; flex: none; height: 12px; margin: 4px 8px 0; width: 12px; }
/* Forced colours and print drop background images: the separator falls back to text. */
@media print, (forced-colors: active) { .ci-crumb-item:not(:first-child)::before { background: none; color: #545658; content: '\203A'; height: auto; line-height: 22px; margin: 0 8px; width: auto; } }
/* The 44px touch target, centred on the label, published only: on the canvas
   it would take the clicks that edit the label and select the block below. */
html:not([data-editor-canvas]) a.ci-crumb::after { content: ''; height: 44px; left: 50%; min-width: 44px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: -1; }
a.ci-crumb:focus-visible { outline: none; }
a.ci-crumb:focus-visible::before { border-radius: 8px; content: ''; inset: 2px -3px 4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
/* Figma's 1px bottom border under the cap box: an underline on the baseline. */
@media (hover: hover) { a.ci-crumb:hover { color: #0c866a; text-decoration-line: underline; } }
a.ci-crumb:active { color: #1b5547; text-decoration-line: underline; }
/* The date closes the trail's line at the block's right edge (nowrap: it never
   shrinks); below 768px it stands on two lines, "Bijgewerkt" over the day (DREAM-802). */
.ci-crumb-dates { display: flex; margin: 0 0 0 auto; }
.ci-crumb-dates:empty { display: none; }
/* v5 «Update info» (DREAM-819): label/sm-bold-trim on desktop, label/sm-trim below it; trimmed to its caps,
   so one line never sets the row's height and the phone's two lines are 28px tall (a 48px bar). */
.ci-crumb-date { color: #545658; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
@media (max-width: 1199.98px) { .ci-crumb-date { font-weight: 400; line-height: 20px; margin: -6px 0 -6px; } }
@media screen and (max-width: 767.98px) {
  .ci-crumb-date { align-items: flex-end; display: flex; flex-direction: column; text-align: right; }
  .ci-crumb-date-colon { display: none; }
}
/* On paper nothing is cut: the trail wraps, the date keeps its one line. */
@media print {
  .ci-crumbs { overflow-x: visible; }
  .ci-crumbs-list { flex-wrap: wrap; }
  .ci-crumb, .ci-crumb-current, a.ci-crumb-section { overflow: visible; overflow-wrap: anywhere; white-space: normal; }
}
.ci-page-heading * { box-sizing: border-box; }
.ci-page-heading { box-sizing: border-box; align-items: center; color: #202224; display: flex; gap: 16px; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px 0; }
@media (max-width: 1199.98px) { .ci-page-heading { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-page-heading { padding-left: 20px; padding-right: 20px; } }
.ci-page-heading::before { align-self: stretch; background: #0c866a; content: ''; display: inline-block; flex: none; min-height: 45px; width: 6px; }
/* The bar's switch: RenderService resolves data-heading-bar from the level and
   the block's headingBars override, and the CSS only obeys the value it is
   handed. See the page-block KNOWLEDGE, "The accent bar follows the level". */
/* content:none stops the pseudo-element being generated at all, so it leaves the
   flex row entirely — zeroing the row gap too would also close the space before
   the "all" link, which is a sibling, not the bar. */
.ci-page-heading[data-heading-bar="off"]::before { content: none; }
.ci-page-heading-title { font-size: 28px; letter-spacing: -.035em; margin: 0; }
/* The NL link/see-all (seeds README, 0414): label 8px from the inline arrow, ring 3px out
   at r8; the 44px hit area takes the 20px above the link (never below a short row) and
   lies under both, so a canvas click still selects the label. */
.ci-page-heading-link { align-items: center; border-radius: 5px; color: #545658; display: inline-flex; font-size: 14px; font-weight: 700; gap: 8px; line-height: 22px; margin-left: auto; position: relative; text-decoration: none; white-space: nowrap; }
.ci-page-heading-link::before { content: ''; inset: -20px min(0px, 50% - 22px) 0; position: absolute; }
.ci-page-heading-link-label { margin: -5px 0 -7px; position: relative; }
.ci-page-heading-link-arrow { color: #0c866a; display: block; flex: none; height: 24px; position: relative; width: 24px; }
@media (hover: hover) { .ci-page-heading-link:hover { color: #202224; } }
.ci-page-heading-link:active { color: #545658; }
.ci-page-heading-link:active .ci-page-heading-link-arrow { color: #1b5547; }
.ci-page-heading-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
/* The designer's type scale (2026-08): the size follows the LEVEL, so a
   heading demoted through the editor's level picker — or every heading of an
   imported document — reads as the sub-heading it now is. */
h1.ci-page-heading-title { font-size: 32px; line-height: 36px; }
h3.ci-page-heading-title { font-size: 24px; }
h4.ci-page-heading-title { font-size: 20px; }
h5.ci-page-heading-title, h6.ci-page-heading-title { font-size: 18px; }
/* v5 (DREAM-819): an h1 or h2 stands 8px clear of the bar's ends, so the bar is the title + 16; the
   h1 is heading/h1-trim (its caps), the h2 heading/h2 (28/32). The other levels keep their bars. */
h1.ci-page-heading-title, h2.ci-page-heading-title { padding: 8px 0; }
/* Its own selector: the canvas keeps one rule per selector, and the scale above writes the h1's size. */
.ci-page-heading > h1.ci-page-heading-title { margin: -5px 0 -8px; }
h2.ci-page-heading-title { line-height: 32px; }
/* The bar tracks the type scale wherever it IS shown (a deep level can pin it
   back on), so it never overshoots a line it stands beside. */
.ci-page-heading:has(h1.ci-page-heading-title)::before { min-height: 0; }
/* An h1 keeps 20px from the block below (DREAM-437): itself only above the rows that open
   at 0 (check-page-heading-zero-top-rows.js); :where() lets a Style Manager rule win; one
   selector per row, as GrapesJS splits a list inside :has() (seeds README, 0414). */
.ci-page-heading:where(:has(h1.ci-page-heading-title):has(+ .ci-hero)),
.ci-page-heading:where(:has(h1.ci-page-heading-title):has(+ .ci-nhero)),
.ci-page-heading:where(:has(h1.ci-page-heading-title):has(+ .ci-atext)),
.ci-page-heading:where(:has(h1.ci-page-heading-title):has(+ .ci-vmeta)),
.ci-page-heading:where(:has(h1.ci-page-heading-title):has(+ .ci-cf)) { padding-bottom: 20px; }
/* h2-h6 keep 32px to the content below (DREAM-748): 12 here over the next block's own 20, all 32 above
   the same zero-top rows (check-page-heading-zero-top-rows.js holds both lists). */
.ci-page-heading:where(:not(:has(h1.ci-page-heading-title))) { padding-bottom: 12px; }
.ci-page-heading:where(:not(:has(h1.ci-page-heading-title)):has(+ .ci-hero)),
.ci-page-heading:where(:not(:has(h1.ci-page-heading-title)):has(+ .ci-nhero)),
.ci-page-heading:where(:not(:has(h1.ci-page-heading-title)):has(+ .ci-atext)),
.ci-page-heading:where(:not(:has(h1.ci-page-heading-title)):has(+ .ci-vmeta)),
.ci-page-heading:where(:not(:has(h1.ci-page-heading-title)):has(+ .ci-cf)) { padding-bottom: 32px; }
@media (min-width: 1281px) { .ci-page-aside > .ci-page-heading:where(:not(:has(h1.ci-page-heading-title))) { padding-bottom: 12px; } }
.ci-page-heading:has(h3.ci-page-heading-title)::before { min-height: 36px; }
.ci-page-heading:has(h4.ci-page-heading-title)::before { min-height: 30px; }
.ci-page-heading:has(h5.ci-page-heading-title)::before,
.ci-page-heading:has(h6.ci-page-heading-title)::before { min-height: 26px; }
/* The phone step leaves h1 and h2 alone: the canvas draws a 560 query after a 1199.98 one, whatever the source order. */
@media (max-width: 560px) { h3.ci-page-heading-title { font-size: 21px; } h4.ci-page-heading-title { font-size: 19px; } h5.ci-page-heading-title, h6.ci-page-heading-title { font-size: 17px; } }
/* Below the desktop the v5 frames draw h2 24/32 and h1 30/36 (DREAM-819). */
@media (max-width: 1199.98px) {
  h2.ci-page-heading-title { font-size: 24px; line-height: 32px; }
  h1.ci-page-heading-title { font-size: 30px; line-height: 36px; }
  .ci-page-heading > h1.ci-page-heading-title { margin: -6px 0 -9px; }
}
/* Phones: «Alle …» on its own row 8px under the bar and title (v5 home-mobile), its 44px target 16 above (clear of the
   title's words) and 4 below (inside the heading's own padding). The
   wrap rides [data-heading-bar], a selector of its own: the gutter rule above holds the bare one in this query. */
@media (max-width: 560px) {
  .ci-page-heading[data-heading-bar] { flex-wrap: wrap; row-gap: 8px; }
  .ci-page-heading[data-heading-bar] > .ci-page-heading-title { flex: 1 1 calc(100% - 22px); min-width: 0; }
  .ci-page-heading[data-heading-bar="off"] > .ci-page-heading-title { flex-basis: 100%; }
  .ci-page-heading-link { margin-left: 0; }
  .ci-page-heading-link::before { inset: -16px min(0px, 50% - 22px) -4px; }
}
.ci-footer * { box-sizing: border-box; }
.ci-footer { box-sizing: border-box;
  background: #000;
  color: #fff;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Published body is a flex column (document-builder BASE_RESET): pushes the
     footer to the viewport bottom on short pages; a no-op in block layout. */
  margin-top: auto;
  width: 100%;
}
.ci-footer-inner { display: flex; flex-direction: column; gap: 40px; margin: 0 auto; max-width: 1200px; padding: 28px 0; width: calc(100% - 48px); }
/* One track per column plus Informatie; the columns nav is a subgrid over all but the last (it keeps its box for the editor's grips). */
.ci-footer-links { display: grid; gap: 40px 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ci-footer-columns { display: grid; grid-column: 1 / -2; grid-template-columns: subgrid; row-gap: 40px; }
.ci-footer-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* No subgrid (Safari < 16): the columns join the row as the nav's own items; the editor's Chromium keeps the box. */
@supports not (grid-template-columns: subgrid) {
  .ci-footer-columns { display: contents; }
}
.ci-footer-col-title { display: block; font-size: 18px; font-weight: 700; line-height: 24px; margin: -5px 0 -6px; }
.ci-footer-col ul { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }
/* An emptied info row adds no gap above "Verantwoord gokken" on the site; the canvas keeps it for its quick-add. */
html:not([data-editor-canvas]) .ci-footer-info-links:not(:has(li)) { display: none; }
.ci-footer-col li, .ci-footer-disclaimer { font-size: 14px; line-height: 20px; margin: -4px 0 -6px; }
/* link/footer: 30px hit area, focus ring 3px round the caps (2px, inside). */
.ci-footer-col a { color: #fff; display: inline-block; max-width: 100%; position: relative; text-decoration: none; vertical-align: top; }
.ci-footer-col a::before { content: ''; inset: -6px 0 -4px; position: absolute; }
.ci-footer-col a:focus-visible { outline: none; }
.ci-footer-col a:focus-visible::after { border: 2px solid #5749dd; border-radius: 4px; content: ''; inset: 1px -3px 3px; pointer-events: none; position: absolute; }
/* v5 link/footer: Hover draws nothing (DREAM-812). */
/* Pressed after hover: a held pointer is hovering too. v5 (0475): pressed drops the hover's underline. */
.ci-footer-col a:active { opacity: .8; text-decoration: none; }
.ci-footer-brand { align-items: flex-start; display: flex; }
/* 30/12: the eight seeded badges (706px of art) fit the 928px beside the logo in one row at the 1200 column. */
.ci-footer-badges { align-items: flex-start; display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 12px 30px; min-width: 0; }
.ci-fbadge { display: flex; }
.ci-fbadge-link { display: flex; }
.ci-fbadge picture { display: flex; }
/* Each badge at its own size (the seeded art is the design's boxes), at most 37px high. */
.ci-footer-badge { display: block; height: auto; max-height: 37px; max-width: 100%; width: auto; }
.ci-footer-logo { display: block; flex: none; }
.ci-footer-logo:focus-visible { border-radius: 4px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-footer-logo-img { display: block; height: 44px; width: 272px; }
/* Desktop: as many equal tracks as columns plus Informatie; six or more columns run three to a row. */
@media (min-width: 901px) {
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(1):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(2):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(4):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ci-footer-inner { gap: 32px; padding: 20px 0; }
  .ci-footer-links { gap: 32px 24px; }
  .ci-footer-columns { grid-column: 1 / -1; row-gap: 32px; }
  .ci-footer-brand { flex-direction: column; gap: 20px; }
  .ci-footer-badges { flex: none; gap: 20px 32px; }
}
/* layout/footer-tablet: two equal tracks (348px at 768). After an odd count Informatie takes the free
   cell beside the last column, the nav sharing its rows (subgrid); else a row of its own. */
@media (min-width: 768px) and (max-width: 900px) {
  .ci-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Both placed from row 1: auto-placement would step the nav clear of Informatie's cell. */
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(1):last-child) > .ci-footer-columns { grid-row: 1 / span 1; grid-template-rows: subgrid; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(1):last-child) > .ci-footer-info { grid-column: 2; grid-row: 1; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(3):last-child) > .ci-footer-columns { grid-row: 1 / span 2; grid-template-rows: subgrid; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(3):last-child) > .ci-footer-info { grid-column: 2; grid-row: 2; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(5):last-child) > .ci-footer-columns { grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(5):last-child) > .ci-footer-info { grid-column: 2; grid-row: 3; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(7):last-child) > .ci-footer-columns { grid-row: 1 / span 4; grid-template-rows: subgrid; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(7):last-child) > .ci-footer-info { grid-column: 2; grid-row: 4; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(9):last-child) > .ci-footer-columns { grid-row: 1 / span 5; grid-template-rows: subgrid; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(9):last-child) > .ci-footer-info { grid-column: 2; grid-row: 5; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(11):last-child) > .ci-footer-columns { grid-row: 1 / span 6; grid-template-rows: subgrid; }
  .ci-footer-links:has(> .ci-footer-columns > :nth-child(11):last-child) > .ci-footer-info { grid-column: 2; grid-row: 6; }
}
/* layout/footer-mobile: the first two columns side by side, the rest full width. */
@media (max-width: 767px) {
  .ci-footer-inner { gap: 24px; width: calc(100% - 40px); }
  .ci-footer-links { column-gap: 16px; grid-template-columns: minmax(0, 1fr) fit-content(calc(50% + 8px)); }
  .ci-footer-columns > .ci-footer-col:nth-child(2) { grid-column: 2; }
  .ci-footer-columns > .ci-footer-col:nth-child(n+3), .ci-footer-info { grid-column: 1 / -1; }
  /* layout/footer-mobile's rows (DREAM-746): 1-4 spread across the column, 5-6 12px apart, then 20px apart; the two
     zero-height breaks end rows 1 and 2, so the list may hold any count. */
  .ci-footer-badges { align-self: stretch; column-gap: 12px; row-gap: 0; }
  .ci-footer-badges::before { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .ci-footer-badges::after { content: ''; flex-basis: 100%; height: 0; order: 3; }
  .ci-fbadge:nth-child(n+2):nth-child(-n+4) { margin-left: auto; }
  .ci-fbadge:nth-child(n+5) { margin-top: 20px; order: 2; }
  .ci-fbadge:nth-child(n+7) { margin-right: 8px; order: 4; }
}