/* Tool-Lifes — /major app layer.
 * Loaded on /major/* with job.css underneath. All new selectors use .mjr-* or
 * body.mjr-app scoped rules so they cannot collide with /sports or /job chrome.
 * Language tuning rides on html[lang=…] (set by the builder). */

@font-face {
  font-family: "TL Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: local("Fraunces"), url("/fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "TL Source Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: local("Source Sans 3"), local("Source Sans Pro"), url("/fonts/source-sans-3-latin.woff2") format("woff2");
}

.mjr-app {
  --mjr-disp: "TL Fraunces", "Fraunces", "Source Han Serif K", "Noto Serif KR", "Noto Serif JP",
    "Noto Serif SC", Georgia, "Times New Roman", serif;
  --mjr-sans: "TL Source Sans", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "Yu Gothic",
    "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mjr-ink3: #3d4f66;
  --mjr-glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --mjr-depth: 0 18px 48px -22px rgba(11, 18, 32, .45);
  --mjr-track: -.015em;
  --mjr-leading: 1.72;
  --mjr-prose-max: 54em;
  font-family: var(--mjr-sans);
  line-height: var(--mjr-leading);
}

/* —— Language-optimised type & rhythm —— */
html[lang="ko"] .mjr-app {
  --mjr-disp: "Fraunces", "Apple SD Gothic Neo", "Noto Serif KR", "Source Han Serif K", serif;
  --mjr-sans: "Apple SD Gothic Neo", "Noto Sans KR", "Source Sans 3", sans-serif;
  --mjr-track: -.02em;
  --mjr-leading: 1.82;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang="ja"] .mjr-app {
  --mjr-disp: "Fraunces", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif;
  --mjr-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --mjr-track: .01em;
  --mjr-leading: 1.9;
  line-break: strict;
}
html[lang="zh-Hans"] .mjr-app {
  --mjr-disp: "Fraunces", "Songti SC", "Noto Serif SC", "STSong", serif;
  --mjr-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Sans 3", sans-serif;
  --mjr-track: .02em;
  --mjr-leading: 1.88;
}
html[lang="ru"] .mjr-app {
  --mjr-track: -.005em;
  --mjr-leading: 1.78;
  font-size: 16.75px;
}
html[lang="de"] .mjr-app,
html[lang="es"] .mjr-app,
html[lang="fr"] .mjr-app,
html[lang="pt-BR"] .mjr-app,
html[lang="en"] .mjr-app {
  --mjr-track: -.02em;
}

.mjr-app h1,
.mjr-app h2,
.mjr-app .jhero h1,
.mjr-app .hero h1 {
  font-family: var(--mjr-disp);
  letter-spacing: var(--mjr-track);
  font-optical-sizing: auto;
}
.mjr-app .section-intro,
.mjr-app .lede { max-width: var(--mjr-prose-max); }
html[lang="ko"] .mjr-app .lede,
html[lang="ja"] .mjr-app .lede,
html[lang="zh-Hans"] .mjr-app .lede { font-size: 1.02rem; }

/* —— Atmosphere / 3D stage behind heroes —— */
.mjr-app .hero,
.mjr-app .jhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
}
.mjr-stage {
  position: absolute; inset: -8% -4%; z-index: 0; pointer-events: none;
  perspective: 900px; transform-style: preserve-3d;
}
.mjr-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 20%, var(--mjr-glow), transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 80%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 65%),
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.03) 22px 23px);
  opacity: .85;
  transform: translateZ(-80px) scale(1.12);
}
.mjr-orb {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), var(--accent) 45%, transparent 72%);
  filter: blur(1px);
  box-shadow: 0 0 40px var(--mjr-glow);
  will-change: transform;
}
.mjr-o1 { width: 180px; height: 180px; top: 8%; right: 12%; opacity: .45; }
.mjr-o2 { width: 110px; height: 110px; bottom: 12%; left: 8%; opacity: .35;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.4), var(--accent2) 50%, transparent 70%); }
.mjr-o3 { width: 64px; height: 64px; top: 42%; left: 42%; opacity: .28; }
.mjr-ring {
  position: absolute; top: 18%; right: 22%; width: 220px; height: 220px;
  border: 1.5px solid rgba(255,255,255,.18); border-radius: 50%;
  border-top-color: color-mix(in srgb, var(--accent) 70%, #fff);
  border-left-color: transparent;
  transform: rotateX(62deg) rotateZ(-18deg);
  box-shadow: inset 0 0 24px rgba(255,255,255,.08);
  will-change: transform;
}
.mjr-app .hero > .wrap,
.mjr-app .jhero .jhero-grid { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .mjr-o1 { animation: mjr-drift 14s ease-in-out infinite alternate; }
  .mjr-o2 { animation: mjr-drift 18s ease-in-out infinite alternate-reverse; }
  .mjr-o3 { animation: mjr-drift 11s ease-in-out infinite alternate; }
  .mjr-ring { animation: mjr-spin 28s linear infinite; }
}
@keyframes mjr-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -22px, 40px) scale(1.06); }
}
@keyframes mjr-spin {
  from { transform: rotateX(62deg) rotateZ(0deg); }
  to { transform: rotateX(62deg) rotateZ(360deg); }
}

