:root {
  --bg: #f3f3f5;
  --white: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
  --muted-light: #9a9a9a;
  --line: #e8e8ec;
  --purple: #6d5cff;
  --purple-soft: #f0edff;
  --purple-muted: rgba(109, 92, 255, 0.35);
  --purple-brand: #c5bde8;
  --pink-dot: #e91e8c;
  --sidebar-w: 272px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── App shell ── */
.app {
  display: flex;
  min-height: 100dvh;
  /* flush left so the sidebar touches the edge; the right-hand space is
     .main's padding so its scrollbar sits at the window edge, not inside it */
  padding-inline: 0;
}

/* ── Sidebar ── */
.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  background: #fafafa;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 24px 20px 28px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}

.sidebar.is-collapsed {
  --sidebar-w: var(--sidebar-collapsed-w);
  width: var(--sidebar-collapsed-w);
  flex-basis: var(--sidebar-collapsed-w);
  padding: 24px 14px 28px;
}

.info-card:hover {
  transform: scale(2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding: 0 2px;
  flex-shrink: 0;
}

.sidebar__logo-mark {
  position: relative;
  width: 116px;
  height: 32px;
  flex-shrink: 0;
  transition: width 0.25s ease;
}

.sidebar.is-collapsed .sidebar__logo-mark {
  width: 48px;
}

.sidebar__logo-mark-shapes {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sidebar__logo-mark-brand {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sidebar__logo-mark-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.sidebar.is-collapsed .sidebar__logo-mark-shapes {
  opacity: 0;
  transform: scale(0.92);
}

.sidebar.is-collapsed .sidebar__logo-mark-brand {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.logo-shape {
  display: block;
  opacity: 0.2;
}

.logo-shape--circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple);
}

.logo-shape--square {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--purple);
}

.logo-shape--triangle {
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 32px solid var(--purple);
  opacity: 0.2;
}

.sidebar__bell {
  /* mobile-only notification bell; sits beside the menu toggle */
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.sidebar__bell-icon {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}

.sidebar__panel-btn {
  /* mobile menu toggle only; the mobile block re-enables it */
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #555;
  border-radius: 8px;
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
}

.sidebar__panel-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar__panel-btn svg {
  width: 34px;
  height: 34px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 500;
  color: #a0a0a8;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.sidebar__link-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.sidebar__link-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__link:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #666;
}

.sidebar__link--active {
  background: var(--purple-soft);
  color: var(--purple);
  font-weight: 600;
}

.sidebar__link--soon {
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.sidebar__link--soon:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
}

.sidebar__promo {
  margin-top: 28px;
  padding: 18px 16px 16px;
  border: 1px solid #ebebef;
  border-radius: 10px;
  background: var(--white);
  flex-shrink: 0;
}

.sidebar__promo-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.sidebar__promo-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple);
  display: grid;
  place-items: center;
}

.sidebar__promo-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.sidebar__promo-text {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #888;
}

.sidebar__email {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar__email input {
  width: 100%;
  height: 40px;
  border: 1px solid #e4e4ea;
  border-radius: 10px;
  padding: 0 40px 0 16px;
  background: var(--white);
  outline: none;
  font-size: 12.5px;
  color: var(--ink);
}

.sidebar__email input::placeholder {
  color: #b8b8c0;
}

.sidebar__email input:focus {
  border-color: var(--purple-muted);
}

.sidebar__email-arrow {
  position: absolute;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #888;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.sidebar__email-arrow:hover {
  color: var(--purple);
}

.sidebar__email-status {
  margin: 8px 0 0;
  min-height: 16px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #666;
}

.sidebar__email-status:empty {
  display: none;
}

.sidebar__email-status.is-error {
  color: #c0392b;
}

.sidebar__brand {
  margin-top: 28px;
  padding: 0 6px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar__brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Main ── */
.main {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 36px 2rem 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--bg);
}

/* ── Page header ── */
.page-header__bell {
  width: 52px;
  height: auto;
  border: 0;
  background: transparent;
  color: #444;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 8px;
}

.page-header__bell:hover {
  background: rgba(255, 255, 255, 0.7);
}

.page-header__bell-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.page-header {
  display: flex;
  align-items: flex-start;
  /* the title takes the slack (margin-right: auto below), so the tag
     cluster and the bell keep a fixed gap on any screen width */
  justify-content: flex-start;
  gap: 18px;
  padding-right: 12px;
  position: relative;
}

.page-header__left {
  margin-right: auto;
}

.page-header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.035em;
  display: block;
  line-height: 1.1;
}

/* last word + plus travel together, so the plus never strands on its own line;
   inline-flex centres the plus on the text line instead of the baseline */
.page-header__title-end {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.page-header__add {
  display: grid;
  margin-left: 12px;
  width: 40px;
  height: 40px;
  border: 1.5px solid #dcd4ff;
  border-radius: 50%;
  background: var(--white);
  color: var(--purple);
  cursor: pointer;
  place-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.page-header__add svg {
  width: 24px;
  height: 24px;
}

.page-header__add:hover {
  border-color: var(--purple);
}

.page-header__sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: #888;
  line-height: 1.4;
}

.page-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-top: 8px;
}

/* Header specialty tags */
.specialty-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.specialty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--purple);
}

