/* ==========================================================================
   Job-page depth blocks — the portable copy.

   assets/lander.css already carries .jobdeep / .jobsteps / .jobnever / .jobfaq
   for the /ai-* lander pages. The band pages (ai-social-media-manager,
   personal-mode, mac-app) and the /examples/ pages never load lander.css —
   they run style.css + ds.css + skin.css + theme.css — so the same rules are
   restated here against the tokens those pages do define.

   Deliberately NOT solved by linking lander.css on those pages: lander.css
   restyles base elements and would fight skin.css. This file styles nothing
   but the four blocks.

   Tokens: theme.css (loaded last, dark) defines --accent, --surface, --muted
   and --border on :root. The fallbacks are for any page that ever loses it.
   ========================================================================== */

.jobdeep-wrap{
  width:100%;max-width:760px;margin:0 auto;text-align:left;
}

.jobdeep{margin:52px 0}
.jobdeep h2{
  font-size:clamp(21px,3vw,27px);letter-spacing:-.02em;margin:0 0 18px;
  line-height:1.2;text-wrap:balance;
}
.jobdeep > p{
  color:var(--muted,#a9b1ba);max-width:62ch;line-height:1.62;margin:0;
}
.jobdeep > p + .jobsteps{margin-top:18px}

.jobsteps{list-style:none;counter-reset:js;display:grid;gap:12px;margin:0;padding:0}
.jobsteps li{
  counter-increment:js;position:relative;display:grid;gap:3px;
  padding:15px 17px 15px 52px;
  border:1px solid var(--border,rgba(255,255,255,.09));border-radius:13px;
  background:var(--surface,rgba(255,255,255,.04));
  text-align:left;
}
.jobsteps li::before{
  content:counter(js);position:absolute;left:16px;top:15px;
  width:23px;height:23px;border-radius:7px;display:grid;place-items:center;
  background:var(--accent,#c6ff34);color:#0d0f0d;font-size:12.5px;font-weight:700;
  line-height:1;
}
.jobsteps strong{font-size:15.5px;letter-spacing:-.01em;font-weight:650}
.jobsteps span{color:var(--muted,#a9b1ba);font-size:14.5px;line-height:1.55}

.jobnever{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.jobnever li{
  position:relative;padding:11px 15px 11px 40px;font-size:14.5px;line-height:1.5;
  border:1px solid var(--border,rgba(255,255,255,.09));
  border-left:2px solid rgba(198,255,52,.4);
  border-radius:11px;background:var(--surface,rgba(255,255,255,.04));
  color:inherit;text-align:left;
}
/* a struck-through mark, because this is the list of things it won't do */
.jobnever li::before{
  content:"";position:absolute;left:17px;top:50%;width:11px;height:11px;
  margin-top:-5.5px;border-radius:50%;
  border:1.5px solid var(--accent,#c6ff34);
  background:linear-gradient(to bottom right,transparent 45%,var(--accent,#c6ff34) 45%,var(--accent,#c6ff34) 55%,transparent 55%);
}
.jobnote{margin:15px 0 0;font-size:13.5px;color:var(--muted,#a9b1ba);max-width:62ch;line-height:1.6}

.jobfaq{display:grid;gap:9px}
.jobfaq details{
  border:1px solid var(--border,rgba(255,255,255,.09));border-radius:12px;
  background:var(--surface,rgba(255,255,255,.04));overflow:hidden;
}
.jobfaq summary{
  cursor:pointer;list-style:none;padding:14px 44px 14px 17px;position:relative;
  font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.4;
}
.jobfaq summary::-webkit-details-marker{display:none}
.jobfaq summary::after{
  content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;
  margin-top:-5px;
  border-right:1.8px solid var(--accent,#c6ff34);
  border-bottom:1.8px solid var(--accent,#c6ff34);
  transform:rotate(45deg);transition:transform .18s ease;
}
.jobfaq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.jobfaq summary:hover{background:var(--control-fill,rgba(255,255,255,.06))}
.jobfaq p{
  padding:0 17px 15px;margin:0;color:var(--muted,#a9b1ba);
  font-size:14.5px;line-height:1.62;max-width:62ch;
}
@media (prefers-reduced-motion:reduce){.jobfaq summary::after{transition:none}}