/* Balanced immersive scenes (2026-10-18).
   The roadmap is deliberately broader and more compact, while the registration
   panel makes fuller use of available height. Keep content readable on small
   laptops rather than clipping it to satisfy viewport snapping. */

/* ROADMAP: preserve chronological 0-4 timeline; return the continuous
   improvement workstream to its independent narrow right column. */
html body main.page > #roadmap.roadmap.surface {
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:safe center!important;
  align-items:stretch!important;
  padding:clamp(15px,2.5vh,28px) clamp(18px,3vw,48px)!important;
  overflow-y:auto!important;
}
html body main.page > #roadmap .roadmap-heading {
  box-sizing:border-box!important;
  width:min(1360px,100%)!important;
  max-width:1360px!important;
  margin:0 auto clamp(10px,1.9vh,20px)!important;
  text-align:left!important;
  flex:0 0 auto!important;
}
html body main.page > #roadmap .roadmap-heading h2 {
  font-size:clamp(36px,3.3vw,51px)!important;
  line-height:1.07!important;
  margin:0 0 7px!important;
}
html body main.page > #roadmap .roadmap-intro {
  font-size:clamp(14px,1vw,16px)!important;
  line-height:1.4!important;
}
html body main.page > #roadmap .roadmap-layout {
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(185px,15vw,205px)!important;
  gap:clamp(16px,2.2vw,32px)!important;
  align-items:stretch!important;
  width:min(1360px,100%)!important;
  max-width:1360px!important;
  margin:0 auto!important;
}
html body main.page > #roadmap .roadmap-timeline {
  box-sizing:border-box!important;
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:clamp(6px,.85vh,10px)!important;
  padding:0!important;
  margin:0!important;
  width:100%!important;
  max-width:none!important;
  list-style:none!important;
}
html body main.page > #roadmap .roadmap-timeline::before {
  display:block!important;
  position:absolute!important;
  left:18px!important;
  top:18px!important;
  bottom:18px!important;
  width:2px!important;
  background:linear-gradient(#9abfdf,#d1e2f4)!important;
}
html body main.page > #roadmap .roadmap-step {
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  min-width:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body main.page > #roadmap .roadmap-symbol {
  box-sizing:border-box!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  align-self:center!important;
  z-index:1!important;
}
html body main.page > #roadmap .roadmap-icon {
  width:21px!important;
  height:21px!important;
}
html body main.page > #roadmap .roadmap-step-body {
  box-sizing:border-box!important;
  display:block!important;
  min-width:0!important;
  padding:clamp(9px,1.2vh,13px) clamp(13px,1.4vw,20px)!important;
  border:1px solid #dce6f0!important;
  border-radius:12px!important;
  background:#fafcff!important;
}
html body main.page > #roadmap .roadmap-step--current .roadmap-step-body {
  background:#eaf4ff!important;
  border-color:#a8ccef!important;
}
html body main.page > #roadmap .roadmap-step-heading {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  column-gap:10px!important;
  row-gap:4px!important;
  margin:0 0 4px!important;
}
html body main.page > #roadmap .roadmap-step-title {
  font-size:clamp(15px,1.08vw,18px)!important;
  line-height:1.18!important;
  letter-spacing:-.02em!important;
}
html body main.page > #roadmap .roadmap-phase {
  font-size:10px!important;
  letter-spacing:.045em!important;
  margin-right:9px!important;
}
html body main.page > #roadmap .roadmap-state {
  font-size:10px!important;
  padding:4px 9px!important;
  line-height:1.12!important;
}
html body main.page > #roadmap .roadmap-phase-list {
  box-sizing:border-box!important;
  display:block!important;
  margin:3px 0 0!important;
  padding-left:1.2em!important;
  font-size:clamp(12px,.96vw,14px)!important;
  line-height:1.35!important;
}
html body main.page > #roadmap .roadmap-phase-list li {
  overflow-wrap:break-word;
  padding-left:.1em!important;
}
html body main.page > #roadmap .roadmap-phase-list li+li {
  margin-top:3px!important;
}
html body main.page > #roadmap .roadmap-continuous {
  align-self:stretch!important;
  min-width:0!important;
  width:100%!important;
  border:1px solid #c7ddf2!important;
  border-radius:18px!important;
  background:linear-gradient(175deg,#e7f1ff,#f5faff 55%,#ecf6ff)!important;
}
html body main.page > #roadmap .roadmap-continuous-inner {
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(12px,2vh,22px)!important;
  padding:clamp(18px,2.8vw,32px) clamp(13px,1.6vw,23px)!important;
  text-align:center!important;
}
html body main.page > #roadmap .roadmap-continuous-top {
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:13px!important;
}
html body main.page > #roadmap .roadmap-continuous-symbol {
  width:62px!important;
  height:62px!important;
  border-radius:19px!important;
}
html body main.page > #roadmap .roadmap-continuous-symbol .roadmap-loop {
  width:42px!important;
  height:42px!important;
}
html body main.page > #roadmap .roadmap-continuous h3 {
  font-size:clamp(15px,1.08vw,18px)!important;
  line-height:1.22!important;
  text-align:center!important;
}
html body main.page > #roadmap .roadmap-continuous p {
  flex:auto!important;
  max-width:100%!important;
  font-size:clamp(13px,.98vw,14px)!important;
  line-height:1.55!important;
  text-align:center!important;
}

