/* A spacious service section, using the same type and surfaces as the product story. */
.migration-section { padding-block: clamp(80px, 8vw, 120px); background: #fff; }
.migration-section .migration-card { width: min(calc(100% - 64px), 1200px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(48px, 6vw, 88px); }
.migration-copy { min-width: 0; }
.migration-copy h2 { max-width: 500px; margin: 0; font-size: clamp(38px, 3.8vw, 56px); line-height: 1.08; letter-spacing: -.055em; font-weight: 750; text-wrap: balance; }
.migration-copy h2 > span { display: block; }
.migration-copy > p:not(.kicker):not(.migration-support) { max-width: 460px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.migration-process { display: grid; gap: 15px; margin: 29px 0 31px; padding: 0; list-style: none; }
.migration-process li { display: flex; align-items: baseline; gap: 15px; color: #39425b; font-size: 14px; line-height: 1.6; }
.migration-process li > span { color: #aaa2bf; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.migration-copy .button { gap: 22px; box-shadow: none; }
.migration-copy .button svg { width: 17px; height: 17px; }
.migration-copy .migration-support { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: #737a8f; font-size: 11px; line-height: 1.6; }
.migration-support svg { width: 14px; height: 14px; flex-shrink: 0; color: #55927c; }
.migration-diagram { min-width: 0; margin: 0; }
.migration-canvas { position: relative; display: flex; flex-direction: column; align-items: center; padding: 38px 40px 42px; border-radius: 30px; background: linear-gradient(150deg, #f7f6fc 5%, #efedf9 100%); }
.migration-export { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); padding: 16px 18px; border: 1px solid #e7e4f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px -9px rgb(43 34 75 / 15%); }
.migration-export-icon { display: grid; place-items: center; flex: 0 0 37px; height: 42px; border: 1px solid #ebe7f4; border-radius: 8px; color: #8c7cb3; background: #f7f5fc; font-size: 18px; }
.migration-export strong, .migration-export div > span { display: block; }
.migration-export strong { color: #394057; font-size: 12px; font-weight: 650; line-height: 1.5; }
.migration-export div > span { margin-top: 3px; color: #9296a6; font-size: 10px; line-height: 1.5; }
.migration-export-check { margin-left: auto; color: #a59bbf; }
.migration-export-check svg { width: 16px; height: 16px; }
.migration-connector { display: flex; flex-direction: column; align-items: center; height: 37px; color: #b6acca; }
.migration-connector > span { width: 1px; height: 20px; background: #cbc3dd; }
.migration-connector svg { width: 17px; height: 17px; margin-top: -5px; transform: rotate(90deg); }
.migration-workspace { width: 100%; overflow: hidden; border: 1px solid #e4e2ed; border-radius: 17px; background: #fff; box-shadow: 0 28px 40px -26px rgb(50 37 101 / 24%), 0 5px 12px rgb(50 37 101 / 3%); }
.migration-workspace header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 25px; border-bottom: 1px solid #eeedf3; }
.migration-brand { display: flex; align-items: center; gap: 9px; }
.migration-brand img { width: 24px; height: 25px; object-fit: contain; }
.migration-brand b { color: #141829; font-size: 21px; font-weight: 750; letter-spacing: -.055em; }
.migration-workspace header > span { color: #979aaa; font-size: 10px; }
.migration-workspace-body { padding: 24px 25px 12px; }
.migration-workspace .migration-workspace-title { margin: 0 0 15px; color: #252b41; font-size: 18px; font-weight: 650; letter-spacing: -.025em; }
.migration-data { margin: 0; padding: 0; list-style: none; }
.migration-data li { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid #f0eff5; }
.migration-data li:last-child { border-bottom: 0; }
.migration-data-icon { display: grid; flex: 0 0 37px; height: 39px; place-items: center; border: 1px solid #eeecf4; border-radius: 9px; color: #817294; background: #faf9fc; font-size: 14px; }
.migration-data li > div { min-width: 0; }
.migration-data strong, .migration-data small { display: block; }
.migration-data strong { color: #41475c; font-size: 13px; font-weight: 600; line-height: 1.5; }
.migration-data small { margin-top: 4px; color: #8c91a2; font-size: 10px; line-height: 1.5; }
.migration-data-check { display: grid; flex: 0 0 22px; height: 22px; place-items: center; margin-left: auto; border-radius: 50%; color: #398366; background: #eaf6ef; }
.migration-data-check svg { width: 13px; height: 13px; }
.migration-workspace footer { display: flex; align-items: center; gap: 12px; padding: 18px 25px; border-top: 1px solid #e9efe9; background: #f5faf7; }
.migration-workspace footer > span { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border: 1px solid #d6e9df; border-radius: 50%; color: #408163; }
.migration-workspace footer svg { width: 16px; height: 16px; }
.migration-workspace footer strong, .migration-workspace footer small { display: block; }
.migration-workspace footer strong { color: #47725c; font-size: 11px; font-weight: 650; line-height: 1.5; }
.migration-workspace footer small { margin-top: 3px; color: #8a9b92; font-size: 10px; line-height: 1.5; }
.migration-diagram figcaption { max-width: 400px; margin: 18px auto 0; padding-inline: 10px; color: #8c90a0; font-size: 11px; line-height: 1.7; text-align: center; }
@media (max-width: 1050px) {
  .migration-section .migration-card { gap: 40px; }
  .migration-canvas { padding: 30px 24px; }
  .migration-export { width: 100%; padding: 14px; }
  .migration-workspace header { padding: 20px; }
  .migration-workspace header > span { max-width: 90px; text-align: right; }
  .migration-workspace-body { padding-inline: 20px; }
  .migration-workspace footer { padding-inline: 20px; }
}
@media (max-width: 800px) {
  .migration-section .migration-card { width: min(calc(100% - 48px), 560px); grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .migration-copy h2 { font-size: clamp(38px, 7vw, 48px); }
  .migration-copy > p:not(.kicker):not(.migration-support) { max-width: none; }
  .migration-canvas { padding: 32px; }
}
@media (max-width: 480px) {
  .migration-section .migration-card { width: calc(100% - 40px); }
  .migration-copy h2 { font-size: 38px; }
  .migration-copy > p:not(.kicker):not(.migration-support) { font-size: 16px; }
  .migration-process li { gap: 12px; font-size: 13px; }
  .migration-copy .migration-support { font-size: 10px; }
  .migration-canvas { padding: 25px 17px; border-radius: 24px; }
  .migration-export { gap: 10px; padding: 13px 12px; }
  .migration-export strong { font-size: 11px; }
  .migration-export div > span { font-size: 9px; }
  .migration-export-check { display: none; }
  .migration-workspace header { padding: 18px 15px; }
  .migration-workspace header > span { max-width: 78px; font-size: 9px; }
  .migration-workspace-body { padding: 22px 15px 10px; }
  .migration-data li { gap: 10px; }
  .migration-data small { font-size: 9px; }
  .migration-data-icon { flex-basis: 32px; height: 35px; font-size: 13px; }
  .migration-data-check { flex-basis: 19px; height: 19px; }
  .migration-workspace footer { gap: 10px; padding: 16px 15px; }
  .migration-diagram figcaption { font-size: 10px; }
}