/* ===== Detailed case study pages ===== */
.ch { position: relative; padding: var(--space-4xl) 0 var(--space-section); scroll-margin-top: 0; }
.ch--blue { background: var(--c-blue-100); }
.ch--dark { background: var(--c-grey-950); color: var(--c-white); }
.ch > .wrap > * + * { margin-top: var(--space-4xl); }
.ch .mt-xl { margin-top: var(--space-xl) !important; }
.ch .mt-2xl { margin-top: var(--space-2xl) !important; }
.ch .mt-3xl { margin-top: var(--space-3xl) !important; }
.ch .mt-4xl { margin-top: var(--space-4xl) !important; }
.ch .mt-section { margin-top: var(--space-section) !important; }
.ch .mt-0 { margin-top: 0 !important; }
.pb-4xl { padding-bottom: var(--space-4xl) !important; }
.pb-3xl { padding-bottom: var(--space-3xl) !important; }
.pt-0 { padding-top: 0 !important; }
.indent-l { padding-left: var(--indent-l); }
.indent-m { padding-left: var(--indent-m); }
.indent-s { padding-left: var(--indent-s); }
.indent-t { padding-left: var(--indent-tablet); }
.measure { max-width: var(--mw, none); }
@media (max-width: 1199px) { .measure { max-width: none; } }
.row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.row > * { min-width: 0; }
.center { margin-inline: auto; }
.txt-center { text-align: center; }
.c-body { color: var(--c-grey-850); }
.ch--dark .c-body { color: var(--c-grey-300); }
.c-muted { color: var(--c-grey-600); }
.ch--dark .c-muted { color: var(--c-grey-300); }
.c-kicker { color: var(--c-orange-700); }
.stack { display: flex; flex-direction: column; }
.gap-s { gap: var(--space-s); } .gap-m { gap: var(--space-m); } .gap-l { gap: var(--space-l); } .gap-28 { gap: 28px; } .gap-20 { gap: 20px; }
.vrule { align-self: stretch; width: 1px; background: var(--c-grey-150); flex: none; }
.ch--blue .vrule { background: var(--c-blue-grey-300); }
@media (max-width: 1199px) { .vrule { display: none; } }
.hrule { height: 1px; background: var(--c-grey-950); }

/* Chapter opener */
.opener { display: grid; grid-template-columns: var(--size-chapter-number-col) 1fr; align-items: start; }
.opener__num { font-family: "Instrument Serif", serif; font-size: var(--text-art-chapter-number-famjam); line-height: .8; letter-spacing: -.04em; color: var(--c-blue-600); }
.theme-ds .opener__num { font-family: "Bricolage Outline", "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: var(--text-art-chapter-number-ds); line-height: .85; color: transparent; -webkit-text-stroke: 3px var(--c-orange-500); }
.ch--dark .opener__num { color: var(--c-blue-500); }
.opener__text { display: flex; flex-direction: column; gap: 14px; padding-top: var(--space-opener-kicker-top); }
.opener__kicker { color: var(--c-orange-700); }
.ch--blue .opener__kicker { color: var(--c-orange-800); }
.ch--dark .opener__kicker { color: var(--c-orange-300); }
.opener h2 { max-width: 900px; }
@media (max-width: 699px) { .opener { grid-template-columns: 1fr; } }

/* Figures */
figure { display: flex; flex-direction: column; gap: var(--space-m); }
figcaption { display: flex; gap: 12px; align-items: baseline; }
figcaption .t-label { color: var(--c-orange-700); flex: none; }
.ch--blue figcaption .t-label { color: var(--c-orange-800); }
.ch--dark figcaption .t-label { color: var(--c-orange-300); }
figcaption .t-body-s { color: var(--c-grey-600); }
.ch--dark figcaption .t-body-s { color: var(--c-grey-300); }
.ph { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--c-grey-100); }
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; }
.ph--wide { width: 100%; height: var(--size-photo-wide-h); border-radius: 0; }
.pairs { display: flex; flex-wrap: wrap; gap: 16px; }
.pairs .ph { flex: 1 1 0; min-width: var(--size-pair-min); aspect-ratio: 648 / 564; }

