/* Help page layout. Tokens only, from public/css/sns.css. */

.hp-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-8);
}
.hp-head .sns-type-lead { margin: 0; }
.hp-search {
  width: 100%;
  max-width: 480px;
  margin-top: var(--s-3);
}

/* Category tiles */
.hp-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}
.hp-tile {
  display: block;
  padding: var(--s-6);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.hp-tile .sns-icon-circle { margin-bottom: var(--s-4); }
.hp-tile h2 { margin: 0 0 var(--s-2); }
.hp-tile p { margin: 0; }
.hp-tile:hover {
  border-color: var(--sns-line-strong);
  box-shadow: var(--sh-sm);
}

/* Topic sections */
.hp-section { margin-bottom: var(--s-10); }
.hp-section .sns-type-h2 { margin-bottom: var(--s-5); }
.hp-section .sns-card { margin-bottom: var(--s-5); }
.hp-section .sns-card:last-child { margin-bottom: 0; }
.hp-steps { margin: 0; padding-left: var(--s-5); color: var(--sns-ink-3); }
.hp-steps li { margin-bottom: var(--s-2); }
.hp-section a, .hp-steps a { color: var(--sns-brand-ink); }

/* Still need a hand? band (uses .sns-band from sns.css) */
.hp-band {
  padding: var(--s-12) 0;
}
.hp-band-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}
.hp-band-inner h2 { margin: 0; }
.hp-band-inner .sns-type-lead { margin: 0 0 var(--s-2); }
.hp-band-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

/* Feedback form inside the band */
.hp-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-5);
  text-align: left;
}
.hp-form .sns-field label { display: block; margin-bottom: var(--s-2); color: var(--sns-ink-2); font-size: var(--fs-sm); font-weight: 500; }
.hp-form textarea.sns-input { min-height: 120px; resize: vertical; }
.hp-form-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

@media (max-width: 800px) {
  .hp-tiles { grid-template-columns: 1fr; }
}