@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/base.css";
@import "tokens/landing.css";
@import "status.css";
@import "chrome.css";

/* ============================================================
   Augmenticon website — EANM 2026

   The design system tokens above are copied verbatim from the
   design handoff and are binding. Nothing in this file invents a
   colour: every value below resolves to a token.

   Layout rules that hold across every page:
   - page ground is --surface-canvas, sections carry their own ground
   - content column max 1240px, 64px 28px 88px, column gap 72px
   - multi-column blocks are auto-fit grids, every child min-width:0
   - flat surfaces only: no gradients, no textures
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────────── */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  background: var(--surface-canvas);
  overflow-x: hidden;
}

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

img {
  max-width: 100%;
}

/* The 60px white header bar: wordmark left, breadcrumb beside it,
   status pill on the right. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  row-gap: 8px;
  min-height: 60px;
  padding: 10px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  row-gap: 8px;
  min-width: 0;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  color: var(--ink-900);
}

.wordmark:hover {
  color: var(--ink-900);
  text-decoration: none;
}

.wordmark__mark {
  width: 24px;
  height: 24px;
  color: var(--blue-500);
  flex: none;
}

/* The lockup needs 34px of mark height to carry its company line. The header
   renders the mark at 24px, so it sets the name on one line instead, and keeps
   the brand's two colours across the two words. */
.wordmark__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-800);
  white-space: nowrap;
}

.wordmark__company {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-right: 0.42em;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumb__sep {
  color: var(--ink-300);
}

.breadcrumb__here {
  color: var(--ink-900);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: var(--space-5);
  min-width: 0;
}

.site-nav a {
  font-size: var(--text-sm);
  color: var(--ink-500);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--blue-700);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--ink-900);
  font-weight: 600;
}

/* Explore features: a no-JS dropdown built on <details>/<summary>, matching
   the rest of the site's script-free interaction. */
.nav-menu {
  position: relative;
}

.nav-menu > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}

.nav-menu:hover > summary,
.nav-menu[open] > summary {
  color: var(--blue-700);
}

.nav-menu.is-current > summary {
  color: var(--ink-900);
  font-weight: 600;
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 224px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.nav-menu__panel a {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-700);
  white-space: nowrap;
}

.nav-menu__panel a:hover {
  background: var(--surface-sunken);
  color: var(--ink-900);
  text-decoration: none;
}

.button--sm {
  padding: 9px 18px;
  font-size: var(--text-sm);
}

/* ── Content column ─────────────────────────────────────────── */

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 28px 88px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.page--narrow {
  max-width: 1280px;
}

.page-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 840px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--blue-600);
}

.page-title {
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  text-wrap: pretty;
}

.page-lede {
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--ink-600);
  text-wrap: pretty;
}

.page-lede--strong {
  color: var(--ink-700);
  font-size: clamp(17px, 2.2vw, 21px);
}

/* ── Section header: mono number, 22px title, rule to the edge ─ */

.section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.section__no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-600);
  flex: none;
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.section__rule {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.caption {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 900px;
  text-wrap: pretty;
}

/* ── Grids: auto-fit, never a fixed track ───────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 260px), 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.grid > * {
  min-width: 0;
}

.grid--tight {
  gap: 14px;
}

.grid--hairline {
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The hairlines are drawn by each cell's outline rather than by a background
   showing through the gaps, so a partly filled last row leaves no empty
   coloured cell behind. */
.grid--hairline-dark {
  gap: 1px;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.grid--hairline-dark > * {
  outline: 1px solid var(--ink-700);
}

/* ── Cards ──────────────────────────────────────────────────── */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.card--flush {
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  border-color: var(--border-default);
}

.card--panel {
  padding: 40px;
  gap: var(--space-8);
}

.card--plain {
  box-shadow: none;
}

/* Emphasis is a 2px coloured border, never a coloured left accent. */
.card--emphasis {
  border: 2px solid var(--border-strong);
  padding: calc(var(--space-6) - 1px);
}

.card--amber {
  border: 2px solid var(--amber-500);
  padding: calc(var(--space-6) - 1px);
  box-shadow: none;
}

.card--danger {
  border: 2px solid var(--danger);
  padding: calc(var(--space-6) - 1px);
  box-shadow: none;
}

.card--outline {
  border: 1px solid var(--border-default);
  box-shadow: none;
}

.card--accented {
  background: var(--blue-50);
  border: 1px solid var(--blue-300);
  box-shadow: none;
}

.card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-500);
}

