/* BNLGit docs + long-form pages — extends style.css.
   Self-contained, no CDN, no webfonts. */

/* ---------- accessibility ---------- */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--gold); color:#1a1305;
  padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; z-index:99}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px}

/* ---------- top nav (shared by docs + new marketing pages) ---------- */
.topnav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.topnav a{font-size:14.5px; color:var(--muted); transition:color .18s ease}
.topnav a:hover{color:var(--gold-soft)}
.topnav a[aria-current="page"]{color:var(--ink)}
.topnav .btn{color:#1a1305}
.btn.small{padding:9px 16px; font-size:14px}
@media (max-width:720px){
  .site{flex-wrap:wrap; gap:12px}
  .topnav{gap:14px; width:100%}
  .topnav a{font-size:13.5px}
}

/* ---------- docs shell ---------- */
.docs-body{scroll-padding-top:20px}
.doc-shell{display:grid; grid-template-columns:246px minmax(0,1fr); gap:44px; padding:34px 0 10px; align-items:start}
.doc-nav{position:sticky; top:24px}
.doc-nav-toggle{display:none; width:100%; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-soft); background:rgba(201,168,76,.06);
  border:1px solid var(--line); border-radius:10px; padding:11px 14px; text-align:left}
.doc-nav-home{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-soft); padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid var(--line-soft)}
.doc-nav-home:hover{color:var(--gold)}
.doc-nav-group{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin:20px 0 8px}
.doc-nav ul{list-style:none; margin:0; padding:0}
.doc-nav li{margin:0}
.doc-nav li a{display:block; font-size:14px; color:var(--muted); padding:6px 12px; border-radius:8px;
  border-left:2px solid transparent; transition:color .16s ease, background .16s ease, border-color .16s ease}
.doc-nav li a:hover{color:var(--ink); background:rgba(255,255,255,.03)}
.doc-nav li a.current{color:var(--gold-soft); border-left-color:var(--gold); background:rgba(201,168,76,.07)}

@media (max-width:900px){
  .doc-shell{grid-template-columns:1fr; gap:20px}
  .doc-nav{position:static}
  .doc-nav-toggle{display:block}
  .doc-nav-list{display:none; margin-top:12px; border:1px solid var(--line-soft); border-radius:12px; padding:6px 12px 16px}
  .doc-nav-list.open{display:block}
}

/* ---------- docs content ---------- */
.crumbs{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted-2); margin-bottom:16px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--gold-soft)}
.crumbs span{opacity:.55; margin:0 2px} .crumbs .here{color:var(--muted); opacity:1}

.doc-h1{font-size:clamp(28px,4.4vw,42px); letter-spacing:-.025em}
.doc-body{margin-top:22px; max-width:74ch}
.doc-body h2{font-size:clamp(20px,2.6vw,26px); margin:44px 0 0; padding-top:18px; border-top:1px solid var(--line-soft)}
.doc-body h3{font-size:17.5px; margin:30px 0 0; color:var(--gold-soft)}
.doc-body h4{font-size:15px; margin:24px 0 0; color:var(--ink)}
.doc-body p{color:var(--muted); font-size:15.5px; margin:14px 0 0}
.doc-body strong{color:var(--ink); font-weight:600}
.doc-body em{color:var(--ink); font-style:italic}
.doc-body a{color:var(--gold-soft); border-bottom:1px solid rgba(201,168,76,.32)}
.doc-body a:hover{color:var(--gold); border-bottom-color:var(--gold)}
.doc-body a .ext{font-size:.8em; opacity:.7}
.doc-body ul,.doc-body ol{color:var(--muted); font-size:15.5px; margin:14px 0 0; padding-left:22px}
.doc-body li{margin:7px 0}
.doc-body li::marker{color:var(--gold-dim)}
.doc-body hr{border:none; border-top:1px solid var(--line-soft); margin:34px 0}
.doc-body code{font-family:var(--mono); font-size:.875em; color:var(--gold-soft);
  background:rgba(201,168,76,.09); border:1px solid rgba(201,168,76,.16);
  border-radius:5px; padding:1.5px 5px; word-break:break-word}
.doc-body a code{color:inherit}

.doc-code{margin:18px 0 0; padding:16px 18px; font-family:var(--mono); font-size:13px; line-height:1.7;
  color:#c7d2e8; background:#0b1020; border:1px solid var(--line-soft); border-radius:12px;
  overflow-x:auto; white-space:pre}
