/* Cratefield. One stylesheet, no build step.
   Design tokens first; everything below is composed from them. */

:root {
  /* Ground and panels */
  --ground: #0A0A0B;
  --panel: #0E0E10;
  --panel-hi: #141416;

  /* Hairlines. --rule is the page divider, --edge the component border. */
  --rule: #1C1C1F;
  --edge: #2A2A2E;
  --edge-hi: #3A3A3F;

  /* Ink */
  --ink: #EDEBE6;
  --body: #A9A8A5;
  --muted: #8A8A8E;
  --dim: #55555A;
  --code: #C9C7C2;

  /* One accent. Cold signal blue; deliberately not green. */
  --accent: #4C6FFF;
  --accent-hi: #8FA3FF;
  --amber: #FFB020;

  --shell: 1240px;
  --gutter: 24px;

  --sans: Archivo, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

/* Author `display` declarations outrank the UA's `[hidden] { display: none }`,
   so any component that sets display needs this or `hidden` does nothing.
   The nav panel sets `display: flex`; without this it can never close. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img, svg { max-width: 100%; }
pre { margin: 0; }
input::placeholder, textarea::placeholder { color: var(--dim); }

/* ---------------------------------------------------------------- layout */

.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
main { flex: 1; }

.band { border-top: 1px solid var(--rule); }
.band--bottom { border-bottom: 1px solid var(--rule); }
.band--panel { background: var(--panel); }
.band .shell { padding-top: 72px; padding-bottom: 72px; }
.band--tall .shell { padding-top: 96px; padding-bottom: 96px; }

/* Two- and three-column splits. Everything collapses on its own at 320px. */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: start; }
.split--wide { gap: 56px; }
.split--narrow { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.split__wide { grid-column: span 2; }

/* Hairline grid: 1px gaps painted by the parent background. */
.grid-rule { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid-rule--tight { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.grid-rule > * { background: var(--ground); }
.grid-rule--tight > * { background: var(--panel); }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--accent); color: var(--ground);
  padding: 8px 12px; font-family: var(--mono); font-size: 12px;
}
.skip:focus { left: 8px; text-decoration: none; }

/* ------------------------------------------------------------ typography */

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--spread { justify-content: space-between; }

h1, h2, h3 { color: var(--ink); text-wrap: pretty; }

.h-hero { font-size: clamp(36px, 5vw, 68px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; margin: 0 0 24px; max-width: 960px; }
.h-home { font-size: clamp(40px, 5.6vw, 80px); line-height: .98; letter-spacing: -.03em; font-weight: 700; margin: 0 0 28px; }
.h-major { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -.025em; font-weight: 600; margin: 0 0 20px; }
.h-section { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; margin: 0 0 20px; }
.h-block { font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; margin: 0 0 16px; }
.h-card { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; margin: 0 0 12px; }
.h-doc { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; font-weight: 600; margin: 0; }
.h-point { font-size: 20px; font-weight: 600; margin: 0 0 12px; line-height: 1.3; letter-spacing: -.01em; }

.lede { font-size: 18px; line-height: 1.5; max-width: 720px; margin: 0; }
.lede--home { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 560px; margin: 0 0 36px; }
.prose { font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.note { font-size: 15px; line-height: 1.6; margin: 0; }
.note--muted { color: var(--muted); font-size: 14px; }
.note--quiet { color: var(--muted); font-style: italic; }
.dim { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

/* Inline identifiers: type names, ports, file paths, numbers. */
code, .tt { font-family: var(--mono); font-size: .875em; color: var(--ink); }

/* --------------------------------------------------------------- header */

.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 10, 11, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 10px var(--gutter); min-height: 60px;
  display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap;
}
.wordmark { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wordmark:hover { text-decoration: none; }
.wordmark__text { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--ink); }
.wordmark__grid { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; width: 22px; height: 22px; }
.wordmark__grid i { width: 6px; height: 6px; background: var(--ink); animation: cf-logo 6s ease-in-out infinite; }

.nav { display: flex; gap: 2px; flex: 1 1 360px; flex-wrap: wrap; min-width: 0; }
.nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  padding: 8px 10px; white-space: nowrap; color: var(--muted);
  border-bottom: 1px solid transparent; transition: color .15s;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.masthead__cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-left: auto; }

/* The panel carries a Source link so it is reachable when the ghost button is
   hidden. Above the breakpoint the ghost button is back, so this one goes. */
.nav__source { display: none; }

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

.btn {
  display: inline-block; font-family: var(--mono); font-size: 13px;
  padding: 14px 22px; text-decoration: none; border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--ground); font-weight: 500; padding: 15px 22px; border: none; cursor: pointer; }
.btn--primary:hover { background: var(--accent-hi); color: var(--ground); }
.btn--ghost { color: var(--ink); border-color: var(--edge); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn--small { font-size: 12px; padding: 8px 12px; color: var(--body); border-color: var(--edge); }
.btn--small:hover { color: var(--ink); border-color: var(--ink); }
.btn--small.btn--primary { color: var(--ground); padding: 9px 14px; font-weight: 500; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------- status chips */

.chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  padding: 1px 6px; white-space: nowrap; text-transform: uppercase;
}
.chip--shipping { border: 1px solid var(--ink); color: var(--ink); }
.chip--designed { border: 1px solid var(--muted); color: var(--body); }
.chip--planned { border: 1px dashed var(--muted); color: var(--muted); }
.chip-legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 20px; }
.chip-legend span { display: flex; gap: 8px; align-items: center; }

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

.card { background: var(--ground); padding: 36px 32px; }
.card--panel { background: var(--panel); padding: 44px 36px; }
.point { background: var(--ground); padding: 32px 28px; transition: background .2s; }
.point:hover { background: var(--panel); }
.point__n { font-family: var(--mono); font-size: 12px; color: var(--accent); margin: 0 0 18px; }

.tile { border: 1px solid var(--edge); background: var(--panel); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 170px; transition: border-color .2s; }
.tile:hover { border-color: var(--muted); }
.tile__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile__name { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.tile__body { font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.tile__ports { font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.5; }

.port { background: var(--panel); padding: 18px; transition: background .15s; }
.port:hover { background: var(--panel-hi); }
.port__name { font-family: var(--mono); font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.port__adapters { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ------------------------------------------------------------------ code */

.code { border: 1px solid var(--edge); background: var(--panel); min-width: 0; }
.code__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); gap: 12px; }
.code__path { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code__path b { color: var(--ink); font-weight: 400; }
.code__copy { font-family: var(--mono); font-size: 11px; color: var(--body); background: none; border: 1px solid var(--edge); padding: 4px 10px; cursor: pointer; flex-shrink: 0; }
.code__copy:hover { color: var(--ink); border-color: var(--ink); }
.code__body { overflow-x: auto; padding: 20px 18px; }
.code pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: var(--code); }

/* Rust and JSON tokens. Named for what they are, not for a highlighter. */
.t-type { color: var(--ink); }
.t-str { color: var(--accent-hi); }
.t-kw { color: var(--amber); }
.t-num { color: var(--amber); }
.t-com { color: var(--dim); }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--edge); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead tr { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; }
th { padding: 12px 16px; border-bottom: 1px solid var(--edge); font-weight: 500; }
th.is-ours { color: var(--ink); }
tbody tr { border-bottom: 1px solid var(--rule); transition: background .15s; }
tbody tr:hover { background: var(--panel); }
td { padding: 14px 16px; vertical-align: top; line-height: 1.5; }
td.k { color: var(--ink); font-weight: 500; }
td.is-ours { color: var(--code); }
td.mono { font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
td.mono-sm { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
td.num { font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; white-space: nowrap; }
td.quiet { color: var(--muted); }
.docs-link { font-family: var(--mono); font-size: 11px; }
.sources { display: flex; gap: 10px 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; margin-top: 14px; line-height: 1.6; }
/* These are full documentation URLs in monospace. Without an explicit break
   they are one unbreakable word and push the page sideways at 320px. */
.sources a { color: var(--muted); overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------------------------ lists */

.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.rule-list--edge { border-top-color: var(--edge); }
.rule-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.rule-list--edge li { border-bottom-color: var(--edge); }
.rule-list--roomy li { padding: 20px 0; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.steps--write li { grid-template-columns: 32px 1fr; padding: 16px 0; border-color: var(--edge); font-size: 15px; line-height: 1.55; }
.steps--write { border-top-color: var(--edge); }
.steps__n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.steps__title { font-size: 15px; color: var(--ink); line-height: 1.4; }
.steps__side { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.steps__side--you { color: var(--accent); }
.steps__side--us { color: var(--muted); }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.checks li::before { content: "\25A0"; font-family: var(--mono); color: var(--accent); font-size: 12px; padding-top: 3px; }

.plain-list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.7; color: var(--code); }
.plain-list--muted { color: var(--muted); }

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

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero__mesh {
  position: absolute; inset: 0;
  background-image: linear-gradient(#16161a 1px, transparent 1px), linear-gradient(90deg, #16161a 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000 30%, transparent 100%);
  animation: cf-in 1.4s ease both;
}
.hero__inner {
  position: relative; max-width: var(--shell); margin: 0 auto;
  padding: 104px var(--gutter) 80px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px; align-items: center;
}
.hero .eyebrow { margin-bottom: 28px; animation: cf-up .6s ease both; }
.hero .h-home { animation: cf-up .7s .08s ease both; }
.hero .lede--home { animation: cf-up .7s .16s ease both; }
.hero .btn-row { animation: cf-up .7s .24s ease both; }
.hero__panel { animation: cf-in 1s .3s ease both; }

/* The field: modules and ports as a grid that resolves into one binary. */
.field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.field__cell {
  aspect-ratio: 1; border: 1px solid var(--edge); background: var(--panel);
  padding: 10px; display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  animation: cf-cell 9s ease-in-out infinite; min-width: 0;
}
.field__tag { font-size: 9px; letter-spacing: .1em; opacity: .7; }
.field__name { word-break: break-word; line-height: 1.3; }
.field__arrow { display: flex; justify-content: center; padding: 14px 0 10px; color: var(--accent); font-family: var(--mono); font-size: 14px; }
.field__out {
  border: 1px solid var(--ink); background: var(--panel); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink); gap: 12px; flex-wrap: wrap;
}

/* Proof strip. Duplicated content scrolls; it is decorative, so it is aria-hidden. */
.proof { border-bottom: 1px solid var(--rule); overflow: hidden; }
.proof__track { display: flex; width: max-content; animation: cf-marquee 40s linear infinite; font-family: var(--mono); font-size: 12px; color: var(--body); padding: 16px 0; }
.proof__track span { padding: 0 28px; border-right: 1px solid var(--rule); white-space: nowrap; }

/* Request lifecycle */
.flow { position: relative; border: 1px solid var(--rule); background: var(--panel); padding: 28px 20px; overflow-x: auto; }
.flow__track { position: relative; display: flex; align-items: center; min-width: 760px; }
.flow__wire { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--edge); }
.flow__packet { position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: cf-flow 4s linear infinite; }
.flow__stop { position: relative; flex: 1; display: flex; justify-content: center; }
.flow__node { background: var(--ground); border: 1px solid var(--edge); padding: 10px 14px; font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: center; line-height: 1.4; }
.flow__node span { display: block; font-size: 10px; color: var(--muted); letter-spacing: .06em; }

/* ------------------------------------------------- platform: the boundary */

.boundary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: stretch; }
.boundary__yours { border: 1px solid var(--ink); padding: 24px; background: var(--panel); min-width: 0; }
.boundary__ours { border: 1px dashed var(--muted); padding: 24px; min-width: 0; display: flex; flex-direction: column; }
.boundary__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
.boundary__label--ink { color: var(--ink); }
.boundary__label--muted { color: var(--muted); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.boundary__foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.res__item { border: 1px solid var(--edge); padding: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink); line-height: 1.5; }
.res__item span { display: block; color: var(--muted); font-size: 11px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack__item { border: 1px solid var(--edge); padding: 12px; font-family: var(--mono); font-size: 12px; color: var(--body); }
.stack__item--token { border-color: var(--accent); color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.stack__item--token b { color: var(--accent); font-weight: 400; }

/* Build log */
.log { border: 1px solid var(--edge); background: var(--panel); min-width: 0; }
.log__bar { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.log__state { display: flex; align-items: center; gap: 6px; }
.log__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: cf-pulse 2s infinite; }
.log__body { padding: 18px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; color: var(--body); overflow-x: auto; }
.log__body div { white-space: nowrap; animation: cf-log 14s ease both infinite; }
.log__caret { display: inline-block; width: 8px; height: 14px; background: var(--accent); vertical-align: middle; animation: cf-blink 1s step-end infinite; }

.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.split-panel > div { background: var(--panel); padding: 20px; }
.split-panel__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }

/* ------------------------------------------------ isolation: the tenants */

.tenants { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tenant { border: 1px solid var(--edge); background: var(--ground); padding: 16px; font-family: var(--mono); font-size: 12px; animation: cf-up .5s ease both; }
.tenant__head { display: flex; justify-content: space-between; color: var(--ink); margin-bottom: 12px; }
.tenant__head span { color: var(--muted); }
.tenant__rows { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 11px; }
.tenant__rows div { border: 1px solid var(--rule); padding: 6px 8px; }

/* ------------------------------------------------------------------ form */

.form { border: 1px solid var(--edge); padding: 32px; background: var(--panel); display: flex; flex-direction: column; gap: 20px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.form input, .form textarea {
  font-family: var(--sans); font-size: 15px; padding: 12px 14px;
  background: var(--ground); border: 1px solid var(--edge); color: var(--ink);
  text-transform: none; letter-spacing: 0; transition: border-color .15s;
}
.form textarea { resize: vertical; min-height: 92px; }
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form button { align-self: flex-start; }
.form__foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; line-height: 1.6; }
.form__status { border: 1px solid var(--edge); padding: 32px; background: var(--panel); animation: cf-up .4s ease both; }
.form__status p:first-child { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.form__status p:last-child { font-size: 15px; line-height: 1.6; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

.closer { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.closer p { font-size: 16px; line-height: 1.5; margin: 0; color: var(--ink); max-width: 620px; }

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

.footer { border-top: 1px solid var(--rule); background: var(--ground); }
.footer__inner { max-width: var(--shell); margin: 0 auto; padding: 48px var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; font-size: 14px; }
.footer__mark { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer__mark span { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .16em; color: var(--ink); }
.footer p { margin: 0; line-height: 1.6; color: var(--muted); }
.footer nav, .footer__links { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 12px; }
.footer nav a, .footer__links a { color: var(--body); }
.footer__links span { color: var(--muted); }

/* -------------------------------------------------------------- motion */

@keyframes cf-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-cell { 0%, 100% { background: #0E0E10; border-color: #2A2A2E; color: #8A8A8E; } 50% { background: #141416; border-color: #4C6FFF; color: #EDEBE6; } }
@keyframes cf-flow { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes cf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cf-log { 0%, 10% { opacity: 0; transform: translateY(4px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes cf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cf-logo { 0%, 100% { background: #EDEBE6; transform: scale(1); } 40% { background: #4C6FFF; transform: scale(.7); } 60% { background: #3A3A3F; transform: scale(1); } }
@keyframes cf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 111, 255, .55); } 70% { box-shadow: 0 0 0 8px rgba(76, 111, 255, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

@media (max-width: 720px) {
  :root { --gutter: 18px; }
  /* auto-fit tracks have a minmax floor wider than a 320px viewport, so below
     the breakpoint every multi-column grid is collapsed explicitly. Without
     this the body scrolls sideways on the narrowest phones. */
  .hero__inner,
  .split, .split--wide, .split--narrow,
  .grid-rule,
  .boundary,
  .tenants,
  .res { grid-template-columns: 1fr; }
  .hero__inner { padding-top: 72px; padding-bottom: 56px; gap: 40px; }
  .band .shell, .band--tall .shell { padding-top: 56px; padding-bottom: 56px; }
  .card, .card--panel { padding: 28px 22px; }
  .split, .split--wide { gap: 36px; }
  .split-panel { grid-template-columns: 1fr; }
  .split__wide { grid-column: auto; }
  .form { padding: 22px; }
}

/* The field at phone widths. Four square cells across leaves about 66px of
   content at 320px, and the real names are longer than that: RateLimiter,
   email-signup and Turnstile were all breaking mid-word. Two columns give
   every label a full line, and the cells stop being square so eight rows
   stay a reasonable height. */
@media (max-width: 560px) {
  .field { grid-template-columns: repeat(2, 1fr); }
  .field__cell {
    aspect-ratio: auto;
    min-height: 58px;
    padding: 9px 11px;
    gap: 6px;
  }
  .field__name { word-break: normal; overflow-wrap: break-word; }

  /* The code bar truncates its path with an ellipsis, which at 320px ate the
     whole " · SHIPPING" marker. Let it wrap instead, one size down: the
     longest path then fits a line on its own and the status stays visible. */
  .code__path {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
    line-height: 1.5;
  }
  .code__bar { align-items: flex-start; }
}

/* The menu button, and the panel it opens. Both are inert until cf.js decides
   the viewport is narrow enough to need them, so with JS blocked the nav is
   just a nav. */
.menu-toggle {
  display: none;
  align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--ink); background: none;
  border: 1px solid var(--edge); padding: 9px 13px;
  cursor: pointer; margin-left: auto;
}
.menu-toggle:hover { border-color: var(--ink); }
.menu-toggle__bars { display: grid; gap: 3px; width: 13px; }
.menu-toggle__bars i { display: block; height: 1px; background: currentColor; transition: transform .15s, opacity .15s; }
.menu-toggle[aria-expanded="true"] { border-color: var(--ink); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1040px) {
  /* Below the width the desktop row needs (wordmark + seven nav links + two
     buttons, about 1020px) the links do not fit on one line. Rather than let
     them wrap into three ragged rows, or scroll sideways where the last items
     are invisible, they collapse into a panel behind a Menu button. Every link
     is then a full-width target with a real label, no gesture required. */
  .masthead__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px var(--gutter);
    min-height: 0;
  }
  .wordmark { grid-column: 1; }
  .masthead__cta { margin-left: 0; grid-column: 2; }
  .menu-toggle.is-active { display: flex; grid-column: 3; }
  /* With JS blocked the toggle never activates, so the nav stays an ordinary
     nav. Give it its own row rather than a third column. */
  .nav { grid-column: 1 / -1; flex: none; }
  /* The source link lives in the panel and in the footer; two buttons plus the
     wordmark plus the toggle do not fit at 320px. */
  .masthead__cta .btn--ghost { display: none; }

  /* On the narrowest phones the wordmark, the CTA and the toggle still come to
     about 330px against 264px of usable width. The mark alone carries the
     brand there and remains the link home; its label comes back at 380px. */
  .nav.is-panel .nav__source { display: block; }

  /* Below 480px the header is wordmark + CTA + toggle in 264-410px. The word
     "Menu" is the first thing that can go: the button keeps its aria-label. */
  @media (max-width: 479px) {
    .menu-toggle { font-size: 0; padding: 10px 11px; gap: 0; }
    .menu-toggle__bars { width: 14px; }
  }

  @media (max-width: 379px) {
    .wordmark__text { display: none; }
  }

  /* The panel. Toggled with the hidden attribute, never with a height
     transition: a max-height that computes to 0 is a menu that never opens. */
  .nav.is-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    padding: 4px 0 8px;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    animation: cf-in .12s ease both;
  }
  .nav.is-panel a {
    padding: 14px var(--gutter);
    font-size: 13px;
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
    white-space: normal;
  }
  .nav.is-panel a:last-of-type { border-bottom: none; }
  .nav.is-panel a[aria-current="page"] {
    color: var(--ink);
    border-left-color: var(--accent);
    border-bottom-color: var(--rule);
    background: var(--panel);
  }
  .nav.is-panel .nav__source {
    color: var(--muted);
    border-top: 1px solid var(--edge);
    margin-top: 4px;
  }
}


/* ------------------------------------------------------------- pricing */

.plan { background: var(--ground); padding: 36px 32px; display: flex; flex-direction: column; }
.plan--feature { background: var(--panel); }
.plan__figure { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.plan__amount { font-family: var(--mono); font-size: clamp(34px, 4vw, 46px); font-weight: 500; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.plan__unit { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.plan__note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }
.plan__list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); flex: 1; }
.plan__list li { padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.plan__list li::before { content: "\2022"; color: var(--accent); font-family: var(--mono); font-size: 13px; }
.plan__list li.is-off::before { content: "\2013"; color: var(--dim); }
.plan__list li.is-off { color: var(--muted); }
.plan .btn { align-self: flex-start; }

/* ------------------------------------------------------- the big diagram
   Three stages: what you pick, what compiles, what runs. Built as a grid of
   real elements rather than one wide SVG, so the type stays at a real font
   size and the whole thing stacks instead of needing a sideways scroll. */

.dgm {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: stretch;
  gap: 0;
  margin: 0;
}
.dgm__stage { display: flex; flex-direction: column; min-width: 0; }
.dgm__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; gap: 10px;
  padding: 0 0 10px; margin: 0;
}
.dgm__label b { color: var(--accent); font-weight: 400; }
.dgm__panel {
  border: 1px solid var(--edge); background: var(--panel);
  flex: 1; display: flex; flex-direction: column;
  position: relative;
}
.dgm__panel--out { border-color: var(--ink); }
.dgm__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  min-width: 0;
}
.dgm__row:last-child { border-bottom: none; }
.dgm__row span { color: var(--muted); font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; }
.dgm__row--ghost { color: var(--dim); }
.dgm__row--ghost span { color: var(--dim); }

/* The middle stage is the argument: it is the only one that is ours. */
.dgm__panel--build { background: var(--panel-hi); }
.dgm__build {
  padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  flex: 1; justify-content: center;
}
.dgm__code {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  line-height: 1.6; word-break: break-word;
}
.dgm__code i { color: var(--accent); font-style: normal; }
.dgm__gate {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  line-height: 1.5; border-top: 1px dashed var(--edge); padding-top: 10px;
}
.dgm__binary {
  border: 1px solid var(--accent); background: var(--ground);
  padding: 9px 12px; font-family: var(--mono); font-size: 12px; color: var(--ink);
  text-align: center;
}

/* Connectors. One SVG each so the arrowhead is crisp at any width. */
.dgm__link { display: flex; align-items: center; justify-content: center; padding-top: 26px; }
.dgm__link svg { display: block; width: 100%; height: 34px; overflow: visible; }
.dgm__wire { stroke: var(--edge); stroke-width: 1; }
.dgm__head { fill: var(--edge); }
.dgm__pulse { fill: var(--accent); }

/* The bracket: which part of the picture we operate. */
.dgm__bracket {
  grid-column: 3 / 6;
  margin-top: 14px;
  border: 1px dashed var(--muted); border-top: none;
  height: 22px; position: relative;
}
.dgm__bracket span {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%);
  background: var(--ground); padding: 0 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.band--panel .dgm__bracket span { background: var(--panel); }
.dgm__caption {
  grid-column: 1 / -1; margin: 30px 0 0;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .dgm__pulse { animation: cf-pulse-dot 3.2s ease-in-out infinite; }
  .dgm__link:nth-of-type(4) .dgm__pulse { animation-delay: .5s; }
}
@keyframes cf-pulse-dot {
  0%, 100% { opacity: 0; transform: translateX(-14px); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(14px); }
}

@media (max-width: 860px) {
  .dgm { grid-template-columns: 1fr; }
  .dgm__stage { margin-bottom: 0; }
  .dgm__link { padding: 14px 0; }
  .dgm__link svg { height: 30px; width: 30px; margin: 0 auto; }
  .dgm__bracket {
    grid-column: 1; margin-top: 16px; height: auto;
    border: 1px dashed var(--muted); padding: 9px 12px; text-align: center;
  }
  .dgm__bracket span { position: static; transform: none; background: none; padding: 0; }
  .dgm__caption { margin-top: 22px; }
}

/* Row glyphs: a crate for what you assemble, a database for what runs. They
   carry the meaning the repeated word "own database" was carrying badly. */
.dgm__row { gap: 0; }
.dgm__row b { font-weight: 400; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dgm__glyph { width: 12px; height: 12px; flex: 0 0 12px; margin-right: 10px; fill: var(--muted); }
.dgm__row--ghost .dgm__glyph { fill: var(--dim); }
.dgm__glyph--db { height: 14px; fill: none; stroke: var(--accent); stroke-width: 1; }
.dgm__panel--out .dgm__row:last-child { border-top: 1px dashed var(--edge); }

/* The middle stage is the only one we would run. Mark it. */
.dgm__panel--build { border-left: 2px solid var(--accent); }

@media (max-width: 860px) {
  /* Stacked, the stages run top to bottom, so the connectors have to as well. */
  .dgm__link svg { transform: rotate(90deg); }
}