.services { --title-w: 22ch; --title-mb: 64px; }

.svc__list { border-top: 1px solid var(--lline); }

.svc__row {

  /* Shared by head and panel so title, mock, list and arrow share one edge.
     Dividers are the row's border, so they still span the full width. */
  --svc-pad-x: 28px;

  border-bottom: 1px solid var(--lline);
  color: var(--lfg);
  transition: background .32s var(--ease), color .32s var(--ease);
}

/* Triggered by the interactive element, not the wrapper: .svc__row is a plain
   div, only the <button> is clickable and focusable. The :has(.svc__panel:hover)
   arm keeps an open row open while the pointer is inside its panel. */
.svc__row:has(.svc__head:hover),
.svc__row:has(.svc__head:focus-visible),
.svc__row:has(.svc__panel:hover),
.svc__row.is-pinned {
  background: #111;
  color: #FAFAFA;
}

.svc__heading { margin: 0; font: inherit; font-weight: inherit; }

.svc__head {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;

  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 24px;
  align-items: start;
  padding: 30px var(--svc-pad-x);
  transition: padding .32s var(--ease);
}

.svc__row:has(.svc__head:hover) .svc__head,
.svc__row:has(.svc__head:focus-visible) .svc__head,
.svc__row:has(.svc__panel:hover) .svc__head,
.svc__row.is-pinned .svc__head { padding-top: 36px; }

.svc__title {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.svc__desc {
  display: block;
  margin: 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.55;
  opacity: .55;
}

.svc__arrow {
  justify-self: end;
  font-size: 24px;
  opacity: .4;
  transition: transform .35s var(--ease);
}
.svc__row:has(.svc__head:hover) .svc__arrow,
.svc__row:has(.svc__head:focus-visible) .svc__arrow,
.svc__row:has(.svc__panel:hover) .svc__arrow,
.svc__row.is-pinned .svc__arrow { transform: translate(5px, 5px); }

.svc__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--t-slow) var(--ease), opacity .4s var(--ease);
}
.svc__row:has(.svc__head:hover) .svc__panel,
.svc__row:has(.svc__head:focus-visible) .svc__panel,
.svc__row:has(.svc__panel:hover) .svc__panel,
.svc__row.is-pinned .svc__panel {
  max-height: var(--panel-h, 600px);
  opacity: 1;
}

.svc__grid {
  display: grid;

  grid-template-columns: minmax(0, 380px) minmax(0, 400px);
  gap: 56px;
  justify-content: start;
  padding: 0 var(--svc-pad-x) 34px;
  align-items: center;
}

.svc__items { display: flex; flex-direction: column; }

.svc__items .mono-label { color: inherit; opacity: .5; margin-bottom: 6px; }

.svc__item {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 11px 0;
  opacity: .85;
  font-size: 15px;
}
.svc__item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .16); }

.svc__cta { margin-top: 20px; align-self: flex-start; }

.mock {
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: 380px;
  border-radius: 8px;
  overflow: hidden;
}

