/* Reaproof site. One page, no build step. Colors are tokens; the dark set follows the system.
   The look: white paper, ink type on 1px ink rules, square corners (only tags are round), a tab
   on a rule opening each section, and two watercolor washes behind the terminal and the call. */

:root {
  --bg: #ffffff;
  --card: #f4f2f0;
  --card-line: #e7e3df;
  --ink: #1f1e1c;
  --ink-2: #61615e;
  --line: #d4d4d4;
  --field-line: #8d8d8d;
  --link-line: #b5b5b2;
  --wash-blue: #c3d3d6;
  --wash-blue-line: #8facb4;
  --wash-sand: #cfc4a6;
  --wash-sand-line: #afa081;
  --wash-cream: #c9c9a8;
  --wash-cream-line: #a4a37d;
  --band-grey: #a8a8a8;
  --band-warm: #cfb69a;
  --band-blend: normal;
  --window: #ffffff;
  --window-line: #e1e1e1;
  --window-ink: #202020;
  --window-dim: #626262;
  --critical: #a1281a;
  --critical-soft: #f2dcd7;
  --critical-ink: #6e1a0e;
  --high: #8a5414;
  --high-soft: #eee2d8;
  --high-ink: #402804;
  --medium: #6b5a10;
  --medium-soft: #ece6cf;
  --medium-ink: #463a07;
  --note: #2f5e80;
  --note-soft: #d8e5ee;
  --note-ink: #042340;
  --baseline: #4a6b1a;
  --baseline-soft: #e7eed8;
  --baseline-ink: #2c4004;
  --unrated: #61615e;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  --gutter: 24px;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* The washes darken by multiplying with the band colour, so one picture serves both themes. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141412;
    --card: #1d1c1a;
    --card-line: #2f2d2a;
    --ink: #ebeae6;
    --ink-2: #a9a7a1;
    --line: #3a3834;
    --field-line: #6f6d68;
    --link-line: #6f6d68;
    --wash-blue: #213034;
    --wash-blue-line: #3b555c;
    --wash-sand: #332e22;
    --wash-sand-line: #5c533d;
    --wash-cream: #2e2e20;
    --wash-cream-line: #56563c;
    --band-grey: #5a5954;
    --band-warm: #5c5248;
    --band-blend: multiply;
    --window: #1d1c1a;
    --window-line: #34322e;
    --window-ink: #ebeae6;
    --window-dim: #9c9a93;
    --critical: #f0907f;
    --critical-soft: #3b1f19;
    --critical-ink: #f5bdb1;
    --high: #dfa86a;
    --high-soft: #382a1b;
    --high-ink: #eec89d;
    --medium: #d4c27c;
    --medium-soft: #333019;
    --medium-ink: #e5d8a3;
    --note: #91b7d6;
    --note-soft: #1c2b38;
    --note-ink: #b9d3ea;
    --baseline: #a9c77c;
    --baseline-soft: #253018;
    --baseline-ink: #c8dda7;
    --unrated: #a9a7a1;
    color-scheme: dark;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  text-wrap: balance;
}

h1 {
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: -0.025em;
}

h2 {
  max-width: 18em;
  font-size: 3.5rem;
  line-height: 1.04;
  letter-spacing: -0.023em;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

@media (max-width: 992px) {
  h1 {
    font-size: 3.25rem;
  }

  h2 {
    font-size: 2.75rem;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
    line-height: 1.08;
  }

  h2 {
    font-size: 2rem;
    line-height: 1.1;
  }

  h3 {
    font-size: 1.25rem;
  }
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}

a:hover {
  text-decoration-color: currentColor;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

kbd {
  font-size: 0.85em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: var(--card);
}

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

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 768px) {
  :root {
    --gutter: 16px;
  }
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 30;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--bg);
}

.skip:focus {
  top: 12px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  font: 500 0.9375rem/1 var(--font-body);
  letter-spacing: -0.011em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--ink) 84%, var(--bg));
}

