/*
 * Universal single case page.
 * Scope: .page--case-detail and .case-detail
 */

.page--case-detail {
  background: #f6f9fd;
}

.case-detail,
.case-detail *,
.case-detail *::before,
.case-detail *::after {
  box-sizing: border-box;
}

.case-detail {
  overflow: hidden;
  color: var(--text, #152b49);
  background:
    radial-gradient(circle at 7% 0%, rgba(31, 111, 235, .07), transparent 25%),
    linear-gradient(180deg, #f7faff 0%, #fff 34%, #f4f8fd 100%);
}

.case-detail :where(section, article, div, figure, header, nav, aside, dl, ol, ul, table, p, h1, h2, h3, span, a) {
  min-width: 0;
}

.case-detail__breadcrumbs {
  padding-top: 22px;
  padding-bottom: 18px;
}

.case-detail-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 13px;
  color: #0756c8;
  background: #e8f2ff;
  border: 1px solid #d5e7ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}

.case-detail h1,
.case-detail h2,
.case-detail h3 {
  color: #0e2d63;
  font-family: var(--font-heading, inherit);
}

.case-detail h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.032em;
}

.case-detail h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.25;
}

.case-detail-hero {
  padding: 0 0 26px;
}

.case-detail-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  padding: clamp(34px, 5vw, 66px);
  background: rgba(255, 255, 255, .93);
  border: 1px solid #dfe8f4;
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(25, 67, 117, .1);
}

.case-detail-hero h1 {
  max-width: 860px;
  margin: 20px 0 0;
  font-size: clamp(39px, 4.6vw, 66px);
  font-weight: 880;
  line-height: 1.04;
  letter-spacing: -.042em;
}

.case-detail-hero__lead {
  max-width: 820px;
  margin: 24px 0 0;
  color: #48627f;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
}

.case-detail-author-meta {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(330px, 1.1fr);
  gap: 22px;
  align-items: center;
  margin-top: 34px;
  padding: 18px;
  background: #fff;
  border: 1px solid #e1e9f3;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(35, 77, 126, .06);
}

.case-detail-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 18px;
  border-right: 1px solid #e2eaf4;
}

.case-detail-author__photo {
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #0b61dd, #39a3ef);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(10, 91, 205, .2);
}

.case-detail-author__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-detail-author__initials {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .04em;
}

.case-detail-author strong,
.case-detail-author small {
  display: block;
}

.case-detail-author strong {
  color: #12366d;
  font-size: 15px;
}

.case-detail-author small {
  margin-top: 4px;
  color: #62758b;
  font-size: 12px;
}

.case-detail-publication-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}

.case-detail-publication-meta div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  font-size: 12px;
  line-height: 1.35;
}

.case-detail-publication-meta dt {
  color: #7b8da1;
}

.case-detail-publication-meta dd {
  margin: 0;
  color: #1c4f91;
  font-weight: 750;
}

.case-detail-hero__visual {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  margin: 0;
  background: #e7eff8;
  border-radius: 24px;
  box-shadow: 0 20px 44px rgba(20, 62, 108, .14);
}

.case-detail-hero__visual::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 37, 79, .02), rgba(4, 37, 79, .15));
  content: '';
}

.case-detail-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.case-detail-hero-dashboard {
  position: absolute;
  z-index: 2;
  right: clamp(16px, 4vw, 46px);
  bottom: clamp(16px, 4vw, 42px);
  width: min(440px, calc(100% - 32px));
  padding: 20px;
  color: #0f3167;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(7, 39, 80, .24);
  backdrop-filter: blur(12px);
}

.case-detail-hero-dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  font-weight: 750;
}

.case-detail-hero-dashboard__head strong {
  color: #0b64dc;
  font-size: 24px;
}

.case-detail-hero-dashboard svg {
  display: block;
  width: 100%;
  height: 88px;
  margin-top: 10px;
  overflow: visible;
}

.case-detail-hero-dashboard polyline {
  fill: none;
  stroke: #186ee6;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.case-detail-hero-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.case-detail-hero-dashboard__stats span {
  padding: 9px 10px;
  background: #f3f7fc;
  border: 1px solid #e1eaf5;
  border-radius: 10px;
}

