:root { --anchor-offset: 148px; }

/* Direct-response product identity layer for the operations product family. */
.suite-subnav-inner {
  min-height: 68px;
}

.suite-brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.045em;
}

.suite-brand::before {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 2px solid var(--suite-accent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--suite-accent) 14%, white);
  box-shadow: inset 0 0 0 4px #fff;
  content: "";
}

.suite-hero {
  padding: clamp(56px, 6vw, 86px) 0 clamp(76px, 8vw, 110px);
  background:
    radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--suite-accent) 14%, transparent), transparent 28%),
    linear-gradient(132deg, #fff 0 54%, color-mix(in srgb, var(--suite-panel) 75%, white) 54%);
}

.suite-hero-copy h1 {
  max-width: 13.5ch;
  margin: 0 0 25px;
  font-size: clamp(52px, 5vw, 72px);
  line-height: .94;
  letter-spacing: -.062em;
  text-wrap: balance;
}

.suite-hero-copy > p:not(.suite-note) {
  max-width: 59ch;
  color: #44484c;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.58;
}

.suite-hero-copy .button-row {
  margin-top: 30px;
}

.suite-note {
  max-width: 66ch;
  line-height: 1.55;
}

.suite-window {
  transform: rotate(.35deg);
}

@media (max-width: 1120px) {
  .suite-hero-copy h1 {
    max-width: 15ch;
  }
}

@media (max-width: 820px) {
  .suite-hero {
    background:
      radial-gradient(circle at 10% 7%, color-mix(in srgb, var(--suite-accent) 14%, transparent), transparent 31%),
      #fff;
  }
}

@media (max-width: 600px) {
  .suite-subnav-inner {
    min-height: 58px;
  }

  .suite-brand {
    gap: 8px;
    font-size: 19px;
  }

  .suite-brand::before {
    width: 17px;
    height: 17px;
    border-radius: 4px;
  }

  .suite-hero {
    padding: 52px 0 72px;
  }

  .suite-hero-copy h1 {
    max-width: none;
    font-size: clamp(38px, 11.6vw, 46px);
    line-height: .96;
    text-wrap: pretty;
  }

  .suite-window {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-window {
    transform: none;
  }
}