/* =========================================================
   Verifund landing mock A, "Ledger"
   ========================================================= */
:root {
  --ink: #1c282e;
  --ink-hover: #0f1a1f;
  --teal: #547c86;
  --mist: #acc8c9;
  --olive: #a9b37a;
  --white: #ffffff;
  --bg: #e8edea;
  --bg-soft: #f3f6f3;
  --text-2: #3e4e55;
  --text-3: #56656c; /* brand #6b7b82, darkened to pass AA at small sizes */
  --error: #b14545;
  --border: rgba(28, 40, 46, 0.08);
  --border-strong: rgba(28, 40, 46, 0.14);
  --shadow-card: 0 1px 2px rgba(28, 40, 46, 0.06), 0 12px 32px -12px rgba(28, 40, 46, 0.14);
  --shadow-lift: 0 2px 4px rgba(28, 40, 46, 0.06), 0 28px 60px -20px rgba(28, 40, 46, 0.28);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --max-w: 1440px;
  --max-w-wide: 1680px;
  --gutter: 56px;
  --nav-h: 72px;
  --section: 120px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
}

figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
main:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--white);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
}
.skip-link:focus {
  left: 16px;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide {
  max-width: var(--max-w-wide);
}

/* ---------- Type ---------- */
.display {
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: 17px;
  color: var(--text-2);
  max-width: 520px;
  margin: 0;
}

.specimen {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: color 160ms ease, gap 240ms var(--ease);
}
.text-link:hover {
  color: var(--teal);
  gap: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn svg {
  transition: transform 240ms var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn--primary {
  background: var(--ink);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--ink-hover);
}
.btn--ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--white);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 246, 243, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--border);
}
.nav__inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__logo {
  width: 28px;
  height: 28px;
}
.nav__wordmark {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: color 120ms ease;
}
.nav__links a:hover {
  color: var(--ink);
}
.nav__signin {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  padding: 8px 0;
  transition: color 120ms ease;
}
.nav__signin:hover {
  color: var(--teal);
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 104px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}
.hero__inner {
  display: grid;
  /* The copy only needs its 440px lede; the window gets the rest so the
     app text stays readable when scaled. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
.hero__title {
  font-size: clamp(48px, 5.2vw, 84px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero__lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 36px;
  max-width: 440px;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__for {
  margin: 32px 0 0;
  text-wrap: balance;
}

/* ---------- Demo window (recreation of the app) ----------
   Every value inside .app is taken from the Flutter app (manager workspace,
   Assistant view, All properties selected). The app is laid out at a fixed
   logical 900x760 (the narrowest width at which the app still puts the rail
   beside the panel; it stacks under 900) and scaled uniformly to the column by
   script.js (--app-scale, never above 1); under 821px the app's own narrow
   layout is shown at real size. */
.demo {
  min-width: 0;
}
.app-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 760;
  overflow: hidden;
  border-radius: 14px;
  /* The frame around the screen, not part of the app. */
  box-shadow: 0 0 0 1px var(--border-strong), var(--shadow-lift);
  background: #e8edea;
}
.app {
  --app-w: 900px;
  --app-h: 760px;
  --app-header-h: 75.6px;
  /* body height inside its 9px padding */
  --app-inner: calc(var(--app-h) - var(--app-header-h) - 18px);
  /* Button labels: the app's button themes set a TextStyle with no font
     family, and Material uses that style as-is, so Flutter web draws the
     labels in its default face, Roboto, not Mulish. Roboto is loaded from
     Google Fonts for this reason (chosen over Mulish for fidelity). */
  --app-btn-font: Roboto, Arial, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--app-w);
  height: var(--app-h);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  transform: scale(var(--app-scale, 1));
  background: #e8edea;
  color: #1c282e;
  font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}
.app svg {
  display: block;
  flex-shrink: 0;
}

/* A. Header bar */
.app__header {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: #1c282e;
  border-bottom: 1px solid #3e4e55;
  box-shadow: 0 2px 10px rgba(28, 40, 46, 0.13);
}
.app__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.app__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app__eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: rgba(172, 200, 201, 0.9);
}
.app__org {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app__menu {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(172, 200, 201, 0.38);
  border-radius: 8px;
  color: #ffffff;
}

/* Body: 320px rail, 9px gap, panel */
.app__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
}
.app__rail,
.app__panel {
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  border: 1px solid #acc8c9;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(28, 40, 46, 0.06), 0 6px 18px -8px rgba(28, 40, 46, 0.08);
  display: flex;
  flex-direction: column;
}

/* B. Rail */
.app__ask-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  background: #1c282e;
  color: #ffffff;
  font-family: var(--app-btn-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
}
/* The sparkle is ink on the ink button, as in the app: styleFrom() leaves
   iconColor null, so ButtonStyleButton.effectiveIconColor() takes the
   filledButtonTheme iconColor (textOnAccent, #1C282E) before the widget's
   white foregroundColor (Flutter 3.41 button_style_button.dart:395-402). */
