/* Consistent spacing for the lower sections; keep type and image proportions. */
#plans,
#support,
#contact,
#faq {
  --lower-section-space: 48px;
  --lower-block-space: 24px;
  --lower-copy-space: 16px;
}

#plans,
#support,
#faq {
  padding-block: var(--lower-section-space);
}

#plans .plan-grid {
  margin-top: var(--lower-block-space);
}

#plans .plan {
  padding-block: 20px;
}

#plans .plan .price,
#plans .plan .plan-target {
  margin-top: 12px;
}

#plans .plan-common {
  padding-block: 20px 12px;
  gap: 8px 24px;
}

#plans #full-features {
  margin-top: 20px;
}

#plans #full-features .feature-categories {
  margin-top: 20px;
  row-gap: 20px;
}

#plans #full-features .feature-category {
  padding-top: var(--lower-copy-space);
}

#support .support-heading p:last-child {
  margin-top: var(--lower-copy-space);
}

#support .steps {
  margin-top: var(--lower-block-space);
}

#support .steps li {
  padding-top: var(--lower-copy-space);
}

#support .steps h3 {
  margin-top: 8px;
}

#contact {
  padding-block: 24px var(--lower-section-space);
}

#contact .section-heading > p:last-child {
  margin-top: var(--lower-copy-space);
}

#contact .contact-toolbar {
  margin-top: 20px;
  padding-bottom: 0;
  border-bottom: 0;
}

#contact .generic-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--divider-content-rule);
}

#faq .faq-list {
  margin-top: var(--lower-block-space);
}

#faq .faq-right .faq-list {
  margin-top: 0;
}

footer.salon-footer {
  padding-block: 28px 20px;
}

.salon-footer .footer-message {
  margin-bottom: 20px;
}

.salon-footer .footer-top {
  margin-bottom: 20px;
}

@media (min-width: 901px) {
  #contact > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 32px;
  }

  #contact .section-heading {
    display: contents;
  }

  #contact .section-heading > .eyebrow,
  #contact .section-heading > h2 {
    grid-column: 1 / -1;
  }

  #contact .section-heading > p:not(.eyebrow) {
    grid-column: 1;
    min-width: 0;
  }

  #contact .contact-toolbar {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    max-width: 240px;
    margin-top: 0;
  }

  #contact .contact-toolbar > #selection {
    margin: 0;
    overflow-wrap: anywhere;
  }

  #contact .generic-form {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  #plans,
  #support,
  #contact,
  #faq {
    --lower-section-space: 32px;
    --lower-block-space: 20px;
    --lower-copy-space: 12px;
  }

  #plans .plan {
    padding-block: 16px;
  }

  #plans .plan .price,
  #plans .plan .plan-target {
    margin-top: 10px;
  }

  #plans .plan-common {
    padding-top: 16px;
  }

  #plans #full-features {
    margin-top: 16px;
  }

  #plans #full-features .feature-categories {
    margin-top: 0;
    row-gap: 16px;
  }

  #support .steps {
    margin-top: 16px;
  }

  #support .steps li {
    padding-block: 12px;
  }

  #support .steps h3 {
    margin-top: 0;
  }

  #contact {
    padding-top: 20px;
  }

  #contact .contact-toolbar,
  #contact .generic-form {
    margin-top: 16px;
  }

  #contact .contact-toolbar > .button {
    margin-top: 0;
  }

  #contact .contact-toolbar > #selection:not(:empty) + .button {
    margin-top: 12px;
  }

  #contact .generic-form {
    padding-top: 16px;
  }

  footer.salon-footer {
    padding-top: 20px;
  }

  .salon-footer .footer-message,
  .salon-footer .footer-top {
    margin-bottom: 16px;
  }
}