.btn-quiet {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-quiet:hover {
  background: var(--card);
}

/* The nav's GitHub link: an outlined pill, the one round button. */
.btn-ink {
  min-height: 34px;
  padding: 0 14px;
  border-color: var(--line);
  border-radius: 999px;
  color: var(--ink);
}

.btn-ink:hover {
  border-color: var(--ink);
}

.icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* AnnouncementBar */

.announce {
  background: var(--ink);
  color: var(--bg);
  font-size: 0.8125rem;
}

.announce p {
  padding-block: 9px;
  text-align: center;
}

.announce strong {
  font: 500 0.75rem var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.announce a {
  text-decoration-color: currentColor;
}

/* Nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 600 1.125rem var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.brand-mark rect {
  fill: var(--ink);
}

.brand-mark path {
  fill: none;
  stroke: var(--bg);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-mark circle {
  fill: var(--bg);
}

.nav-links {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  font-size: 0.9375rem;
  text-decoration-color: transparent;
}

.nav-links a:hover {
  text-decoration-color: currentColor;
}

.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-actions .btn-quiet {
  min-height: 0;
  padding: 0;
  border: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.nav-actions .btn-quiet:hover {
  background: none;
  text-decoration-color: currentColor;
}

@media (max-width: 860px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nav-links {
    display: none;
  }
}

/* Hero */

.hero {
  padding-top: clamp(40px, 7vw, 104px);
}

.hero-copy {
  display: grid;
  justify-items: center;
  gap: 20px;
  padding-bottom: clamp(48px, 6vw, 88px);
  text-align: center;
}

.eyebrow {
  font: 400 0.8125rem/1.4 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "[ ";
}

.eyebrow::after {
  content: " ]";
}

/* The headline rises in with CSS alone: it is the largest text of the first screen, so it must not
   wait for a script. It starts at 1% opacity so the browser still counts it as painted. */
.hero h1 {
  max-width: 17em;
  animation: rise 1.2s var(--ease) 0.12s both;
}

@keyframes rise {
  from {
    opacity: 0.01;
    transform: translateY(0.35em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 {
    animation: none;
  }
}

.lead {
  max-width: 64ch;
  font-size: 1.125rem;
  line-height: 1.55;
}

.command {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 480px;
  margin-top: 12px;
  border: 1px solid var(--field-line);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  text-align: left;
}

.command-prompt {
  display: flex;
  align-items: center;
  padding-left: 16px;
  color: var(--ink-2);
}

.command code {
  flex: 1;
  min-width: 0;
  padding: 13px 12px;
  font-size: 1em;
  font-weight: 500;
}

/* The button covers the field's border on its side, so it reads as one bar. */
.command .copy {
  margin: -1px -1px -1px 0;
}

/* The npm download count under the command, written in when the site is published. Its number
   keeps the width of the final one while it counts up, so the centred line does not move: as many
   characters as the final number (--digits), at 0.62em each, a little over a digit's advance in
   common monospaced faces, so the width holds whichever face is drawn while the web font loads. */
.downloads {
  margin-top: -8px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.downloads-n {
  display: inline-block;
  width: calc(var(--digits, 1) * 0.62em);
  color: var(--ink);
  font: 600 1.0625rem var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.copy {
  flex: none;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  font: 500 0.9375rem var(--font-body);
  letter-spacing: -0.011em;
  cursor: pointer;
  transition: background-color 0.2s;
}

.copy:hover {
  background: color-mix(in srgb, var(--ink) 84%, var(--bg));
}

.copy:disabled {
  cursor: default;
}

.fine {
  font-size: 0.875rem;
  color: var(--ink-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
}

/* In the hero the copy button is the one filled button; the two links step down from it. */
.hero-actions .btn-primary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.hero-actions .btn-primary:hover {
  background: var(--card);
}

.hero-actions .btn-quiet {
  min-height: 0;
  padding: 0;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 0.2em;
}

.hero-actions .btn-quiet:hover {
  background: none;
  text-decoration-color: currentColor;
}

/* Watercolor bands. The two washes are still frames of a watercolor shader, 1600x900 WebP; the
   grain is drawn on top here, so the files stay small. */

.hero-band,
.cta-band {
  position: relative;
  isolation: isolate;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: var(--band-blend);
}

.hero-band::before,
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

.hero-band {
  padding-block: clamp(20px, 5vw, 72px);
  background-color: var(--band-grey);
  background-image: url("wash-grey.webp");
}

.terminal {
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid var(--window-line);
  background: var(--window);
  color: var(--window-ink);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.35);
}

.terminal-bar {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--window-line);
}

.terminal-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--window-line);
}

.terminal-bar p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--window-dim);
  font: 400 0.75rem var(--font-mono);
  pointer-events: none;
}

/* The whole run shows on wide screens; on a phone, where lines wrap, it scrolls inside. */
.terminal pre {
  margin: 0;
  padding: 18px 20px 20px;
  overflow: auto;
  color: var(--window-ink);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.t-dim {
  color: var(--window-dim);
}

.t-red {
  color: var(--critical);
}

.t-green {
  color: var(--baseline);
}

.t-bold {
  font-weight: 600;
}

.terminal figcaption {
  padding: 12px 20px 14px;
  border-top: 1px solid var(--window-line);
  color: var(--window-dim);
  font-size: 0.8125rem;
}

.terminal figcaption a {
  color: var(--window-ink);
}

@media (max-width: 768px) {
  .terminal pre {
    max-height: 480px;
    padding: 14px;
    font-size: 0.72rem;
  }

  .terminal figcaption {
    padding: 10px 14px 12px;
  }
}

/* The first screen replays a recorded run: the terminal line by line and, beside it, the report
   page that run wrote. Without script, or when less motion is asked for, the last scene stands.
   Every box has its height from the start, so nothing below moves as the lines come. */

.demo {
  max-width: 1100px;
  margin: 0 auto;
}

.demo-stage {
  --demo-overlap: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}

.demo-terminal {
  max-width: none;
  margin: 0;
}

/* The browser window lies over the right edge of the terminal, so the scrolling box, its lines
   and its scroll bar end where the window starts. */
.demo-scroll {
  height: 500px;
  margin-right: var(--demo-overlap);
  overflow: auto;
}

.demo-scroll pre {
  max-height: none;
  overflow: visible;
}

.demo-line {
  display: block;
  min-height: 1.6em;
}

.demo-browser {
  position: relative;
  z-index: 1;
  margin: 64px 0 0 calc(-1 * var(--demo-overlap));
  border: 1px solid var(--window-line);
  background: var(--window);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.45);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.demo-view {
  position: relative;
  height: 436px;
  overflow: hidden;
}

.demo-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}

.demo-before {
  opacity: 0;
}

.demo-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 12px;
  margin: 16px 0 0;
  padding: 12px 16px 2px;
  border: 1px solid var(--window-line);
  border-bottom: 0;
  background: var(--window);
  list-style: none;
  counter-reset: demo-step;
}