.app__ask-btn svg {
  color: #1c282e;
}
.app__props {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  max-height: calc(var(--app-inner) - 160px);
  overflow: hidden;
}
.app__props li {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* 12px 14px, with the border drawn inside it */
  padding: 11px 13px;
  border: 1px solid #acc8c9;
  border-radius: 8px;
  background: #ffffff;
}
.app__props li.is-selected {
  padding: 10.4px 12.4px;
  border: 1.6px solid #a9b37a;
  background: rgba(169, 179, 122, 0.18);
}
.prop__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.43;
  color: #1c282e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app .pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.app .pill--olive {
  color: #a9b37a;
  background: rgba(169, 179, 122, 0.11);
  border-color: rgba(169, 179, 122, 0.35);
}
.app .pill--ok {
  color: #547c86;
  background: rgba(84, 124, 134, 0.11);
  border-color: rgba(84, 124, 134, 0.35);
}
.app .pill--bad {
  color: #b14545;
  background: rgba(177, 69, 69, 0.11);
  border-color: rgba(177, 69, 69, 0.35);
}

/* C. Assistant panel */
.panel__head {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 14px;
}
.panel__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.panel__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  color: #1c282e;
}
.panel__sub {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 1.35;
  color: #6b7b82;
}
.panel__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.panel__actions[hidden] {
  display: none;
}
.panel__new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 64px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  color: #547c86;
  font-family: var(--app-btn-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
}
.panel__delete {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #b14545;
}
.panel__actions.is-disabled .panel__new {
  color: rgba(84, 124, 134, 0.4);
}
.panel__actions.is-disabled .panel__delete {
  color: rgba(107, 123, 130, 0.5);
}

.thread {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.starters {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: -4px 0;
}
.starters[hidden] {
  display: none;
}
.empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  text-align: center;
}
.empty__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8edea;
  border: 1px solid #acc8c9;
  color: #547c86;
}
.empty__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.27;
  color: #1c282e;
}
.empty__body {
  margin-top: 6px;
  font-size: 14px;
  color: #6b7b82;
}
.starters__wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.starter {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* 13px 18px, with the border drawn inside it */
  padding: 12px 17px;
  border: 1px solid #acc8c9;
  border-radius: 8px;
  color: #547c86;
  font-family: var(--app-btn-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
}
.bubble {
  flex-shrink: 0;
  max-width: 680px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #acc8c9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble--user {
  align-self: flex-end;
  background: #1c282e;
  color: #ffffff;
}
.bubble--assistant {
  align-self: flex-start;
  background: #e8edea;
  color: #1c282e;
}

.composer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.composer__back {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 17px;
  border: 1px solid #acc8c9;
  border-radius: 8px;
  color: #547c86;
  font-family: var(--app-btn-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
}
.composer__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 51px;
  /* 14px content padding, with the 1px border inside it */
  padding: 0 13px;
  background: #ffffff;
  border: 1px solid #acc8c9;
  border-radius: 8px;
  color: #1c282e;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
}
.composer__field.is-typing {
  padding: 0 12.4px;
  border: 1.6px solid #a9b37a;
}
.composer__field.is-disabled {
  border-color: rgba(172, 200, 201, 0.6);
}
.composer__text {
  flex-shrink: 0;
}
.composer__placeholder {
  position: absolute;
  left: 14px;
  right: 14px;
  color: #6b7b82;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.composer__field.has-text .composer__placeholder {
  display: none;
}
.composer__caret {
  display: none;
  width: 2px;
  height: 23px;
  margin-left: 1px;
  border-radius: 1px;
  background: #1c282e;
  flex-shrink: 0;
  animation: caret 1s steps(1) infinite;
}
.composer__field.is-typing .composer__caret {
  display: block;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
/* No hover or pressed colour and no animation, as in the app. */
.composer__ask {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #a9b37a;
  color: #1c282e;
  font-family: var(--app-btn-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
}
.composer__ask.is-busy {
  background: rgba(169, 179, 122, 0.4);
}
/* Material 3 indeterminate CircularProgressIndicator: olive arc on the
   #E8EDEA track, the arc growing and shrinking while it turns. */
.app .spinner {
  display: none;
  overflow: visible;
  animation: spin 1.568s linear infinite;
}
.spinner circle {
  fill: none;
  stroke-width: 2.2;
}
.spinner__track {
  stroke: #e8edea;
}
.spinner__arc {
  stroke: #a9b37a;
  stroke-dasharray: 1 100;
  transform-origin: 9px 9px;
  transform: rotate(-90deg);
  animation: spin-arc 1.333s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.app .composer__ask.is-busy .spinner {
  display: block;
}
.composer__ask.is-busy .composer__ask-label {
  display: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin-arc {
  0% {
    stroke-dasharray: 1 100;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 75 100;
    stroke-dashoffset: -10;
  }
  100% {
    stroke-dasharray: 1 100;
    stroke-dashoffset: -99;
  }
}
.composer__caption {
  flex-shrink: 0;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: #6b7b82;
}

/* The app under its 900px breakpoint: rail stacked on top, at most half the
   height (its list gets that less 160px), then the panel. Shown at real size.
   900px tall is the least at which the thread shows a whole answer at 390px
   wide (the longest bubble is 242px); the page scroll crops the rail. */
@media (max-width: 820px) {
  .app-viewport {
    aspect-ratio: auto;
    height: 900px;
  }
  .app {
    --app-w: 100%;
    --app-h: 900px;
  }
  .app__body {
    display: flex;
    flex-direction: column;
  }
  .app__rail {
    flex-shrink: 0;
    max-height: 50%;
  }
  .app__props {
    max-height: calc(var(--app-inner) / 2 - 160px);
  }
  .app__panel {
    flex: 1;
  }
}

.demo__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
/* Pause stops everything inside the window, CSS loops included. */
.demo.is-paused .app *,
.demo.is-paused .app *::before,
.demo.is-paused .app *::after {
  animation-play-state: paused !important;
}
.demo__toggle {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.demo__toggle::before {
  content: "";
  position: absolute;
  inset: -4px;
}
.demo__toggle:hover {
  border-color: var(--ink);
}
.demo__toggle .icon-play {
  display: none;
}
.demo__toggle[data-state="paused"] .icon-play {
  display: block;
  margin-left: 1px;
}
.demo__toggle[data-state="paused"] .icon-pause {
  display: none;
}

/* ---------- Split section head ---------- */
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  padding-bottom: 32px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.section-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* ---------- What you can ask ---------- */
.ask {
  padding: var(--section) 0;
  background: var(--white);
}
/* Columns match the split head above, so each answer sits under the lede. */
.asklist {
  margin: 0;
}
.asklist__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 8px 64px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}
.asklist__q {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.asklist__a {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ask__note {
  margin: 24px 0 0;
}

/* ---------- Pilot + founder ---------- */
.pilot {
  padding: var(--section) 0;
  background: var(--bg-soft);
}
.pilot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
}
.pilot__copy .display {
  margin-bottom: 20px;
}
.pilot__copy p {
  margin: 0 0 32px;
  font-size: 17px;
  color: var(--text-2);
  max-width: 500px;
}
.founder {
  padding-left: 40px;
  border-left: 1px solid var(--border-strong);
  scroll-margin-top: calc(var(--nav-h) + 40px);
}
.founder blockquote {
  margin: 0 0 24px;
}
.founder blockquote p {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-2);
  text-wrap: pretty;
}
.founder figcaption {
  display: flex;
  flex-direction: column;
}
.founder__name {
  font-size: 15px;
  font-weight: 800;
}
.founder__role {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--mist);
  padding: 64px 0 36px;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
}
.footer__mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: start;
  gap: 10px;
}
.footer__line {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mist);
}
.footer__logo {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1) opacity(0.85);
}
.footer__wordmark {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  gap: 48px;
}
.footer__cols h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}
.footer__cols a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--mist);
  transition: color 120ms ease;
}
.footer__cols a:hover {
  color: var(--white);
}
.footer__legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(172, 200, 201, 0.8);
}
.footer :focus-visible {
  outline-color: var(--olive);
}

/* ---------- Motion staging (inline head script adds .js-motion) ---------- */
.js-motion [data-intro] {
  opacity: 0;
  transform: translateY(14px);
}
.js-motion [data-intro].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease), transform 1100ms var(--ease);
}

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  :root {
    --gutter: 40px;
  }
  .hero__inner {
    gap: 48px;
  }
}

/* Stack the hero before the demo window gets too narrow to read. */
@media (max-width: 1180px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .hero__copy {
    max-width: 720px;
  }
  /* Stacked, the window stays at real size instead of stretching. */
  .app-viewport {
    max-width: 900px;
  }
}

@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
    --section: 96px;
  }
  .pilot__inner,
  .section-head--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .section-head--split {
    align-items: start;
  }
  .asklist__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 32px;
  }
  .founder {
    padding-left: 0;
    padding-top: 36px;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }
  .pilot__inner {
    gap: 56px;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --section: 80px;
  }
  /* Nav links move to a second, scrollable row. */
  .nav__inner {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 12px;
  }
  .nav__signin {
    margin-left: auto;
  }
  .nav__links {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 22px;
    padding: 6px 0 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .nav__links::-webkit-scrollbar {
    display: none;
  }
  .hero {
    padding: 48px 0 72px;
  }
  .hero__lede {
    font-size: 18px;
  }
  .asklist__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 22px 0;
  }
  .asklist__a {
    font-size: 16px;
  }
  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-intro] {
    opacity: 1;
    transform: none;
  }
  .composer__caret {
    animation: none;
  }
  .text-link,
  .btn svg {
    transition: none;
  }
}