/* ---------------------------------------------------------------------------
   BAN — marketing site

   The tokens below are copied verbatim from the application's globals.css.
   That is deliberate: somebody who reads this page and then signs in to
   app.ban.ai should not feel they have moved between two products. When the
   application's palette changes, this file changes with it.

   No framework, no build step. A page of this size does not need one, and a
   marketing site that cannot be deployed without a toolchain is a marketing
   site that goes stale.
--------------------------------------------------------------------------- */

/* Inter, self-hosted. The application avoids a runtime dependency on Google
   Fonts and so does this: one 48 KB variable file from BAN's own origin,
   rather than a render-blocking request to a third party. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #f6f6f7;
  --surface: #ffffff;
  --surface-sunken: #f2f2f4;

  --line: #eaeaec;
  --line-strong: #dededf;

  --ink: #18181b;
  --ink-secondary: #61616b;
  --ink-muted: #9b9ba3;
  --ink-inverted: #ffffff;

  --action: #111113;
  --action-hover: #27272a;

  --accent: #2c5aa8;
  --accent-subtle: #eef2f9;
  --accent-line: #c9d7ea;

  --status-positive: #2b6b4f;
  --status-positive-bg: #ecf5f0;
  --status-pending: #8a6423;
  --status-pending-bg: #fbf5e9;

  --radius-card: 12px;
  --radius-control: 8px;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;

  --measure: 38rem;
  --gutter: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #101012;
    --surface: #18181b;
    --surface-sunken: #121214;

    --line: #26262a;
    --line-strong: #35353b;

    --ink: #f2f2f3;
    --ink-secondary: #a4a4ad;
    --ink-muted: #74747c;
    --ink-inverted: #101012;

    --action: #f2f2f3;
    --action-hover: #dcdcde;

    --accent: #8fb3e0;
    --accent-subtle: #1a2331;
    --accent-line: #2f4361;

    --status-positive: #7dbd9a;
    --status-positive-bg: #16251d;
    --status-pending: #d6b678;
    --status-pending-bg: #292117;
  }
}

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

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Measurements are set in tabular figures so distances and percentages can
   be compared down a column by eye — the same rule the application uses. */
.verbatim {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: clamp(3rem, 9vw, 5.5rem);
  border-top: 1px solid var(--line);
}

section:first-of-type {
  border-top: 0;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 6.2vw, 3.1rem);
  font-weight: 600;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

p {
  margin: 0;
  max-width: var(--measure);
}

.lede {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 2.1vw, 1.15rem);
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.section-intro {
  margin-top: 0.9rem;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
}

.wordmark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
}

.masthead nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.87rem;
}

.masthead nav a {
  color: var(--ink-secondary);
  text-decoration: none;
}

.masthead nav a:hover {
  color: var(--ink);
}

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

.hero {
  padding-block: clamp(3rem, 10vw, 6rem) clamp(3rem, 8vw, 4.5rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
  padding: 0.62rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.button-primary {
  background: var(--action);
  color: var(--ink-inverted);
}

.button-primary:hover {
  background: var(--action-hover);
}

.button-secondary {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--ink-muted);
}

/* --- Cards and grids ---------------------------------------------------- */

.grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 58rem) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.3rem;
}

.card p {
  margin-top: 0.5rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
}

.card .verbatim {
  display: block;
  margin-top: 0.85rem;
  color: var(--ink-muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

/* --- The workflow ------------------------------------------------------- */

.steps {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.35rem 1rem;
  padding: 1.15rem 1.3rem;
  border-top: 1px solid var(--line);
}

.steps li:first-child {
  border-top: 0;
}

.steps .num {
  grid-row: span 2;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding-top: 0.15rem;
}

.steps p {
  color: var(--ink-secondary);
  font-size: 0.92rem;
}

@media (max-width: 30rem) {
  .steps li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .steps .num {
    grid-row: auto;
    padding-top: 0;
  }
}

/* --- Honest limits ------------------------------------------------------ */

.limits {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

@media (min-width: 46rem) {
  .limits {
    grid-template-columns: repeat(2, 1fr);
  }
}

.limits li {
  border-left: 2px solid var(--line-strong);
  padding-left: 1.05rem;
}

.limits strong {
  display: block;
  font-weight: 600;
}

.limits p {
  margin-top: 0.35rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
}

/* --- Status ------------------------------------------------------------- */

.status {
  margin-top: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  padding: 1.05rem 1.3rem;
  border-top: 1px solid var(--line);
}

.status-row:first-child {
  border-top: 0;
}

.status-row p {
  flex: 1 1 18rem;
  color: var(--ink-secondary);
  font-size: 0.92rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 0.14rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-built {
  background: var(--status-positive-bg);
  color: var(--status-positive);
}

.badge-pending {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

/* --- Contact ------------------------------------------------------------ */

.contact .lede {
  margin-bottom: 0;
}

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

footer {
  border-top: 1px solid var(--line);
  padding-block: 2.2rem 3rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

footer a {
  color: var(--ink-secondary);
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}