@font-face {
  font-family: "Pixelify Sans";
  src: url('../fonts/PixelifySans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
#employers {
  --navy: #000955;
  --lime: #8ce500;
  --lime-light: #c0ff6b;
  --off: #fefff9;
  --grey: #b4b4b4;
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  overflow: hidden;
  text-align: center;
  font-family: Inter, Arial, sans-serif;
}
#employers .cpt-employers__inner { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
#employers .cpt-section-heading { max-width: 1100px; margin: 0 auto 40px; text-align: center; }
#employers .cpt-section-heading h2 { margin: 0; font: 800 36px/normal Archivo, Arial, sans-serif; }
#employers .cpt-section-heading h2 > span { display: block; }
#employers .cpt-section-heading h2 .cpt-heading-secondary { display: block; font: 100 36px/normal Archivo, Arial, sans-serif; }
#employers .cpt-section-heading p { max-width: 1100px; margin: 40px auto 0; font-size: 24px; line-height: 1.25; }
#employers .cpt-employer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1800px; margin: 0 auto; padding: 0; }
#employers .cpt-employer-card { min-height: 550px; padding: 20px; border: 1px solid #b4b4b4; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
#employers .cpt-employer-number { display: grid; place-items: center; width: 50px; height: 50px; flex: none; margin: 0; padding: 0; background: #8ce500; color: #fff; }
#employers .cpt-employer-card h3 { margin: 39px 0 10px; font: 100 24px/normal Archivo, Arial, sans-serif; }
#employers .cpt-employer-card p { margin: 0; font-size: 16px; line-height: 1.25; }
#employers .cpt-section-cta { display: inline-flex; margin-inline: auto; }
#employers .cpt-barcode { padding: 0; max-width: none; }
@media (min-width: 1001px) {
  #employers {
    padding: 100px 40px;
    background: #000955;
    color: #fefff9;
  }
  #employers .cpt-section-heading { max-width: 1096px; margin: 0 auto 40px; }
  #employers .cpt-section-heading h2 { width: max-content; max-width: 100%; margin-inline: auto; font: 800 36px/39px Archivo, sans-serif; letter-spacing: 0; }
  #employers .cpt-section-heading h2 .cpt-heading-secondary { font: 100 36px/39px Archivo, sans-serif; letter-spacing: 0; }
  #employers .cpt-section-heading p { max-width: 1096px; margin: 40px auto 0; font: 400 24px/29px "CPT Inter Figma", sans-serif; letter-spacing: 0; }
  #employers .cpt-employer-grid { max-width: 1840px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  #employers .cpt-employer-card {
    height: 550px;
    min-height: 0;
    min-width: 0;
    padding: 20px 20px 0;
    border: 1px solid #b4b4b4;
    border-radius: 5px;
    justify-content: flex-start;
    overflow: clip;
  }
  #employers .cpt-employer-card .cpt-employer-number { flex: 0 0 50px; width: 50px; height: 50px; color: #fff; font: 400 32px/38px "Pixelify Sans", sans-serif; }
  #employers .cpt-employer-card h3 { margin: 39px 0 10px; font: 100 24px/26px Archivo, sans-serif; letter-spacing: 0; }
  #employers .cpt-employer-card p { width: 100%; margin: 0; font: 400 16px/19px "CPT Inter Figma", sans-serif; letter-spacing: 0; }
  #employers .cpt-barcode {
    flex: 0 0 100px;
    width: 167px;
    height: 100px;
    margin-top: auto;
    background: #fefff9;
    /* Exact approved child-theme SVG provides the mask geometry. */
    mask: url("../svg/crewpaytech-barcode.svg") center / 167px 100px no-repeat;
    -webkit-mask: url("../svg/crewpaytech-barcode.svg") center / 167px 100px no-repeat;
    transition: background-color .45s;
  }
  @media (hover: hover) and (pointer: fine) {
    #employers .cpt-employer-card:hover .cpt-barcode { background-color: #8ce500; }
  }
  #employers .cpt-section-cta { width: 352px; height: 54px; min-height: 54px; margin-top: 40px; padding: 17px 20px; }
  #employers .cpt-section-cta .cpt-button__label { height: 17px; font: 600 14px/17px "CPT Inter Figma", sans-serif; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) {
  #employers .cpt-barcode { transition: none; }
}