/* —— Major cards: deeper 3D plate —— */
.mjr-app .job-card,
.mjr-app a.card.mjr-card {
  position: relative;
  transform-style: preserve-3d;
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 22%, var(--line));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--card-accent, var(--accent)) 9%, #fff) 0%, #fff 48%),
    var(--surface);
  overflow: hidden;
}
.mjr-app .job-card::before,
.mjr-app a.card.mjr-card::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, var(--card-accent, var(--accent)), transparent 70%);
  opacity: .14; transform: translateZ(12px); pointer-events: none;
}
.mjr-app .job-card .icon,
.mjr-app a.card.mjr-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, #fff);
  box-shadow: 0 8px 18px -12px var(--card-accent, var(--accent));
  transform: translateZ(24px);
}
.mjr-app .job-card h3 { font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); }
.mjr-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.42) 0%, transparent 42%, transparent 58%, rgba(255,255,255,.12) 100%);
  opacity: 0; mix-blend-mode: soft-light; transition: opacity .35s ease;
}
.mjr-app [data-tilt]:hover .mjr-glare { opacity: 1; }

/* —— Section teasers as extruded tiles —— */
.mjr-app .sec-card {
  transform-style: preserve-3d;
  border-left: 3px solid var(--accent);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.mjr-app .sec-card .sc-n {
  font-family: var(--mjr-disp); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted));
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .mjr-app .sec-card:hover {
    transform: translateY(-6px) rotateX(4deg) rotateY(-3deg);
    box-shadow: var(--mjr-depth);
  }
}

/* —— Profile / score constellation —— */
.mjr-app .profile {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  padding: 22px; border-radius: 18px;
  background:
    radial-gradient(600px 280px at 100% 0%, var(--mjr-glow), transparent 60%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 4%, #fff));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
}
@media (max-width: 800px) { .mjr-app .profile { grid-template-columns: 1fr; } }
.mjr-score-rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px;
}
.mjr-chip {
  position: relative; padding: 12px 12px 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  transform: translateZ(16px);
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .35);
}
.mjr-chip b {
  display: block; font-family: var(--mjr-disp); font-size: 1.45rem; line-height: 1;
  color: var(--accent); letter-spacing: var(--mjr-track);
}
.mjr-chip span { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); font-weight: 600; }

/* —— Voices: quote cards with depth —— */
.mjr-app .sayings .saying {
  position: relative;
  background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem 1.15rem;
  box-shadow: 0 14px 32px -24px rgba(15, 23, 42, .4);
  transform-style: preserve-3d;
}
.mjr-app .sayings .saying::before {
  content: "“"; position: absolute; top: .35rem; left: .7rem;
  font-family: var(--mjr-disp); font-size: 2.8rem; line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateZ(8px);
}
.mjr-app .sayings .saying p { position: relative; padding-left: .35rem; }

/* —— Campus / community concept plates —— */
.mjr-app .concept,
.mjr-app .mjr-plate {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 18px 20px;
  box-shadow: var(--lift, var(--shadow));
  border-top: 3px solid var(--accent);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.mjr-app .mjr-plate h3 { margin: 0 0 4px; font-size: 1.06rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); }
