.ci-spn * { box-sizing: border-box; }
.ci-spn { 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); width: 100%; }
/* No specificity: a rail's own inset (page-columns) wins in whichever order the two load. */
/* 32 under the crumbs as drawn; 4 below, the next block's own 20px top and line box making the drawn 32 to the H1. */
:where(.ci-spn) { padding: 32px 28px 4px; }
@media (max-width: 1199.98px) { .ci-spn { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-spn { padding-left: 20px; padding-right: 20px; } }
.ci-spn-box { background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; display: block; overflow: clip; }
.ci-spn-box:has(> .ci-spn-head:focus-visible) { outline: 2px solid #5749dd; outline-offset: 1px; }
/* The 49px row: the box's 1px border is part of it, so 47 inside and 15 to the label. */
.ci-spn-head { align-items: center; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; list-style: none; min-height: 47px; padding: 0 15px; }
.ci-spn-head::-webkit-details-marker { display: none; }
.ci-spn-head:focus-visible { outline: none; }
@media (hover: hover) { .ci-spn-head:hover { background: #ededed; } }
.ci-spn-head:active { background: #ededed; }
.ci-spn-box:has(> .ci-spn-head:active) { border-color: #0c866a; }
.ci-spn-label { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; min-width: 0; overflow-wrap: anywhere; }
.ci-spn-title { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; min-width: 0; overflow-wrap: anywhere; display: none; }
.ci-spn-chevron { color: #202224; display: block; flex: none; height: 20px; width: 20px; }
.ci-spn-chevron-glyph { display: block; height: 100%; width: 100%; }
.ci-spn-box[open] .ci-spn-chevron { transform: rotate(180deg); }
.ci-spn-list { align-items: flex-start; display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0 15px 15px; }
.ci-spn-item { margin: 0; max-width: 100%; padding: 0; }
.ci-spn-link { border-radius: 5px; color: #0c866a; display: inline-block; font-size: 16px; font-weight: 400; line-height: 24px; max-width: 100%; overflow-wrap: anywhere; padding-left: 20px; position: relative; text-decoration: none; vertical-align: top; }
.ci-spn-link::before { background-color: #0c866a; content: ''; height: 12px; left: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.22781%201.22781C4.53155%200.924064%205.0239%200.924064%205.32764%201.22781L11.5499%207.45008C11.8537%207.75383%2011.8537%208.24617%2011.5499%208.54992L5.32764%2014.7722C5.0239%2015.0759%204.53155%2015.0759%204.22781%2014.7722C3.92406%2014.4684%203.92406%2013.9761%204.22781%2013.6724L9.90016%208L4.22781%202.32764C3.92406%202.0239%203.92406%201.53155%204.22781%201.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.22781%201.22781C4.53155%200.924064%205.0239%200.924064%205.32764%201.22781L11.5499%207.45008C11.8537%207.75383%2011.8537%208.24617%2011.5499%208.54992L5.32764%2014.7722C5.0239%2015.0759%204.53155%2015.0759%204.22781%2014.7722C3.92406%2014.4684%203.92406%2013.9761%204.22781%2013.6724L9.90016%208L4.22781%202.32764C3.92406%202.0239%203.92406%201.53155%204.22781%201.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 12px 12px no-repeat; position: absolute; top: 6px; width: 12px; }
html:not([data-editor-canvas]) .ci-spn-link::after { content: ''; inset: -10px 0; position: absolute; }
@media (hover: hover) { .ci-spn-link:hover { color: #000; } }
.ci-spn-link:active { color: #0c866a; }
.ci-spn-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
html:not([data-editor-canvas]) .ci-spn-link[aria-current="page"] { color: #202224; cursor: default; font-weight: 700; padding-left: 14px; }
html:not([data-editor-canvas]) .ci-spn-link[aria-current="page"]::before { border-radius: 2px; height: 16px; -webkit-mask: none; mask: none; top: 4px; width: 3px; }
@media (forced-colors: active) { .ci-spn-link::before { background-color: LinkText; forced-color-adjust: none; } html:not([data-editor-canvas]) .ci-spn-link[aria-current="page"]::before { background-color: CanvasText; } }
/* link/quick Type=Current as TEXT, not a link: a 3x16 bar 11px before 700 16/22, the bar the text's full height. */
.ci-spn-current { color: #202224; display: inline-block; font-size: 16px; font-weight: 700; line-height: 22px; max-width: 100%; overflow-wrap: anywhere; padding: 1px 0 1px 14px; position: relative; vertical-align: top; }
.ci-spn-current::before { background: #0c866a; border-radius: 2px; bottom: 4px; content: ''; left: 0; position: absolute; top: 4px; width: 3px; }
.ci-spn-empty { color: #545658; font-size: 14px; line-height: 20px; }
@media (forced-colors: active) { .ci-spn-current::before { background: CanvasText; forced-color-adjust: none; } }
/* v5 tablet and phone frames, folded and open (DREAM-832): heading/h4-trim 18/24, links 14/24, Current 700 14/22. */
@media (max-width: 1199.98px) {
  .ci-spn-label { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-spn-link, .ci-spn-current { font-size: 14px; }
}
/* Beside the body: the rail's inset on the page side, none on the far side; the open box only where the
   browser can force <details> open (seeds README, 0481): elsewhere the row stays, and still opens. */
@media (min-width: 1281px) {
  :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside) > .ci-spn { max-width: none; padding-bottom: 0; }
  :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside-left) > .ci-spn { padding-right: 0; }
  :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside-right) > .ci-spn { padding-left: 0; }
}
@media (min-width: 1281px) {
  @supports selector(::details-content) {
    :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside) > .ci-spn .ci-spn-box { background: none; display: flex; flex-direction: column; gap: 16px; padding: 19px 15px; }
    :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside) > .ci-spn .ci-spn-box::details-content { content-visibility: visible; display: contents; }
    :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside) > .ci-spn .ci-spn-head { display: none; }
    :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside) > .ci-spn .ci-spn-title { display: block; }
    :where(.ci-page-columns:not(.ci-page-columns-both) > .ci-page-aside) > .ci-spn .ci-spn-list { padding: 0; }
  }
}
@media (min-width: 1437px) {
  :where(.ci-page-columns-both > .ci-page-aside) > .ci-spn { max-width: none; padding-bottom: 0; }
  :where(.ci-page-columns-both > .ci-page-aside-left) > .ci-spn { padding-right: 0; }
  :where(.ci-page-columns-both > .ci-page-aside-right) > .ci-spn { padding-left: 0; }
}
@media (min-width: 1437px) {
  @supports selector(::details-content) {
    :where(.ci-page-columns-both > .ci-page-aside) > .ci-spn .ci-spn-box { background: none; display: flex; flex-direction: column; gap: 16px; padding: 19px 15px; }
    :where(.ci-page-columns-both > .ci-page-aside) > .ci-spn .ci-spn-box::details-content { content-visibility: visible; display: contents; }
    :where(.ci-page-columns-both > .ci-page-aside) > .ci-spn .ci-spn-head { display: none; }
    :where(.ci-page-columns-both > .ci-page-aside) > .ci-spn .ci-spn-title { display: block; }
    :where(.ci-page-columns-both > .ci-page-aside) > .ci-spn .ci-spn-list { padding: 0; }
  }
}
.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-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-ptoc * { box-sizing: border-box; }
.ci-ptoc { 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-ptoc { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-ptoc { padding-left: 20px; padding-right: 20px; } }
.ci-ptoc-box { border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 19px; }
.ci-ptoc-title { color: #202224; display: block; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ptoc-list { list-style: none; margin: 0; padding: 0; }
.ci-ptoc-item { max-width: 100%; min-width: 0; }
.ci-ptoc-link { border-radius: 5px; color: #202224; display: block; font-size: 16px; font-weight: 400; line-height: 24px; min-height: 24px; overflow-wrap: anywhere; position: relative; text-decoration-line: none; text-decoration-skip-ink: none; text-decoration-thickness: 1px; text-underline-offset: 1.5px; }
@media (hover: hover) { .ci-ptoc-link:hover { color: #0c866a; text-decoration-line: underline; } }
.ci-ptoc-link:active { color: #0d9070; text-decoration-line: underline; }
.ci-ptoc-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
/* Box: 20 in (its 1px rule inside), the caption's caps 20 over a wrapping row of link/tag: the 16px chevron 8px
   before the label, a 40px target (the rows' pitch, so two never overlap). */
.ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-list { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link { padding-left: 24px; }
.ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link::before { -webkit-print-color-adjust: exact; background-color: currentColor; content: ''; height: 16px; left: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; position: absolute; print-color-adjust: exact; top: 4px; width: 16px; }
html:not([data-editor-canvas]) .ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link::after { content: ''; inset: -8px 0; position: absolute; }
@media (forced-colors: active) { .ci-ptoc-box:not([data-look="plain"]) .ci-ptoc-link::before { background-color: LinkText; forced-color-adjust: none; } }
/* Below the desktop the Box caption is 18/24 and a label 14/22 in its 24px row. */
@media (max-width: 1199.98px) {
  .ci-ptoc-title { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-ptoc-link { font-size: 14px; line-height: 22px; padding-bottom: 1px; padding-top: 1px; }
}
/* Plain reads down balanced columns; count-derived positions keep wrapped labels in their own track. */
.ci-ptoc-box[data-look="plain"] .ci-ptoc-list { display: grid; gap: 16px 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ci-ptoc-box[data-look="plain"] .ci-ptoc-item { grid-column: var(--ci-column-3, 1); grid-row: var(--ci-row-3, auto); }
.ci-ptoc-box[data-look="plain"] .ci-ptoc-link { padding-left: 24px; }
.ci-ptoc-box[data-look="plain"] .ci-ptoc-link::before { -webkit-print-color-adjust: exact; background-color: currentColor; content: ''; height: 16px; left: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M13.6724%204.22781C13.9761%203.92406%2014.4684%203.92406%2014.7722%204.22781C15.0759%204.53155%2015.0759%205.0239%2014.7722%205.32764L8.54992%2011.5499C8.24617%2011.8537%207.75383%2011.8537%207.45008%2011.5499L1.22781%205.32764C0.924064%205.0239%200.924064%204.53155%201.22781%204.22781C1.53155%203.92406%202.0239%203.92406%202.32764%204.22781L8%209.90016L13.6724%204.22781Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center / 16px 16px no-repeat; position: absolute; print-color-adjust: exact; top: 4px; width: 16px; }
@media (forced-colors: active) { .ci-ptoc-box[data-look="plain"] .ci-ptoc-link::before { background-color: LinkText; forced-color-adjust: none; } }
@media (max-width: 1199.98px) {
  .ci-ptoc-box[data-look="plain"] .ci-ptoc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-ptoc-box[data-look="plain"] .ci-ptoc-item { grid-column: var(--ci-column-2, 1); grid-row: var(--ci-row-2, auto); }
}
@media (max-width: 720px) {
  .ci-ptoc-box[data-look="plain"] .ci-ptoc-list { display: flex; flex-direction: column; }
}
.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-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-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-bgd * { box-sizing: border-box; }
.ci-bgd { 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: bgd / inline-size; }
@media (max-width: 1199.98px) { .ci-bgd { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-bgd { padding-left: 20px; padding-right: 20px; } }
.ci-bgd-list { display: flex; flex-direction: column; gap: 20px; }
/* 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-bgd-list: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-bgd-list > *[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-bgd-list[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-bgd-main { align-items: center; background: linear-gradient(180deg, #f3f2ffa3 0%, #ebe9fe 73.64%); border-radius: 12px; display: flex; gap: 20px; padding: 20px; position: relative; }
.ci-bgd-brand { align-items: center; display: flex; flex: none; flex-direction: column; gap: 8px; width: 130px; }
.ci-bgd-logo { align-items: center; display: flex; flex: none; height: 130px; justify-content: center; width: 130px; }
.ci-bgd .ci-bgd-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-bgd .ci-bgd-logo::before { content: none; }
.ci-bgd-logo-disc { align-items: center; background: #202224; border-radius: 50%; color: #fff; display: flex; height: 108px; justify-content: center; width: 108px; }
.ci-bgd-logo-disc picture { display: contents; }
.ci-bgd-logo-img { display: block; height: 71px; object-fit: contain; width: 78px; }
.ci-bgd-logo-img[src=""], .ci-bgd-logo-img:not([src]) { display: none; }
.ci-bgd-rating { align-items: center; display: flex; flex-direction: column; gap: 8px; width: 80px; }
.ci-bgd-stars { display: flex; flex: none; height: 15px; width: 75px; }
.ci-bgd-star { color: #ffb310; display: block; flex: none; height: 16px; margin-top: -.5px; width: 16px; }
.ci-bgd-star-line { fill: #d9d9d9; }
.ci-bgd-star-fill { display: none; fill: #ffb310; }
.ci-bgd-star.on .ci-bgd-star-fill, .ci-bgd-star.mid .ci-bgd-star-fill, .ci-bgd-star.low .ci-bgd-star-fill { display: inline; }
.ci-bgd-star.on .ci-bgd-star-line, .ci-bgd-star.mid .ci-bgd-star-line, .ci-bgd-star.low .ci-bgd-star-line { display: none; }
.ci-bgd-score { align-items: center; color: #202224; display: flex; gap: 4px; }
/* The site mark is a padded 24px glyph: drawn at Figma's 14.45px glyph width. */
.ci-bgd-score-mark-img { display: block; flex: none; height: 17.34px; margin: -3.545px -1.445px; object-fit: contain; width: 17.34px; }
.ci-bgd-score-mark-img[src=''], .ci-bgd-score-mark-img:not([src]) { display: none; }
.ci-bgd .ci-bgd-stars { height: 16px; width: 80px; }
.ci-bgd .ci-bgd-star { height: 16px; width: 16px; }
.ci-bgd-score-num { font-size: 14px; line-height: 20px; margin: -4px 0 -6px; white-space: nowrap; }
.ci-bgd-panel { background: #fff; display: flex; flex: 1; flex-direction: column; gap: 16px; min-width: 0; padding: 16px; }
.ci-bgd-body { min-width: 0; }
.ci-bgd-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ci-bgd-name { color: #0c866a; font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; overflow-wrap: anywhere; }
/* Only the name links the review; the card has no hover background or shadow. */
.ci-bgd-name-link { border-radius: 8px; color: #0c866a; position: relative; text-decoration: none; }
.ci-bgd-name-link::after { content: ''; inset: -12px 0 -10px; position: absolute; }
@media (hover: hover) { .ci-bgd-name-link:hover { text-decoration: underline; } }
.ci-bgd .ci-bgd-name-link:active { color: #0d9070; text-decoration: underline; }
.ci-bgd-name-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-bgd-bonus { display: block; font-size: 18px; font-weight: 700; line-height: 24px; margin: -5px 0 -6px; overflow-wrap: anywhere; }
.ci-bgd-note { font-size: 12px; line-height: 20px; margin: -6px 0 -6px; overflow-wrap: anywhere; }
.ci-bgd-bottom { align-items: start; display: flex; gap: 20px; justify-content: flex-end; margin-top: 20px; }
/* Size=Md at any width; its height is the label's (and the button's) margin box plus the border. */
.ci-bgd-code { align-items: center; background: #effbf7; border: 1px solid #c2ebdd; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: flex; gap: 8px; min-width: 0; position: relative; z-index: 2; flex: none; width: 100%; }
.ci-bgd-code-label { 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; }
.ci-bgd-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-bgd-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-bgd-code-copy:focus-visible { outline: none; }
.ci-bgd-code-copy:focus-visible::after { border: 2px solid #5749dd; border-radius: 7px; content: ''; inset: -4px; pointer-events: none; position: absolute; }
.ci-bgd-code-copy-img { display: block; height: 13.09px; width: 12px; }
.ci-bgd-code .ci-bgd-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%); }
/* Hover and press skip a copied plate, so Copied needs no rules to win them back. */
@media (hover: hover) {
  .ci-bgd-code:not([data-copied]):hover { background: #c2ebdd; }
}
.ci-bgd-code:not([data-copied]):active { background: #0fa884; border-color: #0fa884; }
.ci-bgd-code:not([data-copied]):active .ci-bgd-code-label { color: #fff; margin-left: 15px; }
.ci-bgd-code:not([data-copied]):active .ci-bgd-code-value { color: #fff; }
.ci-bgd-code:not([data-copied]):active .ci-bgd-code-copy { padding-right: 15px; }
.ci-bgd-code:not([data-copied]):active .ci-bgd-code-copy-img:not(.gjs-plh-image) { filter: brightness(0) invert(1); }
.ci-bgd-code[data-copied] { border-color: #c2ebdd; }
/* Strut and code both go to 0, so the word keeps the code's line and baseline. */
.ci-bgd-code[data-copied] .ci-bgd-code-value[data-copied-label]:not([data-copied-label='']) { font-size: 0; line-height: 0; }
.ci-bgd-code[data-copied] .ci-bgd-code-value[data-copied-label]:not([data-copied-label=''])::after { color: #0c8166; content: attr(data-copied-label); font-size: 18px; line-height: 24px; }
.ci-bgd-code[data-copied] .ci-bgd-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%); }
/* v6 keeps Md in every list layout; the helper's width query must not shorten its label/height. */
.ci-bgd .ci-bgd-code { container-type: normal; }
.ci-bgd-specs { display: grid; flex: 1; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.ci-bgd-spec { background: #f3f2ff; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; }
.ci-bgd-spec-label { color: #202224; font-size: 14px; line-height: 22px; margin: 0; overflow-wrap: anywhere; }
.ci-bgd-spec-value { background: #fff; border-radius: 4px; flex: 1; font-size: 14px; font-weight: 400; line-height: 22px; margin: 0; min-width: 0; overflow-wrap: anywhere; padding: 6px 8px; }
/* Empty fields are removed by bindings; retain the first six filled facts. */
.ci-bgd .ci-bgd-specs > .ci-bgd-spec:nth-child(n+7) { display: none; }
.ci-bgd-cta { align-items: stretch; display: flex; flex: 0 0 236px; flex-direction: column; gap: 16px; min-width: 0; }
.ci-bgd-btn { align-items: center; border-radius: 4px; display: flex; flex: none; gap: 4px; height: 48px; justify-content: center; padding: 0 24px; position: relative; text-decoration: none; width: 100%; z-index: 2; }
.ci-bgd-btn-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; }
/* A missing plate keeps the desktop action on the code rows' button line. */
.ci-bgd-cta > .ci-bgd-btn:first-child { margin-top: 64px; }
.ci-bgd-btn-arrow { display: block; flex: none; height: 12px; width: 12px; }
.ci-bgd-btn-primary { background: #0c866a; color: #fff; }
.ci-bgd-btn-primary:hover { background: #0d9070; }
.ci-bgd-btn-primary:active { background: #1b5547; }
.ci-bgd-btn-primary:focus-visible { box-shadow: 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
@container bgd (max-width: 1029.98px) {
  .ci-bgd .ci-bgd-main { align-items: center; display: grid; column-gap: 16px; grid-template-columns: 72px minmax(0, 1fr); row-gap: 8px; }
  .ci-bgd .ci-bgd-brand, .ci-bgd .ci-bgd-panel { display: contents; }
  .ci-bgd .ci-bgd-logo { grid-column: 1; grid-row: 1 / 3; height: 72px; width: 72px; }
  .ci-bgd .ci-bgd-logo-disc { height: 60px; width: 60px; }
  .ci-bgd .ci-bgd-logo-img { height: 40px; width: 44px; }
  .ci-bgd .ci-bgd-name { align-self: end; grid-column: 2; grid-row: 1; }
  .ci-bgd .ci-bgd-rating { align-items: flex-start; align-self: start; grid-column: 2; grid-row: 2; width: auto; }
  .ci-bgd .ci-bgd-body { background: #fff; grid-column: 1 / -1; grid-row: 3; margin-top: 12px; padding: 16px; }
  .ci-bgd .ci-bgd-info { gap: 20px; }
  .ci-bgd .ci-bgd-bottom { flex-direction: column; }
  .ci-bgd .ci-bgd-specs { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ci-bgd .ci-bgd-specs > .ci-bgd-spec:nth-child(odd):last-child { grid-column: 1 / -1; }
  .ci-bgd .ci-bgd-cta { flex: none; width: 100%; }
  .ci-bgd .ci-bgd-cta > .ci-bgd-btn:first-child { margin-top: 0; }
}
@media (max-width: 1199.98px) {
  .ci-bgd .ci-bgd-main { align-items: center; display: grid; column-gap: 16px; grid-template-columns: 72px minmax(0, 1fr); row-gap: 8px; }
  .ci-bgd .ci-bgd-brand, .ci-bgd .ci-bgd-panel { display: contents; }
  .ci-bgd .ci-bgd-logo { grid-column: 1; grid-row: 1 / 3; height: 72px; width: 72px; }
  .ci-bgd .ci-bgd-logo-disc { height: 60px; width: 60px; }
  .ci-bgd .ci-bgd-logo-img { height: 40px; width: 44px; }
  .ci-bgd .ci-bgd-name { align-self: end; grid-column: 2; grid-row: 1; }
  .ci-bgd .ci-bgd-rating { align-items: flex-start; align-self: start; grid-column: 2; grid-row: 2; width: auto; }
  .ci-bgd .ci-bgd-body { background: #fff; grid-column: 1 / -1; grid-row: 3; margin-top: 12px; padding: 16px; }
  .ci-bgd .ci-bgd-info { gap: 20px; }
  .ci-bgd .ci-bgd-bottom { flex-direction: column; }
  .ci-bgd .ci-bgd-specs { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ci-bgd .ci-bgd-specs > .ci-bgd-spec:nth-child(odd):last-child { grid-column: 1 / -1; }
  .ci-bgd .ci-bgd-cta { flex: none; width: 100%; }
  .ci-bgd .ci-bgd-cta > .ci-bgd-btn:first-child { margin-top: 0; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1077.98px) {
  .ci-bgd .ci-bgd-main { align-items: center; display: grid; column-gap: 16px; grid-template-columns: 72px minmax(0, 1fr); row-gap: 8px; }
  .ci-bgd .ci-bgd-brand, .ci-bgd .ci-bgd-panel { display: contents; }
  .ci-bgd .ci-bgd-logo { grid-column: 1; grid-row: 1 / 3; height: 72px; width: 72px; }
  .ci-bgd .ci-bgd-logo-disc { height: 60px; width: 60px; }
  .ci-bgd .ci-bgd-logo-img { height: 40px; width: 44px; }
  .ci-bgd .ci-bgd-name { align-self: end; grid-column: 2; grid-row: 1; }
  .ci-bgd .ci-bgd-rating { align-items: flex-start; align-self: start; grid-column: 2; grid-row: 2; width: auto; }
  .ci-bgd .ci-bgd-body { background: #fff; grid-column: 1 / -1; grid-row: 3; margin-top: 12px; padding: 16px; }
  .ci-bgd .ci-bgd-info { gap: 20px; }
  .ci-bgd .ci-bgd-bottom { flex-direction: column; }
  .ci-bgd .ci-bgd-specs { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ci-bgd .ci-bgd-specs > .ci-bgd-spec:nth-child(odd):last-child { grid-column: 1 / -1; }
  .ci-bgd .ci-bgd-cta { flex: none; width: 100%; }
  .ci-bgd .ci-bgd-cta > .ci-bgd-btn:first-child { margin-top: 0; }
}
}
.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; }
.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-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-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-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; }
}
.ci-page-columns { align-items: flex-start; display: flex; margin: 0 auto; max-width: calc(1200px + 56px); }
.ci-page-main { flex: 1 1 auto; min-width: 0; }
.ci-page-aside { box-sizing: border-box; flex: 0 0 358px; min-width: 0; }
.ci-page-columns-both .ci-page-aside { flex-basis: 236px; }
/* The pair switches where the page's OWN layout stacks, so neither copy is the
   one on screen while the body is stacked: one shared 1181 threshold left a band
   showing the rail's desktop copy full-width above the body — the lead, PR #169.
   Each rule carries its layout in the selector: a "display: none !important" has
   no un-hiding half. */
@media (min-width: 1281px) {
  .ci-page-columns:not(.ci-page-columns-both) .ci-mobile-only { display: none !important; }
}
@media (min-width: 1437px) {
  .ci-page-columns-both .ci-mobile-only { display: none !important; }
}
@media (min-width: 1281px) {
  .ci-page-aside > * { padding-top: 20px; }
  .ci-page-aside-left > * { padding-left: 28px; }
  .ci-page-aside-right > * { padding-right: 28px; }
  /* Beside ONE rail the column sets its blocks' rail-side gutter to the design's gap, as the rail insets its own
     child (KNOWLEDGE.md, "Side rails"): a right rail follows the main, a left one leads it. */
  .ci-page-columns:not(.ci-page-columns-both) > .ci-page-main:not(:last-child) > .ci-page-article > * { padding-right: 20px; }
  .ci-page-columns:not(.ci-page-columns-both) > .ci-page-main:not(:first-child) > .ci-page-article > * { padding-left: 20px; }
}
@media (max-width: 1436px) {
  .ci-page-columns-both { flex-direction: column; }
  .ci-page-columns-both .ci-page-main { width: 100%; }
  .ci-page-columns-both .ci-page-aside { flex: 0 0 auto; order: -1; width: 100%; }
}
@media (max-width: 1280px) {
  .ci-page-columns { flex-direction: column; }
  .ci-page-main { width: 100%; }
  .ci-page-aside { flex: 0 0 auto; order: -1; width: 100%; }
}
@media (max-width: 1280px) {
  .ci-page-columns:not(.ci-page-columns-both) .ci-desktop-only { display: none !important; }
}
@media (max-width: 1436px) {
  .ci-page-columns-both .ci-desktop-only { display: none !important; }
}
@media (min-width: 1200px) {
  .ci-page-columns:not(.ci-page-columns-both):has(> .ci-page-aside .ci-facets) { flex-direction: row; }
  .ci-page-columns:not(.ci-page-columns-both):has(> .ci-page-aside .ci-facets) > .ci-page-aside { flex: 0 0 328px; order: 0; width: auto; }
  .ci-page-columns:not(.ci-page-columns-both):has(> .ci-page-aside .ci-facets) > .ci-page-aside > * { padding-top: 20px; }
  .ci-page-columns:not(.ci-page-columns-both):has(> .ci-page-aside .ci-facets) > .ci-page-aside-left > * { padding-left: 28px; }
  .ci-page-columns:not(.ci-page-columns-both):has(> .ci-page-aside .ci-facets) > .ci-page-aside-right > * { padding-right: 28px; }
}