/* Sections adapt to the viewport and can grow to accommodate their content. */
:root {
  --header-size: 80px;
  --screen-gutter: clamp(28px, 6vw, 136px);
  --screen-height: calc(100svh - var(--header-size));
  --footer-height: 160px;
}
html { scroll-padding-top: var(--header-size); }
.site-header {
  position: sticky;
  top: 0;
  background: rgb(248 252 255 / 94%);
  border-bottom: 1px solid rgb(16 55 65 / 8%);
  backdrop-filter: blur(18px);
}
.desktop-nav a { position: relative; padding-block: 10px; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.desktop-nav a[aria-current="location"]::after,
.desktop-nav a:hover::after { transform: scaleX(1); }
.site-header::after {
  content: "";
  position: absolute;
  height: 2px;
  inset: auto 0 -1px;
  background: linear-gradient(90deg, #008b32, #4ab8ad);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}
.screen { position: relative; scroll-margin-top: 0; }
.product-section { margin-top: 0; padding-top: 48px; }
.screen-nav, .scroll-cue { display: none; }

@media (min-width: 1000px) and (min-height: 640px) {
  html.screen-mode { scroll-snap-type: y proximity; }
  .header-inner { width: min(1500px, calc(100% - 100px)); margin: auto; height: 80px; }
  .desktop-nav { font-size: 15px; gap: 24px; }
  .brand { font-size: 33px; }
  .screen {
    min-height: var(--screen-height);
    padding: clamp(32px, 4.8svh, 64px) var(--screen-gutter);
    scroll-snap-align: start;
  }
  main > .screen.container { width: 100%; max-width: none; margin: 0; }
  .screen > .section-heading,
  .screen > .capability-layout,
  .screen > .application-grid { max-width: 1500px; width: 100%; margin-inline: auto; }
  .section-heading h2 { font-size: clamp(30px, 3vw, 48px); line-height: 1.25; }
  .section-heading p { font-size: 17px; line-height: 1.75; max-width: 930px; }
  .section-heading h2::after { width: 48px; height: 3px; margin-top: 18px; }
  .hero.screen { display: grid; align-items: center; padding: 0; isolation: isolate; }
  .hero { background-image: none; overflow: hidden; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #e2f1ff url("assets/hero-sea.webp") center / cover no-repeat;
    transform: scale(1.025);
    transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
  }
  .hero.is-current::before { transform: scale(1); }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(246 251 255 / 50%), transparent 65%);
    pointer-events: none;
  }
  .hero-inner.container { width: min(1440px, calc(100% - 2 * var(--screen-gutter))); padding: 32px 0 100px; }
  .hero .eyebrow { font-size: 18px; }
  .hero .eyebrow::before { height: 19px; top: 5px; }
  .hero h1 { font-size: clamp(54px, 5.1vw, 96px); line-height: 1.22; margin-top: 36px; }
  .hero-description { max-width: 740px; font-size: 20px; margin-top: 32px; }
  .hero-actions { margin-top: 42px; }
  .hero .button, .watch-button { font-size: 18px; }
  .scroll-cue {
    position: absolute;
    bottom: 30px;
    left: max(var(--screen-gutter), calc((100% - 1440px) / 2));
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: #395c69;
  }
  .scroll-cue span { font-size: 22px; animation: scroll-cue 2.4s ease-in-out infinite; }
  .product-section.screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    background: linear-gradient(135deg, #edf4f8, #f8fcff 65%);
  }
  .product-section .section-heading { max-width: min(1440px, calc((100svh - 460px) * 1.987)); }
  .product-section .section-heading h2 { font-size: clamp(28px, 2.5vw, 40px); }
  .product-section .section-heading h2::after { display: none; }
  .product-window {
    width: min(100%, 1440px, calc((100svh - 460px) * 1.987));
    margin-inline: auto;
    padding-bottom: 16px;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgb(25 62 88 / 12%);
  }
  .demo-tabs { padding: 10px 20px; gap: 6px; }
  .demo-tabs button { padding: 10px 20px; font-size: 15px; }
  .playback-controls { padding: 14px 24px 4px; gap: 18px; }
  .product-window figcaption { font-size: 15px; padding-top: 6px; }
  .capabilities.screen { display: flex; flex-direction: column; justify-content: center; background: #fff; }
  .capability-layout { margin-top: 32px; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .capability-visual { aspect-ratio: auto; height: clamp(360px, 58svh, 600px); border-radius: 12px; }
  #capability-image { object-fit: contain; }
  .capability-visual .transition-frame { object-fit: contain; }
  .capability-tabs { gap: 8px; }
  .capability-tabs button { flex: 1; padding: 14px 24px; border: 0; border-radius: 10px; }
  .feature-name { font-size: clamp(21px, 1.7vw, 28px); }
  .feature-description { font-size: 16px; line-height: 1.7; margin-top: 7px; }
  .applications.screen { display: flex; flex-direction: column; justify-content: center; border: 0; background: #edf5f2; }
  .application-grid { margin-top: 28px; gap: 24px; }
  .application-card, .application-card:nth-child(n + 5) {
    grid-column: span 3;
    background: rgb(255 255 255 / 82%);
    border: 1px solid rgb(123 159 148 / 18%);
    border-radius: 12px;
    padding: 12px 12px 18px;
    box-shadow: 0 4px 18px rgb(34 74 64 / 3%);
  }
  .application-card:nth-child(n + 5) { grid-column: span 4; }
  .application-card:last-child { display: block; }
  .application-image > img { height: clamp(128px, 18svh, 184px); aspect-ratio: auto; object-fit: contain; }
  .application-card h3 { font-size: 19px; padding-left: 10px; border-left-width: 3px; margin-top: 14px; }
  .application-card p { margin-left: 13px; font-size: 14px; line-height: 1.6; }
  .application-card .foundation-example { font-size: 12px; margin-top: 8px; }
  .workflow.screen {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-content: center;
    align-items: center;
    gap: clamp(40px, 6vw, 120px);
    border: 0;
    background: radial-gradient(ellipse at 80% 20%, #1c5a59, transparent 65%), #102e35;
    color: #f2faf8;
  }
  .workflow .section-heading h2 { font-size: clamp(40px, 4vw, 64px); }
  .workflow .section-heading p { font-size: 18px; color: #b8d0d0; margin-top: 26px; max-width: 460px; }
  .workflow-list { grid-template-columns: 1fr; gap: 24px; margin: 0; }
  .workflow-list li { padding: 26px 30px; min-height: 138px; gap: 24px; border: 1px solid #80b5b533; border-radius: 14px; background: #ffffff08; }
  .workflow-icon { background: #d9f4ea; }
  .workflow-list h3 { font-size: 25px; }
  .workflow-list p { font-size: 16px; color: #bfd6d7; white-space: normal; }
  .workflow .step-arrow { position: absolute; left: 48px; bottom: -26px; height: 22px; margin: 0; transform: rotate(90deg); filter: brightness(0) invert(1); opacity: .45; }
  .trial-section.screen {
    min-height: calc(var(--screen-height) - var(--footer-height));
    flex-direction: column;
    justify-content: center;
    gap: 38px;
    text-align: center;
    border-radius: 0;
  }
  .trial-section h2 { font-size: clamp(38px, 4vw, 64px); }
  .trial-section p { font-size: 21px; margin-top: 22px; }
  .site-footer.container { width: 100%; min-height: var(--footer-height); padding: 36px var(--screen-gutter); background: #f4f8f8; border-top: 1px solid #dce8e7; }
  .screen-nav { position: fixed; right: 19px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; z-index: 9; }
  .screen-nav a { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-width: 36px; min-height: 36px; border-radius: 20px; }
  .screen-dot { width: 7px; height: 7px; margin: 10px; border-radius: 50%; background: #83a19f; transition: transform .3s, background .3s; }
  .screen-nav a[aria-current="location"] .screen-dot { background: #008b32; transform: scale(1.5); box-shadow: 0 0 0 5px #008b3215; }
  .screen-label { opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .25s, transform .25s; padding: 5px 11px; font-size: 12px; border-radius: 20px; background: #f8fffcf2; color: #27594b; box-shadow: 0 2px 12px #16393412; }
  .screen-nav a[aria-current="location"] .screen-label,
  .screen-nav a:hover .screen-label,
  .screen-nav a:focus-visible .screen-label { opacity: 1; transform: translateX(0); }
  body:has(dialog[open]) .screen-nav { visibility: hidden; }
}

@media (min-width: 1000px) and (max-width: 1200px) and (min-height: 640px) {
  :root { --screen-gutter: 48px; }
  .application-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .feature-description { font-size: 14px; }
  .capability-tabs button { padding: 12px 18px; }
  .screen-nav { right: 5px; }
  .screen-nav a[aria-current="location"] .screen-label { opacity: 0; }
  .screen-nav a:hover .screen-label, .screen-nav a:focus-visible .screen-label { opacity: 1; }
  .workflow-list li { padding: 22px; gap: 18px; }
  .workflow-list h3 { font-size: 22px; }
}
@media (max-width: 999px), (max-height: 639px) {
  .screen { margin-top: 0; }
  .screen.section { padding-top: 60px; padding-bottom: 60px; }
  .product-section .section-heading { margin-bottom: 24px; }
  .product-section .section-heading h2 { font-size: 28px; }
  .product-section .section-heading h2::after { display: none; }
  .trial-section { margin-top: 30px; }
}
@media (prefers-reduced-motion: no-preference) {
  .screen.is-current .section-heading,
  .screen.is-current .product-window,
  .screen.is-current .capability-layout,
  .screen.is-current .application-card,
  .screen.is-current .workflow-list li,
  .screen.is-current .hero-inner > * {
    animation: screen-enter .85s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--entry-order, 0) * 60ms);
  }
  .hero-inner h1 { --entry-order: 1; }
  .hero-inner .hero-description, .application-card:nth-child(2), .workflow-list li:nth-child(2) { --entry-order: 2; }
  .hero-inner .hero-actions, .application-card:nth-child(3), .workflow-list li:nth-child(3) { --entry-order: 3; }
  .application-card:nth-child(4) { --entry-order: 4; }
  .application-card:nth-child(5) { --entry-order: 5; }
  .application-card:nth-child(6) { --entry-order: 6; }
  .application-card:nth-child(7) { --entry-order: 7; }
}
@keyframes screen-enter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scroll-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span { animation: none; }
  .hero::before, .screen-label, .screen-dot, .desktop-nav a::after { transition: none; }
}