/* =============================================================
   HELP CENTRE  —  /GetHelp  (Pages/GetHelp/GetHelp.razor)
   Every selector is prefixed .hc- and nested under .hc-page so
   nothing here can leak into other pages.
   Palette follows the TOA brand: Deep Purple #4A0466 dominant,
   Turquoise #3FD7EC as the accent on dark, Blue Violet #833FEC
   for interactive labels.
   ============================================================= */

.hc-page {
    --hc-purple: #4A0466;
    --hc-purple-dark: #33044A;
    --hc-purple-light: #8A3C9E;
    --hc-violet: #833FEC;
    --hc-turquoise: #3FD7EC;
    --hc-ink: #2B1B3D;
    --hc-text: #595959;
    --hc-muted: #8E86A0;
    --hc-line: #E4EAF2;

    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px 32px;
}

/* ---------- HERO ---------- */

.hc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 32px;
    padding: 24px 28px;
    border-radius: 18px;
    background: linear-gradient(100deg, var(--hc-purple-dark) 0%, var(--hc-purple) 45%, var(--hc-purple-light) 100%);
    box-shadow: 0 12px 28px rgba(74, 4, 102, 0.18);
}

.hc-hero__intro {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1 1 420px;
    min-width: 280px;
}

.hc-hero__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Orbit-Icon.png is taller than it is wide - fixing both dimensions squashes it. */
    .hc-hero__avatar img {
        width: 46px;
        height: auto;
    }

.hc-hero__eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 11px;
    font-weight: 700;
    color: #CBA7E8;
    margin-bottom: 6px;
}

.hc-hero__title {
    font-family: Chewie, 'Open Sans', Georgia, serif;
    font-weight: 500;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: 0;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.hc-hero__subtitle {
    font-size: 13px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
    margin: 0;
}

.hc-hero__actions {
    flex: 0 1 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 260px;
}

/* ---------- HERO SEARCH ---------- */

.hc-search {
    position: relative;
    margin: 0;
}

    .hc-search input {
        width: 100%;
        padding: 12px 40px 12px 42px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: #FFFFFF;
        font-size: 13px;
        line-height: 18px;
        color: var(--hc-ink);
        outline: none !important;
        transition: box-shadow 0.2s ease;
    }

        .hc-search input::placeholder {
            color: var(--hc-muted);
        }

        .hc-search input:focus {
            box-shadow: 0 0 0 3px rgba(63, 215, 236, 0.45);
        }

/* The magnifier is the search button, so it has to look pressable. */
.hc-search__btn,
.hc-search__clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--hc-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

.hc-search__btn {
    left: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

    .hc-search__btn:hover,
    .hc-search__btn:focus {
        color: var(--hc-violet);
        background: #F5F1FA;
    }

    .hc-search__btn .material-icons-outlined {
        font-size: 19px;
        color: inherit;
    }

.hc-search__clear {
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

    .hc-search__clear:hover,
    .hc-search__clear:focus {
        color: var(--hc-purple);
        background: #F1EEF6;
    }

    .hc-search__clear .material-icons-outlined {
        font-size: 17px;
        color: inherit;
    }

/* ---------- ASK ORBIT BUTTON ---------- */

.hc-orbit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--hc-turquoise);
    color: var(--hc-purple);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .hc-orbit-btn:hover,
    .hc-orbit-btn:focus {
        background: #2FC9E0;
        color: var(--hc-purple);
        text-decoration: none;
        transform: translateY(-1px);
    }

    .hc-orbit-btn > span {
        font-size: 18px;
        color: inherit;
    }

/* ---------- TWO COLUMN BODY ---------- */

.hc-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.hc-sidebar {
    flex: 0 0 300px;
    max-width: 300px;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 18px 14px;
    box-shadow: 0 6px 18px rgba(43, 27, 61, 0.06);
}

.hc-sidebar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px 12px;
}

.hc-sidebar__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hc-purple);
}

.hc-sidebar__count {
    font-size: 11px;
    color: var(--hc-muted);
    white-space: nowrap;
}

/* Tighten the MudTreeView so it reads as a topic list, not a form control.
   Icon glyphs and colours come from HelpIcons.cs - folder #3F86B8, article #833FEC,
   feature star #3FD7EC - matching the design. */
/* Drop Mud's own 8px side padding so the row - and its highlight - runs the full width of the
   card. Indentation is unaffected: that comes from .mud-treeview-group's margin. */