.specialty-tag img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.specialty-tag--more {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  text-decoration: none;
  background: var(--purple-soft);
  border: 1px solid var(--purple);
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
}

.specialty-tag--more:hover {
  background: #e8e3ff;
  opacity: 1;
}

.page-header__stat-text strong {
  font-weight: 600;
  color: var(--ink);
}

.page-header__stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.page-header__stat-text span:last-child {
  color: #888;
  font-size: 13px;
}

.page-header__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: #888;
}

.page-header__stat svg,
.page-header__stat img {
  color: var(--purple);
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

/* ── Avatar stack ── */
.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: unset;
  margin-left: -5px;
  background: #ddd;
}

.avatar-stack img:first-child {
  margin-left: 0;
}

.avatar-stack__more {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-left: -11px;
  border: 2.5px solid var(--white);
  text-decoration: none;
}

.avatar-stack__more:hover {
  background: #e8e3ff;
}

.avatar-stack--header img,
.avatar-stack--header .avatar-stack__more {
  width: 42px;
  height: 42px;
  font-size: 11.5px;
}

.avatar-stack--card {
  margin-bottom: 24px;
}

.avatar-stack--card img,
.avatar-stack--card .avatar-stack__more {
  width: 32px;
  height: 32px;
  margin-left: -10px;
  border-width: 2px;
}

.avatar-stack--card img:first-child {
  margin-left: 0;
}

/* Avatar cluster (Card 1) */
.avatar-row {
  --avatar-size: 48px;
  --avatar-gap: 15px;
  --avatar-offset: calc((var(--avatar-size) + var(--avatar-gap)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: fit-content;
  margin: 4px 0 28px;
  position: relative;
}

.avatar-row__line {
  display: flex;
  align-items: center;
  gap: var(--avatar-gap);
}

.avatar-row__line--top,
.avatar-row__line--bottom {
  padding-left: 0;
}

.avatar-row__line--middle {
  margin: 0;
}

.avatar-row__item {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}

.avatar-row__item img {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  background: #ddd;
  display: block;
  transition: box-shadow 0.18s ease;
}

.avatar-row__item:hover,
.avatar-row__item:focus-visible,
.avatar-row__item.is-active {
  z-index: 3;
}

@media (hover: hover) {
  .avatar-row__item:hover img,
  .avatar-row__item:focus-visible img {
    box-shadow:
      0 0 0 2px var(--white),
      0 0 0 3.5px #7eb0ff;
  }

  .avatar-row__item:hover .avatar-row__tip,
  .avatar-row__item:focus-visible .avatar-row__tip {
    opacity: 1;
    visibility: visible;
  }
}

.avatar-row__item.is-active img {
  box-shadow:
    0 0 0 2px var(--white),
    0 0 0 3.5px #7eb0ff;
}

.avatar-row__item.is-active .avatar-row__tip {
  opacity: 1;
  visibility: visible;
}

.avatar-row__tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 132px;
  padding: 10px 14px 9px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.avatar-row__tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--white);
  filter: drop-shadow(0 -1px 0 rgba(17, 17, 17, 0.04));
}

