/* ————————————————————————————————————————————————
   Testclub design system — July 2026 brand guide
   Paper / Ink / Sage · Space Grotesk / Inter / JetBrains Mono
   One place to edit all site styling.
   ———————————————————————————————————————————————— */

:root {
  --ink: #16191C;
  --paper: #F5F3EE;
  --sage: #4E6A54;
  --clay: #A9543D;
  --moss: #5E8163;
  --pine: #24382B;   /* dark green — big footer background */
  --rule: rgba(22, 25, 28, .14);
  --muted: rgba(22, 25, 28, .62);
  --mono: 'JetBrains Mono', monospace;
  --head: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}

/* ————— Layout ————— */
.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 48px); }
section.band { padding: 64px 0; border-bottom: 1px solid var(--rule); }
section.band:last-of-type { border-bottom: none; }

/* ————— Type ————— */
h1 { font-family: var(--head); font-weight: 700; font-size: 52px; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 20px; }
h2 { font-family: var(--head); font-weight: 700; font-size: 32px; line-height: 1.15; margin-bottom: 16px; }
h3 { font-family: var(--head); font-weight: 500; font-size: 20px; margin-bottom: 8px; }
p { max-width: 760px; margin-bottom: 14px; }
ul, ol { max-width: 760px; margin: 0 0 14px 20px; }
li { margin-bottom: 8px; }
a { color: inherit; }
.muted { color: var(--muted); }

.kicker {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: var(--sage); margin-bottom: 24px; text-transform: uppercase;
}
.quote {
  font-family: var(--head); font-size: 24px; line-height: 1.35;
  max-width: 760px; margin: 20px 0 14px;
}

/* ————— Buttons ————— */
.btn {
  display: inline-block; background: var(--sage); color: var(--paper);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  padding: 12px 24px; border-radius: 6px; text-decoration: none;
  border: none; cursor: pointer; letter-spacing: .02em;
}
.btn:hover { background: var(--moss); }
.btn.nav-btn { font-size: 13px; padding: 9px 18px; margin-left: 22px; }
.cta {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--sage); text-decoration: none;
}
a.cta:hover { text-decoration: underline; }

/* ————— Header / nav ————— */
header.site {
  border-bottom: 1px solid var(--rule);
}
header.site .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px; gap: 24px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--mono); font-weight: 700; font-size: 20px;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.logo-mark { height: 24px; width: auto; display: block; }
.wordmark em { color: var(--sage); font-style: normal; }
nav.site { display: flex; align-items: center; flex-wrap: wrap; }
nav.site a {
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--ink); text-decoration: none; margin-left: 22px;
}
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--sage); }
nav.site a.btn, nav.site a.btn:hover { color: var(--paper); }
nav.site a.btn[aria-current="page"] { color: var(--paper); }

/* Services dropdown */
.nav-item { position: relative; display: inline-block; }
.nav-item .arrow { font-size: 9px; vertical-align: 1px; }
.nav-item .dropdown {
  position: absolute; top: 100%; left: 10px; z-index: 60;
  visibility: hidden; opacity: 0;
  transition: opacity .12s ease, visibility 0s linear .35s;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 6px;
  min-width: 240px; padding: 8px 0; margin-top: 6px;
  box-shadow: 0 8px 24px rgba(22, 25, 28, .12);
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  visibility: visible; opacity: 1;
  transition: opacity .12s ease, visibility 0s;
}
/* Invisible bridge across the 6px gap so the pointer never leaves
   the hover area on its way down to the menu. */
.nav-item .dropdown::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
/* Widen the hover target slightly around the trigger itself. */
.nav-item > a { padding-bottom: 8px; }
.nav-item .dropdown a {
  display: block; margin: 0; padding: 9px 18px; font-size: 12.5px;
}
.nav-item .dropdown a:hover { background: rgba(78, 106, 84, .08); }

/* ————— Services sub-nav ————— */
.subnav { border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, .35); }
.subnav .container { padding-top: 12px; padding-bottom: 12px; }
.subnav a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--muted); text-decoration: none; margin-right: 22px;
}
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--sage); }

/* ————— Pipeline diagram (AI Testing) ————— */
.pipeline {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  max-width: 720px; margin: 20px 0 8px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-align: center;
}
.pipeline > div { border: 1px solid var(--rule); padding: 22px 12px; }
.pipeline .accel {
  border: 1.5px dashed var(--sage); color: var(--sage); background: rgba(78, 106, 84, .06);
}
.pipeline small { display: block; margin-top: 8px; letter-spacing: 0; color: var(--muted); text-transform: none; }

