/* ==========================================================================
   MRIYA Marketing — case-study.css
   The case-study detail page. Header, FAQ, contact and footer come from
   styles.css; everything below is specific to this page.
   1. Shared pieces
   2. Hero
   3. Before
   4. The Solution
   5. Results
   6. What the Client Gained
   7. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Shared pieces
   ========================================================================== */
.cs-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2); /* 62px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.cs-title--center {
  text-align: center;
}

/* Where a photo goes. Removed once the real assets land. */
.media-slot {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  background-color: rgba(226, 226, 226, 0.04);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(226, 226, 226, 0.05) 0 0.625rem,
    transparent 0.625rem 1.25rem
  );
  border: 1px dashed rgba(226, 226, 226, 0.18);
}

.media-slot::after {
  content: attr(data-slot);
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 226, 226, 0.35);
}

/* Checklist used by Results and What the Client Gained */
.cs-checks {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.cs-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
}

.check {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-block-start: 0.125rem;
  fill: none;
  stroke: var(--color-lime); /* #b5fe00, same as the asset's inline stroke */
  stroke-width: 1; /* the supplied icon leaves the SVG default */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
/* No fixed height: the panel holds a chart, so the section grows to show all
   of it. `overflow: hidden` stays only to clip the blooms sideways, and the
   decorations below are positioned in px so the frame's vertical rhythm holds
   whatever the section ends up being. */
.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg);
}

.cs-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cs-hero__backdrop span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

/* Two stacked violet blooms behind the headline */
.cs-hero__bloom--wide {
  inset-block-start: 4rem; /* 64px */
  inset-inline-start: -6%;
  width: 112%;
  aspect-ratio: 1610 / 980;
  background: radial-gradient(
    closest-side,
    rgba(126, 64, 210, 0.72),
    rgba(104, 46, 168, 0.34) 52%,
    rgba(96, 42, 154, 0.1) 74%,
    rgba(96, 42, 154, 0) 88%
  );
}

.cs-hero__bloom--tight {
  inset-block-start: 15rem; /* 240px */
  inset-inline-start: 4%;
  width: 92%;
  aspect-ratio: 1325 / 620;
  background: radial-gradient(
    closest-side,
    rgba(158, 92, 245, 0.55),
    rgba(130, 68, 210, 0.2) 55%,
    rgba(120, 60, 200, 0) 78%
  );
}

/* Three concentric hairline circles */
.cs-hero__rings {
  inset-block-start: 12.1875rem; /* 195px */
  inset-inline-start: 7.21%; /* 104 / 1440 */
  width: 86%; /* 1238 */
  aspect-ratio: 1238 / 1032;
  opacity: 0.14;
  border: 1px solid rgba(243, 246, 248, 0.1);
  box-shadow: inset 0 0 0 1px transparent;
}

.cs-hero__rings::before,
.cs-hero__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(243, 246, 248, 0.15);
}

.cs-hero__rings::before {
  inset: 11.25%;
}

.cs-hero__rings::after {
  inset: 22.6%;
  border-color: rgba(243, 246, 248, 0.2);
}

.cs-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: 10.8125rem; /* title sits at y=173 */
  text-align: center;
}

/* Three forced lines, light throughout with only "Moving Company Owner" bold,
   and the payoff phrase in the brand violet — as the reference shows. */
