/* ═══════════════════════════════════════════════════
   MedTech page — site/new/medtech/medtech.css
   Depends on: ../hcp/hcp.css (nav, hero, stats, shared tokens)
   ═══════════════════════════════════════════════════ */

/* ── HERO: centered single-column layout ── */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 32px 72px;
}

.hero-content {
  max-width: 680px;
}

.hero-sub {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  justify-content: center;
}

.api-mockup {
  background: oklch(14% 0.01 240);
  border-radius: 12px;
  box-shadow:
    0 4px 6px oklch(0% 0 0 / 0.04),
    0 24px 64px oklch(0% 0 0 / 0.18),
    0 0 0 1px oklch(0% 0 0 / 0.1);
  overflow: hidden;
  font-family: 'DM Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11px;
}

.api-mockup-header {
  background: oklch(18% 0.01 240);
  border-bottom: 1px solid oklch(24% 0.01 240);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(35% 0.01 240);
}

.api-mockup-dot:nth-child(1) {
  background: #fc6058;
}
.api-mockup-dot:nth-child(2) {
  background: #fda428;
}
.api-mockup-dot:nth-child(3) {
  background: #28c940;
}

.api-mockup-title {
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(55% 0.02 240);
  margin-left: 4px;
}

.api-mockup-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.api-request {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.api-method {
  font-family: var(--ff-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.api-method.post {
  background: oklch(42% 0.15 192 / 0.3);
  color: var(--teal-mid);
  border: 1px solid oklch(42% 0.15 192 / 0.5);
}

.api-method.put {
  background: oklch(50% 0.14 75 / 0.25);
  color: oklch(72% 0.14 75);
  border: 1px solid oklch(50% 0.14 75 / 0.4);
}

.api-path {
  font-size: 11px;
  color: oklch(80% 0.02 240);
  letter-spacing: 0.01em;
}

.api-tag {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.api-tag.new {
  background: oklch(50% 0.14 145 / 0.25);
  color: oklch(70% 0.18 145);
  border: 1px solid oklch(50% 0.14 145 / 0.4);
}

.api-payload {
  background: oklch(18% 0.01 240);
  border: 1px solid oklch(24% 0.01 240);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.api-line {
  display: flex;
  gap: 12px;
}

.api-key {
  color: oklch(60% 0.08 250);
  font-size: 10.5px;
  min-width: 110px;
  flex-shrink: 0;
}

.api-val {
  color: oklch(78% 0.06 60);
  font-size: 10.5px;
}

.api-val.api-teal {
  color: var(--teal-mid);
}

.api-val.api-green {
  color: oklch(70% 0.18 145);
}

.api-divider {
  height: 1px;
  background: oklch(24% 0.01 240);
  margin: 6px 0 10px;
}

.api-hospitals {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.api-hospitals-label {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

.api-hospital-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.api-hospital-tags span {
  font-family: var(--ff-body);
  background: oklch(28% 0.04 192 / 0.4);
  border: 1px solid oklch(42% 0.08 192 / 0.5);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 500;
  color: oklch(75% 0.08 192);
}

/* code tag in workflow step */
.workflow-step-content span code {
  font-family: 'DM Mono', 'Fira Code', monospace;
  background: oklch(32% 0.04 240);
  border: 1px solid oklch(38% 0.04 240);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--teal-mid);
}

@media (max-width: 640px) {
  .cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-btn-primary,
  .cta-btn-outline {
    justify-content: center;
  }

}

/* ── TRUSTED BY CAROUSEL: override background for alternating rhythm ── */
.trusted {
  background: var(--white);
}