/* case-v2.css: the redesigned case-study pages (amex, amazon). Uses the
   v2.css tokens and type scale. Every rule is scoped to body.cs so it
   outranks site.css and leaves the encrypted Meta/Microsoft pages (which
   still use case-study.css) alone. Page-specific mockups keep their own
   inline styles. */

:root { --cs-amz-ink: #232f3e; --cs-amz-orange: #ff9900; --cs-amz-num: #ffffff; --cs-amz-text: #c9d1db; --cs-panel: #20251f; --cs-panel-text: #c7ccc2; --cs-warn: #7a4b00; --cs-warn-bg: #fbecc8; }
html[data-theme="dark"] { --cs-panel: #1c201b; --cs-warn: #f2c55c; --cs-warn-bg: rgba(242, 197, 92, 0.14); }

/* ── BACK LINK + HEADER ── */
.cs .cs-back { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(32px, 5vw, 56px); font-size: var(--h-t-small); color: var(--h-muted); transition: color 150ms ease-out; }
.cs .cs-back .h-arrow { transition: translate 150ms ease-out; }
.cs .cs-back { position: relative; }
.cs .cs-back::after { content: ""; position: absolute; inset: -10px -6px; }
.cs .art-head { padding: 24px 0 0; border: 0; }
/* category as a lime tag */
.cs .art-cat { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 6px 12px 6px 10px; border: 0; border-radius: 999px; background: var(--h-lime); font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-lime-ink); }
.cs .art-cat::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cs .art-title { font-family: var(--h-sans); font-size: var(--h-t-hero); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; color: var(--h-ink); max-width: 15em; margin: 0 0 28px; text-wrap: balance; }
.cs .art-dek { font-family: var(--h-sans); font-size: var(--h-t-title); line-height: 1.45; letter-spacing: -0.01em; color: var(--h-muted); max-width: 34em; }

/* ── FACTS: a 2x2 ledger, label beside value ── */
.cs .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: clamp(40px, 5vw, 64px); background: none; border: 0; }
.cs .fact { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border: 0; border-top: 1px solid var(--h-line); min-width: 0; }
.cs .facts .fact:nth-last-child(-n+2) { border-bottom: 1px solid var(--h-line); }
.cs .fact-lbl { margin: 0; font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; color: var(--h-muted); }
.cs .fact-val { font-family: var(--h-sans); font-size: var(--h-t-body); font-weight: 400; line-height: 1.45; color: var(--h-ink); }
.cs .fact-list { display: block; }
.cs .fact-list span:not(:last-child)::after { content: ", "; }

/* ── HERO IMAGE ── */
.cs .art-hero { margin-top: clamp(40px, 5vw, 64px); border: 0; border-radius: var(--h-radius); overflow: hidden; background: var(--h-surface); }
.cs .art-hero img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: cover; border-radius: inherit; outline: 1px solid var(--h-img-outline); outline-offset: -1px; }
.cs .art-hero-cap { position: absolute; left: auto; inset-inline-start: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: var(--h-chip-bg); color: var(--h-chip-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
/* Amazon's photo carries its own logo in the bottom-left corner: show the bottom of the frame, caption at the top */
.cs .art-hero img[src*="amazon-hero"] { object-position: center bottom; }
.cs .art-hero img[src*="microsoft-hero"] { max-height: none; } /* 16:10, shown whole */
.cs .art-hero:has(img[src*="amazon-hero"]) .art-hero-cap { top: 16px; bottom: auto; }

/* ── IMPACT METRICS: the results get their own dark panel ── */
.cs .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 4vw, 48px); border: 0; border-radius: var(--h-radius); background: var(--cs-panel); overflow: visible; }
.cs .metrics::before { content: none; }
.cs .metric { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; align-items: flex-start; text-align: start; min-width: 0; }
.cs .metric-num { font-family: var(--h-sans); font-size: var(--h-t-hero); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--h-lime); }
.cs .metric-lbl { font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.45; color: var(--cs-panel-text); white-space: nowrap; }
/* chips under a result (microsoft): what the figure counts, linked to its section */
.cs .metric-chips { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 4px; }
.cs .metric-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--cs-panel-text) 32%, transparent); border-radius: 999px; font-family: var(--h-sans); font-size: var(--h-t-caption); line-height: 1.3; color: var(--cs-panel-text); text-decoration: none; white-space: nowrap; transition: border-color 150ms ease-out, color 150ms ease-out; }
.cs .metric-chip.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--h-lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-lime) 25%, transparent); }