.card__label--blue {
  color: var(--blue-700);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  text-wrap: pretty;
}

.card__title--lg {
  font-size: clamp(20px, 2.4vw, 24px);
}

.card__title--xl {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
}

.card__body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink-600);
  text-wrap: pretty;
}

.card__body--sm {
  font-size: var(--text-sm);
}

.card__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-500);
}

.card__spacer {
  flex: 1;
}

/* A card header carrying a 2px coloured bottom border. */
.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 26px;
  background: var(--surface-sunken);
  border-bottom: 2px solid var(--border-default);
}

.card__header--danger {
  border-bottom-color: var(--danger);
}

.card__header--primary {
  border-bottom-color: var(--color-primary);
}

.card__header--ink {
  background: var(--ink-100);
  border-bottom-color: var(--ink-800);
}

.card__header-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-900);
}

.card__content {
  padding: var(--space-6) 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Hairline lists ─────────────────────────────────────────── */

.rows {
  display: flex;
  flex-direction: column;
}

.rows > * {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink-700);
  text-wrap: pretty;
}

.rows > *:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rows--blue > * {
  border-bottom-color: var(--blue-200);
}

.rows--strong > * {
  font-weight: 600;
  color: var(--ink-900);
}

.rows__last-strong > *:last-child {
  font-weight: 600;
  color: var(--ink-900);
}

.dot-rows {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  border-top: 1px solid var(--blue-200);
}

.dot-rows > * {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 0;
  border-bottom: 1px solid var(--blue-200);
  font-size: 17px;
  color: var(--ink-700);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
}

.dot--lg {
  width: 7px;
  height: 7px;
}

/* ── Checked list (the product check glyph) ─────────────────── */

.checks {
  display: flex;
  flex-direction: column;
}

.checks > * {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--blue-200);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-900);
}

.checks > *:last-child {
  border-bottom: 0;
}

.icon {
  flex: none;
}

.icon--primary {
  color: var(--color-primary);
}

.icon--accent {
  color: var(--color-accent);
}

.icon--success {
  color: var(--success);
}

.icon--amber {
  color: var(--amber-600);
}

.icon--danger {
  color: var(--danger);
}

.icon--ink {
  color: var(--ink-800);
}

.icon--muted {
  color: var(--ink-500);
}

.icon--cyan {
  color: var(--cyan-400);
}

/* ── Bands: colour + shape + word, never white on a fill ────── */

.pill-roadmap {
  display: inline-flex;
  align-items: center;
  background: var(--amber-500);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-900);
  flex: none;
}

.pill-roadmap--sm {
  padding: 5px 13px;
  font-size: 11px;
}

.roadmap-flag {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.roadmap-flag__text {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-800);
}

.roadmap-flag__text--dark {
  color: var(--amber-300);
}

/* The 6px amber top rule on anything not in the product today. */
.roadmap-rule {
  height: 6px;
  background: var(--amber-500);
}

.band-action {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: var(--space-4) 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-900);
  text-wrap: pretty;
}

.band-action--amber {
  border-color: var(--amber-500);
}

.band-action--danger {
  border-color: var(--danger);
}

/* Finding rows are the one place a 4px left border carries the band. */
.findings {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.finding {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 22px;
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-default);
}

.finding:last-child {
  border-bottom: 0;
}

.finding--accepted {
  border-left-color: var(--success);
}

.finding--confirm {
  border-left-color: var(--amber-500);
}

.finding--blocked {
  border-left-color: var(--danger);
}

.finding--unreadable {
  border-left-color: var(--ink-800);
}

.finding__what {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.finding__name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-900);
}

.finding__read {
  font-size: var(--text-sm);
  color: var(--ink-600);
}

/* The remediation sentence is what the operator acts on. */
.finding__action {
  flex: 1 1 300px;
  min-width: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-900);
  text-wrap: pretty;
}

