<!DOCTYPE html>
<!--
  MESSAGING AUDIT REPORT TEMPLATE (Firebrand branded)
  How to use: copy this file, then replace every {{TOKEN}} and every block marked
  <!-- FILL -->. Duplicate the example rows/cards as many times as you need.
  Keep the Firebrand voice in all prose (references/brand-and-voice.md): no em dashes,
  sentence case, straight quotes, warm and direct, no hype words.
  Reproduce quotes from the client's assets verbatim.
  To re-skin for a different brand later, edit only the BRAND TOKENS block below.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Messaging Audit, {{BRAND_NAME}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&family=Caveat:wght@600&display=swap" rel="stylesheet">
<style>
  /* ---------- BRAND TOKENS (edit here to re-skin) ---------- */
  :root{
    --bg:#FCFCFA; --panel:#EEF3F2; --ink:#1B1C1B; --muted:#5F635F; --line:#E4E7E5;
    --pink:#DB3F6E; --pink-deep:#B82E58; --pink-soft:#FBE4EC;
    --teal:#2F9CA0; --teal-deep:#1F6F74; --teal-soft:#E7F2F1;
    --amber:#C9861F; --amber-soft:#FBEED6;
    --grey-soft:#ECEDEB;
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --mono:'Space Grotesk','Inter',sans-serif;
    --hand:'Caveat','Segoe Script',cursive;
  }
  /* ---------- base ---------- */
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:900px;margin:0 auto;padding:0 28px 72px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em}
  .accent{color:var(--pink);font-style:italic}
  .eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;
    font-size:12px;color:var(--pink);font-weight:600}
  a{color:var(--pink-deep)}
  table{border-collapse:collapse;width:100%}

  /* ---------- cover ---------- */
  .cover{padding:56px 0 34px;border-bottom:1px solid var(--line)}
  .cover h1{font-size:44px;margin:14px 0 10px}
  .meta{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
  .meta b{color:var(--ink);font-weight:600}

  /* ---------- section shell ---------- */
  section{padding:38px 0;border-bottom:1px solid var(--line)}
  section:last-of-type{border-bottom:0}
  .snum{font-family:var(--mono);font-size:12px;color:var(--teal-deep);
    letter-spacing:.14em;text-transform:uppercase;font-weight:600}
  h2{font-size:27px;margin:6px 0 16px}
  p{margin:0 0 14px}
  .lead{font-size:18px}

  /* ---------- scorecard ---------- */
  .scorecard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:22px 24px;margin:8px 0 6px}
  .read{font-family:var(--serif);font-size:19px;margin:0 0 18px}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
    border-radius:999px;padding:6px 13px 6px 10px;font-size:13.5px}
  .dot{width:10px;height:10px;border-radius:50%;flex:none}
  .legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding-top:14px;
    border-top:1px dashed var(--line);font-family:var(--mono);font-size:11.5px;
    text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .legend span{display:flex;align-items:center;gap:7px}

  /* rating colors */
  .aligned{--c:var(--teal);--cs:var(--teal-soft)}
  .drifting{--c:var(--amber);--cs:var(--amber-soft)}
  .contradictory{--c:var(--pink);--cs:var(--pink-soft)}
  .absent{--c:var(--muted);--cs:var(--grey-soft)}
  .dot.aligned,.dot.drifting,.dot.contradictory,.dot.absent{background:var(--c)}

  .badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.07em;color:#fff;background:var(--c);
    border-radius:6px;padding:3px 9px;vertical-align:middle}

  /* ---------- matrix ---------- */
  .matrix-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
  table.matrix{font-size:13.5px;min-width:640px}
  table.matrix th,table.matrix td{text-align:left;padding:11px 13px;vertical-align:top;
    border-bottom:1px solid var(--line)}
  table.matrix thead th{background:var(--teal-deep);color:#fff;font-family:var(--mono);
    font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
    position:sticky;top:0}
  table.matrix tbody th{font-family:var(--sans);font-weight:600;background:var(--panel);
    white-space:nowrap}
  table.matrix tr:last-child td,table.matrix tr:last-child th{border-bottom:0}
  .absent-cell{color:var(--muted);font-style:italic}

  /* ---------- findings ---------- */
  .finding{background:#fff;border:1px solid var(--line);border-left:5px solid var(--c);
    border-radius:10px;padding:16px 18px;margin:0 0 12px}
  .finding h3{font-size:17px;margin:0 0 8px;display:flex;align-items:center;gap:10px}
  .evidence{background:var(--cs);border-radius:8px;padding:11px 14px;font-size:14px;margin:8px 0}
  .evidence .q{display:block;margin:3px 0}
  .sowhat{font-size:14.5px;color:var(--muted);margin:6px 0 0}

  /* ---------- gaps ---------- */
  .gap{border:1px solid var(--line);border-radius:10px;padding:13px 16px;margin:0 0 10px;background:#fff}
  .gaptype{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;
    letter-spacing:.06em;color:var(--pink-deep);background:var(--pink-soft);
    border-radius:6px;padding:3px 9px;display:inline-block;margin-bottom:7px}

  /* ---------- priority cards ---------- */
  .fix{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:16px 18px;margin:0 0 12px}
  .rank{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--pink);
    line-height:1;min-width:38px}
  .fix-body{flex:1}
  .fix-body h3{font-size:16px;margin:0 0 5px}
  .fix-meta{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
    letter-spacing:.06em;color:var(--muted);margin-top:9px;display:flex;gap:16px;flex-wrap:wrap}
  .fix-meta b{color:var(--ink)}

  /* ---------- your strategic take (dark-teal feature block) ---------- */
  .hi{background:var(--teal-deep);color:#fff;border-radius:16px;padding:30px 30px 26px;margin:6px 0}
  .hi .eyebrow{color:#8fd6d3}
  .hi h2{color:#fff;margin:8px 0 8px}
  .hi p.intro{color:#d7ecec;margin-bottom:18px}
  .hi ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
  .hi li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:10px;padding:13px 16px}
  .hi li b{color:#fff}
  .hi li span{color:#cfe7e7}

  /* ---------- next step + footer ---------- */
  .nextstep{background:var(--pink-soft);border-radius:12px;padding:20px 22px}
  .nextstep h2{margin-top:0}
  .hand{font-family:var(--hand);font-size:22px;color:var(--teal-deep)}
  footer{padding-top:26px;font-size:12.5px;color:var(--muted);line-height:1.5}
  .brandmark{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink)}
  .brandmark .spark{color:var(--pink)}

  @media print{body{font-size:12px}.hi{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    section{padding:22px 0}.wrap{padding-bottom:20px}}
</style>
</head>
<body>
<div class="wrap">

  <!-- ===================== COVER ===================== -->
  <header class="cover">
    <div class="eyebrow">Messaging audit</div>
    <h1>{{BRAND_NAME}}: <span class="accent">what to fix first</span></h1>
    <div class="meta">Prepared by <b>{{PREPARED_BY}}</b> &nbsp;·&nbsp; {{DATE}} &nbsp;·&nbsp; Assets audited: <b>{{ASSET_COUNT}}</b></div>
  </header>

  <!-- ===================== 1. EXECUTIVE SUMMARY ===================== -->
  <section>
    <div class="snum">Section 1</div>
    <h2>Executive summary</h2>
    <!-- FILL: 3 to 5 sentences. Overall read, the single most important fix, what is and isn't covered. -->
    <p class="lead">{{EXEC_SUMMARY}}</p>

    <div class="scorecard">
      <p class="read"><!-- FILL: one-sentence plain-language overall consistency read -->{{OVERALL_READ}}</p>
      <div class="chips">
        <!-- FILL: one chip per core element. class on .dot = rating. Duplicate as needed. -->
        <span class="chip"><span class="dot aligned"></span>Target audience</span>
        <span class="chip"><span class="dot contradictory"></span>Value proposition</span>
        <span class="chip"><span class="dot absent"></span>Differentiation</span>
        <span class="chip"><span class="dot drifting"></span>Tagline</span>
      </div>
      <div class="legend">
        <span><span class="dot aligned"></span>Aligned</span>
        <span><span class="dot drifting"></span>Drifting</span>
        <span><span class="dot contradictory"></span>Contradictory</span>
        <span><span class="dot absent"></span>Absent</span>
      </div>
    </div>
  </section>

  <!-- ===================== 2. SCOPE ===================== -->
  <section>
    <div class="snum">Section 2</div>
    <h2>Scope</h2>
    <p><b>Assets audited</b><br>
    <!-- FILL: each asset with its intended audience -->{{ASSETS_LIST}}</p>
    <p><b>Not covered or not accessible</b><br>
    <!-- FILL: out of scope / unreachable -->{{OUT_OF_SCOPE}}</p>
  </section>

  <!-- ===================== 3. EXTRACTION MATRIX ===================== -->
  <section>
    <div class="snum">Section 3</div>
    <h2>Extraction matrix</h2>
    <p>Every finding below traces back to this table. Cells hold the brand's actual language; a dash means the element is absent from that asset.</p>
    <div class="matrix-scroll">
      <table class="matrix">
        <thead>
          <tr><th>Element</th><!-- FILL: one th per asset -->{{MATRIX_HEADERS}}</tr>
        </thead>
        <tbody>
          <!-- FILL: one row per element. Use <span class="absent-cell">(absent)</span> for empty cells. -->
          <tr><th>Value proposition</th>{{ROW_VALUE_PROP}}</tr>
          <tr><th>Positioning statement</th>{{ROW_POSITIONING}}</tr>
          <tr><th>Brand promise</th>{{ROW_PROMISE}}</tr>
          <tr><th>Target audience</th>{{ROW_AUDIENCE}}</tr>
          <tr><th>Key benefits</th>{{ROW_BENEFITS}}</tr>
          <tr><th>Differentiation pillars</th>{{ROW_PILLARS}}</tr>
          <tr><th>Proof points</th>{{ROW_PROOF}}</tr>
          <tr><th>Tagline / boilerplate</th>{{ROW_TAGLINE}}</tr>
          <tr><th>Tone &amp; voice</th>{{ROW_TONE}}</tr>
          <tr><th>Primary CTA</th>{{ROW_CTA}}</tr>
        </tbody>
      </table>
    </div>
  </section>

  <!-- ===================== 4. CONSISTENCY FINDINGS ===================== -->
  <section>
    <div class="snum">Section 4</div>
    <h2>Consistency findings</h2>
    <!-- FILL: one .finding block per element, worst first. Set the wrapper class to the rating
         (aligned / drifting / contradictory / absent) so the border and evidence tint match. -->
    <div class="finding contradictory">
      <h3>Value proposition <span class="badge">Contradictory</span></h3>
      <div class="evidence">
        <span class="q">Homepage: "the fastest way to close your books."</span>
        <span class="q">Sales deck: "the most accurate ledger for regulated industries."</span>
      </div>
      <p class="sowhat">Speed and accuracy are being sold as the core promise to the same buyer. The brand hasn't decided which one it is.</p>
    </div>
    <!-- /example finding -->
    {{FINDINGS}}
  </section>

  <!-- ===================== 5. GAPS ===================== -->
  <section>
    <div class="snum">Section 5</div>
    <h2>Gaps</h2>
    <!-- FILL: one .gap per hole. -->
    <div class="gap">
      <span class="gaptype">Unsupported claim</span>
      <div><!-- what's missing/broken, and where -->{{GAP_EXAMPLE}}</div>
    </div>
    {{GAPS}}
  </section>

  <!-- ===================== 6. PRIORITY FIX LIST ===================== -->
  <section>
    <div class="snum">Section 6</div>
    <h2>What to fix first</h2>
    <!-- FILL: ranked .fix cards, most important first. -->
    <div class="fix">
      <div class="rank">1</div>
      <div class="fix-body">
        <h3>{{FIX_1_TITLE}}</h3>
        <p>{{FIX_1_WHY}}</p>
        <div class="fix-meta"><span>Rating: <b>{{FIX_1_RATING}}</b></span><span>Effort: <b>{{FIX_1_EFFORT}}</b></span><span>Next: <b>{{FIX_1_NEXT}}</b></span></div>
      </div>
    </div>
    {{FIXES}}
  </section>

  <!-- ===================== 7. YOUR STRATEGIC TAKE ===================== -->
  <section style="border-bottom:0">
    <div class="hi">
      <div class="eyebrow">Your strategic take</div>
      <h2>Calls a person has to make</h2>
      <p class="intro">These are the judgment calls the audit can surface but shouldn't decide. Bring your read of the business to each one.</p>
      <ul>
        <!-- FILL: one li per judgment call. -->
        <li><b>{{HI_1_Q}}</b> <span>{{HI_1_NOTE}}</span></li>
      </ul>
    </div>
  </section>

  <!-- ===================== 8. NEXT STEP ===================== -->
  <section style="border-bottom:0">
    <div class="nextstep">
      <div class="snum">Section 8</div>
      <h2>Where this goes next</h2>
      <p><!-- FILL: 1 to 2 sentences pointing to defining the corrected messaging -->{{NEXT_STEP}}</p>
      <p class="hand">First the diagnosis. Then the rebuild.</p>
    </div>
  </section>

  <footer>
    <p class="brandmark">Firebrand <span class="spark">&#9650;</span> Digital Marketing</p>
    <p>This audit inventories and diagnoses existing messaging. It does not create new messaging, and nothing in it has been published or changed on the brand's live assets.</p>
  </footer>

</div>
</body>
</html>
