.migration-case { --migration-purple: #7540b0; }
.migration-case .migration-hero { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; min-height: 36rem; padding: clamp(4rem,7vw,7rem) max(1.25rem,calc((100vw - 70rem)/2)); align-items: center; }
.migration-case .migration-hero h1 { font-size: clamp(2.8rem,5.5vw,5.2rem); line-height: 1.02; letter-spacing: -.055em; max-width: 13ch; margin: 1rem 0 1.5rem; }
.migration-case .case-deck { font-size: clamp(1.1rem,1.7vw,1.3rem); max-width: 38ch; }
.migration-hero-art img { width: 100%; transform: rotate(-8deg); transition: transform .45s ease; }
.migration-hero-art:hover img { transform: rotate(-3deg) translateY(-.5rem); }
.migration-case .case-body { padding-block: 3.5rem; }
.migration-case p { font-size: 1.0625rem; line-height: 1.65; }
.migration-case p.eyebrow { color: var(--migration-purple); font-size: .875rem; line-height: 1.4; margin: 0 0 .8rem; }
.migration-overview { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem,5vw,5rem); padding-bottom: 3.5rem; }
.migration-overview p:first-of-type { margin-top: 0; }
.migration-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-content: start; }
.migration-outcomes strong { display: block; font-size: clamp(2.5rem,4vw,4rem); letter-spacing: -.05em; line-height: 1.2; }
.migration-outcomes span { display: block; font-size: 1rem; }
.migration-outcomes > p { grid-column: 1/-1; font-size: .875rem; color: #68636c; margin: 0; }
.migration-chapter { border-top: 1px solid var(--line); padding-block: clamp(3rem,5vw,4.5rem); }
.migration-chapter-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); margin-bottom: 2.5rem; }
.migration-chapter h2 { font-size: clamp(2.4rem,5vw,4.5rem); line-height: 1.04; letter-spacing: -.05em; margin: 0; max-width: 17ch; text-wrap: balance; }
.migration-chapter h2 > span { display: block; font-size: .5em; margin-bottom: .55rem; }
.migration-chapter-intro p:first-child { margin-top: 0; }
.migration-case h3 { font-size: clamp(1.4rem,2.1vw,2rem); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 1rem; text-wrap: balance; }
.migration-diagram { margin: 0 0 3.5rem; }
.migration-diagram > a { display: block; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: white; }
.migration-diagram img { width: 100%; height: auto; }
.migration-board { position: relative; height: clamp(25rem, 65vh, 38rem); overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: #fff; cursor: grab; touch-action: none; user-select: none; }
.migration-board.is-panning { cursor: grabbing; }
.migration-board img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.migration-board:focus-visible { outline: 3px solid var(--migration-purple); outline-offset: 4px; }
.migration-board-controls { display: flex; align-items: center; gap: .5rem; }
.migration-board-controls output { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.migration-board-controls button:disabled { opacity: .35; cursor: default; }
@media(max-width:760px) { .migration-board { height: min(65vh, 30rem); min-height: 22rem; } }
.migration-diagram-viewer { position: relative; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: white; cursor: zoom-in; }
.migration-diagram-lens { position: absolute; width: 240px; height: 240px; border: 3px solid var(--migration-purple); border-radius: 50%; pointer-events: none; background-color: white; background-image: url('/assets/migration/diagram-detail.png'); background-repeat: no-repeat; box-shadow: 0 4px 18px rgba(17,17,17,.18); }
.migration-diagram-lens[hidden] { display: none; }
.migration-diagram figcaption button { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .8rem; font: inherit; color: var(--ink); cursor: pointer; white-space: nowrap; }
.migration-diagram figcaption button[aria-pressed="true"] { background: var(--ink); color: white; }
.migration-diagram-viewer:focus-visible { outline: 3px solid var(--migration-purple); outline-offset: 4px; }
@media(max-width:760px) { .migration-diagram-lens { width: 160px; height: 160px; } .migration-diagram figcaption button { align-self: flex-start; } }
.migration-diagram figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .85rem; font-size: .875rem; color: #68636c; }
.migration-feature-heading { max-width: 43rem; margin: 0 0 2rem; }
.migration-feature-heading p:last-child { margin-bottom: 0; }
.migration-gallery { margin-bottom: 1rem; min-width: 0; }
.migration-track { display: flex; gap: 1.75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .25rem .25rem 1rem; overscroll-behavior-inline: contain; }
.migration-track::-webkit-scrollbar { display: none; }
.migration-slide { flex: 0 0 16rem; min-width: 0; scroll-snap-align: start; margin: 0; }
.migration-phone { border: 3px solid #282828; border-radius: 2rem; overflow: hidden; background: white; width: 100%; max-width: 18rem; aspect-ratio: 953 / 2048; }
.migration-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.migration-slide figcaption { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.migration-case h4 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 .5rem; letter-spacing: -.02em; }
.migration-slide figcaption p { font-size: .9375rem; margin: 0; }
.migration-gallery-controls { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .5rem; }
.migration-gallery-controls button { width: 3rem; height: 3rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 50%; font: inherit; font-size: 1.4rem; cursor: pointer; }
.migration-gallery-controls button:hover { background: var(--ink); color: white; }
.migration-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; padding-block: 3rem; border-top: 1px solid var(--line); }
.migration-update-feature { margin-top: 3rem; }
.migration-update-demo { justify-self: center; width: min(100%,18rem); }
.migration-update-demo .migration-phone { box-shadow: 7px 7px 0 rgba(17,17,17,0.140); }
.migration-update-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.migration-update-controls button { background: white; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: inherit; font-size: .875rem; font-weight: 700; padding: .65rem .85rem; cursor: pointer; }
.migration-update-controls button span { margin-right: .4rem; font-size: .75rem; opacity: .65; }
.migration-update-controls button.is-active { background: var(--ink); color: white; }
.migration-case .migration-small { font-size: .875rem; color: #68636c; }
.migration-single { width: min(100%,18rem); justify-self: center; margin: 0; }
.migration-single figcaption { font-size: .875rem; margin-top: 1rem; color: #68636c; }
.migration-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; max-width: 40rem; margin: 2rem auto 3rem; }
.migration-pair .migration-slide { width: min(100%,18rem); justify-self: center; }
.migration-reflection { border-top: 1px solid var(--line); padding-top: 3rem; max-width: 48rem; }
.migration-case button:focus-visible,.migration-case a:focus-visible,.migration-track:focus-visible { outline: 3px solid var(--migration-purple); outline-offset: 4px; }
@media(max-width:760px) {
 .migration-case .migration-hero { grid-template-columns: 1fr; gap: 2rem; min-height: auto; padding: 3rem 1.25rem; }
 .migration-hero-art { width: min(100%,22rem); justify-self: center; }
 .migration-overview,.migration-chapter-intro,.migration-feature { grid-template-columns: 1fr; gap: 1.5rem; }
 .migration-diagram figcaption { flex-direction: column; gap: .35rem; }
 .migration-slide { flex-basis: min(74vw,16rem); }
 .migration-pair { gap: 1rem; }
 .migration-pair .migration-phone { border-radius: 1.25rem; }
}
@media(prefers-reduced-motion:reduce) { .migration-hero-art img { transition: none; } }

/* Match the Myko case's hero composition and editorial spacing. */
.migration-case { --section-space: clamp(3rem, 5vw, 4.5rem); --column-gap: clamp(2rem, 5vw, 4.5rem); --feature-space: clamp(2.5rem, 4vw, 3.5rem); }
.migration-case .migration-hero { display: flex; flex-direction: row; justify-content: flex-start; min-height: 78vh; padding: clamp(5rem, 12vw, 10rem) clamp(1.25rem, 8vw, 9rem) clamp(5rem, 8vw, 8rem); position: relative; overflow: hidden; }
.migration-case .migration-hero > div:first-child { max-width: min(38rem, 42vw); position: relative; z-index: 2; }
.migration-case .migration-hero h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -.05em; margin: 2rem 0; max-width: none; text-wrap: balance; }
.migration-case .migration-hero .case-deck { font-size: clamp(1.15rem, 2vw, 1.55rem); max-width: 42rem; }
.migration-case .migration-hero-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.migration-case .migration-hero-art img { width: 52%; margin-right: -2%; }
.migration-case .case-body { padding-block: var(--section-space); }
.migration-overview { column-gap: var(--column-gap); padding-bottom: var(--section-space); }
.migration-chapter { padding-block: var(--section-space); }
.migration-chapter-intro { gap: var(--column-gap); }
.migration-chapter h2 { max-width: 18ch; }
.migration-chapter h2 > span { line-height: 1.15; letter-spacing: -.025em; margin-bottom: .75rem; }
.migration-feature { column-gap: var(--column-gap); padding-block: var(--feature-space); }
.migration-update-feature { margin-top: var(--feature-space); }
.migration-reflection { padding-top: var(--feature-space); }
.migration-case p { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.6; }
@media(max-width:760px) {
 .migration-case .migration-hero { align-items: flex-start; min-height: 50rem; padding-bottom: 22rem; }
 .migration-case .migration-hero > div:first-child { max-width: 100%; }
 .migration-case .migration-hero-art { align-items: flex-end; justify-content: center; padding-bottom: 3rem; width: 100%; }
 .migration-case .migration-hero-art img { width: min(95%, 32rem); margin: 0; }
}

.migration-dependency-phone { position: relative; isolation: isolate; }
.migration-dependency-phone::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); z-index: 1; }
.migration-phone img.migration-dependency-warning { position: absolute; z-index: 2; width: 90%; height: auto; max-width: none; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: contain; border: 0; border-radius: .75rem; background: white; }

