/* ==========================================================================
   JM · Case 02 · Crypex — v1.0.0
   Page-only layer on top of case.css. Canvas v2.2 tokens only; Crypex's own
   colours appear inside the product screenshots and the swatch list.
   Rhythm: 32px between blocks, 48px under section heads, ~112px between
   sections.
   ========================================================================== */

.cx { --cx-gap-section: clamp(var(--sp-9), 10vw, 7rem); }

/* ---------- Hero title: one emphasised word ---------- */
.cx-title { font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1.08; max-width: 16ch; }
.cx .display em { font-weight: 500; }

/* ---------- Cover: the brand split with three real screens ---------- */
.case-cover .cx-cover { background: linear-gradient(90deg, #1E1E1E 0 42%, #EDEDED 42% 100%); overflow: hidden; }
/* the dark splash itself: its diagonal plane of light runs along the X */
.cx-cover__brand { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; background: #1E1E1E url("../img/crypex/cover-brand.webp") center / cover no-repeat; }
.cx-cover__brand p { position: absolute; left: 0; right: 0; top: 66%; margin: 0 auto; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #BDBDBD; max-width: 24ch; line-height: 1.5; }
.cx-cover__phones { position: absolute; left: 47%; right: 4%; top: 9%; bottom: -30%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4%; align-items: start; }
.cx-cover__phones img { width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(22, 21, 15, 0.22)); }
.cx-cover__phones img:nth-child(2) { margin-top: -9%; }
.cx-cover__phones img:nth-child(3) { margin-top: 6%; }

/* ---------- At a glance ---------- */
.cx-glance {
  list-style: none; padding: 0; margin: var(--sp-8) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-3);
  background: var(--color-bg-elevated); box-shadow: var(--shadow-hard-lg); overflow: hidden;
}
.cx-glance li { padding: var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-2); align-content: start; }
.cx-glance li + li { border-left: 1px solid var(--color-border-strong); }
.cx-glance strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: var(--tracking-tight); }
.cx-glance span { font-size: var(--fs-14); line-height: 1.5; color: var(--color-text-muted); }

/* ---------- On this page: a quiet index that stays under the toolbar ---------- */
.cx-toc {
  position: sticky; top: var(--nav-height); z-index: 40; margin-top: var(--sp-7);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-strong);
}
.cx-toc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-6); overflow-x: auto; scrollbar-width: none; }
.cx-toc ol::-webkit-scrollbar { display: none; }
.cx-toc a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-subtle); border-bottom: 2px solid transparent; transition: color var(--dur-2), border-color var(--dur-2);
}
.cx-toc a span { color: var(--color-text-subtle); opacity: 0.7; }
.cx-toc a:hover { color: var(--color-text); }
.cx-toc a[aria-current="true"] { color: var(--color-accent-text); border-bottom-color: var(--color-accent-text); }
.cx-toc a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.cx-h2 { scroll-margin-top: calc(var(--nav-height) + 120px); }

/* ---------- Sections ---------- */
.cx-section { margin-top: var(--cx-gap-section); }
.cx-head { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-7); }
.cx-num {
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--ink-900);
  padding: 4px 7px; border: 1px solid var(--ink-900); border-radius: var(--radius-1);
  box-shadow: 1.5px 1.5px 0 var(--ink-900); background: var(--sticky-lilac);
}
.cx-section:nth-of-type(3n+2) .cx-num { background: var(--sticky-mint); }
.cx-section:nth-of-type(3n+3) .cx-num { background: var(--sticky-yellow); }
.cx-kicker, .cx-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-subtle);
}
.cx-h2 { grid-column: 1 / -1; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; max-width: 22ch; }
.cx-h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; }
.cx-label--gap { margin: var(--sp-7) 0 var(--sp-4); }

.cx-prose p { max-width: 62ch; color: var(--color-text-muted); }
.cx-prose p + p { margin-top: var(--sp-4); }
.cx-prose--wide p { max-width: 68ch; }
.cx-note { font-family: var(--font-hand); font-size: 1.1rem; color: var(--color-text-muted); }

.cx-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }

.cx-card {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); background: var(--color-bg-elevated);
  padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-hard-lg);
}
.cx-card .cx-label { margin-bottom: var(--sp-4); }

