.copywriter-case {
  --copywriter-accent: #8c5de8;
  --copywriter-card: #f2f2f4;
  --copywriter-body-size: 17px;
  --copywriter-line-height: 1.68;
}

.copywriter-case .detail-progress-bar { background: var(--copywriter-accent); }

.copywriter-case h2,
.copywriter-case h3,
.copywriter-case h4 {
  font-size: clamp(24px, 2.2vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
}

.copywriter-case .copywriter-hero-subtitle {
  max-width: 760px;
  margin: clamp(28px, 3vw, 36px) auto 0;
  color: #777b83;
  font-size: var(--copywriter-body-size);
  line-height: 1.5;
}

.copywriter-media {
  position: relative;
  max-width: var(--detail-media);
  overflow: hidden;
  margin: clamp(34px, 5vw, 64px) auto 0;
  border-radius: clamp(18px, 2.3vw, 30px);
  background: transparent;
}

.copywriter-media img { display: block; width: 100%; height: auto; }
.copywriter-rounded-image { border-radius: inherit; }

.copywriter-media figcaption {
  padding: 14px 0 16px;
  color: #8d9097;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.copywriter-wide-media { max-width: 1080px; }
.copywriter-copy-width-media { max-width: var(--detail-copy); }
.copywriter-compact-media { max-width: 560px; }
.copywriter-tall-media { max-width: 760px; }
.copywriter-kit-media { max-width: 900px; }

.copywriter-context { padding-top: clamp(48px, 6vw, 76px); }
.copywriter-discovery,
.copywriter-solution,
.copywriter-final { padding-block: clamp(76px, 9vw, 124px); }

.copywriter-copy,
.copywriter-subheading,
.copywriter-list,
.copywriter-facts,
.copywriter-improvements {
  max-width: var(--detail-copy);
  margin-right: auto;
  margin-left: auto;
}

.copywriter-copy,
.copywriter-list,
.copywriter-fact p,
.copywriter-result .detail-result-title > p {
  color: #5f636b;
  font-size: var(--copywriter-body-size);
  line-height: var(--copywriter-line-height);
}

.copywriter-copy p:last-child,
.copywriter-fact p:last-child { margin-bottom: 0; }

.copywriter-copy > p { margin-bottom: 0; }
.copywriter-copy > p + p { margin-top: clamp(24px, 3vw, 32px); }

.copywriter-subheading h2,
.copywriter-subheading h3,
.copywriter-improvements h3 {
  margin-bottom: 22px;
  color: var(--detail-heading);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.copywriter-subheading h2 { text-align: center; }
.copywriter-centered { text-align: center; }

.copywriter-story + .copywriter-story,
.copywriter-feature + .copywriter-feature,
.copywriter-change + .copywriter-change { margin-top: clamp(76px, 9vw, 120px); }

.copywriter-context > .copywriter-story { margin-top: clamp(68px, 8vw, 104px); }

.copywriter-list {
  display: grid;
  gap: 14px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 24px;
}

.copywriter-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(76px, 9vw, 120px);
}

.copywriter-fact {
  padding: clamp(26px, 3vw, 38px);
  border-radius: 26px;
  background: linear-gradient(145deg, #eee9f8, #f7f5fa);
}

.copywriter-fact h3 { margin-bottom: 16px; font-size: 24px; }
.copywriter-fact p { margin-bottom: 0; }

.copywriter-case .copywriter-after-media { margin-top: clamp(42px, 5vw, 64px); }
.copywriter-case .copywriter-prototype-intro { margin-top: clamp(40px, 5vw, 64px); }
.copywriter-case .copywriter-final-summary {
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.copywriter-feature,
.copywriter-change { margin-top: clamp(76px, 9vw, 120px); }

.copywriter-solution > .detail-section-heading { margin-bottom: clamp(28px, 3vw, 40px); }
.copywriter-solution > .detail-section-heading h2 { font-size: clamp(32px, 3.8vw, 52px) !important; }
.copywriter-final > .detail-section-heading { margin-bottom: 40px; }
.copywriter-final > .detail-section-heading + .copywriter-change { margin-top: 0; }

.copywriter-result { padding-top: clamp(76px, 9vw, 120px); padding-bottom: clamp(96px, 10vw, 144px); }
.copywriter-result .detail-result-title { margin-bottom: clamp(64px, 7vw, 88px); }
.copywriter-result .detail-result-title > p { text-align: left; }
.copywriter-result .detail-result-title > p + p { margin-top: 20px; }
.copywriter-improvements h3 {
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.35 !important;
  letter-spacing: -.02em !important;
  text-align: left !important;
}

@media (max-width: 820px) {
  .copywriter-case { --copywriter-body-size: 16px; }
  .copywriter-final > .detail-section-heading { margin-bottom: 28px; }
}

@media (max-width: 560px) {
  .copywriter-case { --detail-gutter: 18px; }
  .copywriter-media { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .copywriter-case * { scroll-behavior: auto !important; }
}