/* ————— Hero ————— */
.hero { padding: 88px 0 64px; border-bottom: 1px solid var(--rule); }
.hero h1 { color: var(--sage); }
.hero-split {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.hero-split > div { min-width: 0; }

/* ————— Network animation panels ————— */
.canvas-panel { position: relative; background: #F0EDE8; height: 420px; }
.canvas-panel canvas { display: block; width: 100%; height: 100%; }
.canvas-label {
  position: absolute; top: 12px; left: 16px; z-index: 2;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  color: #777; text-transform: uppercase;
}

/* ————— Cards (What we do, case studies) ————— */
.cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 8px 0 6px;
}
.card {
  border: 1px solid var(--rule); border-radius: 6px; padding: 18px 20px;
  background: rgba(255, 255, 255, .45); display: block; text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--sage); }
.card h3 { font-size: 17px; }
.card p { font-size: 14.5px; margin: 0 0 4px; color: rgba(22, 25, 28, .75); }
.card .cta { display: block; margin-top: 10px; font-size: 12.5px; }
.card .metrics { font-family: var(--mono); font-size: 12.5px; color: var(--sage); margin-top: 10px; display: block; }
.card img.client-logo {
  height: 26px; width: auto; max-width: 200px; display: block; margin-bottom: 14px;
}

/* ————— Method steps ————— */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin: 8px 0;
}
.steps.three { grid-template-columns: repeat(3, 1fr); }
.step { border-top: 2px solid var(--sage); padding-top: 12px; }
.step b { font-family: var(--mono); font-size: 12px; color: var(--sage); display: block; margin-bottom: 6px; }
.step h3 { font-size: 16px; }
.step p { font-size: 13.5px; margin: 0; color: rgba(22, 25, 28, .75); }

/* ————— Values ————— */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0; }

/* ————— Evidence / code blocks ————— */
pre {
  font-family: var(--mono); font-size: 13px; line-height: 1.65;
  background: var(--ink); color: var(--paper); padding: 20px 24px;
  border-radius: 6px; overflow-x: auto; margin: 12px 0; max-width: 720px;
}
pre .c { color: rgba(245, 243, 238, .45); }
pre .fail { color: #D98A73; }
pre .pass { color: #8FB394; }
code { font-family: var(--mono); font-size: .9em; }

.note {
  font-family: var(--mono); font-size: 12.5px; color: var(--sage);
  background: rgba(78, 106, 84, .08); border: 1px solid rgba(78, 106, 84, .3);
  border-radius: 6px; padding: 12px 16px; max-width: 700px; margin: 16px 0;
}

/* ————— Tables ————— */
table { border-collapse: collapse; font-size: 14.5px; margin: 10px 0; width: 100%; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--rule); }
th {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sage);
}

/* ————— Gap diagram (Philosophy) ————— */
.gap-diagram {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  max-width: 720px; margin: 20px 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-align: center;
}
.gap-diagram > div { border: 1px solid var(--rule); padding: 26px 12px; }
.gap-diagram .gap {
  border: 1.5px dashed var(--sage); color: var(--sage); background: rgba(78, 106, 84, .06);
}
.gap-diagram small { display: block; margin-top: 8px; letter-spacing: 0; color: var(--muted); text-transform: none; }

/* ————— Client row ————— */
.clients {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px;
  max-width: 720px; margin: 14px 0;
}
.clients.centered {
  justify-content: center; max-width: 900px; margin: 22px auto;
}
.clients img { height: 26px; width: auto; max-width: 150px; opacity: .8; }

/* ————— Team photos ————— */
.team-photo {
  width: 110px; height: 110px; object-fit: cover; border-radius: 6px;
  display: block; margin-bottom: 14px;
}

/* ————— Testimonial ————— */
blockquote { max-width: 640px; font-style: italic; margin-bottom: 14px; }
blockquote + p { font-size: 15px; }

/* ————— Footer CTA band + big footer ————— */
footer.site .cta-band { padding: 64px 0; border-top: 1px solid var(--rule); }
footer.site .cta-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
footer.site .cta-row h2 { margin-bottom: 8px; }
footer.site .cta-row .btn { flex-shrink: 0; }

