/* ═══════════════════════════════════════════════════════════════════════════
   ephemerals.dev — the marketing site.

   Built on the application's own Nocturne palette (frontend/src/design-system/
   nocturne.css) rather than a look of its own, so the page somebody lands on
   and the product they sign in to are recognisably the same thing. The tokens
   are copied, not imported: this site has no build step and no dependency on
   the Angular bundle, and a marketing page that cannot deploy without the app
   is a marketing page that goes stale.

   Two deliberate departures from the app's theme, both because a poster is not
   an application frame:

     · the ground is a step darker (#07080a — the app's terminal black) so the
       panels sitting on it read as lit objects;
     · headings are set at 112% of Archivo's width axis, a width the product's
       UI never uses. Same family, louder voice.

   Dark only, on purpose. The application is dark only — Nocturne's comment
   leaves the seam for a light theme but nothing hangs on it yet — and shipping
   a light marketing page would promise a product that does not exist.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — ground → foreground —————————————————————————————————————————————— */
  --bg: #07080a;
  --bg-lift: #0a0b0e;
  --surface: #101218;
  --surface-2: #161922;
  --text: #e9ebf0;

  /* Neutrals carry a slight blue bias, inherited from the app: a true grey on
     a near-black ground reads as unfinished. */
  --muted: #969eae;
  --dim: #79828f;

  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.145);

  /* The one chromatic move on the page. Everything else is neutral or a
     status, and statuses are not branding. */
  --accent: #ff5c36;
  --accent-hi: #ff7452;
  --accent-soft: #ff9c80;

  --live: #34d399;
  --live-soft: #6ee7b7;
  --pending: #f2b544;
  --pending-soft: #f6c96f;
  --add: #4ade80;
  --del: #f4536b;

  --radius: 10px;
  --radius-sm: 6px;

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --w: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── base ───────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise cover the top of an anchored section. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A fine grain over the whole page. On a near-black ground a flat fill reads
   as a void; this gives it a surface without anybody noticing why. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 6.4vw, 74px);
  line-height: 0.98;
  letter-spacing: -0.038em;
}

h2 {
  font-size: clamp(28px, 3.7vw, 45px);
}

h3 {
  font-size: 18px;
  font-stretch: 100%;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

p {
  margin: 0;
}

a {
  color: var(--accent-soft);
  text-underline-offset: 3px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent-soft);
}

em {
  font-style: normal;
  color: var(--text);
}

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

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'zero' 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: #170804;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.skip:focus {
  left: 8px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.body-lg {
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 150ms var(--ease),
    border-color 150ms var(--ease),
    color 150ms var(--ease),
    transform 150ms var(--ease);
}

.btn:active {
  transform: translateY(0.5px);
}

.btn-lg {
  padding: 13px 22px;
  font-size: 15px;
}

/* Near-black on coral rather than white: at this chroma the dark pairing is
   both the higher contrast and the more expensive-looking one. Straight from
   the application's own primary button. */
.btn-primary {
  background: var(--accent);
  color: #170804;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
  background: var(--accent-hi);
}

.btn-line {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-line:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-ghost {
  color: var(--muted);
}
.btn-ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

/* ── brand ──────────────────────────────────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  color: #170804;
  background: linear-gradient(140deg, #ff8a5f, var(--accent) 55%, #e03d16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 4px 18px -4px rgba(255, 92, 54, 0.5);
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.025em;
}

/* ── nav ────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--w);
  margin: 0 auto;
  padding: 14px var(--pad);
}

.nav-links {
  display: flex;
  gap: 26px;
  margin-inline: auto;
  font-size: 14px;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms var(--ease);
}
.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* On the 404 the brand is the only thing to the left of the buttons, so there
   is no centred link list creating the free space that pushes them right. */
.nav-in > .nav-cta:nth-child(2) {
  margin-left: auto;
}

/* The 404 has one short block on it and would otherwise sit in the top third
   of a tall screen with nothing under it. */
.page-404 {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 58px);
}

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* The schematic rules and the coral bloom. Both belong to the hero alone —
   repeated down the page they would stop being atmosphere and start being
   wallpaper. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.045) 0 1px,
    transparent 1px 88px
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent);
}

.hero::after {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(620px 320px at 22% 40%, rgba(255, 92, 54, 0.16), transparent 70%),
    radial-gradient(520px 300px at 78% 20%, rgba(84, 110, 255, 0.07), transparent 70%);
}

.hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 116px) var(--pad) clamp(64px, 9vw, 112px);
}

.hero-copy .eyebrow {
  display: block;
  margin-bottom: 22px;
}