/* Clips */
.clip { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--c-grey-100); flex: none; }
.clip video, .clip img { width: 100%; height: 100%; object-fit: cover; }
.clip-ctl { position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 50%; background: var(--c-grey-950); display: grid; place-items: center; transition: background .2s ease-out; }
.clip-ctl:hover { background: var(--c-grey-800); }
.clip-ctl:active { background: var(--c-orange-700); }
.clip-ctl::before, .clip-ctl::after { content: ""; position: absolute; top: 17px; width: 4px; height: 14px; border-radius: 1px; background: var(--c-white); }
.clip-ctl::before { left: 18px; } .clip-ctl::after { left: 26px; }
.clip-ctl[aria-pressed="true"]::before { left: 19px; top: 16px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--c-white); }
.clip-ctl[aria-pressed="true"]::after { display: none; }

/* Brief and contents */
.brief { padding: var(--space-4xl) 0; }
.brief__row { display: flex; flex-wrap: wrap; gap: var(--space-3xl); }
.brief__q { flex: none; font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-xl); line-height: .8; color: var(--c-blue-500); }
.brief__main { flex: 1 1 0; min-width: min(340px, 100%); max-width: 640px; display: flex; flex-direction: column; gap: 28px; }
.brief__quote { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-headline); line-height: 1.05; letter-spacing: -.01em; }
.brief__quote .qm { color: var(--c-blue-500); }
.brief__cols { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 16px; }
.brief__cols > div { flex: 1 1 0; min-width: 240px; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.brief__result { display: flex; gap: 16px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--c-grey-150); }
.toc { flex: 1 1 0; min-width: min(340px, 100%); max-width: var(--size-contents-max); display: flex; flex-direction: column; gap: 16px; }
.toc ol { display: flex; flex-direction: column; gap: 16px; }
.toc a { display: flex; align-items: baseline; gap: 12px; min-height: 33px; }
.toc a .dots { flex: 1; border-bottom: 2px dotted var(--c-grey-400); transform: translateY(-5px); }
.toc a .n { font-family: "Instrument Serif", serif; font-size: var(--text-serif-quote); color: var(--c-blue-700); }
.toc a:hover .t { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1199px) { .brief__q { display: none; } .brief__main { max-width: none; } }

/* Drop cap */
.dropcap::first-letter { float: left; font-family: "Instrument Serif", serif; font-weight: 400; font-size: var(--text-serif-figure-xl); line-height: .78; margin: .06em 14px 0 0; color: var(--c-blue-600); }
.theme-ds .dropcap::first-letter { color: var(--c-orange-700); }

/* Sidenote + persona */
.sidenote { display: flex; gap: 10px; max-width: 312px; }
.sidenote::before { content: ""; flex: none; width: 2px; background: var(--c-orange-700); }
.persona { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-xl); background: var(--c-blue-100); }
.persona__who { display: flex; gap: 14px; align-items: center; }
.persona__who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.fn { color: var(--c-orange-700); font-size: .8em; vertical-align: super; line-height: 0; }

/* Highlighter */
.hl { background: linear-gradient(var(--c-orange-200), var(--c-orange-200)) no-repeat; background-position: 0 88%; background-size: 100% .4em; }
.js .hl.is-drawable { background-size: 0% .4em; transition: background-size .8s var(--ease-out-expo) .1s; }
.js .hl.is-drawable.is-in { background-size: 100% .4em; }

/* Competitor map */
.cmap { position: relative; width: 100%; aspect-ratio: 572 / 480; border-radius: var(--r-xl); background: var(--c-grey-25); }
.cmap__ax { position: absolute; background: var(--c-grey-300); }
.cmap__lab { position: absolute; color: var(--c-grey-600); }
.cmap__pt { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-6px, -50%); font-size: var(--text-sans-body-s); white-space: nowrap; }
.cmap__pt::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-grey-950); flex: none; }
.cmap__pt--us { transform: translate(-11px, -50%); color: var(--c-blue-700); font-weight: 600; font-size: var(--text-sans-heading-4); }
.cmap__pt--us::before { width: 22px; height: 22px; background: var(--c-blue-700); }
@media (max-width: 699px) { .cmap { aspect-ratio: 358 / 400; } .cmap__pt--us { font-size: 16px; } }

