/* Shared opening-screen sizing and navigation across all pages. */
:root {
  --site-header-height: 96px;
  --opening-height: calc(100vh - var(--site-header-height));
}
@supports (height: 100dvh) {
  :root { --opening-height: calc(100dvh - var(--site-header-height)); }
}
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
.header-shell { position: sticky; top: 0; z-index: 15; }
.header { height: var(--site-header-height); }

.hero-shell > .hero,
.ai-hero-shell > .ai-hero {
  min-height: var(--opening-height);
  grid-template-rows: 1fr auto;
  align-items: center;
}
.hero-visual { align-self: center; }
.hw-hero {
  min-height: var(--opening-height);
  display: flex;
  flex-direction: column;
}
.hw-hero > .hw-hero-grid {
  flex: 1;
  grid-template-rows: 1fr auto;
}
.hw-hero-figure { align-self: center; }
.hero-bottom, .ai-hero-bottom, .hw-range-nav { align-self: end; }

@media (min-width: 801px) and (max-height: 820px) {
  .hero-shell > .hero, .ai-hero-shell > .ai-hero, .hw-hero { padding-top: 24px; }
  .hero-shell > .hero { row-gap: 16px; }
  .hero .hero-bottom { padding-top: 12px; padding-bottom: 18px; }
  .hero-visual { min-height: 0; }
  .hero-visual .visual-grid { padding-block: 12px; }
  .hero-visual .visual-top { height: 38px; }
  .hero-visual .hardware-node { gap: 10px; }
  .hero-visual .chip { padding-block: 12px; }
  .ai-hero-copy { padding-bottom: 0; }
  .ai-hero-bottom { margin-top: 24px; }
  .ai-flow-diagram { max-height: calc(100dvh - 340px); }
  .hw-hero-grid { row-gap: 24px; }
}

@media (max-width: 800px) {
  :root { --site-header-height: 78px; }
  .header nav {
    top: 100%;
    max-height: var(--opening-height);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hero-shell > .hero,
  .ai-hero-shell > .ai-hero,
  .hw-hero > .hw-hero-grid { grid-template-rows: auto 1fr auto; }
}
/* Keep the workflow readable on narrow screens. */
@media (max-width: 450px) {
  .workflow-panel { grid-template-columns: minmax(0, 1fr); }
  .workflow-panel > * { min-width: 0; }
  .panel-foot { flex-wrap: wrap; }
}

/* The contact panel has a darker background than the rest of the site. */
.alpha-details { color: #55555d; }