/* ============================================================
   PEAK AI — Design Tokens (derived from anthropic.com)
   ============================================================ */
:root {
  /* Anthropic palette */
  --slate-dark:   #141413;
  --slate-medium: #3D3D3A;
  --slate-light:  #5E5D59;
  --ivory-light:  #FAF9F5;
  --ivory-medium: #F0EEE6;
  --ivory-dark:   #E8E6DC;
  --cloud-medium: #B0AEA5;
  --clay:         #D97757;
  --clay-deep:    #C25E3C;

  /* Semantic aliases */
  --ink:        var(--slate-dark);
  --ink-soft:   var(--slate-medium);
  --ink-muted:  var(--slate-light);
  --paper:      var(--ivory-light);
  --paper-2:    var(--ivory-medium);
  --paper-3:    var(--ivory-dark);
  --line:       rgba(20,20,19,.14);
  --accent:     var(--clay);

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Spacing scale (Anthropic uses 4–64px jumps) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Radii */
  --r-sm: .25rem; --r-md: .5rem; --r-lg: 1rem; --r-pill: 100vw;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(20,20,19,.05), 0 12px 32px -16px rgba(20,20,19,.18);
  --shadow-pop:  0 2px 6px rgba(20,20,19,.08), 0 32px 64px -24px rgba(20,20,19,.28);

  --max: 1180px;
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--clay); color: var(--ivory-light); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s5); }

/* ============ Typography ============ */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--clay); display: inline-block;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -.01em; }

.display {
  font-size: clamp(44px, 7.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -.025em;
}
.h-xl { font-size: clamp(36px, 5vw, 60px); line-height: 1.06; letter-spacing: -.02em; }
.h-lg { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; }
.h-md { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; }

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
}
.serif-i { font-family: var(--serif); font-style: italic; color: var(--clay-deep); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
  will-change: transform;
}
.btn i { width: 15px; height: 15px; }
.btn-primary { background: var(--slate-dark); color: var(--ivory-light); }
.btn-primary:hover { background: var(--clay); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--slate-dark); transform: translateY(-2px); }
.btn-light { background: var(--ivory-light); color: var(--slate-dark); }
.btn-light:hover { background: var(--clay); color: var(--ivory-light); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
  transition: gap .25s, color .25s, border-color .25s;
}
.link-arrow:hover { gap: 14px; color: var(--clay-deep); border-color: var(--clay); }
.link-arrow i { width: 14px; height: 14px; }

/* ============ Nav ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250,249,245,.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--s5);
  display: flex; align-items: center; gap: var(--s6);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .01em; }
/* The mountain range is 2.5:1, not the square the old triangle was. */
.brand svg { width: 32px; height: auto; flex: 0 0 auto; color: var(--ink); }
/* The app icon, so the tab, the home screen and the toolbar are one mark.
   It is solid black artwork rather than currentColor, so if this site ever
   grows a dark theme this needs an invert here — the SVG it replaced adapted
   on its own and this does not. */
.brand-mark { width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; }
.brand em { font-family: var(--serif); font-style: normal; }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.nav-links a { position: relative; padding: 4px 0; transition: color .2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--clay); transition: right .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-cta { margin-left: var(--s4); }
.nav-cta .btn { padding: 10px 20px; font-size: 14px; }
/* On a phone the nav used to disappear entirely, and with no hamburger to
   replace it the documentation was reachable only from the footer — the very
   bottom of a long page, and on docs.html itself there was no way back up to
   anything at all.

   The six section anchors can go: they scroll to places a phone visitor
   reaches anyway. Docs is a different page, so it needs the link. Keeping one
   item costs nothing next to the Try Peak button and needs no menu. */
@media (max-width: 900px) {
  .nav-links { gap: 0; }
  .nav-links a:not(.nav-keep) { display: none; }
}

/* ============ Hero ============ */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--s9) + 40px) 0 var(--s9);
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 82% 12%, rgba(217,119,87,.10), transparent 60%),
    radial-gradient(700px 500px at 8% 88%, rgba(232,230,220,.9), transparent 65%);
}
.hero-ridge {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 46%;
  opacity: .5; pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s8); align-items: center; }
