/* NxtSeat — shared stylesheet.
   Layout: an asymmetric ledger. A narrow label rail on the left carries the
   section name; the wide right column carries the content. Collapses to one
   column under 820px.
   Palette and type are taken from the two React Native apps so the site, the
   customer app and the provider app read as one product: #4A7AFF is the
   customer app's accent, #64C0EE the provider app's, #1A1B25 the shared ground.
   Committed to a single dark look on purpose — both apps are dark, and a
   brand page that flips with the OS stops being the brand. */

:root {
  color-scheme: dark;

  --ink: #0f1016;
  --ground: #16171f;
  --surface: #1a1b25;
  --surface-2: #22232f;
  --line: #2c2e3b;
  --line-soft: #23242f;

  --fg: #eceff3;
  --fg-muted: #a4acb9;
  --fg-dim: #767d8f;

  --accent: #4a7aff;
  --accent-soft: #1e2a4d;
  --accent-2: #64c0ee;
  --flag: #ff7a63;
  --flag-bg: #2a1a18;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 66ch;
  --gutter: clamp(20px, 5vw, 64px);
  --rail: 168px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

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

/* ---------- shell ---------- */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-block: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-decoration: none;
  margin-right: auto;
}

.wordmark:hover { color: var(--fg); }
.wordmark svg { flex: none; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
}

.site-nav a {
  color: var(--fg-muted);
  text-decoration: none;
}

.site-nav a:hover { color: var(--fg); }

/* ---------- bands ---------- */

.band {
  border-bottom: 1px solid var(--line-soft);
}

.band > .wrap {
  display: grid;
  grid-template-columns: minmax(0, var(--rail)) minmax(0, 1fr);
  gap: 16px 40px;
  padding-block: clamp(40px, 6vw, 76px);
}

/* Without this a grid child takes its content's intrinsic width, and the
   620px message table below drags the whole page sideways on a phone. */
.band > .wrap > *,
.hero-grid > *,
.features > *,
.site-foot .wrap > * { min-width: 0; }

.band-full > .wrap { grid-template-columns: minmax(0, 1fr); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
  padding-top: 7px;
}

.rail-note {
  font-size: 13px;
  color: var(--fg-dim);
  margin: 10px 0 0;
  max-width: 22ch;
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.04;
}

h2 {
  font-size: clamp(25px, 3.4vw, 35px);
  font-weight: 650;
  line-height: 1.14;
}

h3 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 54ch;
}

.muted { color: var(--fg-muted); }
.small { font-size: 14px; }

/* ---------- hero ---------- */

.hero > .wrap { padding-block: clamp(48px, 8vw, 92px); }

.hero h1 { max-width: 20ch; }

.hero h1 em {
  font-style: normal;
  color: var(--accent-2);
}

.hero .lede { margin-top: 22px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.badge {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ---------- call transcript ---------- */

.transcript {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.transcript-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent);
}

.transcript-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px;
}

.turn { display: grid; gap: 4px; }

.turn dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.turn dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg);
}

.turn-ai dt { color: var(--accent-2); }

.turn-ai dd {
  border-left: 2px solid var(--accent-2);
  padding-left: 12px;
  color: var(--fg);
}

.sms-out {
  margin: 4px 18px 20px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 8px;
  padding: 13px 15px;
}

.sms-out .sms-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.sms-out p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- feature list ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}

.feature {
  background: var(--ground);
  padding: 22px 20px;
  display: grid;
  gap: 7px;
  align-content: start;
}

.feature h3 { color: var(--fg); }

.feature p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-muted);
  max-width: none;
}

/* ---------- message table ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 26px;
}

table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14.5px;
}

caption { text-align: left; }

th, td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}

thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

tbody th {
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}

td.sample {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
  min-width: 280px;
}

.freq { color: var(--fg-muted); white-space: nowrap; }

/* ---------- opt-in / consent ---------- */

.consent-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 26px;
  max-width: var(--measure);
}

.consent-box .consent-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 10px;
}

.checkbox-line {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
}

.checkbox-glyph {
  flex: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--fg-dim);
  border-radius: 3px;
  margin-top: 3px;
}

.steps {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: var(--measure);
  counter-reset: step;
}

/* Deliberately NOT a grid. The <strong> and the <span> inside each item must
   flow as one paragraph; as grid items the <span> was pushed onto a second row
   in the 26px number column and wrapped one word per line. */
.steps li {
  position: relative;
  padding-left: 39px;
  font-size: 15px;
  line-height: 1.6;
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.25em;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
}

.steps strong { color: var(--fg); font-weight: 600; }
.steps span { color: var(--fg-muted); }

kbd {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--fg);
}

/* ---------- callout ---------- */

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  max-width: var(--measure);
}

.callout h3 { margin-bottom: 8px; }

.callout p { font-size: 14.5px; color: var(--fg-muted); }

/* a placeholder the client must replace before this page goes live */
.todo {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--flag);
  background: var(--flag-bg);
  border: 1px dashed color-mix(in srgb, var(--flag) 55%, transparent);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- legal pages ---------- */

.legal > .wrap {
  display: block;
  padding-block: clamp(40px, 6vw, 72px);
  max-width: 780px;
  margin-inline: 0;
}

.legal h1 { font-size: clamp(30px, 4.6vw, 44px); }

.legal .stamp {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  margin: 14px 0 0;
}

.legal h2 {
  font-size: 21px;
  margin: 46px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

.legal h3 { margin: 26px 0 8px; }

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  max-width: 68ch;
}

.legal strong { color: var(--fg); font-weight: 600; }

.legal ul,
.legal ol { padding-left: 22px; margin: 0 0 1em; }

.legal li { margin-bottom: 0.5em; }

.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 32px 0 0;
}

.toc h2 {
  font-size: 12px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 0;
  margin: 0 0 10px;
  padding: 0;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 30px;
}

.toc li { font-size: 14.5px; margin-bottom: 4px; break-inside: avoid; }

/* ---------- footer ---------- */

.site-foot {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
}

.site-foot .wrap {
  padding-block: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px 40px;
}

.site-foot h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 12px;
  letter-spacing: 0.12em;
}

.site-foot p,
.site-foot li {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0 0 6px;
  max-width: 34ch;
}

.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot a { color: var(--fg-muted); text-decoration: none; }
.site-foot a:hover { color: var(--fg); text-decoration: underline; }

.legal-name {
  color: var(--fg);
  font-weight: 600;
}

.copyright {
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--fg-dim);
}

.copyright .wrap {
  display: block;
  padding-block: 18px;
}

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 580px) {
  .features { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .band > .wrap { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .eyebrow { padding-top: 0; }
  .rail-note { display: none; }
  .toc ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}