.cx-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.cx-list li { position: relative; padding-left: var(--sp-5); color: var(--color-text-muted); line-height: 1.6; }
.cx-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px;
  background: var(--sticky-lilac); border: 1px solid var(--ink-900); border-radius: 2px; transform: rotate(45deg);
}
.cx-list strong { color: var(--color-text); font-weight: 600; }
.cx-feature__text .cx-list, .cx-feature__text > p:not(.cx-label) { margin-top: var(--sp-5); }

/* ---------- Challenge ---------- */
.cx-hmw {
  margin: var(--sp-7) 0 0; padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7); max-width: 780px;
  border-left: 3px solid var(--ink-900); background: var(--color-bg-elevated);
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
}
.cx-hmw p:last-child { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.3; letter-spacing: -0.01em; }

.cx-constraints { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.cx-constraints li { border-top: 1px solid var(--color-border-strong); padding-top: var(--sp-4); }
.cx-constraints h3 { font-size: var(--fs-16); font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); }
.cx-constraints p { font-size: var(--fs-14); line-height: 1.6; color: var(--color-text-muted); }
.cx-dot { display: block; width: 14px; height: 14px; border: 1px solid var(--ink-900); border-radius: 50%; }
.cx-dot--coral { background: var(--sticky-coral); }
.cx-dot--yellow { background: var(--sticky-yellow); }
.cx-dot--pink { background: var(--sticky-pink); }
.cx-dot--sky { background: var(--sticky-sky); }

/* ---------- Process steps ---------- */
.cx-steps { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); counter-reset: none; }
.cx-steps li { position: relative; padding: var(--sp-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); background: var(--color-bg-elevated); box-shadow: var(--shadow-hard); }
.cx-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--sp-4)); width: var(--sp-4); height: 1px; background: var(--ink-900);
}
.cx-step__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink-900); border-radius: 50%; font-family: var(--font-mono); font-size: 11px; background: var(--sticky-yellow); }
.cx-steps li:nth-child(3) .cx-step__n { background: var(--sticky-coral); }
.cx-steps h3 { font-size: var(--fs-16); font-weight: 600; margin: var(--sp-3) 0 var(--sp-2); }
.cx-steps p { font-size: var(--fs-14); line-height: 1.55; color: var(--color-text-muted); }

/* ---------- Blocks ---------- */
.cx-block { margin: var(--sp-9) 0 0; }
.cx-block__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-5); margin-bottom: var(--sp-6); }
.cx-after { margin-top: var(--sp-6); }

/* ---------- Flow map ---------- */
.cx-flowframe { background: var(--color-bg-elevated); box-shadow: var(--shadow-hard-lg); padding: var(--sp-7) var(--sp-6); }
.cx-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); gap: var(--sp-6); align-items: center; }
.cx-node { position: relative; display: grid; gap: 4px; padding: var(--sp-4); border: 1px solid var(--ink-900); border-radius: var(--radius-2); background: var(--color-bg-elevated); box-shadow: var(--shadow-hard); }
.cx-node small { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
.cx-node b { font-weight: 600; }
.cx-node span { font-size: var(--fs-13); line-height: 1.45; color: var(--color-text-muted); }
.cx-node--start { background: var(--sticky-lilac); }
.cx-node--start small, .cx-node--start span { color: var(--ink-800); }
.cx-node:not(.cx-node--end)::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: var(--sp-6); height: 12px; transform: translateY(-50%);
  background: no-repeat center / 100% 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' preserveAspectRatio='none'%3E%3Cpath d='M1 6h28M24 1.5 30 6l-6 4.5' fill='none' stroke='%2316150F' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cx-node--end { padding: 0; border: 0; box-shadow: none; background: none; gap: var(--sp-3); }
.cx-outcome { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ink-900); border-radius: var(--radius-2); box-shadow: var(--shadow-hard); }
.cx-outcome--ok { background: var(--sticky-mint); }
.cx-outcome--fail { background: var(--sticky-pink); }
.cx-outcome span { color: var(--ink-800); }

/* ---------- Screens ---------- */
/* exports keep their own rounded corners (alpha), so the shadow follows the phone */
.cx-strip img, .cx-feature__shots img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 14px 20px rgba(22, 21, 15, 0.16));
}
.cx-strip--6 img { filter: drop-shadow(0 8px 12px rgba(22, 21, 15, 0.14)); }

