.feature-symbol {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #7950c8, #277fa2);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
}

.support-hero {
  padding: 80px max(24px, calc((100vw - 1120px) / 2)) 55px;
  background: linear-gradient(155deg, #f8f1ff, #fffaf2);
}

.support-hero h1 {
  max-width: 900px;
  margin: 16px 0 24px;
  font: 700 clamp(3rem, 7vw, 5.8rem) / 0.98 Georgia, serif;
  letter-spacing: -0.045em;
}

.support-hero p {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.18rem;
}

.support-layout {
  max-width: 1180px;
  margin: auto;
  padding: 55px 24px 110px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.support-nav {
  position: sticky;
  top: 110px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
}

.support-nav strong { display: block; margin-bottom: 10px; }
.support-nav a {
  display: block;
  padding: 7px 9px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.support-nav a:hover { color: var(--purple); background: #f7f2ff; }
.support-content { min-width: 0; }
.support-intro {
  margin-bottom: 32px;
  padding: 26px;
  background: #f1f9fc;
  border: 1px solid #dcecf1;
  border-radius: 22px;
}
.support-section {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.support-section:first-child { padding-top: 0; }
.support-section h2 {
  margin-bottom: 12px;
  font: 700 clamp(2rem, 4vw, 3rem) / 1.05 Georgia, serif;
  letter-spacing: -0.025em;
}
.support-section > p { color: var(--muted); }
.support-steps {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}
.support-steps li {
  position: relative;
  padding: 17px 18px 17px 58px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  counter-increment: steps;
}
.support-steps li::before {
  content: counter(steps);
  position: absolute;
  top: 14px;
  left: 16px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--purple);
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 22px;
}
.guide-card {
  padding: 21px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.guide-card h3 { margin-bottom: 8px; }
.guide-card p, .guide-card li { color: var(--muted); font-size: 0.95rem; }
.guide-card ul { margin: 10px 0 0; padding-left: 19px; }
.guide-card li { margin: 6px 0; }
.support-content details {
  margin: 11px 0;
  padding: 17px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.support-content summary { cursor: pointer; font-weight: 850; }
.support-content details p { margin: 12px 0 0; color: var(--muted); }
.callout {
  padding: 18px 20px;
  background: #f8f4ff;
  border-left: 4px solid var(--purple);
  border-radius: 0 14px 14px 0;
  color: var(--muted);
}
.support-contact {
  margin-top: 38px;
  padding: 30px;
  background: linear-gradient(135deg, #2b214d, #6943ae);
  border-radius: 24px;
  color: #fff;
}
.support-contact p { opacity: 0.82; }
.support-contact .button { margin-top: 8px; }

@media (max-width: 850px) {
  .support-layout { grid-template-columns: 1fr; }
  .support-nav { position: static; columns: 2; }
  .support-nav strong { column-span: all; }
  .support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .support-nav { columns: 1; }
  .support-hero { padding-top: 55px; }
  .support-section { padding: 28px 0; }
}