.hero-copy h1 {
  margin-bottom: 24px;
}

/* The headline is written as two lines and reads best that way, but the break
   is a desktop luxury: forced at 360px it puts "Run ten agents at once." past
   the right edge. Below the breakpoint the balancer decides instead. */
.br-lg {
  display: none;
}

@media (min-width: 761px) {
  .br-lg {
    display: inline;
  }
}

.hero-copy .lede {
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

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

.hero-note {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.01em;
}

/* ── the fleet board ────────────────────────────────────────────────────── */

.board {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.board-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  font-size: 11.5px;
}

.board-org {
  color: var(--muted);
}

.board-meta {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

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

.env {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 150ms var(--ease);
}
.env:last-child {
  border-bottom: 0;
}
.env:hover {
  background: rgba(255, 255, 255, 0.02);
}

.env-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.branch {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.env-line {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--dim);
  min-height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
}

/* A one-shot typewriter, not a loop: the board is above the fold, so it plays
   once as the page settles. A looping one would still be tapping its foot at
   the bottom of the page. */
.type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  border-right: 1px solid transparent;
  animation:
    typing 1.1s steps(var(--n)) var(--delay, 0.15s) forwards,
    caret 900ms steps(1) 6 var(--delay, 0.15s);
}

/* The three lines on the board, each with its own length and its own beat.
   Inline styles would have been the obvious home for these two numbers, and
   would have cost the page its `style-src 'self'`. */
.type-1 {
  --n: 31;
  --delay: 0.15s;
}
.type-2 {
  --n: 32;
  --delay: 0.75s;
}
.type-3 {
  --n: 19;
  --delay: 1.35s;
}

@keyframes typing {
  to {
    width: calc(var(--n) * 1ch);
  }
}

@keyframes caret {
  0%,
  100% {
    border-color: var(--accent);
  }
  50% {
    border-color: transparent;
  }
}

.env-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.env-foot .dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.env-cost {
  margin-left: auto;
  color: var(--muted);
}

/* ── chips ──────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 9px 3px 8px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.chip::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.chip-live {
  background: rgba(52, 211, 153, 0.11);
  border-color: rgba(52, 211, 153, 0.25);
  color: var(--live-soft);
}
.chip-live::before {
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}

.chip-pending {
  background: rgba(242, 181, 68, 0.11);
  border-color: rgba(242, 181, 68, 0.25);
  color: var(--pending-soft);
}
.chip-pending::before {
  background: var(--pending);
  animation: pulse 1.8s var(--ease) infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 181, 68, 0.45);
  }
  60% {
    box-shadow: 0 0 0 5px transparent;
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(255, 92, 54, 0.32);
  background: rgba(255, 92, 54, 0.08);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── fact strip ─────────────────────────────────────────────────────────── */

.facts {
  border-bottom: 1px solid var(--line);
  background: var(--bg-lift);
}

.facts-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--w);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.fact {
  padding: 26px 22px 28px;
  border-left: 1px solid var(--line);
}
.fact:first-child {
  border-left: 0;
  padding-left: 0;
}

.fact-k {
  font-size: 11.5px;
  color: var(--accent-soft);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.fact-v {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── bands ──────────────────────────────────────────────────────────────── */

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

.band-in {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--pad);
}

/* The label in the left margin says what kind of claim the section is making.
   It is not a step number: these are capabilities, not a sequence, and
   numbering them would promise an order that does not exist. */
.gutter {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 10px;
}

.band-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.band-body.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.band-body.split > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
  color: var(--muted);
  max-width: 56ch;
}

.ticks li {
  position: relative;
  padding-left: 24px;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 1px;
  background: var(--accent);
}

/* ── tiles ──────────────────────────────────────────────────────────────── */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.tile,
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 45%);
}

.tile p,
.card p {
  font-size: 14px;
  line-height: 1.58;
  color: var(--muted);
}

.tile .tile-k,
.card .tile-k {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.feature h3 {
  font-size: 20px;
}

/* The two columns hold different amounts of prose. Pushing each visual to the
   bottom of its column is what lines the two mocks up with each other. */
.duo .feature > .pane,
.duo .feature > .browser {
  margin-top: auto;
}

/* ── terminal-ish panes ─────────────────────────────────────────────────── */

.pane {
  margin: 6px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #06070a;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.pane-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 11px;
  color: var(--muted);
}

.pane-state {
  color: var(--dim);
}

.pane-body {
  padding: 14px 15px;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--text);
  overflow-x: auto;
}

.pane-body p {
  white-space: pre;
}

.c-dim {
  color: var(--dim);
}