.case-detail-hero-dashboard__stats small,
.case-detail-hero-dashboard__stats strong {
  display: block;
}

.case-detail-hero-dashboard__stats small {
  overflow: hidden;
  color: #77899d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-detail-hero-dashboard__stats strong {
  margin-top: 3px;
  color: #0e3f85;
  font-size: 12px;
}

.case-detail-facts {
  padding: 0 0 38px;
}

.case-detail-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.case-detail-fact {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(38, 75, 119, .06);
}

.case-detail-icon {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #075ed4;
  background: #eaf3ff;
  border-radius: 14px;
}

.case-detail-icon svg,
.case-detail-list-card header span svg,
.case-detail-notice span svg,
.case-detail-results-head > p span svg,
.case-detail-result-explanation p span svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-detail-fact small,
.case-detail-fact strong {
  display: block;
}

.case-detail-fact small {
  color: #7a8b9f;
  font-size: 11px;
}

.case-detail-fact strong {
  margin-top: 5px;
  color: #123d7b;
  font-size: 14px;
  line-height: 1.35;
}

.case-detail-toc {
  position: sticky;
  z-index: 15;
  top: 0;
  border-top: 1px solid #e4ebf4;
  border-bottom: 1px solid #e4ebf4;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(15px);
}

.case-detail-toc__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.case-detail-toc__inner::-webkit-scrollbar {
  display: none;
}

.case-detail-toc span {
  flex: 0 0 auto;
  color: #6d7f94;
  font-size: 12px;
  font-weight: 750;
}

.case-detail-toc a {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #164b91;
  background: #f1f6fc;
  border: 1px solid #dde7f2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.case-detail-toc a:hover,
.case-detail-toc a:focus-visible {
  color: #fff;
  background: #0b63d9;
  border-color: #0b63d9;
}

.case-detail-intro,
.case-detail-section,
.case-detail-editor-content,
.case-detail-final {
  padding: 76px 0;
}

.case-detail-section--soft {
  background: #f5f8fc;
  border-top: 1px solid #e3ebf4;
  border-bottom: 1px solid #e3ebf4;
}

.case-detail-panel {
  padding: clamp(26px, 4vw, 44px);
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(34, 72, 116, .06);
}

.case-detail-prose {
  color: #415c79;
  font-size: 16px;
  line-height: 1.75;
}

.case-detail-prose p {
  margin: 0 0 16px;
}

.case-detail-prose p:last-child {
  margin-bottom: 0;
}

.case-detail-copy {
  max-width: 980px;
}

.case-detail-copy > .case-detail-prose {
  margin-top: 18px;
}

.case-detail-copy blockquote {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  max-width: 780px;
  margin: 26px 0 0;
  padding: 20px 24px;
  color: #123f7f;
  background: #eef5ff;
  border: 1px solid #dbeaff;
  border-radius: 16px;
}

.case-detail-copy blockquote > span {
  color: #0b64df;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.case-detail-copy blockquote p {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
}

.case-detail-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.case-detail-list-card {
  padding: 28px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(34, 72, 116, .06);
}

.case-detail-list-card header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.case-detail-list-card header span {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.case-detail-list-card--problem header span {
  color: #e33b49;
  background: #fff0f2;
}

.case-detail-list-card--goal header span {
  color: #16944d;
  background: #ebfbf1;
}

.case-detail-list-card h3 {
  font-size: 21px;
}

.case-detail-list-card ul {
  display: grid;
  gap: 13px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.case-detail-list-card li {
  position: relative;
  padding-left: 24px;
  color: #455f7c;
  font-size: 14px;
  line-height: 1.55;
}

.case-detail-list-card li::before {
  position: absolute;
  top: 8px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  content: '';
}

.case-detail-list-card--problem li::before {
  color: #e34752;
}

.case-detail-list-card--goal li::before {
  color: #1a9b50;
}

.case-detail-research-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
  margin-top: 18px;
}

.case-detail-research-grid .case-detail-prose {
  margin-top: 18px;
}


.case-demand-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(176px, 190px) minmax(220px, 1fr);
  grid-template-rows: repeat(3, minmax(136px, auto));
  gap: 18px 20px;
  align-items: stretch;
  min-height: 470px;
  padding: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe8f2;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(34, 72, 116, .08);
}

.case-demand-map::before {
  display: none;
}

.case-demand-map__center {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  padding: 18px 12px;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, #0e4da0, #173a78);
  border: 9px solid #eef5ff;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(20, 66, 125, .25);
}

.case-demand-map__center::before {
  position: absolute;
  z-index: -1;
  inset: -22px;
  pointer-events: none;
  border: 1px dashed rgba(72, 125, 197, .28);
  border-radius: 50%;
  content: '';
}

.case-demand-map__center strong,
.case-demand-map__center span {
  display: block;
  max-width: 118px;
}

.case-demand-map__center strong {
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.case-demand-map__center span {
  margin-top: 5px;
  font-size: 11px;
  opacity: .86;
}

.case-demand-map__item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 136px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(255, 246, 246, .96), rgba(255, 255, 255, .98));
  border: 1px solid #dfe8f2;
  border-radius: 22px;
}

