/* ============================================================
   desk.cloud — "the new era" benefits + span-of-command styles
   ============================================================ */

/* ---------- benefit cards ---------- */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
@media (max-width: 1080px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .benefits { grid-template-columns: 1fr; } }
.bcard {
  display: grid; gap: 12px; align-content: start; padding: 20px 18px;
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.22)), inset 3px 0 0 var(--line, rgba(0, 245, 255, 0.35));
  transition: box-shadow 0.25s, transform 0.25s;
}
.bcard:hover {
  box-shadow: inset 0 0 0 1px var(--line-strong, #4fe), inset 3px 0 0 var(--accent, #ffd166), 0 0 24px var(--glow, rgba(0, 245, 255, 0.1));
  transform: translateY(-3px);
}
.bcard i[data-lucide], .bcard svg { width: 17px; height: 17px; color: var(--line-strong, #4fe); }
.bcard:hover svg { color: var(--accent, #ffd166); filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.45)); }
.bcard b {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text, #cdeef0); transition: color 0.15s;
}
.bcard:hover b { color: var(--accent, #ffd166); }
.bcard p { margin: 0; font-size: 11px; line-height: 1.7; color: var(--text-dim, #6aa); }
.bcard p code { color: var(--line-strong, #4fe); font-size: 10.5px; }
.bcard .was {
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim, #6aa);
  opacity: 0.75;
}
.bcard .was s { text-decoration-color: var(--error, #ff4d6d); margin-right: 7px; }
.bcard .was em { font-style: normal; color: var(--ok, #21f7a3); }

/* ---------- span-of-command panel ---------- */
.spanpanel {
  position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; margin-top: 16px;
  background: var(--bg-elevated, #07151a);
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.22)), 0 0 40px var(--glow, rgba(0, 245, 255, 0.08));
}
@media (max-width: 940px) { .spanpanel { grid-template-columns: 1fr; } }
.spanpanel::before, .spanpanel::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 0 solid var(--accent, #ffd166); opacity: 0.85; pointer-events: none;
}
.spanpanel::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.spanpanel::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.span-ctl { display: grid; gap: 18px; align-content: start; padding: 22px 20px; border-right: 1px solid var(--line, rgba(0, 245, 255, 0.22)); }
@media (max-width: 940px) { .span-ctl { border-right: 0; border-bottom: 1px solid var(--line); } }
.span-kicker { font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--line-strong, #4fe); }
.ratio { display: flex; align-items: baseline; gap: 13px; }
.ratio b { font-size: 3.4rem; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--accent, #ffd166); text-shadow: 0 0 28px rgba(255, 209, 102, 0.3); }
.ratio .sep { font-size: 1.7rem; color: var(--text-dim, #6aa); }
.ratio output { font-size: 3.4rem; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--line-strong, #4fe); text-shadow: 0 0 28px var(--glow-strong, rgba(0, 245, 255, 0.3)); font-variant-numeric: tabular-nums; }
.ratio-lab { display: flex; gap: 13px; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim, #6aa); }
.ratio-lab .you { color: var(--accent, #ffd166); }
.ratio-lab .agents { margin-left: auto; }

.span-row label {
  display: flex; justify-content: space-between; margin-bottom: 9px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim, #6aa);
}
.span-row label output { color: var(--accent, #ffd166); font-variant-numeric: tabular-nums; }

.span-tele { display: grid; gap: 1px; background: var(--line, rgba(0, 245, 255, 0.18)); box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.18)); }
.st-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 11px; background: var(--term-bg, #02080a);
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim, #6aa);
}
.st-row b { font-size: 13px; color: var(--text, #cdeef0); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.st-row b.a { color: var(--accent, #ffd166); }
.st-row b.g { color: var(--ok, #21f7a3); }
.span-note { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim, #6aa); }
.span-note .p { color: var(--accent, #ffd166); }

/* ---------- project grid (multi-project span of command) ---------- */
.orggrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start;
  padding: 18px; background: var(--term-bg, #02080a);
}
@media (max-width: 520px) { .orggrid { grid-template-columns: 1fr; } }
.proj { display: grid; gap: 9px; padding: 12px 13px; opacity: .4;
  box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.14));
  transition: box-shadow 0.3s, opacity 0.3s; }
.proj.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--line, rgba(0, 245, 255, 0.3)), inset 0 0 18px var(--glow, rgba(0, 245, 255, 0.06)); }
.proj-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.proj-name { font-size: 11.5px; letter-spacing: .4px; color: var(--text-dim, #6aa); transition: color .3s; }
.proj.on .proj-name { color: var(--line-strong, #4fe); }
.proj-br { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim, #6aa); }
.proj-cells { display: flex; gap: 4px; }
.pc { flex: 1; height: 15px; background: rgba(0, 245, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(0, 245, 255, 0.06);
  clip-path: polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); transition: background 0.25s, box-shadow 0.25s; }
.pc.on { background: var(--line-strong, #4fe); box-shadow: 0 0 7px var(--glow-strong, rgba(0, 245, 255, 0.4)); }
.pc.att { background: var(--accent, #ffd166) !important; box-shadow: 0 0 9px rgba(255, 209, 102, 0.7) !important; animation: youpulse 1.6s ease-in-out infinite; }
.proj-n { font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim, #6aa); font-variant-numeric: tabular-nums; }
.proj.on .proj-n { color: var(--accent, #ffd166); }
@keyframes youpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.55); } }
@media (prefers-reduced-motion: reduce) { .pc.att { animation: none; } }
.org-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-dim, #6aa); }
.org-foot .lg { display: inline-flex; align-items: center; gap: 6px; }
.org-foot .lg i { width: 7px; height: 7px; display: inline-block; }
.org-foot .lg .ly { background: var(--accent, #ffd166); box-shadow: 0 0 6px rgba(255, 209, 102, 0.6); }
.org-foot .lg .lc { background: var(--line-strong, #4fe); box-shadow: 0 0 6px var(--glow-strong); }