.hero h1 { margin: var(--s5) 0 var(--s5); }
.hero-actions { display: flex; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }
.hero-meta {
  display: flex; gap: var(--s6); margin-top: var(--s8); flex-wrap: wrap;
}
.hero-meta .stat { border-left: 2px solid var(--paper-3); padding-left: var(--s4); }
.hero-meta .stat b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.hero-meta .stat span { font-size: 13px; color: var(--ink-muted); }

/* ============ Not found ============ */
.not-found-page { min-height: 100svh; display: flex; flex-direction: column; }
.not-found {
  min-height: clamp(620px, 82svh, 900px);
  padding: calc(var(--s10) + 36px) var(--s5) var(--s9);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.not-found::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 440px at 72% 22%, rgba(217,119,87,.11), transparent 62%),
    radial-gradient(620px 420px at 12% 82%, rgba(232,230,220,.9), transparent 66%);
}
.not-found-ridge {
  position: absolute; inset: auto 0 0; width: 100%; height: 48%;
  opacity: .68; pointer-events: none;
}
.not-found-content {
  width: min(720px, 100%); position: relative; z-index: 1;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.not-found-code {
  margin: var(--s5) 0 calc(var(--s4) * -1);
  font-family: var(--mono); font-size: clamp(88px, 18vw, 190px);
  line-height: .9; letter-spacing: -.08em; font-weight: 700;
  color: var(--paper-3); user-select: none;
}
.not-found h1 {
  font-size: clamp(42px, 7vw, 76px); line-height: 1.02;
  letter-spacing: -.03em; margin-bottom: var(--s5);
}
.not-found .lede { margin: 0 auto; }
.not-found-actions {
  margin-top: var(--s6); display: flex; justify-content: center;
  gap: var(--s4); flex-wrap: wrap;
}
.not-found-actions .btn-primary i { order: -1; }

@media (max-width: 560px) {
  .not-found { min-height: 76svh; padding-inline: var(--s4); }
  .not-found-actions { width: 100%; }
  .not-found-actions .btn { width: 100%; justify-content: center; }
}

/* Terminal card */
.terminal {
  background: var(--slate-dark); color: var(--ivory-light);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  overflow: hidden; transform: rotate(.5deg);
  border: 1px solid rgba(250,249,245,.08);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid rgba(250,249,245,.1);
}
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.terminal-bar i:nth-child(1){ background:#D97757; }
.terminal-bar i:nth-child(2){ background:#B0AEA5; }
.terminal-bar i:nth-child(3){ background:#5E5D59; }
.terminal-bar span { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--cloud-medium); letter-spacing: .1em; }
.terminal-body { padding: 22px 22px 26px; font-family: var(--mono); font-size: 13.5px; line-height: 1.9; }
.terminal-body .p { color: var(--cloud-medium); }
.terminal-body .user { color: var(--ivory-light); }
.terminal-body .ans { color: #E7B4A0; }
.terminal-body .caret {
  display: inline-block; width: 8px; height: 16px; background: var(--clay);
  vertical-align: -3px; animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s7); }
  .terminal { transform: none; }
}

/* ============ Sections ============ */
section { padding: var(--s10) 0; position: relative; }
section.tight { padding: var(--s9) 0; }
.section-head { max-width: 760px; margin-bottom: var(--s8); }
.section-head .eyebrow { margin-bottom: var(--s4); }
.section-head h2 { margin-bottom: var(--s5); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lede { margin-left: auto; margin-right: auto; }

/* Marquee */
.marquee-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-2); padding: 18px 0; overflow: hidden;
}
.marquee { display: flex; gap: 56px; width: max-content; animation: marquee 28s linear infinite; }
.marquee span {
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 56px;
}
.marquee span::after { content: "▲"; color: var(--clay); font-size: 10px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ Capability cards ============ */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.cap-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s6);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, background .35s;
  position: relative; overflow: hidden;
}
.cap-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--clay); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.cap-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); background: var(--paper); border-color: transparent; }
.cap-card:hover::before { transform: scaleX(1); }
.cap-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--slate-dark); color: var(--ivory-light);
  display: grid; place-items: center; margin-bottom: var(--s5);
  transition: background .3s, transform .3s;
}
.cap-card:hover .cap-icon { background: var(--clay); transform: rotate(-6deg) scale(1.06); }
.cap-icon i { width: 20px; height: 20px; }
.cap-card h3 { font-size: 21px; margin-bottom: var(--s3); }
.cap-card p { color: var(--ink-muted); font-size: 15px; margin: 0; }
.cap-card .tag {
  position: absolute; top: var(--s5); right: var(--s5);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--ink-muted); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: var(--r-pill);
}
@media (max-width: 960px) { .cap-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .cap-grid { grid-template-columns: 1fr; } }

