/* Fonts: self-hosted variable fonts, SIL Open Font License (see assets/fonts/). */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens. Dark is the default for every visitor; the header toggle switches to
   light and the choice is remembered (assets/js/site.js). One accent (green) for
   links, numbers, flows, and highlights. Every text/background pair passes WCAG AA
   in both themes; grey labels are 8:1 or better. */
:root {
  color-scheme: dark;

  --bg: #0f0f0e;
  --surface: #181816;
  --well: #1f1e1b;
  --text: #f4f2ed;
  --muted: #cfcbc2;
  --rule: #2e2c28;
  --rule-strong: #46423c;
  --accent: #4cd29c;
  --accent-hover: #86e6bf;
  --accent-soft: #173328;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -16px rgb(0 0 0 / 0.7);

  /* Soft shadow under the wall switch plate, light mode only: it lifts the white plate
     off the light header. On the dark header the plate needs none. */
  --switch-shadow: none;

  --font-body: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-head: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --wide: 68.75rem;   /* 1100px: hero, proof row, cards */
  --measure: 40rem;   /* about 70 characters of body text */
  --gutter: 1.25rem;
  --radius: 10px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f8f6f1;
  --surface: #ffffff;
  --well: #f0ede6;
  --text: #121110;
  --muted: #383530;
  --rule: #dcd7cc;
  --rule-strong: #c4bdaf;
  --accent: #0a6b4d;
  --accent-hover: #064a35;
  --accent-soft: #e3f1ea;
  --shadow: 0 1px 2px rgb(18 17 16 / 0.05), 0 12px 32px -16px rgb(18 17 16 / 0.22);

  --switch-shadow: drop-shadow(0 0 0.5px rgb(18 17 16 / 0.35)) drop-shadow(0 1px 2px rgb(18 17 16 / 0.22));
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

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

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}

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

.nowrap {
  white-space: nowrap;
}

.arrow {
  width: 0.85em;
  height: 0.85em;
  margin-inline: 0.2em;
  vertical-align: -0.08em;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.9375rem;
  border: 1px solid var(--rule);
}

.skip-link:focus {
  top: var(--gutter);
}

/* Header */
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding-block: 1rem;
}

.site-header .site-name {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem; /* the toggle's height, so the header doesn't grow when site.js reveals it */
  margin-right: auto;
}

.site-nav {
  order: 2;
  flex-basis: 100%;
}

.theme-toggle {
  order: 1;
}

@media (min-width: 40rem) {
  .site-nav {
    order: 1;
    flex-basis: auto;
  }

  .theme-toggle {
    order: 2;
  }
}

/* Wall light switch: two photos of the same switch, lever down and lever up, stacked in
   the button. Lever up = lights on = light mode; lever down = lights off = dark mode (the
   default). The theme attribute on <html> picks the photo; the inline head script sets it
   before first paint, so nothing fades in on load. Before site.js runs (or with
   JavaScript off) the switch keeps its space but is invisible and unfocusable, so
   revealing it shifts nothing. The photos are decorative (empty alt): the button itself
   is named "Lights" and reports whether it is on. */
.theme-toggle {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: inline-block;
  visibility: hidden;
}

.switch-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: var(--switch-shadow);
  transition: opacity 100ms ease-out;
}

.switch-up,
:root[data-theme="light"] .switch-down {
  opacity: 0;
}

:root[data-theme="light"] .switch-up {
  opacity: 1;
}

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

.site-name {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.site-name:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 500;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--text);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Hero: pitch on the left, media slot (diagram now, demo video later) on the right */
.hero {
  display: grid;
  gap: 2.5rem;
  padding-block: 2rem 3rem;
}

.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
}

.hero .lead {
  max-width: var(--measure);
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.55;
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: center;
    gap: 4rem;
    padding-block: 3rem 3.5rem;
  }
}

/* Media slots hold a diagram until a demo video replaces it.
   Videos play muted and looped via assets/js/site.js; reduced motion shows the poster. */
.media-slot {
  position: relative;
  margin: 0;
}

