/* ── AI × SG Jobs — editorial, dual-theme ────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07080c;
  --surface: #0e1016;
  --surface-2: #141826;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --text: #e9ebf1;
  --text-2: #a6abba;
  --text-3: #71788a;
  --accent: #fbbf24;
  --low: #2dd4bf;
  --mid: #eab308;
  --high: #f87171;
  --chip-ink: #0a0a0f;
  --nav-bg: rgba(7,8,12,0.85);
  --shadow: 0 16px 48px rgba(0,0,0,0.55);
  --grid: rgba(255,255,255,0.07);
  --grid-strong: rgba(255,255,255,0.25);
  --you: #ffffff;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #faf7f1;
  --surface: #ffffff;
  --surface-2: #f1ede3;
  --line: rgba(28,27,38,0.10);
  --line-strong: rgba(28,27,38,0.20);
  --text: #1d1c26;
  --text-2: #4e5260;
  --text-3: #7d818f;
  --accent: #b45309;
  --low: #0d9488;
  --mid: #ca8a04;
  --high: #dc2626;
  --chip-ink: #ffffff;
  --nav-bg: rgba(250,247,241,0.88);
  --shadow: 0 16px 48px rgba(40,35,20,0.18);
  --grid: rgba(28,27,38,0.08);
  --grid-strong: rgba(28,27,38,0.30);
  --you: #1d1c26;
}

:root {
  --sans: 'Fira Sans', system-ui, -apple-system, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'Fira Code', ui-monospace, 'SF Mono', monospace;
  --radius: 12px;
  --nav-h: 52px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  touch-action: manipulation;
  transition: background 250ms ease, color 250ms ease;
}

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
a:hover { text-decoration-color: var(--text-2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

button { font-family: var(--sans); cursor: pointer; }

main { max-width: 1120px; margin: 0 auto; padding: 0 20px 64px; }

.nowrap { white-space: nowrap; }

/* ── Top nav ─────────────────────────────────────────────────────── */

.topnav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topnav-inner {
  max-width: 1120px; margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
}
.wordmark {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none; color: var(--text);
  flex-shrink: 0;
}
.topnav-links {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.topnav-links::-webkit-scrollbar { display: none; }
.topnav-links a {
  font-size: 13px; color: var(--text-2); text-decoration: none;
  padding: 8px 10px; border-radius: 8px; white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}
.topnav-links a:hover { color: var(--text); background: var(--line); }

.theme-toggle {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--text-2);
  transition: color 150ms ease, border-color 150ms ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-3); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }

section, .hero { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ── Hero / type ─────────────────────────────────────────────────── */

.hero { padding: 72px 0 24px; max-width: 880px; }
.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 7.5vw, 72px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.02;
}
.lede {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  margin-top: 22px; font-size: clamp(18px, 2.6vw, 21px); color: var(--text-2);
  line-height: 1.55; max-width: 700px;
}
.section-lede {
  margin-top: 18px; font-size: 17px; color: var(--text-2);
  line-height: 1.65; max-width: 680px;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-top: 40px;
}
.hero-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px 16px;
}
.hero-stat-val {
  font-family: var(--mono); font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
.accent-high { color: var(--high); }
.hero-stat-label { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.hero-note { margin-top: 24px; font-size: 14.5px; color: var(--text-3); max-width: 640px; }
.hero-note a { color: var(--text-2); }

/* ── Sections ───────────────────────────────────────────────────── */

.section { padding-top: 96px; }
.section h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.08;
  max-width: 780px;
}
.panel {
  margin-top: 28px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.chart-note { margin-top: 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

/* ── Lookup / autocomplete ──────────────────────────────────────── */

.lookup { position: relative; margin-top: 26px; max-width: 620px; }
.lookup-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 0 16px;
  transition: border-color 150ms ease;
}
.lookup-box:focus-within { border-color: var(--accent); }
.lookup-icon { width: 18px; height: 18px; color: var(--text-3); flex-shrink: 0; }
.lookup-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--sans); font-size: 16px;
  height: 54px; min-width: 0;
}
.lookup-box input::placeholder { color: var(--text-3); }
.lookup-box input::-webkit-search-cancel-button { -webkit-appearance: none; }