.finding__action--quiet {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.tally {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.tally__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tally__value {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--ink-900);
}

.tally__label {
  font-size: var(--text-sm);
  color: var(--ink-600);
}

/* ── Inverse band ───────────────────────────────────────────── */

.inverse {
  background: var(--surface-inverse);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.inverse__lead {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  max-width: 860px;
  text-wrap: pretty;
}

.inverse__lead--lg {
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.25;
}

.inverse__sub {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.55;
  color: var(--blue-200);
  text-wrap: pretty;
}

.inverse-cell {
  background: var(--ink-900);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.inverse-cell__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  text-wrap: pretty;
}

.inverse-cell__body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-300);
  text-wrap: pretty;
}

.inverse-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 20px var(--space-6);
  background: var(--ink-800);
  border-radius: var(--radius-md);
}

.inverse-strip__text {
  flex: 1 1 420px;
  min-width: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--white);
  text-wrap: pretty;
}

.closing-band {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: 26px 28px;
  background: var(--ink-900);
  border-radius: var(--radius-md);
}

.closing-band__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--cyan-400);
  flex: none;
}

.closing-band__text {
  flex: 1 1 420px;
  min-width: 0;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.45;
  color: var(--white);
  text-wrap: pretty;
}

/* ── Responsibility / split strips ──────────────────────────── */

.split-cell {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  background: var(--white);
}

.split-cell--sunken {
  background: var(--surface-sunken);
}

.split-cell__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-500);
}

.split-cell__label--blue {
  color: var(--blue-700);
}

.split-cell__body {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink-800);
  text-wrap: pretty;
}

/* ── Gate cards (the consent chain) ─────────────────────────── */

.gate {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--blue-300);
  border-radius: var(--radius-md);
  background: var(--blue-50);
}

.gate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The AND rides in the header, immediately left of the number, so
   it cannot orphan at the start of a wrapped line. */
.gate__id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.gate__and {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  color: var(--ink-500);
  flex: none;
}

.gate__no {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  flex: none;
}

.gate__state {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue-700);
}

.gate__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-500);
}

.gate__body {
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--ink-800);
  text-wrap: pretty;
}

/* ── Flow tracks (asks → resolves → returns) ────────────────── */

.track {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.track__text {
  min-width: 0;
}

.track__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-500);
}

.track__body {
  font-size: var(--text-sm);
  color: var(--ink-700);
  text-wrap: pretty;
}

/* ── Release gate table ─────────────────────────────────────── */

.gates-table {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.gate-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle);
}

.gate-row:first-child {
  border-top: 0;
}

.gate-row--signed {
  background: var(--blue-50);
}

.gate-row__what {
  flex: 1 1 260px;
  min-width: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gate-row__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
}

.gate-row__detail {
  font-size: var(--text-sm);
  color: var(--ink-600);
  text-wrap: pretty;
}

.gate-row__role {
  flex: 1 1 230px;
  min-width: 0;
  max-width: 260px;
  padding: 18px 22px;
  border-left: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--text-sm);
  color: var(--ink-900);
  text-wrap: pretty;
}

.gate-row__role--none {
  color: var(--ink-500);
}

.gate-row__role--decides {
  font-weight: 600;
}

@media (max-width: 560px) {
  .gate-row__role {
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: 0;
  }
}

/* ── Chips ──────────────────────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.chip {
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--ink-700);
}

/* ── Notes ──────────────────────────────────────────────────── */

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) 26px;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.note--amber {
  border-color: var(--amber-500);
}

.note--danger {
  border-color: var(--danger);
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.note--blue {
  background: var(--blue-50);
  border-color: var(--blue-200);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}

.note__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.note__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-900);
  text-wrap: pretty;
}

.note__text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-600);
  text-wrap: pretty;
}

.note__text--lg {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-700);
}

