/* =============================================================
   LEDGER — the shared design system for every page on this site.

   Paper canvas, monospace display type, hairline rules, one accent,
   and the snip rectangle as the brand device.

   No web fonts are loaded anywhere: system stacks only. That keeps
   the privacy promise literal (no third-party request) and avoids
   the German GDPR problem with embedded Google Fonts.

   Every page links this file and adds only what is unique to it.
   ============================================================= */

:root {
  --paper:   #FBFAF7;
  --paper-2: #F4F1EA;
  --ink:     #16130F;
  --muted:   #6B6459;
  --faint:   #9A9287;
  --rule:    #E3DED3;
  --rule-soft: #EFEBE3;
  --accent:  #17457A;
  --accent-soft: rgba(23, 69, 122, .09);
  --verified: #0E7C5A;
  --verified-soft: rgba(14, 124, 90, .10);
  --error:   #B3261E;
  --error-soft: rgba(179, 38, 30, .08);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --w: 1000px;      /* standard measure */
  --w-narrow: 760px; /* reading measure */
  --pad: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #12110F;
    --paper-2: #1A1815;
    --ink:     #F2EFE9;
    --muted:   #9C948A;
    --faint:   #6B6459;
    --rule:    #2A2723;
    --rule-soft: #211F1C;
    --accent:  #7FB2E8;
    --accent-soft: rgba(127, 178, 232, .12);
    --verified: #4FCFA0;
    --verified-soft: rgba(79, 207, 160, .12);
    --error:   #F2A9A2;
    --error-soft: rgba(242, 169, 162, .10);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

img, video { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- document header (not a nav bar) ---------- */
.top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); padding: 22px 0 15px; border-bottom: 1px solid var(--rule);
}
.top a { color: var(--faint); }
.top a:hover { color: var(--ink); text-decoration: none; }
.top b, .top .mark { color: var(--ink); font-weight: 700; letter-spacing: .1em; }
.top nav a { margin-left: 18px; }
@media (max-width: 620px) { .top .hide-sm { display: none; } }

/* ---------- display type ---------- */
.kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.kicker .sq { width: 7px; height: 7px; background: var(--verified); display: inline-block; flex: none; }

h1.display {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 5.6vw, 60px); line-height: 1.03; letter-spacing: -.035em;
}
h1.display .line { display: block; }

/* the brand device: a snip selection around the word that matters */
.snip { position: relative; display: inline-block; padding: 2px 9px; margin: 0 -3px; }
.snip::before { content: ""; position: absolute; inset: 0; border: 2px dashed var(--accent); }
.snip::after {
  content: ""; position: absolute; right: -5px; bottom: -5px;
  width: 9px; height: 9px; background: var(--accent);
}

.lede { font-size: 17px; color: var(--muted); max-width: 50ch; }
.lede b { color: var(--ink); font-weight: 600; }

/* ---------- section label: a ledger column head ---------- */
.sec-label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); padding: 34px 0 12px; display: flex; justify-content: space-between; gap: 16px;
}

/* ---------- ledger line items ---------- */
.items { border-top: 1px solid var(--rule); }
.item {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 22px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--rule-soft);
  text-decoration: none; color: inherit; transition: background .16s, padding .16s;
}
.item:hover { background: var(--rule-soft); padding-left: 10px; padding-right: 10px; text-decoration: none; }
.item .no { font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .06em; }
.item h2, .item h3 {
  font-family: var(--mono); font-size: clamp(18px, 2.5vw, 24px); font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 5px; color: var(--ink);
}
.item p { color: var(--muted); font-size: 14.5px; max-width: 58ch; }
.item .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; padding-top: 5px;
}
.item .tag.pay { color: var(--accent); font-weight: 700; }
.item .arrow { color: var(--accent); opacity: 0; transition: opacity .16s, transform .16s;
               display: inline-block; margin-left: 6px; }
.item:hover .arrow { opacity: 1; transform: translateX(3px); }
.item .live { font-family: var(--mono); font-size: 13px; color: var(--verified); margin-top: 7px; }
@media (max-width: 640px) {
  .item { grid-template-columns: 28px 1fr; gap: 14px; }
  .item .tag { grid-column: 2; padding-top: 8px; }
}

/* ---------- notes strip ---------- */
.notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.note { padding: 26px 26px 26px 0; border-right: 1px solid var(--rule-soft); }
.note:last-child { border-right: none; }
.note .n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
           color: var(--faint); margin-bottom: 9px; }
.note h3 { font-size: 16px; letter-spacing: -.01em; margin-bottom: 6px; }
.note p { color: var(--muted); font-size: 14px; }
@media (max-width: 640px) {
  .note { border-right: none; border-bottom: 1px solid var(--rule-soft); padding-right: 0; }
  .note:last-child { border-bottom: none; }
}

