/* Self-hosted fonts: no request to any third party (IBM Plex, SIL Open Font License) */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* Fidutrail — ledger paper, ink, carbon copy.
   Depth: borders only. Spacing: 4px grid. Type: IBM Plex, 1.2 ratio. */

:root {
  /* surfaces: ledger paper */
  --paper: #f6f4ee;
  --paper-raised: #fbfaf7;
  --paper-inset: #efece4;
  --greenbar: #eef2e9;
  /* ink */
  --ink: #1b2230;
  --ink-2: #4b5262;
  --ink-3: #757b8a;
  --ink-4: #a6aab4;
  /* rules */
  --rule: rgba(27, 34, 48, 0.09);
  --rule-strong: rgba(27, 34, 48, 0.16);
  --rule-ink: rgba(27, 34, 48, 0.55);
  /* the one accent: carbon-copy blue */
  --acc-l: #2b4c9b; --acc-l-press: #223d7d; --acc-d: #8fa6e0; --acc-d-press: #a9bbe8;   /* default accent: carbon blue */
  --carbon: var(--acc-l);
  --carbon-press: var(--acc-l-press);
  --carbon-wash: color-mix(in srgb, var(--carbon) 8%, transparent);
  --on-carbon: #fbfaf7;
  /* stamps */
  --stamp-ok: #2e6b4e;
  --stamp-void: #b4372c;
  --stamp-hold: #9a6510;
  --stamp-ok-wash: rgba(46, 107, 78, 0.09);
  --stamp-void-wash: rgba(180, 55, 44, 0.08);
  --stamp-hold-wash: rgba(154, 101, 16, 0.09);
  /* controls */
  --field: #f1eee7;
  --field-border: rgba(27, 34, 48, 0.14);
  --focus: 0 0 0 3px color-mix(in srgb, var(--carbon) 22%, transparent);
  color-scheme: light;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 1.2 scale from 14 */
  --t-cap: 11px; --t-sm: 12px; --t-body: 14px; --t-h4: 17px; --t-h3: 20px; --t-h2: 24px; --t-h1: 34px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dark: follows the system unless the user picked Light or Dark (data-theme on <html>, set by theme.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14161b;
    --paper-raised: #1a1d23;
    --paper-inset: #111317;
    --greenbar: rgba(140, 180, 130, 0.045);
    --ink: #e8e4d9;
    --ink-2: #b9b6ad;
    --ink-3: #8c8a84;
    --ink-4: #5f5e5a;
    --rule: rgba(255, 255, 255, 0.07);
    --rule-strong: rgba(255, 255, 255, 0.12);
    --rule-ink: rgba(232, 228, 217, 0.5);
    --on-carbon: #12151b;
    --stamp-ok: #7fb898;
    --stamp-void: #e0867d;
    --stamp-hold: #d8a85a;
    --stamp-ok-wash: rgba(127, 184, 152, 0.1);
    --stamp-void-wash: rgba(224, 134, 125, 0.1);
    --stamp-hold-wash: rgba(216, 168, 90, 0.1);
    --field: #111317;
    --field-border: rgba(255, 255, 255, 0.1);
    --carbon: var(--acc-d);
    --carbon-press: var(--acc-d-press);
    --carbon-wash: color-mix(in srgb, var(--carbon) 10%, transparent);
    --focus: 0 0 0 3px color-mix(in srgb, var(--carbon) 28%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #14161b;
    --paper-raised: #1a1d23;
    --paper-inset: #111317;
    --greenbar: rgba(140, 180, 130, 0.045);
    --ink: #e8e4d9;
    --ink-2: #b9b6ad;
    --ink-3: #8c8a84;
    --ink-4: #5f5e5a;
    --rule: rgba(255, 255, 255, 0.07);
    --rule-strong: rgba(255, 255, 255, 0.12);
    --rule-ink: rgba(232, 228, 217, 0.5);
    --on-carbon: #12151b;
    --stamp-ok: #7fb898;
    --stamp-void: #e0867d;
    --stamp-hold: #d8a85a;
    --stamp-ok-wash: rgba(127, 184, 152, 0.1);
    --stamp-void-wash: rgba(224, 134, 125, 0.1);
    --stamp-hold-wash: rgba(216, 168, 90, 0.1);
    --field: #111317;
    --field-border: rgba(255, 255, 255, 0.1);
    --carbon: var(--acc-d);
    --carbon-press: var(--acc-d-press);
    --carbon-wash: color-mix(in srgb, var(--carbon) 10%, transparent);
    --focus: 0 0 0 3px color-mix(in srgb, var(--carbon) 28%, transparent);
    color-scheme: dark;
}

/* Accent colour schemes (data-accent on <html>): light and dark shade of each */
:root[data-accent="teal"]     { --acc-l: #0e6b6b; --acc-l-press: #0a5555; --acc-d: #62c4bd; --acc-d-press: #86d6d0; }
:root[data-accent="violet"]   { --acc-l: #5a3ea8; --acc-l-press: #48318a; --acc-d: #b49ef2; --acc-d-press: #c9b8f7; }
:root[data-accent="rose"]     { --acc-l: #a6325c; --acc-l-press: #88284b; --acc-d: #ee90b3; --acc-d-press: #f4aec8; }
:root[data-accent="graphite"] { --acc-l: #39404d; --acc-l-press: #2a303a; --acc-d: #c4c9d3; --acc-d-press: #dadde4; }

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--sans);
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--carbon); text-underline-offset: 2px; }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------- controls */
label.field { display: block; }
.field > span.lbl { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field > span.lbl em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], input[type=url], select, textarea {
  width: 100%; height: 36px; padding: 0 12px;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  font: 400 var(--t-body)/1 var(--sans);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
textarea { height: auto; min-height: 64px; padding: 8px 12px; line-height: 1.5; font-family: var(--mono); font-size: 13px; resize: vertical; }
input.mono { font-family: var(--mono); font-size: 13px; }
input:hover, select:hover, textarea:hover { border-color: var(--rule-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--carbon); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink);
  font: 500 var(--t-body)/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { border-color: var(--rule-ink); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--carbon); border-color: var(--carbon); color: var(--on-carbon); }
.btn.primary:hover { background: var(--carbon-press); border-color: var(--carbon-press); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--paper-inset); color: var(--ink); }
.btn.danger { color: var(--stamp-void); }
.btn.danger:hover { border-color: var(--stamp-void); }
.btn.sm { height: 30px; padding: 0 10px; font-size: var(--t-sm); }
.btn.lg { height: 44px; padding: 0 18px; font-size: 15px; }
.btn.block { width: 100%; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--carbon); flex: none; }
.check b { display: block; font-weight: 500; }
.check small { display: block; color: var(--ink-3); font-size: var(--t-sm); margin-top: 2px; }

/* segmented control (record volume) */
.seg { display: inline-flex; border: 1px solid var(--field-border); border-radius: var(--r-sm); background: var(--field); padding: 2px; flex-wrap: wrap; }
.seg button {
  height: 30px; padding: 0 12px; border: 0; border-radius: 3px; background: transparent; color: var(--ink-2);
  font: 500 var(--t-sm)/1 var(--sans); cursor: pointer; font-variant-numeric: tabular-nums;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed=true] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-strong); }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------------------------------------------------------- auth: brand panel + form */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
