:root {
  --form-card-max-width: var(--text-body-max-width);
  --form-card-content-padding: var(--page-card-margin);
  --form-card-content-padding-mobile: calc(var(--form-card-content-padding) + var(--text-section-gap));
  --field-padding-mobile: 1.4rem;

  --form-input-padding: 1rem;
  --form-textarea-min-height: 5rem;

  --form-captcha-min-height: 78px;

  --form-link-underline-offset: 0.18em;
  --form-field-error-margin: 0;
  --form-actions-note-max-width: 50ch;

  --button-background: var(--color-primary);
  --button-padding: 1.5rem 2rem;
  --button-radius: var(--radius);
  --button-hover-translate: -0.0625rem;
  --button-hover-light-factor: 0.85;
  --button-hover-background: hsl(from var(--button-background) h s calc(l * var(--button-hover-light-factor)));
  --button-transition: var(--motion-default);
  --post-button-status-margin: var(--text-body-gap);

  --border-strong: 2px solid var(--color-primary);
  --border-accent: 2px solid var(--color-accent-green);
  --shadow-inset-primary: inset 0 1px 2px var(--color-primary);
  --shadow-inset-accent: inset 0 1px 2px var(--color-accent-green);
  --shadow-inset-error: inset 0 1px 2px var(--color-error);
  --fill-autofill: 0 0 0 1000px var(--color-background) inset;
  
  --form-radio-hover-scale: 1.06;
  --form-radio-outline-offset: 0.2rem;
  --form-radio-keyframe-start: 0.92;
  --form-radio-keyframe-mid: 1.05;
  --form-radio-keyframe-end: 1;

  --quote-radio-size: calc(var(--text-body-size) * 0.75);
  --quote-radio-ring: calc(var(--text-body-size) * 0.2);
  --quote-radio-column: calc(var(--quote-radio-size) + var(--quote-radio-ring) * 2);
}

.form-card {
  width: 100%;
  max-width: var(--form-card-max-width);
  border-radius: var(--radius);
  background: var(--color-accent-blue);
  margin-left: auto;
  margin-right: auto;
}

.form-card[hidden] {
  display: none;
}

.form-card-content {
  padding: var(--form-card-content-padding);
}

.form-card form {
  margin-top: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  justify-items: stretch;
  grid-template-columns: 1fr;
}

.form-button {
  --text-highlight-color: var(--color-background);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--text-list-gap);
  padding: var(--button-padding);
  border-radius: var(--button-radius);
  border: none;
  background: var(--button-background);
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform var(--button-transition), box-shadow var(--button-transition),
    background-color var(--button-transition);
  text-decoration: none;
}

.form-button:hover:not(:disabled),
.form-button:focus-visible:not(:disabled) {
  transform: translateY(var(--button-hover-translate));
  background: var(--button-hover-background);
  box-shadow: var(--shadow-cta-strong);
}

.form__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--text-list-gap);
  align-items: start;
  justify-content: stretch;
  justify-items: stretch;
  width: 100%;
  text-align: left;
  margin-top: var(--text-section-gap);
}

.form__actions .text-body-small {
  max-width: var(--form-actions-note-max-width);
}

.is-mobile .form__actions {
  grid-template-columns: 1fr;
  gap: var(--text-section-gap);
}

.is-mobile .form__actions .form-button {
  order: 1;
  width: 100%;
  justify-self: stretch;
}

.is-mobile .form__actions .text-flow {
  order: 2;
  width: 100%;
  max-width: none;
  --text-flow-gap: 0;
}

.is-mobile .form__actions .text-body-small {
  max-width: none;
}

.form__link {
  font-family: var(--text-font-family-body);
  font-weight: var(--text-weight-strong);
  letter-spacing: var(--text-letter-narrow);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--form-link-underline-offset);
}

.form__status {
  margin: var(--post-button-status-margin);
  color: var(--color-title);
  font-size: var(--text-body-small-size);
}

.form-captcha {
  min-height: var(--form-captcha-min-height);
  height: var(--form-captcha-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  overflow: hidden;
}

.form-captcha-section {
  position: relative;
  min-height: var(--form-captcha-min-height);
}

.form-captcha-section .form__field-error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  pointer-events: none;
}


.form-card form :is(input, textarea) {
  width: 100%;
  line-height: var(--text-line-base);
  border-radius: var(--radius);
  border: var(--border-accent);
  box-shadow: var(--shadow-inset-accent);
  background: var(--color-background);
  outline: none;
  transition: box-shadow var(--motion-default), border-color var(--motion-slow);
}

.form-card form input {
  padding: var(--form-input-padding);
}

