/* The landing page and the auth screens, in black glass (the black glass
 * spec, §4).
 *
 * Every colour, size, corner and shadow is a custom property from
 * @gamesteel/design. A literal here is a value somebody guessed, and the site
 * and the editor drift apart one guess at a time. A test enforces it. */

*, *::before, *::after { box-sizing: border-box }
:root { --nav-height: 58px }
html { color-scheme: dark }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
}

body {
  /* The site's accent is the forge's red (the owner, 2026-10-12: "Demo and connect still have the green colors,
     instead of forge red"); the editor keeps its mint. Every rule here that names the accent takes it from these. */
  --accent: var(--forge);
  --accent-hi: var(--forge-hi);
  --accent-ink: var(--forge-ink);
  --shadow-lit: var(--shadow-forge-lit);
  --shadow-primary: var(--shadow-forge-primary);
  --glass-select-line: var(--glass-forge-line);
  --glass-select: var(--glass-forge-select);
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--grain), var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: var(--lead-body);
  -webkit-font-smoothing: antialiased;
  /* Its own block, so the nav's top margin stays inside the page: passing
     through, it moved the room's glow 16px down and left a dark strip above
     it. */
  display: flow-root;
  /* The sparks' canvas runs edge to edge at 100vw, which counts a scrollbar
     the page does not have room for. Clipping, not hiding, keeps the nav
     sticky. */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none }
code { font-family: var(--mono); font-size: var(--size-small); color: var(--accent-hi) }

/* ---------- the room ---------- */

/* Behind the page: the resting glow, and the studio's own picture blurred far
   behind its window, so the glass has light to catch. It scrolls with the
   page, so the light stays behind the window. */
.room { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none }
.room::before, .room::after { content: ''; position: absolute; width: 1400px; max-width: 160vw; height: 900px }
/* The glow at the top is the mark's red (the owner, 2026-10-12); the editor keeps its mint. */
.room::before { left: 50%; top: -420px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--light-red), transparent) }
.room::after { right: -560px; top: 980px; background: radial-gradient(closest-side, var(--light-blue), transparent) }
.room-light {
  position: absolute;
  left: 50%;
  top: 640px;
  width: min(1120px, 92vw);
  aspect-ratio: 16 / 10;
  transform: translateX(-50%) scale(1.15);
  background: url('/studio.jpg') center / cover;
  filter: blur(calc(var(--light-blur) * 2.5));
  opacity: var(--light-game);
}

/* ---------- glass ---------- */

/* A see-through tint over the room, a sheen down its top, the grain that
   frosts it, and a 1px rim that catches the light at the top left. */
.nav, .button-glass, .film, .auth, .map-agent {
  position: relative;
  background: var(--grain), linear-gradient(180deg, var(--glass-sheen), transparent 42%), var(--glass-panel);
  box-shadow: var(--shadow-panel);
}
.nav::before, .button-glass::before, .film::before, .auth::before, .map-agent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(160deg, var(--glass-rim), var(--glass-rim-low) 24%, var(--glass-rim-low) 72%, var(--glass-rim-end));
  -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* What floats over the page blurs it, live, and is the denser float: the
   page passes under the nav. */
.nav {
  background: var(--grain), linear-gradient(180deg, var(--glass-sheen), transparent 50%), var(--glass-float-over);
  -webkit-backdrop-filter: var(--blur-float);
  backdrop-filter: var(--blur-float);
}

/* ---------- shared pieces ---------- */

/* The hero's glow and sparks reach past its box; the page ends with its footer all the same (the landing page is its
   hero and footer alone). Clipping, not hiding, keeps the nav sticky. */
.page { width: min(1120px, calc(100% - 2 * var(--space-16))); margin: 0 auto; overflow-y: clip }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 42px;
  padding: 0 var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--size-small);
  font-weight: var(--weight-card);
  color: var(--text);
  cursor: pointer;
  transition: filter 120ms ease-out, color 120ms ease-out;
}
.button-primary { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: var(--shadow-primary) }
.button-primary:hover { filter: brightness(1.06) }
.button-glass:hover { filter: brightness(1.25) }
.button-quiet { color: var(--text-2); background: transparent }
.button-quiet:hover { color: var(--text) }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }


/* ---------- navigation ---------- */

