/* ============================================================
   Capango Jobs – Stylesheet
   Brand colors:
     Purple:    #6B21E8
     Teal:      #00C9B1
     Lavender:  #EAE8F7
     Dark:      #1a1a2e
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple:      #6B21E8;
  --purple-dark: #5018c0;
  --purple-light:#ede9fd;
  --teal:        #00C9B1;
  --teal-dark:   #00a896;
  --lavender:    #EAE8F7;
  --dark:        #1a1a2e;
  --mid:         #6b7280;
  --light:       #f9fafb;
  --white:       #ffffff;
  --border:      #e5e7eb;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--lavender);
  color: var(--dark);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size: 2rem;   font-weight: 800; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 1rem;   font-weight: 700; margin: 1.25rem 0 .5rem; color: var(--dark); }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .875rem;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--purple);
  color: var(--white);
  border: 2px solid var(--purple);
}
.btn-primary:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107,33,232,.3);
}
.btn-outline {
  background: transparent;
  color: var(--purple);
  border: 2px solid var(--purple);
}
.btn-outline:hover {
  background: var(--purple-light);
  transform: translateY(-1px);
}

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  padding: .75rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  gap: 1rem;
}
.logo {
  flex-shrink: 0;
}
.logo img {
  height: 36px;
  width: auto;
}
.header-verticals {
  flex: 1;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--teal-dark);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Language Selector (header) ──────────────────────────── */
.lang-select {
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--dark);
  background: var(--light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: .35rem .65rem;
  cursor: pointer;
  transition: border-color .15s;
  flex-shrink: 0;
}
.lang-select:hover { border-color: var(--purple); }
.lang-select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(107, 33, 232, .15);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 1.5rem 2.5rem;
  text-align: center;

  /* Real Capango background image */
  background-image: url('../images/hero-bg.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--lavender); /* fallback */
}

/* Subtle overlay so text stays readable */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(234, 232, 247, 0.72);
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }

.hero h1 { margin-bottom: .75rem; font-size: 2.5rem; }
.hero h1 span { color: var(--purple); }
.hero-sub {
  font-size: 1.0625rem;
  color: var(--mid);
  max-width: 480px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

/* ── Search Bar ───────────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: .75rem;
  max-width: 760px;
  margin: 0 auto 1.5rem;
  background: var(--white);
  border-radius: var(--radius-full);
  padding: .5rem .5rem .5rem 1.25rem;
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
}
.search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 180px;
}
.search-field svg { color: var(--mid); flex-shrink: 0; }
.search-field input {
  border: none;
  outline: none;
  font-size: 1rem;
  width: 100%;
  font-family: var(--font);
  color: var(--dark);
  background: transparent;
}
.search-field input::placeholder { color: var(--mid); }
.search-divider { width: 1px; background: var(--border); margin: .25rem 0; align-self: stretch; }
.btn-search {
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-full);
  padding: .75rem 1.75rem;
  font-weight: 700;
  font-size: 1rem;
  transition: all .2s ease;
}
.btn-search:hover {
  background: var(--purple-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107,33,232,.35);
}

/* ── Filter Button (inline with Search) ───────────────────── */
.btn-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  background: var(--light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: .6rem .85rem;
  font-family: var(--font);
  color: var(--mid);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-filter:hover { border-color: var(--purple); color: var(--purple); }
.btn-filter.active { background: var(--purple-light); border-color: var(--purple); color: var(--purple); }
.btn-filter svg { flex-shrink: 0; }
.filter-count {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  font-size: .6rem;
  font-weight: 700;
}

/* ── Filter Drawer ───────────────────────────────────────── */
.filter-drawer {
  max-width: 760px;
  margin: .75rem auto 0;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: drawerSlide .2s ease;
}
@keyframes drawerSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.filter-drawer-inner {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.filter-bottom-row {
  display: flex;
  justify-content: flex-end;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.filter-clear-btn {
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--purple);
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem 0;
  transition: color .15s;
  flex-shrink: 0;
}
.filter-clear-btn:hover { color: var(--purple-dark); text-decoration: underline; }

/* ── Filter Pills (inside drawer) ────────────────────────── */
.filter-pill {
  padding: .4rem .875rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--light);
  font-size: .8125rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--mid);
  cursor: pointer;
  transition: all .15s ease;
}
.filter-pill:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-light); }
.filter-pill.active {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}
.filter-pill[data-filter-value="gig"].active {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

/* ── Carl Mascot ──────────────────────────────────────────── */
/* Anchored to top-right of hero so head is never clipped by overflow:hidden */
.mascot-wrap {
  position: absolute;
  right: 3%;
  top: 1rem;
  width: 120px;
  pointer-events: none;
  z-index: 2;
  display: none; /* Hidden by default — shown only on wide screens */
}
.mascot-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(107,33,232,.2));
  /* Hides black background on mascot PNGs until transparent versions are available.
     TODO: Re-export carl-backpack-phone.png, carl.png, carla.png with transparent
     backgrounds from: C:\Users\StefanMidford\Dropbox\Capango\Marketing\Brand Assets
     Then remove this mix-blend-mode line. */
  mix-blend-mode: multiply;
}