/* the brand panel is always deep ink, tinted by the chosen colour scheme */
.auth-side {
  --side-ink: #f2efe7; --side-ink-2: rgba(242, 239, 231, .72); --side-ink-3: rgba(242, 239, 231, .5);
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: #0e1118; color: var(--side-ink);
}
.auth-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 420px at 12% 8%, color-mix(in srgb, var(--acc-d) 34%, transparent), transparent 70%),
    radial-gradient(520px 520px at 95% 100%, color-mix(in srgb, var(--acc-l) 45%, transparent), transparent 70%),
    linear-gradient(transparent 0 calc(100% - 1px), rgba(255,255,255,.035) calc(100% - 1px)) 0 0 / 100% 28px; }
.auth-glow::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 28px 100%;
  mask-image: radial-gradient(circle at 40% 45%, #000, transparent 75%); }
.auth-side .wordmark { color: var(--side-ink); font-size: 18px; }
.auth-side .wordmark .wm-accent { color: var(--acc-d); }
.auth-side .mark .m-tile { fill: #f2efe7; }
.auth-side .mark .m-trail, .auth-side .mark .m-check { stroke: #0e1118; }
.auth-side .mark .m-check { fill: #0e1118; }
.auth-side .mark .m-origin { fill: #f2efe7; stroke: #0e1118; }
.auth-side .mark .m-grid { stroke: #0e1118; }
.auth-side .mark .m-verified { fill: var(--acc-l); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--side-ink-2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: #7fd3a4; box-shadow: 0 0 0 3px rgba(127,211,164,.2); animation: pulse 2s ease-in-out infinite; }
.pitch h2 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; margin-top: 18px; color: var(--side-ink); text-wrap: balance; }
.pitch p { color: var(--side-ink-2); margin-top: 16px; max-width: 46ch; font-size: 15px; line-height: 1.6; }
.hero-stack { position: relative; margin-top: 36px; max-width: 560px; }
.hero-stack .slot { margin: 0; max-width: 340px; position: relative; z-index: 1; }
.hero-stack .slip { box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.mini-card { position: absolute; left: 332px; top: 84px; width: 230px; padding: 12px 14px; border-radius: 10px; z-index: 2;
  background: rgba(22, 26, 36, .78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); font-size: 11.5px; color: var(--side-ink-2);
  animation: float-in .8s var(--ease) 1.6s both; }
.mc-head { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink-3); margin-bottom: 8px; }
.mc-head b { color: var(--side-ink); }
.mc-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); }
.mc-row em { margin-left: auto; font: 500 10.5px var(--mono); font-style: normal; color: #7fd3a4; }
.mc-row .dot { width: 6px; height: 6px; border-radius: 50%; background: #7fd3a4; flex: none; }
@keyframes float-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.trust-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--side-ink-2); }
.trust-row li { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { color: #7fd3a4; }

.auth-main { position: relative; padding: 32px 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-top { position: absolute; top: 20px; left: 24px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3) !important; text-decoration: none; padding: 6px 8px; border-radius: var(--r-sm); }
.back-link:hover { color: var(--ink) !important; background: var(--paper-inset); }
.auth-brand-m { display: none; }
.auth-card { width: 100%; max-width: 420px; animation: card-in .5s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 28px; background: var(--paper-inset); border: 1px solid var(--rule); border-radius: 10px; }
.auth-tabs a { text-align: center; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); text-decoration: none; transition: background .15s, color .15s; }
.auth-tabs a:hover { color: var(--ink); }
.auth-tabs a[aria-current=page] { background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--rule); }
.count-pill { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--carbon); color: #fff; font: 600 11px var(--mono); margin-left: 4px; vertical-align: 1px; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.req-card { padding: 18px; display: grid; gap: 12px; align-content: start; }
.req-who { display: grid; gap: 2px; }
.req-who b { font-size: 15px; }
.req-who span, .req-who a { font-size: 13px; color: var(--ink-2); }
.req-who .req-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.req-facts { display: flex; gap: 22px; margin: 0; }
.req-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.req-facts dd { margin: 2px 0 0; font-size: 13px; }
.req-msg { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); background: var(--paper-inset); border-radius: 8px; padding: 10px 12px; }
.req-acts { display: flex; gap: 8px; }
.req-done .req-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--carbon) 13%, transparent); color: var(--carbon); margin-bottom: 14px; }
.req-done .req-ic svg { width: 22px; height: 22px; }
.req-steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; counter-reset: rq; }
.req-steps li { counter-increment: rq; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
.req-steps li::before { content: counter(rq); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); border: 1px solid var(--rule-strong); color: var(--ink-2); }
.req-steps b { font-size: 14px; }
.req-steps span { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.req-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-card h1 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
.auth-card .lede { color: var(--ink-3); margin: 8px 0 26px; font-size: 14.5px; }
.auth-card form { display: grid; gap: 16px; }
.auth-card textarea[name=message] { font-family: inherit; font-size: 14.5px; border-radius: 8px; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=tel], .auth-card input[type=password], .auth-card select { height: 44px; border-radius: 8px; font-size: 14.5px; }
.auth-card .btn.lg { height: 46px; border-radius: 8px; font-weight: 600; margin-top: 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 8px 20px -10px color-mix(in srgb, var(--carbon) 70%, transparent); }
.grid2.tight { gap: 12px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-3); border-radius: 6px; cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--paper-inset); }
.pw-eye.on { color: var(--carbon); }
.pw-eye:focus-visible { outline: none; box-shadow: var(--focus); }
.auth-switch { margin-top: 20px; font-size: var(--t-sm); color: var(--ink-3); }
.auth-switch button { background: none; border: 0; padding: 0; color: var(--carbon); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pitch-foot { font-size: var(--t-sm); color: var(--ink-3); }
.form-error { color: var(--stamp-void); font-size: var(--t-sm); min-height: 18px; }
.form-error:empty { min-height: 0; margin: -8px 0; }
@media (max-width: 1240px) { .auth-side { padding: 36px 40px; } .mini-card { display: none; } }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-main { padding: 84px 16px 32px; justify-content: flex-start; }
  .auth-top { left: 12px; right: 12px; top: 14px; }
  .back-link { display: none; }
  .auth-brand-m { display: block; }
}
@media (max-width: 480px) { .grid2.tight { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .auth-card, .mini-card, .pill i { animation: none; } }

/* ---------------------------------------------------------- wordmark: the trail "F" */
.wordmark { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.02em; font-size: 16.5px; color: var(--ink); text-decoration: none; }
.wordmark .mark { width: 30px; height: 30px; flex: none; display: block; }
.wordmark .mark svg { display: block; overflow: visible; }
.wm-accent { color: var(--carbon); }
.mark .m-tile { fill: var(--ink); }
.mark .m-grid { stroke: var(--paper); stroke-opacity: .07; stroke-width: 1; fill: none; }
.mark .m-trail { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.mark .m-origin { fill: var(--ink); stroke: var(--paper); stroke-width: 1.8; }
.mark .m-check { fill: var(--paper); }
.mark .m-verified { fill: var(--acc-d); }
.mark .m-ring { fill: none; stroke: var(--acc-d); stroke-width: 1.4; opacity: 0; transform-origin: 22.2px 8.5px; }
/* in dark mode the tile turns light, so the verified node takes the deeper shade */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark .m-verified { fill: var(--acc-l); } :root:not([data-theme="light"]) .mark .m-ring { stroke: var(--acc-l); } }
:root[data-theme="dark"] .mark .m-verified { fill: var(--acc-l); }
:root[data-theme="dark"] .mark .m-ring { stroke: var(--acc-l); }
.wordmark:hover .m-trail { animation: trail-draw .9s var(--ease) both; }
.wordmark:hover .m-ring { animation: node-pulse 1.1s ease-out .55s both; }
@keyframes trail-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes node-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
@media (prefers-reduced-motion: reduce) { .wordmark:hover .m-trail, .wordmark:hover .m-ring { animation: none; } }
.wordmark:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* ---------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { border-right: 1px solid var(--rule); padding: 16px 12px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; }
.side .wordmark { padding: 4px 8px; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 34px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 500;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.nav a:hover { background: var(--paper-inset); color: var(--ink); }
.nav a[aria-current=page] { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.nav a:focus-visible { outline: none; box-shadow: var(--focus); }
.nav .count { font: 500 var(--t-cap)/1 var(--mono); color: var(--ink-3); }
.nav .live { width: 6px; height: 6px; border-radius: 50%; background: var(--carbon); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.nav-label { font: 500 var(--t-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 0 10px; margin-bottom: 6px; }

.allowance { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--rule); }
.allowance .row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); }
.allowance .plan { font-weight: 600; }
.allowance .figure { font: 500 var(--t-sm)/1 var(--mono); color: var(--ink-2); }
.allowance .bar { height: 3px; background: var(--rule-strong); border-radius: 2px; margin: 10px 0 8px; overflow: hidden; }
.allowance .bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 2px; }
.allowance .bar.warn i { background: var(--stamp-hold); }
.allowance .note { font-size: var(--t-cap); color: var(--ink-3); }
.me { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 0 10px; }
.me .who { min-width: 0; }
.me .who b { display: block; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who small { display: block; color: var(--ink-3); font-size: var(--t-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar { display: none; }
.main { min-width: 0; padding: 28px 36px 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { font-size: var(--t-h2); letter-spacing: -0.015em; }
.page-head p { color: var(--ink-3); margin-top: 4px; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: 260px; background: var(--paper); transform: translateX(-100%); transition: transform 220ms var(--ease); }
  .shell.nav-open .side { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 12, 16, 0.35); }
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 20; }
  .main { padding: 20px 16px 48px; }
  .page-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------- panels */
.panel { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.panel-pad { padding: 20px; }
.section + .section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.section h3 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.section > p.sub { color: var(--ink-3); font-size: var(--t-sm); margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stack { display: grid; gap: 14px; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- new extract */
.extract { display: grid; grid-template-columns: 196px minmax(0, 1fr) 340px; gap: 0; align-items: start; }
.index { padding-top: 4px; }
.index .group { font: 500 var(--t-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin: 16px 0 6px 12px; }
.index .group:first-child { margin-top: 0; }
.index button {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid transparent; border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md);
  background: transparent; color: var(--ink-2); font: 500 var(--t-body)/1.3 var(--sans); cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.index button small { display: block; font: 400 var(--t-cap)/1.3 var(--mono); color: var(--ink-4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index button:hover { color: var(--ink); background: var(--paper-inset); }
.index button:focus-visible { outline: none; box-shadow: var(--focus); }
/* the selected tab joins the form, like a binder index tab */
.index button[aria-pressed=true] { background: var(--paper-raised); border-color: var(--rule); color: var(--ink); z-index: 1; margin-right: -1px; }
.index button[aria-pressed=true] small { color: var(--ink-3); }
.extract .form { border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); min-height: 520px; }
.extract .slip-col { padding-left: 20px; position: sticky; top: 24px; }
details.adv summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.adv summary::before { content: "+"; font-family: var(--mono); color: var(--ink-3); }
details.adv[open] summary::before { content: "–"; }
details.adv > div { margin-top: 12px; }
@media (max-width: 1180px) {
  .extract { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .index { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .index .group { display: none; }
  .index button { flex: none; width: auto; border: 1px solid var(--rule); border-radius: var(--r-md); }
  .index button small { display: none; }
  .index button[aria-pressed=true] { margin: 0; border-color: var(--ink-2); }
  .extract .form { border-radius: var(--r-lg); min-height: 0; }
  .extract .slip-col { padding-left: 0; position: static; }
}

/* ---------------------------------------------------------- the request slip (signature) */
.slip {
  position: relative; background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 2px 2px var(--r-md) var(--r-md); padding: 22px 20px 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
/* perforated tear-off edge with punched holes */
.slip::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 8px; height: 0;
  border-top: 1.5px dashed var(--rule-strong);
}
.slip::after {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle at 6px 6px, var(--paper) 4.5px, transparent 5px) 0 0 / 22px 12px repeat-x;
}
.slip .slip-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.slip .verb { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-all; }
.slip .verb b { color: var(--carbon); font-weight: 600; margin-right: 8px; }
.slip .host { color: var(--ink-3); font-size: 11.5px; word-break: break-all; margin-top: 2px; }
.slip dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
.slip dt { color: var(--ink-3); }
.slip dd { margin: 0; color: var(--ink); word-break: break-word; }
.slip .rule { border-top: 1px solid var(--rule); margin: 14px 0; }
.slip .rule.double { border-top: 3px double var(--rule-strong); }
.slip .total { display: flex; justify-content: space-between; align-items: baseline; }
.slip .total .fig { font-size: var(--t-h3); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.slip .go { margin-top: 16px; font-family: var(--sans); }
.slip .fine { font-family: var(--sans); color: var(--ink-3); font-size: var(--t-cap); margin-top: 10px; text-align: center; }

/* rubber stamp */
.stamp {
  position: absolute; right: 16px; top: 52px; transform: rotate(-8deg);
  border: 2px solid currentColor; border-radius: 4px; padding: 4px 10px 3px;
  font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  opacity: .82; mix-blend-mode: multiply; pointer-events: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { mix-blend-mode: normal; } }
:root[data-theme="dark"] .stamp { mix-blend-mode: normal; }
.stamp::after { content: ""; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 2px; opacity: .55; }
.stamp.ok { color: var(--stamp-ok); }
.stamp.void { color: var(--stamp-void); }
.stamp.hold { color: var(--stamp-hold); }
.stamp.run { color: var(--carbon); }
/* the stamp lands: lifted and tilted, a firm press, then ink settles */
.stamp.enter { animation: stamp-in 520ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes stamp-in {
  0%   { opacity: 0;   transform: rotate(-16deg) scale(1.9); }
  55%  { opacity: .95; transform: rotate(-7deg) scale(0.94); }
  75%  { opacity: .9;  transform: rotate(-8.5deg) scale(1.02); }
  100% { opacity: .82; transform: rotate(-8deg) scale(1); }
}
/* the slip takes the impact */
.slip.jolt { animation: jolt 520ms ease-out both; }
@keyframes jolt { 0%, 50% { transform: none; } 58% { transform: translateY(2px); } 72% { transform: translateY(-0.5px); } 100% { transform: none; } }

/* sign-in: the slip prints out of a slot, the count runs, the stamp lands */
.slot { margin-top: 36px; max-width: 360px; }
.slot.play .slip { animation: feed 900ms cubic-bezier(0.3, 0.7, 0.2, 1) 150ms both, jolt 520ms ease-out 1350ms both; }
@keyframes feed { from { clip-path: inset(0 0 100% 0); transform: translateY(-18px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.slot.play .stamp { animation: stamp-in 520ms cubic-bezier(0.2, 0.9, 0.25, 1) 1350ms both; }

/* the phase being worked on shows motion while the run is live */
.phase { position: relative; transition: border-color 300ms var(--ease); }
.phase.live::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; overflow: hidden;
  background: linear-gradient(90deg, transparent 0, var(--carbon-wash) 20%, color-mix(in srgb, var(--carbon) 55%, transparent) 50%, var(--carbon-wash) 80%, transparent 100%) no-repeat;
  background-size: 40% 100%; animation: sweep 1.3s ease-in-out infinite;
}
@keyframes sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* tally: one tick per page fetched */
.tally { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 10px; max-height: 66px; overflow: hidden; }
.tally i { display: block; width: 2px; height: 12px; background: var(--ink-2); border-radius: 1px; }
.tally i:nth-child(5n) { transform: rotate(-58deg) translate(6px, 2px); width: 2px; height: 16px; margin-left: -8px; margin-right: 4px; background: var(--ink-3); }

/* phases */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; font-family: var(--sans); }
.phase { border-top: 2px solid var(--rule-strong); padding-top: 6px; font-size: var(--t-cap); color: var(--ink-3); }
.phase b { display: block; font-weight: 500; font-size: var(--t-sm); color: var(--ink-2); }
.phase.on { border-color: var(--carbon); }
.phase.on b { color: var(--ink); }
.phase.done { border-color: var(--stamp-ok); }
.phase.skip { opacity: .5; }

/* ---------------------------------------------------------- exports ledger */
.ledger-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1180px) { .ledger-wrap { grid-template-columns: minmax(0, 1fr); } }
.ledger { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ledger th {
  text-align: left; font: 500 var(--t-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: 12px 14px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
}
.ledger td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger tbody tr:nth-child(even) td { background: var(--greenbar); }
.ledger tbody tr { cursor: pointer; }
.ledger tbody tr:hover td { background: var(--carbon-wash); }
.ledger tbody tr[aria-selected=true] td { background: var(--carbon-wash); }
.ledger tbody tr[aria-selected=true] td:first-child { box-shadow: inset 3px 0 0 var(--carbon); }
.ledger tbody tr:focus-visible { outline: none; }
.ledger tbody tr:focus-visible td { background: var(--carbon-wash); }
.ledger .doc b { font-weight: 500; display: block; }
.ledger .doc small { color: var(--ink-3); font: 400 var(--t-cap)/1.4 var(--mono); display: block; overflow-wrap: anywhere; }
.ledger td.doc { min-width: 150px; }
@media (max-width: 640px) { .ledger .c-saved { display: none; } .ledger td.doc { min-width: 120px; } }
.ledger .r { text-align: right; }
.ledger td.num { font-family: var(--mono); font-size: 12.5px; }
.ledger-scroll { overflow-x: auto; }
.ledger-wrap .panel { overflow: hidden; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 3px;
  font: 500 var(--t-cap)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.badge.ok { color: var(--stamp-ok); background: var(--stamp-ok-wash); }
.badge.void { color: var(--stamp-void); background: var(--stamp-void-wash); }
.badge.hold { color: var(--stamp-hold); background: var(--stamp-hold-wash); }
.badge.run { color: var(--carbon); background: var(--carbon-wash); }
.badge.run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }

.detail .slip { margin-bottom: 12px; }
.detail .actions { margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { flex: 1 1 auto; }
.log { margin-top: 14px; }
.log summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); font-weight: 500; }
.log pre { margin: 10px 0 0; max-height: 220px; overflow: auto; padding: 12px; background: var(--paper-inset); border-radius: var(--r-sm); font: 400 11.5px/1.55 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.notice, .info { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); font: 400 13px/1.5 var(--sans); }
.notice.void { background: var(--stamp-void-wash); color: var(--stamp-void); }
.notice.hold, .info { background: var(--stamp-hold-wash); color: var(--stamp-hold); }
.notice.ok { background: var(--stamp-ok-wash); color: var(--stamp-ok); }
.notice .mono, .info .mono { font-size: 12px; overflow-wrap: anywhere; }
.saveto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.saveto-path { font-size: 13px; }
.saveto-path .mono { font-size: 13px; color: var(--ink); }
.slip .slip-note { font-family: var(--sans); font-size: var(--t-sm); margin-top: 10px; }
.slip .slip-note.warn { color: var(--stamp-hold); }

/* ---------------------------------------------------------- empty states */
.empty { text-align: center; padding: 56px 24px; }
.empty .blank { width: 120px; margin: 0 auto 18px; border: 1px solid var(--rule-strong); border-radius: 3px; padding: 14px 12px; display: grid; gap: 7px; background: var(--paper-raised); }
.empty .blank i { display: block; height: 3px; border-radius: 2px; background: var(--rule-strong); }
.empty .blank i:nth-child(2) { width: 70%; }
.empty .blank i:nth-child(3) { width: 85%; }
.empty h3 { font-size: var(--t-h4); }
.empty p { color: var(--ink-3); margin: 6px auto 18px; max-width: 40ch; }

/* ---------------------------------------------------------- connections */
.conn-list { display: grid; gap: 12px; }
.conn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 18px 20px; }
.conn h3 { font-size: 15px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.conn .host { font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); margin-top: 4px; word-break: break-all; }
.conn .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--t-sm); color: var(--ink-3); }
.conn .scopes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.chip { font: 400 var(--t-cap)/1 var(--mono); padding: 4px 6px; border-radius: 3px; background: var(--paper-inset); color: var(--ink-2); }
.conn .side-actions { display: flex; gap: 6px; align-items: flex-start; }
@media (max-width: 640px) { .conn { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- account / admin */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.meter-big .fig { font: 600 var(--t-h1)/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.meter-big .of { color: var(--ink-3); font-size: 15px; }
.meter-big .bar { height: 6px; background: var(--rule-strong); border-radius: 3px; margin: 16px 0 10px; overflow: hidden; }
.meter-big .bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; }
.plans { display: grid; gap: 8px; margin-top: 18px; }
.plan-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-md); font-size: 13px; }
.plan-row.current { border-color: var(--ink-2); }
.plan-row b { font-weight: 600; }
.plan-row span { color: var(--ink-3); font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------- dialog & toasts */
dialog {
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg); padding: 0; width: min(520px, calc(100vw - 32px));
  background: var(--paper-raised); color: var(--ink);
}
dialog::backdrop { background: rgba(14, 16, 22, 0.42); }
dialog[open] { animation: dlg-in 200ms var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.dlg-head { padding: 18px 20px 0; }
.dlg-head h2 { font-size: var(--t-h4); }
.dlg-head p { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.dlg-body { padding: 18px 20px; display: grid; gap: 14px; }
.dlg-foot { padding: 14px 20px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 8px; }
.secret-box { font: 500 15px/1 var(--mono); padding: 14px; background: var(--paper-inset); border-radius: var(--r-sm); text-align: center; letter-spacing: .04em; user-select: all; }

#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; }
.toast {
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-md);
  font-size: 13px; max-width: 360px; animation: toast-in 220ms var(--ease);
}
.toast.bad { background: var(--stamp-void); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.loading { padding: 64px; text-align: center; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------- plans, locks, trust */
.chip.lock { background: var(--stamp-hold-wash); color: var(--stamp-hold); font-family: var(--sans); font-weight: 500; letter-spacing: .02em; vertical-align: 1px; margin-left: 4px; }
.plan-banner { margin: -8px 0 20px; padding: 12px 16px; border: 1px solid var(--rule-strong); border-left: 3px solid var(--stamp-hold); border-radius: var(--r-md); background: var(--paper-raised); font-size: 13px; color: var(--ink-2); }
.plan-banner b { color: var(--ink); font-weight: 600; }
.section.locked h3, .section.locked .sub { color: var(--ink-3); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain[disabled] { opacity: .55; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.index button:disabled { opacity: .55; cursor: not-allowed; }
.index button .chip.lock { font-size: 10px; padding: 2px 5px; }
.trust { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-3); font-size: var(--t-cap); line-height: 1.45; border: 1px dashed var(--rule-strong); }
.trust:hover { color: var(--ink-2); border-color: var(--rule-ink); }
.shield { flex: none; width: 12px; height: 14px; margin-top: 1px; background: var(--stamp-ok); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); }
.trust-list li::before { content: ""; display: inline-block; width: 10px; height: 11px; margin-right: 8px; vertical-align: -1px; background: var(--stamp-ok); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); }
.consent { font-size: var(--t-sm); color: var(--ink-2); }
.auth-foot { margin-top: 14px; font-size: var(--t-sm); }
.auth-foot a, .auth-switch a { color: var(--carbon); font-weight: 500; }
.eyebrow { display: block; font: 500 var(--t-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* administrator sign-in: darker, plainer, clearly not the customer door */
.admin-auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--ink); }
.admin-card { background: var(--paper-raised); border-radius: var(--r-lg); padding: 28px; max-width: 400px; }
.admin-card .wordmark { margin-bottom: 20px; }
.admin-card .eyebrow { margin-bottom: 8px; color: var(--stamp-hold); }
.admin-card h1 { font-size: var(--t-h3); }
.admin-card form { display: grid; gap: 14px; margin-top: 18px; }
.qr { width: 196px; margin: 16px auto 8px; padding: 8px; background: #fff; border-radius: var(--r-sm); }
.qr svg { display: block; width: 100%; height: auto; }
.code-input { font-size: 20px !important; letter-spacing: .3em; text-align: center; height: 48px !important; }

/* privacy & security */
.doc-page { display: grid; gap: 16px; max-width: 860px; }
.doc-page h2 { font-size: var(--t-h4); margin-bottom: 10px; }
.doc-page h3 { font-size: 13px; margin: 18px 0 6px; }
.doc-page p { font-size: 13.5px; color: var(--ink-2); }
.commit { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.commit b { color: var(--ink); font-weight: 600; }
.fine-print { margin-top: 14px; font-size: var(--t-sm) !important; color: var(--ink-3) !important; }
.facts { width: 100%; border-collapse: collapse; font-size: 13px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); }
.facts th { font-weight: 600; white-space: nowrap; }
.facts td:last-child { color: var(--ink-3); }
@media (max-width: 640px) { .facts tr { display: grid; } .facts th, .facts td { border: 0; padding: 2px 0; } .facts tr { border-bottom: 1px solid var(--rule); padding: 8px 0; } }
.public { min-height: 100vh; }
.public-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--rule); }
.public-body { max-width: 900px; margin: 0 auto; padding: 28px 16px 64px; }
.public-body h1 { font-size: var(--t-h2); margin-bottom: 18px; }

/* account */
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-head h2 { font-size: var(--t-h3); margin-top: 6px; }
.card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 16px 0 0; font-size: 13px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.features { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 13px; }
.features li span { display: inline-block; width: 18px; font-family: var(--mono); }
.features li.on span { color: var(--stamp-ok); }
.features li.off { color: var(--ink-3); }

/* admin */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: -8px 0 20px; overflow-x: auto; }
.tabs a { padding: 10px 12px; color: var(--ink-3); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current=page] { color: var(--ink); border-color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tile { padding: 16px; }
.tile b { display: block; font-size: var(--t-h2); font-weight: 600; margin: 10px 0 4px; letter-spacing: -0.01em; }
.tile small { color: var(--ink-3); font-size: var(--t-sm); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn { margin-left: 4px; }
.ledger .c, .feature-table .c { text-align: center; }
.feature-table input { width: 16px; height: 16px; accent-color: var(--carbon); }
.badge:not(.ok):not(.void):not(.hold):not(.run) { color: var(--ink-2); background: var(--paper-inset); }

/* record ID filter */
.idrange { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .idrow { grid-template-columns: 1fr; } }
.notice .fine { display: block; margin-top: 6px; font-size: var(--t-sm); color: var(--ink-2); }

/* network share help */
.nethelp { margin-top: 12px; font-size: var(--t-sm); color: var(--ink-2); }
.nethelp summary { cursor: pointer; color: var(--carbon); font-weight: 500; }
.nethelp p { margin: 8px 0 0; }
.nethelp .os { font-weight: 600; color: var(--ink); margin-top: 10px; }
.nethelp ol { margin: 6px 0 0; padding-left: 20px; }
.nethelp li { margin: 4px 0; }

/* ---------------------------------------------------------- motion that answers navigation and actions */
.view-in { animation: view-in 220ms var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }
.nav a[aria-current=page] { transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.ledger tbody tr { transition: background-color 140ms var(--ease); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details:not(.adv) > summary::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: 1px;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 160ms var(--ease); }
details:not(.adv)[open] > summary::before { transform: rotate(90deg); }
details:not(.log)[open] > summary ~ * { animation: reveal 200ms var(--ease) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(-3px); } }
.toast { transform-origin: bottom right; }
.toast.leave { animation: toast-out 180ms var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
.allowance .bar i, .meter-big .bar i { transition: width 500ms var(--ease); }

/* ---------------------------------------------------------- pay-per-use credit */
.cost { margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.cost-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cost dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: var(--t-sm); }
.cost dt { color: var(--ink-3); }
.cost dd { margin: 0; text-align: right; font-family: var(--mono); }
.cost dd small { display: block; font-family: var(--sans); color: var(--ink-3); font-size: 11.5px; }
.cost-total { margin-top: 10px; }
.cost-count { font-size: var(--t-sm); color: var(--ink-2); margin: 10px 0 0; }
.cost-credit { font-size: var(--t-sm); color: var(--ink-2); margin: 8px 0 0; }
.cost-credit.warn { color: var(--stamp-void); }
.linkish { background: none; border: 0; padding: 0; color: var(--carbon); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkish:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 2px; }
.credit-row { margin-top: 8px; font-size: var(--t-sm); }
.charged { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule); font-size: var(--t-sm); }
.charged small { flex-basis: 100%; color: var(--ink-3); }
.ledger-wrap { margin-top: 12px; max-height: 320px; overflow: auto; }
.ledger.compact td, .ledger.compact th { padding: 6px 8px; font-size: 12.5px; }
.ledger td.num, .ledger th.num { text-align: right; white-space: nowrap; }
.ledger td.pos { color: var(--stamp-ok); }
.billing-set { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 12px; }

.ledger-wrap .ledger { width: 100%; }
.ledger.compact td:first-child, .ledger.compact th:first-child { white-space: nowrap; }

/* ZIP export progress */
.zip-progress .bar { height: 6px; background: var(--rule-strong); border-radius: 3px; overflow: hidden; margin: 6px 0 8px; }
.zip-progress .bar i { display: block; height: 100%; background: var(--carbon); border-radius: 3px; transition: width .2s ease; }
.zip-progress .zip-msg { font-size: var(--t-sm); margin: 0; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ public home page */
.home { background: var(--paper); }
.home .public-head { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); }
.home-nav { display: flex; align-items: center; gap: 18px; }
.home-nav > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.home-nav > a:not(.btn):hover { color: var(--ink); }
.home-main { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; }
.home-hero { padding: 64px 0 28px; max-width: 820px; }
.home-hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -0.025em; margin: 12px 0 14px; }
.home-hero .lede { font-size: 17px; color: var(--ink-2); line-height: 1.55; max-width: 680px; }
.why-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 6px; max-width: 980px; }
.why-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-inset); }
.why-card h3 { font-size: 15px; margin: 0 0 4px; }
.why-card p { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.why-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--carbon) 12%, transparent); color: var(--carbon); }
.why-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .why-cards { grid-template-columns: 1fr; } }
.erp-pick { margin-top: 30px; }
.pick-label { display: block; font: 500 var(--t-cap)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.erp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.erp-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-2); text-decoration: none; font-size: 13px; background: var(--paper-raised); transition: border-color .15s, background .15s, color .15s; }
.erp-chip small { font-size: 10.5px; color: var(--ink-4); letter-spacing: .02em; }
.erp-chip:hover { border-color: var(--rule-ink); color: var(--ink); }
.erp-chip.live { font-weight: 500; color: var(--ink); }
.erp-chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--stamp-ok); align-self: center; }
.erp-chip.on { background: var(--carbon); border-color: var(--carbon); color: var(--on-carbon); }
.erp-chip.on small { color: color-mix(in srgb, var(--on-carbon) 70%, transparent); }
.erp-chip.on.live::before { background: var(--on-carbon); }
.erp-chip:focus-visible { outline: none; box-shadow: var(--focus); }

.home-section { padding: 28px 0; scroll-margin-top: 70px; }
.erp-panel { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 32px; }
.erp-panel h2 { font-size: var(--t-h2); letter-spacing: -0.015em; margin: 12px 0 8px; line-height: 1.2; }
.erp-panel .lede { color: var(--ink-2); font-size: 15px; max-width: 720px; line-height: 1.55; }
.erp-panel.planned { max-width: 680px; }
.erp-panel.planned p { color: var(--ink-2); line-height: 1.6; }
.erp-cta { margin-top: 18px; }
.erp-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin-top: 28px; align-items: start; }
.feat-list { display: grid; gap: 18px; }
.feat { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; animation: feat-in .5s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.feat-mark { width: 10px; height: 10px; margin-top: 6px; border: 2px solid var(--carbon); border-radius: 2px; transform: rotate(45deg); }
.feat h3 { font-size: 15px; font-weight: 600; margin: 0 0 3px; }
.feat p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
@keyframes feat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .feat { animation: none; } }

