.help-page { background: #f8fafc; color: #101828; }
.help-header { background: rgba(255,255,255,.94); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 40; }
.help-header-actions { gap: 10px; }
.help-hero { padding-top: clamp(52px,8vw,104px); padding-bottom: 28px; text-align: center; }
.help-hero > h1 { max-width: 900px; margin: 10px auto 16px; font-size: clamp(2.35rem,6vw,4.8rem); line-height: .98; letter-spacing: -.055em; }
.help-hero > p { max-width: 780px; margin: 0 auto; color: #667085; font-size: clamp(1rem,1.7vw,1.15rem); line-height: 1.65; }
.help-mode-grid { margin: 40px auto 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; text-align: left; max-width: 1040px; }
.help-mode-card { min-width: 0; border: 1px solid #e4e7ec; border-radius: 24px; background: #fff; padding: 24px; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 17px; box-shadow: 0 16px 50px rgba(16,24,40,.055); }
.help-mode-card.search-mode { border-top: 4px solid #2563eb; }
.help-mode-card.track-mode { border-top: 4px solid #0f9f6e; }
.help-mode-icon { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; font-weight: 900; font-size: 1.55rem; background: #eef4ff; color: #1d4ed8; }
.track-mode .help-mode-icon { background: #ecfdf3; color: #067647; }
.help-mode-tag { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.help-mode-card h2 { margin: 8px 0 7px; font-size: 1.45rem; }
.help-mode-card p { margin: 0; color: #667085; line-height: 1.6; }

.help-section { padding-top: 44px; padding-bottom: 16px; }
.help-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.help-section-head h2 { margin: 0; font-size: clamp(1.55rem,3vw,2.2rem); }
.help-step-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.help-step-grid article { border: 1px solid #e4e7ec; border-radius: 18px; background: #fff; padding: 20px; min-width: 0; }
.help-step-grid b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #111827; color: #fff; margin-bottom: 17px; }
.help-step-grid p { margin: 0; color: #475467; line-height: 1.55; }

.help-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.help-detail-card { border: 1px solid #e4e7ec; border-radius: 20px; padding: 24px; background: #fff; }
.help-detail-card h2 { margin: 8px 0 9px; font-size: 1.35rem; }
.help-detail-card p { color: #667085; line-height: 1.6; margin: 0; }
.help-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.help-chip-row span { border: 1px solid #dfe3ea; background: #f8fafc; color: #475467; border-radius: 999px; padding: 7px 10px; font-size: .76rem; font-weight: 750; }

.help-tip { margin-top: 30px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid #bfd0ff; border-radius: 18px; background: #eef4ff; }
.help-tip-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; background: #2563eb; color: #fff; font-weight: 900; }
.help-tip p { margin: 0; color: #1e3a8a; line-height: 1.5; font-weight: 650; }
.help-cta { margin-top: 46px; margin-bottom: 58px; border-radius: 24px; padding: 28px; background: #111827; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.help-cta h2 { margin: 7px 0 0; max-width: 700px; font-size: clamp(1.45rem,3vw,2.25rem); }
.help-cta .eyebrow { color: #93c5fd; }
.help-cta .button { flex: 0 0 auto; }

@media (max-width: 920px) {
  .help-step-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .help-header .brand small { display: none; }
  .help-header-actions .button { padding-inline: 11px; }
  .help-mode-grid, .help-detail-grid { grid-template-columns: 1fr; }
  .help-hero { padding-top: 42px; }
  .help-hero > h1 { font-size: clamp(2.1rem,10vw,3.4rem); }
  .help-cta { align-items: stretch; flex-direction: column; }
  .help-cta .button { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .help-header .header-inner { gap: 8px; }
  .help-header-actions { gap: 6px; }
  .help-header-actions .button { font-size: .74rem; min-height: 40px; }
  .help-mode-card { grid-template-columns: 44px minmax(0,1fr); padding: 18px; border-radius: 19px; }
  .help-mode-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 1.2rem; }
  .help-step-grid { grid-template-columns: 1fr; }
  .help-detail-card { padding: 20px; }
  .help-tip { align-items: flex-start; }
  .help-cta { padding: 22px; border-radius: 20px; }
}
@media (max-width: 370px) {
  .help-header-actions .button { max-width: 118px; white-space: normal; line-height: 1.15; text-align: center; }
}