/* One deliberate look, light on every system: security paper (the pale green
   of a cheque or a customs form), dark green ink, a red refusal stamp and a
   blue approval stamp. */
:root {
  --paper: #e6ece4;
  --sheet: #f3f6f1;
  --ink: #15241d;
  --muted: #4f6158;
  --line: #bac8bd;
  --stamp: #b8321f;
  --approve: #1f4f92;
  --lamp: #d98e1b;
  --floor: #dbe4d8;
  --track: #cdd8ca;
  --display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.6 var(--body);
  padding-inline: var(--gutter);
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
  background-color: var(--paper);
  /* The fine hatching of security paper, barely there. */
  background-image: repeating-linear-gradient(135deg, rgba(21, 36, 29, 0.028) 0 1px, transparent 1px 6px);
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--approve); }
:focus-visible { outline: 2px solid var(--approve); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

code, pre { font-family: var(--mono); font-size: 0.86em; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.06; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.018em; }
h3 { font-size: 1.32rem; letter-spacing: -0.006em; }
p { margin: 0; }

.label {
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-block: 22px;
  border-bottom: 2px solid var(--ink);
}
.mark { font: 700 1.6rem/1 var(--display); letter-spacing: -0.035em; text-decoration: none; }
.top nav { display: flex; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap; font-size: 0.95rem; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

main { max-width: 1200px; margin: 0 auto; }
section { padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--line); }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
}
.pitch { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.lede { font-size: 1.12rem; max-width: 34em; }
.sub { color: var(--muted); font-size: 0.95rem; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.install { display: flex; border: 2px solid var(--ink); background: var(--sheet); max-width: 100%; }
.install code { padding: 13px 16px; font-size: 1rem; white-space: nowrap; overflow-x: auto; }
.install code::before { content: "$ "; color: var(--muted); }
.copy {
  font: 700 0.9rem/1 var(--body);
  padding: 0 18px;
  border: 0;
  border-left: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.copy:hover { background: var(--approve); }
.button {
  display: inline-flex;
  align-items: center;
  padding: 13px 18px;
  border: 2px solid var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: var(--ink); color: var(--paper); }

/* ---- the checkpoint, in 3D ---- */

.demo { margin: 0; display: grid; gap: 14px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.scene {
  position: relative;
  height: 410px;
  perspective: 1100px;
  perspective-origin: 50% 20%;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(21, 36, 29, 0.04));
  border: 1px solid var(--line);
}
.world {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: scale(var(--s, 1)) rotateX(60deg) rotateZ(calc(var(--yaw, -26) * 1deg));
}
.world > * { position: absolute; }
#cards { left: 0; top: 0; transform-style: preserve-3d; }
.floor {
  width: 900px; height: 1100px; left: -450px; top: -640px;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(21, 36, 29, 0.09) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(21, 36, 29, 0.09) 39px 40px),
    var(--floor);
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
  mask-image: radial-gradient(closest-side, #000 50%, transparent);
}
.track {
  width: 190px; height: 1100px; left: -95px; top: -640px;
  background:
    linear-gradient(90deg, var(--ink) 0 2px, transparent 2px calc(100% - 2px), var(--ink) calc(100% - 2px)),
    var(--track);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.paint {
  left: -95px; top: 18px; width: 190px;
  text-align: center;
  font: 700 17px/1 var(--mono);
  letter-spacing: 0.32em;
  color: var(--ink);
  opacity: 0.55;
}
/* The gate stands up across the track: its local y runs from the floor up. */
.gate {
  left: -118px; top: 0; width: 236px; height: 150px;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  transform-style: preserve-3d;
}
.gate > * { position: absolute; }
.post { top: 0; width: 14px; height: 118px; background: var(--ink); }
.post.left { left: 0; }
.post.right { right: 0; height: 64px; }
.lamp {
  position: absolute; left: -3px; top: 100%;
  width: 20px; height: 12px;
  background: var(--lamp);
  box-shadow: 0 0 16px 4px rgba(217, 142, 27, 0.45);
  transition: background 0.2s, box-shadow 0.2s;
}
.arm {
  left: 7px; top: 56px; width: 229px; height: 11px;
  transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, var(--stamp) 0 22px, var(--sheet) 22px 44px);
  border: 1px solid var(--ink);
  transition: transform 0.38s cubic-bezier(0.3, 0.1, 0.25, 1);
}
.gate.open .arm { transform: rotate(78deg); }
.gate.refusing .lamp { background: var(--stamp); box-shadow: 0 0 18px 6px rgba(184, 50, 31, 0.5); }
.gate.admitting .lamp { background: var(--approve); box-shadow: 0 0 18px 6px rgba(31, 79, 146, 0.45); }

.card, .shadow { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.shadow {
  width: 130px; height: 36px;
  margin: -18px 0 0 -65px;
  background: radial-gradient(closest-side, rgba(21, 36, 29, 0.26), transparent);
}
.card {
  width: 176px;
  padding: 10px 12px 12px;
  background: var(--sheet);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(21, 36, 29, 0.18);
  backface-visibility: hidden;
}
.card .who { font: 500 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.card .call { font: 500 13px/1.35 var(--mono); margin-top: 4px; overflow-wrap: anywhere; }
.card .verdict { margin-top: 8px; min-height: 2.9em; }
.stamp {
  display: inline-block;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 6px 3px;
  border: 2px solid currentColor;
  transform: rotate(-5deg);
  transform-origin: left center;
}
.card .rule { display: block; font: 500 10.5px/1.3 var(--mono); margin-top: 5px; overflow-wrap: anywhere; }
.card.refused .verdict { color: var(--stamp); }
.card.admitted .verdict { color: var(--approve); }

.log { background: var(--sheet); border: 1px solid var(--ink); font: 12.5px/1.75 var(--mono); overflow-x: auto; }
.log-head {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.verified { color: var(--approve); }
.log ol { list-style: none; margin: 0; padding: 8px 14px 10px; min-width: 520px; }
.log li { display: grid; grid-template-columns: 4.2ch 6ch 1fr 11ch; gap: 1.4ch; white-space: nowrap; }
.log li.fresh { animation: fresh 0.9s ease-out; }
@keyframes fresh { from { background: rgba(217, 142, 27, 0.22); } to { background: transparent; } }
.seq, .hash { color: var(--muted); font-variant-numeric: tabular-nums; }
.what { overflow: hidden; text-overflow: ellipsis; }
.ok { color: var(--approve); }
.no { color: var(--stamp); }
figcaption { font-size: 0.86rem; color: var(--muted); max-width: 60ch; }

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

.ways h2, .rules h2, .limits h2, .pricing h2, .security h2, .contact h2 { margin-bottom: clamp(24px, 4vw, 40px); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.split article { display: grid; gap: 14px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.split p { max-width: 34em; }
pre {
  margin: 0;
  padding: 16px 18px;
  background: var(--ink);
  color: #e1e9df;
  overflow-x: auto;
  line-height: 1.6;
}
pre .out { color: #f19a85; }
.split ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
li code, p code, dd code { background: rgba(21, 36, 29, 0.08); padding: 1px 4px; }

.rules dl { margin: 0; display: grid; }
.rules dl > div {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: clamp(12px, 3vw, 36px);
  padding-block: 18px;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.rules dt { font: 700 1.08rem/1.3 var(--display); }
.rules dd { margin: 0; color: var(--muted); }
.rules dd.eg code { background: none; padding: 0; color: var(--ink); font-size: 0.84rem; overflow-wrap: anywhere; }
.aside { margin-top: 24px; max-width: 46em; font-size: 1.05rem; }

.record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.record > div { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.record p { max-width: 34em; }
.terminal { font-size: 0.82rem; }
.terminal .prompt { color: var(--lamp); }

.security { background: var(--sheet); border: 2px solid var(--ink); padding-inline: clamp(18px, 4vw, 48px); margin-block: clamp(40px, 6vw, 72px); }
.security .intro { max-width: 46em; margin-top: -12px; margin-bottom: 28px; color: var(--muted); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.facts > div { padding-block: 14px; border-top: 1px solid var(--line); }
.facts dt { font: 700 0.76rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.facts dd { margin: 0; }
.links-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font-weight: 700; }

.limits ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.limits li { padding-block: 16px; border-top: 1px solid var(--line); }

.pricing .note { color: var(--muted); max-width: 46em; }
.pricing h2 + .note { margin-top: -16px; margin-bottom: 32px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px clamp(14px, 2vw, 24px) 26px;
  border-right: 1px solid var(--line);
}
.plan:first-child { padding-left: 0; }
.plan:last-child { border-right: 0; }
.price { color: var(--muted); }
.price span { font: 700 2.2rem/1 var(--display); color: var(--ink); letter-spacing: -0.02em; margin-right: 4px; }
.agents { font-weight: 700; }
.checks { color: var(--muted); font-size: 0.9rem; margin-top: -8px; }
.plan ul { margin: 0; padding-left: 1.05em; display: grid; gap: 7px; align-content: start; font-size: 0.95rem; flex: 1; }
.plan em { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp); margin-left: 4px; white-space: nowrap; }
.cta { padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cta code { font-size: 0.95rem; }
.cta span { color: var(--muted); font-size: 0.85rem; }
.cta a { font-weight: 700; }
.seats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 0;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}
.seats > div { display: flex; flex-direction: column; gap: 12px; padding-right: clamp(14px, 2vw, 24px); }
.seats > div + div { grid-column: 2 / -1; padding-left: clamp(14px, 2vw, 24px); padding-right: 0; }
.seats p { margin: 0; }
.seats ul { margin: 0; padding-left: 1.05em; display: grid; gap: 7px; font-size: 0.95rem; }
@media (max-width: 720px) { .seats { grid-template-columns: minmax(0, 1fr); } .seats > div + div { grid-column: auto; padding-left: 0; } }
.plans + .note, .seats + .note { margin-top: 28px; }

/* ---- contact: one row per reason to write, the address where it belongs ---- */

.contact .rows { border-top: 2px solid var(--ink); }
.contact .row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: 8px clamp(16px, 3vw, 36px);
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact dt { font: 700 1.08rem/1.3 var(--display); }
.contact dd { margin: 0; }
.contact .how { color: var(--muted); }
.contact .address { font: 500 1rem/1.4 var(--mono); overflow-wrap: anywhere; }
.contact .address a { font-weight: 500; }

footer {
  max-width: 1200px;
  margin: 0 auto;
  padding-block: 40px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  justify-content: space-between;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.92rem;
}
footer p:first-child { max-width: 52ch; }
footer .links-row { margin-top: 0; }

/* ---- how a call is judged ---- */

.judged .intro, .reasons .intro { max-width: 46em; color: var(--muted); margin: 14px 0 32px; }
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px;
}
.flow li {
  position: relative;
  display: grid; gap: 10px; align-content: start;
  padding: 18px 16px 20px;
  background: var(--sheet);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(21, 36, 29, 0.14);
}
/* The arrow to the next step sits in the gap between boxes. */
.flow li:not(:last-child)::after {
  content: "";
  position: absolute; top: 44px; right: -20px;
  width: 18px; height: 2px; background: var(--ink);
}
.flow li:not(:last-child)::before {
  content: "";
  position: absolute; top: 40px; right: -20px;
  border: 5px solid transparent; border-left: 7px solid var(--ink); border-right: 0;
  transform: translateX(7px);
}
.flow .step { font: 700 0.72rem/1 var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.flow .step::before { content: "STEP "; }
.flow .icon svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: square; }
.flow li:nth-child(5) .icon svg path:nth-of-type(2) { stroke: var(--approve); }
.flow li:nth-child(5) .icon svg path:nth-of-type(3), .flow li:nth-child(5) .icon svg path:nth-of-type(4) { stroke: var(--stamp); }
.flow h3 { font-size: 1.05rem; }
.flow p { font-size: 0.9rem; color: var(--muted); }
.verdict-bar {
  margin-top: 26px; padding: 16px 20px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  font-size: 1.08rem;
}
.verdict-bar strong { color: var(--approve); }

/* ---- refusal reasons ---- */

.groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.group h3 { font: 700 0.76rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.group dl { margin: 0; }
.group dl > div { padding-block: 11px; border-bottom: 1px solid var(--line); }
.group dt code { background: none; padding: 0; font-size: 0.86rem; font-weight: 500; color: var(--stamp); overflow-wrap: anywhere; }
.group dd { margin: 3px 0 0; font-size: 0.92rem; color: var(--muted); }

/* ---- what's inside ---- */

.stack { max-width: 920px; margin: 0 auto; border: 2px solid var(--ink); background: var(--sheet); }
.stack-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 24px;
  padding: 18px 22px; background: var(--ink); color: var(--paper);
}
.stack-head .label { color: #b5c7ba; flex-basis: 100%; }
.stack-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.stack-head code { color: #b5c7ba; }
.stack dl { margin: 0; }
.stack dl > div {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 24px;
  padding: 16px 22px; border-top: 1px solid var(--line); align-items: baseline;
}
.stack dt code { background: none; padding: 0; font-size: 0.9rem; color: var(--approve); }
.stack dd { margin: 0; }

/* ---- the real report ---- */

.sheet { margin: 0; display: grid; gap: 10px; }
.sheet img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(21, 36, 29, 0.14), 12px 12px 0 -1px var(--sheet), 12px 12px 0 0 var(--line);
  background: #fff;
}
/* The report goes on past what is shown: fade it out rather than cut it. */
.sheet .page { position: relative; }
.sheet .page::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 18%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
}
.sheet figcaption { font-size: 0.86rem; color: var(--muted); }
.record > div .terminal { margin-top: 6px; }
.terminal .dim { color: #8fa597; }
.terminal .out { color: #f19a85; }
.split article .terminal { font-size: 0.78rem; }

/* ---- replay ---- */

.replay .intro { max-width: 46em; color: var(--muted); margin: 14px 0 30px; }
.figures {
  margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.figures > div { padding: 22px 18px 20px; border-right: 1px solid var(--line); }
.figures > div:first-child { padding-left: 0; }
.figures > div:last-child { border-right: 0; }
.figures dt {
  font: 700 clamp(2.8rem, 6vw, 4.6rem)/1 var(--display);
  letter-spacing: -0.03em; color: var(--stamp);
  font-variant-numeric: tabular-nums;
}
.figures dd { margin: 10px 0 0; }
.figures dd code { background: none; padding: 0; font-size: 0.98rem; }
.replay .context { max-width: 46em; margin-top: 22px; color: var(--muted); }
.replay .terminal { margin-top: 22px; max-width: 46rem; }

/* ---- policy pages ---- */

.doc { max-width: 44rem; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); display: grid; gap: 16px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 8px; }
.doc h2 { font-size: 1.3rem; margin-top: 22px; }
.doc .lede { font-size: 1.15rem; }
.doc p { max-width: 38em; }

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

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow li:nth-child(3)::after, .flow li:nth-child(3)::before { display: none; }
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .hero, .record { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seats > div + div { grid-column: auto; }
  .plan:nth-child(2) { border-right: 0; }
  .plan:nth-child(3) { padding-left: 0; }
  .plan:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(2) { border-right: 0; }
  .figures > div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); }
  .figures > div:nth-child(4) { border-top: 1px solid var(--line); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .flow li:not(:last-child)::after { top: auto; bottom: -19px; right: auto; left: 34px; width: 2px; height: 18px; }
  .flow li:not(:last-child)::before { display: none; }
  .flow li:nth-child(3)::after { display: block; }
  .groups { grid-template-columns: minmax(0, 1fr); }
  .stack dl > div { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .rules dl > div, .contact .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .seats { grid-template-columns: minmax(0, 1fr); }
  .seats > div + div { padding-left: 0; }
  .scene { height: 340px; }
  .world { top: 60%; --s: 0.78; }
}
@media (max-width: 560px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { padding-left: 0; border-right: 0; border-top: 1px solid var(--line); }
  .plan:first-child { border-top: 0; }
  .install { flex: 1 1 100%; }
  .install code { flex: 1; }
  .button { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .arm { transition: none; }
  .log li.fresh { animation: none; }
}

/* The whole system: four parts, one checkpoint (5 Oct). */
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: var(--approve); border-color: var(--approve); color: var(--paper); }
.system h2 { max-width: 22em; margin-bottom: 18px; }
.system .intro { max-width: 46em; color: var(--muted); font-size: 1.08rem; }
.pillars { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.pillars li { display: flex; flex-direction: column; gap: 12px; padding: 22px clamp(14px, 2vw, 24px) 0; border-right: 1px solid var(--line); }
.pillars li:first-child { padding-left: 0; }
.pillars li:last-child { border-right: 0; }
.pillars .step { font: 700 0.8rem/1 var(--mono); color: var(--muted); }
.pillars p { flex: 1; }
.pillars code { font-size: 0.82rem; overflow-wrap: anywhere; }
.pillars em { font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp); font-style: normal; }
.system .verdict-bar { margin-top: clamp(28px, 4vw, 40px); font-size: 1.12rem; }
.partners { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; background: var(--sheet); border: 2px solid var(--ink); padding-inline: clamp(18px, 4vw, 48px); margin-block: clamp(40px, 6vw, 72px); }
.partners h2 { margin-block: 10px 16px; }
.partners .intro { color: var(--muted); max-width: 34em; }
.partners ul { margin: 0 0 22px; padding-left: 1.1em; display: grid; gap: 10px; }
.partners .cta { border-top: 0; padding-top: 0; }
.partners .sub { margin-top: 12px; }
.partners .lead { font-weight: 700; margin: 0 0 12px; }
@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars li:nth-child(2) { border-right: 0; }
  .pillars li:nth-child(3) { padding-left: 0; }
  .pillars li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 22px; }
  .partners { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars li { padding-left: 0; padding-right: 0; border-right: 0; }
  .pillars li + li { border-top: 1px solid var(--line); margin-top: 22px; }
}
.want-in { margin-top: 18px; font-weight: 700; }
.split article.wide { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 22px; }
.split article.wide em { font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stamp); font-style: normal; }
.plan .for { font-weight: 700; color: var(--approve); margin-top: -6px; }
.sub.works { color: var(--ink); font-weight: 700; margin-top: -10px; }
.mcp h2 { margin-bottom: 16px; }
.mcp .intro { max-width: 46em; color: var(--muted); margin-bottom: 22px; }
.mcp pre + pre { margin-top: 14px; }
.mcp .context { margin-top: 18px; max-width: 46em; }