/* Ventrique brand (brand/brand-kit-brief.md). Colour never the sole signal — verdicts pair icon+text. */
:root {
  --ink: #14233a;
  --veld: #15663f; /* AA-fixed CTA green for white text */
  --amber: #c2750b; /* caution — always with icon+text */
  --clay: #b23b3b; /* true errors only */
  --pivot: #29527a; /* PIVOT verdict — always with icon+text */
  --charcoal: #1b2230;
  --slate: #5b6577;
  --mist: #e4e8ef;
  --cloud: #f6f8fb;
  --radius: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--charcoal); background: var(--cloud); line-height: 1.55; }
h1, h2, h3, .brand { font-family: "Space Grotesk", Inter, sans-serif; color: var(--ink); }
.accent { color: var(--veld); }
.nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--mist); position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 700; font-size: 1.25rem; }
.nav-cta { color: var(--ink); text-decoration: none; font-weight: 600; }
main { max-width: 880px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; border-bottom: 1px solid var(--mist); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; margin: 0 0 16px; }
.lede { font-size: 1.15rem; color: var(--slate); max-width: 60ch; }
.microcopy { color: var(--slate); font-size: 0.9rem; }
.btn { display: inline-block; border: 0; border-radius: var(--radius); padding: 14px 22px; font: 600 1rem Inter, sans-serif; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--veld); color: #fff; }
.btn.primary:hover { background: #11593a; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why .lede { max-width: 70ch; }
.presell-includes { margin: 8px 0 20px; padding-left: 20px; color: var(--slate); }
.presell-includes li { margin: 4px 0; }
.step .num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-family: "JetBrains Mono", monospace; }
.tiers, .row { display: grid; gap: 16px; }
.tiers { grid-template-columns: repeat(3, 1fr); }
.tier { background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 20px; }
.tier .price { font-family: "Space Grotesk"; font-size: 1.4rem; color: var(--veld); margin: 4px 0; }
.presell { background: #fff; border-radius: var(--radius); padding: 28px; margin: 24px 0; }
.row { grid-template-columns: 1fr auto; align-items: center; }
form label { display: block; margin: 14px 0 4px; font-weight: 600; }
textarea, input[type="email"] { width: 100%; padding: 12px; border: 1px solid var(--mist); border-radius: 10px; font: inherit; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; }
.result { margin-top: 24px; background: #fff; border: 1px solid var(--mist); border-radius: var(--radius); padding: 24px; max-width: 68ch; }
.result p { line-height: 1.65; }
.verdict-badge { display: inline-flex; gap: 8px; align-items: center; font-family: "Space Grotesk"; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.v-GO { background: #e7f1ec; color: var(--veld); }
.v-CONDITIONAL_GO { background: #f7eedd; color: var(--amber); }
.v-PIVOT { background: #e6eef7; color: var(--pivot); }
.v-NO_GO { background: #f6e7e7; color: var(--clay); }
.result h3 { margin: 18px 0 6px; }
.evidence { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; color: var(--slate); }
.disclaimer { margin-top: 18px; padding: 12px; background: var(--cloud); border-left: 3px solid var(--amber); font-size: 0.85rem; color: var(--slate); }
footer { text-align: center; color: var(--slate); padding: 28px 20px; font-size: 0.85rem; }
@media (max-width: 640px) { .how, .tiers { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; } }

/* VerdictV2 layered renderer */
.vv2-one-line { margin: 12px 0 8px; }
.vv2-plain { margin: 16px 0; padding: 14px 16px; background: var(--cloud); border-left: 3px solid var(--veld); border-radius: 8px; }
.vv2-plain-title { margin: 0 0 8px; font-family: "Space Grotesk", Inter, sans-serif; font-size: 0.95rem; color: var(--ink); }
.vv2-plain p { margin: 0 0 10px; }
.vv2-plain p:last-child { margin-bottom: 0; }
.vv2-dim-rationale p { margin: 4px 0; }
.vv2-top-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 14px; }
.vv2-stat { background: var(--cloud); border: 1px solid var(--mist); border-radius: 8px; padding: 6px 12px; font-size: 0.95rem; }
.vv2-conditions { margin: 10px 0; }
.vv2-conditions ul { margin: 4px 0 0 16px; }
.vv2-clash { border-left: 3px solid var(--mist); padding-left: 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.vv2-clash-row { display: flex; gap: 8px; align-items: flex-start; }
.vv2-clash-label { font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.vv2-prosecution { background: #f6e7e7; color: var(--clay); }
.vv2-defense { background: #e7f1ec; color: var(--veld); }
.vv2-kill-test { margin: 12px 0; background: var(--cloud); border: 1px solid var(--mist); border-radius: 8px; padding: 10px 14px; }
.vv2-details { margin: 8px 0; border: 1px solid var(--mist); border-radius: 8px; overflow: hidden; }
.vv2-summary { padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; background: var(--cloud); }
.vv2-summary::-webkit-details-marker { display: none; }
.vv2-summary::before { content: "▶ "; font-size: 0.75em; }
details[open] .vv2-summary::before { content: "▼ "; }
.vv2-details-body { padding: 12px 14px; }
.vv2-scorecard { display: flex; flex-direction: column; gap: 10px; }
.vv2-dim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vv2-dim-name { font-weight: 600; min-width: 120px; }
.vv2-chip { font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.vv2-chip-strong { background: #e7f1ec; color: var(--veld); }
.vv2-chip-moderate { background: #f7eedd; color: var(--amber); }
.vv2-chip-weak { background: #f6e7e7; color: var(--clay); }
.vv2-chip-conf { font-size: 0.78rem; }
.vv2-dim-rationale { width: 100%; margin: 2px 0 0; }
.vv2-transcript { padding-left: 18px; }
.vv2-transcript li { margin-bottom: 10px; }
.vv2-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.vv2-dl dt { font-weight: 600; color: var(--slate); font-size: 0.9rem; }
.vv2-dl dd { margin: 0; }
.vv2-assumptions { padding-left: 18px; }
.vv2-assumptions li { margin-bottom: 10px; }
.vv2-premortem { padding-left: 18px; }
.vv2-founder-pack { margin: 12px 0; }

/* ── J4/J5a: playbook checklist + pack state + outcome logging (issue #75) ── */
.pb-section { margin: 16px 0; padding: 14px 16px; background: #fff; border: 1px solid var(--mist); border-radius: 8px; }
.pb-heading { margin: 0 0 8px; font-family: "Space Grotesk", Inter, sans-serif; font-size: 1rem; color: var(--ink); }
.pb-packstate { margin-top: 0; }
.pb-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pb-item { padding: 12px 14px; border: 1px solid var(--mist); border-radius: 8px; }
.pb-title { display: block; margin-bottom: 6px; }
.pb-pill { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--cloud); color: var(--ink); }
.pb-pill-PASSED { background: #e3f3ea; color: var(--veld); }
.pb-pill-KILLED { background: #f7e6e6; color: var(--clay); }
.pb-pill-INCONCLUSIVE { background: #fdf1e0; color: var(--amber); }
.pb-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.pb-form label { font-size: 0.9rem; font-weight: 600; color: var(--slate); }
.pb-form select, .pb-form input, .pb-form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--mist); border-radius: 8px; }
.pb-error { color: var(--clay); }

/* ── Print / Save-as-PDF ─────────────────────────────────────────────── */
#print-report { display: none; }

@media print {
  @page { margin: 18mm; }

  /* Hide everything except the report container */
  body > *:not(#print-report) { display: none !important; }

  #print-report {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.6;
    color: #111;
    background: #fff;
  }

  /* Headings */
  #print-report h1 {
    font-size: 18pt;
    font-family: "Space Grotesk", Inter, sans-serif;
    margin: 0 0 6pt;
    page-break-after: avoid;
    border-bottom: 1.5pt solid #14233a;
    padding-bottom: 4pt;
  }
  #print-report h2 {
    font-size: 13pt;
    font-family: "Space Grotesk", Inter, sans-serif;
    margin: 16pt 0 4pt;
    page-break-after: avoid;
  }
  #print-report h3 {
    font-size: 11pt;
    font-family: "Space Grotesk", Inter, sans-serif;
    margin: 10pt 0 3pt;
    page-break-after: avoid;
  }

  /* Body text */
  #print-report p { margin: 0 0 7pt; orphans: 3; widows: 3; }

  /* Lists */
  #print-report ul { margin: 0 0 7pt 16pt; padding: 0; }
  #print-report li { margin-bottom: 3pt; }

  /* Horizontal rule */
  #print-report hr { border: none; border-top: 0.75pt solid #ccc; margin: 12pt 0; }

  /* Tables */
  #print-report table.md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8pt 0 10pt;
    font-size: 9.5pt;
    break-inside: avoid;
  }
  #print-report table.md-table th,
  #print-report table.md-table td {
    border: 0.5pt solid #bbb;
    padding: 4pt 6pt;
    text-align: left;
    vertical-align: top;
  }
  #print-report table.md-table thead tr { background: #f0f0f0; }

  /* Keep sections together where possible */
  #print-report section { break-inside: avoid; }
}

/* Intake wizard */
.wizard-card { max-width: 640px; margin: 1rem auto; padding: 1.5rem; border: 1px solid var(--mist); border-radius: 12px; background: #fff; }
.wizard-progress { height: 6px; background: #eee; border-radius: 3px; margin-bottom: 1rem; }
.wizard-progress-bar { height: 100%; width: 0%; background: var(--veld); border-radius: 3px; transition: width .3s ease; }
.wizard-question { font-size: 1.15rem; font-weight: 600; margin: .25rem 0 .75rem; }
.wizard-probe { margin: -.25rem 0 .75rem; }
.wizard-input { width: 100%; padding: .6rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
.wizard-actions { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.wizard-options { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 .75rem; }
.wizard-option { display: block; width: 100%; text-align: left; background: #fff; border: 2px solid var(--mist); border-radius: 10px; padding: .65rem 1rem; font: inherit; cursor: pointer; color: var(--ink); transition: border-color .15s, background .15s; }
.wizard-option:hover { background: var(--cloud); border-color: var(--slate); }
.wizard-option.selected { border-color: var(--veld); background: #f0f8f4; }
.wizard-option.selected::before { content: "✓ "; color: var(--veld); font-weight: 700; }
.wizard-typeown-link { background: none; border: none; padding: 0; font: inherit; font-size: .88rem; color: var(--slate); text-decoration: underline; cursor: pointer; margin-bottom: .5rem; }
.wizard-typeown-link:hover { color: var(--ink); }
.consent { display: block; margin: .5rem 0; font-size: .9rem; }
.wizard-upload-input { display: none; }
.wizard-upload-link { text-decoration: underline; cursor: pointer; }

.wizard-suggest-header { margin: 6px 0 2px; }
.wizard-suggestion { border-style: dashed; }
.wizard-suggestion.selected { border-style: solid; }

.vv2-path { border-left-color: var(--amber); }
.vv2-path-list { margin: 0; padding-left: 20px; }
.vv2-path-list li { margin: 6px 0; line-height: 1.6; }

/* PAY-002: replica of PayFast's onsite engine.css. The engine injects that stylesheet from
   payment.payfast.io (live) / sandbox.payfast.co.za (sandbox), but in real browsers the sheet
   arrives unusable (0 effective rules; server-side fetches of the same URL return clean CSS —
   same browser-vs-server split as the /eng/process 500s, PayFast edge behavior, ticketed).
   Without its one modal rule the container computes position:static and the payment panel
   renders in-flow at the page bottom, and the iframe's 100%-height collapses to 150px, breaking
   its internal hit-targets (Cancel). Shipping the rules same-origin makes the modal independent
   of PayFast's edge; if their sheet ever loads too, the rules are identical (ours wins ties only
   on z-index, deliberately raised above page chrome). The engine shows/hides via inline
   style.display, which overrides the display:none here, and removes the container on close. */
.payfast_compact_payment_modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
body:has(#payfast_div_container) { overflow: hidden; position: relative; }