/*
  AllInsight — site styles.

  Quiet and editorial, in the brand kit's palette: Paper ground, Ink text,
  hairline rules instead of cards, and a great deal of space. Sora Light
  carries the headlines; small tracked capitals do the labelling. Insight
  Amber is used only for the dot in the mark and small status marks, never
  for text. One section goes Graphite, for the privacy statement, because
  that is the claim the product stands on.

  The mark (an A with a lowercase i inside it) draws itself on load, the way
  the promo kit's logo reveal does, and the app icon builds itself when the
  download section comes into view.

  Instrument Serif Italic is the one accent: a few words per headline, the
  numerals and the zero, never body text. It is what keeps the restraint
  from reading as plain.

  No third-party requests: Sora and Instrument Serif are served from
  assets/fonts.
*/

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f4f2ee;
  --paper-2: #faf9f6;
  --ink: #111318;
  --graphite: #0f1115;
  --slate: #1b1f27;
  --stone: #5a606b;
  --ash: #9a9ea6;
  --rule: #dedcd6;
  --line: #2a2f38;
  --fog: #9aa1ac;
  --on-dark: #f4f2ee;
  --amber: #f5a524;

  --display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --text: "Sora", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* A faint paper grain, drawn rather than downloaded. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0 0.09  0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1120px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
}

a { color: inherit; }
code { font-family: var(--mono); font-size: 0.84em; }
p { text-wrap: pretty; }

/* The serif accent. Italic Instrument Serif sits a touch larger than Sora at
   the same size, and needs far less negative tracking. */
