/* Contact + Request — centered, cardless forms using the approved Sign in UI. */
:where(.contact-page,.request-page) {
  min-height:100svh !important;
  background-color:#101011 !important;
  background-image:var(--site-gradient) !important;
  background-position:0 0 !important;
  background-size:auto !important;
  background-repeat:no-repeat !important;
  color:#f5f5f2 !important;
}

.contact-page > main,
.request-page .request-main {
  width:min(calc(100% - 80px),680px) !important;
  max-width:680px !important;
  margin:0 auto !important;
  padding:180px 0 72px !important;
  background:transparent !important;
}

.contact-page > main > header,
.request-page .request-intro {
  margin:0 !important;
  text-align:center !important;
}

.contact-page > main > header h1,
.request-page .request-intro h1 {
  max-width:620px !important;
  margin:0 auto !important;
  color:#f5f5f2 !important;
  font:650 36px/1.02 var(--sans) !important;
  letter-spacing:-.048em !important;
  text-wrap:balance !important;
  overflow-wrap:normal !important;
}

.contact-page > main > header p,
.request-page .request-intro p {
  max-width:520px !important;
  margin:12px auto 0 !important;
  color:#93938e !important;
  font:450 16px/1.45 var(--sans) !important;
  letter-spacing:-.008em !important;
  text-wrap:balance !important;
}

.contact-page #contact-form,
.request-page .request-form {
  width:100% !important;
  max-width:680px !important;
  margin:32px 0 0 !important;
  display:grid !important;
}

.contact-page #contact-form label,
.request-page .request-form label {
  margin:0 0 7px !important;
  color:#d9d9d4 !important;
  font:680 11px/1.2 var(--sans) !important;
}

.request-page .request-form label small {
  margin-left:5px !important;
  color:#858580 !important;
  font-size:9px !important;
  font-weight:550 !important;
}

.contact-page #contact-form input,
.contact-page #contact-form textarea,
.request-page .request-form input,
.request-page .request-form textarea {
  width:100% !important;
  margin:0 0 14px !important;
  padding-inline:15px !important;
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:12px !important;
  outline:none !important;
  background:#eeeee9 !important;
  color:#151515 !important;
  font:480 15px/1.45 var(--sans) !important;
  box-shadow:inset 0 1px 0 #fff,0 7px 18px -15px rgba(0,0,0,.9) !important;
}

.contact-page #contact-form input,
.request-page .request-form input {
  height:50px !important;
  min-height:50px !important;
  padding-block:0 !important;
}

.contact-page #contact-form textarea,
.request-page .request-form textarea {
  min-height:150px !important;
  padding-block:14px !important;
  resize:vertical !important;
}

.request-page .request-form textarea { min-height:174px !important; }

.contact-page #contact-form input::placeholder,
.contact-page #contact-form textarea::placeholder,
.request-page .request-form input::placeholder,
.request-page .request-form textarea::placeholder {
  color:#777772 !important;
  opacity:1 !important;
}

.contact-page #contact-form input:focus,
.contact-page #contact-form textarea:focus,
.request-page .request-form input:focus,
.request-page .request-form textarea:focus {
  border-color:#fff !important;
  background:#f7f7f3 !important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(255,255,255,.11) !important;
}