/* ── BODY: sticky contents beside one reading column ── */
.cs .art-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr); column-gap: 48px; margin-top: clamp(72px, 9vw, 128px); border: 0; }
.cs .art-toc { grid-column: 1; grid-row: 1; border: 0; padding: 0; max-width: 220px; }
.cs .art-toc-inner { position: sticky; top: calc(var(--h-header) + 32px); display: flex; flex-direction: column; gap: 2px; padding: 0; }
.cs .art-toc-lbl { margin: 0 0 12px; font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .art-toc a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border: 0; font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.35; color: var(--h-muted); transition: color 150ms ease-out; }
.cs .art-toc a .tn { font-family: var(--h-mono); font-size: var(--h-t-label); color: var(--h-muted); }
.cs .art-toc a.active { color: var(--h-ink); }
.cs .art-toc a.active .tn { color: var(--h-ink); }

.cs .art-prose { grid-column: 2; grid-row: 1; padding: 0; min-width: 0; border: 0; }
.cs .art-prose > * + * { margin-top: 20px; }
.cs .art-prose p { font-family: var(--h-sans); font-size: var(--h-t-body); line-height: 1.7; color: var(--h-text); max-width: none; }
.cs .art-prose p.lead { font-size: var(--h-t-title); line-height: 1.5; letter-spacing: -0.01em; color: var(--h-ink); }
.cs .art-prose strong { font-weight: 600; color: var(--h-ink); }
.cs .art-prose a:not([class]) { color: var(--h-link); }
.cs .art-prose h2 { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(64px, 8vw, 96px); padding: 0; border: 0; font-family: var(--h-sans); font-size: var(--h-t-section); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--h-ink); text-wrap: balance; scroll-margin-top: calc(var(--h-header) + 24px); }
.cs .art-prose h2 .h-num { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; color: var(--h-muted); }
.cs .art-prose .challenge-sub { margin-top: 8px; font-family: var(--h-sans); font-size: var(--h-t-title); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--h-muted); text-transform: none; }
.cs .art-prose ul:not([class]) { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.cs .art-prose ul:not([class]) li { position: relative; padding-inline-start: 24px; font-size: var(--h-t-body); line-height: 1.6; color: var(--h-text); }
.cs .art-prose ul:not([class]) li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 0.75em; width: 8px; height: 1px; background: var(--h-muted); }

/* quote */
.cs .art-quote { margin-block: 40px; padding: 4px 0 4px 24px; border: 0; border-inline-start: 2px solid var(--h-ink); background: none; font-family: var(--h-sans); font-size: var(--h-t-title); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: var(--h-ink); }
.cs .art-quote::before { content: none; }

