/* RALPH shared editorial scene layout (desktop + classic mobile).
   Each scene remains the same full viewport-sized, native scroll-snap
   destination. The transparent inner frame controls content width,
   safe vertical centring, and responsive reflow in one place.

   Do not use transform-based positioning or fixed inner heights:
   tall content must remain independently scrollable, and dialogs
   continue to use the browser top layer. */
:root {
  --ralph-section-content-width: 1200px;
  --ralph-section-gutter: clamp(20px, 4vw, 64px);
  --ralph-section-padding-block: clamp(20px, 3vh, 42px);
  --ralph-section-column-gap: clamp(24px, 3vw, 48px);
}

html body main.page .ralph-section-frame {
  box-sizing:border-box;
  min-width:0;
  width:min(100%,var(--ralph-section-content-width));
  max-width:var(--ralph-section-content-width);
  margin-inline:auto;
  background:transparent;
}

/* One shared viewport and centring contract. A tall frame naturally
   starts at the top thanks to safe centring, not in clipped negative space. */
@media (min-width:901px) {
  html body main.page > :is(
    #dashboard.dashboard-feature.surface,
    #capacity-management.capacity-feature.surface,
    #practices.section.mission.surface,
    #roadmap.roadmap.surface
  ) {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:safe center!important;
    align-items:initial!important;
    justify-items:center!important;
    justify-content:center!important;
    gap:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:var(--ralph-section-padding-block) var(--ralph-section-gutter)!important;
    overflow-x:clip!important;
    overflow-y:auto!important;
  }

  html body main.page > #dashboard.dashboard-feature.surface .ralph-section-frame--dashboard {
    display:grid!important;
    grid-template-columns:minmax(0,.83fr) minmax(0,1.37fr)!important;
    align-items:center!important;
    gap:var(--ralph-section-column-gap)!important;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-copy {
    justify-self:stretch!important;
    align-self:center!important;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-visual {
    justify-self:center!important;
    width:100%!important;
    max-width:760px!important;
    margin:0!important;
  }

  html body main.page > #capacity-management .ralph-section-frame--capacity {
    display:block!important;
  }
  html body main.page > #capacity-management .capacity-feature-content {
    width:min(100%,1140px)!important;
    max-width:1140px!important;
    margin-inline:auto!important;
  }

  html body main.page > #practices.section.mission.surface .ralph-section-frame--inbox {
    display:grid!important;
    grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;
    align-items:center!important;
    gap:var(--ralph-section-column-gap)!important;
  }
  html body main.page > #practices .ralph-section-frame--inbox .section-copy,
  html body main.page > #practices .ralph-section-frame--inbox .four {
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  html body main.page > #practices .ralph-section-frame--inbox .four {
    align-self:center!important;
    justify-self:center!important;
  }
  html body main.page > #practices .ralph-section-frame--inbox .four > .four-item {
    min-height:clamp(106px,13vh,128px)!important;
  }

  html body main.page > #roadmap.roadmap.surface .ralph-section-frame--roadmap {
    display:block!important;
    max-width:var(--ralph-section-content-width)!important;
  }
  html body main.page > #roadmap.roadmap.surface .ralph-section-frame--roadmap .roadmap-heading,
  html body main.page > #roadmap.roadmap.surface .ralph-section-frame--roadmap .roadmap-layout {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-inline:auto!important;
  }
  html body main.page > #roadmap .ralph-section-frame--roadmap .roadmap-heading {
    margin:0 auto clamp(12px,1.7vh,18px)!important;
  }

  /* Consistent headline scale without forcing the supporting material to
     match unrelated content types. */
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-copy h2,
  html body main.page > #capacity-management .ralph-section-frame--capacity .capacity-feature-header h2,
  html body main.page > #practices .ralph-section-frame--inbox .section-copy h2,
  html body main.page > #roadmap .ralph-section-frame--roadmap .roadmap-heading h2 {
    font-size:clamp(38px,3.8vw,58px)!important;
    line-height:1.09!important;
    letter-spacing:-.048em!important;
  }
  html body main.page > #roadmap .ralph-section-frame--roadmap .roadmap-heading h2 {
    margin:0!important;
  }
  html body main.page > #practices .ralph-section-frame--inbox .section-copy p {
    font-size:clamp(16px,1.18vw,19px)!important;
  }
}

