.ci-intro * { box-sizing: border-box; }
.ci-intro { box-sizing: border-box;
  background: #000;
  color: #fff;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: clip;
  width: 100%;
}
/* The frame's 618 | 42 | 540 at 1200, by share as the column narrows. */
.ci-intro-inner {
  column-gap: 42px;
  display: grid;
  grid-template-columns: minmax(0, 618fr) minmax(0, 540fr);
  margin: 0 auto;
  max-width: calc(1200px + 56px);
  padding: 32px 28px;
}
@media (max-width: 1199.98px) { .ci-intro-inner { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-intro-inner { padding-left: 20px; padding-right: 20px; } }
.ci-intro-main { align-self: end; display: flex; flex-direction: column; gap: 32px; grid-column: 1; grid-row: 1; min-width: 0; }
.ci-intro-title {
  color: #0c866a;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 36px;
  margin: -5.96875px 0 -7.03125px;
}
.ci-intro-lead {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin: -5.984375px 0 -7.015625px;
}
/* A container, so a lead of paragraphs keeps them (DREAM-797, unit 0476); 12px between. */
.ci-intro-lead > * { margin: 0; }
.ci-intro-lead > * + * { margin-top: 12px; }
/* An imported heading in the lead reads as lead text, not at the browser's own size (PR #575 R1.12). */
.ci-intro-lead :is(h2, h3, h4) { font: inherit; }
/* Home Hero: green check-circle 20, words 8 apart, badges 16 apart, wrapped badge lines 8. */
.ci-intro-badges { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.ci-intro-badge { align-items: center; display: flex; font-size: 14px; gap: 8px; }
.ci-intro-check { color: #0c866a; display: block; flex: none; }
.ci-intro-aside { align-self: stretch; display: flex; flex-direction: column; grid-column: 2; grid-row: 1; justify-content: flex-end; min-width: 0; padding-left: 20px; position: relative; }
.ci-intro-aside::before { border-left: 1px solid #0c866a; bottom: 0; content: ''; left: -22px; pointer-events: none; position: absolute; top: 0; }
.ci-intro-figure { margin: 0; }
.ci-intro-quote { font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; margin: 0 0 20px; }
.ci-intro-author { display: flex; flex-direction: column; gap: 8px; }
/* The quote's author sits at the right: the 32px avatar, then name over role, 12 apart. */
.ci-intro-author-member { align-items: center; display: flex; gap: 12px; justify-content: flex-end; }
/* NL media/avatar Inline: 32px round, dropped while empty (unit 0442). */
.ci-intro-avatar {
  border-radius: 50%;
  display: block;
  flex: none;
  height: 32px;
  object-fit: cover;
  width: 32px;
}
.ci-intro-avatar[src=""], .ci-intro-avatar:not([src]) { display: none; }
.ci-intro-author-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ci-intro-author-name { display: block; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.984375px 0 -6.015625px; }
.ci-intro-author-role { color: #fff; display: block; font-size: 14px; font-weight: 400; line-height: 20px; margin: -4.734375px 0 -5.265625px; }
/* NL link/chip under the quote (DREAM-798): outline pills 12 apart, wrapped lines 8; the label is 14/20 cut to
   its cap box, so the pill centres the letters as the design does. No Disabled: a link has no such state. */
.ci-intro-menu { margin-top: 28px; }
.ci-intro-links { display: flex; flex-wrap: nowrap; gap: 12px; list-style: none; margin: -5px; overflow-x: auto; padding: 5px; scrollbar-width: none; }
.ci-intro-links::-webkit-scrollbar { display: none; }
.ci-intro-link { display: flex; flex: 0 0 auto; min-width: 0; }
.ci-intro-chip { align-items: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 18px; color: #fff; display: inline-flex; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 12px 0 16px; position: relative; text-decoration: none; }
.ci-intro-chip-label { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4.734375px 0 -5.265625px; min-width: 0; white-space: nowrap; }
.ci-intro-chip-icon { display: block; fill: currentColor; flex: none; height: 12px; width: 12px; }
/* The 44px hit area, 4px over and under the pill; off the canvas, where it would catch the editor's clicks. */
html:not([data-editor-canvas]) .ci-intro-chip::after { content: ''; inset: -5px -1px; position: absolute; }
@media (hover: hover) { .ci-intro-chip:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.85); } }
.ci-intro-chip:active { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.85); }
.ci-intro-chip:focus-visible { outline: 2px solid #0c866a; outline-offset: 1px; }
/* A published list the render left without a row draws no empty landmark or gap; the canvas keeps a row's
   height of it, so an emptied list can still be selected for its "+". */
html:not([data-editor-canvas]) .ci-intro-menu:not(:has(.ci-intro-link)) { display: none; }
html:not([data-editor-canvas]) .ci-intro-badges:not(:has(.ci-intro-badge)) { display: none; }
html[data-editor-canvas] .ci-intro-links:not(:has(.ci-intro-link)) { min-height: 36px; }
html[data-editor-canvas] .ci-intro-badges:not(:has(.ci-intro-badge)) { min-height: 20px; }
/* Tablet and phone: one column; lead to badges 40, then 20 to the rule, the quote, its author and the chips. */
@media (max-width: 1199.98px) {
  .ci-intro-main { align-self: auto; grid-column: 1 / -1; }
  .ci-intro-title { font-size: 30px; margin: -6.71875px 0 -8.28125px; }
  .ci-intro-lead { font-size: 14px; line-height: 18px; margin: -3.734375px 0 -4.265625px; }
  .ci-intro-badges { margin-top: 8px; }
  .ci-intro-aside { align-self: auto; border-top: 1px solid #0c866a; display: block; grid-column: 1 / -1; grid-row: 2; margin-top: 20px; padding: 20px 0 0; }
  .ci-intro-aside::before { display: none; }
  .ci-intro-quote { font-size: 14px; font-weight: 600; line-height: 22px; margin: -5.734375px 0 13.734375px; }
  .ci-intro-menu { margin-top: 20px; }
  .ci-intro-links { gap: 12px; }
}
@media (max-width: 560px) { .ci-intro-badges { flex-direction: column; gap: 16px; } }
.ci-news-section * { box-sizing: border-box; }
.ci-news-section { box-sizing: border-box; color: #202224; 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; }
@media (max-width: 1199.98px) { .ci-news-section { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-news-section { padding-left: 20px; padding-right: 20px; } }
.ci-news-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 720fr) minmax(0, 460fr); }
.ci-feature-card { isolation: isolate; min-height: 492px; padding-top: 31px; position: relative; }
.ci-feature-image { border-radius: 12px; display: block; height: 100%; left: 40px; object-fit: cover; position: absolute; top: 0; width: calc(100% - 40px); z-index: -1; }
/* The side rows' grey under the photo (0458). An empty one keeps its box but is not drawn or announced (its alt
   is the headline); the canvas placeholder stays clickable over the grey (COMPONENT_GENERATION.md). */
.ci-feature-card::before { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; content: ''; inset: 0 0 0 40px; position: absolute; z-index: -1; }
.ci-feature-image[src=""], .ci-feature-image:not([src]) { visibility: hidden; }
.ci-feature-image.gjs-plh-image { opacity: 0; }
.ci-feature-copy { background: #f3f3f3; border-radius: 8px; display: flex; flex-direction: column; gap: 16px; max-width: 100%; padding: 20px; width: 422px; }
.ci-feature-copy .ci-news-headline { display: block; font-size: 28px; font-weight: 700; line-height: 32px; margin: 0; }
/* link/news-title Lg (v4, 0459): only the title is the link, ringed itself (3px out, radius 8); pressed #0d9070. */
.ci-news-headline-link { color: #202224; display: block; text-decoration: none; }
.ci-news-headline-link:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
@media (hover: hover) { .ci-news-headline-link:hover { color: #0c866a; text-decoration: underline; } }
.ci-news-headline-link:active { color: #0d9070; text-decoration: underline; }
/* The whole excerpt, as v5 draws it: 16/24 on desktop, 14/24 below. */
.ci-news-excerpt { font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; }
/* The date | category line leads the panel (v5, its order in the helper's one rule); the markup keeps the title first. */
.ci-feature-copy .ci-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; order: -1; }
.ci-news-date { flex: none; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-news-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-news-sep { background: #202224; flex: none; height: 12px; width: 1px; }
.ci-news-sep:first-child, .ci-news-sep:last-child { display: none; }
.ci-feature-copy .ci-meta:has(> .ci-news-sep:only-child) { display: none; }
.ci-feature-copy .ci-author { align-items: center; display: flex; gap: 8px; }
.ci-feature-copy .ci-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-feature-copy .ci-avatar[src=""], .ci-feature-copy .ci-avatar:not([src]) { display: none; }
.ci-feature-copy .ci-author picture { display: contents; }
.ci-news-who { display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; min-height: 32px; min-width: 0; }
.ci-news-author { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-news-author-role { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-news-author:not(:has(.ci-news-author-first)):not(:has(.ci-news-author-last)) { display: none; }
.ci-feature-copy .ci-author:not(:has(.ci-news-author-first)):not(:has(.ci-news-author-last)):not(:has(.ci-news-author-role)) { display: none; }
.ci-side-list { align-content: start; display: grid; gap: 33px; }
@media (min-width: 1200px) {
  .ci-side-list:has(> .ci-nlatest-item:not([hidden]) ~ .ci-nlatest-item:not([hidden]) ~ .ci-nlatest-item:not([hidden])) { align-content: space-between; }
}
.ci-nlatest-item { color: #202224; container-type: inline-size; display: flex; gap: 20px; position: relative; }
.ci-nlatest-thumb { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; display: block; flex: none; height: 130px; overflow: hidden; position: relative; width: 215px; }
.ci-nlatest-thumb img, .ci-nlatest-thumb picture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.ci-nlatest-img { object-fit: cover; }
.ci-nlatest-img[src=""], .ci-nlatest-img:not([src]) { opacity: 0; }
.ci-nlatest-body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.ci-nlatest-headline { display: block; font-size: 18px; font-weight: 700; line-height: 24px; margin: -5px 0 -6px; }
.ci-nlatest-headline a { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: none; }
.ci-nlatest-link::after { content: ''; inset: 0; position: absolute; z-index: 1; }
.ci-nlatest-link:focus-visible { outline: none; }
.ci-nlatest-link:focus-visible::after { border-radius: 8px; inset: -3px; outline: 2px solid #5749dd; }
@media (hover: hover) { .ci-nlatest-headline a:hover { color: #0c866a; text-decoration: underline; } }
.ci-nlatest-headline a:active { color: #1b5547; text-decoration: underline; }
.ci-nlatest-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-nlatest-date { flex: none; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-nlatest-cat { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-nlatest-sep { background: #202224; flex: none; height: 12px; width: 1px; }
.ci-nlatest-sep:first-child, .ci-nlatest-sep:last-child { display: none; }
.ci-nlatest-meta:has(> .ci-nlatest-sep:only-child) { display: none; }
.ci-nlatest-author { align-items: center; display: flex; gap: 8px; min-height: 32px; }
.ci-nlatest-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-nlatest-avatar[src=""], .ci-nlatest-avatar:not([src]) { display: none; }
.ci-nlatest-author picture { display: contents; }
.ci-nlatest-aname { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-nlatest-author:not(:has(.ci-nlatest-aname-first)):not(:has(.ci-nlatest-aname-last:not(:empty))) { display: none; }
@container (max-width: 459px) { .ci-nlatest-thumb { height: 90px; width: 120px; } .ci-nlatest-headline a { display: block; -webkit-line-clamp: none; line-clamp: none; } }
.ci-side-list > .ci-nlatest-item:not([hidden]) ~ .ci-nlatest-item::before { border-top: 1px solid #d9d9d9; content: ''; inset: -17px 0 auto; pointer-events: none; position: absolute; }
@media (max-width: 1199.98px) {
  .ci-news-layout { gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .ci-side-list { align-content: start; }
  .ci-feature-card { background: #f3f3f3; border-radius: 8px; display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 20px; }
  .ci-feature-image { height: 183px; left: auto; position: relative; top: auto; width: 100%; }
  .ci-feature-card::before { height: 183px; inset: 20px 20px auto; }
  .ci-feature-copy { background: none; border-radius: 0; padding: 0; width: auto; }
  .ci-feature-copy .ci-news-headline { font-size: 24px; line-height: 30px; }
  .ci-news-excerpt { font-size: 14px; }
}
@media (max-width: 560px) { .ci-feature-card { border-radius: 12px; } }
.ci-news-carousel * { box-sizing: border-box; }
.ci-news-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-news-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-news-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-news-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-news-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-news-carousel-track::-webkit-scrollbar { display: none; }
.ci-news-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-news-carousel-track.is-dragging a { pointer-events: none; }
.ci-nslide { flex: 0 0 285px; list-style: none; min-width: 0; scroll-snap-align: start; }
.ci-ncard { border: 1px solid #d9d9d9; border-radius: 12px; color: #202224; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 11px; position: relative; }
.ci-ncard-thumb { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; display: block; flex: none; height: 230px; overflow: hidden; position: relative; width: 100%; }
.ci-ncard-thumb img, .ci-ncard-thumb picture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.ci-ncard-img { object-fit: cover; }
.ci-ncard-img[src=""], .ci-ncard-img:not([src]) { opacity: 0; }
/* v4 (0459): the 84px title box is the only link; the focus ring goes round the card (the Focus variant), 3-5px
   out of its 1px border, covering nothing. A card with no destination (link unwrapped, or href="") is Disabled. */
.ci-ncard-headline { display: block; font-size: 24px; font-weight: 700; height: 84px; line-height: 28px; margin: 0; overflow: hidden; }
.ci-ncard-headline a { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; height: 100%; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: none; }
.ci-ncard-link:focus-visible { outline: none; }
.ci-ncard-link:focus-visible::after { border-radius: 8px; content: ''; inset: -4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-ncard-headline a:hover { color: #0c866a; text-decoration: underline; } }
.ci-ncard-headline a:active { color: #1b5547; text-decoration: underline; }
.ci-ncard:not(:has(.ci-ncard-link[href]:not([href=""]))) { opacity: .4; }
.ci-ncard-headline:not(:has(.ci-ncard-link)) { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; }
.ci-ncard-excerpt { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 3; line-clamp: 3; line-height: 20px; margin: 0; overflow: hidden; }
.ci-ncard-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.ci-ncard-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-ncard-date, .ci-ncard-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-ncard-date { flex: none; }
.ci-ncard-category { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-ncard-sep { background: #202224; flex: none; height: 12px; width: 1px; }
/* Publish drops an empty leaf (removeWhenEmpty); what it leaves alone goes with it. */
.ci-ncard-sep:first-child, .ci-ncard-sep:last-child { display: none; }
.ci-ncard-meta:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)) { display: none; }
.ci-ncard-author { align-items: center; border-top: 1px solid #d9d9d9; display: flex; gap: 8px; padding-top: 12px; }
.ci-ncard-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-ncard-avatar[src=""], .ci-ncard-avatar:not([src]) { display: none; }
.ci-ncard-author picture { display: contents; }
.ci-ncard-who { display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; min-height: 32px; min-width: 0; }
.ci-ncard-aname { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ncard-arole { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* One class per :has() (COMPONENT_GENERATION.md): the canvas splits a list into bare rules. */
.ci-ncard-aname:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)) { display: none; }
.ci-ncard-author:not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
.ci-ncard-foot:not(:has(.ci-ncard-date)):not(:has(.ci-ncard-category)):not(:has(.ci-ncard-aname-first)):not(:has(.ci-ncard-aname-last)):not(:has(.ci-ncard-arole)) { display: none; }
/* A drag is no press: one class more than the card's :active rule (0389's tie). */
.ci-news-carousel-track.is-dragging .ci-ncard-headline a { color: #202224; text-decoration: none; }
.ci-news-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-news-carousel-next { right: 12px; }
.ci-news-carousel-prev { left: 12px; }
.ci-news-carousel-prev .ci-news-carousel-icon { transform: scaleX(-1); }
.ci-news-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-news-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-news-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-news-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-news-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-news-carousel-btn:focus-visible { outline: none; }
.ci-news-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-news-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-news-carousel-btn { display: none; }
}
/* v5 (DREAM-816): four 285 slides fill the desktop row; 328 / 306 below (NEWS_CARD_SLIDE), at most 88% so the next peeks. */
@media (max-width: 1199.98px) { .ci-nslide { flex-basis: min(328px, 88%); } }
@media (max-width: 560px) { .ci-nslide { flex-basis: min(306px, 88%); } }
.ci-overview * { box-sizing: border-box; }
.ci-overview {
  background: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #d9d9d9;
  box-sizing: border-box;
  color: #202224;
  container-type: inline-size;
  font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
  position: relative;
  width: 100%;
}

/* Mobile (< 560): logo + title, then the pros, the payment row and the offer, one item a row. */
.ci-overview-header { align-items: start; column-gap: 16px; display: grid; grid-template-columns: 72px minmax(0, 1fr); padding: 16px 16px 28px; row-gap: 12px; }
.ci-overview-header > .ci-overview-offer, .ci-overview-features > * { grid-column: 1 / -1; }
.ci-overview-features { display: contents; }
.ci-overview-logo-wrap { flex: none; height: 72px; position: relative; width: 72px; }
.ci-overview-logo { background: #202224; border-radius: 50%; height: 100%; overflow: hidden; position: relative; width: 100%; }
/* Where Figma places the logo in the disc (not centred: 10.5, 9.64 of 96; 7.88, 7.23 of 72). */
.ci-overview-logo-img { display: block; height: 60px; left: 7.88px; object-fit: contain; position: absolute; top: 7.23px; width: 60px; }
.ci-overview-logo-badge { bottom: -4.5px; display: block; height: 24px; position: absolute; right: -4.5px; width: 24px; }
.ci-overview-logo-badge-img { display: block; height: 100%; object-fit: contain; width: 100%; }
.ci-overview-logo-badge-img[src=''], .ci-overview-logo-badge-img:not([src]) { display: none; }
/* The crown marks a list's first two (shown) cards (v5), whatever the record says; a card alone is no list. */
.ci-overview:nth-of-type(n+3) .ci-overview-logo-badge, .ci-overview:only-of-type .ci-overview-logo-badge { display: none; }
.ci-overview:nth-child(-n+2 of .ci-overview:not([hidden])):not(:only-of-type) .ci-overview-logo-badge { display: block; }
.ci-overview-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ci-overview-brand-name { color: #0c866a; display: block; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.984375px 0 -6.015625px; }
.ci-overview-brand-link { color: inherit; text-decoration: none; }
.ci-overview-brand-link::after { border-radius: 12px; content: ''; inset: 0; position: absolute; z-index: 1; }
.ci-overview-brand-link:focus-visible { outline: none; }
/* Figma's ring: 3px outside the card, its inner edge at radius 8 (the 5 plus the offset). */
.ci-overview-brand-link:focus-visible::after { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-overview-brand-link:hover ~ .ci-overview-header .ci-overview-brand-name { text-decoration: underline; }
.ci-overview-brand-link:active ~ .ci-overview-header .ci-overview-brand-name { color: #0d9070; }
/* Three lines at most (v5), so a long offer never grows the card; left-aligned, so no gutter. */
.ci-overview-bonus-text { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; font-size: 20px; font-weight: 700; -webkit-line-clamp: 3; line-clamp: 3; line-height: 28px; overflow: hidden; overflow-wrap: break-word; margin: -6.484375px 0 -7.515625px; }
/* The mark and score (or the no-score caption), then the stars, centred (the user, 2026-10-07); a wrap keeps that order. */
.ci-overview-rating { align-items: center; display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; gap: 4px 8px; justify-content: flex-end; }
.ci-overview-stars { display: flex; flex: none; height: 15px; width: 75px; }
.ci-overview-star { color: #ffb310; display: block; flex: none; height: 16px; margin-top: -.5px; width: 16px; }
.ci-overview-star-line { fill: #d9d9d9; }
.ci-overview-star-fill { display: none; fill: #ffb310; }
.ci-overview-star.on .ci-overview-star-fill, .ci-overview-star.mid .ci-overview-star-fill, .ci-overview-star.low .ci-overview-star-fill { display: inline; }
.ci-overview-star.on .ci-overview-star-line, .ci-overview-star.mid .ci-overview-star-line, .ci-overview-star.low .ci-overview-star-line { display: none; }
.ci-overview-score { align-items: flex-end; color: #202224; display: flex; gap: 4px; }
/* The site mark is a padded 24px glyph: drawn at Figma's 14.45px glyph width. */
.ci-overview-score-mark-img { display: block; flex: none; height: 17.34px; margin: -3.545px -1.445px; object-fit: contain; width: 17.34px; }
.ci-overview-score-mark-img[src=''], .ci-overview-score-mark-img:not([src]) { display: none; }
.ci-overview-score-num { font-size: 14px; line-height: 20px; white-space: nowrap; margin: -4.734375px 0 -5.265625px; }
/* Value=0 or no score: the render drops the score line (removeWhenZero), the caption takes its place. */
.ci-overview-score-empty { color: #545658; display: none; font-size: 14px; line-height: 20px; min-width: 0; margin: -4.734375px 0 -5.265625px; }
.ci-overview-rating:not(:has(.ci-overview-score)) .ci-overview-score-empty { display: block; }
.ci-overview-points { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; min-width: 0; padding: 4px 0 0; }
.ci-overview-point { align-items: flex-start; color: #202224; display: flex; font-size: 16px; gap: 8px; line-height: 24px; }
/* check-circle 20 centred in its 24px row. */
.ci-overview-check { display: block; flex: none; height: 20px; margin-top: 2px; width: 20px; }
.ci-overview-check-img { display: block; height: 20px; object-fit: contain; width: 20px; }
/* A long pro ends in "…" on its one line at every width (v5), so the card never grows. */
.ci-overview-point-text { -webkit-box-orient: vertical; display: -webkit-box; flex: 1; -webkit-line-clamp: 1; line-clamp: 1; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
/* One row of fixed slots per layout, the last one "+N" when methods are hidden (paymentFoldScript reads the count). */
.ci-overview-payments { --ci-pay-slots: 5; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ci-overview-payments:not(:has(.ci-overview-payment:not(.ci-overview-payment-more))) { display: none; }
.ci-overview-payment { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; display: inline-flex; flex: none; height: 25px; justify-content: center; overflow: hidden; position: relative; width: 50px; }
.ci-overview-payment-img { display: block; max-height: 23px; max-width: 44px; object-fit: contain; pointer-events: none; }
.ci-overview-payment-img[src=''], .ci-overview-payment-img:not([src]) { display: none; }
/* The canvas placeholder stays the chip's upload target, invisible over the name and above the card's link. */
.ci-overview-payment-img.gjs-plh-image { height: 100%; inset: 0; max-height: none; max-width: none; opacity: 0; pointer-events: auto; position: absolute; width: 100%; z-index: 2; }
/* media/payment by name (v3): no logo (the canvas placeholder is none), the name in 700 12/24; a long one widens the chip. */
.ci-overview-payment-name { color: #202224; font-size: 12px; font-weight: 700; line-height: 24px; white-space: nowrap; margin: -7.484375px 0 -8.515625px; }
.ci-overview-payment:has(.ci-overview-payment-img[src]:not([src='']):not(.gjs-plh-image)) .ci-overview-payment-name { display: none; }
.ci-overview-payment:not(.ci-overview-payment-more):not(:has(.ci-overview-payment-img[src]:not([src='']):not(.gjs-plh-image))) { min-width: 50px; padding: 0 4px; width: auto; }
/* media/payment Name=More (v5): "+N" in 700 12/24 #545658 on #f3f3f3, above the card's link (0453). */
.ci-overview-payment-more { background: #f3f3f3; border: 0; color: #545658; cursor: pointer; font-family: inherit; margin: 0; padding: 0; position: relative; z-index: 2; }
.ci-overview-payment-more-count { font-size: 12px; font-weight: 700; line-height: 24px; white-space: nowrap; margin: -7.484375px 0 -8.515625px; }
.ci-overview-payments .ci-overview-payment-more { display: none; }
.ci-overview-payment-more:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-overview-payments[data-pay='folded'] .ci-overview-payment-more { display: inline-flex; }
.ci-overview-payments[data-pay='folded'] .ci-overview-payment-over { display: none; }
/* The unfolded row takes the focus of the «+N» it replaced; the ring only for a keyboard. */
.ci-overview-payments:focus-visible { border-radius: 4px; outline: 2px solid #5749dd; outline-offset: 3px; }
@media (forced-colors: active) {
  .ci-overview-payment-more { outline: 1px solid ButtonText; outline-offset: -1px; }
}
/* Paper has no «+N» to press: every method prints. */
@media print {
  .ci-overview-payments[data-pay] .ci-overview-payment-more { display: none; }
  .ci-overview-payments[data-pay] .ci-overview-payment-over { display: inline-flex; }
}
/* The offer: on the phone "Bezoek casino" grows beside the hugging Review; the code plate takes its own line. */
.ci-overview-offer { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.ci-overview-offer > .ci-overview-code { flex: 1 0 100%; }
/* The plate's own width picks the Size; its height is the label's (and the button's) margin box plus the border. */
.ci-overview-code { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; box-sizing: border-box; container-type: inline-size; cursor: pointer; display: flex; gap: 8px; min-width: 0; position: relative; z-index: 2; }
.ci-overview-code-label, .ci-overview-code-label-sm { color: #545658; flex: 0 1000 auto; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; margin: 14px 0 12px 16px; }
/* Size=Sm says "Code:" (v4) in its own word, shown by the Size's query; an empty one is dropped, leaving "Bonuscode:". */
.ci-overview-code-label-sm { display: none; }
.ci-overview-code-value { color: #202224; flex: 0 1 auto; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 24px; margin: -5px 0 -6px; margin-left: auto; }
/* button/copy: 12px, its padding the 44px hit area (8 toward the code); the ring, 3px out, is the plate's. */
.ci-overview-code-copy { background: none; border: 0; box-sizing: content-box; cursor: pointer; display: block; flex: none; height: 12px; width: 12px; margin: 1px 0 1px -8px; padding: 16px 16px 16px 8px; }
.ci-overview-code-copy:focus-visible { outline: none; }
.ci-overview-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-overview-code-copy-img { display: block; height: 13.09px; width: 12px; }
/* Hover and press skip a copied plate, so Copied needs no rules to win them back. */
@media (hover: hover) {
  .ci-overview-code:not([data-copied]):hover { background: #ededed; border-color: #545658; }
  .ci-overview-brand-link:hover ~ .ci-overview-header .ci-overview-code:not([data-copied]) { background: #effbf7; border-color: #c2ebdd; }
  .ci-overview-brand-link:hover ~ .ci-overview-header .ci-overview-code:not([data-copied]) .ci-overview-code-copy-img:not(.gjs-plh-image) { filter: brightness(0) saturate(100%) invert(37.7%) sepia(45.1%) saturate(761.2%) hue-rotate(115.9deg) brightness(99%) contrast(92.9%); }
}
.ci-overview-code:not([data-copied]):active { background: #ededed; border-color: #545658; }
.ci-overview-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-overview-code[data-copied] .ci-overview-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-overview-code[data-copied] .ci-overview-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 18px; line-height: 24px; }
.ci-overview-code[data-copied] .ci-overview-code-copy-img:not(.gjs-plh-image) { filter: brightness(0) saturate(100%) invert(33%) sepia(99.7%) saturate(376%) hue-rotate(115.9deg) brightness(98.3%) contrast(93.9%); }
@container (max-width: 230px) {
  .ci-overview-code-label, .ci-overview-code-label-sm { font-size: 12px; line-height: 20px; margin: 9px 0 9px 12px; }
  .ci-overview-code .ci-overview-code-label-sm { display: block; }
  .ci-overview-code-label-sm + .ci-overview-code-label { display: none; }
  .ci-overview-code-value { font-size: 16px; line-height: 22px; margin: -5px 0 -6px; margin-left: auto; }
  .ci-overview-code-copy { margin: -3px 0 -3px -8px; padding: 16px 12px 16px 8px; }
  .ci-overview-code[data-copied] .ci-overview-code-value[data-copied-label]:not([data-copied-label=''])::after { font-size: 16px; line-height: 22px; }
}
.ci-overview-visit { align-items: center; align-self: stretch; background: #0c866a; border-radius: 4px; color: #fff; display: inline-flex; font-size: 18px; font-weight: 700; gap: 4px; justify-content: center; line-height: 24px; min-height: 48px; padding: 12px 24px; position: relative; text-align: center; text-decoration: none; z-index: 2; }
@media (hover: hover) { .ci-overview-visit:hover { background: #0d9070; } }
.ci-overview-visit:active { background: #1b5547; }
.ci-overview-visit:focus-visible { box-shadow: 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-overview-visit-cta { min-width: 0; overflow-wrap: anywhere; margin: -5.234375px 0 -5.765625px; }
.ci-overview-visit-icon { display: block; flex: none; height: 12px; width: 12px; }
.ci-overview-offer .ci-overview-visit { flex: 1 1 0; min-width: 0; }
.ci-overview-review-link { align-items: center; border: 1px solid #5749dd; border-radius: 4px; box-sizing: border-box; color: #5749dd; display: flex; font-size: 18px; font-weight: 700; justify-content: center; line-height: 24px; min-height: 48px; padding: 11px 23px; position: relative; text-align: center; text-decoration: none; z-index: 2; }
.ci-overview-review-link-label { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) { .ci-overview-review-link:hover { background: #f3f2ff; } }
.ci-overview-review-link:active { background: none; border-color: #3d31b8; color: #3d31b8; }
.ci-overview-review-link:focus-visible { outline: none; }
.ci-overview-review-link:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
/* Tablet (560-799): logo | title | the 220 offer, then the payment row (its 5 slots at least) beside the pros. */
@container (min-width: 560px) {
  .ci-overview-header { column-gap: 32px; grid-template-columns: 96px minmax(0, 1fr) 220px; padding: 20px; row-gap: 16px; }
  .ci-overview-header > .ci-overview-offer { grid-column: 3; grid-row: 1; }
  .ci-overview-features { display: flex; gap: 24px; grid-column: 1 / -1; }
  .ci-overview-features > * { flex: 1 1 0; }
  .ci-overview-features > .ci-overview-payments { min-width: 282px; order: -1; }
  .ci-overview-logo-wrap { height: 96px; width: 96px; }
  .ci-overview-logo-img { height: 80px; left: 10.5px; top: 9.64px; width: 80px; }
  .ci-overview-logo-badge { bottom: -6px; height: 32px; right: -6px; width: 32px; }
  .ci-overview-title { gap: 16px; }
  .ci-overview-points { padding: 0; }
  .ci-overview-offer { flex-direction: column; flex-wrap: nowrap; }
  .ci-overview-offer > .ci-overview-code { flex: none; }
  .ci-overview-offer .ci-overview-visit { flex: none; }
}
/* Medium (800-1099, the reviews hub's 876 column): the pros under the title, one 8-slot payment row under all. */
@container (min-width: 800px) {
  .ci-overview-header { align-items: center; grid-template-rows: 1fr auto auto 1fr auto; row-gap: 0; }
  .ci-overview-header > .ci-overview-logo-wrap, .ci-overview-header > .ci-overview-offer { grid-row: 1 / 5; }
  .ci-overview-title { gap: 8px; grid-column: 2; grid-row: 2; }
  .ci-overview-features { display: contents; }
  .ci-overview-features > .ci-overview-points { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .ci-overview-features > .ci-overview-payments { --ci-pay-slots: 8; grid-column: 1 / -1; grid-row: 5; margin-top: 16px; min-width: 0; }
}
/* Desktop (>= 1100): logo | name, bonus, rating, payments (the rest: 258 on a 1100 card) | the pros' fixed 340 | the
   268 offer (v5, DREAM-812); a narrow info column folds its payment row to fewer slots and "+N". */
@container (min-width: 1100px) {
  .ci-overview-header { grid-template-columns: 96px minmax(0, 1fr) 340px 268px; grid-template-rows: 1fr auto auto 1fr; }
  .ci-overview-header > .ci-overview-offer { grid-column: 4; }
  .ci-overview-title { gap: 12px; }
  .ci-overview-features > .ci-overview-points { grid-column: 3; grid-row: 1 / -1; margin-top: 0; }
  .ci-overview-features > .ci-overview-payments { --ci-pay-slots: 6; grid-column: 2; grid-row: 3; margin-top: 12px; }
}

/* Visually hidden, not display:none: the toggle keeps keyboard focus. */
.ci-overview-toggle { height: 1px; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 1px; }
.ci-overview-body { border-top: 1px solid #e2e2e7; display: none; flex-direction: column; gap: 20px; padding: 20px; }
.ci-overview-toggle:checked ~ .ci-overview-body { display: flex; }
/* Facts use two equal columns; an odd surviving final fact spans both (DREAM-855). */
.ci-overview-stats { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin: 0; min-width: 0; }
/* One column on the phone reads the two-column card's left column, then its right (v5 Mobile
   Expanded, DREAM-811): the facts the card prints, by position, so a dropped fact moves both as the desktop does. */
.ci-overview-stats > .ci-overview-stat:nth-child(even) { order: 1; }
/* A surviving odd final fact spans both columns (DREAM-855). */
.ci-overview-stats > .ci-overview-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* content/casino-facts v3: the label over the value, both body/md, left-aligned. */
.ci-overview-stat { background: #f3f2ff; border-radius: 8px; color: #202224; display: flex; flex-direction: column; font-size: 16px; gap: 4px; line-height: 24px; min-width: 0; padding: 10px 8px; }
.ci-overview-stat-name, .ci-overview-stat-value { margin: 0; min-width: 0; overflow-wrap: break-word; }
.ci-overview-ratings { display: flex; flex-direction: column; min-width: 0; }
.ci-overview-rating-list { display: flex; flex-direction: column; gap: 16px; }
.ci-overview-rating-list > div { min-width: 0; padding: 0 8px; }
/* A 12px pad around the trimmed 14/22 label, the first one without its top. */
.ci-overview-rating-label { color: #202224; display: block; font-size: 14px; font-weight: 700; line-height: 22px; padding: 6.265625px 8px 5.734375px; }
.ci-overview-rating-list > div:first-child .ci-overview-rating-label { margin-top: -5.734375px; padding-top: 0; }
.ci-overview-bar { display: flex; gap: 4px; height: 9px; min-width: 0; }
.ci-overview-cell { background: #d9d9d9; border-radius: 2px; display: block; flex: 1; height: 9px; min-width: 0; }
.ci-overview-cell.on { --ci-cell: #5bd73c; background: var(--ci-cell); }
.ci-overview-cell.mid { --ci-cell: #ffb310; background: var(--ci-cell); }
.ci-overview-cell.low { --ci-cell: #e24e3e; background: var(--ci-cell); }
.ci-overview-cell.part { background: linear-gradient(90deg, var(--ci-cell) var(--ci-fill, 0%), #d9d9d9 var(--ci-fill, 0%)); }
/* No category rated (its rows dropped, 0467): no rating rows under the facts. */
.ci-overview-ratings:not(:has(.ci-overview-bar)) { display: none; }
/* control/show-toggle v5: centred on the card's bottom edge, shut or open; it hugs its label (pad 12). */
.ci-overview-more { align-items: center; background: #f3f3f3; border-radius: 4px; box-shadow: inset 0 0 0 1px #d9d9d9; color: #545658; cursor: pointer; display: flex; font-size: 16px; height: 32px; justify-content: center; line-height: 24px; margin: -16px auto; padding: 0 12px; position: relative; white-space: nowrap; width: max-content; z-index: 3; }
/* Its 44px hit area grows down into the gap under the card, never over the card's last row (a Medium payment row). */
.ci-overview-more::before { content: ''; inset: 0 0 -12px; position: absolute; }
.ci-overview-more:hover { background: #ededed; color: #202224; }
.ci-overview-more:active { background: #ededed; color: #1b5547; }
/* Forced colours drop the ring's shadow: an outline keeps the control's edge. */
@media (forced-colors: active) {
  .ci-overview-more { outline: 1px solid ButtonText; outline-offset: -1px; }
}
.ci-overview-toggle:focus-visible ~ .ci-overview-more { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-overview-more-less { display: none; }
.ci-overview-toggle:checked ~ .ci-overview-more .ci-overview-more-show { display: none; }
.ci-overview-toggle:checked ~ .ci-overview-more .ci-overview-more-less { display: inline; }
@container (min-width: 560px) {
  .ci-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-overview-stats > .ci-overview-stat:nth-child(even) { order: 0; }
}
.ci-overview-section {
  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;
}
@media (max-width: 1199.98px) { .ci-overview-section { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-overview-section { padding-left: 20px; padding-right: 20px; } }
.ci-overview-items { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.ci-overview:not([hidden]) ~ .ci-overview { margin-top: 4px; }
@media (min-width: 561px) and (max-width: 1099px) { .ci-overview:not([hidden]) ~ .ci-overview { margin-top: 12px; } }
/* Tablets: v5's home casino-grid, Mobile cards of at least 328 24px apart, rows 40 apart (DREAM-746); no sibling margin. */
/* The placement's tablet switches (DREAM-824): one column, where a 720 card takes the Tablet layout by its width and
   the cards stand 32 apart (slot-review-tablet); or the grid's Mobile cards without pros (home-tablet). */
@media (min-width: 561px) and (max-width: 1199.98px) {
  .ci-overview-items { column-gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(328px, 100%), 1fr)); row-gap: 40px; }
  .ci-overview:not([hidden]) ~ .ci-overview { margin-top: 0; }
  .ci-overview-section:has(> .ci-overview-one-column) .ci-overview-items { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .ci-overview-section:has(> .ci-overview-tablet-no-pros) .ci-card-pros { display: none; }
}
/* Asked of SCRIPTING, not undone by a <noscript> rule: `display` has no
   un-hiding half — `revert` rolls back to the UA origin and strips the card's
   own `display` (`.ci-bgd-main` is flex, `.ci-vcard` grid). Where the pager
   cannot run, the cut is never made — the lead, PR #169. */
@media (scripting: enabled) {
  .ci-overview-items:not([data-pager-ready]) > [data-past-batch] { display: none; }
}
/* The panel marks a non-matching card `hidden`; this states what that means
   loudly enough to survive a baked `Page.css` rule setting display on the
   card (render KNOWLEDGE.md, "Stale baked page CSS"). */
.ci-overview-items > *[hidden] { display: none !important; }
/* Hidden until the script takes over: without JavaScript the button would
   promise a batch it cannot reveal. Stated here, NOT in the <noscript> below —
   the editor parses that block as markup and bakes its rules into Page.css,
   where they apply with scripting ON (render KNOWLEDGE.md, "Stale baked CSS"). */
.ci-cpager { display: none; }
.ci-overview-items[data-pager-ready] > .ci-cpager { display: flex; flex-direction: column; gap: 12px; align-items: center; grid-column: 1 / -1; padding-top: 20px; }
.ci-cpager[hidden] { display: none; }
.ci-cpager .ci-cpager-count { color: #545658; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; }
/* NL button/secondary without its arrow: 23px + the 1px border make the design's 24px sides.
   Under `.ci-cpager` so a pre-0410 version's flat rules on the page lose (PR #496 R1.5). */
.ci-cpager .ci-cpager-btn { -webkit-appearance: none; align-items: center; appearance: none; background: none; border: 1px solid #5749dd; border-radius: 4px; color: #5749dd; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 18px; font-weight: 700; height: 48px; justify-content: center; line-height: 24px; margin: 0; max-width: 100%; padding: 0 23px; position: relative; }
.ci-cpager .ci-cpager-btn:hover { background: #f3f2ff; }
.ci-cpager .ci-cpager-btn:active { background: none; border-color: #3d31b8; color: #3d31b8; }
.ci-cpager .ci-cpager-btn:focus-visible { outline: none; }
/* The drawn ring, 3px out at radius 8/10 (an outline would round to 9): 6px off the padding box. */
.ci-cpager .ci-cpager-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-cpager .ci-cpager-btn[hidden] { display: none; }
.ci-ctoolbar * { box-sizing: border-box; }
/* A part of the list it controls, never a section of its own: it spans the
   list's layout and leaves the section's padding to the section. */
.ci-ctoolbar { box-sizing: border-box; color: #202224; grid-column: 1 / -1; margin: 0; width: 100%; }
/* form/search, Light: 40px, the glyph first; Figma's 8/12 pads sit inside the 1px border. */
.ci-ctoolbar label.ci-ctoolbar-search { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; cursor: text; display: flex; gap: 8px; height: 40px; margin: 0; padding: 8px 12px; position: relative; }
.ci-ctoolbar label.ci-ctoolbar-search::before { content: ''; inset: -3px -1px; position: absolute; }
.ci-ctoolbar label.ci-ctoolbar-search:focus-within::after { border: 2px solid #5749dd; border-radius: 14px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
/* `inset` and `transform` undo a pre-0410 sheet's right-hand absolute glyph. */
.ci-ctoolbar label > .ci-ctoolbar-icon { color: #545658; display: block; flex: none; height: 16px; inset: auto; position: relative; transform: none; width: 16px; }
.ci-ctoolbar label > .ci-ctoolbar-input { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: #202224; flex: 1; font-family: inherit; font-size: 14px; font-weight: 400; height: 20px; letter-spacing: 0; line-height: 20px; margin: 0; min-width: 0; outline: none; padding: 0; position: relative; top: 1px; }
.ci-ctoolbar label > .ci-ctoolbar-input:focus-visible { outline: none; }
.ci-ctoolbar label > .ci-ctoolbar-input::placeholder { color: #545658; opacity: 1; }
.ci-ctoolbar label > .ci-ctoolbar-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ci-ctoolbar label > .ci-ctoolbar-input::-webkit-search-decoration { -webkit-appearance: none; }
@media (hover: hover) {
  .ci-ctoolbar label.ci-ctoolbar-search:hover { border-color: #545658; }
  .ci-ctoolbar .ci-ctoolbar-reset:hover { text-decoration: underline; }
}
.ci-ctoolbar label.ci-ctoolbar-search:active { background: #ededed; border-color: #545658; }
.ci-ctoolbar .ci-ctoolbar-chips { display: flex; flex-wrap: wrap; gap: 12px 8px; margin-top: 12px; }
.ci-ctoolbar .ci-ctoolbar-chips:empty { display: none; }
/* filter/chip, an applied filter with its close glyph (0438): 32px pill, 44px hit area (rows 12 apart,
   so two rows' areas never overlap). Hover and pressed draw the 1px line inset, so the pill keeps
   its width (user call, DREAM-718). */
.ci-ctoolbar .ci-ctoolbar-chip { align-items: center; background: #f3f3f3; border: 0; border-radius: 999px; color: #202224; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 12px; font-style: normal; font-weight: 400; gap: 6px; letter-spacing: 0; line-height: 20px; margin: 0; max-width: 100%; min-height: 32px; overflow-wrap: anywhere; padding: 6px 8px 6px 12px; position: relative; text-align: left; }
.ci-ctoolbar .ci-ctoolbar-chip::before { content: ''; inset: -6px 0; position: absolute; }
.ci-ctoolbar .ci-ctoolbar-chip-icon { display: block; flex: none; height: 12px; width: 12px; }
/* Unguarded, so a pre-0438 sheet's green :hover cannot win on a touch screen. */
.ci-ctoolbar .ci-ctoolbar-chip:hover { background: #f3f3f3; }
@media (hover: hover) {
  .ci-ctoolbar .ci-ctoolbar-chip:hover { background: #ededed; box-shadow: inset 0 0 0 1px #545658; }
}
.ci-ctoolbar .ci-ctoolbar-chip:active { background: #ededed; box-shadow: inset 0 0 0 1px #545658; color: #545658; }
.ci-ctoolbar .ci-ctoolbar-chip:focus-visible { outline: none; }
/* Figma's ring: 2px #5749DD, 3px out, radius 8 inside (a rounded rect round the pill). */
.ci-ctoolbar .ci-ctoolbar-chip:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -5px; pointer-events: none; position: absolute; }
@media (forced-colors: active) { .ci-ctoolbar .ci-ctoolbar-chip, .ci-ctoolbar .ci-ctoolbar-chip:focus-visible { outline: 1px solid ButtonText; outline-offset: -1px; } }
.ci-ctoolbar .ci-ctoolbar-meta { color: #545658; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; margin: 12px 0 0; }
/* The link carries its own 12px: a hidden link leaves the row 0 high, so no gap (R1.6). */
.ci-ctoolbar .ci-ctoolbar-meta-row { display: flex; margin: 0; }
/* link/text: 700 16/22 #0C866A; hover underlines, pressed #0D9070; a 44px hit area. */
.ci-ctoolbar .ci-ctoolbar-reset { background: none; border: 0; border-radius: 5px; color: #0c866a; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 22px; margin: 12px 0 0; padding: 0; position: relative; }
.ci-ctoolbar .ci-ctoolbar-reset::before { content: ''; inset: -11px 0; position: absolute; }
.ci-ctoolbar .ci-ctoolbar-reset:active { color: #0d9070; text-decoration: underline; }
.ci-ctoolbar .ci-ctoolbar-reset:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-ctoolbar .ci-ctoolbar-reset[hidden] { display: none; }
/* feedback/empty-state: NoResults by default, Empty (`data-empty="none"`) on a list with no rows.
   Figma's pad 48 plus its 1px stroke inside the layout: 49 on every side, and the height hugs
   the words (the default copy measures 49+116+49 = 214), with no minimum (0425). */
.ci-ctoolbar div.ci-ctoolbar-empty { align-items: center; background: #ededed; border: 0; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 49px; text-align: center; }
.ci-ctoolbar div.ci-ctoolbar-empty[hidden] { display: none; }
.ci-ctoolbar .ci-ctoolbar-empty-title { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ctoolbar .ci-ctoolbar-none-title { color: #202224; display: none; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ctoolbar .ci-ctoolbar-empty-text { color: #545658; font-size: 14px; line-height: 20px; margin: -4px 0 -6px; max-width: 420px; }
.ci-ctoolbar .ci-ctoolbar-none-text { color: #545658; display: none; font-size: 14px; line-height: 20px; margin: -4px 0 -6px; max-width: 420px; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-empty-title { display: none; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-empty-text { display: none; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-none-title { display: block; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-none-text { display: block; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-clear { display: none; }
/* Empty's own button/primary (0479): the hub link, shown only on a list with no rows, and only where it has an address. */
.ci-ctoolbar .ci-ctoolbar-hub { display: none; }
.ci-ctoolbar .ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-hub[href]:not([href=""]) { display: inline-flex; }
/* button/primary with its arrow; the white ring sits 1px off the grey panel, the purple 5px out. */
.ci-ctoolbar .ci-ctoolbar-clear, .ci-ctoolbar .ci-ctoolbar-empty > .ci-ctoolbar-hub { align-items: center; background: #0c866a; border: 0; border-radius: 4px; color: #fff; cursor: pointer; flex: none; font-family: inherit; font-size: 18px; font-weight: 700; gap: 4px; height: 48px; justify-content: center; line-height: 24px; margin: 0; max-width: 100%; padding: 0 24px; text-decoration: none; }
.ci-ctoolbar .ci-ctoolbar-clear { display: inline-flex; }
.ci-ctoolbar .ci-ctoolbar-clear:hover, .ci-ctoolbar .ci-ctoolbar-hub:hover { background: #0d9070; }
.ci-ctoolbar .ci-ctoolbar-clear:active, .ci-ctoolbar .ci-ctoolbar-hub:active { background: #1b5547; }
.ci-ctoolbar .ci-ctoolbar-clear:focus-visible, .ci-ctoolbar .ci-ctoolbar-hub:focus-visible { box-shadow: 0 0 0 1px #ededed, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-ctoolbar .ci-ctoolbar-clear-label, .ci-ctoolbar .ci-ctoolbar-hub-label { margin: -5px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ctoolbar .ci-ctoolbar-clear-icon { display: block; flex: none; height: 12px; width: 12px; }
/* Its own rule: 0410 finds its version by the clear icon's rule text (PR #578 R1.8). */
.ci-ctoolbar .ci-ctoolbar-hub-icon { display: block; flex: none; height: 12px; width: 12px; }
/* One rule per selector per context (COMPONENT_GENERATION.md §1). */
.ci-games-carousel * { box-sizing: border-box; }
.ci-games-carousel { box-sizing: border-box; color: #202224; 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; }
@media (max-width: 1199.98px) { .ci-games-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-games-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-games-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-games-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-games-carousel-track::-webkit-scrollbar { display: none; }
.ci-games-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-games-carousel-track.is-dragging a { pointer-events: none; }
.ci-slide { flex: 0 0 220px; list-style: none; scroll-snap-align: start; }
/* Tablets: v5's 208px cards 24 apart, the next one peeking 24px into the 720 column (DREAM-746). */
@media (max-width: 1199.98px) { .ci-games-carousel-track { gap: 24px; } .ci-slide { flex-basis: 208px; } }

/* The art keeps the design's 220x300 at every column width; the caption hangs
   27px below it, which the link's padding counts (the caption is absolute). */
.ci-game-card { container: gcard / inline-size; position: relative; width: 100%; }
.ci-game-link { color: inherit; display: block; padding-bottom: 27px; position: relative; text-decoration: none; }
.ci-game-link:focus-visible { outline: none; }
/* An outline, not a box-shadow: forced-colors mode paints no shadow. */
.ci-game-link:focus-visible::after { border-radius: 12px; content: ''; inset: -3px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
.ci-game-art { aspect-ratio: 220 / 300; background: linear-gradient(160deg, #2b2b33, #17171c); border-radius: 12px; overflow: hidden; position: relative; }
.ci-game-image { display: block; height: 100%; object-fit: cover; width: 100%; }
.ci-game-image[src=""], .ci-game-image:not([src]) { opacity: 0; }
.ci-game-art::after { background: linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); content: ''; inset: 0; pointer-events: none; position: absolute; }
.ci-game-link:active .ci-game-art::after { background: linear-gradient(180deg, rgba(6, 9, 38, .18), rgba(4, 7, 38, .71)), linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
/* Decorative: a click on it is the link's, and the canvas selects the art. */
.ci-game-play { align-items: center; background: #0c866a; border-radius: 8px; color: #fff; display: none; left: calc(50% - 34px); padding: 12px 24px; pointer-events: none; position: absolute; top: 38.67%; z-index: 1; }
.ci-game-link:active .ci-game-play { background: #1b5547; color: #b2b2b2; display: flex; }
.ci-game-play-icon { display: block; flex: none; height: 20px; width: 20px; }
/* 6px above the 80px caption (v4 card/game: y213 / Mobile y142). */
.ci-game-badges { bottom: 59px; display: flex; gap: 8px; justify-content: space-between; left: 20px; position: absolute; right: 20px; z-index: 1; }
/* RTP keeps the right edge by its own margin (a game with no score has no
   rating badge) and is the badge that gives way on a narrow card. */
.ci-game-rtp { margin-left: auto; min-width: 0; }
.ci-game-badge { align-items: center; background: #202224; border: 1px solid #fff; border-radius: 8px; color: #fff; display: inline-flex; font-size: 14px; font-weight: 500; gap: 4px; height: 28px; line-height: 22px; padding: 0 7px; white-space: nowrap; }
.ci-game-star { display: block; flex: none; height: 12px; width: 12px; }
.ci-game-star-fill { fill: #ffb310; }
.ci-game-score { display: block; margin: -5px 0 -7px; }
.ci-game-rtp-value { display: block; margin: -5px 0 -7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* content/game-caption: a fixed 80px box, its text centred, so a one- or two-line name never moves the card (v4/v5). */
.ci-game-info { background: #f3f3f3; border-radius: 8px; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; height: 80px; justify-content: center; left: 20px; padding: 8px; position: absolute; right: 20px; text-align: center; }
.ci-game-name { border-radius: 4px; display: block; padding: 4px; }
/* Two lines, then "…" (v5 maxLines 2: "Gates of Olympus 1000 Dice"). */
.ci-game-name-text { font-size: 16px; font-weight: 700; line-height: 22px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -6px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); overflow-wrap: anywhere; }
.ci-game-link:active .ci-game-name-text { text-decoration: underline; }
.ci-game-provider { color: #545658; font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover only where a pointer hovers: a tap must open the game, not reveal it. */
@media (hover: hover) {
  .ci-game-link:hover .ci-game-art::after { background: linear-gradient(180deg, rgba(6, 9, 38, .18), rgba(4, 7, 38, .71)), linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
  .ci-game-link:hover .ci-game-play { display: flex; }
  .ci-game-link:hover .ci-game-name-text { text-decoration: underline; }
}
/* The card's own width picks Mobile too (DREAM-746): a 154-190px tablet card, and the home strip's six at 183 (0496). */
@container gcard (max-width: 189.98px) {
  .ci-game-link { padding-bottom: 26px; }
  .ci-game-art { aspect-ratio: 169 / 230; }
  .ci-game-badges { bottom: 60px; left: 8px; right: 8px; }
  .ci-game-info { left: 8px; padding: 8px 4px; right: 8px; }
  /* card/game Layout=Mobile: the title fills the caption's inner width (145px of a 169px card, 0421). */
  .ci-game-name { padding: 4px 0; }
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
}
/* content/game-caption in every v5 tablet and phone frame: the title 700 14/22, a Desktop card too (DREAM-827). */
@media (max-width: 1199.98px) {
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
}
/* The phone frames' provider line 400 14/18 (DREAM-827). */
@media (max-width: 560px) {
  .ci-game-link { padding-bottom: 26px; }
  .ci-game-art { aspect-ratio: 169 / 230; }
  .ci-game-badges { bottom: 60px; left: 8px; right: 8px; }
  .ci-game-info { left: 8px; padding: 8px 4px; right: 8px; }
  /* card/game Layout=Mobile: the title fills the caption's inner width (145px of a 169px card, 0421). */
  .ci-game-name { padding: 4px 0; }
  .ci-game-name-text { font-size: 14px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em -7px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); }
  .ci-game-provider { line-height: 18px; margin: -3px 0 -5px; }
}

/* A drag is no press: the card it started on keeps its rest look (0385's scope).
   One class more than the card's :active rules, which a grid on the page repeats later. */
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-art::after { background: linear-gradient(180deg, #20222400 calc(100% - 154px), #202224bf calc(100% - 69.3px), #202224f5); }
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-play { display: none; }
.ci-games-carousel-track.is-dragging .ci-game-link .ci-game-name-text { text-decoration: none; }
.ci-games-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-games-carousel-next { right: 12px; }
.ci-games-carousel-prev { left: 12px; }
.ci-games-carousel-prev .ci-games-carousel-icon { transform: scaleX(-1); }
.ci-games-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-games-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-games-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-games-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-games-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-games-carousel-btn:focus-visible { outline: none; }
.ci-games-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-games-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-games-carousel-btn { display: none; }
}
@media (max-width: 560px) {
  .ci-games-carousel-track { gap: 12px; }
  .ci-slide { flex-basis: 169px; }
}
.ci-bonus-carousel * { box-sizing: border-box; }
.ci-bonus-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-bonus-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-bonus-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-bonus-carousel-viewport { position: relative; }
.ci-bonus-carousel-track { cursor: grab; display: flex; gap: 18px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-bonus-carousel-track::-webkit-scrollbar { display: none; }
.ci-bonus-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-bonus-carousel-track.is-dragging a { pointer-events: none; }
/* A drag is no press: the name it started on keeps its rest look. */
.ci-bonus-carousel-track.is-dragging .ci-bonus-name-link { color: #0c866a; text-decoration: none; }
.ci-bslide { display: flex; flex: 0 0 min(272px, 100%); list-style: none; scroll-snap-align: start; }
.ci-bonus-card { align-items: center; background: linear-gradient(180deg, #f3f2ff33 0%, #f3f2ff 73.64%); border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 20px; position: relative; text-align: center; width: 100%; }
.ci-bonus-logo { align-items: center; display: flex; flex: none; height: 125px; justify-content: center; position: relative; width: 125px; }
.ci-bonus-card .ci-bonus-logo { background: linear-gradient(#202224 0 0) padding-box, linear-gradient(325.37deg, #ffbe04 16.77%, #e03327 95.65%) border-box; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; }
.ci-bonus-card .ci-bonus-logo::before { content: none; }
.ci-bonus-logo-disc { align-items: center; background: #202224; border-radius: 50%; color: #fff; display: flex; height: 100px; justify-content: center; width: 100px; }
.ci-bonus-logo-disc picture { display: contents; }
.ci-bonus-logo-img { display: block; height: 80px; object-fit: contain; width: 80px; }
.ci-bonus-logo-text, .ci-bonus-logo-name { font-size: 13px; font-weight: 900; max-width: 80px; overflow-wrap: anywhere; text-align: center; }
.ci-bonus-logo-img[src=""], .ci-bonus-logo-img:not([src]) { display: none; }
/* The canvas placeholder lies unseen over the caption, still clickable to pick a logo. */
.ci-bonus-logo-img.gjs-plh-image { height: 80px; left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 80px; z-index: 1; }
.ci-bonus-logo-img[src]:not([src=""]):not(.gjs-plh-image) ~ :is(.ci-bonus-logo-text, .ci-bonus-logo-name) { display: none; }
/* The caption is the Logo text, else the casino's name: an empty Logo text leaves the card. */
.ci-bonus-logo-text + .ci-bonus-logo-name { display: none; }
.ci-bonus-logo-disc:has(.ci-bonus-logo-img[src]:not([src=""]):not(.gjs-plh-image)) :is(.ci-bonus-logo-text, .ci-bonus-logo-name) { display: none; }
.ci-bonus-name { border-radius: 8px; display: block; font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; width: 100%; }
/* link/text 232 wide, one line (v5, DREAM-811): its 11px pads make the 44px hit area across the row, out of flow, over
   the offer (positioned); width 0 + min-width 100% so a long name never widens the card it ends in "…" in. */
.ci-bonus-name-link { color: #0c866a; display: block; margin: -11px 0; min-width: 100%; overflow: hidden; padding: 11px 0; position: relative; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: 0; }
/* v6 Promo name is green at rest (DREAM-881). */
@media (hover: hover) { .ci-bonus-name-link:hover { color: #0c866a; text-decoration: underline; } }
.ci-bonus-name-link:active { color: #1b5547; text-decoration: underline; }
/* The ring goes round the name's line, row-wide, from its wrapper; without :has() on any focus in it (a mouse's too). */
.ci-bonus-name-link:focus-visible { outline: none; }
.ci-bonus-name:has(> .ci-bonus-name-link:focus-visible) { outline: 2px solid #5749dd; outline-offset: 3px; }
@supports not selector(:has(*)) { .ci-bonus-name:focus-within { outline: 2px solid #5749dd; outline-offset: 3px; } }
/* v5: the offer in a fixed 232x52 box, two lines then "…", so every card's plate and button sit level. */
.ci-bonus-text { font-size: 18px; font-weight: 700; line-height: 24px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; height: 48px; -webkit-line-clamp: 2; line-clamp: 2; margin: -5px -1em 9px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); overflow-wrap: anywhere; }
/* Size=Sm at any width; its height is the label's (and the button's) margin box plus the border. */
.ci-bonus-code { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: flex; gap: 8px; min-width: 0; position: relative; z-index: 2; flex: none; margin-top: auto; width: 100%; }
.ci-bonus-code-label, .ci-bonus-code-label-sm { color: #545658; flex: 0 1000 auto; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 20px; margin: 9px 0 9px 12px; }
/* Always Sm, so always "Code:"; an empty one is dropped, leaving "Bonuscode:". */
.ci-bonus-code-label-sm + .ci-bonus-code-label { display: none; }
.ci-bonus-code-value { color: #202224; flex: 0 1 auto; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 22px; margin: -5px 0 -6px; margin-left: auto; }
/* button/copy: 12px, its padding the 44px hit area (8 toward the code); the ring, 3px out, is the plate's. */
.ci-bonus-code-copy { background: none; border: 0; box-sizing: content-box; cursor: pointer; display: block; flex: none; height: 12px; width: 12px; margin: -3px 0 -3px -8px; padding: 16px 12px 16px 8px; }
.ci-bonus-code-copy:focus-visible { outline: none; }
.ci-bonus-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-bonus-code-copy-img { display: block; height: 13.09px; width: 12px; }
/* Hover and press skip a copied plate, so Copied needs no rules to win them back. */
@media (hover: hover) {
  .ci-bonus-code:not([data-copied]):hover { background: #ededed; border-color: #545658; }
}
.ci-bonus-code:not([data-copied]):active { background: #ededed; border-color: #545658; }
.ci-bonus-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-bonus-code[data-copied] .ci-bonus-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-bonus-code[data-copied] .ci-bonus-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 16px; line-height: 22px; }
.ci-bonus-code[data-copied] .ci-bonus-code-copy-img:not(.gjs-plh-image) { filter: brightness(0) saturate(100%) invert(33%) sepia(99.7%) saturate(376%) hue-rotate(115.9deg) brightness(98.3%) contrast(93.9%); }
.ci-bonus-nocode { align-items: center; box-sizing: border-box; color: #545658; display: flex; flex: none; gap: 8px; height: 40px; justify-content: center; margin: auto 0 0; min-width: 0; padding: 0 12px; width: 100%; }
.ci-bonus-code + .ci-bonus-nocode { display: none; }
.ci-bonus-nocode-icon { color: #0c8166; display: block; flex: none; height: 16px; width: 16px; }
.ci-bonus-nocode-label { font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-bonus-button { align-items: center; background: #0c866a; border-radius: 4px; box-sizing: border-box; color: #fff; display: flex; flex: none; gap: 4px; height: 48px; justify-content: center; padding: 0 24px; text-decoration: none; width: 100%; }
.ci-bonus-button:hover { background: #0d9070; }
.ci-bonus-button:active { background: #1b5547; }
.ci-bonus-button:focus-visible { box-shadow: 0 0 0 1px #f3f2ff, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-bonus-button-label { font-size: 18px; font-weight: 700; line-height: 24px; margin: -5px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-bonus-button-arrow { display: block; flex: none; height: 12px; width: 12px; }
/* With neither plate nor note ("Hide bonus code") the button heads the foot group, which ends at the card's foot. */
.ci-bonus-text + .ci-bonus-button { margin-top: auto; }
.ci-bonus-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-bonus-carousel-next { right: 12px; }
.ci-bonus-carousel-prev { left: 12px; }
.ci-bonus-carousel-prev .ci-bonus-carousel-icon { transform: scaleX(-1); }
.ci-bonus-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-bonus-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-bonus-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-bonus-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-bonus-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-bonus-carousel-btn:focus-visible { outline: none; }
.ci-bonus-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-bonus-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-bonus-carousel-btn { display: none; }
}
@media (max-width: 1180px) { .ci-bslide { flex-basis: min(272px, 100% - 42px); } }
.ci-guides-carousel * { box-sizing: border-box; }
.ci-guides-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-guides-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-guides-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-guides-carousel-viewport { position: relative; }
.ci-guides-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-guides-carousel-track::-webkit-scrollbar { display: none; }
.ci-guides-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-guides-carousel-track.is-dragging a { pointer-events: none; }
/* v5 (change document request 3): four 285px cards across the 1200 column (4 x 285 + 3 x 20). */
.ci-gslide { flex: 0 0 285px; list-style: none; scroll-snap-align: start; }
/* Tablets: v5's 328px cards, the next one peeking 24px into the 720 column (DREAM-746). */
@media (max-width: 1199.98px) { .ci-gslide { flex-basis: 328px; } }
.ci-guide-card { background: #1c1c1c; border-radius: 12px; display: flex; flex-direction: column; height: 410px; justify-content: flex-end; position: relative; }
.ci-guide-thumb { background: linear-gradient(160deg, #2b2b33, #17171c) top / 100% 77.28% no-repeat; border-radius: 12px; display: block; inset: 0; overflow: hidden; position: absolute; }
.ci-guide-image { display: block; height: 77.28%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.ci-guide-image[src=""], .ci-guide-image:not([src]) { opacity: 0; }
/* Stacked over the photo by z-index, not position: the card, not the body, places the title link's ring (0459). */
.ci-guide-body { background: linear-gradient(180deg, rgba(28, 28, 28, 0), #1c1c1c 75.49px); border-radius: 0 0 12px 12px; color: #fff; display: flex; flex-direction: column; gap: 12px; margin-top: -45.47px; padding: 61.47px 16px 16px; z-index: 0; }
.ci-guide-title { display: block; font-size: 24px; font-weight: 700; line-height: 28px; margin: 0; z-index: 1; }
/* Only the title is the link, out of flow; its ring goes round the card (Focus). v5 hover and press draw a 2px bar,
   the link's own background, the content's width and 21px under the title's box (@16,265, DREAM-812): its foot pad. */
.ci-guide-link { color: inherit; display: block; margin: -9px 0 -23px; padding: 9px 0 23px; text-decoration: none; }
.ci-guide-link:focus-visible { outline: none; }
.ci-guide-link:focus-visible::after { border-radius: 5px; content: ''; inset: 0; outline: 2px solid #5749dd; outline-offset: 3px; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-guide-link:hover { background: linear-gradient(#0c866a, #0c866a) left bottom / 100% 2px no-repeat; } }
.ci-guide-link:active { background: linear-gradient(#1b5547, #1b5547) left bottom / 100% 2px no-repeat; }
@media (forced-colors: active) { .ci-guide-link:hover .ci-guide-title-text, .ci-guide-link:active .ci-guide-title-text { text-decoration: underline; } }
.ci-guide-card:not(:has(.ci-guide-link[href]:not([href=""]))) { opacity: .4; }
/* Every row after the title stacks over its link's foot pad (z-index 2, flex items): the link's hit area ends at the
   next row, 44px at least (49 with no excerpt), and the bar still shows through (DREAM-812). */
.ci-guide-text { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 4; line-clamp: 4; line-height: 20px; margin: -4.73px 0 -5.4px; overflow: hidden; z-index: 2; }
.ci-guide-text:empty { display: none; }
.ci-guide-meta { align-items: center; display: flex; margin: 0; z-index: 2; }
.ci-guide-byline { align-items: center; display: flex; gap: 12px; max-width: 100%; min-width: 0; }
.ci-guide-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-guide-avatar[src=""], .ci-guide-avatar:not([src]) { display: none; }
.ci-guide-author { font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.98px 0 -5.74px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No author (DREAM-708): both name leaves drop, and the byline row with them. */
.ci-guide-meta:not(:has(.ci-guide-author-first)):not(:has(.ci-guide-author-last)) { display: none; }
/* v5 footer row: date | topic on the left, Lees verder (where the block has it) on the right. */
.ci-guide-foot { align-items: center; display: flex; gap: 12px; min-height: 12px; z-index: 2; }
.ci-guide-facts { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-guide-date { flex: none; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-guide-category { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-guide-sep { background: #fff; flex: none; height: 12px; width: 1px; }
.ci-guide-sep:first-child, .ci-guide-sep:last-child { display: none; }
.ci-guide-facts:has(> .ci-guide-sep:only-child) { display: none; }
.ci-guide-facts { min-width: 0; }
@media (forced-colors: active) { .ci-guide-sep { background: CanvasText; } }
.ci-guide-foot:not(:has(.ci-guide-date)):not(:has(.ci-guide-category)):not(:has(.ci-guide-more)) { display: none; }
/* The row carries the link's look, so an unwrapped Lees verder (no URL, 0459) keeps it in the Disabled card. */
.ci-guide-more { color: #0c866a; display: flex; flex: none; font-size: 16px; font-weight: 700; gap: 8px; height: 11px; line-height: 22px; margin-left: auto; }
.ci-guide-more-link { align-items: center; border-radius: 5px; color: inherit; display: flex; gap: 8px; position: relative; text-decoration: none; }
.ci-guide-more-link::before { content: ''; inset: calc(50% - 22px) 0; position: absolute; }
.ci-guide-more-link:hover { color: #0d9070; }
.ci-guide-more-link:active { color: #1b5547; }
.ci-guide-more-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-guide-more-label { text-box: trim-both cap alphabetic; white-space: nowrap; }
.ci-guide-more-icon { display: block; flex: none; height: 12px; width: 12px; }
/* v5 tablet and phone frames (DREAM-830): the card keeps its box and draws smaller type, its trims recomputed. */
@media (max-width: 1199.98px) {
  .ci-guide-title { font-size: 22px; }
  .ci-guide-text { line-height: 18px; margin: -3.734375px 0 -4.265625px; }
  .ci-guide-author { font-size: 14px; margin: -5.734375px 0 -6.265625px; }
  .ci-guide-date, .ci-guide-category { line-height: 22px; margin: -7px 0 -7px; }
  .ci-guide-more { font-size: 14px; height: 10px; }
}
/* A drag is no press: the title it started on keeps its rest look (as the news and author carousels). */
.ci-guides-carousel-track.is-dragging .ci-guide-link { background: none; }
.ci-guides-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-guides-carousel-next { right: 12px; }
.ci-guides-carousel-prev { left: 12px; }
.ci-guides-carousel-prev .ci-guides-carousel-icon { transform: scaleX(-1); }
.ci-guides-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-guides-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-guides-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-guides-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-guides-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-guides-carousel-btn:focus-visible { outline: none; }
.ci-guides-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-guides-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-guides-carousel-btn { display: none; }
}
/* Phones: v5's 306px card, one size on every page (DREAM-830), the next one's 24px always in view. */
@media (max-width: 560px) { .ci-gslide { flex-basis: min(306px, 100% - 44px); } }
.ci-team-carousel * { box-sizing: border-box; }
.ci-team-carousel { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; }
@media (max-width: 1199.98px) { .ci-team-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-team-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-team-carousel-viewport { position: relative; }
/* 5px of padding round the slides, so the card's focus ring is not clipped. */
.ci-team-carousel-track { cursor: grab; display: flex; gap: 20px; list-style: none; margin: -5px -5px 0; overflow-x: auto; padding: 5px 5px 10px; scroll-behavior: smooth; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-team-carousel-track::-webkit-scrollbar { display: none; }
.ci-team-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-team-carousel-track.is-dragging a { pointer-events: none; }
/* v5 (change document request 4, 0474): the slides fill the row, 3 on a desktop, 2 + a 24px peek below the arrows'
   1180, then one + the peek; never under 240px, so a rail column holds one card + the peek (PR #573 R1.2). */
.ci-tslide { display: flex; flex: 0 0 max(calc((100% - 40px) / 3), min(240px, 100% - 44px)); list-style: none; min-width: 0; scroll-snap-align: start; }
.ci-team-card { align-items: center; background: linear-gradient(180deg, #f3f2ff57 0%, #eeedfb 73.64%); border-radius: 12px; color: #202224; display: flex; flex-direction: column; gap: 20px; padding: 20px; position: relative; text-align: center; width: 100%; }
.ci-team-avatar { background: #efeff1; border-radius: 50%; display: block; flex: none; height: 96px; overflow: hidden; width: 96px; }
.ci-team-avatar picture { display: contents; }
.ci-team-photo { display: block; height: 100%; object-fit: cover; width: 100%; }
/* Hidden, not transparent: an empty photo is not announced; its disc stays. */
.ci-team-photo[src=""], .ci-team-photo:not([src]) { visibility: hidden; }
.ci-team-name { display: block; font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 0; max-width: 100%; overflow-wrap: anywhere; }
/* Chromium paints a 1.5px box as 2px: the rule is a 2px box, its top 3/4 green. */
.ci-team-name::after { background: linear-gradient(#0c866a 75%, transparent 0); content: ''; display: block; height: 2px; margin: 2px 0 -.5px; }
/* v4 (0459): only the name is the link; its focus ring goes round the card (the Focus variant), covering nothing.
   Its 11px pads, out of flow, make the 44px hit area round the name's 22px line (DREAM-756). */
.ci-team-name-link { color: inherit; display: block; margin: -11px 0; padding: 11px 0; text-decoration: none; text-underline-offset: 1.5px; }
.ci-team-name-link:focus-visible { outline: none; }
.ci-team-name-link:focus-visible::after { border-radius: 8px; content: ''; inset: -3px; outline: 2px solid #5749dd; outline-offset: 0; pointer-events: none; position: absolute; }
@media (hover: hover) { .ci-team-name-link:hover { color: #0c866a; text-decoration: underline; } }
.ci-team-name-link:active { color: #1b5547; text-decoration: underline; }
/* Figma's 234.53px subtitle reaches 1.265px into each side's padding. */
.ci-team-position { align-self: stretch; font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; margin-inline: -1.265px; overflow-wrap: anywhere; }
/* A drag is no press: one class more than the card's :active rule (0389's tie). */
.ci-team-carousel-track.is-dragging .ci-team-name-link { color: #202224; text-decoration: none; }
.ci-team-carousel-btn { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 50%; bottom: 10px; color: #545658; cursor: pointer; display: flex; height: 48px; justify-content: center; margin: auto 0; padding: 0; position: absolute; top: 5px; width: 48px; z-index: 3; }
.ci-team-carousel-next { right: 12px; }
.ci-team-carousel-prev { left: 12px; }
.ci-team-carousel-prev .ci-team-carousel-icon { transform: scaleX(-1); }
.ci-team-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-team-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-team-carousel-btn:not([aria-disabled="true"]):active { background: #0c866a; border-color: #d9d9d9; box-shadow: none; color: #fff; }
/* An arrow at its end: button/icon-lg Disabled's 40% per layer (the focus ring stays whole), and it keeps the click. */
.ci-team-carousel-btn[aria-disabled="true"] { background: rgba(255, 255, 255, .4); border-color: rgba(217, 217, 217, .4); color: rgba(84, 86, 88, .4); cursor: default; }
@media (forced-colors: active) {
  .ci-team-carousel-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}
/* The 54px ring 3px out, round in every browser (an outline is square before Safari 16.4). */
.ci-team-carousel-btn:focus-visible { outline: none; }
.ci-team-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-team-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-team-carousel-btn { display: none; }
}
@media (max-width: 1180px) { .ci-tslide { flex-basis: max(calc((100% - 64px) / 2), min(240px, 100% - 44px)); } }
/* A phone's slide is v5's 272 (home-/about-mobile), 20 apart: 58px of the next in the 350 column (0498). */
@media (max-width: 560px) { .ci-tslide { flex-basis: min(272px, 100% - 44px); } }
.ci-text * { box-sizing: border-box; }
.ci-text { box-sizing: border-box; color: #202224; 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-text { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-text { padding-left: 20px; padding-right: 20px; } }
.ci-text p { font-size: 16px; line-height: 1.5; margin: 0 0 20px; }
/* The body itself, for a value that arrives as bare text (a plain TEXT field
   mapped onto this rich leaf): the same type as a paragraph, not the browser's. */
.ci-text-body { font-size: 16px; line-height: 1.5; }
.ci-text-body > :first-child { margin-top: 0; }
.ci-text-body > :last-child { margin-bottom: 0; }
.ci-text a { color: #5749dd; text-decoration: none; }
.ci-text a:hover { text-decoration: underline; }
.ci-text ul, .ci-text ol { margin: 0 0 20px; padding-left: 24px; }
.ci-text li { margin-bottom: 6px; }
.ci-text strong { font-weight: 700; }
/* Rich-text subheadings (e.g. the about-page mission copy). */
.ci-text h3 { font-size: 22px; letter-spacing: -.02em; margin: 26px 0 14px; }
.ci-text h4 { font-size: 18px; margin: 22px 0 12px; }
/* link/inline Focus: the 2px ring 3px out, r8 round the ring. */
.ci-text a:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
/* text-row: the decor/dot-6 at the column edge on the first line's caps, the words 18px in, rows 44 apart. The
   native marker stays, unpainted, so WebKit keeps the list a list (the callout's way). */
.ci-text-body ul { padding-left: 18px; }
.ci-text-body ul > li { position: relative; }
.ci-text-body ul > li::marker { color: transparent; }
.ci-text-body ul > li::before { -webkit-print-color-adjust: exact; background: linear-gradient(217.12deg, #ffbe04 42.21%, #e03327 230.55%); border-radius: 50%; content: ''; height: 6px; left: -18px; position: absolute; print-color-adjust: exact; top: 8px; width: 6px; }
/* Forced colours repaint the marker whatever its colour: there it is the bullet and the dot goes. */
@media (forced-colors: active) { .ci-text-body ul > li::before { content: none; } }
.ci-text-body li { margin-bottom: 20px; }
.ci-text-body li:last-child { margin-bottom: 0; }
/* Rich-text subheadings: v5's Section Title, 700 24/28. */
.ci-text-body h3 { font-size: 24px; letter-spacing: normal; line-height: 28px; }
/* The format bar's Quote is the NL content/quote: the inside frame takes no room, both
   21px marks sit 20px in from the top corners, the closing one turned round. */
.ci-text blockquote { font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.5; margin: 0 0 20px; overflow-wrap: anywhere; }
/* One frame: a quote nested in it (imported, pasted) reads as quote text in its column. */
.ci-text-body > blockquote { background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #0c866a; padding: 20px 49px; position: relative; }
.ci-text-body > blockquote::before, .ci-text-body > blockquote::after { -webkit-print-color-adjust: exact; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%3E%3Cpath%20d%3D%22M11.812%2010.4995L15.7495%2010.4995C16.4714%2010.4995%2017.062%2011.0901%2017.062%2011.812L17.062%2015.7495C17.062%2016.4714%2016.4714%2017.062%2015.7495%2017.062L11.812%2017.062C11.0901%2017.062%2010.4995%2016.4714%2010.4995%2015.7495L10.4995%2011.812C10.4995%2011.0901%2011.0901%2010.4995%2011.812%2010.4995ZM3.937%2010.4995L7.8745%2010.4995C8.5964%2010.4995%209.187%2011.0901%209.187%2011.812L9.187%2015.7495C9.187%2016.4714%208.5964%2017.062%207.8745%2017.062L3.937%2017.062C3.2151%2017.062%202.6245%2016.4714%202.6245%2015.7495L2.6245%2011.812C2.6245%2011.0901%203.2151%2010.4995%203.937%2010.4995Z%20M13.1256%2010.4995L13.1256%2013.1245C13.1256%2013.8494%2012.538%2014.437%2011.8131%2014.437C11.0882%2014.437%2010.5006%2013.8494%2010.5006%2013.1245L10.5006%2010.4995C10.5006%208.2703%2011.2395%205.9359%2012.8539%204.3215C13.3664%203.809%2014.1973%203.809%2014.7098%204.3215C15.2224%204.8341%2015.2224%205.6649%2014.7098%206.1775C13.6992%207.1882%2013.1256%208.7913%2013.1256%2010.4995ZM5.2506%2010.4995L5.2506%2013.1245C5.2506%2013.8494%204.663%2014.437%203.9381%2014.437C3.2132%2014.437%202.6256%2013.8494%202.6256%2013.1245L2.6256%2010.4995C2.6256%208.2703%203.3645%205.9359%204.9789%204.3215C5.4914%203.809%206.3223%203.809%206.8348%204.3215C7.3474%204.8341%207.3474%205.6649%206.8348%206.1775C5.8242%207.1882%205.2506%208.7913%205.2506%2010.4995Z%22%20fill%3D%22%230C866A%22%2F%3E%3C%2Fsvg%3E") center / 21px 21px no-repeat; content: ''; height: 21px; position: absolute; print-color-adjust: exact; top: 20px; width: 21px; }
.ci-text-body > blockquote::before { left: 20px; }
.ci-text-body > blockquote::after { right: 20px; transform: rotate(180deg); }
/* Its blocks keep the 20px rhythm; the last one, at any depth, leaves the padding alone. */
.ci-text blockquote > * { margin: 0 0 20px; }
.ci-text blockquote :last-child { margin-bottom: 0; }
/* Forced colours and print drop box-shadows: an inset outline keeps the frame in place. */
@media print, (forced-colors: active) { .ci-text-body > blockquote { box-shadow: none; outline: 1px solid #0c866a; outline-offset: -1px; } }
.ci-faq-section * { box-sizing: border-box; }
.ci-faq-section { box-sizing: border-box; color: #202224; 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; }
@media (max-width: 1199.98px) { .ci-faq-section { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-faq-section { padding-left: 20px; padding-right: 20px; } }

.ci-faq-head { align-items: center; display: flex; gap: 16px; margin: 0 0 24px; }
.ci-faq-head:empty { display: none; }
.ci-faq-head::before { align-self: stretch; background: #0c866a; content: ""; flex: none; min-height: 45px; width: 5px; }
.ci-faq-head h2 { font-size: 28px; letter-spacing: -.035em; margin: 0; }
.ci-faq-head-link { color: #202224; font-weight: 800; margin-left: auto; text-decoration: none; white-space: nowrap; }
.ci-faq-head-link::after { color: #0c866a; content: " →"; font-weight: 800; margin-left: 10px; }
/* The title is a flex item: without min-width 0 a long word in it widens the page too (0448). */
.ci-faq-head h2 { min-width: 0; overflow-wrap: break-word; }
/* minmax(0, ...): an auto track grows to a question's longest word and the page scrolls sideways (0448). */
.ci-faq-list { display: grid; grid-template-columns: minmax(0, 1fr); }
/* The ring goes 3px round the row and its divider (an absolute box stands on the padding box, inside that border). */
.ci-faq-item { border-bottom: 1px solid #d9d9d9; position: relative; }
/* The 20px above the divider belongs to the summary when closed, to the answer when open: all of a row toggles. */
.ci-faq-question { align-items: center; cursor: pointer; display: flex; gap: 20px; list-style: none; padding: 16px 20px 36px; }
.ci-faq-item[open] > .ci-faq-question { padding-bottom: 20px; }
.ci-faq-question::-webkit-details-marker { display: none; }
/* Only where the ring can draw: without :has() the browser keeps its own outline. */
@supports selector(:has(*)) { .ci-faq-question:focus-visible { outline: none; } }
.ci-faq-item:has(> .ci-faq-question:focus-visible)::after { border-radius: 8px; content: ''; inset: -3px -3px -4px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
/* heading/h4-trim on the design's h3 (and h4, the same 20px) at every width; another level keeps its own size, untrimmed. */
.ci-faq-question-text { color: #202224; flex: 1; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; min-width: 0; overflow-wrap: break-word; text-decoration-skip-ink: none; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ci-faq-question-text:not(h3):not(h4) { line-height: 1.25; margin: 0; }
h1.ci-faq-question-text { font-size: 32px; line-height: 36px; }
h2.ci-faq-question-text { font-size: 28px; }
h4.ci-faq-question-text { font-size: 20px; }
h5.ci-faq-question-text, h6.ci-faq-question-text { font-size: 18px; }
@media (hover: hover) { .ci-faq-question:hover .ci-faq-question-text { text-decoration-line: underline; } }
.ci-faq-question:active .ci-faq-question-text { text-decoration-line: underline; }
.ci-faq-chevron { color: #545658; display: block; flex: none; height: 24px; width: 24px; }
.ci-faq-chevron-glyph { display: block; height: 100%; width: 100%; }
.ci-faq-item[open] .ci-faq-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .ci-faq-chevron { transition: transform .15s ease; } }
/* body/md-trim: the trim sits on the container, so any number of paragraphs keeps it. */
.ci-faq-answer { color: #202224; font-size: 16px; font-weight: 400; line-height: 24px; margin: -6px 0 -7px; overflow-wrap: break-word; padding: 0 20px 36px; }
.ci-faq-answer > * { margin: 0 0 20px; }
.ci-faq-answer > :last-child { margin-bottom: 0; }
/* h4 is left to the step below: the canvas draws a 560 query after a 1199.98 one, whatever the source order. */
@media (max-width: 560px) { h1.ci-faq-question-text { font-size: 28px; line-height: 32px; } h2.ci-faq-question-text { font-size: 24px; } h5.ci-faq-question-text, h6.ci-faq-question-text { font-size: 17px; } }
/* Below the desktop v5 steps the row down (DREAM-820): the question 18/24, the answer 14/22, both trimmed to their caps. */
@media (max-width: 1199.98px) {
  h3.ci-faq-question-text, h4.ci-faq-question-text { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-faq-answer { font-size: 14px; line-height: 22px; margin: -5px 0 -7px; }
}
.ci-faq-answer a[href] { color: #5749dd; text-decoration: none; }
.ci-faq-answer a[href]:hover { text-decoration: underline; }
.ci-faq-answer a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
#i9qdry4{--ci-fill:50%;}
#icae38q{--ci-fill:20%;}
#ire1vvh{--ci-fill:70%;}
#iym4mpy{--ci-fill:80%;}
#i9mme2j{fill:currentColor;stroke:none;clip-path:inset(0 50% 0 0);}
#i6nqxqr{--ci-fill:80%;}
#ikh4vm4{--ci-fill:90%;}
#idk9t8f{--ci-fill:90%;}
#iqgto6c{--ci-fill:80%;}
#i1cxxt2{fill:currentColor;stroke:none;clip-path:inset(0 90% 0 0);}
#i85lkqp{--ci-fill:10%;}
#i7ge8v9{--ci-fill:10%;}
#im4hi4h{--ci-fill:30%;}
#izhwrff{--ci-fill:40%;}
#ic3t6w5{--ci-fill:60%;}
#iiyzokh{--ci-fill:90%;}
#ippdyiz{--ci-fill:90%;}
#iaiz8xh{--ci-fill:70%;}
#ic9bnd4{--ci-fill:10%;}
#i74rkx4{--ci-fill:10%;}
#io7cod3{--ci-fill:20%;}