/* =========================
   Case v2 base
   ========================= */

/* Theme tokens (v2 only) */
:root {
  --casev2-bg: #0c0a09; /* stone-950 */
  --casev2-card: #e2edfd;

  --casev2-text: #ffffff;
  --casev2-text-dark: #1f2937; /* used for light parts if any */
  --casev2-muted: rgba(255, 255, 255, 0.78);
  --casev2-border: rgba(255, 255, 255, 0.08);

  --casev2-radius: 24px;
  --casev2-gap: 24px;

  /* 0.5% letter-spacing ≈ 0.005em */
  --casev2-ls: 0.005em;

  /* Vertical rhythm (adjust later if needed) */
  --casev2-section-pad: clamp(72px, 12vw, 200px);
  /* --casev2-section-pad: clamp(72px, 8vw, 120px); */
  --casev2-section-pad-tight: clamp(48px, 6vw, 88px);

  /* Text column width inside container */
  --casev2-center-max: 980px;
}

/* Utility */

.container-no-max-width {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-inline: 20px;
  box-sizing: content-box; /* важно */
}
.container--no-max {
  max-width: none;
}
.container--narrow {
  max-width: 880px;
}
.container--narrow-1 {
  max-width: 820px;
}
.container-vivia {
  padding-inline: 0;
}

.casev2-fullbleed {
  position: relative;
  z-index: 0;
}

.casev2-fullbleed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* КЛЮЧЕВОЕ */
  /* left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw; */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  background: var(--Colors-Stone-100, #f5f5f4);
  z-index: -1;
}
.casev2-fullbleed--no-bg::before {
  content: none;
  /* background: transparent; */
  background: white;
}

