/* The hero and Problem follow new-orange-website; the sections after them use warm
   off-white surfaces and hairline rules, on the same page margins. */
:root {
  --black: #000000;
  --white: #ffffff;
  --bg: #ffffff;        /* the page, the solid nav and the legal pages: white, as on new-orange-website */
  --line: #e4e3de;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --orange: #fa500f;
  --frame-line: rgba(255, 255, 255, 0.3); /* the footer's top line */

  --font: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --nav-h: 64px;
  --partners-h: 146px;
  /* Rounded to whole pixels so lines in neighbouring sections land on the same pixel column. */
  --space: round(clamp(20px, 4.4vw, 64px), 1px);   /* standard margin, also the gap between columns */
  --content-max: 1600px;               /* content never gets wider than this */
  /* Page margin: the standard margin, growing on wide screens so content stays centred at
     --content-max. Backgrounds and the hero film still run full width. */
  --gutter: max(var(--space), round(calc((100vw - var(--content-max)) / 2), 1px));
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: var(--nav-h);
  padding: 0 var(--gutter); /* logo lines up with the hero headline */
  /* Transparent over the hero film; js/main.js adds .nav--solid once the hero has scrolled away. */
  background: transparent;
  color: var(--black);
  --nav-stroke: rgba(0, 0, 0, 0.18);
  --nav-hover: rgba(0, 0, 0, 0.06);
  overflow: clip; /* keeps the section line inside the page width */
  transition: background-color 0.2s, box-shadow 0.2s;
}

.nav--solid { background: var(--bg); }

/* Pull the page up under the nav so the hero film starts at the very top. */
.nav + main { margin-top: calc(-1 * var(--nav-h)); }

.nav__brand {
  display: flex;
  align-items: center;
  margin-left: -12px; /* nudged a little left of the page margin */
}

.nav__logo { display: block; height: 32px; width: auto; }

.nav__links { position: relative; display: flex; align-items: stretch; }

/* One continuous bottom line across the whole nav, running behind the buttons like the rules behind
   the Approach cards. */
.nav__links::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  height: 1px;
  background: var(--nav-stroke);
  pointer-events: none;
}

.nav__links a {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-left: 1px solid var(--nav-stroke);
  font-size: 12px;
  font-weight: 500;
  transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s, border-color 0.3s;
}
.nav__links a:last-child { border-right: 1px solid var(--nav-stroke); }

/* Round-edge test, the same system as the Approach cards: the hovered button becomes a rounded tile
   with its own outline, and the straight dividers beside it fade out. */
.nav__links a:hover,
.nav__links a:focus-visible {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--nav-stroke); /* drawn inside so the nav does not clip its bottom edge */
}
.nav__links a:hover + a,
.nav__links a:focus-visible + a { border-left-color: transparent; }

/* The nav CTA is the two-part button (.cta-split); its cells carry the colour and the rounding,
   so the link itself stays a plain full-height slot. */
.nav__links .nav__cta { align-items: stretch; padding: 0; font-size: 12px; }
.nav__links .nav__cta:hover,
.nav__links .nav__cta:focus-visible { gap: 0; border-radius: 0; box-shadow: none; }
/* The gap opens by sliding the arrow cell right (a visual shift, not a wider button), so the label
   and the other nav buttons never move. */
.nav__links .nav__cta .cta-split__arrow { transition: background-color 0.2s, color 0.2s, border-radius var(--cta-ease), transform var(--cta-ease); }
.nav__links .nav__cta:hover .cta-split__arrow,
.nav__links .nav__cta:focus-visible .cta-split__arrow { transform: translateX(3px); }
.nav__links .nav__cta .cta-split__label { padding: 0 28px; }

/* Over the hero the nav CTA is folded away to the right (the hero has its own); once the bar turns
   solid it unfolds and slides in from the right, pushing the section links left with it. */
.nav__links .nav__cta {
  max-width: 320px;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, visibility 0s;
}
.nav--clear .nav__links .nav__cta {
  max-width: 0;
  border-width: 0;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden; /* out of the tab order while folded */
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s, visibility 0s 0.4s;
}
.nav--clear .nav__links a:nth-last-child(2) { border-right: 1px solid var(--nav-stroke); } /* close off Team meanwhile */


