/* Stripe-level hero product collage — Velum cyan identity */

.st-stage {
  --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;
  min-height: 22rem;
  margin: 0;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.st-stage__glow {
  position: absolute;
  inset: 18% 12% 12% 22%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(6, 198, 245, 0.07) 0%,
    rgba(6, 198, 245, 0.015) 48%,
    transparent 72%
  );
  filter: blur(52px);
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.st-stage__card {
  --px: 0px;
  --py: 0px;
  position: absolute;
  z-index: 1;
  will-change: transform;
}

.st-stage__card--analytics {
  top: 4%;
  right: 2%;
  width: 48%;
  z-index: 1;
  transform: translate3d(var(--px), var(--py), 0) rotateY(-12deg) rotateX(6deg) translateZ(-40px);
  filter: blur(0.4px);
  opacity: 0.88;
}

.st-stage__card--main {
  top: 10%;
  left: 4%;
  width: 78%;
  z-index: 3;
  transform: translate3d(var(--px), var(--py), 0) rotateY(-8deg) rotateX(4deg) translateZ(0);
}

.st-stage__card--phone {
  bottom: 2%;
  right: 6%;
  width: 34%;
  z-index: 4;
  transform: translate3d(var(--px), var(--py), 0) rotateY(-4deg) rotateX(2deg) translateZ(40px);
}

.st-stage__card--chip {
  top: 18%;
  left: 0;
  z-index: 5;
  transform: translate3d(var(--px), var(--py), 0) translateZ(60px);
}

.st-ui {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 14px 40px rgba(15, 23, 42, 0.1),
    0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.st-ui--panel {
  box-shadow:
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 10px 28px rgba(15, 23, 42, 0.08);
}

.st-ui__chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  background: #F8FAFC;
  border-bottom: 1px solid #F1F5F9;
}

.st-ui__chrome span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #CBD5E1;
}