.case-demand-map__item--1 { grid-column: 1; grid-row: 1; }
.case-demand-map__item--2 { grid-column: 3; grid-row: 1; }
.case-demand-map__item--3 {
  grid-column: 1;
  grid-row: 2;
  background: linear-gradient(135deg, rgba(255, 249, 239, .96), rgba(255, 255, 255, .98));
}
.case-demand-map__item--4 {
  grid-column: 3;
  grid-row: 2;
  background: linear-gradient(135deg, rgba(255, 249, 239, .96), rgba(255, 255, 255, .98));
}
.case-demand-map__item--5 {
  grid-column: 1 / 4;
  grid-row: 3;
  justify-self: center;
  width: min(100%, 330px);
  background: linear-gradient(135deg, rgba(240, 252, 245, .98), rgba(255, 255, 255, .98));
}

.case-demand-map__item h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.case-demand-map__item ul {
  margin: 8px 0 0;
  padding-left: 17px;
  color: #546a82;
  font-size: 11px;
  line-height: 1.48;
}

.case-demand-map__item > span {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 8px;
  color: #d2343f;
  font-size: 11px;
  font-weight: 800;
}

.case-demand-map__item--3 > span,
.case-demand-map__item--4 > span { color: #d9740d; }
.case-demand-map__item--5 > span { color: #168a49; }

.case-detail-table-wrap {
  margin-top: 40px;
}

.case-detail-table-wrap > h3 {
  margin-bottom: 18px;
  font-size: 26px;
}

.case-detail-table {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe5f0;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(34, 72, 116, .06);
}

.case-detail-table__row {
  display: grid;
  grid-template-columns: .62fr 1fr 1.75fr;
  border-top: 1px solid #e4ebf3;
}

.case-detail-table__row:first-child {
  border-top: 0;
}

.case-detail-table__row > * {
  padding: 18px 20px;
  border-left: 1px solid #e4ebf3;
  font-size: 13px;
  line-height: 1.5;
}

.case-detail-table__row > :first-child {
  border-left: 0;
}

.case-detail-table__row strong {
  color: #0f5dc9;
  font-size: 15px;
}

.case-detail-table__row--head {
  color: #fff;
  background: linear-gradient(90deg, #0b2f72, #0b4b9d);
}

.case-detail-table__row--head > * {
  border-color: rgba(255, 255, 255, .16);
  font-weight: 800;
}

.case-detail-structure {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  padding: 36px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(34, 72, 116, .06);
}

.case-detail-structure .case-detail-prose {
  margin-top: 18px;
}

.case-detail-structure ol {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-detail-structure li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
}

.case-detail-structure li > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #0a5ed4;
  background: #edf5ff;
  border: 1px solid #d4e6ff;
  border-radius: 50%;
  font-weight: 850;
}

.case-detail-structure li strong {
  color: #133f7e;
  font-size: 14px;
}

.case-detail-structure li p {
  margin: 5px 0 0;
  color: #556c85;
  font-size: 12px;
  line-height: 1.45;
}

.case-detail-pages {
  margin-top: 54px;
}

.case-detail-pages > h2,
.case-detail-screens > h2,
.case-detail-recommendations > h2 {
  margin-top: 14px;
}

.case-detail-pages__lead,
.case-detail-section__lead {
  max-width: 840px;
  margin: 16px 0 0;
  color: #587089;
  font-size: 16px;
  line-height: 1.65;
}

.case-detail-pages__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.case-detail-pages__grid article {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(34, 72, 116, .06);
}

.case-detail-pages__grid figure {
  margin: 0;
}

.case-detail-pages__image {
  display: block;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
}

.case-detail-pages__grid figcaption {
  padding: 15px 16px 0;
}

.case-detail-pages__grid figcaption strong {
  color: #123c79;
  font-size: 14px;
}

.case-detail-pages__grid article > p {
  margin: 8px 0 0;
  padding: 0 16px 18px;
  color: #5c7189;
  font-size: 12px;
  line-height: 1.5;
}

.case-detail-changes {
  margin-top: 34px;
}

.case-detail-changes .case-detail-prose {
  margin-top: 18px;
}

.case-detail-notice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 16px 18px;
  color: #12447f;
  background: #eef5ff;
  border: 1px solid #d9e9ff;
  border-radius: 14px;
}

.case-detail-notice > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #0c63d9;
  background: #fff;
  border-radius: 50%;
}