.avatar-row__role {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.avatar-row__more {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  border: 1.5px dashed #c9bfff;
  background: var(--white);
  color: #a89bff;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.avatar-row__more:hover {
  border-color: var(--purple);
  color: var(--purple);
}

/* ── Cards grid ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  flex: 1 0 auto;
  align-items: stretch;
}

.info-card {
  background: var(--white);
  border: 1px solid #ebebef;
  border-radius: 10px;
  padding: 32px 28px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.info-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.info-card__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 20px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.info-card__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.info-card--cohort {
  border-radius: 10px;
  padding: 32px 32px 28px;
  overflow: visible;
}

.info-card--cohort .info-card__icon {
  color: var(--purple);
  opacity: 1;
}

.info-card--cohort .info-card__text {
  color: #5c5c5c;
  line-height: 1.55;
}

.info-card--cohort .info-card__text:last-of-type {
  margin-bottom: 20px;
}

.info-card__icon {
  color: var(--purple);
  opacity: 0.9;
}

.info-card__icon svg,
.info-card__icon img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.info-card__text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #888;
}

.info-card__text--lead {
  margin-bottom: 18px;
  color: #777;
}

/* Capabilities */
.capabilities {
  margin-top: auto;
  padding-top: 20px;
}

.capabilities--divider {
  padding-top: 24px;
  border-top: 1px solid #ededed;
}

.capabilities__label {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.capabilities__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 12px;
  font-weight: 500;
}

.tag--soft {
  height: auto;
  padding: 6px 12px;
  border-radius: 5px;
  background: #f5f3ff;
  color: #6d5cff;
  font-size: 12px;
  font-weight: 500;
}

/* Reason list */
.reason-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reason-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: #888;
}

.reason-list li strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 13.5px;
}

.reason-list__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  overflow: hidden;
}

.reason-list__icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Callout */
.callout {
  margin-top: auto;
  display: flex;
  gap: 25px;
  align-items: center;
  padding: 16px;
  border-radius: 10px;
  background: var(--purple-soft);
}

.callout__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: block;
}

.callout__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.callout p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #777;
  padding-top: 0;
}

.callout strong {
  color: var(--purple);
  font-weight: 700;
}

/* Roles */
.roles {
  margin-top: 6px;
}

.roles__label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.roles__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* every chip matches the tallest one, so wrapping labels can't
     make one row shorter than another on any screen size */
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 24px;
}

.role-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #ebebef;
  border-radius: 10px;
  background: #f0edff;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  min-height: 42px;
}

.role-btn:hover {
  border-color: #dcd4ff;
}

.role-btn.is-selected {
  border-color: var(--purple);
  background: var(--purple-soft);
  color: var(--purple);
}

.role-btn__icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--purple-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.role-btn__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.role-btn.is-selected .role-btn__icon {
  background: rgba(109, 92, 255, 0.18);
}

.role-btn__label {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.role-btn__plus {
  margin-left: auto;
  font-size: 16px;
  color: var(--purple);
  font-weight: 500;
  flex-shrink: 0;
}

.role-btn.is-selected .role-btn__plus {
  color: var(--purple);
}

/* Timeline */
.timeline {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #f0f0f4;
}

.timeline__label {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.timeline__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
}

.timeline__months::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: #e0e0e6;
  z-index: 0;
}

.timeline__month::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  border: 2px solid var(--white);
  z-index: 2;
}

.timeline__month {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  text-align: center;
}

.timeline__title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}

.timeline__focus {
  display: block;
  font-size: 10.5px;
  color: #aaa;
  margin-bottom: 12px;
  line-height: 1.3;
}

.timeline__avatars {
  display: flex;
  justify-content: center;
}

.timeline__avatars img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  margin-left: -7px;
  background: #ddd;
}

.timeline__avatars img:first-child {
  margin-left: 0;
}

.timeline__more {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid var(--white);
}

/* ── CTA banner ── */
.cta-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 28px;
  background: #f0edff;
  border: 1px solid #ebebef;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.cta-banner__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple);
  display: grid;
  place-items: center;
}

.cta-banner__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cta-banner__text {
  flex: 1;
  min-width: 0;
}

.cta-banner__title {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cta-banner__sub {
  margin: 0;
  font-size: 13.5px;
  color: #888;
  line-height: 1.45;
}

.cta-banner__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s;
}

.cta-banner__btn:hover {
  background: #000;
}

