/* ==========================================================================
   Noetra
   Palette roles: green means the records agree, wine means they do not.
   ========================================================================== */

:root {
  /* Brand primaries: 5C2033 wine, 2F6B4A green, FBF9F7 off-white, 241D1A near-black.
     Brand secondaries: 3B322E warm dark, 6FA383 soft green, C4AEB4 dusty rose, E9E3DE warm grey.
     Neutrals are mixes of 3B322E and E9E3DE, so the greys carry the brand's warm bias. */
  --ground:       #FBF9F7;
  --raised:       #E9E3DE;
  --ink:          #241D1A;
  --ink-2:        #3B322E;
  --muted:        #6B625D;
  --rule:         #DED6D0;
  --rule-strong:  #C8BEB7;
  --wine:         #5C2033;
  --wine-tint:    #F3E7EA;
  --green:        #2F6B4A;
  --green-tint:   #E7EFE9;

  /* Inverted band. Same values in both themes so a band always reads as a band. */
  --band-ground:  #241D1A;
  --band-raised:  #3B322E;
  --band-ink:     #E9E3DE;
  --band-muted:   #A7A09B;
  --band-rule:    rgba(233, 227, 222, 0.14);
  --band-wine:    #C4AEB4;
  --band-green:   #6FA383;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 1.25 scale off a 17px body */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   1.9rem;
  --t-2xl:  2.4rem;
  --t-3xl:  3.05rem;
  --t-4xl:  3.9rem;

  --measure: 34rem;
  --shell:   72rem;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --band-y:  clamp(4.5rem, 9vw, 7.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #1A1513;
    --raised:      #241D1A;
    --ink:         #E9E3DE;
    --ink-2:       #CFC6C0;
    --muted:       #A7A09B;
    --rule:        #332B27;
    --rule-strong: #453B36;
    --wine:        #C4AEB4;
    --wine-tint:   #2C2226;
    --green:       #6FA383;
    --green-tint:  #1E2A23;

    --band-ground: #0E0B0A;
    --band-raised: #241D1A;
    --band-rule:   rgba(233, 227, 222, 0.12);
  }
}

:root[data-theme="dark"] {
  --ground:      #1A1513;
  --raised:      #241D1A;
  --ink:         #E9E3DE;
  --ink-2:       #CFC6C0;
  --muted:       #A7A09B;
  --rule:        #332B27;
  --rule-strong: #453B36;
  --wine:        #C4AEB4;
  --wine-tint:   #2C2226;
  --green:       #6FA383;
  --green-tint:  #1E2A23;

  --band-ground: #0E0B0A;
  --band-raised: #241D1A;
  --band-rule:   rgba(233, 227, 222, 0.12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.62;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover { color: var(--wine); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--wine); color: var(--ground); }

/* --------------------------------------------------------------------------
   Shell and bands
   -------------------------------------------------------------------------- */

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

.band {
  padding-block: var(--band-y);
  border-top: 1px solid var(--rule);
}

.band--first { border-top: 0; }

.band--inverted {
  background: var(--band-ground);
  color: var(--band-ink);
  border-top-color: transparent;
  --ink: var(--band-ink);
  --ink-2: var(--band-ink);
  --muted: var(--band-muted);
  --rule: var(--band-rule);
  --rule-strong: var(--band-rule);
  --wine: var(--band-wine);
  --green: var(--band-green);
  --raised: var(--band-raised);
  --ground: var(--band-ground);
}

.band__head {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wine);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
  max-width: 5rem;
}

.band__title { font-size: clamp(var(--t-xl), 4.4vw, var(--t-2xl)); }

.lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: var(--measure);
  line-height: 1.58;
}

.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1.1rem; }
.prose p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.masthead[data-stuck="true"] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.wordmark:hover { color: inherit; }

.wordmark__mark { color: var(--wine); }

.wordmark__note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-size: var(--t-sm);
}

.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--wine); }

@media (max-width: 46rem) {
  .nav__link { display: none; }
  .wordmark__note { display: none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.35rem;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid var(--wine);
  border-radius: 2px;
  background: var(--wine);
  color: var(--ground);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  background: transparent;
  color: var(--wine);
  transform: translateY(-1px);
}

.btn--ghost { background: transparent; color: var(--wine); }
.btn--ghost:hover { background: var(--wine); color: var(--ground); }

.btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 8vw, 6.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(3rem, 5vw, 5rem); }
}

.hero__copy { display: flex; flex-direction: column; gap: 1.6rem; }

.hero__title {
  font-size: clamp(var(--t-2xl), 6.2vw, var(--t-4xl));
  letter-spacing: -0.026em;
  line-height: 1.06;
}

.hero__sub {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 32rem;
  line-height: 1.56;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.6rem; }

.hero__aside {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Ledger: the hero reconciliation
   -------------------------------------------------------------------------- */

.ledger {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--raised);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.ledger__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 0.6875rem;
}

.ledger__status { display: inline-flex; align-items: center; gap: 0.45rem; }

