/* Hidden SVG definitions container */
.svg-defs-hidden { height: 0; width: 0; position: absolute; visibility: hidden; }

/* Hero Mock-UI Styles */
.mock-shell { position: relative; z-index: 1; display: grid; gap: 18px; }
.mock-window {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(196,208,220,0.95);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 24px 52px rgba(12,36,63,0.12);
}
.mock-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: rgba(237,243,249,0.85);
  border-bottom: 1px solid #DCE4EC;
}
.mock-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 430px; }
.mock-sidebar {
  background: linear-gradient(180deg, #0D1B2A, #11263c);
  color: rgba(255,255,255,0.85); padding: 20px 16px;
  display: grid; gap: 16px; align-content: start;
  overflow: hidden;
}
.mock-sidebar .pill {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  font-size: var(--type-sm); white-space: nowrap;
}
.mock-sidebar .pill svg.pill-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.mock-sidebar .pill--nested { margin-left: 36px; }
.mock-topbar__brand { display: flex; align-items: center; gap: 10px; }
.mock-topbar__title { font-size: var(--type-sm); color: var(--text-secondary); }
.mock-content { padding: 22px; display: grid; grid-template-rows: auto 1fr; gap: 18px; overflow: hidden; }
.kpi-card {
  padding: 16px; border: 1px solid #DCE4EC; background: #fff; border-radius: 18px;
}
.kpi-card--server { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: linear-gradient(180deg, rgba(13,78,136,0.06), rgba(13,78,136,0.015)); }
.kpi-card strong { display: block; margin-bottom: 6px; font-size: var(--type-lg); color: #083A66; white-space: nowrap; }
.kpi-card span { color: #42566E; font-size: var(--type-sm); }
.vault-table {
  background: #fff; border: 1px solid #DCE4EC; border-radius: 22px;
  box-shadow: 0 16px 40px rgba(10,36,67,0.08);
  padding: 20px; overflow: hidden;
}
.vault-table__heading { margin: 0 0 12px; font-size: var(--type-sm); }
.vault-table h3 { margin: 0 0 8px; font-size: var(--type-sm); }
.vault-table__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--type-sm); }
.vault-table__col-label { width: 30%; }
.vault-table__col-value { width: 70%; }
.vault-table__row { border-top: 1px solid #DCE4EC; }
.vault-table__label { padding: 8px 12px; color: #42566E; }
.vault-table__value { padding: 8px 12px; color: #122033; }
@media (max-width: 1120px) {
  .mock-layout { grid-template-columns: 150px 1fr; }
}
@media (max-width: 860px) {
  .mock-layout { grid-template-columns: 1fr; }
}

/* Feature card animation defaults */
.feature-img-anim { animation-duration: 1s; animation-delay: 0ms; }

/* Cross-Sell Block */
.crosssell-section {
  background: #EEF2F8;
  padding: 60px 40px;
}
.crosssell-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
}
.crosssell-intro {
  flex: 0 0 240px;
}
.crosssell-eyebrow {
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2563EB;
  margin-bottom: 8px;
}
.crosssell-heading {
  font-size: var(--type-lg);
  font-weight: 800;
  color: #111827;
  margin-bottom: 10px;
  line-height: var(--lh-normal);
}
.crosssell-body {
  font-size: var(--type-sm);
  color: #6b7280;
  line-height: var(--lh-normal);
}
.crosssell-cards {
  display: flex;
  gap: 16px;
  flex: 1;
  flex-wrap: wrap;
}
.crosssell-card {
  flex: 1;
  min-width: 220px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.crosssell-card h3 {
  font-size: var(--type-base);
  font-weight: 700;
  color: #111827;
  margin: 6px 0 8px;
}
.crosssell-card p {
  font-size: var(--type-xs);
  color: #6b7280;
  line-height: var(--lh-normal);
}
.crosssell-card-label {
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crosssell-card--current .crosssell-card-label {
  color: #9ca3af;
}
.crosssell-card--other {
  border: 2px solid #fed7aa;
}
.crosssell-card--other .crosssell-card-label {
  color: #EA580C;
}
.crosssell-card--other h3 {
  color: #C2410C;
}
.crosssell-link {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--type-sm);
  font-weight: 700;
  color: #EA580C;
  text-decoration: none;
}
.crosssell-link:hover {
  text-decoration: underline;
}