.erp-side { position: sticky; top: 76px; }
.home-sample { border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.hs-tabs { display: flex; border-bottom: 1px solid var(--rule); background: var(--paper-inset); }
.hs-tabs button { flex: 1; border: 0; background: none; padding: 10px 8px; font: 500 12.5px var(--sans); color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; }
.hs-tabs button.on { color: var(--ink); border-bottom-color: var(--carbon); background: var(--paper); }
.hs-tabs button:focus-visible { outline: none; box-shadow: inset var(--focus); }
.hs-pane { padding: 14px; overflow-x: auto; }
.hs-cap { margin: 0 0 10px; font: 500 12px var(--mono); color: var(--ink-2); }
.hs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hs-table th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.hs-table td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.hs-table tr:nth-child(even) td { background: var(--greenbar); }
.hs-table td.mono { font-size: 11px; white-space: nowrap; color: var(--ink-2); }
.hs-ok { color: var(--stamp-ok); font: 500 11px var(--mono); }
.hs-tree { margin: 0; font: 11.5px/1.65 var(--mono); color: var(--ink); white-space: pre; }
.hs-tree span { color: var(--ink-4); }

.docs-title { font-size: 15px; font-weight: 600; margin: 34px 0 12px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.doc-card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px 14px; background: var(--paper); }
.doc-card b { display: block; font-size: 13.5px; font-weight: 600; }
.doc-card small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.erp-panel .fine { margin-top: 18px; color: var(--ink-3); font-size: var(--t-sm); }

.sec-title { font-size: var(--t-h2); letter-spacing: -0.015em; margin: 0 0 18px; }
.how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: how; }
.how li { counter-increment: how; border-top: 3px double var(--rule-strong); padding-top: 14px; }
.how li::before { content: counter(how, decimal-leading-zero); font: 500 12px var(--mono); color: var(--carbon); display: block; margin-bottom: 8px; }
.how b { display: block; font-size: 15px; margin-bottom: 4px; }
.how span { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.trust-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; padding: 0; margin: 28px 0; }
.trust-band div { background: var(--paper-inset); padding: 18px; }
.trust-band b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.trust-band span { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.sec-home { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 44px; }
.sec-intro { max-width: 640px; margin-bottom: 22px; }
.sec-intro p:last-child { color: var(--ink-2); margin: 0; line-height: 1.6; }
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sec-card { background: var(--paper-inset); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 6px; align-content: start; }
.sec-card b { font-size: 14.5px; }
.sec-card > span:last-child { color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.sec-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--carbon) 13%, transparent); color: var(--carbon); margin-bottom: 4px; }
.sec-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sec-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: 14px; }
.sec-status div { background: var(--paper); padding: 16px 18px; }
.sec-status b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.sec-status span { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.sec-more { margin: 18px 0 0; }
.home-end { text-align: center; padding: 40px 0 24px; }
.home-end h2 { font-size: var(--t-h2); letter-spacing: -0.015em; margin: 0 0 8px; }
.home-end p { color: var(--ink-2); margin: 0 0 18px; }
.home-foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 22px 16px 32px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 12.5px; }
.home-foot a { color: var(--ink-3); }