/* ---------- panels ---------- */
.panel { border: 1px solid var(--rule); background: var(--paper-2); padding: 24px; }
.panel-flat { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 26px 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 14px 26px;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; transition: background .15s, color .15s;
}
.btn:hover { background: transparent; color: var(--ink); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-accent { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.btn-accent:hover { background: transparent; color: var(--accent); }
.btn-sm { padding: 9px 15px; font-size: 11.5px; letter-spacing: .09em; }

/* ---------- inputs ---------- */
.field {
  width: 100%; font-family: var(--mono); font-size: clamp(16px, 2.4vw, 20px); letter-spacing: .06em;
  padding: 16px 15px; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--ink); outline: none;
}
.field::placeholder { color: var(--faint); letter-spacing: .04em; }
.field:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.field.ok { border-color: var(--verified); }
.field.bad { border-color: var(--error); }

.inline-form { display: flex; border: 1.5px solid var(--ink); }
.inline-form input {
  border: none; background: transparent; color: var(--ink); font-family: var(--mono);
  font-size: 13.5px; padding: 12px 14px; outline: none; min-width: 200px; flex: 1;
}
.inline-form input::placeholder { color: var(--faint); }
.inline-form button {
  border: none; background: var(--ink); color: var(--paper); font-family: var(--mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 18px; cursor: pointer;
}

/* ---------- data display ---------- */
.data { font-family: var(--mono); letter-spacing: .06em; word-break: break-all; }
.rows { border: 1px solid var(--rule); }
.rows .r {
  display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px;
  font-size: 14px; border-bottom: 1px solid var(--rule-soft);
}
.rows .r:last-child { border-bottom: none; }
.rows .k { color: var(--faint); font-family: var(--mono); font-size: 12px;
           letter-spacing: .08em; text-transform: uppercase; flex: none; }
.rows .v { font-family: var(--mono); text-align: right; word-break: break-all; }

.verdict { display: flex; align-items: center; gap: 12px;
           font-family: var(--mono); font-size: 18px; font-weight: 700;
           letter-spacing: -.01em; text-transform: uppercase; }
.verdict .mark { width: 28px; height: 28px; display: grid; place-items: center; flex: none;
                 font-size: 16px; border: 1.5px solid currentColor; }
.v-ok { color: var(--verified); }
.v-bad { color: var(--error); }
.reason { color: var(--muted); font-size: 14.5px; margin-top: 12px;
          padding: 11px 14px; background: var(--error-soft); border-left: 3px solid var(--error); }
.reason b { color: var(--error); font-weight: 700; }

/* ---------- prose (articles, legal pages) ---------- */
.prose h2 { font-family: var(--mono); font-size: clamp(19px, 2.6vw, 25px); font-weight: 700;
            text-transform: uppercase; letter-spacing: -.02em; margin: 42px 0 12px;
            padding-top: 18px; border-top: 1px solid var(--rule); }
.prose h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; letter-spacing: -.01em; }
.prose p { margin-bottom: 15px; color: var(--muted); }
.prose p strong, .prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 16px 20px; color: var(--muted); }
.prose li { margin-bottom: 7px; }
.prose code { font-family: var(--mono); font-size: .92em; background: var(--paper-2);
              border: 1px solid var(--rule); padding: 1px 5px; }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.prose caption { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--faint); text-align: left; padding-bottom: 9px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule-soft); }
.prose th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--faint); font-weight: 400;
            border-bottom: 1px solid var(--rule); }
.prose blockquote, .callout {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 14px 16px; margin: 18px 0; color: var(--muted); font-size: 15px;
}
.callout strong { color: var(--ink); }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid var(--rule-soft); padding: 14px 0; }
details summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--mono); color: var(--accent);
                         font-size: 18px; line-height: 1; flex: none; }
details[open] summary::after { content: "\2212"; }
details p { color: var(--muted); font-size: 14.5px; margin-top: 9px; }

/* ---------- maker note ---------- */
.maker p { font-size: 17px; max-width: 58ch; }
.maker p + p { margin-top: 14px; color: var(--muted); font-size: 15.5px; }
.sig { font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
       text-transform: uppercase; color: var(--faint); margin-top: 22px; }

/* ---------- signup strip ---------- */
.signup { padding: 42px 0; display: flex; flex-wrap: wrap; gap: 18px;
          align-items: center; justify-content: space-between;
          border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.signup h3 { font-family: var(--mono); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.signup p { color: var(--muted); font-size: 14px; margin-top: 5px; }

/* ---------- closing slogan + footer ---------- */
.slogan { font-family: var(--mono); font-weight: 700; text-transform: uppercase;
          font-size: clamp(19px, 4.2vw, 42px); letter-spacing: -.03em; line-height: 1.06;
          padding: 60px 0 22px; }
.site-foot {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); border-top: 1px solid var(--rule); padding: 18px 0 56px;
  display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between;
}
.site-foot a { color: var(--muted); margin-right: 14px; }
.site-foot a:hover { color: var(--ink); text-decoration: none; }
.site-foot .tools-strip { display: block; margin-top: 8px; }

/* ---------- utilities ---------- */
.rule { border: 0; border-top: 1px solid var(--rule); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.center { text-align: center; }
.sr-only { position: absolute; left: -9999px; }
.stack-lg > * + * { margin-top: 52px; }

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