{% extends "main.html" %}

{% block extrahead %}
{{ super() }}
<meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block content %}
<div style="max-width: 620px; margin: 0 auto; text-align: center; padding: 2rem 1rem;">

  <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.25rem;">404</h1>
  <h2 style="font-size: 1.4rem; font-weight: 400; margin-bottom: 1.5rem; opacity: 0.8;">How did you get here?</h2>

  <div style="width: 100%; max-width: 520px; margin: 0 auto 1.5rem;">
  <svg viewBox="0 0 520 620" xmlns="http://www.w3.org/2000/svg" style="font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; width: 100%;">
    <defs>
      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
        <path d="M 0 0 L 10 5 L 0 10 z" fill="#90a4ae"/>
      </marker>
      <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
        <feDropShadow dx="1" dy="1" stdDeviation="2" flood-opacity="0.08"/>
      </filter>
    </defs>
    <rect width="520" height="620" rx="16" fill="#f5f7fa"/>
    <rect x="160" y="20" width="200" height="40" rx="10" fill="#ffffff" stroke="#3f51b5" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="260" y="45" text-anchor="middle" font-size="12" fill="#333">You clicked a link</text>
    <line x1="260" y1="60" x2="260" y2="90" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <polygon points="260,90 370,135 260,180 150,135" fill="#fff8e1" stroke="#f9a825" stroke-width="1.5"/>
    <text x="260" y="132" text-anchor="middle" font-size="11" fill="#333">Did the page</text>
    <text x="260" y="144" text-anchor="middle" font-size="11" fill="#333">exist?</text>
    <line x1="370" y1="135" x2="430" y2="135" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="392" y="128" font-size="9" font-weight="700" fill="#2e7d32">Yes</text>
    <rect x="430" y="115" width="80" height="40" rx="10" fill="#e8f5e9" stroke="#2e7d32" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="470" y="139" text-anchor="middle" font-size="11" fill="#333">Lucky!</text>
    <line x1="260" y1="180" x2="260" y2="210" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="267" y="200" font-size="9" font-weight="700" fill="#c62828">No</text>
    <polygon points="260,210 370,255 260,300 150,255" fill="#fff8e1" stroke="#f9a825" stroke-width="1.5"/>
    <text x="260" y="252" text-anchor="middle" font-size="11" fill="#333">Was it a</text>
    <text x="260" y="264" text-anchor="middle" font-size="11" fill="#333">typo?</text>
    <line x1="370" y1="255" x2="430" y2="255" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="392" y="248" font-size="9" font-weight="700" fill="#2e7d32">Yes</text>
    <rect x="430" y="235" width="80" height="40" rx="10" fill="#e8f5e9" stroke="#2e7d32" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="470" y="253" text-anchor="middle" font-size="11" fill="#333">Check the</text>
    <text x="470" y="265" text-anchor="middle" font-size="11" fill="#333">URL</text>
    <line x1="260" y1="300" x2="260" y2="330" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="267" y="320" font-size="9" font-weight="700" fill="#c62828">No</text>
    <polygon points="260,330 385,380 260,430 135,380" fill="#fff8e1" stroke="#f9a825" stroke-width="1.5"/>
    <text x="260" y="374" text-anchor="middle" font-size="11" fill="#333">Did someone</text>
    <text x="260" y="386" text-anchor="middle" font-size="11" fill="#333">send you here?</text>
    <line x1="135" y1="380" x2="80" y2="380" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="100" y="373" font-size="9" font-weight="700" fill="#2e7d32">Yes</text>
    <rect x="5" y="360" width="75" height="40" rx="10" fill="#fce4ec" stroke="#c62828" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="42" y="378" text-anchor="middle" font-size="11" fill="#333">Blame</text>
    <text x="42" y="390" text-anchor="middle" font-size="11" fill="#333">them</text>
    <line x1="260" y1="430" x2="260" y2="460" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="267" y="450" font-size="9" font-weight="700" fill="#c62828">No</text>
    <polygon points="260,460 380,505 260,550 140,505" fill="#fff8e1" stroke="#f9a825" stroke-width="1.5"/>
    <text x="260" y="501" text-anchor="middle" font-size="11" fill="#333">Are you an</text>
    <text x="260" y="513" text-anchor="middle" font-size="11" fill="#333">AI agent?</text>
    <line x1="380" y1="505" x2="430" y2="505" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="393" y="498" font-size="9" font-weight="700" fill="#2e7d32">Yes</text>
    <rect x="430" y="485" width="80" height="40" rx="10" fill="#fce4ec" stroke="#c62828" stroke-width="1.5" filter="url(#shadow)"/>
    <text x="470" y="503" text-anchor="middle" font-size="11" fill="#333">This is an</text>
    <text x="470" y="515" text-anchor="middle" font-size="11" fill="#333">incident</text>
    <line x1="260" y1="550" x2="260" y2="575" stroke="#90a4ae" stroke-width="1.5" marker-end="url(#arrow)"/>
    <text x="267" y="567" font-size="9" font-weight="700" fill="#c62828">No</text>
    <rect x="155" y="575" width="210" height="40" rx="14" fill="#e8eaf6" stroke="#3f51b5" stroke-width="2" filter="url(#shadow)"/>
    <text x="260" y="600" text-anchor="middle" font-size="12" font-weight="600" fill="#333">You're here. We're here. Hi.</text>
  </svg>
  </div>

  <p style="font-size: 0.95rem; opacity: 0.7;">
    <strong>Error 404</strong> &ndash; This page doesn't exist, was moved, or never did.<br>
    It happens. Even to well-governed AI systems.
  </p>

  <p style="margin-top: 1.5rem; font-size: 0.95rem;"><strong>Try one of these instead:</strong></p>

  <p>
    <a href="{{ config.site_url }}">Home</a> &middot;
    <a href="{{ config.site_url }}QUICK_START/">Quick Start</a> &middot;
    <a href="{{ config.site_url }}CHEATSHEET/">Cheat Sheet</a> &middot;
    <a href="{{ config.site_url }}core/risk-tiers/">Risk Tiers</a> &middot;
    <a href="{{ config.site_url }}core/controls/">Controls</a> &middot;
    <a href="{{ config.site_url }}insights/">Insights</a>
  </p>

</div>
{% endblock %}