/* V0.8.6 — keep the strong dark contrast of the original migration page,
   but rebalance the visual weight toward the page center. */

/* Hero: one warm stage, with a smaller dark proof card inset on the right. */
.migration-v08-hero{padding:34px 0 54px;background:#fff}
.migration-v08-stage{
  grid-template-columns:minmax(0,1.42fr) minmax(330px,.58fr);
  gap:0;
  background:#f7f3ed;
  border:1px solid #e9e5df;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 65px rgba(29,29,38,.08)
}
.migration-v08-main{
  background:transparent;
  padding:58px 54px 56px 58px;
  min-height:390px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.migration-v08-main:after{
  width:330px;height:330px;right:-215px;bottom:-235px;
  background:#e9e4ff;opacity:.72
}
.migration-v08-main h1{font-size:clamp(48px,5vw,72px);margin-bottom:20px}
.migration-v08-statement{max-width:720px;font-size:23px;margin-bottom:15px}
.migration-v08-main>p{max-width:720px}
.migration-v08-note{max-width:700px;margin-top:25px}

.migration-v08-gains{
  align-self:stretch;
  margin:24px 24px 24px 0;
  min-height:342px;
  border-radius:22px;
  background:#171923;
  padding:38px 34px;
  justify-content:center;
  box-shadow:0 18px 44px rgba(23,25,35,.16)
}
.migration-v08-gains:before{width:260px;height:260px;right:-135px;top:-135px;opacity:.9}
.migration-v08-gains h2{font-size:23px;margin-bottom:16px}
.migration-v08-gain{grid-template-columns:30px 1fr;gap:10px;padding:15px 0}
.migration-v08-gain strong{font-size:13px}
.migration-v08-gain span{font-size:11px;line-height:1.58}

/* Rule row: keep rhythm even. Do not stack another heavy dark block on the right. */
.migration-v08-rulegrid{border-color:#dfe2e8}
.migration-v08-rule{position:relative;background:#fff;min-height:144px}
.migration-v08-rule.direct{
  background:#f5f3ff;
  box-shadow:inset 0 3px 0 #6b5ce7
}
.migration-v08-rule.direct span{color:#6b647f}
.migration-v08-rule.direct strong{color:#2b2752;font-size:25px}

/* Calculator: plans first, then a full-width dark result band so the second visual
   center sits on the page axis instead of the right edge. */
.migration-v08-work{grid-template-columns:1fr;gap:18px;align-items:stretch}
.migration-v08-plans{padding:28px 30px}
.migration-v08-plans .plan-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.migration-v08-result{
  min-height:0;
  border-radius:19px;
  padding:28px 31px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(285px,.6fr);
  gap:34px;
  align-items:center;
  background:#171923;
  box-shadow:0 18px 48px rgba(23,25,35,.14)
}
.migration-v08-result:before{width:300px;height:300px;right:-95px;top:-155px;opacity:.75}
.migration-v08-result-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.migration-v08-result-copy{min-width:0}
.migration-v08-result .label{margin-bottom:8px}
.migration-v08-result .result-note{margin-top:0;max-width:560px;min-height:0}
.migration-v08-result .result-price{font-size:58px;margin:0;white-space:nowrap;text-align:right}
.migration-v08-result-action{border-left:1px solid rgba(255,255,255,.13);padding-left:30px}
.migration-v08-result .btn{margin-top:0}
.migration-v08-result .special{margin-top:10px}

@media(max-width:1050px){
  .migration-v08-stage{grid-template-columns:1fr}
  .migration-v08-main{min-height:0;padding:46px 42px 38px}
  .migration-v08-gains{margin:0 28px 28px;min-height:0}
  .migration-v08-plans .plan-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .migration-v08-result{grid-template-columns:1fr}
  .migration-v08-result-action{border-left:0;border-top:1px solid rgba(255,255,255,.13);padding:22px 0 0}
}
@media(max-width:680px){
  .migration-v08-main{padding:34px 23px 30px}
  .migration-v08-gains{margin:0 16px 16px;padding:30px 23px}
  .migration-v08-plans .plan-list{grid-template-columns:1fr}
  .migration-v08-result-summary{grid-template-columns:1fr;gap:18px}
  .migration-v08-result .result-price{text-align:left;font-size:50px}
}