@media (prefers-reduced-motion: reduce) {
  .nav__links a,
  .nav__links .nav__cta,
  .nav--clear .nav__links .nav__cta { transition: none; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 52fr 48fr;
  grid-template-areas:
    "intro    media"
    "partners media";
}

.hero__intro {
  grid-area: intro;
  /* Intro + partners strip fill the whole screen, the nav sitting over the top of it. */
  min-height: calc(100vh - var(--partners-h));
  min-height: calc(100svh - var(--partners-h));
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) var(--space) 64px var(--gutter);
}

.hero__title {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.hero__lede {
  max-width: 580px;
  margin: clamp(32px, 4vw, 64px) 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
}

.hero__partners {
  grid-area: partners;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* left edge lines up with the headline */
  gap: 18px;
  min-height: var(--partners-h);
  padding: 24px var(--gutter);
  border-top: 1px solid var(--line);
}

.hero__partners-caption {
  margin: 0;
  color: #8a8a8a;
  font-size: 17px; /* same size as the Problem paragraph */
  line-height: 1.5;
}

.hero__partners-logos {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Flatten every logo to one muted tone, whatever colours the source file has. */
.hero__partners-logos img {
  display: block;
  height: var(--h); /* per-logo height, set inline */
  translate: 0 var(--y, 0px); /* optical nudge for marks whose bounding box is lopsided */
  width: auto;
  filter: brightness(0);
  opacity: 0.45;
}

.hero__media {
  grid-area: media;
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.hero__video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  cursor: pointer;
}
.hero__video-toggle:hover { background: rgba(0, 0, 0, 0.55); }
.hero__video-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.hero__video-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* The film runs behind the whole hero at every width, the copy and partner strip over it. It cuts
   between dark footage and the light archive page, so a scrim keeps the white copy (left) and the
   white partners strip (bottom) legible over both. */
@media all {
  .hero__media {
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    border-left: 0;
  }

  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.4) 38%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 17%, rgba(0, 0, 0, 0) 38%);
    pointer-events: none;
  }

  .hero__intro,
  .hero__partners {
    position: relative;
    z-index: 1;
  }

  .hero__intro { color: var(--white); }

  /* The film spans both columns, so the strip can too — keeps all five logos on one line. */
  .hero__partners {
    grid-column: 1 / -1;
    border-top: 0;
  }

  /* Keep the partner strip legible over the film. */
  .hero__partners-caption { color: rgba(255, 255, 255, 0.9); }

  .hero__partners-logos img { filter: brightness(0) invert(1); opacity: 0.9; }
}

/* The transparent nav sits over the film too; js/main.js makes it solid once the hero has gone.
   Pages without a hero (body.page-legal) keep their solid white nav and dark text. */
body:not(.page-legal) .nav:not(.nav--solid) {
  color: var(--white);
  --nav-stroke: rgba(255, 255, 255, 0.3);
  --nav-hover: rgba(255, 255, 255, 0.12);
}

/* Hovering or focusing the logo over the film frosts a soft pill behind it. The solid nav needs none. */
.nav__brand { position: relative; isolation: isolate; }
.nav__brand::before {
  content: "";
  position: absolute;
  inset: 10px -12px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
body:not(.page-legal) .nav:not(.nav--solid) .nav__brand:is(:hover, :focus-visible)::before { opacity: 1; }

/* ---------- Placeholders for missing assets ---------- */

.asset-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px dashed #b5b5b5;
  color: #8a8a8a;
  font-size: 12px;
}

/* ---------- Shared type ---------- */

.h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(36px, 3.9vw, 56px);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  max-width: 1024px;
  margin: 40px 0 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* A headline block over the content of a section: left-aligned, or centred. */
.headline { padding: clamp(64px, 5.6vw, 80px) var(--gutter) 40px; }

.headline--center {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: clamp(96px, 11vw, 160px);
  padding-bottom: clamp(48px, 5.6vw, 80px);
  text-align: center;
}

.headline--center .lede { margin-left: auto; margin-right: auto; }

/* ---------- Problem ---------- */

/* Copy on the left (30%), the bottleneck animation on the right (70%), split by a full-height line.
   The vertical padding lives on the columns so the line runs from border to border. */
.problem {
  display: grid;
  grid-template-columns: 2fr 3fr; /* 40/60: more room for the copy */
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
}

