/*
 * plenarylabs.app — the one stylesheet.
 *
 * The token blocks are copied from apps/web/src/styles/tokens/*.css. The site is a separate
 * deployable and must not load anything from the app at runtime, so when a brand value changes
 * there it has to change here too. After them comes the marketing extension from the design
 * project, which exists only on the site.
 *
 * Brand rules this file keeps: light only; no gradients, textures or imagery; serif only for a
 * human's speech; mono only for measured quantities and the overline labels the app sets in it;
 * square data chrome, nothing is a pill.
 */

/* ── Tokens: colour (apps/web/src/styles/tokens/colors.css) ─────────────────────────────── */
:root {
  --ink-950: #14181c;
  --ink-900: #1c2126;
  --ink-800: #272d33;
  --ink-750: #2c3338;
  --ink-700: #353c42;
  --ink-600: #464e55;
  --ink-500: #5e676d;
  --ink-400: #7c868c;
  --ink-300: #a2aaaf;
  --ink-200: #c3c9cd;
  --ink-150: #d5d8da;
  --ink-100: #e1e4e6;
  --ink-050: #eff1f2;
  --ink-025: #f4f5f6;
  --ink-000: #ffffff;

  --accent-700: #0c4a45;
  --accent-600: #10574f;
  --accent-500: #14655e;
  --accent-400: #2c8078;
  --accent-200: #b4d4d0;
  --accent-100: #e3f0ee;

  --provenance-700: #6e4e14;
  --provenance-600: #8a6420;
  --provenance-500: #b0812a;
  --provenance-200: #e4ce9c;
  --provenance-100: #faf2e2;

  --critical-700: #6e1b15;
  --critical-500: #8e241c;
  --critical-200: #e8c4c0;
  --critical-100: #faeae8;

  /* Participant 5 is the app's contrast-corrected value, not the design's lighter one. */
  --participant-1: #0f5e8c;
  --participant-2: #c0562e;
  --participant-3: #1e7a6e;
  --participant-4: #7a5ea8;
  --participant-5: #8d7325;
  --participant-6: #b0455f;
  --participant-7: #35424d;

  --surface-ground: var(--ink-025);
  --surface-raised: var(--ink-000);
  --surface-sunken: var(--ink-050);
  --surface-inverse: var(--ink-950);
  --border-hairline: var(--ink-100);
  --border-panel: var(--ink-150);
  --border-strong: var(--ink-200);

  --text-primary: var(--ink-950);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-500);
  --text-disabled: var(--ink-400);
  --text-speech-ink: var(--ink-750);
  --text-oninverse: var(--ink-025);
  --text-oninverse-secondary: #b6bcc0;

  --accent: var(--accent-500);
  --accent-strong: var(--accent-600);
  --accent-press: var(--accent-700);
  --accent-focus: var(--accent-400);
  --accent-soft: var(--accent-100);
  --accent-border: var(--accent-200);
  --accent-on-accent: var(--ink-000);

  --provenance: var(--provenance-500);
  --provenance-strong: var(--provenance-600);
  --provenance-text: var(--provenance-700);
  --provenance-soft: var(--provenance-100);
  --provenance-border: var(--provenance-200);

  --critical: var(--critical-500);
  --critical-strong: var(--critical-700);
  --critical-soft: var(--critical-100);
  --critical-border: var(--critical-200);
}

/* ── Tokens: elevation (elevation.css) ──────────────────────────────────────────────────── */
:root {
  --elevation-flat: none;
  --elevation-card: 0 1px 2px rgba(20, 24, 28, 0.05);
  --elevation-raised: 0 1px 2px rgba(20, 24, 28, 0.05);
  --elevation-overlay: 0 6px 16px rgba(20, 24, 28, 0.1);
  --border-width-hairline: 1px;
  --rule-width: 3px;
}

/* ── Tokens: fonts (fonts.css). The families load from Google Fonts in each page's head. ── */
:root {
  --font-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-speech: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
}

/* ── Tokens: motion (motion.css) ────────────────────────────────────────────────────────── */
:root {
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Tokens: spacing (spacing.css) ──────────────────────────────────────────────────────── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  --radius-none: 0;
  --radius-control: 4px;
  --radius-card: 8px;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-card);
  --radius-lg: var(--radius-card);

  --hit-min: 44px;
  --control-height: 34px;
}