.case-detail-notice p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.case-detail-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  padding: clamp(30px, 4vw, 48px);
  background:
    radial-gradient(circle at 95% 20%, rgba(54, 143, 240, .15), transparent 28%),
    linear-gradient(135deg, #f6faff, #edf5ff);
  border: 1px solid #d9e7f8;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(31, 76, 128, .07);
}

.case-detail-cta--mid {
  margin-top: 34px;
}

.case-detail-cta h2 {
  margin-top: 12px;
  font-size: clamp(27px, 3vw, 42px);
}

.case-detail-cta p {
  max-width: 820px;
  margin: 14px 0 0;
  color: #566f89;
  font-size: 15px;
  line-height: 1.6;
}

.case-detail-cta .btn {
  min-width: 190px;
  min-height: 52px;
}

.case-detail-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.case-detail-stages article {
  min-height: 210px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(34, 72, 116, .06);
}

.case-detail-stages article > span {
  color: #0961da;
  font-size: 24px;
  font-weight: 900;
}

.case-detail-stages h3 {
  margin-top: 24px;
  font-size: 16px;
}

.case-detail-stages p {
  margin: 10px 0 0;
  color: #5b7088;
  font-size: 12px;
  line-height: 1.5;
}

.case-detail-control {
  margin-top: 28px;
}

.case-detail-control .case-detail-prose {
  margin-top: 14px;
}

.case-detail-screens {
  margin-top: 46px;
}

.case-detail-screens__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.case-detail-screens__grid article {
  padding: 14px;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(34, 72, 116, .06);
}

.case-detail-screens__grid article:nth-child(-n+2) {
  grid-column: span 2;
}

.case-detail-screens__grid figure {
  overflow: hidden;
  margin: 0;
  background: #edf3f9;
  border-radius: 12px;
}

.case-detail-screens__image {
  display: block;
  width: 100%;
  aspect-ratio: 1.6 / 1;
  object-fit: cover;
}

.case-detail-screens__grid h3 {
  margin-top: 14px;
  font-size: 15px;
}

.case-detail-screens__grid p {
  margin: 7px 0 0;
  color: #62768d;
  font-size: 11px;
  line-height: 1.45;
}

.case-detail-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.case-detail-results-head h2 {
  margin-top: 13px;
}

.case-detail-results-head > p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  color: #5a7089;
  background: #fff;
  border: 1px solid #dfe8f3;
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
}

.case-detail-results-head > p span {
  color: #4977b8;
}

.case-detail-results-head > p span svg {
  width: 18px;
  height: 18px;
}

.case-detail-metric-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.case-detail-metric-cards article {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 112px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(34, 72, 116, .06);
}

.case-detail-metric-cards small,
.case-detail-metric-cards strong {
  display: block;
}

.case-detail-metric-cards small {
  color: #6b7f96;
  font-size: 11px;
}