/* "How might we" */
.hmw { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1000px; margin-inline: auto; }
.hmw__line { font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--text-art-hmw-line); line-height: .95; letter-spacing: -.04em; }
.hmw__big { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-art-hmw-big); line-height: .85; letter-spacing: -.02em; color: var(--c-blue-700); }

/* Findings */
.finding { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--space-finding-gap); padding: 22px 0; border-top: 1px solid var(--c-blue-grey-300); }
.finding--lead { padding: var(--space-finding-card-pad); border: 0; border-radius: var(--r-xl); background: var(--c-white); }
.finding__fig { flex: none; min-width: var(--size-finding-figure-min); max-width: var(--size-finding-figure-max); font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-l); line-height: 1; }
.finding--lead .finding__fig { max-width: var(--size-finding-figure-max-lead); font-size: var(--text-art-finding-lead); line-height: .82; color: var(--c-orange-500); }
.finding__what { flex: 1 1 0; min-width: 100px; display: flex; flex-direction: column; gap: 8px; }
.finding__fix { flex: 1 1 0; min-width: 0; color: var(--c-grey-850); }
@media (max-width: 1199px) and (min-width: 700px) { .finding__fix { flex-basis: 100%; padding-left: calc(var(--size-finding-figure-min) + var(--space-finding-gap)); } }

/* Quotes */
.quotes { display: flex; flex-wrap: wrap; gap: var(--space-2xl); }
.quote { position: relative; flex: 1 1 0; min-width: var(--size-pair-min); max-width: 405px; padding-left: 44px; display: flex; flex-direction: column; gap: 16px; }
.quote::before { content: "“"; position: absolute; left: 0; top: -.05em; font-family: "Instrument Serif", serif; font-size: 110px; line-height: .8; color: var(--c-blue-500); }
.quote p { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-lead); line-height: 1.25; }
.quote cite { font-style: normal; color: var(--c-grey-600); }

/* Pull quote */
.pull { display: flex; gap: 28px; max-width: 900px; }
.pull::before { content: ""; flex: none; width: 4px; background: var(--c-orange-500); }
.pull p { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-headline); line-height: 1.05; letter-spacing: -.01em; }

/* Decisions list */
.decisions { display: flex; flex-direction: column; gap: 40px; }
.decisions li { display: flex; gap: 28px; padding-top: 24px; }
.decisions .n { flex: none; width: 80px; font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-headline); line-height: 1; color: var(--c-blue-700); }
.decisions .q { margin-top: 12px; font-family: "Instrument Serif", serif; font-size: var(--text-serif-quote); line-height: 1.35; }
@media (max-width: 699px) { .decisions .n { width: 44px; } .decisions li { gap: 16px; } }

/* Fact cards */
.trio { display: flex; flex-wrap: wrap; gap: var(--space-l); align-items: flex-start; }
.trio > div { flex: 1 1 0; min-width: var(--size-trio-min); display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--r-xl); background: var(--c-white); }
.trio .big { font-family: "Instrument Serif", serif; color: var(--c-blue-700); line-height: 1; }

.todo { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--r-xl); border: 2px dashed var(--c-grey-300); }

/* Stats band */
.stats { display: flex; flex-wrap: wrap; row-gap: var(--space-2xl); }
.stats > div { flex: 1 1 0; min-width: var(--size-stat-band-min); display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 0 0; }
.stats .fig { font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-xl); line-height: .9; letter-spacing: -.02em; }
.stats .fig small { font-size: var(--text-serif-figure-s); letter-spacing: 0; }
.ch--dark .t-label.c-muted { color: var(--c-grey-300); }

.honesty { display: flex; gap: 20px; max-width: 860px; }
.honesty::before { content: ""; flex: none; width: 3px; background: var(--c-orange-500); }
.honesty p { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-lead); line-height: 1.25; }