.cs-hero__title {
  max-width: 58.125rem; /* 930px */
  font-family: var(--font-display);
  font-size: 3.5rem; /* 56px */
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.cs-hero__title strong {
  font-weight: 600;
}

.cs-hero__text {
  max-width: 26rem; /* 416px */
  margin-block-start: var(--space-lg); /* 20px */
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
}

/* .cs-accent is the same highlight, named for use anywhere in the case copy:
   the editor wraps a phrase in <span class="cs-accent"> from any text field on
   any of the three case pages. .cs-before__pivot is the bold variant. */
.cs-hero__accent,
.cs-accent {
  color: var(--color-lime); /* #b5fe00 */
}

/* App.webp carries the panel's own border and top edge, so only the frame's
   violet glow is drawn here. In flow, not pinned: 44px after the intro block
   (173 + 248 − 20 + 52 = 453) puts its top on the frame's y=497, and the
   section then grows to the full height of the chart. */
.cs-hero__app {
  margin-block-start: 2.75rem; /* 44px */
  border-radius: 0.625rem;
  box-shadow: 0 -19px 61.25px rgba(140, 69, 255, 0.4),
    0 -20px 61.25px rgba(140, 69, 255, 0.25);
}

.cs-hero__app picture,
.cs-hero__app img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* Sinks the mockup back into the page background */
.cs-hero__fade {
  position: absolute;
  inset-block-start: 37.75rem; /* 604px */
  inset-block-end: 0;
  inset-inline: 0;
  background: linear-gradient(180deg, rgba(4, 9, 15, 0) 0%, #04090f 100%);
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   3. Before
   ========================================================================== */
.cs-before {
  overflow: hidden;
  background-color: var(--color-bg);
  padding-block: var(--space-6xl); /* 120px */
}

.cs-before .cs-title {
  margin-block-end: var(--space-4xl); /* 52px */
}

.cs-before__grid {
  display: grid;
  grid-template-columns: 663fr 665fr; /* 663 + 20 gap of 1348 */
  gap: var(--space-lg);
  align-items: center;
}

.cs-before__media {
  overflow: hidden;
  aspect-ratio: 663 / 497;
  border-radius: 0.625rem;
}

.cs-before__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-before__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-before__lede {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.cs-before__label {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
}

.cs-issues {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cs-issues__item {
  display: flex;
  gap: 0.375rem;
}

.cs-issues__num {
  flex: 0 0 1.25rem; /* 20px */
  font-weight: 200;
  font-size: var(--fs-base);
  line-height: 1.36;
  letter-spacing: -0.16px;
  text-align: right;
  color: var(--color-text);
}

.cs-issues__item p {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

/* ==========================================================================
   4. The Solution
   ========================================================================== */
.cs-solution {
  overflow: hidden;
  background-color: var(--color-bg);
  padding-block: var(--space-6xl);
}

.cs-solution .cs-title {
  margin-block-end: var(--space-4xl);
}

/* Two independent rows, as the frame has them: 744 + 595, then 595 + 744.
   A single grid cannot mirror column widths per row — that swap is what put
   the wide card into the narrow column and wrapped its title. */
.cs-bento {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.cs-bento__row {
  display: flex;
  gap: 0.625rem;
}

.cs-card--wide {
  flex: 744 1 0;
}

.cs-card--narrow {
  flex: 595 1 0;
}

.cs-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 21.375rem; /* 342px */
  /* 28 top (the number sits at 28,28), 24 sides, and only 6 at the bottom —
     the frame runs the copy almost to the card's edge, which is what keeps
     the card at exactly 342 rather than growing past it. */
  padding: 1.75rem 1.5rem 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.625rem;
  background-color: rgba(0, 0, 0, 0.06);
}

.cs-card--wide {
  border-color: rgba(226, 226, 226, 0.15);
  background-image: linear-gradient(
    180deg,
    #05030a 0%,
    #1b0d3a 42%,
    #3f1a75 100%
  );
}

.cs-card__num {
  font-family: var(--font-display);
  font-size: 2.875rem; /* 46px */
  font-weight: 600;
  line-height: 0.87; /* Figma's 40px box for a 46px glyph */
  color: rgba(165, 165, 165, 0.54);
}

.cs-card__title {
  font-family: var(--font-display);
  font-size: 2rem; /* 32px */
  font-weight: 600;
  line-height: var(--lh-tight); /* Figma's 27.4 is the glyph box, not a line box */
  color: var(--color-text-bright);
}

.cs-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 43.5rem; /* 696px */
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

/* The frame drops the copy low in the card: the number ends at y=68 and the
   title starts at 200 (205 in the second row), so the gap is explicit. */
.cs-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 7.5rem; /* 200 − 28 padding − 40 number − 12 card gap */
}

/* The second row is 350 tall with its titles on y=205 */
.cs-bento__row:last-child .cs-card {
  min-height: 21.875rem;
  border-radius: 0.75rem;
}

.cs-bento__row:last-child .cs-card__body {
  margin-block-start: 7.8125rem;
}

/* Glass puzzles, placed and sized exactly as the frame has them.
   `contain` keeps them undistorted — the frame's rects are not square-on to
   the source files' aspect. */
.cs-card__puzzle {
  position: absolute;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.cs-card__puzzle--02 {
  inset-block-start: 7.3%;
  inset-inline-start: 22.7%;
  width: 23%;
}

.cs-card__puzzle--03 {
  inset-block-start: 21%;
  inset-inline-start: 13.6%;
  width: 23%;
}

/* ==========================================================================
   5. Results
   ========================================================================== */
.cs-results {
  overflow: hidden;
  background: var(--gradient-section); /* 107.08deg #100d2e → #020103 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--space-6xl);
}

.cs-results__title {
  max-width: 58.8125rem; /* 941px */
  margin-inline: auto;
  margin-block-end: 3.5rem; /* title 120→296 */
}

.cs-results__panel {
  display: grid;
  grid-template-columns: 749fr 530fr;
  gap: 4rem;
  padding: 1.5625rem; /* 25px */
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cs-results__media {
  overflow: hidden;
  aspect-ratio: 749 / 367;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.02);
}

.cs-results__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cs-results__note {
  display: grid;
  grid-template-columns: 529fr 612fr;
  gap: 5.9375rem; /* 95px */
  align-items: start;
  margin-block-start: 2.75rem;
}

.cs-results__lede {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.cs-note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 15.625rem; /* 250px */
  padding: 1.5rem; /* 24px */
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.1);
}

/* The Google / Google Ads badges. The frame places them as two circles whose
   combined box is 149×89 at (439, 146) inside the 612×250 block — the same
   1.674 ratio as the asset, so one image covers both. */
.cs-note__badges {
  position: absolute;
  inset-block-start: 58.4%; /* 146 / 250 */
  inset-inline-start: 71.73%; /* 439 / 612 */
  width: 24.35%; /* 149 / 612 */
  height: auto;
  pointer-events: none;
}

.cs-note__text {
  max-width: 25.5rem; /* 408px — the frame wraps it well clear of the badges */
}

.cs-note__title {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.cs-note__text {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

/* ==========================================================================
   6. What the Client Gained
   ========================================================================== */
.cs-gained {
  overflow: hidden;
  background-color: var(--color-bg);
  padding-block: var(--space-6xl);
}

.cs-gained .cs-title {
  max-width: 58.8125rem;
  margin-inline: auto;
  margin-block-end: 3.5rem;
}

/* Report screenshots are 1120 wide in the frame, so the row is a slider:
   the track scrolls (drag / swipe / wheel) and the arrows step one slide. */
.cs-slider {
  position: relative;
}

.cs-slider__track {
  display: flex;
  gap: 1.3125rem; /* 21px */
  margin-inline: calc(var(--container-gutter) * -1);
  padding-inline: var(--container-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.cs-slider__track::-webkit-scrollbar {
  display: none;
}

.cs-slider__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* Controls sit over the slide, centred on the image — the label below it is
   36px tall, so the midpoint is offset by half of that. */
.cs-slider__nav {
  position: absolute;
  inset-block-start: calc(50% - 1.125rem);
  inset-inline: 0.1875rem; /* 3px, as the frame insets them */
  z-index: 2;
  display: flex;
  justify-content: space-between;
  translate: 0 -50%;
  pointer-events: none;
}

.slider-btn {
  display: grid;
  place-items: center;
  width: 2.25rem; /* 36px */
  height: 2rem; /* 32px */
  border-radius: 0.25rem;
  background-color: #04090f;
  pointer-events: auto;
  transition: opacity var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.slider-btn svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color-text); /* #e2e2e2 */
}

.slider-btn:hover:not(:disabled) {
  background-color: #0b1420;
}

.slider-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

[data-slider-next] svg {
  rotate: 180deg;
}

.cs-slide {
  flex: 0 0 70rem; /* 1120px */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  scroll-snap-align: center;
}

.cs-slide__media {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio, 1120 / 493);
  border-radius: var(--radius-sm);
}

/* Cropped from the top: the label is baked into the bottom of the first shot
   and the third one has dead space there */
.cs-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cs-slide__label {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  text-align: center;
  color: var(--color-text);
}

.cs-gained__summary {
  display: grid;
  grid-template-columns: 687fr 660fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-block-start: 2rem;
}

.cs-gained__heading {
  max-width: 34.5625rem; /* 553px */
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.cs-gained__outro {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  max-width: 35.625rem; /* 570px */
  margin-block-start: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 78.75em) {
  .cs-title {
    font-size: clamp(2rem, 4.3vw, 3.875rem);
  }

  .cs-hero__app {
    margin-block-start: 3rem;
  }

  .cs-before__grid,
  .cs-results__panel,
  .cs-results__note,
  .cs-gained__summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .cs-bento__row {
    flex-direction: column;
  }

  /* The wide/narrow flex ratios size the main axis — once the row stacks that
     axis is vertical, so a 0 basis would collapse the cards to nothing. */
  .cs-card--wide,
  .cs-card--narrow {
    flex: 0 0 auto;
  }

  .cs-slide {
    flex-basis: 85%;
  }
}

/* Mobile-only control (see the 393 frame) */
.cs-before__more {
  display: none;
}

/* The case-study header button is light on desktop, but the mobile frame draws
   it in lime — same as every other page's header. */
@media (max-width: 63.9375em) {
  .header .btn--outline-light {
    /* The mobile size rules live on --outline-lime, since that is the variant
       every other page's header uses; this one needs them too. */
    padding: 0 1.25rem;
    min-height: 2.625rem; /* 42px */
    font-size: 0.875rem; /* 14px */
    border-color: var(--color-lime);
    color: var(--color-lime);
  }

  .header .btn--outline-light:hover {
    background-color: var(--color-lime);
    color: var(--color-text-dark);
  }
}

/* ==========================================================================
   The 393 frame. Sections are padding [70,16] with a 32 gap, every section
   title is 32/600 centred, and the bento stacks into one column.
   ========================================================================== */
@media (max-width: 47.9375em) {
  .cs-before,
  .cs-solution,
  .cs-results,
  .cs-gained {
    padding-block: 4.375rem; /* 70px */
  }

  .cs-title {
    font-size: 2rem; /* 32px */
    line-height: var(--lh-tight);
    letter-spacing: -0.32px;
    text-align: center;
  }

  .cs-before .cs-title,
  .cs-solution .cs-title,
  .cs-gained .cs-title,
  .cs-results__title {
    margin-block-end: var(--space-2xl); /* 32px */
  }

  /* --- Hero --- */
  .cs-hero__intro {
    padding-block-start: 8.375rem; /* title on y=134 */
  }

  .cs-hero__title {
    max-width: 100%;
    font-size: 2rem; /* 32px */
    line-height: var(--lh-tight); /* the frame uses 1 here, not 1.1 */
    letter-spacing: -0.32px;
		margin-bottom: 60px; /* 4px, to keep the subtitle at y=330 */
  }
	.cs-hero__backdrop span{
		display: none;
	}
  .cs-hero__title br{
		display: none;
	}
  .cs-hero__text {
    max-width: 21.4375rem; /* 343px */
    margin-block-start: 0.25rem; /* headline ends 326, this starts 330 */
    font-size: var(--fs-base);
    letter-spacing: -0.32px;
  }

  .cs-hero__app {
    /* 412 in the frame; the subtitle wraps one line shorter here than Figma
       measures it, so the gap carries the difference */
    margin-block-start: 2.5rem;
  }

  .cs-hero__rings {
    inset-block-start: 9.9375rem; /* 159px */
    inset-inline-start: -22.4%; /* −88 / 393 */
    width: 144.7%; /* 569 / 393 */
  }

  /* --- Before --- */
  .cs-before__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg); /* 20px */
  }

  .cs-before__media {
    aspect-ratio: 361 / 193;
    border-radius: 0.375rem; /* 6px */
  }

  .cs-before__copy {
    gap: 1.5rem; /* 24px */
  }

  .cs-before__label {
    font-size: var(--fs-lg);
  }

  .cs-issues {
    gap: 0.75rem; /* 12px */
  }

  /* Only the first issue shows; "Read more" reveals the rest. Hiding whole
     items rather than clipping to a height keeps the cut on an item boundary
     however long the copy runs. */
  .cs-issues > .cs-issues__item:not(:first-child) {
    display: none;
  }

  .cs-issues.is-expanded > .cs-issues__item {
    display: flex;
  }

  /* align-self only reaches the inline axis in case 1, where the control sits
     in the flex .cs-before__copy. In cases 2 and 3 it is a grid child of
     .cs-before__grid, so align-self points down the block axis and the button
     spans the column — text-align keeps the label on the right either way. */
  .cs-before__more {
    display: block;
    align-self: flex-end;
    text-align: right;
    font-size: 0.875rem; /* 14px */
    line-height: var(--lh-normal);
    letter-spacing: -0.4px;
    color: var(--color-text-slate); /* #64748b */
  }

  /* --- The Solution: one column, 24px titles, 32px numbers --- */
  .cs-bento__row {
    flex-direction: column;
    gap: 0.625rem;
  }

  .cs-card--wide,
  .cs-card--narrow {
    flex: 0 0 auto;
  }

  .cs-card,
  .cs-bento__row:last-child .cs-card {
    min-height: 0;
    padding: 1.125rem; /* 18px */
    border-radius: 0.625rem;
  }

  .cs-card__body,
  .cs-bento__row:last-child .cs-card__body {
    margin-block-start: 2.25rem; /* copy sits ~90px down a 346-tall card */
    gap: 0.75rem;
  }

  .cs-card__title {
    font-size: var(--fs-h4); /* 24px */
    font-weight: 500;
    line-height: var(--lh-snug);
  }

  .cs-card__text {
    gap: 0.4375rem; /* 7px */
  }

  .cs-card__num {
    font-size: 2rem; /* 32px */
    line-height: var(--lh-tight);
    letter-spacing: -0.32px;
  }

  /* 91.4 × 67.4 in the frame, tucked into the card's top-right */
  .cs-card__puzzle--02,
  .cs-card__puzzle--03 {
    inset-block-start: 1.9%;
    inset-inline-start: auto;
    inset-inline-end: 1%;
    width: 25.3%; /* 91 / 361 */
  }

  /* --- Results --- */
  .cs-results__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg); /* 20px */
    padding: var(--space-md); /* 16px */
    border-radius: var(--radius-md);
  }

  .cs-results__media {
    aspect-ratio: 329 / 137;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .cs-results__media img {
    border-radius: 0.25rem;
  }

  .cs-checks {
    gap: 0.75rem; /* 12px */
  }

  .cs-checks li,
  .cs-before__label,
  .cs-slide__label {
    font-size: var(--fs-base);
    letter-spacing: -0.32px;
  }

  .cs-results__note {
    gap: 1.875rem; /* 30px */
  }

  .cs-note {
    min-height: 0;
    padding: var(--space-md);
  }

  .cs-note__title,
  .cs-gained__heading {
    font-size: var(--fs-h4); /* 24px */
    line-height: var(--lh-snug);
  }

  .cs-note__text {
    max-width: 100%;
  }

  .cs-note__badges {
    display: none;
  }

  /* --- What the Client Gained: arrows drop below the row --- */
  .cs-slide {
    flex-basis: 100%;
  }

  .cs-slider__track {
    gap: var(--space-md); /* 16px */
  }

  .cs-slider__nav {
    position: static;
    justify-content: center;
    gap: var(--space-lg); /* 20px */
    margin-block-start: var(--space-md);
    translate: none;
  }

  .slider-btn {
    background-color: var(--color-surface-light);
  }

  .slider-btn svg {
    fill: var(--color-bg);
  }

  .cs-gained__summary {
    gap: var(--space-md);
  }

  .cs-gained__outro {
    gap: var(--space-sm);
    margin-block-start: var(--space-2xl);
  }
}