.cx-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.cx-compare__col { margin: 0; padding: var(--sp-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); background: color-mix(in srgb, var(--color-bg-elevated) 60%, transparent); }
.cx-compare__col--final { background: var(--color-bg-elevated); box-shadow: var(--shadow-hard-lg); }
.cx-compare__col .cx-label { margin-bottom: var(--sp-4); }
.cx-compare__col figcaption { margin-top: var(--sp-5); font-size: var(--fs-14); line-height: 1.6; color: var(--color-text-muted); }
.cx-strip { display: grid; gap: var(--sp-3); }
.cx-strip--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); }
.cx-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 620px; }
.cx-compare__col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--sp-7); align-items: end; }
.cx-compare__col .cx-label { grid-column: 1 / -1; }
.cx-compare__col figcaption { margin-top: 0; max-width: 34ch; }

/* ---------- Test notes: what we saw → what changed ---------- */
.cx-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); counter-reset: note; }
.cx-notes li {
  counter-increment: note; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-3); background: var(--color-bg-elevated); overflow: hidden;
}
.cx-notes li::before {
  content: counter(note, decimal-leading-zero); position: absolute; left: var(--sp-5); top: var(--sp-5);
  font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle);
}
.cx-notes__seen, .cx-notes__did { padding: var(--sp-5) var(--sp-6); }
.cx-notes__seen { padding-left: calc(var(--sp-6) + var(--sp-5)); }
.cx-notes__did { background: color-mix(in srgb, var(--sticky-mint) 38%, var(--color-bg-elevated)); border-left: 1px dashed var(--color-border-strong); }
.cx-notes .cx-label { margin-bottom: var(--sp-2); }
.cx-notes p:not(.cx-label) { font-size: var(--fs-15, 0.9375rem); line-height: 1.6; color: var(--color-text-muted); }
.cx-notes__did p:not(.cx-label) { color: var(--color-text); }

/* close-ups: details of a screen, not whole screens again */
.cx-feature__shots.cx-feature__shots--details { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-5); }
.cx-feature__shots--details img { width: min(100%, 420px); border-radius: 18px; border: 1px solid var(--color-border); filter: drop-shadow(0 12px 18px rgba(22, 21, 15, 0.12)); }

/* ---------- Screens: a quiet lift on hover, click to see them up close ---------- */
.cx-strip img, .cx-feature__shots img { transition: transform var(--dur-3) var(--ease-standard), filter var(--dur-3) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .cx-strip img:hover, .cx-feature__shots:not(.cx-feature__shots--details) img:hover { transform: translateY(-4px); filter: drop-shadow(0 18px 24px rgba(22, 21, 15, 0.2)); }
}
.cx-strip img:focus-visible, .cx-feature__shots img:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 12%; }

/* the zoom layer (built in case-crypex.js) */
.cx-zoom { position: fixed; inset: 0; z-index: calc(var(--z-overlay) + 10); background: rgba(247, 243, 234, 0); transition: background var(--dur-3) var(--ease-standard); }
.cx-zoom.is-open { background: rgba(247, 243, 234, 0.94); }
.cx-zoom__img {
  position: fixed; margin: 0; z-index: calc(var(--z-overlay) + 11); transform-origin: center;
  filter: drop-shadow(0 24px 40px rgba(22, 21, 15, 0.22));
  transition: transform 380ms var(--ease-emphasized);
}
@media (prefers-reduced-motion: reduce) {
  .cx-strip img, .cx-feature__shots img, .cx-zoom, .cx-zoom__img { transition: none; }
}

/* ---------- Honest note ---------- */
.cx-honest { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-7); align-items: start; margin-top: var(--sp-9); }
.cx-honest .sticky { transform: rotate(-2deg); max-width: 260px; font-size: 1.3rem; }
.cx-honest .sticky b { display: block; margin-bottom: var(--sp-2); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ---------- Features ---------- */
.cx-feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: center; }
.cx-feature + .cx-feature { margin-top: var(--sp-9); }
.cx-feature--flip .cx-feature__shots { order: 2; }
.cx-feature__shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--radius-3); background: var(--color-bg-sunken); border: 1px solid var(--color-border); }
.cx-feature__shots--one { grid-template-columns: minmax(0, 1fr); }
.cx-feature__shots--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.cx-feature__shots--one img { max-width: 300px; margin-inline: auto; }
.cx-feature__text .cx-label { margin-bottom: var(--sp-3); }
.cx-feature__text > p:not(.cx-label) { color: var(--color-text-muted); max-width: 52ch; }

