/* ============================================================
   audit.css
   Page-specific styles for /audit.html (Brand Intelligence Audit).
   Extracted from inline <style> block for WordPress portability.
   Depends on fastlane.css (design tokens: --orange, --ink, etc).
   ============================================================ */

/* ---------- HERO ---------- */
.audit-hero{ padding: 80px 0 100px 0;}
.audit-hero h1{ font-size: 220px; line-height: 0.9; letter-spacing:-0.04em; font-weight: 900; margin: 24px 0 0 0;}
.audit-hero h1 em{ font-style: normal; color: var(--orange);}
.audit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 64px;}
.audit-grid p{ font-size: 22px; line-height: 1.55; color: var(--ink-soft); max-width: 560px;}
.audit-grid .badges{ display:flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;}

/* ---------- AUDIT FORM CARD ---------- */
.form-card{ background:#fff; border:1px solid var(--rule); padding: 40px;}
.form-card .step-row{ display:flex; gap: 0; margin-bottom: 32px; border:1px solid var(--rule); border-radius: 0;}
.form-card .step-row .s{ flex:1; padding: 14px 18px; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--rule); display:flex; align-items:center; gap: 8px;}
.form-card .step-row .s:last-child{ border-right: 0;}
.form-card .step-row .s.active{ background: var(--orange); color:#fff;}
.form-card .step-row .s .n{
  /* 22×22 circle, locked against flex distortion on narrow viewports.
     Visual is unchanged at desktop — these are robustness constraints. */
  width: 22px; height: 22px;
  min-width: 22px; max-width: 22px;
  min-height: 22px; max-height: 22px;
  flex: 0 0 22px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
}
.form-card label{ display:block; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;}
.form-card input, .form-card select{ width: 100%; padding: 16px 18px; font-size: 16px; border: 1px solid var(--rule); background: var(--paper); font-family: inherit; color: var(--ink); margin-bottom: 22px;}
.form-card input:focus, .form-card select:focus{ outline: none; border-color: var(--orange); background: #fff;}
.form-card .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px;}
.form-card .submit-row{ display:flex; justify-content: space-between; align-items: center; margin-top: 8px;}
.form-card .skip{ font-family:"IBM Plex Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0.18em; color: var(--muted);}

/* ---------- "SIX DIMENSIONS" GRID ---------- */
.dims{ padding: 120px 0; background: var(--paper-2); border-top: 1px solid var(--rule-strong);}
.dim-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.dim{ background:#fff; padding: 28px; border: 1px solid var(--rule); display:flex; flex-direction: column; gap: 14px; position: relative;}
.dim .di{ display:flex; align-items: baseline; justify-content: space-between;}
.dim h4{ margin: 0; font-size: 26px; font-weight: 800; letter-spacing:-0.015em; line-height: 1.1;}
.dim .scale{ font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--orange);}
.dim p{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft);}
.dim ul{ list-style: none; padding: 0; margin: 4px 0 0 0; display:flex; flex-direction:column; gap: 6px; font-size: 13px; color: var(--ink-soft);}
.dim ul li::before{ content: "·"; color: var(--orange); margin-right: 8px; font-weight: 700;}

/* ---------- "HOW IT WORKS" STEPS ---------- */
.how-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; border:1px solid var(--rule);}
.how-step{ padding: 36px; border-right: 1px solid var(--rule); position: relative;}
.how-step:last-child{ border-right: 0;}
.how-step .num{ font-size: 88px; font-weight: 900; color: var(--orange); letter-spacing:-0.04em; line-height: 0.9;}
.how-step h5{ margin: 14px 0 8px 0; font-size: 22px; font-weight: 800; letter-spacing:-0.015em; line-height: 1.15;}
.how-step p{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft);}

