<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Which Step Is Your Company On?</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0c0e16;
  color: #e8eaf0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 20px 16px 28px;
  min-height: 100%;
}
h1 {
  font-size: 17px;
  font-weight: 700;
  color: #f0f2f8;
  margin-bottom: 5px;
  line-height: 1.3;
}
.sub {
  font-size: 12px;
  color: #6a7090;
  margin-bottom: 18px;
}
.steps-bar { display: flex; gap: 6px; margin-bottom: 22px; }
.dot {
  flex: 1; height: 4px; border-radius: 2px;
  background: #1e2030; transition: background 0.35s;
}
.dot.active { background: #4f6ef7; }
.dot.done { background: #22c55e; }

.card {
  background: #141621;
  border: 1px solid #1e2130;
  border-radius: 12px;
  padding: 18px 15px 16px;
  display: none;
}
.card.show { display: block; }

.qnum {
  font-size: 10px; font-weight: 700;
  color: #4f6ef7; text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 9px;
}
.qtext {
  font-size: 14px; line-height: 1.5;
  color: #dde0ee; margin-bottom: 16px;
}
.btns { display: flex; gap: 10px; }
.btn {
  flex: 1; padding: 11px 8px;
  border-radius: 8px; border: 1.5px solid #282b3e;
  background: #191c29; color: #b0b4cc;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn:hover { border-color: #4f6ef7; color: #c8d4ff; }

.result {
  background: #10131f;
  border: 1.5px solid #3a4ecc;
  border-radius: 12px;
  padding: 20px 15px 18px;
  display: none;
  animation: up 0.35s ease;
}
.result.show { display: block; }
@keyframes up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.rlabel {
  font-size: 10px; font-weight: 700;
  color: #4f6ef7; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 9px;
}
.rtitle {
  font-size: 16px; font-weight: 700;
  color: #f0f2f8; margin-bottom: 10px;
  line-height: 1.35;
}
.rbody {
  font-size: 12px; line-height: 1.6;
  color: #8a90aa;
}
.rbody strong { color: #bcc0d4; }
.reset {
  margin-top: 14px;
  background: transparent; border: 1px solid #222436;
  color: #505570; padding: 7px 14px;
  border-radius: 6px; font-size: 11px;
  cursor: pointer; transition: all 0.2s;
}
.reset:hover { border-color: #4f6ef7; color: #8090cc; }
.note {
  font-size: 10px; color: #383c55;
  margin-top: 16px; line-height: 1.5;
}
</style>
</head>
<body>

<h1>Which Step Is Your Company On?</h1>
<p class="sub">3 questions &bull; Based on the 2026 AI layoff playbook</p>

<div class="steps-bar">
  <div class="dot" id="d1"></div>
  <div class="dot" id="d2"></div>
  <div class="dot" id="d3"></div>
</div>

<div class="card show" id="q1">
  <div class="qnum">Question 1 of 3</div>
  <div class="qtext">Has your company announced significant layoffs in the last 18 months — publicly connecting them to AI, efficiency, or &ldquo;funding innovation&rdquo;?</div>
  <div class="btns">
    <button class="btn" onclick="ans(1,true)">Yes</button>
    <button class="btn" onclick="ans(1,false)">No / Not sure</button>
  </div>
</div>

<div class="card" id="q2">
  <div class="qnum">Question 2 of 3</div>
  <div class="qtext">Did the restructuring target management layers &mdash; flattening hierarchies, eliminating manager roles, increasing team sizes, or mandating AI tools for remaining employees?</div>
  <div class="btns">
    <button class="btn" onclick="ans(2,true)">Yes</button>
    <button class="btn" onclick="ans(2,false)">No / Not sure</button>
  </div>
</div>

<div class="card" id="q3">
  <div class="qnum">Question 3 of 3</div>
  <div class="qtext">Has your company announced new AI infrastructure spending, an AI-focused hiring push, or a public commitment to AI investment in the same period?</div>
  <div class="btns">
    <button class="btn" onclick="ans(3,true)">Yes</button>
    <button class="btn" onclick="ans(3,false)">No / Not sure</button>
  </div>
</div>

<div class="result" id="res">
  <div class="rlabel" id="rl"></div>
  <div class="rtitle" id="rt"></div>
  <div class="rbody" id="rb"></div>
  <button class="reset" onclick="restart()">Start over</button>
</div>

<p class="note">Pattern sourced from: Atlassian 8-K (March 2026), CNBC/Fortune on Coinbase (May 2026), CNBC/CNN on Meta (May 2026), TechCrunch AI layoffs tracker (July 2026).</p>

<script>
var a={};

function show(id){document.getElementById(id).classList.add('show');}
function hide(id){document.getElementById(id).classList.remove('show');}
function mark(n,cls){var d=document.getElementById('d'+n);d.classList.remove('active','done');d.classList.add(cls);}

function ans(q,val){
  a[q]=val;
  mark(q,'done');
  hide('q'+q);
  if(q===1&&val){mark(2,'active');show('q2');}
  else if(q===1&&!val){finish();}
  else if(q===2){mark(3,'active');show('q3');}
  else if(q===3){finish();}
}

function finish(){
  mark(1,'done');mark(2,'done');mark(3,'done');
  var q1=!!a[1],q2=!!a[2],q3=!!a[3];
  var label,title,body;
  if(!q1){
    label='Step 0 — No clear signals yet';
    title='No visible signs of the playbook at your company.';
    body='Either the cycle hasn\'t started, or it\'s being framed differently. <strong>Watch for:</strong> any announcement that pairs restructuring language with AI investment language in the same communication. That pairing is how Step 1 typically surfaces in earnings calls, all-hands, or press releases.';
  } else if(q1&&!q2&&!q3){
    label='Step 1 — The announcement';
    title='Your company made the cut. Steps 2 and 3 often follow.';
    body='At Atlassian, Coinbase, and Meta, Steps 2 and 3 arrived within one to two quarters of the initial layoff. <strong>Watch for:</strong> management restructuring communications (team size changes, manager role eliminations, AI tool mandates) and earnings call language about AI infrastructure or efficiency investments.';
  } else if(q1&&q2&&!q3){
    label='Step 2 — The restructuring';
    title='Your company is reorganizing around AI.';
    body='Management layers are being redesigned to run leaner, with AI absorbing coordination tasks. <strong>What typically follows:</strong> a Step 3 announcement — public AI investment commitments, infrastructure spending disclosures, or a visible shift toward AI-focused hiring. Earnings calls and investor presentations are where Step 3 usually surfaces first.';
  } else if(q1&&q2&&q3){
    label='Step 3 — Full playbook complete';
    title='Your company has run all three steps.';
    body='This matches the Atlassian / Coinbase / Meta pattern in full. The layoff phase is likely behind you — the AI build phase is now underway. <strong>What comes next:</strong> public demonstrations of AI ROI, agent-driven workflow announcements, or new product launches built on the infrastructure the layoffs funded.';
  } else if(q1&&!q2&&q3){
    label='Steps 1 + 3 — Skipped the middle';
    title='Layoffs and AI investment — without the management overhaul.';
    body='An unusual combination. Either Step 2 is arriving late, it’s happening quietly without a public announcement, or your company is running a variation of the script. <strong>Watch for:</strong> silent changes in team ratios, manager-to-IC balance, or AI tool adoption requirements rolling out over the next few quarters.';
  }
  document.getElementById('rl').textContent=label;
  document.getElementById('rt').textContent=title;
  document.getElementById('rb').innerHTML=body;
  show('res');
}

function restart(){
  a={};
  ['q1','q2','q3','res'].forEach(function(id){hide(id);});
  ['d1','d2','d3'].forEach(function(id){var d=document.getElementById(id);d.classList.remove('active','done');});
  show('q1');
}
</script>
</body>
</html>