/* ============================================================
   COURSE ROADMAP (CRX)
   Shared layer for the curriculum section on every course page.
   Rebuilt as a learning journey: a centred header, one glass
   stat strip, a vertical module timeline with a gradient spine,
   a skills board and a dark conversion banner.
   Kept in one cached file so the markup stays light.
   ============================================================ */

/* Bold and emphasised text always keeps the face of its parent. Guards
   against any global reset that pins a font on every element. */
.crx strong,
.crx b,
.crx em {
    font-family: inherit;
}

.crx {
    --crx-ink: #0b1526;
    --crx-body: #35465e;
    --crx-line: #dfe9f4;
    --crx-teal-deep: #047857;
    --crx-blue: #0369a1;
    position: relative;
    margin: clamp(44px, 5.6vw, 76px) 0 28px;
    scroll-margin-top: 96px;
    font-family: var(--ph-font, var(--font-sans));
}

/* --- Header --- */
.crx-head {
    max-width: 1060px;
    margin: 0 auto;
    text-align: center;
}

/* Shared badge identity: deep Irish emerald with gold accents. */
.crx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px 11px 16px;
    border-radius: 999px;
    background: linear-gradient(140deg, #04352a 0%, #075e45 55%, #0b7d54 100%);
    border: 1px solid rgba(216, 181, 87, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 1px 2px rgba(6, 63, 48, 0.25),
        0 14px 28px -18px rgba(6, 63, 48, 0.95);
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f8e7ab;
}

.crx-eyebrow svg {
    width: 17px;
    height: 17px;
    color: #eccb62;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crx-title {
    margin: 24px 0 0;
    font: 800 clamp(31px, 3.6vw, 46px)/1.12 var(--ph-font);
    letter-spacing: -0.025em;
    color: var(--crx-ink);
    text-wrap: balance;
}

.crx-lede {
    margin: 20px auto 0;
    max-width: 1000px;
    font: 400 clamp(17px, 1.4vw, 19px)/1.7 var(--ph-font);
    color: var(--crx-body);
    text-wrap: pretty;
}

.crx-lede strong {
    font-weight: 700;
    color: #12283f;
}

/* --- Stat strip --- */
.crx-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(28px, 3.4vw, 44px);
    border-radius: 24px;
    border: 1px solid #d7e8e2;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.68) 100%),
        linear-gradient(155deg, #ecfdf5 0%, #faf5e4 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 56px -44px rgba(12, 50, 80, 0.6);
    overflow: hidden;
}

/* Emerald to gold hairline along the top of the strip. */
.crx-stats::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b7d54 0%, #d8b557 55%, rgba(216, 181, 87, 0) 100%);
}

.crx-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 28px);
    border-left: 1px solid rgba(16, 65, 100, 0.1);
    transition: background-color 0.22s ease-out;
}

.crx-stat:first-child {
    border-left: 0;
}

.crx-stat:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

.crx-stat strong {
    font: 800 clamp(24px, 2.3vw, 30px)/1.08 var(--ph-font);
    letter-spacing: -0.022em;
    color: #065f46;
}

.crx-stat span {
    font: 600 clamp(14.5px, 1.15vw, 15.5px)/1.4 var(--ph-font);
    color: #44566c;
}

.crx-stats-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 15px clamp(18px, 2vw, 28px);
    border-top: 1px solid rgba(16, 65, 100, 0.1);
    background: rgba(255, 255, 255, 0.55);
    font: 500 clamp(15px, 1.2vw, 16px)/1.55 var(--ph-font);
    color: #31455b;
}

.crx-stats-note svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: #0b7d54;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Module journey --- */
.crx-path {
    position: relative;
    display: grid;
    gap: clamp(14px, 1.6vw, 20px);
    list-style: none;
    margin: clamp(28px, 3.4vw, 44px) 0 0;
    padding: 0;
}

.crx-path::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 27px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #d8b557 0%, #0b7d54 40%, #10b981 100%);
    opacity: 0.6;
}

.crx-node {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: clamp(16px, 1.8vw, 24px);
    align-items: start;
}

.crx-node-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(140deg, #04352a 0%, #075e45 55%, #0b7d54 100%);
    border: 3px solid #ffffff;
    color: #f8e7ab;
    font: 800 17px/1 var(--ph-font);
    letter-spacing: 0.01em;
    box-shadow:
        0 0 0 1px rgba(216, 181, 87, 0.55),
        0 10px 20px -10px rgba(6, 63, 48, 0.8);
}

