/* Home: "Six things teams build" (item 118). Each card has a 5-second CSS loop on a crop of the painting:
   the user's request, the ring on what Skate touches, the change, then the checked line. No JS. */
.jobs-lead { margin-top: 16px; max-width: 640px; font-size: 17px; color: var(--muted); }
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; margin-top: 48px; }
.job .label { display: block; margin: 20px 0 8px; }
.job .h3 { margin-bottom: 8px; }
.jl { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; padding: 18px; display: flex; align-items: center; justify-content: center;
  background: #4f7186 url("img/paint-lilies.webp?v=3") 50% 50% / 260% auto; }
.job:nth-child(2) .jl { background-position: 15% 80%; }
.job:nth-child(3) .jl { background-position: 85% 20%; }
.job:nth-child(4) .jl { background-position: 30% 10%; }
.job:nth-child(5) .jl { background-position: 70% 90%; }
.job:nth-child(6) .jl { background-position: 95% 55%; }
.jl-w { position: relative; width: 100%; max-width: 300px; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px -18px #0008; font-size: 12.5px; line-height: 1.35; color: #1b1b1a; }
.jl-w p { margin: 0; }
.jl-ask { justify-self: end; max-width: 92%; padding: 5px 9px; border-radius: 10px 10px 3px 10px; background: var(--panel); }
.jl-ui { display: grid; gap: 6px; }
.jl-k { color: #6c665d; font-size: 11.5px; }
.jl-t { position: relative; justify-self: start; border-radius: 7px; }
.jl-t::after { content: ""; position: absolute; inset: -5px; border-radius: 10px; border: 2px solid #4f7186; box-shadow: 0 0 0 4px rgb(169 211 230 / .55), 0 0 16px 4px rgb(169 211 230 / .7); opacity: 0; animation: jl-ring 5s var(--o, 0s) infinite; }
.jl-sel { display: grid; padding: 5px 9px; border: 1px solid #e3e3df; font-weight: 500; }
.jl-sel b { grid-area: 1 / 1; font-weight: 500; }
.jl-a { animation: jl-out 5s var(--o, 0s) infinite; }
.jl-b { animation: jl-in 5s var(--o, 0s) infinite; }
.jl-row { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; background: #f7f6f3; }
.jl-row i { font-style: normal; color: #8a8a85; }
.jl-new { background: #eef6fa; }
.jl-btn { padding: 4px 10px; background: #1b1b1a; color: #fff; font-weight: 500; }
.jl-add { display: flex; gap: 6px; align-items: center; }
.jl-in2 { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid #e3e3df; border-radius: 7px; white-space: nowrap; overflow: hidden; }
.jl-tog { width: 30px; height: 18px; border-radius: 99px; background: #d9d6cf; animation: jl-bg 5s var(--o, 0s) infinite; }
.jl-tog i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: jl-knob 5s var(--o, 0s) infinite; }
.jl-link, .jl-page { font: 11px var(--font-mono); }
.jl-nav { grid-auto-flow: column; justify-content: start; gap: 12px; color: #8a8a85; font-size: 11.5px; }
.jl-nav .jl-t { color: #1b1b1a; font-weight: 500; }
.jl-code { padding: 8px 9px; border-radius: 7px; background: #1c1a17; color: #ece7de; font: 10.5px/1.4 var(--font-mono); overflow: hidden; white-space: nowrap; }
.jl-code span { display: block; overflow: hidden; text-overflow: ellipsis; clip-path: inset(0 100% 0 0); animation: jl-type 5s steps(36) var(--o, 0s) infinite; }
.jl-pill { justify-self: end; padding: 5px 12px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #ddd4c6; font: 600 12px var(--font-sans); letter-spacing: -.04em; }
.jl-ok { display: flex; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--ok-soft); color: #16402e; animation: jl-in 5s var(--o, 0s) infinite; animation-name: jl-last; }
.jl-ok svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jl-inbox { gap: 5px; }
.jl-in { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; background: #f7f6f3; opacity: 0; animation: jl-feed 5s calc(var(--o, 0s) + var(--d, 0s)) infinite; }
.jl-in i { font: 500 9.5px var(--font-mono); font-style: normal; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.jl-in .y { color: var(--ok); }
.jl-in .n { color: #a3620a; }

/* One 5 s beat: ask is there, ring finds the target (0.8-2.4 s), the change lands (2.2 s), checked (3 s), hold. */
@keyframes jl-ring { 0%, 14% { opacity: 0; } 18%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes jl-out { 0%, 44% { opacity: 1; } 44.01%, 96% { opacity: 0; } 96.01%, 100% { opacity: 1; } }
@keyframes jl-in { 0%, 44% { opacity: 0; transform: translateY(3px); } 44.01% { opacity: 1; transform: translateY(3px); } 49%, 96% { opacity: 1; transform: none; } 96.01%, 100% { opacity: 0; } }
@keyframes jl-last { 0%, 58% { opacity: 0; transform: translateY(3px); } 64%, 96% { opacity: 1; transform: none; } 96.01%, 100% { opacity: 0; } }
@keyframes jl-bg { 0%, 42% { background: #d9d6cf; } 46%, 96% { background: #1d7a4f; } 100% { background: #d9d6cf; } }
@keyframes jl-knob { 0%, 42% { transform: none; } 46%, 96% { transform: translateX(12px); } 100% { transform: none; } }
@keyframes jl-type { 0% { clip-path: inset(0 100% 0 0); } 36%, 96% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes jl-feed { 0% { opacity: 0; transform: translateY(4px); } 8%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }

/* Reduced motion: the finished state, still. */
@media (prefers-reduced-motion: reduce) {
  .jl-a { opacity: 0; } .jl-b, .jl-ok, .jl-in { opacity: 1 !important; transform: none !important; }
  .jl-tog { background: #1d7a4f; } .jl-tog i { transform: translateX(12px); }
  .jl-code span { clip-path: none; }
  .jl-t::after { opacity: 0; }
}
@media (max-width: 960px) { .jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jobs { grid-template-columns: 1fr; gap: 40px; } .jl { aspect-ratio: 16 / 11; } }