/* Shared editorial hierarchy for the two connected-home case studies. */
:is(.myko-case, .migration-case) {
  --section-space: clamp(3rem, 5vw, 4.5rem);
  --feature-space: clamp(2.5rem, 4vw, 3.5rem);
  --column-gap: clamp(2rem, 5vw, 4.5rem);
  --case-copy-size: clamp(1rem, 1.3vw, 1.125rem);
  --case-feature-size: clamp(1.4rem, 2.1vw, 2rem);
}
:is(.myko-case, .migration-case) .case-body { padding-block: var(--section-space); }
:is(.myko-case, .migration-case) :is(.migration-chapter-intro, .gallery-heading) { margin-bottom: var(--feature-space); }
.myko-case :is(.away-copy, .metrics-heading, .navigation-intro, .automation-copy, .case-closing) > h3,
.migration-case :is(.migration-feature, .migration-feature-heading, .migration-reflection) h3 {
  font-size: var(--case-feature-size); line-height: 1.15; letter-spacing: -.03em;
  margin: 0 0 .75rem; text-wrap: balance;
}
.myko-case :is(.case-story, .rebuild-intro, .away-copy, .metrics-heading, .navigation-intro, .automation-copy, .notion-intro, .case-section-copy) > p:not(.eyebrow):not(.metrics-hint),
.migration-case :is(.migration-overview, .migration-chapter-intro, .migration-feature, .migration-feature-heading, .migration-reflection) p:not(.eyebrow):not(.migration-small) {
  font-size: var(--case-copy-size); line-height: 1.6; margin-block: 0;
}
.myko-case :is(.case-story, .rebuild-intro, .away-copy, .metrics-heading, .navigation-intro, .automation-copy, .notion-intro, .case-section-copy) > p:not(.eyebrow) + p,
.migration-case :is(.migration-overview, .migration-chapter-intro, .migration-feature, .migration-reflection) p:not(.eyebrow) + p { margin-top: 1rem; }
.myko-case :is(.away-copy, .metrics-heading, .navigation-intro, .automation-copy) > .eyebrow,
.migration-case :is(.migration-feature, .migration-feature-heading, .migration-reflection) .eyebrow { margin-bottom: .6rem; }
.myko-case .gallery-caption,
.migration-case .migration-slide figcaption { margin-top: 1.25rem; padding: 1rem 0 0; border-top: 1px solid var(--line); min-height: 0; }
.myko-case .gallery-caption h3,
.migration-case .migration-slide h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.02em; margin: .5rem 0; }
.migration-case .migration-slide h4:first-child { margin-top: 0; }
.myko-case .gallery-caption p,
.migration-case .migration-slide figcaption p { font-size: .9375rem; line-height: 1.6; margin: 0; }
.myko-case .gallery-controls,
.migration-case .migration-gallery-controls { gap: .65rem; margin-top: 1.25rem; }
.myko-case .gallery-button,
.migration-case .migration-gallery-controls button { width: 3rem; height: 3rem; background: transparent; font-size: 1.35rem; }
.myko-case .gallery-button:hover,
.myko-case .gallery-button:focus-visible,
.migration-case .migration-gallery-controls button:hover { background: var(--ink); color: white; }
.migration-case .migration-diagram { margin-bottom: var(--feature-space); }
.migration-case .migration-feature-heading { margin-bottom: 2rem; }
.migration-case .migration-pair { margin-block: 0 var(--feature-space); }
.migration-case .migration-reflection { padding-top: var(--feature-space); }
.migration-case .migration-feature > :is(div, figure) { min-width: 0; }
:is(.myko-case, .migration-case) :is(.case-hero, .case-body) p { text-wrap: pretty; }
@media(max-width:760px) {
  .migration-case .migration-chapter-intro { row-gap: 1.5rem; }
}