/* Desktop and tablet refinements (November 2026). Loaded last on the main page only; the phone page
   has its own equivalents in mobile-refresh.css. Selectors repeat the long legacy prefixes so they win
   over the layered rules above without editing each of them. */

/* Animation controls sit centred under the drawing instead of hugging the right edge. */
html body main.page .ralph-illustration .ralph-story-player,
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-slot .ralph-story-player,
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot .ralph-story-player,
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-slot .ralph-story-player,
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-slot .ralph-story-player,
html body main.page > #room-manager .ralph-room-slot .ralph-story-player {
  left: 50% !important;
  right: auto !important;
  translate: -50% 0 !important;
  justify-content: center !important;
}

/* "Register your interest" in the hero: a little smaller and softer, no dark outline. */
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard .cta-group :is(a.pill, .pill) {
  min-height: 44px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  border: 0 !important;
  background: linear-gradient(100deg, rgb(22 59 101), rgb(49 125 197)) !important;
  box-shadow: 0 6px 18px rgb(23 61 120 / 0.16) !important;
}

/* Hero line (replaces the second, chunky RALPH wordmark; the brand stays in the header). */
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .ralph-ending-wordmark {
  font-size: clamp(34px, 4.6vw, 62px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: #173a65 !important;
  -webkit-text-fill-color: #173a65 !important;
  text-align: center !important;
  text-wrap: balance;
}
/* The three icons sit lower, roughly midway between the hero line and the drawing. */
html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust {
  translate: 0 clamp(16px, 3.2vw, 46px);
}

/* WHO / WHAT / WHEN / WHERE: icon, heading and text centred in each quadrant. */
html body main.page #practices .four > .four-item {
  align-items: center !important;
  text-align: center !important;
}
html body main.page #practices .four > .four-item > div,
html body main.page #practices .four > .four-item :is(strong, small) {
  width: 100% !important;
  text-align: center !important;
}
html body main.page #practices .four > .four-item strong {
  padding-left: .16em !important; /* offsets the letter-spacing after the last letter */
}

/* "Capacity / made easy": two even lines. */
#capacity-management-heading { text-wrap: balance; }

/* Hero, desktop: "Register your interest" sits just above the animation, under the three icons
   (it flows in the hero column instead of floating over the drawing). */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    order: 2 !important;
    margin: clamp(14px, 2.4vh, 30px) 0 0 !important;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .trust {
    translate: none;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .cta-group .pill {
    min-height: 44px !important;
    padding-block: 0 !important;
  }
  /* In short windows the drawing drops a little so the button never covers its speech bubbles. */
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot {
    translate: 0 clamp(0px, calc((780px - 100dvh) * 0.9), 40px);
  }
}

/* Third animation (clinician at the desk): the controls sat on the chair wheels, so drop them below the floor line. */
html body main.page .ralph-illustration-scene--clinician .ralph-illustration .ralph-story-player {
  bottom: 0 !important;
  transform: translateY(14px) !important;
}

/* Hero, desktop: use the window. The drawing and its headline grow with the available height (the old 1040px
   cap left large bands of empty space above and below on tall windows). */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition {
    width: min(100%, 1400px, calc((100dvh - var(--ralph-nav-height, 76px) - 96px) * 1.42));
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot {
    translate: none; /* the drawing now scales with the window, so it no longer needs to drop in short ones */
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .ralph-ending-wordmark {
    font-size: clamp(34px, 4.6vw, 84px) !important;
  }
}

/* One stretch for every desktop scene (the room-finding animation's balance): content is centred, up to 1360px
   wide, with the same side margins, and the animations share one height rule so none of them sits low or crowds
   the window edge. */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  :root { --ralph-section-content-width: 1360px; }

  /* 3rd animation: same size rule as the room animation, and truly centred in its scene. */
  html body main.page > .ralph-illustration-scene--clinician .ralph-clinician-slot {
    width: min(1360px, calc(100vw - 28px), calc((100dvh - var(--ralph-nav-height, 76px) - 175px) * 1.8)) !important;
  }
  html body main.page .ralph-illustration-scene--clinician .ralph-illustration { margin: 0 !important; }

  /* Feature orbit: same 1360px stage and generous margins so the controls and counter are never cropped. */
  html body main.page > #product.ralph-orbit { padding: clamp(14px, 3.2vh, 48px) clamp(14px, 3vw, 56px) !important; }
  html body main.page > #product.ralph-orbit .ro-card { width: 100%; max-width: 1360px; margin-inline: auto; }

  /* Your day at a glance: a bigger screenshot, less padding. */
  html body main.page > #dashboard.dashboard-feature.surface .ralph-section-frame--dashboard {
    grid-template-columns: minmax(0, .52fr) minmax(0, 1.48fr) !important;
    width: min(100%, 1360px) !important;
    max-width: 1360px !important;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-visual {
    width: 100% !important;
    max-width: none !important;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-copy p { max-width: 26ch; }

  /* Capacity, practices, story, roadmap and free tools share the same width. */
  html body main.page > #capacity-management .capacity-feature-content { width: min(100%, 1360px) !important; max-width: 1360px !important; }
  html body main.page > #story .story-shell { width: min(100%, 1360px) !important; max-width: 1360px !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-heading,
  html body main.page > #roadmap.roadmap.surface .roadmap-layout { width: min(100%, 1360px) !important; max-width: 1360px !important; }
}

/* Hero: title and icons a touch higher, more air before the button. */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition { translate: 0 -14px; }

  /* Every section fills the same stage: content scales with the window instead of floating small in the middle. */
  html body main.page > #dashboard.dashboard-feature.surface .ralph-section-frame--dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: center !important;
    gap: clamp(14px, 2.4vh, 28px) !important;
    text-align: center;
  }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-copy { justify-self: center !important; text-align: center; }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-copy h2 { max-width: none !important; margin: 0 0 clamp(6px, 1.2vh, 14px) !important; font-size: clamp(36px, 4.2vw, 64px) !important; }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-copy p { max-width: none !important; margin-inline: auto; font-size: clamp(17px, 1.5vw, 22px); }
  html body main.page > #dashboard .ralph-section-frame--dashboard .dashboard-feature-visual {
    width: min(100%, calc((100dvh - var(--ralph-nav-height, 76px) - 280px) * 1.567)) !important;
  }

  html body main.page > #practices .ralph-section-frame--inbox .section-copy h2 { font-size: clamp(38px, min(4.6vw, 7.4vh), 76px) !important; }
  html body main.page > #practices .ralph-section-frame--inbox .section-copy p { font-size: clamp(16px, min(1.45vw, 2.35vh), 23px) !important; line-height: 1.6 !important; margin-bottom: clamp(12px, 2vh, 26px) !important; }
  html body main.page > #practices .ralph-section-frame--inbox .four > .four-item { min-height: clamp(106px, 23vh, 280px) !important; justify-content: center !important; }
  html body main.page > #practices .ralph-section-frame--inbox .four > .four-item strong { font-size: clamp(14px, 1.5vw, 24px); }
  html body main.page > #practices .ralph-section-frame--inbox .four > .four-item small { font-size: clamp(13px, 1.25vw, 20px); }

  html body main.page > #story .story-narrative h2 { font-size: clamp(34px, min(4.4vw, 6.8vh), 72px) !important; }
  html body main.page > #story .story-narrative p { font-size: clamp(15px, min(1.55vw, 2.45vh), 25px) !important; line-height: 1.6 !important; }
  html body main.page > #story .story-founder p { font-size: clamp(14px, min(1.4vw, 2.2vh), 22px) !important; line-height: 1.6 !important; }
  html body main.page > #story .story-founder { padding: clamp(24px, 3.4vh, 44px) clamp(24px, 2.6vw, 44px) !important; }

}