.mjr-app .mjr-plate .mj-why {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.mjr-app .mjr-plate p { margin: 0; font-size: .93rem; color: var(--ink2); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .mjr-app article.mjr-plate:hover,
  .mjr-app .concept:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 16px 36px -22px rgba(15, 23, 42, .35);
  }
}

/* —— Home field strip —— */
.mjr-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 28px; max-width: 720px;
}
.mjr-stat {
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.mjr-stat b {
  display: block; font-family: var(--mjr-disp); font-size: 1.65rem; line-height: 1;
  letter-spacing: var(--mjr-track); color: #fff;
}
.mjr-stat span {
  display: block; margin-top: 6px; font-size: .78rem; font-weight: 600;
  color: #c7d4e6; line-height: 1.3;
}
@media (max-width: 640px) {
  .mjr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mjr-field {
  position: relative; display: block; padding: 1.25rem 1.2rem 1.1rem;
  border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  transform-style: preserve-3d;
}
.mjr-field:hover { text-decoration: none; }
.mjr-field .mjr-field-glow {
  position: absolute; inset: auto -20% -40% auto; width: 160px; height: 160px;
  border-radius: 50%; opacity: .2;
  background: radial-gradient(circle, var(--card-accent, var(--accent)), transparent 70%);
  transform: translateZ(0);
}
.mjr-field h3 {
  position: relative; margin: .55rem 0 .35rem;
  font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1.15rem;
}
.mjr-field .sub { position: relative; color: var(--muted); font-size: .92rem; margin: 0; }
.mjr-field .go { position: relative; margin: .8rem 0 0; font-weight: 700; color: var(--card-accent, var(--accent)); }

/* —— Sticky section progress (JS fills --mjr-p) —— */
.mjr-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  pointer-events: none; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(var(--mjr-p, 0));
  opacity: .9;
}

/* —— Magnetic pills —— */
.mjr-app .pill {
  transition: transform .25s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}

/* —— Values know cards —— */
.mjr-app .know {
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--accent) 4%, #fff) 100%);
}

/* —— Table credits —— */
.mjr-app .cred-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mjr-app .cred-table th, .mjr-app .cred-table td {
  text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line);
}
.mjr-app .table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }

/* —— Home browse —— */
.mjr-browse-bar {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  margin: 0 0 1.25rem;
}
.mjr-bchips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 220px; }
.mjr-bchip {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); transition: border-color .15s, background .15s, color .15s;
}
.mjr-bchip.on, .mjr-bchip:hover {
  border-color: var(--chip, var(--accent));
  background: color-mix(in srgb, var(--chip, var(--accent)) 12%, #fff);
  color: var(--accent2);
}
.mjr-bsearch { flex: 1 1 180px; min-width: 0; }
.mjr-bsearch input {
  width: 100%; max-width: 320px; font: inherit; font-size: .92rem;
  padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
}
.mjr-bsearch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mjr-bno { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; }
.mjr-quiz-cta { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .mjr-quiz-cta { grid-column: auto; }
}
.jduel-careers {
  display: grid; gap: 1.5rem;
}
@media (min-width: 800px) {
  .jduel-careers { grid-template-columns: 1fr 1fr; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* —— Industries mosaic —— */
.mjr-industry-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mjr-industry-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .mjr-industry-grid { grid-template-columns: repeat(4, 1fr); }
}
.mjr-industry-grid--compact .mjr-industry-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mjr-industry {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px -22px rgba(11, 18, 32, .35);
}
.mjr-industry-art {
  aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--accent) 8%, #e8eef5);
}
.mjr-industry-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mjr-industry-art--empty {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, #fff), #e8eef5);
}
.mjr-industry-body { padding: .85rem 1rem 1rem; }
.mjr-industry-body h3 {
  margin: 0 0 .35rem; font-family: var(--mjr-disp); font-size: 1.05rem;
  letter-spacing: var(--mjr-track); line-height: 1.25;
}
.mjr-industry-body p { margin: 0; color: var(--mjr-ink3, var(--ink2)); font-size: .9rem; line-height: 1.55; }
.mjr-industry-credit {
  display: block; margin-top: .55rem; font-size: .72rem; color: var(--muted); line-height: 1.35;
}

/* —— People strip —— */
.mjr-people-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 800px) {
  .mjr-people-grid { grid-template-columns: repeat(4, 1fr); }
}
.mjr-person {
  display: flex; flex-direction: column; align-items: stretch; min-width: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff;
}
.mjr-person-face {
  width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; object-position: center top;
  display: block; background: #dfe7f0;
}
.mjr-person-face--empty {
  aspect-ratio: 1 / 1.15;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, #fff), #cfd9e6);
}
.mjr-person-body { padding: .75rem .9rem 1rem; }
.mjr-person-body h3 {
  margin: 0; font-family: var(--mjr-disp); font-size: 1.02rem; letter-spacing: var(--mjr-track);
}
.mjr-person-role { margin: .25rem 0 0; font-size: .88rem; color: var(--accent2); font-weight: 650; }
.mjr-person-life { margin: .2rem 0 0; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mjr-person-credit { display: block; margin-top: .45rem; font-size: .68rem; color: var(--muted); }

/* —— Related job faces —— */
.mjr-related-faces-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) {
  .mjr-related-faces-grid { grid-template-columns: repeat(4, 1fr); }
}
.mjr-rel-face {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff;
  transition: transform .2s ease, border-color .2s ease;
}
.mjr-rel-face:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.mjr-rel-face img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; display: block;
}
.mjr-rel-face span { padding: .65rem .75rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.mjr-rel-face b { font-size: .92rem; line-height: 1.25; }
.mjr-rel-face i { font-style: normal; font-size: .78rem; color: var(--muted); }

/* —— Career job cards with thumbs —— */
.mjr-plate--job {
  display: grid; gap: 0; padding: 0; overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .mjr-plate--job { grid-template-columns: 132px minmax(0, 1fr); }
}
.mjr-job-thumb {
  min-height: 110px; background: color-mix(in srgb, var(--accent) 10%, #e8eef5);
}
.mjr-job-thumb img {
  width: 100%; height: 100%; min-height: 110px; object-fit: cover; display: block;
}
.mjr-plate-body { padding: 1rem 1.1rem 1.15rem; }
.mjr-plate--job .mj-why { display: inline-block; margin: .15rem 0 .45rem; }

/* —— Sticky section pills —— */
.mjr-spills {
  position: sticky; top: 58px; z-index: 40;
  background: color-mix(in srgb, #f7f9fc 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.mjr-spills.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(11, 18, 32, .45);
  background: color-mix(in srgb, #fff 92%, transparent);
}
.mjr-spills .pills {
  max-width: var(--maxw, 1120px); margin: 0 auto; padding: 10px 20px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
@media (max-width: 720px) {
  .mjr-spills { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mjr-spills .pills { flex-wrap: nowrap; width: max-content; padding-right: 28px; }
}

/* —— TOC —— */
.mjr-toc {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline;
  margin: 0 0 1.5rem; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 5%, #fff));
}
.mjr-toc-label {
  font-family: var(--mjr-disp); font-size: .95rem; letter-spacing: var(--mjr-track);
  font-weight: 700; margin-right: .25rem;
}
.mjr-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px; flex: 1 1 200px;
}
.mjr-toc a {
  font-size: .88rem; font-weight: 650; color: var(--accent2); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.mjr-toc a:hover { border-bottom-color: var(--accent); }

/* —— VS chips —— */
.mjr-vs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mjr-vs-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: #fff; font-size: .9rem; font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.mjr-vs-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--chip, var(--accent)) 45%, var(--line));
  background: color-mix(in srgb, var(--chip, var(--accent)) 10%, #fff);
  text-decoration: none;
}
.mjr-vs-chip--lab { color: var(--accent2); }

/* —— Start here / paths —— */
.mjr-start-grid, .mjr-paths {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mjr-start-grid, .mjr-paths { grid-template-columns: repeat(3, 1fr); }
}
.mjr-start-tile, .mjr-path-card {
  display: block; text-decoration: none; color: inherit;
  padding: 1.15rem 1.2rem 1.25rem; border-radius: 16px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 14px 36px -28px rgba(11, 18, 32, .5);
  transition: transform .22s ease, border-color .2s ease;
}
.mjr-start-tile:hover, .mjr-path-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  text-decoration: none;
}
.mjr-start-tile .icon, .mjr-path-card .icon { font-size: 1.6rem; display: block; margin-bottom: .45rem; }
.mjr-start-tile h3, .mjr-path-card h3 {
  margin: 0 0 .35rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1.12rem;
}
.mjr-start-tile p, .mjr-path-card .sub { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.mjr-path-card .go { margin: .7rem 0 0; font-weight: 700; color: var(--accent); }

@media (min-width: 1100px) {
  .mjr-paths { grid-template-columns: repeat(4, 1fr); }
  .mjr-start-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .mjr-start-grid { grid-template-columns: repeat(6, 1fr); }
}

/* —— Score rankings —— */
.mjr-rank-hubs, .mjr-explore {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mjr-rank-hubs, .mjr-explore { grid-template-columns: repeat(3, 1fr); }
}
.mjr-rank-hub-card, .mjr-explore-card {
  display: block; text-decoration: none; color: inherit;
  padding: 1.15rem 1.2rem 1.25rem; border-radius: 16px;
  border: 1px solid var(--line); background: #fff;
  box-shadow: 0 14px 36px -28px rgba(11, 18, 32, .5);
  transition: transform .22s ease, border-color .2s ease;
}
.mjr-rank-hub-card:hover, .mjr-explore-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  text-decoration: none;
}
.mjr-rank-hub-card h3, .mjr-explore-card h3 {
  margin: 0 0 .35rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1.12rem;
}
.mjr-rank-hub-card .sub, .mjr-explore-card .sub { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.mjr-rank-hub-card .go, .mjr-explore-card .go { margin: .7rem 0 0; font-weight: 700; color: var(--accent); }
.mjr-explore-card .icon { font-size: 1.6rem; display: block; margin-bottom: .45rem; }

.mjr-rank-list { display: grid; gap: 8px; }
.mjr-rank-row {
  display: grid; grid-template-columns: 2.2rem 1.6rem 1fr auto;
  gap: 10px; align-items: center;
  padding: .7rem .85rem; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s;
}
.mjr-rank-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  transform: translateY(-1px); text-decoration: none;
}
.mjr-rank-n {
  font-family: var(--mjr-disp); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--muted); font-size: .95rem;
}
.mjr-rank-emoji { font-size: 1.15rem; text-align: center; }
.mjr-rank-main { min-width: 0; display: grid; gap: 4px; }
.mjr-rank-main b {
  font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mjr-rank-main i { font-style: normal; color: var(--muted); font-size: .82rem; }
.mjr-rank-main .bar {
  display: block; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, #fff); overflow: hidden;
}
.mjr-rank-main .fill {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #1a1a2e));
  transition: width .7s cubic-bezier(.2, .7, .2, 1);
}
.mjr-rank-pct {
  font-family: var(--mjr-disp); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--accent2); min-width: 2.2rem; text-align: right;
}

/* —— Destinations (job ← majors) —— */
.mjr-dest-list { display: grid; gap: 12px; }
.mjr-dest {
  padding: 1rem 1.1rem 1.1rem; border-radius: 16px;
  border: 1px solid var(--line); background: #fff;
}
.mjr-dest-head {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: .75rem;
}
.mjr-dest-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line); flex: 0 0 auto;
}
.mjr-dest-emoji {
  width: 56px; height: 56px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid var(--line); flex: 0 0 auto;
}
.mjr-dest-head h3 { margin: 0 0 .2rem; font-family: var(--mjr-disp); font-size: 1.1rem; letter-spacing: var(--mjr-track); }
.mjr-dest-head h3 a { color: inherit; text-decoration: none; }
.mjr-dest-head h3 a:hover { color: var(--accent2); }
.mjr-dest-head .hint { margin: 0; font-size: .85rem; }
.mjr-dest-majors { display: flex; flex-wrap: wrap; gap: 8px; }
.mjr-dest-major {
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 7px 11px; border-radius: 999px; font-size: .88rem; font-weight: 650;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, #fff);
  text-decoration: none; color: inherit; max-width: 100%;
}
.mjr-dest-major:hover { border-color: var(--accent); text-decoration: none; }
.mjr-dest-major i {
  font-style: normal; font-weight: 500; color: var(--muted); font-size: .82rem;
}

.mjr-industry--link, .mjr-person--link {
  text-decoration: none; color: inherit; display: block;
  transition: transform .2s ease, border-color .2s ease;
}
.mjr-industry--link:hover, .mjr-person--link:hover {
  transform: translateY(-2px); text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* —— Deep intro —— */
.mjr-deep-cta {
  margin: 1.5rem 0 2rem; padding: 1.25rem 1.35rem 1.4rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, #fff), #fff 55%);
  box-shadow: 0 18px 40px -32px rgba(11, 18, 32, .55);
}
.mjr-deep-cta .kicker {
  display: inline-block; font-size: .78rem; font-weight: 750;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent2);
  margin-bottom: .35rem;
}
.mjr-deep-cta h2 {
  margin: 0 0 .45rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
}
.mjr-deep-cta p { margin: 0 0 .9rem; color: var(--muted); line-height: 1.55; max-width: 42rem; }
.mjr-deep-cta .go {
  font-weight: 750; color: var(--accent2); text-decoration: none;
}
.mjr-deep-cta .go:hover { text-decoration: underline; }

.mjr-deep-lede { margin-bottom: 1.25rem; }
.mjr-deep-essay p { font-size: 1.02rem; line-height: 1.7; }

.mjr-deep-vars {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mjr-deep-vars { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .mjr-deep-vars { grid-template-columns: repeat(3, 1fr); }
}
.mjr-deep-var {
  padding: 1rem 1.1rem 1.15rem; border-radius: 14px;
  border: 1px solid var(--line); background: #fff;
}
.mjr-deep-var h3 {
  margin: 0 0 .4rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1.05rem;
}
.mjr-deep-var p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }

.mjr-deep-checks {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
}
.mjr-deep-check {
  display: grid; gap: 4px;
  padding: .9rem 1rem; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
}
.mjr-deep-check b {
  font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1rem;
}
.mjr-deep-check span { color: var(--muted); font-size: .92rem; line-height: 1.55; }

.mjr-deep-gloss {
  display: grid; gap: 10px; margin: 0;
}
@media (min-width: 720px) {
  .mjr-deep-gloss { grid-template-columns: 1fr 1fr; }
}
.mjr-deep-term {
  margin: 0; padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, #fff);
}
.mjr-deep-term dt {
  font-family: var(--mjr-disp); font-weight: 750; margin-bottom: .25rem;
}
.mjr-deep-term dd { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* —— Online / cyber degrees —— */
.mjr-online-cta {
  margin: 1.25rem 0 2rem; padding: 1.2rem 1.3rem 1.35rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #0ea5e9 35%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, #0ea5e9 10%, #fff), #fff 60%);
}
.mjr-online-cta .kicker {
  display: inline-block; font-size: .78rem; font-weight: 750;
  letter-spacing: .04em; text-transform: uppercase; color: #0369a1;
  margin-bottom: .35rem;
}
.mjr-online-fit {
  display: inline-block; margin: 0 0 .5rem; padding: 4px 10px;
  border-radius: 999px; font-size: .78rem; font-weight: 750;
  background: color-mix(in srgb, #0ea5e9 14%, #fff);
  border: 1px solid color-mix(in srgb, #0ea5e9 30%, var(--line));
  color: #0c4a6e;
}
[data-fit="restricted"] .mjr-online-fit,
.mjr-online-cta[data-fit="restricted"] .mjr-online-fit,
.mjr-online-fit-group[data-fit="restricted"] .mjr-online-fit {
  background: color-mix(in srgb, #f43f5e 12%, #fff);
  border-color: color-mix(in srgb, #f43f5e 28%, var(--line));
  color: #9f1239;
}
[data-fit="low"] .mjr-online-fit,
.mjr-online-cta[data-fit="low"] .mjr-online-fit {
  background: color-mix(in srgb, #f59e0b 14%, #fff);
  border-color: color-mix(in srgb, #f59e0b 30%, var(--line));
  color: #9a3412;
}
[data-fit="high"] .mjr-online-fit,
.mjr-online-cta[data-fit="high"] .mjr-online-fit {
  background: color-mix(in srgb, #10b981 14%, #fff);
  border-color: color-mix(in srgb, #10b981 30%, var(--line));
  color: #065f46;
}
.mjr-online-cta h2, .mjr-online-major-head h2 {
  margin: 0 0 .4rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}
.mjr-online-cta p { margin: 0 0 .85rem; color: var(--muted); line-height: 1.55; max-width: 42rem; }
.mjr-online-cta .go, .mjr-online-major .hint a {
  font-weight: 750; color: #0369a1; text-decoration: none;
}
.mjr-online-major { margin: 2rem 0; }
.mjr-online-major-head { margin-bottom: 1rem; }
.mjr-online-major-head .lede { color: var(--muted); max-width: 44rem; }

.mjr-online-syses, .mjr-online-fmts, .mjr-online-myths {
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mjr-online-syses, .mjr-online-fmts { grid-template-columns: 1fr 1fr; }
  .mjr-online-myths { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .mjr-online-syses { grid-template-columns: repeat(3, 1fr); }
}
.mjr-online-sys, .mjr-online-fmt, .mjr-online-myth {
  padding: 1rem 1.1rem 1.15rem; border-radius: 14px;
  border: 1px solid var(--line); background: #fff;
}
.mjr-online-region {
  display: inline-block; font-size: .75rem; font-weight: 750;
  letter-spacing: .03em; text-transform: uppercase; color: #0369a1; margin-bottom: .35rem;
}
.mjr-online-sys h3, .mjr-online-fmt h3 {
  margin: 0 0 .4rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track); font-size: 1.02rem;
}
.mjr-online-sys p, .mjr-online-fmt p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.mjr-online-myth-q, .mjr-online-myth-a { margin: 0 0 .55rem; font-size: .92rem; line-height: 1.55; }
.mjr-online-myth-a { margin-bottom: 0; color: var(--muted); }
.mjr-online-fit-group { margin: 1.5rem 0 2rem; }
.mjr-online-fit-group h3 {
  margin: 0 0 .85rem; font-family: var(--mjr-disp); letter-spacing: var(--mjr-track);
}
.mjr-online-fit-group h3 span { color: var(--muted); font-weight: 650; font-size: .9rem; }

/* —— Section continuum —— */
.mjr-secnav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 2rem 0 1.25rem;
}
.mjr-secnav a {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s;
}
.mjr-secnav a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.mjr-secnav span { font-size: .78rem; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.mjr-secnav b { font-family: var(--mjr-disp); font-size: 1.05rem; letter-spacing: var(--mjr-track); }
.mjr-secnav-next { text-align: right; }

/* —— Study card / print —— */
.mjr-study {
  margin: 0 0 1.75rem; padding: 1.1rem 1.2rem 1.25rem;
  border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}
.mjr-study h2 { margin-top: 0; }
.mjr-study-grid {
  display: grid; gap: 1rem;
}
@media (min-width: 720px) {
  .mjr-study-grid { grid-template-columns: 1.1fr .9fr; }
}
.mjr-study-facts, .mjr-study-scores {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
}
.mjr-study-facts li, .mjr-study-scores li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  font-size: .92rem;
}
.mjr-study-facts b, .mjr-study-scores b {
  font-variant-numeric: tabular-nums; font-family: var(--mjr-disp);
}
.mjr-share { margin-top: 1.5rem; }

.mjr-qz-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 1rem;
}
.mjr-qz-actions button, .mjr-qz-actions .qz-compare {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  text-decoration: none; color: inherit;
}
.mjr-qz-actions .qz-compare { color: var(--accent2); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

@media print {
  .mjr-stage, .mjr-spills, .mjr-share, .mjr-start, header, footer, .ad, .embed-box { display: none !important; }
  .mjr-study {
    border-style: solid; break-inside: avoid;
    background: #fff;
  }
  .mjr-app { background: #fff; }
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .mjr-o1, .mjr-o2, .mjr-o3, .mjr-ring { animation: none !important; }
  .mjr-progress { display: none; }
  .mjr-app .sec-card:hover,
  .mjr-app article.mjr-plate:hover,
  .mjr-app .concept:hover { transform: none; }
}