.case-study-body { background: var(--color-background-primary); }
.case-study-shell { min-height: 100vh; overflow: clip; background: var(--color-background-primary); }
.case-study-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 24px; border-bottom: var(--border-width-thin) solid var(--color-stroke-subtle); background: rgba(250, 250, 248, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 220ms ease, box-shadow 220ms ease; }
.case-study-topbar.is-scrolled { background: rgba(250, 250, 248, .96); box-shadow: 0 8px 24px var(--color-surface-white-7); }
.case-study-topbar__context { display: flex; align-items: baseline; gap: 24px; min-width: 0; }
.case-study-topbar__back, .case-study-topbar__breadcrumb, .case-study-topbar__close { font-family: var(--mono); text-decoration: none; text-transform: uppercase; }
.case-study-topbar__back { flex: 0 0 auto; color: var(--violet-text); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.case-study-topbar__breadcrumb { overflow: hidden; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.case-study-topbar__close { flex: 0 0 auto; padding: 8px 12px; border: var(--border-width-thin) solid var(--color-stroke-subtle); border-radius: var(--radius-sm); color: var(--muted); background: var(--color-surface-white-7); font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.case-study-topbar__back:hover, .case-study-topbar__close:hover { color: var(--violet-text); }
.case-study-page { position: relative; font-family: var(--body); }
.case-study-page [hidden] { display: none !important; }
.case-study-section { position: relative; padding: 64px 0 72px; background: var(--color-background-primary); }
.case-study-section--hero { padding-top: 80px; padding-bottom: 64px; }
.case-study-section--secondary { background: var(--color-background-secondary); }
.case-study-section--intake { padding: var(--spacing-64) 0; background: var(--color-background-primary); }
.case-study-section--investigate, .case-study-section--reflection { background: var(--color-background-secondary); }
.case-study-section--at-a-glance, .case-study-section--investigate, .case-study-section--validated, .case-study-section--reflection { padding-bottom: 64px; }
.case-study-section--validated { background: var(--color-background-primary); }
.case-study-container { width: min(1240px, calc(100% - 112px)); margin: 0 auto; }
.case-study-section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.case-study-section-intro > p:not(:where(.case-study-eyebrow, .case-study-section-label)) { max-width: 880px; margin: 0; color: var(--color-text-secondary); font-family: var(--body); font-size: var(--type-size-body); font-weight: 300; line-height: var(--type-lineheight-body); }
.case-study-eyebrow, .case-study-section-label, .case-study-disclosure, .case-study-card small, .case-study-research-row > small, .case-study-research-row__bar + strong, .mock-app__label, .mock-canvas-label, .mock-inspector__head span, .mock-queue-inspector > span, .mock-queue-table__head, .validation-visual__form > span, .validation-visual__review-copy > span { color: var(--muted); font-family: var(--mono); font-size: var(--type-size-caption); font-weight: 500; letter-spacing: var(--type-letterspacing-label); line-height: var(--type-lineheight-label); text-transform: uppercase; }
.case-study-eyebrow { color: var(--violet-text); margin: 0; }
.case-study-section-label { color: var(--color-text-muted); margin: 0; }
.case-study-section-label { display: flex; align-items: center; gap: 16px; width: 100%; }
.case-study-section-label::after { height: var(--border-width-thin); flex: 1; content: ""; background: var(--color-stroke-subtle); }
.case-study-hero__intro { gap: 0; }
.case-study-hero h1 { max-width: 1040px; margin: 32px 0 0; font-family: var(--display); font-size: clamp(3.2rem, 6vw, 5rem); font-weight: 800; line-height: 73px; letter-spacing: -2.4px; }
.case-study-hero h1 em { color: inherit; font-style: normal; font-weight: 800; }
.case-study-hero__intro > p.case-study-lede { max-width: 860px; margin: 32px 0 0; color: var(--color-text-secondary); font-family: var(--display); font-size: var(--type-size-h2); font-weight: 600; line-height: var(--type-lineheight-h2); }
.case-study-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: 0; padding: 0; list-style: none; }
.case-study-hero .case-study-tags { margin-top: 40px; }
.case-study-tags li { display: inline-flex; height: 30px; align-items: center; justify-content: center; padding: var(--spacing-6) var(--spacing-12); border-radius: var(--radius-md); font-family: var(--mono); font-size: var(--type-size-label); font-weight: 400; letter-spacing: var(--type-letterspacing-label); line-height: var(--type-lineheight-label); text-transform: uppercase; white-space: nowrap; }
.case-study-tags li.tag--violet { width: 166px; color: var(--violet-text); background: var(--color-surface-purple-12); }
.case-study-tags li.tag--mint { width: 166px; color: var(--teal-700); background: var(--color-surface-teal-10); }
.case-study-tags li.tag--blue { width: 174px; color: var(--blue-700); background: rgba(59, 130, 246, .12); }
.case-study-tags li.tag--neutral { width: 150px; color: var(--color-text-secondary); background: rgba(160, 156, 184, .12); }
.case-study-hero > .case-study-summary { margin-top: 24px; }
.case-study-hero > .case-study-visual { margin-top: 24px; }
.case-study-section h2 { max-width: 1040px; margin: 0; font-family: var(--display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; line-height: 56px; letter-spacing: 0; }
.case-study-summary { width: 100%; max-width: 100%; min-height: 236px; padding: 48px; background: var(--color-background-primary); }
.case-study-summary__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; height: 140px; margin: 0; }
.case-study-summary__item { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 20px; border: var(--border-width-thin) solid var(--color-stroke-subtle); border-radius: var(--radius-md); background: var(--color-background-primary); }
.case-study-summary__item dt { color: var(--violet-text); font-family: var(--mono); font-size: var(--type-size-label); line-height: var(--type-lineheight-label); letter-spacing: var(--type-letterspacing-label); text-transform: uppercase; }
.case-study-summary__item dd { margin: 0; padding-top: 8px; color: var(--color-text-primary); font-family: var(--body); font-size: 14px; font-weight: 300; line-height: 24px; }
.case-study-section-header { display: flex; align-items: center; gap: 16px; width: 100%; height: 16px; margin: 0 0 24px; color: var(--violet-text); font-family: var(--mono); font-size: var(--type-size-label); font-weight: 400; line-height: var(--type-lineheight-label); letter-spacing: var(--type-letterspacing-label); text-transform: uppercase; }
.case-study-section-header::after { height: var(--border-width-thin); flex: 1; content: ""; background: var(--color-stroke-subtle); }
.case-study-metric-grid, .case-study-outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.case-study-section--at-a-glance h2, .case-study-section--intake h2 { max-width: 1240px; }
.case-study-section--at-a-glance .case-study-metric-grid { gap: 32px; margin-top: 40px; }
.case-study-section--intake .case-study-research-table { margin-top: 40px; }
.case-study-section--investigate .case-study-visual { margin-top: 40px; }
.case-study-section--validated .case-study-visual { margin-top: 24px; }
.case-study-section--validated .case-study-outcome-grid { grid-template-columns: repeat(3, minmax(0, 360px)); gap: 32px; justify-content: space-between; min-height: 356px; margin-top: 24px; padding: 0 48px; background: var(--color-background-primary); }
.case-study-section--reflection .case-study-reflection-table { margin-top: 40px; }
.case-study-outcome-grid { align-items: start; }
.case-study-card { position: relative; overflow: hidden; border: var(--border-width-thin) solid var(--color-stroke-subtle); border-radius: var(--radius-lg); background: var(--color-background-primary); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.case-study-card__accent { display: block; height: 4px; background: var(--color-accent-teal); }
.case-study-card__content { display: flex; min-height: 300px; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; }
.case-study-card--metric { height: 378px; }
.case-study-card--metric .case-study-card__content { min-height: 0; }
.case-study-card__marker { color: var(--color-accent-teal-text); font-size: 48px; line-height: 56px; }
.case-study-card--impact .case-study-card__content { min-height: 0; }
.case-study-card--impact .case-study-card__marker { display: inline-flex; min-width: 40px; height: 32px; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--radius-full); color: var(--color-accent-teal-text); background: var(--color-surface-teal-10); font-family: var(--mono); font-size: var(--type-size-label); font-weight: 500; line-height: var(--type-lineheight-label); letter-spacing: var(--type-letterspacing-label); }
.case-study-card h3 { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: 0; }
.case-study-card p { margin: 0; color: var(--color-text-secondary); font-family: var(--body); font-size: 16px; font-weight: 300; line-height: 24px; }
.case-study-card small { margin-top: auto; color: var(--muted); }
.case-study-research-table { display: flex; flex-direction: column; gap: var(--spacing-8); margin: var(--spacing-24) 0 0; padding: 0; background: var(--white); list-style: none; }
.case-study-research-row { display: grid; grid-template-columns: 2px 40px minmax(0, 1fr) minmax(0, 1fr) 88px; gap: var(--spacing-24); height: calc(var(--spacing-64) + var(--spacing-8)); align-items: center; overflow: hidden; padding: var(--spacing-16); border-bottom: var(--border-width-thin) solid var(--color-stroke-subtle); background: var(--color-background-primary); }
.case-study-research-row__bar { width: 2px; height: 40px; background: var(--color-accent-purple); }
.case-study-research-row > strong { color: var(--violet-text); font-family: var(--mono); font-size: var(--type-size-caption); letter-spacing: var(--type-letterspacing-label); }
.case-study-research-row div { display: flex; height: var(--spacing-40); min-width: 0; flex-direction: column; gap: var(--spacing-4); overflow: clip; }
.case-study-research-row b { font-family: var(--body); font-size: 14px; font-weight: 500; line-height: 18px; }
.case-study-research-row div small { color: var(--color-text-secondary); font-family: var(--body); font-size: 14px; font-weight: 300; line-height: 24px; }
.case-study-research-row p { margin: 0; color: var(--color-text-secondary); font-family: var(--body); font-size: 14px; font-weight: 300; line-height: 24px; }
.case-study-research-row > small { color: var(--muted); }
.case-study-reflection-table { display: flex; flex-direction: column; gap: var(--spacing-8); margin: 32px 0 0; padding: 0; list-style: none; }
.case-study-reflection-row { display: grid; grid-template-columns: 2px 40px minmax(0, 1fr) minmax(0, 1fr) 88px; gap: var(--spacing-24); height: 72px; align-items: center; overflow: hidden; padding: var(--spacing-16); background: var(--color-background-primary); }
.case-study-reflection-row__bar { width: 2px; height: 40px; background: var(--color-accent-purple); }
.case-study-reflection-row > strong { color: var(--violet-text); font-family: var(--mono); font-size: var(--type-size-caption); letter-spacing: var(--type-letterspacing-label); }
.case-study-reflection-row div { display: flex; height: var(--spacing-40); min-width: 0; align-items: center; overflow: clip; }
.case-study-reflection-row b { color: var(--color-text-primary); font-family: var(--body); font-size: 14px; font-weight: 500; line-height: 18px; }
.case-study-reflection-row p { margin: 0; color: var(--color-text-secondary); font-family: var(--body); font-size: 14px; font-weight: 300; line-height: 24px; }
.case-study-reflection-row > small { color: var(--muted); font-family: var(--mono); font-size: var(--type-size-caption); font-weight: 500; line-height: var(--type-lineheight-label); letter-spacing: var(--type-letterspacing-label); text-transform: uppercase; }
.case-study-reflection-divider { height: var(--border-width-thin); margin-top: 40px; background: var(--color-stroke-subtle); }
.case-study-disclosure { min-height: 32px; margin: 24px 0 0; font-size: 10px; font-weight: 400; line-height: 16px; }
.case-study-visual { margin: 32px 0 0; overflow: hidden; border: var(--border-width-thin) solid var(--color-stroke-subtle); border-radius: var(--radius-lg); background: #f6f5fb; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.case-study-visual--export { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.case-study-visual--export img { display: block; width: 100%; height: auto; }
.mock-app { display: grid; grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: 59px auto; min-height: 680px; color: var(--ink); background: #fbfbfc; font-family: var(--body); }
.mock-app__topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 24px; border-bottom: 1px solid #e3e1eb; color: #75718a; background: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.mock-app__topbar strong { color: var(--ink); font-family: var(--display); font-size: 18px; letter-spacing: -.04em; }
.mock-app__topbar-end { margin-left: auto; color: var(--violet-text); font-size: 16px; letter-spacing: .1em; }
.mock-app__sidebar { display: flex; min-width: 0; flex-direction: column; padding: 28px 20px; border-right: 1px solid #e3e1eb; background: #f4f2fa; }
.mock-app__label { margin: 0 0 18px; color: #817d9b; font-size: 9px; }
.mock-app__nav-item { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 8px 10px; border-radius: 4px; color: #5e5b78; font-size: 13px; text-decoration: none; }
.mock-app__nav-item:hover, .mock-app__nav-item.is-active { color: var(--violet-text); background: rgba(107, 93, 212, .1); }
.mock-app__nav-item span { opacity: .5; }
.mock-app__sidebar-note { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 14px; border: 1px solid rgba(107,93,212,.16); border-radius: 8px; background: rgba(255,255,255,.65); }
.mock-app__sidebar-note strong { color: var(--violet-text); font-size: 12px; line-height: 16px; }
.mock-app__sidebar-note span { color: #77738c; font-size: 11px; line-height: 16px; }
.mock-app__workspace { position: relative; min-width: 0; overflow: hidden; padding: 34px 36px; background: #fff; }
.mock-app__workspace-head { position: relative; z-index: 1; }
.mock-app__crumb { margin: 0 0 22px; color: #8b879d; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; }
.mock-app__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.mock-app__title-row h2 { margin: 0 0 5px; font-size: 28px; line-height: 34px; letter-spacing: -.04em; }
.mock-app__title-row p { margin: 0; color: #77738c; font-size: 14px; line-height: 20px; }
.mock-status { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border-radius: 999px; color: #77738c; background: #f0eff5; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
.mock-status--teal { color: var(--teal-700); background: rgba(26,175,139,.12); }
.mock-status--amber { color: var(--amber-700); background: rgba(245,158,11,.14); }
.mock-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.mock-summary-grid > div { display: flex; min-height: 63px; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 16px; border: 1px solid #e6e4ed; border-radius: 6px; background: #fbfbfc; }
.mock-summary-grid span { color: #858198; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.mock-summary-grid strong { font-size: 14px; }
.mock-flow-canvas { position: absolute; top: 254px; right: 46%; bottom: 42px; left: 36px; padding: 24px; border: 1px solid #e6e4ed; border-radius: 8px; background: linear-gradient(135deg, #fafbff, #f5f7fb); }
.mock-canvas-label { margin: 0 0 26px; color: #858198; font-size: 9px; }
.mock-flow-node { position: absolute; width: 150px; padding: 12px; border: 1px solid #d9d7e4; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgba(38,33,69,.06); }
.mock-flow-node span { display: block; margin-bottom: 10px; color: var(--violet-text); font-family: var(--mono); font-size: 9px; }
.mock-flow-node strong, .mock-flow-node small { display: block; }
.mock-flow-node strong { font-size: 12px; }
.mock-flow-node small { margin-top: 5px; color: #858198; font-size: 10px; }
.mock-flow-node--source { top: 90px; left: 8%; }
.mock-flow-node--active { top: 200px; left: 40%; border-color: var(--violet); box-shadow: 0 6px 16px rgba(107,93,212,.16); }
.mock-flow-node--destination { top: 90px; right: 7%; }
.mock-flow-connector { position: absolute; color: var(--violet-text); font-size: 20px; }
.mock-flow-connector--one { top: 145px; left: 31%; }
.mock-flow-connector--two { top: 145px; right: 29%; }
.mock-inspector { position: absolute; top: 164px; right: 36px; bottom: 42px; width: 32%; min-width: 220px; padding: 20px; border: 1px solid #e0ddea; border-radius: 8px; background: #fbfbfe; box-shadow: 0 8px 24px rgba(38,33,69,.08); }
.mock-inspector__head { display: flex; align-items: center; justify-content: space-between; }
.mock-inspector__head button { padding: 0; border: 0; color: #858198; background: transparent; font-size: 20px; cursor: pointer; }
.mock-inspector h3, .mock-queue-inspector h3 { margin: 28px 0 8px; font-size: 18px; letter-spacing: -.03em; }
.mock-inspector p, .mock-queue-inspector p { color: #77738c; font-size: 12px; line-height: 18px; }
.mock-inspector label { display: block; margin: 24px 0 8px; color: #858198; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.mock-select { display: flex; justify-content: space-between; padding: 10px; border: 1px solid #d9d7e4; border-radius: 4px; color: #4d4962; font-size: 12px; }
.mock-button, .mock-actions button { min-height: 34px; padding: 8px 12px; border: 1px solid var(--violet); border-radius: 4px; color: #fff; background: var(--violet); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; cursor: pointer; }
.mock-inspector .mock-button, .mock-queue-inspector .mock-button { width: 100%; margin-top: 24px; }
.mock-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mock-actions button:first-child { border-color: #d9d7e4; color: #5e5b78; background: #fff; }
.mock-queue-stats { display: flex; gap: 28px; margin-top: 28px; color: #858198; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.mock-queue-stats b { color: var(--ink); font-family: var(--display); font-size: 24px; letter-spacing: -.04em; }
.mock-queue-controls { display: flex; align-items: center; gap: 22px; margin: 30px 0 0; padding: 12px 0; border-top: 1px solid #e6e4ed; border-bottom: 1px solid #e6e4ed; color: #858198; font-size: 12px; }
.mock-queue-controls .is-active { color: var(--violet-text); font-weight: 700; }
.mock-search { display: flex; justify-content: space-between; min-width: 130px; margin-left: auto; padding: 8px 10px; border: 1px solid #e6e4ed; border-radius: 4px; }
.mock-queue-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; margin-top: 18px; }
.mock-queue-table { border: 1px solid #e6e4ed; border-radius: 6px; overflow: hidden; }
.mock-queue-table__head, .mock-queue-row { display: grid; grid-template-columns: 84px 1.4fr 1fr .9fr; gap: 12px; align-items: center; padding: 0 14px; }
.mock-queue-table__head { min-height: 36px; background: #f7f6fa; font-size: 8px; }
.mock-queue-row { min-height: 56px; border-top: 1px solid #eceaf1; color: #6c687e; font-size: 11px; }
.mock-queue-row.is-selected { background: rgba(107,93,212,.08); }
.mock-queue-row b { color: var(--violet-text); font-family: var(--mono); font-size: 10px; }
.mock-queue-inspector { padding: 18px; border: 1px solid #e0ddea; border-radius: 6px; background: #fbfbfe; }
.mock-queue-inspector > span { color: #858198; font-size: 9px; }
.mock-queue-inspector strong { display: block; margin-top: 8px; font-size: 13px; }
.mock-inspector__rule { height: 1px; margin: 18px 0; background: #e6e4ed; }
.case-study-validation-grid { display: grid; grid-template-columns: 1.76fr 1fr; gap: 24px; margin-top: 32px; }
.validation-visual { min-height: 540px; overflow: hidden; border: 1px solid #dedce8; border-radius: 12px; background: #fff; }
.validation-visual__topbar { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 20px; border-bottom: 1px solid #e6e4ed; color: #858198; font-family: var(--mono); font-size: 10px; }
.validation-visual__topbar b { color: var(--ink); font-family: var(--display); font-size: 17px; }
.validation-visual__body { display: flex; min-height: 482px; }
.validation-visual__rail { width: 28%; border-right: 1px solid #e6e4ed; background: #f3f1fa; }
.validation-visual__form, .validation-visual__review-copy { width: min(440px, 72%); padding: 54px 42px; }
.validation-visual__form h3, .validation-visual__review-copy h3 { margin: 20px 0 8px; font-size: 24px; line-height: 30px; letter-spacing: -.04em; }
.validation-visual__form p, .validation-visual__review-copy p { margin: 0 0 30px; color: #77738c; font-size: 13px; line-height: 20px; }
.validation-field { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; padding: 12px; border: 1px solid #dfdce8; border-radius: 4px; }
.validation-field span { color: #858198; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.validation-field b { font-size: 13px; font-weight: 500; }
.validation-visual .mock-button { margin-top: 24px; }
.validation-visual--review .validation-visual__body { background: linear-gradient(135deg, #fbfbff, #f7f5fb); }
.validation-visual__review-copy { width: 100%; max-width: 440px; margin: auto; }
.validation-check { margin-top: 14px; color: var(--teal-700); font-size: 13px; }
.case-study-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 34px; padding: 64px 0; border-top: var(--border-width-thin) solid var(--color-stroke-subtle); border-bottom: var(--border-width-thin) solid var(--color-stroke-subtle); }
.case-study-cta__label { margin: 0 0 16px; color: var(--violet-text); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.case-study-cta h3 { max-width: 820px; margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: 0; }
.case-study-cta .button { flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .case-study-container { width: min(100% - 64px, 720px); }
  .case-study-summary { width: 100%; min-height: 0; margin: 0; padding: 32px; }
  .case-study-summary__grid { height: auto; grid-template-columns: 1fr; }
  .case-study-summary__item { min-height: 120px; }
  .case-study-card--metric { height: auto; }
  .case-study-section--validated .case-study-outcome-grid { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 0; background: transparent; }
  .case-study-metric-grid, .case-study-outcome-grid { grid-template-columns: 1fr; }
  .case-study-card__content { min-height: 0; }
  .case-study-research-row { grid-template-columns: 2px 32px minmax(150px, 1fr) 1.4fr; gap: 14px; }
  .case-study-research-row > small { grid-column: 3 / -1; }
  .case-study-reflection-row { grid-template-columns: 2px 32px minmax(150px, 1fr) 1.4fr; gap: 14px; }
  .case-study-reflection-row > small { grid-column: 3 / -1; }
  .case-study-validation-grid { grid-template-columns: 1fr; }
  .mock-app { min-height: 620px; }
  .mock-flow-canvas { right: 42%; }
  .mock-inspector { width: 36%; }
}

@media (max-width: 640px) {
  .case-study-topbar { align-items: flex-start; gap: 12px; padding: 12px 16px; }
  .case-study-topbar__context { align-items: flex-start; flex-direction: column; gap: 3px; }
  .case-study-topbar__breadcrumb { max-width: 210px; }
  .case-study-topbar__close { margin-top: 0; }
  .case-study-section { padding: 48px 0 56px; }
  .case-study-section--hero { padding-top: 56px; }
  .case-study-section--reflection { padding-bottom: 56px; }
  .case-study-container { width: calc(100% - 40px); }
  .case-study-section-intro { gap: 18px; }
  .case-study-hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1.02; letter-spacing: -.06em; }
  .case-study-hero__intro > p.case-study-lede { font-size: 16px; line-height: 24px; }
  .case-study-section h2 { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.08; }
  .case-study-tags li { font-size: 9px; }
  .case-study-research-row { grid-template-columns: 2px 28px 1fr; gap: 10px; align-items: start; padding: 14px 8px; }
  .case-study-research-row div { min-width: 0; }
  .case-study-research-row p { grid-column: 3 / -1; }
  .case-study-research-row > small { grid-column: 3 / -1; }
  .case-study-reflection-row { grid-template-columns: 2px 28px 1fr; gap: 10px; align-items: start; padding: 14px 8px; }
  .case-study-reflection-row div { min-width: 0; }
  .case-study-reflection-row p { grid-column: 3 / -1; }
  .case-study-reflection-row > small { grid-column: 3 / -1; }
  .case-study-cta { align-items: flex-start; flex-direction: column; padding: 40px 0; }
  .case-study-cta .button { width: 100%; }
  .case-study-visual { margin-top: 24px; overflow-x: auto; }
  .mock-app { grid-template-columns: 1fr; grid-template-rows: 52px auto auto; min-width: 0; min-height: 0; }
  .mock-app__topbar { grid-column: 1; height: 52px; padding: 0 16px; }
  .mock-app__sidebar { display: flex; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid #e3e1eb; }
  .mock-app__label, .mock-app__sidebar-note { display: none; }
  .mock-app__nav-item { flex: 0 0 auto; min-height: 30px; padding: 6px 9px; font-size: 11px; }
  .mock-app__nav-item span { display: none; }
  .mock-app__workspace { min-height: 600px; padding: 24px 18px; }
  .mock-app__title-row { flex-direction: column; gap: 14px; }
  .mock-summary-grid { grid-template-columns: 1fr; }
  .mock-flow-canvas { position: relative; top: auto; right: auto; bottom: auto; left: auto; min-height: 250px; margin-top: 28px; }
  .mock-flow-node { width: 125px; }
  .mock-flow-node--source { top: 78px; left: 4%; }
  .mock-flow-node--active { top: 150px; left: 34%; }
  .mock-flow-node--destination { top: 78px; right: 4%; }
  .mock-flow-connector--one { top: 123px; left: 29%; }
  .mock-flow-connector--two { top: 123px; right: 27%; }
  .mock-inspector { position: relative; top: auto; right: auto; bottom: auto; width: 100%; min-width: 0; margin-top: 18px; }
  .mock-queue-stats { gap: 14px; flex-wrap: wrap; }
  .mock-queue-controls { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .mock-queue-body { grid-template-columns: 1fr; }
  .mock-queue-inspector { display: none; }
  .mock-queue-table { min-width: 540px; }
  .mock-app--review-queue .mock-app__workspace { overflow-x: auto; }
  .validation-visual { min-height: 420px; }
  .validation-visual__body { min-height: 362px; }
  .validation-visual__rail { width: 18%; }
  .validation-visual__form, .validation-visual__review-copy { padding: 36px 22px; }
  .validation-visual__form h3, .validation-visual__review-copy h3 { font-size: 20px; line-height: 26px; }
}