<!-- The first-read slice. Two page mock-ups side by side: the same evidence, once
     sitting below the fold and once reordered into the top third. Nothing is added
     between the two panels, which is the point of the reorder pass. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 430" width="1000" height="430" role="img" font-family="'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif">
  <title>Two versions of the same one page resume. On the left the evidence for the job's must-have requirements sits below the top third, which is the slice a recruiter reads in a stack of 244 applications. On the right the same lines have been reordered into the top third. No content was added or written; only the order changed.</title>
  <rect width="1000" height="430" fill="#fafbfc"/>

  <text x="30" y="34" font-size="17" font-weight="700" fill="#b8470a" letter-spacing="0.06em">THE REORDER PASS ADDS NOTHING AND CHANGES EVERYTHING</text>

  <!-- BEFORE -->
  <text x="120" y="72" font-size="14" font-weight="700" fill="#636b78" letter-spacing="0.05em" text-anchor="middle">BEFORE</text>
  <rect x="60" y="84" width="300" height="290" rx="8" fill="#ffffff" stroke="#d5d9de" stroke-width="1.5"/>
  <rect x="60" y="84" width="300" height="96" rx="8" fill="#f5f6f8"/>
  <line x1="60" y1="180" x2="360" y2="180" stroke="#c9ced6" stroke-width="1.5" stroke-dasharray="5 4"/>
  <text x="350" y="172" font-size="12" font-weight="700" fill="#636b78" text-anchor="end">read</text>
  <g>
    <rect x="80" y="104" width="150" height="10" rx="3" fill="#c9ced6"/>
    <rect x="80" y="124" width="240" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="140" width="215" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="156" width="230" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="200" width="205" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="216" width="235" height="8" rx="3" fill="#f4630f"/>
    <rect x="80" y="232" width="190" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="248" width="220" height="8" rx="3" fill="#f4630f"/>
    <rect x="80" y="264" width="200" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="280" width="228" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="296" width="180" height="8" rx="3" fill="#f4630f"/>
    <rect x="80" y="312" width="215" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="328" width="195" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="80" y="344" width="205" height="8" rx="3" fill="#e3e6eb"/>
  </g>
  <text x="210" y="396" font-size="14" fill="#636b78" text-anchor="middle">The proof is there, below the slice</text>

  <!-- arrow -->
  <path d="M400 229 L456 229" fill="none" stroke="#c9ced6" stroke-width="2" marker-end="url(#ar3)"/>
  <text x="428" y="214" font-size="13" font-weight="700" fill="#636b78" text-anchor="middle">reorder</text>

  <!-- AFTER -->
  <text x="700" y="72" font-size="14" font-weight="700" fill="#b8470a" letter-spacing="0.05em" text-anchor="middle">AFTER</text>
  <rect x="550" y="84" width="300" height="290" rx="8" fill="#ffffff" stroke="#f4630f" stroke-width="2"/>
  <rect x="550" y="84" width="300" height="96" rx="8" fill="#fff5ee"/>
  <line x1="550" y1="180" x2="850" y2="180" stroke="#f4630f" stroke-width="1.5" stroke-dasharray="5 4"/>
  <text x="840" y="172" font-size="12" font-weight="700" fill="#b8470a" text-anchor="end">read</text>
  <g>
    <rect x="570" y="104" width="150" height="10" rx="3" fill="#c9ced6"/>
    <rect x="570" y="124" width="235" height="8" rx="3" fill="#f4630f"/>
    <rect x="570" y="140" width="220" height="8" rx="3" fill="#f4630f"/>
    <rect x="570" y="156" width="180" height="8" rx="3" fill="#f4630f"/>
    <rect x="570" y="200" width="205" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="216" width="190" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="232" width="228" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="248" width="200" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="264" width="215" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="280" width="195" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="296" width="205" height="8" rx="3" fill="#e3e6eb"/>
    <rect x="570" y="312" width="188" height="8" rx="3" fill="#e3e6eb"/>
  </g>
  <text x="700" y="396" font-size="14" font-weight="700" fill="#16181d" text-anchor="middle">Same lines, now inside it</text>

  <defs>
    <marker id="ar3" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#c9ced6"/>
    </marker>
  </defs>
</svg>
