/* One readable path: source signals, the Wellist hub, then employer insights. */
#employers .focus-visual {
  --focus-cycle:7.2s;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:116px 48px minmax(0,1fr);
  align-content:stretch;
  gap:22px;
  inset:0;
  width:auto;
  height:auto;
  min-width:0;
  max-width:none;
  max-height:none;
  margin:0;
  padding:26px;
  transform:none;
  container-type:inline-size;
}
#employers .focus-visual .resource-fragments {
  position:relative;
  inset:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  align-self:stretch;
  gap:10px;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
}
#employers .focus-visual .resource-fragment {
  position:relative;
  inset:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  padding:14px 8px 12px;
  border:1px solid #ffffff80;
  border-radius:17px;
  box-shadow:0 5px 12px #294a3e07;
  transform:none;
}
#employers .focus-visual .fragment-one { background:#f1d6e5; color:#913568; }
#employers .focus-visual .fragment-two { background:#bfe6d7; color:#216956; }
#employers .focus-visual .fragment-three { background:#f6dda5; color:#805a1c; }
#employers .focus-visual .resource-fragment strong {
  display:block;
  min-width:0;
  max-width:100%;
  margin:0;
  font:500 13px/1.25 Inter,Arial,sans-serif;
  letter-spacing:-.12px;
  text-align:center;
  overflow-wrap:anywhere;
  hyphens:auto;
}
#employers .focus-visual .fragment-symbol { width:31px; height:31px; flex:none; }
#employers .focus-visual .fragment-symbol .icon { width:27px; height:27px; margin:0; stroke-width:1.4; }
#employers .focus-visual .fragment-orbit { inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); animation:focus-source-orbit var(--focus-cycle) ease-in-out infinite; }
#employers .focus-visual .fragment-orbit circle { opacity:.25; }
#employers .focus-visual .fragment-activity { display:flex; align-items:center; justify-content:center; gap:3px; height:7px; }
#employers .focus-visual .fragment-activity i {
  width:2px;
  height:7px;
  margin:0;
  opacity:.25;
  border-radius:2px;
  animation:focus-source-signal var(--focus-cycle) ease-in-out infinite;
  animation-delay:0s;
}
#employers .focus-visual .fragment-activity i:nth-child(2),
#employers .focus-visual .fragment-activity i:nth-child(4) { animation-delay:.1s; }
#employers .focus-visual .fragment-activity i:nth-child(3) { animation-delay:.2s; }
#employers .focus-visual .focus-junction {
  position:relative;
  inset:auto;
  width:48px;
  height:48px;
  margin:auto;
  transform:none;
  border:1px solid #d1e6d9;
  border-radius:17px;
  background:#1f5454;
  box-shadow:0 0 0 5px #fffdf970,0 5px 14px #2b625c0f;
}
#employers .focus-visual .focus-junction .employer-mark {
  width:29px;
  height:29px;
  color:#c6eddb;
  animation:focus-hub-receive var(--focus-cycle) ease-in-out infinite;
  animation-play-state:paused;
}
#employers[data-motion-running] .focus-visual:not([hidden]) .focus-junction .employer-mark { animation-play-state:running; }
#employers .focus-visual .focus-lines {
  display:block;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  opacity:1;
  animation:none!important;
}
#employers .focus-visual [data-wire="0"] { --wire-color:#ae6390; }
#employers .focus-visual [data-wire="1"] { --wire-color:#498c75; }
#employers .focus-visual [data-wire="2"] { --wire-color:#b08a46; }
#employers .focus-visual [data-wire="3"] { --wire-color:#377c70; }
#employers .focus-visual .wire-track { stroke:var(--wire-color); stroke-width:1.35; opacity:.35; }
#employers .focus-visual .wire-flow {
  stroke:var(--wire-color);
  stroke-width:2.3;
  stroke-dasharray:18 82;
  stroke-dashoffset:18;
  opacity:0;
  animation:focus-input-travel var(--focus-cycle) ease-in-out infinite;
  animation-delay:0s;
}
#employers .focus-visual [data-wire="3"] .wire-flow { animation-name:focus-output-travel; }
#employers .focus-visual .wire-port { width:5px; height:5px; display:block; border:1px solid var(--insight-soft); background:#79aa96; box-shadow:none; }
#employers .focus-visual .fragment-one .port-out { background:#ae6390; }
#employers .focus-visual .fragment-two .port-out { background:#498c75; }
#employers .focus-visual .fragment-three .port-out { background:#b08a46; }
#employers .focus-visual .resource-ledger {
  position:relative;
  inset:auto;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  width:100%;
  max-width:none;
  height:auto;
  padding:16px 18px 12px;
  transform:none;
  border:1px solid #ffffffbd;
  border-radius:20px;
  background:#fffdf9;
  box-shadow:0 10px 24px #384b3d08;
}
#employers .focus-visual .ledger-brand {
  flex:none;
  gap:12px;
  padding:0 0 13px;
  min-height:40px;
  border:0;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.9px;
}
#employers .focus-visual .ledger-brand>span:first-child { min-width:0; }
#employers .focus-visual .ledger-dot { flex:none; animation:focus-output-dot var(--focus-cycle) ease-in-out infinite; }
#employers .focus-visual .opportunity-row {
  flex:1;
  min-height:44px;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  font-size:14px;
  line-height:1.3;
  font-weight:500;
  animation:focus-result-illuminate var(--focus-cycle) ease-in-out infinite;
  animation-delay:0s;
}
#employers .focus-visual .opportunity-overlap { animation-delay:.3s; }
#employers .focus-visual .opportunity-focus { animation-delay:.6s; }
#employers .focus-visual .opportunity-row>span:not(.opportunity-signal) { min-width:0; }
#employers .focus-visual .opportunity-glyph { width:31px; height:31px; }
#employers .focus-visual .opportunity-signal { width:19px; gap:3px; }
#employers .focus-visual .opportunity-signal i { width:3px; height:3px; }
@keyframes focus-source-orbit {
  0%,4% { transform:rotate(-32deg); opacity:.6; }
  28%,100% { transform:rotate(328deg); opacity:.9; }
}
@keyframes focus-source-signal {
  0%,28%,100% { transform:scaleY(.5); opacity:.25; }
  8%,20% { transform:scaleY(1); opacity:.85; }
  14% { transform:scaleY(.65); opacity:.45; }
}
@keyframes focus-input-travel {
  0%,12% { stroke-dashoffset:18; opacity:0; }
  16% { opacity:.95; }
  36% { stroke-dashoffset:-100; opacity:.95; }
  39%,100% { stroke-dashoffset:-100; opacity:0; }
}
@keyframes focus-hub-receive {
  0%,30%,55%,100% { transform:scale(1); opacity:.82; }
  40% { transform:scale(1.08); opacity:1; }
}
@keyframes focus-output-travel {
  0%,40% { stroke-dashoffset:18; opacity:0; }
  43% { opacity:1; }
  57% { stroke-dashoffset:-100; opacity:1; }
  61%,100% { stroke-dashoffset:-100; opacity:0; }
}
@keyframes focus-result-illuminate {
  0%,55%,92%,100% { background:transparent; }
  65%,79% { background:#edf5ed; }
}
@keyframes focus-output-dot {
  0%,55%,92%,100% { opacity:.3; }
  65%,79% { opacity:1; }
}
@media (max-width:1050px) {
  #employers .focus-visual { padding:22px 18px; }
  #employers .focus-visual .resource-fragments { gap:8px; }
  #employers .focus-visual .resource-fragment { padding-inline:6px; border-radius:14px; }
  #employers .focus-visual .resource-fragment strong { font-size:12px; }
  #employers .focus-visual .resource-ledger { padding-inline:14px; }
  #employers .focus-visual .opportunity-row { padding-inline:7px; font-size:13px; }
}
@media (max-width:760px) {
  #employers .focus-visual { grid-template-rows:116px 48px minmax(0,1fr); gap:22px; padding:18px 14px; }
  #employers .focus-visual .resource-fragment { gap:10px; padding:12px 5px; border-radius:14px; }
  #employers .focus-visual .resource-fragment strong { display:block; font-size:11px; line-height:1.3; }
  #employers .focus-visual .fragment-symbol { width:28px; height:28px; }
  #employers .focus-visual .fragment-symbol .icon { width:24px; height:24px; }
  #employers .focus-visual .resource-ledger { padding:14px 12px 10px; border-radius:16px; }
  #employers .focus-visual .ledger-brand { font-size:21px; padding-bottom:11px; letter-spacing:-.8px; }
  #employers .focus-visual .opportunity-row { padding:8px 5px; gap:8px; font-size:12px; }
  #employers .focus-visual .opportunity-glyph { width:29px; height:29px; }
  #employers .focus-visual .opportunity-signal { width:15px; gap:2px; }
}
@media (max-width:380px) {
  #employers .focus-visual { padding-inline:11px; }
  #employers .focus-visual .resource-fragments { gap:6px; }
  #employers .focus-visual .resource-fragment { gap:8px; padding:10px 4px; }
  #employers .focus-visual .resource-fragment strong { font-size:11px; }
  #employers .focus-visual .resource-ledger { padding-inline:9px; }
  #employers .focus-visual .ledger-brand { font-size:20px; }
  #employers .focus-visual .opportunity-row { font-size:12px; gap:7px; }
  #employers .focus-visual .opportunity-glyph { width:27px; height:27px; }
}
@media (prefers-reduced-motion:reduce) {
  #employers .focus-visual *, #employers .focus-visual *::before, #employers .focus-visual *::after { animation:none!important; transition:none!important; }
  #employers .focus-visual .wire-flow { opacity:0; }
}
/* Type follows the illustration width, including the full-width tablet layout. */
@container (min-width:500px) {
  #employers .focus-visual .resource-fragment strong { font-size:14px; }
  #employers .focus-visual .fragment-symbol { width:34px; height:34px; }
  #employers .focus-visual .fragment-symbol .icon { width:30px; height:30px; }
  #employers .focus-visual .opportunity-row { font-size:15px; }
  #employers .focus-visual .opportunity-glyph { width:33px; height:33px; }
}
@container (min-width:700px) {
  #employers .focus-visual .resource-fragment strong { font-size:15px; }
  #employers .focus-visual .opportunity-row { font-size:16px; }
}