/* Opt in with data-screen-section: one desktop screen below the fixed header.
   Natural height is retained for zoom, short windows and stacked mobile layouts. */
@media screen and (min-width: 1600px) and (min-height: 850px) {
  html[data-site-page="home"] {
    --screen-nav: var(--nav-bar-height, 88px);
    --screen-space: clamp(20px, 3svh, 44px);
    scroll-padding-top: var(--screen-nav);
  }
  [data-site-view="home"] [data-screen-section] {
    min-height: calc(100svh - var(--screen-nav));
    padding-block: var(--screen-space);
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-margin-top: 0;
  }
  [data-screen-section] > :is(.g--padding-up, .g--padding-down) { display: none; }
  [data-screen-section] > .g--main-padding { width: 100%; }
  /* Frame the existing customer strip above the portrait without resizing either. */
  #begleitung[data-screen-section] {
    scroll-margin-top: var(--customer-strip-height, calc(4rem + 2 * clamp(12px, 2svh, 24px)));
  }
  [data-screen-section] .c--flex-v_desk-72_mob-40 { gap: clamp(20px, 3svh, 40px); }

  /* The opening screen includes its reference strip and floating navigation. */
  [data-site-view="home"] .section-main_hero[data-screen-section] {
    min-height: 100svh;
    padding-block: 0;
    overflow: visible;
  }
  [data-screen-section] .hero-wrapper {
    min-height: 100svh;
    padding-top: calc(var(--screen-nav) + 32px);
    gap: 24px;
  }
  [data-screen-section] .hero-wrapper > .g--main-padding {
    flex: 1;
    display: flex;
    align-items: center;
  }
  [data-screen-section] .hero-wrapper > .g--main-padding > .g--main-container { width: 100%; }
  [data-screen-section] .hero-content > .g--flex-v_40 { gap: clamp(18px, 3svh, 32px); }
  [data-screen-section] .hero-content .g--flex-v_24 { gap: 18px; }
  [data-screen-section] .hero-content h1 {
    font-size: clamp(36px, min(3.5rem, 6.1svh), 112px);
    line-height: 1.06;
  }
  [data-screen-section] .cx-hero-audience-statement { font-size: clamp(16px, 1.2vw, 22px); }
  [data-screen-section] .cx-hero-audience-groups { margin-top: 18px; }
  [data-screen-section] .cx-hero-audience-groups li { grid-template-rows: 42px 6px auto; gap: 8px; }
  [data-screen-section] .cx-hero-audience-groups svg { width: 42px; height: 42px; }
  [data-screen-section] .cx-hero-audience-node { width: 6px; height: 6px; }
  [data-screen-section] .cx-hero-audience-groups::before { top: 53px; }
  [data-screen-section] .section-trusted .trusted-content { padding-block: clamp(12px, 2svh, 24px); }

  /* Portrait height follows the screen rather than its original aspect ratio. */
  [data-screen-section] .cx-positioning-layout { gap: clamp(32px, 4vw, 80px); }
  [data-screen-section] .cx-positioning-photo {
    height: clamp(380px, calc(100svh - var(--screen-nav) - 2 * var(--screen-space) - 2px), 760px);
    aspect-ratio: auto;
  }
  [data-screen-section] .cx-positioning-eyebrow { margin-bottom: 14px; }
  [data-screen-section] .cx-positioning-statements { margin-top: 24px; }
  [data-screen-section] .cx-positioning-statement { padding-block: clamp(12px, 1.8svh, 22px); }
  [data-screen-section] .cx-positioning-statement h3 { margin-bottom: 6px; }
  [data-screen-section] .cx-positioning-statement p { line-height: 1.5; }
  [data-screen-section] :is(.cx-positioning-copy h2, .cost-head h2, .how-head h2) {
    font-size: clamp(28px, min(2.65vw, 4.5svh), 52px);
    line-height: 1.1;
  }

  /* Keep the full comparison visible, in both manually selected states. */
  [data-screen-section] .cost-head { gap: 32px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); }
  [data-screen-section] .cost-head h2 { font-size: clamp(28px, min(2.2vw, 4.1svh), 44px); }
  [data-screen-section] .cost-head .cost-problem { display: block; }
  [data-screen-section] .cost-copy { gap: 8px; font-size: clamp(16px, 1vw, 18px); line-height: 1.4; }
  [data-screen-section] .cost-head > .g--flex-v_24 { gap: 14px; }
  [data-screen-section] .cost-hand { width: min(100%, 25rem); }
  [data-screen-section] .cost-mesh { padding: 12px 24px; }
  [data-screen-section] .cost-toggle { margin-bottom: 8px; padding: 4px; }
  [data-screen-section] .cost-toggle button { min-height: 40px; padding-block: 8px; }
  [data-screen-section] .cost-mesh_svg svg {
    width: 100%;
    height: auto;
    max-height: calc(100svh - var(--screen-nav) - 425px);
  }

  /* Preserve the four nodes, connecting packets and capability bar. */
  [data-screen-section] .how-head { gap: 32px; align-items: center; }
  [data-screen-section] .how-head > p { font-size: clamp(16px, 1.15vw, 22px); line-height: 1.5; }
  [data-screen-section] .how-head + .g--flex-v_48 { gap: 14px; }
  [data-screen-section] .how-perim { padding: clamp(48px, 6svh, 80px) 24px 24px; }
  [data-screen-section] .how-perim > .g--flex-v_32 { gap: 16px; }
  [data-screen-section] .how-node > .g--flex-v_16 { gap: 12px; }
  [data-screen-section] .how-ops { padding: 14px 16px; }
  [data-screen-section] .how-ops .g--flex-v_16 { gap: 12px; }
}

/* Settling duration and easing are controlled by screen-sections.js.
   Native CSS snap can finish abruptly and must not compete with the glide. */