:root {
    --skillhub-guide-ink: #14233b;
    --skillhub-guide-muted: #65738a;
    --skillhub-guide-line: #e5eaf2;
    --skillhub-guide-paper: #ffffff;
    --skillhub-guide-soft: #f5f7fb;
    --skillhub-guide-accent: #5c4df1;
}

.skillhub-guide-hub,
.skillhub-guide-single,
.skillhub-guide-archive {
    color: var(--skillhub-guide-ink);
    background: #f5f7fb;
}

.skillhub-guide-hub *,
.skillhub-guide-single *,
.skillhub-guide-archive * { box-sizing: border-box; }

.skillhub-guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #695bdc;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.skillhub-guide-hero {
    position: relative;
    overflow: hidden;
    padding: 82px 0 68px;
    background:
        radial-gradient(circle at 82% 10%, rgba(111, 91, 242, .18), transparent 33%),
        radial-gradient(circle at 5% 85%, rgba(42, 184, 255, .12), transparent 26%),
        linear-gradient(145deg, #fff 0%, #f5f3ff 52%, #eef8ff 100%);
    border-bottom: 1px solid #e8e6f7;
}

.skillhub-guide-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -110px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(104, 87, 218, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 58px rgba(104, 87, 218, .035), 0 0 0 116px rgba(104, 87, 218, .025);
}

.skillhub-guide-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 72px;
    align-items: center;
}

@media (min-width: 992px) {
    .skillhub-guide-hero__copy { grid-column: 1; grid-row: 1; }
    .skillhub-guide-hero__map { grid-column: 2; grid-row: 1; }
    .skillhub-guide-single__layout > .skillhub-guide-article { grid-column: 1; grid-row: 1; }
    .skillhub-guide-single__layout > .skillhub-guide-toc { grid-column: 2; grid-row: 1; }
}

.skillhub-guide-hero h1 {
    max-width: 760px;
    margin: 14px 0 18px;
    color: #121b2e;
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.14;
    letter-spacing: -.035em;
}

.skillhub-guide-hero__title-tail { white-space: nowrap; }

.skillhub-guide-hero__copy > p {
    max-width: 720px;
    margin: 0;
    color: #56657c;
    font-size: 18px;
    line-height: 1.9;
}

.skillhub-guide-hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.skillhub-guide-button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid #dadfec;
    border-radius: 12px;
    color: #35425a;
    background: rgba(255,255,255,.8);
    font-weight: 700;
    text-decoration: none !important;
    transition: .2s ease;
}

