/* BlackSig Systems — capture-page body styling. The single source of truth for the
   in-theme building blocks a case study / offer / article page needs on top of the
   shared chrome. Pair it with brand.css (tokens + atmosphere/nav/footer/stat/card):
     <link rel="stylesheet" href="/brand.css">
     <link rel="stylesheet" href="/capture.css">
   Everything here reads from the design tokens, so a new page inherits the full
   BlackSig theme (dark aesthetic, Oxanium/Sora/JetBrains Mono, violet/cyan/amber)
   automatically. Do NOT add per-page <style> blocks — extend this file instead so
   every capture page stays consistent. */

/* ===== Page container =====
   STANDARD CONTENT WIDTH — HARD RULE: every capture page uses the wide container
   (~80% of viewport, max 1220px). .page and .page-wide resolve to the SAME standard
   width so no page can ship a narrow (~50%) column. Do not reintroduce a narrower
   .page — width is standardized across the whole site. */
.page,.page-wide{max-width:1220px;margin:0 auto;padding:0 40px}

/* ===== Breadcrumb ===== */
.crumb{font-family:var(--fm);font-size:11px;letter-spacing:.08em;color:var(--gray2);text-transform:uppercase;margin-bottom:26px;display:flex;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--gray);text-decoration:none;transition:.2s}
.crumb a:hover{color:var(--cyan)}
.crumb .sep{color:var(--gray3)}

/* ===== Capture hero ===== */
.cap-hero{padding:150px 0 46px;position:relative}
.cap-hero .eyebrow{margin-bottom:20px}
.cap-title{font-family:var(--fd);font-weight:700;font-size:clamp(34px,5.2vw,64px);line-height:1.03;letter-spacing:-.025em;color:var(--white)}
.cap-title em{font-style:normal;background:linear-gradient(120deg,var(--vl),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cap-sub{font-size:clamp(16px,1.8vw,20px);font-weight:300;color:var(--gray);line-height:1.7;margin-top:24px;max-width:680px}
.cap-sub .hl{color:var(--white)}
.cap-meta{margin-top:28px;display:flex;gap:20px;flex-wrap:wrap;font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--gray2);text-transform:uppercase}
.cap-meta b{color:var(--cl);font-weight:500}

/* ===== TL;DR / summary callout ===== */
.tldr{margin:8px 0 44px;padding:24px 26px;border:1px solid var(--line2);border-left:2px solid var(--cyan);background:linear-gradient(120deg,rgba(34,211,238,.06),transparent);border-radius:0 8px 8px 0}
.tldr h2{font-family:var(--fd);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cl);margin-bottom:10px}
.tldr p{font-size:14.5px;font-weight:300;color:var(--gray);line-height:1.75}

