/* ===== HERO PRODUCT MOCK — fully self-contained =====
   Markup AND styling live in this one file. The CSS is in the <style> block
   below, scoped under the unique root class `.ptmock-home-hero`, so it needs
   nothing from home.css and can't collide with other mocks. @keyframes are
   kept top-level (animations are global). All CSS variables resolved to literal hex. */
function HomeHeroMock() {
  return (
    <div dangerouslySetInnerHTML={{__html: `
<style>
  @keyframes ptrise    { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
  @keyframes ptfloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes ptviewA   { 0%{opacity:1}45%{opacity:1}50%{opacity:0}95%{opacity:0}100%{opacity:1} }
  @keyframes ptviewB   { 0%{opacity:0}45%{opacity:0}50%{opacity:1}95%{opacity:1}100%{opacity:0} }
  @keyframes ptbadge   { 0%,100%{box-shadow:0 0 0 0 rgba(90,69,222,0)} 50%{box-shadow:0 0 0 5px rgba(90,69,222,.16)} }
  @keyframes ptdotcheck{ 0%,64%{background:#fff;border-color:#C9BBB0} 72%,93%{background:#3E9A6D;border-color:#3E9A6D} 100%{background:#fff;border-color:#C9BBB0} }
  @keyframes pttick2   { 0%,65%{opacity:0;transform:scale(0)} 73%{opacity:1;transform:scale(1.35)} 79%,93%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0)} }
  @keyframes ptqueued  { 0%,66%{opacity:1;transform:translateY(0)} 72%,100%{opacity:0;transform:translateY(-3px)} }
  @keyframes ptdone    { 0%,67%{opacity:0;transform:translateY(3px)} 75%,93%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(3px)} }
  @keyframes ptlabeld  { 0%,64%{color:#8A8078} 72%,93%{color:#2A2420} 100%{color:#8A8078} }
  @keyframes ptcursor  { 0%,57%{opacity:0;transform:translate(13px,15px)} 63%{opacity:1;transform:translate(3px,4px)} 70%{transform:translate(0,1px) scale(.8)} 74%{transform:translate(3px,4px) scale(1)} 88%{opacity:1;transform:translate(3px,4px)} 95%,100%{opacity:0;transform:translate(-5px,-10px)} }

  .ptmock-home-hero { max-width: 1180px; margin: clamp(40px,5vw,64px) auto 0; padding: 0 clamp(20px,5vw,48px); animation: ptrise .85s cubic-bezier(.22,.61,.36,1) both; font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif; }
  .ptmock-home-hero .pt-mock-window { background: #FCFAF8; border: 1px solid #E6DBD2; border-radius: 20px; box-shadow: 0 40px 90px -45px rgba(26,22,19,.4); overflow: hidden; animation: ptfloat 7s ease-in-out 1s infinite; will-change: transform; }
  .ptmock-home-hero .pt-mock-chrome { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid #EEE4DC; background: #F7F1EC; position: relative; z-index: 2; }
  .ptmock-home-hero .pt-mock-dots { display: flex; gap: 7px; }
  .ptmock-home-hero .pt-mock-dot { width: 11px; height: 11px; border-radius: 50%; }
  .ptmock-home-hero .pt-mock-urlbar { margin-left: 6px; position: relative; flex: 1; height: 17px; min-width: 0; overflow: hidden; }
  .ptmock-home-hero .pt-mock-url { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: #8A8078; letter-spacing: .02em; }
  .ptmock-home-hero .pt-mock-url-a { animation: ptviewA 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-mock-url-b { animation: ptviewB 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-mock-badge { margin-left: auto; font-size: 11.9px; font-weight: 600; color: #5A45DE; background: #CEC2EF; padding: 5px 10px; border-radius: 999px; animation: ptbadge 3s ease-in-out 1.4s infinite; }
  .ptmock-home-hero .pt-mock-body { position: relative; min-height: 252px; }
  .ptmock-home-hero .pt-mock-view { position: absolute; inset: 0; padding: 14px 18px 18px; }
  .ptmock-home-hero .pt-mock-view-a { animation: ptviewA 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-mock-view-b { animation: ptviewB 13s ease-in-out infinite; }

  /* Calendar view */
  .ptmock-home-hero .pt-cal { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; height: 100%; }
  .ptmock-home-hero .pt-cal-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .ptmock-home-hero .pt-cal-day-label { font-size: 13px; font-weight: 700; letter-spacing: .07em; color: #A89E95; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }
  .ptmock-home-hero .pt-cal-day-label--today { color: #5A45DE; }
  .ptmock-home-hero .pt-cal-today-pip { font-size: 9.7px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #5A45DE; padding: 1px 5px; border-radius: 999px; }
  .ptmock-home-hero .pt-cal-card { border-radius: 8px; padding: 11px; border-left: 3px solid transparent; }
  .ptmock-home-hero .pt-cal-card--flex { flex: 1; }
  .ptmock-home-hero .pt-cal-card--none { flex: none; }
  .ptmock-home-hero .pt-cal-card--holiday { background: #F4EDE1; border-color: #C9A24E; }
  .ptmock-home-hero .pt-cal-card--green   { background: #E6F0E8; border-color: #3E9A6D; }
  .ptmock-home-hero .pt-cal-card--accent  { background: #EEEAFB; border-color: #5A45DE; }
  .ptmock-home-hero .pt-cal-card--neutral { background: #FCFAF8; border: 1px solid #ECE2DA; border-left: 3px solid #C9BBB0; }
  .ptmock-home-hero .pt-cal-card--focus   { box-shadow: 0 0 0 1.5px rgba(90,69,222,.28); }
  .ptmock-home-hero .pt-cal-title { font-size: 15.1px; font-weight: 700; line-height: 1.2; }
  .ptmock-home-hero .pt-cal-title--dk  { color: #2A2420; }
  .ptmock-home-hero .pt-cal-title--gr  { color: #1F5C40; }
  .ptmock-home-hero .pt-cal-title--hol { color: #7A5E1E; font-size: 11.9px; }
  .ptmock-home-hero .pt-cal-title--hol-badge { margin-left: auto; font-size: 8.6px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9A7B2E; }
  .ptmock-home-hero .pt-cal-sub  { font-size: 11.9px; margin-top: 4px; line-height: 1.35; }
  .ptmock-home-hero .pt-cal-sub--gr { color: #5E8870; }
  .ptmock-home-hero .pt-cal-sub--ac { color: #6E5BC0; }
  .ptmock-home-hero .pt-cal-sub--mu { color: #8A8078; }
  .ptmock-home-hero .pt-cal-av   { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
  .ptmock-home-hero .pt-cal-av-chip { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8.6px; font-weight: 700; flex-shrink: 0; }
  .ptmock-home-hero .pt-cal-av-chip--gr { background: #CDE5D5; color: #1F5C40; }
  .ptmock-home-hero .pt-cal-av-chip--ac { background: #CEC2EF; color: #3A2E78; }
  .ptmock-home-hero .pt-cal-av-name { font-size: 11.3px; color: #8A8078; }
  .ptmock-home-hero .pt-cal-hol-row { display: flex; align-items: center; gap: 6px; }

  /* Dashboard view B */
  .ptmock-home-hero .pt-dash { display: grid; grid-template-columns: 1.12fr 1fr; gap: 12px; height: 100%; }
  .ptmock-home-hero .pt-dash-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .ptmock-home-hero .pt-dash-hero { background: #211B3E; border-radius: 12px; padding: 17px 16px; color: #F4F1FF; }
  .ptmock-home-hero .pt-dash-hero-eyebrow { font-size: 11.9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B6A9F5; }
  .ptmock-home-hero .pt-dash-big { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 5px; }
  .ptmock-home-hero .pt-dash-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 41px; line-height: 1; letter-spacing: -.02em; }
  .ptmock-home-hero .pt-dash-num-sub { font-size: 13.5px; color: #BEB6D8; }
  .ptmock-home-hero .pt-dash-sub-txt { font-size: 12.4px; color: #BEB6D8; margin-bottom: 11px; }
  .ptmock-home-hero .pt-dash-bar { height: 9px; background: rgba(255,255,255,.14); border-radius: 5px; overflow: hidden; }
  .ptmock-home-hero .pt-dash-bar-fill { height: 100%; background: linear-gradient(90deg,#8F7BF0,#B6A9F5); }
  .ptmock-home-hero .pt-dash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; flex: 1; }
  .ptmock-home-hero .pt-dash-stat { background: #FCFAF8; border: 1px solid #ECE2DA; border-radius: 10px; padding: 11px; }
  .ptmock-home-hero .pt-dash-stat-lbl { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A89E95; }
  .ptmock-home-hero .pt-dash-stat-val { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 27px; color: #2A2420; margin-top: 4px; letter-spacing: -.01em; }
  .ptmock-home-hero .pt-dash-stat-val--red { color: #B4452F; }
  .ptmock-home-hero .pt-dash-tasks { background: #FCFAF8; border: 1px solid #ECE2DA; border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .ptmock-home-hero .pt-dash-tasks-lbl { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #A89E95; }
  .ptmock-home-hero .pt-dash-task-row { display: flex; align-items: center; gap: 8px; }
  .ptmock-home-hero .pt-dash-task-row--anim { position: relative; }
  .ptmock-home-hero .pt-dash-task-dot { flex: none; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8.6px; }
  .ptmock-home-hero .pt-dash-task-dot--done { background: #3E9A6D; color: #fff; }
  .ptmock-home-hero .pt-dash-task-dot--live { background: #5A45DE; color: #fff; font-size: 7.6px; font-weight: 700; }
  .ptmock-home-hero .pt-dash-task-dot--anim { border: 1.5px solid #C9BBB0; background: #fff; animation: ptdotcheck 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-dash-task-dot--empty { border: 1.5px solid #C9BBB0; }
  .ptmock-home-hero .pt-dash-task-name { flex: 1; font-size: 15.1px; font-weight: 600; color: #2A2420; }
  .ptmock-home-hero .pt-dash-task-name--anim { animation: ptlabeld 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-dash-task-name--mute { color: #8A8078; }
  .ptmock-home-hero .pt-dash-task-st { font-size: 11.9px; font-weight: 700; }
  .ptmock-home-hero .pt-dash-task-st--done { color: #2F6B47; }
  .ptmock-home-hero .pt-dash-task-st--ac   { color: #5A45DE; }
  .ptmock-home-hero .pt-dash-task-st--mute { color: #A89E95; }
  .ptmock-home-hero .pt-dash-anim-wrap { position: relative; display: inline-block; min-width: 46px; text-align: right; }
  .ptmock-home-hero .pt-dash-anim-q { font-size: 11.9px; font-weight: 700; color: #A89E95; animation: ptqueued 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-dash-anim-d { position: absolute; right: 0; top: 0; font-size: 11.9px; font-weight: 700; color: #2F6B47; animation: ptdone 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-dash-cursor { position: absolute; left: 7px; top: 11px; animation: ptcursor 13s ease-in-out infinite; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
  .ptmock-home-hero .pt-dash-tick { color: #fff; font-size: 9.7px; font-weight: 800; line-height: 1; animation: pttick2 13s ease-in-out infinite; }
  .ptmock-home-hero .pt-dash-prog-bar { height: 4px; background: #EEE4DC; border-radius: 3px; margin-top: 4px; overflow: hidden; }
  .ptmock-home-hero .pt-dash-prog-fill { height: 100%; background: #5A45DE; }

  @media (max-width: 600px) {
    .ptmock-home-hero .pt-cal { grid-template-columns: repeat(3,1fr); }
    .ptmock-home-hero .pt-cal-col:nth-child(4), .ptmock-home-hero .pt-cal-col:nth-child(5) { display: none; }
    .ptmock-home-hero .pt-dash { grid-template-columns: 1fr; }
  }
</style>
<div class="ptmock-home-hero">
  <div class="pt-mock-window">
    <div class="pt-mock-chrome">
      <div class="pt-mock-dots">
        <div class="pt-mock-dot" style="background:#E0C9C0"></div>
        <div class="pt-mock-dot" style="background:#E8DBC4"></div>
        <div class="pt-mock-dot" style="background:#CFE0CC"></div>
      </div>
      <div class="pt-mock-urlbar">
        <span class="pt-mock-url pt-mock-url-a">Pay cycle calendar · June 2026</span>
        <span class="pt-mock-url pt-mock-url-b">Pay run #143 · live progress · June 2026</span>
      </div>
      <span class="pt-mock-badge">On track</span>
    </div>

    <div class="pt-mock-body">
      <div class="pt-mock-view pt-mock-view-a">
        <div class="pt-cal">
          <div class="pt-cal-col">
            <div class="pt-cal-day-label">Mon 8</div>
            <div class="pt-cal-card pt-cal-card--holiday pt-cal-card--none">
              <div class="pt-cal-hol-row">
                <div class="pt-cal-title pt-cal-title--hol">King's Birthday</div>
                <div class="pt-cal-title--hol-badge">Holiday</div>
              </div>
            </div>
            <div class="pt-cal-card pt-cal-card--green pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--gr">Timesheets close</div>
              <div class="pt-cal-sub pt-cal-sub--gr">All sites · 412 staff</div>
              <div class="pt-cal-av">
                <span class="pt-cal-av-chip pt-cal-av-chip--gr">AC</span>
                <span class="pt-cal-av-name">A. Chen · 9:02 AM</span>
              </div>
            </div>
            <div class="pt-cal-card pt-cal-card--neutral pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Change of employment</div>
              <div class="pt-cal-sub pt-cal-sub--mu">2 staff · award change</div>
            </div>
          </div>
          <div class="pt-cal-col">
            <div class="pt-cal-day-label">Tue 9</div>
            <div class="pt-cal-card pt-cal-card--accent pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Reconcile hours</div>
              <div class="pt-cal-sub pt-cal-sub--ac">7 variances flagged</div>
              <div class="pt-cal-av">
                <span class="pt-cal-av-chip pt-cal-av-chip--ac">JM</span>
                <span class="pt-cal-av-name">J. Murphy · due 2:00 PM</span>
              </div>
            </div>
            <div class="pt-cal-card pt-cal-card--green pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--gr">EBA check ✓</div>
              <div class="pt-cal-sub pt-cal-sub--gr">Clause 14 rates verified</div>
            </div>
          </div>
          <div class="pt-cal-col">
            <div class="pt-cal-day-label pt-cal-day-label--today">
              Wed 10<span class="pt-cal-today-pip">Today</span>
            </div>
            <div class="pt-cal-card pt-cal-card--accent pt-cal-card--focus pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Pay run #143</div>
              <div class="pt-cal-av">
                <span class="pt-cal-av-chip pt-cal-av-chip--ac">SP</span>
                <span class="pt-cal-av-name">S. Patel · 11:15 AM</span>
              </div>
            </div>
            <div class="pt-cal-card pt-cal-card--neutral pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Approvals</div>
              <div class="pt-cal-sub pt-cal-sub--mu">2 of 3 signed off</div>
            </div>
          </div>
          <div class="pt-cal-col">
            <div class="pt-cal-day-label">Thu 11</div>
            <div class="pt-cal-card pt-cal-card--green pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--gr">STP lodged ✓</div>
              <div class="pt-cal-sub pt-cal-sub--gr">ATO accepted · #A8821</div>
            </div>
            <div class="pt-cal-card pt-cal-card--accent pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Off-cycle pay run</div>
              <div class="pt-cal-sub pt-cal-sub--ac">Terminations · 3 staff</div>
            </div>
            <div class="pt-cal-card pt-cal-card--neutral pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Bank file</div>
              <div class="pt-cal-sub pt-cal-sub--mu">ABA upload · Westpac</div>
            </div>
          </div>
          <div class="pt-cal-col">
            <div class="pt-cal-day-label">Fri 12</div>
            <div class="pt-cal-card pt-cal-card--neutral pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Payslips</div>
              <div class="pt-cal-sub pt-cal-sub--mu">Published to portal</div>
            </div>
            <div class="pt-cal-card pt-cal-card--neutral pt-cal-card--flex">
              <div class="pt-cal-title pt-cal-title--dk">Super accrued</div>
              <div class="pt-cal-sub pt-cal-sub--mu">$148K · SuperStream</div>
            </div>
          </div>
        </div>
      </div>

      <div class="pt-mock-view pt-mock-view-b">
        <div class="pt-dash">
          <div class="pt-dash-left">
            <div class="pt-dash-hero">
              <div class="pt-dash-hero-eyebrow">Pay run #143 · June 2026</div>
              <div class="pt-dash-big">
                <span class="pt-dash-num">78%</span>
                <span class="pt-dash-num-sub">complete</span>
              </div>
              <div class="pt-dash-sub-txt">11 of 14 tasks · on track for Wed 10 Jun</div>
              <div class="pt-dash-bar"><div class="pt-dash-bar-fill" style="width:78%"></div></div>
            </div>
            <div class="pt-dash-stats">
              <div class="pt-dash-stat">
                <div class="pt-dash-stat-lbl">Approvals</div>
                <div class="pt-dash-stat-val">2<span style="font-size:16.2px;color:#A89E95">/3</span></div>
              </div>
              <div class="pt-dash-stat">
                <div class="pt-dash-stat-lbl">Overdue</div>
                <div class="pt-dash-stat-val pt-dash-stat-val--red">2</div>
              </div>
              <div class="pt-dash-stat">
                <div class="pt-dash-stat-lbl">Employees</div>
                <div class="pt-dash-stat-val">412</div>
              </div>
            </div>
          </div>
          <div class="pt-dash-tasks">
            <div class="pt-dash-tasks-lbl">Task progress</div>
            <div class="pt-dash-task-row">
              <span class="pt-dash-task-dot pt-dash-task-dot--done">✓</span>
              <span class="pt-dash-task-name">Timesheets close</span>
              <span class="pt-dash-task-st pt-dash-task-st--done">Done</span>
            </div>
            <div class="pt-dash-task-row">
              <span class="pt-dash-task-dot pt-dash-task-dot--done">✓</span>
              <span class="pt-dash-task-name">Hours reconciled</span>
              <span class="pt-dash-task-st pt-dash-task-st--done">Done</span>
            </div>
            <div class="pt-dash-task-row pt-dash-task-row--anim">
              <span class="pt-dash-task-dot pt-dash-task-dot--anim">
                <span class="pt-dash-tick">✓</span>
              </span>
              <span class="pt-dash-task-name pt-dash-task-name--anim">Award interpretation</span>
              <span class="pt-dash-anim-wrap">
                <span class="pt-dash-anim-q">In review</span>
                <span class="pt-dash-anim-d">Done</span>
              </span>
              <svg class="pt-dash-cursor" width="19" height="19" viewBox="0 0 24 24">
                <path d="M5 2.5l15 7.5-6.2 1.6L9.8 20z" fill="#2A2420" stroke="#fff" stroke-width="1.3" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="pt-dash-task-row">
              <span class="pt-dash-task-dot pt-dash-task-dot--live">●</span>
              <div style="flex:1;min-width:0">
                <div class="pt-dash-task-name">Pay run #143</div>
                <div class="pt-dash-prog-bar"><div class="pt-dash-prog-fill" style="width:62%"></div></div>
              </div>
              <span class="pt-dash-task-st pt-dash-task-st--ac">62%</span>
            </div>
            <div class="pt-dash-task-row">
              <span class="pt-dash-task-dot pt-dash-task-dot--empty"></span>
              <span class="pt-dash-task-name pt-dash-task-name--mute">STP lodgement</span>
              <span class="pt-dash-task-st" style="color:#A89E95">Queued</span>
            </div>
            <div class="pt-dash-task-row">
              <span class="pt-dash-task-dot pt-dash-task-dot--empty"></span>
              <span class="pt-dash-task-name pt-dash-task-name--mute">Bank file (ABA)</span>
              <span class="pt-dash-task-st" style="color:#A89E95">Queued</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`}}/>
  );
}

window.HomeHeroMock = HomeHeroMock;