/* ============ Research / dark band ============ */
.dark-band {
  background: var(--slate-dark); color: var(--ivory-light);
  border-radius: 0; position: relative; overflow: hidden;
}
.dark-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 400px at 90% 0%, rgba(217,119,87,.16), transparent 60%);
}
.dark-band .eyebrow { color: var(--cloud-medium); }
.dark-band .lede { color: var(--ivory-dark); }
.dark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; position: relative; z-index: 1; }
.dark-list { display: grid; gap: var(--s5); margin-top: var(--s6); }
.dark-item { display: flex; gap: var(--s4); align-items: flex-start; }
.dark-item .n {
  font-family: var(--mono); font-size: 12px; color: var(--clay);
  border: 1px solid rgba(217,119,87,.4); border-radius: var(--r-pill);
  padding: 4px 12px; white-space: nowrap; margin-top: 2px;
}
.dark-item b { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; margin-bottom: 4px; }
.dark-item span { color: var(--cloud-medium); font-size: 14.5px; }
.quote-card {
  background: rgba(250,249,245,.05); border: 1px solid rgba(250,249,245,.12);
  border-radius: var(--r-lg); padding: var(--s7);
}
.quote-card blockquote {
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35;
  margin: 0 0 var(--s5); font-weight: 400;
}
.quote-card cite { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cloud-medium); }
.quote-card cite b { color: var(--clay); font-weight: 500; }
@media (max-width: 900px) { .dark-grid { grid-template-columns: 1fr; } }

/* ============ Model table ============ */
.model-table { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.model-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr auto;
  gap: var(--s4); align-items: center;
  padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.model-row:last-child { border-bottom: none; }
.model-row:not(.model-head):hover { background: var(--paper-2); }
.model-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--paper-2); padding: var(--s4) var(--s6);
}
.model-row .m-name { font-family: var(--serif); font-size: 20px; }
.model-row .m-name small { display: block; font-family: var(--mono); font-size: 11px; color: var(--clay-deep); letter-spacing: .08em; margin-top: 2px; }
.model-row .cell { font-size: 14.5px; color: var(--ink-soft); }
.model-row .cell b { color: var(--ink); font-weight: 600; }
.badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--ivory-dark); color: var(--ink-soft); white-space: nowrap;
}
.badge.hot { background: var(--clay); color: var(--ivory-light); }
@media (max-width: 860px) {
  .model-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .model-row .cell { display: none; }
  .model-head { display: none; }
}