.doc-code code{background:none; border:none; padding:0; color:inherit; font-size:inherit}

.doc-body blockquote{margin:20px 0 0; padding:2px 0 2px 18px; border-left:2px solid var(--gold)}
.doc-body blockquote p{color:var(--muted); font-size:15px}
.doc-body blockquote p:first-child{margin-top:0}

.doc-table-wrap{margin:20px 0 0; overflow-x:auto; border:1px solid var(--line-soft); border-radius:12px}
.doc-table-wrap table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
.doc-table-wrap th,.doc-table-wrap td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft); color:var(--muted); vertical-align:top}
.doc-table-wrap th{background:rgba(255,255,255,.03); color:var(--ink); font-weight:600; font-size:13.5px; white-space:nowrap}
.doc-table-wrap tr:last-child td{border-bottom:none}
.doc-table-wrap th:last-child,.doc-table-wrap td:last-child{border-right:none}
.doc-table-wrap td strong{color:var(--ink)}

.doc-foot-note{margin-top:50px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:13.5px; color:var(--muted-2); max-width:74ch}
.doc-foot-note a{color:var(--muted)} .doc-foot-note a:hover{color:var(--gold-soft)}

/* ---------- docs index cards ---------- */
.doc-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:22px}
.doc-card{display:block; border:1px solid var(--line-soft); border-radius:14px; padding:20px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  transition:transform .18s ease, border-color .18s ease}
.doc-card:hover{transform:translateY(-3px); border-color:var(--line)}
.doc-card .t{font-size:16px; font-weight:600; color:var(--ink)}
.doc-card .d{font-size:14px; color:var(--muted); margin-top:6px}
.doc-card:hover .t{color:var(--gold-soft)}
@media (max-width:720px){ .doc-cards{grid-template-columns:1fr} }

/* ---------- notes / callouts (usable from markdown as raw HTML) ---------- */
.note{margin:22px 0 0; border:1px solid var(--line-soft); border-left:2px solid var(--gold);
  border-radius:0 12px 12px 0; padding:16px 20px; background:rgba(201,168,76,.045)}
.note p{margin:8px 0 0; font-size:14.5px}
.note p:first-child{margin-top:0}
.note .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); display:block; margin-bottom:7px}
.note.plain{border-left-color:var(--muted-2); background:rgba(255,255,255,.025)}
.note.plain .lbl{color:var(--muted)}

/* ---------- delta table (vs-gitea) ---------- */
.delta{margin-top:30px; border:1px solid var(--line-soft); border-radius:16px; overflow:hidden}
.delta .r{display:grid; grid-template-columns:.85fr 1.35fr; border-bottom:1px solid var(--line-soft)}
.delta .r:last-child{border-bottom:none}
.delta .r>div{padding:18px 22px}
.delta .r>div:first-child{border-right:1px solid var(--line-soft); background:rgba(255,255,255,.018)}
.delta .r.head>div{background:rgba(255,255,255,.04); font-weight:600; color:var(--ink); font-size:13px;
  font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:13px 22px}
.delta .add{font-size:16px; font-weight:600; color:var(--gold-soft); letter-spacing:-.01em}
.delta .tier{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line-soft);
  border-radius:4px; padding:2px 6px; margin-top:8px}
.delta .tier.lite{color:var(--gold-soft); border-color:var(--line); margin-left:6px}
.delta .what{color:var(--muted); font-size:14.5px}
.delta .what code{font-family:var(--mono); font-size:.88em; color:var(--gold-soft)}
@media (max-width:820px){
  .delta .r{grid-template-columns:1fr}
  .delta .r>div:first-child{border-right:none; border-bottom:1px solid var(--line-soft)}
  .delta .r.head{display:none}
}

/* ---------- availability banner (legacy promo pages) ----------
   These pages were written for deployment models the public beta does not yet
   offer. Rather than quietly leave the copy overselling, each carries this. */
.avail-note{margin:6px 0 0; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:0 14px 14px 0; padding:18px 22px; background:rgba(201,168,76,.06)}
.avail-note .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-soft); display:block; margin-bottom:8px}
.avail-note p{margin:0; color:var(--muted); font-size:14.5px; max-width:78ch}
.avail-note p + p{margin-top:9px}
.avail-note b{color:var(--ink); font-weight:600}
.avail-note a{color:var(--gold-soft); border-bottom:1px solid rgba(201,168,76,.32)}