/* example prompts (Microsoft): what defines the pattern on the left, the prompts as sent chat messages on the right */
.cs .cs-prompts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-block: 40px; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--h-radius); background: var(--h-surface); }
.cs .art-prose .cs-prompts-label { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .art-prose .cs-prompts-traits { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.cs .art-prose .cs-prompts-traits li { position: relative; margin: 0; padding-inline-start: 28px; font-size: var(--h-t-body); line-height: 1.5; color: var(--h-ink); }
.cs .art-prose .cs-prompts-traits li::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(0.75em - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--h-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9.2l2.3 2.3 4.7-5' fill='none' stroke='%2322281c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cs .art-prose .cs-prompts-list { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cs .art-prose .cs-prompt { max-width: 100%; margin: 0; padding: 12px 18px; border: 1px solid var(--h-line); border-radius: 18px 18px 6px 18px; background: var(--h-bg); font-size: var(--h-t-body); line-height: 1.5; color: var(--h-ink); text-wrap: pretty; }
/* goals and non-goals (Microsoft): in scope with lime checks, out of scope muted, side by side */
.cs .cs-scope { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-block: 32px 40px; border-radius: var(--h-radius); background: var(--h-surface); }
.cs .cs-scope-col { padding: clamp(20px, 2.6vw, 32px); }
.cs .cs-scope-col.is-out { border-inline-start: 1px solid var(--h-line); }
.cs .art-prose .cs-scope-label { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .art-prose .cs-scope-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.cs .art-prose .cs-scope-list li { position: relative; margin: 0; padding-inline-start: 28px; font-size: var(--h-t-body); line-height: 1.5; color: var(--h-ink); }
.cs .art-prose .cs-scope-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(0.75em - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--h-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9.2l2.3 2.3 4.7-5' fill='none' stroke='%2322281c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cs .art-prose .is-out .cs-scope-list li { color: var(--h-muted); }
.cs .art-prose .is-out .cs-scope-list li::before { background: var(--h-line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.75 9h6.5' fill='none' stroke='%236c7169' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
@media (max-width: 760px) {
  .cs .cs-scope { grid-template-columns: minmax(0, 1fr); }
  .cs .cs-scope-col.is-out { border-inline-start: 0; border-top: 1px solid var(--h-line); }
}

/* messages the agent sends: on the left, in ink */
.cs .art-prose .cs-prompts-list.is-agent { align-items: flex-start; }
.cs .art-prose .is-agent .cs-prompt { border-color: transparent; border-radius: 18px 18px 18px 6px; background: var(--h-ink); color: var(--h-bg); }
.cs .cs-prompt-ref { padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--h-link) 12%, transparent); font-family: var(--h-mono); font-size: 0.88em; color: var(--h-link); }
@media (max-width: 760px) {
  .cs .cs-prompts { grid-template-columns: minmax(0, 1fr); }
  .cs .art-prose .cs-prompt { max-width: 90%; }
}

/* callout: the case study's objective, set as a statement on the dark results panel */
.cs .callout { margin-block: 48px; padding: clamp(28px, 4vw, 48px); border: 0; border-radius: var(--h-radius); background: var(--cs-panel); }
.cs .callout-lbl { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-lime); }
.cs .callout-lbl::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--h-lime); box-shadow: inset 0 0 0 2px var(--cs-panel), inset 0 0 0 6px var(--h-lime); }
.cs .art-prose .callout p { max-width: 34em; margin: 0; font-family: var(--h-sans); font-size: var(--h-t-title); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: #f3f4f0; text-wrap: pretty; }

/* seller-feedback ticket (amazon): a quote card with its source */
.cs .aq-ticket { display: flex; flex-direction: column; gap: 24px; margin-block: 40px; padding: clamp(24px, 4vw, 40px); border: 0; border-radius: var(--h-radius); background: var(--h-surface); }
.cs .aqt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0; border: 0; background: none; }
.cs .aqt-brand, .cs .aqt-path { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .aqt-brand { color: var(--h-ink); }
.cs .aqt-brand .sq { display: none; }
.cs .aqt-flag { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; padding: 4px 12px; border: 0; border-radius: 999px; background: var(--cs-warn-bg); color: var(--cs-warn); font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.cs .aqt-flag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: none; }
.cs .aqt-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.cs .art-prose .aqt-body blockquote { margin: 0; padding: 0; font-family: var(--h-sans); font-size: var(--h-t-section); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--h-ink); text-wrap: balance; quotes: "“" "”"; }
.cs .aqt-body blockquote::before { content: open-quote; }
.cs .aqt-body blockquote::after { content: close-quote; }
.cs .aqt-meta { display: flex; flex-direction: column; border: 0; border-bottom: 1px solid var(--h-line); }
.cs .aqt-meta > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border: 0; border-top: 1px solid var(--h-line); }
.cs .aqt-meta dt { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .aqt-meta dd { font-family: var(--h-sans); font-size: var(--h-t-small); font-weight: 500; color: var(--h-ink); }

/* research findings (meta): each theme with its strongest quote, the rest of the evidence and what it led to */
.cs .findings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: var(--h-radius); background: var(--h-surface); }
/* one finding per row: the theme and its quote on the left, the evidence beside it, so cards never sit
   next to a neighbour with more or less to say */
.cs .finding { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "n count" "title notes" "quote notes" "led notes"; column-gap: clamp(28px, 4vw, 48px); min-width: 0; padding: clamp(20px, 2.4vw, 28px); border-radius: 16px; background: var(--h-bg); }
.cs .finding-top { display: contents; }
.cs .finding-n { grid-area: n; }
.cs .finding-count { grid-area: count; }
.cs .art-prose .finding-title { grid-area: title; }
.cs .art-prose .finding-quote { grid-area: quote; }
.cs .art-prose .finding-notes { grid-area: notes; align-self: start; }
.cs .art-prose .finding-led { grid-area: led; align-self: end; }
.cs .finding-n, .cs .finding-count { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .finding-n { color: var(--h-ink); }
.cs .art-prose .finding-title { margin: 12px 0 0; font-family: var(--h-sans); font-size: var(--h-t-title); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--h-ink); text-wrap: pretty; }
.cs .art-prose .finding-quote { margin: 20px 0 0; padding: 0 0 0 16px; border: 0; border-inline-start: 3px solid var(--h-lime); background: none; }
.cs .art-prose .finding-quote p { margin: 0; font-family: var(--h-sans); font-size: var(--h-t-body); font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; color: var(--h-ink); text-wrap: pretty; }
.cs .finding-quote cite { display: block; margin-top: 8px; font-family: var(--h-sans); font-size: var(--h-t-caption); font-style: normal; color: var(--h-muted); }
.cs .art-prose .finding-notes { margin: 12px 0 0; padding: 0; list-style: none; }
.cs .art-prose .finding-notes li { margin: 0; padding: 10px 0 0; border-top: 1px solid var(--h-line); font-family: var(--h-sans); font-size: var(--h-t-caption); line-height: 1.5; color: var(--h-muted); }
.cs .art-prose .finding-notes li + li { margin-top: 10px; }
.cs .art-prose .finding-notes li::before { content: none; }
.cs .finding-notes li.is-stat strong { display: block; margin: 8px 0 6px; font-family: var(--h-sans); font-size: var(--h-t-stat); font-weight: 500; line-height: 1; letter-spacing: -0.035em; color: var(--h-ink); }
.cs .finding-notes li span { display: block; margin-bottom: 2px; font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .art-prose .finding-led { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 28px; padding: 8px 14px; border-radius: 999px; background: var(--h-lime); font-family: var(--h-sans); font-size: var(--h-t-small); font-weight: 500; line-height: 1.2; color: var(--h-lime-ink); text-decoration: none; transition: background-color 150ms ease-out; }
.cs .finding-led > span:first-child { font-weight: 400; color: color-mix(in srgb, var(--h-lime-ink) 70%, transparent); }


/* source line under a stat row (microsoft) */
.cs .stat-src { margin-top: -28px; font-family: var(--h-sans); font-size: var(--h-t-caption); line-height: 1.5; letter-spacing: 0; color: var(--h-muted); }

/* research figures inside the prose: a lime panel so they read as evidence, not body text */
.cs .stat-row { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 40px; padding: clamp(24px, 3vw, 32px); border: 0; border-radius: var(--h-radius); background: var(--h-lime); }
.cs .stat-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs .stat-cell { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 clamp(16px, 2vw, 24px); border: 0; border-inline-start: 1px solid color-mix(in srgb, var(--h-lime-ink) 16%, transparent); text-align: start; background: none; }
.cs .stat-cell:first-child { padding-inline-start: 0; border-inline-start: 0; }
.cs .stat-cell:last-child { padding-inline-end: 0; }
.cs .stat-cell .sc-num { font-family: var(--h-sans); font-size: min(3.25rem, 8cqi); font-weight: 500; letter-spacing: -0.035em; line-height: 1; color: var(--h-lime-ink); white-space: nowrap; }
/* two stats: number and label side by side, centred in each half, so the band isn't mostly empty */
.cs .stat-row.cols-2 { padding-block: clamp(20px, 2.4vw, 26px); }
.cs .stat-row.cols-2 .stat-cell { flex-direction: row; align-items: center; justify-content: center; gap: clamp(14px, 2cqi, 22px); }
.cs .stat-row.cols-2 .sc-num { font-size: min(3.5rem, 11cqi); }
.cs .stat-row.is-long .sc-num { font-size: min(2.25rem, 4.6cqi); letter-spacing: -0.025em; }
.cs .stat-cell .sc-lbl { font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.4; color: color-mix(in srgb, var(--h-lime-ink) 72%, transparent); letter-spacing: 0; text-transform: none; text-wrap: pretty; }

/* Amazon's scale (amazon): Amazon's own navy and orange, one tile per figure */
.cs .cs-scale { container-type: normal; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; }
.cs .cs-scale .stat-cell, .cs .cs-scale .stat-cell:first-child, .cs .cs-scale .stat-cell:last-child { row-gap: 6px; padding: 20px; border: 0; border-radius: 16px; background: var(--cs-amz-ink); }
.cs .cs-scale .sc-num { font-size: var(--h-t-section); letter-spacing: -0.02em; line-height: 1.1; }
.cs .cs-scale .cs-ico { width: 28px; height: 28px; margin-bottom: 20px; color: var(--cs-amz-orange); }
.cs .cs-scale .sc-num { color: var(--cs-amz-num); }
.cs .cs-scale .sc-lbl { color: var(--cs-amz-text); }

/* lessons */
.cs .lessons { display: flex; flex-direction: column; margin-block: 32px 0; padding: 0; list-style: none; border-bottom: 1px solid var(--h-line); }
.cs .lessons li { position: static; padding: 20px 0; border-top: 1px solid var(--h-line); font-size: var(--h-t-body); line-height: 1.6; color: var(--h-text); }
.cs .lessons li::before { content: none; }
.cs .lessons li strong { display: block; margin-bottom: 4px; font-size: var(--h-t-title); font-weight: 600; letter-spacing: -0.01em; color: var(--h-ink); }

/* sign-off */
/* closing statement: a small label over the case study's last word, set large */
.cs .art-end { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: clamp(72px, 9vw, 112px); padding-top: 0; border: 0; font-family: var(--h-sans); letter-spacing: 0; color: var(--h-ink); }
.cs .art-end .h-label { display: inline-flex; align-items: center; gap: 10px; }
.cs .art-end .h-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--h-lime); box-shadow: 0 0 0 1px color-mix(in srgb, var(--h-lime-ink) 12%, transparent); }
.cs .art-end .art-end-line { margin: 0; max-width: 18em; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--h-ink); text-wrap: balance; }
.cs .end-caret { display: none; }

