/* Aussca marketing site
   Tokens mirror the product's Tailwind @theme (aussca/frontend/src/index.css)
   so the site and the app read as one company. Plain CSS, no build step. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-latin.woff2") format("woff2");
}

:root {
  --brand-50: #eff5ff;
  --brand-100: #dbe7fe;
  --brand-200: #bfd4fe;
  --brand-300: #93b6fd;
  --brand-500: #3b6ef6;
  --brand-600: #2451eb;
  --brand-700: #1c3fd1;
  --brand-800: #1d37a9;
  --brand-900: #1d3485;

  --ink-50: #f8fafc;
  --ink-100: #f1f5f9;
  --ink-200: #e2e8f0;
  --ink-300: #cbd5e1;
  --ink-400: #94a3b8;
  --ink-500: #64748b;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1e293b;
  --ink-900: #0f172a;

  --success-50: #ecfdf5;
  --success-700: #047857;
  --warning-50: #fffbeb;
  --warning-700: #b45309;
  --info-50: #eff6ff;
  --info-600: #2563eb;

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  --shadow-pop: 0 12px 32px -8px rgb(15 23 42 / 0.18), 0 4px 8px -4px rgb(15 23 42 / 0.08);

  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1120px;
  --gutter: 24px;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--brand-700);
}

h1,
h2,
h3 {
  color: var(--ink-900);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--ink-900);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  z-index: 100;
}

.skip-link:focus {
  top: 12px;
}

/* Placeholder marker: anything wrapped in .tbc must be filled before launch. */
.tbc {
  background: var(--warning-50);
  color: var(--warning-700);
  border: 1px dashed var(--warning-700);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.9em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--brand-600);
  color: #fff;
}

/* Hover colours only where there is a mouse or trackpad. On a phone a
   tapped button would keep its hover colour until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--brand-700);
  }
}

.btn-secondary {
  background: #fff;
  color: var(--ink-800);
  border-color: var(--ink-300);
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover {
    border-color: var(--ink-400);
    background: var(--ink-50);
  }
}

.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.9375rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Frosted glass: 60% white and a 20px blur, a clearly visible effect. */
  background: rgb(255 255 255 / 0.6);
  /* Safari before 18 (iOS 17 and earlier) only knows the prefixed name. */
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  /* A faint shadow separates the header from the page. A hairline did the
     same job but read as a pale line over the dark pilot section. */
  box-shadow: 0 4px 16px rgb(15 23 42 / 0.06);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Home page: at the very top the header takes the hero's starting colour and
   drops its line, so the two read as one. app.js adds .is-scrolled as soon as
   the page moves. Without JavaScript it keeps this look, which still reads. */
.site-header--over-hero:not(.is-scrolled) {
  background: var(--brand-50);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Three columns: brand on the left, nav centred on the page, actions on the
   right. The outer columns share the leftover width, so the nav stays centred
   even though the two sides are different widths. */
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.brand svg {
  width: 30px;
  height: 26px;
}

.nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
}

.nav a,
.nav-quiet {
  color: var(--ink-700);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
}

.nav a[aria-current="page"] {
  color: var(--ink-900);
}

@media (hover: hover) and (pointer: fine) {
  .nav a:hover,
  .nav-quiet:hover {
    color: var(--ink-900);
    background: var(--ink-100);
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

/* Contact sits beside the button on wide screens and inside the menu on phones. */
.nav-contact,
.menu-btn {
  display: none;
}

.menu-btn {
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-300);
  border-radius: 10px;
  background: #fff;
  color: var(--ink-900);
  cursor: pointer;
}

.menu-btn svg {
  width: 20px;
  height: 20px;
}

.menu-btn .icon-close,
.site-header.is-open .menu-btn .icon-open {
  display: none;
}

.site-header.is-open .menu-btn .icon-close {
  display: block;
}

/* Up to 900px the centred nav no longer fits: brand on the left, button and
   menu button on the right, and the nav becomes a panel under the header. */
@media (max-width: 900px) {
  .site-header .container {
    grid-template-columns: auto 1fr;
  }

  .nav,
  .nav-quiet {
    display: none;
  }

  .nav-actions {
    gap: 10px;
  }

  .menu-btn,
  .nav-contact {
    display: inline-flex;
  }

  .site-header.is-open .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Undo the desktop centring: an absolutely positioned grid item with
       justify-self: center shrinks to fit instead of spanning left to right. */
    justify-self: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px var(--gutter) 16px;
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    box-shadow: 0 12px 30px rgb(15 23 42 / 0.08);
  }

  .site-header.is-open .nav a {
    display: block;
    padding: 14px 4px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink-900);
    border-bottom: 1px solid var(--ink-100);
    border-radius: 0;
  }

  .site-header.is-open .nav .nav-contact {
    color: var(--ink-600);
    font-weight: 500;
    border-bottom: 0;
  }
}

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