footer.site .mega {
  background: var(--ink); color: rgba(245, 243, 238, .78);
  padding: 56px 0 28px;
}
footer.site .mega .container { max-width: 1280px; }
.mega-grid {
  display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr; gap: 40px;
}
.mega-brand .wordmark.on-dark { color: var(--paper); font-size: 22px; }
.mega-brand .wordmark.on-dark em { color: #9DB5A2; }
.mega-brand p { font-size: 14.5px; margin-top: 14px; max-width: 320px; line-height: 1.6; }
.mega-col h4 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #9DB5A2; margin-bottom: 14px; font-weight: 500;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin-bottom: 10px; }
.mega-col a {
  color: rgba(245, 243, 238, .78); text-decoration: none; font-size: 14.5px;
}
.mega-col a:hover { color: var(--paper); }
.mega-base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 48px; padding-top: 22px;
  border-top: 1px solid rgba(245, 243, 238, .15);
  font-family: var(--mono); font-size: 12px; color: rgba(245, 243, 238, .5);
}
.mega-base .base-right { display: flex; align-items: center; gap: 20px; }
.mega-base a { color: rgba(245, 243, 238, .6); text-decoration: none; }
.mega-base a:hover { color: var(--paper); }
.mega-base .icon { display: inline-flex; align-items: center; }

/* ————— Contact page ————— */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start;
}
.contact-info .row {
  display: flex; align-items: center; gap: 12px; margin: 10px 0;
}
.contact-info .row svg { color: var(--sage); flex-shrink: 0; }
.contact-form {
  background: rgba(255, 255, 255, .5); border: 1px solid var(--rule);
  border-radius: 6px; padding: 28px;
}
.contact-form label {
  display: block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sage);
  margin: 16px 0 6px;
}
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 11px 14px; font-family: var(--body); font-size: 15px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 6px; box-sizing: border-box;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--sage);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .btn { margin-top: 20px; }
.turnstile-slot { margin-top: 16px; }

/* ————— Case study hero with client image ————— */
.case-hero {
  display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: start;
}
.case-logo {
  width: 100%; max-width: 240px; display: block; margin-top: 14px;
}

/* ————— Case study prose (markdown pages) ————— */
.prose h1 { font-size: 40px; }
.prose h2 { margin-top: 40px; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 32px 0; }
.metrics-row {
  display: flex; gap: 40px; flex-wrap: wrap; margin: 24px 0 8px;
}
.metrics-row .metric b {
  font-family: var(--head); font-size: 34px; font-weight: 700; display: block; line-height: 1.1;
}
.metrics-row .metric span {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sage);
}

/* ————— Responsive ————— */
@media (max-width: 720px) {
  .container { padding: 0 22px; }
  .hero { padding: 56px 0 44px; }
  h1 { font-size: 36px; }
  .prose h1 { font-size: 30px; }
  .steps, .steps.three, .values, .cards { grid-template-columns: 1fr; }
  .gap-diagram { grid-template-columns: 1fr; }
  .case-hero { grid-template-columns: 1fr; gap: 24px; }
  .case-logo { max-width: 200px; margin-top: 0; }
  .hero-split { grid-template-columns: 1fr; }
  .canvas-panel { height: 260px; }
  .mega-grid { grid-template-columns: 1fr; gap: 32px; }
  .mega-base { flex-direction: column; align-items: flex-start; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  nav.site { gap: 8px 0; }
  .btn.nav-btn { margin-left: 12px; }
  nav.site a { margin-left: 0; margin-right: 18px; }
}

/* ————————————————————————————————————————————————
   Additions on top of the July brand guide
   (carried over from the hand-built HTML site)
   ———————————————————————————————————————————————— */

/* Blinking cursor in the wordmark */
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.wordmark em {
  font-weight: 400;
  animation: blink 1s step-end infinite;
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .wordmark em { animation: none; }
}

/* Client logo row — greyscale, lifts on hover */
.clients img {
  filter: grayscale(1);
  opacity: .45;
  transition: opacity .2s ease, filter .2s ease;
}
.clients a:hover img, .clients img:hover {
  opacity: .8;
  filter: grayscale(0);
}

/* Services dropdown: hover-only doesn't work on touch, so on small
   screens flatten it to a plain inline list instead of a popup. */
@media (max-width: 720px) {
  .nav-item .dropdown {
    position: static; border: none; box-shadow: none;
    background: none; min-width: 0; padding: 0; margin: 4px 0 0;
    visibility: visible; opacity: 1; transition: none;
  }
  .nav-item .dropdown::before { display: none; }
  .nav-item .dropdown a { padding: 5px 0 5px 14px; font-size: 12px; color: var(--muted); }
  .nav-item .arrow { display: none; }
  .nav-item { display: block; width: 100%; }
}

/* ————— Stage flow strip (Discover → Specify → Interrogate → Report) ————— */
.flow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 32px 0 8px; max-width: 900px;
}
.flow .stage {
  position: relative; border-top: 2px solid var(--sage);
  padding: 14px 26px 0 0;
}
.flow .stage b {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: var(--sage); display: block; margin-bottom: 6px;
}
.flow .stage h3 { font-size: 19px; margin-bottom: 4px; }
.flow .stage p { font-size: 13.5px; color: var(--muted); margin: 0; }
.flow .stage::after {
  content: "→"; position: absolute; top: -13px; right: 12px;
  font-family: var(--mono); font-size: 15px; color: var(--sage);
  background: var(--paper); padding: 0 4px; line-height: 1;
}
.flow .stage:last-child::after { content: none; }