.c-live {
  color: var(--live-soft);
}

.diff .add {
  color: var(--add);
}

.diff .del {
  color: var(--del);
}

.caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ── browser mock ───────────────────────────────────────────────────────── */

.browser {
  margin-top: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
}

.browser-bar .light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.browser-bar .url {
  flex: 1;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 10.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  font-size: 11px;
}

/* ── security ───────────────────────────────────────────────────────────── */

.security {
  position: relative;
  background: var(--bg-lift);
  overflow: hidden;
}

.security::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0 1px,
    transparent 1px 88px
  );
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 72%);
}

.security .band-in {
  position: relative;
  z-index: 1;
}

/* The request path, as a wire. Nodes are the places a decision is made; the
   last one is the machine, and it is the only one wearing the accent because
   "nothing can dial in" is the claim the whole section rests on. */
.chain {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.28);
  overflow-x: auto;
}

.node {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.node-end {
  border-color: rgba(255, 92, 54, 0.42);
  background: rgba(255, 92, 54, 0.09);
  color: var(--accent-soft);
}

.wire {
  flex: 1 1 20px;
  min-width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), rgba(255, 92, 54, 0.4));
}

.pillars {
  margin-top: 12px;
}

.pillars .tile {
  gap: 12px;
  padding: 24px;
}

.pillars h3 {
  font-size: 19px;
}

/* ── coming soon ────────────────────────────────────────────────────────── */

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

.soon-in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  max-width: var(--w);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 76px) var(--pad);
}

.soon .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.soon h2 {
  margin-bottom: 16px;
}

.soon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soon-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--text);
}

/* ── pricing ────────────────────────────────────────────────────────────── */

.pricing {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 10px;
}

.seat {
  justify-content: flex-start;
  gap: 14px;
}

.rates {
  gap: 14px;
}

.card .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.card .price span {
  font-size: 46px;
  color: var(--text);
  margin-right: 6px;
}

.rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rate-table th,
.rate-table td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

.rate-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 0;
}

.rate-table tbody th {
  color: var(--text);
}

.rate-table td {
  color: var(--muted);
}

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

.rate-table .num {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.card .rate-note {
  font-size: 12.5px;
  color: var(--dim);
}

/* ── cta ────────────────────────────────────────────────────────────────── */

.cta {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.cta::after {
  content: '';
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 460px;
  pointer-events: none;
  background: radial-gradient(560px 260px at 50% 100%, rgba(255, 92, 54, 0.15), transparent 70%);
}

.cta-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) var(--pad);
  text-align: center;
}

.cta .body-lg {
  max-width: 48ch;
}

.cta .hero-note {
  margin-top: -4px;
}

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot {
  background: var(--bg-lift);
}

.foot-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  max-width: var(--w);
  margin: 0 auto;
  padding: 30px var(--pad) 44px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13.5px;
}

.foot-links a {
  color: var(--muted);
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--text);
}

.foot-note {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--dim);
}

/* ── reveal ─────────────────────────────────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--ease),
    transform 620ms var(--ease);
}

/* ── responsive ─────────────────────────────────────────────────────────── */

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

  .hero-copy .lede {
    max-width: 56ch;
  }

  .band-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .gutter {
    padding-top: 0;
  }

  .band-body.split,
  .pricing,
  .soon-in {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .trio > :last-child:nth-child(3) {
    grid-column: span 2;
  }

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

  .fact {
    padding: 22px 20px;
    border-left: 1px solid var(--line);
  }
  .fact:first-child,
  .fact:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    margin-left: auto;
  }

  .duo,
  .trio,
  .facts-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .fact {
    border-left: 0;
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }
  .fact:first-child {
    border-top: 0;
  }

  /* The wire turns a corner rather than disappearing: the path is the point,
     and five unconnected pills say nothing. */
  .chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .wire {
    flex: none;
    width: 1px;
    height: 14px;
    margin-left: 20px;
    background: linear-gradient(180deg, var(--line-strong), rgba(255, 92, 54, 0.4));
  }

  .foot-note {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 460px) {
  .nav-cta .btn-ghost {
    display: none;
  }
}

/* ── motion ─────────────────────────────────────────────────────────────── */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The typewriter's whole job is width, so stopping the animation would leave
     the line at zero. It has to be handed its final state instead. */
  .type {
    width: auto;
    border-right: 0;
  }

  .caret {
    opacity: 1;
  }
}

/* ── print ──────────────────────────────────────────────────────────────── */

@media print {
  body::after,
  .hero::before,
  .hero::after,
  .security::before,
  .cta::after {
    display: none;
  }
}