/* Support pages share the site's slate surfaces and quiet bronze accents. */
.support-page {
  --support-border: #34414b;
  --support-copy: #b8c5ce;
  font: 15px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #dce4ea;
}
.support-page.panel {padding: 36px; background: #11191f; border-color: #34414b;}
.support-page .support-header {padding: 0 0 30px; margin: 0; border-bottom: 1px solid var(--support-border);}
.support-page .support-header .eyebrow {margin-bottom: 12px; font-size: 10px; letter-spacing: 2.5px;}
.support-page .support-header h1 {font: 500 clamp(36px, 4vw, 54px)/1.08 var(--serif); letter-spacing: -.5px; margin: 0 0 16px; color: #e4e9ed;}
.support-page .support-header > p:not(.eyebrow),
.support-page .support-intro {max-width: 680px; font-size: 15px; line-height: 1.75; color: var(--support-copy);}
.support-page .support-copy {font: inherit;}
.support-page .support-shell {padding-top: 28px;}
.support-page .support-methods {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;}
.support-page .support-card {position: relative; display: flex; flex-direction: column; min-width: 0; padding: 27px 24px; border: 1px solid var(--support-border); background: #17212a;}
.support-page .support-card--primary {border-color: #776448; background: radial-gradient(ellipse at 0 0, #c4a47716, transparent 70%), #17212a;}
.support-page .support-card-number {display: block; margin-bottom: 25px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 1.5px; color: #94a6b3;}
.support-page .support-card--primary .support-card-number {color: #d2b88e;}
.support-page .support-kicker {font-size: 9px; letter-spacing: 1.3px; line-height: 1.6; font-weight: 600; color: #abbac5; margin-bottom: 10px;}
.support-page .support-card--primary .support-kicker {color: #d2b88e;}
.support-page .support-card-title {font: 600 22px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: -.4px; color: #e2e8ec; margin: 0 0 12px;}
.support-page .support-card-copy {font-size: 14px; line-height: 1.75; color: var(--support-copy); margin-bottom: 24px;}
.support-page .support-actions {display: flex; flex-direction: column; gap: 10px; margin-top: auto;}
.support-page .btn {font: 600 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; min-height: 46px; padding: 12px 17px; border-radius: 0; color: #111519; text-decoration: none;}
.support-page .btn:hover {color: #111519;}
.support-page .btn.btn-secondary {color: #d9e3ea; border-color: #576673; background: #111b2370;}
.support-page .btn.btn-secondary:hover {color: #f0d0a0; border-color: #9b805b; background: #c4a4770d;}
.support-page .support-details {margin-top: 24px; padding: 26px 28px; border: 1px solid var(--support-border); background: #141e26;}
.support-page .support-details h2 {font: 600 19px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; margin: 0 0 18px; color: #e2e8ec;}
.support-page .support-details p {font-size: 14px; line-height: 1.85; color: var(--support-copy); margin: 0;}
.support-page .support-details p + p {margin-top: 12px;}
.support-page .support-details strong, .support-page .support-details b, .support-page .support-details span {color: #dce4ea; font-weight: 600;}
.support-page .support-details a:not(.btn) {color: #d8bd93; text-decoration: underline; text-underline-offset: 4px;}
.support-page .support-policies {display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--support-border);}
.support-page .support-policies a {display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; line-height: 1.6; color: #abbac5; text-decoration: underline; text-underline-offset: 4px;}
.support-page .support-policies a:hover {color: #e4c393;}

/* The signed-in payment form keeps every provider field and endpoint. */
.support-page.support-payment-page {padding-bottom: 24px;}
.support-page .support-account {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border: 1px solid var(--support-border); width: fit-content; margin-top: 22px; font-size: 13px; color: #aabac6;}
.support-page .support-account strong {color: #e3c59a; font-weight: 600;}
.support-page .support-payment-layout {display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 28px;}
.support-page .support-payment-panel, .support-page .support-account-card {min-width: 0; padding: 28px; border: 1px solid var(--support-border); background: #17212a;}
.support-page .support-payment-panel > h2, .support-page .support-account-card > h2 {font: 600 22px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; margin: 0 0 16px;}
.support-page .support-payment-panel > .eyebrow, .support-page .support-account-card > .eyebrow {font-size: 9px; letter-spacing: 1.7px; margin-bottom: 10px;}
.support-page .donation-tabs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0; gap: 10px; padding: 0; border: 0;}
.support-page .donation-tab {display: block; text-align: left; min-width: 0; padding: 15px 17px; background: #101a22; color: #c4d1da; border: 1px solid #40515e; font: 600 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;}
.support-page .donation-tab span {display: block; color: #9cabb6; font-size: 11px; font-weight: 400; margin-top: 5px;}
.support-page .donation-tab.active {border-color: #a48960; background: #c4a4770c; color: #ecd0a6;}
.support-page .donation-tab.active span {color: #c2b29b;}
.support-page .donation-tab:hover {border-color: #a48960;}
.support-page .donation-form-group {margin: 20px 0 24px;}
.support-page .donation-form-group label {font-size: 14px; font-weight: 600; color: #dce4ea; margin-bottom: 8px;}
.support-page .donation-form-group p, .support-page .donation-form-group .muted {font-size: 13px; color: #aebdc9; line-height: 1.7;}
.support-page .donation-form-group input {font: 500 20px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #e5ebef; background: #0f1921; border: 1px solid #506271; padding: 13px 16px; min-height: 54px; border-radius: 0; margin-top: 16px; width: 100%;}
.support-page .payment-form .btn {font-size: 14px; width: 100%; margin-top: 0; min-height: 50px;}
.support-page .donation-message {font-size: 13px; line-height: 1.7; margin-top: 16px; color: #bac8d2;}
.support-page .donation-message:empty {display: none;}
.support-page .donation-message.field-error {color: #efb3a9;}
.support-page .support-account-card p {font-size: 14px; line-height: 1.8; color: #b8c5ce;}
.support-page .support-checklist {list-style: none; counter-reset: payment; padding: 0; margin: 22px 0 24px;}
.support-page .support-checklist li {display: flex; align-items: flex-start; gap: 12px; counter-increment: payment; border-top: 1px solid #34414b; padding: 13px 0; color: #bdcbd5; font-size: 13px; line-height: 1.7;}
.support-page .support-checklist li::before {content: "0" counter(payment); color: #d2b88e; font-size: 10px; line-height: 2.2; letter-spacing: 1px; flex-shrink: 0;}
.support-page .support-account-card .notice {display: block; margin: 0 0 22px; padding: 17px; background: #101a22; border: 1px solid #56604f; color: #bac8d2; font-size: 13px; line-height: 1.8;}
.support-page .support-account-card .notice strong {color: #e5c99e;}
.support-page .support-account-card .btn {width: 100%;}
.support-page .support-account-card .support-agreement {display: block; margin-top: 16px; color: #b5c4cf; font-size: 12px; text-decoration: underline; text-underline-offset: 4px;}
@media (max-width: 1000px) {
  .support-page .support-methods {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .support-page .support-card--primary {grid-column: 1 / -1;}
  .support-page .support-card--primary .support-actions {align-items: flex-start;}
  .support-page .support-card-number {margin-bottom: 18px;}
  .support-page .support-payment-layout {grid-template-columns: minmax(0, 1fr) 280px; gap: 18px;}
  .support-page .support-payment-panel, .support-page .support-account-card {padding: 24px;}
}
@media (max-width: 760px) {
  .support-page.panel {padding: 25px;}
  .support-page .support-payment-layout {grid-template-columns: minmax(0, 1fr);}
  .support-page .support-header {padding-bottom: 24px;}
}
@media (max-width: 520px) {
  .support-page.panel {padding: 22px 18px;}
  .support-page .support-methods {grid-template-columns: minmax(0, 1fr); gap: 14px;}
  .support-page .support-card {padding: 24px 22px;}
  .support-page .support-card--primary {grid-column: auto;}
  .support-page .support-card--primary .support-actions {align-items: stretch;}
  .support-page .support-card-title {font-size: 21px;}
  .support-page .support-details {padding: 23px 22px; margin-top: 18px;}
  .support-page .support-policies {gap: 12px; flex-direction: column;}
  .support-page .support-payment-panel, .support-page .support-account-card {padding: 23px 20px;}
  .support-page .donation-tabs {grid-template-columns: minmax(0, 1fr);}
}