/* Linekeeper: shared stylesheet for the marketing pages.
   Ledger paper, near-black ink, status colour as the only accent.
   Hairlines and whitespace do the work; no gradients, glow, or shadow stacks. */

:root {
  --paper:#f4f1ea; --card:#fbfaf6; --sunk:#efece2;
  --ink:#1c1a17; --muted:#6b6659; --faint:#8f8a7d;
  --rule:#d9d3c4; --rule-strong:#c3bca9;
  --ok:#1f6f3f; --review:#8a5d0e; --exception:#b3261e;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --measure:64ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#16140e; --card:#1e1b13; --sunk:#12100b;
    --ink:#ebe6d8; --muted:#a49d8b; --faint:#7c7566;
    --rule:#37322a; --rule-strong:#4a4436;
    --ok:#5fbd85; --review:#d9a441; --exception:#e8776b;
  }
}
:root[data-theme="dark"] {
  --paper:#16140e; --card:#1e1b13; --sunk:#12100b;
  --ink:#ebe6d8; --muted:#a49d8b; --faint:#7c7566;
  --rule:#37322a; --rule-strong:#4a4436;
  --ok:#5fbd85; --review:#d9a441; --exception:#e8776b;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

a { color:var(--ink); text-underline-offset:2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid var(--ink); outline-offset:2px; border-radius:2px;
}
.mono { font-family:var(--mono); }
code {
  font-family:var(--mono); background:var(--sunk); padding:1px 5px;
  border-radius:2px; font-size:.88em; word-break:break-word;
}
.skip {
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:20; text-decoration:none;
}
.skip:focus { left:8px; top:8px; }

.wrap { max-width:840px; margin:0 auto; padding:0 24px; }
.wrap-wide { max-width:1040px; margin:0 auto; padding:0 24px; }

/* ---- header / footer ---- */
.site-head {
  border-bottom:1px solid var(--rule-strong); background:var(--card);
  position:sticky; top:0; z-index:10;
}
.site-head .wrap-wide { display:flex; align-items:center; gap:14px; padding-top:13px; padding-bottom:13px; }
.brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); }
.brand svg { display:block; flex:none; }
.brand b { font-weight:600; font-size:16px; letter-spacing:-0.012em; }
.site-head nav { margin-left:auto; display:flex; align-items:center; gap:20px; }
.site-head nav a { color:var(--muted); font-size:13.5px; text-decoration:none; transition:color .12s ease; }
.site-head nav a:hover { color:var(--ink); }
.site-head nav a[aria-current="page"] { color:var(--ink); }

.cta {
  display:inline-block; background:var(--ink); color:var(--paper); text-decoration:none;
  font:500 13.5px/1.25 var(--sans); padding:9px 17px;
  border:1px solid var(--ink); border-radius:3px; transition:opacity .12s ease;
  white-space:nowrap; cursor:pointer;
}
.cta:hover { opacity:.88; }
.cta.ghost { background:transparent; color:var(--ink); }
.cta.ghost:hover { opacity:1; background:var(--sunk); }

.site-foot { background:var(--card); border-top:1px solid var(--rule-strong); }
.site-foot .wrap-wide { padding-top:38px; padding-bottom:44px; }
.foot-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; }
.foot-cols h4 {
  font:500 10.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.1em;
  color:var(--faint); margin:0 0 12px;
}
.foot-cols ul { list-style:none; margin:0; padding:0; }
.foot-cols li { margin:0 0 8px; }
.foot-cols a { color:var(--muted); font-size:13.5px; text-decoration:none; }
.foot-cols a:hover { color:var(--ink); }
.foot-note { margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); color:var(--faint); font-size:12.5px; }

