/* Sections use one available viewport as a minimum and remain free to grow with content. */
html {
  scroll-padding-top: 0;
}

#main {
  --viewport-height: 100vh;
  --viewport-height: 100svh;
  --header-measured-height: var(--header-fallback-height);
  --section-available-height: max(0px,calc(var(--viewport-height) - var(--header-measured-height)));
  --section-frame-padding-block: clamp(32px,calc(var(--viewport-height) * .05),72px);
  --section-frame-gap: clamp(32px,calc(var(--viewport-height) * .05),56px);
}

#main .hero-dark .hero-layout {
  min-height: max(0px,calc(var(--section-available-height) - var(--hero-padding-block) * 2 - var(--hero-wave-clearance,0px)));
}

#main .hero-dark.title-hero .hero-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: 1fr auto;
  align-items: stretch;
  gap: var(--section-frame-gap);
}

.title-hero .hero-copy {
  display: grid;
  place-items: center;
}

.title-hero .hero-link {
  min-height: 48px;
  justify-content: center;
}

#main .handoff-surface {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--section-frame-gap);
  padding-block: var(--section-frame-padding-block);
  scroll-margin-top: var(--header-measured-height);
}

#main .handoff-surface>.section {
  padding-block: 0;
  border: 0;
}

#main .sharing-experience {
  flex: none;
  min-height: 0;
  padding-block: 0;
  scroll-margin-top: calc(var(--header-measured-height) + 24px);
}

#main .sharing-diagram {
  padding-top: 0;
}

#main .access-statement {
  flex: none;
  padding-block: 0;
}

#main,
#main>.section {
  scroll-margin-top: var(--header-measured-height);
}

@media (min-width:801px) {
  #main>.section {
    display: flex;
    align-items: center;
    min-height: var(--section-available-height);
    padding-block: var(--section-frame-padding-block);
  }

  #main>.section>.wrap {
    flex: none;
  }

  #main .handoff-surface {
    min-height: var(--section-available-height);
  }

  #main .usecase-heading {
    margin-bottom: clamp(28px,calc(var(--viewport-height) * .045),56px);
  }
}

@media (min-width:801px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  #main .hero-handoff .handoff-surface {
    min-height: max(calc(var(--section-available-height) + 64px),var(--handoff-surface-min,0px));
    padding-bottom: calc(var(--section-frame-padding-block) + 64px);
  }
}

@media (max-width:800px) {
  #main {
    --section-frame-padding-block: 48px;
    --section-frame-gap: 36px;
  }

  #main>.section {
    padding-block: var(--section-frame-padding-block);
  }

  #main .handoff-surface {
    min-height: 0;
  }
}

@media print {
  .hero.hero-dark.title-hero {
    background: var(--color-white);
    color: var(--color-text);
  }

  .title-hero .hero-background,
  .title-hero:before {
    display: none;
  }

  .hero-dark.title-hero .hero-copy h1,
  .hero-dark.title-hero .hero-link,
  .hero-dark.title-hero .hero-link span {
    color: var(--color-text);
  }

  #main>.section,
  #main .hero-handoff .handoff-surface {
    display: block;
    min-height: 0;
    padding-block: 40px;
  }

  #main .access-statement {
    margin-top: 32px;
  }

  #main .hero-dark .hero-layout {
    min-height: 0;
  }
}