/* Ask Atlas — marketing site: homepage and thank-you page.
   Dark brand theme from BRAND.md. Product fragments use the app's light
   palette so they look like the real product. Every text colour below was
   checked for WCAG AA on the backgrounds it sits on. */

:root {
  --bg: #0D1B2A;
  --s1: #111827;
  --glow: #1B3A6B;
  --rule: #1E3A5F;
  --edge: #2A3F5A;
  --field-edge: #5F7896;
  --text: #F1F5F9;
  --text-soft: #B6C2CF;   /* body copy: ≥6.2:1 on every ground, including the hero glow */
  --dim: #8899AA;         /* short meta on flat grounds only (≥5.9:1) */
  --data: #7FB3CC;        /* links and data accents on dark (≥4.9:1) */
  --data-deep: #4A91B0;   /* decorative strokes */
  --gap: #E0A35A;         /* amber means one thing: a knowledge gap */
  --focus: #9CC9DE;
  --err-edge: #C25555;

  --p-bg: #FFFFFF;
  --p-s2: #F1F4F8;
  --p-rule: #E2E8F0;
  --p-text: #0F1923;
  --p-dim: #64748B;
  --p-data: #1D6FA4;
  --p-data-dim: #ECF5FE;
  --p-accent: #1B3A6B;
  --p-accent-dim: #E8EDF5;
  --p-ok: #166534;
  --p-ok-dim: #DCFCE7;
  --p-gap: #92400E;
  --p-gap-mark: #D97706;
  --p-gap-dim: #FEF3C7;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 10vw, 128px);
}

/* ─── Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

svg { display: block; max-width: 100%; }
[id] { scroll-margin-top: 80px; }   /* clear the sticky nav when jumping to an anchor */
a { color: var(--data); text-underline-offset: 3px; }
h1, h2, h3 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

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

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); }
.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: 12px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ─── Wordmark, nav, buttons ───────────────────────────────────────── */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark .ask { color: var(--dim); font-weight: 300; }
.wordmark .atlas { font-weight: 700; }

/* A solid sticky bar: no backdrop blur and no fixed background, which
   together make scrolling stutter on iPhone. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a,
.nav-signin {
  color: var(--text-soft);
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav-links a:hover,
.nav-signin:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 20px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 700 0.9375rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #FFFFFF; }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--edge); }
.btn-quiet:hover { border-color: var(--text-soft); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.875rem; }

/* ─── Sections ─────────────────────────────────────────────────────── */

.section { padding-block: var(--section); }
.section-alt { background: var(--s1); }
.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
.section-head > p { margin-top: 18px; color: var(--text-soft); font-size: 1.125rem; }
.kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--data);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
}

.points { display: grid; gap: 10px; margin-top: 22px; }
.points li { position: relative; padding-left: 24px; }
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--data);
  border-radius: 50%;
}

/* ─── Hero ─────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) var(--section);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 65% at 28% 42%, var(--glow) 0%, rgba(13, 27, 42, 0) 72%);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.375rem, 4.8vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.hero-lede {
  max-width: 46ch;
  margin-top: 22px;
  color: var(--text-soft);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-who { margin-top: 26px; color: var(--text-soft); font-size: 0.9375rem; }

/* ─── Product fragments (light, like the app) ──────────────────────── */

.panel,
.replay {
  background: var(--p-bg);
  color: var(--p-text);
  border: 1px solid var(--edge);
  border-radius: 12px;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.panel { padding: 20px 22px; }
.panel :focus-visible,
.replay :focus-visible { outline-color: var(--p-data); }
.panel-label { color: var(--p-dim); font-size: 0.8125rem; }
.panel-caption { margin-top: 12px; color: var(--text-soft); font-size: 0.875rem; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 8px;
  border-radius: 100px;
  font: 700 0.75rem/1.75 var(--font);
  white-space: nowrap;
  vertical-align: 0.08em;
}
.chip .ref { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; }
.chip-manual   { background: var(--p-data-dim);   color: var(--p-data); }
.chip-airline  { background: var(--p-accent-dim); color: var(--p-accent); }
.chip-training { background: var(--p-ok-dim);     color: var(--p-ok); }
.chip-missing  { background: var(--p-gap-dim);    color: var(--p-gap); }

.dot {
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-untested     { border: 1.5px solid var(--p-dim); }
.dot-partial      { border: 3px solid var(--p-data); }
.dot-demonstrated { background: var(--p-ok); }
.dot-gap          { background: var(--p-gap-mark); }

/* Replay */
.replay-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--p-rule);
  background: var(--p-s2);
  border-radius: 12px 12px 0 0;
  font-size: 0.8125rem;
}
.replay-mode { color: var(--p-accent); font-weight: 700; }
.replay-tag { color: var(--p-dim); }
.replay-again {
  margin-left: auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--p-rule);
  border-radius: 6px;
  background: var(--p-bg);
  color: var(--p-accent);
  font: 700 0.8125rem/1 var(--font);
  cursor: pointer;
}
.replay-again:hover { border-color: var(--p-dim); }
.replay-body { padding: 20px 22px 22px; }
.replay-q {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-rule);
  font-size: 1rem;
  font-weight: 700;
}