/* ---- sections + type ---- */
section { border-bottom:1px solid var(--rule); }
section:last-of-type { border-bottom:0; }
section .wrap, section .wrap-wide { padding-top:56px; padding-bottom:56px; }
.eyebrow {
  font:500 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.11em;
  color:var(--faint); margin:0 0 20px;
}
h1 { font-size:36px; line-height:1.14; letter-spacing:-0.024em; margin:0 0 20px; font-weight:600; }
h2 { font-size:22px; line-height:1.25; letter-spacing:-0.014em; margin:0 0 14px; font-weight:600; }
h3 { font-size:15px; margin:0 0 5px; font-weight:600; }
p { max-width:var(--measure); }
p + p { margin-top:14px; }
.lede { font-size:17px; color:var(--muted); margin:0 0 30px; max-width:60ch; }
.muted { color:var(--muted); }
.small { font-size:13.5px; }
.hero .wrap { padding-top:76px; padding-bottom:60px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.actions .note { color:var(--faint); font-size:13px; }

/* ---- ledger: the worked-example table ---- */
.ledger {
  border:1px solid var(--rule-strong); border-radius:4px; overflow:hidden;
  background:var(--card); margin-top:8px;
}
.ledger .cap {
  display:flex; justify-content:space-between; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--rule);
  font:500 11px/1.4 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint);
}
.ledger .scroll { overflow-x:auto; }
.ledger table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; }
.ledger th {
  text-align:left; font:500 10px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:10px 14px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.ledger td {
  padding:11px 14px; border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ledger tbody tr:last-child td { border-bottom:0; }
.ledger .from { color:var(--muted); font-family:var(--sans); font-size:13px; }
.ledger .hit { color:var(--review); }

.tag {
  display:inline-block; font:500 10px/1.5 var(--mono); text-transform:uppercase;
  letter-spacing:.03em; padding:2px 7px; border:1px solid currentColor;
  border-radius:2px; white-space:nowrap;
}
.t-ok{color:var(--ok)} .t-review{color:var(--review)} .t-exc{color:var(--exception)}
.flags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px; }

/* ---- product specimen -------------------------------------------------
   The review screen as the app actually draws it: same tokens, same type,
   same status colours. Not a screenshot: it re-renders with the theme, stays
   legible at any width, and cannot drift out of date the way a PNG would. */
.shot {
  border:1px solid var(--rule-strong); border-radius:4px; overflow:hidden;
  background:var(--card); margin-top:24px;
}
.shot-bar {
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--rule); background:var(--sunk);
}
.shot-bar .dot { width:8px; height:8px; border-radius:50%; background:var(--rule-strong); flex:none; }
.shot-bar span { font:500 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.shot-bar .file { margin-left:auto; font-family:var(--mono); text-transform:none; letter-spacing:0; font-size:11.5px; }
.shot-body { padding:16px 14px; }
.shot-fields {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:13px;
  padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--rule);
}
.shot-fields div { min-width:0; }
.shot-fields label {
  display:block; font:500 9.5px/1 var(--sans); text-transform:uppercase;
  letter-spacing:.07em; color:var(--faint); margin-bottom:4px;
}
.shot-fields b { font:400 13px/1.3 var(--mono); overflow-wrap:anywhere; }
.shot .scroll { overflow-x:auto; }
.shot table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; }
.shot th {
  text-align:left; font:500 9.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:10px 8px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.shot td {
  padding:9px 8px; border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums; white-space:nowrap; vertical-align:top;
}
.shot td.txt { font-family:var(--sans); font-size:13px; white-space:normal; }
.shot tbody tr:last-child td { border-bottom:0; }
.shot .exp { display:block; color:var(--faint); font-size:11px; margin-top:2px; }
.shot-foot {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-top:1px solid var(--rule); background:var(--sunk);
}
.shot-btn {
  font:500 12px/1 var(--sans); padding:7px 12px; border-radius:3px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
}
.shot-btn.ghost { background:transparent; color:var(--ink); border-color:var(--rule-strong); }
.shot-foot .note { margin-left:auto; color:var(--faint); font-size:11.5px; }
.shot-caption { margin-top:12px; color:var(--muted); font-size:13px; max-width:66ch; }

@media (max-width:620px) {
  .shot-bar .file { display:none; }
  .shot-foot .note { margin-left:0; flex-basis:100%; }
}

/* ---- numbered steps ---- */
.steps { border-top:1px solid var(--rule); margin-top:24px; }
.steps .s {
  display:grid; grid-template-columns:38px 1fr; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--rule);
}
.steps .s .n { font-family:var(--mono); color:var(--faint); font-size:13px; padding-top:2px; }
.steps .s p { margin:0; color:var(--muted); font-size:14px; max-width:60ch; }