.hc-sidebar .mud-treeview-item-content {
    padding: 2px 0;
}

.hc-sidebar__tools {
    display: flex;
    padding: 2px 2px 10px;
}

.hc-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid #E4DAF6;
    border-radius: 100px;
    background: #F7F3FE;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hc-purple);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    .hc-collapse:hover,
    .hc-collapse:focus {
        background: #EFE6FC;
        border-color: var(--hc-violet);
        color: var(--hc-purple);
        box-shadow: 0 4px 12px -8px rgba(74, 4, 102, 0.4);
    }

    .hc-collapse:active {
        transform: translateY(1px);
    }

    .hc-collapse .material-icons-outlined {
        font-size: 18px;
        color: var(--hc-violet);
    }

/* Shown when the category load comes back empty - the repositories swallow their errors. */
.hc-sidebar__error {
    text-align: center;
    padding: 26px 14px 22px;
}

.hc-sidebar__error-icon {
    font-size: 30px;
    color: var(--hc-violet);
    background: #F5F1FA;
    border-radius: 50%;
    padding: 12px;
    margin-bottom: 12px;
}

.hc-sidebar__error-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hc-purple);
    margin-bottom: 4px;
}

.hc-sidebar__error-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hc-text);
    margin: 0 0 14px;
}

.hc-sidebar__retry {
    padding: 8px 18px;
    border: 1px solid var(--hc-violet);
    border-radius: 100px;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hc-violet);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .hc-sidebar__retry:hover:not(:disabled) {
        background: var(--hc-violet);
        color: #FFFFFF;
    }

    .hc-sidebar__retry:disabled {
        opacity: 0.6;
        cursor: default;
    }

/* Whole-row hit target, matching the design's .tree-row / .art-row */
.hc-sidebar .hc-tree__row {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .hc-sidebar .hc-tree__row:hover {
        background: #F5F1FA;
    }

    .hc-sidebar .hc-tree__row--article {
        align-items: flex-start;
        gap: 8px;
    }

    /* The open article keeps its tint while hovered, rather than washing out to the hover grey. */
    .hc-sidebar .hc-tree__row--active,
    .hc-sidebar .hc-tree__row--active:hover {
        background: #F0E9FC;
    }

        .hc-sidebar .hc-tree__row--active .hc-tree__label {
            color: #4A0466;
        }

.hc-sidebar .hc-tree__toggle {
    display: flex;
    flex: none;
}

.hc-sidebar .hc-tree__icon {
    font-size: 18px;
    flex: none;
}

.hc-sidebar .hc-tree__row--article .hc-tree__icon {
    margin-top: 1px;
}

.hc-sidebar .hc-tree__icon--article {
    font-size: 16px;
}

.hc-sidebar .hc-tree__label {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    color: #2B3A52;
    margin-bottom: 0;
    cursor: pointer;
}

.hc-sidebar .hc-tree__label--article {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: #3F3A48;
}

.hc-sidebar .mud-treeview-item-arrow .mud-icon-root {
    font-size: 18px;
    color: #9A95A3;
}

.hc-content {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991px) {
    .hc-body {
        flex-direction: column;
    }

    .hc-sidebar {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }
}

/* ---------- CONTENT PANEL ---------- */

.hc-panel {
    background: linear-gradient(150deg, #E8F1FB 0%, #F4F8FD 55%, #FBFCFE 100%);
    border-radius: 16px;
    padding: 40px;
    min-height: 460px;
}

.hc-panel--plain {
    background: #FFFFFF;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(43, 27, 61, 0.06);
}

.hc-panel__avatar {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(74, 4, 102, 0.14);
    margin-bottom: 22px;
}

    .hc-panel__avatar img {
        width: 40px;
        height: auto;
    }

/* ---------- LANDING PANEL ---------- */

/* Copy on the left, popular articles alongside it - fills the panel and keeps it short. */
.hc-welcome {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px 44px;
    min-height: 360px;
}

    /* Ambient brand glows, set on the diagonal so they read around the two columns. */
    .hc-welcome::before,
    .hc-welcome::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .hc-welcome::before {
        top: -160px;
        right: -120px;
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, rgba(131, 63, 236, 0.12), transparent 62%);
    }

    .hc-welcome::after {
        bottom: -170px;
        left: 4%;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(63, 215, 236, 0.16), transparent 62%);
    }

.hc-welcome__intro {
    position: relative;
    flex: 1 1 380px;
    max-width: 500px;
    min-width: 0;
}

