<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" fill="none">
  <rect width="400" height="300" fill="#0A0A0A"/>

  <!-- Subtle grid -->
  <g stroke="rgba(255,255,255,0.03)" stroke-width="0.5">
    <line x1="0" y1="50" x2="400" y2="50"/>
    <line x1="0" y1="100" x2="400" y2="100"/>
    <line x1="0" y1="150" x2="400" y2="150"/>
    <line x1="0" y1="200" x2="400" y2="200"/>
    <line x1="0" y1="250" x2="400" y2="250"/>
    <line x1="50" y1="0" x2="50" y2="300"/>
    <line x1="100" y1="0" x2="100" y2="300"/>
    <line x1="150" y1="0" x2="150" y2="300"/>
    <line x1="200" y1="0" x2="200" y2="300"/>
    <line x1="250" y1="0" x2="250" y2="300"/>
    <line x1="300" y1="0" x2="300" y2="300"/>
    <line x1="350" y1="0" x2="350" y2="300"/>
  </g>

  <!-- "Before" zone shading (left of divider) -->
  <rect x="0" y="0" width="185" height="300" fill="white" opacity="0.01"/>

  <!-- "After" zone glow (right of divider) -->
  <radialGradient id="t-glow" cx="310" cy="120" r="140" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#991B1B" stop-opacity="0.22"/>
    <stop offset="60%" stop-color="#991B1B" stop-opacity="0.06"/>
    <stop offset="100%" stop-color="#991B1B" stop-opacity="0"/>
  </radialGradient>
  <rect x="185" y="0" width="215" height="300" fill="url(#t-glow)"/>

  <!-- THE RED DIVIDER LINE -->
  <line x1="185" y1="15" x2="185" y2="270" stroke="#991B1B" stroke-opacity="0.4" stroke-width="2"/>
  <line x1="185" y1="15" x2="185" y2="270" stroke="#991B1B" stroke-opacity="0.15" stroke-width="6"/>

  <!-- "Before" flat revenue line -->
  <path d="M 30 240 L 50 241 L 70 239 L 90 240 L 110 238 L 130 240 L 150 239 L 170 240 L 183 240"
        stroke="rgba(255,255,255,0.12)" stroke-width="1" fill="none"/>

  <!-- Fill under flat line -->
  <path d="M 30 240 L 50 241 L 70 239 L 90 240 L 110 238 L 130 240 L 150 239 L 170 240 L 183 240 L 183 260 L 30 260 Z"
        fill="white" opacity="0.02"/>

  <!-- Hockey stick curve (after divider) -->
  <path d="M 185 240 Q 200 238 215 232 Q 235 220 255 195 Q 275 160 295 115 Q 315 75 335 50 Q 350 38 365 30"
        stroke="white" stroke-opacity="0.2" stroke-width="1.8" fill="none"/>

  <!-- Fill under hockey stick -->
  <linearGradient id="t-fill" x1="275" y1="30" x2="275" y2="260" gradientUnits="userSpaceOnUse">
    <stop offset="0%" stop-color="#991B1B" stop-opacity="0.2"/>
    <stop offset="100%" stop-color="#991B1B" stop-opacity="0.01"/>
  </linearGradient>
  <path d="M 185 240 Q 200 238 215 232 Q 235 220 255 195 Q 275 160 295 115 Q 315 75 335 50 Q 350 38 365 30 L 365 260 L 185 260 Z"
        fill="url(#t-fill)"/>

  <!-- Day markers on the after side -->
  <g stroke="rgba(255,255,255,0.05)" stroke-width="0.3" stroke-dasharray="2,4">
    <line x1="215" y1="232" x2="215" y2="260"/>
    <line x1="245" y1="202" x2="245" y2="260"/>
    <line x1="275" y1="155" x2="275" y2="260"/>
    <line x1="305" y1="100" x2="305" y2="260"/>
    <line x1="335" y1="50" x2="335" y2="260"/>
    <line x1="365" y1="30" x2="365" y2="260"/>
  </g>

  <!-- Day marker dots on the curve -->
  <circle cx="215" cy="232" r="2" fill="white" opacity="0.15"/>
  <circle cx="245" cy="202" r="2" fill="white" opacity="0.15"/>
  <circle cx="275" cy="155" r="2.5" fill="white" opacity="0.18"/>
  <circle cx="305" cy="100" r="2.5" fill="white" opacity="0.2"/>
  <circle cx="335" cy="50" r="3" fill="white" opacity="0.22"/>
  <circle cx="365" cy="30" r="3.5" fill="#991B1B" opacity="0.35"/>
  <circle cx="365" cy="30" r="2" fill="white" opacity="0.4"/>

  <!-- Before zone flat dots -->
  <g fill="white" opacity="0.08">
    <circle cx="50" cy="241" r="1.5"/>
    <circle cx="90" cy="240" r="1.5"/>
    <circle cx="130" cy="240" r="1.5"/>
    <circle cx="170" cy="240" r="1.5"/>
  </g>

  <!-- Revenue labels on the curve -->
  <text x="220" y="228" font-family="system-ui" font-size="7" fill="white" opacity="0.2">$5K</text>
  <text x="250" y="198" font-family="system-ui" font-size="7" fill="white" opacity="0.22">$15K</text>
  <text x="280" y="150" font-family="system-ui" font-size="7" fill="white" opacity="0.25">$32K</text>
  <text x="310" y="95" font-family="system-ui" font-size="8" fill="white" opacity="0.3">$55K</text>
  <text x="340" y="45" font-family="system-ui" font-size="8" fill="white" opacity="0.35">$72K</text>

  <!-- Peak value -->
  <text x="365" y="20" font-family="system-ui" font-size="11" fill="white" opacity="0.5" text-anchor="middle" font-weight="300">$83K</text>

  <!-- Before/After labels -->
  <text x="105" y="278" font-family="system-ui" font-size="8" fill="white" opacity="0.2" text-anchor="middle">BEFORE</text>
  <text x="275" y="278" font-family="system-ui" font-size="8" fill="white" opacity="0.35" text-anchor="middle">6 DAYS</text>

  <!-- Day labels under markers -->
  <g font-family="system-ui" font-size="6" fill="white" opacity="0.12" text-anchor="middle">
    <text x="215" y="272">D1</text>
    <text x="245" y="272">D2</text>
    <text x="275" y="272">D3</text>
    <text x="305" y="272">D4</text>
    <text x="335" y="272">D5</text>
    <text x="365" y="272">D6</text>
  </g>

  <!-- Baseline -->
  <line x1="30" y1="260" x2="370" y2="260" stroke="rgba(255,255,255,0.06)" stroke-width="0.5"/>
</svg>