.casev2-fullbleed-hvh-solid::before {
  background: linear-gradient(
    to bottom,
    var(--Colors-Stone-100, #f5f5f4) 0%,
    #fafafa 55%,
    #ffffff 85%
  );
}
/* .casev2-fullbleed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
} */
.casev2-fullbleed-hch-research::before {
  background: var(--Colors-Stone-800, #292524);
}
.casev2-fullbleed-grad::before {
  background: linear-gradient(180deg, #f5f5f4 0%, #ffffff 100%);

  z-index: -2;
}

.casev2-fullbleed-image::before {
  /* position: relative; */
  padding: clamp(28px, 3.5vw, 48px);
  /* border-radius: 24px; */
  overflow: hidden;
  /* background-image: url("../assets/images/case1v2_des-appr.jpg"); */
  background-image: url("../assets/images/Design_Approach.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;

  z-index: -3;
}
.casev2-fullbleed-image-hch-findings::before {
  background-image: url("../assets/images/Users_In_The_Hospital.jpg");
}
.casev2-fullbleed-image-thriftie-findings::before {
  background-image: url("../assets/images/thriftie_finding.jpg");
}
.casev2-fullbleed-image-hch-findings-vivia::before {
  background-image: url("../assets/images/Older_Adults.jpg");
}
.casev2-fullbleed-image1::before {
  background-image: url("../assets/images/If_Continued.jpg");
  background-size: cover;
  background-position: center 20%;
  /* background-image: url("../assets/images/case1v2_des-appr_2.jpg"); */
}
.casev2-fullbleed-hch-if-continued::before {
  background-image: url("../assets/images/If_Continued_hch.jpg");
  background-size: cover;
  background-position: center 20%;
}
.casev2-fullbleed-thriftie-if-continued::before {
  background-image: url("../assets/images/If_Continued_thriftie.jpg");
  background-size: cover;
  background-position: center 20%;
}
.casev2-fullbleed-vivia-if-continued::before {
  background-image: url("../assets/images/If_Continued-vivia.jpg");
}
.casev2-fullbleed-vivia-if-continued::before {
  background-position: center 55%;
}

.casev2-fullbleed-image3 {
  background-image:
    linear-gradient(
      to top,
      rgba(255, 255, 255, 1) 4%,
      rgba(255, 255, 255, 0.55) 30%,
      rgba(255, 255, 255, 0.25) 90%,
      rgba(255, 255, 255, 0.12) 25%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/casev2-hero-bg.jpg");

  background-size: cover;
  background-position: center 20%;
}
.casev2-fullbleed-image-hch-outro {
  background-image:
    linear-gradient(
      to top,
      rgba(255, 255, 255, 1) 4%,
      rgba(255, 255, 255, 0.55) 30%,
      rgba(255, 255, 255, 0.25) 90%,
      rgba(255, 255, 255, 0.12) 25%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/hch-Thank_You_For_Reading.jpg");

  background-size: cover;
  background-position: center 20%;
}
/* .casev2-fullbleed-image-thriftie-outro {
  background-image: url("../assets/images/thriftie-Thank_You_For_Reading.jpg");

  background-size: cover;
  background-position: center 20%;
} */
.casev2-fullbleed-image-thriftie-outro {
  position: relative;
  background-image: url("../assets/images/thriftie-Thank_You_For_Reading.jpg");
  background-size: cover;
  background-position: center 20%;
}

.casev2-fullbleed-image-thriftie-outro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%; /* controls how tall the fade is */
  background: linear-gradient(
    to top,
    #ffffff 0%,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0.4) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.casev2-fullbleed-image-thriftie-outro > * {
  position: relative;
  z-index: 2;
}

.casev2-fullbleed-image-vivia-outro {
  background-image:
    linear-gradient(
      to top,
      rgba(255, 255, 255, 1) 4%,
      rgba(255, 255, 255, 0.55) 30%,
      rgba(255, 255, 255, 0.25) 90%,
      rgba(255, 255, 255, 0.12) 25%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../assets/images/Thank_You-vivia.jpg");

  background-size: cover;
  background-position: center 20%;
}
.casev2-dotted-bg {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
    radial-gradient(circle, rgba(15, 23, 42, 0.08) 2px, transparent 1px);

  background-size:
    100% 100%,
    20px 20px;

  background-position:
    0 0,
    0 0;
}

/* рисуем фон на full-bleed псевдо-элементе */
.casev2-dotted-bg.casev2-fullbleed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%),
    radial-gradient(circle, rgba(15, 23, 42, 0.08) 2px, transparent 1px);

  background-size:
    100% 100%,
    20px 20px;

  background-position:
    0 0,
    0 0;

  z-index: -1;
}
/* .casev2-fullbleed-image3::before {
  background-image: url("../assets/images/casev2-hero-bg.jpg");
} */
/* Apply background for case pages (you already use .theme-dark on body) */
.theme-dark {
  background: var(--casev2-bg);
  color: var(--casev2-text);
}

/* Page wrapper */
.casev2 {
  background: transparent;
  color: var(--casev2-text);
}

/* Narrow centered column inside .container */
.casev2-center {
  max-width: var(--casev2-center-max);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical stacks */
.casev2-stack {
  display: flex;
  flex-direction: column;
  /* gap: var(--casev2-gap); */
  /* padding-top: 40px; */
}
.casev2-stack-addpad {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Section spacing */
/* .casev2-section {
  padding-top: var(--casev2-section-pad);
  padding-bottom: var(--casev2-section-pad);
} */

.casev2-section--tight {
  padding-top: var(--casev2-section-pad-tight);
  padding-bottom: var(--casev2-section-pad-tight);
}
/* Adding padding to the sections on top and bottom where they did not have one */
.casev2-section-addpad,
.block-addpad {
  padding-top: var(--casev2-section-pad);
  padding-bottom: var(--casev2-section-pad);
}
/* =========================
   Typography (from your specs)
   ========================= */

.casev2-h1,
.casev2 h1 {
  font-family: "campaign-serif", serif;
  font-weight: 400;
  /* font-size: 70px; */
  font-size: clamp(52px, 70px - (880px - 100vw) * 0.04, 70px);
  line-height: 1;
  letter-spacing: var(--casev2-ls);
  text-align: center;
  color: var(--casev2-text-dark); /* case is dark by default */
}

.casev2-h2,
.casev2 h2 {
  font-family: "campaign-serif", serif !important;
  /* font-family: "campaign-serif", serif; */
  font-weight: 400 !important;
  /* font-size: 60px !important; */
  font-size: clamp(48px, calc(60px + (100vw - 880px) * 0.4), 60px);
  line-height: 1 !important;
  letter-spacing: var(--casev2-ls) !important;
  color: var(--casev2-text) !important;
  text-align: center;
  margin: 0;
}
.casev2-section-title,
.casev2 h2.casev2-section-title {
  font-family: "campaign-serif", serif;
  font-weight: 400 !important;
  /* font-size: 60px !important; */
  font-size: clamp(48px, calc(60px + (100vw - 880px) * 0.04), 60px);
  line-height: 1 !important;
  letter-spacing: var(--casev2-ls) !important;
  color: var(--casev2-text) !important;
  text-align: center;
  margin: 0;
}
#testing-title {
  color: var(--casev2-text-dark) !important;
}
.casev2-testing__subtitle {
  color: var(--casev2-text-dark) !important;
}
.casev2-testing .casev2-section-title {
  color: var(--casev2-text-dark) !important;
}
.casev2-testing {
  color: var(--casev2-text-dark);
}
.casev2 h2.casev2-section-title-on-light {
  color: var(--casev2-text-dark) !important;
}
.casev2-section-title-left {
  text-align: left !important;
  line-height: 140%;
  padding-top: 20px;
}

.casev2 h3,
.casev2-h3 {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight: 400;
  /* font-size: 36px; */
  font-size: clamp(30px, calc(36px + (100vw - 880px) * 0.04), 36px);
  line-height: 110%;
  letter-spacing: var(--casev2-ls);
  margin: 0;
  color: var(--casev2-text);
  margin-bottom: 16px;
  text-align: center;
}

#overview-title {
  padding-bottom: 100px;
}
/* Default paragraph in v2 */

.casev2-p {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--casev2-ls);
  margin: 0;
  color: var(--casev2-text);
}

/* “Big paragraphs” */
.casev2-story-item__text,
.casev2-hmw-point__text,
.casev2-outcome-note__body p,
.casev2-outcome-note__body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: var(--casev2-ls);
  text-align: left;
}
.casev2-hmw-point__text {
  line-height: 120%;
}
.casev2-hmw-point__subtitle {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--casev2-text-dark);
  text-align: left;
  padding-bottom: 40px;
}
.casev2-hmw-point__text-thriftie {
  text-align: left;
}
.casev2-hmw-point__text-thriftie-oucomes {
  padding-top: 100px;
}
.casev2-hmw-point__subtitle-text {
  align-self: flex-start;
}
.casev2-story-item__text {
  color: var(--color-text);
}
.casev2-story-item__text-decor {
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--casev2-text-dark);
}

/* Small Caveat text styles */
.casev2-chat-label,
.casev2-media-row__caption,
.casev2-step3__note,
.casev2-highlight__eyebrow,
.casev2-outcome-note__eyebrow,
.casev2-callout__title,
.casev2-outro__subtitle,
.casev2-research__subtitle {
  font-family: "Caveat", cursive;
  letter-spacing: var(--casev2-ls);
}
.casev2-highlight__text {
  font-size: 24px;
  line-height: 120%;
}
/* Chat label */
.casev2-chat-label {
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  text-align: left;
}

/* Caption under research image */
.casev2-media-row__caption {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4b5563; /* you wrote background token but it’s a text color in the mock */
}

.casev2-media-row__caption-vivia {
  color: var(--colors-white-80, #ffffffcc);
}
/* Step note */
.casev2-step3__note {
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--casev2-text-dark);
}

/* Highlight eyebrow */
.casev2-highlight__eyebrow {
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: #fff;
}

/* Outcome eyebrow */
.casev2-outcome-note__eyebrow {
  font-weight: 400;
  font-size: 34px;
  line-height: 110%;
  color: var(--casev2-text-dark);
}

/* Callout title + text */
.casev2-callout__title {
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  color: #ffffffcc;
}
.casev2-callout__text {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--casev2-ls);
  color: #fff;
}

