:root {
	--primary-color: #F04248;
	--secondary-color: #000000;
	--primary-hover: #C0353A;
	--primary60: #F04248;
	--primary70: #C0353A;
	--secondary60: #000000;
}

/* =============================================================
   Savo, Inc. — Careers page brand skin  ·  v3
   Target:  savo-inc.prismhr-hire.com  (PrismHR Hire / HiringThing)
   Paste:   Careers Page → Advanced Customization → Custom CSS
            CLEAR THE BOX FIRST. This replaces v1, v2, and all patches.

   Logo:    Uses the POSITIVE (black) wordmark. The header is white,
            so the mark reads correctly. If a negative/white logo
            turns up later, see the note at the bottom of section 2.

   No full-bleed tricks anywhere in this file — no 100vw, no
   clip-path, no negative margins. Nothing depends on the width of
   the platform's container, which is what kept breaking.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700&family=Figtree:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Savo palette */
  --savo-obsidian: #000000;
  --savo-cloud:    #FFFFFF;
  --savo-echo:     #E8EDF2;
  --savo-aster:    #8EAACC;
  --savo-tone:     #F3B8A8;
  --savo-pulse:    #F04248;
  --savo-spark:    #FD835E;
  --savo-ink:        #1A1A1A;
  --savo-ink-muted:  #4A4A4A;
  --savo-ink-subtle: #6B6B6B;

  --savo-display: 'Roboto Slab', Georgia, 'Times New Roman', serif;
  --savo-body:    'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale measured off savo.ai */
  --t-hero:  clamp(32px, 4.2vw, 54px);
  --t-h1:    34px;
  --t-h2:    28px;
  --t-h3:    20px;
  --t-caps:  15px;
  --t-body:  16px;
  --lh-body: 1.65;

  --savo-radius-lg:   20px;
  --savo-radius-md:   16px;
  --savo-radius-pill: 40px;
  --savo-ease: cubic-bezier(.16, 1, .3, 1);

  --savo-shell:  1200px;
  --savo-gutter: 40px;

  /* Platform tokens */
  --primary-color: #F04248;
  --primary-hover: #FD835E;
  --primary60:     #F04248;
  --primary70:     #FD835E;
}

/* -------------------------------------------------------------
   1. Base + shell
   ------------------------------------------------------------- */
body#savo-inc {
  font-family: var(--savo-body) !important;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--savo-ink);
  background: var(--savo-cloud);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body#savo-inc .content {
  max-width: var(--savo-shell) !important;
  margin: 0 auto !important;
  padding: 0 var(--savo-gutter) !important;
  box-sizing: border-box !important;
}

body#savo-inc p,
body#savo-inc li,
body#savo-inc div,
body#savo-inc span,
body#savo-inc label,
body#savo-inc td,
body#savo-inc input,
body#savo-inc select,
body#savo-inc textarea {
  font-family: var(--savo-body) !important;
}

body#savo-inc h1,
body#savo-inc h2,
body#savo-inc h3,
body#savo-inc h4,
body#savo-inc h5,
body#savo-inc h6 {
  font-family: var(--savo-display) !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--savo-obsidian);
}

/* Deterministic heading scale so the job description renders
   consistently regardless of which levels the posting uses */
body#savo-inc h1 { font-size: var(--t-h1); margin: 0 0 16px; }
body#savo-inc h2 { font-size: var(--t-h2); margin: 44px 0 16px; }
body#savo-inc h3 { font-size: var(--t-h3); margin: 32px 0 12px; }
body#savo-inc h4 { font-size: var(--t-caps); letter-spacing: .04em; margin: 28px 0 12px; }

body#savo-inc a       { color: var(--savo-pulse); transition: color .18s var(--savo-ease); }
body#savo-inc a:hover { color: var(--savo-spark); }
body#savo-inc strong  { font-weight: 700; color: var(--savo-obsidian); }

/* -------------------------------------------------------------
   2. Header — white, positive logo, Echo hairline
   ------------------------------------------------------------- */
#careers-page-header {
  width: auto !important;
  margin: 0 0 56px !important;
  padding: 28px 0 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  border-bottom: 1px solid var(--savo-echo) !important;
  box-sizing: border-box !important;
}

/* Force a single row. The job detail page nests both blocks inside
   one wrapper div, so the wrapper gets flexed too. margin-left:auto
   on the share block pushes it right even if space-between fails. */
#careers-page-header,
#careers-page-header > div:only-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px;
}
#careers-page-header > div:only-child { flex: 1 1 100%; }

#careers-page-header .company-logo {
  flex: 0 0 auto;
  margin: 0 auto 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#careers-page-header img {
  display: block;
  width: auto !important;
  max-width: 150px !important;
  max-height: 46px !important;
  object-fit: contain;
  object-position: left center;
}

#careers-page-header .social-media-links {
  flex: 0 0 auto;
  margin-left: auto !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.social-media-links .title {
  font-family: var(--savo-body) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--savo-ink-subtle) !important;
}
.share.icons { display: flex; align-items: center; gap: 8px; }

/* Direct-child selectors only — recoloring the <mask> paths would
   make the Facebook icon disappear. */
