:root {
    --nkhc-action: #f8a501;
    --nkhc-state: #009ea9;
    --nkhc-ink: #294653;
    --nkhc-muted: #6b8795;
    --nkhc-line: #d8e3e8;
    --nkhc-surface: #ffffff;
    --nkhc-canvas: #f9f7f4;
}

.nkhc-site-action,
button.nkhc-site-action,
a.nkhc-site-action {
    align-items: center;
    background: var(--nkhc-action) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .32) !important;
    color: #fff !important;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800 !important;
    justify-content: center;
    line-height: 1.25;
    min-height: 44px;
    padding: 11px 18px !important;
    text-decoration: none !important;
    transition: box-shadow .16s ease, transform .16s ease !important;
}

.nkhc-site-action:hover,
.nkhc-site-action:focus-visible,
button.nkhc-site-action:hover,
button.nkhc-site-action:focus-visible,
a.nkhc-site-action:hover,
a.nkhc-site-action:focus-visible {
    background: var(--nkhc-action) !important;
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, .32) !important;
    color: #fff !important;
    transform: translateY(1px);
}

.nkhc-site-action:focus-visible {
    outline: 3px solid rgba(0, 158, 169, .34);
    outline-offset: 3px;
}

.nkhc-site-action:disabled,
.nkhc-site-action[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .58;
}

.nkhc-surface-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.nkhc-surface-tab {
    background: #fff;
    border: 1px solid #bfd5de;
    border-radius: 999px;
    color: var(--nkhc-ink);
    display: inline-flex;
    font-weight: 700;
    min-height: 42px;
    padding: 9px 16px;
    text-decoration: none;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.nkhc-surface-tab.is-active,
.nkhc-surface-tab[aria-current="page"] {
    background: var(--nkhc-state);
    border-color: var(--nkhc-state);
    color: #fff;
}

.nkhc-surface-tab:not(.is-active):not([aria-current="page"]):hover,
.nkhc-surface-tab:not(.is-active):not([aria-current="page"]):focus-visible {
    background: var(--nkhc-action);
    border-color: var(--nkhc-action);
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, .32);
    color: #fff;
}

.nkhc-surface-tab.is-active:hover,
.nkhc-surface-tab.is-active:focus-visible,
.nkhc-surface-tab[aria-current="page"]:hover,
.nkhc-surface-tab[aria-current="page"]:focus-visible {
    background: var(--nkhc-state);
    border-color: var(--nkhc-state);
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, .28);
    color: #fff;
}

.nkhc-surface-heading {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin: 0 0 22px;
}

.nkhc-surface-heading h1,
.nkhc-surface-heading h2 {
    color: var(--nkhc-ink);
    margin: 0 0 6px;
}

.nkhc-surface-heading p {
    color: var(--nkhc-muted);
    margin: 0;
    max-width: 720px;
}

@media (max-width: 640px) {
    .nkhc-surface-heading {
        display: block;
    }

    .nkhc-surface-heading .nkhc-site-action {
        margin-top: 16px;
        width: 100%;
    }
}