/* ── Buttons ────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-normal) var(--ease-standard);
}

.button:hover {
  background: var(--color-primary-hover);
  color: var(--text-inverse);
  text-decoration: none;
}

.button:active {
  background: var(--color-primary-active);
  transform: scale(0.985);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.button--quiet {
  background: transparent;
  border-color: var(--border-default);
  color: var(--ink-900);
}

.button--quiet:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--ink-900);
}

.button--on-dark {
  background: var(--white);
  color: var(--ink-900);
}

.button--on-dark:hover {
  background: var(--blue-100);
  color: var(--ink-900);
}

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

  .button:active {
    transform: none;
  }
}

/* ── Dashed gap frames: a real gap, with a note of what belongs ─ */

.gap-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 40px;
  min-height: 260px;
  text-align: center;
  border: 1px dashed var(--blue-300);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.gap-frame--sunken {
  background: var(--blue-50);
}

.gap-frame--dark {
  border-color: var(--ink-500);
  background: var(--ink-800);
}

.gap-frame__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--blue-600);
}

.gap-frame--dark .gap-frame__label {
  color: var(--cyan-400);
}

/* ============================================================
   The invitation site — one scrolling page, eight designed pages
   ============================================================ */

.hero,
.strip {
  --strip-pad-y: clamp(56px, 7vw, 96px);
  --strip-pad-x: clamp(24px, 4vw, 64px);
}

.strip {
  background: var(--white);
}

.strip__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--strip-pad-y) var(--strip-pad-x);
}

.strip--canvas {
  background: var(--surface-canvas);
}

.strip--sunken {
  background: var(--surface-sunken);
}

.strip--inverse {
  background: var(--surface-inverse);
}

/* Two-column strips carry the artboard's proportion where there is room
   and stack below it. Both tracks are fr, so neither can be orphaned by a
   long word or a wide image. --cols sets the first track per section. */
.strip__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .strip__cols {
    grid-template-columns: minmax(0, var(--cols, 1.15fr)) minmax(0, 1fr);
  }
}

.strip__cols > * {
  min-width: 0;
}

.strip__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 620px;
}

.strip__h2 {
  font-size: clamp(32px, 5.4vw, 60px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  text-wrap: pretty;
}

.strip__h2--inverse {
  color: var(--white);
  font-size: clamp(32px, 5.8vw, 64px);
  line-height: 1.04;
}

.strip__sub {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--ink-600);
  text-wrap: pretty;
}

.strip__sub--inverse {
  color: var(--blue-200);
}

.strip__aside {
  font-size: var(--text-md);
  color: var(--ink-500);
  border-left: 2px solid var(--blue-300);
  padding-left: var(--space-4);
}

/* ── Hero (01 Invitation) ───────────────────────────────────── */

.hero {
  background: var(--white);
  border-bottom: 1px solid var(--border-subtle);
}

.hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--strip-pad-y) var(--strip-pad-x);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

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

.hero__inner > * {
  min-width: 0;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero__logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
  opacity: 0.75;
}

.product-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.product-lockup__mark {
  width: clamp(52px, 7.4vw, 78px);
  height: clamp(52px, 7.4vw, 78px);
  color: var(--blue-500);
  flex: none;
}

.product-lockup__name {
  font-family: var(--font-display);
  font-size: clamp(42px, 7vw, 66px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-800);
}

/* The company line sits above the product name, as the lockup sets it. */
.product-lockup__by {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 8px;
}

.hero__h1 {
  font-size: clamp(36px, 6.4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  text-wrap: pretty;
}

.hero__sub {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.45;
  color: var(--ink-600);
  max-width: 560px;
  text-wrap: pretty;
}

.hero__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}

.hero__when {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: 0.01em;
}

.hero__tick {
  width: 26px;
  height: 1px;
  background: var(--blue-300);
  flex: none;
}

.hero__cta {
  font-size: var(--text-md);
  color: var(--ink-500);
}

/* ── Device and screen frames ───────────────────────────────── */

.screen-panel {
  background: var(--blue-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-panel--card {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.screen-panel--flush {
  padding: 0;
  overflow: hidden;
  background: var(--white);
}

/* The tablet screenshots are 3:4-ish and must not be cropped. */
.screen-shot {
  display: block;
  width: 100%;
  max-width: 524px;
  height: auto;
  margin: 0 auto;
}

/* The field map is shown as a window onto a much taller page. */
.screen-window {
  width: 100%;
  max-height: 620px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--white);
}

.screen-window img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Inverse strips on the invitation page ──────────────────── */

.strip--inverse .strip__inner {
  color: var(--white);
}

.strip__flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.contact-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contact-lockup__mark {
  width: 44px;
  height: 44px;
  color: var(--blue-300);
  flex: none;
}

.contact-lockup__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--white);
}

