/* Employee Database page-specific styles (extends overview.css tokens) */

.ed-hero-wrap { position: relative; border: 1px solid var(--rule); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,23,56,0.20); max-width: 520px; margin-left: auto; }
/* Override payroll-page.css grid so the ED hero mock stays compact */
.ovh:has(.ed-hero-wrap) .ovh-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
@media (max-width: 900px) {
  .ed-hero-wrap { max-width: 100%; margin-left: 0; }
}
.ed-hero-visual { padding: 14px 16px 16px; font: 400 12.5px/1.4 var(--font-body); color: var(--ink); border-radius: 16px; overflow: hidden; }
.ed-hero-float { min-width: 170px; }
.ed-hero-float.pyr-mock-float-tr { top: -22px; right: -28px; }
.ed-hero-float.pyr-mock-float-bl { bottom: -26px; left: -24px; }
@media (max-width: 900px) {
  .ed-hero-float.pyr-mock-float-tr { top: -12px; right: -8px; }
  .ed-hero-float.pyr-mock-float-bl { bottom: -12px; left: -8px; }
  .ed-hero-float { min-width: 140px; padding: 10px 12px; }
}
.ed-hero-toolbar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.ed-hero-t { font: 700 13px/1.2 var(--font-display); color: var(--ink); margin-right: auto; }
.ed-hero-t b { color: #FF5F1F; margin-left: 4px; }
.ed-hero-pill { font: 600 11px/1 var(--font-body); color: var(--ink-2); background: #F0F3F8; border-radius: 999px; padding: 6px 10px; }
.ed-hero-search { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--font-body); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 10px; }

.ed-hero-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 12px/1.4 var(--font-body); }
.ed-hero-tbl th, .ed-hero-tbl td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rule); }
.ed-hero-tbl th { font: 500 10.5px/1.2 var(--font-body); color: var(--ink-3); background: #FCFCFD; }
.ed-hero-tbl tbody tr:last-child td { border-bottom: none; }
.ed-hero-tbl td .ov-avatar { margin-right: 8px; vertical-align: middle; }
.ed-hero-face { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; margin-right: 10px; vertical-align: middle; border: 1px solid var(--rule); }

/* Connection list on Overview section stage */
.ed-slice { padding: 14px 16px; font: 400 12.5px/1.4 var(--font-body); color: var(--ink); background: #fff; border-radius: 12px; }
.ed-slice-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ed-slice-h b { font: 700 13px/1.2 var(--font-display); }
.ed-slice-h .dim { font: 500 11px/1.2 var(--font-mono); color: var(--ink-3); }
.ed-conn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ed-conn li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; }
.ed-conn li b { font: 700 12.5px/1.2 var(--font-display); color: var(--ink); }
.ed-conn li .tag { margin-left: auto; font: 600 10px/1 var(--font-mono); color: var(--ink-3); background: #F0F3F8; border-radius: 999px; padding: 4px 8px; letter-spacing: 0.02em; }
.dot-ok { width: 8px; height: 8px; border-radius: 999px; background: #0F8529; flex: none; box-shadow: 0 0 0 3px rgba(15,133,41,0.12); }

/* Card view (dl) */
.ed-card-head { display: flex; align-items: center; gap: 12px; }
.ed-fields { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.ed-fields dt { font: 500 11px/1.4 var(--font-mono); color: var(--ink-3); letter-spacing: 0.02em; text-transform: uppercase; }
.ed-fields dd { margin: 0; font: 500 13px/1.4 var(--font-body); color: var(--ink); }

/* (Bento grid section reuses payroll-page.css .pyr-feat / .pyr-bento / .pyr-bcard styles.) */
/* Override lg-card widths so headline breaks in 2 lines and description spans full card */
.pyr-feat .pyr-bcard-lg .pyr-bcard-h { max-width: 26ch; font-size: clamp(22px, 1.8vw, 28px) !important; line-height: 1.2 !important; }
.pyr-feat .pyr-bcard-lg .pyr-bcard-d { max-width: none; }
.pyr-feat .pyr-bcard-h { max-width: none; }
.pyr-feat .pyr-bcard-d { max-width: none; }
/* Lower lg card so its height matches the two sm cards beside it */
.pyr-feat .pyr-bcard-lg { grid-row: span 1 !important; padding: clamp(24px, 2.2vw, 32px) !important; }
.pyr-feat .pyr-bcard-lg .pyr-bcard-ic { width: 40px !important; height: 40px !important; border-radius: 10px !important; margin-bottom: 16px !important; }
.pyr-feat .pyr-bcard-lg .pyr-bcard-ic svg { width: 22px !important; height: 22px !important; }

/* ── Full-width bento: 1 lg row + 4 sm row + 3 md row = perfectly 3×12 ── */
.ed-clean .pyr-bento { grid-auto-flow: dense; }
.ed-clean .pyr-bcard-lg { grid-column: span 12 !important; }
.ed-clean .pyr-bcard-lg .pyr-bcard-h { max-width: none; }
@media (max-width: 1100px) {
  .ed-clean .pyr-bcard-lg { grid-column: span 6 !important; }
  .ed-clean .pyr-bcard-md { grid-column: span 3 !important; }
}
@media (max-width: 900px) {
  .ed-clean .pyr-bento { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ed-clean .pyr-bcard,
  .ed-clean .pyr-bcard-lg,
  .ed-clean .pyr-bcard-md,
  .ed-clean .pyr-bcard-sm,
  .ed-clean .pyr-bcard-half { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; }
  .ed-clean .pyr-bcard-lg .pyr-bcard-h,
  .ed-clean .pyr-bcard-md .pyr-bcard-h,
  .ed-clean .pyr-bcard-sm .pyr-bcard-h,
  .ed-clean .pyr-bcard .pyr-bcard-h { font-size: clamp(18px, 5.2vw, 22px) !important; line-height: 1.2 !important; max-width: 100% !important; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; }
  .ed-clean .pyr-bcard-lg .pyr-bcard-d,
  .ed-clean .pyr-bcard .pyr-bcard-d { font-size: 14px !important; max-width: 100% !important; }
  .ed-clean .pyr-bcard { padding: 20px !important; overflow: hidden !important; }
}

@media (max-width: 900px) {
  .ed-fields { grid-template-columns: 1fr; gap: 2px 0; }
  .ed-fields dd { margin-bottom: 6px; }
}

/* ── Employee card slice (reference: PHD001 Adria) ── */
.ec-slice { padding: 0 !important; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,0.75), rgba(245,247,251,0.60)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 30px 60px -24px rgba(0,23,56,0.20), inset 0 0 0 1px rgba(255,255,255,0.45); }
.ec-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 18px 14px; background: rgba(245,247,251,0.55); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid rgba(255,255,255,0.6); }
.ec-head-l { display: flex; gap: 12px; align-items: center; }
.ec-avatar { position: relative; width: 44px; height: 44px; border-radius: 999px; background: #C6EFDA; color: #0F7A48; display: grid; place-items: center; font: 700 15px/1 var(--font-display); }
.ec-avatar-dot { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 999px; background: #0F8529; border: 2px solid #F5F7FB; }
.ec-id { font: 700 10.5px/1 var(--font-mono); color: #FF5F1F; letter-spacing: 0.04em; margin-bottom: 4px; }
.ec-name { font: 700 14.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.ec-pg { font: 500 10.5px/1.2 var(--font-body); color: var(--ink-2); margin-top: 3px; }
.ec-pg b { color: #FF5F1F; font-weight: 700; }
.ec-head-r { display: flex; flex-direction: column; gap: 4px; font: 500 10px/1.3 var(--font-body); color: var(--ink-3); text-align: left; align-items: flex-start; }
.ec-head-r b { color: var(--ink); font-weight: 600; }
.ec-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; font: 700 9.5px/1.2 var(--font-body); }
.ec-badge-ok { background: #0F8529; color: #fff; }
.ec-badge-bad { background: #D22A2A; color: #fff; }
.ec-tabs { display: flex; gap: 4px; background: #001738; padding: 6px 8px; overflow: hidden; }
.ec-tab { flex-shrink: 0; padding: 6px 10px; border-radius: 4px; font: 500 10px/1.2 var(--font-body); color: rgba(255,255,255,0.7); white-space: nowrap; }
.ec-tab.is-on { background: #FF5F1F; color: #fff; font-weight: 700; }
.ec-body { padding: 14px 18px 16px; background: rgba(255,255,255,0.60); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.ec-body-h { margin: 0 0 12px; font: 700 13px/1.2 var(--font-display); color: var(--ink); }
.ec-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; }
.ec-fields dt { font: 600 10.5px/1.2 var(--font-body); color: #FF5F1F; margin-bottom: 3px; }
.ec-fields dt em { font-style: normal; }
.ec-fields dd { margin: 0; font: 500 11px/1.3 var(--font-body); color: var(--ink); }
@media (max-width: 700px) {
  .ec-head { flex-direction: column; }
  .ec-head-r { align-items: flex-start; text-align: left; }
  .ec-fields { grid-template-columns: 1fr 1fr !important; gap: 10px 16px; }
}

/* ── Listing slice (Active/Separated/Draft tabs + table) ── */
.el-slice { padding: 0 !important; border-radius: 14px; overflow: hidden; position: relative; background: linear-gradient(160deg, rgba(255,255,255,0.75), rgba(245,247,251,0.60)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 30px 60px -24px rgba(0,23,56,0.20), inset 0 0 0 1px rgba(255,255,255,0.45); }
.el-title { font: 700 15px/1.2 var(--font-display); color: var(--ink); padding: 14px 16px 10px; letter-spacing: -0.01em; }
.el-tabs { display: flex; gap: 4px; margin: 0 12px; padding: 6px 8px; background: #001738; border-radius: 8px; }
.el-tab { flex-shrink: 0; padding: 6px 12px; border-radius: 6px; font: 500 10.5px/1.2 var(--font-body); color: rgba(255,255,255,0.65); }
.el-tab em { font-style: normal; margin-left: 3px; }
.el-tab.is-on { background: #FF5F1F; color: #fff; font-weight: 700; }
.el-card { position: relative; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,0.7); margin: 10px 12px 12px; border-radius: 12px; padding: 12px 14px 8px; box-shadow: 0 10px 24px -16px rgba(0,23,56,0.20), inset 0 0 0 1px rgba(255,255,255,0.4); }
.el-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.el-card-h h4 { margin: 0; font: 700 12.5px/1.2 var(--font-display); color: var(--ink); }
.el-actions { display: flex; gap: 6px; }
.el-iconbtn { width: 22px; height: 22px; border-radius: 6px; background: #001738; color: #fff; display: inline-grid; place-items: center; }
.el-thead { display: grid; grid-template-columns: 18px 1.5fr 1.4fr 0.9fr 20px; gap: 10px 20px; align-items: center; padding: 0 4px 8px; border-bottom: 1px solid var(--rule); font: 600 9px/1.2 var(--font-body); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.el-thead svg { margin-left: 4px; opacity: 0.6; vertical-align: middle; }
.el-th-chk i { display: block; width: 12px; height: 12px; border: 1.4px solid var(--ink-3); border-radius: 3px; }
.el-row { display: grid; grid-template-columns: 18px 1.5fr 1.4fr 0.9fr 20px; gap: 10px 20px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #EDF0F5; }
.el-row:last-of-type { border-bottom: none; }
.el-lock { width: 20px; height: 20px; border-radius: 5px; background: #E7F5EC; color: #0F8529; display: inline-grid; place-items: center; }
.el-emp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.el-av { width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; font: 700 8.5px/1 var(--font-display); color: #fff; flex-shrink: 0; }
.el-av-img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--rule); }
.el-av-g { background: #28B7B7; }
.el-av-s { background: #8B9AB2; }
.el-av-o { background: #FF7A50; }
.el-av-b { background: #1478D3; }
.el-emp-id { font: 700 9.5px/1.1 var(--font-mono); color: #FF5F1F; letter-spacing: 0.03em; }
.el-emp-n { font: 500 11px/1.2 var(--font-body); color: var(--ink); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-pos { font: 700 10.5px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-date { font: 500 10.5px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; }
.el-more { color: var(--ink-3); text-align: right; display: inline-grid; place-items: center; }
.el-fab { position: absolute; right: 12px; bottom: 12px; width: 28px; height: 28px; border-radius: 999px; background: #FF5F1F; color: #fff; display: grid; place-items: center; font: 500 18px/1 var(--font-body); box-shadow: 0 6px 14px -4px rgba(255,95,31,0.5); }

/* ── Overview hub visual (Section 1 right side) ── */
.ed-hub {
  position: relative; width: 100%; aspect-ratio: 320 / 260; min-height: 280px; padding: 0 !important;
  background:
    radial-gradient(60% 50% at 20% 90%, rgba(255,95,31,0.10), transparent 60%),
    radial-gradient(60% 50% at 90% 10%, rgba(20,151,186,0.08), transparent 60%),
    linear-gradient(180deg, #FAFBFD, #F3F5F9);
  border-radius: 16px;
  overflow: hidden;
}
.ed-hub::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,23,56,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,23,56,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, #000 50%, transparent 82%);
  pointer-events: none;
  z-index: 0;
}
.ed-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ed-hub-lines path { animation: edHubDash 5s linear infinite; }
.ed-hub-lines path:nth-of-type(2) { animation-delay: -1.25s; }
.ed-hub-lines path:nth-of-type(3) { animation-delay: -2.5s; }
.ed-hub-lines path:nth-of-type(4) { animation-delay: -3.75s; }
.ed-hub-pulse { filter: drop-shadow(0 0 6px currentColor); }
.ed-hub-src {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 9px;
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(0,23,56,0.18), inset 0 0 0 1px rgba(255,255,255,0.4);
  animation: edHubDrift 7s ease-in-out infinite; will-change: transform;
}
.ed-hub-src b { display: block; font: 700 11px/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.005em; }
.ed-hub-src small { display: block; font: 500 9.5px/1 var(--font-mono); color: var(--ink-3); margin-top: 3px; letter-spacing: 0.03em; }
.ed-hub-src-ic {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  font: 700 11px/1 var(--font-display);
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(0,23,56,0.20), 0 0 0 3px rgba(255,255,255,0.55);
}
.ed-hub-src-tl { top: 6%; left: 4%; animation-delay: 0s; }
.ed-hub-src-tr { top: 6%; right: 4%; animation-delay: -1.75s; }
.ed-hub-src-bl { bottom: 8%; left: 4%; animation-delay: -3.5s; }
.ed-hub-src-br { bottom: 8%; right: 4%; animation-delay: -5.25s; }
.ed-hub-core {
  position: absolute; z-index: 3;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 66%;
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(255,246,240,0.75));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow:
    0 30px 60px -24px rgba(255,95,31,0.35),
    0 6px 14px -6px rgba(0,23,56,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.55);
  animation: edHubCoreBreathe 5.5s ease-in-out infinite;
}
.ed-hub-core::before,
.ed-hub-core::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 24px;
  border: 1px solid rgba(255,95,31,0.35);
  pointer-events: none;
  animation: edHubRing 4s cubic-bezier(0.22, 0.68, 0.28, 1) infinite;
}
.ed-hub-core::after { animation-delay: -2s; }
.ed-hub-core-inner { display: flex; gap: 12px; align-items: center; }
.ed-hub-face {
  width: 38px; height: 38px; border-radius: 999px; object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(255,95,31,0.35), 0 6px 12px -4px rgba(255,95,31,0.30);
  flex-shrink: 0;
}
@keyframes edHubDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(2px, -4px); }
  50%  { transform: translate(-2px, -6px); }
  75%  { transform: translate(2px, -4px); }
  100% { transform: translate(0, 0); }
}
@keyframes edHubCoreBreathe {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50%     { transform: translate(-50%, -50%) scale(1.015); }
}
@keyframes edHubRing { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes edHubDash { to { stroke-dashoffset: -120; } }
.ed-hub-core-inner { display: flex; gap: 10px; align-items: center; }
.ed-hub-face { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(255,95,31,0.30); flex-shrink: 0; }
.ed-hub-name { font: 700 12.5px/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.ed-hub-sub { font: 500 9.5px/1.2 var(--font-body); color: var(--ink-3); margin-top: 2px; }
.ed-hub-badges { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 6px; }
.ed-hub-badges > span { flex-shrink: 0; font: 600 8.5px/1 var(--font-body); color: #FF5F1F; background: #FFF; border: 1px solid rgba(255,95,31,0.30); padding: 4px 8px; border-radius: 999px; letter-spacing: 0.02em; }
.ed-hub-badges > span > span { all: unset; }
.ed-hub-live { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,95,31,0.25); font: 500 9.5px/1 var(--font-mono); color: var(--ink-2); letter-spacing: 0.02em; }
.ed-hub-live i { width: 6px; height: 6px; border-radius: 999px; background: #0F8529; box-shadow: 0 0 0 3px rgba(15,133,41,0.18); animation: edHubBlink 1.6s ease-in-out infinite; }
@keyframes edHubBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 700px) {
  .ed-hub-src small { display: none; }
  .ed-hub-core { width: 74%; }
}

.ed-callout { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border: 1px solid rgba(255,95,31,0.28); background: linear-gradient(180deg, rgba(255,95,31,0.06), rgba(255,95,31,0.02)); border-radius: 999px; font: 500 14px/1.4 var(--font-body); color: var(--ink); box-shadow: 0 6px 18px -10px rgba(255,95,31,0.30); }
.ed-callout b { color: #FF5F1F; font-weight: 700; }
.ed-callout-ic { width: 28px; height: 28px; border-radius: 999px; background: #FF5F1F; color: #fff; display: inline-grid; place-items: center; flex-shrink: 0; }

/* Widen Overview copy so description doesn't wrap unnaturally narrow */
[data-screen-label="Employee Database · Overview"] .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; }
.ed-overview-copy .fx-lede,
.ed-overview-copy .lede { max-width: 62ch; }
.ed-overview-copy .display-m { max-width: 22ch; }


/* ── Employee Database hero — overview-on-dark ──────────────── */
.ed-hero-dark .ovh-kicker { color: rgba(255,255,255,0.55); letter-spacing: 0.12em; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.ed-hero-dark .ovh-sub { color: rgba(255,255,255,0.78); }
.ed-hero-dark .ovh-sub b { color: #fff; font-weight: 700; }
.ed-hero-dark .ed-callout-dark { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(255,95,31,0.12); border: 1px solid rgba(255,95,31,0.35); color: #fff; font: 500 14px/1.35 var(--font-body); }
.ed-hero-dark .ed-callout-dark b { color: #FF7A3D; font-weight: 700; }
.ed-hero-dark .ed-callout-dark .ed-callout-ic { width: 22px; height: 22px; border-radius: 999px; background: #FF5F1F; color: #fff; display: grid; place-items: center; flex: none; }

.ed-hero-hub-wrap { position: relative; width: 100%; min-width: 0; max-width: 564px; margin-left: auto; padding: 20px; border-radius: 20px; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.ovh.ed-hero-dark .ovh-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
.ed-hero-dark .ovh-media { width: 100% !important; max-width: none !important; min-width: 0 !important; }
.ed-hero-hub-wrap::before { content: none; }
.ed-hero-hub-wrap .ed-hub-dark { position: relative; width: 100%; min-height: 320px; aspect-ratio: 320 / 220; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.ed-hero-hub-wrap .ed-hub-src { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; background: rgba(20,30,55,0.72); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 12px 24px -12px rgba(0,0,0,0.6); font: 600 12px/1.2 var(--font-body); color: #fff; }
.ed-hero-hub-wrap .ed-hub-src b { display: block; font: 700 12.5px/1.2 var(--font-display); color: #fff; }
.ed-hero-hub-wrap .ed-hub-src small { display: block; font: 500 10px/1.2 var(--font-mono); color: rgba(255,255,255,0.55); margin-top: 2px; letter-spacing: 0.02em; }
.ed-hero-hub-wrap .ed-hub-src-ic { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font: 700 12px/1 var(--font-display); flex: none; box-shadow: none !important; border: none !important; }
.ed-hero-hub-wrap .ed-hub-src-tl { top: 4%; left: 4%; }
.ed-hero-hub-wrap .ed-hub-src-tr { top: 4%; right: 4%; }
.ed-hero-hub-wrap .ed-hub-src-bl { bottom: 4%; left: 4%; }
.ed-hero-hub-wrap .ed-hub-src-br { bottom: 4%; right: 4%; }
.ed-hero-hub-wrap .ed-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-hero-hub-wrap .ed-hub-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(180deg, rgba(15,25,50,0.94), rgba(11,20,42,0.94)); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-radius: 16px; padding: 14px 16px; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); width: 74%; max-width: 340px; z-index: 3; }
.ed-hero-hub-wrap .ed-hub-core-inner { display: flex; align-items: center; gap: 12px; }
.ed-hero-hub-wrap .ed-hub-head { min-width: 0; }
.ed-hero-hub-wrap .ed-hub-badges { grid-area: badges; margin-top: 22px !important; padding-left: 46px; }
.ed-hero-hub-wrap .ed-hub-face { width: 34px; height: 34px; border-radius: 999px; border: 2px solid #FF5F1F; object-fit: cover; flex: none; }
.ed-hero-hub-wrap .ed-hub-name { font: 700 13px/1.2 var(--font-display); color: #fff; }
.ed-hero-hub-wrap .ed-hub-sub { font: 500 11px/1.2 var(--font-body); color: rgba(255,255,255,0.6); margin-top: 2px; }
.ed-hero-hub-wrap .ed-hub-badges { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start; gap: 6px !important; margin-top: 12px !important; padding-top: 0; padding-left: 46px; border-top: none; }
.ed-hero-hub-wrap .ed-hub-badges > span { display: inline-flex; align-items: center; justify-content: center; text-align: center; font: 500 9.5px/1 var(--font-body) !important; color: rgba(255,255,255,0.72) !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 999px !important; padding: 4px 10px !important; white-space: nowrap; box-shadow: none !important; letter-spacing: 0.01em !important; width: auto !important; min-width: 0 !important; }
.ed-hero-hub-wrap .ed-hub-badges > span > span { all: unset !important; }
.ed-hero-hub-wrap .ed-hub-badges > span > span { all: unset; }
.ed-hero-hub-wrap .ed-hub-live { margin-top: 16px; padding-top: 0; border-top: none; font: 500 11px/1.2 var(--font-mono); color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; gap: 6px; }
.ed-hero-hub-wrap .ed-hub-live i { width: 6px; height: 6px; border-radius: 999px; background: #0F8529; box-shadow: 0 0 0 3px rgba(15,133,41,0.18); }
@media (max-width: 900px) {
  .ovh.ed-hero-dark .ovh-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ed-hero-hub-wrap { max-width: 100%; margin-left: 0; margin-right: auto; padding: 0; }
  .ed-hero-hub-wrap .ed-hub-dark { min-height: 340px; aspect-ratio: 320/240; }
  .ed-hero-dark .ed-callout-dark { font-size: 13px; }
  .ovh.ed-hero-dark .ovh-ctas { flex-wrap: wrap; }
  .ovh.ed-hero-dark .ovh-ctas .btn { flex: 1 1 auto; }
}

/* ── Desktop-style hub preserved on mobile (scaled down) ── */
@media (max-width: 720px) {
  .ed-hero-hub-wrap .ed-hub-dark { aspect-ratio: auto !important; min-height: 0 !important; height: clamp(360px, 92vw, 460px) !important; }
  .ed-hero-hub-wrap .ed-hub-src { padding: 6px 12px 6px 6px; font-size: 11px; }
  .ed-hero-hub-wrap .ed-hub-src b { font-size: 11.5px; }
  .ed-hero-hub-wrap .ed-hub-src small { font-size: 9px; }
  .ed-hero-hub-wrap .ed-hub-src-ic { width: 22px; height: 22px; font-size: 10.5px; }
  .ed-hero-hub-wrap .ed-hub-core { width: 78%; padding: 12px 14px; }
  .ed-hero-hub-wrap .ed-hub-face { width: 30px; height: 30px; }
  .ed-hero-hub-wrap .ed-hub-name { font-size: 12.5px; }
  .ed-hero-hub-wrap .ed-hub-sub { font-size: 10.5px; }
  .ed-hero-hub-wrap .ed-hub-badges { padding-left: 40px !important; margin-top: 10px !important; }
  .ed-hero-hub-wrap .ed-hub-badges > span { font-size: 9px !important; padding: 3px 8px !important; }
  .ed-hero-hub-wrap .ed-hub-live { font-size: 10px; margin-top: 10px; }
}