.snags { display: flex; flex-wrap: wrap; gap: var(--space-2xl); }
.snags > div { flex: 1 1 0; min-width: var(--size-pair-min); display: flex; flex-direction: column; gap: 16px; }
.snags .roman { font-family: "Instrument Serif", serif; font-style: italic; font-size: 72px; line-height: .9; color: var(--c-blue-500); }
.snags blockquote p { font-family: "Instrument Serif", serif; font-size: var(--text-serif-quote); line-height: 1.35; }
.snags cite { display: block; margin-top: 16px; font-style: normal; color: var(--c-grey-500); }

/* Problems answered */
.answer { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 32px 160px; max-width: 1040px; }
.answer__text { flex: 1 1 0; min-width: min(340px, 100%); max-width: 640px; padding-top: 96px; display: flex; flex-direction: column; gap: 18px; }
.answer__p { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-lead); color: var(--c-orange-500); }
.answer__arrow { display: flex; gap: 14px; max-width: 569px; }
.answer__arrow .arrow { font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--c-blue-700); }
.answer .clip { width: var(--size-clip-w); height: var(--size-clip-h); }
@media (max-width: 1199px) { .answer { gap: 32px 48px; } .answer__text { padding-top: 0; } }
@media (max-width: 699px) { .answer { flex-direction: column; align-items: center; } .answer__text { align-self: stretch; } .answer .clip--first { order: 2; } }

/* Reflection */
.nextsteps li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--c-blue-grey-300); }
.nextsteps li:first-child { border-top: 0; }
.nextsteps .n { flex: none; font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-lead); line-height: 1.1; color: var(--c-blue-700); }

.backconcise { padding: var(--space-l) 0 var(--space-4xl); }
.closing .ph--wide { border-radius: 0; }

@media (prefers-reduced-motion: reduce) { .js .hl.is-drawable { background-size: 100% .4em; transition: none; } }

