/* ============================================================
   Hiree365 — main custom stylesheet
   Loaded via <link> in app/layout.js
   ============================================================ */
:root {
  --brand-green: #14b789;
  --brand-green-hover: #0e9871;
  --brand-green-light: #6fcbb2;
  --brand-green-soft: #b8e6d9;
  --brand-ink: #0F1729;
  --brand-ink-muted: rgba(15, 31, 26, 0.7);
  --brand-white: #FFFFFF;
  --brand-light-gray: #6B7280;
  --font-sm: 13px;
  --font-desc-block: 1rem;
  --max-width: 1150px;
  --block-des-mb: 36px;
  --block-des-wx-width: 600px
}

html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, sans-serif;
  margin: 0;
  min-height: 100vh;
  color: #1f2937;
  background-color: var(--brand-white);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.font-small {
  font-size: var(--font-sm) !important;
}

.app>main {
  flex: 1;
}

.continer-padding-top {
  margin: 100px auto;
}

.brand-green {
  color: var(--brand-green);
}

.color-white {
  color: var(--brand-white) !important;
}

.btn-brand {
  background-color: var(--brand-green);
  border: 1px solid var(--brand-green);
  color: var(--brand-white);
  font-size: var(--font-sm);
  line-height: 20px;
  border-radius: 10px;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-green-hover);
  border-color: var(--brand-green-hover);
  color: var(--brand-white);
}

.w-100 {
  max-width: 100% !important;
}

.max-width-600 {
  max-width: var(--block-des-wx-width) !important;
}

.max-width-1100 {
  max-width: var(--max-width) !important;
}

.block-des-mb {
  margin-bottom: var(--block-des-mb) !important;
}

/* ---------- Header ---------- */

.top-header {
  background: #F2F2F2;
  height: 2.375rem;
}

.top-header .left-container {
  padding-left: 15%;
  height: 100%;
}

.top-header .left-container .software365-logo {
  margin-bottom: -0.313rem;
}

.top-header .left-container .classe365-logo {
  margin-bottom: -0.313rem;
}

.top-header .left-container .hiree365-logo {
  position: relative;
}

.top-header .left-container .hiree365-logo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  border-width: 8px 8px 16px 8px;
  border-style: solid;
  border-color: transparent transparent #FFFFFF transparent;
}

.top-header .right-container {
  padding-right: 10% !important;
  height: 100%;
  font-size: 0.75rem;
}

.site-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  height: 70px;
}

.site-header .nav-link {
  color: #6B7280;
  font-size: 0.75rem;
  line-height: 20px;
}

.site-header .navbar-toggler {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none !important;
  outline: none;
}

.site-header .navbar-toggler:focus,
.site-header .navbar-toggler:focus-visible,
.site-header .navbar-toggler:active {
  border: 0;
  box-shadow: none !important;
  outline: none;
}

.text-gray {
  color: var(--brand-light-gray);
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--brand-green);
}

.nav-item-dropdown {
  position: relative;
}

.nav-link-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.nav-chevron {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
  color: var(--brand-green);
}

.nav-item-dropdown.is-open>.nav-link-dropdown {
  color: var(--brand-green);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 220px;
  margin: 6px 0 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 31, 26, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.35s;
  z-index: 1050;
}

.nav-item-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.nav-dropdown-item {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--brand-light-gray);
  text-decoration: none;
  font-size: var(--font-sm);
  line-height: 18px;
  font-weight: 500;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background-color: #f4f5f3;
  color: var(--brand-green);
}

/* ---------- Mega menu ---------- */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  margin-top: 25px;
  padding: 15px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(15, 31, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  z-index: 1050;
}

.nav-mega--left {
  left: 0;
  transform: translate(0, -8px);
}

.nav-mega--right {
  left: auto;
  right: 0;
  transform: translate(0, -8px);
}

.nav-item-dropdown.is-open .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-item-dropdown.is-open .nav-mega--left,
.nav-item-dropdown.is-open .nav-mega--right {
  transform: translate(0, 0);
}

.nav-mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.nav-mega-inner {
  display: flex;
}

.nav-mega--stacked {
  width: 600px;
}

.nav-mega--stacked .nav-mega-inner {
  flex-direction: column;
}

.nav-mega--split {
  width: 850px;
}

.nav-mega-main {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-mega--split .nav-mega-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  align-content: start;
  padding-right: 18px;
}

.nav-mega--split .nav-mega-callout {
  grid-column: 2;
  grid-row: span 2;
}

.nav-mega--split .nav-mega-footer {
  grid-column: 1;
  align-self: end;
  justify-self: start;
  margin-top: 0;
}

.nav-mega--split:not(:has(.nav-mega-callout)) .nav-mega-main {
  position: relative;
}

.nav-mega--split:not(:has(.nav-mega-callout)) .nav-mega-footer {
  position: absolute;
  left: 0;
  bottom: 0;
}

.nav-mega-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}

.nav-mega-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nav-mega-item:hover {
  background: #f3f8f4;
}

.nav-mega-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-mega-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-green);
}

.nav-mega-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
  line-height: 20px;
}

.nav-mega-item-desc {
  font-size: 12px;
  color: var(--brand-light-gray);
  line-height: 16px;
}

.nav-mega-callout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 14px 18px;
  border-radius: 12px;
  background: #eef7f1;
  text-decoration: none;
}

.nav-mega-callout-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.nav-mega-callout-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-green);
  color: #ffffff;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.2;
}

.nav-mega-callout-arrow {
  flex: 0 0 auto;
  color: var(--brand-ink);
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.nav-mega-callout-text {
  font-size: 12px;
  color: var(--brand-ink);
  line-height: 16px;
}

.nav-mega-footer {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 14px;
  border: 1px solid #e6ebe6;
  border-radius: 9px;
  overflow: hidden;
}

.nav-mega-footer a,
.nav-mega-footer button {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  background: none;
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  position: relative;
}

.nav-mega-footer a+a::before,
.nav-mega-footer a+button::before,
.nav-mega-footer button+a::before,
.nav-mega-footer button+button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: #D6D6D6;
}

.nav-mega-footer a:hover,
.nav-mega-footer button:hover {
  background: #f3f8f4;
  color: var(--brand-green);
}

/* featured image card */
.nav-mega-feature {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: #e9efe9;
}

.nav-mega--stacked .nav-mega-feature {
  margin-top: 14px;
}

.nav-mega--split .nav-mega-feature {
  flex: 0 0 240px;
  width: 240px;
  min-height: 240px;
}

.nav-mega--split .nav-mega-feature img {
  height: 100%;
}

.nav-mega-feature img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.nav-mega-feature-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(to top, rgba(8, 22, 16, 0.62), rgba(8, 22, 16, 0));
}

.nav-mega-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
}

.nav-mega-feature-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 20px;
  max-width: 310px;
}

.nav-mega-feature-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 16px;
}

.hero {
  position: relative;
  background-image: url('/new/imgs/bg-img.png');
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 100px 0px 50px;
  overflow: hidden;
  color: var(--brand-ink);
}

.hero-badge {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--brand-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  background: #F0F9F5;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--brand-green);
  display: inline-block;
}

.hero-subtitle {
  max-width: 600px;
  font-size: 1.125rem;
  color: var(--brand-white);
  margin-bottom: 60px;
  line-height: 25px;
  font-weight: 400;
}

.hero-helper-prefix {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-helper-link {
  color: var(--brand-white);
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: transparent;
  transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: background-color, color;
}

.hero-helper:hover .hero-helper-link,
.hero-helper-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
}

.hero-helper-link span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-helper:hover .hero-helper-link span {
  transform: translateX(4px);
}

.hero-helper:hover .hero-helper-prefix {
  transform: translateX(-4px);
}

.btn-hero-light {
  background-color: var(--brand-white);
  border: 1px solid rgba(15, 31, 26, 0.1);
  color: var(--brand-ink);
  font-size: 0.875rem;
  line-height: 18px;
  border-radius: 10px;
}

.btn-hero-light:hover,
.btn-hero-light:focus {
  background-color: #f6fbf9;
  border-color: rgba(15, 31, 26, 0.2);
  color: var(--brand-ink);
}

.btn-dark {
  background-color: #0f1f1a;
  border-color: #0f1f1a;
  font-size: 0.875rem;
  line-height: 18px;
  border-radius: 10px;
}

.btn-dark:hover,
.btn-dark:focus {
  background-color: #1a2f29;
  border-color: #1a2f29;
}

.hero-preview img {
  width: 99px;
  height: auto;
  display: block;
}

/* ===================== Hero Dashboard (HTML/CSS mockup) ===================== */
.hd-dashboard {
  --hd-bg: #e9f4ef;
  --hd-card: #ffffff;
  --hd-border: #eaeef0;
  --hd-ink: #1f2a37;
  --hd-muted: #8a97a5;
  --hd-green: var(--brand-green);
  --hd-green-dark: #0e9871;
  width: 100%;
  background: var(--brand-white);
  border-radius: 13px;
  border: 1px solid var(--hd-border);
  overflow: hidden;
  text-align: left;
  color: var(--hd-ink);
  font-size: 13px;
  line-height: 1.35;
  container-type: inline-size;
}

.hd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--hd-card);
}

.hd-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hd-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--hd-border);
  border-radius: 999px;
}

.hd-avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hd-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hd-user-name {
  font-weight: 700;
  font-size: 12px;
}

.hd-user-role {
  color: var(--hd-muted);
  font-size: 10px;
}

.hd-caret {
  color: var(--hd-muted);
  font-size: 10px;
}

.hd-headrow {
  padding: 11px 28px 0;
  height: 130px;
  background: var(--hd-bg);
}

.hd-body {
  display: flex;
  align-items: stretch;
  margin: 8px 24px 24px;
  gap: 20px;
  margin-top: -30px;
}

.hd-sidebar {
  flex: 0 0 240px;
  align-self: stretch;
  background: var(--brand-white);
  border-radius: 13px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.hd-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 50px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.hd-nav-txt {
  flex: 1 1 auto;
}

.hd-nav-ic {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--hd-muted);
}

.hd-nav-item .hd-nav-arrow {
  margin-left: auto;
  color: var(--hd-muted);
  font-size: 14px;
}

.hd-nav-item.is-active {
  background: var(--hd-green);
  color: #fff;
}

.hd-nav-item.is-active .hd-nav-ic,
.hd-nav-item.is-active:hover {
  color: #fff;
}

.hd-nav-collapse {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0f1f1a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(15, 31, 26, 0.25);
}

.hd-main {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--brand-white);
  border-radius: 13px;
  padding: 18px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.hd-breadcrumb {
  display: flex;
  align-items: center;
  font-size: 11px;
  margin-bottom: 26px;
}

.hd-breadcrumb span {
  margin: 0 4px;
}

.hd-bc-home {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}

.hd-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.hd-greeting {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: var(--hd-ink);
}

.hd-post-btn {
  border: none;
  background: #0f1f1a;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: default;
}

.hd-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr);
  gap: 16px;
  align-items: start;
}

.hd-col {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.hd-card {
  background: var(--hd-card);
  border: 1px solid var(--hd-border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 31, 26, 0.04);
}

.hd-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 19px;
  background: #F7F7F7;
  border-radius: 13px 13px 0 0;
}

.hd-card-title {
  font-weight: 700;
  font-size: 13px;
}

.hd-ext {
  color: var(--hd-muted);
  font-size: 11px;
  margin-left: 4px;
}

.hd-pill-select {
  border: 1px solid var(--hd-border);
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 11px;
  color: #55636f;
  white-space: nowrap;
  background: var(--brand-white);
}

.hd-stat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-stat-list li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  cursor: default;
  transition: background-color 0.2s ease;
}

.hd-stat-list li:hover .hd-stat-label {
  color: var(--brand-green);
}

.hd-stat-list li:hover .hd-stat-ic svg path {
  fill: var(--brand-green);
}

.hd-stat-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: #F0F0F0;
}

.hd-stat-list li:last-child {
  padding-bottom: 16px;
}

.hd-stat-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #55636f;
  font-weight: 500;
  font-size: 10px;
  transition: color 0.2s ease;
}

.hd-stat-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hd-stat-ic svg path {
  transition: fill 0.2s ease;
}

.hd-stat-val {
  font-weight: 700;
  color: var(--hd-ink);
  transition: color 0.2s ease;
}

.hd-overview,
.hd-apps {
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.hd-overview .hd-stat-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hd-apps {
  padding-bottom: 20px;
}

.hd-apps .hd-chart {
  flex: 1 1 auto;
  padding: 17px;
}

.hd-rate {
  background: linear-gradient(160deg, var(--brand-green), var(--hd-green-dark));
  border-color: transparent;
  color: #fff;
  padding: 28px 18px;
}

.hd-rate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.hd-rate-title {
  font-weight: 700;
  font-size: 13px;
}

.hd-rate-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

.hd-rate-trend {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 13px;
}

.hd-donut {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  margin: 18px 0 0;
  background:
    conic-gradient(rgba(255, 255, 255, 0.92) 0 15.8%, #1B8D58 15.8% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s ease, background 0.25s ease;
}

.hd-rate {
  cursor: default;
}

/* Hover anywhere on the card: darken the green ring and zoom the donut in. */
.hd-rate:hover .hd-donut {
  transform: scale(1.05);
  background:
    conic-gradient(rgba(255, 255, 255, 0.92) 0 15.8%, #0c6b41 15.8% 100%);
}

.hd-donut::before {
  content: "";
  position: absolute;
  inset: 25px;
  border-radius: 50%;
  background: linear-gradient(160deg, #18c493, #0fa077);
}

.hd-donut-val {
  position: relative;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}

/* Tooltip revealed on hover, near the lower-right of the ring. */
.hd-donut-tip {
  position: absolute;
  bottom: 30px;
  right: -35%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 31, 26, 0.18);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-28px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 3;
}

.hd-donut-tip-label {
  color: var(--hd-muted);
  font-size: 9px;
  font-weight: 500;
}

.hd-donut-tip b {
  color: var(--brand-green);
  font-size: 12px;
  font-weight: 700;
}

.hd-rate:hover .hd-donut-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.hd-opps-sub {
  color: var(--brand-light-gray);
  font-size: 12px;
  margin-bottom: 8px;
  font-weight: 400;
}

.hd-opps-num {
  font-size: 34px;
  font-weight: 800;
  color: var(--hd-green);
  line-height: 1;
  margin-bottom: 25px;
}

.hd-opps-foot {
  display: flex;
  align-items: center;
}

.hd-opps-icons {
  display: inline-flex;
}

.hd-oi {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  margin-right: -8px;
  overflow: hidden;
}

.hd-oi:last-child {
  margin-right: 0;
}

.hd-oi img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.hd-opps-new {
  color: var(--brand-ink);
  font-size: 11px;
}

/* Applications bar chart */
.hd-chart {
  display: flex;
  gap: 10px;
  height: 196px;
}

.hd-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--hd-muted);
  padding: 20px 0 0;
}

.hd-chart-yaxis span {
  display: flex;
  align-items: center;
  height: 0;
}

.hd-chart-plot {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  border-bottom: 1px solid #eef2f4;
  padding: 20px 6px 0;
  background-color: #ffffff;
  background-image: repeating-linear-gradient(to bottom,
      #eef2f4 0,
      #eef2f4 1px,
      transparent 1px,
      transparent calc(100% / 4));

  background-origin: content-box;
  background-clip: content-box;
}

.hd-bar-col {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.status-percentage {
  font-size: 10px;
  color: var(--brand-ink);
}

.hd-bar {
  width: 100%;
  max-width: 60px;
  border-radius: 8px 8px 0 0;
  min-height: 6px;
  position: relative;
}

.hd-bar-green {
  background: #359E6D;
}

.hd-bar-green-color {
  color: #359E6D !important;
}

.hd-bar-yellow {
  background: #FCFFCC;
}

.hd-bar-blue {
  background: #B5DBFF;
}

.hd-bar-purple {
  background: #D1CDFF;
}

.hd-bar-orange {
  background: #FFDCB5;
}

.hd-bar-lbl {
  position: absolute;
  bottom: -18px;
  font-size: 9px;
  color: var(--brand-ink);
  white-space: nowrap;
}

.hd-tooltip {
  position: absolute;
  top: 4px;
  left: 55%;
  z-index: 3;
  background: #fff;
  border: 1px solid #F0F0F0;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  /* Hidden until its bar is hovered. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hd-bar-col:hover .hd-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hd-bar-col:first-child .hd-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hd-bar-col:last-child .hd-tooltip {
  top: -30px;
  left: 30%;
}

.hd-tooltip b {
  color: var(--hd-ink);
  font-size: 12px;
}

.hd-emp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-emp-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px;
}

.hd-emp-logo {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  flex: 0 0 auto;
  border: 1px solid#F0F0F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hd-emp-logo img {
  width: 18px;
  height: 18px;
}

.hd-emp-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.hd-emp-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--hd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-emp-loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--hd-muted);
  font-size: 10.5px;
}

.hd-emp-jobs {
  border: 1px solid var(--brand-green);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 9px;
  color: #55636f;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  box-sizing: border-box;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hd-emp-list li:hover .hd-emp-jobs {
  background-color: var(--brand-green);
  color: #fff;
}

.hd-meter+.hd-meter {
  margin-top: 14px;
}

.hd-meter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: #55636f;
}

.hd-meter-pct {
  font-weight: 700;
}

.hd-pct-green {
  color: var(--hd-green);
}

.hd-pct-orange {
  color: #f59e0b;
}

.hd-pct-dark {
  color: var(--hd-ink);
}

.hd-meter-track {
  height: 7px;
  background: #eef2f4;
  border-radius: 999px;
  overflow: hidden;
}

.hd-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.hd-fill-green {
  background: var(--hd-green);
}

.hd-fill-orange {
  background: #f59e0b;
}

.hd-fill-dark {
  background: #1f2a37;
}

@container (max-width: 720px) {
  .hd-grid {
    grid-template-columns: 1fr;
  }

  .hd-sidebar {
    display: none;
  }
}

@container (max-width: 480px) {
  .hd-dashboard {
    font-size: 12px;
  }

  .hd-user-meta {
    display: none;
  }

  .hd-headrow {
    padding: 12px 14px 0;
  }

  .hd-body {
    margin: 6px 14px 16px;
  }

  .hd-main {
    padding: 14px;
  }

  .hd-donut {
    width: 110px;
    height: 110px;
  }
}

.iuc-note-link {
  text-decoration: none;
}

.iuc-note-link:hover {
  text-decoration: underline;
}

.hero .gap-stack-lg {
  margin-bottom: 2.5rem;
}

.trusted {
  background-color: #F8F9F9;
  background-size: 40px 40px;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.025) 1px, transparent 1px);
}

.trusted-container {
  max-width: 896px;
  margin: auto;
}

.trusted-logo-img {
  max-width: 100%;
  transition: opacity 0.2s ease;
}

.real-problem {
  background-size: 40px 40px;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.025) 1px, transparent 1px);
}

.int-real-problem-container {
  padding: 67px 20px 0;
}

.rp-badge {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--brand-ink);
  background-color: #EEF7F1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid #D4EADE;
  margin-bottom: 16px;
  padding: 7px 0;
}

.rp-badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--brand-green);
  border-radius: 50%;
  display: inline-block;
}

.rp-badge-title-block {
  margin-bottom: 30px;
}

.block-title {
  font-size: 2rem;
  line-height: 38px;
  letter-spacing: -0.09px;
  color: var(--brand-ink);
  max-width: 700px;
  margin: 0 auto 20px;
}

.block-des {
  max-width: 700px;
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

.rp-diagram {
  position: relative;
  height: 480px;
  margin: 64px auto 0;
}

.rp-card {
  position: absolute;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.06);
  padding: 15px;
  z-index: 2;
  transition: left 1s cubic-bezier(0.22, 1, 0.36, 1),
    top 1s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 1s cubic-bezier(0.22, 1, 0.36, 1),
    right 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
  will-change: transform, opacity, left, top;
}

.rp-card-measured {
  width: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.rp-card-managed {
  width: 270px;
  left: 48%;
  top: 0;
  transform: translateX(-50%);
  opacity: 0;
}

.rp-card-outcome {
  width: auto;
  right: 5px;
  bottom: -4%;
  transform: translateY(-50%);
  opacity: 0;
}

.real-problem.is-visible .rp-card-measured {
  left: 75px;
  top: auto;
  bottom: 0;
  transform: translate(0, 0);
  transition-delay: 0.4s;
}

.real-problem.is-visible .rp-card-managed {
  opacity: 1;
  transition-delay: 2.3s;
}

.real-problem.is-visible .rp-card-outcome {
  opacity: 1;
  transition-delay: 4.3s;
}

.rp-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.rp-arrow-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.rp-arrow-head {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.rp-arrow-dot {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.real-problem.is-visible .rp-arrow-1-dot {
  opacity: 1;
  transition-delay: 1.2s;
}

.real-problem.is-visible .rp-arrow-2-dot {
  opacity: 1;
  transition-delay: 3.2s;
}

.real-problem.is-visible .rp-arrow-1 {
  stroke-dashoffset: 0;
  transition-delay: 1.2s;
}

.real-problem.is-visible .rp-arrow-1-head {
  opacity: 1;
  transition-delay: 2.1s;
}

.real-problem.is-visible .rp-arrow-2 {
  stroke-dashoffset: 0;
  transition-delay: 3.2s;
}

.real-problem.is-visible .rp-arrow-2-head {
  opacity: 1;
  transition-delay: 4.1s;
}

.rp-plus {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.real-problem.is-visible .rp-plus-1 {
  opacity: 1;
  transition-delay: 1.2s;
}

.real-problem.is-visible .rp-plus-2 {
  opacity: 1;
  transition-delay: 2.1s;
}

.real-problem.is-visible .rp-plus-3 {
  opacity: 1;
  transition-delay: 3.2s;
}

.real-problem.is-visible .rp-plus-4 {
  opacity: 1;
  transition-delay: 4.1s;
}

.rp-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.52px;
  line-height: 15px;
  margin-bottom: 12px;
}

.rp-list {
  list-style: none;
  padding: 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 31, 26, 0.04);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rp-item {
  padding: 0.6rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid #E6E6E6;
}

.rp-item:last-child {
  border-bottom: none;
}

.rp-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.rp-item-label {
  font-weight: 500;
  color: var(--brand-ink);
  font-size: 12px;
  line-height: 25px;
  letter-spacing: -0.5px;

}

.rp-item-time {
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rp-item-more {
  color: #c5c9cf;
  display: inline-flex;
}

.rp-outcome-pills {
  display: flex;
  flex-direction: row;
  gap: 0.6rem;
}

.rp-outcome-pill {
  background: #BB2F32;
  color: #ffffff;
  padding: 6px 30px;
  border-radius: 43px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.container {
  padding: 0 5rem;
}

.what-is-section {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  background-image: url('/new/imgs/a-new-category-block-img.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 50% 100%;
}

.what-is-image-area {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.new-category-text-margin-top {
  margin-top: 180px;
}

.what-is-heading {
  max-width: 438px;
  margin: 0 0 20px;
}

.what-is-body {
  font-size: 1rem;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.8);
  max-width: 482px;
  font-weight: 400;
  margin-bottom: 20px;
}

.what-is-body strong {
  color: var(--brand-ink);
  font-weight: 600;
}

.platform-pillars-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(15, 31, 26, 0.08);
}

.platform-pillars {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  z-index: 2;
  width: 100%;
}

.platform-pillar {
  background: #ffffff;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: 0 10px 30px rgba(15, 31, 26, 0.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.platform-pillar-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.platform-pillar-1,
.platform-pillar-3 {
  transform: translateX(-50px);
}

.platform-pillar-2,
.platform-pillar-4 {
  transform: translateX(50px);
}

.what-is-section:hover .platform-pillar-1,
.what-is-section:hover .platform-pillar-2,
.what-is-section:hover .platform-pillar-3,
.what-is-section:hover .platform-pillar-4 {
  transform: translateX(0);
}

.what-is-section:hover .platform-pillar-1 {
  transition-delay: 0s;
}

.what-is-section:hover .platform-pillar-2 {
  transition-delay: 0.05s;
}

.what-is-section:hover .platform-pillar-3 {
  transition-delay: 0.1s;
}

.what-is-section:hover .platform-pillar-4 {
  transition-delay: 0.15s;
}

.platform-pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e3f5ec;
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.platform-pillar-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0;
  text-decoration: none;
}

.platform-pillar-desc {
  font-size: var(--font-sm);
  line-height: 18px;
  color: var(--brand-light-gray);
  margin: 0;
  font-weight: 400;
}

.navbar-expand-lg {
  font-size: 12px;
}

.site-footer {
  background-color: #0a1729;
  color: #8b9bb4;
  margin-top: 0;
}

.footer-tagline {
  color: #8b9bb4;
  font-size: var(--font-sm);
  line-height: 1.6;
}

.footer-heading {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}

.footer-link {
  color: #8b9bb4;
  text-decoration: none;
  font-size: var(--font-sm);
  transition: color 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: #ffffff;
}

.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 3rem 0 1.25rem;
  opacity: 1;
}

.footer-meta {
  color: #8b9bb4;
  font-size: var(--font-sm);
}

/* ============================================================
   How It Works
   ============================================================ */
.how-it-works {
  padding: 6rem 0 3rem;
  color: var(--brand-ink);
}

.hiw-subtitle {
  max-width: 620px;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.hiw-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #e8ede7;
  border-radius: 20px;
  padding: 9px 9px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  align-self: stretch;
}

.hiw-card:hover {
  transform: translateY(-4px);
  border-color: #d3edde;
  box-shadow: 0 16px 36px rgba(15, 31, 26, 0.08), 0 4px 10px rgba(15, 31, 26, 0.04);
}

.hiw-card-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}


.hiw-card-preview>.hiw-mock-item:first-of-type {
  margin-right: 46px;
}

/* Mockup primitives */
.hiw-card-preview>.hiw-mock-item.hiw-step3-tile {
  position: relative;
  padding-right: 64px;
  margin-right: 52px;
  overflow: visible;
}


.hiw-bar-col.is-green {
  background-color: var(--brand-green);
}

.hiw-bar-col.is-active::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  width: 22px;
  height: 50px;
  background: linear-gradient(to top, rgba(20, 183, 137, 0.7), rgba(20, 183, 137, 0));
  border-radius: 999px 999px 0 0;
  filter: blur(3px);
  pointer-events: none;
}

.hiw-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 4px 4px;
  flex: 1;
}

.hiw-step-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: #bcc4bf;
  line-height: 24px;
}

.hiw-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.45px;
  line-height: 25px;
}

.hiw-card-desc {
  font-size: var(--font-sm);
  line-height: 18px;
  font-weight: 400;
  color: #6b7470;
  margin: 0;
  max-width: 240px;
}

/* ============================================================
   Built For Institutions section
   ============================================================ */
.bfi {
  background-color: #F8F9F9;
  padding: 67px 0;
}


.bfi-heading {
  max-width: 520px;
  margin: 0 0 20px;
}

.bfi-subtitle {
  max-width: 540px;
}

.bfi-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}

.bfi-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 31, 26, 0.03);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bfi-card:hover {
  border-color: #e3e6e2;
  background-color: #f4f5f3;
  box-shadow: 0 12px 28px rgba(15, 31, 26, 0.05);
  transform: translateY(-2px);
}

.bfi-card-arrow {
  position: absolute;
  top: 27px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9aa6a2;
  transform: translate(0, -50%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.bfi-card:hover .bfi-card-arrow {
  color: #6b7672;
  transform: translate(6px, -50%);
}

.bfi-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #dff1e6;
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bfi-card-text {
  flex: 1;
  min-width: 0;
}

.bfi-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0;
  letter-spacing: -0.4px;
  line-height: 24px
}

.bfi-card-desc {
  font-size: 0.875rem;
  line-height: 18px;
  color: var(--brand-light-gray);
  margin: 0;
  font-weight: 400;
  margin-right: 25px;
}

/* ----- Right side: Placement Dashboard preview ----- */
.bfi-dashboard {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 18px;
  padding: 20px 28px 28px 28px;
  box-shadow: 0 12px 28px rgba(15, 31, 26, 0.06);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bfi-dashboard-title {
  font-size: var(--font-desc-block);
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.45px;
  line-height: 25px;
  margin-bottom: 15px;
}

.bfi-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 1.75rem;
}

.bfi-stat {
  background-color: #f4faf7;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.bfi-stat strong {
  font-size: 2.125rem;
  font-weight: 800;
  color: var(--brand-ink);
  line-height: 36px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.bfi-stat-green {
  color: var(--brand-green) !important;
}

.bfi-stat small {
  font-size: var(--font-sm);
  color: #7a8480;
}

.bfi-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 4px 0;
  margin-bottom: 1.5rem;
}

.bfi-profile-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.bfi-profile-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Scalloped/verified check badge — uses an image asset so the
   custom shape can be supplied as PNG/SVG. */
.bfi-profile-badge {
  position: absolute;
  bottom: -15px;
  right: -10px;
  width: 44px;
  height: 42px;
  display: block;
  object-fit: contain;
}

.bfi-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bfi-profile-name {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--brand-ink);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.bfi-profile-role {
  font-size: 15px;
  color: var(--brand-ink);
  margin: 0;
}

.bfi-profile-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background-color: var(--brand-green);
  color: #ffffff;
  font-size: var(--font-sm);
  font-weight: 600;
  border-radius: 40px;
  line-height: 1.4;
}

.bfi-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  flex: 1;
  min-height: 180px;
}

.bfi-chart-bar {
  flex: 1;
  background-color: #46B48199;
  border-radius: 6px 6px 0px 0px;
  min-width: 0;
  height: var(--h-default);
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--bar-delay, 0s);
  will-change: height;
}

.bfi-dashboard.is-active .bfi-chart-bar,
.bfi:hover .bfi-chart-bar {
  height: var(--h-hover);
}

/* ============================================================
   Seamless Classe365 integration section
   ============================================================ */
.integration-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 31, 26, 0.06);
}

.integration-content {
  padding: 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.integration-badge {
  color: var(--brand-ink);
  background-color: #fff7ed;
  border: 1px solid #fde6c5;
  align-self: flex-start;
  font-size: var(--font-sm);
  font-weight: 500;
  margin-bottom: 16px;
  padding: 7px 0;
}

.integration-subtitle {
  max-width: 520px;
}

.integration-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.integration-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--brand-ink);
  line-height: 1.5;
}

.integration-cta {
  border-radius: 10px;
  width: fit-content;
  margin-top: 40px;
  padding: 9px 16px;
}

.integration-visual {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 20px;
}

.integration-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.integration-logo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(15, 31, 26, 0.14);
  width: min(340px, calc(100% - 24px));
  z-index: 2;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease;
  will-change: transform;
}

.integration-card:hover .integration-logo-card-1 {
  transform: translateY(-50%);
  box-shadow: 0 18px 36px rgba(15, 31, 26, 0.15);
}

.integration-card:hover .integration-logo-card-2 {
  transform: translateY(50%);
  box-shadow: 0 18px 36px rgba(15, 31, 26, 0.15);
}

/* Rings live in their own absolutely-positioned background layer BEHIND the cards.
   Centered in the visual area so they sit around where the bolt will appear. */
.integration-rings-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

/* ---- Connector between the two cards (revealed on section hover) ---- */
.integration-connector {
  position: relative;
  width: 100%;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.integration-connector-line {
  z-index: 2;
}

.integration-connector-bolt {
  z-index: 4;
}

.integration-connector-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--brand-green);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(20, 183, 137, 0.3);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s,
    opacity 0.4s ease 0.1s;
  opacity: 0;
}

.integration-connector-bolt svg {
  width: 20px;
  height: 20px;
}

.integration-connector-line {
  position: absolute;
  left: 50%;
  width: 3px;
  background-color: var(--brand-green);
  border-radius: 3px;
  transform: translateX(-100%) scaleY(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}

/* Top line — extends upward FROM above the bolt to the card edge */
.integration-connector-line-top {
  bottom: 50%;
  margin-bottom: 22px;
  height: 22px;
  transform-origin: bottom center;
}

/* Bottom line — extends downward FROM below the bolt to the card edge */
.integration-connector-line-bottom {
  top: 50%;
  margin-top: 22px;
  height: 22px;
  transform-origin: top center;
}

.integration-connector-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

/* Three filled circles around the bolt — light/white tint that shows up
   against the green background image. */
.integration-connector-ring-1 {
  width: 180px;
  height: 180px;
  background-color: rgba(255, 255, 255, 0.5);
}

.integration-connector-ring-2 {
  width: 240px;
  height: 240px;
  background-color: rgba(255, 255, 255, 0.3);
}

.integration-connector-ring-3 {
  width: 290px;
  height: 290px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* Activate on section hover — lines extend, bolt pops in, rings pulse */
.integration-card:hover .integration-connector-line {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.integration-card:hover .integration-connector-line-top {
  transition-delay: 0.05s;
}

.integration-card:hover .integration-connector-line-bottom {
  transition-delay: 0.1s;
}

.integration-card:hover .integration-connector-bolt {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.integration-card:hover .integration-connector-ring {
  transform: translate(-50%, -50%) scale(1);
}

.integration-card:hover .integration-connector-ring-1 {
  opacity: 1;
  transition-delay: 0.15s;
}

.integration-card:hover .integration-connector-ring-2 {
  opacity: 1;
  transition-delay: 0.25s;
}

.integration-card:hover .integration-connector-ring-3 {
  opacity: 1;
  transition-delay: 0.35s;
}

.integration-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.integration-logo-square {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.integration-logo-square-dark {
  background-color: #0f1f1a;
}

.integration-logo-square-green {
  background-color: var(--brand-green);
}

.integration-logo-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.integration-title-img {
  display: block;
  height: 24px;
  width: 80px;
  object-fit: contain;
}

.integration-logo-sub {
  display: block;
  font-size: var(--font-sm);
  color: #7a8480;
  line-height: 1.3;
}

.integration-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.integration-pill {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand-ink);
  background-color: #f4f5f4;
  border: 1px solid #e8ece8;
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.4;
}

.integration-pill-green {
  color: var(--brand-green);
  background-color: #e8f7f0;
  border-color: #d3edde;
}

/* ============================================================
   Complete Platform — feature grid + full-width illustration
   ============================================================ */
.platform {
  padding: 5rem 0 0;
  overflow: hidden;
  position: relative;
}

.platform>.container {
  position: relative;
  z-index: 2;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 64px;
}

.platform-feature {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid transparent;
  background-color: transparent;
  transition: border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.platform-feature:hover {
  border-color: #d3edde;
  background-color: #ffffff;
  box-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.12);
}

.platform-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: #F0F9F5;
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.platform-feature-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-ink);
  margin: 0;
  letter-spacing: -0.4px;
  line-height: 24px;
  margin: 16px 0 8px;
}

.platform-feature-desc {
  font-size: 0.875rem;
  line-height: 23px;
  color: #5b6764;
  margin: 0;
  font-weight: 400;
}

.platform-illustration {
  width: 100%;
  margin-top: -750px;
  line-height: 0;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.platform-illustration img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   Built different — comparison table
   ============================================================ */
.compare {
  background-color: #ffffff;
  padding: 58px 0 128px;
}

.compare-table-wrap {
  max-width: 800px;
  margin: 60px auto 0;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}

.compare-table thead th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
  padding: 12px 14px;
  text-align: left;
  background-color: #f4faf7;
  line-height: 24px;
}

.compare-table thead th.compare-col-hiree {
  color: #46B481;
  text-align: center;
  width: 298px;
}

.compare-table thead th.compare-col-generic {
  text-align: center;
  width: 36%;
  color: var(--brand-light-gray);
}

.compare-table tbody tr {
  border-top: 1px solid #ebefe9;
}

.compare-table tbody td {
  padding: 14px;
  font-size: var(--font-sm);
  vertical-align: middle;
  line-height: 18px;
  font-weight: 500;
}

.compare-feature-name {
  font-weight: 500;
  color: var(--brand-ink);
}

.compare-cell {
  text-align: center;
}

.compare-table tbody td.compare-cell-hiree,
.compare-table tbody td.compare-cell-generic {
  font-weight: 400;
}

.compare-cell-generic {
  color: #7a8480;
}

.compare-check,
.compare-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
}

.compare-check {
  color: var(--brand-green);
}

.compare-x {
  color: #b5beba;
}

/* ============================================================
   For Employers — Connect with institution-verified talent
   ============================================================ */
.employers {
  background-color: #ffffff;
  padding: 5rem 0;
}

.employers-heading {
  max-width: 760px;
}

.employers-subtitle {
  max-width: 860px;
}

.employers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
}

.employers-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
}

.employers-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: #dff1e6;
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.employers-feature-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.4px;
  line-height: 24px;
  margin: 16px 0 5px;
}

.employers-feature-desc {
  font-size: var(--font-sm);
  line-height: 18px;
  color: var(--brand-light-gray);
  margin: 0;
  max-width: 200px;
}

.trusted-marquee {
  overflow: hidden;
  width: 100%;
}

.trusted-marquee-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.trusted-marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Below md the 3 logos would wrap to two rows — lay them in one row and
   smoothly drift left/right so all three stay visible, using only 3 images. */
@media (max-width: 767.98px) {
  .trusted-marquee-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    gap: 2.5rem;
    animation: trusted-drift 12s ease-in-out infinite alternate;
  }

  .trusted-marquee:hover .trusted-marquee-track {
    animation-play-state: paused;
  }
}

@keyframes trusted-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% + 100vw));
  }
}

@media (prefers-reduced-motion: reduce) {
  .trusted-marquee-track {
    animation: none;
  }
}

/* ============================================================
   FAQ — Frequently asked questions
   ============================================================ */
.faq {
  background-color: #F8F9F9;
  padding: 5rem 0;
}

.faq-list {
  max-width: 768px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open {
  box-shadow: 0 12px 28px rgba(15, 31, 26, 0.06);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-ink);
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-question-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}

.faq-toggle {
  flex-shrink: 0;
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The vertical bar of the "+" rotates away to form a "−" */
.faq-toggle-v {
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open .faq-toggle-v {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-item.is-open .faq-toggle {
  transform: rotate(180deg);
}

/* Smooth height animation driven by JS-measured max-height.
   JS sets max-height to scrollHeight when opening (then to 'none' on
   transitionend so dynamic content can grow), and back to 0 when closing.
   Easing: easeOutExpo-like for a soft, luxurious deceleration. */
.faq-answer-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: max-height;
}

/* Fade + slide the answer text — when OPENING, fades+slides in slightly
   delayed so it appears as the panel finishes expanding. When CLOSING,
   it fades alongside the collapse for a smooth exit. */
.faq-item .faq-answer {
  padding: 0 22px 18px;
  font-size: var(--font-sm);
  line-height: 18px;
  color: var(--brand-light-gray);
  font-weight: 400;
  margin-right: 30px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open .faq-answer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease 0.2s,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.contact-page .header-container .card .card-title-wrapper {
  margin-top: 6.5rem;
}

.contact-page .header-container .form-card {
  border-radius: 0.75rem;
}

.contact-page .address-wrapper .card {
  border-radius: 0.75rem;
}

/* ============================================================
   Final CTA — Ready to transform your placement outcomes?
   ============================================================ */
.cta-final {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 0;
  background-color: #F8F9F9;
  isolation: isolate;
}

.cta-final-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  z-index: -1;
  pointer-events: none;
}

/* Two classes so padding-bottom beats the single-class `.container`
   padding shorthand (which would otherwise reset it to 0). */
.cta-final .cta-final-content {
  position: relative;
  z-index: 2;
  padding-bottom: 18rem;
}

.cta-final-heading {
  font-size: 2.5rem;
  letter-spacing: -1.2px;
  color: var(--brand-ink);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 48px;
  margin-bottom: 24px;
}

.cta-final-btn-light {
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid #d8dcd9;
  color: var(--brand-ink);
  font-size: 0.875rem;
}

.cta-final-btn-light:hover,
.cta-final-btn-light:focus {
  background-color: #f4f5f4;
  border-color: #c4cac6;
  color: var(--brand-ink);
}

/* ============================================================
   How It Works — page hero (/how-it-works)
   ============================================================ */
.hiwp {
  background-color: #ffffff;
}

.hiwp-hero {
  position: relative;
  padding: 74px 0 0;
  background-image: url('/new/imgs/how-its-work-bg-img.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  overflow: hidden;
  margin-bottom: 50px;
}


.hiwp-hero-content {
  position: relative;
  z-index: 3;
}


.hiwp-heading {
  font-size: clamp(32px, 3vw + 1.1rem, 56px);
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -1.5px;
}

.hiwp-subtitle {
  font-size: 1.125rem;
  line-height: 25px;
  max-width: 600px;
  font-weight: 400;
  margin-bottom: 60px;
}

.hiwp-stage-wrap {
  position: relative;
  margin-top: 2.5rem;
}

.hiwp-stage {
  position: relative;
  width: 100%;
  min-height: 520px;
}


.hiwp-card-wrap {
  position: absolute;
  z-index: 3;
}

.hiwp-card-wrap-left {
  top: -0%;
  left: -2%;
}

.hiwp-card-wrap-center {
  top: 35%;
  left: 38%;
}

.hiwp-card-wrap-right {
  top: 0%;
  right: 0%;
}

.hiwp-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(15, 31, 26, 0.10);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hiwp-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hiwp-card-row-sub {
  margin-top: 4px;
}

.hiwp-card-coin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--brand-green);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.hiwp-card-coin svg {
  display: block;
}

.hiwp-card-bar {
  position: relative;
  display: block;
  height: 13px;
  border-radius: 999px;
  background-color: #e6eae7;
  width: 100%;
  overflow: hidden;
}

.hiwp-card-bar-soft {
  background-color: #e6eae7;
}

.hiwp-card-sis {
  width: 253px;
  height: 140px;
  position: relative;
  padding: 20px;
}

.hiwp-card-sis>.hiwp-card-coin {
  position: absolute;
  top: 18px;
  left: 18px;
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the label sits in a flex row alongside the two hover circles */
.hiwp-card-sis-labelrow {
  position: absolute;
  top: 63px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hiwp-card-sis-label {
  padding: 5px 14px;
  background-color: #e6f5ed;
  color: var(--brand-green);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 18px;
}

/* the green coin + empty gray dot that appear to the right on hover */
.hiwp-card-sis .hiwp-card-coin-2 {
  position: static;
  width: 28px;
  height: 28px;
  opacity: 0;
  transform: scale(0.2);
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.05s;
}

.hiwp-card-sis-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #eef0f0;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.2);
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0.12s;
}

/* on hover: the top coin slides toward the label (no size change),
   while the two circles pop in */
.hiwp-card-sis:hover>.hiwp-card-coin {
  transform: translateX(30px);
}

.hiwp-card-sis:hover .hiwp-card-coin-2,
.hiwp-card-sis:hover .hiwp-card-sis-dot {
  opacity: 1;
  transform: scale(1);
}

.hiwp-card-sis::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 44px;
  width: 82px;
  height: 27px;
  border-top: 1.5px solid var(--brand-green);
  border-right: 1.5px solid var(--brand-green);
  border-top-right-radius: 10px;
  pointer-events: none;
  transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the line shrinks as the coin slides in (right-end drop stays fixed at 126px) */
.hiwp-card-sis:hover::before {
  left: 64px;
  width: 62px;
}

.hiwp-card-sis .hiwp-card-bar {
  position: absolute;
  bottom: 25px;
  left: 20px;
  right: 20px;
  width: auto;
}

.readinessscore-hiwp-card-bar-height {
  height: 23px;
}

.hiwp-card-readiness {
  width: 217px;
  height: 160px;
  padding: 18px 18px 20px;
  gap: 10px;
}

.hiwp-card-readiness .hiwp-card-bars-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hiwp-card-readiness .hiwp-card-bars-stack .hiwp-card-bar {
  width: 100%;
}

/* the lower bar is shorter than the one above it */
.hiwp-card-readiness .hiwp-card-bars-stack .hiwp-card-bar:last-child {
  width: 60%;
}

/* hover: the coin grows a little and the bars slide slightly to the right */
.hiwp-card-readiness .hiwp-card-coin {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hiwp-card-readiness:hover .hiwp-card-coin {
  transform: scale(1.12);
}

.hiwp-card-readiness .hiwp-card-bars-stack .hiwp-card-bar {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hiwp-card-readiness:hover .hiwp-card-bars-stack .hiwp-card-bar {
  transform: translateX(8px);
}

.hiwp-card-readiness:hover .hiwp-card-bars-stack .hiwp-card-bar:last-child {
  transition-delay: 0.06s;
}

.hiwp-card-application {
  width: 306px;
  height: 184px;
}

.hiwp-card-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.hiwp-card-readiness-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 22px;
  background-color: var(--brand-green);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 999px;
  align-self: flex-start;
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* on hover the pill expands and the value counts up to 80% */
.hiwp-card-readiness:hover .hiwp-card-readiness-pill {
  width: 100%;
}

.hiwp-card-readiness-pill .rp-pct-to {
  display: none;
}

.hiwp-card-readiness:hover .hiwp-card-readiness-pill .rp-pct-from {
  display: none;
}

.hiwp-card-readiness:hover .hiwp-card-readiness-pill .rp-pct-to {
  display: inline;
}

.hiwp-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 4px 0 6px;
}

.hiwp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 0;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--brand-green);
  line-height: 18px;
}

.hiwp-status-pill-soft {
  background-color: #e6f5ed;
}

.hiwp-status-pill-plain,
.hiwp-status-pill-empty {
  background-color: transparent;
  border: 1px solid #F0F0F0;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

/* the empty placeholder pill keeps a body even with no text */
.hiwp-status-pill-empty {
  min-width: 160px;
  min-height: 28px;
}

/* on hover the empty pill gets a soft green fill */
.hiwp-card-application:hover .hiwp-status-pill-empty {
  background-color: #e6f5ed;
  border-color: transparent;
}

/* on hover the "Hired" pill fills solid green with white text + dot */
.hiwp-card-application:hover .hiwp-status-pill-plain {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #ffffff;
}

.hiwp-card-application:hover .hiwp-status-pill-plain .hiwp-status-dot {
  background-color: #ffffff;
}

.hiwp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--brand-green);
  transition: background-color 0.4s ease;
}

/* the resume row holds a coin that slides in left of the button on hover */
.hiwp-resume-row {
  display: flex;
  align-items: center;
  gap: 0;
  transition: gap 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hiwp-resume-coin {
  flex: 0 0 auto;
  width: 0;
  height: 42px;
  border-radius: 50%;
  background-color: var(--brand-green);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.hiwp-card-application:hover .hiwp-resume-row {
  gap: 10px;
}

.hiwp-card-application:hover .hiwp-resume-coin {
  width: 42px;
  opacity: 1;
}

.hiwp-resume-btn {
  flex: 1;
  display: block;
  padding: 8px 14px;
  background-color: var(--brand-green);
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: default;
  transition: background-color 0.3s ease;
  text-align: center;
}

.hiwp-resume-btn:hover,
.hiwp-resume-btn:focus {
  background-color: #14a574;
}

/* ============================================================
   How It Works — Steps section (sticky nav + scroll spy)
   ============================================================ */
.hiwp-steps {
  background-color: #fdfdfb;
  padding: 80px 0 47px;
}

.hiwp-steps-nav-wrap {
  position: sticky;
  top: 88px;
  z-index: 20;
  padding: 12px 0;
}

.hiwp-steps-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 11px;
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 31, 26, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 850px;
  margin: auto;
}

.hiwp-steps-nav::-webkit-scrollbar {
  display: none;
}

.hiwp-steps-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: #000000;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}

.hiwp-steps-nav-tab:hover {
  color: #000000;
}

.hiwp-steps-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 22px;
  opacity: 0;
  overflow: hidden;
  border-radius: 5px;
  transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}

.hiwp-steps-nav-tab:hover .hiwp-steps-nav-icon,
.hiwp-steps-nav-tab.is-active .hiwp-steps-nav-icon {
  width: 26px;
  height: 26px;
  padding: 0 4px;
  opacity: 1;
  background-color: #F0F9F5;
  color: var(--brand-green);
}

.hiwp-steps-nav-tab.is-active {
  background-color: #46B481;
  color: #ffffff;
}

.hiwp-steps-content {
  margin-top: 2.5rem;
}

.hiwp-step {
  padding: 60px 0;
  scroll-margin-top: 200px;
}

.hiwp-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.hiwp-step-mockup-col {
  display: flex;
}

.hiwp-step-text-col {
  display: flex;
  flex-direction: column;
}

.hiwp-step-text-col .hiwp-step-bullets {
  margin-top: auto;
}

.hiwp-step-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.hiwp-step-grid.is-reversed .hiwp-step-mockup-col {
  order: 2;
}

.hiwp-step-grid.is-reversed .hiwp-step-text-col {
  order: 1;
}

.hiwp-step-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: rgba(107, 114, 128, 0.2);
  margin-bottom: 30px;
  line-height: 32px;
}

.hiwp-step-label-icon {
  display: inline-flex;
  width: 33px;
  height: 33px;
  border-radius: 8px;
  background-color: #e6f5ed;
  color: var(--brand-green);
  align-items: center;
  justify-content: center;
}

.hiwp-step-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-green);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 18px;
}

.hiwp-step-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hiwp-step-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid #ebefe9;
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--brand-ink);
  background-color: #ffffff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hiwp-step-bullets li:hover {
  background-color: #f4f5f5;
  border-color: #e2e5e3;
}

.hiwp-step-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--brand-green);
  flex-shrink: 0;
}

/* ============================================================
   How It Works — Step mockups (pure HTML/CSS graphics)
   ============================================================ */
.hiwm {
  width: 100%;
  display: flex;
}

.hiwm-panel {
  position: relative;
  width: 100%;
  border-radius: 18px;
  border: 1px solid #eef1ef;
  background-color: #ffffff;
  padding: 26px;
  box-shadow: 0 18px 40px -28px rgba(15, 23, 41, 0.28);
}

.hiwm-panel-mint {
  background-color: #eef8f2;
  border-color: #dcefe5;
  padding: 30px;
}

.hiwm-col-head {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 10px;
  line-height: 20px;
  letter-spacing: -0.34px;
}

/* ---- shared bits ---- */
.hiwm-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: #CFD1D4;
  flex-shrink: 0;
  transition: background-color 0.4s ease;
}

.hiwm-coin-lg {
  width: 63px;
  height: 63px;
}

.hiwm-coin-lg svg {
  width: 33px;
  height: 33px;
}

.hiwm-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hiwm-bar {
  display: block;
  height: 12px;
  border-radius: 60px;
  background-color: #e6e9ec;
}

.hiwm-bar-big {
  height: 19px;
}

.hiwm-bar-green {
  background-color: #46b481;
}

.hiwm-bar-mint {
  background-color: #DAE7E0;
}

.hiwm-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: #F0F9F5;
  color: #6b7280;
  font-size: 10px;
  line-height: 13px;
  font-weight: 400;
}

/* ---- Step 1: Connect ---- */
.hiwm-frame {
  width: 100%;
  border-radius: 24px;
  background-color: #ffffff;
  padding: 30px;
  box-shadow: 0 26px 60px -34px rgba(15, 23, 41, 0.3);
}

.hiwm-connect .hiwm-frame .hiwm-panel {
  padding: 28px 26px;
  background-color: #e9f6ef;
  border: none;
  border-radius: 18px;
}

.hiwm-frame .hiwm-panel-mint {
  border: none;
  box-shadow: none;
  border-radius: 18px;
}

.hiwm-connect-card {
  background-color: #ffffff;
  border: 1px solid #eef1ef;
  border-radius: 16px;
  padding: 22px;
}

.hiwm-connect-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.hiwm-connect-col {
  display: flex;
  flex-direction: column;
}

.hiwm-profile-box,
.hiwm-status-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  /* background-color: #ffffff; */
  border: 1px solid #EDEDED;
  margin-bottom: 14px;
  /* min-height: 74px; */
}

.hiwm-status-box {
  justify-content: space-between;
}


.hiwm-profile-box:last-child,
.hiwm-status-box:last-child {
  margin-bottom: 0;
}

.hiwm-status-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hiwm-status-text {
  font-size: 10px;
  color: #9aa4b2;
  line-height: 20px;
}

.hiwm-status-dots {
  display: inline-flex;
  gap: 6px;
}

.hiwm-status-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #F5F5F5;
}

.hiwm-warn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f1f3f5;
  color: #9aa4b2;
  flex-shrink: 0;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.hiwm-warn-mark,
.hiwm-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.hiwm-check-mark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hiwm-connector {
  position: relative;
  z-index: 3;
  height: 90px;
  margin: -12px 0;
}

.hiwm-connector-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hiwm-arrow-head {
  position: absolute;
  left: 17.9%;
  bottom: 0px;
  transform: translateX(-50%);
  display: inline-flex;
  z-index: 4;
}

.hiwm-plus {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background-color: #ece9fb;
  color: #7c6cf0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}

.hiwm-connect-to {
  padding: 20px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #eef1ef;
}

.hiwm-connect-to-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hiwm-ct-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
}

.hiwm-ct-row-solo {
  margin-top: -10px;
}

.hiwm-ct-row-solo .hiwm-bar {
  grid-column: 2;
}

.hiwm-coins-row {
  display: inline-flex;
  gap: 8px;
}

.hiwm-connect-to .hiwm-coin {
  background-color: #dae7e0;
}

.hiwm-chip {
  justify-self: start;
}

/* ---- Step 1: Connect — hover animation (scoped to this card only) ---- */
.hiwm-connect .hiwm-bar {
  width: var(--w);
  transition: width 0.55s ease, background-color 0.4s ease;
}

/* verified state hidden by default */
.hiwm-status-word-verified {
  display: none;
}

/* on hover: coins + bars turn green, bars resize, status flips to verified */
.hiwm-connect:hover .hiwm-coin {
  background-color: #46b481;
}

.hiwm-connect:hover .hiwm-bar {
  width: var(--wh, var(--w));
}

/* .hiwm-connect:hover .hiwm-profile-box .hiwm-bar-mint {
  background-color: #46b481;
} */

.hiwm-connect:hover .hiwm-status-word-pending {
  display: none;
}

.hiwm-connect:hover .hiwm-status-word-verified {
  display: inline;
}

.hiwm-connect:hover .hiwm-warn {
  background-color: #46b481;
  color: #ffffff;
}

.hiwm-connect:hover .hiwm-warn-mark {
  opacity: 0;
}

.hiwm-connect:hover .hiwm-check-mark {
  opacity: 1;
}

/* ---- Step 2: Map / radar ---- */
.hiwm-map .hiwm-panel-mint {
  min-height: 330px;
  overflow: hidden;
}

.hiwm-radar {
  display: block;
  /* width: 78%; */
  /* max-width: 320px; */
  margin: 6px auto 0;
  transform-origin: center center;
  transition: transform 0.8s ease;
}

.hiwm-radar path {
  transition: fill 0.5s ease;
}

.hiwm-float-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 20px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 0 10px 26px -14px rgba(15, 23, 41, 0.35);
  font-size: 0.78rem;
  color: var(--brand-ink);
  font-weight: 500;
}

.hiwm-float-pill strong {
  color: var(--brand-ink);
  font-weight: 700;
}

.hiwm-readiness-pill {
  top: 30px;
  left: 6%;
  z-index: 2;
}

/* animatable integer for the count-up */
@property --readiness-num {
  syntax: '<integer>';
  initial-value: 2;
  inherits: false;
}

/* "2%" — larger, muted; counts up on hover without changing pill width */
.hiwm-readiness-pill strong {
  font-size: 27px;
  color: #CFD1D4;
  font-weight: 700;
}

.hiwm-readiness-count {
  --readiness-num: 2;
  counter-reset: readiness var(--readiness-num);
  display: inline-block;
  width: 3.6ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
  transition: --readiness-num 0.9s ease, color 0.5s ease;
}

.hiwm-readiness-count::after {
  content: counter(readiness) '%';
}

/* "Readiness Score" — smaller, dark */
.hiwm-readiness-label {
  font-size: 17px;
  color: var(--brand-ink);
  font-weight: 500;
  letter-spacing: -0.47px;
  line-height: 28px;
}

.hiwm-map-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 14px 30px -18px rgba(15, 23, 41, 0.3);
  z-index: 2;
}

.hiwm-skillgaps {
  position: absolute;
  right: 26px;
  bottom: 26px;
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 12px 28px -16px rgba(15, 23, 41, 0.3);
  z-index: 2;
  transition: transform 0.6s ease;
}

.hiwm-skillgaps-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 8px;
  line-height: 24px;
  letter-spacing: -0.4px;
}

.hiwm-skillgaps-row {
  display: flex;
  gap: 16px;
}

.hiwm-skillgap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  color: var(--brand-ink);
  line-height: 26px;
  font-weight: 400;
}

.hiwm-gap-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #D9D9D9;
  transition: background-color 0.4s ease;
}

/* ---- Step 2: Map — hover animation (scoped to this card only) ---- */
.hiwm-map .hiwm-bar {
  width: var(--w);
  transition: width 0.55s ease;
}

/* on hover: radar rotates + turns green, coin greens, bars swap,
   skill-gaps lift, readiness counts up to 88% */
.hiwm-map:hover .hiwm-radar {
  transform: rotate(-45deg);
}

.hiwm-map:hover .hiwm-radar path {
  fill: var(--hf, #46b481);
}

.hiwm-map:hover .hiwm-coin {
  background-color: #46b481;
}

.hiwm-map:hover .hiwm-bar {
  width: var(--wh, var(--w));
}

.hiwm-map:hover .hiwm-skillgaps {
  transform: translateY(-12px);
}

.hiwm-map:hover .hiwm-gap-dot {
  background-color: #FFD5D5;
}

.hiwm-map:hover .hiwm-readiness-count {
  --readiness-num: 88;
  color: #46b481;
}

/* ---- Step 3: Engage / ring ---- */
.hiwm-engage .hiwm-panel-mint {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
}

.hiwm-engage-tabs {
  display: flex;
  gap: 14px;
  width: 100%;
  margin-bottom: 6px;
}

.hiwm-engage-tab {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #eef1ef;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand-ink);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiwm-engage-tab:nth-child(2) {
  transition-delay: 0.06s;
}

.hiwm-engage-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #F0F9F5;
  flex-shrink: 0;
}

.hiwm-engage-ring {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* rotate the svg around the ring's true centre (122,122 in its viewBox)
   so it spins in place instead of drifting down */
.hiwm-engage-ring svg {
  transform-origin: 122px 122px;
  transition: transform 0.7s ease;
}

.hiwm-engage-ring path {
  transition: fill 0.5s ease;
}

/* .hiwm-engage-ring svg {
  width: 190px;
  height: 190px;
} */

.hiwm-verify-chip {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 12px 28px -18px rgba(15, 23, 41, 0.3);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand-ink);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.12s;
}

.hiwm-verify-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background-color: #e6f5ed;
}

/* ---- Step 3: Engage — hover animation (scoped to this card only) ---- */
/* ring gray segments fade to varied greens */
.hiwm-engage:hover .hiwm-engage-ring path[fill="#CFD1D2"] {
  fill: #46B481;
}

.hiwm-engage:hover .hiwm-engage-ring path[fill="#E8E8E8"] {
  fill: #70DBA9;
}

.hiwm-engage:hover .hiwm-engage-ring path[fill="#E4E4E4"] {
  fill: #85E7BA;
}

.hiwm-engage:hover .hiwm-engage-ring path[fill="#E7E7E7"] {
  fill: #9DECC8;
}

.hiwm-engage:hover .hiwm-engage-ring path[fill="#DFDFDF"] {
  fill: #B6F5D8;
}

.hiwm-engage:hover .hiwm-engage-ring path[fill="#D9D9D9"] {
  fill: #CBF9E4;
}

/* ring only rotates in place (no vertical movement) */
.hiwm-engage:hover .hiwm-engage-ring svg {
  transform: rotate(-160deg);
}

/* labels spread out around the ring.
   Card 1 (Hiring) drops straight down; card 3 (Student Verification)
   left-aligns to the same line; card 2 (Employer) sits centre-right. */
.hiwm-engage:hover .hiwm-engage-tab:nth-child(1) {
  transform: translate(0, 72px);
}

.hiwm-engage:hover .hiwm-engage-tab:nth-child(2) {
  transform: translate(-15px, 180px);
}

.hiwm-engage:hover .hiwm-verify-chip {
  transform: translate(-85px, -35px);
}

/* ---- Step 4: Measure / outcome ---- */
.hiwm-measure .hiwm-panel-mint {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hiwm-measure-card {
  padding: 22px;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 14px 30px -22px rgba(15, 23, 41, 0.3);
}

.hiwm-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hiwm-metric-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 21px;
  border-radius: 154px;
  background-color: #F5F5F5;
  color: #BBBBBB;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.34px;
  min-width: var(--pw, 190px);
  transition: background-color 0.7s ease, color 0.7s ease, min-width 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* value crossfade — both readouts stacked, right-aligned */
.hiwm-metric-val-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 74px;
}

.hiwm-mval-default,
.hiwm-mval-hover {
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hiwm-mval-default {
  transform: translateY(0);
}

.hiwm-mval-hover {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, calc(-50% + 9px));
  opacity: 0;
  color: #46b481;
}

.hiwm-metric-hover {
  display: none;
}

/* animatable integer for the "this semester" count-up */
@property --trend-num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.hiwm-trend-count {
  --trend-num: 0;
  counter-reset: trend var(--trend-num);
  font-weight: 600;
  transition: --trend-num 1.2s ease;
}

.hiwm-trend-count::after {
  content: counter(trend) '%';
}

/* trend arrow crossfades ↓ -> ↑ (smooth both directions) */
.hiwm-trend-arrow {
  position: relative;
  display: inline-flex;
  justify-content: center;
  width: 1em;
  color: #46b481;
}

.hiwm-trend-arrow-down,
.hiwm-trend-arrow-up {
  transition: opacity 0.6s ease;
}

.hiwm-trend-arrow-up {
  position: absolute;
  inset: 0;
  display: inline-flex;
  justify-content: center;
  opacity: 0;
}

.hiwm-measure:hover .hiwm-trend-arrow-down {
  opacity: 0;
}

.hiwm-measure:hover .hiwm-trend-arrow-up {
  opacity: 1;
}

.hiwm-metric-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  color: #E2E2E2;
  letter-spacing: -0.34px;
}

.hiwm-metric-barval {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}

.hiwm-metric-barval i {
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background-color: #d7dbe0;
}

.hiwm-measure-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px;
  border-radius: 40px;
  border: 1px solid #EFEFEF;
  font-size: 15px;
  font-weight: 600;
  color: #46b481;
}

.hiwm-measure-trend em {
  font-style: normal;
  font-weight: 700;
  color: var(--brand-ink);
}

.hiwm-measure-trend-arrow {
  color: #46b481;
}

.hiwm-measure-note {
  display: block;
  margin-top: 16px;
  font-size: 16px;
  color: rgba(123, 123, 123, 0.5);
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.34px;
}

.hiwm-measure-status {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hiwm-measure-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 50px;
  background-color: #ffffff;
  box-shadow: 0 10px 24px -18px rgba(15, 23, 41, 0.3);
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-ink);
  letter-spacing: -0.34px;
}

.hiwm-measure-status-chip svg path {
  transition: fill 0.7s ease;
}

/* ---- Step 4: Measure — hover animation (scoped to this card only) ---- */
.hiwm-measure:hover .hiwm-metric-pill {
  background-color: #46b481;
  color: #ffffff;
  min-width: var(--pwh, 235px);
}

/* score / A+ crossfades + slides in */
.hiwm-measure:hover .hiwm-mval-default {
  opacity: 0;
  transform: translateY(-9px);
}

.hiwm-measure:hover .hiwm-mval-hover {
  opacity: 1;
  transform: translate(0, -50%);
  color: var(--brand-green);
}

/* "this semester" counts up 0% -> 12% */
.hiwm-measure:hover .hiwm-trend-count {
  --trend-num: 12;
}

/* swap the default readouts for the "achieved" green values */
.hiwm-measure:hover .hiwm-metric-default {
  display: none;
}

.hiwm-measure:hover .hiwm-metric-hover {
  display: inline-flex;
  color: #46b481;
}

/* status check circles turn green */
.hiwm-measure:hover .hiwm-measure-status-chip svg path {
  fill: #46b481;
}

/* ============================================================
   How It Works — "Everything starts with your existing data"
   ============================================================ */
.hiwp-data-section {
  background-color: #f6f8f6;
  padding: 120px 0 96px;
}

.hiwp-data-heading {
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1.2px;
  color: var(--brand-ink);
  margin-bottom: 20px;
}

.hiwp-data-actions {
  width: 100%;
}

/* ============================================================
   How It Works — "Get started in weeks, not months"
   ============================================================ */
.hiwp-impl-section {
  background-color: #ffffff;
  padding: 128px 0 100px;
}

.hiwp-impl-card {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 48px;
  max-width: 820px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.hiwp-impl-weeks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.hiwp-impl-week-card {
  background-color: #F0F9F5;
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hiwp-impl-week-title {
  font-size: 1.7rem;
  color: var(--brand-ink);
  line-height: 40px;
  letter-spacing: -1.2px;
}

.hiwp-impl-week-desc {
  font-size: var(--font-sm);
  color: var(--brand-light-gray);
  text-align: center;
  line-height: 18px;
  font-weight: 400;
}

/* ============================================================
   Institution — Universities page (/institution-universities)
   ============================================================ */
.iup {
  background-color: #ffffff;
}

.iup-hero {
  position: relative;
  padding: 74px 0 0;
  background-image: url('/new/imgs/institution-universities-hero-bg-img.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 85%;
  overflow: hidden;
}

.iup-hero-content {
  position: relative;
  z-index: 3;
  padding-bottom: 40px;
}

.iup-heading {
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -1.4px;
  color: var(--brand-ink);
  max-width: 870px;
  margin: 0 auto 30px;
}

.iup-subtitle {
  font-size: 1.125rem;
  line-height: 25px;
  color: var(--brand-ink);
  font-weight: 400;
  max-width: 750px;
  margin-bottom: 60px;
}

.iup-collage-subtitle {
  font-size: 1.125rem;
  line-height: 25px;
  color: var(--brand-ink);
  font-weight: 400;
  max-width: 800px;
  margin-bottom: 70px;
}


.iup-btn-dark {
  background-color: #0f1f1a;
  border: 1px solid #0f1f1a;
  color: #ffffff;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 11px 22px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  align-self: flex-start;
}

.iup-btn-dark:hover,
.iup-btn-dark:focus {
  background-color: #1a2e27;
  border-color: #1a2e27;
  color: #ffffff;
  transform: translateY(-1px);
}

.iup-btn-light {
  background-color: #ffffff;
  border: 1px solid #d8dcd9;
  color: var(--brand-ink);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 11px 22px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.iup-btn-light:hover,
.iup-btn-light:focus {
  background-color: #f4f5f4;
  border-color: #c4cac6;
  color: var(--brand-ink);
  transform: translateY(-1px);
}


.iup-stage-wrap {
  position: relative;
  margin-top: 1rem;
}

.iup-stage {
  position: relative;
  width: 100%;
  min-height: 320px;
}

.iup-card-wrap {
  position: absolute;
  z-index: 3;
}

.iup-card-wrap-left {
  top: 0%;
  left: -3%;
}

.iup-card-wrap-center {
  top: 25%;
  left: 46%;
}

.iup-card-wrap-right {
  top: -45%;
  right: -3%;
}

.iup-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(15, 31, 26, 0.08), 0 4px 10px rgba(15, 31, 26, 0.04);
  padding: 16px 18px;
}

.iup-card-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 20px;
}

.iup-card-readiness {
  width: 430px;
  padding: 13px 28px 28px 22px;
}

.iup-readiness-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iup-readiness-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.iup-readiness-label {
  font-size: 10px;
  color: var(--brand-light-gray);
}

.iup-readiness-pct {
  font-size: 10px;
}

.iup-readiness-pct-green {
  color: var(--brand-green);
}

.iup-readiness-pct-amber {
  color: #e09a2b;
}

.iup-readiness-pct-gray {
  color: var(--brand-light-gray);
}

.iup-readiness-bar {
  position: relative;
  height: 7px;
  border-radius: 55px;
  background-color: #F0F9F5;
  overflow: hidden;
}

.iup-readiness-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
}

.iup-readiness-bar-green {
  background-color: var(--brand-green);
}

.iup-readiness-bar-amber {
  background-color: #e09a2b;
}

.iup-readiness-bar-gray {
  background-color: #9aa3a0;
}

.iup-card-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 8px;
}

.iup-profile-avatar {
  width: 43px;
  height: 43px;
}

.iup-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iup-profile-meta {
  display: flex;
  flex-direction: column;
}

.iup-profile-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.iup-profile-role {
  font-size: 0.875rem;
  color: var(--brand-ink-muted);
}

.iup-card-placement {
  width: 260px;
  padding: 18px 18px 22px;
}

.iup-placement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.iup-placement-title {
  display: block;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--brand-ink);
}

.iup-placement-delta {
  display: block;
  font-size: 12px;
  color: var(--brand-ink);
}

.iup-placement-trend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background-color: rgba(70, 180, 129, 0.6);
  transition: background-color 0.4s ease;
}

.iup-card-placement:hover .iup-placement-trend {
  background-color: #46B481;
}

.iup-placement-donut {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}

.iup-placement-donut-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.iup-placement-donut-inner svg {
  display: block;
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.iup-card-placement:hover .iup-placement-donut-inner svg {
  transform: rotate(130deg);
}

.iup-placement-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.02em;
}

/* ============================================================
   Institution — "Why This Matters Now" section
   ============================================================ */
.iup-matters {
  background-color: #ffffff;
  padding: 100px 0 120px;
  text-align: center;
}

.iup-career-matters-subtitle {
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-light-gray);
  max-width: 850px;
  margin-bottom: 36px;
  font-weight: 400;
}

.iup-matters-callout {
  background-color: #46B481;
  color: #ffffff;
  padding: 17px 14px;
  border-radius: 14px;
  margin: 0 auto 48px;
  box-shadow: 0 10px 24px rgba(70, 180, 129, 0.18);
}

.iup-matters-callout-text {
  font-size: 0.875rem;
  line-height: 18px;
  text-align: left;
}

.iup-matters-connector {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1156px;
  margin: 0 auto 28px;
}

/* One continuous dashed line spanning from the first dot to the last dot */
.iup-matters-connector::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 16.666%;
  right: 16.666%;
  height: 1px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(to right,
      #94a3b8 0,
      #94a3b8 7px,
      transparent 7px,
      transparent 14px);
  z-index: 0;
}

.iup-matters-connector-cell {
  position: relative;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.iup-matters-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--brand-light-gray);
  position: relative;
  z-index: 1;
}

.iup-matters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1156px;
  margin: 0 auto;
}

.iup-matters-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.iup-matters-item-title {
  font-size: 1.125rem;
  color: var(--brand-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.iup-matters-item-card {
  background-color: #eaf6ef;
  color: var(--brand-ink);
  font-size: 0.875rem;
  line-height: 24px;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  font-weight: 500;
  max-width: 305px;
}

/* ============================================================
   Institution — Features ("Four things Hiree365 does")
   ============================================================ */
.iup-features {
  background-color: #ffffff;
  padding-top: 60px;
}

.iup-features-header {
  background-color: #F8F9F9;
  border-radius: 12px;
  padding: 40px;
}

.iup-features-heading {
  max-width: 500px;
}

.iup-features-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 18px;
  padding: 39px 49px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06),
    0 24px 56px rgba(15, 31, 26, 0.06);
  margin: 88px 0;
}

.iup-features-card:last-child {
  margin-bottom: 0;
}

.iup-features-card-collage-card {
  padding: 34px 22px 32px 60px;
}

.iup-racheal-feature-card {
  padding: 32px 42px;
}

.iup-fp-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 22px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.iup-fp-card-padding {
  padding: 34px;
}

.iup-fp-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 10px 0 20px;
}

.iup-fp-collage-head {
  margin: 28px 0 108px;
}

.iup-fp-avatar {
  position: relative;
}

.iup-fp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.iup-fp-avatar-badge {
  position: absolute;
  bottom: -15px;
  right: -10px;
}

.iup-fp-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.iup-fp-name {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--brand-ink);
}

.iup-fp-class {
  font-size: 12px;
  color: var(--brand-ink);
  line-height: 16px;
}

.iup-fp-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eaf6ef;
  border-radius: 10px;
  padding: 12px 16px 11px 15px;
  margin-bottom: 18px;
}

.iup-fp-status-text {
  display: flex;
  flex-direction: column;
}

.iup-fp-status-label {
  font-size: 10px;
  color: #46B481;
  line-height: 16px;
}

.iup-fp-status-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
}

.iup-fp-status-skeleton {
  display: block;
  height: 6px;
  border-radius: 45px;
  background-color: #E2EBE7;
  margin-top: 8px;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Resting widths: lower bar longer than the upper one. */
.iup-fp-status-skeleton-top {
  width: 22%;
}

.iup-fp-status-skeleton-bottom {
  width: 36%;
}

.iup-fp-course-skeleton {
  display: block;
  height: 14px;
  border-radius: 45px;
  background-color: #F5F5F5;
  width: 150px;
}

.iup-fp-status-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 7px;
  background: #fff;
}

.iup-fp-status-ring svg {
  display: block;
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover the Employability Profiles card: spin the readiness ring a half-turn
   and let the status bars grow. */
.plat-feature:hover .iup-fp-status-ring svg {
  transform: rotate(180deg);
}

.plat-feature:hover .iup-fp-status-skeleton-top {
  width: 70%;
}

.plat-feature:hover .iup-fp-status-skeleton-bottom {
  width: 50%;
}

.iup-fp-status-score {
  font-size: 1.125rem;
  line-height: 30px;
  font-weight: 700;
  color: #46B481;
}

.iup-fp-courses {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin: 35px 0 38px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.iup-fp-courses-header {
  background-color: #E5EEFE;
  padding: 6px 15px;
}

.iup-fp-courses-body {
  padding: 11px 19px 18px;
}

.iup-fp-section-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0;
}

.iup-fp-course-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

.iup-fp-course-row:last-child {
  margin-bottom: 0;
}

.iup-fp-course-name {
  font-size: 0.8125rem;
  color: var(--brand-ink);
}

.iup-fp-pill {
  font-size: 10px;
  font-weight: 400;
  padding: 3px 12px;
  border-radius: 45px;
  white-space: nowrap;
  flex-shrink: 0;
}

.iup-inprogress-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 33px;
}

.iup-fp-pill-progress {
  background-color: #cfe8f8;
  color: #1d6fa5;
}

.iup-fp-pill-completed {
  background-color: #cdebde;
  color: #1f8f6a;
}

.iup-fp-pill-match {
  background-color: #e7d9f7;
  color: #6b3eb5;
}

.iup-fp-pill-medium {
  background-color: #fde9c2;
  color: #b67a17;
}

.iup-fp-pill-offered {
  background-color: #cfe8f8;
  color: #1d6fa5;
}

.iup-pt-score {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}

.iup-pt-score-high {
  background-color: #e7d9f7;
  color: #6b3eb5;
}

.iup-pt-score-low {
  background-color: #fde9c2;
  color: #b67a17;
}


.iup-fp-course-bar .iup-fp-pill {
  position: relative;
  z-index: 1;
}

.iup-fp-skills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 45px;
}

.iup-fp-skill-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.iup-fp-skill-label {
  font-size: 10px;
  color: var(--brand-light-gray);
}

.iup-fp-skill-pct {
  font-size: 10px;
  font-weight: 500;
  color: #46B481;
}

.iup-fp-skill-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background-color: #eef0ee;
  overflow: hidden;
}

.iup-fp-skill-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #46B481;
  border-radius: inherit;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.iup-fp-head,
.iup-fp-status,
.iup-fp-courses,
.iup-fp-skills {
  transition: margin 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* extra space is added equally at the top (head) and bottom (skills) while the
   inner gaps tighten — so the content compresses toward the centre, the block
   keeps its height, and nothing shifts horizontally */
.iup-features-card.is-active .iup-fp-head {
  margin: 55px 0 12px;
}

.iup-features-card.is-active .iup-fp-status {
  margin-bottom: 5px;
}

.iup-features-card.is-active .iup-fp-courses {
  margin: 16px 0 16px;
}

.iup-features-card.is-active .iup-fp-skills {
  margin-bottom: 40px;
}

/* Second feature card (placement table) — the head and the table draw together
   on hover. Freed gap is split equally top & bottom so the column keeps its
   height (the text side stays the same) and only the inner space compresses.
   Default gaps total 120px (head 10+20, table-top 90); these keep it at 120px. */
.iup-pt-table {
  transition: margin 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-racheal-feature-card.is-active .iup-fp-head {
  margin: 30px 0 10px;
}

.iup-racheal-feature-card.is-active .iup-pt-table {
  margin: 30px 0 40px;
}

/* on hover, the placeholder bars in the empty rows lengthen */
.iup-pt-skeleton {
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-racheal-feature-card.is-active .iup-pt-table .iup-pt-row:nth-child(4) .iup-pt-skeleton,
.iup-racheal-feature-card.is-active .iup-pt-table .iup-pt-row:nth-child(5) .iup-pt-skeleton {
  width: 88%;
}

/* the course status pill eases its colour change as it flips state */
.iup-fp-pill {
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* default (no hover): pills are empty grey placeholders — the coloured
   "In Progress" / "Completed" labels are revealed on hover */
.iup-fp-pill-empty {
  background-color: #eef0f0;
  min-width: 72px;
  min-height: 18px;
}

.iup-features-copy {
  padding-left: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.iup-features-title {
  max-width: 500px;
  margin: 0 0 20px;
}

.iup-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.iup-features-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--brand-ink);
}

.iup-features-list-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-green);
  flex-shrink: 0;
}

.iup-pt-table {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  margin-top: 90px;
}

.iup-pt-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  align-items: center;
  gap: 10px;
  padding: 15px 22px 10px 22px;
}

.iup-pt-row:last-child {
  border-bottom: 0;
}

.iup-pt-row-head {
  background-color: #46B481;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 10px 14px;
}

.iup-pt-row-head .iup-pt-col {
  color: #ffffff;
}

.iup-pt-col {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--brand-ink);
  min-width: 0;
}

.iup-pt-student {
  font-weight: 600;
}


.iup-pt-name {
  font-size: 11px;
  color: var(--brand-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.iup-pt-skeleton {
  display: inline-block;
  width: 70px;
  height: 20px;
  border-radius: 33px;
  background-color: #F5F5F5;
}

.iup-pt-skeleton-grow {
  display: block;
  width: 90px;
  flex: 1 1 60px;
  min-width: 0;
}

.iup-pt-table .iup-pt-row:nth-child(2) .iup-pt-status .iup-pt-skeleton {
  width: 55px;
}

.iup-pt-table .iup-pt-row:nth-child(3) .iup-pt-status .iup-pt-skeleton {
  width: 65px;
}

.iup-pt-table .iup-pt-row:nth-child(4) .iup-pt-student .iup-pt-skeleton {
  width: 90px;
}

.iup-pt-table .iup-pt-row:nth-child(4) .iup-pt-status .iup-pt-skeleton {
  width: 40px;
}

.iup-pt-table .iup-pt-row:nth-child(4) .iup-pt-match .iup-pt-skeleton {
  width: 70px;
}

.iup-pt-table .iup-pt-row:nth-child(5) .iup-pt-student .iup-pt-skeleton {
  width: 70px;
}

.iup-pt-table .iup-pt-row:nth-child(5) .iup-pt-status .iup-pt-skeleton {
  width: 40px;
}

.iup-pt-table .iup-pt-row:nth-child(5) .iup-pt-match .iup-pt-skeleton {
  width: 70px;
}


/* ---------- Employer invites (third feature card) ---------- */
.iup-emp-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.iup-emp-tab {
  background: transparent;
  border: 0;
  padding: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink-muted);
  border-bottom: 2px solid transparent;
  line-height: 21px;
}

.iup-emp-tab.is-active {
  color: #46B481;
  border-bottom: 3px solid #46B481;
}

.iup-emp-list {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin-bottom: 48px;
}

.iup-emp-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.iup-emp-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #F0F0F0;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* on hover the logos shrink (default stays 80px) */
.iup-emp-feature-card.is-active .iup-emp-logo {
  transform: scale(0.7);
}

.iup-emp-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.iup-emp-name {
  font-size: 1.125rem;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -0.45px;
}

.iup-emp-email {
  font-size: 12px;
  color: var(--brand-ink);
  margin-bottom: 2px;
  line-height: 16px;
}

.iup-emp-status {
  font-weight: 600;
}

.iup-emp-status-connected {
  background-color: #EBF6DF;
  color: #46B481;
  font-size: 12px;
}

.iup-emp-status-pending {
  background-color: #FCF8EC;
  color: #EDC949;
  font-size: 12px;
}

.iup-emp-invite-btn {
  background-color: #0f1f1a;
  border: 0;
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  max-height: 50px;
  transition: background-color 0.3s ease, opacity 0.5s ease,
    max-height 0.6s ease, padding 0.6s ease, margin 0.6s ease;
}

.iup-emp-invite-btn:hover {
  background-color: #1a2e27;
}

.iup-emp-col {
  position: relative;
  margin: 60px auto;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    margin 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the whole block slides up on hover; the negative margin-bottom reclaims the
   space the upward transform vacates (so no empty gap is left below) */
.iup-emp-feature-card.is-active .iup-emp-col {
  transform: translateY(-65px);
  margin-bottom: -65px;
}

/* the list tightens and its invite button collapses so the status drops down */
.iup-emp-list {
  transition: margin-bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-emp-feature-card.is-active .iup-emp-list {
  margin-bottom: 8px;
  gap: 10px;
}

.iup-emp-feature-card.is-active .iup-emp-invite-btn {
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* the invite card sits just below the list card and rises up from the bottom,
   leaving a little space below the status */
.iup-emp-invite-card {
  position: relative;
  z-index: 3;
  margin-top: -16px;
  padding: 0 26px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(50px);
  transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.iup-emp-feature-card.is-active .iup-emp-invite-card {
  max-height: 230px;
  width: 90%;
  opacity: 1;
  padding: 15px;
  transform: translateY(-50px);
  margin: 0 auto -65px;
}

/* the form fills the card with no extra space at the top */
.iup-emp-form {
  width: 100%;
}

.iup-emp-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 14px;
}

.iup-emp-form-label {
  display: block;
  font-size: 12px;
  color: var(--brand-ink);
  margin-bottom: 6px;
}

.iup-emp-form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #e6eae7;
  border-radius: 9px;
  font-size: 13px;
  color: var(--brand-light-gray);
  background-color: #ffffff;
}

.iup-emp-form-input:focus {
  outline: none;
  border-color: #46B481;
}

.iup-emp-form-help {
  font-size: 11px;
  color: var(--brand-light-gray);
  line-height: 16px;
  margin: 12px 0 18px;
}

.iup-emp-form-actions {
  display: flex;
  gap: 12px;
}

.iup-emp-form-cancel:not(:disabled),
.iup-emp-form-invite:not(:disabled) {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  transition: background-color 0.3s ease;
}

.iup-emp-form-cancel {
  border: 1px solid #e6eae7;
  background-color: #ffffff;
  color: var(--brand-ink);
}

.iup-emp-form-invite {
  border: 0;
  background-color: #0f1f1a;
  color: #ffffff;
}

.iup-emp-form-invite:hover {
  background-color: #1a2e27;
}

.iup-rpt-chart {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 13px 19px;
  margin-bottom: 53px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  transition: padding-top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


.iup-rpt-chart-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 53px;
  line-height: 18px;
  transition: margin-bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-rpt-bars {
  display: flex;
  gap: 10px;
  height: 200px;
}

.iup-rpt-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 10px;
  color: var(--brand-ink-muted);
  padding-right: 4px;
  padding-bottom: 22px;
  flex-shrink: 0;
}

.iup-rpt-bars-row {
  display: flex;
  flex: 1;
  align-items: stretch;
  gap: 14px;
  border-left: 1px dashed #e6eae7;
  padding-left: 8px;
}

.iup-rpt-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iup-rpt-bar-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.iup-rpt-bar-col .iup-rpt-bar-label {
  margin-top: 8px;
}

.iup-rpt-bar {
  width: 100%;
  max-width: 60px;
  border-radius: 8px 8px 0 0;
  display: block;
}

.iup-rpt-bar-green {
  background-color: #1f8f6a;
}

.iup-rpt-bar-amber {
  background-color: #f6e4a8;
}

.iup-rpt-bar-teal {
  background-color: #bcd9f3;
}

.iup-rpt-bar-purple {
  background-color: #d1c4f0;
}

.iup-rpt-bar-orange {
  background-color: #f7c8a8;
}

.iup-rpt-bar-label {
  font-size: 10px;
  white-space: nowrap;
}

.iup-rpt-bar-tip {
  position: absolute;
  bottom: calc(88% - 66px);
  left: 40%;
  transform: translate(8px, 0);
  background-color: #ffffff;
  color: var(--brand-ink);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(15, 31, 26, 0.12);
  border: 1px solid #ebefe9;
  z-index: 2;
}

.iup-rpt-bar-tip-label {
  color: var(--brand-ink-muted);
}

.iup-rpt-bar-tip-label em {
  font-style: normal;
}

.iup-rpt-bar-tip strong {
  font-size: var(--font-sm);
  color: #1f8f6a;
}

.iup-rpt-tabs {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 24px;
}

.iup-rpt-tab {
  border: 1px solid #d8dcd9;
  padding: 5px 10px;
  border-radius: 41px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.iup-rpt-tab.is-active {
  background-color: #0f1f1a;
  border-color: #0f1f1a;
  color: #ffffff;
}

.iup-rpt-summary {
  display: flex;
  align-items: center;
  gap: 50px;
  transition: margin-top 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-rpt-donut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.iup-rpt-donut svg {
  display: block;
}

.iup-rpt-donut-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.02em;
}

.iup-rpt-summary-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.iup-rpt-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.iup-rpt-summary-text strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-ink);
}

.iup-rpt-summary-text small {
  display: block;
  font-size: 0.75rem;
  color: var(--brand-ink-muted);
  margin-top: 2px;
}

/* ---------- Fourth feature card hover (outcome reporting) ---------- */
/* The card keeps a fixed size on hover — only the icon + tooltips animate,
   so the card never resizes and the right text column never shifts. */
.iup-rpt-summary-icon {
  border-radius: 8px;
  transition: background-color 0.4s ease;
}

.iup-rpt-summary-icon svg {
  transition: stroke 0.4s ease;
}

.iup-rpt-feature-card:hover .iup-rpt-summary-icon {
  background-color: var(--brand-green);
  color: var(--brand-white);
}

.iup-rpt-feature-card:hover .iup-rpt-summary-icon svg {
  stroke: #ffffff;
}

/* On hover the gap below the title collapses (−38px) and that space is applied
   to the head (chart padding-top +19px) and above the pie graph (summary
   margin-top +19px). The three deltas net to zero, so the card keeps its size
   and the right text column never shifts. */
.iup-rpt-feature-card:hover .iup-rpt-chart-title {
  margin-bottom: 15px;
}

.iup-rpt-feature-card:hover .iup-rpt-chart {
  padding-top: 32px;
}

.iup-rpt-feature-card:hover .iup-rpt-summary {
  margin-top: 19px;
  transform: translateY(-18px);
}

.iup-rpt-bar-tip-hover {
  left: 80px;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-rpt-feature-card:hover .iup-rpt-bar-tip-hover {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   Institution — Compare ATS vs Hiree365
   ============================================================ */
.iup-compare {
  padding: 94px 0;
}

.iup-compare-heading {
  margin-bottom: 60px;
}

.iup-compare-card {
  border: 1px solid #ebefe9;
  border-radius: 12px;
  overflow: hidden;
  max-width: 854px;
  margin: 0 auto;
  box-shadow: 0 4px 14px rgba(15, 31, 26, 0.04);
}

.iup-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.iup-compare-row:not(:last-child) {
  border-bottom: 1px solid #f1f4f1;
}

.iup-compare-row-head {
  background-color: #F0F9F5;
}

.iup-compare-col {
  padding: 16px 54px;
  font-size: 0.813rem;
  line-height: 18px;
  color: var(--brand-ink);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.iup-compare-row-head .iup-compare-col {
  font-size: 0.938rem;
  font-weight: 600;
}

.iup-compare-row-head .iup-compare-col-left {
  color: var(--brand-ink);
}

.iup-compare-row-head .iup-compare-col-right {
  color: #46B481;
}

.iup-compare-col-right {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.iup-compare-row:not(.iup-compare-row-head) .iup-compare-col-right {
  background-color: rgba(243, 244, 246, 0.3);
  padding: 16px 16px 22px 16px;
  font-weight: 400;
}

.iup-compare-text {
  display: inline-block;
  max-width: 266px;
}

.iup-dimentions-table-text {
  display: inline-block;
  max-width: 421px;
}

.iup-compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===================== How universities use Hiree365 ===================== */
.iup-usecases {
  position: relative;
  padding: 30px 0 100px;
  background-color: #ffffff;
  overflow: hidden;
}

.iup-usecases-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  z-index: 0;
  pointer-events: none;
}

.iup-usecases-inner {
  position: relative;
  z-index: 1;
}

.iup-usecases-header {
  margin-bottom: 66px;
}

.iup-usecases-card {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 24px 60px rgba(15, 31, 26, 0.12);
  overflow: hidden;
}

.iup-usecases-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 31px 32px 0 30px;
}

.iup-usecases-top-text {
  flex: 1;
  max-width: 570px;
}

.iup-usecases-eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #46B481;
  margin-bottom: 12px;
}

.iup-usecases-desc {
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-light-gray);
  margin-bottom: 70px;
  font-weight: 400;
}

.iup-usecases-top-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 100px;
  border-radius: 20px;
  background: #d8efe4;
  flex-shrink: 0;
}

.iup-usecases-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 4px solid #e6ece9;
}

.iup-usecases-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 22px 26px;
  background: transparent;
  border: none;
  border-left: 1px dashed #E4E4E4;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.iup-usecases-tab:first-child {
  border-left: none;
}

.iup-usecases-tab::before {
  content: '';
  position: absolute;
  left: -1px;
  bottom: calc(100% + 4px);
  width: 0;
  height: 9999px;
  border-left: 1px dashed #E4E4E4;
  pointer-events: none;
}

.iup-usecases-tab:first-child::before {
  display: none;
}

.iup-usecases-tab-bar {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  transition: background-color 0.2s ease;
}

.iup-usecases-tab-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.7px;
  line-height: 18px;
  text-transform: uppercase;
  color: #46B481;
  margin-top: 170px;
}

.iup-usecases-tab-label {
  font-size: var(--font-desc-block);
  font-weight: 700;
  line-height: 25px;
  color: #0f1f1a;
  letter-spacing: -0.5px;
}

.iup-usecases-tab.is-active {
  background-color: transparent;
  background-image: linear-gradient(180deg,
      rgba(70, 180, 129, 0.2) 0%,
      rgba(162, 217, 192, 0.6) 60%,
      rgba(255, 255, 255, 1) 90%);
}

.iup-usecases-tab.is-active .iup-usecases-tab-bar {
  background: #46B481;
}

.iup-usecases-tab:focus-visible {
  outline: 2px solid #46B481;
  outline-offset: -2px;
}

/* ===================== Integrations section ===================== */
.intg-section {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 50px;
}

.intg-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 30px 0;
  z-index: 0;
  pointer-events: none;
}

.intg-inner {
  position: relative;
  z-index: 1;
  margin: 128px auto;
}

.cta-btn-primary {
  background-color: #46B481;
  border: 1px solid #46B481;
  color: #ffffff;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 11px 22px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-btn-primary:hover,
.cta-btn-primary:focus {
  background-color: #3aa372;
  border-color: #3aa372;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ===================== CTA section ===================== */
.cta-section {
  padding: 93px 0px;
  background-color: rgba(243, 244, 246, 0.5);
}

.cta-card {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-ink);
  padding: 70px 0 220px;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-actions {
  align-items: flex-start;
}

.cta-secondary-col {
  gap: 8px;
}

.cta-secondary-col .cta-note {
  margin: 0;
}

.cta-heading {
  font-size: 36px;
  line-height: 35px;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: -0.9px;
}

.cta-note {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

/* ===================== Institution / Colleges page ===================== */
.iuc {
  background-color: #ffffff;
}

.iuc-hero {
  position: relative;
  padding: 74px 0 0;
  overflow: hidden;
}

.iuc-hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 90%;
  z-index: 0;
  pointer-events: none;
}

.iuc-hero-career-service-bg {
  background-size: 100% 100%;
}

.iuc-hero-content {
  position: relative;
  z-index: 3;
  padding-bottom: 60px;
}

.iuc-hero-actions {
  margin-bottom: 0;
  align-items: flex-start;
}

.iuc-hero-action-bottom-py {
  padding-bottom: 90px;
}

.iuc-hero-secondary-col {
  gap: 8px;
}

.iuc-hero-note {
  font-size: var(--font-sm);
  color: var(--brand-ink-muted, var(--brand-light-gray));
  margin: 0;
}

.iuc-stage-wrap {
  position: relative;
  margin-top: 1rem;
  z-index: 2;
}

.iuc-stage {
  position: relative;
  width: 100%;
  min-height: 360px;
}

.iuc-card-wrap {
  position: absolute;
  z-index: 3;
}

.iuc-card-wrap-left {
  top: 0%;
  left: 0%;
}

.iuc-card-wrap-right {
  top: 13%;
  right: 0%;
}

.iuc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #eef2ee;
  flex-shrink: 0;
}

.iuc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.iuc-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 13px;
  border-radius: 45px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #E2E2E2;
}

.iuc-status-green {
  border: 1px solid #85DE93;
  color: #6EBB4F
}

.iuc-status-amber {
  color: #BB914F;
  border: 1px solid #FFE8C2;
}

.iuc-status-blue {
  color: #3B82C4;
  border: 1px solid #C2DCFF;
}

/* in the Students Pipeline card the status pills are filled — each tone's
   colour becomes the background, with white text */
.iuc-card-pipeline .iuc-status-green {
  background-color: #6EBB4F;
  border-color: #6EBB4F;
  color: #ffffff;
}

.iuc-card-pipeline .iuc-status-amber {
  background-color: #BB914F;
  border-color: #BB914F;
  color: #ffffff;
}

.iuc-card-pipeline .iuc-status-blue {
  background-color: #3B82C4;
  border-color: #3B82C4;
  color: #ffffff;
}

.iuc-card-active {
  width: 410px;
  padding: 26px 24px;
}

.iuc-card-active-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid #F0F9F5;
  padding: 10px 20px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.08);
}

/* second profile card — hidden by default, slides in below the first on hover.
   Uses grid-template-rows 0fr→1fr (instead of max-height) so the height eases to
   the exact content height — no dead-zone, so expand/collapse stay smooth. */
.iuc-card-active-head-wrap {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--brand-white);
  opacity: 0;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.08);
  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease,
    margin-top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iuc-card-active-head-wrap>* {
  min-height: 0;
  overflow: hidden;
}

.iuc-card-active:hover .iuc-card-active-head-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

.iuc-card-active-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.iuc-card-active-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.iuc-card-active-role {
  font-size: 12px;
  color: var(--brand-light-gray)
}

.iuc-card-active-section {
  padding-top: 14px;
}

.iuc-card-active-section-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #0f1f1a;
  margin-bottom: 14px;
}

.iuc-opp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iuc-opp-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.iuc-opp-logo {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #F0F0F0;
}


.iuc-opp-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.iuc-opp-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f1f1a;
}

.iuc-opp-company {
  font-size: 11px;
  color: var(--brand-light-gray);
}

.iuc-card-pipeline {
  width: 410px;
  padding: 15px 32px 15px 24px;
}

.iuc-card-pipeline-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  margin: 0 0 14px;
}

.iuc-pipeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.iuc-pipeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* third student row — hidden by default, reveals on hover. Uses grid-template-rows
   0fr→1fr so it eases to the exact row height (smooth expand/collapse). The negative
   margin-top cancels the list's 12px gap so there's no empty space when hidden. */
.iuc-pipeline-row-extra {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -12px;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.45s ease,
    margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.iuc-pipeline-row-extra>* {
  min-height: 0;
  overflow: hidden;
}

.iuc-card-pipeline:hover .iuc-pipeline-row-extra {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
}

.iuc-pipeline-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.iuc-pipeline-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.iuc-pipeline-role {
  font-size: 12px;
  color: var(--brand-light-gray)
}

/* ============================================================
   What Hiree365 gives college careers teams
============================================================ */
.iuc-careers {
  padding: 70px 0;
  background: rgba(243, 244, 246, 0.5);
  margin: 60px 0;
}

.iuc-careers-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.iuc-careers-grid-wide {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 60px;
}

.iuc-careers-card {
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 33px;
  box-shadow: 0 2px 6px rgba(15, 31, 26, 0.04);
}

.iuc-careers-card-wide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-height: 220px;
  padding: 24px 26px;
}

.lms .iuc-careers-card-wide {
  flex-direction: column;
  align-items: stretch;
}

.lms .iuc-careers-card-wide .iuc-careers-card-img {
  max-width: 100%;
}

.iuc-careers-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.iuc-careers-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #F0F9F5;
  margin-bottom: 18px;
  padding: 12px;
}

.iuc-careers-card-title {
  font-size: 1.063rem;
  line-height: 25px;
  letter-spacing: -0.5px;
  color: var(--brand-ink);
  margin-bottom: 12px;
  font-weight: 600;
}

.iuc-careers-card-desc {
  font-size: 0.875rem;
  line-height: 26px;
  color: var(--brand-light-gray);
  margin: 0;
  margin-right: 30px;
}

.iuc-careers-card-img {
  display: block;
  flex: 0 0 auto;
  max-width: 40%;
  height: auto;
  align-self: flex-end;
}

.iuc-careers-cta {
  margin-top: 8px;
}

/* ============================================================
   Placement Rates mini chart (under Adrian Michael profile)
============================================================ */
.iup-pr-chart {
  margin-bottom: 40px;
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);

}

.iup-pr-chart-header {
  background-color: #EEF2FF;
  padding: 14px 20px;
}

.iup-pr-chart-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand-ink);
}

.iup-pr-chart-body {
  display: flex;
  align-items: stretch;
  gap: 16px;
  height: 230px;
  padding: 20px 22px 12px;
}

.iup-pr-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  color: #9ca3af;
  text-align: right;
  padding-bottom: 32px;
  flex: 0 0 auto;
  min-width: 22px;
}

.iup-pr-plot {
  position: relative;
  flex: 1 1 auto;
  padding-bottom: 32px;
}

.iup-pr-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ebefe9;
  pointer-events: none;
  margin-bottom: 32px;
}

.iup-pr-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 18px;
  height: 100%;
}

.iup-pr-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  height: 100%;
  width: 87px;
}

.iup-pr-bar-fill {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0;
  background-color: #E4E7EC;
  margin-top: auto;
  height: var(--h-default);
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-pr-bar-gray .iup-pr-bar-fill {
  background-color: #D3D3D3;
}

.iup-pr-bar-light-gray .iup-pr-bar-fill {
  background-color: #E5E7EB;
}

.iup-pr-bar-green .iup-pr-bar-fill {
  background-color: #46B481;
}

.iup-pr-bar-value {
  position: absolute;
  left: 70%;
  bottom: var(--h-default);
  transform: translateY(50%);
  font-size: 15px;
  font-weight: 700;
  color: #2CB58E;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 3px 6px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.08);
  z-index: 2;
  transition: bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-pr-bar-value .pr-val-hover {
  display: none;
}

.iup-features-card-collage-card:hover .iup-pr-bar-fill {
  height: var(--h-hover);
}

.iup-features-card-collage-card:hover .iup-pr-bar-value {
  bottom: var(--h-hover);
}

.iup-features-card-collage-card:hover .iup-pr-bar-value .pr-val-default {
  display: none;
}

.iup-features-card-collage-card:hover .iup-pr-bar-value .pr-val-hover {
  display: inline;
}

/* the middle gap (head → chart) compresses, with the freed space split equally
   to the top and bottom so the content stays centred and the card keeps its
   height (default gaps: head 28+108 + chart-bottom 40 = 176; hover keeps 176) */
.iup-fp-collage-head,
.iup-pr-chart {
  transition: margin 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-features-card-collage-card:hover .iup-fp-collage-head {
  margin: 62px 0 40px;
}

.iup-features-card-collage-card:hover .iup-pr-chart {
  margin-bottom: 74px;
}

.iup-pr-bar-label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--brand-light-gray);
  white-space: nowrap;
}

/* ============================================================
   Classe365 advantage stacked cards (left of "advantage" card)
============================================================ */
.iup-classe-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 50px 0;
  position: relative;

}

.iup-classe-stack>.iup-classe-card {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-classe-feature-card:hover .iup-classe-stack>.iup-classe-card:first-child {
  transform: translateY(-45px);
}

.iup-classe-feature-card:hover .iup-classe-stack>.iup-classe-card:last-child {
  transform: translateY(45px);
}

.iup-classe-feature-card:hover .integration-connector-line {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
}

.iup-classe-feature-card:hover .integration-connector-line-top {
  transition-delay: 0.05s;
}

.iup-classe-feature-card:hover .integration-connector-line-bottom {
  transition-delay: 0.1s;
}

.iup-classe-feature-card:hover .integration-connector-bolt {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* connector holds the bolt centred in the gap between the cards */
.iup-classe-connector {
  position: relative;
  flex: 0 0 auto;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.iup-classe-connector-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #d3ddd8;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-classe-feature-card:hover .iup-classe-connector-line {
  top: -24px;
  bottom: -24px;
  transform: translateX(-50%) scaleY(1);
}

.iup-classe-connector-bolt {
  position: relative;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--brand-green);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(20, 183, 137, 0.3);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
    opacity 0.4s ease 0.1s;
}

.iup-classe-feature-card:hover .iup-classe-connector-bolt {
  opacity: 1;
  transform: scale(1);
}

.iup-classe-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  padding: 18px 14px;
}

.iup-classe-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0px 0px 14px;
}


.iup-classe-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px;
}

.iup-classe-avatar {
  position: relative;
  display: inline-block;
  width: 75px;
  height: 75px;
  flex: 0 0 auto;
}

.iup-classe-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.iup-classe-avatar-badge {
  position: absolute;
  bottom: -3px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.iup-classe-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.iup-classe-profile-name {
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-ink);
  line-height: 26px;
  letter-spacing: -0.47px;
}

.iup-classe-profile-detail {
  font-size: var(--font-sm);
  color: var(--brand-ink);
  line-height: 15px;
  font-weight: 400;
}

.iup-classe-profile-pill {
  display: inline-flex;
  align-self: flex-start;
  background-color: #2CB58E;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  margin-top: 6px;
  line-height: 1;
}

/* ============================================================
   Training Providers hero — floating stat + export cards
============================================================ */
.itp-stat-card {
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: #ffffff;
  border: 1px solid #F0F9F5;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(15, 31, 26, 0.08), 0 4px 10px rgba(15, 31, 26, 0.04);
  overflow: hidden;
  max-width: 473px;
  padding: 16px 20px;
}

.itp-stat-divider {
  flex: 0 0 1px;
  width: 1px;
  background-color: #ebefe9;
}

.iuc-stat-wrap-left {
  top: -12%;
  left: 12%;
}

.iuc-stat-wrap-right {
  top: 0%;
  right: 9%;
}

.iuc-career-wrap-left {
  top: 3%;
  left: 9%;
}

.iuc-career-wrap-right {
  top: 3%;
  right: 9%;
}

.itp-stat-left-cell {
  padding-left: 34px;
}

.itp-stat-right-cell {
  padding-right: 54px;
}

.itp-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  box-shadow: 0 6px 14px rgba(15, 31, 26, 0.08), 0 1px 2px rgba(15, 31, 26, 0.04);
  margin-bottom: 12px;
}

.itp-outcomes-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.itp-stat-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
}

.itp-outcomes-stat-label {
  font-size: 0.875rem;
}

.itp-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #46B481;
}

.itp-stat-delta {
  display: block;
  font-size: 12px;
  color: var(--brand-light-gray);
  line-height: 18px;
  font-weight: 300;
}

.itp-export-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 16px 36px rgba(15, 31, 26, 0.08), 0 4px 10px rgba(15, 31, 26, 0.04);
  width: 364px;
  max-width: 100%;
}

.itp-export-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 20px;
}

.itp-export-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================
   Built for global compliance — country cards
============================================================ */
.itp-compliance {
  padding: 80px 0 60px;
}

.itp-compliance-subtitle {
  font-size: var(--font-desc-block);
  color: var(--brand-light-gray);
  line-height: 25px;
}

.itp-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.itp-compliance-card {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 23px 23px 16px;
  box-shadow: 0 2px 6px rgba(15, 31, 26, 0.04);
  display: flex;
  flex-direction: column;
}

.itp-compliance-flag {
  display: inline-block;
  width: 70px;
  height: 35px;
  margin-bottom: 16px;
}

.itp-compliance-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.itp-compliance-country {
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-ink);
  letter-spacing: -0.5px;
}

.itp-compliance-desc {
  font-size: 0.875rem;
  line-height: 24px;
  color: var(--brand-light-gray);
  font-weight: 400;
  flex: 1 1 auto;
}

.itp-compliance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.itp-compliance-tag {
  display: inline-flex;
  align-items: center;
  background-color: #ECEEF0;
  color: #45464D;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 15px;
}

/* ============================================================
   "From compliance burden..." left-column reporting visual
============================================================ */
.itp-burden-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.itp-burden-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
  transition: margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.itp-burden-feature-card:hover .itp-burden-pills {
  margin-top: 0;
}

.itp-burden-feature-card:hover .itp-burden-export-row.is-muted {
  opacity: 1;
}

.itp-burden-status {
  flex-direction: column;
  align-items: stretch;
}

.itp-burden-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Smooth reveal: the grid row animates from 0fr to the pie's exact content height,
   so the pie grows open and pushes the Export Center down with no stutter
   (max-height eases against a guessed cap and stalls; grid tracks real height).
   The pie contents fade + lift in alongside the expansion. */
.itp-burden-pie-wrap {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.itp-burden-feature-card:hover .itp-burden-pie-wrap {
  grid-template-rows: 1fr;
  margin-top: 14px;
}

.itp-burden-pie {
  min-height: 0;
  overflow: hidden;
}

.itp-burden-pie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 31, 26, 0.04);
  padding: 12px 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.08s,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.itp-burden-feature-card:hover .itp-burden-pie-inner {
  opacity: 1;
  transform: translateY(0);
}

.itp-burden-pie-chart {
  position: relative;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: conic-gradient(#46B481 0 60%, #a8dcc6 60% 85%, #d7dde2 85% 100%);
}

.itp-burden-pie-pct {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-ink);
}

.itp-burden-pie-pct-1 {
  top: 46%;
  left: 16%;
}

.itp-burden-pie-pct-2 {
  top: 40%;
  left: 60%;
  color: var(--brand-ink);
}

.itp-burden-pie-pct-3 {
  top: 14%;
  left: 24%;
  color: var(--brand-ink);
}

.itp-burden-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.itp-burden-pie-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand-ink);
}

.itp-burden-pie-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.itp-burden-pie-dot-1 {
  background-color: #46B481;
}

.itp-burden-pie-dot-2 {
  background-color: #a8dcc6;
}

.itp-burden-pie-dot-3 {
  background-color: #d7dde2;
}

.itp-burden-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #DDEDFF;
  color: #326DAF;
  border-radius: 45px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 400;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 17px;
}

.itp-burden-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #326DAF;
  flex: 0 0 auto;
}

.itp-burden-pill-label {
  white-space: nowrap;
}

.itp-burden-pill-value {
  font-weight: 700;
  color: #326DAF;
  margin-left: auto;
  white-space: nowrap;
}

.itp-burden-rate {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #F0F9F5;
  border-radius: 14px;
  padding: 18px 22px;
}

.itp-burden-rate-body {
  flex: 1 1 auto;
  min-width: 0;
}

.itp-burden-rate-status {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #2CB58E;
  margin-bottom: 6px;
}

.itp-burden-rate-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 14px;
}

.itp-burden-rate-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background-color: #d8e6df;
}

.itp-burden-rate-bar-1 {
  width: 80%;
  margin-bottom: 6px;
}

.itp-burden-rate-bar-2 {
  width: 55%;
}

.itp-burden-rate-donut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 8px 14px 8px 10px;
  box-shadow: 0 4px 12px rgba(15, 31, 26, 0.08);
  flex: 0 0 auto;
}

.itp-burden-rate-pct {
  font-size: 1.125rem;
  font-weight: 700;
  color: #2CB58E;
  margin-left: 8px;
}

.itp-burden-export {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05);
  margin-bottom: 70px;
  transition: margin-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.itp-burden-feature-card:hover .itp-burden-export {
  margin-bottom: 0;
}

.itp-burden-export-head {
  background-color: #EEF2FF;
  padding: 11px 15px;
}

.itp-burden-export-head strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
}

.itp-burden-export-list {
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.itp-burden-export-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #ebefe9;
  border-radius: 10px;
  background-color: #ffffff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.itp-burden-export-row.is-muted {
  opacity: 0.45;
}

.itp-burden-export-row:hover {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  opacity: 1;
}

.itp-burden-export-row:hover .itp-burden-export-name {
  color: #ffffff;
}

.itp-burden-export-row svg path {
  transition: fill 0.3s ease;
}

.itp-burden-export-row:hover svg path {
  fill: #ffffff;
}


.itp-burden-export-name {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  transition: color 0.3s ease;
}

/* ============================================================
   Career Services hero — floating employer + cohort cards
============================================================ */
.ics-employer-card {
  background-color: #ffffff;
  border: 1px solid #F6F6F6;
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: 0 16px 36px rgba(15, 31, 26, 0.08), 0 4px 10px rgba(15, 31, 26, 0.04);
  width: 422px;
  max-width: 100%;
}

.ics-employer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.ics-employer-col {
  min-width: 0;
}

.ics-employer-label {
  display: block;
  font-size: 12px;
  color: var(--brand-light-gray);
  margin-bottom: 10px;
  line-height: 16px;
  font-weight: 500;
}

.ics-employer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ics-employer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
}

.ics-employer-logo img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
}

.ics-employer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ics-employer-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
  line-height: 18px;
}

.ics-employer-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background-color: #7F56D9;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
}

.ics-employer-toggle {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 999px;
}

.ics-employer-toggle::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
}

.ics-employer-cohorts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.ics-employer-cohort {
  display: inline-flex;
  align-items: center;
  background-color: #F3F4F6;
  color: #1B1F2C;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 16px;
}

.ics-students-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 16px 36px rgba(15, 31, 26, 0.08), 0 4px 10px rgba(15, 31, 26, 0.04);
  width: 320px;
  max-width: 100%;
}

.ics-students-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 24px;
}

.ics-students-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ics-student-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ics-student-avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f3f4f6;
  flex: 0 0 auto;
}

.ics-student-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ics-student-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ics-student-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.ics-student-email {
  font-size: 12px;
  color: var(--brand-light-gray);
  line-height: 16px;
  font-weight: 400;
}


/* ============================================================
   Career Services — "Student readiness tracking" left column
============================================================ */
.ics-fp-pill-offered {
  display: inline-flex;
  align-self: flex-start;
  background-color: #E6F7F1;
  color: #2CB58E;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 999px;
  line-height: 1;
  transition: background-color 0.45s ease, color 0.45s ease;
}

/* pill text swaps from "Job Offered" to "In Progress" on card hover */
.ics-fp-pill-text-hover {
  display: none;
}

.ics-readiness-feature-card:hover .ics-fp-pill-text-default {
  display: none;
}

.ics-readiness-feature-card:hover .ics-fp-pill-text-hover {
  display: inline;
}

.ics-readiness-feature-card:hover .ics-fp-pill-offered {
  background-color: #E7F8FB;
  color: #1DC5DE;
}

.ec-fp-pill-job-offered {
  background-color: var(--brand-white);
  color: #1DC5DE;
}

.ics-readiness-card {
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  margin: 107px 0px 80px 0px;
  transition: margin 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keep the LEFT column's total height fixed (so the right-hand copy never moves):
   on hover the gap BETWEEN the profile and the table shrinks, and that freed
   space is pushed above the profile image and below the table instead.
   Spacing sums stay equal — default 0 + 107 + 80 = 187; hover 40 + 27 + 120 = 187. */
.ics-readiness-feature-card .iup-fp-head {
  margin-top: 0;
  transition: margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-readiness-feature-card:hover .iup-fp-head {
  margin-top: 40px;
}

.ics-readiness-feature-card:hover .ics-readiness-card {
  margin: 27px 0px 120px 0px;
}

.ics-readiness-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: 30px;
}

.ics-readiness-row {
  margin-bottom: 14px;
}

.ics-readiness-row:last-child {
  margin-bottom: 0;
}

.ics-readiness-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ics-readiness-label {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--brand-ink);
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.ics-readiness-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-light-gray);
  --num: 0;
  counter-reset: num var(--num);
  transition: --num 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.45s ease;
}

.ics-readiness-value::after {
  content: counter(num) "%";
}

.ics-readiness-feature-card:hover .ics-readiness-value {
  --num: var(--to);
}

.ics-readiness-feature-card:hover .ics-readiness-value-green {
  color: #2CB58E;
}

.ics-readiness-feature-card:hover .ics-readiness-value-amber {
  color: #E8930C;
}

.ics-readiness-feature-card:hover .ics-readiness-value-gray {
  color: #6B7280;
}

.ics-readiness-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background-color: #f1f3f1;
  overflow: hidden;
}

.ics-readiness-fill {
  display: block;
  height: 100%;
  width: var(--from);
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.45s ease;
}

.ics-readiness-feature-card:hover .ics-readiness-fill {
  width: var(--to);
}

.ics-readiness-fill-green {
  background-color: #B6E0CD;
}

.ics-readiness-fill-amber {
  background-color: #F5C97A;
}

.ics-readiness-fill-gray {
  background-color: #cfd4da;
}

.ics-readiness-feature-card:hover .ics-readiness-fill-green {
  background-color: #46B481;
}

.ics-readiness-feature-card:hover .ics-readiness-fill-amber {
  background-color: #F5A623;
}

.ics-readiness-feature-card:hover .ics-readiness-fill-gray {
  background-color: #6B7280;
}

/* ============================================================
   Career Services — "Placement and opportunity management" left
============================================================ */
.ics-fp-match-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.ics-fp-pill-match {
  display: inline-flex;
  align-items: center;
  background-color: #F3EFFA;
  color: #976CD2;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 34px;
  line-height: 1;
}

.ics-active-opps-card {
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  margin: 113px 0 23px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  transition: margin 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On hover the card slides up but keeps some breathing room above it, and the
   space removed here is taken back off the jobs table's bottom margin instead.
   The left column's total height stays constant so the right copy never moves:
   default 113 (top) + 60 (table bottom) = 173;
   hover  50 (top) + 39 (table bottom) + 84 (revealed rows) = 173. */
.iup-racheal-feature-card:hover .ics-active-opps-card {
  margin: 50px 0 23px;
}

.ics-placement-feature-card .iup-fp-head {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-placement-feature-card:hover .iup-fp-head {
  transform: translateY(14px);
}

.ics-active-opps-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
}

.ics-active-opps-sub {
  font-size: 12px;
  color: var(--brand-light-gray);
  margin-top: 6px;
}

.ics-active-opps-value {
  font-size: 24px;
  font-weight: 700;
  color: #46B481;
  margin-top: 5px;
  --num: var(--from);
  counter-reset: num var(--num);
  transition: --num 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-active-opps-value::after {
  content: counter(num);
}

.iup-racheal-feature-card:hover .ics-active-opps-value {
  --num: var(--to);
}

.ics-jobs-table {
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  padding: 18px 22px;
  margin-bottom: 60px;
  transition: margin-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the space added above Active Opportunities on hover is taken back from here,
   keeping the left column's total height constant */
.iup-racheal-feature-card:hover .ics-jobs-table {
  margin-bottom: 39px;
}

.ics-jobs-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.ics-jobs-col {
  font-size: 12px;
  color: var(--brand-light-gray);
  min-width: 0;
}

.ics-jobs-col-strong {
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 18px;
  color: var(--brand-ink);
}

/* extra rows (2 skeleton + 1 record) reveal on hover — the grid row animates
   from 0fr to its real height so they slide in and push nothing off-balance */
.ics-jobs-extra {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.iup-racheal-feature-card:hover .ics-jobs-extra {
  grid-template-rows: 1fr;
}

.ics-jobs-extra-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}

.iup-racheal-feature-card:hover .ics-jobs-extra-inner {
  opacity: 1;
}

.ics-jobs-skeleton {
  display: block;
  width: 78%;
  height: 9px;
  border-radius: 999px;
  background-color: #eef0ee;
}

/* ============================================================
   Career Services — Employer relationship management (left col)
============================================================ */
.ics-erm-invite-btn {
  background-color: var(--brand-ink);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 8px 37px;
  font-size: var(--font-sm);
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 31, 26, 0.12);
}

.ics-erm-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 18px 22px;
  margin-top: 64px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Employer relationship: hover reveals an "Invite Employer" form ----
   The button + table stay in normal flow, so the column height equals the
   default content and the right-hand copy never resizes or moves. On hover the
   table slides DOWN with a transform (no layout change) to make room, and the
   form fades in, absolutely positioned in the gap. The table overflows the card
   bottom (clipped) instead of growing the card. */
.ics-erm-col {
  position: relative;
}

.ics-erm-feature-card {
  overflow: hidden;
}

.ics-erm-invite-form {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-erm-feature-card:hover .ics-erm-invite-form {
  opacity: 1;
  transform: translateY(0);
}

.ics-erm-feature-card:hover .ics-erm-card {
  transform: translateY(196px);
}

.ics-erm-form-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.ics-erm-form-title {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--brand-ink);
}

.ics-erm-form-label {
  font-size: 12px;
  color: var(--brand-ink);
  margin-top: 14px;
}

.ics-erm-form-input {
  display: block;
  font-size: 12px;
  color: var(--brand-light-gray);
  border: 1px solid #ebefe9;
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 6px;
}

.ics-erm-form-hint {
  font-size: 11px;
  line-height: 16px;
  color: var(--brand-light-gray);
  margin: 10px 0 0;
}

.ics-erm-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.ics-erm-form-btn {
  flex: 1;
  text-align: center;
  font-size: var(--font-sm);
  font-weight: 500;
  padding: 9px 0;
  border-radius: 8px;
  cursor: pointer;
}

.ics-erm-form-btn-cancel {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  color: var(--brand-ink);
}

.ics-erm-form-btn-submit {
  background-color: var(--brand-ink);
  color: #ffffff;
}

.ics-erm-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-bottom: 12px;
}

.ics-erm-head-col {
  font-size: 12px;
  color: var(--brand-light-gray);
}

.ics-erm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #f1f3f1;
}

.ics-erm-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ics-erm-emp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ics-erm-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background-color: #7F56D9;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
}

.ics-employer-toggle {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 999px;
}

.ics-employer-toggle::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
}

.ics-erm-status.is-active {
  background-color: #6F5BFF;
  color: #ffffff;
}

.ics-erm-status.is-inactive {
  background-color: #e5e7eb;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  flex-direction: row-reverse;
  padding: 2px 10px 2px 4px;
}

.ics-erm-toggle {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 12px;
  border-radius: 999px;
}

.ics-erm-status.is-inactive .ics-erm-toggle {
  color: #e5e7eb;
}

.ics-erm-toggle::after {
  content: '';
  position: absolute;
  top: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: left 0.2s ease;
}

.ics-erm-status.is-active .ics-erm-toggle::after {
  right: 1px;
}

.ics-erm-status.is-inactive .ics-erm-toggle::after {
  left: 1px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 31, 26, 0.12);
}

/* ============================================================
   Career Services — Outcome reporting (left col)
============================================================ */
.ics-or-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 46px 0 120px;
}

.ics-or-stat {
  flex: 1 1 0;
  background-color: #46B481;
  border-radius: 9px;
  padding: 8px 10px 10px;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.10);
}

.ics-or-stat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ics-or-stat-label {
  font-size: 12px;
  font-weight: 600;
}

.ics-or-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: #ffffff;
  flex: 0 0 auto;
}

.ics-or-stat-value {
  font-size: 17px;
  font-weight: 700;
}

.ics-or-breakdown {
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  margin-bottom: 64px;
}

.ecs-breakdown {
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.10), 0 4px 12px rgba(15, 31, 26, 0.05);
  max-width: 400px;
}

.ics-or-breakdown-head {
  background-color: #EEF2FF;
  padding: 12px 15px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
}

.ics-or-breakdown-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ics-or-breakdown-row {
  display: flex;
  flex-direction: column;
}

.ics-or-breakdown-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ics-or-breakdown-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-light-gray);
}

.ics-or-breakdown-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-light-gray);
}

.ics-or-breakdown-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background-color: #f1f3f1;
  overflow: hidden;
}

.ics-or-breakdown-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-or-breakdown-fill-green {
  background-color: #B6E0CD;
}

.ics-or-breakdown-fill-gray {
  background-color: #cfd4da;
}

.ics-or-breakdown-fill-dark-green {
  background-color: #46B481;
}

.ics-or-breakdown-fill-orange {
  background-color: #FA9B2E;
}

.ics-or-breakdown-fill-dark-gray {
  background-color: var(--brand-light-gray);
}

/* ---- Outcome reporting card: hover interaction (scoped to this card) ----
   Redistribute the middle gap to the top of the stats block and the bottom of
   the breakdown block. Sums stay equal so the left column height is unchanged
   and the right copy never resizes/moves:
   default 46 + 120 + 64 = 230; hover 94 + 24 + 112 = 230. */
.ics-or-stats {
  transition: margin 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-or-feature-card:hover .ics-or-stats {
  margin: 94px 0 24px;
}

.ics-or-feature-card .ics-or-breakdown {
  margin-bottom: 0;
}

.ics-or-breakdown-wrap {
  position: relative;
  margin-bottom: 64px;
  transition: margin-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-or-feature-card:hover .ics-or-breakdown-wrap {
  margin-bottom: 112px;
}

/* Export button: anchored just below the breakdown card, absolutely positioned
   so it never affects layout (the right copy stays put). Fades in on hover. */
.ics-or-export-btn {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 16px;
  background-color: var(--brand-ink);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 9px 26px;
  font-size: var(--font-sm);
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 31, 26, 0.12);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ics-or-feature-card:hover .ics-or-export-btn {
  opacity: 1;
  transform: translateY(0);
}

.ics-or-feature-card .ics-or-breakdown-fill {
  width: var(--from);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.45s ease;
}

.ics-or-feature-card:hover .ics-or-breakdown-fill {
  width: var(--to);
  background-color: #46B481;
}

.ics-or-feature-card .ics-or-breakdown-value {
  --num: 0;
  counter-reset: num var(--num);
  transition: --num 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.45s ease;
}

.ics-or-feature-card .ics-or-breakdown-value::after {
  content: counter(num) "%";
}

.ics-or-feature-card:hover .ics-or-breakdown-value {
  --num: var(--to);
  color: #2CB58E;
}

/* ============================================================
   Outcomes Overview — hero layout & funding milestones
============================================================ */
.oo-hero {
  position: relative;
  background-color: var(--brand-white);
}

.oo-hero-copy {
  text-align: left;
}

.oo-hero-copy .iup-collage-subtitle {
  margin-left: 0;
  margin-right: 0;
  padding-right: 30px;
  max-width: 650px;
  font-size: 1.125rem;
}

.oo-hero-copy .iup-heading {
  text-align: left;
  max-width: 676px;
}

.oo-hero-visual-wrap {
  display: flex;
  justify-content: flex-end;
}

.oo-hero-visual {
  position: relative;
  width: 100%;
  max-width: 616px;
  min-height: 540px;
  background-color: #F0F9F5;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.06);
}

.oo-hero-visual-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 98px 73px;
}

.oo-hero-visual-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}


/* ============================================================
   Graduate Employability hero (self-contained)
============================================================ */
.ge-hero {
  position: relative;
  background-color: #ffffff;
  overflow-x: clip;
}

.ge-hero-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  align-items: stretch;
  margin-bottom: 50px;
}

.ge-hero-copy {
  text-align: left;
  padding: 74px 48px 64px;
  padding-left: max(16px, calc((100vw - 960px) / 3 + 12px));
}

.ge-hero-heading {
  margin: 0 0 30px;
  max-width: 700px;
}

.ge-hero-subtitle {
  font-size: 1.125rem;
  line-height: 25px;
  color: var(--brand-ink);
  font-weight: 400;
  max-width: 630px;
  margin-bottom: 70px;
}


.ge-hero-visual-wrap {
  display: block;
  height: 100%;
}

.ge-hero-visual {
  position: relative;
  width: 100%;
  min-height: 910px;
  background-color: #F0F9F5;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.06);
}

.ge-hero-visual-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 80px 40px 0 80px;
}

.ge-placement-bg-block {
  padding: 70px 40px 0 113px;
}

.ge-hero-visual-content .ge-readiness {
  max-width: 460px;
}

.ge-hero-visual-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 80%;
  z-index: 3;
  pointer-events: none;
}

.ge-placement-bg-img {
  background-size: 100% 60%;
}

.ge-outcomes-bg-img {
  background-size: 100% 90%;
}

.oo-funding {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 31, 26, 0.08);
  margin-top: 47px;
}

.oo-funding-head {
  background-color: #EEF2FF;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
}

.oo-funding-body {
  padding: 18px 22px 16px;
  display: flex;
  flex-direction: column;
}

.oo-funding-value {
  font-size: 35px;
  font-weight: 700;
  color: #2CB58E;
  line-height: 1.1;
}

.oo-funding-sub {
  font-size: 12px;
  color: var(--brand-light-gray);
  margin-bottom: 63px;
}

.oo-funding-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.oo-funding-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
}

.oo-funding-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background-color: #f1f3f1;
  overflow: hidden;
}

.oo-funding-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-color: #2CB58E;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-funding-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
}

.oo-funding-target {
  font-size: 11px;
  color: var(--brand-light-gray);
}

.oo-funding-delta {
  font-size: 11px;
  font-weight: 600;
  color: #2CB58E;
}

/* ============================================================
   Outcome Intelligence — tabbed section
============================================================ */
.oo-intel {
  padding: 110px 0;
}

.oo-intel-tabs-wrap {
  position: sticky;
  top: 64px;
  z-index: 5;
  background-color: #ffffff;
  margin: 36px 0 32px;
  padding-top: 8px;
}

.oo-intel-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(12px, 2vw, 32px);
  justify-content: center;
  border-bottom: 1px solid #ebefe9;
  overflow-x: auto;
  scrollbar-width: none;
}

.oo-intel-tabs::-webkit-scrollbar {
  display: none;
}

.oo-intel-panels {
  display: flex;
  flex-direction: column;
  gap: 74px;
}

.oo-intel-panel {
  scroll-margin-top: 150px;
}

.oo-dimensions {
  padding: 94px 0;
}

/* ============================================================
   Per-dimension feature cards (alternating text / visual)
============================================================ */
.oo-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 60px 0;
}

.oo-feature-row.is-reversed .oo-feature-copy {
  order: 2;
}

.oo-feature-row.is-reversed .oo-feature-visual {
  order: 1;
}

.oo-feature-title {
  margin: 0px 0 20px;
  max-width: 550px;
}

.oo-feature-desc {
  max-width: 510px;
  margin-bottom: 60px;
}

.oo-feature-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.oo-feat-card {
  width: 100%;
  max-width: 460px;
  background-color: #ffffff;
  border: 1px solid #F0F9F5;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.10), 0 4px 12px rgba(15, 31, 26, 0.05);
}

.oo-feat-employability {
  max-width: 100%;
  padding: 43px;
}

.oo-feat-placement {
  max-width: 100%;
  padding: 80px 43px;
}

.oo-feat-employer {
  max-width: 100%;
  padding: 48px 46px 63px 46px;
}

.oo-feat-accreditation {
  max-width: 100%;
  padding: 78px 42px 97px;
  transition: padding-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* the export table grows ~44px on hover; the card's bottom padding shrinks by the
   same amount so the card height stays constant */
.oo-feature-row:hover .oo-feat-accreditation {
  padding-bottom: 52px;
}

.oo-feat-skills-dash {
  max-width: 100%;
  padding: 68px 27px 23px 27px;
}

.oo-feat-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.oo-feat-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-right: 10px;
}

.oo-feat-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f1f3f1;
}

.oo-feat-avatar-badge {
  position: absolute;
  right: -15px;
  bottom: -15px;
  display: inline-flex;
}

.oo-feat-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.oo-feat-profile-name {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--brand-ink);
}

.oo-feat-profile-role {
  font-size: 12px;
  color: var(--brand-ink);
  line-height: 16px;
}

.oo-feat-pill-match {
  align-self: flex-start;
  background-color: #F3EFFA;
  color: #976CD2;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  margin-top: 2px;
}

.oo-feat-readiness {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.oo-feat-readiness-pct {
  font-size: 26px;
  font-weight: 700;
  color: #c7ccd3;
  display: inline-block;
  min-width: 58px;
  --num: 2;
  counter-reset: num var(--num);
  transition: color 0.45s ease, --num 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-feat-readiness-pct::after {
  content: counter(num) "%";
}

.oo-feature-row:hover .oo-feat-readiness-pct {
  --num: 91;
  color: #2CB58E;
}

.oo-feat-readiness-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
}

.oo-feat-skeleton {
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  padding: 20px;
  margin-bottom: 16px;
  min-height: 96px;
}

.oo-feat-skeleton-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 63px;
  border-radius: 50%;
  background-color: #eceef0;
  color: #b6bcc4;
  margin-bottom: 14px;
  transition: background-color 0.45s ease, color 0.45s ease;
}

.oo-feature-row:hover .oo-feat-skeleton-avatar {
  background-color: #46B481;
  color: #ffffff;
}

.oo-feat-skeleton-line {
  display: block;
  height: 17px;
  border-radius: 59px;
  background-color: #F0F0F0;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.45s ease;
}

.oo-feat-skeleton-line-1 {
  width: 40%;
  margin-bottom: 8px;
}

.oo-feat-skeleton-line-2 {
  width: 25%;
}

.oo-feature-row:hover .oo-feat-skeleton-line-1 {
  width: 70%;
  background-color: #46B481;
}

.oo-feature-row:hover .oo-feat-skeleton-line-2 {
  width: 50%;
  background-color: #B6E0CD;
}

.oo-feat-skills {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  padding: 18px;
}

.oo-feat-skills-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-ink);
  margin-bottom: 10px;
}

.oo-feat-skills-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oo-feat-chip {
  background-color: #F3F4F6;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
}

.oo-feat-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

/* ---- Placement card hover: the two stats split apart and bars fill the gap,
   while the card height stays exactly the same. The bars block (+64) is offset
   by shrinking the card's big top + bottom padding (80→48 each, -32 -32):
   -32 - 32 + 64 = 0. So the top block moves up, the bottom block moves down,
   and the bars appear centred between them. ---- */
.oo-feat-placement {
  transition: padding 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-feature-row:hover .oo-feat-placement {
  padding-top: 48px;
  padding-bottom: 48px;
}

.oo-feature-row:hover .oo-feat-dash-stat-primary {
  background-color: #EAF7F0;
}

.oo-feat-dash-reveal {
  height: 0;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-feature-row:hover .oo-feat-dash-reveal {
  height: 64px;
}

.oo-feat-dash-reveal-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 14px;
  transition: opacity 0.4s ease 0.1s;
}

.oo-feature-row:hover .oo-feat-dash-reveal-inner {
  opacity: 1;
}

.oo-feat-dash-bar {
  display: block;
  height: 18px;
  border-radius: 59px;
  background-color: #ECECEC;
}

.oo-feat-dash-bar-1 {
  width: 78%;
}

.oo-feat-dash-bar-2 {
  width: 55%;
}

.oo-feat-dash-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
}

.oo-feat-dash-dots {
  display: inline-flex;
  gap: 5px;
}

.oo-feat-dash-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #d1d5db;
}

.oo-feat-dash-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  gap: 16px;
  border-radius: 14px;
  padding: 23px 34px 23px 18px;
  margin-bottom: 30px;
  transition: background-color 0.45s ease;
}

.oo-feat-dash-stat:last-child {
  margin-bottom: 0;
}

.oo-feat-dash-stat-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 9px;
  color: var(--brand-ink);
}

.oo-feat-dash-stat-value {
  font-size: 40px;
  font-weight: 700;
  color: #46B481;
  line-height: 48px;
}

.oo-feat-dash-stat-delta {
  font-size: 14px;
  color: var(--brand-light-gray);
  line-height: 16px;
}

.oo-feat-pie {
  display: block;
  width: 111px;
  height: 111px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.oo-feat-dash-avatars {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: flex-end;
}

.oo-feat-dash-avatars img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  background-color: #f1f3f1;
}

.oo-feat-dash-avatars img:not(:first-child) {
  margin-left: -13px;
}

.oo-feat-emp-head,
.oo-feat-emp-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.9fr;
  align-items: center;
  gap: 10px;
}

.oo-feat-emp-head {
  padding-bottom: 14px;
}

.oo-feat-emp-col {
  font-size: 14px;
  font-weight: 500;
}

.oo-feat-emp-row {
  padding: 14px 0;
}

.oo-feat-emp-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-ink);
  line-height: 21px;
  min-width: 0;
}

/* fixed-height column (= logo height) so the row never grows: on hover the
   "Active" badge reveals below the name and the name slides up, both centred
   within this 40px box */
.oo-feat-emp-name-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40px;
  flex: 1 1 auto;
  min-width: 0;
}

.oo-feat-emp-name-text {
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oo-feat-emp-badge {
  align-self: flex-start;
  background-color: #E6F7F1;
  color: #2CB58E;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  max-height: 0;
  padding: 0 8px;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease 0.05s,
    margin-top 0.4s ease, padding 0.4s ease;
}

.oo-feature-row:hover .oo-feat-emp-badge {
  max-height: 16px;
  padding: 2px 8px;
  margin-top: 3px;
  opacity: 1;
}

.oo-feat-emp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  padding: 6px;
  flex: 0 0 auto;
}

.oo-feat-emp-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.oo-feat-emp-num {
  font-size: 14px;
  line-height: 26px;
  font-weight: 500;
  color: var(--brand-ink);
}

.oo-feat-emp-row-skeleton .oo-feat-skeleton-line {
  width: 80%;
}

.oo-feat-emp-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  padding: 10px 30px;
  margin-top: 50px;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: var(--brand-ink);
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.oo-feat-emp-total-val {
  font-size: 28px;
  font-weight: 700;
  color: #c7ccd3;
  --num: 2;
  counter-reset: num var(--num);
  transition: color 0.45s ease, --num 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-feat-emp-total-val::after {
  content: counter(num) "%";
}

.oo-feature-row:hover .oo-feat-emp-total-val {
  --num: 88;
  color: #2CB58E;
}

.oo-acc-rate {
  display: flex;
  align-items: center;
  border: 1px solid #f1f3f1;
  gap: 16px;
  border-radius: 14px;
  padding: 14px 21px 23px 18px;
  margin-bottom: 30px;
}

.oo-acc-rate-body {
  flex: 1 1 auto;
  min-width: 0;
}

.oo-acc-rate-status {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #2CB58E;
}

.oo-acc-rate-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 16px;
  color: var(--brand-ink);
  margin-bottom: 9px;
}

.oo-acc-rate-bar {
  display: block;
  height: 6px;
  border-radius: 45px;
  background-color: #d8e6df;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-acc-rate-bar-1 {
  width: 34%;
  margin-bottom: 6px;
}

.oo-acc-rate-bar-2 {
  width: 22%;
}

.oo-feature-row:hover .oo-acc-rate-bar-1 {
  width: 96%;
}

.oo-feature-row:hover .oo-acc-rate-bar-2 {
  width: 72%;
}

.oo-acc-rate-donut {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.oo-acc-rate-pct {
  font-size: 1.125rem;
  font-weight: 700;
  color: #2CB58E;
  margin-left: 8px;
}

.oo-acc-export {
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.oo-acc-export-head {
  background-color: #EEF2FF;
  padding: 11px 15px;
}

.oo-acc-export-head strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
}

.oo-acc-export-list {
  list-style: none;
  margin: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: gap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-acc-export-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border: 1px solid #ebefe9;
  border-radius: 10px;
  background-color: #ffffff;
  transition: opacity 0.45s ease,
    padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-acc-export-row.is-muted {
  opacity: 0.45;
}

.oo-feature-row:hover .oo-acc-export-list {
  gap: 12px;
}

.oo-feature-row:hover .oo-acc-export-row {
  padding: 13px 14px;
}

.oo-feature-row:hover .oo-acc-export-row.is-muted {
  opacity: 1;
}

.oo-acc-export-icon {
  width: 34px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.oo-acc-export-name {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  min-width: 0;
}

.oo-skills-panel {
  border-radius: 12px;
  padding: 22px 18px 36px 18px;
  margin-bottom: 28px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.oo-skills-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 69px;
}

.oo-skills-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--brand-ink);
}

.oo-skills-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.oo-skills-swatch-student {
  background-color: #46B481;
}

.oo-skills-swatch-demand {
  background-color: #F4D9B0;
}

.oo-skills-row {
  margin-bottom: 16px;
}

.oo-skills-row:last-child {
  margin-bottom: 0;
}

.oo-skills-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.oo-skills-row-label {
  display: block;
  font-size: 10px;
  color: var(--brand-light-gray);
}

.oo-skills-row-gap {
  font-size: 10px;
  font-weight: 400;
  color: red;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.oo-skills-row-gap.is-aligned {
  color: #2CB58E;
}

.oo-feature-row:hover .oo-skills-row-gap {
  opacity: 1;
}

.oo-skills-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background-color: #f1f3f1;
  overflow: hidden;
}

.oo-skills-bar-demand,
.oo-skills-bar-student {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
}

.oo-skills-bar-demand {
  background-color: #F4D9B0;
}

.oo-skills-bar-student {
  background-color: #46B481;
  width: 0;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-feature-row:hover .oo-skills-bar-student {
  width: var(--w);
}

.oo-skills-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.oo-skills-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.oo-skills-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
}

.oo-skills-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: #c7ccd3;
  --num: 0;
  counter-reset: num var(--num);
  transition: color 0.45s ease, --num 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-skills-stat-val::after {
  content: counter(num) "%";
}

.oo-feature-row:hover .oo-skills-stat-val {
  --num: var(--to);
}

.oo-feature-row:hover .oo-skills-stat-val-readiness {
  color: #2CB58E;
}

.oo-feature-row:hover .oo-skills-stat-val-gap {
  color: var(--brand-ink);
}

.oo-intel-tab {
  background: none;
  border: none;
  padding: 0 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-light-gray);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.oo-intel-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background-color: #2CB58E;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.oo-intel-tab:hover {
  color: var(--brand-ink);
}

.oo-intel-tab.is-active {
  color: var(--brand-ink);
  font-weight: 600;
}

.oo-intel-tab.is-active::after {
  transform: scaleX(1);
}

.oo-intel-scroll {
  position: relative;
}

.oo-intel-sticky {
  position: sticky;
  top: 90px;
  height: auto;
  display: flex;
  flex-direction: column;
}

.oo-intel-sticky .oo-intel-tabs-wrap {
  position: static;
  top: auto;
  margin: 0 0 22px;
  flex: 0 0 auto;
}

.oo-intel-viewport {
  overflow: hidden;
}

.oo-intel-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-intel-panel {
  flex: 0 0 100%;
  width: 100%;
}

.oo-intel-panel-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  align-items: stretch;
}

.oo-intel-copy {
  background-color: rgba(247, 248, 249, 0.5);
  border-radius: 12px;
  padding: 36px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.oo-intel-title {
  font-size: 22px;
  color: var(--brand-ink);
  max-width: 400px;
}

.oo-intel-desc {
  font-size: 1rem;
  color: var(--brand-light-gray);
  margin-bottom: 28px;
  max-width: 400px;
  font-weight: 400;
  padding-right: 10px;
}

.oo-intel-copy .btn {
  align-self: flex-start;
}

.oo-intel-visual {
  background-color: rgba(247, 248, 249, 0.5);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 26px 32px;
  justify-content: center;
}

.oo-intel-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================================
   Graduate Employability — cohort intelligence section
============================================================ */
.ge-cohort {
  padding: 120px 0;
  background-color: rgba(247, 248, 249, 0.5);
}

.ge-cohort-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.ge-cohort-desc {
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-light-gray);
  max-width: 510px;
  margin-bottom: 60px;
}

.ge-cohort-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ge-cohort-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-ink);
}

.ge-cohort-list-item svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.ge-cohort-visual {
  display: flex;
  justify-content: flex-end;
}

.ge-cohort-card {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.08);
  padding: 24px;
}

.ge-cohort-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}


.ge-cohort-card-headmeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ge-cohort-card-title {
  font-size: 1.063rem;
  font-weight: 600;
  color: var(--brand-ink);
  line-height: 28px;
}

.ge-cohort-card-sub {
  font-size: 0.875rem;
  color: var(--brand-light-gray);
  line-height: 20px;
}

.ge-cohort-readiness {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  background-color: #F3F4F6;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  transition: background-color 0.45s ease;
}

/* on hover the readiness pill turns green and the score counts up in white */
.ge-cohort-grid:hover .ge-cohort-readiness {
  background-color: #46B481;
}

.ge-cohort-readiness-pct {
  font-size: 26px;
  font-weight: 700;
  color: #c7ccd3;
  display: inline-block;
  min-width: 56px;
  --num: 2;
  counter-reset: num var(--num);
  transition: color 0.45s ease, --num 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ge-cohort-readiness-pct::after {
  content: counter(num) "%";
}

.ge-cohort-grid:hover .ge-cohort-readiness-pct {
  --num: 74;
  color: #ffffff;
}

.ge-cohort-readiness-label {
  font-size: 15px;
  font-weight: 600;
  color: #9ca3af;
  transition: color 0.45s ease;
}

.ge-cohort-grid:hover .ge-cohort-readiness-label {
  color: #ffffff;
}

.ge-cohort-panel {
  border-radius: 14px;
  padding: 18px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.ge-cohort-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.ge-cohort-metric {
  border: 1px solid #ebefe9;
  border-radius: 10px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  transition: padding 0.4s ease;
}

.ge-cohort-grid:hover .ge-cohort-metric {
  padding-top: 6px;
  padding-bottom: 6px;
}

.ge-cohort-metric-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--brand-light-gray);
  font-weight: 500;
}

.ge-cohort-metric-value {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--brand-light-gray);
}

.ge-cohort-metric-note {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.ge-cohort-metric-note.is-negative {
  color: #E5484D;
}

.ge-cohort-metric-note.is-positive {
  color: #2CB58E;
}

.ge-cohort-grid:hover .ge-cohort-metric-note {
  max-height: 18px;
  margin-top: 6px;
  opacity: 1;
}

.ge-cohort-completion {
  padding: 4px 2px 0;
}

.ge-cohort-completion-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
  margin-bottom: 18px;
}

.ge-cohort-completion-val {
  font-size: 26px;
  font-weight: 700;
  color: #46B481;
}

.ge-cohort-completion-note {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  margin-left: 4px;
}

/* ============================================================
   Graduate Employability — "Understanding and measuring" accordion
============================================================ */
.ge-emp {
  padding: 94px 0;
}

.ge-emp-subtitle {
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-light-gray);
  max-width: 900px;
  margin-bottom: 36px;
  font-weight: 400;
}

.ge-static-sub-title {
  max-width: 750px;
  margin: 0 auto 16px;
}

.ge-static-emp-title {
  max-width: 776px;
  margin: auto;
}

.ge-emp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.ge-emp-visual-wrap {
  display: flex;
  justify-content: center;
}

.ge-emp-visual-img {
  width: 100%;
  height: 400px;
  display: block;
}

.ge-employability-block-container {
  background: rgba(247, 248, 249, 0.5);
  padding: 47px;
  border-radius: 16px;
}

.ge-emp-accordion {
  display: flex;
  flex-direction: column;
}

.ge-emp-item {
  border-top: 1px solid #ebefe9;
}

.ge-emp-item:last-child {
  border-bottom: 1px solid #ebefe9;
}

.ge-emp-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.ge-emp-item-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  color: var(--brand-ink);
  letter-spacing: -0.45px;
}

.ge-emp-item-chev {
  display: inline-flex;
  color: #9ca3af;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ge-emp-item.is-open .ge-emp-item-chev {
  transform: rotate(180deg);
}

/* Smooth expand/collapse via grid-template-rows.
   minmax(0, …) forces the track minimum to 0 (otherwise grid defaults to
   min-content as the minimum, which leaves residual space when collapsed). */
.ge-emp-item-body {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ge-emp-item.is-open .ge-emp-item-body {
  grid-template-rows: minmax(0, 1fr);
}

.ge-emp-item-body-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 0 22px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ge-emp-item.is-open .ge-emp-item-body-inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s 0.1s ease, transform 0.4s 0.05s cubic-bezier(0.22, 1, 0.36, 1);
}

.ge-emp-item-desc {
  font-size: 15px;
  line-height: 24px;
  color: var(--brand-light-gray);
  margin: 0 0 14px;
  font-weight: 400;
  max-width: 500px;
}

.ge-emp-item-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ge-emp-item-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--brand-ink);
}

.ge-emp-item-bullets li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2CB58E;
}

.ge-emp-item-bullets strong {
  font-weight: 600;
  color: var(--brand-ink);
}

/* ============================================================
   Placement Rates hero (self-contained)
============================================================ */
.pr-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.pr-avatar {
  position: relative;
  width: 95px;
  height: 95px;
  flex: 0 0 auto;
}

.pr-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f1f3f1;
}

.pr-avatar-badge {
  position: absolute;
  right: -7px;
  bottom: -13px;
  display: inline-flex;
}

.pr-profile-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pr-profile-name {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
  line-height: 1.2;
}

.pr-profile-role {
  font-size: var(--fs-14);
  color: var(--brand-light-gray);
  margin-top: 2px;
}

.pr-rate-card {
  background-color: #46B481;
  border-radius: 18px;
  padding: 16px 26px 26px 26px;
  max-width: 327px;
}

.pr-rate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.pr-rate-head-meta {
  display: flex;
  flex-direction: column;
}

.pr-rate-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.pr-rate-delta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.pr-rate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--brand-white);
  flex: 0 0 auto;
}

.pr-rate-donut {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

.pr-rate-donut svg circle {
  transition: stroke 0.5s ease;
}

.pr-rate-card:hover .pr-rate-donut svg circle:first-of-type {
  stroke: #0F6B40;
}

.pr-rate-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
}

/* "Placed" tooltip — pops in on hover, absolutely positioned so it adds no
   layout/height to the card */
.pr-rate-tooltip {
  position: absolute;
  right: -55px;
  bottom: -3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(15, 31, 26, 0.18);
  padding: 8px 14px;
  opacity: 0;
  transform: translateX(-40px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pr-rate-card:hover .pr-rate-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.pr-rate-tooltip-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-light-gray);
}

.pr-rate-tooltip-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-green);
}

/* ============================================================
   Placement Rates — "The Static Data Trap" section
============================================================ */
.pr-trap {
  position: relative;
  padding: 80px 0 100px;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
}

.pr-trap .row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: start;
  margin: 0;
  --bs-gutter-x: 0;
}

.pr-trap .row::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  height: 1px;
  background-image: linear-gradient(to right, #cbd5e0 50%, transparent 50%);
  background-size: 15px 1px;
  background-repeat: repeat-x;
  z-index: 0;
  pointer-events: none;
}

.pr-trap-card {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 30px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  max-width: 100%;
  width: 100%;
}

.pr-trap-card-featured {
  margin-top: -32px;
  padding-top: 26px;
}

.pr-trap-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pr-trap-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #F0F9F5;
  flex: 0 0 auto;
}

.pr-trap-card-header .pr-trap-card-title {
  margin: 0;
}

.pr-trap-illus {
  display: flex;
  align-items: flex-end;
  border: 1px solid #EDEDED;
  margin-bottom: 18px;
  padding: 12px 31px 21px 14px;
  border-radius: 8px;
}

.pr-trap-illus-clock {
  position: absolute;
  right: -27px;
  bottom: -15px;
  display: inline-flex;
}

.pr-trap-illus-dash {
  flex: 1 1 auto;
  height: 1px;
  background-image: linear-gradient(to right, #cbd5e0 50%, transparent 50%);
  background-size: 15px 1px;
  background-repeat: repeat-x;
  margin-bottom: 20px;
}

.pr-trap-illus-avatars {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}

.pr-trap-illus-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  background-color: #E5E7EB;
  display: block;
}

.pr-trap-illus-avatar-2 {
  margin-left: -14px;
}

.pr-trap-connector {
  position: relative;
  width: 100%;
  height: 140px;
  margin: 0 auto -28px;
  pointer-events: none;
}

.pr-trap-connector svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pr-trap-card-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--brand-ink);
}

.pr-trap-row {
  margin-bottom: 14px;
}

.pr-trap-row:last-child {
  margin-bottom: 0;
}

.pr-trap-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.pr-trap-pill-orange {
  background-color: #FFCF90;
  color: var(--brand-ink);
}

.pr-trap-pill-gray {
  background-color: #E1E1E1;
  color: var(--brand-ink);
}

.pr-trap-row-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-ink);
  font-weight: 400;
  margin: 0;
}

/* ============================================================
   Placement Rates — "The Hiree365 Advantage" section
============================================================ */
.pr-advantage {
  padding: 80px 0;
  background-color: rgba(247, 248, 249, 0.5);
}

.pr-advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pr-advantage-card {
  background-color: #ffffff;
  border: 1px solid #ebefe9;
  border-radius: 14px;
  padding: 29px 24px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05);
}

.pr-stragtic-card {
  padding: 29px 24px;
}

.pr-advantage-card-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.pr-advantage-card-title {
  font-size: var(--font-desc-block);
  line-height: 25px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--brand-ink);
}

.pr-advantage-card-text {
  font-size: 13px;
  line-height: 18px;
  color: #4b5563;
  font-weight: 400;
  margin: 0;
}

/* ============================================================
   Hiree365 Advantage cards — pure HTML/CSS illustrations
   Each .pra-visual is a fixed-height bordered box that replaces the
   old <img>. Scoped per card by the .pra-<id> modifier.
============================================================ */
.pra-visual {
  height: 98px;
  margin-bottom: 16px;
  border: 1px solid #ededed;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.05);
}

.pra-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #2b3440;
}

/* ----- 1. Student-Level Tracking ----- */
.pra-track {
  gap: 8px;
}

.pra-track-av {
  position: relative;
  flex: 0 0 auto;
  width: 55px;
  height: 55px;
}

.pra-track-av img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.pra-track-check {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #46B481;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* bars top-aligned with the avatar, dashed line dropped to its base */
.pra-track-main {
  flex: 1 1 auto;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pra-track-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pra-track-bar {
  height: 9px;
  border-radius: 999px;
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pra-track-bar-green {
  max-width: 35px;
  background-color: #46B481;
}

.pra-track-bar-soft {
  max-width: 56px;
  background-color: #BFE3D3;
}

/* hover: both bars widen */
.pr-advantage-card:hover .pra-track-bar-green {
  max-width: 150px;
}

.pr-advantage-card:hover .pra-track-bar-soft {
  max-width: 108px;
}

.pra-track-dash {
  height: 0;
  border-top: 2px dashed #EBEBEB;
}

.pra-track-box {
  position: relative;
  flex: 0 0 auto;
  width: 67px;
  height: 77px;
  border-radius: 5px;
  background-color: #F0F0F0;
  overflow: hidden;
}

/* bars sit at the bottom by default, slide up on hover */
.pra-track-box-bars {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pr-advantage-card:hover .pra-track-box-bars {
  transform: translateY(-40px);
}

.pra-track-box-bar {
  flex: 0 0 auto;
  height: 7px;
  border-radius: 24px;
  background-color: #E1E1E1;
}

.pra-track-box-bar:first-child {
  width: 86%;
}

.pra-track-box-bar:last-child {
  width: 46%;
}

/* avatar + "Job Offered" badge pinned to the bottom, fade/slide in on hover */
.pra-track-offer {
  position: absolute;
  left: 10px;
  right: 0;
  bottom: 9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pr-advantage-card:hover .pra-track-offer {
  opacity: 1;
  transform: translateY(0);
}

.pra-track-offer-av {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  overflow: hidden;
}

.pra-track-offer-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pra-track-offer-tag {
  font-size: 7px;
  font-weight: 600;
  /* line-height: 1; */
  color: #46B481;
  white-space: nowrap;
  background: var(--brand-white);
  border-radius: 15px;
  padding: 2px 5px;
  margin-top: 5px;
}

/* ----- 2. Workflow Integration ----- */
.pra-flow {
  justify-content: space-between;
}

.pra-flow-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  /* max-width: 46%; */
}

.pra-flow-badge {
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #46B481;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pra-flow-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pra-flow-namebar {
  width: 56px;
  height: 9px;
  border-radius: 999px;
  background-color: #46B481;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pr-advantage-card:hover .pra-flow-namebar {
  width: 84px;
}

.pra-flow-name {
  font-size: 8px;
  font-weight: 400;
  line-height: 11px;
  color: var(--brand-ink);
}

.pra-flow-steps {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.pra-flow-stepwrap {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.pra-flow-step {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #dfe2e6;
  background-color: #ffffff;
  color: #aeb3ba;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.pra-flow-step-on {
  border-color: #7C5CFC;
  background-color: #7C5CFC;
}

/* hover: step 1 completes (turns green), step 2 becomes active (purple) */
.pr-advantage-card:hover .pra-flow-step-on {
  border-color: #46B481;
  background-color: #46B481;
}

/* step 2 eases in a touch slower; delay only on hover-in so hover-out reverts smoothly */
.pra-flow-step-2 {
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

.pr-advantage-card:hover .pra-flow-step-2 {
  border-color: #7C5CFC;
  background-color: #7C5CFC;
  color: #ffffff;
  transition-delay: 0.22s;
}

.pra-flow-line {
  flex: 0 0 auto;
  width: 14px;
  height: 1.5px;
  background-color: #e2e5e9;
}

.pra-flow-applied,
.pra-flow-screening {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 600;
  color: #7C5CFC;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}

/* "Applied" fades out, "Screening" fades in on hover; on hover-out both
   reverse smoothly (delay applied only to the hover-in direction) */
.pra-flow-screening {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.pr-advantage-card:hover .pra-flow-applied {
  opacity: 0;
}

.pr-advantage-card:hover .pra-flow-screening {
  opacity: 1;
  transition-delay: 0.28s;
}

/* ----- 3. Automated Analytics ----- */
.pra-analytics {
  justify-content: space-around;
}

.pra-an-list {
  flex: 0 0 auto;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.pra-an-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 400;
  color: var(--brand-ink);
  line-height: 11px;
}

.pra-an-bar {
  width: 54px;
  height: 10px;
  border-radius: 24px;
  background-color: #46B481;
  margin-top: 2px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* hover: the bar under Department widens */
.pr-advantage-card:hover .pra-an-bar {
  width: 74px;
}

.pra-an-orb {
  flex: 0 0 auto;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background-color: #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* spark icon: faint & blurred by default, crisp and dark on hover */
.pra-an-orb svg {
  opacity: 0.5;
  filter: blur(1.2px);
  transition: fill 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.pr-advantage-card:hover .pra-an-orb svg {
  fill: #2b3440;
  opacity: 1;
  filter: blur(0);
}

.pra-an-chart {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 56px;
}

.pra-an-col {
  width: 14px;
  height: var(--h-from);
  border-radius: 52px;
  background-color: #46B481;
  transition: height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* hover: bars re-shape — some grow, some shrink */
.pr-advantage-card:hover .pra-an-col {
  height: var(--h-to);
}

.pra-an-col-soft {
  background-color: #e4e6e9;
}

/* ----- 4. Velocity Metrics ----- */
.pra-vel-card {
  flex: 0 0 auto;
  width: 138px;
  border-radius: 12px;
  background-color: #46B481;
  padding: 8px 5px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pra-vel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pra-vel-label {
  font-size: 8px;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.95;
}

.pra-vel-dl {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pra-vel-num {
  font-size: 14px;
  font-weight: 700;
}

.pra-vel-sub {
  font-size: 8px;
  line-height: 11px;
  font-weight: 400;
}

.pra-vel-bars {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  gap: 8px;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover: bars glide up from the bottom to the vertical centre */
.pr-advantage-card:hover .pra-vel-bars {
  transform: translateY(-26px);
}

.pra-vel-bar {
  height: 9px;
  border-radius: 23px;
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pra-vel-bar-1 {
  max-width: 54px;
  background-color: #46B481;
}

.pra-vel-bar-2 {
  max-width: 68px;
  background-color: #DAE7E0;
}

/* hover: both bars widen */
.pr-advantage-card:hover .pra-vel-bar-1 {
  max-width: 150px;
}

.pr-advantage-card:hover .pra-vel-bar-2 {
  max-width: 108px;
}

/* ----- 5. Cohort Trends ----- */
.pra-cohort {
  justify-content: space-between;
}

.pra-co-list {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pra-co-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  color: var(--brand-ink);
}

.pra-co-ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the trend line + label live inside their own bordered panel */
.pra-co-panel {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
}

.pra-co-svg {
  position: absolute;
  top: 0px;
  left: 12px;
  right: 12px;
  width: 100%;
}

/* on hover the default (gray) part turns green; the extension then draws in */
.pra-co-line-base {
  stroke: #C9CDD3;
  transition: stroke 0.5s ease;
}

.pr-advantage-card:hover .pra-co-line-base {
  stroke: #46B481;
}

.pra-co-line-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}

.pr-advantage-card:hover .pra-co-line-draw {
  stroke-dashoffset: 0;
}

.pra-co-foot {
  position: absolute;
  left: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pra-co-badge {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #46B481;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pra-co-badge svg {
  width: 10px;
  height: 11px;
}

.pra-co-tag {
  font-size: 8px;
  font-weight: 500;
  color: #787878;
  white-space: nowrap;
  line-height: 10px;
}

/* ----- 6. Seamless Export ----- */
.pra-ex-rows {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pra-ex-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  line-height: 12px;
  font-weight: 500;
  color: var(--brand-ink);
  background-color: #f4f5f7;
  border-radius: 12px;
  padding: 4px 11px;
}

.pra-ex-row b {
  margin-left: auto;
  padding-left: 12px;
  font-weight: 600;
}

/* export doc icon sits next to the rows by default; on hover it slides to the
   end of the block and grows — both in a single transform so they animate
   together and smoothly */
.pra-ex-doc {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: right center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-advantage-card:hover .pra-ex-doc {
  transform: translateX(80px) scale(1.35);
}

/* ============================================================
   Strategic Engagement cards — pure HTML/CSS illustrations
   Each .se-visual is a fixed-height bordered box that replaces the
   old <img>. Scoped per card by the .se-visual-<id> modifier.
============================================================ */
.se-visual {
  height: 140px;
  margin-bottom: 18px;
  border: 1px solid #ededed;
  border-radius: 10px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
  gap: 14px;
}

/* ----- 1. Centralised Network: staggered (zig-zag) contact chips ----- */
.se-visual-network {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 9px;
  padding-top: 8px;
}

.se-net-row {
  display: flex;
  gap: 8px;
}

/* rows zig-zag; on hover the indents swap (top row -> right, bottom -> left) */
.se-net-row-a,
.se-net-row-b {
  transition: margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.se-net-row-a {
  margin-left: 0;
}

.se-net-row-b {
  margin-left: 24px;
}

.se-contact {
  flex: 0 0 auto;
  width: 133px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background-color: #ffffff;
  /* border: 1px solid #eef0ef; */
  border-radius: 8px;
  padding: 7px 9px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), gap 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.se-contact-av {
  flex: 0 0 auto;
  width: 35px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.se-contact-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.se-contact-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.se-contact-meta strong {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--brand-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.se-contact-meta strong {
  transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.se-contact-meta span {
  font-size: 8px;
  color: #8a938e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* the "Invite" button, hidden until hover (grows from 0 height so the card
   size never changes) */
.se-net-invite {
  align-self: flex-start;
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 24px;
  background-color: #16202b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  white-space: nowrap;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

.pr-advantage-card-centralised-network:hover .se-net-row-a {
  margin-left: 34px;
}

.pr-advantage-card-centralised-network:hover .se-net-row-b {
  margin-left: 0;
}

.pr-advantage-card-centralised-network:hover .se-contact {
  width: 118px;
  padding: 5px 7px;
  gap: 5px;
}

.pr-advantage-card-centralised-network:hover .se-contact-av {
  width: 27px;
  height: 27px;
}

.pr-advantage-card-centralised-network:hover .se-contact-meta strong {
  font-size: 8px;
}

.pr-advantage-card-centralised-network:hover .se-contact-meta span {
  font-size: 7px;
}

.pr-advantage-card-centralised-network:hover .se-net-invite {
  height: 25px;
  opacity: 1;
}

/* ----- 2. Privacy & Precision: cloud + controlled viewers panel ----- */
/* .se-visual-privacy {
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
} */

/* the cloud + company sits at the TOP-left of the card. It flexes/shrinks so
   the panel on the right always stays inside the card's padding. */
.se-priv-head {
  flex: 1 1 auto;
  min-width: 0;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.se-priv-cloud {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #F0F0F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.se-priv-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.se-priv-meta strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.se-priv-meta span {
  font-size: 12px;
  color: var(--brand-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.se-priv-panel {
  flex: 0 1 auto;
  min-width: 110px;
  align-self: stretch;
  width: 140px;
  background-color: #F2F2F2;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.se-priv-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.se-priv-av {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
}

.se-priv-av img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}

.se-priv-eye,
.se-priv-eye-off {
  display: inline-flex;
}

.se-priv-eye-off {
  display: none;
}

.se-priv-check {
  position: absolute;
  right: -10px;
  bottom: -10px;
  /* width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 50%; */
}

.se-priv-bars {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.se-priv-bar {
  height: 8px;
  width: 40%;
  border-radius: 999px;
  background-color: #46B481;
  transition: background-color 0.4s ease;
}

.se-priv-bar-short {
  width: 70%;
  background-color: #DAE7E0;
}

/* ----- Privacy & Precision hover: focus the restricted (2nd) viewer ----- */
/* The company head glides to the vertical centre of the card. */
.pr-advantage-card-privacy-precision:hover .se-priv-head {
  transform: translateY(36px);
}

/* The 2nd viewer's photo fades and its badge flips to a "hidden" eye. */
.pr-advantage-card-privacy-precision:hover .se-priv-row:nth-child(2) .se-priv-av img {
  opacity: 0.25;
}

.pr-advantage-card-privacy-precision:hover .se-priv-row:nth-child(2) .se-priv-eye {
  display: none;
}

.pr-advantage-card-privacy-precision:hover .se-priv-row:nth-child(2) .se-priv-eye-off {
  display: inline-flex;
}

/* The 2nd viewer's bars grey out to signal restricted visibility. */
.pr-advantage-card-privacy-precision:hover .se-priv-row:nth-child(2) .se-priv-bar {
  background-color: #E2E2E2;
}

/* ----- 3. Activity Monitoring: stat pills + overlapping avatars ----- */
.se-visual-activity {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}

.se-act-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.se-act-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.se-act-stat {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: #F4F4F4;
  border-radius: 12px;
  padding: 5px 10px;
}

/* Reveal-on-hover badge that slides in from the left of each stat pill. */
.se-act-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 36px;
  padding: 5px 12px;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.se-act-badge-blue {
  background-color: #D0E1FF;
  color: #3C6CBF;
}

.se-act-badge-green {
  background-color: #ECF7DF;
  color: #6EA630;
}

.pr-advantage-card-activity-monitoring:hover .se-act-badge {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger the second badge so the two reveal in sequence. */
.pr-advantage-card-activity-monitoring:hover .se-act-stat-row:nth-child(2) .se-act-badge {
  transition-delay: 0.08s;
}

.se-act-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--brand-ink);
}

.se-act-label {
  font-size: 8px;
  font-weight: 500;
  color: var(--brand-ink);
  white-space: nowrap;
  line-height: 12px;
}

.se-act-avatars {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

.se-act-av {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  /* border: 2px solid #ffffff; */
  margin-left: -8px;
}

.se-act-av:first-child {
  margin-left: 0;
}

.se-act-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- 4. Performance Analytics: bar chart + company ----- */
.se-visual-performance {
  justify-content: space-between;
  gap: 14px;
}

.se-perf-chart {
  position: relative;
  flex: 0 0 auto;
  width: 174px;
  height: 124px;
  background-color: #F2F2F2;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.se-perf-title {
  position: relative;
  z-index: 2;
  font-size: 9px;
  font-weight: 600;
  color: var(--brand-ink);
}

.se-perf-tabs {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: 5px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.se-perf-tab {
  font-size: 9px;
  line-height: 12px;
  font-weight: 400;
  color: var(--brand-ink);
  background-color: #ffffff;
  border-radius: 3px;
  padding: 3px;
  box-shadow: 0 1px 2px rgba(15, 31, 26, 0.08);
  white-space: nowrap;
}

/* Second tab stays hidden until the card is hovered, then slides in from the left. */
.se-perf-tab-hover {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.pr-advantage-card-performance-analytics:hover .se-perf-tab-hover {
  opacity: 1;
  transform: translateX(0);
}

.se-perf-bars {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 92px;
  max-width: 133px;
}

.se-perf-bar {
  flex: 1 1 0;
  min-width: 0;
  height: var(--bar-h);
  background-color: #E3E3E3;
  border-radius: 36px;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
}

.se-perf-bar.is-green {
  background-color: #46B481;
}

/* On hover each bar animates to its hover height and re-colours: only the
   hover-green bars stay green, the rest reset to grey. */
.pr-advantage-card-performance-analytics:hover .se-perf-bar {
  height: var(--bar-hover-h);
  background-color: #E3E3E3;
}

.pr-advantage-card-performance-analytics:hover .se-perf-bar.is-green-hover {
  background-color: #46B481;
}

.se-perf-company {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.se-perf-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #ececec;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.05);
}

.se-perf-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.se-perf-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.se-perf-meta strong {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--brand-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.se-perf-meta span {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--brand-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- 5. Drive Operations: bars + dashed stepper ----- */
.se-visual-drive {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.se-drive-bars {
  align-self: flex-start;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 4px;
}

.se-drive-topbar {
  height: 8px;
  width: 61px;
  border-radius: 23px;
  background-color: #46B481;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.se-drive-topbar-short {
  width: 38px;
  background-color: #DAE7E0;
}

/* On hover the stepper's width grows to 100%, and space-between slides the
   steps apart smoothly as the width expands. */
.pr-advantage-card-drive-operations:hover .se-drive-steps {
  width: 100%;
}

/* On hover both bars extend, the green one growing to fill the width. */
.pr-advantage-card-drive-operations:hover .se-drive-topbar {
  width: 150px;
}

.pr-advantage-card-drive-operations:hover .se-drive-topbar-short {
  width: 110px;
}

.se-drive-steps {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  width: 232px;
  max-width: 100%;
  padding-left: 0px;
  padding-right: 10px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* one continuous dashed line across the full width, sitting behind the dots */
.se-drive-steps::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed #F2F2F2;
  z-index: 0;
}

.se-drive-step {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.se-drive-dot {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: #F0F9F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease;
}

/* Inner fill is always present but collapsed; it scales in when the step
   becomes active or when the card is hovered (all steps "done"). */
.se-drive-dot::after {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #2fae72;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.se-drive-step.is-active .se-drive-dot {
  background-color: #cdeadd;
}

.se-drive-step.is-active .se-drive-dot::after {
  transform: scale(1);
}

/* Hover: every step reads as completed. */
.pr-advantage-card-drive-operations:hover .se-drive-dot {
  background-color: #cdeadd;
}

.pr-advantage-card-drive-operations:hover .se-drive-dot::after {
  transform: scale(1);
}

/* The final step becomes the "current" marker: solid green ring, white centre. */
.pr-advantage-card-drive-operations:hover .se-drive-step:last-child .se-drive-dot {
  background-color: #2fae72;
}

.pr-advantage-card-drive-operations:hover .se-drive-step:last-child .se-drive-dot::after {
  width: 9px;
  height: 9px;
  background-color: #ffffff;
}

.se-drive-step-label {
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
  color: var(--brand-ink);
  white-space: nowrap;
}

/* ----- 6. Feedback Intelligence: company + feedback panel ----- */
.se-visual-feedback {
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
}

.se-fb-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}

.se-fb-company {
  display: flex;
  align-items: center;
  gap: 8px;
}

.se-fb-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #ececec;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.05);
}

.se-fb-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.se-fb-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.se-fb-meta strong {
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  color: var(--brand-ink);
  white-space: nowrap;
}

.se-fb-meta span {
  font-size: 10px;
  color: var(--brand-ink);
  white-space: nowrap;
}

.se-fb-gap {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  /* background-color: #f4f6f5; */
  border-radius: 9px;
  padding: 6px 13px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
  width: 100%;
  justify-content: space-between;
}

.se-fb-gap-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
  line-height: 19px;
  letter-spacing: -0.32px;
}

/* Registered custom property so the number can be animated (counts up). */
@property --fb-gap {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.se-fb-gap-val {
  --fb-gap: 0;
  counter-reset: fbgap var(--fb-gap);
  display: inline-block;
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  color: #CFD1D4;
  line-height: 25px;
  transition: color 0.5s ease, --fb-gap 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.se-fb-gap-val::after {
  content: counter(fbgap) '%';
}

/* On hover the gap counts up from 0% to 15% and turns red. */
.pr-advantage-card-feedback:hover .se-fb-gap-val {
  --fb-gap: 15;
  color: #F5451F;
}

.se-fb-panel {
  flex: 0 0 auto;
  width: 112px;
  align-self: stretch;
  background-color: #F2F2F2;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.se-fb-panel-label {
  font-size: 9px;
  line-height: 12px;
  font-weight: 500;
  color: var(--brand-ink);
}

/* Avatar + reveal bars sit in a row pinned to the bottom of the panel. */
.se-fb-panel-body {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.se-fb-panel-av {
  /* align-self: center;
  margin: auto; */
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  /* border-radius: 8px;
  overflow: hidden; */
}

/* Two feedback bars that fade/slide in beside the avatar on hover. */
.se-fb-panel-bars {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.se-fb-panel-bar {
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background-color: #E2E2E2;
}

.se-fb-panel-bar-short {
  width: 62%;
}

.pr-advantage-card-feedback:hover .se-fb-panel-bars {
  opacity: 1;
  transform: translateX(0);
}

.se-fb-panel-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== API-enable card visuals (pure CSS recreation of the illustrations) ===== */
.api-visual {
  height: 100px;
  margin-bottom: 18px;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 10px; */
  padding: 0 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
}

.api-visual-center {
  justify-content: center;
  gap: 0;
}

/* --- avatar (container matches the image so it doesn't overflow the gap) --- */
.api-av {
  position: relative;
  flex: 0 0 auto;
  width: 55px;
  height: 55px;
}

.api-av img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.api-av-ring-red img {
  width: 62px;
  height: 62px;
}

.api-badge {
  position: absolute;
  bottom: -10px;
  left: 85%;
  transform: translateX(-50%);
  background-color: #2fae72;
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- green bar with a status tag stacked below it (card 2) --- */
.api-barstack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.api-tag {
  background-color: #2fae72;
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- green pill bar --- */
.api-pill {
  flex: 0 0 auto;
  width: 46px;
  height: 12px;
  border-radius: 999px;
  background-color: #58cb8b;
}

/* --- two-line name/detail skeleton (card 1) --- */
.api-lines {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-right: 4px;
}

.api-line {
  height: 9px;
  border-radius: 999px;
}

.api-line-green {
  width: 42px;
  background-color: #58cb8b;
}

.api-line-gray {
  width: 58px;
  background-color: #e4e9e6;
}

/* --- dashed flow + play glyph --- */
.api-flow {
  flex: 1 1 auto;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.api-dash {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  border-top: 2px dashed #cfd8d3;
}

.api-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.api-play-plain {
  background-color: transparent;
  color: #b5beb9;
  width: auto;
  height: auto;
}

/* --- rounded logo tiles (H / SIS / API) --- */
.api-tile {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.api-tile img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.api-sis-img img {
  width: 46px;
  height: 46px;
}

.api-hiree-outcome-img {
  flex: 0 0 auto;
}

.api-hiree-outcome-img img {
  width: 56px;
  height: 56px;
  max-width: none;
  transition: width 0.4s ease, height 0.4s ease;
}

/* on hover the HIREE tile shrinks a little as the dashboard card reveals */
.pr-advantage-card-outcome-feeds:hover .api-hiree-outcome-img img {
  width: 48px;
  height: 48px;
}

.api-tile-overlap {
  margin-left: -3px;
  margin-top: 3px;
  z-index: 1;
  box-shadow: -8px 0 16px rgba(15, 31, 26, 0.06);
}

.api-check {
  position: absolute;
  right: -12px;
  bottom: -10px;
}

.api-tile-api {
  background-color: #7a2e8f;
  color: #ffffff;
  flex-direction: column;
  gap: 1px;
}

.api-tile-api-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

.api-tile-api-tag {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.85;
  line-height: 1;
}

/* magenta "API </>" tile rendered from the ApiCodeIcon SVG */
.api-tile-api-img {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.api-tile-api-img svg {
  width: 48px;
  height: 48px;
  display: block;
}

/* The tile stays the same height as a plain tile so it lines up with the
   avatar's centre; the caption is dropped just below it (absolute). */
.api-tile-stack {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.api-caption {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
}

/* --- mini stat / dashboard card --- */
.api-stat {
  flex: 0 0 auto;
  background-color: #f4f6f5;
  border-radius: 9px;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
}

.api-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.api-stat-row-dash {
  justify-content: flex-start;
}

.api-stat-label {
  font-size: 9px;
  line-height: 13px;
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
}

.api-stat-val {
  font-size: 12px;
  font-weight: 700;
  color: #1f9d57;
  background-color: var(--brand-white);
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
}

.api-skel {
  height: 8px;
  width: 32%;
  border-radius: 999px;
  background-color: #dfe4e2;
}

/* --- company chip (workflow automation) --- */
/* Outer panel is a soft grey so the white company card reads as a card. The
   company card + API tile are one fixed unit (API tucked against the card). By
   default that unit sits centred (both edge spacers grow, reveal pieces
   collapsed). On hover the leading/trailing edges collapse and the trailing
   reveal spacers grow, so the whole unit slides left and the arrow + HIREE tile
   reveal on the right. */
.api-visual-workflow {
  justify-content: flex-start;
  gap: 0;
  background-color: #fafafb;
}

.api-company {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  /* background-color: #ffffff; */
  /* border: 1px solid #ececec; */
  border-radius: 6px;
  padding: 4px 10px 4px 5px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
}

/* edge spacers centre the group by default, collapse on hover */
.api-wf-edge {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.45s ease;
}

.pr-advantage-card-workflow-automation:hover .api-wf-edge {
  flex-grow: 0;
}

/* inner spacers collapsed by default (so the API tile overlaps the company),
   grow on hover to produce even spacing across the row */
.api-wf-gap {
  flex: 0 1 0;
  min-width: 0;
  transition: flex-grow 0.45s ease;
}

.pr-advantage-card-workflow-automation:hover .api-wf-gap {
  flex-grow: 1;
}

/* API tile stays tucked against the company card as one fixed unit; the whole
   company + API group slides left on hover while the HIREE tile reveals right */
.api-visual-workflow .api-tile-api-img {
  margin-left: -5px;
  position: relative;
  z-index: 2;
}

/* HIREE tile that slides in on the right on hover */
.api-wf-hiree {
  position: relative;
  flex: 0 0 auto;
  width: 0;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  transition: width 0.45s ease, opacity 0.45s ease;
}

.api-wf-hiree>img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  display: block;
}

/* small company-logo badge on the tile's bottom-right corner */
.api-wf-hiree-badge {
  position: absolute;
  right: -6px;
  bottom: -4px;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.18);
}

.api-wf-hiree-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pr-advantage-card-workflow-automation:hover .api-wf-hiree {
  width: 46px;
  opacity: 1;
}

/* the reveal arrow (shares .api-play-reveal base) appears on hover */
.pr-advantage-card-workflow-automation:hover .api-play-reveal {
  width: 13px;
  opacity: 1;
}

.api-company-logo {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #ececec;
  padding: 7px;
}

.api-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.api-company-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.api-company-meta strong {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-ink);
}

.api-company-meta span {
  font-size: 9px;
  color: #8a938e;
}

/* --- Graduate Outcome Feeds (outcome-feeds) --- */
/* Default: the avatar + HIREE tile sit centred (both edge spacers grow, the
   dashboard card collapsed). On hover the edge spacers collapse and the reveal
   spacer grows, so the avatar+HIREE group slides left while the University
   Dashboard card reveals on the right. The card itself never changes size. */
.api-visual-outcome {
  justify-content: flex-start;
  gap: 0;
}

/* edge spacers centre the avatar+HIREE group by default, collapse on hover */
.api-of-edge {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.45s ease;
}

.pr-advantage-card-outcome-feeds:hover .api-of-edge {
  flex-grow: 0;
}

/* reveal spacer collapsed by default, grows on hover to spread the row */
.api-of-gap {
  flex: 0 1 0;
  min-width: 0;
  transition: flex-grow 0.45s ease;
}

.pr-advantage-card-outcome-feeds:hover .api-of-gap-reveal {
  flex-grow: 1;
}

/* the University Dashboard card, hidden until hover */
.api-of-dashboard {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #ececec;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.06);
  transition: width 0.45s ease, opacity 0.45s ease, padding 0.45s ease;
}

.pr-advantage-card-outcome-feeds:hover .api-of-dashboard {
  width: 160px;
  opacity: 1;
  padding: 9px 11px;
}

.api-of-dash-head {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.api-of-dash-head strong {
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  color: var(--brand-ink);
}

.api-of-dash-person {
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-of-dash-av {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
}

.api-of-dash-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.api-of-dash-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

.api-of-dash-meta strong {
  font-size: 8px;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 11px;
}

.api-of-dash-role {
  font-size: 6px;
  color: var(--brand-light-gray);
  line-height: 7px;
  font-weight: 400;
}

.api-of-placed {
  align-self: flex-start;
  /* margin-top: 3px; */
  font-size: 6px;
  line-height: 6px;
  font-weight: 500;
  color: var(--brand-ink);
  background-color: #EFEFEF;
  padding: 2px 3px;
  border-radius: 2px;
  white-space: nowrap;
}

/* --- Real-Time Event Notifications (event-notifications) --- */
/* The dashboard card's second line is a fixed-height slot holding two states
   stacked on top of each other: the grey skeleton bar (default) and the
   notified-student row (hover). They cross-fade so the card never resizes.
   A notification bell also pops out of the card's top-right corner on hover. */
/* the card grows wider on hover; because .api-flow is flex:1 1 auto it gives up
   that width, so the dashed connector lines shorten in step. */
.api-en-stat {
  position: relative;
  box-sizing: border-box;
  width: 150px;
  transition: width 0.4s ease;
}

.pr-advantage-card-event-notifications:hover .api-en-stat {
  width: 170px;
}

.api-en-body {
  position: relative;
  height: 22px;
}

.api-en-skel,
.api-en-person {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.35s ease;
}

.api-en-skel {
  width: 84px;
  opacity: 1;
}

.api-en-person {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
}

.pr-advantage-card-event-notifications:hover .api-en-skel {
  opacity: 0;
}

.pr-advantage-card-event-notifications:hover .api-en-person {
  opacity: 1;
}

.api-en-person-av {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
}

.api-en-person-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.api-en-hired {
  background-color: #2fae72;
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* notification bell — tucked into the card corner, pops in on hover */
.api-en-bell {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #F0F9F5;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 31, 26, 0.16);
  opacity: 0;
  transform: scale(0.6) translateY(6px);
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pr-advantage-card-event-notifications:hover .api-en-bell {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ============================================================
   API-enable cards — hover animations
   The card never changes size: .api-visual is a fixed 100px-tall,
   overflow:hidden box, so only the inner pieces grow / travel.

   Each card is animated on its OWN, scoped by its
   `.pr-advantage-card-<id>` class, so hovering one card never
   animates any other. The block below is Student Data Import only.
============================================================ */

/* smooth base transitions for the animated pieces */
.api-line,
.api-dash,
.api-play {
  transition: width 0.45s ease, flex-grow 0.6s ease, opacity 0.4s ease;
}

/* ----- Student Data Import ----- */

/* bars stretch out on hover */
.pr-advantage-card-student-data-import:hover .api-line-green {
  width: 66px;
}

.pr-advantage-card-student-data-import:hover .api-line-gray {
  width: 84px;
}

/* The arrow glides toward the tile by re-balancing the dashed line rather
   than translating (translating would leave an empty gap behind it). The
   leading dash grows — so the dotted line stays continuous right up to the
   arrow — while the trailing dash shrinks but keeps a dotted gap before the
   HIREE tile. Adjust the flex-grow ratio to move the arrow further / less. */
.pr-advantage-card-student-data-import:hover .api-flow .api-dash:first-child {
  flex-grow: 4;
}

.pr-advantage-card-student-data-import:hover .api-flow .api-dash:last-child {
  flex-grow: 1;
}

/* ----- Placement Data Export ----- */

/* left cluster (tile + avatar + bar/badge) kept tight together so the tile can
   overlap the avatar; only ONE gap remains — between this cluster and the stat. */
.api-export-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* HIREE tile that slides in to the left of the avatar on hover (hidden by
   default so it takes no space and the card size never grows). */
.api-export-tile {
  flex: 0 0 auto;
  position: relative;
  z-index: 99;
  width: 0;
  opacity: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* cancels the group's 12px gap while hidden so the avatar sits flush left */
  margin-right: -12px;
  transition: width 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

.api-export-tile img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  display: block;
}

/* smooth transitions for the pieces this card animates */
.api-av-ring-red img,
.api-barstack,
.api-stat-val-ghost {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* keep the avatar above the incoming HIREE tile so the tile tucks behind it */
.pr-advantage-card-data-export .api-av {
  position: relative;
  z-index: 2;
}

/* reveal the HIREE tile; the negative margin (past the 12px gap) makes the
   avatar overlap it by ~16px */
.pr-advantage-card-data-export:hover .api-export-tile {
  width: 40px;
  opacity: 1;
  margin-right: -28px;
}

/* the avatar shrinks (scale keeps it centred and avoids reflow) */
.pr-advantage-card-data-export:hover .api-av-ring-red img {
  transform: scale(0.72);
}

/* the pill bar + Hired badge slide left a little */
.pr-advantage-card-data-export:hover .api-barstack {
  transform: translateX(-8px);
}

/* second row of the stat: fixed-width bar + a "88%" value that appears on
   hover. The bar width itself never changes. */
.api-stat-row-skel {
  justify-content: space-between;
  gap: 8px;
}

.api-stat-val-ghost {
  opacity: 0;
  font-size: 12px;
  font-weight: 700;
  color: #1f9d57;
  background-color: var(--brand-white);
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
}

.pr-advantage-card-data-export:hover .api-stat-val-ghost {
  opacity: 1;
}

/* ----- Employability Profile Management ----- */

/* Spacer-driven layout: equal flex-grow spacers between every item produce
   equal gaps. The two trailing spacers stay collapsed by default (so the SIS
   tile sits flush right, matching the default state); on hover they expand and
   the reveal items grow in, so everything slides to equal spacing. The card
   itself never changes size. */
.api-visual-pm {
  justify-content: flex-start;
}

.api-pm-gap {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  transition: flex-grow 0.45s ease;
}

/* trailing spacers are collapsed until hover */
.api-pm-gap-reveal {
  flex-grow: 0;
}

.pr-advantage-card-profile-management:hover .api-pm-gap-reveal {
  flex-grow: 1;
}

/* the second arrow + "profile created" tile, hidden until hover.
   No overflow:hidden here — opacity handles the hide, and clipping would crop
   the mini-avatar that overhangs the tile corner. */
.api-play-reveal,
.api-profile-created {
  flex: 0 0 auto;
  width: 0;
  opacity: 0;
  transition: width 0.45s ease, opacity 0.45s ease;
}

.api-profile-created {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* left-anchored so the tile stays put and only fades in (no spill wobble as
     the width grows) */
  justify-content: flex-start;
}

.api-profile-created-tile img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  display: block;
}

.api-profile-created-av {
  position: absolute;
  right: -5px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
}

.api-profile-created-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* reveal the second arrow + tile on hover */
.pr-advantage-card-profile-management:hover .api-play-reveal {
  width: 13px;
  opacity: 1;
}

.pr-advantage-card-profile-management:hover .api-profile-created {
  width: 46px;
  opacity: 1;
}

/* the "Record Created" caption lifts above the SIS tile on hover */
.api-caption {
  transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {

  .api-line,
  .api-dash,
  .api-play,
  .api-export-tile,
  .api-av-ring-red img,
  .api-barstack,
  .api-stat-val-ghost,
  .api-play-reveal,
  .api-profile-created,
  .api-pm-gap,
  .api-caption,
  .api-wf-edge,
  .api-wf-gap,
  .api-wf-hiree,
  .api-visual-workflow .api-tile-api-img,
  .api-of-edge,
  .api-of-gap,
  .api-of-dashboard,
  .api-hiree-outcome-img img,
  .api-en-skel,
  .api-en-person,
  .api-en-bell {
    transition: none;
  }
}

/* ============================================================
   Placement Rates — "Accreditation-ready reporting" section
============================================================ */
.pr-accred {
  padding: 60px 0;
  background-color: #ffffff;
}

.pr-accred-shell {
  background-color: rgba(247, 248, 249, 0.5);
  border-radius: 18px;
  padding: 47px;
}

.pr-accred-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.pr-accred-visual {
  display: block;
}

.pr-accred-report {
  width: 100%;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 13px 26px 26px 26px;
  box-shadow: 0 10px 30px rgba(15, 31, 26, 0.08);
}

.pr-accred-report-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.pr-accred-report-title {
  font-size: 15px;
  line-height: 28px;
  font-weight: 600;
  color: var(--brand-ink, #0f1f1a);
  flex: 1 1 auto;
}

.pr-accred-report-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.pr-accred-report-bar {
  display: block;
  height: 16px;
  border-radius: 23px;
  background-color: #ECEEF1;
}

.pr-accred-report-bar-short {
  width: 179px;
}

.pr-accred-report-bar-big {
  width: 275px;
}

.pr-accred-report-block {
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 100px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.pr-accred-report-label {
  display: block;
  line-height: 28px;
  font-size: 14px;
  color: var(--brand-ink);
  font-weight: 600;
  margin-bottom: 12px;
}

.pr-accred-report-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pr-accred-report-box {
  display: block;
  height: 80px;
  background-color: #F1F3F4;
  border-radius: 6px;
}

.pr-accred-report-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pr-accred-report-date {
  font-size: 14px;
  line-height: 28px;
  color: var(--brand-ink);
  letter-spacing: -0.45px;
  font-weight: 600;
}

.pr-accred-report-cert {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #D7EAFF;
  color: var(--brand-ink);
}

.pr-accred-copy {
  max-width: 520px;
}

/* ============================================================
   Employer Connections page — hero overlay cards
============================================================ */
.ec-hero-bg {
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 100%;
  background-size: 100% 70%;
}

.ec-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 36px 36px 0;
  pointer-events: none;
}

.ec-employer-card,
.ec-invite-card {
  pointer-events: auto;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 31, 26, 0.08);
}

.ec-employer-card {
  position: absolute;
  top: 110px;
  left: 47px;
  width: 437px;
  padding: 30px 40px;
}

.ec-employer-label {
  display: block;
  font-size: 12px;
  color: var(--brand-light-gray);
  font-weight: 500;
  margin-bottom: 18px;
}

.ec-employer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ec-employer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: -40px;
  margin-right: -40px;
  padding: 12px 40px;
  border-bottom: 1px solid #EFEFEF;
}

.ec-employer-row:last-child {
  border-bottom: 0;
}

.ec-employer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #F0F0F0;
  flex: 0 0 auto;
  overflow: hidden;
}

.ec-employer-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ec-employer-meta {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ec-employer-name {
  font-size: 13px;
  color: var(--brand-ink, #0f1f1a);
  line-height: 21px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.ec-employer-row:hover .ec-employer-name {
  color: var(--brand-green);
}

.ec-employer-loc {
  font-size: 13px;
  line-height: 17px;
  font-weight: 400;
  color: var(--brand-ink, #0f1f1a);
}

.ec-employer-salary {
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #0f1f1a);
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 21px;
}

.ec-invite-card {
  position: absolute;
  top: 40px;
  right: 28px;
  width: 373px;
  padding: 16px;
}

.ec-invite-title {
  display: block;
  font-size: 14px;
  color: var(--brand-ink, #0f1f1a);
  margin-bottom: 12px;
}

.ec-invite-label {
  display: block;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 6px;
}

.ec-invite-input {
  display: block;
  padding: 8px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12px;
  color: #9ca3af;
  background-color: #ffffff;
}

/* ============================================================
   Employer Connections — Institutional Oversight section
============================================================ */
.ec-oversight {
  padding: 80px 0;
  background-color: #ffffff;
}

.ec-oversight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  margin-bottom: 24px;
}

.ec-oversight-card {
  background-color: rgba(247, 248, 249, 0.5);
  border-radius: 16px;
  padding: 30px 28px;
}

.ec-oversight-card-media {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 180px;
}

.ec-oversight-card-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.ec-oversight-card-title {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--brand-ink, #0f1f1a);
  margin: 0 0 10px;
  font-size: 600;
}

.ec-oversight-card-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

.ec-oversight-bullets {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ec-oversight-bullets li {
  font-size: 13px;
  line-height: 20px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

.ec-oversight-bullets li strong {
  color: var(--brand-ink, #0f1f1a);
  font-weight: 600;
}

.ec-oversight-card-wide {
  padding: 49px 28px;
}

.ec-oversight-wide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.7fr);
  gap: 32px;
  align-items: center;
}

/* ============================================================
   Employer Connections — Employer Quality Index section
============================================================ */
.ec-quality {
  padding: 60px 0 80px;
  background-color: rgba(247, 248, 249, 0.6);
  margin-top: 94px;
}

.ec-quality-shell {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 39px 28px 45px 28px;
}

.ec-quality-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.ec-quality-title {
  line-height: 32px;
  font-size: 24px;
  color: var(--brand-ink);
}

.ec-quality-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
}

.ec-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ec-quality-card {
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 20px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
}

.ec-quality-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ec-quality-card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #F0F9F5;
  border-radius: 10px;
  flex: 0 0 auto;
}

.ec-quality-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ec-quality-card-name {
  font-size: 15px;
  color: var(--brand-ink, #0f1f1a);
  flex: 1 1 auto;
  min-width: 0;
}

.ec-quality-card-tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--brand-ink);
  flex: 0 0 auto;
}

.ec-quality-card-tier-top {
  background-color: #DCFCE7;
}

.ec-quality-card-tier-standard {
  background-color: #E0E7FF;
}

.ec-quality-card-metrics {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
}

.ec-quality-card-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.ec-quality-card-metric-label {
  font-size: 13px;
  color: var(--brand-light-gray);
}

.ec-quality-card-metric-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
}

/* ============================================================
   Accreditation Reporting page — hero overlay cards
============================================================ */
.ar-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 95px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 14px; */
  pointer-events: none;
}

.ar-hero-overlay>* {
  pointer-events: auto;
}

.ar-stat-card {
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 31, 26, 0.10);
  padding: 22px 26px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.ar-stat-pct {
  font-size: 44px;
  font-weight: 700;
  color: #1F8C5A;
  line-height: 1.1;
}

.ar-stat-label {
  font-size: 14px;
  color: var(--brand-ink, #0f1f1a);
}

.ar-monthly-row {
  display: flex;
  gap: 14px;
  width: 360px;
  margin-bottom: 24px;
}

.ar-monthly-card {
  flex: 1 1 0;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 31, 26, 0.08);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ar-monthly-month {
  font-size: 12px;
  color: #6b7280;
}

.ar-monthly-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ar-monthly-count {
  font-size: 22px;
  font-weight: 700;
  color: #1F8C5A;
  line-height: 1;
}

.ar-monthly-text {
  font-size: 12px;
  color: var(--brand-ink, #0f1f1a);
}

.ar-export-btn {
  padding: 10px;
  font-size: 14px;
  cursor: default !important;
}

/* ============================================================
   Accreditation Reporting — "De-Risk" section
============================================================ */
.ar-derisk {
  padding: 94px 0 0;
  background-color: #ffffff;
}

.ar-derisk-stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.ar-derisk-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: self-start;
  background-color: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 94px;
}

.ar-derisk-card-reversed .ar-derisk-copy {
  order: 2;
}

.ar-derisk-card-reversed .ar-derisk-media {
  order: 1;
}

.ar-derisk-copy {
  padding: 22px;
  display: flex;
  flex-direction: column;
  max-width: 532px;
}

.ar-derisk-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #46B481;
  margin-bottom: 15px;
}

.ar-derisk-media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ar-derisk-media-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ============================================================
   Skills Readiness page — hero skills gap card
============================================================ */
.sr-hero-overlay {
  padding: 100px 36px 0;
}

.sr-skills-stack {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 420px;
}

.sr-cohort-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 31, 26, 0.10);
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
}

.sr-cohort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.sr-cohort-title {
  font-size: 14px;
  color: var(--brand-ink, #0f1f1a);
  line-height: 23px;
  font-weight: 600;
}

.sr-skills-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 22px;
  width: 100%;
}

.sr-skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sr-skills-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-skills-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sr-skills-item-label {
  font-size: 12px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

.sr-skills-item-gap {
  font-size: 12px;
  font-weight: 500;
  color: #EC6D70;
}

.sr-skills-item-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background-color: #ECEEF1;
  overflow: hidden;
}

.sr-skills-item-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #46B481;
  border-radius: 999px 0 0 999px;
}

.sr-skills-item-bar-gap-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #FCD9A8;
}

/* ============================================================
   Skills Readiness — "The Problem" section
============================================================ */
.skills-problem-container {
  padding-top: 88px;
  position: relative;
  isolation: isolate;
}

.skills-problem-container::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 280px;
  bottom: 0;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
  z-index: -1;
  pointer-events: none;
}

.sr-problem {
  padding-bottom: 230px;
}

.sr-problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 2fr);
  gap: 0;
  align-items: center;
}

.sr-problem-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 16px 20px;
  background: #F0F9F5;
}

.sr-problem-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
}

.sr-problem-arrow svg {
  width: 100%;
  height: 16px;
}

.sr-problem-small-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05);
}

.sr-problem-small-title {
  font-size: 15px;
  line-height: 24px;
  color: var(--brand-ink, #0f1f1a);
  margin: 0 0 14px;
  font-weight: 600;
}

.sr-problem-row {
  margin-bottom: 14px;
}

.sr-problem-row:last-child {
  margin-bottom: 0;
}

.sr-problem-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  color: var(--brand-ink);
}

.sr-problem-pill-gray {
  background-color: #E1E1E1;
}

.sr-problem-pill-orange {
  background-color: #FFD9D9;
}

.sr-problem-pill-green {
  background-color: #60D29F;
}

.sr-problem-row-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-ink);
  margin: 0;
  max-width: 334px;
}

.sr-problem-link {
  color: #2563EB;
  text-decoration: underline;
}

.sr-problem-right {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05);
}

.sr-problem-big-title {
  font-size: var(--fs-18);
  line-height: 1.3;
  color: var(--brand-ink, #0f1f1a);
  margin: 0 0 12px;
}

.sr-problem-big-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-light-gray);
  margin-bottom: 40px;
  max-width: 600px;
}

.sr-problem-visual {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin-bottom: 40px;
}

.sr-problem-visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 165px;
  height: 165px;
  background-color: #F4F4F4;
  border-radius: 10px;
  flex: 0 0 auto;
}

.sr-problem-visual-icon svg {
  width: 56px;
  height: 56px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-problem-right:hover .sr-problem-visual-icon svg {
  transform: scale(1.22);
}

.sr-problem-visual-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  padding: 14px 0;
  gap: 18px;
}

.sr-problem-visual-bars-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sr-problem-visual-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  background-color: #ECEEF1;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-problem-visual-bar-s1 {
  width: 15%;
}

.sr-problem-visual-bar-s2 {
  width: 35%;
}

.sr-problem-visual-bar-long {
  width: 60%;
}

.sr-problem-right:hover .sr-problem-visual-bar-s1 {
  width: 40%;
}

.sr-problem-right:hover .sr-problem-visual-bar-s2 {
  width: 70%;
}

.sr-problem-right:hover .sr-problem-visual-bar-long {
  width: 40%;
}

.sr-problem-table {
  border: 1px solid #ECEEF1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.10), 0 6px 12px rgba(15, 31, 26, 0.05);
}

.sr-problem-table-head,
.sr-problem-table-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
}

.sr-problem-table-head .sr-problem-table-cell {
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
  font-size: 14px;
  padding: 20px 28px;
}

.sr-problem-table-row {
  border-top: 1px solid #ECEEF1;
}

.sr-problem-table-cell {
  padding: 20px 28px;
  font-size: 14px;
  color: var(--brand-ink, #0f1f1a);
  line-height: 1.4;
}

.sr-problem-table-cell-rank {
  font-weight: 600;
}

.sr-problem-table-cell-muted {
  color: #9ca3af;
}

/* ============================================================
   Skills Readiness — "How Hiree365 Solves It" section
============================================================ */

.sr-solves .container {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 22px;
  padding: 64px 48px;
}

.sr-solves-stack {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.sr-solves-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}

.sr-solves-card-reversed .sr-solves-copy {
  order: 2;
}

.sr-solves-card-reversed .sr-solves-media {
  order: 1;
}

.sr-solves-copy {
  display: flex;
  flex-direction: column;
}

.sr-solves-card-text {
  font-size: 1rem;
  line-height: 28px;
  color: var(--brand-light-gray);
  margin-bottom: 30px;
  font-weight: 400;
  max-width: 500px;
}

.sr-solves-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sr-solves-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sr-solves-bullet-icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 2px;
}

.sr-solves-bullet-text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--brand-ink);
  max-width: 450px;
}

.sr-solves-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-solves-media-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ============================================================
   Integrations page
============================================================ */
.int-hero {
  padding: 60px 0;
  background-color: #ffffff;
}

.int-hero-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #E6F4EC;
  border-radius: 22px;
  padding: 56px;
  overflow: hidden;
  width: 100%;
}

.int-hero-visual {
  position: relative;
  height: 100%;
}

.int-hero-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 100% 100%;
  z-index: 0;
  border-radius: 16px;
}

/* ============================================================
   "Built by the team behind Classe365" — reusable component
============================================================ */
.bbc {
  padding: 60px 0;
  background-color: #ffffff;
}

.bbc-card {
  position: relative;
  background-color: var(--brand-ink);
  border-radius: 12px;
  padding: 24px 27px 0 53px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 32px;
}

.bbc-stats {
  display: flex;
  align-items: center;
  gap: 48px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.bbc-stat {
  display: flex;
  flex-direction: column;
}

.bbc-stat-value {
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  line-height: 40px;
}

.bbc-stat-label {
  font-size: 15px;
  color: #B4BCB8;
  line-height: 20px;
  font-weight: 400;
}

.bbc-media {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bbc-media-img {
  max-width: 100%;
  max-height: 220px;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ============================================================
   Integrations — "Four ways to connect Hiree365" section
============================================================ */
.int-ways {
  margin-top: 60px;
  background-color: #E6F4EC;
}

.int-ways-row {
  align-items: stretch;
}

.int-ways-aside {
  display: flex;
  flex-direction: column;
}

.int-ways-sticky {
  position: sticky;
  top: 100px;
}

.int-ways-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.int-ways-visual-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.int-ways-steps {
  display: flex;
  flex-direction: column;
  padding: 96px 64px;
  background-color: var(--brand-white);
}

.int-ways-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.int-ways-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #F0F9F5;
  color: var(--brand-ink, #0f1f1a);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  align-self: flex-start;
}

.int-ways-step-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.int-ways-step-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 379px;
}

.int-ways-step-title {
  font-size: 24px;
  line-height: 32px;
  color: var(--brand-ink, #0f1f1a);
  margin: 0;
}

.int-ways-step-best {
  font-size: 15px;
  color: var(--brand-light-gray);
  margin: 0;
  line-height: 24px;
  font-weight: 400;
}

.int-ways-step-text {
  font-size: 17px;
  line-height: 28px;
  color: var(--brand-ink);
  margin: 0;
}

.int-ways-step-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 48px;
}

.int-ways-step-actions .btn {
  min-width: 260px;
  justify-content: center;
}

.int-ways-step-features {
  background-color: #ffffff;
  border: 1px solid #E4E4E7;
  border-radius: 12px;
  padding: 22px 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  position: relative;
  width: 100%;
  max-width: 379px;
}

/* Card 01 (Classe365) is the only non-connected card — it has no dotted
   connector line that needs the wider 28px spacing, so tighten its gap to 18px. */
.int-ways-step-features:not(.int-ways-step-features-connected) {
  gap: 18px;
}

.int-ways-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.int-ways-feature-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  z-index: 1;
}

.int-ways-feature-text {
  font-size: 15px;
  color: var(--brand-ink, #0f1f1a);
  line-height: 24px;
  font-weight: 400;
}

.int-ways-step-features-connected .int-ways-feature:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 25px;
  bottom: -30px;
  width: 1px;
  background-image: linear-gradient(to bottom, #cbd5e0 50%, transparent 50%);
  background-size: 2px 6px;
  background-repeat: repeat-y;
  z-index: 0;
}

.int-ways-step-divider {
  border: 0;
  border-top: 2px solid #E4E4E7;
  margin: 48px 0;
}

/* ============================================================
   Integrations — "Why integration matters" section
============================================================ */
.int-why {
  padding: 48px;
  background-color: #F8F9F9;
}

.int-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
}

.int-why-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
}

.int-why-col-heading {
  justify-content: flex-start;
}

.int-why-heading {
  font-size: 32px;
  line-height: 36px;
  color: var(--brand-ink);
  letter-spacing: -0.75px;
}

.int-why-col-title {
  font-size: 24px;
  line-height: 32px;
  color: var(--brand-ink);
  margin: 0;
}

.int-why-col-text {
  font-size: 16px;
  line-height: 28px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

/* ============================================================
   Classe365 Customers page
============================================================ */
.c365-hero {
  padding: 60px 0 0;
  background-color: #ffffff;
}

.c365-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c365-hero-heading {
  max-width: 900px;
}

.c365-hero-subtitle {
  font-size: 1.125rem;
  line-height: 25px;
  color: var(--brand-ink);
  font-weight: 400;
  max-width: 800px;
  margin-bottom: 70px;
}

.c365-hero-visual {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.c365-hero-visual-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Classe365 Customers — Three Use Cases section
============================================================ */
.c365-cases {
  padding: 60px 0 20px;
  background-color: #ffffff;
}

.c365-cases-stack {
  display: flex;
  flex-direction: column;
}

.c365-case-card {
  background-color: #ffffff;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 31, 26, 0.05);
  margin-bottom: 92px;
}

.c365-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.c365-case-grid-reversed .c365-case-copy {
  order: 2;
  padding: 45px 45px 28px 28px;
  margin-left: 40px;
}

.c365-case-grid-reversed .c365-case-media {
  order: 1;
  border-radius: 12px 0 0 12px;
}

.c365-case-copy {
  display: flex;
  flex-direction: column;
  padding: 45px 28px 28px 45px;
}

.c365-case-copy>.rp-badge {
  align-self: flex-start;
}

.c365-case-link {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #46B481;
  text-decoration: none;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 20px;
}

.c365-case-link:hover {
  color: #166534;
}

.c365-case-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ECEEF1;
}

.c365-case-feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid #ECEEF1;
}

.c365-case-feature:last-child {
  border-bottom: 0;
}

.c365-case-feature-title {
  font-size: 17px;
  line-height: 28px;
  color: var(--brand-ink, #0f1f1a);
  font-weight: 600;
  letter-spacing: -0.45px;
}

.c365-case-feature-detail {
  font-size: 15px;
  color: var(--brand-light-gray);
  line-height: 24px;
  font-weight: 400;
}

.c365-case-media {
  background-color: #E6F4EC;
  border-radius: 0 12px 12px 0;
  padding: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  align-self: stretch;
}

.c365-case-media-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ---------- Animated employability profile card ---------- */
/* Animatable custom property that drives the counting readiness score. */
@property --c365-readiness {
  syntax: '<integer>';
  initial-value: 2;
  inherits: false;
}

.c365-emp-card {
  width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 35px 26px;
  box-shadow: 0 18px 40px rgba(16, 40, 34, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c365-emp-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 6px 18px rgba(16, 40, 34, 0.1);
}

.c365-emp-score-num {
  --c365-readiness: 2;
  --target: 70;
  display: inline-block;
  min-width: 46px;
  font-size: 20px;
  font-weight: 800;
  color: #AEB6B2;
  counter-reset: c365-readiness var(--c365-readiness);
  transition: color 0.6s ease, --c365-readiness 1s ease;
  will-change: color;
}

.c365-emp-score-num::after {
  content: counter(c365-readiness) '%';
}

.c365-emp-score-label {
  font-size: 13px;
  font-weight: 600;
  color: #101B16;
}

.c365-emp-tabs {
  display: grid;
  grid-template-columns: 1fr 144px;
  gap: 12px;
}

.c365-emp-tab {
  justify-self: start;
  font-size: 11px;
  font-weight: 600;
  color: #3F4E48;
  background: #EEF1F0;
  border-radius: 6px;
  padding: 5px 10px;
}

.c365-emp-courses {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c365-emp-course {
  display: grid;
  grid-template-columns: 1fr auto 100px;
  align-items: center;
  gap: 12px;
}

.c365-emp-course-name {
  font-size: 11px;
  color: var(--brand-ink);
  font-weight: 500;
}

.c365-emp-course-score {
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
}

.c365-emp-bar {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}

.c365-emp-bar-fill {
  display: block;
  height: 100%;
  width: 55%;
  border-radius: 999px;
  background: #EDEFEE;
  transition: width 1s ease;
}

.c365-emp-skills {
  padding: 21px 18px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c365-emp-skills-label {
  font-size: 12px;
  font-weight: 600;
  color: #101B16;
}

.c365-emp-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c365-emp-skill {
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
  color: var(--brand-ink);
  background: #EFEFEF;
  border-radius: 6px;
  padding: 4px 9px;
}

.c365-emp-skill-extra {
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.c365-emp-skill-extra:nth-of-type(4) {
  transition-delay: 0.15s;
}

.c365-case-card:hover .c365-emp-score-num {
  --c365-readiness: var(--target);
  color: #46B481;
}

.c365-case-card:hover .c365-emp-bar-fill {
  width: var(--pct);
}

.c365-case-card:hover .c365-emp-skill-extra {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {

  .c365-emp-score-num,
  .c365-emp-bar-fill,
  .c365-emp-skill-extra {
    transition: none;
  }
}

.c365-plc-meta {
  display: flex;
  gap: 40px;
}

.c365-plc-meta-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c365-plc-meta-label {
  font-size: 12px;
  color: #6B7B75;
}

.c365-plc-table {
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  border: 1px solid #F6F6F6;
  border-radius: 12px;
  padding: 20px 10px;
}

.c365-plc-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.c365-plc-row:last-child {
  border-bottom: 0;
}

/* center the middle (readiness score) column — header, values and skeleton */
.c365-plc-row> :nth-child(2) {
  justify-self: center;
  text-align: center;
}

.c365-plc-head {
  padding-top: 0;
  border-bottom: 1px solid #F0F2F1;
}

.c365-plc-head span {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-light-gray);
}

.c365-plc-student {
  display: flex;
  align-items: center;
  gap: 10px;
}

.c365-plc-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.c365-plc-avatar img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.c365-plc-student-id {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.c365-plc-student-id strong {
  font-size: 12px;
  color: var(--brand-ink);
}

.c365-plc-student-id span {
  font-size: 10px;
  color: var(--brand-light-gray);
  line-height: 20px;
}

.c365-plc-score {
  min-width: 0;
}

/* First student row's score stays neutral grey on hover by design; the rows
   below turn green (their count still ticks up either way). */
.c365-case-card:hover .c365-plc-table .c365-plc-row:nth-child(2) .c365-plc-score {
  color: #AEB6B2;
}

.c365-plc-skills {
  display: flex;
  gap: 6px;
}

.c365-plc-sk {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #EDEFEE;
  transition: width 1s ease;
}

.c365-plc-sk-name {
  width: 45%;
}

.c365-plc-sk-score {
  width: 28px;
}

.c365-plc-row>.c365-plc-sk-score {
  justify-self: start;
}

.c365-plc-sk-chip {
  width: 34px;
  height: 18px;
  border-radius: 6px;
}

.c365-case-card:hover .c365-plc-sk-name {
  width: 85%;
}

.c365-case-card:hover .c365-plc-sk-score {
  width: 52px;
}

.c365-case-card:hover .c365-plc-sk-chip {
  width: 56px;
}

@media (prefers-reduced-motion: reduce) {
  .c365-plc-sk {
    transition: none;
  }
}

/* ---------- Animated outcomes card (reuses .c365-emp-score-num / .c365-emp-tab) ---------- */
.c365-oc-table {
  display: flex;
  flex-direction: column;
}

.c365-oc-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.c365-oc-head {
  padding-top: 0;
  border-bottom: 1px solid #F0F2F1;
}

.c365-oc-head span {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-light-gray);
}

.c365-oc-head span:nth-child(2),
.c365-oc-cohort {
  justify-self: center;
  text-align: center;
}

.c365-oc-head span:nth-child(3),
.c365-oc-rate {
  justify-self: end;
  text-align: right;
}

.c365-oc-row>.c365-emp-tab {
  justify-self: start;
}

.c365-oc-cohort {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
}

.c365-oc-rate {
  min-width: 0;
}

.c365-case-card:hover .c365-oc-rate {
  color: #46B481;
}

.c365-oc-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #F0F2F1;
}

.c365-oc-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.c365-oc-bar-label {
  font-size: 12px;
  color: var(--brand-ink);
}

.c365-oc-bar-val {
  --c365-readiness: var(--start);
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #46B481;
}

.c365-oc-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #EDEFEE;
  overflow: hidden;
}

.c365-oc-bar-fill {
  display: block;
  height: 100%;
  width: var(--from);
  border-radius: 999px;
  background: #46B481;
  transition: width 1s ease;
}

.c365-case-card:hover .c365-oc-bar-fill {
  width: var(--to);
}

.c365-oc-report {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 9px;
  background: #F6F6F6;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(16, 40, 34, 0.06);
}

.c365-oc-report-icon {
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: #E5484D;
  border-radius: 4px;
  padding: 3px 4px;
  letter-spacing: 0.5px;
}

.c365-oc-report-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
}

@media (prefers-reduced-motion: reduce) {
  .c365-oc-bar-fill {
    transition: none;
  }
}

/* ============================================================
   Classe365 Customers — "Built on the Classe365 ecosystem"
============================================================ */
.c365-eco {
  padding: 60px 0;
  background-color: #F8F9F9;
  margin-bottom: 81px;
}

.c365-eco-copy {
  display: flex;
  flex-direction: column;
}

.c365-eco-copy>.rp-badge {
  align-self: flex-start;
}

.c365-eco-heading {
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.9px;
  color: var(--brand-ink, #0f1f1a);
  margin-bottom: 20px;
}

.c365-eco-visual-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.c365-eco-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.c365-eco-aside-pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  background-color: #FCE9D3;
  color: var(--brand-ink);
}

.c365-eco-aside-text {
  font-size: 13px;
  color: #4b5563;
  line-height: 20px;
  margin: 0;
  font-weight: 400;
  max-width: 500px;
}

.c365-eco-aside-btn {
  margin-top: 30px;
}

.plat-hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ============================================================
   Platform page — "The institution is always the hub"
============================================================ */
.plat-hub {
  padding: 94px 0 54px;
}

.plat-hub-table {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 31, 26, 0.04);
}

.plat-hub-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
}

.plat-hub-row:not(:last-child) {
  border-bottom: 1px solid #ECEEF1;
}

.plat-hub-row:last-child .plat-hub-cell {
  padding-bottom: 32px;
}

.plat-hub-cell {
  padding: 16px 38px;
  font-size: 0.813rem;
  line-height: 18px;
  color: var(--brand-ink);
  font-weight: 400;
  display: flex;
}

.plat-hub-row:not(.plat-hub-row-head) .plat-hub-cell-user {
  max-width: 280px;
}

.plat-hub-row:not(.plat-hub-row-head) .plat-hub-cell-access {
  max-width: 280px;
}

.plat-hub-row:not(.plat-hub-row-head) .plat-hub-cell-role>span:last-child {
  display: inline-block;
  max-width: 200px;
}


.plat-hub-cell-role {
  background-color: #F0F9F5;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px;
}

.plat-hub-row-head .plat-hub-cell {
  font-weight: 600;
  color: var(--brand-ink);
  align-items: center;

}

.plat-hub-row-head .plat-hub-cell-role {
  color: #46B481;
}

.plat-hub-row-head .plat-hub-cell-user,
.plat-hub-row-head .plat-hub-cell-access {
  background-color: #F0F9F5;
}

.plat-hub-row-head .plat-hub-cell-access {
  color: var(--brand-light-gray);
}

.plat-hub-cell-user {
  align-items: center;
  font-weight: 600;
}

.plat-hub-cell-access {
  color: var(--brand-light-gray);
}

.plat-hub-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ============================================================
   Platform page — "Everything your institutions needs" features
============================================================ */
.plat-features {
  padding: 80px 0;
}

.plat-features-header {
  max-width: 760px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plat-features-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 50px 0 100px 0;
}

.plat-features-tab {
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  color: var(--brand-ink);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 11px 22px;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.plat-features-tab:hover {
  background-color: var(--brand-ink);
  border-color: #1a2f29;
  color: var(--brand-white);
}

.plat-features-tab-arrow {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: max-width 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.plat-features-tab:hover .plat-features-tab-arrow {
  max-width: 20px;
  opacity: 1;
  transform: translateX(0);
}

.plat-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.plat-feature {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 12px;
  padding: 18px 33px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-width: 0;
}

.plat-feature-visual {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.plat-feature-visual>* {
  width: 100%;
  max-width: 480px;
}

.plat-feature-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--brand-ink);
  margin-bottom: 10px;
}

.plat-feature-desc {
  font-size: 13px;
  line-height: 20px;
  color: var(--brand-light-gray);
  margin: 0;
  max-width: 320px;
}

.plat-fc-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 10px 13px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.plat-fc-avatar-badge {
  position: absolute;
  right: -11px;
  bottom: -7px;
}

.plat-fc-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plat-fc-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.2;
}

.plat-fc-profile-sub {
  font-size: 11px;
  color: var(--brand-light-gray);
  line-height: 1.3;
}

.plat-fc-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 30px;
  margin-top: 4px;
  line-height: 1.4;
}

.plat-fc-pill-blue {
  background-color: #DDE9FF;
  color: #2B5BD7;
}

.plat-fc-pill-purple {
  background-color: #F3EFFA;
  color: #976CD2;
}

.plat-fc-pill-blue-soft {
  background-color: #F2F8FA;
  color: #53CEE0;
}

.plat-fc-card-profile {
  position: relative;
}

.plat-fc-mini-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plat-fc-mini-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.plat-fc-mini-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  flex: 0 0 auto;
  min-width: 52px;
}

/* The base .plat-fc-pill is tuned for a vertical stack; reset it for inline
   use inside the rows. */
.plat-fc-mini-row .plat-fc-pill {
  margin-top: 0;
  align-self: center;
  white-space: nowrap;
}

/* The match badge opens the right-aligned badge group; fixed widths keep the
   two match badges (and the two percentages) aligned in their own columns
   across both rows. */
.plat-fc-mini-row .plat-fc-pill-match {
  margin-left: auto;
  min-width: 78px;
  justify-content: center;
}

.plat-fc-mini-row .plat-fc-pill-pct {
  min-width: 38px;
  justify-content: center;
}

.plat-fc-pill-orange {
  background-color: #FCEAD6;
  color: #E08A3C;
}

/* Grey match bar: grows on hover but can shrink to fit, so the card never
   widens. */
.plat-fc-mini-bar {
  display: block;
  height: 18px;
  border-radius: 999px;
  background-color: #ECEEF1;
  width: 30px;
  flex: 0 1 auto;
  min-width: 24px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Extra second-row badges, collapsed until the card is hovered. */
.plat-fc-reveal {
  max-width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
}

.plat-feature:hover .plat-fc-mini-bar {
  width: 55px;
}

.plat-feature:hover .plat-fc-reveal {
  max-width: 140px;
  padding-left: 10px;
  padding-right: 10px;
  opacity: 1;
}

/* A hidden reveal badge must collapse fully (this beats the fixed min-widths
   above), then regain its column width once revealed so it lines up with the
   row-one badges. */
.plat-fc-mini-row .plat-fc-reveal {
  min-width: 0;
}

.plat-feature:hover .plat-fc-mini-row .plat-fc-reveal.plat-fc-pill-match {
  min-width: 78px;
}

.plat-feature:hover .plat-fc-mini-row .plat-fc-reveal.plat-fc-pill-pct {
  min-width: 38px;
}


.plat-fc-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.plat-fc-chart-tabs {
  display: inline-flex;
  gap: 8px;
  background-color: transparent;
  padding: 0;
}

.plat-fc-chart-tab {
  background-color: #FFFFFF;
  border: 1px solid #F1F1F1;
  outline: none;
  color: var(--brand-light-gray);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.plat-fc-chart-tab.is-active {
  background-color: var(--brand-ink);
  color: #ffffff;
}

.plat-fc-chart-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink);
}

.plat-fc-chart-meta-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
}

/* "+12% from last month" — collapsed at rest, revealed on hover */
.plat-fc-chart-meta-delta {
  font-size: 9px;
  font-weight: 600;
  max-height: 0;
  opacity: 0;
  transform: translateY(-2px);
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.35s ease 0.15s,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.plat-feature:hover .plat-fc-chart-meta-delta {
  max-height: 16px;
  opacity: 1;
  transform: translateY(0);
}

.plat-fc-chart-meta>svg {
  width: 30px !important;
  height: 27px !important;
  padding: 6px;
  background-color: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(15, 31, 26, 0.08);
  flex: 0 0 auto;
}

.plat-fc-chart-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-ink);
  display: block;
  margin: 25px 0 13px 0;
  line-height: 20px;
}

.plat-fc-chart {
  display: flex;
  gap: 8px;
  height: 130px;
}

.plat-fc-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 9px;
  color: #9aa3a0;
  padding-bottom: 20px;
  flex: 0 0 auto;
}

.plat-fc-chart-bars {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding-bottom: 20px;
  background-image: repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(25% - 1px),
      #F1F3F4 calc(25% - 1px),
      #F1F3F4 25%);
  background-size: 100% calc(100% - 20px);
  background-position: top left;
  background-repeat: no-repeat;
}

.plat-fc-chart-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.plat-fc-chart-bar-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.plat-fc-chart-bar {
  position: relative;
  width: 100%;
  max-width: 46px;
  border-radius: 6px 6px 0 0;
  display: block;
  min-height: 4px;
  height: var(--bar-h);
  filter: saturate(0.85);
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

/* On hover each bar animates from its rest height to its hover height
   (staggered left-to-right) so the chart appears to update live */
.plat-feature:hover .plat-fc-chart-bar {
  height: var(--bar-hh);
  filter: saturate(1.08);
}

.plat-feature:hover .plat-fc-chart-col:nth-child(2) .plat-fc-chart-bar {
  transition-delay: 0.06s;
}

.plat-feature:hover .plat-fc-chart-col:nth-child(3) .plat-fc-chart-bar {
  transition-delay: 0.12s;
}

.plat-feature:hover .plat-fc-chart-col:nth-child(4) .plat-fc-chart-bar {
  transition-delay: 0.18s;
}

.plat-feature:hover .plat-fc-chart-col:nth-child(5) .plat-fc-chart-bar {
  transition-delay: 0.24s;
}

/* Tooltip overlapping the top of the Applied bar (matches universities page) */
.plat-fc-chart-tip {
  position: absolute;
  bottom: calc(100% - 34px);
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background-color: #ffffff;
  color: var(--brand-ink);
  border: 1px solid #ebefe9;
  border-radius: 10px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.14);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.plat-fc-chart-tip-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-ink-muted);
  line-height: 1.2;
}

.plat-fc-chart-tip-value {
  font-size: 15px;
  font-weight: 700;
  color: #1f8f6a;
  line-height: 1;
}

.plat-feature:hover .plat-fc-chart-tip {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.plat-fc-chart-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--brand-light-gray);
  white-space: nowrap;
}

/* ============================================================
   Platform page — Employer Access section
============================================================ */
.plat-emp {
  padding: 70px 0 150px;
  background-color: #ffffff;
}

.plat-emp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "copy ."
    "image list";
  column-gap: 48px;
  align-items: start;
}

.plat-emp-image {
  grid-area: image;
}

.plat-emp-list {
  grid-area: list;
}

.plat-emp-copy>.rp-badge {
  align-self: flex-start;
}

.plat-emp-cta {
  align-self: flex-start;
  margin: 40px 0;
}

.plat-emp-image {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
}

.plat-emp-image img {
  display: block;
  width: 100%;
  height: auto;
}

.plat-emp-list {
  background-color: transparent;
}

.plat-emp-list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ECEEF1;
  margin-bottom: 0;
}

.plat-emp-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plat-emp-list-head strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
}

.plat-emp-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.plat-emp-point {
  padding: 13px 0px;
  border-bottom: 1px solid #ECEEF1;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
  position: relative;
}

.plat-emp-point:last-child {
  border-bottom: 0;
}

.plat-emp-point:hover {
  transform: translateX(6px);
}

.plat-emp-point-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
  letter-spacing: -0.45px;
  transition: color 0.3s ease;
  line-height: 28px;
}

.plat-emp-point-desc {
  font-size: 15px;
  line-height: 20px;
  color: var(--brand-light-gray);
  margin: 0;
  max-width: 470px;
  font-weight: 400;
}

/* ============================================================
   Platform page — Built on the Classe365 ecosystem
============================================================ */
.plat-eco {
  position: relative;
  padding: 110px 0 0;
}

.plat-eco-bg {
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: -12%;
  height: 676px;
  background-image: url('/new/imgs/platform/classe365-advantage-bg-img.png');
  background-repeat: no-repeat;
  background-position: bottom bottom;
  background-size: 100% 100%;
  z-index: 1;
  pointer-events: none;
}

.plat-eco-container {
  position: relative;
  z-index: 1;
}

.plat-eco-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 600px;
}

.plat-eco-copy>.rp-badge {
  align-self: flex-start;
}

.plat-eco-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 50px 0 100px 0;
}

.plat-eco-callout {
  background-color: #FCE4C4;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(15, 31, 26, 0.04);
}

.plat-eco-callout-pill {
  display: inline-block;
  background-color: var(--brand-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  line-height: 1.4;
}

.plat-eco-callout-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--brand-ink);
  margin: 0;
  font-weight: 400;
}

.plat-eco-visual {
  position: relative;
  padding: 48px 32px 80px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 50px;
  min-height: 597px;
  margin-left: auto;
  background-color: #E6F4EC;
  border-radius: 18px;
  justify-content: center;
  overflow: hidden;
}

/* White circle that scales in behind the cards on hover */
.plat-eco-visual::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.plat-eco-visual:hover::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.plat-eco-card {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  border-radius: 15px;
  border: 1px solid #E5E7EB;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 18px 40px rgba(15, 31, 26, 0.08);
  max-width: 350px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease;
}

.plat-eco-card-classe {
  margin-right: 30px;
}

.plat-eco-card-hiree {
  margin-left: 60px;
  border: 2px solid #46B481;
}

/* On hover the two cards slide toward each other and overlap slightly */
.plat-eco-visual:hover .plat-eco-card-classe {
  transform: translateY(28px);
}

.plat-eco-visual:hover .plat-eco-card-hiree {
  transform: translateY(-30px);
  z-index: 3;
  box-shadow: 0 24px 50px rgba(15, 31, 26, 0.14);
}

.plat-eco-card-sub {
  font-size: 11px;
  color: var(--brand-light-gray);
  line-height: 1.4;
}

.plat-eco-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.plat-eco-card-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #F0F9F5;
  color: var(--brand-ink);
}

.plat-eco-card-pill-green {
  color: #46B481;
}

.plat-eco-connector {
  position: absolute;
  right: 43px;
  top: 46%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: none;
}

.plat-eco-connector-bolt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   SIS page — "Why SIS Matters" section
============================================================ */
.sis-matters {
  padding: 80px 0;
  background-color: #ffffff;
}

.sis-matters-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.sis-matters-left {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 18px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sis-matters-left-text {
  font-size: var(--font-desc-block);
  color: var(--brand-light-gray);
  line-height: 25px;
  ;
  max-width: 450px;
  margin: 0;
}

.sis-matters-left-btn {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 12px;
}

.sis-matters-right {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 18px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.sis-matters-inner-card {
  width: calc(100% - 64px);
  background-color: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  transition: transform 0.45s ease;
}

.sis-matters-inner-card:nth-child(1) {
  transform: translateX(-32px);
}

.sis-matters-inner-card:nth-child(2) {
  transform: translateX(32px);
}

.sis-matters-grid:hover .sis-matters-inner-card {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .sis-matters-inner-card {
    transition: none;
  }
}

.sis-matters-inner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sis-matters-inner-title {
  font-size: 15px;
  color: var(--brand-ink, #0f1f1a);
}

.sis-matters-inner-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sis-matters-inner-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0;
  width: fit-content;
  max-width: 100%;
}

.sis-matters-inner-item-icon-box {
  display: inline-flex;
  align-items: center;
}

.sis-matters-inner-item-icon-box svg {
  display: block;
  width: 20px;
  height: 20px;
}

.sis-matters-inner-item-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #F0F9F5;
  color: var(--brand-ink);
}

.sis-matters-inner-item-pill-orange {
  background-color: #FFCF90;
}


/* ============================================================
   SIS page — "Three steps" section
============================================================ */
.sis-steps {
  padding: 80px 0 52px;
  background-color: #ffffff;
}

.sis-steps-cta {
  padding: 10px 20px;
}

.sis-steps-shell {
  position: relative;
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 18px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  background-image: repeating-linear-gradient(to right,
      #E5E7EB 0, #E5E7EB 1px,
      transparent 1px, transparent calc(100% / 6));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}

/* Right-edge guide line (the repeating grid draws the left + inner lines) */
.sis-steps-shell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-color: #E5E7EB;
  pointer-events: none;
}

.sis-step {
  position: relative;
  display: flex;
  align-items: center;
  padding: 32px 0;
}

.sis-step-bordered {
  border-bottom: 1px solid #ECEEF1;
}

/* Only the card & icon slide — the transform is on THEM, not the step — so the
   step's divider line and the background grid stay perfectly fixed while the row
   content moves. Default: grouped toward centre; on hover it slides into place. */
.sis-step-card,
.sis-step-icon {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sis-step-1 {
  justify-content: flex-start;
}

.sis-step-1 .sis-step-card {
  order: 1;
  transform: translateX(150px);
}

.sis-step-1 .sis-step-icon {
  order: 3;
  transform: translateX(150px);
}

.sis-step-2 {
  justify-content: flex-start;
  padding-left: 40px;
}

.sis-step-2 .sis-step-icon {
  order: 1;
  transform: translateX(130px);
}

.sis-step-2 .sis-step-card {
  order: 3;
  transform: translateX(130px);
}

.sis-step-3 {
  justify-content: flex-start;
  padding-left: 200px;
}

.sis-step-3 .sis-step-icon {
  order: 1;
  transform: translateX(-60px);
}

.sis-step-3 .sis-step-card {
  order: 3;
  transform: translateX(-60px);
}

/* ---- Connector between card and icon (fixed-width dashed line + node) ---- */
/* Fixed width so the card <-> icon gap stays constant — the row slides as a
   unit; the dashed line + node just fade in on hover (no gap growth). */
.sis-step-conn {
  order: 2;
  position: relative;
  align-self: center;
  flex: 0 0 auto;
  width: 96px;
  height: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.25s;
}

.sis-step-2 .sis-step-conn,
.sis-step-3 .sis-step-conn {
  width: 46px;
}

.sis-step-conn-line {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 18px;
  border-top: 2px dashed #BFD3C9;
  transform: translateY(-50%);
}

.sis-step-conn-node {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 3px solid #46B481;
  transform: translate(-50%, -50%);
}

/* Step 1: dashed line ends at the node, leaving a gap before the SIS icon */
.sis-step-1 .sis-step-conn-line {
  right: 34px;
}

.sis-step-1 .sis-step-conn-node {
  left: calc(100% - 34px);
}

/* Steps 2 and 3 have NO dashed line/node between the icon and the card — the
   flow is carried by the vertical connectors instead. */
.sis-step-2 .sis-step-conn-line,
.sis-step-2 .sis-step-conn-node,
.sis-step-3 .sis-step-conn-line,
.sis-step-3 .sis-step-conn-node {
  display: none;
}

/* ---- L-shaped dashed connector linking one row to the next ---- */
/* A box drawn with two dashed borders + a rounded corner: a vertical run down
   one side and a short horizontal run at the top, with the node at the bottom. */
.sis-step-drop {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.35s;
}

.sis-step-drop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-style: dashed;
  border-color: #BFD3C9;
  border-width: 0;
}

.sis-step-drop-node {
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 3px solid #46B481;
}

/* Step 1 -> Step 2 : bracket — node at card 2's right edge, a short horizontal
   run out to a vertical line in the gap, which runs up and back toward the SIS
   icon (top + right + bottom dashed borders, rounded on the right corners). */
.sis-step-1 .sis-step-drop {
  left: 655px;
  top: 100%;
  width: 53px;
  height: 115px;
  z-index: 10;
}

.sis-step-1 .sis-step-drop::before {
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-bottom-right-radius: 14px;
}

.sis-step-1 .sis-step-drop-node {
  left: 0;
  transform: translate(-50%, 50%);
  z-index: 10;
  /* node sits above the card */
}

/* Step 2 -> Step 3 : L-connector — vertical drop under the refresh icon, then a
   horizontal run that ends with the node at step 3's H-icon centre (165 + ~51). */
.sis-step-2 .sis-step-drop {
  left: 88px;
  top: 100%;
  width: 65px;
  height: 50%;
  z-index: 4;
}

.sis-step-2 .sis-step-drop::before {
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-bottom-left-radius: 14px;
}

.sis-step-2 .sis-step-drop-node {
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
}

/* Rows slide into place once (persistent) on first hover — card + icon only … */
.sis-steps-shell.is-animated .sis-step-card,
.sis-steps-shell.is-animated .sis-step-icon {
  transform: translateX(0);
}

/* … and the dashed connector lines + nodes fade in once (on the first hover)
   and STAY — they do not hide again when the mouse leaves. */
.sis-steps-shell.is-animated .sis-step-conn,
.sis-steps-shell.is-animated .sis-step-drop {
  opacity: 1;
}

.sis-step-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 22px 47px 22px 28px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  width: 465px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #F6F6F6;
}

.sis-step-num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.7px;
  color: #46B481;
  margin-bottom: 15px;
  line-height: 20px;
}

.sis-step-title {
  font-size: 17px;
  line-height: 1.3;
  color: var(--brand-ink, #0f1f1a);
  letter-spacing: -0.5px;
  line-height: 28px;
  font-weight: 600;
}

.sis-step-text {
  font-size: 15px;
  line-height: 24px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

.sis-step-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sis-step-icon img {
  display: block;
  filter: drop-shadow(0 8px 20px rgba(15, 31, 26, 0.15));
}


/* ============================================================
   SIS page — "SIS Features" 3-step section
============================================================ */
.sis-features .container {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 18px;
  padding: 48px 75px;
}

.sis-feature-block {
  padding: 32px 0 120px;
}

.sis-feature-block:first-child {
  padding-top: 0;
}

.sis-feature-block:last-child {
  padding-bottom: 0;
}

.sis-feature-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}

.sis-feature-head .rp-badge {
  align-self: flex-start;
}

.sis-feature-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 60px;
  align-items: stretch;
}

.sis-feature-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% / 2.90);
  width: 1px;
  background-color: #E5E7EB;
  pointer-events: none;
}

.sis-feature-copy {
  display: flex;
  flex-direction: column;
  max-width: 300px;
}

.sis-feature-small-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  background-color: #F4F4F4;
  margin-bottom: 40px;
}

.sis-feature-small-icon img {
  max-width: 28px;
  max-height: 28px;
  display: block;
}

.sis-feature-desc {
  font-size: 14px;
  line-height: 24px;
  color: var(--brand-ink, #0f1f1a);
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.sis-feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sis-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sis-feature-item-icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.sis-feature-item-text {
  font-size: 14px;
  color: var(--brand-light-gray);
  line-height: 1.4;
}

.sis-feature-media-img {
  width: 100%;
  height: 380px;
}

/* ---------- Animated "Employability Profiles" media (SIS ↔ profile) ---------- */
.sis-pf {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 16px;
  border: 1px solid #EDEFF1;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  overflow: hidden;
}

.sis-pf-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* SIS source block — starts to the left, slides right on hover */
.sis-pf-source {
  transform: translateX(-44px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* green connector — a flex item between the two so it always sits in the gap;
   hidden by default, pops in on hover */
.sis-pf-link {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 -15px;
  border-radius: 9px;
  background: #46B481;
  box-shadow: 0 6px 16px rgba(70, 180, 129, 0.4);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* profile card — starts to the right, slides left on hover */
.sis-pf-profile {
  padding: 14px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  transform: translateX(44px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* verified check badge position — SIS page only (scoped to .sis-pf-profile) */
.sis-pf-verified,
.sis-pf-profile .iup-fp-avatar-badge {
  bottom: -9px;
  right: -9px;
}

/* ---- hover: the two halves converge and the connector appears ---- */
.sis-feature-grid:hover .sis-pf-source {
  transform: translateX(0);
}

.sis-feature-grid:hover .sis-pf-profile {
  transform: translateX(0);
}

.sis-feature-grid:hover .sis-pf-link {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

  .sis-pf-source,
  .sis-pf-profile,
  .sis-pf-link {
    transition: none;
  }
}

/* ---------- Animated "Placement Operations" media (student table) ---------- */
.sis-op {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 16px;
  border: 1px solid #EDEFF1;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sis-op-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 35px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sis-op-meta {
  display: flex;
  gap: 44px;
}

.sis-op-meta-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sis-op-meta-label {
  font-size: 12px;
  color: var(--brand-light-gray);
}

.sis-op-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: #3F4E48;
  background: #EEF1F0;
  border-radius: 6px;
  padding: 5px 10px;
}

.sis-op-table {
  display: flex;
  flex-direction: column;
}

.sis-op-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

/* centre the readiness-score column */
.sis-op-row> :nth-child(2) {
  justify-self: center;
  text-align: center;
}

.sis-op-head {
  padding-top: 0;
  border-bottom: 1px solid #F0F2F1;
}

.sis-op-head span {
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-light-gray);
}

.sis-op-student {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sis-op-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.sis-op-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.sis-op-student-id {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sis-op-student-id strong {
  font-size: 12px;
  color: var(--brand-ink);
}

.sis-op-student-id span {
  font-size: 10px;
  color: var(--brand-light-gray);
}

.sis-op-score {
  --c365-readiness: 2;
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  color: #AEB6B2;
  counter-reset: c365-readiness var(--c365-readiness);
  transition: --c365-readiness 1s ease, color 0.6s ease;
}

.sis-op-score::after {
  content: counter(c365-readiness) '%';
}

.sis-op-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sis-op-skill {
  font-size: 11px;
  font-weight: 600;
  color: #3F4E48;
  background: #F1F3F2;
  border-radius: 6px;
  padding: 4px 9px;
}

/* skeleton placeholder row — bars grow in width on hover */
.sis-op-sk {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: #EDEFEE;
  transition: width 1s ease;
}

.sis-op-sk-name {
  width: 45%;
}

.sis-op-sk-score {
  width: 28px;
}

/* keep the skeleton score bar left-aligned (beats the column-centering rule) */
.sis-op-row>.sis-op-sk-score {
  justify-self: start;
}

.sis-op-sk-chip {
  width: 34px;
  height: 18px;
  border-radius: 6px;
}

/* ---- hover: count up, turn green, and grow the skeleton bars ---- */
.sis-feature-grid:hover .sis-op-score {
  --c365-readiness: 82;
  color: #46B481;
}

.sis-feature-grid:hover .sis-op-sk-name {
  width: 85%;
}

.sis-feature-grid:hover .sis-op-sk-score {
  width: 52px;
}

.sis-feature-grid:hover .sis-op-sk-chip {
  width: 56px;
}

@media (prefers-reduced-motion: reduce) {

  .sis-op-score,
  .sis-op-sk {
    transition: none;
  }
}

/* ---------- Animated "Graduate Outcome Reporting" media (report card) ---------- */
.sis-rp {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 16px;
  border: 1px solid #EDEFF1;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(15, 31, 26, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 31, 26, 0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sis-rp-card {
  width: calc(100% - 20%);
  background: #fff;
  border-radius: 16px;
  padding: 30px 35px;
  box-shadow:
    0 1px 3px rgba(15, 31, 26, 0.04),
    0 8px 24px rgba(15, 31, 26, 0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sis-rp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sis-rp-top-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sis-rp-status {
  font-size: 10px;
  font-weight: 600;
  color: #46B481;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sis-rp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-top: 2px;
}

.sis-rp-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}

.sis-rp-bar {
  height: 8px;
  border-radius: 999px;
  background: #EDEFEE;
  transition: width 1s ease;
}

.sis-rp-bar-1 {
  width: 30%;
}

.sis-rp-bar-2 {
  width: 15%;
}

/* readiness donut ring — spins on hover so the green arc lands on the other side */
.sis-rp-rate {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sis-rp-donut {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(#46B481 var(--pct), #E7EAE9 0);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.sis-rp-donut::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}

.sis-rp-rate-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-green);
}

.sis-rp-files {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sis-rp-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #EAEDEC;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(15, 31, 26, 0.05);
}

.sis-rp-file-icon {
  flex-shrink: 0;
  display: inline-flex;
}

.sis-rp-file-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.sis-rp-file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-ink);
}

.sis-rp-file-ext {
  display: inline-flex;
  flex-shrink: 0;
}

/* extra export rows — hidden by default, fade/slide in on hover (staggered) */
.sis-rp-file-extra {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sis-rp-file-extra:nth-of-type(3) {
  transition-delay: 0.12s;
}

/* ---- hover: grow the status bars and reveal the export rows ---- */
.sis-feature-grid:hover .sis-rp-bar-1 {
  width: 62%;
}

.sis-feature-grid:hover .sis-rp-bar-2 {
  width: 45%;
}

.sis-feature-grid:hover .sis-rp-file-extra {
  opacity: 1;
  transform: translateY(0);
}

.sis-feature-grid:hover .sis-rp-donut {
  transform: rotate(120deg);
}

@media (prefers-reduced-motion: reduce) {

  .sis-rp-bar,
  .sis-rp-file-extra,
  .sis-rp-donut {
    transition: none;
  }
}


/* ============================================================
   LMS page — "How the LMS Integration Works" section
============================================================ */
.lms-steps {
  padding: 60px 0 100px;
}

.lms-steps-shell {
  background-color: #F4F6F7;
  border-radius: 12px;
}

.lms-steps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36px;
  padding: 33px;
  border-bottom: 1px solid #EAEAEA;
}

.lms-steps-head-copy {
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

.lms-steps-head-copy .rp-badge {
  align-self: flex-start;
}

.lms-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 380px;
  overflow: hidden;
}

.lms-step-col {
  position: relative;
  height: 100%;
}

.lms-step-col+.lms-step-col {
  border-left: 1px solid #EAEAEA;
}

.lms-step-icon {
  position: absolute;
  right: 28px;
  bottom: 38px;
  z-index: 3;
  display: inline-flex;
  transition: bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 8px 20px rgba(15, 31, 26, 0.15));
}

.lms-step-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #46B481;
  padding: 18px 28px 24px;
  height: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: each card expands to its own height (staircase effect) */
.lms-steps:hover .lms-step-col-1 .lms-step-card {
  height: 170px;
}

.lms-steps:hover .lms-step-col-2 .lms-step-card {
  height: 300px;
}

.lms-steps:hover .lms-step-col-3 .lms-step-card {
  height: 220px;
}

.lms-steps:hover .lms-step-col-1 .lms-step-icon {
  bottom: 148px;
}

.lms-steps:hover .lms-step-col-2 .lms-step-icon {
  bottom: 278px;
}

.lms-steps:hover .lms-step-col-3 .lms-step-icon {
  bottom: 198px;
}

.lms-step-num {
  display: inline-block;
  background-color: #ffffff;
  color: var(--brand-ink, #0f1f1a);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  letter-spacing: 0.7px;
  box-shadow: 0 4px 10px rgba(15, 31, 26, 0.08);
  flex: 0 0 auto;
}

.lms-step-title {
  font-size: 16px;
  line-height: 1.25;
  color: var(--brand-ink);
  margin: 6px 0 0;
}

.lms-step-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink);
}


/* ============================================================
   LMS page — "Build / Use / Connect" 3 sections
============================================================ */
.lms-build {
  padding: 70px 0;
}

.lms-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: stretch;
}

.lms-build-grid-reversed {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr);
}

.lms-build-grid-reversed .lms-build-copy {
  order: 2;
}

.lms-build-grid-reversed .lms-build-media {
  order: 1;
}

.lms-build-copy {
  background-color: #F4F6F7;
  border-radius: 18px;
  padding: 36px 50px 76px 50px;
  display: flex;
  flex-direction: column;
}

.lms-build-copy-title {
  font-size: 22px;
  line-height: 32px;
  color: var(--brand-ink, #0f1f1a);
  margin-bottom: 16px;
}

.lms-build-features {
  list-style: none;
  padding: 0;
  margin: 60px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lms-build-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--brand-light-gray);
  font-weight: 400;
}

.lms-build-feature-icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.lms-build-media {
  background-color: #E6F4EC;
  border-radius: 18px;
  padding: 32px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lms-build-media-start {
  align-items: flex-start;
  justify-content: flex-start;
}

/* ============================================================
   LMS Build Section — Visual cards (Profile / Workflow / Chart)
============================================================ */
.lms-pcard,
.lms-wcard,
.lms-ccard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lms-pcard-head {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}

.lms-pcard-avatar {
  position: relative;
  width: 100px;
  height: 100px;
  flex: 0 0 auto;
}

.lms-pcard-avatar img {
  width: 100%;
  height: 100%;
}

.lms-pcard-avatar-badge {
  position: absolute;
  right: -19px;
  bottom: -24px;
  display: inline-flex;
}

.lms-pcard-meta {
  display: flex;
  flex-direction: column;
}

.lms-pcard-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
  line-height: 40px;
}

.lms-pcard-sub {
  font-size: 15px;
  color: var(--brand-light-gray);
  line-height: 23px;
  font-weight: 400;
}

.lms-pcard-status {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.06);
}

.lms-pcard-status-meta {
  display: flex;
  flex-direction: column;
}

.lms-pcard-status-label {
  font-size: 11px;
  font-weight: 600;
  color: #1F8C5A;
  text-transform: capitalize;
}

.lms-pcard-status-title {
  font-size: 15px;
  color: var(--brand-ink, #0f1f1a);
  font-weight: 700;
}

.lms-pcard-status-bar {
  display: block;
  width: 60px;
  height: 6px;
  border-radius: 999px;
  background-color: #ECEEF1;
  margin-top: 6px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lms-pcard-status-bar--sm {
  width: 48px;
}

.lms-pcard-status-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.lms-pcard-status-num {
  font-size: 20px;
  font-weight: 700;
  color: #46B481;
}

.lms-pcard-skills {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.06);
  min-width: 140px;
}

.lms-pcard-skills-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
}

.lms-pcard-skills-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.lms-pcard-skill-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-ink, #0f1f1a);
  background-color: #EFEFEF;
  border-radius: 4px;
  padding: 6px 10px;
}

/* --- LMS profile card hover animation --- */
.lms-pcard-status-ring {
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.lms-build-grid:hover .lms-pcard-status-bar {
  width: 150px;
}

.lms-build-grid:hover .lms-pcard-status-bar--sm {
  width: 110px;
}

.lms-build-grid:hover .lms-pcard-status-ring {
  transform: rotate(90deg);
}

.lms-pcard-skill-tag--extra {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.4s ease, padding 0.4s ease;
}

/* Hover-out: collapse the extra skills one by one from the bottom up */
.lms-pcard-skill-tag--extra:nth-child(2) {
  transition-delay: 0.36s;
}

.lms-pcard-skill-tag--extra:nth-child(3) {
  transition-delay: 0.22s;
}

.lms-pcard-skill-tag--extra:nth-child(4) {
  transition-delay: 0.08s;
}

.lms-pcard-skill-tag--extra:nth-child(5) {
  transition-delay: 0s;
}

.lms-build-grid:hover .lms-pcard-skill-tag--extra {
  max-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  opacity: 1;
  transform: translateY(0);
}

/* Reveal the extra skills one by one on hover */
.lms-build-grid:hover .lms-pcard-skill-tag--extra:nth-child(2) {
  transition-delay: 0.08s;
}

.lms-build-grid:hover .lms-pcard-skill-tag--extra:nth-child(3) {
  transition-delay: 0.22s;
}

.lms-build-grid:hover .lms-pcard-skill-tag--extra:nth-child(4) {
  transition-delay: 0.36s;
}

.lms-build-grid:hover .lms-pcard-skill-tag--extra:nth-child(5) {
  transition-delay: 0.50s;
}

.lms-wcard-step {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.06);
}

.lms-wcard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.lms-wcard-contact-avatar {
  width: 50px;
  height: 50px;
}

.lms-wcard-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lms-wcard-contact-meta {
  display: flex;
  flex-direction: column;
  margin-right: 40px;
  gap: 1px;
  /* flex: 1 1 auto; */
  min-width: 0;
}

.lms-wcard-contact-name {
  font-size: 13px;
  color: var(--brand-ink, #0f1f1a);
  font-weight: 700;
}

.lms-wcard-contact-line {
  font-size: 11px;
  color: #6b7280;
}

.lms-wcard-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.lms-wcard-steps-track {
  display: flex;
  align-items: center;
  gap: 0;
}

.lms-wcard-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #ECEEF1;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
}

.lms-wcard-step-done {
  background-color: #46B481;
  border-color: #46B481;
  color: #ffffff;
}

.lms-wcard-step-line {
  width: 10px;
  height: 1px;
  background-color: #ECEEF1;
}

/* --- Workflow card: stage label under the steps --- */
.lms-wcard-stage {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  transform: translateX(-50%) translateY(-3px);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  color: #A064D9;
  text-align: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease;
}

/* --- Workflow card: match badge on the right --- */
.lms-wcard-match {
  margin-left: 30px;
  margin-right: 28px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.lms-wcard-match-label,
.lms-wcard-match-value {
  padding: 5px 12px;
  border-radius: 8px;
  line-height: 1.2;
  font-weight: 700;
}

.lms-wcard-match-label {
  font-size: 11px;
}

.lms-wcard-match-value {
  font-size: 11px;
}

.lms-wcard-match-high .lms-wcard-match-label {
  background-color: #E7E2FA;
  color: #6C5CE7;
}

.lms-wcard-match-high .lms-wcard-match-value {
  background-color: #EEEAFB;
  color: #6C5CE7;
}

.lms-wcard-match-medium .lms-wcard-match-label {
  background-color: #FBEECB;
  color: #D9A21E;
}

.lms-wcard-match-medium .lms-wcard-match-value {
  background-color: #FCF3DC;
  color: #D9A21E;
}

/* --- Workflow card: "Job Offered" status badge under the name --- */
.lms-pcard-status-badge {
  align-self: flex-start;
  margin-top: 8px;
  padding: 3px 14px;
  border-radius: 999px;
  background-color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-green);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-28px);
  transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease, border-width 0.35s ease;
}

/* --- Workflow card: second contact row (hover only) --- */
.lms-wcard-row-hover {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  margin-top: 0;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, transform 0.45s ease, margin-top 0.45s ease;
}

/* ===== Hover reveals (triggered from anywhere in the row) ===== */
.lms-build-grid:hover .lms-wcard-step-active {
  background-color: #A064D9;
  border-color: #A064D9;
  color: #ffffff;
}

.lms-build-grid:hover .lms-wcard-stage {
  max-height: 18px;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lms-build-grid:hover .lms-wcard-match {
  opacity: 1;
  transform: translateX(0);
}

.lms-build-grid:hover .lms-pcard-status-badge {
  max-height: 32px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-width: 1px;
  opacity: 1;
  transform: translateX(0);
}

.lms-build-grid:hover .lms-wcard-row-hover {
  max-height: 90px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 14px;
  transition-delay: 0.12s;
}

.lms-ccard-head {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.06);
  align-self: flex-start;
  margin-bottom: 30px;
}

.lms-ccard-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 35px;
  border-radius: 8px;
  background-color: #46B481;
  flex: 0 0 auto;
}

.lms-ccard-head-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
}

.lms-ccard-head-rate {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: -10px;
  transform: translateX(6px);
  transition: max-width 0.5s ease, opacity 0.4s ease, margin-left 0.5s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.lms-build-grid:hover .lms-ccard-head-rate {
  max-width: 90px;
  opacity: 1;
  margin-left: 30px;
  transform: translateX(0);
}

.lms-ccard-chart {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.06);
}

.lms-ccard-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
  display: block;
  margin-bottom: 16px;
}

.lms-ccard-chart-body {
  display: flex;
  gap: 10px;
  height: 240px;
}

.lms-ccard-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 22px;
  font-variant-numeric: tabular-nums;
}

.lms-ccard-chart-yval {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1;
}

.lms-ccard-chart-bars {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: flex-end;
  padding: 0 4px 22px;
  background-image: repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(25% - 1px),
      #F1F3F4 calc(25% - 1px),
      #F1F3F4 25%);
  background-size: 100% calc(100% - 22px);
  background-position: top left;
  background-repeat: no-repeat;
}

.lms-ccard-chart-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.lms-ccard-chart-bar {
  width: 100%;
  max-width: 70px;
  border-radius: 10px 10px 0 0;
  background-color: #46B481;
  min-height: 4px;
  height: var(--h-default, 0%);
  transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lms-build-grid:hover .lms-ccard-chart-bar {
  height: var(--h-hover, var(--h-default, 0%));
}

.lms-ccard-chart-label {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  line-height: 1;
}

/* ============================================================
   LMS Build Section — Visual cards: mobile responsiveness
============================================================ */
@media (max-width: 575.98px) {
  .lms-build-media {
    padding: 16px;
  }

  /* --- Profile card: shrink oversized head on phones --- */
  .lms-pcard-head {
    gap: 16px;
    margin-bottom: 24px;
  }

  .lms-pcard-avatar {
    width: 72px;
    height: 72px;
  }

  .lms-pcard-avatar-badge {
    right: -12px;
    bottom: -16px;
  }

  .lms-pcard-name {
    font-size: 22px;
    line-height: 30px;
  }

  .lms-build-grid:hover .lms-pcard-status-bar {
    width: 110px;
  }

  .lms-build-grid:hover .lms-pcard-status-bar--sm {
    width: 80px;
  }

  /* --- Workflow card: wrap steps + match below the contact info --- */
  .lms-wcard-row {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  .lms-wcard-contact-meta {
    margin-right: 0;
    min-width: calc(100% - 66px);
  }

  .lms-wcard-match {
    margin-right: 0;
  }

  .lms-build-grid:hover .lms-wcard-row-hover {
    max-height: 240px;
  }

  /* --- Chart card: smaller bar labels so they don't collide --- */
  .lms-ccard-chart-label {
    font-size: 9px;
  }
}

/* ============================================================
   API page — "Why API-Driven Integrations Matter" section
============================================================ */
.api-why {
  padding: 80px 0;
}

.api-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.api-why-copy {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.api-why-btn {
  align-self: flex-start;
  margin-top: 50px;
}

.api-why-media {
  background-color: rgba(243, 244, 246, 0.5);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-why-stack-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding-left: 48px;
}

.api-why-bracket {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 100%;
  pointer-events: none;
  transition: top 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On hover the pills split ±48px, so the bracket grows the same amount at each
   end (via top + height, since height would override bottom) to keep spanning
   from the first pill to the last. */
.api-why-grid:hover .api-why-bracket {
  top: -48px;
  height: calc(100% + 96px);
}

.api-why-stack {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.api-why-pill {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border: 1px solid #ECEEF1;
  border-radius: 12px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(15, 31, 26, 0.06);
  align-self: flex-start;
  width: fit-content;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On hover the API icon reveals from the centre while the four pills split into
   two groups — the top pair slides up, the bottom pair slides down — opening a
   gap in the middle for the icon. */
.api-why-center-icon {
  position: absolute;
  left: 48px;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.api-why-grid:hover .api-why-center-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.api-why-grid:hover .api-why-pill:nth-child(1),
.api-why-grid:hover .api-why-pill:nth-child(2) {
  transform: translateY(-48px);
}

.api-why-grid:hover .api-why-pill:nth-child(3),
.api-why-grid:hover .api-why-pill:nth-child(4) {
  transform: translateY(48px);
}

@media (prefers-reduced-motion: reduce) {

  .api-why-pill,
  .api-why-center-icon,
  .api-why-bracket {
    transition: none;
  }
}

.api-why-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.api-why-pill-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink, #0f1f1a);
}


/* ============================================================
   API page — Automate + Reporting + Developers Note
============================================================ */
.api-automate {
  padding: 60px 0 40px;
}

.api-automate-shell {
  background-color: #F4F6F7;
  border-radius: 18px;
  padding: 40px 80px;
}

.api-combined-divider {
  border: 0;
  margin: 100px 0;
}

.api-automate-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  max-width: 750px;
}

.api-automate-head .rp-badge {
  align-self: flex-start;
}

.api-automate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: stretch;
}

.api-automate-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 30px;
}

.api-automate-btn {
  align-self: flex-start;
  margin-top: auto;
  margin-bottom: 30px;
}

.api-automate-card {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 44px 75px;
  min-height: 260px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05);
}

.api-automate-card-before {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.api-automate-grid:hover .api-automate-card-before {
  transform: translateY(-40px);
}

.api-automate-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.api-automate-card-title {
  font-size: 14px;
  color: var(--brand-ink, #0f1f1a);
}

.api-automate-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.api-automate-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.api-automate-pill {
  display: inline-flex;
  align-items: center;
  background-color: #FFCF90;
  color: var(--brand-ink);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
}

.api-automate-pill-green {
  background-color: #C9F0D9;
}

/* "After" block: anchored to the card bottom, slides up from off-card on hover */
.api-automate-card-after {
  position: absolute;
  left: 75px;
  right: 75px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(130%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.api-automate-grid:hover .api-automate-card-after {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .api-automate-card-after,
  .api-automate-card-before {
    transition: none;
  }
}

.api-reporting-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
}

.api-reporting-visual {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px 32px;
  min-height: 280px;
}

/* All three pieces are absolutely centered via `left`; only `left` (and the
   graph's opacity) animate, so Leon slides left, the API icon slides from the
   card edge to centre, and the graph slides in from the right — no reflow. */
.api-reporting-visual .api-profile-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.api-reporting-grid:hover .api-profile-card {
  left: calc(50% - 140px);
}

.api-reporting-api-icon {
  position: absolute;
  left: calc(50% + 120px);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.api-reporting-grid:hover .api-reporting-api-icon {
  left: calc(50% + 20px);
}

/* Placement-rate graph card: parked off the right edge (clipped), slides in on hover */
.api-reporting-graph {
  position: absolute;
  left: calc(50% + 300px);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 200px;
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(155deg, #4FB488 0%, #3C9D70 100%);
  box-shadow: 0 10px 24px rgba(30, 120, 80, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

.api-reporting-grid:hover .api-reporting-graph {
  left: calc(50% + 160px);
  opacity: 1;
}

.api-reporting-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.api-reporting-graph-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.api-reporting-graph-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.api-reporting-graph-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.82);
}

.api-reporting-graph-donut {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
}

.api-reporting-graph-value {
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {

  .api-reporting-graph,
  .api-reporting-api-icon,
  .api-reporting-visual .api-profile-card {
    transition: none;
  }
}

.api-reporting-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 30px;
}

.api-reporting-copy-text {
  font-size: 15px;
  line-height: 20px;
  color: var(--brand-light-gray);
  margin: 0;
  max-width: 350px;
  font-weight: 400;
}

.api-profile-card {
  background-color: #ffffff;
  border: 1px solid #ECEEF1;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.06);
}

.api-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-profile-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.api-profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #FCB7AC;
  display: block;
}

.api-profile-avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: inline-flex;
}

.api-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.api-profile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.2;
}

.api-profile-sub {
  font-size: 11px;
  color: #6b7280;
}

.api-profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.api-profile-field-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

.api-profile-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: #F3F4F6;
  color: var(--brand-ink, #0f1f1a);
  align-self: flex-start;
}

.api-profile-status {
  margin-top: 6px;
  padding: 7px 37px;
  background-color: #46B481;
  border: 0;
  border-radius: 29px;
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  align-self: flex-start;
}

.api-devs-shell {
  background-color: #F0F9F5;
  border-radius: 12px;
  padding: 13px 46px 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.api-devs-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.api-devs-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 24px;
  border-radius: 52px;
  background-color: var(--brand-ink);
  color: #ffffff;
}

.api-devs-text {
  font-size: 13px;
  line-height: 20px;
  color: var(--brand-ink);
  max-width: 750px;
}

.api-devs-icon-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 117px;
  height: 117px;
  border-radius: 50%;
  background-color: #ffffff;
}

/* =====================================================================
   Pricing page (/new/pricing)
   ===================================================================== */
.pr-hero-wrap {
  padding: 53px 0;
}

.pr-hero {
  background-color: #F0F9F5;
  border-radius: 27px;
  padding: 86px 40px;
  text-align: center;
}

.pr-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.pr-plan-section {
  padding: 46px 0 94px;
}

.pr-price {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-ink);
  margin-bottom: 36px;
}

.pr-price-unit {
  font-size: 1rem;
  font-weight: 500;
}

.pr-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
}

.pr-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--brand-ink);
}

.pr-feature-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.pr-notes {
  background-color: #FBE7D2;
  border-radius: 12px;
  padding: 18px 18px 16px;
  max-width: 538px;
}

.pr-notes-label {
  display: inline-block;
  background-color: #0f1f1a;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.pr-notes-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-ink);
  font-weight: 400;
  max-width: 470px;
}

.pr-calc-card {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 31px 31px 51px;
  box-shadow: 0 10px 30px rgba(15, 31, 26, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pr-calc-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.pr-calc-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 74px;
}

.pr-calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pr-calc-label {
  font-size: 14px;
  color: var(--brand-light-gray);
  font-weight: 500;
  line-height: 20px;
}

.pr-calc-value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 24px;
  color: var(--brand-green);
}

.pr-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 148px;
  background: #E6EAE8;
  outline: none;
  margin: 15px 0;
  cursor: pointer;
}

.pr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--brand-green);
  box-shadow: 0 2px 6px rgba(15, 31, 26, 0.18);
  cursor: pointer;
}

.pr-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--brand-green);
  box-shadow: 0 2px 6px rgba(15, 31, 26, 0.18);
  cursor: pointer;
}

.pr-range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--brand-light-gray);
}

.pr-calc-divider {
  border: 0;
  border-top: 1px solid #EDF0EE;
  margin: 28px 0 22px;
  opacity: 1;
}

.pr-total-label {
  font-size: 0.85rem;
  color: var(--brand-light-gray);
  margin-bottom: 6px;
}

.pr-total {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--brand-ink);
  margin-bottom: 22px;
}

.pr-emp-section {
  padding: 101px 0 118px;
  background: rgba(243, 244, 246, 0.5);
}

.pr-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #E6EAE8;
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pr-card-popular {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #ffffff;
}

.pricing-card-padding {
  padding: 36px;
}

.pr-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0f1f1a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.pr-card-name {
  font-size: 22px;
  font-weight: 700;
}

.pr-card-price {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 40px;
  margin: 42px 0;
}

.pr-card-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand-light-gray);
}

.pr-card-popular .pr-card-price span {
  color: var(--brand-white);
}

.pr-card-btn {
  width: 100%;
  justify-content: center;
}

.pr-card-divider {
  border: 0;
  border-top: 1px solid #D9DBE9;
  margin: 36px 0;
  opacity: 1;
}

.pr-card-popular .pr-card-divider {
  border-top-color: var(--brand-white);
}

.pr-card-features-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 24px;
}

.pr-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-card-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--brand-light-gray)
}

.pr-card-popular .pr-card-feature {
  color: var(--brand-white);
}

.pr-card-feature svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* =====================================================================
   About Us page (/new/about-us)
   ===================================================================== */
.ab-hero {
  background-color: #EAF7F0;
  overflow: hidden;
}

.ab-hero-row {
  align-items: center;
}

.ab-hero-media {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  padding: 0;
}

.ab-hero-img {
  width: 100%;
  height: auto;
  display: block;
}

.ab-story {
  padding: 80px 0 40px;
}

.ab-story-heading {
  font-size: 48px;
  line-height: 48px;
  color: var(--brand-ink);
}

.ab-story-text p {
  font-size: var(--font-desc-block);
  line-height: 25px;
  color: var(--brand-ink);
  font-weight: 400;
}

.ab-story-media {
  margin-top: 80px;
}

.ab-story-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

.ab-bridge {
  background-color: #F1FAF6;
  margin: 40px 0 84px;
}

.ab-bridge-header {
  position: sticky;
  top: 70px;
  z-index: 5;
  background-color: #CEEBDE;
  padding: 22px 0 15px;
}

.ab-bridge-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--brand-ink);
}

.ab-bridge-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.ab-bridge-timeline {
  display: flex;
  gap: 28px;
  position: relative;
}

.ab-bridge-rail {
  position: relative;
  flex: 0 0 32px;
}

.ab-bridge-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--brand-green);
}

.ab-bridge-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--brand-green);
  box-shadow: 0 0 0 6px rgba(20, 183, 137, 0.15);
  z-index: 2;
}

.ab-bridge-items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ab-bridge-item {
  align-items: center;
  padding: 179px 0 75px;
}

.ab-bridge-item:last-child {
  padding-bottom: 179px;
}

.ab-bridge-item-sticky {
  position: sticky;
  top: 90px;
  align-items: center;
  margin: 0;
}

.ab-bridge-copy h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 16px;
  line-height: 36px;
}

.ab-bridge-copy p {
  font-size: 18px;
  line-height: 28px;
  color: var(--brand-light-gray);
  margin: 0;
  font-weight: 400;
  max-width: 500px;
}

.ab-bridge-media img {
  width: 100%;
  height: auto;
  display: block;
}

.ab-believe {
  background-color: var(--brand-white);
  padding: 67px 0;
}

.ab-believe-card {
  height: 100%;
  background-color: var(--brand-white);
  border: 1px solid #F0F9F5;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(15, 31, 26, 0.04);
}

.ab-believe-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #F0F9F5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ab-believe-card h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--brand-ink);
  margin-bottom: 20px;
  max-width: 242px;
  margin-right: auto;
  margin-left: auto;
}

.ab-believe-card p {
  font-size: 13px;
  line-height: 20px;
  color: var(--brand-light-gray);
  margin: 0;
  max-width: 346px;
  margin-left: auto;
  margin-right: auto;
}

.ab-team {
  padding: 115px 0;
}

.ab-team-grid {
  --bs-gutter-x: 32px;
  --bs-gutter-y: 64px;
}

.ab-team-card {
  height: 100%;
  background-color: rgba(243, 244, 246, 0.5);
  padding: 24px;
  text-align: center;
}

.ab-team-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ab-team-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 24px;
  color: var(--brand-ink);
  margin: 0;
}

.ab-team-role {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--brand-green);
  margin-bottom: 12px;
}


.ab-team-desc {
  font-size: 0.9rem;
  line-height: 24px;
  font-weight: 400;
  color: var(--brand-light-gray);
  margin: 0 auto;
  max-width: 200px;
}

/* ============================================================ */
/* CONSOLIDATED RESPONSIVE MEDIA QUERIES                          */
/* ============================================================ */
@media (max-width: 1800px) {
  .platform-illustration {
    margin-top: -700px;
  }
}

@media (max-width: 1600px) {
  .rp-card-outcome {
    right: 10px;
  }

  .platform-illustration {
    margin-top: -600px;
  }
}

@media (max-width: 1400px) {
  .container {
    padding: 0 4rem;
  }

  .pr-advantage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .real-problem.is-visible .rp-card-measured {
    left: 25px;
  }

  .rp-card-managed {
    left: 49%;
  }

  .rp-card-outcome {
    right: -55px;
  }

  .what-is-section {
    background-size: 55% 100%;
    background-position: right center;
  }

  .platform-pillar-1,
  .platform-pillar-2,
  .platform-pillar-3,
  .platform-pillar-4 {
    transform: translateX(0) !important;
  }

  .platform-illustration {
    margin-top: -500px;
  }

  .oo-hero-visual-content {
    padding: 50px;
  }

  .ge-placement-bg-block {
    padding: 70px 40px 0 50px;
  }

  .plat-eco-bg {
    margin-top: -15%;
  }

  .plat-eco-card-classe,
  .plat-eco-card-hiree {
    margin-right: 0;
    margin-left: 0;
  }

  .plat-eco-bg {
    margin-top: -14%;
  }
}

@media (max-width: 1200px) {
  .int-ways-steps {
    padding: 72px 40px;
  }

  .int-ways-step-body {
    gap: 32px;
  }

  .navbar-expand-lg {
    max-width: 100%;
  }

  .navbar-brand {
    margin: 0px !important;
    padding: 0px !important;
  }

  .font-small {
    font-size: 12px !important;
  }

  .btn-brand {
    font-size: 12px !important;
  }

  .container {
    padding: 0 2rem;
  }

  .hero {
    padding: 7rem 0 5rem;
  }

  .site-header .nav-link {
    font-size: 12px;
  }

  .plat-feature {
    padding: 15px;
  }

  /* Two feature cards per row so the placement card keeps enough width for
     its bar + aligned badges. */
  .plat-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rp-diagram {
    height: auto;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .rp-card {
    position: static;
    width: 100% !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .rp-card-managed,
  .rp-card-outcome {
    opacity: 0;
    transform: translateY(20px) !important;
  }

  .real-problem.is-visible .rp-card-managed,
  .real-problem.is-visible .rp-card-outcome {
    opacity: 1;
    transform: translateY(0) !important;
  }

  .rp-arrows {
    display: none;
  }

  .rp-plus {
    display: none;
  }

  .hiw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .platform-illustration {
    margin-top: -400px;
  }

  .itp-outcomes-stat-label {
    font-size: var(--font-sm);
  }

  .oo-hero-visual-content {
    padding: 30px;
  }

  .oo-intel-copy {
    padding: 30px;
  }

  .int-hero {
    padding: 40px 0;
  }

  .int-hero-shell {
    padding: 28px 22px;
    border-radius: 16px;
  }
}

@media (max-width: 991.98px) {
  .container {
    padding: 0 40px;
  }

  .top-header .left-container .hiree365-logo::after {
    display: none;
  }

  .top-header .left-container {
    padding-left: 5%;
  }

  .top-header .right-container {
    padding-right: 5%;
    font-size: 1rem;
  }

  .navbar-expand-lg {
    max-width: 100%;
  }

  .rp-outcome-pill {
    padding: 6px 15px;
  }

  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 12px;
    margin: 4px 0 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    min-width: 0;
  }

  .nav-item-dropdown.is-open .nav-dropdown {
    display: block;
    transform: none;
  }

  .nav-dropdown::before {
    display: none;
  }

  /* Mega menu collapses into a simple accordion list on small screens */
  .nav-mega,
  .nav-mega--left,
  .nav-mega--right {
    position: static;
    transform: none;
    width: auto;
    margin-top: 4px;
    margin-bottom: 6px;
    padding: 0 0 0 10px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
  }

  .nav-item-dropdown.is-open .nav-mega,
  .nav-item-dropdown.is-open .nav-mega--left,
  .nav-item-dropdown.is-open .nav-mega--right {
    display: block;
    transform: none;
  }

  .nav-mega::before {
    display: none;
  }

  .nav-mega-inner,
  .nav-mega--stacked .nav-mega-inner {
    flex-direction: column;
  }

  .nav-mega--split .nav-mega-main {
    padding-right: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nav-mega-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nav-mega-item {
    padding: 8px 8px;
  }

  .nav-mega-item-desc {
    display: none;
  }

  .nav-mega-feature,
  .nav-mega-callout-cell,
  .nav-mega-callout,
  .nav-mega-footer {
    display: none;
  }

  .block-title {
    font-size: 1.7rem;
    line-height: 35px;
  }

  .what-is-section {
    background-position: center bottom;
    background-size: 100% 50%;
  }

  .new-category-text-margin-top {
    margin-top: 50px;
  }

  .platform-pillars-frame {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-header .navbar-collapse {
    background: #FFFFFF;
    padding: 1rem;
    width: 100%;
    margin-top: 10px;
  }

  .site-header .navbar-nav {
    align-items: flex-start;
  }

  .hero {
    padding: 5.5rem 0 4rem;
  }

  .hero-preview {
    margin-top: 3.5rem;
  }

  .how-it-works {
    padding: 4.5rem 0;
  }

  .bfi {
    padding: 4rem 0;
  }

  .image-display-none {
    display: none;
  }

  .bfi-heading,
  .bfi-subtitle,
  .bfi-cards {
    max-width: 100%;
  }

  .integration-content {
    padding: 2rem;
  }

  .integration {
    padding: 3.5rem 0;
  }

  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }

  .platform-illustration {
    margin-top: -300px;
  }

  .cta-final .cta-final-content {
    padding-bottom: 12rem;
  }

  .hiwp-hero {
    padding-top: 80px;
  }

  .hiwp-stage {
    min-height: auto;
  }


  .hiwp-card-wrap {
    position: static;
    margin: 16px auto;
    display: flex;
    justify-content: center;
  }

  .hiwp-step-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hiwp-step-grid.is-reversed .hiwp-step-mockup-col,
  .hiwp-step-grid.is-reversed .hiwp-step-text-col {
    order: initial;
  }

  .hiwp-step {
    padding: 2.5rem 0;
  }

  .hiwm-panel,
  .hiwm-panel-mint {
    padding: 20px;
  }

  .hiwm-connect-top {
    gap: 12px;
  }

  .hiwm-frame {
    padding: 12px;
  }

  .hiwm-connect .hiwm-frame .hiwm-panel {
    padding: 18px;
  }

  .hiwm-ct-row {
    grid-template-columns: minmax(0, 160px) 1fr;
    gap: 14px;
  }

  .hiwm-map-card {
    width: 80%;
  }

  .hiwm-skillgaps,
  .hiwm-readiness-pill {
    position: static;
    display: inline-flex;
    margin-top: 12px;
    box-shadow: none;
    border: 1px solid #dcefe5;
  }

  .hiwm-engage-tabs {
    flex-direction: column;
  }

  .hiwp-data-section {
    padding: 64px 0 80px;
  }

  .hiwp-data-heading {
    font-size: 32px;
  }

  .hiwp-impl-section {
    padding: 24px 0 80px;
  }

  .hiwp-impl-card {
    padding: 40px 24px;
  }

  .hiwp-impl-weeks {
    grid-template-columns: 1fr;
  }

  .iup-hero {
    padding: 80px 0 0;
  }

  .iup-stage {
    min-height: 0;
  }

  .iup-heading {
    font-size: 46px;
  }

  .iup-card-wrap {
    position: relative;
    inset: auto;
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }

  .iup-features {
    padding: 60px 20px 0;
  }

  .iup-features-header {
    padding: 36px 20px;
  }

  .iup-features-card {
    padding: 24px;
  }

  .iup-features-title {
    font-size: 24px;
  }

  .iup-features-copy {
    padding-left: 0;
    margin-top: 16px;
  }

  .iup-usecases-tab::before {
    display: none;
  }

  .iup-usecases-tab {
    border-left: 1px dashed #d3dcd8;
    border-top: 1px dashed #d3dcd8;
  }

  .iup-usecases-tab:nth-child(odd) {
    border-left: none;
  }

  .iup-usecases-tab:nth-child(-n+2) {
    border-top: none;
  }

  .iuc-card-wrap-left,
  .iuc-card-wrap-right {
    position: static;
    margin: 16px auto;
  }

  .iuc-stage {
    min-height: 0;
  }

  .iuc-careers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .iuc-careers-grid-wide {
    grid-template-columns: 1fr;
  }

  .itp-compliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .oo-hero-visual-wrap {
    justify-content: center;
  }

  .oo-hero-copy {
    text-align: center;
  }

  .oo-hero-copy .iup-heading {
    text-align: center;
  }

  .oo-hero-copy .iup-collage-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .ge-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ge-hero-copy {
    text-align: center;
  }

  .ge-hero-heading,
  .ge-hero-subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .oo-intel {
    padding: 56px 0;
  }

  .oo-intel-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 24px;
  }

  .oo-feature-row,
  .oo-feature-row.is-reversed {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0;
  }

  .oo-feature-row.is-reversed .oo-feature-copy {
    order: 1;
  }

  .oo-feature-row.is-reversed .oo-feature-visual {
    order: 2;
  }

  .oo-intel-scroll {
    height: auto !important;
  }

  .oo-intel-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .oo-intel-viewport {
    overflow: visible;
  }

  .oo-intel-track {
    flex-direction: column;
    transform: none !important;
    height: auto;
    gap: 40px;
  }

  .oo-intel-panel {
    flex: none;
    width: 100%;
    height: auto;
  }

  .oo-intel-panel-inner {
    height: auto;
    grid-template-columns: 1fr;
  }

  .ge-cohort {
    padding: 56px 0;
  }

  .ge-cohort-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ge-cohort-visual {
    justify-content: center;
  }

  .ge-emp {
    padding: 56px 0;
  }

  .ge-emp-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pr-trap {
    padding: 56px 0;
  }

  .pr-trap .row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pr-trap .row::before {
    display: none;
  }

  .pr-trap-card-featured {
    margin-top: 0;
  }

  .pr-advantage {
    padding: 56px 0;
  }

  .pr-accred {
    padding: 48px 0;
  }

  .pr-accred-shell {
    padding: 28px;
  }

  .pr-accred-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ec-employer-card {
    width: 260px;
    top: 50px;
    left: 16px;
    padding: 14px;
  }

  .ec-invite-card {
    width: 220px;
    top: 12px;
    right: 16px;
    padding: 12px;
  }

  .ec-oversight {
    padding: 56px 0;
  }

  .ec-oversight-row {
    grid-template-columns: 1fr;
  }

  .ec-oversight-wide-grid {
    grid-template-columns: 1fr;
  }

  .ec-quality {
    padding: 48px 0;
  }

  .ec-quality-shell {
    padding: 20px;
  }

  .ec-quality-grid {
    grid-template-columns: 1fr;
  }

  .ar-hero-overlay {
    padding: 32px 20px 0;
  }

  .ar-stat-card,
  .ar-monthly-row {
    width: 100%;
    max-width: 360px;
  }

  .ar-derisk {
    padding: 56px 0;
  }

  .ar-derisk-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ar-derisk-card-reversed .ar-derisk-copy,
  .ar-derisk-card-reversed .ar-derisk-media {
    order: initial;
  }

  .ar-derisk-card-reversed .ar-derisk-media {
    order: 0;
  }

  .ar-derisk-copy {
    padding: 8px 4px 0;
  }

  .ar-derisk-media {
    min-height: 260px;
    padding: 18px;
  }

  .sr-hero-overlay {
    padding: 32px 20px 0;
    align-items: flex-start;
  }

  .sr-skills-stack {
    width: 100%;
    max-width: 420px;
  }

  .sr-problem {
    padding: 56px 0;
  }

  .sr-problem-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sr-problem-arrow {
    display: none;
  }

  .sr-problem-table-head,
  .sr-problem-table-row {
    grid-template-columns: 1fr;
  }

  .sr-problem-table-cell {
    padding: 10px 14px;
  }

  .sr-solves {
    padding: 40px 0;
  }

  .sr-solves .container {
    padding: 40px 22px;
    border-radius: 16px;
  }

  .sr-solves-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sr-solves-card-reversed .sr-solves-copy,
  .sr-solves-card-reversed .sr-solves-media {
    order: initial;
  }

  .sr-solves-card-reversed .sr-solves-media {
    order: 0;
  }

  .sr-solves-stack {
    gap: 40px;
  }

  .sr-solves-media {
    min-height: 240px;
  }

  .int-hero-visual {
    min-height: 420px;
  }

  .bbc {
    padding: 40px 0;
  }

  .bbc-card {
    flex-direction: column;
    padding: 28px;
    gap: 24px;
    text-align: left;
  }

  .bbc-stats {
    gap: 28px;
    width: 100%;
  }

  .bbc-media-img {
    max-height: 160px;
  }

  /* stack the aside visual above the steps instead of the 25%/58% split */
  .int-ways-aside.col-3,
  .int-ways-steps.col-7 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .int-ways-sticky {
    position: static;
  }

  .int-ways-aside {
    padding: 24px;
  }

  .int-ways-steps {
    padding: 48px 24px;
  }

  .int-ways-step-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .int-ways-step-copy,
  .int-ways-step-features {
    max-width: 100%;
  }

  .int-ways-step-actions {
    margin-top: 4px;
    width: 100%;
  }

  .int-ways-step-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .int-ways-step-divider {
    margin: 32px 0;
  }

  .int-why {
    padding: 40px 0;
  }

  .int-why-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .c365-hero {
    padding: 40px 0 0;
  }

  .c365-hero-copy {
    margin-bottom: 28px;
  }

  .c365-cases {
    padding: 48px 0;
  }

  .c365-case-card {
    padding: 24px;
  }

  .c365-case-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .c365-case-grid-reversed .c365-case-copy,
  .c365-case-grid-reversed .c365-case-media {
    order: initial;
  }

  .c365-case-media {
    min-height: 320px;
    padding: 18px;
  }

  .c365-eco {
    padding: 48px 0;
  }

  .c365-eco-shell {
    padding: 24px;
  }

  .plat-emp {
    padding: 48px 0;
  }

  .plat-emp-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "image"
      "list";
    gap: 32px;
  }

  .plat-eco-bg {
    height: 320px;
    background-size: cover;
  }

  .plat-eco {
    padding: 56px 0 32px;
  }


  .plat-eco-visual {
    margin-left: 0;
    margin-right: auto;
  }

  /* No hover on touch — keep cards in place and hide the circle */
  .plat-eco-visual:hover .plat-eco-card-classe,
  .plat-eco-visual:hover .plat-eco-card-hiree {
    transform: none;
  }

  .plat-eco-visual::before,
  .plat-eco-visual:hover::before {
    opacity: 0;
  }

  .sis-matters {
    padding: 48px 0;
  }

  .sis-matters-grid {
    grid-template-columns: 1fr;
  }

  .sis-matters-left,
  .sis-matters-right {
    padding: 24px;
  }

  /* no hover on touch — keep the cards full-width and un-staggered */
  .sis-matters-inner-card,
  .sis-matters-inner-card:nth-child(1),
  .sis-matters-inner-card:nth-child(2) {
    width: 100%;
    transform: none;
  }

  .sis-steps {
    padding: 48px 0;
  }

  .sis-steps-shell {
    padding: 20px;
  }

  .sis-step {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 0;
  }

  .sis-step-right .sis-step-card,
  .sis-step-right .sis-step-icon,
  .sis-step-left .sis-step-card,
  .sis-step-left .sis-step-icon {
    grid-column: 1;
    justify-self: start;
    margin: 0;
  }

  .sis-step-card {
    width: 100%;
  }

  /* The connector/slide animation is desktop-only — hide it on small screens */
  .sis-step-conn,
  .sis-step-drop {
    display: none;
  }

  .sis-step-1,
  .sis-step-2,
  .sis-step-3,
  .sis-steps-shell.is-animated .sis-step-1,
  .sis-steps-shell.is-animated .sis-step-2,
  .sis-steps-shell.is-animated .sis-step-3 {
    transform: none;
    padding-left: 0;
    padding-right: 0;
  }

  .sis-features {
    padding: 40px 0;
  }

  .sis-features .container {
    padding: 28px 22px;
  }

  .sis-feature-block {
    padding: 24px 0;
  }

  .sis-feature-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sis-feature-copy {
    padding-right: 0;
    border-right: 0;
    max-width: 100%;
  }

  .lms-steps {
    padding: 40px 0;
  }

  .lms-steps-head {
    flex-direction: column;
    align-items: stretch;
  }

  .lms-steps-grid {
    height: auto;
    min-height: 480px;
    grid-template-columns: repeat(3, 1fr);
  }

  .lms-build {
    padding: 36px 0;
  }

  .lms-build-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .lms-build-copy,
  .lms-build-grid-reversed .lms-build-copy {
    order: 2;
  }

  .lms-build-media,
  .lms-build-grid-reversed .lms-build-media {
    order: 1;
  }

  .lms-build-copy {
    padding: 24px;
  }

  .lms-build-media {
    min-height: 320px;
    padding: 20px;
  }

  .api-why {
    padding: 48px 0;
  }

  .api-why-grid {
    grid-template-columns: 1fr;
  }

  .api-why-copy,
  .api-why-media {
    padding: 24px;
  }

  .api-why-pill {
    align-self: stretch;
  }

  .api-automate-shell {
    padding: 24px;
  }

  .api-automate-grid,
  .api-reporting-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .api-devs-shell {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .api-devs-icon-wrap {
    align-self: flex-end;
  }

  .ab-story-heading {
    font-size: 30px;
    line-height: 37px;
  }

  .ab-story-media {
    margin-top: 40px;
  }
}

@media (max-width: 767.98px) {
  .container {
    padding: 0 20px;
  }

  .hero {
    padding: 4.5rem 0 3rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-preview {
    margin-top: 2.5rem;
  }

  .platform-illustration {
    margin-top: -200px;
  }

  .plat-feature-desc {
    max-width: 100%;
  }

  .plat-feature {
    padding: 18px 33px;
  }

  .plat-features-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .compare {
    padding: 3.5rem 0;
  }

  .employers {
    padding: 3.5rem 0;
  }

  .employers-feature {
    padding: 0;
  }

  .iup-heading {
    font-size: 36px;
  }

  .iup-matters {
    padding: 64px 0 80px;
  }

  .iup-matters-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .int-way,
  .container {
    padding: 40px !important;
  }

  .iup-matters-connector {
    display: none;
  }

  .iup-compare {
    padding: 56px 0 80px;
  }

  .iup-compare-heading {
    font-size: 26px;
  }

  .iup-compare-col {
    padding: 14px 16px;
    font-size: 0.875rem;
  }

  .cta-final .cta-final-content {
    padding-bottom: 8rem;
  }

  .plat-hub {
    padding: 56px 0;
  }

  .plat-hub-cell {
    padding: 14px 18px;
  }

  .plat-hub-cell-user {
    background-color: #F0F9F5;
    font-weight: 700;
  }

  .pr-card-btn {
    padding: 12px;
  }
}

@media (max-width: 575.98px) {
  .int-ways-steps {
    padding: 40px 16px;
  }

  .int-ways-aside {
    padding: 16px;
  }

  .iup-btn-dark {
    width: 100% !important;
  }

  .iup-btn-light {
    width: 100% !important;
  }

  .iuc-hero-secondary-col {
    width: 100% !important;
  }

  .iup-heading {
    font-size: 30px;
    line-height: 38px;
  }

  .int-way,
  .container {
    padding: 20px !important;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-actions .cta-btn-primary,
  .cta-actions .cta-secondary-col {
    width: 100%;
  }

  .cta-actions .cta-btn-primary,
  .cta-actions .iup-btn-light {
    justify-content: center;
  }

  .hiwp-data-actions .integration-cta,
  .hiwp-data-actions .btn-hero-light {
    width: 100%;
  }

  .cta-btn-primary {
    width: 100%;
  }

  .what-is-image-area {
    min-height: auto;
  }

  .platform-pillars-frame {
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
  }

  .hero {
    padding: 3.5rem 0 2.5rem;
  }

  .hero-badge {
    font-size: 0.8125rem;
  }

  .how-it-works {
    padding: 3.5rem 0;
  }

  .bfi {
    padding: 3rem 0;
  }

  .bfi-stats {
    grid-template-columns: 1fr;
  }

  .bfi-chart {
    height: 120px;
  }

  .integration-content {
    padding: 1.5rem;
  }

  .integration-logo-card {
    min-width: 0;
    padding: 12px 14px;
  }

  .platform {
    padding: 3.5rem 0 0;
  }

  .platform-feature {
    padding: 15px;
  }

  .platform-grid {
    gap: 1rem;
  }

  .platform-illustration {
    margin-top: -200px;
  }

  .employers-grid {
    gap: 10px;
  }

  .faq {
    padding: 3.5rem 0;
  }

  .faq-question {
    padding: 16px 18px;
    font-size: 0.95rem;
  }

  .faq-item .faq-answer {
    padding: 0 18px 16px;
  }

  .cta-final {
    padding: 4rem 0 0;
  }

  .hiwp-card-sis,
  .hiwp-card-readiness,
  .hiwp-card-application {
    width: 100%;
    max-width: 320px;
  }

  .iup-usecases {
    padding: 56px 0 80px;
  }

  .block-title {
    font-size: 1.5rem;
    line-height: 30px;
  }

  .iup-usecases-top {
    flex-direction: column;
    padding: 24px 20px 28px;
  }

  .iup-usecases-tab {
    border-left: none;
    border-top: 1px dashed #d3dcd8;
  }

  .iup-usecases-tab:first-child {
    border-top: none;
  }

  .intg-section {
    padding: 64px 0 72px;
  }

  .cta-section {
    padding: 0 0 56px;
  }

  .cta-card {
    padding: 48px 18px 56px;
    border-radius: 12px;
  }

  .cta-heading {
    font-size: 24px;
  }

  .iuc-hero {
    padding: 80px 0 0;
  }

  .iuc-card-active,
  .iuc-card-pipeline {
    width: 100%;
    max-width: 380px;
  }

  .iuc-careers {
    padding: 56px 0 40px;
  }

  .iuc-careers-grid {
    grid-template-columns: 1fr;
  }

  .iuc-careers-card-wide {
    align-items: flex-start;
    min-height: 0;
  }

  .iuc-careers-card-img {
    align-self: center;
  }

  .itp-stat-card {
    flex-direction: column;
  }

  .itp-stat-divider {
    flex: 0 0 1px;
    width: auto;
    height: 1px;
    margin: 0 22px;
    align-self: stretch;
  }

  .itp-export-card {
    width: 100%;
  }

  .itp-compliance {
    padding: 56px 0 40px;
  }

  .itp-compliance-grid {
    grid-template-columns: 1fr;
  }

  .ics-employer-card,
  .ics-students-card {
    width: 100%;
  }

  .ics-employer-grid {
    grid-template-columns: 1fr;
  }

  .oo-dimensions {
    padding: 56px 0;
  }

  .pr-advantage-grid {
    grid-template-columns: 1fr;
  }

  .plat-features {
    padding: 56px 0;
  }

  .plat-features-tabs {
    gap: 8px;
    margin-bottom: 36px;
  }

  .plat-features-tab {
    padding: 7px 18px;
  }

  .plat-eco-card-classe,
  .plat-eco-card-hiree {
    margin-right: 0;
    margin-left: 0;
  }

  .plat-eco-connector {
    right: 50%;
    transform: translate(50%, -50%);
  }

  .pr-hero {
    padding: 48px 18px;
  }
}

@media (max-width: 475px) {
  .iup-heading {
    font-size: 23px;
    line-height: 30px;
  }

  .platform-illustration {
    margin-top: -100px
  }

  .cta-final-heading {
    font-size: 40px;
    line-height: 40px;
  }
}

.blog-page .blog-wrap {
  padding: 48px 0 72px;
}

.blog-page .blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.blog-page .blog-chip {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid #14b789;
  background: #ffffff;
  color: #14b789;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: capitalize;
}

.blog-page .blog-chip:hover {
  background: #f0faf5;
}

.blog-page .blog-chip.is-active {
  background: #14b789;
  color: #ffffff;
}

.blog-page .blog-search {
  margin-bottom: 56px;
}

.blog-page .blog-search-input {
  width: 100%;
  height: 56px;
  padding: 0 26px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #f7f8fa;
  font-size: 15px;
  color: #27272e;
  outline: none;
}

.blog-page .blog-search-input::placeholder {
  color: #9aa1b1;
}

.blog-page .blog-search-input:focus {
  border-color: #14b789;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(20, 183, 137, 0.12);
}

.blog-page .blog-popular {
  margin-bottom: 48px;
}

.blog-page .blog-popular-heading {
  font-size: 27px;
  font-weight: 700;
  color: #091228;
}

.blog-page .blog-popular-card {
  display: block;
  background: #FAFAFA;
  border-radius: 24px;
  padding: 44px 42px 44px 46px;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.blog-page .blog-popular-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.blog-page .blog-popular-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 32px;
  color: #27272e;
  text-decoration: none;
  margin-bottom: 14px;
}

.blog-page .blog-popular-excerpt {
  font-size: 16px;
  color: #6F767E;
  line-height: 24px;
  font-weight: 300;
  margin-bottom: 16px;
}

.blog-page .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-page .blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.blog-page .blog-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #e0e0e0;
  transform: translateY(-2px);
}

.blog-page .blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.blog-page .blog-card-body {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  flex: 1;
}

.blog-page .blog-card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #27272e;
  text-decoration: none;
  margin-bottom: 14px;
}

.blog-page .blog-card-title a,
.blog-page .blog-popular-title a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.blog-page .blog-card-title a:hover,
.blog-page .blog-popular-title a:hover {
  color: #14b789;
}

.blog-page .blog-card-date {
  font-size: 14px;
  color: #6F767E;
  margin-bottom: 14px;
  line-height: 32px;
  font-weight: 400;
}

.blog-page .blog-card-excerpt {
  font-size: 16px;
  color: #6F767E;
  line-height: 24px;
  font-weight: 300;
  margin-bottom: 18px;
  flex: 1;
}

.blog-page .blog-card-readmore {
  font-size: 14px;
  font-weight: 600;
  color: #14b789;
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  cursor: pointer;
}

.blog-page .blog-state {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: 100px 0 60px;
  color: #858d9d;
  font-size: 16px;
}

.blog-page .paginations {
  margin: 48px 0 10px;
  text-align: center;
}

.blog-page .paginations .pager {
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-page .paginations .pager li {
  display: inline-block;
  vertical-align: middle;
}

.blog-page .paginations .pager li a {
  display: block;
  padding: 10px 12px;
  color: #68738d;
  line-height: 26px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.blog-page .paginations .pager li a:hover {
  color: #14b789;
}

.blog-page .paginations .pager li a.pager-number.active {
  color: #14b789;
}

.blog-page .paginations .pager li a.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.blog-page .paginations .pager li a.is-disabled:hover {
  color: #68738d;
}

/* ===================== Glossary listing ===================== */
.glossary-page .glossary-wrap {
  padding: 48px 0;
}

.glossary-page .glossary-heading {
  font-size: 27px;
  font-weight: 700;
  color: #091228;
  margin-bottom: 16px;
}

.glossary-page .glossary-filter {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.glossary-page .glossary-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  background: #0F1729;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  line-height: 24px;
}

/* 
.glossary-page .glossary-all:hover,
.glossary-page .glossary-all.is-active {
  background: #14b789;
} */

.glossary-page .glossary-filter-sep {
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: #e2e5ea;
}

.glossary-page .glossary-letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.glossary-page .glossary-letter {
  min-width: 26px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: #27272e;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.glossary-page .glossary-letter:hover {
  color: #14b789;
}

.glossary-page .glossary-letter.is-active {
  background: #0b1220;
  color: #ffffff;
}

.glossary-page .glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 60px;
}

.glossary-page .glossary-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #ffffff;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.glossary-page .glossary-card:hover {
  border-color: var(--brand-green-soft);
  box-shadow: 0 10px 30px rgba(20, 183, 137, 0.15);
}

.glossary-page .glossary-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #0F1729;
  margin-bottom: 10px;
  letter-spacing: -0.4px;
}

.glossary-page .glossary-card-desc {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--brand-light-gray);
  margin-bottom: 18px;
  flex: 1;
}

.glossary-page .glossary-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 15px;
  border-radius: 6px;
  background: #0F1729;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  transition: background 0.15s ease;
  line-height: 16px;
}

.glossary-page .glossary-card-btn:hover {
  background: #14b789;
  color: #ffffff;
}

.glossary-page .glossary-state {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: 100px 0 60px;
  color: #858d9d;
  font-size: 16px;
}

/* ===================== Glossary detail ===================== */
.glossary-detail-page .gd-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 50vh;
  text-align: center;
  padding: 100px 0 80px;
  color: #858d9d;
}

.glossary-detail-page .gd-back {
  display: inline-block;
  color: #14b789;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 16px;
}

.glossary-detail-page .gd-back:hover {
  color: #0e9871;
}

/* Full-width colored top band behind title / author / description.
   No horizontal padding — the inner .container keeps the content centered
   while the background bleeds edge-to-edge. */
.glossary-detail-page .gl-detail-hero {
  background: #EAF6F1;
  padding: 48px 0 30px;
}

/* When a banner is present the hero extends lower and the body loses its top
   padding, so the banner (pulled up below) straddles the colour boundary.
   Driven by classes — not inline styles — so it stays responsive. */
.glossary-detail-page .gl-detail-hero.has-banner {
  padding-bottom: 150px;
}

.glossary-detail-page .gl-detail-body.has-banner {
  padding-top: 0;
}

.glossary-detail-page .gl-detail-title {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: #091228;
  margin: 0;
}

.glossary-detail-page .gl-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.glossary-detail-page .gl-author-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.glossary-detail-page .gl-author-meta {
  display: flex;
  flex-direction: column;
}

.glossary-detail-page .gl-author-name {
  font-size: 14px;
  font-weight: 500;
  color: #091228;
}

.glossary-detail-page .gl-author-post {
  font-size: 13px;
  color: #6F767E;
}

.glossary-detail-page .gl-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #6F767E;
  margin: 24px 0 0;
}

.glossary-detail-page .gl-detail-body {
  padding: 30px 0 40px;
}

.glossary-detail-page .gl-banner-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  position: relative;
  margin-top: -120px;
}

/* Content (rich HTML) */
.glossary-detail-page .glossary-content {
  color: #27272e;
  font-size: 16px;
  line-height: 1.7;
}

.glossary-detail-page .glossary-content :is(h1, h2, h3, h4) {
  scroll-margin-top: 90px;
}

/* Restore list markers + indentation inside the rendered content, matching
   the campus editor. Froala's froala_style.css handles the rest (blockquotes,
   images, captions); the global `ol, ul { list-style: none }` reset would
   otherwise strip the bullets/numbers. */
.fr-view ol,
.fr-view ul,
.fr-element ol,
.fr-element ul {
  padding-left: 20px;
}

.fr-view ol,
.fr-element ol {
  list-style: decimal;
}

.fr-view ul,
.fr-element ul {
  list-style: disc;
}

.glossary-detail-page .glossary-content a {
  color: #14b789;
}

/* The stored HTML puts every intended gap in explicit <br> blank lines, and
   each list item is its own <p>. Bootstrap's `p { margin-bottom: 1rem }` would
   add an extra gap after every one of those, spacing the dash lines far apart.
   Zero the paragraph margin so spacing comes only from the blank lines —
   matching how the campus frontend renders it. */
.glossary-detail-page .glossary-content p {
  margin: 0;
}

/* Content tables — rounded container. border-collapse must be `separate`
   (with border-spacing 0) so border-radius can actually round the corners. */
.glossary-detail-page .glossary-content table,
.glossary-detail-page .glossary-content table.gl-compare-table {
  /* Force full width + kill any inline width/margin (e.g. the stored
     `width:86%; margin-right:calc(14%)`) that would overflow the column. */
  width: 100% !important;
  margin: 24px 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #E3E6E9;
  border-radius: 12px;
  overflow: hidden;
}

.glossary-detail-page .glossary-content table th,
.glossary-detail-page .glossary-content table td {
  padding: 16px 20px;
  vertical-align: top;
  text-align: left;
  border: none;
  border-bottom: 1px solid #EEF0F2;
  font-size: 15px;
  line-height: 1.5;
}

.glossary-detail-page .glossary-content table tbody tr:last-child td {
  border-bottom: none;
}

.glossary-detail-page .glossary-content table thead th {
  font-weight: 700;
  font-size: 16px;
  color: #1B2124;
  background: #FAFBFC;
  border-bottom: 1px solid #E3E6E9;
}

/* The "good" column = 2nd column: brand-green header + checkmark on each cell */
.glossary-detail-page .glossary-content table.gl-compare-table thead th:nth-child(2) {
  color: #14b789;
}

.glossary-detail-page .glossary-content table.gl-compare-table tbody td:nth-child(2) {
  position: relative;
  padding-left: 42px;
}

.glossary-detail-page .glossary-content table.gl-compare-table tbody td:nth-child(2)::before {
  content: "\2713";
  position: absolute;
  left: 18px;
  top: 16px;
  color: #14b789;
  font-weight: 700;
}

/* Table of Contents (sticky) — pulled up so the card rises into the empty
   space beside the title/description, then sticks while scrolling. */
.glossary-detail-page .gl-toc-sticky {
  position: sticky;
  top: 100px;
  margin-top: -100px;
}

.glossary-detail-page .gl-toc-card {
  padding: 24px;
  border-radius: 16px;
  background: #FAFAFA;
  border: 1px solid #ececec;
}

.glossary-detail-page .gl-toc-title {
  font-size: 15px;
  font-weight: 600;
  color: #6F767E;
  margin-bottom: 16px;
}

.glossary-detail-page .gl-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glossary-detail-page .gl-toc-link {
  font-size: 14px;
  line-height: 1.4;
  color: #515151;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}

.glossary-detail-page .gl-toc-link:hover {
  color: #14b789;
  font-weight: 600;
}

.blog-detail-page .bd-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 50vh;
  text-align: center;
  padding: 100px 0 80px;
  color: #858d9d;
}

.blog-detail-page .bd-state h2 {
  color: #091228;
  margin-bottom: 10px;
}

.blog-detail-page .bd-back {
  display: inline-block;
  margin-top: 16px;
  color: #14b789;
  font-weight: 600;
  text-decoration: none;
}

.blog-detail-page .bd-back:hover {
  text-decoration: underline;
}

.blog-detail-page .blog-detail-banner {
  background: #F0F9F5;
  padding: 70px 20px;
  text-align: center;
}

.blog-detail-page .blog-detail-banner h1 {
  color: var(--brand-green);
  font-weight: 500;
  font-size: 50px;
  line-height: 60px;
  margin: 0 auto;
}

.blog-detail-page .bd-body {
  padding: 64px 0;
}

.blog-detail-page .bd-cover {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 24px;
}

.blog-detail-page .bd-hr {
  border: 0;
  border-top: 1px solid #F0F0F0;
  margin: 30px 0;
}

.blog-detail-page .bd-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #091228;
  margin: 0;
}

.blog-detail-page .blog-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  color: #7c7c7c;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.5px;
}

.blog-detail-page .blog-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.blog-detail-page .bd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.blog-detail-page .bd-tag {
  font-size: 13px;
  color: #14b789;
  background: #f0faf5;
  padding: 6px 14px;
  border-radius: 999px;
  text-transform: capitalize;
}

.blog-detail-page .blog-sidebar-search {
  display: flex;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 30px;
}

.blog-detail-page .blog-sidebar-search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-size: 14px;
}

.blog-detail-page .blog-sidebar-search button {
  border: none;
  background: #14b789;
  color: #fff;
  padding: 0 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.blog-detail-page .blog-sidebar-block {
  margin-bottom: 30px;
}

.blog-detail-page .blog-sidebar-title {
  font-weight: 700;
  font-size: 20px;
  color: #27272e;
  margin-bottom: 14px;
}

.blog-detail-page .blog-sidebar-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
}

.blog-detail-page .blog-sidebar-list li {
  margin-bottom: 10px;
}

.blog-detail-page .blog-sidebar-list a {
  color: #68738d;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

.blog-detail-page .blog-sidebar-list a:hover {
  color: #14b789;
}

.blog-detail-page .blog-post-nav {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #e0e0e0;
}

.blog-detail-page .blog-post-nav-prev,
.blog-detail-page .blog-post-nav-next {
  flex: 1;
  min-width: 0;
}

.blog-detail-page .blog-post-nav-next {
  text-align: right;
  border-left: 1px solid #e0e0e0;
  padding-left: 24px;
}

.blog-detail-page .blog-post-nav a {
  text-decoration: none;
  display: block;
}

.blog-post-nav {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #E0E0E0;
}

.blog-post-nav-prev,
.blog-post-nav-next {
  flex: 1;
  min-width: 0;
}

.blog-post-nav-next {
  text-align: right;
  border-left: 1px solid #E0E0E0;
  padding-left: 24px;
}

.blog-post-nav a {
  text-decoration: none;
  display: block;
}

.blog-post-nav-label {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.5px;
  color: #7C7C7C
}

.blog-post-nav-title {
  font-size: 0.7rem;
  line-height: 1.5;
  color: #E5447F;
}

.blog-post-nav-label:hover,
.blog-post-nav a:hover .blog-post-nav-title {
  color: #000000;
}

.blog-detail-page .bd-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2b3445;
  margin-top: 8px;
}

.blog-detail-page .bd-content p {
  margin: 0 0 1.2em;
}

.blog-detail-page .bd-content h2 {
  font-size: 1.6rem;
  color: #091228;
  font-weight: 700;
  margin: 1.6em 0 0.6em;
}

.blog-detail-page .bd-content h3 {
  font-size: 1.3rem;
  color: #091228;
  font-weight: 600;
  margin: 1.4em 0 0.5em;
}

.blog-detail-page .bd-content a {
  color: #14b789;
  text-decoration: underline;
}

.blog-detail-page .bd-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1em 0;
}

.blog-detail-page .bd-content ul,
.blog-detail-page .bd-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.blog-detail-page .bd-content li {
  margin-bottom: 0.4em;
}

.blog-detail-page .bd-content blockquote {
  margin: 1.4em 0;
  padding: 12px 20px;
  border-left: 4px solid #14b789;
  background: #f0faf5;
  color: #2b3445;
  border-radius: 0 8px 8px 0;
}

.blog-detail-page .bd-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
}

.blog-detail-page .bd-content table td,
.blog-detail-page .bd-content table th {
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
}

@media (max-width: 1400px) {
  .blog-detail-page .blog-detail-banner h1 {
    font-size: 40px;
    line-height: 50px;
  }
}

/* NOTE: max-width media queries must be ordered largest → smallest so the
   narrower rules win the cascade. Keep 991 before 767 before 600. */
@media (max-width: 991px) {
  .blog-page .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .glossary-page .glossary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .glossary-detail-page .gl-toc-sticky {
    position: static;
    margin-top: 32px;
  }

  .blog-detail-page .blog-detail-banner h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .blog-detail-page .bd-body {
    padding-top: 40px;
  }

  .blog-detail-page .blog-sidebar {
    position: static;
    margin-top: 24px;
  }
}

@media (max-width: 767.98px) {
  .blog-detail-page .blog-detail-banner h1 {
    font-size: 18px;
    line-height: 26px;
  }

  .blog-detail-page .blog-detail-banner {
    padding: 30px 20px 30px 20px;
  }

  .blog-page .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-page .blog-popular-card {
    padding: 28px;
  }

  .blog-page .blog-popular-title {
    font-size: 22px;
  }

  .glossary-page .glossary-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .glossary-page .glossary-heading {
    font-size: 32px;
  }

  /* Full-bleed hero/body use `container p-0`, so add side padding here to keep
     content off the screen edges on phones. */
  .glossary-detail-page .gl-detail-hero {
    padding: 28px 16px 24px;
  }

  .glossary-detail-page .gl-detail-hero.has-banner {
    padding-bottom: 90px;
  }

  .glossary-detail-page .gl-detail-body {
    padding: 24px 16px 32px;
  }

  .glossary-detail-page .gl-detail-title {
    font-size: 26px;
  }

  .glossary-detail-page .gl-banner-img {
    margin-top: -70px;
  }

  .glossary-detail-page .glossary-content table th,
  .glossary-detail-page .glossary-content table td {
    padding: 12px 14px;
    font-size: 14px;
  }

  .glossary-detail-page .glossary-content table.gl-compare-table tbody td:nth-child(2) {
    padding-left: 34px;
  }

  .glossary-detail-page .glossary-content table.gl-compare-table tbody td:nth-child(2)::before {
    left: 12px;
    top: 12px;
  }
}

@media (max-width: 600px) {
  .blog-detail-page .blog-post-nav {
    flex-direction: column;
    gap: 16px;
  }

  .blog-detail-page .blog-post-nav-next {
    text-align: left;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #e0e0e0;
    padding-top: 16px;
  }
}

/* ===================== Request-a-demo modal (HubSpot Meetings embed) ===================== */
.demo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(15, 31, 26, 0.55);
  overflow-y: auto;
}

.demo-modal {
  position: relative;
  width: 100%;
  max-width: 920px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 31, 26, 0.25);
  overflow: hidden;
}

.demo-modal .meetings-iframe-container,
.demo-modal .meetings-iframe-container iframe {
  display: block;
  width: 100%;
  min-height: 690px;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {

  .se-net-row-a,
  .se-net-row-b,
  .se-contact,
  .se-contact-av,
  .se-contact-meta strong,
  .se-contact-meta span,
  .se-net-invite {
    transition: none;
  }
}

/* ============================================================
   Accreditation Reporting Module — pure CSS card illustrations
   Each .rm-visual is a bordered box that replaces the old <img>,
   scoped per card by the .rm-visual-<id> modifier.
============================================================ */
.rm-visual {
  position: relative;
  height: 140px;
  margin-bottom: 18px;
  border: 1px solid #ededed;
  border-radius: 12px;
  background-color: #ffffff;
  padding: 16px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.05);
}

/* ----- 1. Multi-year Trends: placement-rate mini card + big % ----- */
.rm-visual-trends {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.rm-tr-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-tr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rm-tr-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rm-tr-meta strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
}

.rm-tr-meta span {
  font-size: 10px;
  color: var(--brand-light-gray);
  line-height: 12px;
}

.rm-tr-tags {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rm-tr-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f4f4f4;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 500;
  color: var(--brand-ink);
  white-space: nowrap;
}

/* extra tags — hidden by default, slide in from the right on card hover */
.rm-tr-tag-extra {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rm-tr-tag-extra:nth-of-type(3) {
  transition-delay: 0.1s;
}

.pr-reporting-card-trends:hover .rm-tr-tag-extra {
  opacity: 1;
  transform: translateX(0);
}

.rm-tr-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--brand-ink);
}

/* placement rate counts up (2% -> valueTo) and turns green on card hover,
   using the shared registered @property --num */
.rm-tr-value {
  font-size: 21px;
  font-weight: 700;
  color: #D6D8DB;
  line-height: 28px;
  margin-left: 4px;
  --num: 2;
  counter-reset: num var(--num);
  transition: --num 0.9s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease;
}

.rm-tr-value::after {
  content: counter(num) "%";
}

.pr-reporting-card-trends:hover .rm-tr-value {
  --num: var(--to);
  color: #2CB58E;
}

@media (prefers-reduced-motion: reduce) {

  .rm-tr-tag-extra,
  .rm-tr-value {
    transition: none;
  }
}

/* ----- 2. Speed to Hire: avatar chips + faint circle ----- */
.rm-visual-hire {
  flex-direction: column;
  align-items: flex-start;
}

.rm-hire-circle {
  position: absolute;
  top: 11%;
  right: 31%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background-color: #EAF6F0;
  z-index: 0;
}

/* green clock badge — scales/fades into the circle centre on hover */
.rm-hire-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #2CB58E;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(44, 181, 142, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pr-reporting-card-Hire:hover .rm-hire-clock {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* "Job Offered" tag above the ghost chip — fades/slides in on hover */
.rm-hire-offer {
  position: absolute;
  right: 3%;
  bottom: 58px;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 20px;
  background-color: #D6F0E4;
  font-size: 7px;
  font-weight: 600;
  color: #1FA574;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.pr-reporting-card-Hire:hover .rm-hire-offer {
  opacity: 1;
  transform: translateX(0);
}

.rm-hire-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 3px 10px 3px 6px;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.04), 0 8px 24px rgba(15, 31, 26, 0.05);
}

.rm-hire-chip-main {
  position: relative;
  z-index: 2;
  margin-top: -8px;
}

.rm-hire-chip-ghost {
  position: absolute;
  right: -20%;
  bottom: 15px;
  z-index: 1;
  opacity: 0.55;
  transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}

/* ghost chip slides left into full view on hover */
.pr-reporting-card-Hire:hover .rm-hire-chip-ghost {
  right: 1%;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  .rm-hire-clock,
  .rm-hire-offer,
  .rm-hire-chip-ghost {
    transition: none;
  }
}

.rm-hire-av {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.rm-hire-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rm-hire-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.rm-hire-meta strong {
  font-size: 10px;
  font-weight: 500;
  color: var(--brand-ink);
  white-space: nowrap;
  line-height: 16px;
}

.rm-hire-meta span {
  font-size: 9px;
  color: var(--brand-light-gray);
  white-space: nowrap;
  font-weight: 400;
  line-height: 13px;
}

.rm-hire-status {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 600;
  color: var(--brand-ink);
}

/* ----- 3. Employer Diversity: donut chart + callout labels ----- */
.rm-visual-diversity {
  align-items: center;
  justify-content: end;
  gap: 4px;
}

.rm-dv-donut {
  flex: 0 0 auto;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  background: conic-gradient(from -35deg,
      #3B82F6 0 13%,
      #83D4C0 13% 20%,
      #F0C64B 20% 30%,
      #46B481 30% 100%);
  -webkit-mask: radial-gradient(circle 33px at 50% 50%, transparent 32px, #000 33px);
  mask: radial-gradient(circle 33px at 50% 50%, transparent 32px, #000 33px);
}

/* callouts sit in the upper-right, lines pointing back toward the ring */
.rm-dv-labels {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rm-dv-label {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

/* pct stacks above the leader line */
.rm-dv-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.rm-dv-pct {
  /* margin-left: 7px; */
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: var(--brand-ink);
}

.rm-dv-line {
  width: 56px;
  height: 0;
  border-top: 1px solid #b9bdc3;
}

/* leader-line tints, scoped to the right-hand callout column */
.rm-dv-labels .rm-dv-label:nth-child(1) .rm-dv-line {
  width: 51px;
  border-top-color: #2B72FB;
}

.rm-dv-labels .rm-dv-label:nth-child(2) .rm-dv-line {
  width: 34px;
  border-top-color: #64BDC6;
}

.rm-dv-labels .rm-dv-label:nth-child(3) .rm-dv-line {
  width: 34px;
  border-top-color: #F0C64B;
}

/* nudge the first (8% / Manufacturing) callout to the right */
.rm-dv-labels .rm-dv-label:nth-child(1) {
  margin-left: -15px;
}

.rm-dv-name {
  font-size: 9px;
  line-height: 14px;
  font-weight: 500;
  color: var(--brand-ink);
  white-space: nowrap;
  transform: translateY(2px);
}

/* ---- Employer Diversity hover: donut rotates + extra callouts appear ---- */
.rm-dv-donut {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.pr-reporting-card-diversity:hover .rm-dv-donut {
  transform: rotate(65deg);
}

/* left-hand "Technology" callout — mirrored, sits left of the donut */
.rm-dv-label-left {
  position: absolute;
  left: 6px;
  top: 52px;
  z-index: 2;
}

.rm-dv-label-left .rm-dv-lead {
  align-items: flex-end;
}

.rm-dv-label-left .rm-dv-line {
  width: 30px;
  border-top-color: #46B481;
}

/* extra callouts (Infrastructure on the right, Technology on the left) are
   hidden by default and fade/slide in on hover */
.rm-dv-extra {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.rm-dv-labels .rm-dv-extra {
  transform: translateX(12px);
}

.rm-dv-label-left.rm-dv-extra {
  transform: translateX(-12px);
}

.pr-reporting-card-diversity:hover .rm-dv-extra {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {

  .rm-dv-donut,
  .rm-dv-extra {
    transition: none;
  }
}

/* ----- 4. Skills Gap Analysis: legend + gap bar + critical row ----- */
.rm-visual-skills {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.rm-sk-panel {
  /* background-color: #f7f7f7;
  border-radius: 10px;
  padding: 12px 13px; */
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rm-sk-legend {
  display: flex;
  gap: 16px;
}

.rm-sk-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 500;
  color: var(--brand-ink);
}

.rm-sk-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.rm-sk-leg-dot-green {
  background-color: #46B481;
}

.rm-sk-leg-dot-amber {
  background-color: #FFE5C7;
}

.rm-sk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rm-sk-skill {
  font-size: 10px;
  color: var(--brand-ink);
}

.rm-sk-gap {
  font-size: 11px;
  font-weight: 600;
  color: #EC6D70;
}

.rm-sk-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background-color: #e7e7e7;
  overflow: hidden;
}

/* two stacked fills: amber (Employer Demand) behind, green (Student Level) on top */
.rm-sk-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--fill-from);
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.rm-sk-fill-amber {
  z-index: 1;
  background-color: #FFE5C7;
}

.rm-sk-fill-green {
  z-index: 2;
  background-color: #46B481;
}

/* on hover both bars grow toward their target widths */
.pr-reporting-card-skills-gap:hover .rm-sk-fill {
  width: var(--fill-to);
}

.rm-sk-bottom {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 20px;
  padding: 0 4px;
}

.rm-sk-bottom-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-ink);
}

.rm-sk-bottom-val {
  font-size: 16px;
  font-weight: 700;
  color: #CFD1D4;
  --num: 0;
  counter-reset: num var(--num);
  transition: --num 0.9s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s ease;
}

.rm-sk-bottom-val::after {
  content: counter(num) "%";
}

/* on hover the critical-gap value counts up and turns red */
.pr-reporting-card-skills-gap:hover .rm-sk-bottom-val {
  --num: var(--to);
  color: #EC6D70;
}

@media (prefers-reduced-motion: reduce) {

  .rm-sk-fill,
  .rm-sk-bottom-val {
    transition: none;
  }
}

/* ----- 5. Standard Formats: PDF / CSV / XLSX file icons ----- */
.rm-visual-formats {
  padding: 16px;
}

.rm-fm-panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.rm-fm-file {
  width: 60px;
  height: 60px;
  display: inline-flex;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* on hover the outer icons slide apart to create space (middle stays put) */
.pr-reporting-card:hover .rm-fm-file:first-child {
  transform: translateX(-34px);
}

.pr-reporting-card:hover .rm-fm-file:last-child {
  transform: translateX(34px);
}

@media (prefers-reduced-motion: reduce) {
  .rm-fm-file {
    transition: none;
  }
}

.rm-fm-file img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ----- 6. Audit Trail: green bars + verified person ----- */
.rm-visual-audit {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 18px;
}

.rm-au-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-au-bar {
  height: 10px;
  width: 132px;
  border-radius: 999px;
  background-color: #46B481;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.rm-au-bar-short {
  width: 78px;
  background-color: #DDF0E7;
}

.pr-reporting-card-audit-trail:hover .rm-au-bar {
  width: 168px;
}

.pr-reporting-card-audit-trail:hover .rm-au-bar-short {
  width: 120px;
}

.rm-au-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rm-au-av {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
}

.rm-au-av img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.rm-au-check {
  position: absolute;
  right: -17px;
  bottom: -17px;
  display: inline-flex;
}

.rm-au-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  margin-left: 10px;
}

.rm-au-meta strong {
  font-size: 17px;
  line-height: 23px;
  font-weight: 600;
  color: var(--brand-ink);
}

.rm-au-meta span {
  font-size: 11px;
  line-height: 13px;
  font-weight: 400;
  color: var(--brand-ink) !important;
}

.rm-au-role {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: #667085 !important;
  transform: translateY(-3px);
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.pr-reporting-card-audit-trail:hover .rm-au-role {
  max-height: 14px;
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .rm-au-bar,
  .rm-au-role {
    transition: none;
  }
}