/* The job, rewritten: the face that asks, the blind-interview cards, and the phone in the Tacit Mind app's look
   (white cards, teal actions, SF Pro). Everything scoped to .sx-job. */
.sx-job{--teal:#0a6f7a;--tlt:#4fc3c0;--dteal:#0f2b31;--pink:#f0abfc}
.sx-job .sx-ov{pointer-events:none}

/* the ask: Matt's face, the sentence, a voice */
.sx-job .face{position:absolute;left:38%;top:54%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:16px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:2;width:min(520px,90%)}
.sx-job .face .ph{width:clamp(130px,15vw,200px);aspect-ratio:1;border-radius:50%;padding:5px;background:conic-gradient(from 200deg,#67e8f9,#c4b5fd,#fcd34d,#67e8f9);box-shadow:0 0 80px -10px rgba(103,232,249,.55)}
.sx-job .face img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:4px solid #04070a}
.sx-job .face .wave{display:flex;align-items:center;gap:4px;height:34px}
.sx-job .face .wave i{width:4px;height:34px;border-radius:2px;background:linear-gradient(#67e8f9,#c4b5fd);transform:scaleY(.15);transition:transform .08s linear}
.sx-job .face q{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(22px,2.6vw,34px);line-height:1.15;letter-spacing:-.015em;color:#fff;text-align:center;quotes:"“" "”"}
.sx-job .face span{font-size:13px;color:#8e9ba3}

/* the interview: two answers, judged blind */
.sx-job .ab{position:absolute;left:38%;top:55%;transform:translate(-50%,-50%);width:min(680px,92%);display:grid;gap:16px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.sx-job .ab-k{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#8e9ba3}
.sx-job .ab q{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.2;color:#fff;quotes:"“" "”"}
.sx-job .ab-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sx-job .ab-c{display:grid;gap:8px;align-content:start;padding:18px 20px;border-radius:18px;background:rgba(12,19,24,.82);border:1px solid #1f2d36;backdrop-filter:blur(8px)}
.sx-job .ab-c b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#16232b;color:#e2e8f0;font-size:13px}
.sx-job .ab-c p{margin:0;font-size:15.5px;line-height:1.5;color:#d6e2e8}
.sx-job .ab-q{margin:0;font-size:15px;color:#fde68a;font-weight:600}.sx-job .ab-q em{font-style:normal;color:#8e9ba3;font-weight:400;margin-left:6px}

/* the phone */
.sx-job .dev{position:absolute;right:max(56px,env(safe-area-inset-right,0px));top:50%;transform:translateY(calc(-50% - 40px));height:min(680px,calc(100% - 220px));aspect-ratio:412/868;pointer-events:none;z-index:2}
.sx-job .phone{position:absolute;inset:0;padding:10px;border-radius:56px;background:linear-gradient(150deg,#5b626a 0%,#23282d 22%,#15191c 60%,#3b4249 100%);box-shadow:0 0 0 1px #6b737b inset,0 0 0 3px #0b0e10 inset,0 50px 100px -30px rgba(0,0,0,.95)}
.sx-job .scr{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:#f4f6f7}
.sx-job .z{position:absolute;left:0;top:0;width:390px;height:calc(100% / var(--k,.7));transform:scale(var(--k,.7));transform-origin:0 0;display:flex;flex-direction:column;background:#f4f6f7;color:#0d1114;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:22px;-webkit-font-smoothing:antialiased}
.sx-job .s-in{animation:jin .5s cubic-bezier(.2,.8,.2,1) both}@keyframes jin{from{opacity:0;transform:scale(var(--k,.7)) translateY(14px)}to{opacity:1;transform:scale(var(--k,.7))}}
.sx-job .sb{position:relative;height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 46px;font-size:17px;font-weight:600}
.sx-job .isl{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.sx-job .sic{display:flex;gap:2px;align-items:flex-end;height:12px}.sx-job .sic i{width:3.5px;border-radius:1px;background:#0d1114}
.sx-job .sic i:nth-child(1){height:4px}.sx-job .sic i:nth-child(2){height:6px}.sx-job .sic i:nth-child(3){height:9px}.sx-job .sic i:nth-child(4){height:12px}
.sx-job .pg{flex:1;overflow:hidden;padding:4px 18px 0}
.sx-job .pg h4{margin:8px 2px 0;font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.02em}
.sx-job .pg .sub{margin:4px 2px 0;font-size:16px;line-height:22px;color:#5b656c}
.sx-job .h{margin:20px 4px 8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6a737c}
.sx-job .cd{margin-top:14px;background:#fff;border-radius:20px;padding:0 16px;box-shadow:0 1px 2px rgba(13,17,20,.04),0 10px 28px -14px rgba(13,17,20,.16)}
.sx-job .h+.cd{margin-top:0}
.sx-job .rw{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 0;border-top:.5px solid #e2e6e9}.sx-job .rw:first-child{border-top:0}
.sx-job .rw div{flex:1;min-width:0;display:grid;gap:2px}.sx-job .rw b{font-weight:500;font-size:16px;line-height:21px}.sx-job .rw span{font-size:13px;line-height:18px;color:#6a737c}
.sx-job .rw em{font-style:normal;font-size:15px;font-weight:600;color:var(--teal);font-variant-numeric:tabular-nums}
.sx-job .btns{display:flex;gap:10px;margin-top:14px}
.sx-job .pri,.sx-job .sec{flex:1;height:50px;border-radius:25px;display:grid;place-items:center;font-size:17px;font-weight:600}
.sx-job .pri{background:var(--teal);color:#fff}.sx-job .sec{background:#e6f2f3;color:var(--teal)}
.sx-job .pri.lt{background:var(--tlt);color:#0f2b31}.sx-job .sec.dk2{background:rgba(255,255,255,.1);color:#fff}
.sx-job .note{margin:14px 4px 0;font-size:14px;line-height:20px;color:#5b656c}
.sx-job .bar{height:8px;border-radius:4px;background:#e2e6e9;margin-top:16px;overflow:hidden}.sx-job .bar i{display:block;height:100%;border-radius:4px;background:var(--teal);width:0}
.sx-job .orb{width:120px;height:120px;margin:60px auto 0;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#14414a,#071518);color:var(--tlt);box-shadow:0 0 0 2px var(--tlt),0 0 60px -6px var(--tlt)}
.sx-job .orb svg{width:52px;height:34px}
.sx-job .bm{margin:44px 0 0 auto;max-width:86%;width:max-content;background:var(--teal);color:#fff;padding:14px 18px;border-radius:24px 24px 6px 24px;font-size:17px;line-height:24px}
.sx-job .lis{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:14px;color:#5b656c}.sx-job .lis i{width:8px;height:8px;border-radius:50%;background:#2e9a6a;animation:jp 1.2s ease infinite}
@keyframes jp{50%{opacity:.3}}
.sx-job .th{display:flex;align-items:center;gap:12px;padding:6px 18px 12px;border-bottom:.5px solid #e2e6e9;background:#fff}
.sx-job .tav{width:40px;height:40px;border-radius:50%;background:#e9d5ff;color:#6b21a8;display:grid;place-items:center;font-weight:700}
.sx-job .th b{display:block;font-size:17px}.sx-job .th span{font-size:13px;color:#6a737c}
.sx-job .chat{flex:1;overflow:hidden;padding:10px 16px;display:flex;flex-direction:column;gap:10px}
.sx-job .m{max-width:84%;padding:12px 15px;font-size:15.5px;line-height:21px;border-radius:20px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.sx-job .m.on{opacity:1;transform:none}
.sx-job .m.them{background:#e9ecee;border-bottom-left-radius:6px;align-self:flex-start}
.sx-job .m.twin{background:var(--teal);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.sx-job .m.twin span{display:block;font-size:11.5px;font-weight:600;opacity:.75;margin-bottom:3px}
.sx-job .m.ask{align-self:stretch;max-width:none;background:#fff7e6;border:1px solid #f2d39a;color:#5c3d0a;font-size:14.5px}
.sx-job .m.ask b{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:12px;background:#fff;border:1px solid #e8c784;font-size:13px}
.sx-job .ev{padding:16px}.sx-job .ev .when{display:block;font-size:13px;color:var(--teal);font-weight:600}.sx-job .ev b{display:block;font-size:20px;line-height:26px;margin-top:4px}.sx-job .ev span:last-child{font-size:13px;color:#6a737c}
.sx-job .dk{margin-top:14px;background:var(--dteal);color:#fff;border-radius:22px;padding:20px;display:grid;gap:6px}
.sx-job .dk .kick{color:var(--tlt);font-size:14px;font-weight:600}.sx-job .dk b{font-size:22px;line-height:28px}.sx-job .dk p{margin:0;color:#cfe8e8;font-size:16px;line-height:22px}
.sx-job .cnt{display:flex;align-items:baseline;gap:8px;margin-top:8px}.sx-job .cnt b{font-size:52px;line-height:56px;font-weight:700;letter-spacing:-.03em}.sx-job .cnt span{font-size:14px;color:var(--tlt);font-weight:600}
.sx-job .big{display:flex;align-items:baseline;gap:10px;margin:18px 4px 0}.sx-job .big b{font-size:56px;line-height:60px;font-weight:700;letter-spacing:-.03em;color:var(--teal)}.sx-job .big span{font-size:15px;color:#5b656c}
.sx-job .gap{padding:6px 16px 14px}.sx-job .gp{padding-top:14px}.sx-job .gp b{font-size:15.5px;font-weight:500}.sx-job .gp .bar{margin-top:8px}.sx-job .gp span{display:block;margin-top:5px;font-size:12.5px;color:#6a737c}
.sx-job .tb{flex:none;height:83px;display:grid;grid-template-columns:repeat(5,1fr);padding-top:8px;background:rgba(250,250,251,.96);border-top:.5px solid #dfe2e5}
.sx-job .tb span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:500;color:#8a929a}
.sx-job .tb i{width:22px;height:22px;border-radius:7px;border:1.6px solid currentColor}
.sx-job .tb span.on{color:var(--teal);font-weight:600}
.sx-job .hb{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#0d1114}

.sx-job .pvb{display:none}
@media (max-width:860px){
  .sx-job .dev{display:none}
  .sx-job .face,.sx-job .ab{left:50%;top:50%}
  .sx-job .ab-row{grid-template-columns:1fr}
  .sx-job .ab{top:52%;gap:12px}
  .sx-job .ab-c{padding:14px 16px;gap:6px}
  .sx-job .ab-c p{font-size:14px;line-height:1.45}
  .sx-job .ab q{font-size:19px}
  .sx-job.jcard .pvb{display:none}
  .sx-job .pvb{all:unset;position:absolute;right:16px;bottom:196px;z-index:8;display:inline-flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border-radius:999px;background:rgba(240,253,250,.95);color:#0f2b31;font:600 13px/1 var(--sans);cursor:pointer;box-shadow:0 10px 30px -10px #000}
  .sx-job .pvb svg{width:14px;height:14px}
  .sx-job.pv .dev{display:block;left:50%;right:auto;top:auto;bottom:200px;transform:translateX(-50%);height:calc(100% - 200px - max(214px,28vh))}
  .sx-job.pv .sx-stats,.sx-job.pv .face,.sx-job.pv .ab{opacity:0!important}
  .sx-job.pv canvas{filter:blur(6px) brightness(.45)}
}
@media (prefers-reduced-motion:reduce){.sx-job .s-in{animation:none}.sx-job .lis i{animation:none}}