.hero {
  background: linear-gradient(180deg, var(--brand-50) 0%, #fff 78%);
  padding: 72px 0 88px;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.125rem, 3.9vw, 3rem);
  font-weight: 700;
}

.hero .lead {
  margin-top: 22px;
  font-size: 1.1875rem;
  color: var(--ink-600);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--ink-500);
}

.hero-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--ink-400);
  box-shadow: 0 0 0 4px var(--ink-100);
}

/* ---------- Product illustration ---------- */

/* One app window: the original PDF page on the left, the register on the right. */
.mock-window {
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.mock-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
}

.mock-window-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-300);
}

.mock-window-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mock-doc {
  background: var(--ink-100);
  padding: 14px 16px 18px;
  border-right: 1px solid var(--ink-200);
}

.mock-doc-meta {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 10px;
}

.mock-doc-page {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: 16px 16px 14px;
}

.mock-line {
  height: 7px;
  border-radius: 4px;
  background: var(--ink-200);
  margin-bottom: 9px;
}

.mock-line.w90 { width: 90%; }
.mock-line.w80 { width: 80%; }
.mock-line.w70 { width: 70%; }
.mock-line.w60 { width: 60%; }
.mock-line.w45 { width: 45%; }

.mock-clause-head {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-700);
  margin: 16px 0 9px;
}

.mock-highlight {
  position: relative;
  border: 2px solid var(--brand-500);
  background: rgb(59 110 246 / 0.07);
  border-radius: 6px;
  padding: 8px 8px 0;
  margin: 0 -8px 12px;
}

.mock-highlight .mock-line {
  background: var(--brand-200);
}

.mock-tag {
  position: absolute;
  top: -11px;
  right: 10px;
  background: var(--brand-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.mock-side {
  padding: 14px 0 6px;
}

.mock-side-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-900);
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--ink-200);
}

.mock-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mock-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 0.8125rem;
  color: var(--ink-700);
}

.mock-list li:last-child {
  border-bottom: 0;
}

.mock-list li.active {
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.mock-list .row {
  display: flex;
  gap: 8px;
}

.mock-list .num {
  min-width: 2.2em;
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}

.chip-builder { background: var(--warning-50); color: var(--warning-700); }
.chip-subbie { background: var(--info-50); color: var(--info-600); }
.chip-conclusion { background: var(--brand-100); color: var(--brand-800); }
.chip-closed { background: var(--success-50); color: var(--success-700); }

/* ---------- Old way illustration (Problem section) ---------- */

/* Departures arriving in four formats, re-keyed into a spreadsheet. The
   figure carries one aria-label; everything inside it is aria-hidden.
   No inline style attributes: the CSP only allows this stylesheet. */
.oldway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.45fr);
  align-items: center;
  gap: 20px;
  margin: 0 0 48px;
}

.oldway-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.oldway-src {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 12px 14px 10px;
}

.oldway-src:nth-child(1) { transform: rotate(-1.5deg); }
.oldway-src:nth-child(2) { transform: rotate(1.2deg) translateY(6px); }
.oldway-src:nth-child(3) { transform: rotate(1deg); }
.oldway-src:nth-child(4) { transform: rotate(-1.2deg) translateY(4px); }

.oldway-src .mock-line {
  height: 6px;
  margin-bottom: 7px;
}

.oldway-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-500);
}

