/* OHQ site, in the style of the pre-seed deck (strategy/ohq-preseed-deck.html): black, grey and
   white only, in warm neutrals, with no accent color. Emphasis comes from weight, fill and
   inversion, and --grey is the brand's second tone (the O in the wordmark). Ink sections (.ink)
   redefine the tokens, so every component works on both. brand.html documents the system. */
:root {
  --paper: #f6f4f3;
  --surface: #ffffff;
  --sunk: #ece9e7;
  --ink: #1c1a1a;
  --ink-2: #4b4646;
  --ink-3: #6e6969;
  --rule: #e3dfdd;
  --rule-strong: #cbc6c4;
  --grey: #8f8989;
  --on-ink: #f6f4f3;
  --ink-hover: #3a3535;
  --shadow: rgba(28, 26, 26, 0.16);

  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --section: clamp(72px, 9vw, 128px);
  color-scheme: light;
}

.ink {
  --paper: #161414;
  --surface: #1f1c1c;
  --sunk: #2a2626;
  --ink: #f1ecec;
  --ink-2: #b7b1b1;
  --ink-3: #8f8989;
  --rule: #2e2a2a;
  --rule-strong: #403b3b;
  --grey: #6b6565;
  --on-ink: #161414;
  --ink-hover: #d9d3d3;
  --shadow: rgba(0, 0, 0, 0.5);
  background: var(--paper);
  color: var(--ink);
  color-scheme: dark;
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

strong { font-weight: 650; color: var(--ink); }

h1, h2, h3 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.625rem, 1.3rem + 4.4vw, 5rem); font-weight: 820; font-stretch: 112%; line-height: 1; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); font-weight: 780; font-stretch: 112%; line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 780; font-stretch: 110%; line-height: 1.15; letter-spacing: -0.02em; }