/* ── Launch modal ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.launch-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.launch-modal[hidden] {
  display: none;
}

.launch-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
}

.launch-modal__dialog {
  position: relative;
  width: min(100%, 420px);
  background: var(--white);
  border: 1px solid #ebebef;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  padding: 28px 28px 24px;
  text-align: center;
}

.launch-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #888;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.launch-modal__close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink);
}

.launch-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 18px;
}

.launch-modal__badge-icon {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.launch-modal__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.launch-modal__sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: #666;
}

.launch-modal__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.launch-modal__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #e4e4ea;
  border-radius: 10px;
  background: var(--white);
  color: #aaa;
}

.launch-modal__field:focus-within {
  border-color: var(--purple-muted);
  color: var(--purple);
}

.launch-modal__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
}

.launch-modal__field input::placeholder {
  color: #b8b8c0;
}

.launch-modal__submit {
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: var(--purple);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.launch-modal__submit:hover {
  background: #5a4ae6;
}

.launch-modal__status {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #4a4a4a;
  text-align: center;
}

.launch-modal__status:empty {
  display: none;
}

.launch-modal__status.is-error {
  color: #c0392b;
}

.launch-modal__or {
  position: relative;
  margin: 20px 0 16px;
  height: 1px;
  background: #ececf0;
}

.launch-modal__or span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 12px;
  background: var(--white);
  font-size: 12px;
  color: #aaa;
}

.launch-modal__outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1.5px solid var(--purple);
  border-radius: 10px;
  color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s;
}

.launch-modal__outline:hover {
  background: var(--purple-soft);
}

.launch-modal__linkedin {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.launch-modal__linkedin:hover {
  color: #5a4ae6;
}

body.is-modal-open {
  overflow: hidden;
}

/* ── Animations ── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sidebar {
  animation: fade-in 0.5s ease both;
}

.main {
  animation: fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.page-header {
  animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.info-card {
  animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.info-card:nth-child(1) {
  animation-delay: 0.18s;
}

.info-card:nth-child(2) {
  animation-delay: 0.28s;
}

.info-card:nth-child(3) {
  animation-delay: 0.38s;
}

.cta-banner {
  animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
}

.specialty-tag,
.page-header__stat {
  transition: transform 0.2s ease, background 0.15s ease;
}

.specialty-tag:hover {
  transform: translateY(-1px);
}

.role-btn,
.sidebar__link,
.cta-banner__btn,
.launch-modal__submit,
.launch-modal__outline {
  transition:
    transform 0.2s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.role-btn:active,
.cta-banner__btn:active,
.launch-modal__submit:active {
  transform: scale(0.98);
}

.launch-modal:not([hidden]) .launch-modal__backdrop {
  animation: modal-backdrop-in 0.25s ease both;
}

.launch-modal:not([hidden]) .launch-modal__dialog {
  animation: modal-dialog-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 900px) {
  .sidebar:not(.is-collapsed) .sidebar__nav {
    animation: slide-down 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .main,
  .page-header,
  .info-card,
  .cta-banner,
  .launch-modal:not([hidden]) .launch-modal__backdrop,
  .launch-modal:not([hidden]) .launch-modal__dialog,
  .sidebar:not(.is-collapsed) .sidebar__nav {
    animation: none;
  }

  .specialty-tag:hover,
  .role-btn:active,
  .cta-banner__btn:active,
  .launch-modal__submit:active {
    transform: none;
  }
}

/* ── Responsive ── */
/* The three cards fit as columns only from 1320px up (measured). Below that
   they become one sideways-scrolling row rather than wrapping to a second. */
@media (max-width: 1319px) {
  .cards-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .cards-grid::-webkit-scrollbar {
    display: none;
  }

  .cards-grid .info-card,
  .cards-grid .info-card:last-child {
    flex: 0 0 min(88vw, 340px);
    width: min(88vw, 340px);
    max-width: min(88vw, 340px);
    grid-column: auto;
    scroll-snap-align: start;
  }

  /* at these card widths the avatar row must go fluid or it forces the
     card wider than itself */
  .avatar-row {
    --avatar-gap: 8px;
    gap: 8px;
    width: 100%;
  }
}