.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
h1 .accent, h2 .accent { font-size: 1.06em; line-height: 0.9; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
}
.skip:focus { left: 12px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.narrow { max-width: 760px; text-align: center; }

/* ── Type ─────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
h3 { font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }

.label {
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}
.head > .label, .narrow > .label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.head > .label::before, .narrow > .label::before,
.head-center > .label::after, .narrow > .label::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.head-center > .label, .narrow > .label { justify-content: center; }

.prose { margin: 28px 0 0; max-width: 560px; color: var(--stone); }

.head { margin-bottom: clamp(64px, 9vw, 112px); max-width: 820px; }
.head-center { margin-inline: auto; text-align: center; }
.head-center .prose { margin-inline: auto; }

.section { padding: clamp(120px, 18vh, 200px) 0; border-top: 1px solid var(--rule); }
.section-paper { background: var(--grain), var(--paper-2); }

/* ── Navigation ───────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--ink);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  border-bottom-color: var(--rule);
}
.nav.is-dark {
  background: color-mix(in srgb, var(--graphite) 80%, transparent);
  border-bottom-color: var(--line);
  color: var(--on-dark);
}
.nav-inner {
  width: min(var(--wrap), 100% - 48px);
  margin-inline: auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand, .foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  text-decoration: none;
  font-size: 22px;
}
.mark { width: 0.95em; height: 0.95em; flex: none; transform: translateY(-0.04em); }

/* The wordmark: Sora SemiBold, both i's drawn as a dotless i with an amber
   dot where the brand kit puts it. */
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wi { position: relative; display: inline-block; }
.wi::after {
  content: "";
  position: absolute;
  left: calc(0.1555em - 0.0775em);
  top: var(--dot-top, 0.09em);
  width: 0.155em;
  height: 0.155em;
  border-radius: 50%;
  background: var(--amber);
}
.tm { font-size: 0.45em; align-self: flex-start; margin-left: 0.15em; opacity: 0.6; }
.nav-links { display: flex; gap: 40px; }
.nav-links a, .nav-cta {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.62;
  transition: opacity 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.is-here, .nav-cta:hover { opacity: 1; }
.nav-cta { opacity: 1; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nav-links a, .nav-cta { font-weight: 400; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px 0;
  color: inherit;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-right { display: flex; align-items: center; gap: 28px; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-block; }
}

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

.hero {
  min-height: 100svh;
  padding: 140px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.headline {
  font-size: clamp(48px, 9.4vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
.headline .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.headline .line > span {
  display: inline-block;
  transform: translateY(105%);
  animation: lift 1.6s var(--ease) forwards;
}
.headline .line > span { animation-delay: 1.5s; }
.headline .line:nth-child(2) > span { animation-delay: 1.64s; }
.quiet { color: var(--ash); }
.headline .accent { color: var(--stone); letter-spacing: -0.02em; }

@keyframes lift { to { transform: none; } }

.rise {
  opacity: 0;
  animation: fade 1.4s var(--ease) forwards;
  animation-delay: calc(0.3s + var(--d, 0) * 0.12s);
}
.hero .rise { animation-delay: calc(1.3s + var(--d, 0) * 0.12s); }

/* ── The mark, drawn ─────────────────────────────────────────────── */

.hero-mark {
  width: clamp(76px, 9vw, 104px);
  height: auto;
  margin-bottom: clamp(40px, 6vh, 64px);
  overflow: visible;
}
.mark-a, .mark-stem {
  fill: none;
  stroke: var(--ink);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mark-dot { fill: var(--amber); }
.pulse { fill: none; stroke: var(--amber); stroke-width: 1.2; opacity: 0; }

/* 1. The A draws itself.  2. The i rises.  3. The dot drops in.
   4. Two scan rings leave the dot.  Same order as the logo reveal film. */
.hero-mark .mark-a {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.hero-mark .mark-stem {
  opacity: 0;
  transform: translateY(14px);
  animation: stem 0.6s var(--ease) 0.95s forwards;
}
.hero-mark .mark-dot {
  opacity: 0;
  transform: translateY(-46px);
  animation: drop 0.75s cubic-bezier(0.34, 1.45, 0.64, 1) 1.15s forwards;
}
.hero-mark .pulse {
  transform-origin: 50px 54px;
  transform-box: view-box;
  animation: ring 2.4s var(--ease) 1.7s forwards;
}
.hero-mark .pulse-2 { animation-delay: 2.1s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes stem { to { opacity: 1; transform: none; } }
@keyframes drop {
  0% { opacity: 0; transform: translateY(-46px); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes ring {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(7); }
}

.status {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 0.12em;
}

/* ── The app icon, built ─────────────────────────────────────────── */

.app-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 40px;
}
.app-icon .tile {
  fill: var(--slate);
  stroke: var(--line);
  stroke-width: 1;
  transform-origin: 50px 50px;
  transform-box: view-box;
  transform: scale(0.6);
  opacity: 0;
}
.app-icon .mark-a, .app-icon .mark-stem { stroke: var(--paper); }
.app-icon .mark-a { stroke-dasharray: 1; stroke-dashoffset: 1; }
.app-icon .mark-stem { opacity: 0; }
.app-icon .mark-dot { opacity: 0; transform: translateY(-30px); }
.app-icon.built .tile { animation: tile 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) forwards; }
.app-icon.built .mark-a { animation: draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards; }
.app-icon.built .mark-stem { animation: stem 0.5s var(--ease) 0.9s forwards; }
.app-icon.built .mark-dot { animation: drop 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 1.05s forwards; }
@keyframes tile { to { opacity: 1; transform: none; } }
@keyframes fade {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.lede { margin: clamp(28px, 4vh, 40px) auto 0; max-width: 520px; color: var(--stone); }

.cta {
  margin-top: 44px;
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 15px 40px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.link {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size 0.5s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link .arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.5s var(--ease);
}
.link:hover .arrow { transform: translateX(5px); }

/* ── Privacy (dark) ───────────────────────────────────────────────── */

.dark {
  background:
    radial-gradient(60% 50% at 50% 100%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 70%),
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--slate) 90%, transparent), transparent 70%),
    var(--graphite);
  color: var(--on-dark);
  padding: clamp(140px, 22vh, 240px) 0;
}
.dark .label, .dark .prose { color: var(--fog); }
.dark .accent { color: color-mix(in srgb, var(--on-dark) 78%, var(--fog)); }
.dark .prose { margin-inline: auto; }
.statement {
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1;
  letter-spacing: -0.045em;
}

.horizon {
  margin: clamp(80px, 12vh, 120px) auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fog);
}
.horizon-far { opacity: 0.45; }
.horizon-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fog) 60%, transparent) 50%, transparent 50%) 0 0 / 8px 1px repeat-x;
}
/* The wall: a vertical hairline at the midpoint. */
.horizon-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 29px;
  background: var(--on-dark);
}
/* A single point of light travels out and stops at the wall. */
.horizon-line i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 18%, transparent);
  opacity: 0;
}
.horizon.is-live .horizon-line i { animation: travel 3.6s var(--ease) infinite; }
@keyframes travel {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  62% { left: calc(50% - 9px); opacity: 1; }
  100% { left: calc(50% - 9px); opacity: 0; }
}