.share.icons svg > path,
.share.icons svg > g > path {
  fill: var(--savo-obsidian) !important;
  transition: fill .18s var(--savo-ease);
}
.share.icons a:hover svg > path,
.share.icons a:hover svg > g > path { fill: var(--savo-pulse) !important; }

/* If you later get a white/negative logo, swap this section's
   background to var(--savo-obsidian), drop the border-bottom, and
   set the two .share.icons fills to rgba(255,255,255,.85). */

/* -------------------------------------------------------------
   3. Intro block — white, matching savo.ai body pages
   ------------------------------------------------------------- */
#custom-html-container { margin: 0 0 64px; }

#custom-html-container .text-block-grey,
#custom-html-container .user-content {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--savo-ink);
}

#custom-html-container .savo-eyebrow {
  font-family: var(--savo-body) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--savo-pulse) !important;
  margin: 0 0 20px !important;
}

#custom-html-container h1 {
  font-family: var(--savo-display) !important;
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--savo-obsidian) !important;
  margin: 0 0 24px !important;
  max-width: 26ch;
}

#custom-html-container p {
  font-family: var(--savo-body) !important;
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--savo-ink-muted) !important;
  max-width: 72ch;
  margin: 0 0 18px !important;
}

#custom-html-container .savo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 0 !important;
}
#custom-html-container .savo-facts li {
  font-family: var(--savo-body) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--savo-ink) !important;
  background: var(--savo-echo);
  border-radius: var(--savo-radius-pill);
  padding: 8px 16px !important;
  margin: 0 !important;
}
#custom-html-container .savo-facts li::before { display: none !important; }

#custom-html-container .savo-rule {
  width: 100%;
  height: 3px;
  border-radius: 0;
  margin: 44px 0 0;
  background: linear-gradient(90deg, var(--savo-pulse) 0%, var(--savo-spark) 100%);
}

/* -------------------------------------------------------------
   4. Body lists — Pulse dot bullets, as on savo.ai
   Also picks up job descriptions on the detail page.
   ------------------------------------------------------------- */
body#savo-inc ul:not(.savo-facts) {
  list-style: none !important;
  margin: 0 0 26px;
  padding: 0 !important;
}
body#savo-inc ul:not(.savo-facts) > li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--savo-ink);
}
body#savo-inc ul:not(.savo-facts) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--savo-pulse);
}

/* Widgets keep native list rendering */
[data-react-class] ul,
.share.icons ul { list-style: initial !important; }
[data-react-class] ul > li::before { display: none !important; }

/* savo.ai sets the Core Four lead-ins in Pulse. Enable if you want
   that — it will also recolor "1-5 years" in the requirements list,
   since both are plain <strong> in the source. */
/*
body#savo-inc li > strong:first-child { color: var(--savo-pulse); }
*/

/* -------------------------------------------------------------
   5. "Career Opportunities" section head
   ------------------------------------------------------------- */
#career-opportunities {
  display: block !important;
  text-align: left !important;
  margin: 0 0 4px;
}
#career-opportunities::before { content: none !important; display: none !important; }
#career-opportunities h1 {
  font-family: var(--savo-display) !important;
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.2;
  text-align: left !important;
  color: var(--savo-obsidian) !important;
  margin: 0 !important;
}
.jobs-content hr { display: none; }

/* -------------------------------------------------------------
   6. Filters
   ------------------------------------------------------------- */
[data-react-class*="JobFilters"] select,
[data-react-class*="JobFilters"] input {
  font-family: var(--savo-body) !important;
  font-size: 14px;
  color: var(--savo-ink) !important;
  background: var(--savo-cloud) !important;
  border: 1px solid var(--savo-echo) !important;
  border-radius: var(--savo-radius-pill) !important;
  padding: 10px 16px !important;
}
[data-react-class*="JobFilters"] select:focus,
[data-react-class*="JobFilters"] input:focus {
  outline: none;
  border-color: var(--savo-pulse) !important;
}

/* -------------------------------------------------------------
   7. Job cards
   ------------------------------------------------------------- */
.jobs-list-container { display: grid; gap: 16px; margin-top: 28px; }

.job-container {
  background: var(--savo-cloud);
  border: 1px solid var(--savo-echo) !important;
  border-radius: var(--savo-radius-md);
  padding: 28px 32px !important;
  margin: 0 !important;
  transition: border-color .24s var(--savo-ease),
              box-shadow  .24s var(--savo-ease),
              transform   .24s var(--savo-ease);
}
.job-container:hover {
  border-color: var(--savo-pulse) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

.job-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.job-content-header a,
a.mobile-apply-link { text-decoration: none !important; }

.job-title-and-category h2 {
  font-family: var(--savo-display) !important;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--savo-obsidian) !important;
  margin: 0 0 12px !important;
  transition: color .18s var(--savo-ease);
}
.job-container:hover .job-title-and-category h2 { color: var(--savo-pulse) !important; }

.job-location {
  display: inline-block;
  font-family: var(--savo-body) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--savo-ink-muted) !important;
  background: var(--savo-echo);
  border-radius: var(--savo-radius-pill);
  padding: 5px 12px;
}