/* ---------- Visual system ---------- */
.cx-swatches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.cx-swatches li { display: grid; gap: 2px; font-size: var(--fs-13); }
.cx-swatches i { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--ink-900); border-radius: var(--radius-2); background: var(--sw); margin-bottom: var(--sp-2); box-shadow: var(--shadow-hard); }
.cx-swatches b { font-weight: 600; }
.cx-swatches span { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); }
/* ---------- Contrast note: the orange button, as designed vs proposed ---------- */
.cx-contrast { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px dashed var(--color-border-strong); }
.cx-contrast .cx-label { margin-bottom: var(--sp-3); }
.cx-contrast__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.cx-contrast__pair figure { margin: 0; display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--radius-3); background: #F2F2F2; border: 1px solid var(--color-border); }
/* a replica of the app's primary button, set in the iOS system face */
.cx-demo-btn {
  display: grid; place-items: center; height: 48px; border-radius: 12px; background: #F36935; color: #FFFFFF;
  font: 400 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em;
}
.cx-demo-btn--large { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.cx-contrast__pair figcaption { display: grid; gap: 4px; justify-items: start; font-size: var(--fs-13); }
.cx-contrast__pair figcaption b { font-weight: 600; }
.cx-contrast__pair figcaption span:not(.tag) { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); }
.cx-contrast__pair .tag { margin-top: 4px; }

/* ---------- Component kit ---------- */
.cx-kit__intro { margin-bottom: var(--sp-7); }
.cx-kit { position: relative; margin-top: var(--sp-2); background: var(--color-bg-elevated); box-shadow: var(--shadow-hard-lg); padding: var(--sp-6); display: grid; gap: var(--sp-7); }
.cx-kit .frame__label { position: absolute; top: auto; bottom: calc(100% + 6px); left: 0; }
.cx-kit__group .cx-label { margin-bottom: var(--sp-3); }
.cx-kit__row { display: grid; gap: var(--sp-3); align-items: start; }
.cx-kit__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-kit__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-kit__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-kit__row--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.cx-kit__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); }
.cx-kit figure { margin: 0; display: grid; gap: var(--sp-2); }
/* each part sits on the app's own surface, as it does in Figma */
.cx-kit img { display: block; width: 100%; height: auto; background: #F2F2F2; border-radius: var(--radius-2); padding: 6px; box-sizing: border-box; }
.cx-kit__row--cards img { padding: 10px 8px 8px; }
.cx-kit figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-text-subtle); }

/* kit board: one tile per component, its variants stacked inside */
.cx-kit__board { columns: 3 260px; column-gap: var(--sp-4); }
.cx-kit .cx-tile {
  break-inside: avoid; margin: 0 0 var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: grid; gap: var(--sp-4); background: #F2F2F2; border-radius: var(--radius-2);
}
.cx-tile__art { display: grid; gap: var(--sp-3); justify-items: center; }
.cx-tile__art--grid { grid-template-columns: repeat(2, auto); justify-content: center; align-items: end; }
.cx-kit .cx-tile img { max-width: 100%; height: auto; padding: 0; background: none; border-radius: 6px; }
.cx-tile figcaption { display: grid; gap: 2px; padding-top: var(--sp-3); border-top: 1px solid rgba(22, 21, 15, 0.08); }
.cx-tile figcaption b { font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0; color: var(--color-text); }
.cx-tile figcaption span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--color-text-subtle); }
.cx-kit__group + .cx-kit__group { padding-top: var(--sp-6); border-top: 1px dashed var(--color-border); }