.contact-page .contact-identity.is-account input,
.request-page .request-form__identity.is-account input {
  border-color:rgba(255,255,255,.52) !important;
  background:#dcdcd7 !important;
  color:#555550 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.contact-page .contact-identity__account-note,
.request-page .request-form__account-note {
  min-height:25px !important;
  margin:-4px 0 14px !important;
  padding:0 2px !important;
  color:#888883 !important;
  font:620 10px/1.3 var(--sans) !important;
}

.contact-page #contact-form [aria-invalid="true"],
.request-page .request-form [aria-invalid="true"] {
  border-color:#c95d68 !important;
  box-shadow:0 0 0 3px rgba(201,93,104,.1) !important;
}

.contact-page #contact-form button[type="submit"],
.request-page .request-form button[type="submit"] {
  width:100% !important;
  min-height:52px !important;
  margin-top:3px !important;
  border:1px solid var(--ds-primary) !important;
  border-radius:12px !important;
  background:var(--ds-primary) !important;
  color:#fff !important;
  font:760 14px/1 var(--sans) !important;
  box-shadow:none !important;
  transform:none !important;
}

.contact-page #contact-form button[type="submit"]:hover,
.request-page .request-form button[type="submit"]:hover {
  border-color:var(--ds-primary-hover) !important;
  background:var(--ds-primary-hover) !important;
  color:#fff !important;
  transform:none !important;
}

.contact-page #contact-form button[type="submit"]:active,
.request-page .request-form button[type="submit"]:active {
  border-color:var(--ds-primary-active) !important;
  background:var(--ds-primary-active) !important;
}

:where(.contact-page,.request-page) .form-status {
  min-height:14px !important;
  margin:8px 0 0 !important;
  color:#e4818b !important;
  font:550 10.5px/1.4 var(--sans) !important;
  text-align:center !important;
}

:where(.contact-page,.request-page) .form-status.is-success { color:#77c79b !important; }

:where(.contact-page,.request-page) .site-footer {
  margin-top:0 !important;
  background:transparent !important;
}

@media (max-width:680px) {
  .contact-page > main,
  .request-page .request-main {
    width:100% !important;
    padding:106px 20px 48px !important;
    box-sizing:border-box !important;
  }

  .contact-page > main > header h1,
  .request-page .request-intro h1 {
    font-size:31px !important;
  }

  .contact-page > main > header p,
  .request-page .request-intro p {
    display:none !important;
  }

  .contact-page #contact-form,
  .request-page .request-form { margin-top:27px !important; }

  .contact-page #contact-form input,
  .contact-page #contact-form textarea,
  .request-page .request-form input,
  .request-page .request-form textarea {
    font-size:16px !important;
    touch-action:manipulation !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  .contact-page #contact-form input:focus,
  .contact-page #contact-form input:focus-visible,
  .contact-page #contact-form textarea:focus,
  .contact-page #contact-form textarea:focus-visible,
  .request-page .request-form input:focus,
  .request-page .request-form input:focus-visible,
  .request-page .request-form textarea:focus,
  .request-page .request-form textarea:focus-visible {
    outline:none !important;
    border-color:rgba(255,255,255,.7) !important;
    background:#eeeee9 !important;
    box-shadow:inset 0 1px 0 #fff,0 7px 18px -15px rgba(0,0,0,.9) !important;
  }
}

@media (max-width:360px) {
  .contact-page > main,
  .request-page .request-main { padding-inline:14px !important; }
}

@media (prefers-reduced-motion:reduce) {
  .contact-page #contact-form input,
  .contact-page #contact-form textarea,
  .request-page .request-form input,
  .request-page .request-form textarea { transition:none !important; }
}

@media (min-width:681px) {
  body.contact-page.site-shell-page > main { background:transparent !important; }
}

/* Desktop keeps the same focused, single-column form rhythm as mobile. */
@media (min-width:901px) {
  html body.contact-page.site-shell-page > main,
  html body.request-page.site-shell-page > main.request-main {
    width:min(calc(100% - 80px),520px) !important;
    max-width:520px !important;
  }

  html body.contact-page.site-shell-page #contact-form,
  html body.request-page.site-shell-page .request-form {
    max-width:520px !important;
    margin-top:32px !important;
  }
}

/* The dark system declares solid page backgrounds with higher specificity.
   Keep the form-page atmosphere as the final owner of these two canvases. */
html body.contact-page.site-shell-page,
html body.request-page.site-shell-page {
  background-color:#101011 !important;
  background-image:var(--site-gradient) !important;
  background-position:0 0 !important;
  background-size:auto !important;
  background-repeat:no-repeat !important;
}

html body.contact-page.site-shell-page > main,
html body.request-page.site-shell-page > main.request-main {
  background-color:transparent !important;
  background-image:none !important;
}