.mock--phones {
  background: #F4F4F4;
  padding: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-end;
}
.mock__phone {
  width: 31%;
  aspect-ratio: 9 / 17;
  border-radius: 12px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock__phone--light { background: #fff; border: 1px solid #DADADA; }
.mock__phone--dark  { background: #111; }
.mock__notch { height: 6px; width: 60%; border-radius: 2px; margin: 2px auto 4px; background: #111; }
.mock__phone--dark .mock__notch { width: 50%; background: #fff; opacity: .8; }
.mock__block { border-radius: 4px; background: #EDEDED; height: 22px; }
.mock__phone--dark .mock__block { background: #2b2b2b; height: 30px; }
.mock__bar { height: 8px; border-radius: 2px; background: #E4E4E4; }
.mock__phone--dark .mock__bar { background: #2b2b2b; }
.mock__bar--70 { width: 70%; }
.mock__bar--60 { width: 60%; }

.mock--dashboard {
  background: #fff;
  border: 1px solid #E0E0E0;
  display: grid;
  grid-template-columns: 34% 1fr;
}
.mock__sidebar { background: #111; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.mock__sidebar-title { height: 8px; width: 70%; background: #fff; opacity: .85; border-radius: 2px; }
.mock__sidebar-item { height: 6px; background: #3a3a3a; border-radius: 2px; }
.mock__sidebar-item:first-of-type { margin-top: 6px; }
.mock__sidebar-item--80 { width: 80%; }
.mock__sidebar-item--60 { width: 60%; }
.mock__panel { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mock__tabs { display: flex; gap: 8px; }
.mock__tab { flex: 1; height: 30px; background: #F1F1F1; border-radius: 4px; }
.mock__tab--active { background: #111; }
.mock__chart { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 60px; }
.mock__col { flex: 1; border-radius: 2px; background: #DADADA; }
.mock__col--mid  { background: #BDBDBD; }
.mock__col--peak { background: #111; }

.mock__col--h1 { height: 40%; }
.mock__col--h2 { height: 70%; }
.mock__col--h3 { height: 100%; }
.mock__col--h4 { height: 55%; }
.mock__col--h5 { height: 82%; }

.mock--browser { background: #fff; border: 1px solid #E0E0E0; }
.mock__chrome {
  height: 26px;
  background: #F1F1F1;
  border-bottom: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
}
.mock__dot { width: 7px; height: 7px; border-radius: 50%; background: #CFCFCF; }
.mock__page { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mock__headline { height: 12px; width: 52%; background: #111; border-radius: 3px; }
.mock__line { height: 7px; width: 76%; background: #E2E2E2; border-radius: 2px; }
.mock__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.mock__tile { height: 44px; background: #F1F1F1; border-radius: 4px; }
.mock__tile--active { background: #111; }

.mock--chat {
  background: #fff;
  border: 1px solid #E0E0E0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.mock__bubble { max-width: 70%; padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.mock__bubble--in  { align-self: flex-start; background: #F1F1F1; border-radius: 12px 12px 12px 3px; }
.mock__bubble--out { align-self: flex-end;  background: #111;    border-radius: 12px 12px 3px 12px; }
.mock__bubble--in .mock__bar  { width: 120px; background: #CFCFCF; }
.mock__bubble--out .mock__bar { background: #4a4a4a; }
.mock__bar--150 { width: 150px; }
.mock__bar--90  { width: 90px; }
.mock__typing { align-self: flex-start; display: flex; gap: 5px; padding: 4px 2px; }
.mock__typing span { width: 6px; height: 6px; border-radius: 50%; background: #111; }
.mock__typing span:nth-child(2) { background: #999; }
.mock__typing span:nth-child(3) { background: #CFCFCF; }

.mock--report {
  background: #fff;
  border: 1px solid #E0E0E0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.mock__report-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mock__report-head .mock__headline { width: 46%; }
.mock__badge { width: 54px; height: 22px; border-radius: 4px; background: #111; flex: 0 0 auto; }
.mock__checks { display: flex; flex-direction: column; gap: 11px; }
.mock__check { display: flex; align-items: center; gap: 12px; }
.mock__box { width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid #CFCFCF; border-radius: 3px; }
.mock__check .mock__bar { flex: 1; background: #E4E4E4; }
.mock__check--flagged .mock__box { background: #111; border-color: #111; }
.mock__check--flagged .mock__bar { background: #BDBDBD; }

.mock--roster {
  background: #fff;
  border: 1px solid #E0E0E0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.mock__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #EDEDED;
  border-radius: 8px;
}
.mock__person--picked { background: #111; border-color: #111; }
.mock__avatar { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: #E4E4E4; }
.mock__person--picked .mock__avatar { background: #3a3a3a; }
.mock__person-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mock__person-lines span { display: block; height: 6px; border-radius: 2px; background: #E4E4E4; }
.mock__person-lines span:last-child { width: 55%; background: #EDEDED; }
.mock__person--picked .mock__person-lines span { background: #3a3a3a; }
.mock__person--picked .mock__person-lines span:last-child { background: #2b2b2b; }
.mock__pill { width: 34px; height: 14px; flex: 0 0 auto; border-radius: 7px; background: #EDEDED; }
.mock__person--picked .mock__pill { background: #F2F2F2; }