:root {
    --help-primary: #300060;
    --help-primary-deep: #190033;
    --help-secondary: #0098f8;
    --help-accent: #49c5ff;
    --help-bg: #f5f6fb;
    --help-card: #ffffff;
    --help-border: #d9deec;
    --help-text: #1d2234;
    --help-muted: #5c657d;
    --help-success: #12b886;
    --help-shadow: 0 24px 60px rgba(25, 0, 51, 0.14);
    --help-hover-shadow: 0 32px 70px rgba(25, 0, 51, 0.2);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: var(--help-text);
    background:
        radial-gradient(circle at top left, rgba(73, 197, 255, 0.16), transparent 28%),
        linear-gradient(180deg, #f7f8fc 0%, #eef2f9 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

.help-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(25, 0, 51, 0.9);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(17, 9, 38, 0.18);
}

.help-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    color: #fff;
}

.help-brand strong,
.help-brand small {
    display: block;
}

.help-brand strong {
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.help-brand small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}

.help-brand-badge {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--help-secondary), var(--help-primary));
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0, 152, 248, 0.35);
}

.help-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.8rem 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--help-secondary), #0a7bd4);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 152, 248, 0.28);
}

.btn-primary:hover {
    box-shadow: 0 14px 28px rgba(0, 152, 248, 0.38);
}

.btn-secondary {
    background: rgba(48, 0, 96, 0.08);
    border-color: rgba(48, 0, 96, 0.18);
    color: var(--help-primary);
}

.btn-secondary:hover {
    background: rgba(48, 0, 96, 0.13);
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.9);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
}

.btn-white {
    background: #fff;
    color: var(--help-primary);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0,0,0,0.14);
}

.btn-white:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

.btn-cta-outline {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.2);
}

.hero-section,
.content-section {
    padding: 2.5rem 1.5rem;
}

/* Offset anchors so sticky topbar doesn't cover target */
[id] {
    scroll-margin-top: 80px;
}

.hero-shell,
.anchor-shell,
.section-heading,
.story-grid,
.process-track,
.states-grid,
.roles-grid,
.modules-grid,
.lanes-grid,
.timeline-panel,
.faq-list,
.cta-box {
    max-width: 1180px;
    margin: 0 auto;
}

.hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
    gap: 1.5rem;
    align-items: stretch;
}

.hero-copy,
.hero-panel {
    border-radius: 1.75rem;
    box-shadow: var(--help-shadow);
}

.hero-copy {
    background:
        radial-gradient(circle at top right, rgba(73, 197, 255, 0.18), transparent 24%),
        linear-gradient(135deg, var(--help-primary-deep) 0%, var(--help-primary) 58%, #0b5594 100%);
    color: #fff;
    padding: 3rem;
}

.eyebrow,
.section-label,
.anchor-title,
.panel-label,
.role-tag,
.timeline-panel span {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.77rem;
    font-weight: 800;
}

.eyebrow {
    display: inline-flex;
    margin: 0 0 1rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4.3rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.hero-copy h1 span {
    color: var(--help-accent);
}

.hero-text {
    max-width: 42rem;
    margin: 1.35rem 0 0;
    font-size: 1.08rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.84);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.8rem;
}

.hero-panel {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.3rem;
    display: grid;
    gap: 1rem;
}

.accent-card {
    padding: 1.4rem;
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(48, 0, 96, 0.06), rgba(0, 152, 248, 0.12));
    border: 1px solid rgba(48, 0, 96, 0.08);
}

.accent-card strong,
.hero-metrics strong,
.process-step h3,
.story-card h3,
.role-card h3,
.module-card h3,
.lane-card h3,
.timeline-panel strong,
.faq-item summary,
.cta-box h2,
.section-heading h2 {
    display: block;
}

.accent-card strong {
    font-size: 1.25rem;
    margin-bottom: 0.55rem;
}