/* ===== Prose content sections ===== */
.prose{padding:6px 0 20px}
.prose > section{padding:26px 0}
.prose h2{font-family:var(--fd);font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.02em;color:var(--white);margin:44px 0 18px}
.prose h3{font-family:var(--fd);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--white);margin:32px 0 12px}
.prose p{font-size:16px;font-weight:300;color:var(--gray);line-height:1.85;margin-bottom:18px}
.prose strong{color:var(--white);font-weight:500}
.prose a{color:var(--cl);text-decoration:none;border-bottom:1px solid var(--gray3);transition:.2s}
.prose a:hover{color:var(--cyan);border-color:var(--cyan)}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:22px}
.prose li{font-size:16px;font-weight:300;color:var(--gray);line-height:1.8;margin-bottom:9px}
.prose li::marker{color:var(--cyan)}
.prose blockquote{margin:26px 0;padding:20px 24px;border-left:2px solid var(--violet);background:var(--panel);border-radius:0 8px 8px 0;font-size:17px;color:var(--white);font-weight:300;line-height:1.7}
.prose code{font-family:var(--fm);font-size:13px;color:var(--al);background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.prose hr{border:none;border-top:1px solid var(--line);margin:44px 0}

/* ===== Native HTML tables (comparison / factor tables — the citable elements).
   Always native <table>, never images. Wrap each in <div class="table-wrap"> so
   wide tables scroll on narrow screens instead of breaking the layout. ===== */
.table-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--line2);border-radius:10px;background:var(--panel);-webkit-overflow-scrolling:touch}
.prose .table-wrap{margin:26px 0}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.55}
.prose thead th{font-family:var(--fd);font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--white);text-align:left;background:var(--panel2);padding:13px 16px;border-bottom:1px solid var(--line2);vertical-align:bottom}
.prose tbody td{padding:12px 16px;color:var(--gray);border-bottom:1px solid var(--line);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody td:first-child{color:var(--white)}
.prose table strong{color:var(--white);font-weight:600}

/* ===== Image / screenshot blocks ===== */
.cap-figure{margin:36px 0}
.cap-figure img,.cap-img{width:100%;height:auto;display:block;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.cap-figure figcaption{font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--gray2);margin-top:12px;text-align:center}
/* Two-up figure row — pairs of images (e.g. physical-workflow photos) side by side. */
.cap-figure-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0}
.cap-figure-row .cap-figure img{object-fit:cover}
@media(max-width:680px){.cap-figure-row{grid-template-columns:1fr}}

/* ===== Metric callout row — reuses the shared .stat component ===== */
/* 5-up stat row for wider case-study layouts. Collapses responsively (inline grid
   columns would beat the media queries, so it lives here as a class). */
.stat-row-5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:12px 0 6px}
.stat-row-5 .stat-n{font-size:clamp(22px,2.1vw,30px)}
.stat-row-5 .stat:nth-child(5) .stat-n{color:var(--cl)}
@media(max-width:980px){.stat-row-5{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stat-row-5{grid-template-columns:1fr}}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:38px 0}
.metric-row.two{grid-template-columns:repeat(2,1fr)}
.metric-row.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:680px){.metric-row,.metric-row.two,.metric-row.four{grid-template-columns:1fr 1fr}}

/* ===== FAQ accordion — HARD RULE: FAQ answers use native <details class="faq">.
   Native disclosure means the answer text stays in the server-rendered HTML (crawlable
   and citable by Google + AI LLMs) while collapsing by default so it doesn't crowd the
   page. Always pair with FAQPage JSON-LD (the authoritative machine-readable copy). ===== */
.prose details.faq{border-bottom:1px solid var(--line)}
.prose details.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--fd);font-weight:600;font-size:clamp(16px,2vw,19px);line-height:1.35;color:var(--white);transition:color .2s}
.prose details.faq summary::-webkit-details-marker{display:none}
.prose details.faq summary::after{content:'+';font-family:var(--fm);font-weight:400;font-size:22px;line-height:1;color:var(--gray2);transition:transform .25s,color .25s;flex:0 0 auto}
.prose details.faq summary:hover{color:var(--cl)}
.prose details.faq[open] summary{color:var(--cl)}
.prose details.faq[open] summary::after{transform:rotate(45deg);color:var(--cl)}
.prose details.faq > p{margin:0 0 20px;padding-right:34px}

/* ===== Proof / CTA band ===== */
.cta-band{margin:60px 0 0;padding:56px 40px;text-align:center;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;z-index:5}
.cta-band h2{font-family:var(--fd);font-weight:700;font-size:clamp(26px,3.6vw,42px);line-height:1.08;letter-spacing:-.02em;color:var(--white)}
.cta-band h2 em{font-style:normal;background:linear-gradient(120deg,var(--vl),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-band p{font-size:16px;font-weight:300;color:var(--gray);line-height:1.7;max-width:520px;margin:16px auto 0}
.cta-band .cta-btns{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ===== responsive ===== */
@media(max-width:880px){
  .page,.page-wide{padding:0 22px}
  .cap-hero{padding:120px 0 36px}
  .cta-band{padding:44px 22px}
}