/* The finish line milestone turns gold. */
.crx-node-final .crx-node-num {
    background: linear-gradient(140deg, #e9cd7a 0%, #c9a22a 100%);
    color: #04352a;
    box-shadow:
        0 0 0 1px rgba(201, 162, 42, 0.5),
        0 10px 22px -10px rgba(201, 162, 42, 0.85);
}

.crx-node-card {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px);
    background: linear-gradient(165deg, #ffffff 0%, #fbfdfc 100%);
    border: 1px solid var(--crx-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 32, 56, 0.04);
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}

/* Emerald to gold seam on the leading edge, revealed on hover. */
.crx-node-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, #0b7d54 0%, #d8b557 100%);
    opacity: 0;
    transition: opacity 0.22s ease-out;
}

.crx-node:hover .crx-node-card {
    transform: translateY(-3px);
    border-color: rgba(216, 181, 87, 0.55);
    box-shadow: 0 20px 38px -24px rgba(6, 63, 48, 0.45);
}

.crx-node:hover .crx-node-card::before {
    opacity: 1;
}

.crx-node-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 8px;
}

.crx-node-head:last-child {
    margin-bottom: 0;
}

.crx-node-title {
    flex: 1 1 240px;
    margin: 0;
    font: 700 clamp(18px, 1.55vw, 21px)/1.32 var(--ph-font);
    letter-spacing: -0.014em;
    color: var(--crx-ink);
    text-wrap: balance;
}

.crx-node-tag {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: 999px;
    background: #ecf7f2;
    border: 1px solid #cde8dd;
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #065f46;
}

.crx-node-text {
    margin: 0;
    max-width: 1000px;
    font: 400 clamp(16px, 1.25vw, 17px)/1.68 var(--ph-font);
    color: var(--crx-body);
    text-wrap: pretty;
}

/* Finish line module: warmed with a soft gold wash. */
.crx-node-final .crx-node-card {
    border-color: rgba(216, 181, 87, 0.5);
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(248, 231, 171, 0.4) 0%, rgba(248, 231, 171, 0) 55%),
        linear-gradient(150deg, #ffffff 0%, #f0fbf7 100%);
}

.crx-node-final .crx-node-tag {
    background: #fdf6e0;
    border-color: rgba(201, 162, 42, 0.45);
    color: #7c611a;
}

.crx-exam {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.crx-exam li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    background: linear-gradient(165deg, #ffffff 0%, #f4faf7 100%);
    border: 1px solid #d8ece5;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 32, 56, 0.04);
}

.crx-exam strong {
    font: 800 clamp(19px, 1.8vw, 22px)/1.1 var(--ph-font);
    letter-spacing: -0.02em;
    color: var(--crx-teal-deep);
}

.crx-exam span {
    font: 600 14px/1.35 var(--ph-font);
    color: #44566c;
}

/* --- Skills board: a centred header with generous air, editorial
   outcome rows on a comfortable measure below, and the compliance
   card closing the board across the full width. --- */
.crx-skills {
    position: relative;
    margin-top: clamp(32px, 4vw, 52px);
    padding: clamp(28px, 3.6vw, 56px);
    border-radius: 32px;
    border: 1px solid #d9e8f5;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(236, 253, 245, 0.85) 0%, rgba(236, 253, 245, 0) 55%),
        radial-gradient(70% 60% at 0% 100%, rgba(240, 249, 255, 0.9) 0%, rgba(240, 249, 255, 0) 60%),
        #ffffff;
    box-shadow:
        0 1px 2px rgba(15, 32, 56, 0.04),
        0 24px 48px -32px rgba(13, 60, 80, 0.35);
    overflow: hidden;
}

.crx-skills::before {
    content: "";
    position: absolute;
    top: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 181, 87, 0.55) 30%, rgba(11, 125, 84, 0.45) 70%, transparent);
}

.crx-skills-head {
    max-width: 1020px;
    margin: 0 auto clamp(26px, 3.2vw, 40px);
    text-align: center;
}

.crx-skills-title {
    margin: 18px 0 0;
    font: 800 clamp(26px, 2.6vw, 35px)/1.16 var(--ph-font);
    letter-spacing: -0.02em;
    color: var(--crx-ink);
    text-wrap: balance;
}

.crx-skills-sub {
    margin: 14px auto 0;
    max-width: 940px;
    font: 400 clamp(16.5px, 1.3vw, 18px)/1.66 var(--ph-font);
    color: var(--crx-body);
    text-wrap: pretty;
}

