:root {
  --make-ads-blue: #1769ff;
  --make-ads-blue-dark: #0b48c9;
  --results-red: #ef3340;
  --results-red-dark: #c81f2c;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

#result {
  scroll-margin-top: 18px;
}

.hero-analysis-actions {
  display: grid;
  grid-template-columns: minmax(0, 900px) max-content;
  align-items: end;
  gap: clamp(18px, 3vw, 46px);
}

.hero-analysis-actions .analyze-form {
  width: 100%;
}

.make-ads-button {
  border: 1px solid var(--ink);
  background: var(--make-ads-blue);
  color: #fff;
  min-height: 58px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  font: 700 13px var(--sans);
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
  text-decoration: none;
}

.make-ads-button:hover {
  background: var(--make-ads-blue-dark);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.make-ads-button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.make-ads-button[hidden] {
  display: none;
}

.scroll-results-button {
  margin-bottom: 31px;
  min-width: 218px;
  background: var(--results-red);
}

.scroll-results-button:hover {
  background: var(--results-red-dark);
}

.make-ads-button-guidance {
  min-width: 205px;
}

@media (max-width: 980px) {
  .hero-analysis-actions {
    grid-template-columns: 1fr;
  }

  .scroll-results-button {
    width: min(100%, 300px);
    margin: -8px 0 0;
  }
}

@media (max-width: 760px) {
  .make-ads-button-guidance,
  .scroll-results-button {
    width: 100%;
  }
}