/* ==========================================================================
   CANDOOR · revamp sections
   Content only: the painting, nav, hero shell and footer are unchanged and
   come from site.css and candoor.css. The scenes are the product's own
   screens (the console at dusk, the participant's page), so inside them the
   product's palette applies; around them, the house palette.
   ========================================================================== */
.cdx-phone [hidden], .cdx-browser [hidden], .scene [hidden] { display: none !important; }
/* The wordmark's "oo" in Candoor's own green italic, as on candoor.yolexlabs.com.
   The one place the product's green appears on this page, by decision. */
.cd-mark__oo { color: #0e6a58; font-style: italic; }

/* The way into the product, under the hero's buttons. */
.cd-access { margin-block-start: 1.4rem; font-size: 0.95rem; color: var(--ink-2); }
.cd-access a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cd-access a::after { content: " →"; }

.cdx-sea { color: var(--sea); }
.cdx-acc { color: var(--accent); }

/* A camera: scenes scale this about a focus point to zoom in and out. */
.cdx-cam { position: relative; width: 100%; height: 100%; transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), transform-origin 1.1s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }

/* The dark stage the map sits on, shared by the other scenes. */
.cdx-stage {
  --st-bg: #16171a; --st-line: #2a2c31; --st-ink: #eceae5; --st-muted: #9a9ca3; --st-faint: #6b6d74;
  --st-teal: #7fc4bd; --st-clay: #ee9a68;
  margin: 0; position: relative; overflow: hidden;
  background: var(--st-bg); color: var(--st-ink);
  border: 1px solid var(--st-line); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(13, 14, 16, 0.12), 0 24px 60px rgba(13, 14, 16, 0.28);
}

/* --- inside and outside --- */
.cdx-io .cdx-cam { aspect-ratio: 2.3 / 1; height: auto; }
.cdx-io canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.io__lab, .io__card, .io__link, .io__find { position: absolute; opacity: 0; translate: 0 8px; transition: opacity 0.6s, translate 0.6s; }
.io__lab.is-in, .io__card.is-in, .io__link.is-in, .io__find.is-in { opacity: 1; translate: 0 0; }
.io__lab { top: 7%; display: grid; gap: 2px; font-size: 0.85rem; }
.io__lab b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }
.io__lab span { font: 400 0.72rem/1 var(--mono); letter-spacing: 0.08em; color: var(--st-muted); text-transform: uppercase; }
.io__lab--in { left: 6%; } .io__lab--in b { color: var(--st-teal); }
.io__lab--out { right: 6%; text-align: right; } .io__lab--out b { color: var(--st-clay); }
.io__card { bottom: 8%; width: min(31%, 300px); padding: 0.85rem 1rem; border-radius: 12px; background: rgba(29, 30, 34, 0.92); border: 1px solid var(--st-line); backdrop-filter: blur(6px); }
.io__card--in { left: 6%; border-left: 3px solid var(--st-teal); }
.io__card--out { right: 6%; border-right: 3px solid var(--st-clay); }
.io__card p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; margin-block: 0.35rem; }
.io__card em { font-style: normal; font-size: 0.78rem; color: var(--st-muted); }
.io__kind { font: 400 0.64rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-faint); }
.io__link { left: 50%; top: 14%; transform: translateX(-50%); font-family: var(--serif); font-style: italic; color: var(--st-muted); font-size: 1.05rem; }
.io__find {
  left: 50%; bottom: 8%; transform: translateX(-50%); width: min(36%, 360px);
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 0.9rem 1rem;
  border-radius: 14px; background: #1d1e22; border: 1px solid var(--st-teal);
  box-shadow: 0 0 0 4px rgba(127, 196, 189, 0.14), 0 18px 40px rgba(0, 0, 0, 0.4);
}
.io__num { width: 26px; height: 26px; border-radius: 50%; background: var(--st-ink); color: var(--st-bg); font: 600 0.75rem/26px var(--mono); text-align: center; }
.io__find .io__kind { color: var(--st-clay); }
.io__find p { font-size: 0.92rem; line-height: 1.35; margin-block: 0.3rem; }
.io__find small { font-size: 0.75rem; color: var(--st-muted); }
.cdx-io.is-fading .cdx-cam { opacity: 0.2; transition: opacity 0.6s; }
.cdx-io figcaption { display: grid; grid-template-columns: 1fr 1fr; border-block-start: 1px solid var(--st-line); background: #1a1b1f; }
.cdx-io figcaption div { padding: 1.1rem 1.4rem; min-width: 0; }
.cdx-io figcaption div + div { border-inline-start: 1px solid var(--st-line); }
.cdx-io figcaption p { color: var(--st-muted); margin-block-start: 0.35rem; font-size: 0.95rem; }
.cdx-io .cdx-sea { color: var(--st-teal); } .cdx-io .cdx-acc { color: var(--st-clay); }

/* --- how it works --- */
.cdx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.cdx-steps::before { content: ""; position: absolute; inset-inline: 0; top: 1.05rem; border-block-start: 1px dashed var(--line-2); }
.cdx-steps li { position: relative; padding-inline-end: 1.25rem; }
.cdx-steps b { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); font: 400 0.72rem/1 var(--mono); color: var(--ink-2); position: relative; }
.cdx-steps h3 { font-size: 1.35rem; margin-block: 1rem 0.4rem; }
.cdx-steps p { color: var(--ink-2); font-size: 0.95rem; }
.cdx-steps__gate b { background: var(--accent); border-color: var(--accent); color: #fff8ef; font-size: 1rem; }
.cdx-steps__gate h3 { color: var(--accent-deep); }

/* --- text beside a product screen --- */
.cdx-duo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cdx-duo--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr); }
.cdx-duo--flip .cdx-duo__text { order: 2; }
.cdx-duo__text h2 { font-size: clamp(1.95rem, 3.9vw, 3rem); margin-block: 1.25rem; }
.cdx-duo__text > p { color: var(--ink-2); font-size: 1.075rem; max-inline-size: 30rem; }
.cdx-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.cdx-ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; color: var(--ink-2); font-size: 1.05rem; }
.cdx-ticks li::before { content: "✓"; color: var(--sea); font-weight: 600; }