.job-description {
  font-family: var(--savo-body) !important;
  font-size: 15px;
  line-height: 1.6;
  text-align: left !important;
  color: var(--savo-ink-muted) !important;
  max-width: 80ch;
  margin-top: 18px !important;
}

/* Primary button — Pulse fill, white label, matching Get Started */
.job-content-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  white-space: nowrap;
  border-radius: var(--savo-radius-pill) !important;
  background: var(--savo-pulse) !important;
  border: 1px solid var(--savo-pulse) !important;
  color: var(--savo-cloud) !important;
  font-family: var(--savo-body) !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: background-color .24s var(--savo-ease),
              border-color .24s var(--savo-ease),
              transform .14s var(--savo-ease);
}
.job-content-header a:hover .job-content-button {
  background: var(--savo-obsidian) !important;
  border-color: var(--savo-obsidian) !important;
  color: var(--savo-cloud) !important;
}
.job-content-header a:active .job-content-button { transform: scale(.97); }

/* -------------------------------------------------------------
   8. Job detail + application pages
   ------------------------------------------------------------- */
body#savo-inc button,
body#savo-inc .button,
body#savo-inc input[type="submit"] {
  font-family: var(--savo-body) !important;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--savo-radius-pill) !important;
}

/* Secondary button ("Back to Jobs") — best guess at the class.
   If it stays navy-on-grey, inspect it and send me the class list. */
body#savo-inc a.button.secondary,
body#savo-inc .btn-secondary,
body#savo-inc .button-secondary,
body#savo-inc [class*="secondary-button"] {
  background: var(--savo-echo) !important;
  color: var(--savo-obsidian) !important;
  border: 1px solid var(--savo-echo) !important;
}
body#savo-inc a.button.secondary:hover,
body#savo-inc .btn-secondary:hover,
body#savo-inc .button-secondary:hover {
  background: var(--savo-cloud) !important;
  border-color: var(--savo-obsidian) !important;
}

body#savo-inc input[type="text"],
body#savo-inc input[type="email"],
body#savo-inc input[type="tel"],
body#savo-inc textarea,
body#savo-inc select {
  border-radius: 10px !important;
  border: 1px solid var(--savo-echo) !important;
}
body#savo-inc input:focus,
body#savo-inc textarea:focus,
body#savo-inc select:focus {
  outline: none;
  border-color: var(--savo-pulse) !important;
}

/* -------------------------------------------------------------
   9. Footer — contained black block
   ------------------------------------------------------------- */
.footer { margin-top: 88px; padding-bottom: 40px; }

#careers-page-footer {
  width: auto !important;
  margin: 0 !important;
  padding: 56px 44px !important;
  background: var(--savo-obsidian) !important;
  box-shadow: none !important;
  clip-path: none !important;
  border-radius: var(--savo-radius-lg);
  box-sizing: border-box !important;
  color: var(--savo-cloud);
}

#careers-page-footer h4 {
  font-family: var(--savo-display) !important;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--savo-cloud) !important;
  margin: 0 0 12px !important;
}

#careers-page-footer .get-updates-copy {
  font-family: var(--savo-body) !important;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .75) !important;
  max-width: 58ch;
  margin-bottom: 20px;
}

#careers-page-footer input[type="email"],
#careers-page-footer input[type="text"] {
  font-family: var(--savo-body) !important;
  font-size: 15px;
  min-width: 280px;
  padding: 12px 20px !important;
  color: var(--savo-cloud) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;
  border-radius: var(--savo-radius-pill) !important;
}
#careers-page-footer input::placeholder { color: rgba(255, 255, 255, .5); }

#careers-page-footer button,
#careers-page-footer input[type="submit"] {
  height: 46px;
  padding: 0 26px !important;
  cursor: pointer;
  background: var(--savo-pulse) !important;
  color: var(--savo-cloud) !important;
  border: none !important;
}
#careers-page-footer button:hover,
#careers-page-footer input[type="submit"]:hover { background: var(--savo-spark) !important; }

#copyright-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
}
#copyright-links,
#copyright-links .copyright,
#copyright-links .login-subscribe {
  font-family: var(--savo-body) !important;
  color: rgba(255, 255, 255, .55) !important;
}
#careers-page-footer a       { color: var(--savo-tone) !important; text-decoration: none; }
#careers-page-footer a:hover { color: var(--savo-spark) !important; }

/* -------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --savo-gutter: 20px; }

  #careers-page-header { padding: 20px 0 16px !important; margin-bottom: 40px !important; }
  #careers-page-header img { max-width: 118px !important; max-height: 38px !important; }
  .social-media-links .title { display: none; }

  #custom-html-container { margin-bottom: 48px; }
  #custom-html-container h1 { max-width: none; }
  #custom-html-container p { font-size: 17px; }

  #career-opportunities h1 { font-size: 28px; }
  .job-container { padding: 24px 22px !important; }
  .job-content-header { flex-direction: column; align-items: flex-start; gap: 18px; }
  .job-content-button { width: 100%; }

  #careers-page-footer { padding: 40px 26px !important; }
  #careers-page-footer input[type="email"] { min-width: 0; width: 100%; }
}