/* Metric typography */
.casev2-metric__value {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 128px;
  line-height: 1;
  letter-spacing: var(--casev2-ls);
}
.casev2-metric__label {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: var(--casev2-ls);
  text-align: center;
  color: var(--casev2-text-dark);
}

/* =========================
   Layout primitives
   ========================= */

.casev2-grid {
  display: grid;
  gap: 32px;
}

.casev2-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.casev2-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.casev2-grid--tight {
  gap: 20px;
}

@media (max-width: 980px) {
  .casev2-grid--2,
  .casev2-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Card */
.casev2-card {
  background: var(--casev2-card);
  border: 1px solid var(--casev2-border);
  border-radius: var(--casev2-radius);
  padding: 28px;
}

/* =========================
   Research rows
   ========================= */

.casev2-research__stack {
  display: flex;
  flex-direction: column;
  gap: 100px;
  margin-top: 100px;
}

.casev2-media-row {
  display: flex;
  flex: 1 1 0;
  gap: 40px;
  align-items: center;
}

.casev2-media-row--reverse {
  flex-direction: row-reverse;
}
.casev2-media-row--reverse > * {
  flex-direction: row-reverse;
}
.casev2-photos {
  display: flex;
  max-width: 880px;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.casev2-media-pic {
  flex: 1 1 0;
  max-width: 280px;
}

/* .casev2-media-row__media {
  margin: 0;
  flex: 1 1 0;
} */

/* .casev2-media-row__img {
  
  max-width: 571px;
  max-height: 360px;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
} */
.casev2-media-row__media {
  margin: 0;
  flex: 1 1 0;
}

.casev2-media-row__frame {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  /* height: 360px; */
  width: min(571px, 100%);
  aspect-ratio: 571 / 360;
}

/* Верхняя: “внутри рамки”, кроп по бокам как в макете */
.casev2-media-row__frame--portrait {
  /* width: 571px; */
  /* height: 360px; */
  max-width: 100%;
}

/* Нижняя: НЕ квадрат, просто прямоугольник как в макете */
.casev2-media-row__frame--watercolor {
  /* width: 571px; */

  max-width: 100%;
}

/* img всегда заполняет рамку */
.casev2-media-row__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.casev2-media-row__caption {
  margin-top: 10px;
}
.casev2-media-row__text {
  color: var(--casev2-text-dark);
  max-width: 269px;
  font-size: 24px;
  line-height: 120%;
}

.casev2-media-row__text-on-dark {
  color: var(--casev2-text);
}
/* @media (max-width: 980px) {
  .casev2-media-row {
    grid-template-columns: 1fr;
  }
} */
@media (max-width: 560px) {
  .casev2-media-row {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    gap: 40px;
    align-items: center;
  }
  .casev2-media-row__text {
    /* color: var(--casev2-text-dark); */
    max-width: none;
    font-size: 24px;
  }
  .casev2-research__stack {
    /* display: flex;
    flex-direction: column;
    */
    margin-top: 50px;
    gap: 40px;
  }
  .casev2-media-row {
    gap: 20px;
  }
}
/* =========================
   Story items (facts)
   ========================= */

.casev2-story__stack {
  display: flex;
  flex-direction: column;
  /* gap: 48px; */
  margin-top: 56px;
  max-width: 580px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.casev2-story__items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 100px;
  max-width: 580px;
  margin: 0 auto;
  padding: 200px 0;
  /* background: var(--Colors-Stone-100, #f5f5f4); */
}
.casev2-story__chat {
  padding: 200px 0;
}
.casev2-story__chat-thriftie {
  padding: 60px 0;
  padding-bottom: 0;
}
.what-wrong-narrow {
  max-width: 580px;
  margin: 0 auto;
  padding: 100px 0;
}
.casev2-story-item {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.casev2-story-item__icon {
  font-family: Inter;
  font-weight: 700;
  font-style: Bold;
  font-size: 72px;
  line-height: 100%;
  letter-spacing: 0.5%;
}

.casev2-story-item__muted {
  color: var(--casev2-muted);
}

/* =========================
   Chat bubbles
   ========================= */

.casev2-chat-scene {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.casev2-chat-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.casev2-chat-line--left {
  justify-content: flex-start;
}

.casev2-chat-line--right {
  justify-content: flex-end;
}

.casev2-chat-avatar {
  font-size: 72px;
}
.casev2-chat-bubble {
  background: var(--casev2-card);
  border: 1px solid var(--casev2-border);
  border-radius: 10px;
  padding: 20px;
  max-width: 456px;
  box-sizing: border-box;
}
.casev2-chat-bubble--patient {
  background: var(--Colors-Orange-100, #ffedd5);
}
.casev2-chat-bubble--provider {
  background: var(--Colors-Sky-100, #e0f2fe);
}
.casev2-chat-bubble--provider-hch {
  background: var(--Colors-Fuchsia-100, #fae8ff);
}
.casev2-chat-bubble--provider-vivia {
  background: var(--Colors-Green-100, #dcfce7);
}

.casev2-chat-bubble--patient .casev2-chat-label {
  color: #c2410c; /* orange-700 */
}

.casev2-chat-bubble--provider .casev2-chat-label {
  color: #075985; /* sky-800 */
}
.casev2-chat-bubble--provider .casev2-chat-label {
  color: #075985; /* sky-800 */
}
.casev2-chat-bubble--provider .casev2-chat-label-hch {
  color: var(--Colors-Fuchsia-800, #86198f);
}
.casev2-chat-label-vivia {
  color: var(--Colors-Green-800, #166534);
}
.casev2-chat-bubble--thriftie {
  background: var(--Colors-Pink-100, #fce7f3);
}
.casev2-chat-bubble--thriftie .casev2-chat-label {
  color: var(--Colors-Pink-800, #9d174d);
}

.casev2-chat-text {
  margin-top: 8px;
  color: var(--casev2-text-dark);
  font-size: 24px;
  text-align: left;
}

.casev2-beat__emoji {
  font-size: 72px;
}
.casev2-beat {
  color: var(--casev2-text-dark);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 400;

  font-size: 36px;

  line-height: 120%;
}

.casev2-story__beat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 580px;
  margin: 0 auto;
  padding: 200px 0;
  /* background: var(--Colors-Stone-100, #f5f5f4); */
}

/* =========================
   3-step blocks (01/02/03)
   ========================= */

.casev2-steps3-all {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  list-style: none;
  padding: 0;
}
.casev2-steps3-all-hch-deliverables {
  gap: 100px;
}

.casev2-step3 {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  padding: 0;
}

.casev2-step3__num {
  font-family: "campaign-serif", serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 1;
  letter-spacing: var(--casev2-ls);
  display: inline-block;
  /* padding: 6px 14px; */
  border-radius: 14px;
  color: #7dd3fc; /* default: sky-300 */
}
.casev2-step3__num-hch-icons {
  text-align: center;
}

.casev2-step3__text {
  margin-top: 20px;
  color: var(--casev2-text-dark);
  font-size: 24px;
  line-height: 140%;
}
.casev2-step3__text-hch-center {
  text-align: center;
  margin-top: 40px;
  font-size: 36px;
}

.casev2-step3__note {
  margin-top: 20px;
}

@media (max-width: 980px) {
  .casev2-steps3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .casev2-step3__text {
    font-size: 18px;
  }
}

@media (max-width: 620px) {
  .casev2-steps3-all {
    grid-template-columns: 1fr;
  }
  .casev2-step3__num {
    text-align: center;
  }
  .casev2-step3__text {
    font-size: 24px;
  }
}

/* Modifier for dark-number sections */
.casev2-step3__num-dark {
  color: #075985;
}
/* Modifier for hch first */
.casev2-step3__num-hch {
  color: var(--Colors-Fuchsia-800, #86198f);
}
.casev2-step3__num-thriftie {
  color: var(--Colors-Pink-800, #9d174d);
}
.casev2-step3__num-vivia {
  color: var(--Colors-Green-800, #166534);
}
/* =========================
   Design Highlights
Callout (dark grey box inside highlights)
   ========================= */

.casev2-highlights {
  background: var(--Colors-Stone-800, #292524);
}
#highlights-title {
  padding-bottom: 100px;
}
.casev2-callout {
  background: var(--Colors-Stone-700, #44403c);

  /* border: 1px solid var(--casev2-border); */
  border-radius: 20px;
  padding: 30px;
  /* margin-top: 18px; */
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.casev2-highlight__media img {
  border-radius: 10px;
}
.casev2-highlight__media-thriftie img,
.no-corners {
  border-radius: 0px !important;
}

.casev2-highlight__vivia-img {
  max-width: 350px;
  margin: 0 auto;
}
@media (max-width: 400px) {
  .casev2-highlight__vivia-img {
    max-width: 300px;
  }
}

.casev2-highlights__list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.casev2-highlight,
.casev2-highlight__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* align-items: center; */
}
.casev2-highlight {
  gap: 50px;
}
.casev2-highlight__media--phones {
  display: flex;
  justify-content: center;
  gap: 50px;

  width: min(880px, 100%);
  margin-inline: auto;

  /* allow items to actually shrink */
  flex-wrap: nowrap;
}

.casev2-highlight__media--phones > * {
  min-width: 0;
}

/* each phone takes half of the row (minus gap) and shrinks */
.casev2-highlight__media--phone {
  flex: 1 1 0;
  max-width: 390px;
  width: 100%;
  height: auto;
  display: block;
}
/* 🐞Fix the stretching small cards bug */
/* SAFARI FIX: never let images grow in flex layouts */
/* .casev2-highlight__media--phone {
  flex: 0 0 auto;
}

.casev2-highlight__media--phone img {
  flex: 0 0 auto;
  height: auto;
  align-self: flex-start;
} */

/* .casev2-highlight__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  flex-grow: 0;
  flex-shrink: 0;
} */
/* Safari: stop flex-stretching the IMG itself */
figure.casev2-highlight__media--phones {
  align-items: flex-start;
}

figure.casev2-highlight__media--phones > img.casev2-highlight__media--phone {
  flex: 0 0 auto; /* overrides flex: 1 1 0 */
  height: auto; /* prevents the huge computed height */
  /* align-self: flex-start; */
  align-self: center;
  /* keep your existing width/max-width rules as-is */
}
/* Keep flex shrinking behavior, but prevent Safari from distorting */
figure.casev2-highlight__media--phones > img.casev2-highlight__media--phone {
  height: auto;
  object-fit: contain;
  flex: 1 1 0; /* explicitly keep your intended behavior */
  align-self: flex-start;
}
.casev2-highlight__media--phones {
  align-items: flex-start;
}
/* row layout: keep them top-aligned (Safari-safe) */
figure.casev2-highlight__media--phones > img.casev2-highlight__media--phone {
  align-self: flex-start;
}

/* column layout: center them */
@media (max-width: 820px) {
  figure.casev2-highlight__media--phones > img.casev2-highlight__media--phone {
    align-self: center;
  }
}
/* Special case: hero phone should match width, but crop height */
figure.casev2-highlight__media--phones
  > img.casev2-highlight__media--phone-hero {
  object-fit: cover; /* crop instead of shrink */
  object-position: top; /* crop from the bottom */
  width: 100%;
  height: 660px; /* match your intended crop height */
  flex: 1 1 0; /* keep same width behavior as the other card */
}
@media (max-width: 820px) {
  .casev2-highlight__media--hide-on-stack {
    display: none;
  }
}
/* 🐞End: Fix the stretching small cards bug */
.casev2-highlight__media--phone-hch-smaller {
  max-width: 350px;
}
.casev2-highlight__media--phone-thriftie-smaller {
  max-width: 266px;
  border-radius: 0 !important;
}
.casev2-highlight__media--phone-hch-smaller-vivia {
  border-radius: 0 !important;
}

.casev2-highlight__media--phone-hch-smaller-short {
  max-height: fit-content;
}
.casev2-highlight__media--phone-hero {
  max-height: 660px;
  width: 100%;
  object-fit: cover;
  object-position: top; /* or center, if you want middle */
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

@media (max-width: 820px) {
  .casev2-highlight__media--phones {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .casev2-highlight__media--phone {
    max-width: 390px;
  }
  .casev2-highlight__media--phone-hch-smaller {
    max-width: 350px;
  }
  .casev2-highlight__media--phone-hch-smaller-short {
    max-height: fit-content;
  }
  /* .casev2-highlight__media--phones > img:first-child {
    display: none;
  } */
  /*🍉 hide the first image only if there are 2 images total */
  /* .casev2-highlight__media--phones > img:first-child:nth-last-child(2) {
    display: none;
  } */
}

/* =========================
   Outcomes / Learnings notes (shared)
   ========================= */
#outcomes-title {
  color: var(--casev2-text-dark) !important;
}
.casev2-outcomes {
  color: var(--casev2-text-dark);
}

.casev2-metrics {
  max-width: 880px;
  display: flex;
  row-gap: 50px;
  column-gap: 100px;
  margin-top: 100px;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
}

.casev2-metric {
  text-align: center;
  width: 340px;
}
.casev2-metric--large {
  width: 880px;
}
.casev2-metric-vivia {
  text-align: center;
  max-width: 767px;
}
.casev2-metric__value {
  background: var(--casev2-card);
  /* border: 1px solid var(--casev2-border); */
  border-radius: 30px;
  padding: 20px;
  margin-bottom: 20px;
}

.casev2-metric__value-hch {
  background: var(--Colors-Fuchsia-100, #fae8ff);
}
.casev2-metric__value-thriftie {
  background: var(--Colors-Pink-200, #fbcfe8);
  color: var(--casev2-text-dark);
  max-width: 672px;
  margin: 0 auto;
  margin-bottom: 20px;
}
.casev2-metric__value-thriftie-1 {
  background: var(--Colors-Pink-100, #fce7f3);
}
.casev2-metric__value-vivia {
  background: var(--Colors-Green-100, #dcfce7);
}

.casev2-metric--wide {
  grid-column: 1 / -1;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.casev2-outcomes__notes {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.casev2-outcome-note {
  /* padding: 26px; */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.casev2-outcome-note__icon {
  font-size: 72px;
  text-align: center;
}

.casev2-outcome-note__eyebrow {
  margin-top: 14px;
  color: var(--casev2-text-dark);
}

.casev2-outcome-note__body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--casev2-text-dark);
}
.casev2-cta__sub,
.casev2-cta__note {
  text-align: center;
}

.casev2-cta__note {
  /* margin-top: 12px; */
  font-family: "Caveat", cursive;
  font-size: 24px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.8);
}
.button--secondary-overview {
  color: white;
  border: 1px solid white;
  margin: 0 auto;
  height: 48px;
  padding-left: 16px;
  padding-right: 16px;
}

.button--secondary-overview:hover {
  background: white;
  color: black;
}
.casev2-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.casev2-overview__shot {
  padding: 0 !important
;
}

@media (max-width: 996px) {
  .casev2-metrics--large-thriftie {
    max-width: 770px;
  }
}
@media (max-width: 776px) {
  .casev2-metric__value-thriftie {
    max-width: 412px;
  }
}
@media (max-width: 980px) {
  .casev2-metrics__grid {
    grid-template-columns: 1fr;
  }
  .casev2-outcomes__notes {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .casev2-metric__value {
    font-size: 76px;
  }
  .casev2-metric {
    text-align: center;
    width: 240px;
  }
  .casev2-metrics {
    row-gap: 20px;
    column-gap: 20px;
    margin-top: 50px;
  }
  /* .casev2-metrics--large {
    flex-direction: column;
  } */

  .casev2-metric--large {
    width: 400px;
  }
}

@media (max-width: 450px) {
  .casev2-metric--large {
    width: 300px;
  }
}
/* Learnings */

#learnings-title {
  color: var(--casev2-text-dark) !important;

  .casev2-outcomes__note {
    color: var(--casev2-text-dark) !important;
  }
}
/* =========================
   HERO
   ========================= */

/* Hero section stays clean */
.casev2-hero {
  background: #fff; /* or whatever your light background is for this section */
}
.casev2-eyebrow {
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--Colors-Sky-800, #075985);
  text-align: center;
}
.casev2-eyebrow-hero {
  padding-bottom: 10px;
}
.casev2-eyebrow-hch {
  color: var(--Colors-Fuchsia-800, #86198f);
}
.casev2-eyebrow-thriftie {
  color: var(--Colors-Pink-800, #9d174d);
}
.casev2-eyebrow-vivia {
  color: var(--Colors-Green-800, #166534);
}
.casev2-eyebrow-hch-dark {
  color: var(--casev2-text-dark);
}

.casev2-hero-backdrop {
  position: relative;
  padding: clamp(28px, 3.5vw, 48px);
  overflow: hidden;

  /* важно: подложка белая */
  background-color: #fff;

  /* 1 слой: белый градиент сверху, 2 слой: картинка */

  background-image:
    linear-gradient(
      rgb(255, 255, 255) 0px,
      rgb(255, 255, 255) 0px,
      rgba(255, 255, 255, 0.35) 380px,
      rgba(255, 255, 255, 0) 650px
    ),
    url(../assets/images/casev2-hero-bg.jpg);

  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position:
    top center,
    center bottom;

  /* микро-фикс от “волоска” из-за сабпикселей */
  margin-top: -1px;
}

.casev2-hero-backdrop-hch {
  background-image:
    linear-gradient(
      rgb(255, 255, 255) 0px,
      rgb(255, 255, 255) 0px,
      rgba(255, 255, 255, 0.35) 380px,
      rgba(255, 255, 255, 0) 650px
    ),
    url(../assets/images/hero_case_2.jpg);
}
.casev2-hero-backdrop-thriftie {
  background-image:
    linear-gradient(
      rgb(255, 255, 255) 0px,
      rgb(255, 255, 255) 0px,
      rgba(255, 255, 255, 0.35) 380px,
      rgba(255, 255, 255, 0) 650px
    ),
    url(../assets/images/hero_case_thriftie.jpg);
}
.casev2-hero-backdrop-vivia {
  background-image:
    linear-gradient(
      rgb(255, 255, 255) 0px,
      rgb(255, 255, 255) 0px,
      rgba(255, 255, 255, 0.35) 380px,
      rgba(255, 255, 255, 0) 650px
    ),
    url(../assets/images/case_3_hero.jpg);
}

/* Screenshot itself */
.casev2-hero-shot {
  position: relative; /* above ::before */
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  /* border: 1px solid rgba(0, 0, 0, 0.08); */
}
.casev2-hero-shot-thriftie {
  border-radius: 0px;
}

/* =========================
   Case v2 – Overview section
   ========================= */

.casev2-overview {
  /* no padding here: padding lives on .casev2-band so backgrounds can be full-bleed */
}

/* Full-bleed “bands” (each screen in the PDF) */
.casev2-band {
  width: 100%;
  position: relative;
  padding: 100px 0;
}

.casev2-band--dark {
  background: #2c2a29; /* match your dark overview background */
  color: #ffffff;
}

/* Watercolor / ink band for “My role” */
.casev2-band--ink {
  color: #ffffff;
  background-color: #0c0a09; /* fallback behind the image */
  background-image: url("../assets/images/My_Role.jpg");
  /* background-image: url("../assets/images/casev2-overview-role.png"); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.casev2-band--ink-vivia {
  background-image: url("../assets/images/My_Role-vivia.jpg");
}
.casev2-band--ink-thriftie {
  background-image: url("../assets/images/My_Role-thriftie.jpg");
}
.casev2-band--ink-hch {
  background-image: url("../assets/images/My_Role-hch.jpg");
}

/* Optional: add a soft dark overlay to keep text readable */
.casev2-band--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.35); */
  pointer-events: none;
}

.casev2-band--ink > .container {
  position: relative;
  z-index: 1;
}

/* Centered content wrapper (so your layout matches the PDF) */
.casev2-center {
  max-width: 580px;
  margin: 0 auto;
  /* text-align: center; */
}
.casev2-center-wide {
  max-width: 880px;
  margin: 0 auto;
  /* text-align: center; */
}
.casev2-center-flex {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* Titles in this section */
.casev2-section-title,
.casev2-block-title {
  margin: 0 0 48px;
  /* Typography already defined by you elsewhere (Campaign Serif, etc.) */
}

/* Overview text blocks */
.casev2-overview__content {
  max-width: 580px;
  text-align: left; /* center title, but body aligns left like in your screenshot */
  margin: 0 auto;
}

.casev2-overview__h {
  margin: 0 0 16px;
}

.casev2-overview__p {
  margin: 0 0 24px;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.casev2-overview__p-pad {
  padding-top: 16px;
}

.casev2-overview__kicker {
  margin: 28px 0 5px;
  font-family: "Caveat", cursive;
  font-size: 24px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
.casev2-overview__kicker-top {
  margin: 0px 0 8px;
}

.casev2-overview__list {
  margin: 0;
  padding-left: 20px;
  text-align: left;
}

/* .casev2-overview__list li {
  margin: 8px 0;
} */

/* “My role” block */
.casev2-overview__role-title {
  margin: 0 0 24px;
  text-align: center;
}

.casev2-overview__role-list {
  margin: 0 auto 16px;
  padding-left: 20px;
  max-width: 760px;
  text-align: left;
}
.casev2-overview__role-list-thriftie {
  margin-left: 0;
}

.casev2-overview__role-note {
  margin: 0;
  font-family: "Caveat", cursive;
  font-size: 24px;
  line-height: 100%;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
}

/* Grid helpers used in bet/details blocks */
/* .casev2-grid {
  display: grid;
  gap: 40px;
}

.casev2-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.casev2-grid--tight {
  gap: 32px;
} */
.bet-title {
  text-align: center;
}

.casev2-script {
  font-family: "Caveat", cursive;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding-bottom: 5px;
}
.casev2-bet__layout {
  display: grid;
  grid-template-rows: auto auto;
  /* row-gap: 16px; */
}

/* верх на всю ширину родителя */
.casev2-bet__top {
  grid-template-columns: 1fr 1fr;
  column-gap: 72px; /* как в макете */
  align-items: start;
  padding-bottom: 16px;
}

/* низ тоже 2 колонки */
.casev2-bet__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  align-items: start;
}

/* чтобы правый верхний текст не растягивался бесконечно и выглядел как в макете */
.casev2-bet__top .casev2-p {
  max-width: 580px; /* подгони под дизайн */
}
.casev2-grid--details {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 20px; /* или оставь как у тебя в --tight */
  align-items: start;
}
.casev2-grid--details {
  display: grid;
  /* grid-template-columns: 1fr minmax(max-content, 420px); */
  gap: 20px;
  align-items: start;
}
.casev2-dl__row-pb {
  padding-bottom: 16px;
}

@media (max-width: 900px) {
  .casev2-band {
    padding: 80px 0;
  }

  .casev2-grid--2 {
    grid-template-columns: 1fr;
  }

  .casev2-center {
    max-width: 580px;
  }
  h3 {
    text-align: center;
  }
  .casev2-overview__content,
  .casev2-overview__role-list,
  .casev2-overview__role-note {
    text-align: left;
  }
}

/* NDA line */
.casev2-nda {
  margin: 16px 0 0;
  font-family: "Caveat", cursive;
  font-size: 24px;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.8);
}

#cta-title {
  padding-bottom: 0;
}

/* Bottom image in overview */
.casev2-overview__image {
  margin: 0;
}

.casev2-overview__img {
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: 18px; */
}

.casev2-overview__image-inside {
  background-color: var(--Colors-Blue-100, #dbeafe);

  padding: 40px;
  min-height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
.casev2-overview_image-inside__img {
  max-width: 189px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
/* HMW section */
.casev2-hmw,
#hmw-title,
#approach-title {
  color: var(--casev2-text-dark) !important;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 100px;
}
.casev2-hmw {
  margin-bottom: 0px;
}
.casev2-hmw__points {
  display: flex;
  flex-direction: column;
  gap: 100px;
  max-width: 580px;
  margin: 0 auto;
}
.casev2-hmw-point {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.casev2-hmw-point__icon {
  font-size: 72px;
  font-weight: 700;
}
/* Outro) */
h2.casev2-outro__title {
  color: var(--casev2-text-dark) !important;
  text-align: center;
  margin: 0 auto;
}

p.casev2-outro__subtitle {
  text-align: center;
  margin: 0 auto;
  /* margin-top: 10px; */
  margin-top: 20px;
  font-size: 30px;
  line-height: 140%;
  color: var(--Colors-Sky-800, #075985);
}
p.casev2-outro__subtitle-vivia {
  color: var(--Colors-Green-800, #166534);
}
p.casev2-outro__subtitle-hch {
  color: var(--Colors-Fuchsia-800, #86198f);
}
p.casev2-outro__subtitle-thriftie {
  color: var(--Colors-Pink-800, #9d174d);
}

.casev2-research__subtitle {
  font-size: 24px;
  color: var(--colors-white-80, #ffffffcc) !important;
}

.casev2-outro {
  padding: 164px 0;
}

.casev2-center-nums {
  max-width: none;
}

/* big text */
@media (max-width: 760px) {
  .casev2-story-item__text,
  .casev2-hmw-point__text,
  .casev2-outcome-note__body p,
  .casev2-outcome-note__body,
  .casev2-beat {
    font-size: 28px;
  }
}
@media (max-width: 380px) {
  .casev2-story-item__text,
  .casev2-hmw-point__text,
  .casev2-outcome-note__body p,
  .casev2-outcome-note__body,
  .casev2-beat {
    font-size: 22px;
  }
}