/* ── FIGURES ── */
.cs figure.fig { margin-block: 40px; }
.cs figure.fig > img, .cs figure.fig > video, .cs .fig-two img { display: block; width: 100%; height: auto; border: 0; border-radius: 16px; outline: 1px solid var(--h-img-outline); outline-offset: -1px; background: var(--h-surface); }
.cs .fig-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs .fig-cap { display: block; margin-top: 12px; font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.5; letter-spacing: 0; color: var(--h-muted); }
.cs .fig-cap b { font-weight: 600; color: var(--h-ink); }

/* ── FLOW PANEL (amex): one calm surface, steps on a rail ── */
.cs .flowpanel { margin-block: 40px; padding: 24px; border: 0; border-radius: var(--h-radius); background: var(--h-surface); box-shadow: none; overflow: visible; }
.cs .flowpanel::before { content: none; }
.cs .fp-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 0; border: 0; background: none; }
.cs .fp-dot { display: none; }
.cs .fp-title, .cs .fp-meta { font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--h-muted); }
.cs .fp-title { color: var(--h-ink); }
/* the flow as one numbered list on a rail, one step per row, so nothing wraps unevenly */
.cs .fp-rail { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; }
.cs .fp-rail::before { content: none; }
.cs .fp-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; column-gap: 20px; row-gap: 2px; padding: 12px 16px; border: 0; border-radius: 14px; background: none; }
/* the rail: a segment from each step's circle down to the next one */
.cs .fp-step:not(:last-child)::after { content: ""; position: absolute; top: 44px; bottom: -16px; inset-inline-start: 31px; width: 1px; background: color-mix(in srgb, var(--h-ink) 18%, transparent); }
.cs .fp-step.is-key { background: var(--h-lime); color: var(--h-lime-ink); }
.cs .fp-num { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid color-mix(in srgb, var(--h-ink) 18%, transparent); border-radius: 50%; background: var(--h-surface); font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0; color: var(--h-ink); }
.cs .fp-num::before { content: none; }
.cs .fp-label { padding-top: 5px; font-family: var(--h-sans); font-size: var(--h-t-small); font-weight: 600; line-height: 1.35; color: var(--h-ink); }
.cs .fp-sub { margin: 0; font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.45; color: var(--h-muted); text-wrap: pretty; }
.cs .fp-step.is-key .fp-num { border-color: var(--h-lime-ink); background: var(--h-lime-ink); color: var(--h-lime); }
.cs .fp-step.is-key .fp-label, .cs .fp-step.is-key .fp-sub { color: var(--h-lime-ink); }
.cs .fp-step .fp-arrow { display: none; }
.cs .flow-branch { display: block; font-size: var(--h-t-small); color: var(--h-muted); }
.cs .flow-branch b { font-weight: 600; color: var(--h-ink); }
.cs .flow-full { margin-block: 24px; border: 0; }
.cs .flow-full > summary { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--h-line); border-radius: 999px; background: none; font-family: var(--h-sans); font-size: var(--h-t-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--h-ink); cursor: pointer; list-style: none; transition: border-color 150ms ease-out; }
.cs .flow-full > summary::-webkit-details-marker { display: none; }
.cs .flow-full > summary::after { content: "+"; position: static; font-size: 1.1em; line-height: 1; color: var(--h-muted); transform: none; }
.cs .flow-full[open] > summary::after { content: "−"; }
.cs .flowmap-frame { max-height: 70vh; overflow: auto; border: 0; border-radius: 16px; background: var(--h-surface); outline: 1px solid var(--h-img-outline); outline-offset: -1px; }
.cs .flowmap-frame::after { content: none; }
.cs .flowmap-frame img { border: 0; outline: 0; border-radius: 0; }
.cs .flowmap-open { color: var(--h-link); }

