/* Request Access — a three-state modal: email, then qualify, then thanks.
   Ported from the pitch site's terminal-styled version; the terminal chrome is
   gone because nothing else on this site wears it, and the eyebrow + card do the
   same job in our own type. Markup is built by src/request-access.js. */

.ra-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: flex-start; justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
}
.ra-modal.is-open { display: flex; }

.ra-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  animation: ra-fade var(--dur-mid) var(--ease-niro) both;
}

.ra-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 500px; margin: auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-panel);
  animation: ra-rise var(--dur-slow) var(--ease-niro) both;
}

.ra-x {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  width: 32px; height: 32px; line-height: 1;
  font-size: var(--size-heading);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-niro), border-color var(--dur-fast) var(--ease-niro);
}
.ra-x:hover { color: var(--text-primary); border-color: var(--border-strong); }
.ra-x:focus-visible { outline: 2px solid var(--a0i); outline-offset: 2px; }

/* One card, three panes: the card carries the state class, each pane owns its
   own reveal so a step change reads as a step and not as a repaint. */
.ra-pane { display: none; }
.ra-card.ra-1 .ra-pane-1,
.ra-card.ra-2 .ra-pane-2,
.ra-card.ra-3 .ra-pane-3 {
  display: block;
  animation: ra-rise var(--dur-mid) var(--ease-niro) both;
}

.ra-eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--a0);
  margin-bottom: var(--space-4);
}
.ra-eyebrow i {
  width: 7px; height: 7px; border-radius: var(--radius-circle);
  background: var(--a0i); flex: 0 0 auto;
}

.ra-card h2 {
  font-size: 28px; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: var(--leading-tight);
  color: var(--text-primary);
  padding-right: 40px;
}
.ra-sub {
  font: var(--type-body); color: var(--text-muted);
  margin-top: var(--space-3); text-wrap: pretty;
}
.ra-note {
  font-family: var(--font-mono); font-size: var(--size-micro);
  color: var(--text-faint); line-height: var(--leading-body);
  margin-top: var(--space-4);
}

/* ── Fields ── */
.ra-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.ra-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ra-field label,
.ra-field .ra-label {
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.ra-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.ra-form input,
.ra-form textarea {
  width: 100%; height: var(--control-h-md);
  padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--size-body);
  color: var(--text-primary);
  background: var(--surface-wash);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-niro), box-shadow var(--dur-fast) var(--ease-niro);
}
.ra-form textarea {
  height: auto; min-height: 76px; padding: var(--space-3) var(--space-4);
  line-height: var(--leading-ui); resize: vertical;
}
.ra-form input::placeholder,
.ra-form textarea::placeholder { color: var(--text-faint); }
.ra-form input:focus,
.ra-form textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ── The dropdown ──────────────────────────────────────────────────────────
   A listbox, not a <select>. The native popup is drawn by the platform: an
   NSMenu on macOS that follows system appearance and ignores these tokens, and
   something different again on Windows, Safari and Android. This renders in the
   page, so every visitor sees the same control in the site's own theme. */
.ra-select { position: relative; }

.ra-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; height: var(--control-h-md);
  padding: 0 var(--space-3) 0 var(--space-4);
  font-family: var(--font-sans); font-size: var(--size-body);
  text-align: left; cursor: pointer;
  color: var(--text-faint);
  background: var(--surface-wash);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-niro), box-shadow var(--dur-fast) var(--ease-niro);
}
.ra-trigger.is-set { color: var(--text-primary); }
.ra-trigger:hover { border-color: var(--border-strong); }
.ra-trigger:focus-visible,
.ra-select.is-open .ra-trigger {
  border-color: var(--accent); box-shadow: var(--focus-ring); outline: none;
}
.ra-select.is-missing .ra-trigger { border-color: var(--status-error); }

.ra-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-chev {
  flex: 0 0 auto; color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-niro);
}
.ra-select.is-open .ra-chev { transform: rotate(180deg); }

.ra-list {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 236px; overflow-y: auto;
  margin: 0; padding: var(--space-2); list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-panel);
  animation: ra-rise var(--dur-fast) var(--ease-niro) both;
}
/* a list with no room below it opens upward instead of pushing the modal into
   a scroll; which way round is measured at open time, not guessed per field */
.ra-list.is-up { top: auto; bottom: calc(100% + 6px); }

.ra-option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--size-body); line-height: var(--leading-ui);
  color: var(--text-primary); cursor: pointer;
}
.ra-option.is-active { background: var(--surface-wash); }
.ra-option[aria-selected="true"] { color: var(--accent); }

.ra-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; margin-top: var(--space-1);
  border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-on-accent);
  font-size: var(--size-body-lg); font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-niro), transform var(--dur-fast) var(--ease-niro);
}
.ra-send:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-lift); }
.ra-send[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }

.ra-skip {
  display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-1);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--size-caption);
  color: var(--text-faint); text-align: center;
  transition: color var(--dur-fast) var(--ease-niro);
}
.ra-skip:hover { color: var(--text-muted); text-decoration: underline; }

.ra-status {
  min-height: 16px; margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: var(--size-micro);
  line-height: var(--leading-body);
}
.ra-status.is-err { color: var(--status-error); }

/* ── Thanks ── */
.ra-pane-3 { text-align: center; }
.ra-check { width: 56px; height: 56px; margin: 0 auto var(--space-5); }
.ra-check svg { width: 100%; height: 100%; fill: none; }
.ra-check circle { stroke: var(--a0i); stroke-width: 2.5; opacity: 0.3; }
.ra-check path {
  stroke: var(--a0i); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: ra-draw 0.5s 0.15s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.ra-pane-3 h2 { padding-right: 0; }
.ra-links {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  justify-content: center;
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.ra-links a {
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-niro);
}
.ra-links a:hover { color: var(--accent); }

@keyframes ra-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ra-rise {
  from { opacity: 0; transform: translateY(14px) }
  to { opacity: 1; transform: none }
}
@keyframes ra-draw { to { stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce) {
  .ra-scrim, .ra-card, .ra-card.ra-1 .ra-pane-1, .ra-card.ra-2 .ra-pane-2, .ra-card.ra-3 .ra-pane-3 {
    animation-duration: 0.01ms;
  }
  .ra-check path { animation: none; stroke-dashoffset: 0; }
  .ra-send:hover { transform: none; }
}

@media (max-width: 520px) {
  .ra-row { grid-template-columns: 1fr; }
  .ra-card { padding: var(--space-6) var(--space-5) var(--space-5); }
  .ra-card h2 { font-size: 24px; }
}