.trail { margin-top: 14px; color: var(--p-dim); font-size: 0.8125rem; }
.trail-head { display: flex; align-items: center; gap: 8px; }
.trail-head .globe { color: var(--p-accent); }
.trail-title { color: var(--p-text); font-weight: 700; }
.trail-steps {
  margin: 8px 0 0 7px;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--p-rule);
  list-style: none;
}
.trail-steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}
.trail-steps li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p-data);
}
.step-label { color: var(--p-text); white-space: nowrap; }
.step-detail,
.step-ms { font-family: var(--mono); font-size: 0.75rem; color: var(--p-dim); }
.step-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.answer { margin-top: 16px; }
.answer ul { margin-top: 6px; padding-left: 20px; }
.answer li + li { margin-top: 2px; }
.answer p + p,
.answer ul + p { margin-top: 12px; }

.replay-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--p-rule);
  color: var(--p-dim);
  font-size: 0.8125rem;
}
.replay-sources > span:first-child { margin-right: 4px; }

/* Items start hidden only once the script has taken over, so the full
   session is always readable without JavaScript. Opacity keeps each item's
   space reserved, so revealing it never shifts the layout. */
.replay.is-scripted [data-at] { transition: opacity 0.35s ease, transform 0.35s ease; }
.replay.is-scripted [data-at]:not(.is-shown) { opacity: 0; transform: translateY(4px); }

/* Ask legend */
.legend { display: grid; gap: 12px; margin-top: 12px; }
.legend li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.legend li > span:last-child { color: var(--p-text); }

/* Discuss map */
.say {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--p-s2);
}
.say-who { display: block; margin-bottom: 2px; color: var(--p-accent); font-size: 0.8125rem; font-weight: 700; }
.map { margin-top: 16px; }
.map-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.map-head h4 { font-size: 0.9375rem; }
.map-rows { margin-top: 8px; border-top: 1px solid var(--p-rule); }
.map-rows li {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--p-rule);
}
.map-rows .dot { margin-top: 0.45em; }
.map-rows .name { font-weight: 700; font-size: 0.875rem; }
.map-rows .meta { color: var(--p-dim); font-size: 0.8125rem; }
.map-rows .is-gap .meta { color: var(--p-gap); }
.map-rows .level { color: var(--p-dim); font-family: var(--mono); font-size: 0.75rem; }
.map-rows .is-current::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--p-accent);
}
.map-more { padding-top: 8px; color: var(--p-dim); font-size: 0.8125rem; }
.focus-next {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--p-gap-mark);
  background: var(--p-gap-dim);
}
.focus-next .label { color: var(--p-gap); font-size: 0.8125rem; }
.focus-next .name { font-weight: 700; }

/* Notes */
.notes { display: grid; gap: 8px; }
.notes li { padding: 8px 12px; border-left: 2px solid var(--p-rule); background: var(--p-s2); font-size: 0.875rem; }
.notes .exercise { display: block; color: var(--p-dim); font-size: 0.75rem; }
.first-pass {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 14px;
  padding: 10px 0;
  border-block: 1px solid var(--p-rule);
  font-size: 0.875rem;
}
.first-pass strong { color: var(--p-text); }
.flagged { display: inline-flex; align-items: center; gap: 6px; color: var(--p-gap); }
.flag {
  margin-top: 14px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--p-gap-mark);
}
.flag-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flag-top strong { font-size: 0.9375rem; }
.flag p { margin-top: 4px; }

/* Knowledge Gaps */
.gaps-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 6vw, 64px);
}
.gap-rows { border-top: 1px solid var(--p-rule); }
.gap-rows li { padding: 12px 0; border-bottom: 1px solid var(--p-rule); }
.gap-rows .q { font-weight: 700; font-size: 0.9375rem; }
.gap-rows .tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gaps-copy h3 { font-size: 1.25rem; }
.gaps-copy h3 + p { margin-top: 10px; color: var(--text-soft); }
.gaps-copy p + h3 { margin-top: 32px; }
.gap-word { color: var(--gap); }

