:root {
  /* Taken from the application itself, so the site and the product are the same object. */
  --bg: #0b0e14;
  --panel: #131722;
  --panel-alt: #161a25;
  --line: #1e222d;
  --line-bright: #2a2e39;
  --text: #d1d4dc;
  --text-bright: #f0f3fa;
  --dim: #787b86;
  --faint: #5d606b;
  --cyan: #22d3ee;
  --cyan-soft: #67e8f9;
  --ion: #7cc2ff;
  --gold: #e3b341;
  --red: #ef5350;
  --green: #26a69a;
  --violet: #a855f7;

  --page: 1200px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

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

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

.wrap { width: min(var(--page), calc(100% - 48px)); margin-inline: auto; }

/* ---------- top bar ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 14, 20, 0.86);
  backdrop-filter: blur(14px);
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 74px;
}

.brand { display: flex; align-items: center; gap: 13px; margin-right: auto; }

/* The sources are 128 and 596 pixels wide, so both of these sit at about a quarter of
   native and stay crisp on any display. */
.brand img.mark { width: 36px; height: 36px; }
.brand img.word { height: 23px; opacity: 0.95; }

footer .brand img.mark { width: 28px; height: 28px; }
footer .brand img.word { height: 18px; }

.top nav { display: flex; gap: 24px; font-size: 14px; }
.top nav a { color: var(--dim); }
.top nav a:hover { color: var(--text-bright); text-decoration: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  color: var(--text-bright);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.btn:hover { border-color: var(--dim); text-decoration: none; }

.btn.primary {
  border-color: rgba(34, 211, 238, 0.55);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.08));
  color: #d7fbff;
}

.btn.primary:hover { border-color: var(--cyan); background: rgba(34, 211, 238, 0.24); }

.btn small { color: var(--dim); font-weight: 400; font-size: 12px; }

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

.hero { position: relative; padding: 92px 0 0; overflow: hidden; }

/* The faint grid a chart panel is drawn on, so the page reads as one. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% 30%;
  background:
    linear-gradient(rgba(42, 46, 57, 0.75) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(42, 46, 57, 0.75) 1px, transparent 1px) 0 0 / 74px 100%;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 0%, transparent 75%);
  pointer-events: none;
}

.hero > * { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 5px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 100px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.16);
}

h1 {
  max-width: 17ch;
  margin: 0 0 22px;
  color: var(--text-bright);
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

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

.lede {
  max-width: 60ch;
  margin: 0 0 34px;
  color: var(--text);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.cta .note { color: var(--faint); font-size: 13px; }

/* ---------- ticker ---------- */

.ticker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 54px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.ticker div { padding: 14px 16px; border-right: 1px solid var(--line); }
.ticker div:last-child { border-right: 0; }

.ticker dt {
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ticker dd {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.ticker .u { color: var(--cyan); }
.ticker .g { color: var(--green); }
.ticker .r { color: var(--red); }
.ticker .y { color: var(--gold); }
.ticker .v { color: var(--violet); }
.ticker .i { color: var(--ion); }

/* ---------- screenshots ---------- */

.shot {
  margin: 0;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}

.shot figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
}

.hero-shot { margin-top: 60px; margin-bottom: -120px; }

/* A screenshot that follows an argument needs a clear gap, or the prose reads as a caption
   for it. Narrower than the column too, so it illustrates the section instead of becoming
   the section. */
.shot-lead {
  max-width: 1060px;
  margin: 84px auto 0;
}

/* ---------- sections ---------- */

section { padding: 130px 0; }

section.tight { padding: 90px 0; }

.kicker {
  margin: 0 0 12px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h2 {
  max-width: 22ch;
  margin: 0 0 18px;
  color: var(--text-bright);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3 { margin: 0 0 8px; color: var(--text-bright); font-size: 17px; font-weight: 600; }

.body { max-width: 62ch; color: var(--text); }
.body p { margin: 0 0 18px; }
.body p:last-child { margin-bottom: 0; }

/* Heading on the left, the argument on the right. A single column leaves half the page
   empty at this width, which reads as an unfinished layout rather than as space. */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px 64px;
  align-items: start;
}

.intro h2 { margin-bottom: 0; }
.intro .body { max-width: none; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}

.split.flip > :first-child { order: 2; }

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.card p { margin: 0; color: var(--dim); font-size: 14.5px; line-height: 1.6; }

.card .num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 26px;
  color: var(--cyan);
}

/* ---------- data points ---------- */

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
  overflow: hidden;
}

.points > div { padding: 20px; background: var(--panel); }

.points h4 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.points h4 span { color: var(--faint); font-family: var(--mono); letter-spacing: 0; }

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

.points li {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.85;
}

/* ---------- editions ---------- */

table.editions {
  width: 100%;
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14.5px;
}

table.editions th,
table.editions td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

