html {
   min-height: 100%;
   font-family: system-ui, Helvetica, sans-serif;
   background-color: #fff;
}

@media screen and (min-width: 768px) {
   html {
      font-weight: lighter;
   }
}

body,
h1,
h2,
h3,
li {
   margin: 0;
   padding: 0;
}

ol,
ul {
   margin: 0;
   padding-inline-start: 24px;
}

#root {
   position: relative;
}

html,
body,
#root {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

a {
   text-decoration: none;
}

button {
   border: none;
}

button:active,
button:focus {
   outline: none;
}

.form {
   background: #fff;
   padding: 48px;
   max-width: 440px;
   position: relative;
   z-index: 10;
   border-radius: 10px;
}

.form-caption {
   font-weight: 600;
   font-size: 42px;
   text-align: center;
   margin-bottom: 8px;
}

.form-description {
   text-align: center;
   font-size: 19px;
   line-height: 24px;
   margin-bottom: 32px;
}

.form-wrapper {
   position: relative;
   padding-bottom: 16px;
}

.form-policy {
   font-size: 14px;
   display: flex;
   align-items: center;
}

.form-policy-input {
   appearance: none;
   -webkit-appearance: none;
   margin: 0 8px 0 0;
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   border: 1.5px solid #c4c4c4;
   border-radius: 5px;
   background-color: #fff;
   /* SVG-галочка фоном: ровно по центру, без перекоса */
   background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%273.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%275 12.5 10 17.5 19 7%27/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 0;
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease, background-size 0.15s ease;
}

/* активный цвет в тон кнопке формы — её цвет pug проставляет в --form-accent */
.form-policy-input:checked {
   background-color: var(--form-accent, #272727);
   border-color: var(--form-accent, #272727);
   background-size: 14px;
}

.form-policy-input:focus-visible {
   outline: 2px solid rgba(0, 0, 0, 0.2);
   outline-offset: 2px;
}

.form-input-antibot {
   opacity: 0.01;
   height: 1px;
   padding-bottom: 0;
}

.form-input {
   font-size: 16px;
   padding: 16px;
   display: block;
   width: 100%;
   border: none;
   border-bottom: 1px solid #ccc;
   box-sizing: border-box;
   background: inherit;
   border: 1px solid #ccc;
   border-radius: 10px;
}

.form-input::placeholder {
   color: #acacac;
}

.form-input:focus {
   outline: none;
}

.form-button {
   border-radius: 10px;
   font-weight: 600;
   text-align: center;
   cursor: pointer;
   display: inline-block;
   width: 100%;
   margin-top: 18px;
   padding: 20px 60px;
   font-size: 16px;
}

.form-close {
   color: #9c9c9c;
   font-weight: 600;
   font-size: 30px;
   align-items: center;
   justify-content: center;
   font-family: Helvetica;
   position: absolute;
   top: 12px;
   right: 16px;
   cursor: pointer;
}

@media (max-width: 640px) {
   .form {
      padding: 48px 32px;
   }

   .form-button {
      padding: 20px 42px;
      font-size: 14px;
   }

   .form-caption {
      font-size: 30px;
   }

   .form-description {
      font-size: 20px;
      line-height: 24px;
   }

   .form-policy {
      font-size: 12px;
   }
}

@media (max-width: 428px) {
   .form-caption {
      font-size: 24px;
   }

   .form-description {
      font-size: 14px;
      line-height: 18px;
   }
}

@media (max-width: 351px) {
   .form-caption {
      font-size: 22px;
   }
}