/* ── Tokens: typography (typography.css) ────────────────────────────────────────────────── */
:root {
  --text-display: 600 28px / 1.15 var(--font-ui);
  --text-title: 600 19px / 1.3 var(--font-ui);
  --text-heading: 600 15px / 1.35 var(--font-ui);
  --text-body: 400 13px / 1.5 var(--font-ui);
  --text-label: 500 12px / 1.3 var(--font-ui);
  --text-overline: 400 10px / 1 var(--font-mono);
  --text-figure: 400 13px / 1 var(--font-mono);
  --text-speech: 400 14px / 1.5 var(--font-speech);
  --text-caption: 400 11px / 1.4 var(--font-mono);

  --tracking-display: -0.018em;
  --tracking-title: -0.012em;
  --tracking-overline: 0.06em;
  --tracking-badge: 0.08em;
  --num-tabular: "tnum" 1, "lnum" 1;
}

/* ── Marketing extension (the design project's tokens/marketing.css) — site only ────────── */
:root {
  --text-hero: 600 clamp(38px, 5.4vw, 66px) / 1.05 var(--font-display);
  --text-section: 600 clamp(25px, 3.2vw, 38px) / 1.16 var(--font-display);
  --text-sub: 600 clamp(17px, 1.9vw, 21px) / 1.3 var(--font-display);
  --tracking-hero: -0.028em;
  --tracking-section: -0.02em;
  --text-lead: 400 clamp(16px, 1.55vw, 19px) / 1.58 var(--font-body);
  --text-marketing-body: 400 15px / 1.65 var(--font-body);
  --text-pull: 400 clamp(17px, 2vw, 22px) / 1.5 var(--font-speech);

  --space-section: clamp(56px, 8vw, 112px);
  --space-block: clamp(28px, 4vw, 48px);
  --gutter: clamp(20px, 4vw, 48px);
  --measure-hero: 20ch;
  --measure-lead: 56ch;
  --measure-prose: 68ch;
  --page-max: 1240px;

  /* Participant washes: the design's, for the citation chips. Not in the app. */
  --participant-1-wash: #e4edf3;
  --participant-2-wash: #f8ebe5;
  --participant-3-wash: #e5f1ef;
  --participant-4-wash: #eeeaf4;
  --participant-5-wash: #f5f0e3;
  --participant-6-wash: #f7e9ed;
  --participant-7-wash: #eaecee;

  --header-offset: 80px;
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-ground);
  color: var(--text-primary);
  font: var(--text-body);
  font-family: var(--font-body);
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}
button,
input {
  font-family: var(--font-ui);
}
:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 2px;
}
::selection {
  background: var(--accent-soft);
}
h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: 500 13px / 1 var(--font-body);
  color: var(--text-primary);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.band {
  background: var(--surface-raised);
  border-top: 1px solid var(--border-hairline);
}
.band--closed {
  border-bottom: 1px solid var(--border-hairline);
}
.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}
.section--tail {
  padding-bottom: var(--space-section);
}

