.ci-aprofile * { box-sizing: border-box; }
.ci-aprofile { 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-aprofile { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-aprofile { padding-left: 20px; padding-right: 20px; } }
/* v5 authors frames (0498): a 1px #d9d9d9 frame inside the 20px pad; the byline row keeps its own 16 (avatar 36 in). */
.ci-aprofile-card { background: #f3f3f3; border: 1px solid #d9d9d9; border-radius: 12px; display: flex; flex-direction: column; gap: 20px; padding: 19px; }
.ci-aprofile-top { align-items: center; display: flex; gap: 20px; padding: 16px; }
.ci-aprofile-avatar { background: #d9d9d9; border-radius: 50%; display: flex; flex: none; overflow: hidden; }
.ci-aprofile-photo { display: block; height: 96px; object-fit: cover; width: 96px; }
.ci-aprofile-photo[src=""], .ci-aprofile-photo:not([src]) { opacity: 0; }
.ci-aprofile-body { display: flex; flex: 1; flex-direction: column; gap: 12px; justify-content: center; min-width: 0; overflow-wrap: break-word; }
.ci-aprofile-nameblock { align-self: flex-start; display: flex; flex-direction: column; gap: 8px; max-width: 100%; min-width: 0; }
.ci-aprofile-name { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; margin: -4.98px 0 -5.74px; }
.ci-aprofile-underline { background: #0c866a; display: block; height: 1.5px; }
/* The socials' own row: under the byline on a desktop, last below it (v5 icon-row, 30px discs 8 apart); a wrapped row
   sits 14 under, so no two 44px-high hit areas share a pixel (PR #590 R1.4). */
.ci-aprofile-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 14px 8px; }
/* NL link/social: a 44px-high hit area (4px across, half the gap), the 16px glyph disc (::after) darkens, a double ring. */
.ci-aprofile-soc { align-items: center; background: #aaa1ff; border-radius: 50%; display: inline-flex; flex: none; height: 30px; justify-content: center; position: relative; width: 30px; }
.ci-aprofile-soc::before { content: ''; inset: -7px -4px; position: absolute; }
.ci-aprofile-soc::after { border-radius: 50%; content: ''; height: 16px; left: 7px; position: absolute; top: 7px; width: 16px; }
.ci-aprofile-soc:hover::after { background: #4955dd; }
.ci-aprofile-soc:active::after { background: #3d31b8; }
.ci-aprofile-soc:focus-visible { box-shadow: 0 0 0 1px #f3f3f3, 0 0 0 3px #fff; outline: 2px solid #5749dd; outline-offset: 5px; }
.ci-aprofile-soc-img { display: block; height: 16px; object-fit: contain; position: relative; width: 16px; z-index: 1; }
.ci-aprofile-soc-img[src=''], .ci-aprofile-soc-img:not([src]) { display: none; }
.ci-aprofile-role, .ci-aprofile-bio { font-size: 14px; line-height: 20px; margin: -4.73px 0 -5.4px; }
.ci-aprofile-role { color: #545658; }
.ci-aprofile-bio { color: #202224; }
.ci-aprofile-bio > * { margin: 0; }
.ci-aprofile-bio > * + * { margin-top: 15px; }
.ci-aprofile-stats { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A 48px tile: label and count inside the 1px frame, with no category icon. */
.ci-aprofile-stat { align-items: center; background: #fff; border: 1px solid #d9d9d9; border-radius: 8px; display: flex; gap: 8px; justify-content: space-between; padding: 11px 19px; }
.ci-aprofile-stat-label { color: #202224; flex: 1; font-size: 16px; line-height: 24px; min-width: 0; overflow-wrap: anywhere; }
.ci-aprofile-stat-count { color: #202224; font-size: 16px; font-weight: 700; line-height: 22px; }
/* Under the desktop (authors-tablet and -mobile): the avatar beside the name in two 30/36 lines without a separator,
   role and bio full width, stats in one column, socials last. The body dissolves into the top row's grid. */
@media (max-width: 1199.98px) {
  .ci-aprofile-top { display: grid; gap: 20px; grid-template-columns: 96px minmax(0, 1fr); padding: 0; }
  .ci-aprofile-body { display: contents; }
  .ci-aprofile-avatar { grid-column: 1; grid-row: 1; }
  .ci-aprofile-nameblock { align-self: center; grid-column: 2; grid-row: 1; }
  .ci-aprofile-name { display: flex; flex-direction: column; font-size: 30px; gap: 8px; hyphens: auto; line-height: 36px; margin: 0; }
  .ci-aprofile-firstname, .ci-aprofile-surname { display: block; margin: -6px 0 -9px; }
  html:not([data-editor-canvas]) .ci-aprofile-surname:empty { display: none; }
  .ci-aprofile-underline { display: none; }
  .ci-aprofile-role, .ci-aprofile-bio { grid-column: 1 / -1; line-height: 18px; margin: -3px 0 -5px; }
  .ci-aprofile-stats { grid-template-columns: minmax(0, 1fr); }
  .ci-aprofile-stat-label { font-size: 14px; line-height: 22px; }
  .ci-aprofile-stat-count { font-size: 14px; }
  .ci-aprofile-socials { order: 1; }
}
.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-plist * { box-sizing: border-box; }
.ci-plist { 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-plist { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 560px) { .ci-plist { padding-left: 20px; padding-right: 20px; } }
.ci-plist-title { color: #202224; font-size: 14px; font-weight: 700; line-height: 22px; margin: 0 0 12px; }
/* One column at every width (v5 link-list, 0498): link/quick rows 12 apart, the item's 6px each side. */
.ci-plist-list { list-style: none; margin: 0; padding: 0; }
.ci-plist-item { padding: 6px 0; }
.ci-plist-item:empty { display: none; }
.ci-plist-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-plist-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-plist-link::after { content: ''; inset: -10px 0; position: absolute; }
@media (hover: hover) { .ci-plist-link:hover { color: #000; } }
.ci-plist-link:active { color: #0c866a; }
.ci-plist-link:focus-visible { outline: 2px solid #5749dd; outline-offset: 3px; }
html:not([data-editor-canvas]) .ci-plist-link[aria-current="page"] { color: #202224; cursor: default; font-weight: 700; padding-left: 14px; }
html:not([data-editor-canvas]) .ci-plist-link[aria-current="page"]::before { border-radius: 2px; height: 16px; -webkit-mask: none; mask: none; top: 4px; width: 3px; }
@media (forced-colors: active) { .ci-plist-link::before { background-color: LinkText; forced-color-adjust: none; } html:not([data-editor-canvas]) .ci-plist-link[aria-current="page"]::before { background-color: CanvasText; } }
/* Raw list mode: imported items in the same one column. The render stamps the picked style as data-marker (never on
   the fixed-slot ul, whose links carry link/quick's chevron) and this CSS decides each style's look. */
.ci-plist-body > ul[data-marker] { list-style: none; margin: 0; padding: 0; }
.ci-plist-body > ol[data-marker] { list-style: decimal inside; margin: 0; padding: 0; }
.ci-plist-body > ul[data-marker] > li, .ci-plist-body > ol[data-marker] > li { color: #202224; font-size: 16px; line-height: 24px; padding: 6px 0; }
/* The imported bullet keeps the decor/dot-6 (0475), centred on the first 24px line: its bottom 2px over the baseline. */
.ci-plist-body > ul[data-marker="bullet"] > li::before { background: linear-gradient(217.12deg, #ffbe04 42.21%, #e03327 230.55%); border-radius: 50%; content: ""; display: inline-block; height: 6px; margin-right: 8px; vertical-align: 2px; width: 6px; }
.ci-plist-body li p { display: inline; margin: 0; }
@media (forced-colors: active) { .ci-plist-body > ul[data-marker="bullet"] > li::before { background: CanvasText; forced-color-adjust: none; } }