@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

:root {
    --home-bg: #f6f7f8;
    --home-surface: #ffffff;
    --home-surface-soft: #f1f4f7;
    --home-text: #27292d;
    --home-muted: #6b7280;
    --home-line: #e4e8ec;
    --home-blue: #3b82f6;
    --home-blue-soft: #dcecff;
    --home-shadow: 0 24px 70px rgba(31, 41, 55, 0.10);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--home-bg);
    color: var(--home-text);
    font-family: 'Onest', Arial, sans-serif;
    background: #f6f7f8;
}

.home-main {
    overflow: clip;
}

.home-shell {
    width: min(100% - 3rem, 92rem);
    margin-inline: auto;
}

/* ---------- shared ---------- */

.btn {
    min-height: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    font: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.7);
    border-color: #d8dde3;
    color: var(--home-text) !important;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--home-text);
    font-weight: 600;
    text-decoration: none;
}

.text-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.text-link:hover::after {
    transform: translateX(4px);
}


.home-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.home-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- hero ---------- */

.hero-container {
    position: relative;
    min-height: 100svh;
    background:
        radial-gradient(circle at 75% 26%, rgba(59, 130, 246, 0.10), transparent 28rem),
        var(--home-bg);
}

.hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(30rem, 1.08fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
    padding-top: 7rem;
    padding-bottom: 4rem;
}

.hero-copy {
    max-width: 42rem;
}

.hero-title {
    margin: 0;
    color: var(--home-text);
    font-size: clamp(3.15rem, 5.1vw, 5.4rem);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero-title-line {
    display: block;
}

.hero-title-line--secondary {
    margin-top: 0.16em;
    color: #4b5563;
}

.hero-description {
    max-width: 38rem;
    margin: 1.65rem 0 0;
    color: #4b5563;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    font-weight: 450;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.hero-stats {
    display: flex;
    gap: 0;
    margin-top: 2.4rem;
}

.hero-stat {
    min-width: 8.7rem;
    padding-right: 1.5rem;
}

.hero-stat + .hero-stat {
    padding-left: 1.5rem;
    border-left: 1px solid #dfe3e8;
}

.hero-stat strong,
.hero-stat span {
    display: block;
}

.hero-stat strong {
    color: var(--home-text);
    font-size: 1.42rem;
    font-weight: 700;
}

.hero-stat span {
    margin-top: 0.18rem;
    color: #70757d;
    font-size: 0.8rem;
    line-height: 1.35;
}

.hero-visual {
    position: relative;
    min-height: 38rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-preview {
    position: relative;
    width: min(100%, 38rem);
    border: 1px solid rgba(210, 216, 223, 0.95);
    border-radius: 1.7rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--home-shadow);
    overflow: hidden;
    backdrop-filter: blur(14px);
    transform: rotate(-1.4deg);
}

.platform-preview__bar {
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0 1rem;
    border-bottom: 1px solid #edf0f3;
}

.platform-preview__bar > span {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    background: #d7dce2;
}

.platform-preview__bar > span:first-child {
    background: #3b82f6;
}

.platform-preview__bar-title {
    margin-left: auto;
    color: #a0a6ae;
    font-size: 0.76rem;
    font-weight: 600;
}

.platform-preview__content {
    padding: 1.6rem;
}

.platform-preview__caption {
    margin-bottom: 1rem;
    color: #8a919a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mini-roadmap {
    position: relative;
    display: grid;
    gap: 0.6rem;
}

.mini-roadmap__line {
    position: absolute;
    top: 2.2rem;
    bottom: 2.2rem;
    left: 1.4rem;
    width: 2px;
    background: linear-gradient(to bottom, #93c5fd, #e5e7eb);
}

.mini-roadmap__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.8rem 1fr auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 4rem;
    padding: 0.58rem 0.8rem 0.58rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.82);
}

.mini-roadmap__item.is-active {
    border-color: #cfe2ff;
    background: #edf6ff;
}

.mini-roadmap__icon {
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    border: 1px solid #e7e9ed;
    border-radius: 50%;
    background: #ffffff;
}

.mini-roadmap__icon img {
    width: 1.85rem;
    height: 1.85rem;
    object-fit: contain;
}

.mini-roadmap__icon--text {
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 750;
}

.mini-roadmap__item strong,
.mini-roadmap__item span {
    display: block;
}

.mini-roadmap__item strong {
    color: #2f3135;
    font-size: 0.92rem;
}

.mini-roadmap__item span {
    margin-top: 0.18rem;
    color: #8a919a;
    font-size: 0.7rem;
}

.mini-roadmap__item i {
    color: #b4bac2;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
}

.hero-code-card {
    position: absolute;
    right: -1.1rem;
    bottom: 2.4rem;
    width: min(23rem, 64%);
    padding: 0.9rem;
    border: 1px solid #dce1e6;
    border-radius: 1.25rem;
    background: #242832;
    box-shadow: 0 20px 50px rgba(31, 41, 55, 0.24);
    transform: rotate(2.2deg);
}

.hero-code-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0.1rem 0.65rem;
    color: #dfe5ed;
    font-size: 0.72rem;
}

.hero-code-card__top span,
.hero-code-card__top em {
    color: inherit;
}

.hero-code-card__top em {
    color: #7fb0ff;
    font-style: normal;
    font-weight: 650;
}

.hero-code-card pre {
    margin: 0;
    padding: 0.82rem 0.9rem;
    overflow: hidden;
    border-radius: 0.8rem;
    background: #1d2129;
    color: #d7dde6;
    font-size: 0.75rem;
    line-height: 1.65;
}

.hero-code-card code,
.hero-code-card code span {
    color: inherit;
}

.hero-code-card .code-key {
    color: #93c5fd;
}

.hero-code-card__result {
    margin-top: 0.55rem;
    color: #9ae6b4;
    font-size: 0.72rem;
    font-weight: 600;
}

.hero-scroll-cue {
    position: absolute;
    bottom: 1.3rem;
    left: 50%;
    width: 2rem;
    height: 3.1rem;
    display: grid;
    place-items: start center;
    padding-top: 0.55rem;
    border: 1px solid #d4d9df;
    border-radius: 1rem;
    transform: translateX(-50%);
}

.hero-scroll-cue span {
    width: 0.25rem;
    height: 0.48rem;
    border-radius: 1rem;
    background: #8e959e;
    animation: scroll-cue 1.7s ease-in-out infinite;
}

@keyframes scroll-cue {
    0%, 100% { transform: translateY(0); opacity: 0.45; }
    50% { transform: translateY(0.95rem); opacity: 1; }
}

/* ---------- roadmap ---------- */

.home-section {
    position: relative;
    padding: clamp(6rem, 9vw, 9rem) 0;
}

.roadmap-section {
    background: #ffffff;
}

.roadmap-layout {
    display: grid;
    grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(4rem, 8vw, 9rem);
    align-items: start;
}

.roadmap-copy {
    position: sticky;
    top: 9rem;
    max-width: 31rem;
}

.roadmap-copy h2,
.practice-story__head h2,
.interview-copy h2 {
    margin: 0;
    color: var(--home-text);
    font-size: clamp(2.2rem, 3.8vw, 4rem);
    font-weight: 650;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.roadmap-copy p,
.practice-story__head p,
.interview-copy p {
    color: #60666f;
    font-size: 1.05rem;
    line-height: 1.65;
}

.roadmap-copy p {
    margin: 1.35rem 0 1.8rem;
}

.roadmap-stack {
    position: relative;
    display: grid;
    gap: 1rem;
}

.roadmap-stack::before {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    left: 3.1rem;
    width: 2px;
    background: linear-gradient(#dbeafe, #c9ddf7 72%, #e7e9ed);
}

.roadmap-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 3.7rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 7.5rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid #e4e8ed;
    border-radius: 1.35rem;
    background: #fbfcfd;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.roadmap-step:hover {
    transform: translateX(7px);
    border-color: #cdddf0;
    box-shadow: 0 14px 38px rgba(31, 41, 55, 0.07);
}


.roadmap-step__logo {
    width: 3.7rem;
    height: 3.7rem;
    display: grid;
    place-items: center;
    border: 1px solid #e6e9ed;
    border-radius: 1.1rem;
    background: #ffffff;
}

.roadmap-step__logo img {
    width: 2.35rem;
    height: 2.35rem;
    object-fit: contain;
}

.roadmap-step__body h3 {
    margin: 0;
    color: #2e3034;
    font-size: 1.08rem;
    font-weight: 650;
}

.roadmap-step__body p {
    margin: 0.35rem 0 0;
    color: #7a8088;
    font-size: 0.86rem;
    line-height: 1.45;
}


/* ---------- practice horizontal story ---------- */

.practice-story {
    position: relative;
    min-height: 385vh;
    background:
        radial-gradient(circle at 14% 15%, rgba(59, 130, 246, 0.08), transparent 26rem),
        var(--home-bg);
}

.practice-story__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 7rem 0 3.5rem;
    overflow: hidden;
}

.practice-story__inner {
    min-width: 0;
}

.practice-story__head {
    max-width: 58rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.practice-story__head p {
    max-width: 48rem;
    margin: 1.25rem auto 0;
}

.practice-title-line {
    display: block;
}

.practice-progress {
    width: 100%;
    height: 3px;
    margin-bottom: 1.35rem;
    overflow: hidden;
    border-radius: 99px;
    background: #e2e6eb;
}

.practice-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #3b82f6;
    transition: width 0.08s linear;
}

.practice-viewport {
    width: 100%;
    overflow: visible;
}

.practice-track {
    display: flex;
    align-items: stretch;
    gap: 1.1rem;
    width: max-content;
    will-change: transform;
}

.practice-card {
    position: relative;
    width: clamp(19rem, 29vw, 25rem);
    min-height: 25rem;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid #e0e5ea;
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 46px rgba(31, 41, 55, 0.07);
}

.practice-card::after {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    right: -3rem;
    top: -3rem;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.05);
}

.practice-card__number {
    color: #b1b8c0;
    font-size: 0.68rem;
    font-weight: 750;
}

.practice-card__meta {
    width: fit-content;
    margin-top: 1.3rem;
    padding: 0.34rem 0.55rem;
    border-radius: 999px;
    background: #eef5ff;
    color: #4f78ad;
    font-size: 0.72rem;
    font-weight: 650;
}

.practice-card h3 {
    min-height: 3.2rem;
    margin: 0.75rem 0 1.2rem;
    color: #2f3135;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.25;
}

.practice-demo {
    margin-top: auto;
    border: 1px solid #e8ebef;
    border-radius: 1.05rem;
    background: #f8fafc;
}

.practice-demo--options {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
}

.practice-demo--options > div {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #e1e5ea;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #515761;
    font-size: 0.83rem;
}

.practice-demo--options i {
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid #c5cbd2;
    border-radius: 50%;
}

.practice-demo--options .is-selected {
    border-color: #b9d6fb;
    background: #eff7ff;
}

.practice-demo--options .is-selected i {
    border: 0.26rem solid #3b82f6;
}

.practice-demo--match {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding: 0.85rem;
}

.practice-demo--match span,
.practice-demo--match b {
    padding: 0.65rem 0.7rem;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #5b616a;
    font-size: 0.76rem;
    font-weight: 550;
    text-align: center;
}

.practice-demo--match b {
    background: #edf5ff;
    color: #5278a8;
}

.practice-demo--code {
    display: grid;
    gap: 0.45rem;
    padding: 1rem;
    overflow: hidden;
    background: #f2f4f7;
    font-family: Consolas, 'Courier New', monospace;
}