@media (max-width: 1200px) {
  /* the header cluster must not overflow the column */
  .page-header__right {
    flex-shrink: 1;
    min-width: 0;
  }

  .specialty-tags {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .specialty-tags::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 900px) {
  .app {
    flex-direction: column;
    padding: 0;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 16px 12px;
    overflow: visible;
    background: #fafafa;
  }

  .sidebar.is-collapsed {
    width: 100%;
    flex-basis: auto;
    padding: 16px 16px 14px;
  }

  .sidebar__top {
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
  }

  .sidebar.is-collapsed .sidebar__top {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
  }

  .sidebar__panel-btn {
    display: grid;
  }

  .sidebar.is-collapsed .sidebar__nav {
    display: none;
  }

  .sidebar__logo-mark {
    width: 86px;
    height: 20px;
  }

  .sidebar.is-collapsed .sidebar__logo-mark {
    width: 80px;
    height: auto;
  }

  .sidebar__logo-mark-shapes {
    gap: 6px;
  }

  .logo-shape--circle,
  .logo-shape--square {
    width: 20px;
    height: 20px;
  }

  .logo-shape--triangle {
    border-left-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 20px;
  }

  .sidebar__nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    overflow: visible;
    padding-top: 8px;
  }

  .sidebar__link {
    flex-shrink: 1;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    gap: 12px;
    border-radius: 10px;
  }

  .sidebar.is-collapsed .sidebar__link {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .sidebar.is-collapsed .sidebar__link-label {
    display: inline;
  }

  .sidebar__link--soon {
    opacity: 0.3;
  }

  .sidebar__link--active {
    margin-top: 4px;
  }

  .sidebar__promo,
  .sidebar__brand {
    display: none;
  }

  .main {
    padding: 20px 16px;
    overflow-x: hidden;
  }

  /* the bell lives in the top bar next to the menu toggle on mobile */
  .page-header__bell {
    display: none;
  }

  .sidebar__bell {
    display: grid;
  }

  .sidebar__top {
    gap: 6px;
  }

  /* the header becomes a grid so the heading and the stat cluster share
     row 1 and stay vertically centred against each other */
  .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    padding-right: 0;
  }

  /* let the h1/sub and tags/stat become direct grid items */
  .page-header__left,
  .page-header__right {
    display: contents;
  }

  /* block, not flex, so the plus flows inline right after the last word
     even when the heading wraps onto two lines */
  .page-header h1 {
    grid-column: 1;
    grid-row: 1;
    font-size: 24px;
  }

  .page-header__add {
    margin-left: 8px;
    width: 32px;
    height: 32px;
  }

  .page-header__stat {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    white-space: nowrap;
  }

  .page-header__sub {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .specialty-tags {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 18px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .specialty-tags::-webkit-scrollbar {
    display: none;
  }

  .specialty-tag {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .cards-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: 0;
    margin-right: -16px;
    padding: 0 16px 4px;
  }

  .cards-grid::-webkit-scrollbar {
    display: none;
  }

  .info-card {
    padding: 20px 15px 20px;
  }

  .info-card--cohort {
    padding: 20px 15px 20px;
  }

  .cards-grid .info-card {
    flex: 0 0 min(88vw, 340px);
    width: min(88vw, 340px);
    max-width: min(88vw, 340px);
    scroll-snap-align: start;
  }

  .cards-grid .info-card:last-child {
    grid-column: auto;
  }

  .avatar-row {
    --avatar-gap: 8px;
    gap: 8px;
    width: 100%;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .cta-banner__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── App shell (tablet and up) ──
   The sidebar is pinned at the full viewport height and the content column
   scrolls on its own, so no background can ever show below the sidebar. */
@media (min-width: 901px) {
  .app {
    height: 100dvh;
    overflow: hidden;
  }

  .sidebar {
    position: static;
    height: 100%;
  }

  .main {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Below ~380px the heading wraps to two lines. The plus rides the last line,
   so lift it by half a line-height to centre it on the whole heading block
   while keeping it glued to the last word horizontally. */
@media (max-width: 379px) {
  .page-header__add {
    position: relative;
    top: -0.55em;
  }
}

/* Narrow phones: keep the two-column grid (stacking would make this card,
   and every card matched to it, far too tall) and instead trim the chip's
   fixed chrome so the labels fit inside the column. 374px is the widest
   viewport where "Copywriter" still overruns its column untrimmed. */
@media (max-width: 374px) {
  /* let the columns shrink past min-content so the chips can't push the
     card wider than itself */
  .roles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* safety net for the very narrowest screens only */
  .role-btn__label {
    overflow-wrap: break-word;
  }

  .role-btn {
    gap: 5px;
    padding: 10px 8px;
    font-size: 10.5px;
  }

  .role-btn__icon {
    width: 18px;
    height: 18px;
  }

  .role-btn__plus {
    font-size: 14px;
  }
}