table.editions thead th {
  background: var(--panel-alt);
  color: var(--text-bright);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

table.editions tbody tr:last-child td { border-bottom: 0; }
table.editions td:first-child { color: var(--text-bright); font-weight: 500; }
table.editions td { color: var(--dim); }
table.editions .free { color: var(--text); }

table.editions thead th:nth-child(3) { color: var(--gold); }

/* ---------- download ---------- */

.download {
  padding: 56px;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 80% 140% at 20% 0%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--panel);
  text-align: center;
}

.download h2 { max-width: none; margin-inline: auto; }
.download .body { margin-inline: auto; text-align: center; }
.download .cta { justify-content: center; margin-top: 30px; }

.requires {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13px;
}

.requires b { color: var(--dim); font-weight: 500; }

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

footer {
  padding: 44px 0 60px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13.5px;
}

footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
footer nav { display: flex; gap: 24px; margin-left: auto; }
footer a { color: var(--dim); }

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

@media (max-width: 900px) {
  .top nav { display: none; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.flip > :first-child { order: 0; }
  .intro { grid-template-columns: 1fr; gap: 18px; }
  .ticker { grid-template-columns: repeat(3, 1fr); }
  .ticker div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .hero-shot { margin-bottom: -60px; }
  section { padding: 84px 0; }
  .download { padding: 36px 24px; }
}

/* Not released yet. Hazard stripes rather than a coloured bar, because the point is that
   the page is describing something you cannot have, and a polite notice reads as small
   print. It scrolls away with the page instead of following you down it. */
.tape {
  position: relative;
  border-bottom: 1px solid rgba(227, 179, 65, 0.55);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(227, 179, 65, 0.16) 0 14px,
      transparent 14px 28px
    ),
    #1e1a0d;
  color: #f7e6b4;
  font-size: 13.5px;
}

/* The pulse rides on an overlay so the stripes underneath stay put. A moving background
   would drag the hazard pattern across the bar and read as a loading state. */
.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gold);
  opacity: 0.05;
  animation: tape-pulse 2.4s ease-in-out infinite;
}

@keyframes tape-pulse {
  0%, 100% { opacity: 0.035; }
  50% { opacity: 0.16; }
}

.tape .wrap { position: relative; z-index: 1; padding: 11px 0; }
.tape strong { color: #ffd75e; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .tape::after { animation: none; opacity: 0.09; }
}

/* Present, legible, and plainly not pressable. */
.btn.is-waiting {
  border-color: var(--line);
  background: none;
  color: var(--dim);
  cursor: not-allowed;
}

.btn.is-waiting:hover { border-color: var(--line); }
.btn.primary.is-waiting { color: var(--dim); }

/* A real exchange, reproduced. The most persuasive thing about the assistant is that its
   numbers can be checked, so the question, the tools and the answer are shown together.
   Two columns because a single measure of text in a card this wide leaves half of it
   empty, which reads as a broken layout rather than as a transcript. */
.exchange {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 76px;
  padding: 36px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(34, 211, 238, 0.07), transparent 62%),
    var(--panel);
}

.exchange-label {
  margin: 0 0 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.exchange-note {
  margin: 0;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.6;
}

/* The caveat sits under the question rather than under both columns, so the rule matches a
   real edge and the shorter column stops ending in empty space. */
.exchange-turn { display: flex; flex-direction: column; }

.exchange-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.asked {
  margin: 16px 0 22px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.11);
  color: var(--text-bright);
  font-size: 16px;
}

.ran { display: flex; flex-wrap: wrap; gap: 6px; }

.ran span {
  padding: 3px 9px;
  border: 1px solid var(--line-bright);
  border-radius: 5px;
  color: var(--dim);
  font-size: 11.5px;
}

.replied p { margin: 0 0 12px; font-size: 16px; line-height: 1.62; }
.replied p:last-child { margin-bottom: 0; }

/* The two ways in, side by side, because people arrive wanting one or the other. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  margin-top: 76px;
}

.duo h3 { margin: 22px 0 10px; font-size: 19px; }
.duo p { margin: 0 0 14px; color: var(--dim); font-size: 14.5px; line-height: 1.62; }
.duo p:last-child { margin-bottom: 0; }

.tools {
  margin-top: 76px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.tools-title {
  margin: 0 0 22px;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px;
}

.tools-grid h4 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tools-grid ul { margin: 0; padding: 0; list-style: none; }

.tools-grid li {
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.95;
}

.tools-note {
  max-width: 82ch;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 14px;
  line-height: 1.62;
}

#assistant .cards { margin-top: 76px; }

@media (max-width: 900px) {
  .exchange { grid-template-columns: 1fr; gap: 28px; padding: 22px; }
  .exchange-foot { margin-top: 26px; }
  .shot-lead { margin-top: 56px; }
  .duo { gap: 34px; }
  .tools { padding: 22px; }
}