/* Capacity: header higher and a bigger screenshot, like the other sections. */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > #capacity-management.capacity-feature.surface { padding-block: clamp(10px, 1.8vh, 22px) !important; }
  html body main.page > #capacity-management .capacity-feature-header { margin: 0 auto clamp(8px, 1.4vh, 16px) !important; }
  html body main.page > #capacity-management .ralph-section-frame--capacity .capacity-feature-header h2 {
    font-size: clamp(34px, min(3.8vw, 5.8vh), 58px) !important;
    margin-bottom: clamp(6px, 1vh, 12px) !important;
  }
  html body main.page > #capacity-management .capacity-screen { height: clamp(340px, calc(100dvh - var(--ralph-nav-height, 76px) - 355px), 800px) !important; }
  html body main.page > #capacity-management .capacity-controls { padding-top: clamp(4px, 0.8vh, 10px) !important; }
}

/* Project roadmap: title centred and higher (content starts at the top of the stage). */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > section#roadmap.roadmap.surface.ralph-fullpage-scene { align-content: safe center !important; padding-top: clamp(14px, 2.4vh, 32px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-heading,
  html body main.page > #roadmap.roadmap.surface .roadmap-heading h2,
  html body main.page > #roadmap.roadmap.surface .roadmap-heading .roadmap-intro { text-align: center !important; margin-inline: auto !important; }
}

/* Tall windows: let the roadmap breathe so it fills the stage. */
@media (min-width: 751px) and (min-height: 900px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > section#roadmap.roadmap.surface.ralph-fullpage-scene { padding-bottom: clamp(24px, 5.5vh, 64px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-heading { margin-bottom: clamp(12px, 2.6vh, 32px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-timeline { gap: clamp(8px, 1.4vh, 16px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-layout { gap: clamp(8px, 1.4vh, 16px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-step { padding: clamp(13px, 2.3vh, 26px) clamp(15px, 2vw, 26px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-step-title { font-size: clamp(16px, min(1.5vw, 1.95vh), 23px) !important; }
  html body main.page > #roadmap.roadmap.surface .roadmap-phase-list { font-size: clamp(12px, min(1.1vw, 1.5vh), 16px) !important; }
}

/* Hero, desktop: the headline, icons and button take their own space ABOVE the drawing (normal flow), and the drawing
   is sized from whatever height is left, so the button can never overlap it at any window width or height.
   --hero-title is shared by the headline and the space reserved for it. */
@media (min-width: 751px) and (not ((pointer: coarse) and (max-height: 600px))) {
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] {
    --hero-title: clamp(34px, min(4.6vw, 7vh), 84px);
    --hero-gap: clamp(8px, 1.6vh, 18px);
    /* two title lines + icon row + button + the gaps between them */
    --hero-text-h: calc(var(--hero-title) * 2.3 + 20px + 44px + clamp(14px, 2.4vh, 30px) + var(--hero-gap) * 3);
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(100%, 1400px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    translate: none !important;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 0 8px !important;
    gap: var(--hero-gap) !important;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-endcard .ralph-ending-wordmark {
    font-size: var(--hero-title) !important;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception)[data-persistent-overlay] .ralph-reception-composition > .ralph-reception-slot {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    margin: var(--hero-gap) auto 0 !important;
    width: min(100%, calc((100dvh - var(--ralph-nav-height, 76px) - var(--hero-text-h) - 110px) * 1.8)) !important;
  }
}