/* ==========================================================================
   VONDANT — style.css
   Token layer, typography, chrome, components.
   Vanilla CSS3. No preprocessor, no framework, no utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — Archivo, self-hosted. v25-latin, static weights 400/500/600/700
   (the only weights style.css actually uses). No third-party font request.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Ground & ink */
  --ground:              #F3F2F2;
  --ground-inverse:      #121110;
  --ground-tint:         #1C1A19;   /* hover surface on the inverse ground */

  --ink:                 #201E1D;
  --ink-muted:           #6B6866;
  --ink-inverse:         #F3F2F2;
  --ink-inverse-muted:   #8A8683;

  --divider:             #201E1D;
  --divider-inverse:     #3A3735;
  --hairline:            #CFCCCA;   /* grid field only — never a section rule */

  /* Accent — Instrument Teal */
  --accent-100:          #E0F2F0;
  --accent-200:          #B8E2DE;
  --accent-300:          #7FCCC5;
  --accent-400:          #3FAFA5;
  --accent-500:          #0C8F87;   /* base */
  --accent-600:          #0A7770;   /* pressed on light ground */
  --accent-700:          #085F59;   /* accent text at body size on light */
  --accent-800:          #064843;
  --accent-900:          #04332F;
  --accent-bright:       #2DD4BF;   /* accent on the inverse ground only */
  --accent-on-bright:    #0B1F1D;   /* ink placed on --accent-bright */

  /* Signal — data semantics only. Never brand, never a CTA. */
  --signal-fail:         #B4402E;
  --signal-fail-bright:  #E5654E;

  /* Type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --type-display:  clamp(2.5rem, 7vw, 6.5rem);
  --type-h1:       clamp(2.25rem, 5.6vw, 5rem);
  --type-h2:       clamp(1.875rem, 3.5vw, 3.25rem);
  --type-h3:       clamp(1.25rem, 2.4vw, 1.875rem);
  --type-lede:     clamp(1.0625rem, 1.6vw, 1.375rem);
  --type-body:     1.0625rem;
  --type-small:    0.9375rem;
  --type-meta:     0.8125rem;
  --type-label:    0.75rem;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --gutter:        clamp(20px, 4vw, 56px);
  --section-pad:   clamp(48px, 6vw, 104px);
  --measure:       1560px;

  /* Structure — zero radius is deliberate and absolute. */
  --radius: 0;
  --rule: 2px;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */

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

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

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--accent-700);
  text-decoration: none;
}
a:hover { color: var(--accent-500); }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}

::selection {
  background: var(--accent-200);
  color: var(--ink);
}

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

/* Screen-reader-only utility — the one non-semantic class in the sheet. */
.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;
}

/* --------------------------------------------------------------------------
   4. TYPE ROLES
   -------------------------------------------------------------------------- */

.display {
  font-size: var(--type-display);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 19ch;
}

.lede {
  font-size: var(--type-lede);
  line-height: 1.45;
  max-width: 62ch;
}

.label {
  font-size: var(--type-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

.meta {
  font-size: var(--type-meta);
  color: var(--ink-muted);
}

.index {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
}

/* Numerals never shift width while counting up. */
.numeric { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
  border-bottom: var(--rule) solid var(--divider);
}

.section--inverse {
  background: var(--ground-inverse);
  color: var(--ink-inverse);
}

.section--inverse .label { color: var(--ink-inverse-muted); }

.rule {
  height: var(--rule);
  background: var(--divider);
  border: 0;
  margin: 0;
}

.section--inverse .rule { background: var(--divider-inverse); }

/* --------------------------------------------------------------------------
   6. GRID FIELD
   Pure CSS. Zero image requests. Three intensities.
   -------------------------------------------------------------------------- */

.gridfield {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gridfield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 149px),
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px  67px),
    repeating-linear-gradient( 0deg, var(--hairline) 0 1px, transparent 1px 103px),
    radial-gradient(circle, var(--ink) 1.4px, transparent 1.5px);
  background-size: auto, auto, auto, 298px 206px;
  opacity: 0.55;
}

/* Structural — denser, behind the SOMAS pillar grid. */
.gridfield--structural::before {
  background-image:
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 83px),
    repeating-linear-gradient( 0deg, var(--hairline) 0 1px, transparent 1px 61px),
    radial-gradient(circle, var(--ink) 1.4px, transparent 1.5px);
  background-size: auto, auto, 332px 244px;
  opacity: 0.85;
}

