/* Join Talent Network page (jn2-*). Loaded after rootz-pages.css. */
:root { --jn-ease: cubic-bezier(.22, 1, .36, 1); --jn-skew: -12deg; }
.jn2-h1 { margin: 0 0 18px; font-size: clamp(40px, 5.4vw, 82px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: var(--rz-ink); }
.jn2-h1 em, .jn2-why em { font-style: normal; color: var(--rz-red); }
.jn2-lead { margin: 0 0 28px; max-width: 500px; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: var(--rz-muted); }

/* hero */
.jn2-hero { background: linear-gradient(180deg, #fff1f1, #fff 85%); overflow: hidden; padding-bottom: 0 !important; }
.jn2-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.jn2-trio { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.jn2-trio li { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-left: 1px solid rgba(22,22,22,.14); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--rz-ink); max-width: 210px; }
.jn2-trio li:first-child { padding-left: 0; border-left: 0; }
.jn2-trio .pg-ic { width: 42px; height: 42px; flex: none; }
.jn2-hero-v { position: relative; aspect-ratio: 1.6 / 1; }
.jn2-sk { position: absolute; left: 8%; top: 6%; width: 90%; height: 88%; margin: 0; overflow: hidden; border-radius: 30px 70px 30px 30px; transform: skewX(var(--jn-skew)); box-shadow: 0 30px 60px -30px rgba(22,22,22,.5); background: linear-gradient(135deg, #f7d9d9, #e9ecf5); z-index: 1; }
.jn2-sk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: skewX(12deg) scale(1.28); }
.jn2-mug { position: absolute; right: 12%; top: 44%; display: flex; width: 62px; height: 62px; align-items: center; justify-content: center; border-radius: 16px; background: var(--rz-red); transform: skewX(12deg); box-shadow: 0 16px 30px -10px rgba(225,0,0,.6); }
.jn2-mug svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jn2-slash { position: absolute; border-radius: 18px; background: linear-gradient(180deg, #ff3b3b, var(--rz-red)); transform: skewX(var(--jn-skew)); }
.jn2-slash.a { left: 0; top: 46%; width: 8%; height: 34%; z-index: 0; }
.jn2-slash.b { right: 8%; top: -2%; width: 15%; height: 12%; z-index: 0; }

/* card: why panel + form */
.jn2-formsec { padding-top: 0 !important; }
.jn2-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 44px); padding: clamp(16px, 2vw, 28px); border-radius: 34px; background: #fff; border: 1px solid rgba(22,22,22,.07); box-shadow: 0 34px 70px -40px rgba(22,22,22,.4); }
.jn2-why { position: relative; align-self: stretch; padding: clamp(22px, 2.6vw, 38px) clamp(18px, 2vw, 30px); border-radius: 26px; background: linear-gradient(180deg, #fdeeee, #fff7f7); overflow: hidden; }
.jn2-why::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30px; height: 140px; background: radial-gradient(ellipse at 50% 100%, rgba(225,0,0,.18), transparent 70%); pointer-events: none; }
.jn2-why h2 { margin: 0 0 clamp(22px, 2.6vw, 36px); font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--rz-ink); }
.jn2-why ul { position: relative; z-index: 1; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.jn2-why li { display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--rz-muted); }
.jn2-why li b { display: block; margin-bottom: 3px; font-size: 15.5px; font-weight: 700; color: var(--rz-ink); }
.jn2-why .pg-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fbdcdc; }

.jn2-form.fm-card { padding: clamp(10px, 1.6vw, 24px) clamp(6px, 1.6vw, 24px); border: 0; box-shadow: none; background: transparent; }
.jn2-card .wz-top { display: flex; justify-content: space-between; gap: 0; margin: 0 0 clamp(22px, 2.6vw, 34px); padding: 0; list-style: none; counter-reset: wz; }
.jn2-card .wz-top li { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; font-size: 14px; font-weight: 600; color: var(--rz-muted); }
.jn2-card .wz-top li::before { counter-increment: wz; content: counter(wz); display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(22,22,22,.2); background: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--rz-muted); transition: all .4s var(--jn-ease); }
.jn2-card .wz-top li::after { content: ""; flex: 1; height: 2px; margin: 0 14px; background: rgba(22,22,22,.12); }
.jn2-card .wz-top li:last-child { flex: none; }
.jn2-card .wz-top li:last-child::after { display: none; }
.jn2-card .wz-top li.on { color: var(--rz-ink); }
.jn2-card .wz-top li.on::before { background: var(--rz-red); border-color: var(--rz-red); color: #fff; box-shadow: 0 10px 22px -8px rgba(225,0,0,.6); }
.jn2-card .wz-top li.done { color: var(--rz-red); }
.jn2-card .wz-top li.done::before { content: "\2713"; border-color: var(--rz-red); color: var(--rz-red); }
.jn2-card .wz-top li.done::after { background: var(--rz-red); }

body main .jn2-card .fm legend, .jn2-card legend { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--rz-ink); }
.jn2-card legend .pg-ic { width: 40px; height: 40px; border-radius: 50%; }
.jn2-card legend .pg-ic svg { width: 20px; height: 20px; }
.jn2-card .wz-step.on { gap: clamp(20px, 2.2vw, 30px); }
.jn2-card .wz-step fieldset + fieldset { padding-top: 22px; border-top: 1px solid rgba(22,22,22,.1); }
.jn2-card .fm-actions { justify-content: flex-end; }
.jn2-rv { margin: 0; color: var(--rz-muted); font-size: 16px; line-height: 1.6; }

@media (max-width: 991px) {
    .jn2-hero-grid, .jn2-card { grid-template-columns: 1fr; }
    .jn2-hero-v { max-width: 560px; }
    .jn2-why ul { gap: 18px; }
}
@media (max-width: 575px) {
    .jn2-trio li { max-width: none; border-left: 0; padding: 0 16px 0 0; }
    .jn2-card .wz-top li { font-size: 0; gap: 0; }
    .jn2-card .wz-top li::after { margin: 0 8px; }
    .jn2-card .wz-top li.on { font-size: 13px; gap: 8px; }
    .jn2-card .wz-top li span { display: none; }
    .jn2-card .wz-top li.on span { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .jn2-card .wz-top li::before { transition-duration: .01ms !important; } }

/* responsive fix: keep stepper labels on one line */
@media (max-width: 575px) {
    .jn2-card .wz-top li.on span { white-space: nowrap; font-size: 12.5px; }
    .jn2-card .wz-top li.on { gap: 8px; }
    .jn2-card .wz-top li::after { min-width: 12px; }
}

/* responsive fix: keep the hero artwork clear of the feature row on tablet */
@media (max-width: 991px) { .jn2-hero-v { margin: 36px auto 0; } .jn2-trio li { max-width: none; } }
@media (max-width: 991px) { .jn2-hero-v { width: 100%; } }