/* ---- definition rows (limits, faq, spec tables) ---- */
.defs { list-style:none; padding:0; margin:20px 0 0; }
.defs li {
  display:grid; grid-template-columns:210px 1fr; gap:22px;
  padding:15px 0; border-bottom:1px solid var(--rule);
}
.defs li:first-child { border-top:1px solid var(--rule); }
.defs b { font-weight:600; font-size:14px; }
.defs span { color:var(--muted); font-size:14px; }

pre {
  background:var(--sunk); border:1px solid var(--rule); border-radius:4px;
  padding:16px; overflow-x:auto; font:12.5px/1.55 var(--mono); margin:22px 0 0;
}
pre code { background:none; padding:0; font-size:inherit; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.two p { font-size:14px; color:var(--muted); margin:0; max-width:none; }

/* ---- pricing ---- */
.price { display:flex; align-items:baseline; gap:12px; margin:4px 0 12px; flex-wrap:wrap; }
.price b { font-family:var(--mono); font-size:27px; font-weight:500; }
.price span { color:var(--faint); font-size:13px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule-strong); border-radius:4px; overflow:hidden; margin-top:8px; }
.plan { padding:22px; border-right:1px solid var(--rule); background:var(--card); }
.plan:last-child { border-right:0; }
.plan h3 { font:500 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin:0 0 12px; }
.plan .amt { font-family:var(--mono); font-size:24px; font-weight:500; }
.plan .per { color:var(--faint); font-size:12.5px; margin-left:4px; }
.plan ul { list-style:none; padding:0; margin:16px 0 0; }
.plan li { font-size:13.5px; color:var(--muted); padding:6px 0; border-top:1px solid var(--rule); }

/* ---- docs / long-form ---- */
.doc-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:start; }
/* grid and flex items default to min-width:auto, which lets a wide <pre> or table
   push the whole track past the viewport. Every item here may shrink instead. */
.doc-layout > *, .steps .s > *, .defs li > *, .two > *, .foot-cols > * { min-width:0; }
.prose pre, .prose .table-scroll, .prose table { max-width:100%; }
.toc { position:sticky; top:88px; }
.toc h4 { font:500 10.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin:0 0 12px; }
.toc ul { list-style:none; padding:0; margin:0; }
.toc li { margin:0 0 9px; }
.toc a { color:var(--muted); font-size:13.5px; text-decoration:none; }
.toc a:hover { color:var(--ink); }
.prose h2 { margin-top:40px; padding-top:24px; border-top:1px solid var(--rule); scroll-margin-top:88px; }
.prose h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.prose h3 { margin-top:26px; font-size:15px; }
.prose p, .prose li { color:var(--muted); }
.prose strong { color:var(--ink); }
.prose ul, .prose ol { max-width:var(--measure); padding-left:20px; }
.prose li { margin:5px 0; }
.prose table { width:100%; border-collapse:collapse; margin-top:18px; font-size:13.5px; }
.prose th {
  text-align:left; font:500 10px/1 var(--sans); text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:9px 10px; border-bottom:1px solid var(--rule-strong);
}
.prose td { padding:9px 10px; border-bottom:1px solid var(--rule); color:var(--muted); vertical-align:top; }
.prose td code { white-space:nowrap; }
.table-scroll { overflow-x:auto; }

