/* A ledger and a red pencil. Tokens: ops/.agents/skills/decks/brands/clauseclerk/brand.md.
   Paper ground, ink text, ledger rules. Red is the clerk's pencil: a flag, a note in the clerk's hand, or the one
   primary action. Serif for display, sans for body, mono for every figure and clause reference. */
:root {
  --ground: #F4EFE4; --leaf: #FBF8F1;
  --ink: #1B1A17; --ink-2: #3D3A34; --muted: #6B665C;
  --line: #D9D1BF; --line-2: #C4BBA6;
  --red: #B3261E; --red-deep: #8F1D17; --red-wash: #F6E3DD;
  --r: 2px;
  --serif: "IBM Plex Serif", "Plex Serif Fallback", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Plex Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: 1.25rem; --max: 78rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
/* Six subset files served from this site (SIL OFL, fonts/OFL.txt). No request goes to a font service. */
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-serif-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/plex-serif-500-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-sans-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-sans-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-mono-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-500-normal.woff2") format("woff2"); }
/* Fallbacks sized to Plex so the swap does not move the layout. */
@font-face { font-family: "Plex Serif Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Plex Sans Fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 99%; descent-override: 26%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-2) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink-2); font: 400 1.0625rem/1.55 var(--sans);
  accent-color: var(--red); caret-color: var(--red); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: var(--ground); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
p { margin: 0; }
q { quotes: "\201C" "\201D"; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.nb { white-space: nowrap; }
/* every figure and clause reference */
.n, .ref { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.n { font-size: .94em; }
.ref { font-weight: 500; font-size: .875rem; color: var(--ink); white-space: nowrap; }
.clause > .ref, .ex-clause > .ref { margin-right: .4em; }
/* the clerk's hand */
.hand { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--red); }
.hand .ref, .hand .n { color: inherit; font-style: normal; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--ground); padding: .625rem .875rem; z-index: 20; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r); }
main:focus { outline: none; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid var(--ink); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .5rem; min-height: 3.75rem; }
.wordmark { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none;
  font: 500 1.375rem/1 var(--serif); letter-spacing: -.01em; }
.wordmark i { font-style: italic; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.plain { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .625rem; color: var(--ink-2);
  font-size: .9375rem; text-decoration: none; white-space: nowrap; }
.plain:hover { color: var(--ink); text-decoration: underline; }
.wide-only { display: none; }
/* a narrow or zoomed bar keeps the wordmark and the one action; Sign in stays in the footer */
@media (max-width: 24rem) { .top .plain { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.375rem; border-radius: var(--r);
  border: 1px solid transparent; font: 600 1rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 2.75rem; padding: 0 .875rem; font-size: .9375rem; margin-left: .25rem; }
.btn-red { background: var(--red); color: var(--leaf); }
.btn-red:hover { background: var(--red-deep); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--ground); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--line-2); color: var(--ink-2); border-color: transparent; cursor: not-allowed; }
.btn.sending[disabled] { cursor: progress; }

/* hero: headline and offer above, the sheet below */
h1, h2 { color: var(--ink); font-family: var(--serif); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.hero { padding: 2rem 0 3.5rem; }
.hero-top { display: grid; gap: 1.25rem; }
h1 { font-size: clamp(2.25rem, 1.35rem + 4.3vw, 4.25rem); line-height: 1.04; max-width: 16ch; }
.offer { max-width: 34rem; }
.sub { font-size: 1.125rem; }
.sub + .sub { margin-top: .625rem; }
.sub b { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.375rem; }

/* the sheet: a ruled ledger leaf. Double rule on top, the way a ledger page opens. */
.sheet { margin: 2.25rem 0 0; background: var(--leaf); border: 1px solid var(--ink); border-top: 3px double var(--ink); border-radius: var(--r); min-width: 0; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1rem .875rem; border-bottom: 1px solid var(--ink); }
.sheet-title { color: var(--ink); font: 500 1.375rem/1.2 var(--serif); letter-spacing: -.01em; }
.sheet-sub { font-size: .875rem; color: var(--muted); margin-top: .125rem; }
.tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .625rem; border: 1px solid var(--ink); border-radius: var(--r);
  color: var(--ink); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.cols { display: none; }
.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; gap: .5rem; padding: .875rem 1rem; border-bottom: 1px solid var(--line); }
.entry { display: grid; grid-template-columns: 1fr auto; gap: .125rem 1rem; align-items: baseline; }
.desc { color: var(--ink); font-weight: 600; }
.calc { grid-column: 1; grid-row: 2; font-size: .875rem; color: var(--ink-2); }
.amt { grid-column: 2; grid-row: 1; color: var(--ink); font-weight: 500; text-align: right; white-space: nowrap; }
.clause { font-size: .9375rem; line-height: 1.5; }
.note { font-size: 1.0625rem; line-height: 1.4; }
.note:empty, .calc:empty { display: none; }
.totals { margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .1875rem 0; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; color: var(--ink); font-weight: 500; }
.totals .net { margin-top: .375rem; padding-top: .5rem; border-top: 3px double var(--ink); }
.totals .net dt { color: var(--ink); font-weight: 600; }
.line.stop { background: var(--red-wash); border-bottom: 0; }
.stop .desc { color: var(--red); }
/* the pencil: one ellipse around the figure that broke the ceiling */
.circled { position: relative; display: inline-block; padding: 0 .125rem; }
.circled svg { position: absolute; left: -.5rem; top: -.375rem; width: calc(100% + 1rem); height: calc(100% + .75rem); overflow: visible; pointer-events: none; }
.circled ellipse { fill: none; stroke: var(--red); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .circled ellipse { stroke-dashoffset: 1; opacity: 0; }
.js .drawn .circled ellipse { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .9s var(--ease) .15s; }
.sheet figcaption { max-width: 28rem; padding: .75rem 1rem .875rem; border-top: 1px solid var(--ink); font-size: .875rem; line-height: 1.5; color: var(--muted); }

/* sections */
.block { padding: 4rem 0; border-top: 1px solid var(--line-2); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.625rem); line-height: 1.08; max-width: 20ch; }
.lede { margin-top: .875rem; max-width: 38rem; }
.fine { margin-top: 1rem; font-size: .875rem; color: var(--muted); max-width: 28rem; }
.split { display: grid; gap: 1.75rem; }

/* exception list: the same ledger, three columns */
.exlist { margin-top: 2rem; background: var(--leaf); border: 1px solid var(--ink); border-top: 3px double var(--ink); border-radius: var(--r); }
.exrow { display: grid; gap: .5rem; padding: 1rem; border-top: 1px solid var(--line); }
.exhead + .exrow { border-top: 0; }
/* Below 45rem the rows stack, so the header leaves sight but stays in the accessibility tree. */
.exhead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ex-name { color: var(--red); font-weight: 600; }
.ex-clause { font-size: .9375rem; line-height: 1.5; }
.ex-did { color: var(--ink); line-height: 1.45; }

/* ruled lists, not cards */
.checks, .plainlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.checks div { display: grid; gap: .125rem; padding: 1rem 0; border-bottom: 1px solid var(--line-2); }
.checks dt { color: var(--ink); font-weight: 600; }
.checks dd { margin: 0; }
.plainlist li { padding: 1.125rem 0; border-bottom: 1px solid var(--line-2); font-size: 1.125rem; line-height: 1.5; max-width: 38rem; }
.plainlist b { color: var(--ink); font-weight: 600; }

/* the working lines under the pay headline */
.working { margin-top: 1.25rem; padding: .75rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); max-width: 44rem;
  display: grid; gap: .25rem; font-size: .9375rem; color: var(--ink); }
.working span { display: block; }
.working small { max-width: 28rem; font: 400 .875rem/1.5 var(--sans); color: var(--muted); }

/* the request: a slip on the same paper */
.ask { padding: 4rem 0; border-top: 1px solid var(--ink); }
.ask-grid { display: grid; gap: 2rem; }
.ask .lede + .lede { margin-top: .625rem; }
.slip { background: var(--leaf); border: 1px solid var(--ink); border-top: 3px double var(--ink); border-radius: var(--r); padding: 1.25rem 1rem 1.375rem; }
.field { display: grid; gap: .375rem; margin-bottom: 1rem; }
.field label { color: var(--ink); font-size: .9375rem; font-weight: 600; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; min-height: 3rem; padding: .625rem .75rem; background: var(--ground); color: var(--ink);
  border: 1px solid var(--ink-2); border-radius: var(--r); font: 400 1rem/1.4 var(--sans); }
.field textarea { min-height: 6rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; background: var(--leaf); }
.field [aria-invalid="true"] { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.err { color: var(--red); font-size: .875rem; font-weight: 600; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slip-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .25rem; }
.req { margin-bottom: 1rem; font-size: .875rem; color: var(--muted); }
.status { font-size: .9375rem; color: var(--ink); min-height: 1.5em; }
.status:focus { outline: none; }
.status.bad { color: var(--red); font-weight: 600; }
.done h3 { margin: 0; color: var(--ink); font: 500 1.5rem/1.2 var(--serif); letter-spacing: -.01em; }
.done p { margin-top: .625rem; }
.done:focus { outline: none; }

footer.site { border-top: 1px solid var(--ink); padding: 1.75rem 0 2.75rem; font-size: .875rem; color: var(--muted); }
footer.site p { max-width: 28rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; margin-top: .75rem; max-width: none !important; }
footer.site a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 2.75rem; }

/* sign-in page */
.gate { padding: 3.5rem 0 5rem; min-height: 62vh; }
.gate h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); }
.gate .lede { font-size: 1.125rem; }
.gate .cta-row { margin-top: 1.75rem; }

@media (min-width: 45rem) {
  :root { --gutter: 2rem; }
  .wide-only { display: inline-flex; }
  .hero { padding: 3.5rem 0 5rem; }
  .sheet-head { padding: 1.125rem 1.5rem 1rem; }
  .cols, .line { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, .85fr); gap: 0; padding: 0; }
  .cols { border-bottom: 1px solid var(--ink); font-size: .8125rem; font-weight: 600; color: var(--muted); }
  .cols > span, .line > * { padding: .875rem 1.5rem; }
  .cols > span { padding-block: .5rem; }
  .cols > span + span, .line > * + * { border-left: 1px solid var(--line-2); }
  .cols .c-amt { display: flex; justify-content: space-between; }
  .entry { grid-template-columns: 1fr auto; align-content: start; }
  .note:empty { display: block; }
  .totals { padding: .75rem 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.1fr); }
  .totals div { grid-column: 1; margin: 0 1.5rem; }
  .sheet figcaption { padding: .75rem 1.5rem .875rem; }
  .block, .ask { padding: 6rem 0; }
  .exhead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    display: grid; padding-block: .5rem; border-bottom: 1px solid var(--ink); font-size: .8125rem; font-weight: 600; color: var(--muted); }
  .exrow { grid-template-columns: 11rem minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.125rem 1.5rem; align-items: baseline; }
  .exhead + .exrow { border-top: 0; }
  .slip { padding: 1.75rem 1.75rem 1.875rem; }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}
@media (min-width: 65rem) {
  :root { --gutter: 3rem; }
  .hero-top { grid-template-columns: minmax(0, 8fr) minmax(0, 4.4fr); gap: 3.5rem; align-items: end; }
  h1 { max-width: none; }
  .offer { padding-bottom: .375rem; }
  .sheet { margin-top: 3rem; }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
  .ask-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
}
@media (forced-colors: active) {
  .line.stop { outline: 2px solid Mark; outline-offset: -2px; }
  .circled ellipse { stroke: Mark; }
  .btn { border-color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .js .circled ellipse, .js .drawn .circled ellipse { stroke-dashoffset: 0; opacity: 1; transition: none; }
}

/* posted pay: the per-firm table, the method note and the quoted duty lines */
.paylist { margin-top: 2rem; }
.payrow p { margin: 0; }
.payrow p[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-family: var(--sans); font-size: .875rem; }
.dutylines { margin-top: 3rem; }
.dutylines h3 { margin: 0 0 1rem; color: var(--ink); font: 500 1.375rem/1.2 var(--serif); letter-spacing: -.01em; }
.dutylines .plainlist li { font-family: var(--serif); font-size: 1.125rem; }
@media (min-width: 45rem) {
  .payrow { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .payrow p[data-l]::before { content: none; }
}
.gate .cta-row + .lede { margin-top: 1rem; }
.method { margin-top: 2.5rem; }
.method h3 { margin: 0 0 1rem; color: var(--ink); font: 500 1.375rem/1.2 var(--serif); letter-spacing: -.01em; }
.method .plainlist li { padding: .75rem 0; font-size: 1rem; max-width: 31rem; }
.paylist .ex-name { color: var(--ink); }
.numlink { color: inherit; text-decoration: underline; text-underline-offset: .15em; display: inline-block; padding: .8125rem 0; margin: -.8125rem 0; }
.numlink:hover { text-decoration-thickness: 2px; }
.btn-dim { cursor: not-allowed; }
.foot-row > a { min-width: 2.75rem; justify-content: center; }