/* ── Main Layout ──────────────────────────────────────────── */
.main-content {
  max-width: 1280px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Job List Panel ───────────────────────────────────────── */
.job-list-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-header .count { font-size: .875rem; color: var(--mid); font-weight: 500; }
.sort-select {
  font-size: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .3rem .6rem;
  color: var(--dark);
  font-family: var(--font);
  cursor: pointer;
  background: var(--light);
}
.job-list { padding: .5rem 0; }

/* ── Job Card ─────────────────────────────────────────────── */
.job-card {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s ease;
  position: relative;
}
.job-card:last-child { border-bottom: none; }
.job-card:hover { background: #f5f3ff; }
.job-card.active { background: var(--purple-light); border-left: 3px solid var(--purple); }
.job-card-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.job-card-info { flex: 1; min-width: 0; }
.job-card-title {
  font-weight: 700;
  font-size: .9375rem;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .1rem;
}
.job-card-company { font-size: .8125rem; color: var(--purple); font-weight: 600; margin-bottom: .35rem; }
.job-card-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .75rem;
  color: var(--mid);
  flex-wrap: wrap;
}
.job-card-meta span { display: flex; align-items: center; gap: .25rem; }
.job-card-arrow {
  color: var(--mid);
  align-self: center;
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.job-card:hover .job-card-arrow,
.job-card.active .job-card-arrow { color: var(--purple); transform: translateX(2px); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.badge-full-time  { background: var(--purple-light); color: var(--purple); }
.badge-part-time  { background: #e0f2fe; color: #0369a1; }
.badge-gig        { background: #ccfbf1; color: #0f766e; }
.badge-featured   { background: #fef3c7; color: #92400e; }

/* Category (industry) badges */
.badge-cat-restaurant  { background: #fff1f2; color: #be123c; }
.badge-cat-retail      { background: #faf5ff; color: #7e22ce; }
.badge-cat-hospitality { background: #f0fdfa; color: #0f766e; }

/* Distance badge (Closest First sort) */
.badge-distance { background: #eff6ff; color: #1d4ed8; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.25rem;
  border-top: 1px solid var(--border);
}
.page-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mid);
  border: 1.5px solid var(--border);
  background: var(--white);
  transition: all .15s;
}
.page-btn:hover, .page-btn.active { background: var(--purple); border-color: var(--purple); color: var(--white); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Job Detail Panel ─────────────────────────────────────── */
.job-detail-panel {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.job-detail-inner { padding: 2rem; }

.detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  color: var(--mid);
  padding: 2rem;
}
.detail-placeholder img {
  width: 120px;
  opacity: .85;
  margin-bottom: 1.25rem;
  mix-blend-mode: multiply; /* Hides black background — remove when transparent PNGs available */
}
.detail-placeholder p { font-size: .9375rem; max-width: 260px; }

/* ── Detail Header ────────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.detail-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.detail-title-block { flex: 1; min-width: 0; }
.detail-title { font-size: 1.5rem; font-weight: 800; margin-bottom: .25rem; }
.detail-company { font-size: 1rem; color: var(--purple); font-weight: 600; margin-bottom: .5rem; }
.detail-location { font-size: .875rem; color: var(--mid); display: flex; align-items: center; gap: .35rem; }

.detail-share { display: flex; gap: .5rem; flex-shrink: 0; }
.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--white);
  transition: transform .15s, opacity .15s;
}
.share-btn:hover { transform: scale(1.1); opacity: .9; }
.share-fb { background: #1877f2; }
.share-tw { background: #1da1f2; }
.share-em { background: var(--mid); }

/* ── Meta Chips ───────────────────────────────────────────── */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.meta-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .875rem;
  font-size: .875rem;
  color: var(--dark);
}
.meta-chip svg { color: var(--purple); }
.meta-chip.gig-chip { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; }
.meta-chip.gig-chip svg { color: #0f766e; }

/* ── Apply CTA ────────────────────────────────────────────── */
.apply-cta {
  background: linear-gradient(135deg, var(--purple) 0%, #9333ea 100%);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}
.apply-cta p { color: rgba(255,255,255,.85); font-size: .875rem; margin-bottom: 1rem; }
.apply-free-badge {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-full);
  padding: .3rem .875rem;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: .03em;
  margin-top: .75rem;
}
.btn-apply {
  background: var(--white);
  color: var(--purple);
  border: none;
  border-radius: var(--radius-full);
  padding: .875rem 2rem;
  font-weight: 800;
  font-size: 1rem;
  width: 100%;
  transition: all .2s ease;
  cursor: pointer;
}
.btn-apply:hover {
  background: var(--purple-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,255,255,.3);
}

/* ── Remote Job Chip ─────────────────────────────────────── */
.meta-chip.remote-chip { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.meta-chip.remote-chip svg { color: #6d28d9; }

/* ── Company Website Link ────────────────────────────────── */
.company-link {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--purple);
  margin-top: .5rem;
  margin-bottom: .5rem;
  transition: color .15s;
}
.company-link:hover { color: var(--purple-dark); text-decoration: underline; }

/* ── Job Description ──────────────────────────────────────── */
/* S130: max-width cap added so long-form Markdown / HTML descriptions
   don't read as one super-wide paragraph on desktop. 70ch is the
   readability sweet spot. Headings keep brand purple. Ordered lists
   (added when description is Markdown) inherit the bullet treatment
   below + decimal markers. Inline `code` styling supports the
   occasional code-like reference (e.g., a posting title with a SKU). */
.detail-description { max-width: 70ch; }
.detail-description h2,
.detail-description h3,
.detail-description h4 { color: var(--purple); margin-top: 1.25rem; }
.detail-description h3 { font-size: 1.0625rem; }
.detail-description h4 { font-size: 1rem; }
.detail-description p { font-size: .9375rem; color: #374151; line-height: 1.7; margin-bottom: .75rem; }
.detail-description ul,
.detail-description ol { padding-left: 1.25rem; margin-bottom: 1rem; }
.detail-description ul { list-style: disc; }
.detail-description ol { list-style: decimal; }
.detail-description ul li,
.detail-description ol li { font-size: .9375rem; color: #374151; line-height: 1.7; margin-bottom: .25rem; }
.detail-description a { color: var(--purple); text-decoration: underline; }
.detail-description strong { font-weight: 700; color: #1f2937; }
.detail-description em { font-style: italic; }
.detail-description code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  background: #f3f4f6;
  padding: .125rem .375rem;
  border-radius: 4px;
  font-size: .8125rem;
}

/* ── Enrichment Sections (Unique Capango Content) ────────── */
.enrichment-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.enrichment-section h3 { margin-top: 0; font-size: 1rem; }

/* Salary Insights */
.insight-grid {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
}
.insight-card {
  flex: 1;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .875rem;
  text-align: center;
}
.insight-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mid);
  margin-bottom: .35rem;
}
.insight-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
}
.insight-text {
  font-size: .875rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: .5rem;
}
.insight-text.muted { color: var(--mid); font-size: .8125rem; }
.insight-text strong { color: var(--purple); font-weight: 700; }

/* Area Insights */
.area-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.area-badges .badge { font-size: .75rem; padding: .3rem .75rem; }

/* Similar Jobs */
.similar-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.similar-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.similar-card:hover { background: #f5f3ff; border-color: var(--purple); }
.similar-logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.similar-info { flex: 1; min-width: 0; }
.similar-title { font-weight: 600; font-size: .8125rem; color: var(--dark); }
.similar-company { font-size: .75rem; color: var(--purple); font-weight: 600; }
.similar-meta { font-size: .7rem; color: var(--mid); margin-top: .15rem; }

/* ── Location Map ─────────────────────────────────────────── */
.map-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.map-section h3 { margin-top: 0; }
.map-address {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  font-size: .875rem;
  color: var(--mid);
  margin-bottom: .875rem;
  line-height: 1.5;
}
.map-address svg { margin-top: 2px; color: var(--purple); }
.map-embed-wrap {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: .875rem;
  line-height: 0; /* removes inline gap under iframe */
}
.map-iframe {
  width: 100%;
  height: 220px;
  border: none;
  display: block;
}
.btn-directions {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius-full);
  padding: .6rem 1.25rem;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.btn-directions:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

/* ── About Company ────────────────────────────────────────── */
.about-company { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.about-company h3 { margin-top: 0; }
.about-company p { font-size: .875rem; color: var(--mid); line-height: 1.7; }

/* S131: dynamic company description (TipTap WYSIWYG output from My Company
   on Platform 2.0). Mirrors `.detail-description` so the rendered HTML
   (headings / paragraphs / lists / strong / em / links) reads consistently
   with the job description block above. 70ch readability cap for
   long-form copy. */
.about-company-description {
  max-width: 70ch;
  font-size: .9375rem;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.about-company-description p { font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 .75rem; }
.about-company-description p:last-child { margin-bottom: 0; }
.about-company-description h2,
.about-company-description h3,
.about-company-description h4 {
  margin: 1rem 0 .5rem;
  color: var(--ink);
  font-weight: 600;
}
.about-company-description h2 { font-size: 1.125rem; }
.about-company-description h3 { font-size: 1rem; }
.about-company-description h4 { font-size: .9375rem; }
.about-company-description ul,
.about-company-description ol { margin: .5rem 0 .75rem; padding-left: 1.5rem; }
.about-company-description ol { list-style: decimal; }
.about-company-description li { margin-bottom: .25rem; }
.about-company-description strong { font-weight: 700; color: var(--ink); }
.about-company-description em { font-style: italic; }
.about-company-description a { color: var(--purple, var(--teal)); text-decoration: underline; }
.about-company-description a:hover { text-decoration: none; }
.about-company-description code {
  background: var(--light);
  padding: .125rem .375rem;
  border-radius: 4px;
  font-size: .875em;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--mid);
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: .25rem .75rem;
  margin-top: 1rem;
}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--mid);
}
.empty-state img { width: 100px; margin: 0 auto 1rem; opacity: .8; mix-blend-mode: multiply; }
.empty-state p { margin-bottom: 1rem; }
.empty-state .btn { display: inline-flex; }

/* ── Loading Skeleton ─────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 4px;
}

/* ── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--dark);
  color: var(--white);
  padding: .875rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  box-shadow: var(--shadow-md);
  transform: translateY(100px);
  opacity: 0;
  transition: all .3s ease;
  z-index: 999;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.7);
  padding: 3rem 1.5rem 2rem;
  margin-top: 3rem;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.footer-brand {}
.footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 1rem;
}
.footer-tagline {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  max-width: 220px;
  line-height: 1.6;
}
.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-self: center;
}
.footer-links a {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  transition: color .15s;
}
.footer-links a:hover { color: var(--teal); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  text-align: center;
  font-size: .8125rem;
  color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.35); }
.footer-bottom a:hover { color: rgba(255,255,255,.6); }

/* ── App Download Banner ──────────────────────────────────── */
.app-banner {
  background: linear-gradient(135deg, var(--purple) 0%, #9333ea 50%, var(--teal) 100%);
  padding: 3rem 1.5rem;
  margin-top: 3rem;
}
.app-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.app-banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.app-banner-text h2 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: .5rem;
}
.app-banner-text p {
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 520px;
}
.btn-lg {
  padding: .875rem 2rem;
  font-size: 1rem;
}

/* ── Mobile Back Button ───────────────────────────────────── */
.mobile-back {
  display: none;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--purple);
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

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

/* Wide screens — mascot is visible only here */
@media (min-width: 1101px) {
  .mascot-wrap { display: block; width: 120px; }
}

@media (max-width: 900px) {
  .main-content { grid-template-columns: 1fr; }
  .job-detail-panel { position: static; max-height: none; display: none; }
  .job-detail-panel.mobile-show { display: block; }
  .mobile-back { display: flex; }
  .hero h1 { font-size: 1.75rem; }
  .header-verticals { display: none; }
  .search-bar { border-radius: var(--radius-md); padding: .75rem; }
  .search-divider { display: none; }
  .search-field { width: 100%; }
  .btn-search { flex: 1; justify-content: center; }
  .btn-filter { flex-shrink: 0; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .footer-tagline { max-width: 100%; }
  .footer-links { justify-content: center; }
  .app-banner-text p { max-width: 100%; }
}

@media (max-width: 600px) {
  .hero { padding: 1.5rem 1rem 1.5rem; }
  .hero h1 { font-size: 1.5rem; }
  .header-inner { padding: .65rem 1rem; }
  .logo img { height: 32px; }
  .lang-select { font-size: .75rem; padding: .3rem .5rem; }
  .main-content { padding: 0 .75rem; margin: 1rem auto; }
  .detail-header { flex-wrap: wrap; }
  .detail-share { order: -1; margin-left: auto; }
  .apply-cta { padding: 1.25rem; }
  .filter-drawer-inner { padding: .75rem; }
}

/* ── QR Apply Landing (JS-2) ──────────────────────────────────
   Banner + legal disclosure rendered above the job board when the
   URL carries ?c=<signedCampaignId>. Brand-consistent with the
   existing card/hero styles. */
.qr-landing {
  max-width: 1280px;
  margin: 1.25rem auto 0;
  padding: 0 1.5rem;
}
.qr-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--purple);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.25rem 1.5rem;
}
.qr-banner-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.qr-company-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  object-fit: cover;
}
.qr-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: .15rem;
}
.qr-headline {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--dark);
}
.qr-sub {
  margin-top: .35rem;
  color: var(--mid);
  font-size: .95rem;
}
.qr-disclosure {
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qr-disclosure-title {
  margin: 0 0 .35rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--dark);
}
.qr-disclosure-text {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--mid);
  white-space: pre-line;     /* preserve phrase line breaks */
}
.qr-loading-text {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--mid);
}
.qr-error {
  border-left-color: var(--teal-dark);
}
@media (max-width: 600px) {
  .qr-landing { padding: 0 .75rem; }
  .qr-card { padding: 1rem; }
  .qr-headline { font-size: 1.15rem; }
  .qr-company-logo { width: 44px; height: 44px; }
}