/* ── STEPPER (amazon) ── */
.cs .stepper { margin-block: 40px; }
.cs .stepper-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 0; }
.cs .stepper-tab { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px solid var(--h-line); border-radius: 999px; font-family: var(--h-sans); font-size: var(--h-t-small); font-weight: 500; color: var(--h-text); background: none; transition-property: background-color, color, border-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.cs .stepper-tab .tn { font-family: var(--h-mono); font-size: var(--h-t-label); color: var(--h-muted); }
.cs .stepper-tab.is-active { background: var(--h-ink); border-color: var(--h-ink); color: var(--h-bg); }
.cs .stepper-tab.is-active .tn, html[data-theme="dark"] .cs .stepper-tab.is-active .tn { color: color-mix(in srgb, var(--h-bg) 78%, var(--h-ink)); }
.cs .stepper-head { display: flex; align-items: center; gap: 12px; }
.cs .stepper-head .stepper-tabs { flex: 1; min-width: 0; }
.cs .stepper-nav { position: static; flex: none; gap: 8px; margin-inline-start: auto; padding: 0; background: none; box-shadow: none; }
.cs .stepper-step { font-family: var(--h-mono); font-size: var(--h-t-label); color: var(--h-muted); }
.cs .stepper-step b { color: var(--h-ink); }
.cs .stepper-arrow { width: 36px; height: 36px; border: 1px solid var(--h-line); border-radius: 999px; font-size: 1rem; color: var(--h-ink); background: none; }
.cs .stepper-panel { margin-top: 20px; }
.cs .stepper-foot { padding: 6px; gap: 8px; border: 1px solid var(--h-line); border-radius: 999px; background: var(--h-bg); box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.25); }
.cs .sf-btn { padding: 8px 14px; border: 1px solid var(--h-line); border-radius: 999px; background: none; font-family: var(--h-sans); font-size: var(--h-t-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--h-text); }
.cs .sf-next:not([disabled]) { border-color: var(--h-ink); background: var(--h-ink); color: var(--h-bg); }

