/* BuzOps V3 members and memberships product page. */

.members-hero-console {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1.35rem;
  background: var(--bz-white);
  box-shadow: 0 2rem 5.5rem rgba(0,0,0,.34);
  color: var(--bz-ink-900);
  transform: perspective(1400px) rotateY(-3.5deg) rotateX(1deg);
  transform-origin: center;
}

.members-hero-console__bar {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--bz-border);
  background: #fbfdfe;
  padding-inline: 1rem;
}

.members-hero-console__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--bz-ink-900);
  font-family: var(--bz-font-display);
  font-size: .7rem;
  font-weight: 700;
}

.members-hero-console__brand::before {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--bz-cyan-500);
  box-shadow: 0 0 0 .22rem var(--bz-cyan-50);
  content: "";
}

.members-hero-console__body {
  display: grid;
  grid-template-columns: 3.4rem minmax(0,1fr);
  min-height: 34rem;
}

.members-hero-console__rail {
  display: grid;
  align-content: start;
  gap: .5rem;
  border-right: 1px solid var(--bz-border);
  background: #fbfdfe;
  padding: 1rem .65rem;
}

.members-hero-console__rail span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: .62rem;
  color: var(--bz-ink-400);
  font-size: .62rem;
  font-weight: 700;
}

.members-hero-console__rail span[aria-current="page"] {
  background: var(--bz-cyan-50);
  color: var(--bz-cyan-700);
}

.members-hero-console__canvas {
  min-width: 0;
  background: var(--bz-canvas);
  padding: 1rem;
}

.members-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.members-console-head strong {
  display: block;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: .9rem;
}

.members-console-head small {
  display: block;
  margin-top: .16rem;
  color: var(--bz-ink-500);
  font-size: .54rem;
}

.members-hero-layout {
  display: grid;
  grid-template-columns: minmax(11rem,.63fr) minmax(0,1.37fr);
  gap: .7rem;
}

.members-hero-profile,
.members-hero-main {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .85rem;
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-xs);
}

.members-hero-profile {
  padding: .85rem;
}

.members-hero-profile__head {
  display: grid;
  justify-items: center;
  margin-bottom: .8rem;
  text-align: center;
}

.members-hero-avatar {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: .55rem;
  place-items: center;
  border-radius: 50%;
  background: var(--bz-cyan-50);
  color: var(--bz-cyan-700);
  font-family: var(--bz-font-display);
  font-size: .78rem;
  font-weight: 700;
}

.members-hero-profile__head strong {
  color: var(--bz-ink-900);
  font-size: .7rem;
}

.members-hero-profile__head small {
  margin-top: .13rem;
  color: var(--bz-ink-500);
  font-size: .5rem;
}

.members-profile-facts {
  display: grid;
  gap: .45rem;
}

.members-profile-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  border-top: 1px solid var(--bz-border);
  padding-top: .48rem;
}

.members-profile-fact span {
  color: var(--bz-ink-500);
  font-size: .5rem;
}

.members-profile-fact strong {
  color: var(--bz-ink-800);
  font-size: .55rem;
  text-align: right;
}

.members-hero-main {
  padding: .75rem;
}

.members-hero-tabs {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--bz-border);
  margin: -.75rem -.75rem .7rem;
  padding: .55rem .75rem;
}

.members-hero-tabs span {
  display: inline-flex;
  min-height: 1.8rem;
  flex: 0 0 auto;
  align-items: center;
  border-radius: var(--bz-radius-pill);
  color: var(--bz-ink-500);
  font-size: .48rem;
  font-weight: 600;
  padding: .35rem .52rem;
}

.members-hero-tabs span:first-child {
  background: var(--bz-ink-950);
  color: var(--bz-white);
}

.members-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .5rem;
  margin-bottom: .55rem;
}

.members-hero-metric {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .68rem;
  background: #fcfdfe;
  padding: .62rem;
}

.members-hero-metric small {
  display: block;
  overflow: hidden;
  color: var(--bz-ink-500);
  font-size: .45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.members-hero-metric strong {
  display: block;
  margin-top: .22rem;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: .84rem;
}

.members-hero-stack {
  display: grid;
  gap: .48rem;
}

.members-hero-plan {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--bz-border);
  border-radius: .68rem;
  background: #fcfdfe;
  padding: .58rem;
}