.nav {
  position: sticky;
  top: var(--space-16);
  z-index: 3;
  display: flex;
  align-items: center;
  --nav-gap: var(--space-24);
  gap: var(--nav-gap);
  margin-top: var(--space-16);
  min-height: var(--nav-height);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-24);
  border-radius: var(--radius-pill);
}
.wordmark { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
/* The logo (the owner, 2026-10-12): two drops of the hero's liquid steel melting into one, drawn by its own shader (studio
   tools/mark.ts), and the name beside them in polished steel, lit the same way. The gradient runs down the letters
   themselves, so the forge's orange reaches their lower edge. */
.wordmark-mark { flex: none; width: 44px; height: 28px; margin-block: calc(-1 * var(--space-4)) }
.wordmark-name { display: inline-block; line-height: 1; padding: 0.04em 0 0.12em; font-weight: 700; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent }
/* A phone keeps the nav's first row whole, the logo, Log in and Sign up: its buttons give up half their padding. */
@media (max-width: 420px) {
  .nav .button { padding: 0 var(--space-12) }
}
/* The logo at the left, Log in and Sign up at the right, and the links in the very middle of the nav, whatever the
   logo's and the buttons' widths (the owner, 2026-10-12: "Center this"). */
.nav .wordmark { margin-right: auto }
/* Log in right beside Sign up (the owner, 2026-10-13: "move log in closer to sign up"): the nav's gap gives way between
   them, and Log in keeps its padding only on its open side. */
.nav .button-quiet { padding-right: var(--space-12); margin-right: calc(var(--space-8) - var(--nav-gap)) }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-24); font-size: var(--size-small); color: var(--text-2) }
.nav-links a:hover { color: var(--text) }
.nav-links a[aria-current="page"] { color: var(--text) }

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

.hero { max-width: 880px; margin: 0 auto; padding-top: var(--space-96); text-align: center }
/* The first screen is the hero's alone: its words in the middle of it, and
   the studio's picture below the fold. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--space-16) - var(--nav-height));
  /* Everything in it, the AIs included, fits a laptop's first screen. */
  padding-top: var(--space-48);
  padding-bottom: var(--space-32);
}
/* White fading a little toward its foot, as light on glass does. */
.display {
  margin: var(--space-24) 0 0;
  font-size: var(--size-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-display);
  line-height: var(--lead-display);
  background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 68%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
  /* Review Focus 2: an unbroken word must not push the layout sideways. */
  overflow-wrap: break-word;
}
.lede {
  margin: var(--space-24) auto 0;
  max-width: 640px;
  font-size: var(--size-lede);
  font-weight: var(--weight-lede);
  letter-spacing: var(--track-lede);
  line-height: var(--lead-lede);
  color: var(--text-2);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); margin-top: var(--space-24) }
.hero-actions .button { min-height: 50px; font-size: var(--size-body) }
/* The 29 AIs that work with Gamesteel over MCP, each with its maker's logo in
   the text's colour where there is one: a carousel on every screen, edge to
   edge, fading in and out at the sides; the mouse or a touch holds it still.
   hero.js adds the second copy that closes its loop, and times it so it
   moves at one pace however many there are. */
.agents-label { margin: var(--space-32) 0 0; font-size: var(--size-small); color: var(--text-3) }
.agents {
  align-self: center;
  width: 100vw;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, white 12%, white 88%, transparent);
  mask-image: linear-gradient(to right, transparent, white 12%, white 88%, transparent);
}
.agents-marquee { display: flex; width: max-content; animation: agents-pass var(--agents-pass, 60s) linear infinite }
/* Held under the mouse, a touch, or a keyboard's focus, which would otherwise slide off the screen. */
.agents:hover .agents-marquee, .agents:active .agents-marquee, .agents:focus-within .agents-marquee { animation-play-state: paused }
.agents-list { display: flex; gap: var(--space-24); margin: var(--space-16) 0 0; padding: 0 var(--space-24) 0 0; list-style: none; font-size: var(--size-body) }
.agent { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--text-2) }
.agent:hover { color: var(--text) }
.agent-logo { flex: none; width: 1.25em; height: 1.25em }
@keyframes agents-pass { to { transform: translateX(-50%) } }

/* ---------- the landing hero's frame ---------- */

/* The owner (2026-10-12): "Move the carrousel more down, so its symmetric". The nav at the top of the first screen,
   the AIs at its foot, and the headline and the steel in the middle between them: the free space splits evenly
   above the headline and above the AIs. Only the landing hero holds the steel. */
.hero:has(> .hero-steel) > .display { margin-top: auto }
.hero-steel + .agents-label { margin-top: auto }

/* ---------- the way down ---------- */

/* At the foot of a subpage's first screen: a hairline with a spark sliding down it, to the part that follows. */
.scroll-cue { position: absolute; left: 50%; bottom: var(--space-24); display: block; width: var(--space-24); height: var(--space-64); transform: translateX(-50%) }
.scroll-cue::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--glass-select-line) 25%, var(--glass-select-line) 75%, transparent);
}
.scroll-cue-spark {
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 14px;
  margin-left: -2px;
  border-radius: var(--radius-pill);
  background: var(--accent-hi);
  box-shadow: var(--shadow-lit);
  animation: scroll-cue 2.4s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(0); opacity: 0 }
  25% { opacity: 1 }
  75% { opacity: 1 }
  100% { transform: translateY(50px); opacity: 0 }
}
.scroll-cue:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-pill) }
/* Arriving from the way down, or a link, below the floating nav. */
.took, .film, .how, .map-section, .log { scroll-margin-top: calc(var(--nav-height) + var(--space-32)) }

/* ---------- the liquid steel ---------- */

/* The middle of the hero (the owner, 2026-10-12: "go ahead with liquid
   steel"): drops of polished molten steel, slowly merging and parting, the
   forge's orange glowing up into them. steel.js draws it with WebGL, in the
   colours from @gamesteel/design, and draws one still frame for somebody who
   asked for less motion. On a phone the stage shrinks to fit across. */
.hero-steel {
  display: block;
  width: min(980px, 100%);
  height: 300px;
  margin: var(--space-8) 0 calc(-1 * var(--space-16));
  pointer-events: none;
}
@media (max-width: 600px) {
  .hero-steel { height: 200px }
}

/* ---------- the sparks ---------- */

/* Behind the hero, edge to edge: sparks rising in slow motion, as from a
   forge below the page. sparks.js draws them on the canvas, in the spark
   colours from @gamesteel/design, and draws one still frame for somebody who
   asked for less motion. They dim behind the headline, so the words stay as
   readable as on the bare page, and fade out at the top and the bottom. */
.hero { position: relative; isolation: isolate }
/* The forge's warmth, low behind the hero: centred on its foot and gone
   before any edge of its box, so nothing shows where it ends. */
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40%;
  width: 100vw;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--spark-orange) 9%, transparent), transparent);
  pointer-events: none;
}
.hero-sparks {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-128));
  left: 50%;
  width: 100vw;
  height: calc(100% + var(--space-128) + var(--space-64));
  transform: translateX(-50%);
  pointer-events: none;
  /* A mask is read for its alpha alone: these colours are never drawn. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, white 18%, white 82%, transparent), radial-gradient(ellipse 34% 30% at 50% 44%, color-mix(in srgb, white 35%, transparent), white);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, white 18%, white 82%, transparent), radial-gradient(ellipse 34% 30% at 50% 44%, color-mix(in srgb, white 35%, transparent), white);
  mask-composite: intersect;
}

/* ---------- how it works ---------- */

.how { padding: var(--space-96) 0 var(--space-48) }
.section-head {
  margin: 0;
  font-size: var(--size-section);
  font-weight: var(--weight-section);
  letter-spacing: var(--track-section);
  line-height: var(--lead-section);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.how .section-head, .how > .lede { text-align: center }

/* The film, behind glass. It loads nothing until somebody presses play. */
.film { margin: var(--space-48) 0 0; padding: var(--space-8); border-radius: var(--radius-xxl) }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); background: var(--bg) }
.film-said { margin: var(--space-12) var(--space-16) var(--space-8); font-size: var(--size-small); line-height: var(--lead-small); color: var(--text-3); text-align: center; text-wrap: pretty }

/* How Earthfall was made, read down one lit line: a picture and its words
   either side of it, changing sides at each step. No boxes (the owner hates
   cards): the line is what holds the steps together. */
.making { position: relative; margin: var(--space-64) 0 0; padding: 0; list-style: none }
.making::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--glass-select-line) 8%, var(--glass-select-line) 92%, transparent);
}
.step {
  display: grid;
  /* Continuous, not stepped: two shares of the row that never hold a column
     wider than it, either side of the line, down to the one-column rule. */
  grid-template-columns: minmax(0, 1fr) var(--space-64) minmax(0, 1fr);
  align-items: center;
  padding: var(--space-32) 0;
}
/* Where the step sits on the line: a lit point between its picture and its
   words. */