.st-ui__chrome span:nth-child(1) { background: #FCA5A5; }
.st-ui__chrome span:nth-child(2) { background: #FCD34D; }
.st-ui__chrome span:nth-child(3) { background: #86EFAC; }

.st-ui__chrome em {
  margin-left: 0.45rem;
  flex: 1;
  min-width: 0;
  padding: 0.18rem 0.5rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-style: normal;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-ui__panel {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.st-ui__kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.st-ui__kpi-row span,
.st-ui__kpi {
  padding: 0.4rem;
  border-radius: 0.35rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.st-ui__panel-head {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.st-ui__pill {
  height: 0.55rem;
  border-radius: 99px;
  background: #E2E8F0;
}

.st-ui__pill--live {
  width: 2.8rem;
  background: rgba(6, 198, 245, 0.18);
  border: 1px solid rgba(6, 198, 245, 0.35);
  position: relative;
}

.st-ui__pill--live::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 50%;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: #06C6F5;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(6, 198, 245, 0.2);
}

.st-ui__pill--ghost { width: 1.6rem; }

.st-ui__kpi small {
  font-size: 0.4375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94A3B8;
  line-height: 1;
}

.st-ui__kpi-row b,
.st-ui__kpi b {
  width: auto;
  height: auto;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F172A;
  background: none;
  line-height: 1.1;
}

.st-ui__kpi-row i,
.st-ui__kpi i {
  width: auto;
  height: auto;
  background: none;
}

.st-ui__trend {
  font-size: 0.4375rem;
  font-weight: 600;
  color: #64748B;
  line-height: 1;
}

.st-ui__trend--up { color: #059669; }

.st-ui__feed {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.st-ui__feed-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #EEF2F6;
}

.st-ui__feed-item i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(6, 198, 245, 0.35);
  flex-shrink: 0;
}

.st-ui__feed-item em {
  flex: 1;
  height: 0.28rem;
  border-radius: 2px;
  background: #E2E8F0;
}

.st-ui__spark {
  display: flex;
  align-items: flex-end;
  gap: 0.28rem;
  height: 3.25rem;
  padding: 0.4rem;
  border-radius: 0.35rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.st-ui__spark span {
  flex: 1;
  height: var(--h);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #06C6F5, rgba(6, 198, 245, 0.35));
}

.st-ui__spark--tall {
  height: 7rem;
  flex: 1;
}

.st-ui__viewport {
  position: relative;
  min-height: 14.5rem;
  background: #fff;
}

.st-ui__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.985);
  filter: blur(1.5px);
  transition:
    opacity 650ms var(--st-ease),
    transform 650ms var(--st-ease),
    filter 650ms var(--st-ease),
    visibility 0s linear 650ms;
}

.st-ui__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  filter: none;
  transition-delay: 0s;
  z-index: 1;
}

.st-ui__slide.is-exit {
  opacity: 0;
  visibility: visible;
  transform: translateY(-6px) scale(1.01);
  filter: blur(1px);
  z-index: 0;
}

/* Mock interiors */
.st-mock {
  height: 100%;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.st-mock__nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.st-mock__logo {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.35rem;
  background: linear-gradient(135deg, rgba(6, 198, 245, 0.25), rgba(6, 198, 245, 0.08));
  border: 1px solid rgba(6, 198, 245, 0.25);
  flex-shrink: 0;
}

.st-mock__logo--sm {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.28rem;
}

.st-mock__nav i {
  width: 2.2rem;
  height: 0.32rem;
  border-radius: 99px;
  background: #E2E8F0;
}

.st-mock__nav b {
  margin-left: auto;
  width: 3.4rem;
  height: 1.1rem;
  border-radius: 99px;
  background: #06C6F5;
  box-shadow: 0 4px 14px rgba(6, 198, 245, 0.35);
}

.st-mock__hero-block,
.st-mock__center {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  justify-content: center;
}

.st-mock__center { align-items: center; text-align: center; }

.st-mock__line {
  display: block;
  height: 0.55rem;
  border-radius: 3px;
  background: #0F172A;
}

.st-mock__line--xl { width: 78%; height: 0.85rem; }
.st-mock__line--lg { width: 82%; height: 0.75rem; }
.st-mock__line--md { width: 58%; background: #64748B; height: 0.45rem; }
.st-mock__line--sm { width: 42%; background: #CBD5E1; height: 0.35rem; }

.st-mock__eyebrow {
  width: 4rem;
  height: 0.32rem;
  border-radius: 99px;
  background: rgba(6, 198, 245, 0.4);
}

.st-mock__btn {
  width: 5rem;
  height: 1.35rem;
  margin-top: 0.35rem;
  border-radius: 0.4rem;
  background: #06C6F5;
  box-shadow: 0 6px 16px rgba(6, 198, 245, 0.3);
}

.st-mock__btn--wide { width: 7rem; }

.st-mock__badge {
  width: 3.2rem;
  height: 0.55rem;
  border-radius: 99px;
  background: rgba(6, 198, 245, 0.12);
  border: 1px solid rgba(6, 198, 245, 0.28);
}

.st-mock__hero-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.st-mock__btn-ghost {
  width: 3.8rem;
  height: 1.35rem;
  border-radius: 0.4rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.st-mock__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid #F1F5F9;
}

.st-mock__stats span {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.st-mock__stats b {
  width: 70%;
  height: 0.45rem;
  border-radius: 2px;
  background: #0F172A;
}

.st-mock__stats i {
  width: 50%;
  height: 0.28rem;
  border-radius: 2px;
  background: #CBD5E1;
}

.st-mock__trust {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.st-mock__trust-text {
  flex: 1;
  height: 0.32rem;
  border-radius: 2px;
  background: #E2E8F0;
  max-width: 5rem;
}

.st-mock__pills {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.st-mock__pills span {
  width: 2.6rem;
  height: 0.65rem;
  border-radius: 99px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.st-mock__grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.st-mock__grid3 i {
  height: 2.4rem;
  border-radius: 0.4rem;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.22rem;
  padding: 0.35rem;
}

.st-mock__grid3 i em {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 0.2rem;
  background: rgba(6, 198, 245, 0.22);
  border: 1px solid rgba(6, 198, 245, 0.2);
}

.st-mock__grid3 i b {
  width: 75%;
  height: 0.28rem;
  border-radius: 2px;
  background: #CBD5E1;
}

.st-mock__avatars {
  display: flex;
  margin-top: 0.5rem;
}

.st-mock__avatars i {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #E2E8F0;
  border: 2px solid #fff;
  margin-left: -0.3rem;
}

.st-mock__avatars i:first-child { margin-left: 0; background: rgba(6, 198, 245, 0.35); }

.st-mock--dash,
.st-mock--admin {
  flex-direction: row;
  padding: 0;
  gap: 0;
}

.st-mock__side {
  width: 2.6rem;
  padding: 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #F1F5F9;
}

.st-mock__side--dark { background: #0F172A; }

.st-mock__side i {
  height: 0.5rem;
  border-radius: 3px;
  background: #CBD5E1;
}

.st-mock__side--dark i { background: rgba(255, 255, 255, 0.15); }
.st-mock__side i.is-on { background: #06C6F5; }

.st-mock__side-avatar {
  margin-top: auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(6, 198, 245, 0.35);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #E2E8F0;
}

.st-mock__dash-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.st-mock__dash-head > span:first-child {
  flex: 1;
  height: 0.55rem;
  border-radius: 2px;
  background: #0F172A;
  max-width: 4rem;
}

.st-mock__search {
  width: 3.2rem;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #E2E8F0;
}

.st-mock__search--wide {
  flex: 1;
  width: auto;
  height: 1.15rem;
}

.st-mock__bell {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 0.28rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  position: relative;
}

.st-mock__bell::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: #06C6F5;
}

.st-mock__main {
  flex: 1;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.st-mock__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.st-mock__kpis span,
.st-mock__kpi {
  height: auto;
  min-height: 2.4rem;
  border-radius: 0.35rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 0.32rem 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.st-mock__kpi small {
  font-size: 0.375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94A3B8;
  line-height: 1;
}

.st-mock__kpi b {
  font-size: 0.5rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.st-mock__kpi > i {
  width: 1.4rem;
  height: 0.22rem;
  border-radius: 99px;
  background: #E2E8F0;
}

.st-mock__kpi > i.is-up { background: rgba(5, 150, 105, 0.35); }
.st-mock__kpi > i.is-down { background: rgba(239, 68, 68, 0.28); }

.st-mock__chart-head {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.st-mock__chart-head span {
  width: 2rem;
  height: 0.45rem;
  border-radius: 99px;
  background: #E2E8F0;
}

.st-mock__chart-head span:first-child {
  background: rgba(6, 198, 245, 0.22);
  border: 1px solid rgba(6, 198, 245, 0.3);
}

.st-mock__activity {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.st-mock__activity > span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.3rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #EEF2F6;
}

.st-mock__activity > span > i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(6, 198, 245, 0.3);
  flex-shrink: 0;
}

.st-mock__activity > span > em {
  flex: 1;
  height: 0.28rem;
  border-radius: 2px;
  background: #E2E8F0;
}

.st-mock__activity > span > b {
  width: 1.2rem;
  height: 0.28rem;
  border-radius: 2px;
  background: #CBD5E1;
}

.st-mock__chart {
  flex: 1;
  border-radius: 0.4rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 0.55rem;
  color: #06C6F5;
  display: flex;
  align-items: flex-end;
}

.st-mock__chart svg { width: 100%; height: 4.25rem; }

.st-mock__toolbar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.st-mock__toolbar i {
  flex: 1;
  height: 1.15rem;
  border-radius: 0.35rem;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.st-mock__toolbar b {
  width: 3.5rem;
  height: 1.15rem;
  border-radius: 0.35rem;
  background: #06C6F5;
}

.st-mock__table {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem;
  border-radius: 0.4rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.st-mock__table--compact { min-height: 0; }

.st-mock__tr {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 0.8fr;
  gap: 0.3rem;
}

.st-mock__table--compact .st-mock__tr {
  grid-template-columns: 1.2fr 1fr 0.7fr;
}

.st-mock__tr i {
  height: 0.32rem;
  border-radius: 2px;
  background: #E2E8F0;
}

.st-mock__tr--h i { background: #CBD5E1; }
.st-mock__tr i.is-a { background: rgba(6, 198, 245, 0.5); }
.st-mock__tr i.is-b {
  width: 1.4rem;
  height: 0.55rem;
  border-radius: 99px;
  background: rgba(5, 150, 105, 0.2);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.st-mock__user {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.st-mock__user::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #E2E8F0;
  flex-shrink: 0;
}

.st-mock__user::after {
  content: "";
  flex: 1;
  height: 0.28rem;
  border-radius: 2px;
  background: #CBD5E1;
}

.st-mock__user--sm::before {
  width: 0.45rem;
  height: 0.45rem;
}

.st-mock__pagination {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  padding-top: 0.15rem;
}

.st-mock__pagination i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #E2E8F0;
}

.st-mock__pagination i.is-on {
  background: #06C6F5;
  transform: scale(1.15);
}

.st-mock--crm { padding: 0.65rem; background: #F1F5F9; }

.st-mock__crm-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.st-mock__crm-head span {
  width: 2.4rem;
  height: 0.65rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #E2E8F0;
}

.st-mock__crm-head b {
  margin-left: auto;
  width: 2.8rem;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: #06C6F5;
}

.st-mock__board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  height: 100%;
}

.st-mock__col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #E2E8F0;
}

.st-mock__col em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  font-size: 0.375rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748B;
  margin-bottom: 0.1rem;
  background: none;
}

.st-mock__col em i {
  font-style: normal;
  font-size: 0.375rem;
  padding: 0.08rem 0.28rem;
  border-radius: 99px;
  background: #E2E8F0;
  color: #475569;
}

.st-mock__col span {
  height: 2.1rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.st-mock__deal {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.32rem 0.35rem !important;
  height: auto !important;
  min-height: 2.35rem;
}

.st-mock__deal > i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #E2E8F0;
}

.st-mock__deal > b {
  width: 75%;
  height: 0.28rem;
  border-radius: 2px;
  background: #0F172A;
}

.st-mock__deal > u {
  width: 50%;
  height: 0.22rem;
  border-radius: 2px;
  background: #CBD5E1;
  text-decoration: none;
}

.st-mock__col span.is-a {
  border-color: rgba(6, 198, 245, 0.45);
  box-shadow: 0 0 0 1px rgba(6, 198, 245, 0.12);
}

.st-mock--app-frame {
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #F8FAFC, #fff);
}

.st-mock__phone-ui {
  width: 9rem;
  height: 13rem;
  border-radius: 1.2rem;
  background: #0F172A;
  border: 2px solid #1E293B;
  padding: 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
}

.st-mock__phone-top {
  width: 40%;
  height: 0.3rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.st-mock__phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-mock__phone-header span {
  width: 45%;
  height: 0.32rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.st-mock__phone-header i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.st-mock__phone-card {
  height: auto;
  min-height: 3rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.st-mock__phone-card small {
  font-size: 0.375rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.st-mock__phone-card b {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.st-mock__phone-card em {
  width: 60%;
  height: 0.22rem;
  border-radius: 99px;
  background: rgba(6, 198, 245, 0.45);
}

.st-mock__phone-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.st-mock__phone-row i {
  aspect-ratio: 1;
  border-radius: 0.45rem;
  background: rgba(6, 198, 245, 0.22);
}

.st-mock__phone-list {
  height: 1.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
}

.st-mock__phone-list--rich {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.4rem;
  height: 1.5rem;
}

.st-mock__phone-list--rich > i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.25rem;
  background: rgba(6, 198, 245, 0.25);
  flex-shrink: 0;
}

.st-mock__phone-list--rich > span {
  flex: 1;
  height: 0.28rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.st-mock__phone-list--rich > b {
  width: 1.1rem;
  height: 0.28rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.st-mock__phone-tab {
  margin-top: auto;
  height: 1.5rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
}

.st-mock__phone-tab > i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.12);
}

.st-mock__phone-tab > i.is-on {
  background: rgba(6, 198, 245, 0.45);
}

.st-mock--analytics { gap: 0.55rem; }

.st-mock__analytics-head {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.st-mock__analytics-head i {
  width: 3.2rem;
  height: 0.85rem;
  border-radius: 99px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.st-mock__analytics-head b {
  margin-left: auto;
  width: 3.5rem;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: #06C6F5;
}

.st-mock__date {
  width: 3.2rem;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #E2E8F0;
}

.st-mock__analytics-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.st-mock__analytics-kpis span {
  padding: 0.35rem;
  border-radius: 0.35rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.st-mock__analytics-kpis small {
  font-size: 0.375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94A3B8;
}

.st-mock__analytics-kpis b {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.st-mock__analytics-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 0.5rem;
  min-height: 0;
}

.st-mock__ring {
  border-radius: 0.45rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem;
  position: relative;
}

.st-mock__ring::before {
  content: "";
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: conic-gradient(#06C6F5 0 68%, #E2E8F0 68% 100%);
  mask: radial-gradient(circle at center, transparent 55%, #000 56%);
  -webkit-mask: radial-gradient(circle at center, transparent 55%, #000 56%);
}

.st-mock__ring-val {
  position: absolute;
  top: 1.15rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.st-mock__funnel {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  width: 100%;
}

.st-mock__funnel i {
  display: block;
  width: var(--w);
  height: 0.32rem;
  margin-inline: auto;
  border-radius: 0.15rem;
  background: linear-gradient(90deg, rgba(6, 198, 245, 0.35), rgba(6, 198, 245, 0.12));
  border: 1px solid rgba(6, 198, 245, 0.2);
}

.st-mock__admin-head {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.st-mock__admin-head > i {
  flex: 1;
  height: 1.1rem;
  border-radius: 0.3rem;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.st-mock__admin-users {
  display: flex;
  margin-left: -0.2rem;
}

.st-mock__admin-users i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #E2E8F0;
  border: 1.5px solid #fff;
  margin-left: -0.2rem;
}

.st-mock__admin-users i:first-child {
  margin-left: 0;
  background: rgba(6, 198, 245, 0.35);
}

.st-mock__admin-head b {
  width: 2.4rem;
  height: 1.1rem;
  border-radius: 0.3rem;
  background: #06C6F5;
  flex-shrink: 0;
}

.st-mock__admin-cards span,
.st-mock__admin-stat {
  height: auto;
  min-height: 2.5rem;
  border-radius: 0.35rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.st-mock__admin-stat small {
  font-size: 0.375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94A3B8;
}

.st-mock__admin-stat b {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #0F172A;
}

.st-mock__admin-stat > i {
  width: 1.2rem;
  height: 0.22rem;
  border-radius: 99px;
  background: #E2E8F0;
}

.st-mock__admin-stat > i.is-up { background: rgba(5, 150, 105, 0.35); }
.st-mock__admin-stat > i.is-warn { background: rgba(245, 158, 11, 0.35); }

.st-mock__admin-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

/* Phone device */
.st-phone {
  border-radius: 1.4rem;
  background: #0F172A;
  border: 2px solid #1E293B;
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.28),
    0 4px 12px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  aspect-ratio: 9 / 18.5;
}

.st-phone__notch {
  width: 42%;
  height: 0.55rem;
  margin: 0.5rem auto 0;
  border-radius: 99px;
  background: #020617;
}

.st-phone__screen {
  padding: 0.7rem 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  height: calc(100% - 1.1rem);
  background: linear-gradient(180deg, #0B1220, #111827);
}

.st-phone__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-phone__avatar {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: rgba(6, 198, 245, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.st-phone__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.st-phone__metrics span {
  padding: 0.32rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.st-phone__metrics small {
  font-size: 0.3125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

.st-phone__metrics b {
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.st-phone__label {
  width: 45%;
  height: 0.3rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.st-phone__value {
  width: 70%;
  height: 0.75rem;
  border-radius: 3px;
  background: #fff;
}

.st-phone__actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.28rem;
}

.st-phone__actions i {
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: rgba(6, 198, 245, 0.22);
  border: 1px solid rgba(6, 198, 245, 0.28);
}

.st-phone__feed {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.st-phone__row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
}

.st-phone__row > i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(6, 198, 245, 0.3);
  flex-shrink: 0;
}

.st-phone__row > em {
  flex: 1;
  height: 0.25rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.st-phone__row > b {
  width: 1rem;
  height: 0.25rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
}

.st-phone__spark {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  height: 1.5rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.st-phone__spark span {
  flex: 1;
  height: var(--h);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, rgba(6, 198, 245, 0.85), rgba(6, 198, 245, 0.2));
}

.st-phone__cta {
  margin-top: auto;
  height: 1.6rem;
  border-radius: 0.45rem;
  background: #06C6F5;
  box-shadow: 0 6px 16px rgba(6, 198, 245, 0.35);
}

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #E2E8F0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: #0F172A;
}

.st-chip__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.st-chip__meta {
  color: #94A3B8;
}

.st-stage__dots {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 6;
  display: flex;
  gap: 0.35rem;
  transform: translateX(-50%);
}

.st-stage__dot {
  width: 0.32rem;
  height: 0.32rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #CBD5E1;
  transition: background 200ms var(--st-ease), transform 200ms var(--st-ease);
}

.st-stage__dot.is-active {
  background: #06C6F5;
  transform: scale(1.3);
}

@media (min-width: 1024px) {
  .st-stage {
    min-height: 28rem;
    aspect-ratio: 1.1 / 1;
  }

  .st-ui__viewport {
    min-height: 17rem;
  }
}

@media (max-width: 767px) {
  .st-stage {
    aspect-ratio: 1.05 / 1;
    min-height: 18rem;
    perspective: 1100px;
    overflow-x: clip;
  }

  .st-stage__card--analytics {
    width: 42%;
    opacity: 0.7;
    filter: blur(0.6px);
  }

  .st-stage__card--main {
    width: 86%;
    left: 2%;
  }

  .st-stage__card--phone {
    width: 30%;
    right: 2%;
  }

  .st-stage__card--chip {
    display: none;
  }

  .st-ui__viewport {
    min-height: 12.5rem;
  }

  .st-mock__board {
    grid-template-columns: repeat(3, 1fr);
  }

  .st-mock__col:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-ui__slide {
    transition: none !important;
    filter: none !important;
  }
}

/* ── Micro typography — unified mock design system ── */
.st-t {
  display: block;
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1.2;
  color: #0F172A;
}

.st-t--2xs { font-size: 0.3125rem; }
.st-t--xs { font-size: 0.375rem; }
.st-t--sm { font-size: 0.4375rem; }
.st-t--md { font-size: 0.5625rem; }

.st-t--nav {
  font-size: 0.375rem;
  font-weight: 500;
  color: #64748B;
  white-space: nowrap;
}

.st-t--muted { color: #94A3B8; }
.st-t--strong { font-weight: 600; }
.st-t--mono { font-family: ui-monospace, monospace; letter-spacing: -0.02em; }

.st-t--h {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: normal;
}

.st-t--h-center { text-align: center; }

.st-t--sub {
  font-size: 0.375rem;
  color: #64748B;
  line-height: 1.35;
  white-space: normal;
}

.st-t--sub-center { text-align: center; }

.st-t--badge {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0.12rem 0.35rem;
  font-size: 0.3125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0891B2;
  background: rgba(6, 198, 245, 0.1);
  border: 1px solid rgba(6, 198, 245, 0.22);
  border-radius: 99px;
}

.st-t--pill,
.st-t--pill-solid,
.st-t--pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.18rem 0.45rem;
  font-size: 0.375rem;
  font-weight: 600;
  border-radius: 99px;
  white-space: nowrap;
}

.st-t--pill-solid {
  color: #fff;
  background: #06C6F5;
  box-shadow: 0 4px 12px rgba(6, 198, 245, 0.28);
}

.st-t--pill-ghost {
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.st-t--pill-compact { padding: 0.14rem 0.35rem; font-size: 0.3125rem; }
.st-t--pill-wide { padding-inline: 0.65rem; }
.st-t--pill-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 1.6rem;
  padding: 0.35rem;
  color: #0F172A;
  font-weight: 600;
  background: #06C6F5;
  border-radius: 0.45rem;
  box-shadow: 0 6px 16px rgba(6, 198, 245, 0.35);
}

.st-t--chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.35rem;
  font-weight: 500;
  color: #64748B;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 99px;
}

.st-t--chip-active {
  color: #0891B2;
  background: rgba(6, 198, 245, 0.12);
  border-color: rgba(6, 198, 245, 0.28);
}

.st-t--status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.1rem 0.3rem;
  font-weight: 600;
  color: #475569;
  background: #E2E8F0;
  border-radius: 99px;
}

.st-t--status-ok {
  color: #047857;
  background: rgba(5, 150, 105, 0.14);
}

.st-t--status-warn {
  color: #B45309;
  background: rgba(245, 158, 11, 0.14);
}

.st-t--on-dark { color: rgba(255, 255, 255, 0.9); }
.st-t--on-dark-muted { color: rgba(255, 255, 255, 0.42); }
.st-t--live { padding-left: 0.55rem; color: #0891B2; font-weight: 600; }
.st-t--ring-lbl { position: absolute; top: 2.35rem; text-align: center; }

.st-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(6, 198, 245, 0.18);
  color: #0891B2;
  font-size: 0.25rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}

.st-avatar--xs { width: 0.45rem; height: 0.45rem; font-size: 0.21875rem; }
.st-avatar--sm { width: 0.55rem; height: 0.55rem; font-size: 0.25rem; }
.st-avatar--on-dark {
  background: rgba(6, 198, 245, 0.28);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.st-mock__nav--rich { gap: 0.28rem; flex-wrap: nowrap; }
.st-mock__nav--rich .st-t--pill { margin-left: auto; }

.st-mock__logo--mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #0891B2;
}

.st-mock__stats--labeled b.st-t,
.st-mock__stats--labeled i.st-t {
  width: auto;
  height: auto;
  background: none;
}

.st-mock__grid3--rich i {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.28rem;
}

.st-mock__grid3--rich i b.st-t {
  width: auto;
  height: auto;
  background: none;
}

.st-mock__pills--rich { justify-content: center; }
.st-mock__pills--rich .st-t--chip { width: auto; height: auto; }

.st-ui__feed-item em.st-t,
.st-ui__pill .st-t {
  flex: 1;
  width: auto;
  height: auto;
  background: none;
}

.st-ui__pill--live,
.st-ui__pill--ghost {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 0.55rem;
  padding: 0.1rem 0.35rem 0.1rem 0.55rem;
}

.st-ui__pill--ghost { padding-left: 0.35rem; }

.st-mock__user--named::before,
.st-mock__user--named::after { display: none; }

.st-mock__user--named {
  gap: 0.22rem;
  min-width: 0;
}

.st-mock__user--named .st-t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-mock__deal > .st-avatar {
  width: 0.45rem;
  height: 0.45rem;
}

.st-mock__deal > .st-t {
  width: auto;
  height: auto;
  background: none;
}

.st-mock__tr > .st-t {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  background: none;
  min-width: 0;
}

.st-mock__tr--h > .st-t { font-weight: 600; }

.st-mock__search--txt {
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
}

.st-mock__date--txt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
}

.st-mock__toolbar--rich,
.st-mock__crm-head--rich,
.st-mock__analytics-head--rich,
.st-mock__admin-head--rich {
  flex-wrap: nowrap;
}

.st-mock__toolbar--rich .st-mock__search--wide { flex: 1; min-width: 0; }
.st-mock__crm-head--rich .st-t--pill { margin-left: auto; }
.st-mock__analytics-head--rich .st-t--pill { margin-left: auto; }
.st-mock__admin-head--rich .st-t--pill { flex-shrink: 0; }

.st-mock__crm-head--rich span.st-t,
.st-mock__toolbar--rich span.st-t,
.st-mock__analytics-head--rich span.st-t {
  width: auto;
  height: auto;
  background: none;
}

.st-mock__chart {
  flex-direction: column;
  align-items: stretch;
}

.st-mock__chart-head .st-t {
  width: auto;
  height: auto;
  background: none;
}

.st-mock__activity > span > em.st-t,
.st-mock__activity > span > b.st-t {
  flex: 1;
  width: auto;
  height: auto;
  background: none;
}

.st-mock__activity > span > b.st-t {
  flex: 0 0 auto;
  text-align: right;
}

.st-mock__side--labeled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.35rem;
}

.st-mock__side-avatar { margin-top: auto; }

.st-mock__phone-header .st-t { width: auto; height: auto; background: none; }
.st-mock__phone-header .st-avatar { width: 0.75rem; height: 0.75rem; }

.st-mock__phone-card em.st-t {
  width: auto;
  height: auto;
  background: none;
}

.st-mock__phone-row--labeled i {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  min-height: 1.35rem;
  padding: 0.15rem 0.1rem;
}

.st-mock__phone-row--labeled i.is-on {
  background: rgba(6, 198, 245, 0.35);
  border: 1px solid rgba(6, 198, 245, 0.4);
}

.st-mock__phone-list--rich > span.st-t,
.st-mock__phone-list--rich > b.st-t {
  flex: 1;
  width: auto;
  height: auto;
  background: none;
}

.st-mock__phone-list--rich > b.st-t {
  flex: 0 0 auto;
  text-align: right;
}

.st-phone__header .st-t { width: auto; height: auto; background: none; }
.st-phone__value.st-t { width: auto; height: auto; background: none; color: #fff; margin: 0; }

.st-phone__actions--labeled i {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  min-height: 1.1rem;
  padding: 0.12rem 0.08rem;
}

.st-phone__actions--labeled i.is-on {
  background: rgba(6, 198, 245, 0.38);
  border-color: rgba(6, 198, 245, 0.45);
}

.st-phone__row > em.st-t,
.st-phone__row > b.st-t {
  flex: 1;
  width: auto;
  height: auto;
  background: none;
}

.st-phone__row > b.st-t {
  flex: 0 0 auto;
  text-align: right;
}

.st-phone__cta.st-t {
  margin-top: auto;
  height: auto;
  min-height: 1.6rem;
}

.st-mock__avatars i {
  font-size: 0.3125rem;
  font-weight: 700;
  font-style: normal;
  color: #0891B2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.st-mock__admin-users i {
  font-size: 0.3125rem;
  font-weight: 700;
  font-style: normal;
}

.st-mock__admin-search {
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  flex: 1;
  min-width: 0;
  height: 0.85rem;
  border-radius: 0.3rem;
  background: #fff;
  border: 1px solid #E2E8F0;
}

.st-mock__bell-count {
  position: absolute;
  top: -0.08rem;
  right: -0.08rem;
  min-width: 0.45rem;
  height: 0.45rem;
  padding: 0 0.12rem;
  font-size: 0.3125rem;
  font-weight: 700;
  line-height: 0.45rem;
  text-align: center;
  color: #fff;
  background: #06C6F5;
  border-radius: 99px;
}

.st-mock__bell { position: relative; }