/* Sticky service rail: "On this page" plus the other services in the same
   category hub, beside the content bands of a service page. Markup:
   <div class="rail-layout"><aside class="service-rail">…</aside><div class="rail-main">…bands…</div></div>
   The aside comes first in the source so narrow screens show it under the hero. */

.rail-layout { width: min(1180px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 56px; align-items: start; }
.rail-main { grid-column: 1; grid-row: 1; min-width: 0; }
.service-rail { grid-column: 2; grid-row: 1; position: sticky; top: 105px; max-height: calc(100vh - 125px); overflow-y: auto; margin-top: 72px; }

.service-rail nav { padding: 20px 0; border-top: 1px solid #cad2dc; }
.service-rail nav:last-child { border-bottom: 1px solid #cad2dc; }
.service-rail strong { display: block; margin-bottom: 10px; color: var(--ink, #0b1220); font: 700 11px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .1em; text-transform: uppercase; }
.service-rail a { display: block; padding: 7px 0; color: var(--slate, #475569); font-size: 13px; line-height: 1.45; text-decoration: none; }
.service-rail a:hover { color: var(--blue, #356ae6); }
.service-rail .rail-hub { margin-top: 4px; color: var(--blue, #356ae6); font-weight: 700; }

/* Bands now sit in a column, not the full viewport. */
.rail-main .service-shell { width: 100%; }
.rail-main > .service-section { padding: 72px 0; }
.rail-main > .service-proof { padding: 0 0 72px; }
.rail-main > .service-process,
.rail-main > .service-scope-section,
.rail-main > .service-faq,
.rail-main > .service-migration-types,
.rail-main > .service-pricing,
.rail-main > .service-platforms,
.rail-main > .service-packages { padding: 60px 40px; border: 1px solid var(--mist, #dde3ea); }
.rail-main > .service-process { border-color: var(--ink, #0b1220); }
.rail-main > .service-section + .service-section { margin-top: 24px; }
.rail-main > .related-services { padding-top: 40px; }

.rail-main .service-scope-grid { gap: 44px; }
.rail-main .process-track { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
.rail-main .faq-grid { grid-template-columns: 1fr; gap: 34px; }
.rail-main .pricing-grid { grid-template-columns: 1fr 1fr; }
.rail-main .fit-list article { grid-template-columns: 52px minmax(200px, .8fr) minmax(0, 1.2fr); gap: 26px; }
.rail-main .deliverable-list article:first-child { transform: none; }

/* Older templates (main.css / editorial.css): keep a small inset so
   section backgrounds read as panels inside the column. */
.rail-main .container, .rail-main .shell { width: calc(100% - 48px); max-width: none; margin-inline: auto; padding: 0; }

@media (max-width: 1100px) {
  .rail-layout { display: block; }
  .service-rail { position: static; max-height: none; overflow: visible; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .service-rail nav:last-child { border-bottom: 0; }
  .service-rail nav { border-bottom: 1px solid #cad2dc; }
}

@media (max-width: 640px) {
  .service-rail { grid-template-columns: 1fr; }
  .rail-main > .service-process,
  .rail-main > .service-scope-section,
  .rail-main > .service-faq,
  .rail-main > .service-migration-types,
  .rail-main > .service-pricing,
  .rail-main > .service-platforms,
  .rail-main > .service-packages { padding: 48px 20px; }
  .rail-main .process-track, .rail-main .pricing-grid { grid-template-columns: 1fr; }
  .rail-main .fit-list article { grid-template-columns: 1fr; gap: 10px; }
}