/* Mobile Figma 66:1237. Preserve desktop geometry and the exact local SVG. */
.cpt-employers-mobile-break { display: none; }
@media (max-width: 767px) {
  .cpt-employers-mobile-break { display: initial; }
  #employers { padding: 50px 20px; background: #000955; color: #fefff9; }
  #employers .cpt-section-heading { max-width: 400px; margin: 0 auto 20px; }
  #employers .cpt-section-heading h2 { margin: 0; font: 800 24px/26px Archivo, sans-serif; letter-spacing: 0; }
  #employers .cpt-section-heading h2 .cpt-heading-secondary { font: 100 24px/26px Archivo, sans-serif; letter-spacing: 0; }
  #employers .cpt-section-heading p { margin: 20px 0 0; font: 400 16px/19px "CPT Inter Figma", sans-serif; }
  #employers .cpt-employer-grid { width: 100%; max-width: 400px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #employers .cpt-employer-card { height: 400px; min-height: 0; min-width: 0; padding: 20px 20px 0; border: 1px solid #b4b4b4; border-radius: 5px; justify-content: flex-start; overflow: clip; }
  #employers .cpt-employer-card .cpt-employer-number { flex: 0 0 50px; width: 50px; height: 50px; color: #fff; font: 400 32px/38px "Pixelify Sans", sans-serif; }
  #employers .cpt-employer-card h3 { width: 100%; margin: 39px 0 10px; font: 100 28px/30px Archivo, sans-serif; letter-spacing: 0; }
  #employers .cpt-employer-card p { width: 100%; margin: 0; font: 400 16px/19px "CPT Inter Figma", sans-serif; }
  #employers .cpt-barcode { flex: 0 0 100px; width: 167px; height: 100px; margin-top: auto; mask: none; -webkit-mask: none; background: url('../svg/crewpaytech-barcode.svg') center / 167px 100px no-repeat; }
  #employers .cpt-section-cta { width: 100%; max-width: 400px; height: 54px; min-height: 54px; margin-top: 20px; padding: 17px 10px; }
  #employers .cpt-section-cta .cpt-button__label { height: 17px; font: 600 14px/17px "CPT Inter Figma", sans-serif; }
  #employers .cpt-section-cta:focus-visible { outline: 2px solid #fefff9; outline-offset: 3px; }
}
@media (hover: none), (pointer: coarse) {
  #employers .cpt-section-cta:hover { transform: none; }
  #employers .cpt-section-cta:hover .cpt-button__label::before { transform: translateY(0); }
  #employers .cpt-section-cta:hover .cpt-button__label::after { transform: translateY(115%); }
}