.hc-welcome__popular {
    position: relative;
    flex: 1 1 440px;
    min-width: 0;
    padding-top: 4px;
}

.hc-welcome__greeting {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--hc-violet);
    margin-bottom: 8px;
}


.hc-panel__title {
    font-family: Chewie, 'Open Sans', Georgia, serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.12;
    color: var(--hc-ink);
    max-width: 480px;
    margin: 0 0 14px;
}

.hc-panel__text {
    font-size: 14px;
    line-height: 21px;
    color: var(--hc-text);
    max-width: 500px;
    margin: 0 0 28px;
}

.hc-panel__label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hc-violet);
    margin-bottom: 12px;
}

/* ---------- SEARCH RESULTS ---------- */

.hc-results {
    padding: 30px 34px;
}

.hc-results__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hc-results__headtext {
    min-width: 0;
}

/* List / card layout switch */
.hc-viewtoggle {
    flex: none;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #F5F1FA;
}

.hc-viewtoggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: #9A95A3;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

    .hc-viewtoggle__btn:hover {
        color: var(--hc-violet);
    }

    .hc-viewtoggle__btn--on {
        background: #FFFFFF;
        color: var(--hc-violet);
        box-shadow: 0 1px 3px rgba(74, 4, 102, 0.12);
    }

    .hc-viewtoggle__btn .mud-icon-root {
        font-size: 17px;
    }

.hc-results__eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: 700;
    color: var(--hc-violet);
    margin-bottom: 6px;
}

.hc-results__heading {
    margin: 0 0 4px;
    font-family: 'Open Sans', 'Roboto', sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--hc-purple);
    word-break: break-word;
}

.hc-results__count {
    margin: 0 0 22px;
    font-size: 13px;
    font-weight: 600;
    color: #9A95A3;
}

.hc-results__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Card view: same card, tiled. Snippets clamp so the tiles stay level. */
.hc-results__list--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.hc-result--card {
    display: flex;
    flex-direction: column;
}

    .hc-result--card .hc-result__crumb {
        align-self: flex-start;
    }

    .hc-result--card .hc-result__snippet {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hc-result--card .hc-result__meta {
        margin-top: auto;
        padding-top: 4px;
    }

.hc-result {
    display: block;
    padding: 18px 20px;
    border: 1px solid #EFEDF2;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .hc-result:hover,
    .hc-result:focus {
        border-color: var(--hc-violet);
        box-shadow: 0 8px 22px -12px rgba(74, 4, 102, 0.3);
        text-decoration: none;
    }

.hc-result__crumb {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 9px;
    border-radius: 20px;
    background: #F0E9FC;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 800;
    color: var(--hc-violet);
}

.hc-result__title {
    margin: 0 0 5px;
    font-family: 'Open Sans', 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--hc-purple);
}

.hc-result__snippet {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B6577;
}

.hc-result__meta {
    font-size: 12px;
    font-weight: 600;
    color: #9A95A3;
}

/* ---------- EMPTY SEARCH STATE ---------- */

.hc-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9A95A3;
}

.hc-empty__icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #F5F1FA;
    color: var(--hc-violet);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

    .hc-empty__icon .material-icons-outlined {
        font-size: 34px;
        color: inherit;
    }

.hc-empty__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--hc-purple);
    margin-bottom: 4px;
}

.hc-empty__text {
    font-size: 13.5px;
    font-weight: 500;
}

/* ---------- POPULAR ARTICLE CARDS ---------- */

/* Two columns of three, so a row is never left with an orphan. */
.hc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 575px) {
    .hc-cards {
        grid-template-columns: 1fr;
    }
}

.hc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFFFFF;
    border: 1px solid var(--hc-line);
    border-radius: 12px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

    .hc-card:hover,
    .hc-card:focus {
        border-color: var(--hc-violet);
        box-shadow: 0 10px 24px -12px rgba(74, 4, 102, 0.35);
        transform: translateY(-2px);
        text-decoration: none;
    }

.hc-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hc-card__caption {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--hc-muted);
}

.hc-card__arrow {
    margin-left: auto;
    font-size: 17px;
    color: #D5CFE0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.hc-card:hover .hc-card__arrow {
    color: var(--hc-violet);
    transform: translateX(2px);
}

.hc-card__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

    /* The card glyphs are stroke icons, so they follow currentColor rather than fill. */
    .hc-card__icon .mud-icon-root {
        font-size: 19px;
        color: #FFFFFF;
    }

