/* ===== Migration page (migration.html only, loaded after main.css) ===== */
.aside { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; position: relative; background: #121a22; border: 1px solid #1d2731; border-left: 3px solid var(--copper); border-radius: 14px; padding: 22px 26px }
.aside .chk { font-size: 18px; line-height: 1.5 }
.aside p { font-size: 17px; color: #cbd5dd }
.aside b { font-family: var(--display); color: #fff }
.live-line { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--green) }

.light .strip { margin-top: 0; padding-top: 0; border-top: 0 }
.light .stat .n { color: var(--ink) }
.light .stat .l { color: #4a5560 }
.example-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: end }
.example-head .lead { margin-bottom: 0 }
.facts { display: grid; grid-template-columns: repeat(2,auto); gap: 24px 40px }

/* Alternatives: one card per source system */
#alternatives { border-top: 1px solid #1d2731 }
.alts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px }
.alt-card { display: flex; flex-direction: column; background: #121a22; border: 1px solid #1d2731; border-radius: 14px; padding: 26px 30px; transition: .25s }
.alt-card:hover { border-color: var(--copper) }
/* Vertical flow: source -> arrow down -> primary target, alternatives below */
.flow { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px }
.flow .src { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -1px; color: #fff }
.flow .arr { position: relative; width: 12px; height: 34px; margin: 10px 0 }
.flow .arr:before { content: ""; position: absolute; top: 0; bottom: 7px; left: 5px; width: 2px; background: var(--copper) }
.flow .arr:after { content: ""; position: absolute; bottom: 0; left: 1px; border-top: 8px solid var(--copper); border-left: 5px solid transparent; border-right: 5px solid transparent }
.flow .target { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: #fff; background: rgba(184,115,51,.12); border: 1px solid var(--copper); border-radius: 10px; padding: 10px 26px }
.flow .olbl { margin-top: 20px }
.flow .chips { justify-content: center }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.alt-card .olbl { font-family: var(--mono); font-size: 12px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; color: #6b7a86; margin-bottom: 7px }
.alt-card p { text-align: center; font-size: 15px; color: #9fb0bd; margin-top: auto; padding-top: 14px; border-top: 1px solid #1d2731 }
.chip { font-size: 12.5px; line-height: 20px; color: #cbd5dd; border: 1px solid var(--steel); border-radius: 999px; padding: 3px 10px }
.benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 22px; font-size: 15px; color: #9fb0bd; text-align: center }
.benefits b { font-family: var(--display); color: #fff }
.footnote { margin-top: 12px; font-size: 14px; color: #6b7a86; text-align: center }

/* Downloads: compact strip with one row per PDF */
section.block.downloads { padding: 56px 0 }
.dl-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px }
.dl-item { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: #121a22; border: 1px solid #1d2731; border-radius: 14px; padding: 24px 26px; transition: .25s }
.dl-item:hover { border-color: var(--copper) }
.dl-item .k { font-family: var(--mono); font-size: 12px; color: var(--copper-bright); margin-bottom: 8px }
.dl-item h3 { font-family: var(--display); font-size: 19px; font-weight: 600; color: #fff; margin-bottom: 4px }
.dl-item p { font-size: 14px; color: #9fb0bd }
.dl-item .btn-ghost { white-space: nowrap }

/* Full-page sections (desktop only): each block fills the viewport below the nav */
@media (min-width: 981px) and (min-height: 640px) {
  section.fullpage, header.fullpage { min-height: calc(100vh - 80px); display: flex; align-items: center; padding: 36px 0 }
  .fullpage > .wrap { width: 100% }
}
/* Alternating timeline: odd items above the line, even items below.
   Each box extends into the neighbouring column, which is free on that side. */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(6,1fr); margin-top: 36px }
.timeline li { position: relative; display: grid; grid-template-rows: 1fr 12px 1fr }
.timeline li:after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--copper); transform: translateY(-1px) }
.timeline li:before { content: ""; position: absolute; z-index: 1; left: -5px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 4px var(--mist); transform: translateY(-50%) }
.timeline li.now:after { border-top-style: dashed }
.timeline li.now:before { background: var(--green) }
.timeline .box { position: relative; width: calc(190% - 24px) }
.timeline .box:before { content: ""; position: absolute; left: 0; width: 2px; height: 30px; background: rgba(184,115,51,.35) }
.timeline li:nth-child(odd) .box { grid-row: 1; align-self: end; padding-bottom: 40px }
.timeline li:nth-child(odd) .box:before { bottom: 0 }
.timeline li:nth-child(even) .box { grid-row: 3; align-self: start; padding-top: 40px }
.timeline li:nth-child(even) .box:before { top: 0 }
.timeline li:last-child .box { width: 100% }
.timeline .when { font-family: var(--mono); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--copper) }
.timeline h3 { font-family: var(--display); font-size: 18px; font-weight: 600; margin: 6px 0; hyphens: manual }
.timeline p { font-size: 14px; color: #4a5560 }

/* ===== Responsive ===== */
@media(max-width:980px) {
  .timeline { display: block; border-left: 2px solid var(--copper); padding-left: 26px }
  .timeline li { display: block; padding-bottom: 24px }
  .timeline li:after { display: none }
  .timeline li:before { left: -33px; top: 5px; transform: none }
  .timeline li:nth-child(n) .box { width: auto; padding: 0 }
  .timeline .box:before { display: none }
}

@media(max-width:820px) {
  .example-head { grid-template-columns: 1fr; gap: 30px }
  .alts { grid-template-columns: 1fr }
  .benefits { grid-template-columns: 1fr; gap: 10px }
  .dl-list { grid-template-columns: 1fr }
  .dl-item { flex-direction: column; align-items: flex-start }
}