/* Instrument — on the inverse ground. */
.gridfield--instrument::before {
  background-image:
    repeating-linear-gradient(90deg, var(--divider-inverse) 0 1px, transparent 1px 97px),
    repeating-linear-gradient( 0deg, var(--divider-inverse) 0 1px, transparent 1px 71px),
    radial-gradient(circle, var(--divider-inverse) 1.4px, transparent 1.5px);
  background-size: auto, auto, 388px 284px;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   7. MOTION
   Linear and step timing only. No spring, no ease-out, no overshoot.
   -------------------------------------------------------------------------- */

@keyframes cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Rules draw left-to-right on entry. main.js adds [data-drawn]. */
.rule[data-draw] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms linear;
}
.rule[data-draw][data-drawn] { transform: scaleX(1); }

/* Links underline left-to-right. */
.underline-draw {
  background-image: linear-gradient(var(--accent-500), var(--accent-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 120ms linear;
}
.underline-draw:hover { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rule[data-draw] { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   8. WORDMARK — VONDANT_
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: inherit;
}

.wordmark__cursor {
  display: inline-block;
  width: 0.62em;
  height: 3px;
  background: currentColor;
  animation: cursor-blink 1.06s step-end infinite;
}

.wordmark--large { font-size: 1.5rem; }
.wordmark--large .wordmark__cursor { height: 4px; }

.wordmark--instrument .wordmark__cursor { background: var(--accent-bright); }

/* --------------------------------------------------------------------------
   9. NAVIGATION
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: var(--rule) solid var(--divider);
}

.nav__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}

.nav__link {
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.nav__link:hover { color: var(--accent-600); }

/* Diagnostic chrome: wordmark only, inverse ground, no escape hatches. */
.nav--instrument {
  position: static;
  background: var(--ground-inverse);
  border-bottom-color: var(--divider-inverse);
  color: var(--ink-inverse);
}

.nav--instrument .nav__link { color: var(--ink-inverse); }
.nav--instrument .nav__link:hover { color: var(--accent-bright); }

/* Mobile: the CTA persists, the text links drop. No hamburger. */
@media (max-width: 759px) {
  .nav__links { display: none; }
}

/* --------------------------------------------------------------------------
   10. BUTTONS — labels always flush left.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 22px;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}

.btn--primary {
  background: var(--accent-500);
  color: #fff;
}
.btn--primary:hover  { background: var(--accent-600); }
.btn--primary:active { background: var(--accent-700); }

.btn--secondary {
  border: var(--rule) solid var(--divider);
  background: transparent;
  color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--ground); }

.btn--instrument {
  background: var(--accent-bright);
  color: var(--accent-on-bright);
}
.btn--instrument:hover { background: var(--accent-400); }

.btn--large { padding: 20px 28px; font-size: 0.875rem; }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: #2A2725;
  color: #5C5754;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   11. FORMS — rule-only inputs, no boxes.
   -------------------------------------------------------------------------- */

.field { display: block; }

.field__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--rule) solid var(--divider);
  color: var(--ink);
  font-size: 1.125rem;
  padding: 10px 0;
  outline: none;
}

.section--inverse .field__label { color: var(--ink-inverse-muted); }
.section--inverse .field__input {
  border-bottom-color: var(--divider-inverse);
  color: var(--ink-inverse);
  font-size: 1.25rem;
}

.field__input[aria-invalid="true"] { border-bottom-color: var(--signal-fail); }
.section--inverse .field__input[aria-invalid="true"] { border-bottom-color: var(--signal-fail-bright); }

.field__error {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--signal-fail);
}
.section--inverse .field__error { color: var(--signal-fail-bright); }

/* --------------------------------------------------------------------------
   12. STATUS LINES — the spinner replacement.
   -------------------------------------------------------------------------- */

.status { display: block; }

.status__text {
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.status__rule {
  height: var(--rule);
  background: var(--accent-500);
  margin-top: var(--space-3);
}

.status--fail .status__text { color: var(--signal-fail); letter-spacing: 0.06em; }
.status--fail .status__rule { background: var(--signal-fail); }

.section--inverse .status__text { color: var(--accent-bright); }
.section--inverse .status__rule { background: var(--accent-bright); }
.section--inverse .status--fail .status__text { color: var(--signal-fail-bright); }
.section--inverse .status--fail .status__rule { background: var(--signal-fail-bright); }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  border-top: var(--rule) solid var(--divider);
  background: var(--ground);
}