/* ============ Principles (numbered rows) ============ */
.principles { border-top: 1px solid var(--line); }
.principle {
  display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: var(--s6);
  padding: var(--s7) 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.principle .num { font-family: var(--mono); font-size: 13px; color: var(--clay-deep); }
.principle h3 { font-size: clamp(22px, 2.6vw, 30px); }
.principle p { color: var(--ink-muted); margin: 0; max-width: 520px; }
@media (max-width: 800px) { .principle { grid-template-columns: 1fr; gap: var(--s3); } }

/* ============ Product split ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.split + .split { margin-top: var(--s10); }
.split.flip > .split-visual { order: 2; }
.split-visual {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-card); background: var(--paper-2);
}
.split-visual img { width: 100%; height: auto; }
.split-body .eyebrow { margin-bottom: var(--s4); }
.split-body h3 { font-size: clamp(26px, 3vw, 36px); margin-bottom: var(--s4); }
.split-body p { color: var(--ink-muted); margin: 0 0 var(--s5); max-width: 480px; }
.check-list { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); }
.check-list li i { width: 16px; height: 16px; color: var(--clay); flex: none; margin-top: 3px; }
@media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; } .split.flip > .split-visual { order: 0; } }

/* ============ Mesh visual ============ */
/* Drawn rather than photographed. The section is about devices finding each
   other with nothing in between, and the screenshot that sat here showed a
   code editor — the alt text claimed mesh, the picture showed something else.
   Built from the site's own tokens so it restyles with the theme, and from
   the lucide set already on the page, so it costs no new asset. */
.mesh-stage { background: var(--paper-2); }
.mesh-visual {
  position: relative; height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.mesh-ring {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: mesh-pulse 3.2s ease-out infinite;
}
.mesh-ring.r2 { animation-delay: 1.1s; }
.mesh-ring.r3 { animation-delay: 2.2s; }
@keyframes mesh-pulse {
  from { transform: scale(.55); opacity: .55; }
  to   { transform: scale(1.9);  opacity: 0; }
}
.mesh-center {
  width: 74px; height: 74px; border-radius: 22px; z-index: 2;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -12px rgba(20,20,19,.4);
}
.mesh-center i { width: 30px; height: 30px; }
.mesh-node {
  position: absolute; width: 52px; height: 52px; border-radius: 16px; z-index: 2;
  background: var(--paper); border: 1px solid var(--line); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(20,20,19,.25);
  animation: mesh-drift 4s ease-in-out infinite;
}
.mesh-node i { width: 20px; height: 20px; }
.mesh-node.n1 { left: 12%; top: 16%; }
.mesh-node.n2 { left: 74%; top: 12%; animation-delay: .6s; }
.mesh-node.n3 { left: 8%;  top: 68%; animation-delay: 1.2s; }
.mesh-node.n4 { left: 78%; top: 64%; animation-delay: 1.8s; }
@keyframes mesh-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (max-width: 900px) { .mesh-visual { height: 300px; } }
@media (prefers-reduced-motion: reduce) {
  /* The rings exist to say "still reaching". Frozen mid-expansion they read
     as three arbitrary circles, so the outer two go and the node keeps a
     single steady halo. */
  .mesh-ring { animation: none; opacity: .5; transform: scale(1); }
  .mesh-ring.r2, .mesh-ring.r3 { display: none; }
  .mesh-node { animation: none; }
}

/* ============ News ============ */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.news-card {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.news-card .thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--paper-2); }
.news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.news-card:hover .thumb img { transform: scale(1.05); }
.news-body { padding: var(--s5) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.news-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-deep); }
.news-body h3 { font-size: 19px; line-height: 1.3; }
.news-body p { font-size: 14.5px; color: var(--ink-muted); margin: 0; flex: 1; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }

/* ============ Big CTA ============ */
.cta-band {
  background: var(--slate-dark); color: var(--ivory-light);
  text-align: center; border-radius: 0; overflow: hidden; position: relative;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 340px at 50% 120%, rgba(217,119,87,.35), transparent 65%);
}
.cta-band .wrap { position: relative; padding-top: var(--s10); padding-bottom: var(--s10); }
.cta-band h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em; }
.cta-band .lede { color: var(--cloud-medium); margin: var(--s5) auto 0; }
.cta-actions { display: flex; gap: var(--s4); justify-content: center; margin-top: var(--s7); flex-wrap: wrap; }
.cta-band .btn-ghost { border-color: rgba(250,249,245,.25); color: var(--ivory-light); }
.cta-band .btn-ghost:hover { border-color: var(--clay); }

/* ============ Footer ============ */
footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: var(--s8) 0 var(--s6); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s6); }
.foot-brand p { color: var(--ink-muted); font-size: 14px; max-width: 260px; margin-top: var(--s4); }
.foot-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s4); font-weight: 500; }
.foot-col a { display: block; font-size: 14.5px; color: var(--ink-soft); padding: 5px 0; transition: color .2s; }
.foot-col a:hover { color: var(--clay-deep); }
.foot-base {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-muted);
}

/* The AI disclosure sits on its own line rather than as a fourth item in the
   base row: at three items the row is already full, and a disclosure squeezed
   between a copyright and a tagline reads as a tagline. */