.lookup-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; list-style: none; overflow: hidden;
  box-shadow: var(--shadow);
  max-height: 380px; overflow-y: auto;
}
.lookup-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.lookup-list li:last-child { border-bottom: none; }
.lookup-list li.active, .lookup-list li:hover { background: var(--surface-2); }
.lookup-title { flex: 1; font-size: 14.5px; line-height: 1.35; }
.lookup-cat { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }

.lookup-tries { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lookup-tries span { font-size: 12.5px; color: var(--text-3); }
.try-chip {
  background: transparent; border: 1px solid var(--line-strong); color: var(--text-2);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px;
  transition: border-color 150ms ease, color 150ms ease;
}
.try-chip:hover { border-color: var(--accent); color: var(--text); }

.score-chip {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 2px 7px; color: var(--chip-ink); white-space: nowrap;
  flex-shrink: 0;
}

/* ── Job detail card ────────────────────────────────────────────── */

.job-card {
  margin-top: 22px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 24px; max-width: 880px;
}
.job-card-head { display: flex; gap: 20px; align-items: flex-start; }
.job-card-title { flex: 1; min-width: 0; }
.job-card-title h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 3.6vw, 30px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15;
}
.job-card-meta { margin-top: 6px; font-size: 13px; color: var(--text-3); font-family: var(--mono); }
.job-card-band { margin-top: 10px; font-size: 14.5px; color: var(--text-2); max-width: 480px; }
.job-card-band strong { color: var(--text); }