/* On shorter desktop viewports, retain readable content and scroll rather
   than shrink the composition to an inaccessible scale. */
@media (min-width:901px) and (max-height:740px) {
  :root { --ralph-section-padding-block:20px; }
  html body main.page > #capacity-management .ralph-section-frame--capacity .capacity-flip-stage {
    min-height:clamp(315px,42vh,380px)!important;
  }
  html body main.page > #roadmap .ralph-section-frame--roadmap .roadmap-step {
    padding:11px 17px!important;
  }
  html body main.page > #roadmap .ralph-section-frame--roadmap .roadmap-timeline {
    gap:7px!important;
  }
}

/* Between phone routing and wide desktop, the desktop snap page is still
   active. A legacy two-column outer grid otherwise halves the inbox frame. */
@media (min-width:751px) and (max-width:900px) {
  html body main.page > #practices.section.mission.surface {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:safe center!important;
    justify-items:center!important;
  }
  html body main.page > #practices.section.mission.surface .ralph-section-frame--inbox {
    width:min(100%,720px)!important;
    max-width:720px!important;
  }
}

/* The classic mobile route must remain a normal vertically flowing page.
   Inner frames are a width constraint, not fixed-height snap containers. */
@media (max-width:900px) {
  html body main.page > :is(
    #dashboard.dashboard-feature.surface,
    #capacity-management.capacity-feature.surface,
    #practices.section.mission.surface,
    #roadmap.roadmap.surface
  ) .ralph-section-frame {
    box-sizing:border-box!important;
    width:min(100%,760px)!important;
    max-width:760px!important;
    min-width:0!important;
    margin-inline:auto!important;
    height:auto!important;
    min-height:0!important;
    background:transparent!important;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(18px,3vw,28px)!important;
    align-items:start!important;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-visual {
    justify-self:center!important;
    width:100%!important;
    max-width:750px!important;
    margin-inline:auto!important;
  }
  html body main.page > #capacity-management .ralph-section-frame--capacity,
  html body main.page > #roadmap .ralph-section-frame--roadmap {
    display:block!important;
  }
  html body main.page > #practices .ralph-section-frame--inbox {
    display:flex!important;
    flex-direction:column!important;
    gap:clamp(18px,3.5vw,28px)!important;
  }
  html body main.page > #practices .ralph-section-frame--inbox > :is(.section-copy,.four) {
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}
@media (max-width:600px) {
  html body main.page > :is(
    #dashboard.dashboard-feature.surface,
    #capacity-management.capacity-feature.surface,
    #practices.section.mission.surface,
    #roadmap.roadmap.surface
  ) .ralph-section-frame {
    width:100%!important;
    max-width:100%!important;
  }
}
@media (prefers-reduced-motion:no-preference) {
  .ralph-fullpage-scene > .ralph-section-frame {
    transition:opacity .7s ease,transform .85s cubic-bezier(.22,1,.36,1);
  }
  .ralph-fullpage-scene:not(.ralph-scene-active) > .ralph-section-frame {
    opacity:.74;
    transform:translateY(16px);
  }
  .ralph-fullpage-scene.ralph-scene-active > .ralph-section-frame {
    opacity:1;
    transform:none;
  }
}
@media (prefers-reduced-motion:reduce) {
  .ralph-fullpage-scene > .ralph-section-frame {
    transition:none!important;
    transform:none!important;
  }
}
@media (forced-colors:active) {
  html body main.page .ralph-section-frame {background:transparent!important;}
}