.practice-demo--code span {
    color: #3f4650;
    font: inherit;
    font-size: 0.75rem;
    white-space: nowrap;
}

.practice-demo--code .is-error {
    margin-inline: -0.45rem;
    padding: 0.24rem 0.45rem;
    border-radius: 0.45rem;
    background: #fff0f0;
    color: #b74b4b;
}

.practice-demo--code mark {
    border-radius: 0.35rem;
    background: #dcecff;
    color: #3b6ea8;
}

.practice-demo--editor {
    overflow: hidden;
    background: #252a33;
}

.practice-demo__tabs {
    display: flex;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid #363c47;
}

.practice-demo__tabs span {
    color: #87909c;
    font-size: 0.7rem;
}

.practice-demo__tabs .is-active {
    color: #dfe6ee;
}

.practice-demo--editor pre {
    margin: 0;
    padding: 0.85rem;
    color: #dbe2ea;
    font-size: 0.73rem;
    line-height: 1.55;
}

.practice-demo--editor code {
    color: inherit;
}

.practice-demo__passed {
    padding: 0 0.85rem 0.85rem;
    color: #91d7a8;
    font-size: 0.7rem;
}

.practice-demo--exact {
    padding: 1rem;
}

.practice-demo--exact code {
    display: block;
    margin-bottom: 0.75rem;
    color: #67707a;
    font-size: 0.76rem;
}

.practice-demo--exact div {
    padding: 0.7rem 0.8rem;
    border: 1px solid #cfd5dc;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #30343a;
    font-size: 0.85rem;
}

.practice-demo--order {
    display: grid;
    gap: 0.48rem;
    padding: 0.85rem;
}

.practice-demo--order span {
    padding: 0.65rem 0.75rem;
    border: 1px solid #e0e4e9;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #5a616a;
    font-size: 0.77rem;
}


/* ---------- interview ---------- */

.interview-section {
    padding-bottom: 3rem;
    background: #ffffff;
}

.interview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.9fr);
    gap: clamp(4rem, 8vw, 8rem);
    align-items: center;
}

.interview-copy {
    max-width: 45rem;
}

.interview-copy p {
    max-width: 40rem;
    margin: 1.35rem 0 2rem;
}

.interview-numbers {
    display: grid;
    gap: 0.85rem;
}

.interview-number {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
    gap: 1.2rem;
    min-height: 6.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e4e8ed;
    border-radius: 1.25rem;
    background: #fbfcfd;
}

