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