.media-slot > video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--well);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card-visual.media-slot > video {
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  margin: -1rem;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.media-toggle {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
  padding: 0.25rem 0.625rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.media-slot figcaption,
.case-figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

/* System diagram: three lifelines (Desk, database, iPad) with labeled flows */
.sysmap {
  padding: 1.25rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-head);
  line-height: 1.25;
}

.sysmap-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sysmap-nodes > div {
  display: flex;
  padding-inline: 0.25rem;
}

.node {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0.625rem 0.375rem;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  text-align: center;
}

.node-name {
  font-size: 0.9375rem;
  font-weight: 650;
}

.node-sub {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.node-db {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.node-parts {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.node-parts span {
  padding: 0.125rem 0.25rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Lifelines sit under the centre of each node. */
.sysmap-lanes {
  background:
    linear-gradient(var(--rule-strong), var(--rule-strong)) 16.667% 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--rule-strong), var(--rule-strong)) 83.333% 0 / 1px 100% no-repeat;
}

.lane {
  padding-block: 1.125rem 0.875rem;
  text-align: center;
}

.lane-label {
  position: relative;
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.125rem 0.5rem;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.lane-label .arrow {
  color: var(--accent);
}

.lane-line {
  position: relative;
  height: 2px;
  margin-inline: calc(100% / 6);
  background: var(--accent);
}

.head {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 6px solid transparent;
  transform: translateY(-50%);
}

.head-l {
  left: -3px;
  border-right: 10px solid var(--accent);
}

.head-r {
  right: -3px;
  border-left: 10px solid var(--accent);
}

.dot,
.ring {
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface);
}

.ring {
  left: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}

.dot-c {
  left: 50%;
}

.dot-r {
  left: 100%;
}

/* Lane from the database to the Desk only: the lane covers the left two
   columns, so its line runs from the Desk lifeline to the database lifeline. */
.lane-left {
  width: calc(100% * 2 / 3);
}

.lane-left .lane-line {
  margin-inline: 25%;
}

/* Proof row */
.proof {
  border-block: 1px solid var(--rule);
  background: var(--surface);
}

.proof-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
  margin: 0;
  padding: 2rem 0;
  list-style: none;
  font-family: var(--font-head);
}

.proof-list .span-2 {
  grid-column: 1 / -1;
}

.stat-num {
  display: block;
  font-size: clamp(2rem, 1.55rem + 1.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-num .arrow {
  width: 0.7em;
  height: 0.7em;
  margin-inline: 0.15em;
  vertical-align: 0.02em;
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 550;
  line-height: 1.3;
}

.stat-src {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
}

@media (min-width: 40rem) {
  .proof-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-list .span-2 {
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  .proof-list {
    grid-template-columns: 0.8fr 0.95fr 1.45fr 1fr 1.2fr;
    gap: 2rem;
    padding-block: 2.25rem;
  }
}

/* Quote slot */
.quote {
  padding-block: 3.5rem 0;
}

.quote figure {
  max-width: var(--measure);
  margin: 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}

.quote blockquote {
  margin: 0;
}

.quote blockquote p {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.45;
}

.quote figcaption {
  font-family: var(--font-head);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Featured case studies */
.featured {
  padding-block: 3.5rem 1rem;
}

.featured h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
}

.cards {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card > :not(.card-visual) {
  padding-inline: 1.375rem;
}

/* On desktop the cards share row tracks (subgrid), so results, titles,
   summaries, and "Built with" lines line up across all three. */
@media (min-width: 60rem) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @supports (grid-template-rows: subgrid) {
    .card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

.card:hover {
  border-color: var(--accent);
}

.card-visual {
  height: 12rem;
  padding: 1rem;
  overflow: hidden;
  background: var(--well);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: 0.875rem;
  line-height: 1.25;
}

.card h3 {
  margin: 0;
  padding-top: 1.375rem;
}

.card h3 a {
  color: var(--text);
  text-decoration: none;
}

/* The title link covers the whole card, so the card is one click target. */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.card h3 a:focus-visible {
  outline: none;
}

.card h3 a:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.card-result {
  display: block;
  font-size: 1.625rem;
  line-height: 1.15;
}

.card-result .num {
  color: var(--accent);
}

.card-title {
  display: block;
  margin-top: 0.625rem;
  font-size: 1.0625rem;
}

.card:hover .card-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.card-context {
  margin: 0.25rem 0 0.875rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

.card-summary {
  margin: 0 0 1.125rem;
  line-height: 1.55;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-content: end;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: auto 0 0;
  padding-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

.card-meta .label {
  font-weight: 650;
  color: var(--text);
}

.card-cta {
  font-weight: 650;
  color: var(--accent);
}

/* Card 1 visual: before/after follow-up strip */
.viz-ba {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.125rem;
  height: 100%;
}

.ba-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.ba-val {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.is-now .ba-val {
  color: var(--accent);
}

.ba-text {
  font-size: 0.875rem;
  line-height: 1.3;
}

.ba-tag {
  display: block;
  font-weight: 700;
  color: var(--muted);
}

.ba-bar {
  grid-column: 1 / -1;
  height: 0.5rem;
  overflow: hidden;
  background: var(--rule);
  border-radius: 999px;
}

.ba-fill {
  display: block;
  height: 100%;
  background: var(--muted);
  border-radius: inherit;
}

.is-now .ba-fill {
  background: var(--accent);
}

.w-70 {
  width: 70%;
}

.w-100 {
  width: 100%;
}

/* Card 2 visual: the stack that grew from one tool */
.viz-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.viz-stack li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1875rem 0.625rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-weight: 600;
}

.viz-stack li:nth-child(1) { margin-inline: 2rem; }
.viz-stack li:nth-child(2) { margin-inline: 1.5rem; }
.viz-stack li:nth-child(3) { margin-inline: 1rem; }
.viz-stack li:nth-child(4) { margin-inline: 0.5rem; }

.viz-stack .is-first {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.viz-stack .is-first span {
  font-weight: 500;
}

/* Card 3 visual: validation log */
.viz-log {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  height: 100%;
}

.viz-row {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.viz-pill {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.viz-row code {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viz-row.is-bad code {
  text-decoration: line-through;
}

.viz-row.is-ok {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.viz-row.is-ok .viz-pill,
.viz-row.is-ok code {
  color: var(--accent);
}

.more-links {
  max-width: var(--measure);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.more-links li + li {
  margin-top: 0.5rem;
}

/* Case study pages */
.case-head {
  padding-block: 2rem 2.5rem;
}

.crumb {
  margin: 0 0 1.25rem;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 500;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
}

.case-head .lead {
  max-width: var(--measure);
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.55;
}

.case-role {
  max-width: var(--measure);
  margin: 0;
  color: var(--muted);
}

.case-facts {
  margin: 0;
}

.case-facts .proof-list {
  margin: 0;
}

.case-facts dt,
.case-facts dd {
  margin: 0;
}

.case-body {
  padding-top: 1rem;
}

/* Pages without a key-facts band start their first section closer to the intro. */
.case-head + .case-body {
  padding-top: 0;
}

.case-head + .case-body > .case-section:first-child {
  padding-top: 0.5rem;
}

.case-head + .featured {
  padding-top: 1rem;
}

.case-section {
  max-width: var(--measure);
  padding-top: 2.5rem;
}

.case-section h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
}

.case-section h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
}

.case-section ul {
  margin: 0 0 1em;
  padding-left: 1.25rem;
}

.case-section li {
  margin-bottom: 0.625rem;
  padding-left: 0.25rem;
}

.case-section li::marker {
  color: var(--accent);
}

.case-figure {
  margin: 1.75rem 0;
}

.case-figure.media-slot .sysmap {
  max-width: 30rem;
}

.case-figure .viz-ba {
  max-width: 30rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.terms {
  margin: 0;
  padding: 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.terms dt {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 650;
}

.terms dd {
  margin: 0.125rem 0 0.875rem;
  line-height: 1.5;
}

.terms dd:last-child {
  margin-bottom: 0;
}

.built-with {
  padding: 1.25rem 1.375rem;
  background: var(--well);
  border-radius: var(--radius);
}

.built-with p:last-child {
  margin-bottom: 0;
}

.demo-block {
  margin-top: 1rem;
  padding: 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.demo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: 1rem;
}

.case-section .demo-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.case-section .demo-list li:first-child {
  padding-top: 0;
}

.case-section .demo-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.status {
  flex-shrink: 0;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.disclosure {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: 0.875rem;
  color: var(--muted);
}

.tbd {
  padding: 0.75rem 1rem;
  background: var(--well);
  border: 1px dashed var(--rule-strong);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
}

.case-section .quote {
  padding-block: 0.5rem 0;
}

.case-next {
  max-width: var(--measure);
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-head);
}

.case-next p {
  margin: 0;
}

.case-next .label {
  display: block;
  font-size: 0.875rem;
  color: var(--muted);
}

.case-next a {
  font-size: 1.25rem;
  font-weight: 650;
}

.case-figure .viz-stack {
  max-width: 30rem;
  padding: 1.25rem;
  background: var(--well);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 0.875rem;
  line-height: 1.25;
}

@media (min-width: 64rem) {
  .proof-list.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .proof-list.is-even {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Agent flow: sources, agent, validation gates, dashboard (top to bottom) */
.flow {
  max-width: 30rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-head);
  line-height: 1.3;
  text-align: center;
}

.flow-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.flow-sources span {
  padding: 0.375rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.flow-arrow {
  position: relative;
  height: 1.75rem;
}

.flow-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
  transform: translateX(-50%);
}

.flow-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  border-inline: 6px solid transparent;
  border-top: 10px solid var(--accent);
  transform: translateX(-50%);
}

.flow-step {
  padding: 0.625rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
}

.flow-gates {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.flow-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 650;
}

.flow-sub {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Tables scroll inside their own box on small screens. */
.table-wrap {
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.table-wrap table {
  width: 100%;
  min-width: 28rem; /* narrow enough that part of the last column shows on a phone, hinting the scroll */
  border-collapse: collapse;
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.4;
}

.table-wrap th,
.table-wrap td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
}

.table-wrap thead th {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
}

.table-wrap tbody tr + tr td {
  border-top: 1px solid var(--rule);
}

.table-wrap td:last-child {
  font-weight: 600;
}

/* Lesson callout */
.lesson {
  margin: 1.5rem 0;
  padding: 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.lesson-lead {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.45;
}

.lesson-split {
  display: grid;
  gap: 1rem;
}

@media (min-width: 36rem) {
  .lesson-split {
    grid-template-columns: 1fr 1fr;
  }
}

.lesson-split p {
  margin: 0;
}

.lesson-label {
  margin-bottom: 0.25rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Process page: numbered workflow steps */
.steps {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.case-section .steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 1rem;
  margin: 0;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.case-section .steps > li::before {
  content: counter(step);
  grid-row: span 3;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.step-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
}

.step-body {
  margin: 0.25rem 0 0;
}

.step-eg {
  margin: 0.5rem 0 0;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Plan, build, review strip */
.models {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr) 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.375rem;
  max-width: 34rem;
  padding: 1.25rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-head);
  line-height: 1.25;
  text-align: center;
}

.model {
  padding: 0.625rem 0.375rem;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
}

.model-role {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.model-name {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  font-weight: 650;
}

.model-arrow {
  position: relative;
  height: 2px;
  background: var(--accent);
}

.model-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  border-block: 5px solid transparent;
  border-left: 8px solid var(--accent);
  transform: translateY(-50%);
}

/* Tool chips */
.case-section .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.case-section .chips li {
  margin: 0;
  padding: 0.25rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 550;
}

/* Work index: smaller builds */
.builds {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .builds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .builds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.build {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.build h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1875rem;
}

.build p {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.build-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--font-head);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--muted);
}

.build-meta .label {
  font-weight: 650;
  color: var(--text);
}

/* About page */
.facts-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 1.25rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.facts-list dt {
  padding-top: 0.2rem;
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts-list dd {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 30rem) {
  .facts-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }

  .facts-list dd + dt {
    margin-top: 0.75rem;
  }
}

.case-section .contact-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-head);
  font-size: 1.125rem;
}

.case-section .contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.contact-list .label {
  min-width: 5.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.9;
}

/* Footer */
.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer .wrap {
  padding-block: 1.75rem 3rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding-block: 0.25rem;
}

.site-footer p {
  margin: 0;
}