.interview-number strong {
    color: #2e3034;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.interview-number span {
    color: #727982;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* company strip keeps current moving logos, but is now part of the story */
.home-main .logos {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 0 6rem;
    background: #ffffff;
}

/* ---------- progress / ranks / rating ---------- */

.progress-section {
    background:
        radial-gradient(circle at 78% 24%, rgba(59, 130, 246, 0.08), transparent 28rem),
        var(--home-bg);
}

.progress-head {
    max-width: 58rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.progress-head h2 {
    margin: 0;
    color: var(--home-text);
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.progress-head p {
    max-width: 48rem;
    margin: 1.25rem auto 0;
    color: #60666f;
    font-size: 1.05rem;
    line-height: 1.65;
}

.progress-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(22rem, 0.75fr);
    gap: 1rem;
    align-items: stretch;
}

.season-progress-card {
    border: 1px solid #e0e5ea;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 50px rgba(31, 41, 55, 0.06);
}

.season-progress-card {
    min-width: 0;
    padding: 1.5rem;
    border-radius: 1.75rem;
    overflow: hidden;
}

.season-progress-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.season-progress-card__head > div:first-child > span {
    display: block;
    margin-bottom: 0.28rem;
    color: #9097a0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.season-progress-card__head > div:first-child > strong {
    display: block;
    color: #2e3034;
    font-size: 1.08rem;
    font-weight: 650;
}

.season-progress-card__score {
    flex: 0 0 auto;
    text-align: right;
}

.season-progress-card__score strong,
.season-progress-card__score span {
    display: block;
}

.season-progress-card__score strong {
    color: #2e3034;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.season-progress-card__score span {
    margin-top: 0.2rem;
    color: #8a919a;
    font-size: 0.74rem;
}

.season-chart-preview {
    margin-top: 1.5rem;
}

.season-chart-preview__plot {
    position: relative;
    height: 22rem;
    margin-left: 2.85rem;
    margin-right: 6.8rem;
}

.season-chart-preview__grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #dce1e7;
}

.season-chart-preview__grid > span {
    position: absolute;
    right: calc(100% + 0.8rem);
    top: 0;
    transform: translateY(-50%);
    color: #a0a7b0;
    font-size: 0.66rem;
    font-weight: 600;
}

.season-chart-preview__grid > .rank-pill {
    position: absolute;
    left: calc(100% + 0.85rem);
    top: 0;
    transform: translateY(-50%);
}

.season-chart-preview__grid--architect { bottom: 80%; }
.season-chart-preview__grid--lead { bottom: 60%; }
.season-chart-preview__grid--senior { bottom: 40%; }
.season-chart-preview__grid--middle { bottom: 20%; }
.season-chart-preview__grid--junior { bottom: 0; }

.rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.4rem;
    padding: 0.3rem 0.58rem;
    border-radius: 999px;
    font-size: 0.69rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.rank-pill--junior { color: #4f8a3c; background: #edf6df; }
.rank-pill--middle { color: #9a7a18; background: #fff6c9; }
.rank-pill--senior { color: #b66a18; background: #ffead0; }
.rank-pill--lead { color: #bd4537; background: #ffe0d9; }
.rank-pill--architect { color: #9e1c1c; background: #ffd4d4; }

.season-chart-preview__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.season-chart-preview__area {
    fill: url(#homeSeasonArea);
    opacity: 0;
    transition: opacity 0.8s ease 0.45s;
}

.season-chart-preview__line {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 3.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.9s cubic-bezier(.2,.7,.2,1) 0.15s;
}

.season-chart-preview__dot {
    fill: #ffffff;
    stroke: #3b82f6;
    stroke-width: 4;
    opacity: 0;
    transform-origin: 708px 58px;
    transform: scale(0.45);
    transition: opacity 0.3s ease 1.35s, transform 0.35s ease 1.35s;
}

.season-progress-card.is-visible .season-chart-preview__line {
    stroke-dashoffset: 0;
}

.season-progress-card.is-visible .season-chart-preview__area {
    opacity: 1;
}

.season-progress-card.is-visible .season-chart-preview__dot {
    opacity: 1;
    transform: scale(1);
}





.season-chart-preview__axis {
    display: flex;
    justify-content: space-between;
    margin: 0.75rem 6.8rem 0 2.85rem;
    color: #a0a7b0;
    font-size: 0.66rem;
}

.season-progress-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 1.2rem;
    padding-top: 1.15rem;
    border-top: 1px solid #eceff2;
}

.season-progress-card__footer > span {
    max-width: 29rem;
    color: #7c838c;
    font-size: 0.8rem;
    line-height: 1.45;
}

.season-progress-card__footer .text-link {
    flex: 0 0 auto;
    font-size: 0.82rem;
}
/* ---------- dark theme ---------- */

body.dark-theme {
    --home-bg: #111827;
    --home-surface: #1f2937;
    --home-surface-soft: #182231;
    --home-text: #f3f4f6;
    --home-muted: #aeb7c4;
    --home-line: #354151;
    --home-blue-soft: #1d3557;
}

body.dark-theme .hero-container,
body.dark-theme .practice-story {
    background-color: #111827;
}

body.dark-theme .roadmap-section,
body.dark-theme .interview-section,
body.dark-theme .home-main .logos {
    background: #151e2b;
}

body.dark-theme .hero-title,
body.dark-theme .roadmap-copy h2,
body.dark-theme .practice-story__head h2,
body.dark-theme .interview-copy h2,
body.dark-theme .hero-stat strong,
body.dark-theme .roadmap-step__body h3,
body.dark-theme .practice-card h3,
body.dark-theme .interview-number strong,
body.dark-theme .text-link {
    color: #f3f4f6;
}

body.dark-theme .hero-title-line--secondary,
body.dark-theme .hero-description,
body.dark-theme .roadmap-copy p,
body.dark-theme .practice-story__head p,
body.dark-theme .interview-copy p,
body.dark-theme .interview-number span {
    color: #aeb7c4;
}

body.dark-theme .hero-stat + .hero-stat {
    border-left-color: #354151;
}

body.dark-theme .platform-preview,
body.dark-theme .roadmap-step,
body.dark-theme .practice-card,
body.dark-theme .interview-number {
    border-color: #354151;
    background: #1f2937;
}

body.dark-theme .platform-preview__bar {
    border-bottom-color: #354151;
}

body.dark-theme .mini-roadmap__item {
    background: #182231;
}

body.dark-theme .mini-roadmap__item.is-active {
    border-color: #375474;
    background: #1c3047;
}

body.dark-theme .mini-roadmap__icon,
body.dark-theme .roadmap-step__logo,
body.dark-theme .practice-demo--options > div,
body.dark-theme .practice-demo--match span,
body.dark-theme .practice-demo--exact div,
body.dark-theme .practice-demo--order span {
    border-color: #3a4655;
    background: #263242;
}

body.dark-theme .mini-roadmap__item strong,
body.dark-theme .roadmap-step__body h3,
body.dark-theme .practice-demo--options > div,
body.dark-theme .practice-demo--match span,
body.dark-theme .practice-demo--exact div,
body.dark-theme .practice-demo--order span {
    color: #e8edf3;
}

body.dark-theme .practice-demo,
body.dark-theme .practice-demo--code {
    border-color: #354151;
    background: #182231;
}

body.dark-theme .practice-demo--code span {
    color: #d7dde6;
}

body.dark-theme .practice-progress {
    background: #344050;
}

body.dark-theme .btn-secondary {
    border-color: #3b4654;
    background: #1f2937;
    color: #f3f4f6 !important;
}

body.dark-theme .btn-primary {
    background: #3b82f6;
}

body.dark-theme .progress-section {
    background:
        radial-gradient(circle at 78% 24%, rgba(59, 130, 246, 0.10), transparent 28rem),
        #111827;
}

body.dark-theme .progress-head h2,
body.dark-theme .season-progress-card__head > div:first-child > strong,
body.dark-theme .season-progress-card__score strong {
    color: #f3f4f6;
}

body.dark-theme .progress-head p,
body.dark-theme .season-progress-card__footer > span {
    color: #aeb7c4;
}

body.dark-theme .season-progress-card {
    border-color: #354151;
    background: #1f2937;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

body.dark-theme .season-chart-preview__grid {
    border-top-color: #3a4655;
}



body.dark-theme .season-progress-card__footer {
    border-top-color: #354151;
}
body.dark-theme .rank-pill--junior { color: #a7d88f; background: #29402a; }
body.dark-theme .rank-pill--middle { color: #ead66f; background: #4b431f; }
body.dark-theme .rank-pill--senior { color: #efb16b; background: #4c3522; }
body.dark-theme .rank-pill--lead { color: #ef9589; background: #512e2c; }
body.dark-theme .rank-pill--architect { color: #ef8d8d; background: #52282b; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .hero {
        grid-template-columns: minmax(0, 0.95fr) minmax(25rem, 1.05fr);
        gap: 3rem;
    }

    .hero-title {
        font-size: clamp(3rem, 5.6vw, 4.4rem);
    }

    .hero-code-card {
        right: -0.4rem;
    }

    .roadmap-layout,
    .interview-layout {
        gap: 4rem;
    }

    .progress-showcase {
        grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    }
}

@media (max-width: 850px) {
    .home-shell {
        width: min(100% - 2rem, 44rem);
    }

    .hero-container {
        min-height: auto;
    }

    .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-top: 8rem;
        padding-bottom: 5rem;
    }

    .hero-copy {
        max-width: none;
        text-align: center;
    }

    .hero-title {
        font-size: clamp(2.55rem, 10vw, 4.2rem);
        line-height: 1.02;
    }

    .hero-description {
        margin-inline: auto;
        font-size: 1.05rem;
    }

    .hero-actions,
    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        min-height: 32rem;
    }

    .platform-preview {
        width: min(100%, 34rem);
    }

    .hero-code-card {
        right: 0;
        bottom: 0.5rem;
    }

    .hero-scroll-cue {
        display: none;
    }

    .roadmap-layout,
    .interview-layout,
    .practice-story__head {
        grid-template-columns: 1fr;
    }

    .roadmap-copy {
        position: static;
        max-width: 38rem;
    }

    .practice-story {
        min-height: auto;
        padding: 6rem 0;
    }

    .practice-story__sticky {
        position: static;
        min-height: auto;
        display: block;
        padding: 0;
        overflow: visible;
    }

    .practice-story__head {
        max-width: 38rem;
        margin: 0 auto 1.75rem;
        text-align: center;
    }

    .practice-story__head p {
        margin: 1rem auto 0;
    }

    .practice-progress {
        display: none;
    }

    .practice-viewport {
        width: calc(100% + 1rem);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .practice-viewport::-webkit-scrollbar {
        display: none;
    }

    .practice-track {
        transform: none !important;
        gap: 0.85rem;
        padding-right: 1rem;
    }

    .practice-card {
        width: min(82vw, 22rem);
        min-height: 23rem;
        scroll-snap-align: start;
    }

    .interview-numbers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .progress-showcase {
        grid-template-columns: 1fr;
    }
.season-chart-preview__plot {
        height: 20rem;
    }

    .interview-number {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        align-content: start;
    }
}

@media (max-width: 620px) {
    .home-shell {
        width: min(100% - 2rem, 36rem);
    }

    .hero {
        padding-top: 7rem;
    }

    .hero-title {
        font-size: clamp(2.25rem, 11vw, 3.3rem);
    }

   .hero-title-line--secondary {
        margin-top: 0.22em;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .hero-stat {
        min-width: 0;
        padding-right: 0.65rem;
    }

    .hero-stat + .hero-stat {
        padding-left: 0.65rem;
    }

    .hero-stat strong {
        font-size: 1.2rem;
    }

    .hero-stat span {
        font-size: 0.68rem;
    }

    .hero-visual {
        min-height: 29rem;
    }

    .platform-preview__content {
        padding: 1rem;
    }

    .mini-roadmap__item {
        grid-template-columns: 2.6rem 1fr auto;
        gap: 0.65rem;
    }

    .mini-roadmap__icon {
        width: 2.6rem;
        height: 2.6rem;
    }

    .mini-roadmap__item span {
        font-size: 0.62rem;
    }

    .hero-code-card {
        width: 72%;
        right: -0.2rem;
        bottom: -0.5rem;
    }

    .home-section {
        padding: 5.5rem 0;
    }

    .roadmap-copy h2,
    .practice-story__head h2,
    .interview-copy h2,
    .progress-head h2 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .roadmap-step {
        grid-template-columns: 2.9rem 1fr;
        gap: 0.75rem;
        min-height: 0;
        padding: 1rem;
    }

    .roadmap-step__logo {
        width: 2.9rem;
        height: 2.9rem;
        border-radius: 0.9rem;
    }

    .roadmap-step__logo img {
        width: 1.85rem;
        height: 1.85rem;
    }

    .roadmap-stack::before {
        display: none;
    }

    .interview-numbers {
        grid-template-columns: 1fr;
    }

    .progress-head {
        margin-bottom: 2rem;
        text-align: left;
    }

    .progress-head p {
        margin-left: 0;
        margin-right: 0;
    }

    .season-progress-card {
        padding: 1.15rem;
        border-radius: 1.35rem;
    }

    .season-chart-preview__plot {
        height: 17rem;
        margin-left: 2.4rem;
        margin-right: 5.1rem;
    }

    .season-chart-preview__axis {
        margin-left: 2.4rem;
        margin-right: 5.1rem;
    }

    .rank-pill {
        min-width: 4.35rem;
        padding: 0.26rem 0.42rem;
        font-size: 0.58rem;
    }

    .season-chart-preview__grid > .rank-pill {
        left: calc(100% + 0.48rem);
    }

    .season-chart-preview__grid > span {
        right: calc(100% + 0.5rem);
        font-size: 0.58rem;
    }

    .season-chart-preview__current {
        right: -0.1rem;
        gap: 0.3rem;
        padding: 0.38rem 0.45rem;
        font-size: 0.62rem;
        transform: translate(32%, -50%);
    }

    .season-progress-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }
.interview-number {
        grid-template-columns: 6.6rem 1fr;
    }

    .home-main .logos {
        padding-bottom: 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .home-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-scroll-cue span {
        animation: none;
    }

    .practice-track {
        transform: none !important;
    }
}

/* =========================================================
   HERO V3 — CENTERED PRODUCT SHOWCASE
   ========================================================= */

.hero-container {
    min-height: auto;
    background:
        radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.11), transparent 34rem),
        var(--home-bg);
}

.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.55rem;
    padding-top: 6.4rem;
    padding-bottom: 2rem;
}

.hero-copy {
    width: 100%;
    max-width: 68rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-title {
    max-width: 30ch;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(3rem, 4.15vw, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero-title-line--primary {
    display: block;
    white-space: nowrap;
    font-size: 1em;
}

.hero-title-line--secondary {
    margin-top: 0.14em;
    font-size: 0.82em;
    line-height: 1.02;
}

.hero-description {
    max-width: 48rem;
    margin: 1.6rem auto 0;
    text-align: center;
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    line-height: 1.55;
}

.hero-actions {
    justify-content: center;
    margin-top: 1.15rem;
}

.hero-visual {
    position: relative;
    width: min(100%, 78rem);
    min-height: 0;
    display: block;
    margin-top: 1.15rem;
    transform: none !important;
}

/* Desktop: cards sit lower so the scroll cue is visually centered
   between the card row and the next white section. */
@media (min-width: 1051px) {
    .hero-visual {
        transform: translateY(4.4rem) !important;
    }
}

.hero-overview {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(211, 217, 224, 0.96);
    border-radius: 1.55rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(31, 41, 55, 0.11);
    backdrop-filter: blur(16px);
}

.hero-overview::before {
    content: "";
    position: absolute;
    top: 2.05rem;
    left: 7.5%;
    right: 7.5%;
    height: 1px;
    background: linear-gradient(90deg, rgba(59,130,246,.15), rgba(59,130,246,.42), rgba(59,130,246,.15));
    pointer-events: none;
}

.hero-overview__step {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 16.6rem;
    padding: 1.2rem 1.12rem 1.05rem;
    background: rgba(255, 255, 255, 0.66);
}

.hero-overview__step + .hero-overview__step {
    border-left: 1px solid #edf0f3;
}

.hero-overview__step:nth-child(even) {
    background: linear-gradient(180deg, rgba(247,249,252,.78), rgba(250,251,253,.54));
}

.hero-overview__head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    align-items: center;
    gap: .7rem;
    min-height: 2.6rem;
}


.hero-overview__head strong,
.hero-overview__head small {
    display: block;
}

.hero-overview__head strong {
    color: #30343a;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.15;
}

.hero-overview__head small {
    margin-top: .18rem;
    color: #969da7;
    font-size: .63rem;
    font-weight: 550;
    line-height: 1.25;
}

.hero-overview__route {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: .15rem;
    margin-top: 2rem;
}

.hero-overview__route::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, #9bc8ff, #dce8f7);
    transform: translateY(-50%);
}

.hero-overview__route-node {
    position: relative;
    z-index: 1;
    width: 2.15rem;
    height: 2.15rem;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 1px solid #e1e6ec;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31,41,55,.07);
}

.hero-overview__route-node:first-child {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.hero-overview__route-node img {
    width: 1.38rem;
    height: 1.38rem;
    object-fit: contain;
}

.hero-overview__route-labels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .1rem;
    margin-top: .55rem;
    color: #9299a3;
    font-size: .52rem;
    text-align: center;
}

.hero-overview__practice {
    display: grid;
    gap: .48rem;
    margin-top: 1.5rem;
}

.hero-overview__practice-row {
    min-height: 2.65rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .48rem .58rem;
    border: 1px solid #e4e9ef;
    border-radius: .8rem;
    background: #fff;
}

.hero-overview__practice-row b {
    color: #4b5563;
    font-size: .66rem;
    font-weight: 700;
}

.hero-overview__practice-row em,
.hero-overview__practice-row code {
    color: #7890aa;
    font-family: inherit;
    font-size: .57rem;
    font-style: normal;
    white-space: nowrap;
}

.hero-overview__radio {
    width: .72rem;
    height: .72rem;
    border: 1.5px solid #b8c2cf;
    border-radius: 50%;
}

.hero-overview__radio.is-active {
    border-color: #4f87da;
    background: radial-gradient(circle at center, #4f87da 0 40%, transparent 45% 100%);
}

.hero-overview__practice-row--error {
    background: #fffafa;
}

.hero-overview__practice-row--error code {
    padding: .16rem .34rem;
    border-radius: .42rem;
    background: #ffe9e9;
    color: #cf6565;
}

.hero-overview__line-no {
    width: 1rem;
    color: #cf6565;
    font-size: .6rem;
    font-weight: 700;
    text-align: center;
}

.hero-overview__practice-row--lab {
    border-color: #2e3541;
    background: #202733;
}

.hero-overview__practice-row--lab b {
    color: #e9edf3;
}

.hero-overview__practice-row--lab code {
    color: #7ed59e;
}

.hero-overview__code-dot {
    width: .68rem;
    height: .68rem;
    border-radius: .24rem;
    background: #5b9cff;
    box-shadow: 0 0 0 .2rem rgba(91,156,255,.12);
}

.hero-overview__question {
    margin-top: 1.45rem;
    padding: .72rem .75rem;
    border: 1px solid #e3e8ee;
    border-radius: .9rem;
    background: #fff;
}

.hero-overview__question span,
.hero-overview__question strong,
.hero-overview__question i {
    display: block;
}

.hero-overview__question span {
    color: #6590c4;
    font-size: .58rem;
    font-weight: 700;
}

.hero-overview__question strong {
    margin-top: .38rem;
    color: #30343a;
    font-size: .71rem;
    line-height: 1.3;
}

.hero-overview__question i {
    margin-top: .42rem;
    color: #939aa4;
    font-size: .56rem;
    font-style: normal;
}

.hero-overview__companies {
    height: 2.2rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: .65rem;
    padding: .35rem .55rem;
    border-radius: .75rem;
    background: #f8fafc;
    overflow: hidden;
}

.hero-overview__companies img {
    width: 2.8rem;
    height: 1.45rem;
    object-fit: contain;
    opacity: .82;
}

.hero-overview__progress-top {
    display: flex;
    align-items: baseline;
    gap: .38rem;
    margin-top: 1.35rem;
}

.hero-overview__progress-top > strong {
    color: #2f3135;
    font-size: 1.45rem;
    font-weight: 780;
    letter-spacing: -.03em;
}

.hero-overview__progress-top > span {
    color: #8f96a0;
    font-size: .62rem;
}

.hero-overview__progress-top .rank-pill {
    margin-left: auto;
    position: static;
    padding: .25rem .48rem;
    font-size: .56rem;
}

.hero-overview__chart {
    height: 4.9rem;
    margin-top: .45rem;
    padding: .45rem .25rem .15rem;
    border-bottom: 1px dashed #e0e5eb;
}

.hero-overview__chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-overview__chart-area {
    fill: url(#heroOverviewProgressArea);
}

.hero-overview__chart-line {
    fill: none;
    stroke: #4f8fe8;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.hero-overview__chart circle {
    fill: #fff;
    stroke: #4f8fe8;
    stroke-width: 2;
}

.hero-overview__rating {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin-top: .48rem;
    color: #858d97;
    font-size: .6rem;
}

.hero-overview__rating strong {
    color: #4a5664;
    font-size: .72rem;
}

/* Keep section 01 in the original two-column direction: copy left, path right. */
.roadmap-layout {
    grid-template-columns: minmax(19rem, 0.72fr) minmax(0, 1.28fr);
}

.roadmap-copy {
    order: initial;
    justify-self: initial;
}

.roadmap-stack {
    order: initial;
}

body.dark-theme .hero-overview {
    border-color: #354151;
    background: rgba(31, 41, 55, 0.94);
}

body.dark-theme .hero-overview::before {
    background: linear-gradient(90deg, rgba(96,165,250,.12), rgba(96,165,250,.38), rgba(96,165,250,.12));
}

body.dark-theme .hero-overview__step {
    background: rgba(31, 41, 55, 0.72);
}

body.dark-theme .hero-overview__step:nth-child(even) {
    background: rgba(24, 34, 49, 0.78);
}

body.dark-theme .hero-overview__step + .hero-overview__step {
    border-left-color: #354151;
}


body.dark-theme .hero-overview__head strong,
body.dark-theme .hero-overview__question strong,
body.dark-theme .hero-overview__progress-top > strong,
body.dark-theme .hero-overview__rating strong {
    color: #edf2f7;
}

body.dark-theme .hero-overview__head small,
body.dark-theme .hero-overview__route-labels,
body.dark-theme .hero-overview__question i,
body.dark-theme .hero-overview__progress-top > span,
body.dark-theme .hero-overview__rating {
    color: #8d99a8;
}

body.dark-theme .hero-overview__route::before {
    background: linear-gradient(90deg, #3d6c9e, #334155);
}

body.dark-theme .hero-overview__route-node {
    border-color: #3b4656;
    background: #263242;
    box-shadow: none;
}

body.dark-theme .hero-overview__route-node:first-child {
    border-color: #416c9d;
    background: #233a56;
}

body.dark-theme .hero-overview__practice-row,
body.dark-theme .hero-overview__question {
    border-color: #3a4759;
    background: #263242;
}

body.dark-theme .hero-overview__practice-row b {
    color: #dce5ef;
}

body.dark-theme .hero-overview__practice-row--error {
    background: #30272d;
}

body.dark-theme .hero-overview__practice-row--error code {
    background: rgba(204,94,94,.18);
    color: #f1a1a1;
}

body.dark-theme .hero-overview__practice-row--lab {
    border-color: #445064;
    background: #171d27;
}

body.dark-theme .hero-overview__companies {
    background: #202a38;
}

body.dark-theme .hero-overview__chart {
    border-bottom-color: #3b4656;
}

body.dark-theme .hero-overview__chart-area {
    fill: rgba(96,165,250,.10);
}

body.dark-theme .hero-overview__chart-line {
    stroke: #72aef5;
}

body.dark-theme .hero-overview__chart circle {
    fill: #1f2937;
    stroke: #72aef5;
}

@media (max-width: 1050px) {
    .hero {
        min-height: auto;
        padding-top: 7.5rem;
        padding-bottom: 4rem;
    }

    .hero-title-line--primary {
        white-space: normal;
    }

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

    .hero-overview::before {
        display: none;
    }

    .hero-overview__step {
        min-height: 15.5rem;
    }

    .hero-overview__step:nth-child(3) {
        border-top: 1px solid #edf0f3;
        border-left: none;
    }

    .hero-overview__step:nth-child(4) {
        border-top: 1px solid #edf0f3;
    }

    body.dark-theme .hero-overview__step:nth-child(3),
    body.dark-theme .hero-overview__step:nth-child(4) {
        border-top-color: #354151;
    }

    .roadmap-layout {
        grid-template-columns: 1fr;
    }

    .roadmap-copy {
        position: static;
        max-width: 38rem;
    }
}

@media (max-width: 620px) {
    .hero {
        padding-top: 7rem;
        padding-bottom: 3.25rem;
        gap: 1.7rem;
    }

    .hero-title {
        max-width: 100%;
        font-size: clamp(2.15rem, 10.5vw, 3.15rem);
    }

    .hero-description {
        margin-top: .85rem;
        font-size: 1rem;
    }

    .hero-actions {
        width: 100%;
        margin-top: 1.1rem;
    }

    .hero-overview {
        grid-template-columns: 1fr;
        border-radius: 1.25rem;
    }

    .hero-overview__step {
        min-height: auto;
        padding: 1rem;
    }

    .hero-overview__step + .hero-overview__step,
    .hero-overview__step:nth-child(3),
    .hero-overview__step:nth-child(4) {
        border-top: 1px solid #edf0f3;
        border-left: none;
    }

    body.dark-theme .hero-overview__step + .hero-overview__step,
    body.dark-theme .hero-overview__step:nth-child(3),
    body.dark-theme .hero-overview__step:nth-child(4) {
        border-top-color: #354151;
        border-left: none;
    }

    .hero-overview__companies {
        justify-content: flex-start;
    }
}


/* ===== Hero: four independent navigation cards ===== */
.hero-actions {
    display: none !important;
}

.hero-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.hero-overview::before {
    content: none;
    display: none;
}

.hero-overview__step,
.hero-overview__step:nth-child(even),
.hero-overview__step + .hero-overview__step {
    position: relative;
    min-width: 0;
    min-height: 16.6rem;
    padding: 1.2rem 1.12rem 1.05rem;
    overflow: hidden;
    border: 1px solid rgba(211, 217, 224, 0.96);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.88);
    box-shadow: 0 16px 42px rgba(31,41,55,.075);
    backdrop-filter: blur(14px);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hero-overview__step:nth-child(even) {
    background: linear-gradient(180deg, rgba(249,250,252,.94), rgba(255,255,255,.88));
}

.hero-overview__step:hover {
    transform: translateY(-2px);
    border-color: #cfd9e6;
    box-shadow: 0 20px 50px rgba(31,41,55,.10);
}

.hero-overview__step:focus-visible {
    outline: 2px solid rgba(59,130,246,.45);
    outline-offset: 3px;
}

.hero-overview__head {
    grid-template-columns: 2rem minmax(0,1fr);
}

.roadmap-title span {
    display: block;
}




body.dark-theme .hero-overview {
    background: transparent;
}

body.dark-theme .hero-overview__step,
body.dark-theme .hero-overview__step:nth-child(even),
body.dark-theme .hero-overview__step + .hero-overview__step {
    border-color: #354151;
    background: rgba(31,41,55,.88);
    box-shadow: 0 16px 42px rgba(0,0,0,.16);
}

body.dark-theme .hero-overview__step:nth-child(even) {
    background: rgba(24,34,49,.9);
}



@media (max-width: 1050px) {
    .hero-overview {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: .7rem;
    }
    .hero-overview__step,
    .hero-overview__step:nth-child(3),
    .hero-overview__step:nth-child(4),
    .hero-overview__step + .hero-overview__step {
        border: 1px solid rgba(211,217,224,.96);
    }
    body.dark-theme .hero-overview__step,
    body.dark-theme .hero-overview__step:nth-child(3),
    body.dark-theme .hero-overview__step:nth-child(4),
    body.dark-theme .hero-overview__step + .hero-overview__step {
        border-color: #354151;
    }
}

@media (max-width: 620px) {
    .hero-overview {
        grid-template-columns: 1fr;
        gap: .75rem;
        border-radius: 0;
    }
    .hero-overview__step,
    .hero-overview__step:nth-child(3),
    .hero-overview__step:nth-child(4),
    .hero-overview__step + .hero-overview__step {
        min-height: auto;
        border: 1px solid rgba(211,217,224,.96);
        border-radius: 1.1rem;
    }
    body.dark-theme .hero-overview__step,
    body.dark-theme .hero-overview__step:nth-child(3),
    body.dark-theme .hero-overview__step:nth-child(4),
    body.dark-theme .hero-overview__step + .hero-overview__step {
        border-color: #354151;
    }
}


/* ===== Hero cards: keep original content sizing, trim only empty bottom space ===== */
.hero-overview {
    align-items: start;
}

.hero-overview__step,
.hero-overview__step:nth-child(even),
.hero-overview__step + .hero-overview__step {
    min-height: 0;
    height: auto;
    align-self: start;
    padding: 1.2rem 1.12rem 1.05rem;
}

/* Exact same desktop height for all four cards. */
.hero-overview__step--route,
.hero-overview__step--practice,
.hero-overview__step--interview,
.hero-overview__step--progress {
    height: 15.25rem;
    min-height: 15.25rem;
}

/* Route: use the available height for a stepped learning path instead of a footer note. */
.hero-overview__step--route {
    display: flex;
    flex-direction: column;
}

.hero-overview__route--stairs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    gap: .08rem;
    margin-top: 1.3rem;
    padding: 0 .15rem;
}

.hero-overview__route--stairs::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 1.1rem;
    height: 2px;
    background: linear-gradient(90deg, #9bc8ff, #dce8f7);
    transform: rotate(7deg);
    transform-origin: left center;
}

.hero-overview__route-point {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .34rem;
}

.hero-overview__route-point:nth-child(1) { transform: translateY(0); }
.hero-overview__route-point:nth-child(2) { transform: translateY(.55rem); }
.hero-overview__route-point:nth-child(3) { transform: translateY(1.1rem); }
.hero-overview__route-point:nth-child(4) { transform: translateY(1.65rem); }
.hero-overview__route-point:nth-child(5) { transform: translateY(2.2rem); }

.hero-overview__route--stairs .hero-overview__route-node {
    justify-self: auto;
}

.hero-overview__route-label {
    color: #9299a3;
    font-size: .52rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* Two interview questions fill the card without extra copy. */
.hero-overview__step--interview .hero-overview__question {
    margin-top: .5rem;
    padding-top: .58rem;
    padding-bottom: .58rem;
}

.hero-overview__step--interview .hero-overview__head + .hero-overview__question {
    margin-top: .82rem;
}

.hero-overview__step--interview .hero-overview__question strong {
    margin-top: .26rem;
}

/* Progress: same card height, with the chart taking the extra vertical room. */
.hero-overview__step--progress {
    display: flex;
    flex-direction: column;
}

.hero-overview__step--progress .hero-overview__chart {
    flex: 1 1 auto;
    height: auto;
    min-height: 5.65rem;
    margin-top: .45rem;
}

.hero-overview__step--progress .hero-overview__rating {
    margin-top: .42rem;
}

.hero-overview__head {
    grid-template-columns: minmax(0, 1fr) 2rem;
}

.hero-overview__arrow {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    justify-self: end;
    align-self: center;
    border: 1px solid #dbe4ef;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #4f7fb8;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(31, 41, 55, .06);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.hero-overview__step:hover .hero-overview__arrow {
    transform: translateX(2px);
    border-color: #bcd3f3;
    background: #f4f8ff;
    color: #2f6fbe;
}

/* Five company logos, distributed evenly. Internal company bar height stays unchanged. */
.hero-overview__companies {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: .4rem;
}

.hero-overview__companies img {
    width: 100%;
    max-width: 2.4rem;
}

/* Dark theme arrow */
body.dark-theme .hero-overview__arrow {
    border-color: #41536b;
    background: #243244;
    color: #8dbaf0;
    box-shadow: none;
}

body.dark-theme .hero-overview__step:hover .hero-overview__arrow {
    border-color: #587394;
    background: #2a3b50;
    color: #b7d5f7;
}

@media (max-width: 1050px) {
    .hero-overview__step--route,
    .hero-overview__step--practice,
    .hero-overview__step--interview,
    .hero-overview__step--progress {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .hero-overview__step,
    .hero-overview__step:nth-child(3),
    .hero-overview__step:nth-child(4),
    .hero-overview__step + .hero-overview__step {
        min-height: auto;
    }
}


/* Reset fixed hero-card height on smaller screens. */
@media (max-width: 1050px) {
    .hero-overview__step--route,
    .hero-overview__step--practice,
    .hero-overview__step--interview,
    .hero-overview__step--progress {
        height: auto;
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .hero-overview__route--stairs::before {
        transform: rotate(5deg);
    }

    .hero-overview__route-point:nth-child(1) { transform: translateY(0); }
    .hero-overview__route-point:nth-child(2) { transform: translateY(.35rem); }
    .hero-overview__route-point:nth-child(3) { transform: translateY(.7rem); }
    .hero-overview__route-point:nth-child(4) { transform: translateY(1.05rem); }
    .hero-overview__route-point:nth-child(5) { transform: translateY(1.4rem); }
}


/* ===== FINAL FIX: equal hero-card height + true stair-step route ===== */

/* Desktop: all four cards are EXACTLY the same height.
   !important is intentional here because older nth-child rules are more specific. */
@media (min-width: 1051px) {
    .hero-overview {
        align-items: stretch !important;
    }

    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: 15.25rem !important;
        min-height: 15.25rem !important;
        max-height: 15.25rem !important;
        align-self: stretch !important;
    }
}

/* Progress uses the same card height, but the chart consumes the free vertical space. */
.hero-overview__step--progress {
    display: flex;
    flex-direction: column;
}

.hero-overview__step--progress .hero-overview__chart {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0 !important;
    margin-top: .45rem;
    padding-top: .25rem;
    padding-bottom: .1rem;
}

.hero-overview__step--progress .hero-overview__chart svg {
    height: 100%;
}

/* Route: real "stairs" — horizontal segment, vertical drop, next node. */
.hero-overview__route--stairs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 0;
    margin-top: 1.35rem;
    padding: 0 .1rem;
}

/* Kill both old straight/diagonal connectors. */
.hero-overview__route--stairs::before,
.hero-overview__route--stairs.hero-overview__route::before {
    content: none !important;
    display: none !important;
}

.hero-overview__route-point {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .32rem;
}

/* Each next step is lower by the same amount. */
.hero-overview__route-point:nth-child(1) { transform: translateY(0) !important; }
.hero-overview__route-point:nth-child(2) { transform: translateY(.58rem) !important; }
.hero-overview__route-point:nth-child(3) { transform: translateY(1.16rem) !important; }
.hero-overview__route-point:nth-child(4) { transform: translateY(1.74rem) !important; }
.hero-overview__route-point:nth-child(5) { transform: translateY(2.32rem) !important; }

/* Horizontal line from current circle, then a vertical drop to the next circle. */
.hero-overview__route-point:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 1.075rem;
    width: 100%;
    height: .58rem;
    border-top: 2px solid #bddcff;
    border-right: 2px solid #bddcff;
    box-sizing: border-box;
    pointer-events: none;
}

.hero-overview__route--stairs .hero-overview__route-node,
.hero-overview__route--stairs .hero-overview__route-label {
    position: relative;
    z-index: 2;
}

body.dark-theme .hero-overview__route-point:not(:last-child)::after {
    border-color: #456d9c;
}

/* On tablet/mobile keep natural card heights and a slightly tighter staircase. */
@media (max-width: 1050px) {
    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

@media (max-width: 620px) {
    .hero-overview__route-point:nth-child(1) { transform: translateY(0) !important; }
    .hero-overview__route-point:nth-child(2) { transform: translateY(.42rem) !important; }
    .hero-overview__route-point:nth-child(3) { transform: translateY(.84rem) !important; }
    .hero-overview__route-point:nth-child(4) { transform: translateY(1.26rem) !important; }
    .hero-overview__route-point:nth-child(5) { transform: translateY(1.68rem) !important; }

    .hero-overview__route-point:not(:last-child)::after {
        height: .42rem;
    }
}


/* ===== Corrected hero cards + actual staircase route ===== */

/* One desktop grid row = one exact height for all four cards. */
@media (min-width: 1051px) {
    .hero-overview {
        grid-auto-rows: 15.25rem !important;
        align-items: stretch !important;
    }

    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }
}

/* Progress fills the same fixed row; only the graph grows inside it. */
.hero-overview__step--progress {
    display: flex !important;
    flex-direction: column !important;
}

.hero-overview__step--progress .hero-overview__chart {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: .45rem !important;
}

.hero-overview__step--progress .hero-overview__chart svg {
    width: 100% !important;
    height: 100% !important;
}

/* Route: exact orthogonal staircase, matching the drawn idea. */
.hero-overview__route--stairs {
    position: relative !important;
    display: block !important;
    height: 8.2rem !important;
    margin-top: 1.2rem !important;
    padding: 0 !important;
}

/* Disable every older connector implementation. */
.hero-overview__route--stairs::before,
.hero-overview__route--stairs::after,
.hero-overview__route--stairs.hero-overview__route::before,
.hero-overview__route-point::before,
.hero-overview__route-point::after {
    content: none !important;
    display: none !important;
}

.hero-overview__route-stair-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.hero-overview__route-stair-line path {
    fill: none;
    stroke: #bddcff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-overview__route-point {
    position: absolute !important;
    z-index: 2 !important;
    width: 3.5rem;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .3rem !important;
    transform: translate(-50%, -50%) !important;
}

/* Start Java at the card content edge and lengthen every horizontal step
   evenly, while keeping System Design safely inside the card. */
.hero-overview__route-point--1 { left: 7.5%; top: 14%; }
.hero-overview__route-point--2 { left: 27.625%; top: 30%; }
.hero-overview__route-point--3 { left: 47.75%; top: 46%; }
.hero-overview__route-point--4 { left: 67.875%; top: 62%; }
.hero-overview__route-point--5 { left: 88%; top: 78%; }

.hero-overview__route--stairs .hero-overview__route-node,
.hero-overview__route--stairs .hero-overview__route-label {
    position: relative !important;
    z-index: 2 !important;
}

.hero-overview__route-label {
    color: #9299a3;
    font-size: .52rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

body.dark-theme .hero-overview__route-stair-line path {
    stroke: #456d9c;
}

/* Smaller screens go back to natural card heights. */
@media (max-width: 1050px) {
    .hero-overview {
        grid-auto-rows: auto !important;
    }

    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: auto !important;
        min-height: auto !important;
    }
}


/* ===== FINAL ROUTE FIX: nodes sit exactly ON the staircase corners ===== */
@media (min-width: 1051px) {
    .hero-overview {
        grid-auto-rows: 15.25rem !important;
        align-items: stretch !important;
    }

    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
    }
}

.hero-overview__route--stairs {
    position: relative !important;
    display: block !important;
    height: 8.15rem !important;
    margin-top: 1.15rem !important;
    padding: 0 !important;
    overflow: visible !important;
}

.hero-overview__route--stairs::before,
.hero-overview__route--stairs::after,
.hero-overview__route--stairs.hero-overview__route::before,
.hero-overview__route-point::before,
.hero-overview__route-point::after {
    content: none !important;
    display: none !important;
}

.hero-overview__route-stair-line {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.hero-overview__route-stair-line path {
    fill: none !important;
    stroke: #bddcff !important;
    stroke-width: 2 !important;
    vector-effect: non-scaling-stroke !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Important: the route-point box is ONLY the circle. The label is absolutely
   positioned below it, so the point coordinates are the actual circle centers. */
.hero-overview__route--stairs .hero-overview__route-point {
    position: absolute !important;
    z-index: 2 !important;
    width: 2.15rem !important;
    height: 2.15rem !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
}

/* Java is shifted left to the title edge. The remaining nodes keep one
   equal horizontal step, so the staircase stretches without distorting. */
.hero-overview__route--stairs .hero-overview__route-point.hero-overview__route-point--1 {
    left: 7.5% !important; top: 15% !important; transform: translate(-50%, -50%) !important;
}
.hero-overview__route--stairs .hero-overview__route-point.hero-overview__route-point--2 {
    left: 27.625% !important; top: 33% !important; transform: translate(-50%, -50%) !important;
}
.hero-overview__route--stairs .hero-overview__route-point.hero-overview__route-point--3 {
    left: 47.75% !important; top: 51% !important; transform: translate(-50%, -50%) !important;
}
.hero-overview__route--stairs .hero-overview__route-point.hero-overview__route-point--4 {
    left: 67.875% !important; top: 69% !important; transform: translate(-50%, -50%) !important;
}
.hero-overview__route--stairs .hero-overview__route-point.hero-overview__route-point--5 {
    left: 88% !important; top: 87% !important; transform: translate(-50%, -50%) !important;
}

.hero-overview__route--stairs .hero-overview__route-node {
    position: relative !important;
    z-index: 3 !important;
    width: 2.15rem !important;
    height: 2.15rem !important;
    margin: 0 !important;
    background: #fff !important;
}

.hero-overview__route--stairs .hero-overview__route-label {
    position: absolute !important;
    z-index: 3 !important;
    top: calc(100% + .32rem) !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    color: #9299a3 !important;
    font-size: .52rem !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.dark-theme .hero-overview__route-stair-line path {
    stroke: #456d9c !important;
}
body.dark-theme .hero-overview__route--stairs .hero-overview__route-node {
    background: #233245 !important;
}

.hero-overview__step--progress {
    display: flex !important;
    flex-direction: column !important;
}
.hero-overview__step--progress .hero-overview__chart {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: .45rem !important;
}
.hero-overview__step--progress .hero-overview__chart svg {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 1050px) {
    .hero-overview {
        grid-auto-rows: auto !important;
    }
    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: auto !important;
        min-height: auto !important;
    }
}


/* ===== Hero overview: clean solid card surfaces ===== */
/* Light theme: the four main cards are intentionally pure white. */
.hero-overview__step,
.hero-overview__step:nth-child(even),
.hero-overview__step + .hero-overview__step {
    background: #ffffff !important;
    border-color: #e2e8ef !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 16px 42px rgba(31, 41, 55, 0.065) !important;
}

.hero-overview__step:hover,
.hero-overview__step:nth-child(even):hover {
    background: #ffffff !important;
    border-color: #ced8e4 !important;
    box-shadow: 0 20px 50px rgba(31, 41, 55, 0.09) !important;
}

/* Keep secondary/internal UI slightly tinted so the white cards retain depth. */
.hero-overview__companies {
    background: #f7f9fc !important;
}

.hero-overview__practice-row--error {
    background: #fffafa !important;
}

.hero-overview__practice-row--lab {
    background: #202733 !important;
}

/* Dark theme: one solid surface for every main card. */
body.dark-theme .hero-overview__step,
body.dark-theme .hero-overview__step:nth-child(even),
body.dark-theme .hero-overview__step + .hero-overview__step {
    background: #202a38 !important;
    border-color: #354151 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
}

body.dark-theme .hero-overview__step:hover,
body.dark-theme .hero-overview__step:nth-child(even):hover {
    background: #202a38 !important;
    border-color: #46566b !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24) !important;
}

body.dark-theme .hero-overview__practice-row,
body.dark-theme .hero-overview__question {
    background: #263242 !important;
}

body.dark-theme .hero-overview__practice-row--error {
    background: #30272d !important;
}

body.dark-theme .hero-overview__practice-row--lab {
    background: #171d27 !important;
}

body.dark-theme .hero-overview__companies {
    background: #182331 !important;
}


/* ---------- hero title: first-word typewriter ---------- */

.hero-typewriter {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
}

.hero-typewriter__sizer {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.hero-typewriter__text {
    position: absolute;
    inset: 0 auto auto 0;
    white-space: nowrap;
}

.hero-typewriter__caret {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.055em;
    height: 0.82em;
    border-radius: 999px;
    background: currentColor;
    transform: translate(0.055em, -48%);
    opacity: 0;
    pointer-events: none;
}

.hero-typewriter__caret {
    opacity: 1;
    animation: hero-typewriter-caret 1.25s steps(1, end) infinite;
}

@keyframes hero-typewriter-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-typewriter__caret {
        display: none !important;
        animation: none !important;
    }
}


/* ===== HERO CARDS: compact desktop height (~16-18% lower) ===== */
@media (min-width: 1051px) {
    .hero-overview {
        grid-auto-rows: 12.75rem !important;
    }

    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: .9rem .95rem .78rem !important;
    }

    /* Header / 01-04 / arrow */
    .hero-overview__head {
        grid-template-columns: minmax(0, 1fr) 1.8rem !important;
        gap: .55rem !important;
        min-height: 2.2rem !important;
    }

    .hero-overview__arrow {
        width: 1.8rem !important;
        height: 1.8rem !important;
    }

    .hero-overview__index {
        box-shadow: 0 0 0 .26rem rgba(255,255,255,.92) !important;
    }

    /* Route */
    .hero-overview__route--stairs {
        height: 6.35rem !important;
        margin-top: .82rem !important;
    }

    .hero-overview__route--stairs .hero-overview__route-point {
        width: 1.95rem !important;
        height: 1.95rem !important;
    }

    .hero-overview__route--stairs .hero-overview__route-node {
        width: 1.95rem !important;
        height: 1.95rem !important;
    }

    .hero-overview__route-node img {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    .hero-overview__route--stairs .hero-overview__route-label {
        top: calc(100% + .24rem) !important;
    }

    /* Practice */
    .hero-overview__practice {
        gap: .34rem !important;
        margin-top: .88rem !important;
    }

    .hero-overview__practice-row {
        min-height: 2.16rem !important;
        padding: .3rem .5rem !important;
        border-radius: .7rem !important;
    }

    /* Interview */
    .hero-overview__step--interview .hero-overview__head + .hero-overview__question {
        margin-top: .58rem !important;
    }

    .hero-overview__step--interview .hero-overview__question {
        margin-top: .34rem !important;
        padding: .4rem .62rem !important;
        border-radius: .75rem !important;
    }

    .hero-overview__step--interview .hero-overview__question strong {
        margin-top: .18rem !important;
    }

    .hero-overview__companies {
        height: 1.78rem !important;
        margin-top: .36rem !important;
        padding: .22rem .45rem !important;
        border-radius: .65rem !important;
    }

    .hero-overview__companies img {
        max-width: 2.05rem !important;
        height: 1.18rem !important;
    }

    /* Progress */
    .hero-overview__progress-top {
        margin-top: .78rem !important;
    }

    .hero-overview__progress-top > strong {
        font-size: 1.32rem !important;
    }

    .hero-overview__progress-top .rank-pill {
        padding: .2rem .42rem !important;
    }

    .hero-overview__step--progress .hero-overview__chart {
        margin-top: .28rem !important;
        padding-top: .16rem !important;
        padding-bottom: .06rem !important;
    }

    .hero-overview__step--progress .hero-overview__rating {
        margin-top: .22rem !important;
    }
}


/* ===== HERO CARDS: compact desktop width + balanced scroll cue ===== */
@media (min-width: 1051px) {
    .hero-visual {
        width: min(100%, 66rem) !important;
    }

    /* After reducing card height, move the mouse cue upward so it sits
       visually midway between the card row and the next white section. */
    .hero-scroll-cue {
        bottom: 2.9rem !important;
    }
}


/* ===== HERO CARDS: desktop inner typography +10% ===== */
@media (min-width: 1051px) {

    .hero-overview__head strong {
        font-size: .99rem !important;
    }

    .hero-overview__head small {
        font-size: .693rem !important;
    }

    .hero-overview__route-label {
        font-size: .572rem !important;
    }

    .hero-overview__practice-row b {
        font-size: .726rem !important;
    }

    .hero-overview__practice-row em,
    .hero-overview__practice-row code {
        font-size: .627rem !important;
    }

    .hero-overview__line-no {
        font-size: .66rem !important;
    }

    .hero-overview__question span {
        font-size: .638rem !important;
    }

    .hero-overview__question strong {
        font-size: .781rem !important;
    }

    .hero-overview__question i {
        font-size: .616rem !important;
    }

    .hero-overview__progress-top > strong {
        font-size: 1.452rem !important;
    }

    .hero-overview__progress-top > span {
        font-size: .682rem !important;
    }

    .hero-overview__progress-top .rank-pill {
        font-size: .616rem !important;
    }

    .hero-overview__rating {
        font-size: .66rem !important;
    }

    .hero-overview__rating strong {
        font-size: .792rem !important;
    }
}


/* ===== Interview card: keep company logos inside after typography +10% ===== */
@media (min-width: 1051px) {
    .hero-overview__step--interview .hero-overview__head + .hero-overview__question {
        margin-top: .42rem !important;
    }

    .hero-overview__step--interview .hero-overview__question {
        margin-top: .24rem !important;
        padding: .30rem .62rem !important;
    }

    .hero-overview__step--interview .hero-overview__question strong {
        margin-top: .10rem !important;
        line-height: 1.22 !important;
    }

    .hero-overview__step--interview .hero-overview__companies {
        height: 1.56rem !important;
        min-height: 1.56rem !important;
        margin-top: .24rem !important;
        padding: .14rem .45rem !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .hero-overview__step--interview .hero-overview__companies img {
        height: 1.02rem !important;
        max-height: 1.02rem !important;
        object-fit: contain !important;
    }
}


/* ===== CodeLab: light theme only ===== */
/* Large CodeLab preview in the Practice section */
body:not(.dark-theme) .practice-demo--editor {
    border-color: #e1e7ee;
    background: #ffffff;
}

body:not(.dark-theme) .practice-demo--editor .practice-demo__tabs {
    border-bottom-color: #e8edf2;
    background: #fbfcfe;
}

body:not(.dark-theme) .practice-demo--editor .practice-demo__tabs span {
    color: #8b95a2;
}

body:not(.dark-theme) .practice-demo--editor .practice-demo__tabs .is-active {
    color: #343b45;
    font-weight: 600;
}

body:not(.dark-theme) .practice-demo--editor pre {
    background: #ffffff;
    color: #3f4752;
}

body:not(.dark-theme) .practice-demo--editor code {
    color: inherit;
}

body:not(.dark-theme) .practice-demo--editor .practice-demo__passed {
    color: #2f9e62;
    font-weight: 600;
}

/* Mini CodeLab row in the hero Practice card */
body:not(.dark-theme) .hero-overview__practice-row--lab {
    border-color: #dfe6ee !important;
    background: #ffffff !important;
}

body:not(.dark-theme) .hero-overview__practice-row--lab b {
    color: #445064 !important;
}

body:not(.dark-theme) .hero-overview__practice-row--lab code {
    color: #2f9e62 !important;
}

/* ===== Hero cards: larger route tech icons/labels + larger interview company logos ===== */
@media (min-width: 1051px) {
    /* Route card */
    .hero-overview__step--route .hero-overview__route--stairs {
        height: 6.55rem !important;
        margin-top: .72rem !important;
    }

    .hero-overview__step--route .hero-overview__route--stairs .hero-overview__route-point {
        width: 2.18rem !important;
        height: 2.18rem !important;
    }

    .hero-overview__step--route .hero-overview__route--stairs .hero-overview__route-node {
        width: 2.18rem !important;
        height: 2.18rem !important;
    }

    .hero-overview__step--route .hero-overview__route-node img {
        width: 1.42rem !important;
        height: 1.42rem !important;
    }

    .hero-overview__step--route .hero-overview__route-label {
        top: calc(100% + .28rem) !important;
        font-size: .62rem !important;
        line-height: 1.05 !important;
    }

    /* Interview card */
    .hero-overview__step--interview .hero-overview__companies {
        height: 1.8rem !important;
        min-height: 1.8rem !important;
        margin-top: .28rem !important;
        padding: .16rem .42rem !important;
        gap: .46rem !important;
    }

    .hero-overview__step--interview .hero-overview__companies img {
        width: 100% !important;
        max-width: 2.45rem !important;
        height: 1.22rem !important;
        max-height: 1.22rem !important;
        object-fit: contain !important;
    }
}


/* ===== Dark theme cleanup: hero indices + practice cards ===== */

/* Exercise type pills: keep them readable and dark instead of white. */
body.dark-theme .practice-card__meta {
    border: 1px solid #315a88;
    background: #1c3047;
    color: #8dbaf0;
}

/* Matching exercise: the right-side value pills were still using the light theme. */
body.dark-theme .practice-demo--match b {
    border: 1px solid #315a88;
    background: #1c3047;
    color: #a8ccf7;
}

/* Keep highlighted code fragments dark-theme friendly as well. */
body.dark-theme .practice-demo--code mark {
    background: #1d3557;
    color: #9cc7ff;
}


/* Dark theme: highlighted error line in the "Find the bug" card */
body.dark-theme .practice-demo--code .is-error {
    border: 1px solid rgba(204, 94, 94, 0.28);
    background: #30272d;
    color: #f1a1a1;
}

/* =========================================================
   AI MENTOR — STICKY CONVERSATION STORY
   ========================================================= */

.ai-mentor-story {
    position: relative;
    min-height: 310vh;
    background: #ffffff;
}

.ai-mentor-story__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 6.5rem 0 3rem;
    overflow: hidden;
}

.ai-mentor-story__inner {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(19rem, 0.82fr) minmax(31rem, 1.18fr);
    gap: clamp(4rem, 7vw, 8rem);
    align-items: center;
}

.ai-mentor-copy {
    max-width: 37rem;
}

.ai-mentor-title {
    margin: 0;
    color: var(--home-text);
    font-size: clamp(2.2rem, 3.8vw, 4rem);
    font-weight: 650;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.ai-mentor-title span {
    display: block;
}

.ai-mentor-copy > p {
    max-width: 35rem;
    margin: 1.35rem 0 1.65rem;
    color: #60666f;
    font-size: 1.05rem;
    line-height: 1.65;
}

.ai-mentor-demo {
    width: 100%;
    max-width: 44rem;
    justify-self: end;
    overflow: hidden;
    border: 1px solid #e0e5ea;
    border-radius: 1.7rem;
    background: #fbfcfd;
    box-shadow: 0 24px 64px rgba(31, 41, 55, 0.10);
    transform: scale(0.95);
    transform-origin: center right;
}

.ai-mentor-demo__header {
    min-height: 4.7rem;
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid #e8ebef;
    background: #ffffff;
}

.ai-mentor-demo__avatar,
.ai-mentor-message__avatar {
    display: block;
    flex: 0 0 auto;
    background: #ffc0a6;
    -webkit-mask: url('/images/icons/mentor-robot.svg') center / contain no-repeat;
    mask: url('/images/icons/mentor-robot.svg') center / contain no-repeat;
}

.ai-mentor-demo__avatar {
    width: 2.65rem;
    height: 2.65rem;
}

.ai-mentor-demo__header > div {
    min-width: 0;
}

.ai-mentor-demo__header strong,
.ai-mentor-demo__header span {
    display: block;
}

.ai-mentor-demo__header strong {
    color: #2f3135;
    font-size: 0.94rem;
    font-weight: 650;
}

.ai-mentor-demo__header > div > span {
    margin-top: 0.16rem;
    color: #8a919a;
    font-size: 0.7rem;
}

.ai-mentor-demo__online {
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid #e2f4e8;
    border-radius: 50%;
    background: #64b67a;
    box-sizing: content-box;
}

.ai-mentor-conversation {
    min-height: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding: 1.15rem 1.2rem;
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 192, 166, 0.16), transparent 15rem),
        #fbfcfd;
}

.ai-mentor-message {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    opacity: 1;
    filter: none;
    transform: none;
    transform-origin: bottom left;
}

.ai-mentor-story.is-animated .ai-mentor-message {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 22px, 0) scale(0.985);
    will-change: transform, opacity, filter;
}

.ai-mentor-message--user {
    justify-content: flex-end;
    transform-origin: bottom right;
}

.ai-mentor-message__avatar {
    width: 1.65rem;
    height: 1.65rem;
    margin-bottom: 0.18rem;
    opacity: 0.72;
}

.ai-mentor-message__bubble {
    max-width: 84%;
    padding: 0.72rem 0.88rem;
    border: 1px solid #e5e9ee;
    border-radius: 1rem 1rem 1rem 0.35rem;
    background: #ffffff;
    color: #4f5660;
    font-size: 0.8rem;
    line-height: 1.48;
    box-shadow: 0 8px 22px rgba(31, 41, 55, 0.045);
}

.ai-mentor-message--user .ai-mentor-message__bubble {
    max-width: 72%;
    border-color: #cfe2fb;
    border-radius: 1rem 1rem 0.35rem 1rem;
    background: #eef6ff;
    color: #45617f;
    box-shadow: none;
}

.ai-mentor-demo__composer {
    min-height: 4.55rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.2rem;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.78rem 1rem 0.78rem 1.15rem;
    border-top: 1px solid #e8ebef;
    background: #ffffff;
}

.ai-mentor-demo__composer > span {
    min-width: 0;
    color: #9aa1aa;
    font-size: 0.78rem;
}

.ai-mentor-demo__composer > i {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 0.72rem;
    background: #3b82f6;
    color: #ffffff;
    font-size: 1rem;
    font-style: normal;
    font-weight: 650;
}

body.dark-theme .ai-mentor-story {
    background: #151e2b;
}

body.dark-theme .ai-mentor-title,
body.dark-theme .ai-mentor-demo__header strong {
    color: #f3f4f6;
}

body.dark-theme .ai-mentor-copy > p {
    color: #aeb7c4;
}

body.dark-theme body.dark-theme .ai-mentor-demo {
    border-color: #354151;
    background: #1f2937;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

body.dark-theme .ai-mentor-demo__header,
body.dark-theme .ai-mentor-demo__composer {
    border-color: #354151;
    background: #1f2937;
}

body.dark-theme .ai-mentor-demo__header > div > span,
body.dark-theme .ai-mentor-demo__composer > span {
    color: #929dab;
}

body.dark-theme .ai-mentor-demo__online {
    border-color: #263c30;
    background: #76c88c;
}

body.dark-theme .ai-mentor-demo__context {
    border-color: #354151;
    background: #182231;
}

body.dark-theme .ai-mentor-demo__context span {
    color: #8f9baa;
}

body.dark-theme .ai-mentor-demo__context strong {
    color: #cbd3dd;
}

body.dark-theme .ai-mentor-conversation {
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 159, 117, 0.08), transparent 15rem),
        #182231;
}

body.dark-theme .ai-mentor-message__bubble {
    border-color: #354151;
    background: #222e3d;
    color: #d4dbe4;
    box-shadow: none;
}

body.dark-theme .ai-mentor-message--user .ai-mentor-message__bubble {
    border-color: #315a88;
    background: #1c3047;
    color: #b9d5f5;
}

body.dark-theme .ai-mentor-demo__composer > i {
    background: #3b82f6;
}

@media (max-width: 1100px) {
    .ai-mentor-story__inner {
        grid-template-columns: minmax(18rem, 0.78fr) minmax(28rem, 1.22fr);
        gap: 3.5rem;
    }
}

@media (max-width: 850px) {
    .ai-mentor-story {
        min-height: auto;
        padding: 6rem 0;
    }

    .ai-mentor-story__sticky {
        position: static;
        min-height: auto;
        display: block;
        padding: 0;
        overflow: visible;
    }

    .ai-mentor-story__inner {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .ai-mentor-copy {
        max-width: 38rem;
    }

    .ai-mentor-demo {
        max-width: 42rem;
        justify-self: start;
        transform: none;
    }

    .ai-mentor-message {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

@media (max-width: 620px) {
    .ai-mentor-title {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .ai-mentor-copy > p {
        margin: 1rem 0 1.35rem;
    }

            .ai-mentor-demo {
        border-radius: 1.35rem;
    }

    .ai-mentor-demo__header {
        grid-template-columns: 2.35rem minmax(0, 1fr) auto;
        padding: 0.8rem 0.9rem;
    }

    .ai-mentor-demo__avatar {
        width: 2.35rem;
        height: 2.35rem;
    }

    .ai-mentor-demo__context {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem 0.9rem;
    }

    .ai-mentor-demo__context strong {
        text-align: left;
    }

    .ai-mentor-conversation {
        min-height: 0;
        padding: 0.9rem;
    }

    .ai-mentor-message__bubble {
        max-width: calc(100% - 2.2rem);
        font-size: 0.76rem;
    }

    .ai-mentor-message--user .ai-mentor-message__bubble {
        max-width: 84%;
    }

    .ai-mentor-demo__composer {
        padding: 0.7rem 0.8rem 0.7rem 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 851px) {
    .ai-mentor-story {
        min-height: auto;
        padding: 6rem 0;
    }

    .ai-mentor-story__sticky {
        position: static;
        min-height: auto;
        padding: 0;
    }

    .ai-mentor-message {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

/* =========================================================
   CERTIFICATES — STICKY FAN-OUT STORY
   ========================================================= */

.certificate-story {
    position: relative;
    min-height: 265vh;
    background: var(--home-bg);
}

.certificate-story__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 6.5rem 0 3rem;
}

.certificate-story__inner {
    min-width: 0;
}

.certificate-story__head {
    max-width: 58rem;
    margin: 0 auto 1rem;
    text-align: center;
}

.certificate-story__head h2 {
    margin: 0;
    color: var(--home-text);
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.certificate-story__head p {
    max-width: 48rem;
    margin: 1.15rem auto 0;
    color: #60666f;
    font-size: 1.05rem;
    line-height: 1.65;
}

.certificate-story__stage {
    position: relative;
    width: 100%;
    height: clamp(22rem, 39vw, 30rem);
    margin: 0 auto;
    overflow: visible;
}

.home-certificate-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(19rem, 35vw, 27rem);
    margin: 0;
    border: 1px solid #e7eaee;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 54px rgba(31, 41, 55, 0.16);
    transform-origin: center center;
    will-change: transform;
    overflow: hidden;
    pointer-events: none;
}

.home-certificate-card--algorithms,
.home-certificate-card--system-design {
    z-index: 1;
}

.home-certificate-card--spring,
.home-certificate-card--sql {
    z-index: 2;
}

.home-certificate-card--java {
    z-index: 3;
}

.home-certificate-card__canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1684 / 1190;
    display: block;
    background: #ffffff;
}

.certificate-story__action {
    display: flex;
    justify-content: center;
    margin-top: -0.25rem;
}

body.dark-theme .certificate-story {
    background: #111827;
}

body.dark-theme .certificate-story__head h2 {
    color: #f3f4f6;
}

body.dark-theme .certificate-story__head p {
    color: #aeb7c4;
}

body.dark-theme .home-certificate-card {
    background: #111827;
    border-color: #354151;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
}

body.dark-theme .home-certificate-card__canvas {
    background: #111827;
}

@media (max-width: 850px) {
    .certificate-story {
        min-height: auto;
        padding: 6rem 0;
    }

    .certificate-story__sticky {
        position: static;
        min-height: auto;
        display: block;
        padding: 0;
        overflow: visible;
    }

    .certificate-story__head {
        max-width: 38rem;
        margin-bottom: 2rem;
    }

    .certificate-story__stage {
        width: calc(100% + 1rem);
        height: auto;
        display: flex;
        gap: 0.85rem;
        margin: 0;
        padding: 0 1rem 1rem 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .certificate-story__stage::-webkit-scrollbar {
        display: none;
    }

    .home-certificate-card {
        position: relative;
        inset: auto;
        width: min(78vw, 24rem);
        flex: 0 0 auto;
        transform: none !important;
        scroll-snap-align: center;
        box-shadow: 0 14px 34px rgba(31, 41, 55, 0.12);
    }

    .certificate-story__action {
        margin-top: 1.5rem;
    }
}

@media (max-width: 560px) {
    .certificate-story__head {
        text-align: left;
    }

    .certificate-story__head h2 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .certificate-story__head p {
        margin-left: 0;
        margin-right: 0;
    }

    .certificate-story__action {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 851px) {
    .certificate-story {
        min-height: auto;
        padding: 6rem 0;
    }

    .certificate-story__sticky {
        position: static;
        min-height: auto;
        padding: 0;
    }

    .certificate-story__stage {
        height: auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 2rem auto;
    }

    .home-certificate-card {
        position: relative;
        inset: auto;
        width: 100%;
        transform: none !important;
        box-shadow: 0 10px 26px rgba(31, 41, 55, 0.1);
    }
}

/* ---------- compact desktop rhythm for roadmap / interview / progress ---------- */
@media (min-width: 851px) {
    .roadmap-section {
        padding: clamp(4.5rem, 6vw, 6rem) 0;
    }

    .roadmap-layout {
        gap: clamp(3rem, 5vw, 5.5rem);
    }

    .roadmap-copy {
        top: 7rem;
    }

    .roadmap-stack {
        gap: 0.75rem;
    }

    .roadmap-step {
        min-height: 6.25rem;
        padding: 0.9rem 1.15rem;
    }

    .roadmap-step__logo {
        width: 3.35rem;
        height: 3.35rem;
    }

    .roadmap-step__logo img {
        width: 2.15rem;
        height: 2.15rem;
    }

    .roadmap-step__body p {
        margin-top: 0.28rem;
    }

    .interview-section {
        padding: clamp(4.25rem, 5.5vw, 5.5rem) 0 2.25rem;
    }

    .interview-layout {
        gap: clamp(3rem, 5vw, 5rem);
    }

    .interview-copy p {
        margin: 1rem 0 1.5rem;
    }

    .interview-numbers {
        gap: 0.65rem;
    }

    .interview-number {
        min-height: 5.35rem;
        padding: 0.8rem 1.1rem;
    }

    .home-main .logos {
        padding-bottom: 4.25rem;
    }

    .progress-section {
        padding: clamp(4.75rem, 6vw, 6rem) 0;
    }

    .progress-head {
        margin-bottom: 2rem;
    }

    .progress-head p {
        margin-top: 1rem;
        line-height: 1.55;
    }

    .progress-showcase {
        gap: 0.85rem;
    }

    .season-progress-card {
        display: flex;
        flex-direction: column;
        padding: 1.25rem;
    }

    .season-chart-preview {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        margin-top: 1.1rem;
    }

    .season-chart-preview__plot {
        flex: 1 1 auto;
        height: auto;
        min-height: 17.5rem;
    }

    .season-chart-preview__axis {
        margin-top: 0.55rem;
    }

    .season-progress-card__footer {
        margin-top: 0.9rem;
        padding-top: 0.85rem;
    }
}


/* ---------- final alignment / compact progress chart tuning ---------- */
@media (min-width: 851px) {
    /* Align the left CTA with the leaderboard CTA by their bottom edge. */
    .season-progress-card {
        padding-bottom: 1.05rem;
    }

    .season-progress-card__footer {
        align-items: flex-end;
    }

    /* Give the compact Progress card more room for the graph. */
    .hero-overview__step--progress .hero-overview__progress-top {
        margin-top: .9rem;
    }

    .hero-overview__step--progress .hero-overview__chart {
        margin-top: .2rem !important;
        padding-top: .1rem;
        padding-bottom: .08rem;
    }

    .hero-overview__step--progress .hero-overview__rating {
        margin-top: .32rem;
    }
}

/* ---------- hero overview: symmetric top/bottom visual spacing ---------- */
@media (min-width: 1051px) {
    /* Keep card headings/subtitles fixed; only shift the content below them. */
    .hero-overview__step--route .hero-overview__route--stairs {
        margin-top: 1.45rem !important;
    }

    .hero-overview__step--practice .hero-overview__practice {
        margin-top: 2.2rem;
    }

    .hero-overview__step--interview .hero-overview__head + .hero-overview__question {
        margin-top: 1.67rem;
    }
}

/* ---------- hero overview: equal card heights in the 2-column layout ---------- */
@media (min-width: 621px) and (max-width: 1050px) {
    /* Let the tallest card define each grid row, then stretch its neighbour
       to the exact same row height. No hard-coded tablet card height needed. */
    .hero-overview {
        align-items: stretch !important;
    }

    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }
}

/* ---------- hero overview: keep visual top/bottom padding truly symmetric ---------- */
@media (min-width: 621px) {
    /* The title/subtitle block stays exactly where it is. The only geometry
       change is below it: the content stack consumes the remaining height
       from the bottom up, so responsive equal-height rows cannot leave a
       random empty strip under shorter cards. */
    .hero-overview > .hero-overview__step,
    .hero-overview > .hero-overview__step:nth-child(2),
    .hero-overview > .hero-overview__step:nth-child(3),
    .hero-overview > .hero-overview__step:nth-child(4) {
        padding-top: 1.2rem !important;
        padding-bottom: 1.2rem !important;
        box-sizing: border-box !important;
    }

    .hero-overview__step--route,
    .hero-overview__step--practice,
    .hero-overview__step--interview,
    .hero-overview__step--progress {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-overview__head {
        flex: 0 0 auto;
    }

    /* Practice: the bottom edge of the CodeLab row mirrors the card's top gap. */
    .hero-overview__step--practice .hero-overview__practice {
        margin-top: auto !important;
    }

    /* Interviews: move the whole questions + companies stack together rather
       than changing the spacing between its individual elements. */
    .hero-overview__step--interview .hero-overview__head + .hero-overview__question {
        margin-top: auto !important;
    }

    /* Route labels hang slightly below the route canvas. Reserve that overhang
       explicitly, then push the complete staircase to the bottom as one unit. */
    .hero-overview__step--route .hero-overview__route--stairs {
        margin-top: auto !important;
        margin-bottom: .8rem !important;
        flex: 0 0 auto;
    }

    /* Progress already has a flexible chart. Let that chart absorb all free
       room so the #1 row naturally lands on the same visual bottom line. */
    .hero-overview__step--progress .hero-overview__chart {
        flex: 1 1 auto !important;
    }
}


/* ---------- final hero overview micro-alignment ---------- */
@media (min-width: 621px) {
    /* Lift the score/rank row slightly; the flexible chart receives exactly
       that reclaimed height, while the #1 row stays anchored at the bottom. */
    .hero-overview__step--progress .hero-overview__progress-top {
        margin-top: .65rem !important;
    }

    .hero-overview__step--progress .hero-overview__chart {
        margin-top: .14rem !important;
        padding-top: 0 !important;
    }
}


/* ---------- final graph endpoint markers: always true circles ---------- */
.season-chart-preview__plot {
    position: relative;
}

/* The SVG uses preserveAspectRatio="none", so an SVG <circle> becomes an oval
   when the graph is stretched. Keep the marker as an absolutely positioned
   CSS circle instead. */
.season-chart-preview__dot {
    position: absolute;
    left: 98.333%;
    top: 19.333%;
    z-index: 4;
    width: 1rem;
    height: 1rem;
    box-sizing: border-box;
    border: 4px solid #3b82f6;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45);
    transform-origin: center;
    pointer-events: none;
    transition: opacity .3s ease 2.7s, transform .35s ease 2.7s;
}

.season-progress-card.is-visible .season-chart-preview__dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.hero-overview__chart-plot {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-overview__chart-dot {
    position: absolute;
    /* Exact SVG endpoint: x=216/220, y=10/74. The HTML marker itself
       never participates in the SVG's non-uniform scaling. */
    left: 98.182%;
    top: 13.514%;
    z-index: 3;
    width: .58rem;
    height: .58rem;
    box-sizing: border-box;
    border: 2px solid #4f8fe8;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body.dark-theme .hero-overview__chart-dot {
    border-color: #72aef5;
    background: #1f2937;
}

/* =========================================================
   HOME RHYTHM V5 — 100VH VISIBLE AI STAGE + ORIGINAL SCROLL STORY
   ========================================================= */

/*
 * The page keeps the original long scroll track that made the dialogue reveal
 * feel natural. Only the sticky visual stage is grey and it is exactly 100vh.
 * The transparent outer track exists solely to provide scroll distance.
 */
.ai-mentor-story {
    position: relative;
    width: 100%;
    min-height: 310vh;
    background: transparent;
}

.ai-mentor-story__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: clamp(3.8rem, 5.4vh, 4.6rem) 0 clamp(1.8rem, 2.8vh, 2.4rem);
    overflow: hidden;
    background: var(--home-bg);
}

.ai-mentor-story__inner {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    transform: translateY(-2.4vh);
}

.ai-mentor-copy {
    width: 100%;
    max-width: 61rem;
    margin: 0 auto;
    text-align: center;
}

.ai-mentor-title {
    margin: 0;
    font-size: clamp(2.2rem, 3.65vw, 3.85rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.ai-mentor-copy > p {
    max-width: 52rem;
    margin: 1.05rem auto 0;
    line-height: 1.55;
}

.ai-mentor-demo {
    width: min(100%, 51rem);
    max-width: 51rem;
    justify-self: auto;
    margin: 1.85rem auto 0;
    transform: none;
    transform-origin: center;
}

.ai-mentor-demo__header {
    min-height: 3.9rem;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.ai-mentor-conversation {
    min-height: clamp(11.5rem, 24vh, 14rem);
    gap: 0.58rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.ai-mentor-message__bubble {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
}

.ai-mentor-demo__composer {
    min-height: 3.75rem;
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
}

/* White feature row: left copy + the complete original season progress card. */
.progress-section {
    min-height: auto;
    display: block;
    padding: clamp(6.8rem, 7.2vw, 7.4rem) 0;
    background: #ffffff;
}

.progress-layout {
    display: grid;
    grid-template-columns: minmax(19rem, 0.72fr) minmax(38rem, 1.28fr);
    gap: clamp(3.5rem, 6vw, 6rem);
    align-items: center;
}

.progress-head {
    max-width: 37rem;
    margin: 0;
    text-align: left;
}

.progress-head h2 {
    font-size: clamp(2.2rem, 3.8vw, 4rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.progress-head p {
    max-width: 35rem;
    margin: 1.35rem 0 0;
}

.progress-showcase,
.progress-showcase--compact {
    display: block;
    min-width: 0;
}

/* Keep the right edge in place and pull only the left edge inward by 10%. */
.progress-showcase .season-progress-card {
    width: 90%;
    margin-left: auto;
    box-sizing: border-box;
}

/*
 * Run the season graph animation only when this exact card actually enters the
 * viewport. This decouples it from the generic home-reveal animation, which can
 * become visible earlier after a long sticky section.
 */
.season-progress-card[data-season-progress-card] .season-chart-preview__line {
    stroke-dashoffset: 1 !important;
    transition: stroke-dashoffset 2.9s cubic-bezier(.2,.7,.2,1) 0.15s;
}

.season-progress-card[data-season-progress-card] .season-chart-preview__area {
    opacity: 0 !important;
    transition: opacity 0.8s ease 0.45s;
}

.season-progress-card[data-season-progress-card] .season-chart-preview__dot {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.45) !important;
    transition: opacity .3s ease 2.7s, transform .35s ease 2.7s;
}

.season-progress-card[data-season-progress-card].is-chart-visible .season-chart-preview__line {
    stroke-dashoffset: 0 !important;
}

.season-progress-card[data-season-progress-card].is-chart-visible .season-chart-preview__area {
    opacity: 1 !important;
}

.season-progress-card[data-season-progress-card].is-chart-visible .season-chart-preview__dot {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Preserve white/grey alternation in the dark theme. */
body.dark-theme .ai-mentor-story__sticky {
    background: #111827;
}

body.dark-theme .progress-section {
    background: #151e2b;
}

@media (max-width: 1100px) {
    .progress-layout {
        grid-template-columns: minmax(18rem, 0.72fr) minmax(33rem, 1.28fr);
        gap: 3.25rem;
    }

    .ai-mentor-demo {
        width: min(100%, 48rem);
        max-width: 48rem;
    }
}

@media (max-width: 850px) {
    .ai-mentor-story {
        min-height: auto;
        padding: 6rem 0;
        background: var(--home-bg);
    }

    .ai-mentor-story__sticky {
        position: static;
        height: auto;
        min-height: auto;
        max-height: none;
        display: block;
        padding: 0;
        overflow: visible;
        background: transparent;
    }

    .ai-mentor-story__inner {
        transform: none;
        gap: 2rem;
    }

    .ai-mentor-copy {
        max-width: 40rem;
    }

    .ai-mentor-demo {
        width: min(100%, 44rem);
        max-width: 44rem;
        margin-inline: auto;
    }

    .ai-mentor-conversation {
        min-height: 0;
    }

    .ai-mentor-message {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .progress-section {
        min-height: auto;
        padding: 6.9rem 0;
    }

    .progress-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .progress-head {
        max-width: 38rem;
    }

    .progress-showcase {
        width: 100%;
        max-width: 44rem;
    }

    .progress-showcase .season-progress-card {
        width: 100%;
        margin-left: 0;
    }

    body.dark-theme .ai-mentor-story {
        background: #111827;
    }
}

@media (max-width: 620px) {
    .ai-mentor-title,
    .progress-head h2 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .progress-showcase .season-progress-card {
        padding: 1rem;
        border-radius: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 851px) {
    .ai-mentor-story {
        min-height: 100vh;
    }

    .ai-mentor-message {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .season-progress-card[data-season-progress-card] .season-chart-preview__line {
        stroke-dashoffset: 0 !important;
    }

    .season-progress-card[data-season-progress-card] .season-chart-preview__area,
    .season-progress-card[data-season-progress-card] .season-chart-preview__dot {
        opacity: 1 !important;
    }

    .season-progress-card[data-season-progress-card] .season-chart-preview__dot {
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

@media (min-width: 851px) {
    .ai-mentor-conversation {
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
    }
}