/* --- the phone: the participant's real page (taker.css palette) --- */
.cdx-phone {
  --p-bg: #f6f5f1; --p-surface: #fff; --p-line: #e3e0d9; --p-ink: #17181c; --p-muted: #5e6068; --p-accent: #3341e6; --p-accent-soft: #eceefd; --p-good: #1d5e34; --p-good-bg: #e4f1e8;
  justify-self: center; position: relative; width: min(100%, 330px); aspect-ratio: 9 / 18.5;
  border-radius: 46px; padding: 11px; background: #111214;
  box-shadow: 0 0 0 1px #2a2c31, 0 30px 70px rgba(27, 43, 40, 0.35);
  opacity: var(--fade, 1);
}
/* On a short laptop screen the phone (678px) would not fit under the nav.
   It scales as a whole, since a narrower phone would push its draft screen
   out of the bottom. */
@media (min-width: 961px) and (max-height: 800px) { .cdx-phone { zoom: 0.8; } }
.ph__notch { position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 92px; height: 24px; border-radius: 14px; background: #111214; z-index: 3; }
.ph__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--p-bg); color: var(--p-ink); font-family: system-ui, -apple-system, sans-serif; }
.ph__cam { display: grid; grid-template-rows: auto 1fr; }
.ph__head { display: flex; justify-content: space-between; align-items: center; padding: 46px 18px 10px; border-bottom: 1px solid var(--p-line); }
.ph__brand { font-family: var(--serif); font-size: 1rem; }
.ph__pill { font: 500 0.64rem/1 system-ui, sans-serif; padding: 0.4rem 0.6rem; border-radius: 999px; background: #efede8; color: var(--p-muted); transition: background 0.4s, color 0.4s; }
.ph__pill.is-saved { background: var(--p-good-bg); color: var(--p-good); }
.ph__s { grid-row: 2; grid-column: 1; padding: 18px; display: grid; align-content: start; gap: 12px; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
.ph__s.is-on { opacity: 1; visibility: visible; }
.ph__eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); }
.ph__q { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; font-weight: 400; }
.ph__q--sm { font-size: 1.1rem; }
.ph__meta, .ph__hint { font-size: 0.8rem; color: var(--p-muted); }
.ph__night { height: 170px; margin: -18px -18px 4px; background: #0d0e10; }
.ph__night canvas, .ph__wave { display: block; width: 100%; height: 100%; }
.ph__wave { height: 150px; }
.ph__btn { justify-self: stretch; padding: 0.85rem; border: 0; border-radius: 12px; background: var(--p-ink); color: var(--p-bg); font: 600 0.9rem/1 system-ui, sans-serif; transition: transform 0.2s, background 0.3s; }
.ph__btn.is-pressed { transform: scale(0.96); background: var(--p-accent); }
.ph__said { font-size: 0.95rem; line-height: 1.5; color: var(--p-ink); min-height: 7em; }
.ph__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ph__points li { padding: 10px 12px; border-radius: 12px; background: var(--p-surface); border: 1px solid var(--p-line); display: grid; gap: 8px; opacity: 0; translate: 0 6px; transition: opacity 0.4s, translate 0.4s; }
.ph__points li.is-in { opacity: 1; translate: 0 0; }
.ph__points p { font-size: 0.85rem; line-height: 1.4; }
.ph__points s { color: #9f2f22; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 55% / 0 2px no-repeat; transition: background-size 0.5s; }
.is-struck .ph__points s, .ph__points .is-struck s { background-size: 100% 2px; }
.ph__points ins { text-decoration: none; display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; color: var(--p-accent); background: var(--p-accent-soft); border-radius: 4px; transition: max-width 0.6s; }
.ph__points li.is-renamed ins { max-width: 9em; margin-inline-start: 4px; padding-inline: 3px; }
.ph__points li.is-renamed s { display: none; }
.ph__seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #efede8; font-size: 0.68rem; }
.ph__seg span { flex: 1; text-align: center; padding: 5px 4px; border-radius: 7px; color: var(--p-muted); transition: background 0.3s, color 0.3s; }
.ph__points li[data-pick="0"] .ph__seg span:first-child, .ph__points li[data-pick="1"] .ph__seg span:last-child { background: var(--p-surface); color: var(--p-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.ph__bar { padding-top: 4px; }
.ph__bar .ph__btn { width: 100%; }
.ph__done { align-content: center; justify-items: center; text-align: center; min-height: 70%; }
.ph__tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--p-good-bg); color: var(--p-good); font-size: 1.8rem; }

/* --- Ask: the console page at dusk, in a browser window --- */
.cdx-browser {
  --c-bg: #0d0e10; --c-side: #121316; --c-surface: #16171a; --c-line: #25272c; --c-ink: #eceae5; --c-muted: #9a9ca3; --c-faint: #6b6d74; --c-accent: #8089ff; --c-chip: #1c1d21;
  border-radius: 14px; overflow: hidden; background: var(--c-bg); color: var(--c-ink);
  box-shadow: 0 0 0 1px #2a2c31, 0 30px 70px rgba(27, 43, 40, 0.35); opacity: var(--fade, 1);
  font-size: clamp(11px, 1.55vw, 19px);
  font-family: system-ui, -apple-system, sans-serif;
}
.br__view { aspect-ratio: 16 / 9.4; overflow: hidden; }
.br__cam { display: grid; grid-template-columns: 12em 1fr; }
.cs__side { background: var(--c-side); border-right: 1px solid var(--c-line); padding: 1.1em 0.8em; display: grid; align-content: start; gap: 14px; font-size: 0.78em; }
.cs__ws { display: grid; gap: 2px; padding-inline: 6px; } .cs__ws b { font-family: var(--serif); font-weight: 400; font-size: 1em; } .cs__ws span { color: var(--c-faint); font-size: 0.72em; }
.cs__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cs__side li { padding: 6px 8px; border-radius: 7px; color: var(--c-muted); }
.cs__side li.is-on { background: #1f2125; color: var(--c-ink); }
.cs__main { position: relative; overflow: hidden; }
.cs__top { padding: 0.9em 1.4em; font-size: 0.78em; color: var(--c-muted); border-bottom: 1px solid var(--c-line); }
.cs__dots { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%); mask-image: linear-gradient(to bottom, transparent, #000 50%); }
.cs__inner { position: relative; max-width: 36em; margin: 0 auto; padding: 2em 1.2em; display: grid; gap: 10px; text-align: center; }
.cs__inner h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6em; }
.cs__lede { font-size: 0.78em; color: var(--c-muted); line-height: 1.45; }
.cs__composer { text-align: left; padding: 10px 10px 8px 12px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-line); display: grid; gap: 8px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); }
.cs__composer p { font-size: 0.85em; min-height: 2.4em; }
.cs__ph { color: var(--c-faint); }
.cs__caret { display: inline-block; width: 1.5px; height: 1em; background: var(--c-ink); vertical-align: text-bottom; margin-left: 1px; animation: cs-blink 1s steps(1) infinite; }
@keyframes cs-blink { 50% { opacity: 0; } }
.cs__foot { display: flex; align-items: center; gap: 8px; font-size: 0.66em; color: var(--c-muted); }
.cs__foot span { flex: 1; }
.cs__foot b { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--c-chip); color: var(--c-faint); transition: all 0.3s; }
.cs__foot b.is-ready { background: var(--c-ink); color: var(--c-bg); }
.cs__result, .cs__answer { text-align: left; display: none; }
.cs__result.is-on, .cs__answer.is-on { display: grid; gap: 8px; animation: cs-in 0.5s ease both; }
@keyframes cs-in { from { opacity: 0; translate: 0 6px; } }
.cs__result p { font-size: 0.8em; color: var(--c-muted); }
.cs__tools { display: flex; flex-wrap: wrap; gap: 5px; }
.cs__tools span { font-size: 0.66em; padding: 4px 8px; border-radius: 999px; background: var(--c-chip); color: var(--c-muted); opacity: 0; transition: opacity 0.3s; }
.cs__tools span.is-in { opacity: 1; }
.cs__answer { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 14px; }
.cs__answer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cs__answer li { font-size: 0.82em; line-height: 1.45; opacity: 0; transition: opacity 0.5s; }
.cs__answer li.is-in { opacity: 1; }
.cs__answer a { font-size: 0.72em; color: var(--c-accent); white-space: nowrap; opacity: 0; transition: opacity 0.4s; }
.cs__answer li.is-linked a { opacity: 1; }
.cs__answer--no { border-color: #3a3326; }
.cs__answer--no p { font-size: 0.85em; }

/* --- who reads what --- */
.cdx-tree { padding: 1.5rem 1rem 1rem; }
.cdx-tree canvas { display: block; width: 100%; aspect-ratio: 600 / 340; }
.tr__count { text-align: center; font: 400 0.75rem/1 var(--mono); letter-spacing: 0.06em; color: var(--st-muted); opacity: 0; transition: opacity 0.5s; }
.tr__count span { color: var(--st-teal); font-size: 1rem; }
.cdx-tree.is-counting .tr__count { opacity: 1; }

/* Still cards share the stage, with a faint grid of dots behind them. */
.cdx-vault, .cdx-limits, .cdx-flow { background-image: radial-gradient(rgba(236, 234, 229, 0.07) 1px, transparent 1.5px); background-size: 14px 14px; }
.va__kind { font: 400 0.66rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-faint); }