/* ————— Framework matrix: one block per practice ————— */
.matrix { margin: 8px 0; }
.matrix-row {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.matrix-row:last-child { border-bottom: none; }
.matrix-row > h3 {
  font-size: 18px; margin: 0; position: sticky; top: 20px; align-self: start;
}
.matrix-row > h3 span {
  display: block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .08em; color: var(--sage); margin-top: 6px; font-weight: 400;
}
.matrix-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.matrix-cells div b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sage);
  display: block; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.matrix-cells div p { font-size: 13.5px; line-height: 1.5; margin: 0; color: rgba(22,25,28,.78); }

@media (max-width: 900px) {
  .matrix-cells { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .flow .stage:nth-child(2)::after { content: none; }
  .matrix-row { grid-template-columns: 1fr; gap: 16px; }
  .matrix-row > h3 { position: static; }
  .matrix-cells { grid-template-columns: 1fr; gap: 16px; }
}

/* ————— Inline SVG diagrams ————— */
.diagram { margin: 26px 0; max-width: 600px; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram.venn { max-width: 440px; margin: 32px auto 24px; }
.diagram.venn figcaption { text-align: center; }
.diagram figcaption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--muted); margin-top: 10px;
}

/* ————— Case study: before / after comparison ————— */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.compare-col {
  padding: 22px 24px; background: rgba(255,255,255,.5);
  border: 1px solid var(--rule); border-radius: 6px;
}
.compare-col h4 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 16px; font-weight: 500;
}
.compare-col.before h4 { color: var(--clay); }
.compare-col.after  h4 { color: var(--moss); }
.compare-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: none; }
.compare-col li { font-size: 14.5px; line-height: 1.5; padding-left: 18px; position: relative; margin: 0; }
.compare-col li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
}
.compare-col.before li::before { background: var(--clay); }
.compare-col.after  li::before { background: var(--moss); }

/* ————— Case study: delivery pipeline (4 steps) ————— */
.pipeline.four { grid-template-columns: repeat(4, 1fr); max-width: 900px; }
.pipeline .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--sage); margin-bottom: 8px;
}
.pipeline .title {
  font-family: var(--head); font-size: 17px; font-weight: 700;
  letter-spacing: 0; margin-bottom: 8px;
}
.pipeline .who {
  font-family: var(--body); font-size: 13px; letter-spacing: 0;
  line-height: 1.5; color: var(--muted); text-transform: none;
}

/* ————— Case study: pull quote with rule ————— */
.pullquote { margin: 32px 0; max-width: 760px; }
.pullquote blockquote {
  font-family: var(--head); font-size: 22px; font-weight: 500; line-height: 1.4;
  color: var(--sage); font-style: italic;
  border-left: 3px solid var(--sage); padding-left: 22px; margin: 0; max-width: none;
}
.pullquote .attr {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  margin-top: 12px; padding-left: 25px;
}

@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
  .pipeline.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pipeline.four { grid-template-columns: 1fr; }
}

/* ————— Mobile burger nav ————— */
.burger {
  display: none; margin-left: auto; background: none; border: none;
  cursor: pointer; padding: 6px; color: var(--ink); line-height: 0;
}
.burger svg { width: 26px; height: 26px; }