/* Outcomes board: a dense two column grid of filled cards, so the
   wide panel reads as a rich set of concrete skills instead of a
   sparse list floating in white space. */
.crx-skills-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 18px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.crx-skills-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.6vw, 18px);
    padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
    border-radius: 20px;
    border: 1px solid #dbe9e2;
    background: linear-gradient(165deg, #ffffff 0%, #f5faf7 100%);
    box-shadow: 0 1px 2px rgba(9, 42, 32, 0.04);
    overflow: hidden;
    transition: transform 0.22s ease-out, border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

/* Gold thread along the top edge, revealed on hover. */
.crx-skills-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0b7d54 0%, #d8b557 100%);
    opacity: 0;
    transition: opacity 0.22s ease-out;
}

.crx-skills-list li:hover {
    transform: translateY(-3px);
    border-color: rgba(216, 181, 87, 0.6);
    box-shadow: 0 18px 34px -22px rgba(6, 63, 48, 0.45);
}

.crx-skills-list li:hover::before {
    opacity: 1;
}

/* With an odd number of outcomes the closing card spans the full
   row, so the grid always ends on a clean, balanced edge. */
.crx-skills-list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.crx-skill-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(140deg, #04352a 0%, #075e45 55%, #0b7d54 100%);
    border: 1px solid rgba(216, 181, 87, 0.55);
    color: #f8e7ab;
    font: 800 15px/1 var(--ph-font);
    letter-spacing: -0.01em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 16px -10px rgba(6, 63, 48, 0.8);
}

.crx-skill-text {
    font: 500 clamp(16px, 1.25vw, 17px)/1.62 var(--ph-font);
    color: #1e2d44;
    align-self: center;
    text-wrap: pretty;
}

/* Compliance strip that closes the skills board: a deep emerald
   banner with gold accents, echoing the badge identity. The gold
   medallion and label sit on their own header row, the mapping
   text runs the full width below. */
.crx-skills-foot {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: clamp(24px, 3vw, 38px) 0 0;
    padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
    border-radius: 22px;
    border: 1px solid rgba(216, 181, 87, 0.45);
    background:
        radial-gradient(80% 120% at 0% 0%, rgba(216, 181, 87, 0.14) 0%, transparent 55%),
        linear-gradient(140deg, #04352a 0%, #075e45 60%, #0b6b4b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 26px 48px -32px rgba(4, 53, 42, 0.9);
}

/* Ambient shamrock watermark, matching the other dark surfaces. */
.crx-skills-foot::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -46px;
    width: 190px;
    height: 190px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23f8e7ab'><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(90 50 50)'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(270 50 50)'/><path d='M50 50C52 62 50 70 58 80 51 76 46 68 47 55Z'/></g></svg>") no-repeat center / contain;
    opacity: 0.07;
    transform: rotate(-14deg);
    pointer-events: none;
}

/* Content stays above the watermark. */
.crx-skills-foot > * {
    position: relative;
    z-index: 1;
}

.crx-skills-foot-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.crx-skills-foot-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(140deg, #e9cd7a 0%, #c9a22a 100%);
    color: #04352a;
    box-shadow: 0 10px 22px -12px rgba(201, 162, 42, 0.9);
}