.figure {
  margin: 56px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fog);
}
.figure-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--on-dark);
}
.figure-text { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; }

/* ── Method ───────────────────────────────────────────────────────── */

.method {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.method li { padding: 40px 40px 0 0; }
.method li + li { padding-left: 40px; border-left: 1px solid var(--rule); }
.numeral {
  display: block;
  margin-bottom: 56px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--ash);
}
.method p { margin: 18px 0 0; color: var(--stone); font-size: 16px; }

@media (max-width: 860px) {
  .method { grid-template-columns: 1fr; }
  .method li, .method li + li { padding: 36px 0 44px; border-left: 0; }
  .method li + li { border-top: 1px solid var(--rule); }
  .numeral { margin-bottom: 28px; }
}

/* ── Instruments ──────────────────────────────────────────────────── */

.specs { margin: 0; border-top: 1px solid var(--ink); }
.spec {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.6s var(--ease);
}
.spec:hover { padding-left: 12px; }
.spec dt {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
}
.spec dd { margin: 0; color: var(--stone); max-width: 560px; align-self: center; }

@media (max-width: 700px) {
  .spec { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Safety ───────────────────────────────────────────────────────── */

.gates {
  position: relative;
  display: grid;
  grid-template-columns: 1px 1fr;
  gap: 48px;
  --p: 0%;
}
.gates-rail { position: relative; background: var(--rule); }
.gates-rail i {
  position: absolute;
  inset: 0 0 auto;
  height: var(--p);
  background: var(--ink);
}
.gates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: gate;
}
.gates-list li {
  counter-increment: gate;
  position: relative;
  padding: 22px 0 22px 64px;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(17px, 1.7vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ash);
  transition: color 0.6s var(--ease);
}
.gates-list li:first-child { padding-top: 0; }
.gates-list li code { color: inherit; }
.gates-list li::before {
  content: counter(gate, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding-top: 0.45em;
}
.gates-list li.passed { color: var(--ink); }

.never { margin-top: clamp(80px, 12vw, 140px); }
.never-list {
  margin: 0;
  max-width: 900px;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--stone);
}

@media (max-width: 640px) {
  .gates { gap: 24px; }
  .gates-list li { padding-left: 44px; }
}

/* ── Download ─────────────────────────────────────────────────────── */

.platforms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
}
.platform header { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.platform header p { margin: 10px 0 0; font-size: 14px; color: var(--stone); }
.platform h3 { font-size: 28px; letter-spacing: -0.025em; }

.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding 0.5s var(--ease);
}
.file:hover { padding-inline: 10px; }
.file-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.file-name b { font-weight: 500; }
.file-name i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ash);
  overflow-wrap: anywhere;
}
.file-size {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone);
}
.file-size::after { content: "  ↓"; white-space: pre; }

.verify { margin-top: 24px; font-size: 14px; color: var(--stone); }
.verify summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.verify summary::-webkit-details-marker { display: none; }
.verify summary::after { content: " +"; }
.verify[open] summary::after { content: " −"; }
.verify .cmd {
  display: block;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow-x: auto;
  white-space: nowrap;
}
.verify dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.verify dt { color: var(--ink); }
.verify dd { margin: 0; min-width: 0; }
.verify dd code { overflow-wrap: anywhere; }