/* --- anonymity: what is held, the fingerprint, what never is --- */
.cdx-vault { display: grid; grid-template-columns: 1fr minmax(220px, 0.8fr) 1fr; gap: 1.5rem; padding: 2rem; align-items: center; }
.va__col { display: grid; gap: 1rem; align-content: start; }
.va__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.va__rows li { display: grid; gap: 2px; padding: 0.8rem 1rem; border-radius: 12px; background: #1d1e22; border: 1px solid var(--st-line); }
.va__rows b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--st-ink); }
.va__rows span { font-size: 0.82rem; color: var(--st-muted); }
.va__col:not(.va__never) .va__rows li { border-left: 3px solid var(--st-teal); }
.va__never .va__rows li { background: transparent; border-style: dashed; }
.va__never .va__rows b { color: var(--st-muted); text-decoration: line-through; text-decoration-color: var(--st-clay); text-decoration-thickness: 2px; }
.va__seal { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.va__seal canvas { width: min(100%, 190px); aspect-ratio: 1; }
.va__seal code { font: 500 0.95rem/1 var(--mono); color: var(--st-teal); letter-spacing: 0.06em; }
.va__seal small { font-size: 0.78rem; color: var(--st-muted); max-width: 22ch; line-height: 1.45; }
.va__foot { grid-column: 1 / -1; list-style: none; margin: 0.5rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--st-line); display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: 0.88rem; color: var(--st-muted); }
.va__foot li::before { content: "•"; color: var(--st-teal); margin-inline-end: 0.5rem; }

