/* ============ NAV DROPDOWN ============ */
.nav-drop{position:relative;display:inline-block}
.nav-drop > a{display:inline-flex;align-items:center;gap:6px}
.nav-drop > a .caret{font-size:9px;opacity:0.6;transition:transform .2s}
.nav-drop:hover > a .caret{transform:translateY(1px);opacity:1}
.nav-dropdown{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-4px);
  background:var(--paper);border:1px solid var(--line-2);border-radius:18px;
  padding:24px;min-width:680px;
  box-shadow:0 32px 80px -28px rgba(21,20,15,0.28), 0 4px 12px -4px rgba(21,20,15,0.08);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .18s, transform .18s, visibility 0s linear .18s;
  z-index:100;
}
.nav-drop:hover .nav-dropdown,
.nav-drop:focus-within .nav-dropdown{
  opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity .18s, transform .18s, visibility 0s;
}
.nd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px}
.nd-col{display:flex;flex-direction:column;gap:2px}
.nd-h{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mute);margin-bottom:8px;padding:0 10px;
}
.nd-col a{
  font-size:13.5px;color:var(--ink-2);padding:7px 10px;border-radius:8px;
  text-decoration:none;line-height:1.3;
}
.nd-col a:hover{background:rgba(196,106,44,0.08);color:var(--ink)}
.nd-foot{
  margin-top:18px;padding:14px 10px 4px;border-top:1px dashed var(--line-2);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--mute);
}
.nd-foot a{color:var(--amber);font-weight:500}

/* ============ FILTER BAR ============ */
.uc-filter-bar{padding:24px 0 8px;background:transparent;position:sticky;top:64px;z-index:20;backdrop-filter:blur(8px);background:rgba(247,244,238,0.85)}
.uc-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 0}
.uc-chip{
  appearance:none;border:1px solid var(--line-2);background:var(--paper);
  font:500 13px/1 var(--sans);color:var(--ink-2);
  padding:9px 16px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .15s;
}
.uc-chip:hover{border-color:var(--ink-2);color:var(--ink)}
.uc-chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.uc-chip-n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.04em;
  background:rgba(21,20,15,0.06);padding:2px 7px;border-radius:99px;
}
.uc-chip.active .uc-chip-n{background:rgba(247,244,238,0.16);color:rgba(247,244,238,0.7)}

/* ============ ROLE GRID ============ */
.uc-grid-section{padding:32px 0 100px}
.uc-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
}
@media (max-width:1280px){ .uc-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:880px){ .uc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .uc-grid{grid-template-columns:1fr} }

.uc-card{
  position:relative;display:flex;flex-direction:column;gap:0;
  background:var(--paper);border:1px solid var(--line-2);border-radius:16px;
  overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.uc-card:hover{
  transform:translateY(-3px);
  border-color:var(--ink-2);
  box-shadow:0 24px 48px -28px rgba(21,20,15,0.25);
}

/* Top art panel — colored accent */
.uc-art{
  position:relative;height:130px;
  background:color-mix(in oklab, var(--accent) 9%, var(--paper));
  border-bottom:1px solid var(--line-2);
  padding:18px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.uc-art::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 10%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%);
  pointer-events:none;
}