.fine {
  margin: 72px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ash);
}
.fine a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.fine a:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 860px) { .platforms { grid-template-columns: 1fr; } }

/* ── Footer ───────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--ink); padding: clamp(64px, 9vw, 96px) 0 40px; }
.foot-top {
  display: grid;
  grid-template-columns: 1.2fr auto 1.4fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.foot-brand { font-size: 26px; }
.foot-tag { margin: 18px 0 0; font-size: 22px; line-height: 1.2; color: var(--stone); }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
  transition: color 0.3s var(--ease);
}
.foot-links a:hover { color: var(--ink); }
.foot-note { margin: 0; max-width: 520px; font-size: 13px; color: var(--ash); }
.foot-text { max-width: 440px; }
.foot-contact { margin: 0 0 14px; font-size: 15px; color: var(--stone); }
.foot-contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot-contact a:hover { border-color: var(--ink); }
.foot-base {
  margin-top: clamp(56px, 8vw, 88px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr; gap: 40px; }
  .foot-links { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
}

/* ── Multi-page shell ─────────────────────────────────────────────── */

/* Pages fade into each other where the browser supports it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }

.nav-links a[aria-current="page"] { opacity: 1; }

.menu {
  position: fixed;
  inset: 64px 0 0;
  z-index: 49;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--grain), var(--paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
@media (min-width: 861px) { .menu { display: none; } }
.menu a {
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 48px);
  letter-spacing: -0.03em;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.menu a[aria-current="page"] { font-family: var(--serif); font-style: italic; }
.menu-open { overflow: hidden; }
.menu-open .nav { background: var(--paper); color: var(--ink); border-bottom-color: var(--rule); }

/* ── Animated background field ────────────────────────────────────── */

.has-field { position: relative; isolation: isolate; overflow: hidden; }
.field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* A soft vignette keeps the field from competing with the words. */
.has-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 52%, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 45%, transparent 100%);
}
.dark.has-field::after {
  background: radial-gradient(55% 45% at 50% 50%, var(--graphite) 0%, color-mix(in srgb, var(--graphite) 60%, transparent) 50%, transparent 100%);
}

/* ── Page heroes (every page but the home page) ──────────────────── */

.page-hero {
  padding: clamp(160px, 24vh, 220px) 0 clamp(96px, 14vh, 140px);
  text-align: center;
}
.page-hero .label { justify-content: center; display: flex; align-items: center; gap: 16px; }
.page-hero .label::before, .page-hero .label::after {
  content: ""; width: 32px; height: 1px; background: currentColor; opacity: 0.5;
}
.page-title {
  font-size: clamp(46px, 8vw, 112px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.page-hero .lede { max-width: 600px; }

/* ── Marquee ──────────────────────────────────────────────────────── */

.marquee {
  border-block: 1px solid var(--rule);
  overflow: hidden;
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--stone);
  white-space: nowrap;
}
.marquee span:nth-child(even) { font-family: var(--serif); font-style: italic; color: var(--ink); }
.marquee span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); opacity: 0.8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Stats ────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.stat { padding: 36px 28px 8px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--rule); }
.stat-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(64px, 8vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label { display: block; margin-top: 14px; color: var(--stone); font-size: 15px; }
@media (max-width: 860px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ── Cards (with a light that follows the pointer) ───────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
  padding: 36px 32px 32px;
  background: var(--paper);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.5s var(--ease);
}
.section-paper .card { background: var(--paper-2); }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--amber) 9%, transparent), transparent 60%);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card h3 { font-size: 26px; letter-spacing: -0.025em; }
.card p { margin: 0; color: var(--stone); font-size: 15px; }
.card-num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ash); }
.card-go {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.card-go::after { content: "  →"; white-space: pre; display: inline-block; transition: transform 0.5s var(--ease); }
.card:hover .card-go::after { transform: translateX(6px); }
.card-icon { width: 36px; height: 36px; color: var(--ink); }
.card-icon * { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.card-icon .dot { fill: var(--amber); stroke: none; }

/* ── Feature list (the fourteen screens) ─────────────────────────── */

.screens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--ink);
}
.screen { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.screen h3 { font-size: 21px; display: flex; align-items: baseline; gap: 12px; }
.screen h3 span { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ash); }
.screen p { margin: 10px 0 0; color: var(--stone); font-size: 15px; }

