body.op-migration-review {
  background:
    radial-gradient(circle at 50% -8%, rgba(0, 242, 255, 0.11), transparent 31rem),
    radial-gradient(circle at 92% 20%, rgba(141, 92, 255, 0.08), transparent 26rem),
    #030506;
}

.op-migration-shell {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 132px 0 95px;
}

.op-migration-glow {
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: -1;
  width: min(720px, 90vw);
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 255, 0.09), transparent 68%);
  filter: blur(35px);
  transform: translateX(-50%);
}

.op-migration-back { margin-bottom: 42px; }
.op-migration-back a { color: #7b8789; font-size: 0.68rem; font-weight: 800; text-decoration: none; }
.op-migration-back a:hover { color: var(--op-cyan); }

.op-migration-hero { max-width: 900px; margin: 0 auto 70px; text-align: center; }
.op-migration-hero .op-section-kicker { margin-bottom: 19px; }
.op-migration-hero h1 { margin: 0; color: #fff; font-size: clamp(2.65rem, 7vw, 5.6rem); font-weight: 950; letter-spacing: -0.065em; line-height: 0.98; }
.op-migration-hero h1 em { color: var(--op-cyan); font-style: normal; }
.op-migration-hero > p { max-width: 800px; margin: 27px auto 0; color: #929d9f; font-size: clamp(0.95rem, 1.8vw, 1.13rem); line-height: 1.75; }
.op-migration-hero > p strong { color: #e8eff0; }

.op-migration-hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.op-migration-hero-actions .op-button { min-width: 230px; }

.op-migration-safety { display: flex; align-items: center; gap: 11px; max-width: 720px; margin: 23px auto 0; padding: 13px 17px; border: 1px solid rgba(255, 191, 91, 0.18); border-radius: 13px; background: rgba(255, 191, 91, 0.045); text-align: left; }
.op-migration-safety > span { display: grid; flex: 0 0 auto; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(255, 191, 91, 0.1); color: var(--op-amber); font-size: 0.64rem; font-weight: 900; }
.op-migration-safety p { margin: 0; color: #94866e; font-size: 0.66rem; line-height: 1.5; }
.op-migration-safety strong { color: #e1c58f; }

.op-migration-steps,
.op-migration-scope,
.op-migration-faq,
.op-migration-final {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(15, 21, 23, 0.92), rgba(7, 10, 11, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

.op-migration-steps,
.op-migration-faq { padding: clamp(25px, 4vw, 42px); }
.op-migration-section-heading { margin-bottom: 25px; }
.op-migration-section-heading h2,
.op-migration-scope h2,
.op-migration-final h2 { margin: 0; color: #f4f8f9; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.04em; }

.op-migration-steps ol { display: grid; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 18px; overflow: hidden; list-style: none; }
.op-migration-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; background: #090d0f; }
.op-migration-steps li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.op-migration-step-number { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(0, 242, 255, 0.24); border-radius: 50%; background: rgba(0, 242, 255, 0.06); color: var(--op-cyan); font-size: 0.65rem; font-weight: 900; }
.op-migration-steps strong { display: block; color: #e9eff0; font-size: 0.78rem; }
.op-migration-steps p { margin: 5px 0 0; color: #778285; font-size: 0.68rem; line-height: 1.55; }
.op-migration-steps small { color: #667174; font-size: 0.56rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }

.op-migration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 15px; }
.op-migration-scope { padding: clamp(24px, 3vw, 34px); }
.op-migration-scope--included { border-color: rgba(55, 230, 138, 0.16); background: linear-gradient(145deg, rgba(55, 230, 138, 0.055), rgba(7, 10, 11, 0.97) 48%); }
.op-migration-scope .op-section-kicker { color: var(--op-amber); }
.op-migration-scope--included .op-section-kicker { color: var(--op-green); }
.op-migration-scope ul { display: grid; gap: 11px; margin: 24px 0 0; padding: 21px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.065); list-style: none; }
.op-migration-scope li { display: flex; align-items: flex-start; gap: 10px; color: #929d9f; font-size: 0.7rem; line-height: 1.45; }
.op-migration-scope li span { display: grid; flex: 0 0 auto; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgba(255, 191, 91, 0.08); color: var(--op-amber); font-size: 0.52rem; font-weight: 900; }
.op-migration-scope--included li span { background: rgba(55, 230, 138, 0.09); color: var(--op-green); }

.op-migration-faq { margin-top: 15px; }
.op-migration-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 17px; background: rgba(255, 255, 255, 0.06); }
.op-migration-faq article { padding: 23px; background: #090d0f; }
.op-migration-faq h3 { margin: 0 0 8px; color: #e9eff0; font-size: 0.8rem; }
.op-migration-faq p { margin: 0; color: #778285; font-size: 0.68rem; line-height: 1.6; }

.op-migration-final { margin-top: 15px; padding: clamp(32px, 5vw, 55px); overflow: hidden; background: radial-gradient(circle at 50% 110%, rgba(0, 242, 255, 0.11), transparent 25rem), linear-gradient(145deg, rgba(15, 21, 23, 0.94), rgba(6, 9, 10, 0.98)); text-align: center; }
.op-migration-final p { max-width: 670px; margin: 15px auto 0; color: #818c8e; font-size: 0.76rem; line-height: 1.65; }
.op-migration-final > small { display: block; margin-top: 20px; color: #647073; font-size: 0.6rem; }

@media (max-width: 720px) {
  .op-migration-shell { width: min(100% - 28px, 1180px); padding-top: 112px; }
  .op-migration-back { margin-bottom: 30px; }
  .op-migration-hero { margin-bottom: 50px; }
  .op-migration-hero-actions { align-items: stretch; flex-direction: column; }
  .op-migration-hero-actions .op-button { width: 100%; }
  .op-migration-steps li { grid-template-columns: 34px minmax(0, 1fr); align-items: flex-start; }
  .op-migration-steps small { grid-column: 2; }
  .op-migration-grid,
  .op-migration-faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .op-migration-hero h1 { font-size: 2.45rem; }
  .op-migration-safety { align-items: flex-start; }
}

/* Keep the migration guide at the same comfortable reading scale as the
   dashboard and the other client resource pages. */
.op-migration-back a { font-size: .9rem; }
.op-migration-safety p { font-size: 1rem; line-height: 1.65; }
.op-migration-steps strong { font-size: 1.05rem; }
.op-migration-steps p { font-size: .96rem; line-height: 1.65; }
.op-migration-steps small { font-size: .84rem; line-height: 1.5; }
.op-migration-scope li { font-size: .96rem; line-height: 1.6; }
.op-migration-faq h3 { font-size: 1.15rem; }
.op-migration-faq p { font-size: 1rem; line-height: 1.7; }
.op-migration-final p { font-size: 1rem; line-height: 1.7; }
.op-migration-final > small { font-size: .9rem; line-height: 1.55; }