@font-face {
  font-family: "Roboto";
  src: url("Roboto.woff2") format("woff2");
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  display: grid;
  place-items: center;
  height: 100dvh;
  font-family: Roboto, sans-serif;
  line-height: 1.5;
  color: #323234;
  background: linear-gradient(90deg, #054780 55%, #0f62ce 100%);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
  text-wrap: balance;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  max-width: 1100px;
  padding: 20px;
}

.wrapper > * {
  width: 100%;
  max-width: 530px;
}

.form {
  padding: clamp(3rem, 2.3046rem + 2.649vw, 4rem)
    clamp(2rem, 0.957rem + 3.9735vw, 3.5rem);
  background-color: #ffffff;
}

.flow {
  margin-block-end: var(--flow-space);
}

h1 {
  --flow-space: 32px;
  font-size: clamp(1.25rem, 0.7285rem + 1.9868vw, 2rem);
}

.highlight {
  color: #f29100;
}

.form-group {
  --flow-space: 16px;
  display: grid;
  gap: 8px;
}

label {
  font-size: 14px;
  font-weight: 500;
}

input,
select {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.1;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
}

select {
  width: 100%;
}

.hint {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  color: #676767;
}

.checkbox-group {
  --flow-space: 16px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

button {
  --flow-space: 16px;
  width: 100%;
  padding-block: 8px;
  font-weight: 700;
  color: #ffffff;
  background-color: #f29100;
  border: 1px solid #f29100;
  cursor: pointer;
  transition: 0.3s all;
}

button:hover {
  opacity: 0.9;
}

button:disabled {
  opacity: 0.9;
  cursor: auto;
}

.none {
  display: none;
}