/* =====================================================================
   StaffIntra internal pages (Product / Solutions / Resources sub-pages)
   Blink-style dark hero that fades to white, a highlights grid, alternating
   feature rows with a clean UI mock, and a closing CTA band. Shares the
   design tokens defined in si-design-overlay.css.
   ===================================================================== */

.si-inner-body { background: #ffffff; }

/* ---------------------------------------------------------------- hero */
.si-page-hero {
  position: relative;
  overflow: hidden;
  /* The pricing page's hero ground, by instruction: every sub page runs the
     same deep violet so the floating nav never sits on white. */
  background:
    radial-gradient(120% 90% at 50% -10%, #2f1168 0%, #1b0042 55%, #1b0042 100%);
  padding-top: 180px;
  padding-bottom: 96px;
}
@media (max-width: 991px) { .si-page-hero { padding-top: 140px; padding-bottom: 72px; } }
@media (max-width: 575px) { .si-page-hero { padding-top: 116px; padding-bottom: 56px; } }
/* fade the dark hero into the white body below */
.si-page-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 70%, #ffffff 100%);
  pointer-events: none;
}
.si-page-hero__glow {
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 680px; height: 680px; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,26,254,0.35) 0%, rgba(120,26,254,0) 62%);
  pointer-events: none;
}
.si-page-hero__inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; text-align: center; }
.si-page-eyebrow {
  display: inline-block; margin-bottom: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #c9b6ff;
  padding: 7px 16px; border-radius: 9999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
}
.si-page-title {
  color: #ffffff; font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(44px, 6vw, 84px); line-height: 1.04; margin: 0 0 18px;
  text-wrap: balance;
}
.si-page-sub {
  color: rgba(255,255,255,0.82);
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.6; margin: 0 auto 34px; max-width: 620px;
  text-wrap: balance; text-wrap: pretty;
}
.si-page-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.si-page-hero__inner .si-page-actions { justify-content: center; }
.si-page-actions--center { justify-content: center; }

/* ------------------------------------------------------- highlights grid */
.si-page-highlights { position: relative; z-index: 3; margin-top: -48px; padding-bottom: 24px; }
.si-hl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 991px) { .si-hl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .si-hl-grid { grid-template-columns: 1fr; } }
.si-hl-card {
  background: #ffffff; border: 1px solid #eee7fb; border-radius: 18px;
  padding: 26px 24px; box-shadow: 0 18px 48px rgba(20, 6, 52, 0.08);
}
.si-hl-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: #f3ecff; color: var(--si-primary, #781afe); margin-bottom: 16px;
}
.si-hl-card__title { font-size: 18px; font-weight: 700; color: #1c1330; margin: 0 0 8px; text-wrap: balance; }
.si-hl-card__text { font-size: 14.5px; line-height: 1.55; color: #6b6480; margin: 0; text-wrap: balance; text-wrap: pretty; }

/* ---------------------------------------------------------- feature rows */
.si-page-rows { padding: 64px 0 24px; }
.si-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 44px 0;
}
@media (max-width: 991px) { .si-row { grid-template-columns: 1fr; gap: 32px; } }
.si-row--rev .si-row__text { order: 2; }
@media (max-width: 991px) { .si-row--rev .si-row__text { order: 0; } }
.si-row__title {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: #16112a;
  letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px;
  text-wrap: balance;
}
.si-row__desc { font-size: 16px; line-height: 1.62; color: #5f5875; margin: 0 0 20px; text-wrap: balance; text-wrap: pretty; }
.si-row__points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.si-row__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #35304a; font-weight: 500; }
.si-row__tick { color: var(--si-primary, #781afe); flex: 0 0 auto; margin-top: -1px; }
.si-row__tick svg { width: 20px; height: 20px; }

/* clean UI mock */
.si-row__visual { display: flex; justify-content: center; }
.si-mock {
  width: 100%; max-width: 480px; background: #ffffff; border: 1px solid #ece5fa;
  border-radius: 18px; overflow: hidden; box-shadow: 0 26px 70px rgba(20, 6, 52, 0.14);
}
.si-mock__bar { display: flex; gap: 7px; padding: 14px 16px; background: #faf7ff; border-bottom: 1px solid #f0eafb; }
.si-mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: #d9cef2; }
.si-mock__bar span:nth-child(1) { background: #f0b4c4; }
.si-mock__bar span:nth-child(2) { background: #f4d8a8; }
.si-mock__bar span:nth-child(3) { background: #b7e0c0; }
.si-mock__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.si-mock__line { height: 12px; border-radius: 7px; background: #efe9fb; flex: 1; }
.si-mock__line--lg { height: 20px; width: 62%; background: linear-gradient(90deg, #d9c8ff, #efe9fb); }
.si-mock__line--md { max-width: 78%; }
.si-mock__line--sm { max-width: 55%; }
.si-mock__row { display: flex; align-items: center; gap: 14px; }
.si-mock__chip { width: 38px; height: 38px; border-radius: 11px; background: #f0eafb; flex: 0 0 auto; }
.si-mock__chip--accent { background: linear-gradient(135deg, var(--si-primary, #781afe), #a05bff); }

/* ------------------------------------------------------------- cta band */
.si-page-cta { padding: 40px 0 96px; }
.si-page-cta__inner {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #2a0a5e 0%, #170733 55%, #0c0518 100%);
  border-radius: 28px; padding: 64px 32px; text-align: center;
}
.si-page-cta__title { color: #fff; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; margin: 0 0 14px; text-wrap: balance; }
.si-page-cta__text { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0 auto 30px; text-wrap: balance; text-wrap: pretty; }