/* Approved standalone responsive bridge; frozen endpoints are outside this query. */
@media (min-width: 768px) and (max-width: 1279px) {
  .cpt-hero.cpt-section,
  #employers {
    --cpt-bridge-gutter: clamp(20px, calc(9.523808px + 2.380952vw), 40px);
    --cpt-bridge-space-md: 20px;
    --cpt-bridge-space-lg: 40px;
  }
  .cpt-hero.cpt-section { padding-inline: var(--cpt-bridge-gutter); }
  .cpt-hero .cpt-hero__content { width: 100%; max-width: 1120px; }
  .cpt-hero .cpt-hero__title { width: 100%; gap: var(--cpt-bridge-space-md); }
  .cpt-hero .cpt-hero__title-primary,
  .cpt-hero .cpt-hero__title-secondary {
    font-size: clamp(40px, calc(19.047616px + 4.761905vw), 80px);
    line-height: clamp(48px, calc(31.238096px + 3.809524vw), 80px);
  }
  .cpt-hero .cpt-hero__title-secondary { white-space: normal; max-width: 100%; }
  .cpt-hero .cpt-hero__paragraph {
    max-width: 600px;
    font-size: clamp(16px, calc(13.904768px + .476190vw), 20px);
    margin-top: var(--cpt-bridge-space-md);
  }
  .cpt-hero .cpt-hero__actions { gap: 10px; }

  #employers {
    padding: clamp(50px, calc(23.80952px + 5.952381vw), 100px) var(--cpt-bridge-gutter);
    background: #000955;
    color: #fefff9;
  }
  #employers .cpt-section-heading { max-width: 1096px; margin: 0 auto var(--cpt-bridge-space-lg); }
  #employers .cpt-section-heading h2,
  #employers .cpt-section-heading h2 .cpt-heading-secondary {
    font-size: clamp(24px, calc(17.714288px + 1.428571vw), 36px);
    line-height: 1.083333;
    letter-spacing: 0;
  }
  #employers .cpt-section-heading p {
    max-width: 1096px;
    margin: var(--cpt-bridge-space-md) auto 0;
    font: 400 clamp(16px, calc(11.80952px + .952381vw), 24px)/1.208333 "CPT Inter Figma", sans-serif;
  }
  #employers .cpt-employer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cpt-bridge-space-md);
    max-width: 1840px;
  }
  #employers .cpt-employer-card {
    flex: 0 0 calc((100% - var(--cpt-bridge-space-md)) / 2);
    height: auto;
    min-height: 400px;
    min-width: 0;
    padding: var(--cpt-bridge-space-md) var(--cpt-bridge-space-md) 0;
    justify-content: flex-start;
  }
  #employers .cpt-employer-card .cpt-employer-number {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    font: 400 32px/38px "Pixelify Sans", sans-serif;
  }
  #employers .cpt-employer-card h3 {
    margin: 39px 0 10px;
    font: 100 24px/26px Archivo, sans-serif;
  }
  #employers .cpt-employer-card p {
    margin: 0 0 var(--cpt-bridge-space-md);
    font: 400 16px/19px "CPT Inter Figma", sans-serif;
  }
  #employers .cpt-barcode {
    flex: 0 0 100px;
    width: 167px;
    height: 100px;
    margin-top: auto;
    mask: none;
    -webkit-mask: none;
    background: url('../svg/crewpaytech-barcode.svg') center / 167px 100px no-repeat;
  }
  #employers .cpt-section-cta {
    width: min(100%, 352px);
    height: 54px;
    min-height: 54px;
    margin-top: var(--cpt-bridge-space-lg);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  #employers .cpt-employer-card { flex-basis: calc((100% - 2 * var(--cpt-bridge-space-md)) / 3); }
}

