.help-hero { margin: 18px 0 28px; padding: 38px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #073b67, #087f8c); }
.help-hero h1 { margin: 6px 0 10px; font-size: 36px; }
.help-hero p { max-width: 760px; margin: 0; color: #e5f7f8; font-size: 17px; line-height: 1.65; }
.help-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: #8fe1df; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: start; }
.help-nav { position: sticky; top: 82px; padding: 18px; border: 1px solid #dce5ec; border-radius: 12px; background: #f7fafc; }
.help-nav strong { display: block; margin-bottom: 10px; color: #153b55; }
.help-nav a { display: block; padding: 8px 0; color: #087786; }
.help-section { margin-bottom: 30px; scroll-margin-top: 90px; }
.help-section h2 { padding-bottom: 9px; border-bottom: 2px solid #e4edf2; color: #123e59; }
.help-section h3 { margin-top: 24px; color: #18536d; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.help-card { display: block; height: 100%; padding: 22px; border: 1px solid #dbe5eb; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(18,62,89,.07); color: #334e60; }
.help-card:hover, .help-card:focus { border-color: #0795a3; text-decoration: none; transform: translateY(-2px); }
.help-card h2, .help-card h3 { margin-top: 0; color: #075f73; }
.help-card__link { color: #087f8c; font-weight: 700; }
.help-callout { margin: 18px 0; padding: 16px 18px; border-left: 4px solid #08a0aa; border-radius: 4px; background: #eefafa; }
.help-callout--warning { border-color: #e4a11b; background: #fff8e8; }
.help-steps { padding-left: 22px; }
.help-steps li { margin-bottom: 10px; line-height: 1.55; }
.help-table { width: 100%; margin: 14px 0 22px; border-collapse: collapse; }
.help-table th, .help-table td { padding: 11px; border: 1px solid #dce5ec; text-align: left; vertical-align: top; }
.help-table th { background: #eef5f7; color: #17465f; }
.help-table code { white-space: nowrap; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 800px) { .help-layout { grid-template-columns: 1fr; } .help-nav { position: static; order: -1; } .help-grid { grid-template-columns: 1fr; } .help-hero { padding: 26px 22px; } .help-hero h1 { font-size: 29px; } }