.demo-steps li {
  padding-top: 8px;
  border-top: 2px solid var(--window-ink);
  color: var(--window-ink);
  font-size: 0.875rem;
  transition: color 0.3s, border-color 0.3s;
  counter-increment: demo-step;
}

.demo-steps li::before {
  content: counter(demo-step) "  ";
  font: 600 0.8125rem var(--font-mono);
}

.demo figcaption {
  padding: 10px 16px 14px;
  border: 1px solid var(--window-line);
  border-top: 0;
  background: var(--window);
  color: var(--window-dim);
  font-size: 0.8125rem;
}

.demo figcaption a {
  color: var(--window-ink);
}

.demo-replay {
  margin-left: 6px;
  padding: 2px 10px;
  border: 1px solid var(--window-ink);
  background: transparent;
  color: var(--window-ink);
  font: inherit;
  cursor: pointer;
  /* It holds its place from the start, so nothing below moves when it shows after the first run. */
  visibility: hidden;
}

.demo.has-played .demo-replay {
  visibility: visible;
}

/* While it plays: lines and the page come in order, and the steps fill as they are reached. */
.demo.is-playing .demo-line:not(.is-shown) {
  display: none;
}

.demo.is-playing .demo-answer:not(.is-shown) {
  visibility: hidden;
}

.demo.is-playing:not(.has-page) .demo-browser {
  opacity: 0;
  transform: translateY(16px);
}

.demo.is-playing:not(.is-fixed) .demo-before {
  opacity: 1;
}

.demo.is-playing:not(.is-fixed) .demo-after {
  opacity: 0;
}

.demo.is-playing .demo-steps li:not(.is-reached) {
  border-top-color: var(--window-line);
  color: var(--window-dim);
}