/* ── Type ───────────────────────────────────────────────────────────────────────────────── */
.h-hero {
  font: var(--text-hero);
  letter-spacing: var(--tracking-hero);
  max-width: 22ch;
  text-wrap: pretty;
}
.h-hero--narrow {
  max-width: var(--measure-hero);
}
.h-section {
  font: var(--text-section);
  letter-spacing: var(--tracking-section);
  max-width: 24ch;
  text-wrap: pretty;
}
.h-section--wide {
  max-width: 26ch;
}
.h-sub {
  font: var(--text-sub);
  letter-spacing: var(--tracking-section);
  max-width: 22ch;
}
.lead {
  font: var(--text-lead);
  color: var(--text-secondary);
  max-width: var(--measure-lead);
  text-wrap: pretty;
}
.body-copy {
  font: var(--text-marketing-body);
  color: var(--text-secondary);
}
.eyebrow {
  display: block;
  font: 400 11px / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.overline {
  display: block;
  font: 400 10px / 1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.micro-label {
  display: block;
  font: 400 9.5px / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.meta {
  font: 400 10.5px / 1.4 var(--font-mono);
  color: var(--text-secondary);
}
.tick {
  display: block;
  width: 24px;
  height: 3px;
  margin-bottom: 14px;
}
.sq {
  display: block;
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--provenance);
}
.tag {
  padding: 4px 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  font: 500 10px / 1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.tag--sunken {
  background: var(--surface-sunken);
}

/* Participant identity: solid squares of white initials, and the hue as ink or a rule. */
.bg-p1 {
  background: var(--participant-1);
}
.bg-p3 {
  background: var(--participant-3);
}
.bg-p5 {
  background: var(--participant-5);
}
.bg-p6 {
  background: var(--participant-6);
}
.bg-p7 {
  background: var(--participant-7);
}
.c-p1 {
  color: var(--participant-1);
}
.c-p3 {
  color: var(--participant-3);
}
.c-p5 {
  color: var(--participant-5);
}
.c-p6 {
  color: var(--participant-6);
}
.rule-p1 {
  border-color: var(--participant-1);
}
.rule-p3 {
  border-color: var(--participant-3);
}
.rule-p5 {
  border-color: var(--participant-5);
}
.av {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--ink-000);
  font: 500 9px / 1 var(--font-body);
}
.av--lg {
  width: 26px;
  height: 26px;
  font-size: 10px;
}

/* ── Buttons ────────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover {
  text-decoration: none;
}
.btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-000);
}
.btn--primary:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--ink-000);
}
.btn--primary:active {
  border-color: var(--accent-press);
  background: var(--accent-press);
}
.btn--secondary {
  border-color: var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
}
.btn--secondary:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.btn--light {
  border-color: var(--ink-025);
  background: var(--ink-025);
  color: var(--ink-950);
}
.btn--light:hover {
  border-color: var(--ink-100);
  background: var(--ink-100);
  color: var(--ink-950);
}
.btn--light:focus-visible {
  outline-color: var(--ink-025);
}
.btn--sm {
  height: 34px;
  padding: 0 14px;
  font: 500 12.5px / 1 var(--font-body);
}
.btn--md {
  height: 38px;
  padding: 0 16px;
  font: 500 13px / 1 var(--font-body);
}
.btn--lg {
  height: 42px;
  padding: 0 18px;
  font: 500 13.5px / 1 var(--font-body);
}
.btn--xl {
  height: 44px;
  padding: 0 20px;
  font: 500 14px / 1 var(--font-body);
}
.btn[aria-busy="true"] {
  cursor: progress;
}

/* ── Header ─────────────────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 60px;
}
.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}
.brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wordmark__plenary {
  font: 600 17px / 1 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.wordmark__labs {
  font: 400 9px / 1 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 8px;
}
.site-nav a {
  padding: 6px 0;
  font: 500 13px / 1 var(--font-body);
  color: var(--text-secondary);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text-primary);
  text-decoration: none;
}
.site-nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--text-primary);
}
.site-header__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.beta-label {
  font: 400 11px / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  :root {
    --header-offset: 112px;
  }
  .site-header__inner {
    flex-wrap: wrap;
    gap: 0 16px;
    padding-top: 12px;
  }
  .site-nav {
    order: 3;
    width: 100%;
    height: 40px;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .beta-label {
    display: none;
  }
}

/* ── Hero and page intros ───────────────────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font: 400 11px / 1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--provenance-strong);
}
.hero .lead {
  margin-top: clamp(18px, 2.4vw, 26px);
}
.intro {
  padding-top: clamp(44px, 6vw, 80px);
  padding-bottom: var(--space-block);
}
.intro .eyebrow {
  margin-bottom: 16px;
}
.intro .lead {
  margin-top: 22px;
}

/* ── Waitlist form ──────────────────────────────────────────────────────────────────────── */
.waitlist {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}
.waitlist__input {
  width: min(300px, 100%);
  height: 44px;
  padding: 0 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: 400 14px / 1 var(--font-body);
  color: var(--text-primary);
}
.waitlist__input::placeholder {
  color: var(--ink-500);
}
.waitlist__input:focus-visible {
  border-color: var(--accent);
  outline-offset: 0;
}
.waitlist__input[aria-invalid="true"] {
  border-color: var(--critical);
}
.waitlist__note {
  font: 400 12px / 1.5 var(--font-body);
  color: var(--text-secondary);
}
.waitlist__note[data-state="joined"] {
  color: var(--accent-strong);
}
.waitlist__note[data-state="error"] {
  color: var(--critical);
}
/* The honeypot: off-screen, not merely hidden, so form-filling scripts still see a field. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist--dark {
  margin-top: 26px;
}
.waitlist--dark .waitlist__input {
  background: var(--ink-900);
  border-color: var(--ink-700);
  color: var(--ink-025);
}
.waitlist--dark .waitlist__input::placeholder {
  color: var(--ink-300);
}
.waitlist--dark .waitlist__input:focus-visible {
  border-color: var(--ink-300);
  outline-color: var(--ink-025);
}
.waitlist--dark .waitlist__note,
.waitlist--dark .waitlist__note[data-state="joined"] {
  color: var(--ink-300);
}
.waitlist--dark .waitlist__note[data-state="error"] {
  color: var(--ink-025);
}

/* ── Home: the sample report ────────────────────────────────────────────────────────────── */
.figure {
  margin: 0;
}
.figure__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 14px;
}
.figure__rule {
  flex: 1 1 24px;
  height: 1px;
  background: var(--border-hairline);
}
.figure__meta {
  font: 400 11px / 1 var(--font-mono);
  color: var(--text-secondary);
}
.panel {
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.panel--raised {
  border-color: var(--ink-150);
  box-shadow: var(--elevation-raised);
}
.report__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-hairline);
}
.report__wordmark .wordmark__plenary {
  font: 600 13px / 1.1 var(--font-display);
  letter-spacing: -0.01em;
}
.report__wordmark .wordmark__labs {
  font: 400 8px / 1.1 var(--font-body);
}
.vr {
  width: 1px;
  height: 24px;
  background: var(--border-hairline);
}
.report__title {
  flex: 1 1 200px;
  min-width: 0;
}
@media (max-width: 480px) {
  .report__head .vr {
    display: none;
  }
}
.report__study {
  display: block;
  overflow: hidden;
  font: 500 13px / 1.3 var(--font-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.report__title .meta {
  display: block;
}
.badge-ai {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: var(--provenance-soft);
  border: 1px solid var(--provenance-border);
  font: 500 10px / 1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--provenance-text);
}
.report__method {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-bottom: 1px solid var(--border-hairline);
}
.report__method .overline {
  flex: none;
  padding-top: 2px;
}
.report__method p {
  max-width: 78ch;
  font: 400 12.5px / 1.55 var(--font-body);
  color: var(--text-secondary);
}
.report__body {
  padding: clamp(18px, 2.4vw, 26px);
}
.report__body > .overline {
  margin-bottom: 10px;
}
.report__headline {
  max-width: 30ch;
  margin-bottom: 20px;
  font: var(--text-sub);
  letter-spacing: var(--tracking-section);
  text-wrap: pretty;
}
.dist {
  max-width: 560px;
  margin-bottom: 22px;
}
.dist__bars,
.dist__labels {
  display: flex;
  gap: 3px;
}
.dist__bars {
  height: 30px;
}
.dist__bin {
  display: flex;
  flex: 1;
  background: var(--surface-sunken);
}
.dist__bin .av {
  flex: 1;
  width: auto;
  height: auto;
  font-size: 10px;
}
.dist__labels {
  margin-top: 5px;
}
.dist__labels span {
  flex: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.report__prose {
  max-width: var(--measure-prose);
  font: 400 14px / 1.7 var(--font-body);
  text-wrap: pretty;
}
.cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  margin: 0 2px;
  padding: 0 7px;
  vertical-align: 1px;
  font: 500 11px / 1 var(--font-body);
  color: var(--ink-800);
  white-space: nowrap;
}
.cite::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
}
.cite--p1 {
  background: var(--participant-1-wash);
}
.cite--p1::before {
  background: var(--participant-1);
}
.cite--p3 {
  background: var(--participant-3-wash);
}
.cite--p3::before {
  background: var(--participant-3);
}
.cite--p6 {
  background: var(--participant-6-wash);
}
.cite--p6::before {
  background: var(--participant-6);
}
.report__footnote {
  margin-top: 14px;
  font: 400 12px / 1.5 var(--font-body);
  color: var(--text-secondary);
}