/* FINAL REGISTRATION: the opposite treatment. Let the form/card breathe
   vertically, without an extra registration button or a new overlay. */
@media (min-width:901px) and (min-height:741px) {
  html body main.page > #contact .ralph-register-layout {
    min-height:min(69dvh,660px)!important;
    align-items:stretch!important;
    gap:clamp(42px,5vw,82px)!important;
  }
  html body main.page > #contact .ralph-register-message {
    align-self:center!important;
  }
  html body main.page > #contact .ralph-register-panel {
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:clamp(25px,3vw,40px)!important;
  }
  html body main.page > #contact #interest-form {
    row-gap:clamp(13px,1.8vh,21px)!important;
  }
  html body main.page > #contact #interest-form .field :is(input,select) {
    min-height:44px!important;
  }
}
@media(max-height:740px) and (min-width:901px) {
  html body main.page > #contact .ralph-register-layout {min-height:0!important}
  html body main.page > #contact .ralph-register-panel {padding:clamp(15px,2vh,24px)!important}
  html body main.page > #contact #interest-form {row-gap:clamp(8px,1vh,12px)!important}
  html body main.page > #roadmap.roadmap.surface {padding-block:clamp(10px,1.7vh,18px)!important}
  html body main.page > #roadmap .roadmap-heading {margin-bottom:clamp(7px,1.3vh,13px)!important}
  html body main.page > #roadmap .roadmap-step-body {padding-block:clamp(7px,.85vh,10px)!important}
  html body main.page > #roadmap .roadmap-phase-list {font-size:12px!important;line-height:1.25!important}
  html body main.page > #roadmap .roadmap-phase-list li+li {margin-top:2px!important}
}

/* Once the columns cannot breathe, stack naturally and retain the internal
   scroll area. Small screens still get a readable chronological roadmap. */
@media(max-width:900px) {
  html body main.page > #roadmap.roadmap.surface {
    justify-content:safe flex-start!important;
    padding:clamp(20px,3vh,33px) clamp(15px,3vw,26px)!important;
  }
  html body main.page > #roadmap .roadmap-layout {
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    max-width:680px!important;
  }
  html body main.page > #roadmap .roadmap-heading {
    max-width:680px!important;
    margin-bottom:16px!important;
  }
  html body main.page > #roadmap .roadmap-continuous-inner {
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:12px 18px!important;
  }
  html body main.page > #roadmap .roadmap-continuous-top {
    flex-direction:row!important;
    gap:13px!important;
  }
  html body main.page > #roadmap .roadmap-continuous-inner > p {
    flex:1 1 240px!important;
    max-width:44ch!important;
    text-align:left!important;
  }
}
@media(max-width:520px) {
  html body main.page > #roadmap .roadmap-heading h2 {font-size:clamp(32px,9vw,40px)!important}
  html body main.page > #roadmap .roadmap-step {grid-template-columns:33px minmax(0,1fr)!important;gap:8px!important}
  html body main.page > #roadmap .roadmap-symbol {width:33px!important;height:33px!important}
  html body main.page > #roadmap .roadmap-timeline::before {left:16px!important}
  html body main.page > #roadmap .roadmap-step-heading {align-items:flex-start!important}
  html body main.page > #roadmap .roadmap-state {font-size:10px!important}
  html body main.page > #roadmap .roadmap-phase-list {line-height:1.42!important}
  html body main.page > #roadmap .roadmap-continuous-inner {flex-direction:column!important}
  html body main.page > #roadmap .roadmap-continuous-inner > p {text-align:center!important;flex:1 1 auto!important}
}

/* Only desktop has a narrow sidebar. Let the same copy reflow naturally
   when the sidebar stacks below the milestones on mobile/tablet. */
@media(max-width:900px) {
  html body main.page > #roadmap .roadmap-desktop-break {display:none!important}
}