:root {
  --paper: #eef1ec;
  --stock: #f8faf6;
  --stock-2: #e5eae2;
  --ink: #16211f;
  --ink-soft: #4a5a56;
  --rule: #b9c4bd;
  --rule-soft: #d5ddd6;
  --ledger: #0f3b34;
  --ledger-soft: #dceae5;
  --red: #a83a2b;
  --red-soft: #f1ded9;
  --sealed: #8a6b12;
  --sealed-soft: #ede5cd;
  --slate: #5b6b66;
  --shadow: 0 1px 0 rgba(22, 33, 31, 0.05), 0 10px 26px -20px rgba(22, 33, 31, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

/* The ground is a sheet of accounting paper: a faint field of pale green rules, wide enough to
   read under the text without competing with it. */
body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(15, 59, 52, 0.045) 31px 32px),
    var(--paper);
  color: var(--ink);
  font: 400 17px/1.64 var(--sans);
  overflow-wrap: break-word;
}

a { color: var(--ledger); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--ledger); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--stock);
  padding: 10px 14px; z-index: 9;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- masthead */
.top { background: var(--ledger); border-bottom: 3px solid var(--red); }
.bar {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--stock); font: 600 16px/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
}
.brand:hover { color: #fff; }
.brand .mark {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgba(248, 250, 246, 0.5); background: rgba(248, 250, 246, 0.08);
  font: 700 12px/1 var(--mono); letter-spacing: 0.04em;
}
.menu { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.menu a {
  color: #cfe0da; text-decoration: none; font: 500 14px/1 var(--sans);
  padding: 8px 10px; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.menu a:hover { color: #fff; border-bottom-color: var(--sealed); }
.menu a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.btn {
  display: inline-block; padding: 11px 16px; background: var(--sealed); color: #fffaf0;
  border: 1px solid #6f550c; text-decoration: none; font: 600 14px/1 var(--sans);
  letter-spacing: 0.01em; white-space: nowrap;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.btn:hover { background: #a07d17; color: #fff; transform: translateY(-1px); }
.top .btn { margin-left: 4px; }

/* ---------------------------------------------------------------- shell */
.shell { max-width: 1120px; margin: 0 auto; padding: 0 20px 64px; }

.disc {
  margin: 18px 0 0; padding: 13px 16px; background: var(--stock);
  border: 1px solid var(--rule); border-left: 4px solid var(--red);
  font: 400 14px/1.58 var(--sans); color: var(--ink-soft);
}
.disc b { color: var(--ink); }
.disc code {
  font: 400 12.5px/1 var(--mono); background: var(--stock-2); padding: 2px 5px;
  border: 1px solid var(--rule-soft);
}

main { display: block; }

/* ---------------------------------------------------------------- hero */
.page-hero { padding: 34px 0 6px; }
.crumb-line {
  font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate); padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.hero-grid { padding-top: 24px; }
.eyebrow {
  font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); margin-bottom: 12px;
}
h1 {
  margin: 0 0 16px; font: 600 40px/1.12 var(--serif); letter-spacing: -0.015em;
  max-width: 22ch; color: var(--ink);
}
.lede { margin: 0; max-width: 68ch; font-size: 19px; color: var(--ink-soft); }
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 22px 0 4px; }
.ghost {
  display: inline-block; padding: 11px 15px; border: 1px solid var(--rule);
  background: var(--stock); color: var(--ledger); text-decoration: none;
  font: 600 14px/1 var(--sans);
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}
.ghost:hover { border-color: var(--ledger); color: var(--red); }

/* ---------------------------------------------------------------- prose */
h2 {
  margin: 44px 0 12px; font: 600 26px/1.25 var(--serif); letter-spacing: -0.01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
h3 { margin: 30px 0 8px; font: 600 19px/1.3 var(--serif); }
p { margin: 0 0 15px; max-width: 74ch; }
ul, ol { max-width: 74ch; padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 7px; }
strong, b { font-weight: 600; }
code, .fig { font-family: var(--mono); font-size: 0.94em; }

.answer {
  margin: 22px 0 4px; padding: 16px 18px; background: var(--ledger-soft);
  border: 1px solid #bcd2cb; border-top: 3px solid var(--ledger);
  font: 400 17.5px/1.6 var(--sans); color: var(--ink);
}
.answer b {
  display: block; margin-bottom: 7px; font: 600 11px/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ledger);
}
.answer p { max-width: none; }
.answer p:last-child { margin-bottom: 0; }

.note {
  margin: 22px 0; padding: 15px 17px; background: var(--stock); border: 1px dashed var(--rule);
  color: var(--ink-soft);
}
.note-tag {
  display: inline-block; margin-bottom: 8px; font: 600 11px/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red);
}
.note p { max-width: none; margin-bottom: 0; }

/* The worked example. A ruled arithmetic block: the desk's rule is that no number is asserted
   that the reader cannot re-derive, so every figure sits in an aligned column. */
.calc {
  margin: 22px 0; padding: 18px 18px 14px; background: var(--stock);
  border: 1px solid var(--rule); border-top: 3px solid var(--red);
  font: 400 15px/1.95 var(--mono); color: var(--ink);
  white-space: normal;
}
.calc b { color: var(--ledger); }

.ctaband {
  margin: 30px 0; padding: 18px; background: var(--stock-2);
  border: 1px solid var(--rule); display: flex; gap: 18px; align-items: center;
  flex-wrap: wrap;
}
.ctaband p { flex: 1 1 340px; margin: 0; font-size: 15px; color: var(--ink-soft); max-width: none; }

/* ---------------------------------------------------------------- tables */
table {
  width: 100%; border-collapse: collapse; margin: 20px 0 24px;
  background: var(--stock); border: 1px solid var(--rule); font-size: 15.5px;
}
caption {
  caption-side: top; text-align: left; padding: 0 0 9px;
  font: 600 12px/1.45 var(--mono); letter-spacing: 0.04em; color: var(--slate);
}
th, td {
  text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
thead th {
  background: var(--ledger); color: var(--stock); font: 600 12.5px/1.4 var(--sans);
  letter-spacing: 0.05em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--stock-2); }
td code { font-size: 14px; }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-block; padding: 3px 8px; border: 1px solid var(--rule);
  background: var(--stock); font: 600 11.5px/1.5 var(--mono);
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.chip-held { border-color: #9dbfb3; background: var(--ledger-soft); color: var(--ledger); }
.chip-sealed { border-color: #cbb35f; background: var(--sealed-soft); color: #6d5310; }
.chip-debt { border-color: #d8a99f; background: var(--red-soft); color: #8f2f22; }
.chip-none { border-color: var(--rule); background: var(--stock-2); color: var(--slate); }
.chip-stop { border-color: #d8a99f; background: var(--red-soft); color: #8f2f22; }
.chip-warn { border-color: #cbb35f; background: var(--sealed-soft); color: #6d5310; }
.chip-ok { border-color: #9dbfb3; background: var(--ledger-soft); color: var(--ledger); }

/* ---------------------------------------------------------------- pair */
.pair { display: grid; gap: 0; grid-template-columns: 1fr; margin: 20px 0 22px; }
.pair + p { margin-top: -6px; }
.pair-side {
  background: var(--stock); border: 1px solid var(--rule); padding: 16px 17px;
}
.pair-side + .pair-side { border-top: none; }
.pair-head {
  font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 10px;
}
.pair p { max-width: none; margin-bottom: 0; }

/* ---------------------------------------------------------------- steps */
.steps { list-style: none; padding: 0; margin: 20px 0 24px; counter-reset: step; max-width: 78ch; }
.steps li {
  counter-increment: step; position: relative; padding: 13px 16px 13px 54px;
  background: var(--stock); border: 1px solid var(--rule); border-left: 4px solid var(--ledger);
  margin-bottom: 8px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 13px;
  font: 600 13px/1.4 var(--mono); color: var(--red);
}

.stamp {
  display: inline-block; margin: 0 0 14px; padding: 9px 13px; transform: rotate(-1.4deg);
  border: 2px solid var(--red); color: var(--red);
  font: 700 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--red-soft);
}

/* ------------------------------------------------- signature component 1 */
/* The ledger split: the customer's column against the company's own column, with a hard red centre
   rule between them, because the desk's whole subject is that these two must not be the same
   pound. Three custody models, two columns each. */
.ledger-split {
  margin: 24px 0; border: 1px solid var(--rule); background: var(--stock);
  border-top: 4px solid var(--ledger);
}
.ledger-cap {
  padding: 12px 16px; background: var(--ledger); color: var(--stock);
  font: 600 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.ledger-grid {
  display: grid; grid-template-columns: 1fr 0 1fr;
}
.ledger-rule { background: var(--red); width: 3px; }
.ledger-col { padding: 13px 16px 6px; }
.ledger-head {
  font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); padding-bottom: 9px; border-bottom: 1px solid var(--rule);
}
.ledger-row { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.ledger-row:last-child { border-bottom: none; }
.ledger-key {
  display: block; margin-bottom: 5px; font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
}
.ledger-cell { display: block; font-size: 15.5px; line-height: 1.6; }
.ledger-cell .fig { color: var(--ledger); font-weight: 600; }
.ledger-note {
  padding: 13px 16px; border-top: 1px solid var(--rule); background: var(--stock-2);
  font-size: 14.5px; line-height: 1.62; color: var(--ink-soft);
}
.ledger-note p { max-width: none; margin-bottom: 0; }

/* ------------------------------------------------- signature component 2 */
/* The claim queue: what a balance actually joins when an operator fails. Five rungs, each bound to
   a numbered marker repeated in the legend below, so the rung count and the legend count cannot
   drift apart; one rung carries the reader's position. */
.queue { margin: 24px 0; border: 1px solid var(--rule); background: var(--stock); border-top: 4px solid var(--red); }
.queue-cap {
  padding: 12px 16px; background: var(--ink); color: var(--stock);
  font: 600 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-rung {
  display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.queue-rung:last-child { border-bottom: none; }
.queue-rung.is-you { background: var(--sealed-soft); box-shadow: inset 4px 0 0 var(--sealed); }
.queue-num {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--rule); background: var(--stock-2);
  font: 700 12px/1 var(--mono); color: var(--ledger);
}
.queue-rung.is-you .queue-num { border-color: #cbb35f; background: var(--sealed); color: #fffaf0; }
.queue-body { flex: 1 1 auto; }
.queue-body b { display: block; margin-bottom: 3px; font: 600 15.5px/1.4 var(--sans); }
.queue-body span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.queue-you {
  display: inline-block; margin-top: 6px; padding: 3px 8px; background: var(--sealed); color: #fffaf0;
  font: 600 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.queue-legend {
  list-style: none; margin: 0; padding: 14px 16px; border-top: 1px solid var(--rule);
  background: var(--stock-2); counter-reset: q;
}
.queue-legend li {
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 9px; font-size: 14.5px;
  line-height: 1.6; color: var(--ink-soft); max-width: none;
}
.queue-legend li:last-child { margin-bottom: 0; }
.queue-legend .queue-num { width: 22px; height: 22px; font-size: 11px; }

/* ---------------------------------------------------------------- faq */
/* Each question and answer is one ruled entry, so the visible page and the FAQPage structured data
   are the same content rendered once. */
.faq { margin-top: 8px; }
.qa {
  padding: 15px 17px; background: var(--stock); border: 1px solid var(--rule);
  border-left: 4px solid var(--ledger); margin-bottom: 10px;
}
.qa h3 {
  margin: 0 0 7px; font: 600 17.5px/1.35 var(--serif);
  padding-left: 0; border: none;
}
.qa p { margin: 0; max-width: 76ch; font-size: 15.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- myths */
.myth-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 22px 0 26px; }
.myth {
  padding: 15px 17px; background: var(--stock); border: 1px solid var(--rule);
  border-left: 4px solid var(--red);
}
.myth p { max-width: none; margin: 0; font-size: 15.5px; }
.verdict {
  display: inline-block; margin-bottom: 9px; padding: 3px 9px;
  font: 700 11px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.verdict.false { background: var(--red); color: #fff; }
.verdict.partly { background: var(--sealed); color: #fffaf0; }
.verdict.true { background: var(--ledger); color: var(--stock); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ledger); color: #cfe0da; margin-top: 26px; border-top: 3px solid var(--red); }
.foot-grid {
  max-width: 1120px; margin: 0 auto; padding: 30px 20px 12px;
  display: grid; gap: 26px; grid-template-columns: 1fr;
}
.footer .brand { color: #fff; }
.footer strong {
  display: block; margin-bottom: 10px; color: #fff;
  font: 600 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.footer p { font-size: 14px; line-height: 1.65; color: #b6cdc6; max-width: 46ch; }
.footer a { display: block; color: #cfe0da; text-decoration: none; font-size: 14.5px; padding: 4px 0; }
.footer a:hover { color: #fff; text-decoration: underline; }
.fine {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px 30px;
  border-top: 1px solid rgba(248, 250, 246, 0.18); font-size: 12.5px; line-height: 1.7;
  color: #9db8b1;
}
.fine b { color: #cfe0da; }

@media (min-width: 720px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .pair-side + .pair-side { border-top: 1px solid var(--rule); border-left: none; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .myth-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  h1 { font-size: 46px; }
  .ledger-col { padding: 15px 20px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}