.footer__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.footer__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__link {
  font-size: var(--type-small);
  color: var(--ink);
}
.footer__link:hover { color: var(--accent-600); }

.footer__tagline { max-width: 34ch; }

/* --------------------------------------------------------------------------
   14. HOMEPAGE
   -------------------------------------------------------------------------- */

.section--hero {
  padding-block: clamp(72px, 11vw, 168px) clamp(48px, 6vw, 88px);
}

.section--hero .label { margin-bottom: clamp(28px, 5vw, 56px); }
.section--hero .rule  { margin-block: clamp(32px, 5vw, 56px) clamp(24px, 3vw, 32px); }

.section__title {
  font-size: var(--type-h2);
  max-width: 22ch;
  margin-block: var(--space-4) clamp(28px, 4vw, 48px);
}

/* The fork ---------------------------------------------------------------- */

.fork {
  max-width: var(--measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  border-bottom: var(--rule) solid var(--divider);
}

.fork__lane {
  padding: clamp(36px, 4.5vw, 64px) var(--gutter);
  border-right: var(--rule) solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.fork__lane:last-child { border-right: 0; }

.fork__lane--primary { background: var(--accent-100); }
.fork__lane--primary .label      { color: var(--accent-700); }
.fork__lane--primary .fork__body { color: var(--accent-800); }

.fork__title {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.fork__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.fork__price-note {
  font-size: var(--type-meta);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.fork__price--scoped {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--accent-700);
}

.fork__body {
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 44ch;
}

/* Push the CTA to the bottom so both lanes align. */
.fork__lane .btn { align-self: flex-start; margin-top: auto; }

/* Administrative drag ----------------------------------------------------- */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: var(--rule) solid var(--divider);
}

.ledger__row {
  border-top: var(--rule) solid var(--divider);
  padding-block: clamp(20px, 2.6vw, 32px);
  display: flex;
  gap: clamp(20px, 4vw, 64px);
  align-items: baseline;
}

.ledger__row .index { font-size: var(--type-meta); min-width: 32px; }

.ledger__item {
  font-size: clamp(1.25rem, 2.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* SOMAS pillars ----------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-top: var(--rule) solid var(--divider);
  border-left: var(--rule) solid var(--divider);
}

.pillar {
  padding: clamp(22px, 2.4vw, 32px);
  border-right: var(--rule) solid var(--divider);
  border-bottom: var(--rule) solid var(--divider);
  background: var(--ground);
}

.pillar--empty { background: transparent; }

.pillar__name {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--accent-700);
  margin-bottom: 10px;
}

.pillar__body {
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* DORA -------------------------------------------------------------------- */

.dora {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dora__row > * {
  border-top: var(--rule) solid var(--divider-inverse);
  padding-block: clamp(20px, 2.4vw, 28px);
  padding-right: clamp(16px, 3vw, 40px);
  vertical-align: baseline;
}

.dora tbody tr:last-child > * { border-bottom: var(--rule) solid var(--divider-inverse); }

.dora__metric {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-inverse);
  width: 26%;
}

.dora__def {
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--ink-inverse-muted);
  width: 42%;
}

.dora__target {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-bright);
  padding-right: 0;
}

.dora__note {
  margin-top: var(--space-5);
  font-size: var(--type-meta);
  color: var(--ink-inverse-muted);
}

.signal { color: var(--signal-fail-bright); font-weight: 600; }

/* Fractional -------------------------------------------------------------- */

.rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-top: var(--rule) solid var(--divider);
  border-bottom: var(--rule) solid var(--divider);
}

.rate {
  padding: clamp(24px, 3vw, 40px);
  border-right: var(--rule) solid var(--divider);
}

.rate:first-child { padding-left: 0; }
.rate:last-child  { border-right: 0; }

.rate__figure {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.rate__unit {
  font-size: 0.4em;
  font-weight: 600;
  color: var(--ink-muted);
}

.rate__note {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--ink-muted);
}

.rates__statement {
  margin-block: clamp(28px, 4vw, 48px) var(--space-6);
  max-width: 56ch;
}

/* Poster statement -------------------------------------------------------- */

.poster {
  background: var(--ground-inverse);
  padding-block: clamp(80px, 12vw, 180px);
}

.poster__text {
  font-size: clamp(2rem, 6vw, 5.25rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--accent-bright);
  max-width: 17ch;
  text-wrap: balance;
}