.contact-lockup__by {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 5px;
}

.close__h2 {
  font-size: clamp(34px, 6.6vw, 70px);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: pretty;
}

.close__sub {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.45;
  color: var(--blue-200);
  text-wrap: pretty;
}

.close__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 28px;
  border-top: 1px solid var(--ink-700);
}

.close__person {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--white);
}

.close__mail {
  font-size: 19px;
  color: var(--cyan-400);
  align-self: flex-start;
}

.close__mail:hover {
  color: var(--cyan-300);
}

.close__meta {
  font-size: var(--text-md);
  color: var(--ink-300);
}

/* ── Scope statement (07 Outlook) ───────────────────────────── */

.scope {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.scope__h2 {
  font-size: clamp(32px, 5.6vw, 62px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  text-wrap: pretty;
}

.scope__sub {
  margin: 0;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--ink-600);
  max-width: 620px;
  text-wrap: pretty;
}

.scope__tick {
  width: 40px;
  height: 1px;
  background: var(--blue-300);
}

/* ── Payoff pair (06) ───────────────────────────────────────── */

.payoffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-8);
  margin-top: clamp(32px, 5vw, 44px);
}

.payoffs > * {
  min-width: 0;
}

.headline-pair {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}

.headline-pair > * {
  min-width: 0;
}

.headline-pair__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 620px;
}

/* ── Site footer ────────────────────────────────────────────── */

.site-footer {
  background: var(--white);
  border-top: 1px solid var(--border-subtle);
}

.site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.site-footer__logo {
  height: 22px;
  width: auto;
  object-fit: contain;
}

.site-footer__meta {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.site-footer__links {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

/* ── Utilities ──────────────────────────────────────────────── */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.stack--tight {
  gap: var(--space-3);
}

.stack--loose {
  gap: var(--space-8);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mono {
  font-family: var(--font-mono);
}

.measure {
  max-width: 760px;
}

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

/* ============================================================
   Annotated result photograph (cv-result.html, and the preview
   that fills section 03 of the invitation page)
   ============================================================ */

.shot {
  position: relative;
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-900);
  line-height: 0;
}

.shot > img {
  width: 100%;
  height: auto;
  display: block;
}

/* Markers are placed in percentages so they hold at any width. */
.marker {
  position: absolute;
  border: 2px solid var(--border-default);
  border-radius: 4px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: border-width var(--duration-fast) var(--ease-standard),
    background var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.marker--blocked {
  border-color: var(--danger);
}

.marker--confirm {
  border-color: var(--amber-500);
}

.marker__pin {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: inset 0 0 0 3px var(--border-default), 0 1px 3px rgba(24, 28, 27, 0.4);
  transition: opacity var(--duration-normal) var(--ease-standard);
}

.marker--blocked .marker__pin {
  box-shadow: inset 0 0 0 3px var(--danger), 0 1px 3px rgba(24, 28, 27, 0.4);
}

.marker--confirm .marker__pin {
  box-shadow: inset 0 0 0 3px var(--amber-500), 0 1px 3px rgba(24, 28, 27, 0.4);
}

/* Selection: a thicker border, a translucent fill, a white outer ring. */
.marker[aria-pressed="true"] {
  border-width: 3px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.marker:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
}

/* The unselected pins dim so the selected one carries the eye. */
.shot[data-selected] .marker:not([aria-pressed="true"]) .marker__pin {
  opacity: 0.55;
}

.shot-legend {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.shot-legend__swatch {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-default);
  border-radius: 3px;
  flex: none;
}

.shot-legend__swatch--blocked {
  border-color: var(--danger);
}

.shot-legend__swatch--confirm {
  border-color: var(--amber-500);
}

/* ── Finding cards beside the photograph ────────────────────── */

.result {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  flex-wrap: wrap;
}

.result__image {
  flex: 1 1 560px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.result__findings {
  flex: 1 1 400px;
  min-width: min(100%, 300px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rc-finding {
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  display: flex;
  gap: var(--space-4);
  cursor: pointer;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.rc-finding--blocked {
  border-left-color: var(--danger);
}

.rc-finding--confirm {
  border-left-color: var(--amber-500);
}

.rc-finding--blocked[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--danger);
}

.rc-finding--confirm[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--amber-500);
}

.rc-finding:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.rc-finding__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-900);
  box-shadow: inset 0 0 0 2px var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  flex: none;
}

.rc-finding--blocked .rc-finding__num {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.rc-finding--confirm .rc-finding__num {
  box-shadow: inset 0 0 0 2px var(--amber-500);
}

.rc-finding__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rc-finding__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rc-finding__band {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-900);
}

.rc-finding__where {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
}

.rc-finding__message {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-900);
  text-wrap: pretty;
}

/* The remediation is the largest text in the row: the operator acts on
   that, not on the numbers. */
.rc-finding__remediation {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  text-wrap: pretty;
}

.rc-finding__read {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

/* Drawn as an act, not a checkbox — and only ever on the amber band. */
.rc-confirm {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 2px;
  padding: 14px 16px;
  border: 1px solid var(--amber-500);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-900);
  text-wrap: pretty;
}

/* ── The release banner ─────────────────────────────────────── */

.not-released {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 18px var(--space-6);
  background: var(--surface-sunken);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-md);
}

.not-released__body {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.not-released__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-900);
}