.hc-card__title {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--hc-ink);
}

/* Expands the popular grid from six cards to the full top 20 and back. */
.hc-morelink {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hc-violet);
    text-decoration: none;
}

    .hc-morelink:hover,
    .hc-morelink:focus {
        color: var(--hc-purple);
        text-decoration: none;
    }

    .hc-morelink .material-icons-outlined {
        font-size: 18px;
        color: inherit;
    }

.hc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hc-violet);
    text-decoration: none;
    margin-bottom: 16px;
}

    .hc-back:hover {
        color: var(--hc-purple);
        text-decoration: none;
    }

    .hc-back .material-icons-outlined {
        color: inherit;
    }

/* ---------- BACK TO TOP ----------
   MudScrollToTop pins itself 16px from the bottom-right, which lands on the live-chat widget
   (#oc-lcw-container, 180x60 fixed in that corner). Sits directly above it instead, so the two
   float as one stack in the corner. */

.hc-totop.visible,
.hc-totop.hidden {
    bottom: 76px;
    right: 24px;
}

.hc-totop__btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--hc-violet);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(74, 4, 102, 0.55);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

    /* Tooltip, to the left of the button since it hugs the right edge of the window. */
    .hc-totop__btn::after,
    .hc-totop__btn::before {
        position: absolute;
        top: 50%;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }

    .hc-totop__btn::after {
        content: attr(data-tooltip);
        right: calc(100% + 12px);
        transform: translateY(-50%);
        padding: 6px 10px;
        border-radius: 6px;
        background: #1A1320;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: 0 4px 12px rgba(12, 0, 46, 0.25);
    }

    .hc-totop__btn::before {
        content: '';
        right: calc(100% + 6px);
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left-color: #1A1320;
    }

    .hc-totop__btn:hover::after,
    .hc-totop__btn:hover::before,
    .hc-totop__btn:focus-visible::after,
    .hc-totop__btn:focus-visible::before {
        opacity: 1;
    }

    .hc-totop__btn:hover,
    .hc-totop__btn:focus {
        background: var(--hc-purple);
        transform: translateY(-2px);
    }

    /* LunaStyle sets .material-icons-outlined { color: #002034 } globally, which beats an inherited
       colour - so every glyph on a coloured surface has to name its own. */
    .hc-totop__btn .material-icons-outlined {
        font-size: 22px;
        color: #FFFFFF;
    }

/* ---------- STILL NEED HELP ----------
   Page-specific: the shared .knowledge-base__support block is left alone
   because the STEP pages use it. */

.hc-support {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 24px 28px;
    border-radius: 18px;
    background: linear-gradient(100deg, var(--hc-purple-dark) 0%, var(--hc-purple) 48%, #7A2C93 100%);
    box-shadow: 0 12px 28px rgba(74, 4, 102, 0.18);
}

    .hc-support::after {
        content: '';
        position: absolute;
        top: -55%;
        right: 8%;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(63, 215, 236, 0.18), transparent 62%);
        pointer-events: none;
    }

.hc-support__intro {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 420px;
    min-width: 260px;
}

.hc-support__icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hc-support__icon img {
        width: 30px;
        height: auto;
    }

.hc-support__eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hc-turquoise);
    margin-bottom: 6px;
}

.hc-support__title {
    font-family: Chewie, 'Open Sans', Georgia, serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 6px;
}

.hc-support__text {
    font-size: 13px;
    line-height: 18px;
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
    margin: 0;
}

.hc-support__btn {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    background: #FFFFFF;
    color: var(--hc-purple);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .hc-support__btn:hover,
    .hc-support__btn:focus {
        color: var(--hc-purple);
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(12, 0, 46, 0.28);
    }

    .hc-support__btn .material-icons-outlined {
        font-size: 18px;
        color: inherit;
    }

/* =========================================================
   ARTICLE HEADER  (KnowledgeArticleComponent)
   Breadcrumb, title and owner/date meta line, per the design.
   ========================================================= */

/* The reading pane is already a white card, so drop the component's own one.
   The standalone KBA page has no wrapper card, so it keeps it. */
.hc-panel--plain .toa-homepill {
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Brand ramp across the top of the reading pane. Full-bleed inside the padded panel. */
.hc-article__bar {
    height: 8px;
    margin: -24px -24px 24px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #4A0466 0%, #833FEC 55%, #3FD7EC 100%);
}

.hc-article__crumb {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #833FEC;
    margin-bottom: 14px;
}

.hc-article__title {
    margin: 0 0 10px;
    font-family: 'Open Sans', 'Roboto', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    color: #4A0466;
    text-align: left;
}

.hc-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #EFEDF2;
    font-size: 12.5px;
    font-weight: 600;
    color: #9A95A3;
}

/* ---------- ARTICLE ATTACHMENTS ---------- */

.hc-files {
    max-width: 620px;
    margin: 8px 0 28px;
}

.hc-files__label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hc-violet);
    margin-bottom: 10px;
}

