.support-main {
  padding-top: 58px;
}

.support-hero {
  background: linear-gradient(135deg, #eef4f1 0%, #f7f8f5 58%, #f6eadf 100%);
}

.support-intro,
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 64px;
  align-items: center;
}

.support-profile {
  display: grid;
  gap: 14px;
  width: 156px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.support-profile:hover {
  border-color: var(--copper);
  color: var(--copper-dark);
}

.support-profile img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 46%;
  border-radius: 9px;
}

.support-profile span {
  font-size: 0.78rem;
  line-height: 1.35;
}

.section-support-form {
  background: var(--surface);
}

.support-layout {
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1.38fr);
  align-items: start;
}

.support-copy {
  position: sticky;
  top: 92px;
}

.support-copy p,
.support-copy li {
  color: var(--muted);
}

.support-copy ul {
  padding-left: 22px;
}

.maker-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.45;
}

.maker-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.maker-note img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 46%;
}

.maker-note strong {
  display: block;
  color: var(--ink);
}

.maker-note a:not(.maker-avatar) {
  color: var(--copper-dark);
  font-weight: 700;
}

.support-form {
  display: grid;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
  box-shadow: var(--shadow);
}

.file-field small {
  color: var(--muted);
  font-weight: 500;
}

.support-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-status.is-error {
  color: #a0271d;
  font-weight: 700;
}

.form-status.is-success {
  color: #126554;
  font-weight: 700;
}

@media (max-width: 850px) {
  .support-intro,
  .support-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .support-profile {
    width: 144px;
    max-width: 100%;
  }

  .support-copy {
    position: static;
  }
}

@media (max-width: 600px) {
  .support-form {
    padding: 20px;
  }

  .support-form .form-grid {
    grid-template-columns: 1fr;
  }
}