/* ---------- honest limits list ---------- */
.limits{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.limits li{border:1px solid var(--line-soft); border-radius:12px; padding:17px 20px;
  background:rgba(255,255,255,.02); color:var(--muted); font-size:15px}
.limits li b{display:block; color:var(--ink); font-size:15.5px; margin-bottom:5px; font-weight:600}

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:22px; margin-top:34px; align-items:start}
.plan{border:1px solid var(--line); border-radius:18px; padding:30px 28px;
  background:linear-gradient(180deg,rgba(201,168,76,.09),rgba(255,255,255,.01))}
.plan .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft)}
.plan .amount{display:flex; align-items:baseline; gap:8px; margin:16px 0 4px}
.plan .amount .n{font-size:46px; font-weight:650; letter-spacing:-.03em; color:var(--ink); font-family:var(--mono)}
.plan .amount .per{color:var(--muted); font-size:15px}
.plan .trial{color:var(--gold-soft); font-size:15px; font-weight:600}
.plan ul{list-style:none; margin:22px 0 0; padding:0}
.plan li{color:var(--muted); font-size:14.5px; padding:7px 0 7px 26px; position:relative}
.plan li::before{content:"\2713"; position:absolute; left:0; top:7px; color:var(--gold); font-weight:700}
.plan .cta-row{margin-top:26px}
.disclosure{border:1px solid var(--line-soft); border-radius:18px; padding:26px 26px;
  background:rgba(255,255,255,.02)}
.disclosure h3{font-size:17px; margin-bottom:4px}
.disclosure dl{margin:16px 0 0}
.disclosure dt{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); margin-top:15px}
.disclosure dd{margin:5px 0 0; color:var(--muted); font-size:14.5px}
.disclosure dd b{color:var(--ink)}
@media (max-width:820px){ .price-grid{grid-template-columns:1fr} }

/* Three-tier grid. .plan is reused as-is; only the highlighted tier keeps the
   gold wash so the eye lands on one card rather than three competing ones. */
.tier-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px; align-items:start}
.tier-grid .plan{padding:26px 24px; background:rgba(255,255,255,.02)}
.tier-grid .plan.featured{background:linear-gradient(180deg,rgba(201,168,76,.09),rgba(255,255,255,.01)); border-color:var(--gold-soft)}
.tier-grid .plan .amount .n{font-size:38px}
.tier-grid .plan .badge{display:inline-block; margin-left:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); vertical-align:middle}
@media (max-width:900px){ .tier-grid{grid-template-columns:1fr} }

/* Meter table: what the credits are actually spent on. */
.meters{width:100%; border-collapse:collapse; margin-top:24px; font-size:14.5px}
.meters th,.meters td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft)}
.meters th{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2)}
.meters td{color:var(--muted)}
.meters td:first-child{color:var(--ink); font-weight:600}
.meters td b{color:var(--gold-soft); font-family:var(--mono)}
.meters tr:last-child td{border-bottom:0}

/* ---------- signup form ---------- */
.signup{margin-top:8px}
.signup .field{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
.signup input[type=email]{flex:1 1 240px; min-width:0; font-family:var(--sans); font-size:15px;
  color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  border-radius:12px; padding:13px 16px}
.signup input[type=email]::placeholder{color:var(--muted-2)}
.signup input[type=email]:focus{border-color:var(--line); background:rgba(255,255,255,.06)}
.signup .hint{font-size:12.5px; color:var(--muted-2); margin-top:10px}

/* ---------- legal pages ---------- */
.legal{max-width:74ch}
.legal h2{font-size:20px; margin:38px 0 0; padding-top:16px; border-top:1px solid var(--line-soft)}
.legal h3{font-size:16px; margin:22px 0 0; color:var(--gold-soft)}
.legal p,.legal li{color:var(--muted); font-size:15px}
.legal p{margin:12px 0 0}
.legal ul{margin:12px 0 0; padding-left:22px}
.legal li{margin:6px 0}
.legal li::marker{color:var(--gold-dim)}
.legal .updated{font-family:var(--mono); font-size:12px; color:var(--muted-2); letter-spacing:.04em}
.legal strong{color:var(--ink)}
.legal a{color:var(--gold-soft); border-bottom:1px solid rgba(201,168,76,.32)}