.members-hero-plan__icon {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: .5rem;
  background: var(--plan-soft,var(--bz-cyan-50));
  color: var(--plan-ink,var(--bz-cyan-700));
  font-size: .5rem;
  font-weight: 700;
}

.members-hero-plan strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .55rem;
}

.members-hero-plan small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .45rem;
}

.members-product-summary {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .6rem;
  margin-bottom: .7rem;
}

.members-summary-card {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .76rem;
  background: var(--bz-white);
  padding: .7rem;
}

.members-summary-card small {
  display: block;
  overflow: hidden;
  color: var(--bz-ink-500);
  font-size: .5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.members-summary-card strong {
  display: block;
  margin-top: .25rem;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1rem;
}

.members-summary-card span {
  display: block;
  margin-top: .25rem;
  color: #087a59;
  font-size: .48rem;
  font-weight: 600;
}

.members-overview-grid {
  display: grid;
  grid-template-columns: minmax(12rem,.65fr) minmax(0,1.35fr);
  gap: .7rem;
}

.members-overview-profile,
.members-overview-activity {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .85rem;
  background: var(--bz-white);
  padding: .85rem;
}

.members-overview-profile__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.members-overview-profile__head strong {
  display: block;
  color: var(--bz-ink-900);
  font-size: .68rem;
}

.members-overview-profile__head small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .52rem;
}

.members-detail-list {
  display: grid;
  gap: .5rem;
}

.members-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--bz-border);
  padding-top: .55rem;
}

.members-detail-row span {
  color: var(--bz-ink-500);
  font-size: .54rem;
}

.members-detail-row strong {
  color: var(--bz-ink-800);
  font-size: .58rem;
  text-align: right;
}

.members-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .7rem;
}

.members-panel-title strong {
  color: var(--bz-ink-900);
  font-size: .64rem;
}

.members-timeline {
  display: grid;
  gap: .55rem;
}

.members-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
  gap: .55rem;
}

.members-timeline-item:not(:last-child)::after {
  position: absolute;
  top: 1.55rem;
  bottom: -.5rem;
  left: .68rem;
  width: 1px;
  background: var(--bz-border);
  content: "";
}

.members-timeline-item__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border-radius: 50%;
  background: var(--timeline-soft,var(--bz-cyan-50));
  color: var(--timeline-ink,var(--bz-cyan-700));
  font-size: .45rem;
  font-weight: 700;
}

.members-timeline-item strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .56rem;
}

.members-timeline-item small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .48rem;
}

.members-timeline-item time {
  color: var(--bz-ink-400);
  font-size: .46rem;
  white-space: nowrap;
}

.members-plan-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .65rem;
}

.members-plan-card {
  min-width: 0;
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  padding: .85rem;
}

.members-plan-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.members-plan-card__head strong {
  display: block;
  color: var(--bz-ink-900);
  font-size: .68rem;
}

.members-plan-card__head small {
  display: block;
  margin-top: .12rem;
  color: var(--bz-ink-500);
  font-size: .5rem;
}

.members-plan-card__facts {
  display: grid;
  gap: .45rem;
}

.members-plan-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  border-top: 1px solid var(--bz-border);
  padding-top: .45rem;
}

.members-plan-fact span,
.members-plan-fact strong {
  font-size: .52rem;
}

.members-plan-fact span { color: var(--bz-ink-500); }
.members-plan-fact strong { color: var(--bz-ink-800); }

.members-service-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .65rem;
}

.members-service-card {
  min-height: 9.5rem;
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  padding: .85rem;
}

.members-service-card__icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: .7rem;
  place-items: center;
  border-radius: .62rem;
  background: var(--service-soft,var(--bz-cyan-50));
  color: var(--service-ink,var(--bz-cyan-700));
  font-size: .55rem;
  font-weight: 700;
}

.members-service-card strong {
  display: block;
  color: var(--bz-ink-900);
  font-size: .65rem;
}

.members-service-card p {
  margin: .25rem 0 .7rem;
  color: var(--bz-ink-500);
  font-size: .52rem;
  line-height: 1.45;
}

