/* Illustrated help section, scoped to the home page. */
.hrnt-home .home-help--illustrated > .wrapper {
    padding: calc(var(--space-section) * 3 / 8) calc(var(--space-section) / 2);
    background: var(--color-primary);
    color: var(--color-white);
}
.hrnt-home .home-help--illustrated .home-help-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: calc(var(--space-section) / 2);
}
.hrnt-home .home-help--illustrated .home-help-content { min-width: 0; }
.hrnt-home .home-help--illustrated .home-section-heading { margin-bottom: calc(var(--space-section) * 3 / 8); }
.hrnt-home .home-help--illustrated .home-section-heading h2,
.hrnt-home .home-help--illustrated .home-help-step h3 { color: var(--color-white); }
.hrnt-home .home-help--illustrated .home-guide-intro,
.hrnt-home .home-help--illustrated .home-help-step p { color: var(--color-bg-tint-blue); }
.hrnt-home .home-help--illustrated .home-help-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--space-section) / 4);
}
.hrnt-home .home-help--illustrated .home-help-step {
    position: relative;
    flex-direction: row;
    gap: calc(var(--space-section) / 4);
}
.hrnt-home .home-help--illustrated .home-help-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--h-touch) + var(--space-section) / 16);
    bottom: calc(var(--space-section) / -4);
    left: calc(var(--h-touch) / 2);
    border-left: thin solid var(--color-purple);
}
.hrnt-home .home-help--illustrated .home-help-number { background: var(--color-accent-blue-bg); }
.hrnt-home .home-help--illustrated .home-help-step:nth-child(2) .home-help-number { background: var(--color-accent-yellow); }
.hrnt-home .home-help--illustrated .home-help-step:nth-child(3) .home-help-number { background: var(--color-accent-green-bg); }
.hrnt-home .home-help--illustrated .home-help-step h3 { font-size: var(--text-lg); }
.hrnt-home .home-help--illustrated .home-help-visual {
    width: 100%;
    min-width: 0;
    max-width: calc(var(--max-width-wide) * 5 / 12);
    justify-self: center;
    pointer-events: none;
}
.hrnt-home .home-help--illustrated .home-help-visual svg { display: block; width: 100%; height: auto; }
.hrnt-home .home-help--illustrated .home-help-links {
    gap: calc(var(--space-section) / 4);
    margin-top: calc(var(--space-section) / 4);
    padding-top: calc(var(--space-section) / 4);
    border-color: var(--color-purple);
}
.hrnt-home .home-help--illustrated .home-guide-link {
    justify-content: space-between;
    gap: calc(var(--space-section) / 4);
    min-height: var(--h-big);
    padding: calc(var(--space-section) / 6) calc(var(--space-section) / 4);
    border: thin solid var(--color-primary-disabled);
    border-radius: var(--radius-md);
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.hrnt-home .home-help--illustrated .home-guide-link:first-child {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
    font-size: var(--text-md);
}
.hrnt-home .home-help--illustrated .home-guide-link:focus-visible {
    outline: calc(var(--space-section) / 32) solid var(--color-accent-yellow);
    outline-offset: calc(var(--space-section) / 16);
    box-shadow: none;
    text-decoration: underline;
}
.hrnt-home .home-help--illustrated .home-guide-link:active {
    background: var(--color-accent-blue-bg);
    border-color: var(--color-accent-blue-bg);
    color: var(--color-primary-active);
}
@media (hover: hover) and (pointer: fine) {
    .hrnt-home .home-help--illustrated .home-guide-link:hover {
        background: var(--color-bg-tint-blue);
        border-color: var(--color-bg-tint-blue);
        color: var(--color-primary);
        text-decoration: none;
    }
}
@media (max-width: 991px) {
    .hrnt-home .home-help--illustrated > .wrapper { padding: calc(var(--space-section) * 3 / 16) calc(var(--space-section) / 3); }
    .hrnt-home .home-help--illustrated .home-help-layout { gap: calc(var(--space-section) / 4); }
    .hrnt-home .home-help--illustrated .home-section-heading { margin-bottom: calc(var(--space-section) / 4); }
    .hrnt-home .home-help--illustrated .home-help-steps { gap: calc(var(--space-section) * 3 / 16); }
    .hrnt-home .home-help--illustrated .home-help-step h3 { margin-bottom: calc(var(--space-section) / 16); }
    .hrnt-home .home-help--illustrated .home-help-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(var(--space-section) / 8);
    }
}
@media (max-width: 767px) {
    .hrnt-home .home-help--illustrated > .wrapper { padding: calc(var(--space-section) / 4); }
    .hrnt-home .home-help--illustrated .home-help-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(var(--space-section) * 3 / 16);
    }
    .hrnt-home .home-help--illustrated .home-help-content { display: contents; }
    .hrnt-home .home-help--illustrated .home-section-heading { order: 0; margin: 0; }
    .hrnt-home .home-help--illustrated .home-help-visual {
        order: 1;
        max-width: calc(var(--max-width-wide) / 4);
        margin: calc(var(--space-section) / -8) 0;
    }
    .hrnt-home .home-help--illustrated .home-help-steps { order: 2; gap: calc(var(--space-section) / 4); }
    .hrnt-home .home-help--illustrated .home-help-number {
        flex-basis: var(--h-touch);
        width: var(--h-touch);
        height: var(--h-touch);
        font-size: var(--text-md);
    }
    .hrnt-home .home-help--illustrated .home-help-step { gap: calc(var(--space-section) / 6); }
    .hrnt-home .home-help--illustrated .home-help-links {
        grid-template-columns: minmax(0, 1fr);
        margin-top: calc(var(--space-section) / 4);
        padding-top: calc(var(--space-section) / 4);
    }
    .hrnt-home .home-help--illustrated .home-guide-link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .hrnt-home .home-help--illustrated .home-guide-link { transition: none; }
}