/* ── Home: the cost comparison ──────────────────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  margin-top: var(--space-block);
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
.tiles--cases {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.compare__col {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--surface-raised);
}
.compare__col--ours {
  border-left: 3px solid var(--accent);
}
.compare__col .overline {
  margin-bottom: 16px;
}
.compare__col--ours .overline {
  color: var(--accent-strong);
}
.compare__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.figure-big {
  display: block;
  font: 600 clamp(24px, 3vw, 32px) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.figure-big--word {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.compare__col--ours .figure-big {
  color: var(--accent-strong);
}
.figure-caption {
  display: block;
  margin-top: 4px;
  font: 400 12px / 1.5 var(--font-body);
  color: var(--text-secondary);
}
.fine-print {
  max-width: var(--measure-prose);
  margin-top: 18px;
  font: 400 12.5px / 1.6 var(--font-body);
  color: var(--text-secondary);
}

/* ── Home: the three constraints ────────────────────────────────────────────────────────── */
.section > .eyebrow {
  margin-bottom: 14px;
}
.after-heading {
  margin-top: var(--space-block);
}
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(252px, 100%), 1fr));
  gap: clamp(18px, 2.6vw, 32px);
  margin-top: var(--space-block);
}
.pillar {
  padding-top: 16px;
  border-top: 3px solid;
}
.pillar .overline {
  margin-bottom: 8px;
}
.pillar h3 {
  margin-bottom: 8px;
  font: 600 16px / 1.35 var(--font-body);
}