/* Statement and CTA pushed to the bottom of the column, level with the bottom of the animation. */
.problem__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 128px var(--space) 128px 0;
  border-right: 1px solid var(--line);
}

.problem__title {
  max-width: 16ch;
  text-wrap: balance; /* even lines, no word left alone */
  margin: 0;
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.problem__lede {
  max-width: 520px;
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.5;
}

/* Animation, its bottom level with the CTA under the copy. */
.problem__figure {
  display: flex;
  flex-direction: column;
  align-self: end;
  padding: 128px 0 128px var(--space);
}

.problem__animation { width: 100%; }

/* Two-part CTA (the Problem button and the nav button): a label cell and an arrow cell. At rest they
   read as one black block split by a thin divider; on hover they part into two rounded orange tiles,
   the same round-edge language as the cards. */
.cta-split {
  --cta-ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  transition: gap var(--cta-ease);
}
.cta-split__label,
.cta-split__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  border-radius: 0;
  transition: background-color 0.2s, color 0.2s, border-radius var(--cta-ease);
}
.cta-split__label { padding: 0 32px; }
.cta-split__arrow { width: var(--nav-h); border-left: 1px solid rgba(255, 255, 255, 0.28); }
.cta-split__arrow svg { display: block; transition: transform var(--cta-ease); }

.cta-split:hover,
.cta-split:focus-visible { gap: 3px; outline: none; }
.cta-split:hover .cta-split__label,
.cta-split:hover .cta-split__arrow,
.cta-split:focus-visible .cta-split__label,
.cta-split:focus-visible .cta-split__arrow { border-radius: 12px; border-left-color: transparent; background: var(--orange); color: var(--black); }
.cta-split:hover .cta-split__arrow svg,
.cta-split:focus-visible .cta-split__arrow svg { transform: translate(2px, -2px); }

.problem__cta { height: var(--nav-h); margin-top: 32px; }

/* Orange at rest (the hero CTA over the film): same split-on-hover, the tiles just round off. */
.cta-split--orange { color: var(--black); }
.cta-split--orange .cta-split__label,
.cta-split--orange .cta-split__arrow { background: var(--orange); }
.cta-split--orange .cta-split__arrow { border-left-color: rgba(0, 0, 0, 0.18); }

.hero__cta { align-self: flex-start; height: 56px; margin-top: 32px; }
.hero__cta .cta-split__arrow { width: 56px; }

@media (prefers-reduced-motion: reduce) {
  .cta-split, .cta-split__label, .cta-split__arrow, .cta-split__arrow svg { transition: none; }
}

/* The hero and Problem keep the colours they have on new-orange-website: white ground,
   his near-black text and his grey rules. */
.hero,
.problem {
  --line: #d6d6d6;
  background: var(--white);
  color: #0a0a0a;
}

/* No single word left alone on the paragraph's last line. */
.problem__lede { text-wrap: pretty; }

/* ---------- Approach: ruled columns on a dark band ---------- */

/* Each column shows its icon, title and one line. Hovering or focusing it opens the
   detail under that line; the columns are tall enough for the open state, so the
   row never changes height under the pointer. */
.steps {
  --steps-bg: #000000;
  --steps-line: #27272b;
  --steps-ink: #fafaf4;
  --steps-muted: #a1a1aa;
  padding-bottom: clamp(48px, 5.6vw, 80px);
  background: var(--steps-bg);
  color: var(--steps-ink);
}

.steps .h2 { color: var(--steps-ink); }
.steps .lede { color: var(--steps-muted); }

.steps__rule {
  border-top: 1px solid var(--steps-line);
  border-bottom: 1px solid var(--steps-line);
}

.steps__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 var(--gutter);
  padding: 0;
  border-left: 1px solid var(--steps-line);
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 32px;
  border-right: 1px solid var(--steps-line);
  border-radius: 0;
  outline: none;
  transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
}