/* ── NEXT CASE ── */
.cs .next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl arrow" "title arrow"; align-items: center; gap: 8px 24px; margin-top: clamp(72px, 9vw, 128px); padding: clamp(24px, 4vw, 40px); border: 0; border-radius: var(--h-radius); background: var(--h-surface); color: inherit; transition: background-color 150ms ease-out; }
.cs .next-lbl { grid-area: lbl; padding: 0; border: 0; font-family: var(--h-mono); font-size: var(--h-t-label); font-weight: 500; letter-spacing: 0.05em; color: var(--h-muted); }
.cs .next-body { display: contents; }
.cs .next-cat { display: none; }
.cs .next-title { grid-area: title; font-family: var(--h-sans); font-size: var(--h-t-section); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--h-ink); max-width: 24em; text-wrap: balance; }
.cs .next-arrow { grid-area: arrow; position: static; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--h-line); border-radius: 50%; transform: none; font-size: var(--h-t-title); color: var(--h-ink); transition-property: translate, background-color, color, border-color; transition-duration: 150ms; transition-timing-function: ease-out; }

@media (hover: hover) {
  .cs a.metric-chip:hover { border-color: var(--h-lime); color: var(--h-lime); }
  .cs .art-prose .finding-led:hover { background: color-mix(in srgb, var(--h-lime) 84%, var(--h-lime-ink)); }
  .cs .cs-back:hover { color: var(--h-ink); }
  .cs .cs-back:hover .h-arrow { translate: -3px 0; }
  .cs .art-toc a:hover { color: var(--h-ink); }
  .cs .flow-full > summary:hover { border-color: var(--h-ink); }
  .cs .stepper-tab:not(.is-active):hover { border-color: var(--h-ink); color: var(--h-ink); }
  .cs .stepper-arrow:hover:not(:disabled), .cs .sf-btn:hover:not([disabled]) { border-color: var(--h-ink); color: var(--h-ink); }
  .cs .next:hover { background: color-mix(in srgb, var(--h-surface) 70%, var(--h-lime)); }
  .cs .next:hover .next-arrow { background: var(--h-ink); border-color: var(--h-ink); color: var(--h-bg); }
}

/* ── RESPONSIVE ── */
@media (max-width: 1399px) {
  .cs .art-toc { display: none; }
}
/* below desktop: results become a divided ledger, figure left and caption right,
   and the facts a single list, so no column ends up taller than its neighbour */