.members-service-progress {
  height: .35rem;
  overflow: hidden;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-ink-100);
}

.members-service-progress span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--progress-color,var(--bz-cyan-500));
}

.members-service-card small {
  display: block;
  margin-top: .4rem;
  color: var(--bz-ink-500);
  font-size: .48rem;
}

.members-activity-layout {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(12rem,.85fr);
  gap: .7rem;
}

.members-activity-chart,
.members-engagement-card {
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  padding: .85rem;
}

.members-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.members-chart-head strong {
  color: var(--bz-ink-900);
  font-size: .64rem;
}

.members-chart-head span {
  color: var(--bz-ink-400);
  font-size: .48rem;
}

.members-visit-bars {
  display: flex;
  min-height: 9.5rem;
  align-items: end;
  gap: .36rem;
  border-bottom: 1px solid var(--bz-border);
  background-image: linear-gradient(to bottom,transparent 24%,var(--bz-border) 25%,transparent 26%,transparent 49%,var(--bz-border) 50%,transparent 51%,transparent 74%,var(--bz-border) 75%,transparent 76%);
  padding: 0 .2rem .15rem;
}

.members-visit-bars span {
  flex: 1;
  height: var(--height);
  border-radius: .22rem .22rem 0 0;
  background: linear-gradient(to top,var(--bz-cyan-700),var(--bz-cyan-300));
}

.members-engagement-score {
  display: grid;
  width: 7rem;
  height: 7rem;
  margin: .65rem auto 1rem;
  place-items: center;
  border: .65rem solid var(--bz-cyan-100);
  border-top-color: var(--bz-cyan-600);
  border-right-color: var(--bz-cyan-500);
  border-radius: 50%;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  transform: rotate(16deg);
}

.members-engagement-score span {
  transform: rotate(-16deg);
}

.members-engagement-facts {
  display: grid;
  gap: .5rem;
}

.members-engagement-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border-top: 1px solid var(--bz-border);
  padding-top: .5rem;
}

.members-engagement-fact span,
.members-engagement-fact strong {
  font-size: .52rem;
}

.members-engagement-fact span { color: var(--bz-ink-500); }
.members-engagement-fact strong { color: var(--bz-ink-800); }

.members-billing-layout {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(11rem,.8fr);
  gap: .7rem;
}

.members-payment-list,
.members-account-card {
  border: 1px solid var(--bz-border);
  border-radius: .82rem;
  background: var(--bz-white);
  padding: .8rem;
}

.members-payment-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px solid var(--bz-border);
  padding-block: .58rem;
}

.members-payment-row:last-child { border-bottom: 0; }

.members-payment-row strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .58rem;
}

.members-payment-row small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .46rem;
}

.members-payment-row > span:not(.bz-status) {
  color: var(--bz-ink-700);
  font-size: .54rem;
  font-weight: 600;
}

.members-account-card {
  display: grid;
  align-content: start;
}

.members-account-card__amount {
  margin: .5rem 0 .9rem;
  color: var(--bz-ink-950);
  font-family: var(--bz-font-display);
  font-size: 1.7rem;
  font-weight: 700;
}

.members-account-card__amount small {
  display: block;
  margin-top: .2rem;
  color: var(--bz-ink-500);
  font-family: var(--bz-font-body);
  font-size: .5rem;
  font-weight: 400;
}

.members-architecture {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1rem;
}

.members-architecture-card {
  min-height: 100%;
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-xs);
  padding: 1.3rem;
}

.members-architecture-card__icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  margin-bottom: 1rem;
  place-items: center;
  border-radius: .78rem;
  background: var(--architecture-soft,var(--bz-cyan-50));
  color: var(--architecture-ink,var(--bz-cyan-700));
  font-family: var(--bz-font-display);
  font-size: .68rem;
  font-weight: 700;
}

.members-architecture-card h3 {
  margin-bottom: .45rem;
  font-size: 1.05rem;
}

.members-architecture-card p {
  margin: 0;
  font-size: .78rem;
}

.members-lifecycle {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: .75rem;
}

.members-lifecycle-step {
  position: relative;
  min-height: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--bz-radius-lg);
  background: rgba(255,255,255,.055);
  padding: 1.2rem;
  backdrop-filter: blur(10px);
}

