.companion-feature {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: center;
  margin: 6px 0 62px;
  padding: clamp(30px, 5vw, 72px);
  border: 1px solid #367b98;
  border-radius: 22px;
  background: radial-gradient(circle at 84% 12%, rgba(11, 161, 181, .2), transparent 42%), linear-gradient(135deg, #0c2944, #071c34 70%);
  box-shadow: 0 24px 66px rgba(0, 0, 0, .25);
  scroll-margin-top: 112px;
}

.companion-feature__eyebrow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 20px;
  color: #8fe5ee;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

.companion-feature__eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #68d9bf;
  box-shadow: 0 0 0 5px rgba(104, 217, 191, .13);
}

.companion-feature h2 {
  max-width: 690px;
  margin: 0 0 20px;
  font-size: clamp(36px, 4.1vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.companion-feature h2 em {
  display: block;
  color: #7bdadf;
  font-style: normal;
}

.companion-feature__lead {
  max-width: 610px;
  margin: 0;
  color: #d5e8f0;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.52;
}

.companion-feature__actions {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.companion-feature__button {
  display: inline-flex;
  min-height: 52px;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border: 1px solid #8eebec;
  border-radius: 9px;
  background: #94e7e4;
  box-shadow: 0 5px 0 #057f96;
  color: #092638;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.companion-feature__button:hover {
  background: #b8f3ee;
  box-shadow: 0 7px 0 #057f96;
  transform: translateY(-2px);
}

.companion-feature__button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

.companion-feature__actions > span,
.companion-feature__scope {
  color: #b4ccdb;
  font-size: 13px;
  line-height: 1.45;
}

.companion-feature__scope {
  max-width: 610px;
  margin: 22px 0 0;
}

.companion-preview {
  overflow: hidden;
  border: 1px solid #6cb6c6;
  border-radius: 19px;
  background: #eaf3f8;
  box-shadow: 0 22px 42px rgba(0, 0, 0, .35);
  color: #17384c;
  transform: rotate(1deg);
}

.companion-preview__top {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 22px 26px 20px;
  background: linear-gradient(110deg, #102d43, #0c5361);
  color: #e7f7fa;
}

.companion-preview__top span,
.companion-preview__patient span {
  color: #83d6e0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.companion-preview__top strong {
  color: #7be3df;
  font-size: clamp(25px, 2.5vw, 36px);
  line-height: 1.1;
}

.companion-preview__top small {
  margin-top: 8px;
  color: #d4e7ee;
  font-size: 12px;
}

.companion-preview__top small b { color: #ff8794; }

.companion-preview__patient {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 26px;
  border-bottom: 1px solid #cadee7;
  background: #fff;
}

.companion-preview__patient span { color: #147e97; }
.companion-preview__patient strong { font-size: 24px; }
.companion-preview__patient small { color: #587186; font-size: 13px; }

.companion-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.companion-preview__grid div {
  display: flex;
  min-height: 116px;
  flex-direction: column;
  gap: 6px;
  padding: 16px 13px;
  border: 1px solid #c3dce7;
  border-radius: 11px;
  background: #fff;
}

.companion-preview__grid div:last-child {
  border-color: #38a8bb;
  background: #e4f7f7;
  box-shadow: inset 0 -4px #047e94;
}

.companion-preview__grid span {
  color: #057e99;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.companion-preview__grid strong { font-size: 14px; line-height: 1.2; }
.companion-preview__grid small { margin-top: auto; color: #60788a; font-size: 11px; }

@media (max-width: 1050px) {
  .companion-feature { grid-template-columns: 1fr; }
  .companion-preview { max-width: 730px; transform: none; }
}

@media (max-width: 600px) {
  .companion-feature { margin-bottom: 44px; padding: 24px 18px; border-radius: 15px; }
  .companion-feature h2 { font-size: clamp(34px, 9vw, 46px); }
  .companion-feature__button { width: 100%; }
  .companion-preview__grid { grid-template-columns: 1fr; }
  .companion-preview__grid div { min-height: 72px; }
  .companion-preview__top, .companion-preview__patient { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .companion-feature__button { transition: none; }
}