.crx-skills-foot-icon svg {
    width: 20px;
    height: 20px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crx-skills-foot-label {
    font: 700 14px/1 var(--ph-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f2d98c;
}

.crx-skills-foot p {
    margin: 0;
    font: 500 clamp(15.5px, 1.2vw, 16.5px)/1.7 var(--ph-font);
    color: #e6f3ec;
    text-wrap: pretty;
}

.crx-skills-foot .crx-link {
    color: #f8e7ab;
}

.crx-skills-foot .crx-link:hover,
.crx-skills-foot .crx-link:focus-visible {
    color: #ffffff;
}

.crx-link {
    color: var(--crx-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color 0.2s ease-out;
}

.crx-link:hover,
.crx-link:focus-visible {
    color: #075985;
}

/* --- Conversion banner: deep midnight navy with gold accents.
   Deliberately a different dark surface from the emerald
   compliance strip right above it, so the two banners read as
   separate moments while the gold keeps them in one family. --- */
.crx-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    margin-top: clamp(24px, 2.8vw, 36px);
    padding: clamp(28px, 3.4vw, 48px) clamp(26px, 3.2vw, 52px);
    border-radius: 28px;
    border: 1px solid rgba(216, 181, 87, 0.38);
    background: linear-gradient(150deg, #0a1c31 0%, #0e2b40 55%, #0e3450 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 36px 76px -48px rgba(6, 22, 40, 0.95);
}

.crx-cta-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 70% at 92% 8%, rgba(216, 181, 87, 0.18) 0%, transparent 70%),
        radial-gradient(42% 64% at 4% 96%, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
}

/* Ambient shamrock watermark: a quiet nod to the Irish identity,
   sitting behind the content at whisper level. */
.crx-cta::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -64px;
    width: 300px;
    height: 300px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23f8e7ab'><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(90 50 50)'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(270 50 50)'/><path d='M50 50C52 62 50 70 58 80 51 76 46 68 47 55Z'/></g></svg>") no-repeat center / contain;
    opacity: 0.07;
    transform: rotate(-14deg);
    pointer-events: none;
}

.crx-cta > :not(.crx-cta-glow) {
    position: relative;
    z-index: 1;
}

.crx-cta-title {
    margin: 0 0 10px;
    font: 800 clamp(23px, 2.3vw, 30px)/1.2 var(--ph-font);
    letter-spacing: -0.02em;
    color: #f4f9fd;
    text-wrap: balance;
}

.crx-cta-sub {
    margin: 0 0 18px;
    max-width: 880px;
    font: 400 clamp(16px, 1.3vw, 17.5px)/1.68 var(--ph-font);
    color: #cde0f0;
    text-wrap: pretty;
}

.crx-cta-sub strong {
    font-weight: 800;
    color: #f2d98c;
}

.crx-cta-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.crx-cta-points li {
    position: relative;
    padding: 9px 15px 9px 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(216, 181, 87, 0.3);
    font: 600 15px/1.3 var(--ph-font);
    color: #e6eff9;
}

.crx-cta-points li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 10px;
    height: 6px;
    margin-top: -5px;
    border: 2px solid #eccb62;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}

.crx-cta-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* Gold primary action on the midnight banner: the one element
   built to catch the eye at the end of the journey. */
.crx-cta-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 19px 30px;
    border-radius: 16px;
    background: linear-gradient(140deg, #f0d98e 0%, #ddb64a 55%, #c9a22a 100%);
    color: #04352a;
    font: 800 clamp(16.5px, 1.3vw, 18px)/1.2 var(--ph-font);
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 18px 34px -16px rgba(201, 162, 42, 0.8);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.crx-cta-btn svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease-out;
}

.crx-cta-btn:hover {
    color: #04352a;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 24px 42px -18px rgba(201, 162, 42, 0.9);
}

.crx-cta-btn:hover svg {
    transform: translateX(3px);
}

.crx-cta-btn:focus-visible {
    outline: 3px solid #f8e7ab;
    outline-offset: 3px;
}

.crx-cta-note {
    text-align: center;
    font: 600 15px/1.45 var(--ph-font);
    color: #a9c4da;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .crx-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crx-skills-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .crx-stat:nth-child(odd) {
        border-left: 0;
    }

    .crx-stat:nth-child(n + 3) {
        border-top: 1px solid rgba(16, 65, 100, 0.1);
    }

    .crx-cta {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .crx-head {
        text-align: left;
    }

    .crx-path::before {
        left: 21px;
    }

    .crx-node {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
    }

    .crx-node-num {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .crx-node-card {
        padding: 18px 18px;
        border-radius: 16px;
    }

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

    .crx-skills {
        padding: 26px 20px;
        border-radius: 22px;
    }

    .crx-skills-list li {
        padding: 16px 16px;
        border-radius: 16px;
    }

    .crx-skill-num {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 14px;
    }

    .crx-skills-foot {
        padding: 18px 16px;
        border-radius: 18px;
        gap: 12px;
    }

    .crx-skills-foot-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .crx-skills-foot-icon svg {
        width: 18px;
        height: 18px;
    }

    .crx-cta {
        padding: 26px 20px;
        border-radius: 22px;
    }

    .crx-cta-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .crx-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .crx-stat {
        border-left: 0;
    }

    .crx-stat:nth-child(n + 2) {
        border-top: 1px solid rgba(16, 65, 100, 0.1);
    }

    .crx-exam {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crx-stat,
    .crx-node-card,
    .crx-node-card::before,
    .crx-skills-list li,
    .crx-skills-list li::before,
    .crx-cta-btn,
    .crx-cta-btn svg,
    .crx-link {
        transition: none;
    }

    .crx-node:hover .crx-node-card,
    .crx-skills-list li:hover,
    .crx-cta-btn:hover {
        transform: none;
    }

    .crx-cta-btn:hover svg {
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}