.foot-ai {
  flex-basis: 100%;
  padding-top: var(--s3);
  font-size: 12px;
  color: var(--ink-muted);
  opacity: .85;
}

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

/* ============ Scroll World: The Ascent ============ */
.scrollworld-wrap {
  height: 400vh; /* 300vh scrollable + 100vh pinned stage */
  background: transparent;
  position: relative;
}
.sw-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sw-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.sw-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(20,20,19,.15) 0%, rgba(20,20,19,.0) 30%, rgba(20,20,19,.0) 70%, rgba(20,20,19,.35) 100%);
  pointer-events: none;
}
.sw-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 20;
  background: rgba(250,249,245,.12);
}
.sw-progress-bar {
  height: 100%; width: 0%; background: var(--clay);
  transition: width .08s linear;
}

/* Captions laid over the scrubbing footage — visibility is driven
   inline by the scrollworld engine via data-at. */
.sw-caption {
  position: absolute; z-index: 10; width: min(520px, 86vw);
  padding: var(--s5); color: var(--paper);
  opacity: 0;
  pointer-events: none;
}
.sw-center { left: 50% !important; top: 50%; transform: translate(-50%,-50%) !important; text-align: center; width: min(640px, 90vw) !important; }
.sw-left   { left: 6vw !important; top: 50%; transform: translateY(-50%) !important; width: min(520px, 86vw) !important; }
.sw-right  { right: 6vw !important; top: 50%; transform: translateY(-50%) !important; text-align: right; width: min(520px, 86vw) !important; }
.sw-right .sw-eyebrow { justify-content: flex-end; }

.sw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay); font-weight: 600; margin-bottom: 14px;
}
.sw-eyebrow i, .sw-eyebrow svg { width: 15px; height: 15px; stroke-width: 2.2; }

.sw-title {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--paper); text-shadow: 0 2px 30px rgba(20,20,19,.45);
}
.sw-title em, .sw-title-sm em { font-style: italic; color: var(--clay); }
.sw-title-sm {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.02em;
  color: var(--paper); text-shadow: 0 2px 24px rgba(20,20,19,.45); margin-bottom: 12px;
}
.sw-sub {
  margin-top: 14px; font-size: 16.5px; line-height: 1.6;
  color: rgba(250,249,245,.88); text-shadow: 0 1px 16px rgba(20,20,19,.5);
}
.sw-btn { margin-top: 22px; display: inline-flex; }
.sw-cue { display: inline-block; margin-top: 26px; color: var(--paper); opacity: .85; animation: sw-bob 1.8s ease-in-out infinite; }
.sw-cue svg { width: 26px; height: 26px; }
@keyframes sw-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Legibility scrim behind side captions */
.sw-left::before, .sw-right::before {
  content: ''; position: absolute; inset: -28px -32px; z-index: -1;
  background: linear-gradient(135deg, rgba(20,20,19,.55), rgba(20,20,19,0) 70%);
  border-radius: var(--r-lg);
}
.sw-right::before { background: linear-gradient(225deg, rgba(20,20,19,.55), rgba(20,20,19,0) 70%); }

/* Mobile: .sw-mobile is added by the caption guard in index.html
   after it strips the engine's inline geometry. Keeping these rules
   on the class (not the media query alone) means desktop is untouched
   and the layout survives iOS address-bar resize races. */