.step::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-hi);
  box-shadow: var(--shadow-lit);
}
.step-frame { grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-panel) }
.step-words { grid-column: 3; grid-row: 1; min-width: 0 }
.step:nth-child(even) .step-frame { grid-column: 3 }
.step:nth-child(even) .step-words { grid-column: 1 }
.step-title { margin: 0; font-size: var(--size-lede); font-weight: var(--weight-card); letter-spacing: var(--track-card); line-height: var(--lead-card); text-wrap: balance }
.step-body { margin: var(--space-12) 0 0; color: var(--text-2); text-wrap: pretty }
.step-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--glass-select-line); text-underline-offset: 3px }
.step-link:hover { text-decoration-color: var(--accent) }
/* The tools it called, in the product's own words: one call to a line, so
   two calls are never read as one. */
.step-tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin: var(--space-16) 0 0 }
.step-tools code { overflow-wrap: anywhere }

/* The demo's last word: make your own. */
.demo-end { padding: var(--space-48) 0 var(--space-96); text-align: center }

/* What the studio and the terminal add, after the line ends: two thoughts
   side by side under a hairline, not two boxes. */
.coda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-24) var(--space-64);
  margin: var(--space-48) 0 0;
  padding: var(--space-32) 0 0;
  border-top: 1px solid var(--glass-hair);
}
.coda-part { min-width: 0 }

/* ---------- what it took ---------- */

/* The demo's real cost, ruled like a ledger on the page itself. */
.took { max-width: 760px; margin: 0 auto; padding: var(--space-48) 0 }
.took .section-head, .took > .lede { text-align: center }
.took-list { margin: var(--space-32) 0 0; border-bottom: 1px solid var(--glass-hair) }
/* The Connect page's 31 agents, in groups a person can find theirs in. */
.took-group { margin: var(--space-48) 0 0; font-size: var(--size-small); font-weight: var(--weight-card); color: var(--text-3) }
.took-group + .took-list { margin-top: var(--space-12) }
/* The hero links to an agent's row; it lands below the floating nav. */
.took-row { display: grid; grid-template-columns: var(--space-128) minmax(0, 1fr); gap: var(--space-24); align-items: baseline; padding: var(--space-16) 0; border-top: 1px solid var(--glass-hair); scroll-margin-top: var(--space-128) }
.took-term { font-size: var(--size-small); color: var(--text-3) }
.took-said { margin: 0; color: var(--text) }
.took-more { display: block; margin-top: var(--space-4); font-size: var(--size-small); line-height: var(--lead-small); color: var(--text-2); text-wrap: pretty }
.took-note { margin: var(--space-16) 0 0; font-size: var(--size-small); line-height: var(--lead-small); color: var(--text-3); text-wrap: pretty }

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

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-32) 0 var(--space-48);
  border-top: 1px solid var(--glass-hair);
  font-size: var(--size-small);
  color: var(--text-3);
}
.foot .wordmark { color: var(--text) }
/* Six links since Pricing joined them: on a phone they wrap to a second line rather than push the page sideways. */
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin-left: auto }
.foot-links a:hover { color: var(--text) }
/* The language switch (the owner, 2026-10-13): a segmented pill after the links, each language named in itself, the
   page's own raised. */
.foot-lang { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--glass-well); border: 1px solid var(--glass-hair); border-radius: var(--radius-pill) }
.foot-lang a { padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); color: var(--text-2) }
.foot-lang a:hover { color: var(--text) }
.foot-lang a[aria-current="true"] { color: var(--text); background: var(--glass-raised); box-shadow: var(--shadow-raised) }

/* ---------- the Connect page's pick ---------- */

/* A box a person types their AI into, its list opening under it (connect.js); once picked, only that AI's steps
   show. Without scripts the box is never offered a list, and the whole of it stays below. */