/* Close ------------------------------------------------------------------- */

.close {
  border-top: var(--rule) solid var(--divider);
  padding-block: clamp(48px, 7vw, 120px);
}

.close__text {
  max-width: 44ch;
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 759px) {
  .dora, .dora thead, .dora tbody, .dora__row, .dora__row > * { display: block; }
  .dora__row { border-top: var(--rule) solid var(--divider-inverse); padding-block: 20px; }
  .dora__row > * { border-top: 0; padding-block: 0 6px; padding-right: 0; width: auto; }
  .rate:first-child { padding-left: clamp(24px, 3vw, 40px); }
  .rate { border-right: 0; border-bottom: var(--rule) solid var(--divider); }
  .rate:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   15. MASTERCLASS
   -------------------------------------------------------------------------- */

.mc-headline {
  font-size: var(--type-h1);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 20ch;
}

.mc-intro { margin-top: clamp(24px, 3vw, 36px); max-width: 64ch; }

.mc-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mc-price__note {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.mc-facts { padding-block: 0; }

.mc-facts__grid {
  max-width: var(--measure);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mc-fact {
  padding: clamp(28px, 3.4vw, 48px) var(--gutter);
  border-right: var(--rule) solid var(--divider);
}
.mc-fact:last-child { border-right: 0; }

.mc-fact__body {
  margin-top: var(--space-3);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 600;
}

.mc-facts__note {
  padding-bottom: clamp(28px, 3vw, 40px);
  max-width: 72ch;
  line-height: 1.6;
}

.modules { list-style: none; margin: 0; padding: 0; border-bottom: var(--rule) solid var(--divider); }

.module {
  border-top: var(--rule) solid var(--divider);
  padding-block: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
}

.module .index { font-size: var(--type-meta); padding-top: 8px; }

.module__title {
  font-size: var(--type-h3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.module__body { max-width: 62ch; font-size: 1rem; color: var(--ink-muted); }

.mc-outcome {
  max-width: 34ch;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--accent-bright);
  margin-top: var(--space-5);
  text-wrap: balance;
}

.mc-close { padding-block: var(--section-pad); }

.mc-close__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 80px);
}

.mc-logistics {
  margin-block: var(--space-5) var(--space-4);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mc-logistics__note { max-width: 44ch; font-size: var(--type-small); color: var(--ink-muted); }

.mc-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 520px;
  margin-top: var(--space-6);
}

.mc-form .btn { align-self: flex-start; }

@media (max-width: 759px) {
  .mc-fact { border-right: 0; border-bottom: var(--rule) solid var(--divider); }
  .mc-fact:last-child { border-bottom: 0; }
  .module { grid-template-columns: 40px 1fr; }
}

/* --------------------------------------------------------------------------
   16. SOMAS DIAGNOSTIC — the instrument surface
   -------------------------------------------------------------------------- */

.body--instrument { background: var(--ground-inverse); }

.dx {
  background: var(--ground-inverse);
  color: var(--ink-inverse);
  min-height: calc(100vh - 68px);
  padding-bottom: clamp(56px, 8vw, 120px);
}

.dx .label { color: var(--ink-inverse-muted); }

/* Ledger ------------------------------------------------------------------ */

.dx-ledger {
  list-style: none;
  margin: 0;
  padding-top: clamp(20px, 3vw, 32px);
}

.dx-ledger:empty { padding-top: 0; }

.dx-ledger__row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 132px 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--divider-inverse);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dx-ledger__row:hover { background: var(--ground-tint); }

.dx-ledger__index { font-size: 0.6875rem; font-weight: 700; color: var(--accent-bright); }

.dx-ledger__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-inverse-muted);
}

.dx-ledger__value { font-size: 0.875rem; color: var(--ink-inverse); }

/* Screens ----------------------------------------------------------------- */

.dx-screen { padding-block: clamp(40px, 6vw, 88px) 0; }

.dx-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.dx-counter {
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-bright);
  white-space: nowrap;
}

.dx-question {
  font-size: clamp(1.75rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-bottom: clamp(36px, 5vw, 64px);
  outline: none;
}

.dx-question--wide { max-width: 22ch; margin-bottom: clamp(32px, 4vw, 52px); }

/* Options ----------------------------------------------------------------- */

.dx-options { display: flex; flex-direction: column; max-width: 1100px; }

.dx-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 72px;
  padding: 20px;
  border: 0;
  border-top: var(--rule) solid var(--divider-inverse);
  background: transparent;
  color: var(--ink-inverse);
  text-align: left;
  cursor: pointer;
}