/* ── Demo frames ──────────────────────────────────────────────────── */

.demo {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--rule);
}
.demo:first-of-type { border-top: 0; padding-top: 0; }
.demo.flip > :first-child { order: 2; }
.demo h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 300; }
.demo p { color: var(--stone); }
.demo-caption { margin-top: 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .demo.flip > :first-child { order: 0; }
}

.frame {
  position: relative;
  background: var(--slate);
  color: var(--on-dark);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 40px 80px -40px rgba(15, 17, 21, 0.45), 0 2px 6px rgba(15, 17, 21, 0.08);
}
.frame-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}
.frame-bar b { font-weight: 400; color: var(--on-dark); letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }

/* Treemap */
.treemap { position: relative; height: 340px; }
.tile {
  position: absolute;
  padding: 10px 12px;
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  background: var(--tile, #2a3040);
  transition: left 1.1s var(--ease), top 1.1s var(--ease), width 1.1s var(--ease), height 1.1s var(--ease), background-color 1.1s var(--ease), opacity 0.6s var(--ease);
}
.tile b { display: block; font-weight: 500; color: var(--on-dark); white-space: nowrap; }
.tile i { font-style: normal; color: var(--fog); }
.tile.safe { box-shadow: inset 0 0 0 1.5px var(--amber); }
.tile.small { padding: 6px 8px; font-size: 11px; }
.tile.small i, .tile.tiny b { display: none; }

/* Health ring */
.ring-wrap { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.ring { width: 150px; height: 150px; }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--line); }
.ring .value {
  stroke: var(--on-dark);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.ring text { fill: var(--on-dark); font-family: var(--serif); font-style: italic; font-size: 38px; text-anchor: middle; }
.ring .ring-sub { font-family: var(--text); font-style: normal; font-size: 8px; letter-spacing: 0.2em; fill: var(--fog); }
.reasons { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.reasons li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fog);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reasons li b { color: var(--on-dark); font-weight: 400; }
.reasons li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--ok, #3ddc97); vertical-align: 0.1em; }
.reasons li.warn::before { background: var(--amber); }
.is-live .reasons li { opacity: 1; transform: none; }
.is-live .reasons li:nth-child(2) { transition-delay: 0.25s; }
.is-live .reasons li:nth-child(3) { transition-delay: 0.5s; }
.is-live .reasons li:nth-child(4) { transition-delay: 0.75s; }
@media (max-width: 480px) { .ring-wrap { grid-template-columns: 1fr; justify-items: center; } }

/* Live chart */
.chart { width: 100%; height: 220px; display: block; }
.legend { display: flex; gap: 22px; margin-top: 12px; font-size: 12px; color: var(--fog); }
.legend b { color: var(--on-dark); font-weight: 400; font-variant-numeric: tabular-nums; }
.legend i { display: inline-block; width: 14px; height: 2px; margin-right: 8px; vertical-align: 0.25em; background: var(--on-dark); }
.legend .mem i { background: var(--amber); }

/* Duplicate pipeline */
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stage {
  padding: 16px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
}
.stage b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; }
.stage span { display: block; margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--fog); }
.stage:last-child { border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); }
.bars { display: grid; gap: 6px; margin-top: 16px; }
.bars i { display: block; height: 4px; border-radius: 2px; background: var(--on-dark); opacity: 0.85; width: 0; transition: width 1.6s var(--ease); }
.bars i:last-child { background: var(--amber); }
@media (max-width: 560px) { .pipeline { grid-template-columns: 1fr 1fr; } }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 14px; min-height: 330px; font-size: 14px; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 14px; line-height: 1.6; }
.msg.you { align-self: flex-end; background: var(--on-dark); color: var(--ink); border-bottom-right-radius: 4px; }
.msg.ai { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.ai .caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--amber); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.badge { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span {
  font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--on-dark);
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.chips.in span { opacity: 1; transform: none; }
.chips.in span + span { transition-delay: 0.15s; }

/* Briefing (what the model is given) */
.briefing {
  margin: 0;
  padding: 22px 24px;
  background: var(--graphite);
  color: var(--on-dark);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  overflow-x: auto;
  white-space: pre;
}
.briefing .end { color: var(--amber); }

/* Architecture */
.arch { display: grid; gap: 0; max-width: 760px; margin-inline: auto; }
.layer {
  position: relative;
  padding: 26px 28px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 12px;
}
.layer h3 { font-size: 22px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.layer h3 span { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ash); font-weight: 400; }
.layer p { margin: 8px 0 0; color: var(--stone); font-size: 15px; }
.layer.dark-layer { background: var(--slate); border-color: var(--line); color: var(--on-dark); }
.layer.dark-layer p { color: var(--fog); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags span { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fog); }
/* The link between layers: a dotted line with a packet travelling down it. */
.wire { position: relative; height: 54px; margin-inline: auto; width: 1px;
  background: linear-gradient(var(--ash) 50%, transparent 50%) 0 0 / 1px 6px repeat-y; }
.wire i { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: packet 2.4s var(--ease) infinite; }
.wire span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
@keyframes packet { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }

/* Tables */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.table th, .table td { text-align: left; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table th { font-weight: 400; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.table td { color: var(--stone); }
.table td:first-child { color: var(--ink); }

@media (max-width: 600px) {
  .table { min-width: 0; }
  .table th, .table td { padding-right: 12px; font-size: 14px; }
  .table.stack thead { display: none; }
  .table.stack tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .table.stack td { display: block; padding: 2px 0; border: 0; }
  .table.stack td:first-child { font-weight: 500; }
  .frame-bar > span:last-child { display: none; }
}

/* Two-column prose blocks */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.split h3 { font-size: 26px; letter-spacing: -0.025em; margin-bottom: 12px; }
.split p { color: var(--stone); margin: 0 0 14px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.code {
  display: block;
  margin: 18px 0 0;
  padding: 20px 22px;
  background: var(--graphite);
  color: var(--on-dark);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.code .k { color: #9fb4ff; }
.code .c { color: var(--fog); }
.code .s { color: #e8c38a; }

/* Priorities */
.priority { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; font-family: var(--display); font-size: clamp(26px, 3.6vw, 44px); letter-spacing: -0.03em; }
.priority span { color: var(--ash); transition: color 0.6s var(--ease); }
.priority span.on { color: var(--ink); }
.priority em { font-family: var(--serif); font-size: 0.7em; color: var(--ash); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--ink); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(step, upper-roman); font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--ash); }
.steps h3 { font-size: 21px; }
.steps p { margin: 6px 0 0; color: var(--stone); }

/* Call to action band */
.cta-band { text-align: center; padding: clamp(120px, 18vh, 200px) 0; }
.cta-band h2 { font-size: clamp(44px, 7vw, 96px); letter-spacing: -0.045em; line-height: 1; }
.cta-band .cta { margin-top: 48px; }
.dark .btn { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.dark .btn:hover { background: transparent; color: var(--on-dark); }
.dark .link { color: var(--on-dark); }

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 24px; }
.lost-num { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: clamp(120px, 22vw, 260px); line-height: 0.9; color: var(--ink); }

/* ── Reveal on scroll ─────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--d, 0) * 0.1s);
}
.reveal.in { opacity: 1; transform: none; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .reveal { opacity: 1; transform: none; }
  .headline .line > span { transform: none; }
  .hero-mark .mark-a, .app-icon .mark-a { stroke-dashoffset: 0; }
  .hero-mark .mark-stem, .hero-mark .mark-dot,
  .app-icon .tile, .app-icon .mark-stem, .app-icon .mark-dot { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .reasons li, .chips span { opacity: 1; transform: none; }
  .wire i { display: none; }
}