/* Shared simulator chrome — hero strip and view tabs (v1 + v2). */

.sim-hero {
  background: linear-gradient(135deg, var(--blue-grey) 0%, #283844 100%);
  color: var(--white);
  padding: clamp(36px, 5vw, 64px) 0 clamp(30px, 4vw, 48px);
}

.sim-hero h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  margin-bottom: 14px;
}

.sim-hero .eyebrow {
  color: var(--orange);
}

.sim-hero .lead {
  color: rgba(255, 255, 255, 0.85);
  width: 100%;
  max-width: none;
  font-size: 0.98rem;
  margin: 0;
}

.sim-tabs {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--blue-grey-15);
}

.sim-tabs a {
  display: block;
  background: #e6e8eb;
  border: 1px solid var(--blue-grey-15);
  border-bottom: none;
  color: var(--blue-grey);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 8px 8px 0 0;
  margin-right: 4px;
}

.sim-tabs a:hover {
  color: var(--orange);
  text-decoration: none;
}

.sim-tabs a.active {
  background: var(--white);
  color: var(--orange);
  position: relative;
  z-index: 1;
}

@media (max-width: 520px) {
  .sim-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sim-tabs a {
    flex-shrink: 0;
    font-size: 0.88rem;
    padding: 10px 14px;
  }
}