/* Meta block — bottom */
.uc-meta{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.uc-cat{
  font-family:var(--serif);font-size:22px;letter-spacing:-0.01em;line-height:1.1;
  color:var(--ink);
}
.uc-snip{font-size:13px;line-height:1.5;color:var(--ink-3);flex:1}
.uc-foot{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;
  color:var(--mute);text-transform:uppercase;
  padding-top:10px;border-top:1px dashed var(--line-2);
}
.uc-arr{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  transition:transform .2s;
}
.uc-card:hover .uc-arr{transform:translateX(4px);color:var(--accent)}

/* ============ ART PIECES (mini illustrations) ============ */
.uc-art-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.uc-tile{
  font-family:var(--mono);font-size:10px;letter-spacing:0.04em;
  background:var(--paper);border:1px solid var(--line-2);
  padding:5px 10px;border-radius:6px;color:var(--ink-2);
  box-shadow:0 2px 8px -3px rgba(21,20,15,0.08);
}
.uc-tile.light{background:color-mix(in oklab, var(--accent) 15%, var(--paper));border-color:color-mix(in oklab, var(--accent) 30%, var(--line-2));color:var(--ink)}

/* Sales: stacked tiles + arrow */
.uc-art-sales{flex-direction:column;gap:6px;align-items:center;justify-content:center;padding-top:16px}
.uc-art-sales .uc-art-arrow{
  position:absolute;right:16px;bottom:14px;
  color:var(--accent);font-size:18px;font-family:var(--mono);
}

/* Support: ticket stack */
.uc-tile-stack{display:flex;flex-direction:column;gap:5px;width:100%;max-width:160px}
.uc-ticket{
  display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line-2);
  padding:6px 10px;border-radius:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-2);
}
.uc-ticket .dot{width:7px;height:7px;border-radius:50%;background:#C73E3E;display:inline-block;flex-shrink:0}
.uc-ticket .dot.dot-amb{background:var(--amber)}
.uc-ticket .dot.dot-grn{background:#4F7A6B}

/* Marketing: bars */
.uc-bars{display:flex;align-items:flex-end;gap:6px;height:60px}
.uc-bars i{width:14px;background:var(--accent);border-radius:2px 2px 0 0;display:block;opacity:0.85}
.uc-bars i:nth-child(2n){opacity:0.6}
.uc-art-tag{
  position:absolute;bottom:10px;left:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.10em;
  color:var(--mute);text-transform:uppercase;
}
.uc-art-marketing{flex-direction:column;justify-content:flex-start;padding-top:24px}

/* Real estate: doc lines */
.uc-art-realestate{flex-direction:column;gap:8px;align-items:center;padding-top:18px}
.uc-doc{
  width:90px;background:var(--paper);border:1px solid var(--line-2);
  border-radius:4px;padding:8px 6px;display:flex;flex-direction:column;gap:4px;
  box-shadow:0 2px 8px -4px rgba(21,20,15,0.10);
}
.uc-doc.small{width:70px;transform:rotate(-3deg);margin-top:-12px;margin-left:30px}
.uc-doc span{height:3px;background:color-mix(in oklab, var(--accent) 25%, var(--line-2));border-radius:99px}
.uc-doc span.short{width:60%}

/* Legal: clauses */
.uc-art-legal{flex-direction:column;gap:6px;align-items:stretch;padding:16px 22px;justify-content:center}
.uc-clause{
  display:flex;align-items:center;gap:10px;
  background:var(--paper);border-left:2px solid var(--accent);
  padding:5px 10px;border-radius:0 4px 4px 0;
  font-family:var(--mono);font-size:10px;color:var(--ink-2);
}
.uc-clause b{color:var(--accent);font-weight:500;flex-shrink:0}
.uc-clause span{flex:1;height:2.5px;background:var(--line-2);border-radius:99px}
.uc-clause i.tag{
  font-style:normal;font-family:var(--mono);font-size:9px;
  background:color-mix(in oklab, var(--accent) 18%, var(--paper));
  color:var(--accent);padding:2px 6px;border-radius:4px;
}

/* Recruiting: candidate stack */
.uc-art-recruiting{flex-direction:column;gap:5px;align-items:stretch;padding:14px 22px;justify-content:center}
.uc-cand{
  display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:6px;
  padding:5px 8px;font-family:var(--mono);font-size:10px;color:var(--ink-2);
}
.uc-cand .av{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.uc-cand .av1{background:linear-gradient(135deg,#D9A35E,#C46A2C)}
.uc-cand .av2{background:linear-gradient(135deg,#7BA8B8,#4F7A6B)}
.uc-cand .av3{background:linear-gradient(135deg,#C18EB0,#8B4F75)}
.uc-cand span{flex:1;color:var(--ink)}
.uc-cand i{
  font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:0.04em;
  color:var(--accent);text-transform:uppercase;
}

/* Finance: pixel grid */
.uc-art-finance{flex-direction:column;gap:8px;justify-content:flex-start;padding-top:22px}
.uc-grid-mini{display:grid;grid-template-columns:repeat(4, 12px);gap:3px}
.uc-grid-mini i{width:12px;height:12px;background:color-mix(in oklab, var(--accent) 20%, var(--line));border-radius:2px}
.uc-grid-mini i.hot{background:var(--accent)}

/* Ops: pipeline */
.uc-art-ops{padding:18px}
.uc-pipe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.uc-node{
  font-family:var(--mono);font-size:10px;
  background:var(--paper);border:1px solid var(--line-2);
  padding:5px 10px;border-radius:4px;color:var(--ink-2);
}
.uc-node.hot{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.uc-line{width:14px;height:1px;background:var(--accent);position:relative}
.uc-line::after{content:"▸";position:absolute;right:-6px;top:-7px;font-size:9px;color:var(--accent)}

/* PM: status pills */
.uc-art-pm{flex-direction:column;gap:5px;align-items:stretch;padding:16px 22px;justify-content:center}
.uc-status{
  display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:6px;
  padding:5px 10px;font-family:var(--mono);font-size:9.5px;color:var(--mute);
  letter-spacing:0.06em;text-transform:uppercase;
}
.uc-status b{color:#4F7A6B;font-weight:500}
.uc-status.amber b{color:var(--amber)}
.uc-status span{flex:1;height:3px;background:color-mix(in oklab, #4F7A6B 50%, var(--line-2));border-radius:99px}
.uc-status.amber span{background:color-mix(in oklab, var(--amber) 50%, var(--line-2))}

/* EA: tiny calendar */
.uc-art-ea{padding:14px}
.uc-cal{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:3px;width:100%;height:80px;
}
.uc-cal i.ev{
  display:block;background:color-mix(in oklab, var(--accent) 30%, var(--line));border-radius:3px;
  align-self:start;
}
.uc-cal i.ev.a{height:60%;margin-top:10%;background:var(--accent)}
.uc-cal i.ev.b{height:40%;margin-top:30%;opacity:0.7}
.uc-cal i.ev.c{height:75%;margin-top:5%;background:var(--accent);opacity:0.85}
.uc-cal i.ev.d{height:30%;margin-top:55%;opacity:0.6}
.uc-cal i.ev.e{height:50%;margin-top:25%;opacity:0.8}

/* Analysts: line chart */
.uc-art-analysts{flex-direction:column;justify-content:flex-start;padding-top:20px;color:var(--accent)}
.uc-line-chart{width:100%;max-width:160px;height:60px}
.uc-line-chart svg{width:100%;height:100%;display:block}

/* Consultants: deck */
.uc-art-consultants{flex-direction:column;gap:8px;justify-content:flex-start;padding-top:22px}
.uc-deck{position:relative;width:120px;height:60px}
.uc-deck span{
  position:absolute;width:96px;height:54px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:5px;
  box-shadow:0 4px 10px -4px rgba(21,20,15,0.15);
}
.uc-deck span:nth-child(1){left:0;top:0;background:color-mix(in oklab, var(--accent) 20%, var(--paper));border-color:color-mix(in oklab, var(--accent) 35%, var(--line-2))}
.uc-deck span:nth-child(2){left:12px;top:4px}
.uc-deck span:nth-child(3){left:24px;top:8px;opacity:0.6}

/* Founders: mail rows */
.uc-art-founders{flex-direction:column;gap:5px;align-items:stretch;padding:16px 22px;justify-content:center}
.uc-mail{
  display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:6px;
  padding:5px 10px;font-family:var(--mono);font-size:10px;color:var(--ink-2);
}
.uc-mail i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}
.uc-mail i.amber{background:var(--amber)}
.uc-mail i.grn{background:#4F7A6B}

/* Healthcare: form rows */
.uc-art-healthcare{flex-direction:column;gap:6px;align-items:stretch;padding:16px 22px;justify-content:center}
.uc-form{
  display:flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:5px;
  padding:5px 10px;
}
.uc-form .lbl{width:24px;height:5px;background:color-mix(in oklab, var(--accent) 35%, var(--line-2));border-radius:99px}
.uc-form .val{flex:1;height:5px;background:var(--line-2);border-radius:99px}
.uc-form .val.short{flex:0 0 50%}

/* Eng/IT: terminal */
.uc-art-engops{padding:14px}
.uc-term{
  width:100%;background:#15140F;border-radius:6px;padding:10px 12px;
  font-family:var(--mono);font-size:10px;color:rgba(247,244,238,0.85);
  display:flex;flex-direction:column;gap:4px;
}
.uc-term .g{color:#4F7A6B}
.uc-term .amb{color:var(--amber)}
.uc-term .grn{color:#7BC4A8}

/* ============ TEAMS STRIP overrides for use-cases page (if needed) ============ */
/* (uses pricing.css .ts-card etc) */