.hc-files__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The whole row is the download button, so the button chrome is reset. */
.hc-file {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #EFEDF2;
    border-radius: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .hc-file:hover,
    .hc-file:focus {
        border-color: var(--hc-violet);
        box-shadow: 0 8px 20px -12px rgba(74, 4, 102, 0.3);
    }

.hc-file__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F5F1FA;
    color: var(--hc-violet);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hc-file__icon .mud-icon-root {
        font-size: 20px;
    }

.hc-file__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hc-file__name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #3F3A48;
    word-break: break-word;
}

.hc-file__meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hc-muted);
}

.hc-file__action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hc-violet);
    transition: color 0.15s ease;
}

    .hc-file__action .material-icons-outlined {
        font-size: 17px;
        color: inherit;
    }

.hc-file:hover .hc-file__action {
    color: var(--hc-purple);
}

@media (max-width: 575px) {
    /* Icon alone once the row gets tight */
    .hc-file__actionlabel {
        display: none;
    }
}

/* =========================================================
   ARTICLE FEEDBACK FOOTER  (KnowledgeArticleComponent)
   Helpful bar, readership stat, share and comment box, per
   the Help Centre design. Also applies on the standalone KBA
   page, which renders the same component.
   ========================================================= */

.hc-helpful {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 34px;
    padding: 22px 4px;
    border-top: 1px solid #EFEDF2;
    border-bottom: 1px solid #EFEDF2;
}

.hc-helpful__btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: #3F3A48;
    cursor: pointer;
    transition: color 0.15s ease;
}

    .hc-helpful__btn:hover {
        color: #1A1320;
    }

    .hc-helpful__btn .hc-helpful__icon {
        font-size: 24px;
        flex: none;
    }

    /* Eucalyptus for the thumbs up, Royal Pink for the thumbs down. */
    .hc-helpful__btn--up .hc-helpful__icon {
        color: #3FEB9F;
    }

    .hc-helpful__btn--down .hc-helpful__icon {
        color: #EC3D98;
    }

    /* The reader's own vote: fill the thumb and darken the label. A rule on the path
       itself is needed to beat the fill="none" presentation attribute. */
    .hc-helpful__btn--on {
        color: #4A0466;
    }

        .hc-helpful__btn--on .hc-helpful__icon path {
            fill: currentColor;
        }

.hc-helpful__stat {
    padding: 16px 4px 0;
    font-size: 13px;
    font-weight: 800;
    color: #4A0466;
}

.hc-share {
    display: flex;
    justify-content: flex-end;
    max-width: none;
    margin: 0;
    padding: 16px 0 14px;
    border-bottom: 1px solid #EFEDF2;
}

.hc-share__btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: #833FEC;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

    /* Beats the global .copy-link-button:hover */
    .hc-share .hc-share__btn:hover {
        background: #6B2ED0;
        color: #FFFFFF;
    }

    .hc-share__btn .material-icons-outlined {
        font-size: 18px;
    }

.hc-comment {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding-top: 18px;
}

.hc-comment__input {
    flex: 1 1 auto;
    min-width: 0;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid #DEDAE3;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    color: #3F3A48;
    outline: none;
    transition: border-color 0.15s ease;
}

    .hc-comment__input::placeholder {
        color: #9A95A3;
    }

    .hc-comment__input:focus {
        border-color: #833FEC;
    }

.hc-comments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 20px;
}

.hc-comments__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #EFEDF2;
}

    .hc-comments__item:last-child {
        border-bottom: 0;
    }

.hc-comments__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hc-comments__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 4px;
}

.hc-comments__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--hc-purple);
}

.hc-comments__time {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hc-muted);
}

.hc-comments__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #3F3A48;
    white-space: pre-line;
    word-break: break-word;
}

.hc-comment__submit {
    flex: none;
    padding: 12px 22px;
    border: none;
    border-radius: 12px;
    background: #1C4D68;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .hc-comment__submit:hover {
        background: #163E54;
    }