.gauge { flex-shrink: 0; width: 110px; text-align: center; }
.gauge svg { width: 110px; height: 110px; display: block; }
.gauge-num { font-family: var(--mono); font-weight: 600; font-size: 30px; }
.gauge-denom { font-size: 13px; fill: var(--text-3); }
.gauge-label { margin-top: 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

.job-percentile { margin-top: 18px; }
.job-percentile .ptext { font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.spectrum { position: relative; height: 8px; border-radius: 4px; overflow: visible; }
.spectrum-marker {
  position: absolute; top: 50%; width: 16px; height: 16px;
  border-radius: 50%; border: 3px solid var(--surface); transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.job-follow { margin-top: 14px; font-size: 13px; color: var(--text-3); }
.job-follow a { color: var(--text-2); }

.job-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 20px;
}
.job-stat { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.job-stat .k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.job-stat .v { font-family: var(--mono); font-size: 16.5px; font-weight: 600; margin-top: 4px; }
.job-stat .s { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

:root[data-theme="dark"] { --up: #4ade80; --down: #f87171; }
:root[data-theme="light"] { --up: #15803d; --down: #dc2626; }
.trend-up { color: var(--up); }
.trend-down { color: var(--down); }
.trend-flat { color: var(--text-2); }

.job-rationale { margin-top: 20px; }
.job-rationale h4, .job-related h4 {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.job-rationale p { font-size: 14.5px; color: var(--text-2); line-height: 1.7; }

.job-related { margin-top: 22px; }
.related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; min-height: 40px;
  transition: border-color 150ms ease, color 150ms ease;
}
.related-btn:hover { border-color: var(--line-strong); color: var(--text); }

/* ── Scrollytelling ─────────────────────────────────────────────── */

.scrolly { position: relative; margin-top: 32px; }

.scrolly-graphic {
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  z-index: 5;
}
.scrolly-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 10px 8px;
}
.scrolly-svg { display: block; width: 100%; height: auto; }
.scrolly-caption {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  text-align: center; padding: 6px 4px 4px;
  letter-spacing: 0.04em;
}

.scrolly-steps { position: relative; z-index: 6; pointer-events: none; }
.step {
  min-height: 88vh;
  display: flex; align-items: center;
}
.step:last-child { min-height: 70vh; }
.step-card {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 420px;
  box-shadow: var(--shadow);
  opacity: 0.45;
  transition: opacity 300ms ease;
}
.step.is-active .step-card { opacity: 1; }
.step-card h3 {
  font-family: var(--serif);
  font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.step-card p { font-size: 14.5px; color: var(--text-2); line-height: 1.65; }
.step-card p + p { margin-top: 10px; }
.step-card .cool { color: var(--low); font-weight: 600; }
.step-card .hot { color: var(--high); font-weight: 600; }
.step-card strong { color: var(--text); }
.you-note {
  font-family: var(--serif); font-style: italic;
  border-left: 3px solid var(--accent);
  padding-left: 12px; margin-top: 12px;
  color: var(--text) !important; font-size: 15px !important;
}

/* desktop: steps left, graphic right */
@media (min-width: 861px) {
  .scrolly { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 28px; align-items: start; }
  .scrolly-graphic { order: 2; height: calc(100vh - var(--nav-h) - 24px); display: flex; align-items: center; }
  .scrolly-frame { width: 100%; }
  .scrolly-steps { order: 1; }
  .step-card { opacity: 0.25; }
}
/* mobile: graphic sticky on top, steps scroll under */
@media (max-width: 860px) {
  .scrolly-graphic { margin: 0 -8px; }
  .step { min-height: 80vh; align-items: flex-end; padding-bottom: 8vh; }
  .step-card { max-width: none; }
}

.scrolly-svg .axis-label { font-family: var(--mono); font-size: 11px; fill: var(--text-3); }
.scrolly-svg .grid-line { stroke: var(--grid); stroke-width: 1; }
.scrolly-svg .grid-line.major { stroke: var(--grid-strong); }
.scrolly-svg .zone-label { font-family: var(--mono); font-size: 10.5px; fill: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.scrolly-svg .bubble-label {
  font-family: var(--sans); font-size: 11.5px; fill: var(--text-2); pointer-events: none;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.scrolly-svg .band-note { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.scrolly-svg .median-label { font-family: var(--mono); font-size: 10.5px; fill: var(--text-2); }
.scrolly-svg .layer { opacity: 0; pointer-events: none; }
.scrolly-svg .layer.active { opacity: 1; }
.scrolly-svg circle.dot { cursor: pointer; }
.scrolly-svg circle.dot.you-dot { stroke: var(--you); stroke-width: 2.5px; }
.scrolly-svg .you-label text {
  font-family: var(--mono); font-size: 11px; font-weight: 600; fill: var(--you);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
  text-anchor: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .scrolly-svg circle.dot {
    transition: cx 900ms cubic-bezier(0.4, 0, 0.2, 1), cy 900ms cubic-bezier(0.4, 0, 0.2, 1),
                r 900ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms ease;
  }
  .scrolly-svg .layer { transition: opacity 500ms ease 250ms; }
  .scrolly-svg .you-label { transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1); }
}
.scrolly-svg.no-anim circle.dot, .scrolly-svg.no-anim .layer, .scrolly-svg.no-anim .you-label { transition: none !important; }

/* ── Slope chart ────────────────────────────────────────────────── */

.slope-svg { display: block; width: 100%; height: auto; }
.slope-svg .axis-label { font-family: var(--mono); font-size: 11px; fill: var(--text-3); }
.slope-svg .grid-line { stroke: var(--grid); stroke-width: 1; }
.slope-svg .grid-line.base { stroke: var(--grid-strong); stroke-dasharray: 4 4; }
.slope-svg .slope-name {
  font-family: var(--sans); font-size: 12px; fill: var(--text);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.slope-svg .slope-val { font-family: var(--mono); font-size: 11px; font-weight: 600; }

/* ── Tooltip ────────────────────────────────────────────────────── */

.tooltip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 12px 14px;
  max-width: 280px; box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.5;
}
.tooltip .tt-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 4px; color: var(--text-2); }
.tooltip .tt-row .mono { font-family: var(--mono); color: var(--text); }

/* ── Cluster list ───────────────────────────────────────────────── */

.cluster-list { margin-top: 26px; display: flex; flex-direction: column; gap: 6px; }
.cluster-row {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.cluster-head {
  width: 100%; display: grid;
  grid-template-columns: 1fr auto; gap: 4px 16px;
  background: none; border: none; color: var(--text);
  padding: 13px 16px; text-align: left; min-height: 56px;
  transition: background 150ms ease;
}
.cluster-head:hover { background: var(--surface-2); }
.cluster-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cluster-sub { font-size: 12px; color: var(--text-3); font-family: var(--mono); margin-top: 1px; }
.cluster-right { display: flex; align-items: center; gap: 14px; grid-row: span 2; }
.cluster-trend { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.cluster-bar-wrap { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cluster-bar-track { flex: 1; height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.cluster-bar { height: 100%; border-radius: 4px; }
.cluster-score { font-family: var(--mono); font-size: 13px; font-weight: 600; width: 32px; text-align: right; flex-shrink: 0; }
.cluster-chevron { width: 16px; height: 16px; color: var(--text-3); transition: transform 200ms ease; flex-shrink: 0; }
.cluster-row.open .cluster-chevron { transform: rotate(180deg); }
.cluster-body { display: none; border-top: 1px solid var(--line); padding: 6px 8px 10px; }
.cluster-row.open .cluster-body { display: block; }
.cluster-occ {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: var(--text-2);
  padding: 10px 10px; min-height: 44px; text-align: left;
  border-radius: 8px; font-size: 13.5px;
  transition: background 150ms ease, color 150ms ease;
}
.cluster-occ:hover { background: var(--surface-2); color: var(--text); }
.cluster-occ .t { flex: 1; min-width: 0; }
.cluster-occ .p { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ── Explorer ───────────────────────────────────────────────────── */

.explorer-controls {
  margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
.explorer-search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 0 14px;
}
.explorer-search:focus-within { border-color: var(--accent); }
.explorer-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--sans); font-size: 15px; height: 46px; min-width: 0;
}
.explorer-search input::placeholder { color: var(--text-3); }
.sort-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-3);
}
.sort-label select {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 0 12px; height: 46px; font-family: var(--sans);
  font-size: 13.5px; cursor: pointer;
}
.group-chips { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.group-chip {
  background: transparent; border: 1px solid var(--line-strong); color: var(--text-2);
  border-radius: 999px; padding: 8px 14px; font-size: 12.5px; min-height: 40px;
  transition: all 150ms ease;
}
.group-chip:hover { color: var(--text); }
.group-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.explorer-count { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }

.explore-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.occ-row { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.occ-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: var(--text);
  padding: 12px 14px; min-height: 56px; text-align: left;
  transition: background 150ms ease;
}
.occ-head:hover { background: var(--surface-2); }
.occ-main { flex: 1; min-width: 0; }
.occ-title { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.occ-cat { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.occ-nums { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.occ-pay { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.occ-body { display: none; border-top: 1px solid var(--line); padding: 14px 16px 16px; }
.occ-row.open .occ-body { display: block; }
.occ-body p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }
.occ-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.occ-facts .mono-val { color: var(--text-2); }

.more-btn {
  margin: 18px auto 0; display: block;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 999px; padding: 12px 28px; font-size: 14px; min-height: 46px;
  transition: border-color 150ms ease;
}
.more-btn:hover { border-color: var(--accent); }

/* ── Method & footer ────────────────────────────────────────────── */

.method-grid {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px;
}
.method-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.method-block h3 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.method-block p { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.method-block p + p, .method-block ul + p { margin-top: 10px; }
.method-block ul { list-style: none; margin-top: 10px; }
.rubric li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--text-2); padding: 4px 0; }
.sources li, .limits li { font-size: 13.5px; color: var(--text-2); line-height: 1.6; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sources li:last-child, .limits li:last-child { border-bottom: none; }
.limits strong { color: var(--text); }

.footer { margin-top: 96px; border-top: 1px solid var(--line); padding-top: 36px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.footer h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.footer p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }
.footer p + p { margin-top: 8px; }
.footer-bar {
  margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-3);
}
.footer-bar a { color: var(--text-3); }

/* ── Reveal on scroll ───────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .hero { padding-top: 44px; }
  .hero-stats { grid-template-columns: 1fr; gap: 8px; }
  .hero-stat { display: flex; align-items: baseline; gap: 14px; padding: 14px 16px; }
  .hero-stat-val { font-size: 26px; min-width: 96px; }
  .hero-stat-label { margin-top: 0; }
  .section { padding-top: 68px; }
  .panel { padding: 14px; margin-left: -8px; margin-right: -8px; }
  .job-card { padding: 18px; }
  .job-card-head { flex-direction: column-reverse; gap: 14px; }
  .gauge { width: 96px; }
  .gauge svg { width: 96px; height: 96px; }
  .cluster-right { gap: 10px; }
  .cluster-trend { font-size: 11px; }
  .occ-nums { gap: 10px; }
  .occ-pay { display: none; }
  .sort-label { width: 100%; }
  .sort-label select { flex: 1; }
}