.case-detail-metric-cards strong {
  margin-top: 5px;
  color: #143f7d;
  font-size: 18px;
  line-height: 1.25;
}

.case-detail-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.case-chart {
  padding: 28px;
  background: #fff;
  border: 1px solid #dfe8f2;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(34, 72, 116, .06);
}

.case-chart h3 {
  text-align: center;
  font-size: 20px;
}

.case-chart__plot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: end;
  min-height: 270px;
  margin-top: 20px;
  padding: 20px 42px 0;
  border-bottom: 1px solid #aabbd0;
  background: repeating-linear-gradient(180deg, transparent 0 52px, rgba(174, 190, 208, .28) 52px 53px);
}

.case-chart__bar {
  display: grid;
  align-items: end;
  height: 100%;
  text-align: center;
}

.case-chart__bar > span {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: var(--case-bar);
  min-height: 34px;
  padding-top: 8px;
  color: #123f7d;
  background: linear-gradient(180deg, #edf5ff, #cfe4ff);
  border: 1px solid #4a83ca;
  border-bottom: 0;
}

.case-chart__bar--after > span {
  color: #fff;
  background: linear-gradient(180deg, #0e5ebd, #0a3d85);
  border-color: #0a3d85;
}

.case-chart__bar strong {
  font-size: 13px;
}

.case-chart__bar small {
  padding: 9px 0;
  color: #566c85;
  font-size: 12px;
}

.case-chart > p {
  margin: 20px 0 0;
  padding-top: 16px;
  color: #5d738c;
  border-top: 1px solid #e2e9f1;
  font-size: 12px;
  line-height: 1.55;
}

.case-detail-result-explanation {
  margin-top: 28px;
}

.case-detail-result-explanation h2 {
  font-size: clamp(27px, 2.8vw, 40px);
}

.case-detail-result-explanation p {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 22px 0 0;
  color: #48617c;
  font-size: 14px;
  line-height: 1.6;
}

.case-detail-result-explanation p > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #0b64dc;
  background: #eef5ff;
  border-radius: 12px;
}

.case-detail-recommendations {
  margin-top: 44px;
}

.case-detail-recommendations > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.case-detail-recommendations article {
  padding: 24px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(34, 72, 116, .06);
}

.case-detail-recommendations h3 {
  margin-top: 18px;
  font-size: 18px;
}

.case-detail-recommendations p {
  margin: 10px 0 0;
  color: #5c7189;
  font-size: 13px;
  line-height: 1.55;
}

.case-detail-editor-content {
  padding-top: 0;
}

.case-detail-final {
  padding-top: 18px;
}

.case-detail-related {
  margin-top: 38px;
}

.case-detail-related > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.case-detail-related > header h2 {
  margin-top: 12px;
}

.case-detail-related > header > a {
  color: #0c5ecc;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.case-detail-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.case-detail-related__grid article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  min-height: 150px;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(34, 72, 116, .06);
}

.case-detail-related__image {
  display: block;
  overflow: hidden;
}

.case-detail-related__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-detail-related__grid article > div {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.case-detail-related__grid article > div > span {
  color: #0c5ecc;
  font-size: 10px;
  font-weight: 800;
}

.case-detail-related h3 {
  margin-top: 8px;
  font-size: 15px;
}

.case-detail-related h3 a {
  color: inherit;
  text-decoration: none;
}

.case-detail-related article > div > a {
  margin-top: auto;
  color: #0c5ecc;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1180px) {
  .case-detail-hero__grid {
    grid-template-columns: minmax(0, 1fr) 410px;
  }

  .case-detail-author-meta {
    grid-template-columns: 1fr;
  }

  .case-detail-author {
    padding-right: 0;
    padding-bottom: 15px;
    border-right: 0;
    border-bottom: 1px solid #e2eaf4;
  }

  .case-detail-facts__grid,
  .case-detail-metric-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-detail-pages__grid,
  .case-detail-screens__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-detail-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-detail-related__grid {
    grid-template-columns: 1fr;
  }

  .case-demand-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    gap: 14px;
    min-height: 0;
    padding: 22px;
  }

  .case-demand-map__center {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 148px;
    height: 148px;
    border-width: 8px;
  }

  .case-demand-map__item { padding: 16px; }
  .case-demand-map__item--1 { grid-column: 1; grid-row: 1; }
  .case-demand-map__item--2 { grid-column: 2; grid-row: 1; }
  .case-demand-map__item--3 { grid-column: 1; grid-row: 3; }
  .case-demand-map__item--4 { grid-column: 2; grid-row: 3; }
  .case-demand-map__item--5 {
    grid-column: 1 / -1;
    grid-row: 4;
    width: min(100%, 360px);
  }
}

@media (max-width: 940px) {
  .case-detail-hero__grid,
  .case-detail-research-grid,
  .case-detail-structure {
    grid-template-columns: 1fr;
  }

  .case-detail-hero__visual {
    min-height: 460px;
  }

  .case-detail-hero__image {
    min-height: 460px;
  }

  .case-detail-dual,
  .case-detail-charts,
  .case-detail-recommendations > div {
    grid-template-columns: 1fr;
  }

  .case-detail-table__row {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .case-detail-table__row > :nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid #e4ebf3;
    border-left: 0;
  }

  .case-detail-table__row--head > :nth-child(3) {
    display: none;
  }
}

@media (max-width: 700px) {
  .case-detail__breadcrumbs {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .case-detail-hero__grid {
    margin-inline: -2px;
    padding: 28px 20px 20px;
    border-radius: 20px;
  }

  .case-detail-hero h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .case-detail-hero__lead {
    font-size: 16px;
  }

  .case-detail-publication-meta div {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .case-detail-hero__visual,
  .case-detail-hero__image {
    min-height: 360px;
  }

  .case-detail-hero-dashboard {
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 14px;
  }

  .case-detail-hero-dashboard svg {
    height: 60px;
  }

  .case-detail-facts__grid,
  .case-detail-metric-cards,
  .case-detail-pages__grid,
  .case-detail-screens__grid,
  .case-detail-stages {
    grid-template-columns: 1fr;
  }

  .case-detail-fact {
    min-height: 86px;
  }

  .case-detail-intro,
  .case-detail-section,
  .case-detail-editor-content,
  .case-detail-final {
    padding: 52px 0;
  }

  .case-detail-panel,
  .case-detail-structure,
  .case-detail-list-card,
  .case-chart {
    padding: 22px;
    border-radius: 18px;
  }

  .case-detail-copy blockquote {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 18px;
  }

  .case-demand-map {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    min-height: 0;
    padding: 18px;
  }

  .case-demand-map__center::before {
    display: none;
  }

  .case-demand-map__center,
  .case-demand-map__item--1,
  .case-demand-map__item--2,
  .case-demand-map__item--3,
  .case-demand-map__item--4,
  .case-demand-map__item--5 {
    grid-column: 1;
    grid-row: auto;
  }

  .case-demand-map__center {
    width: 132px;
    height: 132px;
    margin: 0 auto 6px;
  }

  .case-demand-map__center strong {
    font-size: 10px;
  }

  .case-demand-map__item,
  .case-demand-map__item--5 {
    width: 100%;
    min-height: 0;
    justify-self: stretch;
  }

  .case-detail-table {
    overflow-x: auto;
  }

  .case-detail-table__row {
    min-width: 680px;
    grid-template-columns: 150px 220px minmax(310px, 1fr);
  }

  .case-detail-table__row > :nth-child(3),
  .case-detail-table__row--head > :nth-child(3) {
    display: block;
    grid-column: auto;
    border-top: 0;
    border-left: 1px solid #e4ebf3;
  }

  .case-detail-cta {
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }

  .case-detail-cta .btn {
    width: 100%;
  }

  .case-detail-screens__grid article:nth-child(-n+2) {
    grid-column: auto;
  }

  .case-detail-results-head,
  .case-detail-related > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-detail-results-head > p {
    white-space: normal;
  }

  .case-chart__plot {
    gap: 20px;
    min-height: 230px;
    padding-inline: 20px;
  }

  .case-detail-related__grid article {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-detail *,
  .case-detail *::before,
  .case-detail *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}