/* v3 content pages (use cases, audiences, integrations, lab, request a demo), ported from the launch-2026-10-22
   branch onto the Home J system. Loads after css/home-j.css and reuses its shell (banner, nav, footer, .wrap,
   .section, .btn, .h1/.h2, .lead). Tokens only: styles/actionstate-v2.css and styles/ds/tokens/. */

/* Sections: ink only (DESIGN.md §7 allows at most two paper bands, and these pages use none) */
.sub-hero{background:var(--ink-950);border-top:0}
.sub-hero > .wrap{padding-top:clamp(72px,10vw,128px)}
.section + .section--deep,.section--deep + .section{border-top:1px solid var(--hairline)}
.page .h1{font-size:var(--display-xl);line-height:1.02}
.page .h1,.page .h2{max-width:22ch}
.page .h2{margin-top:.5rem}
.page .lead{max-width:60ch;color:var(--fg-2)}
.page p{text-wrap:pretty}
.page main a:not(.btn){color:var(--amber-500)}
.page main a:not(.btn):hover{color:var(--amber-400)}
.page code{font-family:var(--font-mono);font-size:.92em;color:var(--cream)}

/* Labels: quiet sentence-case mono, never tracked caps (DESIGN.md §15: at most one kicker per three sections;
   these pages carry one on almost every section, so none of them are kickers). The hero's is the breadcrumb. */
.eyebrow{margin:0;font-family:var(--font-mono);font-size:14px;line-height:1.5;color:var(--fg-3)}
.sub-hero .eyebrow{color:var(--fg-2)}
.page main p,.page main li{max-width:60ch;text-wrap:pretty}
.page main .eyebrow a{color:inherit}
.muted{color:var(--fg-3)}
.prose{max-width:60ch}

/* Grids and tiles */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(24px,4vw,56px)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.tile{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-card);background:var(--ink-850);border:1px solid var(--hairline)}
.tile h3,.page article > h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.8vw,24px);line-height:1.2;letter-spacing:-.015em;color:var(--cream);text-wrap:balance}
.tile p{margin:0;font-size:var(--body-m);line-height:1.6;color:var(--fg-2)}
.tile .muted{color:var(--fg-3)}
.tile--link{color:inherit;transition:transform var(--dur-ui) var(--ease-out),border-color var(--dur-micro) ease-out,background-color var(--dur-micro) ease-out}
.page main a.tile--link{color:inherit}
.tile--link:hover{transform:translateY(-3px);border-color:var(--hairline-strong);background:var(--ink-800)}
.tile--link h3::after{content:" →";color:var(--amber-500)}
.page article{min-width:0}

/* Lists */
.pull-list,.page main ul:not([class]){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pull-list li,.page main ul:not([class]) > li{position:relative;padding-left:22px;font-size:17px;line-height:1.6;color:var(--fg-2)}
.pull-list li::before,.page main ul:not([class]) > li::before{content:"→";position:absolute;left:0;color:var(--amber-500);font-family:var(--font-mono)}
.page main ul:not([class]){margin-top:1rem}
.runs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.runs li{padding:14px 0;border-top:1px solid var(--hairline);font-size:var(--body-m);line-height:1.6;color:var(--fg-2)}
.runs li:last-child{border-bottom:1px solid var(--hairline)}

/* Status chips (DESIGN.md §12): runs today = ok wash; preview = neutral outline; planned = amber outline */
.status{display:inline-block;margin-right:10px;font-family:var(--font-mono);font-size:var(--label);line-height:1.5;padding:2px 10px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent}
.status--live{background:var(--ok-wash-ink);color:var(--ok-on-ink)}
.status--live::before{content:"✓ "}
.status--preview{border-color:var(--hairline-strong);color:var(--fg-2)}
.status--planned{border-color:color-mix(in srgb,var(--amber-500) 60%,transparent);color:var(--amber-400)}

/* Buttons and arrows */
.btn--sm{min-height:44px;padding:0 18px;font-size:14px}
.arrow{font-family:var(--font-mono);margin-left:.2em}

/* Code */
.cmd{margin:0;padding:14px 18px;border-radius:var(--radius-input);background:var(--surface-terminal);color:var(--text-on-dark);font-family:var(--font-data);font-size:var(--text-sm);line-height:1.7;overflow-x:auto;white-space:pre}
.cmd .c{color:var(--slate-400)}

/* Table (integrations) */
.table-scroll{overflow-x:auto;border-radius:var(--r-tile);border:1px solid var(--hairline)}
.rows{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;color:var(--fg-2)}
.rows th,.rows td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline)}
.rows thead th{border-top:0;font-family:var(--font-mono);font-weight:400;font-size:var(--label);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-3);background:var(--ink-850)}
.rows tbody th{font-family:var(--font-mono);font-weight:500;color:var(--cream);white-space:nowrap}
@media (max-width:700px){
  .rows thead{display:none}
  .rows,.rows tbody,.rows tr,.rows th,.rows td{display:block;width:100%}
  .rows tr{padding:8px 0;border-top:1px solid var(--hairline)}
  .rows tr:first-child{border-top:0}
  .rows th,.rows td{border-top:0;padding:6px 18px}
  .rows td[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-3)}
}

