:root {
  --paper: var(--vmc-canvas);
  --paper-2: var(--vmc-surface-subtle);
  --ink: var(--vmc-ink);
  --ink-2: var(--vmc-muted);
  --ink-3: var(--vmc-muted);
  --hairline: var(--vmc-line);
  --accent: var(--vmc-primary);
  --accent-tint: var(--vmc-primary-soft);
  --t1: var(--vmc-danger);
  --t1-tint: var(--vmc-danger-soft);
  --t2: var(--vmc-muted);
  --t2-tint: var(--vmc-surface-subtle);
  --serif: var(--vmc-font-display);
  --sans: var(--vmc-font-ui);
  --mono: var(--vmc-font-mono);
  --max: 1120px;
}

html {
  scroll-padding-top: var(--vmc-space-4);
}

body {
  background: linear-gradient(145deg, var(--vmc-primary-soft), transparent 32rem), var(--vmc-canvas);
}

a:not(.btn):not(.btn-ghost) {
  display: inline-flex;
  min-width: var(--vmc-target);
  min-height: var(--vmc-target);
  align-items: center;
  justify-content: center;
}

.wrap {
  padding-inline: clamp(20px, 5vw, 48px);
}

.concept {
  min-height: var(--vmc-target);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--vmc-sample-line);
  color: var(--vmc-sample-ink);
  background: var(--vmc-sample-surface);
}

.concept b {
  color: var(--vmc-sample-ink);
}

.nav-in {
  min-height: 72px;
  height: auto;
}

.wordmark,
.nav-links a,
.btn,
.btn-ghost,
details summary,
.go {
  min-height: var(--vmc-target);
}

.wordmark,
.nav-links a,
.go {
  display: inline-flex;
  align-items: center;
}

.nav-links {
  gap: var(--vmc-space-3);
}

.nav-links a {
  padding-inline: var(--vmc-space-2);
}

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vmc-radius-sm);
  transition: background var(--vmc-motion-fast) var(--vmc-ease), border-color var(--vmc-motion-fast) var(--vmc-ease);
}

.btn:hover,
.btn:focus-visible {
  background: var(--vmc-primary-hover);
}

.btn-ghost {
  border-color: var(--vmc-line-strong);
  background: var(--vmc-surface);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--vmc-focus);
  outline-offset: 3px;
}

h1 {
  max-width: 16ch;
  font-size: clamp(2.6rem, 7vw, 4.25rem);
}

h2 {
  font-size: clamp(2rem, 5vw, 2.7rem);
}

.hero,
.page-hero {
  padding-block: clamp(64px, 9vw, 104px);
}

.hero-grid {
  gap: clamp(36px, 7vw, 72px);
}

.artifact,
.card,
.report-action,
details,
.placeholder {
  border-color: var(--vmc-line);
  border-radius: var(--vmc-radius-md);
  background: var(--vmc-surface);
  box-shadow: var(--vmc-shadow-panel);
}

.artifact {
  border-top: .4rem solid var(--vmc-accent);
}

.artifact .kicker,
.chip,
.eyebrow,
.sec-eyebrow,
.report-action-kicker,
.report-action-time,
.tag,
.time,
.n {
  font-family: var(--vmc-font-mono);
}

.stamp {
  border-color: var(--vmc-primary);
  color: var(--vmc-primary);
  background: var(--vmc-surface);
}

.receiptline {
  margin-inline: -26px;
  margin-bottom: -20px;
  padding: var(--vmc-space-4) 26px;
  border-radius: 0 0 calc(var(--vmc-radius-md) - 1px) calc(var(--vmc-radius-md) - 1px);
  color: var(--vmc-receipt-muted);
  background: var(--vmc-receipt);
}

.strip,
.strip-note,
.tile {
  background: var(--vmc-surface);
}

.steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vmc-space-4);
  border-top: 0;
}

.step {
  min-height: 13rem;
  padding: var(--vmc-space-6);
  border: 1px solid var(--vmc-line);
  border-top: .35rem solid var(--vmc-primary);
  border-radius: var(--vmc-radius-md);
  background: var(--vmc-surface);
}

.cards,
.duo {
  gap: var(--vmc-space-5);
}

.card {
  min-height: 15rem;
  padding: var(--vmc-space-6);
}

.report-action {
  border-left: .4rem solid var(--vmc-primary);
  background: var(--vmc-primary-soft);
}

.report-checklist li {
  min-height: var(--vmc-target);
}

details summary {
  display: flex;
  align-items: center;
}

.candor {
  border-block: 1px solid var(--vmc-line);
  color: var(--vmc-ink);
  background: var(--vmc-surface-subtle);
}

.candor h2,
.candor .sec-eyebrow,
.candor h5,
.candor li,
.candor .how {
  color: inherit;
}

.candor li {
  border-color: var(--vmc-line);
}

@media (max-width: 920px) {
  .steps,
  .cards,
  .duo,
  .candor-grid {
    grid-template-columns: 1fr;
  }

  .nav-links .btn {
    display: inline-flex;
  }
}

@media (max-width: 560px) {
  .wrap {
    padding-inline: 20px;
  }

  .cta-row,
  .report-action-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .btn,
  .btn-ghost {
    width: 100%;
  }

  .artifact {
    padding: var(--vmc-space-5);
  }

  .receiptline {
    margin-inline: calc(-1 * var(--vmc-space-5));
    margin-bottom: calc(-1 * var(--vmc-space-5));
    padding-inline: var(--vmc-space-5);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}