.picker { position: relative; max-width: 560px; margin: var(--space-32) auto var(--space-16); text-align: left }
.picker-label { display: block; margin-bottom: var(--space-8); font-size: var(--size-small); color: var(--text-2) }
.picker-input {
  width: 100%;
  min-width: 0;
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--glass-well);
  box-shadow: var(--shadow-well);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-body);
}
.picker-input:focus { outline: 2px solid var(--accent); outline-offset: 1px }
.picker-input::placeholder { color: var(--text-3) }
.picker-options {
  position: absolute;
  z-index: 2;
  top: calc(100% + var(--space-8));
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-4);
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
}
.picker-option { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); padding: var(--space-8) var(--space-12); border-radius: var(--radius-md); color: var(--text); cursor: pointer }
.picker-option:hover, .picker-option[aria-selected="true"] { background: var(--glass-select) }
.picker-how { font-size: var(--size-small); color: var(--text-3); text-align: right }
/* A row the pick hides, though rows are laid out as grids. */
.took [hidden], .picker [hidden] { display: none }

/* The MCP tools the picked AI gets, compact: names in columns, quiet, read at a glance. */
.tools { margin: var(--space-32) 0 0 }
.tools-head { margin: 0; font-size: var(--size-small); font-weight: var(--weight-card); color: var(--text-3) }
.tools-set + .tools-set { margin-top: var(--space-24) }
.tools-said { margin: var(--space-8) 0 0; font-size: var(--size-small); color: var(--text-3) }
.tools-list { columns: 4 160px; column-gap: var(--space-24); margin: var(--space-16) 0 0; padding: 0; list-style: none }
.tools-list li { padding: var(--space-4) 0; break-inside: avoid }
.tools-list code { color: var(--text-2) }

/* ---------- the engine's map ---------- */

/* The owner (2026-10-12): the agent, its branches and their tools, as a diagram. The agent in the middle, lit; four
   branches either side, each a lit dot, its name, a line of what it does and its tools; engine.js draws the lines
   from the agent's sides to the dots. No boxes round the branches: a diagram, not cards. On a phone the branches
   stack down one lit line. */
.map-section { padding: var(--space-64) 0 var(--space-48); text-align: center }
.map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px) minmax(0, 1fr);
  column-gap: var(--space-96);
  margin-top: var(--space-64);
  text-align: left;
}
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.map-line { fill: none; stroke: var(--glass-select-line); stroke-width: 1.25 }
.map-glow { fill: none; stroke: var(--glass-select); stroke-width: 6; stroke-linecap: round }
.map-pulse { fill: none; stroke: var(--accent-hi); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; animation: map-pulse 2.8s linear infinite }
@keyframes map-pulse { to { stroke-dashoffset: 0 } }
/* The middle column: the engine's version, and under it the agent the lines come from. */
.map-core { grid-column: 2; grid-row: 1; align-self: center }
.map-version { margin: 0 0 var(--space-12); font-size: var(--size-small); color: var(--text-3); text-align: center; white-space: nowrap }
/* Its arrow is drawn, in the middle of its height and as far from the right edge as the text is from the left (the
   owner, 2026-10-17: "align the arrow in the dropdown correctly"); its list opens centred under it (data-dropdown-center). */
.map-version-pick {
  margin-left: var(--space-4); padding: 2px calc(var(--space-8) * 2 + 12px) 2px var(--space-8); border: 1px solid var(--glass-hair);
  border-radius: var(--radius-md); appearance: none; -webkit-appearance: none;
  background: var(--chevron) no-repeat right var(--space-8) center / 12px 12px, var(--glass-well);
  color: var(--text-2); font: inherit; cursor: pointer;
}
.map-version-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.map-version-said { margin: calc(-1 * var(--space-8)) 0 var(--space-12); font-size: var(--size-small); color: var(--text-3); text-align: center }
.map [hidden] { display: none }
/* Under the agent: what changed in each version, on its own page. */
.map-updates { margin: var(--space-12) 0 0; font-size: var(--size-small); text-align: center }
.map-updates a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--glass-select-line); text-underline-offset: 3px }
.map-updates a:hover { color: var(--text); text-decoration-color: var(--accent) }
.map-agent {
  position: relative;
  padding: var(--space-24) var(--space-16);
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-lit);
}
.map-agent-name { margin: 0; font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
.map-agent-said { margin: var(--space-8) 0 0; font-size: var(--size-small); line-height: var(--lead-small); color: var(--text-2) }
.map-agent-first { margin: var(--space-12) 0 0; font-size: var(--size-small); color: var(--text-3) }
.map-side { display: flex; flex-direction: column; justify-content: center; gap: var(--space-48); margin: 0; padding: 0; list-style: none }
.map-left { grid-column: 1; grid-row: 1; text-align: right }
.map-right { grid-column: 3; grid-row: 1 }
.branch { position: relative }
.branch-dot { position: absolute; top: 0.4em; width: 11px; height: 11px; border-radius: var(--radius-pill); background: var(--accent-hi); box-shadow: var(--shadow-lit) }
.map-left .branch-dot { right: calc(-1 * var(--space-24) - 6px) }
.map-right .branch-dot { left: calc(-1 * var(--space-24) - 6px) }
.branch-name { margin: 0; font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
.branch-said { margin: var(--space-4) 0 0; font-size: var(--size-small); line-height: var(--lead-small); color: var(--text-2); text-wrap: pretty }
.branch-tools { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); margin: var(--space-12) 0 0; padding: 0; list-style: none }
.map-left .branch-tools { justify-content: flex-end }
.branch-tools code { color: var(--text-3) }
@media (max-width: 900px) {
  .map { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-48); margin-top: var(--space-48) }
  .map-lines { display: none }
  .map-core { grid-column: 1; grid-row: 1 }
  .map-left, .map-right { grid-column: 1; grid-row: auto; text-align: left; padding-left: var(--space-24); border-left: 1px solid var(--glass-select-line) }
  .map-left .branch-dot, .map-right .branch-dot { left: calc(-1 * var(--space-24) - 6px); right: auto }
  .map-left .branch-tools { justify-content: flex-start }
}

