function Post847() {
  const { React } = window;
  const { useRef, useEffect } = React;

  const deckRef = useRef(null);

  useEffect(() => {
    const deck = deckRef.current;
    if (!deck) return;

    deck.innerHTML = `
  <!-- 01 · COVER -->
  <section class="slide slide--cover" data-label="01 Cover">
    <div class="grid-bg"></div>
    <div class="noise"></div>

    <div class="cover-corner cc-tl">
      <span class="cc-num">01 / 11</span>
      <span class="cc-label">a story · in numbers</span>
    </div>
    <div class="cover-corner cc-tr">
      <span class="cc-rule"></span>
      <span class="cc-word">sekura</span>
    </div>

    <div class="cover-body">
      <p class="cover-eye">A true story about</p>
      <h1 class="cover-h1">
        <span class="cov-num">1217</span>
        <span class="cov-sub">critical vulnerabilities,</span>
        <span class="cov-sub">one that sat open for <em>7&nbsp;years,</em></span>
        <span class="cov-sub">and the moment <em>somebody owned it.</em></span>
      </h1>
    </div>

    <div class="cover-foot">
      <span class="cf-bar"></span>
      <span class="cf-text">scroll · or press → to begin</span>
    </div>
  </section>

  <!-- 02 · THE SCAN -->
  <section class="slide slide--scan" data-label="02 The scan">
    <header class="slide-head">
      <span class="head-num">02</span>
      <span class="head-label">the scan</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="scan-body">
      <p class="scan-lede">
        A CISO ran a vulnerability scan
        <br>across the organisation's estate.
      </p>

      <div class="scan-stats">
        <div class="stat">
          <div class="stat-num">20,000</div>
          <div class="stat-cap">total findings</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat stat--critical">
          <div class="stat-num">1,217</div>
          <div class="stat-cap">critical</div>
        </div>
      </div>

      <div class="scan-bar-wrap">
        <div class="scan-bar">
          <div class="scan-bar-fill"></div>
        </div>
        <div class="scan-bar-meta">
          <span>20,000 findings</span>
          <span class="bar-meta-right"><span class="bar-dot"></span> 1,217 critical · 6.09%</span>
        </div>
      </div>
    </div>
  </section>

  <!-- 03 · THE OLDEST -->
  <section class="slide slide--age" data-label="03 The oldest">
    <header class="slide-head">
      <span class="head-num">03</span>
      <span class="head-label">the oldest</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="age-body">
      <p class="age-lede">The oldest critical vulnerability had been open for</p>

      <div class="age-display">
        <span class="age-num">7</span>
        <span class="age-unit">years</span>
        <span class="age-num">1</span>
        <span class="age-unit">month</span>
      </div>

      <div class="age-timeline">
        <div class="tl-line"></div>
        <div class="tl-tick" style="left: 0%"><span class="tl-cap">ticket raised</span></div>
        <div class="tl-tick" style="left: 100%"><span class="tl-cap tl-cap--right">still open</span></div>
        <div class="tl-marker" style="left: 14%"></div>
        <div class="tl-marker" style="left: 22%"><span class="tlm-cap">deferred ×3</span></div>
        <div class="tl-marker" style="left: 31%"></div>
        <div class="tl-marker" style="left: 38%"><span class="tlm-cap">deferred ×3</span></div>
        <div class="tl-marker" style="left: 47%"></div>
        <div class="tl-marker" style="left: 55%"><span class="tlm-cap">deferred ×3</span></div>
        <div class="tl-marker" style="left: 63%"></div>
        <div class="tl-marker" style="left: 70%"><span class="tlm-cap">deferred ×3</span></div>
        <div class="tl-marker" style="left: 77%"></div>
        <div class="tl-marker" style="left: 83%"><span class="tlm-cap">deferred ×2</span></div>
        <div class="tl-marker" style="left: 92%"></div>
        <div class="tl-marker" style="left: 98%"></div>
      </div>

      <p class="age-foot">14 deferrals. 6 different business owners. <em>Zero escalations to the CISO.</em></p>
    </div>
  </section>

  <!-- 04 · THE CONVERSATION -->
  <section class="slide slide--convo" data-label="04 The conversation">
    <header class="slide-head">
      <span class="head-num">04</span>
      <span class="head-label">the conversation</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="convo-body">
      <div class="convo-line cl-ciso">
        <span class="cl-speaker">CISO</span>
        <p class="cl-text">We have 1,217 critical vulnerabilities. <em>How?</em></p>
      </div>
      <div class="convo-line cl-it">
        <span class="cl-speaker">IT Director</span>
        <p class="cl-text">Every time we try to patch something, a business owner says we can't take their system down.</p>
      </div>
      <div class="convo-line cl-ciso">
        <span class="cl-speaker">CISO</span>
        <p class="cl-text"><em>All 1,217 of them?</em></p>
      </div>
      <div class="convo-line cl-it">
        <span class="cl-speaker">IT Director</span>
        <p class="cl-text cl-text--quiet">Welcome to enterprise patching.</p>
      </div>
    </div>
  </section>

  <!-- 05 · THE AUDIT TRAIL -->
  <section class="slide slide--audit" data-label="05 The audit trail">
    <header class="slide-head">
      <span class="head-num">05</span>
      <span class="head-label">the audit trail · oldest finding</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="audit-body">
      <p class="audit-lede">The CISO pulled the trail.</p>

      <ol class="audit-list">
        <li><span class="al-tag">T+0</span><span class="al-text">Ticket raised</span><span class="al-meta">85 months ago · 7y 1m</span></li>
        <li><span class="al-tag">×14</span><span class="al-text">Deferred</span><span class="al-meta">14 separate occasions</span></li>
        <li><span class="al-tag">×6</span><span class="al-text">Business owners objected</span><span class="al-meta">6 different owners</span></li>
        <li><span class="al-tag">×2</span><span class="al-text">Escalated to IT director</span><span class="al-meta">both times: deadline extended</span></li>
        <li class="al-neg"><span class="al-tag">—</span><span class="al-text">Escalated to the CISO</span><span class="al-meta">never</span></li>
        <li class="al-neg"><span class="al-tag">—</span><span class="al-text">Presented to the board as accepted risk</span><span class="al-meta">never</span></li>
      </ol>
    </div>
  </section>

  <!-- 06 · THE SYSTEM -->
  <section class="slide slide--system" data-label="06 The system">
    <header class="slide-head">
      <span class="head-num">06</span>
      <span class="head-label">the affected system</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="sys-body">
      <div class="sys-card">
        <div class="sys-card-head">
          <span class="sys-card-tag">FINDING · OLDEST</span>
          <span class="sys-card-id">CVE · INTERNAL-2024-0001</span>
        </div>

        <div class="sys-card-grid">
          <div class="sys-cell">
            <div class="sys-cell-cap">system</div>
            <div class="sys-cell-val">Customer-facing payment processing</div>
          </div>
          <div class="sys-cell">
            <div class="sys-cell-cap">vulnerability</div>
            <div class="sys-cell-val">Remote code execution</div>
          </div>
          <div class="sys-cell">
            <div class="sys-cell-cap">exposure</div>
            <div class="sys-cell-val">Public internet</div>
          </div>
          <div class="sys-cell sys-cell--cvss">
            <div class="sys-cell-cap">CVSS</div>
            <div class="sys-cvss">
              <span class="cvss-num">9.8</span>
              <span class="cvss-label">critical</span>
            </div>
          </div>
        </div>

        <div class="sys-card-foot">
          <span class="scf-dot"></span>
          <span class="scf-text">sitting open · customer-facing · exploitable · <em>for 7 years.</em></span>
        </div>
      </div>

      <p class="sys-line">Nobody had made it <em>anyone's problem to solve.</em></p>
    </div>
  </section>

  <!-- 07 · THE BOARD -->
  <section class="slide slide--board" data-label="07 The board">
    <header class="slide-head">
      <span class="head-num">07</span>
      <span class="head-label">to the board · same day</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="board-body">
      <div class="board-quote">
        <span class="bq-mark">"</span>
        <p class="bq-text">
          CVSS 9.8 on our payment processing system.
          <br>Open <em>7 years.</em>
          <br>I found out <em>today.</em>
        </p>
      </div>

      <div class="board-ask">
        <div class="ba-eye">two demands</div>
        <div class="ba-list">
          <div class="ba-item">
            <span class="ba-num">i.</span>
            <div class="ba-body">
              <div class="ba-h">A maintenance window this weekend.</div>
              <div class="ba-sub">Regardless of business objection.</div>
            </div>
          </div>
          <div class="ba-item">
            <span class="ba-num">ii.</span>
            <div class="ba-body">
              <div class="ba-h">A new policy.</div>
              <div class="ba-sub">Critical vulnerabilities cannot be deferred beyond 30 days without board-level risk acceptance — <em>in writing.</em></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 08 · THE NEW SLAs -->
  <section class="slide slide--sla" data-label="08 The new SLAs">
    <header class="slide-head">
      <span class="head-num">08</span>
      <span class="head-label">what changed across the programme</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="sla-body">
      <div class="sla-eye">vulnerability SLAs — by severity</div>
      <div class="sla-grid">
        <div class="sla-card sla--crit">
          <div class="sla-sev">critical</div>
          <div class="sla-days"><span class="sla-num">30</span><span class="sla-unit">days</span></div>
          <div class="sla-bar"><div class="sla-bar-fill" style="width:33%"></div></div>
        </div>
        <div class="sla-card sla--high">
          <div class="sla-sev">high</div>
          <div class="sla-days"><span class="sla-num">60</span><span class="sla-unit">days</span></div>
          <div class="sla-bar"><div class="sla-bar-fill" style="width:66%"></div></div>
        </div>
        <div class="sla-card sla--med">
          <div class="sla-sev">medium</div>
          <div class="sla-days"><span class="sla-num">90</span><span class="sla-unit">days</span></div>
          <div class="sla-bar"><div class="sla-bar-fill" style="width:100%"></div></div>
        </div>
      </div>

      <div class="sla-rules">
        <div class="slr-row">
          <span class="slr-cap">deferral past SLA</span>
          <span class="slr-arrow">→</span>
          <span class="slr-val">requires CISO sign-off</span>
        </div>
        <div class="slr-row">
          <span class="slr-cap">deferral past 2× SLA</span>
          <span class="slr-arrow">→</span>
          <span class="slr-val">requires board risk acceptance · <em>in writing</em></span>
        </div>
        <div class="slr-row">
          <span class="slr-cap">business owner objections</span>
          <span class="slr-arrow">→</span>
          <span class="slr-val">do not stop the clock</span>
        </div>
      </div>
    </div>
  </section>

  <!-- 09 · SIX MONTHS LATER -->
  <section class="slide slide--after" data-label="09 Six months later">
    <header class="slide-head">
      <span class="head-num">09</span>
      <span class="head-label">six months later</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="after-body after-body--v2">

      <!-- specimen 01 : dot field -->
      <article class="spec spec--field">
        <header class="spec-head">
          <span class="spec-no">01</span>
          <span class="spec-cap">critical vulnerabilities</span>
        </header>

        <div class="spec-stage">
          <div class="dot-field" id="dotField"></div>
          <div class="dot-legend">
            <span class="dl-dot dl-dot--patched"></span><span>patched · 1,184</span>
            <span class="dl-dot dl-dot--open"></span><span>still open · 33</span>
          </div>
        </div>

        <footer class="spec-foot">
          <div class="sf-from"><span class="sf-num">1217</span><span class="sf-tag">then</span></div>
          <div class="sf-arrow">→</div>
          <div class="sf-to"><span class="sf-num sf-num--accent">33</span><span class="sf-tag">now</span></div>
          <div class="sf-delta">−97.3%</div>
        </footer>
      </article>

      <!-- specimen 02 : collapsing arc -->
      <article class="spec spec--arc">
        <header class="spec-head">
          <span class="spec-no">02</span>
          <span class="spec-cap">avg. age of critical finding</span>
        </header>

        <div class="spec-stage spec-stage--arc">
          <svg class="arc-svg" viewBox="0 0 360 200" preserveAspectRatio="xMidYMid meet">
            <path d="M 30 180 A 150 150 0 0 1 330 180" fill="none" stroke="#E0D9C8" stroke-width="2"/>
            <path d="M 30 180 A 150 150 0 0 1 330 180" fill="none" stroke="#8A9690" stroke-width="14" stroke-linecap="round" pathLength="100" stroke-dasharray="100 100"/>
            <text x="180" y="120" text-anchor="middle" class="arc-label arc-label--then">2 years</text>
            <text x="180" y="150" text-anchor="middle" class="arc-sub">then</text>

            <path d="M 30 180 A 150 150 0 0 1 330 180" fill="none" stroke="#E8847C" stroke-width="14" stroke-linecap="round" pathLength="100" stroke-dasharray="2.5 97.5"/>
            <circle cx="30" cy="180" r="11" fill="#E8847C"/>
          </svg>
          <div class="arc-now">
            <div class="arc-now-num">18</div>
            <div class="arc-now-unit">days</div>
            <div class="arc-now-tag">now</div>
          </div>
        </div>

        <footer class="spec-foot">
          <div class="sf-from"><span class="sf-num">730</span><span class="sf-tag">days · then</span></div>
          <div class="sf-arrow">→</div>
          <div class="sf-to"><span class="sf-num sf-num--accent">18</span><span class="sf-tag">days · now</span></div>
          <div class="sf-delta">−97.5%</div>
        </footer>
      </article>

      <!-- specimen 03 : stamps -->
      <article class="spec spec--stamp">
        <header class="spec-head">
          <span class="spec-no">03</span>
          <span class="spec-cap">board risk acceptances</span>
        </header>

        <div class="spec-stage spec-stage--stamp">
          <div class="stamp-row">
            <div class="stamp">
              <div class="stamp-ring">
                <span class="stamp-word">accepted</span>
                <span class="stamp-word stamp-word--bot">risk</span>
              </div>
              <div class="stamp-center">
                <span class="stamp-num">01</span>
                <span class="stamp-date">Q2 · '26</span>
              </div>
            </div>
            <div class="stamp">
              <div class="stamp-ring">
                <span class="stamp-word">accepted</span>
                <span class="stamp-word stamp-word--bot">risk</span>
              </div>
              <div class="stamp-center">
                <span class="stamp-num">02</span>
                <span class="stamp-date">Q3 · '26</span>
              </div>
            </div>
          </div>
          <p class="stamp-note">documented · countersigned · on file</p>
        </div>

        <footer class="spec-foot">
          <div class="sf-from"><span class="sf-num">0</span><span class="sf-tag">undocumented</span></div>
          <div class="sf-arrow">→</div>
          <div class="sf-to"><span class="sf-num sf-num--accent">2</span><span class="sf-tag">in writing</span></div>
          <div class="sf-delta sf-delta--neutral">paper trail</div>
        </footer>
      </article>

    </div>

    <p class="after-kicker">
      six months · <em>same team, same tools, new accountability.</em>
    </p>
  </section>

  <!-- 10 · THE LESSON -->
  <section class="slide slide--lesson" data-label="10 The lesson">
    <header class="slide-head">
      <span class="head-num">10</span>
      <span class="head-label">the lesson</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="lesson-body">
      <p class="lesson-h">
        Unpatched vulnerabilities aren't
        <br><em>a technical problem.</em>
      </p>
      <p class="lesson-h lesson-h--alt">
        They're a prioritisation problem
        <br><em>dressed as one.</em>
      </p>

      <div class="lesson-divider"></div>

      <ul class="lesson-rules">
        <li><span class="lr-arrow">→</span> Every deferral is a decision.</li>
        <li><span class="lr-arrow">→</span> Every decision has an owner.</li>
        <li><span class="lr-arrow">→</span> Until someone is accountable for the age of a vulnerability — <em>nobody is.</em></li>
      </ul>
    </div>
  </section>

  <!-- 11 · CTA -->
  <section class="slide slide--cta" data-label="11 CTA">
    <div class="grid-bg grid-bg--cta"></div>
    <div class="noise"></div>

    <header class="slide-head slide-head--cta">
      <span class="head-num">11</span>
      <span class="head-label">your turn</span>
      <span class="head-rule"></span>
      <span class="head-brand">sekura</span>
    </header>

    <div class="cta-body">
      <div class="cta-questions">
        <p class="ctaq">
          What's the oldest critical finding open
          <br><em>in your environment right now?</em>
        </p>
        <p class="ctaq ctaq--alt">
          Does your board <em>know it exists?</em>
        </p>
      </div>

      <div class="cta-divider"></div>

      <div class="cta-offer">
        <div class="cta-eye">sekura · autonomous pentesting</div>
        <h2 class="cta-h">
          We find them.
          <br>We rank them.
          <br><em>We tell you which one to fix first.</em>
        </h2>
        <p class="cta-sub">
          Continuous, evidence-graded scans of your real estate — every finding aged, owned, and SLA-tracked. No more 27-month surprises.
        </p>

        <a class="cta-button" href="#managed-scan">
          <span class="cb-label">see the managed scan</span>
          <span class="cb-arrow">→</span>
        </a>

        <div class="cta-url">sekura.ai/#managed-scan</div>
      </div>
    </div>

    <div class="cta-foot">
      <span class="cf-bar"></span>
      <span class="cf-text">end · 11 / 11</span>
    </div>
  </section>
    `;

    // Generate the 1217 dot field (inline script won't execute via innerHTML)
    const f = document.getElementById('dotField');
    if (f) {
      const total = 1217;
      const open = 33;
      const openSet = new Set();
      let seed = 421337;
      function rand(){ seed = (seed*9301+49297) % 233280; return seed/233280; }
      while(openSet.size < open) openSet.add(Math.floor(rand()*total));
      let html = '';
      for(let i=0;i<total;i++){
        const cls = openSet.has(i) ? 'd d--open' : 'd';
        html += '<span class="'+cls+'"></span>';
      }
      f.innerHTML = html;
    }
  }, []);

  return (
    <React.Fragment>
      <header className="hero-nav" style={{background:'rgba(245,242,235,.85)',backdropFilter:'blur(12px)',WebkitBackdropFilter:'blur(12px)'}}>
        <div className="nav-brand">
          <a href="#">
            <img src="branding/sekura-logo.svg" alt="sekura" height="28" />
          </a>
        </div>
        <nav className="nav-links">
          <a href="#">the story</a>
          <a href="#product">product</a>
          <a href="#1217">1217</a>
          <a href="#team">team</a>
          <a href="#login" className="nav-login">log in</a>
        </nav>
      </header>

      <div className="post-847">
        <deck-stage ref={deckRef} width="1920" height="1080" />
      </div>
    </React.Fragment>
  );
}
window.Post847 = Post847;