.help-hero {
            text-align: center;
            padding: 60px 20px 40px;
        }

        .help-hero h1 {
            font-size: 3rem;
            margin-bottom: 12px;
        }

        .help-hero .subtitle {
            font-family: var(--font-hand);
            font-size: 1.4rem;
            color: var(--ink-light);
        }

        .help-body {
            max-width: 860px;
            margin: 0 auto;
            padding: 0 20px 80px;
        }

        /* ── Tab Navigation ── */

        .track-tabs {
            display: flex;
            gap: 0;
            border-bottom: var(--border-sketch);
            margin-bottom: 40px;
            overflow-x: auto;
        }

        .track-tab {
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.05rem;
            padding: 14px 28px;
            cursor: pointer;
            border: var(--border-sketch);
            border-bottom: none;
            background: var(--paper-alt);
            color: var(--ink-faint);
            margin-right: -2px;
            white-space: nowrap;
            transition: background 0.15s, color 0.15s;
            user-select: none;
        }

        .track-tab:hover {
            background: var(--paper-warm);
            color: var(--ink);
        }

        .track-tab.active {
            background: var(--paper);
            color: var(--ink);
            border-bottom: 3px solid var(--paper);
            margin-bottom: -2px;
            z-index: 1;
            position: relative;
        }

        .track-tab.student.active { border-top: 3px solid var(--accent-red); }
        .track-tab.coach.active   { border-top: 3px solid var(--accent-gold); }
        .track-tab.industry.active { border-top: 3px solid var(--success); }

        /* ── Track Panels ── */

        .track-panel {
            display: none;
        }

        .track-panel.active {
            display: block;
        }

        /* ── Step List ── */

        .steps {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .step {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 0;
            border: var(--border-sketch);
            border-bottom: none;
            background: var(--paper);
            transition: background 0.15s;
        }

        .step:last-child {
            border-bottom: var(--border-sketch);
        }

        .step:hover {
            background: var(--paper-warm);
        }

        .step-number {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 20px 0 20px;
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.6rem;
            color: var(--ink-faint);
            border-right: var(--border-sketch);
        }

        .step-body {
            padding: 18px 20px;
        }

        .step-title {
            font-family: var(--font-body); font-weight: 700;
            font-size: 1.15rem;
            margin-bottom: 4px;
            line-height: 1.3;
        }

        .step-desc {
            font-family: var(--font-read);
            font-size: 0.95rem;
            color: var(--ink-light);
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .step-action {
            display: inline-block;
            font-family: var(--font-hand);
            font-size: 1rem;
            font-weight: 700;
            padding: 6px 16px;
            border: var(--border-sketch);
            border-radius: var(--radius);
            background: var(--paper);
            color: var(--ink);
            text-decoration: none;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .step-action:hover {
            transform: translate(-1px, -1px);
            box-shadow: var(--shadow-lift);
            text-decoration: none;
        }

        .step-action.gold {
            background: var(--accent-gold);
            border-color: var(--accent-gold);
        }

        .step-action.dark {
            background: var(--ink);
            color: var(--paper);
        }

        .step-action.green {
            background: var(--success);
            color: white;
            border-color: var(--success);
        }

        /* Step accent colors by track */
        .panel-student .step-number { color: var(--accent-red); }
        .panel-coach   .step-number { color: var(--accent-gold); }
        .panel-industry .step-number { color: var(--success); }

        /* ── Track intro banner ── */

        .track-intro {
            padding: 20px 24px;
            border: var(--border-sketch);
            margin-bottom: 28px;
            font-family: var(--font-hand);
            font-size: 1.2rem;
            line-height: 1.5;
        }

        .track-intro.student { background: var(--accent-red-light); border-color: var(--accent-red); }
        .track-intro.coach   { background: var(--accent-gold-light); border-color: var(--accent-gold); }
        .track-intro.industry { background: #d5e9d8; border-color: var(--success); }

        .track-intro strong {
            font-family: var(--font-body); font-weight: 700;
        }

        /* ── Quick links strip ── */

        .quick-links {
            background: var(--paper-warm);
            border: var(--border-sketch);
            padding: 24px;
            margin-top: 40px;
        }

        .quick-links h3 {
            font-size: 1.1rem;
            margin-bottom: 14px;
        }

        .quick-links-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 8px;
        }

        .quick-link-item {
            font-family: var(--font-hand);
            font-size: 1rem;
            font-weight: 600;
            padding: 8px 14px;
            border: 1px solid #ccc;
            background: var(--paper);
            color: var(--ink);
            text-decoration: none;
            display: block;
            transition: transform 0.1s, box-shadow 0.1s;
        }

        .quick-link-item:hover {
            transform: translate(-1px, -1px);
            box-shadow: var(--shadow-paper);
            text-decoration: none;
            color: var(--accent-red);
        }

        .help-footer-note {
            text-align: center;
            margin-top: 48px;
            padding: 24px;
            border: var(--border-sketch);
            background: var(--paper-warm);
        }

        .help-footer-note p {
            font-family: var(--font-hand);
            font-size: 1.2rem;
            color: var(--ink-light);
        }

        .help-footer-note p + p {
            margin-top: 8px;
        }