.form-card form textarea {
  padding: var(--form-input-padding);
  min-height: var(--form-textarea-min-height);
  resize: vertical;
}

.is-mobile .form-card form input,
.is-mobile .form-card form textarea {
  padding: 0.6rem var(--field-padding-mobile);
}

.form-card form input:focus-visible:not(.is-error),
.form-card form input:hover:not(.is-error) {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-inset-primary);
}

.form-card form textarea:focus-visible:not(.is-error),
.form-card form textarea:hover:not(.is-error) {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-inset-primary);
}

.form-card form input::selection,
.form-card form textarea::selection {
  background: var(--color-primary);
  color: var(--color-background);
}

.form-card form input.is-error,
.form-card form textarea.is-error {
  border-color: var(--color-error);
  box-shadow: var(--shadow-inset-error);
}

.form-card form input:-webkit-autofill,
.form-card form textarea:-webkit-autofill {
  background-color: var(--color-background) !important;
  -webkit-text-fill-color: var(--color-body);
  font-family: var(--text-font-family-body) !important;
  font-size: var(--text-body-size) !important;
  font-weight: var(--text-body-weight) !important;
  letter-spacing: var(--text-body-letter) !important;
  text-shadow: none;
  border-color: var(--color-accent-green);
  -webkit-box-shadow: var(--shadow-inset-accent), var(--fill-autofill);
  box-shadow: var(--shadow-inset-accent), var(--fill-autofill);
  transition: box-shadow var(--motion-default), border-color var(--motion-slow);
}

.form-card form input:-webkit-autofill:focus,
.form-card form textarea:-webkit-autofill:focus {
  border-color: var(--color-primary);
  background-color: var(--color-background) !important;
  -webkit-box-shadow: var(--shadow-inset-primary), var(--fill-autofill);
  box-shadow: var(--shadow-inset-primary), var(--fill-autofill);
}

.form-card form input:-webkit-autofill:hover,
.form-card form textarea:-webkit-autofill:hover {
  border-color: var(--color-primary);
  background-color: var(--color-background) !important;
  -webkit-box-shadow: var(--shadow-inset-primary), var(--fill-autofill);
  box-shadow: var(--shadow-inset-primary), var(--fill-autofill);
}

.form__field-error {
  margin: var(--form-field-error-margin);
  color: var(--color-error);
  text-align: left;
}

.form-card form label {
  display: block;
  text-align: left;
}

.form-focus {
  scroll-margin-top: 0;
}

.form-card form .quote-radio input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  width: var(--quote-radio-size);
  height: var(--quote-radio-size);
  border-radius: 50%;
  border: var(--border-accent);
  background: var(--color-background);
  box-shadow: var(--shadow-inset-accent);
  padding: 0;
  margin: calc((1em * var(--text-body-line) - var(--quote-radio-size)) / 2) 0 0;
  justify-self: center;
  cursor: pointer;
  transition: transform var(--motion-default), box-shadow var(--motion-default),
    background-color var(--motion-default), border-color var(--motion-slow);
}

.quote-fieldset:not(.is-error) .quote-radio:hover input[type='radio']:not(:checked):not(:disabled) {
  box-shadow: var(--shadow-inset-primary);
  border-color: var(--color-primary);
  transform: scale(var(--form-radio-hover-scale));
}

.form-card form .quote-radio input[type='radio']:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-inset-primary), 0 0 0 var(--quote-radio-ring) var(--color-secondary);
  animation: quoteRadioSelect var(--motion-slow);
}

.form-card form .quote-fieldset.is-error .quote-radio input[type='radio'] {
  background: var(--color-background);
  border-color: var(--color-error);
  box-shadow: var(--shadow-inset-error);
}

.form-card form .quote-radio input[type='radio']:focus-visible {
  outline: var(--border-strong);
  outline-offset: var(--form-radio-outline-offset);
}

@keyframes quoteRadioSelect {
  0% {
    transform: scale(var(--form-radio-keyframe-start));
  }
  60% {
    transform: scale(var(--form-radio-keyframe-mid));
  }
  100% {
    transform: scale(var(--form-radio-keyframe-end));
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-card form .quote-radio input[type='radio']:checked {
    animation: none;
  }
}

.quote-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--text-list-gap);
}


.quote-fieldset legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--text-list-gap);
  text-align: left;
}

.form-card form .quote-radio {
  display: grid;
  grid-template-columns: var(--quote-radio-column) 1fr;
  align-items: start;
  column-gap: var(--text-list-gap);
  text-align: left;
}

.is-mobile .form-card-content {
   padding-block: var(--form-card-content-padding-mobile);
}