/* ---------- updates ---------- */

/* Every update, newest first, ruled like a ledger: when and at which engine version on the left, what came and what
   was fixed on the right. */
.log { max-width: 880px; margin: 0 auto; padding: var(--space-48) 0 var(--space-96) }
.log-entry { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-32); padding: var(--space-32) 0; border-top: 1px solid var(--glass-hair) }
.log-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin: 0; font-size: var(--size-small); color: var(--text-3) }
.log-version { font-family: var(--mono); color: var(--accent-hi) }
.log-body { min-width: 0 }
.log-title { margin: 0; font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
.log-kind { margin: var(--space-16) 0 0; font-size: var(--size-small); font-weight: var(--weight-card); color: var(--text-3) }
.log-list { margin: var(--space-8) 0 0; padding-left: var(--space-16); color: var(--text-2); text-wrap: pretty }
.log-list li + li { margin-top: var(--space-8) }
@media (max-width: 900px) {
  .log-entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-12) }
}

/* ---------- terms and privacy ---------- */

/* Read down one column, plainly: a heading, then what it means. */
.legal { max-width: 720px; margin: 0 auto; padding: var(--space-96) 0 var(--space-64) }
.legal .section-head { margin-top: var(--space-16) }
.legal-updated { margin: var(--space-12) 0 0; font-size: var(--size-small); color: var(--text-3) }
.legal-head { margin: var(--space-48) 0 0; font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
.legal-text { margin: var(--space-12) 0 0; color: var(--text-2); text-wrap: pretty }

/* ---------- sign up and log in ---------- */

.centred { display: grid; place-items: center; min-height: 100vh; padding: var(--space-24) }
.auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-xl);
  padding: var(--space-32);
}
.auth-title { margin: var(--space-8) 0 0; font-size: var(--size-card); font-weight: var(--weight-card) }
/* A part of the Account page: its password, its sign-out, its deletion. */
.auth-part { margin: var(--space-8) 0 0; font-size: var(--size-body); font-weight: var(--weight-card) }
.auth-form { display: flex; flex-direction: column; gap: var(--space-16) }
.field { display: flex; flex-direction: column; gap: var(--space-8) }
.field-label { font-size: var(--size-small); color: var(--text-2) }
.field-input {
  font-family: var(--font);
  font-size: var(--size-body);
  padding: var(--space-12);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--glass-well);
  box-shadow: var(--shadow-well);
  color: var(--text);
  /* Review Focus 2: a long email must not widen the card past the viewport. */
  min-width: 0;
  width: 100%;
}
.field-input:focus { outline: 2px solid var(--accent); outline-offset: 1px }
/* A dropdown draws its own chevron, inside the field and clear of its edge as the text is (the owner, 2026-10-15:
   "fix the arrow so it is correct and not almost outside the field"); its list opens in the page (dropdown.js). */