.ledger__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.ledger__head,
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 1rem;
}

.ledger__head {
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ledger__row {
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  color: var(--ink-2);
}

.ledger__row:last-of-type { border-bottom: 0; }

.ledger__row > span:not(:first-child) { text-align: right; }

.ledger__account {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger__delta { font-weight: 500; }

.ledger__row[data-state="match"] .ledger__delta { color: var(--green); }

.ledger__row[data-state="break"] {
  background: var(--wine-tint);
  box-shadow: inset 2px 0 0 var(--wine);
}

.ledger__row[data-state="break"] .ledger__delta,
.ledger__row[data-state="break"] .ledger__account { color: var(--wine); }

.ledger__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--ground);
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ledger__total { color: var(--wine); font-size: var(--t-sm); letter-spacing: 0.02em; text-transform: none; }

/* Reveal: rows resolve one by one, breaks arrive last. */
.ledger__row {
  opacity: 0;
  transform: translateY(4px);
  animation: ledger-in 0.5s cubic-bezier(0.22, 0.68, 0.35, 1) forwards;
  animation-delay: calc(var(--i, 0) * 105ms + 250ms);
}

@keyframes ledger-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ledger__row { animation: none; opacity: 1; transform: none; }
  .ledger__pulse { animation: none; }
  * { transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   Break list: what we look for
   -------------------------------------------------------------------------- */

.breaks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .breaks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}

.break {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-block: 1.65rem;
  border-bottom: 1px solid var(--rule);
}

.break__systems {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wine);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.break__vs { color: var(--muted); }

.break__title { font-size: var(--t-md); font-family: var(--font-display); line-height: 1.25; }

.break__text { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.58; }

/* --------------------------------------------------------------------------
   Steps: the engagement. Numbered because the order is real.
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 56rem) {
  .step { grid-template-columns: 3.25rem minmax(0, 15rem) minmax(0, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: start; }
}

.step:last-child { border-bottom: 1px solid var(--rule); }

.step__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--wine);
  padding-top: 0.4rem;
}

.step__title { font-size: var(--t-lg); font-family: var(--font-display); }

.step__body { font-size: var(--t-sm); color: var(--ink-2); grid-column: 2 / -1; margin-top: 0.5rem; }

@media (min-width: 56rem) {
  .step__body { grid-column: 3; margin-top: 0; padding-top: 0.35rem; }
}

.step__meta {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Assurances: data and access
   -------------------------------------------------------------------------- */

.assurances {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}

@media (min-width: 44rem) { .assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .assurances { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.assurance {
  background: var(--band-ground);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.assurance__title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-green);
}

.assurance__text { font-size: var(--t-sm); color: var(--muted); line-height: 1.58; }

/* --------------------------------------------------------------------------
   Founders
   -------------------------------------------------------------------------- */

.founders {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 48rem) { .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.founder { display: flex; flex-direction: column; gap: 1.1rem; }

.founder__portrait {
  width: 100%;
  max-width: 12rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
  background: var(--raised);
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.4s ease;
}

.founder:hover .founder__portrait { filter: grayscale(0.15) contrast(1); }

.founder__name { font-family: var(--font-display); font-size: var(--t-lg); }

.founder__role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wine);
  margin-top: 0.3rem;
}

.founder__bio { font-size: var(--t-sm); color: var(--ink-2); max-width: 26rem; }

.founder__link {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
}

.founder__link:hover { color: var(--wine); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 58rem) {
  .contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.form { display: flex; flex-direction: column; gap: 1.15rem; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }

.field__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input,
.field__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field__textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine) 16%, transparent);
}

.field__input::placeholder,
.field__textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }

.form__note { font-size: var(--t-xs); color: var(--muted); line-height: 1.6; max-width: 30rem; }

.form__status { font-size: var(--t-sm); min-height: 1.4rem; }
.form__status[data-state="ok"] { color: var(--green); }
.form__status[data-state="error"] { color: var(--wine); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__aside { display: flex; flex-direction: column; gap: 1.5rem; }

.contact__direct {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--wine);
  border-radius: 2px;
  background: var(--raised);
}

.contact__direct a { font-family: var(--font-mono); font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: 3rem 3.5rem;
  font-size: var(--t-xs);
  color: var(--muted);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.footer__legal { max-width: 34rem; line-height: 1.7; }

.footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__links a { text-decoration: none; }

.footer__note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--muted);
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

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

.skip {
  position: absolute;
  top: -3rem;
  left: var(--gutter);
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--wine);
  color: var(--ground);
  text-decoration: none;
  border-radius: 0 0 2px 2px;
  transition: top 0.18s ease;
}

.skip:focus { top: 0; color: var(--ground); }

/* --------------------------------------------------------------------------
   Additions
   -------------------------------------------------------------------------- */

figure.ledger { margin: 0; }

.wordmark__logo { border-radius: 6px; flex: none; align-self: center; }