@media (max-width: 900px) {
  .demo-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .demo-browser {
    margin: 0;
  }

  .demo-scroll {
    height: 340px;
    margin-right: 0;
  }

  .demo-scroll pre {
    padding-right: 14px;
  }

  .demo-view {
    height: 440px;
  }

  .demo-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

/* Sections */

.section {
  padding-block: clamp(72px, 8vw, 120px);
}

/* A section opens with a tab on a 1px ink rule. The tab stays under the nav while its section
   scrolls by, and its square fills while the section crosses the middle of the screen (main.js).
   The shadow keeps a strip of paper under the rule, so text does not run up against it. */
.kicker {
  position: sticky;
  top: var(--nav-h);
  z-index: 5;
  display: flex;
  align-items: flex-end;
  margin-bottom: 28px;
  padding-top: 6px;
  border-bottom: 1px solid var(--ink);
  background: var(--bg);
  box-shadow: 0 16px 0 var(--bg);
}

.kicker::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  margin-bottom: -1px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: radial-gradient(circle, currentColor 3.5px, transparent 4px) var(--bg);
  transition: background-color 0.5s var(--ease), color 0.35s var(--ease) 0.15s;
}

.kicker.is-current::before {
  background-color: var(--ink);
  color: var(--bg);
}

.kicker span {
  display: flex;
  align-items: center;
  height: 26px;
  margin: 0 0 -1px -1px;
  padding: 0 7px;
  border: 1px solid var(--ink);
  background: var(--bg);
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .kicker {
    position: relative;
    top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kicker::before {
    transition: none;
  }
}

.sub {
  margin: 80px 0 20px;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.021em;
}

@media (max-width: 768px) {
  .sub {
    margin-top: 56px;
    font-size: 1.375rem;
  }
}

.note {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 72ch;
}

.small {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--ink);
}

/* HowItWorks */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}

.step p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.step-n {
  font: 400 0.8125rem var(--font-mono);
}

.step-n::before {
  content: "[ ";
}

.step-n::after {
  content: " ]";
}