.reaction-panel {
  margin-top: var(--space-block);
}
.panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-sunken);
}
.panel__title {
  font: 600 13px / 1.3 var(--font-body);
}
.reactions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px;
  list-style: none;
}
.reaction {
  padding: 12px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}
.who {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12px / 1 var(--font-body);
}
.score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 10px 0;
}
.score__n {
  font: 600 26px / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.score__of {
  font: 400 10px / 1 var(--font-mono);
  color: var(--text-secondary);
}
.reaction .micro-label {
  margin-bottom: 3px;
}
.speech-sm {
  font: 400 12.5px / 1.5 var(--font-speech);
  color: var(--ink-900);
}
.round {
  padding: 0 16px 16px;
}
.round__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}
.turn {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.turn__name {
  display: block;
  margin-bottom: 3px;
  font: 600 12px / 1 var(--font-body);
}
.turn__speech {
  font: 400 14px / 1.5 var(--font-speech);
  color: var(--text-speech-ink);
}
@keyframes pnl-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.caret {
  display: inline-block;
  width: 8px;
  height: 17px;
  margin-left: 2px;
  vertical-align: -3px;
  background: var(--ink-400);
  animation: pnl-caret 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .caret {
    animation: none;
  }
}

/* ── Home: use-case tiles and the closing plate ─────────────────────────────────────────── */
.section .lead--after {
  margin-top: 18px;
}
.case-tile {
  padding: 20px 18px;
  background: var(--surface-raised);
}
.case-tile::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--accent);
}
.case-tile h3 {
  margin-bottom: 7px;
  font: 600 15px / 1.3 var(--font-body);
}
.case-tile p {
  font: 400 13.5px / 1.6 var(--font-body);
  color: var(--text-secondary);
}
.see-all {
  margin-top: 22px;
}

.closing {
  scroll-margin-top: var(--header-offset);
}
.plate {
  padding: clamp(28px, 4.5vw, 56px);
  background: var(--ink-950);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-lg);
}
.plate h2 {
  color: var(--ink-025);
}
.plate .lead {
  margin-top: 16px;
  color: var(--ink-300);
}

/* ── How it works ───────────────────────────────────────────────────────────────────────── */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(14px, 2.5vw, 28px);
  padding: clamp(16px, 2.2vw, 24px) clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--border-hairline);
}
.row:last-child {
  border-bottom: 0;
}
.row__n {
  flex: 0 0 42px;
  padding-top: 5px;
  font: 400 11px / 1 var(--font-mono);
  color: var(--text-secondary);
}
.row__main {
  flex: 1 1 200px;
  min-width: 0;
}
.row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.row__head h2 {
  font: 600 16px / 1.3 var(--font-body);
}
.row__main .body-copy {
  max-width: 60ch;
}
/* The design set these asides in the serif. They are the product's voice, not a participant's,
   so they take the UI face: serif is reserved for a human's speech. */
.row__note {
  flex: 0 0 200px;
  padding-left: 14px;
  border-left: 2px solid var(--border-hairline);
  font: 400 12.5px / 1.55 var(--font-body);
  color: var(--ink-750);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}