/* --- limits: three tiles, each with a picture of the limit --- */
.cdx-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.li__tile { padding: 1.6rem 1.6rem 1.8rem; display: grid; align-content: start; gap: 0.7rem; }
.li__tile + .li__tile { border-left: 1px solid var(--st-line); }
.li__tile h3 { font-size: 1.3rem; color: var(--st-ink); }
.li__tile p { color: var(--st-muted); font-size: 0.92rem; }
.li__art { height: 130px; border-radius: 12px; background: #1d1e22; border: 1px solid var(--st-line); position: relative; overflow: hidden; margin-block-end: 0.4rem; }
.li__bands { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; padding: 0.8rem 0.6rem; gap: 0.4rem; }
.li__bands div { display: grid; justify-items: center; gap: 4px; text-align: center; }
.li__bands i { width: 26px; height: calc(var(--n) * 5px + 6px); background: radial-gradient(circle, var(--st-teal) 1.6px, transparent 2px) 0 0 / 7px 7px; opacity: 0.85; }
.li__bands div:first-child i { background-image: radial-gradient(circle, var(--st-faint) 1.6px, transparent 2px); }
.li__bands span { font: 400 0.62rem/1 var(--mono); color: var(--st-muted); }
.li__bands em { font-style: normal; font-size: 0.66rem; color: var(--st-ink); }
.li__mood canvas, .li__speech canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.li__strike { position: absolute; inset: auto 0.6rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.li__strike s { font-size: 0.7rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(13, 14, 16, 0.85); color: var(--st-muted); text-decoration-color: var(--st-clay); text-decoration-thickness: 1.5px; }
.li__speech canvas { width: 42%; }
.li__arrow { position: absolute; left: 44%; top: 50%; translate: 0 -50%; color: var(--st-muted); }
.li__lines { position: absolute; left: 54%; right: 0.9rem; top: 32%; display: grid; gap: 0.5rem; }
.li__lines i { display: block; height: 6px; border-radius: 3px; background: var(--st-ink); opacity: 0.55; }
.li__gone { position: absolute; left: 0.6rem; bottom: 0.55rem; font-size: 0.68rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(13, 14, 16, 0.85); color: var(--st-clay); }

/* --- setup: sources wired into Candoor, and what comes out --- */
.cdx-flow { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 3rem; padding: 2rem 2.2rem; align-items: center; }
.fl__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fl__col { position: relative; display: grid; gap: 0.7rem; align-content: center; }
.fl__src { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.45rem; justify-items: start; }
.fl__src li { font-family: var(--serif); font-size: 1.1rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: #1d1e22; border: 1px solid var(--st-line); border-left: 3px solid var(--st-teal); }
.fl__src--fb li { border-left-color: var(--st-clay); }
.fl__core { position: relative; display: grid; justify-items: center; gap: 0.4rem; }
.fl__core canvas { width: 170px; height: 150px; border-radius: 18px; background: #0d0e10; border: 1px solid var(--st-line); }
.fl__core b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.fl__out > div { display: grid; gap: 2px; padding: 0.85rem 1rem; border-radius: 12px; background: #1d1e22; border: 1px solid var(--st-line); }
.fl__out b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.fl__out span { font-size: 0.82rem; color: var(--st-muted); }

/* --- setup chips --- */
.cdx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cdx-chips li { font-family: var(--serif); font-size: 1.2rem; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); }
.cdx-chips--uses { margin-block-start: 1.5rem; }
.cdx-chips--uses li { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); background: transparent; border-style: dashed; }

@media (max-width: 960px) {
  .cdx-duo, .cdx-duo--wide { grid-template-columns: minmax(0, 1fr); }
  .cdx-duo--flip .cdx-duo__text { order: 0; }
  .cdx-io .cdx-cam { aspect-ratio: 1 / 1.05; }
  .io__card { width: 44%; bottom: 30%; }
  .io__find { width: 88%; bottom: 4%; }
  .io__link { top: 24%; }
  .br__cam { grid-template-columns: 1fr; }
  .cs__side { display: none; }
  .br__view { aspect-ratio: 4 / 5; }
  .cdx-browser { font-size: 13px; }
  .cdx-steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .cdx-steps::before { inset-block: 0; inset-inline-start: 1.05rem; inset-inline-end: auto; top: 0; border-block-start: 0; border-inline-start: 1px dashed var(--line-2); }
  .cdx-steps li { display: grid; grid-template-columns: 2.1rem 1fr; column-gap: 1rem; }
  .cdx-steps li h3 { margin-block: 0.2rem; }
  .cdx-steps li p { grid-column: 2; }
  .cdx-limits { grid-template-columns: minmax(0, 1fr); }
  .li__tile + .li__tile { border-left: 0; border-top: 1px solid var(--st-line); }
  .cdx-vault { grid-template-columns: minmax(0, 1fr); padding: 1.4rem; }
  .va__seal { order: -1; }
  .cdx-flow { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 1.4rem; }
}
@media (max-width: 620px) {
  /* tree.js draws only the Revenue branch here, the one the story follows. */
  .cdx-tree canvas { aspect-ratio: 300 / 340; }
  .cdx-io figcaption { grid-template-columns: minmax(0, 1fr); }
  .cdx-io figcaption div + div { border-inline-start: 0; border-block-start: 1px solid var(--st-line); }
  .io__lab b { font-size: 1.1rem; }
  .io__card { padding: 0.6rem 0.7rem; }
  .io__card p { font-size: 0.85rem; }
  .io__card em { display: none; }
}