.help-page { background: var(--paper); color: var(--ink); }
.help-hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); background: linear-gradient(135deg, var(--ink) 0%, #17234d 100%); color: var(--hup-white); }
.help-hero .eyebrow { color: var(--hup-brand); }
.help-page .help-hero h1 { margin: .6rem 0 1rem; color: var(--hup-white); }
.help-hero p:not(.eyebrow) { max-width: 42rem; margin: 0; color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.65; }
.help-systems { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.help-systems h2 { margin: 0 0 1.5rem; }
.help-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.help-card { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 7rem; padding: 1.25rem 1.35rem 1.25rem 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--hup-white); color: var(--ink); text-decoration: none; box-shadow: 0 8px 24px rgba(0,12,57,.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.help-card:hover { transform: translateY(-2px); border-color: var(--help-accent); box-shadow: 0 12px 28px rgba(0,12,57,.12); }
.help-card:focus-visible { outline: 3px solid var(--hup-brand); outline-offset: 3px; }
.help-card__accent { width: .35rem; align-self: stretch; flex: 0 0 .35rem; border-radius: .3rem; background: var(--help-accent); }
.help-card__body { display: grid; gap: .35rem; min-width: 0; }
.help-card__body strong { font-size: 1.15rem; }
.help-card__body span { color: #545454; font-size: .95rem; }
.help-card__arrow { margin-left: auto; color: var(--help-accent); font-size: 1.5rem; line-height: 1; }
@media (min-width: 48rem) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }