.ci-hero * { box-sizing: border-box; }
.ci-hero { 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: 0 28px; width: 100%; }
@media (max-width: 1199.98px) { .ci-hero { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-hero { padding-left: 20px; padding-right: 20px; } }
.ci-hero-card { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 16px; column-gap: 16px; display: grid; grid-template-areas: "logo info offer"; grid-template-columns: 130px minmax(0, 1fr) 280px; overflow: hidden; padding: 19px; }
.ci-hero-logo { align-items: center; background: #202224; border-radius: 50%; display: flex; grid-area: logo; height: 130px; justify-content: center; overflow: hidden; width: 130px; }
.ci-hero-logo picture { display: contents; }
.ci-hero-logo-img { display: block; height: 77.69%; object-fit: contain; width: 77.69%; }
.ci-hero-info { display: flex; flex-direction: column; gap: 8px; grid-area: info; min-width: 0; }
.ci-hero-head { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ci-hero-brand { color: #0c866a; display: block; font-size: 18px; font-weight: 400; line-height: 28px; margin: -7.234375px 0 -7.765625px; }
.ci-hero-bonus { color: #202224; font-size: 18px; font-weight: 700; line-height: 24px; margin: 0; }
.ci-hero-meta { align-items: center; display: flex; gap: 8px; height: 16px; }
.ci-hero-rating-mark-img { display: block; flex: none; height: 16px; object-fit: contain; width: 16px; }
.ci-hero-rating-num { color: #202224; font-size: 14px; font-weight: 700; line-height: 22px; margin: -5.734375px 0 -6.265625px; white-space: nowrap; }
.ci-hero-stars { display: flex; flex: none; }
.ci-hero-star { color: #ffb310; display: block; flex: none; height: 16px; width: 16px; }
.ci-hero-star-solid { fill: none; }
.ci-hero-star-empty { fill: #d9d9d9; }
.ci-hero-star.on .ci-hero-star-solid, .ci-hero-star.mid .ci-hero-star-solid, .ci-hero-star.low .ci-hero-star-solid { fill: currentColor; }
.ci-hero-star.on .ci-hero-star-empty, .ci-hero-star.mid .ci-hero-star-empty, .ci-hero-star.low .ci-hero-star-empty { display: none; }
.ci-hero-licence-box { align-items: center; display: flex; gap: 8px; }
.ci-hero-licence-img { display: block; flex: none; height: 20px; object-fit: contain; width: 20px; }
.ci-hero-licence { color: #202224; font-size: 14px; font-weight: 400; line-height: 22px; }
/* On white, no panel (v5): the plate over the button, each the column's width; no code, the button alone. */
.ci-hero-offer { display: flex; flex-direction: column; gap: 12px; grid-area: offer; min-width: 0; }
/* content/bonus-code, Neutral; Sm ("Code:") once the plate is 232px or narrower. */
/* The plate's own width picks the Size; its height is the label's (and the button's) margin box plus the border. */
.ci-hero-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; align-self: stretch; }
.ci-hero-code-label, .ci-hero-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-hero-code-label-sm { display: none; }
.ci-hero-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-hero-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-hero-code-copy:focus-visible { outline: none; }
.ci-hero-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-hero-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-hero-code:not([data-copied]):hover { background: #ededed; border-color: #545658; }
}
.ci-hero-code:not([data-copied]):active { background: #ededed; border-color: #545658; }
.ci-hero-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-hero-code[data-copied] .ci-hero-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-hero-code[data-copied] .ci-hero-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 18px; line-height: 24px; }
.ci-hero-code[data-copied] .ci-hero-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-hero-code-label, .ci-hero-code-label-sm { font-size: 12px; line-height: 20px; margin: 9px 0 9px 12px; }
  .ci-hero-code .ci-hero-code-label-sm { display: block; }
  .ci-hero-code-label-sm + .ci-hero-code-label { display: none; }
  .ci-hero-code-value { font-size: 16px; line-height: 22px; margin: -5px 0 -6px; margin-left: auto; }
  .ci-hero-code-copy { margin: -3px 0 -3px -8px; padding: 16px 12px 16px 8px; }
  .ci-hero-code[data-copied] .ci-hero-code-value[data-copied-label]:not([data-copied-label=''])::after { font-size: 16px; line-height: 22px; }
}
/* button/primary, w fill: 48 high, 24 aside; a min-height so a lengthened label wraps. */
.ci-hero-visit { align-items: center; align-self: stretch; background: #0c866a; border-radius: 4px; color: #fff; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 48px; min-width: 0; padding: 12px 24px; position: relative; text-align: center; text-decoration: none; }
.ci-hero-visit:hover { background: #0d9070; }
.ci-hero-visit:active { background: #1b5547; }
.ci-hero-visit:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ci-hero-visit:focus-visible::after { border: 2px solid #5749dd; border-radius: 11px; content: ""; inset: -7px; position: absolute; }
.ci-hero-visit-label { font-size: 18px; font-weight: 700; line-height: 24px; margin: -5.234375px 0 -5.765625px; }
.ci-hero-visit-arrow { display: block; fill: currentColor; flex: none; height: 12px; width: 12px; }
@media (max-width: 900px) {
  .ci-hero-card { align-items: start; column-gap: 12px; grid-template-areas: "logo info" "offer offer"; grid-template-columns: 96px minmax(0, 1fr); row-gap: 16px; }
  .ci-hero-logo { height: 96px; width: 96px; }
}
@media (min-width: 561px) and (max-width: 900px) {
  /* Tablet: the plate and the button share the row, half each (both grow); a lone button takes it.
     A 50% basis, not 0: a 0 basis floors at each box's padding, and the button's is 46px wider. */
  .ci-hero-offer { flex-direction: row; }
  /* The plate keeps its 48px when a long label wraps the button (PR #571 R1.6). */
  .ci-hero-code { align-self: center; flex: 1 1 50%; }
  .ci-hero-visit { flex: 1 1 50%; }
}
@media (max-width: 560px) {
  /* Mobile: name, bonus and rating beside the logo; under them, full width, each licence row, then the
     offer, in auto rows (no shared area), 16px apart as their own margins (PR #571 R1.8). */
  .ci-hero-card { grid-template-areas: "logo head"; grid-template-columns: 72px minmax(0, 1fr); padding: 15px; row-gap: 0; }
  .ci-hero-logo { height: 72px; width: 72px; }
  .ci-hero-info { display: contents; }
  .ci-hero-head { grid-area: head; }
  .ci-hero-licence-box { grid-column: 1 / -1; margin-top: 16px; }
  .ci-hero-offer { grid-area: auto / 1 / auto / -1; margin-top: 16px; }
}
.ci-ntabs * { box-sizing: border-box; }
.ci-ntabs { 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 + 40px); padding: 20px 20px 0; width: 100%; }
@media (max-width: 1199.98px) { .ci-ntabs { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-ntabs { padding-left: 20px; padding-right: 20px; } }
.ci-ntabs-bar { display: flex; margin: -3px -3px -2px; overflow-x: auto; padding: 3px; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; box-shadow: inset 0 -1px #d9d9d9; padding-bottom: 3px; }
.ci-ntabs-bar::-webkit-scrollbar { display: none; }
.ci-ntab { border-radius: 3px; box-sizing: border-box; color: #545658; display: block; flex: none; font-size: 14px; font-weight: 700; height: 48px; letter-spacing: 0; line-height: 22px; padding: 11px 16px 9px; position: relative; text-decoration: none; white-space: nowrap; }
.ci-ntab::after { content: ''; left: 16px; position: absolute; right: 16px; top: 48px; }
@media (hover: hover) { .ci-ntab:hover { color: #202224; } }
.ci-ntab[aria-current="location"] { color: #202224; }
.ci-ntab[aria-current="location"]::after { border-top: 3px solid #5749dd; }
.ci-ntab:active { color: #1b5547; }
.ci-ntab:focus-visible { outline: 2px solid #5749dd; outline-offset: 1px; }
/* ---- Pinned tab bar (DREAM-555) ---- */
@media (min-width: 1181px) and (min-height: 480px) {
  html:not([data-editor-canvas]) .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab),
  html[data-editor-preview] .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab) { background: #fff; position: sticky; top: calc(var(--ci-header-h, 0px) - 20px); z-index: 50; }
  html:not([data-editor-canvas]) .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab) .ci-ntab,
  html[data-editor-preview] .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab) .ci-ntab { line-height: 19px; scroll-margin-top: calc(-1 * (var(--ci-ntabs-h, 0px) + 12px)); }
  html:not([data-editor-canvas]):has(.ci-page-article > .ci-ntabs:not(.ci-mobile-only) > .ci-ntabs-bar > .ci-ntab),
  html[data-editor-preview]:has(.ci-page-article > .ci-ntabs:not(.ci-mobile-only) > .ci-ntabs-bar > .ci-ntab) { --ci-ntabs-h: 48px; scroll-padding-top: calc(var(--ci-header-h, 0px) + var(--ci-ntabs-h) + 12px); }
}
/* ---- Pinned tab bar, NL 49px (DREAM-672) ---- */
@media (min-width: 1181px) and (min-height: 480px) {
  html:not([data-editor-canvas]) .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab),
  html[data-editor-preview] .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab) { background: #fff; position: sticky; top: calc(var(--ci-header-h, 0px) - 20px); z-index: 50; }
  html:not([data-editor-canvas]) .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab) .ci-ntab,
  html[data-editor-preview] .ci-page-article > .ci-ntabs:not(.ci-mobile-only):has(> .ci-ntabs-bar > .ci-ntab) .ci-ntab { line-height: 22px; scroll-margin-top: calc(-1 * (var(--ci-ntabs-h, 0px) + 12px)); }
  html:not([data-editor-canvas]):has(.ci-page-article > .ci-ntabs:not(.ci-mobile-only) > .ci-ntabs-bar > .ci-ntab),
  html[data-editor-preview]:has(.ci-page-article > .ci-ntabs:not(.ci-mobile-only) > .ci-ntabs-bar > .ci-ntab) { --ci-ntabs-h: 49px; scroll-padding-top: calc(var(--ci-header-h, 0px) + var(--ci-ntabs-h) + 12px); }
}
.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-prc * { box-sizing: border-box; }
.ci-prc { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-prc { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-prc { padding-left: 20px; padding-right: 20px; } }
/* v5: the meters centred on the lists, which start level with each other (0492). Phones stack, 20 apart. */
.ci-prc-cols { align-items: center; display: flex; gap: 20px; }
.ci-prc-lists { align-items: flex-start; display: flex; flex: 1 1 0; gap: 20px; min-width: 0; }
.ci-prc-col { display: flex; flex: 1; flex-direction: column; min-width: 0; }
/* No rows on publish: no caption over an empty list. The canvas keeps an empty bound list
   (its data-bind-list-field, stripped at publish) for its add-first "+" (PR #571 R1.1). */
.ci-prc-col:not(:has(.ci-prc-item)):not(:has([data-bind-list-field])) { display: none; }
/* Neither list drawn: no empty row before the meters, which then take it. */
.ci-prc-lists:not(:has(.ci-prc-item)):not(:has([data-bind-list-field])) { display: none; }
.ci-prc-list { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; min-width: 0; padding: 0; }
.ci-prc-pro { background: #effbf7; }
.ci-prc-con { background: #fee5e6; }
.ci-prc-item { align-items: flex-start; border-radius: 4px; color: #202224; display: flex; font-size: 14px; font-weight: 400; gap: 8px; line-height: 20px; min-height: 32px; padding: 6px 12px; }
.ci-prc-dot { align-items: center; display: flex; flex: none; height: 16px; justify-content: center; margin-top: 2px; width: 16px; }
.ci-prc-dot-pro { color: #5bd73c; }
.ci-prc-dot-con { color: #e24e3e; }
.ci-prc-dot svg { fill: currentColor; height: 16px; width: 16px; }
.ci-prc-text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.ci-prc-ratings { display: flex; flex: 0 1 calc((100% - 40px) * 466 / 1160); flex-direction: column; min-width: 0; }
.ci-prc-cols:not(:has(.ci-prc-item)):not(:has([data-bind-list-field])) .ci-prc-ratings { flex-grow: 1; }
.ci-prc-rating { border-left: 2px solid #d9d9d9; display: flex; flex-direction: column; min-width: 0; padding: 0 8px; }
.ci-prc-rating-label { color: #202224; display: block; font-size: 14px; font-weight: 700; line-height: 22px; padding: 7px 8px 5px; }
.ci-prc-bar { display: flex; gap: 4px; height: 9px; min-width: 0; }
/* NL rating/bar: ratingCellsCss(p, { height: 9, radius: 2, ... }) as PR #468 has it,
   plus the .part fallback; folded once both land (BACKLOG). */
.ci-prc-cell { background: #d9d9d9; border-radius: 2px; display: block; flex: 1; height: 9px; min-width: 0; }
.ci-prc-cell.on { --ci-cell: #5bd73c; background: var(--ci-cell); }
.ci-prc-cell.mid { --ci-cell: #ffb310; background: var(--ci-cell); }
.ci-prc-cell.low { --ci-cell: #e24e3e; background: var(--ci-cell); }
.ci-prc-cell.part { background: linear-gradient(90deg, var(--ci-cell, #d9d9d9) var(--ci-fill, 0%), #d9d9d9 var(--ci-fill, 0%)); }
/* Block modifier (settings.common.cssClass): pros/cons only, no rating bars —
   the slot-review mock shows just the two lists. */
.ci-prc-no-ratings .ci-prc-ratings { display: none; }
/* No category rated (its meters dropped, 0467): the two lists take the row. */
.ci-prc-ratings:not(:has(.ci-prc-bar)) { display: none; }
/* Tablets (v5 casino-review-tablet): Voordelen | Nadelen 24 apart, the meters full width 24 under them. */
@media (max-width: 1199.98px) {
  .ci-prc-cols { align-items: stretch; flex-direction: column; gap: 24px; }
  .ci-prc-lists { flex: none; gap: 24px; }
  .ci-prc-ratings { flex: none; }
}
@media (max-width: 560px) {
  .ci-prc-cols { gap: 20px; }
  .ci-prc-lists { align-items: stretch; flex-direction: column; gap: 20px; }
}
.ci-itable * { box-sizing: border-box; }
.ci-itable { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-itable { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-itable { padding-left: 20px; padding-right: 20px; } }
/* The facts in v5's white panel, its 1px #D9D9D9 inside the 16 pad; two columns down to the phone, there one, 20 apart.
   On the table itself, so an imported table (the `table` hint's) sits in the panel too. */

/* Keyed to the ELEMENTS as well as the row classes. The casino/game fact rows
   are a real table (<tr>/<th scope="row">/<td>) and an imported table rendered
   by the `table` hint emits exactly that markup with no classes, so it
   inherits this look unchanged. See block-transform KNOWLEDGE.md. */
/* The label is the design's plain text cell (no icon, 0429); a value cell lays out chips. */

.ci-itable table { grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; padding: 15px; border-collapse: collapse; display: grid; gap: 16px; width: 100%; }
.ci-itable thead, .ci-itable tbody { display: contents; }
.ci-itable tr { align-items: center; background: #f3f2ff; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
.ci-itable th { color: #202224; flex: none; font-size: 16px; font-weight: 400; line-height: 24px; overflow-wrap: anywhere; padding: 0; text-align: left; width: 180px; }
.ci-itable td { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border-radius: 4px; color: #202224; flex: 1 1 0; font-size: 16px; font-weight: 400; line-height: 24px; min-height: 40px; min-width: min(120px, 100%); overflow-wrap: anywhere; padding: 8px 12px; text-align: left; }
@media (max-width: 1199.98px) {
  .ci-itable tr { align-items: stretch; flex-direction: column; }
  .ci-itable th { font-size: 14px; width: auto; }
  .ci-itable td { font-size: 14px; flex: none; }
}
/* An imported cell's paragraphs: no margins, and stacked in the wrapping value cell. */
.ci-itable th > p { margin: 0; }
.ci-itable td > p { flex: 1 0 100%; margin: 0; }
/* An imported table wider than the label/value pair these sheets are built for
   is presented anyway (the picker never refuses on width): such a row takes the
   full grid width instead of being squeezed into one half. */
.ci-itable tr:has(> *:nth-child(3)) { grid-column: 1 / -1; }
.ci-itable tr:has(> *:nth-child(3)) th { width: auto; flex: 1 1 0; }
/* TWO COLUMNS BY DEFAULT — the shape both review mocks use, so a table dropped
   on a page looks right without an editor typing a modifier class (it did not:
   a fresh placement carries no settings, and the pairs came out in one column).
   Modifiers (settings.common.cssClass) are the exceptions: ci-itable-cols-1
   for a narrow column, ci-itable-cols-3 for the guide fact sheet.
   ci-itable-cols-2 stays a valid no-op — placements still store it. */
.ci-itable.ci-itable-cols-1 table { grid-template-columns: 1fr; }
.ci-itable.ci-itable-cols-3 table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .ci-itable.ci-itable-cols-3 table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ci-itable table, .ci-itable.ci-itable-cols-3 table { grid-template-columns: 1fr; row-gap: 20px; }
}
/* Every fact dropped: no empty panel (PR #585 R1.7). */
.ci-itable table:not(:has(tr)) { display: none; }
/* «Sociale media» is its own grey strip under the panel (v5 text-social-media-row): the word left, the discs right. */
.ci-itable-social-row { align-items: center; background: #f3f3f3; border-radius: 8px; display: flex; gap: 10px; justify-content: space-between; margin-top: 32px; min-height: 46px; padding: 8px 20px; }
.ci-itable-social-label { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; min-width: 0; overflow-wrap: anywhere; }
/* NL link/social: 30px discs 8px apart. */
.ci-itable-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ci-itable-social { align-items: center; background: #aaa1ff; border-radius: 50%; display: inline-flex; flex: none; height: 30px; justify-content: center; position: relative; width: 30px; }
.ci-itable-social::before { content: ''; inset: -7px -4px; position: absolute; }
.ci-itable-social:focus-visible { box-shadow: 0 0 0 3px #f3f3f3; outline: 2px solid #5749dd; outline-offset: 5px; }
/* The glyph's own 16px disc (icon/social) is what darkens on hover and press. */
.ci-itable-social-img { background: #aaa1ff; border-radius: 50%; display: block; height: 16px; object-fit: contain; width: 16px; }
.ci-itable-social:hover .ci-itable-social-img { background: #4955dd; }
.ci-itable-social:active .ci-itable-social-img { background: #3d31b8; }
.ci-itable-social-img[src=''], .ci-itable-social-img:not([src]) { display: none; }
/* No linked socials (the repeatable drops the prototype) → hide the whole row. */
.ci-itable-social-row:has(.ci-itable-socials:empty) { display: none; }
/* Block modifier (settings.common.cssClass): hide the social-media row — the
   slot fact table has plain label/value rows only. */
.ci-itable-no-social .ci-itable-social-row { display: none; }
/* An odd number of cards (empty ones are dropped at render) leaves the last one
   alone on its row in the two-column grid — span it full width so it fills the
   row instead of sitting half-empty. Not in one column, nor in the cols-3 grid
   while it has three (PR #476 R2.2: an override after it lost on specificity). */
.ci-itable:not(.ci-itable-cols-1):not(.ci-itable-cols-3) .ci-itable-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 1180px) { .ci-itable-cols-3 .ci-itable-row:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ci-gquote * { box-sizing: border-box; }
.ci-gquote { 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; width: 100%; container: gquote / inline-size; }
@media (max-width: 1199.98px) { .ci-gquote { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gquote { padding-left: 20px; padding-right: 20px; } }
/* The design's 20px padding holds its inside 1px border. */
.ci-gquote-panel { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; gap: 20px; padding: 19px; }
/* Avatar and name/role share one row at every breakpoint; the row hugs the
   name as drawn, capped so a long one cannot squeeze the quote out. */
.ci-gquote-person-row { align-items: center; display: flex; flex: none; gap: 8px; max-width: 50%; }
/* A block, not display: contents: the published <source>s would each take a gap. */
.ci-gquote-person-row picture { display: block; flex: none; }
.ci-gquote-avatar { border-radius: 50%; display: block; flex: none; height: 96px; object-fit: cover; width: 96px; }
/* Not the canvas's empty upload placeholder, whose yellow outline it would grey. */
.ci-gquote-avatar:not(.gjs-plh-image) { filter: grayscale(1); }
.ci-gquote-person { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.ci-gquote-name { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-gquote-role { color: #202224; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; }
.ci-gquote-text { flex: 1; font-size: 16px; font-style: italic; font-weight: 500; line-height: 24px; min-width: 0; }
.ci-gquote-text p { margin: 0 0 20px; }
.ci-gquote-text > :last-child { margin-bottom: 0; }
/* Layout=Mobile on tablets and phones (the v5 page frames); a narrow block (a side rail, 664px of
   section and under) gets the column at any screen width, not a crushed row. */
@container gquote (max-width: 664px) {
  .ci-gquote-panel { align-items: stretch; flex-direction: column; }
  /* The name drops under the photo only when under 100px would be left beside it. */
  .ci-gquote-person-row { flex-wrap: wrap; max-width: none; }
  .ci-gquote-person { flex: 1 1 100px; }
  /* The rule parts person from quote: an unresolved author ships no row (0400). */
  .ci-gquote-person-row + .ci-gquote-text { border-top: 1px solid #d9d9d9; padding-top: 20px; }
  /* No-break spaces: a mark never ends or opens a line on its own. */
  .ci-gquote-text > p:first-child::before { content: '\201C\00A0'; }
  .ci-gquote-text > p:last-child::after { content: '\00A0\201D'; }
}
@media (max-width: 1199.98px) {
  .ci-gquote-panel { align-items: stretch; flex-direction: column; }
  /* The name drops under the photo only when under 100px would be left beside it. */
  .ci-gquote-person-row { flex-wrap: wrap; max-width: none; }
  .ci-gquote-person { flex: 1 1 100px; }
  /* The rule parts person from quote: an unresolved author ships no row (0400). */
  .ci-gquote-person-row + .ci-gquote-text { border-top: 1px solid #d9d9d9; padding-top: 20px; }
  /* No-break spaces: a mark never ends or opens a line on its own. */
  .ci-gquote-text > p:first-child::before { content: '\201C\00A0'; }
  .ci-gquote-text > p:last-child::after { content: '\00A0\201D'; }

  /* The page frames' type (DREAM-831): heading/h4-trim 18/24, label/sm-bold 12/22, 500 italic 14/24. */
  .ci-gquote-name { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-gquote-role { line-height: 22px; margin: -7px 0 -7px; }
  .ci-gquote-text { font-size: 14px; }
}
.ci-gquote a[href] { color: #5749dd; text-decoration: none; }
.ci-gquote a[href]:hover { text-decoration: underline; }
.ci-gquote a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-gpq * { box-sizing: border-box; }
.ci-gpq { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-gpq { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gpq { padding-left: 20px; padding-right: 20px; } }
/* The frame is an inset shadow: Figma's inside stroke takes no room (COMPONENT_GENERATION.md). */
.ci-gpq-panel { align-items: flex-start; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px #0c866a; display: flex; gap: 8px; padding: 20px; }
.ci-gpq-mark { display: block; flex: none; height: 21px; object-fit: contain; width: 21px; }
/* One uploaded glyph serves both ends: the closing mark IS the opening one
   turned around, top-aligned like it, exactly as content/quote draws it. */
.ci-gpq-mark-close { transform: rotate(180deg); }
.ci-gpq-text { flex: 1; font-size: 16px; font-style: italic; font-weight: 500; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
/* Every rich-text block, nested ones too (p in a blockquote or li), keeps the 20px rhythm and the marks' top line. */
.ci-gpq-text > * { margin: 0 0 20px; }
.ci-gpq-text p { margin: 0 0 20px; }
.ci-gpq-text :last-child { margin-bottom: 0; }
/* Forced colours and print drop box-shadows: a real border (inside the same 20px) keeps the frame. */
@media print, (forced-colors: active) { .ci-gpq-panel { border: 1px solid #0c866a; box-shadow: none; padding: 19px; } }
/* v5 tablet and phone frames: 500 italic 14/24 (DREAM-831). */
@media (max-width: 1199.98px) { .ci-gpq-text { font-size: 14px; line-height: 24px; } }
.ci-gpq a[href] { color: #5749dd; text-decoration: none; }
.ci-gpq a[href]:hover { text-decoration: underline; }
.ci-gpq a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-atable * { box-sizing: border-box; }
.ci-atable { 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; }
.ci-atable-body { overflow-x: auto; }
.ci-atable table { border-collapse: collapse; width: 100%; }
.ci-atable td { border: 1px solid #d9d9d9; font-size: 15px; line-height: 1.5; padding: 10px 14px; text-align: left; vertical-align: top; }
.ci-atable th { background: #f3f2ff; border: 1px solid #d9d9d9; font-size: 15px; font-weight: 800; line-height: 1.5; padding: 10px 14px; text-align: left; vertical-align: top; }
.ci-atable th p, .ci-atable td p { margin: 0; }
.ci-atable th p + p, .ci-atable td p + p { margin-top: 8px; }
@media (max-width: 560px) { .ci-atable th, .ci-atable td { font-size: 14px; padding: 8px 10px; } }
@media (max-width: 1199.98px) { .ci-atable { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-atable { padding-left: 20px; padding-right: 20px; } }
.ci-atable a[href] { color: #5749dd; text-decoration: none; }
.ci-atable a[href]:hover { text-decoration: underline; }
.ci-atable a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-gsteps * { box-sizing: border-box; }
.ci-gsteps { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-gsteps { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gsteps { padding-left: 20px; padding-right: 20px; } }
.ci-gsteps { counter-reset: ci-gsteps-r calc(var(--ci-gsteps-start, 1) - 1); }
.ci-gsteps-item { counter-increment: ci-gsteps-r; display: flex; gap: 12px; margin-bottom: 32px; min-height: 40px; position: relative; }
.ci-gsteps-item:last-child { margin-bottom: 0; }
.ci-gsteps-item::before { content: counter(ci-gsteps-r); flex: none; align-items: center; background: #0c866a; border-radius: 20px; color: #fff; display: flex; font-size: 18px; font-weight: 700; height: 40px; justify-content: center; line-height: 24px; width: 40px; }
.ci-gsteps-item:not(:last-child)::after { background: #d9d9d9; bottom: -24px; content: ''; left: 19.5px; position: absolute; top: 48px; width: 1px; }
.ci-gsteps-num { flex: none; height: 40px; object-fit: contain; width: 40px; }
.ci-gsteps[data-numbers="digits"] .ci-gsteps-num { display: none; }
.ci-gsteps-num:not([src]), .ci-gsteps-num[src=""], .ci-gsteps-num.gjs-plh-image { display: none; }
.ci-gsteps-item:has(.ci-gsteps-num[src]:not([src=""]):not(.gjs-plh-image))::before { display: none; }
.ci-gsteps[data-numbers="digits"] .ci-gsteps-item:has(.ci-gsteps-num[src]:not([src=""]):not(.gjs-plh-image))::before { display: flex; }
.ci-gsteps-body { flex: 1 1 auto; min-width: 0; padding-top: 8px; }
.ci-gsteps-title { color: #202224; font-size: 18px; font-weight: 700; line-height: 24px; margin: 0 0 16px; }
.ci-gsteps-title:empty { display: none; }
.ci-gsteps-text { color: #202224; font-size: 16px; font-weight: 400; line-height: 24px; margin: 0; text-align: justify; }
.ci-gsteps-shot, .ci-gsteps .ci-list-figure { margin: 12px 0 0; }
.ci-gsteps-shot picture, .ci-gsteps .ci-list-figure picture { display: block; }
.ci-gsteps-shot-img, .ci-gsteps .ci-list-img { border-radius: 8px; display: block; height: auto; max-width: 100%; }
.ci-gsteps > ul[data-marker], .ci-gsteps > ol[data-marker] { counter-reset: ci-gsteps-n calc(var(--ci-gsteps-start, 1) - 1); display: flex; flex-direction: column; gap: 32px; list-style: none; margin: 0; padding: 0; }
.ci-gsteps > ul[data-marker] > li, .ci-gsteps > ol[data-marker] > li { color: #202224; font-size: 16px; font-weight: 400; line-height: 24px; overflow-wrap: anywhere; position: relative; text-align: justify; }
.ci-gsteps > ul[data-marker] > li p, .ci-gsteps > ol[data-marker] > li p { margin: 0; }
.ci-gsteps > ul[data-marker] > li p + p, .ci-gsteps > ol[data-marker] > li p + p { margin-top: 20px; }
.ci-gsteps > ul[data-marker] > li :is(h2, h3, h4), .ci-gsteps > ol[data-marker] > li :is(h2, h3, h4) { color: #202224; font-size: 18px; font-weight: 700; line-height: 24px; margin: 0 0 16px; }
.ci-gsteps > ol[data-marker="number"] > li, .ci-gsteps > ul[data-marker="image"] > li { counter-increment: ci-gsteps-n; min-height: 40px; padding: 8px 0 0 52px; }
.ci-gsteps > ol[data-marker="number"] > li::before, .ci-gsteps > ul[data-marker="image"] > li::before { content: counter(ci-gsteps-n); left: 0; position: absolute; top: 0; align-items: center; background: #0c866a; border-radius: 20px; color: #fff; display: flex; font-size: 18px; font-weight: 700; height: 40px; justify-content: center; line-height: 24px; width: 40px; }
.ci-gsteps > ol[data-marker="number"] > li:not(:last-child)::after, .ci-gsteps > ul[data-marker="image"] > li:not(:last-child)::after { background: #d9d9d9; bottom: -24px; content: ''; left: 19.5px; position: absolute; top: 48px; width: 1px; }
.ci-gsteps > ul[data-marker="image"] > li > .ci-list-mark { display: none; }
.ci-gsteps > ul[data-marker="bullet"] > li { padding-left: 18px; }
.ci-gsteps > ul[data-marker="bullet"] > li::before { background: linear-gradient(217.12deg, #ffbe04 42.21%, #e03327 230.55%); border-radius: 50%; content: ''; height: 6px; left: 0; position: absolute; top: 9px; width: 6px; }
@media (forced-colors: active) {
  .ci-gsteps-item::before, .ci-gsteps > ol[data-marker="number"] > li::before, .ci-gsteps > ul[data-marker="image"] > li::before { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
  .ci-gsteps-item::after, .ci-gsteps > ol[data-marker="number"] > li::after, .ci-gsteps > ul[data-marker="image"] > li::after { background: CanvasText; forced-color-adjust: none; }
  .ci-gsteps > ul[data-marker="bullet"] > li::before { background: CanvasText; forced-color-adjust: none; }
}
@media print { .ci-gsteps-item::before, .ci-gsteps > ol[data-marker="number"] > li::before, .ci-gsteps > ul[data-marker="image"] > li::before { background: #fff; border: 1px solid #0c866a; color: #0c866a; } }
.ci-gsteps a[href] { color: #5749dd; text-decoration: none; }
.ci-gsteps a[href]:hover { text-decoration: underline; }
.ci-gsteps a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-alist * { box-sizing: border-box; }
.ci-alist { 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 0; width: 100%; }
@media (max-width: 1199.98px) { .ci-alist { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-alist { padding-left: 20px; padding-right: 20px; } }
.ci-alist-body ul, .ci-alist-body ol { font-size: 15px; line-height: 1.5; margin: 0; padding-left: 24px; }
.ci-alist-body ul[data-marker="none"] { list-style: none; padding-left: 0; }
.ci-alist-body li { margin: 0 0 8px; }
.ci-alist-body li:last-child { margin-bottom: 0; }
.ci-alist-body li p { margin: 0; }
/* An item's own picture (unit 0360): under its text, the column's width at most. */
.ci-alist-body .ci-list-figure { margin: 8px 0 0; }
.ci-alist-body .ci-list-figure picture { display: block; }
.ci-alist-body .ci-list-img { border-radius: 8px; display: block; height: auto; max-width: 100%; }
/* The writer's column count (settings.list.columns, unit 0366): down, then across.
   column-width makes the count a maximum, so a rail or a phone gets fewer. The
   indent moves onto each item so its marker stays inside its own column box. */
.ci-alist-body [data-columns] { column-gap: 32px; column-width: 14rem; padding-left: 0; }
.ci-alist-body [data-columns="2"] { column-count: 2; }
.ci-alist-body [data-columns="3"] { column-count: 3; }
.ci-alist-body [data-columns] > li { break-inside: avoid; overflow-wrap: anywhere; }
.ci-alist-body [data-columns]:not([data-marker="none"]) > li { margin-left: 24px; }
@media (max-width: 560px) {
  .ci-alist-body [data-columns] { column-count: 1; }
}
.ci-alist a[href] { color: #5749dd; text-decoration: none; }
.ci-alist a[href]:hover { text-decoration: underline; }
.ci-alist a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-aimg * { box-sizing: border-box; }
.ci-aimg { 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-aimg { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-aimg { padding-left: 20px; padding-right: 20px; } }
.ci-aimg-figure { margin: 0; }
.ci-aimg-img { border-radius: 12px; display: block; height: auto; margin: 0 auto; max-width: 100%; }
.ci-aimg-img[src=""], .ci-aimg-img:not([src]) { display: none; }
.ci-aimg-caption { color: #545658; font-size: 14px; line-height: 1.4; margin-top: 10px; }
/* Full width, v5 (DREAM-831): 850:350 at r12 on desktop, a 120px band below it, the photo cropped.
   :where() keeps it at (0,1,0), so a corner drag's scoped rule wins. */
.ci-aimg-figure[data-width="full"] { padding-bottom: 20px; }
.ci-aimg-figure[data-width="full"] picture { display: block; }
:where(.ci-aimg-figure[data-width="full"]) .ci-aimg-img { aspect-ratio: 850 / 350; border-radius: 12px; max-width: none; object-fit: cover; width: 100%; }
@media (max-width: 1199.98px) { :where(.ci-aimg-figure[data-width="full"]) .ci-aimg-img { aspect-ratio: auto; height: 120px; } }
.ci-prov { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-prov { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-prov { padding-left: 20px; padding-right: 20px; } }
.ci-prov-grid { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.ci-prov-tile { align-items: center; background: #fff; border-radius: 4px; display: flex; height: 70px; justify-content: center; overflow: hidden; position: relative; width: 120px; }
.ci-prov-tile picture { display: block; height: 100%; width: 100%; }
.ci-prov-img { display: block; height: 100%; object-fit: contain; width: 100%; }
.ci-prov-img[src=''], .ci-prov-img:not([src]) { display: none; }
/* Two lines; only a word of 10+ letters breaks, at a syllable with a hyphen where the browser can, else "…" (DREAM-828). */
.ci-prov-name { color: #202224; -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 700; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-line-clamp: 2; line-clamp: 2; line-height: 22px; overflow: hidden; overflow-wrap: normal; padding: 0 8px; text-align: center; text-overflow: ellipsis; }
/* Beside a logo with no alt the name stays the tile's text for a screen reader; a real alt replaces it. */
.ci-prov-tile:has(.ci-prov-img[src]:not([src=''])) .ci-prov-name { clip-path: inset(50%); height: 1px; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.ci-prov-tile:has(.ci-prov-img[src]:not([src=''])[alt]:not([alt=''])) .ci-prov-name { display: none; }

@media (forced-colors: active) { .ci-prov-tile { forced-color-adjust: none; outline: 1px solid CanvasText; outline-offset: -1px; } }
/* v5 casino-review rows: 32 apart on the desktop, 16 on the tablet, 20 on the phone (DREAM-828). */
@media (min-width: 1200px) { .ci-prov-grid { row-gap: 32px; } }
@media (max-width: 560px) { .ci-prov-grid { row-gap: 20px; } }
.ci-pay { 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 + 40px); padding: 20px; width: 100%; }
@media (max-width: 1199.98px) { .ci-pay { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-pay { padding-left: 20px; padding-right: 20px; } }
/* v5 Deposit methods: rows 20 apart at every width, the tiles centred below 1200 (DREAM-828). */
.ci-pay-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.ci-pay-tile { align-items: center; background: #fff; border-radius: 4px; display: flex; height: 70px; justify-content: center; overflow: hidden; position: relative; width: 120px; }
.ci-pay-tile picture { display: block; height: 100%; width: 100%; }
.ci-pay-logo { display: block; height: 100%; object-fit: contain; width: 100%; }
.ci-pay-logo[src=''], .ci-pay-logo:not([src]) { display: none; }
/* Two lines; only a word of 10+ letters breaks, at a syllable with a hyphen where the browser can, else "…" (DREAM-828). */
.ci-pay-name { color: #202224; -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 700; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-line-clamp: 2; line-clamp: 2; line-height: 22px; overflow: hidden; overflow-wrap: normal; padding: 0 8px; text-align: center; text-overflow: ellipsis; }
/* Beside a logo with no alt the name stays the tile's text for a screen reader; a real alt replaces it. */
.ci-pay-tile:has(.ci-pay-logo[src]:not([src=''])) .ci-pay-name { clip-path: inset(50%); height: 1px; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.ci-pay-tile:has(.ci-pay-logo[src]:not([src=''])[alt]:not([alt=''])) .ci-pay-name { display: none; }
@media (max-width: 560px) {
  .ci-pay-tile { height: 40px; width: 70px; }
  .ci-pay-name { font-size: 12px; line-height: 16px; padding: 0 6px; }
}
@media (forced-colors: active) { .ci-pay-tile { forced-color-adjust: none; outline: 1px solid CanvasText; outline-offset: -1px; } }
@media (max-width: 1199.98px) { .ci-pay-grid { justify-content: center; } }
.ci-cbonus-carousel * { box-sizing: border-box; }
.ci-cbonus-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-cbonus-carousel { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-cbonus-carousel { padding-left: 20px; padding-right: 20px; } }
.ci-cbonus-carousel-viewport { position: relative; }
.ci-cbonus-carousel-track { cursor: grab; display: flex; gap: 20px; 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; }
.ci-cbonus-carousel-track::-webkit-scrollbar { display: none; }
.ci-cbonus-carousel-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-cbonus-carousel-track.is-dragging a { pointer-events: none; }
.ci-cbonus-carousel .ci-cbonus-slide { display: flex; flex: 0 0 min(285px, 100%); min-width: 0; scroll-snap-align: start; }
.ci-cbonus-card { align-items: center; background: linear-gradient(178.25deg, #f3f2ff33 1.2%, #f3f2ff 72.98%); border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 20px; position: relative; text-align: center; width: 100%; }
.ci-cbonus-body { align-items: center; display: flex; flex: 1 0 auto; flex-direction: column; gap: 12px; width: 100%; }
.ci-cbonus-foot { align-items: center; display: flex; flex: none; flex-direction: column; gap: 16px; width: 100%; }
/* v5's page frames: #e24e3e to #5e20a9 (angle and stops are 0390's), label and gift white. The title's top cut
   under it: v5 spaces the untrimmed line boxes 12 apart (0494). */
.ci-cbonus-chip { align-items: center; background: linear-gradient(357.3deg, #e24e3e 9%, #5e20a9 235.66%); border-radius: 12px; color: #fff; display: inline-flex; flex: none; margin-bottom: 5px; max-width: 100%; overflow: hidden; padding: 8px 16px; }
.ci-cbonus-chip-img { display: block; flex: none; height: 12px; object-fit: contain; width: 12px; }
.ci-cbonus-chip-gift { display: block; flex: none; height: 12px; width: 12px; }
.ci-cbonus-chip-img[src=""], .ci-cbonus-chip-img:not([src]) { display: none; }
/* The type's own icon, once set, takes the gift's place. On the canvas an empty
   slot keeps GrapesJS's placeholder: double-clicking it uploads the icon. */
.ci-cbonus-chip:has(.ci-cbonus-chip-img[src]:not([src=""])) .ci-cbonus-chip-gift { display: none; }
/* A bonus with no type keeps the chip's row, so its title starts level with its neighbours' (v5 always draws it). */
.ci-cbonus-body:not(:has(> .ci-cbonus-chip))::before { content: ''; display: block; flex: none; height: 28px; margin-bottom: 5px; }
.ci-cbonus-chip-name { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.ci-cbonus-chip-label { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; white-space: nowrap; }
.ci-cbonus-title { font-size: 18px; font-weight: 700; line-height: 24px; overflow-wrap: anywhere; position: relative; width: 100%; }
/* The review link IS the clamp (DREAM-749), so its ring, drawn on the unclipped title, is never cut; bare text clamps
   itself. One rule each: a browser without :has() drops only the bare title's (seeds README, 0455). */
.ci-cbonus-title-link { -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); color: inherit; text-decoration: none; }
.ci-cbonus-title:not(:has(> .ci-cbonus-title-link)) { -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); }
@media (hover: hover) { .ci-cbonus-title-link:hover { color: #0c866a; text-decoration: underline; } }
.ci-cbonus-title-link:active { color: #1b5547; text-decoration: underline; }
.ci-cbonus-title-link:focus-visible { outline: none; }
/* Its hit area at least 44px tall, laid out on the unclipped title like its ring: at most 12px down (the terms' caps
   start there), the rest up into the gap and the chip's glyph-free bottom padding (PR #572 R1.3, R2.2). */
.ci-cbonus-title-link::before { bottom: max(-12px, min(0px, calc(50% - 22px))); content: ''; left: 0; position: absolute; right: 0; top: min(0px, calc(50% - 22px), calc(100% - 32px)); }
/* A 2px border whose inner edge is 3px off the text box: the title's column (not the link's gutter box), and the
   link's lines, which overhang the trimmed title by its two cuts. */
.ci-cbonus-title-link:focus-visible::after { border: 2px solid #5749dd; border-radius: 8px; content: ''; inset: -10px -5px -11px; position: absolute; }
/* The title's bottom cut over the terms, and the terms' own under them: 22 and 26 seen, as drawn (0494). */
.ci-cbonus-text { font-size: 14px; font-weight: 400; line-height: 20px; -webkit-box-orient: vertical; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; margin: -4px -1em -6px; overflow: hidden; padding: 0 1em; width: calc(100% + 2em); margin-bottom: 0; margin-top: 6px; overflow-wrap: anywhere; }
/* Size=Sm at any width; its height is the label's (and the button's) margin box plus the border. */
.ci-cbonus-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-cbonus-code-label, .ci-cbonus-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-cbonus-code-label-sm + .ci-cbonus-code-label { display: none; }
.ci-cbonus-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-cbonus-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-cbonus-code-copy:focus-visible { outline: none; }
.ci-cbonus-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-cbonus-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-cbonus-code:not([data-copied]):hover { background: #ededed; border-color: #545658; }
}
.ci-cbonus-code:not([data-copied]):active { background: #ededed; border-color: #545658; }
.ci-cbonus-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-cbonus-code[data-copied] .ci-cbonus-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-cbonus-code[data-copied] .ci-cbonus-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 16px; line-height: 22px; }
.ci-cbonus-code[data-copied] .ci-cbonus-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-cbonus-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-cbonus-code + .ci-cbonus-nocode { display: none; }
.ci-cbonus-nocode-icon { color: #0c8166; display: block; flex: none; height: 16px; width: 16px; }
.ci-cbonus-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-cbonus-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-cbonus-button:hover { background: #0d9070; }
.ci-cbonus-button:active { background: #1b5547; }
.ci-cbonus-button:focus-visible { box-shadow: 0 0 0 1px #f3f2ff, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-cbonus-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-cbonus-button-arrow { display: block; flex: none; height: 12px; width: 12px; }
.ci-cbonus-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-cbonus-carousel-next { right: 12px; }
.ci-cbonus-carousel-prev { left: 12px; }
.ci-cbonus-carousel-prev .ci-cbonus-carousel-icon { transform: scaleX(-1); }
.ci-cbonus-carousel-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-cbonus-carousel-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-cbonus-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-cbonus-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-cbonus-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-cbonus-carousel-btn:focus-visible { outline: none; }
.ci-cbonus-carousel-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-cbonus-carousel-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1199.98px) {
  .ci-cbonus-carousel-btn { display: none; }
}
@media (max-width: 1199.98px) {
  .ci-cbonus-carousel .ci-cbonus-slide { flex-basis: min(260px, 100% - 44px); }
}
.ci-vlist * { box-sizing: border-box; }
.ci-vlist { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-vlist { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-vlist { padding-left: 20px; padding-right: 20px; } }
/* Element-scoped: applyList emits a class-less ul/ol, so the pill design
   lives on the elements (block-transform KNOWLEDGE.md "The list shape"). */
.ci-vlist-body ul, .ci-vlist-body ol { counter-reset: ci-vlist-n; display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
/* Figma list/bullet-item; a label wrapping to more lines grows the row. A block, not a flex row: an
   item's link or <b> would be a column of its own, so the marker hangs in the padding (0447). */
.ci-vlist-body li { align-content: center; background: #f3f3f3; border-radius: 4px; color: #202224; display: block; font-size: 14px; font-weight: 400; line-height: 20px; min-height: 36px; padding: 4px 12px 2px; overflow: hidden; overflow-wrap: anywhere; position: relative; }
.ci-vlist-body li p { margin: 0; }
/* The canvas's empty-item floor (1.2em) outranks the row's: the count is no longer there to hold it. */
.ci-vlist-body li:empty { min-height: 36px; }
/* Bullet = tone dot on the row's middle, number = tone counter on the content box's, none = bare
   pill. data-tone paints pros green / cons red: the wrapper's block setting, or a per-item mark on
   the li (settings.list.cons), which wins. */
.ci-vlist-body ul[data-marker="bullet"] > li { padding-left: 34px; }
.ci-vlist-body ul[data-marker="bullet"] > li::before { background: #0c866a; border-radius: 50%; content: ""; height: 6px; left: 16px; position: absolute; top: calc(50% - 3px); width: 6px; }
.ci-vlist-body[data-tone="cons"] ul[data-marker="bullet"] > li::before { background: #ba4033; }
.ci-vlist-body ul[data-marker="bullet"] > li[data-tone="cons"]::before { background: #ba4033; }
/* The count's gutter grows with its digits (VLIST_COUNT_WIDTH) at the count of 10 and of 100. */
.ci-vlist-body ol[data-marker="number"] > li { counter-increment: ci-vlist-n; padding-left: 32px; }
.ci-vlist-body ol[data-marker="number"] > li:nth-child(n+10) { padding-left: 40px; }
.ci-vlist-body ol[data-marker="number"] > li:nth-child(n+100) { padding-left: 49px; }
.ci-vlist-body ol[data-marker="number"] > li::before { align-items: center; bottom: 2px; color: #0c866a; content: counter(ci-vlist-n) "."; display: flex; font-weight: 700; left: 12px; position: absolute; top: 4px; }
.ci-vlist-body[data-tone="cons"] ol[data-marker="number"] > li::before { color: #ba4033; }
.ci-vlist-body ol[data-marker="number"] > li[data-tone="cons"]::before { color: #ba4033; }
/* Horizontal (Figma 2591:5242): pros left, cons right, equal columns, 20px
   gutter. Dense packing backfills the cons column from row 1, so each side
   stacks from the top; a row hugs its own height beside a taller one. */
.ci-vlist-body ul[data-layout="horizontal"], .ci-vlist-body ol[data-layout="horizontal"] { align-items: start; column-gap: 20px; display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr 1fr; row-gap: 14px; }
/* Two columns is the stored setting, not a count of the tones: an all-pros
   list in Two draws its right half empty rather than rearranging itself when
   the first con is marked (ADR-1, PRODUCT_DECISIONS). */
.ci-vlist-body [data-layout="horizontal"] > li { grid-column: 1; }
.ci-vlist-body [data-layout="horizontal"] > li[data-tone="cons"] { grid-column: 2; }
/* Numbering restarts per column, or the cons side would continue the pros
   count (1,2,3 | 4,5) instead of reading as its own list. */
.ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] { counter-reset: ci-vlist-n ci-vlist-c; }
.ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"] { counter-increment: ci-vlist-c; }
.ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]::before { content: counter(ci-vlist-c) "."; }
/* And the gutter follows the column's own count, so a side of nine keeps the narrow one: the
   exact complement of the one-column query below, so no fractional width falls between them. */
@media not all and (max-width: 900px) {
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li:nth-child(n+10) { padding-left: 32px; }
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li:not([data-tone="cons"]):nth-child(n+10 of :not([data-tone="cons"])), .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]:nth-child(n+10 of [data-tone="cons"]) { padding-left: 40px; }
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li:not([data-tone="cons"]):nth-child(n+100 of :not([data-tone="cons"])), .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]:nth-child(n+100 of [data-tone="cons"]) { padding-left: 49px; }
}
@media (max-width: 900px) {
  .ci-vlist-body ul[data-layout="horizontal"], .ci-vlist-body ol[data-layout="horizontal"] { grid-template-columns: 1fr; }
  .ci-vlist-body [data-layout="horizontal"] > li, .ci-vlist-body [data-layout="horizontal"] > li[data-tone="cons"] { grid-column: 1; }
  /* One column again, so one count again — the per-column counter would
     repeat itself down the stack (1. 1. 2. 2.). */
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"] { counter-increment: ci-vlist-n; }
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]::before { content: counter(ci-vlist-n) "."; }
}
.ci-vlist a[href] { color: #5749dd; text-decoration: none; }
.ci-vlist a[href]:hover { text-decoration: underline; }
.ci-vlist a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-gcallout * { box-sizing: border-box; }
.ci-gcallout { 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; width: 100%; }
@media (max-width: 1199.98px) { .ci-gcallout { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gcallout { padding-left: 20px; padding-right: 20px; } }
/* NL content/fact: a 1px frame round the lavender panel, 20px apart; the mark
   has its own column beside the title and the body (seeds README, 0398). */
.ci-gcallout-panel { background: #fff; border: 1px solid #5749dd; border-radius: 12px; padding: 19px; }
.ci-gcallout-inner { background: linear-gradient(180deg, #f3f2ff57 0%, #eeedfb 73.64%); border-radius: 12px; column-gap: 20px; display: grid; grid-template-areas: 'mark title' 'mark body'; grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 20px; }
.ci-gcallout-mark-img { display: block; grid-area: mark; height: 50px; object-fit: contain; object-position: top; width: 25px; }
/* The title owns the 20px over the body, so a cleared one takes it along (and the
   canvas's placeholder box for an empty leaf keeps its own room). */
.ci-gcallout-title { align-self: start; font-size: 20px; font-weight: 700; grid-area: title; line-height: 28px; margin: -6.484375px 0 12.484375px; overflow-wrap: break-word; }
.ci-gcallout-title:empty { display: none; }
/* body/md-trim, justified (v5, DREAM-831): the panel's 20px pad and the title's 20 meet the glyphs, not the line box. */
.ci-gcallout-body { align-self: start; font-size: 16px; grid-area: body; line-height: 24px; margin: -5.984375px 0 -7.015625px; overflow-wrap: break-word; text-align: justify; }
.ci-gcallout-body > * { margin: 0 0 20px; }
.ci-gcallout-body > ul { padding-left: 24px; }
.ci-gcallout-body > ol { padding-left: 24px; }
.ci-gcallout-body li { margin: 0; position: relative; }
/* Inside an item or a quote, a paragraph or a nested list keeps the lines flush. */
.ci-gcallout-body li > p { margin: 0; }
.ci-gcallout-body blockquote > p { margin: 0; }
.ci-gcallout-body li > ul { margin: 0; padding-left: 24px; }
.ci-gcallout-body li > ol { margin: 0; padding-left: 24px; }
/* The native disc stays for list semantics, unpainted; the design's 6px disc is a
   border (kept in print and forced colours), centred 12px in, 0.75px under mid-line. */
.ci-gcallout-body ul > li::marker { color: transparent; }
.ci-gcallout-body ul > li::before { border: 3px solid; border-radius: 50%; content: ''; left: -15px; position: absolute; top: 9.75px; top: calc(0.5lh - 2.25px); }
.ci-gcallout-body > :last-child { margin-bottom: 0; }
/* content/fact-mobile-inner: the mark and the title share a row, the body runs
   full width under both, on tablets and phones (the v5 page frames). */
@media (max-width: 1199.98px) {
  .ci-gcallout-inner { grid-template-areas: 'mark title' 'body body'; grid-template-rows: auto auto; }
  /* The page frames' type there: heading/h4-trim 18/24, an untrimmed body/sm 14/22 (DREAM-831). */
  .ci-gcallout-title { font-size: 18px; line-height: 24px; margin: -5.234375px 0 -5.765625px; }
  .ci-gcallout-body { font-size: 14px; line-height: 22px; margin: 20px 0 0; }
}
.ci-gcallout a[href] { color: #5749dd; text-decoration: none; }
.ci-gcallout a[href]:hover { text-decoration: underline; }
.ci-gcallout a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-cc * { box-sizing: border-box; }
.ci-cc { 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-cc { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-cc { padding-left: 20px; padding-right: 20px; } }

.ci-cc-viewport { container: cc / inline-size; position: relative; }
/* The 5px padding keeps the card's focus ring inside the scroller's clip; the
   -5px margin keeps the cards on the content edge (as the guide carousel does). */
.ci-cc-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-left: 5px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.ci-cc-track::-webkit-scrollbar { display: none; }
.ci-cc-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.ci-cc-track.is-dragging a { pointer-events: none; }
/* min-width 0: the slide takes its peek width under 375 rather than its card's content width (DREAM-729). */
.ci-cc-slide { display: flex; flex: 0 0 350px; list-style: none; max-width: 100%; min-width: 0; scroll-snap-align: start; }
/* v5 Mobile card/casino: pad 16 16 28 with the 1px border inside, 28 under the button with no toggle (DREAM-811). */
.ci-cc-card { background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; padding: 15px 15px 27px; position: relative; width: 100%; }

/* The v5 Mobile card/casino: a 72 disc and 24 crown, the title column top-aligned beside it (change doc item 6). */
.ci-cc-head { align-items: flex-start; display: flex; gap: 16px; }
.ci-cc-logo-wrap { display: block; flex: none; height: 72px; position: relative; width: 72px; }
.ci-cc-logo-disc { align-items: center; background: #202224; border-radius: 50%; display: flex; height: 72px; justify-content: center; width: 72px; }
.ci-cc-logo-img { display: block; height: 60px; object-fit: contain; width: 60px; }
.ci-cc-logo-badge { display: block; height: 24px; left: 52.5px; position: absolute; top: 52.5px; width: 24px; }
.ci-cc-logo-badge-img { display: block; height: 100%; object-fit: contain; width: 100%; }
.ci-cc-logo-badge-img[src=''], .ci-cc-logo-badge-img:not([src]) { display: none; }
/* The crown marks the row's first two cards only (v5); a card alone is no row. */
.ci-cc-slide:nth-child(n+3) .ci-cc-logo-badge, .ci-cc-slide:only-child .ci-cc-logo-badge { display: none; }
.ci-cc-title { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; }
.ci-cc-name { display: block; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.984375px 0 -6.015625px; }
.ci-cc-name-link { color: #0c866a; text-decoration: none; }
.ci-cc-name-link::after { border-radius: 12px; content: ''; inset: 0; position: absolute; z-index: 1; }
/* Pointer states only: a touch screen would keep the last tapped card hovered. */
@media (hover: hover) {
  .ci-cc-card:hover .ci-cc-name-link { text-decoration: underline; }
  .ci-cc-track:not(.is-dragging) .ci-cc-name-link:active { color: #0d9070; text-decoration: underline; }
}
.ci-cc-name-link:focus-visible { outline: none; }
/* The ring 3-5px outside the card's 1px border (DREAM-689): -6 off the padding box. */
.ci-cc-name-link:focus-visible::after { border-radius: 10px; inset: -6px; outline: 2px solid #5749dd; outline-offset: -2px; }
/* Three lines at most (v5); with no bonus the rating keeps a one-line bonus's place (change doc item 6). */
.ci-cc-bonus { -webkit-box-orient: vertical; display: -webkit-box; font-size: 20px; font-weight: 700; hyphens: auto; -webkit-line-clamp: 3; line-clamp: 3; line-height: 28px; margin: -6.484375px 0 -7.515625px; overflow: hidden; overflow-wrap: anywhere; }
.ci-cc-title:not(:has(.ci-cc-bonus)) .ci-cc-rating { margin-top: 22px; }
/* The score's middle on the stars' middle (the user, 2026-10-07; the export top-aligns the row). */
.ci-cc-rating { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ci-cc-score { align-items: center; color: #202224; display: flex; font-size: 14px; font-weight: 400; gap: 4px; line-height: 20px; }
/* The NL mark art is a 24px square with the glyph 20px wide; the margins trim
   that padding so the glyph lands at the card's 14.45px. */
.ci-cc-score-mark-img { display: block; flex: none; height: 17.34px; margin: -3.545px -1.445px; object-fit: contain; width: 17.34px; }
/* The 14/20 score keeps text-box: capTrimMargin lands it 1px high (BACKLOG, 0385). */
.ci-cc-score-num { text-box: trim-both cap alphabetic; }
.ci-cc-stars { display: flex; height: 15px; }
.ci-cc-star { color: #ffb310; display: block; flex: none; height: 16px; margin-top: -.5px; width: 16px; }
.ci-cc-star-line { fill: #d9d9d9; }
.ci-cc-star-fill { display: none; fill: #ffb310; }
.ci-cc-star.on .ci-cc-star-fill, .ci-cc-star.mid .ci-cc-star-fill, .ci-cc-star.low .ci-cc-star-fill { display: inline; }
.ci-cc-star.on .ci-cc-star-line, .ci-cc-star.mid .ci-cc-star-line, .ci-cc-star.low .ci-cc-star-line { display: none; }


/* The offer sits at the foot, so it lines up across slides of unequal height; no Review since v5 (item 6). */
.ci-cc-offer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
/* The plate's own width picks the Size; its height is the label's (and the button's) margin box plus the border. */
.ci-cc-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-cc-code-label, .ci-cc-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-cc-code-label-sm { display: none; }
.ci-cc-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-cc-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-cc-code-copy:focus-visible { outline: none; }
.ci-cc-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-cc-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-cc-code:not([data-copied]):hover { background: #ededed; border-color: #545658; }
}
.ci-cc-code:not([data-copied]):active { background: #ededed; border-color: #545658; }
.ci-cc-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-cc-code[data-copied] .ci-cc-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-cc-code[data-copied] .ci-cc-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 18px; line-height: 24px; }
.ci-cc-code[data-copied] .ci-cc-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-cc-code-label, .ci-cc-code-label-sm { font-size: 12px; line-height: 20px; margin: 9px 0 9px 12px; }
  .ci-cc-code .ci-cc-code-label-sm { display: block; }
  .ci-cc-code-label-sm + .ci-cc-code-label { display: none; }
  .ci-cc-code-value { font-size: 16px; line-height: 22px; margin: -5px 0 -6px; margin-left: auto; }
  .ci-cc-code-copy { margin: -3px 0 -3px -8px; padding: 16px 12px 16px 8px; }
  .ci-cc-code[data-copied] .ci-cc-code-value[data-copied-label]:not([data-copied-label=''])::after { font-size: 16px; line-height: 22px; }
}
.ci-cc-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-cc-visit:hover { background: #0d9070; } }
.ci-cc-visit:active { background: #1b5547; }
.ci-cc-visit:focus-visible { box-shadow: 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-cc-visit-cta { min-width: 0; overflow-wrap: anywhere; margin: -5.234375px 0 -5.765625px; }
.ci-cc-visit-icon { display: block; flex: none; height: 12px; width: 12px; }

.ci-cc-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-cc-next { right: 12px; }
.ci-cc-prev { left: 12px; }
.ci-cc-prev .ci-cc-icon { transform: scaleX(-1); }
.ci-cc-btn[hidden] { display: none; }
@media (hover: hover) {
  .ci-cc-btn:not([aria-disabled="true"]):hover { border-color: #545658; box-shadow: 0 4px 12px rgba(0, 0, 0, .16); }
}
.ci-cc-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-cc-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-cc-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-cc-btn:focus-visible { outline: none; }
.ci-cc-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 50%; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-cc-icon { display: block; flex: none; height: 20px; width: 20px; }
@media (max-width: 1180px) {
  .ci-cc-btn { display: none; }
}
/* A desktop row holds three cards exactly (v5 authors-desktop: 386.7 at a 406.7 step), the arrow over the third; by the
   row's own width, so a narrower column keeps the scrolling 350s (R1.3), and before the peek, which keeps tablets (R2.1). */
@container cc (min-width: 1090px) { .ci-cc-slide { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 1180px) { .ci-cc-slide { flex-basis: min(350px, 100% - 44px); } }
.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; }
.ci-abio * { box-sizing: border-box; }
.ci-abio { 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 + 40px); padding: 20px; width: 100%; }
@media (max-width: 1199.98px) { .ci-abio { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-abio { padding-left: 20px; padding-right: 20px; } }
.ci-abio-card { align-items: center; background: #f3f3f3; border-radius: 12px; display: flex; gap: 20px; padding: 16px; }
.ci-abio-photo { background: #d9d9d9; border-radius: 50%; display: flex; flex: none; overflow: hidden; }
.ci-abio-photo-img { display: block; height: 96px; object-fit: cover; width: 96px; }
.ci-abio-photo-img[src=""], .ci-abio-photo-img:not([src]) { opacity: 0; }
.ci-abio-body { display: flex; flex: 1; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; overflow-wrap: break-word; padding: 0; }
/* The name, title and bio trim on Chromium's whole pixels (capTrimCuts) at every width; the separator 8 under the name's baseline (PR #590 R2.3). */
.ci-abio-name { align-self: flex-start; border: 0; color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 0; max-width: 100%; padding: 0; }
.ci-abio-name::after { background: #0c866a; content: ''; display: block; height: 1.5px; margin-top: 2px; }
.ci-abio-name-link { border-radius: 4px; color: inherit; text-decoration: none; }
.ci-abio-name-link:hover { color: #1b5547; }
.ci-abio-name-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 0; }
.ci-abio-title, .ci-abio-text { font-size: 14px; line-height: 20px; margin: -4px 0 -6px; }
.ci-abio-title { color: #545658; }
.ci-abio-text { color: #202224; }
.ci-abio-text > * { margin: 0; }
.ci-abio-text > * + * { margin-top: 15px; }
/* Every v5 tablet and phone frame draws the byline's Compact layout (0498): the separator purple, the name 700 14/22,
   the title and bio 14/18 (PR #590 R1.5). */
@media (max-width: 1199.98px) {
  .ci-abio-name { font-size: 14px; margin: -5px 0 0; }
  .ci-abio-name::after { background: #5749dd; margin-top: 1px; }
  .ci-abio-title, .ci-abio-text { line-height: 18px; margin: -3px 0 -5px; }
}
#imhsljv{fill:currentColor;stroke:none;clip-path:inset(0 30% 0 0);}
#igyerhi{--ci-fill:50%;}
#is57afr{--ci-fill:50%;}
#i5qjm7m{--ci-fill:80%;}
#ii84n5t{--ci-fill:80%;}
#imswfn1{fill:currentColor;stroke:none;clip-path:inset(0 90% 0 0);}
#ih86g9k{fill:currentColor;stroke:none;clip-path:inset(0 50% 0 0);}
#izo74el{fill:currentColor;stroke:none;clip-path:inset(0 90% 0 0);}
#ivjswgj{fill:currentColor;stroke:none;clip-path:inset(0 10% 0 0);}
.pb-9e995fc2-f6d0-4222-afd7-b5f0fd22d46a .ci-aimg-img{width:720px;}