.skillhub-guide-button:hover { transform: translateY(-2px); color: #4e43c4; box-shadow: 0 12px 26px rgba(35, 35, 77, .1); }
.skillhub-guide-button--primary { color: #fff !important; border-color: transparent; background: linear-gradient(135deg, #6757ee, #4a88f4); box-shadow: 0 12px 28px rgba(91, 78, 225, .24); }

.skillhub-guide-hero__facts { display: flex; gap: 24px; margin-top: 30px; color: #718097; font-size: 13px; flex-wrap: wrap; }
.skillhub-guide-hero__facts span { position: relative; }
.skillhub-guide-hero__facts span + span::before { content: ""; position: absolute; left: -12px; top: 4px; width: 1px; height: 13px; background: #d7ddea; }
.skillhub-guide-hero__facts strong { color: #26354d; }

.skillhub-guide-hero__map {
    position: relative;
    display: grid;
    gap: 13px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 24px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 24px 60px rgba(49, 47, 105, .12);
    backdrop-filter: blur(16px);
}

.skillhub-guide-hero__map > div:not(.skillhub-guide-map__line) {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 14px;
    padding: 15px 16px;
    border: 1px solid #eaedf5;
    border-radius: 15px;
    background: #fff;
}

.skillhub-guide-hero__map div span { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #6f5df3, #54a0ff); font-size: 12px; font-weight: 800; }
.skillhub-guide-hero__map div strong { font-size: 15px; color: #26334a; }
.skillhub-guide-hero__map div small { color: #7b879a; }

.skillhub-guide-answer {
    margin-top: -1px;
    padding-top: 58px;
    padding-bottom: 32px;
}

.skillhub-guide-answer h2,
.skillhub-guide-section-head h2,
.skillhub-guide-related h2,
.skillhub-guide-footer-cta h2 { margin: 8px 0 12px; color: #172238; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.025em; }
.skillhub-guide-answer > p { max-width: 960px; margin: 0; color: #58677d; font-size: 16px; line-height: 1.9; }

.skillhub-guide-topics { padding-top: 34px; padding-bottom: 72px; }
.skillhub-guide-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }

.skillhub-guide-search {
    display: flex;
    width: min(430px, 100%);
    height: 48px;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid #dfe4ee;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 46, 77, .05);
}
.skillhub-guide-search:focus-within { border-color: #8e82ef; box-shadow: 0 0 0 4px rgba(103, 87, 238, .1); }
.skillhub-guide-search svg { width: 20px; fill: none; stroke: #707d91; stroke-width: 2; }
.skillhub-guide-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #23324a; }

.skillhub-guide-topic-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.skillhub-guide-topic-nav > a { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 13px; border: 1px solid #e3e7ef; border-radius: 16px; background: #fff; text-decoration: none !important; transition: .2s ease; }
.skillhub-guide-topic-nav > a:hover { transform: translateY(-2px); border-color: #cfc8ff; box-shadow: 0 12px 28px rgba(40, 51, 78, .08); }
.skillhub-guide-topic-nav span:not(.skillhub-guide-icon) { display: grid; min-width: 0; }
.skillhub-guide-topic-nav strong { color: #27354b; font-size: 15px; }
.skillhub-guide-topic-nav small { overflow: hidden; color: #8792a3; text-overflow: ellipsis; white-space: nowrap; }

.skillhub-guide-icon { display: inline-grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: #edf2ff; color: #466fe7; }
.skillhub-guide-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skillhub-guide-icon--large { width: 58px; height: 58px; border-radius: 18px; }
.skillhub-guide-icon--blue { color: #3d78ed; background: #eaf2ff; }
.skillhub-guide-icon--violet { color: #7257df; background: #f0ebff; }
.skillhub-guide-icon--cyan { color: #1b8dac; background: #e4f8fc; }
.skillhub-guide-icon--amber { color: #c47b14; background: #fff2d8; }
.skillhub-guide-icon--rose { color: #dd5875; background: #ffebf0; }
.skillhub-guide-icon--green { color: #269369; background: #e3f7ef; }

.skillhub-guide-topic-sections { display: grid; gap: 24px; }
.skillhub-guide-topic-section { scroll-margin-top: 100px; padding: 27px; border: 1px solid #e4e8f0; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(27, 39, 68, .045); }
.skillhub-guide-topic-section__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #edf0f5; }
.skillhub-guide-topic-section__identity { display: flex; align-items: center; gap: 16px; }
.skillhub-guide-topic-section__identity > div > span { color: #7c8799; font-size: 12px; }
.skillhub-guide-topic-section__identity h2 { margin: 3px 0 2px; color: #1e2c43; font-size: 23px; }
.skillhub-guide-topic-section__identity p { margin: 0; color: #758196; }
.skillhub-guide-topic-section__head > a { color: #5b50d5; font-weight: 700; text-decoration: none !important; white-space: nowrap; }

.skillhub-guide-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.skillhub-guide-card { overflow: hidden; min-width: 0; border: 1px solid #e7eaf1; border-radius: 17px; background: #fff; transition: .22s ease; }
.skillhub-guide-card:hover { transform: translateY(-4px); border-color: #d4cef9; box-shadow: 0 16px 34px rgba(35, 45, 74, .1); }
.skillhub-guide-card__visual { position: relative; display: flex; height: 112px; align-items: flex-end; justify-content: space-between; overflow: hidden; padding: 17px; background: linear-gradient(135deg, #edf3ff, #f4f0ff); text-decoration: none !important; }
.skillhub-guide-card__visual::after { content: ""; position: absolute; right: -38px; top: -62px; width: 150px; height: 150px; border: 1px solid rgba(68, 80, 133, .13); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.18), 0 0 0 50px rgba(255,255,255,.12); }
.skillhub-guide-card__visual > span:last-child { z-index: 1; color: #6c7890; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.skillhub-guide-card__visual--violet { background: linear-gradient(135deg, #f0ebff, #e7f1ff); }
.skillhub-guide-card__visual--cyan { background: linear-gradient(135deg, #e2f8fc, #e9f1ff); }
.skillhub-guide-card__visual--amber { background: linear-gradient(135deg, #fff1d4, #fff8eb); }
.skillhub-guide-card__visual--rose { background: linear-gradient(135deg, #ffebf0, #f4edff); }
.skillhub-guide-card__visual--green { background: linear-gradient(135deg, #e3f7ef, #edf8ff); }
.skillhub-guide-card__body { display: flex; min-height: 226px; flex-direction: column; padding: 18px; }
.skillhub-guide-card__meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: #8994a7; font-size: 12px; }
.skillhub-guide-card h2,
.skillhub-guide-card h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.skillhub-guide-card h2 a,
.skillhub-guide-card h3 a { color: #1f2d44; text-decoration: none !important; }
.skillhub-guide-card p { display: -webkit-box; overflow: hidden; margin: 0 0 16px; color: #6f7d91; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.skillhub-guide-card__link { margin-top: auto; color: #5d52d8; font-weight: 700; text-decoration: none !important; }
.skillhub-guide-empty { padding: 42px; border: 1px dashed #cfd6e4; border-radius: 18px; text-align: center; background: #fff; }
.skillhub-guide-empty strong { font-size: 19px; }
.skillhub-guide-empty p { margin: 7px 0 0; color: #778397; }

/* Homepage learning path: visually distinct from the dense Skill catalogue. */
.skillhub-home-guides { padding: 10px 0 28px; }
.skillhub-home-guides * { box-sizing: border-box; }
.skillhub-home-guides__panel {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(91, 78, 219, .12);
    border-radius: 22px;
    background:
        radial-gradient(circle at 96% 0, rgba(104, 87, 235, .09), transparent 30%),
        linear-gradient(145deg, #fff 0%, #fbfaff 55%, #f5f9ff 100%);
    box-shadow: 0 14px 42px rgba(31, 42, 75, .055);
}
.skillhub-home-guides__panel::after {
    position: absolute;
    top: -100px;
    right: -78px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(99, 82, 223, .08);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(99, 82, 223, .025), 0 0 0 70px rgba(99, 82, 223, .018);
    content: "";
    pointer-events: none;
}
.skillhub-home-guides__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 23px;
}
.skillhub-home-guides__heading { min-width: 0; }
.skillhub-home-guides__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #6558d6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}
.skillhub-home-guides__eyebrow::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6c5ce7, #32b8ee);
    box-shadow: 0 0 0 4px rgba(108, 92, 231, .1);
    content: "";
}
.skillhub-home-guides__heading h2 {
    margin: 0 0 7px;
    color: #1c2940;
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.skillhub-home-guides__heading p {
    max-width: 720px;
    margin: 0;
    color: #728096;
    font-size: 14px;
    line-height: 1.7;
}
.skillhub-home-guides__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(91, 78, 219, .2);
    border-radius: 11px;
    color: #594dcc !important;
    background: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none !important;
    transition: .2s ease;
}
.skillhub-home-guides__all:hover {
    gap: 11px;
    border-color: rgba(91, 78, 219, .38);
    background: #fff;
    box-shadow: 0 8px 20px rgba(54, 45, 139, .09);
}
.skillhub-home-guide-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.skillhub-home-guide-card {
    border-color: rgba(48, 63, 94, .1);
    box-shadow: 0 8px 24px rgba(31, 42, 75, .04);
}
.skillhub-home-guide-card .skillhub-guide-card__visual { height: 98px; }
.skillhub-home-guide-card .skillhub-guide-card__visual > span:last-child {
    color: rgba(55, 65, 91, .72);
    font-size: 10px;
}
.skillhub-home-guide-card__icon {
    width: 43px;
    height: 43px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 18px rgba(42, 53, 83, .08);
}
.skillhub-home-guide-card .skillhub-guide-card__body {
    min-height: 208px;
    padding: 17px;
}
.skillhub-home-guide-card .skillhub-guide-card__meta { margin-bottom: 10px; }
.skillhub-home-guide-card h3 { font-size: 16px; line-height: 1.55; }
.skillhub-home-guide-card p {
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.65;
}
.skillhub-home-guide-card .skillhub-guide-card__link { font-size: 13px; }

.io-black-mode .skillhub-home-guides__panel {
    border-color: rgba(150, 137, 255, .16);
    background:
        radial-gradient(circle at 96% 0, rgba(112, 91, 235, .13), transparent 30%),
        linear-gradient(145deg, #292b31 0%, #272831 58%, #242a32 100%);
}
.io-black-mode .skillhub-home-guides__heading h2,
.io-black-mode .skillhub-home-guide-card h3 a { color: #e5e8ee; }
.io-black-mode .skillhub-home-guides__heading p,
.io-black-mode .skillhub-home-guide-card p { color: #9ba3b1; }
.io-black-mode .skillhub-home-guides__all {
    border-color: rgba(151, 140, 255, .25);
    color: #b7afff !important;
    background: rgba(255, 255, 255, .035);
}
.io-black-mode .skillhub-home-guide-card {
    border-color: rgba(255, 255, 255, .08);
    background: #2d2e2f;
}

.skillhub-guide-principles { padding: 72px 0; background: #172138; color: #fff; }
.skillhub-guide-principles .skillhub-guide-section-head h2 { color: #fff; max-width: 760px; }
.skillhub-guide-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.skillhub-guide-principle-grid article { padding: 26px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045); }
.skillhub-guide-principle-grid span { color: #9d93ff; font-size: 12px; font-weight: 800; }
.skillhub-guide-principle-grid h3 { margin: 12px 0 8px; color: #fff; }
.skillhub-guide-principle-grid p { margin: 0; color: #b9c3d4; line-height: 1.8; }

.skillhub-guide-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 68px; padding-bottom: 76px; }
.skillhub-guide-footer-cta p { margin: 0; color: #6c788c; }

.skillhub-guide-single__hero,
.skillhub-guide-archive__hero { padding: 38px 0 56px; background: linear-gradient(145deg, #f7f8fc, #eef3ff); border-bottom: 1px solid #e4e8f2; }
.skillhub-guide-single__hero--violet { background: linear-gradient(145deg, #faf8ff, #efeaff); }
.skillhub-guide-single__hero--cyan { background: linear-gradient(145deg, #f6fdff, #e5f7fb); }
.skillhub-guide-single__hero--amber { background: linear-gradient(145deg, #fffcf6, #fff0d6); }
.skillhub-guide-single__hero--rose { background: linear-gradient(145deg, #fff9fb, #ffeaf0); }
.skillhub-guide-single__hero--green { background: linear-gradient(145deg, #f7fffb, #e4f8ef); }
.skillhub-guide-breadcrumb { display: flex; gap: 9px; margin-bottom: 35px; color: #7d899b; font-size: 13px; flex-wrap: wrap; }
.skillhub-guide-breadcrumb a { color: #68758a; text-decoration: none !important; }
.skillhub-guide-single__hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; align-items: center; }
.skillhub-guide-single__copy h1 { max-width: 900px; margin: 12px 0 15px; color: #142139; font-size: clamp(34px, 3.6vw, 46px); line-height: 1.25; letter-spacing: -.03em; }
.skillhub-guide-single__lead { max-width: 850px; margin: 0; color: #5a687e; font-size: 18px; line-height: 1.8; }
.skillhub-guide-single__meta { display: flex; gap: 22px; margin-top: 24px; color: #768398; font-size: 13px; flex-wrap: wrap; }
.skillhub-guide-single__visual { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 8px; border: 1px solid rgba(255,255,255,.85); border-radius: 26px; background: rgba(255,255,255,.56); box-shadow: 0 18px 44px rgba(41, 49, 82, .1); }
.skillhub-guide-single__visual .skillhub-guide-icon { width: 70px; height: 70px; border-radius: 22px; }
.skillhub-guide-single__visual strong { font-size: 19px; }
.skillhub-guide-single__visual > span:last-child { color: #909aad; font-size: 10px; font-weight: 800; letter-spacing: .11em; }

.skillhub-guide-single__layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(240px, 300px); gap: 50px; align-items: start; padding-top: 48px; padding-bottom: 60px; }
.skillhub-guide-single__layout > * { min-width: 0; }
.skillhub-guide-article { padding: clamp(24px, 4vw, 48px); border: 1px solid #e5e8ef; border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(27, 38, 64, .05); }
.skillhub-guide-article > *:first-child { margin-top: 0; }
.skillhub-guide-article h2 { scroll-margin-top: 90px; margin: 42px 0 16px; color: #192840; font-size: 27px; line-height: 1.4; }
.skillhub-guide-article h3 { scroll-margin-top: 90px; margin: 29px 0 12px; color: #293850; font-size: 20px; }
.skillhub-guide-article p,
.skillhub-guide-article li { color: #4f5e73; font-size: 16px; line-height: 1.95; }
.skillhub-guide-article ul,
.skillhub-guide-article ol { margin: 12px 0 24px; padding-left: 1.4em; }
.skillhub-guide-article a { color: #5448cf; text-decoration: underline; text-underline-offset: 3px; }
.skillhub-guide-article table { width: 100%; margin: 20px 0 28px; border-collapse: separate; border: 1px solid #e1e6ef; border-spacing: 0; border-radius: 14px; overflow: hidden; }
.skillhub-guide-article th,
.skillhub-guide-article td { padding: 13px 15px; border-right: 1px solid #e8ebf1; border-bottom: 1px solid #e8ebf1; color: #526076; text-align: left; vertical-align: top; line-height: 1.7; }
.skillhub-guide-article th { color: #27364d; background: #f4f6fa; font-weight: 700; }
.skillhub-guide-article tr:last-child td { border-bottom: 0; }
.skillhub-guide-article th:last-child,
.skillhub-guide-article td:last-child { border-right: 0; }
.skillhub-guide-article blockquote { margin: 23px 0; padding: 18px 20px; border: 0; border-left: 4px solid #6b5ce9; border-radius: 0 13px 13px 0; background: #f4f2ff; color: #3f4c63; }
.skillhub-guide-article code { padding: 2px 6px; border-radius: 5px; color: #5145c7; background: #f0effa; word-break: break-word; }
.skillhub-guide-disclosure { margin-bottom: 30px; padding: 18px 20px; border: 1px solid #e4defd; border-radius: 14px; background: #faf9ff; }
.skillhub-guide-disclosure strong { color: #5145c7; }
.skillhub-guide-disclosure p { margin: 5px 0 0; color: #69758a; font-size: 14px; line-height: 1.8; }
.skillhub-guide-answer-box,
.skillhub-guide-checklist,
.skillhub-guide-source-box { margin: 24px 0; padding: 21px; border: 1px solid #dde4f0; border-radius: 15px; background: #f8faff; }
.skillhub-guide-answer-box strong,
.skillhub-guide-checklist strong,
.skillhub-guide-source-box strong { color: #273750; }
.skillhub-guide-answer-box p:last-child,
.skillhub-guide-source-box p:last-child { margin-bottom: 0; }
.skillhub-guide-context { margin: 38px 0 8px; padding: 22px; border: 1px solid #e0e5ef; border-radius: 17px; background: linear-gradient(145deg, #fbfcff, #f4f6ff); }
.skillhub-guide-context__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.skillhub-guide-context__head h2 { margin: 6px 0 0; font-size: 23px; }
.skillhub-guide-context__head p { max-width: 330px; margin: 0; color: #748096; font-size: 13px; line-height: 1.7; text-align: right; }
.skillhub-guide-context__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.skillhub-guide-context__card { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 78px; padding: 14px 40px 14px 15px; border: 1px solid #e4e7f0; border-radius: 12px; background: #fff; text-decoration: none !important; transition: .2s ease; }
.skillhub-guide-context__card:hover { border-color: #b9b0f4; box-shadow: 0 10px 22px rgba(61, 59, 128, .08); transform: translateY(-2px); }
.skillhub-guide-context__card span { color: #7167d1; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.skillhub-guide-context__card strong { color: #26344c; font-size: 15px; line-height: 1.5; }
.skillhub-guide-context__card i { position: absolute; right: 15px; top: 50%; color: #6b5ce9; font-size: 19px; font-style: normal; transform: translateY(-50%); }
.skillhub-guide-article__footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 44px; padding-top: 22px; border-top: 1px solid #e8ebf2; color: #7b8799; font-size: 13px; flex-wrap: wrap; }

.skillhub-guide-toc { position: sticky; top: 92px; }
.skillhub-guide-toc__inner { padding: 22px; border: 1px solid #e3e7ef; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(28, 39, 65, .05); }
.skillhub-guide-toc__inner > span { color: #28374f; font-weight: 800; }
.skillhub-guide-toc nav { display: grid; gap: 3px; margin: 14px 0 20px; }
.skillhub-guide-toc nav a { padding: 7px 9px; border-radius: 8px; color: #6b778c; font-size: 13px; line-height: 1.4; text-decoration: none !important; }
.skillhub-guide-toc nav a:hover,
.skillhub-guide-toc nav a.is-active { color: #5147c9; background: #f1efff; }
.skillhub-guide-toc__level-3 { padding-left: 22px !important; }
.skillhub-guide-toc__cta { padding: 16px; border-radius: 13px; background: linear-gradient(145deg, #f1efff, #edf6ff); }
.skillhub-guide-toc__cta strong { color: #2d3c53; }
.skillhub-guide-toc__cta p { margin: 6px 0 9px; color: #728096; font-size: 12px; line-height: 1.6; }
.skillhub-guide-toc__cta a { color: #574ccf; font-size: 13px; font-weight: 800; text-decoration: none !important; }
.skillhub-guide-related { padding-bottom: 76px; }

.skillhub-guide-archive__hero { padding-top: 32px; }
.skillhub-guide-archive__identity { display: flex; align-items: center; gap: 18px; }
.skillhub-guide-archive__identity h1 { margin: 6px 0; font-size: 38px; }
.skillhub-guide-archive__identity p { max-width: 760px; margin: 0; color: #637188; font-size: 16px; }
.skillhub-guide-archive__body { padding-top: 48px; padding-bottom: 76px; }
.skillhub-guide-archive__body .skillhub-guide-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skillhub-guide-archive .navigation.pagination { margin-top: 34px; }

@media (max-width: 991px) {
    .skillhub-guide-hero { padding: 62px 0 52px; }
    .skillhub-guide-hero__grid { grid-template-columns: 1fr; gap: 34px; }
    .skillhub-guide-hero__map { grid-template-columns: repeat(3, 1fr); }
    .skillhub-guide-hero__map > div:not(.skillhub-guide-map__line) { display: flex; flex-direction: column; align-items: flex-start; }
    .skillhub-guide-hero__map div span { width: 38px; height: 38px; }
    .skillhub-guide-topic-nav { grid-template-columns: repeat(2, 1fr); }
    .skillhub-guide-card-grid,
    .skillhub-guide-archive__body .skillhub-guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skillhub-home-guides__panel { padding: 24px; }
    .skillhub-guide-single__layout { grid-template-columns: minmax(0, 1fr); }
    .skillhub-guide-toc { position: static; order: -1; }
    .skillhub-guide-toc nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .skillhub-guide-hero { padding: 44px 0 40px; }
    .skillhub-guide-hero h1 { font-size: 34px; }
    .skillhub-guide-hero__copy > p { font-size: 16px; }
    .skillhub-guide-hero__map { grid-template-columns: 1fr; padding: 16px; }
    .skillhub-guide-hero__map > div:not(.skillhub-guide-map__line) { display: grid; grid-template-columns: 38px 1fr; }
    .skillhub-guide-section-head { align-items: stretch; flex-direction: column; }
    .skillhub-guide-topic-nav { display: flex; overflow-x: auto; margin-right: 0; padding-right: 0; scroll-snap-type: x mandatory; }
    .skillhub-guide-topic-nav > a { min-width: 245px; scroll-snap-align: start; }
    .skillhub-guide-topic-section { padding: 19px; }
    .skillhub-guide-topic-section__head { align-items: flex-start; flex-direction: column; }
    .skillhub-guide-topic-section__identity { align-items: flex-start; }
    .skillhub-guide-card-grid,
    .skillhub-guide-archive__body .skillhub-guide-card-grid { grid-template-columns: 1fr; }
    .skillhub-guide-card { display: grid; grid-template-columns: 94px 1fr; }
    .skillhub-guide-card__visual { height: 100%; min-height: 190px; padding: 12px; align-items: flex-start; flex-direction: column; }
    .skillhub-guide-card__visual > span:last-child { writing-mode: vertical-rl; }
    .skillhub-guide-card__body { min-height: 190px; padding: 16px; }
    .skillhub-home-guides { padding-top: 4px; }
    .skillhub-home-guides__panel { padding: 19px; border-radius: 18px; }
    .skillhub-home-guides__header { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 19px; }
    .skillhub-home-guides__heading h2 { font-size: 23px; }
    .skillhub-home-guides__all { padding: 9px 13px; }
    .skillhub-home-guide-card .skillhub-guide-card__visual { height: 100%; min-height: 190px; }
    .skillhub-home-guide-card .skillhub-guide-card__body { min-height: 190px; }
    .skillhub-guide-principle-grid { grid-template-columns: 1fr; }
    .skillhub-guide-footer-cta { align-items: flex-start; flex-direction: column; }
    .skillhub-guide-single__hero { padding-bottom: 38px; }
    .skillhub-guide-single__hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .skillhub-guide-single__visual { min-height: 140px; }
    .skillhub-guide-single__copy h1 { font-size: 32px; }
    .skillhub-guide-single__lead { font-size: 16px; }
    .skillhub-guide-single__layout { gap: 22px; padding-top: 24px; }
    .skillhub-guide-article { padding: 22px 18px; border-radius: 16px; }
    .skillhub-guide-article h2 { font-size: 23px; }
    .skillhub-guide-article table { display: block; overflow-x: auto; white-space: nowrap; }
    .skillhub-guide-context__head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .skillhub-guide-context__head p { max-width: none; text-align: left; }
    .skillhub-guide-context__grid { grid-template-columns: 1fr; }
    .skillhub-guide-toc nav { grid-template-columns: 1fr; }
    .skillhub-guide-archive__identity { align-items: flex-start; }
}