.scale {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.level {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.level-name {
  position: relative;
  padding-left: 20px;
  color: var(--level-color);
  font: 500 0.9375rem var(--font-mono);
}

.level-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 10px;
  height: 10px;
  background: var(--level-color);
}

.level-means {
  font-weight: 500;
}

.level-cause {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.level-very-high {
  --level-color: var(--critical);
}

.level-high {
  --level-color: var(--high);
}

.level-moderate {
  --level-color: var(--medium);
}

.level-baseline {
  --level-color: var(--baseline);
}

.level-unrated {
  --level-color: var(--unrated);
}

@media (max-width: 1000px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .level {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Stats */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 28px 24px 32px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.stat-n {
  font: 400 4.5rem/1 var(--font-mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--ink-2);
  font-size: 0.9375rem;
  max-width: 28ch;
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 0;
  }

  .stat-n {
    font-size: 3.5rem;
  }
}

/* Benchmarks */

.bench-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* The one colour box of the section: the result to read first. Text on it stays ink. */
.effect {
  border-color: var(--wash-cream-line);
  background: var(--wash-cream);
}

.effect .small {
  color: var(--ink);
}

.effect-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.effect-figure {
  display: grid;
  gap: 8px;
  font-size: 0.9375rem;
}

.big {
  font: 400 clamp(2.75rem, 5vw, 4rem)/1 var(--font-mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.bad {
  color: var(--critical);
}

.good {
  color: var(--baseline);
}

.effect-arrow {
  font-size: 1.75rem;
}

/* Positioned, so that text hidden for screen readers inside a table is clipped with it and
   does not widen the page on a phone. */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th,
td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

thead th {
  padding-block: 12px;
  color: var(--ink-2);
  font: 400 0.75rem var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.match {
  min-width: 860px;
}

.speed {
  min-width: 560px;
}

.speed td:not(:first-child),
.speed th:not(:first-child) {
  text-align: right;
}

/* Two columns of numbers beside a label fit a phone: the label wraps instead. */
.versus {
  min-width: 0;
}

.versus th:first-child {
  white-space: normal;
}

.ok {
  color: var(--baseline);
  font-weight: 500;
  white-space: nowrap;
}

.ok::before {
  content: "✓ ";
}

.table-wrap + .small {
  margin-top: 14px;
}

@media (max-width: 860px) {
  .bench-lead {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .effect-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .effect-arrow {
    transform: rotate(90deg);
    justify-self: start;
  }
}

/* ProductFeatures */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.feature {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 20px 20px 24px;
  border: 1px solid var(--ink);
}

.feature p:not(.chips) {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 4px 10px;
  border-radius: 999px;
  font: 500 0.6875rem/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chip-critical {
  background: var(--critical-soft);
  color: var(--critical-ink);
}

.chip-high {
  background: var(--high-soft);
  color: var(--high-ink);
}

.chip-medium {
  background: var(--medium-soft);
  color: var(--medium-ink);
}

.chip-note {
  background: var(--note-soft);
  color: var(--note-ink);
}

.chip-fix {
  background: var(--baseline-soft);
  color: var(--baseline-ink);
}

.feature-more {
  margin-top: 28px;
  color: var(--ink-2);
  max-width: 80ch;
}

@media (max-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* UseCases */

.use-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 32px;
  margin-top: 48px;
}

.use {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}

.use p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.code {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--card-line);
  background: var(--card);
}

.code code {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
}

.copy-small {
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

/* The one colour box of the section: the sentence to say to an agent. */
.say {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--wash-blue-line);
  background: var(--wash-blue);
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 760px) {
  .use-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* GradientCallToAction: the warm wash, with the call on a paper card. */

.cta-band {
  padding-block: clamp(40px, 8vw, 120px);
  background-color: var(--band-warm);
  background-image: url("wash-warm.webp");
}

.cta {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background: var(--bg);
  text-align: center;
}

.cta h2 {
  max-width: 16em;
}

.cta p {
  color: var(--ink-2);
  font-size: 1.125rem;
}

.command-on-color {
  margin-top: 8px;
}

/* Industries */

.target-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 24px;
  margin-top: 48px;
}

.target {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}

.target p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

@media (max-width: 1080px) {
  .target-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .target-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .target-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* EnterpriseReady */

.ci-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: 48px;
}

.ticks {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.ticks li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--baseline);
  font-weight: 600;
}

.ticks strong {
  color: var(--ink);
  font-weight: 500;
}

.ci-side {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.exit caption {
  padding: 12px 0 8px;
  color: var(--ink-2);
  font: 400 0.75rem var(--font-mono);
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

.exit th {
  width: 56px;
  font: 500 1rem var(--font-mono);
}

.yaml {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--card-line);
  background: var(--card);
}

.yaml figcaption {
  padding: 10px 16px;
  border-bottom: 1px solid var(--card-line);
  color: var(--ink-2);
  font: 400 0.75rem var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.yaml pre {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.yaml code {
  font-size: 1em;
  overflow-wrap: normal;
}

@media (max-width: 900px) {
  .ci-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Testimonials: one row per run, the report's words on the left. */

.run-grid {
  display: grid;
  margin-top: 48px;
  border-top: 1px solid var(--ink);
}

.run {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px 48px;
  margin: 0;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.run blockquote {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  font: 400 1.125rem/1.45 var(--font-mono);
}

.run figcaption {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.run figcaption strong {
  color: var(--ink);
  font-weight: 500;
}

.tag {
  font-weight: 500;
}

.tag-critical {
  color: var(--critical);
}

.tag-high {
  color: var(--high);
}

.tag-medium {
  color: var(--medium);
}

.tag-note {
  color: var(--note);
}

@media (max-width: 760px) {
  .run {
    grid-template-columns: minmax(0, 1fr);
  }

  .run blockquote {
    font-size: 1rem;
  }
}

/* LogosStrip: the tools as a grid of hairline cells. Fourteen names fill seven columns or two
   exactly; with another count, change the columns so no row is left part empty. */

.strip .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
}

.strip-title {
  max-width: none;
  padding: 20px 24px 20px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font: 400 0.8125rem/1.4 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.strip-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--line);
}

.strip-list li {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 12px;
  background: var(--bg);
  font: 400 0.8125rem/1.35 var(--font-mono);
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .strip .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .strip-title {
    border-bottom: 0;
  }
}

@media (max-width: 860px) {
  .strip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PreFooter */

.start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.start-steps {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0 0 0 28px;
  border-top: 1px solid var(--ink);
}

.start-steps li {
  padding: 14px 0 14px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.start-steps code {
  white-space: nowrap;
}

.start-steps li::marker {
  color: var(--ink);
  font: 500 0.875rem var(--font-mono);
}

/* The one colour box of the section: what the tool cannot do. */
.limits {
  border-color: var(--wash-sand-line);
  background: var(--wash-sand);
}

.limits ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.9375rem;
}

.limits p {
  font-weight: 500;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

@media (max-width: 1000px) {
  .start-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Footer */

.site-footer {
  padding-block: 0 56px;
}

/* The rule is drawn inside the gutters, the same width as the rules above it. */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  padding-top: 32px;
  background: linear-gradient(var(--ink), var(--ink)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

.footer-grid > div {
  display: grid;
  gap: 8px;
}

.brand-small {
  font-size: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--ink-2);
  font-size: 0.875rem;
}