/* ============================================================
   Hassle — v2 additions
   BYOK / model trust, evidence labels, doc & legal sub-pages,
   developer docs. Built on hassle.css tokens.
   ============================================================ */

/* ─── BYOK badge strip (homepage trust) ──────────────────── */
.badge-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.badge-strip .bchip {
  font-family: var(--mono); font-size: 12.5px; color: var(--grey-700);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1px solid var(--grey-300);
  padding: 8px 14px 8px 11px; border-radius: var(--r-pill);
}
.badge-strip .bchip::before { content: "✓"; color: var(--signal); font-weight: 700; }
.dark .badge-strip .bchip { background: var(--night-2); border-color: var(--night-line); color: #B9BFC7; }
.dark .badge-strip .bchip::before { color: var(--term-green); }

/* BYOK subline block */
.byok-line {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--r-card);
  border: 1px solid var(--signal-line); background: var(--signal-soft);
  font-size: 15.5px; line-height: 1.55; color: var(--signal-deep);
}
.byok-line b { font-weight: 600; }
.dark .byok-line { background: rgba(0,184,99,0.1); border-color: rgba(0,184,99,0.28); color: #CFF3E0; }

/* ─── Evidence label legend ──────────────────────────────── */
.ev-labels { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.ev-lab { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--grey-200); }
.ev-lab:last-child { border-bottom: none; }
.ev-lab .lab { font-family: var(--mono); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.ev-lab .ldot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ev-lab p { margin: 0; font-size: 14.5px; color: var(--grey-700); line-height: 1.5; }
.ldot.verified { background: var(--signal); }
.ldot.selfrep  { background: var(--amber); }
.ldot.inferred { background: #6E8BE0; }
.ldot.model    { background: var(--plum); }
.ldot.stale    { background: var(--grey-400); }
.ev-lab .lab.verified { color: var(--signal-deep); }
.dark .ev-lab { border-color: var(--night-line); }
.dark .ev-lab p { color: #A2A8B0; }
.dark .ev-lab .lab { color: #E7EAEE; }

/* ─── Model mode cards ───────────────────────────────────── */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.mode { border: 1px solid var(--grey-300); border-radius: var(--r-card); padding: 26px 24px; background: var(--paper);
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.mode:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--elev-soft); }
.mode .mtag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey-500); }
.mode h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 10px 0 8px; }
.mode p { font-size: 14.5px; color: var(--grey-700); margin: 0; line-height: 1.5; }
.mode .mfoot { font-family: var(--mono); font-size: 11.5px; color: var(--signal-deep); background: var(--signal-soft);
  border: 1px solid var(--signal-line); padding: 3px 9px; border-radius: 6px; margin-top: 16px; display: inline-block; }
.mode.adv .mfoot { color: #5b2ea6; background: rgba(122,75,201,0.1); border-color: rgba(122,75,201,0.3); }
@media (max-width: 940px) { .modes { grid-template-columns: 1fr; } .ev-lab { grid-template-columns: 1fr; gap: 6px; } }

/* ─── Section intro (centered) reuse for sub-pages ───────── */
.sec-mid { text-align: center; }
.sec-mid .sec-eyebrow { justify-content: center; }
.sec-mid .sec-title { margin-left: auto; margin-right: auto; }
.sec-mid .sec-sub { margin-left: auto; margin-right: auto; }

/* ─── Legal / policy doc layout ──────────────────────────── */
.doc-hero { padding: 128px 0 40px; border-bottom: 1px solid var(--grey-200); background: var(--bone); }
.doc-hero .wrap { max-width: 820px; }
.doc-hero .eyebrow { color: var(--grey-600); }
.doc-hero h1 { font-size: clamp(34px, 4.4vw, 50px); font-weight: 600; letter-spacing: -0.04em; margin: 16px 0 0; }
.doc-hero .doc-meta { font-family: var(--mono); font-size: 13px; color: var(--grey-500); margin-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.doc-body { max-width: 820px; margin: 0 auto; padding: 56px 32px 96px; }
.doc-body h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; margin: 44px 0 14px; scroll-margin-top: 96px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: 17px; font-weight: 600; margin: 26px 0 8px; }
.doc-body p, .doc-body li { font-size: 16px; line-height: 1.65; color: var(--grey-700); }
.doc-body p { margin: 0 0 14px; }
.doc-body ul { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--signal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.doc-body .lead { font-size: 18.5px; color: var(--ink); line-height: 1.6; margin-bottom: 30px; }
.doc-callout { border: 1px solid var(--grey-300); background: var(--grey-100); border-radius: var(--r-card);
  padding: 18px 20px; margin: 22px 0; font-size: 15px; color: var(--grey-700); line-height: 1.55; }
.doc-callout b { color: var(--ink); }
.doc-toc { font-family: var(--mono); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.doc-toc a { color: var(--grey-600); border: 1px solid var(--grey-300); padding: 5px 12px; border-radius: var(--r-pill);
  text-decoration: none; background: var(--paper); transition: all .15s; }
.doc-toc a:hover { border-color: var(--ink); color: var(--ink); }

/* ─── Developer docs ─────────────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; max-width: var(--max); margin: 0 auto; padding: 128px 32px 96px; align-items: start; }
.docs-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
.docs-side .ds-group { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-500); padding: 16px 10px 6px; }
.docs-side a { font-size: 14px; color: var(--grey-700); text-decoration: none; padding: 7px 10px; border-radius: 8px; transition: all .15s; }
.docs-side a:hover { background: var(--grey-100); color: var(--ink); }
.docs-main { min-width: 0; }
.docs-main h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.035em; margin: 0 0 12px; }
.docs-main .docs-lede { font-size: 18px; color: var(--grey-700); line-height: 1.6; margin: 0 0 12px; max-width: 64ch; }
.docs-main h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 52px 0 14px; scroll-margin-top: 96px; }
.docs-main h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
.docs-main p { font-size: 15.5px; color: var(--grey-700); line-height: 1.6; margin: 0 0 14px; max-width: 66ch; }
.code-card { background: var(--night); border-radius: var(--r-card); overflow: hidden; margin: 16px 0 22px; border: 1px solid var(--night-line); }
.code-card .cc-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--night-line); background: #0a0b0e; }
.code-card .cc-bar i { width: 10px; height: 10px; border-radius: 50%; }
.code-card .cc-title { font-family: var(--mono); font-size: 11px; color: #9aa0a8; margin-left: 10px; letter-spacing: 0.03em; }
.code-card pre { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.85; color: #C9CFD6; overflow-x: auto; }
.code-card pre .g { color: var(--term-green); } .code-card pre .c { color: var(--term-dim); }
.code-card pre .w { color: #fff; } .code-card pre .am { color: var(--amber); } .code-card pre .r { color: #FF8585; }
.docs-warn { border-left: 3px solid var(--amber); background: rgba(232,163,61,0.08); padding: 14px 18px; border-radius: 0 10px 10px 0;
  font-size: 14.5px; color: var(--grey-700); line-height: 1.55; margin: 18px 0; }
.docs-warn b { color: var(--ink); }
.cmd-table { border: 1px solid var(--grey-300); border-radius: var(--r-card); overflow: hidden; margin: 16px 0 22px; }
.cmd-table .ct-row { display: grid; grid-template-columns: minmax(220px, 1fr) 1.3fr; gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--grey-200); align-items: baseline; }
.cmd-table .ct-row:last-child { border-bottom: none; }
.cmd-table code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.cmd-table code .c { color: var(--grey-500); }
.cmd-table span { font-size: 14px; color: var(--grey-700); }
@media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; gap: 0; } .docs-side { display: none; } .cmd-table .ct-row { grid-template-columns: 1fr; gap: 4px; } }

/* ─── Contact ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.contact-card { border: 1px solid var(--grey-300); border-radius: var(--r-card); padding: 26px 24px; background: var(--paper); }
.contact-card .ci { width: 38px; height: 38px; border-radius: 10px; background: var(--signal-soft); border: 1px solid var(--signal-line); display: grid; place-items: center; margin-bottom: 16px; }
.contact-card h4 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.contact-card p { font-size: 14.5px; color: var(--grey-700); margin: 0 0 10px; line-height: 1.5; }
.contact-card a.cmail { font-family: var(--mono); font-size: 13.5px; color: var(--signal-deep); font-weight: 600; text-decoration: none; }
.contact-card a.cmail:hover { text-decoration: underline; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ─── Post-raise teaser band ─────────────────────────────── */
.afterband { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.afterband .ab-card { border: 1px solid var(--grey-300); border-radius: var(--r-card); padding: 26px; background: var(--paper); }
.afterband .ab-card .ab-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.afterband .ab-card h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 8px; }
.afterband .ab-card p { font-size: 15px; color: var(--grey-700); margin: 0; line-height: 1.55; }
@media (max-width: 860px) { .afterband { grid-template-columns: 1fr; } }