.oldway-label svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.oldway-subject {
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oldway-attach {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 2px 0 4px;
  padding: 3px 8px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: var(--ink-50);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oldway-attach svg {
  flex: none;
  width: 11px;
  height: 11px;
}

/* Word track changes: a struck deletion and an underlined insertion. */
.oldway-del,
.oldway-ins {
  position: relative;
  height: 6px;
  margin-bottom: 7px;
  border-radius: 3px;
}

.oldway-del {
  width: 70%;
  background: #fecaca;
}

.oldway-del::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2.5px;
  height: 1px;
  background: #b91c1c;
}

.oldway-ins {
  width: 85%;
  background: #bfdbfe;
  box-shadow: 0 2px 0 -0.5px var(--info-600);
}

.oldway-comment {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 8px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #b91c1c;
}

.oldway-wp {
  margin-bottom: 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-600);
}

.oldway-mini {
  display: grid;
  grid-template-columns: 1fr 2fr 1.2fr;
  gap: 4px;
}

.oldway-mini i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-200);
}

.oldway-mini i.h {
  background: var(--ink-400);
}

.oldway-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-500);
  text-align: center;
}

.oldway-arrow svg {
  width: 56px;
  height: 20px;
  color: var(--ink-400);
}

.oldway-file {
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spreadsheet: row numbers, then columns A–D. */
.oldway-table {
  display: grid;
  grid-template-columns: 26px 5.2em minmax(0, 1.25fr) 6.4em minmax(0, 1fr);
  font-size: 0.75rem;
  color: var(--ink-700);
}

.oldway-table > span {
  min-height: 2.15em;
  padding: 6px 8px;
  border-right: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oldway-table > span:nth-child(5n) { border-right: 0; }
.oldway-table > span:nth-last-child(-n + 5) { border-bottom: 0; }
.oldway-table > .c { padding-left: 0; padding-right: 0; background: var(--ink-50); color: var(--ink-400); font-weight: 500; text-align: center; }
.oldway-table > .th { font-weight: 700; color: var(--ink-900); }
.oldway-table > .n { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.oldway-table > .dup { background: #fef2f2; color: #b91c1c; }
.oldway-table > .fill { background: #fef9c3; }
.oldway-table > .red { font-weight: 600; color: #b91c1c; }
.oldway-table > .q { font-style: italic; color: var(--ink-500); }

/* ---------- Sections ---------- */

.section {
  padding: 88px 0;
}

.section-alt {
  background: var(--ink-50);
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}

.section-head {
  max-width: 40em;
  margin-bottom: 48px;
}

.section-head h1,
.section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 700;
}

.lead-sm {
  margin-top: 14px;
  color: var(--ink-600);
}

/* Section labels: 15px. The hero eyebrow stays 13px so its longer line
   fits on one row on most phones. */
.kicker {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 12px;
}

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

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

/* ink-300, not ink-200: white cards on a white section need a visible edge
   on laptop and external screens too. */
.card {
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.card p {
  color: var(--ink-600);
}

/* Problem cards: an icon in a round badge above each title. */
.card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  margin-bottom: 18px;
}

.card-badge svg {
  width: 18px;
  height: 18px;
}

/* How it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  position: relative;
  padding-top: 64px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-600);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps li::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 60px;
  right: -16px;
  height: 2px;
  background: var(--brand-100);
}

.steps li:last-child::after {
  display: none;
}

.steps h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.steps p {
  color: var(--ink-600);
}

/* Who it's for */

.role {
  display: flex;
  gap: 16px;
}

/* `.card .role-label`, not `.role-label`: `.card p` would otherwise win and
   turn the label grey. */
.card .role-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-700);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* Why Aussca */

.why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 48px;
}

.why-item {
  display: flex;
  gap: 18px;
}

.why-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-icon svg {
  width: 22px;
  height: 22px;
}

.why-item h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.why-item p {
  color: var(--ink-600);
}

/* Pilot */

.pilot {
  background: var(--brand-900);
  color: var(--brand-100);
  padding: 96px 0;
}

.pilot .container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}

.pilot h2 {
  color: #fff;
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 700;
}

.pilot .kicker {
  color: var(--brand-200);
}

/* Not the label: it keeps the shared .kicker size and spacing. */
.pilot-copy p:not(.kicker) {
  margin-top: 18px;
  font-size: 1.125rem;
}

.form-card {
  background: #fff;
  color: var(--ink-700);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: 32px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: end;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-800);
}

.req {
  color: #b91c1c;
  margin-left: 2px;
}

.field input::placeholder {
  /* Darker than browser defaults (Safari's is very light) to keep 4.5:1 contrast. */
  color: var(--ink-500);
  opacity: 1;
}

.field-error {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b91c1c;
}

.field-error a {
  color: inherit;
  font-weight: 600;
}

.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: 0 12px;
  width: 100%;
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #b91c1c;
}