.accent-card span,
.section-heading p,
.story-card p,
.process-step p,
.role-card p,
.module-card p,
.lane-card p,
.timeline-panel p,
.faq-item p,
.cta-box p {
    color: var(--help-muted);
    line-height: 1.7;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.hero-metrics article,
.story-card,
.process-step,
.role-card,
.module-card,
.lane-card,
.timeline-panel article,
.faq-item,
.state-badge-card,
.cta-box {
    border: 1px solid var(--help-border);
    background: var(--help-card);
    border-radius: 1.35rem;
}

.hero-metrics article {
    padding: 1.1rem;
    background: rgba(255, 255, 255, 0.8);
}

.hero-metrics strong {
    font-size: 1.9rem;
    color: var(--help-primary);
    line-height: 1;
}

.hero-metrics span {
    display: block;
    margin-top: 0.35rem;
    color: var(--help-muted);
    font-size: 0.92rem;
}

.anchor-section {
    padding: 1.3rem 1.5rem 0;
}

.anchor-shell {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1.25rem;
    box-shadow: 0 12px 34px rgba(46, 53, 76, 0.08);
}

.anchor-title,
.section-label,
.panel-label,
.role-tag,
.timeline-panel span {
    color: var(--help-secondary);
}

.anchor-nav {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.anchor-nav a {
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: rgba(48, 0, 96, 0.06);
    color: var(--help-primary);
    font-weight: 700;
}

.section-heading {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.split-heading {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    align-items: end;
}

.story-grid,
.roles-grid,
.modules-grid,
.lanes-grid,
.timeline-panel {
    display: grid;
    gap: 1rem;
}

.story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.story-card,
.process-step,
.role-card,
.module-card,
.lane-card,
.timeline-panel article,
.state-badge-card,
.cta-box {
    padding: 1.5rem;
    box-shadow: 0 16px 38px rgba(46, 53, 76, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.story-card:hover,
.role-card:hover,
.lane-card:hover,
.module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--help-hover-shadow);
}

.story-card h3,
.process-step h3,
.role-card h3,
.module-card h3,
.lane-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.12rem;
}

.story-icon {
    display: flex;
    width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, rgba(48,0,96,0.1), rgba(0,152,248,0.12));
    margin-bottom: 1rem;
}

.story-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: var(--help-primary);
}

/* ── Process steps ─────────────────────────────────────── */
.process-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.process-step {
    position: relative;
    overflow: hidden;
}

.process-step::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
}