@media (max-width: 760px) {
  .sw-caption.sw-mobile {
    /* Geometry comes from the guard's inline CENTER_STYLE; these are fallbacks. */
    text-align: left !important;
    padding: var(--s3);
  }
  .sw-caption.sw-mobile .sw-eyebrow { justify-content: center !important; }
  .sw-caption.sw-mobile .sw-btn { margin-left: auto !important; margin-right: auto !important; }
  .sw-caption.sw-mobile::before {
    content: ''; position: absolute; inset: -16px -18px; z-index: -1;
    background: linear-gradient(135deg, rgba(20,20,19,.62), rgba(20,20,19,.15) 80%);
    border-radius: var(--r-lg);
  }
  .sw-title { font-size: clamp(28px, 8.5vw, 42px); }
  .sw-title-sm { font-size: clamp(24px, 7vw, 34px); }
  .sw-sub { font-size: 15px; }
  .sw-cue { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sw-cue { animation: none; } }
/* ============ Reveal animation ============ */
/* Content is VISIBLE by default. The hidden/animated state only applies while
   JS has explicitly "armed" it (adds .reveal-armed to <html> synchronously),
   and the observer removes the armed-hidden state the moment it can. This way
   content can never be trapped invisible: no-JS, headless, reduced-motion, or
   a slow `load` all render fully visible. */
.reveal { opacity: 1; transform: none; }
html.reveal-armed .reveal:not(.in) { opacity: 0; transform: translateY(28px); }
html.reveal-armed .reveal { transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-armed .reveal:not(.in), .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee { animation: none; }
}

/* ============================================================
   LEGAL PAGES (privacy, terms)

   One measure-limited column. Legal text is read, not scanned,
   so it gets the serif face and a wider line-height than the
   marketing copy — and a max-width well under the site's, since
   the 1180px grid would run these paragraphs far past the ~70
   characters a reader can track without losing the line.
   ============================================================ */
.legal { padding: calc(var(--s10) + 24px) 0 var(--s9); }
.legal .wrap { max-width: 760px; }

.legal h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: var(--s4) 0 var(--s2);
}
.legal-date {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s6);
}
.legal-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6);
}
.legal h2 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: var(--s7) 0 var(--s3);
}
.legal p { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 var(--s4); }
.legal p strong { color: var(--ink); font-weight: 600; }
.legal ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.legal li { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 6px; }
.legal li::marker { color: var(--cloud-medium); }

.legal-link {
  color: var(--clay-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-link:hover { color: var(--ink); }

.legal-cross {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-weight: 500;
}

/* Legal links in the footer base row. */
.foot-legal { display: inline-flex; gap: var(--s4); }
.foot-legal a { color: var(--ink-muted); transition: color .2s; }
.foot-legal a:hover { color: var(--clay-deep); }

@media (max-width: 720px) {
  .legal { padding: calc(var(--s9) + 8px) 0 var(--s8); }
  .legal h2 { font-size: 21px; }
}

/* The legal pages have no footer link grid, so the base row's top
   margin would open a large empty band under the last paragraph. */
.legal + footer { padding-top: var(--s6); }
.legal + footer .foot-base { margin-top: 0; padding-top: 0; border-top: 0; }

/* Below 900px the nav links are hidden, and the auto margin that
   pushed the group right went with them — leaving the button
   stranded beside the wordmark. */
@media (max-width: 900px) {
  .nav-cta { margin-left: auto; }
}

/* ============================================================
   DOCUMENTATION

   Two columns: a sticky contents rail and a measure-limited
   body. The rail is a rail, not a panel — no border, no fill,
   just indentation — because a documentation page is mostly
   prose and a heavy sidebar competes with it for attention.
   ============================================================ */
.docs { padding: calc(var(--s10) + 8px) 0 var(--s9); }
.docs-shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s5);
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}

/* --- contents rail --- */
.docs-aside { position: sticky; top: 96px; max-height: calc(100vh - 128px); overflow-y: auto; }
.docs-nav h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin: var(--s5) 0 var(--s2);
}
.docs-nav-group:first-child h4 { margin-top: 0; }
.docs-nav a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 5px 0 5px 10px;
  border-left: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.is-current,
.docs-nav a[aria-current] { color: var(--clay-deep); border-left-color: var(--clay); font-weight: 500; }

/* --- body --- */
.docs-body { max-width: 760px; }
.docs-body h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5.5vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: var(--s4) 0 var(--s3);
}
.docs-lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 var(--s3); }
.docs-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s7);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
}

/* Spacing between sections comes from the section, and the heading has
   none of its own — with both, a jumped-to anchor landed the heading a
   long way below where the section actually started. */
/* Overrides the marketing page's global `section { padding: 128px 0 }`,
   which was landing every jumped-to heading a screen below its anchor. */