/* Callout: the note about the statistic we refuse to quote. */
.callout {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  max-width: 44rem;
  padding: 1.5rem 1.75rem;
  background: var(--wine-tint);
  border-left: 2px solid var(--wine);
  border-radius: 0 2px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.callout__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine);
}

.callout__text { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

.breaks__note {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--muted);
  max-width: 34rem;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.35rem;
}

.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn[disabled]:hover { background: var(--wine); color: var(--ground); transform: none; }

/* Unresolved facts. Deliberately loud so they cannot ship by accident. */
.todo {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--wine);
  background: var(--wine-tint);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.footer__legal p { margin-bottom: 0.35rem; }
.footer__legal strong { font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------------------------
   Document pages: privacy notice, legal notice
   -------------------------------------------------------------------------- */

.doc { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }

.doc__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 2.25rem;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--rule);
}

.doc__title { font-size: clamp(var(--t-xl), 5vw, var(--t-2xl)); }

.doc__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--muted);
}

.doc__body { max-width: 40rem; display: flex; flex-direction: column; gap: 1.15rem; }

.doc__body h2 {
  font-size: var(--t-lg);
  margin-top: 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.doc__body h3 { font-size: var(--t-md); margin-top: 1.1rem; }

.doc__body p { color: var(--ink-2); }

.doc__body ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.5rem; }
.doc__body li { color: var(--ink-2); }

.doc__body dl { margin: 0; display: grid; gap: 0.7rem 1.25rem; }
@media (min-width: 34rem) { .doc__body dl { grid-template-columns: 11rem minmax(0, 1fr); } }

.doc__body dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.2rem;
}

.doc__body dd { margin: 0; color: var(--ink-2); }

.table-scroll { overflow-x: auto; }

.doc__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.doc__table th,
.doc__table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

.doc__table th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

.notice {
  padding: 1.25rem 1.5rem;
  background: var(--wine-tint);
  border-left: 2px solid var(--wine);
  border-radius: 0 2px 2px 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}

.backlink:hover { color: var(--wine); }

.prose--wide { max-width: 46rem; margin-top: clamp(2.25rem, 4vw, 3rem); }

/* A trailing orphan in the three-column assurance grid spans the full row. */
@media (min-width: 70rem) {
  .assurance:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* Supported systems */
.systems {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.systems__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wine);
}

.systems__list { margin: 0; display: grid; gap: 0.55rem 1.5rem; }

@media (min-width: 40rem) {
  .systems__list { grid-template-columns: 10.5rem minmax(0, 1fr); }
}

.systems__list dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 0.15rem;
}

.systems__list dd { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

.systems__note { font-size: var(--t-sm); color: var(--muted); max-width: 34rem; }

/* The ledger caption carries an "invented data" label that must read as a label. */
.ledger__foot strong { color: var(--wine); font-weight: 500; }

/* Shown while the contact Worker is not deployed. */
.form__pending {
  padding: 1.25rem 1.5rem;
  background: var(--wine-tint);
  border-left: 2px solid var(--wine);
  border-radius: 0 2px 2px 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.6;
}

/* Inline hostnames and header names in the legal documents. */
.doc__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--raised);
  padding: 0.1em 0.35em;
  border-radius: 2px;
  word-break: break-word;
}

.doc__body strong { font-weight: 500; color: var(--ink); }

/* ==========================================================================
   Green, carrying its half of the palette
   Wine marks the break. Green marks what holds. The problem section stays
   wine. Everything describing the work, the terms and the people is green.
   ========================================================================== */

/* Sections about the method rather than the problem. */
.band--method .eyebrow { color: var(--green); }
.band--method .eyebrow::after { background: var(--green); opacity: 0.35; }

/* The engagement is the path that works, so its numbering is green. */
.step__num { color: var(--green); }

/* Matched rows in the hero ledger. Wine already marks the breaks. */
.ledger__row[data-state="match"] .ledger__delta { color: var(--green); font-weight: 500; }
.ledger__agree { color: var(--green); letter-spacing: 0.06em; }

/* Secondary call to action. Wine stays the primary. */
.btn--go {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}

.btn--go:hover { background: var(--green); color: var(--ground); }

/* The callout inherits the band's accent instead of always being wine. */
.band--method .callout { background: var(--green-tint); border-left-color: var(--green); }
.band--method .callout__label { color: var(--green); }

/* --------------------------------------------------------------------------
   Checks: a short list of the kinds of difference, no method detail
   -------------------------------------------------------------------------- */

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}

.checks li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-md);
  font-family: var(--font-display);
  line-height: 1.35;
  color: var(--ink);
}

/* The diamond echoes the two in the mark. */
.checks li::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.1rem;
  background: var(--green);
  transform: rotate(45deg);
}

/* A closing note under a band, narrower than the band itself. */
.band__note {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* Assurance cards may carry no body text at all. Those are the blunt ones, so
   they take the band's own ink rather than the green, and centre in their cell
   instead of leaving a hole under the line. */
.assurance:has(> :only-child) { justify-content: center; }
.assurance:has(> :only-child) .assurance__title { color: var(--band-ink); }