@media (max-width: 900px) {
  .erp-grid { grid-template-columns: minmax(0, 1fr); }
  .erp-side { position: static; }
  .how, .trust-band, .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-status { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sec-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-card { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
  .sec-card .sec-ic { grid-row: span 2; margin: 0; }
  .home-main { padding: 0 16px 32px; }
  .home .public-head { padding: 12px 16px; }
  .home-nav > a:not(.btn) { display: none; }
  .home-nav { gap: 8px; }
  .home-hero { padding-top: 36px; }
  .erp-panel { padding: 20px 16px; }
  .how, .trust-band { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ two-step verification */
.mfa-steps { margin: 4px 0 10px; padding-left: 20px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 14px; margin: 6px 0 10px;
  background: var(--paper-inset); border: 1px dashed var(--rule-strong); border-radius: var(--r-md); }
.backup-codes code { font: 500 14px/1.6 var(--mono); letter-spacing: .06em; color: var(--ink); text-align: center; }
.mfa-tag { display: inline-block; margin-top: 4px; font: 500 10.5px/1 var(--mono); letter-spacing: .03em; padding: 3px 5px; border-radius: 3px; color: var(--stamp-hold); background: var(--stamp-hold-wash); }
.mfa-tag.on { color: var(--stamp-ok); background: var(--stamp-ok-wash); }
.mfa-tag.need { color: var(--stamp-void); background: var(--stamp-void-wash); }
.row-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ERP choice at sign-up, waitlist */
.erp-note { font-size: 12.5px; line-height: 1.5; margin: -4px 0 12px; padding: 0; }
.erp-note.ok, .erp-note.hold { padding: 8px 10px; border-radius: var(--r-sm); }
.erp-note.ok { color: var(--stamp-ok); background: var(--stamp-ok-wash); }
.erp-note.hold { color: var(--stamp-hold); background: var(--stamp-hold-wash); }
.waitlist .badge { align-self: flex-start; }
.how-list { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; display: grid; gap: 8px; }
.field[hidden] { display: none !important; }
.waitlist .badge { width: fit-content; }

/* ------------------------------------------------------------ appearance controls */
.me-actions, .topbar-actions { display: flex; align-items: center; gap: 4px; }
.btn.icon-btn { width: 30px; padding: 0; justify-content: center; display: inline-flex; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r-md); overflow: hidden; background: var(--field); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 16px; font-size: 13px; color: var(--ink-2); border-right: 1px solid var(--rule); transition: background .15s, color .15s; }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--carbon); color: var(--on-carbon); }
.seg input:focus-visible + span { box-shadow: inset var(--focus); }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatches label { display: grid; justify-items: center; gap: 5px; cursor: pointer; position: relative; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches .sw { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--sw-l) 50%, var(--sw-d) 50%);
  box-shadow: 0 0 0 1px var(--rule-strong); transition: box-shadow .15s, transform .15s; }