.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px #fee2e2;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.form-foot .btn {
  width: 100%;
}

.form-privacy {
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.form-status {
  font-size: 0.9375rem;
  /* A long email address has no spaces: let it wrap instead of overflowing. */
  overflow-wrap: anywhere;
  border-radius: var(--radius-md);
  padding: 0;
}

.form-status:not(:empty) {
  padding: 12px 14px;
}

.form-status.ok {
  background: var(--success-50);
  color: var(--success-700);
}

.form-status.err {
  background: #fef2f2;
  color: #b91c1c;
}

/* Team */

.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

/* Each person in a card, the same look as the home page cards. */
.person {
  background: #fff;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
}

.person h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.person .title {
  font-size: 0.9375rem;
  color: var(--brand-700);
  font-weight: 600;
  margin: 2px 0 8px;
}

/* About page: what to do next, after reading who's behind it. */
.about-cta {
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.about-cta p {
  flex: 1 1 100%;
  font-weight: 600;
  color: var(--ink-900);
}

.person-links {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* FAQ */

.faq {
  max-width: 48em;
  border-top: 1px solid var(--ink-200);
}

.faq details {
  border-bottom: 1px solid var(--ink-200);
  padding: 4px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-weight: 600;
  color: var(--ink-900);
  font-size: 1.0625rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink-500);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  padding: 0 40px 20px 0;
  color: var(--ink-600);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--ink-200);
  padding: 32px 0 40px;
  font-size: 0.875rem;
  color: var(--ink-500);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}

/* No underline, like the header nav; brand blue on hover where there's a mouse. */
.site-footer a {
  color: var(--ink-600);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: var(--brand-700);
  }
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-links .footer-email,
.footer-links .footer-linkedin {
  display: inline-flex;
}

.footer-links .footer-email svg,
.footer-links .footer-linkedin svg {
  width: 20px;
  height: 20px;
}

/* The LinkedIn mark stays LinkedIn blue, hover included: their brand rules
   allow it only in blue, black or white. */
.footer-links .footer-linkedin {
  color: #0a66c2;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer .footer-linkedin:hover {
    color: #0a66c2;
    opacity: 0.85;
  }
}

/* Prose pages (privacy, 404) */

.prose {
  max-width: 44em;
  padding: 72px 0 96px;
}

.prose h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 12px;
}

.prose h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 36px 0 10px;
}

.prose p,
.prose ul {
  margin: 0 0 14px;
}

.prose .meta {
  color: var(--ink-500);
  font-size: 0.9375rem;
  margin-bottom: 28px;
}

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

@media (max-width: 960px) {
  .hero .container,
  .pilot .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .mock-window-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock-doc {
    display: none;
  }

  .grid-3,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps li::after {
    display: none;
  }

  .oldway {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .oldway-arrow svg {
    height: 32px;
    transform: rotate(90deg);
  }

  .why,
  .team {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
  }

  .hero {
    padding: 48px 0 64px;
  }

  .section,
  .pilot {
    padding: 64px 0;
  }

  .grid-2,
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .chip {
    white-space: nowrap;
  }

  .form-card {
    padding: 24px 20px;
  }

  .oldway-sources {
    gap: 10px;
  }

  .oldway-src {
    padding: 10px 11px 8px;
  }

  .oldway-table {
    grid-template-columns: 22px 5em minmax(0, 1.25fr) 6em minmax(0, 1fr);
    font-size: 0.6875rem;
  }

  .oldway-table > span {
    padding: 5px 6px;
  }
}

/* Narrow phones: wrap spreadsheet cells instead of cutting them off. */
@media (max-width: 400px) {
  .oldway-table > span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header {
    transition: none;
  }
}