.migration-case .migration-hero-art .migration-transfer-art { display: block; width: 52%; margin-right: -2%; transform: rotate(-8deg); overflow: visible; }
.migration-shooting-arrow { animation: migration-arrow-flight var(--flight-time) linear infinite; animation-delay: var(--flight-delay); }
.migration-shooting-arrow path { fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@keyframes migration-arrow-flight { 0% { transform: translateX(-60px); opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(450px); opacity: 0; } }
.migration-shooting-arrow--steady { animation-name: migration-arrow-steady; }
@keyframes migration-arrow-steady { from { transform: translateX(-60px); opacity: .85; } to { transform: translateX(450px); opacity: .85; } }
@media(max-width:760px) { .migration-case .migration-hero-art .migration-transfer-art { width: min(95%,32rem); margin: 0; } }
@media(prefers-reduced-motion:reduce) { .migration-shooting-arrow { animation: none; transform: translateX(160px); opacity: .85; } .migration-shooting-arrow:nth-of-type(n+4) { display: none; } }

.migration-outcomes small { display: block; margin-top: .6rem; font-size: .875rem; line-height: 1.45; color: #68636c; }

.migration-update-arrows { display:none; }
@media(max-width:760px) {
 .migration-update-feature .migration-update-controls { display:none; }
 .migration-update-demo { display:grid;grid-template-columns:2.75rem minmax(0,18rem) 2.75rem;align-items:center;justify-content:center;gap:1rem .5rem;width:min(100%,25rem); }
 .migration-update-arrows { display:contents; }
 .migration-update-arrows > div { display:grid;grid-column:1 / -1;grid-row:1;gap:.25rem;text-align:center; }
 .migration-update-arrows > button:first-child { grid-column:1;grid-row:2; }
 .migration-update-arrows > button:last-child { grid-column:3;grid-row:2; }
 .migration-update-demo > .migration-update-screen { grid-column:2;grid-row:2;min-width:0; }
 .migration-update-arrows small { font-size:.75rem;color:#686270; }
 .migration-update-arrows strong { font-size:1.1rem; }
 .migration-update-arrows button { display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:1.25rem;cursor:pointer; }
 .migration-update-arrows button:disabled { opacity:.3;cursor:default; }
 .migration-update-arrows button:focus-visible { outline:2px solid #7540b0;outline-offset:3px; }
}