/* Vexa Product Lab — Capabilities & Methodology document styles
   Loads AFTER site/site.css and reuses its tokens (slate, accent, mono, .wrap, .btn, .eyebrow, h2, .lead, .chip, .altband) */

/* ---------- hero ---------- */
.dochero{position:relative;overflow:hidden;padding:92px 0 76px;border-bottom:1px solid var(--line)}
.dochero .glow{position:absolute;top:-40%;right:-14%;width:56vw;height:56vw;background:radial-gradient(circle,rgba(61,127,199,var(--glow-opacity)),transparent 62%);pointer-events:none}
.dochero .wrap{position:relative}
.dochero .tag{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--platinum);margin:0 0 20px}
.dochero h1{font-weight:900;font-size:clamp(30px,4.2vw,52px);letter-spacing:-.025em;line-height:1.06;margin:0 0 22px;max-width:24ch;text-wrap:balance}
.dochero .sub{color:var(--muted);font-size:16.5px;line-height:1.68;max-width:66ch;margin:0 0 30px;text-wrap:pretty}
.dochero .chips{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- layout: sticky toc + content ---------- */
.doclayout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(40px,5vw,84px);align-items:start;padding:64px 0 0}
.toc{position:sticky;top:94px;display:flex;flex-direction:column;font-family:var(--font-mono);max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px}
.toc .tk{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin:20px 0 8px}
.toc .tk:first-child{margin-top:0}
.toc a{font-size:12px;color:var(--muted);text-decoration:none;padding:6px 0 6px 14px;border-left:1px solid var(--line);line-height:1.4;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--accent-bright);border-left-color:var(--accent-bright)}
@media(max-width:1020px){.doclayout{grid-template-columns:1fr;padding-top:48px}.toc{display:none}}

/* ---------- parts ---------- */
.part{padding:0 0 96px}
.part .lead{margin-bottom:44px}
html[data-density="compact"] .part{padding-bottom:64px}

/* who / problem duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 56px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duocard{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--slate-2);padding:26px 26px}
.duocard .dk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-bright);margin:0 0 12px}
.duocard p{font-size:14px;color:var(--muted);line-height:1.7;margin:0;text-wrap:pretty}

/* capability rows */
.subh{font-size:20px;font-weight:800;letter-spacing:-.015em;margin:0 0 6px}
.subd{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 22px;max-width:64ch;text-wrap:pretty}
.caps{margin:0 0 60px}
.caprow{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:17px 0;border-top:1px solid var(--line);align-items:baseline}
.caprow:last-child{border-bottom:1px solid var(--line)}
@media(max-width:680px){.caprow{grid-template-columns:1fr;gap:6px}}
.caprow .ct{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;gap:12px;align-items:baseline}
.caprow .ct i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--dim)}
.caprow p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;text-wrap:pretty}

/* ---------- connected model diagram ---------- */
.dgm{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--slate-2);padding:clamp(20px,3vw,30px)}
.dgm-grid{display:grid;grid-template-columns:1fr 30px 1fr 30px 1.12fr;gap:12px 4px;align-items:stretch}
.dgm .dh{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);padding-bottom:2px}
.dgm .dh.mid{color:var(--accent-bright)}
.dgm .node{border:1px solid var(--line);border-radius:10px;background:var(--slate);padding:13px 15px;font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;line-height:1.45}
.dgm .node.mid{border-color:var(--line-2);background:var(--slate-3)}
.dgm .node.out{border-color:rgba(63,171,255,.4);box-shadow:0 0 0 1px rgba(63,171,255,.12) inset}
.dgm .ar{display:flex;align-items:center;justify-content:center;color:var(--dim);font-family:var(--font-mono);font-size:15px}
@media(max-width:760px){
  .dgm-grid{grid-template-columns:1fr}
  .dgm .dh{display:none}
  .dgm .ar{transform:rotate(90deg);padding:2px 0}
  .dgm .gaprow{display:none}
}
.dgm .gaprow{height:6px}
.dgm-note{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.dgm-note .nk{font-family:var(--font-mono);color:var(--accent-bright);font-size:13px}
.dgm-note p{font-size:13px;color:var(--muted);line-height:1.65;margin:0;text-wrap:pretty}

/* ---------- feature groups & cards ---------- */
.grp{padding:54px 0 0}
.grp:first-of-type{padding-top:8px}
html[data-density="compact"] .grp{padding-top:36px}
.grp .gk{font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-bright);margin:0 0 10px}
.grp h3{font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.015em;margin:0 0 10px}
.grp .gd{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 10px;max-width:66ch;text-wrap:pretty}