.ps-1::before { background: linear-gradient(90deg, #300060, #6040a0); }
.ps-2::before { background: linear-gradient(90deg, #0098f8, #40bafa); }
.ps-3::before { background: linear-gradient(90deg, #12b886, #40daa8); }
.ps-4::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.process-index {
    display: inline-flex;
    margin-bottom: 1rem;
    font-size: 1.7rem;
    font-weight: 800;
    color: rgba(48, 0, 96, 0.22);
}

/* ── States grid ────────────────────────────────────────── */
.states-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.states-intro {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem;
    color: var(--help-muted);
    font-size: 0.92rem;
}

.states-intro strong {
    color: var(--help-text);
}

.state-badge-card {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 1rem;
}

.state-badge-card strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.state-badge-card span {
    font-size: 0.8rem;
    color: var(--help-muted);
    line-height: 1.5;
}

.state-dot {
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    margin-top: 0.3rem;
}

.st-blue   { background: #3b82f6; }
.st-indigo { background: #6366f1; }
.st-yellow { background: #f59e0b; }
.st-teal   { background: #14b8a6; }
.st-orange { background: #f97316; }
.st-amber  { background: #d97706; }
.st-cyan   { background: #06b6d4; }
.st-purple { background: #a855f7; }
.st-green  { background: #22c55e; }
.st-red    { background: #ef4444; }

/* ── Roles ──────────────────────────────────────────────── */
.roles-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.role-card {
    position: relative;
    overflow: hidden;
    border-top-width: 3px;
}

.role-card ul {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
}

.role-card li {
    margin-bottom: 0.45rem;
    font-size: 0.9rem;
    color: var(--help-muted);
}

.role-card::after {
    content: '';
    position: absolute;
    top: -48px;
    right: -32px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
}

.role-purple { border-top-color: #7c3aed; }
.role-purple::after { background: radial-gradient(circle, rgba(124,58,237,0.15), transparent 70%); }
.role-purple .role-icon-wrap { background: rgba(124,58,237,0.1); color: #7c3aed; }
.role-purple .role-tag { color: #7c3aed; }

.role-blue { border-top-color: var(--help-secondary); }
.role-blue::after { background: radial-gradient(circle, rgba(0,152,248,0.16), transparent 70%); }
.role-blue .role-icon-wrap { background: rgba(0,152,248,0.1); color: var(--help-secondary); }
.role-blue .role-tag { color: var(--help-secondary); }

.role-green { border-top-color: #16a34a; }
.role-green::after { background: radial-gradient(circle, rgba(22,163,74,0.14), transparent 70%); }
.role-green .role-icon-wrap { background: rgba(22,163,74,0.1); color: #16a34a; }
.role-green .role-tag { color: #16a34a; }

.role-teal { border-top-color: #0d9488; }
.role-teal::after { background: radial-gradient(circle, rgba(13,148,136,0.14), transparent 70%); }
.role-teal .role-icon-wrap { background: rgba(13,148,136,0.1); color: #0d9488; }
.role-teal .role-tag { color: #0d9488; }

.role-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.role-icon-wrap svg {
    width: 1.4rem;
    height: 1.4rem;
}

.role-tag {
    display: inline-flex;
    margin-bottom: 0.65rem;
}

/* ── Dark modules section ───────────────────────────────── */
.dark-section {
    position: relative;
    margin-top: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background: linear-gradient(135deg, #180031 0%, #24004a 50%, #093d70 100%);
    color: #fff;
}

.light-heading p,
.dark-section .module-card p {
    color: rgba(255, 255, 255, 0.72);
}

.dark-section .section-label {
    color: var(--help-accent);
}

.dark-section .section-heading h2 {
    color: #fff;
}

.modules-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-card {
    min-height: 200px;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    color: #fff;
    border-top-width: 3px;
}

.module-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.module-icon-wrap svg {
    width: 1.4rem;
    height: 1.4rem;
}

.mod-purple .module-icon-wrap { background: rgba(167,139,250,0.2); color: #c4b5fd; }
.mod-purple { border-top-color: #a78bfa; }
.mod-blue   .module-icon-wrap { background: rgba(96,165,250,0.2);  color: #93c5fd; }
.mod-blue   { border-top-color: #60a5fa; }
.mod-gold   .module-icon-wrap { background: rgba(251,191,36,0.2);  color: #fde68a; }
.mod-gold   { border-top-color: #fbbf24; }
.mod-orange .module-icon-wrap { background: rgba(251,146,60,0.2);  color: #fdba74; }
.mod-orange { border-top-color: #fb923c; }
.mod-teal   .module-icon-wrap { background: rgba(45,212,191,0.2);  color: #99f6e4; }
.mod-teal   { border-top-color: #2dd4bf; }
.mod-red    .module-icon-wrap { background: rgba(248,113,113,0.2); color: #fca5a5; }
.mod-red    { border-top-color: #f87171; }

/* ── Lanes (process cards) ───────────────────────────────── */
.lanes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lane-card {
    border-top-width: 3px;
}

.lane-public       { border-top-color: var(--help-primary); }
.lane-providers    { border-top-color: #f97316; }
.lane-notifications { border-top-color: #0d9488; }

.lane-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.lane-public .lane-icon       { background: rgba(48,0,96,0.09);   color: var(--help-primary); }
.lane-providers .lane-icon    { background: rgba(249,115,22,0.1); color: #ea580c; }
.lane-notifications .lane-icon { background: rgba(13,148,136,0.1); color: #0d9488; }

.lane-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    color: var(--help-secondary);
    font-weight: 700;
    font-size: 0.92rem;
    transition: gap 0.15s;
}

.text-link:hover {
    gap: 0.45rem;
}

/* ── Timeline panel (Llaves / Agenda / Reportes) ─────────── */
.timeline-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.timeline-panel article {
    background: linear-gradient(180deg, #fff, #f6f8fd);
    border-top-width: 3px;
}

.tp-keys     { border-top-color: #d97706; }
.tp-calendar { border-top-color: var(--help-secondary); }
.tp-reports  { border-top-color: #7c3aed; }

.tp-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.tp-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.tp-keys .tp-icon     { background: rgba(217,119,6,0.1);   color: #d97706; }
.tp-calendar .tp-icon { background: rgba(0,152,248,0.1);   color: var(--help-secondary); }
.tp-reports .tp-icon  { background: rgba(124,58,237,0.1);  color: #7c3aed; }

.timeline-panel span {
    display: block;
    margin-bottom: 0.35rem;
}

.timeline-panel strong {
    font-size: 1.05rem;
    margin: 0 0 0.55rem;
    display: block;
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list {
    display: grid;
    gap: 0.9rem;
}

.faq-item {
    overflow: hidden;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 3.5rem 1.25rem 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--help-text);
    position: relative;
    transition: background 0.15s;
}

.faq-item summary:hover {
    background: rgba(48, 0, 96, 0.03);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 152, 248, 0.1);
    color: var(--help-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}

.faq-item[open] summary::after {
    content: '\2212';
    background: rgba(0, 152, 248, 0.18);
}

.faq-item p {
    margin: 0;
    padding: 0 1.4rem 1.4rem;
    border-top: 1px solid var(--help-border);
    padding-top: 1rem;
}

/* ── CTA ─────────────────────────────────────────────────── */
.cta-section {
    padding-bottom: 2.5rem;
}

.cta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(48, 0, 96, 0.97), #0e4f94);
    color: #fff;
    border: none;
    padding: 2.5rem;
}

.cta-text .section-label,
.cta-box p {
    color: rgba(255, 255, 255, 0.8);
}

.cta-box h2 {
    margin: 0.2rem 0 0.6rem;
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    color: #fff;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────── */
.help-footer {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--help-muted);
    font-size: 0.88rem;
    border-top: 1px solid var(--help-border);
}

.help-footer a {
    color: var(--help-secondary);
    font-weight: 600;
    margin-left: 0.5rem;
}

@media (max-width: 1100px) {
    .hero-shell,
    .split-heading,
    .roles-grid,
    .modules-grid,
    .lanes-grid,
    .timeline-panel,
    .process-track,
    .story-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .states-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .help-topbar,
    .cta-box {
        flex-direction: column;
        align-items: stretch;
    }

    .anchor-shell {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-shell,
    .split-heading,
    .modules-grid,
    .process-track,
    .story-grid,
    .lanes-grid,
    .timeline-panel,
    .roles-grid {
        grid-template-columns: 1fr;
    }

    .states-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-copy {
        padding: 2rem;
    }

    .hero-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .cta-actions,
    .anchor-nav,
    .help-topbar-actions {
        justify-content: stretch;
    }

    .cta-actions .btn,
    .help-topbar-actions .btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .hero-section,
    .content-section,
    .anchor-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .help-topbar {
        padding: 1rem;
    }

    .hero-copy,
    .story-card,
    .process-step,
    .role-card,
    .module-card,
    .lane-card,
    .timeline-panel article,
    .cta-box {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .hero-metrics,
    .states-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        font-size: 2.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn,
    .story-card,
    .role-card,
    .lane-card,
    .module-card,
    .text-link {
        transition: none;
    }
}

/* Active anchor nav indicator */
.anchor-nav a.active {
    background: var(--help-primary);
    color: #fff;
}