.docs-body section { scroll-margin-top: 88px; padding: 0 0 var(--s8); }
.docs-body h2 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 var(--s4);
}
.docs-body h3 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.005em;
  margin: var(--s5) 0 var(--s3);
}
.docs-body p { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 var(--s4); }
.docs-body ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.docs-body li { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 7px; }
.docs-body li::marker { color: var(--cloud-medium); }
.docs-body strong { color: var(--ink); font-weight: 600; }

.doc-link { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }
.doc-link:hover { color: var(--ink); }

/* Inline enumerations — engine lists, game lists — read better as one
   dotted run than as a bullet list twenty items long. */
.doc-inline-list {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-soft);
  padding: var(--s4) var(--s5);
  background: var(--paper-2);
  border-radius: var(--r-md);
}

.docs-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--paper-3);
  padding: 2px 5px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.docs-body kbd {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  padding: 2px 7px;
  color: var(--ink);
  white-space: nowrap;
}

/* --- tables --- */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s5);
  font-size: 15.5px;
}
.doc-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  padding: 0 var(--s4) var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.doc-table td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  line-height: 1.6;
  vertical-align: top;
}
.doc-table td:first-child { white-space: nowrap; }
.doc-table td:last-child { padding-right: 0; white-space: normal; }

/* --- definition lists --- */
.doc-list { margin: 0 0 var(--s5); }
.doc-list dt { font-weight: 600; color: var(--ink); font-size: 16px; margin-top: var(--s4); }
.doc-list dt:first-child { margin-top: 0; }
.doc-list dd { margin: 4px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* --- callouts --- */
.doc-note {
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  background: var(--paper-2);
  border-left: 2px solid var(--cloud-medium);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.doc-note-warn { border-left-color: var(--clay); }

/* --- overview cards --- */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s4);
  margin: 0 0 var(--s5);
}
.doc-card {
  padding: var(--s5);
  background: var(--paper-2);
  border-radius: var(--r-md);
}
.doc-card h3 { margin: 0 0 var(--s2); font-size: 15px; }
.doc-card p { margin: 0; font-size: 14.5px; line-height: 1.6; }

.docs-foot-note {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-muted);
}

.docs + footer { padding-top: var(--s6); }
.docs + footer .foot-base { margin-top: 0; padding-top: 0; border-top: 0; }

/* Below the two-column threshold the rail becomes a plain block of
   links above the prose. Sticky positioning is dropped with it — a
   pinned rail on a phone is just lost height. */
@media (max-width: 940px) {
  .docs { padding-top: calc(var(--s9) + 8px); }
  .docs-shell { grid-template-columns: 1fr; gap: var(--s6); }
  .docs-aside {
    position: static;
    max-height: none;
    padding-bottom: var(--s5);
    border-bottom: 1px solid var(--line);
  }
  /* Groups tile, links inside a group stay together. A flat h4/a
     sequence in a multi-column grid scatters each group's links into
     whichever column has room, which reads as a shuffled list. */
  .docs-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0 var(--s5);
    align-items: start;
  }
  .docs-nav-group h4 { margin-top: var(--s4); }
  .docs-nav-group:first-child h4 { margin-top: 0; }
  .docs-body h2 { font-size: 25px; }
}

/* The contents list folds on the stacked layout. On desktop the details
   element is invisible plumbing: no marker, no summary, always open. */
.docs-toc > summary { display: none; }
.docs-toc { border: 0; }

@media (max-width: 940px) {
  .docs-toc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: var(--s3) 0;
  }
  .docs-toc > summary::-webkit-details-marker { display: none; }
  .docs-toc > summary::after {
    content: "＋";
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink-muted);
  }
  .docs-toc[open] > summary::after { content: "－"; }
  .docs-toc[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
}

/* ---------- FAQ ----------
   Answers the structured data in the head also describes. Plain disclosure
   widgets rather than scripted accordions: they are open to find-in-page,
   they work before any JavaScript runs, and a crawler reads the answer
   whether or not the summary has been clicked. */
.faq-band { padding: 96px 0; }
.faq-list { margin-top: 32px; max-width: 760px; }
.faq-item {
  border-top: 1px solid var(--line, rgba(20, 20, 19, 0.12));
  padding: 20px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line, rgba(20, 20, 19, 0.12)); }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-weight: 400;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 12px 0 0; opacity: 0.78; max-width: 68ch; }