:root{--bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--muted:#6e6e73;--line:#e5e5ea;--red:#c9342b;--green:#16833a;--blue:#0071e3;--shadow:0 18px 55px rgba(0,0,0,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Segoe UI,Roboto,Arial,sans-serif}.nav{height:38px;background:rgba(245,245,247,.82);border-bottom:1px solid rgba(0,0,0,.06);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center}.navin{width:min(1120px,100%);padding:0 20px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:14px;font-weight:700}.nav a{font-size:12px;color:#424245;text-decoration:none;margin-left:16px}.wrap{width:min(1040px,100%);margin:0 auto;padding:14px 20px 44px}.hero{text-align:center;margin:0 0 12px}.hero h1{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:26px;line-height:1.04;letter-spacing:-.035em;margin:0;font-weight:850}.hero h1 span:first-child{color:var(--red)}.hero h1 span:last-child{color:var(--green)}.hero p{font-size:12.5px;color:var(--muted);margin:5px 0 0}
.matrix{position:relative;background:rgba(255,255,255,.52);border-radius:32px;padding:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 1.08fr 1.08fr;grid-template-rows:38px repeat(3,122px);gap:10px 14px;overflow:hidden}.matrix::before{content:"";grid-column:2/4;grid-row:1/5;justify-self:center;width:34px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.05),transparent);pointer-events:none;z-index:0}.groupTitle{display:flex;align-items:center;gap:8px;font-size:26px;font-weight:860;letter-spacing:-.035em;padding:0 10px;z-index:1}.groupTitle span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:15px}.leftTitle{grid-column:1/3;grid-row:1;color:var(--red)}.leftTitle span{background:#fff1f0}.rightTitle{grid-column:3/5;grid-row:1;color:var(--green);padding-left:18px}.rightTitle span{background:#edf9f0}
.tile,.testTile{position:relative;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 11px;min-width:0;box-shadow:0 1px 0 rgba(0,0,0,.02)}.tile b{display:block;font-size:13px;line-height:1.08;letter-spacing:-.01em;padding-right:48px}.tile.left b{color:#4b3b38}.tile.right b{font-size:13.5px;color:#173b24}.tile em{float:right;margin-top:-18px;font-style:normal;font-size:9px;line-height:1;border-radius:999px;padding:4px 6px;font-weight:750}.tile.left em{background:#fff1f0;color:var(--red)}.tile.right em{background:#edf9f0;color:var(--green)}.tile strong{display:block;letter-spacing:-.045em;margin:7px 0 4px}.tile.left strong{font-size:27px;color:var(--red)}.tile.right strong{font-size:21px;color:var(--green)}.tile p{font-size:10.5px;line-height:1.23;color:#747478;margin:0}.tile.left p{color:#746966}.l1{grid-column:1;grid-row:2}.l2{grid-column:2;grid-row:2;margin-right:5px}.r1{grid-column:3;grid-row:2;margin-left:5px}.r2{grid-column:4;grid-row:2}.l3{grid-column:1;grid-row:3}.l4{grid-column:1;grid-row:4}.l5{grid-column:2;grid-row:4;margin-right:5px}.r3{grid-column:4;grid-row:3}.r4{grid-column:3;grid-row:4;margin-left:5px}.r5{grid-column:4;grid-row:4}
.testTile{grid-column:2/4;grid-row:3;margin:9px 28px;padding:11px 14px;border-radius:20px;text-decoration:none;color:var(--text);background:linear-gradient(180deg,#fff,#f7fbff);border-color:rgba(0,113,227,.22);display:flex;flex-direction:column;justify-content:center;box-shadow:0 14px 38px rgba(0,113,227,.13),0 0 0 8px rgba(245,245,247,.92);z-index:3}.testTile .tileTop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.testTile b{font-size:12px;line-height:1.1;color:#1d1d1f}.testTile em{font-style:normal;font-size:8px;line-height:1;border-radius:999px;padding:4px 7px;font-weight:800;background:#e8f2ff;color:#0071e3}.testTile strong{display:block;font-size:23px;line-height:1;letter-spacing:-.055em;margin:8px 0 5px;color:#0071e3}.testTile p{font-size:10px;line-height:1.18;color:#6e6e73;margin:0}.testTile:hover{text-decoration:none;transform:translateY(-1px)}.note{text-align:center;color:#86868b;font-size:11px;margin:8px 0 0}
@media(max-width:760px){.wrap{padding:10px}.nav{height:34px}.nav a{display:none}.hero h1{display:block;font-size:0}.hero h1::before{content:"Old roles shrink.";display:block;color:var(--red);font-size:18px;line-height:1.05;font-weight:850}.hero h1::after{content:"AI roles hire.";display:block;color:var(--green);font-size:18px;line-height:1.05;font-weight:850;margin-top:2px}.hero p{font-size:10.5px;line-height:1.15;max-width:280px;margin:5px auto 0}.matrix{border-radius:22px;padding:8px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:32px 102px 58px repeat(2,102px);gap:7px}.matrix::before{display:none}.groupTitle{font-size:16px;padding:0 3px}.groupTitle span{width:17px;height:17px;font-size:10px}.leftTitle{grid-column:1;grid-row:1}.rightTitle{grid-column:2;grid-row:1}.l1{grid-column:1;grid-row:2}.r1{grid-column:2;grid-row:2}.testTile{grid-column:1/3;grid-row:3;margin:0;padding:7px 10px;border-radius:14px}.l2{grid-column:1;grid-row:4;margin-right:0}.r2{grid-column:2;grid-row:4;margin-left:0}.l3{grid-column:1;grid-row:5}.r3{grid-column:2;grid-row:5}.l4,.l5,.r4,.r5{display:none}.tile{border-radius:14px;padding:7px}.tile b,.tile.right b{font-size:10.5px;padding-right:0}.tile em{float:none;display:inline-block;margin:4px 0 0;font-size:7px;padding:3px 5px}.tile.left strong,.tile.right strong{font-size:16px;margin:5px 0 3px}.tile p{font-size:8.5px;line-height:1.15}.testTile strong{font-size:17px}.testTile p{font-size:8.5px}}

/* final optical polish after strict review */
@media(min-width:761px){.matrix::before{opacity:.55;width:26px}.testTile{transform:translateY(-3px)}.testTile:hover{transform:translateY(-4px)}.note{margin-top:10px;color:#7c7c82}}