<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600" role="img"
     aria-label="Site and office working from the same live project record, with a timestamped activity feed">
  <defs>
    <pattern id="rtGrid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M40 0H0v40" fill="none" stroke="#e3e9f0" stroke-width="1"/>
    </pattern>
    <filter id="rtShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="10" stdDeviation="18" flood-color="#071a33" flood-opacity=".12"/>
    </filter>
    <style>
      .s  { font-family: 'Helvetica Neue', Arial, sans-serif; }
      .m  { font-family: Menlo, 'DejaVu Sans Mono', monospace; letter-spacing: .08em; }
      .ttl{ font-weight: 600; fill: #071a33; }
      .row{ fill: #071a33; }
      .met{ fill: #66798d; }
      .sub{ fill: #8b9bab; }
    </style>
  </defs>

  <rect width="800" height="600" fill="#f7f9fc"/>
  <rect width="800" height="600" fill="url(#rtGrid)" opacity=".7"/>

  <!-- site (phone, dark) -->
  <g filter="url(#rtShadow)">
    <rect x="64" y="96" width="196" height="380" rx="18" fill="#071a33"/>
  </g>
  <rect x="76" y="120" width="172" height="332" rx="8" fill="#0a2140"/>
  <text class="m" x="88" y="112" font-size="9" fill="#f5b335">SITE</text>
  <!-- photo placeholder with pin -->
  <rect x="88" y="132" width="148" height="104" rx="5" fill="#16344c"/>
  <g stroke="#3c6382" stroke-width="1.4" fill="none">
    <path d="M88 208 132 168 168 204 196 180 236 214"/>
    <path d="M88 236h148"/>
  </g>
  <g transform="translate(196 156)">
    <path d="M0-10c5.5 0 10 4.3 10 9.7C10 6 0 16 0 16s-10-10-10-16.3C-10-5.7-5.5-10 0-10z" fill="#f5b335"/>
    <circle cx="0" cy="0" r="3.4" fill="#071a33"/>
  </g>
  <text class="m" x="88" y="262" font-size="10" fill="#7f97ad">LEVEL 3 · SLAB POUR</text>
  <!-- progress entry -->
  <rect x="88" y="276" width="148" height="60" rx="5" fill="#16344c"/>
  <text class="s" x="100" y="298" font-size="12" fill="#cfdce7">Concrete poured</text>
  <text class="m" x="100" y="316" font-size="10" fill="#f5b335">42 M³ OF 45 PLANNED</text>
  <rect x="100" y="322" width="124" height="5" rx="2.5" fill="#0a2140"/>
  <rect x="100" y="322" width="116" height="5" rx="2.5" fill="#159669"/>
  <!-- send button -->
  <rect x="88" y="352" width="148" height="34" rx="17" fill="#f5b335"/>
  <text class="s" x="162" y="374" font-size="12" text-anchor="middle" fill="#071a33" font-weight="600">Report progress</text>
  <text class="m" x="88" y="412" font-size="10" fill="#5f7b93">OFFLINE ENTRIES SYNC</text>
  <text class="m" x="88" y="428" font-size="10" fill="#5f7b93">WHEN SIGNAL RETURNS</text>

  <!-- live link -->
  <g>
    <path d="M272 286h44" stroke="#cfd8e3" stroke-width="1.5" stroke-dasharray="4 4"/>
    <circle cx="294" cy="286" r="7" fill="#f5b335"/>
    <circle cx="294" cy="286" r="14" fill="none" stroke="#f5b335" stroke-opacity=".35"/>
    <text class="m met" x="294" y="316" font-size="9" text-anchor="middle">LIVE</text>
  </g>

  <!-- office (activity feed, light) -->
  <g filter="url(#rtShadow)">
    <rect x="328" y="96" width="408" height="380" rx="10" fill="#fff" stroke="#e3e9f0"/>
  </g>
  <text class="s ttl" x="356" y="134" font-size="18">Project activity</text>
  <text class="m sub" x="708" y="132" font-size="10" text-anchor="end">TODAY</text>
  <line x1="328" y1="152" x2="736" y2="152" stroke="#e3e9f0"/>

  <!-- presence -->
  <g transform="translate(356 176)">
    <g>
      <circle cx="0" cy="0" r="13" fill="#0b2b4d"/>
      <text class="m" x="0" y="4" font-size="9" fill="#fff" text-anchor="middle">PM</text>
      <circle cx="9" cy="9" r="3.5" fill="#159669" stroke="#fff" stroke-width="1.5"/>
    </g>
    <g transform="translate(30 0)">
      <circle cx="0" cy="0" r="13" fill="#3c6382"/>
      <text class="m" x="0" y="4" font-size="9" fill="#fff" text-anchor="middle">QS</text>
      <circle cx="9" cy="9" r="3.5" fill="#159669" stroke="#fff" stroke-width="1.5"/>
    </g>
    <g transform="translate(60 0)">
      <circle cx="0" cy="0" r="13" fill="#8b9bab"/>
      <text class="m" x="0" y="4" font-size="9" fill="#fff" text-anchor="middle">SC</text>
      <circle cx="9" cy="9" r="3.5" fill="#159669" stroke="#fff" stroke-width="1.5"/>
    </g>
    <text class="s met" x="90" y="4" font-size="13">3 people on this project now</text>
  </g>

  <!-- feed -->
  <g>
    <line x1="368" y1="220" x2="368" y2="440" stroke="#e3e9f0"/>
    <g>
      <circle cx="368" cy="232" r="5" fill="#f5b335"/>
      <text class="m met" x="392" y="228" font-size="10">09:12 · SITE</text>
      <text class="s row" x="392" y="248" font-size="15" font-weight="600">Photo added to level 3 slab</text>
    </g>
    <g>
      <circle cx="368" cy="286" r="5" fill="#0b2b4d"/>
      <text class="m met" x="392" y="282" font-size="10">09:14 · CONTRACTOR</text>
      <text class="s row" x="392" y="302" font-size="15">RFI-024 raised on rebar spacing</text>
    </g>
    <g>
      <circle cx="368" cy="340" r="5" fill="#0b2b4d"/>
      <text class="m met" x="392" y="336" font-size="10">09:20 · CONSULTANT</text>
      <text class="s row" x="392" y="356" font-size="15">Drawing S-201 issued as Rev C</text>
    </g>
    <g>
      <circle cx="368" cy="394" r="5" fill="#159669"/>
      <text class="m met" x="392" y="390" font-size="10">09:22 · OWNER</text>
      <text class="s row" x="392" y="410" font-size="15">Slab opening approved</text>
    </g>
    <g>
      <circle cx="368" cy="440" r="5" fill="#e3e9f0"/>
      <text class="m met" x="392" y="445" font-size="11">EVERY ENTRY KEEPS ITS AUTHOR AND TIME</text>
    </g>
  </g>

  <!-- caption strip -->
  <text class="m met" x="64" y="518" font-size="12">ONE RECORD · SITE AND OFFICE SEE THE SAME UPDATE THE MOMENT IT LANDS</text>
</svg>