@media (min-width: 768px) and (max-width: 1279px) and (hover: hover) and (pointer: fine) {
  #employers .cpt-barcode {
    background: #fefff9;
    mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%22167%22%20height%3D%22100%22%20viewBox%3D%220%200%20167%20100%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Group%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%200H0V100H4V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M8%200H6V100H8V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M14%200H12V100H14V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M24%200H22V100H24V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M30%200H28V100H30V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_6%22%20d%3D%22M36%200H32V100H36V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_7%22%20d%3D%22M46%200H44V100H46V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_8%22%20d%3D%22M54%200H50V100H54V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_9%22%20d%3D%22M58%200H56V100H58V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_10%22%20d%3D%22M68%200H66V100H68V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_11%22%20d%3D%22M74%200H70V100H74V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_12%22%20d%3D%22M84%200H82V100H84V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_13%22%20d%3D%22M90%200H88V100H90V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_14%22%20d%3D%22M100%200H92V100H100V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_15%22%20d%3D%22M106%200H104V100H106V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_16%22%20d%3D%22M112%200H110V100H112V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_17%22%20d%3D%22M167%200H114V100H167V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_18%22%20d%3D%22M128%200H126V100H128V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_19%22%20d%3D%22M134%200H132V100H134V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_20%22%20d%3D%22M140%200H136V100H140V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E") center / 167px 100px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%22167%22%20height%3D%22100%22%20viewBox%3D%220%200%20167%20100%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20id%3D%22Group%22%3E%0A%3Cpath%20id%3D%22Vector%22%20d%3D%22M4%200H0V100H4V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M8%200H6V100H8V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M14%200H12V100H14V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M24%200H22V100H24V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M30%200H28V100H30V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_6%22%20d%3D%22M36%200H32V100H36V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_7%22%20d%3D%22M46%200H44V100H46V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_8%22%20d%3D%22M54%200H50V100H54V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_9%22%20d%3D%22M58%200H56V100H58V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_10%22%20d%3D%22M68%200H66V100H68V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_11%22%20d%3D%22M74%200H70V100H74V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_12%22%20d%3D%22M84%200H82V100H84V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_13%22%20d%3D%22M90%200H88V100H90V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_14%22%20d%3D%22M100%200H92V100H100V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_15%22%20d%3D%22M106%200H104V100H106V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_16%22%20d%3D%22M112%200H110V100H112V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_17%22%20d%3D%22M167%200H114V100H167V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_18%22%20d%3D%22M128%200H126V100H128V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_19%22%20d%3D%22M134%200H132V100H134V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3Cpath%20id%3D%22Vector_20%22%20d%3D%22M140%200H136V100H140V0Z%22%20fill%3D%22%23FEFFF9%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E") center / 167px 100px no-repeat;
    transition: background-color .45s;
  }
  #employers .cpt-employer-card:hover .cpt-barcode { background-color: #8ce500; }
}
@media (min-width: 768px) and (max-width: 1279px) and (prefers-reduced-motion: reduce) {
  #employers .cpt-barcode { transition: none; }
}


/* Client revision: four cards with optional global CTAs. Barcode source retained above. */
#employers .cpt-employer-card { padding-bottom: 20px; }
#employers .cpt-employer-card__cta {
  flex: 0 0 54px;
  width: 352px;
  max-width: 100%;
  min-height: 54px;
  height: 54px;
  margin: auto auto 0;
  padding: 17px 10px;
  font-family: "CPT Inter Figma", Inter, sans-serif;
}
#employers .cpt-employer-card__cta .cpt-button__icon { flex: 0 0 40px; }
#employers .cpt-employer-card__cta .cpt-button__label {
  flex: none;
  height: 17px;
  font: 600 14px/17px "CPT Inter Figma", Inter, sans-serif;
}
#employers .cpt-employer-card__cta:focus-visible { outline: 2px solid #fefff9; outline-offset: 3px; }
@media (min-width: 1280px) {
  #employers .cpt-employer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1547px) {
  #employers .cpt-employer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  #employers .cpt-employer-card { height: auto; min-height: 500px; }
}
@media (hover: none), (pointer: coarse) {
  #employers .cpt-employer-card__cta:hover:not(:focus-visible) { transform: none; }
  #employers .cpt-employer-card__cta:hover:not(:focus-visible) .cpt-button__label::before { transform: translateY(0); }
  #employers .cpt-employer-card__cta:hover:not(:focus-visible) .cpt-button__label::after { transform: translateY(115%); }
}

@media (max-width: 767px) {
  #employers .cpt-employer-card__cta { width: min(352px, calc(100% + 30px)); max-width: calc(100% + 30px); align-self: center; margin-inline: -15px; }
}


/* Keep card copy centered between equally reserved heading and CTA areas. */
#employers .cpt-employer-card h3 {
  flex: none;
  min-height: 3lh;
}
#employers .cpt-employer-card p {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-block: 20px;
}



/* Three solution cards share the Section 03 component's 1468px desktop envelope. */
#employers .cpt-employer-grid {
  display: grid;
  width: 100%;
  max-width: 1468px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
}
#employers .cpt-employer-card { width: 100%; }
@media (min-width: 768px) and (max-width: 1099px) {
  #employers .cpt-employer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  #employers .cpt-employer-grid { max-width: 400px; grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  #employers .cpt-employer-card__cta {
    width: min(352px, calc(100% + 30px));
    max-width: calc(100% + 30px);
    align-self: center;
    margin-inline: -15px;
  }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  #employers { padding-inline: 40px; }
}