.members-lifecycle-step:not(:last-child)::after {
  position: absolute;
  top: 1.85rem;
  right: -.65rem;
  color: var(--bz-cyan-200);
  content: "→";
  font-size: .75rem;
}

.members-lifecycle-step__index {
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: .9rem;
  place-items: center;
  border-radius: .68rem;
  background: rgba(123,207,225,.14);
  color: var(--bz-cyan-200);
  font-family: var(--bz-font-display);
  font-size: .64rem;
  font-weight: 700;
}

.members-lifecycle-step:nth-child(2) .members-lifecycle-step__index,
.members-lifecycle-step:nth-child(5) .members-lifecycle-step__index {
  background: rgba(255,160,77,.14);
  color: var(--bz-orange-200);
}

.members-lifecycle-step h3 {
  margin-bottom: .4rem;
  color: var(--bz-white);
  font-size: 1rem;
}

.members-lifecycle-step p {
  margin: 0;
  color: #aebccd;
  font-size: .74rem;
}

.members-signal-board {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(16rem,.85fr);
  gap: 1rem;
}

.members-signal-table,
.members-action-queue {
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius-xl);
  background: var(--bz-white);
  box-shadow: var(--bz-shadow-sm);
  padding: 1rem;
}

.members-signal-table__head,
.members-action-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}

.members-signal-table__head strong,
.members-action-queue__head strong {
  color: var(--bz-ink-900);
  font-size: .72rem;
}

.members-signal-row {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) repeat(4,minmax(4.5rem,.7fr));
  align-items: center;
  gap: .55rem;
  border-bottom: 1px solid var(--bz-border);
  padding-block: .65rem;
}

.members-signal-row:last-child { border-bottom: 0; }

.members-signal-row--head {
  color: var(--bz-ink-400);
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.members-signal-row strong {
  color: var(--bz-ink-800);
  font-size: .58rem;
}

.members-signal-row span:not(.bz-status) {
  color: var(--bz-ink-500);
  font-size: .52rem;
}

.members-action-list {
  display: grid;
  gap: .55rem;
}

.members-action-item {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--bz-border);
  border-radius: .72rem;
  background: #fcfdfe;
  padding: .7rem;
}

.members-action-item__icon {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: .55rem;
  background: var(--action-soft,var(--bz-warning-soft));
  color: var(--action-ink,#9a5b00);
  font-size: .52rem;
  font-weight: 700;
}

.members-action-item strong {
  display: block;
  color: var(--bz-ink-800);
  font-size: .58rem;
}

.members-action-item small {
  display: block;
  margin-top: .1rem;
  color: var(--bz-ink-500);
  font-size: .48rem;
}

@media (max-width:72rem) {
  .members-architecture { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .members-lifecycle { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .members-lifecycle-step:not(:last-child)::after { display:none; }
}

@media (max-width:64rem) {
  .members-hero-console { transform:none; }
  .members-signal-board { grid-template-columns:1fr; }
}

@media (max-width:48rem) {
  .members-hero-console__body { grid-template-columns:2.8rem minmax(0,1fr); }
  .members-hero-console__rail { padding-inline:.4rem; }
  .members-hero-layout,
  .members-overview-grid,
  .members-activity-layout,
  .members-billing-layout { grid-template-columns:1fr; }
  .members-product-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .members-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .members-signal-table { overflow-x:auto; }
  .members-signal-row { min-width:40rem; }
  .members-lifecycle { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:36rem) {
  .members-hero-console__body { display:block; min-height:0; }
  .members-hero-console__rail { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--bz-border); padding:.55rem; }
  .members-hero-console__canvas { padding:.75rem; }
  .members-console-head { display:block; }
  .members-console-head .bz-badge { margin-top:.5rem; }
  .members-hero-tabs { margin-inline:-.75rem; }
  .members-plan-grid,
  .members-service-grid,
  .members-architecture,
  .members-lifecycle { grid-template-columns:1fr; }
  .members-payment-row { grid-template-columns:minmax(0,1fr) auto; }
  .members-payment-row .bz-status { grid-column:1/-1; justify-self:start; }
}

@media (prefers-reduced-motion:reduce) {
  .members-hero-console { transform:none!important; }
}