/* ---- changelog ---- */
.release { display:grid; grid-template-columns:130px 1fr; gap:28px; padding:26px 0; border-bottom:1px solid var(--rule); }
.release:first-of-type { border-top:1px solid var(--rule); }
.release .when { font-family:var(--mono); font-size:13px; color:var(--faint); padding-top:2px; }
.release h3 { margin:0 0 8px; }
.release ul { margin:0; padding-left:18px; }
.release li { color:var(--muted); font-size:14px; margin:4px 0; }

/* ---- 404 ---- */
.center-page { min-height:60vh; display:flex; align-items:center; }

/* ---- single sign-on buttons ---- */
.sso { display:flex; flex-direction:column; gap:9px; margin:0 0 22px; }
.sso button {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font:500 14px/1.2 var(--sans); color:var(--ink); background:var(--card);
  border:1px solid var(--rule-strong); border-radius:3px; padding:11px 14px; cursor:pointer;
  transition:border-color .12s ease;
}
.sso button:hover:not(:disabled) { border-color:var(--ink); }
.sso button:disabled { opacity:.6; cursor:default; }
.sso svg { flex:none; }
.or {
  display:flex; align-items:center; gap:12px; margin:0 0 20px;
  color:var(--faint); font-size:11px; text-transform:uppercase; letter-spacing:.09em;
}
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--rule); }
.sso-wrap[hidden] { display:none !important; }

/* ---- auth pages ---- */
.auth-page { min-height:calc(100vh - 56px); display:flex; align-items:flex-start; justify-content:center; padding:64px 24px 80px; }
.auth-card { width:100%; max-width:400px; }
.auth-card h1 { font-size:24px; margin-bottom:8px; }
.auth-card > p.muted { font-size:14px; margin:0 0 26px; }
.field { margin:0 0 16px; }
.field label { display:block; font:500 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:7px; }
.field input {
  width:100%; font:14px/1.5 var(--sans); color:var(--ink); background:var(--card);
  border:1px solid var(--rule-strong); border-radius:3px; padding:9px 11px;
}
.field input:focus { outline:2px solid var(--ink); outline-offset:-1px; }
.field .hint { font-size:12.5px; color:var(--faint); margin-top:6px; }
.auth-card button[type="submit"] { width:100%; margin-top:4px; }
.auth-alt { margin-top:22px; padding-top:18px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--muted); }
.auth-alt a { color:var(--ink); }
.notice {
  border:1px solid currentColor; border-radius:3px; padding:10px 12px;
  font-size:13.5px; margin:0 0 18px;
}
.notice.err { color:var(--exception); }
.notice.ok { color:var(--ok); }
.notice[hidden] { display:none !important; }

@media (max-width:820px) {
  .doc-layout { grid-template-columns:1fr; gap:28px; }
  .toc { position:static; border-bottom:1px solid var(--rule); padding-bottom:18px; }
  .toc ul { display:flex; flex-wrap:wrap; gap:14px; }
  .toc li { margin:0; }
  .plans { grid-template-columns:1fr; }
  .plan { border-right:0; border-bottom:1px solid var(--rule); }
  .plan:last-child { border-bottom:0; }
  .foot-cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  h1 { font-size:28px; }
  h2 { font-size:19px; }
  .lede { font-size:16px; }
  section .wrap, section .wrap-wide { padding-top:42px; padding-bottom:42px; }
  .hero .wrap { padding-top:52px; padding-bottom:44px; }
  .two { grid-template-columns:1fr; gap:20px; }
  .defs li { grid-template-columns:1fr; gap:4px; }
  .release { grid-template-columns:1fr; gap:8px; }
  .foot-cols { grid-template-columns:1fr; gap:24px; }
  .site-head nav { gap:14px; }
  .site-head nav a.hide-sm { display:none; }
}