/* MrJobs — clean stylesheet
   Brand: teal (#2a7d94). One palette, no stray greens. */

:root {
  --teal: #2a7d94;
  --teal-dark: #20697c;
  --teal-deep: #10333c;
  --teal-soft: #e9f3f6;
  --ink: #22383f;
  --muted: #5c7076;
  --bg: #f5f8f9;
  --card: #ffffff;
  --line: #e2eaed;
  --amber: #ffc107;
  --green: #25d366;
  --green-dark: #1a854a;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

img { max-width: 100%; }

/* ---------- ticker ---------- */
.ticker {
  background: var(--teal-deep);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  font-size: .88rem;
  padding-left: 24px;
  /* Fixed height reserved from first paint: app.js reveals the track
     once job data arrives, and the band must not push the page down
     when it does (desktop CLS fix, 2026-10-27). */
  height: 40px;
}
.ticker-track {
  display: inline-block;
  visibility: hidden; /* revealed by app.js once populated */
  padding: 8px 0;
  animation: ticker-scroll 28s linear infinite;
}
.ticker-track span { margin: 0 26px; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- navbar ---------- */
.navbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav-logo img { height: 44px; display: block; }
.nav-links {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.nav-links a:hover { color: var(--teal); }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink);
  padding: 6px 10px;
}

/* ---------- hero / page header ---------- */
.hero {
  background: linear-gradient(135deg, #1f7d95 0%, var(--teal) 60%, #3aa3bd 100%);
  color: #fff;
  text-align: center;
  padding: 56px 20px 64px;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("hero-bg.svg") center bottom / cover no-repeat;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero img { height: 88px; margin-bottom: 12px; }
.hero h1 { margin: 0 0 10px; font-size: 2.3rem; }
.hero p { margin: 0 auto; max-width: 680px; opacity: .93; }

.page-header {
  background: linear-gradient(135deg, #1f7d95 0%, var(--teal) 100%);
  color: #fff;
  text-align: center;
  padding: 38px 20px;
}
.page-header h1 { margin: 0 0 6px; font-size: 1.9rem; }
.page-header p { margin: 0; opacity: .9; }

/* ---------- layout ---------- */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.job-section { padding: 32px 0 8px; }

.filters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
#searchInput {
  flex: 1;
  min-width: 240px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid #cfd9dd;
  font-size: 1rem;
  background: #fff;
}
#locationFilter {
  min-width: 220px; /* options load via JS; keep the width stable (CLS) */
  padding: 12px 44px 12px 20px;
  border-radius: 999px;
  border: 1px solid #cfd9dd;
  font-size: 1rem;
  appearance: none;
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a7d94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center / 16px;
  cursor: pointer;
}
#jobCount {
  font-weight: 700;
  color: var(--teal-dark);
  margin-bottom: 16px;
  min-height: 1.6em; /* reserve the count line before JS fills it (CLS) */
}

/* ---------- job cards ---------- */
.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
}
.job-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 14px rgba(20, 50, 60, .07);
  border-top: 4px solid var(--teal);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(20, 50, 60, .12);
}
.badge {
  position: absolute;
  top: -12px;
  right: 18px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.badge.featured { background: var(--amber); color: #3a2f00; }
.badge.new { background: var(--green-dark); color: #fff; right: auto; left: 18px; }
.job-poster {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 14px;
  display: block;
}
.job-card h2 {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 1.3rem;
}
.job-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: var(--muted);
  font-size: .95rem;
}
.job-meta i { color: var(--teal); width: 16px; text-align: center; }
.job-desc {
  margin: 12px 0;
  color: #43565c;
  flex-grow: 1;
  font-size: .97rem;
  white-space: pre-line;
}
.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s ease;
  margin-top: 14px;
}
.apply-btn:hover { background: var(--teal-dark); }

/* ---------- mobile pre-pagination of SSR cards (CLS fix) ----------
   The board pages ship all active cards server-rendered (SEO), but on
   mobile app.js paginates to 20 per view. Before app.js runs, the full
   grid made the page much taller than the first client render, and
   everything below the grid jumped when it collapsed (mobile CLS
   0.337, PageSpeed 2026-10-27; desktop renders all cards, so it never
   shifted). Until app.js completes its first render (it adds
   .board-ready to <body> in renderJobs), hide SSR cards past the 20th
   on the same breakpoint app.js paginates at — the first paint is
   then already the paginated height. After .board-ready, app.js owns
   card visibility entirely (search/filter/show-more), so this rule
   must stay scoped to the pre-ready state. */
@media (max-width: 820px) {
  body:not(.board-ready) #jobListings .job-card:nth-child(n+21) { display: none; }
}

/* ---------- loading / empty states ---------- */
.state {
  text-align: center;
  padding: 48px 20px;
  grid-column: 1 / -1;
  color: var(--muted);
}
.state i { font-size: 2.4rem; color: var(--teal); margin-bottom: 12px; }
.state h2 { color: var(--ink); font-size: 1.17em; margin: 1em 0; }
.state-urdu { font-size: 1.05rem; line-height: 2; color: var(--ink); margin-top: 2px; }

/* ---------- newsletter ---------- */
.newsletter {
  max-width: 620px;
  margin: 56px auto;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.newsletter h2 { text-align: center; color: var(--teal-dark); margin: 0 0 6px; }
.nl-sub { text-align: center; color: var(--muted); margin: 0 0 20px; font-size: .95rem; }
.newsletter input,
.newsletter select {
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  border: 1px solid #cfd9dd;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
}
.newsletter .apply-btn { width: 100%; }
.form-msg { display: none; text-align: center; margin-top: 14px; font-weight: 600; }
.form-msg.ok   { color: var(--teal-dark); }
.form-msg.warn { color: #a35f0e; }
.form-msg.err  { color: #c0392b; }

/* ---------- footer ---------- */
footer { background: var(--teal-deep); color: #cfe0e4; margin-top: 48px; }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 28px;
}
footer h2 { color: #fff; margin: 0 0 10px; font-size: 1rem; }
footer p { margin: 0; font-size: .92rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-links a { color: #cfe0e4; text-decoration: none; font-size: .92rem; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
  padding: 16px 20px;
  font-size: .85rem;
}
/* Explicit colour: without it these links fall back to the browser's
   default link blue (#0000ee), only 1.43:1 on the dark footer.
   #cfe0e4 (same as the footer text and .footer-links) computes to
   9.89:1 against the footer background #10333c — WCAG AA pass
   (PageSpeed contrast audit, 2026-10-27). */
.footer-bottom a { color: #cfe0e4; }

/* ---------- about page ---------- */
.about { max-width: 800px; margin: 0 auto; padding: 36px 20px 8px; }
.about h2 { color: var(--teal-dark); margin-top: 28px; }
.about ul, .about ol { padding-left: 22px; }
.about li { margin-bottom: 8px; }
.note {
  background: var(--teal-soft);
  border-left: 4px solid var(--teal);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .job-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.8rem; }
  .hero { padding: 40px 20px 48px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 12px 0 4px;
    gap: 12px;
  }
  .nav-links.open { display: flex; }
  .footer-inner { grid-template-columns: 1fr; }
  .newsletter { margin: 40px 20px; padding: 24px 20px; }
}

/* ---- Job detail pages (generated by scripts/build.py) ---- */
.crumbs { font-size: .85rem; color: var(--muted); margin: 18px 0 6px; }
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.job-detail {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 4px 14px rgba(20, 50, 60, .07);
  border-top: 4px solid var(--teal);
  position: relative;
  margin: 10px 0 40px;
}
.job-detail h1 { margin: 8px 0 14px; font-size: 1.7rem; line-height: 1.3; }
.job-poster-lg { width: 100%; max-width: 640px; border-radius: 10px; display: block; margin: 0 auto 20px; }
.job-desc-full p { margin: 0 0 14px; line-height: 1.65; }
.job-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; align-items: center; }
.ghost-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600;
  border: 2px solid var(--teal); color: var(--teal); margin-top: 14px; font-size: 1rem;
  transition: background .25s ease, color .25s ease;
}
.ghost-btn:hover { background: var(--teal); color: #fff; }
.job-note { font-size: .85rem; color: var(--muted); }
.details-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  color: var(--teal); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.details-link:hover { text-decoration: underline; }

/* ---- Career guide ---- */
.guide-hero { text-align: center; margin: 26px 0 8px; }
.guide-hero h1 { font-size: 1.9rem; margin-bottom: 8px; }
.guide-hero p { color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; margin: 22px 0 44px; }
.guide-card { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: 0 4px 14px rgba(20, 50, 60, .07); border-top: 4px solid var(--teal); display: flex; flex-direction: column; gap: 10px; }
.guide-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.4; }
.guide-card .ur-title { font-family: 'Noto Nastaliq Urdu', serif; font-size: 1.02rem; line-height: 2.1; margin: 0; }
.guide-card p { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; line-height: 1.55; }
.guide-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.guide-links a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--teal); color: var(--teal); text-decoration: none; font-weight: 600; font-size: .88rem; }
.guide-links a:hover { background: var(--teal); color: #fff; }
.article { max-width: 780px; margin: 12px auto 48px; background: var(--card); border-radius: var(--radius); padding: 36px; box-shadow: 0 4px 14px rgba(20, 50, 60, .07); border-top: 4px solid var(--teal); }
.article h1 { font-size: 1.75rem; margin: 12px 0 6px; line-height: 1.35; }
.article .article-meta { color: var(--muted); font-size: .88rem; margin: 0 0 4px; }
.article .article-intro { font-size: 1.04rem; line-height: 1.7; margin: 14px 0 6px; }
.article h2 { font-size: 1.22rem; margin: 26px 0 10px; color: var(--teal-dark); }
.article ul { margin: 0 0 6px 22px; padding: 0; }
.article li { margin-bottom: 9px; line-height: 1.65; }
.lang-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 9px 18px; border-radius: 999px; border: 2px solid var(--teal); color: var(--teal); text-decoration: none; font-weight: 600; font-size: .92rem; }
.lang-toggle:hover { background: var(--teal); color: #fff; }
.cta-box { margin: 30px 0 6px; padding: 22px; border-radius: var(--radius); background: var(--teal-soft); text-align: center; }
.cta-box p { margin: 0 0 4px; font-weight: 600; }
html[lang="ur"] .article { font-family: 'Noto Nastaliq Urdu', serif; }
html[lang="ur"] .article h1 { line-height: 2.3; }
html[lang="ur"] .article h2 { line-height: 2.3; }
html[lang="ur"] .article .article-intro, html[lang="ur"] .article li { line-height: 2.4; }
html[lang="ur"] .article ul { margin: 0 22px 6px 0; }
html[lang="ur"] .lang-toggle, html[lang="ur"] .cta-box .apply-btn { line-height: 2; }
@media (max-width: 640px) { .article { padding: 22px; } .article h1 { font-size: 1.45rem; } }

/* ---- Homepage career-guide promo banner ---- */
.guide-promo {
  position: relative;
  margin: 24px 0 28px;
  padding: 28px 30px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--teal-deep) 0%, var(--teal) 55%, #2f9e6e 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(20, 80, 90, .28);
  overflow: hidden;
}
.guide-promo::after {
  content: "\f19d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 24px;
  bottom: -24px;
  font-size: 9rem;
  opacity: .1;
  pointer-events: none;
}
.guide-promo-badge {
  position: absolute;
  top: 16px;
  right: 18px;
  background: var(--amber);
  color: #4a3200;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .1em;
  padding: 5px 15px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.guide-promo h2 { margin: 0 70px 8px 0; font-size: 1.4rem; color: #fff; line-height: 1.35; }
.guide-promo p { margin: 0 0 16px; opacity: .95; line-height: 1.6; }
.guide-promo-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.guide-promo-links a {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  text-decoration: none;
  padding: 8px 17px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  transition: background .2s ease;
}
.guide-promo-links a:hover { background: rgba(255, 255, 255, .3); }
.guide-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--teal-deep);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.guide-promo-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
@media (max-width: 640px) {
  .guide-promo { padding: 22px 20px; }
  .guide-promo h2 { font-size: 1.2rem; }
  .guide-promo::after { font-size: 6rem; }
}

/* ---- Recommended: Top 20 pharma companies shelf ---- */
.recommended-section {
  margin: 4px 0 34px;
  padding: 26px 24px 28px;
  background: linear-gradient(180deg, #fffdf4 0%, #ffffff 100%);
  border: 1px solid #f0e2b6;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(180, 140, 40, .09);
}
.rec-head { text-align: center; max-width: 760px; margin: 0 auto 20px; }
.rec-head h2 { font-size: 1.45rem; margin: 0 0 10px; color: var(--ink); }
.rec-head h2 i { color: #d9a419; margin-right: 6px; }
.rec-msg { color: var(--muted); line-height: 1.65; margin: 0; font-size: .98rem; }
.rec-msg strong { color: var(--teal-dark); }
.job-meta.topco { color: #8f6a11; font-weight: 600; }
.job-meta.topco i { color: #d9a419; }
@media (max-width: 640px) {
  .recommended-section { padding: 20px 14px 22px; }
  .rec-head h2 { font-size: 1.2rem; }
}

/* ---- Partner promo: Kitaabcha blog ---- */
.partner-promo { margin: 40px 0 8px; }
.partner-label { text-align: center; font-size: .85rem; letter-spacing: .5px; color: #5b6b68; margin: 0 0 10px; }
.partner-promo a { display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(6,20,23,.22); transition: transform .25s ease, box-shadow .25s ease; }
.partner-promo a:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(6,20,23,.30); }
.partner-promo img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .partner-promo { margin: 30px 0 4px; } }

/* ---- WhatsApp Channel follow strip (added 2026-10-20) ---- */
.wa-follow { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: var(--radius); padding: 14px 18px; margin: 26px 0 4px; }
.wa-follow img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; }
.wa-follow p { margin: 0; flex: 1; font-size: .95rem; color: var(--ink); }
.wa-follow p strong { color: var(--teal-dark); }
.wa-follow-btn { background: var(--green-dark); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.wa-follow-btn:hover { filter: brightness(0.93); }
.job-detail + .wa-follow { margin: 18px 0 26px; }
@media (max-width: 640px) { .wa-follow { flex-wrap: wrap; gap: 12px; padding: 12px 14px; } .wa-follow img { width: 56px; height: 56px; } .wa-follow-btn { width: 100%; text-align: center; } }

/* ---- Are You Hiring? employer CTA ---- */
.hiring-cta { margin: 44px 0; }
.hiring-card { display: flex; align-items: center; gap: 34px; background: linear-gradient(135deg, #eef7f9, #d5e9ee); border-radius: 18px; padding: 34px 36px; box-shadow: 0 10px 30px rgba(6,20,23,.12); }
.hiring-art { width: 290px; max-width: 38%; height: auto; flex-shrink: 0; }
.hiring-text h2 { color: #1d6a80; margin: 0 0 10px; font-size: 1.75rem; }
.hiring-text p { color: #33565c; margin: 0 0 18px; line-height: 1.55; }
.hiring-btn { display: inline-block; }
.hiring-note { font-size: .85rem; color: #4f615c; margin: 14px 0 0 !important; }
.hiring-urdu { background: #fff7e0; border: 1.5px solid #e3a008; border-radius: 10px; padding: 12px 16px; font-size: 1.12rem !important; line-height: 2 !important; color: #6b4e00 !important; text-align: right; }
.vacancy-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 6px; text-align: left; }
.vacancy-form label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; font-weight: 600; color: #1d6a80; }
.vacancy-form input[type="text"], .vacancy-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid #b8d2da; border-radius: 9px; background: #fff; color: #20302f; }
.vacancy-form input[type="text"]:focus, .vacancy-form textarea:focus { outline: none; border-color: #2a7d94; box-shadow: 0 0 0 3px rgba(45,132,158,.18); }
.vacancy-wide { grid-column: 1 / -1; }
.vacancy-check { grid-column: 1 / -1; flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 500 !important; color: #33565c !important; line-height: 1.5; }
.vacancy-check input { margin-top: 3px; width: 17px; height: 17px; flex-shrink: 0; }
.vacancy-form button { grid-column: 1 / -1; justify-self: start; border: none; cursor: pointer; font: inherit; }
@media (max-width: 640px) { .vacancy-form { grid-template-columns: 1fr; } .vacancy-form button { justify-self: stretch; } }

/* ---- Homepage layout 2026-10-19: sticky search + section pills ---- */
.search-sticky { position: sticky; top: 64px; z-index: 90; background: var(--bg); padding: 14px 0 2px; }
.search-sticky .filters { margin-bottom: 8px; }
.home-pills { display: flex; gap: 10px; margin: 12px 0 2px; }
.home-pill { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px; border-radius: 999px; border: 1.5px solid #b8d2da; background: #fff; color: #1d6a80; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; line-height: 1.3; }
.home-pill small { font-size: .7rem; font-weight: 600; color: #577079; }
.home-pill .fas { font-size: 1.05rem; margin-bottom: 2px; }
.home-pill.hiring { background: linear-gradient(135deg, #eef7f9, #cfe7ee); border-color: #2a7d94; color: #14586c; box-shadow: 0 4px 12px rgba(29,106,128,.18); }
.home-pill.hiring small { color: var(--teal-dark); }
.home-pill.active { background: #1d6a80 !important; border-color: #1d6a80 !important; color: #fff !important; }
.home-pill.active small { color: #d6eef7 !important; }
.home-panel[hidden] { display: none !important; }
.home-panel.hiring-cta { margin: 14px 0 8px; }
.home-panel.guide-promo { margin-top: 14px; }
@media (max-width: 768px) {
  .hero { padding: 24px 16px 28px; }
  .hero img { height: 54px; margin-bottom: 8px; }
  .hero h1 { font-size: 1.4rem; margin-bottom: 6px; }
  .hero p { font-size: .92rem; }
  .home-pill { font-size: .84rem; padding: 10px 6px; }
}
@media (max-width: 640px) {
  .hiring-card { flex-direction: column; text-align: center; padding: 26px 22px; gap: 20px; }
  .hiring-art { max-width: 72%; width: 240px; }
}
/* ---- Top-20 companies ranked list (guide page) ---- */
.top20-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.top20-list li { background: #fff; border: 1px solid #cfe4ea; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; color: #1d6a80; box-shadow: 0 3px 10px rgba(6,20,23,.06); }
.top20-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: #2a7d94; color: #fff; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.top20-list .fa-award { color: #f5a623; }

/* ---- Share button + city landing pages ---- */
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--teal); color: var(--teal); background: #fff;
  margin-top: 14px; margin-left: 10px; cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.share-btn:hover { background: var(--teal); color: #fff; }
.job-cta .share-btn { margin-top: 14px; margin-left: 10px; }
.city-intro { color: var(--muted); font-size: 1.05rem; margin: 6px 0 22px; }
.city-jobs { display: grid; gap: 16px; }
.city-job { background: #fff; border: 1px solid #cfe4ea; border-radius: 12px; padding: 18px 20px; box-shadow: 0 3px 10px rgba(6,20,23,.06); }
.city-job h2 { margin: 8px 0 10px; font-size: 1.15rem; }
.city-job h2 a { color: var(--teal-dark); text-decoration: none; }
.city-job h3 a:hover { text-decoration: underline; }
.city-more { margin: 26px 0 40px; color: var(--muted); }