/* jsonata.ai — page styles.
   Design tokens first (extracted from the brand design system), then the
   page and component rules. Edit freely — this is plain CSS, nothing is
   generated. */

:root{
/* Brand base — sampled directly from the jsonata.ai wordmark */
--ink-900:#071327; /* wordmark ink, primary dark surface */
--ink-800:#0d1c33;
--ink-700:#16273f;
--ink-600:#22344d;
--violet-600:#4424d5; /* gradient start (bottom-left of the mark) */
--violet-500:#5a3fdd;
--blue-500:#3b6dd0;  /* gradient midpoint */
--cyan-500:#3291ca;
--teal-500:#23bdbe;
--mint-500:#03e8ab;  /* gradient end (top-right of the mark) */
--mint-400:#3aefc0;

/* Neutrals */
--white:#ffffff;
--grey-050:#f6f8fb;
--grey-100:#eef1f6;
--grey-200:#dfe4ec;
--grey-300:#c6cddb;
--grey-400:#9aa4b8;
--grey-500:#6e7a91;
--grey-600:#4c576c;

/* Semantic */
--success-500:#03c98f;
--warning-500:#f0a11a;
--danger-500:#e2445c;
--info-500:#3b6dd0;

/* Brand gradient — always violet → mint, on the same 135deg axis as the mark */
--gradient-brand:linear-gradient(135deg,var(--violet-600) 0%,var(--blue-500) 38%,var(--teal-500) 70%,var(--mint-500) 100%);
--gradient-brand-soft:linear-gradient(135deg,rgba(68,36,213,.14) 0%,rgba(3,232,171,.14) 100%); /* @kind color */
--gradient-ink:linear-gradient(180deg,#0a1a33 0%,var(--ink-900) 100%);

/* Semantic aliases — prefer these in components */
--bg-page:var(--white);
--bg-page-dark:var(--ink-900);
--surface-card:var(--white);
--surface-sunken:var(--grey-050);
--surface-inverse:var(--ink-800);
--surface-code:var(--ink-900);

--text-heading:var(--ink-900);
--text-body:var(--grey-600);
--text-muted:var(--grey-500);
--text-on-dark:var(--white);
--text-on-dark-muted:rgba(255,255,255,.66);
--text-link:var(--violet-600);
--text-link-hover:var(--blue-500);
--text-accent:var(--mint-500);

--border-subtle:var(--grey-200);
--border-strong:var(--grey-300);
--border-on-dark:rgba(255,255,255,.14);

--focus-ring:rgba(68,36,213,.45);
}

:root{
--font-display:"Poppins","Poppins Fallback",system-ui,sans-serif; /* wordmark voice: headings, logotype */
--font-body:"Public Sans",system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;

/* Display scale — Poppins, tight tracking, headline case */
--text-display-xl:clamp(44px,6vw,76px);
--text-display-lg:clamp(36px,4.4vw,56px);
--text-display-md:36px;
--text-display-sm:28px;

/* UI + body scale — Public Sans */
--text-xl:22px;
--text-lg:19px;
--text-md:17px;
--text-sm:15px;
--text-xs:13px;
--text-2xs:11px;

--leading-tight:1.04;
--leading-snug:1.2;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-tight:-0.025em;
--tracking-snug:-0.012em;
--tracking-normal:0;
--tracking-wide:0.08em;  /* eyebrows / overline labels */
--tracking-wider:0.16em;

/* Semantic type aliases */
--type-h1-size:var(--text-display-xl);
--type-h1-weight:var(--weight-semibold);
--type-h1-leading:var(--leading-tight);
--type-h1-tracking:var(--tracking-tight);
--type-body-size:var(--text-md);
--type-body-leading:var(--leading-relaxed);
--type-eyebrow-size:var(--text-xs);
--type-eyebrow-tracking:var(--tracking-wide);
}

:root{
/* 4px base step */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

/* Layout */
--container-max:1160px;
--container-narrow:720px;
--gutter:24px;
--gutter-lg:48px;
--section-y:96px;
--section-y-lg:128px;

/* Component radii */
--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:16px;
--radius-xl:24px;
--radius-pill:999px;

/* Control sizing */
--control-h-sm:34px;
--control-h-md:44px;
--control-h-lg:54px;
}

:root{
--shadow-xs:0 1px 2px rgba(7,19,39,.06);
--shadow-sm:0 2px 6px rgba(7,19,39,.07);
--shadow-md:0 8px 24px -6px rgba(7,19,39,.14);
--shadow-lg:0 24px 60px -18px rgba(7,19,39,.24);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--shadow-glow-brand:0 12px 32px -10px rgba(68,36,213,.45);
--shadow-glow-mint:0 12px 32px -10px rgba(3,232,171,.4);

--border-hairline:1px solid var(--border-subtle);
--border-width:1px;

--blur-glass:14px;
--glass-light:rgba(255,255,255,.72);
--glass-dark:rgba(7,19,39,.6);

/* Ambient background wash used behind hero / dark sections */
--wash-brand:radial-gradient(60% 70% at 12% 88%,rgba(68,36,213,.55) 0%,transparent 62%),radial-gradient(52% 62% at 88% 10%,rgba(3,232,171,.42) 0%,transparent 60%); /* @kind color */
--grid-lines:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); /* @kind color */
--grid-size:56px 56px;
}

:root{
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:400ms; /* @kind other */
--duration-ambient:12s; /* @kind other */
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.6,0,.4,1); /* @kind other */
--transition-control:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard); /* @kind other */
--press-scale:.98; /* @kind other */
}

/* ── Base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
}

a { color: var(--mint-500); text-decoration: none; }
a:hover { color: var(--mint-400); text-decoration: underline; }

/* ── Page scaffold ────────────────────────────────────────────────────── */

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ambient brand wash drifting behind everything */
.page-wash {
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: var(--wash-brand);
  filter: saturate(1.05);
  animation: jsonata-drift var(--duration-ambient) var(--ease-in-out) infinite alternate;
}

@keyframes jsonata-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1.02); }
  to   { transform: translate3d(2%, -1%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .page-wash { animation: none; }
}

/* Faint grid, faded out toward the edges */
.page-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grid-lines);
  background-size: var(--grid-size);
  mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 100%);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--gutter-lg) var(--space-20);
  text-align: center;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter-lg);
  border-top: 1px solid var(--border-on-dark);
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.wordmark { height: 64px; width: auto; display: block; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
  color: var(--text-on-dark);
  box-shadow: inset 0 0 0 1px var(--border-on-dark);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--mint-500);
}

h1 {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-size: var(--text-display-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.intro { max-width: var(--container-narrow); display: grid; gap: var(--space-4); }

.tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}

.lede {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

/* ── Waitlist form ────────────────────────────────────────────────────── */

#register { display: grid; justify-items: center; gap: var(--space-3); }

#register form { width: 100%; max-width: 520px; }

.form-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.email-input {
  flex: 1 1 240px;
  height: var(--control-h-md);
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .07);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--border-on-dark);
  transition: var(--transition-control);
}

.email-input:focus {
  box-shadow: inset 0 0 0 1px var(--violet-600), 0 0 0 4px var(--focus-ring);
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}

.submit-btn:hover { box-shadow: var(--shadow-glow-brand); }
.submit-btn:active { transform: scale(var(--press-scale)); }
.submit-btn:disabled { opacity: .42; cursor: not-allowed; }