@media (max-width: 1179px) {
  .cs .metrics { grid-template-columns: max-content minmax(0, 1fr); gap: 0 clamp(24px, 5vw, 48px); padding-block: 8px; }
  .cs .metric { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: normal; align-items: center; padding-block: clamp(20px, 3vw, 28px); }
  .cs .metric + .metric { border-top: 1px solid color-mix(in srgb, var(--cs-panel-text) 18%, transparent); }
  .cs .metric-num { font-size: clamp(2.5rem, 6vw, 3.5rem); }
  .cs .metric-lbl { font-size: var(--h-t-body); white-space: normal; text-wrap: pretty; }
  .cs .metric-chips { grid-column: 2; margin-top: 10px; }
  .cs .facts { grid-template-columns: minmax(0, 1fr); }
  .cs .facts .fact:nth-last-child(2) { border-bottom: 0; }
}
/* phones: the figure sits above its caption, still divided */
@media (max-width: 760px) {
  .cs .finding { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "n" "title" "quote" "count" "notes" "led"; }
  .cs .finding-count { margin-top: 24px; }
}
@media (max-width: 560px) {
  .cs .metrics { grid-template-columns: minmax(0, 1fr); }
  .cs .metric { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .cs .metric-num { font-size: 3rem; }
  .cs .metric-lbl { font-size: var(--h-t-small); }
  .cs .metric-chips { margin-top: 4px; }
}
@media (max-width: 900px) {
  .cs .art-grid { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
  .cs .art-prose { grid-column: 1; }
  .cs .art-prose { padding: 0; max-width: none; }
  .cs .stat-row, .cs .fig-two, .cs .aqt-body { grid-template-columns: minmax(0, 1fr); }
  .cs .stat-row:not(.cs-scale) { grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; padding-block: 8px; }
  .cs .stat-row:not(.cs-scale) .stat-cell { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: normal; align-items: center; padding: 18px 0; border-inline-start: 0; }
  .cs .stat-row:not(.cs-scale) .stat-cell + .stat-cell { border-top: 1px solid color-mix(in srgb, var(--h-lime-ink) 16%, transparent); }
  .cs .stat-row:not(.cs-scale) .sc-num { font-size: 2.5rem; }
  .cs .stat-row.is-long:not(.cs-scale) .sc-num { font-size: 1.75rem; }
  .cs .cs-scale .stat-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico num" "ico lbl"; column-gap: 16px; align-items: center; }
  .cs .cs-scale .cs-ico { grid-area: ico; margin: 0; }
  .cs .cs-scale .sc-num { grid-area: num; }
  .cs .cs-scale .sc-lbl { grid-area: lbl; }
}
@media (max-width: 560px) {
  .cs .fact { grid-template-columns: 6.25em minmax(0, 1fr); gap: 12px; }
  .cs .stat-row:not(.cs-scale) .stat-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .cs .next-arrow { width: 44px; height: 44px; }
  .cs .callout { padding: 24px; }
  .cs .findings { padding: 8px; gap: 8px; }
}
/* small phones: slimmer result chips so a row still fits on one line */
@media (max-width: 399px) {
  .cs .metric-chip { padding-inline: 10px; }
}
/* the narrowest phones: result chips may wrap rather than spill out of the panel */
@media (max-width: 359px) {
  .cs .metric-chips { flex-wrap: wrap; }
}

/* live demo frames (amazon): bars in this system, not the old terminal chrome */
.cs .demo-shell { overflow: hidden; border: 1px solid var(--h-line); border-radius: 16px; }
.cs .demo-bar { gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--h-line); background: var(--h-surface); font-family: var(--h-sans); font-size: var(--h-t-caption); letter-spacing: 0; color: var(--h-muted); }
.cs .demo-dots i { background: color-mix(in srgb, var(--h-ink) 18%, transparent); }
.cs .demo-path { font-family: var(--h-mono); font-size: var(--h-t-label); }
.cs .demo-live { padding: 3px 10px; border-radius: 999px; background: var(--h-lime); color: var(--h-lime-ink); font-weight: 500; }
.cs .demo-open, .cs button.demo-open { color: var(--h-ink); font-weight: 500; }
.cs .demo-bar #mo-tour-btn { padding: 5px 12px; border-radius: 999px; background: var(--h-ink); color: var(--h-bg); font-family: var(--h-sans); font-size: var(--h-t-caption); font-weight: 500; letter-spacing: 0; }
.cs .demo-close { padding: 5px 12px; border-color: var(--h-line); border-radius: 999px; font-family: var(--h-sans); font-size: var(--h-t-caption); letter-spacing: 0; }
.cs .demo-modal { overflow: hidden; border: 0; border-radius: 16px; background: var(--h-bg); }
/* phone mockups: Safari won't clip a scaled iframe to overflow + border-radius; clip-path it */
.cs .phone-screen { clip-path: inset(0 round 29px); }
.cs .mo-note, .cs .phone-cap { font-family: var(--h-sans); font-size: var(--h-t-caption); letter-spacing: 0; }
.cs .mo-tour-lbl { font-family: var(--h-mono); }
@media (hover: hover) {
  .cs .demo-open:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}

/* phones: the hero label sits under the image, and walkthrough tabs scroll beside their arrows */
@media (max-width: 560px) {
  .cs .art-hero-cap { position: static; display: inline-block; margin: 12px; border-radius: 10px; }
  .cs .stepper-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .cs .stepper-tabs::-webkit-scrollbar { display: none; }
  .cs .stepper-tab { flex: none; }
  .cs .stepper-nav .stepper-step { display: none; }
}

/* one wide column: the text and the product UI share the space beside the contents list
   (and the contents column too while it's hidden), so screenshots read at a useful size and
   everything lines up on both edges */
.cs .art-prose { grid-column: 2 / -1; }
@media (max-width: 1399px) {
  .cs .art-prose { grid-column: 1 / -1; }
}

/* click to enlarge: any screenshot opens at full size */
.cs .cs-zoomable { cursor: zoom-in; }
.cs .cs-zoom-wrap { position: relative; }
.cs .cs-zoom-hint { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--h-chip-bg); color: var(--h-chip-ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--h-sans); font-size: var(--h-t-caption); font-weight: 500; pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; }
.cs .cs-zoom-hint svg { width: 12px; height: 12px; }
.cs .cs-zoom-wrap:focus-within .cs-zoom-hint { opacity: 1; }
@media (hover: hover) { .cs .cs-zoom-wrap:hover .cs-zoom-hint { opacity: 1; } }
@media (hover: none) { .cs .cs-zoom-hint { opacity: 1; } }
.cs-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; color: #f3f4f0; }
.cs-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.cs-lightbox::backdrop { background: rgba(12, 14, 12, 0.95); }
.cs-lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: 12px; background: #fff; cursor: zoom-out; }
.cs-lightbox p { max-width: 46rem; margin: 0; font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.5; text-align: center; color: rgba(243, 244, 240, 0.78); }
.cs-lightbox button { position: absolute; top: 16px; inset-inline-end: 16px; padding: 8px 16px; border: 1px solid rgba(243, 244, 240, 0.3); border-radius: 999px; background: none; color: #f3f4f0; font: 500 var(--h-t-small) var(--h-sans); cursor: pointer; }
@media (hover: hover) { .cs-lightbox button:hover { border-color: #f3f4f0; } }

/* goals as tiles (amazon): a bold marker, the goal, and the plain sentence behind it */
.cs .cs-goals { margin-block: 40px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--h-radius); background: var(--h-surface); }
.cs .art-prose .cs-goals ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.cs .art-prose .cs-goals li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 20px; border-radius: 16px; background: var(--h-bg); }
.cs .cs-goal-mark { display: grid; place-items: center; align-self: flex-start; width: 64px; height: 56px; margin-bottom: 14px; border-radius: 14px; background: var(--h-lime); color: var(--h-lime-ink); font-family: var(--h-sans); font-size: 1.75rem; font-weight: 500; line-height: 1; }
.cs .cs-goal-mark.is-num { font-size: 1.25rem; letter-spacing: -0.02em; }
.cs .cs-goals li b { font-family: var(--h-sans); font-size: var(--h-t-body); font-weight: 600; color: var(--h-ink); }
.cs .cs-goals li span:last-child { font-family: var(--h-sans); font-size: var(--h-t-small); line-height: 1.45; color: var(--h-muted); }
@media (max-width: 700px) {
  .cs .art-prose .cs-goals ul { grid-template-columns: minmax(0, 1fr); }
  .cs .art-prose .cs-goals li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; }
  .cs .cs-goal-mark { grid-row: 1 / span 2; margin: 0; }
}