select.field-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-12) * 2 + 16px);
  background: var(--chevron) no-repeat right var(--space-12) center / 16px 16px, var(--glass-well);
  cursor: pointer;
  text-overflow: ellipsis;
}
.auth-submit { width: 100% }
.auth-note { margin: 0; font-size: var(--size-small); color: var(--warn) }
.auth-said:empty { display: none }
.auth-said {
  margin: 0;
  font-size: var(--size-small);
  color: var(--text);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  background: var(--glass-select);
}
.auth-alt { margin: 0; font-size: var(--size-small); color: var(--text-3) }
.auth-alt a { color: var(--text); text-decoration: underline }

/* ---------- less transparency ---------- */

/* Somebody who asked their computer for less transparency gets the glass's
   solid stand-ins, and no blur. */
@media (prefers-reduced-transparency: reduce) {
  .nav, .button-glass, .film, .auth, .map-agent { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none }
}

/* ---------- a narrow window ---------- */

@media (max-width: 900px) {
  .hero { padding-top: var(--space-64) }
  .display { font-size: var(--size-display-sm) }
  .section-head { font-size: var(--size-section-sm) }
  /* The row does not fit on a phone. It WRAPS inside its glass rather than
     hiding a link, because a link nobody can reach is a link that does
     nothing. */
  .nav { flex-wrap: wrap; --nav-gap: var(--space-12); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16); border-radius: var(--radius-xl) }
  .nav-links { position: static; transform: none; order: 3; width: 100%; justify-content: center; gap: var(--space-24); padding: 0 0 var(--space-4) }
  .how { padding-top: var(--space-64) }
  /* One column beside the line, which moves to the left edge: the picture,
     then its words, each step's lit point beside its title. */
  .making { margin-top: var(--space-48) }
  .making::before { left: calc(var(--space-24) / 2) }
  .step { grid-template-columns: var(--space-24) minmax(0, 1fr); row-gap: var(--space-16); align-items: start; padding: var(--space-24) 0 }
  .step::before { grid-column: 1; grid-row: 2; margin-top: var(--space-8) }
  .step-frame, .step:nth-child(even) .step-frame { grid-column: 2; grid-row: 1 }
  .step-words, .step:nth-child(even) .step-words { grid-column: 2; grid-row: 2 }
  .took-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4) }
  .foot-links { margin-left: 0 }
}


/* ---------- pricing ---------- */
/* The plans (the account pages spec, §2): three columns on one lit line, not boxes; the pick's part of the line
   glows in the forge's red. */
.plans, .faq { scroll-margin-top: calc(var(--nav-height) + var(--space-32)) }
.plans { max-width: 1080px; margin: 0 auto; padding: var(--space-48) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32) }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24) 0 0; border-top: 1px solid var(--glass-hair) }
.plan.is-pick { border-top-color: transparent }
.plan.is-pick::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent) }
/* On the name's row, at its right, so the pick's name and price line up with its neighbours'. */
.plan-pick { position: absolute; top: var(--space-24); right: 0; margin: 0; font-size: var(--size-small); color: var(--accent-hi) }
.plan-name { margin: 0; font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
.plan-price { margin: 0; color: var(--text-2) }
.plan-amount { font-size: var(--size-section); font-weight: var(--weight-section); letter-spacing: var(--track-section); color: var(--text) }
.plan-seats, .plan-everything { margin: 0; font-size: var(--size-small); color: var(--text-3) }
.plan-includes { margin: 0; padding-left: var(--space-16); color: var(--text-2); text-wrap: pretty }
.plan-includes li + li { margin-top: var(--space-8) }
.plans-more { max-width: 1080px; margin: var(--space-32) auto 0; color: var(--text-2); text-align: center; text-wrap: pretty }
.plan-start { margin-top: auto; align-self: flex-start }
/* The questions start where the plans start (the owner, 2026-10-13: "move the questions to the left"); their lines
   keep a reading width. */
.faq { max-width: 1080px; margin: 0 auto; padding: var(--space-64) 0 0 }
.faq > * { max-width: 720px }
.faq { padding-bottom: var(--space-96) }
.faq-q { margin: var(--space-32) 0 0; font-size: var(--size-card); font-weight: var(--weight-card); letter-spacing: var(--track-card) }
.faq-a { margin: var(--space-8) 0 0; color: var(--text-2); text-wrap: pretty }
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important }
  /* The carousel holds still and scrolls by hand, once through. */
  .agents { overflow-x: auto }
  .agents-echo { display: none }
  /* The way down, still, its spark resting halfway. */
  .scroll-cue-spark { animation: none; transform: translateY(24px) }
  /* The map's lines, still: no spark running along them. */
  .map-pulse { display: none }
}