/* Round-edge test: the hovered card becomes a rounded tile with its own outline (no colour change). */
.step:hover,
.step:focus-visible {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #3a3a40;
}
.step:focus-visible { box-shadow: 0 0 0 1px #3a3a40, inset 0 0 0 2px var(--orange); }
/* Drop the straight divider beside the rounded tile: the left neighbour's right edge (or the row's
   left edge for the first card) and the tile's own right edge, which the outline replaces. */
.step { transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s, border-color 0.3s; }
.step:has(+ .step:hover),
.step:has(+ .step:focus-visible),
.step:hover,
.step:focus-visible { border-right-color: transparent; }
.steps__row { transition: border-color 0.3s; }
.steps__row:has(> .step:first-child:hover),
.steps__row:has(> .step:first-child:focus-visible) { border-left-color: transparent; }

.step__icon { display: flex; align-items: flex-end; height: 22px; }
.step__icon svg { display: block; }

.step__title {
  margin: 24px 0 0;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.step__foot {
  margin-top: auto;
  padding-top: 40px;
}

.step__text,
.step__detail {
  margin: 0;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

.step__text { font-size: 16px; line-height: 24px; }

.step__detail {
  color: var(--steps-muted);
  font-size: 15px;
  line-height: 22px;
}

/* Opens to the height of its text, however many lines that is at this width. */
.step__more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.45s ease, margin-top 0.45s ease;
}

.step__more > * { min-height: 0; overflow: hidden; }

.step:hover .step__more,
.step:focus-visible .step__more { grid-template-rows: 1fr; margin-top: 14px; }

/* A touch screen has no hover: keep the detail open. */
@media (hover: none) {
  .step { min-height: 0; }
  .step .step__more { grid-template-rows: 1fr; margin-top: 14px; }
}

/* ---------- Mission ---------- */

/* One large centred statement on white, its key phrase in grey. */
.mission {
  padding: clamp(112px, 13vw, 200px) var(--gutter);
  background: var(--white);
  text-align: center;
}

.mission__statement {
  max-width: 1320px;
  margin: 0 auto;
  color: #26262e;
  font-size: clamp(30px, 3.9vw, 56px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.mission__muted { color: #8a8a8a; }

/* ---------- Team ---------- */

/* Mistral's layout, ruled columns under a centred headline, set in Jules's type:
   Instrument Sans at regular weight, his greys, his white ground and rules. */
.team {
  --line: #d6d6d6;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.team .h2 {
  font-weight: 400;
  letter-spacing: -0.015em;
}

.team .lede {
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
}

.people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.person {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 40px;
  border-left: 1px solid var(--line);
}

.person:last-child { border-right: 1px solid var(--line); }

/* Round-edge test, as on the Approach cards: the hovered card becomes a rounded tile with its own
   outline, and the straight dividers beside it fade out. */
.person { transition: border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s, border-color 0.3s; }
.person:hover {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  border-color: transparent;
  box-shadow: 0 0 0 1px #c4c4c4;
}
.person:hover + .person { border-left-color: transparent; }

.person__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.person__linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  height: 32px;
  color: var(--black);
  transition: color 0.2s;
}

.person__linkedin svg { display: block; width: 18px; height: 18px; }
.person__linkedin:hover { color: var(--orange); }
.person__linkedin:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.person__name {
  margin: 0;
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.person__role {
  margin: 10px 0 0;
  color: #0a0a0a;
  font-size: 14px;
  line-height: 1.4;
}

.person__bio {
  max-width: 44ch;
  margin: auto 0 0;
  padding-top: 40px;
  color: #5e5e5e;
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- Deploy with us: the popup ---------- */

/* After microagi's contact popup: the pitch on a dark panel to the left, the form on white to
   the right, a square close button in the corner. Every "Deploy with us" opens it. */
.deploy {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--white);
  color: #0a0a0a;
  overflow: auto;
  overscroll-behavior: contain;
}

.deploy[open] {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
}

.deploy::backdrop {
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(3px);
}

/* The page behind stays put while the popup is open. */
html:has(.deploy[open]) { overflow: hidden; }

.deploy__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.deploy__close:hover,
.deploy__close:focus-visible { background: var(--orange); color: var(--black); }

.deploy__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 44px 36px 36px;
  background: var(--black);
  color: var(--white);
}

.deploy__title {
  margin: 0;
  font-size: clamp(38px, 3.8vw, 52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The points, ruled one above the other: no checkmarks. */
.deploy__points {
  display: flex;
  flex-direction: column;
  margin: auto 0 0;
  padding: 24px 0 0;
  list-style: none;
}

.deploy__points li {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 17px;
  line-height: 1.45;
}

.deploy__body { padding: 96px 40px 36px; }

/* The form in microagi's style: small capital labels, grey fields that turn white with a dark
   outline while typing, one full-width dark button with its arrow at the far end. */
.connect__form { position: relative; }

.connect__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}

.connect__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #5e5e5e;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.connect__field:has(input:required) > span::after { content: " *"; }
.connect__field--wide { grid-column: 1 / -1; }

.connect__field input {
  height: 58px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 0;
  background: #f2f2f2;
  color: #0a0a0a;
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.connect__field input::placeholder { color: #a3a3a3; }
.connect__field input:hover { border-color: #d6d6d6; }
.connect__field input:focus { outline: none; border-color: #0a0a0a; background: var(--white); }
.connect__field input:disabled { opacity: 0.6; }

/* Off-screen rather than display:none, so a bot reading the DOM cannot tell. */
.connect__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.connect__error { margin: 24px 0 0; padding: 12px 16px; border: 1px solid rgba(180, 35, 24, 0.3); background: #fdf3f2; color: #b42318; font-size: 14px; line-height: 1.5; }

.connect__submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-top: 32px;
  padding: 0 22px;
  border: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.connect__submit svg { display: block; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.connect__submit:hover,
.connect__submit:focus-visible { background: var(--orange); color: var(--black); }
.connect__submit:hover svg,
.connect__submit:focus-visible svg { transform: translateX(3px); }
.connect__submit:disabled { opacity: 0.6; cursor: progress; }

.connect__secure { margin: 16px 0 0; color: #8a8a8a; font-size: 14px; }

.connect__sent { color: #4a4a4a; font-size: 16px; line-height: 1.55; }
.connect__sent p { margin: 0 0 16px; }
.connect__sent-title { color: #0a0a0a; font-size: 22px; }

.connect__again {
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 24px;
  border: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.connect__again:hover,
.connect__again:focus-visible { background: var(--orange); color: var(--black); }

@media (max-width: 760px) {
  .deploy[open] { grid-template-columns: 1fr; }
  .deploy__panel { padding: 32px 24px 8px; }
  .deploy__points { padding-top: 4px; }
  .deploy__body { padding: 24px 24px 28px; }
}

@media (max-width: 560px) {
  .connect__fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .connect__submit,
  .connect__submit svg { transition: none; }
}

/* ---------- Footer ---------- */

/* Black, on every page: brand and socials on the left, link columns on the right, a base line below. */
.footer {
  padding: 120px var(--gutter) 48px;
  border-top: 1px solid var(--frame-line);
  background: var(--black);
  color: var(--white);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px var(--space);
  padding-bottom: 112px;
}

.footer__logo { display: block; height: 28px; width: auto; }
.footer__blurb { max-width: 36ch; margin: 20px 0 0; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.55; }

.footer__social { display: flex; gap: 20px; margin-top: 28px; }
.footer__social a { display: block; color: var(--white); transition: color 0.2s; }
.footer__social svg { display: block; width: 18px; height: 18px; }
.footer__social a:hover { color: var(--orange); }

.footer__cols { display: flex; gap: clamp(56px, 9vw, 160px); }
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__label { margin: 0 0 8px; color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.footer__col a,
.footer__top { color: var(--white); font-size: 15px; transition: color 0.2s; }
.footer__col a:hover,
.footer__top:hover { color: var(--orange); }

.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}
.footer__base p { margin: 0; }
.footer__base .footer__top { font-size: 13px; }

@media (max-width: 860px) {
  .footer { padding-top: 80px; }
  .footer__inner { padding-bottom: 72px; }
  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .footer__cols { flex-direction: column; gap: 32px; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* ---------- Legal pages ---------- */

/* No hero behind the nav here, so it is solid from the start and the page clears it. */
.page-legal .nav { background: var(--white); }
.page-legal .nav + main { margin-top: 0; }

.legal { max-width: 760px; margin: 0 auto; padding: 96px var(--space) 120px; }
.legal h1 { margin: 0; font-size: clamp(36px, 4vw, 56px); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.legal__updated { margin: 20px 0 0; color: #8a8a8a; font-size: 14px; }
.legal__body { display: flex; flex-direction: column; gap: 48px; margin-top: 64px; }
.legal__lead,
.legal__block { display: flex; flex-direction: column; gap: 16px; }
.legal h2 { margin: 0 0 4px; font-size: 22px; font-weight: 500; line-height: 1.3; }
.legal p,
.legal li { margin: 0; color: #4a4a4a; font-size: 16px; line-height: 1.65; }
.legal ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-left: 20px; }
.legal__rows { margin: 0; border-top: 1px solid var(--line); }
.legal__rows > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal__rows dt { color: #8a8a8a; font-size: 14px; }
.legal__rows dd { margin: 0; font-size: 15px; line-height: 1.5; }

@media (max-width: 560px) {
  .legal { padding-top: 56px; padding-bottom: 80px; }
  .legal__rows > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav,
  .step,
  .step__more { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
  .steps__row { grid-template-columns: repeat(2, 1fr); }
  .step { min-height: 330px; border-bottom: 1px solid var(--steps-line); }
  .step:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 1100px) {
  .hero__partners-logos { gap: 20px 48px; }
}

@media (max-width: 860px) {
  /* Phones and tablets: the film fills the screen. The headline sits at the top and the rest of the
     copy at the bottom, all in white over a scrim at each end. */
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "intro"
      "partners";
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    padding: calc(var(--nav-h) + 28px) var(--gutter) 24px;
  }
  .hero__title { max-width: 9ch; color: var(--white); font-size: clamp(32px, 8.6vw, 48px); }
  .hero__lede { margin-top: auto; padding-top: 32px; color: rgba(255, 255, 255, 0.92); }
  .hero__cta { height: 48px; margin-top: 20px; }
  .hero__cta .cta-split__arrow { width: 48px; }

  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0) 48%),
      linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7) 26%, rgba(0, 0, 0, 0) 52%);
  }

  /* Top corner, under the nav: the bottom of the screen belongs to the logos and Safari's bar. */
  .hero__video-toggle { top: calc(var(--nav-h) + 20px); bottom: auto; }

  .hero__partners { min-height: 0; padding: 0 var(--gutter) 28px; }

  /* Touch phones: Safari draws its bottom bar over the page but leaves that strip out of every
     viewport unit, so 100svh stops short of the screen. Run the film one toolbar further down
     (behind the bar) and lift the logos by the same amount, so they stay clear of it. */
  @media (hover: none) and (pointer: coarse) {
    .hero { --toolbar: 100px; min-height: calc(100svh + var(--toolbar)); } /* about the height of the gap Safari leaves */
    .hero__partners { padding-bottom: calc(28px + var(--toolbar)); }
  }
  .hero__partners-caption { font-size: 14px; }
  .hero__partners-logos { gap: 14px 30px; }
  .hero__partners-logos img { height: calc(var(--h) * 0.6); translate: 0 calc(var(--y, 0px) * 0.6); } /* smaller marks on a phone */

  .problem { grid-template-columns: 1fr; }

  /* Stacked: no side-by-side split, so no dividing line. */
  .problem__copy {
    padding: 64px 0 48px;
    border-right: 0;
  }

  .problem__figure { padding: 0 0 64px; }

  .people { grid-template-columns: 1fr; }
  .person { min-height: 0; border-right: 1px solid var(--line); }
  .person + .person { border-top: 1px solid var(--line); }

}

@media (max-width: 640px) {
  .steps__row { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 24px; }
  .step .step__more { grid-template-rows: 1fr; margin-top: 14px; }
  .person { padding: 32px 24px; }
}

@media (max-width: 560px) {
  .nav { padding: 0 0 0 16px; }
  .nav__logo { height: 28px; } /* the larger desktop logo would push the buttons off a phone screen */
  .nav__brand { margin-left: 0; } /* the desktop nudge would put it against the screen edge */
  .nav__links a { padding: 0 10px; font-size: 11px; white-space: nowrap; }
  .nav__links .nav__cta .cta-split__label { padding: 0 20px; }
  /* Phones: just the logo and Deploy with us, so the CTA keeps its arrow cell. */
  .nav__links a:not(.nav__cta) { display: none; }
  /* "Deploy with us" needs the room: the first section link goes on phones. */
  .nav__links a[href$="#problem"] { display: none; }
}

/* The narrowest phones keep only the logo and the button. */
@media (max-width: 360px) {
  .nav__links a:not(.nav__cta) { display: none; }
}