.dx-options .dx-option:last-child { border-bottom: var(--rule) solid var(--divider-inverse); }

/* Hover tints the whole row and never changes text color — the label stays
   legible wherever the pointer lands. */
.dx-option:hover {
  background: var(--ground-tint);
  box-shadow: inset 3px 0 0 var(--accent-bright);
}

.dx-option[data-selected] { box-shadow: inset 3px 0 0 var(--accent-bright); }

.dx-option--stacked { min-height: 80px; }

.dx-option__label {
  font-size: clamp(1.0625rem, 2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dx-option__name {
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--accent-bright);
}

.dx-option__desc { font-size: var(--type-small); line-height: 1.45; color: var(--ink-inverse-muted); }

/* Screen 04 --------------------------------------------------------------- */

.dx-textarea {
  display: block;
  width: 100%;
  max-width: 1000px;
  background: transparent;
  border: 0;
  border-bottom: var(--rule) solid var(--divider-inverse);
  color: var(--ink-inverse);
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.6;
  padding: 12px 0;
  outline: none;
  resize: vertical;
  margin-bottom: var(--space-6);
}

.dx-textarea::placeholder { color: var(--divider-inverse); }

/* Screen 05 + confirmation record ----------------------------------------- */

.dx-record {
  max-width: 900px;
  border-top: var(--rule) solid var(--divider-inverse);
  border-bottom: var(--rule) solid var(--divider-inverse);
  padding-block: var(--space-2) var(--space-1);
  margin-bottom: clamp(36px, 5vw, 60px);
}

.dx-record__title { padding-block: var(--space-3); }

.dx-record__list { margin: 0; }

.dx-record__row {
  border-top: 1px solid var(--divider-inverse);
  padding-block: var(--space-3);
  display: grid;
  grid-template-columns: 36px 150px 1fr;
  gap: 14px;
  align-items: baseline;
}

.dx-record__index { font-size: 0.6875rem; font-weight: 700; color: var(--accent-bright); }

.dx-record__term {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-inverse-muted);
}

.dx-record__def {
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--ink-inverse);
}

.dx-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 560px;
}

.dx-form .field__label { color: var(--ink-inverse-muted); }
.dx-form .field__input {
  border-bottom-color: var(--divider-inverse);
  color: var(--ink-inverse);
  font-size: 1.25rem;
}
.dx-form .field__input[aria-invalid="true"] { border-bottom-color: var(--signal-fail-bright); }
.dx-form .field__error { color: var(--signal-fail-bright); }
.dx-form .btn { align-self: flex-start; }

.dx .status__text { color: var(--accent-bright); }
.dx .status__rule { background: var(--accent-bright); }
.dx .status--fail .status__text { color: var(--signal-fail-bright); }
.dx .status--fail .status__rule { background: var(--signal-fail-bright); }

.dx-direct { margin-top: var(--space-3); color: var(--ink-inverse-muted); }
.dx-direct a { color: var(--accent-bright); }

/* Confirmation ------------------------------------------------------------ */

.dx-confirm { padding-block: clamp(56px, 9vw, 140px) 0; }

.dx-confirm__title {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin-top: clamp(28px, 4vw, 48px);
}

.dx-confirm__ref {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-bright);
}

.dx-confirm__body {
  margin-top: clamp(16px, 2vw, 24px);
  font-size: var(--type-lede);
  line-height: 1.4;
  color: var(--ink-inverse-muted);
  max-width: 44ch;
}

.dx-confirm .rule { background: var(--divider-inverse); margin-top: clamp(40px, 6vw, 72px); }
.dx-confirm .btn { margin-top: clamp(32px, 4vw, 56px); }

@media (max-width: 759px) {
  .dx-ledger__row { grid-template-columns: 30px 1fr; }
  .dx-ledger__label { display: none; }
  .dx-record__row { grid-template-columns: 30px 1fr; }
  .dx-record__term { grid-column: 2; }
  .dx-record__def { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   17. LEGAL
   -------------------------------------------------------------------------- */

.legal { padding-block: clamp(56px, 8vw, 128px); min-height: 52vh; }

.legal__title { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -0.035em; }

.legal .rule { margin-block: clamp(28px, 4vw, 44px); }

.legal__body { max-width: 60ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-muted); }