/* A regulator's words, quoted plainly — not a badge. */
.assurance {
  max-width: 68ch;
  margin-top: clamp(28px, 4vw, 40px);
  padding-left: 16px;
  border-left: 2px solid var(--data-deep);
  color: var(--text-soft);
  font-size: 1.0625rem;
}
.assurance a { color: var(--data); }

/* Accuracy */
.accuracy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 64px);
}
.accuracy-item h3 { font-size: 1.375rem; }
.accuracy-item > p { margin-top: 12px; color: var(--text-soft); }
.accuracy-item .panel { margin-top: 22px; }
.differ { padding-left: 14px; border-left: 2px solid var(--p-accent); }
.differ strong { color: var(--p-accent); }

/* ─── Modes ────────────────────────────────────────────────────────── */

.modes {
  display: grid;
  gap: clamp(72px, 10vw, 120px);
  margin-top: clamp(48px, 7vw, 88px);
}
.mode {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.mode:nth-child(even) .mode-copy { order: 2; }
.mode-title { font-size: clamp(1.625rem, 2.8vw, 2.125rem); }
.mode-name { display: block; margin-bottom: 12px; color: var(--data); font-size: 1rem; letter-spacing: 0; }
.mode-copy > p { margin-top: 16px; color: var(--text-soft); }

/* ─── Speed ────────────────────────────────────────────────────────── */

.speed { padding-block: clamp(48px, 6vw, 72px); border-block: 1px solid var(--rule); }
.speed .wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.stat { line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat-num { font-size: clamp(2.75rem, 5vw, 4rem); }
.stat-unit { display: block; margin-top: 8px; color: var(--text-soft); font-size: clamp(1rem, 1.4vw, 1.125rem); font-weight: 400; letter-spacing: 0; }
.speed-copy p { max-width: 52ch; color: var(--text-soft); font-size: 1.125rem; }
.speed-copy p + p { margin-top: 12px; font-size: 0.9375rem; color: var(--dim); }

/* ─── Request access ───────────────────────────────────────────────── */

.request .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.facts { display: grid; gap: 22px; margin-top: 32px; }
.fact h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.fact p { margin-top: 4px; color: var(--text-soft); font-size: 0.9375rem; }

.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
}
.field .optional { color: var(--text-soft); font-weight: 400; }
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field-edge);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.45 var(--font);   /* 16px stops iOS zooming on focus */
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
  border-radius: 8px;
}
.form .btn { justify-self: start; min-width: 220px; }
.form-error {
  padding: 12px 14px;
  border: 1px solid var(--err-edge);
  border-radius: 8px;
  background: #2A1618;
  color: var(--text);
}

/* ─── Footer ───────────────────────────────────────────────────────── */

.site-footer { padding-block: 40px; border-top: 1px solid var(--rule); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.footer-tagline { margin-top: 6px; color: var(--text-soft); font-size: 0.875rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; }
.footer-links a { display: inline-block; padding-block: 10px; color: var(--text-soft); text-decoration: none; }
.nav-signin { padding-block: 10px; }   /* comfortable tap targets for text-only links */
.footer-links a:hover { color: var(--text); text-decoration: underline; }

/* ─── Thank-you page ───────────────────────────────────────────────── */

.page { display: flex; flex-direction: column; min-height: 100vh; }
.page main { flex: 1; }
.thanks { display: grid; place-items: center; padding-block: var(--section); }
.thanks-card { max-width: 520px; }
.thanks-card h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.thanks-card p { margin-top: 16px; color: var(--text-soft); }
.thanks-card .btn { margin-top: 28px; }

/* ─── Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .replay.is-scripted [data-at] { transition: none; transform: none; }
  .btn { transition: none; }
}

/* ─── Breakpoints ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero .wrap,
  .mode,
  .gaps-layout,
  .request .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 680px; }
  .mode:nth-child(even) .mode-copy { order: 0; }
  .mode-copy { max-width: 680px; }
  .nav-links { gap: 20px; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .btn { flex: none; min-height: 34px; padding: 0 12px; font-size: 0.8125rem; }
  .accuracy-grid { grid-template-columns: minmax(0, 1fr); }
  .speed .wrap { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .legend li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .nav-actions { gap: 14px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .replay-bar { flex-wrap: wrap; row-gap: 4px; }
  .replay-body,
  .panel { padding: 16px; }
  .trail-steps li { grid-template-columns: minmax(0, 1fr) auto; }
  .step-detail { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .map-rows .is-current::before { left: -16px; }
  .form .btn { justify-self: stretch; }
}

/* The smallest phones: the hero's own button already offers a demo. */
@media (max-width: 400px) {
  .nav-actions .btn { display: none; }
}