.feat{border:1px solid var(--line-2);border-radius:var(--radius);background:var(--slate-2);padding:26px 28px;margin-top:18px}
html[data-density="compact"] .feat{padding:20px 22px;margin-top:14px}
.feat .fh{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap;margin:0 0 12px}
.feat h4{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0}
.path{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 13px;white-space:nowrap}
.fwhat{font-size:14.5px;color:var(--ink);line-height:1.65;margin:0;text-wrap:pretty}
.frow{display:grid;grid-template-columns:62px 1fr;gap:18px;padding-top:15px;border-top:1px solid var(--line);margin-top:15px}
@media(max-width:560px){.frow{grid-template-columns:1fr;gap:8px}}
.flbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding-top:4px}
.frow.why .flbl{color:var(--accent-bright)}
.fbody{min-width:0;display:flex;flex-direction:column;gap:10px}
.fbody p{font-size:13.5px;color:var(--muted);line-height:1.68;margin:0;text-wrap:pretty}
.frow.why .fbody p{color:var(--platinum)}
.fcode{display:block;font-family:var(--font-mono);font-size:12.5px;color:var(--platinum);background:var(--slate-3);border:1px solid var(--line);border-radius:8px;padding:11px 15px;white-space:pre-wrap;line-height:1.65;overflow-wrap:break-word}
html[data-formulas="subtle"] .fcode{background:transparent;border:0;padding:0 0 0 2px;color:var(--muted);font-size:12px}

/* roadmap steps */
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:grid;grid-template-columns:30px 1fr;gap:12px}
.step .sn{font-family:var(--font-mono);font-size:11px;color:var(--accent-bright);padding-top:3px}
.step .sb{min-width:0;display:flex;flex-direction:column;gap:7px}
.step .st{font-size:13.5px;font-weight:700;color:var(--ink);margin:0}
.step p{font-size:13px;color:var(--muted);line-height:1.62;margin:0;text-wrap:pretty}

/* ---------- formula table ---------- */
.ftable-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--slate-2)}
.ftable{width:100%;border-collapse:collapse;min-width:700px}
.ftable th{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:left;padding:15px 20px;border-bottom:1px solid var(--line-2);font-weight:400}
.ftable td{padding:12px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.ftable tbody:last-child tr:last-child td{border-bottom:0}
.ftable td.ta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);white-space:nowrap;padding-top:15px}
.ftable td.tm{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.ftable td.tf{font-family:var(--font-mono);font-size:12px;color:var(--platinum);line-height:1.6}
.ftable tbody.grpstart td{border-top:1px solid var(--line-2)}

/* ---------- cta band & doc note ---------- */
.ctaband{border:1px solid var(--accent);border-radius:var(--radius);background:var(--slate-2);box-shadow:0 0 0 1px var(--accent) inset,0 34px 80px -44px rgba(34,95,163,.9);padding:clamp(30px,4vw,48px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;margin:0 0 72px}
@media(max-width:760px){.ctaband{grid-template-columns:1fr}}
.ctaband h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 10px}
.ctaband p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0;max-width:52ch;text-wrap:pretty}
.ctaband .cbtns{display:flex;gap:12px;flex-wrap:wrap}
.docnote{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);line-height:1.8;letter-spacing:.02em;max-width:78ch;margin:0 0 84px}

/* compact density global tighteners */
html[data-density="compact"] .dochero{padding:64px 0 52px}
html[data-density="compact"] .fbody p,html[data-density="compact"] .fwhat{line-height:1.55}

/* anchors land below the sticky nav */
section[id]{scroll-margin-top:90px}