/* intro: on desktop the facts are a slim column beside the title. The header's parts join the
   intro grid, so the facts run from the top of the title to the last line of the description. The
   facts take their height from the title and description (height 0, stretched back by min-height),
   so a tall facts column never pushes the description away from the title */
@media (min-width: 1100px) {
  .cs .cs-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); grid-template-rows: auto auto auto; column-gap: clamp(48px, 6vw, 96px); padding-top: 24px; }
  .cs .cs-intro .art-head { display: contents; }
  .cs .cs-intro .art-cat { grid-column: 1; grid-row: 1; justify-self: start; }
  .cs .cs-intro .art-title { grid-column: 1; grid-row: 2; }
  .cs .cs-intro .art-dek { grid-column: 1; grid-row: 3; }
  /* the title's first line box starts a little above its capitals; the dek's last ends a little below its baseline */
  .cs .cs-intro .facts { grid-column: 2; grid-row: 2 / 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto); align-content: stretch; height: 0; min-height: calc(100% - var(--h-t-hero) * 0.14 - var(--h-t-title) * 0.2 - 18px); margin: calc(var(--h-t-hero) * 0.14 + 8px) 0 calc(var(--h-t-title) * 0.2 + 10px); }
  .cs .cs-intro .fact { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4px; padding: 8px 0; }
  .cs .cs-intro .facts .fact:nth-last-child(-n+2) { border-bottom: 0; }
  .cs .cs-intro .facts .fact:last-child { border-bottom: 1px solid var(--h-line); }
  .cs .cs-intro .fact-val { font-size: var(--h-t-small); line-height: 1.45; }
}