/* ---------- Brand ---------- */
.cx-brand { margin-top: var(--sp-2); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--sp-6); align-items: stretch; }
.cx-brand figure { position: relative; margin: 0; background: var(--color-bg-elevated); box-shadow: var(--shadow-hard-lg); padding: var(--sp-5); display: grid; align-content: center; justify-items: center; gap: var(--sp-5); }
.cx-brand .frame__label { position: absolute; top: auto; bottom: calc(100% + 6px); left: 0; }
.cx-brand__split { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-2); overflow: hidden; }
.cx-brand__split img { display: block; width: 100%; height: auto; }
.cx-brand__logo figcaption { font-size: var(--fs-14); line-height: 1.6; color: var(--color-text-muted); max-width: 52ch; justify-self: start; }
.cx-brand__icons img { width: min(140px, 70%); height: auto; border-radius: 22.5%; box-shadow: 0 12px 20px -10px rgba(22, 21, 15, 0.35); }
.cx-brand__splash img { width: min(170px, 80%); height: auto; border-radius: 11% / 5%; border: 1px solid var(--color-border); }

/* ---------- Outcome ---------- */
.cx-roadmap { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.cx-roadmap li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-14); }
.cx-roadmap .tag { min-width: 64px; justify-content: center; text-align: center; }
.cx-reflect { margin: var(--sp-9) auto 0; max-width: 44rem; text-align: center; }
.cx-reflect .hand { font-size: 1.2rem; color: var(--color-text-muted); margin-bottom: var(--sp-3); }
.cx-reflect__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.28; letter-spacing: -0.01em; }
.cx-reflect__quote em { font-style: italic; background: linear-gradient(transparent 62%, var(--sticky-mint) 62%, var(--sticky-mint) 90%, transparent 90%); padding: 0 0.06em; }

.cx ~ .case-next, .cx .case-next { margin-top: var(--cx-gap-section); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-steps li::after { display: none; }
  .cx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-node::after { display: none; }
  .cx-constraints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-compare { grid-template-columns: 1fr; }
  .cx-brand { grid-template-columns: 1fr 1fr; }
  .cx-kit__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-notes li { grid-template-columns: 1fr; }
  .cx-notes__did { border-left: 0; border-top: 1px dashed var(--color-border-strong); padding-left: calc(var(--sp-6) + var(--sp-5)); }
  .cx-kit__split { grid-template-columns: 1fr; }
  .cx-brand__logo { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .cx-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-glance li:nth-child(3) { border-left: 0; }
  .cx-glance li:nth-child(n+3) { border-top: 1px solid var(--color-border-strong); }
  .cx-split, .cx-honest, .cx-feature, .cx-contrast { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cx-feature--flip .cx-feature__shots { order: 0; }
  .cx-compare__col { grid-template-columns: minmax(0, 1fr); }
  .cx-compare__col figcaption { margin-top: var(--sp-5); max-width: none; }
  .cx-feature + .cx-feature { margin-top: var(--sp-8); }
}
@media (max-width: 560px) {
  .cx-steps, .cx-flow, .cx-constraints { grid-template-columns: 1fr; }
  .cx-strip--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-feature__shots { padding: var(--sp-4); gap: var(--sp-3); }
  .cx-flowframe { padding: var(--sp-5); }
  .cx-hmw { padding: var(--sp-5); }
  .cx-glance li { padding: var(--sp-4); }
  .cx-toc ol { gap: var(--sp-5); }
  .cx-kit { grid-template-columns: minmax(0, 1fr); }
  .cx-kit__group { min-width: 0; }
  .cx-kit__board { max-width: none; columns: auto; display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--sp-4)); padding: 2px var(--sp-4) var(--sp-3); scrollbar-width: thin; }
  .cx-kit .cx-tile { flex: 0 0 84%; margin: 0; scroll-snap-align: start; align-self: start; }
  .cx-kit__board:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .cx .frame__label { max-width: 100%; white-space: normal; }
  .cx-feature__shots--three { gap: var(--sp-2); }
  .cx-kit { padding: var(--sp-4); }
  .cx-kit__row--3, .cx-kit__row--2 { grid-template-columns: 1fr; }
  .cx-kit__row--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-cover .cx-cover { background: linear-gradient(180deg, #1E1E1E 0 26%, #EDEDED 26% 100%); }
  .cx-cover__brand { width: auto; right: 0; bottom: auto; height: 26%; }
  .cx-cover__brand p { display: none; }
  .cx-cover__phones { left: 6%; right: 6%; top: 33%; bottom: -60%; }
}