/* Aura Cloud — marketing site
   Dark-first, with a light theme for users who prefer it. */

:root {
  --bg:        #080b16;
  --bg-alt:    #0c1120;
  --panel:     #111832;
  --panel-2:   #151d3b;
  --line:      #222c50;
  --line-soft: #1a2340;
  --ink:       #eef2ff;
  --ink-mid:   #b6c0e0;
  --ink-dim:   #8892b5;
  --accent:    #7dd3fc;
  --accent-2:  #818cf8;
  --ok:        #4ade80;
  --warn:      #fbbf24;
  --bad:       #fb7185;
  --radius:    14px;
  --radius-lg: 20px;
  --wrap:      1140px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #ffffff;
    --bg-alt:    #f5f7fd;
    --panel:     #ffffff;
    --panel-2:   #f7f9ff;
    --line:      #dde3f4;
    --line-soft: #e8edf9;
    --ink:       #101528;
    --ink-mid:   #414c6e;
    --ink-dim:   #64708f;
    --accent:    #0284c7;
    --accent-2:  #4f46e5;
    --ok:        #15803d;
    --warn:      #a16207;
    --bad:       #be123c;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: 620px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #04121f; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

/* ── nav ───────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-sub { color: var(--ink-dim); font-weight: 500; margin-left: 5px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-mid); font-size: .95rem; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 860px) {
  .nav-links a:not(.btn) { display: none; }
}

/* ── buttons ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #061024; font-weight: 650; font-size: .96rem;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  box-shadow: 0 4px 20px -6px color-mix(in srgb, var(--accent-2) 60%, transparent);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.btn:active { transform: none; }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }
.btn.full { width: 100%; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
/* Filled buttons need light text on the gradient in light mode -- but must not
   capture .btn-ghost, which has equal specificity and would lose to a bare .btn. */
@media (prefers-color-scheme: light) { .btn:not(.btn-ghost) { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* ── hero ──────────────────────────────── */
.hero { position: relative; padding: 96px 0 88px; overflow: hidden; }
.glow {
  position: absolute; inset: -30% 0 auto 50%; transform: translateX(-50%);
  width: 1000px; height: 640px; pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 72%),
    radial-gradient(closest-side at 62% 46%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  filter: blur(14px);
  opacity: .85;
}
@media (prefers-color-scheme: light) { .glow { opacity: .32; } }

.hero-inner { position: relative; text-align: center; }

.eyebrow {
  display: inline-block; margin: 0 0 22px;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  color: var(--ink-mid); font-size: .84rem; letter-spacing: .01em;
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(2.2rem, 6.2vw, 4rem);
  line-height: 1.08; letter-spacing: -.035em; font-weight: 760;
}
.grad {
  background: linear-gradient(105deg, var(--accent), var(--accent-2) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede {
  max-width: 660px; margin: 0 auto 34px;
  font-size: clamp(1.04rem, 2.1vw, 1.22rem); color: var(--ink-mid);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.stat-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 52px;
  margin: 62px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line-soft);
}
.stat-row div { text-align: center; }
.stat-row dt { color: var(--ink-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; }
.stat-row dd { margin: 4px 0 0; font-size: 1.28rem; font-weight: 680; letter-spacing: -.02em; }

/* ── sections ──────────────────────────── */
.section { padding: 84px 0; }
.section.alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.h2 {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.18; letter-spacing: -.028em; font-weight: 720;
}
.h2.center, .sub.center { text-align: center; }
.sub { max-width: 620px; margin: 0 auto 48px; color: var(--ink-mid); }
.section p { color: var(--ink-mid); }
.section .split p:first-of-type { color: var(--ink); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ── cards ─────────────────────────────── */
.cards { display: grid; gap: 22px; }
.cards.two   { grid-template-columns: repeat(2, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .cards.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cards.two, .cards.three { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.card h3 { margin: 0 0 10px; font-size: 1.1rem; letter-spacing: -.018em; font-weight: 680; }
.card p  { margin: 0 0 14px; font-size: .97rem; }
.card p:last-child { margin-bottom: 0; }

.card-num {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .12em;
  color: var(--accent);
}
.ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: 11px; font-size: 1.15rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent));
  color: var(--accent);
}
.card.who h3 { color: var(--ink); }

/* ── ticks ─────────────────────────────── */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li {
  position: relative; padding-left: 26px;
  color: var(--ink-mid); font-size: .96rem;
}
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-weight: 700;
}
.ticks.lg { gap: 15px; margin-top: 22px; }
.ticks.lg li { font-size: 1rem; }
.ticks.lg strong { color: var(--ink); font-weight: 640; }

/* ── code block ────────────────────────── */
.code {
  margin: 0; padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono); font-size: .85rem; line-height: 1.75;
  color: var(--ink);
}
.code .c  { color: var(--ink-dim); }
.code .fn { color: var(--accent); }
.code .p  { color: var(--accent-2); }
@media (prefers-color-scheme: light) { .code { background: var(--panel-2); } }

/* ── drift card ────────────────────────── */
.drift-card {
  margin: 0; padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.55);
}
.drift-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.drift-when { color: var(--ink-dim); font-size: .82rem; font-family: var(--mono); }
.drift-title { margin: 16px 0 14px !important; font-weight: 650; color: var(--ink) !important; }

.pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 650; letter-spacing: .02em;
}
.pill-warn   { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.pill-accent { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent); }

.diff { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.diff li {
  padding: 8px 12px; border-radius: 8px;
  font-family: var(--mono); font-size: .82rem; overflow-x: auto;
}
.diff code { background: none; }
.diff .del { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.diff .add { background: color-mix(in srgb, var(--ok) 13%, transparent);  color: var(--ok); }
.diff .del code::before { content: "− "; }
.diff .add code::before { content: "+ "; }

.drift-foot {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
  color: var(--ink-dim); font-size: .86rem;
}
.drift-foot strong { color: var(--ink-mid); font-weight: 620; }
.drift-foot .fail { color: var(--bad); }

/* ── quote block ───────────────────────── */
.quote-block {
  padding: 30px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.quote-block blockquote { margin: 0 0 20px; }
.quote-block p { margin: 0; font-size: 1.06rem; color: var(--ink) !important; }

/* ── pricing ───────────────────────────── */
.price-grid { align-items: start; }
.card.price { display: flex; flex-direction: column; }
.card.price .ticks { margin-bottom: 24px; }
.card.price .btn { margin-top: auto; }
.card.price.featured {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--panel-2);
  box-shadow: 0 20px 60px -34px color-mix(in srgb, var(--accent-2) 75%, transparent);
}
.card.price.featured .pill { margin-bottom: 14px; }
.amount {
  margin: 6px 0 12px !important;
  font-size: 2.15rem; font-weight: 730; letter-spacing: -.035em;
  color: var(--ink) !important;
}
.amount span { margin-left: 7px; font-size: .9rem; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.price-note { min-height: 3.4em; }

/* ── form ──────────────────────────────── */
.form {
  padding: 32px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 7px; font-size: .92rem; font-weight: 600; }
.field .opt { color: var(--ink-dim); font-weight: 400; }

input, select, textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit; font-size: .98rem;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-dim); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
input[aria-invalid="true"] { border-color: var(--bad); }
@media (prefers-color-scheme: light) { input, select, textarea { background: #fff; } }

.form-status { margin: 16px 0 0; font-size: .93rem; min-height: 1.4em; }
.form-status.ok  { color: var(--ok); }
.form-status.err { color: var(--bad); }
.form-fine { margin: 14px 0 0 !important; font-size: .84rem; color: var(--ink-dim) !important; }

/* ── footer ────────────────────────────── */
.footer { padding: 56px 0 34px; background: var(--bg-alt); border-top: 1px solid var(--line-soft); }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 30px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 30px; border-bottom: 1px solid var(--line-soft);
}
.footer-brand p { margin: 10px 0 0; color: var(--ink-dim); font-size: .93rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--ink-mid); font-size: .93rem; }

.footer-fine {
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  justify-content: space-between; padding-top: 26px;
}
.footer-fine p { margin: 0; color: var(--ink-dim); font-size: .82rem; max-width: 720px; }

/* ── TEMPORARILY HIDDEN: waitlist ──────────────────────────────────────────
   The waitlist section and every CTA pointing at it are hidden for now.
   Delete this whole block to bring them back -- the markup is untouched in
   index.html and the /api/waitlist Function is still deployed and live.

   Caveat: this hides, it does not remove. The section's text and the form
   fields are still in the page source and readable by anyone who views it.
   If the content itself must not be visible at all, delete the markup from
   index.html instead of relying on this.
   ────────────────────────────────────────────────────────────────────────── */
#waitlist,
.nav-links a[href="#waitlist"],
.cta-row a[href="#waitlist"] { display: none !important; }

/* The hidden CTA was the hero's primary (filled) button, which would leave the
   hero leading with a lone outlined one. Promote the survivor to the filled
   treatment; this reverts together with the rules above. */
.hero .cta-row a[href="#how"],
.hero .cta-row a[href="#how"]:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #061024;
  border-color: transparent;
  box-shadow: 0 4px 20px -6px color-mix(in srgb, var(--accent-2) 60%, transparent);
}
@media (prefers-color-scheme: light) {
  .hero .cta-row a[href="#how"],
  .hero .cta-row a[href="#how"]:hover { color: #fff; }
}

/* ── print ─────────────────────────────── */
@media print {
  .nav, .glow, .cta-row, .form { display: none; }
  body { background: #fff; color: #000; }
}