.split .body-copy {
  max-width: 54ch;
  margin-top: 14px;
}
.room {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-ground);
}
.room__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 13px;
}
.room__head .panel__title {
  font-size: 12.5px;
  line-height: 1;
}
.room__head .meta {
  font-size: 9.5px;
  line-height: 1;
}
.room__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 13px;
  list-style: none;
}
.room__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 11.5px / 1.5 var(--font-body);
  color: var(--text-secondary);
}
.room__foot {
  margin: 0;
  padding: 13px;
  font: 400 11px / 1.5 var(--font-body);
  color: var(--text-secondary);
}
.matrix-intro {
  max-width: var(--measure-prose);
  margin: 16px 0 var(--space-block);
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.scroll-x {
  overflow-x: auto;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}
.matrix th,
.matrix td {
  padding: 9px;
  text-align: left;
  vertical-align: top;
}
.matrix thead th {
  background: var(--surface-sunken);
  border-left: 1px solid var(--border-hairline);
  font-weight: 400;
}
.matrix thead th:first-child {
  width: 150px;
  border-left: 0;
}
.matrix__q {
  display: block;
  font: 600 11.5px / 1.35 var(--font-body);
}
.matrix thead .micro-label {
  margin-top: 3px;
  letter-spacing: 0;
  text-transform: none;
}
.matrix tbody th,
.matrix td {
  border-top: 1px solid var(--border-hairline);
  font: 400 12.5px / 1.45 var(--font-body);
}
.matrix tbody th {
  vertical-align: middle;
}
.matrix td {
  border-left: 1px solid var(--border-hairline);
}
.matrix .who {
  font: 400 12.5px / 1 var(--font-body);
}
.matrix .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(18px, 2.6vw, 32px);
}
.limit {
  padding-left: 16px;
  border-left: 3px solid var(--border-strong);
}
.limit h3 {
  margin-bottom: 7px;
  font: 600 15px / 1.35 var(--font-body);
}
.limits-intro {
  margin: 16px 0 var(--space-block);
}

/* ── Use cases ──────────────────────────────────────────────────────────────────────────── */
.row--case {
  gap: clamp(14px, 2.5vw, 30px);
  padding: clamp(18px, 2.4vw, 26px);
}
.row--case .row__n {
  flex-basis: 40px;
}
.row--case .row__main {
  flex-basis: 240px;
}
.row--case h2 {
  margin-bottom: 8px;
  font: 600 17px / 1.3 var(--font-body);
}
.row--case .body-copy {
  max-width: 58ch;
}
.case__side {
  display: flex;
  flex: 0 0 230px;
  flex-direction: column;
  gap: 8px;
}
.case__side dt {
  font: 400 9.5px / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.case__side dt + dd + dt {
  margin-top: 4px;
}
.case__cast {
  font: 400 12.5px / 1.55 var(--font-body);
  color: var(--text-secondary);
}
.case__matters {
  font: 400 12.5px / 1.55 var(--font-body);
  color: var(--ink-750);
}
.cases-cta {
  margin-top: 24px;
}

@media (max-width: 640px) {
  .row__note,
  .case__side {
    flex-basis: 100%;
  }
}

/* ── 404 ────────────────────────────────────────────────────────────────────────────────── */
.not-found {
  padding-top: clamp(56px, 9vw, 128px);
  padding-bottom: var(--space-section);
}
.not-found img {
  margin-bottom: 28px;
}
.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 30px;
  font: 500 13px / 1 var(--font-body);
}

/* ── Footer ─────────────────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink-950);
  border-top: 1px solid var(--ink-800);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 48px);
  padding-top: clamp(32px, 4.5vw, 56px);
  padding-bottom: clamp(32px, 4.5vw, 56px);
}
.footer__about {
  flex: 1 1 260px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.footer__tile {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--ink-025);
  border-radius: 7px;
}
.footer__brand .wordmark__plenary {
  font-size: 15px;
  color: var(--ink-025);
}
.footer__brand .wordmark__labs {
  font-size: 8.5px;
  color: var(--ink-300);
}
.footer__blurb {
  max-width: 40ch;
  font: 400 12.5px / 1.6 var(--font-body);
  color: var(--ink-300);
}
.footer__col {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  gap: 9px;
}
.footer__col--wide {
  flex-basis: 200px;
}
.footer__heading {
  font: 400 10px / 1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-oninverse-secondary);
}
.footer__col a {
  font: 400 12.5px / 1 var(--font-body);
  color: var(--ink-100);
}
.footer__col a:hover {
  color: var(--ink-000);
  text-decoration: none;
}
.footer__col a:focus-visible {
  outline-color: var(--ink-025);
}
.footer__text {
  font: 400 12.5px / 1.5 var(--font-body);
  color: var(--ink-300);
}
.footer__legal {
  padding-bottom: clamp(24px, 3vw, 36px);
}
.footer__legal p {
  max-width: 78ch;
  padding-top: 18px;
  border-top: 1px solid var(--ink-800);
  font: 400 11.5px / 1.6 var(--font-body);
  color: var(--text-oninverse-secondary);
}