code, pre { font-family: var(--f-mono); font-stretch: 87.5%; }
:not(pre) > code {
  font-size: 0.8em;
  background: var(--sunk);
  padding: 0.1em 0.35em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* mono labels: the eyebrow over a section, and the small caps on cards */
.eyebrow, .label {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label { font-size: 0.6875rem; font-weight: 600; }

.num, .card-num {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.stat {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .unit {
  margin-left: 0.14em;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- the wordmark ---------- */

/* OHQ drawn as walls on a 48-unit grid, the O for Open in grey. It is 1em tall and its letters stand
   at y=45 of 48, so it drops 3/48 em to sit on the baseline of the ".ai" beside it. The Q's tail
   runs past the edge, so nothing is clipped. */
.wordmark { flex: none; display: block; width: 2.792em; height: 1em; overflow: visible; }
.wordmark path { fill: none; stroke: var(--ink); stroke-width: 6; }
.wordmark .wm-o { stroke: var(--grey); }
/* the full name: the same walls with PEN added, OPEN in grey. 269 units wide. */
.wordmark--full { width: 5.604em; }
/* the logomark: the O on its own, in ink, for small sizes */
.wordmark--mark { width: 1em; }
/* the AgentFGA wordmark: AGENT in grey, FGA in ink, the last A drawn as its mark. 360 units wide. */
.wordmark--fga { width: 7.5em; max-width: 100%; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.brand .wordmark { position: relative; top: 0.0625em; }
.tld {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

/* ---------- header and footer ---------- */

.site-header { border-bottom: 1px solid var(--rule); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-block: 20px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 26px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a, .nav-menu > summary {
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav-menu > summary:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* Top right: GitHub with its star count, then Log in and Sign up. The nav sits beside them on
   wide screens and takes its own row below the logo when they no longer fit on one. */
.site-header .nav { margin-left: auto; }
.bar-actions { display: flex; align-items: center; gap: 18px; }
.gh {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.gh > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; }
.gh-stars { border-left: 1px solid var(--rule-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
.gh svg { flex: none; width: 14px; height: 14px; fill: currentColor; }
.gh-stars svg { width: 12px; height: 12px; fill: var(--grey); }
.gh:hover { border-color: var(--ink-3); color: var(--ink); }
.bar-link {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.bar-link:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
/* .bar-actions raises these over .btn and .btn-primary, which come later in the file */
.bar-actions .btn-sm { padding: 7px 14px 8px; border-radius: 10px; font-size: 0.875rem; white-space: nowrap; }
.bar-actions .btn-sm::after { content: none; }
@media (max-width: 1139px) {
  .site-header .nav { order: 3; width: 100%; margin-left: 0; }
}
/* On phones, GitHub becomes its icon and the count, so the actions share the logo's row. */
@media (max-width: 560px) {
  .site-header .bar { column-gap: 12px; }
  .bar-actions { gap: 10px; }
  .bar-actions .btn-sm { padding-inline: 11px; }
  .gh-word, .gh-stars svg { display: none; }
  .gh-name { padding-right: 0 !important; }
  .gh-stars { border-left: 0; padding-left: 7px !important; }
}
@media (max-width: 400px) { .site-header .brand { font-size: 1.25rem; } }

/* Products dropdown: a <details>, so it opens without JS; site.js closes it on Escape or an
   outside click. */
.nav-menu { position: relative; }
.nav-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav-menu[open] > summary { color: var(--ink); }
.nav-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  left: -14px;
  width: max-content;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px var(--shadow);
}
.nav .nav-panel a {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 0;
  border-radius: 9px;
  font-family: var(--f-body);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}
.nav .nav-panel a:hover { background: var(--sunk); }
.nav-item-name { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1rem; color: var(--ink); }
.nav-item-desc { color: var(--ink-3); }

/* Once the nav wraps under the logo, hang the panel from the nav's left edge so it stays on
   screen. */
@media (max-width: 720px) {
  .nav { position: relative; }
  .nav-menu { position: static; }
  .nav-panel { left: 0; width: min(100%, 20rem); }
}

/* Pinned to the bottom: body is a column at least as tall as the window, so on a short page the
   footer sits at the foot of the window instead of straight after the content. */
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); }
.foot {
  display: grid;
  gap: 20px;
  padding-block: 30px 40px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .foot { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .foot .nav { justify-content: center; }
}
.foot .brand { font-size: 1.25rem; letter-spacing: 0; }

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

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ruled in ink like the deck's product boxes; the primary one is filled */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 13px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-display);
  font-stretch: 106%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--sunk); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-primary::after { content: "→"; transition: transform 0.15s; }
.btn-primary:hover::after { transform: translateX(3px); }

/* Onboard your agent: the assistants it works with, as overlapping badges inside the button.
   Each badge's ring is the button's own color, so it follows the hover state and .ink sections. */
.btn-onboard { gap: 12px; padding-left: 12px; }
.agent-logos { display: inline-flex; }
.agent-logos svg {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--on-ink);
  fill: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
  flex: none;
  transition: box-shadow 0.15s;
}
.agent-logos svg + svg { margin-left: -7px; }
.btn-onboard:hover .agent-logos svg { box-shadow: 0 0 0 2px var(--ink-hover); }

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

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }
.section.ink, .ink + .section, .section-tight { border-top: 0; }
.section > .wrap { display: grid; gap: clamp(36px, 4.5vw, 64px); }
.alt, .section-alt { background: var(--surface); }

.section-head { display: grid; gap: 18px; max-width: 54rem; align-content: start; }
.section-head > p:not(.eyebrow):not(.label) {
  max-width: 44rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.card > p:not(.num):not(.label):not(.card-num) { font-size: 1rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.lede { max-width: 34rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.lede strong { font-weight: 600; }

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

.hero { padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 120px); overflow: hidden; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lockup { display: block; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px; }
  /* sized to the column, so "infrastructure" always fits on its line */
  .hero h1 { font-size: min(4.75rem, 5.3vw); }
  .hero-fig { margin-right: calc(-1 * var(--gutter)); }
}

/* the OHQ wordmark built as a headquarters, in the deck's isometric projection, with agents walking
   in through the O's door (copied from the deck's title slide) */
.hero-fig { min-width: 0; }
.hero-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
#hero-dots circle { fill: var(--ink-3); }
.hero-lanes polyline { fill: none; stroke: var(--ink-3); stroke-width: 0.3; stroke-dasharray: 1 1.4; }
.hero-shadow path { fill: none; stroke: var(--ink); stroke-width: 7; opacity: 0.22; }
.hero-sides polygon { stroke-width: 0.25; stroke-linejoin: round; }
.hero-tops path { fill: none; stroke: #1c1a1a; stroke-width: 6; }
.hero-tops path.o { stroke: #8f8989; }
.hero-ag polygon { stroke-width: 0.15; stroke-linejoin: round; }
.ag-front { fill: #4b4646; stroke: #4b4646; }
.ag-side { fill: #1c1a1a; stroke: #1c1a1a; }
.ag-top { fill: #8f8989; stroke: #8f8989; }
@keyframes hero-a { 0% { transform: translate(-33.16px, 81.17px); } 66.67% { transform: translate(-10.62px, 49.67px); } 100% { transform: translate(0.65px, 33.92px); } 0% { opacity: 0; } 8.33% { opacity: 1; } 91.67% { opacity: 1; } 100% { opacity: 0; } }
.hero-ag--a { animation: hero-a 12s linear infinite; }
@keyframes hero-b { 0% { transform: translate(-53px, 32.92px); } 66.67% { transform: translate(-10.62px, 49.67px); } 100% { transform: translate(0.65px, 33.92px); } 0% { opacity: 0; } 8.33% { opacity: 1; } 91.67% { opacity: 1; } 100% { opacity: 0; } }
.hero-ag--b { animation: hero-b 12s linear infinite; }
@keyframes hero-c { 0% { transform: translate(79.44px, 85.26px); } 80.95% { transform: translate(-10.62px, 49.67px); } 100% { transform: translate(0.65px, 33.92px); } 0% { opacity: 0; } 4.76% { opacity: 1; } 95.24% { opacity: 1; } 100% { opacity: 0; } }
.hero-ag--c { animation: hero-c 21s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero-ag { animation-play-state: paused; } }

/* ---------- mission: the name spelled out ---------- */

.mission-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) {
  .mission-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 96px; }
}
.mv { display: grid; gap: 40px; }
.mv > div { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--rule); }
.mv h1 { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem); font-weight: 780; line-height: 1.04; letter-spacing: -0.025em; }
.vision {
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 720;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: balance;
}
/* the grey Open is the mission; HQ is the headquarters, the vision. The columns follow the
   wordmark, where Open takes 180 of its 269 units. */
.name { display: grid; gap: 22px; }
.name .wordmark { width: 100%; height: auto; }
.name figcaption { display: grid; grid-template-columns: 180fr 89fr; gap: 16px; }
.name figcaption div { display: grid; gap: 4px; padding-top: 12px; border-top: 3px solid var(--ink); }
.name figcaption div:first-child { border-top-color: var(--grey); }
.name b { font-family: var(--f-display); font-stretch: 112%; font-weight: 760; font-size: clamp(0.9375rem, 0.7rem + 1.1vw, 1.5rem); letter-spacing: -0.01em; color: var(--ink); }
.name figcaption span { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- product: AgentFGA ---------- */

.product-top { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .product-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
.product-top .section-head { gap: 22px; }

.prod-id { display: flex; align-items: center; gap: 16px; }
.prod-id > span:last-child { display: grid; gap: 2px; }
.prod-id b { font-family: var(--f-display); font-stretch: 110%; font-weight: 780; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }

.gate-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--sunk); }
/* the AgentFGA mark: the A with its feet turned in and its crossbar in grey as a gate */
.gate-icon svg { width: 26px; height: 26px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 6; }
.gate-icon .wm-o { stroke: var(--grey); }

/* AgentFGA art: the AgentFGA mark, the gate A, laid flat and built as walls in the hero's
   projection. Agents walk in between its feet and are checked at its crossbar, a low grey gate;
   the gate sinks into the floor only for those allowed, and each walks to the one tile it was
   granted. Generated, with the figure in index.html; the timings are one 30s loop. */
.fga-fig { min-width: 0; width: 100%; max-width: 620px; justify-self: center; }
@media (min-width: 1000px) { .fga-fig { max-width: none; margin-right: calc(-1 * var(--gutter)); } }
.fga-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
#fga-dots circle { fill: var(--ink-3); }
.fga-lanes polyline { fill: none; stroke: var(--ink-3); stroke-width: 0.3; stroke-dasharray: 1 1.4; }
.fga-pad { fill: none; stroke: var(--ink-3); stroke-width: 0.3; }
.fga-pad-flash { fill: #f1ecec; opacity: 0; }
.fga-faces polygon { stroke-width: 0.25; stroke-linejoin: round; }
.fga-lit { fill: #f1ecec; stroke: #f1ecec; stroke-width: 0.25; opacity: 0; }
.fga-ag { opacity: 0; }
.fga-ag polygon { stroke-width: 0.15; stroke-linejoin: round; }
.fga-ag .f { fill: #6b6565; stroke: #6b6565; }
.fga-ag .s { fill: #403b3b; stroke: #403b3b; }
.fga-ag .t { fill: #b7b1b1; stroke: #b7b1b1; }
.fga-in .t { fill: #f1ecec; stroke: #f1ecec; }
@keyframes fga-k0 { 0.00% { transform: translate(-18.62px, 95.92px); } 19.94% { transform: translate(-7.8px, 68.04px); } 40.19% { transform: translate(9.82px, 43.29px); } 42.53% { transform: translate(9.82px, 43.29px); } 51.71% { transform: translate(17.82px, 32.07px); } 100.00% { transform: translate(17.82px, 32.07px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 51.71% { opacity: 1; } 51.74% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-o0 { animation: fga-k0 30s linear -11.06s infinite; }
@keyframes fga-k1 { 0.00% { fill: #b7b1b1; } 41.03% { fill: #b7b1b1; } 42.03% { fill: #f1ecec; } 100.00% { fill: #f1ecec; } 0.00% { stroke: #b7b1b1; } 41.03% { stroke: #b7b1b1; } 42.03% { stroke: #f1ecec; } 100.00% { stroke: #f1ecec; } }
.fga-o0t { animation: fga-k1 30s linear -11.06s infinite; }
@keyframes fga-k2 { 0.00% { transform: translate(17.82px, 32.07px); } 1.98% { transform: translate(19.37px, 29.89px); } 3.45% { transform: translate(20.21px, 28.1px); } 7.41% { transform: translate(23.31px, 23.75px); } 15.83% { transform: translate(33.87px, 27.95px); } 100.00% { transform: translate(33.87px, 27.95px); } 0.00% { opacity: 1; } 18.83% { opacity: 1; } 20.16% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-i0 { animation: fga-k2 30s linear -25.55s infinite; }
@keyframes fga-k3 { 0.00% { transform: translate(-51.8px, 50.54px); } 31.57% { transform: translate(-7.8px, 68.04px); } 51.82% { transform: translate(9.82px, 43.29px); } 56.16% { transform: translate(9.82px, 43.29px); } 61.14% { transform: translate(12.99px, 48.36px); } 78.02% { transform: translate(1.24px, 64.86px); } 100.00% { transform: translate(29.4px, 76.06px); } 100.01% { transform: translate(29.4px, 76.06px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 75.00% { opacity: 1; } 100.00% { opacity: 0; } 100.01% { opacity: 0; } }
.fga-o1 { animation: fga-k3 30s linear -10.8s infinite; }
@keyframes fga-k4 { 0.00% { fill: #b7b1b1; } 52.66% { fill: #b7b1b1; } 53.66% { fill: #4b4646; } 100.00% { fill: #4b4646; } 0.00% { stroke: #b7b1b1; } 52.66% { stroke: #b7b1b1; } 53.66% { stroke: #4b4646; } 100.00% { stroke: #4b4646; } }
.fga-o1t { animation: fga-k4 30s linear -10.8s infinite; }
@keyframes fga-k5 { 0.00% { transform: translate(-18.62px, 95.92px); } 19.94% { transform: translate(-7.8px, 68.04px); } 40.19% { transform: translate(9.82px, 43.29px); } 42.53% { transform: translate(9.82px, 43.29px); } 51.71% { transform: translate(17.82px, 32.07px); } 100.00% { transform: translate(17.82px, 32.07px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 51.71% { opacity: 1; } 51.74% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-o2 { animation: fga-k5 30s linear -3.56s infinite; }
@keyframes fga-k6 { 0.00% { fill: #b7b1b1; } 41.03% { fill: #b7b1b1; } 42.03% { fill: #f1ecec; } 100.00% { fill: #f1ecec; } 0.00% { stroke: #b7b1b1; } 41.03% { stroke: #b7b1b1; } 42.03% { stroke: #f1ecec; } 100.00% { stroke: #f1ecec; } }
.fga-o2t { animation: fga-k6 30s linear -3.56s infinite; }
@keyframes fga-k7 { 0.00% { transform: translate(17.82px, 32.07px); } 1.98% { transform: translate(19.37px, 29.89px); } 3.45% { transform: translate(20.21px, 28.1px); } 4.29% { transform: translate(20.87px, 27.18px); } 8.50% { transform: translate(15.59px, 25.08px); } 100.00% { transform: translate(15.59px, 25.08px); } 0.00% { opacity: 1; } 11.50% { opacity: 1; } 12.83% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-i2 { animation: fga-k7 30s linear -18.05s infinite; }
@keyframes fga-k8 { 0.00% { transform: translate(-51.8px, 50.54px); } 31.57% { transform: translate(-7.8px, 68.04px); } 51.82% { transform: translate(9.82px, 43.29px); } 54.16% { transform: translate(9.82px, 43.29px); } 63.34% { transform: translate(17.82px, 32.07px); } 100.00% { transform: translate(17.82px, 32.07px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 63.34% { opacity: 1; } 63.37% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-o3 { animation: fga-k8 30s linear -3.3s infinite; }
@keyframes fga-k9 { 0.00% { fill: #b7b1b1; } 52.66% { fill: #b7b1b1; } 53.66% { fill: #f1ecec; } 100.00% { fill: #f1ecec; } 0.00% { stroke: #b7b1b1; } 52.66% { stroke: #b7b1b1; } 53.66% { stroke: #f1ecec; } 100.00% { stroke: #f1ecec; } }
.fga-o3t { animation: fga-k9 30s linear -3.3s infinite; }
@keyframes fga-k10 { 0.00% { transform: translate(17.82px, 32.07px); } 1.98% { transform: translate(19.37px, 29.89px); } 3.45% { transform: translate(20.21px, 28.1px); } 7.41% { transform: translate(23.31px, 23.75px); } 15.83% { transform: translate(12.75px, 19.55px); } 100.00% { transform: translate(12.75px, 19.55px); } 0.00% { opacity: 1; } 18.83% { opacity: 1; } 20.16% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-i3 { animation: fga-k10 30s linear -14.3s infinite; }
@keyframes fga-k11 { 0.00% { transform: translate(-18.62px, 95.92px); } 19.94% { transform: translate(-7.8px, 68.04px); } 40.19% { transform: translate(9.82px, 43.29px); } 44.53% { transform: translate(9.82px, 43.29px); } 49.51% { transform: translate(12.99px, 48.36px); } 66.39% { transform: translate(1.24px, 64.86px); } 91.64% { transform: translate(29.4px, 76.06px); } 100.00% { transform: translate(29.4px, 76.06px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 63.37% { opacity: 1; } 91.64% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-o4 { animation: fga-k11 30s linear -26.06s infinite; }
@keyframes fga-k12 { 0.00% { fill: #b7b1b1; } 41.03% { fill: #b7b1b1; } 42.03% { fill: #4b4646; } 100.00% { fill: #4b4646; } 0.00% { stroke: #b7b1b1; } 41.03% { stroke: #b7b1b1; } 42.03% { stroke: #4b4646; } 100.00% { stroke: #4b4646; } }
.fga-o4t { animation: fga-k12 30s linear -26.06s infinite; }
@keyframes fga-k13 { 0.00% { transform: translate(-51.8px, 50.54px); } 31.57% { transform: translate(-7.8px, 68.04px); } 51.82% { transform: translate(9.82px, 43.29px); } 54.16% { transform: translate(9.82px, 43.29px); } 63.34% { transform: translate(17.82px, 32.07px); } 100.00% { transform: translate(17.82px, 32.07px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 63.34% { opacity: 1; } 63.37% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-o5 { animation: fga-k13 30s linear -25.8s infinite; }
@keyframes fga-k14 { 0.00% { fill: #b7b1b1; } 52.66% { fill: #b7b1b1; } 53.66% { fill: #f1ecec; } 100.00% { fill: #f1ecec; } 0.00% { stroke: #b7b1b1; } 52.66% { stroke: #b7b1b1; } 53.66% { stroke: #f1ecec; } 100.00% { stroke: #f1ecec; } }
.fga-o5t { animation: fga-k14 30s linear -25.8s infinite; }
@keyframes fga-k15 { 0.00% { transform: translate(17.82px, 32.07px); } 1.98% { transform: translate(19.37px, 29.89px); } 3.45% { transform: translate(20.21px, 28.1px); } 4.29% { transform: translate(20.87px, 27.18px); } 8.50% { transform: translate(26.15px, 29.28px); } 100.00% { transform: translate(26.15px, 29.28px); } 0.00% { opacity: 1; } 11.50% { opacity: 1; } 12.83% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-i5 { animation: fga-k15 30s linear -6.8s infinite; }
@keyframes fga-k16 { 0.00% { transform: translate(-18.62px, 95.92px); } 19.94% { transform: translate(-7.8px, 68.04px); } 40.19% { transform: translate(9.82px, 43.29px); } 42.53% { transform: translate(9.82px, 43.29px); } 51.71% { transform: translate(17.82px, 32.07px); } 100.00% { transform: translate(17.82px, 32.07px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 51.71% { opacity: 1; } 51.74% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-o6 { animation: fga-k16 30s linear -18.56s infinite; }
@keyframes fga-k17 { 0.00% { fill: #b7b1b1; } 41.03% { fill: #b7b1b1; } 42.03% { fill: #f1ecec; } 100.00% { fill: #f1ecec; } 0.00% { stroke: #b7b1b1; } 41.03% { stroke: #b7b1b1; } 42.03% { stroke: #f1ecec; } 100.00% { stroke: #f1ecec; } }
.fga-o6t { animation: fga-k17 30s linear -18.56s infinite; }
@keyframes fga-k18 { 0.00% { transform: translate(17.82px, 32.07px); } 1.98% { transform: translate(19.37px, 29.89px); } 3.45% { transform: translate(20.21px, 28.1px); } 7.41% { transform: translate(23.31px, 23.75px); } 7.42% { transform: translate(23.31px, 23.75px); } 100.00% { transform: translate(23.31px, 23.75px); } 0.00% { opacity: 1; } 10.41% { opacity: 1; } 11.74% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-i6 { animation: fga-k18 30s linear -3.05s infinite; }
@keyframes fga-k19 { 0.00% { transform: translate(-51.8px, 50.54px); } 31.57% { transform: translate(-7.8px, 68.04px); } 51.82% { transform: translate(9.82px, 43.29px); } 56.16% { transform: translate(9.82px, 43.29px); } 61.14% { transform: translate(12.99px, 48.36px); } 78.02% { transform: translate(1.24px, 64.86px); } 100.00% { transform: translate(29.4px, 76.06px); } 100.01% { transform: translate(29.4px, 76.06px); } 0.00% { opacity: 0; } 2.67% { opacity: 1; } 75.00% { opacity: 1; } 100.00% { opacity: 0; } 100.01% { opacity: 0; } }
.fga-o7 { animation: fga-k19 30s linear -18.3s infinite; }
@keyframes fga-k20 { 0.00% { fill: #b7b1b1; } 52.66% { fill: #b7b1b1; } 53.66% { fill: #4b4646; } 100.00% { fill: #4b4646; } 0.00% { stroke: #b7b1b1; } 52.66% { stroke: #b7b1b1; } 53.66% { stroke: #4b4646; } 100.00% { stroke: #4b4646; } }
.fga-o7t { animation: fga-k20 30s linear -18.3s infinite; }
@keyframes fga-k21 { 0.00% { opacity: 0; } 3.33% { opacity: 0; } 4.17% { opacity: 1; } 9.67% { opacity: 1; } 11.67% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-l0 { animation: fga-k21 30s linear -10.55s infinite; }
@keyframes fga-k22 { 0.00% { opacity: 0; } 3.33% { opacity: 0; } 4.17% { opacity: 1; } 9.67% { opacity: 1; } 11.67% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-l2 { animation: fga-k22 30s linear -1.82s infinite; }
@keyframes fga-k23 { 0.00% { opacity: 0; } 3.33% { opacity: 0; } 4.17% { opacity: 1; } 9.67% { opacity: 1; } 11.67% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-l6 { animation: fga-k23 30s linear -16.5s infinite; }
@keyframes fga-k24 { 0.00% { opacity: 0; } 3.33% { opacity: 0; } 4.17% { opacity: 1; } 9.67% { opacity: 1; } 11.67% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-l4 { animation: fga-k24 30s linear -21.8s infinite; }
@keyframes fga-k25 { 0.00% { opacity: 0; } 3.33% { opacity: 0; } 4.17% { opacity: 1; } 9.67% { opacity: 1; } 11.67% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-l8 { animation: fga-k25 30s linear -5.25s infinite; }
@keyframes fga-k26 { 0.00% { transform: translate(0px, 0px); } 3.83% { transform: translate(0px, 0px); } 5.17% { transform: translate(0px, 4.5px); } 18.18% { transform: translate(0px, 4.5px); } 19.52% { transform: translate(0px, 0px); } 28.83% { transform: translate(0px, 0px); } 30.17% { transform: translate(0px, 4.5px); } 55.68% { transform: translate(0px, 4.5px); } 57.02% { transform: translate(0px, 0px); } 66.33% { transform: translate(0px, 0px); } 67.67% { transform: translate(0px, 4.5px); } 93.18% { transform: translate(0px, 4.5px); } 94.52% { transform: translate(0px, 0px); } 100.00% { transform: translate(0px, 0px); } }
.fga-gate { animation: fga-k26 30s linear -30s infinite; }
@keyframes fga-k27 { 0.00% { opacity: 0; } 3.50% { opacity: 0; } 4.17% { opacity: 0.6; } 7.00% { opacity: 0; } 16.00% { opacity: 0; } 16.67% { opacity: 0.6; } 19.50% { opacity: 0; } 28.50% { opacity: 0; } 29.17% { opacity: 0.6; } 32.00% { opacity: 0; } 41.00% { opacity: 0; } 41.67% { opacity: 0.6; } 44.50% { opacity: 0; } 53.50% { opacity: 0; } 54.17% { opacity: 0.6; } 57.00% { opacity: 0; } 66.00% { opacity: 0; } 66.67% { opacity: 0.6; } 69.50% { opacity: 0; } 78.50% { opacity: 0; } 79.17% { opacity: 0.6; } 82.00% { opacity: 0; } 91.00% { opacity: 0; } 91.67% { opacity: 0.6; } 94.50% { opacity: 0; } 100.00% { opacity: 0; } }
.fga-flash { animation: fga-k27 30s linear -30s infinite; }
@media (prefers-reduced-motion: reduce) { .fga-fig * { animation-play-state: paused; } }
/* end of AgentFGA art */

.product-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) {
  .product-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

/* code, in the page's own tones: keywords and strings in ink, the rest a step back */
.code { min-width: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); overflow: hidden; }
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.copy {
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy:hover { border-color: var(--ink-3); }
.code pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.75; color: var(--ink-2); }
.code .k { color: var(--ink); font-weight: 600; }
.code .s { color: var(--ink); }
.code .c { color: var(--ink-3); }

.stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats > div { display: grid; align-content: start; gap: 14px; padding: 22px 24px 24px; background: var(--surface); }
.stats dt { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 0; display: grid; gap: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.stats .stat { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); }

/* ---------- steps, left to right ---------- */

/* each step ruled in ink, with an arrow to the next; the last one is filled (add .ink to it) */
.flow { display: grid; gap: 30px; }
.flow > li {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 20px 22px 22px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--surface);
}
.flow > li.ink { border-color: var(--paper); }
.flow b, .flow h3 { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); }
.flow p { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.flow > li + li::before {
  content: "↓";
  position: absolute;
  left: 22px;
  top: -28px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink-3);
}
@media (min-width: 960px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
  .flow > li + li::before { content: "→"; left: -28px; top: 50%; transform: translateY(-50%); }
}

/* ---------- reports ---------- */

.reports { display: grid; border-top: 2px solid var(--ink); }
.reports li { border-bottom: 1px solid var(--rule); }
.reports a {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 26px 56px 26px 0;
  color: inherit;
  text-decoration: none;
}
@media (min-width: 900px) {
  .reports a { grid-template-columns: 260px minmax(0, 1fr); column-gap: 40px; }
  .report-meta { grid-row: span 2; padding-top: 6px; }
}
.reports a::after {
  content: "→";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-3);
  transition: right 0.15s, color 0.15s;
}
.reports a:hover::after { right: 0; color: var(--ink); }
.report-meta { display: grid; gap: 2px; align-content: start; }
.report-meta .label:last-child { color: var(--ink-2); }
.report-title {
  font-family: var(--f-display);
  font-weight: 780;
  font-stretch: 110%;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.reports a:hover .report-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.report-sum { max-width: 46rem; font-size: 1rem; color: var(--ink-2); }

/* ---------- closing ---------- */

.close { padding-block: clamp(88px, 11vw, 160px) clamp(64px, 8vw, 112px); }
.close .wrap { display: grid; gap: 28px; justify-items: start; }
.close .wordmark { width: 100%; max-width: 920px; height: auto; margin-bottom: clamp(8px, 2vw, 28px); }
.close h2 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; }

/* ---------- business model page ---------- */

.page-head { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px); }
.page-head .hero-copy { max-width: 52rem; }
.page-head .lede { max-width: 44rem; }

.section-tight { padding-block: 0 var(--section); }

.belief { display: grid; gap: 24px; }
@media (min-width: 980px) { .belief { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }
.belief-body { display: grid; gap: 16px; max-width: 40rem; font-size: 1.125rem; color: var(--ink-2); }

/* how revenue funds the project: four steps in a loop, the open release filled in ink */
.loop { display: grid; gap: 30px; counter-reset: loop; }
.loop > li {
  counter-increment: loop;
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--surface);
}
.loop > li::before {
  content: counter(loop, decimal-leading-zero);
  margin-bottom: 4px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
}
.loop > li:nth-child(3) { background: var(--ink); }
.loop > li:nth-child(3) strong { color: var(--on-ink); }
.loop > li:nth-child(3) span { color: var(--rule-strong); }
.loop > li:nth-child(3)::before { color: var(--grey); }
.loop strong { font-family: var(--f-display); font-weight: 700; font-stretch: 106%; font-size: 1.125rem; line-height: 1.25; }
.loop span { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.loop > li:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 20px;
  bottom: -29px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .loop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
  .loop > li:not(:last-child)::after { content: "→"; left: auto; bottom: auto; right: -27px; top: 50%; transform: translateY(-50%); }
}
.loop-note { display: flex; align-items: center; gap: 10px; margin-top: -16px; font-size: 0.9375rem; color: var(--ink-2); }
.loop-note svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }

.offers { display: grid; gap: 16px; }
@media (min-width: 900px) { .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.offer-fde { border: 2px solid var(--ink); box-shadow: 0 40px 80px -56px var(--shadow); }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer h3 { margin-top: 8px; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.offer p:not(.card-num):not(.num) { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.price {
  flex: none;
  padding: 3px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--ink-2);
}
.price-free { border-color: transparent; background: var(--sunk); color: var(--ink); }
.offer-link {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-display);
  font-stretch: 106%;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.offer-link::after { content: " →"; }
.offer-link:hover { text-decoration: underline; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.matrix { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 0.9375rem; }
.matrix th, .matrix td { padding: 16px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.matrix thead th {
  background: var(--paper);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.matrix tbody th { width: 34%; font-weight: 600; color: var(--ink); }
.matrix td { font-size: 0.875rem; color: var(--ink-3); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix-cost td { font-weight: 600; color: var(--ink); }
.who {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.who-ohq { padding: 1px 9px; border: 1px solid var(--ink); background: transparent; font-weight: 650; }
.who-both { background: var(--ink); color: var(--on-ink); font-weight: 650; }

.cols { display: grid; gap: 36px; }
.cols > * { min-width: 0; }
@media (min-width: 860px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.col-head { margin-bottom: 14px; }
.plain-list { display: grid; border-top: 2px solid var(--ink); }
.plain-list li { padding-block: 14px; border-bottom: 1px solid var(--rule); font-size: 1rem; color: var(--ink-2); }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.cards p:not(.num):not(.card-num) { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

.cta-band-inner { display: grid; gap: 28px; align-items: end; }
@media (min-width: 980px) { .cta-band-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } }

/* ---------- brand page ---------- */

/* a label with the thing it labels, closer than the section's own gap */
.group { display: grid; gap: 16px; }

/* the page's contents, in the label style */
.toc { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.toc a { display: inline-flex; gap: 10px; padding-block: 4px; text-decoration: none; color: var(--ink-2); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.toc a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.toc a span { color: var(--ink-3); }

/* how to write the name: a ruled row per form */
.usage { display: grid; border-top: 1px solid var(--rule); }
.usage > div { display: grid; gap: 4px 24px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .usage > div { grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; } }
.usage dt { font-family: var(--f-display); font-stretch: 110%; font-weight: 780; font-size: 1.375rem; letter-spacing: -0.015em; color: var(--ink); }
.usage dd { color: var(--ink-2); }
.usage .not dt { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule-strong); text-decoration-thickness: 2px; }

/* each logo on paper and on ink, with its downloads */
.marks { display: grid; gap: 16px; }
@media (min-width: 1000px) { .marks { grid-template-columns: 1.15fr 1.25fr 0.9fr; } }
@media (min-width: 1000px) { .marks--product { grid-template-columns: 2.4fr 0.9fr; } }
.mark-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px 12px 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.mark-card > :not(.tiles) { margin-inline: 12px; }
.mark-card h3 { margin-top: 8px; }
.mark-card > p:not(.label) { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.tiles { display: grid; gap: 8px; }
.tile { display: grid; place-items: center; min-height: 148px; padding: 28px; border-radius: 10px; background: var(--paper); }
.tile .wordmark { font-size: 44px; }
.tile .wordmark--full { font-size: 34px; }
.tile .brand { font-size: 44px; }
.tile .wordmark--mark { font-size: 64px; }
.tile .wordmark--fga { font-size: 34px; }
/* the logomark at the sizes it's used */
.sizes { display: flex; align-items: flex-end; gap: 22px; }
.sizes .wordmark--mark { font-size: var(--s); }
.downloads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.downloads a { padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.downloads a::before { content: "↓ "; color: var(--ink-3); }
.downloads a:hover { border-color: var(--ink); }

/* the wordmark on its grid, with its dimensions */
.construct { display: grid; gap: 24px; padding: clamp(24px, 4vw, 56px); border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.construct svg { display: block; justify-self: center; width: 100%; max-width: 860px; height: auto; overflow: visible; }
.construct .grid line { stroke: var(--rule); stroke-width: 0.25; }
.construct .guide { stroke: var(--grey); stroke-width: 0.35; stroke-dasharray: 1 1.2; }
.construct .walls path { fill: none; stroke: #1c1a1a; stroke-width: 6; }
.construct .walls .wm-o { stroke: #8f8989; }
.construct .centre { fill: none; stroke: #ffffff; stroke-width: 0.35; stroke-dasharray: 0.8 0.8; }
.construct .dim line { stroke: var(--ink); stroke-width: 0.35; }
.construct .dim text { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 3.2px; font-weight: 600; letter-spacing: 0.04em; fill: var(--ink); }
.construct figcaption { display: grid; gap: 16px; }
@media (min-width: 760px) { .construct figcaption { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.construct figcaption div { display: grid; gap: 4px; align-content: start; padding-top: 12px; border-top: 2px solid var(--ink); }
.construct figcaption b { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.construct figcaption span:not(.label) { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }

.rules-2 { display: grid; gap: 16px; }
@media (min-width: 860px) { .rules-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.space { position: relative; display: grid; place-items: center; min-height: 140px; padding: 22px; border-radius: 10px; background: var(--paper); }
/* the clear space, hatched: half the wordmark's height on every side */
.space-box { position: relative; padding: 0.5em; font-size: 44px; outline: 1px dashed var(--grey); background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--rule-strong) 6px 7px); }
.space-box .wordmark { background: var(--paper); }
.space-box .label { position: absolute; left: 4px; top: 2px; font-size: 0.625rem; }

/* misuse: each shown small, crossed in the corner */
.donts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.dont { display: grid; gap: 12px; align-content: start; }
.dont-tile { position: relative; display: grid; place-items: center; min-height: 128px; padding: 20px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); font-size: 34px; }
.dont-tile::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--ink-3) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) center / 12px 12px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.8px), var(--ink-3) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) center / 12px 12px no-repeat;
}
.dont p { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.dont p b { display: block; font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1rem; color: var(--ink); }
.dont .swap path { stroke: var(--grey); }
.dont .swap .wm-o { stroke: var(--ink); }
.dont .on-grey { background: #8f8989; }
.dont .stretch .wordmark { transform: scaleX(1.45) skewX(-10deg); }
.dont .typed { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.dont .typed span { color: var(--grey); }

/* color: a swatch per token; click to copy its hex */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.swatches--core { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.swatch {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  padding: 8px 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.swatch:hover { border-color: var(--rule-strong); }
.chip { display: block; height: 88px; margin-bottom: 10px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(28, 26, 26, 0.08); }
.swatches--core .chip { height: 148px; }
.ink .chip { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.swatch b, .swatch .hex, .swatch .role { padding-inline: 6px; }
.swatch b { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1.0625rem; }
.swatch .hex { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-2); }
.swatch .hex span { color: var(--ink-3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.625rem; }
.swatch .role { margin-top: 4px; font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); }
.swatch-group { display: grid; gap: 14px; }
.swatch-group + .swatch-group { margin-top: 12px; }
/* the dark set sits on the ink it's for */
.on-ink { padding: clamp(18px, 2.4vw, 28px); border-radius: 16px; }

/* type: a specimen per family, then the scale */
.faces { display: grid; gap: 16px; }
@media (min-width: 960px) { .faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.face { gap: 14px; }
.face-aa { display: block; font-size: clamp(5rem, 4rem + 4vw, 7.5rem); line-height: 1; color: var(--ink); }
.face--display .face-aa { font-family: var(--f-display); font-weight: 820; font-stretch: 112%; letter-spacing: -0.04em; }
.face--text .face-aa { font-family: var(--f-body); font-weight: 400; letter-spacing: -0.03em; }
.face--mono .face-aa { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 500; letter-spacing: -0.04em; }
.face h3 { margin-top: 6px; }
.face dl { display: grid; margin-top: auto; border-top: 1px solid var(--rule); }
.face dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding-block: 9px; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
.face dt { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.face dd { color: var(--ink-2); }
.face a { font-size: 0.875rem; }

.scale { display: grid; border-top: 2px solid var(--ink); }
.scale > div { display: grid; gap: 8px 32px; align-items: baseline; padding-block: 22px; border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .scale > div { grid-template-columns: 200px minmax(0, 1fr); } }
.scale .spec { display: grid; gap: 2px; }
.scale .spec span:last-child { font-size: 0.8125rem; color: var(--ink-3); }
.scale-sample { min-width: 0; overflow-wrap: anywhere; }
.scale-sample.s-h1 { font-family: var(--f-display); font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); font-weight: 820; font-stretch: 112%; line-height: 1; letter-spacing: -0.035em; }
.scale-sample.s-h2 { font-family: var(--f-display); font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); font-weight: 780; font-stretch: 112%; line-height: 1.06; letter-spacing: -0.025em; }
.scale-sample.s-h3 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 780; font-stretch: 110%; line-height: 1.15; letter-spacing: -0.02em; }
.scale-sample.s-body { max-width: 40rem; font-size: 1.0625rem; color: var(--ink-2); }

/* illustration: the deck's isometric figures, and the blocks they're built from */
.iso-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .iso-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iso-card { gap: 18px; }
.iso-card figure { flex: 1; display: grid; place-items: center; min-height: 260px; padding: 24px; border-radius: 10px; background: var(--paper); }
.iso-card figure svg { display: block; width: 100%; max-width: 400px; height: auto; overflow: visible; }
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 760px) { .blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.block { display: grid; gap: 10px; align-content: start; }
.block figure { display: grid; place-items: center; height: 170px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.block figure svg { display: block; width: auto; height: 110px; overflow: visible; }
/* an agent is drawn smaller than anything it walks into */
.block:last-child figure svg { height: 52px; }
.block p { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.block p b { display: block; font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1rem; color: var(--ink); }
.block .faces-hex { margin-top: 4px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--ink-3); }

.iso polygon { stroke-width: 0.5; stroke-linejoin: round; }
.iso .wt { fill: #ffffff; stroke: #d6d1cf; }
.iso .wf { fill: #e3dfdd; stroke: #e3dfdd; }
.iso .ws { fill: #c9c4c2; stroke: #c9c4c2; }
.iso .lt { fill: #f1eeec; stroke: #f1eeec; }
.iso .lf { fill: #dcd7d5; stroke: #dcd7d5; }
.iso .ls { fill: #cbc6c4; stroke: #cbc6c4; }
.iso .kt { fill: #1c1a1a; stroke: #1c1a1a; }
.iso .kf { fill: #585252; stroke: #585252; }
.iso .ks { fill: #2e2a2a; stroke: #2e2a2a; }
.iso .gt { fill: #a7a1a0; stroke: #a7a1a0; }
.iso .gf { fill: #8f8989; stroke: #8f8989; }
.iso .gs { fill: #6e6969; stroke: #6e6969; }
.iso .at { fill: #8f8989; stroke: #8f8989; }
.iso .af { fill: #4b4646; stroke: #4b4646; }
.iso .as { fill: #1c1a1a; stroke: #1c1a1a; }
.iso .sh { fill: #1c1a1a; stroke: none; opacity: 0.14; }
.iso .leaf { fill: #ffffff; stroke: #1c1a1a; stroke-width: 0.6; }

/* writing: what we avoid, crossed and grey, then what we write instead, ticked and in ink */
.voice { display: grid; border-top: 2px solid var(--ink); }
.voice-row { display: grid; gap: 10px 24px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--rule); }
@media (min-width: 960px) {
  .voice-row { grid-template-columns: 240px minmax(0, 1fr) 36px minmax(0, 1fr); }
}
.voice-rule { display: grid; gap: 4px; }
.voice-rule b { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1.0625rem; line-height: 1.25; color: var(--ink); }
.voice-no, .voice-yes { display: flex; align-items: center; gap: 14px; min-width: 0; }
.voice-no { font-size: 1.0625rem; line-height: 1.4; color: var(--ink-3); }
.voice-yes { font-family: var(--f-display); font-stretch: 106%; font-weight: 700; font-size: 1.1875rem; line-height: 1.25; color: var(--ink); }
.voice-arrow { display: none; justify-self: center; font-family: var(--f-display); font-size: 1.5rem; line-height: 1; color: var(--ink-3); }
@media (min-width: 960px) { .voice-arrow { display: block; } }
.voice-yes .eyebrow { font-size: 0.875rem; color: var(--ink); }
.mark-x, .mark-ok { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.mark-x { border: 1.5px solid var(--rule-strong); }
.mark-ok { background: var(--ink); }
.mark-x svg, .mark-ok svg { width: 15px; height: 15px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark-x svg { stroke: var(--ink-3); }
.mark-ok svg { stroke: var(--paper); }