.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-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-gquote * { box-sizing: border-box; }
.ci-gquote { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; width: 100%; container: gquote / inline-size; }
@media (max-width: 1199.98px) { .ci-gquote { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gquote { padding-left: 20px; padding-right: 20px; } }
/* The design's 20px padding holds its inside 1px border. */
.ci-gquote-panel { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; gap: 20px; padding: 19px; }
/* Avatar and name/role share one row at every breakpoint; the row hugs the
   name as drawn, capped so a long one cannot squeeze the quote out. */
.ci-gquote-person-row { align-items: center; display: flex; flex: none; gap: 8px; max-width: 50%; }
/* A block, not display: contents: the published <source>s would each take a gap. */
.ci-gquote-person-row picture { display: block; flex: none; }
.ci-gquote-avatar { border-radius: 50%; display: block; flex: none; height: 96px; object-fit: cover; width: 96px; }
/* Not the canvas's empty upload placeholder, whose yellow outline it would grey. */
.ci-gquote-avatar:not(.gjs-plh-image) { filter: grayscale(1); }
.ci-gquote-person { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: break-word; }
.ci-gquote-name { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-gquote-role { color: #202224; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; }
.ci-gquote-text { flex: 1; font-size: 16px; font-style: italic; font-weight: 500; line-height: 24px; min-width: 0; }
.ci-gquote-text p { margin: 0 0 20px; }
.ci-gquote-text > :last-child { margin-bottom: 0; }
/* Layout=Mobile on tablets and phones (the v5 page frames); a narrow block (a side rail, 664px of
   section and under) gets the column at any screen width, not a crushed row. */
@container gquote (max-width: 664px) {
  .ci-gquote-panel { align-items: stretch; flex-direction: column; }
  /* The name drops under the photo only when under 100px would be left beside it. */
  .ci-gquote-person-row { flex-wrap: wrap; max-width: none; }
  .ci-gquote-person { flex: 1 1 100px; }
  /* The rule parts person from quote: an unresolved author ships no row (0400). */
  .ci-gquote-person-row + .ci-gquote-text { border-top: 1px solid #d9d9d9; padding-top: 20px; }
  /* No-break spaces: a mark never ends or opens a line on its own. */
  .ci-gquote-text > p:first-child::before { content: '\201C\00A0'; }
  .ci-gquote-text > p:last-child::after { content: '\00A0\201D'; }
}
@media (max-width: 1199.98px) {
  .ci-gquote-panel { align-items: stretch; flex-direction: column; }
  /* The name drops under the photo only when under 100px would be left beside it. */
  .ci-gquote-person-row { flex-wrap: wrap; max-width: none; }
  .ci-gquote-person { flex: 1 1 100px; }
  /* The rule parts person from quote: an unresolved author ships no row (0400). */
  .ci-gquote-person-row + .ci-gquote-text { border-top: 1px solid #d9d9d9; padding-top: 20px; }
  /* No-break spaces: a mark never ends or opens a line on its own. */
  .ci-gquote-text > p:first-child::before { content: '\201C\00A0'; }
  .ci-gquote-text > p:last-child::after { content: '\00A0\201D'; }

  /* The page frames' type (DREAM-831): heading/h4-trim 18/24, label/sm-bold 12/22, 500 italic 14/24. */
  .ci-gquote-name { font-size: 18px; line-height: 24px; margin: -5px 0 -6px; }
  .ci-gquote-role { line-height: 22px; margin: -7px 0 -7px; }
  .ci-gquote-text { font-size: 14px; }
}
.ci-gquote a[href] { color: #5749dd; text-decoration: none; }
.ci-gquote a[href]:hover { text-decoration: underline; }
.ci-gquote a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-vlist * { box-sizing: border-box; }
.ci-vlist { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; width: 100%; }
@media (max-width: 1199.98px) { .ci-vlist { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-vlist { padding-left: 20px; padding-right: 20px; } }
/* Element-scoped: applyList emits a class-less ul/ol, so the pill design
   lives on the elements (block-transform KNOWLEDGE.md "The list shape"). */
.ci-vlist-body ul, .ci-vlist-body ol { counter-reset: ci-vlist-n; display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
/* Figma list/bullet-item; a label wrapping to more lines grows the row. A block, not a flex row: an
   item's link or <b> would be a column of its own, so the marker hangs in the padding (0447). */
.ci-vlist-body li { align-content: center; background: #f3f3f3; border-radius: 4px; color: #202224; display: block; font-size: 14px; font-weight: 400; line-height: 20px; min-height: 36px; padding: 4px 12px 2px; overflow: hidden; overflow-wrap: anywhere; position: relative; }
.ci-vlist-body li p { margin: 0; }
/* The canvas's empty-item floor (1.2em) outranks the row's: the count is no longer there to hold it. */
.ci-vlist-body li:empty { min-height: 36px; }
/* Bullet = tone dot on the row's middle, number = tone counter on the content box's, none = bare
   pill. data-tone paints pros green / cons red: the wrapper's block setting, or a per-item mark on
   the li (settings.list.cons), which wins. */
.ci-vlist-body ul[data-marker="bullet"] > li { padding-left: 34px; }
.ci-vlist-body ul[data-marker="bullet"] > li::before { background: #0c866a; border-radius: 50%; content: ""; height: 6px; left: 16px; position: absolute; top: calc(50% - 3px); width: 6px; }
.ci-vlist-body[data-tone="cons"] ul[data-marker="bullet"] > li::before { background: #ba4033; }
.ci-vlist-body ul[data-marker="bullet"] > li[data-tone="cons"]::before { background: #ba4033; }
/* The count's gutter grows with its digits (VLIST_COUNT_WIDTH) at the count of 10 and of 100. */
.ci-vlist-body ol[data-marker="number"] > li { counter-increment: ci-vlist-n; padding-left: 32px; }
.ci-vlist-body ol[data-marker="number"] > li:nth-child(n+10) { padding-left: 40px; }
.ci-vlist-body ol[data-marker="number"] > li:nth-child(n+100) { padding-left: 49px; }
.ci-vlist-body ol[data-marker="number"] > li::before { align-items: center; bottom: 2px; color: #0c866a; content: counter(ci-vlist-n) "."; display: flex; font-weight: 700; left: 12px; position: absolute; top: 4px; }
.ci-vlist-body[data-tone="cons"] ol[data-marker="number"] > li::before { color: #ba4033; }
.ci-vlist-body ol[data-marker="number"] > li[data-tone="cons"]::before { color: #ba4033; }
/* Horizontal (Figma 2591:5242): pros left, cons right, equal columns, 20px
   gutter. Dense packing backfills the cons column from row 1, so each side
   stacks from the top; a row hugs its own height beside a taller one. */
.ci-vlist-body ul[data-layout="horizontal"], .ci-vlist-body ol[data-layout="horizontal"] { align-items: start; column-gap: 20px; display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr 1fr; row-gap: 14px; }
/* Two columns is the stored setting, not a count of the tones: an all-pros
   list in Two draws its right half empty rather than rearranging itself when
   the first con is marked (ADR-1, PRODUCT_DECISIONS). */
.ci-vlist-body [data-layout="horizontal"] > li { grid-column: 1; }
.ci-vlist-body [data-layout="horizontal"] > li[data-tone="cons"] { grid-column: 2; }
/* Numbering restarts per column, or the cons side would continue the pros
   count (1,2,3 | 4,5) instead of reading as its own list. */
.ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] { counter-reset: ci-vlist-n ci-vlist-c; }
.ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"] { counter-increment: ci-vlist-c; }
.ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]::before { content: counter(ci-vlist-c) "."; }
/* And the gutter follows the column's own count, so a side of nine keeps the narrow one: the
   exact complement of the one-column query below, so no fractional width falls between them. */
@media not all and (max-width: 900px) {
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li:nth-child(n+10) { padding-left: 32px; }
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li:not([data-tone="cons"]):nth-child(n+10 of :not([data-tone="cons"])), .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]:nth-child(n+10 of [data-tone="cons"]) { padding-left: 40px; }
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li:not([data-tone="cons"]):nth-child(n+100 of :not([data-tone="cons"])), .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]:nth-child(n+100 of [data-tone="cons"]) { padding-left: 49px; }
}
@media (max-width: 900px) {
  .ci-vlist-body ul[data-layout="horizontal"], .ci-vlist-body ol[data-layout="horizontal"] { grid-template-columns: 1fr; }
  .ci-vlist-body [data-layout="horizontal"] > li, .ci-vlist-body [data-layout="horizontal"] > li[data-tone="cons"] { grid-column: 1; }
  /* One column again, so one count again — the per-column counter would
     repeat itself down the stack (1. 1. 2. 2.). */
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"] { counter-increment: ci-vlist-n; }
  .ci-vlist-body ol[data-layout="horizontal"][data-marker="number"] > li[data-tone="cons"]::before { content: counter(ci-vlist-n) "."; }
}
.ci-vlist a[href] { color: #5749dd; text-decoration: none; }
.ci-vlist a[href]:hover { text-decoration: underline; }
.ci-vlist a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-gcallout * { box-sizing: border-box; }
.ci-gcallout { box-sizing: border-box; font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #202224; margin: 0 auto; max-width: calc(1200px + 56px); padding: 20px 28px; width: 100%; }
@media (max-width: 1199.98px) { .ci-gcallout { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-gcallout { padding-left: 20px; padding-right: 20px; } }
/* NL content/fact: a 1px frame round the lavender panel, 20px apart; the mark
   has its own column beside the title and the body (seeds README, 0398). */
.ci-gcallout-panel { background: #fff; border: 1px solid #5749dd; border-radius: 12px; padding: 19px; }
.ci-gcallout-inner { background: linear-gradient(180deg, #f3f2ff57 0%, #eeedfb 73.64%); border-radius: 12px; column-gap: 20px; display: grid; grid-template-areas: 'mark title' 'mark body'; grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 20px; }
.ci-gcallout-mark-img { display: block; grid-area: mark; height: 50px; object-fit: contain; object-position: top; width: 25px; }
/* The title owns the 20px over the body, so a cleared one takes it along (and the
   canvas's placeholder box for an empty leaf keeps its own room). */
.ci-gcallout-title { align-self: start; font-size: 20px; font-weight: 700; grid-area: title; line-height: 28px; margin: -6.484375px 0 12.484375px; overflow-wrap: break-word; }
.ci-gcallout-title:empty { display: none; }
/* body/md-trim, justified (v5, DREAM-831): the panel's 20px pad and the title's 20 meet the glyphs, not the line box. */
.ci-gcallout-body { align-self: start; font-size: 16px; grid-area: body; line-height: 24px; margin: -5.984375px 0 -7.015625px; overflow-wrap: break-word; text-align: justify; }
.ci-gcallout-body > * { margin: 0 0 20px; }
.ci-gcallout-body > ul { padding-left: 24px; }
.ci-gcallout-body > ol { padding-left: 24px; }
.ci-gcallout-body li { margin: 0; position: relative; }
/* Inside an item or a quote, a paragraph or a nested list keeps the lines flush. */
.ci-gcallout-body li > p { margin: 0; }
.ci-gcallout-body blockquote > p { margin: 0; }
.ci-gcallout-body li > ul { margin: 0; padding-left: 24px; }
.ci-gcallout-body li > ol { margin: 0; padding-left: 24px; }
/* The native disc stays for list semantics, unpainted; the design's 6px disc is a
   border (kept in print and forced colours), centred 12px in, 0.75px under mid-line. */
.ci-gcallout-body ul > li::marker { color: transparent; }
.ci-gcallout-body ul > li::before { border: 3px solid; border-radius: 50%; content: ''; left: -15px; position: absolute; top: 9.75px; top: calc(0.5lh - 2.25px); }
.ci-gcallout-body > :last-child { margin-bottom: 0; }
/* content/fact-mobile-inner: the mark and the title share a row, the body runs
   full width under both, on tablets and phones (the v5 page frames). */
@media (max-width: 1199.98px) {
  .ci-gcallout-inner { grid-template-areas: 'mark title' 'body body'; grid-template-rows: auto auto; }
  /* The page frames' type there: heading/h4-trim 18/24, an untrimmed body/sm 14/22 (DREAM-831). */
  .ci-gcallout-title { font-size: 18px; line-height: 24px; margin: -5.234375px 0 -5.765625px; }
  .ci-gcallout-body { font-size: 14px; line-height: 22px; margin: 20px 0 0; }
}
.ci-gcallout a[href] { color: #5749dd; text-decoration: none; }
.ci-gcallout a[href]:hover { text-decoration: underline; }
.ci-gcallout a[href]:focus-visible { border-radius: 5px; outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-nlatest * { box-sizing: border-box; }
.ci-nlatest { 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-nlatest { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-nlatest { padding-left: 20px; padding-right: 20px; } }
.ci-nlatest-grid { display: grid; gap: 33px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ci-nlatest-item { color: #202224; container-type: inline-size; display: flex; gap: 20px; position: relative; }
.ci-nlatest-thumb { background: linear-gradient(135deg, #e4e4e9, #d9d9d9); border-radius: 12px; display: block; flex: none; height: 130px; overflow: hidden; position: relative; width: 215px; }
.ci-nlatest-thumb img, .ci-nlatest-thumb picture { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.ci-nlatest-img { object-fit: cover; }
.ci-nlatest-img[src=""], .ci-nlatest-img:not([src]) { opacity: 0; }
.ci-nlatest-body { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.ci-nlatest-headline { display: block; font-size: 18px; font-weight: 700; line-height: 24px; margin: -5px 0 -6px; }
.ci-nlatest-headline a { -webkit-box-orient: vertical; color: #202224; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-decoration: none; }
.ci-nlatest-link::after { content: ''; inset: 0; position: absolute; z-index: 1; }
.ci-nlatest-link:focus-visible { outline: none; }
.ci-nlatest-link:focus-visible::after { border-radius: 8px; inset: -3px; outline: 2px solid #5749dd; }
@media (hover: hover) { .ci-nlatest-headline a:hover { color: #0c866a; text-decoration: underline; } }
.ci-nlatest-headline a:active { color: #1b5547; text-decoration: underline; }
.ci-nlatest-meta { align-items: center; display: flex; gap: 8px; margin: 0; min-height: 12px; }
.ci-nlatest-date { flex: none; font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; white-space: nowrap; }
.ci-nlatest-cat { font-size: 12px; font-weight: 700; line-height: 24px; margin: -8px 0 -8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-nlatest-sep { background: #202224; flex: none; height: 12px; width: 1px; }
.ci-nlatest-sep:first-child, .ci-nlatest-sep:last-child { display: none; }
.ci-nlatest-meta:has(> .ci-nlatest-sep:only-child) { display: none; }
.ci-nlatest-author { align-items: center; display: flex; gap: 8px; min-height: 32px; }
.ci-nlatest-avatar { border-radius: 50%; flex: none; height: 32px; object-fit: cover; width: 32px; }
.ci-nlatest-avatar[src=""], .ci-nlatest-avatar:not([src]) { display: none; }
.ci-nlatest-author picture { display: contents; }
.ci-nlatest-aname { font-size: 16px; font-weight: 700; line-height: 22px; margin: -5px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-nlatest-author:not(:has(.ci-nlatest-aname-first)):not(:has(.ci-nlatest-aname-last:not(:empty))) { display: none; }
@container (max-width: 459px) { .ci-nlatest-thumb { height: 90px; width: 120px; } .ci-nlatest-headline a { display: block; -webkit-line-clamp: none; line-clamp: none; } }
.ci-nlatest-excerpt, .ci-nlatest-arole { display: none; }
.ci-nlatest-who { display: contents; }
@media (min-width: 1200px) { .ci-nlatest-grid > .ci-nlatest-item:not([hidden]) ~ .ci-nlatest-item:not([hidden]) ~ .ci-nlatest-item::before { border-top: 1px solid #d9d9d9; content: ''; inset: -17px 0 auto; pointer-events: none; position: absolute; } }
/* 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-nlatest-grid: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-nlatest-grid > *[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-nlatest-grid[data-pager-ready] > .ci-cpager { display: flex; flex-direction: column; gap: 12px; align-items: center; grid-column: 1 / -1; padding-top: 20px; }
.ci-cpager[hidden] { display: none; }
.ci-cpager .ci-cpager-count { color: #545658; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; }
/* NL button/secondary without its arrow: 23px + the 1px border make the design's 24px sides.
   Under `.ci-cpager` so a pre-0410 version's flat rules on the page lose (PR #496 R1.5). */
.ci-cpager .ci-cpager-btn { -webkit-appearance: none; align-items: center; appearance: none; background: none; border: 1px solid #5749dd; border-radius: 4px; color: #5749dd; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 18px; font-weight: 700; height: 48px; justify-content: center; line-height: 24px; margin: 0; max-width: 100%; padding: 0 23px; position: relative; }
.ci-cpager .ci-cpager-btn:hover { background: #f3f2ff; }
.ci-cpager .ci-cpager-btn:active { background: none; border-color: #3d31b8; color: #3d31b8; }
.ci-cpager .ci-cpager-btn:focus-visible { outline: none; }
/* The drawn ring, 3px out at radius 8/10 (an outline would round to 9): 6px off the padding box. */
.ci-cpager .ci-cpager-btn:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
.ci-cpager .ci-cpager-btn[hidden] { display: none; }
.ci-ctoolbar * { box-sizing: border-box; }
/* A part of the list it controls, never a section of its own: it spans the
   list's layout and leaves the section's padding to the section. */
.ci-ctoolbar { box-sizing: border-box; color: #202224; grid-column: 1 / -1; margin: 0; width: 100%; }
/* form/search, Light: 40px, the glyph first; Figma's 8/12 pads sit inside the 1px border. */
.ci-ctoolbar label.ci-ctoolbar-search { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 4px; cursor: text; display: flex; gap: 8px; height: 40px; margin: 0; padding: 8px 12px; position: relative; }
.ci-ctoolbar label.ci-ctoolbar-search::before { content: ''; inset: -3px -1px; position: absolute; }
.ci-ctoolbar label.ci-ctoolbar-search:focus-within::after { border: 2px solid #5749dd; border-radius: 14px; content: ''; inset: -6px; pointer-events: none; position: absolute; }
/* `inset` and `transform` undo a pre-0410 sheet's right-hand absolute glyph. */
.ci-ctoolbar label > .ci-ctoolbar-icon { color: #545658; display: block; flex: none; height: 16px; inset: auto; position: relative; transform: none; width: 16px; }
.ci-ctoolbar label > .ci-ctoolbar-input { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; color: #202224; flex: 1; font-family: inherit; font-size: 14px; font-weight: 400; height: 20px; letter-spacing: 0; line-height: 20px; margin: 0; min-width: 0; outline: none; padding: 0; position: relative; top: 1px; }
.ci-ctoolbar label > .ci-ctoolbar-input:focus-visible { outline: none; }
.ci-ctoolbar label > .ci-ctoolbar-input::placeholder { color: #545658; opacity: 1; }
.ci-ctoolbar label > .ci-ctoolbar-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ci-ctoolbar label > .ci-ctoolbar-input::-webkit-search-decoration { -webkit-appearance: none; }
@media (hover: hover) {
  .ci-ctoolbar label.ci-ctoolbar-search:hover { border-color: #545658; }
  .ci-ctoolbar .ci-ctoolbar-reset:hover { text-decoration: underline; }
}
.ci-ctoolbar label.ci-ctoolbar-search:active { background: #ededed; border-color: #545658; }
.ci-ctoolbar .ci-ctoolbar-chips { display: flex; flex-wrap: wrap; gap: 12px 8px; margin-top: 12px; }
.ci-ctoolbar .ci-ctoolbar-chips:empty { display: none; }
/* filter/chip, an applied filter with its close glyph (0438): 32px pill, 44px hit area (rows 12 apart,
   so two rows' areas never overlap). Hover and pressed draw the 1px line inset, so the pill keeps
   its width (user call, DREAM-718). */
.ci-ctoolbar .ci-ctoolbar-chip { align-items: center; background: #f3f3f3; border: 0; border-radius: 999px; color: #202224; cursor: pointer; display: inline-flex; font-family: inherit; font-size: 12px; font-style: normal; font-weight: 400; gap: 6px; letter-spacing: 0; line-height: 20px; margin: 0; max-width: 100%; min-height: 32px; overflow-wrap: anywhere; padding: 6px 8px 6px 12px; position: relative; text-align: left; }
.ci-ctoolbar .ci-ctoolbar-chip::before { content: ''; inset: -6px 0; position: absolute; }
.ci-ctoolbar .ci-ctoolbar-chip-icon { display: block; flex: none; height: 12px; width: 12px; }
/* Unguarded, so a pre-0438 sheet's green :hover cannot win on a touch screen. */
.ci-ctoolbar .ci-ctoolbar-chip:hover { background: #f3f3f3; }
@media (hover: hover) {
  .ci-ctoolbar .ci-ctoolbar-chip:hover { background: #ededed; box-shadow: inset 0 0 0 1px #545658; }
}
.ci-ctoolbar .ci-ctoolbar-chip:active { background: #ededed; box-shadow: inset 0 0 0 1px #545658; color: #545658; }
.ci-ctoolbar .ci-ctoolbar-chip:focus-visible { outline: none; }
/* Figma's ring: 2px #5749DD, 3px out, radius 8 inside (a rounded rect round the pill). */
.ci-ctoolbar .ci-ctoolbar-chip:focus-visible::after { border: 2px solid #5749dd; border-radius: 10px; content: ''; inset: -5px; pointer-events: none; position: absolute; }
@media (forced-colors: active) { .ci-ctoolbar .ci-ctoolbar-chip, .ci-ctoolbar .ci-ctoolbar-chip:focus-visible { outline: 1px solid ButtonText; outline-offset: -1px; } }
.ci-ctoolbar .ci-ctoolbar-meta { color: #545658; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 20px; margin: 12px 0 0; }
/* The link carries its own 12px: a hidden link leaves the row 0 high, so no gap (R1.6). */
.ci-ctoolbar .ci-ctoolbar-meta-row { display: flex; margin: 0; }
/* link/text: 700 16/22 #0C866A; hover underlines, pressed #0D9070; a 44px hit area. */
.ci-ctoolbar .ci-ctoolbar-reset { background: none; border: 0; border-radius: 5px; color: #0c866a; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 22px; margin: 12px 0 0; padding: 0; position: relative; }
.ci-ctoolbar .ci-ctoolbar-reset::before { content: ''; inset: -11px 0; position: absolute; }
.ci-ctoolbar .ci-ctoolbar-reset:active { color: #0d9070; text-decoration: underline; }
.ci-ctoolbar .ci-ctoolbar-reset:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
.ci-ctoolbar .ci-ctoolbar-reset[hidden] { display: none; }
/* feedback/empty-state: NoResults by default, Empty (`data-empty="none"`) on a list with no rows.
   Figma's pad 48 plus its 1px stroke inside the layout: 49 on every side, and the height hugs
   the words (the default copy measures 49+116+49 = 214), with no minimum (0425). */
.ci-ctoolbar div.ci-ctoolbar-empty { align-items: center; background: #ededed; border: 0; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 49px; text-align: center; }
.ci-ctoolbar div.ci-ctoolbar-empty[hidden] { display: none; }
.ci-ctoolbar .ci-ctoolbar-empty-title { color: #202224; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ctoolbar .ci-ctoolbar-none-title { color: #202224; display: none; font-size: 20px; font-weight: 700; line-height: 28px; margin: -6px 0 -8px; }
.ci-ctoolbar .ci-ctoolbar-empty-text { color: #545658; font-size: 14px; line-height: 20px; margin: -4px 0 -6px; max-width: 420px; }
.ci-ctoolbar .ci-ctoolbar-none-text { color: #545658; display: none; font-size: 14px; line-height: 20px; margin: -4px 0 -6px; max-width: 420px; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-empty-title { display: none; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-empty-text { display: none; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-none-title { display: block; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-none-text { display: block; }
.ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-clear { display: none; }
/* Empty's own button/primary (0479): the hub link, shown only on a list with no rows, and only where it has an address. */
.ci-ctoolbar .ci-ctoolbar-hub { display: none; }
.ci-ctoolbar .ci-ctoolbar-empty[data-empty="none"] > .ci-ctoolbar-hub[href]:not([href=""]) { display: inline-flex; }
/* button/primary with its arrow; the white ring sits 1px off the grey panel, the purple 5px out. */
.ci-ctoolbar .ci-ctoolbar-clear, .ci-ctoolbar .ci-ctoolbar-empty > .ci-ctoolbar-hub { align-items: center; background: #0c866a; border: 0; border-radius: 4px; color: #fff; cursor: pointer; flex: none; font-family: inherit; font-size: 18px; font-weight: 700; gap: 4px; height: 48px; justify-content: center; line-height: 24px; margin: 0; max-width: 100%; padding: 0 24px; text-decoration: none; }
.ci-ctoolbar .ci-ctoolbar-clear { display: inline-flex; }
.ci-ctoolbar .ci-ctoolbar-clear:hover, .ci-ctoolbar .ci-ctoolbar-hub:hover { background: #0d9070; }
.ci-ctoolbar .ci-ctoolbar-clear:active, .ci-ctoolbar .ci-ctoolbar-hub:active { background: #1b5547; }
.ci-ctoolbar .ci-ctoolbar-clear:focus-visible, .ci-ctoolbar .ci-ctoolbar-hub:focus-visible { box-shadow: 0 0 0 1px #ededed, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-ctoolbar .ci-ctoolbar-clear-label, .ci-ctoolbar .ci-ctoolbar-hub-label { margin: -5px 0 -6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-ctoolbar .ci-ctoolbar-clear-icon { display: block; flex: none; height: 12px; width: 12px; }
/* Its own rule: 0410 finds its version by the clear icon's rule text (PR #578 R1.8). */
.ci-ctoolbar .ci-ctoolbar-hub-icon { display: block; flex: none; height: 12px; width: 12px; }
@media (max-width: 1199.98px) { .ci-nlatest-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1199.98px) { .ci-nlatest-grid > .ci-nlatest-item:not([hidden]) ~ .ci-nlatest-item::before { border-top: 1px solid #d9d9d9; content: ''; inset: -17px 0 auto; pointer-events: none; position: absolute; } }
@media (max-width: 1199.98px) {
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-grid { display: flex; gap: 20px; margin: -5px; overflow-x: auto; padding: 5px; scroll-padding-inline: 5px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-item { border: 1px solid #d9d9d9; border-radius: 12px; flex: 0 0 min(328px, 88%); flex-direction: column; gap: 12px; padding: 11px; scroll-snap-align: start; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-grid > .ci-nlatest-item::before { content: none; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-link::after { content: none; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-link:focus-visible::after { border-radius: 8px; content: ''; inset: -3px; outline: 2px solid #5749dd; pointer-events: none; position: absolute; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-thumb { height: 230px; width: 100%; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-body { gap: 12px; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-headline { font-size: 24px; height: 84px; line-height: 28px; margin: 0; overflow: hidden; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-headline a { display: -webkit-box; height: 100%; -webkit-line-clamp: 3; line-clamp: 3; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-excerpt { -webkit-box-orient: vertical; display: -webkit-box; font-size: 14px; font-weight: 400; -webkit-line-clamp: 3; line-clamp: 3; line-height: 20px; margin: 0; overflow: hidden; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-meta { margin-top: auto; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-author { border-top: 1px solid #d9d9d9; padding-top: 12px; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-who { display: flex; flex: 1; flex-direction: column; gap: 4px; justify-content: center; min-height: 32px; min-width: 0; }
  .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-arole { display: block; font-size: 14px; font-weight: 400; line-height: 20px; margin: -4px 0 -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) { .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-item { flex-basis: min(306px, 88%); } }
/* A touch screen swipes, so its scrollbar goes; a mouse keeps a thin one, the row's only way across (no arrows). */
@media (max-width: 1199.98px) and (pointer: coarse) { .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-grid { scrollbar-width: none; } .ci-nlatest:has(> .ci-nlatest-cardmode) .ci-nlatest-grid::-webkit-scrollbar { display: none; } }
.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; }
}