.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-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-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-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-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-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-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-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-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; }
}