/* ===== Design system detailed ===== */
.theme-ds .toc a .n { color: var(--c-orange-700); }
.theme-ds .brief__q, .theme-ds .brief__quote .qm { color: var(--c-orange-500); }
.numbers { background: var(--c-grey-950); color: var(--c-white); padding: var(--space-3xl) 0 var(--space-4xl); }
.numbers .stats > div { border-top: 1px solid var(--c-grey-800); }
.numbers .stats .fig { font-size: var(--text-serif-figure-xl); }
.found li { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--c-grey-150); }
.found li .t-label-l { color: var(--c-orange-700); flex: none; padding-top: 4px; }
.loop { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.loop__step { flex: 1 1 0; min-width: var(--size-ds-loop-step-min); display: flex; flex-direction: column; gap: 12px; padding: 32px var(--space-ds-loop-pad); border-radius: var(--r-xl); background: var(--c-white); transition: background .3s ease-out, box-shadow .3s ease-out; }
.loop__step.is-lit { box-shadow: 0 0 0 3px var(--c-orange-500); }
.loop__word { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-art-ds-loop-word); line-height: 1; }
.loop__arrow { font-size: 56px; line-height: 1; color: var(--c-orange-700); }
.loop__arrow--down { display: none; transform: rotate(90deg); }
@media (max-width: 699px) { .loop { flex-direction: column; align-items: stretch; } .loop__arrow { display: none; } .loop__arrow--down { display: block; align-self: center; } }
.hint { display: flex; align-items: center; gap: 8px; color: var(--c-blue-700); }
.hint svg { width: 13px; height: 13px; fill: currentColor; }
.audit-table { width: 100%; border-collapse: collapse; background: #f6f7f9; border-radius: 30px; overflow: hidden; font-size: 16px; }
.table-wrap { overflow-x: auto; border-radius: 30px; background: #f6f7f9; padding: 16px 32px 24px; }
.audit-table caption { caption-side: bottom; }
.audit-table th { text-align: left; font-weight: 600; color: #8695aa; padding: 16px 16px 16px 0; font-size: 18px; vertical-align: bottom; }
.audit-table th small { display: block; font-weight: 500; font-size: 14px; }
.audit-table td { padding: 16px 16px 16px 0; border-top: 1px solid #b1bac8; color: #23272e; font-weight: 500; }
.audit-table .sw { display: block; width: 80px; height: 32px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -4px 4px rgba(0,0,0,.25); }
.audit-table .no { padding: 2px 8px; border-radius: 4px; background: var(--c-orange-200); }
.bigquote { position: relative; display: flex; gap: 16px; max-width: 1164px; }
.bigquote__mark { font-family: "Instrument Serif", serif; font-size: var(--text-art-ds-hanging-quote); line-height: .8; color: var(--c-orange-500); flex: none; }
.bluebar { display: flex; gap: 20px; }
.bluebar::before { content: ""; flex: none; width: 3px; background: var(--c-blue-700); }
.tokentest { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 72px 64px 96px; border-radius: var(--r-2xl); background: var(--c-orange-50); }
.tokentest .t-display { position: relative; max-width: 760px; }
.tokentest__q { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-art-ds-question); line-height: .8; color: var(--c-orange-200); pointer-events: none; }
@media (max-width: 699px) { .tokentest { padding: 40px 20px 48px; } .tokentest__q { right: -10px; top: 40%; } }
.spec li { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 32px 0; border-top: 1px solid var(--c-grey-950); }
.spec li:last-child { border-bottom: 1px solid var(--c-grey-950); }
.spec .t-subhead { flex: 0 0 160px; }
.spec .t-body-l { flex: 1 1 0; min-width: 240px; }
.spec__vis { flex: 0 1 506px; min-width: var(--size-ds-spec-visual-min); display: flex; align-items: flex-end; gap: 12px; justify-content: flex-end; }
@media (max-width: 1199px) { .spec__vis { justify-content: flex-start; } }
.spec__vis .sw { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spec__vis .sw i { display: block; width: 56px; height: 56px; border-radius: 50%; }
.spec__vis .sq { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spec__vis .sq i { display: block; background: var(--c-blue-700); }
.spec__vis .sh i { display: block; width: 72px; height: 52px; border-radius: 12px; background: #fff; }
.settings li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--c-grey-150); }
.settings li .t-label { width: 120px; flex: none; color: var(--c-grey-600); }
.sizes { display: flex; align-items: flex-end; gap: 32px; padding-top: 16px; }
.sizes div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sizes i { display: block; background: var(--c-blue-700); }
.sizes .tap { width: 48px; height: 48px; border: 1.5px dashed var(--c-orange-500); border-radius: 8px; display: grid; place-items: center; }
.sizes .tap i { width: 24px; height: 24px; background: var(--c-grey-950); border-radius: 8px; }
.clearspace { display: grid; place-items: center; height: 240px; border-radius: var(--r-xl); background: var(--c-grey-25); }
.clearspace__box { position: relative; display: grid; place-items: center; width: 312px; height: 138px; border: 1.5px dashed var(--c-orange-500); }
.clearspace__box img { width: 240px; height: auto; }
.clearspace__box .t-micro { position: absolute; bottom: -22px; left: 0; color: var(--c-orange-700); }
.approved { display: flex; flex-wrap: wrap; gap: 24px; }
.approved > div { flex: 1 0 120px; display: flex; flex-direction: column; gap: 6px; }
.levels { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: var(--size-ds-levels-w); }
.levels > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 26px 32px; border-radius: var(--r-xl); background: var(--c-white); }
.levels > div:nth-child(2) { width: var(--size-ds-level-2-w); max-width: 100%; }
.levels > div:nth-child(3) { width: var(--size-ds-level-1-w); max-width: 100%; background: var(--c-grey-950); color: var(--c-white); }
.levels .t-label { color: var(--c-orange-700); }
.levels > div:nth-child(3) .t-label { color: var(--c-orange-300); }
.levels .t-body { color: var(--c-grey-600); }
.levels > div:nth-child(3) .t-body { color: var(--c-grey-300); }
.rules li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 24px 0; border-top: 1px solid var(--c-blue-grey-300); }
.rules .n { font-family: "Bricolage Outline", sans-serif; font-weight: 800; font-size: 48px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c-orange-700); flex: none; width: 64px; }
.rules .t-body-l { flex: 1 1 240px; }
.chip { display: inline-block; padding: 8px 14px; border-radius: 8px; background: var(--c-grey-950); color: var(--c-white); }
.fixes { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--size-ds-fix-card-min), 1fr)); gap: 24px; }
.fixes > div { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: var(--r-xl); background: var(--c-grey-25); }
@media (max-width: 699px) { .fixes > div { padding: 24px; } }
.fixfig { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; font-family: "Instrument Serif", serif; font-size: var(--text-art-ds-fix-figure); line-height: 1; color: var(--c-blue-700); }
.fixfig .ar { font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; }
.taplink { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-left: 16px; width: 150px; height: 48px; border: 1.5px dashed var(--c-orange-500); border-radius: 8px; color: var(--c-blue-700); font-weight: 600; font-size: 18px; }
.taplink i { display: block; width: 43px; height: 2px; background: var(--c-blue-700); }
.readas { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; background: var(--c-grey-950); color: var(--c-white); }
.readas .t-micro { color: var(--c-orange-300); }
.avatars { display: flex; }
.avatars i { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -10px; border-radius: 50%; border: 3px solid var(--c-grey-25); color: #fff; font-style: normal; font-weight: 800; font-variation-settings: "opsz" 96; font-size: 20px; }
.tradeoff { flex: 1 1 0; min-width: min(340px, 100%); max-width: 743px; display: flex; flex-direction: column; gap: 64px; padding: 48px 40px; border-radius: var(--r-xl); background: var(--c-orange-50); }
@media (max-width: 699px) { .tradeoff { padding: 32px 20px; gap: 32px; } }
.callout56 { display: flex; flex-wrap: wrap; align-items: center; gap: 32px var(--space-3xl); padding: 24px 96px 24px 48px; border-radius: var(--r-2xl); background: var(--c-white); color: var(--c-grey-950); }
@media (max-width: 1199px) { .callout56 { padding: 32px; } }
@media (max-width: 699px) { .callout56 { padding: 24px 20px; } }
.callout56__n { flex: 1 1 200px; max-width: var(--size-ds-stat-56-max); font-family: "Instrument Serif", serif; font-size: var(--text-art-ds-stat-56); line-height: .8; color: var(--c-orange-500); }
.sysrows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; padding: 28px 0; border-top: 1px solid var(--c-grey-800); }
.sysrows .t-headline { flex: 0 0 280px; font-style: italic; }
.sysrows .t-body-l { flex: 1 1 280px; color: var(--c-grey-300); }
.echo { display: flex; flex-direction: column; }
.echo p { font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--text-art-ds-echo); line-height: 1.1; letter-spacing: -.03em; margin-top: var(--space-ds-echo-gap); white-space: nowrap; }
.echo p:first-child { margin-top: 0; }
.echo .o { font-family: "Bricolage Outline", sans-serif; color: transparent; -webkit-text-stroke: 1px var(--c-grey-600); }
.echo .solid { color: var(--c-orange-300); }
.js .echo.is-armed p { opacity: 0; transform: translateY(-16px); transition: opacity .35s ease-out, transform .35s var(--ease-out-expo); }
.js .echo.is-armed.is-in p { opacity: 1; transform: none; }
.cols3 { display: flex; flex-wrap: wrap; gap: 56px; }
.cols3 > div { flex: 1 1 0; min-width: var(--size-pair-min); max-width: 400px; display: flex; flex-direction: column; gap: 18px; }
.cols3 .first { min-width: var(--size-ds-learned-min); max-width: var(--size-ds-learned-max); }
.dropped li { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-top: 1px solid var(--c-blue-grey-300); }
.nextsteps--ds .n { font-style: normal; font-size: var(--text-serif-quote); }
@media (prefers-reduced-motion: reduce) { .js .echo.is-armed p { opacity: 1; transform: none; transition: none; } }
.ph--auto img { height: auto; }
.ph picture { display: block; }
.theme-ds .ch--dark .opener__num { color: transparent; -webkit-text-stroke-color: var(--c-orange-300); }
.fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199px) { .fixes { grid-template-columns: 1fr; } }