/* ---------- SAMPLE RESULT PREVIEW ---------- */
.preview{ padding: 140px 0; background: var(--paper);}
.preview-card{ background: var(--ink); color:#fff; padding: 56px; display:grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center;}
.preview-card .pn{ font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.22em; color: rgba(255,255,255,0.55);}
.preview-card .big{ font-size: 200px; font-weight: 900; color: var(--orange); line-height: 0.85; letter-spacing:-0.04em;}
.preview-card .big .slash{ font-size: 64px; color: rgba(255,255,255,0.5);}
.preview-card p{ margin: 16px 0 0 0; font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.5;}
.pbars{ display:flex; flex-direction: column; gap: 10px;}
.pbar{ display:grid; grid-template-columns: 200px 1fr 40px; align-items: center; gap: 14px; font-size: 14px;}
.pbar .track{ height: 6px; background: rgba(255,255,255,0.12);}
.pbar .fill{ height: 100%; background: var(--orange); width: 0; transition: width 1400ms cubic-bezier(.2,.7,.2,1);}
.pbar .v{ text-align: right; font-weight: 700;}

/* ---------- CLOSING CTA ---------- */
.closing-cta{ background: var(--orange); color:#fff; padding: 140px 0;}
.closing-cta h2{ margin: 0; font-size: 132px; line-height: 0.92; letter-spacing:-0.03em; font-weight: 900; max-width: 1100px;}

/* ============================================================
   AUDIT MODAL — analyzing → results → error states
   ============================================================ */
.audit-modal{
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: #fff;
  overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity 320ms cubic-bezier(.2,.7,.2,1);
}
.audit-modal.open{ opacity: 1; pointer-events: auto;}
body.audit-open{ overflow: hidden;}
.audit-modal-inner{
  max-width: 1200px; margin: 0 auto;
  padding: 80px 64px 100px 64px;
  position: relative; min-height: 100%;
}
.audit-close{
  position: absolute; top: 24px; right: 32px;
  width: 48px; height: 48px;
  background: transparent; border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  transition: all 200ms;
}
.audit-close:hover{ background: var(--orange); border-color: var(--orange);}
.audit-monoline{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55);
  padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 56px;
}

/* ANALYZING STATE */
.analyzing-grid{
  display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: center;
}
.analyzing-circle{
  width: 240px; height: 240px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  background: conic-gradient(var(--orange) 0%, rgba(255,255,255,0.08) 0%);
  transition: background 400ms cubic-bezier(.2,.7,.2,1);
}
.analyzing-circle::before{
  content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--ink);
}
.ac-num{ position: relative; font-size: 64px; font-weight: 900; letter-spacing:-0.02em; line-height: 1;}
.ac-label{ position: relative; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--orange); margin-top: 8px;}
.analyzing-checks{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px;}
.analyzing-checks li{
  display: flex; align-items: center; gap: 18px;
  font-size: 18px; color: rgba(255,255,255,0.5);
  transition: color 320ms;
}
.analyzing-checks li .check{
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3); font-size: 14px;
  transition: all 300ms;
}
.analyzing-checks li.active{ color: #fff;}
.analyzing-checks li.active .check{ border-color: var(--orange); color: var(--orange); animation: spin 1s linear infinite;}
.analyzing-checks li.done{ color: #fff;}
.analyzing-checks li.done .check{ background: var(--orange); border-color: var(--orange); color: #fff; animation: none;}
@keyframes spin{ to { transform: rotate(360deg);} }
.analyzing-note{ margin-top: 48px; font-family:"IBM Plex Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.2em; color: rgba(255,255,255,0.4);}

/* RESULTS STATE */
.results-grid{
  display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: center;
  padding: 32px 0;
}
.results-big{
  font-size: 220px; font-weight: 900; color: var(--orange); line-height: 0.85; letter-spacing:-0.045em;
}
.results-out{ font-family:"IBM Plex Mono", Menlo, monospace; font-size: 16px; color: rgba(255,255,255,0.55); letter-spacing: 0.2em; margin-top: -8px;}
#results-context{ margin: 18px 0 0 0; font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.5; max-width: 360px;}

#results-bars .pbar{ color: rgba(255,255,255,0.85);}
#results-bars .pbar .track{ background: rgba(255,255,255,0.1);}
#results-bars .pbar .v{ color: #fff;}

.results-recs{
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.results-recs ol{
  list-style: none; padding: 0; margin: 0;
  counter-reset: recs;
  display: flex; flex-direction: column; gap: 20px;
}
.results-recs ol li{
  counter-increment: recs;
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.85);
}
.results-recs ol li::before{
  content: "0" counter(recs);
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 13px; letter-spacing: 0.22em; color: var(--orange); font-weight: 600;
}
.results-recs ol li strong{ color: #fff;}

.results-cta{
  margin-top: 48px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.results-cta button{ font-family: inherit; cursor: pointer;}
.results-cta .btn--ghost-light{ background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);}
.results-cta .btn--ghost-light:hover{ background: #fff; color: var(--ink); border-color: #fff;}

/* ERROR STATE */
.error-title{ font-size: 64px; font-weight: 900; letter-spacing:-0.02em; margin: 32px 0 16px 0;}
.error-body{ font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 0 32px 0;}

/* ============================================================
   STRATEGIC REVIEW (Tier II escalation)
   ============================================================ */
.strategic{
  background: var(--navy); color: #fff;
  padding: 140px 0 130px; position: relative;
}
.strategic .meta{
  display:flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.strategic .meta .ii{ color: var(--orange); font-weight: 600;}
.strategic h2{
  margin: 64px 0 0 0;
  font-size: 132px; font-weight: 900; letter-spacing:-0.035em; line-height: 0.92;
  max-width: 1280px; text-wrap: balance;
}
.strategic h2 em{ font-style: normal; color: var(--orange);}

.strategic .lede{
  display:grid; grid-template-columns: 1fr 420px; gap: 80px;
  margin-top: 72px; padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.strategic .lede .body{
  font-size: 22px; line-height: 1.55; color: rgba(255,255,255,0.82);
  max-width: 720px;
}
.strategic .lede .body p + p{ margin-top: 18px;}
.strategic .lede .body strong{ color: #fff; font-weight: 700;}

.strategic .ledger{
  border: 1px solid rgba(255,255,255,0.18);
  padding: 32px;
  display:flex; flex-direction:column; gap: 18px;
  background: rgba(255,255,255,0.02);
}
.strategic .ledger .row{
  display:grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.strategic .ledger .row:last-child{ border-bottom: 0; padding-bottom: 0;}
.strategic .ledger .k{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); padding-top: 4px;
}
.strategic .ledger .v{ color:#fff;}
.strategic .ledger .v strong{ display:block; font-size: 16px; font-weight: 700; letter-spacing:-0.005em;}
.strategic .ledger .v small{ display:block; font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; line-height: 1.4;}

.strategic .pillars-head{
  margin-top: 110px;
  display:grid; grid-template-columns: 220px 1fr; gap: 56px;
  align-items: baseline;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 40px;
}
.strategic .pillars-head .ph-l div + div{ color: rgba(255,255,255,0.45);}
.strategic .pillars-head h3{
  margin: 0; font-size: 60px; font-weight: 800;
  letter-spacing:-0.02em; line-height: 1.02;
  max-width: 920px; text-wrap: balance;
}
.strategic .pillars-head h3 em{ font-style: normal; color: var(--orange);}

.pillars{
  display:grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-left: 1px solid rgba(255,255,255,0.18);
}
.pillar{
  border-right: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 36px 36px 32px;
  display:flex; flex-direction: column; gap: 14px;
  min-height: 300px;
}
.pillar .rn{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.28em;
  color: var(--orange); font-weight: 600;
}
.pillar h4{
  margin: 0; font-size: 26px; font-weight: 800;
  letter-spacing:-0.015em; line-height: 1.1;
  color: #fff; text-wrap: balance;
}
.pillar p{
  margin: 0; font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.65);
}
.pillar .ask{
  margin-top: auto;
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1);
  line-height: 1.5;
}

.strategic .closing{
  margin-top: 96px;
  display:grid; grid-template-columns: 1fr 320px; gap: 80px;
  align-items: end;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.strategic .closing .pull{
  font-size: 34px; line-height: 1.22; font-weight: 600;
  letter-spacing:-0.015em; color: #fff;
  max-width: 820px; text-wrap: balance;
}
.strategic .closing .pull em{ font-style: normal; color: var(--orange);}
.strategic .closing .pull cite{
  display:block; margin-top: 22px;
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-style: normal;
}
.strategic .ctas{
  display:flex; flex-direction:column; gap: 12px;
  align-items: stretch;
}
.strategic .ctas .small{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.strategic .ctas .btn{ justify-content: center;}

/* MODAL: embedded escalation block inside results view */
.modal-strategic{
  margin-top: 56px;
  padding: 44px 48px 40px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.02);
  position: relative;
}
.modal-strategic::before{
  content:"II";
  position:absolute; top: 22px; right: 28px;
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.28em; color: var(--orange);
  font-weight: 600;
}
.modal-strategic .ms-eyebrow{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 20px;
}
.modal-strategic h3{
  margin: 0; font-size: 42px; font-weight: 800;
  letter-spacing:-0.02em; line-height: 1.05;
  max-width: 820px; text-wrap: balance;
}
.modal-strategic h3 em{ font-style: normal; color: var(--orange);}
.modal-strategic .ms-body{
  display:grid; grid-template-columns: 1fr 280px; gap: 56px;
  margin-top: 28px;
}
.modal-strategic .ms-body p{
  margin: 0; font-size: 17px; line-height: 1.55;
  color: rgba(255,255,255,0.78); max-width: 640px;
}
.modal-strategic .ms-meta{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display:flex; flex-direction:column; gap: 12px;
  padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.18);
}
.modal-strategic .ms-meta div strong{
  display:block; color:#fff; font-weight: 600;
  font-size: 13px; letter-spacing: 0.16em; margin-bottom: 2px;
}
.modal-strategic .ms-meta div span{
  display:block; color: rgba(255,255,255,0.5);
  text-transform: none; letter-spacing: 0.04em; font-size: 12px;
}
.modal-strategic .ms-cta{ margin-top: 28px; display:flex; gap: 12px; flex-wrap: wrap;}

/* Slim share row below the strategic block */
.results-share{
  margin-top: 36px;
  display:flex; justify-content: space-between; align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 14px; flex-wrap: wrap;
}
.results-share .label{
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.results-share .actions{ display:flex; gap: 10px; flex-wrap: wrap;}
.results-share .actions button{
  background: transparent; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22);
  font-family:"IBM Plex Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 18px; cursor: pointer; font-weight: 500;
  transition: all 200ms;
}
.results-share .actions button:hover{ background: #fff; color: var(--ink); border-color:#fff;}

/* ---------- MOBILE ---------- */
@media (max-width: 768px){
  .audit-modal-inner{ padding: 56px 20px 64px 20px;}
  .audit-close{ top: 14px; right: 16px;}
  .analyzing-grid{ grid-template-columns: 1fr; gap: 40px; justify-items: center;}
  .results-grid{ grid-template-columns: 1fr; gap: 32px;}
  .results-big{ font-size: 132px;}
  .results-recs ol li{ font-size: 16px;}

  .strategic{ padding: 90px 0;}
  .strategic h2{ font-size: 56px;}
  .strategic .lede{ grid-template-columns: 1fr; gap: 36px; margin-top: 48px;}
  .strategic .pillars-head{ grid-template-columns: 1fr; gap: 18px; margin-top: 72px;}
  .strategic .pillars-head h3{ font-size: 36px;}
  .pillars{ grid-template-columns: 1fr;}
  .pillar{ min-height: 0;}
  .strategic .closing{ grid-template-columns: 1fr; gap: 36px;}
  .strategic .closing .pull{ font-size: 26px;}

  .modal-strategic{ padding: 28px 24px;}
  .modal-strategic h3{ font-size: 28px;}
  .modal-strategic .ms-body{ grid-template-columns: 1fr; gap: 24px;}
  .modal-strategic .ms-meta{ padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18);}
}


/* =====================================================================
   PRINT — Fastlane Brand Intelligence Audit (downloadable PDF)
   Activated by JS: builds #aud-print-root + sets body.aud-print-mode,
   then calls window.print().
   ===================================================================== */

#aud-print-root { display: none; }

@media print {
  @page {
    size: Letter portrait;
    margin: 0.55in 0.6in 0.55in 0.6in;
  }

  /* In print mode, hide the entire live UI and show ONLY the print view. */
  body.aud-print-mode > *:not(#aud-print-root) { display: none !important; }
  body.aud-print-mode #aud-print-root { display: block !important; }

  /* Reset body chrome so print rendering is predictable */
  body.aud-print-mode {
    background: #fff !important;
    color: #1E2A38 !important;
    margin: 0 !important; padding: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ============================================================
     PRINT VIEW LAYOUT
     ============================================================ */
  .pv-page {
    width: 100%;
    color: #1E2A38;
    line-height: 1.45;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  /* Header band */
  .pv-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 9pt;
    border-bottom: 1.5pt solid #1E2A38;
    margin-bottom: 18pt;
  }
  .pv-brand {
    display: inline-flex; align-items: center;
    height: 18pt;
  }
  .pv-logo {
    height: 18pt; width: auto; display: block;
  }
  .pv-eyebrow {
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 8pt; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 600; color: #1E2A38;
  }
  .pv-orange { color: #FF4612 !important; }

  /* H1 */
  .pv-h1 {
    font-size: 34pt; line-height: 1.02;
    font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 18pt 0;
    color: #1E2A38;
  }

  /* Submission meta strip */
  .pv-meta {
    display: grid; grid-template-columns: 1fr 1fr 1.4fr;
    gap: 16pt;
    padding: 12pt 0;
    border-top: 0.5pt solid #C9C7C0;
    border-bottom: 0.5pt solid #C9C7C0;
    margin-bottom: 24pt;
  }
  .pv-meta > div { display: flex; flex-direction: column; gap: 3pt;}
  .pv-meta-k {
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 7pt; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; color: #FF4612;
  }
  .pv-meta-v {
    font-size: 10pt; font-weight: 600; color: #1E2A38;
    word-break: break-word;
  }

  /* Score block — composite + bars */
  .pv-score-block {
    display: grid; grid-template-columns: 1.05fr 1.4fr;
    gap: 24pt;
    margin-bottom: 22pt;
    page-break-inside: avoid;
  }
  .pv-score-left .pv-eyebrow,
  .pv-score-right .pv-eyebrow,
  .pv-recs .pv-eyebrow {
    font-size: 8pt; margin-bottom: 8pt; display: block;
  }
  .pv-score-big {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 86pt; line-height: 0.88; letter-spacing: -0.04em;
    font-weight: 800; color: #1E2A38;
    margin: 0;
  }
  .pv-score-out {
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 14pt; letter-spacing: 0.15em; color: #8A8A85;
    margin-left: 4pt; font-weight: 500;
  }
  .pv-context {
    margin: 10pt 0 0 0;
    font-size: 9.5pt; line-height: 1.5; color: #4a5360;
    max-width: 24em;
  }

  /* Bars table */
  .pv-bars { width: 100%; border-collapse: collapse; }
  .pv-bars tr { page-break-inside: avoid; }
  .pv-bars td {
    padding: 6pt 0;
    border-top: 0.5pt solid #ECECE8;
    vertical-align: middle;
  }
  .pv-bars tr:first-child td { border-top: 0;}
  .pv-bar-label {
    width: 38%;
    font-size: 9pt; font-weight: 600; color: #1E2A38;
    padding-right: 10pt !important;
  }
  .pv-bar-track {
    width: 52%;
    padding-right: 10pt !important;
  }
  .pv-bar-track > .pv-bar-fill {
    display: block; height: 7pt;
    background: #FF4612;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pv-bar-track {
    background: linear-gradient(to right, transparent 0%, transparent 100%);
  }
  .pv-bar-track {
    /* track underlay */
    position: relative;
  }
  .pv-bar-track::before {
    content: ""; display: block; height: 7pt;
    background: #ECECE8;
    border: 0.5pt solid #C9C7C0;
    width: 100%;
    position: absolute; top: 50%; transform: translateY(-50%);
  }
  .pv-bar-track > .pv-bar-fill {
    position: relative; z-index: 1;
  }
  .pv-bar-value {
    width: 10%; text-align: right;
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 10pt; font-weight: 700; color: #1E2A38;
  }

  /* Recommendations */
  .pv-recs {
    margin-top: 4pt;
    padding-top: 18pt;
    border-top: 1pt solid #1E2A38;
    page-break-inside: avoid;
  }
  .pv-recs-list {
    list-style: none; padding: 0; margin: 0;
  }
  .pv-recs-list li {
    display: grid;
    grid-template-columns: 28pt 1fr;
    gap: 10pt;
    padding: 10pt 0;
    border-top: 0.5pt solid #ECECE8;
    page-break-inside: avoid;
  }
  .pv-recs-list li:first-child { border-top: 0; padding-top: 6pt;}
  .pv-rec-num {
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 11pt; font-weight: 700; color: #FF4612;
  }
  .pv-rec-body {
    font-size: 10pt; line-height: 1.5; color: #1E2A38;
  }
  .pv-rec-body strong { color: #1E2A38; font-weight: 700; }
  .pv-rec-body span { color: #4a5360; }

  /* Escalation section — no box, clean type block */
  .pv-cta {
    margin-top: 22pt;
    padding-top: 18pt;
    border-top: 1pt solid #1E2A38;
    background: transparent;
    page-break-inside: avoid;
  }
  .pv-cta-eye {
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 7.5pt; letter-spacing: 0.22em; text-transform: uppercase;
    font-weight: 600; color: #FF4612;
    margin-bottom: 8pt;
  }
  .pv-cta h3 {
    font-size: 15pt; line-height: 1.18;
    font-weight: 800; letter-spacing: -0.01em;
    color: #1E2A38;
    margin: 0 0 8pt 0;
  }
  .pv-cta h3 em { font-style: normal; color: #FF4612;}
  .pv-cta p {
    font-size: 9.5pt; line-height: 1.5;
    color: #4a5360;
    margin: 0 0 10pt 0;
  }
  .pv-cta-meta {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10pt;
    margin-top: 10pt;
    font-size: 9pt; color: #1E2A38;
  }
  .pv-cta-meta > div { display: flex; flex-direction: column; gap: 2pt;}
  .pv-cta-meta span {
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 7pt; letter-spacing: 0.2em; text-transform: uppercase;
    font-weight: 600; color: #FF4612;
  }
  .pv-cta-link {
    margin-top: 12pt;
    padding-top: 10pt;
    border-top: 0.5pt solid #C9C7C0;
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 9pt; letter-spacing: 0.18em; text-transform: uppercase;
    font-weight: 600; color: #1E2A38;
  }

  /* Footer */
  .pv-foot {
    margin-top: 18pt;
    padding-top: 10pt;
    border-top: 0.5pt solid #C9C7C0;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16pt;
    font-family: "IBM Plex Mono", Menlo, monospace;
    font-size: 7pt; letter-spacing: 0.18em; text-transform: uppercase;
    color: #8A8A85;
    white-space: nowrap;
  }
  .pv-foot-l { flex: 0 0 auto; }
  .pv-foot-r { flex: 0 0 auto; text-align: right; }
}