.swatches label:hover .sw { transform: scale(1.06); }
.swatches input:checked + .sw { box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--ink); }
.swatches input:focus-visible + .sw { box-shadow: 0 0 0 2px var(--paper-raised), 0 0 0 4px var(--carbon), var(--focus); }
.swatches small { font-size: 11px; color: var(--ink-3); }
.swatches input:checked ~ small { color: var(--ink); font-weight: 500; }
body, .panel, .side { transition: background-color .2s, border-color .2s, color .2s; }
@media (prefers-reduced-motion: reduce) { body, .panel, .side { transition: none; } }
.btn.icon-btn svg { flex: none; }

.auth-card .auth-foot { margin-top: 22px; color: var(--ink-4); }
.auth-card .auth-foot a { color: var(--ink-3); font-weight: 400; text-decoration: none; }
.auth-card .auth-foot a:hover { color: var(--ink); text-decoration: underline; }

/* the sign-in panel's logo draws its trail once when the page opens */
.auth-side .wordmark .m-trail { animation: trail-draw 1.3s var(--ease) .25s both; }
.auth-side .wordmark .m-ring { animation: node-pulse 1.2s ease-out 1.3s both; }
@media (prefers-reduced-motion: reduce) { .auth-side .wordmark .m-trail, .auth-side .wordmark .m-ring { animation: none; } }
.audit-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }