/* bomhq site, the calm ledger (DESIGN.md). Colour tokens repeat src/admin/lib/tokens.json (design-check site-tokens enforces it); every spacing px value is on the 4/8 scale (space-scale).
   Dark is the default. Light follows prefers-color-scheme, and the header toggle (data-theme) overrides both. */
@font-face{font-family:"Geist";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/geist-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/geist-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/geist-mono-latin-600-normal.woff2) format("woff2")}
:root{--surface:#081412;--elev:#0C1B18;--ink:#F7F7F7;--muted:#ADAAA6;--faint:#8A9794;--line:#1F2927;--hairline:#1D2D2A;--hover:#131E1C;--sel:#1B2A38;--accent:#7F9CFF;--accentHover:#A3B8FF;--accentInk:#06100E;--inputBorder:#7A8B87;--focus:#F7F7F7;--dotActive:#4FB3A1;--dotWaiting:#E8C05A;--dotBlocked:#FF7A72;--dotIdle:#6A7B77;--r:8px;--rm:12px;--sh:0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -16px rgba(0, 0, 0, 0.12);--shp:0 1px 2px rgba(0, 0, 0, 0.16);--touch:44px;--c1:176px;--gut:32px;--ease:cubic-bezier(0.2, 0, 0, 1);color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme]){--surface:#FFFFFF;--elev:#F4F7F6;--ink:#10201D;--muted:#46534F;--faint:#5C6965;--line:#DDE3E1;--hairline:#E2E8E6;--hover:#F4F5F5;--sel:#EDEFFC;--accent:#3652D9;--accentHover:#2A41B8;--accentInk:#FFFFFF;--inputBorder:#6F7C78;--focus:#10201D;--dotActive:#18705F;--dotWaiting:#8A5A0B;--dotBlocked:#B3261E;--dotIdle:#7A8783;color-scheme:light}}
:root[data-theme=light]{--surface:#FFFFFF;--elev:#F4F7F6;--ink:#10201D;--muted:#46534F;--faint:#5C6965;--line:#DDE3E1;--hairline:#E2E8E6;--hover:#F4F5F5;--sel:#EDEFFC;--accent:#3652D9;--accentHover:#2A41B8;--accentInk:#FFFFFF;--inputBorder:#6F7C78;--focus:#10201D;--dotActive:#18705F;--dotWaiting:#8A5A0B;--dotBlocked:#B3261E;--dotIdle:#7A8783;color-scheme:light}
:root[data-theme=dark]{--surface:#081412;--elev:#0C1B18;--ink:#F7F7F7;--muted:#ADAAA6;--faint:#8A9794;--line:#1F2927;--hairline:#1D2D2A;--hover:#131E1C;--sel:#1B2A38;--accent:#7F9CFF;--accentHover:#A3B8FF;--accentInk:#06100E;--inputBorder:#7A8B87;--focus:#F7F7F7;--dotActive:#4FB3A1;--dotWaiting:#E8C05A;--dotBlocked:#FF7A72;--dotIdle:#6A7B77;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:Geist, system-ui, sans-serif;font-size:16px;line-height:24px;font-weight:400}
b,strong{font-weight:600}
code,pre,.mono,.num{font-family:Geist Mono, ui-monospace, monospace;font-variant-numeric:tabular-nums}
code{font-size:14px;line-height:20px}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px;transition:text-decoration-color 120ms var(--ease)}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
header.top{padding:12px 0}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.brand{display:inline-flex;align-items:center;min-height:var(--touch);font-weight:600;font-size:16px;line-height:24px;color:var(--ink);text-decoration:none}
.topr{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
nav.main{display:flex;flex-wrap:wrap;gap:0}
nav.main a,.subnav a{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 12px;color:var(--muted);text-decoration:none;font-size:14px;line-height:20px;transition:color 120ms var(--ease)}
nav.main a:hover,.subnav a:hover{color:var(--ink)}
nav.main a[aria-current=page],.subnav a[aria-current=page]{color:var(--ink);font-weight:600}
.btn.themebtn{display:none;padding:0 16px}
.js .btn.themebtn{display:inline-flex}
main{padding:0}
h1{font-size:32px;line-height:40px;font-weight:600;margin:0 0 24px;max-width:24ch;letter-spacing:-0.03em}
h2{font-size:16px;line-height:24px;font-weight:600;margin:0}
h3{font-size:16px;line-height:24px;font-weight:600;margin:32px 0 8px}
p,ul,ol,dl{margin:0 0 16px;max-width:68ch}
ul,ol{padding-left:24px}
li{margin-bottom:8px}
p,li{color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);min-width:var(--touch);padding:0 24px;border-radius:var(--r);border:1px solid var(--inputBorder);background:transparent;color:var(--ink);font:inherit;font-size:14px;line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color 120ms var(--ease),border-color 120ms var(--ease)}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accentInk);box-shadow:var(--shp)}
.btn.primary:hover{background:var(--accentHover);border-color:var(--accentHover)}
.cta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0}
a.lnk{display:inline-flex;align-items:center;min-height:var(--touch);font-size:14px;line-height:20px}
.hero{padding:96px 0 64px}
.hero.doc{padding:32px 0 48px}
.hero.doc .lead{max-width:60ch;margin:0 0 24px}
.hero .why{font-size:16px;line-height:24px;color:var(--muted);margin:24px 0 0;max-width:60ch}
.hero.home{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:48px;row-gap:24px;align-items:start;padding:96px 0 32px}
.hero.home h1{grid-column:1/-1;font-size:64px;line-height:64px;letter-spacing:-0.045em;max-width:none;margin:0}
.hl{display:block}
.hero-copy{grid-column:1;grid-row:2;min-width:0}
.hero-copy .why{margin:0 0 24px}
.hero-copy .cta{margin:0 0 32px}
.hero-copy .codewrap{margin:0 0 16px;max-width:none}
.hero-copy .codebar pre{flex-basis:100%}
.hero-copy .codebar{padding:12px 12px 12px 16px}
.hero-copy .small{margin:0;color:var(--faint)}
.hero-copy .small a{color:var(--muted)}
.product{grid-column:2;grid-row:2 / span 2;margin:0;min-width:0}
.term{background:var(--elev);border:1px solid var(--hairline);border-radius:var(--rm);box-shadow:var(--sh);overflow:hidden}
.termbar{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--hairline);font-size:14px;line-height:20px;color:var(--faint)}
.termbody{padding:16px;font-size:14px;line-height:20px}
.ln{display:grid;grid-template-columns:20ch minmax(0,1fr);column-gap:0;margin:0 0 4px;color:var(--muted);overflow-wrap:anywhere}
.ln:last-child{margin-bottom:0}
.ln .fn{color:var(--ink);font-weight:600}
.ln.ask{grid-template-columns:16px minmax(0,1fr);color:var(--ink);margin-bottom:8px}
.ln.ask .pr{color:var(--faint)}
.ln .st{gap:8px}
.ln .st .lbl{color:var(--ink);font-size:14px}
.flow{position:relative;margin:0;padding:8px 0 8px 64px}
.flow::before{content:"";position:absolute;left:32px;top:0;bottom:0;width:1px;background:var(--inputBorder)}
.appr{margin:0 0 0 32px;max-width:none}
.appr .rh{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st exp" "main tot";gap:4px 16px;padding:12px 16px}
.appr .rh>.st{grid-area:st}.appr .rh>.main{grid-area:main}.appr .rh>.tot{grid-area:tot}.appr .rh>.exp{grid-area:exp}
.appr .row-body{grid-template-columns:minmax(0,1fr);padding:4px 16px 16px}
.appr .row-body>*{grid-column:1}
.acts{display:flex;flex-wrap:wrap;gap:8px 12px;margin:16px 0 0}
.more{margin:16px 0 0}
.more summary{display:list-item;list-style-position:inside;padding:12px 0;font-size:14px;line-height:20px;color:var(--muted);cursor:pointer}
.more[open] summary{color:var(--ink)}
.more dl.cues{margin:8px 0 0}
.btn.fake{pointer-events:none;cursor:default}
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;grid-column:1;grid-row:3;align-self:end;margin:0;max-width:none;padding:16px 0 0;border-top:1px solid var(--hairline)}
.proof div{min-width:0}
.proof dt{font-size:14px;line-height:20px;color:var(--faint)}
.proof dd{margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.glow{position:absolute;top:0;left:0;right:0;height:900px;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(48% 64% at 80% 4%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 72%),linear-gradient(to right,var(--hairline) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(to bottom,var(--hairline) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:radial-gradient(90% 100% at 50% 0%,var(--ink) 20%,transparent 100%);mask-image:radial-gradient(90% 100% at 50% 0%,var(--ink) 20%,transparent 100%)}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.term .ln,.flow,.appr{animation:rise 200ms var(--ease) backwards;animation-delay:calc(var(--i) * 25ms)}}
.subnav{display:flex;flex-wrap:wrap;gap:0;margin:0 0 32px -12px}
.sec{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:64px;padding:64px 0;border-top:1px solid var(--hairline)}
.sec>.sec-body{grid-column:2;min-width:0}
.sec>h2{grid-column:1}
.sec-body>:first-child{margin-top:0}
.sec-body>:last-child{margin-bottom:0}
.codewrap{margin:0 0 24px;max-width:880px}
.codewrap .label{font-size:14px;line-height:20px;color:var(--muted);margin:0 0 12px}
.codebar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;background:var(--elev);border:1px solid var(--hairline);border-radius:var(--rm);box-shadow:var(--sh);padding:12px 12px 12px 24px}
.codebar pre{flex:1 1 320px;min-width:0;margin:0;padding:4px 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:20px;color:var(--ink)}
.codebar .btn{flex:none}
.st{display:inline-flex;align-items:center;gap:8px;min-width:0}
.st .lbl{font-size:14px;line-height:20px;color:var(--muted)}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}
.dot[data-s=active]{background:var(--dotActive)}
.dot[data-s=waiting]{background:var(--dotWaiting)}
.dot[data-s=blocked]{background:var(--dotBlocked)}
.dot[data-s=idle]{background:var(--dotIdle)}
.sample{background:var(--elev);border:1px solid var(--hairline);border-radius:var(--rm);box-shadow:var(--sh);padding:8px;margin:0 0 16px;max-width:880px}
.row{position:relative;border-radius:var(--r)}
.row.sel{background:var(--sel)}
.row.sel::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.rh{display:grid;grid-template-columns:var(--c1) minmax(0,1fr) 128px 160px;column-gap:16px;align-items:center;min-height:var(--touch);padding:12px 16px}
.rh .main{display:flex;gap:8px 12px;min-width:0;overflow:hidden;align-items:baseline}
.rh .who{flex:none;font-weight:600;color:var(--ink)}
.rh .mpn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px;line-height:20px}
.rh .tot{justify-self:end;text-align:right;white-space:nowrap;font-size:14px;line-height:20px}
.rh .exp{justify-self:end;text-align:right;font-size:14px;line-height:20px;color:var(--faint);white-space:nowrap}
.row-body{display:grid;grid-template-columns:var(--c1) minmax(0,1fr);column-gap:16px;padding:4px 16px 24px}
.row-body>*{grid-column:2;min-width:0}
dl.cues{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;margin:0;max-width:none}
dl.cues dt{font-size:14px;line-height:20px;color:var(--faint)}
dl.cues dd{margin:0;font-size:14px;line-height:20px;color:var(--ink)}
.sample-cap{font-size:14px;line-height:20px;color:var(--faint);margin:0}
dl.defs{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);column-gap:0;max-width:none;margin:0}
dl.defs dt,dl.defs dd{margin:0;padding:16px 0;border-top:1px solid var(--hairline)}
dl.defs:first-child dt:first-of-type,dl.defs:first-child dt:first-of-type+dd{border-top:0;padding-top:0}
dl.defs dt{font-weight:600;color:var(--ink);padding-right:32px}
dl.defs dt .st{align-items:center}
dl.defs dt code{display:block;font-weight:400;color:var(--muted);margin-top:4px}
dl.defs dd{color:var(--muted)}
.note{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0;max-width:68ch}
.note .txt{min-width:0;color:var(--muted)}
pre.block{background:var(--elev);border:1px solid var(--hairline);border-radius:var(--rm);box-shadow:var(--sh);padding:16px 24px;margin:0 0 16px;max-width:880px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:20px}
.tabs{display:none;flex-wrap:wrap;gap:0 24px;margin:0 0 24px;border-bottom:1px solid var(--hairline)}
.js .tabs{display:flex}
.tabs button{min-height:var(--touch);padding:0;background:transparent;border:0;border-bottom:2px solid transparent;position:relative;top:1px;color:var(--muted);font:inherit;font-size:14px;line-height:20px;cursor:pointer;transition:color 120ms var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.js [role=tabpanel][hidden]{display:none}
.js [role=tabpanel]>h3{display:none}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 64px;max-width:none}
.plan{background:var(--elev);border:1px solid var(--hairline);border-radius:var(--rm);box-shadow:var(--sh);padding:32px}
.plan h2{margin:0 0 8px}
.plan .price{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);margin:0 0 16px}
.plan p,.plan ul{max-width:none}
.plan ul{margin-bottom:16px}
.plan>:last-child{margin-bottom:0}
footer.bot{padding:48px 0 64px;border-top:1px solid var(--hairline);color:var(--muted);font-size:14px;line-height:20px}
footer.bot p{margin:0 0 4px;max-width:none;font-size:14px;line-height:20px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:1023px){
  .hero.home h1{font-size:48px;line-height:52px;letter-spacing:-0.04em}
  .hero.home{grid-template-columns:minmax(0,1fr)}
  .hero-copy,.product{grid-column:1}
  .hero-copy,.product,.proof{grid-row:auto}
}
@media (max-width:640px){
  :root{--gut:16px}
  .topr{margin-left:-12px}
  .hero{padding:48px 0 48px}
  .hero.doc{padding:16px 0 32px}
  .hero.home{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:48px 0 32px}
  .hero.home h1{font-size:32px;line-height:40px;letter-spacing:-0.03em}
  .hero-copy,.product{grid-column:1}
  .product{grid-row:auto}
  .termbody{padding:16px 12px}
  .ln,.ln.ask{grid-template-columns:minmax(0,1fr)}
  .ln.ask{grid-template-columns:16px minmax(0,1fr)}
  .ln .ar,.ln.out>span:last-child{padding-left:16px}
  .ln.out>.fn{display:none}
  .flow{padding-left:48px}
  .flow::before{left:16px}
  .appr{margin-left:16px}
  .acts .btn{flex:1 1 100%}
  .proof{grid-template-columns:minmax(0,1fr);gap:12px}
  .sec{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:48px 0}
  .sec>.sec-body,.sec>h2{grid-column:1}
  .btn{width:100%}
  .btn.themebtn{width:auto}
  .cta .btn{flex:1 1 100%}
  .plans{grid-template-columns:1fr;margin-bottom:48px}
  .plan{padding:24px}
  .codebar{padding:12px}
  .codebar pre{padding:4px 4px 0}
  dl.defs{grid-template-columns:1fr}
  dl.defs dt{padding:16px 0 4px}
  dl.defs dd{border-top:0;padding:0 0 16px}
  dl.defs:first-child dt:first-of-type{padding-top:0}
  .rh{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"st exp" "main tot";gap:4px 16px;padding:12px}
  .rh>.st{grid-area:st}.rh>.main{grid-area:main}.rh>.tot{grid-area:tot}.rh>.exp{grid-area:exp}
  .row-body{grid-template-columns:minmax(0,1fr);padding:4px 12px 16px}
  .row-body>*{grid-column:1}
  dl.cues{grid-template-columns:1fr;gap:0}
  dl.cues dd{margin-bottom:8px}
  footer.bot{padding:32px 0 48px}
}