.client-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 24px;
  min-height: 245px;
  align-items: center;
  margin-bottom: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 42%, rgba(117, 216, 233, .18), transparent 22%),
    linear-gradient(135deg, rgba(17, 62, 78, .86), rgba(9, 29, 43, .9));
}

.client-hero::after {
  position: absolute;
  right: 170px;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(142, 224, 191, .2);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.client-hero-copy { position: relative; z-index: 1; max-width: 650px; }
.client-hero-copy h2 { margin: 12px 0 9px; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.04em; }
.client-hero-copy p { max-width: 580px; margin: 0; color: #b4cad3; line-height: 1.75; }
.client-hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.client-hero-points span {
  border: 1px solid rgba(154, 206, 225, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #c5dce2;
  padding: 7px 11px;
  font-size: 11px;
}

.client-hero-orb {
  position: relative;
  display: grid;
  width: 156px;
  height: 156px;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(168, 230, 239, .46);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #b4eff3, #5ebbcf 54%, #1a5a6e 100%);
  box-shadow: 0 0 0 14px rgba(117, 216, 233, .06), 0 22px 60px rgba(41, 159, 188, .25);
  color: #082631;
  font-size: 74px;
  font-weight: 900;
  transform: rotate(-8deg);
}

.client-app-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: inherit;
}

.client-app-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(168, 230, 239, .46);
  border-radius: 32px;
  object-fit: cover;
  box-shadow: 0 22px 60px rgba(41, 159, 188, .25);
}

.client-hero-orb::before,
.client-hero-orb::after {
  position: absolute;
  border: 1px solid rgba(142, 224, 191, .42);
  border-radius: 50%;
  content: "";
}

.client-hero-orb::before { inset: -24px; transform: rotate(28deg) scaleX(.42); }
.client-hero-orb::after { inset: -38px; transform: rotate(-24deg) scaleX(.28); }

.client-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.client-download-card {
  display: flex;
  min-height: 340px;
  flex-direction: column;
  gap: 17px;
  overflow: hidden;
}

.client-android-card { background: linear-gradient(145deg, rgba(17, 65, 69, .82), rgba(9, 27, 40, .92)); }
.client-tv-card { background: linear-gradient(145deg, #003d50, #001824); border-color: rgba(13, 211, 229, .35); }
.client-ios-card { background: linear-gradient(145deg, rgba(44, 44, 72, .72), rgba(10, 24, 39, .92)); }
.client-mac-card { background: linear-gradient(145deg, rgba(34, 55, 77, .84), rgba(9, 27, 40, .94)); }
.client-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.client-platform-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 18px;
  color: #f2ffff;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.06em;
}

.android-mark { background: linear-gradient(145deg, #83dcb7, #2e8f7c); }
.tv-mark { background: #0dd3e5; color: #001824; border-color: #5be6f2; border-radius: 14px; font-size: 21px; letter-spacing: .02em; }
.client-tv-card .eyebrow { color: #0dd3e5; }
.client-tv-card .client-download-primary { background: #0dd3e5; color: #001824; }
.ios-mark { background: linear-gradient(145deg, #a9b4ff, #5d5b9f); font-size: 16px; letter-spacing: -.02em; }
.mac-mark { background: linear-gradient(145deg, #9ab8ce, #405f78); font-size: 32px; }
.client-status { border: 1px solid rgba(142, 224, 191, .3); border-radius: 999px; background: rgba(142, 224, 191, .1); color: var(--mint); padding: 7px 10px; font-size: 11px; font-weight: 800; }
.client-status-pending { border-color: rgba(240, 201, 121, .3); background: rgba(240, 201, 121, .1); color: var(--gold); }
.client-download-card h3 { margin: 8px 0; font-size: 25px; }
.client-download-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.client-meta { display: flex; flex-wrap: wrap; gap: 8px; color: #c5dce2; font-size: 11px; }
.client-meta span { border-left: 2px solid var(--cyan); padding-left: 8px; }

.client-download-button {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border: 1px solid transparent;
  border-radius: 15px;
  padding: 0 18px;
  font-weight: 800;
  text-decoration: none;
}

.client-download-primary { background: linear-gradient(135deg, #83dcec, #79d5b7); color: #082631; }
.client-download-primary:hover { filter: brightness(1.06); }
.client-download-primary > span:last-child { font-size: 21px; }
.client-download-disabled { border-color: rgba(154, 206, 225, .15); background: rgba(255, 255, 255, .06); color: var(--muted); cursor: not-allowed; }
.client-download-disabled > span:last-child { color: var(--gold); font-size: 21px; }

.client-pending-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(240, 201, 121, .2);
  border-radius: 14px;
  background: rgba(240, 201, 121, .07);
  color: #f4d995;
  padding: 12px 13px;
  font-size: 12px;
}

.client-pending-banner > span { color: var(--gold); font-size: 18px; }
.client-notes { margin-bottom: 16px; }
.client-notes-list { display: grid; gap: 0; margin-top: 18px; }
.client-notes-list > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid rgba(154, 206, 225, .1); padding: 13px 0; }
.client-notes-list > div > span { color: var(--mint); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.client-notes-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.client-notes-list strong { color: var(--text); }

@media (max-width: 760px) {
  .tabs .tab { padding-right: 3px; padding-left: 3px; font-size: 10px; letter-spacing: -.02em; }
  .client-hero { grid-template-columns: minmax(0, 1fr) 94px; gap: 8px; min-height: 230px; padding: 20px; }
  .client-hero::after { right: 30px; bottom: -124px; }
  .client-hero-copy h2 { font-size: 32px; }
  .client-hero-copy p { font-size: 12px; }
  .client-hero-points { gap: 5px; margin-top: 16px; }
  .client-hero-points span { padding: 6px 8px; font-size: 10px; }
  .client-hero-orb { width: 82px; height: 82px; font-size: 39px; }
  .client-app-icon img { border-radius: 20px; }
  .client-hero-orb::before { inset: -13px; }
  .client-hero-orb::after { inset: -21px; }
  .client-download-grid { grid-template-columns: 1fr; }
  .client-download-card { min-height: 300px; padding: 22px; }
  .client-notes { padding: 22px; }
}

.client-tv-card .client-download-button:not(.client-download-primary) { border: 1px solid #0dd3e5; background: rgba(13, 211, 229, .08); color: #a9edf3; margin-top: 12px; }