@media (max-width: 720px) {
  .burger { display: block; }
  header.site .container { flex-wrap: wrap; gap: 0; }
  nav.site { display: none; width: 100%; padding: 6px 0 14px; }
  nav.site.open { display: flex; flex-direction: column; align-items: flex-start; }
  nav.site > a, .nav-item > a {
    margin: 0; padding: 10px 0; font-size: 14px; letter-spacing: .04em;
  }
  .nav-item .dropdown a { padding: 7px 0 7px 16px; font-size: 13px; }
  .btn.nav-btn { margin: 12px 0 0; padding: 11px 22px; font-size: 13px; }
}

/* ————— Contact actions row ————— */
.contact-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 28px; }

/* Barbell sits wider than the default diagram width */
.diagram.barbell { max-width: 720px; }
.diagram.barbell figcaption { font-family: var(--mono); }

/* Sub-nav wraps rather than overflowing on small screens */
@media (max-width: 720px) {
  .subnav .container { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .subnav a { margin-right: 0; font-size: 12px; }
}

/* ————————————————————————————————————————————————
   One reading measure. Paragraphs were capped at 760px but headings,
   tables and code blocks were not, so the text column didn't line up
   with anything around it. Everything in the prose flow now shares
   the same measure. Grid components (cards, steps, matrix, flow,
   client rows) keep their own full-container widths.
   ———————————————————————————————————————————————— */
:root { --measure: 760px; }

h1, h2, h3 { max-width: var(--measure); }
table { max-width: var(--measure); }
pre { max-width: var(--measure); }
.note { max-width: var(--measure); }
.quote { max-width: var(--measure); }
.pullquote { max-width: var(--measure); }
.diagram { max-width: var(--measure); }
.diagram.barbell { max-width: var(--measure); }

/* Components that should stay full width keep it */
.cards h3, .step h3, .flow .stage h3, .matrix-row > h3,
.compare-col h4, .mega-col h4 { max-width: none; }

/* ————— Venn labels scale up on small screens —————
   The SVG is 560 units wide. On a phone it renders at ~340px, so 11px
   labels land near 7px. Bumping the font-size inside the viewBox keeps
   them legible without touching the artwork's geometry. */
@media (max-width: 720px) {
  .diagram.venn { max-width: 100%; }
  .diagram.venn .v-head  { font-size: 20px; }
  .diagram.venn .v-mid   { font-size: 18px; }
  .diagram.venn .v-small { font-size: 16px; }
}

/* ————————————————————————————————————————————————
   Container width.
   1200px left every text block stranded in the left two-thirds
   with a 440px void beside it, and made prose (760px) and grid
   components (1200px) end at completely different points.
   960px lets the prose measure fill the frame, so the page reads
   as one column rather than two mismatched ones.
   ———————————————————————————————————————————————— */
.container { max-width: 960px; }
footer.site .mega .container { max-width: 960px; }

/* At 960px the 200px label column squeezed the four stage cells to
   144px each. Label now sits above them, so each cell gets ~195px. */
.matrix-row { grid-template-columns: 1fr; gap: 16px; }
.matrix-row > h3 { position: static; }
.matrix-row > h3 span { display: inline; margin-top: 0; margin-left: 10px; }

/* The practice subtitle reads fine inline on desktop but crowds the
   heading on a phone, so stack it there. */
@media (max-width: 720px) {
  .matrix-row > h3 span { display: block; margin-left: 0; margin-top: 5px; }
}

/* Wide tables (the 5-column AI failure-rate table) push past the
   viewport on very narrow phones. Let them scroll inside their own
   box instead of widening the page. */
@media (max-width: 560px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  table th, table td { font-size: 13px; padding: 9px 12px; }
}

/* ————— Footer CTA —————
   The headline was inheriting the 760px prose measure, which forced
   "Conclusions follow from evidence, never precede it." onto two lines
   for the sake of one word. It also meant the row's flex wrapping was
   inconsistent between pages. Headline now takes the full container
   and the button sits below it, so every page behaves the same. */
footer.site .cta-row { display: block; }
footer.site .cta-row h2 {
  max-width: none;
  margin-bottom: 22px;
  text-wrap: balance;
}
footer.site .cta-row .btn { display: inline-block; }