/*
 * heyaira.eu page layout only. Type, colour, material and components all
 * come unchanged from the HeyAira design system (tokens.css, base.css,
 * components.css). No typography is overridden here.
 */

.wrap {
  width: min(100% - 2 * var(--layout-gutter), 56rem);
  margin-inline: auto;
}

/* ---------- Header: the design-system top bar, without a divider ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(251 250 247 / 0.72);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
  backdrop-filter: blur(var(--frost-blur)) saturate(var(--frost-saturate));
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: min(100% - 2 * var(--layout-gutter), 56rem);
  min-height: 3.5rem;
  margin-inline: auto;
}

.site-header__nav {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
}

/* ---------- Sections: rhythm from the spacing scale ---------- */

.section { padding: var(--space-8) 0; }

.section .wrap {
  display: grid;
  gap: var(--space-5);
}

.section .wrap > p { max-width: var(--layout-measure); margin: 0; }

/* The first screen fills the window: the promise sits in generous space,
   centred in height, and the tool logos close the bottom of the screen.
   Extra height becomes air, never a squeeze. */
.first-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 3.5rem);
}

.section--hero {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-9) 0 var(--space-8);
}

.section--hero .wrap { gap: var(--space-5); }
.section--hero .lanes { margin-block: var(--space-5); }
/* The page is centred on one axis: the hero, the logo row and every
   section head. Component content (lanes, points, layers, steps, board)
   spans the full column and keeps its text left-aligned for reading. */
.section-note { justify-self: center; text-align: center; }
.section--hero .wrap { justify-items: center; text-align: center; }
.section--hero .wrap > * { max-width: var(--layout-measure); }
.section--hero .wrap > .lanes { width: 100%; max-width: none; }
.section--hero .button-row { justify-content: center; }
.section--hero h1 { max-width: none; }

/* Hero cards read like text blocks: their tool marks stay on the same left
   edge as the card copy. The separate compatibility row below is centred. */
.section--hero .lanes__tools { justify-content: flex-start; }
.section--logos .logo-row--center .logo-row__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-7);
}

/* The roadmap board: rows = cards in the longest column (Released, 6).
   Set here, not in a style attribute, because the CSP allows no inline
   styles; a blocked value left the board with a single row. */
.section--recessed .board { --board-rows: 6; }

/* A plain band that sets a section apart from the pastel light. */
.section--recessed { background: var(--surface-recessed); }

.section--logos { padding: 0 0 var(--space-6); }
.section--logos .logo-row { gap: var(--space-4); }

/* Hero: the lead, then the two lanes, then what HeyAira is not. */
.hero__lead { max-width: var(--layout-measure); margin: 0; }
.section--hero .wrap > .hero__not { max-width: none; margin: 0; }

/* Footer: the design-system component, held to the page column. It meets
   the last section directly; the sections carry their own spacing. */
.site-footer { margin-top: 0; border-top: 0; }
.site-footer__inner { width: min(100% - 2 * var(--layout-gutter), 56rem); padding-inline: 0; }