:root {
  --ja-ink: #0e1b2a;
  --ja-text: #4a5c72;
  --ja-muted: #5a6b82;
  --ja-blue: #2563eb;
  --ja-blue-2: #2f6bf0;
  --ja-pine: #0e9f6e;
  --ja-signal: #f4b63f;
  --ja-surface: #f5f8fc;
  --ja-frost: #eef4ff;
  --ja-line: #e4e9f0;
  --ja-white: #ffffff;
  --ja-shadow: 0 18px 50px rgba(14, 27, 42, 0.12);
  --ja-radius: 8px;
  --ja-max: 1180px;
  --ja-content: 790px;
  --ja-font: "Hanken Grotesk", Aptos, "Segoe UI", sans-serif;

  /* Expanded palette additions */
  --ja-primary-700: #1b4fd1;
  --ja-success: #0e9f6e;
  --ja-success-text: #0e7c53;
  --ja-success-tint: #e7f7f0;
  --ja-success-border: #c9ebdc;
  --ja-gold: #f4b63f;
  --ja-warning-text: #9a6b12;
  --ja-warning-gold: #e0a11f;
  --ja-warning-tint: #fdf3dc;
  --ja-warning-border: #f0dba6;
  --ja-rejected-text: #9a3b3b;
  --ja-rejected-tint: #fceded;
  --ja-rejected-border: #f3d2d2;
  --ja-danger-text: #c0464a;
  --ja-muted-2: #8a98ac;
  --ja-footer-bg: #0c1726;
  --ja-footer-text: #aebed2;
  --ja-footer-link: #6fa0f6;
  --ja-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ja-font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Radius scale (kept alongside --ja-radius) */
  --ja-radius-sm: 6px;
  --ja-radius-md: 10px;
  --ja-radius-lg: 14px;
  --ja-radius-xl: 18px;
  --ja-radius-pill: 999px;

  /* Shadow scale (kept alongside --ja-shadow) */
  --ja-shadow-sm: 0 1px 3px rgba(14, 27, 42, 0.08);
  --ja-shadow-md: 0 8px 20px -8px rgba(14, 27, 42, 0.24);
  --ja-shadow-lg: 0 30px 60px -20px rgba(14, 27, 42, 0.4);
}

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

html {
  /* clip (not hidden) contains horizontal overflow WITHOUT turning the root
     into a scroll container — which would break every position:sticky on the
     site (e.g. the blog "On this page" TOC). */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  background: var(--ja-white);
  color: var(--ja-text);
  font-family: var(--ja-font);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--ja-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ja-primary-700);
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid rgba(234, 179, 8, 0.75);
  outline-offset: 3px;
}

.wp-site-blocks {
  min-height: 100vh;
}

.ja-shell,
.site-shell {
  margin-inline: auto;
  max-width: var(--ja-max);
  padding-inline: 24px;
  width: 100%;
}

.ja-shell--narrow {
  max-width: 900px;
}

.ja-content {
  margin-inline: auto;
  max-width: var(--ja-content);
}

/* ─── Prose vertical rhythm ────────────────────────────────────────────────
   Global: p { margin:0 } and h* { margin:0 } strip all spacing.
   These rules restore vertical rhythm inside prose content areas
   without touching layout grids or hero sections.
 ─────────────────────────────────────────────────────────────────────────── */

/* Every element that follows another gets base spacing */
.ja-content > * + *,
.ja-example-content > * + *,
.ja-blog-post > * + * {
  margin-top: 1.2em;
}

/* Headings need extra breathing room above them */
.ja-content > * + h2,
.ja-content > * + h3,
.ja-content > * + h4,
.ja-example-content > * + h2,
.ja-example-content > * + h3,
.ja-blog-post > * + h2,
.ja-blog-post > * + h3 {
  margin-top: 2.4em;
}

/* Tighten spacing immediately after a heading */
.ja-content h2 + *,
.ja-content h3 + *,
.ja-example-content h2 + *,
.ja-example-content h3 + *,
.ja-blog-post h2 + *,
.ja-blog-post h3 + * {
  margin-top: 0.55em;
}

/* Headings inside prose: scale down from the marketing 2.65rem */
.ja-example-content h2,
.ja-blog-post h2 {
  font-size: 1.55rem;
  line-height: 1.15;
}

.ja-example-content h3,
.ja-blog-post h3 {
  font-size: 1.15rem;
}

/* Lists */
.ja-content ul,
.ja-content ol,
.ja-example-content ul,
.ja-example-content ol,
.ja-blog-post ul,
.ja-blog-post ol {
  padding-left: 1.5em;
}

.ja-content li + li,
.ja-example-content li + li,
.ja-blog-post li + li {
  margin-top: 0.4em;
}

/* strong inside p */
.ja-content p strong,
.ja-example-content p strong,
.ja-blog-post p strong {
  color: var(--ja-ink);
}

/* Override the old explicit rules that are now superseded */
.ja-blog-post h2 { margin-top: 2.4em; }
.ja-blog-post h3 { margin-top: 1.8em; }
.ja-blog-post ul,
.ja-blog-post ol { padding-left: 1.5em; }
.ja-blog-post li { margin-bottom: 0; }

.ja-section {
  padding-block: 86px;
}

.ja-section--tight {
  padding-block: 54px;
}

.ja-section--tight-74 {
  padding-block: 74px;
}

.ja-section--tight-70 {
  padding-block: 70px;
}

.ja-section-heading-36 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.ja-section-heading-32 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ja-heading-34 {
  font-size: 2.125rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.ja-section--surface {
  background: var(--ja-surface);
}

/* Flat surface variant: solid off-white fill, no dot/grid texture overlay
   (used where the reference shows a plain #F7FAFD band, e.g. ATS-checker
   "8 things we check", resume-examples card grid, interview-prep "how it
   works"). */
.ja-section--flat-surface {
  background: #f7fafd;
}

.ja-section--ink {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    var(--ja-ink);
  background-size: 60px 60px;
  color: #eef7fb;
}

.ja-section--ink h1,
.ja-section--ink h2,
.ja-section--ink h3,
.ja-section--ink .ja-kicker {
  color: var(--ja-white);
}

.ja-section--ink .ja-lede {
  color: #cfe0e8;
}

.ja-kicker {
  align-items: center;
  color: var(--ja-blue);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 10px;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.ja-kicker::before {
  background: var(--ja-signal);
  content: "";
  display: inline-block;
  height: 2px;
  width: 28px;
}

/* Pill-badge kicker variant: green pill with a small round dot instead of
   the flat mono-blue dash label (used on feature-page heroes like the ATS
   checker and job tracker). */
.ja-kicker--pill {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-success-text);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 11px;
}

.ja-kicker--pill::before {
  background: var(--ja-success);
  border-radius: var(--ja-radius-pill);
  height: 6px;
  width: 6px;
}

/* Blue pill-badge kicker variant: light-blue pill with a green dot (used on
   the homepage hero eyebrow, matching the reference "US JOB SEARCH · ONE
   WORKFLOW" trust badge). */
.ja-kicker--pill-blue {
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-blue);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  gap: 8px;
  letter-spacing: 0.06em;
  padding: 6px 11px;
}

.ja-kicker--pill-blue::before {
  background: var(--ja-success);
  border-radius: var(--ja-radius-pill);
  height: 6px;
  width: 6px;
}

h1,
h2,
h3,
h4,
.ja-display {
  color: var(--ja-ink);
  font-family: var(--ja-font);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

h1,
.ja-display {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.35rem;
}

h4 {
  font-size: 1rem;
}

.ja-highlight {
  color: var(--ja-blue);
}

p {
  margin: 0;
}

.ja-lede {
  color: var(--ja-muted);
  font-size: 1.125rem;
  line-height: 1.75;
  margin-top: 20px;
  max-width: 720px;
}

.ja-small {
  color: var(--ja-muted);
  font-size: 0.92rem;
}

.ja-muted {
  color: var(--ja-muted);
}

.ja-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--ja-frost);
  position: relative;
  z-index: 50;
}

/* Sticky nav: stick the TALL FSE wrapper, not .ja-header — its wrapper is only
   ~119px tall, so sticking .ja-header alone lets it scroll away almost at once.
   Offset by the announce-bar height (site.js sets --ja-announce-h) so the promo
   bar scrolls off and the nav pins to the top of the viewport. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: calc(-1 * var(--ja-announce-h, 42px));
  z-index: 50;
}

@supports (backdrop-filter: blur(16px)) {
  .ja-header {
    backdrop-filter: blur(16px);
  }
}

.ja-header__inner {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  min-height: 76px;
}

.ja-brand {
  align-items: center;
  color: var(--ja-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.12rem;
  font-weight: 800;
  gap: 10px;
  text-decoration: none;
}

.ja-brand:hover {
  color: var(--ja-ink);
}

.ja-brand img {
  display: block;
  height: 38px;
  width: 38px;
}

.ja-brand span {
  color: var(--ja-blue);
}

.ja-nav {
  align-items: center;
  display: flex;
  gap: 14px;
}

.ja-nav a {
  color: var(--ja-text);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.ja-nav a:hover {
  color: var(--ja-blue);
}

.ja-nav__cta {
  background: var(--ja-blue);
  border: 1px solid var(--ja-primary-700);
  border-radius: 9px;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7);
  color: var(--ja-white) !important;
  padding: 11px 16px;
  text-decoration: none;
}

.ja-nav__cta:hover {
  background: var(--ja-primary-700);
  color: var(--ja-white) !important;
}

.ja-menu-button {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 7px;
  color: var(--ja-ink);
  cursor: pointer;
  display: none;
  font: inherit;
  font-weight: 800;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
}

.ja-menu-button svg {
  height: 20px;
  width: 20px;
}

.ja-hero {
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--ja-frost);
  overflow: hidden;
  padding: 72px 28px 78px;
  position: relative;
}

.ja-hero::before {
  background: radial-gradient(closest-side, rgba(37, 99, 235, 0.1), transparent);
  content: "";
  height: 520px;
  pointer-events: none;
  position: absolute;
  right: -80px;
  top: -120px;
  width: 520px;
}

.ja-hero__grid {
  align-items: center;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, 1fr) 470px;
  position: relative;
  z-index: 1;
}

.ja-hero__copy {
  max-width: 720px;
}

.ja-hero__actions,
.ja-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.ja-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--ja-radius-md);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  padding: 14px 24px;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.ja-button:hover {
  transform: translateY(-1px);
}

.ja-button--primary {
  background: var(--ja-blue);
  border-color: var(--ja-primary-700);
  box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.8);
  color: var(--ja-white);
}

.ja-button--primary:hover {
  background: var(--ja-primary-700);
  color: var(--ja-white);
}

.ja-button--secondary {
  background: var(--ja-white);
  border-color: var(--ja-line);
  color: var(--ja-ink);
  padding: 14px 22px;
}

.ja-button__arrow {
  font-size: 15px;
}

.ja-button__play {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-blue);
  display: inline-flex;
  font-size: 9px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.ja-button--secondary:hover {
  border-color: var(--ja-blue);
  color: var(--ja-blue);
}

.ja-trust-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 30px;
}

.ja-trust-row span {
  align-items: center;
  color: var(--ja-text);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 700;
  gap: 8px;
}

/* Checkmark badge: circular check marker used for trust-row/benefit-list
   items (replaces the old flat color dot with a real checkmark glyph). */
.ja-dot {
  align-items: center;
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: 999px;
  color: var(--ja-success-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 19px;
  justify-content: center;
  line-height: 1;
  width: 19px;
}

.ja-dot::before {
  content: "\2713";
}

@media (max-width: 620px) {
  .ja-dot {
    height: 18px;
    width: 18px;
  }
}

.ja-product {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 8px;
  box-shadow: var(--ja-shadow);
  overflow: hidden;
}

.ja-flow-visual {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.ja-flow-visual > .ja-product__bar,
.ja-flow-visual > .ja-product__body {
  display: none;
}

.ja-flow-svg {
  display: block;
  filter: drop-shadow(0 24px 44px rgba(16, 32, 51, 0.16));
  height: auto;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

.ja-flow-svg text {
  font-family: var(--ja-font);
  letter-spacing: 0;
}

/* ===== Hero route card (workflow visual) ===== */
.ja-route-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-xl);
  box-shadow: 0 28px 60px -24px rgba(14, 27, 42, 0.34);
  padding: 18px 18px 22px;
}

.ja-route-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}

.ja-route-card__header > span:first-child {
  color: var(--ja-ink);
  font-size: 1.02rem;
  font-weight: 700;
}

.ja-route-card__tag {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-sm);
  color: var(--ja-muted);
  font-family: var(--ja-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  text-transform: uppercase;
}

.ja-route {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.ja-route__line {
  bottom: 16px;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 16px;
  width: 32px;
  z-index: 0;
}

.ja-route__path {
  opacity: 0.28;
}

.ja-route__path-flow {
  offset-path: path("M70 52 C98 84 98 116 70 148 C42 180 42 212 70 244 C98 276 98 308 70 340 C42 372 42 404 70 436");
  stroke-dashoffset: 0;
}

.ja-route__travel-glow,
.ja-route__travel-dot {
  offset-path: path("M70 52 C98 84 98 116 70 148 C42 180 42 212 70 244 C98 276 98 308 70 340 C42 372 42 404 70 436");
  offset-rotate: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .ja-route__path-flow {
    animation: ja_flow 6s linear infinite;
  }

  .ja-route__travel-glow,
  .ja-route__travel-dot {
    animation: ja_travel 5s ease-in-out infinite;
  }
}

@keyframes ja_flow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -26; }
}