.not-released__text {
  font-size: var(--text-md);
  color: var(--ink-700);
  text-wrap: pretty;
}

/* ============================================================
   Operator app screens (operator-app.html)
   ============================================================ */

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.device-grid > * {
  min-width: 0;
}

.device {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.device__caption {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.device__no {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--blue-600);
  flex: none;
}

.device__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.device__note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-600);
  text-wrap: pretty;
}

.device__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* The phone screens are portrait, so they need a tighter cap than the iPad
   ones. The capture step is landscape and takes a row of its own. */
.device-grid--phone .device__screen {
  max-width: 400px;
}

.device--wide {
  grid-column: 1 / -1;
}

.device-grid--phone .device--wide .device__screen {
  max-width: 920px;
}

/* ---------- The product mark ----------
   The mark carries two colours. Its ring and curve follow CSS `color`, so they
   can be set per context, and its focus point follows --mark-focus. The brand
   table admits exactly two colourways: on a light ground the line is blue-500
   with a cyan-600 point, on a dark ground blue-300 with a cyan-500 point. */
:root {
  --mark-focus: var(--cyan-600);
}

.strip--inverse,
.inverse,
.closing-band {
  --mark-focus: var(--cyan-500);
}

/* ---------- Paper to digital ----------
   The migration stages are wide application screens, so each one takes a
   full row of its own rather than sitting in a two-up grid. */
.stage__screen {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* The four supporting stages sit in a thumbnail grid instead, each one a link
   to the full-size render for anyone who wants to read the screen itself. */
.stage-thumb {
  margin: 0;
  min-width: 0;
}
.stage-thumb figcaption {
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--ink-600);
  text-wrap: pretty;
}

/* ---------- View toggle: a no-JS two-state switch ----------
   Built on a hidden radio pair so a page can offer "before" and "after"
   states — or setup vs. everyday use — without a script. The radios must
   stay the first children so the `~` sibling selector can reach the tabs
   and panels that follow them. */
.view-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.view-toggle__tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.view-toggle__tabs label {
  padding: 11px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-500);
  background: var(--white);
  cursor: pointer;
  white-space: nowrap;
}

.view-toggle__panel {
  display: none;
}

#view-a:checked ~ .view-toggle__tabs label[for="view-a"],
#view-b:checked ~ .view-toggle__tabs label[for="view-b"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}

#view-a:checked ~ .view-toggle__panel--a,
#view-b:checked ~ .view-toggle__panel--b {
  display: block;
}

/* ---------- Icon teaser: a compact link card for a benefit trio ---------- */
.teaser {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--ink-900);
}