/* Callout: the honest-limit note, drawn like Home J's quote (2px amber left rule, no box) */
.callout{padding-left:20px;border-left:2px solid var(--amber-500)}
.callout p{margin:0;font-size:17px;line-height:1.6;color:var(--cream)}

/* Lead form (request a demo); same fields and behavior as contact.html's, on ink */
.lead-form{display:flex;flex-direction:column;gap:18px;max-width:44rem}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;color:var(--cream)}
.opt{color:var(--fg-3)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r-input);border:1px solid var(--hairline-strong);background:var(--ink-850);color:var(--cream);font:inherit;font-size:16px;transition:border-color var(--dur-micro) ease-out}
.field textarea{min-height:140px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--fg-4)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--amber-500);outline-offset:1px;border-radius:var(--r-input)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px;color:var(--fg-2)}
.consent input{width:20px;height:20px;accent-color:var(--amber-500)}
.lead-form-status{margin:0;font-size:15px;color:var(--fg-2)}
.lead-form-status:empty{display:none}

/* Old-template pages ported in [site-old-pages-to-v3] (news, press, packs, countersign, about, contact): the components
   they took from css/site.css, redrawn in v3 tokens. Page-local <style> blocks stay on their pages. Every rule here is
   scoped to body.page--ported (set by the converter): for-builders.html already uses .card-tag and for-enterprises /
   use-cases have bare headings, and none of them may change. */
.page--ported main h2:not([class]),.page--ported main h3:not([class]){margin:0;font-family:var(--font-display);font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--cream);text-wrap:balance}
.page--ported .card-tag{font-family:var(--font-mono);font-size:var(--body-s);color:var(--fg-3)}
/* news.html titles read as headings, linked or not (its page-local .news-title a{color:inherit}) */
.page--ported .news-title{color:var(--cream);text-wrap:balance}
.page--ported main .news-title a{color:inherit}
.page--ported .stamps{display:grid;gap:20px}
@media (min-width:860px){.page--ported .stamps{grid-template-columns:repeat(3,1fr)}}
.page--ported .stamp{display:grid;gap:10px;align-content:start;padding:20px;border-radius:var(--r-card);background:var(--ink-850);border:1px solid var(--hairline)}
.page--ported .stamp-pic{width:88px;height:88px}
.page--ported .stamp-mark{display:inline-flex;align-items:center;gap:.5em;width:fit-content;padding:.4em .75em;border-radius:6px;font-family:var(--font-mono);font-size:var(--body-s);line-height:1.45}
.page--ported .stamp-mark--self{border:1px dashed var(--fg-3);color:var(--fg-3)}
.page--ported .stamp-mark--hollow{border:1.5px solid var(--cream);color:var(--cream)}
.page--ported .stamp-mark--signed{border:1.5px solid var(--amber-500);background:color-mix(in srgb,var(--amber-500) 14%,transparent);color:var(--amber-500)}
.page--ported .stamp h3{font-size:clamp(20px,1.8vw,24px)}
.page--ported .stamp p{margin:0;font-size:var(--body-s);color:var(--fg-2)}
.page--ported .layer{padding:24px;border-radius:var(--r-card);background:var(--ink-850);border:1px solid var(--hairline)}
.page--ported .layer p{margin:0}
.page--ported .layer .layer-k{font-family:var(--font-mono);font-size:var(--body-s);color:var(--amber-500)}
.page--ported .rows td.n{font-family:var(--font-mono);white-space:nowrap}
/* packs.html sizes its rows small inside a tile; .tile p would otherwise win */
.page--ported .tile .pk-when,.page--ported .tile .pk-is p,.page--ported .tile .pk-tier .muted{font-size:var(--body-s)}
.page--ported .tile .pk-arts{font-size:13px;color:var(--fg-3)}
/* batch 2: how-judging-works, deal-room, paid-inference size their section heads with a page-local .pi-h2 */
.page--ported .pi-h2{font-family:var(--font-display);font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--cream);text-wrap:balance}
/* demos.html: the same .tile p override as packs */
.page--ported .tile .dm-meta{font-size:.75rem}
.page--ported .tile .dm-verify,.page--ported .tile .dm-q{font-size:var(--body-s)}
/* Home J buttons never wrap; evidence-report has one label longer than a 390px screen (body.page--btn-wrap, set by the converter) */
@media (max-width:480px){.page--ported.page--btn-wrap main .btn{white-space:normal;text-align:center}}

.anchor-offset{scroll-margin-top:var(--nav-h)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}