@keyframes ja_travel {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Reference-exact hero SVG (single inline <svg>, not HTML rows): the dashed
   flow overlay on the route path, the glow+dot traveling along the exact
   bezier path, the per-node halo pulse, and the voice-interview waveform
   bars all animate via these three rules. */
.ja-route__flow {
  animation: ja_flow 1.3s linear infinite;
}

.ja-route__travel-glow,
.ja-route__travel-dot {
  animation: ja_travel 5s linear infinite;
  offset-path: path("M70 52 C98 84 98 116 70 148 C42 180 42 212 70 244 C98 276 98 308 70 340 C42 372 42 402 70 430");
}

.ja-route__halo-svg {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: ja_halo;
  animation-timing-function: ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}

.ja-route__wavebars rect {
  animation: ja_bar 0.7s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

.ja-route__halo {
  animation: ja_halo 2.4s ease-out infinite;
  background: var(--ja-blue);
  border-radius: var(--ja-radius-pill);
  height: 32px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 32px;
  z-index: -1;
}

.ja-route__node--gold .ja-route__halo {
  background: var(--ja-gold);
}

.ja-route__node--green .ja-route__halo {
  background: var(--ja-pine);
}

@keyframes ja_halo {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.ja-route__row {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 32px 1fr;
  position: relative;
}

.ja-route__node {
  align-items: center;
  background: var(--ja-white);
  border: 2px solid var(--ja-blue);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-blue);
  display: flex;
  font-family: var(--ja-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  position: relative;
  width: 32px;
  z-index: 1;
}

.ja-route__node--gold {
  border-color: var(--ja-gold);
  color: var(--ja-warning-text);
}

.ja-route__node--green {
  border-color: var(--ja-pine);
  color: var(--ja-success-text);
}

.ja-route__content {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-md);
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  width: 100%;
}

.ja-route__row--active .ja-route__content {
  background: var(--ja-warning-tint);
  border-color: var(--ja-warning-border);
}

.ja-route__icon {
  align-items: center;
  color: var(--ja-blue);
  display: flex;
  flex: none;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.ja-route__icon svg {
  height: 100%;
  width: 100%;
}

.ja-route__icon--gold {
  color: var(--ja-warning-text);
}

.ja-route__icon--green {
  color: var(--ja-pine);
}

.ja-route__content strong {
  color: var(--ja-ink);
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ja-route__content > div > span {
  color: var(--ja-muted);
  font-family: var(--ja-font-mono);
  font-size: 10.5px;
}

.ja-route__waveform {
  align-items: flex-end;
  display: flex;
  gap: 3px;
  height: 18px;
  margin-left: auto;
}

.ja-route__waveform i {
  animation: ja_bar 0.8s ease-in-out infinite alternate;
  background: var(--ja-pine);
  border-radius: 2px;
  display: block;
  width: 3px;
}

.ja-route__waveform i:nth-child(1) { animation-delay: 0s; height: 40%; }
.ja-route__waveform i:nth-child(2) { animation-delay: 0.12s; height: 90%; }
.ja-route__waveform i:nth-child(3) { animation-delay: 0.24s; height: 60%; }
.ja-route__waveform i:nth-child(4) { animation-delay: 0.36s; height: 100%; }
.ja-route__waveform i:nth-child(5) { animation-delay: 0.48s; height: 50%; }

.ja-flow-shell {
  fill: url("#ja-flow-bg");
  stroke: rgba(207, 224, 232, 0.9);
  stroke-width: 1;
}

.ja-flow-grid path {
  fill: none;
  stroke: rgba(207, 224, 232, 0.58);
  stroke-width: 1;
}

.ja-flow-route-soft {
  fill: none;
  stroke: rgba(16, 32, 51, 0.09);
  stroke-linecap: round;
  stroke-width: 18;
}

.ja-flow-route {
  animation: ja-flow-route 8s ease-in-out infinite;
  fill: none;
  stroke: url("#ja-route-gradient");
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  stroke-linecap: round;
  stroke-width: 5;
}

.ja-flow-particle {
  fill: var(--ja-signal);
  filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.75));
}

.ja-flow-hub rect {
  fill: #102033;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}

.ja-flow-brand {
  fill: var(--ja-white);
  font-size: 20px;
  font-weight: 900;
}

.ja-flow-sub {
  fill: #c6d8e1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ja-flow-card {
  animation: ja-flow-card 8s ease-in-out infinite;
  opacity: 0.76;
}

.ja-flow-card > rect {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(207, 224, 232, 0.95);
  stroke-width: 1;
}

.ja-flow-card--resume {
  animation-delay: 0s;
}

.ja-flow-card--jobs {
  animation-delay: 1.15s;
}

.ja-flow-card--apply {
  animation-delay: 2.3s;
}

.ja-flow-card--track {
  animation-delay: 3.45s;
}

.ja-flow-card--interview {
  animation-delay: 4.6s;
}

.ja-flow-icon {
  fill: none;
  stroke: var(--ja-blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.ja-flow-card--apply .ja-flow-icon,
.ja-flow-card--track .ja-flow-icon {
  stroke: var(--ja-pine);
}

.ja-flow-card--interview .ja-flow-icon {
  stroke: #b77905;
}

.ja-flow-step {
  fill: rgba(93, 108, 126, 0.72);
  font-size: 14px;
  font-weight: 900;
}

.ja-flow-label {
  fill: var(--ja-ink);
  font-size: 15px;
  font-weight: 900;
}

.ja-flow-badge {
  fill: #e8f7f3;
  stroke: #bfe6dd;
}

.ja-flow-badge-text {
  fill: var(--ja-pine);
  font-size: 13px;
  font-weight: 900;
}

@keyframes ja-flow-route {
  0% {
    stroke-dashoffset: 980;
  }
  18%,
  72% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -980;
  }
}

@keyframes ja-flow-card {
  0%,
  12%,
  100% {
    opacity: 0.72;
  }
  18%,
  42% {
    opacity: 1;
  }
}

.ja-product__bar {
  align-items: center;
  background: var(--ja-ink);
  color: var(--ja-white);
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.ja-product__bar strong {
  font-size: 0.92rem;
}

.ja-product__body {
  padding: 16px;
}

.ja-searchbox {
  border: 1px solid var(--ja-line);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 118px;
  margin-bottom: 14px;
  padding: 8px;
}

.ja-searchbox span {
  align-items: center;
  color: var(--ja-muted);
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  padding-inline: 8px;
}

.ja-searchbox b {
  background: var(--ja-blue);
  border-radius: 6px;
  color: var(--ja-white);
  display: inline-flex;
  font-size: 0.88rem;
  justify-content: center;
  padding: 10px 12px;
}

.ja-job-row {
  border-top: 1px solid var(--ja-frost);
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
  padding: 16px 0;
}

.ja-job-row:first-of-type {
  border-top: 0;
}

.ja-product__body .ja-job-row {
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  border-top: 1px solid var(--ja-line);
  margin-bottom: 8px;
  padding: 14px 16px;
}

.ja-product__body .ja-job-row:last-child {
  margin-bottom: 0;
}

.ja-job-row h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 5px;
}

.ja-job-row p {
  color: var(--ja-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ja-job-row__main {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.ja-job-row__logo {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid var(--ja-line);
  border-radius: 8px;
  color: var(--ja-primary-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.ja-score {
  align-items: center;
  background: #e8f7f3;
  border: 1px solid #bfe6dd;
  border-radius: 999px;
  color: var(--ja-pine);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  min-width: 76px;
  padding-inline: 10px;
}

.ja-grid-2,
.ja-grid-3,
.ja-grid-4 {
  display: grid;
  gap: 18px;
}

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

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

.ja-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ja-card,
.ja-feature,
.ja-price,
.ja-answer,
.ja-resource-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius);
  padding: 24px;
}

.ja-card h3,
.ja-feature h3,
.ja-price h3,
.ja-resource-card h3 {
  margin-bottom: 10px;
}

.ja-card p,
.ja-feature p,
.ja-price p,
.ja-resource-card p {
  color: var(--ja-muted);
}

.ja-feature h3 {
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Reference-exact override: the shared .ja-card/.ja-feature/.ja-price rule
   above uses the legacy flat --ja-radius (8px) with no shadow, but the
   homepage "Six tools" feature-grid cards need the reference's 13px radius
   + resting shadow specifically. */
.ja-grid-3 > .ja-feature {
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(14, 27, 42, 0.04);
}

.ja-feature h3 a {
  color: var(--ja-ink);
  text-decoration: none;
}

.ja-feature h3 a:hover {
  color: var(--ja-ink);
}

.ja-feature__more {
  color: var(--ja-blue);
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  margin-top: 10px;
  text-decoration: none;
}

.ja-feature__more:hover {
  text-decoration: underline;
}

.ja-icon {
  align-items: center;
  background: #eaf6fb;
  border: 1px solid rgba(14, 27, 42, 0.05);
  border-radius: 11px;
  color: var(--ja-blue);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 18px;
  width: 42px;
}

.ja-icon--blue {
  background: var(--ja-frost);
  border-color: rgba(14, 27, 42, 0.05);
  color: var(--ja-blue);
}

.ja-icon--pine {
  background: var(--ja-success-tint);
  border-color: rgba(14, 27, 42, 0.05);
  color: var(--ja-success-text);
}

.ja-icon--gold {
  background: var(--ja-warning-tint);
  border-color: rgba(14, 27, 42, 0.05);
  color: var(--ja-warning-text);
}

/* Job tracker feature grid: reference uses one uniform borderless chip
   style for all 6 icons instead of the blue/gold/pine checkerboard. */
.ja-icon--tracker {
  background: var(--ja-frost);
  border: none;
  color: var(--ja-primary-700);
  height: 40px;
  width: 40px;
}

.ja-icon svg {
  height: 22px;
  width: 22px;
}

.ja-stat-strip {
  background: var(--ja-white);
  border-bottom: 1px solid var(--ja-frost);
  border-top: 1px solid var(--ja-frost);
}

.ja-stats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ja-stat {
  border-left: 1px solid #edf1f6;
  padding: 30px 26px;
}

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

.ja-stat strong {
  color: var(--ja-ink);
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}

.ja-stat span {
  color: var(--ja-muted);
  display: block;
  font-size: 0.9rem;
  margin-top: 6px;
}

.ja-stat span.ja-stat__sub {
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  margin-top: 8px;
  text-transform: uppercase;
}

.ja-split {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
}

.ja-panel {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius);
  box-shadow: 0 12px 34px rgba(16, 32, 51, 0.08);
  padding: 22px;
}

.ja-check-list,
.ja-link-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.ja-check-list li {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.ja-check-list li::before {
  align-items: center;
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: 999px;
  color: var(--ja-success-text);
  content: "\2713";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  line-height: 1;
  width: 22px;
}

.ja-link-list li {
  border-radius: var(--ja-radius-md);
  transition: background-color 160ms ease;
}

.ja-link-list li:hover {
  background: var(--ja-surface);
}

.ja-link-list a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 12px;
  padding: 10px 8px;
  text-decoration: none;
}

.ja-link-list a::before {
  background: var(--ja-pine);
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.ja-link-list__body {
  flex: 1 1 auto;
}

.ja-link-list__title {
  color: var(--ja-ink);
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
}

.ja-link-list__desc {
  color: var(--ja-muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 2px;
}

.ja-link-list__action {
  color: var(--ja-blue);
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Categorized action-verb runs (resume-action-verbs pillar): middot-separated
   word lists that need looser rhythm than default prose paragraphs. */
.ja-content .ja-verb-list {
  color: var(--ja-ink);
  font-weight: 500;
  line-height: 2.05;
  margin-top: 6px;
}

.ja-content + .ja-workflow {
  margin-top: 30px;
}

.ja-workflow {
  counter-reset: workflow;
  display: grid;
  gap: 18px;
}

.ja-step {
  align-items: start;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius);
  counter-increment: workflow;
  display: grid;
  gap: 18px;
  grid-template-columns: 52px 1fr;
  padding: 22px;
}

.ja-step::before {
  align-items: center;
  background: var(--ja-ink);
  border-radius: 7px;
  color: var(--ja-white);
  content: counter(workflow, decimal-leading-zero);
  display: inline-flex;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.ja-step p {
  color: var(--ja-muted);
  margin-top: 8px;
}

/* ── Horizontal workflow variant (homepage "How it works"): 5-column row of
   step cards connected by a dashed line, circular nodes above each card,
   and a small colored category tag per card. Sits under a centered header
   instead of the .ja-split side-by-side layout. ── */

.ja-workflow-header--center {
  margin-inline: auto;
  max-width: 760px;
  text-align: center;
}

.ja-workflow-header--center .ja-kicker,
.ja-workflow-header--center .ja-lede {
  justify-content: center;
  margin-inline: auto;
}

.ja-workflow--horizontal {
  counter-reset: workflow;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 46px;
  position: relative;
}

.ja-workflow--horizontal::before {
  background-image: repeating-linear-gradient(90deg, var(--ja-gold) 0 6px, transparent 6px 13px);
  content: "";
  height: 2px;
  left: 10%;
  position: absolute;
  right: 10%;
  top: 22px;
}

.ja-workflow--horizontal .ja-step {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 10px;
  text-align: center;
}

.ja-workflow--horizontal .ja-step > div {
  background: var(--ja-white);
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 27, 42, 0.04);
  margin-top: 18px;
  padding: 18px 16px;
  text-align: left;
}

.ja-workflow--horizontal .ja-step::before {
  align-items: center;
  background: var(--ja-white);
  border: 2px solid var(--ja-blue);
  border-radius: var(--ja-radius-pill);
  box-shadow: 0 0 0 6px var(--ja-white);
  color: var(--ja-blue);
  display: inline-flex;
  font-family: var(--ja-font-mono);
  font-size: 0.78rem;
  height: 44px;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  width: 44px;
  z-index: 1;
}

.ja-workflow--horizontal .ja-step__tag {
  background: var(--ja-frost);
  border-radius: 6px;
  color: var(--ja-primary-700);
  display: inline-block;
  font-family: var(--ja-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 auto 6px;
  padding: 4px 8px;
  text-transform: uppercase;
}

/* Per-step category color: Resume/Apply = blue, Match/Prep = green, Track = gold. */
.ja-workflow--horizontal .ja-step:nth-child(2) .ja-step__tag,
.ja-workflow--horizontal .ja-step:nth-child(5) .ja-step__tag {
  background: var(--ja-success-tint);
  color: var(--ja-success-text);
}

.ja-workflow--horizontal .ja-step:nth-child(4) .ja-step__tag {
  background: var(--ja-warning-tint);
  color: var(--ja-warning-text);
}

.ja-workflow--horizontal .ja-step h3 {
  font-size: 0.98rem;
}

.ja-workflow--horizontal .ja-step p {
  font-size: 0.86rem;
}

@media (max-width: 1040px) {
  .ja-workflow--horizontal {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ja-workflow--horizontal::before {
    display: none;
  }
}

/* ── Interview-prep workflow variant: 3-column grid, vertical card stack
   (badge above title above paragraph), green circular badge. ── */

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

.ja-workflow--interview,
.ja-workflow--interview .ja-step {
  text-align: left;
}

.ja-workflow--interview .ja-step {
  border-radius: 13px;
  display: block;
  padding: 24px;
}

.ja-workflow--interview .ja-step::before {
  background: var(--ja-success-tint);
  border-radius: 11px;
  color: var(--ja-success-text);
  content: counter(workflow, decimal);
  font-family: var(--ja-font-mono);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ja-workflow--interview .ja-step h3 {
  font-size: 17px;
  font-weight: 700;
  margin-top: 16px;
}

.ja-workflow--interview .ja-step p {
  color: var(--ja-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 8px;
}

@media (max-width: 1040px) {
  .ja-workflow--interview {
    grid-template-columns: 1fr;
  }
}

.ja-table {
  border: 1px solid var(--ja-line);
  border-collapse: separate;
  border-radius: var(--ja-radius);
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

.ja-table th,
.ja-table td {
  border-bottom: 1px solid var(--ja-frost);
  padding: 16px;
  text-align: left;
  vertical-align: top;
}

.ja-table th {
  background: var(--ja-ink);
  color: var(--ja-white);
  font-size: 0.88rem;
}

.ja-table tr:last-child td {
  border-bottom: 0;
}

.ja-answer {
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-left: 4px solid var(--ja-blue);
  border-radius: 10px;
  padding: 18px 20px;
}

.ja-answer strong {
  color: var(--ja-primary-700);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.ja-faq {
  display: grid;
  gap: 14px;
}

.ja-faq__item {
  border-top: 1px solid var(--ja-line);
  padding-top: 20px;
}

.ja-faq__item h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.ja-cta {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr auto;
}

.ja-cta h2 {
  color: var(--ja-white);
  max-width: 720px;
}

.ja-cta p {
  color: #cfe0e8;
  margin-top: 14px;
  max-width: 720px;
}

.ja-page-hero {
  background:
    linear-gradient(90deg, rgba(207, 224, 232, 0.6) 1px, transparent 1px),
    linear-gradient(180deg, rgba(207, 224, 232, 0.6) 1px, transparent 1px),
    var(--ja-surface);
  background-size: 58px 58px;
  border-bottom: 1px solid var(--ja-frost);
  padding-block: 78px 58px;
}

.ja-page-hero .ja-lede {
  max-width: 780px;
  margin-inline: auto;
}

.ja-page-body {
  padding-block: 70px;
}

.ja-page-body h2 {
  margin-bottom: 18px;
  margin-top: 46px;
}

.ja-page-body h2:first-child {
  margin-top: 0;
}

.ja-page-body h3 {
  margin-bottom: 10px;
  margin-top: 28px;
}

.ja-page-body p + p {
  margin-top: 16px;
}

.ja-page-body ul,
.ja-page-body ol {
  margin-block: 18px;
  padding-left: 1.3rem;
}

.ja-page-body li + li {
  margin-top: 8px;
}

.ja-price {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.ja-price__value {
  color: var(--ja-ink);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin: 14px 0 8px;
}

.ja-price__value span {
  color: var(--ja-muted);
  font-size: 0.98rem;
  font-weight: 700;
}

.ja-price .ja-button {
  margin-top: auto;
}

/* Pricing page enhancements */

.ja-grid-2--narrow {
  max-width: 860px;
  margin-inline: auto;
}

.ja-price--featured {
  border: 2px solid var(--ja-blue);
  position: relative;
}

.ja-price__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ja-blue);
  color: var(--ja-white);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.ja-price__label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ja-blue);
  margin-bottom: 6px;
}

.ja-price__name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ja-ink);
  margin: 0 0 6px;
}

.ja-price__sub {
  font-size: 0.92rem;
  color: var(--ja-muted);
  margin-bottom: 4px;
}

.ja-price__trial {
  font-size: 0.9rem;
  color: var(--ja-pine);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 8px 12px;
  margin: -4px 0 12px;
}

.ja-price__trial strong {
  color: var(--ja-pine);
}

.ja-price__note {
  font-size: 0.8rem;
  color: var(--ja-muted);
  text-align: center;
  margin-top: 8px;
}

.ja-price-tag {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--ja-frost);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* FAQ accordion (details/summary) */

/* Category headings between FAQ groups on /faq/ — spacing via class so the
   heading blocks stay editor-canonical (no unmatched inline style attrs).
   The `> * + h2` qualifier outranks the generic `.ja-content > * + h2`
   breathing-room rule above (which would otherwise force 2.4em). */
.ja-faq-h2,
.ja-content > * + h2.ja-faq-h2 {
  margin-top: 34px;
}

.ja-faq-list {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

details.ja-faq {
  border-top: 1px solid var(--ja-line);
}

details.ja-faq:last-child {
  border-bottom: 1px solid var(--ja-line);
}

details.ja-faq summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ja-ink);
  padding: 18px 28px 18px 0;
  position: relative;
  list-style: none;
  user-select: none;
}

details.ja-faq summary::-webkit-details-marker {
  display: none;
}

details.ja-faq summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: var(--ja-primary-700);
  font-weight: 400;
  text-align: center;
  width: 22px;
}

details.ja-faq[open] summary::after {
  content: "\2212";
}

details.ja-faq p {
  color: var(--ja-muted);
  padding: 0 0 18px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

.ja-resource-card a {
  color: var(--ja-ink);
  text-decoration: none;
}

.ja-resource-card a:hover {
  color: var(--ja-blue);
}

.ja-post-meta {
  color: var(--ja-muted);
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 18px;
}

.ja-site-footer {
  background: var(--ja-ink);
  color: #dbeaf1;
  padding-block: 58px 34px;
}

.ja-footer-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(100px, 1fr));
}

.ja-site-footer a {
  color: #dbeaf1;
  text-decoration: none;
}

.ja-site-footer a:hover {
  color: var(--ja-signal);
}

.ja-footer-title {
  color: var(--ja-white);
  font-size: 0.92rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.ja-footer-links {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ja-footer-note {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #aebfcc;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 42px;
  padding-top: 22px;
}

.ja-footer-privacy-note {
  align-items: flex-start;
  color: var(--ja-muted-2);
  display: flex;
  font-size: 0.8125rem;
  gap: 8px;
  line-height: 1.5;
  margin-top: 12px;
}

.ja-footer-privacy-note__icon {
  align-items: center;
  background: #15334f;
  border-radius: var(--ja-radius-pill);
  color: #6fa0f6;
  display: inline-flex;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  margin-top: 1px;
  width: 18px;
}

.ja-sr-only {
  clip: rect(0, 0, 0, 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 1040px) {
  h1,
  .ja-display {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  .ja-hero__grid,
  .ja-split,
  .ja-cta {
    grid-template-columns: 1fr;
  }

  .ja-product {
    max-width: 620px;
  }

  .ja-flow-visual {
    justify-self: center;
    width: min(100%, 620px);
  }

  .ja-route-card {
    justify-self: center;
    width: min(100%, 620px);
  }

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

@media (max-width: 1080px) {
  .ja-menu-button {
    display: inline-flex;
  }

  .ja-nav {
    background: var(--ja-white);
    border-bottom: 1px solid var(--ja-line);
    border-top: 1px solid var(--ja-frost);
    display: none;
    gap: 0;
    left: 0;
    padding: 12px 24px 18px;
    position: absolute;
    right: 0;
    top: 76px;
  }

  .ja-nav[data-open="true"] {
    display: grid;
  }

  .ja-nav a {
    min-height: 44px;
    padding-block: 10px;
  }

  .ja-nav__cta {
    margin-top: 8px;
    text-align: center;
  }

  .ja-grid-3,
  .ja-grid-2 {
    grid-template-columns: 1fr;
  }

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

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

  .ja-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .ja-shell,
  .site-shell {
    padding-inline: 18px;
  }

  .ja-section {
    padding-block: 58px;
  }

  .ja-hero {
    padding-block: 58px 48px;
  }

  h1,
  .ja-display {
    font-size: 2.45rem;
  }

  h2 {
    font-size: 1.86rem;
  }

  .ja-lede {
    font-size: 1.02rem;
  }

  .ja-hero__actions,
  .ja-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ja-button {
    width: 100%;
  }

  .ja-searchbox {
    grid-template-columns: 1fr;
  }

  .ja-flow-svg {
    margin-inline: auto;
    max-width: 420px;
  }

  .ja-job-row {
    grid-template-columns: 1fr;
  }

  .ja-grid-4,
  .ja-footer-grid {
    grid-template-columns: 1fr;
  }

  .ja-stats {
    grid-template-columns: 1fr 1fr;
  }

  .ja-stat {
    border-left: 0;
    border-bottom: 1px solid var(--ja-frost);
    border-right: 1px solid var(--ja-frost);
    padding-inline: 16px;
  }

  .ja-stat:first-child {
    border-top: 0;
  }

  .ja-stat:nth-child(even) {
    border-right: 0;
  }

  .ja-stat:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .ja-step {
    grid-template-columns: 1fr;
  }

  .ja-table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ja-flow-route,
  .ja-flow-card {
    animation: none;
  }

  .ja-flow-route {
    stroke-dashoffset: 0;
  }

  .ja-flow-particle {
    display: none;
  }

  /* New keyframe systems (announce/voice-card/score-ring/kanban/resume-split/route-card/etc.) */
  .ja-voice-card__badge-live::before,
  .ja-voice-card__mic,
  .ja-voice-card__mic::after,
  .ja-voice-card__bar,
  .ja-carousel__card,
  .ja-resume-split__callout,
  .ja-nav__caret,
  .ja-drawer__panel,
  .ja-drawer__overlay,
  .ja-route__line,
  .ja-route__path-flow,
  .ja-route__travel-glow,
  .ja-route__travel-dot,
  .ja-route__halo,
  .ja-route__node--gold,
  .ja-route__waveform i,
  .ja-route__flow,
  .ja-route__halo-svg,
  .ja-route__wavebars rect,
  .ja-jobboard-hero__panel,
  .ja-jb-cursor,
  .ja-jb-scan {
    animation: none !important;
    transition: none !important;
  }

  .ja-route__travel-glow,
  .ja-route__travel-dot {
    opacity: 0 !important;
  }

  .ja-voice-card__bar {
    transform: scaleY(0.7);
  }
}

/* ─── Blog post in-content CTA ──────────────────────────────────────────── */
.ja-blog-cta {
  background: linear-gradient(135deg, var(--ja-ink) 0%, #16293e 100%);
  border-left: 3px solid var(--ja-blue);
  border-radius: 10px;
  padding: 28px 32px;
  margin: 36px 0;
}
.ja-blog-cta h3 { color: #fff; margin: 0 0 8px; font-size: 1.1rem; }
.ja-blog-cta p  { color: var(--ja-muted-2); margin: 0 0 18px; }

.ja-blog-post { max-width: 720px; }
.ja-blog-post h2 { margin-top: 2.2em; }
.ja-blog-post h3 { margin-top: 1.6em; }
.ja-blog-post ul, .ja-blog-post ol { padding-left: 1.4em; }
.ja-blog-post li { margin-bottom: 0.4em; }

/* ─── Comparison table ───────────────────────────────────────────────────── */
.ja-table-wrap { overflow-x: auto; }
.ja-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: var(--ja-surface);
  border-radius: var(--ja-radius-lg);
  overflow: hidden;
  box-shadow: var(--ja-shadow-sm);
}
.ja-compare-table th,
.ja-compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--ja-line);
}
.ja-compare-table thead th {
  background: var(--ja-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.ja-compare-table thead th:first-child { border-radius: 0; }
.ja-compare-table tbody tr:last-child td { border-bottom: none; }
.ja-compare-table tbody tr:nth-child(even) td { background: rgba(37, 99, 235, .04); }
.ja-col--yes  { color: var(--ja-success-text); font-weight: 500; }
.ja-col--no   { color: var(--ja-rejected-text); }
.ja-col--partial { color: var(--ja-warning-text); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Page hero (archive / single pages) ─────────────────────────────────── */

.ja-page-hero {
  background: linear-gradient(180deg, #f7faff, #ffffff);
  border-bottom: 1px solid var(--ja-line);
  padding: 64px 0 56px;
  text-align: center;
}

.ja-page-hero .ja-display--md {
  font-size: 2.875rem;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 760px;
  margin-inline: auto;
}

.ja-page-hero .ja-lede--center {
  max-width: 640px;
  margin-inline: auto;
  margin-top: 16px;
}

/* Job tracker hero: now that .ja-shell--narrow correctly caps the column at
   900px, bump the heading back up to the reference's larger size. */
.ja-feature-page:has(.ja-kanban-header) .ja-page-hero .ja-display--md {
  font-size: 3.125rem;
}

/* Resume-templates page: narrower two-line hero lede + matching gallery-wrap
   intro copy (scoped via :has() to this page only). */
.ja-feature-page:has(#resume-template-gallery-wrap) .ja-page-hero .ja-lede--center,
#resume-template-gallery-wrap .ja-lede {
  color: var(--ja-text);
  line-height: 1.58;
  margin-top: 18px;
  max-width: 560px;
}

/* Resources (blog hub) hero: matches the centered, gradient feature-page
   heroes used across the rest of the site (base .ja-page-hero look) — only
   the eyebrow keeps the mono-blue treatment and the h1→kicker gap is pinned
   tight (the generic `.ja-content > * + h1` prose rule would otherwise open
   a ~2.4em gap under "Resources"). */
.ja-page-hero--resources .ja-content {
  margin-inline: auto;
  max-width: 760px;
}

.ja-page-hero--resources .ja-kicker {
  color: var(--ja-primary-700);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.12em;
}

.ja-page-hero--resources .ja-kicker::before {
  content: none;
  display: none;
}

.ja-page-hero--resources h1 {
  font-size: 2.875rem;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-inline: auto;
  margin-top: 14px;
  max-width: 760px;
  text-align: center;
}

.ja-page-hero--resources .ja-lede {
  color: #4a5c72;
  line-height: 1.58;
  margin-inline: auto;
  margin-top: 16px;
  max-width: 600px;
  text-align: center;
}

.ja-hero__actions--center {
  justify-content: center;
  margin-top: 28px;
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */

.ja-breadcrumb {
  margin-bottom: 24px;
}

.ja-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--ja-muted);
  justify-content: center;
}

.ja-page-hero .ja-breadcrumb ol {
  justify-content: center;
}

.ja-breadcrumb a {
  color: var(--ja-muted);
  text-decoration: none;
}

.ja-breadcrumb a:hover {
  text-decoration: underline;
}

.ja-bc--current {
  color: var(--ja-ink);
  font-weight: 600;
}

/* ─── Example card grid ──────────────────────────────────────────────────── */

.ja-examples-grid {
  padding: 64px 0;
}

.ja-examples-grid .ja-section-title {
  text-align: center;
  margin-bottom: 8px;
}

.ja-examples-grid .ja-section-sub {
  text-align: center;
  color: var(--ja-muted);
  margin-bottom: 40px;
}

/* Base heading pair used above the archive query loop (also reused by the
   related-examples section on single templates, and previously unstyled
   outside the .ja-examples-grid/.ja-related-examples scopes). */
.ja-section-title {
  font-size: 1.9rem;
}

.ja-section-sub {
  color: var(--ja-muted);
  font-size: 1.02rem;
  margin-top: 8px;
}

/* Category filter row: on the resume-examples archive this now sits inside
   the centered hero (.ja-filters--center) below the subtitle, not between a
   section heading and the card grid. */
.ja-example-filters {
  margin: 28px 0 32px;
}

/* Small "<N> examples · <filter>" label directly above the card grid. */
.ja-example-count {
  color: var(--ja-muted);
  font-size: 0.875rem;
  margin: 0 0 16px;
}

.ja-example-count strong {
  color: var(--ja-ink);
  font-weight: 800;
}

.ja-example-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* wp:post-template's own per-post <li class="wp-block-post ..."> loop wrapper
   is emitted around the hand-authored <li class="ja-example-card"> item; a
   <li> can't validly contain another <li>, so the browser closes the wrapper
   immediately (leaving it whitespace-only) and promotes ja-example-card to a
   sibling. Without this rule those 18 near-empty wrapper <li>s become real
   grid cells interleaved with the real cards, wasting a third of the grid
   and pushing every other card out of reading order. (:empty doesn't match
   -- the wrapper contains a whitespace text node -- so target the stable
   wp-block-post class WordPress core always emits instead.) */
.ja-example-cards > .wp-block-post,
.ja-example-cards .is-flex-container.wp-block-post-template > .wp-block-post {
  display: none;
}

/* When the Query block's displayLayout is set to {type:"flex", columns:N}
   (used by the related-examples grid on single templates), core wraps the
   real <li class="ja-example-card"> items in an EXTRA nested
   <ul class="is-flex-container columns-N wp-block-post-template"> flex
   container instead of leaving them as direct children of the outer
   .ja-example-cards grid. That inner flex/columns sizing (not this grid's
   own grid-template-columns) is what the cards actually compute against,
   collapsing them into ~38px slivers. Neutralize the inner wrapper as a
   layout no-op so the cards remain direct grid children of
   .ja-example-cards regardless of nesting depth. */
.ja-example-cards .is-flex-container.wp-block-post-template {
  display: contents;
}

@media (max-width: 1040px) {
  .ja-example-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "What strong resumes have in common" summary card below the archive grid. */
.ja-example-summary {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  margin-top: 36px;
  padding: 32px 34px;
}

.ja-example-summary h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.ja-example-summary > p {
  color: #4a5c72;
  font-size: 0.969rem;
  line-height: 1.7;
  margin: 0;
  max-width: 760px;
}

.ja-example-summary__links {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
}

.ja-example-summary__links a {
  color: var(--ja-primary-700);
  font-weight: 700;
  text-decoration: none;
}

.ja-example-summary__links a:hover {
  text-decoration: underline;
}

.ja-example-summary__links span[aria-hidden="true"] {
  color: var(--ja-line);
}

/* Tighter top gap than the generic 86px .ja-section padding, so the "N
   examples" summary sits close under the hero/filter chips (reference). */
.ja-example-archive .ja-section--flat-surface {
  padding-block: 48px 80px;
}

.ja-example-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  box-shadow: var(--ja-shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* jaWireFilterChips toggles the `hidden` attribute; without this the equal-
   specificity `display: flex` above would win the cascade and keep filtered-
   out cards visible. */
.ja-example-card[hidden] {
  display: none;
}

.ja-example-card:hover {
  box-shadow: var(--ja-shadow-md);
  transform: translateY(-3px);
}

/* Floating document-preview frame around the featured image: flush against
   the bottom edge of the media box (padding-bottom:0, square bottom corners,
   upward glow) rather than a fully cropped, evenly-padded photo tile. */
.ja-example-card .wp-block-post-featured-image {
  align-items: flex-start;
  background: var(--ja-frost);
  border-bottom: 1px solid var(--ja-line);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 22px 22px 0;
}

.ja-example-card .wp-block-post-featured-image img {
  border: 1px solid var(--ja-line);
  border-bottom: none;
  border-radius: 0;
  box-shadow: 0 -2px 30px -10px rgba(14, 27, 42, 0.28);
  display: block;
  max-width: 230px;
  transition: transform 0.25s ease;
  width: 100%;
}

.ja-example-card:hover .wp-block-post-featured-image img {
  transform: scale(1.015);
}

.ja-example-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 16px 18px 18px;
}

.ja-example-card__title-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 52px;
}

.ja-example-card__eyebrow {
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-primary-700);
  flex: 0 0 auto;
  font-family: var(--ja-font);
  font-size: 0.656rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 3px 9px;
  text-transform: none;
}

.ja-example-card .wp-block-post-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.ja-example-card .wp-block-post-title a {
  color: var(--ja-ink);
  text-decoration: none;
}

.ja-example-card .wp-block-post-title a:hover {
  color: var(--ja-blue);
}

.ja-example-card .wp-block-post-excerpt {
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ja-muted);
  flex: 1;
}

.ja-example-card .wp-block-post-excerpt__more-link {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 8px;
  color: var(--ja-ink);
  display: block;
  font-size: 0.844rem;
  font-weight: 700;
  margin-top: 16px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.ja-example-card .wp-block-post-excerpt__more-link:hover {
  border-color: var(--ja-blue);
  color: var(--ja-blue);
}

/* ─── Single example page layout ─────────────────────────────────────────── */

.ja-example-single {
  padding: 0;
}

.ja-example-single > .ja-shell {
  padding-top: 40px;
  padding-bottom: 80px;
  overflow: visible;
}

.ja-example-single .ja-breadcrumb ol {
  justify-content: flex-start;
}

/* Left column = sticky framed preview, right column = article content */
.ja-example-layout {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: 380px 1fr;
  margin-top: 32px;
}

.ja-example-content {
  max-width: 660px;
}

.ja-example-content h1 {
  font-size: 2.625rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 820px;
}

.ja-example-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */

.ja-badge {
  display: inline-flex;
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid var(--ja-line);
  border-radius: 100px;
  color: var(--ja-text);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
}

.ja-badge--blue {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ja-badge--green {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.ja-badge--success {
  background: var(--ja-success-tint);
  border-color: var(--ja-success-border);
  color: var(--ja-success-text);
}

/* ─── Sticky preview column (left) ───────────────────────────────────────── */

.ja-example-preview {
  position: sticky;
  top: 92px;
}

.ja-example-preview-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 0;
  box-shadow: var(--ja-shadow-lg);
  margin-bottom: 18px;
  overflow: hidden;
}

.ja-example-preview-card img {
  width: 100%;
  display: block;
}

/* Short-viewport guard for the STICKY two-column mode: a sticky column never
   scrolls with the page, so on laptops / landscape tablets the natural
   ~537px-tall sheet pushed the CTA buttons permanently below the fold (they
   only surfaced at the very end of the page). Cap the sheet against the
   viewport so image + actions + badges always fit on screen; the crop is
   top-anchored and the lightbox still shows the full page. The cap only
   binds on short viewports — tall screens keep the natural size. */
@media (min-width: 901px) {
  .ja-example-preview-card img {
    /* budget below the image once the column pins at top:92px —
       caption 42 + card border 2 + gap 18 + actions 50 + gap 16 +
       badges 28 + 12px slack = 260px */
    max-height: max(280px, calc(100vh - 260px));
    max-height: max(280px, calc(100dvh - 260px));
    object-fit: cover;
    object-position: top;
  }
}

.ja-example-preview-card .ja-small--muted {
  padding: 10px 14px;
  /* --ja-muted-2 was ~2.9:1 on white — fails AA at this size. */
  color: var(--ja-muted);
  font-size: 0.78rem;
  border-top: 1px solid var(--ja-line);
  text-align: center;
}

.ja-example-preview-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}

.ja-example-preview-actions .ja-button {
  border-radius: 9px;
  min-height: 44px;
  padding: 12px;
  font-size: 0.9rem;
  width: 100%;
}

.ja-example-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ja-example-preview-badges .ja-badge {
  border-radius: 6px;
  font-family: var(--ja-font);
  font-size: 0.6875rem;
  letter-spacing: normal;
  padding: 4px 9px;
}

.ja-example-preview-badges .ja-badge:not([class*="ja-badge--"]) {
  background: var(--ja-surface);
  color: #2a3a4f;
}

.ja-button--full {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

/* ─── Inline CTA inside content ──────────────────────────────────────────── */

.ja-example-cta-inline {
  background: var(--ja-ink);
  border-radius: var(--ja-radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 26px 28px;
}

.ja-example-cta-inline strong {
  color: var(--ja-white);
  display: block;
  font-size: 1.1875rem;
  font-weight: 800;
}

.ja-example-cta-inline span {
  color: var(--ja-footer-text);
  display: block;
  font-size: 0.875rem;
  margin-top: 4px;
}

.ja-example-cta-inline .ja-button {
  border-radius: var(--ja-radius-md);
  padding: 13px 22px;
}

/* ─── In-content prose affordances (used by post-content bodies) ────────── */

/* Anchor-jump headings: keeps the target clear of the sticky site header */
.ja-example-content h2,
.ja-example-content h3 {
  scroll-margin-top: 100px;
}

/* Article body prose reads at a darker slate than the sitewide muted tone. */
.ja-example-content .entry-content,
.ja-example-content .entry-content p,
.ja-example-content .entry-content li {
  color: #2a3a4f;
  font-size: 1.03125rem;
  line-height: 1.7;
}

/* Skill-chip groups: <div class="ja-skill-chips"><span class="ja-skill-chip">…</span></div> */
.ja-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ja-skill-chip {
  background: var(--ja-frost);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-ink);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
}

/* Hard/soft skill distinction: blue chip for hard skills, neutral grey chip
   for soft skills, matching the reference's two-tone skill lists. */
.ja-skill-chip--hard,
.ja-skill-chip--soft {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 5px 11px;
}

.ja-skill-chip--hard {
  background: var(--ja-frost);
  border-color: #dbe7ff;
  color: var(--ja-primary-700);
}

.ja-skill-chip--soft {
  background: var(--ja-surface);
  border-color: var(--ja-line);
  color: #2a3a4f;
}

/* Guide-step list ("How to write a ___ resume"): flush borderless row with
   a small circular numbered badge, distinct from the bordered-card .ja-step
   component used for the marketing "how it works" sections. */
.ja-guide-steps {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ja-guide-step {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.ja-guide-step__badge {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-primary-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--ja-font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.ja-guide-step__body h3,
.ja-guide-step__body strong {
  color: var(--ja-ink);
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

.ja-guide-step__body p {
  color: var(--ja-muted);
  font-size: 0.94rem;
  margin-top: 4px;
}

/* Green-accented callout (e.g. "resume summary examples"), distinct from
   the blue .ja-callout--tip variant. */
.ja-callout--example {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-left: 4px solid var(--ja-success);
  border-radius: var(--ja-radius-md);
  color: #16304e;
  font-size: 0.97rem;
  padding: 16px 18px;
}

/* Weak-vs-strong comparison box: two accented columns for prose that
   doesn't use a <table>. Markup:
   <div class="ja-weak-strong">
     <div class="ja-weak-strong__col ja-weak-strong__col--weak"><span class="ja-weak-strong__label">Weak</span><p>…</p></div>
     <div class="ja-weak-strong__col ja-weak-strong__col--strong"><span class="ja-weak-strong__label">Strong</span><p>…</p></div>
   </div> */
.ja-weak-strong {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.ja-weak-strong__col {
  border-radius: var(--ja-radius-md);
  padding: 16px 18px;
}

.ja-weak-strong__col p {
  color: var(--ja-ink);
  font-size: 0.94rem;
  margin-top: 6px;
}

.ja-weak-strong__label {
  font-family: var(--ja-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ja-weak-strong__col--weak {
  background: var(--ja-rejected-tint);
  border: 1px solid var(--ja-rejected-border);
}

.ja-weak-strong__col--weak .ja-weak-strong__label {
  color: var(--ja-rejected-text);
}

.ja-weak-strong__col--strong {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
}

.ja-weak-strong__col--strong .ja-weak-strong__label {
  color: var(--ja-success-text);
}

/* Native WP block defaults inside example post-content, so unedited posts
   still render cleanly without per-post markup changes */
.ja-example-content table {
  border: 1px solid var(--ja-line);
  border-collapse: separate;
  border-radius: var(--ja-radius-md);
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

.ja-example-content th,
.ja-example-content td {
  border-bottom: 1px solid var(--ja-line);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.ja-example-content thead th {
  background: var(--ja-ink);
  color: var(--ja-white);
  font-size: 0.85rem;
}

.ja-example-content tr:last-child td {
  border-bottom: 0;
}

.ja-example-content details {
  border-top: 1px solid var(--ja-line);
}

.ja-example-content details:last-of-type {
  border-bottom: 1px solid var(--ja-line);
}

.ja-example-content details summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ja-ink);
  padding: 16px 28px 16px 0;
  position: relative;
  list-style: none;
}

.ja-example-content details summary::-webkit-details-marker {
  display: none;
}

.ja-example-content details summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--ja-blue);
  font-weight: 300;
  transition: transform 0.2s ease;
}

.ja-example-content details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.ja-example-content details > *:not(summary) {
  padding-bottom: 16px;
}

@media (max-width: 620px) {
  .ja-weak-strong {
    grid-template-columns: 1fr;
  }
}

/* ─── Related examples band (fresume/related-examples) ──────────────────────
   Full-bleed closing strip on single example pages. The block sits OUTSIDE
   .ja-shell in the template and brings its own inner shell, so the surface
   band runs edge to edge. */

.ja-related-examples {
  background: var(--ja-surface);
  border-top: 1px solid var(--ja-line);
  margin-top: 84px;
  padding-block: 72px 80px;
}

.ja-related-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  justify-content: space-between;
  margin-bottom: 36px;
}

.ja-related-head .ja-section-title {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin: 0;
}

.ja-related-head .ja-section-sub {
  margin-top: 6px;
  max-width: 540px;
}

.ja-related-viewall {
  color: var(--ja-blue);
  font-size: 0.95rem;
  font-weight: 700;
  padding-bottom: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.ja-related-viewall span {
  display: inline-block;
  transition: transform 0.18s ease;
}

.ja-related-viewall:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ja-related-viewall:hover span {
  transform: translateX(4px);
}

.ja-related-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ja-related-card {
  min-width: 0;
}

.ja-related-link {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  box-shadow: var(--ja-shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ja-related-link:hover {
  border-color: #cfdcf3;
  box-shadow: var(--ja-shadow-md);
  transform: translateY(-4px);
}

/* Document motif shared with the archive cards: the sheet floats on a frost
   mat, flush against the bottom edge of the media box. */
.ja-related-thumb {
  align-items: flex-start;
  aspect-ratio: 53 / 60;
  background: var(--ja-frost);
  border-bottom: 1px solid var(--ja-line);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 18px 20px 0;
}

.ja-related-thumb img {
  border: 1px solid var(--ja-line);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 30px -10px rgba(14, 27, 42, 0.28);
  display: block;
  /* cover + top anchor keeps the sheet flush against the bottom edge even if
     a featured image isn't A4-portrait (same recipe as .ja-variant-thumb). */
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.25s ease;
  width: 100%;
}

.ja-related-link:hover .ja-related-thumb img {
  transform: scale(1.02);
}

.ja-related-body {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px 16px;
}

.ja-related-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ja-related-name {
  color: var(--ja-ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  transition: color 0.15s ease;
}

.ja-related-tag {
  color: var(--ja-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.ja-related-arrow {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-blue);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  height: 30px;
  justify-content: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  width: 30px;
}

.ja-related-link:hover .ja-related-name {
  color: var(--ja-blue);
}

.ja-related-link:hover .ja-related-arrow {
  background: var(--ja-blue);
  border-color: var(--ja-blue);
  color: var(--ja-white);
  transform: translateX(2px);
}

/* The global gold focus ring has ~1.6:1 non-text contrast on this light
   surface — give the band's interactive elements a blue ring instead. */
.ja-related-link:focus-visible,
.ja-related-viewall:focus-visible,
.ja-variant-edit:focus-visible {
  outline: 3px solid var(--ja-blue);
  outline-offset: 2px;
}

@media (max-width: 1040px) {
  .ja-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .ja-related-examples {
    margin-top: 64px;
    padding-block: 56px 64px;
  }

  .ja-related-head {
    margin-bottom: 26px;
  }

  .ja-related-head .ja-section-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 560px) {
  .ja-related-grid {
    gap: 14px;
  }

  .ja-related-thumb {
    padding: 12px 14px 0;
  }

  .ja-related-body {
    padding: 12px 12px 13px;
  }

  .ja-related-name {
    font-size: 0.95rem;
  }

  .ja-related-arrow {
    display: none;
  }
}

/* ─── Examples CTA dark section ──────────────────────────────────────────── */

.ja-examples-cta {
  padding: 72px 0;
  text-align: center;
}

.ja-bg--dark {
  background: var(--ja-ink);
  color: var(--ja-white);
}

/* Job tracker closing CTA band: slightly tighter vertical rhythm than the
   generic 86px .ja-section default. */
.ja-feature-page:has(.ja-kanban-header) .ja-bg--dark.ja-section {
  padding-block: 70px;
}

/* ATS checker closing CTA band: narrower, more centered text column than
   the sitewide 960px .ja-shell. */
.ja-feature-page:has(.ja-upload-drop) .ja-bg--dark .ja-shell {
  max-width: 820px;
}

.ja-bg--dark h2 {
  color: var(--ja-white);
  font-size: 2.375rem;
  margin-bottom: 16px;
}

.ja-bg--dark p {
  color: #94b4c8;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: 32px;
}

.ja-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.ja-button--ghost {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--ja-white);
}

.ja-button--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ja-white);
}

/* ─── Responsive: example pages ─────────────────────────────────────────── */

/* Feature landing pages */

.ja-feature-page .ja-page-hero--feature {
  padding-bottom: 52px;
}

.ja-content--wide {
  max-width: 960px;
}

/* Numbered-grid section intro (e.g. ATS-checker "8 things we check"): the
   heading sits directly under a mono eyebrow kicker inside a wrapper that
   also carries `.ja-content`, so the generic prose rule `.ja-content > * +
   h2 { margin-top: 2.4em }` (0,1,1) would otherwise win over intent here.
   Keep the gap tight to match the eyebrow-led section pattern. */
.ja-content--wide > .ja-kicker--mono + .ja-section-heading-36 {
  margin-top: 12px;
}

/* Job-tracker "More than a list" intro uses the same eyebrow-led pattern
   with the .ja-heading-34 heading size instead of .ja-section-heading-36 -
   keep the same tight coupling so the kicker reads with its heading. */
.ja-content--wide > .ja-kicker--mono + .ja-heading-34 {
  margin-top: 12px;
}

/* General eyebrow-led heading fix: the prose rule ".ja-content > * + h2/h3
   { margin-top: 2.4em }" above is meant for running body copy, but any
   .ja-kicker variant immediately followed by a heading is a short marketing
   eyebrow, not prose -- it must sit tight against its heading (matches the
   reference's consistent 14px eyebrow-to-heading gap) regardless of whether
   the wrapper is .ja-content or .ja-content--wide. This covers every
   homepage section (Why Fresume, Resume templates, Job search, Job
   tracker, Trust, FAQ, etc.) that wasn't already covered by the two
   `--wide` overrides above. */
.ja-content > .ja-kicker + h2,
.ja-content > .ja-kicker + h3,
.ja-content--wide > .ja-kicker + h2,
.ja-content--wide > .ja-kicker + h3 {
  margin-top: 14px;
}

/* Resume-templates gallery wrap needs the full 1180px track so the fixed
   3-column .ja-template-gallery--resume grid can render ~358px cards,
   matching the reference (wider than the standard 960px feature-page column). */
#resume-template-gallery-wrap .ja-content--wide {
  max-width: var(--ja-max);
}

.ja-proof-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}

.ja-proof-grid--compact {
  max-width: 860px;
  margin-inline: auto;
}

.ja-proof {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius);
  min-height: 92px;
  padding: 18px;
  text-align: center;
}

.ja-proof strong {
  color: var(--ja-ink);
  display: block;
  font-size: 1.55rem;
  line-height: 1.1;
  margin-bottom: 5px;
}

.ja-proof span {
  color: var(--ja-muted);
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
}

.ja-feature-grid {
  display: grid;
  gap: 18px;
  margin-block: 28px;
}

.ja-feature-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ja-feature-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tinted card variant (e.g. interview-prep "What you practice" grid): light
   blue-grey background instead of the default white card. */
.ja-feature-grid--tinted .ja-feature {
  background: #f7fafd;
  border-radius: 12px;
}

/* Interview-prep "What you practice" section intro: tighter, more editorial
   heading scale than the sitewide generic h2, with the copy column
   (kicker + h2 + lede) narrowed to match the reference instead of
   stretching across the wide feature-page column. */
.ja-feature-page:has(.ja-feature-grid--tinted) .ja-kicker--mono {
  max-width: 680px;
}

.ja-feature-page:has(.ja-feature-grid--tinted) .ja-kicker--mono + h2 {
  font-size: 2.125rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
  max-width: 680px;
}

.ja-feature-page:has(.ja-feature-grid--tinted) .ja-kicker--mono + h2 + .ja-lede {
  max-width: 680px;
}

.ja-template-gallery {
  display: grid;
  gap: 24px;
  margin: 32px 0 44px;
}

.ja-template-gallery--resume {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ja-template-gallery--cover {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ja-template-card {
  background: var(--ja-white);
  border: 1px solid #e7ecf3;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(14, 27, 42, 0.05);
  overflow: hidden;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.26s ease, border-color 0.2s ease;
}

.ja-template-card:hover {
  transform: translateY(-5px);
  border-color: #d3deee;
  box-shadow: 0 28px 54px -26px rgba(14, 27, 42, 0.42);
}

.ja-template-card__media {
  position: relative;
  align-items: flex-start;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #e9f0fb 0%, #f4f8fd 100%);
  border-bottom: 1px solid #e7ecf3;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 18px 16px 0;
}

/* Soft fade so the cropped page bottom blends into the frame, not a hard edge. */
.ja-template-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(244, 248, 253, 0) 0%, #f4f8fd 90%);
  pointer-events: none;
}

.ja-template-gallery--cover .ja-template-card__media {
  aspect-ratio: 3 / 4;
}

.ja-template-card__media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid rgba(16, 32, 51, 0.1);
  box-shadow: 0 18px 36px -14px rgba(14, 27, 42, 0.45);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ja-template-card:hover .ja-template-card__media img {
  transform: translateY(-8px) scale(1.02);
}

.ja-template-card__body {
  padding: 18px;
}

.ja-template-card h3 {
  color: var(--ja-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 6px 0 8px;
}

.ja-template-card p {
  color: var(--ja-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}

.ja-chip {
  align-items: center;
  background: #e8f7f3;
  border: 1px solid #bfe6dd;
  border-radius: 999px;
  color: var(--ja-pine) !important;
  display: inline-flex;
  font-size: 0.72rem !important;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  min-height: 26px;
  padding: 7px 10px;
  text-transform: uppercase;
}

.ja-logo-strip--text {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 26px 0 36px;
}

.ja-logo-strip--text span {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius);
  color: var(--ja-ink);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 11px 10px;
  text-align: center;
}

.ja-cta-inline {
  align-items: center;
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 30px;
  padding: 18px;
}

@media (max-width: 900px) {
  .ja-example-layout {
    grid-template-columns: 1fr;
  }

  .ja-example-preview {
    position: static;
    order: -1;
  }

  .ja-example-preview-card img {
    max-height: 340px;
    object-fit: cover;
    object-position: top;
  }

  .ja-proof-grid,
  .ja-feature-grid--four,
  .ja-logo-strip--text {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ja-feature-grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .ja-page-hero {
    padding: 40px 0 36px;
  }

  .ja-example-cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .ja-example-cta-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .ja-proof-grid,
  .ja-feature-grid--four,
  .ja-logo-strip--text {
    grid-template-columns: 1fr;
  }

  .ja-template-gallery--resume,
  .ja-template-gallery--cover {
    grid-template-columns: 1fr;
  }

  .ja-template-card__media {
    aspect-ratio: 3 / 4;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FRESUME.COM — NEW COMPONENT SYSTEMS (redesign additive pass)
   Everything below is NEW. Existing component classes above are untouched.
   All colors/radii/shadows/fonts pull from the --ja-* tokens in :root.
   ════════════════════════════════════════════════════════════════════════ */

/* ===== 1. ANNOUNCEMENT STRIP ===== */

.ja-announce {
  align-items: center;
  background: var(--ja-ink);
  color: var(--ja-white);
  display: flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  padding: 9px 24px;
  text-align: center;
}

.ja-announce__badge {
  background: var(--ja-gold);
  border-radius: 4px;
  color: var(--ja-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--ja-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  text-transform: uppercase;
}

.ja-announce__link {
  color: #7fa7f5;
  font-weight: 600;
  text-decoration: none;
}

.ja-announce__link:hover {
  color: var(--ja-gold);
  text-decoration-color: currentColor;
}

/* ===== 2. MEGA NAV / DROPDOWN PANELS ===== */

.ja-nav--mega {
  position: relative;
}

.ja-nav__item--dropdown {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  position: relative;
}

.ja-nav__trigger {
  align-items: center;
  background: none;
  border: 0;
  color: var(--ja-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 6px;
  padding: 0;
}

.ja-nav__trigger:hover {
  color: var(--ja-blue);
}

.ja-nav__caret {
  color: var(--ja-muted-2);
  flex: 0 0 auto;
  height: 9px;
  transition: transform 160ms ease;
  width: 9px;
}

.ja-nav__item--dropdown[aria-expanded="true"] .ja-nav__caret,
.ja-nav__item--dropdown.is-open .ja-nav__caret {
  transform: rotate(180deg);
}

.ja-nav__panel {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  box-shadow: var(--ja-shadow-lg);
  display: none;
  gap: 24px;
  left: 0;
  padding: 22px;
  position: absolute;
  top: calc(100% + 14px);
  z-index: 60;
}

.ja-nav__panel[data-open="true"],
.ja-nav__item--dropdown.is-open .ja-nav__panel {
  display: flex;
}

.ja-nav__panel--mega {
  min-width: 560px;
}

.ja-nav__panel-group {
  display: grid;
  gap: 10px;
  min-width: 160px;
}

.ja-nav__panel-group-title {
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.ja-nav__panel-link {
  border-radius: var(--ja-radius-sm);
  color: var(--ja-text);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 8px 10px;
  text-decoration: none;
}

.ja-nav__panel-link:hover {
  background: var(--ja-frost);
  color: var(--ja-blue);
}

.ja-nav__panel-link span {
  color: var(--ja-muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 2px;
}

/* ===== 3. MOBILE DRAWER (full-screen nav overlay) ===== */

.ja-drawer__overlay {
  background: rgba(14, 27, 42, 0.55);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 220ms ease;
  z-index: 90;
}

.ja-drawer[data-open="true"] .ja-drawer__overlay,
.ja-drawer__overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.ja-drawer__panel {
  background: var(--ja-white);
  bottom: 0;
  box-shadow: var(--ja-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 360px;
  overflow-y: auto;
  padding: 20px 22px 28px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 260ms ease;
  width: 86%;
  z-index: 91;
}

.ja-drawer[data-open="true"] .ja-drawer__panel,
.ja-drawer__panel[data-open="true"] {
  transform: translateX(0);
}

.ja-drawer__close {
  align-items: center;
  align-self: flex-end;
  background: var(--ja-frost);
  border: 0;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-ink);
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  margin-bottom: 14px;
  width: 40px;
}

.ja-drawer__close svg {
  height: 18px;
  width: 18px;
}

.ja-drawer__link {
  border-bottom: 1px solid var(--ja-line);
  color: var(--ja-ink);
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  padding: 16px 4px;
  text-decoration: none;
}

.ja-drawer__link:hover {
  color: var(--ja-blue);
}

.ja-drawer__cta {
  background: var(--ja-blue);
  border: 1px solid var(--ja-primary-700);
  border-radius: var(--ja-radius-md);
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7);
  color: var(--ja-white) !important;
  font-weight: 800;
  margin-top: 20px;
  padding: 14px 18px;
  text-align: center;
  text-decoration: none;
}

.ja-drawer__cta:hover {
  background: var(--ja-primary-700);
}

/* ===== 4. COVERFLOW CAROUSEL ===== */

.ja-carousel {
  height: 568px;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.ja-carousel::before,
.ja-carousel::after {
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 160px;
  z-index: 5;
}

.ja-carousel::before {
  background: linear-gradient(90deg, #f4f7fc 12%, rgba(244, 247, 252, 0));
  left: 0;
}

.ja-carousel::after {
  background: linear-gradient(270deg, #f4f7fc 12%, rgba(244, 247, 252, 0));
  right: 0;
}

/* Reference-exact coverflow: every card sits at the stage center
   (left/top 50%) and JS moves it with translate(calc(-50% + Npx), -50%)
   scale(S) -- active N=0/scale 1, flanking N=+-300/scale .78/opacity .5,
   the rest N=+-600/opacity 0. */
.ja-carousel__track {
  inset: 0;
  position: absolute;
}

.ja-carousel__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  left: 50%;
  margin: 0;
  opacity: 0.5;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.78);
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s;
  width: 384px;
}

.ja-carousel__card .ja-template-card__media {
  align-items: stretch;
  aspect-ratio: auto;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-bottom: 1px solid var(--ja-line);
  border-radius: 0;
  box-shadow: 0 14px 30px -16px rgba(14, 27, 42, 0.3);
  display: block;
  overflow: hidden;
  padding: 0;
}

.ja-carousel__card .ja-template-card__media img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  height: auto;
  max-width: none;
  object-fit: unset;
  width: 100%;
}

.ja-carousel__card--active .ja-template-card__media {
  border-color: #c9d7ee;
  box-shadow: 0 44px 80px -30px rgba(14, 27, 42, 0.5);
}

.ja-carousel__arrow {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid #dde5ee;
  border-radius: var(--ja-radius-pill);
  box-shadow: 0 8px 20px -8px rgba(14, 27, 42, 0.3);
  color: #16304e;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 48px;
  z-index: 30;
}

.ja-carousel__arrow:hover {
  border-color: var(--ja-blue);
  color: var(--ja-blue);
  transform: translateY(calc(-50% - 1px));
}

.ja-carousel__arrow svg {
  height: 20px;
  width: 20px;
}

/* Sit fully INSIDE the clipped coverflow stage (was -4px, whose outer edge
   was cut off by .ja-carousel's overflow:hidden). A small positive inset keeps
   the whole 48px button visible while still hugging the edge. */
.ja-carousel__arrow--prev {
  left: 10px;
}

.ja-carousel__arrow--next {
  right: 10px;
}

.ja-carousel__dots {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.ja-carousel__dot {
  background: var(--ja-line);
  border: 0;
  border-radius: var(--ja-radius-pill);
  cursor: pointer;
  height: 8px;
  padding: 0;
  transition: background-color 160ms ease, width 160ms ease;
  width: 8px;
}

.ja-carousel__dot--active {
  background: var(--ja-blue);
  width: 22px;
}

/* -- Coverflow meta/controls panel: active-template name + best-for + counter + tags + CTAs -- */

.ja-carousel__meta {
  margin-top: 22px;
  text-align: center;
}

.ja-carousel__meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ja-carousel__meta-name {
  color: var(--ja-ink);
  font-size: 1.3125rem;
  font-weight: 800;
}

.ja-carousel__meta-divider {
  background: #cbd5e1;
  height: 16px;
  width: 1px;
}

.ja-carousel__meta-best {
  color: var(--ja-muted);
  font-size: 0.92rem;
}

.ja-carousel__meta-best span {
  color: var(--ja-text);
  font-weight: 600;
}

.ja-carousel__meta-counter {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 6px;
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
}

.ja-carousel__meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.ja-carousel__meta-tags .ja-tag {
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-primary-700);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
}

.ja-carousel__meta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* ===== 5. FILTER CHIPS ===== */

.ja-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Centered variant: used when the chip row sits inside a centered hero
   (e.g. the resume-examples archive) instead of left-aligned above a grid. */
.ja-filters--center {
  justify-content: center;
  margin-top: 24px;
}

.ja-filter-chip {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-pill);
  color: #2a3a4f;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ja-font);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 8px 15px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ja-filter-chip:hover {
  border-color: var(--ja-blue);
  color: var(--ja-blue);
}

.ja-filter-chip--active,
.ja-filter-chip--active:hover {
  background: var(--ja-ink);
  border-color: var(--ja-ink);
  color: var(--ja-white);
}

/* ===== 6. KANBAN JOB TRACKER BOARD ===== */

.ja-kanban-board {
  background: #f4f7fc;
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-xl) var(--ja-radius-xl) 0 0;
  box-shadow: inset 0 -1px 0 var(--ja-white);
  padding: 20px 20px 28px;
}

.ja-kanban {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ja-kanban__column {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.ja-kanban__column-header {
  align-items: center;
  color: var(--ja-ink);
  display: flex;
  font-size: 0.85rem;
  font-weight: 800;
  gap: 8px;
  justify-content: space-between;
}

.ja-kanban__column-header::before {
  border-radius: var(--ja-radius-pill);
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.ja-kanban__column-header--saved {
  color: var(--ja-muted);
}

.ja-kanban__column-header--saved::before {
  background: var(--ja-muted);
}

.ja-kanban__column-header--applied {
  color: var(--ja-blue);
}

.ja-kanban__column-header--applied::before {
  background: var(--ja-blue);
}

.ja-kanban__column-header--interviewing {
  color: var(--ja-warning-text);
}

.ja-kanban__column-header--interviewing::before {
  background: var(--ja-warning-text);
}

.ja-kanban__column-header--offer {
  color: var(--ja-success-text);
}

.ja-kanban__column-header--offer::before {
  background: var(--ja-success);
}

.ja-kanban__column-header--rejected {
  color: var(--ja-rejected-text);
}

.ja-kanban__column-header--rejected::before {
  background: var(--ja-rejected-text);
}

.ja-kanban__count {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  min-width: 22px;
  padding: 2px 7px;
  text-align: center;
}

.ja-kanban__count--saved {
  border-color: var(--ja-line);
  color: var(--ja-muted);
}

.ja-kanban__count--applied {
  border-color: #dbe7ff;
  color: var(--ja-blue);
}

.ja-kanban__count--interviewing {
  border-color: var(--ja-warning-border);
  color: var(--ja-warning-text);
}

.ja-kanban__count--offer {
  border-color: var(--ja-success-border);
  color: var(--ja-success-text);
}

.ja-kanban__count--rejected {
  border-color: var(--ja-rejected-border);
  color: var(--ja-rejected-text);
}

.ja-kanban__reminder {
  align-items: center;
  background: var(--ja-surface);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-muted-2);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  gap: 4px;
  margin-top: 8px;
  padding: 3px 9px;
}

.ja-kanban__card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-md);
  box-shadow: var(--ja-shadow-sm);
  padding: 12px 14px 12px 20px;
  position: relative;
}

.ja-kanban__card h4,
.ja-kanban__card .ja-kanban__card-title {
  color: var(--ja-ink);
  font-weight: 700;
  margin-top: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  margin-bottom: 4px;
}

.ja-kanban__card p {
  margin: 0;
}

.ja-kanban__card p:not(.ja-kanban__card-title) {
  color: var(--ja-muted);
  font-size: 0.8rem;
}

/* Stage accent renders as an inset pill (not a flush border) so it reads as
   a distinct element sitting inside the card's own padding. */
.ja-kanban__card::before {
  background: var(--ja-line);
  border-radius: 999px;
  bottom: 6px;
  content: "";
  left: 10px;
  position: absolute;
  top: 6px;
  width: 3px;
}

.ja-kanban__card-accent--saved::before {
  background: var(--ja-muted-2);
}

.ja-kanban__card-accent--applied::before {
  background: var(--ja-blue);
}

.ja-kanban__card-accent--interviewing::before {
  background: var(--ja-warning-gold);
}

.ja-kanban__card-accent--offer::before {
  background: var(--ja-success);
}

.ja-kanban__card-accent--rejected::before {
  background: var(--ja-rejected-text);
}

.ja-kanban__empty {
  align-items: center;
  border: 1.5px dashed #d4dce6;
  border-radius: var(--ja-radius-md);
  color: var(--ja-muted-2);
  display: flex;
  font-size: 0.8rem;
  justify-content: center;
  min-height: 64px;
  padding: 14px;
  text-align: center;
}

@media (max-width: 1040px) {
  .ja-kanban {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ja-kanban {
    grid-template-columns: 1fr;
  }
}

/* ===== 7. BROWSER-CHROME MOCKUP (extension illustration) ===== */

.ja-browser-mock {
  background: var(--ja-white);
  border: 1px solid #e1e7ef;
  border-radius: var(--ja-radius-lg);
  box-shadow: 0 24px 50px -20px rgba(14, 27, 42, 0.28);
  margin: 0 auto;
  max-width: 530px;
  overflow: hidden;
  width: 100%;
}

.ja-browser-mock__bar {
  align-items: center;
  background: var(--ja-surface);
  border-bottom: 1px solid var(--ja-line);
  display: flex;
  gap: 10px;
  padding: 10px 14px;
}

.ja-browser-mock__dot {
  border-radius: var(--ja-radius-pill);
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.ja-browser-mock__dot--red {
  background: #ef5350;
}

.ja-browser-mock__dot--gold {
  background: var(--ja-gold);
}

.ja-browser-mock__dot--green {
  background: var(--ja-success);
}

.ja-browser-mock__url {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-sm);
  color: var(--ja-muted);
  display: flex;
  flex: 1 1 auto;
  font-family: var(--ja-font-mono);
  font-size: 0.72rem;
  gap: 6px;
  margin-left: 8px;
  padding: 5px 10px;
}

.ja-browser-mock__lock {
  color: var(--ja-success-text);
  flex: 0 0 auto;
}

.ja-browser-mock__body {
  display: grid;
  gap: 12px;
  padding: 22px 24px 26px;
}

.ja-browser-mock__heading {
  color: var(--ja-ink);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.ja-browser-mock__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.ja-browser-mock__field-pdf {
  align-items: center;
  background: #dbe7ff;
  border-radius: 5px;
  color: var(--ja-primary-700);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  margin-right: 9px;
  width: 22px;
}

.ja-browser-mock__field {
  background: #f4f8ff;
  border: 1px solid #c9dbfa;
  border-radius: var(--ja-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
}

.ja-browser-mock__field-value {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ja-browser-mock__field-mark {
  color: var(--ja-blue);
  font-size: 12px;
  font-weight: 800;
}

.ja-browser-mock__field label {
  color: var(--ja-muted-2);
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ja-browser-mock__field span {
  color: #16304e;
  font-size: 13px;
  font-weight: 600;
}

.ja-browser-mock__field-check {
  align-items: center;
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-success-text);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 700;
  gap: 4px;
  padding: 3px 9px;
}

/* ===== 8. VOICE / INTERVIEW-PREP CARD ===== */

.ja-voice-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  box-shadow: var(--ja-shadow-lg);
  overflow: hidden;
}

.ja-voice-card__header {
  align-items: center;
  background: var(--ja-white);
  border-bottom: 1px solid #edf1f6;
  color: var(--ja-ink);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 18px;
}

.ja-voice-card__header-id {
  align-items: center;
  display: flex;
  gap: 10px;
}

.ja-voice-card__logo {
  align-items: center;
  background: linear-gradient(155deg, var(--ja-blue) 0%, var(--ja-primary-700) 100%);
  border-radius: var(--ja-radius-md);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

/* Plate comes from the background above, so the mark itself is the flat white variant. */
.ja-voice-card__logo img {
  display: block;
  height: 19px;
  width: auto;
}

.ja-voice-card__title {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.3;
}

.ja-voice-card__subtitle {
  color: var(--ja-muted-2);
  display: block;
  font-size: 0.72rem;
}

.ja-voice-card__badge-live {
  align-items: center;
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-success-text);
  display: inline-flex;
  font-family: var(--ja-font-mono);
  font-size: 0.656rem;
  font-weight: 600;
  gap: 6px;
  padding: 4px 9px;
}

.ja-voice-card__badge-live::before {
  animation: ja_pulse 1.8s ease-out infinite;
  background: var(--ja-success);
  border-radius: var(--ja-radius-pill);
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
}

.ja-voice-card--accent-success .ja-voice-card__badge-live {
  color: var(--ja-success-text);
}

.ja-voice-card--accent-success .ja-voice-card__badge-live::before {
  background: var(--ja-success);
}

.ja-voice-card__transcript {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.ja-voice-card__row {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

.ja-voice-card__row--user {
  justify-content: flex-end;
}

.ja-voice-card__avatar {
  background: linear-gradient(155deg, var(--ja-blue) 0%, var(--ja-primary-700) 100%);
  border-radius: var(--ja-radius-pill);
  flex: 0 0 auto;
  height: 26px;
  width: 26px;
}

.ja-voice-card__bubble {
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 84%;
  padding: 12px 14px;
}

.ja-voice-card__bubble--ai {
  background: var(--ja-white);
  border: 1px solid #eceef2;
  border-radius: 4px 15px 15px 15px;
  color: #1e2c3d;
  justify-self: start;
}

.ja-voice-card__bubble--user {
  background: var(--ja-blue);
  border-radius: 15px 4px 15px 15px;
  color: var(--ja-white);
  justify-self: end;
}

.ja-voice-card--accent-success .ja-voice-card__bubble--user {
  background: var(--ja-blue);
}

.ja-voice-card__footer {
  align-items: center;
  border-top: 1px solid var(--ja-line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px 20px;
}

.ja-voice-card__mic {
  align-items: center;
  background: var(--ja-blue);
  border-radius: var(--ja-radius-pill);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  color: var(--ja-white);
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  position: relative;
  width: 40px;
}

.ja-voice-card__mic::after {
  animation: ja_pulse 2.2s ease-out infinite;
  border-radius: var(--ja-radius-pill);
  content: "";
  inset: 0;
  position: absolute;
}

.ja-voice-card__mic svg {
  height: 18px;
  position: relative;
  width: 18px;
  z-index: 1;
}

.ja-voice-card--accent-success .ja-voice-card__mic {
  background: var(--ja-success);
  box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.5);
}

.ja-voice-card__waveform {
  align-items: center;
  display: flex;
  gap: 3px;
  height: 32px;
}

.ja-voice-card__bar {
  animation: ja_bar 1.2s ease-in-out infinite alternate;
  background: var(--ja-blue);
  border-radius: var(--ja-radius-sm);
  transform-origin: bottom;
  width: 4px;
}

.ja-voice-card--accent-success .ja-voice-card__bar {
  background: var(--ja-success);
}

.ja-voice-card__bar:nth-child(1) { height: 14px; animation-delay: 0ms; }
.ja-voice-card__bar:nth-child(2) { height: 26px; animation-delay: 90ms; }
.ja-voice-card__bar:nth-child(3) { height: 18px; animation-delay: 180ms; }
.ja-voice-card__bar:nth-child(4) { height: 30px; animation-delay: 270ms; }
.ja-voice-card__bar:nth-child(5) { height: 16px; animation-delay: 360ms; }
.ja-voice-card__bar:nth-child(6) { height: 24px; animation-delay: 450ms; }
.ja-voice-card__bar:nth-child(7) { height: 12px; animation-delay: 540ms; }
.ja-voice-card__bar:nth-child(8) { height: 22px; animation-delay: 630ms; }
.ja-voice-card__bar:nth-child(9) { height: 10px; animation-delay: 720ms; }
.ja-voice-card__bar:nth-child(10) { height: 28px; animation-delay: 810ms; }
.ja-voice-card__bar:nth-child(11) { height: 15px; animation-delay: 900ms; }
.ja-voice-card__bar:nth-child(12) { height: 20px; animation-delay: 990ms; }

@keyframes ja_pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(37, 99, 235, 0);
  }
}

@keyframes ja_bar {
  0% {
    transform: scaleY(0.3);
  }
  100% {
    transform: scaleY(1);
  }
}

/* ===== 9. SCORE RING (extends existing .ja-score) ===== */

.ja-score-ring {
  --ja-score-ring-band: 12px;
  align-items: center;
  aspect-ratio: 1;
  background: conic-gradient(var(--ja-blue) calc(var(--ja-score-pct, 78) * 1%), var(--ja-line) 0);
  border-radius: var(--ja-radius-pill);
  display: inline-flex;
  justify-content: center;
  padding: var(--ja-score-ring-band);
  position: relative;
  width: 128px;
}

.ja-score-ring::before {
  align-items: center;
  background: var(--ja-white);
  border-radius: var(--ja-radius-pill);
  content: "";
  display: flex;
  inset: var(--ja-score-ring-band);
  position: absolute;
}

.ja-score-ring__value {
  align-items: center;
  color: var(--ja-ink);
  display: flex;
  flex-direction: column;
  font-size: 2rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.ja-score-ring__value span {
  color: var(--ja-muted);
  display: block;
  font-family: var(--ja-font-mono);
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
}

.ja-score-ring--warning .ja-score-ring__value span {
  color: var(--ja-warning-text);
}

.ja-score-ring__label {
  color: var(--ja-muted-2);
  display: block;
  font-family: var(--ja-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 10px;
  text-align: center;
  text-transform: uppercase;
}

.ja-score-ring--success {
  background: conic-gradient(var(--ja-success) calc(var(--ja-score-pct, 78) * 1%), var(--ja-success-tint) 0);
}

.ja-score-ring--warning {
  background: conic-gradient(var(--ja-warning-gold) calc(var(--ja-score-pct, 78) * 1%), var(--ja-line) 0);
}

/* ===== 10. PROBLEM GRID ===== */

.ja-problem-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ja-problem-card {
  background: var(--ja-white);
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  padding: 18px 16px;
}

.ja-problem-card h3 {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.ja-problem-card p {
  color: #5a6b82;
  font-size: 13px;
  line-height: 1.5;
}

.ja-problem-card__icon {
  align-items: center;
  background: var(--ja-rejected-tint);
  border: 1px solid var(--ja-rejected-border);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-danger-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  margin-bottom: 16px;
  width: 22px;
}

.ja-problem-card__icon svg {
  height: 12px;
  width: 12px;
}

@media (max-width: 1040px) {
  .ja-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ja-problem-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 11. RESUME SPLIT WITH FLOATING CALLOUTS ===== */

.ja-resume-split {
  margin: 0 auto;
  max-width: 452px;
  position: relative;
  width: 100%;
}

.ja-resume-split__media {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 0;
  box-shadow: 0 30px 60px -24px rgba(14, 27, 42, 0.42);
  height: 476px;
  overflow: hidden;
  position: relative;
}

.ja-resume-split__media img {
  display: block;
  width: 100%;
}

.ja-resume-split__media::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  bottom: 0;
  content: "";
  height: 96px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.ja-resume-split__callout {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 12px;
  box-shadow: var(--ja-shadow-md);
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  position: absolute;
  z-index: 3;
}

/* Text block only (the <div> holding title+caption). Deliberately scoped to
   "> div >" so it can never leak into the score ring, its inner value span,
   or the check-icon span — those are flex-centered circles and a broad
   descendant "span" rule here previously broke their centering. */
.ja-resume-split__callout > div > strong {
  color: var(--ja-ink);
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.ja-resume-split__callout > div > span {
  color: var(--ja-muted-2);
  display: block;
  font-size: 11px;
  line-height: 1.2;
}

.ja-resume-split__callout-icon {
  align-items: center;
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-success-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.ja-resume-split__callout-icon svg {
  height: 12px;
  width: 12px;
}

.ja-resume-split__callout-dot {
  background: var(--ja-blue);
  border-radius: var(--ja-radius-pill);
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.ja-resume-split__callout--top-right {
  animation: ja_bob 5.5s ease-in-out infinite;
  border-color: var(--ja-success-border);
  box-shadow: 0 16px 34px -14px rgba(14, 124, 83, 0.38);
  padding: 10px 13px;
  right: -14px;
  top: -16px;
}

.ja-resume-split__callout--mid-left {
  animation: ja_bob 6.5s ease-in-out 0.6s infinite;
  border-color: #dbe7ff;
  box-shadow: 0 16px 34px -14px rgba(37, 99, 235, 0.32);
  display: block;
  left: -22px;
  max-width: 208px;
  padding: 11px 14px;
  top: 156px;
}

.ja-resume-split__callout-titlerow {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ja-resume-split__callout--mid-left strong {
  display: inline;
}

.ja-resume-split__callout--mid-left p {
  color: #5a6b82;
  font-size: 11.5px;
  line-height: 1.45;
  margin: 6px 0 0;
}

.ja-resume-split__callout--bottom-right {
  animation: ja_bob 6s ease-in-out 1.2s infinite;
  border-color: var(--ja-line);
  bottom: 26px;
  box-shadow: 0 16px 34px -14px rgba(14, 27, 42, 0.28);
  padding: 11px 13px;
  right: -16px;
}

@keyframes ja_bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Job-board hero panel: scanning outline travels row 1 -> 2 -> 3 -> back to
   row 1, and a blinking text cursor in the illustrative search mock. */
@keyframes ja_scan {
  0%,
  16% {
    transform: translateY(0);
  }
  33%,
  49% {
    transform: translateY(64px);
  }
  66%,
  83% {
    transform: translateY(128px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes ja_blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 1040px) {
  .ja-resume-split__callout--top-right,
  .ja-resume-split__callout--mid-left,
  .ja-resume-split__callout--bottom-right {
    position: static;
    margin-top: 14px;
  }
}

/* ===== 12. ARTICLE CARDS ===== */

.ja-article-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  box-shadow: 0 1px 3px rgba(14, 27, 42, 0.05);
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.ja-article-card:hover {
  box-shadow: var(--ja-shadow-md);
  transform: translateY(-2px);
}

.ja-article-card__cover {
  align-items: flex-end;
  display: flex;
  height: 120px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.ja-article-card__cover--resumes {
  background: linear-gradient(145deg, var(--ja-blue), var(--ja-primary-700));
}

.ja-article-card__cover--cover-letters {
  background: linear-gradient(145deg, var(--ja-blue-2), var(--ja-primary-700));
}

.ja-article-card__cover--interviews {
  background: linear-gradient(145deg, var(--ja-warning-text), var(--ja-gold));
}

.ja-article-card__cover--ats {
  background: linear-gradient(145deg, var(--ja-success), var(--ja-success-text));
}

.ja-article-card__watermark {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--ja-font-serif);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.ja-article-card__body {
  padding: 18px 20px 20px;
}

.ja-article-card__body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.32;
  margin: 8px 0 6px;
}

.ja-article-card__body h3 a {
  color: var(--ja-ink);
  font-weight: 700;
  text-decoration: none;
}

.ja-article-card__body p {
  color: var(--ja-muted);
  font-size: 0.88rem;
}

/* The whole cover + card is already a link (or the card sits in a hub grid
   where the category is shown via the cover watermark), so the redundant
   pill chip above the title is hidden here. */
.ja-article-card__body > .ja-chip {
  display: none;
}

.ja-article-card__meta {
  align-items: center;
  color: var(--ja-muted-2);
  display: flex;
  font-size: 0.78rem;
  font-weight: 600;
  gap: 8px;
  margin-top: 12px;
}

.ja-article-card__avatar {
  background: var(--ja-line);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

.ja-article-card--related {
  background: var(--ja-surface);
  border-radius: var(--ja-radius-lg);
  padding: 20px;
  position: relative;
}

.ja-article-card--related .ja-article-card__body {
  padding: 0;
}

.ja-article-card--related .ja-post-meta {
  margin-top: 0;
}

/* "Read →" (wp:read-more) is stretched to cover the whole card so the
   entire related-post card is one click target, not just the title. */
.ja-article-card--related .ja-article-card__read-link::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* ===== 13. STICKY TABLE OF CONTENTS ===== */

/* The sticky offset lives on .ja-article-layout__rail (the aside), matching
   the reference — the inner .ja-toc must stay static so it isn't a
   redundant nested sticky context. */
.ja-toc {
  position: static;
}

.ja-toc__label {
  color: var(--ja-muted-2);
  display: block;
  font-family: var(--ja-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.ja-toc__link {
  border-left: 2px solid var(--ja-line);
  color: var(--ja-muted);
  display: block;
  font-size: 0.86rem;
  padding: 7px 0 7px 14px;
  text-decoration: none;
}

.ja-toc__link:hover {
  color: var(--ja-blue);
}

.ja-toc__link--active {
  border-left-color: var(--ja-blue);
  color: var(--ja-ink);
  font-weight: 700;
}

/* ===== 14. TIP CALLOUT (extends .ja-answer) ===== */

.ja-callout--tip {
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-left: 4px solid var(--ja-blue);
  border-radius: 10px;
  padding: 18px 20px;
}

.ja-callout--tip strong {
  color: var(--ja-primary-700);
}

/* ===== 15. KEY TAKEAWAYS ===== */

.ja-takeaways {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-lg);
  padding: 22px 24px;
}

.ja-takeaways__item {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.ja-takeaways__item + .ja-takeaways__item {
  margin-top: 12px;
}

.ja-takeaways__item::before {
  color: var(--ja-success);
  content: "✓";
  flex: 0 0 auto;
  font-weight: 700;
}

/* ===== 16. BEFORE/AFTER TABLE (modifier on .ja-table / .ja-compare-table) ===== */

.ja-table--before-after th.ja-col--before,
.ja-compare-table.ja-table--before-after th.ja-col--before {
  background: var(--ja-rejected-tint);
  color: var(--ja-rejected-text);
}

.ja-table--before-after th.ja-col--after,
.ja-compare-table.ja-table--before-after th.ja-col--after {
  background: var(--ja-success-tint);
  color: var(--ja-success-text);
}

.ja-table--before-after td.ja-col--before {
  background: var(--ja-rejected-tint);
}

.ja-table--before-after td.ja-col--after {
  background: var(--ja-success-tint);
}

/* ===== 17. CREDIBILITY PILLARS ===== */

.ja-credibility {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ja-credibility__pillar {
  background: #f7fafd;
  border: 1px solid #e7ecf3;
  border-radius: 13px;
  padding: 26px;
  text-align: center;
}

.ja-credibility__pillar h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.ja-credibility__pillar p {
  color: var(--ja-muted);
  font-size: 0.9rem;
}

.ja-credibility__icon {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: 10px;
  color: var(--ja-blue);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  margin: 0 auto 16px;
  width: 40px;
}

.ja-credibility__icon svg {
  height: 26px;
  width: 26px;
}

.ja-credibility__icon--blue {
  background: #eef4ff;
  border-color: #dbe7ff;
  color: #1b4fd1;
}

.ja-credibility__icon--green {
  background: #e7f7f0;
  border-color: #c9ebdc;
  color: #0e7c53;
}

.ja-credibility__icon--gold {
  background: #fdf3dc;
  border-color: #f0dba6;
  color: #9a6b12;
}

@media (max-width: 1040px) {
  .ja-credibility {
    grid-template-columns: 1fr;
  }
}

/* ===== 18. FEATURED POST (resources hub) ===== */

.ja-featured-post {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(14, 27, 42, 0.2);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
}

.ja-featured-post__cover {
  background: linear-gradient(135deg, #16306b 0%, var(--ja-blue) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  text-decoration: none;
  padding: 40px;
  position: relative;
}

/* Large serif headline of the actual featured article, bottom-aligned in the
   cover panel (replaces the old category-word watermark treatment). */
.ja-featured-post__headline {
  color: var(--ja-white);
  font-family: var(--ja-font-serif);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.12;
  position: relative;
}

.ja-featured-post__badge {
  color: #bfd3ff;
  display: inline-flex;
  font-family: var(--ja-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ja-featured-post__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
}

.ja-featured-post__body .ja-chip {
  display: none;
}

.ja-featured-post__body h2 {
  font-family: var(--ja-font);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 14px 0 12px;
}

.ja-featured-post__body h2 a {
  color: inherit;
  text-decoration: none;
}

.ja-featured-post__body p {
  color: var(--ja-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.ja-featured-post__meta {
  align-items: center;
  color: var(--ja-muted-2);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 8px;
  margin-top: 20px;
}

.ja-featured-post__avatar {
  background: var(--ja-line);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 26px;
  width: 26px;
}

.ja-featured-post__link {
  color: var(--ja-primary-700);
  font-weight: 700;
  margin-top: 22px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .ja-featured-post {
    grid-template-columns: 1fr;
  }

  .ja-featured-post__cover {
    min-height: 220px;
  }

  .ja-featured-post__body {
    padding: 32px 28px;
  }
}

/* Resources hub's article grid uses a wider 24px gap than the shared
   .ja-grid-3 default (18px, used by other marketing pages) -- scoped to the
   [data-resources-filters] wrapper so other pages are unaffected. */
[data-resources-filters] .ja-grid-3 {
  gap: 24px;
}

/* ===== 19. NEWSLETTER CTA (resources hub) ===== */

.ja-newsletter-cta {
  align-items: center;
  background: var(--ja-ink);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 40px;
  padding: 40px;
}

.ja-newsletter-cta__copy h2 {
  color: var(--ja-white);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ja-newsletter-cta__copy p {
  color: #aebed2;
  font-size: 0.94rem;
  margin-top: 8px;
}

.ja-newsletter-cta__form {
  background: #16263a;
  border: 1px solid #21364f;
  border-radius: 11px;
  display: flex;
  gap: 10px;
  padding: 8px;
}

.ja-newsletter-cta__input {
  background: transparent;
  border: 0;
  color: var(--ja-white);
  font-size: 0.906rem;
  min-width: 200px;
  padding: 8px 10px;
}

.ja-newsletter-cta__input::placeholder {
  color: #7c8ba3;
}

.ja-newsletter-cta__input:focus {
  outline: none;
}

.ja-newsletter-cta__button {
  background: var(--ja-blue);
  border: 1px solid #1b4fd1;
  border-radius: 8px;
  color: var(--ja-white);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 11px 18px;
  white-space: nowrap;
}

.ja-newsletter-cta__button:hover {
  background: var(--ja-primary-700);
}

@media (max-width: 640px) {
  .ja-newsletter-cta__form {
    width: 100%;
  }

  .ja-newsletter-cta__input {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ===== RESPONSIVE: new systems ===== */

@media (max-width: 1080px) {
  .ja-nav__panel {
    display: none !important;
  }
}

@media (max-width: 620px) {
  /* The coverflow card was a fixed 384px — wider than a phone, so its left/right
     edges were clipped by the carousel box and buried under the 160px fade
     gradients. Size it to the viewport, shrink the fades, and match the height
     to the (portrait) card so nothing is cut off. */
  .ja-carousel {
    height: calc(min(384px, 84vw) * 1.42 + 20px);
  }

  .ja-carousel__card {
    width: min(384px, 84vw);
  }

  .ja-carousel::before,
  .ja-carousel::after {
    width: 30px;
  }

  .ja-carousel__arrow {
    height: 40px;
    width: 40px;
  }

  .ja-voice-card__bubble {
    max-width: 92%;
  }

  .ja-featured-post__headline {
    font-size: 1.9rem;
  }

  .ja-featured-post__body {
    padding: 26px 22px;
  }
}

/* ===== 18. SINGLE BLOG POST LAYOUT (templates/single.html) ===== */

/* Blog-post hero: plain white background, no grid texture, left-aligned,
   compact (no bottom padding/border — the article body flows directly
   after it), distinct from the centered archive/feature-page hero. */
.ja-page-hero--post {
  background: var(--ja-white);
  border-bottom: 0;
  padding: 48px 28px 0;
  text-align: left;
}

.ja-page-hero--post .ja-content {
  max-width: 720px;
  padding-inline: 28px;
}

.ja-page-hero--post .ja-breadcrumb ol {
  justify-content: flex-start;
}

.ja-page-hero--post h1 {
  font-size: 2.75rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-inline: 0;
  max-width: none;
  text-align: left;
}

.ja-post-hero__eyebrow {
  align-items: center;
  color: var(--ja-primary-700);
  display: inline-flex;
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  gap: 10px;
  letter-spacing: 0.1em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.ja-post-hero__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.ja-post-hero__eyebrow a:hover {
  text-decoration: underline;
}

.ja-post-dek {
  color: var(--ja-text);
  font-family: var(--ja-font-serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  margin-inline: 0;
  margin-top: 18px;
  max-width: 720px;
  text-align: left;
}

/* Stacked two-line byline: avatar spans both rows in column 1; the author
   name (a plain, unclassed <p> sibling from the byline group block) sits on
   its own row, with the separator + post-date sitting side by side on a
   second, muted row directly beneath it -- instead of one flat inline row. */
.ja-byline {
  align-items: center;
  border-bottom: 1px solid var(--ja-line);
  color: var(--ja-muted);
  column-gap: 10px;
  display: grid;
  font-size: 0.88rem;
  font-weight: 700;
  grid-template-columns: auto auto auto 1fr auto;
  grid-template-rows: auto auto;
  margin-top: 24px;
  padding-bottom: 28px;
  row-gap: 2px;
}

.ja-byline__avatar {
  background: var(--ja-line);
  border-radius: var(--ja-radius-pill);
  grid-column: 1;
  grid-row: 1 / 3;
  height: 40px;
  width: 40px;
}

.ja-byline > p:not([class]) {
  color: var(--ja-ink);
  font-size: 0.875rem;
  font-weight: 700;
  grid-column: 2 / 5;
  grid-row: 1;
  margin: 0;
}

.ja-byline__sep {
  color: var(--ja-muted-2);
  font-weight: 600;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.ja-byline .wp-block-post-date {
  color: var(--ja-muted-2);
  font-size: 0.8125rem;
  font-weight: 600;
  grid-column: 3;
  grid-row: 2;
}

.ja-byline__badge {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: 6px;
  color: var(--ja-success-text);
  font-family: var(--ja-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 5px 9px;
}

.ja-byline.ja-byline .ja-byline__badge {
  align-self: center;
  grid-column: 5;
  grid-row: 1 / 3;
  margin-left: auto;
}

/* Two-column article layout: sticky TOC rail + serif article column */

.ja-article-layout {
  align-items: start;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: auto;
  max-width: 1040px;
  padding-inline: 24px;
}

.ja-article-layout:has(.ja-toc__link) {
  grid-template-columns: 200px minmax(0, 1fr);
}

.ja-article-layout__rail {
  display: none;
}

.ja-article-layout__rail:has(.ja-toc__link) {
  display: block;
  position: sticky;
  top: 92px;
}

.ja-article-layout__main {
  min-width: 0;
}

.ja-article-layout__main .ja-blog-post {
  max-width: 680px;
}

/* Serif article body — the ONE place in the theme that uses --ja-font-serif for body copy */

.ja-blog-post {
  color: var(--ja-ink);
  font-family: var(--ja-font-serif);
  font-size: 1.155rem;
  line-height: 1.75;
  max-width: none;
}

.ja-blog-post .ja-lede {
  color: var(--ja-text);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.6;
}

.ja-blog-post h2,
.ja-blog-post h3 {
  font-family: var(--ja-font);
  scroll-margin-top: 110px;
}

/* In-article headings (templates/single.html's "wp:post-content" block now
   carries className "ja-blog-post", so both .ja-blog-post h2/h3 above and
   the more specific .wp-block-post-content selectors below apply) read at a
   smaller, more restrained scale than page-hero-level headings sitewide. */
.ja-article-layout__main .wp-block-post-content h2 {
  font-size: 1.6875rem;
  letter-spacing: -0.02em;
  margin-top: 36px;
  scroll-margin-top: 110px;
}

.ja-article-layout__main .wp-block-post-content h3 {
  font-size: 1.2rem;
  scroll-margin-top: 110px;
}

/* CTA band inside the article body: full-bleed centered single column,
   distinct from the generic two-column .ja-section--ink/.ja-cta component
   used on marketing pages. */
.ja-cta-blog {
  background: var(--ja-ink);
  margin-top: 28px;
  padding: 56px 28px;
  text-align: center;
}

.ja-cta-blog__inner {
  margin-inline: auto;
  max-width: 760px;
}

.ja-cta-blog__inner h2 {
  color: var(--ja-white);
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.ja-cta-blog__inner .ja-button--primary {
  border-color: var(--ja-blue-2);
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.8);
  font-weight: 700;
  margin-top: 22px;
  padding: 14px 26px;
}

@media (max-width: 900px) {
  .ja-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ja-article-layout__rail {
    display: none !important;
  }
}

/* Related posts (end of article) */

.ja-related-posts {
  border-top: 1px solid var(--ja-line);
  padding-block: 56px;
}

.ja-related-posts h2 {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

.ja-related-posts__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

/* The WP core query-loop wrapper (<ul class="wp-block-post-template">) sits
   between .ja-related-posts__grid and the .ja-article-card items; without
   `display:contents` it becomes the sole grid item and the cards stack
   inside it as a plain list instead of becoming grid cells. */
.ja-related-posts__grid .wp-block-post-template {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ja-related-posts__grid .ja-article-card--related {
  border-radius: 12px;
}

.ja-article-card__eyebrow {
  color: var(--ja-primary-700);
  display: block;
  font-family: var(--ja-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ja-article-card__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.ja-article-card__read-link {
  color: var(--ja-primary-700);
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .ja-related-posts__grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE-PAGE REDESIGN — additive components (ats-resume-checker,
   resume-templates, job-board, job-tracker, ai-interview-prep)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Upload dropzone (ATS checker hero mock) ── */

.ja-upload-drop {
  align-items: center;
  background: #f4f8ff;
  border: 1.5px dashed #b9cffa;
  border-radius: var(--ja-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px;
  text-align: center;
}

.ja-upload-drop__icon {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-blue);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 10px;
  width: 44px;
}

.ja-upload-drop__icon svg {
  height: 22px;
  width: 22px;
}

.ja-upload-drop strong {
  color: var(--ja-ink);
  font-size: 1.02rem;
}

.ja-upload-drop__accent {
  color: var(--ja-blue);
}

.ja-upload-drop span:not(.ja-upload-drop__icon) {
  color: var(--ja-muted-2);
  font-size: 0.82rem;
}

/* ── Score report card (floating, pairs with .ja-score-ring) ── */

.ja-report-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-xl);
  box-shadow: var(--ja-shadow-lg);
  padding: 26px;
}

.ja-report-card__head {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.ja-report-card__metrics {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.ja-report-metric {
  display: grid;
  gap: 6px;
}

.ja-report-metric__row {
  align-items: center;
  color: var(--ja-muted);
  display: flex;
  font-size: 0.82rem;
  font-weight: 600;
  justify-content: space-between;
}

.ja-report-metric__row span {
  color: #2a3a4f;
  font-family: var(--ja-font-mono);
  font-weight: 600;
}

.ja-report-metric__bar {
  background: var(--ja-line);
  border-radius: var(--ja-radius-pill);
  height: 6px;
  overflow: hidden;
}

.ja-report-metric__bar-fill {
  border-radius: var(--ja-radius-pill);
  display: block;
  height: 100%;
}

.ja-report-metric__bar-fill--success {
  background: var(--ja-success);
}

.ja-report-metric__bar-fill--warning {
  background: var(--ja-warning-gold);
}

.ja-report-card__fixes {
  border-top: 1px solid var(--ja-line);
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
}

.ja-report-card__fixes-label {
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ja-fix-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.ja-fix-row span {
  color: var(--ja-text);
  font-size: 0.86rem;
}

.ja-fix-row__icon {
  align-items: center;
  border-radius: var(--ja-radius-pill);
  border: 1px solid transparent;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.ja-fix-row__icon--warning {
  background: var(--ja-warning-tint);
  border-color: var(--ja-warning-border);
  color: var(--ja-warning-text);
}

.ja-fix-row__icon--success {
  background: var(--ja-success-tint);
  border-color: var(--ja-success-border);
  color: var(--ja-success-text);
}

/* ── Numbered check grid (e.g. "8 things we check") ── */

.ja-numbered-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 36px;
}

.ja-numbered-card {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 12px;
  padding: 20px;
}

.ja-numbered-card__index {
  color: var(--ja-blue);
  display: block;
  font-family: var(--ja-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.ja-numbered-card h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 10px;
}

.ja-numbered-card p {
  color: var(--ja-muted);
  font-size: 0.86rem;
}

@media (max-width: 1040px) {
  .ja-numbered-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ja-numbered-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Results search bar (job board results preview): white rounded bar with
   an icon + placeholder input on the left and a live results count on the
   right, sitting directly above the filter rail + job-card grid. ── */

.ja-results-search {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid #dde5ee;
  border-radius: 12px;
  box-shadow: 0 8px 22px -16px rgba(14, 27, 42, 0.2);
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 18px;
}

.ja-results-search__icon {
  align-items: center;
  color: var(--ja-muted-2);
  display: inline-flex;
  flex: 0 0 auto;
}

.ja-results-search__icon svg {
  height: 18px;
  width: 18px;
}

.ja-results-search__placeholder {
  color: var(--ja-muted-2);
  flex: 1;
  font-size: 0.92rem;
}

.ja-results-search__count {
  color: var(--ja-muted-2);
  flex: 0 0 auto;
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
}

/* ── Sticky filter rail (job board results preview) ── */

.ja-filter-rail {
  background: var(--ja-white);
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  padding: 20px;
  position: sticky;
  top: 88px;
}

.ja-filter-rail h3 {
  color: #8a98ac;
  font-family: var(--ja-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.ja-filter-rail__group {
  display: grid;
  gap: 10px;
}

.ja-filter-rail__group + .ja-filter-rail__group {
  border-top: 1px solid var(--ja-line);
  margin-top: 18px;
  padding-top: 18px;
}

.ja-filter-rail__option {
  align-items: center;
  color: var(--ja-text);
  display: flex;
  font-size: 0.86rem;
  gap: 9px;
}

.ja-filter-rail__option:has(input:checked) {
  color: var(--ja-ink);
  font-weight: 600;
}

.ja-filter-rail__option input {
  accent-color: var(--ja-blue);
  height: 15px;
  width: 15px;
}

/* Custom square checkbox (Work mode group) */
.ja-filter-rail__option--checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ja-white);
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  display: inline-block;
  flex: 0 0 auto;
  height: 17px;
  margin: 0;
  position: relative;
  width: 17px;
}

.ja-filter-rail__option--checkbox input[type="checkbox"]:checked {
  background: var(--ja-blue);
  border-color: var(--ja-primary-700);
}

.ja-filter-rail__option--checkbox input[type="checkbox"]:checked::after {
  border: solid var(--ja-white);
  border-width: 0 2px 2px 0;
  content: "";
  height: 8px;
  left: 5px;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  width: 4px;
}

/* Custom round radio (Date posted group) */
.ja-filter-rail__option--radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ja-white);
  border: 1px solid #cbd5e1;
  border-radius: var(--ja-radius-pill);
  display: inline-block;
  flex: 0 0 auto;
  height: 17px;
  margin: 0;
  width: 17px;
}

.ja-filter-rail__option--radio input[type="radio"]:checked {
  border: 5px solid var(--ja-blue);
}

/* Pill-button chips (Minimum pay group) — replaces checkbox rows entirely */
.ja-filter-rail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ja-filter-rail__pill {
  align-items: center;
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 10px;
}

.ja-filter-rail__pill--active {
  background: var(--ja-blue);
  border-color: var(--ja-primary-700);
  color: var(--ja-white);
}

/* ── Browse-by link columns (job board) ── */

.ja-browse-by {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ja-browse-by__col h3 {
  color: var(--ja-primary-700);
  font-family: var(--ja-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.ja-browse-by__col ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ja-browse-by__col a {
  color: var(--ja-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.ja-browse-by__col a:hover {
  color: var(--ja-blue);
}

@media (max-width: 1040px) {
  .ja-browse-by {
    grid-template-columns: 1fr;
  }
}

/* ── Role preset chip row + role-preset variant of filter chip (interview prep hero) ── */

.ja-role-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

/* ── Success-accent CTA band (ai-interview-prep dark CTA) ── */

.ja-bg--dark .ja-button--success {
  background: var(--ja-success);
  border-color: #0c7e58;
  box-shadow: 0 14px 30px -12px rgba(14, 159, 110, 0.7);
  color: var(--ja-white);
  font-weight: 700;
  padding: 15px 28px;
}

.ja-bg--dark .ja-button--success:hover {
  background: var(--ja-success-text);
  color: var(--ja-white);
}

/* ── Primary CTA glow on dark sections (ATS checker / job-tracker closing CTA) ── */

.ja-bg--dark .ja-button--primary {
  border-color: var(--ja-blue-2);
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.8);
}

/* ATS checker closing CTA button: roomier, slightly less bold than the
   sitewide default primary button. */
.ja-feature-page:has(.ja-upload-drop) .ja-bg--dark .ja-cta-actions .ja-button--primary {
  font-weight: 700;
  padding: 15px 28px;
}

@media (max-width: 620px) {
  .ja-report-card {
    padding: 20px;
  }

  .ja-upload-drop {
    padding: 30px 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE-PAGE DESIGN-FIDELITY FIXES (2026-07)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ATS checker: split 2-col hero (copy+dropzone left, report card right) ── */

.ja-page-hero--split {
  background: linear-gradient(180deg, #f7faff, #ffffff);
  border-bottom: 1px solid var(--ja-line);
  padding: 64px 0 56px;
  text-align: left;
}

.ja-page-hero--split .ja-hero__grid {
  align-items: center;
}

.ja-page-hero--split .ja-hero__copy {
  max-width: 560px;
}

.ja-page-hero--split h1,
.ja-page-hero--split h1.ja-display--md {
  font-size: 3.125rem;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-inline: 0;
  max-width: 100%;
  text-align: left;
}

.ja-page-hero--split .ja-lede {
  margin-inline: 0;
  max-width: 500px;
  text-align: left;
}

.ja-page-hero--split .ja-kicker {
  justify-content: flex-start;
}

.ja-page-hero--split .ja-upload-drop {
  margin-top: 26px;
}

/* Trust row directly under the dropzone */
.ja-page-hero--split .ja-trust-row {
  margin-top: 18px;
}

.ja-page-hero--split .ja-trust-row .ja-dot {
  background: var(--ja-success-text);
  border: 0;
  height: 6px;
  width: 6px;
}

.ja-page-hero--split .ja-trust-row .ja-dot::before {
  content: none;
}

.ja-page-hero--split .ja-trust-row span {
  color: #2a3a4f;
  font-weight: 600;
}

/* ── Report-card filename + SAMPLE tag header row ── */

.ja-report-card__file {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ja-report-card__filename {
  align-items: center;
  color: #5a6b82;
  display: inline-flex;
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  gap: 8px;
}

.ja-report-card__filename svg {
  color: var(--ja-muted-2);
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.ja-report-card__sample-tag {
  background: var(--ja-warning-tint);
  border: 1px solid var(--ja-warning-border);
  border-radius: 5px;
  color: var(--ja-warning-text);
  font-family: var(--ja-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 3px 8px;
  text-transform: uppercase;
}

/* Ring-left / metrics-right row layout (replaces the centered stacked head) */
.ja-report-card__head--row {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 22px;
  text-align: left;
}

.ja-report-card__head--row .ja-score-ring {
  flex: 0 0 auto;
  width: 116px;
}

.ja-report-card__status {
  color: var(--ja-ink);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.ja-report-card__metrics--flex {
  flex: 1 1 auto;
  margin-top: 0;
}

/* Full-width in-card CTA */
.ja-report-card__cta {
  background: var(--ja-blue);
  border: 1px solid var(--ja-primary-700);
  border-radius: var(--ja-radius-md);
  color: var(--ja-white);
  display: block;
  font-size: 0.906rem;
  font-weight: 700;
  margin-top: 22px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
}

.ja-report-card__cta:hover {
  background: var(--ja-primary-700);
  color: var(--ja-white);
}

/* ── Centered 3-column numbered steps (ATS checker "3 steps") ── */

.ja-steps-centered {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
}

.ja-steps-centered__item {
  text-align: center;
}

.ja-steps-centered__badge {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-pill);
  color: var(--ja-primary-700);
  display: inline-flex;
  font-family: var(--ja-font-mono);
  font-size: 15px;
  font-weight: 600;
  height: 46px;
  justify-content: center;
  margin-bottom: 16px;
  width: 46px;
}

.ja-steps-centered__item h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.ja-steps-centered__item p {
  color: var(--ja-muted);
  font-size: 0.92rem;
  margin-inline: auto;
  max-width: 280px;
}

@media (max-width: 900px) {
  .ja-steps-centered {
    grid-template-columns: 1fr;
  }
}

/* ── Resume templates: card ATS badge, tag pills, CTA row ── */

.ja-template-card__title-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: 6px 0 4px;
}

.ja-template-card__title-row h3 {
  margin: 0;
}

.ja-template-card__ats-badge {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: 5px;
  color: var(--ja-success-text);
  font-family: var(--ja-font-mono);
  font-size: 0.594rem;
  font-weight: 600;
  padding: 2px 7px;
}

.ja-template-card__body .ja-template-card__subtitle {
  color: var(--ja-muted-2);
  font-size: 0.8125rem;
  margin-bottom: 10px;
}

.ja-template-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ja-template-card__tags .ja-tag {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: 6px;
  color: #2a3a4f;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 4px 9px;
}

.ja-template-card__actions {
  display: flex;
  gap: 10px;
}

.ja-template-card__actions .ja-button {
  border-radius: 8px;
  min-height: 0;
  padding: 10px;
}

.ja-template-card__actions .ja-button--primary {
  flex: 1 1 auto;
  font-size: 0.844rem;
  font-weight: 700;
}

.ja-template-card__actions .ja-button--secondary {
  color: #16304e;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 10px 16px;
}

/* ── Resume templates: count/label summary row above the gallery ── */

.ja-gallery-meta {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 24px 0 20px;
}

.ja-gallery-meta__count {
  color: #5a6b82;
  font-size: 0.875rem;
}

.ja-gallery-meta__count strong {
  color: var(--ja-ink);
  font-weight: 800;
}

.ja-gallery-meta__label {
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
}

/* ── Job board: filter-rail title + divider ── */

.ja-filter-rail__title {
  color: var(--ja-ink);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.ja-filter-rail__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.ja-filter-rail__clear {
  background: none;
  border: 0;
  color: var(--ja-blue);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0;
}

.ja-filter-rail__divider {
  background: var(--ja-line);
  height: 1px;
  margin: 16px 0;
}

/* ── Job board: browse-by row divider + arrow glyph ── */

.ja-browse-by__col a {
  align-items: center;
  border-bottom: 1px solid var(--ja-line);
  display: flex;
  justify-content: space-between;
  padding: 11px 2px;
}

.ja-browse-by__arrow {
  color: #c2ccd8;
  transition: color 150ms ease;
}

.ja-browse-by__col a:hover .ja-browse-by__arrow {
  color: var(--ja-blue);
}

/* ── Job board: skill tag pills + Apply button on job cards ── */

.ja-job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ja-job-card__tags .ja-tag {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: 6px;
  color: #2a3a4f;
  font-size: 0.71875rem;
  font-weight: 600;
  padding: 4px 9px;
}

.ja-job-card__aside {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
}

.ja-job-card__aside .ja-button--primary {
  font-size: 0.844rem;
  font-weight: 700;
  min-height: 0;
  padding: 9px 18px;
}

.ja-job-card__aside-pay {
  color: #16304e;
  font-family: var(--ja-font-mono);
  font-size: 13px;
  font-weight: 600;
}

/* ── Job board: "posted X ago" freshness badge ── */

.ja-job-fresh {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: 999px;
  color: var(--ja-success-text);
  font-family: var(--ja-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  margin-left: 8px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ── Job board: two-column hero with search-bar mock + illustration panel ── */

.ja-jobboard-hero {
  align-items: center;
  display: grid;
  gap: 52px;
  grid-template-columns: 1fr 1fr;
}

.ja-jobboard-hero__copy h1,
.ja-jobboard-hero__copy .ja-lede,
.ja-jobboard-hero__copy .ja-kicker {
  margin-inline: 0;
  text-align: left;
}

.ja-jobboard-hero__copy h1,
.ja-page-hero .ja-jobboard-hero__copy h1 {
  font-size: 3.25rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: none;
}

/* 6 children (icon, query, divider, icon, location, button) — the column count
   must match or the Search button wraps to a second grid row. */
.ja-jobboard-hero__searchbar {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid #dde5ee;
  border-radius: 13px;
  box-shadow: 0 14px 30px -16px rgba(14, 27, 42, 0.28);
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1.3fr) 1px auto minmax(0, 1fr) auto;
  margin-top: 28px;
  padding: 10px;
}

.ja-jobboard-hero__searchbar .ja-job-search-bar__field {
  color: #16304e;
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  padding-block: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ja-jobboard-hero__searchbar .ja-job-search-bar__field:last-of-type {
  color: var(--ja-muted);
  font-weight: 400;
}

.ja-jobboard-hero__searchbar .ja-job-search-bar__divider {
  background: #edf1f6;
}

.ja-jobboard-hero__searchbar .ja-button {
  border-radius: 9px;
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 12px 24px;
}

/* ── Job board: results-list job card (denser radius/padding + subtle
   shadow than the generic .ja-card component) ── */
.ja-job-results-card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 27, 42, 0.04);
  padding: 18px 20px;
}

.ja-jobboard-hero__popular {
  align-items: center;
  color: var(--ja-muted-2);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  gap: 8px;
  margin-top: 16px;
}

.ja-jobboard-hero__popular a {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: 999px;
  color: var(--ja-text);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 5px 12px;
  text-decoration: none;
}

.ja-jobboard-hero__panel {
  animation: ja_bob 6s ease-in-out infinite;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-xl);
  box-shadow: 0 28px 60px -24px rgba(14, 27, 42, 0.32);
  padding: 20px;
}

/* Reference-exact job-board hero SVG animations: blinking search cursor and
   the scanner outline that steps down the three result rows. */
.ja-jb-cursor {
  animation: ja_blink 1s step-end infinite;
}

.ja-jb-scan {
  animation: ja_scan 4.8s ease-in-out infinite;
}

/* Illustrative preview mock search row inside the hero panel: icon,
   blinking text cursor, and a primary Search button. */
.ja-jobboard-hero__panel-search {
  align-items: center;
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: 9px;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 9px 10px;
}

.ja-jobboard-hero__panel-search svg {
  color: var(--ja-muted-2);
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.ja-jobboard-hero__panel-search span {
  color: var(--ja-ink);
  flex: 1;
  font-size: 0.86rem;
  font-weight: 600;
}

.ja-jobboard-hero__panel-search-cursor {
  animation: ja_blink 1s step-end infinite;
  background: var(--ja-blue);
  display: inline-block;
  height: 14px;
  margin-left: 2px;
  vertical-align: middle;
  width: 1.5px;
}

.ja-jobboard-hero__panel-search button {
  background: var(--ja-blue);
  border: 0;
  border-radius: 6px;
  color: var(--ja-white);
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 12px;
}

.ja-jobboard-hero__panel-matches {
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Scanning outline that travels down the illustrative job rows, one row at
   a time, to suggest the board actively ranking results by fit. */
.ja-jobboard-hero__panel-rows {
  position: relative;
}

.ja-jobboard-hero__panel-scan {
  animation: ja_scan 4.8s ease-in-out infinite;
  border: 1.5px solid var(--ja-blue);
  border-radius: var(--ja-radius-lg);
  height: 64px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

@media (max-width: 1040px) {
  .ja-jobboard-hero {
    grid-template-columns: 1fr;
  }
}

/* ── Job tracker: kanban header row ── */

.ja-kanban-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ja-kanban-header__left {
  align-items: center;
  display: flex;
  gap: 10px;
}

.ja-kanban-header__title {
  color: var(--ja-ink);
  font-size: 0.9375rem;
  font-weight: 800;
}

.ja-kanban-header__count {
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 6px;
  color: var(--ja-muted-2);
  font-family: var(--ja-font-mono);
  font-size: 0.6875rem;
  padding: 3px 8px;
}

.ja-kanban-header__add {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid #dde5ee;
  border-radius: 8px;
  color: #2a3a4f;
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  gap: 7px;
  padding: 7px 12px;
  text-decoration: none;
}

/* ── Job tracker: card company-initials avatar ── */

.ja-kanban__card-title-row {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.ja-kanban__card-title-row h4 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ja-kanban__card-logo {
  align-items: center;
  background: var(--ja-frost);
  border: 1px solid #dbe7ff;
  border-radius: 6px;
  color: var(--ja-primary-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.5625rem;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}

/* ── Job tracker: card status meta pill (icon + text) ── */

.ja-kanban__card-meta {
  border-radius: 6px;
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-top: 9px;
  padding: 3px 8px;
}

.ja-kanban__card-meta--saved {
  background: var(--ja-surface);
  color: var(--ja-muted);
}

.ja-kanban__card-meta--applied {
  background: var(--ja-frost);
  color: var(--ja-primary-700);
}

.ja-kanban__card-meta--interviewing {
  background: var(--ja-warning-tint);
  color: var(--ja-warning-text);
}

.ja-kanban__card-meta--offer {
  background: var(--ja-success-tint);
  color: var(--ja-success-text);
}

/* ── Job tracker: feature-grid icon badges (reuses .ja-icon visuals so the
   2x3 grid of 6 cards reads consistently) ── */

.ja-feature-grid--three .ja-feature .ja-icon {
  margin-bottom: 14px;
}

.ja-feature-page:has(.ja-kanban-header) .ja-feature-grid--three .ja-feature {
  background: #f7fafd;
  border-color: #e7ecf3;
  border-radius: 13px;
  padding: 24px;
}

/* ── AI interview prep: split 2-col hero (copy+job-paste card left, voice mock right) ── */

.ja-page-hero--interview-split .ja-hero__grid {
  align-items: start;
  grid-template-columns: 1fr 1.02fr;
}

.ja-page-hero--interview-split .ja-hero__copy {
  max-width: 500px;
}

.ja-page-hero--interview-split h1,
.ja-page-hero--interview-split .ja-lede,
.ja-page-hero--interview-split .ja-kicker {
  margin-inline: 0;
  text-align: left;
}

.ja-page-hero--interview-split .ja-voice-card {
  animation: ja_bob 7s ease-in-out infinite;
}

.ja-jd-card {
  background: var(--ja-white);
  border: 1px solid #dde5ee;
  border-radius: var(--ja-radius-lg);
  box-shadow: 0 14px 30px -16px rgba(14, 27, 42, 0.26);
  margin-top: 26px;
  padding: 14px;
}

.ja-jd-card__label {
  color: var(--ja-muted-2);
  display: block;
  font-family: var(--ja-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.ja-jd-card textarea {
  border: none;
  color: var(--ja-muted);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  padding: 0;
  resize: none;
  width: 100%;
}

.ja-jd-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ja-jd-card__roles button {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: 999px;
  color: var(--ja-text);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 12px;
}

.ja-jd-card__roles button.is-active {
  background: var(--ja-ink);
  border-color: var(--ja-ink);
  color: var(--ja-white);
}

.ja-jd-card__cta {
  background: var(--ja-success);
  border: 0;
  border-radius: var(--ja-radius-md);
  color: var(--ja-white);
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 13px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.ja-jd-card__cta:hover {
  background: var(--ja-success-text);
  color: var(--ja-white);
}

/* ── AI interview prep: voice card footer mic-first order + Listening label ── */

.ja-voice-card__footer--reordered {
  justify-content: flex-start;
}

.ja-voice-card__footer--reordered .ja-voice-card__waveform {
  margin-left: 4px;
}

.ja-voice-card__listening {
  color: var(--ja-success-text);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
}

/* ── Mono-style eyebrow kicker variant (matches .ja-browse-by__col h3 /
   .ja-numbered-card__index treatment): used above section H2s where the
   reference shows a small blue mono-font uppercase label instead of the
   default sans-serif dash-prefixed .ja-kicker. ── */

.ja-kicker--mono {
  color: var(--ja-primary-700);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ja-kicker--mono::before {
  display: none;
}

/* Per-section color modifiers for .ja-kicker--mono, matching the reference's
   distinct eyebrow color per section topic (problem/red, workflow/blue,
   resume-tools/green, extension/amber). Stack with .ja-kicker--mono. */

.ja-kicker--red {
  color: var(--ja-danger-text);
}

.ja-kicker--blue {
  color: var(--ja-primary-700);
}

.ja-kicker--green {
  color: var(--ja-success-text);
}

.ja-kicker--amber {
  color: var(--ja-warning-text);
}


/* ==========================================================================
   HOMEPAGE DESIGN-FIDELITY FIXES (2026-07)
   ========================================================================== */

/* -- Homepage job-search preview: real search bar + filter rail + job cards -- */

.ja-job-search-bar {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid #dde5ee;
  border-radius: var(--ja-radius-md);
  box-shadow: 0 8px 22px -14px rgba(14, 27, 42, 0.2);
  display: grid;
  gap: 10px;
  /* keyword gets the room; location is a compact selector (was 1fr/1fr, which
     left the location field a near-empty 450px box). */
  grid-template-columns: auto minmax(0, 1.5fr) 1px minmax(0, 1fr) auto;
  padding: 10px;
}

.ja-job-search-bar__icon {
  align-items: center;
  color: var(--ja-muted-2);
  display: inline-flex;
  padding-left: 8px;
}

.ja-job-search-bar__icon svg {
  height: 18px;
  width: 18px;
}

.ja-job-search-bar__field {
  color: var(--ja-ink);
  font-size: 0.94rem;
  font-weight: 600;
  padding-block: 6px;
}

.ja-job-search-bar__input,
.ja-job-search-bar__select {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--ja-font);
  outline: none;
  width: 100%;
}

/* appearance:none strips the native dropdown arrow. Frame the location field as
   a real selector: a pin icon on the left + a chevron on the right, so it reads
   as an intentional dropdown instead of stray text in an empty box. */
.ja-job-search-bar__select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 8px center, right 10px center;
  background-repeat: no-repeat, no-repeat;
  background-size: 15px 15px, 16px 16px;
  border-radius: var(--ja-radius-sm);
  color: var(--ja-ink);
  cursor: pointer;
  font-weight: 600;
  padding-left: 30px;
  padding-right: 34px;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.ja-job-search-bar__select:hover {
  background-color: var(--ja-frost);
}

.ja-job-search-bar__select:focus-visible {
  background-color: var(--ja-frost);
  box-shadow: 0 0 0 2px var(--ja-blue);
}

.ja-job-search-bar__select option {
  color: var(--ja-ink);
  font-weight: 500;
}

.ja-job-search-bar__divider {
  background: var(--ja-line);
  height: 26px;
}

.ja-job-search-bar .ja-button {
  min-height: 44px;
}

.ja-job-search-layout {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: 244px minmax(0, 1fr);
  margin-top: 22px;
}

.ja-job-search-results__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ja-job-search-results__count {
  color: var(--ja-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.ja-job-search-results__sort {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: var(--ja-radius-sm);
  color: var(--ja-muted);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  gap: 6px;
  padding: 7px 12px;
}

.ja-job-search-results__list {
  display: grid;
  gap: 12px;
}

.ja-job-card {
  align-items: flex-start;
  background: var(--ja-white);
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 27, 42, 0.04);
  display: flex;
  gap: 16px;
  padding: 18px 20px;
}

.ja-job-card__logo {
  align-items: center;
  background: #eaf0fb;
  border: 1px solid #dbe7ff;
  border-radius: var(--ja-radius-md);
  color: var(--ja-primary-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.ja-job-card__main {
  flex: 1;
  min-width: 0;
}

.ja-job-card__title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ja-job-card__title-row h3,
.ja-job-card__title-row .ja-job-card__title {
  color: var(--ja-ink);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.25;
  margin: 0;
}

.ja-job-card__fresh {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-success-text);
  flex: 0 0 auto;
  font-family: var(--ja-font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
}

.ja-job-card__meta {
  color: var(--ja-muted);
  font-size: 13.5px;
  margin-top: 4px;
}

.ja-job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ja-job-card__tag {
  background: var(--ja-surface);
  border: 1px solid var(--ja-line);
  border-radius: 6px;
  color: #2a3a4f;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
}

.ja-job-card__pay {
  color: var(--ja-ink);
  font-size: 0.86rem;
  font-weight: 700;
  margin-top: 10px;
}

.ja-job-card__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ja-job-card__score-row {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ja-job-card__score-label {
  color: var(--ja-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.ja-job-card__score-label span {
  color: var(--ja-muted-2);
  font-weight: 500;
}

.ja-job-card__save {
  align-items: center;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 8px;
  color: var(--ja-muted-2);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 30px;
}

.ja-job-card__save:hover {
  border-color: var(--ja-rejected-text);
  color: var(--ja-rejected-text);
}

.ja-job-card__apply {
  background: var(--ja-blue);
  border: 1px solid var(--ja-primary-700);
  border-radius: 8px;
  color: var(--ja-white);
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  text-decoration: none;
  transition: background-color 160ms ease;
  white-space: nowrap;
}

.ja-job-card__apply:hover {
  background: var(--ja-primary-700);
  color: var(--ja-white);
}

@media (max-width: 1040px) {
  .ja-job-search-bar {
    grid-template-columns: auto 1fr;
  }

  .ja-job-search-bar__divider {
    display: none;
  }

  .ja-job-search-bar__select {
    grid-column: 1 / -1;
    padding-left: 30px;
  }

  .ja-job-search-bar .ja-button {
    grid-column: 1 / -1;
  }

  .ja-job-search-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ja-filter-rail {
    position: static;
  }
}

@media (max-width: 620px) {
  /* .ja-job-card is a flex row (logo · main · aside). On phones the aside
     (score · pay · Apply) can't sit beside the main column without forcing the
     card ~460px wide (which overflowed and stretched the filter-rail track), so
     wrap it onto a full-width second line. The old grid-column rule was a no-op
     here because the card is flex, not grid. */
  .ja-job-card {
    flex-wrap: wrap;
  }

  .ja-job-card__aside {
    align-items: center;
    flex-basis: 100%;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 12px;
  }
}

/* -- Floating chrome-extension "autofill status" callout -- */

.ja-autofill-callout {
  animation: ja_bob 6s ease-in-out 0.3s infinite;
  background: var(--ja-white);
  border-radius: var(--ja-radius-lg);
  box-shadow: 0 20px 44px -16px rgba(14, 27, 42, 0.36);
  padding: 18px;
  position: absolute;
  right: -22px;
  top: 60px;
  width: 234px;
  z-index: 4;
}

.ja-autofill-callout__header {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.ja-autofill-callout__logo {
  border-radius: 7px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 26px;
  overflow: hidden;
  width: 26px;
}

.ja-autofill-callout__logo svg,
.ja-autofill-callout__logo img {
  display: block;
  height: 100%;
  width: 100%;
}

.ja-autofill-callout__name {
  color: var(--ja-ink);
  flex: 1 1 auto;
  font-size: 0.86rem;
  font-weight: 700;
}

.ja-autofill-callout__badge {
  background: var(--ja-gold);
  border-radius: var(--ja-radius-pill);
  color: var(--ja-ink);
  flex: 0 0 auto;
  font-family: var(--ja-font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  text-transform: uppercase;
}

.ja-autofill-callout__list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.ja-autofill-callout__list li {
  align-items: center;
  color: var(--ja-text);
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 8px;
}

.ja-autofill-callout__list svg {
  color: var(--ja-success);
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.ja-autofill-callout__button {
  background: var(--ja-blue);
  border: 1px solid var(--ja-primary-700);
  border-radius: var(--ja-radius-sm);
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7);
  color: var(--ja-white);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

@media (max-width: 1040px) {
  .ja-autofill-callout {
    position: static;
    margin: -14px auto 0;
    animation: none;
  }
}

/* -- CTA band v2: centered, dual buttons, dashed divider, mono caption -- */

.ja-cta-centered {
  margin-inline: auto;
  max-width: 880px;
  position: relative;
  text-align: center;
}

.ja-cta-centered h2 {
  color: var(--ja-white);
  margin-inline: auto;
}

.ja-cta-centered p {
  color: #cfe0e8;
  margin: 14px auto 0;
  max-width: 620px;
}

.ja-cta-centered__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 44px;
  position: relative;
}

/* Decorative dashed gold rule, anchored to the buttons (not the section's
   50%, which drifts with copy length) so it always sits centered in the
   gap between the paragraph and the CTA buttons with clear space on both
   sides, whatever the heading/lede wraps to. */
.ja-cta-centered__actions::before {
  background-image: repeating-linear-gradient(90deg, rgba(244, 182, 63, 0.5) 0 8px, transparent 8px 18px);
  content: "";
  height: 2px;
  left: 50%;
  max-width: 1100px;
  pointer-events: none;
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  width: 88vw;
}

.ja-cta-centered__caption {
  color: #8fb3c8;
  font-family: var(--ja-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-top: 20px;
}

/* -- FAQ v2: centered header + single elevated card, numbered rows -- */

.ja-faq-card {
  background: var(--ja-white);
  border: 1px solid #e7ecf3;
  border-radius: var(--ja-radius-lg);
  box-shadow: 0 1px 2px rgba(14, 27, 42, 0.04);
  margin-top: 34px;
  padding: 4px 24px;
}

.ja-faq-card details.ja-faq {
  border-bottom: 1px solid #edf1f6;
  border-top: 0;
}

/* Reference-exact FAQ row: number + question in a baseline flex on the left,
   the +/- sign pushed right via space-between (rendered as a static flex
   item, overriding the base absolute-positioned ::after). */
.ja-faq-card details.ja-faq summary {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 22px 2px;
}

.ja-faq-card .ja-faq__q {
  align-items: baseline;
  display: flex;
  gap: 14px;
}

.ja-faq-card .ja-faq__num {
  color: #9fb0c4;
  flex: 0 0 auto;
  font-family: var(--ja-font-mono);
  font-size: 12px;
  font-weight: 600;
}

.ja-faq-card .ja-faq__label {
  color: var(--ja-ink);
  font-size: 17px;
  font-weight: 700;
}

.ja-faq-card details.ja-faq summary::after {
  color: var(--ja-primary-700);
  content: '+';
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  position: static;
  text-align: center;
  transform: none;
  width: 22px;
}

.ja-faq-card details.ja-faq[open] summary::after {
  content: "\2212";
}

.ja-faq-card details.ja-faq p {
  color: #4a5c72;
  font-size: 15.5px;
  line-height: 1.62;
  margin: 0;
  max-width: 660px;
  padding: 0 2px 24px 40px;
}

.ja-faq-below {
  color: var(--ja-muted);
  font-size: 0.92rem;
  margin-top: 24px;
  text-align: center;
}

.ja-faq-below a {
  color: var(--ja-blue);
  font-weight: 700;
  text-decoration: none;
}

/* -- Section-header flex row (heading block + link on the right) -- */

.ja-section-header-row {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.ja-section-header-row .ja-content {
  margin-inline: 0;
}

.ja-section-header-row .ja-feature__more {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .ja-section-header-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
}

/* -- Flat dark-ink variant (no grid-paper texture), used by the closing CTA -- */

.ja-section--ink-flat {
  background: var(--ja-ink);
  overflow: hidden;
  position: relative;
}


/* -- Hero workflow visual: the same route card renders at every breakpoint.
   The card is a single scalable SVG (viewBox preserves aspect ratio, so its
   text scales with it instead of wrapping), so no separate mobile variant is
   needed. On narrow screens it just shrinks proportionally. -- */

@media (max-width: 620px) {
  /* Give the scaled-down route card a touch more room on phones. */
  .ja-route-card {
    padding: 14px 12px 16px;
  }

  .ja-route-card__header {
    margin-bottom: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ATS RESUME UPLOADER — premium on-page drop zone + scan animation
   for /ats-resume-checker/ (.ja-ats)
   ════════════════════════════════════════════════════════════════════════ */
#ats-upload {
  scroll-margin-top: 92px;
}

.ja-ats {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

/* `display:flex` on the panels below would otherwise defeat the [hidden]
   attribute the JS toggles — force hidden panels to stay hidden. */
.ja-ats [hidden] {
  display: none !important;
}

/* ---- shared panel frame (zone / scan / error share the same footprint) ---- */
.ja-ats__zone,
.ja-ats__scan,
.ja-ats__err {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 306px;
  padding: 44px 34px;
  text-align: center;
  border-radius: var(--ja-radius-xl);
  border: 1.5px solid var(--ja-line);
  box-shadow: var(--ja-shadow-sm);
}

/* ---- IDLE / DROP ZONE ---- */
.ja-ats__zone {
  gap: 15px;
  cursor: pointer;
  background: radial-gradient(125% 120% at 50% -12%, #e9f1ff 0%, var(--ja-white) 58%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.2s ease;
}
.ja-ats__zone::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px dashed #c4d5f5;
  border-radius: 13px;
  pointer-events: none;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.ja-ats__zone:hover {
  transform: translateY(-2px);
  border-color: #cadaf7;
  box-shadow: var(--ja-shadow);
}
.ja-ats__zone:hover::before {
  border-color: var(--ja-blue);
}
.ja-ats__zone:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 3px;
}

.ja-ats__badge {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: var(--ja-blue);
  background: linear-gradient(150deg, #e3edff 0%, #f5f9ff 100%);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.16), 0 12px 26px -14px rgba(37, 99, 235, 0.65);
}
.ja-ats__badge svg {
  width: 30px;
  height: 30px;
}
.ja-ats__zone:hover .ja-ats__badge {
  animation: ja-ats-bob 1.7s ease-in-out infinite;
}
@keyframes ja-ats-bob {
  50% {
    transform: translateY(-6px);
  }
}

.ja-ats__title {
  margin: 0;
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ja-ink);
}
.ja-ats__sub {
  margin: 0;
  max-width: 33ch;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ja-muted);
}
.ja-ats__link {
  color: var(--ja-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ja-ats__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 3px;
}
.ja-ats__chip {
  font: 600 0.7rem/1 var(--ja-font-mono);
  letter-spacing: 0.05em;
  color: var(--ja-primary-700);
  background: #e7f0ff;
  border: 1px solid #d3e2fb;
  padding: 6px 10px;
  border-radius: var(--ja-radius-pill);
}
.ja-ats__chip--ghost {
  color: var(--ja-muted);
  background: transparent;
  border-color: var(--ja-line);
}

/* ---- DRAG OVER ---- */
.ja-ats__drop {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: var(--ja-radius-xl);
  background: linear-gradient(150deg, rgba(37, 99, 235, 0.96), rgba(27, 79, 209, 0.96));
  color: #fff;
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ja-ats.is-drag .ja-ats__drop {
  opacity: 1;
  transform: scale(1);
}
.ja-ats.is-drag .ja-ats__zone {
  border-color: var(--ja-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), var(--ja-shadow);
}
.ja-ats__drop .ja-ats__badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  animation: ja-ats-bob 1.1s ease-in-out infinite;
}
.ja-ats__drop .ja-ats__title {
  color: #fff;
}

/* ---- SCANNING STATE ---- */
.ja-ats__scan {
  gap: 20px;
  background: radial-gradient(120% 120% at 50% 0%, #eef4ff 0%, var(--ja-white) 66%);
}
.ja-ats__kicker {
  font: 600 0.68rem/1 var(--ja-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ja-blue);
}
.ja-ats__doc {
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 188px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  border-radius: 11px;
  box-shadow: var(--ja-shadow);
}
.ja-ats__docline {
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e9eef6, #dfe7f2);
}
.ja-ats__docline--head {
  height: 11px;
  width: 58%;
  margin-bottom: 5px;
  background: linear-gradient(90deg, #cdd9ec, #c1d0e8);
}
.ja-ats__beam {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.32), rgba(37, 99, 235, 0.6), transparent);
  box-shadow: 0 0 26px 4px rgba(37, 99, 235, 0.45);
  animation: ja-ats-beam 1.75s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ja-ats-beam {
  0% {
    transform: translateY(-42px);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    transform: translateY(190px);
    opacity: 0;
  }
}
.ja-ats__stagewrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ja-ats__stage {
  margin: 0;
  min-height: 1.4em;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ja-ink);
}
.ja-ats__bar {
  width: min(340px, 84%);
  height: 8px;
  border-radius: var(--ja-radius-pill);
  background: #e4ebf5;
  overflow: hidden;
}
.ja-ats__barfill {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ja-blue), #4f8bf7);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.55);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
.ja-ats__pct {
  margin: 0;
  font: 600 0.82rem/1 var(--ja-font-mono);
  letter-spacing: 0.02em;
  color: var(--ja-muted);
}

/* success flourish — beam & bar turn green just before redirect */
.ja-ats.is-done .ja-ats__beam {
  animation: none;
  opacity: 0;
}
.ja-ats.is-done .ja-ats__barfill {
  background: linear-gradient(90deg, var(--ja-pine), #34d399);
  box-shadow: 0 0 12px rgba(14, 159, 110, 0.55);
}
.ja-ats.is-done .ja-ats__kicker {
  color: var(--ja-success-text);
}

/* ---- ERROR STATE ---- */
.ja-ats__err {
  gap: 14px;
  background: var(--ja-rejected-tint);
  border-color: var(--ja-rejected-border);
}
.ja-ats__err .ja-ats__badge {
  color: var(--ja-rejected-text);
  background: #fbe0e0;
  box-shadow: inset 0 0 0 1px rgba(192, 70, 74, 0.2);
}
.ja-ats__errmsg {
  margin: 0;
  max-width: 34ch;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ja-rejected-text);
}
.ja-ats__retry {
  margin-top: 2px;
  cursor: pointer;
}

/* ---- FOOT ---- */
.ja-ats__foot {
  margin: 16px 0 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ja-muted);
}
.ja-ats__foot a {
  color: var(--ja-blue);
  font-weight: 500;
}

@media (max-width: 560px) {
  .ja-ats__zone,
  .ja-ats__scan,
  .ja-ats__err {
    min-height: 264px;
    padding: 34px 22px;
  }
  .ja-ats__title {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ja-ats__beam {
    animation: none;
    opacity: 0.5;
    top: 74px;
  }
  .ja-ats__zone:hover .ja-ats__badge,
  .ja-ats__drop .ja-ats__badge {
    animation: none;
  }
  .ja-ats__zone:hover {
    transform: none;
  }
  .ja-ats__barfill {
    transition: width 0.2s linear;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PRICING PAGE — 4-plan grid (Free + Monthly + Quarterly + Semi-annual)
   ════════════════════════════════════════════════════════════════════════ */
.ja-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin-inline: auto;
  align-items: stretch;
}
.ja-pricing-grid .ja-price {
  position: relative; /* positioning context for the absolute ja-price__badge */
  min-height: 100%;
}

/* Free card — softer, sits apart from the paid trio */
.ja-price--free {
  background: var(--ja-surface);
}

/* Most-popular (Quarterly) — gold accent */
.ja-price--pop {
  border: 2px solid var(--ja-signal);
  box-shadow: var(--ja-shadow-md);
}
.ja-price--pop .ja-price__badge {
  background: var(--ja-signal);
  color: var(--ja-ink);
}
.ja-price--pop .ja-price__label {
  color: var(--ja-warning-gold);
}

/* Best-value (Semi-annual) — pine accent */
.ja-price--value {
  border: 2px solid var(--ja-pine);
}
.ja-price--value .ja-price__badge {
  background: var(--ja-pine);
  color: #fff;
}
.ja-price--value .ja-price__label {
  color: var(--ja-success-text);
}

/* struck-through "was" price inside the savings pill */
.ja-price__trial s {
  color: var(--ja-muted-2);
  font-weight: 600;
}
.ja-price__trial {
  text-align: center;
}

/* trust row under the cards */
.ja-pricing-trust {
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ja-muted);
}

/* "everything included" — two-column checklist */
.ja-pricing-included .ja-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 34px;
}

@media (min-width: 1001px) {
  .ja-pricing-grid .ja-price--pop {
    transform: translateY(-6px);
  }
}
@media (max-width: 1000px) {
  .ja-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ja-pricing-included .ja-check-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .ja-pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   RESUME TEMPLATE GALLERY v2 (.ja-tpl) — image-forward cards, hover CTA
   ════════════════════════════════════════════════════════════════════════ */
.ja-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 48px 36px;
}

.ja-tpl {
  display: flex;
  flex-direction: column;
}

/* The resume paper IS the card front: a clean white sheet with all-corner
   rounding + a soft realistic shadow + hairline edge (à la novoresume/resume.io).
   No gradient box, no heavy border, no badge — the design is the hero. */
.ja-tpl__frame {
  position: relative;
  aspect-ratio: 300 / 424; /* A4 — full page, no crop */
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  border: 1px solid #e7ebf1;
  box-shadow: 0 2px 4px rgba(66, 80, 97, 0.06), 0 12px 26px -12px rgba(66, 80, 97, 0.34);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.2s ease;
}

.ja-tpl__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.ja-tpl:hover .ja-tpl__frame {
  transform: translateY(-7px);
  border-color: #d6deea;
  box-shadow: 0 4px 8px rgba(66, 80, 97, 0.08), 0 34px 52px -22px rgba(66, 80, 97, 0.46);
}

/* subtle bottom darken on hover so the CTA pill stays legible over any resume */
.ja-tpl__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(17, 29, 50, 0) 0%, rgba(17, 29, 50, 0) 42%, rgba(17, 29, 50, 0.48) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ja-tpl:hover .ja-tpl__frame::after {
  opacity: 1;
}

/* per-card ATS badge removed — reads cleaner, pro (page copy covers ATS) */
.ja-tpl__badge {
  display: none;
}

.ja-tpl__zoom {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ja-ink);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(16, 32, 51, 0.08);
  box-shadow: 0 4px 12px -4px rgba(14, 27, 42, 0.3);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.ja-tpl__zoom svg {
  width: 16px;
  height: 16px;
}

.ja-tpl:hover .ja-tpl__zoom {
  opacity: 1;
  transform: scale(1);
}

.ja-tpl__cta {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 2;
  transform: translate(-50%, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  background: var(--ja-blue);
  border-radius: 999px;
  box-shadow: 0 10px 24px -6px rgba(37, 99, 235, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.ja-tpl:hover .ja-tpl__cta {
  opacity: 1;
  transform: translate(-50%, 0);
}

.ja-tpl__cta:hover,
.ja-tpl__cta:focus {
  background: var(--ja-primary-700);
  color: #fff;
}

.ja-tpl__meta {
  padding: 15px 2px 2px;
}

.ja-tpl__name {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ja-ink);
}

.ja-tpl__name a {
  color: inherit;
  text-decoration: none;
}

.ja-tpl__name a:hover {
  color: var(--ja-blue);
}

.ja-tpl__sub {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--ja-muted);
}

/* touch devices have no hover — keep the CTA + zoom visible */
@media (hover: none) {
  .ja-tpl__cta {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .ja-tpl__zoom {
    opacity: 1;
    transform: none;
  }
  .ja-tpl__frame::after {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .ja-tpl-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 26px 14px;
  }
  .ja-tpl__name {
    font-size: 0.94rem;
  }
  .ja-tpl__sub {
    font-size: 0.8rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   AI JOB SEARCH (/ai-job-search/) — split hero + conversational chat mockup
   ════════════════════════════════════════════════════════════════════════ */
.ja-agent-hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
}
.ja-agent-hero__copy {
  text-align: left;
}
.ja-agent-hero__copy .ja-lede {
  text-align: left;
  margin-inline: 0;
}
.ja-agent-hero__copy .ja-hero__actions,
.ja-agent-hero__copy .ja-proof-grid {
  justify-content: flex-start;
}
.ja-agent-hero__note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--ja-muted);
}

/* chat mockup */
.ja-chat {
  overflow: hidden;
  max-width: 448px;
  margin-inline: auto;
  border-radius: 16px;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  box-shadow: var(--ja-shadow-lg);
  font-size: 0.92rem;
}
.ja-chat__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: linear-gradient(90deg, var(--ja-ink), #16263b);
  color: #fff;
}
.ja-chat__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
}
.ja-chat__title {
  margin-left: 8px;
  font: 600 0.82rem/1 var(--ja-font);
}
.ja-chat__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  background: var(--ja-surface);
}
.ja-chat__msg {
  max-width: 90%;
  padding: 11px 14px;
  border-radius: 14px;
  line-height: 1.45;
}
.ja-chat__msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--ja-blue), #1b4fd1);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ja-chat__msg--bot {
  align-self: flex-start;
  width: 100%;
  background: var(--ja-white);
  border: 1px solid var(--ja-line);
  color: var(--ja-text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--ja-shadow-sm);
}
.ja-chat__msg--bot p {
  margin: 0 0 8px;
}
.ja-chat__msg--bot p:last-child {
  margin-bottom: 0;
}
.ja-chat__meta {
  font-size: 0.8rem;
  color: var(--ja-muted);
}
.ja-chat__jobs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 10px;
}
.ja-chat__job {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ja-frost);
  border: 1px solid #dbe7fb;
}
.ja-chat__job strong {
  color: var(--ja-ink);
  font-size: 0.9rem;
}
.ja-chat__job span {
  color: var(--ja-muted);
  font-size: 0.8rem;
}
.ja-chat__job em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ja-success-text);
}
.ja-chat__typing {
  display: inline-flex;
  gap: 3px;
  margin-left: 5px;
  vertical-align: middle;
}
.ja-chat__typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ja-blue);
  animation: ja-chat-blink 1.2s infinite;
}
.ja-chat__typing i:nth-child(2) {
  animation-delay: 0.2s;
}
.ja-chat__typing i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ja-chat-blink {
  0%, 60%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* example-query chips */
.ja-agent-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.ja-agent-queries__q {
  padding: 11px 17px;
  border-radius: var(--ja-radius-pill);
  background: var(--ja-frost);
  border: 1px solid #d8e4fa;
  color: var(--ja-primary-700);
  font-size: 0.94rem;
  font-weight: 500;
}

@media (max-width: 900px) {
  .ja-agent-hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .ja-agent-hero__copy {
    text-align: center;
  }
  .ja-agent-hero__copy .ja-lede {
    text-align: center;
  }
  .ja-agent-hero__copy .ja-hero__actions,
  .ja-agent-hero__copy .ja-proof-grid {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ja-chat__typing i {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   RESUME TEMPLATE LIGHTBOX (.ja-lb) — in-page preview for the gallery
   ════════════════════════════════════════════════════════════════════════ */
.ja-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.ja-lb.is-open {
  display: block;
}

.ja-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: ja-lb-fade 0.2s ease;
}

@keyframes ja-lb-fade {
  from { opacity: 0; }
}

.ja-lb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4vh 24px;
  pointer-events: none;
}

.ja-lb__figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ja-lb-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes ja-lb-pop {
  from { opacity: 0; transform: scale(0.95); }
}

.ja-lb__img {
  display: block;
  width: auto;
  height: auto;
  max-height: 80vh;
  max-width: min(90vw, 600px);
  background: #fff;
  border-radius: 0;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.65);
  pointer-events: auto;
}

.ja-lb__bar {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #fff;
  pointer-events: auto;
}

.ja-lb__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.ja-lb__name {
  font-size: 1.06rem;
  font-weight: 700;
}

.ja-lb__sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}

.ja-lb__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--ja-blue);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -8px rgba(37, 99, 235, 0.7);
  transition: background 0.2s ease;
}

.ja-lb__cta:hover,
.ja-lb__cta:focus {
  background: var(--ja-primary-700);
  color: #fff !important;
}

.ja-lb__close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  transition: background 0.18s ease;
}

.ja-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  transition: background 0.18s ease;
}

.ja-lb__close:hover,
.ja-lb__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.ja-lb__nav--prev {
  left: max(16px, 4vw);
}

.ja-lb__nav--next {
  right: max(16px, 4vw);
}

@media (max-width: 640px) {
  .ja-lb__nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
  .ja-lb__nav--prev { left: 8px; }
  .ja-lb__nav--next { right: 8px; }
  .ja-lb__bar {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .ja-lb__img { max-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  .ja-lb__figure,
  .ja-lb__backdrop {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PRICING PLANS v2 — Free card + Pro gradient card w/ billing toggle
   (/pricing/, .ja-plans) — replaces the 4-card grid
   ════════════════════════════════════════════════════════════════════════ */
.ja-plans {
  display: grid;
  grid-template-columns: 0.82fr 1.6fr;
  gap: 22px;
  max-width: 1010px;
  margin: 8px auto 0;
  align-items: stretch;
}
.ja-plan {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
}
.ja-plan__spacer {
  flex: 1 1 0;
  min-height: 18px;
}

/* Free card */
.ja-plan--free {
  background: #fff;
  border: 1px solid var(--ja-line);
  padding: 28px 26px;
  box-shadow: 0 12px 34px -14px rgba(14, 27, 42, 0.24);
}
.ja-plan__label {
  font: 700 12px/1 var(--ja-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ja-blue);
}
.ja-plan__name {
  margin-top: 9px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ja-ink);
}
.ja-plan__sub {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ja-muted);
}
.ja-plan__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 18px;
}
.ja-plan__amount {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ja-ink);
}
.ja-plan__per {
  font-size: 15px;
  color: var(--ja-muted-2);
}
.ja-plan__rule {
  height: 1px;
  background: #edf1f6;
  margin: 20px 0 16px;
}
.ja-plan__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ja-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #2a3a4f;
}
.ja-plan__check {
  flex-shrink: 0;
  margin-top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #e7f7f0;
  border: 1px solid #c9ebdc;
  color: #0e7c53;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 10px/1 var(--ja-font);
}
.ja-plan__cta {
  display: block;
  text-align: center;
  text-decoration: none;
}
.ja-plan__cta--ghost {
  font: 700 14.5px/1 var(--ja-font);
  padding: 13px;
  border-radius: 11px;
  background: #fff;
  color: #16304e;
  border: 1px solid #d4dce6;
  transition: background 0.16s, border-color 0.16s;
}
.ja-plan__cta--ghost:hover {
  background: var(--ja-frost);
  border-color: #c4d5f5;
}
.ja-plan__note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ja-muted-2);
}

/* Pro gradient card */
.ja-plan--pro {
  position: relative;
  overflow: hidden;
  color: #eaf1ff;
  padding: 32px 32px 30px;
  background: linear-gradient(165deg, #1e56d6 0%, #123fae 100%);
  box-shadow: 0 30px 60px -18px rgba(18, 63, 174, 0.6);
}
.ja-plan__glow {
  position: absolute;
  pointer-events: none;
}
.ja-plan__glow--1 {
  top: -120px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
}
.ja-plan__glow--2 {
  bottom: -140px;
  left: -60px;
  width: 340px;
  height: 340px;
  background: radial-gradient(closest-side, rgba(244, 182, 63, 0.14), transparent);
}
.ja-plan__pro-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ja-plan__label--pro {
  color: #aec6ff;
  letter-spacing: 0.1em;
}
.ja-plan__name--pro {
  margin-top: 6px;
  font-size: 25px;
  color: #fff;
}
.ja-bill {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
}
.ja-bill__btn {
  border: 0;
  cursor: pointer;
  font: 700 13.5px/1 var(--ja-font);
  padding: 9px 16px;
  border-radius: 9px;
  white-space: nowrap;
  background: transparent;
  color: #cddbf7;
  transition: background 0.15s, color 0.15s;
}
.ja-bill__btn:hover {
  color: #fff;
}
.ja-bill__btn.is-active {
  background: #fff;
  color: #123fae;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
.ja-plan__price--pro {
  position: relative;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.ja-plan__amount--pro {
  font-size: 58px;
  line-height: 1;
  color: #fff;
}
.ja-plan__per--pro {
  font-size: 16px;
  color: #b9ccf2;
}
.ja-plan__save {
  margin-left: 6px;
  font: 700 12.5px/1 var(--ja-font);
  color: #3a2705;
  background: var(--ja-signal);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(244, 182, 63, 0.55);
}
.ja-plan__billed {
  position: relative;
  margin: 10px 0 0;
  font-size: 13px;
  color: #b9ccf2;
}
.ja-plan__rule--pro {
  position: relative;
  background: rgba(255, 255, 255, 0.16);
  margin: 22px 0 18px;
}
.ja-plan__pro-features {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 22px;
}
.ja-plan__feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #dce7ff;
}
.ja-plan__feat::before {
  content: "\2713";
  flex-shrink: 0;
  margin-top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 10px/1 var(--ja-font);
}
.ja-plan__feat--gold {
  color: #fce9c0;
}
.ja-plan__feat--gold::before {
  background: rgba(244, 182, 63, 0.24);
  border-color: rgba(244, 182, 63, 0.5);
  color: var(--ja-signal);
}
.ja-plan__pro-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.ja-plan__cta--white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 15px/1 var(--ja-font);
  color: #123fae;
  background: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ja-plan__cta--white:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.45);
}
.ja-plan__secure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #aec6ff;
}

/* trust row under the plans */
.ja-plans-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 42px;
  font-size: 14px;
  color: var(--ja-muted);
}
.ja-plans-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ja-plans-trust__sep {
  color: #c2ccd8;
}

@media (max-width: 820px) {
  .ja-plans {
    grid-template-columns: 1fr;
  }
  .ja-plan__pro-features {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ja-plan__pro-head {
    flex-direction: column;
  }
  .ja-bill {
    width: 100%;
    justify-content: space-between;
  }
  .ja-plan__amount--pro {
    font-size: 48px;
  }
}

/* ---------------------------------------------------------------------------
   Custom logo (Customizer -> Brand & Colours). When the owner uploads a logo it
   replaces the default mark + wordmark in the header/footer. A wide or tall logo
   scales by height; --ja-logo-h comes from the "Logo height" control (default
   38px). This rule sits after ".ja-brand img" so width:auto wins for real logos.
   --------------------------------------------------------------------------- */
.ja-brand--logo img {
  display: block;
  height: var(--ja-logo-h, 38px);
  width: auto;
  max-width: 260px;
}

/* ─── Resume-example lightbox (fresume/example-preview + variants) ─────────
   Full-viewport document viewer: the sheet is scaled to FIT the screen (no
   inner scrolling or dragging), the page behind is scroll-locked, and Esc /
   ✕ / a click anywhere off the sheet all close it. */

.ja-lightbox-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}

.ja-lightbox-open img {
  /* wp_get_attachment_image emits width/height ATTRIBUTES; without height:auto the
     attribute height wins against width:100% and stretches/distorts the preview. */
  width: 100%;
  height: auto;
  display: block;
}

.ja-lightbox-open:focus-visible {
  outline: 3px solid var(--ja-blue);
  /* draw the ring INSIDE the button box — every usage sits in an
     overflow:hidden card that would clip an outside ring. */
  outline-offset: -3px;
}

/* Dim-on-hover + centered "View full size" pill, shared by the sticky
   preview and the variant cards. */
.ja-lightbox-open::after {
  background: rgba(14, 27, 42, 0);
  content: "";
  inset: 0;
  position: absolute;
  transition: background-color 0.18s ease;
}

.ja-lightbox-open:hover::after,
.ja-lightbox-open:focus-visible::after {
  background: rgba(14, 27, 42, 0.22);
}

.ja-zoom-hint {
  align-items: center;
  background: var(--ja-white);
  border-radius: var(--ja-radius-pill);
  box-shadow: 0 10px 30px -8px rgba(14, 27, 42, 0.45);
  color: var(--ja-ink);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 7px;
  left: 50%;
  opacity: 0;
  padding: 9px 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  z-index: 1;
}

.ja-lightbox-open:hover .ja-zoom-hint,
.ja-lightbox-open:focus-visible .ja-zoom-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ja-lightbox {
  align-items: center;
  background: transparent;
  border: 0;
  display: none;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  height: 100dvh;
  justify-content: center;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 28px;
  width: 100vw;
}

.ja-lightbox[open] {
  display: flex;
}

/* The whole overlay (backdrop + any gap around the sheet) reads as
   "click to close". */
.ja-lightbox,
.ja-lightbox::backdrop {
  cursor: zoom-out;
}

.ja-lightbox::backdrop {
  background: rgba(8, 13, 22, 0.86);
}

/* Scroll-lock the page while the viewer is open. */
body:has(.ja-lightbox[open]) {
  overflow: hidden;
}

.ja-lightbox img {
  background: var(--ja-white);
  border-radius: 0;
  box-shadow: 0 40px 120px -24px rgba(0, 0, 0, 0.6);
  cursor: default;
  display: block;
  height: auto;
  max-height: calc(100vh - 118px);
  max-height: calc(100dvh - 118px);
  max-width: min(880px, 100%);
  /* let flex shrink the sheet further when the caption wraps to two lines
     (without this the caption would be clipped by the dialog's overflow). */
  min-height: 0;
  width: auto;
}

.ja-lightbox img:not([src]) {
  display: none;
}

.ja-lightbox-caption {
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  cursor: default;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 600;
  gap: 14px;
  justify-content: center;
  margin: 0;
  padding-inline: 60px;
  text-align: center;
}

.ja-lightbox-hint {
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 6px;
}

.ja-lightbox-hint kbd {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--ja-font-mono);
  font-size: 0.68rem;
  padding: 2px 7px;
}

.ja-lightbox-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--ja-radius-pill);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  position: fixed;
  right: 20px;
  top: 20px;
  transition: background-color 0.15s ease, transform 0.15s ease;
  width: 44px;
  z-index: 2;
}

.ja-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}

/* Minimal spinner while the full-size sheet is still downloading. */
.ja-lightbox.is-loading::before {
  animation: ja-lightbox-spin 0.8s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  border-top-color: #fff;
  content: "";
  height: 42px;
  left: 50%;
  margin: -21px 0 0 -21px;
  position: fixed;
  top: 50%;
  width: 42px;
}

@keyframes ja-lightbox-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .ja-lightbox {
    gap: 12px;
    padding: 16px;
  }

  .ja-lightbox img {
    max-height: calc(100dvh - 96px);
  }

  .ja-lightbox-hint {
    display: none;
  }

  .ja-lightbox-caption {
    padding-inline: 0;
  }

  .ja-lightbox-close {
    right: 14px;
    top: 14px;
  }
}

/* ─── "More X resume examples" variant strip (fresume/example-variants) ──── */

.ja-example-variants {
  margin-top: 76px;
}

.ja-example-variants .ja-section-header {
  margin-bottom: 30px;
}

.ja-example-variants .ja-section-title {
  letter-spacing: -0.02em;
}

.ja-example-variants .ja-section-sub {
  max-width: 560px;
}

.ja-variant-cards {
  display: grid;
  gap: 28px 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ja-variant-card {
  min-width: 0;
  /* Squared like a real A4 sheet — the flush thumb must not inherit the
     .ja-example-card rounded top corners. */
  border-radius: 0;
}

.ja-variant-card .ja-variant-thumb {
  aspect-ratio: 794 / 1123;
  border-bottom: 1px solid var(--ja-line);
  overflow: hidden;
}

.ja-variant-card .ja-variant-thumb img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.25s ease;
  width: 100%;
}

.ja-variant-card:hover .ja-variant-thumb img {
  transform: scale(1.015);
}

.ja-variant-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.ja-variant-title {
  color: var(--ja-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 3px;
}

.ja-variant-sub {
  color: var(--ja-muted);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 14px;
}

.ja-variant-card .ja-variant-edit {
  border-radius: 9px;
  font-size: 0.9rem;
  margin-top: auto;
  min-height: 42px;
  padding: 10px 14px;
  width: 100%;
}

@media (max-width: 1040px) {
  .ja-variant-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ja-example-variants {
    margin-top: 56px;
  }

  .ja-variant-cards {
    gap: 18px;
    grid-template-columns: 1fr;
    margin-inline: auto;
    max-width: 420px;
  }
}

/* ==========================================================================
   CONTACT FORM (fresume/contact-form)
   ========================================================================== */

/* The panels below are toggled with the [hidden] attribute; any display value
   set here would defeat it (same trap as .ja-ats). */
.ja-contact-form [hidden] {
  display: none !important;
}

.ja-contact-form__form {
  display: grid;
  gap: 18px;
}

.ja-contact-form__row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ja-contact-form__field {
  display: grid;
  gap: 7px;
}

.ja-contact-form__label {
  color: var(--ja-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

/* Border is #b6c2d1, not --ja-line: the block ships on a --ja-surface band, where
   --ja-line lands at ~1.15:1 and WCAG 1.4.11 wants 3:1 for a control's boundary.
   The name and email inputs have no placeholder, so that boundary is the ONLY
   thing showing a field is there. Cards elsewhere keep --ja-line — 1.4.11 does
   not apply to decorative containers. */
.ja-contact-form__input,
.ja-contact-form__select,
.ja-contact-form__textarea {
  background: var(--ja-white);
  border: 1px solid #b6c2d1;
  border-radius: var(--ja-radius-md);
  color: var(--ja-ink);
  font-family: var(--ja-font);
  font-size: 1rem;
  padding: 12px 14px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  width: 100%;
}

/* --ja-muted, not --ja-muted-2: the placeholder carries the only guidance copy in
   the form and --ja-muted-2 is 2.93:1 on white — under AA. */
.ja-contact-form__input::placeholder,
.ja-contact-form__textarea::placeholder {
  color: var(--ja-muted);
}

.ja-contact-form__input:hover,
.ja-contact-form__select:hover,
.ja-contact-form__textarea:hover {
  border-color: var(--ja-blue);
}

/* The global focus ring is gold, which sits at ~1.6:1 on this light surface —
   give the fields the same blue ring the job-search bar uses. */
.ja-contact-form__input:focus-visible,
.ja-contact-form__select:focus-visible,
.ja-contact-form__textarea:focus-visible {
  background-color: var(--ja-frost);
  border-color: var(--ja-blue);
  box-shadow: 0 0 0 2px var(--ja-blue);
  outline: none;
}

.ja-contact-form__select {
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  cursor: pointer;
  padding-right: 38px;
}

.ja-contact-form__textarea {
  line-height: 1.6;
  min-height: 150px;
  resize: vertical;
}

/* --ja-muted-2 is 2.75:1 on the --ja-surface band this ships on — under AA at
   12px. --ja-muted clears it at 5.14:1. */
.ja-contact-form__counter {
  color: var(--ja-muted);
  font-family: var(--ja-font-mono);
  font-size: 0.75rem;
  margin: 0;
  text-align: right;
}

/* Honeypot — off-screen rather than display:none, so form-filling bots still
   see a field worth completing. */
.ja-contact-form__trap {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  top: -9999px;
  width: 1px;
}

.ja-contact-form__captcha {
  min-height: 78px;
}

.ja-contact-form__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.ja-contact-form__submit[disabled] {
  cursor: progress;
  opacity: 0.65;
  transform: none;
}

.ja-contact-form__note {
  color: var(--ja-muted);
  flex: 1 1 220px;
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
}

/* Error — the token triplet every red surface in the theme uses. */
.ja-contact-form__status {
  background: var(--ja-rejected-tint);
  border: 1px solid var(--ja-rejected-border);
  border-radius: var(--ja-radius-md);
  color: var(--ja-rejected-text);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  padding: 12px 14px;
}

/* Success — replaces the form once the API accepts the message. */
.ja-contact-form__done {
  background: var(--ja-success-tint);
  border: 1px solid var(--ja-success-border);
  border-radius: var(--ja-radius-lg);
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 34px 28px;
  text-align: center;
}

/* The script focuses this panel after a successful send (tabindex="-1"), so it
   needs a visible ring like any other focus target. */
.ja-contact-form__done:focus-visible {
  outline: 3px solid var(--ja-blue);
  outline-offset: 2px;
}

.ja-contact-form__done-badge {
  align-items: center;
  background: var(--ja-white);
  border-radius: var(--ja-radius-pill);
  box-shadow: inset 0 0 0 1px var(--ja-success-border);
  color: var(--ja-success-text);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin-bottom: 4px;
  width: 42px;
}

.ja-contact-form__done-title {
  color: var(--ja-success-text);
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0;
}

.ja-contact-form__done-body {
  color: var(--ja-text);
  margin: 0;
  max-width: 46ch;
}

@media (max-width: 700px) {
  .ja-contact-form__row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ja-contact-form__input,
  .ja-contact-form__select,
  .ja-contact-form__textarea {
    transition: none;
  }
}