.teaser:hover {
  border-color: var(--border-strong);
  text-decoration: none;
  color: var(--ink-900);
}

.teaser__shot {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-canvas);
}

.teaser__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--blue-600);
}

.teaser__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
}

.teaser__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-600);
}

.teaser__link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blue-600);
}


/* ============================================================
   The hub page's design, applied to every detail page
   (2026-10-09). The header and footer come from chrome.css; the
   rules below give each page a dark intro band like the hub's hero
   and bring headings, eyebrows and buttons in line with it.
   ============================================================ */

body {
  background: var(--white);
}

html {
  scroll-padding-top: 88px;
}

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

/* The intro band: back link, eyebrow, status, title and lede on the dark
   dot grid. */
.page-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(20px, 2.5vw, 32px) clamp(20px, 5vw, 80px) clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}

.page-hero .page-intro {
  max-width: 880px;
  gap: 20px;
}

.back-link {
  align-self: flex-start;
  padding: 10px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cyan-700);
}

.on-dark .back-link {
  color: var(--cyan-500);
}

.back-link:hover {
  text-decoration: underline;
}

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--cyan-700);
}

.on-dark .eyebrow {
  color: var(--cyan-500);
}

.page-title,
.hero__h1 {
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.on-dark .page-title,
.on-dark .hero__h1 {
  color: var(--white);
}

.on-dark .page-lede,
.on-dark .hero__sub {
  color: var(--text-soft-dark);
}

.on-dark .page-lede a {
  color: var(--cyan-500);
}

.strip__h2,
.section__title {
  font-weight: 700;
}

.strip__h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Status flag: the pill and the meaning of the status. */
.status-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.status-flag__text {
  font-size: 15px;
  color: var(--text-muted-light);
}

.on-dark .status-flag__text {
  color: var(--text-soft-dark);
}

.status-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--amber-300);
}

/* Notes and cards inside the dark band keep their light ground. */
.page-hero .note,
.page-hero .card {
  color: var(--text-body);
}

/* MAKE's hero, the former start page. */
.hero.dot-grid {
  border-bottom: 0;
  background-color: var(--ink-900);
  background-image: radial-gradient(rgba(161, 187, 211, 0.13) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Every content column lines up with the header: 1280px wide, the same
   side gutter. */
.page,
.strip__inner,
.hero__inner {
  max-width: 1280px;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
}

.on-dark .screen-panel {
  background: var(--ink-800);
  border-color: var(--line-dark-zone);
}

/* Buttons take the hub's shape: 52px high, 8px radius; the primary one is
   cyan on dark and ink on light. */
.button {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 8px;
  font-size: 17px;
  background: var(--ink-900);
}

.button:hover {
  background: var(--ink-700);
  text-decoration: none;
}

.on-dark .button {
  background: var(--cyan-500);
  color: var(--ink-900);
}

.on-dark .button:hover {
  background: var(--cyan-400);
  color: var(--ink-900);
}

.on-dark .button--quiet {
  background: transparent;
  border-color: var(--blue-300);
  color: var(--text-on-dark);
}

.on-dark .button--quiet:hover {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.strip--inverse .button,
.button--on-dark {
  background: var(--cyan-500);
  color: var(--ink-900);
}

.hero.dot-grid .hero__inner {
  padding-top: clamp(20px, 2.5vw, 32px);
}

/* ── Imprint ─────────────────────────────────────────────── */

.legal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 48px 72px;
  align-items: start;
}

.legal__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-row);
}

.legal__facts div {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-row);
}

.legal__facts dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted-light);
  padding-top: 3px;
}

.legal__facts dd {
  margin: 0;
  color: var(--ink-900);
}

.legal__facts a {
  color: var(--cyan-700);
}

.legal__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.legal__text p {
  margin: 0 0 16px;
  color: var(--text-muted-light);
}

.legal__h2 {
  font-size: 20px;
  font-weight: 700;
}

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

/* The quiet button keeps its outline look; the general .button rule above
   would otherwise give it the dark fill with dark text. */
.button--quiet {
  background: transparent;
  border-color: var(--border-default);
  color: var(--ink-900);
}

.button--quiet:hover {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  color: var(--ink-900);
}